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

本文從Ant Design布局使用說明、Ant DesignVue常用組件使用說明、文案規(guī)范、實踐案例等方面進行了分析，分享了后臺產(chǎn)品設(shè)計規(guī)范的注意事項。

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

整體系統(tǒng)架構(gòu)包含類目系統(tǒng)、商品系統(tǒng)、庫存系統(tǒng)、促銷系統(tǒng)、訂單系統(tǒng)、售后系統(tǒng)、會員系統(tǒng)、財務(wù)系統(tǒng)、CMS系統(tǒng)、CPS系統(tǒng)等等。

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

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

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

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

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

一、Ant Design布局使用說明

1. 尺寸

原型稿的頁面寬度統(tǒng)一使用1440px，側(cè)邊導(dǎo)航寬度的范圍計算公式：200+8n，我們統(tǒng)一使用200px。

2. 適配

統(tǒng)一采用自適應(yīng)界面-撐滿式，右邊內(nèi)容區(qū)寬度則隨瀏覽器寬度而改變。當(dāng)內(nèi)容區(qū)寬度不足 1024px 時，瀏覽器底部出現(xiàn)滾動條。

3. 間距

根據(jù)頁面信息結(jié)構(gòu)和內(nèi)容層級，利用大、中、小三種間距來實現(xiàn)信息之間的親密度區(qū)分；在 Ant Design 中，主要有以下三種間距：

二、Ant DesignVue常用組件使用說明

Ant Design Vue總共有57個組件，每個組件至少有5種用法。組件的用法在自己的系統(tǒng)中如何使用，需要定義清楚；如果不定義清楚，也會造成體驗的差異。這里只挑選高頻使用的組件說明，沒有說明的組件可詳細閱讀Ant Design使用說明。

1. Menu 導(dǎo)航菜單

（1）使用內(nèi)嵌菜單。

（2）左側(cè)導(dǎo)航欄的收放交互按手風(fēng)琴樣式。

2. Icon 圖標(biāo)

（1）統(tǒng)一使用線框風(fēng)格圖標(biāo)。

（2）統(tǒng)一使用SVG格式，確保在Retina屏幕上顯示清晰。

3. Button 按鈕

（1）按鈕有四種類型：主按鈕、次按鈕、虛線按鈕、危險按鈕和鏈接按鈕，主按鈕在同一個操作區(qū)域最多出現(xiàn)一次。虛線按鈕和危險按鈕無需使用。

（2）使用1個主操作 + n 個次操作，3個以上操作時把更多操作放到Dropdown.Button 中組合使用。

（3）添加 loading 屬性即可讓按鈕處于加載狀態(tài)。

（4）在一些需要用戶慎重決策的場景中，系統(tǒng)應(yīng)該保持中立，不能替用戶或者誘導(dǎo)用戶做出判斷。『通過』和『駁回』都使用次按鈕，系統(tǒng)保持中立。

4. Dropdown 下拉菜單

（1）下拉菜單彈出位置：靠近屏幕左側(cè)的Dropdown按鈕統(tǒng)一使用bottomLeft，靠近屏幕右側(cè)的Dropdown按鈕統(tǒng)一使用bottomRight，靠近屏幕底部的可使用topLeft或topRight。

（2）同一組按鈕需要使用相同的彈出位置。

（3）統(tǒng)一使用移入觸發(fā)菜單交互。

5. Input 輸入框

（1）輸入框統(tǒng)一采用默認高度。

（2）當(dāng)輸入內(nèi)容有可能超出一行時，需采用“適應(yīng)文本高度的文本域”。

（3）輸入手機號碼、身份證號碼、銀行卡號、金額時可結(jié)合Tooltip組件實現(xiàn)格式化展示。

6. Radio單選框

（1）用于在多個備選項中選中單個狀態(tài)。

（2）和 Select 的區(qū)別是，Radio 所有選項默認可見，方便用戶在比較中選擇。當(dāng)選項≥5時，不能使用Radio單選框，需使用Select選擇器。

7. DatePicker 日期選擇框

（1）日期選擇組件包括以下四種形式：DatePicker、MonthPicker、RangePicker、WeekPicker。DatePicker、MonthPicker、WeekPicker均使用默認樣式即可。

（2）RangePicker可以預(yù)設(shè)常用的日期范圍以提高用戶體驗，統(tǒng)一使用今天、昨天、本周、上周、本月、上月。

8. Pagination 分頁

（1）詳情可查看下方的樣式，包含數(shù)據(jù)總數(shù)、翻頁、每頁可以顯示多少條、快速跳轉(zhuǎn)至某頁。

（2）每頁可以顯示多少條統(tǒng)一使用10、20、50、100。

9. Message 全局提示

（1）自動關(guān)閉的延時采用默認的3s。

（2）消息距離頂部的位置采用默認的24px。

10. Switch 開關(guān)

switch和 checkbox的區(qū)別是，切換 switch 會直接觸發(fā)狀態(tài)改變，而 checkbox 一般用于狀態(tài)標(biāo)記，需要和提交操作配合，所以在表單中慎用switch開關(guān)。

三、文案規(guī)范

1. 當(dāng)數(shù)據(jù)為空時，可使用『- -』來表示暫無數(shù)據(jù)。
2. 時間格式：年月日之間用半角短橫線『-』，時分秒之間使用半角冒號『:』 表示范圍之間使用半角波浪線『~』，并在其前后加上間隔以示區(qū)分。
3. 金額格式：1,000,000.00 界面顯示2位小數(shù)。
4. 數(shù)量格式：1,000,000.00 界面顯示2位小數(shù)。
5. 百分比格式：90.0%。
6. 使用『你』代替『您』，以拉近與用戶之間的距離。
7. 使用『新建』而不用『新增』。
8. 使用『編輯』代替『修改』。
9. 使用『其他』代替『其它』。
10. 使用『此』代替『該』。
11. 使用『抱歉』而不用『對不起』，如果是我們系統(tǒng)造成的結(jié)果，可以使用『抱歉』，如果是用戶自己造成的結(jié)果，則不使用這類詞。
12. 使用『登錄』而不用『登陸』，登錄是登記記錄用戶輸入信息的意思，切勿用成『著陸』的陸。
13. 專有名詞需使用原有格式，如：iOS、iPhone、iPad。
14. 全英文的標(biāo)題、標(biāo)簽、菜單項等需遵循英文句式中首字母大寫的規(guī)范。

四、實踐案例

1. 表格

（1）樣例

（2）善用縱向空間

盡量不要出現(xiàn)橫向滾動條，便捷的讓用戶一屏可以看到所有的信息，如下圖所示。

（3）查詢

查詢字段的順序需要和列表中字段順序保持一致。統(tǒng)一使用左對齊，這樣可以很好的兼容英語版以及查詢標(biāo)題非常長的場景。

（4）按鈕組

使用1個主操作 + n 個次操作，3個以上操作時把更多操作放到Dropdown下拉菜單中組合使用。3個并非絕對數(shù)值，可根據(jù)實際場景酌情考慮。

（5）單行操作

3個以上操作按鈕時把更多操作放到Dropdown下拉菜單中組合使用。

（6）某一項內(nèi)容過長

表格字段顯示不完不折行，可省略顯示不下的，用戶懸?。c擊該項時，用『Tooltip／Popover』來顯示完整內(nèi)容。

2. 表單

表單的規(guī)范更復(fù)雜一點，包含基礎(chǔ)表單、高級表單、分步表單等，對組件的組合運用也要求更高，后續(xù)專門發(fā)文說明。

參考資料

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

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

[3]Ant Design of Vue組件

[4]Ant Design 設(shè)計基礎(chǔ)簡版

[5]Ant Design of Vue定制主題

作者：Alvens，公眾號：產(chǎn)品隨筆（ID：bymono）

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

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