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

設(shè)計(jì)B端項(xiàng)目，我們需要思考的是如何運(yùn)用組件化的思維去維護(hù)后續(xù)的迭代和優(yōu)化，以及如何進(jìn)行團(tuán)隊(duì)的協(xié)作。而團(tuán)隊(duì)化的組件規(guī)范，是良好協(xié)作的基礎(chǔ)。antdesign作為一種B端設(shè)計(jì)語(yǔ)言，是目前開(kāi)源化組件非常好的。所以，在KCL項(xiàng)目中，我們積極推動(dòng)引入antdesign的設(shè)計(jì)規(guī)范，并結(jié)合我們自己的項(xiàng)目特色和本身的一些設(shè)計(jì)進(jìn)行了融合。

在本篇中，主要簡(jiǎn)單闡述，我們?cè)趯W(xué)習(xí)和運(yùn)用antdesign過(guò)程中的一些做法和經(jīng)驗(yàn)，或者說(shuō)一些簡(jiǎn)單的思考和大家分享。如有不合適的地方，歡迎大家留言交流。

目錄：

1. 字體
2. 顏色
3. 排版
4. 間距
5. 布局
6. 導(dǎo)航

一、字體

字體是體系化界面設(shè)計(jì)中最基本的構(gòu)成之一。我們的用戶通過(guò)文本來(lái)理解內(nèi)容和完成工作，科學(xué)的字體系統(tǒng)將大大提升用戶的閱讀體驗(yàn)及工作效率。我們選取的字體方案，是基于『動(dòng)態(tài)秩序』的設(shè)計(jì)原則，結(jié)合了自然對(duì)數(shù)以及音律的規(guī)則得出的。

（備注：動(dòng)態(tài)秩序-一種面向未來(lái)的極簡(jiǎn)化哲學(xué)，其意義在于為全人類(lèi)提供一種基礎(chǔ)性的社會(huì)發(fā)展共識(shí)。此處應(yīng)當(dāng)理解為在字體選取時(shí)，保證字體極簡(jiǎn)化的前提下，尋求一種排版上的秩序性。）

我們選取字體的原則，一是針對(duì)B端項(xiàng)目特點(diǎn)，以非襯線體為主；二是盡量避免版權(quán)字體侵權(quán)，選擇開(kāi)源字體；三是如上述第一段提倡的動(dòng)態(tài)秩序原則，字體之間避免無(wú)規(guī)律性以及差異過(guò)大。

1. 字體家族

優(yōu)秀的字體系統(tǒng)首先是要選擇合適的字體家族。系統(tǒng)項(xiàng)目的字體家族中優(yōu)先使用系統(tǒng)默認(rèn)的界面字體，我們同時(shí)準(zhǔn)備了一套利于屏顯的備用字體庫(kù)，來(lái)維護(hù)在不同平臺(tái)以及瀏覽器的顯示下，字體始終保持良好的易讀性和可讀性，體現(xiàn)了友好、穩(wěn)定和專(zhuān)業(yè)的特性。

如下所示：

font-family: “Chinese Quote”, -apple-system, BlinkMacSystemFont, “Source Han Sans”, “PingFang SC”, “Hiragino Sans GB”, “Microsoft YaHei”, “Helvetica Neue”, Helvetica, Arial, sans-serif,”Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;

上述是antdesign的推薦字體家族，但是在考慮到我們項(xiàng)目的特點(diǎn)和團(tuán)隊(duì)資源情況，我們只考慮了比較常用的：蘋(píng)方簡(jiǎn)體、思源黑以及英文的helvetica和helvetica neue、arial字體。其他推薦字體，暫沒(méi)有采用。

因?yàn)橐粋€(gè)項(xiàng)目中常用的，除了banner或者推廣位，不會(huì)超過(guò)三款字體。字體種類(lèi)應(yīng)用過(guò)多，也會(huì)顯得系統(tǒng)不嚴(yán)謹(jǐn)。其中微軟雅黑字體，我們僅在PC端項(xiàng)目界面中常規(guī)敘述或內(nèi)容中，會(huì)作為備用字體使用。其他用途，例如：推廣、banner時(shí)，如需采用，恐需要授權(quán)，請(qǐng)謹(jǐn)慎采用哈。

• 中文蘋(píng)方黑體簡(jiǎn)-優(yōu)先字體思源黑體簡(jiǎn)-備用字體冬青黑體簡(jiǎn)-備用字體
• 英文Helvetica Neue-優(yōu)先字體Helvetica-備用字體arial-備用字體

2. 主字號(hào)

基于電腦顯示器閱讀距離（50 cm）以及最佳閱讀角度（30度），保證在多數(shù)常用顯示器上的用戶閱讀效率最佳效果，確定正文的標(biāo)準(zhǔn)字號(hào)14px。

我們初期并非采用antdesign推薦的14px，而是之前傳統(tǒng)經(jīng)驗(yàn)中的12px，可是后續(xù)發(fā)現(xiàn)在12px字號(hào)情況下時(shí)，對(duì)于大段文字內(nèi)容時(shí)，易讀性較差。特別是我們一些商戶反饋，總是看錯(cuò)。同時(shí)，在mac系統(tǒng)下和pc端系統(tǒng)下同一內(nèi)容界面上內(nèi)容，易讀性和可讀性的確存在差異。所以，最終我們還是采用了antdesign的推薦正文標(biāo)準(zhǔn)字號(hào)14px。

3. 字階（字號(hào)）與行高

字階（字號(hào)）和行高決定著一套字體系統(tǒng)的動(dòng)態(tài)與秩序之美。字階（字號(hào)）是指一系列有規(guī)律的不同尺寸的字體；行高可以理解為一個(gè)包裹在字體外面的無(wú)形的盒子。

行高此處我們定義為一般排版梯度字號(hào)的1.5倍，同時(shí)建議在一個(gè)系統(tǒng)設(shè)計(jì)中（展示型頁(yè)面除外），字階（字號(hào)）的選擇盡量控制在 3-5 種之間，保持克制的原則。多字號(hào)時(shí)，會(huì)顯得整個(gè)頁(yè)面比較凌亂。

但是具體是將行高的排版梯度定義為字號(hào)的1.5倍，還是2倍。需要具體看項(xiàng)目的實(shí)際展示效果。不能一概而論。正如antdesign也說(shuō)了，其一些標(biāo)準(zhǔn)只是推薦而非規(guī)定標(biāo)準(zhǔn)，是方向而不是限制。

4. 字體顏色

文本顏色如果和背景顏色太接近就會(huì)難以閱讀。考慮到無(wú)障礙設(shè)計(jì)的需求，我們參考了 WCAG 的標(biāo)準(zhǔn)，將正文文本、標(biāo)題和背景色之間保持在了 7:1 以上的 AAA 級(jí)對(duì)比度。（備注：標(biāo)準(zhǔn)文字與背景對(duì)比色，色值可以按下表，也可靈活選?。?/p>

其實(shí)說(shuō)真的，關(guān)于antdesign推薦的這個(gè)標(biāo)準(zhǔn)，你如果嚴(yán)格按這個(gè)來(lái)，自然也可以。不按這個(gè)，依靠體驗(yàn)設(shè)計(jì)師的經(jīng)驗(yàn)判斷，應(yīng)該也是沒(méi)有沒(méi)問(wèn)題的。我們是兩個(gè)進(jìn)行了一定的結(jié)合，因?yàn)閷?duì)于字體的顏色，不同設(shè)計(jì)師對(duì)于其灰色的感知受限于經(jīng)驗(yàn)，同樣也受限于設(shè)備。所以，我們團(tuán)隊(duì)在處理項(xiàng)目中字體顏色的時(shí)候，主要是通過(guò)這個(gè)網(wǎng)站來(lái)判斷大家對(duì)于顏色的把控的：https://webaim.org/resources/contrastchecker/ ，這個(gè)網(wǎng)站可以很明白的告知你當(dāng)前字體顏色與背景之間的對(duì)比度是否達(dá)到AAA級(jí)標(biāo)準(zhǔn)。

5. 字體樣式尺寸規(guī)范

對(duì)主、次、輔助、標(biāo)題、展示等類(lèi)別的字體做統(tǒng)一的規(guī)劃，再落地到具體場(chǎng)景中進(jìn)行微調(diào)，在視覺(jué)展現(xiàn)上能夠用盡量少的樣式去實(shí)現(xiàn)設(shè)計(jì)目的。切勿不同功能模塊的頁(yè)面同重要層級(jí)主次標(biāo)題字體樣式不統(tǒng)一。

二、顏色

顏色在界面設(shè)計(jì)中的應(yīng)用應(yīng)同時(shí)具備品牌識(shí)別性以及界面設(shè)計(jì)功能性。顏色是相當(dāng)感性的東西，設(shè)計(jì)中對(duì)顏色的運(yùn)用首要應(yīng)考慮到品牌層面的表達(dá)，此外很重要的一點(diǎn)是顏色的運(yùn)用應(yīng)達(dá)到：信息傳遞，動(dòng)作指引，交互反饋，或是強(qiáng)化和凸現(xiàn)某一個(gè)元素的目的。任何顏色的選取和應(yīng)用，應(yīng)該是有意義的。

在中后臺(tái)系統(tǒng)設(shè)計(jì)中，可以將顏色分為：系統(tǒng)級(jí)顏色體系和產(chǎn)品級(jí)顏色體系。

系統(tǒng)級(jí)色彩體系主要定義了在中臺(tái)設(shè)計(jì)中的基礎(chǔ)色板、中性色板和數(shù)據(jù)可視化色板。產(chǎn)品級(jí)色彩體系則是在具體設(shè)計(jì)過(guò)程中，基于系統(tǒng)色彩進(jìn)一步定義符合產(chǎn)品調(diào)性（橙黃）以及功能訴求的顏色（藍(lán)色、綠色、紅色）。

2.1 系統(tǒng)級(jí)顏色體系

基于『自然』（自然界中我們眼睛所看到的自然色）的設(shè)計(jì)價(jià)值觀，結(jié)合自然中的植物及色彩的變化，以及公司品牌標(biāo)識(shí)色，選取了幾個(gè)顏色作為基色，同時(shí)加以提亮飽和度和亮度，antdesign確定的12個(gè)基礎(chǔ)色，我們覺(jué)得已經(jīng)夠用了。

所以，我們只是依據(jù)我們公司自己的品牌調(diào)性確定了幾個(gè)我們可能會(huì)用到的顏色，確定并生成了KCL項(xiàng)目的基礎(chǔ)色。下圖所示為antdesign的推薦基色，我們只是調(diào)整了其飽和度和亮度。

2.1.1 基礎(chǔ)色板

（1）基礎(chǔ)色板生成算法：方案一

基礎(chǔ)色板是基于主色的基礎(chǔ)上，衍生而來(lái)。利用antdesign色板生成工具調(diào)色，選定主色（6號(hào)色）之后，根據(jù)色彩算法生成10中衍生色。（ https://ant.design/docs/spec/colors-cn，色板生成工具）

（2）基礎(chǔ)色板生成算法：方案二

基礎(chǔ)色板是基于主色的基礎(chǔ)上，衍生而來(lái)。衍生規(guī)則先確定基礎(chǔ)色例如antdesign中的6號(hào)色，以6號(hào)色為基礎(chǔ)，在保持色相不變的基礎(chǔ)上，降低飽和度和亮度，但是這個(gè)降多少，主要是依據(jù)設(shè)計(jì)師經(jīng)驗(yàn)來(lái)調(diào)整。調(diào)整好一個(gè)深色，選取好一個(gè)基礎(chǔ)色，再選擇一個(gè)純白色。在Adobe illustrator中利用混合工具，使之形成色彩混合。最后擴(kuò)展，去掉純白色，形成由淺色到深色的漸變色板。(個(gè)人經(jīng)驗(yàn)）

2.1.2 中性色板

中性色包含了黑、白、灰。在中后臺(tái)的網(wǎng)頁(yè)設(shè)計(jì)中大量使用，能夠令頁(yè)面信息具備良好的主次關(guān)系，助力閱讀體驗(yàn)。下方的十個(gè)中性色，同樣可以運(yùn)用上述方法設(shè)置。

2.1.3 數(shù)據(jù)可視化色板

數(shù)據(jù)可視化色彩體系是基于 Ant Design 色彩體系，并結(jié)合數(shù)據(jù)可視化特性而設(shè)計(jì)的。在數(shù)據(jù)可視化設(shè)計(jì)中，色彩的運(yùn)用原則上應(yīng)首先考慮準(zhǔn)確性，先保證達(dá)到了信息傳遞、操作指引、交互反饋，或是強(qiáng)化、凸顯某一個(gè)信息的目的，其次再去考慮品牌識(shí)別性。下方鏈接是關(guān)于antdesign中關(guān)于數(shù)據(jù)可視化的，https://antv.gitee.io/zh/docs/specification/principles/visual，具體可以去antV查看相關(guān)運(yùn)用。

因?yàn)槲覀冺?xiàng)目中涉及的可視化圖表比較少，我們幾乎就是嚴(yán)格按照antV的原則規(guī)范進(jìn)行的。后續(xù)限于資源配置，已經(jīng)全部剔除數(shù)據(jù)化部分，改為另外一個(gè)項(xiàng)目只做可視化部分，所以，在本系統(tǒng)規(guī)范中，就不做過(guò)多數(shù)據(jù)可視化的規(guī)范介紹，后續(xù)有機(jī)會(huì)再來(lái)一片專(zhuān)門(mén)聊聊數(shù)據(jù)可視化規(guī)范的。

2.2 產(chǎn)品級(jí)顏色體系

2.2.1 品牌色應(yīng)用

品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺(jué)元素之一。在色彩選取時(shí)，需要先明確品牌色在界面中的使用場(chǎng)景及范圍。在基礎(chǔ)色板中選擇主色，建議選擇色板從淺自深的第六個(gè)顏色作為主色。

KCL后臺(tái)項(xiàng)目選取的基色是基于antdesign推薦的顏色基礎(chǔ)上，進(jìn)行了飽和度和亮度的調(diào)整，并運(yùn)用防范一方法生成了一個(gè)主色的10個(gè)色號(hào)和輔助色兩個(gè)的10個(gè)色號(hào)。主色的應(yīng)用場(chǎng)景包括：關(guān)鍵行動(dòng)點(diǎn)，操作狀態(tài)、重要信息高亮，圖形化等場(chǎng)景。其他前端展示類(lèi)業(yè)務(wù)場(chǎng)景不得偏離品牌基色，可以根據(jù)需求，重新選取輔助色，進(jìn)行規(guī)范設(shè)計(jì)。

2.2.2 功能色應(yīng)用

功能色代表了明確的信息以及狀態(tài)，比如成功、出錯(cuò)、失敗、提醒、鏈接等。功能色的選取需要遵守用戶對(duì)色彩的基本認(rèn)知。所謂用戶對(duì)色彩的基本認(rèn)知，即用戶對(duì)色彩的情感心理，例如：紅色雖然從色彩心理上代表熱情、熱鬧，但同時(shí)也具有危險(xiǎn)、提醒的含義。

2.2.3 中性色應(yīng)用

中性色主要被大量的應(yīng)用在界面的文字部分，以及背景、邊框、分割線、等場(chǎng)景中。產(chǎn)品中性色的定義需要考慮深色背景以及淺色背景的差異，同時(shí)需結(jié)合 WCAG 2.0 標(biāo)準(zhǔn)（4.5:1 最小對(duì)比度（AA 級(jí)））。所以，中性色在產(chǎn)品應(yīng)用過(guò)程中以透明度的方式進(jìn)行應(yīng)用。（在人力或團(tuán)隊(duì)無(wú)法顧及情況下，文字色彩可只選擇文字樣式中顏色應(yīng)用，背景及線框等可以靈活選取合適的不超過(guò)三種色值。）

三、排版

良好的排版規(guī)范能大大提升用戶的視覺(jué)體驗(yàn)。排版的基本原則，對(duì)齊、對(duì)比、重復(fù)。在后臺(tái)項(xiàng)目的設(shè)計(jì)過(guò)程中，做好設(shè)計(jì)頁(yè)面的排版已經(jīng)相當(dāng)于做好了一半了。所以，我們必須確定頁(yè)面的排版設(shè)計(jì)原則和細(xì)節(jié)。

3.1 行高和段落

考慮到閱讀的舒適度和節(jié)奏感，句子和段落間需要合適的間距。行高決定了段落中各行文字的垂直距離，我們通過(guò)字體本身默認(rèn)A字號(hào)的1.5倍來(lái)控制行高。段落間距決定了段落上下的間距一般為字號(hào)的一倍寬。但是是否采取antdesign推薦的字號(hào)的一倍寬為段間距，1.5倍來(lái)顯示行高，需要結(jié)合具體的項(xiàng)目特點(diǎn)來(lái)做決定。最初我們采取的是一倍，但是后續(xù)經(jīng)過(guò)對(duì)比發(fā)現(xiàn)一倍間距，并不合適。

3.2 標(biāo)點(diǎn)和空格

1. 使用全角中文標(biāo)點(diǎn)；
2. 遇到完整的英文整句、特殊名詞等內(nèi)容時(shí)使用半角英文標(biāo)點(diǎn)；
3. 數(shù)字內(nèi)容使用半角英文標(biāo)點(diǎn)；
4. 中文與英文之間使用空格間隔；
5. 數(shù)字與單位之間使用空格間隔；
6. 中文鏈接之間使用空格間隔。

3.3 基礎(chǔ)對(duì)齊

3.3.1 中文/英文居左對(duì)齊

中文和英文均采用左對(duì)齊的方式，因?yàn)楝F(xiàn)代閱讀的順序一般是自左向右，呈“Z“字形。

3.3.2 數(shù)字/小數(shù)點(diǎn)對(duì)齊

數(shù)字通常采用右對(duì)齊或小數(shù)點(diǎn)對(duì)齊，這樣便于對(duì)個(gè)十百千位上的數(shù)字進(jìn)行對(duì)比。

3.3.3 冒號(hào)對(duì)齊

以冒號(hào)對(duì)齊的方式在表單中尤其常見(jiàn)，主要是為了區(qū)分標(biāo)題和內(nèi)容區(qū)塊，除了美觀簡(jiǎn)潔外，還能讓用戶迅速看清標(biāo)題減少出錯(cuò)概率。

但是是否當(dāng)有冒號(hào)的時(shí)候，一定要按照冒號(hào)對(duì)齊呢？

不一定的，正如antdesign所言，其推薦是引導(dǎo)，非標(biāo)準(zhǔn)。

我們?cè)贙CL項(xiàng)目中，就并沒(méi)有采用以冒號(hào)對(duì)齊。在上一篇推文中也有所闡述，以冒號(hào)對(duì)齊的時(shí)候，由于是雙列多行，所以，用戶在填寫(xiě)的時(shí)候，感覺(jué)非常凌亂，不知道該先填寫(xiě)什么？考慮成本比較高。

3.4 表單排列

3.4.1 組合輸入框

當(dāng)兩個(gè)輸入框關(guān)聯(lián)性很強(qiáng)時(shí)，可以前后拼接，減少頁(yè)面空間。

3.4.2 組合對(duì)齊

在頁(yè)面設(shè)計(jì)表單時(shí)，按鈕組必須和輸入框左對(duì)齊。

組合輸入框不僅僅是頁(yè)面內(nèi)的，還有內(nèi)容承載的彈窗也會(huì)有相關(guān)組合輸入框的輸入選擇。我們?cè)诳紤]組合對(duì)齊時(shí)，當(dāng)然也可以全部居中對(duì)齊，但是那種排版布局方式，局限性非常明顯，頁(yè)面的版率非常低。

3.5 對(duì)齊方式

無(wú)論左對(duì)齊、右對(duì)齊還是頂部對(duì)齊，都有其優(yōu)缺點(diǎn)和應(yīng)用場(chǎng)景。所以正確的解決方案取決于具體目標(biāo)和制約因素，諸如：希望用戶加快或者降低填寫(xiě)速度（有時(shí)設(shè)計(jì)者希望用戶深思熟慮每個(gè)輸入框內(nèi)容）、屏幕顯示的限制、本地化考慮等多種因素。

3.5.1 右對(duì)齊-冒號(hào)對(duì)齊（推薦）

優(yōu)點(diǎn)：節(jié)約垂直空間

缺點(diǎn)：降低可讀性，標(biāo)簽長(zhǎng)度和輸入框彈性小

場(chǎng)景：既要減少垂直空間，又要加快填寫(xiě)速度

3.5.2 左對(duì)齊

優(yōu)點(diǎn)：文字開(kāi)頭按閱讀視線對(duì)齊，方便閱讀，節(jié)約垂直空間。

缺點(diǎn)：填寫(xiě)速度慢，標(biāo)簽長(zhǎng)度和輸入框彈性小。

場(chǎng)景：希望用戶放慢速度，仔細(xì)思考表單中的每個(gè)輸入框。

antdesign設(shè)計(jì)中沒(méi)有推薦這種，推薦的是右對(duì)齊的方式。但是在KCL項(xiàng)目中，并沒(méi)有和antdesign一樣，我們采取的是左對(duì)齊方式。因?yàn)?，我們?cè)O(shè)計(jì)時(shí)是以1920寬為設(shè)計(jì)標(biāo)準(zhǔn)的，所以在信息排列時(shí)，考慮的主要是兩列排版布局。如果采用右對(duì)齊的方式整個(gè)頁(yè)面看起來(lái)特別凌亂，極難讀取。右對(duì)齊方式，比較適合單列排版布局的方式。

3.5.3 頂對(duì)齊

優(yōu)點(diǎn)：有最快的瀏覽和處理速度,標(biāo)簽長(zhǎng)度彈性大。

缺點(diǎn)：非常占垂直空間。

場(chǎng)景：希望用戶快速填寫(xiě)表單完成任務(wù)。

四、間距

間距的設(shè)置，一方面是為了規(guī)范頁(yè)面的布局；另一方面，也是為了在閱讀體驗(yàn)上，呈現(xiàn)一定的韻律和節(jié)奏。最重要的是增加內(nèi)容的易讀性和可讀性，避免文字內(nèi)容識(shí)別性差。

4.1 橫向空間間距關(guān)系

橫向空間以柵格系統(tǒng)方法進(jìn)行空間寬度的分割，同時(shí)結(jié)合橫向空間間距類(lèi)型進(jìn)行應(yīng)用。在這三種規(guī)格不適用的情況下，可以通過(guò)加減『基礎(chǔ)間距』的倍數(shù)，或者增加元素來(lái)拉開(kāi)信息層次。y=8+8*n。其中，n>=0，y 是縱向間距，8 是『基礎(chǔ)間距』。

4.2 縱向空間間距關(guān)系

縱向空間同樣以柵格系統(tǒng)方法進(jìn)行空間寬度的分割，但以最小單元8px為最小分割單位，同時(shí)結(jié)合縱向空間間距類(lèi)型進(jìn)行應(yīng)用。在這三種規(guī)格不適用的情況下，可以通過(guò)加減『基礎(chǔ)間距』的倍數(shù)，或者增加元素來(lái)拉開(kāi)信息層次。y=8+8*n，其中，n>=0，y 是縱向間距，8 是『基礎(chǔ)間距』。

典型表單間距規(guī)范示例：

4.3 容器規(guī)范

容器組件，可以方便快速的搭建頁(yè)面的布局。為保持設(shè)計(jì)的一致性，應(yīng)該為頁(yè)面設(shè)定了統(tǒng)一的容器范圍，讓信息能保持在固定的置，在頁(yè)面跳轉(zhuǎn)的時(shí)1不至于出現(xiàn)內(nèi)容閃動(dòng)。容器是用來(lái)收納盒組織對(duì)象的貯存器，理論上信息不應(yīng)該超出容器范圍。

五、布局

空間布局是體系化視覺(jué)設(shè)計(jì)的起點(diǎn)，和傳統(tǒng)的平面設(shè)計(jì)的不同之處在于，UI界面的布局空間要基于『動(dòng)態(tài)、體系化』的角度出發(fā)展開(kāi)。受教于建筑界大師柯布西耶的模度思想的啟發(fā)，基于『秩序之美』的原則，探索 UI 設(shè)計(jì)中的動(dòng)態(tài)空間秩序，形成了界面的布局方式，為設(shè)計(jì)者構(gòu)筑具備“理性之美”的布局空間創(chuàng)造了條件。

關(guān)于布局結(jié)構(gòu)是先確定，還是如本文目錄結(jié)構(gòu)，先確定一些基礎(chǔ)規(guī)范細(xì)節(jié)之后，考慮布局方式，我的看法是都可以。其實(shí)還有個(gè)最重要的原因，有時(shí)候，團(tuán)隊(duì)討論的布局結(jié)構(gòu)，很有可能是無(wú)話語(yǔ)權(quán)的，特別是中小型團(tuán)隊(duì)來(lái)說(shuō)。所以，如果可能將比較重大的影響因素，推后到有話語(yǔ)權(quán)的人一起討論的時(shí)候，再確定。

5.1 上下布局

常被用于上下布局的設(shè)計(jì)方案中，做法是對(duì)兩邊留白區(qū)域進(jìn)行最小值的定義，當(dāng)留白區(qū)域到達(dá)限定值之后再對(duì)中間的主內(nèi)容區(qū)域進(jìn)行動(dòng)態(tài)縮放。

5.2 左右布局

常被用于左右布局的設(shè)計(jì)方案中，常見(jiàn)的做法是將左邊的導(dǎo)航欄固定，對(duì)右邊的工作區(qū)域進(jìn)行動(dòng)態(tài)縮放。

5.3 柵格系統(tǒng)

antdesign設(shè)計(jì)語(yǔ)言中，后臺(tái)界面畫(huà)板推薦統(tǒng)一設(shè)定1440PX寬度，向下自適應(yīng)1366PX，向上自適應(yīng)1920PX。最低適配到1366PX，至于少部分1280PX，暫不做考慮。本系統(tǒng)界面采用24柵格體系，例如上下布局結(jié)構(gòu)中，1440PX上下布局為例，將1168PX的內(nèi)容區(qū)域 進(jìn)行 24 柵格的劃分設(shè)置。我們?yōu)轫?yè)面中柵格的 Gutter 設(shè)定了定值，即瀏覽器在一定范圍擴(kuò)大或縮小，柵格的 Column 寬度會(huì)隨之?dāng)U大或縮小，但 Gutter 的寬度值固定不變。

備注：

1. 清晰的定義動(dòng)態(tài)布局范圍；
2. 盡量保持偶數(shù)思維；
3. 關(guān)鍵數(shù)據(jù)的交付（Gutter、Column）；
4. 區(qū)塊的定義要從 column 開(kāi)始到 column 結(jié)束。

5.5 UI模度

UI 模度是在大量的實(shí)踐中，提取出來(lái)可以用于UI布局空間決策的數(shù)組，他們都保持了 8 倍數(shù)的原則、具備動(dòng)態(tài)的韻律感。經(jīng)過(guò)驗(yàn)證，可以在一定程度上幫助我們更快更好的實(shí)現(xiàn)布局空間上的設(shè)計(jì)決策。

上述模度數(shù)，只是一個(gè)參考，總的一個(gè)思想應(yīng)該是8的倍數(shù)來(lái)的。和我們上述間距表述一致。其實(shí)8倍原則也是做界面設(shè)計(jì)的一個(gè)常用原則，原因在于與開(kāi)發(fā)對(duì)接的時(shí)候好切圖和適配。

六、導(dǎo)航

在廣義上，任何告知用戶他在哪里，他能去什么地方以及如何到達(dá)那里的方式，都可以稱(chēng)之為導(dǎo)航。面包屑導(dǎo)航、卡片式導(dǎo)航、標(biāo)簽導(dǎo)航等。

6.1 導(dǎo)航菜單

導(dǎo)航菜單是將內(nèi)容信息友好地展示給用戶的有效方式。在確定好網(wǎng)站的信息架構(gòu)后，應(yīng)當(dāng)按需選取適當(dāng)?shù)膶?dǎo)航菜單樣式。

6.1.1 頂部導(dǎo)航菜單

一二級(jí)導(dǎo)航都在頂部。頂部導(dǎo)航在頁(yè)面布局上采用的是上下的結(jié)構(gòu)，一般主導(dǎo)航放置于頁(yè)面的頂端，從左自右依次為logo、一級(jí)導(dǎo)航項(xiàng)、輔助菜單、用戶、設(shè)置、通知等)。通常將內(nèi)容放在固定尺寸（例如：1200Px)內(nèi)。整個(gè)頁(yè)面排版穩(wěn)定，不受用戶終端顯示器影響 ；上下級(jí)的結(jié)構(gòu)符合用上下瀏覽的習(xí)慣，也是較為經(jīng)l的網(wǎng)站導(dǎo)航模式。

頁(yè)面上下切分的方式提高了主工作區(qū)域的信息展示效率，但在縱向空間上會(huì)有一些犧牲。此外，由于導(dǎo)航欄水平空間的限制，不適合那些一級(jí)導(dǎo)航項(xiàng)很多的信息結(jié)構(gòu)。

6.1.2 面包屑導(dǎo)航

面包屑導(dǎo)航的作用是告訴用戶當(dāng)前頁(yè)面在系統(tǒng)層級(jí)結(jié)構(gòu)中的位置以及父子級(jí)頁(yè)面間的關(guān)系。（注意事項(xiàng)：1. 層級(jí)過(guò)深時(shí)，建議做隱藏處理，頁(yè)面顯示保持在三級(jí)以內(nèi)，最多不宜超過(guò)五級(jí)；2. 盡可能不使用面包屑，尤其是當(dāng)前頁(yè)面的導(dǎo)航能清晰的告訴用戶他在哪里時(shí)。）

6.1.3 側(cè)邊導(dǎo)航菜單

一級(jí)導(dǎo)航菜單在側(cè)邊欄。側(cè)邊導(dǎo)航在頁(yè)面布局上采用的是左右的結(jié)構(gòu)，一般主導(dǎo)航放置于頁(yè)面的左側(cè)固定位置，輔助菜單放置于工作區(qū)頂部。內(nèi)容根據(jù)瀏覽器終端進(jìn)行自適應(yīng)，能提高橫向空間的使用率，但是整個(gè)頁(yè)面排版不穩(wěn)定。

側(cè)邊導(dǎo)航的模式層級(jí)擴(kuò)展性強(qiáng)，一、二、三級(jí)導(dǎo)航項(xiàng)目可以更為順暢且具關(guān)聯(lián)性的被展示，同時(shí)側(cè)邊導(dǎo)航可以固定，使得用戶在操作和瀏覽中可以快速的定位和切換當(dāng)前位置，有很高的操作效率。但這類(lèi)導(dǎo)航橫向頁(yè)面內(nèi)容的空間會(huì)被犧牲一部分，側(cè)邊導(dǎo)航的級(jí)別最多三層，最終路徑導(dǎo)航，均采用側(cè)滑窗口的形式展示，內(nèi)容呈現(xiàn)在主體內(nèi)容區(qū)域之上，側(cè)滑窗寬度固定240PX。

6.1.3.1 側(cè)邊導(dǎo)航可收起菜單+多窗口

該版本導(dǎo)航組合是KCL初版采用方式，之所以不適合當(dāng)前項(xiàng)目，主要原因在于KCL項(xiàng)目菜單并不復(fù)雜，且無(wú)多開(kāi)窗口的需求，其實(shí)質(zhì)是側(cè)邊導(dǎo)航的另外一種交互方式。

6.1.5 頂部一級(jí)二級(jí)導(dǎo)航+側(cè)邊三級(jí)導(dǎo)航（三級(jí)仍然從屬于二級(jí)導(dǎo)航，另外一種是直接在下拉二級(jí)旁邊顯示三級(jí)導(dǎo)航）

改版的一方案就是6.1.5頂部一級(jí)+側(cè)邊二級(jí)布局方式（一級(jí)導(dǎo)航無(wú)下拉選項(xiàng)，點(diǎn)擊一級(jí)導(dǎo)航之后側(cè)邊欄顯示二級(jí)導(dǎo)航，一級(jí)導(dǎo)航相當(dāng)于標(biāo)簽功能），但是這種方式并沒(méi)有提升用戶的使用效率，反而增加了使用成本和負(fù)擔(dān)。主要是當(dāng)時(shí)將一級(jí)所從屬的二級(jí)導(dǎo)航直接割裂到了左側(cè)導(dǎo)航欄，而原本的一級(jí)導(dǎo)航欄變成了切換標(biāo)簽的功能。

所以，為了便于全部展示，采取的是側(cè)邊導(dǎo)航布局即6.1.3布局方式，具體原因如上所述。還有一個(gè)原因是我們?cè)诤笈_(tái)項(xiàng)目中同樣嘗試運(yùn)用設(shè)計(jì)風(fēng)格以及承載的內(nèi)容數(shù)據(jù)不復(fù)雜，對(duì)于橫向空間需求不是特別高。

其中部分內(nèi)容出于職業(yè)經(jīng)驗(yàn)，如有不妥，歡迎留言交流。

作者：PGDWORKS；公眾號(hào)：PGDWORKS

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

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