交互設(shè)計師的具體工作是什么？在這里，我將通過如何將復(fù)雜的邏輯問題轉(zhuǎn)換為易于理解的界面語言，為您提供設(shè)計產(chǎn)品的工作流程的具體說明。

交互設(shè)計者通常接收更詳細(xì)的思維導(dǎo)圖，其中包括功能模塊，功能點和一些功能場景的詳細(xì)描述。它還涉及程序?qū)崿F(xiàn)的一些背景邏輯。以界面語言的形式呈現(xiàn)這些復(fù)雜的文本消息是設(shè)計者的基本品質(zhì)。下面我將解釋如何有效地將大腦和背景邏輯轉(zhuǎn)換為界面語言。

首先，解釋什么是界面語言。界面語言是人機交互的媒介。它可以幫助人們從圖像的界面信息中組織邏輯，完成與界面的交互，最終達(dá)到使用目的。

良好的界面語言可以為用戶節(jié)省閱讀信息和學(xué)習(xí)的過程。這就像一個考試問題。復(fù)雜而冗長的表達(dá)將隱藏許多關(guān)鍵信息并誤導(dǎo)候選人以增加難度。相反，它很容易理解。設(shè)計師的工作是將用戶視為白色候選人，向用戶呈現(xiàn)最簡單，最易理解的信息和操作路徑，從而縮短用戶的思考時間。

下面我將以組管理軟件的“組發(fā)送功能”為例，詳細(xì)描述如何用簡單的界面語言表達(dá)復(fù)雜的產(chǎn)品邏輯。首先，讓我解釋一下群發(fā)函數(shù)的背景：一般來說，社區(qū)運營商需要在社區(qū)和朋友圈中傳播一些信息，如廣告，行業(yè)信息，群組公告等，因為團(tuán)體和朋友比較大。操作一個接一個地效率太低，因此需要一個可以批量操作的功能模塊來幫助他們實現(xiàn)目標(biāo)。

根據(jù)用戶使用場景，總結(jié)組的過程主要分為四個主要模塊：篩選對象過程，編輯過程，發(fā)送過程和歷史記錄。并且這四個模塊需要形成閉環(huán)，例如，可以編輯歷史記錄并再次發(fā)送以防止用戶泄漏和發(fā)送錯誤。除了集團(tuán)的及時需求外，對定時組的需求也很緊迫。定時組發(fā)送有助于在非工作時間及時推送信息。

用戶進(jìn)程修飾

首先，我們收集用戶使用要求并總結(jié)用戶操作方案：

場景1：創(chuàng)建多條信息（消息組）并同時將它們發(fā)送給多個朋友和多個組對象;

場景2：將發(fā)送任務(wù)設(shè)置為定時任務(wù);

場景3：將另一組新消息重新發(fā)送到上一批對象;

場景4：快速將同一組消息發(fā)送到另一批對象;

場景5：在發(fā)送過程中發(fā)現(xiàn)錯誤，修改內(nèi)容后需要修改剩余的人員;

場景6：當(dāng)發(fā)送對象太多時，需要一個漫長的過程來防止中間發(fā)生程序或網(wǎng)絡(luò)問題，允許用戶手動啟動和暫停;

以下是用戶使用方案后的流程圖：

分析用戶行為

由于場景數(shù)量眾多，操作分支復(fù)雜，有必要注意在設(shè)計過程中分析用戶的行為操作，分層用戶行為，以及為下一個界面設(shè)計做準(zhǔn)備。

核心行為：我們首先剝離最重要的用戶使用場景，例如群發(fā)消息的主要過程：選擇對象

創(chuàng)建內(nèi)容

開始發(fā)送;

理解行為：補充核心行為，例如發(fā)送過程中的過程行為和傳輸完成后的記錄視圖;

附加行為：主要是意外操作場景，例如用戶操作錯誤或程序錯誤的補救程序，類似于上述場景5和6.

通過上述分析，交互式文檔的輸出需要清楚地標(biāo)記層次結(jié)構(gòu)，這需要重要的顯示，哪些信息可以被削弱。交互式草稿可以通過劃分顏色和塊來顯示頁面的信息級別。值得注意的是，我們的主要流程應(yīng)該避免使用多個跳轉(zhuǎn)和彈出窗口，這會導(dǎo)致用戶在復(fù)雜路徑中迷路。還有必要避免頁面不清楚，并且信息在頁面內(nèi)大量堆疊。

頁面布局

1.建立視覺層次的方法

良好的視覺層次結(jié)構(gòu)將幫助用戶提高獲取和理解信息的效率，一般來說，可以從以下要素中獲?。?/p>

1）位置

在正常情況下，人眼對左上和中間的觀察效果最好，其次是右上角，左下角和右下角。當(dāng)然，這也與寫作習(xí)慣和文化因素有關(guān)。此外，大多數(shù)人的眼睛在水平方向上移動得更快更容易，因此左右注意力的差異小于上下注意力的差異。

如果設(shè)計師想要體現(xiàn)并排的關(guān)系，最好安排左右，如果你想打開間隙，頂部和底部的布置會更加突出。當(dāng)然，這也應(yīng)該根據(jù)實際情況來考慮。例如，如果信息太長太復(fù)雜，它將采用上下列表的形式，同一級別的重要功能操作大多是水平排列的。

另外，在上下關(guān)系中，用戶首先要注意上層內(nèi)容。例如，網(wǎng)頁設(shè)計中第一個屏幕上的信息將高于第二個和第三個屏幕級別。因此，在功能模塊的布局中，盡可能水平地布置相同級別的功能。方式。

至于以下兩個模塊的布局，第二個布局用戶不會有意識地認(rèn)為前兩個或三個功能選項卡更重要，而功能越低，越重要。

2）尺寸

重要的元素需要更大，并且可以通過拉開尺寸間隙來突出顯示。例如，以下QQ音樂的界面設(shè)計使用圖像的大小劃分來搶奪用戶的視線，從而實現(xiàn)視覺層次的劃分。

3）距離

這里必須提到格式塔理論，或者它可以簡單地理解為接近原則：

當(dāng)人們感知復(fù)雜的物體時，他們會有意識或無意識地將近物體納入有組織的系統(tǒng)，而不僅僅是物體的集合，這是格式塔原則的基礎(chǔ)。

格式塔原則適用于不同層面的認(rèn)知，有些是明確的，有些是隱性的，但最有趣的部分是視覺部分，即設(shè)計師用這個原則創(chuàng)造的設(shè)計。 。你可以看到左下方的圖片，我們自然會在視覺上對元素進(jìn)行分組，這就是接近原則的魅力所在。

通過研究和驗證，接近原理的接近度通過顏色和形狀的近似更容易識別，右下圖像是一個很好的認(rèn)證。正確使用鄰近原則使用戶更容易訪問信息和感知內(nèi)容。很多時候，用戶還沒有準(zhǔn)備好花時間學(xué)習(xí)復(fù)雜的界面，可以快速感知和識別的信息，以及更好的用戶保留。

4）顏色

交互式設(shè)計中使用的顏色較少。 Metropolis使用灰色陰影來表示層次結(jié)構(gòu)，然后使用顏色系統(tǒng)突出顯示重要的功能按鈕。交互設(shè)計者的顏色應(yīng)用只需要達(dá)到清晰界面水平的目的。太多花哨的顏色會干擾邏輯的表達(dá)并誤導(dǎo)UI設(shè)計師的感知。

2.建立可視化層次結(jié)構(gòu)的實例應(yīng)用程序

回到這個設(shè)計實例“l(fā)dquo;組功能]，在我們對用戶行為進(jìn)行分層劃分后，我們就可以開始進(jìn)入頁面布局了。除了使用一些理論方法，我們還需要做一些實際的場景。深入分析。通過組合上述用戶過程，我粗略地將頁面分成以下三個塊：選擇對象區(qū)域，編輯消息組區(qū)域和組記錄記錄區(qū)域。我直觀地對頁面進(jìn)行了分層劃分：

1）第一級信息吸引用戶：假設(shè)用戶只在短時間內(nèi)停留在當(dāng)前頁面上。第一級頁面必須小而精確，允許用戶快速了解頁面信息。在設(shè)計中，有必要強調(diào)模塊的主要過程。功能;

批量模塊的第一級信息是引導(dǎo)用戶完成核心行為：選擇對象

創(chuàng)建內(nèi)容

開始發(fā)送

這是一個漫長的操作過程，并沒有強大的分步。例如，用戶可以首先選擇發(fā)送對象或首先選擇要發(fā)送的內(nèi)容。設(shè)計人員必須通過界面語言有效地引導(dǎo)用戶完成操作。但是，它不能限制用戶的操作習(xí)慣和行為。最優(yōu)的界面布局在明確的分層劃分的前提下支持多種操作場景。這是批量處理的界面設(shè)計：

2）對輔助信息的補充理解：解釋一級信息，提取精華內(nèi)容，幫助用戶在最短的時間內(nèi)理解信息;

批量模塊的組記錄和相關(guān)操作可以在界面上相對弱化，并且僅當(dāng)用戶在特定場景中時才成為視覺焦點。例如，可以有針對性地分別查看和操作發(fā)送，計劃任務(wù)和發(fā)送完成記錄中的任務(wù)。

另一個注意事項：當(dāng)多個發(fā)送任務(wù)排隊時，用戶將忽略瀏覽后發(fā)送的任務(wù)，這將混淆隊列中的任務(wù)。在這里，我將實時發(fā)送任務(wù)，視覺焦點將幫助用戶理解。任務(wù)的進(jìn)展。

3）3級信息以理解細(xì)節(jié)：1級和2級信息已得到很好的解釋，3級信息得到補充，更多用作顯示或門戶以提供跳轉(zhuǎn)功能。

批量模塊的三個級別的信息是相對隱藏的，并且僅在特殊情況下啟用。彈出窗口用于完成操作。例如，可以批量刪除發(fā)送記錄，并且每個消息組可以查看特定的發(fā)送對象，復(fù)制內(nèi)容等。

　摘要

與純理論文章相比，本文更傾向于實踐干貨。當(dāng)設(shè)計師獲得功能要求時，他們無法盲目地開始設(shè)計。他們需要經(jīng)過上述分析和歸納，并深化用戶對更復(fù)雜功能的使用場景。軟件，設(shè)計階段需要反復(fù)考慮頁面布局和功能按鈕的布局，使用多種方法建立可視化層次結(jié)構(gòu)來指導(dǎo)設(shè)計。最后，我希望這篇文章可以幫助每個人，也歡迎所有不理解和不理解的人留言。

本文最初由@ UX-ICY發(fā)布。未經(jīng)許可，禁止復(fù)制。

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

« 對于快速發(fā)展的品牌，誰是最受歡迎的電子商務(wù)平臺？ | 在不同的運營階段，B端產(chǎn)品應(yīng)該采用什么樣的技巧？ »