在B端產(chǎn)品中，信息設(shè)計(jì)的合理程度很大程度上決定了用戶在操作、使用過程中的難易程度，也影響到后續(xù)的用戶留存。那么作為設(shè)計(jì)人員，你要如何搭建好B端產(chǎn)品的信息設(shè)計(jì)策略？本篇文章里，作者針對(duì)信息設(shè)計(jì)做了經(jīng)驗(yàn)分享，一起來看一下。

你有沒有遇到在梳理B端產(chǎn)品界面信息的時(shí)候，不知道該如何開始？

在梳理到一半的時(shí)候，覺得前面整理得不對(duì)，想從頭開始？

不知道怎么把這一堆信息進(jìn)行比較好的排版？

到底是用分割線還是留白來分隔？

用卡片還是色塊分組？

我曾經(jīng)都有過，尋找了很多方法，期望盡可能整理出相對(duì)好用，又不反復(fù)修改的信息設(shè)計(jì)方法論。如果你剛好也有這部分疑問，這篇文章適合你繼續(xù)閱讀。

本篇文章會(huì)提供一種解決排列問題的簡(jiǎn)單底層邏輯，我們可以圍繞這個(gè)邏輯去排布我們的頁(yè)面，從而讓整體排版變得更加清晰合理。

一、信息設(shè)計(jì)

在日常生活中，說明書、指路牌、做ppt、設(shè)計(jì)網(wǎng)站、繪制海報(bào)中等都需要信息設(shè)計(jì)?？梢哉f，信息設(shè)計(jì)已經(jīng)滲透到了人們生活的方方面面，信息設(shè)計(jì)存在于我們目前看到的每一個(gè)畫面。

對(duì)于B端產(chǎn)品來說，信息設(shè)計(jì)的好壞，一方面決定了用戶在使用產(chǎn)品中的難易程度；另一方面也影響著后續(xù)當(dāng)產(chǎn)品功能添加時(shí)，產(chǎn)品的延展性如何。

1. 什么是信息設(shè)計(jì)？

信息設(shè)計(jì)是我一直較為關(guān)注的設(shè)計(jì)領(lǐng)域，從早期設(shè)計(jì)感性的純粹視覺思考，到現(xiàn)在越來越趨向于邏輯理性化的設(shè)計(jì)思維，這是一種設(shè)計(jì)提升的思維模式。

從古至今，設(shè)計(jì)師們主要關(guān)注的一直都是將信息如何視覺化的呈現(xiàn)，信息設(shè)計(jì)是人們對(duì)信息數(shù)據(jù)進(jìn)行視圖化處理的方式和實(shí)踐，通過信息設(shè)計(jì)可以提高人們應(yīng)用信息的性能，在眾多信息中能夠迅速找到自己所需要的，并且使得信息能被有效地理解。

——百科

2. 信息設(shè)計(jì)來源

在二十世紀(jì)七十年代，英國(guó)倫敦的平面設(shè)計(jì)師特格拉姆第一次使用了“信息設(shè)計(jì)”這一術(shù)語。

當(dāng)時(shí)使用該術(shù)語的目的僅為區(qū)別于傳統(tǒng)的平面設(shè)計(jì)以及產(chǎn)品設(shè)計(jì)等平行設(shè)計(jì)專業(yè)。從那時(shí)起，信息設(shè)計(jì)就真正地從平面設(shè)計(jì)中脫離出來，廣泛應(yīng)用在其他領(lǐng)域。

信息設(shè)計(jì)的主旨是什么？

是進(jìn)行有效能的信息傳遞”，與提倡“精美的藝術(shù)表現(xiàn)”的平面設(shè)計(jì)確立了不同的發(fā)展方向。

通過對(duì)信息圖表設(shè)計(jì)的基礎(chǔ)認(rèn)識(shí),從信息的收集篩選、應(yīng)用情景構(gòu)思方式、視覺表現(xiàn)到信息圖表的設(shè)計(jì)模式、制作流程等方法，設(shè)計(jì)出符合閱讀順序，使觀眾清晰有效閱讀的設(shè)計(jì)方案。這種準(zhǔn)確、形象、快捷的傳達(dá)方式已經(jīng)顯示出信息設(shè)計(jì)方法獨(dú)特的優(yōu)勢(shì)。

3. 信息設(shè)計(jì)的意義

信息層級(jí)的排列不僅影響視覺上的美觀度，更影響人們?cè)跈z索信息時(shí)候的效率。尤其是對(duì)于B端復(fù)雜場(chǎng)景，我們不僅需要考慮清晰的傳遞業(yè)務(wù)價(jià)值，合理的信息層級(jí)劃分也是提高產(chǎn)品體驗(yàn)的重要部分，好的信息層級(jí)則意味著更好的使用體驗(yàn)。

二、信息設(shè)計(jì)的基本思路

1. 用戶如何獲取信息？

試想一下，如果我們想要買一個(gè)手機(jī)，那么我們會(huì)如何買到手機(jī)呢？

首先，我們會(huì)收集相關(guān)手機(jī)的信息，例如，先上網(wǎng)搜索最新的手機(jī)信息（向朋友詢問或者平時(shí)就有想好的品牌機(jī)型），然后我們的大腦會(huì)把這些信組合起來，得出買什么品牌什么型號(hào)的判斷。最后，我們?cè)谝欢研畔⒅?，提取出有效信息，進(jìn)而指導(dǎo)自己的下一步行動(dòng)。

由此可見，我們獲取信息的步驟：

因此，我們?cè)谛畔⒃O(shè)計(jì)時(shí)可以借鑒以下基本思路。

1）根據(jù)自己的經(jīng)驗(yàn)與用戶需求收集盡可能全面的信息。

2）分析信息池中哪部分信息是用戶最關(guān)注的。

但是，當(dāng)產(chǎn)品的目標(biāo)用戶不止一類時(shí)，我們就需要考慮多方案滿足不同的用戶對(duì)信息的需求。例如，在電商平臺(tái)搜索商品，我們既可以通過店鋪搜索或商品搜索，也可以通過天貓?zhí)峁┑纳唐纺夸洏渲苯硬檎摇?/p>

3）思考如何信息呈現(xiàn)，設(shè)計(jì)師更是需要思考如何呈現(xiàn)信息才能讓用戶更容易接受和理解，只有會(huì)組織信息，才可能打造一款用戶喜愛的產(chǎn)品。

2. 如何分析判斷用戶行為？

檢測(cè)頁(yè)面的設(shè)計(jì)是否有效，需要我們對(duì)用戶的行為做分析。我們可以將用戶瀏覽頁(yè)面的行為也分為三個(gè)層次：

1. 核心行為層：是指用戶首先關(guān)注這個(gè)頁(yè)面核心重點(diǎn)，觸發(fā)到的用戶首要、核心行為，對(duì)應(yīng)信息分層的重點(diǎn)核心層。
2. 了解行為層：是指用戶產(chǎn)生了解的意愿，繼續(xù)了解內(nèi)容的行為，對(duì)應(yīng)信息分層的次要輔助層。
3. 查看更多行為層：是指用戶接收到信息后尋求更多信息的行為，如行動(dòng)按鈕、文字鏈接等交互行為，對(duì)應(yīng)信息分層的詳細(xì)信息層。

所以，如果頁(yè)面設(shè)計(jì)質(zhì)量高、信息層級(jí)傳達(dá)得準(zhǔn)確，那么用戶的行為層次應(yīng)該會(huì)恰好和頁(yè)面的信息層次相對(duì)應(yīng)，這也是我們進(jìn)行頁(yè)面設(shè)計(jì)質(zhì)量檢測(cè)的標(biāo)準(zhǔn)之一。

三、如何做好信息設(shè)計(jì)

既然信息層級(jí)設(shè)計(jì)對(duì)于使用體驗(yàn)比較關(guān)鍵，那么怎樣做好頁(yè)面的信息層級(jí)設(shè)計(jì)則顯得尤為重要。

我發(fā)現(xiàn)網(wǎng)上的資料也是參差不齊，查閱到的資料幾乎都在講排版設(shè)計(jì)的四個(gè)基本設(shè)計(jì)原則：親密、對(duì)齊、對(duì)比、重復(fù)。

這四個(gè)方法雖然有用，但在面對(duì)復(fù)雜層級(jí)排版時(shí)仍會(huì)面對(duì)困惑。因此我對(duì)頁(yè)面排版進(jìn)行了進(jìn)一步的探索及思考，今天我們來說說除去上面四大設(shè)計(jì)原則以外的方法：

1. 信息設(shè)計(jì)的前置處理

平時(shí)我們很容易被忽略的一點(diǎn)，就是信息的前置處理。我也曾遇到過某些信息很復(fù)雜導(dǎo)致排版很困難，來來回回多次修改設(shè)計(jì)總是不滿意，但卻忽略了這些信息是否真實(shí)地被需要。

信息前置處理本質(zhì)就是判斷我們當(dāng)前所要呈現(xiàn)的信息是不是必要的。這也是日常工作中經(jīng)常遇到的場(chǎng)景，比如有時(shí)候產(chǎn)品給到了我們很多信息，可能僅僅是信息全部展開，所以我們?cè)谠O(shè)計(jì)的時(shí)候就不能直接開始，需要通過當(dāng)前頁(yè)面的業(yè)務(wù)場(chǎng)景去進(jìn)行判斷，確定每個(gè)信息的合理性，兩個(gè)步驟進(jìn)行判斷：

1. 當(dāng)前的所有信息真的需要存在于頁(yè)面中嗎，如果去掉某些信息有無影響。
2. 當(dāng)前信息的重要程度是怎樣的，對(duì)于某些不重要的信息是否可以通過隱藏，移動(dòng)等的方式展現(xiàn)。

上述兩個(gè)問題的確認(rèn)，會(huì)直接影響后面的信息設(shè)計(jì)排版。因此我們需要在源頭，比如去和產(chǎn)品或者業(yè)務(wù)溝通，弄清楚該信息呈現(xiàn)的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級(jí)。

那么如何進(jìn)行信息前置的處理呢？

我們?cè)谶M(jìn)行B端產(chǎn)品信息設(shè)計(jì)時(shí)，可以圍繞“簡(jiǎn)約四策略”進(jìn)行設(shè)計(jì)。

英國(guó)易用性專家協(xié)會(huì)主席賈爾斯 ?科爾伯恩 ( Giles Colbore ）的《簡(jiǎn)約至上》一書詳細(xì)講解了簡(jiǎn)約的四策略：刪除、組織、隱藏和轉(zhuǎn)移。

1）刪除

刪除是指將界面上不重要的內(nèi)容及元素刪掉，只保留對(duì)用戶來說重要的內(nèi)容。這樣不僅可以讓設(shè)計(jì)師在設(shè)計(jì)界面時(shí)只專注于重要的問題，也有利于用戶專心完成目標(biāo)。設(shè)計(jì)目的是聚焦可用信息，去掉分散用戶精力的信息，從而為用戶提供價(jià)值。

我們?cè)趧h除的過程中，切記不要隨意刪除。刪除信息非常考驗(yàn)判斷信息重要程度的能力，畢竟刪除了不該刪除的信息會(huì)給用戶造成不好的體驗(yàn)。

那么，如何判斷哪些信息可以刪除呢？

① 從用戶使用場(chǎng)景考慮

有些信息是否被展示，并不會(huì)對(duì)用戶起到實(shí)質(zhì)性的決定作用，反而會(huì)擾亂用戶的多余信息，這時(shí)就可以考慮刪除。

② 從產(chǎn)品目標(biāo)考慮

從產(chǎn)品目標(biāo)考慮，有些信息對(duì)產(chǎn)品目標(biāo)沒有起到實(shí)質(zhì)性的決定作用，把這類信息刪除，只留下對(duì)用戶重要的信息，這些信息可以幫助用戶做決策或者進(jìn)行下一步操作。

2）組織

組織是指對(duì)確定下來的信息進(jìn)行有層次的整理。如果我們不對(duì)篩選出來的重要信息進(jìn)行有序的整理，那么用戶在使用過程中就會(huì)覺得很復(fù)雜，抓不住重點(diǎn)。

信息組織的要求是以產(chǎn)品定位和用戶需求為線索，先考慮信息展示的主題，再考慮信息的分類方式（如時(shí)間、 顏色、大小、字母等），最后將松散的信息組織起來，并保證信息間界限明確。

右圖進(jìn)行了信息組織，明顯會(huì)比左圖看上去體驗(yàn)更好

信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。

3）隱藏

隱藏是指將用戶不常用的信息隱藏起來，在用戶需要時(shí)才出現(xiàn)。

但是，我們要注意隱藏策略的使用方式。

第一，隱藏與刪除不一樣，刪除的信息是用戶不需要的、多余的，但隱藏的信息是用戶需要的，只是比較不常用而已。

第二，在設(shè)計(jì)信息隱藏時(shí)，要考慮清楚使用隱藏是否給用戶帶來了不必要的麻煩。例如，信息隱藏時(shí)沒有給用戶應(yīng)有的提示，用戶就很難發(fā)現(xiàn)該信息。

成功的隱藏是什么呢？

首先，徹底隱藏需要隱藏的信息，只在合適的時(shí)機(jī)出現(xiàn)相關(guān)內(nèi)容。

其次，能在界面中給出細(xì)微的提示，讓用戶順利地找到隱藏信息。

最后，提示要在用戶的視線范圍內(nèi)，如果超出了用戶的視線范圍，即使提示再明顯，用戶也看不到。

在B端產(chǎn)品設(shè)計(jì)中，有一個(gè)永恒的爭(zhēng)論話題：表格操作欄需不需要隱藏。

關(guān)于這個(gè)話題，一部分人認(rèn)為不應(yīng)該隱藏，原因在于隱藏了操作欄，用戶就會(huì)以為表格數(shù)據(jù)是不能操作的。另一部分人認(rèn)為應(yīng)該隱藏，因?yàn)槊織l致?lián)及巡僮鳈谡故旧絹?，感覺太多余。

筆者認(rèn)為這需要仔細(xì)分析，不能一概而論：

1. 需要隱藏的情況：當(dāng)表格列數(shù)很多、已經(jīng)出現(xiàn)橫向滾動(dòng)條且操作欄的功能不常用時(shí)，可隱藏操作欄。當(dāng)用戶將鼠標(biāo)移到數(shù)據(jù)行上時(shí)，就會(huì)顯示操作欄的功能。
2. 不需要隱藏的情況：當(dāng)表格操作欄的功能都比較重要，一旦用戶操作頻率較高，無須隱藏操作欄。這時(shí)隱藏會(huì)導(dǎo)致用戶在操作時(shí)不直接。
3. 隱藏一部分操作功能當(dāng)表格列數(shù)很多、已經(jīng)出現(xiàn)橫向滾動(dòng)條，但操作欄的部分功能很常用時(shí)，這部分常用的功能就無須隱藏。當(dāng)用戶將鼠標(biāo)移到數(shù)據(jù)行上，就會(huì)顯示操作欄中不常用的功能。

4）轉(zhuǎn)移

轉(zhuǎn)移就是將合適的信息放到合適的地方。

例如，我們?cè)谠O(shè)計(jì)一個(gè) B端產(chǎn)品注冊(cè)界面時(shí)，期望用戶除了填寫賬號(hào)、密碼、驗(yàn)證碼以外，還期望用戶填寫生日信息。因?yàn)楫a(chǎn)品經(jīng)理希望在用戶生日時(shí)給用戶發(fā)送生日祝福，讓他們感受到產(chǎn)品的溫暖。想要再做用戶分層的時(shí)候，用年齡分層。但是，生日信息放在注冊(cè)界面顯然不合適，這時(shí)可以將生日信息填寫步驟轉(zhuǎn)移至用戶注冊(cè)完成后進(jìn)行。

例如，當(dāng)用戶完成注冊(cè)時(shí)，系統(tǒng)可以給予溫馨提示，告訴用戶 “你已完成注冊(cè)，當(dāng)你填寫了生日，你將在生日的時(shí)候收到神秘禮物”。

注意：B端產(chǎn)品經(jīng)理在設(shè)計(jì)界面信息轉(zhuǎn)移時(shí)，要清楚該信息被轉(zhuǎn)移的原因，如果盲目地轉(zhuǎn)移，反而會(huì)讓用戶無法在合適的位置找到合適的信息，降低了用戶獲取信息的效率。

確定了信息設(shè)計(jì)的前置的信息處理以后，就到了設(shè)計(jì)師的主場(chǎng)，信息的排版設(shè)計(jì)。

2. 如何信息分層設(shè)計(jì)

在信息量較大的頁(yè)面中，設(shè)計(jì)師需要充分了解產(chǎn)品功能和用戶所需，對(duì)頁(yè)面的內(nèi)容進(jìn)行劃分，明確各部分內(nèi)容的優(yōu)先級(jí)，建立信息層級(jí)。

通常我們可以從產(chǎn)品設(shè)計(jì)的角度，可以將頁(yè)面信息劃分為3個(gè)層次：

1）重點(diǎn)核心層（吸引用戶）

是指用戶在短暫的 3-5 秒內(nèi)瀏覽頁(yè)面后，最能夠吸引他的核心內(nèi)容。這部分也是頁(yè)面的核心功能、是頁(yè)面最想展示給用戶的內(nèi)容，必須少而精，在設(shè)計(jì)中需要突出展示。

2）次要輔助層（幫助理解）

是指用戶被重點(diǎn)核心信息吸引后，進(jìn)一步在頁(yè)面中停留 3 – 5 分鐘，就會(huì)閱讀相關(guān)的、幫助了解核心內(nèi)容的輔助信息，如說明信息或其他相關(guān)功能，這部分信息比較重要，但不需要強(qiáng)化展示。

3）詳細(xì)信息層（詳細(xì)了解）

是指更多的信息或補(bǔ)充信息，詳細(xì)信息層會(huì)以更多的交互方式展示信息。這部分信息并不十分重要，但也需要展示。

3. 信息設(shè)計(jì)的排版處理

B端產(chǎn)品業(yè)務(wù)比較復(fù)雜，頁(yè)面內(nèi)容也會(huì)較多，信息的有效組織尤其重要。信息設(shè)計(jì)不是簡(jiǎn)單的內(nèi)容堆砌，需要根據(jù)用戶場(chǎng)景和需求做出優(yōu)化處理，構(gòu)建有效的信息的層級(jí)幫助用戶去理解業(yè)務(wù)內(nèi)容。

總結(jié)出以下五種方法來幫助我們更合理地進(jìn)行信息設(shè)計(jì)：

1）信息分組

信息分組是最常用的設(shè)計(jì)形式，能夠?qū)?fù)雜的信息打散重組，聚合相似信息，分割差異化信息，有助于降低信息的復(fù)雜性，幫助用戶快速定位信息、瀏覽內(nèi)容，從而降低頁(yè)面整體的復(fù)雜度。常用的分組方式有三種方式：間距、分割線、卡片。

我們可以根據(jù)信息復(fù)雜度更好地選擇分割方式，讓界面的表達(dá)清晰明確。

1. 復(fù)雜程度低，優(yōu)先選用留白分隔，視覺清爽無干擾。
2. 當(dāng)留白效果不明顯時(shí)，建議采用分割線，讓信息層次更清晰且屏效高。
3. 如果需要進(jìn)一步強(qiáng)化條目本身的邊界感，可以采用卡片，這樣可以強(qiáng)化條目信息的視覺層次和可操作性。

2）組件拆分

面對(duì)復(fù)雜的信息內(nèi)容，用戶容易產(chǎn)生退縮情緒，組件是目前大部分設(shè)計(jì)師在進(jìn)行信息排布時(shí)必備的部分，包含：

1. 樹形結(jié)構(gòu)：對(duì)于有關(guān)聯(lián)性的多層級(jí)非常適合，可以將復(fù)雜的層級(jí)結(jié)構(gòu)進(jìn)行收攏，從而能夠顯著降低信息的復(fù)雜度。
2. 表格結(jié)構(gòu)：對(duì)于信息多且關(guān)聯(lián)性不大的復(fù)雜信息，可以聚合到表格來進(jìn)行呈現(xiàn)，但表格的呈現(xiàn)方式不宜濫用，需要根據(jù)我們場(chǎng)景來進(jìn)行選擇。
3. 分步驟：將復(fù)雜內(nèi)容分步拆解，把用戶的關(guān)注點(diǎn)從頁(yè)面內(nèi)容轉(zhuǎn)移到步驟進(jìn)度上，可以減少用戶的心理壓力。另外節(jié)點(diǎn)信息頁(yè)也可以幫助用戶更好地理解業(yè)務(wù)流程。
4. tab標(biāo)簽：更適合同級(jí)的數(shù)據(jù)，對(duì)于同類型的結(jié)構(gòu)可以更好地將頁(yè)面進(jìn)行拆分，從而讓當(dāng)前頁(yè)面更簡(jiǎn)潔。

3）頁(yè)面整體布局設(shè)計(jì)

通過改變布局的設(shè)計(jì)方式，我們可以將多層結(jié)構(gòu)的樣式通過拆分布局來將其控制在三層內(nèi)。這里底層邏輯就是當(dāng)遇到相對(duì)比較復(fù)雜邏輯時(shí)，我們可以考慮通過改變結(jié)構(gòu)來減少其復(fù)雜度，如下圖：

4）信息融合

我們可以利用信息融合的形式來減弱其對(duì)層級(jí)的影響。信息融合從本質(zhì)上講就是將某兩種層級(jí)信息通過不同的組合方式，讓其融入到同一個(gè)層級(jí)中。

在進(jìn)行B端布局時(shí)，信息融入用得比較多。比如我們最常見的標(biāo)題、搜索和按鈕等都放在同一行上。這樣既能夠節(jié)省視覺空間，還能夠降低信息層級(jí)的復(fù)雜度。

但在進(jìn)行信息融入的過程中，我們需要注意的是：如果放在同一層級(jí)會(huì)造成理解上的誤解時(shí)，這個(gè)時(shí)候不要采用該方案。比如搜索框的位置，放在哪個(gè)層級(jí)決定了對(duì)應(yīng)的搜索范圍。

5）信息弱化

信息弱化的原則是，將某些超出層級(jí)的部分進(jìn)行弱化。比如有5個(gè)層級(jí)，但其巧妙地將功能篩選融入到了當(dāng)前的結(jié)構(gòu)中，使得即使超過3層我們也不會(huì)覺得其特別復(fù)雜，如下圖：銷氪平臺(tái)就對(duì)數(shù)據(jù)和視圖切換行進(jìn)行了弱化，雖然還是有4種層級(jí)，但從視覺感知的層面上不會(huì)覺得視覺凌亂。

通過上述5種方案：信息分組、組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級(jí)過多的復(fù)雜信息簡(jiǎn)化，從而讓我們最終的頁(yè)面呈現(xiàn)不會(huì)太過復(fù)雜，更容易被用戶理解。

四、常見的信息設(shè)計(jì)技巧

1. 減少頁(yè)面元素設(shè)計(jì)

不同于C端產(chǎn)品，B端產(chǎn)品更強(qiáng)調(diào)效率。正如奧卡姆剃刀原則所說“如無必要，勿增實(shí)體”。

頁(yè)面內(nèi)容需要以簡(jiǎn)潔為主，避免無關(guān)要素形成信息干擾。而設(shè)計(jì)師更加感性，擔(dān)心設(shè)計(jì)過于平淡，會(huì)在界面中添加各種視覺元素，反而會(huì)增加用戶的認(rèn)知成本。

體驗(yàn)設(shè)計(jì)行業(yè)需要?jiǎng)?chuàng)新，但是B端產(chǎn)品設(shè)計(jì)需要更加謹(jǐn)慎，尊重用戶的習(xí)慣，完整表達(dá)業(yè)務(wù)邏輯性、保證內(nèi)容的可理解性，是設(shè)計(jì)師必須去關(guān)注的。

2. 卡片是用線框還是背景

當(dāng)你想用卡片來對(duì)信息分組時(shí)，你有沒有糾結(jié)過到底是用線框卡片還是背景色填充呢？經(jīng)過多次糾結(jié)和多次的設(shè)計(jì)對(duì)比，我發(fā)現(xiàn)分組方式其實(shí)也包含著一定的規(guī)則：

1）取決于卡片的數(shù)量

如果卡片少，用色塊；

如果卡片多，用線框，你會(huì)發(fā)現(xiàn)卡片過多時(shí)，線性設(shè)計(jì)會(huì)讓頁(yè)面顯得更整潔和清新，色塊設(shè)計(jì)就會(huì)讓頁(yè)面顯得更厚重。

2）取決于頁(yè)面的視覺重心

當(dāng)你整個(gè)頁(yè)面都全是線框時(shí)，你可以利用色塊的卡片來達(dá)到突出頁(yè)面重心的效果，讓整體頁(yè)面沒有那么單調(diào)，可以看到下圖的例子，右側(cè)的頁(yè)面會(huì)相對(duì)更穩(wěn)重一點(diǎn)。

3. 底色用灰色塊還是彩色塊

在進(jìn)行色塊時(shí)，時(shí)常會(huì)糾結(jié)用灰色底還是彩色底來進(jìn)行。那么這兩者到底有沒有界限的區(qū)分呢，我們應(yīng)該何時(shí)使用這兩種色彩呢。

可以看出目前這兩種顏色的運(yùn)用更多的是功能上的區(qū)分：

1. 彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導(dǎo)或者營(yíng)銷性質(zhì)的頁(yè)面。從表現(xiàn)性質(zhì)上來講更重。
2. 而灰色背景更適用于「利用灰色背景來區(qū)分層級(jí)關(guān)系」或者一些微弱提示的信息。從表現(xiàn)形式上來講更輕。

4. 可視化設(shè)計(jì)

在某些特定的場(chǎng)景下，內(nèi)容頁(yè)面也可以通過可視化展示幫助用戶理解信息，例如常見的身份證圖片上傳等，很多用戶無法分清楚正面反面，借助圖片可視化提示，便于用戶更好地理解信息。

五、最后

很多時(shí)候我們看見的優(yōu)秀界面設(shè)計(jì)并不是因?yàn)樗旧砭秃?jiǎn)單，而是通過我們合理的信息層級(jí)控制，讓最終呈現(xiàn)上顯得不復(fù)雜，這其實(shí)也是設(shè)計(jì)師在實(shí)際工作中需要注意的很重要的一個(gè)點(diǎn)，也是我認(rèn)為設(shè)計(jì)師的重要價(jià)值。

文中如果有不嚴(yán)謹(jǐn)、錯(cuò)誤的地方希望大家給予指正，希望大家可以多多點(diǎn)贊評(píng)論鼓勵(lì)下，最后感謝您的耐心閱讀。

參考資料：

1. 《B端思維-產(chǎn)品經(jīng)理的自我修煉》張靜晨
2. B端產(chǎn)品信息設(shè)計(jì)的3個(gè)原則（子牧UXD）
3. 想做好信息設(shè)計(jì)，先回答這5個(gè)問題（陳睿婷）