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

編輯導(dǎo)語(yǔ)：組件庫(kù)的搭建在一定程度上可以提高產(chǎn)品開(kāi)發(fā)效率，減少業(yè)務(wù)流程中的疑惑產(chǎn)生。那么，應(yīng)該如何設(shè)計(jì)組件、快速定義B端的組件規(guī)范？本篇文章里，作者結(jié)合自身撰寫(xiě)、升級(jí)組件庫(kù)的經(jīng)驗(yàn)，從階段出發(fā)，對(duì)如何定義B端組件規(guī)范做了總結(jié)，一起來(lái)看一下。

各大設(shè)計(jì)團(tuán)隊(duì)為了釋放設(shè)計(jì)人力，會(huì)根據(jù)業(yè)務(wù)情況封裝組件庫(kù)，后續(xù)開(kāi)發(fā)成代碼，方便前端同學(xué)進(jìn)行組件調(diào)取，也同時(shí)節(jié)省了開(kāi)發(fā)成本。

寫(xiě)這篇文章是根據(jù)自己撰寫(xiě)并升級(jí)了原有組件庫(kù)的經(jīng)驗(yàn)，讓大家大概了解設(shè)計(jì)組件背后需要做哪些工作，日后制定組件規(guī)范可以直接套用。

一、寫(xiě)組件的目的

在工作中做一件事情首先要思考做了之后要達(dá)到什么樣的效果。寫(xiě)組件的目的就是要讓每一個(gè)場(chǎng)景下的操作都具有合理性，讓產(chǎn)品變得好用、易用、可用。讓各個(gè)業(yè)務(wù)在遇到類(lèi)似的業(yè)務(wù)需求時(shí)，不要產(chǎn)生：

1. 應(yīng)該使用哪個(gè)組件？
2. 組件操作應(yīng)該包含哪些狀態(tài)反饋給用戶(hù)？
3. 不同業(yè)務(wù)，同一品牌下如何保證交互一致性？
4. 組件不能滿(mǎn)足應(yīng)該怎么辦？
5. ……

一系列模棱兩可的疑問(wèn)。

二、寫(xiě)組件的前期準(zhǔn)備：組件結(jié)構(gòu)層梳理

從層級(jí)上排列：產(chǎn)品——應(yīng)用——頁(yè)面——模塊——組件。組件在頁(yè)面中屬于原子級(jí)的元素。

首先對(duì)團(tuán)隊(duì)業(yè)務(wù)組件進(jìn)行盤(pán)點(diǎn)、同時(shí)對(duì)比行業(yè)內(nèi)競(jìng)品組件，比如Ant Design、飛冰 Iceworks、Element、SUI、iView、Admui、Zent。

第一步：根據(jù)組件的作用進(jìn)行分類(lèi)，梳理組件清單，比如：組件分為通用類(lèi)、導(dǎo)航類(lèi)、數(shù)據(jù)輸入類(lèi)、數(shù)據(jù)展示類(lèi)、反饋類(lèi)等。

第二步：梳理完成后劃分組件設(shè)計(jì)優(yōu)先級(jí)，參考維度：

• 『我們』有+行業(yè)內(nèi)有（p0）、『我們』有+行業(yè)沒(méi)有（p1）、『我們』沒(méi)有+行業(yè)有（p2）。
• 『我們』有+行業(yè)內(nèi)有（p0）：代表了這類(lèi)組件是解決行業(yè)內(nèi)產(chǎn)品問(wèn)題高頻應(yīng)用的剛需組件，比如搜索、按鈕等。
• 『我們』有+行業(yè)沒(méi)有（p1）：代表這類(lèi)組件多為業(yè)務(wù)類(lèi)型組件，是業(yè)務(wù)的特殊性產(chǎn)生了這類(lèi)組件，比如：卡片、折疊面板等。
• 『我們』沒(méi)有+行業(yè)有（p2）：代表了這類(lèi)組件可能是行業(yè)內(nèi)潛在有某種業(yè)務(wù)形態(tài)，列在『我們』范圍內(nèi)以免以后遇到類(lèi)似的，無(wú)規(guī)范可查。

第三步：對(duì)組件進(jìn)行結(jié)構(gòu)層、行為層和表現(xiàn)層元素進(jìn)行拆解，參考標(biāo)準(zhǔn)為是否常變動(dòng)。

三、寫(xiě)組件前期準(zhǔn)備：行為場(chǎng)景梳理

其實(shí)結(jié)構(gòu)層分為組件種類(lèi)（導(dǎo)航類(lèi)、按鈕類(lèi)、提示類(lèi)……）和組件類(lèi)別（下拉菜單、頂部tab、走馬燈……）分析到現(xiàn)在應(yīng)該得到的是原子級(jí)的組件類(lèi)別，接下來(lái)就需要根據(jù)場(chǎng)景繼續(xù)細(xì)分組件的形態(tài)，從而得到組件形態(tài)的分類(lèi)定義。

組件最難的是如何定義和區(qū)分組件行為層的類(lèi)別，不斷在定義標(biāo)準(zhǔn)，目的是保證撰寫(xiě)組件時(shí)，狀態(tài)不會(huì)模棱兩可，難以取舍。通過(guò)寫(xiě)組件經(jīng)驗(yàn)分享一下我們從應(yīng)用、差異化、組件構(gòu)成是通過(guò)以下角度確立的標(biāo)準(zhǔn)：

• 組件應(yīng)用標(biāo)準(zhǔn)：通過(guò)組件使用規(guī)律給組件下定義。
• 組件差異化：通過(guò)限定場(chǎng)景突出功能特點(diǎn)，讓用戶(hù)感知到信息操作的差異，賦予業(yè)務(wù)場(chǎng)景特定交互特色。
• 組件分區(qū)：通過(guò)前面梳理的，組件有哪些是常變動(dòng)、哪些是不常變動(dòng)的，去定義，基礎(chǔ)必備元素構(gòu)成寫(xiě)死（不可調(diào)整），基礎(chǔ)元素以外的內(nèi)容，可以寫(xiě)成活代碼（可調(diào)整）。

四、寫(xiě)組件設(shè)計(jì)階段：體驗(yàn)分析

規(guī)范的成立是根據(jù)多角度、多業(yè)務(wù)驗(yàn)證才確定，所以需要時(shí)刻思考組件設(shè)計(jì)的邊界。在寫(xiě)組件時(shí)可以思考以下6個(gè)問(wèn)題：

五、寫(xiě)組件設(shè)計(jì)階段：撰寫(xiě)組件

通常直接瀏覽的角色是：UE設(shè)計(jì)師、UI設(shè)計(jì)師、前端程序員、間接瀏覽角色：產(chǎn)品經(jīng)理、售前、后端程序員等。根據(jù)角色確定撰寫(xiě)內(nèi)容包含哪些結(jié)構(gòu)和信息。

從輸出文檔角度舉例，可以從組件的結(jié)構(gòu)層、行為層和表現(xiàn)層依次撰寫(xiě)。

從組件業(yè)務(wù)角度舉例如：下拉菜單。

菜單內(nèi)容大多是預(yù)置、后臺(tái)調(diào)取、后續(xù)手動(dòng)添加，所以根據(jù)業(yè)務(wù)屬性會(huì)產(chǎn)生多種形態(tài)。確定組件類(lèi)別后，同時(shí)應(yīng)要對(duì)每一個(gè)組件的類(lèi)別確定必有的基礎(chǔ)組件狀態(tài)，比如：默認(rèn)、懸停、點(diǎn)擊、禁用四種是每個(gè)組件都必有的狀態(tài)，其他會(huì)根據(jù)組件屬性增加。

基礎(chǔ)菜單：滿(mǎn)足菜單基本功能，單選、多選。

分組菜單：指菜單內(nèi)容需要展示分類(lèi)標(biāo)題和內(nèi)容時(shí)。

多層級(jí)菜單：指根據(jù)目標(biāo)層級(jí)選擇一個(gè)或多個(gè)的選項(xiàng)。

以上內(nèi)容僅此舉例，希望能給大家在寫(xiě)組件時(shí)帶來(lái)更多的思路。

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

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