交互設(shè)計師的工作具體是什么？這里我通過實例的方式給大家具體講講設(shè)計一個產(chǎn)品的工作流程，怎樣將復(fù)雜的邏輯問題轉(zhuǎn)換為簡單易懂的界面語言。

交互設(shè)計師一般收到的是一份較為詳細(xì)的思維導(dǎo)圖，其中包括功能模塊、功能點(diǎn)以及一些功能場景的詳細(xì)說明，其中還會涉及一些程序?qū)崿F(xiàn)方面的后臺邏輯。把這些復(fù)雜的文字信息以界面語言的方式呈現(xiàn)在用戶的眼前是一個設(shè)計師的基本素質(zhì)，下面我就通過實例講講怎樣有效地把思維腦圖和后臺邏輯轉(zhuǎn)化為界面語言。

首先闡釋一下什么是界面語言，界面語言是人機(jī)交流交互的介質(zhì)，它可以幫助人們從形象的界面信息中組織邏輯，完成與界面的交互，最終達(dá)到使用目的。

好的界面語言可以節(jié)省用戶讀取信息和學(xué)習(xí)的過程，就好似考題，復(fù)雜冗長的表達(dá)會隱藏很多關(guān)鍵的信息從而誤導(dǎo)考生增加難度，反之則簡單易懂。而設(shè)計師的工作就是把用戶當(dāng)成小白考生，呈現(xiàn)給用戶最簡單最易懂的信息和操作路徑，從而縮短用戶的思考時間。

下面我將用一個群管軟件的“群發(fā)功能”作為實例詳細(xì)講述怎樣用簡潔的界面語言表達(dá)復(fù)雜的產(chǎn)品邏輯。首先我給大家闡述一下群發(fā)功能的背景：一般情況下社群的運(yùn)營者需要在社群和好友圈內(nèi)散布一些信息，例如廣告、行業(yè)信息、群公告等等，由于群和好友的數(shù)量較為龐大，逐條操作工作效率過低，因此需要一個可以批量操作的功能模塊幫助他們實現(xiàn)目的。

根據(jù)用戶使用場景總結(jié)群發(fā)的流程主要分為四大大模塊：篩選對象流程、編輯流程、發(fā)送流程、歷史記錄。并且四個模塊需要形成閉環(huán)，例如歷史記錄可以再次編輯和發(fā)送，防止用戶漏發(fā)和錯發(fā)。除了及時群發(fā)的需求用戶對定時群發(fā)的需求也很急迫，定時群發(fā)可以方便用戶在非工作時間也能完成信息的及時推送。

用戶流程梳理

首先我們搜集用戶的使用需求，歸納用戶操作場景：

• 場景一：創(chuàng)建多條信息（消息組）同時發(fā)給多個好友和多個群對象；
• 場景二：將發(fā)送任務(wù)設(shè)置為定時任務(wù)；
• 場景三：重新快速給上一批對象發(fā)送另一組新消息；
• 場景四：將同一組消息快速發(fā)給另一批對象；
• 場景五：發(fā)送過程中發(fā)現(xiàn)錯誤，需要修改內(nèi)容后發(fā)送剩余人員；
• 場景六：發(fā)送對象過多時，需要一個很長的進(jìn)程，防止中途出現(xiàn)程序或網(wǎng)絡(luò)問題，可以讓用戶手動開始和暫停；

下面是經(jīng)過用戶使用場景研究后的流程圖：

分析用戶的行為

由于場景較多，操作分支比較復(fù)雜，所以在設(shè)計過程中一定要注意分析用戶的行為操作，將用戶行為分層，為接下來的界面設(shè)計做準(zhǔn)備。

1. 核心行為：我們把最主要的用戶使用場景首先剝離出來，例如群發(fā)消息的主流程：選擇對象?創(chuàng)建內(nèi)容?開始發(fā)送；
2. 了解行為：針對核心行為的功能補(bǔ)充，例如在發(fā)送進(jìn)程中的操作行為和發(fā)送完成后的記錄查看等等；
3. 補(bǔ)充行為：主要是一些意外的操作場景，例如用戶操作失誤或者發(fā)生程序錯誤的補(bǔ)救流程，類似上面的場景五、六。

通過以上的這些分析，交互文檔的輸出就需要清晰的標(biāo)注出層級，哪些需要重要展示，哪些信息可以弱化。交互稿可以通過顏色和區(qū)塊的劃分來展示頁面的信息層級。這里值得注意的是：我們的主流程要避免多次跳轉(zhuǎn)和彈窗的使用，這樣會導(dǎo)致用戶在復(fù)雜路徑中迷失；也需要避免頁面主次不清，信息在頁面內(nèi)大量堆疊。

頁面布局

1、建立視覺層級的方法

好的視覺層級會幫助用戶提高獲取和理解信息的效率，一般來說會從以下幾個元素來表現(xiàn)：

1）位置

一般情況下，人眼對左上和中部的觀察最佳，依次是右上、左下和右下，當(dāng)然這也與書寫習(xí)慣和文化因素有關(guān)。除此以外，大多數(shù)人的眼睛沿水平方向移動更加快速和不易疲勞，因此左右關(guān)注度的差別要小于上下關(guān)注度的差別。

如果設(shè)計師想要體現(xiàn)并列關(guān)系的時候，左右排列會更佳，而想要拉開差距，上下排列更能突出。當(dāng)然這也要根據(jù)實際情況來斟酌，例如信息過長過于復(fù)雜就會采用上下列表的形式，而同級并列的重要功能操作多數(shù)采用橫向排列。

另外，在上下關(guān)系中，用戶會優(yōu)先關(guān)注上部內(nèi)容，例如網(wǎng)頁設(shè)計中首屏的信息會比第二、三屏層級要高，所以在功能模塊的布局中，同級的功能的盡量采用橫向排列的方式。

就下面兩個模塊的布局方式，第二種布局用戶會不自覺認(rèn)為前面兩三個功能tab更加重要，越往下的功能越次要。

2）大小

重要的元素需要更大，可以通過拉開大小差距的手法突出重點(diǎn)。例如下面的QQ音樂的界面設(shè)計，使用圖片的大小劃分來搶奪用戶的視線，從而達(dá)到視覺層級的劃分。

3）距離

這里不得不提格式塔理論，也可以簡單理解為接近性原則：

人們在感知復(fù)雜的對象的時候，會有意識或者無意識地將接近的物體納入到一個有組織的系統(tǒng)當(dāng)中，而不是簡單的視作為對象的集合，這是格式塔原理的基礎(chǔ)。

格式塔原理會適用到不同層次的認(rèn)知當(dāng)中，有的是顯性的，有的則是隱性的，但是最有趣的是可視化的部分，也就是設(shè)計師借助這種原理所創(chuàng)造出來的各種設(shè)計。可以看下面左側(cè)的圖片，我們會非常自然的將元素在視覺上做了分組，這就是接近性原則的魅力。

通過研究和驗證，接近性原則中距離的接近，比起色彩和形狀的近似，更容易被人所認(rèn)知，下側(cè)右圖就很好的認(rèn)證了這一觀點(diǎn)。合理運(yùn)用接近性原則能夠讓用戶更輕松地獲取信息，感知內(nèi)容。很多時候，用戶并沒有準(zhǔn)備好花費(fèi)時間來學(xué)習(xí)復(fù)雜的界面，可以快速被感知和識別的信息，能更好的留住用戶。

4）色彩

色彩在交互設(shè)計中應(yīng)用較少，大都會采用灰色系的明暗來表現(xiàn)層級，然后采用一個彩色系來突出重要功能按鈕。交互設(shè)計師對色彩的應(yīng)用只需要達(dá)到界面層級清晰的目的，過于花哨的色彩反而會干擾邏輯的表達(dá)，也會誤導(dǎo)UI設(shè)計師的認(rèn)知。

2、建立視覺層級的實例應(yīng)用

回到這次的設(shè)計實例“群發(fā)功能”來談?wù)劊趯τ脩粜袨樽隽藢蛹墑澐趾?，我們可以開始著手進(jìn)入頁面布局，除了要運(yùn)用一些理論方法以外，我們還需要進(jìn)行一些實際場景的深入分析。通過以上用戶流程的梳理，我大致將頁面分為以下三個區(qū)塊：選擇對象區(qū)、編輯消息組區(qū)和群發(fā)記錄區(qū)。我在頁面視覺上做了層級劃分：

1）一級信息吸引用戶：假設(shè)用戶只會在當(dāng)前頁面停留較短的時間，一級頁面就必須少而精，能夠讓用戶快速理解頁面信息，在設(shè)計上就需要重點(diǎn)展示該模塊的主流程功能；

群發(fā)模塊的一級信息就是引導(dǎo)用戶完成核心行為：選擇對象?創(chuàng)建內(nèi)容?開始發(fā)送

這是一個較長的操作流程，并且并沒有很強(qiáng)的步驟劃分，例如用戶可以先選擇發(fā)送對象也可以先創(chuàng)建要發(fā)送的內(nèi)容，設(shè)計師要做的是有效地通過界面語言引導(dǎo)用戶完成操作，卻也不能限制用戶的操作習(xí)慣和行為，最優(yōu)的界面布局是在做到清晰層級的劃分的前提下支持多種操作場景。下面是我針對群發(fā)主流程的界面設(shè)計：

2）二級信息補(bǔ)充理解：針對一級信息進(jìn)行解釋，提煉精華內(nèi)容，幫助用戶在盡量短時間內(nèi)理解信息；

群發(fā)模塊的群發(fā)記錄和相關(guān)操作可以在界面上相對弱化，只有當(dāng)用戶在特定的場景下才會成為視覺焦點(diǎn)。例如可以分別查看發(fā)送中的任務(wù)、定時任務(wù)和發(fā)送完成的記錄，并且針對性的進(jìn)行操作。

另注：當(dāng)多個發(fā)送任務(wù)在排隊時，用戶在瀏覽后會忽略正在發(fā)送的任務(wù)，從而對排隊中的任務(wù)產(chǎn)生迷惑，這里我將正在發(fā)送的任務(wù)實時置頂，視覺上的焦點(diǎn)會幫助用戶理解任務(wù)的進(jìn)度。

3）三級信息了解詳情：一級和二級信息已經(jīng)很好的解釋，三級信息做補(bǔ)充，更多的做為一個展示或者入口，提供跳轉(zhuǎn)功能。

群發(fā)模塊的三級信息是相對隱藏的，只有在特殊場景下才會啟用，這里采用了彈窗的形式來完成操作。例如可以批量刪除發(fā)送記錄，每個消息組可以查看具體發(fā)送對象和復(fù)制內(nèi)容等等。

小結(jié)

相對于純理論的的文章，這篇文章更偏向于實踐干貨，當(dāng)設(shè)計師拿到功能需求時不能盲目的著手設(shè)計，需要經(jīng)過以上的分析和歸納，深入用戶的使用場景，對于較為復(fù)雜的功能軟件，設(shè)計階段需要反復(fù)斟酌頁面布局和功能按鈕的布局，利用多種建立視覺層級的方法來指導(dǎo)設(shè)計。最后希望這篇文章能夠幫助到大家，大家有什么不明白和不理解的地方也歡迎留言。

本文由 @UX-ICY? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自unsplash，基于CC0協(xié)議