首頁

交互設(shè)計(jì)從入門到精通的5個(gè)途徑

seo達(dá)人

一、練習(xí)原型 

練習(xí)原型是培養(yǎng)流程意識(shí)和全局意識(shí)的過程，以及對(duì)設(shè)計(jì)的深度思考。
圖片
練習(xí)一套完整的產(chǎn)品原型后，嘗試不斷補(bǔ)充遺漏的交互場(chǎng)景和狀態(tài)。重復(fù)做幾套產(chǎn)品的交互原型后，這對(duì)于ui設(shè)計(jì)師來說，已經(jīng)入門了。
部分UI會(huì)覺得平時(shí)都是做的高保真視覺稿，畫原型應(yīng)該是一件很簡單的事情。
其實(shí)不然，UI設(shè)計(jì)師沒有訓(xùn)練交互原型的話，那么前期從事交互工作會(huì)比較吃力。會(huì)容易關(guān)注于視覺細(xì)節(jié)，對(duì)于交互流程的全局思路掌握不夠。導(dǎo)致原型主流程和分支流程容易出問題。
所以平時(shí)沒事多練練原型，畫完原型后把自己當(dāng)作用戶來審視原型稿。找出其中的問題，并不斷完善，提升原型的質(zhì)量。

 

二、看優(yōu)秀的交互文檔 

看一些優(yōu)秀的交互文檔，看看別人對(duì)各個(gè)狀態(tài)的標(biāo)注和說明，以及流程的設(shè)計(jì)思考。
看看別人原型中包含那些結(jié)構(gòu)，是否值得借鑒并學(xué)習(xí)。找到優(yōu)秀的交互輸出模板，并根據(jù)自身設(shè)計(jì)團(tuán)隊(duì)情況，優(yōu)化交互文檔結(jié)構(gòu)，提升交互文檔質(zhì)量
一套完整且比較優(yōu)秀的移動(dòng)端交互文檔，我認(rèn)為可以包含：業(yè)務(wù)背景、設(shè)計(jì)目標(biāo)、業(yè)務(wù)規(guī)則定義、用戶流程圖、設(shè)計(jì)原則、交互流程標(biāo)注以及交互各種狀態(tài)異常場(chǎng)景。
1、業(yè)務(wù)背景
業(yè)務(wù)背景通常是我們?yōu)槭裁匆鲞@個(gè)功能。通過做這個(gè)功能，對(duì)業(yè)務(wù)有什么幫助。通過業(yè)務(wù)背景，我們可以推演出業(yè)務(wù)訴求，并得到對(duì)應(yīng)的產(chǎn)品目標(biāo)。

 

2、設(shè)計(jì)目標(biāo)
設(shè)計(jì)目標(biāo)是通過設(shè)計(jì)得到什么樣的結(jié)果，對(duì)產(chǎn)品來說可以獲得什么樣的好處。所以在交互文檔的設(shè)計(jì)中要重點(diǎn)體現(xiàn)出設(shè)計(jì)目標(biāo)。通過明確設(shè)計(jì)目標(biāo)，可以清晰的指導(dǎo)我們做交互方案。

 

3、業(yè)務(wù)規(guī)則定義
關(guān)于產(chǎn)品的業(yè)務(wù)規(guī)則，可能需要同產(chǎn)品經(jīng)理、業(yè)務(wù)方和運(yùn)營一起溝通討論。這個(gè)里面涉及到整個(gè)產(chǎn)品業(yè)務(wù)的規(guī)則。在實(shí)際工作中，我們交互會(huì)碰到兩種情況：
情況1：產(chǎn)品經(jīng)理會(huì)和業(yè)務(wù)或運(yùn)營溝通，然后輸出一份業(yè)務(wù)規(guī)則，這時(shí)候我們交互可以認(rèn)真閱讀并梳理業(yè)務(wù)規(guī)則，如果覺得不合理的話，可以和產(chǎn)品經(jīng)理討論溝通，并修改業(yè)務(wù)規(guī)則使之變得更合理，并輸出在交互文檔中。
情況2：產(chǎn)品經(jīng)理只是簡單的有個(gè)業(yè)務(wù)規(guī)則想法，這時(shí)候需要我們交互設(shè)計(jì)師幫忙一起溝通并細(xì)化其業(yè)務(wù)規(guī)則，并輸出在交互文檔中。

 

4、用戶流程圖
用戶流程即我們?cè)O(shè)計(jì)師要梳理用戶在使用過程中的各種場(chǎng)景流程，通過用戶流程圖可避免遺漏場(chǎng)景，避免交互方案遺漏。

 

5、設(shè)計(jì)原則
這里的設(shè)計(jì)原則非平時(shí)看到的一些交互或者視覺設(shè)計(jì)原則，而是在設(shè)計(jì)這個(gè)需求交互方案中需要遵守的原則。這里的設(shè)計(jì)原則和業(yè)務(wù)強(qiáng)掛鉤。

 

6、交互流程標(biāo)注
基于上面的用戶流程圖，可以得到用戶操作流程，即交互流程標(biāo)注。

目前我覺得交互流程標(biāo)注比較好的展示方式，是按照一個(gè)主流程在一個(gè)站點(diǎn)地圖/畫板的形式展示。當(dāng)一個(gè)主流程中存在幾個(gè)支線操作流程時(shí)，可以分別在一個(gè)站點(diǎn)地圖/畫板中，展示出來。同時(shí)用標(biāo)題區(qū)分說明分支流程的操作名字。如下圖所示：

圖片
在涉及到異常場(chǎng)景，且可以全局性復(fù)用的情況，則只需要全局性組件說明即可，不用每個(gè)流程都展示其異常場(chǎng)景組件或者頁面。
全局組件指的是整個(gè)產(chǎn)品通用的組件，例如全局?jǐn)嗑W(wǎng)，操作成功、操作失敗、加載、空數(shù)據(jù)界面，404等

全局?jǐn)嗑W(wǎng)：一般是在首頁使用tips提示。用戶在其他界面點(diǎn)擊操作時(shí)，也會(huì)出現(xiàn)toast反饋提示用戶。也有一些app在用戶進(jìn)入出現(xiàn)對(duì)話框提示用戶網(wǎng)絡(luò)異常。相對(duì)于對(duì)話框，使用tips對(duì)用戶的干擾更小。

操作成功：一般操作成功都是根據(jù)具體的使用場(chǎng)景對(duì)出對(duì)應(yīng)的提示。

操作失?。?/strong>異常情況導(dǎo)致操作失敗，這時(shí)需要統(tǒng)一的提示，通常使用toast，也有一些使用對(duì)話框強(qiáng)提示用戶。

圖片

加載：涉及到全局加載和局部加載，全局加載在設(shè)計(jì)中要統(tǒng)一說明，例如上一個(gè)界面點(diǎn)擊進(jìn)入下一個(gè)界面，使用的全局加載就需要說明。如果是一些小場(chǎng)景的加載，那么需要特殊說明。例如上拉加載，下拉加載，局部小區(qū)域加載等。

空數(shù)據(jù)類型一共有三類：

1.初始狀態(tài)的定義：初始化狀態(tài)，沒有任何內(nèi)容，需要用戶進(jìn)行某種操作才能產(chǎn)生內(nèi)容的界面。

2.清空狀態(tài)的定義：通過刪除或其他用戶操作，清空當(dāng)前的頁面內(nèi)容，產(chǎn)生了空界面，這時(shí)候需要有明確的提示，且告知用戶該如何處理。

3.出錯(cuò)狀態(tài)的定義：由于網(wǎng)絡(luò)、服務(wù)器或者沒有找他其他結(jié)果等原因?qū)е聼o法加載內(nèi)容，產(chǎn)生了空界面，這時(shí)候需要有明確的提示，且告知用戶該如何處理。用戶操作反饋的無結(jié)果界面也可以用這樣的思路來設(shè)計(jì)。

 

三、思考設(shè)計(jì)背后的邏輯 

平時(shí)在使用產(chǎn)品時(shí)，學(xué)會(huì)思考設(shè)計(jì)背后的邏輯。以一個(gè)美團(tuán)設(shè)計(jì)的為例：
美團(tuán)首頁改版將用戶下單的狀態(tài)顯示在首頁。

這樣的改版，作為設(shè)計(jì)師或者產(chǎn)品經(jīng)理，應(yīng)該從兩方面來看待這個(gè)事情，即從產(chǎn)品訴求和用戶訴求雙方面來看待，從兩個(gè)方面看待得到的結(jié)果是迥然不同的。圖片

產(chǎn)品訴求角度：新版將用戶下單的狀態(tài)顯示在首頁可提升首頁訪問深度和曝光率。

個(gè)人中心訂單頁并不能做到流量的二次利用。這也是這次改版的主要原因。

以前用戶查看訂單狀態(tài)都是只能去訂單頁面，路徑較長，且訂單頁面沒有產(chǎn)品曝光，無法進(jìn)行其他轉(zhuǎn)化，流量無法被多次利用。

所以將用戶的訂單狀態(tài)這種高頻操作放置于首頁，可利于其他業(yè)務(wù)的曝光。

美團(tuán)的吃喝玩樂，其他業(yè)務(wù)被用戶查看的概率提升。對(duì)產(chǎn)品來說是有巨大的好處。

用戶訴求視角：將用戶訂單狀態(tài)放于首頁，用戶的使用場(chǎng)景，會(huì)不時(shí)的查看訂單狀態(tài)，放置于首頁可方面快捷的提供用戶查看訂單狀態(tài)，對(duì)用戶來說體驗(yàn)好。

從用戶訴求和產(chǎn)品的訴求來看，這次改版應(yīng)該是很優(yōu)秀的。

但是脫離于個(gè)體業(yè)務(wù)，從產(chǎn)品全局來看，這種設(shè)計(jì)的邏輯方式，會(huì)讓用戶對(duì)于app的信息的尋找邏輯進(jìn)行顛覆和破壞。

以后是不是重要的東西都可以放置于首頁？如果這個(gè)改版開了個(gè)頭，以后其他業(yè)務(wù)也都有這個(gè)訴求，整個(gè)產(chǎn)品的生態(tài)都會(huì)失去控制。

 

四、總結(jié)設(shè)計(jì)方法 

在工作中可以嘗試總結(jié)一些設(shè)計(jì)方法，提升設(shè)計(jì)能力。
之前我總結(jié)了以下5個(gè)方法，可以助力設(shè)計(jì)師做出優(yōu)秀甚至驚艷的設(shè)計(jì)方案。分別為：
1、拆解設(shè)計(jì)需求
2、分析線上數(shù)據(jù)
3、窮舉設(shè)計(jì)方案
4、切換用戶視角
5、競(jìng)品方案對(duì)比

 

1、拆解設(shè)計(jì)需求

設(shè)計(jì)師接到的設(shè)計(jì)需求，大部分情況下是通過產(chǎn)品經(jīng)理那里獲得的。而產(chǎn)品經(jīng)理的原始需求來源于：業(yè)務(wù)方、用戶和老板。

圖片

產(chǎn)品經(jīng)理會(huì)將原始需求進(jìn)行整理，從而轉(zhuǎn)化成產(chǎn)品需求，在這一過程中產(chǎn)品經(jīng)理可能會(huì)出現(xiàn)對(duì)原始需求的理解出現(xiàn)偏差（范圍擴(kuò)大、范圍縮小或者是方向錯(cuò)誤）。

設(shè)計(jì)師如果直接拿著產(chǎn)品需求就開始做設(shè)計(jì)，可能會(huì)導(dǎo)致設(shè)計(jì)方案不符合業(yè)務(wù)需求。所以設(shè)計(jì)師進(jìn)行設(shè)計(jì)前，最好也了解原始需求是怎么樣產(chǎn)生的，這樣才能做到心中有數(shù)。

圖片

掌握原始需求和產(chǎn)品需求后，接下來就要對(duì)需求進(jìn)行拆解。
舉個(gè)小例子：設(shè)計(jì)這邊接到了一個(gè)產(chǎn)品需求，需求為：為降低產(chǎn)品占用用戶手機(jī)存儲(chǔ)空間。優(yōu)化線上清理緩存功能，提升用戶完成清理緩存的成功率。
通過這個(gè)產(chǎn)品需求可以看出，設(shè)計(jì)師要做的就是提升清理緩存流程的成功率。但是從原始需求可以看出，真正核心需要解決的則是如何降低產(chǎn)品占用用戶手機(jī)存儲(chǔ)空間。
所以設(shè)計(jì)師的方案可以從4方面入手：
  • 提升清理緩存的成功率；
  • 和開發(fā)溝通，是否有更好的更改緩存機(jī)制；
  • 通過設(shè)計(jì)的手段引導(dǎo)用戶清理緩存垃圾等。
  • 是否可以增加自動(dòng)清理功能。
這樣的話，設(shè)計(jì)方案才能更好的服務(wù)于產(chǎn)品和用戶。

 

2、分析線上數(shù)據(jù)
當(dāng)我們拆解了設(shè)計(jì)需求后，接下來就需要分析線上數(shù)據(jù)，看這個(gè)業(yè)務(wù)相關(guān)的數(shù)據(jù)情況怎么樣？
分析數(shù)據(jù)情況，然后思考線上布局的合理性，然后進(jìn)行布局設(shè)計(jì)和流程設(shè)計(jì)。
舉個(gè)例子，在某個(gè)操作流程中，發(fā)現(xiàn)有一個(gè)步驟，用戶操作流失率很高，這時(shí)候我們就要分析為什么這一步操作流失率高。

例如注冊(cè)流程/綁定銀行卡的過程中，總的轉(zhuǎn)化率只有0.06%，用戶完成率過低，如果要優(yōu)化整個(gè)用戶注冊(cè)操作流程，那么需要找出流失過大的節(jié)點(diǎn)進(jìn)行優(yōu)化。

圖片

從數(shù)據(jù)可以看出有兩個(gè)失敗率最高，分別為：注冊(cè)流程和綁定銀行卡流程。

這時(shí)候設(shè)計(jì)師就要分析整個(gè)注冊(cè)流程和綁定銀行卡流程。哪些設(shè)計(jì)因素導(dǎo)致成功率低。并針對(duì)成功率低進(jìn)行針對(duì)性的布局優(yōu)化和流程優(yōu)化。

 

3、窮舉方案方式
當(dāng)設(shè)計(jì)出一個(gè)方案時(shí)，則需要對(duì)完成的方案進(jìn)行窮舉，發(fā)散出更多的方案，最后從眾多方案中找到一個(gè)更完美的方案。

以表單設(shè)計(jì)為例。常見的設(shè)計(jì)方案，是將所有的表單內(nèi)容按照分組的方式，進(jìn)行排列，如下圖所示：

圖片

但是這種方案存在一個(gè)問題，用戶進(jìn)來之后，發(fā)現(xiàn)有大量的信息需要填寫，填寫壓力大，導(dǎo)致用戶的填寫意愿變?nèi)酰瑢?dǎo)致提交成功率降低。

接下來就要嘗試其他方向的設(shè)計(jì)思路，通過窮舉法可以想到的有分步設(shè)計(jì)和將表單填寫內(nèi)容隱藏到下一級(jí)界面，從而降低用戶填寫壓力提升用戶的操作成功率。

下圖左邊為分步設(shè)計(jì)，右圖為表單信息隱藏到下一級(jí)頁面。

圖片

 

4、切換用戶視角

設(shè)計(jì)方案確認(rèn)之后，這時(shí)候有一步很關(guān)鍵，就是我們要將自己想像成小白用戶。
我們以小白用戶的視角去審視方案?？纯从袥]有不理解的地方。
為什么要有這一步呢？
因?yàn)槲覀冊(cè)O(shè)計(jì)師在設(shè)計(jì)方案的過程中，會(huì)默認(rèn)一些設(shè)計(jì)規(guī)則邏輯，而這些規(guī)則邏輯用戶是不知道的。
這就導(dǎo)致了我們?cè)O(shè)計(jì)師覺得這個(gè)方案可行。但是普通用戶卻不知道這個(gè)規(guī)則邏輯，導(dǎo)致我們的方案用戶看不懂。
當(dāng)我們切換用戶視角發(fā)現(xiàn)方案存在的問題后，再嘗試如何讓用戶更好的理解的前提下去優(yōu)化方案。

 

5、競(jìng)品方案對(duì)比
為什么我將競(jìng)品方案放在后面呢？
如果做設(shè)計(jì)之前就參考競(jìng)品，那么就容易默認(rèn)為競(jìng)品的方案是標(biāo)準(zhǔn)的，是優(yōu)秀的方案。
會(huì)不由自主的按照競(jìng)品的思路去做設(shè)計(jì)，最終導(dǎo)致的后果就是和競(jìng)品方案相似。
由于我們和競(jìng)品的人群，業(yè)務(wù)背景等方面都不相同。
競(jìng)品的設(shè)計(jì)方案基于開發(fā)或者老板等業(yè)務(wù)背景，才不得已使用非優(yōu)秀的方案，我們?nèi)绻麉⒖几?jìng)品的話，最后的結(jié)果也可能難以做出優(yōu)秀的方案。
當(dāng)我們的設(shè)計(jì)方案做好之后，這時(shí)候我們就可以分析我們的設(shè)計(jì)和競(jìng)品的區(qū)別和差異性，從而得到靈感， 優(yōu)化出更好的設(shè)計(jì)。

 

五、項(xiàng)目復(fù)盤 

項(xiàng)目復(fù)盤的意義：

1、提升設(shè)計(jì)師多種設(shè)計(jì)方法能力

2、提升設(shè)計(jì)師整體設(shè)計(jì)思維推導(dǎo)能力

3、提升設(shè)計(jì)師整體匯報(bào)、述職和晉升答辯能力

所以在工作中，每做完一個(gè)重要項(xiàng)目都要做好項(xiàng)目復(fù)盤。這樣的話，既是是階段性工作的總結(jié)，也是為下一次做項(xiàng)目提供更好的經(jīng)驗(yàn)。

復(fù)盤的方法有多種，可以結(jié)合設(shè)計(jì)方法來做總結(jié)，在復(fù)盤的過程中，要體現(xiàn)最終的結(jié)果，即通過數(shù)據(jù)或用戶反饋對(duì)我們?cè)O(shè)計(jì)驗(yàn)證。

也要總結(jié)其中的不足，為之后工作中避免踩坑，并更好的為以后的工作提供服務(wù)。

以上就是交互設(shè)計(jì)從入門到精通的5個(gè)途徑，如果你有其他想法，歡迎在評(píng)論區(qū)留言。

 

原文地址：Echo的設(shè)計(jì)筆記（公眾號(hào)）
作者：Echo
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》交互設(shè)計(jì)從入門到精通的5個(gè)途徑

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(1262)

譯文|交互設(shè)計(jì)不只是流程圖與點(diǎn)擊

seo達(dá)人

如何評(píng)估交互成本并改善用戶體驗(yàn)？

 

圖片

 

交互設(shè)計(jì)技能

每位產(chǎn)品設(shè)計(jì)師都必須掌握三項(xiàng)核心技能：產(chǎn)品思維，視覺設(shè)計(jì)和交互設(shè)計(jì)。

圖片

 

通常，設(shè)計(jì)師應(yīng)該在所有三個(gè)方面都很擅長，且至少要精通兩個(gè)。大多數(shù)設(shè)計(jì)師可以通過在線資源學(xué)習(xí)和項(xiàng)目實(shí)操來掌握視覺設(shè)計(jì)和產(chǎn)品思維。然而交互設(shè)計(jì)卻是設(shè)計(jì)師最難自學(xué)的核心技能。

本文提供了學(xué)習(xí)和提高交互設(shè)計(jì)技能的基礎(chǔ)和框架。

 

定義交互成本

交互設(shè)計(jì)背后的理念基礎(chǔ)是“交互成本”，這經(jīng)常用來衡量一個(gè)產(chǎn)品的可用性。尼爾森·諾曼（Nielsen Norman）將“交互成本”定義為用戶為實(shí)現(xiàn)其目標(biāo)而必須付出的身心努力的總和。

通常，我們希望將交互成本保持在盡可能低的水平。但是這很困難，因?yàn)楫a(chǎn)品涉及的用戶場(chǎng)景越多，難度就越大。支持更多用戶場(chǎng)景和功能會(huì)增加產(chǎn)品信息架構(gòu)(IA)和導(dǎo)航的復(fù)雜性。用戶場(chǎng)景是一系列步驟，是從用戶的目標(biāo)開始到該目標(biāo)完成的整個(gè)流程。

復(fù)雜的信息架構(gòu)會(huì)增加用戶所需的點(diǎn)擊次數(shù)。例如，iOS時(shí)鐘應(yīng)用程序具有以下用戶場(chǎng)景目標(biāo)：打開鬧鐘，添加鬧鐘和編輯鬧鐘。

大體原則是重點(diǎn)放在降低用戶主要使用場(chǎng)景的交互成本。當(dāng)產(chǎn)品容納太多場(chǎng)景時(shí)，就變得更難使用。當(dāng)創(chuàng)建新產(chǎn)品設(shè)計(jì)時(shí)，應(yīng)當(dāng)選擇一個(gè)特定的用戶和使用場(chǎng)景。

 

物理和心理交互成本

大多數(shù)初級(jí)設(shè)計(jì)人員都有這樣的誤解，即交互成本等于用戶完成任務(wù)所需的點(diǎn)擊次數(shù)。但是，它遠(yuǎn)不止于此。交互成本可以分為物理交互成本(PIC) 和心理交互成本(MIC)。

 

圖片

 

 首先找到關(guān)鍵用戶使用流程

最佳實(shí)踐是識(shí)別主要用戶使用場(chǎng)景（即紅色路線，見下圖紅色區(qū)域），并在必要時(shí)以犧牲次要用戶使用場(chǎng)景為代價(jià)來減少其交互成本。

可以使用紅色路由分析(RRA)來評(píng)估哪些用例交互流程對(duì)主要用戶最重要。紅色路線往往很關(guān)鍵，涵蓋了具有多個(gè)步驟的端到端任務(wù)：經(jīng)常被使用，為大量使用而構(gòu)建，提供最大價(jià)值，具有明確的成功標(biāo)準(zhǔn)以及與產(chǎn)品指標(biāo)掛鉤。

 

圖片

 

例如，在Uber app里（打車出行應(yīng)用），用戶的主要使用場(chǎng)景（紅色路線）應(yīng)該是打車，但是他們的常規(guī)路線是添加付款方式。

 

復(fù)雜性守恒定律

根據(jù)Tesler的“復(fù)雜性守恒定律”，所有系統(tǒng)都具有無法刪除或隱藏的固有復(fù)雜性。良好的設(shè)計(jì)可確保由系統(tǒng)而不是用戶承擔(dān)盡可能多的復(fù)雜性。

 

圖片

 

首先減少主要用戶場(chǎng)景中的交互成本，然后將復(fù)雜性負(fù)擔(dān)轉(zhuǎn)移到最不重要的場(chǎng)景上。Tesler認(rèn)為，寧可讓設(shè)計(jì)師和工程師多花費(fèi)一周左右的時(shí)間來降低應(yīng)用程序的復(fù)雜性，也不要讓數(shù)百萬的用戶多花哪怕一分鐘。

注意，不要將界面簡化到過于抽象。一個(gè)常見的陷阱是降低物理交互成本(PIC)，卻以心理交互成本(MIC)為代價(jià)-我在看你呢，蘋果公司。

當(dāng)系統(tǒng)處理了盡可能多的固有復(fù)雜性時(shí)，應(yīng)當(dāng)將其余復(fù)雜性從主要場(chǎng)景轉(zhuǎn)移到次要場(chǎng)景中去。因此，大多數(shù)字產(chǎn)品的設(shè)置都很復(fù)雜。在大多數(shù)情況下，設(shè)置通常是次要使用場(chǎng)景，很少使用。

 

心理交互成本（MIC）

初級(jí)設(shè)計(jì)師通常會(huì)忽略心理交互成本(MIC)，他們只關(guān)注物理交互成本（PIC）。

你可能會(huì)在可用性差的產(chǎn)品中注意到的心理交互成本(MIC)。初級(jí)設(shè)計(jì)師通常會(huì)忽略心理交互成本(MIC)，他們只關(guān)注物理交互成本(PIC)，包括復(fù)雜的導(dǎo)航、密集的指令、非常規(guī)的思維模型和交互模式等。

 

注意和記憶

心理交互成本(MIC)的兩個(gè)最重要的組成部分是注意力和記憶力。

當(dāng)一項(xiàng)任務(wù)需要過多的注意力或記憶才能完成時(shí)，它將具有較高的心理交互成本(MIC)，從而降低了可用性。

一些增加注意力成本或轉(zhuǎn)移注意力的常見元素包括小彈窗，內(nèi)容模塊劃分，引人注目的視覺效果以及與用戶當(dāng)前任務(wù)無關(guān)的動(dòng)畫效果。用戶很容易被這些元素分心。確保當(dāng)他們嘗試完成任務(wù)時(shí)，不要將他們的注意力吸引到其他地方。

 

評(píng)估注意力

如果要評(píng)估界面對(duì)心理交互成本(MIC)的關(guān)注程度，可考慮進(jìn)行眼動(dòng)追蹤研究(ETS)。使用ETS不僅推斷用戶的位置，還可以推斷他們的想法。

ETS的兩個(gè)和眼睛相關(guān)的運(yùn)動(dòng)指標(biāo)：“注視”和“掃視”。當(dāng)用戶的瞳孔在界面元素上停留足夠長時(shí)間時(shí)，就會(huì)發(fā)生注視。眼球運(yùn)動(dòng)時(shí)會(huì)發(fā)生“掃視”運(yùn)動(dòng)-在界面內(nèi)的各個(gè)區(qū)域之間飛梭。

如果ETS揭示了許多與任務(wù)無關(guān)的跳躍式運(yùn)動(dòng)軌跡，可能是因?yàn)榻缑娣稚⒘俗⒁饬ΑTS結(jié)果可以幫助您了解有什么干擾和不必要的東西導(dǎo)致用戶錯(cuò)過了界面中的關(guān)鍵信息。

 

工作記憶

對(duì)于不同類型的記憶都有廣泛的分類。就設(shè)計(jì)師的角色和責(zé)任而言，工作記憶（短期記憶的一部分）是最相關(guān)的。最短的記憶類型稱為工作記憶，通常在任務(wù)過程中僅持續(xù)幾秒鐘。換句話說，當(dāng)我們參與其他認(rèn)知過程時(shí)，我們的工作記憶負(fù)責(zé)我們可以掌握的信息。

米勒定律指出，普通人一次只能在他們的工作記憶中保留5-11件物品。完成產(chǎn)品中的任務(wù)所需的工作記憶與強(qiáng)加給用戶的心理互動(dòng)成本(MIC)負(fù)擔(dān)成正比。

相反，任務(wù)不應(yīng)要求用戶隨時(shí)在其工作記憶中保留七個(gè)以上的項(xiàng)目。在極少數(shù)情況下，要求用戶在其記憶中保存11個(gè)以上的項(xiàng)目，請(qǐng)使用“區(qū)塊”減輕其精神負(fù)擔(dān)。區(qū)塊化是指將信息分組。

例如，我們記住電話號(hào)碼為XXX-XXXX而不是XXXXXXX。記住兩個(gè)部分的數(shù)字要容易得多，而不要記住一系列七個(gè)單獨(dú)的單元。

與注意力和記憶有關(guān)的另一個(gè)考慮因素是“?？硕伞薄４藯l定律指出，“做出決定所需的時(shí)間會(huì)隨著選擇的數(shù)量和復(fù)雜性而增加。

 

圖片

 

過多選擇讓用戶不知所措，應(yīng)盡可能突出顯示最佳選擇。將復(fù)雜的任務(wù)分解為較小的步驟，即在適當(dāng)?shù)臅r(shí)候使用漸進(jìn)式披露（例如過長的表單采用分區(qū)塊，分步驟的形式進(jìn)行設(shè)計(jì)）。

 

物理交互成本（PIC）

常見的物理交互成本(PIC)因素包括到達(dá)距離和目標(biāo)寬度（費(fèi)茨定律），用戶輸入的數(shù)量以及完成任務(wù)所需的操作等。

費(fèi)茨定律指出，擊中目標(biāo)的時(shí)間（例如，單擊按鈕）是距輸入設(shè)備的距離和目標(biāo)的擊中框?qū)挾鹊暮瘮?shù)。

 

圖片

 

例如，如果鼠標(biāo)光標(biāo)很遠(yuǎn)且按鈕很小，則單擊桌面上的按鈕將花費(fèi)更長的時(shí)間。

評(píng)估物理交互成本(PIC)的最佳方法是“任務(wù)分析”和檢查可用性指標(biāo)，例如“任務(wù)時(shí)間”。任務(wù)分析的在于完成用戶目標(biāo)所需的任務(wù)數(shù)量，這些任務(wù)的頻率，物理要求和任務(wù)時(shí)間。

 

交互路徑和動(dòng)機(jī)

在某些情況下，用戶可能采取多種路徑來實(shí)現(xiàn)其目標(biāo)。用戶根據(jù)“預(yù)期效用”的概念來決定采用哪種路徑。

定義為：預(yù)期效用=預(yù)期收益-預(yù)期的交互成本。

換句話說，用戶權(quán)衡每個(gè)操作的收益和成本，然后選擇收益與成本之間最佳平衡的路徑。用戶趨向于具有最低的估計(jì)交互成本的路徑。即使存在成本較低的路徑，如果該路徑不直觀或不熟悉，由于心理交互成本(MIC)較低，他們最終也會(huì)選擇他們更熟悉的路徑。

具有較高動(dòng)力（例如，由于品牌運(yùn)營）的用戶更有可能承擔(dān)較高的互動(dòng)成本以實(shí)現(xiàn)其目標(biāo)。假如蘋果公司的網(wǎng)站的交互成本很高，那么用戶可能仍有足夠的動(dòng)力去完成他們的任務(wù)。然而，如果用戶購買常規(guī)產(chǎn)品時(shí)付款流程的交互成本很高的話，那么他們很可能去其它網(wǎng)站購買。

 

結(jié)論

理解和評(píng)估交互成本對(duì)于任何現(xiàn)代產(chǎn)品設(shè)計(jì)師來說都是重要的技能。期望設(shè)計(jì)師們能超越通常的交互設(shè)計(jì)考量，更多的研究和運(yùn)用心理交互成本(MIC)和物理交互成本(PIC)的分析。

我們應(yīng)盡可能減少交互成本，但是，當(dāng)必須做出權(quán)衡時(shí)，要保證首要基礎(chǔ)用戶使用場(chǎng)景的交互成本足夠低。

第一步就是創(chuàng)建一套規(guī)則和框架，測(cè)試和評(píng)估用戶的交互成本。

注：

原文作者Richard Yang，

Interaction design is more than just user flows and clicks

譯文中有部分內(nèi)容刪減。

 

原文地址：百度MEUX（公眾號(hào)）

作者：搜索用戶體驗(yàn)

 轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》譯文|交互設(shè)計(jì)不只是流程圖與點(diǎn)擊

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




評(píng)論(0) 瀏覽(1026)

B端交互設(shè)計(jì)過程中的思考

seo達(dá)人


前言

寫這篇文章的初衷是由于工作中帶新人發(fā)現(xiàn)他們從拿到一個(gè)需求不知道如何下手開展自己的工作，即使開展了也是丟三落四，需要反復(fù)回爐重造。希望通過這篇文章可以對(duì)他們有一些幫助的同時(shí)也是對(duì)自己工作的一個(gè)思考總結(jié)。有什么不足之處還請(qǐng)各位見諒，也可以和我一起探討一下。
 
由于我的工作內(nèi)容基本都是設(shè)計(jì)一些B端產(chǎn)品，并且團(tuán)隊(duì)項(xiàng)目中沒有產(chǎn)品經(jīng)理的崗位，經(jīng)常的情況就是直接對(duì)接客戶，接觸最原始的需求，這些需求很可能是客戶的一段話，也可能是一個(gè)需求文檔，所以對(duì)于我們?cè)O(shè)計(jì)人員理解需求的要求就比較高了。我常常跟別人說，一定要多思考。因?yàn)樵O(shè)計(jì)師所有的產(chǎn)出物都依賴于我們的思維。在動(dòng)手之前一定要多動(dòng)腦。

 

01.B端產(chǎn)品設(shè)計(jì)原則  

B端產(chǎn)品最重要的價(jià)值應(yīng)該就是降本增效了。那么我們?cè)O(shè)計(jì)師如何通過專業(yè)的角度，去發(fā)現(xiàn)問題，解決問題，實(shí)現(xiàn)企業(yè)通過產(chǎn)品達(dá)到降本增效的目的呢？
 
我總結(jié)了十個(gè)設(shè)計(jì)原則：可用性、易用性、可見性、明確性、一致性、合理性、習(xí)慣性、便捷性、高效性、擴(kuò)展性。
 
可用性：我們做的任何產(chǎn)品和需求都是給人使用，解決某人在某種場(chǎng)景下的某個(gè)問題的，那就要可實(shí)現(xiàn)可用。舉個(gè)例子：小明是個(gè)光頭，你走過去跟他說，洗剪吹了解一下。那他一定不會(huì)搭理你。對(duì)他來說當(dāng)下你的建議沒有可用性。
 
易用性：我們經(jīng)常會(huì)說這個(gè)東西太好用了，這個(gè)東西設(shè)計(jì)的反人類，太難用了。這就是易用性的價(jià)值。直接影響用戶體驗(yàn)的問題。
 
可見性:我認(rèn)為可見性的問題就是信息結(jié)構(gòu)分類分層的問題，重要的信息是否清晰可見，可以快速引導(dǎo)用戶當(dāng)前在什么場(chǎng)景能做什么事。
 
圖片
 
明確性：產(chǎn)品信息內(nèi)容的準(zhǔn)確表達(dá)，用詞明確。
圖片
 
一致性:產(chǎn)品的跳轉(zhuǎn)邏輯，交互方式，結(jié)構(gòu)布局，語言體系都要保持統(tǒng)一，并且和品牌形象保持一致，創(chuàng)建用戶的認(rèn)知和使用習(xí)慣。減少用戶的學(xué)習(xí)成本。
圖片
 
合理性:業(yè)務(wù)流程符合操作邏輯，交互設(shè)計(jì)和視覺設(shè)計(jì)層符合規(guī)范，遵循一定的現(xiàn)實(shí)物理特性。
 
習(xí)慣性 ： B端產(chǎn)品很大一部分需求是將一些線下流程的線上化處理，所以在設(shè)計(jì)業(yè)務(wù)流程的時(shí)候要考慮用戶處理流程的習(xí)慣性問題以及用戶使用平臺(tái)操作的習(xí)慣性問題。比如我們習(xí)慣把五角星的圖標(biāo)識(shí)別為收藏功能。就不要打破用戶的這種認(rèn)知習(xí)慣。
 
便捷性：基于B端產(chǎn)品的業(yè)務(wù)復(fù)雜性，我們要適當(dāng)?shù)脑谀承┑胤教峁┛旖莶僮?，提高用戶的操作便捷性。比如?dǎo)航的快捷搜索功能。
 
高效性：B端產(chǎn)品里用戶的使用目標(biāo)就是高效處理任務(wù)。所以平臺(tái)在功能設(shè)計(jì)上要盡量簡化操作，能一步完成的事一定不用二步，提高用戶的工作效率。
圖片
 
擴(kuò)展性：在設(shè)計(jì)框架和內(nèi)容的過程中要考慮后續(xù)擴(kuò)展的可能性，有些框架內(nèi)容如果有增加或者修改要怎么處理和展現(xiàn)。
 
接下來我們就結(jié)合B端產(chǎn)品的特點(diǎn)圍繞這十個(gè)原則，講述一下交互設(shè)計(jì)過程中的思考總結(jié)。
 
 

02.設(shè)計(jì)目的和業(yè)務(wù)邏輯的理解  

積極有效的溝通貫穿整個(gè)設(shè)計(jì)過程！一定要溝通！溝通！溝通！我們?cè)O(shè)計(jì)的過程要與項(xiàng)目組的很多角色對(duì)接，客戶，需求，開發(fā)，測(cè)試，每個(gè)角色站的角度不同，考慮問題的方向就不同，積極有效的溝通可以避免走很多彎路。一定不要自己悶頭想當(dāng)然，你以為的并不是你以為的！簡單說就是有疑問就找相關(guān)負(fù)責(zé)人溝通?！按蚱粕冲亞柕降住痹谶@里非常適用。
 
首先我們要了解需求（也可能是產(chǎn)品，這里就拿需求來講）的背景，結(jié)構(gòu)和內(nèi)容。

 

1.為什么做這個(gè)需求？

這個(gè)需求從何而來？這個(gè)問題有助于我們了解它產(chǎn)生的原因，挖掘真實(shí)的需求。它是為解決什么問題而產(chǎn)生的，跟它所關(guān)聯(lián)的內(nèi)容有哪些？這個(gè)需求是屬于新增的還是優(yōu)化的，還是bug修復(fù)？如果是優(yōu)化的需求，是什么原因要做這個(gè)優(yōu)化？方便我們快速找到問題，做出優(yōu)化方案。比如我們發(fā)現(xiàn)有一些需求是隸屬于某一個(gè)系統(tǒng)下的，那么我們?cè)O(shè)計(jì)的時(shí)候就要遵循一下以往的設(shè)計(jì)規(guī)范與原則。保留用戶的操作習(xí)慣等等一些繼承的問題。

 

2.這個(gè)需求有什么功能？

大概了解一下這個(gè)需求要實(shí)現(xiàn)哪些功能？這些功能的復(fù)雜程度是怎樣的？（這里需要跟開發(fā)人員也溝通一下大概實(shí)現(xiàn)的難度和周期。）實(shí)現(xiàn)的周期是多少（我們要根據(jù)周期制定我們?cè)O(shè)計(jì)的方案）？要在哪些終端上展現(xiàn)？權(quán)限是怎樣劃分的？用戶角色有哪些？

 

3.怎么實(shí)現(xiàn)這些功能？

這些功能要通過哪些技術(shù)手段實(shí)現(xiàn)？實(shí)現(xiàn)的方法有很多，我們要判斷在資源，時(shí)間，成本，實(shí)現(xiàn)難度，用戶體驗(yàn)等等的各種因素下用那種實(shí)現(xiàn)方案更優(yōu)？這個(gè)階段需要跟各方人員共同商議出一個(gè)解決方案。當(dāng)然這是一個(gè)比較概括的方案。我們往往會(huì)制定幾套方案，在實(shí)際執(zhí)行的過程中隨時(shí)調(diào)整這個(gè)方案。

 

結(jié)構(gòu)梳理

這里就需要用到思維導(dǎo)圖了。我們要對(duì)整個(gè)需求的信息架構(gòu)做梳理。包括功能結(jié)構(gòu)，業(yè)務(wù)流程，跳轉(zhuǎn)邏輯。

 

1.功能結(jié)構(gòu)

功能結(jié)構(gòu)其實(shí)就是對(duì)整個(gè)需求的框架結(jié)構(gòu)的呈現(xiàn)。根據(jù)需求功能劃分框架結(jié)構(gòu)。主要分為樹形結(jié)構(gòu)，矩形結(jié)構(gòu)，線性結(jié)構(gòu)，信息結(jié)構(gòu)。
 
樹形結(jié)構(gòu)：從上到下的信息架構(gòu)完整地容納需求的所有內(nèi)容?；締挝皇枪?jié)點(diǎn)。比如個(gè)人設(shè)置是一個(gè)大的模塊單元，里面包含基本信息設(shè)置/賬號(hào)密碼設(shè)置等。適用于層級(jí)較深，每個(gè)單元模塊之間保持一定的獨(dú)立性，呈樹形結(jié)構(gòu)的信息內(nèi)容系統(tǒng)。
矩形結(jié)構(gòu)：這種結(jié)構(gòu)用戶可以帶著不同的需求快速找到自己想要的內(nèi)容。不同分類下的內(nèi)容相互穿插。適用于內(nèi)容的標(biāo)簽分類篩選系統(tǒng)。例如表格頁面的標(biāo)簽分類篩選功能。
 
線性結(jié)構(gòu)：單向流程結(jié)構(gòu)。適用于專注度高，業(yè)務(wù)流程單一的結(jié)構(gòu)，用戶在當(dāng)前頁要么返回，要么下一步，只能沿著一條線往下進(jìn)行。例如注冊(cè)，新建內(nèi)容等場(chǎng)景。
信息結(jié)構(gòu)：適合簡單的信息呈現(xiàn)，按照信息的重要程度做分層處理，劃分出結(jié)構(gòu)。

 

2.業(yè)務(wù)流程

這一步需要畫出業(yè)務(wù)流程圖。
業(yè)務(wù)處理的每一步過程去向，下一步的處理邏輯和反饋結(jié)果，返回路徑，業(yè)務(wù)角色權(quán)限劃分，操作流程路徑是否一致？異常情況，例如中斷的處理與提示。
圖片

 

3.跳轉(zhuǎn)邏輯

在分析跳轉(zhuǎn)邏輯之前要明確業(yè)務(wù)功能之間的關(guān)聯(lián)，是上下級(jí)關(guān)聯(lián)關(guān)系，還是分屬同級(jí)模塊？或者是頁面操作的新增，修改，編輯，詳情等內(nèi)容？頁面層級(jí)關(guān)系決定跳轉(zhuǎn)邏輯，同樣層級(jí)關(guān)系的跳轉(zhuǎn)邏輯&跳轉(zhuǎn)方式要保持一致。業(yè)務(wù)流程如何跳轉(zhuǎn)才能清晰引導(dǎo)用戶？一個(gè)頁面中操作會(huì)不會(huì)有關(guān)聯(lián)或沖突？這些問題都要在這一步考慮清楚。
 
常見的跳轉(zhuǎn)方式有直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)，側(cè)滑，彈窗等，在設(shè)計(jì)時(shí)需要考慮好其中的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，從而做出最合適的設(shè)計(jì)。具體的跳轉(zhuǎn)方式的使用這里就不詳細(xì)講解了。網(wǎng)上有很多相關(guān)的教程。

 

 03.交互設(shè)計(jì)  

這一步我們需要交付交互設(shè)計(jì)文檔和線框圖。這一步一邊做一邊也要及時(shí)跟開發(fā)和需求去溝通，一方面確認(rèn)自己的業(yè)務(wù)理解和展現(xiàn)形式符合業(yè)務(wù)邏輯和客戶的要求。一方面確認(rèn)你的設(shè)計(jì)方案開發(fā)可以有效高效地實(shí)現(xiàn)（很多設(shè)計(jì)小伙伴說我的設(shè)計(jì)方案很好呀，只是開發(fā)沒能力實(shí)現(xiàn)。emmm….）。每個(gè)公司的開發(fā)團(tuán)隊(duì)能力都不一樣，要根據(jù)團(tuán)隊(duì)里的實(shí)際情況去做設(shè)計(jì)推動(dòng)項(xiàng)目的落地。畢竟我們做的設(shè)計(jì)還是要讓人用起來的呀。所以懂一些開發(fā)知識(shí)是很有必要的，到底真的是開發(fā)哥哥想偷懶，還是真的有難度，豈能躲過我們的火眼金睛??！
 
交互設(shè)計(jì)這件事如果展開說恐怕要說三天三夜也說不完。我這里只給大家提供一個(gè)設(shè)計(jì)思路，大致需要注意的一些關(guān)鍵點(diǎn)。詳細(xì)的交互設(shè)計(jì)知識(shí)，還需要大家慢慢了解學(xué)習(xí)。尤其是想專注做交互設(shè)計(jì)的伙伴們。
 
我們?cè)谳敵鼋换ピO(shè)計(jì)的過程，大致要從信息載體，信息設(shè)計(jì)，導(dǎo)航設(shè)計(jì)，權(quán)限設(shè)計(jì)，圖表設(shè)計(jì)，組件設(shè)計(jì)，反饋機(jī)制，語言設(shè)計(jì)，特殊場(chǎng)景，動(dòng)效設(shè)計(jì)這幾個(gè)方面去考慮。
 
注意設(shè)計(jì)過程中交互時(shí)的操作狀態(tài)是否明確合理，交互效果是否可以實(shí)現(xiàn)以及不同終端的設(shè)計(jì)規(guī)范和原則。

 

1.信息載體

我們要清楚我們做的需求是要在哪些終端上展現(xiàn)？不同的終端有不同的交互方式。是pc端還是移動(dòng)端或者是車載設(shè)備，電子屏幕？是ios系統(tǒng)還是安卓系統(tǒng)？我們的設(shè)計(jì)要符合不同系統(tǒng)和平臺(tái)的設(shè)計(jì)規(guī)范。橫豎屏幕要如何展現(xiàn)？分辨率都有哪些？如何適配不同分辨率下的展現(xiàn)效果？是否需要版本適配？是否需要硬件交互：話筒，藍(lán)牙，定位，相機(jī)等。是否需要硬件聯(lián)動(dòng)：打印機(jī)，出票機(jī)等。

 

2.信息設(shè)計(jì)

B端的信息設(shè)計(jì)包括信息來源，信息分類，信息狀態(tài)，信息顯示等。
信息來源：我們要明確信息的來源是哪里？后臺(tái)傳輸還是前臺(tái)展示還是用戶錄入。
信息獲取的方式是什么？自動(dòng)更新還是操作觸發(fā)？刷新的方式是手動(dòng)還是自動(dòng)？
信息分類：根據(jù)業(yè)務(wù)需求，劃分信息類型，顯示層級(jí)，由高到低，按照設(shè)計(jì)原則規(guī)劃信息展現(xiàn)的比重和方式，把數(shù)據(jù)結(jié)構(gòu)化。
圖片
 
信息狀態(tài)：要考慮信息的默認(rèn)狀態(tài)，為空狀態(tài)，常規(guī)狀態(tài)，內(nèi)容過期狀態(tài)下應(yīng)該怎么顯示和布局。
 
信息顯示：信息的顯示要考慮信息的極限值，非最優(yōu)展示效果，重復(fù)或短缺（顯示不全怎么辦）情況，異常顯示：敏感詞，內(nèi)容違規(guī)，數(shù)據(jù)獲取異常，加載時(shí)間過長等情況。

 

3.導(dǎo)航設(shè)計(jì)

導(dǎo)航的結(jié)構(gòu)決定了整個(gè)需求的架構(gòu)系統(tǒng)，頁面層級(jí)。簡單清晰的導(dǎo)航可以讓用戶快速清晰地獲取整個(gè)需求的功能和內(nèi)容概覽。一般根據(jù)導(dǎo)航層級(jí)和內(nèi)容的不同，我們會(huì)分為橫向?qū)Ш?，豎向?qū)Ш?，?biāo)簽導(dǎo)航，組合導(dǎo)航等方式去安排布局。功能復(fù)雜的導(dǎo)航應(yīng)提供搜索與快捷菜單。

 

4.權(quán)限設(shè)計(jì)

角色權(quán)限影響功能和數(shù)據(jù)的展現(xiàn)。要注意角色類型的清晰劃分。角色能不能轉(zhuǎn)變？怎么創(chuàng)建角色轉(zhuǎn)變的系統(tǒng)感知？

 

5.圖表設(shè)計(jì)

圖表的內(nèi)容分為：標(biāo)題，指標(biāo)，指標(biāo)值。我們要根據(jù)業(yè)務(wù)需要選擇合適的圖表形式展現(xiàn)圖表的內(nèi)容。比如柱狀圖一般適合表示各個(gè)指標(biāo)之間的對(duì)比關(guān)系，折線圖一般適合一段時(shí)間內(nèi)的指標(biāo)變化趨勢(shì)。還要根據(jù)頁面布局空間大小選擇合適的展現(xiàn)形式。確定指標(biāo)的枚舉值，指標(biāo)值的范圍。圖表之間的關(guān)聯(lián)性等。

 

6.組件設(shè)計(jì)

這里就不一一列舉了，具體的分類和使用方法可以在ANTD的官網(wǎng)查看一下就知道了。
https://ant.design/docs/spec/overview-cn
組件的交互形式按照使用場(chǎng)景，保證功能的全面性，避免漏掉組件交互狀態(tài)。
這部分我會(huì)在以后的文章里詳細(xì)總結(jié)。

 

7.反饋機(jī)制

反饋分為系統(tǒng)反饋給用戶的，用戶對(duì)系統(tǒng)的主動(dòng)反饋，系統(tǒng)通知。
用戶反饋要設(shè)置好入口與方式。防止反饋對(duì)用戶的干擾，簡化反饋流程。
系統(tǒng)的通知要確認(rèn)好方式，是郵件，信息還是其他。通知時(shí)間，內(nèi)容格式的統(tǒng)一規(guī)范。
 
操作后的結(jié)果反饋時(shí)間，方式，位置的設(shè)定。操作異常的提示，公告引導(dǎo)的提示，錯(cuò)誤糾正。
 
反饋機(jī)制要做到簡單明確，輕重得當(dāng)，前后統(tǒng)一。既防止用戶的誤操作，又做到人性化的提醒作用。

 

8.語言設(shè)計(jì)

平臺(tái)的語言表述要統(tǒng)一，提示用語，稱謂，菜單與命令用語，標(biāo)點(diǎn)格式，產(chǎn)品和功能名稱要保持一致性，符合操作場(chǎng)景，能明確引導(dǎo)下一步操作，要有一定的人性化表達(dá)。以人為本，風(fēng)格恰當(dāng)。B端產(chǎn)品的語言體系要區(qū)別于其他產(chǎn)品，大眾化詞語難以達(dá)到業(yè)務(wù)術(shù)語的精煉效果，強(qiáng)制大眾化反而不易理解。

 

9.特殊場(chǎng)景

注意一些極端情況下的設(shè)計(jì)，比如惡意使用的場(chǎng)景考慮，我們的使用場(chǎng)景和規(guī)則都是基于正常的使用場(chǎng)景去做設(shè)計(jì)，但是不能排除就是有些人想跟你唱反調(diào)，我就是要這么做，系統(tǒng)該怎么反應(yīng)？如何處理這種操作？內(nèi)容缺省異常狀態(tài)該怎么設(shè)計(jì)？中斷情況，比如硬件故障，斷網(wǎng)，用戶退出，系統(tǒng)該如何處理當(dāng)前的場(chǎng)景？設(shè)計(jì)的過程中不要漏掉這部分的容錯(cuò)和防錯(cuò)機(jī)制。
 
還有一些其他因素的考慮，比如一些情感趣味性，品牌傳達(dá)，商業(yè)性的融合設(shè)計(jì)。

 

10.動(dòng)效設(shè)計(jì)

在設(shè)計(jì)這部分內(nèi)容的時(shí)候主要考慮轉(zhuǎn)場(chǎng)過渡方式的選擇以及節(jié)奏的把控。具體的設(shè)計(jì)方法筆者會(huì)在以后的分享里跟大家碎碎念，一起來探討。也會(huì)出一部分動(dòng)效的作品給大家。希望大家到時(shí)候能關(guān)注。筆芯～

 

 04.視覺設(shè)計(jì)  

這部分想聊一個(gè)問題：總是會(huì)有非設(shè)計(jì)人員對(duì)你的界面指指點(diǎn)點(diǎn)，我相信幾乎每個(gè)設(shè)計(jì)師都會(huì)遇到這個(gè)問題。我們要用專業(yè)的視角去告訴別人，你為什么這么做？而不是憑感覺做設(shè)計(jì)，哪怕是界面上的一根線，也要做到有理有據(jù)。給予別人專業(yè)的建議，一個(gè)圓和一個(gè)方形，那個(gè)更適合放在界面當(dāng)中，為什么？會(huì)讓人更理解你的設(shè)計(jì)。我們要具有解釋設(shè)計(jì)作品的能力。
 
視覺設(shè)計(jì)要運(yùn)用到很多相關(guān)的知識(shí)體系。
比如人的視覺焦點(diǎn)：會(huì)沿著f曲線運(yùn)動(dòng)，人的大腦處理圖形的速度遠(yuǎn)大于文字。
注意設(shè)計(jì)過程中的對(duì)比和一致性，配色，排版，文字，間距，圖形的運(yùn)用。
比如柵格系統(tǒng)，可以使你的界面布局保持一致，整潔和規(guī)范。
 
B端系統(tǒng)的配色要注意紅綠色的使用。因?yàn)橐话銜?huì)用這種顏色區(qū)分一些業(yè)務(wù)等級(jí)，隨便的使用可能會(huì)造成一定的誤解。整套的配色方案應(yīng)該和品牌形象結(jié)合在一起，根據(jù)顏色的性格，明確主色，輔色，點(diǎn)綴色，注意不同色塊體積的運(yùn)用。
排版要做適當(dāng)?shù)牧舭祝瑢?duì)齊。文字的顏色、大小，字重區(qū)分層級(jí)，間距。
整個(gè)系統(tǒng)的視覺表達(dá)風(fēng)格統(tǒng)一。 

 

原文地址：墨染動(dòng)效（公眾號(hào)）

作者：喬公子

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》B端交互設(shè)計(jì)過程中的思考

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



評(píng)論(0) 瀏覽(1364)

從微信朋友驗(yàn)證功能迭代，看交互設(shè)計(jì)對(duì)產(chǎn)品的價(jià)值

seo達(dá)人


一、功能背景

隨著社交網(wǎng)絡(luò)的擴(kuò)大，用戶網(wǎng)絡(luò)好友越來越多，但是這些好友并不是真正的朋友。久而久之用戶開始陷入社交恐慌，不愿意發(fā)朋友圈或者發(fā)朋友圈時(shí)反復(fù)斟酌。
于是微信在添加朋友和朋友驗(yàn)證時(shí)增加了關(guān)系分級(jí)設(shè)置，有利于減少用戶發(fā)圈的心理壓力，提高發(fā)圈積極性。
其實(shí)該功能并不是新功能，微信7.0.9版本已經(jīng)上線了，只不過功能并沒有植入在朋友驗(yàn)證頁面，信息層級(jí)比較深，導(dǎo)致用戶可能不知道或者懶得設(shè)置。
圖片
從8.0版本開始，該功能添加到了朋友和朋友驗(yàn)證頁面，強(qiáng)化了曝光展示，方便用戶快速完成朋友權(quán)限設(shè)置。

 

二、設(shè)計(jì)迭代

1、初始版本
最初上線時(shí)，“朋友權(quán)限”功能需要用戶手動(dòng)選擇，并將“僅聊天”作為了首選項(xiàng)。用戶選擇了“朋友圈”選項(xiàng)，會(huì)展示關(guān)聯(lián)信息設(shè)置。
“完成”按鈕延續(xù)了7.0版本的布局，放置在右上角，根據(jù)選項(xiàng)是否選擇，增加了按鈕狀態(tài)區(qū)分。
圖片

 

但是無論組件形式還是視覺表現(xiàn)，用戶都不太容易感知到朋友權(quán)限是可操作項(xiàng)和必選項(xiàng)。加之7.0版本培養(yǎng)的行為習(xí)慣，用戶不會(huì)主動(dòng)瀏覽完所有內(nèi)容后再進(jìn)行操作，而是直接點(diǎn)擊右上角“完成”按鈕。
用戶的行為過程就變成了“點(diǎn)擊按鈕>>發(fā)現(xiàn)錯(cuò)誤提示信息>>完成權(quán)限選擇>>二次點(diǎn)擊按鈕“，無形之中增加了用戶交互成本。
圖片

 

對(duì)于好友數(shù)量少的用戶，或許沒有切身體會(huì)。但是對(duì)于一些引流號(hào)，每天都要添加好友時(shí)，則增加了操作步驟，影響了行為效率。
下面是我從網(wǎng)絡(luò)上找到的一些用戶反饋，雖然用戶數(shù)量不多，但是代表了部分用戶的心聲。
圖片

 

2、版本迭代記錄
緊接著朋友驗(yàn)證頁面開始了密集更新，粗略估計(jì)已經(jīng)迭代了3～4個(gè)版本。

 

版本迭代1
圖片

 

1）增加標(biāo)簽功能，提高用戶效率
為了更好的管理好友關(guān)系，朋友驗(yàn)證頁面增加了“標(biāo)簽”功能，并將標(biāo)簽平鋪展示開來，方便用戶快速選擇。

 

2）優(yōu)化布局
“完成”按鈕從右上角轉(zhuǎn)移到了頁面下方，用戶視覺動(dòng)線更加順暢，有利于引導(dǎo)用戶完成內(nèi)容瀏覽，操作更加便捷。
從產(chǎn)品角度出發(fā)，朋友友權(quán)限首選項(xiàng)調(diào)整為了“朋友圈”。因?yàn)樽鳛橐豢钌缃划a(chǎn)品，還是希望用戶更多的交流互動(dòng)。

 

版本迭代2
圖片

 

1）精簡頁面信息
或許是數(shù)據(jù)顯示設(shè)置標(biāo)簽的用戶數(shù)量并不多，平鋪展示反而增加了頁面的信息量?；蛟S是考慮到小屏幕手機(jī)空間有限，標(biāo)簽平鋪影響到“完成”按鈕在一屏內(nèi)露出，需要上下滾動(dòng)才能完全查看屏幕內(nèi)容，增加了用戶的行為成本。
于是標(biāo)簽功能弱化為入口和選擇結(jié)果展示，引導(dǎo)用戶跳轉(zhuǎn)二級(jí)頁面操作，減少了頁面的信息負(fù)荷。

 

2）統(tǒng)一展示樣式，強(qiáng)化功能引導(dǎo)
朋友權(quán)限調(diào)整了視覺樣式，背景色與其他可操作項(xiàng)統(tǒng)一，增加必選說明和操作選擇框，引導(dǎo)用戶做出選擇。但是必選功能還是讓用戶無法理解，為什么聯(lián)系人較多，就要手動(dòng)設(shè)定權(quán)限呢？

 

3）增加防錯(cuò)設(shè)計(jì)，減少用戶錯(cuò)誤幾率
用戶未進(jìn)行出朋友權(quán)限選擇時(shí)，“完成”按鈕處于不可用狀態(tài)，有效防止用戶直接點(diǎn)擊的錯(cuò)誤。

 

版本迭代3
圖片
經(jīng)過一段時(shí)間的學(xué)習(xí)，用戶已經(jīng)形成了功能認(rèn)知。最終微信將“手動(dòng)設(shè)置”調(diào)整為了“默認(rèn)選擇”。既保留了用戶的選擇權(quán)，又簡化用戶操作，并且精簡了選項(xiàng)信息內(nèi)容，與朋友權(quán)限頁面文案保持一致，便于用戶瀏覽和理解。

 

三、設(shè)計(jì)總結(jié)

1）產(chǎn)品設(shè)計(jì)不一定必須一步到位
為什么微信在初始版本中不采用系統(tǒng)默認(rèn)選擇，提高用戶效率呢？是設(shè)計(jì)師沒想到嗎？
我個(gè)人認(rèn)為“系統(tǒng)默認(rèn)選擇”必然是最初的設(shè)計(jì)方案之一，之所以初始版本強(qiáng)制用戶做出選擇，或許是產(chǎn)品為了收集用戶真實(shí)行為數(shù)據(jù)、培養(yǎng)用戶對(duì)新功能的認(rèn)知而制定的發(fā)展策略。所以交互設(shè)計(jì)需要服務(wù)于整個(gè)產(chǎn)品發(fā)展策略和目標(biāo)。

 

2）用戶是懶的
大多數(shù)用戶喜歡簡單，對(duì)于某些信息會(huì)“視而不見”。因此某些場(chǎng)景下，需要增加一定的行為障礙點(diǎn)，引起用戶的關(guān)注，培養(yǎng)用戶認(rèn)知。當(dāng)然前提是用戶對(duì)你的產(chǎn)品有足夠的依賴性，否則就可能放棄你的產(chǎn)品了。

 

3）設(shè)計(jì)是不斷試錯(cuò)迭代的
設(shè)計(jì)師可以通過各種設(shè)計(jì)策略去影響用戶行為，但是需要充分考慮用戶認(rèn)知、行為習(xí)慣、操作效率、學(xué)習(xí)成本等多方面的因素。只有通過不斷地迭代，才能找到真正滿足用戶需求的設(shè)計(jì)方案，即使是一個(gè)小功能。

 

寫在最后
說到功能本身，對(duì)于我個(gè)人而言確實(shí)挺雞肋的。我不是朋友圈的重度用戶，也不會(huì)去設(shè)置朋友圈的權(quán)限。但是每次通過好友驗(yàn)證時(shí)，都要面對(duì)著一行行的內(nèi)容信息，忍不住會(huì)多看幾眼，生怕出現(xiàn)什么設(shè)置項(xiàng)變動(dòng)，影響到好友關(guān)系。
大家是怎么這個(gè)功能的呢？歡迎留言評(píng)論交流～

 

原文地址：子牧UXD（公眾號(hào)）
作者：子牧先生
   

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》從微信朋友驗(yàn)證功能迭代，看交互設(shè)計(jì)對(duì)產(chǎn)品的價(jià)值

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




評(píng)論(0) 瀏覽(1129)

詳解｜交互設(shè)計(jì)中的色彩搭配，這樣更有效！

seo達(dá)人

圖片

△ 豆瓣 App 電影榜單卡片

 

顏色的搭配其實(shí)是一個(gè)非常值得研究的問題。深入剖析的話內(nèi)容也會(huì)很多，本文會(huì)告訴你，顏色如何挑選會(huì)更有規(guī)律，并保證基本和諧。

 

1. 色彩學(xué)概念淺談

想要做好色彩的搭配，需了解一些色彩學(xué)概念。色彩學(xué)將顏色分為：同類色、類似色、鄰近色、中差色、對(duì)比色、互補(bǔ)色。這幾種顏色通過色相環(huán)的角度進(jìn)行取色，如下圖所示：

圖片

任意顏色都可以作為基色，每一個(gè)基色都有其相對(duì)應(yīng)的同類色、對(duì)比色、互補(bǔ)色等等。

通常情況下，相鄰的兩個(gè)顏色，選擇基色和鄰近色之間的顏色，也就是與基色之間的角度 ≤ 60° 的顏色，會(huì)讓頁面的顏色顯得和諧統(tǒng)一。

圖片

△ 得到 App 服務(wù)內(nèi)容卡片

 

圖片

△ QQ 音樂 App 榜單卡片

 

如果選用對(duì)比色和互補(bǔ)色，則需要控制顏色的面積，比如以紅色為主的頁面中可以出現(xiàn)藍(lán)色，但藍(lán)色的面積占比最好不要超過 20%。

除了色相上的變化，顏色還有明度和純度上的變化，對(duì)于顏色的影響也至關(guān)重要。這三個(gè)詞匯的概念如下：

  • 色相 Hue：也稱色調(diào)，是指色彩的相貌
  • 純度 Saturation：也稱飽和度，是指色彩的鮮艷程度
  • 明度 Brightness：也稱亮度，是指顏色的明暗程度

色相、純度、明度三者構(gòu)成了色立體的概念，讓色相環(huán)由二維變成了三維的概念。

圖片

 

2. HSB 色彩模式

RGB 和 CMYK 是我們較為熟知的色彩模式。而根據(jù)上文提到過的色彩學(xué)概念，在實(shí)際工作中我們也可以借鑒 HSB 色彩模式進(jìn)行調(diào)色和選擇顏色。

在 sketch 和 PS 的 HSB 色板界面如下圖：

圖片

其中：

  • 色相 Hue (H)：取值在 0-360 度之間
  • 純度 Saturation (S)：取值在 0-100 之間，數(shù)值越高色彩就越純艷
  • 明度 Brightness (B)：取值在 0-100 之間，數(shù)值越高色彩就越明亮

圖片

由于純度 Saturation (S) 和明度 Brightness (B) 之間的數(shù)值都是在 0-100 之間，因此兩者具備一定的對(duì)應(yīng)關(guān)系。這些數(shù)值可以為你在選擇顏色時(shí)提供依據(jù)。

具體怎么使用這些數(shù)值，我們用案例來說明：

 

案例  

某 PC 端產(chǎn)品功能卡片需要做配色設(shè)計(jì)：

圖片

已知產(chǎn)品的品牌色是以下兩個(gè)顏色，其 HSB 色值如下圖所示：

– 顏色 A：H=233，S=74，B=100（主色）

– 顏色 B：H=267，S=79，B=100（輔色）

圖片

因此卡片的衍生色我們可以使用：藍(lán)色調(diào) + 臨近色，且臨近色的顏色最好介于藍(lán)色和紫色之間，會(huì)使產(chǎn)品頁面顏色的搭配更加和諧統(tǒng)一。

于是我們可以先根據(jù)品牌主色：

– 顏色 A：H=233，S=74，B=100

來確定初步顏色，我們只改變色相（H）的數(shù)值，分別在 233 的基礎(chǔ)上進(jìn)行 +10 和 -10，由此可以得到三個(gè)顏色 A1、A2、A3，呈現(xiàn)效果如下圖：

– 顏色 A1：H=253，S=74，B=100

– 顏色 A2：H=243，S=74，B=100

– 顏色 A3：H=223，S=74，B=100

圖片

現(xiàn)在的卡片顏色略顯單薄，我們可以再給每一張卡片加一個(gè)顏色，做出過渡色效果。于是我們?cè)跀?shù)值 A1、A2、A3的基礎(chǔ)上，保持色相（H）不變，只改變這三個(gè)數(shù)值的明度（B）和純度（S）的數(shù)值。以顏色 A1 為例：

– 顏色 A1：H=253，S=74，B=100

現(xiàn)在，我們想要得到一個(gè)比 A1 更深一點(diǎn)的顏色 A1-1，根據(jù)色彩學(xué)理論，我們可以降低明度（B）的數(shù)值，這樣顏色會(huì)變深，同時(shí)增加純度（S）的數(shù)值，這樣顏色會(huì)更沉穩(wěn)純正，為了保證數(shù)值可控，我們將明度（B）降低 26，將純度（S）提高 26，所以可以得到顏色 A1-1 的色值：

– 顏色 A1-1：H=253，S=100，B=74

A1 和 A1-1 的顏色效果如下圖：

 

圖片

按照此方法，我們可以得到兩組顏色和其數(shù)值：

圖片

所以我們的卡片可以使用漸變色：

圖片

這樣卡片的顏色就基本確定下來了，我們可以再調(diào)整下卡片的細(xì)節(jié)，比如增加相關(guān)的背景插圖，調(diào)整卡片上的文字排版等等，這組 PC 端卡片最后的效果如下圖：

圖片

 

3. 補(bǔ)充說明

一個(gè)頁面中元素的色彩選擇有很多影響因素，比如：產(chǎn)品的品牌色、頁面的功能、頁面的內(nèi)容、氛圍等等，所以還是要具體情況具體分析，綜合考慮選擇顏色。

當(dāng)然，以上提出的這些數(shù)值只是參考，為的是給你的顏色選擇提供理論支撐。在實(shí)際應(yīng)用中，也還是需要設(shè)計(jì)師根據(jù)具體情況，以及人眼視覺感知的效果，酌情做顏色上的優(yōu)化處理。

 

原文鏈接：長弓小子（公眾號(hào)）

作者：元堯

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》詳解｜交互設(shè)計(jì)中的色彩搭配，這樣更有效！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



評(píng)論(0) 瀏覽(1430)

漸進(jìn)式披露！交互設(shè)計(jì)領(lǐng)域獨(dú)有的設(shè)計(jì)方法論

seo達(dá)人


一、什么是漸進(jìn)式披露？      

在產(chǎn)品設(shè)計(jì)中常常能聽到這樣的說法：把控制權(quán)給用戶，確保用戶明白一切都在自己的掌控之中。

雖然更多的選擇會(huì)讓用戶興奮，但問題是過多的選擇也會(huì)讓用戶無法輕易的作出決定，反而造成體驗(yàn)上的負(fù)擔(dān)。

圖片

漸進(jìn)式披露不再是簡單地給用戶提供大量的信息和選擇，而是將這個(gè)過程分解成幾部分，讓用戶集中注意力在當(dāng)前的事件上，從易到難地引導(dǎo)用戶。

這樣不僅可以確保用戶不會(huì)被新信息淹沒，還可以分解用戶不想做的任務(wù)。例如將一個(gè)特別長的表單分成三或四個(gè)步驟，分步進(jìn)行填寫，同時(shí)還能單獨(dú)查看每個(gè)步驟的內(nèi)容。

圖片

 

二、漸進(jìn)式披露的優(yōu)勢(shì)

想象一下這樣的場(chǎng)景，我們剛下載了一款新游戲，進(jìn)入游戲后發(fā)現(xiàn)里面有各種各樣的游戲規(guī)則和操作細(xì)節(jié)，如果只是簡單地將所有游戲信息推送出來，那么我們可能就會(huì)淹沒在各種規(guī)則和細(xì)節(jié)里，根本記不下這么多規(guī)則，甚至?xí)绊懹螒蝮w驗(yàn)。

產(chǎn)品設(shè)計(jì)也是如此，以一種漸進(jìn)的方式呈現(xiàn)信息，可以讓用戶在深入了解產(chǎn)品細(xì)節(jié)前就投入到產(chǎn)品的使用中。

圖片

對(duì)新用戶來說，漸進(jìn)式披露讓他們有足夠的時(shí)間熟悉產(chǎn)品的基本知識(shí)，然后再進(jìn)行更復(fù)雜的功能或任務(wù)，這樣可以讓整個(gè)產(chǎn)品更易于探索并提升可用性。

漸進(jìn)式披露可以讓用戶的整個(gè)體驗(yàn)更加高效，改善用戶對(duì)設(shè)計(jì)的第一印象，并幫助他們克服學(xué)習(xí)曲線。

 

三、漸進(jìn)式披露設(shè)計(jì)準(zhǔn)則

劃分主次和優(yōu)先級(jí)

漸進(jìn)式披露主要的目的是將用戶注意力集中在重要的事情上，尤其是在一開始的時(shí)候。

在設(shè)計(jì)時(shí)，我們要考慮導(dǎo)航菜單以及選項(xiàng)的優(yōu)先級(jí)，信息和功能的呈現(xiàn)也必須如此，通過漸進(jìn)式披露能讓用戶首先體驗(yàn)產(chǎn)品最核心的功能和信息。

圖片

將注意力集中在關(guān)鍵功能上。比如進(jìn)入電商App，重點(diǎn)是引導(dǎo)用戶如何完成從看到買的整個(gè)過程，至于用戶是從主頁購買、搜索購買，還是從直播購買，這些等待用戶慢慢去發(fā)現(xiàn)。

 

從主要內(nèi)容向次要內(nèi)容過渡

對(duì)于想要了解產(chǎn)品中每個(gè)功能的用戶來說，除了明顯的主要內(nèi)容，次要內(nèi)容的呈現(xiàn)也變得很重要。

通過好的按鈕設(shè)計(jì)或可點(diǎn)擊的鏈接來實(shí)現(xiàn)從主要內(nèi)容向次要內(nèi)容過渡。

圖片

 

四、漸進(jìn)式披露案例分析

Noom

Noom不會(huì)一上來就向新用戶介紹眾多的功能，而是隨著用戶不斷滑動(dòng)查看產(chǎn)品，一次推出一個(gè)功能。

圖片

Noom通過這種讓人感覺比較自然的方式來完成信息的呈現(xiàn)，從整體上提升了用戶體驗(yàn)。

 

谷歌瀏覽器

谷歌瀏覽器的導(dǎo)航支持個(gè)性化設(shè)置，這樣用戶就可以把常用的內(nèi)容設(shè)置到上面，通過點(diǎn)擊主導(dǎo)航欄上的更改就可以輕松定義內(nèi)容。

圖片

谷歌瀏覽器的高級(jí)設(shè)置包含了大多數(shù)用戶不需要觸摸的內(nèi)容。這些內(nèi)容不是立即可見的，但在用戶需要的時(shí)候仍然很容易就可以找到。

 

刺客信條

在《刺客信條》創(chuàng)建的游戲世界中，玩家不會(huì)從一開始就被各種信息轟炸，而是隨著他們深入游戲時(shí)，在動(dòng)畫和對(duì)話框中獲得更多的游戲信息。

圖片

游戲中信息披露的一個(gè)好處是，玩家只會(huì)收到與當(dāng)前玩游戲時(shí)相關(guān)的信息。這讓玩家盡情享受當(dāng)前的游戲，不用擔(dān)心會(huì)忘掉各種規(guī)則。

 

多鄰國

學(xué)習(xí)一門全新的語言多少有點(diǎn)困難，需要在開始的時(shí)候記住太多的細(xì)節(jié)和信息。多鄰國可以幫助用戶掌握每節(jié)課上的一些關(guān)鍵概念，不會(huì)給人們帶來大量的細(xì)節(jié)或復(fù)雜的短語。

圖片

渡過新手期后，多鄰國會(huì)在主頁逐步披露課程內(nèi)容，因此用戶調(diào)整自己的學(xué)習(xí)節(jié)奏慢慢來，避免產(chǎn)生畏懼心理。

 

最后

漸進(jìn)式披露在體驗(yàn)設(shè)計(jì)中扮演著重要角色，可以有效改善用戶的初次體驗(yàn)，縮短學(xué)習(xí)曲線，并幫助用戶通過產(chǎn)品實(shí)現(xiàn)目標(biāo)。

 

原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》漸進(jìn)式披露！交互設(shè)計(jì)領(lǐng)域獨(dú)有的設(shè)計(jì)方法論

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




評(píng)論(0) 瀏覽(1090)

干貨｜交互設(shè)計(jì)中的「有效反饋」7大準(zhǔn)則！

seo達(dá)人


準(zhǔn)則 1.  Timely —— 找準(zhǔn)時(shí)機(jī)，即時(shí)反饋

在用戶操作后盡快 / 立即給予反饋是最有效的。即時(shí)反饋有助于幫助用戶養(yǎng)成正確的操作習(xí)慣，或糾正用戶的不當(dāng)操作。

如果反饋內(nèi)容需要較長時(shí)間的加載，也可以給用戶設(shè)計(jì)一些有特點(diǎn)的 / 情感化的加載狀態(tài)，緩解用戶等待的不耐煩，又可以傳達(dá)一定的品牌調(diào)性。

例如：知乎 App 在加載內(nèi)容的過程中，增加了 IP 形象的動(dòng)態(tài)效果：

圖片

 

準(zhǔn)則 2.  Specific —— 具體分析，差異對(duì)待

在設(shè)計(jì)交互反饋時(shí)，不僅僅要給出正確或錯(cuò)誤的判斷結(jié)果，同時(shí)也應(yīng)該考慮到用戶的個(gè)性化需求，針對(duì)不同類型、場(chǎng)景、地區(qū)的用戶提供差異性引導(dǎo)和服務(wù)。

例如：大眾點(diǎn)評(píng)、高德地圖可以根據(jù)用戶的位置，在用戶開始使用產(chǎn)品時(shí)就推送個(gè)性化信息：

圖片

 

準(zhǔn)則 3.  Balanced —— 正負(fù)反饋，穿插結(jié)合

通常來說，正面的反饋會(huì)激發(fā)用戶的自信等積極情緒，因此我們更習(xí)慣使用正面反饋。但是一些不得不使用負(fù)面反饋的時(shí)候，我們可以在其中穿插一些正面的消息，減少或緩解用戶的因負(fù)面反饋帶來的消極情緒。

這就好像是別人跟你說：“ 壞消息是……，但是，這樣做的好處是…… ”，壞消息不可避免，但加上一點(diǎn)轉(zhuǎn)折，就會(huì)讓他人心里稍微舒服一些。

例如：美團(tuán)單車在你騎完車之后，需要支付費(fèi)用時(shí)提示你可以購買單車套餐，雖然是在勸用戶花錢，但看上去依舊很友善，其中的話術(shù)包括：“本次騎行免費(fèi)”，“當(dāng)前已是最優(yōu)價(jià)格”：

圖片

 

準(zhǔn)則 4.  Instructive —— 提示下步，指引行動(dòng)

有效的反饋會(huì)主動(dòng)多引導(dǎo)一步，對(duì)用戶的下一步行動(dòng)給出清晰的、正確的、指導(dǎo)性的意見，有助于驅(qū)動(dòng)用戶繼續(xù)做出有效操作。

很多 App 在截屏之后都會(huì)給出下一步分享的路徑引導(dǎo)：

圖片

 

準(zhǔn)則 5.  Emotional —— 情感屬性，引起共鳴

有科學(xué)依據(jù)證實(shí)，人腦會(huì)更容易被附帶情緒的信息所吸引。用戶更有可能會(huì)注意那些看上去承載了一些情緒的反饋，從而也更有可能改變其行為方式。

例如：雖然只是一個(gè)提醒彈窗，QQ 音樂會(huì)員到期的續(xù)費(fèi)提醒文案卻經(jīng)過精心的設(shè)計(jì)，由各類歌名組成的一句話，每天的到期提醒都不同：

圖片

 

準(zhǔn)則 6.  Traceable —— 可被溯源，可供反饋

一些特殊情況下的、有重大意義的反饋可以被追溯到其根本原因，可以提供給用戶進(jìn)行申訴和詢問的渠道，供用戶進(jìn)行反饋。

例如：電商平臺(tái)和外賣平臺(tái)都會(huì)在用戶下單或退單之后，提供商品物流的詳細(xì)信息，在查看購買的商品的當(dāng)前狀態(tài)時(shí)，并可以追溯到商品所在的各個(gè)歷史環(huán)節(jié)：

圖片

再比如，高德打車如果發(fā)現(xiàn)用戶的行程訂單金額與預(yù)估金額差距較大時(shí)，會(huì)給用戶發(fā)短信提示，并給出客服和投訴渠道：

圖片

 

準(zhǔn)則 7.  Less is more —— 質(zhì)量優(yōu)先，減少數(shù)量

在這個(gè)信息過載而注意力稀缺的時(shí)代，好的反饋在于質(zhì)量，不在于數(shù)量。有時(shí)數(shù)量越多，反而會(huì)對(duì)用戶造成不必要的負(fù)擔(dān)。用戶并不需要給出很多反饋或者記錄生活中一切信息的產(chǎn)品，而是需要能夠幫他們理出頭緒、提出有效解決方案、呈現(xiàn)有用信息的產(chǎn)品。

以上這 7 大準(zhǔn)則，來源于我們?nèi)粘９ぷ髦械姆e累和沉淀，對(duì)于設(shè)計(jì)產(chǎn)品的交互反饋具備較高的指導(dǎo)意義，希望對(duì)你有啟發(fā)。

 

原文鏈接：長弓小子（公眾號(hào)）

作者：元堯

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》干貨｜交互設(shè)計(jì)中的「有效反饋」7大準(zhǔn)則！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



評(píng)論(0) 瀏覽(1443)

B端交互設(shè)計(jì)在產(chǎn)品需求全周期中的質(zhì)量保證

seo達(dá)人



為什么需要設(shè)計(jì)質(zhì)量保證

在設(shè)計(jì)中，最常見的質(zhì)量保證方式就是在產(chǎn)品驗(yàn)收環(huán)節(jié)進(jìn)行「設(shè)計(jì)走查」。不過因?yàn)槭巧暇€前的最后驗(yàn)收環(huán)節(jié)之一，經(jīng)常會(huì)出現(xiàn)因臨近上線時(shí)間，且交互和UI類的問題在修改優(yōu)先級(jí)中一般都是較低的，最后只能修改部分設(shè)計(jì)上的「bug」，其他只能舍棄或放入永遠(yuǎn)不會(huì)開工的下次迭代再改。設(shè)計(jì)師在各種來回扯皮之間筋疲力盡，看不到設(shè)計(jì)價(jià)值在需求中的體現(xiàn)，各種“這里設(shè)計(jì)不好”的鍋一不小心也接了一堆。更嚴(yán)重的問題在于，用戶得不到更優(yōu)秀的體驗(yàn)，輕則耗費(fèi)更多時(shí)間，重則放棄使用功能。不管哪種結(jié)果，對(duì)于產(chǎn)品整體滿意度都會(huì)有不同程度的影響。

由此可見，設(shè)計(jì)質(zhì)量保證僅靠最后臨門一腳的設(shè)計(jì)走查遠(yuǎn)遠(yuǎn)是不夠的。在需求全周期中各個(gè)環(huán)節(jié)都可以加入對(duì)設(shè)計(jì)質(zhì)量的把控（Design QA）。Design QA的概念來源于研發(fā)流程中測(cè)試環(huán)節(jié)。質(zhì)量保證縮寫為QA（Quality Assurance），是產(chǎn)品交付流程中非常重要的一環(huán)，一般就是大家了解的測(cè)試工程師的崗位職責(zé)內(nèi)容。在這個(gè)環(huán)節(jié)中，測(cè)試人員需要對(duì)產(chǎn)品功能進(jìn)行仔細(xì)認(rèn)證，確認(rèn)是否滿足了產(chǎn)品需求并且可以正常使用。但與測(cè)試不同，設(shè)計(jì)QA須加入到產(chǎn)品需求全周期的各個(gè)環(huán)節(jié)中，最終形成與產(chǎn)品設(shè)計(jì)并行的一個(gè)流程，才能有效保證質(zhì)量。

 

設(shè)計(jì)QA實(shí)施步驟和方案

步驟1: 需求分級(jí)，確定是否需要設(shè)計(jì)QA

要保證設(shè)計(jì)質(zhì)量，在B端設(shè)計(jì)中不是易事。我們經(jīng)常會(huì)聽到：

· “這個(gè)功能能用就行”：公司/團(tuán)隊(duì)不理解或不夠認(rèn)同設(shè)計(jì)價(jià)值是什么，不明白為什么體驗(yàn)會(huì)在每一處未還原的設(shè)計(jì)稿上慢慢丟失

· “這還原的不挺好，和你設(shè)計(jì)稿我看一樣啊”：非專業(yè)的同事無法分辨設(shè)計(jì)稿與研發(fā)實(shí)現(xiàn)稿的細(xì)微差異

· “沒時(shí)間改了，下次再說吧”：設(shè)計(jì)質(zhì)量保證低于功能質(zhì)量保證，或者團(tuán)隊(duì)必須在有限的時(shí)間交付需求

 

在接到需求后可以根據(jù)以往經(jīng)驗(yàn)或與產(chǎn)品經(jīng)理的溝通，確定本次需求設(shè)計(jì)等級(jí)：

  • A：公司級(jí)和部門級(jí)重點(diǎn)、設(shè)計(jì)周期長內(nèi)容多、設(shè)計(jì)可沉淀輸出的內(nèi)容多的需求
  • B：正常迭代、量級(jí)一般的需求
  • C：時(shí)間緊迫倒逼排期、無前端研發(fā)資源、少量調(diào)整、評(píng)估不需要設(shè)計(jì)的需求

在確認(rèn)等級(jí)后，作為設(shè)計(jì)師可以有一定的心理預(yù)期。對(duì)于A類可能各個(gè)環(huán)節(jié)都需要詳細(xì)的進(jìn)行QA，而對(duì)于C類有可能連設(shè)計(jì)走查都沒有預(yù)留時(shí)間，只能靠后續(xù)線上的直接驗(yàn)證了。后面的幾個(gè)步驟可針對(duì)不同的等級(jí)選取全部或部分進(jìn)行實(shí)施。

 

步驟2:交互設(shè)計(jì)中，考慮極限下的正確展示

B端交互設(shè)計(jì)中，很重要卻經(jīng)常制作不到位的就是極限情況?？雌饋矶际歉鞣N表格，簡單的給定一個(gè)寬度即可，但在上線后經(jīng)常發(fā)現(xiàn)，填充了真實(shí)商家數(shù)據(jù)的表格，總有意想不到的錯(cuò)位折行和重要信息截?cái)啵脩舻目砷喿x性降低。

圖片

                                             左：重要信息被截?cái)啵挥遥赫坌绣e(cuò)位

 

步驟3: 設(shè)計(jì)評(píng)審與交付，交互說明與UI標(biāo)注一體化

在完成制作后一定要進(jìn)行評(píng)審，對(duì)功能完整性、頁面流程、頁面文案、組件特殊交互邏輯要求、交互可實(shí)現(xiàn)性與開發(fā)成本進(jìn)行評(píng)估。項(xiàng)目相關(guān)利益人都需要參加，尤其是測(cè)試同事需要參與評(píng)審，保證后續(xù)測(cè)試用例編寫質(zhì)量。在交互與UI全部評(píng)審?fù)瓿刹⑼ㄟ^后，交付給研發(fā)的設(shè)計(jì)稿最好可以做到交互說明文檔與UI標(biāo)注一體化，方便研發(fā)同事查看。避免在交互說明與UI標(biāo)注中來回切換，導(dǎo)致交互或UI細(xì)節(jié)遺漏。這里推薦一個(gè)sketch插件：NoteBook Pro （需要付費(fèi)，lite版大約￥76），方便在sketch中添加交互說明標(biāo)注，在上傳到可以在線查看UI標(biāo)注的平臺(tái)，比如Zeplin/Relay等。

圖片

交互說明+UI標(biāo)注在一個(gè)頁面上同時(shí)呈現(xiàn)

 

步驟4: 參加測(cè)試用例評(píng)審，確保測(cè)試用例涵蓋所有交互細(xì)節(jié)

一般來說，交互稿與UI稿交付給研發(fā)同學(xué)后，設(shè)計(jì)師就要開始忙下一個(gè)需求了。直到通知設(shè)計(jì)走查前，設(shè)計(jì)師暫時(shí)不會(huì)再隨時(shí)跟進(jìn)需求進(jìn)展，而是交接到產(chǎn)品或項(xiàng)目經(jīng)理手中。而在這個(gè)從設(shè)計(jì)稿到研發(fā)實(shí)現(xiàn)的過程中，設(shè)計(jì)師也需要在關(guān)鍵節(jié)點(diǎn)參與其中，確保設(shè)計(jì)質(zhì)量。測(cè)試用例是其中一個(gè)設(shè)計(jì)師可以參與的環(huán)節(jié)。其實(shí)有時(shí)候很多交互文檔中的內(nèi)容會(huì)被用作測(cè)試用例，所以需要再次和研發(fā)與測(cè)試同學(xué)對(duì)齊所有交互內(nèi)容，保證交互設(shè)計(jì)內(nèi)容不會(huì)在此階段被降級(jí)甚至直接去掉。

 

步驟5:設(shè)計(jì)走查，輸出并記錄結(jié)果

此環(huán)節(jié)很重要的一點(diǎn)就是走查文檔或記錄。未完成修改的內(nèi)容，建議研發(fā)給出一個(gè)解釋，并以文檔的方式記錄下來抄送給相關(guān)利益人，標(biāo)明可能帶來的風(fēng)險(xiǎn)。同時(shí)嘗試與產(chǎn)品或項(xiàng)目經(jīng)理溝通，推動(dòng)迭代優(yōu)化的具體時(shí)間，避免「下次一定」的無效承諾。

 

總結(jié)

設(shè)計(jì)QA是貫穿整個(gè)產(chǎn)品需求全周期的設(shè)計(jì)流程，在以往的點(diǎn)狀設(shè)計(jì)走查之外，需要與團(tuán)隊(duì)上下游通力合作溝通，才能確保優(yōu)秀的產(chǎn)品呈現(xiàn)在用戶面前。

圖片

參考文獻(xiàn)：

https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad

https://www.nngroup.com/articles/quality-assurance-ux/

https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/

https://owl.tools/notebook-sketch-plugin

 

原文地址：京東設(shè)計(jì)中心JDC（公眾號(hào)）

作者：唐朋博、李小猛

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》B端交互設(shè)計(jì)在產(chǎn)品需求全周期中的質(zhì)量保證

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




評(píng)論(0) 瀏覽(1330)

案例錦囊｜交互設(shè)計(jì)中「情感化」設(shè)計(jì)優(yōu)秀案例（二）

seo達(dá)人


1.  本能層 —— 感官刺激

對(duì)于本能層，設(shè)計(jì)師需要在符合功能需求的前提下，盡可能的給用戶帶來聽覺、視覺、觸覺的感官刺激，極力去促成用戶與產(chǎn)品的 “一見鐘情”。

 

案例 1  ：App Store 的卡片推薦做的很有新意，比如：把吉祥物（品牌形象）是小熊的工具收集到了一起，并取名為：熊幫手。

圖片

 

案例 2  ：微博長按點(diǎn)贊按鈕，可以選擇不同的點(diǎn)贊狀態(tài)。圖標(biāo)還是動(dòng)態(tài)的，很有趣。

圖片

 

案例 3  ：淘寶雙十一預(yù)熱，首頁的 icon 變成了 “今晚 20 點(diǎn)雙 11 搶預(yù)售”的字樣，烘托氛圍又打了廣告。

圖片

 

案例 4  ：微信撥打語音的界面，在等待好友接聽的過程中，可以看到好友朋友圈的圖片，緩解用戶等待時(shí)的無聊，也為即將進(jìn)行的語音聊天提供了話題。

圖片

 

2. 行為層 —— 細(xì)節(jié)引導(dǎo)

對(duì)于行為層，設(shè)計(jì)師需對(duì)用戶的行為進(jìn)行預(yù)判和引導(dǎo)，利用細(xì)節(jié)處理打動(dòng)用戶，讓用戶對(duì)產(chǎn)品產(chǎn)生信任感和依賴感。

 

案例 1  ：當(dāng)蘋果公司發(fā)現(xiàn)用戶最近在官方渠道購買了新的 iPhone ，老 iPhone 的設(shè)置頁面就會(huì)給出提示，讓用戶為新的 iPhone 做好數(shù)據(jù)遷移準(zhǔn)備。

圖片

 

案例 2  ：iOS 系統(tǒng)后臺(tái)在看縮略效果時(shí)，會(huì)將用戶的敏感、私密的信息的 App 頁面進(jìn)行模糊處理，保護(hù)用戶的隱私安全。

圖片

 

案例 3  ：在屏幕很暗的情況下，打開微信支付二維碼，屏幕會(huì)瞬間亮起，便于商家掃碼付款。

圖片

 

案例 4  ：貨拉拉在展示搬家車輛詳細(xì)信息時(shí)，使用了剖面圖，并模擬了不同搬家場(chǎng)景下的家具內(nèi)容，讓用戶更好估算車輛空間。

圖片

 

3. 反思層 —— 認(rèn)知共鳴

對(duì)于反思層，設(shè)計(jì)師要調(diào)動(dòng)用戶最深層的記憶和感知，將視覺效果、產(chǎn)品功能和用戶認(rèn)知緊密結(jié)合，形成用戶對(duì)于產(chǎn)品和品牌的深刻認(rèn)知。

 

案例 1  ：FigJam 是一款來自 Figma 的多人協(xié)作在線白板工具，可以進(jìn)行頭腦風(fēng)暴、繪制流程、多人協(xié)同標(biāo)記等。里面也有很多人性化的小功能，比如：當(dāng)兩個(gè)人同時(shí)長按 “H” 鍵時(shí)，就會(huì)出現(xiàn) highfive（擊掌的動(dòng)效），非常適合當(dāng)設(shè)計(jì)師達(dá)成共識(shí)時(shí)使用：

圖片

 

案例 2  ：小睡眠 App 發(fā)現(xiàn)學(xué)生時(shí)代的我們經(jīng)常會(huì)在枯燥的課堂上睡覺，所以準(zhǔn)備了各種課堂講解、校長發(fā)言、領(lǐng)導(dǎo)開會(huì)的聲音作為催眠、助眠的音樂，讓人會(huì)心一笑。

圖片

 

案例 3  ：餓了么在異常天氣下通過在界面上增加天氣的元素，讓用戶看到外賣小哥的辛苦，使用視覺和內(nèi)容共情，喚起用戶的同理心，降低用戶因外賣遲到而做的投訴和差評(píng)。

圖片

 

案例 4  ：QQ音樂上線了寵物功能，一共有五個(gè)品種的寵物讓用戶可以選擇領(lǐng)取，多聽歌能喂飽寵物，然后送它出去參加演唱會(huì)或者和好友進(jìn)行互動(dòng)。

圖片

 

原文鏈接：長弓小子（公眾號(hào)）

作者：元堯

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》案例錦囊｜交互設(shè)計(jì)中「情感化」設(shè)計(jì)優(yōu)秀案例（二）

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



評(píng)論(0) 瀏覽(3198)

聊聊狀態(tài)開關(guān)按鈕如何設(shè)計(jì)

純純

我遇到的這個(gè)例子，和“概念模型”有關(guān)，在這里分享給大家。


這個(gè)酒店房間的開關(guān)是這樣的：


酒店床頭開關(guān)



酒店客廳開關(guān)



這個(gè)開關(guān)是觸控式的，開關(guān)本身有亮/暗兩個(gè)狀態(tài)；大家迅速看一眼，我想請(qǐng)問大家，你們認(rèn)為，亮著的開關(guān)（圖1的5個(gè)燈，圖2的右上、左下2個(gè)燈）對(duì)應(yīng)的狀態(tài)應(yīng)該是打開的還是關(guān)閉的？




如果心中有了答案了，繼續(xù)往下看。




之前在文章從交互維度量化用戶體驗(yàn)中我說過一次我個(gè)人理解的最小交互模型，大概是下面這段話：


狹義的交互（Interaction）定義交互主體必須是人本身，而客體可以是產(chǎn)品，環(huán)境，服務(wù)等等，且不論交互客體是什么，只要主體是人，人和客體去進(jìn)行交互的時(shí)候，一定是人帶著一定的心理預(yù)期施加一個(gè)行為，然后客體會(huì)根據(jù)這個(gè)行為給與一個(gè)反饋（沒有反饋本質(zhì)也是一個(gè)反饋），而人會(huì)根據(jù)這個(gè)反饋是否符合預(yù)期去進(jìn)行心理修正。如下圖所示（紅先黑后）：


那隨之而來的另一個(gè)問題就產(chǎn)生了，人進(jìn)行交互行為時(shí)的心理預(yù)期是從哪兒來的？


人初生的時(shí)候都是一張白紙，每天重復(fù)的交互行為產(chǎn)生的心理預(yù)期會(huì)隨著不同的教育、家庭進(jìn)行變化；今年我們家在廣州過年，我第一次見到兩歲的小侄子，通過這一周對(duì)小侄子的觀察更能體會(huì)出人其實(shí)是有某些說不清的潛能在里面的，舉個(gè)例子，有一天小侄子生病了，要吃兩種藥，一種是甜的，一種是苦的；吃甜藥的時(shí)候小侄子很開心，愉快的呀呀的說這藥是甜的，而吃苦藥的時(shí)候小侄子也是皺著說這藥好苦，關(guān)鍵的問題是，出生兩年來，家人從來沒有對(duì)他描述過苦味是什么，也沒有明確告訴他這兩種藥有一種是“苦味”的，但是兩歲的小孩子就能嘗到苦味的藥在沒有接觸過“苦”這個(gè)詞的時(shí)候就講得出來這是“苦”。


再舉個(gè)例子，還是我的小侄子，我們貴州人過年一般都會(huì)真金白銀的打麻將，小侄子目睹了幾天我們?cè)诼閷⒆郎嫌么蟀训牧沐X來支付，有一天我們?nèi)ス珗@玩，遇到一個(gè)熟人給小孩子了一個(gè)紅包，我們就問他“錢是干什么的呀”? 我小侄子脫口而出：“錢是用來打麻將的呀！”


為什么會(huì)發(fā)生這樣的現(xiàn)象呢？


大概是現(xiàn)在的人買東西都用微信支付寶支付，所以對(duì)于小孩子的認(rèn)知來說，他們由于沒有見到過紙幣參與交易的行為，而這幾天不斷被我們麻將桌上的現(xiàn)金沖擊視覺，才會(huì)突然脫口而出這句話。


可能在我小侄子的認(rèn)知里，手機(jī)才是用來買東西的。


我們互聯(lián)網(wǎng)圈的設(shè)計(jì)行業(yè)其實(shí)能形成理論的東西不多的，大多數(shù)時(shí)候?yàn)榱俗糇C某些東西，我們需要從心理學(xué)、社會(huì)學(xué)、行為學(xué)中找到一些理論支撐。我在做產(chǎn)品設(shè)計(jì)的過程中，最長這么時(shí)間一直使用的一種方法是思考用戶在這個(gè)頁面的心理預(yù)期。（比如在商品詳情頁，業(yè)務(wù)目標(biāo)肯定是引導(dǎo)用戶購買，但是用戶心理上之所以點(diǎn)進(jìn)了這個(gè)商品的詳情，無非是在有購買意愿的基礎(chǔ)上，需要一些信息去輔助決策，這時(shí)候如果你仔細(xì)思考并模擬一下你自己在購買時(shí)候點(diǎn)擊詳情頁的行為，其實(shí)會(huì)發(fā)現(xiàn)其實(shí)影響決策的信息大多不是價(jià)格（因?yàn)閮r(jià)格在上一級(jí)的列表頁已經(jīng)標(biāo)明了），更多的可能是產(chǎn)品描述和用戶口碑等等）


在做尤其是app設(shè)計(jì)的時(shí)候，能明確每一個(gè)頁面的業(yè)務(wù)目標(biāo)和用戶點(diǎn)進(jìn)來的預(yù)期，其實(shí)是一件非常重要的事情，大家可以多留心在這兩點(diǎn)上。



好的扯遠(yuǎn)了，回到狀態(tài)開關(guān)的事情上來，還記得剛剛的那個(gè)圖么？


酒店床頭開關(guān)



酒店客廳開關(guān)


我相信絕大對(duì)數(shù)的人第一反應(yīng)都是，亮著的開關(guān)對(duì)應(yīng)的燈應(yīng)該是亮的，因?yàn)檫@個(gè)符合常識(shí)，但是如果這個(gè)酒店也是這樣的話，我就不會(huì)舉這個(gè)例子了，沒錯(cuò)，上面開關(guān)亮著的燈是關(guān)的，沒有亮的開關(guān)對(duì)應(yīng)的燈是打開狀態(tài)。


我相信設(shè)計(jì)這個(gè)開關(guān)的人是為了讓用戶在夜晚起夜的時(shí)候使用方便，但是他完全可以用更加高明的辦法，比如換成夜光材質(zhì)之類的。這種設(shè)計(jì)師很愚蠢的，我觀察這么多天下來，我們所有親戚每次開關(guān)燈幾乎都會(huì)誤觸，因?yàn)槲覀兊男闹且恢币恢闭J(rèn)為的是亮著的開關(guān)亮著的燈。


這里就牽扯出一個(gè)問題，我們?cè)赼pp設(shè)計(jì)中如何去設(shè)計(jì)狀態(tài)開關(guān)的問題。


首先需要明確，最無歧義的狀態(tài)開關(guān)一定是需要具備兩個(gè)意符：

其一是表征當(dāng)前狀態(tài)

其二是表征用戶點(diǎn)擊之后的狀態(tài)。

而現(xiàn)在市面上很多app在這兩個(gè)意符上是混的，一般都知道用icon的樣式來表征當(dāng)前狀態(tài)，但是下面的輔助文字則是表征當(dāng)前狀態(tài)的和點(diǎn)擊之后狀態(tài)的都有。


這就會(huì)讓用戶很蒙。


比如相機(jī)app、短視頻app、K歌app中就比較明顯會(huì)有很多狀態(tài)按鈕，如下圖所示是某相機(jī)app的截圖，這樣的設(shè)計(jì)就是“有歧義的設(shè)計(jì)”，比如“延時(shí)關(guān)閉”和“補(bǔ)光燈關(guān)閉”這兩個(gè)文案，會(huì)很容易讓人困惑這文案指代的是當(dāng)前狀態(tài)呢還是點(diǎn)擊之后的狀態(tài)呢？


給大家提供一個(gè)我個(gè)人的小tips：


設(shè)計(jì)狀態(tài)按鈕，盡量把當(dāng)前狀態(tài)和點(diǎn)擊行為拉出兩個(gè)層級(jí)關(guān)系來設(shè)計(jì)。


當(dāng)前狀態(tài)可以體現(xiàn)在icon上，但是不能只體現(xiàn)在icon上（比如他這個(gè)延時(shí)關(guān)閉的圖標(biāo)有一個(gè)x，但是補(bǔ)光燈關(guān)閉又沒有x，這就更加歧義了）


比如如果是我去設(shè)計(jì)它這個(gè)按鈕，我會(huì)這么設(shè)計(jì)：



這樣的話，確實(shí)，用戶操作復(fù)雜度上會(huì)多一級(jí)（之前直接點(diǎn)icon，現(xiàn)在點(diǎn)icon之后需要再點(diǎn)開關(guān)），但是用戶完全沒有認(rèn)知成本。


這就是我說的把當(dāng)前狀態(tài)和點(diǎn)擊行為拉出兩個(gè)層級(jí)關(guān)系來設(shè)計(jì)。其實(shí)這個(gè)犧牲交互成本減少用戶認(rèn)知成本的方法在交互設(shè)計(jì)工作中經(jīng)常被我們使用，當(dāng)我們遇到一個(gè)問題實(shí)在是一步很難理清的時(shí)候，不妨可以多嘗試這種思路。不過這種提高復(fù)雜度的減少認(rèn)知的方法，不適用于業(yè)務(wù)強(qiáng)指引型頁面（比如購買、導(dǎo)航之類）


文章來源：站酷   作者：Seany

分享此文一切功德，皆悉回向給文章原作者及眾讀者.


免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



評(píng)論(0) 瀏覽(1712)

日歷

鏈接

個(gè)人資料

存檔