Sketch から CSS_html/css_WEB-ITnose へ

私は最初に CSS に触れ、その後 Sketch に触れましたが、今再び CSS を使用すると、デザインの考え方は基本的に同じであることがわかります。そこで、筆者はこの記事を通じて私が最近学んだことをまとめ、皆さんのお役に立てればと考えています。

記事の構成

• UIデザインの基本的な考え方
• デザインのアイデアをSketchに適用する方法
• デザインのアイデアをCSSに適用する方法

UIデザインの基本的な考え方

制限事項:

• レイアウト:決定ページのサイズとレイアウト (モバイルかデスクトップかに関係なく) さまざまなデザイン サイズに対応するレイアウト オプションがあります。また、レスポンシブ デザインであるかどうか、レイアウトを異なるサイズ間でシームレスに変換できるかどうかも検討してください。
• ブランディング: 製品には独自のブランド認知度が必要なので、デザインスタイルは統一され、調和している必要があります。ロゴのカラーマッチングからスタートし、カラーパレットを抽出してデザイン案の色を統一します。さらに、比較的斬新な要素（モーション効果やデザイン）をデザインし、それをさまざまなサイズのデザインに合理的に適用して、ユーザーに印象を与え、ブランド認知を強化することができます。
• フラット デザイン: すでに 2016 年ですが、フラット デザインは依然として世界のトレンドです。ハイライトとシャドウが絡み合ったり、飛び散るテクスチャを使用したスキューモーフィックなデザインはなくなりました。最近ではシンプルなデザインの方が人気があります。

機会:

• 焦点
• ネイティブ機能
• 既知のパターン

焦点の例

製品の中核機能は何ですか?これはおそらく、UI を設計する際に言うべき最も重要なことです。 Facebook と Dropbox のデザインを見ると、前者は友人のステータスに注意を払うことを望んでおり、後者は自分のファイルに注意を払うことを望んでいることがわかります。ビジュアルの中心は写真と黒の太字テキストで、メインカラーはグレーで、強調された青のシンプルなアイコンが補足され、一貫したグリッドレイアウトはうまく設計されています。

ネイティブ機能の例

急速な技術発展の時代では、デバイスの機能を合理的に使用することで、多くの優れた機能を設計できます。たとえば、Uber は携帯電話の GPS を使用してリアルタイムでタクシーを見つけ、Instagram はカメラを使用して写真を撮影します。特定のハードウェア機能がアップグレードされると、何か新しいものを設計するチャンスが現れます。

既知のパターンの例

10 年間のデザインを見てみると、醜く感じられませんか [背景ボタン、複数のフォント、テクスチャの多いシャドウ、目に見えるグリッド分離]。現在、マテリアル デザインと IOS インターフェイス デザインの指導のもと、Web サイトとアプリケーションのデザインはますます統一され、ユーザー エクスペリエンスはますます向上しています。

グリッドとレイアウト:

• 解剖学: 列、溝、余白
• ベースライングリッド
• モバイルグリッド

レイアウトは良く、基本的に醜くない – Noko Joey

Deページの幅を終了する, 必要に応じて、列の数、各列の幅、列間の間隔、コンテンツの両側の間隔を決定します。ソフトウェアを使用して独自のグリッド レイアウトを作成します [Sketch で簡単に作成できます]。必要に応じて水平の補助線を追加すると、すべての要素のサイズや要素間の余白や余白が自然に統一され、美しさが生まれます。

列、余白、マージン、ベースライン

モバイル デザインの場合、正確なレイアウトのために、フル グリッド レイアウトを作成することもできます。

モバイルグリッド

タイポグラフィ:

• 書体の選択
• フォントのサイズとスタイル
• 余白、コントラスト、読みやすさ、読みやすさ
• スタイルガイドの作成

フォントの選択、IOS の場合、デフォルトの場合ヘルベチカ・ノイエ。 Android の場合、Roboto がデフォルトです。この 2 つは非常に似ていますが、違いはほとんどありません。アプリのデザインには 1 つのフォントで十分ですが、タイトルを強調したり、ブランドの特徴としてセリフ フォントを選択することもできます。

Roboto vs Helvetica Neue

Facebook のフォントのデザインに注意してください。区別するために、フォントのサイズ、太さ、色が異なる場合があります。 、ただ同意します。

空白はあるべき場所に残しておきます。人々は広々とした場所を好みます。信じられない場合は、空白を残すか、空白を持たないかを見てください。テキストの長さは適度で、英語では 1 行あたり 7 ～ 9 ワード、中国語では 1 行あたり 15 ～ 22 ワード、読みやすいように行の高さは 1.3 ～ 1.7 にする必要があります。読みやすくするために、フォントの色と背景の色の間に十分なコントラストがある必要があります [明るい背景に明るい色のフォントを配置したり、暗い背景に暗い色のフォントを配置したりしないでください。画像を背景として使用する場合は、通常、追加します。カバーに透明なマスクを重ねます。最後のステップは、テキストの意味を理解しやすいものにすることです (製品をネイティブ以外のスピーカーが使用する可能性があることを考慮してください)。

カラー

:

• 背景
• テキスト: メイン、ミュート、ハイライト
• アシスト: シャドウ、ディバイダー

色を選択するためのシンプルで実用的なアイデアは、背景色として白または明るい色を使用し、ロゴから 1 つの色を選択することです。メインカラーとしてメインカラーの対照的な色を選択し、シャドウとして透明な黒、境界線としてさまざまなグレースケールのグレー、分割線、およびソフトフォントの色を選択します。

カラーパレット

その他の色の考慮事項:

• 各色に意味を与える
• コントラスト
• 色の使用を制限する
• 実際の内容を考慮する

それぞれを使用してください 色を選ぶ前に考えてくださいなぜこの色を使いたいのかについて（たとえば、共同購入ウェブサイトをブラックユーモアスタイルでデザインしたくないなど）。メインカラーとアクセントカラーの間にコントラストがなければなりません。ユーザーに過度の視覚的負担を与えないように、メインカラーは 3 色を超えないようにしてください。アプリの実際のアプリケーション シナリオを考慮すると、さまざまなユーザーが異なる写真をアップロードするため、背景とフォントの色はできる限り Web セーフ カラーとして選択し、実際のシナリオで継続的に改善する必要があります。

カラーコンテンツの詳細については、マテリアルの色を参照してください。

デザインのアイデアを Sketch に適用する方法

ソフトウェア フレームワーク層については、以前に書いたこの記事を参照してください: Web デザインに Sketch を使用する方法。

ここでは主に、デザインの詳細を追加する例としてアプリ ページのデザインを使用します [これは私の落とし穴の経験の一部とみなすこともできます]。

アプリのデモ

1. デザインするときにマテリアル デザインまたは IOS ガイドラインを開いて、表示しながらデザインすると、作業効率が大幅に向上します。多くの値を確認すると、それらを自然に思い出すことができます [最も重要なのはフォント サイズです]。
2. サイズ幅が基本数値の場合は、1pxの位置合わせに常に苦労しないように、サイズとデザインを2倍にしてください[Virgoシリーズの強制]。同時に、グリッドの幅を設計する方が便利であり、偶数の公分母がより多くなります。位置合わせを容易にするために、グリッドを 1 回以上選択してみてください。
3. 毎回リセットする手間を省き、時間を節約するには、補助カラーパレット[グレースケールタイプ]用の独自のテンプレートを用意するのが最善です。グレーではなく透明な黒を使えばより鮮明になります。透明な黒いマスク レイヤーを直接追加することで、同じ色相で異なる明るさをシミュレートできます。
4. 同様の要素を再利用するのが上手で、レイアウトを変更するだけで、実際の操作時間を大幅に節約できます。必要に応じて、将来の再利用のためにシンボルまたはスタイル付きテキストを作成できます。完璧とは、実際には誰もが自分に合った多くの経験をまとめることができるということです。

デザインのアイデアを CSS に適用する方法

ユーザー インターフェイス デザインは、インターフェイスを描画するだけでは決してありません。インターフェイスがどれほど美しくても、実際のアプリケーション シナリオを考慮せずに開発することはできません。また、実際のアプリケーションの価値もありません。それは「花瓶」としか言えません。したがって、自分でデザインする場合は、機能を強調するためにどのようにデザインするか、開発を容易にするためにどのようにデザインするか、実際のインタラクション効果はどのようなものになるのか、できるだけ製品と開発の観点から考えるようにしてください。エクスペリエンスデザイナーとしての品質。そのため、外国人採用では技術評価としてWebフロントエンド言語[Html、CSS、JavaScript]を理解しているユーザーエクスペリエンスデザイナーが求められます。

CSS プリコンパイル済みプロセッサー (以下では Sass を例として使用します) の人気により、CSS のフロントエンド記述が大幅に容易になりました。私は CSS の初心者にすぎません。ここでは主にこのアイデアの使用方法について説明します。 Sass をより使いやすくするための CSS を作成するためのデザイン。

//@MEDIA QUERIES//确定尺寸，自适应布局$media-l: 1200px;$media-m: 900px;$media-s: 600px//GRID//统一布局，padding/margin 均可用, 高度，宽度尽量为其倍数$grid: 10px$grid-double: $grid * 2;$grid-third: $grid * 2;$grid-half: $grid / 2;//COLORS//用实物或功能命名$color-bodybg: #fafafa;$color-primary: #f0214f;$color-accent: #505eb1;$color-text: #555;$color-muted: #aaa;$color-border: #c3ddc8;$color-grey-mist: #f5f5f5;$color-grey-platinum: #bbb;$color-mask: rgba(0,0,0,0.1);//FONTS//字体，大小，粗细//1种或2种字体$font-family-1: Roboto, sans-serif;//一般4种大小 [header text, body text, remark, other]$font-header: 150%;$font-body: 100%;$font-remark: 70%$font-other: 85%;//三种粗细即可 [light, normal, bold]$font-light: 300;$font-normal: 400;$font-bold: 700;//Z-INDEX//用于 Material Design 不同层级的使用$z-index-header: 1000;$z-index-sidebar: 1100;$z-index-notify: 1200;$z-index-modal: 1300;

個人的には、Sass mixin は CSS であり、JavaScript のように過剰にプログラムする必要はないと思います。ベンダープレフィックスに関しては、Autoprefixer を使用することをお勧めします。ネストと疑似クラスは 4 レベルを超えないようにすることをお勧めします。そうでない場合は、サブ要素の検索演算子を適切に使用してください。

結論

Skech を使用してインターフェイスをデザインする場合でも、CSS を使用してインターフェイスを直接デザインする場合でも、最も重要なことはデザインのアイデアを維持することであり、ツールに焦点を当てるのではなく、アイデアが王様です。 CSSketch プラグインは、CSS を直接使用してスケッチ ファイルを変更することもサポートしています。興味のある学生は試してみることができます。主要なアプリ ストアには無数のアプリケーションがあります。何もすることがない場合は、主流のアプリケーションの設計の詳細、特にインタラクションの詳細 (ドロップダウン、一時停止、空の状態、初回ログイン) に注意してください。状態、ブート インターフェイス] を作成し、自分用に要約します。

自分で考えなければ、私の言うことはすべて間違っています。 – Joey Noko

リソース

• 初心者のためのモバイル UI デザイン
• 変数: CSS アーキテクチャのバックボーン