如何用 Sketch 進行網頁設計

如果你是一名網頁設計師，相信你一定對 Sketch 這個軟件不陌生了。作為一個交互設計師，UI設計乃一核心內容。以前常使用 Photoshop 進行 P 圖，但總覺的其實在是比較冗余。于是轉而運用 Sketch 進行 UI 設計。該文將通過一個完整案例來介紹如何運用 Sketch 進行網頁設計的，同時也會分享筆者的一些 tricks.

這次的網站設計主題是 An eCommerce Website，教程地址 tuts+ ，筆者最終版本可見筆者 Behance .

基本設置

畫布按住鍵盤 A 快捷鍵，可以創建畫布。 Sketch 已經良心的為你默認設置了各種設備尺寸，你想要的全都有，如下圖。

柵欄通過 Layout settings 設置柵欄[布局參考線]，這個功能好的真是不要不要的[下文回介紹其實際用處]，可以根據需要自主選擇每列寬度，間隔寬度以及最外側 margin 寬度，見下圖。

這時畫布上就出現了柵欄參考線，文字段落的寬度，按鈕的寬度，圖片的寬度都可以根據柵欄進行合理設置。通過柵欄布局可以極大的統一頁面的布局設置，給人一種和諧美[Ctrl + L 可以快捷鍵顯示/隱藏柵欄]，效果如下。

字體注重對比和統一。對比是指在需要突出區別的地方用不同字號，粗細和字體突出不同。統一是指對于網站同一元素，使用相同的字體設置，比如 H1, Body Text. 英文字體建議兩種即可, 一個 sans-serif 字體作為標題，顯眼；一個 serif 字體作為正文，易讀。可以提前設計好各個字體的數值，利用 Sketch 的 Style Text 功能進行保存，方便以后頻繁使用。也可以再設計的時候，邊做邊保存[前者適合在經驗用戶，后者更適合初學者]，如下圖。

對字體另外一個重點是確定 line height [行高]，確定行高的作用是方便確定控件上下 margin, 左右 margin 可以通過柵欄進行確定。比如你確定默認字體大小為 20px, 行距為 1.5，則行高 = 20px * 1.5 = 30. 那么控件之間的上下間距則可以設為 30px 的倍數，比如 30px, 60px, 90px, 以此類推。間距和行高相同可以使頁面看起來更加和諧美觀。

調色板一個好的配色對界面美觀的重要性不言而喻。Sketch 也貼心的為用戶提供了顏色版用于記錄顏色，方便你重復使用，見下圖。

最主要的是一下幾個顏色，背景色，默認字體顏色，減淡字體顏色，強調色，邊框顏色，和適當數量的輔助色[Material Design鼓勵用多種顏色，用鮮明大膽顏色]。這里再說一下陰影顏色，Material Design 建議使用 #000 全黑，然后減弱 opacity 不透明度，而不是直接設置灰度顏色。因為這樣可以保證陰影不論在亮色還是暗色背景下都有一個良好的視覺效果。

##操作

頁面Sketch 的左側提供了頁面導航列表。用戶可以創建不同頁面，同一頁面中又可以創建不同畫布。這樣一來，用戶便可以將網站的所有頁面有條理的保存在一個 Sketch File 中[見下圖]，it is amazing!

間距Sketch 對于排版可謂是考慮的極其周到。學習 CSS 的朋友應該知道在排版時，對于 margin 的四個數值往往糾結不以，往往憑感覺設置。而 Sketch 可以在設計時就解決這個問題，鼠標選中指定元素，按下 Alt 鍵，界面自動現實該元素的 margin top, right, bottom, left. 精確到 1px 的設計，讓設計稿和實現稿無縫對接，見下圖。

SymbolSketch 還提供了保存組件的功能。如果某些元素在設計中會重復出現，則可以利用 Symbol 功能進行保存，需要時直接插入即可。一次設計，循環使用。

結構一個好的交互設計師需要對網站結構有一個非常清楚的認知。這個網站的目的是什么，用戶群是誰，為了實現目的需要有哪些功能，這些功能如何組織成頁面，頁面之間如何跳轉，功能如何實現等。比如該網站是銷售網站模板的購物網站，導航欄有如下幾項：主頁，聯系頁，支持頁，購物頁，個人賬戶，購物車，如下圖。

先設置主頁，然后由主頁發散延展到其他界面。當然，這一切應該在 UI 設計之前的交互稿就考慮清楚。UI 更加強調美觀性，如何利用美觀更好的引導用戶實現既定目標。

交互設計時需要考慮用戶使用網站時的交互場景。 界面的交互狀態，比如登陸和未登錄時界面的不同狀態，如下圖。

元素的交互狀態，Hover 和未 Hover，Click 和未 Click，是否 Disabled等。細節產生美！

##插件 Sketch 的插件是獨立與 Sketch 本身，可以第三方開發的。在這里像那些默默奉獻的偉大程序員們表示無比的敬意。強推插件下載軟件 Sketch Toolbox [見下圖]。可以一鍵下載/卸載插件，再也不用從 GitHub 上下載然后拖到指定文件夾了，節省了大量時間。

Sketch 用了快三個月了，插件也嘗試過20多個，現在把我喜歡的插件分享如下，希望能夠幫到朋友們。

• Artboardzoom : Cmd + 4 一鍵 zoom in 畫布到適當大小。
• Sketch Arrange Artboards ：可以將多個畫布整齊排列。
• Content Generator Sketch Plugin ：添加偽元素必備。
• Generate Gif Sketch 也可以做 Gif 動圖。
• Magicmirror ：透視變形圖讓你的作品集看起來更酷。
• Sketch User Fontawesome ：一鍵添加字體圖標。

##總結

盡管 Sketch 相比 PS 而言缺乏很多操作位圖的功能，插件穩定性不足，同時限定了只能 Mac 用戶使用。但作為一個初學者，個人確實覺的使用 Sketch 比 Photoshop 更加適合 UI 設計。它的各項工具都是專門為 UI 流程進行設計的，比如畫布尺寸，控件，指定尺寸導出等。相信使用 Sketch 可以極大的提升你的工作流程，從項目初期設計階段到項目最終實施階段。還沒有嘗試過 Sketch 嗎？更多功能等待你去探索呢。如果你有其他的 tricks，let me know in the comments!

##題外

1. 希望 Dribbble 的設計師大牛可以給個邀請碼讓我也有機會發布作品，非常感謝。
2. 本人打算今年暑假去那里實習 interaction design 或者 user experience design, 希望在 Silicon Valley Uber 總部上班的朋友能提供個內推機會。
3. 有在美國這個暑假打算在加州找實習的小伙伴么，求組隊，個人微信在簡書首頁，求加。