本篇文章將分享 Web 端系統(tǒng)布局，從基本布局初識、網(wǎng)格、布局模塊到柵格進(jìn)行完整鏈路內(nèi)容整合，以簡單易懂的案例與大家進(jìn)行探討。

在以往的學(xué)習(xí)過程中，我發(fā)現(xiàn)市面上大部分文章對于 Web 端系統(tǒng)布局內(nèi)容講的比較籠統(tǒng)，一般提及較多的是網(wǎng)頁柵格相關(guān)的內(nèi)容，但是一些關(guān)聯(lián)性和原子結(jié)構(gòu)等相關(guān)內(nèi)容較少。比如，了解布局時(shí)應(yīng)該需要了解哪些方法論？什么是網(wǎng)格？網(wǎng)格與柵格之間是什么關(guān)系？柵格與布局之間是什么關(guān)系等。我會從這些缺失出發(fā)，結(jié)合工作經(jīng)驗(yàn)與實(shí)際案例為大家進(jìn)行分享。

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

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

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

了解布局

1. 布局方法論

視覺層次

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

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

格式塔理論

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

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

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

信息框架

剛剛我們也介紹了視覺層級結(jié)構(gòu)和格式塔理論，接下來簡單介紹一下信息框架，它也是在系統(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)布局的骨架，方便用戶在瀏覽或操作頁面時(shí)能夠快速找到重點(diǎn)內(nèi)容，提升用戶使用效率。我們用今日頭條 Web 端和飛書 Web 端兩個(gè)線上產(chǎn)品作為案例分析吧，今日頭條和飛書屬于兩種完全不同類型的產(chǎn)品，那么其信息架構(gòu)也完全不同。

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

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

小結(jié)

所以對于設(shè)計(jì)師而言，在設(shè)計(jì)頁面時(shí)必須熟練掌握一些基本設(shè)計(jì)基礎(chǔ)知識，并且將這些知識靈活運(yùn)用到實(shí)際的工作當(dāng)中。比如設(shè)計(jì)師在搭建系統(tǒng)布局時(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ì)師）跨平臺使用并且能夠適配不同屏幕尺寸，目的是達(dá)到一致性，可適配、可控性原則。

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

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

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

3. 適配方案

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

4. 框架

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

背景層

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

內(nèi)容層

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

全局控制層

全局控制層我們定義他在內(nèi)容層之上，屬于頁面第三層級內(nèi)容，一般在業(yè)務(wù)場景中對整個(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)先級高于內(nèi)容層，一般承載當(dāng)前需要臨時(shí)處理的任務(wù)或者需要進(jìn)行內(nèi)容補(bǔ)充說明等功能。如：Modal（Dialog 各個(gè)平臺叫法不一致）、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)，反饋較輕，不干擾用戶使用界面。如下圖的頁面中的內(nèi)容彈層使用了 Popover，在次頁面它的功能就是加以補(bǔ)充說明。

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

1. 單位

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

• 「PX」pixel，像素，大多數(shù)電子設(shè)備成像的基本單元，同樣尺寸的屏幕成像單元越細(xì)小、越密集的屏幕，分辨率就越高；
• 「PT」point，點(diǎn)，這個(gè)單位，就同時(shí)出現(xiàn)在 iOS、CSS、還有傳統(tǒng)的平面設(shè)計(jì)里，與 px 相比 px 是相對單位而 pt 絕對單位，如在設(shè)計(jì)稿中如果導(dǎo)出一倍圖 1px=1pt 那么導(dǎo)出二倍圖就是 2px=1pt，它是一個(gè)絕對長度，為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ā)用的長度單位，1dp等于屏幕像素密度為 160ppi 時(shí) 1px 的長度，因此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)，我們簡稱密度為 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)格單元格組成，它是可以用來擺放頁面元素。如下圖所示，橘黃色的行網(wǎng)格線和列網(wǎng)格線交叉處即是網(wǎng)格區(qū)域。

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

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

在我制定的規(guī)范中一般會把網(wǎng)格的基數(shù)設(shè)置為 4，它不僅符合偶數(shù)的思路同時(shí)也能夠匹配多數(shù)主流的顯示設(shè)備，如中臺系統(tǒng)的用戶主流分辨率用 1440*900、1366*768、1280*800。我們可以通過設(shè)置網(wǎng)格規(guī)范幫助設(shè)計(jì)師快速搭建頁面，使用有律可循的布局空間的設(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ù)作為組件的大小和頁面元素間距分割，如下圖：

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

定義布局模塊

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

1. 上下布局

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

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

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

2. 左右布局

設(shè)計(jì)師在設(shè)計(jì)重內(nèi)容，輕導(dǎo)航類型網(wǎng)站是常用左右布局作為基礎(chǔ)框架進(jìn)行頁面設(shè)計(jì)。此布局把系統(tǒng)頁面分為兩大模塊，其中設(shè)計(jì)師常見的做法是將左側(cè)設(shè)置成導(dǎo)航欄模塊并且固定，常常用來控制全局內(nèi)容。而右側(cè)區(qū)域設(shè)置成工作區(qū)域或內(nèi)容區(qū)，內(nèi)容區(qū)可進(jìn)行動態(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ì)師考慮到瀏覽器窗口有限所以對導(dǎo)航設(shè)計(jì)成較小模塊，而右邊為聊天窗口對于業(yè)務(wù)屬性分析它更為重要，所以模塊較大。其導(dǎo)航欄固定，內(nèi)容區(qū)可進(jìn)行動態(tài)縮放。

3. T字型布局

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

下圖是 Material Design 設(shè)計(jì)文檔，首先簡單介紹一下 Material Design，它是由谷歌的設(shè)計(jì)團(tuán)隊(duì)創(chuàng)建的一種語言，宗旨是幫助設(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ǔ)布局。頁面分為了三個(gè)模塊，其中頂部導(dǎo)航作為頁面一級內(nèi)容進(jìn)行全局控制，接下來左邊為側(cè)邊導(dǎo)航作為二級內(nèi)容控制頁面，右邊是內(nèi)容區(qū)滿足用戶使用瀏覽。從放眼望去整個(gè)頁面架構(gòu)清晰明了。

4. 小結(jié)

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

網(wǎng)頁柵格

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

首先網(wǎng)頁柵格系統(tǒng)基本由是柵格總寬度/頁面總寬度（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ā)開源工具庫Bootstrap 與 Foundation 中廣泛使用，適用于業(yè)務(wù)信息分組較少、業(yè)務(wù)結(jié)構(gòu)較簡，單個(gè)盒子內(nèi)信息體積較大的中后臺頁面設(shè)計(jì)。24 等分的柵格系統(tǒng)適用于業(yè)務(wù)信息量大、信息分組較多、單個(gè)盒子內(nèi)信息體積較小的中后臺頁面設(shè)計(jì)；相對 12 柵格系統(tǒng)，24 柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場景。如下圖分別是 12 柵格系統(tǒng)（左）和 24 柵格系統(tǒng)（右）。

6. 小結(jié)

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

寫在最后

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

文章來源：優(yōu)設(shè)

目錄：

一、鍵盤與命令類型

二、設(shè)計(jì)要點(diǎn)

三、有意思的鍵盤交互

畢竟該處是表單輸入的交互終點(diǎn)，用‘前往（Go）、登錄（Join）’這些命令詞是不是更準(zhǔn)確些呢？

文章來源：UI中國

設(shè)計(jì)并不只是為了區(qū)分市場定位，在視覺上對產(chǎn)品做一些修修補(bǔ)補(bǔ)。設(shè)計(jì)需要從品牌自身出發(fā)，設(shè)計(jì)出來的產(chǎn)品才能與用戶產(chǎn)生情感交流、為品牌而發(fā)聲，這樣的設(shè)計(jì)才能真正為品牌創(chuàng)造長尾的價(jià)值。

前陣子和朋友去看車，我們?nèi)サ牡谝患业晔俏譅栁郑譅栁种鞔虻钠放评砟钍恰赴踩埂缚煽俊?，?dāng)時(shí)我在沃爾沃店里看的每一輛車的外形就像從金屬盒子進(jìn)化來的，棱角分明、線條硬朗，同時(shí)每個(gè)部件都相當(dāng)厚實(shí)，當(dāng)時(shí)我坐在車?yán)锏臅r(shí)候，感覺自己像是坐進(jìn)了一個(gè)大保險(xiǎn)箱，里三層外三層把我包裹起來，坐在里面特別有安全感。

我們?nèi)サ牧硪患业晔菍汃R，寶馬的品牌概念主打的是「時(shí)尚」「運(yùn)動」，所以寶馬車給人的感覺和沃爾沃又完全不同了。它的流線感非常明顯，而且這種流線型設(shè)計(jì)一直延伸到車內(nèi)的每一個(gè)部件。印象特別深的是，車?yán)镒蔚睦笾ζぜy和我們常見的品皮質(zhì)特別相似，讓我感覺自己像是坐進(jìn)一個(gè)時(shí)尚的愛馬仕箱包里。

其實(shí)無論是工業(yè)設(shè)計(jì)，還是我們的用戶界面設(shè)計(jì)，好的設(shè)計(jì)給用戶的感受與品牌理念是相契合的。設(shè)計(jì)中的每一個(gè)細(xì)節(jié)都是圍繞品牌自身而展開，設(shè)計(jì)出來的產(chǎn)品才能夠成為品牌的具象化延伸，與用戶產(chǎn)生情感交流的同時(shí)也會讓用戶更加忠誠于我們的品牌。具體怎么做？這需要我們運(yùn)用統(tǒng)一的設(shè)計(jì)語言來完成。

什么是設(shè)計(jì)語言？從設(shè)計(jì)的層面理解，當(dāng)你看到一組功能與形式相互融合，向你訴說其特色與優(yōu)點(diǎn)的產(chǎn)品，從而喚起你的情感反應(yīng)時(shí)，你正在體驗(yàn)的就是設(shè)計(jì)語言。簡單講，當(dāng)你的品牌運(yùn)用設(shè)計(jì)語言的時(shí)候，你的產(chǎn)品會跟人說話：會告訴人們它能做什么，怎么做，以及你的品牌是個(gè)什么樣的品牌。而這個(gè)設(shè)計(jì)語言也將會從前期的風(fēng)格設(shè)定到后期的設(shè)計(jì)執(zhí)行，始終貫穿在我們整個(gè)產(chǎn)品設(shè)計(jì)的流程當(dāng)中。

首先從一開始的風(fēng)格設(shè)定，比如每次我們設(shè)計(jì)師接到一個(gè) brief 都會先做視覺推導(dǎo)。但是我之前的視覺推導(dǎo)是這樣的：比如現(xiàn)在為一個(gè)類似拼多多的產(chǎn)品做設(shè)計(jì)，然后搜集了一圈競品的界面，發(fā)現(xiàn)拼多多、聚劃算、淘寶特價(jià)都是這種線框的、扁平的設(shè)計(jì)風(fēng)格，所以最后推導(dǎo)的結(jié)論就是——因?yàn)槲覀兤促徝嫦虻挠脩羧后w是低消費(fèi)人群，而競品的設(shè)計(jì)風(fēng)格是 xxxx 的，所以我們的用戶偏愛這種 xxxx 設(shè)計(jì)風(fēng)格，所以我們需要用這種風(fēng)格去設(shè)計(jì)我們的頁面。

搜狐總監(jiān)總結(jié)的競品分析方法：

其實(shí)這是一種循環(huán)論證，并不能推導(dǎo)出真正有價(jià)值的內(nèi)容。就像你問一個(gè)胖子「你為什么這么胖呀」，胖子說「因?yàn)槲页缘枚唷梗阌謫枴笧槭裁匆赃@么多呀」，胖子又說「因?yàn)槲遗?，所以需要吃多點(diǎn)」。

競品分析雖說也是一種前期設(shè)計(jì)調(diào)研的方法，但如果我們的設(shè)計(jì)只依賴于參考其他人怎么做，最后我們設(shè)計(jì)出來的產(chǎn)品不僅沒辦法向人們表達(dá)一個(gè)完整的品牌理念，而且我們的設(shè)計(jì)跟其他競品看起來很相似，失去了自己的特點(diǎn)與優(yōu)勢。

所以，在我們設(shè)定產(chǎn)品的設(shè)計(jì)風(fēng)格的時(shí)候就需要運(yùn)用統(tǒng)一的設(shè)計(jì)語言，產(chǎn)出能夠表達(dá)我們品牌特質(zhì)的設(shè)計(jì)。那具體怎么做？這里涉及 2 個(gè)關(guān)鍵點(diǎn)，一個(gè)是如何找到你的品牌特質(zhì)，另一個(gè)是如何針對這個(gè)品牌特質(zhì)找到對應(yīng)的設(shè)計(jì)語言。

元素 —— 圍繞品牌特質(zhì)

首先，想要找到我們的品牌特質(zhì)，我們可以從一個(gè)很有意思的原型中得到啟發(fā)。如果想讓我們的品牌真正能夠影響用戶，讓用戶為我們的品牌買單，我們的品牌就需要基于用戶內(nèi)心最深層次的需求，明白用戶買單的動機(jī)在哪里。這時(shí)候我們再對應(yīng)這些深層次的動機(jī)和需求做出設(shè)計(jì)，效果自然會事半功倍。那么如何能把品牌和用戶的動機(jī)需求連接起來呢？我們可以借助心理學(xué)家榮格的原型理論來一一對應(yīng)。

榮格的原型連接了人們最深層次的動機(jī)和感覺體驗(yàn)，表達(dá)了人們的基本需求，最重要的是他將這些需求都具像化為一個(gè)個(gè)角色。所以我們可以從中找到自己品牌的角色，并且在往后的發(fā)展中根據(jù)這個(gè)角色設(shè)定我們的品牌特質(zhì)和設(shè)計(jì)語言，進(jìn)而與用戶建立根深蒂固的聯(lián)系（相當(dāng)于為我們的品牌打造一個(gè)「人設(shè)」）。我們先看看榮格的原型具體有哪些：

1. 開拓者

我們也有稱之為探求者、朝圣者，它是敢于冒險(xiǎn)的、首創(chuàng)的、獨(dú)立的、不墨守成規(guī)的，更多的尋求自我實(shí)現(xiàn)和改變，擁有自由的價(jià)值觀、自給自足的。開拓者通常會在未知的領(lǐng)域，開創(chuàng)新的路徑。同時(shí)是個(gè)驅(qū)動力很強(qiáng)的非常有個(gè)性的人，能夠忍受探索新路上形單影只的孤獨(dú)。屬于這種角色設(shè)定的品牌比如有星巴克、路虎都是。

2. 守護(hù)者

守護(hù)者通常是說無私的、有同情心的、仁慈的人，給弱勢群體提供幫助和支持的，同時(shí)具有慷慨大方、自我奉獻(xiàn)的精神。守護(hù)者更多立志于他人的安危和福利，像這種角色的品牌稍微少點(diǎn)，通常是一些救濟(jì)會、慈善組織等等。

3. 愛人

愛人相關(guān)的特點(diǎn)像熱情的、美麗的、感性的尋求真愛和愉悅，追求愛的價(jià)值觀和親密關(guān)系。愛人通常是通過給予和獲得愛的強(qiáng)烈愿望所驅(qū)動的，這個(gè)不局限于愛情，友誼也包含在內(nèi)，主要是意味著情感，所以一般是香水或者化妝品品牌都是運(yùn)用這個(gè)原型角色。就像 dior，當(dāng)然還有巧克力費(fèi)列羅等等。

4. 魔術(shù)師

我們知道魔術(shù)師的形象通常是愛惡作劇的、滑稽的，有時(shí)候能夠跨界，打破禁忌，并且自身帶有樂趣，善于改變的。魔術(shù)師通?？释麡啡?，從單調(diào)的生活中解脫出來，敢于打破禁忌，質(zhì)疑不可能的事物。這種角色設(shè)定的品牌我們可以很快想到那個(gè)愛玩有趣、經(jīng)常跨界合作的百事可樂。

5. 創(chuàng)造者

創(chuàng)造者更強(qiáng)調(diào)藝術(shù)感、想象力、創(chuàng)新性，以及自我表現(xiàn)的價(jià)值觀和美感上的愉悅性。創(chuàng)造者通過精心制作用來表現(xiàn)自我的事物，讓人們耳目一新從而得到認(rèn)可。像這種強(qiáng)調(diào)創(chuàng)造力的品牌比如樂高，用有限的積木組合、創(chuàng)造出無限種可能。

6. 反叛者

反叛者也可以說是不法之徒、外來者，這種角色通常是具有變革性的、反常的、打破常規(guī)的，表達(dá)一種價(jià)值觀的解放。反叛者通常存在于社會邊緣的，被大部分社會群體看成局外人甚至異類的角色，我們也可以看成是亞文化的一種轉(zhuǎn)變。像這種主打標(biāo)新立異、反常規(guī)的品牌，最著名的就是哈雷。

7. 魔法師

前面我們提到了魔術(shù)師，那么魔法師相對于魔術(shù)師而言，會帶有更多的非現(xiàn)實(shí)的想象，精神上的超凡魅力，帶來轉(zhuǎn)變的、形而上的意識的擴(kuò)張。通俗地說，是帶有更多迷信元素的。但是最重要的是，魔法師趨向于駕馭各種能量和環(huán)境，進(jìn)而給人們帶來身體上以及精神上的轉(zhuǎn)變。同樣，像這種強(qiáng)調(diào) magic 的品牌我們第一個(gè)可以想到迪士尼，典型的魔法世界。

8. 智者

我們也可以稱之為「圣人」，智者通常是一種富有哲理性的、知識淵博的形象，忠于追求真理、樂于分享知識，也是智慧的代名詞。智者經(jīng)常被當(dāng)成真理的捍衛(wèi)者以及智慧的來源，為人們指明方向，幫助大家前進(jìn)的代表。這種角色設(shè)定適用于一些知識輸出的品牌，比如哈佛大學(xué)、金融時(shí)報(bào)等等。

9. 天真

這是 11 個(gè)原型中唯一一個(gè)形容詞而不是角色名詞，它代表著信任、純潔、健康樂觀，有希望的、誠實(shí)善良并且擁有簡單的快樂。天真代表著樂觀主義，不管處境如何都能保持希望和信仰，更像是紛雜世俗中的一片凈土或者是一個(gè)烏托邦世界。而像這種原型設(shè)定一樣傳達(dá)樂觀、希望、天真的品牌有麥當(dāng)勞、可口可樂等等。

10. 統(tǒng)治者

統(tǒng)治者象征著權(quán)威、控制、至高無上，同時(shí)也有承擔(dān)、效率、和諧的屬性。統(tǒng)治者被得到和控制權(quán)利的欲望所驅(qū)動，通過對事物的掌控來防治混亂發(fā)生。同時(shí)也是一種責(zé)任承擔(dān)的表現(xiàn)，以有組織的的方式來完成義務(wù)。屬于這種角色設(shè)定的品牌比如有 IBM、花旗銀行等等。

11. 英雄

每個(gè)人心目中的英雄不盡相似，但是他們的共性都是勇敢的、有原則的，勇于克服障礙，同時(shí)敢于接受挑戰(zhàn)、伸張正義，面對逆境的時(shí)候堅(jiān)韌不拔。這種角色設(shè)定的品牌比如強(qiáng)調(diào)挑戰(zhàn)、正義、勇敢的耐克、聯(lián)邦快遞等等。

總而言之，原型是將我們用戶內(nèi)心最深層次的需求，具象化成一個(gè)角色，我們的品牌對應(yīng)上這些角色，相當(dāng)于對應(yīng)上了我們用戶最深層次的需求，為我們品牌和用戶產(chǎn)生情感交流打下基礎(chǔ)。同時(shí)，它可以為我們設(shè)計(jì)師想為品牌找到對應(yīng)的設(shè)計(jì)風(fēng)格的時(shí)候，提供更多維度的靈感。而這之后的過程，就涉及到剛才提到的第二個(gè)關(guān)鍵點(diǎn)，如何為我們的品牌找到對應(yīng)的設(shè)計(jì)語言？

我們從前面的心理原型中了解到品牌的角色設(shè)定之后，圍繞這個(gè)角色將會有一系列的關(guān)鍵詞去描繪這個(gè)角色的特質(zhì)。我們將這些抽象的、描繪品牌特質(zhì)的關(guān)鍵詞具像化，則可以得到描繪品牌自身的設(shè)計(jì)元素。具體我們可以借助一個(gè)圖形四象限來完成：

我們將圖形的基本構(gòu)成（點(diǎn)、線、面）作為我們的坐標(biāo)延伸——寬窄曲直，用這四個(gè)屬性我們可以組合出非常多不同形態(tài)的圖形元素。比如說，我們用「寬+曲」組合出來的圖形可以是：實(shí)心的圓形、波浪曲線等等；再比如說我們用「窄+直」可以組合出：細(xì)直線、帶有直角邊的矩形等等。

同時(shí)，在圖形屬性的坐標(biāo)上，我們還需要延展出一些帶有這種屬性的事物或印象。比如，生活中帶有曲線的事物，像有花瓣、棉絮等等，這些事物給人的印象是柔和、溫暖的表現(xiàn)；而直線的事物，我們聯(lián)想一下生活中的帶有直角的事物，比如像玻璃、霓虹燈管等等，這些表現(xiàn)前衛(wèi)、鋒芒畢露的事物。

像上面綠色部分的認(rèn)知印象，針對每一個(gè)維度可以聯(lián)想出很多關(guān)鍵詞與事物，那么在我們延展出更加詳細(xì)的四象限之后，這時(shí)候可以再次拿出，我們前面說到的，原型角色的關(guān)鍵詞，再和剛才的圖形四象限進(jìn)行比對，利用象限中的圖形基本屬性，來組合出屬于我們品牌的設(shè)計(jì)元素。具體怎么做，我舉一個(gè)京東直播改版的案例。

首先基于京東品牌特質(zhì)（原型設(shè)定是英雄），圍繞英雄這一個(gè)原型我們會有很多關(guān)鍵詞去形容它，比如敢于挑戰(zhàn)、堅(jiān)韌不拔等等。不過，京東直播作為京東 App 的主要欄目，更希望吸引更多的年輕人以及女性群體的參與，所以在京東直播里，我們表現(xiàn)的是更加年輕、女性向的英雄——驚奇隊(duì)長，一位自信、勇敢挑戰(zhàn)的女英雄形象。因?yàn)橄袢嗽诓煌瑘龊舷露紩胁煌谋憩F(xiàn)，對于品牌來說也是如此，我們設(shè)計(jì)師也需要根據(jù)不同的場景或者子產(chǎn)品的需求，基于原型的核心理念再做出適應(yīng)性的設(shè)計(jì)，讓我們設(shè)計(jì)的品牌更像一個(gè)生命體，而不是一成不變的事物。

那么我們圍繞年輕、女性、自信這個(gè)主題再腦暴出更多相關(guān)的關(guān)鍵詞。比如具象的可以代表女性的事物：口紅、高跟鞋；比如一些抽象的內(nèi)容，我們可以把他們具像化，比如年輕的「活力」，我們可以用泡泡、花朵來表現(xiàn)，女性的「優(yōu)雅」可以用香水、絲帶表現(xiàn)，英雄的「自信勇敢」用笑容表現(xiàn)。

不過，我們知道用戶界面設(shè)計(jì)相對于平面設(shè)計(jì)的海報(bào)、插畫而言，更重要的是對產(chǎn)品信息功能的輔助，所以這里的設(shè)計(jì)元素運(yùn)用會更加克制，這意味著需要我們回歸到更基礎(chǔ)的層面。所以我們需要從剛才的具象事物（比如花朵、笑容）中提取出他們的基礎(chǔ)屬性，比如花瓣是圓弧形的、片狀的，笑容是向上的曲線。同時(shí)借助圖形四象限，用「寬+曲」的手法來表達(dá)我們的設(shè)計(jì)元素（年輕、女性向在第二象限，對應(yīng)的寬+曲屬性）。在后期設(shè)計(jì)過程中，融入這幾個(gè)元素再作出界面設(shè)計(jì)。

當(dāng)然，在整個(gè)設(shè)計(jì)流程中，設(shè)計(jì)語言的設(shè)定并不單單包含元素這一部分，還包括顏色、框架、布局等，各個(gè)方面的考量缺一不可。

顏色 —— 相對統(tǒng)一而非絕對一致

為什么是相對統(tǒng)一而非絕對一致？因?yàn)槿藗儗Υ蟛糠诸伾恼J(rèn)知其實(shí)是來自于自身的行為，受到心理、環(huán)境、文化等背景因素的影響，更多是一種個(gè)體的主觀感受。比如同樣的紅色，在中國是吉祥喜慶的代表，在國外普遍認(rèn)為危險(xiǎn)警告的顏色。比如黑色，在大部分年輕人眼里會認(rèn)為是酷的時(shí)尚的顏色，而相對年長傳統(tǒng)的人則更多會覺得是邪惡、忌諱的顏色。所以我們并不需要過分強(qiáng)調(diào)建立絕對一致的色彩規(guī)則，這樣也能使我們設(shè)計(jì)的品牌更像是一個(gè)有靈性的生物，而不僅僅是一個(gè)僵硬的組織。

比如今年的京東 618 項(xiàng)目，時(shí)間跨度長達(dá) 30 天，活動頁面覆蓋上千個(gè)，設(shè)計(jì)師不可能一個(gè)個(gè)去指定顏色規(guī)范、或者讓同一個(gè)顏色適用于所有頁面，所以需要設(shè)定的只有色彩感覺和表現(xiàn)手法，這種統(tǒng)一的大方向。所以我們可以看到這些在 618 期間的設(shè)計(jì)，雖然不盡相同但能讓人清楚的感知到，這是來自同一個(gè)生態(tài)下的主題，并不會因?yàn)轭伾煌蜔o法識別。

雖然人們對大部分顏色的認(rèn)知來自于心理的主觀感受，但還有對另一部分的顏色的認(rèn)知是來自于人們的生理反應(yīng)。而這一部分，才是我們在設(shè)計(jì)的時(shí)候需要注意的，關(guān)于造成人們「感知過強(qiáng)」和「感知過弱」的問題。

1. 感知過強(qiáng) —— 顏色對抗通道

簡單講，就是相當(dāng)于我們設(shè)計(jì)常說的——對比色，雖然我們知道對比色可以給用戶帶來視覺刺激，但是并不建議在設(shè)計(jì)中大面積的、長期的使用（紅綠或黃藍(lán)對比色），為什么呢？

因?yàn)槲覀兯f的顏色，其實(shí)是人眼對頻率、光的波長的感知，就像我們耳朵聽的音高或一個(gè)音符時(shí)所感知的聲音的原理一樣。下圖是人們視網(wǎng)膜三類視錐細(xì)胞對光的敏感度，以及人造紅、綠、藍(lán)色光感受器對光的敏感度。我們可以看到，低頻視錐（紅線）信號是紅色和黃色，中頻視錐信號是綠色，高頻則對應(yīng)藍(lán)色。而我們設(shè)計(jì)中常說的對比色，其實(shí)就是通過這些視錐細(xì)胞的低、中、高頻信號的極值相減，才得來的顏色對抗組。所以這種通過對視錐細(xì)胞兩極的強(qiáng)烈刺激才得到的對比色，長期使用下會讓人產(chǎn)生疲勞甚至煩躁的情緒，而在這種不穩(wěn)定的情緒下，用戶非常容易產(chǎn)生誤操作，甚至最終遷怒于你的產(chǎn)品不再使用。

所以我們作為設(shè)計(jì)師可以運(yùn)用一些方法來盡量控制對人眼的最極端的刺激，比如通過減少對抗色的面積，或者通過將對抗色組中的一個(gè)顏色用它的近色替換，等等。

2. 感知過弱 —— 色域跨度

除了以上，讓我們感知過強(qiáng)的顏色對抗通道，另一個(gè)需要注意的顏色問題就是，讓人們感知過弱的色域跨度。我們有時(shí)候會遇到一個(gè)問題就是，按鈕上的文字和按鈕的顏色融在一起，導(dǎo)致按鈕文字看不清。

這個(gè)問題其實(shí)就是兩個(gè)顏色的色域跨度過小導(dǎo)致的，首先我們用 H（色相）S（飽和度）B（明度）的數(shù)值來劃分色域（如下圖）。在統(tǒng)一H（色相）值的情況下，規(guī)定了 10 個(gè)標(biāo)準(zhǔn)的S（飽和度）、B（亮度）值，以 10 為單位作為一個(gè)跨度。兩種顏色在這個(gè)色域中，至少要相差 5個(gè)跨度，用戶才能有效感知到兩種顏色的差異。

比如下圖中的藍(lán)色背景色值是 60，那么放置在這個(gè)背景中的文字 A，至少要跟這個(gè) 60  的位置相差 5 個(gè)跨度，也就是 10 這個(gè)位置。如果文字A 的色值只有 30，與背景色的 60 跨度小于 5，那么文字 A 在這個(gè)背景上會難以識別。以此類推，深色模式中（如下圖）這個(gè)背景色值 100，那么在這個(gè)背景上的文字 A 色值，最多不能超過 50。

以上關(guān)于顏色對抗通道和色域跨度的問題，就是我們需要了解的一些顏色運(yùn)用中的邊界，并在這個(gè)邊界以內(nèi)讓設(shè)計(jì)保持最大的靈活度。所以對于顏色，我們需要強(qiáng)調(diào)的是相對統(tǒng)一的邊界極值，而不是絕對一致的色值。

如果我們把前面說的設(shè)計(jì)元素和顏色看作品牌的皮膚，那么視覺框架則是品牌的骨骼。如果想讓我們的品牌成為一個(gè)能夠真正影響用戶的存在，不僅要有好看的皮囊——在設(shè)計(jì)元素和顏色上延續(xù)品牌基因，還要有強(qiáng)大的內(nèi)心——視覺框架要能足夠支撐起我們品牌的身軀。

框架 —— 基于階段價(jià)值訴求

視覺框架包括了層級和布局，我們需要在設(shè)計(jì)的過程中，加入對產(chǎn)品階段和品牌價(jià)值的思考。因?yàn)榫拖袢艘粯?，處于不同階段的人追求的東西會有所差異。同樣的對于品牌也是如此，處于不同產(chǎn)品階段會有不同的需求，相應(yīng)的品牌價(jià)值點(diǎn)也會有所差別。所以如果想讓設(shè)計(jì)的視覺框架能夠足以撐起品牌，在這其中將會涉及 2 個(gè)關(guān)鍵點(diǎn)：如何定位產(chǎn)品階段和品牌價(jià)值，以及如何圍繞產(chǎn)品階段與品牌價(jià)值點(diǎn)設(shè)計(jì)對應(yīng)的視覺框架。

首先是定位我們的產(chǎn)品階段和品牌價(jià)值，我們可以通過對照經(jīng)濟(jì)價(jià)值系統(tǒng)（如下圖）：產(chǎn)品的階段分為初級產(chǎn)品、產(chǎn)品、服務(wù)和體驗(yàn)這 4 個(gè)階段。

拿京東舉個(gè)例子，如果我們位于初級產(chǎn)品階段，我們的平臺就是這樣的（如下圖）：展示出所有商品信息，用戶需要根據(jù)信息聯(lián)系商品的供應(yīng)商，去和供應(yīng)商進(jìn)行交易。那么在這個(gè)階段的時(shí)候，品牌的核心價(jià)值在于對商品信息展現(xiàn)的完整性、全面性，只要這個(gè)平臺能夠覆蓋足夠多的商品，并展示完整的商品信息，這個(gè)階段的目標(biāo)就達(dá)到了；

如果我們位于產(chǎn)品階段，我們會對商品進(jìn)行分類，并在平臺上提供統(tǒng)一的購買渠道。相應(yīng)的，這個(gè)是以后的品牌價(jià)值在于，平臺能夠?qū)ι唐愤M(jìn)行精準(zhǔn)分類或者實(shí)現(xiàn)統(tǒng)一的購買渠道功能，讓用戶能夠在平臺上買到商品；

而當(dāng)我們位于服務(wù)階段，我們的平臺不僅可以購買商品，我們還會提供售前售后的服務(wù)，對應(yīng)不同的客戶群體推薦不同的商品，或者提供定制化的服務(wù)等等。平臺除了實(shí)現(xiàn)交易功能，需要提高品牌的競爭力，在競品之間形成差異化，為人們提供一系列附加價(jià)值的服務(wù)，吸引更多用戶在我們平臺上下單才是目標(biāo)；

而如果我們位于體驗(yàn)階段，我們可以從視、聽、味、嗅、觸覺給用戶帶來一系列的情感反應(yīng)，為每個(gè)個(gè)體營造不同的回憶與感受。讓用戶與品牌產(chǎn)生情感上的互動，在更深層次上影響用戶認(rèn)知并形成堅(jiān)固的情感紐帶，讓用戶忠于我們的品牌才是這個(gè)階段的目標(biāo)。

正因?yàn)椴煌漠a(chǎn)品階段，對應(yīng)的品牌價(jià)值與目標(biāo)不同，我們才需要針對產(chǎn)品階段，為品牌設(shè)計(jì)合適的視覺框架，到后期設(shè)計(jì)出來的產(chǎn)品才能更貼合地為品牌發(fā)聲。像今年京東 app 改版項(xiàng)目，在接到這個(gè) brief 之后，首先當(dāng)然會先看看當(dāng)時(shí)版本存在的問題，下圖為當(dāng)時(shí)京東 7.0 版本。

當(dāng)時(shí)團(tuán)隊(duì)逐一列出了 7.0 版本存在的幾個(gè)主要問題：

1. 品牌識別度低

我們可以發(fā)現(xiàn)在這個(gè)界面里很難發(fā)現(xiàn)京東的品牌元素，就算現(xiàn)在換一個(gè)品牌同樣這個(gè)界面也適用；

2. 業(yè)務(wù)分發(fā)局限

這個(gè)版本里的商品坑位是固定的，業(yè)務(wù)展現(xiàn)的數(shù)量和形式是局限的；

3. 運(yùn)營維護(hù)成本高

banner 模塊采用通欄而且上下漸變的樣式，這需要商家制作運(yùn)營圖片的時(shí)候，將主要內(nèi)容嚴(yán)格控制在我們的限制區(qū)域內(nèi)，這同時(shí)也增加了我們運(yùn)營審核的工作量；

4. 樓層過長、轉(zhuǎn)化率低

在 7.0 版本中，中間的樓層頻道長達(dá) 7 屏，同質(zhì)化的內(nèi)容導(dǎo)致平臺商品的轉(zhuǎn)化率不高；

5. 促銷信息干擾

界面的促銷信息讓用戶眼花繚亂，難以讓用戶快速找到自己想要的商品；

6. 個(gè)性化感知不足

電商平臺內(nèi)容形式趨向單一化，沒有太多創(chuàng)新的表現(xiàn)。

有了這些具體的問題項(xiàng)，設(shè)計(jì)師們開始進(jìn)行針對性地視覺框架設(shè)計(jì)。比如，針對個(gè)性化感知不足的問題，我們希望重新設(shè)計(jì)百寶箱區(qū)域，打破常見的圓底 icon 的樣式，每個(gè)圖標(biāo)的邊框都是不規(guī)則的，讓整個(gè)區(qū)域更有表現(xiàn)力，同時(shí)與其他電商平臺的界面形成差異化。再比如，針對促銷信息干擾的問題，我們希望簡化原本頻道入口的信息，將原本好幾個(gè) sku 信息對應(yīng)同 1 個(gè)入口，優(yōu)化為單個(gè) sku 與單個(gè)入口一一對應(yīng)，讓用戶保持專注力快速找到自己想要的頻道入口。

諸如此類，當(dāng)時(shí)我們?yōu)檫@幾個(gè)問題延展出許多設(shè)計(jì)上的解決方案，輸出了不少有創(chuàng)新性的視覺稿。但是隨著設(shè)計(jì)工作越往后進(jìn)行，我們發(fā)現(xiàn)手中的設(shè)計(jì)并不能很好地解決，品牌在當(dāng)前階段中面臨的實(shí)際問題。

因?yàn)樵谇捌诳蚣茉O(shè)計(jì)的整個(gè)過程中，我們沒有把品牌定位這一因素考慮進(jìn)去，我們發(fā)現(xiàn)舊版本的問題，埋著頭只想把這些問題都解決了，卻忘記抬起頭看看我們的品牌現(xiàn)在在哪。我們前面說過，對照經(jīng)濟(jì)價(jià)值系統(tǒng)，京東目前主要處于服務(wù)階段，還在逐漸邁向體驗(yàn)階段的進(jìn)程中。

而處于這個(gè)階段的京東，外部環(huán)境是電商平臺的逐漸趨同化；內(nèi)部環(huán)境是業(yè)務(wù)體量龐大，同時(shí)產(chǎn)品仍有上升空間。所以我們的階段目標(biāo)就是需要加深用戶對品牌的認(rèn)知，業(yè)務(wù)內(nèi)容需要更加具備兼容性、延展性，同時(shí)需要提高產(chǎn)品的業(yè)務(wù)分發(fā)能力。

結(jié)合這個(gè)階段性目標(biāo)，我們可以從舊版本存在的問題中，發(fā)現(xiàn)這 4 個(gè)問題才是當(dāng)前優(yōu)先級最高的、需要在當(dāng)前階段中解決的內(nèi)容。所以基于篩選后的 4 個(gè)問題，我們開始將設(shè)計(jì)往回收，從視覺框架上更多聚焦于這 4 個(gè)問題的優(yōu)化。

比如針對業(yè)務(wù)分發(fā)局限性的問題，對首頁下拉區(qū)域的布局進(jìn)行優(yōu)化：下拉刷新除了常規(guī)的刷新狀態(tài)外，在營銷活動期間用戶可下拉跳轉(zhuǎn)至活動頁面。我們將下拉路徑縮短 30%，共享元素空間兼容更多的業(yè)務(wù)內(nèi)容，充分利用首焦區(qū)域豐富業(yè)務(wù)的展現(xiàn)形式。

比如針對品牌識別度的問題，將首頁頭部區(qū)域的層級進(jìn)行優(yōu)化：在京東品牌形象 Joy 中提煉出微笑曲線，將微笑弧度應(yīng)用在頭部的背景輪廓上，并且在整個(gè)頁面中統(tǒng)一植入品牌色京東紅，同時(shí)在當(dāng)前我們的品牌尚未成熟的階段，直接使用京東 logo 強(qiáng)化用戶對品牌的感知度和記憶點(diǎn)。

比如針對運(yùn)營維護(hù)成本高的問題，還記得前面說的我們一開始做的百寶箱的設(shè)計(jì)么，雖然那種設(shè)計(jì)是更具有差異化和創(chuàng)新性，但是目前產(chǎn)品量級大、業(yè)務(wù)入口多，而且這一區(qū)域涉及合作商家自己提供的素材露出，如果沒有統(tǒng)一的外框與規(guī)范的內(nèi)容，運(yùn)營維護(hù)成本是相當(dāng)高的。所以我們保留了 icon 外框，同時(shí)規(guī)范每個(gè)框中只居中展示一個(gè)對應(yīng)的圖形，不能包含文字等其他元素。

最終我們可以看到，改版后的京東 app 無論是在品牌、業(yè)務(wù)層面，還是在多種復(fù)雜的運(yùn)營場景中，都能實(shí)現(xiàn)作為平臺的兼容性和延展性。所以，在視覺框架的時(shí)候需要預(yù)先考慮產(chǎn)品階段，針對不同階段需求作出相應(yīng)的設(shè)計(jì)側(cè)重，讓設(shè)計(jì)出來的產(chǎn)品能夠更加貼合品牌本身。

經(jīng)過剛才的推導(dǎo)和框架設(shè)定，我們對眼前要做的產(chǎn)品設(shè)計(jì)風(fēng)格、視覺框架已經(jīng)確定的七七八八，界面的形態(tài)也初具雛形了。接下來要做的設(shè)計(jì)執(zhí)行階段就是我們設(shè)計(jì)師的魔法時(shí)刻，相信每位設(shè)計(jì)師都有自己的方式和能力讓我們的產(chǎn)品變得更優(yōu)美，所以關(guān)于這部分的內(nèi)容暫不在此贅述。

通過以上章節(jié)我們了解到，只有從品牌自身出發(fā)，設(shè)計(jì)出來的產(chǎn)品才能在每一個(gè)方面都延續(xù)品牌基因、展現(xiàn)出設(shè)計(jì)的整體性。一方面滿足品牌價(jià)值需求為品牌發(fā)聲，另一方面將用戶的所聞、所見、所感打造成一個(gè)特別的情感反應(yīng)，讓用戶更長久的忠于我們的品牌。

不過，如果我們想要?jiǎng)?chuàng)造出能深化品牌基因的產(chǎn)品，我們在用戶方面也要投入和品牌方面同樣多的關(guān)注。因?yàn)椴粌H要看產(chǎn)品的外觀界面，還要看產(chǎn)品給用戶的感覺、使用方式和效果。比如用戶因?yàn)槭裁床疟荒愕漠a(chǎn)品吸引，用戶會從中得到什么，你的產(chǎn)品能帶給用戶什么感受，用戶如何才能為你的產(chǎn)品發(fā)生實(shí)際行動，等等。正因?yàn)槲覀兯龅囊磺?，都?yīng)該對品牌產(chǎn)生支撐作用。所以不僅僅是品牌能夠識別和定義我們的產(chǎn)品，用戶的認(rèn)知體驗(yàn)也應(yīng)該成為我們設(shè)計(jì)考量的一部分。究竟怎樣做，才能讓我們的設(shè)計(jì)能夠有效的影響用戶、讓用戶為我們的品牌買單呢？

文章來源：優(yōu)設(shè)

京東推出品牌字體的原因

Type defines type. 在英文中，單詞 Type 包含兩個(gè)含義，文字和類型。這從某個(gè)角度說明了字體對于品牌的意義。一種字體能影響甚至決定人們對于這個(gè)品牌風(fēng)格的認(rèn)知。隨著產(chǎn)品使用場景的不斷拓寬，一個(gè)品牌的呈現(xiàn)已經(jīng)不再局限于一個(gè) LOGO 那么簡單。

品牌可以通過 LOGO、品牌色、IP 形象、字體等多種方式與受眾構(gòu)建聯(lián)系。根據(jù)權(quán)威機(jī)構(gòu) Salesforce 今年 4 月的調(diào)查，75% 的消費(fèi)者期望在與品牌互動時(shí)獲得一種持續(xù)性的、連貫的體驗(yàn)。

縱觀京東現(xiàn)在的品牌光譜，可以發(fā)現(xiàn)，之前我們在字體方面的確是處于缺位的狀態(tài)。而字體作為一個(gè)分布廣泛的媒介，必將成為連通全部潛在品牌觸點(diǎn)的重要工具。

因此，京東朗正體的推出，將會與我們現(xiàn)有的資源一起，全面提升京東的品牌體驗(yàn)的連貫性，并有利于構(gòu)建新的品牌生態(tài)。

神秘組織，自給自足的艱難探索

京東朗正體其實(shí)脫胎于京東內(nèi)部設(shè)計(jì)團(tuán)隊(duì)所稱的「京東字體」。與很多品牌（IBM、奧美）相似，我們的品牌字體也是從我們的 LOGO 文字中延伸而來。

一開始，我們也是邊學(xué)邊做，通過已有的一些基礎(chǔ)字體設(shè)計(jì)知識，從 LOGO 里寥寥無幾的筆畫中總結(jié)了一些筆畫規(guī)律，比如橫細(xì)、豎粗、點(diǎn)平、銳折等，然后將其應(yīng)用到各個(gè)部門提過來的做字需求中。另外有時(shí)候也需要對其他部門提交的文字 LOGO 進(jìn)行審核。

△ 這個(gè)神秘組織就是我本人

但是漸漸的，我們開始感到力不從心。一方面是隨著京東業(yè)務(wù)不斷擴(kuò)充，希望設(shè)計(jì)京東字體作為 LOGO 的需求越來越多。使用京東字體作為標(biāo)志，具有強(qiáng)品牌背書的優(yōu)點(diǎn)，而且相比專門設(shè)計(jì)一個(gè)圖形 LOGO 乃至一套 VI 體系，使用京東字體更加節(jié)省時(shí)間，具備更高的推廣效益。但僅靠一個(gè)設(shè)計(jì)師來對接整個(gè)集團(tuán)眾多部門的做字需求，還是有點(diǎn)不堪重負(fù)。

△ 源源不斷的做字需求

另一方面是我們意識到，我們根據(jù) LOGO 字體制定的造字規(guī)則，其實(shí)非常模糊且局限，這也是我們?nèi)狈ψ謳煸O(shè)計(jì)的經(jīng)驗(yàn)造成的。而這樣的漏洞使得我們在實(shí)際的應(yīng)用中遇到了問題。比如一開始我們簡單地將撇的收筆都規(guī)定為縱切，但是在某些字中，使用橫切收筆，視覺上卻顯得更為舒適。

后來我們在與專業(yè)的字體設(shè)計(jì)師溝通后了解到，這其實(shí)是因?yàn)樵跐h字中，單是一個(gè)撇筆就分為左上撇，斜撇，彎撇，直撇這么多種類型，而簡單地將一個(gè)規(guī)則應(yīng)用到所有的撇筆中，會造成某些字結(jié)構(gòu)上的失衡。

交棒方正，專業(yè)化產(chǎn)出

就在京東字體的造字工程陷入困局時(shí)，市場部剛好找到我們，提出了與專業(yè)字庫公司合作定制京東品牌字體的計(jì)劃，從而推進(jìn)品牌升級。我們與市場部一拍即合，確定了與方正的合作。于是，整個(gè)字庫的創(chuàng)作主力轉(zhuǎn)到了方正身上，而我們主要承擔(dān)掌舵的角色，整個(gè)字庫的制作也開始向?qū)I(yè)化、規(guī)?；?、系統(tǒng)化發(fā)展，生產(chǎn)速度更是呈現(xiàn)出爆炸性增長。

首先，我們與方正的老師確定了字體整體的基調(diào)，希望仍然保持簡潔、直接、力量的感覺。對已有材料進(jìn)行分析后，方正團(tuán)隊(duì)重新調(diào)整了字體的筆畫、字面、重心和結(jié)構(gòu)等方面，特別是對筆畫粗細(xì)比例和規(guī)則進(jìn)行了規(guī)范化。

可以看到，新版字體的縱橫筆畫比例從 20:11 縮小到 3:2 后，字面布白變得更均勻，辨識度也顯著提高。

同時(shí)，方正團(tuán)隊(duì)對筆畫規(guī)則的重新分類，也解決了我們之前碰到的難題。例如規(guī)定：點(diǎn)、撇、捺及鏡像點(diǎn)撇的收筆采用橫切，較為扁平的撇捺和鏡像撇捺的收筆則采用縱切。

明確規(guī)則后，方正團(tuán)隊(duì)先小規(guī)模試點(diǎn)，做了 130 個(gè)字，這些字涵蓋了京東常用字以及中文里的主要偏旁部首和部分獨(dú)特字形。同時(shí)，方正也邀請我們?yōu)檫@些字提供意見。

由此，我們開始了字體找茬大賽。我們把這些字放大，打印后貼在墻上細(xì)細(xì)端詳。近看，遠(yuǎn)看，坐著看，站著看，跪著看，走著看，調(diào)動起我們體內(nèi)最原始的設(shè)計(jì)直覺，試圖找出這些字里不自然的地方，然后貼上便利貼標(biāo)記。后來我們甚至走火入魔，看字不是字。

△ 看字看到失智的同事

蹺蹺板兩邊——專業(yè)意見與業(yè)務(wù)需求

這次的項(xiàng)目合作，方正團(tuán)隊(duì)派出了兩位重量級的設(shè)計(jì)專家，方正字庫的設(shè)計(jì)總監(jiān)仇寅老師與設(shè)計(jì)副總監(jiān)汪文老師。（如此深厚沉淀的字體設(shè)計(jì)資歷讓我們?nèi)滩蛔【椭焙衾蠋煟?

一開始，我們還擔(dān)心在項(xiàng)目過程中會比較被動，無法很好地參與到字型設(shè)計(jì)的討論中。畢竟相比之下，我們簡直是字體小白，缺乏系統(tǒng)的字體設(shè)計(jì)知識與建設(shè)大型字庫的經(jīng)驗(yàn)。但在合作的過程中，我們慢慢能體會到，從某個(gè)角度來說設(shè)計(jì)還是相通的。

在一期和二期字樣中，我們都根據(jù)「設(shè)計(jì)直覺」，對一些基本結(jié)構(gòu)提了調(diào)整意見，甚至直接上手做了修改的嘗試，因?yàn)楦杏X這樣討論起來也比較直觀。這也的確得到了方正老師們的認(rèn)可與呼應(yīng)，其中還包括一些比較重要的偏旁部首。

比如豎心旁、火字旁的兩點(diǎn)，老師們一開始都做得特別纖細(xì)。這可能是因?yàn)辄c(diǎn)筆在初始的調(diào)性設(shè)定上，就被規(guī)定從起筆到收筆都不能有弧度。老師們或許是出于字面留白的考慮做小了。但我們認(rèn)為從總體來看，還是顯得過于「可愛」了點(diǎn)，于是將它們適當(dāng)加粗，并向中心靠攏。老師也采納了我們的意見，終稿效果呈現(xiàn)上雙方都比較滿意。

確認(rèn)核心字樣后，方正開始進(jìn)一步快速地?cái)U(kuò)充字庫。整個(gè)字庫制作的時(shí)間雖然只有短短的 3 個(gè)月，但還是進(jìn)行得比較流暢和有序的。

而這當(dāng)中，還有一個(gè)無法忽略的角色，那就是市場部。市場部作為整個(gè)集團(tuán)的品牌資源中繼站，長期負(fù)責(zé)承接各個(gè)部門的設(shè)計(jì)需求，對字體在業(yè)務(wù)前線的實(shí)際應(yīng)用效果有很強(qiáng)的發(fā)言權(quán)。于是，方正和市場部，自然落在了蹺蹺板的兩邊，而我們站在中間，既要信任雙方，又要平衡好雙方的意見，推進(jìn)字庫快速而高質(zhì)量地產(chǎn)出。

這次制作間隙，剛好碰上了新板塊業(yè)務(wù)——「京東健康」的品牌發(fā)布，因此方正團(tuán)隊(duì)需要臨時(shí)先制作這幾個(gè)字的標(biāo)準(zhǔn)字。在康字上，我們費(fèi)了不少的功夫。

市場部認(rèn)為方正給到的「康」字設(shè)計(jì)，有種不穩(wěn)固的感覺。這可能是康字右下角的捺筆過高過短造成的。這可以理解，因?yàn)樯婕暗骄〇|健康的業(yè)務(wù)范圍和希望傳達(dá)的品牌調(diào)性，業(yè)務(wù)方自然希望在字體標(biāo)志上體現(xiàn)出穩(wěn)定、安全的感覺。

但業(yè)務(wù)方提過來的建議，從設(shè)計(jì)上看還有欠缺，與其他字體也不成體系。因此我們在此基礎(chǔ)上為方正老師提供了一些修改方向的建議，也就是讓折捺更貼近地面，左邊的兩點(diǎn)也相應(yīng)做出調(diào)整適應(yīng)。

方正側(cè)根據(jù)我們的意見，又做了進(jìn)一步的創(chuàng)新修改。我們以設(shè)計(jì)角度和業(yè)務(wù)需求結(jié)合的角度進(jìn)行挑選，認(rèn)為將右邊的點(diǎn)和捺打散，捺筆能獲得更大的舒展空間，整個(gè)字符也「站得更穩(wěn)」，選定了方案C。這個(gè)小插曲也就順利解決了。

誰的字體？我們的字體

品牌定制字體，從名字上可以看出，似乎具有天然的專屬性，它只屬于其服務(wù)的品牌。但正如蒙納在 2020 字體設(shè)計(jì)趨勢報(bào)告所說，品牌的字體策略不應(yīng)該是固定的、死板的，它更像是一個(gè)可擴(kuò)展、可變化的工具，幫助我們實(shí)時(shí)重塑品牌。這意味著京東朗正體在未來仍將持續(xù)進(jìn)化，更加開放。它不只是屬于京東的字體，它還是我們所有人的字體，它試圖滿足設(shè)計(jì)師、合作商家、消費(fèi)者等多方的需求。

京東朗正體目前僅有一個(gè)字重，比較粗，主要適用在大型標(biāo)題或標(biāo)志中，還不能滿足目前眾多文字內(nèi)容樣式的需要。后續(xù)我們將會制作更多字重，豐富京東朗正體的字體家族。我們也不排除京東朗正體會覆蓋更多語言的計(jì)劃。畢竟京東作為一個(gè)全球化的品牌，在各個(gè)國家的露出將會越來越多，使用字體在不同語境中保持品牌連貫性也一樣至關(guān)重要。

除此之外，可變式字體(Variable Font) 可能是我們更長遠(yuǎn)的一個(gè)發(fā)展方向?？勺兪阶煮w的特點(diǎn)在于其無限性，只需下載一套支持這種技術(shù)的字體，就可以直接調(diào)整字的各種外形參數(shù)，包括字重、字寬、襯線、斜度等。這既能減輕字體設(shè)計(jì)師的工作，也能為使用字體的設(shè)計(jì)師提供更多可能性。同時(shí)，這也有助于消除字體在各種電子終端演繹的屏障，釋放更多品牌活力。目前我們正在與技術(shù)平臺的小伙伴溝通這一計(jì)劃的實(shí)現(xiàn)進(jìn)程。

在使用范圍上，京東朗正體已經(jīng)開放授權(quán)給所有合作的商家和機(jī)構(gòu)。我們也希望借助品牌字體增強(qiáng)與合作方的聯(lián)系，讓這個(gè)品牌符號為合作伙伴提供更多展示的空間，進(jìn)一步拓展品牌生態(tài)的廣度。

品牌戰(zhàn)略公司 Lippincott 的負(fù)責(zé)人提到：「在這個(gè)新的時(shí)代，字體比任何時(shí)候，都更需要也更可能統(tǒng)一人們關(guān)于品牌的體驗(yàn)，并在各個(gè)渠道和載體上都實(shí)現(xiàn)無縫連接?！?

這一次，我們做京東的品牌字體，當(dāng)然不是為了「趕潮流」。它立足于現(xiàn)實(shí)環(huán)境的需要。京東，根源上看是一個(gè)提供零售基礎(chǔ)設(shè)施服務(wù)的平臺。這個(gè)服務(wù)，既是硬件上的，比如儲存和傳送包裹，也是軟件上的，處理和分發(fā)信息。 而文字，作為信息的重要載體之一，是我們這一次嘗試為京東創(chuàng)造設(shè)計(jì)價(jià)值而抓住的發(fā)力點(diǎn)和機(jī)會點(diǎn)。

和京東朗正體一起成長的歷程，包含了我們在系統(tǒng)化字庫設(shè)計(jì)中的懵懂探索，與跨界設(shè)計(jì)師合作的思想碰撞，乃至對京東品牌字體未來發(fā)展的想象，辛酸和快樂等比混合。

讓我們期待京東朗正體的表現(xiàn)。

另外一款品牌字體「騰訊字體」也值

除了專業(yè)和工作，你思考過別的問題嗎？最近反思了這十個(gè)問題，分享出來與各位酷友共勉。

年關(guān)將至，越是這個(gè)時(shí)候行業(yè)的波動也比較大，設(shè)計(jì)師萌生跳槽想法、被離職風(fēng)險(xiǎn)、薪資拖欠帶來焦慮情緒、常年加班的職業(yè)病等等。也許我們在耗費(fèi)心力提升專業(yè)能力的同時(shí)，是否應(yīng)該思考點(diǎn)別的問題。

最近進(jìn)行了一些反思，除了專業(yè)以外我還有哪些需要堅(jiān)守的習(xí)慣和培養(yǎng)的目標(biāo)。整理出最近思考的十個(gè)問題，希望與大家一起共勉。

有自己的短期目標(biāo)嗎？

無論是職場新人還是行業(yè)老司機(jī)，我們不怕專業(yè)能力不足，就怕渾噩度日，漫無目標(biāo)?？吹竭^很多工作多年的設(shè)計(jì)師迷茫，缺少新人的工作激情，卻又不知道自己應(yīng)該如何前進(jìn)一步。

小時(shí)候老師總會問我們夢想是什么，卻很少有人實(shí)現(xiàn)，現(xiàn)在如果問我夢想的話，我一般會說自己的短期目標(biāo)是什么。你可以定一個(gè)大的目標(biāo)，但是一定要拆分為短期可落地執(zhí)行的目標(biāo)，階段性的驗(yàn)收才能做出靈活的調(diào)整。

如果是專業(yè)層面可以梳理當(dāng)前行業(yè)需要的技能樹，然后對自己的能力進(jìn)行梳理，看看不足的是哪些，以此制定短期目標(biāo)一個(gè)一個(gè)進(jìn)行攻破。目標(biāo)不一定與專業(yè)有關(guān)，也可以是生活中的興趣，比如學(xué)會游泳、看十本書、完成一次自駕游、讓自己瘦十斤、年底有錢回家~O(∩_∩)O~一切都可以成為自己的短期目標(biāo)。短期目標(biāo)是為了豐富自己的時(shí)間管理，也能充分的利用好階段性的時(shí)間去完成，不斷增進(jìn)自信和維持這份驅(qū)動力。

能控制好時(shí)間規(guī)劃嗎？

如果你能控制好自己的時(shí)間，就是一個(gè)優(yōu)秀的設(shè)計(jì)師，時(shí)間規(guī)劃主要的難度不是制定，而是堅(jiān)持，很多人都半途而廢。我從實(shí)習(xí)開始工作以來為了更好的掌控自己的時(shí)間，喜歡以日記的形式記錄當(dāng)日完成的工作和接下來需要準(zhǔn)備去執(zhí)行的事項(xiàng)。完成之后以勾選的方式劃掉，如果發(fā)現(xiàn)接下來沒有任務(wù)進(jìn)來，會制定一些日常提升的計(jì)劃。

業(yè)余的碎片化時(shí)間根據(jù)出現(xiàn)的場景做規(guī)劃，剛工作的時(shí)候上下班地鐵時(shí)間需要 2 小時(shí)左右，通常就會安排進(jìn)行閱讀，不僅可以消磨時(shí)間也增加了自己的閱讀量。如果加入一些日常練習(xí)主要的不是一天要做多少，而是能否長期堅(jiān)持，通常是一天完成兩個(gè)界面就睡覺，不多做也不少做，隨著練習(xí)的堅(jiān)持后面完成的時(shí)間就會越來越快。通過一些設(shè)計(jì)平臺以打卡的形式發(fā)布作品，目的就是為了有一個(gè)可以記錄自己成果展示的場景，調(diào)動起氛圍。

也可以給自己的時(shí)間規(guī)劃設(shè)定提醒，以免忘記這個(gè)時(shí)間段應(yīng)該做什么，規(guī)劃不能過于密集，休息是為了放松自己，如果被規(guī)劃壓得喘不過氣，會把一個(gè)好的東西變得排斥。所以，留足一些休息的時(shí)間追劇、刷抖音、鍛煉身體、逛逛商場散散步等等，勞逸結(jié)合才能持之以恒。

能駕馭自我驅(qū)動嗎？

其實(shí)專業(yè)能力不足并不可怕，只要你想學(xué)都可以彌補(bǔ)不足，難的是缺少自我驅(qū)動力。三分熱度你都能有，持之以恒卻沒多少人可以做到了。要時(shí)刻反思自己堅(jiān)持了曾經(jīng)的那份初心了嗎？

如果自己自控意識薄弱，要刻意而為之，強(qiáng)迫自己按照定好的軌跡運(yùn)行?？梢灾贫A段性的小目標(biāo)和規(guī)劃，這樣戰(zhàn)線不會拉得很長，有助于刻意堅(jiān)持?？梢越o自己設(shè)定一些獎(jiǎng)勵(lì)，完成目標(biāo)大吃一頓、看一場電影、去一個(gè)地方旅游、買一件規(guī)劃好的商品等。如果沒有完成就要強(qiáng)迫自己完成才能獲得設(shè)定好的獎(jiǎng)勵(lì)，現(xiàn)在不對自己狠一點(diǎn)，未來職場就會對你狠一點(diǎn)，進(jìn)而拋棄你。

如何提高自我驅(qū)動力：

除了專業(yè)還有興趣愛好嗎？

思考一下除了專業(yè)和工作以外，你有興趣愛好嗎？如果你猶豫停頓了，希望你可以培養(yǎng)一個(gè)興趣愛好，豐富自己的精神追求。當(dāng)然，這個(gè)愛好需要是陽光積極的，別把陋習(xí)當(dāng)成愛好。

除了設(shè)計(jì)以外，我從小喜歡畫國畫，雖然沒有走這個(gè)方向去發(fā)展，我把它作為興趣愛好來看待，豐富自己的業(yè)余生活。作為設(shè)計(jì)師興趣愛好不一定是與設(shè)計(jì)沾邊的，我以前有個(gè)同事她是 UI 設(shè)計(jì)師，業(yè)余時(shí)間卻是某游戲欄目的專欄博主，也有專門寫旅行日記的，研究美食的等等。

培養(yǎng)興趣愛好可以讓你在工作之余放松心情，釋放壓力，沒有束縛才能釋放自己壓抑的情緒，也能更好的調(diào)整好心態(tài)。

有哪些適合設(shè)計(jì)師的興趣愛好？

作息時(shí)間是否合理？

年輕的自己從來不擔(dān)心這個(gè)問題，只有當(dāng)發(fā)現(xiàn)自己身體透支過度的時(shí)候才會有所意識。作為設(shè)計(jì)師來說加班似乎已經(jīng)家常便飯，不過如果加班透支了自己的身體也要進(jìn)行反思了，畢竟健康是屬于自己的。

雖然沒辦法立馬做到早睡早起，但是可以逐步把休息時(shí)間和起床時(shí)間提前，早點(diǎn)起來鍛煉一下身體、看半小時(shí)書也不錯(cuò)。好的身體才能實(shí)現(xiàn)更多價(jià)值，我最近都在盡量控制晚上十一點(diǎn)前睡覺，逐漸調(diào)整出更好的作息時(shí)間和習(xí)慣。

把青春和時(shí)間奉獻(xiàn)給了工作，別把健康也搭進(jìn)去了，如果公司不注重員工的健康而一味的壓榨，不值得你為之拼命。

如何看待自己的青春流逝？

青春我們都曾有過，也都會失去，如果你正直青春期間，如何看待自己當(dāng)前的經(jīng)歷和奮斗的動力比較關(guān)鍵。

剛畢業(yè)的時(shí)候用一部分青春換取了職場經(jīng)驗(yàn)和專業(yè)進(jìn)階，后來選擇創(chuàng)業(yè)也是希望把青春留給自己，為自己而奮斗。每個(gè)人都有自己的選擇，只希望你今日的努力能夠?qū)Φ闷鹞磥淼淖约骸?

能肩負(fù)起自己的責(zé)任嗎？

責(zé)任感是我們每個(gè)人都需要具備的，上學(xué)期間我們習(xí)慣了在爸媽的庇護(hù)下成長，從我們步入職場的時(shí)刻，我們就要學(xué)會獨(dú)立生活。雖然你可能過著月光族的生活，一人吃飽全家不餓，也不一定盡到了自己的責(zé)任，但是總有從某一刻開始你會意識到自己的責(zé)任。

當(dāng)我們在追求自己的未來的時(shí)候，也要回頭思考自己的責(zé)任，從肩負(fù)起一個(gè)小的責(zé)任開始?？梢允菍胰说年P(guān)心與照顧，如果當(dāng)你成家之后應(yīng)該會感觸更深。今日對未來的反思與規(guī)劃是為了使自己變得更優(yōu)秀，將來有能力守護(hù)家人，實(shí)現(xiàn)自己的價(jià)值，肩負(fù)起自己的責(zé)任。

是一個(gè)有態(tài)度的設(shè)計(jì)師嗎？

作為設(shè)計(jì)師我們是商業(yè)環(huán)節(jié)中的一環(huán)，隨著感官體驗(yàn)的升級，設(shè)計(jì)的質(zhì)量越發(fā)顯得重要。在工作中我們需要成為一個(gè)有態(tài)度的設(shè)計(jì)師，主導(dǎo)自己的設(shè)計(jì)使其發(fā)揮更大的價(jià)值。個(gè)人態(tài)度分為性格層面和習(xí)慣層面的態(tài)度，下面分別梳理一下。

從性格層面體現(xiàn)自己的態(tài)度：在對接需求的時(shí)候，我們不能是一只溫順的小羔羊，被人牽著走并任人宰割。要有自己的態(tài)度，敢于為自己的設(shè)計(jì)發(fā)聲，有自己堅(jiān)守的原則，通過案例和經(jīng)驗(yàn)進(jìn)行引導(dǎo)需求方的選擇。堅(jiān)持不一定可以改變別人的選擇，但是我們做到了專業(yè)設(shè)計(jì)師的態(tài)度。

從習(xí)慣層面體現(xiàn)自己的態(tài)度：設(shè)計(jì)能力都是可以學(xué)習(xí)培養(yǎng)的，養(yǎng)成良好的習(xí)慣至關(guān)重要，對細(xì)節(jié)的態(tài)度、設(shè)計(jì)質(zhì)量的態(tài)度、提案演示的態(tài)度、溝通對接的態(tài)度等等。養(yǎng)成一個(gè)好的設(shè)計(jì)習(xí)慣，就算生活中也應(yīng)如此，態(tài)度可以決定你能把一件事做到何種深度，希望我們都可以成為一個(gè)有態(tài)度的設(shè)計(jì)師。

堅(jiān)持總結(jié)了嗎？

優(yōu)秀的設(shè)計(jì)師總能善于總結(jié)，總結(jié)可以對自己的知識體系進(jìn)行梳理和檢索，查漏補(bǔ)缺。總結(jié)個(gè)人分為兩個(gè)方向，一是對自己的經(jīng)驗(yàn)進(jìn)行總結(jié)梳理，把經(jīng)驗(yàn)形成可傳遞的方法論；二是對優(yōu)秀的案例和資源進(jìn)行梳理總結(jié)，把他人的優(yōu)秀方法論轉(zhuǎn)化為自己可吸收的軌跡。

有句話叫為了寫作而看書，通過輸出倒逼輸入，主動吸收的通常轉(zhuǎn)化和記憶都更強(qiáng)。除了專業(yè)相關(guān)的總結(jié)以外，我們也可以是一些讀書筆記、日常感悟等，鍛煉自己寫作的能力和養(yǎng)成習(xí)慣。以前我們一個(gè)學(xué)員有記錄生活感悟和寫讀書筆記的習(xí)慣，一年能堅(jiān)持輸出十萬多字的隨記，這個(gè)習(xí)慣值得學(xué)習(xí)。堅(jiān)持幾年后可以看出她在各方面的理解能力都非常好，也善于將自己的經(jīng)驗(yàn)進(jìn)行總結(jié)，帶來的結(jié)果自然是得到了很多機(jī)會去更好的發(fā)揮自己的價(jià)值。

寫作與你的專業(yè)能力不一定強(qiáng)關(guān)聯(lián)，不要以經(jīng)驗(yàn)不足而自我放棄，這只是一個(gè)習(xí)慣的培養(yǎng)。只有去嘗試了才知道那里不足，如何去優(yōu)化，下次應(yīng)該如何寫才能更合理。希望從今天以后，你可以堅(jiān)持寫作總結(jié)的習(xí)慣。

自己是否夠?qū)I(yè)？

一切的自信和態(tài)度都是建立在自我專業(yè)的基礎(chǔ)上，特別是設(shè)計(jì)師，如果自身不夠?qū)I(yè)如何說服別人。要時(shí)刻質(zhì)問自己是否依然保持專業(yè)性，低姿態(tài)面對學(xué)習(xí)，時(shí)刻評估和提升自己。

不同階段關(guān)注的焦點(diǎn)不同，剛開始我們可能在意技能操作層面，執(zhí)行能力為第一保障。隨著工作經(jīng)驗(yàn)的積累，我們的關(guān)注面更綜合，有時(shí)候也會感覺學(xué)得越多發(fā)現(xiàn)自己越是什么都不會。如果在職場中一直都沒有新的知識和認(rèn)知豐富自己，會逐漸變得被動，很難突破自己的瓶頸期。要保持學(xué)習(xí)的動力和日常輸出的自我驅(qū)動力，不要溫水煮青蛙，把自己陷入被動的狀態(tài)。

所以，時(shí)刻問問自己，我是否夠?qū)I(yè)。

總結(jié)

反思自己是為了讓自己時(shí)刻保持清醒，作為設(shè)計(jì)師我們需要有態(tài)度、要自信、夠?qū)I(yè)；除了專業(yè)層面我們還需要反思更多問題，有自己的短期目標(biāo)、能管理好時(shí)間、培養(yǎng)更多興趣愛好等等。不斷豐富自己的生活狀態(tài)，可以帶給自己更多樂趣，把有限的時(shí)間過得更合理。

希望本文可以拋磚引玉，大家都可以反思自己面臨的問題，提升自己的綜合素質(zhì)和能力。

文章來源：優(yōu)設(shè)

本文的英文原標(biāo)題是「10 Rules of Dashboard Design」，其中 Dashboard 如果翻譯成儀表盤的話，總覺得不大容易理解，所以我在這里把它翻譯為數(shù)據(jù)可視化。數(shù)據(jù)展示方面的設(shè)計(jì)，相信大家會經(jīng)常用到，這篇文章有很多簡單直接，立馬就能用上的干貨，一起來學(xué)習(xí)吧！

為什么數(shù)據(jù)可視化設(shè)計(jì)非常重要？

數(shù)據(jù)可視化的目的是以一種用戶更容易理解的形式呈現(xiàn)復(fù)雜信息。

一個(gè)優(yōu)秀的數(shù)據(jù)可視化界面包含以下幾個(gè)關(guān)鍵要素：

• 清晰：一個(gè)好的數(shù)據(jù)可視化界面一定是能夠清晰的展現(xiàn)用戶所需要的信息。當(dāng)用戶看到界面內(nèi)容時(shí)，應(yīng)該能在 5 秒內(nèi)了解到它的用途，而不是花費(fèi)至少幾分鐘才能理解各個(gè)數(shù)據(jù)的含義。
• 有意義： 一個(gè)有用的數(shù)據(jù)可視化界面上的每一條信息都應(yīng)該是有意義的。這些有意義的信息能準(zhǔn)確傳達(dá)設(shè)計(jì)師想要表達(dá)的內(nèi)容。每一條數(shù)據(jù)的背后，用戶都是可以讀懂的。
• 一致性：優(yōu)秀的數(shù)據(jù)可視化界面，會有一套非常嚴(yán)謹(jǐn)一致的版面。這里的一致性需要考慮到布局，結(jié)構(gòu)和內(nèi)容。
• 簡單： 復(fù)雜的界面違背了數(shù)據(jù)可視化設(shè)計(jì)的初衷。如果一個(gè)信息呈現(xiàn)不夠簡單直接，那么肯定是在設(shè)計(jì)上出現(xiàn)了問題。

如何設(shè)計(jì)一個(gè)數(shù)據(jù)可視化界面？

數(shù)據(jù)可視化界面設(shè)計(jì)最重要的步驟是需要了解目標(biāo)用戶是誰，能為他們提供什么價(jià)值。了解目標(biāo)受眾的知識背景和理解水平能幫助你做出對他們有價(jià)值的設(shè)計(jì)。

在了解目標(biāo)用戶時(shí)，有必要了解受眾感興趣的數(shù)據(jù)類型。

「專注于用戶的需求，更容易產(chǎn)生他們喜歡使用的結(jié)果。」

目標(biāo)用戶級別可能會在一級和另一級之間變化，這是一個(gè)挑戰(zhàn)性的點(diǎn)。與其他任何設(shè)計(jì)項(xiàng)目一樣，可以細(xì)分受眾并將信息相應(yīng)地分為基本內(nèi)容和高級內(nèi)容。

在界面中表示一組信息有多種方法，選擇正確的數(shù)據(jù)指標(biāo)是設(shè)計(jì)數(shù)據(jù)可視化的另一個(gè)關(guān)鍵元素。這也與目標(biāo)用戶的偏好有關(guān)，即他們希望看到什么樣的信息。

「根據(jù)需要設(shè)計(jì)數(shù)據(jù)可視化界面，為不同的業(yè)務(wù)使用不同類型的展示方式。」

下面是為目標(biāo)用戶設(shè)計(jì)數(shù)據(jù)可視化界面時(shí)需要考慮的一些重要規(guī)則。

1. 區(qū)分層級

一個(gè)常見的錯(cuò)誤就是設(shè)計(jì)師沒有對信息區(qū)分層級，所有的內(nèi)容看起來都一樣重要。

可以嘗試使用組件的大小和位置來區(qū)分?jǐn)?shù)據(jù)的層次結(jié)構(gòu)。

• 通過定義信息層級，讓用戶清楚什么是最重要的
• 在左上角顯示更重要的信息，沿著對角線方向，信息的重要程度應(yīng)該依次減弱，右下角的信息重要性最弱
• 還可以將信息劃分為不同類別，并在不同的視圖中顯示它們

2. 簡單易懂

數(shù)據(jù)可視化的真正目的是用一種更方便理解，更簡單的形式來傳達(dá)復(fù)雜信息。

• 不要放一些大多數(shù)用戶都難以理解的信息
• 使用更少的列來顯示信息
• 刪除冗余內(nèi)容來減少混亂

3. 一致性

使用一致性布局設(shè)計(jì)的數(shù)據(jù)可視化界面看起來更好。

• 為了使界面更容易閱讀，可以在信息組之間使用類似的可視化效果。
• 把相關(guān)的信息放的更近一些
• 對相關(guān)內(nèi)容進(jìn)行可視化分組

4. 臨近原則

在界面中把相近的信息放在一起可以幫助用戶快速理解。

• 把相關(guān)的信息放的更近一些
• 不要將相關(guān)信息分散在界面上
• 對相關(guān)內(nèi)容進(jìn)行可視化分組

想更深入了解接近原則，看這篇：

5. 對齊

可視化組件元素需要在視覺上對齊，并保持視覺平衡。

• 將可視化組件元素在視覺上進(jìn)行對齊，可以將界面組織的更好
• 嘗試將組件元素進(jìn)行網(wǎng)格布局設(shè)計(jì)
• 不對齊的界面會給用戶帶來糟糕的體驗(yàn)

6. 留白

留白是為了讓界面有呼吸感，它使得用戶在使用你的界面時(shí)能夠有喘息的空間。

• 當(dāng)用戶查看需要的信息時(shí)，界面中的留白能夠吸引用戶的目光，提升用戶體驗(yàn)。
• 減少留白會使用戶的界面變得混亂
• 使用留白能對信息進(jìn)行可視化分組

△ 留白太少簡直就是在鼓勵(lì)你的用戶盡快離開

7. 顏色

使用有效的配色方案來吸引用戶的注意力，幫助他們輕松地瀏覽信息。

• 仔細(xì)選擇顏色，目標(biāo)是使內(nèi)容易于閱讀
• 使用大對比度來顯示背景上的視覺元素

△ 避免使用低對比度和低效的漸變

8. 字體

標(biāo)準(zhǔn)字體是可視化界面中的最佳字體，除非有特別的理由，一般不要用其他字體。

• 使用標(biāo)準(zhǔn)字體，因?yàn)樗鼈兏菀组喿x和掃描
• 特別和美術(shù)字體可能看起來不錯(cuò)，但很難理解
• 避免所有的大寫字母文字，因?yàn)樗茈y閱讀，人類的大腦需要時(shí)間來消化它。
• 使用合適的字體大小和風(fēng)格，有效地傳達(dá)信息

△ 不要使用影響可讀性的字體

9. 數(shù)字排版

顯示精度超過要求的數(shù)字使它們難以閱讀和理解。

• 必要時(shí)使用整數(shù)，因?yàn)殚L數(shù)字會使用戶混淆
• 省去不必要的信息
• 讓用戶能夠容易地比較簡單的差異細(xì)節(jié)

10. 標(biāo)簽

使用能夠快速有效地向用戶傳達(dá)所需信息的標(biāo)簽。

• 避免使用帶旋轉(zhuǎn)的標(biāo)簽，因?yàn)楹茈y閱讀
• 盡可能的使用標(biāo)準(zhǔn)的縮寫

△ 避免旋轉(zhuǎn)標(biāo)簽

總結(jié)

數(shù)據(jù)可視化旨在節(jié)省時(shí)間和精力，將復(fù)雜和抽象的數(shù)據(jù)以更簡單的形式表示，目的是以用戶能夠理解的方式將關(guān)鍵信息傳達(dá)給他們，確保自己理解用戶所需，并給他們需要的信息。

文章來源：優(yōu)設(shè)

本文整理了人工智能行業(yè)中設(shè)計(jì)師需要理解的一些名詞和內(nèi)容。

一方面供自己學(xué)習(xí)思考，另一方面也希望能幫助到準(zhǔn)備投入到人工智能行業(yè)的設(shè)計(jì)師。之前聽有的朋友講到，覺得自己沒有計(jì)算機(jī)背景，有點(diǎn)害怕進(jìn)入到這樣一個(gè)領(lǐng)域來。

沒有計(jì)算機(jī)背景沒有關(guān)系，只要對這個(gè)行業(yè)充滿好奇，一個(gè)個(gè)的問題解決掉，在你眼前的迷霧都會散去的。

先簡單舉幾個(gè)人工智能在生活中有在應(yīng)用的例子：

像現(xiàn)在有的超市寄存物件，開箱時(shí)采用的人臉識別；像家里購置的智能音響，時(shí)不時(shí)還能跟它聊上幾句；像接聽到的銀行電話（是的，對方可能是機(jī)器人噢）；像在淘寶上咨詢的客服小蜜；像你手機(jī)里的虛擬助手….等等這些都是人工智能在生活中的應(yīng)用。

人工智能在設(shè)計(jì)領(lǐng)域的應(yīng)用也相當(dāng)廣泛，具體可以看這篇文章：

這幾個(gè)例子是在生活中比較普遍能接觸到的，實(shí)際人工智能應(yīng)用的領(lǐng)域還在不斷的擴(kuò)大，我們甚至都無法想象到，未來的生活會是怎樣的狀態(tài)和場景。

在這家公司之前，我做過語音交互類的產(chǎn)品交互設(shè)計(jì)。當(dāng)時(shí)在定義人與設(shè)備進(jìn)行語音交互時(shí)，會是怎樣的一個(gè)交互場景。從說喚醒詞到發(fā)出指令，從收到反饋到繼續(xù)對話。喚醒后等待的時(shí)間、結(jié)束的規(guī)則等等這些。

而現(xiàn)在，我大部分時(shí)間是在設(shè)計(jì)工具，如何讓使用者能快速的創(chuàng)建出一個(gè)智能機(jī)器人。如何讓機(jī)器人的創(chuàng)建者方便快捷的添加機(jī)器人的相關(guān)數(shù)據(jù)和創(chuàng)建出對話場景。

所以在進(jìn)行這些工具的設(shè)計(jì)之前，有些名詞概念，會需要設(shè)計(jì)師來了解一下，能讓我們更好的理解人工智能的一些原理以及能夠讓設(shè)計(jì)師具象化到實(shí)際的設(shè)計(jì)中，甚至能基于此技術(shù)/原理來進(jìn)行相關(guān)的創(chuàng)新或研究。

整理內(nèi)容如下：（內(nèi)容基于工作及自身理解，如有概念理解錯(cuò)誤，歡迎指正）

下面嘗試用較易理解方式來解釋這些名詞：

與機(jī)器人進(jìn)行對話，首先就需要讓機(jī)器人懂我們說的話，這其中，就需要來關(guān)注到自然語言處理，通過自然語言處理技術(shù)，能夠?qū)崿F(xiàn)我們與機(jī)器之間「無障礙」對話。

• 自然語言處理（NLP）：是人類與機(jī)器溝通的中介，需要靠它來理解、處理和運(yùn)用自然語言
• 自然語言理解（NLU）：指的是機(jī)器的語言理解能力，將人類語言轉(zhuǎn)化為機(jī)器可理解的內(nèi)容
• 自然語言生成（NLG）：指的是機(jī)器通過一系列的分析處理后，把計(jì)算機(jī)數(shù)據(jù)轉(zhuǎn)化生成為自然語言內(nèi)容，讓人類可理解

我把這三者關(guān)系畫了張圖示，我是以這樣的方式理解的

從圖中可進(jìn)一步看出，NLU 和 NLG 是 NLP 的子集，而 NLP 是人與機(jī)器溝通中很重要的存在。

涉及到語音就會經(jīng)常聽到 ASR 和 TTS

語音識別（ASR）：將語音內(nèi)容轉(zhuǎn)為文字

如微信里面，當(dāng)別人發(fā)的語音信息不方便外放收聽時(shí)，可以轉(zhuǎn)為文字查看

語音合成（TTS）：將文字內(nèi)容轉(zhuǎn)為語音

如現(xiàn)在很多的閱讀軟件，支持播放，有的就是利用 TTS，直接將文本內(nèi)容轉(zhuǎn)為語音播放出來。

我試著將上面提到的 NLP 和 ASR、TTS 組合起來，關(guān)系可以如下圖所示

當(dāng)我們說一句話的時(shí)候，機(jī)器知道我們表達(dá)的是什么嗎？

意圖（Intent）:一個(gè)人希望達(dá)到的目的，或者解釋為想要做什么，他的動機(jī)是什么。

如：

• 我對天貓精靈音箱說「聲音太小了」，那我的意圖是什么？意圖是「將音量調(diào)大」。
• 「看下明天上海飛北京的航班信息。」 直接意圖：查航班信息，潛在意圖：「買機(jī)票」？

槽位（Slot）：可以理解為系統(tǒng)要向用戶收集的關(guān)鍵信息。

如：

「買張明天從上海到北京的機(jī)票」

上面這句話中，獲取到意圖（買機(jī)票）；提取關(guān)鍵信息 時(shí)間（明天）、地點(diǎn)（出發(fā)地：上海；到達(dá)地：北京）
這些關(guān)鍵的信息就是槽位，當(dāng)系統(tǒng)獲知到這些信息后，就能去執(zhí)行下一步動作。

還可以這樣理解，當(dāng)我們?nèi)ャy行營業(yè)廳辦理卡的時(shí)候，會填寫一張表，表每個(gè)要填寫的選項(xiàng)，就是一個(gè)個(gè)的槽位。槽位就是為你服務(wù)的人員要從你那收集的關(guān)鍵信息。

實(shí)體（Entity）：用戶在語句中提到的具體信息

實(shí)體這詞放在生活中，我們很容易理解，就是實(shí)實(shí)在在的物體，像桌子、電腦、熊貓等等這些都是實(shí)體。

但是在人機(jī)對話中，機(jī)器理解人的語句內(nèi)容，會識別出語句中的實(shí)體信息（如：地點(diǎn)、人名、歌曲名等），然后進(jìn)行標(biāo)記。

那槽位和實(shí)體是不是講的是一回事？只是不同的說法？

我之前有一度陷入這樣的困惑中，但其實(shí)這兩者還是有所區(qū)別的。比如，一個(gè)實(shí)體是數(shù)字，但是在語句中，數(shù)字將代表不同的含義。

如：

人：有沒有10元的鮮花？ 機(jī)器人：玫瑰花10元一支 。

這句話中，實(shí)體number「10」，但這個(gè) 10 在句子中表達(dá)的是價(jià)格，所以收集到的槽位信息是價(jià)格：「10元」

這樣說可能還是不太能理解，那我們可以先了解下，在一句表達(dá)中，需要進(jìn)行槽位信息收集，但機(jī)器如何知道「買張明天從上海到北京的機(jī)票」中，「上?！故浅鞘?，并且「上?！故浅霭l(fā)地呢？

「上?！惯@個(gè)詞會被建立在一個(gè)城市實(shí)體詞庫中，這是「上海」能被識別到是「城市」的原因。

其次，通過將解析槽位加入語料中，加以訓(xùn)練讓機(jī)器學(xué)習(xí)相關(guān)表述結(jié)構(gòu)，來獲知該句式中，收集到的第一個(gè)城市是出發(fā)地，于是把第一個(gè)城市填到對應(yīng)的槽位中。

使用什么工具來讓機(jī)器知道，這個(gè)信息是要提取的信息？

解析器（Parser）：抽取/解析用戶語句中的關(guān)鍵信息

上一個(gè)講到實(shí)體，這里講到的解析器則是這么個(gè)工具，用來抽取這些信息。比如會有些通用的解析器如時(shí)間解析器、城市解析器、歌手解析器等等。

解析器的類型也比較多，如通用解析器、詞典解析器、正則解析器、組合解析器等等，這里就不再擴(kuò)展開講具體解析器，實(shí)在過于復(fù)雜了。

命名實(shí)體識別（NER）：用來識別具有特定意義的實(shí)體。主要會包括像機(jī)構(gòu)、地名、組織等。

是不是發(fā)現(xiàn)，解析器和 NER 在做差不多的事情？我是這樣理解的，解析器的話是一個(gè)更大的存在，其中包括了 NER。解析器下會有不同類型和不同功能的工具來實(shí)現(xiàn)關(guān)鍵信息的識別/抽取。

在我們與機(jī)器人對話時(shí)，一般會涉及到四個(gè)不同類型的對話，開放域的聊天、任務(wù)驅(qū)動的對話、問答（FAQ）和推薦。

上面是在有次分享中提到的，這四個(gè)不同類型的對話，在機(jī)器人平臺中，會需要借助不同的功能模塊來實(shí)現(xiàn)。

任務(wù)對話（Task Dialogue ）：有上下文聯(lián)系，就像我們要去訂票、訂餐之類的一段任務(wù)型的對話。

我們公司產(chǎn)品中，任務(wù)引擎模塊就是做這個(gè)任務(wù)對話的創(chuàng)建，比如，要訂機(jī)票的場景。用戶在這個(gè)訂機(jī)票的場景中，會涉及到的對話內(nèi)容、流程的設(shè)計(jì)。

知識圖譜（Knowledge Graph）：這個(gè)可以理解為可視化關(guān)聯(lián)信息。
比如：查詢一個(gè)明星的身高、年齡，他的學(xué)校、他的女友，他的相關(guān)作品，這些基于這個(gè)人而構(gòu)建的信息庫，都可以通過知識圖譜在做整理。并且在構(gòu)建時(shí)能夠做到可視化的了解。

要讓機(jī)器人知道，它腦子里有貨了！

訓(xùn)練（Train）：這個(gè)概念可以這樣理解，比如你創(chuàng)建了個(gè)機(jī)器人，但是它什么都還不懂，于是你塞了堆知識給他，這時(shí)，它就需要自己訓(xùn)練學(xué)習(xí)了。訓(xùn)練好了，就能回答你塞的那堆知識里的問題了。

講到這就忍不住想用這個(gè)學(xué)習(xí)的例子，來簡單講下一般機(jī)器人的創(chuàng)建流程。像我們在學(xué)校，會經(jīng)歷上課學(xué)習(xí)新知識-復(fù)習(xí)溫習(xí)-考試-整理錯(cuò)題集，以此循環(huán)進(jìn)行。

這個(gè)創(chuàng)建機(jī)器人的流程也是一樣通過知識的導(dǎo)入/創(chuàng)建-訓(xùn)練-測試-優(yōu)化-上線-優(yōu)化，以此循環(huán)，不斷強(qiáng)化機(jī)器人，讓它越來越智能。

其他：

數(shù)據(jù)標(biāo)注：將對話日志中的有價(jià)值數(shù)據(jù)做標(biāo)注（標(biāo)記/匹配/關(guān)聯(lián)之類）。

因?yàn)槿说谋磉_(dá)萬千，多種表達(dá)方式都代表的同一個(gè)意思。有時(shí)用戶說了句話，是語料庫中并不包含，于是機(jī)器人可能就答非所問了。

Ai 訓(xùn)練師們就可以將這些數(shù)據(jù)信息標(biāo)注到對應(yīng)的問題中去，這樣當(dāng)用戶再用同樣方式表述時(shí)，機(jī)器人就能如預(yù)期回答了。

講到標(biāo)注想到之前在朋友圈很火的你畫我猜，谷歌推出的這個(gè)小游戲席卷朋友圈。他們用了個(gè)如此聰明的做法，其實(shí)我們參與其中的做法就是在做數(shù)據(jù)標(biāo)注，而且還是主動提供數(shù)據(jù)的那種。

這也反映了，數(shù)據(jù)對于機(jī)器人的重要性，通過不斷的進(jìn)行數(shù)據(jù)維護(hù)和補(bǔ)充數(shù)據(jù)，機(jī)器人就會越來越理解人，表達(dá)也會越來越智能。就跟我們學(xué)習(xí)一樣，不斷學(xué)習(xí)才能夠理解其他的含義，甚至當(dāng)認(rèn)知能力提升了，看待問題的角度才能不一樣。

文章來源：優(yōu)設(shè)

我們在做設(shè)計(jì)的時(shí)候總是會聽到，要注意「節(jié)奏感」。關(guān)于節(jié)奏感這個(gè)詞，大多數(shù)人似懂非懂，可能明白它是什么意思，但是在設(shè)計(jì)中都應(yīng)該注意哪些節(jié)奏感，卻還沒有一個(gè)比較清晰的思路。我們都知道音樂是有不同種類的，有古典音樂，有搖滾音樂等，它們之間的不同，很多時(shí)候是節(jié)奏給我們帶來的感受不同。在設(shè)計(jì)上也是一樣的，掌握節(jié)奏感就能控制畫面的變化和氣質(zhì)的傳達(dá)。

什么是節(jié)奏感

先理解什么是節(jié)奏感。

我們常說的生活節(jié)奏，可以理解為，假如你在規(guī)定時(shí)間里，你只需要上班和回家兩點(diǎn)一線的生活。

但是當(dāng)你有了孩子還要去幼兒園接送，晚上還要去健身等，這樣就是生活節(jié)奏加快了。

我們常聽到的節(jié)奏感其實(shí)是來源于音樂的。

不同節(jié)奏感的音樂會給人不同的感受，就像音樂1這種，會給你一種平靜舒緩的感覺。音樂2這種就會有種比較喧鬧、比較活潑的感覺。

說到設(shè)計(jì)的中的節(jié)奏感，從繪畫里也可以看出，這是吳冠中的繪畫作品，看似很簡單的畫面，但是這種水流的蜿蜒的感覺讓這個(gè)畫面變得靈動起來。

去掉這些流動的線之后，整個(gè)畫面就變得很平靜了。失去了那種蜿蜒流潺的感覺。

在我們很多圖像網(wǎng)站里都用了這種瀑布流的方式，不僅是為了方便不同尺寸的圖片的載入，在很多時(shí)候這種方式，相對于平鋪的圖片放置會更讓人舒服而不枯燥。

節(jié)奏與韻律

在平面設(shè)計(jì)里，我們在學(xué)習(xí)平面構(gòu)成的時(shí)候節(jié)奏與韻律是常常放在一起說的。

我們可以看海報(bào)去理解，第一張海報(bào)那幾條魚擺放的位置是沒什么規(guī)律的，但是它卻能形成節(jié)奏感。那么在第二張海報(bào)，我們能清晰地感受到它的節(jié)奏與韻律的變化。所以節(jié)奏是有規(guī)律或者無規(guī)律的變化的，韻律是有規(guī)律的變化的。

包括去百度百科查找相關(guān)信息也是表達(dá)類似這樣的意思。

一個(gè)版面里的節(jié)奏影響是多方向面的，有文字編排、色彩搭配、圖像處理等。

文字編排

今天我們要講的是文字編排里的節(jié)奏感。在文字編排上我們?yōu)槭裁匆莆展?jié)奏感呢?

我們在看一些純文字的書籍的時(shí)候，很容易犯困。

這就是因?yàn)闀奈淖志幣艓缀鯖]有節(jié)奏感，所以相對來說是枯燥的。

有一些不同的書籍設(shè)計(jì)或者雜志會在里面加入圖片、對文字與版式進(jìn)行處理，使它們變得有變化性，就會調(diào)節(jié)這種節(jié)奏感。讓畫面閱讀不再枯燥。當(dāng)然了，畫面左邊是因?yàn)榇罅康男畔⒌膫鬟_(dá)不適合做過多的變化，否則閱讀過程會有阻礙。這也是根據(jù)不同種類的信息從而把握不同節(jié)奏感的結(jié)果。

所以在這個(gè)畫面里標(biāo)題是節(jié)奏感比較強(qiáng)的，在保證閱讀性的同時(shí)也做到了裝飾性。那么由于下方信息量比較多，這些文字又需要被快速傳達(dá)，所以這些文字的編排就會趨向于閱讀性。

掌握文字編排的節(jié)奏感對畫面?zhèn)鬟_(dá)的氣質(zhì)的影響是非常大的。就像這兩張海報(bào)，它們的背景圖片氣質(zhì)是很像的，都是天空的大留白，但是，完全不同的文字編排，就讓第一張海報(bào)表現(xiàn)出活潑可愛的感覺，第二張海報(bào)表現(xiàn)出平靜安靜的感覺。

我們可以理解為，隨著幾乎沒有節(jié)奏感到節(jié)奏感比較弱再到節(jié)奏感強(qiáng)，它的畫面是可以呈現(xiàn)出由靜止到舒緩再到動感的。

在文字編排中有非常多的對比，是一個(gè)非常大的系統(tǒng)，今天我們主要去梳理一下文字編排時(shí)的一些影響因素，以及在文字編排上一些需要注意的細(xì)節(jié)。（我們今天會講這些影響我們文字編排的節(jié)奏感，字體種類、大小、長短、位置、疏密、顏色、組合形狀和方向。）

1. 字體種類

文字種類就是我們對文字的類別進(jìn)行分類，在字體種類里一般分成了襯線體與非襯線體，但是在中文里，我覺得主要由這五大類組成，分別是黑體，宋體，楷體，圓體與書法體。

包括字體家族里的不同字重。

不僅是這樣，對于同一個(gè)字體我們還分常規(guī)體、窄體、扁體。

一段文字只選擇上面的所說的變化就已經(jīng)可以有很多種了。我拿了一段數(shù)學(xué)公式裝?。這里我們算出有 105 種。所以文字編排時(shí)稍微不注意就會有太多的變化性。

更何況我們經(jīng)常在版面里加入其他國家語言的文字，這些都會影響文字的節(jié)奏感。

所以我們要學(xué)會控制這種節(jié)奏感，一般來說我們?nèi)粘１容^常用的就是黑體配無襯線體，宋體配襯線體。并且在字重上我們都要注意協(xié)調(diào)。盡量使它們看一起是一樣的粗細(xì)度。

不同的字體搭配起來是有一定難度的。這種節(jié)奏感就好像不同風(fēng)格的音樂的結(jié)合，它們之間的銜接與融合會比單純的某一種風(fēng)格的音樂制作起來更難。

這種不同類型的文字的搭配，對于排版和運(yùn)用的能力有一定要求，運(yùn)用不好就會傳達(dá)不了畫面的氣質(zhì)與信息。在電商里的反例是比較多的。在我看到的這張圖里，它同時(shí)用了無襯線體與襯線體的結(jié)合，畫面沒有清晰呈現(xiàn)出準(zhǔn)確的氣質(zhì)。大家可能會說它是簡約高貴風(fēng)，但是這是一個(gè)大范圍，在簡約高貴里有現(xiàn)代的高貴，有復(fù)古的高貴，還有一些與眾不同的高貴等。

我們嘗試把左邊的襯線體換成無襯線看看。是不是有種現(xiàn)代都市的氣質(zhì)？

如果都統(tǒng)一成襯線的話，是不是一種精致的時(shí)尚感就出來了呢。統(tǒng)一這種文字的種類能更加精準(zhǔn)地傳達(dá)畫面的氣質(zhì)。

剛剛我們也說到字體的混搭會產(chǎn)生混亂和怪異感，要慎用，但是如果我們的畫畫就需要這種感覺呢，當(dāng)然就可以用這種特性來故意營造一種怪異感，當(dāng)畫面的字體種類越多的時(shí)候，所營造出來的節(jié)奏感會更強(qiáng)烈。

我們看這個(gè)畫面也是這樣的，周圍的很多圖形和各種各種樣的字體類型讓這個(gè)畫面變得搞怪活潑。

就算去掉了周圍的圖形，文字這傳達(dá)出來的搞怪感覺也依然存在。

接下來我們用這個(gè)文案來做一個(gè)案例演示下，由于平時(shí)很多都是用同一種類型字體搭配，那么這一次就挑戰(zhàn)一下，我就打算做一稿用不同類型字體的版面?？纯磿惺裁礃拥男Ч?。

首先我在版面中劃分版塊，填上相應(yīng)的文字，在這里可以看到，我同時(shí)用了襯線與無襯線的字體，還用了具有手寫性質(zhì)的字體。不僅如此， 所有的文字我都用了窄體而不是常見的常規(guī)體來增強(qiáng)這種怪異的節(jié)奏感。

最后加上一些圖形處理一下負(fù)空間，這個(gè)案例就完成了。

為了減少影響，我把圖片遮住單看文字組，我把這些字體都變成黑體了，對比可以發(fā)現(xiàn)，還是原來的文字組更有搞怪奇異的節(jié)奏感。右邊這個(gè)因?yàn)榘迨脚c圖形的完整性使得它看起來并沒有很大的問題，但是它的確是缺少了像左邊這種古典與現(xiàn)代結(jié)合的節(jié)奏感。

2. 大小

文字的大小節(jié)奏可能會有人理解為這樣，但是我們一般不會這么做。

我們更多地是用在標(biāo)題與內(nèi)文的對比。

節(jié)奏變化比較大的文字組會給人一種沖擊力，讓人無法忽視標(biāo)題的存在，就好像我在大聲告訴你一句話的感覺，會比較強(qiáng)硬與喧鬧。

節(jié)奏比較平緩的文字組表現(xiàn)出一種精致、安靜的感覺。

我們把它們放到畫面里看下，這個(gè)標(biāo)題與內(nèi)文的對比很大，并且在這個(gè)版面中占據(jù)一定的大小，這種時(shí)候有沒有覺得這個(gè)畫面呈現(xiàn)出一種，好像在播放新聞的感覺，好像在說這個(gè)小島有什么重大新聞一樣。

但是當(dāng)標(biāo)題變小時(shí)，整個(gè)畫面呈現(xiàn)出比較平緩的節(jié)奏感，很符合畫面?zhèn)鬟_(dá)出來的安靜舒緩的感覺。

這種方式很多作品都有，這種標(biāo)題和內(nèi)文的對比，或者說是文字在版面的占比比較大時(shí)，就可以體現(xiàn)出這種很強(qiáng)烈的節(jié)奏，讓人很難忽視這些文字內(nèi)容。同時(shí)畫面也更容易傳達(dá)出一種力量感。

往往想要營造這種安靜感的時(shí)候，比較注重畫面整體的感覺，就不需要太多的文字變化，甚至為了區(qū)別文字層級而需要有的文字大小，也盡量地在減少對比。

3. 長短

我們都知道音頻都是這種長短不一的聲波圖，因?yàn)檫@種長短不一的變化感受會給人帶來節(jié)奏感。

所以也有以這種形式來編排文字，表現(xiàn)節(jié)奏感的系列廣告作品。

它比較經(jīng)常出現(xiàn)在居中對齊的文字組上。

但是我們要注意的是，你會發(fā)現(xiàn)很少情況在兩個(gè)極端之間直接過度，比如說一長一短。

在沒有文字大小的對比情況下，如果文字的長短對比太小，我們先不說節(jié)奏感，我們可能會有種疑問，它到底是想兩端對齊還是居中對齊的呢？所以這種兩端模棱兩可的情況最好避免。不能模棱兩可，對比太大又會不夠美觀，所以我們?nèi)?chuàng)造節(jié)奏感的時(shí)候要注意這些問題。

畢竟它不是讓人閱讀時(shí)間很長的文字，所以我們就需要調(diào)節(jié)這種節(jié)奏讓它看起來美觀而且不枯燥。

這是我隨便在購物網(wǎng)站截圖的，你會發(fā)現(xiàn)它們的文字編排都很注意我剛剛說的短長短的節(jié)奏感。

4. 位置

我找了兩張都是黑色背景并且配圖比例也差不多的海報(bào)作對比說明這個(gè)問題。

因?yàn)閳D像的干擾我就同時(shí)去掉了圖片，還有也把右邊紅色的字變成了白色，它們之間的對比變得清晰了，左邊的文字規(guī)劃在版面中顯得更有活力，右邊版面的文字集中在一塊，就像我們前面提到的小說書籍內(nèi)頁一樣。這樣的文字編排在閱讀上會比左邊的缺少節(jié)奏感。但是我在這里要說的一點(diǎn)是，左邊海報(bào)本身的圖像沒有右邊的有沖擊力與活力，所以我們?nèi)绻嬲鰧Ρ鹊脑挕?

用左邊的圖像放置在兩個(gè)不同的版面來作對比，這樣大家應(yīng)該能感覺到差別。左邊的版面雖然沒有表現(xiàn)特別強(qiáng)的節(jié)奏感覺，但是至少版面不是特別壓抑的。至于右邊的我們會覺得很沉靜，配合這種黑色的背景比左邊更壓抑。這就是文字編排在版面的影響。

不僅是文字組之間，標(biāo)題的有意放置不同的位置就可以營造這種節(jié)奏感，是因?yàn)樗廊豢梢允沟梦覀兊拈喿x視線發(fā)生變化。

比較隨意編排的文字組也會比，比較拘謹(jǐn)正式的文字組看起來更有節(jié)奏、更活潑。

接下來我們用案例來演示。

首先選擇纖細(xì)的宋體會比較符合這個(gè)畫面的氣質(zhì)，很多人可能把文字組放在畫面四個(gè)角就算大功告成了，但是這個(gè)畫面既沒有一個(gè)亮點(diǎn)吸引我們，而且畫面里的元素都非常得散，沒有體現(xiàn)出一點(diǎn)活潑的味道。

這個(gè)時(shí)候我們可以效仿剛剛我們看到的標(biāo)題的做法，拉開距離，調(diào)整位置讓它有上下浮動的節(jié)奏感，包括文字上我都做了一些切割移動讓它們活潑，再加上線條讓它們更有聯(lián)系感。這個(gè)畫面就會比剛剛活潑多了。

案例完成。

5. 疏密

左邊緊湊的文字字距會呈現(xiàn)出一種張力，一種急促的節(jié)奏，營造一種緊張感。右邊寬松的字距畫面會更緩和，不同的字距在版面中有寬松對比，也營造出了一種節(jié)奏對比。不會感到枯燥。

很多人可能沒太去注意這些文字編排的小細(xì)節(jié)，這兩版里哪一個(gè)更符合平緩的節(jié)奏感呢？答案是下面這個(gè)。第一張這樣做也沒錯(cuò)的，但是我們想讓文字也能相應(yīng)地呈現(xiàn)出一種透氣感的話，第二張的會更加符合。

6. 顏色

顏色的問題大家應(yīng)該了解了很多了，這里就簡單提一下，就像我們在營造一種氛圍的時(shí)候選擇的氣球顏色都是非常重要的，我們選擇飽和度比較高，顏色種類比較多的氣球的時(shí)候，是想營造一種熱鬧活潑的感覺的。但是如果想營造一種浪漫安靜的氛圍時(shí)就用了很多白色或者淡色調(diào)的顏色。

就像這個(gè) banner 一樣，中間不同顏色的文字為這個(gè)畫面增加了很強(qiáng)的節(jié)奏感。變得很活潑。

很多時(shí)候我們不需要太強(qiáng)的節(jié)奏感，所以我們經(jīng)常給文字做一點(diǎn)的顏色變化，來讓畫面更鮮活。就像這個(gè) banner，如果它沒有了左邊那個(gè)粉色的顏色的跳躍。

這個(gè)畫面就會變得很沉靜。

如果，畫面文字的粉色變多，它的節(jié)奏感又會變得更強(qiáng)。

不僅是因?yàn)檫@個(gè)顏色本身的跳躍性比較高，而且也是因?yàn)轭伾牟煌Ｇ袚Q導(dǎo)致這種節(jié)奏感的增強(qiáng)。所以不同顏色的占比也是需要考慮的。在這里主要是因?yàn)槟Ｌ厣砩蠜]有玫紅色，所以左邊不適合用過多的玫紅色，用全黑都會顯得很沉悶，所以這里選擇用一次玫紅色讓這個(gè)畫面鮮活。

6. 組合形狀

我們在這些變化的圖形中替換兩個(gè)不同形狀的圖形，我們可以感覺到替換后的圖形里的變化會更多，呈現(xiàn)出來的活潑性更強(qiáng)了。當(dāng)畫面中的不同形狀更多，就會趨向于一種混亂。

用不同的圖形在版面里，有區(qū)分不同信息的作用，但是這種方式也是增加版面節(jié)奏感的一種方式。在很多促銷的傳單會經(jīng)?？吹?。

這個(gè)畫面沒有人物圖片，僅僅是通過文字的編排就能傳達(dá)出這種熱鬧的節(jié)奏感。

除了顏色本身的熱鬧性，其中比較大的影響因素。就是文字在各種不同形狀里的編排，讓這個(gè)畫面呈現(xiàn)出熱鬧的氛圍。

7. 方向

隨著方向變化越來越多，畫面會趨向于更有動感的的節(jié)奏。但是節(jié)奏感覺也是有度的，一旦變化性很多，那么這個(gè)版面就會顯得雜亂。我們也可以簡單理解為亂的元素的占比決定著你畫面呈現(xiàn)出來的節(jié)奏感的強(qiáng)烈。

像第一張海報(bào)一樣，這種有點(diǎn)古老的作品我們一般會認(rèn)為是比較正式和比較嚴(yán)肅的，但是這些方向不一的文字編排，向我們說明了這不是一個(gè)嚴(yán)肅的展覽，而是具有活潑的屬性，從而吸引不同的觀看群體。包括右邊這個(gè)海報(bào)的文字編排都讓這個(gè)畫面的節(jié)奏感變得更強(qiáng)了，與人物夸張的肢體語言也相呼應(yīng)。

傾斜的文字編排在電商里是出現(xiàn)得比較多的，微微傾斜文字就可以強(qiáng)調(diào)這種活潑的節(jié)奏感。

我們來看一個(gè)比較明顯的例子，畫面只有一個(gè)黃色的色塊和文字編排以及一個(gè)不規(guī)則的圖形，但是這個(gè)畫面呈現(xiàn)出來的感覺卻很活潑。

其實(shí)去掉這圖形，也并沒有影響原有的氣質(zhì)，是因?yàn)槲淖值木幣诺姆较蛐缘膶Ρ茸屗墓?jié)奏感增強(qiáng)了。

7. 案例演示

那么說到這里其實(shí)今天的內(nèi)容也就結(jié)束了，這次的案例就給大家演示下怎么用這些知識去做一張海報(bào)。

首先我們要分析這個(gè)畫面，圖片本身是比較具有節(jié)奏感的，因?yàn)椴皇俏覀兤匠？吹囊m子的視角，而且人物有一種運(yùn)動過程的動勢。

這個(gè)負(fù)空間非常不規(guī)則，如果文字在這個(gè)畫面負(fù)空間上直接加字的話，可能就會顯得比較亂，但是我們又要做出迎合這個(gè)圖片的節(jié)奏但是不亂的畫面，應(yīng)該怎么做呢？

首先不采取直接在圖上加字的方式，把圖片縮小，再添加一個(gè)深色的底色，這樣這張圖片和這個(gè)畫面里就是一個(gè)整體了。

由于我們要壓住圖片的節(jié)奏感，不讓它太亂，所以我在周圍的空間編排文字是呈現(xiàn)一個(gè)既有文字層級關(guān)系，但是整體是呈現(xiàn)矩形的文字組。現(xiàn)在這個(gè)畫面看起來的確不會亂，但是文字還是少了和圖片活潑氣質(zhì)契合的節(jié)奏感。

分析一下這個(gè)畫面，是宇宙系列的感覺，所以我就加入了環(huán)形的文字，然后再加一點(diǎn)與圖片呼應(yīng)的顏色。這個(gè)畫面就會比之前更和諧。在做的過程通過減少變化與增加變化讓畫面逐漸接近自己的預(yù)期。

總結(jié)一下今天我們講的，我們今天講的是文字編排中的節(jié)奏感，在一開始，我分別給大家講了從生活節(jié)奏、音樂節(jié)奏、再到設(shè)計(jì)的節(jié)奏去理解什么是節(jié)奏感，然后我還講了關(guān)于文字節(jié)奏感對于畫面的重要性，無論是對信息的傳達(dá)還是對氣質(zhì)的表現(xiàn)，它的影響是非常大的。最主要的部分，我講了影響文字編排的節(jié)奏都有哪些因素，比如文字類型、大小、方向、長短、文字組合形態(tài)等。把握自己要傳達(dá)的節(jié)奏，才能正確傳達(dá)信息。大家也可以用這種方式去看作品，分析它的節(jié)奏感是通過什么方式形成的。久而久之，對節(jié)奏感的掌握就會更加熟練與精準(zhǔn)。

文章來源：優(yōu)設(shè)

卡片式設(shè)計(jì)對于我們來說并不陌生，從設(shè)計(jì)類網(wǎng)站上或市場上的一些 APP 中也會看到很多的卡片式設(shè)計(jì)的案例，卡片式設(shè)計(jì)也是 UI 設(shè)計(jì)中最常用的方式之一。

最近在新項(xiàng)目的設(shè)計(jì)中也嘗試使用了卡片式設(shè)計(jì)，結(jié)合實(shí)際項(xiàng)目中的一些思考進(jìn)行總結(jié)并歸納出一些卡片式設(shè)計(jì)的小知識點(diǎn)。同時(shí)希望通過本次的總結(jié)進(jìn)行知識沉淀，以及跟大家一起探討下卡片式設(shè)計(jì)。

來源于日常

在現(xiàn)實(shí)生活中的卡片式設(shè)計(jì)可以說是無處不在，例如身份證、交通卡、銀行卡、名片、便利貼、撲克牌、游戲卡……諸如此類的生活常見品都是以卡片的方式存在，其共同點(diǎn)都使用一個(gè)容器承載著內(nèi)容，并且具有「便攜性、信息簡潔和相對獨(dú)立性」。

UI設(shè)計(jì)中卡片的使用場景

在項(xiàng)目設(shè)計(jì)之初我分析了一些使用卡片設(shè)計(jì)的 App，并且從中整理總結(jié)了幾個(gè)較為常見的卡片式設(shè)計(jì)的使用場景。

1. Feed流

卡片式的 feed 流設(shè)計(jì)是一種非常常見的設(shè)計(jì)，早在前幾年 Facebook、Google+ 等產(chǎn)品就使用了這一方式，F(xiàn)eed 流作為一種長內(nèi)容的媒介，用戶需要長時(shí)間的滑動看內(nèi)容并篩選有效信息，卡片式設(shè)計(jì)很好的解決了內(nèi)容與內(nèi)容的區(qū)塊分隔，讓用戶在長屏幕滑動中依舊可以很好的明確識別每一塊的內(nèi)容。

實(shí)際案例-淘寶微淘

2. 瀑布流設(shè)計(jì)

瀑布流的出現(xiàn)讓單屏區(qū)域內(nèi)顯示更多的內(nèi)容，而內(nèi)容較多的情況下，使用卡片式設(shè)計(jì)可以較好的對內(nèi)容進(jìn)行了區(qū)域劃分，讓上下左右的內(nèi)容從整體中具有相對獨(dú)立性。

實(shí)際案例-Pinterest

3. 左右滑動組合型內(nèi)容

卡片式設(shè)計(jì)具有較強(qiáng)的層次感，相比于平鋪更能呈現(xiàn)內(nèi)容可滑動的感受，并且塊狀化的設(shè)計(jì)讓內(nèi)容具有較高的區(qū)域分割感。

實(shí)際案例-QQ音樂

4. Tips提醒

作為非界面固定內(nèi)容，卡片式設(shè)計(jì)可以讓 tips 提醒設(shè)計(jì)變得更自由，在符合用戶體驗(yàn)的基礎(chǔ)上，它可以出現(xiàn)在任何我們想要它出現(xiàn)的位置。

實(shí)際案例-淘票票會員提醒

5. 結(jié)合手勢的單塊可互動內(nèi)容

若頁面中有且只有一個(gè)主內(nèi)容，并且需要用戶進(jìn)行快速篩選時(shí)，可考慮這種結(jié)合卡片式設(shè)計(jì)與手勢設(shè)計(jì)的方式。大大增強(qiáng)了用戶對于設(shè)計(jì)的體驗(yàn)感知和豐富視覺表現(xiàn)。

實(shí)際案例-探探首頁

6. 卡券類設(shè)計(jì)

卡券類的設(shè)計(jì)實(shí)際上是一種物化映射的過程，我們在現(xiàn)實(shí)中看到的卡券造型，結(jié)合卡片式的擬物化設(shè)計(jì)，讓用戶在屏幕上可以更直觀的感知，提升了設(shè)計(jì)的代入感。

實(shí)際案例-京東領(lǐng)券中心

7. 集合型功能入口

集合型功能入口往往會有多個(gè)入口，使用卡片式設(shè)計(jì)讓入口形成一個(gè)區(qū)域整體，可以做到既統(tǒng)一又相對獨(dú)立。

實(shí)際案例-淘寶微淘關(guān)注賬號

8. 個(gè)人主頁頂部內(nèi)容卡片

個(gè)人主頁的設(shè)計(jì)往往會在氛圍上營造沉浸感，卡片式的設(shè)計(jì)可以把關(guān)鍵信息進(jìn)行概括收歸，讓原本單個(gè)的內(nèi)容形成一個(gè)整體。

實(shí)際案例-美團(tuán)外賣會員

規(guī)則探討

基礎(chǔ)的卡片設(shè)計(jì)規(guī)則，相信大家在一些系統(tǒng)級別的設(shè)計(jì)指導(dǎo)規(guī)范中也或多或少都能了解到，不同平臺的規(guī)范差異其實(shí)不會有太多本質(zhì)性的區(qū)別，更多的是處理技巧或方式的差異，而每個(gè)設(shè)計(jì)師對其理解的角度也會具有一些差異化，這里分享下我對于卡片式設(shè)計(jì)的一些基礎(chǔ)想法。

1.卡片的質(zhì)感打磨

同樣的卡片設(shè)計(jì)，不同的人做出來的感受可能會有所差別，而表達(dá)卡片質(zhì)感的主要關(guān)鍵點(diǎn)在于：卡片形體、投影深度、卡片顏色對比，我們需要了解這些基礎(chǔ)知識點(diǎn)之后，再結(jié)合實(shí)際的 APP 風(fēng)格進(jìn)行設(shè)計(jì)。

卡片形體

就像圖標(biāo)的圖形設(shè)計(jì)一樣，不一樣的形體也能表達(dá)出不一樣的氣質(zhì)，因此在設(shè)計(jì)的時(shí)候我們需要依據(jù)整體的風(fēng)格進(jìn)行表達(dá)。異形卡片的設(shè)計(jì)，可以讓原有方方正正的卡片表達(dá)出差異化，從造型上打破一些傳統(tǒng)的處理方式，再結(jié)合一些 IP 人物元素可以更加直觀的表達(dá)出具體的內(nèi)容氛圍。

投影深度

投影的視覺效果，會直接影響整體卡片的質(zhì)感，太深太大的投影會顯得整體卡片過于厚重，太淺太小的投影則顯得過度生硬，因此合理的數(shù)值比例可以讓卡片看起來自然有質(zhì)感。在項(xiàng)目中我常用的一組數(shù)值規(guī)律是 1:2 或 1:3，例如 Y 軸偏移 10px，模糊度則設(shè)定為 20 或 30px，這樣成比例的數(shù)值出來的效果會較為自然，如下圖：

卡片顏色對比

卡片與背景的顏色對比會影響這卡片的整體質(zhì)感，在設(shè)計(jì)時(shí)我們需要把握好卡片與底色的對比，不同的明暗對比出來的質(zhì)感也會有差異。這里有兩點(diǎn)建議：

• 卡片色與背景色不宜太過接近或使用同一顏色，因?yàn)闀绊懣ㄆw的空間質(zhì)感或使得卡片的邊緣銳度下降；
• 深色背景上，盡量讓卡片與背景色在同一色系或者明度不要差異太大，避免過于突兀。

2. 邊距的設(shè)定

在使用卡片式設(shè)計(jì)時(shí)，經(jīng)常會糾結(jié)邊距的設(shè)定，寬邊還是窄邊？多少像素更為合適？我經(jīng)常會帶著這種疑問去設(shè)計(jì)。

基于內(nèi)容的簡單規(guī)則

卡片式設(shè)計(jì)作為設(shè)計(jì)的表現(xiàn)形式，最終是為了承載內(nèi)容，因此邊距的寬窄也需要依賴于實(shí)際內(nèi)容的判斷。結(jié)合我在項(xiàng)目中的嘗試分享以下幾點(diǎn)：

多窄少寬

卡片內(nèi)容較多是使用窄邊距，讓卡片具有足夠的空間來展現(xiàn)內(nèi)容，內(nèi)容較少則可以考慮采用寬邊距來打造整體的視覺空間感，如下圖 app store 和淘寶的設(shè)計(jì)對比。當(dāng)然這只是一個(gè)建議，實(shí)際還得具體問題具體分析。

再如一些瀑布流、宮格、橫滑模塊較多的 APP 設(shè)計(jì)亦是如此，在內(nèi)容較多的情況下會把邊距壓縮到最小的合理間距。

內(nèi)外成比例

以最外邊為基礎(chǔ)值往里設(shè)計(jì)，間距以固定比例進(jìn)行縮減，雖然沒有刪格來得規(guī)范，但也可以讓設(shè)計(jì)變得有跡可循。

基于刪格

刪格系統(tǒng)解決了一些基礎(chǔ)的板式問題，有助于提升設(shè)計(jì)的規(guī)范性，讓設(shè)計(jì)更加有跡可循。在設(shè)定卡片式的邊距時(shí)可以適當(dāng)應(yīng)用刪格系統(tǒng)，讓邊距與內(nèi)容形成固定的關(guān)系，這樣可以幫助整體的卡片設(shè)計(jì)更加具有細(xì)節(jié)和規(guī)則。

4.卡片的標(biāo)題設(shè)定

標(biāo)題的設(shè)定主要考慮以下幾點(diǎn)：1.是在卡片內(nèi)還是卡片外；2.標(biāo)題的字號設(shè)定多少更合適；3.標(biāo)題是否加粗？

卡片內(nèi)或外的對比

在項(xiàng)目設(shè)計(jì)中讓我較為糾結(jié)的是：標(biāo)題應(yīng)該在卡片內(nèi)還是卡片外？通過了一些案例的嘗試之后，我總結(jié)了一個(gè)規(guī)則（需要依據(jù)內(nèi)容的形態(tài)而進(jìn)行設(shè)計(jì)）：當(dāng)卡片內(nèi)容是獨(dú)立的模塊或模塊中只有一個(gè)大標(biāo)題時(shí)可設(shè)定在卡片內(nèi)；當(dāng)卡片內(nèi)容是以組合呈現(xiàn)或者具有延續(xù)性內(nèi)容時(shí)設(shè)定在卡片外，形成最外層的主標(biāo)題。

標(biāo)題的字號設(shè)定

標(biāo)題主要作用為 2 點(diǎn)：1.簡短說明每個(gè)模塊的內(nèi)容；2.讓用戶在長頁面瀏覽中起到引導(dǎo)、定位的作用。

通過一些嘗試發(fā)現(xiàn)：1.當(dāng)內(nèi)容較少時(shí)，并不需要太大的字號即可起到標(biāo)題的作用；2.當(dāng)內(nèi)容較多時(shí)，較小的標(biāo)題字號則容易被沉入內(nèi)容中，讓用戶在瀏覽的過程中難以發(fā)現(xiàn)，而導(dǎo)致信息獲取缺失；3.建議標(biāo)題與正文字號大小差異在 6-10px，這樣可以更好的拉開差異，讓標(biāo)題更具有標(biāo)題感。

字體是否加粗

常規(guī)思維下我們都會對標(biāo)題進(jìn)行加粗，我在實(shí)際中的經(jīng)驗(yàn)得到的總結(jié)是：需要看手機(jī)系統(tǒng)或不同廠商的機(jī)型。我在項(xiàng)目之初都對標(biāo)題進(jìn)行了加粗，但后續(xù)在跟進(jìn)還原時(shí)看到的效果并不理想，特別是 Android 的機(jī)型上，因?yàn)槲覀兪褂玫氖窍到y(tǒng)默認(rèn)字體，android 系統(tǒng)很多字體并未對系統(tǒng)進(jìn)行優(yōu)化，而是使用微軟雅黑，微軟雅黑在android 系統(tǒng)上再加粗，就會顯得整個(gè)系統(tǒng)的外輪廓特別粗糙，最后我們依據(jù)不同的機(jī)型進(jìn)行了差異化的選擇。

4. 圓角的規(guī)則

圓角的設(shè)定實(shí)際上沒有太多的原則問題，只要符合整體的風(fēng)格調(diào)性即可。當(dāng)然不同的圓角也能表達(dá)出不同的質(zhì)感，大圓角表達(dá)柔和、小圓角表達(dá)硬朗。

圓角的規(guī)則設(shè)定

以卡片的圓角作為基礎(chǔ)的參考值往內(nèi)推算整體的圓角使用規(guī)范，卡片與卡內(nèi)的元素形成合理的比例規(guī)則，而非隨意根據(jù)「經(jīng)驗(yàn)」進(jìn)行設(shè)定。

圓角大小差異對比

大小的差異化呈現(xiàn)出不同的視覺感受和風(fēng)格差異，我們在設(shè)計(jì)時(shí)更多需要考慮我們設(shè)計(jì)的產(chǎn)品風(fēng)格或氣質(zhì)是適合大圓角還是小圓角，而非依據(jù)一些設(shè)計(jì)網(wǎng)站上的流行趨勢。因此基于不同的風(fēng)格或者實(shí)際內(nèi)容場景下進(jìn)行設(shè)定才更為合理。

5. 寬窄間距對比

卡片式設(shè)計(jì)相比拉通式設(shè)計(jì)更需要考慮設(shè)計(jì)中的透氣感。在常規(guī)情況下，對內(nèi)容邊距及四周邊距進(jìn)行調(diào)整，讓內(nèi)容之間具有較好的空間呼吸感，從而讓設(shè)計(jì)得到留白的效果。如下圖對比案例，在基礎(chǔ)刪格不變的情況下，每個(gè)間距都在原有基礎(chǔ)上擴(kuò)大了12px（接近 1.33 倍），從而讓內(nèi)容具有較為舒適的寬度進(jìn)行閱讀

優(yōu)點(diǎn)分析

選擇某一種設(shè)計(jì)方式的重點(diǎn)在于我們了解這種方式的優(yōu)點(diǎn)，并且可以把這些優(yōu)點(diǎn)融合到我們的設(shè)計(jì)當(dāng)中。在項(xiàng)目設(shè)計(jì)中，我總結(jié)了幾點(diǎn)卡片式設(shè)計(jì)的優(yōu)點(diǎn)。

1. 優(yōu)化模塊化，提升內(nèi)容區(qū)域感

模塊化的設(shè)計(jì)也是我們?nèi)粘Ｖ袝?yīng)用到的方法，結(jié)合卡片式的設(shè)計(jì)可以讓模塊化的規(guī)則變得更加簡單，增加了模塊之間的可復(fù)用性和延展性。而當(dāng)內(nèi)容較多的情況下，使用卡片式設(shè)計(jì)可以有效直接的形成區(qū)域分隔，從視覺感知上就對內(nèi)容進(jìn)行了分隔，提升用戶獲取信息的效率。

2. 提升內(nèi)容獨(dú)立性

在組合型的內(nèi)容設(shè)計(jì)上，使用卡片式設(shè)計(jì)可以讓每個(gè)小塊內(nèi)容呈現(xiàn)相對獨(dú)立的展現(xiàn)特性，結(jié)合模塊化的設(shè)計(jì)，可以在一大片關(guān)聯(lián)的內(nèi)容中，做到既統(tǒng)一又相對獨(dú)立。

3. 增強(qiáng)視覺空間感

卡片式的設(shè)計(jì)可以提升整體設(shè)計(jì)層次感，通過投影、前后顏色的設(shè)定，讓內(nèi)容與背景之間產(chǎn)生視覺空間感。

4. 增強(qiáng)視覺表現(xiàn)力

在設(shè)計(jì)中我們可以對卡片進(jìn)行異形設(shè)計(jì)，用來達(dá)到我們想要的風(fēng)格表現(xiàn)。當(dāng)然在一個(gè)頁面內(nèi)盡量不要太多，盡量使用頁面中的首個(gè)卡片進(jìn)行差異化處理，讓整體表現(xiàn)出一點(diǎn)不同即可。

5. 增強(qiáng)可點(diǎn)性

卡片式設(shè)計(jì)產(chǎn)生的空間感，讓每個(gè)模塊更加突出，相比扁平式的處理方式，卡片式從視覺感官上會較為突出，從感官上更具可點(diǎn)擊感知。

缺點(diǎn)及建議

任何一種設(shè)計(jì)方式都會有其利弊，最終選擇某一種其實(shí)不過就是當(dāng)下最適合而已，而在嘗試中我也總結(jié)了幾點(diǎn)卡片式設(shè)計(jì)存在的一些缺點(diǎn)，當(dāng)然只是個(gè)人的思考而已。

1. 橫向空間利用率降低

卡片式設(shè)計(jì)的存在左右邊距，因此在有限的屏寬內(nèi)內(nèi)容橫向區(qū)域相比于拉通式設(shè)計(jì)有所減少，在內(nèi)容較多的情況下可以適當(dāng)調(diào)小卡片左右邊距。

2. 避免過多的層級

從整體來說，卡片式的設(shè)計(jì)本身就是增加了基礎(chǔ)背景的層級表現(xiàn)，其視覺層級相比拉通式更為豐富，因此不建議在卡片上再二次疊加塊狀式設(shè)計(jì)，避免造成層級復(fù)雜。在項(xiàng)目中也會遇到內(nèi)容層級需要多層級的表現(xiàn)，從中總結(jié)了2種方式：

• 利用不拉通分割線；
• 利用淺色背景底色。

3. 不適合長文或內(nèi)容多的表達(dá)

若在設(shè)計(jì)上使用了卡片式的設(shè)計(jì)風(fēng)格，但在一些長文表現(xiàn)的界面建議去除卡片。長文章的頁面更強(qiáng)調(diào)閱讀的沉浸感，用戶需要更多的專注于文字，這時(shí)候無邊的體驗(yàn)更適合。

4. 把握好界面的分區(qū)，避免過于擁擠的排版

卡片設(shè)計(jì)具有獨(dú)特的視覺空間感，但卡片與卡片之間也會有分隔，因此在設(shè)計(jì)時(shí)更應(yīng)該對內(nèi)容進(jìn)行歸納，避免產(chǎn)生過多的小塊卡片而導(dǎo)致排版過于擁擠、凌亂或者內(nèi)容不夠?qū)挾日宫F(xiàn)。

總結(jié)

無論是卡片式或者拉通平鋪的方式，其最終的目的都是為了服務(wù)于內(nèi)容，我們在做設(shè)計(jì)的過程中只是選擇適合于呈現(xiàn)我們內(nèi)容的一種方式。根據(jù)具體的內(nèi)容情況給出合理/合適的設(shè)計(jì)判斷才是我們需要不斷提升的關(guān)鍵點(diǎn)，切莫流于形式而忽略了內(nèi)容設(shè)計(jì)本身的重要性。

文章來源：優(yōu)設(shè)