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

編輯導(dǎo)語(yǔ)：本文作者在對(duì)一個(gè)電商系統(tǒng)進(jìn)行系統(tǒng)重構(gòu)的過(guò)程中，發(fā)現(xiàn)存在著一些問(wèn)題，導(dǎo)致各個(gè)后臺(tái)系統(tǒng)的用戶(hù)體驗(yàn)不統(tǒng)一，與業(yè)內(nèi)優(yōu)秀的電商系統(tǒng)差距較大。于是決定使用Ant Design Vue這套框架對(duì)現(xiàn)有系統(tǒng)再進(jìn)行一次優(yōu)化，本文講述了這之中表單的設(shè)計(jì)規(guī)范，一起來(lái)看一下吧。

2016年，我進(jìn)入一家中型跨境電商公司，開(kāi)始負(fù)責(zé)整體電商系統(tǒng)的系統(tǒng)重構(gòu)產(chǎn)品工作，將原本一套開(kāi)源的電商系統(tǒng)架構(gòu)重構(gòu)解耦成顆粒度更小、松耦合的分布式微服務(wù)系統(tǒng)架構(gòu)，因?yàn)樵镜南到y(tǒng)架構(gòu)在性能、效率、體驗(yàn)上已經(jīng)遠(yuǎn)遠(yuǎn)不能滿(mǎn)足公司的成長(zhǎng)速度。

整體系統(tǒng)架構(gòu)包含類(lèi)目系統(tǒng)、商品系統(tǒng)、庫(kù)存系統(tǒng)、促銷(xiāo)系統(tǒng)、訂單系統(tǒng)、售后系統(tǒng)、會(huì)員系統(tǒng)、財(cái)務(wù)系統(tǒng)、CMS系統(tǒng)、CPS系統(tǒng)等等。

2019年，全部重構(gòu)完成。整個(gè)過(guò)程，就像給一個(gè)高速行駛的汽車(chē)換輪胎。

重構(gòu)過(guò)程中產(chǎn)生了一些遺留問(wèn)題：

1. 更關(guān)注業(yè)務(wù)、架構(gòu)、流程、功能、邏輯，對(duì)視覺(jué)、交互、體驗(yàn)關(guān)注較少。重構(gòu)中前端開(kāi)發(fā)資源投入較少，所有后臺(tái)系統(tǒng)均由后端開(kāi)發(fā)直接渲染頁(yè)面。
2. 后臺(tái)系統(tǒng)太多，不同產(chǎn)品經(jīng)理工作習(xí)慣、交互能力、審美水平各不一樣，各自負(fù)責(zé)的后臺(tái)系統(tǒng)用戶(hù)體驗(yàn)不統(tǒng)一。
3. 所有后臺(tái)系統(tǒng)雖然都是用Bootstrap這套前端框架，但是Bootsrap組件用法非常多，導(dǎo)致不同產(chǎn)品經(jīng)理在實(shí)踐時(shí)存在差別。
4. 所有模塊的重構(gòu)產(chǎn)品方案，我雖然都有評(píng)審，但是評(píng)審時(shí)更關(guān)注流程、功能、邏輯，對(duì)視覺(jué)、交互沒(méi)有制定統(tǒng)一的規(guī)范。

以上四點(diǎn)，導(dǎo)致各個(gè)后臺(tái)系統(tǒng)用戶(hù)體驗(yàn)不統(tǒng)一，與業(yè)內(nèi)優(yōu)秀的電商系統(tǒng)（如shopify、有贊）差距較大。

基于此，在調(diào)研了大量的前端框架情況下，我們決定使用Ant Design Vue這套框架對(duì)現(xiàn)有系統(tǒng)再進(jìn)行一次優(yōu)化，于是有了這篇設(shè)計(jì)規(guī)范。

前文“后臺(tái)產(chǎn)品設(shè)計(jì)規(guī)范-Ant Design實(shí)踐到落地”中已經(jīng)說(shuō)明了“布局”、“適配”、“間距”、“常用組件”、“文案”等基礎(chǔ)規(guī)范，詳情可查看前文。此文專(zhuān)門(mén)講述表單的設(shè)計(jì)規(guī)范。

一、表單分區(qū)

表單分區(qū)是基于布局、適配、間距規(guī)范之上，經(jīng)過(guò)大量分析原有后臺(tái)表單頁(yè)面，最后總結(jié)的一套表單分區(qū)規(guī)則，我把它總結(jié)為表單最核心的設(shè)計(jì)規(guī)范。

詳情可查看下圖：

圖例講解：

表單布局：畫(huà)布1440px，導(dǎo)航區(qū)200px，表單區(qū)兩側(cè)間距分別24px，表單區(qū)1192px。

表單分為兩欄表單和通欄表單。為了保持結(jié)構(gòu)化的格式，防止兩欄表單與通欄表單信息交錯(cuò)而出現(xiàn)的設(shè)計(jì)原則與視覺(jué)不統(tǒng)一問(wèn)題，此處約定“一個(gè)信息分組只能在兩欄表單和通欄表單中二選一，不能出現(xiàn)一個(gè)信息分組出現(xiàn)兩種表單布局”。

兩欄表單規(guī)范&樣例：

通欄表單規(guī)范&樣例：

二、表單設(shè)計(jì)原則

1. 信息分組

表單頁(yè)中需要填寫(xiě)內(nèi)容眾多，且不同內(nèi)容之中存在一定可分類(lèi)歸納性，可使用信息分組將表單內(nèi)容按分類(lèi)整合。

一個(gè)信息分組只能在兩欄表單和通欄表單中二選一，不能出現(xiàn)一個(gè)信息分組出現(xiàn)兩種表單布局。

2. 輸入提示

使用『良好的默認(rèn)值』、『結(jié)構(gòu)化的格式』、『輸入提示』、『輸入提醒』等方式，避免讓用戶(hù)在空白中完成輸入。

當(dāng)說(shuō)明文案較短時(shí)，可直接在輸入框內(nèi)展示，如下圖所示：

說(shuō)明文案較長(zhǎng)時(shí)，可使用Tooltip提示。提示符號(hào)置于文字后，如下圖所示：

通過(guò)不同的『校驗(yàn)』規(guī)則和形式進(jìn)行反饋，避免用戶(hù)在點(diǎn)擊提交后才剛剛開(kāi)始『校驗(yàn)』，讓用戶(hù)提前糾正錯(cuò)誤。

頁(yè)面關(guān)閉時(shí)，表單數(shù)據(jù)未保存，需要及時(shí)提示，避免誤操作導(dǎo)致表單填寫(xiě)內(nèi)容全部丟失，如下圖所示：

3. 對(duì)齊

標(biāo)題按分區(qū)輔助線右對(duì)齊，輸入框按分區(qū)輔助線左對(duì)齊。

4. 效果展示

關(guān)聯(lián)前端樣式的配置項(xiàng)需要直接在后臺(tái)中直接展示配置效果。

“效果展示”的作用在于減少系統(tǒng)操作的新人培訓(xùn)成本，同時(shí)為了防止“效果展示”過(guò)于突出影響正常表單操作，可將效果展示按分組歸納展示，置于模塊標(biāo)題右側(cè)。如下圖所示：

效果展示樣例：

5. 折疊

上文信息分組中有提到，當(dāng)表單內(nèi)容非常多時(shí)，可使用信息分組。當(dāng)同一個(gè)信息分組內(nèi)內(nèi)容非常多時(shí)，可根據(jù)使用頻率將低頻使用的內(nèi)容折疊起來(lái)，提高高頻內(nèi)容的操作效率。

折疊圖示：

展開(kāi)圖示：

6. 禁用主按鈕

當(dāng)輸入框非常少時(shí)（一般少于 3 個(gè)），如果用戶(hù)沒(méi)有在必填項(xiàng)中輸入內(nèi)容，可禁用『提交』等主按鈕；當(dāng)輸入框非常多時(shí)（超過(guò) 5 項(xiàng)以上），不建議禁用主按鈕。

當(dāng)輸入框非常少時(shí)，用戶(hù)一輸入就會(huì)有反饋，因而主按鈕的禁用規(guī)則非常清晰，容易被用戶(hù)理解。

1）未達(dá)字符標(biāo)準(zhǔn)時(shí)，主按鈕禁用狀態(tài)：

2）達(dá)到字符標(biāo)準(zhǔn)時(shí)，主按鈕可用狀態(tài)：

當(dāng)輸入框非常多時(shí)（尤其是輸入項(xiàng)中交叉了必填項(xiàng)和非必填項(xiàng)），不要使用此交互。

三、Ant Design Vue表單常用組件使用說(shuō)明

1. 輸入框

根據(jù)分區(qū)尺寸規(guī)范，我們定義了5種輸入框?qū)挾?，分別如下：

兩欄表單輸入框固定使用“常用標(biāo)題”，尺寸固定為192px，如下圖所示：

通欄表單可根據(jù)情況將5種標(biāo)題結(jié)合起來(lái)使用，如下圖所示：

關(guān)于超短標(biāo)題輸入框的使用場(chǎng)景，著重說(shuō)一句。超短標(biāo)題用于通欄表單中，多種組件混合使用，表單區(qū)長(zhǎng)度不夠時(shí)，可將金額、數(shù)字使用超短標(biāo)題。慎用超短標(biāo)題，大部分場(chǎng)景下常用標(biāo)題可覆蓋超短標(biāo)題的使用場(chǎng)景。如下圖所示：

2. Radio 單選框&Select選擇器

用于在多個(gè)備選項(xiàng)中選中單個(gè)狀態(tài)。

和 Select 的區(qū)別是，Radio 所有選項(xiàng)默認(rèn)可見(jiàn)，方便用戶(hù)在比較中選擇。當(dāng)選項(xiàng)≥5時(shí)，不能使用Radio單選框，需使用Select選擇器。

3. 圖片上傳

Ant Design組件庫(kù)中圖片上傳的樣式非常多，為了保持統(tǒng)一性，整體調(diào)研完所有圖片上傳組件，我們統(tǒng)一使用如下圖片上傳樣式。

1）單圖：

2）多圖：

四、實(shí)踐案例

1. 新建商品

1）選擇基礎(chǔ)分類(lèi)：

2）填寫(xiě)商品信息：

3）完成：

2. 新建滿(mǎn)減活動(dòng)

1）填寫(xiě)活動(dòng)信息：

2）設(shè)置活動(dòng)范圍：

3）完成：

以上是表單的產(chǎn)品設(shè)計(jì)規(guī)范，案例中只列舉了最復(fù)雜的高級(jí)表單和分布表單，對(duì)于彈窗和簡(jiǎn)單表單沒(méi)有做更多的闡述，大家可以運(yùn)用自己的理解，結(jié)合公司的實(shí)際情況，制定自己團(tuán)隊(duì)的設(shè)計(jì)規(guī)范。

文中的rp格式源文件，可關(guān)注公眾號(hào)后回復(fù)“表單”免費(fèi)下載。

下一篇的主題是詳情頁(yè)的設(shè)計(jì)規(guī)范，詳情頁(yè)和表單有極大的差異，表單的目的是高效的數(shù)據(jù)錄入，詳情頁(yè)的目的是高效的數(shù)據(jù)展示和數(shù)據(jù)操作，所以詳情頁(yè)的規(guī)范與表單又有較大的差異。后續(xù)專(zhuān)門(mén)發(fā)文說(shuō)明。

參考資料：

[1]Ant Design設(shè)計(jì)規(guī)范

[2]Ant Design 設(shè)計(jì)模式

[3]Ant Design of Vue組件

[4]Ant Design 設(shè)計(jì)基礎(chǔ)簡(jiǎn)版

[5]Ant Design of Vue定制主題

作者：城雨塵，公眾號(hào)：城雨塵（ID：bymono）

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

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