デザイン理論: テキストの読みやすさと可読性

デザイン理論: テキストの読みやすさと可読性
<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストールしました。ちょうどその頃、グラフィックデザインの仕事をしている友人がデザインについて相談に来ました。私がノートパソコンの前でURLを入力しようとしたとき、友人が私のパソコンに近づいてきて、「おい!君も私の昔の同級生の「ガオ・リャン」を知っているだろう!」と叫びました。
あまりの怖さに冷や汗が出ました。

ほぼすべての製品でテキストが使用されています。小さなエラー、警告、プロンプトメッセージから、大きな紹介、特別な計画、広告コピーまで。テキストに問題がある場合は、修正にかかる費用は非常に安価です。しかし、テキストのユーザビリティが良くないと、製品に直接影響を及ぼします。
私はテキストのユーザビリティを、読みやすさ可読性の2 つの側面として理解しています。
認識とは、インターフェイスにテキストが表示されたときにユーザーがそれを正常に読めるかどうかを指します。デザインで遭遇する最も一般的な問題は、フォント、フォント サイズ、行間隔、テキストの間隔に関するものです。中国のWEBデザインでは、12サイズと14サイズの宋字フォントが最もよく使われています。いくつかの国内主要ポータルサイトを見ると、これは中国のネットユーザーの読書習慣になりつつあります。
リストや長い段落のテキストに遭遇した場合は、行間隔にも注意する必要があります。たとえば、Songti フォント サイズ 12 を使用する場合、通常は 18 ~ 20 ピクセルの行間隔を使用します。 Songti フォント サイズ 14 では通常、行間隔は 22 ~ 24 ピクセルになります。

WEB をデザインする場合、グラフィックデザインでは単語間のスペースを考慮する必要はなく、デフォルトの状態をそのまま使用します。
しかし例外もあります。ニュースページのタイトルなどでは、18 ポイントの太字フォントや Song スタイルのフォントが使用されることがあります。
UCDCHINA.COM の記事の上部右側に「-」と「 」の記号があることを特に言及することが重要です。

これは、視力の弱い読者や高齢者の読者が大きなフォントを必要とする場合に配慮されたデザインです。
「 」機能を使用すると、テキストの読みやすさを向上させることができます。
同時に、デザイナーはテキストの色、太字、配置、コントラスト、リンク スタイルなどの問題も考慮する必要があります。特定の情報を強調するために、通常はテキストを太字にしたり、フォントの色を変更したりしますが、注意して使用する必要があります。次のように強調しすぎると、強調しないのと同じになります。

保守的なデザイナーの中には、リンクされたテキストに下線を付けることを強く要求する人もいますが、大きな領域に下線付きのリンクが表示されることに非常に嫌悪感を抱くデザイナーもいます。
重要なのは下線の問題ではなく、リンクのあるテキストは他のテキストと明確に区​​別する必要があるということだと思います。のように:

読みやすさの面では、多くの問題が発生する可能性があり、デザイナーは問題に遭遇したときにそれを排除する方法を学ばなければなりません。よく発生する問題は用語です。製品を設計するときには、無意識のうちに用語を使用することが多いためです。多くの用語は私たちにとっては簡単ですが、対象ユーザー グループにとっては簡単ではありません。
たとえば、「ISP」という用語の使用を避け、代わりに「インターネット サービス プロバイダー」と言います。ユーザーに「PV」ではなく「トラフィック」などを伝えます。
用語を当然のこととして受け止めるのではなく、ユーザーの言語を使用するように努めるべきです。用語を使用する必要がある場合は、毎回一貫性を持たせてください。 「検索」、「発見」、「クエリ」を異なるタイミングで使用しないでください。一貫性がないと、ユーザーの学習コストが増加します。
もう一つのよくある問題は、曖昧さと意味の不明瞭さです。
例えば、前述の「ハイライト」は、実は、クラスメイトをガオ・リャンと関連付けるかどうかが重要なポイントではなく、「ハイライト」が表す機能が混乱を招きます。誰が誰をハイライトするのか、なぜハイライトするのか、
ハイライトしなくても大丈夫ですか?高くなったり明るくなったりしますか?これは誤解の問題ではなく混乱の問題です。それが何のためにあるのかわからなければ、当然、あえて使用することはありません。

<<:  React 手書きタブ切り替え問題

>>:  CSS でテキストシャドウと要素シャドウ効果を使用する

推薦する

HTML CSS の 3 つの一般的なスタイル セレクター

1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...

Linux での VMWare15.5 のインストールに関するチュートリアル

Linux に VMWare をインストールするには、公式 Web サイト https://www....

Vue ユニットテストに推奨されるプラグインと使用例

目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...

Linux での MySQL 5.6 バイナリのインストール プロセス

1.1 バイナリインストールパッケージをダウンロードするhttps://dev.mysql.com/...

Vue は Websocket カスタマー サービス チャット機能を実装します

この記事では主に基本的なチャットの実装方法を紹介します。今後は絵文字や写真のアップロードなどの機能も...

CSS3 を使用して 3D テキスト ホバー効果を実装するサンプル コード

この記事では、3D テキストのホバー変更効果を実現するための CSS3 のサンプル コードを紹介しま...

Vueフレームワークで習得しなければならない重要な知識を学びます

1. Vueとは何かVue は、ユーザー ページを構築するためのプログレッシブ フレームワークです。...

Vue でスクロールバーのスタイルを変更する方法

目次まず、スクロール バーのスタイルを変更するには、疑似要素-webkit-scrollbarを使用...

HTML で 2 つの div タグの間に垂直線を描く方法

最近、インターフェースを描画しているときに、インターフェースに垂直線を描画し、この垂直線の高さが親 ...

MySQL ステートメントコメントの紹介

MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...

一般的な Nginx のテクニックと例の概要

1. 複数サーバーの優先順位たとえば、各サーバー ブロックがポート 80 をリッスンする場合、www...

iview権限管理の実装

目次iview-admin2.0 組み込み権限管理権限に基づいてコンポーネントの表示を制御するカスタ...

Centos7のFirewalldファイアウォールの基本コマンドの詳細な説明

1. Linuxファイアウォールの基礎Linux ファイアウォール システムは主にネットワーク層で動...

nginx で HSTS を有効にしてブラウザを HTTPS アクセスにリダイレクトする方法の詳細な説明

前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...

JavaScript の知識: コンストラクタも関数である

目次1. コンストラクタの定義と呼び出し2. 新しいキーワードの目的3. コンストラクタの問題: メ...