ツールベースのウェブサイトの考察: ツールベースのウェブサイトの定義と典型的なケース分析 (写真とテキスト)

ツール型ウェブサイトに入る - 解釈と典型的なケース Sanlian Tutorial

ツール型ウェブサイトについて、まず疑問に思うのは、無数のオンラインウェブサイトの中で、どのようなウェブサイトがツール型ウェブサイトと見なされるのか、その特徴は何で、他のウェブサイトとどう違うのか、ということです。インターネットで関連情報を検索したところ、この用語の具体的な定義については明確な説明がないことがわかりました。
今後の研究に役立てるため、これまでの学生の研究成果を統合し、ツール型ウェブサイトの定義版を参考資料として提供します。
——いわゆるツール型ウェブサイトは、その名の通り、インターネット上に構築されたツールであり、特定の分野で人々が目標ニーズを満たすために提供され、一定の操作プロセスを持ち、目標タスクの完了を主な目的とする、ネットワークアプリケーションに基づくツールを指します。
主な機能は次のとおりです。
– 1 つ以上のタスクを完了することを目指します – 操作プロセスのガイドに重点を置いています – タスクを迅速に完了することを重視しています – 目標を達成するための唯一の手段ではなく、ユーザーがより効率的に目標を達成できるように支援するだけです
同時に、多くのツール型ウェブサイトには独立したポータルも装備されており、主に情報を表示し、ツールの価値、動向などを具体的に紹介し、ログインやダウンロードの入り口を提供するために使用されます。このポータルとツールページは高度に統合されているため、ツール型ウェブサイトのカテゴリに分類し、ツール型ウェブサイトポータル（またはツールウェブサイトホームページ）と呼びます。
ツール型ウェブサイトの概念をより直感的に理解するために、ウェブサイトをその機能に基づいてコンテンツ型ウェブサイトとツール型ウェブサイトに分類することができます。ツールベースのウェブサイトとコンテンツベースのウェブサイトの対比や違いについては、すでに何人かの学生が詳しく説明しているので（詳しく知りたい場合は、関連記事を読んでください）、ここでは繰り返しません。
代表的なツールの Web サイトには、Google シリーズ (検索、翻訳、ドキュメント、リーダーなど)、Tenpay、Alipay、Data Cube、salesforce、xero、TA、DNSpod などがあります。
典型的なコンテンツベースの Web サイトには、Sina、Tencent、Tianya Forum などがあります。
以下では、経験的な観点から私が気に入っているツール型ウェブサイトの代表的な例をいくつか紹介します。
Google - 一貫性こそが重要
ツール型のウェブサイトの場合、最も広く使用されているのは、Google 検索、翻訳、ドキュメントなど、私たちがよく知っている Google シリーズの製品であるはずです。そのほとんどは、Google 検索の後に徐々にリリースされた新しいツールです。これらのツールはネットユーザーのインターネット生活に大きな利便性をもたらします。
製品ラインが非常に多いため、機能属性の違いにより異なるビジュアルスタイルが簡単に作成されます。しかし、Google のマルチプロダクトシステムにおけるビジュアルスタイルは、ナビゲーションバー、カラーシステム、基本的なレイアウト構造などの点で非常に統一されていることがわかります。たとえば、すべての背景レイヤーは黒、白、グレーで、すべての新機能は目を引く赤いボタンで、すべての機能メニューは左側にあります。
この一貫性により、新製品に対するユーザーの認知コストと学習コストが大幅に削減され、ユーザーは新製品に慣れることができます。これは、ブランドイメージとエクスペリエンス仕様に関する Google エクスペリエンスチームの強力な策定および実行能力を反映しています。

Xero - 斬新でありながら非常に実用的<br />以下の Xero は典型的な斬新なデザインです。私がこのデザインを気に入っている理由は、シンプルでありながら単純化しすぎず、美しいけれども派手ではないという点です。これは、Web サイトの機能的な位置付けと一致しています。
Xero は、現金出納帳、総勘定元帳、請求書、レポートなどの出力機能を備えた、中小企業向けの総合的な会計ツールです。会計ツールのウェブサイトとして、ユーザーの最も重要な要求は、もちろんセキュリティと正確性です。そのため、Xero は、ポータルと製品ページで中程度の明るさの青と緑を使用してそれを表現することに非常に敏感でした。同時に、画像と構造は水平と垂直で安定しており、究極の安全で信頼できる雰囲気を作り出しています。
情報表示の面では、Xeroポータルは、空白スペースが多く、大小のフォントのコントラストが強いなど、Web2.0の典型的な特徴を備えています。製品ページでは、各コントロールの視覚要素が可能な限り削減されています。たとえば、表には垂直のワイヤーフレームがなく、グラフは色が統一され、ボタンはテクスチャが簡素化され、一般的なリンク、ヘッダー、タブを含むすべてのクリック可能なテキストはすべて青色などです。これを行う目的は、大量のテキストデータが不要な詳細によって邪魔されることを防ぎ、テーマを一目で明確にし、ユーザーがクリーンで快適な環境でタスクをすばやく完了できるようにすることです。
この製品は、かつてニールセン・ノーマン・グループによってベストアプリケーションUI 10に選ばれました。

Fork – クリエイティブなイラストがブランドイメージを高める<br />ツールベースのウェブサイトでは、ツール自体がユーザーにもたらす価値がウェブサイトの成否を決定づける要因となることは間違いありませんが、ポータルは製品ショーケースのような役割も果たし、訪問者が製品の目的や価値をすぐに理解し、使用できるようにします。したがって、ポータルの成功は Web サイトにも重要な影響を及ぼします。色彩、レイアウト、イラストを工夫して、ポータルをできるだけ目を引くものにし、訪問者の支持を得ることは、ビジュアルデザイナーにとって大きな課題です。下のフォードは、イラストの創造性の点で典型的な例です。その注目すべき状況的デザインの特徴は目を引くものです。
招商銀行と言えばヒマワリを思い浮かべる。テンセントと言えばペンギンを思い浮かべる。Mailchimpと言えば郵便配達猿を思い浮かべる。では、フォークと言えば、フォークを持って小舟に座っているこのかわいい年老いた漁師を思い浮かべるべきだ。ロゴは目立たないかもしれませんが、このスポークスマンとのコントラストにより、このツールは本当に忘れられないものになっています。よく見ると、内部のいくつかのページに海をテーマにしたイラストデザインがあることに気づきます。これを見ると、同じことに詳しくない人でも、ダウンロードをクリックして試してみようという気になるのではないでしょうか。
ポータルページフレームワークでは、人気のレスポンシブ Web デザインモデルが採用されており、ブラウザーを拡大/縮小したり、携帯電話からアクセスしたりしたときにレイアウトが微調整され、視覚的なコミュニケーションの整合性が反映されることは特筆に値します。
ツール型ウェブサイトポータルのエクスペリエンスデザインに関しては、Xiao Yivan が詳細な研究を行っていますので、こちらをご覧ください。

Wufoo——シンプルさの追求から生まれる体験イノベーション
ツールタイプのウェブサイトは、通常、よりフォーマルな目的を持っています。そのようなウェブサイトを見ると、そのほとんどは寒色系を使用しています。そのため、Wufooを初めて見たとき、とても特別だと感じました。広い領域に暖色系を使用し、丸い角の弧も比較的大きく、リラックスしてカジュアルに見えます。理由を理解する前に、まずこの製品の目的と価値提案を理解しましょう。
Wufoo は主に、オンラインフォーム、招待状、簡単な注文支払いの作成、招待状の送信、スケジュールの管理に使用されます。製品側が Wufoo に期待していることは、「Wufoo の主な機能は、誰でも HTML フォームを作成できるようにすることですが、最終的にはインターネット上で情報を収集する最も簡単な方法となることを目指しています。」です。
そのため、暖色系を使用することで親近感を演出し、ユーザーの敷居を下げ、仕事でもプライベートでも誰でも使える商品だと感じてもらうことができます。このシンプルで使いやすい価値コンセプトは、色彩だけでなく、左右にフリップアップするオプション設定、フォームフィールドを追加する斬新な方法、考え抜かれた入力ウィザードなど、ウェブサイトのタスクフロー全体のインタラクティブなフレームワーク設計にも反映されており、まさに斬新な体験ができるウェブサイトです。
このウェブサイトは、ニールセン・ノーマン・グループのベストアプリケーションUI 10にも選ばれました。

どこもかしこも落ち着いた雰囲気のテンペイ<br />リニューアルしたテンペイを初めて見た時、ホームページの写真に惹かれました。男性と女性の主人公は優しく寄り添い合い、それぞれの携帯電話をいじりながら、幸せそうで気楽な様子でした。人々の生活に密着したこの幸せな光景は、まさにこのスローガンを完璧に表現しています。同時に、ウェブサイト全体のスタイルは、人々にシンプルさと気楽さを感じさせます。実際、改訂された情報構造は確かにより快適になり、重要なポイントがより顕著になり、プロセスもよりスムーズになりました。

Tenpayの情報レイアウト構造がこれまでのものとはかなり異なっていることにお気づきでしょうか？
先ほどのツールページは、インターフェイス要素としてツリーやテーブル、各種コントロールが中心で、レイアウト構造はアプリケーションに近いものでした。しかし、Tenpay は要素構造がオープンが中心で、コントロールフレームワークの制約が少なく、テーブルの表示形式が柔軟で、ガイドとなるテキスト情報が多く、Web ページのレイアウトに近い典型的なツール型 Web サイトとなっています。その他の同様のサービスには、Alipay、Tencent Security Center、Recharge Center などがあります。
では、これらがすべてツールベースの Web サイトであるのに、要素レイアウトの適用にこれほど大きな違いがあるのはなぜでしょうか?
つまり、前者はクライアントエクスペリエンスのデザイン思考から開発され、後者は初期のウェブページのデザイン思考に基づいて開発されているからです。簡単な例としては、前者の情報プロンプトでは、一般的に支払いレイヤーがポップアップ表示される傾向があるのに対し、後者では現在のページに情報プロンプトが表示される傾向があります。もちろん、現在では両者は互いに影響し合い、その差は徐々に縮まっています。
新しい技術と新しい開発。画面解像度がますます大きくなり（CNZZの統計によると、2012年1月には1024*768の市場シェアは28.8%に低下し、2位の1440*900の21%との差はますます縮まり、多様化の傾向を示しています）、ネットワーク速度がますます高速化しているため、これらの新しいWebページ技術は、ウォーターフォールフロー、リッチメディアアプリケーション、大きな画像の背景塗りつぶしなど、先ほど述べたレスポンシブWebデザインなどのツール型Webサイトでもより多く使用され、必然的に私たちのビジュアルデザインに新しいアイデアが生まれ、より創造的な改善の余地がもたらされることが予測されます。
上記はツール型ウェブサイトの予備的な分析に過ぎません。実際、ツール型ウェブサイトはエクスペリエンスデザインの面で自己完結型のシステムとも言え、より深い研究と学習の余地があります。もっと多くの関心のある学生が来て、深く議論することを歓迎します。（文：テンセントCDC）

<<: CSS設定div背景画像実装コード

>>: LeetCode の SQL 実装 (182. 重複するメールボックス)