用戶在操作系統(tǒng)時(shí)所看到的頁(yè)面框架其實(shí)就是系統(tǒng)布局，它是一個(gè)產(chǎn)品最外層的框架結(jié)構(gòu)，一般包含了頂部導(dǎo)航、側(cè)邊導(dǎo)航欄、面包屑、圖文、卡片、內(nèi)容等元素。

對(duì)于設(shè)計(jì)師而言，想要了解一個(gè)中臺(tái)，首先要了解它的系統(tǒng)布局，系統(tǒng)布局是頁(yè)面設(shè)計(jì)的基礎(chǔ)，它與頁(yè)面的關(guān)系，就如同建筑與地基的關(guān)系。日常完成需求時(shí)，UI 界面反復(fù)的調(diào)試頁(yè)面寬度與卡片比例會(huì)占用我們大量的時(shí)間。為了提高工作效率，并且把更多的時(shí)間放在業(yè)務(wù)、視覺創(chuàng)新等方面，我們就應(yīng)該需要一套完整的布局規(guī)范。

對(duì)整個(gè)公司產(chǎn)品體系而言，內(nèi)部員工與普通用戶使用的操作系統(tǒng)達(dá)到幾十甚至上百個(gè)，單一的頁(yè)面布局滿足不了各個(gè)子項(xiàng)目的使用場(chǎng)景。所以我們從前期的布局框架設(shè)計(jì)調(diào)研到產(chǎn)品業(yè)務(wù)的特性，定義了中臺(tái)界面的幾大類型，并且在我們的設(shè)計(jì)規(guī)范中定義了幾大類型系統(tǒng)布局方式，根據(jù)其布局方式定制好柵格，方便日后在各個(gè)業(yè)務(wù)場(chǎng)景中使用，從而能夠保持一致性、并且可擴(kuò)展，方便快速迭代和維護(hù)。

了解布局

1. 布局方法論

視覺層次

對(duì)于中臺(tái)的 UI 設(shè)計(jì)師們而言，良好的理性思維相對(duì)比感性的視覺思維更加重要，因?yàn)樵?UI 設(shè)計(jì)師設(shè)計(jì)頁(yè)面時(shí)需要把很多互不相關(guān)的元素有秩序的組織在一起，正確引導(dǎo)用戶操作與使用。亨利·亞當(dāng)斯（Henry Adams）曾經(jīng)說過：「混沌是自然法則，秩序是人類的夢(mèng)想」。人們總是喜歡秩序，因?yàn)橹刃蚩梢宰屖虑樽兊酶菀桌斫狻＿@同樣適用于數(shù)字產(chǎn)品的用戶界面，當(dāng) UI 元素被有序組合和結(jié)構(gòu)化時(shí)，人們可以輕松的使用應(yīng)用程序和網(wǎng)站，并對(duì)產(chǎn)品感到滿意，所以設(shè)計(jì)頁(yè)面時(shí)需要結(jié)合視覺層次理論。視覺層次理論是設(shè)計(jì)過程的核心方法之一。最初是建立在格式塔原理的基礎(chǔ)上，它觀察到了用戶對(duì)相互關(guān)聯(lián)元素的視覺感知，并展示了人們?nèi)绾螌⒁曈X元素歸為一類。那么什么是視覺層次呢？官方概括：視覺層次結(jié)構(gòu)致力于一種用戶能夠理解的方式呈現(xiàn)產(chǎn)品的內(nèi)容，以便用戶可以理解每個(gè)元素的重要性級(jí)別。它可以組織頁(yè)面內(nèi)容，以便大腦可以根據(jù)物理差異例如：大小，顏色，對(duì)比度，樣式等區(qū)分對(duì)象。

蘋果的設(shè)計(jì)一直以來(lái)都是引領(lǐng)著設(shè)計(jì)趨勢(shì)，其設(shè)計(jì)被國(guó)內(nèi)外用戶所認(rèn)可，所以就以蘋果官網(wǎng)作為案例。其中，字重對(duì)比：蘋果官網(wǎng)在字重上給人眼前一亮的感覺，它采用 Medium+Bold 的字重使得標(biāo)題與詳情內(nèi)容產(chǎn)生強(qiáng)烈的大小對(duì)比，用戶進(jìn)入官網(wǎng)的第一眼便能了解核心內(nèi)容。顏色對(duì)比：在顏色上使用黑色背景承托產(chǎn)品和內(nèi)容，強(qiáng)烈的黑白對(duì)比增強(qiáng)了信息傳播中的識(shí)別度和對(duì)比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁(yè)面層次感更加的豐富。如下圖：

格式塔理論

往往用戶打開頁(yè)面進(jìn)行閱讀或者操作界面時(shí)視覺的第一感受是產(chǎn)品的整體效果，而并不會(huì)感知到一些較細(xì)節(jié)的元素。往宏觀來(lái)講當(dāng)人們感知到一個(gè)物體由許多元素組成的復(fù)雜對(duì)象時(shí)，人們會(huì)采用有意識(shí)或無(wú)意識(shí)的方法將這些部分安排到整個(gè)組織的系統(tǒng)中，而不只是簡(jiǎn)單的元素級(jí)。它適用于不同級(jí)別的感知，但是視覺部分似乎是設(shè)計(jì)師設(shè)計(jì)界面時(shí)最能體現(xiàn)價(jià)值的部分，這其實(shí)就是格式塔理論，格式塔（Gestalt）這個(gè)術(shù)語(yǔ)來(lái)自德語(yǔ)單詞 Gestalt，中文翻譯為「形狀，形式」。

格式塔心理學(xué)家?guī)鞝柼亍た品蚩ǎ↘urt Koffka）的一句話可以捕捉到這一運(yùn)動(dòng)背后的基本思想：「整體不是元素基因的總和」。官網(wǎng)概括：「在心理現(xiàn)象中，人們對(duì)客觀對(duì)象的感受源于整體關(guān)系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個(gè)統(tǒng)一的整體，部分之和不等于整體，因此整體不能分割」。格式塔理論中元素之知見的原則分別為臨近，相似，連續(xù)，封閉和連接。

在我們的現(xiàn)實(shí)生活中有很多自然規(guī)律都遵守了格式塔原則，比如說每到秋天，北方的嚴(yán)寒氣候不再適合大雁生存，這時(shí)候大雁便會(huì)飛往較暖和的南方，當(dāng)人們看到天空正在南飛的大雁隊(duì)伍，它們組織鏈接得十分嚴(yán)密，并且群體在往同一個(gè)方向移動(dòng)，所以隊(duì)伍的形狀在我們的大腦中將它們視為一個(gè)群組的一部分，產(chǎn)生人字形或一字形的圖形。

信息框架

剛剛我們也介紹了視覺層級(jí)結(jié)構(gòu)和格式塔理論，接下來(lái)簡(jiǎn)單介紹一下信息框架，它也是在系統(tǒng)布局中需要考慮的內(nèi)容。信息框架是將信息內(nèi)容進(jìn)行組織分層，一個(gè)產(chǎn)品的信息框架取決于其特有的業(yè)務(wù)，他與業(yè)務(wù)強(qiáng)相關(guān)并且需要了解用戶群體目標(biāo)。根據(jù)業(yè)務(wù)和用戶目標(biāo)將內(nèi)容組織搭建信息框架，形成系統(tǒng)布局的骨架，方便用戶在瀏覽或操作頁(yè)面時(shí)能夠快速找到重點(diǎn)內(nèi)容，提升用戶使用效率。我們用今日頭條 Web 端和飛書 Web 端兩個(gè)線上產(chǎn)品作為案例分析吧，今日頭條和飛書屬于兩種完全不同類型的產(chǎn)品，那么其信息架構(gòu)也完全不同。

今日頭條屬于門戶類新聞客戶端，主要是生產(chǎn)內(nèi)容展現(xiàn)給用戶，首先進(jìn)入到產(chǎn)品映入眼簾的是無(wú)窮式的信息流，它不需要用戶登錄/注冊(cè)作為身份門檻，而是直觀的把內(nèi)容展示給用戶，推送用戶感興趣的內(nèi)容，也不需要用戶決策任何選擇，用戶只需沉浸式的閱讀體驗(yàn)即可，目的是方便第一時(shí)間抓取用戶、吸引用戶達(dá)到留住用戶的目的。當(dāng)用戶產(chǎn)生興趣以后想要進(jìn)入下一步操作如：點(diǎn)贊、評(píng)論時(shí)才會(huì)彈出登錄/注冊(cè)，一方面是獲取用戶的身份等信息，另一方面是間接性的把用戶留下來(lái)。從產(chǎn)品業(yè)務(wù)屬性來(lái)看，今日頭條的布局把重要的內(nèi)容放入中間，并且占有整個(gè)布局的一半大小，其次放在內(nèi)容兩側(cè)；

飛書屬于工具協(xié)作類產(chǎn)品，用戶第一次打開產(chǎn)品需要注冊(cè)才能使用。與新聞閱讀類產(chǎn)品不同的是工具類型產(chǎn)品用戶目的比較明確，所以首頁(yè)做成一個(gè)功能介紹頁(yè)面，作用是引導(dǎo)用戶了解產(chǎn)品核心功能從而轉(zhuǎn)化成產(chǎn)品的用戶。當(dāng)然功能介紹頁(yè)也是一個(gè)網(wǎng)站的門面，首頁(yè)想要出彩，不僅需要在布局上做的合理還需要考慮網(wǎng)站的色彩、插圖等元素的統(tǒng)一性。在設(shè)計(jì)網(wǎng)站時(shí)，首頁(yè)的功能介紹頁(yè)一定要充分突出自身產(chǎn)品特色，強(qiáng)調(diào)出自身產(chǎn)品的優(yōu)勢(shì)和亮點(diǎn)，如飛書首頁(yè)主要是想突出其產(chǎn)品能夠提高工作效率，所以直接把「在飛書，享高效」slogan 這句話放在了首頁(yè)的第一屏，輔助文案詳細(xì)的介紹了產(chǎn)品的核心功能，直接抓住用戶的痛點(diǎn)。用戶完成注冊(cè)以后，進(jìn)入到功能頁(yè)面，如右下圖可以看出，其系統(tǒng)布局的模塊分成三份，占面積最大的模塊屬于產(chǎn)品最核心的部分也就是聊天窗口，較重要部分是聯(lián)系人部分，最小區(qū)域是功能 Tab 部分。

小結(jié)

所以對(duì)于設(shè)計(jì)師而言，在設(shè)計(jì)頁(yè)面時(shí)必須熟練掌握一些基本設(shè)計(jì)基礎(chǔ)知識(shí)，并且將這些知識(shí)靈活運(yùn)用到實(shí)際的工作當(dāng)中。比如設(shè)計(jì)師在搭建系統(tǒng)布局時(shí)需要熟知頁(yè)面視覺層次、格式塔理論、信息框架等知識(shí)才可創(chuàng)建合理的布局基礎(chǔ)。當(dāng)然布局框架只是整個(gè)產(chǎn)品的基礎(chǔ)骨架，在骨架確定之后，設(shè)計(jì)師才可進(jìn)行下一步的設(shè)計(jì)，如統(tǒng)一的視覺表達(dá)元素，清晰的功能操作，流暢的交互表達(dá)。

2. 布局的設(shè)計(jì)原則

系統(tǒng)布局規(guī)范，需要通過統(tǒng)一的設(shè)計(jì)元素和間距規(guī)范去引導(dǎo)使用者們（使用規(guī)范的設(shè)計(jì)師）跨平臺(tái)使用并且能夠適配不同屏幕尺寸，目的是達(dá)到一致性，可適配、可控性原則。

一致性：對(duì)于界面來(lái)講，界面中的元素和結(jié)構(gòu)需要保持一致性，如：在使用布局時(shí)應(yīng)當(dāng)使用一致的網(wǎng)格，基準(zhǔn)線和填充，在使用設(shè)計(jì)元素時(shí)配色、圖標(biāo)、文本等需保持一致。

可適配：布局是可自適應(yīng)的，根據(jù)用戶在不同的設(shè)計(jì)環(huán)境下能夠通過交互動(dòng)效、界面樣式有效作出極致適配反應(yīng)。用戶操作后需給出即時(shí)反應(yīng)。

可控性：當(dāng)用戶看到界面時(shí)應(yīng)直觀有效傳遞內(nèi)容，如界面中模塊區(qū)域明確、內(nèi)容組織明確、表意明確都能使得用戶快速理解。界面需要簡(jiǎn)單直白，讓用戶快速識(shí)別，減少用戶記憶負(fù)擔(dān)。

3. 適配方案

在設(shè)計(jì)過程中，為了減少設(shè)計(jì)師們的日常溝通和理解成本，在設(shè)計(jì)內(nèi)部我們統(tǒng)一了一套設(shè)計(jì)畫板尺寸為 1280。經(jīng)過我們官方調(diào)研得出在中臺(tái)系統(tǒng)中用戶使用的電腦屏幕主流分辨率分別為：1440*900、1366*768、1920*1080、1280*800，而1280 是主流分辨率中最小且最為保險(xiǎn)的的一個(gè)尺寸，在設(shè)計(jì)頁(yè)面時(shí)設(shè)計(jì)師如果能夠在 1280 尺寸下，縮小寬度或拉升頁(yè)面寬度都能保證沒有遮擋或擠壓?jiǎn)栴}，那么設(shè)計(jì)是合理的。在我們的規(guī)范中頁(yè)面再小于 1280 時(shí)需要吊起系統(tǒng)的橫向滾動(dòng)條。在中臺(tái)系統(tǒng)中考慮到用戶效率問題很少做響應(yīng)式，所以常規(guī)情況下設(shè)計(jì)師會(huì)限定界面的一個(gè)最小值。如果設(shè)計(jì)師把畫板設(shè)置為 1440 或者 1366 時(shí)可能會(huì)存在其在畫板中頁(yè)面大小正好合適，但是頁(yè)面上線以后縮小瀏覽器可能會(huì)發(fā)生遮擋或擠壓的情況。所以我們建議設(shè)計(jì)師們使用 1280 寬度畫板畫圖。

4. 框架

首先先分析一下界面框架，我們將頁(yè)面的用戶操作行為進(jìn)行層級(jí)區(qū)分。我們至下而上將元素進(jìn)行層級(jí)分層，目的是把用戶界面模塊化。界面可分成背景區(qū)域、內(nèi)容層、全局控制層、內(nèi)容彈層，每一層都具備獨(dú)特性，將界面中所有的信息層級(jí)提取分類并且按結(jié)構(gòu)屬性分層，目的是能夠使得頁(yè)面視覺和交互邏輯符合用戶的習(xí)慣認(rèn)知。之前我們有提到過視覺層次、格式塔理論和信息框架，設(shè)計(jì)師在創(chuàng)建這一步的時(shí)候可以用來(lái)指導(dǎo)搭建一套合理的頁(yè)面信息層級(jí)，一個(gè)內(nèi)容模塊都屬于一個(gè)容器，容器可以承載各種內(nèi)容元素。

背景層

背景層樣式固定，在界面中永遠(yuǎn)置于界面底部，并且一般會(huì)給予背景層中性色，作用是方便突出內(nèi)容層和全局控制層。

內(nèi)容層

視圖結(jié)構(gòu)中最核心和復(fù)雜的一層，他與業(yè)務(wù)強(qiáng)相關(guān)，內(nèi)容層的容器承載了業(yè)務(wù)場(chǎng)景的用戶需要獲取的核心信息以及輔助核心任務(wù)的操作。容器承載了內(nèi)容，從 Material Design 中的 Elevation（海拔）概念中可以了解到，它屬于第二層級(jí)內(nèi)容，基本布局結(jié)構(gòu)有平行結(jié)構(gòu)或者父子結(jié)構(gòu)。如下圖卡片屬于容器，卡片中承載了數(shù)據(jù)圖表等內(nèi)容，整個(gè)卡片+內(nèi)容就屬于內(nèi)容層。

全局控制層

全局控制層我們定義他在內(nèi)容層之上，屬于頁(yè)面第三層級(jí)內(nèi)容，一般在業(yè)務(wù)場(chǎng)景中對(duì)整個(gè)網(wǎng)站的控制以及導(dǎo)航功能如：Header menu、Sidebar menu 組件，如下圖中 Header menu 浮在內(nèi)容層之上。

內(nèi)容彈層

當(dāng)前任務(wù)或者內(nèi)容相關(guān)的臨時(shí)出現(xiàn)層，優(yōu)先級(jí)高于內(nèi)容層，一般承載當(dāng)前需要臨時(shí)處理的任務(wù)或者需要進(jìn)行內(nèi)容補(bǔ)充說明等功能。如：Modal（Dialog 各個(gè)平臺(tái)叫法不一致）、Tooltip、Popover、Notification 等組件 。其中 Modal 是以滑出或者彈出的形式展現(xiàn)給用戶。Modal 它包括兩種類型，一種是模態(tài)內(nèi)容層不可操控，被蒙版遮罩禁用，比如在業(yè)務(wù)中需要較為聚焦的分支流程操作時(shí)使用。另一種是非模態(tài)，吊起彈出層后不印象內(nèi)容層操作。當(dāng)然，Tooltip、Popover、Notification 都屬于非模態(tài)，反饋較輕，不干擾用戶使用界面。如下圖的頁(yè)面中的內(nèi)容彈層使用了 Popover，在次頁(yè)面它的功能就是加以補(bǔ)充說明。

網(wǎng)格基礎(chǔ)

1. 單位

隨著科技高速發(fā)展，屏幕分辨率也越來(lái)越多樣化對(duì)于 UI/UX 設(shè)計(jì)師來(lái)講必須熟練的基本知識(shí)方便日常工作所需。首先我們先了解一下屏幕中的一些單位。

• 「PX」pixel，像素，大多數(shù)電子設(shè)備成像的基本單元，同樣尺寸的屏幕成像單元越細(xì)小、越密集的屏幕，分辨率就越高；
• 「PT」point，點(diǎn)，這個(gè)單位，就同時(shí)出現(xiàn)在 iOS、CSS、還有傳統(tǒng)的平面設(shè)計(jì)里，與 px 相比 px 是相對(duì)單位而 pt 絕對(duì)單位，如在設(shè)計(jì)稿中如果導(dǎo)出一倍圖 1px=1pt 那么導(dǎo)出二倍圖就是 2px=1pt，它是一個(gè)絕對(duì)長(zhǎng)度，為1/72英寸；
• 「PPI」pixel per inch，每英寸像素?cái)?shù)，決定電子設(shè)備的物理顯示尺寸，只有涉及到顯示才有意義。該值越高，則屏幕越細(xì)膩；
• 「DPI」dot per inch，與PPI一致，唯一區(qū)別是它表示每英寸多少點(diǎn)，該值越高，則圖片越細(xì)膩；
• 「DP」density-independent pixel，是安卓開發(fā)用的長(zhǎng)度單位，1dp等于屏幕像素密度為 160ppi 時(shí) 1px 的長(zhǎng)度，因此dp 在整個(gè)系統(tǒng)大小中是固定的。
• 「SP」scale-independent pixel，安卓開發(fā)用的字體大小單位，可以認(rèn)為 SP=DP。

2. 像素密度

在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能導(dǎo)致開發(fā)實(shí)現(xiàn)稿的視覺不符合設(shè)計(jì)師心理預(yù)期，比如：相同像素尺寸的 UI 元素在低密度屏幕上顯得較模糊，而在高密度屏幕上則比較清楚。同一物理尺寸（肉眼所見尺寸）下，低密度顯示器的像素個(gè)數(shù)明顯小于高密度顯示器的像素個(gè)數(shù)。

其實(shí)像素是與密度沒有關(guān)聯(lián)，我們簡(jiǎn)稱密度為 DP (讀作 DIP，英文全稱 Density-independent pixel )，它是可縮放的靈活單位，可在任何屏幕下現(xiàn)實(shí)相同的尺寸，如圖顯示，紅色網(wǎng)格為像素密度，被放大內(nèi)容為 UI 元素物理尺寸。

所以我們可以得出，DP 可以自適應(yīng)屏幕的密度，不管屏幕密度怎么變化，實(shí)際顯示的物理尺寸相同，DP 可以保證物理尺寸的一致性，所以 DP 是目前比較適合 UI 設(shè)計(jì)的單位。當(dāng)屏幕的密度為 160 的一個(gè)物理像素時(shí)，1PD=1PX。要計(jì)算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。

3. 網(wǎng)格

關(guān)于網(wǎng)格

網(wǎng)格線(Grid Line)，網(wǎng)格線又稱布局分割線，它是構(gòu)成網(wǎng)格結(jié)構(gòu)的分界線。一般在布局中它們是由行網(wǎng)格線和列網(wǎng)格線組成。如下圖是模擬網(wǎng)格做了一個(gè)示意，其中橘黃色兩根線分別是行網(wǎng)格線和列網(wǎng)格線。

網(wǎng)格軌道(Grid Track)，兩個(gè)相鄰網(wǎng)格線之間的空間。你可以把它們想像成網(wǎng)格的行或列。如下圖橘黃色的行網(wǎng)格線和列網(wǎng)格線之間的空間既是網(wǎng)格軌道。

網(wǎng)格單元格(Grid Cell)，兩個(gè)相鄰的行網(wǎng)格線和兩個(gè)相鄰的列網(wǎng)格線之間的空間屬于網(wǎng)格單元格。這是網(wǎng)格系統(tǒng)的一個(gè)「單元」。如下圖橘黃色的行網(wǎng)格線和列網(wǎng)格線交叉處即是網(wǎng)格單元格。

網(wǎng)格區(qū)域(Grid Area)，由單個(gè)或多個(gè)網(wǎng)格單元格組成，它是可以用來(lái)擺放頁(yè)面元素。如下圖所示，橘黃色的行網(wǎng)格線和列網(wǎng)格線交叉處即是網(wǎng)格區(qū)域。

網(wǎng)格設(shè)置

在設(shè)計(jì)界面時(shí)可以通過網(wǎng)格定制能夠使界面更加有序、整齊、規(guī)范，網(wǎng)格的主要用途之一是保持設(shè)計(jì)元素對(duì)齊和排序。通過建立一個(gè)網(wǎng)格系統(tǒng)，設(shè)計(jì)師可以為自己創(chuàng)建一個(gè)結(jié)構(gòu)來(lái)適配不同的屏幕寬度。

在我制定的規(guī)范中一般會(huì)把網(wǎng)格的基數(shù)設(shè)置為 4，它不僅符合偶數(shù)的思路同時(shí)也能夠匹配多數(shù)主流的顯示設(shè)備，如中臺(tái)系統(tǒng)的用戶主流分辨率用 1440*900、1366*768、1280*800。我們可以通過設(shè)置網(wǎng)格規(guī)范幫助設(shè)計(jì)師快速搭建頁(yè)面，使用有律可循的布局空間的設(shè)計(jì)給到開發(fā)減少溝通成本。下圖所示設(shè)計(jì)布局網(wǎng)格由三個(gè)元素組成：列寬，間距，邊距。

在 Sketch 中設(shè)置網(wǎng)格，在菜單欄中找「視圖」-「畫布」-「網(wǎng)格設(shè)置」-彈出浮層可設(shè)置網(wǎng)格大小，網(wǎng)格設(shè)置的基數(shù)設(shè)置成4，之后在設(shè)計(jì)界面時(shí)可按照網(wǎng)格基礎(chǔ)的倍數(shù)作為組件的大小和頁(yè)面元素間距分割，如下圖：

我們放大頁(yè)面局部大家可以看到，把網(wǎng)格基數(shù)設(shè)置成 4，每個(gè)網(wǎng)格單元格為 4*4 大小。同理，如果把網(wǎng)格基數(shù)設(shè)置成 8 以后，每個(gè)網(wǎng)格單元格大小為 8*8 大小。

定義布局模塊

界面框架內(nèi)系統(tǒng)布局是頁(yè)面所有模塊的組合方式，我們定義一個(gè)頁(yè)面框架中基礎(chǔ)模塊和內(nèi)容模塊的數(shù)量最好不超過 3 個(gè)。經(jīng)過調(diào)研和歸納總結(jié)出 3 大布局類型，分別是上下布局、左右布局、T 字型布局。

1. 上下布局

上下布局布局是 Web 端運(yùn)用最廣泛的布局方式之一，頁(yè)面內(nèi)容區(qū)以 feed 流形式展現(xiàn)，一般用在 Web 端官網(wǎng)首頁(yè)。設(shè)計(jì)師普遍做法是對(duì)兩邊留白區(qū)域?yàn)閮?nèi)容區(qū)并進(jìn)行最小值的定義，一般定義值為 1200 較多（具體寬度要設(shè)計(jì)師如何設(shè)置柵格，后面會(huì)講到如何設(shè)置柵格），當(dāng)留白區(qū)域到達(dá)極小超過極限值之后需要對(duì)中間的內(nèi)容區(qū)域進(jìn)行動(dòng)態(tài)縮放或遮擋，此邏輯需設(shè)計(jì)師根據(jù)業(yè)務(wù)所需而定。也有少部分設(shè)計(jì)師會(huì)設(shè)計(jì)成全屏布局，內(nèi)容隨瀏覽器寬度自適應(yīng)。

其優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰簡(jiǎn)單，強(qiáng)突出內(nèi)容區(qū)，但缺點(diǎn)是布局的規(guī)矩呆板，變化少。設(shè)計(jì)師如果不注意合理的視覺元素和色彩細(xì)節(jié)變化，用戶很容易感覺到乏味，此布局適用于層級(jí)較為簡(jiǎn)單頁(yè)面。

巨量引擎（Ocean Engine）是字節(jié)跳動(dòng)旗下的營(yíng)銷服務(wù)品牌，整合了今日頭條、抖音短視頻、火山小視頻、西瓜視頻、懂車帝、Faceu 激萌、輕顏、穿山甲等產(chǎn)品的營(yíng)銷能力，為全球廣告主提供綜合的數(shù)字營(yíng)銷解決方案。我在設(shè)計(jì)此官網(wǎng)時(shí)正是采用了上下布局作為頁(yè)面布局，頂部導(dǎo)航整合了所有子頁(yè)面的內(nèi)容，導(dǎo)航下方為主要內(nèi)容區(qū)并且內(nèi)容定寬，當(dāng)時(shí)采用此布局原因第一是因?yàn)榇喂倬W(wǎng)層級(jí)較簡(jiǎn)單只有三個(gè)層級(jí)內(nèi)容，第二是官網(wǎng)更需要的是突出內(nèi)容區(qū)，所有頁(yè)面使用次布局更為合適。

2. 左右布局

設(shè)計(jì)師在設(shè)計(jì)重內(nèi)容，輕導(dǎo)航類型網(wǎng)站是常用左右布局作為基礎(chǔ)框架進(jìn)行頁(yè)面設(shè)計(jì)。此布局把系統(tǒng)頁(yè)面分為兩大模塊，其中設(shè)計(jì)師常見的做法是將左側(cè)設(shè)置成導(dǎo)航欄模塊并且固定，常常用來(lái)控制全局內(nèi)容。而右側(cè)區(qū)域設(shè)置成工作區(qū)域或內(nèi)容區(qū)，內(nèi)容區(qū)可進(jìn)行動(dòng)態(tài)縮放。

下圖為飛書溝通窗口截圖，由于關(guān)系到內(nèi)部信息保密性我把內(nèi)容進(jìn)行了模糊，從外觀結(jié)構(gòu)上看還是能大致了解飛書結(jié)構(gòu)是采用了左右布局，整個(gè)布局結(jié)構(gòu)清晰有理也是符合左右布局特點(diǎn)。從交互體驗(yàn)分析左側(cè)屬于導(dǎo)航區(qū)，它承載了不同功能并且固定。飛書屬于即時(shí)溝通產(chǎn)品設(shè)計(jì)師考慮到瀏覽器窗口有限所以對(duì)導(dǎo)航設(shè)計(jì)成較小模塊，而右邊為聊天窗口對(duì)于業(yè)務(wù)屬性分析它更為重要，所以模塊較大。其導(dǎo)航欄固定，內(nèi)容區(qū)可進(jìn)行動(dòng)態(tài)縮放。

3. T字型布局

T 字型布局常用在 Web 端的中臺(tái)系統(tǒng)中，因?yàn)橹信_(tái)系統(tǒng)業(yè)務(wù)結(jié)構(gòu)復(fù)雜、層級(jí)多，而 T 字型布局能夠解決復(fù)雜結(jié)構(gòu)的問題。使用此結(jié)構(gòu)能夠把頁(yè)面結(jié)構(gòu)清晰化，主次更加分明。設(shè)計(jì)師常常的做法是將頂部作為一級(jí)導(dǎo)航欄方便控制全局，二左邊設(shè)計(jì)成是二級(jí)導(dǎo)航并且固定導(dǎo)航欄固定，右邊的內(nèi)區(qū)域可進(jìn)行動(dòng)態(tài)縮放（一般會(huì)把其設(shè)計(jì)成柵格動(dòng)態(tài)區(qū)域），內(nèi)容隨瀏覽器寬度自適應(yīng)。

下圖是 Material Design 設(shè)計(jì)文檔，首先簡(jiǎn)單介紹一下 Material Design，它是由谷歌的設(shè)計(jì)團(tuán)隊(duì)創(chuàng)建的一種語(yǔ)言，宗旨是幫助設(shè)計(jì)師們創(chuàng)建易用性和實(shí)用性較強(qiáng)的網(wǎng)站和應(yīng)用程序，其設(shè)計(jì)理念是將現(xiàn)實(shí)中的物理學(xué)帶入進(jìn)設(shè)計(jì)中。Material Design 設(shè)計(jì)文檔中的結(jié)構(gòu)使用了 T 字型布局作為基礎(chǔ)布局。頁(yè)面分為了三個(gè)模塊，其中頂部導(dǎo)航作為頁(yè)面一級(jí)內(nèi)容進(jìn)行全局控制，接下來(lái)左邊為側(cè)邊導(dǎo)航作為二級(jí)內(nèi)容控制頁(yè)面，右邊是內(nèi)容區(qū)滿足用戶使用瀏覽。從放眼望去整個(gè)頁(yè)面架構(gòu)清晰明了。

4. 小結(jié)

以上為 Web 最常見的三大布局，但是需要大家在實(shí)際的工作中靈活運(yùn)用。設(shè)計(jì)師在日常工作中可能會(huì)遇到更為特殊的業(yè)務(wù)場(chǎng)景，設(shè)計(jì)師可以通過整理基礎(chǔ)模塊然后分析其業(yè)務(wù)的信息框架，將模塊進(jìn)行相互組合、嵌套歸納可以總結(jié)出更多的 Web端布局框架并落地到業(yè)務(wù)中。

網(wǎng)頁(yè)柵格

剛剛在定義布局模塊中已經(jīng)分析過了三大布局類型，接下要分享的是 UI 設(shè)計(jì)師更為關(guān)注內(nèi)容「網(wǎng)頁(yè)柵格」。網(wǎng)頁(yè)柵格也是設(shè)計(jì)師口中常常提及的柵格系統(tǒng)。其實(shí)網(wǎng)頁(yè)柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來(lái)，它延續(xù)了平面設(shè)計(jì)的方法與風(fēng)格，在網(wǎng)頁(yè)中使用柵格能夠使得網(wǎng)頁(yè)信息展現(xiàn)更加清晰明了、美觀易讀。

首先網(wǎng)頁(yè)柵格系統(tǒng)基本由是柵格總寬度/頁(yè)面總寬度（W）、一個(gè)柵格的寬度（a）、柵格與柵格之間的間隙（i）、一個(gè)單元的寬度（A）、外邊距（M）組成。

1. 列寬

一個(gè)柵格的寬度（a），我們稱之為列寬，一個(gè)列寬包涵了N個(gè)網(wǎng)格單元格（Grid Cell）我們也可以把它看成一個(gè)網(wǎng)格區(qū)域(Grid Area)，在上面我們已經(jīng)講到過網(wǎng)格的內(nèi)容，主要目的正是為柵格做鋪墊。其中我把一個(gè)網(wǎng)格單元格設(shè)置為4（原因在網(wǎng)格中也解釋過，如果忘記的同學(xué)可以爬樓看下）。由此可見列寬非固定值，這樣可以使內(nèi)容自由適配任何屏幕尺寸。在柵格中列寬由屏幕尺寸決定。

2. 水槽

柵格與柵格之間的間隙（i），我們稱之為水槽，一個(gè)水槽寬度大于等于1個(gè)網(wǎng)格單元（Grid Cell）。在柵格中水槽為一個(gè)定值，寬度可以是N個(gè)網(wǎng)格單元，如網(wǎng)格單元格設(shè)置成4，那么水槽可以是4、8、12、16…N*4。

3. 柵格單元

1個(gè)列寬+1個(gè)水槽寬度即一個(gè)單元的寬度，一個(gè)柵格總寬是由N個(gè)柵格單元組成，次寬度不固定，由屏幕尺寸決定。

4. 柵格總寬

列寬+水槽再成以N即是一個(gè)柵格的總寬，公式為：W=(A*n)-i。

5. 柵格設(shè)置

經(jīng)過調(diào)研我們得出常見的柵格分為 12 列柵格系統(tǒng)和 24 列柵格系統(tǒng)。其中 12 列柵格系統(tǒng)在流行的前端開發(fā)開源工具庫(kù)Bootstrap 與 Foundation 中廣泛使用，適用于業(yè)務(wù)信息分組較少、業(yè)務(wù)結(jié)構(gòu)較簡(jiǎn)，單個(gè)盒子內(nèi)信息體積較大的中后臺(tái)頁(yè)面設(shè)計(jì)。24 等分的柵格系統(tǒng)適用于業(yè)務(wù)信息量大、信息分組較多、單個(gè)盒子內(nèi)信息體積較小的中后臺(tái)頁(yè)面設(shè)計(jì)；相對(duì) 12 柵格系統(tǒng)，24 柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場(chǎng)景。如下圖分別是 12 柵格系統(tǒng)（左）和 24 柵格系統(tǒng)（右）。

6. 小結(jié)

在柵格系統(tǒng)結(jié)合布局結(jié)構(gòu)和網(wǎng)格做了我做了一些知識(shí)結(jié)合，其實(shí)前面所講的網(wǎng)格版塊和布局版塊都是為柵格做一個(gè)鋪墊，利于同學(xué)們更加深入的了解網(wǎng)格、布局、柵格三者的關(guān)系。

寫在最后

系統(tǒng)布局只是網(wǎng)頁(yè)中的基礎(chǔ)部分，但也是核心內(nèi)容，一個(gè)產(chǎn)品布局需要根據(jù)其業(yè)務(wù)屬性決定。布局搭的好相當(dāng)?shù)鼗虻煤茫峭瑫r(shí)在對(duì)美感的追求之上，還應(yīng)當(dāng)結(jié)合可用性來(lái)看待設(shè)計(jì)。在實(shí)際的工作中肯定還會(huì)遇到各種形形色色較奇葩的需求，所以希望這篇文章能夠做的不是限制而是啟發(fā)，大家可根據(jù)此次分享內(nèi)容能夠進(jìn)行舉一反三利用到實(shí)際的工作當(dāng)中。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

版式設(shè)計(jì)是大部分設(shè)計(jì)師再熟悉不過的一個(gè)詞了，市面上很多文章都有普及過各種版式設(shè)計(jì)知識(shí)，比如：印刷中的版式設(shè)計(jì)、移動(dòng)界面中的版式設(shè)計(jì)等等。但是在我做中臺(tái)規(guī)范時(shí)調(diào)研發(fā)現(xiàn)針對(duì)中臺(tái)系統(tǒng)文字規(guī)范內(nèi)容科普的知識(shí)較少，可能是中后臺(tái)設(shè)計(jì)在國(guó)內(nèi)還是處于初級(jí)階段吧。所以結(jié)合調(diào)研內(nèi)容到實(shí)際工作中的總結(jié)給大家分享關(guān)于Web端文字系統(tǒng)的相關(guān)內(nèi)容。

加拿大印刷術(shù)家羅伯特·布林赫斯特（Robert Bringhurst）在他撰寫的《印刷風(fēng)格的元素》一書中將印刷術(shù)定義為以持久的視覺形式賦予人類語(yǔ)言的技藝。在中臺(tái)界面文字排版的易讀性、美觀度是設(shè)計(jì)師的首要任務(wù)，要?jiǎng)?chuàng)建閱讀性高和較美觀的中臺(tái)界面文字排版是設(shè)計(jì)師們必須學(xué)習(xí)的基礎(chǔ)知識(shí)之一。因?yàn)椴徽撛贏pp界面還是Web網(wǎng)頁(yè)設(shè)計(jì)中文字內(nèi)容總是能占到整個(gè)版面的80%～90%的區(qū)域，好的文字排版能夠大大提高用戶的使用效率。所以本篇文章將站在一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的角度分享Web端界面中文字系統(tǒng)的基礎(chǔ)知識(shí)，從基本網(wǎng)頁(yè)中的系統(tǒng)字體初識(shí)、字體排版基礎(chǔ)理論、國(guó)際化文字適配，希望大家能夠合理運(yùn)用在中臺(tái)界面的版式中。

內(nèi)容概覽

網(wǎng)頁(yè)字體應(yīng)用發(fā)展

1、網(wǎng)頁(yè)排版初期

1990年12月25日，英國(guó)計(jì)算機(jī)科學(xué)家蒂莫西·約翰·伯納斯-李爵士（Tim Berners-Lee）成功發(fā)明了萬(wàn)維網(wǎng)，并弄清了統(tǒng)一資源定位符（URL），其中超文本傳輸協(xié)議（HTTP）和超文本標(biāo)記語(yǔ)言（HTML）的概念后，他在Internet上發(fā)布了第一個(gè)網(wǎng)站。自從Internet發(fā)明以來(lái)，字體在Web上扮演著重要角色。1990年至今，網(wǎng)絡(luò)已經(jīng)徹底改變了我們的生活方式和工作方式。在最初的20年中，Web經(jīng)歷了許多變化，例如采用Web標(biāo)準(zhǔn)，使用CSS進(jìn)行布局以及處理動(dòng)態(tài)數(shù)據(jù)。雖然網(wǎng)絡(luò)從一開始就包含文本，但直到最近幾年它們才得到很好的應(yīng)用。

在1990年代中期，英國(guó)字型大師馬修·卡特（Matthew Carter）設(shè)計(jì)的Georgia和Verdana兩款字體廣泛用在基于屏幕的網(wǎng)頁(yè)中。為了使字體在當(dāng)時(shí)分辨率較低的屏幕上清晰易讀，馬修·卡特設(shè)計(jì)的這些字體具有X高度大、開孔寬敞的字體空間。由Microsoft專門針對(duì)網(wǎng)頁(yè)上的文本進(jìn)行處理，Georgia和Verdana首先在位圖中進(jìn)行設(shè)計(jì)，以適配當(dāng)時(shí)網(wǎng)頁(yè)屏幕的分辨率，最后把文字轉(zhuǎn)換為輪廓字體，進(jìn)行文字圖形化。

1990年代到2000年代中期是網(wǎng)頁(yè)設(shè)計(jì)的一段過渡時(shí)期網(wǎng)頁(yè)更加圖形化，系統(tǒng)默認(rèn)自帶的字體如：Georgia、Verdana、Arial、Helvetica、Times New Roman已經(jīng)滿足不了設(shè)計(jì)師們的設(shè)計(jì)需求。設(shè)計(jì)師們必須使用Photoshop和Illustrator等相關(guān)工具將一些特殊字體的每一段文本切成圖偏提供給開發(fā)人員，但是這種方式有著很多弊端，問題主要集中于本文不可選擇、復(fù)制、翻譯甚至是不可搜索。其中newyorker.com可作為典型代表，其網(wǎng)站在使用Typekit（可提供其自定義字體庫(kù)）之前，為了讓網(wǎng)頁(yè)與原印刷出版物保持一致，便使用了切圖方式將特殊定制化文本進(jìn)行切圖處理，直到該該公司2010年11月開始使用Typekit自定義字體庫(kù)后才解決字體圖形化這種耗時(shí)耗力的方式。

2、自定義字體庫(kù)“Typekit”

在上面提到了在Jeff Veen還未創(chuàng)立字體服務(wù)Typekit之前，很多時(shí)候系統(tǒng)自帶的幾種字體滿足不了設(shè)計(jì)師需求，所以設(shè)計(jì)師們使用文本轉(zhuǎn)圖片的技術(shù)進(jìn)行處理。為了解決這些問題肖恩·英曼（Shaun Inman）2004年開發(fā)了SIFR，雖然SIFR解決了圖片切圖問題，但其中也還是有一些問題存在，比如，太過依賴Flash，并且設(shè)置SIFR還需要掌握大量的相關(guān)知識(shí)，門檻較高。2009年Simo Kinnunen又將技術(shù)改進(jìn)稱為Cufón，他使用canvas和VML快速替換文本，無(wú)需Flash或圖像。Cufón由兩部分組成：一個(gè)字體生成器（將字體轉(zhuǎn)換為專有格式）和一個(gè)用JavaScript編寫的渲染引擎。雖然文本圖片轉(zhuǎn)化技術(shù)一直在不斷完善中，但是歸根結(jié)底文本圖片轉(zhuǎn)化技術(shù)并不是網(wǎng)頁(yè)中的文字排版。

直到2009年Jeff Veen離開了Google并且同一年創(chuàng)立了字體在線服務(wù)Typekit，極大的豐富了設(shè)計(jì)們的字體選擇。2011年Adobe收購(gòu)Typekit（也就是現(xiàn)在Adobe Fonts），并且Jeff Veen也因此成為Adobe產(chǎn)品的副總裁，負(fù)責(zé)Creative Cloud業(yè)務(wù)，負(fù)責(zé)Adobe旗下幾乎所有產(chǎn)品的在線體驗(yàn)。

3、可變字體

可變字體指的是一個(gè)字體默認(rèn)狀態(tài)進(jìn)行多個(gè)樣式擴(kuò)展，他是一種含有多種變化的單一字體：即所有字寬和粗細(xì)、甚至是斜體的變化都可以包含在一個(gè)單一、高效且可壓縮的字體文件中。比如說PingFang SC，如果在系統(tǒng)上使用，同時(shí)包含了六種字重：常規(guī)體、中等、細(xì)體、特粗體、特細(xì)體、粗體。

可變字體是由Adobe, Apple, Google, Microsoft四大巨頭在20016年9月聯(lián)合在波蘭華沙的ATypI會(huì)議上宣布的Variable Font的字體規(guī)格OpenType，OpenType特點(diǎn)在于可將多個(gè)字體打包成一個(gè)字體，并且不會(huì)增大字體文件包的大小。他解決了某單個(gè)字體文件可以獲取各種粗細(xì)，寬度，高度，樣式和其他屬性的問題，具有靈活性?？勺冏煮w為Web上的排版提供了一個(gè)跨時(shí)代的變化。目前排版軟件廠商、字體設(shè)計(jì)師、字體廠商都積極地大量投入可變自己提的研究和開發(fā)設(shè)計(jì)，并且廣泛運(yùn)用在操作系統(tǒng)和印刷行業(yè)。

目前在主流的操作系統(tǒng)、瀏覽器、設(shè)計(jì)軟件都在不同程度上支持可變字體。像操作系統(tǒng)，Mac os、iOS、Android、Wear OS、Fuchsia。瀏覽器Safari、Chrome、Edge、Firefox。設(shè)計(jì)界最為熟知的圖像編輯工具Photoshop、Illustrator、Sketch、Figma也已支持可變字體，設(shè)計(jì)師可以使用該設(shè)計(jì)工具進(jìn)行同款字體不同樣式的使用。

舉個(gè)比較比較典型的例子，在2019年9月小米推出了全新的 MIUI 11 系統(tǒng)，并帶來(lái)了小米蘭亭Pro動(dòng)態(tài)字體系統(tǒng)，小米蘭亭Pro字體聯(lián)合方正字庫(kù)聯(lián)合開發(fā)。在 MIUI 11操作系統(tǒng)中，用戶可以通過系統(tǒng)設(shè)置進(jìn)入字體模塊，拖動(dòng)相應(yīng)滑塊即可改變手機(jī)界面用字的字體大小和字重粗細(xì)。MIUI動(dòng)態(tài)字體支持文字粗細(xì)無(wú)級(jí)調(diào)節(jié)，每個(gè)人都可找到適合自己的字重，下圖是MIUI 11系統(tǒng)中可變字體的演示：

網(wǎng)頁(yè)中的字體

1、字體工具推薦

字體是體系化界面設(shè)計(jì)中最基本的構(gòu)成之一，選擇字體是一個(gè)具有創(chuàng)造性和情感的過程，因?yàn)椴煌淖煮w傳達(dá)出不同的情感。在制定用戶界面規(guī)范時(shí)科學(xué)的定義字體規(guī)范系統(tǒng)，不僅能夠有效的表達(dá)出不同的設(shè)計(jì)風(fēng)格，還能通過定義字體的字族、字階、字重、字體顏色、字體行高，有效幫助設(shè)計(jì)師在設(shè)計(jì)界面時(shí)使用字體達(dá)到統(tǒng)一性和整體性，保證界面有良好的閱讀體驗(yàn)。首先，先為大分享一些非常實(shí)用的字體網(wǎng)站。

1.1 Adobe Font

第一個(gè)我要推薦的是Adonbe旗下的Adobe Font，網(wǎng)站中有非常多優(yōu)秀的字體。但是網(wǎng)站字體需要收費(fèi)，一般是按照使用量的形式進(jìn)行支付版權(quán)費(fèi)，特點(diǎn)是可設(shè)置屬性進(jìn)行字體樣式實(shí)時(shí)預(yù)覽，并且字體比較全。

1.2 Google Fonts 

在Google Fonts，你可以免費(fèi)下載你喜歡的字體，并且按照你的需要在項(xiàng)目中使用。由于在系統(tǒng)中使用其他字體的唯一方法就是將字體文件導(dǎo)入到系統(tǒng)中，因此Google Fonts的下載功能非常有用。Google Fonts包含超過1400種不同的字體，其中包含最著名的：Open Sans和Roboto字體，他們是Android系統(tǒng)使用的默認(rèn)字體。

1.3 求字體網(wǎng)

設(shè)計(jì)師在做設(shè)計(jì)時(shí)常常會(huì)遇到某些網(wǎng)站或海報(bào)使用的字體特別喜歡，但是苦惱無(wú)法獲取改字體的信息導(dǎo)致無(wú)法下載使用，求字體網(wǎng)解決了此痛點(diǎn)。你可以將喜歡的字體進(jìn)行截圖并上傳到網(wǎng)站進(jìn)行字體識(shí)別，確定后他會(huì)提供出字體下載鏈接或者字體信息，解決設(shè)計(jì)師們喜歡某個(gè)字體而找不到的煩惱。

1.4 字由

字由也是我比較推薦的一個(gè)字體網(wǎng)站，個(gè)人用的也會(huì)比較多。官網(wǎng)將全部字體進(jìn)行整理分類方便用戶快捷尋找字體，并且有個(gè)分類是免費(fèi)商用字體庫(kù)，避免了常常困惑的設(shè)計(jì)師使用字體導(dǎo)致版權(quán)糾紛問題。此有網(wǎng)站有兩大亮點(diǎn)，第一是此網(wǎng)站在設(shè)計(jì)師選用字體時(shí)有個(gè)實(shí)際運(yùn)用預(yù)覽效果，直觀的看到字體在實(shí)際使用效果，第二是網(wǎng)站提供客戶端下載，在客戶端中點(diǎn)擊下載以后可直接進(jìn)行在設(shè)計(jì)工具中直接使用。

2、如何定義系統(tǒng)“字族”

在選用系統(tǒng)字體時(shí)需要考慮在不同系統(tǒng)的兼容性，大家都知道在不同的操作系統(tǒng)及不同的游覽器中默認(rèn)顯示的字體是不一樣的，并且相同字體在不同操作系統(tǒng)里面渲染的效果也不盡相同。在做字體規(guī)范時(shí)需要提供一套系統(tǒng)完整的字族，里面不僅需要包含系統(tǒng)默認(rèn)的界面字體，還需要一套有利于屏幕顯示的備用字體，方便維護(hù)不同系統(tǒng)及瀏覽器的實(shí)現(xiàn)，保證在任何場(chǎng)景保持良好的閱讀性和可讀性，下面是我在做界面規(guī)范時(shí)與相關(guān)同學(xué)一起選取的界面字體。

第一部分：-apple-system是在以WebKit為內(nèi)核的瀏覽器，比如蘋果的Safari中調(diào)用蘋果系統(tǒng)macOS、iOS、watchOS、tvOS中默認(rèn)字體，目前一般情況下英文使用的是San Francisco，中文使用的是PingFang。BlinkMacSystemFont是在Chrome中調(diào)用蘋果系統(tǒng)的字體。

第二部分：主要是提供了Windows和MacOS下的字體。其中Segoe UI針對(duì)Windows and Windows Phone等系統(tǒng)。PingFang  SC是蘋果為中國(guó)用戶打造了一款全新中文字體，整體樣式看上去更加簡(jiǎn)潔，字族共6個(gè)字體：極細(xì)體、纖細(xì)體、細(xì)體、常規(guī)體、中黑體、中粗體。Hiragino Sans GB是是Hiragino KakuGothic的簡(jiǎn)體中文版，由日本設(shè)計(jì)師為MacOS和iOS系統(tǒng)中內(nèi)置字體，簡(jiǎn)體中文有常規(guī)體和粗體兩種，冬青黑體是一款清新的專業(yè)印刷字體，其小字在屏幕顯示時(shí)足夠清晰，擁有很多用戶的追捧。Microsoft YaHei是從Vista開始，微軟提供了這款新的字體，它是一款無(wú)襯線的黑體類字體，并且擁有Regular、Bold兩種粗細(xì)的字重，字重有效提高了字體的層級(jí)顯示效果。目前這款字體已經(jīng)成為Windows游覽器中最值得使用的中文字體。從Win8開始，微軟雅黑又加入了Light這款更細(xì)的字重，對(duì)于喜歡細(xì)字體的設(shè)計(jì)或開發(fā)人員又多了一個(gè)新的選擇。

第三部分：主要是系統(tǒng)備用兜底字體，Helvetica Neue在沒有El Capitan versions系統(tǒng)的電腦中是最流行的，所以作為兜底，sans-serif也是常見的兜底字體；

第四部分：主要是系統(tǒng)的emoji，在我們的規(guī)范中選用了'Apple Color Emoji',  'Segoe UI Emoji', 'Segoe UI Symbol' 針對(duì)在macOS和Windows顯示emoji。

3、如何定義字體規(guī)范

在設(shè)計(jì)規(guī)范系統(tǒng)中字體是用戶體驗(yàn)相當(dāng)重要的一部分，因?yàn)椴徽撛贏pp界面還是Web網(wǎng)頁(yè)設(shè)計(jì)中，不同的系統(tǒng)分辨率、不同的顯示器尺寸、不同的DPI都會(huì)對(duì)最終展現(xiàn)的文字大小帶來(lái)影響，并且文字在內(nèi)容區(qū)總是能占到整個(gè)版面的80%～90%的區(qū)域，所以要根據(jù)用戶使用電腦的分辨率給予用戶一個(gè)比較合適的默認(rèn)字號(hào)。那么這個(gè)字號(hào)多大合適呢？是12px、13px、14px還是15px比較合適呢，所以我們回到這個(gè)老生常談的問題進(jìn)行分析。

3.1 定義默認(rèn)字體大小

在做規(guī)范時(shí)調(diào)研了在市面上各大較流行的網(wǎng)站，目前大部分文本類字體大小都采用了12px-14px范圍的文字大小。另外Windows自帶的點(diǎn)陣宋體從Vista開始只提供12px、14px、16px三個(gè)大小的點(diǎn)陣。所以，如果13px、15px、17px雖然每個(gè)字的空間大了1px但是點(diǎn)陣卻沒變，從視覺上會(huì)顯得略稀疏，可能導(dǎo)致顯示效果不佳。偶數(shù)字號(hào)的文字，比如12px的“中”字，去掉1像素的間距，填充了像素的實(shí)際寬是11px，文字的中豎線左右是平分的顯得均衡，具有美感。如下圖所示：

但是也有少部分網(wǎng)站使用基數(shù)作為文本大小，比如知乎正文使用15px，豆瓣首頁(yè)標(biāo)題下面的的簡(jiǎn)介文字使用的13px大小，我簡(jiǎn)單的分析了一下，知乎在改版之前文本類內(nèi)容用的13pt大小的可能是有用戶吐槽頁(yè)面文字太過于密集后來(lái)統(tǒng)一改成了15pt，知乎和花瓣頁(yè)面雖然使用的是基數(shù)但是整體效果還算不錯(cuò)。不過為了字體使用更加的“安全”還是推薦偶數(shù)作為文本規(guī)范。

還有些因素會(huì)比較推薦用偶數(shù)，比如說從瀏覽器角度上看，因?yàn)槟承╇娔X的瀏覽器上如在IE6瀏覽器會(huì)把基數(shù)的字號(hào)自動(dòng)渲染成偶數(shù)系。在一些畫圖軟件如Figma、Sketch、Photoshop等一些畫圖軟件在設(shè)置字體大小屬性時(shí)從12px以上都是采用偶數(shù)進(jìn)行快捷選擇，這也形成了一種常見的習(xí)慣。

在文字規(guī)范時(shí)也借鑒了設(shè)計(jì)界大佬AntDesign的規(guī)范，Ant Design 3.0 的時(shí)候，對(duì)主字號(hào)進(jìn)行了研究，飲用AntDesign的解釋“我們基于電腦顯示器閱讀距離（50 cm）以及最佳閱讀角度（0.3）對(duì) Ant Design 的主字體進(jìn)行了一次升級(jí)，從原先的 12 上升至 14，以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳。”

同時(shí)我們也站在電腦屏幕分辨率也有過調(diào)研，在上一篇分享分享的系統(tǒng)布局中也提到了，目前大部分中臺(tái)系統(tǒng)中用戶使用的電腦屏幕主流分辨率分別為1440*900、1366*768、1920*1080、1280*800，因此在這些主流電腦分辨率中經(jīng)過實(shí)驗(yàn)，14px小大的文字效果以及閱讀體驗(yàn)會(huì)比12px更加的舒適，并且內(nèi)容會(huì)更加的清晰。

總結(jié)以上幾點(diǎn)分析我們得出，在界面中使用偶數(shù)會(huì)比基數(shù)更加的美觀、安全，也比較利于設(shè)計(jì)師的使用習(xí)慣，并且在糾結(jié)使用12px還是14px字體大小的很長(zhǎng)一段時(shí)間里我們經(jīng)過調(diào)研競(jìng)品以及進(jìn)行不同屏幕分辨率下字號(hào)的實(shí)驗(yàn)最后確定我們字號(hào)使用14px正常文本大小，12px可作為輔助文字使用。

3.2 行寬

行寬是指一行字的長(zhǎng)度，那么在用戶界面排版中我們使用多少行寬比較合適呢？引用Fusion Design的解釋“從生理結(jié)構(gòu)分析，人在閱讀文字的時(shí)候，理解并傳遞到大腦的信息是有限的。用戶在閱讀時(shí)，目光左右上下巡視、掃描和閱讀，這意味著閱讀要求大量的眼球運(yùn)動(dòng)。行寬越長(zhǎng)，眼睛移動(dòng)的距離太長(zhǎng)太多。寬度較大，眼動(dòng)位移較大，讀者閱讀換行時(shí)容易串行。行寬越短，眼睛閱讀折行的次數(shù)太多。行數(shù)較多，眼動(dòng)跳躍次數(shù)多，讀者閱讀行時(shí)會(huì)感覺到文字不連續(xù)?！彼栽诓僮鹘缑嬷斜苊膺^長(zhǎng)、行數(shù)較多的文字，閱讀是大腦活動(dòng)中一種最復(fù)雜的過程，比如說在操作系統(tǒng)中界面操作較復(fù)雜，如果出現(xiàn)大段的文字用戶不僅要操作復(fù)雜的系統(tǒng)，還需要進(jìn)行閱讀理解大大降低了用戶的使用效率。

加拿大印刷大師羅伯特·布林赫斯特（Robert Bringhurst）有一個(gè)算法是：行寬=字號(hào)x30，例如：設(shè)置字號(hào)為14px大小，那么我們建議其基礎(chǔ)行寬是420px左右。中文一個(gè)字體寬度是14px，那么建議一行建議30個(gè)文字。注：在文字寬度規(guī)范時(shí)，為了考慮國(guó)際化的適配，避免多語(yǔ)言差異我們不以文字個(gè)數(shù)作為度量單位，而是以整個(gè)行寬來(lái)計(jì)算，比如說表單Title、Table。

3.3 行高

行高是指在多行里面一行文字與另一行文字之間的的間距，每行文字占用空間的高度。我們定義行距(行高) = 字號(hào) + 行間距，而不是單指字體高度，所以文字的高度不等于字號(hào)的高度，如：字號(hào)12px，行高為22px，根據(jù)Web頁(yè)面平均分配原則，行距就是從文字的頂端上移4px到文字底部下移4px的距離。如下圖所示：

網(wǎng)頁(yè)中版式原理

1、視覺層級(jí)

在頁(yè)面布局分享有提過視覺層次，因?yàn)橐曈X層次是設(shè)計(jì)過程中的核心方法之一，對(duì)于中臺(tái)的UI設(shè)計(jì)師們而言，良好的理性思維相對(duì)比感性的視覺思維更加重要，因?yàn)樵赨I設(shè)計(jì)師設(shè)計(jì)界面時(shí)需要把界面中很多互不相關(guān)的元素有秩序的組織在一起，正確引導(dǎo)用戶操作與使用。那么什么是視覺層次呢？官方概括：視覺層次結(jié)構(gòu)致力于一種用戶能夠理解的方式呈現(xiàn)產(chǎn)品的內(nèi)容，以便用戶可以理解每個(gè)元素的重要性級(jí)別。它可以組織頁(yè)面內(nèi)容，以便大腦可以根據(jù)物理差異例如：大小，顏色，對(duì)比度，樣式等區(qū)分對(duì)象。

視覺層次中的“層次”其實(shí)講的是在設(shè)計(jì)用戶界面過程中設(shè)計(jì)師需要有在內(nèi)容上進(jìn)行取舍，保證用戶使用產(chǎn)品時(shí)能夠讓用戶強(qiáng)烈的感知內(nèi)容的主次，并且內(nèi)容和功能優(yōu)先級(jí)的高度進(jìn)行區(qū)分，有效的減少用戶在操作界面時(shí)對(duì)內(nèi)容需要就行二次過濾。比如說某個(gè)提示說明在頁(yè)面上最高，那么此提示在界面中一眼看過去需要最被突出和強(qiáng)調(diào)的。如果用戶界面看起來(lái)一團(tuán)“糊”，那么這個(gè)設(shè)計(jì)是失敗的，因?yàn)樗荒苡行У膸椭脩暨M(jìn)行內(nèi)容篩選，導(dǎo)致用戶還需要使用時(shí)花大量時(shí)間去閱讀操作。

視覺層次分為4個(gè)基礎(chǔ)部分，其中包含了大小對(duì)比、字重對(duì)比、位置對(duì)比、顏色對(duì)比。

同樣還是用蘋果官網(wǎng)作為案例，真心覺得官網(wǎng)設(shè)計(jì)太好了。蘋果的設(shè)計(jì)一直以來(lái)都是引領(lǐng)著設(shè)計(jì)趨勢(shì)，其設(shè)計(jì)被國(guó)內(nèi)外用戶所認(rèn)可，所以就以蘋果官網(wǎng)作為案例。其中，字重對(duì)比：蘋果官網(wǎng)在字重上給人眼前一亮的感覺，它采用Medium+Bold的字重使得標(biāo)題與詳情內(nèi)容產(chǎn)生強(qiáng)烈的大小對(duì)比，用戶進(jìn)入官網(wǎng)的第一眼便能了解核心內(nèi)容。顏色對(duì)比：在顏色上使用黑色背景承托產(chǎn)品和內(nèi)容，強(qiáng)烈的黑白對(duì)比增強(qiáng)了信息傳播中的識(shí)別度和對(duì)比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁(yè)面層次感更加的豐富。如下圖：

2 格式塔定律

格式塔原理或格式塔定律是感知場(chǎng)景組織的規(guī)則，人們感知由許多元素組成的復(fù)雜對(duì)象時(shí)，會(huì)采用有意識(shí)或無(wú)意識(shí)的方法將這些元素安排到整個(gè)組織的系統(tǒng)中，而不只是單一的元素級(jí)。它適用于不同級(jí)別的感知，其中視覺部分是設(shè)計(jì)師設(shè)計(jì)界面時(shí)最能體現(xiàn)價(jià)值的部分。

格式塔（Gestalt）這個(gè)術(shù)語(yǔ)來(lái)自德語(yǔ)單詞Gestalt，中文翻譯為“形狀，形式”，格式塔心理學(xué)家?guī)鞝柼亍た品蚩ǎ↘urt Koffka）的一句話可以捕捉到這一運(yùn)動(dòng)背后的基本思想：“整體不是元素基因的總和”。官網(wǎng)概括：“在心理現(xiàn)象中，人們對(duì)客觀對(duì)象的感受源于整體關(guān)系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個(gè)統(tǒng)一的整體，部分之和不等于整體，因此整體不能分割”。格式塔理論中元素之知見的原則分別為臨近，相似，連續(xù)，封閉和連接。在用戶打開界面進(jìn)行閱讀或者操作界面時(shí)視覺的第一感受是產(chǎn)品的整體效果，而并不會(huì)感知到一些較細(xì)節(jié)的元素。

在設(shè)計(jì)用戶界面時(shí)需要理解格式塔定律中5大定律，分別是接近、相似、閉合、連續(xù)、簡(jiǎn)單，其中兩個(gè)最重要的定律分別是接近定律和相似定律，這兩個(gè)定律主要描述了我們感知事物的核心方式。

2.1 接近定律

人類的大腦總是把一些細(xì)節(jié)復(fù)雜的元素分析歸類，將相對(duì)靠近或有相似的連接點(diǎn)的內(nèi)容作為一個(gè)整體，在我們的生活中有類似的在我們的現(xiàn)實(shí)的生活中有很多自然規(guī)律中遵守了格式塔原理的接近定律，比如說比如說每到秋天，北方的嚴(yán)寒氣候不再適合大雁生存，這時(shí)候大雁便會(huì)飛往較暖和的南方，當(dāng)人們看到天空正在南飛的大雁隊(duì)伍，它們組織鏈接得十分嚴(yán)密，并且群體在同一個(gè)方向移動(dòng)，所以隊(duì)伍的形狀在我們的大腦中將它們視為一個(gè)群組的一部分，產(chǎn)生人字形或一字形的圖形。當(dāng)你看空中一些比較特殊的云朵比如像貓、像飛鳥等圖形，是因?yàn)榕钏傻臍怏w發(fā)生形變，形成了酷似動(dòng)物或生活中熟悉的物體。這其實(shí)都是人類大腦通過潛意識(shí)進(jìn)行腦補(bǔ)和整理出來(lái)的畫面，如下圖中的元素彼此靠近的元素歸為一組，相反距離較遠(yuǎn)的元素被視為不同組。

其中在元素排布中也有一定的規(guī)律性，比如當(dāng)行向間距大于列間距時(shí)，那么視覺的行排布的橫向關(guān)系密切形成整體。當(dāng)縱向間距大于列間距時(shí)，那么視覺的列排布的縱向關(guān)系形成整體，如下圖所示：

以今日頭條和優(yōu)酷視頻作為案例，首先進(jìn)入到今日頭條首頁(yè)后映入眼簾的是無(wú)窮式的信息流?？梢钥闯鲈O(shè)計(jì)師使用接近原則對(duì)信息進(jìn)行分組、組織內(nèi)容和整理布局?？ㄆ休d的內(nèi)容形成模塊，模塊與模塊之間的這里發(fā)揮著至關(guān)重的的作用，因?yàn)樗龑?dǎo)用戶眼睛朝向預(yù)期的方向，有效引導(dǎo)用戶使用。并且其排列方式是比較典型的縱向關(guān)系，可以看出行間距小于列間距，增強(qiáng)了縱向關(guān)系，有助于用戶閱讀和分類。把重要信息流的內(nèi)容模塊放置中間位置，其他次要內(nèi)容放置左右兩列。

優(yōu)酷視頻是個(gè)大型視頻分享平臺(tái)，進(jìn)入到首頁(yè)同樣是無(wú)窮式的視頻類信息流。我們可以看到產(chǎn)品排列方式與今日頭條正好相反，除了頂部導(dǎo)航以外內(nèi)容區(qū)的行間距大于列間距，增強(qiáng)了橫向關(guān)系并且以橫向關(guān)系密切形成了整體，屬于典型的橫向關(guān)系排列。其中視頻封面與下面的文本形成一個(gè)內(nèi)容小組，內(nèi)容小組與內(nèi)容小組形成一個(gè)大分類。由于產(chǎn)品視頻分類較多，所以從頁(yè)面排版上使用橫排關(guān)系將白色的空間增強(qiáng)了視覺層次感有效將視頻類型橫向區(qū)分，幫助用戶更快的找到相關(guān)類型的視頻內(nèi)容。

2.2 相似定律

接下來(lái)再說下相似定律。人們大腦總是把一些相似視覺特征的元素被認(rèn)為是一類，與不具有相似視覺特征相比較具有相似特征的元素關(guān)聯(lián)性更強(qiáng)。在用戶界面排版中具有相似功能的元素在樣式上應(yīng)該保持一致，比如說在操作界面中Link的顏色為藍(lán)色，那么用戶在操作界面時(shí)默認(rèn)會(huì)把藍(lán)色的文字理解為可點(diǎn)擊Link。

設(shè)計(jì)師在設(shè)計(jì)界面過程中可以使用相似定律將元素進(jìn)行元素分組、元素組織、元素布局。但是需要強(qiáng)調(diào)界面中相同的元素（組件），如按鈕、下拉、標(biāo)題、正常文本等一些基礎(chǔ)組件需要使用相同的設(shè)計(jì)語(yǔ)言，保持一致的顏色、尺寸、布局等。本·施耐德曼在《Designing The User Interface》里說過：“在界面設(shè)計(jì)中，要采取一致的行動(dòng)順序”。因?yàn)橛脩魰?huì)將視覺屬性相似的內(nèi)容分組，將最相關(guān)的內(nèi)容彼此靠近作為小組，小組與小組之間可組合成大組也就是我們?cè)诓季种刑岬降哪K，最后由模塊組合呈現(xiàn)出頁(yè)面形態(tài)。

西瓜視頻是個(gè)性化推薦短視頻平臺(tái)，從下圖中可以看到首頁(yè)分為影視和短視頻兩類，這也是西瓜視頻的兩大特色功能。設(shè)計(jì)師在設(shè)計(jì)界面時(shí)考慮到影視和短視頻這兩大類視頻需要在視覺感知上需要進(jìn)行區(qū)分，所以設(shè)計(jì)師運(yùn)用了相似定律進(jìn)行設(shè)計(jì)，其中豎版視頻封面與下面的文本形成一種內(nèi)容小組，橫版視頻封面與下方內(nèi)容組合形成另一種內(nèi)容小組。以不同的形狀來(lái)告知用戶的功能類型差異。如下圖所示：

2.3 小結(jié)

在網(wǎng)頁(yè)設(shè)計(jì)中不論是視覺層級(jí)還是格式塔定律，其實(shí)都是由我們?nèi)祟惖拇竽X神經(jīng)感知事物的規(guī)律總結(jié)而來(lái)，在生活中每個(gè)人潛意識(shí)都具備這種技能，因?yàn)槿藗兛偸窍矚g有規(guī)律的事物，規(guī)律可以讓事情變得更容易理解。同理在設(shè)計(jì)用戶界面時(shí)不僅僅是為了漂亮美觀，還需將界面中內(nèi)容有效的進(jìn)行梳理并傳達(dá)給用戶。

適配多語(yǔ)言切換

隨著公司業(yè)務(wù)不斷快速發(fā)展以及互聯(lián)網(wǎng)信息的快速交流與傳播，很多產(chǎn)品已經(jīng)突破地域的邊界走向了海外市場(chǎng)，并且個(gè)人也因?yàn)樵趯?shí)際項(xiàng)目中產(chǎn)品切換多語(yǔ)言時(shí)產(chǎn)生了各種各樣的體驗(yàn)問題，所以為了提高規(guī)范體驗(yàn)設(shè)計(jì)師們應(yīng)該提前自主探索和思考關(guān)于產(chǎn)品國(guó)際化的相關(guān)內(nèi)容。今天主要淺談文本適配問題。

1、預(yù)留出足夠的文字空間

在實(shí)際的工作中會(huì)遇到界面使用中文時(shí)布局非常的合理，但是一切換到其他語(yǔ)言時(shí)出現(xiàn)各種折行或者是遮擋的問題。主要原因是因?yàn)槲淖值拈L(zhǎng)度會(huì)因語(yǔ)言不同而異，即使是使用同類字形的語(yǔ)言也是如此，比如說英文“New”翻譯成法語(yǔ)是“Nouvelle”，并且法語(yǔ)的感嘆號(hào)前面還需要留一個(gè)空格，字符數(shù)從4個(gè)變成了8個(gè)。所以設(shè)計(jì)師在做規(guī)范時(shí)一定要考慮預(yù)留出更大翻譯空間，以下是網(wǎng)上找的一些Bad case。

2、書寫順序

在多語(yǔ)言適配時(shí)我們發(fā)現(xiàn)很多書寫系統(tǒng)，如阿希伯來(lái)語(yǔ)、拉伯語(yǔ)、波斯語(yǔ)、烏爾都語(yǔ)等，都是以右到左對(duì)齊方式進(jìn)行字符顯示，并且在相同的字體大小情況下，這些字體可能看起來(lái)比西伯來(lái)語(yǔ)字體要小，所以需要考慮調(diào)整行間距和對(duì)齊方式，使得不同字體在相同界面中都適用。并且使用這些語(yǔ)言的人口數(shù)量相當(dāng)大，特別是在波斯灣地區(qū)由于石油經(jīng)濟(jì)發(fā)展特別迅速。對(duì)于面對(duì)中東地區(qū)出海的產(chǎn)品，是不能回避的問題，所以要及時(shí)作出可配性方案。

3、匹配不同行高

在多語(yǔ)言適配時(shí)因?yàn)椴煌恼Z(yǔ)言可能在同一界面中需要設(shè)定不同的行高達(dá)到最佳效果，可以定義3種行高尺寸來(lái)做多語(yǔ)言適配，分別為大（l）、常規(guī)（lg）、?。╯）。從下圖可以看出區(qū)別較大的是泰語(yǔ)和阿拉伯語(yǔ)的字型高度相差較大，可利用相對(duì)合理的行高尺寸進(jìn)行匹配，比如泰語(yǔ)字型較高可使用大（l）尺寸作為文本行高，阿拉伯語(yǔ)字型較低可使用?。╯）尺寸作為文本行高。

4、避免組件與文本混排

設(shè)計(jì)師在設(shè)計(jì)界面時(shí)經(jīng)常遇到文本與組件的組合排版方式，但是其中會(huì)有比較多的“坑”，設(shè)計(jì)師們很容易不小心就陷入“坑”中。舉個(gè)例子，比如設(shè)計(jì)師們會(huì)為了更加美觀會(huì)把組件插入一段文本中間中進(jìn)行混合排版，這種組合方式有幾個(gè)比較大弊端。第一不同語(yǔ)種有不同語(yǔ)法順序，比如法語(yǔ)形容詞的后置，日語(yǔ)里動(dòng)詞的后置。第二復(fù)數(shù)問題，在英語(yǔ)里面，每個(gè)名詞都有一個(gè)單數(shù)形式和一個(gè)復(fù)數(shù)形式，比如One picture復(fù)數(shù)是Two pictures。但在俄語(yǔ)里面，復(fù)數(shù)有三種可能的形式。在法語(yǔ)里面，有不少單詞變成復(fù)數(shù)之后拼寫也會(huì)改變。所以，如果用戶要在句子中間輸入數(shù)字這種設(shè)計(jì)就可能造成語(yǔ)法錯(cuò)誤。第三有些語(yǔ)言里面，單詞是區(qū)分陰陽(yáng)性的。比如在法語(yǔ)里面，形容詞也是有陰陽(yáng)性形式的。所以如果你在句子中間插入一個(gè)下拉菜單框，那么可能又會(huì)造成語(yǔ)法錯(cuò)誤。

5、小結(jié)

產(chǎn)品國(guó)際化題材比較大涉及到的內(nèi)容也會(huì)比較廣，可能需要考慮的不僅限于文本適配，還需要考慮很多的因素比如說各國(guó)的文化差異、本地格式、地區(qū)標(biāo)準(zhǔn)等等，所以今天主要站在文字適配的角度給大家分享幾個(gè)做國(guó)際時(shí)需要關(guān)注的小點(diǎn)。

寫在最后

本篇文章主要是網(wǎng)頁(yè)中文字系統(tǒng)初識(shí)，網(wǎng)頁(yè)中的文字雖然看起來(lái)比較簡(jiǎn)單但是每個(gè)內(nèi)容板塊拆分開都是值得深挖的。比如說文字結(jié)構(gòu)、如何結(jié)合印刷理論應(yīng)用到網(wǎng)頁(yè)排版中、解刨多語(yǔ)言適配等等吧。本片文章還是秉著啟發(fā)的態(tài)度與大家進(jìn)行網(wǎng)頁(yè)文字系統(tǒng)的探索，希望大家能夠可根據(jù)此篇文章結(jié)合工作中實(shí)際案例舉一反三，更深入地探索相關(guān)內(nèi)容。在這里再次強(qiáng)調(diào)一下產(chǎn)品國(guó)際化方面內(nèi)容，互聯(lián)網(wǎng)信息的快速交流與傳播使得人與人的連接越來(lái)越容易，很多產(chǎn)品進(jìn)入海外市場(chǎng)是必經(jīng)之路，大家可提前做好相關(guān)知識(shí)儲(chǔ)備，還是那句話也希望自己后續(xù)可以多歸納總結(jié)與大家展開探討分享。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

使用圖片作為背景

這里的圖片選擇要突出核心內(nèi)容且一定要高質(zhì)量，不要選擇雜亂無(wú)章或與主題無(wú)關(guān)的低質(zhì)量圖片

將圖片于背景進(jìn)行融合

結(jié)合頁(yè)面表達(dá)需要，選擇合適的配圖并做融合或出界的設(shè)計(jì)，會(huì)讓畫面極具吸引力和強(qiáng)烈的設(shè)計(jì)感。

將高質(zhì)量的圖片緊密的放在一起，不留任何間距

當(dāng)畫面主要以高質(zhì)量圖片吸引用戶注意時(shí)，盡可能的利用更大展示面積，這樣會(huì)顯得更加高級(jí)和有視覺沖擊力。

在圖片下方添加色塊

這里的色塊要注意跟圖片的主色調(diào)保持相近，可以直接吸圖片上的顏色然后找找鄰近色就好了，色環(huán)上 30°區(qū)間內(nèi)的顏色就比較和諧。

在圖片下方/上方增加圖案或形狀

這里的形狀建議不要太過于復(fù)雜，用一些基本圖形就可以，比如圓點(diǎn)、方塊矩形之類的，增強(qiáng)畫面的形式感

在圖片下方或上方增加文字、圖案或不規(guī)則形狀

這里的文字、圖案或不規(guī)則形狀跟上面的技巧類似，都是起到裝飾的作用，但文字的話有時(shí)候還要注意識(shí)別性，比如文字比較緊湊的時(shí)候。圖案或形狀更多的是起到視覺引導(dǎo)的作用。

將圖片剪切到文字或形狀中

這個(gè)很好理解，就是以文字或形狀作為遮罩，增加畫面的設(shè)計(jì)感，文字盡量選擇粗體

在圖片周圍增加一個(gè)非常窄的邊距

這個(gè)技巧可能跟第 3 條有些沖突，其實(shí)這 2 個(gè)方法都是可以的，要根據(jù)頁(yè)面具體的排版情況靈活使用。

在圖片上增加顏色層

這個(gè)技巧也比較容易理解，一般會(huì)選擇飽和度較高的顏色應(yīng)用在充滿活力的頁(yè)面上，增加畫面的沖擊力。

在彩色疊加到圖片中的一部分上

這個(gè)技巧跟上面的有些類似，只不過是以小面積疊加的形式，顏色一般選擇品牌色或主題色，與背景盡量有較大反差會(huì)更加容易出彩。

將圖片剪切成其他形狀

這個(gè)方法有一點(diǎn)需要注意的就是剪切的形狀不要過于復(fù)雜，一般用基礎(chǔ)圖形就好

以上，就是我總結(jié)的一些可以用來(lái)操作 UI 圖片的實(shí)用方法，這些方法可以使得作品變得更加有視覺感也更加專業(yè)。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

一、前言

隨著互聯(lián)網(wǎng)的快速發(fā)展，B端行業(yè)也逐漸崛起，很多企業(yè)管理中使用的軟件我們通常稱其為B端管理系統(tǒng)，而在B端系統(tǒng)中“權(quán)限管理”是必不可少的功能，不同的系統(tǒng)中權(quán)限的應(yīng)用復(fù)雜程度不一樣，都是根據(jù)實(shí)際產(chǎn)品以及需求情況而設(shè)置合理的權(quán)限。而我們現(xiàn)在對(duì)于權(quán)限的設(shè)置基本上都是建立在RBAC權(quán)限模型上的、擴(kuò)展的，下面我會(huì)通過介紹RBAC權(quán)限模型的概念以及結(jié)合實(shí)際業(yè)務(wù)情況列舉權(quán)限設(shè)置的應(yīng)用。

二、什么是RBAC權(quán)限模型？

RBAC是Role-BasedAccess Control的英文縮寫，意思是基于角色的訪問控制。RBAC認(rèn)為權(quán)限授權(quán)實(shí)際上是Who、What、How的問題。在RBAC模型中，who、what、how構(gòu)成了訪問權(quán)限三元組，也就是“Who對(duì)What進(jìn)行How的操作，也就是“主體”對(duì)“客體”的操作。其中who是權(quán)限的擁有者或主體（例如：User、Role），what是資源或?qū)ο螅≧esource、Class)。

簡(jiǎn)單的理解其理念就是將“角色”這個(gè)概念賦予用戶，在系統(tǒng)中用戶與權(quán)限之間通過角色進(jìn)行關(guān)聯(lián)，以這樣的方法來(lái)實(shí)現(xiàn)靈活配置。

RBAC其實(shí)是一種分析模型，主要分為：基本模型RBAC0、角色分層模型RBAC1、角色限制模型RBAC2和統(tǒng)一模型RBAC3。

RBAC權(quán)限模型是基于角色的權(quán)限控制。模型中有幾個(gè)關(guān)鍵的術(shù)語(yǔ)：

• 用戶：系統(tǒng)接口及訪問的操作者

• 權(quán)限：能夠訪問某接口或者做某操作的授權(quán)資格

• 角色：具有一類相同操作權(quán)限的用戶的總稱

  
  

1）RBAC0

RBAC0是RBAC權(quán)限模型的核心思想，RBAC1、RBAC2、RBAC3都是在RBAC0上進(jìn)行擴(kuò)展的。RBAC0是由四部分構(gòu)成：用戶、角色、會(huì)話、許可。用戶和角色的含義很簡(jiǎn)單，通過字面意思即可明白，會(huì)話：指用戶被賦予角色的過程，稱之為會(huì)話或者是說激活角色；許可： 就是角色擁有的權(quán)限（操作和和被控制的對(duì)象），簡(jiǎn)單的說就是用戶可使用的功能或者可查看的數(shù)據(jù)。

用戶與角色是多對(duì)多的關(guān)系，用戶與會(huì)話是一對(duì)一的關(guān)系，會(huì)話與角色是一對(duì)多的關(guān)系，角色與許可是多對(duì)多的關(guān)系。

2）RBAC1

RBAC1是在RBAC0權(quán)限模型的基礎(chǔ)上，在角色中加入了繼承的概念，添加了繼承發(fā)的概念后，角色就有了上下級(jí)或者等級(jí)關(guān)系。

舉例：集團(tuán)權(quán)責(zé)清單下包含的角色有：系統(tǒng)管理員、總部權(quán)責(zé)管理員、區(qū)域權(quán)責(zé)管理員、普通用戶，當(dāng)管理方式向下兼容時(shí)，就可以采用RBAC1的繼承關(guān)系來(lái)實(shí)現(xiàn)權(quán)限的設(shè)置。上層角色擁有下層的所有角色的權(quán)限，且上層角色可擁有額外的權(quán)限

3）RBAC2

RBAC2是在RBAC0權(quán)限模型的基礎(chǔ)上，在用戶和角色以及會(huì)話和角色之間分別加入了約束的概念（職責(zé)分離），職責(zé)分離指的是同一個(gè)人不能擁有兩種特定的權(quán)限（例如財(cái)務(wù)部的納入和支出，或者運(yùn)動(dòng)員和裁判員等等）。

用戶和角色的約束有以下幾種形式:

• 互斥角色：同一個(gè)用戶在兩個(gè)互斥角色中只能選擇一個(gè)（也會(huì)存在一個(gè)用戶擁有多個(gè)角色情況，但是需要通過切換用戶角色來(lái)實(shí)現(xiàn)對(duì)不同業(yè)務(wù)操作）

• 基數(shù)約束：一個(gè)用戶擁有的角色是有限的，一個(gè)角色擁有的許可也是有限的

• 先決條件約束：用戶想要獲得高級(jí)角色，首先必須擁有低級(jí)角色

  
  

會(huì)話和角色之間的約束，可以動(dòng)態(tài)的約束用戶擁有的角色，例如一個(gè)用戶可以擁有兩個(gè)角色，但是運(yùn)行時(shí)只能激活一個(gè)角色。

例如：iconfont和藍(lán)湖的用戶與角色就采用了約束的概念，超級(jí)管理員只允許只有一個(gè)

4）RBAC3

RBAC3是RBAC1與RBAC2的合集，所以RBAC3包含繼承和約束。

二、為什么要引用RBAC權(quán)限模型？

RBAC中具有角色的概念，如果沒有角色這個(gè)概念，那么在系統(tǒng)中，每個(gè)用戶都需要單獨(dú)設(shè)置權(quán)限，而系統(tǒng)中所涉及到的功能權(quán)限和數(shù)據(jù)權(quán)限都非常多，每個(gè)用戶都單獨(dú)設(shè)置權(quán)限對(duì)于維護(hù)權(quán)限的管理員來(lái)說無(wú)疑是一件繁瑣且工作量巨大的任務(wù)。

而引入角色這個(gè)概念后，我們只需要給系統(tǒng)設(shè)置不同的角色，給角色賦予權(quán)限，再將用戶與角色關(guān)聯(lián)，這樣用戶所關(guān)聯(lián)的角色就直接擁有了該角色下的所有權(quán)限。

例如：用戶1~用戶8分別擁有以下權(quán)限，，不同用戶具有相同權(quán)限的我用不同的顏色做了區(qū)分，如下圖：

在沒有引入RBAC權(quán)限模型的情況下，用戶與權(quán)限的關(guān)系圖可采用下圖的楊叔叔展示，每個(gè)用戶分別設(shè)置對(duì)應(yīng)的權(quán)限，即便是具有相同權(quán)限的用戶也需要多次設(shè)置權(quán)限。

引入RBAC權(quán)限模型及引入了角色的概念，根據(jù)上面表格的統(tǒng)計(jì)，用戶1、用戶3、用戶5、用戶8擁有的權(quán)限相同，用戶2、用戶6、用戶7擁有相同的權(quán)限，用戶4是獨(dú)立的權(quán)限，所以我們這里可以根據(jù)數(shù)據(jù)統(tǒng)計(jì)，以及實(shí)際的需求情況，可以建立三個(gè)不同的角色，角色A、角色B、角色C，三個(gè)角色分別對(duì)應(yīng)三組用戶不同的權(quán)限，如下圖所示：

對(duì)應(yīng)的上面的案例表格我們就可以調(diào)整為含有角色列的數(shù)據(jù)表，這樣便可以清楚的知道每個(gè)用戶所對(duì)應(yīng)的角色及權(quán)限。

通過引用RBAC權(quán)限模型后，對(duì)于系統(tǒng)中大量的用戶的權(quán)限設(shè)置可以更好的建立管理，角色的引入讓具有相同權(quán)限的用戶可以統(tǒng)一關(guān)聯(lián)到相同的的角色中，這樣只需要在系統(tǒng)中設(shè)置一次角色的權(quán)限，后續(xù)的用戶便可以直接關(guān)聯(lián)這些角色，這樣就省去了重復(fù)設(shè)置權(quán)限的過程，對(duì)于大型平臺(tái)的應(yīng)用上，用戶的數(shù)量成千上萬(wàn)，這樣就可避免在設(shè)置權(quán)限這項(xiàng)工作上浪費(fèi)大量的時(shí)間。

三、引入用戶組的概念

我們依舊拿上面表格案例舉例，雖然前面我們應(yīng)用的RBAC權(quán)限模型的概念，但是對(duì)于大量用戶擁有相同權(quán)限的用戶，我們同樣的也需要對(duì)每個(gè)用戶設(shè)置對(duì)應(yīng)的角色，如果一個(gè)部門上萬(wàn)人，那么我們就需要給這個(gè)部門上萬(wàn)人分別設(shè)置角色，而這上萬(wàn)其實(shí)是具有相同的權(quán)限的，如果直接采用基礎(chǔ)的RBAC權(quán)限模型的話，那么面對(duì)這樣的情況，無(wú)疑也是具有一個(gè)龐大的重復(fù)的工作量，并且也不利于后期用戶變更的維護(hù)管理，那么針對(duì)相同用戶具有相同的權(quán)限的情況，我們便可以引入用戶組的概念。

什么是用戶組呢？用戶組：把具有相同角色的用戶進(jìn)行分類。

上面我們的數(shù)據(jù)表格案例中的用戶1、用戶3、用戶5、用戶8具有相同的角色A，用戶2、用戶6、用戶7也擁有相同的角色B，那么我們就可以將這些具有相同角色的用戶建立用戶組的關(guān)系，拿上面的案例，我們分別對(duì)相同角色的用戶建立組關(guān)系，如下：

用戶1、用戶3、用戶5、用戶8→建立用戶組1

用戶2、用戶6、用戶7→建立用戶組2

因?yàn)橛脩?只有一個(gè)用戶，所以直接還是單獨(dú)建立用戶與角色的關(guān)系，不需要建立用戶組，當(dāng)然盡管只有一個(gè)用戶也是可以建立用戶組的關(guān)系，這樣有利于后期其他用戶與用于4具有相同的角色時(shí)，就可以直接將其他用戶添加到這個(gè)用戶組下即可，根據(jù)業(yè)務(wù)的實(shí)際情況而選擇適合的方案即可。

通過案例表格的變化我們就可以直觀的看出權(quán)限設(shè)置變得清晰簡(jiǎn)潔了，通過第用戶組賦予角色，可以減少大量的重復(fù)的工作，我們常見的企業(yè)組織、部門下經(jīng)常會(huì)出現(xiàn)不同用戶具有相同角色的情況，所以采用用戶組的方式，便可以很好的解決這個(gè)問題，給具有相同權(quán)限的用戶建立用戶組，將用戶組關(guān)聯(lián)到對(duì)應(yīng)的角色下，此用戶組就擁有了此角色下的所有權(quán)限，而用戶是屬于用戶組的，所以用戶組下的所有用戶也就同樣的擁有了此角色下的所有權(quán)限。一個(gè)用戶可以屬于多個(gè)用戶組，一個(gè)用戶組也可以包括多個(gè)用戶，所以用戶與用戶組是多對(duì)多的關(guān)系。

四、引入權(quán)限組的概念

權(quán)限組與用戶組的原理差不多，是將一些相對(duì)固定的功能或者權(quán)限建立組的關(guān)系，然后再給此權(quán)限組賦予角色，目前我所接觸的B端項(xiàng)目中使用權(quán)限組的概念的比較少，可簡(jiǎn)單的看一下關(guān)系圖

四、功能權(quán)限和數(shù)據(jù)權(quán)限

B端系統(tǒng)中一般產(chǎn)品的權(quán)限由頁(yè)面、操作和數(shù)據(jù)構(gòu)成。頁(yè)面與操作相互關(guān)聯(lián)，必須擁有頁(yè)面權(quán)限，才能分配該頁(yè)面下對(duì)應(yīng)的操作權(quán)限，數(shù)據(jù)可被增刪改查。所以將權(quán)限管理分為功能權(quán)限管理和數(shù)據(jù)權(quán)限管理。

功能權(quán)限管理：指的是用戶可看到那些模塊，能操作那些按鈕，因?yàn)槠髽I(yè)中的用戶擁有不同的角色，擁有的職責(zé)也是不同的。

數(shù)據(jù)權(quán)限管理：指的是用戶可看到哪些模塊的哪些數(shù)據(jù)。

例如：一個(gè)系統(tǒng)中包含多個(gè)權(quán)責(zé)清單（清單1、清單2、清單3），系統(tǒng)管理員能對(duì)整個(gè)系統(tǒng)操作維護(hù)，也就可以對(duì)系統(tǒng)中的所有清單都能操作（增、刪、改、查）；假如分配給總部權(quán)責(zé)管理員的是清單1，那么他將只能對(duì)清單1進(jìn)行操作（增、改、查）；普通用戶也許只有查看數(shù)據(jù)的權(quán)限，沒有數(shù)據(jù)維操作的權(quán)限（查）,這里的操作是系統(tǒng)中所有可點(diǎn)擊的按鈕權(quán)限操作，列舉的增刪改查只是最常見的幾種操作而已。

五、實(shí)戰(zhàn)案例總結(jié)

我目前所做的項(xiàng)目是一個(gè)關(guān)于權(quán)責(zé)管理平臺(tái)的B端系統(tǒng)，關(guān)于系統(tǒng)中的權(quán)限需求我這里簡(jiǎn)單的介紹一下，并采用上面所總結(jié)的RBAC權(quán)限模型對(duì)實(shí)際業(yè)務(wù)需求進(jìn)行設(shè)計(jì)分析：

01：不同的區(qū)域管理員的權(quán)限各不相同（說明會(huì)存在不同的用戶具有不同的權(quán)限，那么我們就可以采用角色對(duì)其進(jìn)行規(guī)范）

02：有大量的用戶具有相同的權(quán)限（例如組織、部門等）（說明存在相同權(quán)限的用戶，那么我們就可以采用用戶組的概念）

03：上級(jí)管理員擁有下級(jí)人員的所有權(quán)限（說明存在繼承關(guān)系）

04：不同用戶所看到的數(shù)據(jù)和能編輯的數(shù)據(jù)不同，一些機(jī)密性的數(shù)據(jù)只允許部分人員看或者編輯（說明存在約束）

05：會(huì)存在臨時(shí)性的用戶（說明需要支持新建新角色）

06：同一用戶會(huì)存在多個(gè)角色（多角色求合集或者切換用戶角色）

簡(jiǎn)單說明一下，我所做這個(gè)項(xiàng)目的人員管理是在另外一個(gè)系統(tǒng)中管理的，權(quán)責(zé)平臺(tái)只是調(diào)用另外一個(gè)平臺(tái)的組織結(jié)構(gòu)樹即可，所以權(quán)限設(shè)置模塊沒有做人員管理的模塊

根據(jù)上面對(duì)需求的分析，整個(gè)權(quán)限管理模塊中我們需要建立用戶組管理模塊、功能角色管理模塊、業(yè)務(wù)（數(shù)據(jù)）管理模塊、權(quán)限設(shè)置模塊，下面就對(duì)每個(gè)模塊做更細(xì)致的頁(yè)面展示設(shè)計(jì)分析

1）用戶組管理模塊

用戶組管理主要是對(duì)具有相同權(quán)限的用戶分類建組，所以頁(yè)面中我們需要有新建用戶組的功能，每個(gè)用戶組下我們需要關(guān)聯(lián)對(duì)應(yīng)的組織、部門、崗位、人員，讓這些具有相同權(quán)限的用戶在同一個(gè)用戶組下，如下圖：

2）功能角色管理模塊

B端項(xiàng)目中一般會(huì)建立幾個(gè)默認(rèn)的角色是不支持用戶修改、刪除的，例如最常見的系統(tǒng)管理員，而也會(huì)需要有其它角色的需求，所以此模塊需要支持用戶新建角色，功能角色是對(duì)大模塊的頁(yè)面和操作的權(quán)限設(shè)置，操作權(quán)限的顆粒度可以細(xì)分到每個(gè)頁(yè)面的每一個(gè)按鈕的操作，如下圖：

3）業(yè)務(wù)（數(shù)據(jù)）角色管理模塊

業(yè)務(wù)角色是對(duì)頁(yè)面中的數(shù)據(jù)餓查看的權(quán)限設(shè)置，而對(duì)于系統(tǒng)中的普通用戶查看系統(tǒng)的權(quán)限是常用不變的，所以我們考慮默認(rèn)有一個(gè)普通用戶的角色，其它業(yè)務(wù)角色用戶根據(jù)實(shí)際需求情況自行建立即可，由于我們權(quán)責(zé)系統(tǒng)的特殊性，我們需要滿足用戶對(duì)部分?jǐn)?shù)據(jù)可編輯且對(duì)部分?jǐn)?shù)據(jù)的字段可編輯，按照常理來(lái)說，編輯的操作行為是屬于功能權(quán)限的設(shè)置，但是這里的操作行為是建立在數(shù)據(jù)的基礎(chǔ)之上的，所以如果把這里對(duì)數(shù)據(jù)的操作權(quán)限在功能角色模塊中設(shè)置，就會(huì)顯得混亂，所以我們直接在業(yè)務(wù)角色模塊中加入對(duì)數(shù)據(jù)的可編輯權(quán)限，這里在設(shè)置的時(shí)候更方便靈活

4）權(quán)限設(shè)置模塊

權(quán)限設(shè)置模塊只需要設(shè)置權(quán)限分配的對(duì)象，選擇對(duì)應(yīng)的用戶或者用戶組，關(guān)聯(lián)對(duì)應(yīng)的功能角色和業(yè)務(wù)（數(shù)據(jù)）角色即可，這樣就形成了一條完整的閉環(huán)的權(quán)限設(shè)置

對(duì)于06同一用戶會(huì)存在多個(gè)角色，我們系統(tǒng)是采用切換角色的模式來(lái)實(shí)現(xiàn)的，因?yàn)椴煌巧写嬖诨コ獾那闆r，以及所涉及的領(lǐng)域不同，操作權(quán)限差距較大，求合集不利于控制權(quán)限，所以只能采用切換的模式實(shí)現(xiàn)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

數(shù)據(jù)展示有哪些？

01.徽標(biāo)

是收納消息數(shù)量的樣式，一般出現(xiàn)在圖標(biāo)或者頭像右上角。

02.標(biāo)簽

數(shù)據(jù)展示里面抽取出來(lái)的共性特征，將它們轉(zhuǎn)化為標(biāo)簽。標(biāo)簽樣式有線框、帶不透明底或者面性。

03.走馬燈

相當(dāng)于c端的輪播圖

04.文字提示

可以出現(xiàn)在鼠標(biāo)懸浮按鈕時(shí)候的行為解釋說明，也可以是文案或者導(dǎo)航圖標(biāo)的解釋說明。鼠標(biāo)移入時(shí)候出現(xiàn)移出時(shí)候消失。

05.氣泡卡片

比起文字提示可以承載更多內(nèi)容，相對(duì)彈窗，氣泡卡片操作更輕盈。

06.標(biāo)簽頁(yè)/選項(xiàng)卡

標(biāo)簽頁(yè)可以幫助用戶在一個(gè)頁(yè)面內(nèi)快速切換不同類型內(nèi)容，提升單個(gè)頁(yè)面整體的擴(kuò)展性。標(biāo)簽本質(zhì)上就是內(nèi)容區(qū)的導(dǎo)航。

07.折疊面板

折疊面板可以更好的收納內(nèi)容區(qū)域，提高頁(yè)面利用率?？梢院捅砀窠Y(jié)合使用，折疊表格部分詳情內(nèi)容，使得縱向空間更節(jié)約。

08.表格

表格是數(shù)據(jù)展示的重要內(nèi)容。當(dāng)有大量結(jié)構(gòu)化數(shù)據(jù)需要展示時(shí)或者需要對(duì)數(shù)據(jù)進(jìn)行排序、搜索分頁(yè)時(shí)可以用表格進(jìn)行展現(xiàn)。

當(dāng)筆記本過小，表格展示不全時(shí)候，可以固定首尾重要信息進(jìn)行滾動(dòng)。

帶排序的表頭，可對(duì)數(shù)量或者金額進(jìn)行排序。

帶分組的表格，建議帶邊框并且用色塊區(qū)分表頭和內(nèi)容。

單元格可編輯

批量選中時(shí)只會(huì)選中當(dāng)前頁(yè)，因?yàn)榉猪?yè)還沒加載出來(lái)，為了給用戶正確的引導(dǎo)，可以給上提示性文案，例如“已選中XX項(xiàng)內(nèi)容”。

如果當(dāng)前頁(yè)批量選中的數(shù)據(jù)量不滿足要求，可以改變分頁(yè)器，增加當(dāng)前頁(yè)數(shù)據(jù)量，從而增加選項(xiàng)。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

雖然說 2021 已經(jīng)快到 10 月份，但我最近我還是花了點(diǎn)時(shí)間，搜羅全網(wǎng)設(shè)計(jì)，總結(jié)出了這 7 種出鏡率最高的版式風(fēng)格，也是今年最流行的設(shè)計(jì)表現(xiàn)形式之一。

看完這一波網(wǎng)頁(yè) UI 類設(shè)計(jì)，再也不愁接下來(lái)該如何做設(shè)計(jì)創(chuàng)新了。

圖與線疊加

這是今年出鏡率比較多的一種設(shè)計(jì)風(fēng)格，不管你是在 Dribbble 還是 Behance 上都能見到它的影子。這種風(fēng)格設(shè)計(jì)最大特點(diǎn)：形式感、聚焦、簡(jiǎn)約而不簡(jiǎn)單。

當(dāng)然還可以是將線圈與文字疊加圖片，有一種層疊縱深布局感受。

又或者說圖形只是作為裝飾作用。

純文字版式

純文字版式在今年版式中出鏡率也是相當(dāng)之高，包括深圳設(shè)計(jì)周官網(wǎng)也幾乎都是幾個(gè)大字排版。其實(shí)我們仔細(xì)思考，將文字放大處理，有點(diǎn)圖形化的意思。

上圖是典型的文字圖形化，將文字轉(zhuǎn)化成線性設(shè)計(jì)。

圖文混合

圖文混合設(shè)計(jì)風(fēng)格大膽、新穎，讓人眼前一亮。這種版式布局一般會(huì)出現(xiàn)在設(shè)計(jì)工作室網(wǎng)站居多一些，追求形式感與觀賞性。

圖文混合設(shè)計(jì)，不光只是圖片與文字混合排版，還可以是圖標(biāo)與文字、粗字體與細(xì)字體之間的混合穿插。

圓形版式

圓形設(shè)計(jì)趨勢(shì)一直都存在，在網(wǎng)頁(yè)設(shè)計(jì)中出鏡率高也是毋庸置疑的事情。畢竟圓形本身自帶超強(qiáng)親和力、聚焦。設(shè)計(jì)用它可以解決很多枯燥的版式，讓畫面瞬間活了起來(lái)。

還可以將文字處理成圓形，與圓形圖相呼應(yīng)。

文字輪廓化

文字輪廓化版式今年出鏡率尤其之高，將文字輪廓化設(shè)計(jì)處理，減輕了文字的視覺重量感，更像是將文字線條化設(shè)計(jì)處理。

文字輪廓化設(shè)計(jì)還可以用在背景，作為設(shè)計(jì)裝飾效果。

玻璃質(zhì)感

玻璃質(zhì)感設(shè)計(jì)趨勢(shì)，也是今年最火的設(shè)計(jì)風(fēng)格之一。那么它在網(wǎng)頁(yè)出鏡率也是在下半年開始逐漸多了起來(lái)，也許是設(shè)計(jì)師發(fā)現(xiàn)這種質(zhì)感細(xì)膩與折射光透露出的細(xì)節(jié)之美。

使用線條

線無(wú)疑是圖形里面運(yùn)用較多的，今年發(fā)現(xiàn)很多網(wǎng)頁(yè)中都加了線條作為版式裝飾，或者就是純線條版式設(shè)計(jì)，讓人眼前一亮，原來(lái)還可以這樣玩。

線條在這里作用明顯，除了美學(xué)設(shè)計(jì)裝飾之外，它還用作信息層級(jí)區(qū)分。

好了，差不多到這里就結(jié)束了。7 種風(fēng)格，希望能給大家?guī)?lái)一些新鮮的設(shè)計(jì)想法，在工作中將其運(yùn)用進(jìn)去。

當(dāng)然，在做設(shè)計(jì)提案版式、作品集包裝都是可以參考，希望大家不要被局限。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

桌面和大屏幕上導(dǎo)航欄要怎么設(shè)計(jì)其實(shí)是一個(gè)經(jīng)常被拿來(lái)探討的問題，如今這也是 B 端設(shè)計(jì)中繞不開的一個(gè)設(shè)計(jì)問題。Jennifer Rose Kingsburg 曾經(jīng)有針對(duì)網(wǎng)頁(yè)的三級(jí)菜單導(dǎo)航進(jìn)行過一份研究，結(jié)論是在左側(cè)設(shè)置導(dǎo)航好處多多。此外還有很多類似的研究，你可以在這里看到很多相關(guān)研究的摘要。值得注意的是，這些研究大都是 2017年之前的研究成果，而如今很多設(shè)計(jì)范式發(fā)生了變化。

1、左側(cè)導(dǎo)航更容易瀏覽

Eyetrac?荷蘭國(guó)際集團(tuán)的研究表明，用戶習(xí)慣于使用 F 式的瀏覽路徑，這使得左側(cè)導(dǎo)航在一般情況下有著相對(duì)更強(qiáng)的可用性，它不需要用戶視線上的查找，因?yàn)橛脩魰?huì)下意識(shí)注意到它們的存在。

2、頂部導(dǎo)航更加節(jié)省空間

如果我們經(jīng)常使用筆記本電腦來(lái)瀏覽頁(yè)面，會(huì)很容易注意到不同的導(dǎo)航模塊對(duì)于頁(yè)面空間的占用比例，左側(cè)導(dǎo)航所占用的頁(yè)面控件通常是同樣內(nèi)容量的頂部導(dǎo)航的占用空間的3倍，因?yàn)榭v向的側(cè)邊欄導(dǎo)航需要考慮到橫向的標(biāo)題占用空間，再加上搜索等功能模塊的加入，這種空間占用就成了不可避免的結(jié)果。即使左側(cè)的菜單欄可以折疊，這種處理方法也不總是有效的，因?yàn)檫@可能會(huì)隱藏相關(guān)條目的標(biāo)簽信息，降低了導(dǎo)航的可用性。

3、側(cè)邊導(dǎo)航更容易縮放和收納

也正是左側(cè)導(dǎo)航本身的排版邏輯，它通常可以顯示比頂部導(dǎo)航多一倍的條目?jī)?nèi)容，如果你的信息架構(gòu)本身涉及到的一級(jí)菜單條目較多的時(shí)候，采用左側(cè)邊欄導(dǎo)航是明顯更合理的選擇，而且這種導(dǎo)航非常適合隨著時(shí)間推移逐漸增加條目的需求。

4、側(cè)邊導(dǎo)航支持定制化導(dǎo)航結(jié)構(gòu)

側(cè)邊導(dǎo)航本身雖然占用的空間更大，但是它也有著更多的空間根據(jù)需求來(lái)定制各種不同的需求，相比于頂部導(dǎo)航，側(cè)邊導(dǎo)航甚至可以直接將分層的二級(jí)菜單直接展現(xiàn)出來(lái)，就像 Outlook 的側(cè)邊欄和 Slack 的側(cè)邊欄導(dǎo)航。

5、側(cè)邊欄更和桌面端系統(tǒng)更一致

你會(huì)注意到 macOS 和 Windows 操作系統(tǒng)當(dāng)中，系統(tǒng)默認(rèn)的用戶界面大都采用了靈活的側(cè)邊欄導(dǎo)航設(shè)計(jì)，很多 web 應(yīng)用也是如此，它們會(huì)將頂部空間留給系統(tǒng)默認(rèn)的菜單模塊。采用側(cè)邊欄導(dǎo)航的 UI 界面可以和操作系統(tǒng)的邏輯保持一致。

6、懸停激活下級(jí)菜單在頂部導(dǎo)航中更好用

懸停激活抽屜式下拉菜單的設(shè)計(jì)在頂部導(dǎo)航當(dāng)中是非常自然的，但是在側(cè)邊欄導(dǎo)航當(dāng)中，這種設(shè)計(jì)可能會(huì)在一定程度上遮擋住下級(jí)菜單，如果使用在旁邊展開的方式，可能會(huì)占用大量的空間，總而言之，它更貼合頂部導(dǎo)航的交互模式。

7、頂部導(dǎo)航欄適合做超級(jí)菜單

頂部導(dǎo)航正是因?yàn)楹蛻彝３霭l(fā)下級(jí)菜單的功能很搭，所以很多電商和大型網(wǎng)站上會(huì)使用它來(lái)呈現(xiàn)條目眾多的超級(jí)菜單。它是用來(lái)一次容納超多條目的下級(jí)菜單的有效方式，這種布局也為產(chǎn)品展示和廣告留出了足夠多的空間。

8、盡量避免重設(shè)計(jì)時(shí)改變導(dǎo)航模式

如果一種導(dǎo)航模式看起來(lái)不夠好用，那么是否要借助重設(shè)計(jì)的機(jī)會(huì)，切換到另外一種模式呢？根據(jù) Jira 的用戶測(cè)試，95% 的早期用戶對(duì)于這種情況會(huì)感到非常迷惑，即使是再小的導(dǎo)航功能修改都可能直接影響到大量用戶的日常使用，因此不管哪種導(dǎo)航模式，一旦選定，盡量不要改變。

9、不論哪種導(dǎo)航欄都面臨響應(yīng)式設(shè)計(jì)的挑戰(zhàn)

對(duì)于沒有太多條目的頂部導(dǎo)航，在移動(dòng)端上依然可以直接在頂部呈現(xiàn)，不過如果太多了就需要使用漢堡菜單來(lái)承載，或者切換為垂直的側(cè)邊欄導(dǎo)航。而側(cè)邊欄導(dǎo)航在移動(dòng)端上相對(duì)好一點(diǎn)，因?yàn)閷?dǎo)航模式本身是一致的，但是有限的空間內(nèi)如何呈現(xiàn)大量的導(dǎo)航條目同樣存在挑戰(zhàn)。

結(jié)論：用哪種導(dǎo)航欄取決于需求

頂部導(dǎo)航：占用空間小，在頁(yè)面的位置最為顯著，涉及條目不多的時(shí)候效果非常好。對(duì)于層次結(jié)構(gòu)簡(jiǎn)單的中小型網(wǎng)站，頂部導(dǎo)航還是很好用的，對(duì)于層級(jí)較少但是二級(jí)條目特別多的超級(jí)導(dǎo)航，頂部導(dǎo)航也是不二選擇。

側(cè)邊導(dǎo)航：側(cè)邊導(dǎo)航支持一級(jí)條目較多且層級(jí)較多的導(dǎo)航需求，擴(kuò)展性良好，對(duì)于復(fù)雜的產(chǎn)品和自定義需求較多的產(chǎn)品、涉及到管理功能、 桌面級(jí)產(chǎn)品、 都適合使用側(cè)邊導(dǎo)航。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

關(guān)鍵詞：搜索框，UI，UX交互，用戶體驗(yàn)，響應(yīng)式設(shè)計(jì)，網(wǎng)頁(yè)

題外話Tips: 在寫Amazon案例時(shí)，看到了歪果仁對(duì)國(guó)貨馬應(yīng)龍的評(píng)論，簡(jiǎn)直太歡樂（以前看過人家翻譯的帖子，但自己看一遍還是太搞笑了）。于是就寫跑偏了，翻譯了下貼了上來(lái)。隨便樂樂~ （CTRL+F頁(yè)內(nèi)搜索可直達(dá)）

目錄：（CTRL+F頁(yè)內(nèi)搜索可直達(dá)）

第一章 搜索框-默認(rèn)狀態(tài)

一、 位置

二、 寬度（包含響應(yīng)式設(shè)計(jì)）

三、 按鈕樣式

四、 展開 or 隱藏？

五、 默認(rèn)要有提示文字?。?

六、 推薦詞

七、 有很多分類怎么辦？

八、 一個(gè)頁(yè)面里有2個(gè)搜索框怎么處理？

第二章 搜索框-光標(biāo)觸發(fā)的狀態(tài)

一、下拉框中，歷史記錄+熱搜詞是標(biāo)配

二、下拉框中，標(biāo)配+額外內(nèi)容

三、下拉框中，純個(gè)性化內(nèi)容

第三章 搜索框-搜索中的狀態(tài)

一、 默認(rèn)交互

二、 個(gè)性化交互

三、 搜索下拉框中的多選功能

四、 回車 or 不回車？

正文：

以下都是從Web端角度寫的總結(jié)，Web的空間比APP大，相對(duì)來(lái)說，交互可發(fā)揮的余地更大。APP端如果有時(shí)間，就另外再寫吧。

搜索框簡(jiǎn)單吧，也就輸入框+按鈕。但是就那么點(diǎn)小元素，里面也是注滿了無(wú)數(shù)的小心思，死光了無(wú)數(shù)產(chǎn)品經(jīng)理/交互設(shè)計(jì)師的腦細(xì)胞，只是為了讓交互更流暢，產(chǎn)品體驗(yàn)更好。

第一章 搜索框-默認(rèn)狀態(tài)

搜索框的默認(rèn)UI/UX樣式，取決于網(wǎng)站的業(yè)務(wù)性質(zhì)，取決于搜索功能的重要性，取決于頁(yè)面布局。

一、位置

搜索框的位置放在哪里，取決于搜索功能對(duì)于網(wǎng)站的重要性。

N年前，就有很多小伙伴引用過如下研究報(bào)告了，我重復(fù)下吧。

Dawn Shikh 與 Keisi Lenz 的研究：展示了在142個(gè)參與者的調(diào)查中，網(wǎng)站搜索框的期望位置。研究發(fā)現(xiàn)，對(duì)用戶來(lái)說最方便使用的地方是網(wǎng)站的左上角與右上角位置。用戶可以使用常見的F形掃描模式輕松找到它。

如圖，搜索框要放置在網(wǎng)站的右上角或者中間位置，這是用戶所期望的位置。

目前大部分網(wǎng)站在UI布局搜索框時(shí)，也是大致遵循這個(gè)規(guī)則的。但總體來(lái)說，搜索框的位置，還是可以分為如下幾種：

1.  頁(yè)面-居中

2.  頁(yè)面-頂部居中

3.  頁(yè)面-頂部右邊

4.  其他

那么，分別討論：

1.    頁(yè)面-居中

為啥居中？當(dāng)然因?yàn)閷?duì)于網(wǎng)站，搜索是核心功能。如果沒有搜索功能的話，業(yè)務(wù)幾乎無(wú)法開展。它最最最重要啦！

1）絕對(duì)居中

這種一般適用于搜索引擎的首頁(yè)。頁(yè)面基本就是一屏，搜索是最主要功能，其他內(nèi)容不重要。

比如Google, 百度。

Google的界面就相當(dāng)干凈清爽。嘿，我就是純搜索的，趕緊搜唄！

百度，可以只顯示一個(gè)搜索框。

如圖所示的搜索框下的大塊資訊，是可以在設(shè)置中隱藏的，不想看，關(guān)掉就好。

2）相對(duì)居中，垂直略靠上部。

適用于數(shù)據(jù)庫(kù)網(wǎng)站的首頁(yè)。

因?yàn)閿?shù)據(jù)庫(kù)的數(shù)據(jù)量動(dòng)不動(dòng)就是千萬(wàn)、上億的，搜索是極其重要的功能，99%的用戶都是帶著目的來(lái)的，直接通過搜索找數(shù)據(jù)的。搜索框需要極其醒目，需要占據(jù)首屏大部分的位置。

但考慮到數(shù)據(jù)庫(kù)網(wǎng)站的首頁(yè)也需要展示其他信息，來(lái)增加用戶粘性，一般會(huì)有好幾屏，比如最新信息，熱點(diǎn)信息之類的。這些就放在搜索框大區(qū)塊的下方了。

比如 官方司法權(quán)威網(wǎng)站-中國(guó)裁判文書網(wǎng)，全國(guó)的1億多個(gè)案件都在這個(gè)數(shù)據(jù)庫(kù)里，供免費(fèi)查閱。搜索數(shù)據(jù)是核心功能，因此搜索框最醒目，占首屏大部分位置。其他信息依次往下布局展示。

2.   頁(yè)面-頂部居中

為啥頂部居中？因?yàn)榫W(wǎng)站業(yè)務(wù)中，搜索是重要功能，但不是全部。不用夸大顯示，但頂部的居中好位置要留給它。

一般適用于電商平臺(tái)，資訊平臺(tái)。

這些網(wǎng)站中，展示商品、廣告、信息才是重點(diǎn)，是為了促成交易，增加流量的。搜索是工具，比較重要，但不是重點(diǎn)，只是為了達(dá)成目的的一個(gè)手段。因此可以放在頁(yè)面頂部且居中的顯眼好位置，重要，但是不過分夸張。

用戶場(chǎng)景：

如果用戶是漫無(wú)目的的瞎逛，可以隨便瀏覽頁(yè)面中提供的大量信息。

如果用戶是有目的的找某個(gè)商品或信息，也能很容易的在頁(yè)面頂部找到搜索框，定位目標(biāo)。

比如，電商平臺(tái)-京東

比如，視頻平臺(tái)-Youtube

看到了嗎？頂部中間，不太顯眼的那個(gè)灰色搜索框。

3.  頁(yè)面-頂部右邊

為啥頂部右邊？因?yàn)榫W(wǎng)站業(yè)務(wù)中，搜索只是輔助功能，居中這么好個(gè)位置沒必要，放右邊看得見就行了。

比如， Dribbble

Dribbble，設(shè)計(jì)師都知道。一般大家都是去隨便看看找靈感的，瀏覽信息是重點(diǎn)，搜索功能不太重要，放邊上就行了。

比如，小米

提問：有同學(xué)會(huì)問，嗯哼，這是電商網(wǎng)站呀，要賣產(chǎn)品呀。為什么不像淘寶京東一樣放頂部居中呀？

回答：因?yàn)?，這是品牌自己的平臺(tái)呀，就那么幾個(gè)品類，在頂部導(dǎo)航條內(nèi)，側(cè)邊導(dǎo)航條內(nèi)都已經(jīng)展示得清清楚楚了，鼠標(biāo)點(diǎn)點(diǎn)就行了。搜索是次要的功能。

根據(jù)設(shè)計(jì)原則——奧卡姆剃刀原理（簡(jiǎn)單有效原理）

*  只放置必要的東西

*  給予更少的選項(xiàng)

頂部的品類導(dǎo)航條本身就能幫用戶找到產(chǎn)品了，可以直達(dá)分類頁(yè)面，是非常重要的入口，也是重要的產(chǎn)品宣傳，需要放在頂部首行的位置。

搜索是輔助功能（此處相信小米的PM是分析過search usage的），放在次要位置就可以了。

不需要同時(shí)突出搜索框+品類導(dǎo)航條，來(lái)增加用戶的選擇成本。

另外，要是搜索框居中了，那展示品類的重要導(dǎo)航條就得布局在第二行。Web/APP的第一屏都是黃金位置，能省一行是一行。

4.    其他

1）可以放logo的右邊。

比如google的搜索結(jié)果頁(yè)

從設(shè)計(jì)理念上說，google的搜索框和logo放在一起，也能組成品牌和搜索引擎之間的強(qiáng)關(guān)系。即google=search. 用戶們不也早就說，“你google一下”，而不是“你搜索一下了”嘛!

從UI上說，搜索引擎的內(nèi)頁(yè)一般只有列表，這樣搜索框也能和列表左對(duì)齊，布局清晰。

2）其他位置，根據(jù)情況判斷。

比如Figma界面，文章最后有圖。此處不贅述。

二、寬度

搜索框的寬度（包括input box + search button），同樣取決于搜索功能的重要性。其中，大概率取決于上文所述的搜索框的位置。

其次，也需要考慮輸入的關(guān)鍵字的字符數(shù)。

另外，根據(jù)整體布局決定。

一般情況下，220px<寬度<650px。 請(qǐng)注意, 這是建議的相對(duì)值，不是絕對(duì)值。只表示搜索框在大部分Web中的情況，具體需根據(jù)自己的頁(yè)面情況調(diào)整。實(shí)際應(yīng)用中，也有搜索框最長(zhǎng)到1000px的情況。也有比220px更短的。

根據(jù)搜索框在頁(yè)面中的不同位置，搜索框?qū)挾确謩e如下：

1.    如果搜索框位置在頁(yè)面居中，那搜索功能也極其重要，那當(dāng)然寬一點(diǎn)。

比如上文提到的google，百度。搜索框?qū)挾韧ǔ９潭ㄔ?50px以內(nèi)，保證在所有分辨率中都能顯示全。也保證了可顯示的關(guān)鍵字字符數(shù)大于60個(gè)（即60個(gè)字母，30個(gè)中文字），大大的足夠了。

2.    如果搜索框位置在頂部居右，那搜索就是輔助功能，那當(dāng)然短一點(diǎn)。

具體寬度，需要考慮頂部UI布局情況。但一般不小于220px（大概數(shù)值，自己平衡）. 不然就不太方便輸入關(guān)鍵字了，或者關(guān)鍵字就顯示不了幾個(gè)了。

3.    那如果搜索框位置在在頂部居中呢？則可長(zhǎng)可短，根據(jù)業(yè)務(wù)情況和頁(yè)面布局判斷。

如果為了用戶體驗(yàn)好的話，搜索框?qū)挾纫残枰紤]「響應(yīng)式設(shè)計(jì)Responsive Design」。

既然都說到 「響應(yīng)式設(shè)計(jì)」了，那么就提一下吧。

概念：

響應(yīng)式設(shè)計(jì)（Responsive Design）是頁(yè)面布局可以「響應(yīng)」不同尺寸屏幕的設(shè)計(jì)方法。通常我們說起響應(yīng)式設(shè)計(jì)都是針對(duì)網(wǎng)頁(yè)設(shè)計(jì)的。同一個(gè)頁(yè)面，隨著屏幕尺寸的改變，自適應(yīng)地改變頁(yè)面布局。

通俗來(lái)說，這個(gè)網(wǎng)頁(yè)就可以自動(dòng)適應(yīng)手機(jī)，平板，和電腦的各個(gè)分辨率。用戶在各個(gè)設(shè)備上瀏覽這個(gè)web頁(yè)時(shí)，頁(yè)面布局和交互都是自動(dòng)調(diào)節(jié)的，相當(dāng)舒適。

以頁(yè)面中的單個(gè)功能區(qū)為例：

*  比如，內(nèi)容區(qū)塊的在一定程度上能夠自動(dòng)調(diào)整，以確保填滿整個(gè)頁(yè)面。

*  比如，網(wǎng)格排布，能夠減少/增加排布的列數(shù)。如圖片布局在“1行1列” 到“1行N列” 之間，自動(dòng)調(diào)整列數(shù)。

*  比如，能夠適應(yīng)比例變化的圖片。圖片自動(dòng)調(diào)整大小。

*  比如，篩選功能在網(wǎng)頁(yè)里是在頁(yè)面左側(cè)一列，全部展開顯示的，在手機(jī)里就可以隱藏顯示，通過按鈕點(diǎn)擊，有滑出菜單之類的。

Tips: 做響應(yīng)式設(shè)計(jì)，需要公司舍得投入資源，因?yàn)樯婕暗胶芏囝~外的工作量。最起碼有以下：

*  Designer | 設(shè)計(jì)——做3套設(shè)計(jì)。

*  Frontend Engineer | 前端——寫響應(yīng)式設(shè)計(jì)的代碼，可寫1套，可寫3套（方便維護(hù)）。

*  QA Engineer | 測(cè)試——測(cè)不同的分辨率，最起碼測(cè)3套。這還沒算fix bug后的retest.

為啥3套？因?yàn)獒槍?duì)分辨率需要做2個(gè)節(jié)點(diǎn)。我司一般是792px<X<1440px

好了，響應(yīng)式設(shè)計(jì)就大概講一下吧。不然又能寫好幾頁(yè)。收~

以Youtube為例，大家可以感受下搜索框的響應(yīng)式設(shè)計(jì)。

搜索框的寬度是會(huì)自動(dòng)調(diào)節(jié)的。最小的時(shí)候就一個(gè)放大鏡圖標(biāo)（此時(shí)為適應(yīng)手機(jī)分辨率），但最寬也就是固定到640px，不然太寬了，輸入關(guān)鍵詞時(shí)，搜索按鈕離得太遠(yuǎn)，點(diǎn)擊也會(huì)很不方便。

三、 按鈕樣式

搜索框的按鈕樣式，同樣取決于搜索功能的重要性。也需要平衡整體頁(yè)面布局。

按鈕樣式大致情況，如下圖所示：

*  色塊帶圖標(biāo)的

*  只有一個(gè)圖標(biāo)的

*  沒有按鈕的

*  色塊帶圖標(biāo)+文字的。

*  其他（比如就一個(gè)放大鏡圖標(biāo)等。圖片中沒做展示）

具體怎么應(yīng)用，詳見后文：

四、 正常顯示 or 簡(jiǎn)化顯示？

九、 一個(gè)頁(yè)面里有2個(gè)搜索框怎么處理？

四、正常顯示 or 簡(jiǎn)化顯示？

有些Web中的搜索框，因?yàn)楦鞣N原因，可能就會(huì)做簡(jiǎn)化。而不是整個(gè)顯示，這個(gè)需要根據(jù)情況決定，就是——隨機(jī)應(yīng)變~

比如，Apple官網(wǎng)，只顯示一個(gè)放大鏡圖標(biāo)。

此處跟上文提到的小米官網(wǎng)的情況類似。商品品類就這些，導(dǎo)航條突出品類，搜索功能弱化。

但蘋果在此處更弱化了搜索，只放一個(gè)放大鏡圖標(biāo)。（從UI上看，目測(cè)是由于導(dǎo)航條中品類太多，放不下搜索框了。） 等用戶點(diǎn)擊了放大鏡圖標(biāo)后，才使用CSS / JS特效，滑動(dòng)顯示完整的搜索框，且居中顯示。

再比如，Airbnb 愛彼迎，全球民宿短租公寓預(yù)訂平臺(tái)。

網(wǎng)站中，搜索功能很重要，是用戶預(yù)定，增加銷售的入口。因此需要突出搜索框。

*  首頁(yè)，默認(rèn)顯示完整的搜索框。

*  當(dāng)頁(yè)面滾動(dòng)時(shí)，搜索框置頂顯示，方便用戶查詢和預(yù)定，增加潛在銷售可能。但是這個(gè)搜索框的內(nèi)容太多，硬要在置頂層中全部顯示的話，這個(gè)始終置頂?shù)膶拥母叨染蜁?huì)很高，會(huì)影響用戶瀏覽頁(yè)面內(nèi)容。

那么就把搜索框略微簡(jiǎn)化，相應(yīng)的高度也就小了。（不建議只放一個(gè)放大鏡按鈕，太弱化搜索功能了。會(huì)流失潛在客戶，流失潛在銷售可能）

*  搜索框在置頂層中居中顯示，點(diǎn)擊簡(jiǎn)化版搜索框后，才動(dòng)效顯示完整的搜索框。

五、默認(rèn)要顯示提示文字??！

在輸入框中可以提示搜索示例，告知網(wǎng)站支持哪些內(nèi)容的搜索，以及如何使用功能。防止用戶一臉懵，優(yōu)化用戶體驗(yàn)。

通常適用于數(shù)據(jù)庫(kù)，資訊類這些內(nèi)容類型較多的網(wǎng)站。

比如，天眼查。（垂直頂部居中的搜索框）

比如，網(wǎng)易云音樂。 （右上角搜索框）

六、推薦詞

基于業(yè)務(wù)需要，搜索框內(nèi)經(jīng)常會(huì)有推薦詞，方便用戶不用輸入關(guān)鍵詞就可以直達(dá)結(jié)果。同時(shí)，也是一種對(duì)商品的促銷，對(duì)資訊的推廣。根據(jù)不同需要，可以有不同的顯示方式。

Tips: 推薦詞，熱搜詞，促銷，廣告都可以這么處理。

1. 框內(nèi)

1）單個(gè)推薦詞交替顯示

比如，小米官網(wǎng)

截圖為動(dòng)態(tài)圖哦，大概5秒換一個(gè)推薦詞。個(gè)人覺得間隔時(shí)間有點(diǎn)長(zhǎng)了。

2）多個(gè)推薦詞同時(shí)顯示

比如，LexisNexis 全球頂級(jí)法律數(shù)據(jù)庫(kù) 中國(guó)站

沒有和小米一樣，做1個(gè)推薦詞的動(dòng)態(tài)交替顯示，是因?yàn)橛脩魣?chǎng)景不同。

考慮到LexisNexis的用戶都是律師群體，工作中時(shí)間寶貴。使用網(wǎng)站不是閑逛，而是為了快速查詢數(shù)據(jù)，沒有時(shí)間等待。因此一次性顯示2-3個(gè)推薦詞，方便用戶直接看到，直接點(diǎn)擊。

提示：推薦詞可能會(huì)大于3個(gè)的，比如有8個(gè)。那就在用戶每次回到首頁(yè)后，顯示一批新的推薦詞。

或者，直接顯示在框外，如下文所述。

2. 框外

比如，淘寶

七、有很多分類怎么辦？

如果要針對(duì)很多內(nèi)容類型分別搜索怎么辦呢？搜索框怎么處理呢？有很多方法。

按復(fù)雜程度，依次進(jìn)階如下：

1. 下拉框型

一般用下拉框了，那通常分類對(duì)于搜索不是太重要，不用突出顯示。

2.Tab型

如果用tab來(lái)展示分類了，那目的通常是：

*  推廣產(chǎn)品或內(nèi)容

*  引導(dǎo)用戶，優(yōu)化用戶體驗(yàn)

1）橫版顯示。比如 某房產(chǎn)網(wǎng)站

2）豎版顯示。比如 知網(wǎng)

搜索框的左側(cè)的3個(gè)Tab為內(nèi)容類型分類。

搜索框中展開的下拉框中是字段，此處一并展示。

3）豎版+橫板顯示。比如 某房產(chǎn)網(wǎng)站

如上圖，是豎版分類+橫版的兩個(gè)搜索按鈕。

如上圖，是豎版的分類+橫版的分類。橫版的分類還做了2級(jí)分類。分類太多，相信設(shè)計(jì)師們?cè)谔幚頃r(shí)也挺頭大。

八、 一個(gè)頁(yè)面里有2個(gè)搜索框怎么處理？

回答：哪個(gè)重要，就突出顯示哪個(gè)唄！

以Amazon為例，

該頁(yè)為商品評(píng)論頁(yè)面。

*  頂部搜索框?yàn)槿舅阉?，非常重要。因此寬度較長(zhǎng)，按鈕為亞馬遜的主色調(diào)黃色，醒目。

*  頁(yè)面內(nèi)的搜索框，為針對(duì)評(píng)論內(nèi)容的搜索，則相對(duì)弱化。

第二章 搜索框-光標(biāo)觸發(fā)的狀態(tài)

搜索框的默認(rèn)狀態(tài)講完了。那么當(dāng)鼠標(biāo)點(diǎn)擊搜索框，此時(shí)還沒有輸入任何內(nèi)容，那么光標(biāo)觸發(fā)的狀態(tài)是怎樣的呢？通常，根據(jù)業(yè)務(wù)情況，大多數(shù)搜索框都會(huì)自動(dòng)彈出下拉框。

我們此處只討論下拉框中的顯示情況。

一、下拉框中，歷史記錄+熱搜詞是大部分網(wǎng)站的標(biāo)配。

比如，B站。

二、 下拉框中，在歷史記錄+熱搜詞的基礎(chǔ)上，再添加些網(wǎng)站自己想推廣的內(nèi)容。

比如，Zcool本酷。

三、下拉框中，根據(jù)網(wǎng)站自身業(yè)務(wù)情況，顯示個(gè)性化內(nèi)容。

1. 比如 Zillow, 美國(guó)知名房產(chǎn)估價(jià)網(wǎng)

網(wǎng)站業(yè)務(wù)就是估房?jī)r(jià)。下拉框中，第一行就是“當(dāng)前位置”，點(diǎn)擊后跳轉(zhuǎn)到結(jié)果頁(yè)，顯示定位地址的相關(guān)結(jié)果。優(yōu)化用戶體驗(yàn)。

2.    比如，攜程。

攜程的業(yè)務(wù)結(jié)構(gòu)相對(duì)復(fù)雜，搜索也就相對(duì)復(fù)雜。搜索項(xiàng)同時(shí)也涉及到很多字段/參數(shù)，其實(shí)也類似表單了。后面有機(jī)會(huì)可以講下表單的交互，此處不延伸討論了。大家有興趣可以去逛逛攜程。

第三章 搜索框-搜索中的狀態(tài)

在搜索框中，一旦開始輸入字符，那新一輪的交互又開始了。

一、 默認(rèn)交互

目前通用的規(guī)則——搜索聯(lián)想功能，Google已經(jīng)定義好了。我就不重復(fù)寫了，如下摘自UXPlanet：

Google自2008年以來(lái)掌握并實(shí)施了“搜索聯(lián)想”。

 “搜索聯(lián)想”（自動(dòng)建議）可以幫助用戶通過已輸入的文本來(lái)預(yù)測(cè)可以找到的查詢結(jié)果，為用戶節(jié)省了時(shí)間并創(chuàng)造了更加便捷的體驗(yàn)。

交互細(xì)節(jié)如下：

*  確保搜索聯(lián)想是有效的，設(shè)計(jì)不完善的搜索聯(lián)想會(huì)混淆和分散用戶的注意力，所以使用拼寫自動(dòng)更正、詞根識(shí)別、語(yǔ)義識(shí)別和預(yù)測(cè)，可以改進(jìn)搜索體驗(yàn)。 

（Lu傾傾 注：中文搜索還要識(shí)別拼音）

*  盡可能快速的提供搜索聯(lián)想，例如輸入到第三個(gè)字的時(shí)候，就給用戶提供相匹配的聯(lián)想詞匯，以此減少用戶數(shù)據(jù)錄入的工作。

（Lu傾傾 注：現(xiàn)在其實(shí)輸入第1個(gè)字就可以提供聯(lián)想了。）

*  只提供少于10個(gè)項(xiàng)目的聯(lián)想詞句（不建議使用滾動(dòng)條），否則信息將會(huì)變得難以承受。

*  允許用戶通過鍵盤的上下鍵控制選擇列表。

（Lu傾傾 注：

百度在使用“鍵盤”（鼠標(biāo)不行）上下選擇列表時(shí)，如果高亮在某個(gè)聯(lián)想詞上停頓2秒以上，則等同于“回車鍵”，整個(gè)頁(yè)面的搜索結(jié)果刷新。 Google不支持此功能。

這是用戶體驗(yàn)的差異）

*  UI上，已輸入文本和建議文本視覺上保持差異（例如，通常情況下建議的詞匯通過加粗表示）

二、 個(gè)性化交互

1. 比如，Google

（Google作為搜索引擎的燈塔，搜索交互亮點(diǎn)的地方太多太多了，這里只舉個(gè)小例子。）

如上圖，不只在下拉框中展示搜索聯(lián)想的關(guān)鍵詞。

還把關(guān)鍵詞作為一個(gè)詞條顯示給客戶，比如電影，比如品牌。還同時(shí)顯示各自的參數(shù)，比如 圖片，字段。

可以幫助用戶了解信息，精準(zhǔn)定位。

2. 比如，維基百科。

由于網(wǎng)站的定位不同。維基百科是一個(gè)百科全書，其中都是各類詞條相關(guān)的知識(shí)/信息。因此下拉框中的聯(lián)想，都是以詞條形式顯示的。包含了圖片，詞條名， 參數(shù)/字段。

3. Amazon 亞馬遜

亞馬遜的用戶體驗(yàn)也是做到極致了。搜索下拉框除了提供搜索聯(lián)想的關(guān)鍵詞，還按照不同的特殊關(guān)鍵詞，提供不同的參數(shù)選項(xiàng)，方便用戶一步到位，不用再到搜索結(jié)果頁(yè)里做一次篩選了。優(yōu)化用戶體驗(yàn)。

比如，想搜索“chair”, 輸入了關(guān)鍵詞“chai”(注意，還沒打全 chair)，下拉框中除了顯示chair相關(guān)的商品。還直接把chair的價(jià)格區(qū)間顯示出來(lái)，方便用戶點(diǎn)擊后，直接顯示相關(guān)搜索結(jié)果。

相信此處亞馬遜的PM們是做過usage分析的，chair列表頁(yè)中，應(yīng)該是 “價(jià)格”篩選的usage是最高的，并且極有可能用戶進(jìn)入chair列表頁(yè)的第一個(gè)用戶行為就是對(duì)價(jià)格做篩選。PM們就干脆把篩選項(xiàng)放到了搜索下拉框中了。

針對(duì)關(guān)鍵詞”ipad”, 也是同樣的交互處理方式，此處是顯示“尺寸”區(qū)間。

針對(duì)關(guān)鍵詞“alarm”,下拉框中按照鬧鐘的不同“功能”，顯示“圖片+分類“，方便用戶直接點(diǎn)擊。

【亞馬遜篇 番外】

在收集亞馬遜案例的時(shí)候，好玩就去搜了搜國(guó)貨之光“馬應(yīng)龍“，歪果仁們的評(píng)論簡(jiǎn)直是太歡樂了，看著看著我都笑出了鵝叫聲。

于是就跑偏了，翻譯了2個(gè)評(píng)論，貼了上來(lái)。大家看文章看久了，休息下~

三、搜索下拉框中的多選功能

以上，討論的都是輸入單個(gè)關(guān)鍵詞搜索的情況。

那么輸入多個(gè)關(guān)鍵詞的交互該怎么處理呢？

N年前，我在《交互設(shè)計(jì)稿-純實(shí)例》之前我寫過，此處不再贅述了。

如有興趣，請(qǐng)戳，https://www.zcool.com.cn/work/ZMjY4Nzg3MDA=.html

四、回車 or 不回車？

大部分的網(wǎng)站的搜索功能，都是需要在輸入關(guān)鍵詞后，點(diǎn)擊“搜索按鈕“ or “回車”，才展示新的搜索結(jié)果頁(yè)的。（此處不討論百度中，鍵盤移動(dòng)到聯(lián)想上就刷新結(jié)果頁(yè)等特殊情況）

即一定要有個(gè)確認(rèn)的命令，才觸發(fā)搜索。這里面有很多考慮。比如：

*  數(shù)據(jù)量大，如果是實(shí)時(shí)響應(yīng)+即時(shí)加載搜索結(jié)果頁(yè)，對(duì)服務(wù)器和代碼質(zhì)量的要求都太高。

*  用戶體驗(yàn)不太好。因?yàn)橛脩暨€沒輸入完，或者還沒確定。頁(yè)面就在不停的刷新，會(huì)干擾用戶。

但，也有個(gè)別工具軟件中，不用按回車，就實(shí)時(shí)刷新搜索結(jié)果。比如，F(xiàn)igma.

在軟件中，都是自己的存檔文件，數(shù)據(jù)量本身就不大。此時(shí)邊輸入關(guān)鍵字，邊實(shí)時(shí)響應(yīng)，刷新搜索結(jié)果頁(yè)，讓用戶隨時(shí)看到自己的文檔。這種情況下，不用按回車，用戶體驗(yàn)還更好。

以上，終于寫完了。

暫時(shí)寫到這吧，總結(jié)太累，但是值得！

最后，附上Amazon貝索斯的原話：

翻譯如下：（沒有太直譯，不然有點(diǎn)拗口）

“以用戶為中心”有很多優(yōu)點(diǎn)，但最大的一個(gè)就是：用戶是美麗的、棒棒的、不會(huì)滿意的，即使他們說我們的商業(yè)很贊，他們表示很開心很滿意。但他們其實(shí)想要更好的東西，不過他們自己并不知道。那么你的讓用戶愉悅的渴望，會(huì)驅(qū)使你代替他們?nèi)グl(fā)明創(chuàng)造。

——杰夫*貝索斯，2016年給股東的信

額，還是拗口。簡(jiǎn)單來(lái)說，就是：

筒子們，為了讓用戶高興，發(fā)揮你們做產(chǎn)品/交互的主觀能動(dòng)性吧，自己研究創(chuàng)造去，做個(gè)好產(chǎn)品出來(lái)。不用指望用戶告訴你做什么/怎么做，他們也不知道。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

一套完善的產(chǎn)品化設(shè)計(jì)系統(tǒng)，可以解決內(nèi)部協(xié)作的一致性問題，解決設(shè)計(jì)系統(tǒng)更新的周期性問題，解決一群設(shè)計(jì)師與工程師如何規(guī)模化的生產(chǎn)各種業(yè)務(wù)、UI的問題，從而最終解決用戶體驗(yàn)一致性的問題。說到自己，公司的產(chǎn)品從接手開始便是以antdesign作為前端框架，所以很多人會(huì)說后臺(tái)用antdesign、Element或者Taro的框架就足夠了呀，當(dāng)然不～在已有的成熟框架下，也并不能完全滿足產(chǎn)品日（sang）益（xin）旺（bing）盛（kuang）的需求，所以設(shè)設(shè)計(jì)規(guī)范還是很有必要的。

作為B端設(shè)計(jì)師，視覺表現(xiàn)層面權(quán)重逐漸減少，更多的是需要梳理邏輯流程，將線下業(yè)務(wù)更好的梳理到線上流程，所以熟知設(shè)計(jì)規(guī)范可以更效率的完成工作。

設(shè)計(jì)規(guī)范的目的：

1、解決內(nèi)部協(xié)作的一致性問題

為設(shè)計(jì)師內(nèi)部溝通協(xié)作起到?jīng)Q定作用，當(dāng)同一個(gè)項(xiàng)目存在多個(gè)設(shè)計(jì)師橫向設(shè)計(jì)的時(shí)候，設(shè)計(jì)規(guī)范會(huì)避免顏色錯(cuò)誤、間距失調(diào)、控件混亂等問題。

2、解決設(shè)計(jì)系統(tǒng)更新的周期性問題

隨著產(chǎn)品的不斷推進(jìn)和發(fā)展，為了新增的需求和不斷優(yōu)化的用戶體驗(yàn)，這時(shí)候會(huì)需要對(duì)某些規(guī)范控件進(jìn)行調(diào)整，在有設(shè)計(jì)規(guī)范的情況下，可以迅速對(duì)接開發(fā)快速全局調(diào)整控件，極大的提升了設(shè)計(jì)和開發(fā)的工作效率。

3、解決設(shè)計(jì)師與工程師如何規(guī)?；纳a(chǎn)各種業(yè)務(wù)

關(guān)于和開發(fā)對(duì)接，圖標(biāo)在如今有了iconfont的項(xiàng)目管理下，項(xiàng)目可以建立自己的圖標(biāo)庫(kù)。再加上設(shè)計(jì)建立的可復(fù)用的公共控件庫(kù)，開發(fā)可以更加快捷的復(fù)用控件，減少返工率，也為后期的修改降低開發(fā)成本。

關(guān)于建立后臺(tái)設(shè)計(jì)規(guī)范：

首先要了解項(xiàng)目適用的主要場(chǎng)景，也就是用戶爸爸一般是在什么情況下用什么樣的設(shè)備來(lái)進(jìn)行操作的，然鵝你永遠(yuǎn)不知道會(huì)有什么的場(chǎng)景和什么樣奇葩的設(shè)備在等待你。在后臺(tái)的設(shè)計(jì)群一直有一個(gè)經(jīng)久不衰的話題，那就是后臺(tái)設(shè)計(jì)的設(shè)計(jì)分辨率是向下適配還是向上適配更合適（是1980*1080 還是 1440*900 ），這兩者都是可以的，本案由于用戶使用筆記本的情況居多，且設(shè)備并不是很新所以采用1440*900的分辨率向上適配1980向下適配1200。
在清楚的了解到項(xiàng)目背景之后，開始著手于設(shè)計(jì)規(guī)范的建立，這里關(guān)于設(shè)計(jì)規(guī)范的建立是隨著設(shè)計(jì)的不斷深入從而不斷完善的，不必刻意深入，但是要隨時(shí)更新規(guī)范文檔。

關(guān)于頁(yè)面構(gòu)成

開發(fā)與設(shè)計(jì)所理解的頁(yè)面是不一樣的，所以會(huì)造成開發(fā)出來(lái)的頁(yè)面有時(shí)候會(huì)因?yàn)楦鞣N原因與高保真相差較大，在設(shè)計(jì)看來(lái)（比如sketch），一個(gè)頁(yè)面是由多個(gè)組結(jié)合而來(lái)，每個(gè)組里包含一個(gè)或多個(gè)字段、圖片和圖標(biāo)等，在調(diào)整大小、間距、顏色之后慢慢成為高保真。而在開發(fā)的角度來(lái)看，整個(gè)頁(yè)面就是由多個(gè)box構(gòu)成，盒子與盒子之間存在空白間隔，且盒子存在一定的屬性，例如盒子默認(rèn)對(duì)齊于左上，盒子之間相互嵌套或覆蓋需要基于所屬盒子來(lái)定位。

顏色

根據(jù)品牌背景和產(chǎn)品定位來(lái)確定你的品牌色，用于字體、icon、按鈕、插畫等業(yè)務(wù)流程。功能色則是為特殊場(chǎng)景，例如失敗、成功、提醒等情況。

字體

通過購(gòu)買商用字體或使用免費(fèi)字體來(lái)使用，如果選用免費(fèi)字體同時(shí)也要注意區(qū)分系統(tǒng)，通常情況下mac系統(tǒng)使用默認(rèn)字體蘋方字體，windows系統(tǒng)使用微軟雅黑。如今免費(fèi)等字庫(kù)已經(jīng)越來(lái)越多了，所以這對(duì)設(shè)計(jì)師來(lái)說是一個(gè)好消息，今年阿里也在UCAN上公布了普惠體，年尾oppo也推出了自己的免費(fèi)字體，文章末尾附上群友整理的免費(fèi)字體導(dǎo)圖。

邊角

倒角的使用可以起到樣式的區(qū)分，從而讓用戶感知到功能區(qū)域的分別。

圖標(biāo)

快速幫助用戶理解產(chǎn)品并順利完成操作，好的圖標(biāo)具有高度濃縮并快捷傳達(dá)、便于記憶的特性，能夠更好的傳達(dá)品牌特性。

陰影

陰影的添加可以更好的提高界面品質(zhì)，讓用戶易于區(qū)分功能區(qū)域

按鈕

按鈕是傳達(dá)它將要發(fā)起動(dòng)作的載體。 用戶可以點(diǎn)擊一個(gè)按鈕來(lái)開始一個(gè)過程或工作流程，或觸發(fā)一個(gè)動(dòng)作。

用法：

1、要傳達(dá)重要的行動(dòng)。如：提交表單；

2、要導(dǎo)航到另一個(gè)屏幕，觸發(fā)一個(gè)模式或啟動(dòng)一個(gè)動(dòng)作。如：在進(jìn)程中指定新的動(dòng)作或模式；

3、按鈕上的文本應(yīng)保持簡(jiǎn)潔，帶著明確、可操作的動(dòng)詞，例如：注冊(cè)、下一步、下載 ；

4、優(yōu)先考慮最重要的行動(dòng)。行動(dòng)號(hào)召太多會(huì)引起混亂，并使用戶不知道下一步該做什么。

選擇輸入框

如無(wú)特殊需求，則默認(rèn)采用框架內(nèi)輸入框，特殊情況可同研發(fā)一起討論修改。這邊因?yàn)橐恍┨厥庠?，在修改了代碼的情況下實(shí)現(xiàn)了標(biāo)題、選擇、輸入同時(shí)在框架內(nèi)，這樣為寸土寸金的后臺(tái)界面留出了更多的空間。

表格

表格在后臺(tái)系統(tǒng)中無(wú)處不在，對(duì)數(shù)據(jù)管理和分析起到了重要的作用，方便用戶閱讀，分析和比較數(shù)據(jù)。表格一般由表頭、表尾、數(shù)據(jù)單元格組成。

模態(tài)/非模態(tài)彈窗

用戶交互的兩種方式，模態(tài)彈窗強(qiáng)制交互完成當(dāng)前操作流程，非模態(tài)則是弱提示。

缺省狀態(tài)

缺省頁(yè)是指操作異常狀態(tài)下給予用戶反饋的提示頁(yè)面，它的作用不僅是提醒用戶，安撫情緒；更重要的是用“空白”觸發(fā)用戶的操作行為，營(yíng)造良好用戶體驗(yàn)。

結(jié)語(yǔ)

以上是我對(duì)于設(shè)計(jì)規(guī)范的部分總結(jié)，還有很多沒有涉及到，包括非常重要的可視化部分，可以多了解一下ECharts（https://www.echartsjs.com/zh/index.html），然后希望可以和大家互相學(xué)習(xí)。設(shè)計(jì)規(guī)范的建立是長(zhǎng)征的第一步，貫徹執(zhí)行才是根本，在B端龐大的設(shè)計(jì)系統(tǒng)中，我們需要維護(hù)好產(chǎn)品的組件庫(kù)，不斷的完善用戶體驗(yàn)和清晰的梳理線上業(yè)務(wù)，保證產(chǎn)品的功能需求才是重中之重。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)