欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

首頁

用戶體驗一致性思考

天宇

前言
在團隊內部,我們已確立了一套設計規范,在日常項目中使用設計規范輸出變的高效、統一。然而,在實際操作中,不可避免地會遇到一些特殊情況:某些客戶提出的個性化需求并不完全契合既定的設計規范,這些促使我們不得不在保持設計一致性的基礎上進行靈活調整。因此,深入反思并優化一致性原則的應用策略顯得尤為重要。我們需要探索如何在堅守設計規范核心精神的同時,靈活應對多變的需求,確保設計既保持統一和諧,又能滿足特定場景下的獨特需求,從而實現用戶體驗與品牌價值的雙重提升。
 
用戶體驗一致性思考
 
 
用戶體驗一致性思考
 
 
在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
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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

藍藍設計的小編

UI 設計中的體驗設計是一個綜合性的工程,需要設計師從用戶需求出發,關注每一個細節,不斷優化和創新,才能打造出令用戶滿意的產品,在激烈的市場競爭中脫穎而出。

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

藍藍設計的小編

近兩年“情緒價值”這個詞,相信每個人應該或多或少都有過接觸,從商業空間的營銷場景到后來滲透到每個領域、每個行業。 
 
先說下這個詞的概念,它源于心理學和社會學, 本意為:“它指的是一個人或事物對他人情感狀態所產生的積極影響和價值。這種價值不僅僅體現在短暫的愉悅感受上,更包括長期的情緒穩定、心理滿足和精神支持。” 
無論是在網紅還是在新型電商行業中,許多品牌強調的已經不是單一的產品功能價值,而是增加了強調在消費體驗中為消費者帶來的快樂、滿足、歸屬感等等一些積極的情緒。這足以說明,無論是品牌、產品還是服務越來越注重為消費者提供情緒價值。 
 
而用戶體驗設計的本質其實就是讓人在使用產品的過程中有非常愉悅的感覺,這一點與“情緒價值”這個詞的核心也有點不謀而合。 
 
情緒價值在體驗設計中的應用
 
 
相信我們都有這樣的疑問:情緒價值在體驗設計中重要嗎,有什么具體的關系?在設計工作中的情緒價值到底重要嗎?情緒價值對產品使用的提升有哪些,具體要怎么做?相信看完下面的內容,你應該會對上面的問題有答案的。 
 
一、情緒價值對用戶體驗的影響
首先我們可能需要了解情緒價值能給用戶帶來什么?申晨老師在一次分享會上有提到過情緒價值的三個方向:愉悅感、保障感、專享感。三者由淺入深影響著用戶在使用產品時的情緒變化,對應到體驗設計中是這樣的: 
  •  
    愉悅感→影響用戶的滿意度
  •  
    保障感→影響用戶的容忍度
  •  
    專享感→影響用戶的忠誠度
 
提升用戶滿意度
積極情緒的誘導
 
當產品或服務能夠提供情緒價值時,會引發用戶的積極情緒。如下圖,三種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
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

智能時代交互設計:人機交互如何重塑生活與工作?

藍藍設計的小編

智能時代的人機交互正在以前所未有的速度和深度重塑著我們的生活與工作。它為我們帶來了諸多便利、創新和驚喜,同時也促使我們不斷思考和應對隨之而來的挑戰。在這個人機交互的新時代,我們有理由相信,隨著技術的不斷進步和設計理念的持續創新,人機交互將繼續為人類社會的發展注入強大動力,創造出更加美好的未來。

日歷

鏈接

個人資料

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

存檔

主站蜘蛛池模板: 扒开老师挠尿口到崩溃刑罚 | 香蕉精品视频 | 给我免费观看的视频在线播放 | 精品久久久久国产免费 | 51国产午夜精品免费视频 | 15同性同志18 | 韩国理论片最新第一页 | 免费视频片在线观看 | 欧美性f | 久久中文字幕乱码免费 | 欧美黑人性猛交╳xx╳动态图 | 美女脱了内裤打开腿让人桶网站o | 暖暖的免费观看高清视频韩国 | 国产91亚洲精品 | 好舒服好爽再快点视频 | 大学生初次破苞免费视频 | 国产精品高清在线 | a级精品九九九大片免费看 a级动漫 | 毛片视频网站 | 青青草伊人久久 | 四虎精品永久在线网址 | 78成人网 | ai换脸杨颖啪啪免费网站 | 果冻传媒在线播放观看228集 | 国产91精选学生在线观看 | 99久久精品免费看国产四区 | 久久er国产精品免费观看2 | 日韩一区二区三区四区区区 | 国产一区二区三区高清视频 | 四虎影院的网址 | 操大爷影院 | 91香蕉视频网址 | 亚飞与亚基高清国语在线观看 | 精品久久香蕉国产线看观看亚洲 | 精品一区二区免费视频蜜桃网 | 欧美日韩亚洲国内综合网香蕉 | 国产999在线观看 | 2015小明台湾永久区域免费 | 久久99精品国产自在自线 | 亚洲国产精品嫩草影院久久 | 亚洲精品AV无码永久无码 |