ウェブデザインに手​​描きスタイルを使用すると、ウェブサイトのユーザーエクスペリエンスが向上します。

ウェブデザインに手​​描きスタイルを使用すると、ウェブサイトのユーザーエクスペリエンスが向上します。

[コアヒント] 手描き風のスタイルをウェブページに適用してウェブサイトのユーザーエクスペリエンスを向上させる方法

この記事では、Web ページのユーザー エクスペリエンスを向上させるために、Web ページに手描きスタイルを適用する方法について説明します。

認識と信頼性

手描きスタイルは、人間の色彩を表現し、独特の認識を形成し、ユーザーに現実感をもたらすのに非常に役立ちます。友人からポストカードを受け取ったとき、そのカードがコンピューターで印刷されたものではなく、友人独自の筆跡で手書きされたものであることを常に望みます。手書きのメモは、印刷されたメモよりも常にカジュアルで親密な印象を与えます。

同じ原則が Web デザインにも当てはまります。手描きや手書きのスタイルを使用すると、製品の独自性、信頼性、信頼性が高まります。手描きスタイルが認識性とリアリティをもたらす方法の例を 3 つ紹介します。

ユニークな外観と感触

まず、手描きスタイルは独特の外観と雰囲気を与えます。有名なプロトタイピングおよびワイヤーフレーム ツールである Balsamiq が典型的な例です。 Balsamiq の機能は強力かつ複雑ですが、その外観と操作感は非常にシンプルで明確です。アプリケーションの手描きスタイルは、基本的なペンと紙のスケッチを思い出させ、ユーザーは製品の外観の詳細を気にすることなく、基本的な機能のプレゼンテーションに集中できます。同時に、この外観はバルサミク自体の独特なスタイルも形成しています。

認識とパーソナライゼーション

手描きスタイルはより高い認知度をもたらし、ユーザーに製品を覚えてもらいます。たとえば、Windows の有名なコード エディターである Notepad++ の新しいロゴは次のとおりです。

カメレオンのメインパターンは、製品自体の機能を完璧に示しているだけでなく (コードの蓄積と変更を強調表示)、アイコン自体も非常にかわいらしく見えるため、ユーザーの注目を集め、ユーザーが Notepad++ を競合のエディター製品と区別するのに役立ちます。

人間化と親密さ

手描きのスタイルは人間味と親密感をもたらします。製品によって提示されるコンテンツの背後には実際の人間がいて、その人々が製品の詳細を慎重に検討したことをユーザーに伝え、より現実的で信頼できるものにします。

iPad の有名な子供向け算数練習アプリである MathBoard は、黒板の見た目と感触を再現しており、子供たちは「黒板」に自分の手で直接数字を書くこともできます。この設定により、算数の練習が冷たく退屈なものではなくなり、人間味が加わり、使いやすく魅力的なものになります。

情報伝達とコンテンツ構築

情報がどのように伝達されるかによって、ユーザーが情報を見て理解するかどうかが決まります。手描きスタイルは情報をより効果的かつ明確に伝えることができます。ここに3つの例を挙げます。

製品の特徴を説明する

製品の機能を説明するには数行のテキストが必要になる場合がありますが、手書きの場合は 1 枚の画像で十分です。有名なアプリテストサービスである TestFlight は、Web サイトで機能を紹介する際に、テキストの説明に添える 4 つの付箋スケッチを使用しています。製品の機能に関する情報を提供すると同時に、Web サイトをよりグラフィック化して読みやすくします。

ワークフローのデモンストレーション

製品の操作における最初のステップと 2 番目のステップで何をすべきかを長い段落で説明する代わりに、各ステップにわかりやすい手描きの図を用意して読みやすさを向上させ、使用するテキストの量を大幅に減らすことをお勧めします。

ユーザーをガイドする

手描きのアイコンを使用すると、ユーザーを製品や Web サイトのさまざまな部分に誘導するのに効果的です。例えば、先ほど紹介した Stamped では、ウェブサイト上で漫画風の画像を使用して、ユーザーをさまざまなタイプのウェブページに誘導しています。

チームショーケース

ユーザーは常に、Web サイト、製品、またはサービスの背後にいる人々を知りたがっているため、愛情のあるチーム表示ページは特に重要です。連絡先情報を提供するだけでは十分ではありません。ユーザーに連絡を取る相手の人柄や精神を示し、チームが親しみやすく信頼できるものであることをアピールする必要があります。この目標を達成するには、手描きの絵を使用するのが良い方法です。例えば ​​-

Knock Knock Factory チームのメンバーは、次の方法を示します。

Polecat の全体的なプレゼンテーション:

そして、手書きフォントでグローブの実際の写真が表示されます。

ストーリーテリング

手描きの絵の最も古く、最も一般的に使われている機能は、物語を伝えることです。製品の機能を説明する場合でも、製品に対するユーザーの印象を深める場合でも、手描きの絵を使って物語を伝えることは効果的な方法です。

たとえば、有名なプロトタイピング ツール Axure のホームページには、ユーザー エクスペリエンス担当者とプロダクト マネージャーが自分の仕事について不満を述べているシンプルな絵が掲載されています。ユーザーの共感を呼び、製品に対する好感度を高めることができます。

Tourist Eye は、3 つの漫画を使用して自社製品の機能を説明しています。

ユーザーの注目を集める

ユーザーにどこかをクリックするように促したい場合は、手描きの円と矢印が適しています。たとえば、次のようになります。

場合によっては、複数の矢印を使用することも可能です。

もちろん、いつ止めるべきかを知っておく必要があります。手描きの矢印を乱用すると、逆効果になります。

元の URL: http://www.geekpark.net/read/view/167258


元のタイトル: ウェブデザインに手​​描きスタイルを使用すると、ウェブサイトのユーザーエクスペリエンスが向上します

キーワード: ウェブページ、Ji Zhongshou、描画スタイル、アプリケーション、改善、ウェブサイト、ユーザー、エクスペリエンス、コア、ウェブマスター、ウェブサイトのプロモーション、収益化

<<:  百度のサイトリンク機能の廃止はブランドプロモーションに支障をきたす恐れ

>>:  Googleの障害事件からインターネットの動作原理を理解する

推薦する

イベントマーケティングを活性化させる核となるステップ

2018年最もホットなプロジェクト:テレマーケティングロボットがあなたの参加を待っています情報技術の...

NetApp: 2019年、クラウドからエッジコンピューティング、コンテナまで、デジタル経済が主流になり始めました

過去 10 年間はデジタル経済の成熟期であり、特に過去 8 年間は前例のないデータ増加率を目の当たり...

百度の爆発的なインデックス増加の核心スキル

Baidu の包含をいかに迅速に増やすかは、多くのウェブマスターにとって常に頭痛の種でした。ウェブサ...

企業のウェブサイトは、Baidu のホームページでどうやって生き残ることができるのでしょうか?

最近、百度のエンジンはGreen Radish 2.0から大きく変わったことに気づきました。もともと...

大規模アプリケーションで Apache Kafka を使用するための 20 のベスト プラクティス

[51CTO.com クイック翻訳] Apache Kafka は、人気の分散データ ストリーム プ...

アクターモデルは分散型の高並列処理に非常に適しています

最初に書く一般的に、同時実行スレッド間の通信には、データの共有とメッセージの受け渡しという 2 つの...

キーワード選択戦略がウェブサイトの最適化に与える影響についての簡単な説明

ウェブサイトのウェブマスターとして、キーワード最適化がネットワーク最適化において非常に重要な位置を占...

エッジ コンピューティング、クラウド コンピューティング、フォグ コンピューティングは自動運転に何をもたらすのでしょうか?

エッジコンピューティング、フォグコンピューティング、クラウドコンピューティングは自動運転の分野でどの...

#黒5# gcorelabs: 専用サーバー、30% 割引、香港/韓国/日本/ロシア極東の 41 のデータセンターなど...

gcorelabs は、今から 12 月 6 日まで、ブラック フライデー プロモーションを開始し、...

2020 年に知っておくべきハイブリッド クラウドの統計 10 項目

ハイブリッド クラウド戦略を採用している企業はいくつありますか?いくつかの統計を調べてみましょう。統...

250vps - $2.12/1g メモリ/25g ハードディスク/2CPU/5T トラフィック/G ポート/フェニックス シティ/DDOS 保護

250vps.com は新しい会社 (皆さん、安心してください) で、agavenetworks.n...

電子商取引の配送遅延や紛失が頻繁に発生:消費者が権利を守るのは困難すぎる

【捜狐ITニュース】2月14日、中国国際放送の「新聞新聞ダイジェスト」によると、春節期間中、ほとんど...

Tripodcloud: 米国の3ネットワークcn2 gia vps(1Gbps帯域幅)の簡単な評価、ピーク時の高速性と強力なパフォーマンス

Tripodcloudは私が今まで見た中で最も仏教的なビジネスの一つかもしれません。親会社は2011...

bluevm2 USD/月 256M メモリ/512M バースト 6 つのデータセンター

bluevm の最新プロモーション: 割引コード LOWENDBOX を使用すると 20% 割引にな...

#推奨# bacloud: 20% 割引/E3-1230v6/16gDDR4/2*1T/50T トラフィック

有名なリトアニアのホスティングプロバイダー bacloud は、ハロウィーン専用サーバープロモーショ...