中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

用戶流程梳理

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

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

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

分析用戶的行為

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

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

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

頁(yè)面布局

1、建立視覺(jué)層級(jí)的方法

好的視覺(jué)層級(jí)會(huì)幫助用戶提高獲取和理解信息的效率，一般來(lái)說(shuō)會(huì)從以下幾個(gè)元素來(lái)表現(xiàn)：

1）位置

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

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

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

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

2）大小

重要的元素需要更大，可以通過(guò)拉開(kāi)大小差距的手法突出重點(diǎn)。例如下面的QQ音樂(lè)的界面設(shè)計(jì)，使用圖片的大小劃分來(lái)?yè)寠Z用戶的視線，從而達(dá)到視覺(jué)層級(jí)的劃分。

3）距離

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

人們?cè)诟兄獜?fù)雜的對(duì)象的時(shí)候，會(huì)有意識(shí)或者無(wú)意識(shí)地將接近的物體納入到一個(gè)有組織的系統(tǒng)當(dāng)中，而不是簡(jiǎn)單的視作為對(duì)象的集合，這是格式塔原理的基礎(chǔ)。

格式塔原理會(huì)適用到不同層次的認(rèn)知當(dāng)中，有的是顯性的，有的則是隱性的，但是最有趣的是可視化的部分，也就是設(shè)計(jì)師借助這種原理所創(chuàng)造出來(lái)的各種設(shè)計(jì)?？梢钥聪旅孀髠?cè)的圖片，我們會(huì)非常自然的將元素在視覺(jué)上做了分組，這就是接近性原則的魅力。

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

4）色彩

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

2、建立視覺(jué)層級(jí)的實(shí)例應(yīng)用

回到這次的設(shè)計(jì)實(shí)例“群發(fā)功能”來(lái)談?wù)?，在?duì)用戶行為做了層級(jí)劃分后，我們可以開(kāi)始著手進(jìn)入頁(yè)面布局，除了要運(yùn)用一些理論方法以外，我們還需要進(jìn)行一些實(shí)際場(chǎng)景的深入分析。通過(guò)以上用戶流程的梳理，我大致將頁(yè)面分為以下三個(gè)區(qū)塊：選擇對(duì)象區(qū)、編輯消息組區(qū)和群發(fā)記錄區(qū)。我在頁(yè)面視覺(jué)上做了層級(jí)劃分：

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

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

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

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

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

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

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

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

小結(jié)

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

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

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議