從 Sketch 到 CSS

以前先接觸的 CSS，後來又接觸了 Sketch, 如今再反過來使用 CSS 的時候，發現設計的思想基本都是共通的。於是，筆者希望通過此文總結下最近所學，希望能對大家有所幫助。

Article Structure

• UI Design 的基本思想
• 如何將 Design Ideas 運用到 Sketch 中
• 如何將 Design Ideas 運用到 CSS 中

UI Design 的基本思想

Limitations:

• Layout： 確定自己頁面的尺寸和佈局，是 Mobile 還是 Desktop. 不同的設計尺寸有對應的排版選擇。同時考慮如果是響應式設計，如果讓排版在不同尺寸間無縫轉化。
• Branding：一個產品需要有自己的品牌意識，因此設計風格要統一和諧。可以從 Logo 配色開始下手，提取 Color Palette，從而統一設計稿的顏色。此外，可以設計一個比較新穎的元素 [動效或設計] 合理運用到不同尺寸的設計中，給使用者深刻印象，強化品牌意識。
• Flat Design：已經 2016 年了，扁平化設計仍然是世界的潮流。高光陰影交錯，紋理齊飛的擬物化設計已經一去不復返。簡單的設計如今更受到使用者的喜歡。

Opportunities:

• focus
• native functionality
• known pattern

產品的核心功能是什麼？這是 UI 設計時可以說最重要的事了。看看 Facebook 和 Dropbox 的設計可知，前者希望我們注意朋友間的狀態，後者希望我們注意自己的檔案。視覺中心是圖片和黑色加粗文字，主色調灰色，輔助一個強調的藍色，簡單的 Icon，一致的網格佈局就是一個 Well-designed 的設計。

在技術發展日新月異的時代，合理運用裝置的功能可以設計出許多酷炫的功能。比如 Uber 運用手機 GPS 實時定位計程車，Instagram 運用攝像頭進行照相。當某一硬體功能出現升級換代時，Design something new 的機會便出現了！

看看 10 年的設計吧，有沒有醜的感覺呢 [背景按鈕，多種字型，重紋理陰影，可見網格分隔]。如今在 Material Design 和 IOS Interface Design 的指導下，網站和應用的設計已經越來越統一，使用者體驗也越來越好。

Grids and Layout:

• anatomy: columns, gutters, margins
• baseline grids
• mobile grids

佈局布的好，基本醜不了 – 野子Joey

確定頁面的寬度，根據需求確定列數，每列的寬度，列與列之間的間隔，以及內容兩側的間隔，使用軟體製作處自己的網格佈局 [Sketch 可以很容易的做到這點], 也可以在適當處新增水平輔助線幫助設計, 這樣你所有元素的大小，元素間的 margin 和 padding 也都統一了，和諧自然產生美啊。

如果是 Mobile Design, 為了精確佈局，也可以建立全網格佈局。

Typography:

• typeface choice
• font size and styles
• white space, contrast, legibility, readability
• forming a style guide

字型的選擇，對於 IOS，預設為 Helvetica Neue。 對於 Android, 預設 Roboto, 這兩種看起來蠻像的，區別不大。對於 App 設計，一種字型已經足夠，當然你可以再選擇一種 Serif 字型強化標題或作為品牌特徵。

注意 Facebook 的字型設計，人名，時間地址，和正文分別用的不同的字型大小，粗細和顏色用於區分，在該對比的地方一定要強化對比的程度，否則乾脆一致。

該留白的地方要留白，人都喜歡寬敞的地方，頁面也需要留白喘氣，不信你看:

同時注意文字長度要適中，英文每行 7 - 9 個單詞，中文每行 15 - 22 的字，行高 1.3 - 1.7 便於閱讀。字型顏色和背景顏色要有足夠的對比度反差，便於閱讀[不要將淺色字型放在亮背景上，或者深色字型放在暗背景上，如果圖片作為背景，一般在圖片上加一層透明遮罩]。最後是內容上的優化，文字的含義要通俗易懂 [考慮可能有非母語使用者使用你的產品哦]。

Color:

• background
• text: main, muted, highlighted
• assist: shadow, divider

一個簡單且實用的思路去選取顏色是，背景色採用白色或者淺色，從 Logo 中選取一種顏色作為主顏色，然後再選取主顏色的對比色作為強調色，透明黑色作為陰影，不同灰度灰色作為邊框，分割線，柔和字型顏色。

Other color considerations:

• give each color a meaning
• contrast
• limit the use of colors
• consider real content

顏色有其一定的意義，使用每一種顏色前先想想為什麼我要用這個顏色 [比如你不會想把團購網站設計成黑色幽默風格]。主色調和強調色之間一定要有對比。主要顏色儘量不要超過三種，避免給使用者造成過高的視覺負擔。考慮到 App 的實際應用場景，不同的使用者會上傳不同的照片，因此背景，字型顏色儘量選取 Web Safe Colors，在實際場景不斷改進完善。

更多顏色內容可參考：Material Colors.

如何將 Design Ideas 運用到 Sketch 中

軟體框架層大家可以參考我之前寫的這篇文章：如何用 Sketch 進行網頁設計。

這裡我主要以一個 App 頁面設計作為範例，補充一些設計細節上的內容 [也算是我踩坑的一些經驗吧]。

1. 設計的時候開啟 Material Design 或者 IOS Guidelines, 邊檢視邊設計，大大提升操作效率，看多了很多數值自然而然就記住了 [最主要是字型大小]。
2. 如果尺寸寬度為基數，放大一倍進行設計，這樣就不會總為那 1px 對齊糾結了[逼死處女座系列]。同時也更方便 grids 寬度的設計，偶數的公約數比較多哈。Magin 儘量選擇 grids 的一倍或多倍，便於對齊。
3. 輔助顏色板[灰度類的]最好有自己的模板，以免每次都到重新設定，節約時間。能用透明黑色就不用灰色，更清晰。不同明度的同色相顏色可以直接加透明黑色遮罩層就行模擬。
4. 善於重複使用相似元素，改變佈局即可，可以極大的節省實際操作時間。必要時可以建立 Symbol 或 Styled Text 方便日後重複使用。孰能生巧，實踐中每個人都能總結很多適合自己的經驗。

如何將 Design Ideas 運用到 CSS 中

User Interface Design 絕對不是僅僅畫介面，介面做的再漂亮，沒有考慮實際運用場景，開發不出來，或者不具有實際應用價值，只能稱之為"花瓶"了。因此自己設計的時候，儘量多站在產品和開發的角度去思考問題，怎麼設計更能突出功能，怎麼設計更能便於開發，實際互動時的效果是怎樣的, 這才是一名合格的 User Experience Designer 應有的品質。因此，國外招聘中都要求 User Experience Designer 瞭解 Web 前端語言 [Html, CSS, Javascript], 作為技術層面的考核。

隨著 CSS 預編譯處理器的流行 [後文用 Sass 作為例子]，極大的方便了前端書寫 CSS. CSS 我僅僅是新手水平, 這裡我主要討論如何使用 Design 的思想寫出更方便使用的 Sass.

//@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 的 mixins 用處不大，太過繁瑣，CSS 就是 CSS， 沒必要搞得 Javascript 一樣過度程式化。涉及到 vender-prefix 的部分， 推薦使用 Autoprefixer。Nesting 加上偽類建議不要超過4層，否則後期修改比較麻煩，適當使用 > 子元素搜尋符即可。

Conclusion

無論是用 Skech 設計介面或是直接 CSS 設計介面，保有 Design Ideas 是最重要的，工具不是重點，思想才是王道。CSSketch 這款外掛甚至支援直接用 CSS 修改 Sketch File, 感興趣的同學可以去試用下。各大應用商店應用數不勝數，沒事幹下幾個玩玩，多注意觀察主流應用的設計細節, 尤其是互動細節 [下拉，懸浮，空狀態，初次登陸狀態，引導介面]，總結為己用。

我說的都是錯的，如果不自己思考的話。 – 野子Joey

Resources

• Mobile UI Design for Beginners
• Variables: The Backbone Of CSS Architecture

原文連結