編輯導(dǎo)語(yǔ)：在產(chǎn)品搭建中，設(shè)計(jì)師需要針對(duì)產(chǎn)品定位、前端開(kāi)發(fā)、用戶(hù)體驗(yàn)等方面來(lái)進(jìn)行產(chǎn)品設(shè)計(jì)方案的確定。那么產(chǎn)品設(shè)計(jì)應(yīng)當(dāng)從哪些方面著手搭建C端產(chǎn)品設(shè)計(jì)系統(tǒng)？本文作者結(jié)合其自身經(jīng)驗(yàn)、較為系統(tǒng)地總結(jié)了快速搭建C端產(chǎn)品設(shè)計(jì)系統(tǒng)的方案，一起來(lái)看一下。

文章主旨在于拆解和分析設(shè)計(jì)系統(tǒng)中基礎(chǔ)要素所制定規(guī)則的原由以及其合理性，了解設(shè)計(jì)系統(tǒng)基礎(chǔ)要素的搭建依據(jù)從而更靈活地為其所用。

前期資料整理

搭建自研產(chǎn)品的設(shè)計(jì)系統(tǒng)前需要做大量的工作，首先要針對(duì)產(chǎn)品定位來(lái)確定設(shè)計(jì)系統(tǒng)的MVP的范圍，這樣來(lái)保證搭建設(shè)計(jì)系統(tǒng)的完整性；其次再學(xué)習(xí)和借鑒已有、成熟的設(shè)計(jì)系統(tǒng)；最后要根據(jù)現(xiàn)有的團(tuán)隊(duì)、產(chǎn)品規(guī)模和人力來(lái)推進(jìn)工作，需要設(shè)計(jì)師和前端開(kāi)發(fā)緊密配合，盡可能多地同時(shí)更新內(nèi)容。

前期梳理其他設(shè)計(jì)系統(tǒng)整理表單抽取部分，鏈接如下：

備注：以上僅為個(gè)人從產(chǎn)品的業(yè)務(wù)維度理解后的分類(lèi)，僅供參考。

設(shè)計(jì)系統(tǒng)存在的價(jià)值的定義：

• 解決特定的設(shè)計(jì)問(wèn)題，快速輸出可復(fù)用的產(chǎn)品界面；
• 總結(jié)獲得成功的使用體驗(yàn)，為用戶(hù)持續(xù)提供友好體驗(yàn)；
• 便于產(chǎn)品在多終端的管理。

介入的契機(jī)

產(chǎn)品由0到1后、且開(kāi)始進(jìn)入有序又緊湊的迭代時(shí)考慮設(shè)計(jì)系統(tǒng)才是比較合適的。原因有二。

1. 已過(guò)磨合期的團(tuán)隊(duì)、工作流程和業(yè)務(wù)的穩(wěn)定性是搭建設(shè)計(jì)系統(tǒng)的前提。
2. 此階段是產(chǎn)品快速成長(zhǎng)階段，業(yè)務(wù)模塊和使用終端的豐富，對(duì)設(shè)計(jì)工作的挑戰(zhàn)會(huì)大大加強(qiáng)。設(shè)計(jì)工作橫向關(guān)聯(lián)上下游以及設(shè)計(jì)師多人協(xié)作的工作銜接，縱向關(guān)系到設(shè)計(jì)品質(zhì)在細(xì)節(jié)的把控和精進(jìn)，特別需要有系統(tǒng)的設(shè)計(jì)規(guī)則統(tǒng)一指導(dǎo)設(shè)計(jì)工作的進(jìn)行。

設(shè)計(jì)系統(tǒng)的內(nèi)容

在此次設(shè)計(jì)系統(tǒng)的研究方向主要在移動(dòng)端，為產(chǎn)品設(shè)計(jì)過(guò)程提供設(shè)計(jì)依據(jù)和規(guī)則指導(dǎo)。

設(shè)計(jì)系統(tǒng)（Design system）從以下五個(gè)部分來(lái)構(gòu)成：

1. 設(shè)計(jì)原則（Pprinciples）；
2. 基礎(chǔ)元素（通常指UI Design elements）；
3. 組件庫(kù)（Components of organisms）；
4. 模版（Templates）；
5. 模式（Patterns）。

具體搭建設(shè)計(jì)系統(tǒng)的方法和內(nèi)容：怎樣去獲得具有合理性元素的方法以及部分設(shè)計(jì)系統(tǒng)的內(nèi)容。

一、設(shè)計(jì)原則

設(shè)計(jì)原則需要依據(jù)產(chǎn)品定位來(lái)設(shè)定，不同行業(yè)屬性的產(chǎn)品有攜帶不同的產(chǎn)品基因，因此在初期設(shè)定時(shí)會(huì)以產(chǎn)品本身的業(yè)務(wù)為基礎(chǔ)，來(lái)探索系統(tǒng)的合理性、易操作性、高效、美觀。使用最基礎(chǔ)或通用的一些設(shè)計(jì)原則做引導(dǎo)。

二、基礎(chǔ)元素 Design elements

統(tǒng)一畫(huà)版——在不同環(huán)境中尺寸參考如下表，我們?cè)O(shè)定主要的開(kāi)發(fā)尺寸：375*667，在Sketch文件中一倍圖的基準(zhǔn)尺寸中，1Px=1Pt，視覺(jué)設(shè)計(jì)可與開(kāi)發(fā)尺寸保持一致性。

導(dǎo)出文件原則統(tǒng)一為Sketch導(dǎo)出2X圖交付給開(kāi)發(fā)，所有元素的設(shè)定盡量保持在不佳條件下仍然可以被用戶(hù)使用為前提。

基礎(chǔ)元素框架：包含字體、色彩、圖標(biāo)、空間、微動(dòng)效。

1. 元素——字體

設(shè)計(jì)依據(jù)

• 行寬（Measure or line length）每行文本的寬度；45個(gè)<最佳行寬的字符數(shù)<75個(gè)；闡述一個(gè)句子（包括字母和空格）閱讀最舒服在66個(gè)字符，最多不超過(guò)80個(gè)字符。
• 行高（Leading or line height）文字基線之間的距離；行高=基線高度（basicline-height）/字體大小 行高 =（1.5至2）* 字大?。ㄒ罁?jù)W3C的WEB內(nèi)容可訪問(wèn)性指南，設(shè)置段落間距）。
• 字母間距（Tracking or letter spaceing）字母之間的間距，影響文本的密度；其他適用設(shè)計(jì)原則：行寬越大，行高也應(yīng)越大；無(wú)襯線字體比襯線字體需要更大行高；粗字體比細(xì)字體需要更大行高。

1）字號(hào)&行高

• 分級(jí)：分級(jí)定義內(nèi)容如何被閱讀，通過(guò)字號(hào)來(lái)體現(xiàn)內(nèi)容的層級(jí)，使得要表達(dá)的重要信息可以快速被感知。
• 分度：根據(jù)分級(jí)的內(nèi)容給出對(duì)應(yīng)整體的字號(hào)、行高，此處行字號(hào)以2遞增的數(shù)列，行高采用（1.5-2）*字號(hào)，具體數(shù)值根據(jù)實(shí)際視覺(jué)效果確定。

2）色值&功能

在選定顏色色相后，可以根據(jù)無(wú)障礙設(shè)計(jì)原則，來(lái)選擇合適的顏色色值。從功能優(yōu)先的角度出發(fā)首要考慮人眼對(duì)色彩的可識(shí)別度。

在WCAG 2.0（Web content accessibility guideline） 中將顏色對(duì)比等級(jí)分為3種，A級(jí)、AA級(jí)、AAA級(jí)。等級(jí)越高意味著顏色的對(duì)比度越高，呈現(xiàn)出來(lái)的視覺(jué)壓力越大。

• A級(jí)：對(duì)比度3:1，是普通觀察者可接受的最低對(duì)比度；
• AA級(jí)：對(duì)比度4.5:1，是普通視力損失的人可接受的最低對(duì)比度；
• AAA級(jí)：對(duì)比度7:1，是嚴(yán)重視力損失的人可接受的最低對(duì)比度。

可以借助以下工具獲取符合無(wú)障礙設(shè)計(jì)原則的色彩：

• 色彩對(duì)比度檢測(cè)工具：對(duì)已有或即將優(yōu)化選定的色彩取值進(jìn)行檢測(cè)，從結(jié)果數(shù)值看是否符合要求。附工具鏈接：https://webaim.org/；http://t.cn/EVo4rxU
• 色彩推薦色值工具：此工具可以根據(jù)輸入的色值進(jìn)行臨近色的推薦，設(shè)計(jì)者可以從推薦中安全選出符合要求的顏色。附工具鏈接：https://contrast-finder.tanaguru.com/

以下是通過(guò)實(shí)際項(xiàng)目?jī)?nèi)字體顏色優(yōu)化前后的對(duì)比：

3）字體家族&字重

以iOS系統(tǒng)中常用字體——蘋(píng)方字體家族為例，字重共6級(jí)，分別為：Extralight-極細(xì)；Light-細(xì)；Regular-常規(guī)；Medium-中等；Bold-粗；Semibold-特粗。

字體家族的選擇時(shí)需考慮到字體家族的豐富和完整性，部分字體家族字重的類(lèi)型較少，在選用時(shí)需考慮其后拓展性而謹(jǐn)慎使用。

• 移動(dòng)端建議選擇造型寬厚、開(kāi)發(fā)、筆畫(huà)較粗的字體家族，此類(lèi)字體在字號(hào)很小的時(shí)候也都有較好的易讀性；
• 在構(gòu)建產(chǎn)品的字體規(guī)范時(shí)，字重的選擇建議在3-4個(gè)左右，形成粗細(xì)對(duì)比度從而對(duì)應(yīng)不同信息的視覺(jué)重量。

2. 元素——色彩

設(shè)計(jì)依據(jù)

色彩模式介紹

從原色色彩屏顯光學(xué)三原色RGB，印刷三原色CMYK；色彩模式：HSB、HSL、RGB、CMYK、LAB、灰度、位圖、雙色調(diào)、索引顏色和多通道等；其中HSB、HSL都是由RGB。

備注：目前常用設(shè)計(jì)工具Sketch、PS使用的是HSB模式；CSS采用的是HSL模式，在設(shè)計(jì)中不能直接把HSB的數(shù)值直接套用在HSL上。

• H色相Hue：色彩的質(zhì)地面貌；
• S飽和度Saturation：顏色的濃淡；
• B明度Brightness：描述顏色的明暗。
• 色彩體系：在構(gòu)建產(chǎn)品色板時(shí)，傾向的色階主色可以從以下色彩體系的色板上選取；日本PCCS、美國(guó)Munsell-、德國(guó)Ostwald、瑞典N(xiāo)CS。

1）色板劃分

色彩體系中以調(diào)色板為單位目前劃分為基礎(chǔ)色板、中性色板；使用色彩工具生成色板，例如使用Antdesign中的色板生成工具，先選擇好色板的主色，選取顏色時(shí)，明確色彩在界面中的使用場(chǎng)景和范圍后優(yōu)先確定色相，再選擇飽和度和明度。

• 基礎(chǔ)色板：包含由單色色階、臨色色階等系列色階構(gòu)成的色彩系列，部分基礎(chǔ)色板會(huì)直接采用品牌色。
• 中性色板：包含黑、白、灰，和由黑白調(diào)和的各種深淺不同的灰色系列（補(bǔ)充配色曲線和色階）。

2）配色管理

在設(shè)置色彩關(guān)系時(shí)需要先了解在不同文化定義下對(duì)顏色的固有的意義和引起的情緒傾向，然后再了解幾種色彩關(guān)系，運(yùn)用色彩關(guān)系來(lái)指導(dǎo)選擇配色。

此處采用HSB模式，H取值范圍（0-360）；S取值范圍（0-100%）；B取值范圍（0-100%）。

色階的配色流程首先選定色階內(nèi)的主色，然后橫向衍生出同飽和度和明度臨近色的色階，再?gòu)呐R近色中的單個(gè)色彩縱向衍生出此色的單色色階，最后組成色板系列。

具體配色的基礎(chǔ)原則和方法

① 近似色色板配色方案

也稱(chēng)為臨色，以一種顏色用作主色，相鄰顏色輔助，含有相同的基礎(chǔ)色，可以形成低對(duì)比度，色相相近的和諧色彩組合；較多用來(lái)構(gòu)成界面整體的氛圍。

通過(guò)以下三種方法可以得出不同冷暖感受的臨近色色階。

方法一

取色相值H為變量，H數(shù)值的梯度決定此色階的豐富性，即H的取值越接近，色彩之間的對(duì)比越弱，形成的色階微變化越多；由此方法可得出其他近似色配色，如下圖所示。

在HSB模式中近似色色階構(gòu)成方法如下， 以主色為#ff0000，改變色相，飽和度與明度一致的臨色色階（H值有序改變；S、B值不變），當(dāng)H的數(shù)值按5的倍數(shù)增加從H=0到H=50，可以配置出10色的臨色色階，設(shè)計(jì)者依據(jù)所需修改增加的數(shù)值范圍，獲取不同色板：

從上表選取顏色可得出臨近色板如下：

舉例：以Antdesign中的#f5222d為色階的主色，使用上述方法改變色相H值，得出飽和度與明度一致的臨色色階（H值有序改變；S、B值不變）。

從上表選取顏色可得出臨近色板如下：

以主色為#f5222d，有序改變H、S、B值，分別可得出下圖左右兩組不同明度的臨近色色階：

② 單色色板配色方案

選擇其中一種顏色為主色，次顏色的色相H值不變。此類(lèi)型單色的呈現(xiàn)是通過(guò)對(duì)顏色明度和飽和度的改變所得到，單色色階的構(gòu)成方法有三種，根據(jù)HSB的色彩模式，如下圖中1、2、3。

根據(jù)上圖圖表1，以主色為#ff0000，在H:0、B:100時(shí)，有序改變S的數(shù)值，形成以下單色色階：

根據(jù)圖表2，以主色為#ff0000，在H:0、S:100時(shí)；有序改變B的數(shù)值，形成以下單色色階：

我以上方法所得的色階與Antdesign的基礎(chǔ)色板中紅色色階進(jìn)行對(duì)比，整體的色彩梯度與Antdesign比較接近，并可以通過(guò)調(diào)整變量數(shù)值之間大小達(dá)到對(duì)整體色階的微調(diào)。

在實(shí)際使用過(guò)程中根據(jù)環(huán)境色還可對(duì)單個(gè)色值進(jìn)行微調(diào)。在搭建單色色階時(shí)，建議以純色來(lái)作為主色延展其他顏色，以下是用#ff0000，H:0S:100B:100延展出的單色色階。

（備注：純手工電腦調(diào)色，由于不知道ANTDESIG色板的構(gòu)成邏輯，只能?chē)L試各種方法后再與其進(jìn)行對(duì)比，這樣來(lái)校驗(yàn)其方法的可行性，用HBS來(lái)調(diào)色肉眼可測(cè)其結(jié)果還是比較接近的。）

③ 不用純色為主色的情況下

設(shè)主色為#f5222d，根據(jù)單色色階的構(gòu)成方法1、2可得出以下色階：

設(shè)主色為#f5222d，根據(jù)單色色階圖表3的方法可得出以下色階：

配色總結(jié)：考慮到色彩的冷暖、輕重、虛實(shí)所傳達(dá)的信息后從氛圍、情感、意境上選擇相對(duì)匹配的圖片，對(duì)圖片中的色彩進(jìn)行提取從而組成一套配色，推薦工具有Eagle。

3）設(shè)計(jì)系統(tǒng)中的色彩管理

色彩管理參考方法1，通過(guò)管理在主題中對(duì)顏色命名，推薦在產(chǎn)品級(jí)中使用。

• 主題：每個(gè)主題基于特定的主背景色在UI中基于某個(gè)色彩調(diào)性的顏色值；
• 命名：在色彩體系中，顏色的角色或用法給出統(tǒng)一命名，與實(shí)際色值無(wú)關(guān)。例如命名為T(mén)est-02，在白色主題中作為錯(cuò)誤提示可以映射為#de1e28，在黑色主題中可以映射為#ff1818；
• 職能：顏色的角色或用法，例如完成提示、錯(cuò)誤提示等；
• 色值：顏色的實(shí)際樣式，例如#da1e28。

在以白色為主題的背景下，命名為T(mén)est-02用于錯(cuò)誤提示其映射的色值為#da1e28；其Test-02不僅可以在同一主題里替換成不同的色值，也可以在不同主題下替換色值。

色彩管理參考方法2，通過(guò)職能來(lái)管理顏色，推薦在系統(tǒng)級(jí)的平臺(tái)使用。

以顏色的職能為主來(lái)劃分，包含以下色彩模塊：

Colors\background color\text color\font\fontsize\opacity\line height\spacing\sizing\shadow\time\touch\media query\z-index

在這些分類(lèi)好的色彩模塊內(nèi)再進(jìn)行色彩的命名。

總結(jié)色彩體系的搭建：

• 設(shè)定主色；
• 延展臨色和單色色階；
• 通過(guò)色彩管理方式將確定的顏色進(jìn)行分類(lèi)、命名、賦予職能；
• 后期的維護(hù)和更新。

附：配色工具推薦

• https://mycolor.space/
• https://uigradients.com/ #CanYouFeelTheLoveTonight
• https://colors.muz.li/palette/ffb3bf/8587f2/22aa1b/b7e4ff/0fa87a
• https://material.io/design/color/#tools-for-picking-colors
• 推薦閱讀：https://en.wikibooks.org/wiki/Color_Models:RGB,HSV,_HS

3. 元素——空間

設(shè)計(jì)依據(jù)

空間體系是用于對(duì)UI元素的測(cè)量、標(biāo)定和排序，是成為出色設(shè)計(jì)的關(guān)鍵，其目的是為了設(shè)計(jì)出靈活、高效、具有創(chuàng)造性和一致性美觀的頁(yè)面排版和布局。

構(gòu)建空間體系需要先定義基礎(chǔ)單位，基礎(chǔ)單位是用來(lái)創(chuàng)建支持測(cè)量空間比例的度量衡。PT與DP分別是對(duì)應(yīng)IOS和Android系統(tǒng)的設(shè)計(jì)單位，此處以PT為單位，統(tǒng)一使用畫(huà)板尺寸為375*667。

與平面設(shè)計(jì)不同的是，在UI產(chǎn)品中有很多不同的屏幕尺寸的用戶(hù)端，但是通常需要具有相同板式的設(shè)計(jì)來(lái)達(dá)到產(chǎn)品的統(tǒng)一，由此可見(jiàn)UI空間體系需要是整體考慮到布局的動(dòng)態(tài)適配和展示。

1）黃金分割在布局中的應(yīng)用

確定版心，由版心的位置來(lái)定義到上下、左右的邊距，在設(shè)定UI邊距的時(shí)候需要考慮各應(yīng)用系統(tǒng)狀態(tài)欄、固有高度，具體的數(shù)據(jù)值可以利用黃金分割比例，在以高為667的垂直矩形和以高為375的水品矩形上可以取得以下數(shù)值，并通過(guò)實(shí)例對(duì)黃金分割在用戶(hù)界面中如何使用做出部分展示。

參考方法:

以垂直矩形的數(shù)據(jù)代入界面，在具體使用黃金分割比例取界面數(shù)值時(shí)，需要考慮實(shí)際的視覺(jué)效果，下圖為如何在已有界面布局下優(yōu)化元素的寬高值。同樣的方法也常在插畫(huà)或Banner的布局中應(yīng)用。

2）空間比例的次序感——網(wǎng)格系統(tǒng)的使用

網(wǎng)格系統(tǒng)在平面設(shè)計(jì)中用來(lái)解決報(bào)刊、雜志、畫(huà)冊(cè)中圖文混排時(shí)的效率和美觀問(wèn)題，決定了紙張內(nèi)部分割，頁(yè)面設(shè)置決定了不同要素的位置。網(wǎng)格賦予圖書(shū)的連貫性，使其整體看上去更加和諧一致。如果將界面375*667想象成紙張，其頁(yè)面設(shè)置就決定了不同組件和元素之間的位置。

① 解決以圖片排版為主的網(wǎng)格方法

1 采用方根矩形（Root rectangles）規(guī)劃組件尺寸，代入公式A：B=X：A方根矩形可以分為更小的保持原有比例的矩形。

由下圖可見(jiàn)，在667*375的界面上所分割形成的為三次方根矩形，每一個(gè)新的小矩形和界面都擁有相同的比例。通常在使用版面大的模塊布局切割時(shí)使用，能夠形成多個(gè)比例協(xié)調(diào)的矩形分割。

② 解決以文字排版為主網(wǎng)格方法

采用現(xiàn)代主義原則的網(wǎng)格，步驟如下：

1. 按照黃金分割比劃分兩端邊距，確定版心；
2. 按照預(yù)期的欄數(shù)粗略的對(duì)版心進(jìn)行分欄；
3. 用雙橫線分割欄的高度；
4. 根據(jù)整體的文字?jǐn)?shù)量，設(shè)定每行字體的數(shù)量。45個(gè)<最佳行寬的字符數(shù)<75個(gè)；闡述一個(gè)句子（包括字母和空格）閱讀最舒服在66個(gè)字符，最多不超過(guò)80個(gè)字符。
5. 根據(jù)字高來(lái)計(jì)算每欄中的間距，行高 =（1.5至2）*字大小 (依據(jù)W3C的WEB內(nèi)容可訪問(wèn)性指南，設(shè)置段落間距)。通常文字在手機(jī)端中豎屏分欄用得比較少，可以使用在對(duì)圖文有特殊要求的產(chǎn)品排版中。

3）界面內(nèi)元素與元素之間的空間關(guān)系

在大量對(duì)當(dāng)前國(guó)內(nèi)外設(shè)計(jì)系統(tǒng)中UI空間調(diào)研，發(fā)現(xiàn)都選擇使用8倍數(shù)的規(guī)則，部分有區(qū)分對(duì)應(yīng)的組件模塊和文字之間的倍數(shù)，比如在Carbon design system中，對(duì)組件的空間排版使用布局（Spacing scale）來(lái)命名，對(duì)文字空間使用間距（Layout scale）來(lái)命名。在Material design中被統(tǒng)一使用成Layout，只區(qū)別使用8pt和4pt的對(duì)應(yīng)空間系數(shù)的梯度。

• 8pt網(wǎng)格規(guī)則，利用8的倍數(shù)來(lái)計(jì)量、設(shè)置界面中元素的尺寸以及各自之間的間距大小、寬窄；任何需要自定義的元素?cái)?shù)值都是8的倍數(shù)，多用于面積較大元素，例如組件與組件、卡片與卡片之間；
• 4pt網(wǎng)格規(guī)則，多用于圖標(biāo)或小文本塊之間。

設(shè)計(jì)這些間距倍率需要根據(jù)全局的界面空間來(lái)設(shè)定，無(wú)論是4還是8都需要依據(jù)產(chǎn)品實(shí)際界面的需求來(lái)考慮。

4）視覺(jué)感知與開(kāi)發(fā)實(shí)際操作的空間距離

實(shí)際設(shè)計(jì)過(guò)程中，字體因本身的結(jié)構(gòu)會(huì)導(dǎo)致與周邊元素的空間距離在視覺(jué)感知上跟實(shí)際設(shè)定的數(shù)值有所偏差，因此我們?cè)谠O(shè)計(jì)字體與其他元素的空間距離時(shí)，結(jié)合4pt網(wǎng)格可以參考以下2種方式。

① 以基線為參考設(shè)定間距

中文字體：基線與文本框間距相仿，如上圖所示，藍(lán)色代表基線，紅色為文本框，在設(shè)定間距時(shí)可以直接使用4pt網(wǎng)格規(guī)則。

英文字體：英文字體的基線與文本框的間距相差較大，以英文字母為排版內(nèi)容的主體時(shí)，英文字體的基線必須位于4pt網(wǎng)格上，從基線向下到相臨的元素、從Cap height 向上到相臨的原色之間必須使用4的整數(shù)倍(即下圖中的C的距離)。

② 以文本框?yàn)閰⒖荚O(shè)定間距

由上圖可知，直接使用以文本框來(lái)定義元素之間的間距時(shí)，需要考慮加上文本框到基線之間的距離后，再整體的給出間距的數(shù)值。

附設(shè)計(jì)推薦：https://uxdesign.cc/the-4px-baseline-grid-89485012dea6

4. 元素——ICON

ICON在設(shè)計(jì)系統(tǒng)中更傾向純粹的視覺(jué)感受和信息傳達(dá)。

• ICON需要根據(jù)其圖標(biāo)的用途大多可分為兩類(lèi)：信息圖標(biāo)、裝飾圖標(biāo)；信息圖標(biāo)中包含實(shí)用程序圖標(biāo)、對(duì)象圖標(biāo)、操作圖標(biāo)、Doctype圖標(biāo)、產(chǎn)品圖標(biāo)等。
• 從應(yīng)用的視覺(jué)層級(jí)依次分為三類(lèi)形式：1 面性；2 線面結(jié)合；3 線描；視覺(jué)層級(jí)的重量需要匹配界面的層級(jí)，比如在一級(jí)界面中的主功能ICON也是需要從視覺(jué)重量上重于其他二、三級(jí)界面內(nèi)的ICON。
• 具體制作中，從圖案造型上首要考慮用戶(hù)的認(rèn)別性，多使用高頻率出現(xiàn)的圖案造型，減少用戶(hù)對(duì)新圖標(biāo)的學(xué)習(xí)成本，不能為了設(shè)計(jì)而去設(shè)計(jì)，其次需要考慮到產(chǎn)品內(nèi)所有ICON的一致性和拓展性。

由于ICON需要根據(jù)不同的產(chǎn)品品牌風(fēng)格來(lái)設(shè)計(jì)不同的視覺(jué)風(fēng)格，此一枚好的ICON是展示出設(shè)計(jì)師的繪畫(huà)基礎(chǔ)能力和對(duì)信息的理解能力，所以此處暫不做深入的細(xì)節(jié)設(shè)計(jì)展開(kāi)。

5. 微交互——Micro interaction

個(gè)人觀點(diǎn)：微交互包含產(chǎn)品中簡(jiǎn)短交互流程（不用解決某一功能的交互模塊）且還包含微動(dòng)效。

統(tǒng)一動(dòng)效的邏輯規(guī)律，能更快地讓用戶(hù)在使用中熟悉產(chǎn)品并快速引導(dǎo)用戶(hù)舉一反三、將其經(jīng)驗(yàn)復(fù)制去使用同一產(chǎn)品的其他功能。

此類(lèi)別粗泛的歸類(lèi)可放在基礎(chǔ)元素中來(lái)說(shuō)，相對(duì)細(xì)致的了解還是歸類(lèi)在組件庫(kù)中更為合適。

三、組件庫(kù) Components of organisms

組件的整理相對(duì)UI元素會(huì)更需要理解產(chǎn)品的業(yè)務(wù)邏輯，通過(guò)對(duì)大部分設(shè)計(jì)系統(tǒng)內(nèi)的組件梳理，設(shè)計(jì)系統(tǒng)中組件的類(lèi)型分兩種。

1）分類(lèi)型組件

從ALIBABA FUSION、ANTDESIGN SYSTEM、發(fā)現(xiàn)此類(lèi)設(shè)計(jì)系統(tǒng)是有對(duì)組件的內(nèi)容進(jìn)行分類(lèi)的，大部分設(shè)計(jì)系統(tǒng)將組件庫(kù)分為五個(gè)模塊來(lái)管理：

1. Navigation導(dǎo)航；
2. 數(shù)據(jù)錄入；
3. 數(shù)據(jù)展示；
4. Feedback反饋；
5. 通用。

2）未分類(lèi)類(lèi)型，而是采用總覽的形式全部展示出來(lái)

例如：CarbonDesign system、NAVDesign system、Lightningdesign system，在業(yè)務(wù)功能簡(jiǎn)單的前期下可以采用。

組件通過(guò)設(shè)計(jì)和編碼以解決界面內(nèi)特定的UI問(wèn)題，特別是在運(yùn)營(yíng)端的產(chǎn)品設(shè)計(jì)中會(huì)更適合組件的應(yīng)用。既能夠提升用戶(hù)在使用過(guò)程的效率優(yōu)化用戶(hù)體驗(yàn)，同時(shí)相同功能的組件代碼可以調(diào)用也減少開(kāi)發(fā)工作量。

因此在設(shè)計(jì)系統(tǒng)中，組件作為常用的重要部分，與代碼和UI的關(guān)聯(lián)非常強(qiáng)。前期在沒(méi)有整體了解前，為方便理解透徹優(yōu)先采用有分類(lèi)組件的設(shè)計(jì)系統(tǒng)，后期在具體搭建時(shí)就可以根據(jù)所需來(lái)選擇式的加入到搭建的組件庫(kù)，方便后期的復(fù)用。

備注：關(guān)于組件的維護(hù)，現(xiàn)在很多設(shè)計(jì)規(guī)范里面都會(huì)有用到UI key，特別是在沒(méi)有購(gòu)買(mǎi)正版的設(shè)計(jì)軟件又同時(shí)需要團(tuán)隊(duì)協(xié)作設(shè)計(jì)時(shí)，組件的維護(hù)異常困難，因?yàn)檫@個(gè)原因還探索使用過(guò)figma，不過(guò)是在19年年初，還是sketch當(dāng)?shù)阑馃釙r(shí)期，figma的設(shè)計(jì)文件是可以同時(shí)協(xié)作、實(shí)時(shí)更新的，但是當(dāng)時(shí)所能提供的網(wǎng)絡(luò)真的是難受，需要1小時(shí)登錄一次，加上網(wǎng)速也很蝸牛也就放棄了。使用sketch維護(hù)了一套組件，一份sketch組件文件內(nèi)包含兩個(gè)頁(yè)面，如下圖：

“頁(yè)面1”(上圖)和“組件”（下圖）名字可以自己愛(ài)好取，“頁(yè)面1”其實(shí)承擔(dān)的是UIkey的角色，設(shè)計(jì)師可以根據(jù)分類(lèi)各取所需；“組件”承擔(dān)維護(hù)的角色，只能由指定的設(shè)計(jì)師對(duì)其進(jìn)行增刪改減的調(diào)整，并且調(diào)整前需保留一份原文件備用和對(duì)比；對(duì)“組件”內(nèi)修改后，“頁(yè)面1”的內(nèi)容也會(huì)隨其改變，其他設(shè)計(jì)師使用時(shí)只要認(rèn)準(zhǔn)修改后的文件版本號(hào)即可安心提取組件使用。（Design by:阿m）

四、模版 Templates

界面風(fēng)格的打樣或者說(shuō)是在做其他界面時(shí)的范本，個(gè)人理解是一項(xiàng)很綜合的需求，無(wú)論是產(chǎn)品本身功能界面的展示，或者是在接入SDK或者在跳轉(zhuǎn)三方平臺(tái)使用時(shí)，需要保持產(chǎn)品的視覺(jué)統(tǒng)一的調(diào)性。

其模版可以在產(chǎn)品接入不同渠道時(shí)提供統(tǒng)一的視覺(jué)風(fēng)格和代碼參考，這項(xiàng)與產(chǎn)品的品牌推廣也是密切相關(guān)的。

以電商購(gòu)物車(chē)界面，參數(shù)上不外是商鋪名稱(chēng)、商品圖片和名稱(chēng)、售價(jià)、數(shù)量、折扣優(yōu)惠等；但在文字的排版、用色的選擇、字體粗細(xì)的搭配等等不同的元素進(jìn)行搭配時(shí)會(huì)形成不同的視覺(jué)風(fēng)格，大概可以理解為同樣的豬肉，可以是粵菜里的叉燒、湘菜里的辣椒小炒肉、淮揚(yáng)菜里的四喜丸子；不同的廚師不同的風(fēng)味，不同的設(shè)計(jì)師不同的風(fēng)格。

形成模版就一定要具有延展性，有固定不能更改的元素，包括元素的位置或功能；也要有可以讓其跟隨填入的內(nèi)容來(lái)進(jìn)行變化的部分，這樣的模版才具有高效的應(yīng)用性，不然做出來(lái)的也只是自?shī)首詷?lè)。

自制過(guò)PPT的小伙伴們肯定有比較深的感觸，好用的模版和不好用的模版對(duì)于使用者來(lái)說(shuō)可不是節(jié)省一點(diǎn)點(diǎn)的時(shí)間，設(shè)計(jì)系統(tǒng)中的模版更是需要精煉才能符合更多的場(chǎng)景界面的需求。

五、模式 Patterns

模式是為達(dá)成目標(biāo)所設(shè)計(jì)出的特定的交互流程和視覺(jué)樣式，這種類(lèi)型多發(fā)生在業(yè)務(wù)成熟后才會(huì)形成，產(chǎn)品在初創(chuàng)階段由于業(yè)務(wù)不穩(wěn)定性決定其功能的交互或視覺(jué)都是在不斷的調(diào)整和改變，只有待業(yè)務(wù)穩(wěn)定后形成一定的規(guī)律或者為達(dá)成目的制定規(guī)則后，設(shè)計(jì)系統(tǒng)中就可以開(kāi)始依據(jù)其業(yè)務(wù)來(lái)探索嘗試適合的設(shè)計(jì)模式。

設(shè)計(jì)模式的原則包括六種：開(kāi)閉原則（Open Close Principle）、里氏代換原則（Liskov Substitution Principle）、依賴(lài)倒轉(zhuǎn)原則（Dependence Inversion Principle）、接口隔離原則（Interface Segregation Principle）、迪米特原則（Demeter Principle）、合成復(fù)用原則（Composite Reuse Principle）。

其中個(gè)人比較多用到的是開(kāi)閉原則和迪米特原則，在雙錄功能中主要考慮是在設(shè)計(jì)完成后，如果又因?yàn)楸O(jiān)管而需要調(diào)整，那就盡量避免修改已有的代碼，而是能夠在原來(lái)基礎(chǔ)上進(jìn)行拓展、維護(hù)和升級(jí)。分析市場(chǎng)同類(lèi)產(chǎn)品功能時(shí)一般會(huì)先將整條頁(yè)面流程拉出來(lái)分析其中的功能流程。

抽象出其功能流程，其中的雙錄功能是購(gòu)買(mǎi)其他的金融產(chǎn)品時(shí)也會(huì)復(fù)用的，此功能是依據(jù)業(yè)務(wù)成熟明確的規(guī)則來(lái)制定其模式。能將業(yè)務(wù)流程進(jìn)行對(duì)比和分析，可以發(fā)現(xiàn)盡管不同app里雙錄的內(nèi)容會(huì)少許不同，但是關(guān)鍵的幾個(gè)環(huán)節(jié)都是一致的。

例如下圖中紅色圈內(nèi)的步驟，是通過(guò)對(duì)不同產(chǎn)品的雙錄功能流程的分析，最后總結(jié)出同類(lèi)型必定會(huì)涉及到的界面功能。

將其抽象后再進(jìn)行設(shè)計(jì)。

UI設(shè)計(jì)師在設(shè)計(jì)工作中不會(huì)太多地涉及到業(yè)務(wù)流程和功能流程，比較多是通過(guò)交互的頁(yè)面流程圖開(kāi)始設(shè)計(jì)制作界面，但是在設(shè)計(jì)系統(tǒng)中搭建模式就需要了解更多同業(yè)務(wù)相關(guān)的功能流程，這樣才能產(chǎn)出實(shí)用的設(shè)計(jì)模式。具體的界面涉及到公司業(yè)務(wù)此處不做展示。

設(shè)計(jì)系統(tǒng)從0到1的過(guò)程會(huì)比較艱難，好的設(shè)計(jì)系統(tǒng)是具有生命一樣能伴隨產(chǎn)品的成長(zhǎng)而成長(zhǎng)。

以上內(nèi)容為個(gè)人在實(shí)際項(xiàng)目完成后的總結(jié)分析，圖片涉及到部分app產(chǎn)品，其界面僅為個(gè)人學(xué)習(xí)使用不作為商業(yè)用途。

本文由 @bell-wang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。