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

本篇介紹通過基礎(chǔ)組件庫和項(xiàng)目的沉淀過程，構(gòu)建成全平臺通用的模版頁面，通過這些模版頁面，再結(jié)合業(yè)務(wù)可搭建成產(chǎn)品所要的設(shè)計(jì)頁面。

《如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范》共分為5個系列，分別為《一：介紹篇》、《二：設(shè)計(jì)原則》、《三：全局樣式》、《四：基礎(chǔ)組件》、《五：通用模版》，

1. 模版-布局
2. 模板-圖表
3. 模版-列表頁
4. 模板-表單頁
5. 模版-詳情頁
6. 模版-空狀態(tài)
7. 模版-其他

01 模版-布局

頁面布局的設(shè)計(jì)，需要考慮用戶在瀏覽web頁面時(shí)視覺要求，即從上至下、從左到右。

整體布局

區(qū)域：頁面展示如圖所示，按照功能模塊區(qū)分為：①頂部導(dǎo)航、②左側(cè)菜單、③頁簽、④頭部區(qū)域、⑤內(nèi)容區(qū)域。

Spec：頁面各功能模塊的之間的距離。

1. 頂部菜單

它的定位是全局功能，也或者是系統(tǒng)功能的操作。

1. 漢堡圖標(biāo)：用于打開/隱藏左側(cè)導(dǎo)航。
2. 公司LOGO：九曳logo，始終存在。
3. 平臺名稱：和公司logo組合成點(diǎn)擊可直接回到工作臺首頁。
4. 頂部一級入口：用于更改左側(cè)菜單的一級導(dǎo)航入口。不一定所有平臺都有，如客戶平臺上方就空著。
5. 全局功能：如幫助、消息等。
6. 個人中心：提供關(guān)于個人設(shè)置等消息等通知。

頂部與左側(cè)菜單區(qū)別：

頂部菜單：

• 優(yōu)點(diǎn)：①通常使用比較少的文字，簡單易記；②位于頁面頂部，不占用橫向空間；③視覺上更突出，更容易識別；④菜單視覺權(quán)重的區(qū)分更明顯，左強(qiáng)右弱；
• 缺點(diǎn)：①擴(kuò)展性有限，不能承載大量和多層級菜單；②占用屏幕高度；切換菜單選項(xiàng)時(shí)，移動鼠標(biāo)的距離更長，操作效率更低；

左側(cè)菜單：

• 優(yōu)點(diǎn)：①擴(kuò)展性強(qiáng)，承載菜單項(xiàng)數(shù)量和層級多；②不占用屏幕高度且可以收起，為內(nèi)容區(qū)域有更大多空間；③菜單間切換時(shí)鼠標(biāo)移動距離更短，效率更高；④能夠適應(yīng)屏幕寬度較小的設(shè)備；⑤翻譯其他語言不會易出現(xiàn)文字錯亂；
• 缺點(diǎn)：①菜單數(shù)量多層級復(fù)雜時(shí)，不易記；②各菜單選項(xiàng)之間的視覺權(quán)重差別不明顯。

2. 左側(cè)菜單

不存在單獨(dú)一級菜單：即使只有一個菜單，也要掛在一級菜單下面。

菜單深度控制在兩層：增加菜單而減少深度的設(shè)計(jì)原則，為防止內(nèi)容隱藏過深，如果二級菜單下需要顯示其他內(nèi)容，請使用標(biāo)簽頁或者另增加菜單。

按照使用頻率排序：菜單常規(guī)按照使用頻率和重要性排列，常用的排前面，不常用的往后排；重要的放前面，反之放后面；

菜單文字需簡潔：文字寬度和菜單應(yīng)較為接近，字符不要超過8個字。

控制一級菜單數(shù)目：一級菜單數(shù)目不要太多，盡可能增加二級菜單。

3. 頁簽

將用戶常用的菜單功能展現(xiàn)出來，方便用戶快速切換，并告訴用戶當(dāng)前所在的頁面。

工作臺始終存在：「工作臺」頁簽始終存在，不可關(guān)閉，較于其他頁簽UI有所區(qū)別。

關(guān)閉所有頁面：如果頁簽寬度超出1100px，那么最后則展示下拉箭頭，并添加「關(guān)閉所有頁面」功能。

02 模板-圖表

圖表一般用于平臺的首頁，用來展示圖表數(shù)據(jù)統(tǒng)計(jì)等。

1. 圖表布局

圖表一般用于平臺的首頁，如客戶平臺、服務(wù)平臺等首頁，一般展示用來展示圖表數(shù)據(jù)等。

2. 柱狀圖

適用于多個變量數(shù)據(jù)維度的比較，由高到低進(jìn)行；特殊情況，如可變量是時(shí)間，則按照時(shí)間順序來進(jìn)行展示。

優(yōu)點(diǎn)：一目了然地進(jìn)行數(shù)據(jù)維度的增減比較；

缺點(diǎn)：數(shù)目太多時(shí)（超過12），分辨起來比較困難，這時(shí)則適合用折線圖來進(jìn)行顯示。

3. 折線圖

適用于對趨勢的展現(xiàn)，不建議展示每個節(jié)點(diǎn)，對比的主體數(shù)量建議不要超過12個，過多會讓用戶辨識度降低。

優(yōu)點(diǎn)：適合對于趨勢的研究；對主體的對比效果較明顯；

缺點(diǎn)：對比主體不能太多。

4. 餅圖

適用于研究單個個體與整體之間的關(guān)系，找到影響整體的主要因素；一般主體數(shù)量不要超過6個，如果數(shù)量超過，可以使用一個“其他”來概括；占比從大到小，從12點(diǎn)鐘按照順時(shí)鐘方向進(jìn)行排列。

優(yōu)點(diǎn)：很快就能看出，影響整體的頭部因素有哪些，切占比比例是多少；

缺點(diǎn)：各因素對比效果差，特別是兩個因素的占比相近的時(shí)候；影響因子較小的很容易被忽略。

5. 舉例說明

客戶平臺工作臺

服務(wù)平臺工作臺

服務(wù)平臺客服平臺

03 模版-列表頁

查看和處理大量的條目，可對列表的條目進(jìn)行新增、刪除查看詳情等。

1. 基礎(chǔ)布局

單列布局

從上往下堆疊，數(shù)據(jù)過濾在最上方，數(shù)據(jù)過濾后，再由總體到具體的瀏覽邏輯理解和分析。

浮邊布局

將數(shù)據(jù)過濾模塊放置在右側(cè)隱藏，點(diǎn)擊右側(cè)滑出。當(dāng)過濾條件過多，且操作頻次極低，又不想占用水平空間時(shí)，可采用此方法。

2. 一般規(guī)則

邊距：所有的邊距都為8px；

按鈕數(shù)量：操作按鈕最多6個，超過的最后使用更多下拉。

隱藏過濾器：即使沒有收縮過濾器，下拉也會隱藏過濾器；

字段為空：如果列表內(nèi)容為空，使用“-”替換原字段信息，不可以直接空著。

回到頂部箭頭：篩選隱藏后，下拉超過兩屏幕，顯示回到頂部箭頭；

操作按鈕：導(dǎo)入導(dǎo)出按鈕較為重要，為突出其重要性，與其他按鈕采用分割線分開，按鈕內(nèi)部增加圖標(biāo)。

禁使用彈窗篩選：一般情況下篩選條件需要實(shí)時(shí)可見，不可以出現(xiàn)在兩個頁面上。（ps.彈窗算另一個頁面，錯誤示范：客服平臺、CRM彈窗設(shè)計(jì)）

3. 模板列表

常規(guī)狀態(tài)：正常表格，提供每條條目的概覽信息，可查看詳情。作為簡易版的列表頁使用。

字段過多：橫屏滾動，需要將標(biāo)題名稱字段和操作列浮出。

多個字段合并：通過將字段進(jìn)行合并，一般將合并的字段放在前列。

卡片式：不需要過濾條件，無翻頁，自動加載；應(yīng)用場景：用戶沒有特定的順序?yàn)g覽條目，將每個條目以較有吸引力的方式呈現(xiàn)，如服務(wù)平臺的CRM企業(yè)客戶、通知消息等。

右側(cè)浮邊：將數(shù)據(jù)過濾模塊放置在右側(cè)欄，當(dāng)過濾條件過多，橫向空間充裕時(shí)可使用。

4. 頭部篩選區(qū)域

不要使用彈窗查詢：因?yàn)檫@樣就不能夠看到篩選的條件，如@客服平臺需要修改

保留當(dāng)前查詢條件：每次查詢保留當(dāng)前查詢條件；

重置按鈕：當(dāng)查詢條件超過一行，則顯示下拉，當(dāng)查詢條件超過6個，則提供「重置」按鈕；

未查詢到任何記錄：當(dāng)未查詢到任何記錄時(shí)，需要給予未查找到相關(guān)記錄的提示信息；

提供模糊查詢：除設(shè)計(jì)中明確提示不需要外，需提供模糊查詢及組合查詢功能。

5. 快速過濾選擇

允許用戶處理大型數(shù)據(jù)時(shí)減少可見項(xiàng)，幫助用戶快速找到他們想要的東西，面對大量選項(xiàng)時(shí)作出決定。非特殊情況，只可以放同一個字段類型的篩選。

6. 修改和刪除

修改

• 表格的存在復(fù)選框，勾選多條記錄點(diǎn)擊修改，提示「每次只能選擇一條記錄進(jìn)行修改」。
• 修改后加載的內(nèi)容應(yīng)當(dāng)為實(shí)際內(nèi)容，而不在是默認(rèn)值；
• 修改完成后回到原紀(jì)錄所在位置，且刷新顯示修改后的值；
• 需要對主要字段內(nèi)容進(jìn)行重復(fù)值、空置（空格）、中英文特殊字符判斷校驗(yàn)。

刪除

• 必須要求確認(rèn)刪除的提示信息；
• 刪除成功后刷新，不顯示刪除的記錄；
• 刪除成功后，返回到原紀(jì)錄的所在頁面，如果原記錄所在頁不存在時(shí)，則返回上一頁；
• 當(dāng)刪除的記錄關(guān)聯(lián)其他記錄時(shí)，給予信息提示，請求界面給予綁定相關(guān)、明細(xì)的的提示信息，按鈕置灰并不可刪除。

04 模板-表單頁

九曳設(shè)計(jì)規(guī)范表單有5種類別，分別為：①最基礎(chǔ)表單、②基礎(chǔ)表單、③步驟表單、④卡片表單、⑤標(biāo)簽頁表單。

1. 表單布局分類

F模式：是瀏覽不受容器限制（例如表單頁設(shè)計(jì)）的一種設(shè)計(jì)方法。用戶將逐行瀏覽內(nèi)容，最后達(dá)到?jīng)Q定性按鈕?；A(chǔ)表單和步驟表單采用此設(shè)計(jì)。

Z模式：用戶瀏覽信息內(nèi)容會受限容器（例如彈窗）的設(shè)計(jì)，視覺引導(dǎo)是從左上角開始往右下側(cè)結(jié)尾?？ㄆ韱魏蜆?biāo)簽頁表單采用此設(shè)計(jì)。

2. 最基礎(chǔ)表單

快速完成一個簡單的任務(wù)，輸入的信息量很少，建議6個字段以下使用。如不做說明，所有的新增表單打開一個新的頁簽頁面。

3. 基礎(chǔ)表單

快速完成一個簡單的任務(wù)，輸入的信息量很少，建議6個字段以上使用。

一列字段

兩列字段

4. 步驟表單

需要流程組織填寫的，利用步驟條告知用戶流程和進(jìn)度，常常在最后提交階段需要讓用戶再次確認(rèn)消息，并在結(jié)束后給予用戶明確的結(jié)果反饋。適用于具有明確的線性邏輯任務(wù)。

5. 卡片表單

一次性填寫的內(nèi)容非常多，不同的內(nèi)容可進(jìn)行歸納。或者對不同的類別采用不同的選項(xiàng)卡。建議20個字段以上使用?？紤]編輯修改時(shí)，需要再次劃入到底部，所以采用分卡片表單時(shí)，按鈕放在右下腳。

6. 標(biāo)簽頁表單

方便查看切換各個類別內(nèi)容修改，采用標(biāo)簽頁設(shè)計(jì)。如CRM的客戶管理設(shè)計(jì)。

7. 輔助功能

新增

• 新增的記錄必須排在列表的首行，并做選中提醒；
• 提交失敗后必須保存用戶已經(jīng)輸入的內(nèi)容，以便再次提交。
• 新增內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；
• 新增界面時(shí)光標(biāo)默認(rèn)停留在第一個待輸入的文本框中。

保存

• 保存或者提交成功給予輕提示消息；
• 返回到列表頁時(shí)選中保存的那條記錄。

取消

• 數(shù)據(jù)量較多的頁面中，當(dāng)進(jìn)行列修改后，作取消時(shí)需要彈窗給予提示；

修改

• 新增或修改的內(nèi)容提交失敗后，需要保留當(dāng)前的內(nèi)容，以便再次修改提交；
• 對主要字段內(nèi)容進(jìn)行重復(fù)值、空置（空格）、中英文特殊字符判斷校驗(yàn)。

05 模版-詳情頁

用以展示操作列條目的詳情描述或修改。

1. 模版類別

根據(jù)信息之間的相關(guān)性，及各個信息模塊的親密度。越靠近即相關(guān)性越弱。

2. 單張卡片

所有的信息內(nèi)容集中在一張卡片中，通過間距來區(qū)分。使用場景：需要展示內(nèi)容較少，復(fù)雜度較低的信息。

3. 多張卡片

展示審批單據(jù)的詳細(xì)信息，將內(nèi)容復(fù)雜度較高的使用卡片區(qū)隔開來，卡片內(nèi)容的相關(guān)性不高。使用場景：適用于審批流程和審批明細(xì)展示，及部分審批操作。

4. 頁面分層

使用場景：詳情頁內(nèi)容且復(fù)雜度較高，需要拆分為多個頁簽，輔助用戶瀏覽信息。如CRM企業(yè)客戶管理。

5. 表格式詳情

某一組的字段內(nèi)容過多的話，建議使用表格式樣，這樣做的好處能夠快速定位信息。

如果所示：優(yōu)點(diǎn)對字段類別分類，迅速定位到相關(guān)重要信息，缺點(diǎn)是極大占用縱向空間。

06 模版-空狀態(tài)

讓用戶知道當(dāng)前情況，并提供后續(xù)步驟的建設(shè)性指導(dǎo)，避免用戶感到迷失和困惑。

1. 元素解析

1. 圖像：與場景應(yīng)用相關(guān)的插圖（可選），為沉重的異常添加一點(diǎn)樂趣，緩解使用者的煩躁。
2. 標(biāo)題：簡單的解釋，使用陳述句式。比如：你還沒有添加任何數(shù)據(jù)。
3. 內(nèi)容：進(jìn)行標(biāo)題的解釋以及下面要采取的動作等，文案引導(dǎo)到主要操作的按鈕上。
4. 按鈕：接下來用戶需要的行動操作，將用戶引到到正確的或者希望他們的去操作的路徑上。

2. 一般規(guī)則

無數(shù)據(jù)空狀態(tài)：首次使用沒有數(shù)據(jù)。目的讓用戶知道需要添加數(shù)據(jù)。

用戶操作空狀態(tài)：根據(jù)用戶操作反饋。如：搜索無結(jié)果；確認(rèn)結(jié)果完成（支付完成），目的讓用戶知道成功的完成了某一個過程，并向用戶反饋結(jié)果。

錯誤空狀態(tài)：權(quán)限、系統(tǒng)、需要配置等問題。讓用戶知道問題所在，如果可能并提供可以糾正的操作按鈕。

不要多個按鈕：不要有多個按鈕讓用戶做選擇，集中在讓用戶需要做的主按鈕上。

3. 錯誤案例

空狀態(tài)、無數(shù)據(jù)需要有提示信息。

07 模版-其他

特殊頁面的模版，多個平臺出現(xiàn)。

上傳預(yù)覽

文件上傳預(yù)覽：預(yù)覽表格填寫錯誤，警告提示樣式。

參考文章

• 《Element》https://link.zhihu.com/?target=https%3A//element.eleme.cn/%23/zh-CN/component/installation
• 《Ant Design》https://link.zhihu.com/?target=https%3A//ant.design/docs/spec/introduce-cn

#相關(guān)閱讀#

如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范（一）：介紹篇

如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范（二）：設(shè)計(jì)原則

如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范（三）：全局樣式

如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范（四）：基礎(chǔ)組件

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

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