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

- 設計的時候開啟 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.
//@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
相關文章
- 從搭建工程講到CSS ModulesCSS
- CSS 從入門到放棄系列:CSS的引入方式CSS
- [譯] 從原型圖到成品:步步深入 CSS 佈局原型CSS
- CSS從入門到精通——文字與字型樣式CSS
- 從Spec Export - Sketch Measure網頁生成Storyboard檔案Export網頁
- 擁抱更底層技術——從CSS變數到HoudiniCSS變數
- 離譜的 CSS!從錶盤刻度到藝術剪紙CSS
- sketch標註外掛 Sketch Measure 啟用最新
- CSS必知必會:從z-index到層疊上下文CSSIndex
- Sketch Measure for Mac(sketch標註外掛) v2.8.1啟用Mac
- 從青銅到王者,10個css3偽類使用技巧和運用CSSS3
- Sketch Measure for Mac(sketch標註外掛) v2.8.1啟用版Mac
- Sketch和AE可以對接啦-Sketch2AE v2.0
- 從2012到2021,從土木到程式設計師程式設計師
- Sketch Mac直裝版Mac
- Sketch 70.2 中文版
- 【HTML+CSS網頁設計與佈局 從入門到精通】第2章HTMLCSS網頁
- Mac電腦版Sketch 啟用中文安裝包「Sketch 破解下載」Mac
- 麒麟作業系統 (kylinos) 從入門到精通 - 辦公環境- 第四十一篇 UI設計工具(Adobe XD、Sketch替代)作業系統UI
- CSS文字沉到元素的底部CSS
- 從DevOps到ContainerOpsdevAI
- 從Windows到LinuxWindowsLinux
- 從RNN到BERTRNN
- 從SpringBoot到SpringMVCSpring BootSpringMVC
- 從DDPM到DDIM
- C++ 從&到&&C++
- 從HTTP到HTTPSHTTP
- CSS 怎樣寫一個動畫(從基礎動畫到3d動畫)CSS動畫3D
- The Best Way to Export an SVG from SketchExportSVG
- 如何製作 Sketch 外掛
- 關於意義:從現實到遊戲,從自我到自由遊戲
- mac電腦版Sketch v99.5中文啟用版 Sketch破解安裝Mac
- 從Web到未來Web
- 從Java到Kotlin(八)JavaKotlin
- 從重複到重用
- 從ajax到fetch、axiosiOS
- [譯] 從Service到WorkManager
- PhpRpc 從 0 到 0.7PHPRPC
- json從立地到成佛JSON