良いインターフェースのための私のデザインルール

この記事では、デスクトップインターフェイスの設計を導く基本的な原則または概念の例を示します。 イノベーターや教師として行動するつもりはありませんが、仕事で役立つ一連の設定を喜んで共有します。

ちなみに、Figmaを使用する場合は 、 既製の設計システムに注意することをお勧めします 。 フリーランサーが1か月あたりの注文を増やすのに役立ち、プログラマーは自分で美しいアプリケーションを作成できます。また、チーム作業用の既製の設計システムを使用して、チームが「スプリント」スプリントを迅速にリードします。

また、深刻なプロジェクトがある場合、当社のチームは、ベストプラクティスに基づいて組織内に設計システムを展開し、Figmaを使用して特定のタスクに合わせて調整する準備ができています。 Web /デスクトップ、および任意のモバイル。 また、React / React Nativeにも精通しています。 Tへの書き込み： @kamushken

アクセントと優先順位

毎回、インターフェイスを設計するときに、自分自身またはクライアントに次の質問をします。「エンドユーザーにとって今、どのような情報が重要ですか？ 特定のケースで彼の注意をどのように分散させるのでしょうか？」このために、私たちの武器には色と色合い、フォントサイズ、強度があります。 全体として、これらのツールを正しく使用して、ユーザーに「メッセージを残して」、必要な経路に沿ってユーザーを連れて行き、最も重要なことに注意を集中させます。

良い例は、デザイナーがユーザーに、送信者、次にトピック、そしてコンテンツまたはシステム内の彼の@ニックネームを見ることが重要であるという理解を与えた場合です。


デザイナーが「主張する」悪い例：最も重要なことはアバターですが、どうにかして残りを理解します：

インデントとその比例性

モダンなデザインは軽量でシンプルで、空気が飽和しています。 それは息でいっぱいです。 そして、これらの感覚の形成における最も重要な役割は、インデントによって果たされます。 大きな刻み目は、材料の流れを簡素化するのに役立ちます。 しかし、それらはある程度の規則性と比例性の対象でなければなりません。 私は、新しいプロジェクトを開始するときに、ベースインデントとして自分用にNピクセルを定義します。 次に、2N、3Nなどの比例関係を使用して、さらにインデントが必要な場合に視覚的なバランスを作成します。

良い例は、デザイナーが多かれ少なかれインデントの比例性を尊重する場合です。


インデントが実際に乱数ジェネレーターに基づいている場合の悪い例：

ボタンのテキストは常にプライマリです

ボタンを見たときにユーザーが以前にどのような期待や反応を形成したかを決定する要因はテキストであることを忘れないでください。 そして、二次的な方法でアイコンの画像のみが意味を補完します。 「notifications」というラベルの付いたベルの画像から、クリックする前にこの機能の目的がわかります。 別のアプリケーションに署名のない同様のベルは目覚まし時計につながりますが、通知画面が表示される可能性が最も高いでしょう。 碑文には常にアイコンよりも「重み」を与えることをお勧めします。 私はそれらが不正行為であると考えています。 多くの最新のインターフェースは、それらなしでも実行できます。 それはただ退屈すぎるでしょう！

全体的に良い：


しかし、あなたはもっとうまくやることができます：


それも良さそうです：


また、改善すべき点があります。

あまりにも明確にしようとしないでください。

すべてのデザインインターフェイスが直感的である必要はありません。 トレーニングを受けた多くの複雑なシステムがあります（！）しばらく対話するために。 おそらく今では彼らは私たちには単純に見えるかもしれませんが、最初の数分、数時間以上は彼らが先駆的な研究者であったという報告はしていません。 また、最初は複雑なシステムの内部で作業を続けているため、最初の研究への道を妨げるものは何もないようです。 ほとんどの場合、デザイナーは仕事を上手くこなし、新しい環境を簡単にマスターできました。 人生からの鮮明な例：数学記号「等しい」の意味がわからないことをしばらく想像してみてください。 同意して、これらの2つの機能は上下にあり、まったく直感的ではないようです。 数学の先生が学校でこれを教えてくれただけです。 最低限必要なレベルよりも明確にならないようにしてください。

この例では、デザイナーは閉じるボタンを使用して過度に明確にしています。


また、この例では、デザイナーは次の機能を追加することで非常に理解しやすくなりました。

カーソルの移動には力が必要です

高度な機能を取得するために、ユーザーに画面の別の部分にアクセスする義務を負わせてはなりません。 ユーザーがリストで作業している場合、新しいアイテムを作成するためのボタンが近くにあるはずです。 または、左下のボタンをクリックして新しいポップアップを生成する場合、ユーザーがウィンドウを閉じるためにカーソルを右斜め上にドラッグするように強制するのは不合理です。

良い例は、デザイナーがポップアップを引き起こした同じエリアでポップアップを閉じることを提案する場合です：


悪い例は、デザイナーがリスト自体からリストにアイテムを追加する機能を削除する場合です。

位置関係または単一平面

これは、インターフェイスのバランスを取るための別の手法です。 必要に応じて、グリッドの類似性。 たとえば、3列を使用します。 そのヘッダーはx軸に沿って同じ平面にありますか？ または、ボタン付きのアイコンの場所。 想像上の軸Yを描き、両方がきちんと取り付けられていることを見つけることは可能ですか？ 答えが「はい」の場合、物事は順調に進んでいます。 これは、データの構造により、人が表形式ビューを視覚的に認識しやすいという事実によるものです。 そして、インターフェースを開発するとき、いくつかのテーブルロジックを持つ要素が必要です。

不整合のある悪い例：


調和と関連性のある良い例：

色は理にかなっています

最後にBeatられた。 赤-不安、緑-すべてが順調です。 太古の時代から、人間にとって、テキスト情報の最高の知覚は白黒です。 引数なしで多くの色を使用すると、混乱が生じます。 要素をその意味に従って色付けすると、さらに多くの順序が作成されます。

カオスの例：（172票の緑は正の状態を意味しますか？はいの場合、280人の訪問者のオレンジは負の論理を意味しますか？決して！カラーデザイナーは数を数だけ分けました）


順序を作成し、色を正当化する例（他の人の作業の上にグラフィックを追加しました）


色の不使用の良い例：

エピローグとして....

このレビューのために作品を提出するための非公式の同意について、ドリブルコミュニティのメンバーに感謝します。 インターフェースの設計における上記の原則は私にとって基本的なものであることを思い出させてください。 インターフェイスを設計するときは、常にそれらを念頭に置いています。 どちらの側にいるかを決定します...デザイナー用のインターフェースを作成して、いいね（たとえば、仕事の98％をビヘインス）に取り組みますか、それともユーザーの問題を解決しようとしますか（ドリブル）。 ちなみに、私の意見では、クローズドコミュニティを使用すると、インターフェイスの主な目的に集中することができます。