相信不少同學平時都看過“信息設(shè)計”這個詞匯，出現(xiàn)在那種讓人眼花撩亂的 UX 技能拆解圖。

信息設(shè)計用維基百科的解釋：

是人們對信息進行處理的技巧和實踐，通過信息設(shè)計可以提高人們應(yīng)用信息的性能。

簡單解釋，就是在日常社會實踐中，我們往往需要傳遞抽象的、復雜的、海量的信息給受眾。直接把它們羅列出來往往收效甚微，于是就要在這個基礎(chǔ)上對內(nèi)容的呈現(xiàn)形式進行合理的設(shè)計，提升信息的接受度。

比如平面領(lǐng)域的海報設(shè)計、地圖導視、雜志排版，或者統(tǒng)計領(lǐng)域的數(shù)據(jù)可視化、量化信息，它們都需要將本來難以掌握的信息有效的輸出給受眾。

在平面相關(guān)領(lǐng)域中，有大量的設(shè)計原則其實是和信息設(shè)計緊密相關(guān)的，比如四要素的親密、對比原則，都是對信息進行有效呈現(xiàn)的技巧，而不僅僅是提供美觀的視覺效果。

但要強調(diào)一點，雖然它們和信息設(shè)計相關(guān)，但并不是完全從屬于信息設(shè)計的理論和知識點。因為信息設(shè)計很難定義成一個完全獨立的設(shè)計種類，而是一個跨越了多門學科，在多數(shù)設(shè)計領(lǐng)域中都有涉及的附屬技能。

隨著UI行業(yè)的興起，承載了越來越多的內(nèi)容，信息設(shè)計的重要性也就自然被凸顯了出來：如何更有效讓用戶接收產(chǎn)品的信息。

和平面、動畫方向信息設(shè)計不同的是，UI類設(shè)計除了滿足眼睛的識別，還要符合用戶的操作習慣。也就是它還疊加了交互相關(guān)的要求在里面。

并且，移動端的界面雖然已經(jīng)很復雜了，但畢竟手機的屏幕尺寸有限，內(nèi)容再怎么塞也是有上限的。而PC端的設(shè)計就不同了，電腦屏幕可以承載的信息量上限遠遠高于移動端，這就為一些復雜的生產(chǎn)力工具、操作系統(tǒng)提供了發(fā)揮的空間。

所以電腦端的界面信息設(shè)計難度也遠遠高于移動端，需要我們認真的對待項目中的信息設(shè)計，否則很容易導致項目體驗的崩塌，不僅用戶理解信息極其困難，且操作效率極其低下。

比如下圖學員的真實案例，就是缺乏有效信息設(shè)計的結(jié)果，大家可以仔細看一看，思考如果你是用戶面對這樣的界面會產(chǎn)生什么問題：

相信絕大多數(shù)同學都會立馬感覺到它們做得并不合理，但是要怎么做才合理，似乎也給不出好的方案。所以，我就要針對這種復雜的表單和詳情頁，來講一講 B端設(shè)計中的信息設(shè)計應(yīng)該怎么做。

在這里我并不打算長篇大論信息設(shè)計的理論知識，對實際設(shè)計落地沒太大的作用，大家自己網(wǎng)上搜就可以了。

下面是我整理的對應(yīng)設(shè)計步驟：

下面我會通過對學員案例的改版，來逐一解釋B端信息設(shè)計的方法。

第1步：理解

第一步理解的意思，是指理解需求內(nèi)容。在需要應(yīng)用信息設(shè)計的場景中， 通常都包含大量的字段、交互內(nèi)容，我們必須清楚它們的含義、業(yè)務(wù)邏輯。

很多時候產(chǎn)品在畫原型還是給需求的時候，并不會把每個信息點都解釋清楚，所以就需要設(shè)計師自己去追問。很多時候光問到結(jié)果還不夠，信息點如果太多是根本背不下來的，所以需要我們把獲得的信息記錄下來，方便我們隨時進行參考和對照。

記錄的方法可以按自己的習慣來，只要保證自己能看懂即可，以及不需要把每個字段都記錄下來，只記錄自己不了解的，陌生的字段。比如上方的表單，我會那么記錄：

除此之外，我們還要理解這個頁面所在的流程，操作場景，以及使用的用戶是誰。

這個步驟需要花的時間并不多，不要在對業(yè)務(wù)不熟悉的情況下偷懶，不然肯定很快就會遺忘或搞混這些信息，以及無法產(chǎn)出有效的設(shè)計。

第2步：分析

上一步叫理解，是因為需求中的內(nèi)容和業(yè)務(wù)信息是固定的，我們的任務(wù)是搞明白它們。而這一步，才是我們開始做具體分析和動腦的過程。

比如我們做的是改版，那么目前的版本并不符合上面的要求。那我就要找出它不滿足的缺陷，并給出解決它們的辦法，為后續(xù)的設(shè)計提供指導路徑。

問題1：信息內(nèi)容排序混亂

前后內(nèi)容排序缺乏邏輯關(guān)聯(lián)，而且非常跳躍，完全不符合正常的F型瀏覽順序。還有類似績效和任務(wù)績效是關(guān)聯(lián)設(shè)置位于表單右側(cè)，而左側(cè)的兩行并不具備這種關(guān)聯(lián)度。

問題2：上下對齊線混亂

表單長短不一，上下的對齊非常凌亂，不利于信息識別的效率。

問題3：表單長度過長

部分選項默認長度過長，會給操作過程帶來多余的辨識成本。

大致解決方案：

• 對內(nèi)容進行合理分組

• 重新排列內(nèi)容，更符合邏輯順序

• 應(yīng)用設(shè)計刪格線來規(guī)范表單對齊

• 優(yōu)化表單線框長度，提升識別效率

• ……

分析的內(nèi)容是開放的，在不同的情況下需要分析的內(nèi)容是不同的。比如現(xiàn)在做老版本的優(yōu)化，必然要分析原有設(shè)計不合理的地方，和做新需求是有區(qū)別的。

但大致上，分析內(nèi)容就是圍繞下面的問題展開：

要怎么設(shè)計才能讓用戶在目標操作流程中感到易用且高效？

第3步：歸納

這一步，就是對信息內(nèi)容進行歸類、排序、權(quán)重定義的關(guān)鍵步驟，也是涉及信息設(shè)計中最關(guān)鍵的一步。

這里我使用思維導圖，對已有的信息進行歸納整理，既然要分類，那么每個分類必然也會有個分類的名稱，即使產(chǎn)品沒有給我們，我們也要自己定義出來（后面可以優(yōu)化），這在實際設(shè)計過程中是非常必要的。

這里要提一下，如果是我自己的項目，我會在這個步驟中標記每個字段表單的形式，提前想好它們應(yīng)該用哪種控件形式展現(xiàn)出來。如果沒有足夠的經(jīng)驗，就可以留到下一步再做。

第4步：原型

這一步，就是通過前面的分析和歸納的結(jié)果，基本布局和交互的原型圖了。

改動內(nèi)容如下：

1. 制定一個12列刪格，用來對齊表單矩形類控件

2. 新增二級標題，對字段內(nèi)容進行分組重排

3. 優(yōu)化表單長度，默認長度縮短，可隨內(nèi)容適配

4. 整體操作選項下移，方便在結(jié)束時控制

5. 合并計劃時間操作，在彈出菜單設(shè)置即可

第5步：上色

最后的上色步驟，如果只理解成是 “填色” 還是不準確的，除了在前面的原型基礎(chǔ)上把顏色、圖標這些細節(jié)加上，還可以對內(nèi)容做進一步的優(yōu)化，提高視覺效果和操作體驗。

修改后的樣式如下：

應(yīng)用前面分析方法，完成詳情頁的改動如下：

詳情頁的信息展示需要，是和表單不同的，這是因為輸入場景和查看場景需要強調(diào)的內(nèi)容和顯示的內(nèi)容不一致，這就涉及到前期理解和分析的環(huán)節(jié)了，感興趣的同學可以自己仔細查看案例思考一下。

結(jié)尾

以上就是本次結(jié)合信息設(shè)計的案例修改分享，但畢竟不是我自己的項目，部分需求包含了我的主觀理解在里面，所以必然不是百分百完美的。

但面對復雜的信息和字段內(nèi)容，我們就需要通過這樣的輸出流程進行產(chǎn)出，確保信息的展示是經(jīng)過我們充分的思考，有理有據(jù)。這樣在方案評審中才能形成有效的討論，并做出最終的優(yōu)化。

今天的分享到這里結(jié)束！

下篇再賤～