Sketch を Web デザインに使用する方法_html/css_WEB-ITnose

Web デザイナーであれば、Sketch というソフトウェアに精通しているはずです。インタラクションデザイナーにとって、UIデザインは中核となるコンテンツです。以前はPhotoshopを使ってPピクチャを作ることが多かったのですが、いつもそれが冗長だと感じていました。そこで私は UI デザインのために Sketch に目を向けました。この記事では、Web デザインに Sketch を使用する方法を完全な事例を通して紹介し、著者の秘訣もいくつか紹介します。

今回の Web サイト デザインのテーマは e コマース ウェブサイト、チュートリアルのアドレスは tuts+ です。作者の最終バージョン 作者の Behance が表示されます。

基本設定

キャンバス キーボードの A ショートカット キーを押してキャンバスを作成します。 Sketch は、デフォルトでさまざまなデバイス サイズを良心的に設定しており、以下に示すように、必要なものがすべて揃っています。

フェンス レイアウト設定でフェンス [レイアウト基準線] を設定します。この機能は非常に優れているため、実際には必要ありません (実際の使用方法は後で紹介します)。必要に応じて間隔の幅と最も外側のマージンを調整します。以下の図を参照してください。

このとき、キャンバス上にテキスト段落の幅、ボタンの幅、絵の幅が表示されます。フェンスに合わせて適切に設置できます。フェンスレイアウトは、ページのレイアウト設定を大幅に統一し、調和のとれた美しさを人々に与えることができます（Ctrl+Lのショートカットキーでフェンスの表示/非表示が可能）。その効果は次のとおりです。

フォントはコントラストと統一感を重視しています。コントラストとは、異なるフォントのサイズ、太さ、フォントを使用して、違いを強調する必要がある箇所の違いを強調することを意味します。統一とは、Web サイトの同じ要素 (H1、本文など) に同じフォント設定を使用することを意味します。タイトルには目を引くサンセリフ フォントとセリフ フォントの 2 つの英語フォントを使用することをお勧めします。本文は読みやすいです。各フォントの値を事前に設計し、Sketch のスタイル テキスト機能を使用して、将来頻繁に使用できるように保存することができます。以下に示すように、再デザイン中に保存することもできます [前者は経験豊富なユーザーに適しており、後者は初心者に適しています]。

フォントのもう 1 つの重要な点は、行の高さ [行の高さ] を決定することです。行の高さを決定する目的は、コントロールの上下の余白を決定しやすくすることです。右マージンはフェンスを通して決定できます。たとえば、デフォルトのフォント サイズが 20 ピクセルで行間隔が 1.5 であると判断した場合、行の高さ = 20 ピクセル * 1.5 = 30 となります。その後、次のようにコントロール間の上下の間隔を 30 ピクセルの倍数に設定できます。 30 ピクセル、60 ピクセル、90 ピクセルなど。間隔と行の高さを同じにすると、ページがより調和して美しく見えるようになります。

パレット インターフェースの美しさにとって優れたカラーパレットの重要性は自明の理です。また、Sketch は、下の図に示すように、再利用できるように色を記録するためのカラー バージョンをユーザーに提供することも考えています。

最も重要なのは、いくつかの色、背景色、デフォルトのフォントの色、覆い焼きフォントの色、アクセントの色、境界線の色、および適切な量の補助色です。カラー [マテリアル デザインでは、明るく大胆な色を使用し、さまざまな色の使用を奨励しています]。影の色についてもう一度話しましょう。マテリアル デザインでは、グレースケール カラーを直接設定するのではなく、#000 の完全な黒を使用してから不透明度を下げることをお勧めします。これにより、明るい背景でも暗い背景でも影に優れた視覚効果が得られるためです。

##Operations

ページ ナビゲーション リストは、Sketch ページの左側に表示されます。ユーザーは異なるページを作成でき、同じページ上に異なるキャンバスを作成できます。このようにして、ユーザーは Web サイトのすべてのページを整理された方法でスケッチ ファイルに保存できます (下の図を参照)。

Spacing Sketch は素晴らしいものです。植字には十分配慮してください。 CSS を勉強している友人は、組版を行うときにマージンの 4 つの値に苦労し、感覚に基づいて設定することが多いことを知っているはずです。 Sketch を使用すると、デザイン中に指定した要素を選択して Alt キーを押すと、要素の上下左右のマージンが自動的に表示され、デザインが正確になります。デザイン ドラフトと実装ドラフトのシームレスなドッキングについては、下の図を参照してください。

SymbolSketch にはコンポーネントを保存する機能もあります。一部の要素がデザイン内で繰り返し表示される場合は、シンボル機能を使用して要素を保存し、必要なときに直接挿入できます。一度デザインすれば、再利用できます。

構造 優れたインタラクションデザイナーは、Web サイトの構造を明確に理解する必要があります。このウェブサイトの目的は何か、ユーザー層は誰なのか、目的を達成するためにどのような機能が必要なのか、それらの機能がどのようにページにまとめられているのか、ページ間の移動方法、機能の実装方法など。たとえば、この Web サイトは、Web サイト テンプレートを販売するショッピング Web サイトであり、以下に示すように、ナビゲーション バーには、ホームページ、問い合わせページ、サポート ページ、ショッピング ページ、個人アカウント、ショッピング カートの項目があります。

最初にホームページを設定し、次にホームページから他のインターフェースに拡張します。もちろん、これらすべては、UI デザインの前にインタラクション ドラフトで明確に考慮される必要があります。 UI では、美学と、設定された目標を達成するためにユーザーをより適切に導くために美学を使用する方法がより重視されます。

インタラクションを設計するときは、ユーザーが Web サイトを使用するときのインタラクション シナリオを考慮する必要があります。 以下に示すように、ログイン時とログインしていないときのインターフェイスの異なるステータスなど、インターフェイスの対話ステータス。

要素のインタラクション ステータス、ホバーかどうか、クリックしたかどうか、無効かどうかなど。細部が美しさを生み出す！

##プラグイン Sketch のプラグインは Sketch 自体から独立しており、サードパーティによって開発できます。ここで、黙々と献身的に努力してきた偉大なプログラマーの方々に最大限の敬意を表したいと思います。プラグイン ダウンロード ソフトウェア Sketch Toolbox [下の図を参照] を強くお勧めします。ワンクリックでプラグインをダウンロード/アンインストールできるため、GitHub からダウンロードして指定したフォルダーにドラッグする必要がなくなり、時間を大幅に節約できます。

私は Sketch を約 3 か月間使用しており、20 以上のプラグインを試してきましたが、友人の助けになればと思い、お気に入りのプラグインを以下に共有します。

• アートボードズーム: Cmd + 4 ワンクリックでキャンバスを適切なサイズにズームします。
• スケッチ配置アートボード: 複数のキャンバスをきれいに配置できます。
• Content Generator Sketch Plugin: 疑似要素を追加するために不可欠です。
• Gif スケッチの生成では、Gif アニメーションも作成できます。
• Magicmirror: 遠近感の歪みにより、ポートフォリオがよりクールに見えます。
• Sketch User Fontwesome: ワンクリックでフォント アイコンを追加します。

##概要

Sketch は PS に比べてビットマップを操作するための機能が不足しているものの、プラグインの安定性が不十分であり、Mac ユーザーに限定されます。しかし、初心者としては、UI デザインには Photoshop よりも Sketch を使用する方が適していると個人的に感じています。そのツールは、キャンバス サイズ、コントロール、指定サイズのエクスポートなどの UI プロセス用に特別に設計されています。 Sketch を使用すると、プロジェクトの初期設計段階からプロジェクトの最終実装段階に至るまで、ワークフローが大幅に改善されると思います。まだスケッチを試したことがありませんか?さらに多くの機能があなたを待っています。他にもトリックがある場合は、コメント欄で教えてください。

##オフトピック

Dribbble のデザイナー Daniel が私に招待コードをくれて、私もその機会を持てるようになれば幸いです。私の作品を公開してください。

私はこの夏、インタラクション デザインまたはユーザー エクスペリエンス デザインのインターンに行く予定です。シリコンバレーの Uber 本社で働く友人が私に紹介の機会を提供してくれることを願っています。

この夏、カリフォルニアでインターンを予定している米国の友人はいますか? チームを結成してください。私の個人的な WeChat がこの本のホームページにあります。

出典: http://joeyqiang.me/design/2016/01/06/Web デザインに Sketch を使用する方法/