国产成在线人视频免费视频-国产成综合-国产床上视频-国产大臿蕉香蕉大视频女-国产大尺度pr社18福利在线

首頁

動效讓這些設計更驚艷

天宇 交互設計及用戶體驗

微動效在產品設計中的運用已經非常普及了,無論是在圖標還是界面場景中,都運用得很普遍。通過動效的輔助不僅可以提升設計情感化,也能解決更為復雜的交互場景,讓設計更驚艷。
 
最近在體驗一些產品的過程中,黑馬哥也發現了幾個借助動效表達的設計方案,效果十分的驚艷,分享出來和大家一起學習一下。
動效讓這些設計更驚艷
 
 
 
 
目錄
一、3D 動效呈現會員等級
二、情感化 IP 提升搜索關注度
三、結合場景的情感化動效
四、3D 空間感的 Banner 設計
五、通過動效引導用戶操作
六、微動效引導 VIP 續費
七、動態還原實時天氣
八、動態 IP 引導按鈕設計
九、微動效賦予品牌活力
 
 
 
一、3D 動效呈現會員等級
會員中心通常會通過 3D 圖標來助力會員等級設計,除了靜態的表達也會通過動效和新穎的交互形式呈現,以此提高會員中心的視覺表現力。
 
最近在體驗騰訊視頻 APP 時,會員專區在表現用戶會員等級的設計中,沒有使用傳統的徽章形式,而是以 3D 數字結合動效的形式表達。3D 動效的設計使得會員等級區別于常規形式,更有吸引力。 
動效讓這些設計更驚艷
 
 
 
 
二、情感化 IP 提升搜索關注度
IP 形象是成就品牌的關鍵因素之一,被廣泛運用到產品感官體驗的設計中,帶來的情感化共勉也是顯而易見的。
 
在使用悟空瀏覽器 APP 時,啟動產品進入首頁后搜索框上方出現悟空的 IP 形象,悟空呈現出左右環顧、上下打量,最后看向搜索框的系列動作等表現。不僅提高了搜索功能的關注度,也使得產品設計更具情感化。
動效讓這些設計更驚艷
 
 
 
 
三、結合場景的情感化動效
根據不同的業務場景進行設計表達,可以更好的服務目標用戶,而情感化的設計提升,可以拉近產品與用戶之間的親和力。
 
為了降低用戶等餐過程中出現的負面情緒,餓了么 APP 下單之后在詳情頁中根據點餐的不同設計了情感化的動效表達。無論是快餐還是冷飲等,都針對性地設計了微動效的元素,以此來表現當前狀態。
動效讓這些設計更驚艷
 
 
動效讓這些設計更驚艷
 
 
 
 
四、3D 空間感的 Banner 設計
通過突出設計、交互、布局結構等的創意性,可以使得 Banner 具備更強的差異化,以此來突出 Banner 的存在感。
 
騰訊視頻 APP 首頁的 Banner 布局也會經常呈現出一些很有創意的方案,比如之前體驗到一個結合 3D 空間感營造的設計案例,就非常有吸引力。通過動態過度到立體空間,再恢復到默認形式,這個動態的過程演變就能讓用戶過目不忘。
動效讓這些設計更驚艷
 
 
 
 
五、通過動效引導用戶操作
針對一些使用頻次不高或者過于隱藏的功能,為了提高用戶的操作概率,會通過一些特殊的設計表達來提升用戶的關注度,引導用戶進行相關操作。
 
比如麥當勞 APP 首頁中,為了吸引用戶下拉進入二層樓,通過動效的形式設計了一個搖擺的鈴鐺,以此來吸引用戶的注意力。用戶看到像是隨風飄動的鈴鐺,就會忍不住去拉動,這就達到了引導用戶操作的目的,提高了二層樓內容的曝光度。
動效讓這些設計更驚艷
 
 
 
 
六、微動效引導 VIP 續費
針對一些無法通過占比面積進行突出的元素,運用微動效的形式設計是常見的設計手法。
 
網易云音樂 APP “我的”板塊中,為了突出 VIP 續費按鈕,黑膠唱片以動效的形式在按鈕中來回滾動,以此強化續費按鈕的關注度。
動效讓這些設計更驚艷
 
 
 
 
七、動態還原實時天氣
天氣類產品從簡單的靜態預告升級為動態實時還原,可以讓用戶更加直觀的判斷天氣變化,也能提高界面設計的感官體驗。
 
比如 iPhone 自帶的天氣 APP,以動態還原實時天氣作為界面背景,不僅便于用戶識別天氣,也使得產品設計更具情感化體驗。
動效讓這些設計更驚艷
 
 
 
 
八、動態 IP 引導按鈕設計
按鈕設計樣式可以發揮的空間很大,除了在造型、配色、空間感等方面突出設計以外,也能通過按鈕微動效或者動態引導等形式強化。
 
比如智行火車票 APP “搶票”板塊中,為了突出“添加搶票”按鈕的存在感,以動效 IP 引導進行設計。不僅使得按鈕更突出,設計感也顯得俏皮可愛,凸顯親和力。
動效讓這些設計更驚艷
 
 
 
 
九、微動效賦予品牌活力
立足于品牌做設計是突出產品差異化的關鍵,這也是產品設計未來的演變趨勢之一,如何提高品牌的曝光度和記憶度,成為設計師不斷探索的方向。
 
最近在使用夸克 APP 時,微動效賦予品牌 LOGO 的活力感讓人印象深刻。在眾多特殊節慶等時間段,夸克也會以動效的形式賦予品牌更多變化,不僅使得產品更具年輕化屬性,也能更好的傳遞品牌基因。
動效讓這些設計更驚艷
 
 
動效讓這些設計更驚艷
 
 
 
 
小結
動效使得產品具備更多的變化,也能輔助解決更多復雜功能的交互場景,探索動效的場景運用可以提升設計靈感,希望本期的分享可以帶給大家更多設計靈感。本文描述屬于個人體驗總結,不足之處我們努力改進。
 
本文由 @黑馬青年 原創發布。未經許可,禁止轉載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYzOTIyOA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
 

以用戶為中心的交互設計思維

天宇 交互設計及用戶體驗

 
聊聊關于設計思維的內容,會從產品設計、體驗設計、交互設計三個方面入手。
目前是第三篇,關于交互設計思維的內容。到這里設計思維的內容全部結束了。
感謝
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維


作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
 

如何從產品角度發起交互設計?

天宇

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


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

用戶體驗一致性思考

天宇

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

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

交互設計的核心:用戶體驗與創新思維的融合

天宇

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

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

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

2. 創新與功能的平衡

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

3. 情感化設計的力量

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

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

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

5. 數據驅動的設計優化

通過數據分析,設計師可以了解用戶行為,發現設計中的不足,并持續優化產品。A/B測試、熱圖分析等工具,能夠幫助設計師做出更科學的決策,提升產品的整體表現。

31.png

結語

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


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

 

 

小功能大細節|掌握選擇控件設計

天宇

 

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


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

用戶界面優化的實用技巧與案例分享

ui設計分享達人

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


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

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

藍藍設計的小編

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

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

藍藍設計的小編

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

 

 

 

 

 

 

 

 

1、關于設計名詞

 

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

 

 

 

 

 

1.1、設計名詞的分類

 

1.1.1、按照設計學科

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

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

 

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

 

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

 

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

 

1.1.2、按照載體媒介

 

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

 

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

 

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

 

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

 

1.1.3、按照設計模式

 

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

 

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

 

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

 

 

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

 

 

 

 

 

 

 

 

2、了解交互設計

 

2.1、交互設計的故事

 

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

 

 

 

 

 

 

 

 

2.2、交互設計的定義

 

關于交互設計的概念,國內外組織或學者有不同的定義,如下圖:

 

 

 

 


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

 

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

 

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

 

 

 

2.3、交互設計的對象

 

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

 

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

 

 

 

 

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

 

 

 

 

 

 

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

 

 

 

 

 

 

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

 

 

 

 

 

 

 

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

 

2.4、交互設計的行為要素

 

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

 

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

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

 

 

 

 

 

 

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

 

 

2:OPPO手機ColorOS系統的手勢交互:

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

 

 

 

 

 

 

 

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

 

 

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

 

 

 

 

 

 

 

2.5、交互設計的衡量指標

 

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

 

2.5.1、可用性

 

根據雅各布尼爾森《可用性101:可用性簡介》文章定義:可用性是一種質量屬性,用于評估用戶界面的易用性。“可用性”一詞也指在設計過程中提高易用性的方法。可用性由以下五個質量組件定義:

 

 

 

 

 

 

 

 

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

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

 

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

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

 

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

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

 

 

 

 

 

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

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

 

 

 

 

 

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

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

 

2.5.2、用戶體驗

 

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

 

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

 

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

 

 

 

 

 

 

 

 

 

 

3、成為交互設計師

 

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

 

3.1、交互設計師項目篇

 

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

 

3.1.1、交互設計的項目流程

 

互聯網公司的設計團隊都有自己的設計開發的一套流程,但項目的核心流程大體都會經歷以下三個階段:需求—設計開發—結果驗證;

 

 

 

 

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

 

設計開發階段

 

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

 

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

 

環節3:設計方案輸出結束之后,就是技術人員的開發,設計師也需要全程持續跟進,保證設計效果的實現,了解前端的一些頁面適配規則,前后端的之間數據架構和接口傳輸規則。

 

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

 

結果驗證階段

 

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

 

 

 

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

 

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

 

 

 

 

 

 

 

 

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

 

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

 

 

 

 

 

 

?

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

 

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

 

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

 

 

 

3.2、交互設計師技能篇

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

設計方法設計方式這里指向用戶研究部分的內容:主要有定量研究、定性研究、用戶畫像的構建,定量研究的可使用問卷調研、數據分析、眼動測試,定性研究可使用用戶訪談、焦點小組、可用性測試、卡片分類法,用戶觀察法等

 

 

3.2.2、交互設計的兵器庫2-設計規范

 

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

 

 

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

 

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

3.3、交互設計師能力篇

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

 

3.3.1、基礎能力-學習

 

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

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

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

 

3.3.2、通用能力-溝通、執行、總結

 

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

 

 

 

 

 

 

 

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

 

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

 

 

 

 

 

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

 

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

 

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

總結

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

文章內容僅供學習參考。


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

日歷

鏈接

個人資料

藍藍設計的小編 http://www.z1277.cn

存檔

主站蜘蛛池模板: 天天色影网| 毛片一| 亚洲黄色片一级 | 91视频老司机 | 国产一区二区三区欧美 | 99热国产这里只有精品免费 | 亚洲综合激情九月婷婷 | 五月色综合婷婷综合俺来也 | 天堂亚洲欧美日韩一区二区 | 欧美大尺码毛片 | 免费大片网站 | 国产又黄又爽又色视频免费观看 | 中文字幕日韩欧美 | 青青青国产视频 | 免费a级片在线观看 | 精品久久久久久国产免费了 | 国产综合亚洲欧美日韩一区二区 | 久久精品国产精品亚洲精品 | 国产真实乱人偷精品 | 特级片免费看 | 免费一级a毛片在线播放 | 国产成人自产拍免费视频 | 亚洲视频精品 | 久久国产欧美另类久久久 | 亚洲高清色图 | 欧美成年免费a级 | 麻豆资源 | 国产亚洲精品热视频在线观看 | 国产最新视频 | 欧美综合色区 | 男女做污污无遮挡激烈免费 | 清纯唯美亚洲综合 | 国产综合色在线视频播放线视 | 日本免费视频kkk4444 | 国产成人综合亚洲 | 国产三级在线免费观看 | 国内精品久久影视免费 | 日韩午夜网站 | 99久久精品免费看国产一区二区 | 永久福利盒子日韩日韩免费看 | 成人欧美一区二区三区白人 |