編者按：完整的 UI 設計流程到底是怎樣的？從需求到產品上線，要經歷多少個階段，每個階段有哪些應該掌握的基礎知識，本次優設獨家專題為你從零開始梳理出 UI 工作流程，適合新手閱讀學習。
往期回顧：
本篇為工作流程第三節：視覺設計。
情緒板，簡單來說就是由圖像，視頻和其他視覺元素組成、拼貼在一起的想法和過程，主要目的是講述項目背后的故事，作為設計方向形式上的參考。同時情緒板也可以在配色方案、視覺風格、質量材質，作為設計指導，幫助設計師提供一些設計方案和指引。
配色在視覺設計中所發揮的作用是不言而喻的，我們在設計時對于色彩的制定一般有兩種情況。
全新品牌設計，了解各種顏色或者色相的氣質和情感屬性，在具體設計的時候，進一步根據品牌的氣質和需求，再在色相的基礎上調整明暗和飽和度。
根據甲方/需求方原有產品的色彩來設置，如果不是全新產品，大部分都有一套自己產品的色彩體系，在保持產品的一致性的前提下，后續產品皆沿用原有色彩體系。
但是，色彩本身的內涵和情緒特質并不是全部。比如一個行業當中，很多企業都使用了藍色，那么產品繼續使用藍色，可以讓用戶更快「識別出」產品所屬的領域，但是本身也存在讓人混淆的風險。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。
品牌或者產品的設計風格與配色是相輔相成的，依據產品特性與需求，選擇合適的設計風格，更利于提升視覺效果。所以我們需要隨時了解最新的設計趨勢與風格，分清各個設計風格的特點和區別是十分有必要的。以下是設計中常用的設計風格集合。
1. 半扁平化設計
關鍵詞：極簡、符號化、光影。
由于具體化設計的影響，界面設計更加趨向于立體化，光和陰影的運用，成為「半扁平化設計」。為了適應現代科技而推崇的扁平化設計仍會存在，但已不再被大量發展并使用。適量漸變陰影的使用，將會在保留其簡約風格的基礎上，使扁平化設計更加復雜和寫實化。
2. 三維渲染風格
關鍵詞：平面立體感，純色，空間感。
隨著 C4D 的流行，三維的表現形式在設計中變得愈演愈烈。不過在后扁平化時代，如何在扁平與立體的形式中間尋找平衡是大家關注的焦點，而三維純色渲染恰恰是一種很好的嘗試。
空間感的布局拓展了畫面深度，同時物體純色系的渲染方式又強化了畫面的平面感。設計將干擾人們注意力的因素排除，只留下需要傳達的主題部分，令人印象深刻，這樣的形式已經在攝影及三維藝術中流行起來，充滿儀式感的畫面讓設計者愛不釋手。
3. 動畫效果
動畫效果已經越來越多的以各種形式出現在網頁設計上，諸如 gif、SVG、WebGL、CSS 或小視頻。
4. 漸變色
關鍵詞：多色、同色系、對比色。
漸變色是時下最主要的流行趨勢之一，始于 2016 且勢頭至今有增無減。像 Instagram 這樣的業界大拿甚至將其 logo 由扁平改成了多顏色漸變。從 logo 到按鍵和圖片，漸變色的潮流已經無處不在。
5. 極簡風格
關鍵詞：極簡、雅致、留白。
在內容越來越多的前提下，設計師應該減少無用信息的干擾讓用戶可以快速聚焦到內容本身，這種「少即是多」的設計思路就是我們常說的極簡風格。刪減與用戶任務無關的非功能性元素，只保留重要的信息，減輕用戶的認知負荷。
6. 波普風格
關鍵詞：波點、夸張、設計感極強。
波普風格主要體現在大眾喜聞樂見的人物、事物、事件中。簡單來說，它有以下幾個特點：
- 設計中強調新奇和獨特，采用強烈的色彩處理，個性化的配色風格很有感染力。
- 圖案是最主要的表現形式。常常帶有娛樂、趣味性、詼諧性。
- 難以確定統一的風格，追求各種風格的混合，追求新奇、古怪。
- 通俗大眾，設計元素一般來自日常生活中的人物、事物。
- 拼接。
7. 孟菲斯風格
關鍵詞：明快，集合結構，隨性。
孟菲斯風格在色彩上，常常打破配色規律，喜歡用一些靚麗、純度高、大膽、對比強烈的配色，借鑒了波普藝術的配色。在排版上，元素之間沒有過多的聯系，元素的排列常常無規律可循，運用大量的幾何元素，點、線、面綜合運用。規則的幾何圖形有圓形、三角形、矩形、圓環、波浪線、網格、斜杠等等，不規則的幾何圖形也是由點、線、面拼貼而成。
8. 光感透氣疊加
關鍵詞：光感，漸變，氤氳感。
具有光感的半透明漸變疊加平面設計風格。光因為其剔透，純凈，反射的特性，一直被人們所青睞著。人們不再滿足于簡單的色彩疊加，增加光感的設計將會為產品增添更多的未來迷幻屬性。
9. 插畫風格
扁平插畫：簡單來講就是把復雜的關系簡約化，讓畫面更加清爽整潔，也是現在比較常用的風格了，很多商務工具類的 APP 會選擇使用這種風格。
肌理插畫：顧名思義就是給插畫加上了些肌理質感（比如雜色）和光感，本質也和扁平插畫差不多，一些想體現質感的頁面會用到這種風格。
手繪插畫：需要設計師具備很強的繪畫功底，也算是插畫里面難度比較高的一種。手繪風格的插畫運用得也比較廣，常見的有插畫繪本，故事場景設計等。
MBE插畫：dribbble 的一位設計師創作了這種風格，它主要的特點就是圓潤、可愛、呆萌、簡潔。在 APP 中的引導頁、啟動頁和缺省頁運用也比較廣泛。
漸變插畫：有點類似日本漫畫場景的感覺，風格特別唯美浪漫。光感比較強，所以也稱為微光插畫。顏色一般采用相近色，顏色種類不要太多。
2.5D插畫：立體插畫，也就是在二維的空間里表現三維的事物。大多設計師使用 C4D 設計，PS/AI 也可以。
10. 中國風
關鍵詞：水墨、雅致、文藝。
利用中國風的視覺元素在設計上完成表達。在各種視覺表現形式中，國畫，書法，服飾紋理，建筑結構，陶瓷等傳統材料肌理等等，都可以作為素材，利用中國風元素的同時，適當改造，更換色彩，簡化結構，復雜化肌理效果等等，以求在視覺上更接近品牌的氣質。
11. 剪紙風格
關鍵詞：矢量插畫、投影、紙張肌理。
12. 低多邊形（Low Poly）
關鍵詞：多邊形、3D、低細節。
low poly 實際是把多色元素，用三角形分割，每個小三角形的顏色，取自原多色元素的相應位置。這種設計風格的特點是低細節，面又多又小，高度渲染，經常配以柔光效果。
13. 賽博朋克
關鍵詞：虛擬現實、人工智能、霓虹光感。
賽博朋克又稱賽伯朋克、數字朋克、電腦判客、網絡判客，是科幻小說的一個分支，以計算機或信息技術為主題。在視覺設計中的特點就是藍、紫、青等冷色調為主色調，霓虹燈光感效果為輔助，故障藝術風為輔助（圖像的失真、錯位、破碎等），有時還可以加一些異常的現象，比如 180 度翻轉的建筑，還有復古風和未來風并存。
14. 蒸汽波（Vaporwave）
關鍵詞：熒光、流體、夢幻感。
蒸汽波是一種受賽博朋克影響的網絡線上藝術，選用的視覺元素主要有古典藝術形象，八九十年代的流行文化產物，window95 經典窗口樣式，又或者是代表著某個時代記憶的各種事物。
15. 像素風格
關鍵詞：像素化，輪廓清晰，卡通。
像素風格屬于點陣式圖像，是一種圖標風格的圖像，更強調清晰的輪廓、明快的色彩，幾乎不用混疊方法來繪制光滑的線條，同時它的造型比較卡通，得到很多朋友的喜愛。
16. 故障藝術（Glitch Art）
利用事物形成的故障，進行藝術加工。特點就在于圖像失真、破碎、錯位、變形，還有顏色的失真、錯位，和一些條紋圖形的輔助。
1. 界面常用字體推薦
字體的選擇是由產品屬性或品牌特性的關鍵詞而決定。
- 一般中文字體種類分為：黑體、宋體、仿宋、楷體等；
- 英文字體種類分為：無襯線體、襯線體、意大利斜體、手寫體、黑字體等。
中文字體推薦
線上中文字體推薦使用思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋方-簡、黑體-簡。其中 iOS 系統默認中文字體是「蘋方PingFang」，Android 系統中文字體使用「思源黑體Noto Sans CJK」。
英文字體推薦
線上英文字體推薦使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系統默認英文字體為「San Francisco」，Android 系統默認英文字體為「Roboto」。
數字字體推薦
線上數字字體推薦使用 DIN、Helvetica Neue。
DIN 起源于 1995 年的德國，無襯線字體，易用耐看、字形開放，是設計師最愛的幾類字體之一，適合顯示比較長的大號數字，但是小字號的情況下識別度較低。
Helvetica Neue 除了上文介紹的簡潔樸素、中性嚴謹、沒有多余的修飾外，還是 Helvetica 的升級版，擁有了更多的字重，可以作為 iOS 和 Android 跨平臺數字字體使用。
2. 字號
字號是界面設計中另一個重要的元素，字號大小決定了信息的層級和主次關系，合理有序的字號設置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的字號使用會讓界面混亂不堪，影響閱讀體驗。
字號的選擇
字號的選擇，可以遵循 iOS、Material Design、Ant Design 等國內外權威設計體系中的字號規則，也可以根據產品的特點自行定義。
iOS 字號規則：在 iOS11 系統中，使用 San Francisco 作為系統英文字體，包含了以下幾種字號的文本樣式。
需要注意的是，San Francisco 字體有兩種模式：
- 文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式適用于字號小于 20pt 的文字；
- 展示模式適用于字號大于等于 20pt 的文字。
Material Design 字號規則：在 Material Design 設計體系中，使用 Roboto 作為英文字體，規定了以下文字排版的常用字號。
長篇幅正文，每行建議 60 字符左右，短文本建議每行 30 字符左右。
Ant Design 字號規則：Ant Design 受到 5 音階以及自然律的啟發定義了 10 種不同的字號，從小到大依次為：12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。
建議主要字號為 14px，其余字號的選擇可根據具體情況進行自由的定義，盡量控制在 3-5 種之間，保持克制的原則。
Kiwi 字號規則：Kiwi 是餓了么的中后臺設計語言，致力于打造出能夠「了解、洞察、溫暖、激勵用戶」的產品。
在 Kiwi Web 中，規定最小字號為 12px，主要文本字號為 14px，最大字號為 46px。
3. 行高
行高可以理解為一個包裹在字體外面的無形的框，字體距框的上下空隙為半行距。
參考 W3C 原理，眼睛到屏幕的距離 25cm 為最佳閱讀距離。
西文的基本行高通常是字號的 1.2 倍左右。而中文因為字符密實且高度一致，沒有西文的上伸部和下延部來創造行間空隙，所以一般行高需要更大，根據不同人群的特點（兒童、年輕人、老年人）以及使用環境，可達到1.5至2倍甚至更大。
文章引用來源：《餓了么高級設計師：界面視覺設計 5 要素之字體篇》
關于文字版權問題：《害怕字體侵權？來看這份超詳細的字體版權避坑指南！》
設計中常用的圖標，從使用的用途來說圖標分為兩種，功能性圖標和展示性圖標。
- 功能性圖標是為了引導用戶理解和操作，需要表現精確和簡介，方便用戶識別其含義。功能性圖標常規狀態下為無彩色。
- 展示性圖標通常為頁面入口，會有更多形狀、顏色、質感的表達，吸引用戶的注意力和點擊欲望，強調差異性，比如各種品類區的圖標、徽章、等級圖標等等。
但圖標的風格并不止兩類，以下簡單的整理了一下圖標的風格分類，設計中選擇符合產品整體風格的圖標即可。
△ 參考文檔作者：超人的電話亭/RDD
如果是自己進行圖標繪制，那么需要采用統一的圖標繪制模板，保證圖標視覺上大小的一致。
圖標模板下載鏈接：https://pan.baidu.com/s/1pZfzYdRCps992NHNCkX0gQ 密碼：btbz
更多學習圖標的相關鏈接：
實際項目中，并不是所有項目都有十分充裕的時間來設計圖標，所以我們可以從各類圖標網站上尋找合適的 icon。
1. 常用圖標網站推薦
iconfont：https://www.iconfont.cn/
MUX 傾力打造的矢量圖標管理、交流平臺。設計師將圖標上傳到 iconfont 平臺，用戶可自定義下載多種格式 icon，平臺也可將圖標轉換為文字，便于前端工程師自由調整與調用。
Flaticon：www.flaticon.com
世界上最大的免費圖標搜索引擎之一，支持商用。
Iconmonstr：iconmonstr.com
可自由更改圖標大小，自帶 24 像素網格方便設計更精確，智能壓縮方便網頁使用，支持多種格式輸出。
Iconstore：iconstore.co
一流的免費圖標包素材站點，適用于網頁設計與移動端設計。
Nova：webalys.com/nova/
每個圖標都有線條和填充兩個版本。
Iosicongallery：iosicongallery.com
收錄評估客戶端的所有的 iOS 產品的圖標，齊全精美，是設計師設計 iOS app 時，良好的靈感和素材網站。
網上推薦的無版權圖片網站有很多，但是真正好用的卻是少數部分。
1. 第一找圖梯隊
基于 CC0 協議的免版稅圖庫，個人和商業免費使用。
最知名的無版權圖片網站，這家以風景為主，數量足夠多，但是很多濾鏡感太強，顏色太過厚重，比較適合做壁紙，事實上很多壁紙軟件也是直接從這上面下載的。
可以說是全球最大的免費圖片網站了。圖多而且種類足夠豐富。這其實也是一家集合網站，可以看到 Unsplash 家的很多圖也能在 Pixabay 里搜到。
這家也有很多精美的圖片，而且比較好的一點是會有「一周精選」，平常沒事的時候來收收圖也挺好的。
數量超級多的無版權圖片網站，可以根據顏色進行搜索。
2. 第二找圖梯隊
這里面是一些圖片資源沒有那么豐富，但是質量都還不錯的，如果之前的網站沒有找到合適的，可以在這里再次搜尋一下。
找圖新歡，旅行日常為主，圖片多為用戶自己上傳，所以在其他地方很少見到
每周都會更新，圖片角度和題材都比較另類，人物圖片不少。
優點是圖片都比較精致小眾，缺點是更新慢。
圖片分類詳細，可按分類進行篩選。
有編輯精選，但圖片濾鏡也比較厚重。
每天兩張手工篩選精品照片。
3. 精準找圖梯隊
雅虎著名的圖片社區，由于匯集了大批的攝影師，所以 Flickr 家的圖片質量都相當之高。不過你可能會說 Flickr 的圖片不都是有版權的嗎？別急，在「授權」那里選擇「所有創用CC」或者「允許商業用途」即可找到那些可以使用的圖片。
由于 Flickr 目前沒有簡體中文版，所以搜索時用英文或者繁體中文會得到比較好的結果。
谷歌的圖片搜索那是相當的強大，選擇右側的「工具」，可以自定義很多東西，包括大小、顏色及使用權限。
關于圖片版權問題：《關于設計工作中的圖片版權應用與說明》
組件是設計師在日常設計工作中，極為常見的內容。設計師除了在完成業務需求的的設計之后，同時需要設計一套適用于產品的組件庫。
所謂「最佳方案性價比」，就是我們需要在設計的個性化表達和資源投入之間找到最佳的平衡點，在關注出色視覺表現的基礎上，逐漸加強對項目協同及體驗價值的關注，逐步形成新的設計思維模式，也就是組件化思維。
組件化設計就是把產品需求場景化、視覺表達模塊化，每個組件基于復用為目的，使其具備獨立的完整解決方案，通過標準的規范組合方式來構建整個設計方案，從而提升設計效能。
組件化設計思維 3 個關鍵點：
- 完整組件方案：將組件視為一個獨立的產品，從多維度，多場景輸出組件的方案和組合標準。
- 組件化思維：從需求出發，拆解頁面表達結構和所需組件。
- 通用頁面規則：通用的頁面與組件的柵格體系及替換規則
注：本系列文章為優設獨家專題，請勿轉載。
歡迎添加作者微信交流：
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 8 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓