以前先接觸的 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 頁面設計作為範例,補充一些設計細節上的內容 [也算是我踩坑的一些經驗吧]。
- 設計的時候開啟 Material Design 或者 IOS Guidelines, 邊檢視邊設計,大大提升操作效率,看多了很多數值自然而然就記住了 [最主要是字型大小]。
- 如果尺寸寬度為基數,放大一倍進行設計,這樣就不會總為那 1px 對齊糾結了[逼死處女座系列]。同時也更方便 grids 寬度的設計,偶數的公約數比較多哈。Magin 儘量選擇 grids 的一倍或多倍,便於對齊。
- 輔助顏色板[灰度類的]最好有自己的模板,以免每次都到重新設定,節約時間。能用透明黑色就不用灰色,更清晰。不同明度的同色相顏色可以直接加透明黑色遮罩層就行模擬。
- 善於重複使用相似元素,改變佈局即可,可以極大的節省實際操作時間。必要時可以建立 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
//@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