中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：關(guān)于B端產(chǎn)品設(shè)計(jì)規(guī)范的文章，我們已經(jīng)看過很多了，設(shè)計(jì)師們哪怕是讀者們都能體會(huì)到組件庫的重要性了！在本篇文章中，作者從細(xì)節(jié)出發(fā)對(duì)組件庫進(jìn)行了解析，總結(jié)了如何打造B端設(shè)計(jì)組件庫，并且分享了他總結(jié)的一些方法和思考。

說到B端產(chǎn)品的設(shè)計(jì)規(guī)范，大家并不陌生，尤其是設(shè)計(jì)師們，深刻的體會(huì)到有一套組件庫是多么的重要！網(wǎng)上有很多專業(yè)的關(guān)于設(shè)計(jì)規(guī)范的文章，但沒有區(qū)分C端產(chǎn)品和B端產(chǎn)品，B端產(chǎn)品通常有更長的產(chǎn)品周期且多平臺(tái)合作，很容易導(dǎo)致產(chǎn)品設(shè)計(jì)不一致。

這些問題隨著團(tuán)隊(duì)的擴(kuò)大或者產(chǎn)品的功能增加而變得更加嚴(yán)重，這時(shí)怎么保證設(shè)計(jì)的一致性就是我們必須要考慮的問題。本文受有贊設(shè)計(jì)師美芳老師的指導(dǎo)，以及結(jié)合自己的日常工作整理成文章。

對(duì)B端設(shè)計(jì)團(tuán)隊(duì)來說，最大的挑戰(zhàn)是如何通過提高產(chǎn)品的用戶體驗(yàn)一致性，來幫助B端用戶高效完成任務(wù)，本文將結(jié)合B端項(xiàng)目，從多角度深入細(xì)節(jié)去解析組件庫，總結(jié)的一些方法和思考分享給小伙伴們，也希望大家從更多的角度跟我一起探討。

一、為何需要設(shè)計(jì)規(guī)范和組件化？

1. 設(shè)計(jì)規(guī)范的定義

定義：從各個(gè)功能場景里，把反復(fù)被調(diào)用的交互邏輯，頁面元素樣式，業(yè)務(wù)場景等等沉淀出來用文檔的形式輸出，組件庫是可以理解為是一個(gè)重復(fù)使用的界面設(shè)計(jì)元素的集合體，它是一個(gè)文件庫。

比如我們?cè)贠A的PC端頁面的設(shè)計(jì)當(dāng)中，很多情況下表單填寫過程中都使用到了時(shí)間和日期的選擇，迭代幾個(gè)項(xiàng)目之后發(fā)現(xiàn)時(shí)間和日期的選擇會(huì)被許多不同的業(yè)務(wù)場景反復(fù)使用。

那么我們就可以對(duì)時(shí)間和日期選擇器進(jìn)行規(guī)范，使之在任何場景下調(diào)用時(shí)間和日期選擇器時(shí)，只要了解到它的規(guī)范，就可以保證輸出標(biāo)準(zhǔn)化的一致的體驗(yàn)，保證了易用性的同時(shí)，提升了效率不需要反復(fù)開發(fā)。

這種以文檔的形式輸出的設(shè)計(jì)規(guī)范，大多數(shù)情況下起到設(shè)計(jì)師之間互相協(xié)同，如果文檔里的樣式被前端工程師開發(fā)成統(tǒng)一的代碼組件，就可以在前端工程師之間互相調(diào)用。

這幾年，各個(gè)互聯(lián)網(wǎng)大廠都在自己的 “大中臺(tái)” 戰(zhàn)略背景下，積極沉淀著自己企業(yè)中可以中臺(tái)化的職能組織，平臺(tái)產(chǎn)品和技術(shù)能力。

在產(chǎn)品的表現(xiàn)層緯度上，設(shè)計(jì)規(guī)范也是具有相同意義的設(shè)計(jì)中臺(tái)，承載著作為一個(gè)沉淀基礎(chǔ)能力的支持平臺(tái)的特征的同時(shí)，也具有的賦能多邊業(yè)務(wù)多種角色的重要作用和價(jià)值。

下面是為大家整理出的市面上的組件庫：

• ANT Desisn(螞蟻金服U組件,包含PC和移動(dòng)端)，官網(wǎng)地址：https://ant.design/index-cn
• ANTV Charts(螞蟻金服數(shù)據(jù)可視化組件,包含PC和移動(dòng)端），官網(wǎng)地址：http://antv-2018.alipay.com/zh-cn/index.html
• Element U|(餓了么PC端組件庫），官網(wǎng)地址：https://element.eleme.cn/#/zh-CN
• Vant（有贊移動(dòng)端組件庫），https://youzan.github.io/vant/#/zh-CN/design

組件庫相當(dāng)于我們?cè)O(shè)計(jì)過程中的字典，我們需要準(zhǔn)確高效的去翻查并使用這本字典，并且在此基礎(chǔ)上編校修訂亦可。

2. 為什么建立設(shè)計(jì)規(guī)范

1）保持設(shè)計(jì)一致性

• 針對(duì)內(nèi)部設(shè)計(jì)師：一致性設(shè)計(jì)規(guī)范，可以讓設(shè)計(jì)團(tuán)隊(duì)的成員都遵循統(tǒng)一專業(yè)的一致性原則，不僅設(shè)計(jì)輸出效率更高，也讓產(chǎn)品的一致性更強(qiáng)，同時(shí)降低了設(shè)計(jì)師以個(gè)人喜好和經(jīng)驗(yàn)的標(biāo)準(zhǔn)輸出設(shè)計(jì)物的情況。
• 針對(duì)客戶角度：可以讓客戶站在產(chǎn)品和設(shè)計(jì)師的角度去了解產(chǎn)品設(shè)計(jì)的一些問題，進(jìn)而在后續(xù)用戶溝通環(huán)節(jié)中，增加客戶對(duì)產(chǎn)品的理解度，降低用戶在使用產(chǎn)品中的學(xué)習(xí)成本，保持相關(guān)認(rèn)知和記憶可以被沿用，預(yù)期操作結(jié)果。
• 針對(duì)公司品牌：相關(guān)產(chǎn)品間，或產(chǎn)品內(nèi)部建立一致性設(shè)計(jì)規(guī)范，會(huì)讓公司在商業(yè)競爭中取得更加有利的地位。

2）提升開發(fā)效率

開發(fā)通過建立公共組件庫，極大的提高開發(fā)效率，樣式被前端工程師開發(fā)成統(tǒng)一的代碼組件，就可以在前端工程師之間互相調(diào)用，提高設(shè)計(jì)還原度，降低對(duì)接成本。

3）方便產(chǎn)品迭代

隨著產(chǎn)品的業(yè)務(wù)變化，發(fā)現(xiàn)一些問題或者需要優(yōu)化用戶體驗(yàn)的時(shí)候，針對(duì)單個(gè)空間進(jìn)行調(diào)整，就可以影響全局，十分便捷。

3. 認(rèn)識(shí)設(shè)計(jì)原則

首先在設(shè)計(jì)原則下,我們引申出B端設(shè)計(jì)制定原則：一致、反饋、效率、可控

1）一致

在尼爾森十大可用性原則中，闡述了什么是一致性及一致性涵蓋的范圍。一致性是指：在同一個(gè)產(chǎn)品中，產(chǎn)品內(nèi)部的導(dǎo)航方式、相同功能的命名方式、類似元素的視覺呈現(xiàn)、操作行為的交互準(zhǔn)則等方面要保持一致性。

• 與現(xiàn)實(shí)生活一致 ：與現(xiàn)實(shí)生活的流程、邏輯保持一致,遵循用戶習(xí)慣的語言和概念；
• 在界面中一致：所有的元素和結(jié)構(gòu)需保持一致,比如:設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。

2）反饋

• 控制反饋：通過界面樣式和交互動(dòng)效讓用戶清晰的感知自己的操作；
• 頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。

3）效率

• 簡化流程：設(shè)計(jì)簡潔直觀的操作流程；
• 清晰明確：語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策；
• 幫助用戶識(shí)別：界面簡單直白，讓用戶快速識(shí)別而非回憶，減少用戶記憶負(fù)擔(dān)。

4）可控

• 用戶決策：根據(jù)場景可給予用戶操作建議或安全提示，但不能代替用戶進(jìn)行決策；
• 結(jié)果可控：用戶可以自由的進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。

4. 拆解設(shè)計(jì)組件庫

認(rèn)識(shí)設(shè)計(jì)規(guī)范的方式我們從兩個(gè)階段來考慮：

1）理解階段

我們?cè)谥谱鹘M件庫的過程中應(yīng)用到了兩個(gè)概念原子化設(shè)計(jì)理論 Atomic Design、結(jié)構(gòu)細(xì)分。結(jié)構(gòu)細(xì)分其實(shí)就是將各個(gè)獨(dú)立的模塊(組織)進(jìn)行打散(原子)、細(xì)化、整合、重組。

2）拆解階段

在結(jié)構(gòu)細(xì)分時(shí)，需要先從項(xiàng)目中篩選岀滿足復(fù)用性和拓展性的可拆解的模塊，對(duì)于B端的產(chǎn)品來說我們?cè)诤Y選的時(shí)候根據(jù)舊版本內(nèi)容，把頁面窮舉羅列岀來，分析相似性和可替換的模塊，然后利用思維導(dǎo)圖的方式羅列岀可組件化的內(nèi)容，做成可替換的組件，使毎個(gè)原子可獨(dú)立變化和替換。

這種多嵌套組合式的細(xì)分方式，讓組件最終呈現(xiàn)來的樣式滿足多場景的業(yè)務(wù)需求我們?cè)诟鶕?jù)產(chǎn)品類型把組件分為:通用、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、業(yè)務(wù)組件六大組件，具體細(xì)分見下圖：

• 導(dǎo)航：幫助你更好的查找什么樣的架構(gòu)是一個(gè)好架構(gòu)，能讓用戶知道放在哪里，好的架構(gòu)的載體就是我們的導(dǎo)航，導(dǎo)航起到的作用就是“查”。
• 數(shù)據(jù)錄入組件：主要作用是“增和改”， 以及數(shù)據(jù)展示類組件，像是表格和列表、小氣泡標(biāo)簽、以及可視化圖表等等 。
• 反饋類組件：用來滿足設(shè)計(jì)規(guī)范的反饋原則。
• 業(yè)務(wù)組件：類似于學(xué)生端直播上課、服務(wù)類的看板、OA看板類的應(yīng)用，比如預(yù)約會(huì)議室、日程 teambition 項(xiàng)目和業(yè)務(wù)拖拽。

二、通用組件

• 顏色（主題色、功能色、中性色等）
• 文字（標(biāo)題、正文、輔助文字等）
• 圖標(biāo)（導(dǎo)航圖標(biāo)、組件圖標(biāo)、表格圖標(biāo)等）
• 分割線（頁面分割線、面板分割線、文字分割線等）

1. 色彩

關(guān)于色彩主要?jiǎng)澐譃槿齻€(gè)：主色、功能色、中性色。

• 主色調(diào)的選擇，一般根據(jù)用戶群體、用戶使用場景以及產(chǎn)品的定位來進(jìn)行思考和選取。當(dāng)然對(duì)于后臺(tái)系統(tǒng)來說系統(tǒng)可做皮膚功能的擴(kuò)展，給定用戶一個(gè)基礎(chǔ)的色調(diào)，然后做幾套配色好的皮膚，讓用戶可以自由選擇。對(duì)于公司來說一個(gè)項(xiàng)目可能會(huì)兼顧多個(gè)客戶，客戶都想要根據(jù)自己品牌色來做自己的系統(tǒng)，擁有多套可選擇的方案也給后續(xù)維護(hù)和銷售提供了便利。
• 功能色：成功色一般對(duì)應(yīng)綠色、警告色對(duì)應(yīng)黃色、錯(cuò)誤色對(duì)應(yīng)紅色。
• 中性色：一般使用灰色來作為中性色搭配，應(yīng)用在標(biāo)題文字、正文文字、邊框、背景色等。

當(dāng)然，也可以定義更多的業(yè)務(wù)色，形成業(yè)務(wù)組件規(guī)范，用于banner、插畫、業(yè)務(wù)標(biāo)簽等。

2. 文字

后臺(tái)系統(tǒng)在字體選擇上都比較單一，中文：微軟雅黑、英文：Aria即可。

只是注意在給前端開發(fā)培訓(xùn)規(guī)范的時(shí)候重點(diǎn)提醒他們需要做字體樣式的重置，不然當(dāng)你后期走查界面的時(shí)候一個(gè)頁面同時(shí)有思源、宋體、有微軟雅黑強(qiáng)迫癥嚴(yán)重受不了啊，會(huì)非常影響看界面的心情。體會(huì)過走查這一步的設(shè)計(jì)師都懂。

3. 邊框和圓角

邊框的粗細(xì)規(guī)范1px，圓角是用一段與角的兩邊相切的圓弧替換原來的角，在界面設(shè)計(jì)中，適當(dāng)?shù)倪吔遣粌H可以反應(yīng)產(chǎn)品的調(diào)性，還提供更友好的視覺體驗(yàn)，用于按鈕和輸入框的圓角為2px，用于卡片的圓角4px，通常在PC后臺(tái)不推薦用大圓角。

4. 按鈕

按鈕是交互設(shè)計(jì)中必備的元素，它在用戶和系統(tǒng)的交互中承擔(dān)著非常重要的作用。

后臺(tái)中常見的按鈕類型分為線性按鈕、面狀按鈕、文字按鈕、圖標(biāo)按鈕、文字+圖標(biāo)按鈕。規(guī)范中要寫出按鈕的樣式包括寬高、圓角以及文字按鈕的字?jǐn)?shù)一般限制6個(gè)以內(nèi)(這個(gè)是給產(chǎn)品同事看，有時(shí)候會(huì)拿到原型一個(gè)按鈕字?jǐn)?shù)特別長。

想想看一個(gè)正常的按鈕字?jǐn)?shù)太多了用戶都需要花很長時(shí)間去讀取這個(gè)按鈕的功能然后再操作，非常影響用戶體驗(yàn)按鈕的寬度給一個(gè)常規(guī)的寬度和高度，然后操作正常寬度文字離邊框的間間距是多少都需要寫清楚。

以及按鈕的各種狀態(tài)：默認(rèn)狀態(tài)、鼠標(biāo)懸停、焦點(diǎn)獲取、按住/激活、禁用，按鈕的不同狀態(tài)對(duì)應(yīng)設(shè)計(jì)原則中的反饋原則。

按鈕的擺放位置也有一定的規(guī)范，頂部和底部一般是操作全局的按鈕 還有一些尾隨的按鈕，內(nèi)容地步按鈕跟常駐按鈕不一樣，按照閱讀順序擺放按鈕層級(jí)。

5. 間距

網(wǎng)格可以確保不同布局之間的視覺一致性，同時(shí)可以靈活的適配多種尺寸寬度的設(shè)計(jì)。

而在網(wǎng)格系統(tǒng)中應(yīng)該更加注重的是間隙和邊距，而間隙要遵循網(wǎng)格系統(tǒng)（例如使用4、8、16、24、32等和8具有規(guī)律的數(shù)字）同時(shí)在產(chǎn)品中的各類元素也要遵循這類原則（例如 Icon 大小、組件大小等）。

6. 柵格

根據(jù)產(chǎn)品不同情況對(duì)各類頁面提供不同布局結(jié)構(gòu)。一般我們選用24柵格布局，由24欄+23欄+2頁邊距組成，而在不同柵格結(jié)構(gòu)中柵格區(qū)域也會(huì)有所不同，固定區(qū)域會(huì)存在于響應(yīng)式網(wǎng)格之外，不隨著頁面的變化而改變大小。

同時(shí)在應(yīng)用網(wǎng)格系統(tǒng)中也要考慮網(wǎng)格區(qū)域元素的行為，網(wǎng)格區(qū)域元素行為可分為固定的、流動(dòng)的（隨著屏幕大小而改變）、跟隨的（元素寬度固定但受其他元素影響）、擠壓的（隨頁面元素的出現(xiàn)而收縮）。

我們使用柵格不是為了包裝而包裝，是用來約束模塊的比例，而不是寬度，長短伸縮都會(huì)發(fā)生變化，不管你有幾級(jí)導(dǎo)航，只要?dú)w屬在全局控制層就是不變的 。

三、導(dǎo)航組件

1. 導(dǎo)航

全局控制層為導(dǎo)航類的組件：

1）頂部導(dǎo)航

頂部導(dǎo)航適用于一級(jí)導(dǎo)航數(shù)量較少，內(nèi)容較為簡單的系統(tǒng)，追求沉浸式閱讀操作的系統(tǒng)，我們?cè)谄髽I(yè)官網(wǎng)看到的情況比較多。

頂部導(dǎo)航的優(yōu)點(diǎn)：

• 占用屏幕空間小，為內(nèi)容區(qū)留出更多空間；
• 對(duì)視覺的干擾小，符合從上到下的閱讀習(xí)慣。

頂部導(dǎo)航的缺點(diǎn)：

• 隨著業(yè)務(wù)的發(fā)展，拓展性變差；
• 二三級(jí)導(dǎo)航點(diǎn)擊后隱藏，不利于用戶記憶與查找。

例如：騰訊云官網(wǎng)導(dǎo)航有4級(jí)，內(nèi)容是響應(yīng)式的，但是他的導(dǎo)航欄是固定的，點(diǎn)擊完即會(huì)收起，會(huì)讓用戶迷惑不知道從哪里來的，而且只知道一級(jí)導(dǎo)航，二、三級(jí)導(dǎo)航是收起的狀態(tài)，所以她的拓展性很差，不利于用戶記憶與查找。

2）側(cè)邊導(dǎo)航

側(cè)邊導(dǎo)航適用于更專注功能和快速操作的系統(tǒng)，多用于較為復(fù)雜的后臺(tái)系統(tǒng)，但是如果后臺(tái)系統(tǒng)不是很復(fù)雜，那就沒必要使用側(cè)邊導(dǎo)航。

側(cè)邊導(dǎo)航的優(yōu)點(diǎn)：

1. 拓展性，一級(jí)導(dǎo)航的數(shù)目可以展示更多；
2. 層級(jí)清晰，一二三級(jí)導(dǎo)航都可以流暢展示；
3. 操作效率高，用戶在操作和瀏覽中可以快速定位和切換當(dāng)前位置。

側(cè)邊導(dǎo)航的缺點(diǎn)：

1. 視覺分割較明顯，內(nèi)容區(qū)沉浸感不是很強(qiáng)；
2. 視覺動(dòng)線左右折回，比頂部導(dǎo)航更易疲勞；
3. 內(nèi)容區(qū)的排版空間更小，需要考慮適配問題。

3）混合導(dǎo)航

混合導(dǎo)航適用于功能很多，結(jié)構(gòu)復(fù)雜的網(wǎng)站，多用于政府、公共事業(yè)部門的后臺(tái)系統(tǒng)。

• 混合導(dǎo)航的優(yōu)點(diǎn)：層級(jí)拓展性強(qiáng)，可達(dá)四、五級(jí)導(dǎo)航
• 混合導(dǎo)航的缺點(diǎn)：操作難度上升、視覺動(dòng)線更復(fù)雜

4）如何選擇合適的導(dǎo)航

在選擇合適的導(dǎo)航方面，可以參考下圖：

2. 面包屑

面包屑適用于兩級(jí)及以上層級(jí)，最多不超過5級(jí)，可以告訴用戶你在哪里，且可以迅速回到上幾級(jí)導(dǎo)航。當(dāng)鼠標(biāo)hover非當(dāng)前層級(jí)高亮該層級(jí)，點(diǎn)擊當(dāng)前頁面以上的層級(jí)導(dǎo)航時(shí)，可跳轉(zhuǎn)至該層級(jí)導(dǎo)航；一般面包屑結(jié)構(gòu)不宜超過5級(jí)。

注意事項(xiàng)：每一級(jí)導(dǎo)航點(diǎn)擊后，都必須有頁面承載。

3. 分頁

分頁器分為基礎(chǔ)分頁器、簡約版分頁器、迷你分頁器和自定義頁數(shù)分頁器。分頁器存在的意義：默認(rèn)加載第一頁，后面頁面并沒有加載，緩解后臺(tái)加載壓力。

4. 步驟條

當(dāng)頁面任務(wù)復(fù)雜或者存在先后關(guān)系時(shí)，將其分解成一系列步驟，從而簡化任務(wù)。默認(rèn)橫向步驟條。存在常規(guī)、進(jìn)行中、錯(cuò)誤等情況。主要目的：幫助用戶在操作過程中，明確自己操作到了哪一步。

使用場景：審批流程、初始化場景、新增商品等。

5. 標(biāo)簽頁

標(biāo)簽頁可以幫助用戶在一個(gè)頁面內(nèi)快速切換不同類型內(nèi)容，提升單個(gè)頁面整體的擴(kuò)展性，這里標(biāo)簽樣式劃分為了三類：基礎(chǔ)樣式、卡片樣式和膠囊樣式。一般和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)。

我們?cè)谶x擇標(biāo)簽頁默認(rèn)tab的時(shí)候，需要考慮不同用戶的使用場景，我們會(huì)發(fā)現(xiàn)B端僅僅是更改小體驗(yàn)，就會(huì)給用戶帶來極好的場景代入感（比如我們打開淘寶“我的”頁面，會(huì)直接看到默認(rèn)為“待收貨”的標(biāo)簽頁，因?yàn)樵诮Y(jié)合用戶的使用場景過程中，我們會(huì)比較關(guān)注用戶的待收貨標(biāo)簽頁）。

四、總結(jié)

這里筆者由于篇幅的原因，先暫時(shí)總結(jié)出通用組件和導(dǎo)航組件，下篇會(huì)繼續(xù)為大家總結(jié)數(shù)據(jù)組件、反饋和業(yè)務(wù)組件等。

經(jīng)過設(shè)計(jì)師的規(guī)范整理，最終需要落地實(shí)現(xiàn)才是最重要的一步。在建立企業(yè)級(jí)B端產(chǎn)品一致性設(shè)計(jì)規(guī)范的道路上 ，我們還有很長的路要走。

筆者也在不斷思考，如何可以讓一致性設(shè)計(jì)規(guī)范更符合設(shè)計(jì)原則、設(shè)計(jì)審美和業(yè)務(wù)場景，而不是設(shè)計(jì)師拍腦袋的想法，B端產(chǎn)品所謂的體驗(yàn)好,是指相同業(yè)務(wù)場景下相同產(chǎn)品功能體現(xiàn)一致的標(biāo)準(zhǔn)化的體驗(yàn)。

顯而易見，有了強(qiáng)大的設(shè)計(jì)組件庫后，團(tuán)隊(duì)將節(jié)省非常巨大的工作量，我們不再依賴單個(gè)工程人員的修改質(zhì)量，且能更大程度減少跨組依賴。后續(xù)筆者還會(huì)更新“B端組件庫”，歡迎小伙伴們關(guān)注呀~

參考資料：

1. 《CCtalk B端產(chǎn)品設(shè)計(jì)》by 美芳
2. TO B產(chǎn)品”設(shè)計(jì)一致性應(yīng)該如何保證？：https://mp.weixin.qq.com/s/MnaAbsD05acFRI9z5MdfLg
3. 感謝大師提供的封面素材

本文由@佩奇一只居 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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