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

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

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

この記事では、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の障害事件からインターネットの動作原理を理解する

推薦する

hostmybytes - 新しいマシン/CN2ラインVPSの年間支払いは12ドルから、AliPay

hostmybytes から最新のプロモーション メールを送信しました: 元の割引 VPS マシンは...

Redisson 分散ロック ソースコード 10: 読み取り書き込みロック

[[409489]]序文Redisson は再入可能な読み取り/書き込みロックもサポートしており、分...

Django-crontabはDjangoのスケジュールされたタスクを実装します

1. はじめにレポートを作成するために、Aizhan から毎日 Baidu トラフィックと競合他社の...

Zhihu は収益化のために電子商取引に依存していますか?

「ねえ、今からZhihuで買い物してもいい?」長い間知湖を訪れていなかった小呉さんは、ウェブサイトに...

インターネット業界のクラウドへの道

ビジネスの急速な成長に伴い、インターネット業界では通常、急速なビジネスの変化と製品の急速な反復および...

GitLabCI テンプレートライブラリのパイプライン最適化の実践

[[441815]]以前のディレクトリ構造に従って完了します。ジョブ ディレクトリは、ジョブ テンプ...

コンテンツを流行させるためのアイデア

私たちは知らないうちに愛国マーケティングの罠や、いわゆるテンセントアバターカラフルマーケティングの罠...

Ctrip の面接官は実際に Java 仮想マシン スタックについて質問しました。

[[393190]]みなさんこんにちは、私はいつまでも18歳のおばけです~ 「JVM メモリ領域の分...

クラウド コンピューティングに隠された 10 の秘密

[[410358]]今日のビジネス テクノロジーにおいてクラウドが何を意味するのかを正確に定義できる...

テンセントクラウド:1499元/3年、6M帯域幅/4gメモリ/2コア/50gハードディスク/上海+広州データセンター、ライセンスWindows付き

Tencent Cloudは超割引プロモーションや毎日4回のフラッシュセールで顧客を獲得し始めていま...

例は、ホットワードの代替思考が非常に重要であることを示している

ウェブサイトの最適化やオンライン マーケティングを行う際には、トラフィックは複数のチャネルから来るべ...

Fatcow - 期間限定 $49/年、無料ドメイン名、無制限のウェブサイト構築、無制限のホスティング

fatcow は現在、期間限定の特別プロモーションを実施しており、年間支払いはわずか 49 米ドル ...

ファンを効率的に変換するにはどうすればいいですか? Fishpondによるデジタルマーケティング

月収10万元の起業の夢を実現するミニプログラム起業支援プラン「いいね!」を集め、オフラインで商品を宣...

分散データベースアーキテクチャの設計特性の包括的な説明

【51CTO.comオリジナル記事】業界背景世界経済への下押し圧力が高まるにつれ、米中貿易摩擦は激化...

SEO は難しいのに、なぜ多くの人が SEO に取り組むのでしょうか? 真実はどこにあるのでしょうか?

インターネットの発展は、確かに多くの産業に発展の春をもたらしました。例えば、伝統的な手作りのスクエア...