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

2022-3-21    seo達(dá)人

一、練習(xí)原型 

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

 

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

看一些優(yōu)秀的交互文檔,看看別人對(duì)各個(gè)狀態(tài)的標(biāo)注和說(shuō)明,以及流程的設(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ī)則定義、用戶(hù)流程圖、設(shè)計(jì)原則、交互流程標(biāo)注以及交互各種狀態(tài)異常場(chǎng)景。
1、業(yè)務(wù)背景
業(yè)務(wù)背景通常是我們?yōu)槭裁匆鲞@個(gè)功能。通過(guò)做這個(gè)功能,對(duì)業(yè)務(wù)有什么幫助。通過(guò)業(yè)務(wù)背景,我們可以推演出業(yè)務(wù)訴求,并得到對(duì)應(yīng)的產(chǎn)品目標(biāo)。

 

2、設(shè)計(jì)目標(biāo)
設(shè)計(jì)目標(biāo)是通過(guò)設(shè)計(jì)得到什么樣的結(jié)果,對(duì)產(chǎn)品來(lái)說(shuō)可以獲得什么樣的好處。所以在交互文檔的設(shè)計(jì)中要重點(diǎn)體現(xiàn)出設(shè)計(jì)目標(biāo)。通過(guò)明確設(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)營(yíng)一起溝通討論。這個(gè)里面涉及到整個(gè)產(chǎn)品業(yè)務(wù)的規(guī)則。在實(shí)際工作中,我們交互會(huì)碰到兩種情況:
情況1:產(chǎn)品經(jīng)理會(huì)和業(yè)務(wù)或運(yùn)營(yíng)溝通,然后輸出一份業(yè)務(wù)規(guī)則,這時(shí)候我們交互可以認(rèn)真閱讀并梳理業(yè)務(wù)規(guī)則,如果覺(jué)得不合理的話(huà),可以和產(chǎn)品經(jīng)理討論溝通,并修改業(yè)務(wù)規(guī)則使之變得更合理,并輸出在交互文檔中。
情況2:產(chǎn)品經(jīng)理只是簡(jiǎn)單的有個(gè)業(yè)務(wù)規(guī)則想法,這時(shí)候需要我們交互設(shè)計(jì)師幫忙一起溝通并細(xì)化其業(yè)務(wù)規(guī)則,并輸出在交互文檔中。

 

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

 

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

 

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

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

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

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

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

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

圖片

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

空數(shù)據(jù)類(lèi)型一共有三類(lèi):

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

以后是不是重要的東西都可以放置于首頁(yè)?如果這個(gè)改版開(kāi)了個(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、分析線(xiàn)上數(shù)據(jù)
3、窮舉設(shè)計(jì)方案
4、切換用戶(hù)視角
5、競(jìng)品方案對(duì)比

 

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

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

圖片

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

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

圖片

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

 

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

例如注冊(cè)流程/綁定銀行卡的過(guò)程中,總的轉(zhuǎn)化率只有0.06%,用戶(hù)完成率過(guò)低,如果要優(yōu)化整個(gè)用戶(hù)注冊(cè)操作流程,那么需要找出流失過(guò)大的節(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ì)為例。常見(jiàn)的設(shè)計(jì)方案,是將所有的表單內(nèi)容按照分組的方式,進(jìn)行排列,如下圖所示:

圖片

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

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

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

圖片

 

4、切換用戶(hù)視角

設(shè)計(jì)方案確認(rèn)之后,這時(shí)候有一步很關(guān)鍵,就是我們要將自己想像成小白用戶(hù)。
我們以小白用戶(hù)的視角去審視方案??纯从袥](méi)有不理解的地方。
為什么要有這一步呢?
因?yàn)槲覀冊(cè)O(shè)計(jì)師在設(shè)計(jì)方案的過(guò)程中,會(huì)默認(rèn)一些設(shè)計(jì)規(guī)則邏輯,而這些規(guī)則邏輯用戶(hù)是不知道的。
這就導(dǎo)致了我們?cè)O(shè)計(jì)師覺(jué)得這個(gè)方案可行。但是普通用戶(hù)卻不知道這個(gè)規(guī)則邏輯,導(dǎo)致我們的方案用戶(hù)看不懂。
當(dāng)我們切換用戶(hù)視角發(fā)現(xiàn)方案存在的問(wèn)題后,再?lài)L試如何讓用戶(hù)更好的理解的前提下去優(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ì)方案基于開(kāi)發(fā)或者老板等業(yè)務(wù)背景,才不得已使用非優(yōu)秀的方案,我們?nèi)绻麉⒖几?jìng)品的話(huà),最后的結(jié)果也可能難以做出優(yōu)秀的方案。
當(dāng)我們的設(shè)計(jì)方案做好之后,這時(shí)候我們就可以分析我們的設(shè)計(jì)和競(jìng)品的區(qū)別和差異性,從而得到靈感, 優(yōu)化出更好的設(shè)計(jì)。

 

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

項(xiàng)目復(fù)盤(pán)的意義:

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

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

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

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

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

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

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

 

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司


分享本文至:

日歷

鏈接

個(gè)人資料

存檔