前言

對(duì)于B端來(lái)說(shuō)，可能很多UI和前端喜歡直接套用Ant Design或Element ui組件規(guī)范；因?yàn)橹捌髽I(yè)要求并不高，但是隨著市場(chǎng)和環(huán)境的發(fā)展，企業(yè)對(duì)B端越來(lái)越重視，這些模版太類同，顯然就太爛大街了。隨后字節(jié)推出Arco Design、騰訊推出企業(yè)級(jí)設(shè)計(jì)體系TDesign、有贊推出Zan Design，很多大廠都推出了適合自己產(chǎn)品的模版和規(guī)范，給了我們?cè)S多借鑒，能讓我們快速作出一個(gè)不出錯(cuò)的方案。不過(guò)企業(yè)、市場(chǎng)的要求顯然不止于此，我們的設(shè)計(jì)追求也不止于此。那么我們?nèi)绾尾拍軘[脫套模版，提高界面的精致度，提升界面的交互體驗(yàn)?zāi)兀?/span>

一. 設(shè)計(jì)目標(biāo)

為啥要搭建設(shè)計(jì)系統(tǒng)？設(shè)計(jì)系統(tǒng)對(duì)我們開(kāi)發(fā)團(tuán)隊(duì)中誰(shuí)有指導(dǎo)作用？

◆ 設(shè)計(jì)系統(tǒng)可以保證我們產(chǎn)品風(fēng)格的統(tǒng)一性，降低用戶對(duì)新產(chǎn)品適應(yīng)時(shí)間和學(xué)習(xí)成本；對(duì)UI設(shè)計(jì)輸出效率有很大的提高，在團(tuán)隊(duì)協(xié)同中可以大大的減少無(wú)效溝通，節(jié)約時(shí)間成本

◆ 在開(kāi)發(fā)團(tuán)隊(duì)中，設(shè)計(jì)系統(tǒng)對(duì)UI、交互、前端、測(cè)試等崗位的工作都有一定的指導(dǎo)作用

二. 設(shè)計(jì)原則

設(shè)計(jì)原則是傳統(tǒng)智慧的沉淀與未來(lái)趨勢(shì)的結(jié)合體，能夠幫助我們更好的進(jìn)行設(shè)計(jì)活動(dòng)時(shí)代在進(jìn)步，設(shè)計(jì)原則也必然需要不斷的更新以適應(yīng)發(fā)展新的設(shè)計(jì)原則要求界面更友好，操作更加人性化。

這里我歸納了8條原則僅供大家借鑒學(xué)習(xí):

◆ 可用性：有助于檢查用戶是否能夠輕松地完成任務(wù)、產(chǎn)品是否正常運(yùn)行以及是否完成工作

◆ 易用性：易用是首要考慮的因素，能一步解決的事情絕不兩步

◆ 統(tǒng)一性：頁(yè)面風(fēng)格、色彩、布局等要保持全局統(tǒng)一，不可為了某一功能的美觀而去破壞整體

◆ 親密性：信息的關(guān)聯(lián)性強(qiáng)，距離就要相應(yīng)的縮短，讓他們看起來(lái)是一個(gè)視覺(jué)單元；反之，則距離要加大，要讓用戶對(duì)信息的區(qū)域劃分一目了然

◆ 對(duì)齊性：在界面中，將元素進(jìn)行對(duì)齊，符合用戶的認(rèn)知，引導(dǎo)視覺(jué)流向，讓用戶更加流暢的閱讀信息

◆ 對(duì)比性：對(duì)比是增加視覺(jué)效果最有效方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識(shí)別關(guān)鍵信息。

◆ 重復(fù)性：相同的元素在整個(gè)界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識(shí)別出這些元素之間的關(guān)聯(lián)性。

◆ 穩(wěn)定性：沒(méi)有任何東西比產(chǎn)品的穩(wěn)定重要，down機(jī)再好的產(chǎn)品也是徒勞。會(huì)影響到系統(tǒng)穩(wěn)定的事情不能做

三. 框架布局

響應(yīng)式布局，能夠適應(yīng)各種屏幕尺寸及分辨率，確保整體布局的一致性簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。一般采用柵格系統(tǒng)布局，常用柵格一般是16列或24列。

◆ 柵格：是對(duì)界面當(dāng)中元素橫向排布的一種模式，主要用于大型區(qū)塊間距的排列，不適用于圖標(biāo)與文字間隔的小型元素。

◆ 模度：為界面布局的一致性和韻律感，統(tǒng)一設(shè)計(jì)到開(kāi)發(fā)的布局語(yǔ)言，減少還原損耗，我們網(wǎng)格基數(shù)設(shè)為8，卡片寬度及間距為8n。常用模度：4 8 16 24 32 40 48 56 64 … 1920

◆ 布局：常用左右布局或上下布局

左右布局以1920頁(yè)面布局為案例：通常B端產(chǎn)品左側(cè)會(huì)有一個(gè)導(dǎo)航菜單，假設(shè)240px,右側(cè)核心工作區(qū)域總寬1632px, 右偏移240px ,列數(shù)16列，列寬86px, 間隙16px， 左右邊距24px; 左邊導(dǎo)航和邊距固定不變。

上下布局以1920頁(yè)面布局為案例：通常左右會(huì)有一個(gè)留白區(qū)域，假設(shè)144px,中間核心區(qū)域總寬1632px, 右偏移144px ,列數(shù)16列，列寬86px, 間隙16px。

四. 設(shè)計(jì)風(fēng)格

設(shè)計(jì)風(fēng)格說(shuō)白了就是用戶最直觀的感受，“商務(wù)、時(shí)尚、簡(jiǎn)約、科技感、沉穩(wěn)、年輕、高端...”?

決定設(shè)計(jì)風(fēng)格的因素有這些：

1. 顏色

色彩是UI設(shè)計(jì)的基石，人腦對(duì)于色彩的記憶度要高于形態(tài)；除了美學(xué)之外，色彩還是是情感和聯(lián)想的創(chuàng)造者。通過(guò)對(duì)自然的感知和行為，我們通常對(duì)色彩定義品牌色板、功能色板、中性色板，以及衍生色。 

◆ 品牌色：是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺(jué)元素之一（例如：我們熟悉的政府藍(lán)/黨政紅/淘寶橙，他們都能直觀或間接的傳達(dá)產(chǎn)品特征屬性）

◆ 功能色：遵守用戶對(duì)色彩的基本認(rèn)知，保持一致性，不過(guò)多的自定義干擾用戶的認(rèn)知體驗(yàn)，提高用戶的閱讀理解力，功能色代表了明確的信息以及狀態(tài)，比如正常、成功、失敗、警告、鏈接等

◆ 中性色：主要應(yīng)用在界面的文字部分、背景、邊框、分割線等場(chǎng)景，根據(jù)使用場(chǎng)景，通常將中性色被定義為 3 類：文字、線條、背景

◆ 衍生色：B端產(chǎn)品中顏色的應(yīng)用場(chǎng)景可能很廣泛，要考慮它的延展性，按照一定規(guī)則定義完畢主色，便可以自動(dòng)獲得一系列完整的衍生色

2. 文字

設(shè)定統(tǒng)一的字體規(guī)范，無(wú)襯線黑體中宮更為開(kāi)放，布白更為勻稱，顯示效果更為舒適，醒目利于閱讀，更利于視覺(jué)信息的傳達(dá)，在互聯(lián)網(wǎng)時(shí)代后期在界面設(shè)計(jì)中字體樣式還是會(huì)以無(wú)襯線體為主。

◆ 字體家族：根據(jù)系統(tǒng)區(qū)分Mac or Windows，如果用戶使用的是Mac系統(tǒng)可以優(yōu)先使用Mac默認(rèn)字體渲染 ；如果使用的是Win，字體兼容性選擇順序（有購(gòu)買版權(quán)字體的可優(yōu)先考慮），例：

◆ 字號(hào)：為了提升用戶的閱讀體驗(yàn)，滿足用戶的可讀性，更為舒適、清晰，也能保證界面的層次感（結(jié)合WCAG 2.0標(biāo)準(zhǔn)），將 PC/Web 端主字體從以前的12px改為 14px。

◆ 行高：為上下文之間提供了呼吸的空間，規(guī)范的行高，可以使得界面層次清晰、重點(diǎn)突出

◆ 字體顏色：WCAG 2.0 中將顏色對(duì)比等級(jí)分為 3 種，A級(jí)，AA級(jí)，AAA級(jí)，等級(jí)越高意味著顏色的對(duì)比度越高，呈現(xiàn)出來(lái)的視覺(jué)壓力越大。字體顏色數(shù)量不建議太多，根據(jù)文字主次關(guān)系定義3-4個(gè)為宜（例：主文字、輔助性文字、提示文字、輕提示/禁用文字）

◆ 字重：字重不建議太多種，2-3種為宜（例：Regular、Medium、Light）

3. 圖型

圖形中有圖片、圖標(biāo)、圖表，都對(duì)整體風(fēng)格有一定影響，設(shè)定統(tǒng)一的圖形使用規(guī)范，可以使視覺(jué)效果更加和諧

五. 交互

交互，即交流互動(dòng)，也就是說(shuō)我們自己通過(guò)我們的五覺(jué)：視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)、嗅覺(jué)、味覺(jué)來(lái)感受其他事物并和他們之間產(chǎn)生信息溝通的過(guò)程。在互聯(lián)網(wǎng)中交互對(duì)象個(gè)體主要是人和機(jī)器，所謂人機(jī)互動(dòng)，相互配合，共同達(dá)成某種目的。

◆ 交互方式：保持產(chǎn)品的統(tǒng)一性，同類別的交互不可有不同的操作感受。要符合大眾的認(rèn)知習(xí)慣，可創(chuàng)新但不可違背潛意識(shí)，例：wab端頁(yè)面鼠標(biāo)交互操作一般有下拉、上滑、按壓、懸停，移動(dòng)端一般左右上下滑動(dòng)、下拉、上拉、雙指縮放...

◆ 交互狀態(tài)：按鈕狀態(tài)變化，頁(yè)面狀態(tài)變化，組件狀態(tài)變化...交互內(nèi)容確實(shí)太大了，我個(gè)人也只接觸到的也只是冰山一角，只能拋磚引玉，勾起大家思維，相互探討學(xué)習(xí)

◆ 引導(dǎo)：引導(dǎo)一般常見(jiàn)5 種：新手引導(dǎo)）、步驟引導(dǎo)、幫助/操作引導(dǎo)、新功能引導(dǎo)、空白頁(yè)引導(dǎo)

六. 組件

什么是組件？組件是抽象概念,對(duì)面向過(guò)程而言是對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝。對(duì)面向?qū)ο蠖允且恍┓夏撤N規(guī)范的類組合在一起就構(gòu)成了組件。它可以提供某些特定的功能。組件出現(xiàn)的原因軟件工程中重復(fù)、反復(fù)出現(xiàn)、普遍的、有相似的問(wèn)題的出現(xiàn),導(dǎo)致開(kāi)發(fā)過(guò)程中有大量的代碼需要不斷的重新設(shè)計(jì),開(kāi)發(fā)周期延長(zhǎng),開(kāi)發(fā)復(fù)雜度增加。需要岀現(xiàn)一種模型通過(guò)剝離掉各個(gè)問(wèn)題的特性,抽取各個(gè)問(wèn)題之間的共性。從而在保證代碼的靈活性下極大的增加代碼的可重用性。組件的岀現(xiàn)就是為了解決這些實(shí)際問(wèn)題的。

在前端眼里，組件通常是指頁(yè)面上的視圖單元，可以說(shuō)，UI組件是組件的子集。組件庫(kù)大致可以分為這幾大類：

◆ 導(dǎo)航：固釘、面包屑、下拉菜單、下拉導(dǎo)航、電梯、菜單、分頁(yè)器、步驟條

◆ 數(shù)據(jù)錄入：自動(dòng)完成、級(jí)聯(lián)選擇、多選框、日期選擇框、表單、輸入框、數(shù)字輸入框、提及、步進(jìn)器、評(píng)分、下拉選擇、滑動(dòng)條、穿梭框、文件上傳

◆ 數(shù)據(jù)展示: 頭像、標(biāo)題、卡片、輪播、折疊面板、表格、拖拽排序、高亮關(guān)鍵詞、時(shí)間軸、走馬燈、空狀態(tài)、徽標(biāo)數(shù)、樹(shù)、標(biāo)簽、標(biāo)簽頁(yè)、圖片、氣泡...

◆ 反饋: 警告提示、抽屜、全局提示、對(duì)話框、通知提醒框、氣泡確認(rèn)框、進(jìn)度條、結(jié)果、加載中..

◆ 其他: 錨點(diǎn)、回到頂部、圖標(biāo)...

七. 總結(jié) 

設(shè)計(jì)規(guī)范是為了更高效的做設(shè)計(jì)，但不是一成不變的，它在落地使用的時(shí)或多或少都會(huì)有問(wèn)題，需要我們慢慢的去反復(fù)檢驗(yàn)它的合理性，發(fā)現(xiàn)不合理的及時(shí)更正，不斷迭代，不斷沉淀，不斷優(yōu)化，這樣才能不斷提高產(chǎn)品的用戶體驗(yàn)。此次分享借鑒一些前輩的經(jīng)驗(yàn)，主要是整理歸納學(xué)習(xí)，如有需要補(bǔ)充或糾正的，歡迎大家相互探討！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：小魚(yú)ID   來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司