<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 交互設(shè)計從入門到精通的5個途徑

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

    一、練習(xí)原型 

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

     

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

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

     

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

     

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

     

    4、用戶流程圖
    用戶流程即我們設(shè)計師要梳理用戶在使用過程中的各種場景流程,通過用戶流程圖可避免遺漏場景,避免交互方案遺漏。

     

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

     

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

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

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

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

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

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

    圖片

    加載:涉及到全局加載和局部加載,全局加載在設(shè)計中要統(tǒng)一說明,例如上一個界面點(diǎn)擊進(jìn)入下一個界面,使用的全局加載就需要說明。如果是一些小場景的加載,那么需要特殊說明。例如上拉加載,下拉加載,局部小區(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)生了空界面,這時候需要有明確的提示,且告知用戶該如何處理。

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

     

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

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

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

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

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

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

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

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

    用戶訴求視角:將用戶訂單狀態(tài)放于首頁,用戶的使用場景,會不時的查看訂單狀態(tài),放置于首頁可方面快捷的提供用戶查看訂單狀態(tài),對用戶來說體驗(yàn)好。

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

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

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

     

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

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

     

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

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

    圖片

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

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

    圖片

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

     

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

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

    圖片

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

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

     

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

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

    圖片

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

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

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

    圖片

     

    4、切換用戶視角

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

     

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

     

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

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

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

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

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

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

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

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

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

     

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

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

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

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

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

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


    日歷

    鏈接

    個人資料

    存檔

    主站蜘蛛池模板: 熟女精品视频一区二区三区| 精品乱码久久久久久久| 亚洲精品国产精品乱码不卡| 欧美巨大黑人精品videos| 亚洲精品自产拍在线观看| 国产精品毛片一区二区| 国产精品揄拍100视频| 亚州日韩精品专区久久久| AAA级久久久精品无码区| 国产成人精品优优av| 中文国产成人精品久久不卡| 国产系列高清精品第一页| 国产精品国产三级国产专播| 日韩精品内射视频免费观看| 欧美日韩精品系列一区二区三区国产一区二区精品 | 国产成人精品综合在线观看| 99久久er这里只有精品18| 日韩精品极品视频在线观看免费| 日本精品视频在线观看| 国产欧美精品专区一区二区| 亚洲欧洲国产日韩精品| 国产精品中文字幕在线观看| avtt天堂网久久精品| 经典国产乱子伦精品视频| 久久丫精品国产亚洲av| 日韩精品无码一区二区三区| 中文字幕久精品免费视频| 无码国模国产在线无码精品国产自在久国产 | 8050免费午夜一级国产精品| 国产精品嫩草影院一二三区入口| 国产99视频精品免费专区| 国产午夜福利精品一区二区三区| 久久99国内精品自在现线| 久久亚洲精品成人av无码网站| 无码精品人妻一区二区三区人妻斩 | 97久久精品人人澡人人爽| 久久精品国产久精国产| 精品国产自在在线在线观看| 国产91精品在线| 久久久久免费精品国产| 亚洲国产精品免费视频|