国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

前期資料整理

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

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

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

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

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

介入的契機

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

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

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

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

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

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

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

一、設(shè)計原則

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

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

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

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

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

1. 元素——字體

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

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

1）字號&行高

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

2）色值&功能

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

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

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

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

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

以下是通過實際項目內(nèi)字體顏色優(yōu)化前后的對比：

3）字體家族&字重

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

字體家族的選擇時需考慮到字體家族的豐富和完整性，部分字體家族字重的類型較少，在選用時需考慮其后拓展性而謹慎使用。

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

2. 元素——色彩

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

色彩模式介紹

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

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

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

1）色板劃分

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

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

2）配色管理

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

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

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

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

① 近似色色板配色方案

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

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

方法一

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

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

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

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

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

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

② 單色色板配色方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以顏色的職能為主來劃分，包含以下色彩模塊：

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

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

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

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

附：配色工具推薦

• 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ù)

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

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

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

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

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

參考方法:

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

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

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

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

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

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

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

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

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

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

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

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

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

4）視覺感知與開發(fā)實際操作的空間距離

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

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

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

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

② 以文本框為參考設(shè)定間距

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

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

4. 元素——ICON

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

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

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

5. 微交互——Micro interaction

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

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

此類別粗泛的歸類可放在基礎(chǔ)元素中來說，相對細致的了解還是歸類在組件庫中更為合適。

三、組件庫 Components of organisms

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

1）分類型組件

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

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

2）未分類類型，而是采用總覽的形式全部展示出來

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

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

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

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

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

四、模版 Templates

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

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

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

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

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

五、模式 Patterns

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

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

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

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

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

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

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

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

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

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

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