本系列文章旨在由淺入深、由理論到實(shí)踐地介紹 VR 設(shè)計(jì)。無(wú)論你在做哪個(gè)領(lǐng)域的設(shè)計(jì)，都能通過(guò)這個(gè)系列了解 VR 設(shè)計(jì)的特點(diǎn)。本文是第一集，深入分析 VR 界面的文字設(shè)計(jì)。

文章來(lái)源：優(yōu)設(shè)    作者：愛奇藝XRD

今天，90％ 的媒體互動(dòng)都是基于屏幕的，通過(guò)手機(jī)，平板，筆記本電腦，電視和智能手表來(lái)與外界產(chǎn)生聯(lián)系。多屏設(shè)計(jì)已成為商業(yè)設(shè)計(jì)中不可或缺的一部分，響應(yīng)式設(shè)計(jì)正迅速成為常態(tài)。作為 UI 設(shè)計(jì)師，我們希望為我們的產(chǎn)品在不同尺寸下都能為用戶提供良好的用戶體驗(yàn)，柵格系統(tǒng)可以幫助我們做到這一點(diǎn)。

即使是我們只針對(duì)一個(gè)尺寸進(jìn)行設(shè)計(jì)，我們也經(jīng)常面臨設(shè)計(jì)布局方面的問(wèn)題。合理運(yùn)用柵格系統(tǒng)可以幫助我們控制布局結(jié)構(gòu)并實(shí)現(xiàn)一致和有組織的設(shè)計(jì)。柵格系統(tǒng)就像無(wú)形的膠水一樣凝聚一個(gè)設(shè)計(jì)，即使元素看上去是彼此分離，但通過(guò)網(wǎng)格將它們連接在一起，實(shí)現(xiàn)良好的層次結(jié)構(gòu)，位置關(guān)系和一致性。

設(shè)計(jì)師和開發(fā)者之間的協(xié)作過(guò)程中，柵格系統(tǒng)在前端開發(fā)中是被應(yīng)用的很廣泛一套體系，許多優(yōu)秀的設(shè)計(jì)都使用了柵格系統(tǒng)，使用柵格系統(tǒng)可以加速開發(fā)并保證視覺還原。柵格系統(tǒng)雖然是傳統(tǒng)設(shè)計(jì)方法中的一部分，但它仍舊能幫助我們?nèi)ピO(shè)計(jì)這個(gè)多終端的世界。看到這里，你可能非常想知道柵格系統(tǒng)在頁(yè)面中是如何運(yùn)作的，那么今天我們一起來(lái)學(xué)習(xí)并且實(shí)踐我們的格柵系統(tǒng)。

「The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.」

「柵格系統(tǒng)可以幫助我們?cè)O(shè)計(jì)，但卻不能保證我們的設(shè)計(jì)。它有多種可能的用途，并且每個(gè)設(shè)計(jì)師都可以尋找適合其個(gè)人風(fēng)格的解決方案。但是必須學(xué)習(xí)如何使用網(wǎng)格。這是一門需要實(shí)踐的藝術(shù)?！?

——Josef Müller-Brockmann《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》作者

什么是柵格系統(tǒng)？

柵格系統(tǒng)可以讓你依靠秩序與邏輯去完成設(shè)計(jì)。

早在 20 世紀(jì)初，德國(guó)、荷蘭、瑞士等國(guó)的平面設(shè)計(jì)師們發(fā)現(xiàn)通過(guò)維持視覺秩序，從而使版面能更加清晰有效地傳遞信息，二戰(zhàn)后這種理念在瑞士得到了良好的發(fā)展，直到 20 世紀(jì) 40 年代后期，第一次出現(xiàn)了使用網(wǎng)格進(jìn)行輔助設(shè)計(jì)的印刷作品。由瑞士設(shè)計(jì)師大師 Josef Müller-Brockmann（約瑟夫·米勒-布羅克曼）所著的《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》一書，自 1961 年出版以來(lái)暢銷至今，對(duì)設(shè)計(jì)界有著深遠(yuǎn)的影響。史稱 Swiss Typography Movement （瑞士新浪潮平面設(shè)計(jì)運(yùn)動(dòng)），后來(lái)成為全球風(fēng)靡的 International Typographic Style （國(guó)際主義設(shè)計(jì)風(fēng)格)）。

△ 約瑟夫·米勒一布羅克曼 (Josef Muller-brockmann, 1914-1996)

瑞士的一位平面設(shè)計(jì)師和教師。1958 年任《新平面設(shè)計(jì)》（New Graphic Design）主編 1966 年被任命為 IBM 的歐洲設(shè)計(jì)顧問(wèn)。布羅克曼因他的極簡(jiǎn)主義設(shè)計(jì)與簡(jiǎn)潔的排版、圖形和色彩而聞名，他的設(shè)計(jì)對(duì) 21 世紀(jì)的眾多平面設(shè)計(jì)師都產(chǎn)生了重大影響。

柵格系統(tǒng)的優(yōu)勢(shì)

1. 減少?zèng)Q策成本提高設(shè)計(jì)理解力

柵格系統(tǒng)在頁(yè)面排版布局、尺寸設(shè)定方面給了設(shè)計(jì)者直觀的參考，它讓頁(yè)面設(shè)計(jì)變得有規(guī)律，從而減少了設(shè)計(jì)決策成本；UI 設(shè)計(jì)也是需要理性的、客觀的、具有數(shù)學(xué)邏輯美感的。熟練運(yùn)用網(wǎng)格系統(tǒng)能夠讓你的設(shè)計(jì)更有秩序和節(jié)奏感，頁(yè)面信息的展現(xiàn)更加清晰，提高閱讀效率，從而提供給用戶舒適的使用體驗(yàn)。加快認(rèn)知速度。這意味著用戶在使用產(chǎn)品完成特定的任務(wù)時(shí)，例如發(fā)送消息，預(yù)訂酒店房間或乘車。用戶能夠連貫地理解并找到下一條信息或下一步要采取的步驟。

2. 響應(yīng)化

因?yàn)槿藗兪褂貌煌愋偷脑O(shè)備與產(chǎn)品進(jìn)行互動(dòng)，從智能手表的小屏幕到超寬屏電視，交互是流暢的，并且沒(méi)有固定的尺寸。使用產(chǎn)品時(shí)，人們通常會(huì)在多個(gè)設(shè)備之間切換，以完成該產(chǎn)品的單個(gè)任務(wù)。所以響應(yīng)式設(shè)計(jì)不應(yīng)該是一種品，而是一種必需品。這意味著設(shè)計(jì)師不能再為單個(gè)設(shè)備的屏幕構(gòu)建。多設(shè)備環(huán)境迫使設(shè)計(jì)人員根據(jù)動(dòng)態(tài)網(wǎng)格系統(tǒng)進(jìn)行思考，而不是固定寬度。使用網(wǎng)格可以跨不同屏幕尺寸的多個(gè)設(shè)備創(chuàng)建連貫的體驗(yàn)。

3. 加速團(tuán)隊(duì)協(xié)作設(shè)計(jì)

當(dāng)多位設(shè)計(jì)師共同設(shè)計(jì)產(chǎn)品時(shí)，一個(gè)統(tǒng)一標(biāo)準(zhǔn)就變得尤為重要。如果沒(méi)有一個(gè)統(tǒng)一的框架去約束的話，我們的產(chǎn)品的頁(yè)面和組件的標(biāo)準(zhǔn)可能各式各樣，這樣的話整個(gè)產(chǎn)品的頁(yè)面都會(huì)比較混亂。因此，網(wǎng)格系統(tǒng)有助于將界面設(shè)計(jì)工作分開，因?yàn)槎辔辉O(shè)計(jì)師可以在統(tǒng)一的布局下進(jìn)行不同部分工作，并且無(wú)縫集成并保持連貫。

4. 加速開發(fā)并保證視覺還原

大多數(shù)設(shè)計(jì)項(xiàng)目的實(shí)施，涉及到設(shè)計(jì)者和開發(fā)者之間的協(xié)作。柵格化提高了頁(yè)面布局的一致性和復(fù)用性；避免了設(shè)計(jì)師與開發(fā)者在細(xì)節(jié)上的反復(fù)溝通確認(rèn)，從而提升了整個(gè)設(shè)計(jì)開發(fā)流程的效率、并能幫助開發(fā)者實(shí)現(xiàn)較為理想的設(shè)計(jì)還原。

柵格系統(tǒng)的基本構(gòu)成

1. 列和槽（Columns and Gutters）

列（Columns） 和槽（Gutters）。列（Column）是內(nèi)容的容器，水槽（Gutter）用來(lái)調(diào)節(jié)相鄰兩個(gè)列的間距，把控頁(yè)面留白；列和列間距加上頁(yè)面邊距（Margin）加起來(lái)屏幕的水平寬度。列和列間距的內(nèi)容區(qū)域（Content width）由 N個(gè)列和（N-1）個(gè)水槽組成。通常情況下，web 端采用 12 列，平板采用 8 列，手機(jī)采用 4 列。當(dāng)然，你可以根據(jù)項(xiàng)目特點(diǎn)來(lái)設(shè)計(jì)你的網(wǎng)格系統(tǒng)，列和水槽的寬度我們可以利用 8 點(diǎn)網(wǎng)格系統(tǒng)來(lái)定義，下面會(huì)講到。列的數(shù)量越多，頁(yè)面就會(huì)被分割得越「碎」，在頁(yè)面設(shè)計(jì)時(shí)就會(huì)越難把控，適用于業(yè)務(wù)信息量大、信息分組較多、單個(gè)盒子內(nèi)信息體積較小的頁(yè)面設(shè)計(jì)，列間距寬度數(shù)值對(duì)頁(yè)面的影響，與外邊距大體類似，即間距越大頁(yè)面越輕松簡(jiǎn)單，反之亦然。用戶已經(jīng)習(xí)慣通過(guò)鼠標(biāo)滾輪或滾動(dòng)條（scrollbar）來(lái)縱向?yàn)g覽頁(yè)面內(nèi)容，因此豎直方向可以無(wú)限延伸，所以柵格系統(tǒng)在豎直方向的柵格可以不體現(xiàn)出來(lái)，我們?cè)趫?zhí)行設(shè)計(jì)時(shí)只要在水平方向保持規(guī)律的變化就可以了。

2. 頁(yè)面邊距（Side Margins）

頁(yè)面邊距就是內(nèi)容區(qū)域（Content field）以外的空間，比較推薦的設(shè)計(jì)就是頁(yè)面邊距可以隨著屏幕尺寸的增大而增大。頁(yè)面邊距在移動(dòng)設(shè)備上通常是 12Px到 40Px 之間，在平板設(shè)備和桌面設(shè)備頁(yè)面邊距變化就相當(dāng)多了。在響應(yīng)式設(shè)計(jì)中，你選擇了一個(gè)頁(yè)面邊距之后，縮小頁(yè)面寬度時(shí)頁(yè)面還是會(huì)有你設(shè)置的最小頁(yè)面邊距，直到到達(dá)下一個(gè)響應(yīng)點(diǎn)（breakpoint）。當(dāng)你增大頁(yè)面寬度時(shí)，頁(yè)面就有更多的頁(yè)面邊距，直到頁(yè)面寬度到達(dá)下一個(gè)響應(yīng)點(diǎn)（breakpoint）。

3. 模塊（Field Elements）

模塊就是你的設(shè)計(jì)區(qū)塊，可以是一段文字，一張圖片，或是其他更加豐富的元素。背景元素并不能算作是設(shè)計(jì)模塊，所以并不需要遵循柵格系統(tǒng)。模塊的定義是很靈活的，它可以是個(gè)小的單位或是元素，也可以是一個(gè)元素豐富的區(qū)塊。

以 12 柵格系統(tǒng)為例，一個(gè) 12 柵格系統(tǒng)可以根據(jù)業(yè)務(wù)需要被 2 等分、3 等分、4 等分、6 等分、12 等分，還可以被 1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5 等不對(duì)稱分割，具體采用哪種比例的組合需要我們根據(jù)自己業(yè)務(wù)需求來(lái)定。

4. 8 點(diǎn)網(wǎng)格（8pt spatial system）

柵格系統(tǒng)大的層面可以幫助設(shè)計(jì)者更好的進(jìn)行版式設(shè)計(jì)與內(nèi)容布局，而小的方面可以輔助設(shè)計(jì)師規(guī)范頁(yè)面內(nèi)各種元素的對(duì)齊與間距的設(shè)定。從用戶體驗(yàn)角度來(lái)講，這兩者同等重要，從執(zhí)行層面來(lái)講，我們一般先做版式設(shè)計(jì)與布局，然后再填充內(nèi)容、調(diào)整細(xì)節(jié)。

由于列跟水槽的寬度是以網(wǎng)格作為基本單位來(lái)增加或者減小，所以柵格化的重要一步就是需要先定義好柵格的原子單位「網(wǎng)格」的大小。目前最普適易用的就是 8 點(diǎn)網(wǎng)格。我們也可以利用 8 點(diǎn)網(wǎng)格法來(lái)制定產(chǎn)品中的間距，建立 8 點(diǎn)為一個(gè)單位的網(wǎng)格，使用 8 的倍數(shù)來(lái)定義模塊的間距與元素的尺寸。8 點(diǎn)網(wǎng)格有如下幾點(diǎn)優(yōu)勢(shì)：

• 目前主流桌面設(shè)備的屏幕分辨率在豎直與水平方向基本都可以被 8 整除，使用 8 作為最小原子足夠普適?？梢源_保不同布局之間的視覺一致性，同時(shí)可以靈活的適配多種尺寸的設(shè)計(jì)。以 8 為單位符合「偶數(shù)原則」。偶數(shù)原則可以在頁(yè)面縮放中的避免類似于 0.5、0.75、1.25 等次像素的出現(xiàn)，從而使頁(yè)面各類元素在大多數(shù)場(chǎng)景下都能有比較精致的細(xì)節(jié)表現(xiàn)。
• 在網(wǎng)格系統(tǒng)中應(yīng)該更加注重的是間距，而間距要遵循網(wǎng)格系統(tǒng)（例如使用 4、8、16、24、32 等和 8 具有規(guī)律的數(shù)字）同時(shí)在產(chǎn)品中的各類元素也要遵循這類原則（例如圖標(biāo)大小、組件大小等）。所以布局的水平和垂直節(jié)奏和各個(gè)組件的節(jié)奏會(huì)相互重疊，整體的設(shè)計(jì)將更加完整。
• 開發(fā)工程師使用的前端開源組件庫(kù)比如 Metronic、Antdesign 等也是基于 8 的原子單位來(lái)設(shè)計(jì)，因此如果設(shè)計(jì)師也使用以 8 為基本單位的柵格系統(tǒng)，開發(fā)與設(shè)計(jì)師相互對(duì)接就會(huì)更加方便，開發(fā)實(shí)現(xiàn)頁(yè)面時(shí)也能更高品質(zhì)地去還原我們的設(shè)計(jì)。

如果設(shè)計(jì)上沒(méi)有立即可識(shí)別的間距系統(tǒng)時(shí)，這種設(shè)計(jì)可能會(huì)讓用戶感覺廉價(jià)、不一致，而且通常不值得信任。如果設(shè)計(jì)上遵循一個(gè) 8pt 網(wǎng)格系統(tǒng)時(shí)，節(jié)奏變得可預(yù)測(cè)和視覺上的愉悅。對(duì)于用戶來(lái)說(shuō)，這種體驗(yàn)是經(jīng)過(guò)修飾和可預(yù)測(cè)的，這增加了用戶對(duì)品牌的信任和喜愛。

無(wú)論有多少個(gè)設(shè)計(jì)師在協(xié)同合作，現(xiàn)在都有一個(gè)一致的間距規(guī)范，決策成本將大大降低。設(shè)計(jì)師可以輕松地從另一個(gè)設(shè)計(jì)師停止的地方開始設(shè)計(jì)，或者輕松地并行構(gòu)建。我們定義下規(guī)范可以及時(shí)和開發(fā)同學(xué)溝通，因此可以為工程師節(jié)省時(shí)間。

5. 基線網(wǎng)格（Baseline Grid）

基線網(wǎng)格由密集的水平行組成，這些行提供文本的對(duì)齊和間距準(zhǔn)則，類似于您在直紋紙上書寫的方式。在下面的示例中，每 8px 行在紅色和白色之間交替。

△ 基線網(wǎng)格

提示：將所有行高設(shè)置為基本單位（8x 或 4px）的增量非常重要，這樣您的文本才能與基線網(wǎng)格完美對(duì)齊。

△ 字體行高

響應(yīng)式設(shè)計(jì)

1. 什么是響應(yīng)式？

設(shè)計(jì)師需要通過(guò)設(shè)計(jì)讓內(nèi)容在不同的平臺(tái)上體驗(yàn)最大化，確保讓用戶在任何一個(gè)屏幕上看到內(nèi)容的時(shí)候，會(huì)覺得這些內(nèi)容就是為這個(gè)平臺(tái)而設(shè)計(jì)的，而不是單純的縮放而來(lái)。這種無(wú)縫的體驗(yàn)，才是跨屏幕設(shè)計(jì)的真正難點(diǎn)所在。想要制定一套針對(duì)不同設(shè)備和屏幕的設(shè)計(jì)方案，你需要一整套的策略。用戶體驗(yàn)同時(shí)包含了性能、交互、效率等多方面內(nèi)容，也就是說(shuō)，對(duì)于一個(gè)線上的響應(yīng)式頁(yè)面，我們不僅要關(guān)注視覺上看到的，也要關(guān)注我們操作、使用時(shí)的感受，這些綜合因素最終影響著用戶使用時(shí)的效率與體驗(yàn)。

2. 響應(yīng)式設(shè)計(jì)的核心步驟

確保核心的用戶體驗(yàn)

雖然用戶體驗(yàn)是無(wú)處不在的，但是對(duì)于特定產(chǎn)品，最核心的體驗(yàn)是存在的。產(chǎn)品通常是用來(lái)解決用戶所面臨的特定問(wèn)題的，它的這一特質(zhì)讓產(chǎn)品變得有意義。關(guān)鍵的內(nèi)容和關(guān)鍵的功能的組合，通常構(gòu)成了產(chǎn)品的核心用戶體驗(yàn)。如果你并沒(méi)有想明白這個(gè)問(wèn)題，不妨問(wèn)問(wèn)自己：用戶需要完成哪些最常見/最重要的任務(wù)？找到問(wèn)題的答案之后，你的產(chǎn)品就應(yīng)當(dāng)從各個(gè)方面、各個(gè)渠道，完整而全面地支撐這些功能，幫助用戶完成這些任務(wù)。舉個(gè)例子，Uber 的核心用戶體驗(yàn)是隨時(shí)隨地叫車，無(wú)論設(shè)備的屏幕大小如何，你進(jìn)行的設(shè)計(jì)全部都應(yīng)該圍繞著這個(gè)需求和功能來(lái)進(jìn)行。叫車是 Uber 的核心功能，即使使用 Apple Watch 這種極小的屏幕尺寸都應(yīng)該順利地完成這個(gè)任務(wù)。

敲定你的產(chǎn)品所覆蓋的設(shè)備類型

現(xiàn)在的移動(dòng)端設(shè)備屏幕尺寸各不相同，單獨(dú)為某一個(gè)設(shè)備設(shè)計(jì)內(nèi)容無(wú)疑是不現(xiàn)實(shí)的。根據(jù)你的產(chǎn)品覆蓋人群、受眾分類、使用場(chǎng)景，綜合考慮你的內(nèi)容會(huì)優(yōu)先呈現(xiàn)在哪些設(shè)備和平臺(tái)上，然后有意識(shí)地篩選出常見的設(shè)備類型：手機(jī)，平板，桌面端，智能電視，智能手表……

不同的設(shè)備組合通常是基于不同的場(chǎng)景、需求和服務(wù)來(lái)構(gòu)成的，用戶會(huì)針對(duì)不同的屏幕進(jìn)行不同模式的交互，甚至處理的內(nèi)容也會(huì)有差異。比如說(shuō)，在手機(jī)上，用戶更加傾向于使用輕量級(jí)的任務(wù)，并且進(jìn)行一定量的溝通和交流。在平板上，用戶行為更多集中在內(nèi)容消費(fèi)上，并且目前平板的使用量被認(rèn)為在逐步降低。桌面端依然是用戶完成較為專業(yè)、復(fù)雜任務(wù)的首選平臺(tái)，足以應(yīng)付復(fù)雜多樣的內(nèi)容。了解各種設(shè)備類型和使用場(chǎng)景是用來(lái)構(gòu)建用戶體驗(yàn)的關(guān)鍵。

針對(duì)不同內(nèi)容來(lái)匹配用戶體驗(yàn)

并非所有的內(nèi)容都符合不同設(shè)備的使用場(chǎng)景，比如智能手表就不適合展示大量的文本內(nèi)容。你的產(chǎn)品所覆蓋的設(shè)備組當(dāng)中，每種設(shè)備的使用場(chǎng)景不同，應(yīng)該匹配的用戶體驗(yàn)也不一樣。移動(dòng)端用戶和桌面端用戶的需求就是不同的，場(chǎng)景差異也很大。以 Evernote 為例，它可以在多種不同類型的設(shè)備之間同步和切換，其桌面端版本就針對(duì)用戶的內(nèi)容需求進(jìn)行了優(yōu)化：Evernote 的桌面端應(yīng)用程序針對(duì)閱讀性的內(nèi)容和多媒體進(jìn)行了優(yōu)化，而移動(dòng)端的 Evernote 則強(qiáng)化了拍攝記錄、圖片和音頻記錄的功能：其次，不同的設(shè)備屏幕具備不同的輸入方式，設(shè)計(jì)師如果忽略輸入方式上的獨(dú)特性，也常常會(huì)出現(xiàn)許多問(wèn)題，這里就不擴(kuò)展開來(lái)了。

優(yōu)先為最小的屏幕做設(shè)計(jì)

一直以來(lái)，設(shè)計(jì)師都習(xí)慣從最大的屏幕著手設(shè)計(jì)，最后考慮最小的屏幕上的顯示效果，這意味著絕大多數(shù)的設(shè)計(jì)都是從桌面端開始設(shè)計(jì)的，通常桌面端的內(nèi)容和功能更全面。當(dāng)桌面端的整體設(shè)計(jì)完成之后，再推進(jìn)到其他設(shè)備端的設(shè)計(jì)。然而，在進(jìn)行桌面端設(shè)計(jì)的時(shí)候，我們常常會(huì)遭遇「廚房水槽」困境：由于產(chǎn)品通常會(huì)牽涉到多個(gè)利益相關(guān)方，許多多余的功能會(huì)被加入進(jìn)來(lái)。而實(shí)踐經(jīng)驗(yàn)表明，移動(dòng)端優(yōu)先的設(shè)計(jì)往往能夠更好的專注于核心功能，更適合作為產(chǎn)品設(shè)計(jì)的起點(diǎn)。當(dāng)你優(yōu)先設(shè)計(jì)最小屏幕所需要的界面的時(shí)候，這種局面會(huì)強(qiáng)制你從最關(guān)鍵最重要的地方開始設(shè)計(jì)。這也是之前設(shè)計(jì)圈和產(chǎn)品開發(fā)領(lǐng)域一直所強(qiáng)調(diào)的「移動(dòng)端優(yōu)先」的策略的由來(lái)。在此之后，再進(jìn)行平板、桌面和電視端的設(shè)計(jì)，就是一個(gè)自然地做加法的過(guò)程了。在絕大多數(shù)的案例當(dāng)中，最小屏幕通常是手機(jī)屏幕。

測(cè)試你的設(shè)計(jì)

產(chǎn)品的測(cè)試環(huán)境并不一定都得是在現(xiàn)實(shí)世界中尋找，但是在盡可能讓真實(shí)的用戶來(lái)做可用性測(cè)試，并且在產(chǎn)品發(fā)布之前解決所有的用戶體驗(yàn)上的問(wèn)題。

3. 為何要利用柵格系統(tǒng)來(lái)進(jìn)行響應(yīng)式設(shè)計(jì)?

響應(yīng)式可以響應(yīng)的前提有兩點(diǎn)：1、頁(yè)面布局具有規(guī)律性、2、元素寬高可用百分比代替固定數(shù)值，而這兩點(diǎn)正是柵格系統(tǒng)本身就具有的典型特點(diǎn)，所以利用柵格系統(tǒng)進(jìn)行響應(yīng)式的設(shè)計(jì)是順理成章的，也比較快捷，所以響應(yīng)式與柵格化天生一對(duì)好搭檔。

如何建立柵格系統(tǒng)

第1步：確定列的數(shù)量

第一階段先不要限制自己的列數(shù)。首先，創(chuàng)建一個(gè)低保真或高保真的原型。設(shè)計(jì)一些基本元素和用戶流程。在此之后，就開始設(shè)計(jì)最優(yōu)的列數(shù)和大小。如果在項(xiàng)目開始設(shè)計(jì)之后不得不改變我們的柵格系統(tǒng)，不要有負(fù)擔(dān)，我們需要有一些試錯(cuò)的空間。

我們?cè)谠O(shè)計(jì)頁(yè)面時(shí)，用到最多的布局方式就是等分布局，即頁(yè)面內(nèi)容區(qū)域被 N 等分，每一份的寬度則根據(jù)屏幕寬度自適應(yīng)調(diào)整。那么就從這個(gè)角度出發(fā)，思考一下頁(yè)面的網(wǎng)格應(yīng)該設(shè)置為多少列，才能的滿足各種等分布局的需要。與 web 類似，移動(dòng)端最方便的網(wǎng)格之一是 12 列網(wǎng)格。這個(gè)網(wǎng)格將允許我們?cè)谝恍兄型瑫r(shí)放置偶數(shù)和奇數(shù)個(gè)元素。

對(duì)于移動(dòng)端來(lái)說(shuō)，12 列網(wǎng)格的缺點(diǎn)是一個(gè)列的寬度太小，你可能很少創(chuàng)建一個(gè)列寬度的元素。如果你選擇 2、4 或 8 列網(wǎng)格，請(qǐng)記住在一行中放置奇數(shù)個(gè)元素可能會(huì)出現(xiàn)的問(wèn)題。

Pro-Tip：

界面設(shè)計(jì)通常包含數(shù)百個(gè)不同的頁(yè)面，因此，一個(gè)網(wǎng)格可能不適合所有的頁(yè)面。如果需要，創(chuàng)建額外的柵格系統(tǒng)，但不要忘記設(shè)計(jì)的一致性。網(wǎng)格系統(tǒng)的一致性：相同的布局邊距、列之間相等或成比例的水槽，以及更改列本身的寬度時(shí)其他模塊也需要保持相同的比例。

第2步：定義水槽和邊距

首先，讓我們先翻閱目標(biāo)屏幕的設(shè)計(jì) Guideline，以找出通常頁(yè)面邊距（Side Margins）。目前，Android 和 iOs 的最小推薦布局邊距為 16pt。web 端則依照屏幕尺寸不同而不同。這意味著，如果你希望遵循系統(tǒng)指南，則頁(yè)面邊距不應(yīng)小于 16pt。（但可以更大的）

在選擇 12 列網(wǎng)格時(shí)，列之間的水槽不應(yīng)該太大，因?yàn)橛捎诹械膶挾刃『退鼈冎g的大寬度的水槽，列將在視覺上產(chǎn)生分裂的感覺。同時(shí)我建議你選擇與8pt 間距系統(tǒng)成比例的水槽大小。所以布局的水平和垂直節(jié)奏會(huì)相互重疊。水槽與頁(yè)面邊距成比例。那么網(wǎng)格更加一致，也將允許我們輕松地在其中放置特殊元素，如輪播（carousel）。

第3步：定義 8pt間距系統(tǒng)

了幫助不同設(shè)計(jì)能力的設(shè)計(jì)者們?cè)诮缑娌季稚系囊恢滦院晚嵚筛?，統(tǒng)一設(shè)計(jì)到開發(fā)的布局語(yǔ)言，減少還原損耗。在大量的實(shí)踐中，我們提取了一組可以用于 UI 布局空間決策的數(shù)組，他們都保持了 8 倍數(shù)的原則、具備動(dòng)態(tài)的韻律感。經(jīng)過(guò)驗(yàn)證，可以在一定程度上幫助我們更快更好地實(shí)現(xiàn)布局空間上的設(shè)計(jì)決策。定義網(wǎng)格系統(tǒng)方法很多，如運(yùn)用 8 點(diǎn)網(wǎng)格系統(tǒng)、斐波那契數(shù)列、某最小原子單位的增量、從底層系統(tǒng)參數(shù)化定義間距等，我們以最小原子單位的增量為例去定義網(wǎng)格系統(tǒng)。最小單元格的數(shù)值選擇需要從兩方面考慮：

• 一方面是該數(shù)值是否能被大多數(shù)手機(jī)屏幕的寬度整除，即廣泛的適用性；
• 另一方面是在具體使用時(shí)是否具有一定的靈活性。

在適用性方面，4、6、8、10 這四個(gè)數(shù)值都是基本可以滿足的，在靈活性方面，4px 表現(xiàn)最佳，但是頁(yè)面就會(huì)被分割的非常細(xì)碎，在設(shè)計(jì)時(shí)比較難于把控。因此我們需要根據(jù) APP 的實(shí)際情況選擇合適的數(shù)值，4px 或 6px 單元格比較適合頁(yè)面內(nèi)容信息較多，布局排版比較復(fù)雜的產(chǎn)品。而 8px 單元格對(duì)一般的設(shè)計(jì)場(chǎng)景都可以很好的滿足，比較適合大多數(shù)的 項(xiàng)目，因此是比較推薦使用的。

那么假設(shè)我們以 8 為基準(zhǔn)的去延展系統(tǒng)間距，得到如下間距系統(tǒng)：

1、2、8、16、24、32、40、48、56、64、72、80、88、96、192 等，這里都是 8 的倍數(shù)或能被 8 整除

但是目前間距數(shù)量太多，過(guò)于細(xì)碎也會(huì)導(dǎo)致間距比較亂，所以我們繼續(xù)優(yōu)化梳理（以 6 為基準(zhǔn)，前面?zhèn)€數(shù)是后面?zhèn)€數(shù)的 2 倍遞增），得到以下間距系統(tǒng)：

1、2、8、16、24、32、48、64、80、96

第4步：sketch布局設(shè)置

利用 sketch 的布局設(shè)置功能，即可快速搭建出網(wǎng)格系統(tǒng)的參考布局，在平時(shí)做設(shè)計(jì)的過(guò)程中，可以經(jīng)常使用 Ctrl+L 快捷鍵切換布局的顯示，提高設(shè)計(jì)效率。

我們來(lái)解釋一下這些設(shè)置分別是什么：

• Total Width：就是內(nèi)容區(qū)域（Container）的值；
• Offset：表示柵格的偏移量，我們只要設(shè)定完成以后按 Center 按鈕即可，會(huì)自動(dòng)居中；
• Number of Columns：就是柵格數(shù)；
• Gutter on outside：是非常重要的設(shè)置，勾選以后才能跟前端的柵格算法匹配；
• Gutter Width：就是柵格之間的間距；
• Columns Width：就是柵格的寬度。

如何做到響應(yīng)式?

在傳統(tǒng)的柵格化系統(tǒng)設(shè)計(jì)中，列的寬度和水槽的寬度是保持不變的，只是列的「數(shù)量」發(fā)生變化。為什么要這么處理呢？這是為了讓設(shè)計(jì)更簡(jiǎn)單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會(huì)顯示兩張卡片，并把第三張卡片進(jìn)行折行顯示在第二行上。不需要做任何的調(diào)整，因?yàn)橐呀?jīng)知道它位于第四列上了。在手機(jī)上，答案也很簡(jiǎn)單，只需要一張卡片，其他的就會(huì)自動(dòng)堆到下面的行中。但是目前我有更多的響應(yīng)策略，例如當(dāng)視窗（Viewport）發(fā)生變化時(shí)，內(nèi)容區(qū)域的元素如何去響應(yīng)，具體到我們當(dāng)前的柵格系統(tǒng)，就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 組成的盒子（BOX）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁(yè)面的布局如何調(diào)整。

1. 固定柵格或是斷點(diǎn)系統(tǒng)（Fixed boxes or breakpoint system）

固定網(wǎng)格，列寬和水槽寬不會(huì)改變，只是改變列的數(shù)目，當(dāng)窗口縮放時(shí)，排版布局不會(huì)發(fā)生任何改變，只有當(dāng)達(dá)到一個(gè)臨界值（開發(fā)那邊設(shè)置好的固定的值），界面才會(huì)發(fā)生改變。在此之前界面排版都是不變的，就像一部分被切掉了。

如果開發(fā)那邊寫了一個(gè)固定柵格，當(dāng)你從桌面縮小到平板電腦，就像是在桌面的瀏覽器寬度時(shí)，你不會(huì)看到任何變化，設(shè)計(jì)就像是被剪掉了一樣。但當(dāng)達(dá)到平板屏幕尺寸臨界點(diǎn)時(shí)，設(shè)計(jì)布局馬上就會(huì)改變，平板電腦上的顯示效果就會(huì)好起來(lái)。如果繼續(xù)減小這個(gè)值，同樣的事情也會(huì)發(fā)生，在到達(dá)另一個(gè)臨界值之前，設(shè)計(jì)看起來(lái)都是不變的。下面是常見的斷點(diǎn)系統(tǒng)（Breakpoint System）

如圖，響應(yīng)式是以視窗的最小寬度作為基本依據(jù)來(lái)制定每種寬度下 Columns、Gutters、與 Margins 的響應(yīng)策略，也就是說(shuō) Viewport Min-width 是做出響應(yīng)的觸發(fā)條件，視窗每達(dá)到一個(gè)最小寬度，就會(huì)觸發(fā)該寬度下預(yù)設(shè)的頁(yè)面布局方式，而每種布局都是在該寬度下的最佳布局，也是因此，響應(yīng)式才會(huì)在各種復(fù)雜分辨率條件下都能給用戶比較好的體驗(yàn)。
每個(gè)視窗寬度的最小值是觸發(fā)響應(yīng)的關(guān)鍵值，因此我們給這些用于觸發(fā)的關(guān)鍵值起了個(gè)名字叫「Breakpoint」，每個(gè) Breakpoint 觸發(fā)一種響應(yīng)策略。

2. 流動(dòng)?xùn)鸥瘢‵luid Grid）

流動(dòng)?xùn)鸥裣到y(tǒng)是編輯內(nèi)容，儀表板，圖像，視頻，數(shù)據(jù)可視化等理想的響應(yīng)策略。當(dāng)窗口縮小時(shí)，內(nèi)容將動(dòng)態(tài)地發(fā)生變化，文本會(huì)進(jìn)行換行，元素也會(huì)變窄。然而，這些元素在內(nèi)容寬度縮小到下一個(gè)臨界值之前，布局是不會(huì)變化的。在各種情況下，對(duì)用戶來(lái)說(shuō)，擴(kuò)展內(nèi)容的大小比擴(kuò)展可見內(nèi)容的數(shù)量更有用。

所以我想說(shuō)的是，斷點(diǎn) BreakPoint 只是一個(gè)更改布局的參考點(diǎn)。這就是為什么列寬和水槽的數(shù)量不會(huì)改變的原因，因?yàn)槲覀兿胱屧O(shè)計(jì)師在考慮布局時(shí)能夠更容易地創(chuàng)建一致性。內(nèi)容寬度會(huì)隨著窗口的縮放而發(fā)生改變，例如圖片會(huì)縮小，文本會(huì)換行。水槽的寬度不一定是固定的，可以隨著頁(yè)面寬度變化。

在每個(gè)斷點(diǎn)處，列計(jì)數(shù)是固定的，列寬度是最小網(wǎng)格 8PT 的倍數(shù)。行高是列大小的倍數(shù)，遵循推薦的縱橫比。邊距和填充是小單位的固定倍數(shù)。在斷點(diǎn)之間，實(shí)際列寬是網(wǎng)格區(qū)域的百分比，而不是一個(gè)小的單位倍數(shù)。內(nèi)容尺度流暢。

首先從所以屏幕大小中選擇一個(gè)基本尺寸，然后按照推薦的縱橫比以基本大小的倍數(shù)構(gòu)建每個(gè)響應(yīng)式尺寸。當(dāng)每個(gè)塊使用相同基礎(chǔ)大小的倍數(shù)時(shí)，就會(huì)出現(xiàn)網(wǎng)格。遵循此方法可確保柵格系統(tǒng)一致性，甚至跨產(chǎn)品的一致性。

3. 混合柵格（Hybrid Boxes）

在實(shí)際項(xiàng)目中，使用流動(dòng)網(wǎng)格和固定網(wǎng)格的組合也是常見的做法。網(wǎng)站通常是流動(dòng)網(wǎng)格，因?yàn)樗ミm應(yīng)各種不同終端的大小。后臺(tái)系統(tǒng)設(shè)計(jì)、工具型的界面設(shè)計(jì)就比較經(jīng)常使用網(wǎng)格和流動(dòng)網(wǎng)格組合的形式。例如的后臺(tái)管理系統(tǒng)（dashboard）側(cè)邊欄是固定網(wǎng)格，右側(cè)內(nèi)容是流動(dòng)網(wǎng)格。混合柵格在每個(gè)維度上有不同的縮放規(guī)則，所以它們不使用統(tǒng)一的縮放比。當(dāng)用戶需要調(diào)整瀏覽器的大小以使內(nèi)容在一個(gè)維度上伸縮而在另一個(gè)維度上不伸縮時(shí)，便使用混合網(wǎng)格。

面板對(duì)柵格系統(tǒng)的影響

1. 靈活面板（Flexible panels）

靈活的面板允許折疊和擴(kuò)展?fàn)顟B(tài)。面板的展開狀態(tài)為固定寬度，用戶無(wú)法調(diào)節(jié)。當(dāng)用戶將鼠標(biāo)懸停在折疊的面板上時(shí)，面板就會(huì)展開。當(dāng)靈活的面板擴(kuò)展時(shí)，它們要么壓縮內(nèi)容和網(wǎng)格，要么將內(nèi)容推到瀏覽器邊緣之外。

2. 固定面板（Fixed panels）

固定面板保持靜態(tài)寬度，不能折疊，也存在于響應(yīng)網(wǎng)格之外。

3. 懸浮面板（Floating panels）

此面板樣式漂浮在主要內(nèi)容區(qū)域之上，不影響響應(yīng)網(wǎng)格。浮動(dòng)面板將任何 UI 元素隱藏在其下方，用戶必須將其移除。內(nèi)聯(lián)菜單、下拉菜單和工具提示也是浮動(dòng)的。

總結(jié)

寫這篇文章的目的是想提供一些關(guān)于如何在響應(yīng)式設(shè)計(jì)中使用柵格系統(tǒng)，我知道對(duì)于我自己來(lái)說(shuō)，我花了很多時(shí)間理解網(wǎng)格是如何工作的。我在 YouYube 上看了很多視頻，也閱讀了大量的文章，但每個(gè)人都在關(guān)注它為什么重要，卻不去注重到底怎么在自己的項(xiàng)目中使用這些原則。

你要做的最好的事情就是從現(xiàn)在開始注意那些優(yōu)秀設(shè)計(jì)是如何對(duì)齊元素的，你將會(huì)開始閱讀這些設(shè)計(jì)系統(tǒng)。為了幫助理解，這里有一些設(shè)計(jì)系統(tǒng)概述了它們的網(wǎng)格使用：

• Google’s Material Design System
  https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins
• Intuit’s Design System
  https://designsystem.quickbooks.com/foundations/responsive-column-grid/
• IBM’s Carbon Design System
  https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals

在完全理解了網(wǎng)格的工作原理之后，你將成為了一名更好的設(shè)計(jì)師，因?yàn)槟阒懒四愕脑O(shè)計(jì)將如何在臨界值之間進(jìn)行轉(zhuǎn)換。你也可以落地你的設(shè)計(jì)，使它們能夠達(dá)到像素級(jí)完美。這樣的規(guī)范帶來(lái)了更一致，更簡(jiǎn)潔的設(shè)計(jì)，當(dāng)用戶從一個(gè)界面到另一個(gè)界面流轉(zhuǎn)時(shí)，這真的提升了產(chǎn)品的檔次。我建議在你的設(shè)計(jì)中去應(yīng)用這些網(wǎng)格，并和開發(fā)同學(xué)一起，以實(shí)踐的方式將它們落地，這將會(huì)是一個(gè)非常不錯(cuò)的進(jìn)步。

文章來(lái)源：優(yōu)設(shè)    作者：IvanZheng

Dribbble 經(jīng)歷了資本入駐、創(chuàng)始人出走之后，最大的事情應(yīng)該就是這次改版吧？這個(gè)全球最大、最有影響力的設(shè)計(jì)師社區(qū)的每一個(gè)動(dòng)作都必然會(huì)牽扯著每個(gè)設(shè)計(jì)從業(yè)者的注意力，新版背后到底有哪些變化？這些變化又是出于什么樣的想法來(lái)修改的？看看 Dribbble 的官博是怎么說(shuō)的吧：

在過(guò)去的10年當(dāng)中，Dribbble 已經(jīng)成長(zhǎng)成為一個(gè)全球性的社區(qū)，成千上萬(wàn)的人從這里獲得啟發(fā)和靈感，助力設(shè)計(jì)，而我們從最初分享設(shè)計(jì)作品小樣的創(chuàng)意社區(qū)，逐步成長(zhǎng)為一個(gè)全球設(shè)計(jì)師產(chǎn)品和作品集展示和社交的平臺(tái)。在此，而我們也第一次開始問(wèn)自己一個(gè)簡(jiǎn)單的問(wèn)題：【我們到底是在做些什么？】

今天，我們很高興宣布，我們?cè)谶^(guò)去的10年當(dāng)中首次進(jìn)行了徹底的重設(shè)計(jì)。

Dribbble 的新時(shí)代

在過(guò)去十年當(dāng)中，我們所設(shè)計(jì)的 Dribbble 頁(yè)面的特點(diǎn)，是將設(shè)計(jì)師的作品和內(nèi)容放在首位，所以叫我們不追隨潮流，采用了極簡(jiǎn)風(fēng)格的設(shè)計(jì)，即使潮流來(lái)來(lái)去去，它們也只是 Dribbble 展示內(nèi)容的一部分。我們提供了一幅未經(jīng)修飾的畫布，這樣就可以和最瘋狂最激進(jìn)的設(shè)計(jì)探索相輔相成。不過(guò)，這么多年來(lái)，Dribbble 這種「隱形」的設(shè)計(jì)，在視覺美學(xué)上確實(shí)和時(shí)代脫節(jié)了。這次，我們創(chuàng)建了一套有著一致樣式的設(shè)計(jì)和代碼庫(kù)，用以替代以往不斷修改、龐大且不一致的代碼。

「我們新的設(shè)計(jì)系統(tǒng)旨在保持整個(gè)視覺和諧的同時(shí)，展示你的創(chuàng)造力。」

如今，我們正在改進(jìn) Dribbble 的界面，以更加干凈的布局、統(tǒng)一的設(shè)計(jì)系統(tǒng)、更加簡(jiǎn)化的配色方案、更加輕便的代碼庫(kù)（加載也更加迅速），以及全新配置的文件，來(lái)更好地幫你將作品推到最前沿，正確而合理地展示你的創(chuàng)作和個(gè)性。

我們新的設(shè)計(jì)系統(tǒng)旨在保持整個(gè)視覺和諧的同時(shí)，展示你的創(chuàng)造力。它是你分享設(shè)計(jì)作品和創(chuàng)造力的理想畫布，而新的美學(xué)特質(zhì)也可以更好地反應(yīng)此刻我們的公司的氣質(zhì)。

全新的設(shè)計(jì)師個(gè)人頁(yè)面

在進(jìn)行重設(shè)計(jì)的時(shí)候，我們明確知道，我們要完全重新思考社交化的設(shè)計(jì)師作品展示，并且將創(chuàng)意更大化地呈現(xiàn)。對(duì)于 Dribbble Pro 用戶和 Pro Business 訂閱者，你現(xiàn)在擁有一個(gè)全新的、經(jīng)過(guò)全面修改的設(shè)置和配置頁(yè)面，可以在 Dribbble 上充分展示自己的個(gè)性，

你的頁(yè)面，你的個(gè)性

Pro 用戶和 Pro Business 用戶可以通過(guò)上傳你自己的首圖和定制化的歡迎語(yǔ)，來(lái)個(gè)性化你的個(gè)頁(yè)面。

你還會(huì)注意到，你的個(gè)人頁(yè)面還可以上傳更大的照片，這可以讓你的作品對(duì)于頁(yè)面的訪客、你的客戶、招聘設(shè)計(jì)師的企業(yè)人事而言，看起來(lái)都是非常出挑的。新的網(wǎng)格布局是可以自定義的，因此你可以充分完美地設(shè)置和展示內(nèi)容。

此外，我們還修改了「關(guān)于我們」這個(gè)部分，新版當(dāng)中，這個(gè)部分你可以將所有的個(gè)人信息匯集到一起，以便完整而充分地展示你的個(gè)人經(jīng)歷、展示簡(jiǎn)歷和技能。

尋求工作機(jī)會(huì)？

如果你正在尋求工作機(jī)會(huì)，新的信息發(fā)送組件，確保了你的客戶或者招聘企業(yè)可以一鍵聯(lián)系到你，他們可以直接從你的個(gè)人資料頁(yè)向你發(fā)送信息，非常輕松地和你取得聯(lián)系。

面向所有人的新個(gè)人頁(yè)面

當(dāng)然，并非是只有 Pro 和 Pro Business 用戶才能擁有高度定制化的個(gè)人頁(yè)面，無(wú)論你是普通用戶、內(nèi)容創(chuàng)作者還是內(nèi)容策劃人，Dribbble 上每個(gè)普通用戶的個(gè)人頁(yè)面也都會(huì)升級(jí)。尚未訂閱 Pro 服務(wù)的設(shè)計(jì)師會(huì)注意到，他們的個(gè)人頁(yè)面會(huì)更加簡(jiǎn)潔，而設(shè)計(jì)作品會(huì)以更加聚焦的形式，吸引到每一個(gè)訪客的目光。

全新的收藏頁(yè)

我們將以往的帶有分享功能的收藏合集頁(yè)（之前叫 Buckets）給翻新了，你可以精心策劃整頁(yè)內(nèi)容和案例，從一個(gè)情緒板到完整的項(xiàng)目，這意味著，借助這個(gè)收藏頁(yè)功能，你可以更加輕松地在 Dribbble 上尋找和搜集靈感。

給策劃人的個(gè)人頁(yè)面

現(xiàn)在，我們可以非常自豪地宣布，即使你并沒(méi)有將 Dribbble 作品給分享出來(lái)，每個(gè)人也都會(huì)擁有一個(gè)策劃人頁(yè)面，你可以在其中搜集和整理自己喜歡的作品，來(lái)展示你的個(gè)人品味，通過(guò)保存別人的作品，來(lái)創(chuàng)建新的合集，我們會(huì)自動(dòng)將它添加到你的個(gè)人頁(yè)資料頁(yè)當(dāng)中，讓全世界的同好因?yàn)槠肺欢P(guān)注你。

升級(jí)發(fā)現(xiàn)頁(yè)

我們?cè)谡麄€(gè)改版設(shè)計(jì)過(guò)程中，面臨最大的挑戰(zhàn)，其實(shí)是圖片網(wǎng)格，因?yàn)檫@是絕大多數(shù)用戶每天瀏覽圖片、發(fā)現(xiàn)設(shè)計(jì)靈感的地方，我們有意識(shí)地去弱化 Dribbble 本身 UI，避免喧賓奪主，讓每個(gè)用戶的作品成為視覺焦點(diǎn)，減少噪音。

當(dāng)然，我們還未完成…

2020 年才剛剛開始，我們迫不及待地想要展示我們計(jì)劃中的一切。從案例研究到更好的視頻支持，再到作品集展示，擺在我們眼前的改版路線圖足以證明我們的雄心，所有的這一切都是為了讓全球的設(shè)計(jì)師能夠從中獲益，走向成功。請(qǐng)期待我們進(jìn)一步的改版升級(jí)吧！

文章來(lái)源：優(yōu)設(shè)    作者：Dribbble

在B端的UI設(shè)計(jì)過(guò)程中經(jīng)常要接觸到大量的表單設(shè)計(jì)，且要展示海量數(shù)據(jù)，因此如何展示更清晰且讓用戶使用起來(lái)更便捷是設(shè)計(jì)師主要需要考慮的。結(jié)合自己在實(shí)際工作中遇到的列表類型總結(jié)了 web 表格設(shè)計(jì)的常用基礎(chǔ)列表模式，并進(jìn)行匯總以便后續(xù)使用。

一、基礎(chǔ)型列表

web列表中的基礎(chǔ)表格樣式，通常用于橫向表格的縱列數(shù)據(jù)較少時(shí)，使頁(yè)面不需要滑動(dòng)條也可以展示完全。操作項(xiàng)一般置于頁(yè)面最右側(cè)，便于用戶瀏覽完全后進(jìn)行操作。

二、 帶有進(jìn)度條的列表

用于查看數(shù)據(jù)完成進(jìn)度，通常與網(wǎng)格型列表搭配使用，方便數(shù)據(jù)的直觀對(duì)比，進(jìn)度條用不同顏色進(jìn)行區(qū)分，降低用戶認(rèn)知負(fù)荷。

三、可進(jìn)行選擇、排序、篩選、表頭分組且?guī)в袃鼋Y(jié)列的復(fù)合型表格

由于業(yè)務(wù)場(chǎng)景的復(fù)雜性，在B端系統(tǒng)中通常一個(gè)表格會(huì)涉及到大量復(fù)雜的操作，這就需要將多種樣式疊加應(yīng)用提高使用效率，防止用戶產(chǎn)生疑惑。此圖中用戶既會(huì)進(jìn)行單選或者批量選擇，也有可能會(huì)對(duì)數(shù)據(jù)進(jìn)行排序、篩選查看，對(duì)于專業(yè)術(shù)語(yǔ)或用戶不常見的名詞應(yīng)給予一定的幫助說(shuō)明。另外由于指標(biāo)列選項(xiàng)過(guò)多，屏幕無(wú)法展示完全，還需要將重要列凍結(jié)，其他列增加滑動(dòng)條來(lái)展示。

四、用于小計(jì)及總計(jì)的表格

小計(jì)行可能會(huì)出現(xiàn)一頁(yè)多行的情況，用特殊顏色隔開，方便用戶快速識(shí)別不同部分；總計(jì)行一般出現(xiàn)于頁(yè)面最末端，通常只有一行，文字加粗顯示。

五、行凍結(jié)、帶有角標(biāo)的可編輯表格

點(diǎn)擊帶有角標(biāo)的表格可直接進(jìn)行編輯更改數(shù)值；

整行凍結(jié)：當(dāng)用戶向上滾動(dòng)查看或者翻頁(yè)時(shí)，凍結(jié)的行依然懸浮顯示于頁(yè)面頂部。

六、主從型列表-可展開表格

表格默認(rèn)收起狀態(tài)，因?yàn)?B 端產(chǎn)品的業(yè)務(wù)數(shù)據(jù)量通常較大，默認(rèn)展開多個(gè)主從關(guān)系表格對(duì)服務(wù)器的性能損耗較大。因此設(shè)定只有當(dāng)用戶點(diǎn)擊下轉(zhuǎn)箭頭，此表格單獨(dú)展開。

七、雙排文字表格

適用于一屏以內(nèi)文字內(nèi)容較多且不需要完全展示時(shí)的解決方案。

我們都遇到過(guò)這樣頭痛的問(wèn)題，當(dāng)列表字段太多，一屏無(wú)法完全展示，這時(shí)應(yīng)該怎么做？當(dāng)用戶需要鼠標(biāo)頻繁去滑動(dòng)橫向滾動(dòng)條查看一屏以外的信息時(shí)，易導(dǎo)致操作成本和對(duì)屏幕展示信息的記憶成本提高，而產(chǎn)品的易用性降低。因此提供了除增加滾動(dòng)條外的另一條解決方案，使用雙排文字表格，可節(jié)省列表空間，部分內(nèi)容省略表示，鼠標(biāo)hover時(shí)展示全部?jī)?nèi)容。

總結(jié)：

1.關(guān)于對(duì)齊方式：隨著工作范圍的深入展開，發(fā)現(xiàn)之前做表格時(shí)對(duì)對(duì)齊方式并未做過(guò)多深入研究，導(dǎo)致不同項(xiàng)目的對(duì)齊方式并不一致，因此總結(jié)出一套方法：文本信息左對(duì)齊，因?yàn)楝F(xiàn)代人的閱讀方式習(xí)慣從左到右，符合正常的心智；數(shù)據(jù)信息右對(duì)齊，更加方便數(shù)字大小的直觀對(duì)比；內(nèi)容一樣居中對(duì)齊，視覺上更均衡；表頭與信息內(nèi)容對(duì)齊方式一致，給用戶視覺上的統(tǒng)一感，降低視覺噪音。

2.當(dāng)設(shè)計(jì)師把設(shè)計(jì)稿交給開發(fā)時(shí)，雖然已經(jīng)標(biāo)好注、切好圖同時(shí)也包括交互注釋，但是不代表開發(fā)能把界面表達(dá)的跟設(shè)計(jì)稿完全一樣，甚至?xí)泻艽笃?。我們?cè)谠O(shè)計(jì)的時(shí)候會(huì)考慮到字體大小、是否加粗、對(duì)齊方式等設(shè)計(jì)層級(jí)，但前端在開發(fā)時(shí)可能并不會(huì)注意到這些細(xì)節(jié)，因此需要保持與前端的良好溝通，包括出具走查文檔及當(dāng)面溝通，更能提高工作的質(zhì)量和效率。

3.由于B端系統(tǒng)的復(fù)雜性，常需要不同的表單樣式結(jié)合使用，因此還需設(shè)計(jì)時(shí)根據(jù)業(yè)務(wù)場(chǎng)景靈活運(yùn)用。

文章來(lái)源：站酷    作者：小魔女4376 

在日常的設(shè)計(jì)工作中，版式即一個(gè)畫面的骨架，也是視覺傳達(dá)的重要組成部分，版式整體的活躍程度也能起到改變畫面基調(diào)的作用，這也就是為什么很多作品看似很「簡(jiǎn)單」，但卻不失設(shè)計(jì)感的原因。如何把原本比較中規(guī)中矩的版式結(jié)構(gòu)通過(guò)設(shè)計(jì)手法將其差異化、提升設(shè)計(jì)感、增強(qiáng)活躍度，這樣做的目的是為了打破墨守成規(guī)的形式，提升用戶停留時(shí)間，以及畫面的趣味性，所以本期就和大家一起總結(jié)一些常用增強(qiáng)版式活躍度、提升版式設(shè)計(jì)感的設(shè)計(jì)手法。

色塊疊壓法

色塊疊壓法，顧名思義就是改變色塊的擺放方式，可以分為兩類，第一類是色塊與色塊之間的疊壓。通過(guò)色塊與色塊之間的非常規(guī)擺放形式，打破原本常規(guī)的版式結(jié)構(gòu)，增強(qiáng)其形式感、活躍度。下面我們舉個(gè)例子：

通過(guò)上下對(duì)比，我們不難發(fā)現(xiàn)，下側(cè)畫面整體版式結(jié)構(gòu)更跳躍，直白地說(shuō)就是不死板，而且形式感更強(qiáng)，給人的感覺也更舒服、有趣味性；而上側(cè)畫面的整體感受并不是說(shuō)不合理，只不過(guò)相對(duì)比而言，這種結(jié)構(gòu)形式很常見，版式結(jié)構(gòu)變化性不高，形式感和設(shè)計(jì)感也稍有欠缺，那么造成這種現(xiàn)象的原因是什么呢？

• 頂部 LOGO 區(qū)域因采用了色塊疊壓的手法且故意將 LOGO 處的色塊放大，使其超出導(dǎo)航欄的固定范圍，在視覺感受本身來(lái)說(shuō)就已經(jīng)形成了很強(qiáng)烈的形式感，打破了原本色塊區(qū)域分明的布局，因此，版式的跳躍性也更加強(qiáng)烈。
• 時(shí)間說(shuō)明區(qū)域?qū)⒃旧舷玛P(guān)系的色塊劃分通過(guò)疊壓的手法將其改變?yōu)榍昂箨P(guān)系，且合理將海報(bào)、時(shí)間說(shuō)明，以及下半部分三個(gè)不同模塊連接為一個(gè)整體，在提升版式活躍度的同時(shí)也增強(qiáng)了視覺的整體性。

色塊疊壓的形式在很多優(yōu)秀作品中也是很常見的，這種手法對(duì)于版式結(jié)構(gòu)的重組、改變也是最直觀的一種。比如：

通過(guò)色塊之間的相互疊壓，形成了打破常規(guī)的效果，使得頁(yè)面版式的跳躍性更強(qiáng)。

第二類是色塊與主體的疊壓方式，通過(guò)色塊與主體物或者產(chǎn)品之間的相互疊壓作用，營(yíng)造出非常規(guī)的設(shè)計(jì)形式，從而提升版式整體的靈活度以及設(shè)計(jì)感。舉個(gè)例子：

這里運(yùn)用的就是將主體物與色塊之間相互疊壓的手法，形成了一定的前后關(guān)系，而且這里主體處色塊最大作用還是打破常規(guī)的版面形式，目的是在視覺上給人以更加新穎、更具形式感的感受，且雖然做了結(jié)構(gòu)上的改變，但并沒(méi)有影響到主體信息的傳達(dá)。切記，不能一味地追求非常規(guī)而忽略了設(shè)計(jì)本質(zhì)問(wèn)題，一定要合理運(yùn)用。

局部放大法

當(dāng)作品版式不夠活躍的時(shí)候，我們可以嘗試刻意改變某處的局部信息，將其放大，提升視覺變化的對(duì)比性，因?yàn)榉糯蟮脑仄浔旧砭途哂泻軓?qiáng)烈的視覺沖擊力以及裝飾性，比如大號(hào)字體、數(shù)字、圖形等等，所以局部放大的手法在頁(yè)面版式設(shè)計(jì)中也是很常用的一種表達(dá)形式。比如：

將主體的某一處細(xì)節(jié)或者某一局部放大處理，與原本偏常規(guī)布局形成了鮮明的對(duì)比關(guān)系，對(duì)頁(yè)面整體而言也起到了很好的打破版式關(guān)系的作用。試想一下：當(dāng)用戶前面一直在瀏覽比較常規(guī)的布局結(jié)構(gòu)時(shí)，突然有 1-2 處這樣非常規(guī)的處理模塊，會(huì)很大程度上提升頁(yè)面對(duì)于用戶視覺的沖擊力，給用戶留下更深刻的印象，同時(shí)也使得作品整體的版面結(jié)構(gòu)更加富有跳躍性。

還有另外一種局部放大形式，即在放大的基礎(chǔ)上故意按照非常規(guī)的形式擺放，往往也能起到很好的打破版面布局的作用，只不過(guò)這種形式在使用時(shí)相對(duì)不好把握。比如：

類似案例中所展示的一樣，通過(guò)產(chǎn)品非常規(guī)的局部放大以及擺放形式，畫面給人的感受更加大氣，視覺沖擊力更強(qiáng)烈，同時(shí)版式的跳躍性也更強(qiáng)。只不過(guò)這種形式在運(yùn)用時(shí)要注意：頁(yè)面整體中最多出現(xiàn) 1-2 次即可，用于活躍版式、提升設(shè)計(jì)感，一旦出現(xiàn)次數(shù)過(guò)多，很容易形成雜亂的現(xiàn)象，之所以叫做非常規(guī)是因?yàn)橛谐Ｒ?guī)方式加以襯托、輔助，所以才會(huì)在視覺上形成反差。

使用非常規(guī)形狀

既然是為了提升版面的活躍度，那么版面中所有的元素都可以是嘗試改變的元素，比如常用到的按鈕，再或者線條等等。使用非常規(guī)的形狀、圖形也是方式之一，比如最簡(jiǎn)單的：

說(shuō)到矩形，很多人都會(huì)想到常規(guī)形式，而也有一部分設(shè)計(jì)師會(huì)聯(lián)想到非常規(guī)形式 1，少數(shù)人會(huì)想到 2 和 3 的形式，這四類并沒(méi)有設(shè)計(jì)上的好壞之分，而是當(dāng)我們習(xí)慣了常規(guī)形式的色塊之后，也可以嘗試一下其他形式，也是會(huì)有意想不到的效果。比如非常規(guī)形式 2 的運(yùn)用：

相比平時(shí)看到的矩形排列方式，這一作品則給人很新穎的感覺，原本平面的作品，因?yàn)樯珘K形狀的改變使得整體有了很強(qiáng)烈的縱深感，版面的跳躍性很強(qiáng)烈，這樣的版式還會(huì)有人說(shuō)死板、常規(guī)嗎？

非常規(guī)形狀 3 的使用可以參考下面這個(gè)案例：

在原本頁(yè)面中完全統(tǒng)一的形狀圖形中變換其中一處的形式，對(duì)于頁(yè)面整體跳躍性的提升還是一目了然的，原因在于：此處矩形的形態(tài)就屬于非常規(guī)類型，本身就具有一定的跳躍性、設(shè)計(jì)感，而用在此頁(yè)面中又與上下形成了一定的反差對(duì)比，所以使得版面整體更加活躍。

還有很多非常規(guī)的形狀，同樣也可以嘗試，比如：

想要版面看起來(lái)不古板，就要在頁(yè)面中的每一個(gè)視覺元素上找突破。版式聽起來(lái)好像一個(gè)很大的整體一樣，其實(shí)一樣可以拋開整體，把每一個(gè)局部作為突破點(diǎn)，尋找合適的視覺表達(dá)形式。當(dāng)某一種形式已經(jīng)讓大家所熟知甚至成為常識(shí)的時(shí)候，我們不妨稍作改變，在不影響辨識(shí)度以及視覺傳達(dá)的基礎(chǔ)上，做一些形式上的調(diào)整，往往可以給予版式更強(qiáng)烈的跳躍性以及設(shè)計(jì)感。

總結(jié)

版式就像配色一樣，很感性，沒(méi)有完全一成不變的理論。當(dāng)我們想要提升版面整體跳躍性的時(shí)候，我們不妨試試以上方法，也許小小的改變對(duì)于整體而言就是完全不同的兩種感受。當(dāng)然，也不能盲目地追求形式感、特殊性。要切記：特殊是通過(guò)對(duì)比體現(xiàn)出來(lái)的，沒(méi)有對(duì)比，就無(wú)法形成很好的視覺反差，同時(shí)也起不到應(yīng)有的作用。還是要提醒大家，一個(gè)整體非常規(guī)的手法用在 1-2 處即可，太多的話是很難把握的。

文章來(lái)源：優(yōu)設(shè)    作者：美工美邦

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

在以往的學(xué)習(xí)過(guò)程中，我發(fā)現(xiàn)市面上大部分文章對(duì)于 Web 端系統(tǒng)布局內(nèi)容講的比較籠統(tǒng)，一般提及較多的是網(wǎng)頁(yè)柵格相關(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)系等。我會(huì)從這些缺失出發(fā)，結(jié)合工作經(jīng)驗(yàn)與實(shí)際案例為大家進(jìn)行分享。

用戶在操作系統(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)說(shuō)過(guò)：「混沌是自然法則，秩序是人類的夢(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ì)過(guò)程的核心方法之一。最初是建立在格式塔原理的基礎(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)系而非具體元素，也就是說(shuō)知覺不是感覺元素的總和，而是一個(gè)統(tǒng)一的整體，部分之和不等于整體，因此整體不能分割」。格式塔理論中元素之知見的原則分別為臨近，相似，連續(xù)，封閉和連接。

在我們的現(xiàn)實(shí)生活中有很多自然規(guī)律都遵守了格式塔原則，比如說(shuō)每到秋天，北方的嚴(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ī)范，需要通過(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)境下能夠通過(guò)交互動(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ì)過(guò)程中，為了減少設(shè)計(jì)師們的日常溝通和理解成本，在設(shè)計(jì)內(nèi)部我們統(tǒng)一了一套設(shè)計(jì)畫板尺寸為 1280。經(jīng)過(guò)我們官方調(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è)面寬度都能保證沒(méi)有遮擋或擠壓?jiǎn)栴}，那么設(shè)計(jì)是合理的。在我們的規(guī)范中頁(yè)面再小于 1280 時(shí)需要吊起系統(tǒng)的橫向滾動(dòng)條。在中臺(tái)系統(tǒng)中考慮到用戶效率問(wèn)題很少做響應(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)知。之前我們有提到過(guò)視覺層次、格式塔理論和信息框架，設(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ǔ)充說(shuō)明等功能。如：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ǔ)充說(shuō)明。

網(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í)像素是與密度沒(méi)有關(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í)可以通過(guò)網(wǎng)格定制能夠使界面更加有序、整齊、規(guī)范，網(wǎng)格的主要用途之一是保持設(shè)計(jì)元素對(duì)齊和排序。通過(guò)建立一個(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。我們可以通過(guò)設(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ù)量最好不超過(guò) 3 個(gè)。經(jīng)過(guò)調(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á)極小超過(guò)極限值之后需要對(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)的問(wèn)題。使用此結(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ì)師可以通過(guò)整理基礎(chǔ)模塊然后分析其業(yè)務(wù)的信息框架，將模塊進(jìn)行相互組合、嵌套歸納可以總結(jié)出更多的 Web端布局框架并落地到業(yè)務(wù)中。

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

剛剛在定義布局模塊中已經(jīng)分析過(guò)了三大布局類型，接下要分享的是 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)講到過(guò)網(wǎng)格的內(nèi)容，主要目的正是為柵格做鋪墊。其中我把一個(gè)網(wǎng)格單元格設(shè)置為4（原因在網(wǎng)格中也解釋過(guò)，如果忘記的同學(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)過(guò)調(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ù)鼗虻煤?，但是同時(shí)在對(duì)美感的追求之上，還應(yīng)當(dāng)結(jié)合可用性來(lái)看待設(shè)計(jì)。在實(shí)際的工作中肯定還會(huì)遇到各種形形色色較奇葩的需求，所以希望這篇文章能夠做的不是限制而是啟發(fā)，大家可根據(jù)此次分享內(nèi)容能夠進(jìn)行舉一反三利用到實(shí)際的工作當(dāng)中。

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

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

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

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

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

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

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

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

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

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

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

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

下面嘗試用較易理解方式來(lái)解釋這些名詞：

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

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

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

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

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

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

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

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

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

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

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

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

如：

• 我對(duì)天貓精靈音箱說(shuō)「聲音太小了」，那我的意圖是什么？意圖是「將音量調(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)作。

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

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

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

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

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

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

如：

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

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

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

「上?！惯@個(gè)詞會(huì)被建立在一個(gè)城市實(shí)體詞庫(kù)中，這是「上?！鼓鼙蛔R(shí)別到是「城市」的原因。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其他：

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

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

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

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

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

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

B 端工作看起來(lái)總是沒(méi)有 C 端工作那么有趣，面臨的限制比較多，面對(duì)客戶（金主爸爸），很多時(shí)候總是左右為難。在實(shí)際工作中，面對(duì)這些情況該怎么辦？筆者根據(jù)自己的 B 端工作經(jīng)驗(yàn)，總結(jié)了一些交互設(shè)計(jì)的要點(diǎn)。

從事 B 端 SaaS 行業(yè)已經(jīng)兩年有余，從最開始面對(duì)需求的茫然無(wú)措，到現(xiàn)在已經(jīng)有了自己的一些基本方法論，這期間經(jīng)歷了從有人帶到自己摸索的一個(gè)階段。

每天看看文章、看看書，大家講的都是 C 端的產(chǎn)品，C 端的交互和體驗(yàn)；每天看同行們分析的不是如何提高用戶活躍量，就是 APP 的設(shè)計(jì)風(fēng)格。這在我一個(gè) B 端交互看來(lái)，無(wú)比羨慕啊。

C 端項(xiàng)目的設(shè)計(jì)師感覺每天和一線用戶打交道，忙得不亦樂(lè)乎，可以與用戶直接對(duì)接，可以添加有趣生動(dòng)的文案。

而對(duì)于一個(gè)做 SaaS 的 B 端來(lái)說(shuō)，Boss 常說(shuō)的話就是：

你這個(gè)顏色太鮮艷了。

我們是 B 端，你這種頁(yè)面布局不合適吧。

這個(gè)文案太幼稚了，不適合我們產(chǎn)品的調(diào)性。

中規(guī)中矩就好，不要太跳。

整理了一堆的字段，畫了無(wú)數(shù)的線框和流程圖，卻拿不出 C 端設(shè)計(jì)師才有的豐富多彩的作品集，

盡管如此，設(shè)計(jì)的原則是通用的，無(wú)論是尼爾森十大可用性原則，還是格式塔原理，在設(shè)計(jì)方案的落實(shí)上，都有著相同的方法論。

無(wú)意在此討論 B 端和 C 端之間的差異，僅以此文章來(lái)總結(jié)下我自己的一些工作經(jīng)驗(yàn)，如有錯(cuò)誤，敬請(qǐng)指出。

從業(yè)務(wù)需求的對(duì)接，到界面交互的細(xì)節(jié)，從功能的設(shè)計(jì)要點(diǎn)，再到產(chǎn)品的發(fā)展導(dǎo)向，我總結(jié)出了以下幾個(gè)方面，逐步展開：

• 提煉需求
• 減少出錯(cuò)
• 提率
• 提高通用性
• 中正原則

提煉需求

C 端設(shè)計(jì)師最開心的可能就是收到用戶的反饋需求了吧，這樣表示自己的產(chǎn)品還有人在用，然后建個(gè)群讓用戶開開心心吐槽，完了就從里面提煉適合產(chǎn)品的一些需求和建議。

而對(duì)于 B 端設(shè)計(jì)師來(lái)說(shuō)，如何處理需求是其成長(zhǎng)的第一關(guān)，尤其是 SaaS 行業(yè)，不會(huì)處理需求，產(chǎn)品的功能更新將會(huì)遇到極大的問(wèn)題。

B 端的用戶不像 C 端，雖然可以用用戶畫像來(lái)進(jìn)行歸類和分析。但是由于 B 端的直接用戶是付費(fèi)用戶，付了錢的就是大爺，因此大爺提的需求你敢不應(yīng)？

用戶提的需求亂七八糟，有些是體驗(yàn)問(wèn)題，有些是功能問(wèn)題，有些就是屬于比較極端的需求。那種傳說(shuō)中甲方要你做一個(gè)可以根據(jù)手機(jī)屏顯示顏色而改變手機(jī)殼顏色的需求，在 B 端行業(yè)也是存在的。

那么問(wèn)題來(lái)了，我們?cè)撊绾翁幚砑姺彪s亂的需求呢，我從收集需求-評(píng)估需求-需求落地挨個(gè)講起：

1. 收集需求

如果你也打算像 C 端產(chǎn)品體驗(yàn)群那樣建立一個(gè)群，完了將自己的用戶聚集在那里，靜靜等待需求的話，我勸你三思而后行。你可以這么做，但是應(yīng)該明確群的目標(biāo)，可以收集需求，可以是 bug 反饋群，也可以是更新通知群；但是不要將其變成一個(gè)純粹的用戶反饋群，因?yàn)檫@會(huì)導(dǎo)致用戶的吐槽聲音過(guò)大，而讓潛在的用戶流失。

B 端的客戶一旦使用你們的系統(tǒng)，就要付出相應(yīng)的金錢和時(shí)間代價(jià)，不是說(shuō)想換一家就能換。因此他對(duì)于已經(jīng)使用中的用戶反饋是極其看重的，B 端的產(chǎn)品很大程度是靠著同行間的口碑傳播從而取得了良好的效益。如果一個(gè)新用戶想進(jìn)群了解，結(jié)果一進(jìn)去就發(fā)現(xiàn)大家都在吐槽這個(gè)系統(tǒng)的不足之處，那么可想而知他的選擇是什么。

因此，最好的需求收集方式是通過(guò)運(yùn)營(yíng)、市場(chǎng)以及客服的同事們的反饋，因?yàn)樗麄兪请x客戶最近的人，他們每天都跟客戶打交道，了解這個(gè)行業(yè)從業(yè)者的一些基本情況。很多時(shí)候，客戶回訪和運(yùn)營(yíng)對(duì)接的時(shí)候用戶會(huì)提出一些功能的建議。

通常的一種情況是，在 SaaS 行業(yè)，你的一個(gè)客戶的流失意味著你的競(jìng)爭(zhēng)對(duì)手多一個(gè)客戶。因此一般市場(chǎng)都會(huì)有競(jìng)爭(zhēng)對(duì)手的信息，他們會(huì)知曉客戶從我們平臺(tái)流失到其他平臺(tái)的一些原因。最重要的是，他們也為你提供了絕佳的競(jìng)品資料，進(jìn)而可以進(jìn)一步明確需求。

收集好的需求，該怎么處理呢？

工具之前我用的是 trello，很好用，你可以將需求按照類型分為不同的看板，規(guī)劃產(chǎn)品的進(jìn)度。

之后由于團(tuán)隊(duì)的原因，改用 teambition，功能要豐富點(diǎn)，可以寫測(cè)試案例等，對(duì)于國(guó)內(nèi)用戶比較友好；可以按照 KANO 模型將需求劃分為不同的類型，用以安排產(chǎn)品。

KANO模型

基本（必備）型需求——Must-beQuality/ Basic Quality

一個(gè)產(chǎn)品應(yīng)該具有的基本功能，能滿足用戶的基本需求，比如，微信的基本功能是即時(shí)通訊。

用戶不會(huì)因?yàn)樵摴δ艿某霈F(xiàn)而覺得滿意，因?yàn)檫@是基本的、必備的一項(xiàng)功能。如果連這個(gè)都沒(méi)法滿足，用戶滿意度會(huì)大幅下降。

期望（意愿）型需求——One-dimensional Quality/ Performance Quality

用戶迫切希望產(chǎn)品能提供的功能，當(dāng)提供該需求時(shí)，用戶滿意度會(huì)大幅上升，當(dāng)不提供該需求時(shí)，用戶滿意度會(huì)下降。

比如百度網(wǎng)盤一直為人詬病的下載限速，無(wú)法對(duì)單次下載而付費(fèi)。而需要開通會(huì)員，用戶的抱怨恰好說(shuō)明了其痛點(diǎn)；當(dāng)提供單次下載付費(fèi)的服務(wù)時(shí)，用戶滿意度明顯提升。

興奮（魅力）型需求—Attractive Quality/ Excitement Quality

用戶對(duì)該類型的需求并無(wú)明顯的期望，但是若產(chǎn)品能夠提供該類需求，用戶滿意度會(huì)極大提升，也會(huì)培養(yǎng)用戶的忠誠(chéng)度。

比如，很多產(chǎn)品都有實(shí)驗(yàn)室功能，即對(duì)那些不是必備需求的功能設(shè)計(jì)一個(gè)開關(guān)，用戶打開后可以進(jìn)行使用。對(duì)于有的用戶來(lái)講，這些功能很大程度上會(huì)帶來(lái)驚喜。當(dāng)然，每個(gè)人期望不一樣，實(shí)驗(yàn)室方案也可以視為另類的灰度測(cè)試，用以驗(yàn)證用戶對(duì)于功能的需求。

無(wú)差異型需求——Indifferent Quality/Neutral Quality

產(chǎn)品無(wú)論是否滿足該類需求，用戶的滿意度是不會(huì)變化的，正如用戶不會(huì)因?yàn)槭盏健脯斏?元代金券」而感到開心。因此在 B 端行業(yè)，開發(fā)時(shí)間有限的情況下，無(wú)需為該類需求投入資源。

比如優(yōu)化一個(gè)用戶訪問(wèn)量很少的網(wǎng)頁(yè)，也無(wú)需因?yàn)轭I(lǐng)導(dǎo)或者客戶的個(gè)人喜好而改變后臺(tái)頁(yè)面的顏色。無(wú)論使其鮮艷活潑還是穩(wěn)重大氣，后臺(tái)滿足基本的視覺要求和規(guī)范即可。當(dāng)然，這并不意味著你可以把后臺(tái)設(shè)計(jì)的簡(jiǎn)陋和雜亂。

反向（逆向）型需求——Reverse Quality

當(dāng)提供方向性需求的功能時(shí)，會(huì)招致大部分用戶滿意度的大幅下降。比如常見的在搜索中摻加廣告、強(qiáng)制用戶授權(quán)過(guò)多個(gè)人信息以及推送大量無(wú)用的消息等，會(huì)導(dǎo)致用戶的反感。

2. 評(píng)估需求

通常需求的收集不是你一個(gè)人在進(jìn)行，產(chǎn)品經(jīng)理、老板以及其他同事也會(huì)幫助你收集，匯總到你這里的需求會(huì)開會(huì)進(jìn)行討論，下一步要做什么。

做之前首先要對(duì)需求進(jìn)行評(píng)估，評(píng)估的原則基本是按照 KANO 模型來(lái)，但是也會(huì)有比較特殊的情況。

交互設(shè)計(jì)師需要注意的是，你除了需要關(guān)注用戶體驗(yàn)的問(wèn)題以外，還要與開發(fā)一起評(píng)估該需求的實(shí)現(xiàn)；你不懂技術(shù)沒(méi)關(guān)系，開發(fā)會(huì)告訴你該需求的落地會(huì)出現(xiàn)什么問(wèn)題，在實(shí)現(xiàn)上會(huì)有什么難度。這些在評(píng)估需求的階段都要提出來(lái)，并且在交互層面解決掉，否則你畫出了原型以后，開發(fā)告訴你這個(gè)頁(yè)面必須要修改，否則開發(fā)成本過(guò)大，無(wú)法在排期內(nèi)完成，這個(gè)時(shí)候你再去改交互稿將會(huì)費(fèi)時(shí)費(fèi)力。

評(píng)估完需求，定好下期開發(fā)的需求后就結(jié)束了么？

其實(shí)并沒(méi)有，因?yàn)樾枨笫占豢赡苁且粋€(gè)固定的階段，它是漸進(jìn)的、不確定的。因此收集需求和評(píng)估需求會(huì)不斷在實(shí)際工作中疊加和重復(fù)，比如你制定好了需求優(yōu)先級(jí)，已經(jīng)著手開發(fā)了；這時(shí)候老板或者領(lǐng)導(dǎo)突然又增加了一個(gè)優(yōu)先級(jí)很高的需求，所以你得重新安排這些需求。如何在敏捷開發(fā)中保質(zhì)保量的完成工作任務(wù)，這是一場(chǎng)斗智斗勇的 battle。

3. 需求落地

前面講到需求評(píng)估的時(shí)候，需要與開發(fā)人員一起評(píng)估技術(shù)難度。其實(shí)在你將需求落地為交互原型的時(shí)候，也需要持續(xù)溝通，這完全是為了避免因?yàn)榧夹g(shù)問(wèn)題而產(chǎn)生修改設(shè)計(jì)稿或溝通不順暢的問(wèn)題。

如果你是在做的過(guò)程中，持續(xù)與開發(fā)人員保持溝通，能了解到他們是如何實(shí)現(xiàn)這個(gè)功能的。當(dāng)然，有些基本的設(shè)計(jì)原則所不允許的事完全不用屈服于他們的「淫威」，畢竟他們得按照你的方案來(lái)。如果開發(fā)懶惰而想通過(guò)最簡(jiǎn)單的辦法來(lái)實(shí)現(xiàn)，用戶體驗(yàn)又是極其不友好，那么請(qǐng)直接對(duì)其說(shuō)「NO」。

比如常見的刪除的二次確認(rèn)等彈窗，一般最好的體驗(yàn)是在按鈕旁邊彈出；但有些開發(fā)懶得寫彈窗，直接調(diào)用瀏覽器的彈窗，即瀏覽器頂部經(jīng)常出現(xiàn)的那種確認(rèn)彈窗，這個(gè)時(shí)候你要堅(jiān)決告訴開發(fā)，這樣搞是堅(jiān)決不行的。

需求的落地伴隨著競(jìng)品分析，判斷一個(gè)需求是否靠譜、落地方案是否成熟的一個(gè)重要途徑就是競(jìng)品分析，可以通過(guò)調(diào)查研究相關(guān)競(jìng)品是如何進(jìn)行設(shè)計(jì)的。這對(duì)于我們有著非常大的幫助，可以避免很多的彎路，甚至能避免犯錯(cuò)，提高交互方案的可靠性。競(jìng)品分析又是個(gè)比較繁雜的事項(xiàng)，如果是有特殊要求可以做成報(bào)告的形式，如果僅是去參考對(duì)照的話只需要去體驗(yàn)競(jìng)品即可。

減少出錯(cuò)

B 端的業(yè)務(wù)比較重要，尤其是涉及到數(shù)據(jù)的增刪改查和金額的計(jì)算，一旦出錯(cuò)，將會(huì)導(dǎo)致無(wú)法挽回的后果。因此在出錯(cuò)前和出錯(cuò)后，應(yīng)該有相應(yīng)的挽回機(jī)制。

1. 出錯(cuò)前

內(nèi)容編輯類的功能應(yīng)該提供自動(dòng)保存草稿功能，防止沒(méi)有及時(shí)保存而丟失內(nèi)容；刪除、禁止等較重操作應(yīng)該有二次確認(rèn)，防止用戶誤刪。

對(duì)于操作流程應(yīng)該建立明確的引導(dǎo)機(jī)制，長(zhǎng)表單可以分開按步驟填寫。

提示信息應(yīng)該明確而及時(shí)。比如一個(gè)表單需要登錄才能填寫，在未登錄的狀態(tài)下，應(yīng)該先提示其登錄再填寫否則用戶在填寫大量信息后，因?yàn)橐粋€(gè)錯(cuò)誤而前功盡棄。

系統(tǒng)內(nèi)的禁止信息、警告信息、提示信息建立一套相應(yīng)的規(guī)則。

2. 出錯(cuò)后

• 應(yīng)該建立回收站機(jī)制，刪除后可以找回；
• 可對(duì)用戶操作進(jìn)行建立回撤機(jī)制，用戶如果操作失誤，可及時(shí)回撤；
• 對(duì)系統(tǒng)的操作進(jìn)行記錄，明確到時(shí)間、客戶端、操作者信息、操作內(nèi)容、操作的類型（增刪改）等。

提率

用戶的時(shí)間就是金錢，這對(duì)于 B 端商家角色中尤為重要，大量訂單的處理、表格化的導(dǎo)入和導(dǎo)出、批量管理和網(wǎng)站運(yùn)營(yíng)等方面，對(duì)于效率有著極高的要求，商家通過(guò)可視化界面來(lái)完成某項(xiàng)任務(wù)。

在這其中，影響最大的莫過(guò)于交互方式了，相信各位一定用過(guò)各大銀行的網(wǎng)站，頁(yè)面的導(dǎo)航關(guān)聯(lián)性弱、結(jié)構(gòu)不合理、提示不明確、交互流程過(guò)長(zhǎng)，甚至有的網(wǎng)站光是登錄，就得大費(fèi)周章。

如何提率，我認(rèn)為主要從以下幾個(gè)方面著手：

1. 提高易用性

如果你的產(chǎn)品，讓人看一眼就能上手，那么說(shuō)明是非常友好的設(shè)計(jì)。易用性不一定意味著簡(jiǎn)單和低智，依據(jù)復(fù)雜守恒定理（泰勒斯定理），每個(gè)應(yīng)用程序都有自己內(nèi)在的、無(wú)法簡(jiǎn)化的復(fù)雜度。

所以，提高易用性意味著要設(shè)計(jì)合理的交互，易用性分為對(duì)新手（小白用戶）友好和對(duì)老用戶（專家用戶）友好，包括數(shù)量最大的中間用戶。

如果你的界面是僅僅對(duì)于新手友好，那么可能完成的任務(wù)都是簡(jiǎn)單而輕松的。但是對(duì)于老用戶，他需要更復(fù)雜的功能來(lái)處理大量龐雜的任務(wù)；因此在設(shè)計(jì)的時(shí)候，既要提供傻瓜式的操作方式，也要對(duì)專家用戶提供提率的工具。

2. 智能化

此處的智能化既包括通過(guò)大數(shù)據(jù)或者人工智能自動(dòng)將操作步驟變得簡(jiǎn)潔，也包括諸如一些字段輸入、自動(dòng)定位、圖片識(shí)別、OCR 等方式來(lái)使用戶的效率得以提升的功能。

以前的用戶要摳圖可能會(huì)在 ps 中操作好幾個(gè)步驟才能完成，但是隨著機(jī)器學(xué)習(xí)技術(shù)的發(fā)展，ps 已經(jīng)可以更加智能的摳圖。當(dāng)然，還包括其他功能的智能化。

在 B 端 SaaS 領(lǐng)域，智能化也是一個(gè)重要的趨勢(shì)，針對(duì)不同的商家所面臨的不同的行業(yè)領(lǐng)域，我們或許可以提供更加全面且友好的服務(wù)。

3. 場(chǎng)景化思維

如果你深入了解你的用戶，去觀察他們整個(gè)行業(yè)的運(yùn)作模式，以及他們對(duì)于業(yè)務(wù)的處理方式，你就會(huì)明白你的產(chǎn)品的走向。

你需要深入每一個(gè)場(chǎng)景，比如，在戶外旅游領(lǐng)域，發(fā)布旅游產(chǎn)品線路的可能是在辦公室中的編輯人員，帶隊(duì)出行的是在戶外場(chǎng)景中的導(dǎo)游，現(xiàn)場(chǎng)簽到的可能是集合點(diǎn)的管理人員，而處理訂單的又是另一個(gè)坐在辦公室里的小伙伴。

他們需要協(xié)同工作，才能使各項(xiàng)工作順利展開，發(fā)布活動(dòng)-用戶報(bào)名-訂單管理-報(bào)名人統(tǒng)計(jì)-活動(dòng)成行-集合點(diǎn)簽到-帶隊(duì)出發(fā)-旅游結(jié)束-活動(dòng)評(píng)價(jià)-領(lǐng)隊(duì)評(píng)價(jià)-交易成功，這一系列流程中，面臨的角色是復(fù)雜的，而意外也是常有的事。比如報(bào)名人無(wú)法參加活動(dòng)而導(dǎo)致的退款、活動(dòng)因?yàn)樘鞖庠蚨鵁o(wú)法成行、戶外活動(dòng)發(fā)生意外等。

你需要做的就是：

• 站在辦公室編輯人員的角度上，你需要為他提供兼容性很高的編輯器和快捷方便的發(fā)布流程，比如在系統(tǒng)內(nèi)接入微信公眾號(hào)的管理，可以將系統(tǒng)內(nèi)的文章一鍵發(fā)布到微信公眾號(hào)上，也可以通過(guò)系統(tǒng)推送產(chǎn)品信息。你需要為其設(shè)計(jì)友好的相冊(cè)和視頻管理工具以宣傳旅游產(chǎn)品；
• 站在導(dǎo)游和管理人員的角度上，你需要為其設(shè)計(jì)在戶外場(chǎng)景（移動(dòng)場(chǎng)景）下也能使用的簽到工具、臨時(shí)退款工具、活動(dòng)消息通知工具等；
• 站在訂單管理員的角度上，你需要為其設(shè)計(jì)規(guī)范的導(dǎo)出表格格式，也需要為其設(shè)計(jì)修改報(bào)名人和訂單信息的功能，有必要時(shí)，你還需要為其設(shè)計(jì)單獨(dú)的報(bào)名渠道和特殊的付款方式（線下付款）。

場(chǎng)景化的思維會(huì)讓你設(shè)身處地為一線操作用戶的體驗(yàn)而努力。因此，交互稿完成以后，徹底回退到小白用戶的身份，假裝自己是在某個(gè)場(chǎng)景下要做某件事，通過(guò)你的交互方案，能否順利完成自己的目標(biāo)。

提高通用性

此處的通用性是指，在 SaaS 軟件領(lǐng)域，不同客戶所面臨的行業(yè)有一定的差別，可能這個(gè)功能對(duì)于 A 用戶極其重要，但對(duì)于 B 用戶，該功能并不重要。比如有的客戶想要在前臺(tái)展示某活動(dòng)的報(bào)名人的姓名以增加真實(shí)性，用以吸引用戶參加；但是有的客戶就明確反對(duì)該功能，認(rèn)為這個(gè)功能侵犯了用戶的隱私。

諸如此類的需求相離、甚至相反的情況太普遍了。合適的解決方式是建立兩套開關(guān)，一套是由 SaaS 服務(wù)提供商的統(tǒng)一后臺(tái)來(lái)配置，用以區(qū)分比較大的行業(yè)差別，比如電商領(lǐng)域中，可以配置店鋪類型為：美妝、服飾、食品、電子產(chǎn)品等；另一套開關(guān)在客戶的站點(diǎn)后臺(tái)，用以控制不同的站之間的差別，比如前臺(tái)界面樣式、交易流程、相關(guān)字段或菜單的前臺(tái)顯示等。

另外比較重要的一點(diǎn)，也是最基本的一點(diǎn)，軟件設(shè)計(jì)中存在一個(gè)原則就是高內(nèi)聚低耦合，模塊化設(shè)計(jì)，用以提高系統(tǒng)內(nèi)部組件的復(fù)用。

交互設(shè)計(jì)也是同樣的道理，可以將你的商品視為一個(gè)模塊，那么這個(gè)模塊無(wú)論是添加到網(wǎng)站，還是小程序，我只需要?jiǎng)?chuàng)建一個(gè)商品即可，可以同步更新到不同的平臺(tái)。

另外，訂單的管理只需要添加相關(guān)的標(biāo)記即可（比如來(lái)自小程序的訂單標(biāo)記為小程序，淘寶訂單標(biāo)記為淘寶等），一個(gè)平臺(tái)發(fā)布，多個(gè)平臺(tái)同步，有效提高了運(yùn)營(yíng)人員的效率。

同樣的，如果你的 pc 端產(chǎn)品和移動(dòng)端產(chǎn)品沒(méi)有實(shí)質(zhì)性的運(yùn)營(yíng)差異（即當(dāng)成兩種模式來(lái)運(yùn)營(yíng)），那么很多數(shù)據(jù)（如文案、圖片、banner等）的獲取可以采用同一個(gè)數(shù)據(jù)源 。

最后，提高系統(tǒng)內(nèi)的一致性，減少用戶認(rèn)知成本。在同一平臺(tái)內(nèi)的頁(yè)面，樣式和交互上要盡量保持一致性，不要有的地方是總金額，有的地方是總價(jià)格，這會(huì)讓用戶犯迷糊。提高通用性，也意味著你需要關(guān)注并熟悉系統(tǒng)內(nèi)不同功能之間的關(guān)聯(lián)性，盡量做到統(tǒng)一處理。

中正原則

在進(jìn)行商業(yè)化運(yùn)作和產(chǎn)品功能的優(yōu)化時(shí)，對(duì)于正向的用戶需要激勵(lì)，對(duì)于負(fù)向的用戶需要限制。

這是我在讀完有贊的白鴉寫的關(guān)于有贊產(chǎn)品設(shè)計(jì)原則的文章后，影響最深的一個(gè)原則，他寫到：

我們的使命是幫助每一位重視產(chǎn)品和服務(wù)的商家成功?！该恳晃弧购汀干碳页晒Α故俏覀冏钪匾年P(guān)鍵詞，我們要服務(wù)的是每一位商家，然后幫助每一位商家成功，但是為了整個(gè)生態(tài)的健康，那些不重視產(chǎn)品和服務(wù)的商家，我們是（可以）不服務(wù)的。所以我們?cè)诋a(chǎn)品設(shè)計(jì)原則上，在產(chǎn)品做一些功能的選擇上，如果這個(gè)功能做完了會(huì)導(dǎo)致商家不重視產(chǎn)品和服務(wù)，我們是不會(huì)/能做的。

舉個(gè)例子：消費(fèi)者購(gòu)買之后（可以）有一個(gè)評(píng)價(jià)，我們的購(gòu)物評(píng)價(jià)是要么開啟要么不開啟這個(gè)功能。我們不接受商家去刪購(gòu)物評(píng)價(jià)，因?yàn)樯碳乙坏┛梢詣h了消費(fèi)者的差評(píng)，他就（很可能）不會(huì)那么重視產(chǎn)品和服務(wù)了。所以有贊永遠(yuǎn)不會(huì)提供刪除商品評(píng)價(jià)的功能，商家要么就不開啟?？梢圆挥?，如果要用就要接受有人說(shuō)你不好，商家可以去跟消費(fèi)者溝通，溝通完了消費(fèi)者自己改，但是我們不提供讓商家刪壞評(píng)價(jià)的功能。所以，這就是最基本的有贊產(chǎn)品設(shè)計(jì)原則，我們只服務(wù)重視產(chǎn)品和服務(wù)的商家，我們所有的產(chǎn)品設(shè)計(jì)原則都是需要這樣。

——《白鴉內(nèi)部培訓(xùn)：企業(yè)服務(wù)類產(chǎn)品的底層邏輯和有贊產(chǎn)品設(shè)計(jì)原則》

更多內(nèi)容請(qǐng)看：

我將其概括為一個(gè)產(chǎn)品的中正原則，即中立且保持正向原則。

一方面，對(duì)于企業(yè)未來(lái)的發(fā)展而言，正向的用戶能帶給平臺(tái)無(wú)盡的潛力，平臺(tái)可以和商家一起成長(zhǎng)，而負(fù)向的用戶，則會(huì)給平臺(tái)帶來(lái)隱患。比如，淘寶既限制商家的違規(guī)運(yùn)營(yíng)和欺詐客戶，也限制 C 端用戶的惡意薅羊毛，在商家和用戶之間做一個(gè)中立者和調(diào)節(jié)者的角色。

我在做需求的時(shí)候，也遇到過(guò)很多的負(fù)向需求，這在商家看來(lái)是一個(gè)必須的功能，作為平臺(tái)應(yīng)該提供。但是若是提供給商家，則會(huì)對(duì)消費(fèi)者的利益造成損害，刪除差評(píng)就是一個(gè)很好的例子。

看了白鴉對(duì)于有贊產(chǎn)品原則的闡釋，我覺得每一個(gè)平臺(tái)類的產(chǎn)品，都應(yīng)該保持自己的中正原則：

• 擁有數(shù)據(jù)的公司不要倒賣用戶的數(shù)據(jù)；
• 搜索公司不應(yīng)該干擾搜索結(jié)果的公正性；
• 通訊公司應(yīng)該尊重用戶的隱私；
• 平臺(tái)公司應(yīng)該在商家和消費(fèi)者之間做一個(gè)良好的服務(wù)者和調(diào)節(jié)者的中間角色。

在 B 端行業(yè)，口碑傳播是非常重要的一種被動(dòng)營(yíng)銷方式，很多 B 端公司都是低調(diào)的潛行者，堅(jiān)持中正原則，并不會(huì)損害自己的利益，反而會(huì)獲得商家的尊重和消費(fèi)者的信賴。

總結(jié)

啰啰嗦嗦說(shuō)了這么多，比較細(xì)碎，不乏邏輯凌亂的片段，但也算是對(duì)自己兩年以來(lái)對(duì)于 B 端交互的一些心得吧。

其實(shí)交互的原則基本都是通用的，無(wú)非就是根據(jù)平臺(tái)屬性做一定的調(diào)整，不同的是產(chǎn)品所處的行業(yè)，每一個(gè)產(chǎn)品都無(wú)法脫離其所處的行業(yè)而存在，這也是使用產(chǎn)品的具體場(chǎng)景。

因此做一個(gè)產(chǎn)品前，一定要了解行業(yè)，去熟悉行業(yè)的通用做法，了解行業(yè)的專業(yè)術(shù)語(yǔ)和規(guī)范，研究行業(yè)的所屬群體等，這樣你就會(huì)做出真正適合市場(chǎng)且能讓大多數(shù)用戶滿意的產(chǎn)品。

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