編者按：完整的 UI 設(shè)計(jì)流程到底是怎樣的？從需求到產(chǎn)品上線，要經(jīng)歷多少個(gè)階段，每個(gè)階段有哪些應(yīng)該掌握的基礎(chǔ)知識(shí)，本次優(yōu)設(shè)獨(dú)家專題為你從零開始梳理出 UI 工作流程，適合新手閱讀學(xué)習(xí)。

往期回顧：

• 《超全面的 UI 設(shè)計(jì)工作流程指南（一）：需求分析》
• 《超全面的 UI 工作流程指南（二）：原型設(shè)計(jì)》

本篇為工作流程第三節(jié)：視覺設(shè)計(jì)。

情緒板設(shè)計(jì)

情緒板，簡(jiǎn)單來說就是由圖像，視頻和其他視覺元素組成、拼貼在一起的想法和過程，主要目的是講述項(xiàng)目背后的故事，作為設(shè)計(jì)方向形式上的參考。同時(shí)情緒板也可以在配色方案、視覺風(fēng)格、質(zhì)量材質(zhì)，作為設(shè)計(jì)指導(dǎo)，幫助設(shè)計(jì)師提供一些設(shè)計(jì)方案和指引。

詳細(xì)教程：《該怎么運(yùn)用情緒板，才能讓設(shè)計(jì)作品更有說服力？》

色彩

配色在視覺設(shè)計(jì)中所發(fā)揮的作用是不言而喻的，我們?cè)谠O(shè)計(jì)時(shí)對(duì)于色彩的制定一般有兩種情況。

全新品牌設(shè)計(jì)，了解各種顏色或者色相的氣質(zhì)和情感屬性，在具體設(shè)計(jì)的時(shí)候，進(jìn)一步根據(jù)品牌的氣質(zhì)和需求，再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。

根據(jù)甲方/需求方原有產(chǎn)品的色彩來設(shè)置，如果不是全新產(chǎn)品，大部分都有一套自己產(chǎn)品的色彩體系，在保持產(chǎn)品的一致性的前提下，后續(xù)產(chǎn)品皆沿用原有色彩體系。

但是，色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部。比如一個(gè)行業(yè)當(dāng)中，很多企業(yè)都使用了藍(lán)色，那么產(chǎn)品繼續(xù)使用藍(lán)色，可以讓用戶更快「識(shí)別出」產(chǎn)品所屬的領(lǐng)域，但是本身也存在讓人混淆的風(fēng)險(xiǎn)。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。

風(fēng)格

品牌或者產(chǎn)品的設(shè)計(jì)風(fēng)格與配色是相輔相成的，依據(jù)產(chǎn)品特性與需求，選擇合適的設(shè)計(jì)風(fēng)格，更利于提升視覺效果。所以我們需要隨時(shí)了解最新的設(shè)計(jì)趨勢(shì)與風(fēng)格，分清各個(gè)設(shè)計(jì)風(fēng)格的特點(diǎn)和區(qū)別是十分有必要的。以下是設(shè)計(jì)中常用的設(shè)計(jì)風(fēng)格集合。

1. 半扁平化設(shè)計(jì)

關(guān)鍵詞：極簡(jiǎn)、符號(hào)化、光影。

由于具體化設(shè)計(jì)的影響，界面設(shè)計(jì)更加趨向于立體化，光和陰影的運(yùn)用，成為「半扁平化設(shè)計(jì)」。為了適應(yīng)現(xiàn)代科技而推崇的扁平化設(shè)計(jì)仍會(huì)存在，但已不再被大量發(fā)展并使用。適量漸變陰影的使用，將會(huì)在保留其簡(jiǎn)約風(fēng)格的基礎(chǔ)上，使扁平化設(shè)計(jì)更加復(fù)雜和寫實(shí)化。

2. 三維渲染風(fēng)格

關(guān)鍵詞：平面立體感，純色，空間感。

隨著 C4D 的流行，三維的表現(xiàn)形式在設(shè)計(jì)中變得愈演愈烈。不過在后扁平化時(shí)代，如何在扁平與立體的形式中間尋找平衡是大家關(guān)注的焦點(diǎn)，而三維純色渲染恰恰是一種很好的嘗試。

空間感的布局拓展了畫面深度，同時(shí)物體純色系的渲染方式又強(qiáng)化了畫面的平面感。設(shè)計(jì)將干擾人們注意力的因素排除，只留下需要傳達(dá)的主題部分，令人印象深刻，這樣的形式已經(jīng)在攝影及三維藝術(shù)中流行起來，充滿儀式感的畫面讓設(shè)計(jì)者愛不釋手。

3. 動(dòng)畫效果

動(dòng)畫效果已經(jīng)越來越多的以各種形式出現(xiàn)在網(wǎng)頁設(shè)計(jì)上，諸如 gif、SVG、WebGL、CSS 或小視頻。

4. 漸變色

關(guān)鍵詞：多色、同色系、對(duì)比色。

漸變色是時(shí)下最主要的流行趨勢(shì)之一，始于 2016 且勢(shì)頭至今有增無減。像 Instagram 這樣的業(yè)界大拿甚至將其 logo 由扁平改成了多顏色漸變。從 logo 到按鍵和圖片，漸變色的潮流已經(jīng)無處不在。

5. 極簡(jiǎn)風(fēng)格

關(guān)鍵詞：極簡(jiǎn)、雅致、留白。

在內(nèi)容越來越多的前提下，設(shè)計(jì)師應(yīng)該減少無用信息的干擾讓用戶可以快速聚焦到內(nèi)容本身，這種「少即是多」的設(shè)計(jì)思路就是我們常說的極簡(jiǎn)風(fēng)格。刪減與用戶任務(wù)無關(guān)的非功能性元素，只保留重要的信息，減輕用戶的認(rèn)知負(fù)荷。

6. 波普風(fēng)格

關(guān)鍵詞：波點(diǎn)、夸張、設(shè)計(jì)感極強(qiáng)。

波普風(fēng)格主要體現(xiàn)在大眾喜聞樂見的人物、事物、事件中。簡(jiǎn)單來說，它有以下幾個(gè)特點(diǎn)：

• 設(shè)計(jì)中強(qiáng)調(diào)新奇和獨(dú)特，采用強(qiáng)烈的色彩處理，個(gè)性化的配色風(fēng)格很有感染力。
• 圖案是最主要的表現(xiàn)形式。常常帶有娛樂、趣味性、詼諧性。
• 難以確定統(tǒng)一的風(fēng)格，追求各種風(fēng)格的混合，追求新奇、古怪。
• 通俗大眾，設(shè)計(jì)元素一般來自日常生活中的人物、事物。
• 拼接。

7. 孟菲斯風(fēng)格

關(guān)鍵詞：明快，集合結(jié)構(gòu)，隨性。

孟菲斯風(fēng)格在色彩上，常常打破配色規(guī)律，喜歡用一些靚麗、純度高、大膽、對(duì)比強(qiáng)烈的配色，借鑒了波普藝術(shù)的配色。在排版上，元素之間沒有過多的聯(lián)系，元素的排列常常無規(guī)律可循，運(yùn)用大量的幾何元素，點(diǎn)、線、面綜合運(yùn)用。規(guī)則的幾何圖形有圓形、三角形、矩形、圓環(huán)、波浪線、網(wǎng)格、斜杠等等，不規(guī)則的幾何圖形也是由點(diǎn)、線、面拼貼而成。

8. 光感透氣疊加

關(guān)鍵詞：光感，漸變，氤氳感。

具有光感的半透明漸變疊加平面設(shè)計(jì)風(fēng)格。光因?yàn)槠涮尥?，純凈，反射的特性，一直被人們所青睞著。人們不再滿足于簡(jiǎn)單的色彩疊加，增加光感的設(shè)計(jì)將會(huì)為產(chǎn)品增添更多的未來迷幻屬性。

9. 插畫風(fēng)格

扁平插畫：簡(jiǎn)單來講就是把復(fù)雜的關(guān)系簡(jiǎn)約化，讓畫面更加清爽整潔，也是現(xiàn)在比較常用的風(fēng)格了，很多商務(wù)工具類的 APP 會(huì)選擇使用這種風(fēng)格。

肌理插畫：顧名思義就是給插畫加上了些肌理質(zhì)感（比如雜色）和光感，本質(zhì)也和扁平插畫差不多，一些想體現(xiàn)質(zhì)感的頁面會(huì)用到這種風(fēng)格。

手繪插畫：需要設(shè)計(jì)師具備很強(qiáng)的繪畫功底，也算是插畫里面難度比較高的一種。手繪風(fēng)格的插畫運(yùn)用得也比較廣，常見的有插畫繪本，故事場(chǎng)景設(shè)計(jì)等。

MBE插畫：dribbble 的一位設(shè)計(jì)師創(chuàng)作了這種風(fēng)格，它主要的特點(diǎn)就是圓潤(rùn)、可愛、呆萌、簡(jiǎn)潔。在 APP 中的引導(dǎo)頁、啟動(dòng)頁和缺省頁運(yùn)用也比較廣泛。

漸變插畫：有點(diǎn)類似日本漫畫場(chǎng)景的感覺，風(fēng)格特別唯美浪漫。光感比較強(qiáng)，所以也稱為微光插畫。顏色一般采用相近色，顏色種類不要太多。

2.5D插畫：立體插畫，也就是在二維的空間里表現(xiàn)三維的事物。大多設(shè)計(jì)師使用 C4D 設(shè)計(jì)，PS/AI 也可以。

10. 中國(guó)風(fēng)

關(guān)鍵詞：水墨、雅致、文藝。

利用中國(guó)風(fēng)的視覺元素在設(shè)計(jì)上完成表達(dá)。在各種視覺表現(xiàn)形式中，國(guó)畫，書法，服飾紋理，建筑結(jié)構(gòu)，陶瓷等傳統(tǒng)材料肌理等等，都可以作為素材，利用中國(guó)風(fēng)元素的同時(shí)，適當(dāng)改造，更換色彩，簡(jiǎn)化結(jié)構(gòu)，復(fù)雜化肌理效果等等，以求在視覺上更接近品牌的氣質(zhì)。

11. 剪紙風(fēng)格

關(guān)鍵詞：矢量插畫、投影、紙張肌理。

12. 低多邊形（Low Poly）

關(guān)鍵詞：多邊形、3D、低細(xì)節(jié)。

low poly 實(shí)際是把多色元素，用三角形分割，每個(gè)小三角形的顏色，取自原多色元素的相應(yīng)位置。這種設(shè)計(jì)風(fēng)格的特點(diǎn)是低細(xì)節(jié)，面又多又小，高度渲染，經(jīng)常配以柔光效果。

13. 賽博朋克

關(guān)鍵詞：虛擬現(xiàn)實(shí)、人工智能、霓虹光感。

賽博朋克又稱賽伯朋克、數(shù)字朋克、電腦判客、網(wǎng)絡(luò)判客，是科幻小說的一個(gè)分支，以計(jì)算機(jī)或信息技術(shù)為主題。在視覺設(shè)計(jì)中的特點(diǎn)就是藍(lán)、紫、青等冷色調(diào)為主色調(diào)，霓虹燈光感效果為輔助，故障藝術(shù)風(fēng)為輔助（圖像的失真、錯(cuò)位、破碎等），有時(shí)還可以加一些異常的現(xiàn)象，比如 180 度翻轉(zhuǎn)的建筑，還有復(fù)古風(fēng)和未來風(fēng)并存。

14. 蒸汽波（Vaporwave）

關(guān)鍵詞：熒光、流體、夢(mèng)幻感。

蒸汽波是一種受賽博朋克影響的網(wǎng)絡(luò)線上藝術(shù)，選用的視覺元素主要有古典藝術(shù)形象，八九十年代的流行文化產(chǎn)物，window95 經(jīng)典窗口樣式，又或者是代表著某個(gè)時(shí)代記憶的各種事物。

15. 像素風(fēng)格

關(guān)鍵詞：像素化，輪廓清晰，卡通。

像素風(fēng)格屬于點(diǎn)陣式圖像，是一種圖標(biāo)風(fēng)格的圖像，更強(qiáng)調(diào)清晰的輪廓、明快的色彩，幾乎不用混疊方法來繪制光滑的線條，同時(shí)它的造型比較卡通，得到很多朋友的喜愛。

16. 故障藝術(shù)（Glitch Art）

利用事物形成的故障，進(jìn)行藝術(shù)加工。特點(diǎn)就在于圖像失真、破碎、錯(cuò)位、變形，還有顏色的失真、錯(cuò)位，和一些條紋圖形的輔助。

字體

1. 界面常用字體推薦

字體的選擇是由產(chǎn)品屬性或品牌特性的關(guān)鍵詞而決定。

• 一般中文字體種類分為：黑體、宋體、仿宋、楷體等；
• 英文字體種類分為：無襯線體、襯線體、意大利斜體、手寫體、黑字體等。

中文字體推薦

線上中文字體推薦使用思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋方-簡(jiǎn)、黑體-簡(jiǎn)。其中 iOS 系統(tǒng)默認(rèn)中文字體是「蘋方PingFang」，Android 系統(tǒng)中文字體使用「思源黑體Noto Sans CJK」。

英文字體推薦

線上英文字體推薦使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系統(tǒng)默認(rèn)英文字體為「San Francisco」，Android 系統(tǒng)默認(rèn)英文字體為「Roboto」。

數(shù)字字體推薦

線上數(shù)字字體推薦使用 DIN、Helvetica Neue。

DIN 起源于 1995 年的德國(guó)，無襯線字體，易用耐看、字形開放，是設(shè)計(jì)師最愛的幾類字體之一，適合顯示比較長(zhǎng)的大號(hào)數(shù)字，但是小字號(hào)的情況下識(shí)別度較低。

Helvetica Neue 除了上文介紹的簡(jiǎn)潔樸素、中性嚴(yán)謹(jǐn)、沒有多余的修飾外，還是 Helvetica 的升級(jí)版，擁有了更多的字重，可以作為 iOS 和 Android 跨平臺(tái)數(shù)字字體使用。

2. 字號(hào)

字號(hào)是界面設(shè)計(jì)中另一個(gè)重要的元素，字號(hào)大小決定了信息的層級(jí)和主次關(guān)系，合理有序的字號(hào)設(shè)置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的字號(hào)使用會(huì)讓界面混亂不堪，影響閱讀體驗(yàn)。

字號(hào)的選擇

字號(hào)的選擇，可以遵循 iOS、Material Design、Ant Design 等國(guó)內(nèi)外權(quán)威設(shè)計(jì)體系中的字號(hào)規(guī)則，也可以根據(jù)產(chǎn)品的特點(diǎn)自行定義。

iOS 字號(hào)規(guī)則：在 iOS11 系統(tǒng)中，使用 San Francisco 作為系統(tǒng)英文字體，包含了以下幾種字號(hào)的文本樣式。

需要注意的是，San Francisco 字體有兩種模式：

• 文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式適用于字號(hào)小于 20pt 的文字；
• 展示模式適用于字號(hào)大于等于 20pt 的文字。

Material Design 字號(hào)規(guī)則：在 Material Design 設(shè)計(jì)體系中，使用 Roboto 作為英文字體，規(guī)定了以下文字排版的常用字號(hào)。

長(zhǎng)篇幅正文，每行建議 60 字符左右，短文本建議每行 30 字符左右。

Ant Design 字號(hào)規(guī)則：Ant Design 受到 5 音階以及自然律的啟發(fā)定義了 10 種不同的字號(hào)，從小到大依次為：12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

建議主要字號(hào)為 14px，其余字號(hào)的選擇可根據(jù)具體情況進(jìn)行自由的定義，盡量控制在 3-5 種之間，保持克制的原則。

Kiwi 字號(hào)規(guī)則：Kiwi 是餓了么的中后臺(tái)設(shè)計(jì)語言，致力于打造出能夠「了解、洞察、溫暖、激勵(lì)用戶」的產(chǎn)品。

在 Kiwi Web 中，規(guī)定最小字號(hào)為 12px，主要文本字號(hào)為 14px，最大字號(hào)為 46px。

3. 行高

行高可以理解為一個(gè)包裹在字體外面的無形的框，字體距框的上下空隙為半行距。

參考 W3C 原理，眼睛到屏幕的距離 25cm 為最佳閱讀距離。

西文的基本行高通常是字號(hào)的 1.2 倍左右。而中文因?yàn)樽址軐?shí)且高度一致，沒有西文的上伸部和下延部來創(chuàng)造行間空隙，所以一般行高需要更大，根據(jù)不同人群的特點(diǎn)（兒童、年輕人、老年人）以及使用環(huán)境，可達(dá)到1.5至2倍甚至更大。

文章引用來源：《餓了么高級(jí)設(shè)計(jì)師：界面視覺設(shè)計(jì) 5 要素之字體篇》

關(guān)于文字版權(quán)問題：《害怕字體侵權(quán)？來看這份超詳細(xì)的字體版權(quán)避坑指南！》

圖標(biāo)

設(shè)計(jì)中常用的圖標(biāo)，從使用的用途來說圖標(biāo)分為兩種，功能性圖標(biāo)和展示性圖標(biāo)。

• 功能性圖標(biāo)是為了引導(dǎo)用戶理解和操作，需要表現(xiàn)精確和簡(jiǎn)介，方便用戶識(shí)別其含義。功能性圖標(biāo)常規(guī)狀態(tài)下為無彩色。
• 展示性圖標(biāo)通常為頁面入口，會(huì)有更多形狀、顏色、質(zhì)感的表達(dá)，吸引用戶的注意力和點(diǎn)擊欲望，強(qiáng)調(diào)差異性，比如各種品類區(qū)的圖標(biāo)、徽章、等級(jí)圖標(biāo)等等。

但圖標(biāo)的風(fēng)格并不止兩類，以下簡(jiǎn)單的整理了一下圖標(biāo)的風(fēng)格分類，設(shè)計(jì)中選擇符合產(chǎn)品整體風(fēng)格的圖標(biāo)即可。

△ 參考文檔作者：超人的電話亭/RDD

如果是自己進(jìn)行圖標(biāo)繪制，那么需要采用統(tǒng)一的圖標(biāo)繪制模板，保證圖標(biāo)視覺上大小的一致。

圖標(biāo)模板下載鏈接：https://pan.baidu.com/s/1pZfzYdRCps992NHNCkX0gQ 密碼：btbz

備用下載鏈接：https://share.weiyun.com/5LrMuZU

更多學(xué)習(xí)圖標(biāo)的相關(guān)鏈接：

• 《如何系統(tǒng)學(xué)習(xí)功能圖標(biāo)？來看資深設(shè)計(jì)師的全面總結(jié)?。ㄒ唬?/a>
• 《如何繪制功能性圖標(biāo)？來看資深設(shè)計(jì)師的全面總結(jié)！（二）》
• 《超全面！如何系統(tǒng)學(xué)習(xí)功能圖標(biāo)之理論篇》

實(shí)際項(xiàng)目中，并不是所有項(xiàng)目都有十分充裕的時(shí)間來設(shè)計(jì)圖標(biāo)，所以我們可以從各類圖標(biāo)網(wǎng)站上尋找合適的 icon。

1. 常用圖標(biāo)網(wǎng)站推薦

iconfont：https://www.iconfont.cn/

MUX 傾力打造的矢量圖標(biāo)管理、交流平臺(tái)。設(shè)計(jì)師將圖標(biāo)上傳到 iconfont 平臺(tái)，用戶可自定義下載多種格式 icon，平臺(tái)也可將圖標(biāo)轉(zhuǎn)換為文字，便于前端工程師自由調(diào)整與調(diào)用。

Flaticon：www.flaticon.com

世界上最大的免費(fèi)圖標(biāo)搜索引擎之一，支持商用。

Iconmonstr：iconmonstr.com

可自由更改圖標(biāo)大小，自帶 24 像素網(wǎng)格方便設(shè)計(jì)更精確，智能壓縮方便網(wǎng)頁使用，支持多種格式輸出。

Iconstore：iconstore.co

一流的免費(fèi)圖標(biāo)包素材站點(diǎn)，適用于網(wǎng)頁設(shè)計(jì)與移動(dòng)端設(shè)計(jì)。

Nova：webalys.com/nova/

每個(gè)圖標(biāo)都有線條和填充兩個(gè)版本。

Iosicongallery：iosicongallery.com

收錄評(píng)估客戶端的所有的 iOS 產(chǎn)品的圖標(biāo)，齊全精美，是設(shè)計(jì)師設(shè)計(jì) iOS app 時(shí)，良好的靈感和素材網(wǎng)站。

圖片

網(wǎng)上推薦的無版權(quán)圖片網(wǎng)站有很多，但是真正好用的卻是少數(shù)部分。

1. 第一找圖梯隊(duì)

piqsels

基于 CC0 協(xié)議的免版稅圖庫，個(gè)人和商業(yè)免費(fèi)使用。

Unsplash

最知名的無版權(quán)圖片網(wǎng)站，這家以風(fēng)景為主，數(shù)量足夠多，但是很多濾鏡感太強(qiáng)，顏色太過厚重，比較適合做壁紙，事實(shí)上很多壁紙軟件也是直接從這上面下載的。

Pixabay

可以說是全球最大的免費(fèi)圖片網(wǎng)站了。圖多而且種類足夠豐富。這其實(shí)也是一家集合網(wǎng)站，可以看到 Unsplash 家的很多圖也能在 Pixabay 里搜到。

Pexels

這家也有很多精美的圖片，而且比較好的一點(diǎn)是會(huì)有「一周精選」，平常沒事的時(shí)候來收收?qǐng)D也挺好的。

visualhunt

數(shù)量超級(jí)多的無版權(quán)圖片網(wǎng)站，可以根據(jù)顏色進(jìn)行搜索。

2. 第二找圖梯隊(duì)

這里面是一些圖片資源沒有那么豐富，但是質(zhì)量都還不錯(cuò)的，如果之前的網(wǎng)站沒有找到合適的，可以在這里再次搜尋一下。

別樣網(wǎng)

找圖新歡，旅行日常為主，圖片多為用戶自己上傳，所以在其他地方很少見到

Gratisography

每周都會(huì)更新，圖片角度和題材都比較另類，人物圖片不少。

StreetWill

優(yōu)點(diǎn)是圖片都比較精致小眾，缺點(diǎn)是更新慢。

IM FREE

圖片分類詳細(xì)，可按分類進(jìn)行篩選。

Magdeleine

有編輯精選，但圖片濾鏡也比較厚重。

FancyCrave

每天兩張手工篩選精品照片。

3. 精準(zhǔn)找圖梯隊(duì)

Flickr

雅虎著名的圖片社區(qū)，由于匯集了大批的攝影師，所以 Flickr 家的圖片質(zhì)量都相當(dāng)之高。不過你可能會(huì)說 Flickr 的圖片不都是有版權(quán)的嗎？別急，在「授權(quán)」那里選擇「所有創(chuàng)用CC」或者「允許商業(yè)用途」即可找到那些可以使用的圖片。

由于 Flickr 目前沒有簡(jiǎn)體中文版，所以搜索時(shí)用英文或者繁體中文會(huì)得到比較好的結(jié)果。

Google

谷歌的圖片搜索那是相當(dāng)?shù)膹?qiáng)大，選擇右側(cè)的「工具」，可以自定義很多東西，包括大小、顏色及使用權(quán)限。

關(guān)于圖片版權(quán)問題：《關(guān)于設(shè)計(jì)工作中的圖片版權(quán)應(yīng)用與說明》

組件

組件是設(shè)計(jì)師在日常設(shè)計(jì)工作中，極為常見的內(nèi)容。設(shè)計(jì)師除了在完成業(yè)務(wù)需求的的設(shè)計(jì)之后，同時(shí)需要設(shè)計(jì)一套適用于產(chǎn)品的組件庫。

所謂「最佳方案性價(jià)比」，就是我們需要在設(shè)計(jì)的個(gè)性化表達(dá)和資源投入之間找到最佳的平衡點(diǎn)，在關(guān)注出色視覺表現(xiàn)的基礎(chǔ)上，逐漸加強(qiáng)對(duì)項(xiàng)目協(xié)同及體驗(yàn)價(jià)值的關(guān)注，逐步形成新的設(shè)計(jì)思維模式，也就是組件化思維。

組件化設(shè)計(jì)就是把產(chǎn)品需求場(chǎng)景化、視覺表達(dá)模塊化，每個(gè)組件基于復(fù)用為目的，使其具備獨(dú)立的完整解決方案，通過標(biāo)準(zhǔn)的規(guī)范組合方式來構(gòu)建整個(gè)設(shè)計(jì)方案，從而提升設(shè)計(jì)效能。

組件化設(shè)計(jì)思維 3 個(gè)關(guān)鍵點(diǎn)：

• 完整組件方案：將組件視為一個(gè)獨(dú)立的產(chǎn)品，從多維度，多場(chǎng)景輸出組件的方案和組合標(biāo)準(zhǔn)。
• 組件化思維：從需求出發(fā)，拆解頁面表達(dá)結(jié)構(gòu)和所需組件。
• 通用頁面規(guī)則：通用的頁面與組件的柵格體系及替換規(guī)則

注：本系列文章為優(yōu)設(shè)獨(dú)家專題，請(qǐng)勿轉(zhuǎn)載。

歡迎添加作者微信交流：