網(wǎng)站設(shè)計制作是一個繁雜的過程，怎樣從千頭萬緒中保持冷靜，制作設(shè)計出簡潔清新的網(wǎng)站界面，與設(shè)計師明確分工有很大關(guān)系，交互設(shè)計師的工作具體是什么？這里我通過實例的方式給大家具體講講設(shè)計一個產(chǎn)品的工作流程，怎樣將復(fù)雜的邏輯問題轉(zhuǎn)換為簡單易懂的界面語言。
網(wǎng)站制作交互設(shè)計師一般收到的是一份較為詳細(xì)的思維導(dǎo)圖，其中包括功能模塊、功能點以及一些功能場景的詳細(xì)說明，其中還會涉及一些程序?qū)崿F(xiàn)方面的后臺邏輯。把這些復(fù)雜的文字信息以界面語言的方式呈現(xiàn)在用戶的眼前是一個設(shè)計師的基本素質(zhì)，下面我就通過實例講講怎樣有效地把思維腦圖和后臺邏輯轉(zhuǎn)化為界面語言。
首先闡釋一下什么是界面語言，界面語言是人機交流交互的介質(zhì)，它可以幫助人們從形象的界面信息中組織邏輯，完成與界面的交互，最終達(dá)到使用目的。
好的界面語言可以節(jié)省用戶讀取信息和學(xué)習(xí)的過程，就好似考題，復(fù)雜冗長的表達(dá)會隱藏很多關(guān)鍵的信息從而誤導(dǎo)考生增加難度，反之則簡單易懂。而設(shè)計師的工作就是把用戶當(dāng)成小白考生，呈現(xiàn)給用戶最簡單最易懂的信息和操作路徑，從而縮短用戶的思考時間。
下面我將用一個群管軟件的“群發(fā)功能”作為實例詳細(xì)講述怎樣用簡潔的界面語言表達(dá)復(fù)雜的產(chǎn)品邏輯。首先我給大家闡述一下群發(fā)功能的背景：一般情況下社群的運營者需要在社群和好友圈內(nèi)散布一些信息，例如廣告、行業(yè)信息、群公告等等，由于群和好友的數(shù)量較為龐大，逐條操作工作效率過低，因此需要一個可以批量操作的功能模塊幫助他們實現(xiàn)目的。
根據(jù)用戶使用場景總結(jié)群發(fā)的流程主要分為四大大模塊：篩選對象流程、編輯流程、發(fā)送流程、歷史記錄。并且四個模塊需要形成閉環(huán)，例如歷史記錄可以再次編輯和發(fā)送，防止用戶漏發(fā)和錯發(fā)。除了及時群發(fā)的需求用戶對定時群發(fā)的需求也很急迫，定時群發(fā)可以方便用戶在非工作時間也能完成信息的及時推送。
網(wǎng)站制作設(shè)計之用戶流程梳理
首先我們搜集用戶的使用需求，歸納用戶操作場景：
-
網(wǎng)站制作場景一：創(chuàng)建多條信息（消息組）同時發(fā)給多個好友和多個群對象；
-
網(wǎng)站制作場景二：將發(fā)送任務(wù)設(shè)置為定時任務(wù)；
-
網(wǎng)站制作場景三：重新快速給上一批對象發(fā)送另一組新消息；
-
網(wǎng)站制作場景四：將同一組消息快速發(fā)給另一批對象；
-
網(wǎng)站制作場景五：發(fā)送過程中發(fā)現(xiàn)錯誤，需要修改內(nèi)容后發(fā)送剩余人員；
-
網(wǎng)站制作場景六：發(fā)送對象過多時，需要一個很長的進(jìn)程，防止中途出現(xiàn)程序或網(wǎng)絡(luò)問題，可以讓用戶手動開始和暫停；
下面是經(jīng)過用戶使用場景研究后的流程圖：
網(wǎng)站設(shè)計制作時分析用戶的行為
由于場景較多，操作分支比較復(fù)雜，所以在設(shè)計過程中一定要注意分析用戶的行為操作，將用戶行為分層，為接下來的界面設(shè)計做準(zhǔn)備。
-
核心行為：我們把最主要的用戶使用場景首先剝離出來，例如群發(fā)消息的主流程：選擇對象 -> 創(chuàng)建內(nèi)容 -> 開始發(fā)送；
-
了解行為：針對核心行為的功能補充，例如在發(fā)送進(jìn)程中的操作行為和發(fā)送完成后的記錄查看等等；
-
補充行為：主要是一些意外的操作場景，例如用戶操作失誤或者發(fā)生程序錯誤的補救流程，類似上面的場景五、六。
通過以上的這些分析，交互文檔的輸出就需要清晰的標(biāo)注出層級，哪些需要重要展示，哪些信息可以弱化。交互稿可以通過顏色和區(qū)塊的劃分來展示頁面的信息層級。這里值得注意的是：我們的主流程要避免多次跳轉(zhuǎn)和彈窗的使用，這樣會導(dǎo)致用戶在復(fù)雜路徑中迷失；也需要避免頁面主次不清，信息在頁面內(nèi)大量堆疊。
網(wǎng)站制作之頁面布局
1、網(wǎng)站設(shè)計建立視覺層級的方法
好的視覺層級會幫助用戶提高獲取和理解信息的效率，一般來說會從以下幾個元素來表現(xiàn)：
1）網(wǎng)站設(shè)計建立位置
一般情況下，人眼對左上和中部的觀察最佳，依次是右上、左下和右下，當(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）網(wǎng)站設(shè)計布局大小
重要的元素需要更大，可以通過拉開大小差距的手法突出重點。例如下面的QQ音樂的界面設(shè)計，使用圖片的大小劃分來搶奪用戶的視線，從而達(dá)到視覺層級的劃分。
3）網(wǎng)站設(shè)計架設(shè)距離
這里不得不提格式塔理論，也可以簡單理解為接近性原則：
人們在感知復(fù)雜的對象的時候，會有意識或者無意識地將接近的物體納入到一個有組織的系統(tǒng)當(dāng)中，而不是簡單的視作為對象的集合，這是格式塔原理的基礎(chǔ)。
格式塔原理會適用到不同層次的認(rèn)知當(dāng)中，有的是顯性的，有的則是隱性的，但是最有趣的是可視化的部分，也就是設(shè)計師借助這種原理所創(chuàng)造出來的各種設(shè)計。可以看下面左側(cè)的圖片，我們會非常自然的將元素在視覺上做了分組，這就是接近性原則的魅力。
通過研究和驗證，接近性原則中距離的接近，比起色彩和形狀的近似，更容易被人所認(rèn)知，下側(cè)右圖就很好的認(rèn)證了這一觀點。合理運用接近性原則能夠讓用戶更輕松地獲取信息，感知內(nèi)容。很多時候，用戶并沒有準(zhǔn)備好花費時間來學(xué)習(xí)復(fù)雜的界面，可以快速被感知和識別的信息，能更好的留住用戶。
色彩在交互設(shè)計中應(yīng)用較少，大都會采用灰色系的明暗來表現(xiàn)層級，然后采用一個彩色系來突出重要功能按鈕。交互設(shè)計師對色彩的應(yīng)用只需要達(dá)到界面層級清晰的目的，過于花哨的色彩反而會干擾邏輯的表達(dá)，也會誤導(dǎo)UI設(shè)計師的認(rèn)知。4）色彩
2、網(wǎng)站建設(shè)制作建立視覺層級的實例應(yīng)用
回到這次的設(shè)計實例“群發(fā)功能”來談?wù)?，在對用戶行為做了層級劃分后，我們可以開始著手進(jìn)入頁面布局，除了要運用一些理論方法以外，我們還需要進(jìn)行一些實際場景的深入分析。通過以上用戶流程的梳理，我大致將頁面分為以下三個區(qū)塊：選擇對象區(qū)、編輯消息組區(qū)和群發(fā)記錄區(qū)。我在頁面視覺上做了層級劃分：
1）一級信息吸引用戶：假設(shè)用戶只會在當(dāng)前頁面停留較短的時間，一級頁面就必須少而精，能夠讓用戶快速理解頁面信息，在設(shè)計上就需要重點展示該模塊的主流程功能；
群發(fā)模塊的一級信息就是引導(dǎo)用戶完成核心行為：
這是一個較長的操作流程，并且并沒有很強的步驟劃分，例如用戶可以先選擇發(fā)送對象也可以先創(chuàng)建要發(fā)送的內(nèi)容，設(shè)計師要做的是有效地通過界面語言引導(dǎo)用戶完成操作，卻也不能限制用戶的操作習(xí)慣和行為，最優(yōu)的界面布局是在做到清晰層級的劃分的前提下支持多種操作場景。下面是我針對群發(fā)主流程的界面設(shè)計：
2）網(wǎng)站制作布局之二級信息補充理解：針對一級信息進(jìn)行解釋，提煉精華內(nèi)容，幫助用戶在盡量短時間內(nèi)理解信息；
群發(fā)模塊的群發(fā)記錄和相關(guān)操作可以在界面上相對弱化，只有當(dāng)用戶在特定的場景下才會成為視覺焦點。例如可以分別查看發(fā)送中的任務(wù)、定時任務(wù)和發(fā)送完錄，并且針對
另注：當(dāng)多個發(fā)送任務(wù)在排隊時，用戶在瀏覽后會忽略正在發(fā)送的任務(wù)，從而對排隊中的任務(wù)產(chǎn)生迷惑，這里我將正在發(fā)送的任務(wù)實時置頂，視覺上的焦點會幫助用戶理解任務(wù)的進(jìn)度。
3）網(wǎng)站制作怎樣建立三級信息了解詳情：一級和二級信息已經(jīng)很好的解釋，三級信息做補充，更多的做為一個展示或者入口，提供跳轉(zhuǎn)功能。
群發(fā)模塊的三級信息是相對隱藏的，只有在特殊場景下才會啟用，這里采用了彈窗的形式來完成操作。例如可以批量刪除發(fā)送記錄，每個消息組可以查看具體發(fā)送對象和復(fù)制內(nèi)容等等。
網(wǎng)站制作公司小結(jié)
相對于純理論的的文章，這篇文章更偏向于實踐干貨，當(dāng)設(shè)計師拿到功能需求時不能盲目的著手設(shè)計，需要經(jīng)過以上的分析和歸納，深入用戶的使用場景，對于較為復(fù)雜的功能軟件，設(shè)計階段需要反復(fù)斟酌頁面布局和功能按鈕的布局，利用多種建立視覺層級的方法來指導(dǎo)設(shè)計。最后希望這篇文章能夠幫助到大家，大家有什么不明白和不理解的地方也歡迎留言。深圳網(wǎng)站制作博納網(wǎng)絡(luò)編輯整理。
