今日は、ガイドライン用のグラフィックドキュメントの開発での経験を共有します。 これがVilineの2番目の割り当てであることがわかりました。 そして、 最初の部分から覚えていないので、ビデオコースページの再設計を行いました。 この記事では、すべての要素とさまざまな状態のスタイルを開発するプロセスについて説明します。 視聴者を考慮して、インターフェイスがバランスが取れてアクセスしやすいように、いくつかのルールを考えて策定します...

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



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

最初の章では、承認された配色に基づいて行動する必要があることを忘れていました。 新しい色を発明し提案するタスクはそうではありませんでした。 色を選択するには、時々 Adobe Color CC （認証が必要です（！））またはColorScheme.ruを使用します。 原色のコードを挿入し、アナログ、モノクロ、トライアドなどのさまざまなモードでシェードを選択します。 たとえば、トライアドモードでは、非常に強くて調和のとれたコントラストを選択できます。 どこからでも最高の色域を得ることができなかったので、これは私ですが、そのような願いはありませんでした。



また、現在のバージョンのサイトで使用されているOpen Sansフォントについても質問がありました。 日常の世界ではますます一般的ではないようです。 現在、関連性のあるもの：Helvetica、Lato、Source Sans Pro、Robotoなど...しかし、この質問は、マーケターによる再考の段階にあったことが判明しました。



すぐに予約します。カラフルでトレンディな写真には、ビースンやドリブルで一番上に現れるデザインが表示されません。 そのようなスタイルで作られたデザインは、女性がサイトに長く滞在できることを疑う余地はほとんどありません。 これが主な対象者であり、この要素を考慮します。 それでも、クライアントが設定したフレームワークと私の経験が許す限り、全体像を改善しようとします。

ガイドライン

ガイドラインは、製品の外観を形成するための一連のルールおよび/または推奨事項です。 これらは設計者によって作成され、開発者が理解できる方法で記述されます。 一方で、これは最初の文です。な​​ぜなら、 将来的には、グラフィックドキュメントに依存するデザイナーなしで、製品の新しいセクションを視覚化できます。 一方、最近では、このようなドキュメントへのインターフェイスデザイナーの作業の追加は既に行われています。 したがって、ガイドラインは、色、フォント、要素、状態、図像、サイズ、インデントに関する推奨事項です。



私の場合、ウェブ製品の主な対象者は若い母親または妊娠している母親であることを思い出させてください。 顧客の承認した色に固執する必要があります。 観客に最適と考えるフォント。 要素のフィレットコーナーの半径。 後者は、公正なセックスの目の要素があまりにも「鋭い」または「角張った」ように見えないようにするために必要です。

1/15：Circeフォント

最初のマーケティングチームからの重要なニュース：Open Sansを去り、Circeをメインフォントとして使用します。





あなた自身の言葉で言えば、フォントはウェブにとって型破りであり、スタイルにおいては活版印刷のものに近く、「文学的な音」を持っています。 これらは純粋に私の協会です。 Open SansとCirceを比較すると、後者が少し密度が高くなります



OK、新しいフォントが承認されました。 マーケティング担当者からの角を丸くするための提案：6ピクセルの半径を使用します。 同意して、考慮に入れます！ （ちなみに、私の練習ではかなりまれな願いです）。 すべての要素で作業を開始できます。

2/15：色

中央のパレットは、クライアントから受け取った図です。 左の配色：緑を少し明るくし（カバーに便利です）、白の隣に配置しました。 そのため、典型的なカードがデザインでどのように見えるかおおよそ想像できます。 右側の色合いは、対照的な黒の隣に緑をレンダリングする例です。 そのような使用の緊急の必要性は予想されていなかったが、むしろ変更のために行われた。 サイトとこのUIキットの両方の全体的な背景は#EFEFEF（明るい灰色）のままなので、モバイルデバイスでの強いコントラストを避けます。

3/15：タイポグラフィ

これらは、テキストディメンションを使用するためのガイドラインです。 私はテキストの段落を描き、それに引用を埋め込みました。 いくつかのタイプのヘッダーを作成しました。 また、通常のリストと番号付きリストを追加しました。 スクロールバーの例もここにあり、後で追加されました。 実際、これらのテキストルールは厳密である必要はありません。 テキストの段落を小さな14pxフォントで配置する必要がある場合-はい、お願いします。 主なことは、テキストの比例性を観察することです。 たとえば、小さな見出しのテキストの段落は、「目次」という大きな見出しで奇妙に見えます。

4/15：リンク

新しくて特別なものはありません。 一般に、リンクの色はまだ議論の余地があります。 私の立場はこれです。デザインが参照に青または青の色合いを使用している場合、下線なしで行うことができます。 自分の色を使用する場合、個人的には常に下線下線フォントを使用します。 これは非公式の標準のようなものであり、ユーザーはこのテキストがクリック可能であることをすぐに認識します。 ちなみに、マーケティング担当者はリンクの色をオレンジに置き換えました。 私は気にしませんでした、主なことは、リンクが下線付きのままであることです。

5/15：ボタン

このセクションでは、ボタンのすべての可能な状態を考慮して、それらを操作する必要があります。 ボタンの種類をプライマリボタンとセカンダリボタンに分けます（または、ゴーストボタンと呼ばれるボタン）。 論理的には、メインボタンは優先アクションにつながり、セカンダリボタンはアクションにつながります。これはユーザーにあまり望まないアクションです。 操作を再度設計します。 そのような使用の例を次に示します。







現在、Googleマテリアルデザインの理論がデザインで積極的に使用されているため、最近では多くのボタンが再びボタンのように見え始めました。 現実世界の物理学の一部がインターフェース設計に適用され始めました。 通常の状態のボタンにはわずかな影があります。 マウスをホバーすると、影が大きくなりぼやけます。ボタンが高く「上昇」します。 クリックすると、この影が消え、ボタンの「押す」ことをシミュレートします。 ここに、設計を現実の世界ともう少し結び付ける疑似3次元性を示します。 私が覚えている限りでは、これはユーザーがテレビから一定の距離に座っているスマートテレビのアプリケーションガイドラインに由来するものであり、高いぼかし係数を持つ顕著な影を使用することが不可欠です。 これにより、何が起こっているのかを認識しやすくなります。

6/15：テキストの入力

もう一度GMDを参照すると、このような入力を使用する傾向がわかります。







ウェブ製品でますます発見されています。 あなたがAndroidを好むなら、ITの分野を理解し、または仕事をしているなら、そのようなインプットがあれば、あなたは「水中の魚」のようです。 しかし、主にiPhoneを好む女性の視聴者にとって、このようなテキスト入力要素の禁欲的なスタイルはかなり苦痛です。 入力がまだ入力されたままである場合に、中間点を見つけて設計を提案しましたが、GMDのルートもあります。







以下の入力形式には、ぼかしのない1pxの下線影があります。 マウスオーバーすると、緑色に変わります。 クリックすると、厚くなり、緑色に変わり、動作中の状態を示します。 右側の鉛筆アイコンは、「明快さを増す」ための実験的な試みです。 場合によっては、このアイコンは意味を高めることができます。通常の入力-鉛筆。 検索入力-拡大鏡。 パスワード入力入力-たとえば、ロックアイコン。 などなど。 例はこの記事の終わりに近づきます。

7/15：ドロップダウンリスト

応答の原則は、入力と同じ方法で実行されます。 マウスにカーソルを合わせると、アイコンの色とアンダースコアが変わります。 ドロップダウンリストを展開すると、より大きな影が表示され、上の平面の要素は引き続き「持ち上げられます」。 十分な注意を払って問題に取り組む場合は、拡張状態について考える必要があります。 アイコンが反転し、アクティブな行が太字で強調表示され、ホバーすると、背景がメインの緑色の明るい色合いで色付けされます。

8/15：スライダー

すべてが非常に透明です。 ここでは、新しいものは何も発明していません。標準コンポーネントは、類推により、ガイド（フォント、色、寸法）に従って設計されています。 スライダーは、マウスのドラッグまたは数値のクリックによって移動できます。たとえば、子の年齢を「から」および「から」に示すことが提案されている場合は、移動できます。

9/15：タブ/タブ

「はい、すべてがはっきりしているので、やってみてください！」

10/15：選択項目

ここで、残りのすべての要素をグループ化しました：状態選択（追加のフィルタリング）、スイッチ、チェックボックス、ラジオボタン。 最後の2つは、集中的なテキストレイアウトによって選択の可視性が向上することを開発者に思い出させるだけです。 まあ、残りの部分では、すべてが明らかであるように思えます。

11/15：テーブル

キットにサンプル表も追加しました。 すべてが標準であり、一般的な類似のスタイルのみを使用しています。 もちろん、インデントの仕様が指定されている場合、この表はより便利です。 ちなみに、この章の最後でそれらについて詳しく説明しています。

12/15：図像

アイコンの使用に関する推奨事項と例。 強烈で目立つGMDアイコンが図像学の進化を妨げたと思います。 むかしむかし、ピクセルのものがあり、次に凸のものがあり、その間のどこかでios-ovs（アウトライン）がトレンドに入り、しばらくの間、カラーフラットスタイルが点滅しました（無限の擬似影がオブジェクトから斜めに伸びていることを覚えていますか？）。 そして、Googleがやってきて、それをどうやってやるのかと言った。 また、歌詞に深く入り込まない場合は、汎用性とパフォーマンスのために最近GMDアイコンのみを使用しています。 ここでは 、独立したアイコンデザイナーから多くのメタファーを取得できます （無料、すべてのサイズを指定、png / svg / zip、ヒント：右クリックして目的のサイズをダウンロードすると便利です）。 集中的なアイコンは、より理解しやすく、目立つと思います（そして、ここでは交通標識への参照があるはずです）。

13/15：カード

これはすでに、個々のワークアウトされた要素からそれらの組み合わせへの移行です。 サイトで使用するカードのオプションをいくつかコンパイルしました。 いくつかの情報とクライアントの個人的な好みを提示する実際の方法でした。



しかし、デザインで彼らとやりすぎることは望ましくないことを常に思い出します。 何よりも、それらの意味は仕様と併せて理解されます：







カードの構成を決定する厳密なルールはありません。 私が示したインデントの寸法を観察すると、ほとんどの人が開発されたガイドラインに従って均一に見えます。

14/15：ログイン

ボーナスとして、ログイン/登録ポップアップを使用して、使用例を使用したレイアウトを作成しました。 これは、プロジェクトのフルタイムのWebデザイナーが、将来参加しなくても製品のセクションを独立して組み立てることができる方法を視覚化するために必要です。 行う必要があるのは、ソースから既製の要素を取り出し、仕様に従って均等に配置することです。

15/15：仕様

ソース内の別のグループにあります。 グループを表示することができ、スペックがレンダリングされます。 それらがなければ、このユーザーインターフェイスキットは劣っています。 寸法とインデントの比率を尊重することにより、バランスの取れたインターフェイスが実現します。 このテーマに関する指示を与えない場合、これが異なる方法で行われるリスクがあります。 そして、私は品質の実装を保証することはできません。



8pxグリッドを好む場合、すべてのインデントが8の倍数であることを考慮する価値があります。 私の場合のように、10pxグリッドを使用する場合、この設計では13または27pxの要素間の距離は見つかりません。すべてのインデントは10の倍数になります。



色の数と色合いにはルールがあります。たとえば、グレーの色合いはあまり使いませんでした-このセットには3色しかありませんでした。 インターフェイスのこのような独自のルールを使用すると、デザイナーと開発者の両方にとって簡単になると確信しています 。 例外はありますが、システムが異なる状態のフィードバックを提供する場合、赤や青などが必要になる場合があります。 意味の違いを強化するため（たとえば、ポップアップ通知の場合）。

章のまとめ

• ガイドラインに関するグラフィックドキュメンテーションは、開発者が製品の開発を続けるための視覚言語であり、デザイナーを再び引き付けることはありません。
• 将来の製品の目標を考慮して、一連のガイドラインを作成できます。 フォント、色、および一般的なスタイリングでは、リソース/アプリケーションの将来のユーザーの詳細を考慮することができます。
• 相互作用を最適化するには、ガイドラインに要素の寸法とインデントに関する推奨事項を含める必要があります。
• キットには既製のソリューションの例も含まれていることが望ましいが、必須ではない。 これには、ショッピングカート、商品ページ、友人、カード、ランディングページなどがあります。
• 現代のアプローチは、クライアントにスケッチ/ psdファイルではなく、html / cssコードを返すことです。 少し前に、私は完全にAxureに切り替えましたが、このタスクに非常に効果的に対処しています。

さらに、ワークショップの他の同僚が同様の問題をどのように解決するかを提案します。 次の例を挙げてもらうとよいでしょう。

1. Jan Losertはとてもクールで、 TapdaqのUIの概要は完璧です
2. Mateusz Dembekは少し小さめですが、それでも有名なDeskmetrics Uiスタイルガイドを設計しました。
3. Greg Dlubaczは、 ダッシュボード要素を使用して強力なダークエバージョンを選択しました。 そして、明るい範囲の小売銀行サービスで設計されています
4. Cupi Wongはそれほど広範ではありませんが、スタイリッシュに設計されたAfterShipガイド
5. JeremySalléeは、 Nutanix製品ガイドラインで設計に関するすべての詳細を説明しています。

2つの章でうまくいかなかったことをおizeびします。 先を見ると、突然Vilineのために多くのタスクが実行されます。 次の章では、 最初の部分からコースページでこれらのガイドラインを「引き出し」、「相談」セクションの再設計について話します。これは、若い母親と無料で質問に迅速に答えるVilineの専門家にとって重要な相互作用環境です。 ↑再会するまで...