首頁

如何從產(chǎn)品角度發(fā)起交互設計?

天宇 交互設計及用戶體驗

本文從產(chǎn)品角度出發(fā),深入探討了如何發(fā)起交互設計。通過明確產(chǎn)品目標與用戶需求、進行用戶研究、構(gòu)建信息架構(gòu)、設計流程與界面、進行原型測試以及持續(xù)優(yōu)化等關(guān)鍵步驟,闡述了如何打造出滿足用戶期望、提升用戶體驗并實現(xiàn)產(chǎn)品目標的交互設計。
 
一、引言
 
在當今數(shù)字化的時代,產(chǎn)品的成功不僅僅取決于其功能的強大,更在于能否為用戶提供流暢、愉悅且富有價值的交互體驗。從產(chǎn)品角度發(fā)起交互設計,意味著將用戶置于核心,以實現(xiàn)產(chǎn)品的商業(yè)目標和用戶需求的完美融合。
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
二、明確產(chǎn)品目標與用戶需求
 
(一)定義產(chǎn)品目標
產(chǎn)品目標是交互設計的起點,它決定了設計的方向和重點。產(chǎn)品經(jīng)理需要與團隊共同明確產(chǎn)品的定位、市場需求以及預期的商業(yè)成果。例如,是旨在提高用戶活躍度,還是增加用戶轉(zhuǎn)化率,或者是提升品牌形象。
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
 
(二)挖掘用戶需求
通過市場調(diào)研、用戶反饋、競品分析等手段,深入了解目標用戶的行為習慣、痛點和期望。這不僅包括對用戶顯性需求的捕捉,還包括對潛在需求的挖掘。
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
 
三、進行用戶研究
 
(一)用戶畫像創(chuàng)建
基于收集到的數(shù)據(jù),構(gòu)建詳細的用戶畫像,包括用戶的年齡、性別、職業(yè)、教育背景、使用場景等特征,以便更精準地理解用戶的行為和需求。
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
 
(二)用戶場景分析
模擬用戶在不同場景下與產(chǎn)品的交互過程,發(fā)現(xiàn)可能存在的問題和優(yōu)化點。
舉例說明:
我們要知道,地鐵周邊美食,這是一個解決方案。真正的需求是什么?一個字一個字地找需求,地鐵=快速方便出行,美食=和朋友一起吃飯/自己一人吃飯。這是一個和線下場景很相關(guān)的項目,我們要把不同目的核心用戶的主要使用場景寫出來。經(jīng)過分析,我們得出了用戶會選擇我們產(chǎn)品,且產(chǎn)品未來可能存在的各種場景A、B、C、D、E。如下圖所示:
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
如果按照目標人群所在場景分類,進行細分,則為下圖:
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
乘地鐵去地鐵站和附近地鐵站區(qū)別:前為用戶會乘坐地鐵去目的地尋找美食;后為用戶不用地鐵/吃完后使用地鐵,地鐵邊美食沒有其他美食團購產(chǎn)品有競爭力。
上班族和普通大眾區(qū)別:上班族工作日使用固定地鐵站上下班,時間可能緊急,快速獲取食物;普通找美食吃的大眾不使用固定地鐵站,目的是通過地鐵快速到達某目的地,就近享受目的地美食。
朋友們和個人區(qū)別:朋友們一起吃飯,容易出現(xiàn)喝多、吃過點等異常行為,并且在選擇地鐵旁吃飯地點時需要考慮朋友們家的位置就近選目的地。個人均不需要考慮以上,較為自由。
 
市場定位
經(jīng)過領域場景的分析,我們知道了真場景都是用戶有目的乘坐地鐵去到某地鐵站出站口尋找美食的。那么我們對這么一群大眾進行用戶人口統(tǒng)計學類的細分:
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
  • 上圖為前期定位的目標大眾用戶群,依靠地鐵的工具屬性,我們得出了具體的兩個影響因素:時間+美食熱愛程度。同時我們把直接競品和間接競品一同進行用戶群比較。可以看到和大美團有相同和不同維度,這就是產(chǎn)品最初冷啟動時期的差異化!也就是我們的前、中期場景的主要目標用戶類型。
  • 紅色部分即種子用戶群,以這些群體為冷啟動階段,可以更快的向四周擴張。因為他們有使用地鐵的時間屬性,同時有較高的美食熱愛程度,有利于帶動其他時間+熱愛程度的用戶加入產(chǎn)品,實現(xiàn)快速并有質(zhì)量的拉新、活躍的目標。
  • 低端直接競品即用戶群工具屬性明顯,只是搜地鐵站,選擇美食的用戶,無明顯其他行為;高端競品即注重社交、ugc為起點,逼格高的搜尋美食工具。這部分開始很難,工作量巨大,且較脫離大眾主流群體。
 
結(jié)合上圖和要做的場景,我們得出了產(chǎn)品具體目標用戶:乘坐地鐵快速到達并尋找目的地美食的大眾用戶(上班族休息日,大學生,個人或一起),要求在地鐵站附近便能方便享受目的地美食。且對美食有一定熱愛程度。
 
(三)用戶測試
邀請真實用戶進行產(chǎn)品試用,觀察他們的操作行為,收集反饋意見,為后續(xù)的設計提供依據(jù)。
1、需求接受
需求很有可能是在線上接到的,并不是面對面交流傳遞的,并且還會遇到很多坑,例如需求本身不具體,或者自己理解有偏差,因此在接到需求后,最好和交互、產(chǎn)品等同事進行面對面的交流和溝通。
詳細了解測試目的和關(guān)鍵點,確定用戶配比。
最好是讓交互帶著跑一下整個程序(半成品demo也好,交互稿也行),這樣能在頭腦中快速形成操作流程的認知,并把相應關(guān)鍵點對應上去。同時把大致的用戶配比情況敲定一下,后續(xù)就可以直接招募用戶了。
了解demo的完成進度,相應確定具體測試時間。
交互、視覺等完成demo的時間具有太多不確定因素,因此我們需要及時了解整個demo的完成進度,在盡可能快的情況下保險安排測試時間,如果邀請的是外部用戶,結(jié)果用戶到了而demo還沒出來,那也是夠了。
2、方案撰寫和確定
讓交互稿幫助自己。在完成測試方案撰寫的過程中demo還未誕生,具體程序細節(jié)記憶又很模糊,不好寫測試方案,怎么辦?不要慌,去看交互稿吧。
及時溝通。在方案撰寫過程中,如果有一些疑問,例如在看交互稿的時候還不是很理解某個具體操作過程,或者自己對產(chǎn)品有疑問的也可以跟交互等溝通,因為自己會遇到的問題,很有可能在測試用用戶也會遇到,這樣子用戶如果問到了,就可以相應作出解釋。
核實確定方案。完成方案后,可以在公司溝通交流工具上和交互及產(chǎn)品等同事再確認一下,是否有什么地方遺漏或有不妥之處。
3、用戶招募
這是一個大多數(shù)人都頭疼的一個過程,希望看完了以下幾點,可以稍微緩解一下大家的癥狀。再次確定測試時間。
方案定下來后,再跟交互確認測試時間,了解是否有變動和調(diào)整,盡量避免用戶來了demo或者測試環(huán)境還不ok的情況。
 
撰寫招募文案。需要把用戶要求、測試日期和地點、報酬、大致的測試時長、用戶需要在測試中做什么,以及報名方式等表達清楚。有以下幾點可以注意一下,方便我們自己招募:
  • 詳細列出測試安排的時間段。例如10:30-11:15、13:30-14:15,讓用戶自己挑選合適的時間段,這樣就不用事后再協(xié)調(diào)不同用戶測試時間了;
  • 優(yōu)先人力、信息管理、行政等崗位同事。盡量避免相關(guān)產(chǎn)品人員、設計崗等同事。
  • 制作簡單的招募海報,并檢查??梢允孪葘?ldquo;海報”用word或者ppt做好,然后保存成圖片格式,記得檢查核實一下是否有錯。因為在公司IM群上直接黏貼確實方便,但是其排版往往不利于閱讀,導致用戶會遺漏重要信息。而制作成圖片格式,可以更好地去避免這個問題,同時還可以顯得整個招募過程比較正式,突出了對用戶的尊重,也能在一定程度上體現(xiàn)我們用研工作的規(guī)范性。
 
多渠道投放招募海報。內(nèi)部用戶可以嘗試先在公司IM群組上招募,之前招募樣本量比較小,因此很快可以招到,其他途徑暫時未嘗試,公司論壇應該也可以,不過隱約感覺效率會比較低。外部用戶可以在朋友圈試試,效果還不錯,大家都很熱情幫忙轉(zhuǎn)發(fā),群眾的力量大無窮。也可以相應去搜索一些QQ群,加入并發(fā)布招募信息。另外還有一些社交論壇什么的,都可以嘗試一下。方法很多,針對具體招募情況,大家就盡情發(fā)揮吧~
 
用戶多了留到下次用。海報發(fā)出去后,有時也會出乎意料用戶數(shù)量超過預期了,這是好事,不要擔心,也不要急著拒絕,平和的跟對方說明情況,強調(diào)下次還會有測試,把用戶相應信息了解一下做個記錄,下次招募的時候可以直接先聯(lián)系這幾名用戶。當然前提是你真的有下次測試需求,如果沒有那還是老老實實說明情況。
 
確保自己和用戶能彼此聯(lián)系上。跟用戶強調(diào)測試時間和地點,尤其是外部用戶,如果招募和正式測試隔了幾天,最好在測試前一天再通知一下。給出自己的聯(lián)系電話,同時詢問用戶的聯(lián)系電話。
 
第一個用戶盡量安排公司內(nèi)部同事。很多時候demo的完成情況會出現(xiàn)意外,到了測試時間demo還不能用,內(nèi)部用戶可以方便取消或者更換。另外,在第一次測試前誰都不確定用戶會有什么反應,第一個測試是可以起到試水效果,而外部用戶成本高,用來試水太奢侈。
4、測試準備
 
材料準備。需要準備的內(nèi)容有:量表、報酬簽收表、記錄筆記本、錄音筆、會議室借用,以及記錄表格,如果是外部用戶過來,相應準備一杯水,人家大老遠過來也不容易。
 
測試內(nèi)容準備。其實每次訪談用戶自己都會挺緊張的,不知道用戶是不是也很緊張(PS:好想當一回用戶,體驗一下被訪的感覺)。為了消除這種緊張,同時也是為了更好的完成訪談,可以有嘗試以下幾點:
  • 盡可能多的去了解所需測試的產(chǎn)品。有時候demo出來的晚,下午要測試,demo中午才出來,自己都沒玩過,測試還怎么搞?之前也說了,那就使勁去看交互稿吧,雖然比不上實際操作來的真實,但是也能有不小幫助,但也要給自己留足熟悉demo的時間。
  • 按照模塊來列提綱。其實相當于組塊策略,把同一個模塊的問題放到一起更方便記憶,并且也在訪談中也方便自己和其他同事發(fā)現(xiàn)遺漏點。但模塊不要太大,如果太大了就相應拆分一下。例如,在考拉新版測試的時候,有“首頁”、“活動”、“購物車”等測試,但是光是首頁內(nèi)容也很多,作為一個模塊還是太大了,可以拆分成“首頁整體感知”、“商品詳情”等幾個方面來整理提綱。
  • 根據(jù)任務演練提綱。有了提綱后,按照任務大致過一下所有列出來的問題,這個過程會打亂按照模塊列好的提綱,有一次這樣的排練,在測試的時候更不容易漏掉題目,而且也相當于模擬了一下測試,自己心里會更踏實一點,在實際測試過程中也能有更好的應對。
 
相關(guān)人員通知。通知交互和產(chǎn)品的同事具體測試時間和地點,邀請他們一起參與。不建議交互和產(chǎn)品只是后期測試查閱報告,如果他們參與到測試中,能更近距離和用戶接觸,并能更加深刻感受到產(chǎn)品存在的問題,也能更好的推動產(chǎn)品的改進。
5、正式測試
主持人需要注意的點:
  • 劃分我們和產(chǎn)品的關(guān)系。在測試之前跟用戶說明清楚,我們并不是產(chǎn)品的設計者和開發(fā)者,我們只是受產(chǎn)品方委托來進行測試,以免用戶不好意思當面如實評價產(chǎn)品。
  • 強調(diào)測試的是產(chǎn)品,而不是用戶。要跟用戶說明產(chǎn)品尚處于不完善階段,因此邀請用戶過來進行測試,幫助發(fā)現(xiàn)問題和改進產(chǎn)品設計,但請注意不是為了評價產(chǎn)品。
  • 注意訪談技巧。這個就不用多說了。
  • 盡可能深入的去挖掘用戶的需求。不要停留在用戶話述表面,更進一步去追問,用戶為什么會這么說或這么問,例如,很多時候在測試中會碰到用戶說“哦,原來這個按鈕是xx功能,我還以為是xx功能“,這個時候可以再推進一步,了解用戶為什么會這么認為。
  • 給其他在場的同時發(fā)言的機會。主持人如果覺得自己訪談的差不多了,可以詢問一下記錄者以及交互、產(chǎn)品等同事,了解他們是否還有問題需要補充。
  • 記得量表評分和報酬簽收。長時間的測試和訪談后容易忘記量表評分和報酬簽收,可以把這兩份東西放在顯眼的地方,另外可以讓記錄的同事打個招呼,幫忙提醒自己。
 
記錄人員需要注意的點:
  • 仔細觀察用戶行為并記錄。記錄不僅僅是用戶的觀點、想法等,更重要的是記錄用戶的實際行為。
  • 按照模塊記錄。記錄者可以按照測試方案中的模塊來相應記錄用戶的行為和言語表述。
  • 查漏補缺。主持人可能會遺漏一些點,記錄者作為旁觀者需要提醒主持人遺漏了什么,或者自己有什么新的內(nèi)容需要補充。
 
6、測試結(jié)束歡送用戶。對用戶表示感謝,并開門送一下用戶,對于外部用戶,最好能送到大樓外面可以看見出口的地方。
測試后及時討論。這個是重點!
在每一名用戶測試后及時和交互、產(chǎn)品等同事快速過一下主要發(fā)現(xiàn)的問題點,這樣做有以下優(yōu)點:
  • 有效達成共識,確定解決方案。剛訪談結(jié)束印象最深刻,因此能快速有效達成對主要問題的共識,并討論確定相應的解決方案。
  • 體現(xiàn)敏捷優(yōu)勢。確定了一些比較嚴重的問題后,交互和產(chǎn)品的同事就可以相應去改進產(chǎn)品設計,做到了邊測邊改,加快迭代速度。
  • 幫助優(yōu)化訪談提綱,和測試用戶安排。有些問題在事先撰寫方案的時候可能沒涉及到,在討論后可以補充進去,而有些問題確定后則不需要再測。另外,也可以通過討論對事先安排的測試用戶進行相應調(diào)整,例如增刪用戶,或者調(diào)整新老用戶測試順序等。
  •  
    事后幫助我們自己快速撰寫方案。通過討論確定了關(guān)鍵問題,并且,交互和產(chǎn)品的同事也相應清楚了,因此在最后可以快速形成報告。
再次感謝用戶。所有用戶測試結(jié)束后,可以花幾分鐘時間簡單感謝一下用戶。
 
7、報告撰寫
針對不同大小項目的用戶測試,在完成報告撰寫過程中有兩種具體方式:
  • 小測試項目簡單快速撰寫報告。對于那些1-2天的小測試項目,由于在每次測試后都有討論,已對主要問題達成共識,因此在報告撰寫的時候就可以快速地將主要的問題和風險點呈現(xiàn)出來。
  • 大測試項目每天總結(jié)并反饋主要問題。大的測試項目持續(xù)時間比較久,針對每天的測試及討論,簡單總結(jié)一下主要發(fā)現(xiàn)的問題,并反饋給相關(guān)人員,如果到了最后再總結(jié),容易遺忘掉一些內(nèi)容,并且這樣子也方便自己最后撰寫報告。
 
四、構(gòu)建信息架構(gòu)
思考信息架構(gòu)有三個核心關(guān)鍵詞:用戶角色、產(chǎn)品價值、使用場景。
1、明確用戶角色
用戶角色清晰揭示用戶目標,幫助我們把握關(guān)鍵需求、關(guān)鍵任務、關(guān)鍵流程,看到產(chǎn)品哪些是主要的事,哪些是次要的事。我們應該盡可能豐富、形象化我們的用戶角色,讓它在設計決策過程中發(fā)揮作用,設計出更符合用戶場景的產(chǎn)品。
2、了解產(chǎn)品的目標價值
作為產(chǎn)品的設計師一定要理解產(chǎn)品的價值,知道用戶想要什么,把最重要的優(yōu)先級提到最高,盡量移除無關(guān)緊要的信息,或降低其他優(yōu)先級的權(quán)重,以免對用戶造成干擾。
3、提煉產(chǎn)品的使用場景
要了解產(chǎn)品的業(yè)務流程,比如目標用戶是誰、什么場景、如何使用,要把產(chǎn)品業(yè)務流程上的節(jié)點一個一個梳理出來,還要考慮這個產(chǎn)品對用戶的價值是什么,不要僅僅考慮界面的元素規(guī)范、設計細節(jié)等等,要知道產(chǎn)品的目標價值體系。
4、信息架構(gòu)優(yōu)先級
基于三個核心點(用戶角色、產(chǎn)品價值、使用場景)分析,把目標用戶人群核心價值的功能點業(yè)務流程梳理出來,分清主次關(guān)系,切忌功能堆砌,具體方法可以把所有功能業(yè)務邏輯的主線列出來,然后根據(jù)業(yè)務的優(yōu)先級做評級,分清楚這些功能哪些是主要的,哪些是次要的,然后通過數(shù)字做排序,這樣我們就知道哪些功能設計需要明顯,哪些功能設計需要低調(diào)。
5、信息歸類及整合
從整體上思考信息類產(chǎn)品的分類及整合,比如用戶資料相關(guān)的產(chǎn)品會有用戶信息、資料、等邏輯,這樣就要把所有跟用戶相關(guān)的信息都歸在同一個分類菜單下,不要讓他們分散在各個頁面中。也就是所謂的一級菜單、二級產(chǎn)品的處理邏輯。
6、要定期審視與迭代
隨著產(chǎn)品規(guī)模與復雜度的提升,要隨時關(guān)注信息架構(gòu)是否滿足當前的產(chǎn)品框架,不要等需要時候再去孤注一擲的全盤優(yōu)化,這樣會讓項目陷入被動的局面,可以逐漸增強,循序漸進的優(yōu)化,從小的細節(jié)對信息架構(gòu)進行調(diào)整,提升產(chǎn)品的易用性。
 
六、進行原型測試
1、制作原型
使用快速原型工具制作可交互的原型,以便更直觀地展示設計方案。
 
(二)內(nèi)部測試
團隊內(nèi)部進行初步測試,檢查功能的完整性和流程的合理性。
 
(三)用戶測試
邀請外部用戶進行測試,收集他們的意見和建議,發(fā)現(xiàn)潛在的問題和改進空間。
 
七、持續(xù)優(yōu)化
 
(一)數(shù)據(jù)分析
通過收集和分析用戶的使用數(shù)據(jù),了解用戶的行為路徑和偏好,為優(yōu)化提供數(shù)據(jù)支持。
 
(二)用戶反饋處理
及時響應用戶的反饋,將有價值的建議融入到后續(xù)的優(yōu)化工作中。
 
(三)迭代更新
根據(jù)數(shù)據(jù)分析和用戶反饋,不斷對交互設計進行迭代更新,以適應市場和用戶需求的變化。
 
八、結(jié)論
 
從產(chǎn)品角度發(fā)起交互設計是一個綜合性的過程,需要充分考慮產(chǎn)品目標、用戶需求、信息架構(gòu)、流程界面、測試優(yōu)化等多個方面。只有以用戶為中心,不斷追求卓越的用戶體驗,才能打造出具有競爭力的產(chǎn)品,在激烈的市場競爭中脫穎而出。
 
在未來的產(chǎn)品開發(fā)中,隨著技術(shù)的不斷進步和用戶需求的不斷變化,交互設計也將面臨新的挑戰(zhàn)和機遇。產(chǎn)品團隊應保持敏銳的洞察力和創(chuàng)新精神,持續(xù)探索和優(yōu)化交互設計,為用戶創(chuàng)造更多的價值。
 


作者:Charlotte的嘻醬
鏈接:https://www.zcool.com.cn/article/ZMTYyNzM1Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

用戶體驗一致性思考

天宇 交互設計及用戶體驗

前言
在團隊內(nèi)部,我們已確立了一套設計規(guī)范,在日常項目中使用設計規(guī)范輸出變的高效、統(tǒng)一。然而,在實際操作中,不可避免地會遇到一些特殊情況:某些客戶提出的個性化需求并不完全契合既定的設計規(guī)范,這些促使我們不得不在保持設計一致性的基礎上進行靈活調(diào)整。因此,深入反思并優(yōu)化一致性原則的應用策略顯得尤為重要。我們需要探索如何在堅守設計規(guī)范核心精神的同時,靈活應對多變的需求,確保設計既保持統(tǒng)一和諧,又能滿足特定場景下的獨特需求,從而實現(xiàn)用戶體驗與品牌價值的雙重提升。
 
用戶體驗一致性思考
 
 
用戶體驗一致性思考
 
 
在UI/UX設計中,雅各布·尼爾森的十條可用性原則中,一致性(Consistency and standards)位列第四。這一原則強調(diào)在界面和交互設計上需要遵循既定的規(guī)則,無論是在應用內(nèi)部還是跨平臺之間。
背后的心理學原理——重復定律,強調(diào)了信息重復對于鞏固記憶的重要性。正如赫爾曼·艾賓浩斯通過“遺忘曲線”所揭示的,信息的有效保留離不開重復接觸。一致性的應用正是這一原理的生動實踐,通過不斷重復統(tǒng)一的設計元素與模式,強化用戶對產(chǎn)品的認知與記憶,從而提升整體的用戶滿意度與忠誠度。
艾賓浩斯遺忘曲線
艾賓浩斯遺忘曲線
 
用戶體驗一致性思考
 
 
用戶側(cè)
1、用戶學習曲線:
一致的UI/UX設計可以降低用戶的學習曲線。當用戶在應用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時,他們可以快速理解并準確預測如何與界面進行交互。這減少了用戶的混淆和困惑,提高了他們的效率和滿意度。
2、提升可用性:
一致性使用戶界面更加易于使用。當用戶在不同的頁面或功能之間找到相似的設計元素和交互模式時,他們可以輕松地將已有的知識和經(jīng)驗應用于新的情境中。這種一致性幫助用戶快速完成任務,減少錯誤和迷失,提供更好的導航和流暢的體驗。
3、品牌認可度:
一致的UI/UX設計有助于樹立品牌形象和增強品牌認可度。通過在不同的渠道和平臺上保持一致的設計元素、標識和視覺風格,品牌可以建立起獨特而可識別的形象。用戶在不同的觸點上都能感受到品牌的一致性,從而增加品牌的信任和忠誠度。
4、用戶滿意度:
一致性直接影響用戶的滿意度。當用戶在使用應用程序或網(wǎng)站時感受到一致的設計和交互方式時,他們會感到更加舒適和自信。一致性傳遞了專業(yè)和質(zhì)量的信號,讓用戶感到被關(guān)注和重視。這種積極的用戶體驗有助于提升用戶滿意度,并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務。
 
用戶體驗一致性思考
 
 
產(chǎn)研側(cè)
1. 降低設計成本,提高開發(fā)效率
無論是設計還是開發(fā),復用已有的組件資源,保持界面的一致性可以有效地減少設計的投入,避免不必要的設計分歧點。
而在開發(fā)階段,可以避免重復造輪子,提高開發(fā)的效率,保證落地效果,也可以減少上線前設計走查、測試的工作量。
2. 形成一致的設計風格
根據(jù)原子設計理論,通過原子組件的一致性,可以構(gòu)建出統(tǒng)一的界面框架、布局,形成統(tǒng)一風格和用戶交互認知,從而更好地保證用戶體驗質(zhì)量。
 
用戶體驗一致性思考
 
 
色彩
色彩作為一種兼具物理屬性與感官享受的復雜現(xiàn)象,其本質(zhì)在于光波在人體視網(wǎng)膜上的特定波長被反射或吸收后,所引發(fā)的視覺感知結(jié)果。在設計領域,色彩的選擇與運用不僅是視覺藝術(shù)的展現(xiàn),更是品牌身份與個性的直接體現(xiàn)。諸如餓了么標志性的藍色、美團鮮明的黃色、以及京東熱情的紅色等,這些品牌專屬色彩不僅構(gòu)成了品牌識別系統(tǒng)的重要組成部分,還通過其高度的一致性,在視覺層面上構(gòu)建起強烈的品牌認知,營造出統(tǒng)一和諧的視覺體驗。
色彩的一致性策略在品牌塑造中發(fā)揮著不可估量的作用,它能夠有效增強品牌的記憶度與辨識度,深化品牌形象在消費者心中的烙印,進而提升產(chǎn)品的市場吸引力和用戶忠誠度。同時,這種策略還促進了設計元素間的和諧共存,包括按鈕、圖標、字體、標簽、背景、以及關(guān)鍵視覺元素如Banner等,均能在統(tǒng)一的色彩體系下實現(xiàn)視覺上的連貫與流暢,極大地提升了產(chǎn)品的可用性、無障礙性,以及用戶在使用過程中的整體滿意度與交互體驗。
 
用戶體驗一致性思考
 
 
字體
字體作為設計中不可或缺的核心要素,其獨特性在于能夠精準地塑造文字的視覺形象,涵蓋形狀、尺寸、粗細、字間距等多維度特征。這些特征共同構(gòu)建了一種獨特的文字風格,不僅承載著信息的傳遞功能,更在無形中引導著用戶的視覺流程,影響著信息的接收與理解深度。因此,在設計過程中,合理選擇與應用字體顯得尤為關(guān)鍵。
 
字體類型的多樣性,如有襯線字體與無襯線字體的對比,不僅體現(xiàn)了風格上的差異,還隱含了不同的閱讀體驗與情感表達。字體的粗細變化(如細體、常規(guī)、粗體等)更是能夠強調(diào)文本的重要性層級,增強信息的層次感與可讀性。此外,字重的調(diào)整也是塑造視覺焦點、引導視線流動的有效手段,對于提升設計的整體美觀度和信息傳達效率具有不可小覷的作用。
 
然而,在實際的開發(fā)與實現(xiàn)過程中,若不加節(jié)制地使用多種字體,不僅會顯著增加頁面的加載時間,影響用戶體驗的流暢性,還可能因風格不統(tǒng)一而導致頁面顯得雜亂無章,破壞整體設計的和諧感。因此,制定一套統(tǒng)一、規(guī)范的字體使用策略顯得尤為重要。這不僅有助于提升開發(fā)效率,減少后期更新迭代的復雜度,還能有效避免資源浪費,確保設計作品在視覺上的一致性與專業(yè)性。
 
用戶體驗一致性思考
 
 
圖標
 
圖標作為用戶界面設計中至關(guān)重要的元素,風格直接影響到用戶的使用體驗與對產(chǎn)品的整體印象。圖標以其簡潔、直觀且富有表現(xiàn)力的特點,在快速傳達信息、引導用戶操作方面發(fā)揮著不可替代的作用。在設計中,圖標的設計與應用更是需要精心考量,以確保其既能夠準確傳達信息,又能夠與整體設計風格保持一致,從而營造出專業(yè)、和諧且易于使用的界面環(huán)境。
 
設計中視覺上保持統(tǒng)一包括圖標的大小、形狀、色彩以及設計風格等多個方面,能夠增強用戶的認知連貫性,降低學習成本,提升使用效率。相反,如果圖標風格混雜,不僅會讓界面顯得雜亂無章,還會給用戶帶來困惑和不安,進而影響其對產(chǎn)品專業(yè)性和安全性的信任。
用戶體驗一致性思考
 
 
按鈕
按鈕設計應統(tǒng)一于項目風格,無論是圓形、矩形、圓角矩形還是特定形狀,保持一致性是關(guān)鍵。統(tǒng)一的按鈕樣式不僅彰顯專業(yè)性,還能增強用戶信任,確保體驗連貫。過多變化的按鈕樣式會擾亂用戶界面,降低操作直觀性,甚至讓用戶誤以為自己已離開應用環(huán)境。因此,精心設計的統(tǒng)一按鈕樣式對提升用戶體驗至關(guān)重要。
 
排版
設計中的排版一致性對于構(gòu)建高效、用戶友好的界面至關(guān)重要。一致的排版不僅能夠讓用戶快速適應和理解界面的整體結(jié)構(gòu),大幅降低學習成本,還能在用戶心中激發(fā)強烈的歸屬感和安全感。這種熟悉感使得內(nèi)容更加易讀,用戶能夠自然地依照既定的視覺動線流暢地瀏覽頁面,迅速定位并獲取所需信息,從而顯著提升信息獲取的效率。因此,在設計過程中,注重并維護排版的一致性,是提升用戶體驗和界面有效性的重要策略之一。
 
 
用戶體驗一致性思考
 
 
 
操作流程的一致性
標準化流程:確保用戶在執(zhí)行相似任務時,如購買商品、搜索信息或提交表單等,能夠遵循相同的操作流程。這有助于用戶快速適應并高效完成任務。
邏輯清晰:操作流程的每一步都應符合用戶的認知習慣和行為邏輯,避免讓用戶感到困惑或不知所措。
用戶體驗一致性思考
 
 
交互元素的一致性
按鈕和控件:確保按鈕、輸入框、下拉菜單等交互元素的樣式、位置和操作方式在整個應用或網(wǎng)站中保持一致。例如,所有按鈕都應具有相同的視覺風格和觸發(fā)機制。
導航和菜單:導航欄和菜單的設計也應保持一致,使用戶能夠輕松地在不同頁面或功能之間切換。
 
用戶體驗一致性思考
 
 
反饋機制的一致性
操作反饋:當用戶執(zhí)行某個操作時,應用或網(wǎng)站應提供一致且及時的反饋,如加載動畫、成功提示或錯誤消息等。這有助于用戶了解操作結(jié)果并采取相應的行動。
狀態(tài)提示:對于長時間運行的操作或需要用戶等待的場景,應提供明確的狀態(tài)提示(如進度條),以減輕用戶的不確定感和焦慮感。
 
 
 
 
 
 
在任何維度上,一致性不應成為設計的唯一導向。設計,這一融合了藝術(shù)與科學的復雜領域,要求我們在用戶體驗的細膩雕琢、功能需求的精準滿足、美學價值的深刻體現(xiàn)及技術(shù)可行性的嚴格考量間游走。
 
“一致性”作為設計策略,其核心使命在于優(yōu)化用戶路徑,降低認知門檻,確保用戶在多元界面中穿梭時仍能感受到連貫與和諧。當我們在與設計團隊(包括工程師、產(chǎn)品經(jīng)理等)溝通時,僅僅提及“一致性”可能并不足以說明其必要性和價值。我們需要更深入地闡述為什么需要保持一致性,以及它如何具體幫助減少用戶困惑、提高用戶滿意度和忠誠度。
 
同時,我們應清醒認識到,“一致性”并不是萬能的。在某些情況下,為了追求極致的用戶體驗或解決特定的設計問題,可能需要打破傳統(tǒng)的一致性規(guī)則。因此,設計師需要在保持一致性和創(chuàng)新之間找到平衡點,根據(jù)具體情況靈活調(diào)整設計方案。
 
實際落地執(zhí)行時,要根據(jù)產(chǎn)品定位、用戶場景,結(jié)合業(yè)務功能來確定設計方案,不能為了一致而一致。
當我們遇到一致性問題時,還是需要從以下3個方面深入思考,做出準確合理的設計決策。
用戶體驗一致性思考
 
 
真實項目
真實項目
 
在SaaS產(chǎn)品設計中,特別是面向B/G端(企業(yè)用戶)時,滿足不同用戶角色(如普通用戶與高權(quán)限領導)的需求是至關(guān)重要的。
管理端布局設計
普通簡潔明了:為普通用戶設計的管理界面應簡潔直觀,聚焦于日常操作,如數(shù)據(jù)查看、統(tǒng)計和下載。
功能分區(qū):通過清晰的導航欄或側(cè)邊欄將功能區(qū)域劃分開,如“數(shù)據(jù)概覽”、“報表下載”、“任務管理”等,便于用戶快速定位所需功能。
操作便捷:確保常用操作(如搜索、篩選、排序)易于觸達,減少用戶點擊次數(shù)和頁面跳轉(zhuǎn)。
 
首頁版心定寬設計
固定寬度:為首頁設定一個合適的固定寬度(如1200px、1440px等),以保證內(nèi)容在大多數(shù)屏幕上都能保持一致的閱讀體驗。
信息模塊化:將首頁內(nèi)容劃分為多個卡片,每個卡片承載一個獨立的信息單元(如數(shù)據(jù)報表、通知公告、項目進展等)。
視覺層次:通過顏色、大小、陰影等設計元素區(qū)分卡片的重要性,引導用戶視線,提高信息獲取效率。
交互性:為卡片添加交互元素,如點擊展開、滑動查看更多等,增加用戶參與度和頁面活躍度。
 
用戶體驗一致性思考
 
 
位置差異性分析
根據(jù)「認知負荷>視覺負荷>動作負荷」理論,在頁面中我們首先要讓用戶能夠找到按鈕,然后完成操作。
相對于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側(cè)表單內(nèi)容區(qū)域。所以按鈕應該緊隨搜索條件,便于用戶快速發(fā)現(xiàn)按鈕。
區(qū)域用戶已經(jīng)形成下意識操作習慣,雖然區(qū)別于規(guī)范,只能打破,遵循客戶需求
用戶體驗一致性思考
 
 
一致性是規(guī)則
“一致性”作為規(guī)則或手段,服務于提升用戶體驗的原則。規(guī)則與原則一致時,促進業(yè)務共識與用戶價值;沖突時,原則優(yōu)先。用戶體驗原則指導下的一致性,要超越表面控件統(tǒng)一,更在于產(chǎn)品決策與價值取向的一致。必要時,為更好的用戶體驗,可在規(guī)則上讓步以實現(xiàn)原則統(tǒng)一。打破規(guī)則需慎重權(quán)衡,確保用戶便利足以彌補理解成本,需長期全局考量。規(guī)則非僵化教條,而是引導我們謹慎創(chuàng)新的框架。
 
一致性的底線
無論從哪個角度,一致性存在的必要性都是毋庸置疑的。
對于關(guān)鍵的設計元素,如專有名詞和顏色體系,保持一致性至關(guān)重要。這不僅有助于維護品牌形象,還能減少用戶的困惑。
特定設計語言在特定場景下的變體應用,雖然可能帶來一定的視覺新鮮感或針對性優(yōu)化,但往往需要謹慎評估其潛在風險。一旦變體打破了整體設計的一致性,可能會破壞用戶對品牌的熟悉感和信任感,甚至引發(fā)誤解。因此,在追求設計創(chuàng)新的同時,必須確保這種創(chuàng)新是基于一致性的原則之上,以維持品牌的整體性和用戶的良好體驗。
 
擁抱復雜性
一致性確實不應成為設計師的避風港或限制創(chuàng)新的枷鎖,而應是基于對業(yè)務深刻理解和多樣化設計能力之上的價值選擇。設計師的核心任務始終是滿足用戶的多樣化需求和偏好,這需要他們細致入微地觀察、理解并解決每個用戶的獨特問題。
 
在追求一致性的同時,設計師應保持“第一性思考”的能力,即回歸問題的本質(zhì),從用戶需求出發(fā)進行創(chuàng)新設計。多樣性頁面的產(chǎn)出,不僅體現(xiàn)了設計師的創(chuàng)造力和靈活性,也是提升用戶體驗、增強產(chǎn)品吸引力的關(guān)鍵。
 
一致性與創(chuàng)新設計并非相互排斥,而是相輔相成的關(guān)系。真正的一致性不應導致單調(diào)或拒絕創(chuàng)新,而應是在遵循品牌或產(chǎn)品核心價值的前提下,鼓勵設計師在細節(jié)和體驗上不斷探索和突破。當設計師感到被既定規(guī)則束縛時,應勇于質(zhì)疑并重新評估當前的規(guī)范,確保所謂的“一致性”不是刻板的偽命題,而是真正符合用戶需求和品牌發(fā)展的價值導向。
 
因此,設計師應時刻保持開放的心態(tài)和敏銳的洞察力,不斷探索和嘗試新的設計方法和理念,以更加靈活和創(chuàng)新的方式實現(xiàn)一致性與用戶需求的完美融合。
 
用戶體驗一致性思考
 
 
重要的設計原則
「一致性」作為設計領域中的一項基礎性原則,其重要性不言而喻。它不僅為設計過程提供了穩(wěn)固的基石,還顯著促進了開發(fā)效率與產(chǎn)品體驗的全面升級。在設計實踐中,一致性確保了界面元素的統(tǒng)一性和連貫性,使得用戶能夠迅速熟悉并掌握產(chǎn)品的使用方式,降低了學習成本,增強了操作的直觀性和便捷性。
靈活變通使用
一致性原則并非一成不變的強制規(guī)定,而是需要根據(jù)產(chǎn)品的具體定位和市場環(huán)境進行靈活變通的應用。不同的產(chǎn)品可能面向不同的用戶群體,擁有獨特的品牌調(diào)性和功能需求,因此在追求一致性的同時,也需充分考慮這些因素,確保設計既符合品牌特色,又能滿足用戶的實際需求。
 
提升用戶體驗是價值所在
一致性的真正價值在于其能夠顯著提升用戶體驗。通過遵循用戶的認知和習慣,設計師能夠創(chuàng)造出更加自然、流暢的操作流程,使用戶在享受產(chǎn)品功能的同時,也能感受到品牌所傳遞的舒適與和諧。因此,在追求設計一致性的過程中,我們始終應以人為本,將用戶的體驗和感受放在首位。建設有兼容性和長期價值的的一致性框架,在一致性中做到有用戶價值的設計,是設計師應該不斷探索的命題。

作者:cheny米魚
鏈接:https://www.zcool.com.cn/article/ZMTYzNTAzNg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

交互設計的核心:用戶體驗與創(chuàng)新思維的融合

天宇 交互設計及用戶體驗

在數(shù)字化時代,交互設計(Interaction Design)已成為產(chǎn)品成功的關(guān)鍵因素之一。無論是移動應用、網(wǎng)站還是智能設備,優(yōu)秀的交互設計都能為用戶帶來流暢、直觀的體驗。今天,我想和大家探討交互設計的核心要素,以及如何通過創(chuàng)新思維提升用戶體驗。

1. 以用戶為中心的設計理念

交互設計的核心是“以用戶為中心”。設計師需要深入理解用戶的需求、行為和痛點,通過用戶研究、原型測試等方法,確保設計能夠真正解決用戶問題。例如,簡潔的導航、清晰的反饋和一致的操作邏輯,都是提升用戶體驗的基礎。

2. 創(chuàng)新與功能的平衡

在追求創(chuàng)新的同時,設計師需要確保功能的實用性和易用性。過度復雜的設計可能會讓用戶感到困惑,而過于保守的設計則可能缺乏吸引力。如何在創(chuàng)新與功能之間找到平衡,是每個交互設計師面臨的挑戰(zhàn)。

3. 情感化設計的力量

交互設計不僅僅是功能的實現(xiàn),更是情感的傳遞。通過色彩、動畫、音效等元素,設計師可以創(chuàng)造更具吸引力和情感共鳴的體驗。例如,微交互(Micro-interactions)的巧妙運用,能夠增強用戶的參與感和滿意度。

4. 跨平臺與多設備的一致性

隨著用戶使用設備的多樣化,跨平臺設計變得越來越重要。設計師需要確保在不同設備和平臺上,用戶都能獲得一致且無縫的體驗。這不僅需要技術(shù)上的支持,更需要設計思維的全局觀。

5. 數(shù)據(jù)驅(qū)動的設計優(yōu)化

通過數(shù)據(jù)分析,設計師可以了解用戶行為,發(fā)現(xiàn)設計中的不足,并持續(xù)優(yōu)化產(chǎn)品。A/B測試、熱圖分析等工具,能夠幫助設計師做出更科學的決策,提升產(chǎn)品的整體表現(xiàn)。

31.png

結(jié)語

交互設計是一門融合藝術(shù)與科學的學科,它需要設計師不斷學習、實踐和創(chuàng)新。無論是新手還是資深設計師,我們都應保持對用戶需求的敏感,以及對技術(shù)趨勢的關(guān)注。期待大家在評論區(qū)分享自己的見解和經(jīng)驗,一起探討交互設計的未來!


希望能激發(fā)大家的討論和思考!如果你有更多想法或案例,歡迎留言交流

 

 

小功能大細節(jié)|掌握選擇控件設計

天宇 交互設計及用戶體驗

 

我們UI設計師在界面設計的時候經(jīng)常會使用到單選按鈕、復選框、開關(guān)這些選擇控件,它們是設計中經(jīng)常會使用到的讓用戶進行選擇的控件。盡管它們在用戶界面中是常用的組件,但設計師、產(chǎn)品經(jīng)理在為他們的任務選擇合適的組件時,仍然會有很多現(xiàn)實的麻煩,而我們則需要更認真地探究其中的細節(jié)。
良好的掌握每個組件的使用場景,可以更加積極的幫助用戶體驗產(chǎn)品。本文通過結(jié)合實際案例與思考,與各位分享這類選擇控件在web端的使用邏輯與細節(jié)差異,希望能對設計工作帶來一定的指導意義。
 
你是否有這種困惑?
當我們需要用戶在兩個選項中選擇一個選項時,在這種情況下可以使用三種控件:單個復選框、兩個單選按鈕或者開關(guān),那么我們應該如何做出抉擇呢?
感覺似乎使用Radio單選按鈕、Checkbox復選框和Switch切換開關(guān)這三個組件好像都是可以的。下面文中會對于這三個組件的基本特點、使用準則,以及常見場景等的探討來告知設計師們該如何去做出正確的選擇。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
要搞清楚這些組件的使用問題,我們需要來了解一下這些組件的由來與用法場景。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
選擇控件(Selection Control):是一種供用戶選擇不同選項的,常用于表單、設置頁等。它一般分為三類:單選按鈕(Radio)、復選框(Checkbox) 和開關(guān)(Switch)。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
一、選擇控件的由來與用法
不論是單選按鈕、復選框還是開關(guān),他們都能在現(xiàn)實世界中找到事例。這些組件是將現(xiàn)實生活中的事物映射反應到界面設計中,使得用戶可以更加簡單高效地理解他們本身所代表的交互含義,通過官方定義的“建議”用來指導標準化使用。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
二、選擇控件的差異
單選按鈕、復選框、開關(guān)組件它們都具有不同的時效性。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
單選按鈕/復選框本質(zhì)上只是變輸入為選擇的快捷方式,當需要用戶輸入的內(nèi)容只有幾種固定的格式時,可以通過變輸入為選擇,這樣不僅節(jié)約時間,也能避免輸入出錯,但這需要提托頁面中的其他觸發(fā)組件來保存和執(zhí)行這樣的操作。開關(guān)這類組件被點擊后會立刻執(zhí)行,并觸發(fā)界面或系統(tǒng)中可明顯被用戶感知到的某些變化。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
如何才能正確的選擇合適的控件,這就需要從了解每一個組件開始。
 
一、 Radio 單選按鈕
1. 了解單選按鈕按鈕的由來
單選按鈕(Radio)最早的設計模型來源于老式收音機上用于頻率和預設電臺之間切換的物理按鍵。當其中一個按鍵被按下時,所有其他的按鍵都會被彈出,被按下的那個按鍵就成為了唯一一個處于“按下”狀態(tài)的選中按鈕。
單選按鈕將這一物理特征進行了隱喻設計,是一種涇渭分明的表現(xiàn)。
但是感覺這樣的說法可能有些不嚴謹。從物理世界演化到UI后,這個組件有了交互上的變化,UI設計中的單選按鈕功能只是錄入內(nèi)容,并不立即執(zhí)行,而收音機的物理按鍵卻能立即觸發(fā)(換臺)操作,所以單選按鈕的使用是在不斷的演變中發(fā)展變化著,未來也許還有新的改變。
UI概念是由Xerox PARC的研究首次引入的,它是一家研發(fā)公司,應用業(yè)務涉及到常用的計算機技術(shù),包括:以太網(wǎng)、圖形用戶界面、編程、鼠標等。Xerox Star 8010工作站是第一款在圖形用戶界面中帶有單選按鈕的設備。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
2. 單選按鈕的特點
單選按鈕是將所有信息條件暴露給用戶,它不像開關(guān)在使用上帶有猜測、探索的必要。
1)
標識性:單選按鈕通常以圓形圖標的形式呈現(xiàn),旁邊附有文字說明,用于表示選項的內(nèi)容。這種設計使得單選按鈕易于用戶識別和操作。
2)
互斥性:僅允許用戶在一組選項中選擇其中一項。
3)
直觀性:每個單項選擇都非常直觀,它會公開所有可用選項,用戶能夠一眼看到所有可用的選項并做出選擇。如果希望用戶明確閱讀完所有選項,則最好使用單選按鈕。
4)
拓展性:單選按鈕的拓展性更強,相對于復選框、開關(guān)的布爾值,單選按鈕能承載兩個或兩個以上的選項。
5)
默認值:單選會提供默認值選項,且默認值可以承載具體內(nèi)容。
 
3.
單選組件的用法準則
單選按鈕是主要用于兩個或更多選項列表的選擇器,列表中的所有選項是相互排斥的,用戶必須清楚準確地選擇一個選項。
1)當用戶點擊一個未選擇的單選選項時,它將取消選擇先前選擇的任何其他選項。
2)要為用戶提供默認選項,確保它對于用戶來講是最安全或者最可能的選項。
3)選擇較少的情況下使用單選按鈕組件更好,但選項一旦較多,例如七八個的時候就不太適合一一展開,這會占用很多空間,因此將選項收起來放在下拉選單里會比較合適。
4)清楚表明單選按鈕各個狀態(tài),才能使用戶更明確使用,達到設計目的。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
4. 案例場景分析
1)讓用戶明確知道單選、復選的區(qū)別,強調(diào)各個選項的不同
不同的選項內(nèi)容,如果采用復選框,用戶需要在兩個差距較大的選項中去思考,延長考慮時間,使得用戶更為焦躁。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
2)開啟/關(guān)閉的單選狀態(tài),建議使用復選框
復選框?qū)τ诮^大多數(shù)用戶都是非常清楚,復選框?qū)τ谠诳臻g、視覺焦點上使用更為集中,如果只針對開啟/關(guān)閉的單選狀態(tài),則不建議選擇單選按鈕,推薦使用復選框。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
3)每個選項都關(guān)聯(lián)內(nèi)容時,使用單選按鈕
如果默認選項內(nèi)容設計的好,會讓更多人保持選擇默認選項。
在表單設計中一個不錯的默認選項,會讓很多人保持選擇默認選項,提升表單操作效率。下圖案例如果采用復選框或者開關(guān)控件,用戶就不得不去思考開啟后是什么,還要擔心理解開啟/關(guān)閉后帶來的影響,但對于絕大多數(shù)用戶來說,系統(tǒng)默認內(nèi)容無需改動,給用戶提供的默認選擇,一般是安全、方便的選項。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
4)較長需隱藏拆分的內(nèi)容情況,使用單選按鈕
在界面設計中,如果遇到的內(nèi)容需要重新組織或者拆分時,選擇使用單選按鈕組件。不僅能夠做到信息簡潔,也能夠提高用戶的瀏覽效率。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
5)垂直排列單選,信息閱讀更佳
如果選項文字名稱較長,需要添加說明,這時單選組件承載的信息較多,同時使用垂直排列的方式能讓用戶有一致的閱讀瀏覽方向,眼球動線移動幅度較小,信息獲取體驗更佳。如果選項文字較少,也可橫排不占用太多的垂直空間。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
6)提供默認選項,保持視覺分量相同
單選按鈕總是默認選中一個選項,不應該展示沒有默認選擇的單選組件。這個規(guī)則的唯一例外情況是在使用單選按鈕進行用戶問卷選擇時,使用單選按鈕在所有選項列表中要有相同的視覺分量,使用戶從列表中選擇任何選項的可能性是相等的。默認被選中的單選框設計可以為用戶提供明確的建議。默認的選項可以引導用戶做出最佳選擇,并增強他們繼續(xù)完成任務的信心。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
7)明確的可交互區(qū)域,讓用戶易于操作
單選按鈕、復選框是UI設計中最小的交互式元素之一,因此它們需要有一個易于訪問的點擊區(qū)域。單選組件交互操作時需要讓用戶不僅通過單擊或點擊該小控件,還可以單擊標簽相關(guān)聯(lián)的文本來選擇一個選項,確保用戶可以單擊單選控件或標簽文本上的任意一個選項時都易于操作。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
8)所有的選項要對齊
單選按鈕不應該有什么子選項,單選按鈕的設計初衷是讓用戶在多個選項中選擇一個,而不是在一個選項內(nèi)部進行進一步的選擇。單選按鈕通常與RadioGroup一起使用,用于將多個單選按鈕組合為一組,確保同一組內(nèi)的單選按鈕只能有一個被選中。錯誤的排列會讓用戶感到困擾,所有的選項要對齊放置在同一層級。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
9)選項小于等于5個,可使用單選按鈕
當選項小于5個,應考慮使用單選按鈕,
用戶可以不需要任何點擊或輸入操作即可馬上瀏覽所有選項并直接點擊選擇出來。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
10)選項只有且必須一個時,使用單選按鈕
當選項只能選擇一個,且必須選擇1個時,應使用單選按鈕。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
11)單選項確保選項既全面又互斥
如果無法保證全面,需提供“其他”選項,比如在婚姻狀態(tài)里,除已婚、未婚外,如果你不知道還有別的什么狀態(tài),最好提供“其他”選項作為補充,否則諸如離異、喪偶等情況會無法使用該系統(tǒng)。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
二、 Checkbox 復選框
1. 了解復選框組件
復選框的物理原型來自于紙張上的多選題,例如餐廳的菜單,選多選少互不影響,并且用戶傾向于用?這個符號來勾選,這個符號從古代商號記流水賬核查到現(xiàn)在教師批閱作業(yè)的“對勾”,無一不表示著“正確、認可”。它代表的是一種選擇,而現(xiàn)實中的多選題,往往是非時效性的,勾選之后不會立即生效。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
復選框既可以是單個選項,也可以是可供選擇的一組選項。當用戶可以選擇任意數(shù)量的選項,包括零個、一個或幾個時可使用復選框組件。集合中的每個復選框都獨立于其他所有復選框,因此選中一個復選框不會對其他復選框產(chǎn)生任何影響。而復選框讓用戶在兩個選項之間進行選擇,勾選后和未勾選表示則可表示“是/否、要/不要、開啟/關(guān)閉…” 等結(jié)果,準確的使用復選框也需要認清復選框的各種狀態(tài),才能更好的表示選項意義。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
2. 復選框的特點
1)直觀性:每個復選框通常由一個方框和一個標簽組成,標簽用于描述選項內(nèi)容,用戶可以通過點擊方框來切換其選中狀態(tài)。
2)非互斥性:復選框通常用戶表示一組非互斥的選項,即選擇一個不會影響其他選項狀態(tài)。
3)多選性:復選框允許用戶從一組選項中選擇一個或多個,與單選按鈕不同,復選框的選中狀態(tài)是獨立的,選項之間相互獨立且相關(guān),用戶可以同時選中多個復選框。
4)公開性:復選框可公開所有可用選項,用戶一眼能夠看到所有可用的選項并做出選擇。
5)靈活性:復選框可以用于多種場景,如在線調(diào)研、注冊表單等,能夠提高用戶體驗和效率。
3. 復選框的用法準則
1)為了方便用戶快速理解,復選框的選項內(nèi)容一般是一句話,不用逗號隔開。
2)父級復選框允許快速便捷選擇或取消選擇所有項目。
3)復選框表示狀態(tài),用戶可以延遲提交的交互操作。
4)復選框作為單選狀態(tài)時,操作對象和選項主體內(nèi)容視覺焦點是不分開的,選擇后就知道被選中了(比如登錄頁面中的用戶需知)。
5)復選框也可直接表示選項內(nèi)容的開啟、關(guān)閉。
 
4. 案例分析
1) 使用復選框代表用戶清楚會發(fā)生什么
如果使用單選或開關(guān),會發(fā)現(xiàn)視覺干擾特別嚴重,一般表單內(nèi)容不需要特別去強調(diào)每一個選項的開啟關(guān)閉狀態(tài)。如果排版受限制,可以將復選框放到標簽的右側(cè)對齊。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
2)復選框的標簽文本要措辭主動
使用復選框,要保證選項后標簽文本的措辭積極主動,而不是否定的。這將幫助用戶理解如果打開復選框會發(fā)生什么。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
3) 提前告知用戶,提示消息可減少復選框錯誤選擇概率
如果用戶必須從列表中選擇一些選項,您應該在用戶開始執(zhí)行之前告知用戶,通過顯示提示類似“您應該至少選擇X個選項”的消息,來減少用戶復選框錯誤選擇的機率。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
4)復選框生效需配合提交按鈕
一般情況下,復選框不會像開關(guān)一樣點擊后立即生效,它需要配合提交按鈕生效。所以用戶在提交前可查看選擇的內(nèi)容是否正確,更有助于信息防錯。如果在設置頁面,復選框也可單獨作為設置且立即生效。
復選組件的選項信息和復選框在一起,特別是對于批量填寫或設置多個字段,使用復選框效率更高。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
5)用復選框控制表單局部細節(jié)
如果控制對象的功能是表單頁面的一個局部或信息內(nèi)容不多,用戶也清楚了解選擇后是什么,這種時候復選框更適合。我們不需要過重的給用戶強調(diào)是什么,用復選框比使用開關(guān)能使得表單結(jié)構(gòu)內(nèi)容更清晰。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
6)多選項使用復選框
在表單中,同個問題中提供多個選項時,使用復選框。勾選能直接表明“要”或“不要”。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
7)有且只有一個明顯選項時,用復選框
只有“選擇”或”取消選擇”一個顯而易見的選項時,更適合使用復選框。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
8)存在父子嵌套關(guān)系的分組,多選項能清晰表達中間選擇狀態(tài)。
未全選中中間狀態(tài)表示在列表中選擇了多個子選項(但不是全部),這時,開關(guān)按鈕不能表示部分選項被選中的狀態(tài),單選按鈕亦不能表示嵌套關(guān)系。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
三、 Switch 開關(guān)
1. 了解開關(guān)組件
開關(guān)組件是現(xiàn)實生活中仿照物理開關(guān)按鈕在界面設計中的映射,提供了兩種最簡單、直接的對立選項,比如開/關(guān)、啟動/禁用等。它就像生活中控制燈泡的開關(guān),當我們?nèi)ゲ僮鏖_關(guān)時,燈泡會點亮或者熄滅,會對事物立即產(chǎn)生影響。它的意符必須明確,不然用戶不知道即將要啟動或者關(guān)閉什么
。
小功能大細節(jié)|掌握選擇控件設計
 
 
 
在界面設計中,開關(guān)也同樣具備即時觸發(fā)的特性,如打開Wi-Fi、開啟暗黑模式等,
由于開關(guān)具備很明顯的在用戶心中扎根的隱喻心智,相較于復選組件而言,操作前后的狀態(tài)更明顯,感知更強烈。
開關(guān)組件提示用戶在兩個互斥選項中進行選擇,并且總是有一個默認值。當用戶必須回答是或否問題和二進制操作,如啟用或禁用特定設置時,它是最合適的組件。開關(guān)組件也屬于雙態(tài)按鈕,是指有開和關(guān)兩個兩種狀態(tài),是在兩個狀態(tài)之間切換。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
在使用開關(guān)組件時要注意需要提供足夠的視覺反饋,告知用戶什么狀態(tài)下是開著的。
 
2. 開關(guān)組件的特點
1)直觀性:開關(guān)切換組件的設計通常很直觀,開關(guān)主體選項信息和開關(guān)組件是分離的,兩個視覺焦點,用戶可以通過滑動滑塊來改變狀態(tài),而不需要閱讀額外的說明和標簽。
2)二元性:開關(guān)切換組件表示兩種相反且互斥的狀態(tài),通常多用在表示“開啟/關(guān)閉”,主要在選項中來回切換,這種二元性使得它非常適合于需要明確狀態(tài)切換的場景。
3)及時性:當用戶操作開關(guān)時,相關(guān)的功能和設置會立即給予用戶反饋,無需額外的確認步驟。
4)易用性:開關(guān)組件簡單易懂,即使技術(shù)不太熟悉的用戶也能快速學會如何使用。
5)可訪問性:現(xiàn)在的開關(guān)設計考慮到可訪問性,確保所有用戶,包括有視覺或運動障礙的人,都能方便地使用。
3. 開關(guān)組件的用法準則
1)當用戶點擊一個開關(guān)時,其對應的動作立即生效。
2)由于開關(guān)顯示實際狀態(tài),所以有時狀態(tài)變化會有延遲。在這種情況下,可使用"處理中"的狀態(tài)動畫,減少用戶焦慮。
3)開關(guān)組件沒有hover效果,有動作效果,用手指的切換更容易,這個組件非常適合應用于移動設備。
4)避免使用開關(guān)控制局部細節(jié)或者次要的設置,開關(guān)的視覺權(quán)重比較高,所以用它控制內(nèi)容較多更為合適,比如可以將它作為總開關(guān)打開或關(guān)閉一組設置。
5) 通常不要用開關(guān)替代復選框,如果在規(guī)范中定義了復選框,則盡可能保持一致的使用規(guī)范。
6)對象名稱要傳達清晰,讓用戶能夠明確感知操作后的動作開啟或關(guān)閉什么。
7)撥動開關(guān)的滑塊后如果狀態(tài)切換失敗,要馬上彈回來。
8)開關(guān)的規(guī)范做法是滑塊在左為“關(guān)”狀態(tài),在右邊為“開”。
9)由于開關(guān)會立即執(zhí)行,所以若是危險的操作需要用戶再次確認。
4. 案例場景分析
1)開關(guān)的文本內(nèi)容意思需傳達清晰開關(guān)主體的信息和按鈕是分離的,和單選、復選框不一樣。
用戶在點擊開關(guān)按鈕前,必須清晰告知用戶點擊后會發(fā)生什么,有時需要通過增加副標題文字內(nèi)容來加以說明。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
2)立即生效的場景一般使用開關(guān)組件
在表單填寫時,往往最終會有「提交」按鈕作為結(jié)束態(tài),開關(guān)作為表單字段的填寫,用戶點擊后并不能夠立即生效,而是需要再次點擊「提交」按鈕,這樣處理會讓開關(guān)的特點所滯后。所以開關(guān)組件應該提供即時生效的結(jié)果,它們不應該要求用戶單擊保存或者提交按鈕來應用新狀態(tài)。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
3)著重提醒用戶有風險
開關(guān)的視覺權(quán)重較高,在復雜的表單信息中,它能夠快速吸引用戶注意力,給用戶以視覺提醒。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
4)避免大面積使用開關(guān),可使用它控制局部細節(jié)或者次要設置
開關(guān)在視覺感知上和按鈕有些接近,所以盡可能避免在表單中大量使用開關(guān)來控制局部層級內(nèi)容,推薦使用復選框來替代開關(guān)作為局部內(nèi)容控制。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
5)作為高層級內(nèi)容控制或信息設置
開關(guān)作為總控制來顯示更高層級內(nèi)容,避免web表單中過多使用開關(guān)按鈕,會和其他的基本組件造成視覺干擾。少量使用既凸顯其重要性,又能提升用戶瀏覽表單的效率。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
6)避免寫“開啟/關(guān)閉”帶動詞含義的字在組件上
如果要將說明文本放在按鈕里面,它們會讓人搞不懂是表示當前狀態(tài)還是表示切換后的狀態(tài),此時如果圖形本身狀態(tài)辨認度較低,就會使這個問題尤為嚴重。所以,在設計開關(guān)時,一定要分別用艷麗和暗淡的顏色來表示開和關(guān)狀態(tài)。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
7)語序和狀態(tài)要一致
用戶有可能不知道當前點擊狀態(tài)到底是開啟還是關(guān)閉。我們可以使用文案輔助來清晰地傳達意圖和反饋。如以下場景,在文案中添加【開啟】二字結(jié)合開關(guān)按鈕使用,能有效減少用戶對于按鈕與文案之間關(guān)系的思考。請勿使用文案是“關(guān)閉”作為開啟的語序,增加理解成本。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
 
小功能大細節(jié)|掌握選擇控件設計
 
 
 
1. 單選按鈕、復選框、開關(guān)組件在正確使用時需特別注意哪些?
1)選擇控件的已選狀態(tài)應該要比未選狀態(tài)更加醒目。
2)我們把選擇控件所代表的內(nèi)容稱為標簽,標簽文本都應該簡潔易懂,
避免使用否定詞匯,否則用戶還需要繞彎理解。開關(guān)標簽被誤解尤為常見,如“請勿打開”、“補光燈關(guān)閉“、“延時關(guān)閉”這些都是不好的,它們都有否定詞。
3)把控件圖標+文字一起作為可點擊區(qū)域,會使用戶操作更方便。
2. 明確清楚單選按鈕、復選框、開關(guān)各組件的使用方法,才能設計出更加好用易用的產(chǎn)品。
1)單選組件承載的信息量較多,如果希望用戶對比感知到兩者信息的明顯不同,那么推薦使用單選組件。
2) 復選框組件適用和拓展性極強,即可以單獨作為設置使用,也不用配合其他提交按鈕作為表單填寫的一部分。
3)開關(guān)在表單結(jié)構(gòu)、各種控件內(nèi)容較多時,需要頁面清晰、避免過多的視覺突出,所以盡量避免讓無數(shù)個開關(guān)組件在表單中使用。
理論只是指導實踐的一部分,上述內(nèi)容方法可能只在用戶認知和易用性之間,找到一個相對平衡點,在未來的設計中具體的使用場景情況,還是要具體問題具體分析。
 
小功能大細節(jié)|掌握選擇控件設計
 
 
文中主要概括總結(jié)了單選按鈕、復選框、開關(guān)的使用規(guī)范及案例。設計規(guī)范只是基于產(chǎn)品本身建立的一個標準,為了保持后續(xù)視覺統(tǒng)一而提供規(guī)范化的參考。
在實際的工作設計中,設計規(guī)范主要起到指導作用,每個產(chǎn)品需要根據(jù)各自的屬性特點和使用場景進行靈活調(diào)整,讓組件規(guī)范個性化匹配自身產(chǎn)品的特點。
設計規(guī)范只是設計執(zhí)行中一個基本準則和使用標準,遵循的同時既要根據(jù)各產(chǎn)品中不同的設計細節(jié),查缺補漏、迭代優(yōu)化,將產(chǎn)品亮點與規(guī)范達到一種平衡,在標準的基礎上突出自身產(chǎn)品特點,讓其更具有優(yōu)秀的代表性。以上總結(jié)如果不妥之處,望大家交流指正,一起探討學習。
 


作者:七色熒火
鏈接:https://www.zcool.com.cn/article/ZMTYzNTM4NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
 

用戶界面優(yōu)化的實用技巧與案例分享

ui設計分享達人 交互設計及用戶體驗

在用戶界面設計中,即使是一些微小的調(diào)整,也能大大提升用戶體驗和用戶的參與度。最近,我和一位學生一起優(yōu)化了一款移動應用的界面設計。雖然最初的設計已經(jīng)有了不錯的基礎,但還缺少讓人眼前一亮的層次感和視覺吸引力。經(jīng)過一些簡單的調(diào)整,我們讓設計變得更好用、更美觀。在這篇文章中,我會分享設計前后的對比,并詳細講解我們具體做了哪些改動。
小調(diào)整,大提升:用戶界面優(yōu)化的實用技巧與案例分享
 
 
從個人資料頁面的設計開始,我注意到它的布局簡潔而有條理,但有幾個問題讓人感覺有些平淡:
  •  
    缺乏視覺層次:所有元素都有相似的視覺權(quán)重,這讓用戶很難快速識別最重要的操作。
  •  
    按鈕樣式:推薦和獎勵 "按鈕與布局的其他部分融為一體,失去了成為焦點和引導用戶互動的機會。
  •  
    深度和間距:陰影和色彩對比的缺失造成了設計的扁平化,影響了可用性和導航功能。
 
微小改動帶來的變化
小調(diào)整,大提升:用戶界面優(yōu)化的實用技巧與案例分享
 
 
以下是我們?nèi)绾胃倪M個人檔案頁面以及使其更加生動的具體調(diào)整:
  •  
    增強視覺層次:我們?yōu)?“推薦和獎勵 ”按鈕添加了明亮的藍色背景并略微抬高,使其成為明確的焦點,鼓勵與這一關(guān)鍵功能進行互動。
  •  
    改進間距和分組:調(diào)整元素之間的間距并對相關(guān)項目進行分組,使布局更有條理,幫助用戶區(qū)分 “設置與偏好 ”和 “支持 ”等部分。
  •  
    使用圖標和排版:我們對圖標和排版進行了改進,使外觀更加簡潔。圖標有了更多的空間,文字樣式強調(diào)標題而不是副標題,使內(nèi)容更易于掃描。
分析主頁設計
小調(diào)整,大提升:用戶界面優(yōu)化的實用技巧與案例分享
 
 
現(xiàn)在,讓我們來看看應用程序的主頁。設計看起來還可以,但感覺很平淡,而且不容易瀏覽。原始布局的主要問題是
  •  
    視覺清晰度:設計扁平,更像是一個線框,地圖圖像在視覺上無法吸引用戶。
  •  
    內(nèi)容分組:元素的樣式千篇一律,使界面感覺單調(diào)。最近地點 “和 ”交通更新 "等關(guān)鍵部分缺乏差異化。
  •  
    互動元素:天氣警報 "等互動元素并不突出,可能會讓用戶對可操作的項目感到困惑。
改進主頁
我們對主頁進行的調(diào)整提高了可用性和參與度:
  •  
    突出行動區(qū)域:主頁“、”工作 “和 ”收藏夾 "等主要按鈕采用了獨特的圖標和間距,使常用部分易于定位。
  •  
    地圖增強:對比度更強、更生動的地圖,加上微妙的高低起伏,成為一個明顯的焦點,同時又不會喧賓奪主。
小調(diào)整,大提升:用戶界面優(yōu)化的實用技巧與案例分享
 
 
  •  
    內(nèi)容區(qū)分:將 “公共交通 ”和 “交通更新 ”等關(guān)鍵部分與對比鮮明的背景進行分組,提高視覺掃描效果。
  •  
    強調(diào)警報:交通和天氣警報用獨特的顏色和圖標來吸引用戶的注意力,幫助用戶快速識別關(guān)鍵信息。
小調(diào)整,大提升:用戶界面優(yōu)化的實用技巧與案例分享
 
 
在設計中應用這些概念
如何將這些設計策略應用到你的項目中?以下是一些提示:
  •  
    確定關(guān)鍵元素:首先要明確哪些元素需要強調(diào)。建立一個視覺層次,突出關(guān)鍵操作--比如個人資料頁面上的 “推薦和獎勵 ”卡片。
  •  
    對類似元素進行分組:將類似的項目組織成不同的部分,如將個人資料信息與 “推薦和獎勵”、“設置 ”和 “支持 ”進行分組,使布局更加直觀。
  •  
    添加描述性小標題:小標題可提供清晰度,通過明確標注內(nèi)容和引導用戶完成選項來增強用戶體驗。
  •  
    使用顏色層次和對比:選擇對比鮮明的顏色來營造視覺上的區(qū)別,例如使用淺藍色背景搭配深藍色圖標,營造出協(xié)調(diào)而醒目的效果。
  •  
    小竅門:開發(fā)一個調(diào)色板,每種顏色的色調(diào)從 100 到 950 不等,以確保各元素之間的靈活性和一致性。
增強定位頁面設計
讓我們利用這些經(jīng)驗來改進下面的設計:
定位頁面給人的感覺有點平淡,所以我們要努力讓它更吸引人。與其使用圖片,不如嘗試使用圖標,使整個用戶界面的設計保持一致。通過添加多個部分來調(diào)整布局,也有助于組織內(nèi)容,使導航更容易。
小調(diào)整,大提升:用戶界面優(yōu)化的實用技巧與案例分享
 
 
最初的調(diào)整會讓版面看起來更有條理,但可能還是會讓人覺得缺乏個性。首先,我讓 “固定位置 ”部分更加緊湊。
小調(diào)整,大提升:用戶界面優(yōu)化的實用技巧與案例分享
 
 
然后,我設計了一個調(diào)色板,以增加獨特性和個性。
小調(diào)整,大提升:用戶界面優(yōu)化的實用技巧與案例分享
 
 
在調(diào)色板中,選擇四種搭配得當?shù)闹攸c色調(diào)。較淺的色調(diào)(如 50 號色調(diào))可用于背景,而較深的色調(diào)(如 400 號色調(diào))則可突出前景元素。
小調(diào)整,大提升:用戶界面優(yōu)化的實用技巧與案例分享
 
 
以下是 “地點 ”頁面的最終設計,展示了設計前后的對比:
小調(diào)整,大提升:用戶界面優(yōu)化的實用技巧與案例分享
 
 
設計師的主要收獲
  •  
    小改動,大影響:對間距、對比度和深度進行簡單調(diào)整,就能顯著提升用戶體驗。
  •  
    考慮視覺層次:利用顏色、大小和位置在界面中創(chuàng)造自然的流程,引導用戶進行重要操作。
  •  
    創(chuàng)造深度和焦點:即使是增加微妙的深度,也能讓界面看起來更精致、更專業(yè)、更直觀。


作者:馬克筆設計留學
鏈接:https://www.zcool.com.cn/article/ZMTY0OTA3Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

AI 時代下,交互設計師要掌握哪些能力?

藍藍設計的小編

在 AI 技術(shù)迅猛發(fā)展的當下,交互設計領域正經(jīng)歷著深刻變革。交互設計師要想在這個新時代站穩(wěn)腳跟并有所建樹,需要掌握一系列與時俱進的能力。
對 AI 技術(shù)的理解與運用能力是基礎。交互設計師不必成為 AI 技術(shù)專家,但要深入了解 AI 的基本原理、應用場景和局限性。例如,了解自然語言處理技術(shù)如何實現(xiàn)智能語音交互,圖像識別技術(shù)怎樣用于圖像搜索和分類等。只有這樣,才能將 AI 技術(shù)巧妙融入交互設計中。比如設計一款智能客服界面,設計師了解 AI 的對話邏輯后,就能優(yōu)化界面布局,合理展示 AI 給出的回答,同時設計方便用戶反饋和糾錯的入口,提升用戶與智能客服交互的流暢性。
 
用戶洞察能力的深化至關(guān)重要。AI 時代,用戶對交互體驗的期望更高,他們渴望更個性化、智能化的服務。交互設計師要借助 AI 工具,如大數(shù)據(jù)分析、用戶行為監(jiān)測等,更精準地洞察用戶需求和行為模式。通過分析用戶在 APP 中的瀏覽歷史、操作習慣等數(shù)據(jù),挖掘用戶潛在需求,進而設計出更貼合用戶心意的交互流程。比如在一款音樂 APP 中,依據(jù) AI 分析用戶的音樂偏好,為用戶精準推送個性化的歌單,提升用戶的使用滿意度。
 
跨學科協(xié)作能力不可或缺。AI 項目往往涉及多個領域的專業(yè)知識,交互設計師需要與 AI 工程師、數(shù)據(jù)科學家、產(chǎn)品經(jīng)理等緊密合作。在協(xié)作過程中,要能夠清晰表達自己的設計理念,理解其他專業(yè)人員的技術(shù)語言和工作內(nèi)容。例如在開發(fā)一款智能駕駛座艙交互系統(tǒng)時,交互設計師要與工程師溝通,確保設計的交互界面符合車輛的技術(shù)架構(gòu)和安全標準,同時向產(chǎn)品經(jīng)理闡述設計方案如何提升用戶體驗,共同打造出優(yōu)秀的產(chǎn)品。
創(chuàng)新設計思維能力是關(guān)鍵。AI 為交互設計帶來了無限可能,設計師要敢于突破傳統(tǒng)思維模式。例如,基于 AI 的情感識別技術(shù),設計出能根據(jù)用戶情緒變化調(diào)整界面風格和內(nèi)容推薦的產(chǎn)品。或是利用 AI 生成式設計,快速探索多種設計方案,從中找到創(chuàng)新的交互形式,為用戶帶來前所未有的體驗。
數(shù)據(jù)素養(yǎng)能力也不容忽視。交互設計師要學會分析和解讀數(shù)據(jù),通過數(shù)據(jù)評估設計方案的優(yōu)劣。例如,通過 A/B 測試數(shù)據(jù),了解不同交互設計方案下用戶的轉(zhuǎn)化率、留存率等指標,以此為依據(jù)優(yōu)化設計。同時,要能從數(shù)據(jù)中發(fā)現(xiàn)問題和趨勢,為設計方向提供數(shù)據(jù)支持。
 
在 AI 時代,交互設計師只有不斷提升自身能力,融合技術(shù)與設計思維,才能創(chuàng)造出更具價值、更符合用戶需求的交互體驗,在行業(yè)中保持競爭力。

ui設計公司教你從0認識交互設計

藍藍設計的小編

交互設計是很多設設計師心向往之的領域,很多設計師在進入職場一兩年后,會開始思考如何轉(zhuǎn)型交互設計師?除了這個學科本身的魅力之外,它還賦予設計師的很多其他價值。那如何去學習交互設計呢?作為一名交互設計師,我想整理一套交互設計體系知識,結(jié)合自己的學習和項目經(jīng)驗寫到文章中分享給大家看,希望能對大伙轉(zhuǎn)行交互設計有一些些幫助!全文多達10000+字,閱讀時間會比較久,感謝你的細心閱讀,如你有建議可反饋留言!

 

 

 

 

 

 

 

 

1、關(guān)于設計名詞

 

在全面走進交互領域之前,我們可以先了解一些基礎設計名詞,行業(yè)有很多與設計相關(guān)的術(shù)語名詞,例如UI、GUI、UE/UX、HMI、HCI、HF、IXD、ID、VD等等。行業(yè)招聘信息里也經(jīng)常會有很多名詞術(shù)語,如下圖。由于設計的關(guān)聯(lián)性很強,很多時候我們被這些名詞弄得頭暈,對自己的職業(yè)規(guī)劃和定位也變得模糊。

 

 

 

 

 

1.1、設計名詞的分類

 

1.1.1、按照設計學科

 

從學科角度,我查閱了大量的資料,分類如下:人因工程,工業(yè)設計,交互設計,用戶體驗設計,視覺傳達設計等學科。涵蓋了國內(nèi)外高校開設的學科專業(yè)。用戶體驗設計在行業(yè)里已經(jīng)被普及,但目前在高校中還是比較少的。不過用戶體驗設計已然是大勢所趨,越來越被重視。

 

 

人因工程:簡稱HF(Human Factors Engineering),是研究人、機、環(huán)境三者之間關(guān)系的學科;(美國稱人類工程學,西歐稱人類工效學,日本稱人間工學,國內(nèi)命名更多如:人機工程學,人體工程學、工程心理學等),關(guān)于這類知識大家可以看看華為設計師的課程《基于人因的用戶體驗設計課程》

 

 

定義1:根據(jù)國際人類工效學學會于2000年的定義:“人類工效學(Ergonomics)是研究人在某種工作環(huán)境中的解剖學、生理學和心理學等方面的各種因素;研究人和機器及環(huán)境的相互作用;研究在工作中、生活中和休息時怎樣統(tǒng)一考慮工作效率、人的健康、安全和舒適等問題的學科。

 

 

定義2:中國企業(yè)管理百科學全書:研究人和機器、環(huán)境的相互作用及其合理結(jié)合,使設計的機器和環(huán)境系統(tǒng)適合人的生理心理等特征,達到在生產(chǎn)中提高效率、安全、健康和舒適的目的。

 

 

工業(yè)設計:簡稱ID(Industrial Design),指以工學、美學、經(jīng)濟學為基礎對工業(yè)產(chǎn)品進行設計;工業(yè)設計又稱工業(yè)產(chǎn)品設計學,工業(yè)設計分為產(chǎn)品設計、環(huán)境設計、傳播設計、設計管理4類。工業(yè)設計涉及到心理學,社會學,美學,人機工程學,機械構(gòu)造,攝影,色彩學等。

 

交互設計:簡稱IXD(Interaction Design),關(guān)于交互設計部分的詳細內(nèi)容,在后文再講解,包括交互設計的發(fā)展、概念、重要性、核心要素、入門要求等;

 

人機交互:簡稱HCI(Human–computer interaction)或HMI(Human–machine interaction),是一門研究系統(tǒng)與用戶之間的互動關(guān)系的學問。系統(tǒng)可以是各種各樣的機器,也可以是計算機化的系統(tǒng)和軟件——摘自維基百科。

 

用戶體驗設計:簡稱UED/UXD(User experience Design),是以用戶為中心的一種設計手段,以用戶需求為目標而進行的設計;用戶體驗:簡稱UE/UX(User experience)

 

視覺傳達設計:簡稱VD(Visual design),是為傳播特定事物通過可視形式的主動行為。大部分或者部分依賴視覺,并且以標識、排版、繪畫、平面設計、插畫、色彩及電子設備等二度空間的影像表現(xiàn);

 

1.1.2、按照載體媒介

 

用戶界面:簡稱UI(User Interface),是指對軟件的人機交互、操作邏輯、界面美觀的整體設計;是系統(tǒng)和用戶之間進行交互和信息交換的媒介,它實現(xiàn)信息的內(nèi)部形式與人類可以接受形式之間的轉(zhuǎn)換

 

圖形用戶界面:簡稱GUI(Graphical User Interface),是指采用圖形方式顯示的計算機操作用戶界面;是一種人與計算機通信的界面顯示格式,允許用戶使用鼠標等輸入設備操縱屏幕上的圖標或菜單選項,以選擇命令、調(diào)用文件、啟動程序或執(zhí)行其它一些日常任務。

 

人機界面:簡稱HMI(Human–machine interaction),人機界面(又稱用戶界面或使用者界面)是系統(tǒng)和用戶之間進行交互和信息交換的媒介, 它實現(xiàn)信息的內(nèi)部形式與人類可以接受形式之間的轉(zhuǎn)換。凡參與人機信息交流的領域都存在著人機界面。ps:HMI這個概念在上文也提到,在學科領域可用來代表人機交互。

 

Ui和GUI、HMI差別是什么,UI (用戶界面)是一個廣泛的概念,包括硬件和軟件設計,包括GUI,HMI;GUI是用戶圖形界面,僅指軟件視覺界面,HMI是人機界面,與人信息交流的界面。

 

1.1.3、按照設計模式

 

以用戶為核心的設計:UCD(User Centered Design)是指以用戶為中心的設計。是在設計過程中以用戶體驗為設計決策的中心,強調(diào)用戶優(yōu)先的設計模式;在進行產(chǎn)品設計、開發(fā)、維護時從用戶的需求和用戶的感受出發(fā),圍繞用戶為中心進行產(chǎn)品設計、開發(fā)及維護,而不是讓用戶去適應產(chǎn)品。無論產(chǎn)品的使用流程、產(chǎn)品的信息架構(gòu)、人機交互方式等,以UCD為核心的設計都時刻高度關(guān)注并考慮用戶的使用習慣、預期的交互方式、視覺感受等方面。

 

以技術(shù)為核心的設計:TCD(TechnologyCentered Design)是指以技術(shù)手段為中心的設計。

 

以商業(yè)為核心的設計:BCD(Business Centered Design)是指以商業(yè)價值為中心的設計。

 

 

設計名詞整理的大致就介紹這么多了,那么本文重點的交互設計和這些學科之間的關(guān)系又是怎么樣的呢?用下圖這個圖表展示他們之間的關(guān)系。——摘自 丹•塞弗《交互設計基礎》

 

 

 

 

 

 

 

 

2、了解交互設計

 

2.1、交互設計的故事

 

1959年,第一篇關(guān)于人機頁面的文章問世,交互設計首以人機交的形式,作為填補缺乏適用于設計數(shù)字產(chǎn)品的可用技術(shù)和工具出現(xiàn);1960年,Liklider通過分析人與電子計算機之間合作互動的一種預期發(fā)展,提出“人機共棲”概念;20世紀80年代初:兩位工業(yè)設計師比爾·莫格里奇和比爾·韋普朗克著手設計第一臺筆記本電腦GRiD Compass,他們?yōu)樽约旱墓ぷ鲃?chuàng)造了“交互設計”一詞;這個詞在10年后才開始被設計師重新發(fā)現(xiàn)并進入主流;1999年,國際標準化組織(ISO)發(fā)布了“以人為中心”的交互式產(chǎn)品設計原則和程序規(guī)范;2005年交互設計協(xié)會(IxDA)成立;2012年IxDA正式推出首次年度“交互設計獎”,交互設計才算是正式起飛。

 

 

 

 

 

 

 

 

2.2、交互設計的定義

 

關(guān)于交互設計的概念,國內(nèi)外組織或?qū)W者有不同的定義,如下圖:

 

 

 

 


交互設計,又稱互動設計(Interaction Design, 縮寫 IxD 或者 IaD),是定義、設計人造系統(tǒng)的行為的設計領域。在于定義人造物的行為方式(the “interaction”,即人工制品在特定場景下的反應方式)相關(guān)的界面。——來自IxDC

 

交互設計是設計交互式數(shù)字產(chǎn)品的、環(huán)境、系統(tǒng)和服務的實踐,交互設計的焦點是如何設計行為,交互設計的首要目標是滿足人的需求和欲望。——艾爾庫伯(交互設計精髓的作者)

 

定義、設計人造系統(tǒng)的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內(nèi)容和結(jié)構(gòu),使之互相配合,共同達成某種目的。交互設計努力去創(chuàng)造和建立的是人與產(chǎn)品及服務之間有意義的關(guān)系,以“在充滿社會復雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設計的目標可以從“可用性”和“用戶體驗”兩個層面上進行分析,關(guān)注以人為本的用戶需求。——來自 李世國 顧振宇.《普通高等教育工業(yè)設計專業(yè)“十二五”規(guī)劃教材——交互設計》2012年

 

 

 

2.3、交互設計的對象

 

最早期的設計,我們可以追溯到工業(yè)設計時期,作為設計領域?的鼻祖,它是以“產(chǎn)品“為設計對象,而交互設計對象是“行為”,交互設計師會關(guān)注與“行為”相關(guān)因素作為設計的考量。而不僅限于產(chǎn)品的物理屬性(外觀、結(jié)構(gòu)、功能、材料);

 

以小米的“小愛音箱”為例。小米通過它將家庭中的電子設備實現(xiàn)了互聯(lián),它新奇的用戶體驗被很多用戶追捧。我們可以在小米現(xiàn)有的音箱產(chǎn)品中,找到和傳統(tǒng)音箱的一些區(qū)別;

 

 

 

 

小愛音箱系列產(chǎn)品已經(jīng)陸續(xù)發(fā)布了5款,從初代的藍牙音箱到觸屏、語音音箱,我們可以從產(chǎn)品的迭代中感受到音箱交互行為(語音交互到屏幕手勢操控)變化的一些特點。

 

 

 

 

 

 

當用戶在使用小愛音箱的時候,已經(jīng)不局限于聽音樂,它作為小米Alot產(chǎn)品生態(tài)的連接中樞,用戶更享受通過頁面操控和語音交互來控制其他lot產(chǎn)品的快感。當用戶回家,向小愛音箱發(fā)出語音指令“小愛同學,我回來了”,和音箱連接的所有l(wèi)ot 設備都能同步打開,當用戶在回家后,還可以通過操作小愛音箱界面設置熱水器的水溫。

 

 

 

 

 

 

傳統(tǒng)音箱最原始的需求是音樂播放,隨著音箱使用要求的升級,人們對于聲音的品質(zhì)追求也變得更高了,廠商想盡方法制造出新的產(chǎn)品提升聲音的播放質(zhì)量,例如丹拿音箱的出現(xiàn)大大提升了聲音播放的品質(zhì)。

 

 

 

 

 

 

 

當用戶在使用小愛音箱和家中的其他Alot產(chǎn)品交互的過程中,很少會在意小愛音箱本身的物理屬性,他們更在乎這種創(chuàng)新式的交互如何改變的自己的家庭生活,譬如通過語音交互幫自己打開壁燈,打開電視、打開掃地機器人或通過觸摸屏界面來設置調(diào)節(jié)其他Alot設備的運轉(zhuǎn)狀態(tài)等,應用到各種家庭使用場景。

 

2.4、交互設計的行為要素

 

關(guān)于交互設計的行為要素我們通過下面兩個例子來解析:

 

1:理想L9后排電視手勢交互操作:

之前號稱對飆500萬庫里南的新能源汽車理想L9已經(jīng)發(fā)布很長一段時間了,這輛車最大的特色就是智能座艙的全新體驗升級,針對家庭使用場景的設計有很多。其中手勢交互是一個比較新穎的設計點,手勢交互的行為有懸停獲取焦點,平移切換,兩次抓握確認。

 

 

 

 

 

 

使用場景舉例:一家四口去外地郊游,家里的成員哥哥想打開后排的電視機看電視打發(fā)無聊的旅途,他使用了手勢交互去操作選擇影視進行播放。

 

 

2:OPPO手機ColorOS系統(tǒng)的手勢交互:

在ColorOS系統(tǒng)12.0版本中,新增了這個手勢交互的方式,它結(jié)合智能傳感器,進行無觸控式的手勢操作,根據(jù)系統(tǒng)提示通過控制手腕揮動去切換內(nèi)容、完成對應的任務。

 

 

 

 

 

 

 

使用場景舉例:小A使用手機看電影,突然收到一個好朋友的來電顯示,他通過隔空手勢操作,向上滑動手腕,完成接聽了朋友的電話流程。

 

 

通過上述兩個設計案例,我們可以總結(jié)交互設計的五大行為要素為:

 

 

 

 

 

 

 

2.5、交互設計的衡量指標

 

在關(guān)于交互設計定義的內(nèi)容里面,提到了交互設計的指標是從可用性和用戶體驗兩方面去分析,也就是從理性和感性的兩個角度去衡量。

 

2.5.1、可用性

 

根據(jù)雅各布尼爾森《可用性101:可用性簡介》文章定義:可用性是一種質(zhì)量屬性,用于評估用戶界面的易用性。“可用性”一詞也指在設計過程中提高易用性的方法??捎眯杂梢韵挛鍌€質(zhì)量組件定義:

 

 

 

 

 

 

 

 

易學性:用戶在第一次遇到設計時完成基本任務的難易程度如何?

如下圖美團外賣:用戶第一次在線上點餐時,如何快速的用最便宜的價格吃上一頓飯。用戶是否能高效獲取店鋪滿減優(yōu)惠活動信息,是否快速填寫地址,是否能快速選擇挑選優(yōu)惠券,最后進行付款。

 

效率一旦用戶學會了設計,他們執(zhí)行任務的速度有多快?

如下圖美團外賣:當用戶完成第一次點餐后,以后每次完成點餐的速度會不會更快,例如商品頁有商家的滿家活動提示,上一次點餐記錄,可以點擊“再來一單”按鈕,完成選餐,選擇優(yōu)惠紅包前,有文案提示需要先填寫地址,同時有常用地址彈窗提示,可點擊使用。

 

記憶性:當用戶在一段時間不使用設計后重新使用它時,他們恢復熟練度的難易程度如何?

如下圖美團外賣:當用戶隔了很久之后再使用美團外賣來點餐,用戶重新使用產(chǎn)品的熟練度是否有下降。

 

 

 

 

 

錯誤:用戶犯了多少錯誤,這些錯誤有多嚴重,以及他們從錯誤中恢復的難易程度?

例如下圖順豐快遞:在寄快遞時,填寫完所有的詳細信息后,提交了訂單,但發(fā)現(xiàn)地址和電話填錯了,在運單詳情頁有“修改信息”按鈕,點擊進入寄件頁面進行信息修改。

 

 

 

 

 

滿意度:使用該設計的愉快程度如何?

例如在閑魚平臺購買閑置物品時,賣家的商品描述和實物有很大的差距,然后要求退貨,賣家不肯,最后需要閑魚法庭介入審理,但審理也沒有足夠公平和透明,最后只給了一個判決結(jié)果。這樣的情形我遇到了兩次。所以平臺對于買家賣家的一些管理機制特別不完善,還有商品的描述是否準確也沒有審查標準,完全把責任拋給買家和賣家。所以總的來說,使用起來愉悅感很低,平臺信任感也很差。

 

2.5.2、用戶體驗

 

用戶體驗是用戶在使用產(chǎn)品過程中建立起來的一種純主觀感受。我查閱了很多相關(guān)資料,這種定義還是具有普適性的。再簡單的解就是:用戶在使用產(chǎn)品去完成某項目標的過程中,使用感受是怎么樣的。很多知名國內(nèi)外公司為了量化用戶體驗指標而設計了很多數(shù)據(jù)模型,其中出現(xiàn)最早且具有指導意義的是國外的谷歌的量化模型:以用戶為中心衡量的 HEART、以目標為導向衡量的 GSM;國內(nèi)的最近幾年也有很多類似量化的數(shù)據(jù)模式,具有代表性的是阿里的"PTECH"、UES、五度模型;其中谷歌的數(shù)據(jù)模型更加系統(tǒng)和通用,而阿里的是針對不同項目而衍生出很多量化模型。下面以谷歌公司模型為例淺談下它們是如何去衡量用戶體驗指標的;

 

HEART模型出發(fā)點是做以用戶為中心的,能夠用于大范圍的用戶體驗度量方法。它包含5個維度:Happiness 愉悅度:用戶主觀體驗,用戶覺得產(chǎn)品對其有幫助,容易操作,使用產(chǎn)品或者功能時總感到愉悅。Engagement 參與度:用戶對產(chǎn)品內(nèi)容感興趣并愿意經(jīng)常使用。Adoption接受度:用戶看到新產(chǎn)品或新功能愿意進行使用。Rentention留存率:在一個時間內(nèi)用戶愿意回來繼續(xù)使用產(chǎn)品或者功能。Task Success任務完成率:用戶能夠高效,準確地完成任務。

 

GSM模型Google的UX團隊為了讓HEART模型度量標準應用于實踐而提出的設計方法模型,G是Goal,S是Signal,M是Metric,是遵從「目標-信號-指標」的過程來定義數(shù)據(jù)指標的方法。

 

 

 

 

 

 

 

 

 

 

3、成為交互設計師

 

前面我們提到交互設計是一門十分復雜的學科,這個領域的研究廣而深,可創(chuàng)新性很強,設計帶來的意義很大,所以很多人都比較崇尚這個領域,可如果真想走上交互設計之路,就得有項目的歷練,有熟練的設計技能,有扎實的知識基礎,對事物和生活的細致觀察力。

 

3.1、交互設計師項目篇

 

當設計回歸到實際工作項目,首先我們要知道,一般交互設計的崗位在公司的組織架構(gòu)里面,它是一個比較中間的位置,他的上游有產(chǎn)品、用研;下游有設計和研發(fā),交互和這些崗位是交叉的,有聯(lián)系的,強如“設計驅(qū)動”的蘋果公司,交互設計師也需要掌握很多其他跨專業(yè)的知識,所以實際工作中,有很多東西需要交互設計師去學習。

 

3.1.1、交互設計的項目流程

 

互聯(lián)網(wǎng)公司的設計團隊都有自己的設計開發(fā)的一套流程,但項目的核心流程大體都會經(jīng)歷以下三個階段:需求—設計開發(fā)—結(jié)果驗證;

 

 

 

 

需求階段需求是項目開發(fā)的源頭,我們要進行需求搜集、分析、篩選、評估、版本排期。需求的搜集可以是來自產(chǎn)品數(shù)據(jù)、用戶反饋、設計人員洞察探索、競品分析,然后再做需求篩選討論,確定需求的優(yōu)先級;

 

設計開發(fā)階段

 

環(huán)節(jié)1:產(chǎn)品經(jīng)理的文檔需要列出每個版本的詳細信息,包括產(chǎn)品創(chuàng)新設計或改版的背景、解決什么問題、功能的設計背景,產(chǎn)品目標和指標、產(chǎn)品策略,產(chǎn)品范圍層(功能規(guī)格、內(nèi)容、信息、規(guī)則)等;

 

環(huán)節(jié)2:設計師需要針對產(chǎn)品功能結(jié)合產(chǎn)品目標進行設計策略上的思考,進行方案輸出,包括交互文檔(版本號、設計描述、流程圖,頁面跳轉(zhuǎn)邏輯,交互細節(jié)闡述、異常狀態(tài)處理)、交互動態(tài)(動效演示參數(shù)圖、動態(tài)demo展示)、視覺界面設計(形、色、構(gòu)、字、感)等,全流程保持和前后端技術(shù)人員進行設計評審和溝通,持續(xù)評審也是為了防止后期大家互相扯皮影響工作狀態(tài)和效率,但最終目的是使項目開發(fā)降本增效,減少返工。

 

環(huán)節(jié)3:設計方案輸出結(jié)束之后,就是技術(shù)人員的開發(fā),設計師也需要全程持續(xù)跟進,保證設計效果的實現(xiàn),了解前端的一些頁面適配規(guī)則,前后端的之間數(shù)據(jù)架構(gòu)和接口傳輸規(guī)則。

 

環(huán)節(jié)4:前后端開發(fā)完成第一版本成品后,項目組人員(測試人員權(quán)重較高)可以開始全局測試,交互設計師在走查時,可以內(nèi)部梳理一套通用的《交互走查表》進行檢查,可以通過設計走查,專家測試,用戶內(nèi)測,用戶訪談等方式,整理收集影響產(chǎn)品穩(wěn)定性的Bug和設計細節(jié)問題,再反饋給技術(shù)員人進行修改。有條件的會進行可用性測試,檢驗設計的用戶體驗和設計可行性。

 

結(jié)果驗證階段

 

產(chǎn)品上線后,我們可以通過數(shù)據(jù)和用戶體驗來檢驗優(yōu)劣,數(shù)據(jù)層面可以使用灰度測試、A/Btest測試等方式驗證設計方案的可行性,通過數(shù)據(jù)埋點的方式獲取用戶的行為數(shù)據(jù),用戶體驗可以使用滿意度調(diào)查、NPS等方式通過問卷調(diào)研的手段來了解用戶的使用感受。

 

 

 

3.1.2、交互設計的5大項目思維

 

產(chǎn)品思維交互設計師要有培養(yǎng)產(chǎn)品思維的習慣,產(chǎn)品思維能夠引導我們發(fā)現(xiàn)很多設計點,設計出創(chuàng)新性的產(chǎn)品。做產(chǎn)品最核心的問題就是:用戶有什么樣的需求?這個需求待解決程度(用戶痛點、爽點、癢點)怎么樣?例如支付寶這個產(chǎn)品,就是改變了用戶日常的付費交易方式,從現(xiàn)金到線上數(shù)字貨幣支付的轉(zhuǎn)變,大大的解決了用戶不用攜帶大量現(xiàn)金的需求,當然了他的功能不僅限于此,更客觀的說,支付寶的出現(xiàn)改變了人們的生活,創(chuàng)造了極大的社會的價值。

 

 

 

 

 

 

 

 

用戶思維產(chǎn)品主要作用對象是用戶,通過用戶獲取功能需求,我們需要學習如何了解用戶,了解我們的產(chǎn)品典型目標人群是哪一類人,了解用戶的真實訴求是什么?了解用戶場景是什么樣的?具備用戶思維,設計師可以更精準高效的輸出設計方案,達到解決用戶問題的目的。

 

視覺思維交互原型稿和文檔是交互設計師接觸最多的工作任務,它們需要定義很多內(nèi)容信息,這不僅僅靠邏輯,還需要有視覺思維,將黑白交互界面的視覺重點和信息層級展示清楚。如下圖所示為蘇寧智慧屏項目部分功能的交互設計稿樣式:

 

 

 

 

 

 

?

交互設計的視覺思維上關(guān)注的幾個點如下:第一點要有場景的概念,比如要熟悉產(chǎn)品在什么樣的設備上呈現(xiàn),設備具有什么樣的特性和要求,用戶的使用產(chǎn)品的操作方式;第二點要有原子和模塊化的概念,比如一個組件和模塊主要是由哪些原子化的元素構(gòu)建,如何去定義這樣內(nèi)容,第三點要有設計理論應用的概念,比如在界面布局時,可以通過設計的四大基本原則(對比、重復、對齊、親密性)、格式塔原理(接近原則、相似原則、共同命運)、設計規(guī)律(黃金分割法、網(wǎng)格系統(tǒng)、系統(tǒng)規(guī)范)這些點去切入。

 

開發(fā)思維產(chǎn)品外在靠界面,內(nèi)在靠代碼,好用好看的設計依靠技術(shù)作為底層支撐才能最終開發(fā)上線,我們經(jīng)常做設計方案評審時,會遇到被技術(shù)人員否定的情況。我們就會拿有相同設計的產(chǎn)品去和他理論。最終的結(jié)果就是還是做不了。但是做不了的情況大體分為兩種,第一種情況是實現(xiàn)這個設計的背后,確實需要投入很多人力、資源去完成這項工作;第二種就是技術(shù)人員單純的不愿意做,可如果你有開發(fā)思維,能想到這個設計背后的技術(shù)難點,能清晰的和技術(shù)人員進行討論和協(xié)商,他們也不能或不好意思去拒絕。所以開發(fā)思維可以讓我們和技術(shù)人員成為好朋友,又可以學習一些技術(shù)原理,屬實不虧。

 

數(shù)據(jù)思維交互設計師對于數(shù)據(jù)要有一定的敏感度,業(yè)務數(shù)據(jù)可以幫助我們了解產(chǎn)品的經(jīng)營狀況,關(guān)注產(chǎn)品的總體流量,轉(zhuǎn)化、營收,用戶的行為數(shù)據(jù)可以幫助我們在設計迭代時提供依據(jù),另外通過各類數(shù)據(jù)的跟蹤、對比、分析能幫助我們評估設計方案的好壞以及后期設計修改的方向。

 

 

 

3.2、交互設計師技能篇

 

技能已經(jīng)是交互設計師的入門要求,也是初級交互設計師進階的基礎,那這部分主要講解交互設計師的技能兵器庫,主要由設計手段、平臺規(guī)范、理論知識這三部分組成。

 

 

3.2.1、交互設計的兵器庫1-設計手段

 

設計軟件交互原型設計:包括靜態(tài)界面和動態(tài)demo設計,可以使用紙質(zhì)原型、Axure RP、Fireworks、MockingBot、Flinto、Origami、ProtoPie、Hype、Principle、Proto.io、Frama等;界面設計:主流的軟件有Figma、Sketch、ps,網(wǎng)頁和客戶端通用的有即時設計、Figma、Pixso等;

 

動效和三維設計:目前動效應用廣泛的如AE,三維軟件有C4D,blender,Rhino、更高級的如游戲引擎unity3d;

 

編程軟件:網(wǎng)頁端如標記語言HTML+CSS,腳本語言JS,移動端如iOS的Swift和Xcode,Android的studio;

 

文檔工具:如常用的X-mind(思維導圖)、匯報用的ppt、keynote等

 

 

設計方法設計方式這里指向用戶研究部分的內(nèi)容:主要有定量研究、定性研究、用戶畫像的構(gòu)建,定量研究的可使用問卷調(diào)研、數(shù)據(jù)分析、眼動測試,定性研究可使用用戶訪談、焦點小組、可用性測試、卡片分類法,用戶觀察法等

 

 

3.2.2、交互設計的兵器庫2-設計規(guī)范

 

說到設計規(guī)范,這可能是很多設計師在交互入門的時候,比較忽略的基礎知識點,首先各類平臺的系統(tǒng)規(guī)范經(jīng)過很多版本的迭代,內(nèi)容特別精且多,新手設計師經(jīng)常在閱讀學習的過程中失去耐心。只是碰到相應的點才會想起來去看一下。目前處在設計領域最前沿的平臺規(guī)范如蘋果系統(tǒng)的《人機界面指南》,安卓系統(tǒng)的《材料設計》,鴻蒙系統(tǒng)的《設計指南》,微軟系統(tǒng)的《設計原則》,這些平臺的系統(tǒng)規(guī)范非常通用,覆蓋的設備也很多,例如蘋果系統(tǒng)的人機界面指南覆蓋了電腦、手機、平板、手表、電視。在國內(nèi)也涌現(xiàn)了很多平臺規(guī)范,例如阿里的antdesign,騰訊的tdcdesign,字節(jié)的acrodesign等。

 

 

3.2.3、交互設計的兵器庫3-理論知識

 

交互設計發(fā)展至今已經(jīng)很長一段時間了,前輩們在無數(shù)的實踐中總結(jié)了很多科學的設計理論。我們可以利用它們指導設計工作,例如:尼爾森設計十大原則(狀態(tài)可見原則、環(huán)境貼切原則、用戶可控原則、一致性原則、防錯原則、易取原則、靈活高效原則、審美和簡約設計原則、容錯原則、人性化幫助),交互相關(guān)定律(菲茨定律、席克定律、格式塔原理、奧卡姆剃刀原則、峰終法則、帕雷托原理、米勒定律、郵編定律、序列位置效應、泰斯勒復雜性守恒定律、序列位置效應、多爾蒂閥值、雅各布定律、蔡格尼克記憶效應、馮·雷斯托夫效應等)。理論知識可以作為設計的參照標準,但用設計理論反對設計結(jié)果是很不合適的,具體問題還需要結(jié)合實際應用場景去分析解決。

3.3、交互設計師能力篇

最后一章我想和大家分享關(guān)于交互設計師的能力模型,主要分三大塊,這也是實際工作中感觸比較深的幾個點,希望對大家能有幫助!

 

3.3.1、基礎能力-學習

 

學習是一項比較基礎的能力!它包括了你技法上的突破、閱讀書籍獲取知識、適應和熟悉工作流程;例如當你在工作中,需要設計一個頁面動畫效果,你學會了一個新的軟件和新的實現(xiàn)方法;又或者當你閱讀了一本書,學到了很多知識,打破了自己的認知,再或者入職新公司的時候,你需要適應新環(huán)境和工作流程。設計領域的要求更新?lián)Q代特別快,就好比之前我們做設計基本都使用sketch,

還得和蘋果系統(tǒng)捆綁,但現(xiàn)在像Figma等軟件不光可以客戶端下載使用,甚至都可以網(wǎng)頁端協(xié)同使用。所以在任何時候都要保有一顆

做學徒的心,去學習,去適應、不斷的突破自己!

 

3.3.2、通用能力-溝通、執(zhí)行、總結(jié)

 

溝通、執(zhí)行、總結(jié)三大能力無論是在生活還是在工作中都是比較通用的,我們在和別人交流時,需要用語言傳達自己的想法,讓別人或自己明白,然后去執(zhí)行,根據(jù)執(zhí)行的結(jié)果進行總結(jié),變成自己寶貴的經(jīng)驗。例如有一次在做交互方案時,產(chǎn)品經(jīng)理直接丟過來一個需求,然后沒有說明具體的需求背景和設計方向,然后就把方案弄好了去評審,被技術(shù)人員一通亂懟,弄的大家情緒都上了頭,就開始爭吵起來,最后結(jié)果就是重新設計;這讓我后來在做方案的時候,一直記得利用這套通用能力去處理問題;確實有效。但在培養(yǎng)這些能力的同時需要注意:把控情緒做有效溝通,拒絕盲目執(zhí)行,反復思考總結(jié)經(jīng)驗,用總結(jié)能力反哺自己的溝通、執(zhí)行能力。

 

 

 

 

 

 

 

3.3.3、進階能力-洞察、思考

 

洞察和思考是交互設計師的最高級的能力,擁有這種能力的設計師往往已經(jīng)能夠探索到問題的本質(zhì),洞察和思考能力的培養(yǎng)來源對事物的探索欲,有好奇心,有細致的觀察,這要求設計師要把解決問題當作是興趣來看待;以生活中的用戶使用的出行工具單車設計為例,單車上有很多設計點都體現(xiàn)了交互設計師的這兩項能力;

 

 

 

 

 

1:單車的座位調(diào)節(jié)控制結(jié)構(gòu)設計如上圖是哈嘍單車的不同版本的設計,第一個調(diào)節(jié)結(jié)構(gòu)我們需要向逆時針向外推,才能進行座凳高低的調(diào)節(jié),第二個調(diào)節(jié)結(jié)構(gòu)我們僅需要上下方向推拉進行控制。我在使用的過程中,第二個結(jié)構(gòu)操作的時候更加省力。

 

2:座凳支撐桿的身高標記設計第一個支撐桿我們可以看到是沒有任何標記的,第二個支撐桿上面有對應身高相匹配的尺寸標記,相比較第一個設計,帶標記的設計讓用戶更快的調(diào)到舒適的高度位置。

 

這個設計案例屬于從結(jié)果倒推方案,因為在已有設計方案做推理分析,但是我相信項目人員在進行產(chǎn)品優(yōu)化的時候,也肯定是洞察到“舊的坐凳設計”結(jié)構(gòu)給用戶帶來的不便,不僅操作費力,而且這樣的結(jié)構(gòu)容易卡住廢車;身高標記的設計肯定也是結(jié)合用戶的不同身高這個需求,設計師觀察用戶在調(diào)節(jié)座凳高度的時候,坐上去再下來,反復的調(diào)試去選擇舒適的高度,才思考出這樣不錯的設計方案。

總結(jié)

本文分享到這里就結(jié)束了,總的來說,想成為一名交互設計師,需要投入的成本是很大的,除了軟件技能還需要有足夠的知識儲備,培養(yǎng)自己的各種思維和能力,那文章我也通過三個部分去說明了這些內(nèi)容,首先我用設計領域的名詞作為切入點,帶大家去了解設計領域的現(xiàn)狀和關(guān)聯(lián),對設計名詞有大致的概念;其次著重的分析交互設計,介紹了交互設計的起源、定義、主要對象、五大行為要素、兩大衡量標準;最后寫了關(guān)于成為交互設計師一些入門要求,第一點是通過項目流程、項目思維角度,第二點是從設計技能角度,交互設計師需要有設計手段、平臺規(guī)范、理論知識三大兵器庫,第三點是從能力模型角度,交互設計師須具備學習、溝通、執(zhí)行、總結(jié)、洞察、思考6大能力。在去往交互設計的路上,建議設計師們要保持一顆進取的心,認認真真的去學習、去實踐、去進階,提升自己的設計認知。

文章內(nèi)容僅供學習參考。


作者:Q什伍
鏈接:https://www.zcool.com.cn/article/ZMTQzNTU1Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

ui設計公司教你如何提升用戶體驗設計

藍藍設計的小編

UI 設計中的體驗設計是一個綜合性的工程,需要設計師從用戶需求出發(fā),關(guān)注每一個細節(jié),不斷優(yōu)化和創(chuàng)新,才能打造出令用戶滿意的產(chǎn)品,在激烈的市場競爭中脫穎而出。

情緒價值在體驗設計中的應用

藍藍設計的小編

近兩年“情緒價值”這個詞,相信每個人應該或多或少都有過接觸,從商業(yè)空間的營銷場景到后來滲透到每個領域、每個行業(yè)?!?/span>
 
先說下這個詞的概念,它源于心理學和社會學, 本意為:“它指的是一個人或事物對他人情感狀態(tài)所產(chǎn)生的積極影響和價值。這種價值不僅僅體現(xiàn)在短暫的愉悅感受上,更包括長期的情緒穩(wěn)定、心理滿足和精神支持。” 
無論是在網(wǎng)紅還是在新型電商行業(yè)中,許多品牌強調(diào)的已經(jīng)不是單一的產(chǎn)品功能價值,而是增加了強調(diào)在消費體驗中為消費者帶來的快樂、滿足、歸屬感等等一些積極的情緒。這足以說明,無論是品牌、產(chǎn)品還是服務越來越注重為消費者提供情緒價值?!?/span>
 
而用戶體驗設計的本質(zhì)其實就是讓人在使用產(chǎn)品的過程中有非常愉悅的感覺,這一點與“情緒價值”這個詞的核心也有點不謀而合?!?/span>
 
情緒價值在體驗設計中的應用
 
 
相信我們都有這樣的疑問:情緒價值在體驗設計中重要嗎,有什么具體的關(guān)系?在設計工作中的情緒價值到底重要嗎?情緒價值對產(chǎn)品使用的提升有哪些,具體要怎么做?相信看完下面的內(nèi)容,你應該會對上面的問題有答案的?!?/span>
 
一、情緒價值對用戶體驗的影響
首先我們可能需要了解情緒價值能給用戶帶來什么?申晨老師在一次分享會上有提到過情緒價值的三個方向:愉悅感、保障感、專享感。三者由淺入深影響著用戶在使用產(chǎn)品時的情緒變化,對應到體驗設計中是這樣的: 
  •  
    愉悅感→影響用戶的滿意度
  •  
    保障感→影響用戶的容忍度
  •  
    專享感→影響用戶的忠誠度
 
提升用戶滿意度
積極情緒的誘導
 
當產(chǎn)品或服務能夠提供情緒價值時,會引發(fā)用戶的積極情緒。如下圖,三種UI會給用戶不同的情緒反饋,積極的情緒(右圖)往往會讓用戶駐足停留的更長一些,即便沒有需求,也會更愿意去花費一些時間去深入了解,進而帶來一些拉新、瀏覽轉(zhuǎn)化等等數(shù)據(jù)的提升 
情緒價值在體驗設計中的應用
 
 
滿足情感需求
 
許多產(chǎn)品和服務通過滿足用戶的情感需求來提供情緒價值。用戶在使用這些產(chǎn)品時,會因為產(chǎn)品所承載的情感因素而感到滿足,進而提升對產(chǎn)品體驗的滿意度。例如: 
  •  
    社交媒體的分享被贊,是一種被關(guān)注、被認可的情感需求;
  •  
    直播平臺app的互動效果,也是一種渴望互動的情感需求,以此刺激觀看者送出禮物。
改善用戶對負面體驗的容忍度
情緒緩沖作用
 
當產(chǎn)品或服務出現(xiàn)一些小問題時,之前積累的情緒價值可以起到緩沖作用。例如: 
  •  
    在使用某工具產(chǎn)品時,友好的客服系統(tǒng)會給用戶比較積極的情緒積累,從而選擇包容一些比較小的錯誤;
  •  
    還有很多錯誤頁面的情感化設計,目的亦是如此。
引導解決問題的積極態(tài)度
 
如果用戶對產(chǎn)品或服務有情感上的依賴,當遇到問題時,他們會更積極地尋找解決辦法,而不是抱怨和放棄。例如: 
  •  
    當產(chǎn)品或服務偶爾出現(xiàn)卡頓現(xiàn)象時,其用戶社區(qū)氛圍很好,用戶之間可以互相交流使用經(jīng)驗和解決方案,并且軟件開發(fā)者也會積極回應用戶的問題。這種情緒價值會讓用戶愿意配合開發(fā)者解決軟件卡頓問題,而不是直接卸載軟件。
 
情緒價值在體驗設計中的應用
 
 
增強用戶的忠誠度
能夠在用戶和產(chǎn)品 / 服務之間建立起情感紐帶
 
  •  
    以蘋果產(chǎn)品為例,蘋果公司通過簡潔、易用的設計,以及高效的客戶服務,為用戶提供了良好的情緒體驗。用戶在使用蘋果產(chǎn)品的過程中,會逐漸對品牌產(chǎn)生信任和喜愛。這種情感紐帶使得用戶在下次購買電子產(chǎn)品時,更有可能繼續(xù)選擇蘋果產(chǎn)品,忠誠度較高。
  •  
    一些會員制度也注重通過情緒價值來增強用戶忠誠度。例如,酒店的會員計劃會為會員提供優(yōu)先入住、免費升級房間、生日驚喜等服務。這些措施讓會員感受到特殊待遇,產(chǎn)生一種被重視的情緒,從而增強了用戶對酒店品牌的忠誠度。
推動口碑傳播
 
當用戶從產(chǎn)品或服務中獲得了高情緒價值,他們更愿意向他人推薦。例如: 
  •  
    用戶在一家餐廳用餐,餐廳的服務人員熱情周到,菜品的呈現(xiàn)方式也很有創(chuàng)意,讓用戶在享受美食的同時獲得了愉悅的情緒體驗。這種用戶很可能會將這家餐廳推薦給朋友、家人,通過口碑傳播為餐廳帶來新的顧客。
  •  
    在線游戲如果能為玩家提供豐富的社交互動功能,讓玩家在游戲中結(jié)交朋友、組隊作戰(zhàn),獲得團隊合作的快樂和成就感等情緒價值,玩家就會積極向周圍的人宣傳這款游戲,擴大游戲的用戶群體。
 
 
二、什么產(chǎn)品適合通過創(chuàng)造情緒價值提升使用體驗
 
C端產(chǎn)品:在創(chuàng)造情緒價值的應用策略下,更容易獲得顯著成果
情緒價值在體驗設計中的應用
 
 
 
創(chuàng)造情緒價值這種有效的策略,尤其在面向個人用戶產(chǎn)品時,可以更顯著提升其使用體驗。例如: 
  •  
    社交類產(chǎn)品
    如微信、微博等,通過提供社交互動和情感連接,增強用戶的歸屬感和幸福感 
  •  
    內(nèi)容類產(chǎn)品
    如視頻平臺、音樂應用等,通過提供豐富多樣的內(nèi)容,滿足用戶的情感和娛樂需求 
  •  
    娛樂類產(chǎn)品
    如游戲、盲盒等,通過游戲性和不確定性,激發(fā)用戶的興趣和情感投入 
  •  
    交易類產(chǎn)品
    如電商平臺、在線購物等,通過營造購物氛圍和提供個性化推薦,增加用戶的購物愉悅感 
  •  
    工具類產(chǎn)品
    如效率工具、健康管理應用等,通過提供情感化的設計和反饋,提升用戶的使用體驗和滿意度 
 
那么 B 端產(chǎn)品是否同樣適用呢?答案無疑是肯定的。隨著企業(yè)數(shù)字化轉(zhuǎn)型的迅速推進,B 端產(chǎn)品在各個行業(yè)領域當中得到了廣泛的應用,用戶體驗的重要性越發(fā)顯著。 
 
 
B端產(chǎn)品:創(chuàng)造情緒價值更有利于提高忠誠度
 
情緒價值在體驗設計中的應用
 
 
創(chuàng)造情緒價值的方式
 
  •  
    情感設計:通過設計元素和交互方式激發(fā)用戶的情感共鳴,增強用戶對產(chǎn)品的認同感和忠誠度。例如,通過微動畫、個性化推薦和人性化提示,設計師可以為用戶創(chuàng)造愉悅的使用體驗
  •  
    個性化服務與定制化解決方案:了解客戶的獨特需求和痛點,提供個性化的建議和支持,幫助客戶解決實際問題,帶來更多情感上的滿足感
  •  
    優(yōu)化用戶體驗:注重產(chǎn)品設計和交互體驗優(yōu)化,提供良好的客戶服務和多種使用方式,不斷優(yōu)化產(chǎn)品功能,以提升用戶的整體使用體驗
 
 
創(chuàng)造情緒價值的重要性
 
  •  
    提升用戶滿意度和忠誠度:通過創(chuàng)造情緒價值,產(chǎn)品可以顯著提升用戶的滿意度和忠誠度,從而促進續(xù)費和口碑傳播
  •  
    增強產(chǎn)品的市場競爭力:在功能相似的產(chǎn)品中,提供卓越的用戶體驗可以成為SaaS產(chǎn)品的核心競爭力,幫助企業(yè)在市場中脫穎而出
 
 
三、體驗設計師如何提升產(chǎn)品的“情緒價值”
我們可以從設計核心的三大階段(用戶研究階段、設計階段、測試與優(yōu)化階段)入手,來創(chuàng)造與提升產(chǎn)品的情緒價值 
 
用戶研究階段
情緒價值在體驗設計中的應用
 
 
 
深入了解用戶情感需求
開展定性研究
:通過用戶訪談、焦點小組等方式,挖掘用戶在使用產(chǎn)品時的情感期望。例如,在設計一款健身APP時,與健身愛好者進行深入訪談,了解他們在健身過程中的情緒變化??赡軙l(fā)現(xiàn),用戶在完成一次具有挑戰(zhàn)性的訓練后,希望得到即時的鼓勵和成就感,這就為產(chǎn)品設計提供了情感方向。
 
進行定量研究
:利用問卷調(diào)查等手段,收集用戶對現(xiàn)有產(chǎn)品情緒體驗的數(shù)據(jù)。比如,詢問用戶在使用某電商平臺時,購物流程是否讓他們感到焦慮或愉悅,以及在哪些環(huán)節(jié)有這種情緒。通過數(shù)據(jù)分析,找出用戶情緒的痛點和興奮點。
 
構(gòu)建用戶畫像與情緒場景
 
創(chuàng)建用戶畫像
根據(jù)用戶研究的結(jié)果,構(gòu)建詳細的用戶畫像,包括用戶的性格、生活方式、價值觀等因素,并且添加情緒維度。以一款旅行APP為例,其中一個用戶畫像可能是“年輕的探險愛好者,性格樂觀,追求刺激,在旅行前會充滿期待和興奮”。這樣的畫像有助于設計師站在用戶的角度思考情緒體驗。
描繪情緒場景
:針對不同的用戶畫像,描繪他們使用產(chǎn)品的情緒場景。比如,對于上述旅行APP的用戶,在規(guī)劃行程時,他可能會在APP上查找小眾景點,此時的情緒是好奇和興奮;在旅途中使用導航功能時,希望得到精準的指引,情緒是焦慮或安心,取決于導航的準確性。這些情緒場景為后續(xù)設計提供了具體的目標。
 
 
設計階段
情緒價值在體驗設計中的應用
 
 
視覺設計方面
色彩運用
:色彩對情緒有著強烈的影響。例如,暖色調(diào)如紅色和橙色通常傳達活力、熱情的情緒,適合用于激發(fā)用戶興趣的界面元素,如促銷活動頁面;冷色調(diào)如藍色和綠色則給人冷靜、可靠的感覺,可用于數(shù)據(jù)展示或需要用戶集中注意力的區(qū)域。在設計金融產(chǎn)品界面時,使用藍色為主色調(diào)可以讓用戶感到安全和信任。
圖形設計
:簡潔、易懂的圖形能夠快速傳達信息并引發(fā)積極情緒。在圖標設計上,要符合用戶的認知習慣。例如,在社交產(chǎn)品中,使用微笑的表情圖標表示點贊或喜歡,用戶很容易理解并產(chǎn)生愉悅的情緒。同時,利用有趣的插畫或動畫可以增加產(chǎn)品的趣味性。如在兒童教育產(chǎn)品中,用生動的動畫來講解知識,能夠吸引孩子的注意力并讓他們感到快樂。
排版布局
:合理的排版可以提升用戶的閱讀體驗和情緒。清晰的標題和正文層次,適當?shù)奈淖珠g距和行高,能讓用戶感到舒適。在新聞類產(chǎn)品中,采用模塊化的排版,將不同的新聞內(nèi)容清晰劃分,使用戶在瀏覽時不會感到混亂,從而減少煩躁情緒。
 
交互設計方面
反饋機制設計
:為用戶的操作提供及時、明確的反饋可以提升情緒價值。例如,當用戶點擊一個按鈕時,按鈕會有短暫的變色或動畫效果,讓用戶知道操作已被接收。在加載頁面時,使用有趣的加載動畫代替單調(diào)的進度條,如旋轉(zhuǎn)的小圖標或者跳動的小球,能夠緩解用戶等待的焦慮情緒。
操作流程優(yōu)化
:簡化復雜的操作流程,減少用戶的認知負擔和操作失誤。在移動支付產(chǎn)品中,盡量減少支付步驟,讓用戶能夠快速完成支付,避免因流程繁瑣而產(chǎn)生煩躁情緒。同時,可以增加一些引導性的交互,如新手引導教程,幫助用戶輕松上手產(chǎn)品,提升用戶的自信心和滿意度。
個性化與定制化設計
:根據(jù)用戶的喜好和行為習慣,提供個性化的交互體驗。例如,音樂產(chǎn)品可以根據(jù)用戶的收聽歷史推薦相似風格的歌曲,用戶會因為產(chǎn)品的貼心而感到愉悅。并且允許用戶對界面布局、主題等進行定制,讓用戶有更多的掌控感,滿足他們的自我表達需求。
 
內(nèi)容設計方面
文案撰寫
:使用友好、易懂的文案可以拉近與用戶的距離。在產(chǎn)品提示信息中,避免使用生硬的專業(yè)術(shù)語,而采用親切的語氣。例如,在一款智能家居產(chǎn)品中,當設備連接成功時,顯示“哇,您已經(jīng)成功連接啦,現(xiàn)在就可以享受智能生活啦”,這樣的文案會讓用戶感到輕松和愉快。同時,文案的風格要與產(chǎn)品的定位和目標用戶相匹配。
內(nèi)容策略
:提供有價值、有趣的內(nèi)容可以提升情緒價值。在知識付費產(chǎn)品中,確保課程內(nèi)容不僅有深度,而且講解方式生動有趣。對于內(nèi)容社區(qū)產(chǎn)品,鼓勵用戶分享積極向上的內(nèi)容,如生活中的小美好、勵志故事等,營造一個充滿正能量的社區(qū)氛圍,讓用戶在瀏覽內(nèi)容時感到愉悅和鼓舞。
 
 
測試與優(yōu)化階段
情緒價值在體驗設計中的應用
 
 
可用性測試與情緒評估
進行可用性測試
:在產(chǎn)品原型階段,邀請用戶進行可用性測試,觀察用戶的操作行為和情緒反應。例如,在測試一款辦公軟件的新功能時,注意用戶是否能夠順利使用,以及在使用過程中是否出現(xiàn)困惑、煩躁等情緒。可以通過用戶的面部表情、言語反饋等方式收集情緒信息。
情緒評估工具
:利用情緒評估工具,如情感化可用性量表(UEQ)等,對用戶的情緒體驗進行量化評估。UEQ可以測量用戶對產(chǎn)品的吸引力、易用性、可靠性等維度的情緒感受,通過數(shù)據(jù)分析,找出需要優(yōu)化的情緒體驗點。
 
根據(jù)反饋優(yōu)化設計
迭代設計
:根據(jù)用戶測試的反饋,對產(chǎn)品的視覺、交互和內(nèi)容設計進行迭代優(yōu)化。例如,如果用戶在測試中表示某個界面元素的顏色讓人感到刺眼,設計師可以調(diào)整顏色方案。如果用戶對某個操作流程不理解,就優(yōu)化操作引導。
持續(xù)關(guān)注情緒反饋
:產(chǎn)品上線后,持續(xù)收集用戶反饋,關(guān)注用戶情緒價值的變化。隨著用戶需求的變化和市場環(huán)境的改變,不斷調(diào)整產(chǎn)品設計,以保持和提升產(chǎn)品的情緒價值。例如,在節(jié)日期間,對產(chǎn)品界面進行節(jié)日主題的裝飾,為用戶提供新鮮感和節(jié)日氛圍帶來的愉悅情緒。
 
四、情緒價值是否具備量化條件
可以通過以下方法對其進行量化計算
 
情感化可用性量表
情緒價值在體驗設計中的應用
 
 
原理:UEQ是一種廣泛用于量化用戶對產(chǎn)品情緒體驗的工具。它通過一系列的問卷題目來測量用戶對于產(chǎn)品的吸引力、易用性、效率、可靠性和刺激度等多個維度的感受。例如,在吸引力維度上,會詢問用戶對于產(chǎn)品外觀、風格是否感到喜歡;在易用性維度,會涉及用戶操作產(chǎn)品時是否感到輕松、方便等問題?!?/span>
 
應用:在一款產(chǎn)品/功能的用戶體驗測試中,使用UEQ可以收集用戶對該應用在不同維度的情緒評價。通過對大量用戶反饋的數(shù)據(jù)統(tǒng)計,得出該應用在各個維度的量化得分,比如吸引力維度得分較高,說明產(chǎn)品在視覺等方面能引發(fā)用戶積極情緒,而如果易用性維度得分較低,則可能表示產(chǎn)品的操作流程等會讓用戶產(chǎn)生負面情緒?!?/span>
 
 
凈推薦值(NPS)與情緒關(guān)聯(lián)量化
 
情緒價值在體驗設計中的應用
 
 
 
原理:凈推薦值是通過詢問用戶“您是否愿意將這個產(chǎn)品推薦給其他人”來衡量用戶忠誠度。雖然NPS本身不是直接對情緒價值的量化,但它與用戶的情緒體驗密切相關(guān)。當用戶體驗到較高的情緒價值,如愉悅、滿足等,他們更有可能成為推薦者,NPS得分就會升高?!?/span>
 
應用:通過定期收集用戶的NPS數(shù)據(jù),并且結(jié)合用戶對功能使用體驗的詳細反饋(包括對產(chǎn)品、服務、售后等環(huán)節(jié)的情緒感受),可以間接量化情緒價值對用戶忠誠度的影響。例如,如果發(fā)現(xiàn)NPS得分高的用戶在評價中經(jīng)常提及購物過程中的快樂情緒和優(yōu)質(zhì)服務體驗,就可以推斷出情緒價值在提升用戶忠誠度方面起到了積極作用。 
 
 
 
  1.  
    生理指標測量
 
情緒價值在體驗設計中的應用
 
 
原理:情緒會引發(fā)身體的生理反應,如心率、皮膚電導率、瞳孔大小等變化。通過專業(yè)的設備可以測量這些生理指標,以此來推斷用戶的情緒狀態(tài)。例如,當用戶感到興奮或緊張時,心率會加快;當他們感到好奇或?qū)Wr,瞳孔可能會放大?!?/span>
應用:在用戶體驗實驗室中,測試用戶在使用虛擬現(xiàn)實(VR)游戲的情緒體驗。通過佩戴可以監(jiān)測心率和皮膚電導率的設備,觀察用戶在游戲不同場景下的生理指標變化。如果在某個刺激的戰(zhàn)斗場景中,用戶的心率明顯上升,皮膚電導率也增加,就可以推斷用戶處于興奮或者緊張的情緒狀態(tài),從而量化游戲場景對用戶情緒的激發(fā)程度?!?/span>
 
雖然有量化方法,但也只有部分可被量化,完全精準量化還存在一定的挑戰(zhàn) 
 
 
難以完全量化的原因
情緒的復雜性和主觀性
個體差異:不同用戶對同一產(chǎn)品或體驗的情緒反應存在很大差異。例如,對于一款具有挑戰(zhàn)性的游戲關(guān)卡,一些玩家可能會因為克服困難而感到興奮和滿足,而另一些玩家可能會因為覺得太難而產(chǎn)生沮喪情緒。這種個體差異使得很難用統(tǒng)一的標準來量化情緒價值。
文化背景影響:文化因素也會對情緒價值的感受產(chǎn)生影響。在某些文化中,含蓄的情感表達是常態(tài),而在另一些文化中,人們可能更傾向于直接的情感反應。比如,在日本文化中,用戶可能對產(chǎn)品的精致、細膩的設計有更深刻的情感共鳴,而西方文化中的用戶可能更看重產(chǎn)品的創(chuàng)新性和個性化帶來的情緒體驗。
 
情緒與情境的動態(tài)變化
使用場景的多樣性:用戶在不同的使用場景下對產(chǎn)品的情緒價值感受不同。例如,一個音樂播放軟件,用戶在運動場景下可能更關(guān)注節(jié)奏強烈的音樂帶來的激勵情緒,而在睡前場景下則更看重舒緩音樂營造的放松情緒。這種隨場景變化的情緒體驗難以用固定的量化指標來衡量。
 
時間因素:用戶對產(chǎn)品的情緒體驗也會隨著時間而變化。最初接觸產(chǎn)品時的新鮮感可能會帶來積極情緒,但隨著時間推移,如果產(chǎn)品缺乏更新或出現(xiàn)問題,情緒可能會轉(zhuǎn)變?yōu)橄麡O。而且情緒的產(chǎn)生和消退過程很難精確量化,例如很難確定用戶從感到滿意到產(chǎn)生厭煩的具體時間節(jié)點。
雖然難以量化,但情緒價值在實際應用中發(fā)揮的作用還是很大的?!?/span>
 
 
結(jié)束語
在體驗設計的廣闊領域中,情緒價值猶如一股無形的力量,悄然影響著用戶與產(chǎn)品之間的每一次互動。它不僅僅是愉悅感、保障感和專享感的簡單疊加,更是用戶在深層情感層面與品牌建立起的穩(wěn)固紐帶。通過精心設計的用戶體驗,我們能夠觸動用戶的情感,激發(fā)他們的共鳴,從而在用戶心中留下深刻而持久的印記?!?/span>
 
作者:木茶


作者:群核科技MCUX
鏈接:https://www.zcool.com.cn/article/ZMTY0OTIxNg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔