粗大的内捧猛烈进出小视频,日本成人精品视频一区,在线播放亚洲成人av,精品人妻少妇嫩草av专区,亚洲AV永久久久久久久浪潮,性导航app精品视频,九九热精品免费视频,一本一本大道香蕉久在线播放

        首頁

        微交互:提升產品用戶體驗的魔法鑰匙

        清陽

        在我們使用的產品中,多多少少都會有一些微交互的穿插,但由于微交互性能的不搶眼也不明顯的條件下,所以往往會被很多設計和開發人員所忽略。

         

        微交互的轉型

         

        但在一個優秀的產品中,微交互卻是必不可少的重要關口,它直接承載著用戶在使用產品時對產品細節的細微體驗。雖然在互聯網產品早期,微交互曾被人稱之為是“很炫酷的特性象征”,但時隔今日,在這百花齊放的產品大環境中,其實微交互已經慢慢從膚淺的炫酷轉型為附有內涵的用戶體驗關鍵要素了。

        作為產品細節體驗的重要承載,微交互的價值與地位逐漸提升,在用戶使用產品過程中,它不僅僅能促進產品與用戶的互動性,而且還能激發用戶對產品的積極感覺,并且最終影響用戶的整體行為。

        什么是微交互

         

        微交互的基本概念就是指:關注一項主要任務、一個目的得事件過程。通常情況下,微交互需要關注得是這個事件的整體交互過程,并且它存在的目的也是為了讓用戶在使用產品時能感覺到順暢性、一致性,并產生心理的愉悅感,從而讓用戶喜歡產品,愛上產品,從而留住用戶。

         

        如果籠統概括的話,可以說微交互幾乎會遍布任何設備、任何應用程序中。并且他們存在的價值就是讓用戶高興。就單純從產品說起,如果說在產品設計中,在大多數用戶與產品接觸時都能發現微交互的存在與應用。

        舉例

        1、你在Web看一段話時結尾展示是“…”時,那么通過你的心智程序,你就會下意識的將光標停留在這段話上,在這樣的情況下,微交互就會出現了,則在這段話的周圍就會出現這句話完整的展示從而被你瀏覽。

         

        2、還有一種常見的就是在你輸入錯誤的信息時系統會自動識別,并在末尾彈出消息提示,提示你需要從新輸入,更有優秀的系統會從你開始輸入時就跟進你的輸入狀態,時刻提醒你輸入的結果是否正確。

         

        其實這些小的視覺暗示和微妙的指示就是所謂的為微交互,也有人稱之為“圍觀互動”。雖然這些微交互平日不太容易能被用戶所直觀的發現,但也就是這些微小的交互,才能提升一個產品的整體用戶體驗。所以說,無論他們是多么的微妙,你都需要重視起來,并嘗試著將一般的設計方案和這些結合起來使用,并提供一些有效的信息,這樣才能讓你的用戶在瀏覽產品界面和執行操作時有基本的保障。

        知道了什么是微交互后,你還需要吃透微交互它到底是怎么工作的,只有這樣才能確保你靈活的使用微交互…

         

        微交互是如何工作的

         

        微交互的工作一般要分為四個基本要素:觸發、規則、反饋、循環。

        觸發

        觸發簡單講就是“啟動微交互”,例如:點擊按鈕或點擊鼠標。這里需要注意的是,觸發并不單純是人為操作的開始,它也同樣包含系統自動啟動的操作,比如說在你設備上收到一份郵件或短信時,這時的你其實并沒有任何操作,但系統就會有一個微交互啟動為你提示,這時的微交互就是被動的。

         

        這些所謂的啟動微交互,需要注意的是必須與一組已經擬定好的操作規則一起工作,這些規則里包含了什么能做,什么不能做的內容。

        規則

        微交互的規則就是表明用戶在操作后產品該如何按照用戶正確的心智程序進行微交互,它決定了觸發之后會發生什么事情。因此,當你在拉下界面時,產品的規則就應該包含下滑的規則,這同時也能表明用戶當時的心理是希望看到界面以上的結果或者下拉刷新看到更多新的結果。同樣,規則就是規則,在你沒有進行操作時,規則時而也在生效,例如:微信里對方并未添加你為好友,但依然和你說了句話,規則就是生效的,這里的規則就是阻止了信息的傳入。

         

        反饋

        顧名思義反饋在現實中就是你與人對話交流,對方饋贈你的信息,在產品中這個環節也同樣必不可少,它的存在可以讓用戶明確知道在用戶操作后產品發生了什么,出現什么結果的回饋信息。在微交互中,用戶看到的、聽到的、操作的、甚至包含感覺到的,都是可以反饋的。

         

        例如:

        1、看到的:希望打車,看到的反饋就是地圖和輸入起始地/目的地的界面,這就符合了用戶心理;

        2、聽到的:在與人聊天時,其他人也和你說了句話,就聽到手機“蜂”一聲,這樣的反饋就是提醒用戶聽到有新消息;

        3、操作的:在任何產品中都需要用戶操作,那么然后反饋用戶操作結果;

        4、感覺到的:這包含界面樣式、產品交互是否符合用戶心理預期,并通過預期實現操作后得到想要結果,這里面就包含感覺到的反饋;

         

        循環

        循環在微交互里屬于次數的說明,在我們手機設置鬧鈴時就經常看到有提醒一次、一周提醒等說明,這就是循環的微交互,循環的微交互基本上定義了交互的某種性質,它會告訴你隨著時間的推移發生了幾次,發生了多少。

         

        例如:在你去銀行自動取款機取錢時輸入的密碼,如果輸入錯誤,就會提示你還有幾次輸入,這樣的就是循環的過程,等于是在原地打轉,但當你成功進入后就會從這個環節進入到下一個環節繼續循環。

         

        說了這么多,我想你應該知道了微交互的工作方式以及流程,那么接下來要說的就是微交互需要在何時、何地以及如何才能正確使用了。

         

        何時、何地以及如何使用微交互

         

        1、界面滑動

        現如今產品幾乎都帶有滑動的交互,之所以滑動越來越多,是因為滑動交互可以清楚的展示給用戶行為操作路徑,而點擊確實短期記憶性的,當用戶想要開始滑動時,這是用戶操作前的準備,而當用戶正在滑動時,這是操作中的節點,這時滑動的界面就會隨著手勢的方向進行移動并告訴用戶界面即將去往哪里,下次想要找到該從哪里找的路徑,在操作結束后,微交互完成,這時操作后的結果,這一整套流程下來,通過短小的微交互,就能很清晰的告知用戶他在做什么以及他做了什么。

         

        2、下拉/側拉菜單

        下拉/側拉菜單就像產品某個界面內的一個抽屜,它里面包含了當前界面賦予的更多選擇,并且還能占據極小的空間,根據用戶的心智程序來講,竟然是抽屜就應該拉取,這才符合環境映射的條件。當前在產品設計內,幾何都包含了下拉/側拉菜單的微交互,例如淘寶的側拉菜單、美團的下拉菜單都是微交互的展示,在輕松點擊后,界面tab則下拉或側拉出一個抽屜,里面就包含了N多個附加選擇或者篩選器。

         

        3、引導頁

        對于產品的不斷迭代與改版,其界面一定會發生一些細微的變化,更有時功能會作為轉移,那么為了能更好的引導用戶的操作路徑,就需要用到一些引導頁,我這里說的引導頁并不是啟動頁后的大篇章引導,而是在半黑透明遮罩的同時,流出需要用戶操作的功能引導,在聚焦了操作功能上,賦予一些微交互,會加大用戶對產品的認可,包括喜歡新產品。

         

        4、操作反饋

        在用戶正在輸入一個列表菜單時,最需要的微交互就是即使反饋,作為產品首先應該賦予用戶的就是安全與人性,安全是指產品在用戶心理的懷疑指數多少,指數越低安全度越高,而人性就需要操作的了路徑與展示是符合用戶的心理預期的。安全與人性都可以通過微交互來實現,例如在建設銀行APP登陸前會出現安全掃描,在支付寶輸入了支付密碼后出現的結果符合了人性思維。

         

        5、卡片旋轉/淡化

        有些app會出現卡片類樣式的界面,并通過用戶的操作實現卡片淡化和卡片丟棄等微交互,這樣的微交互則更加具象了用戶的真實空間感受,通過與真實環境的結合,將用戶帶入產品,使用戶在使用產品時會有現實版的感覺。例如:陌陌的附近人卡片丟棄,網易音樂的音樂專輯封面淡化。

         

         

        總結

        微交互在產品內可以說是無處不在,雖然這些都是一些很小的細節,如果只是靜態展示可能并沒有太大作用,但通過產品與用戶的這種互動,變相交流,微交互在產品的整體體驗上就可以增加巨大的價值,這也可能是所謂的“宜家效應”吧,用戶在自己親手制作或行動時,才能賦予產品更大的價值感。

         

        好的產品必須擁有這種精心設計的標志,它不僅包含了對用戶的心智理解,更多的,是對用戶的一種尊重與情感抒發。



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

        蘭亭妙微(www.xintaizi.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

        情感化設計:打造APP中的魅力磁石,吸引并留住用戶的心

        清陽

        情感是我們生活中不可割舍的元素,UI設計師也開始在設計時添加「情感化元素」

         

         

         

         

         

         

        undefined

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         



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

        蘭亭妙微(www.xintaizi.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

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

        鶴鶴

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


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

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

        鶴鶴

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


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

        動效讓這些設計更驚艷

        清陽

        微動效在產品設計中的運用已經非常普及了,無論是在圖標還是界面場景中,都運用得很普遍。通過動效的輔助不僅可以提升設計情感化,也能解決更為復雜的交互場景,讓設計更驚艷。
         
        最近在體驗一些產品的過程中,黑馬哥也發現了幾個借助動效表達的設計方案,效果十分的驚艷,分享出來和大家一起學習一下。
        動效讓這些設計更驚艷
         
         
         
         
        目錄
        一、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。如下圖所示:
        如何從產品角度發起交互設計?
         
         
        如果按照目標人群所在場景分類,進行細分,則為下圖:
        如何從產品角度發起交互設計?
         
         
        乘地鐵去地鐵站和附近地鐵站區別:前為用戶會乘坐地鐵去目的地尋找美食;后為用戶不用地鐵/吃完后使用地鐵,地鐵邊美食沒有其他美食團購產品有競爭力。
        上班族和普通大眾區別:上班族工作日使用固定地鐵站上下班,時間可能緊急,快速獲取食物;普通找美食吃的大眾不使用固定地鐵站,目的是通過地鐵快速到達某目的地,就近享受目的地美食。
        朋友們和個人區別:朋友們一起吃飯,容易出現喝多、吃過點等異常行為,并且在選擇地鐵旁吃飯地點時需要考慮朋友們家的位置就近選目的地。個人均不需要考慮以上,較為自由。
         
        市場定位
        經過領域場景的分析,我們知道了真場景都是用戶有目的乘坐地鐵去到某地鐵站出站口尋找美食的。那么我們對這么一群大眾進行用戶人口統計學類的細分:
        如何從產品角度發起交互設計?
         
         
        • 上圖為前期定位的目標大眾用戶群,依靠地鐵的工具屬性,我們得出了具體的兩個影響因素:時間+美食熱愛程度。同時我們把直接競品和間接競品一同進行用戶群比較。可以看到和大美團有相同和不同維度,這就是產品最初冷啟動時期的差異化!也就是我們的前、中期場景的主要目標用戶類型。
        • 紅色部分即種子用戶群,以這些群體為冷啟動階段,可以更快的向四周擴張。因為他們有使用地鐵的時間屬性,同時有較高的美食熱愛程度,有利于帶動其他時間+熱愛程度的用戶加入產品,實現快速并有質量的拉新、活躍的目標。
        • 低端直接競品即用戶群工具屬性明顯,只是搜地鐵站,選擇美食的用戶,無明顯其他行為;高端競品即注重社交、ugc為起點,逼格高的搜尋美食工具。這部分開始很難,工作量巨大,且較脫離大眾主流群體。
         
        結合上圖和要做的場景,我們得出了產品具體目標用戶:乘坐地鐵快速到達并尋找目的地美食的大眾用戶(上班族休息日,大學生,個人或一起),要求在地鐵站附近便能方便享受目的地美食。且對美食有一定熱愛程度。
         
        (三)用戶測試
        邀請真實用戶進行產品試用,觀察他們的操作行為,收集反饋意見,為后續的設計提供依據。
        1、需求接受
        需求很有可能是在線上接到的,并不是面對面交流傳遞的,并且還會遇到很多坑,例如需求本身不具體,或者自己理解有偏差,因此在接到需求后,最好和交互、產品等同事進行面對面的交流和溝通。
        詳細了解測試目的和關鍵點,確定用戶配比。
        最好是讓交互帶著跑一下整個程序(半成品demo也好,交互稿也行),這樣能在頭腦中快速形成操作流程的認知,并把相應關鍵點對應上去。同時把大致的用戶配比情況敲定一下,后續就可以直接招募用戶了。
        了解demo的完成進度,相應確定具體測試時間。
        交互、視覺等完成demo的時間具有太多不確定因素,因此我們需要及時了解整個demo的完成進度,在盡可能快的情況下保險安排測試時間,如果邀請的是外部用戶,結果用戶到了而demo還沒出來,那也是夠了。
        2、方案撰寫和確定
        讓交互稿幫助自己。在完成測試方案撰寫的過程中demo還未誕生,具體程序細節記憶又很模糊,不好寫測試方案,怎么辦?不要慌,去看交互稿吧。
        及時溝通。在方案撰寫過程中,如果有一些疑問,例如在看交互稿的時候還不是很理解某個具體操作過程,或者自己對產品有疑問的也可以跟交互等溝通,因為自己會遇到的問題,很有可能在測試用用戶也會遇到,這樣子用戶如果問到了,就可以相應作出解釋。
        核實確定方案。完成方案后,可以在公司溝通交流工具上和交互及產品等同事再確認一下,是否有什么地方遺漏或有不妥之處。
        3、用戶招募
        這是一個大多數人都頭疼的一個過程,希望看完了以下幾點,可以稍微緩解一下大家的癥狀。再次確定測試時間。
        方案定下來后,再跟交互確認測試時間,了解是否有變動和調整,盡量避免用戶來了demo或者測試環境還不ok的情況。
         
        撰寫招募文案。需要把用戶要求、測試日期和地點、報酬、大致的測試時長、用戶需要在測試中做什么,以及報名方式等表達清楚。有以下幾點可以注意一下,方便我們自己招募:
        • 詳細列出測試安排的時間段。例如10:30-11:15、13:30-14:15,讓用戶自己挑選合適的時間段,這樣就不用事后再協調不同用戶測試時間了;
        • 優先人力、信息管理、行政等崗位同事。盡量避免相關產品人員、設計崗等同事。
        • 制作簡單的招募海報,并檢查。可以事先將“海報”用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
        來源:站酷
        著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
         

        日歷

        鏈接

        個人資料

        藍藍設計的小編 http://www.xintaizi.com

        存檔