從 Sketch 到 CSS

發表於2016-01-28

以前先接觸的 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
 
Focus example

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

 
Native functionality examples

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

 
Known pattern examples

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

Grids and Layout:

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

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

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

 
Columns, gutters, margins, baseline

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

 
Mobile Grids

Typography:

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

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

 
Roboto vs Helvetica Neue

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

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

 
whitespace vs no whitespace

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

Color:

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

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

 
Color Palette

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 頁面設計作為範例,補充一些設計細節上的內容 [也算是我踩坑的一些經驗吧]。

 
App Demo
  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.

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

Conclusion

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

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

Resources

相關文章