首頁

數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具

ui設(shè)計分享達人

 
 
PART 1 ——————
數(shù)據(jù)圖表的概述
數(shù)據(jù)圖表是將復雜的數(shù)據(jù)集轉(zhuǎn)換為圖形或圖像的過程,旨在通過視覺化的方式簡化信息的理解和分析。它不僅是一種技術(shù)手段,更是一種溝通工具,能夠幫助人們更有效地解釋數(shù)據(jù)、發(fā)現(xiàn)模式、做出決策并傳達見解。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
「核心價值」
·  簡化復雜信息:數(shù)據(jù)圖表通過圖形化的手段簡化了大量數(shù)字或文本信息,使讀者能夠迅速抓住關(guān)鍵點。
·  促進理解與學習:利用人類大腦對圖形和色彩的敏感性,數(shù)據(jù)圖表加速了信息處理過程,支持教育和培訓。
·  輔助決策制定:數(shù)據(jù)圖表為管理層或其他決策者提供了有價值的商業(yè)智能,支持快速決策。
·  提升溝通效果:促進了跨部門協(xié)作和公眾傳播的效果。
 
「核心要素」
·  數(shù)據(jù):來源可以是數(shù)據(jù)庫、API或文件,類型包括定量和定性數(shù)據(jù)。
·  圖表類型:根據(jù)數(shù)據(jù)特性和分析目的選擇最恰當?shù)膱D表類型。
·  設(shè)計原則:確保圖表清晰易讀、準確無誤、風格一致且具備視覺吸引力。
 
「核心目標」
·  簡化復雜信息:使大量數(shù)字或文本信息變得直觀易懂。
·  促進理解與學習:加速信息處理過程,支持教育和培訓。
·  輔助決策制定:提供有價值的商業(yè)智能,支持快速決策。
·  提升溝通效果:增強跨部門協(xié)作和公眾傳播的效果。
·  探索數(shù)據(jù)關(guān)系:發(fā)現(xiàn)隱藏模式,驗證假設(shè)。
·  監(jiān)測與跟蹤進展:實時監(jiān)控關(guān)鍵指標,規(guī)劃項目管理。
 
?? 
PART 2
 ——————
應用標準指南
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
設(shè)計有效的數(shù)據(jù)圖表不僅需要選擇合適的圖表類型,還需要遵循一系列設(shè)計要點以確保圖表既美觀又實用。以下是應用數(shù)據(jù)圖表時需要注意的標準指南:
 
1. 明確目標與受眾
·  理解需求:明確你希望通過圖表傳達的信息是什么。
·  考慮受眾:了解你的目標受眾是誰,他們的知識水平和興趣點在哪里。
2. 簡潔性與清晰度
·  去除冗余:避免不必要的裝飾元素,保持圖表簡單明了。
·  突出重點:通過顏色、字體大小等方式強調(diào)最重要的信息。
·  易于解讀:確保圖表中的每個元素都有其明確的意義,并且容易被理解。
3. 數(shù)據(jù)準確性
·  精確無誤:保證所使用的數(shù)據(jù)是最新且經(jīng)過驗證的。
·  透明度:注明數(shù)據(jù)來源,增加可信度;如果適用,提供數(shù)據(jù)獲取方法或計算公式。
4. 合理使用顏色
·  色彩心理學:根據(jù)情感聯(lián)想選用顏色,例如綠色通常關(guān)聯(lián)增長,紅色常用來警示。
·  對比度:使用足夠的顏色對比來區(qū)分不同的數(shù)據(jù)系列或類別,同時考慮到色盲用戶的需要。
·  一致性:在多個圖表中保持顏色方案的一致性,以便于比較。
5. 標簽與注釋
·  完整標簽:為所有軸、圖例和其他重要元素添加清晰的標簽。
·  必要注釋:對于特別重要的數(shù)據(jù)點或異常情況進行說明,幫助用戶更好地理解圖表內(nèi)容。
6. 圖表標題與描述
·  簡潔標題:用簡短而準確的語言概括圖表的主要信息。
·  輔助文本:如有必要,可以添加副標題或簡短描述來補充背景信息或解釋圖表含義。
7. 交互性(如適用)
·  工具提示:當用戶將鼠標懸停在某個數(shù)據(jù)點上時,顯示詳細信息。
·  動態(tài)更新:對于實時數(shù)據(jù),設(shè)計允許自動刷新的圖表。
·  篩選與排序:提供選項讓用戶根據(jù)自己的興趣過濾或重新排列數(shù)據(jù)。
8. 響應式設(shè)計
·  適應多平臺:確保圖表能夠在不同設(shè)備(桌面電腦、平板電腦、智能手機)上良好顯示。
·  可縮放:允許用戶放大特定區(qū)域或滾動查看超出初始視圖的數(shù)據(jù)。
9. 避免誤導性表示
·  比例尺的選擇:合理設(shè)置Y軸起始值和增量,避免夸大或縮小差異。
·  避免三維效果:除非絕對必要,否則不要使用三維效果,因為它們可能會扭曲感知比例。
10. 故事講述
·  邏輯連貫:構(gòu)建一個從開始到結(jié)束逐步理解數(shù)據(jù)背后意義的故事線。
·  引導視線:通過布局和視覺層次引導觀眾關(guān)注最重要或最有趣的部分。
11. 測試與反饋
·  用戶測試:邀請真實用戶測試圖表,收集反饋以改進設(shè)計。
·  持續(xù)優(yōu)化:基于用戶反饋和技術(shù)進步不斷調(diào)整和完善圖表設(shè)計。
 
遵循上述標準可以幫助創(chuàng)建出既美觀又功能強大的數(shù)據(jù)圖表,從而更有效地支持決策過程并促進信息交流。
 
?? 
PART 3 
——————
圖表構(gòu)成元素
想準確的將圖表與所要表現(xiàn)的數(shù)據(jù)進行對應,需要了解圖表本身所包含的基本元素。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
在這些元素中正常情況下一定在圖表中的有:標題、時間范圍、圖形主體,經(jīng)常出現(xiàn)的有:坐標系、圖例、提示信息,有時候會有的有:切換選項和值域。
 
· 標題
(Title)
簡明扼要地說明圖表的內(nèi)容和目的。
標題應位于圖表上方居中位置,使用清晰易讀的字體和大小。
 
· 坐標系(Coordinate System)
定義圖表的X軸和Y軸,以及數(shù)據(jù)點的位置。
坐標軸應清晰地標記,包括刻度線和刻度值。確??潭乳g隔合適,易于閱讀。
 
· 時間范圍(Time Range)
告知用戶圖表數(shù)據(jù)覆蓋的時間段。
如果圖表顯示的是時間序列數(shù)據(jù),時間范圍可以放在標題下方或者圖表底部的X軸標簽旁邊。
 
· 圖形主體(Graph Body)
定義圖表的X軸和Y軸,以及數(shù)據(jù)點的位置。
坐標軸應清晰地標記,包括刻度線和刻度值。確保刻度間隔合適,易于閱讀。
 
· 圖例(Legend)
解釋圖表中不同顏色或圖案代表的數(shù)據(jù)系列。
圖例應放置在圖表的邊角位置,不妨礙圖表的主體內(nèi)容。圖例中的顏色或圖案應與圖表中的一致。
 
· 提示信息(Tooltip)
允許用戶選擇不同的數(shù)據(jù)系列或時間范圍。
切換選項可以是按鈕或下拉菜單的形式。應放置在圖表的一側(cè)或頂部,不影響圖表主體的可視性。
 
· 切換選項(Toggle Options)
允許用戶選擇不同的數(shù)據(jù)系列或時間范圍。
切換選項可以是按鈕或下拉菜單的形式。應放置在圖表的一側(cè)或頂部,不影響圖表主體的可視性。
 
· 值域(Value Range)
允許用戶調(diào)整坐標軸的范圍,以聚焦于特定的數(shù)據(jù)區(qū)間。
值域調(diào)整通常出現(xiàn)在坐標軸附近的小控件中,例如滑塊或輸入框。
 
?? 
PART 4 
——————
常見的數(shù)據(jù)圖表類型
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
在C端(消費者端)應用中,數(shù)據(jù)圖表是一種非常重要的可視化工具,它能夠幫助用戶更直觀地理解和分析數(shù)據(jù)。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
 
?? 
PART 5 
——————
選擇合適圖表的關(guān)鍵因素
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
挑選最佳圖表類型是一個綜合考量數(shù)據(jù)集特點、應用場景需求以及目標受眾理解能力的過程,是確保數(shù)據(jù)有效傳達的關(guān)鍵。以下是選擇圖表類型時應考慮的幾個重要要點:
 
1. 數(shù)據(jù)性質(zhì)
·  定量 vs 定性:確定你的數(shù)據(jù)是數(shù)值型(如銷售額、溫度)還是分類型(如性別、地區(qū))。數(shù)值型數(shù)據(jù)通常適合柱狀圖、折線圖等;分類型數(shù)據(jù)可能更適合餅圖或條形圖。
·  時間序列 vs 非時間序列:如果數(shù)據(jù)隨時間變化,如股票價格或天氣預報,則折線圖和面積圖可能是最佳選擇。如果是靜態(tài)數(shù)據(jù),如人口統(tǒng)計信息,則可以考慮柱狀圖或餅圖。
 
2. 比較需求
·  類別對比:如果你需要比較不同類別的數(shù)量或比例,柱狀圖、條形圖和餅圖是很好的選擇。
·  趨勢分析:對于展示隨時間或其他連續(xù)變量的變化趨勢,折線圖和面積圖更為合適。
·  相關(guān)性探索:當你要研究兩個變量之間的關(guān)系時,散點圖可以幫助你發(fā)現(xiàn)潛在的相關(guān)性或模式。
 
3. 數(shù)據(jù)量與復雜度
·  少量數(shù)據(jù):對于簡單且數(shù)據(jù)點較少的情況,餅圖、條形圖等可以直接清晰地傳達信息。
·  大量數(shù)據(jù):面對大量數(shù)據(jù)或高維數(shù)據(jù)集時,熱力圖、氣泡圖、樹狀圖等能夠更有效地處理復雜信息,并幫助識別模式。
 
4. 用戶目標與受眾理解能力
·  決策支持:如果目的是輔助快速決策,那么應該選擇易于解讀、直觀明了的圖表類型,如子彈圖、漏斗圖等。
·  教育或解釋:針對教育目的或需要詳細解釋的數(shù)據(jù),可以選擇更具互動性的圖表,如帶有工具提示或動態(tài)更新功能的圖表。
 
5. 圖表的功能性
·  強調(diào)差異:如果你想突出顯示異常值或顯著差異,可以選擇箱線圖、瀑布圖等。
·  構(gòu)成分析:為了展示各部分占整體的比例關(guān)系,餅圖和堆疊柱狀圖非常有用。
·  分布展示:直方圖和密度圖能很好地展示數(shù)據(jù)的分布情況,包括集中趨勢和離散程度。
 
6. 可視化效果與美觀性
·  視覺吸引力:某些圖表不僅傳遞信息,還能增強視覺美感,如玫瑰圖、雷達圖等,適用于報告封面或演示文稿中。
·  空間效率:在有限的空間內(nèi)傳達更多信息,子彈圖、儀表盤等緊湊設(shè)計的圖表是不錯的選擇。
 
7. 行業(yè)慣例與標準
·  領(lǐng)域特定:不同的行業(yè)可能有其偏好使用的圖表類型,例如金融領(lǐng)域常用蠟燭圖,地理信息系統(tǒng)常用地圖可視化。
·  遵循規(guī)范:遵守所在領(lǐng)域的圖形表示規(guī)范,確保圖表的專業(yè)性和可接受性。
 
通過綜合考慮上述要點,你可以為特定的數(shù)據(jù)集和應用場景挑選出最合適的圖表類型,從而最大化數(shù)據(jù)的價值并促進有效的溝通。選擇圖表時,務必結(jié)合實際需求和用戶背景,確保最終呈現(xiàn)的信息既準確又易于理解。
 
?? 
PART 6 
——————
使用場景
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
「健康類應用」
健康類App通過使用多樣化的數(shù)據(jù)圖表,不僅讓用戶對自己的健康狀況有了更直觀的理解,同時也激勵用戶采取積極的生活方式改變,從而改善健康狀況。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
——圖表運用特點——
1. 清晰易讀
·  直觀布局:圖表的顏色和布局讓用戶能夠迅速獲取關(guān)鍵信息,如每日步數(shù)、卡路里消耗等。
·  視覺層次分明:使用不同的顏色、字體大小和對比度來區(qū)分關(guān)鍵信息和次要信息,最重要的數(shù)據(jù)一目了然。
·  一致性:整個應用程序中圖表風格的一致性,包括顏色編碼、圖標和布局,以增強用戶對不同頁面間數(shù)據(jù)的理解。
 
2. 互動性
·  深度探索:用戶通過點擊、滑動或其他交互操作深入查看更詳細的數(shù)據(jù),如具體日期的鍛煉記錄或飲食攝入情況。
·  多維度篩選:靈活的篩選選項,讓用戶可以根據(jù)時間范圍(日、周、月)、運動類型等進行篩選,滿足個性化的查詢需求。
·  導出功能:為用戶提供將圖表導出為圖片或CSV格式的功能,便于打印或分享給教練或朋友。
 
3. 個性化
·  用戶定制:根據(jù)用戶的個人健康目標或偏好調(diào)整圖表內(nèi)容,例如突出顯示關(guān)鍵指標的變化趨勢或特定訓練方案的效果。
·  目標跟蹤:類似于健康管理目標設(shè)定,允許用戶設(shè)定并跟蹤自己的健身目標,如減重、增肌等。
·  建議與反饋:集成系統(tǒng)推薦的圖表視圖或設(shè)置,方便用戶快速評估進展,并為用戶提供有針對性的反饋和建議。
 
4. 實時更新
·  即時反饋:圖表能夠迅速反映最新的健身數(shù)據(jù),如實時監(jiān)測的心率或運動進度,這對于及時調(diào)整訓練計劃尤為重要。
·  同步與整合:與其他健身設(shè)備或平臺無縫對接,自動同步來自各種來源的數(shù)據(jù),如智能手環(huán)、跑步機等,確保數(shù)據(jù)的完整性和準確性。
·  通知與提醒:當某些關(guān)鍵指標達到預設(shè)目標或需要特別關(guān)注時,及時向用戶發(fā)送通知或提醒,鼓勵持續(xù)參與。
 
5. 教育與支持
·  學習資源:提供額外的學習資源鏈接或內(nèi)置教程,幫助用戶更好地理解他們的健身數(shù)據(jù)和圖表背后的意義。
·  社區(qū)交流:創(chuàng)建一個安全的社區(qū)平臺,讓用戶之間可以交流經(jīng)驗和支持,增加互動性和動力。
 
綜上所述,健身類APP圖表運用的設(shè)計特點不僅強調(diào)了清晰易讀、互動性強、個性化定制和實時更新,還特別注重用戶體驗和社區(qū)互動。這些特性共同作用,可以幫助用戶更有效地管理和理解健身數(shù)據(jù),從而促進更好的健康管理和運動效果。
 
「醫(yī)療輔助應用」
醫(yī)療輔助應用的數(shù)據(jù)圖表設(shè)計特點可以從健身類APP的設(shè)計特點中汲取靈感,但同時也需要考慮到醫(yī)療行業(yè)的特殊需求和嚴格標準。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
——圖表運用特點——
1. 清晰易讀
·  專業(yè)術(shù)語解釋:確保圖表本身清晰易讀的同時,提供必要的術(shù)語解釋或簡短說明,幫助非專業(yè)人士理解復雜的醫(yī)學概念。
·  視覺層次分明:使用不同的顏色、字體大小和對比度來區(qū)分關(guān)鍵信息和次要信息,確保最重要的數(shù)據(jù)一目了然。
·  一致性:保持整個應用程序中圖表風格的一致性,包括顏色編碼、圖標和布局,以增強用戶對不同頁面間數(shù)據(jù)的理解。
 
2. 互動性
·  深度探索:用戶通過點擊、滑動或其他交互操作深入查看更詳細的數(shù)據(jù),如具體日期的測量結(jié)果或特定治療階段的效果。
·  多維度篩選:靈活的篩選選項,讓用戶可以根據(jù)時間范圍(日、周、月)、病患群體、疾病類型等進行篩選,滿足個性化的查詢需求。
·  導出功能:為用戶提供將圖表導出為PDF、CSV等格式的功能,便于打印或分享給其他醫(yī)療專業(yè)人員。
 
3. 個性化
·  患者定制:根據(jù)患者的健康狀況、治療計劃或個人偏好調(diào)整圖表內(nèi)容,例如突出顯示關(guān)鍵指標的變化趨勢或特定治療方案的效果。
·  醫(yī)生建議:集成醫(yī)生推薦的圖表視圖或設(shè)置,方便醫(yī)生快速評估病情進展,并為患者提供有針對性的反饋。
·  健康目標跟蹤:類似于健身APP中的目標設(shè)定,允許患者設(shè)定并跟蹤自己的康復或健康管理目標,如血壓控制、體重管理等。
 
4. 實時更新
·  即時反饋:圖表能夠迅速反映最新的健康數(shù)據(jù),如實時監(jiān)測的生命體征或?qū)嶒炇覚z測結(jié)果,這對于緊急情況下的決策尤為重要。
·  同步與整合:與其他醫(yī)療設(shè)備或系統(tǒng)無縫對接,自動同步來自各種來源的數(shù)據(jù),如可穿戴設(shè)備、醫(yī)院信息系統(tǒng)等,確保數(shù)據(jù)的完整性和準確性。
·  通知與預警:當某些關(guān)鍵指標超出正常范圍時,及時向患者和相關(guān)醫(yī)護人員發(fā)送通知或警告,以便采取必要的干預措施。
 
5. 隱私與安全
·  數(shù)據(jù)加密:所有傳輸和存儲的數(shù)據(jù)都應經(jīng)過嚴格的加密處理,確保患者信息的安全。
·  訪問權(quán)限控制:實施細粒度的權(quán)限管理,確保只有授權(quán)人員可以查看敏感數(shù)據(jù)。
·  合規(guī)性:遵守相關(guān)的法律法規(guī)和行業(yè)標準,如HIPAA(美國健康保險流通與責任法案)或其他國家/地區(qū)的療數(shù)據(jù)保護法規(guī)。
 
6. 教育與支持
·  學習資源:提供額外的學習資源鏈接或內(nèi)置教程,幫助用戶更好地理解他們的健康數(shù)據(jù)和圖表背后的意義。
·  社區(qū)交流:創(chuàng)建一個安全的社區(qū)平臺,讓患者之間或患者與醫(yī)生之間可以交流經(jīng)驗和支持。
 
綜上所述,醫(yī)療輔助Web應用的數(shù)據(jù)圖表不僅要具備清晰易讀、互動性強、個性化定制和實時更新的特點,還需要特別關(guān)注隱私保護和安全性,以及提供足夠的教育和支持資源。這些特性共同作用,可以幫助醫(yī)療專業(yè)人員和患者更有效地管理和理解健康數(shù)據(jù),從而促進更好的醫(yī)療服務和健康管理。
 
「金融類應用」
金融類應用的數(shù)據(jù)圖表設(shè)計需要特別關(guān)注清晰性、互動性、個性化和實時更新,同時還要考慮到金融行業(yè)的特殊需求如安全性、合規(guī)性和專業(yè)性。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
——圖表運用特點——
1. 清晰易讀
·  直觀布局:圖表的顏色和布局讓用戶能夠迅速獲取關(guān)鍵信息,如股票價格走勢、投資組合表現(xiàn)等。
·  視覺層次分明:不同的顏色、字體大小和對比度來區(qū)分關(guān)鍵信息和次要信息,確保最重要的數(shù)據(jù)一目了然。
·  一致性:整個應用程序中圖表風格的一致性,包括顏色編碼、圖標和布局,以增強用戶對不同頁面間數(shù)據(jù)的理解。
·  術(shù)語解釋:提供必要的術(shù)語解釋或簡短說明,幫助非專業(yè)人士理解復雜的金融概念。
 
2. 互動性
· 深度探索:用戶通過點擊、滑動或其他交互操作深入查看更詳細的數(shù)據(jù),如具體日期的交易記錄或市場波動情況。
·  多維度篩選:靈活的篩選選項,讓用戶可以根據(jù)時間范圍(日、周、月、年)、資產(chǎn)類型(股票、債券、基金等)進行篩選,滿足個性化的查詢需求。
·  導出功能:為用戶提供將圖表導出為圖片、PDF或CSV格式的功能,便于打印或分享給財務顧問或同事。
·  情景模擬:提供情景分析工具,用戶可以調(diào)整變量(如利率、通脹率)來預測不同市場條件下的投資表現(xiàn)。
 
3. 個性化
·  用戶定制:根據(jù)用戶的個人投資目標或偏好調(diào)整圖表內(nèi)容,例如突出顯示關(guān)鍵指標的變化趨勢或特定投資策略的效果。
·  風險偏好匹配:基于用戶的風向承受能力,推薦適合的投資組合配置,并展示相應的風險與回報圖表。
·  建議與反饋:集成系統(tǒng)推薦的圖表視圖或設(shè)置,方便用戶快速評估投資進展,并為用戶提供有針對性的投資建議和反饋。
 
4. 實時更新
· 即時反饋:確保圖表能夠迅速反映最新的金融市場數(shù)據(jù),如實時股價、匯率變動等,這對于及時調(diào)整投資策略尤為重要。
·  同步與整合:與其他金融平臺或服務無縫對接,自動同步來自各種來源的數(shù)據(jù),如銀行賬戶、證券賬戶等,確保數(shù)據(jù)的完整性和準確性。
·  通知與提醒:當某些關(guān)鍵指標達到預設(shè)閾值或需要特別關(guān)注時,及時向用戶發(fā)送通知或提醒,幫助用戶抓住投資機會或規(guī)避風險。
 
5. 安全與合規(guī)
·  數(shù)據(jù)加密:所有傳輸和存儲的數(shù)據(jù)都應經(jīng)過嚴格的加密處理,確保用戶隱私和資金安全。
·  訪問權(quán)限控制:實施細粒度的權(quán)限管理,確保只有授權(quán)人員可以查看敏感數(shù)據(jù)。
·  合規(guī)性:遵守相關(guān)的法律法規(guī)和行業(yè)標準,如GDPR(歐盟通用數(shù)據(jù)保護條例)、SOX(薩班斯-奧克斯利法案)等,確保數(shù)據(jù)處理符合法律要求。
 
6. 教育與支持
·  學習資源:提供額外的學習資源鏈接或內(nèi)置教程,幫助用戶更好地理解他們的金融數(shù)據(jù)和圖表背后的意義。
·  社區(qū)交流:創(chuàng)建一個專業(yè)的社區(qū)平臺,讓用戶之間或用戶與金融專家之間可以交流經(jīng)驗和支持。
·  客戶支持:提供在線客服或熱線電話,確保用戶在遇到問題時能夠得到及時的幫助。
 
綜上所述,金融類應用的數(shù)據(jù)圖表設(shè)計不僅要具備清晰易讀、互動性強、個性化定制和實時更新的特點,還需要特別關(guān)注安全性和合規(guī)性,以及提供足夠的教育和支持資源。這些特性共同作用,可以幫助用戶更有效地管理和理解金融數(shù)據(jù),從而做出更加明智的投資決策。
 
「信息記錄類應用」
另一類比較常用圖表的 App 是信息記錄類 App,這些 App 通常會統(tǒng)計用戶主動輸入信息的頻次或頻率,依此生成一段時間周期內(nèi)的統(tǒng)計圖表。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
——圖表運用特點——
1. 清晰易讀
·  直觀布局:圖表的顏色和布局讓用戶能夠迅速獲取關(guān)鍵信息,如每日情緒波動、月度費用支出等。
·  視覺層次分明:不同的顏色、字體大小和對比度來區(qū)分關(guān)鍵信息和次要信息,確保最重要的數(shù)據(jù)一目了然。
·  一致性:保持整個應用程序中圖表風格的一致性,包括顏色編碼、圖標和布局,以增強用戶對不同頁面間數(shù)據(jù)的理解。
·  術(shù)語解釋:對于不太常見的記錄類別或指標,提供必要的解釋或簡短說明,幫助用戶理解圖表內(nèi)容。
 
2. 互動性
·  深度探索:允許用戶通過點擊、滑動或其他交互操作深入查看更詳細的數(shù)據(jù),如具體日期的記錄詳情或特定事件的影響。
·  多維度篩選:提供靈活的篩選選項,讓用戶可以根據(jù)時間范圍(日、周、月、年)、記錄類型(如費用分類、情緒標簽)進行篩選,滿足個性化的查詢需求。
·  導出功能:為用戶提供將圖表導出為圖片、PDF或CSV格式的功能,便于打印或分享給朋友或顧問。
·  情景模擬:在適用的情況下,提供情景分析工具,用戶可以調(diào)整變量(如預算分配)來預測不同情況下的結(jié)果。
 
3. 個性化
·  用戶定制:用戶的個人目標或偏好調(diào)整圖表內(nèi)容,例如突出顯示關(guān)鍵指標的變化趨勢或特定習慣養(yǎng)成的效果。
·  目標跟蹤:類似于健身APP中的目標設(shè)定,允許用戶設(shè)定并跟蹤自己的記錄目標,如每月節(jié)省金額、每周閱讀書籍數(shù)量等。
·  建議與反饋:集成系統(tǒng)推薦的圖表視圖或設(shè)置,方便用戶快速評估進展,并為用戶提供有針對性的反饋和建議。
 
4. 實時更新
·  即時反饋:圖表能夠迅速反映最新的記錄數(shù)據(jù),如實時更新的情緒評分或新添加的費用條目,這對于及時調(diào)整計劃尤為重要。
·  同步與整合:與其他相關(guān)平臺或服務無縫對接,自動同步來自各種來源的數(shù)據(jù),如銀行賬戶、健康監(jiān)測設(shè)備等,確保數(shù)據(jù)的完整性和準確性。
·  通知與提醒:當某些關(guān)鍵指標達到預設(shè)閾值或需要特別關(guān)注時,及時向用戶發(fā)送通知或提醒,幫助用戶保持記錄習慣或抓住改進機會。
 
5. 隱私與安全
·  數(shù)據(jù)加密:所有傳輸和存儲的數(shù)據(jù)都應經(jīng)過嚴格的加密處理,確保用戶的個人信息和敏感數(shù)據(jù)的安全。
·  訪問權(quán)限控制:實施細粒度的權(quán)限管理,確保只有授權(quán)人員可以查看敏感數(shù)據(jù)。
·  合規(guī)性:遵守相關(guān)的法律法規(guī)和行業(yè)標準,如GDPR(歐盟通用數(shù)據(jù)保護條例),確保數(shù)據(jù)處理符合法律要求。
 
6. 教育與支持
· 學習資源:提供額外的學習資源鏈接或內(nèi)置教程,幫助用戶更好地理解他們的記錄數(shù)據(jù)和圖表背后的意義。
·  社區(qū)交流:創(chuàng)建一個安全的社區(qū)平臺,讓用戶之間可以交流經(jīng)驗和支持,增加互動性和動力。
·  客戶支持:提供在線客服或熱線電話,確保用戶在遇到問題時能夠得到及時的幫助。
 
7. 歷史回顧與趨勢分析
·  長期趨勢:提供長周期的趨勢分析圖表,幫助用戶回顧過去一段時間內(nèi)的變化和發(fā)展,如年度費用總結(jié)、多年情緒變化等。
·  模式識別:通過可視化手段幫助用戶發(fā)現(xiàn)隱藏的模式或規(guī)律,如消費習慣、情緒波動周期等。
·  里程碑標記:在圖表中標記重要的里程碑或轉(zhuǎn)折點,如重大事件發(fā)生的時間、重要決策做出的時刻等,增強回憶和反思的價值。
 
綜上所述,信息記錄類應用的數(shù)據(jù)圖表設(shè)計不僅要具備清晰易讀、互動性強、個性化定制和實時更新的特點,還需要特別關(guān)注隱私與安全性,以及提供足夠的教育和支持資源。這些特性共同作用,可以幫助用戶更有效地管理和理解記錄的信息,從而促進更好的自我管理和行為改變。
 
?? 
PART 7 
——————
結(jié)語

情緒價值在體驗設(shè)計中的應用

ui設(shè)計分享達人

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


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

以用戶為中心的交互設(shè)計思維

ui設(shè)計分享達人

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


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

產(chǎn)品設(shè)計如何利用心理學

ui設(shè)計分享達人

產(chǎn)品設(shè)計的成功除了依賴設(shè)計方案和技術(shù)實現(xiàn),還與用戶的心理密切相關(guān)。用戶心里決定了我們用怎樣的設(shè)計策略解決問題。我們常認為人們做決策時是理性的,但其實用戶行為經(jīng)常是非理性,會受到情緒、習慣和社交環(huán)境的影響。了解這些心理學規(guī)律能幫助我們更好地的預測和引導用戶行為,優(yōu)化產(chǎn)品體驗,提高用戶的粘性、留存率和轉(zhuǎn)化率,從而產(chǎn)品商業(yè)價值最大化。
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學
 
 
產(chǎn)品設(shè)計如何利用心理學


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

“好的設(shè)計組件”在搜索設(shè)計場景中的定義

ui設(shè)計分享達人

 
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
從網(wǎng)上搜索設(shè)計組件,我們能找到各種對外公開的設(shè)計組件庫,同樣還有不少或概括或詳細的文章,手把手教你“如何搭建一個好的設(shè)計組件庫”,但這些方法論很少探討面對C端組件頻繁增改、設(shè)計規(guī)范動態(tài)調(diào)整,如何高效賦能業(yè)務設(shè)計交付的相關(guān)內(nèi)容,但這恰恰是搜索業(yè)務面臨的關(guān)鍵問題。
 
搜索是一個“牽一發(fā)而動全身”的業(yè)務,每一個微小的設(shè)計細節(jié)都有可能影響各個業(yè)務的數(shù)據(jù)指標,一個“好的設(shè)計組件庫”需要以一種潛移默化的方式讓設(shè)計師掌握設(shè)計規(guī)范,完成合規(guī)的設(shè)計,從這個角度而言它應該比較
「好懂」
 
而作為服務于整個設(shè)計團隊的公用設(shè)計組件庫,面對每月數(shù)以萬計的調(diào)用次數(shù),它必須保障最基本的易用性,應該非常
「好用」
。
 
同時,面對頻繁迭代,“好的設(shè)計組件”還需要保持最快的更新速度,為各個橫向團隊提供正確的樣式,從這個角度來說它還要
「好維護」
。
 
因此,
「好懂、好用、好維護」
是搜索設(shè)計語境下,對一個“好的設(shè)計組件”的定義。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
接下來,我們將從這三個「好」入手,分享搜索設(shè)計組件庫在升級過程中的一些思考,希望能和大家共同探討。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
“萬丈高樓平地起”,我們先來說說如何從零開始構(gòu)建一個既符合設(shè)計規(guī)范又易于理解的設(shè)計組件。
 
首先,在搭建組件時,我們可以考慮采用
多層嵌套
的方式,即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復操作,甚至還能在解綁組件時,通過選中內(nèi)部的子組件圖層進行解綁,大大簡化了搭建和使用雙方的操作流程。
 
在多層嵌套的思路下,我們可以進一步用
“底層靈活、上層收斂”
來指導組件的搭建。這意味著底層變體的形式足夠多樣,能夠支持大部分的狀態(tài)切換,而在上層組件搭建的過程中顯性地加強規(guī)范的指引(如規(guī)范中不允許使用的樣式不對外展示),以降低超出規(guī)范設(shè)計的可能。
 
具體的搭建流程可以大致分為三步:
場景收集和分析、搭建基本變體組、拓展高階變體組
。
 
我們將通過視頻組件搭建的生動案例,具體介紹如何依據(jù)“底層靈活、上層收斂”原則來搭建組件庫,使得組件本身既足夠靈活,又能起到足夠的約束作用。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
在著手搭建某類組件時,我們首先通過規(guī)范確認和場景遍歷,廣泛收集各類變體。隨后,從我們能想到的所有維度出發(fā),對這些變體進行細致定義。這樣,我們就能得到一張詳盡描述組件變體性質(zhì)的表格。表格的第一列依次列出變體1、變體2、變體3等,而第一行則羅列出各種維度,如寬度、比例等。通過這種方法,我們可以將原本零散、雜亂的組件變體描述,系統(tǒng)地歸納整理成一張清晰明了的表格。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
表格通過不同維度來唯一確定一個變體,這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致,常見特性則涵蓋了最常見的分類性質(zhì),如寬度、高度、數(shù)量和優(yōu)先級等,而業(yè)務特性則與具體業(yè)務緊密相關(guān)。
 
在搭建組件時,我們可以遵循
「共性-常見特性-業(yè)務特性」
順序,這樣的順序有助于降低理解成本,因為最符合心智的分類被置于外層,同時底層的組件又保持了足夠的靈活性,便于切換各種變量。對于業(yè)務特性,我們可以根據(jù)實際情況靈活處理,既可以將其作為基本組件的延展,也可以不將其納入組件范疇。
 
以視頻組件為例,我們從表格中獲取的信息如下:
 
  •  
    視頻尺寸及其組合是最符合用戶心智的變體選擇;
  •  
    播放狀態(tài)是所有變體的共有性質(zhì);
  •  
    自動播放情況與業(yè)務相關(guān),但不一定需要在組件庫中呈現(xiàn);
  •  
    高階組件僅涉及少部分尺寸的組件,應在完成基本組件搭建后再進行。
 
據(jù)此,我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級:
 
  1.  
    播放狀態(tài)作為共性,應首先搭建;
  2.  
    基本組件尺寸和組合是最符合用戶心智的變體選擇,應緊隨其后;
  3.  
    高階組件在完成基本組件搭建后再進行。
 
值得注意的是,“封面槽位”是“播放狀態(tài)”中的一個圖層。根據(jù)“底層靈活、上層收斂”的原則,我們將其插入到搭建播放狀態(tài)之前。因此,視頻組件的最終搭建流程為:
 
  1.  
    封面槽位;
  2.  
    播放狀態(tài);
  3.  
    基本組件尺寸和組合;
  4.  
    高階組件。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
完成對視頻組件搭建的分析,我們就可以有條不紊地開始搭建組件了。先搭建基本組件視頻組件,再用基本組件搭建高階組件。這一步驟雖然為大家所熟知,但仍需格外注意,如配置項的設(shè)置要力求合理,也可以融入設(shè)計規(guī)范和使用規(guī)范,同時還應將一些搭建過程中的零散組件集中收納避免被調(diào)用。關(guān)于這些具體的注意事項,我們將在后續(xù)部分進行詳細闡述。
 
至此我們完成了組件搭建的基本流程,一個達到及格線的視頻組件就誕生了。據(jù)統(tǒng)計,優(yōu)化后每次調(diào)用視頻組件將節(jié)省至少10步的點擊操作!
 
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
完成了一個基本組件的搭建后,我們可以轉(zhuǎn)換視角,從使用的角度來審視并檢查這個組件。
 
我們期望,從插入組件變體、切換組件配置,再到最后的解綁組件,整個流程都能縱享絲滑且穩(wěn)定可靠,確保業(yè)務設(shè)計師在使用過程中獲得最佳體驗。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
我們可以一步步來審視組件的使用過程。首先是插入組件,據(jù)觀察,通常有三種方式,①在左側(cè)的資產(chǎn)面板(Assets)中直接找到對應組件并插入;②通過查閱設(shè)計規(guī)范,鎖定所需的變體后復制粘貼;③選中一個不需要的組件,通過右側(cè)的“切換變體”面板(Swap instance)切換成所需的變體。很明顯,在這個過程中依賴的是組件的精準搜索和快速定位。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
為了提升搜索精度,我們可以從組件命名入手,采用中、英、數(shù)字結(jié)合的方式,實現(xiàn)模糊匹配;也可以在發(fā)布時隱藏不希望被調(diào)用的組件,以減少無用的搜索結(jié)果。如果組件是采用前文提到的“多層嵌套”方式搭建的,我們可以添加“Preferred”子組件,這樣在切換時會優(yōu)先展示這些子組件,這個功能在切換圖標時尤為實用。
 
對于習慣邊查閱設(shè)計規(guī)范邊使用組件的設(shè)計師,我們增加了更多實際使用的正誤案例,這些案例直觀展示了組件變體的正確選擇和使用方式,進一步降低了規(guī)范的理解成本,有效輔助設(shè)計決策。同時,我們專門維護了一個固定區(qū)域,用于平鋪展示所有組件變體。為了確保能夠輕松點選,我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設(shè)計師一目了然地看到所有變體,從而快速選擇所需的組件。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
在組件配置階段,有三項注意點能讓組件更加易用,即“重視組件的可視化效果、設(shè)置高效易用的配置項、貼心地保存修改”。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
考慮到C端組件的多樣性和用戶的使用習慣,我們應避免使用過于復雜的分組方式。相反,應更注重組件的樣式展示,并盡量簡化組件的層級結(jié)構(gòu)。這樣,設(shè)計師在使用時能夠更直觀地看到組件的外觀,而無需深入復雜的層級去查找。
 
另外值得注意的是,F(xiàn)igma會默認用組件集合中最左上角的組件生成預覽樣式,因此應當把視覺上最有代表性的變體放在左上角,這個效果在切換變體(Swap instance)時很重要,因為目前在該面板中沒法查看組件細節(jié),只能靠縮略圖和名稱來推測是哪個組件。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
其次對于配置項的設(shè)置也大有講究,業(yè)界有組件庫為了實現(xiàn)C2D2C,從源頭上將設(shè)計組件和前端組件的配置項打平,這是不錯的思路,但有可能會提升設(shè)計側(cè)的理解成本。針對搜索業(yè)務的特殊語境,我們還是選擇了從「規(guī)范理解」角度去設(shè)置組件的配置項,將所有允許自定義的配置盡可能外露,并清晰地說明修改限制,如字數(shù)限定、選項個數(shù)等,這樣能夠在使用的過程中強化業(yè)務設(shè)計師對規(guī)范的掌握。
 
另一個常常被忽視的關(guān)鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率,建議對選項和選項之間,以及外層的不同配置項,都按照一定的邏輯順序進行排序。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
最后一點,我們稱之為
“貼心地保存修改”
機制,這個針對的是文字修改的場景。
 
在實際操作中,使用一個組件可能需要對多個配置項進行修改。有時在修改完文字內(nèi)容后再去調(diào)整其他配置時,已修改的文字會被重置。這時文本屬性(text property)的設(shè)置就顯得尤為重要,它能夠記憶并保存修改過的文字內(nèi)容,從而免于重復輸入。
 
還有一些情況是,某個組件變體實際上并沒有與某個值相對應的組件(盡管Figma機制允許選擇該值),用戶切換后就會發(fā)現(xiàn)組件完全變了,只能撤回。為了避免這類情況,建議使用另外的標記來表明組件某個設(shè)置項是不可切換的。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
完成了組件的搭建和檢查,接下來讓我們聚焦于組件的日常維護。
 
這一環(huán)節(jié)可以從兩個維度展開,一是依托中臺的日常數(shù)據(jù)監(jiān)控進行維護,二是通過團隊內(nèi)部的緊密協(xié)同機制來保障。后者更多側(cè)重協(xié)作流程和機制上的建設(shè),在本文中我們不做更多展開,重點討論前者。
 
數(shù)據(jù)監(jiān)控的方式主要依托Figma中的組件數(shù)據(jù)看板(查看路徑:View libraries-Analytics),看板中展示了各個組件的調(diào)用數(shù)和解綁數(shù)數(shù)據(jù),這些數(shù)據(jù)不直接反映組件的優(yōu)劣,但如果我們觀測到某個組件解綁率偏高,我們會考慮直接把它
作為模板
而不是創(chuàng)建成組件。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
 
總結(jié)
 
以上是百度搜索設(shè)計團隊在設(shè)計組件庫升級過程中的心得分享,包括搜索業(yè)務對于“好的設(shè)計組件”的訴求,以及一些搭建和優(yōu)化組件的實用思路,核心是探討如何從組件庫建設(shè)的角度入手,成功助力團隊提升設(shè)計資產(chǎn)消費效率。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
當前我們已經(jīng)完成設(shè)計資產(chǎn)工程化的前序環(huán)節(jié),我們對設(shè)計資產(chǎn)的升級和探索并沒有結(jié)束,未來我們將持續(xù)探索設(shè)計系統(tǒng)工具化的形態(tài)、與AI大模型結(jié)合的機會,通過豐富消費途徑,實現(xiàn)在業(yè)務交付的不同階段下全方位提效。這部分內(nèi)容后續(xù)有機會也將會和大家見面,請大家期待!
 
感謝閱讀,以上內(nèi)容均由百度MEUX團隊原創(chuàng)設(shè)計,以及百度MEUX版權(quán)所有,轉(zhuǎn)載請注明出處,違者必究,謝謝您的合作。申請轉(zhuǎn)載授權(quán)后臺回復【轉(zhuǎn)載】。


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

B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識

天宇

建筑設(shè)計師尤哈尼·帕拉斯瑪說、簡約并非簡單,它是通過深思熟慮后對事物本質(zhì)的準確把握。知其然、知其所以然。這次文章會盡量簡潔一點。
 
奔跑的日子、總是希望優(yōu)秀的你和我一起同行。讓我們一起在藝術(shù)的環(huán)境里生菌、知識的海洋里狗刨~
 
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
第一部分 | 彈窗基礎(chǔ)知識
如果你只是想了解一下彈窗的基礎(chǔ)知識,那么看這部分就夠了。只需3分鐘無痛、來去自如不影響上班哦。
彈窗定義;彈窗來歷;彈窗拆分;彈窗分類;彈窗尺寸;
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
1、彈窗定義
彈窗是用戶和系統(tǒng)交互信息的容器
。(在網(wǎng)上搜了一些文章看,他們的彈窗定義寫的基本都是各寫各的)我的這個定義絕對靠譜。站的維度高,從人機交互工程出發(fā)。這定義沒錯的妥妥的。說出去基本不會有人反駁你(如果有人敢反駁你把我的名字告訴他,反正我他也不認識我哈哈哈)
 
2、彈窗來歷
彈窗最早的起源可以追溯至上世紀90年代。當時,互聯(lián)網(wǎng)廣告的投放形式主要是將廣告嵌入在頁面內(nèi)容中,但這種方式存在一些問題。廣告商擔心消費者在瀏覽負面內(nèi)容時,會將廣告與負面信息聯(lián)系在一起,從而對品牌造成不利影響。因此,網(wǎng)頁托管網(wǎng)站trippod.com利用網(wǎng)頁腳本程序,發(fā)明了一種在新開窗口發(fā)布廣告的方法,這就是網(wǎng)絡(luò)彈窗的起源。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
3、彈窗拆分
整體的去分析、在大部分的彈窗類型里都會包括
關(guān)閉、內(nèi)容區(qū)、模態(tài)層
(非模態(tài)類別的沒有個元素)
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
3.1、模態(tài)層
模態(tài)層通常是擱在原頁面和彈窗之間的半透明黑色。其主要的作用是1、降低用戶在操作中被強打斷的不適和跳出當前頁面的恐慌感。讓我們的用戶更加的聚焦彈窗內(nèi)容。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
我個人在設(shè)計時模態(tài)層基本都是50%的純黑,但并不是一定要用50%的純黑,要結(jié)合自己的平臺業(yè)務、設(shè)計風格等方面去制定。偷偷的告訴你這個模態(tài)層加入一點微微的色彩傾向在視覺上往往會更好一點。
3.2、關(guān)閉
彈窗的關(guān)閉是用戶退彈窗的重要途徑、一般都會在彈窗內(nèi)容右上角。彈窗關(guān)閉按鈕也有在彈窗范圍外的。我們要保證彈窗關(guān)閉的清晰明確,來方便用戶操作。
在彈窗中、關(guān)閉彈窗的途徑除了叉掉。還可能有其他的。如取消按鈕。
3.3、內(nèi)容區(qū)
內(nèi)容區(qū)的內(nèi)容是根據(jù)彈窗類型的不同,內(nèi)容就會有所不同。什么都可能有、圖標、確認信息、選擇框、輸入框。只要是頁面上能出現(xiàn)的都可能會出現(xiàn)在彈窗的內(nèi)容區(qū)域。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
4、彈窗分類
彈窗的分類從交互形式差的差異。我們可以將其分為
模態(tài)類和非模態(tài)類
。這兩個大類就比較好區(qū)分,看看有沒有那層模就行了。常見彈窗類型表單彈窗、抽屜、警告提示、全局提示、通知提示、氣泡確認等。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
4.1、模態(tài)類
模態(tài)是目前我們比較常見的類型、模態(tài)類彈窗打斷用戶的操作行為,用戶必須對其進行操作才能解散彈窗,否則不能進行其他操作。模態(tài)類最常見的就是、
表單彈窗、確認彈窗
。當然還有其他的文件選擇、信息展示、等等。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
4.1.1、表單彈窗
這彈窗在B端設(shè)計里是最最最常見的一種彈窗。雖然我們現(xiàn)在的系統(tǒng)大部分是很智能的。但是復雜的業(yè)務就意味著你會和系統(tǒng)產(chǎn)生大量的交互信息的交換。所以這表單可太常見了哪哪都是他。(煩死個人)不過在你制定好一套規(guī)使用規(guī)范后?;具@樣的彈窗是不太需要設(shè)計介入的,產(chǎn)品和FE兩人一對使用模版就上了。
4.1.2、確認彈窗
這種彈窗就比較好理解了。承載較為緊急的信息,讓用戶快速處理;如:用戶未保存,就點擊離開當前頁面,通過對話框讓用戶做出選擇。在執(zhí)行一個重要信息的刪除時,通過二次詢問引起用戶的注意,讓用戶再次做判斷;這類彈窗;
4.1.3、優(yōu)點/缺點
優(yōu)點:
強不會讓用戶忽略或跳過,確保信息的交互響應;引導用戶操作;增加用戶的參與度,可以提升用戶的活躍度和參與度。
缺點:
01、會中斷用戶的操作流程,打斷用戶的思路或行為。
02、可能會影響用戶體驗,因為用戶需要等待關(guān)閉彈窗后才能繼續(xù)其他操作。如果彈窗內(nèi)容過多或過于復雜,用戶可能會感到困惑或不知所措。
03、如果過度使用模態(tài)類彈窗,例如頻繁彈出廣告或無意義的信息提示,用戶可能會對其產(chǎn)生反感甚至抵制使用相關(guān)軟件或平臺。
4.2、非模態(tài)
可以不打斷父應用程序,無需停止進度,用戶仍可以對父級內(nèi)容進行交互。大部分應用于信息的反饋和提示。常見的非模態(tài)類彈窗大概有、警告提示、全局提示、通知彈窗、氣泡確認框;
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
4.2.1非模態(tài)優(yōu)點/缺點
優(yōu)點:
不打斷操作流程;不會干擾用戶操作用戶體驗更好;常用于輕量級的信息或提示。
缺點:
可能會被忽略,導致信息傳遞不暢;不適合展示重要信息;形式通常比較單一,不能滿足復雜的展示需求
4.3、其他
林子大了什么鳥兒都會有,一定會有我沒有接觸到的前沿交互方式。所以這個其他留給未來更優(yōu)秀的我們?nèi)グl(fā)現(xiàn)。
5、彈窗尺寸
彈窗的尺寸和電腦屏幕分辨率是有關(guān)系的。主流的分辨率1920*1080像素。其他的還有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。
我在設(shè)計界面是一般用的是1440*900的設(shè)計尺寸。在做彈窗的時候已經(jīng)不考慮1366*768分辨率以下的屏幕了。多以彈窗的安全高度要小于600px
彈窗的寬度還是要根據(jù)自己業(yè)務需求去定義的。比如我們的業(yè)務最寬的彈窗1280像素。像站酷的查看作品他是整屏的寬度。
模特還怪好看的
模特還怪好看的
 
我在我們平臺定義的表單彈窗寬度雖然很不嚴謹、好像也沒有什么理論支撐。但是確一直再用。尺寸分別為、400、600、800、1000、1280。之后還是要細化的。這樣的定義彈窗尺寸導致的結(jié)果是,開發(fā)還原想過不是太好。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
第二部分 |彈窗2.0項目里
承載內(nèi)容、為什么會有這么多的彈窗類型。問題不在于彈窗,而在于合適的承載內(nèi)容和交互類型。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
1、彈窗、抽屜、界面
在項目里我們應該怎么去選擇這三種內(nèi)容呈現(xiàn)方式呢。如果你只是設(shè)計師大部分時間你也不用選。你只有建議的權(quán)利沒有決定的權(quán)利。如果產(chǎn)品原型是彈窗、你給做了個抽屜。你可以從下面幾方面去找支撐點去和產(chǎn)品撕逼、干翻他的原型用你的效果圖。
AI的提高畫面質(zhì)量還是有待提高呀
AI的提高畫面質(zhì)量還是有待提高呀
 
1.1、內(nèi)容
彈窗和抽屜或界面他們承載的內(nèi)容量是不一樣的。所以在選擇用那種交互方式時可以從我們業(yè)務需要展示的內(nèi)容量來考慮。簡單的確認或通知適合用彈窗、需要展示大量內(nèi)容或進行復雜的功能時就適合用抽屜或者界面了。
1.2、體驗
我們可以從用戶體驗方面出發(fā)、如頁面的空間感、考慮空間大小和布局。操作流程上、考慮用戶在界面上被打斷進程的成本。一致性、確保與其他業(yè)務模塊交互方式保持一致,為用戶提供一致的體驗。
1.3、效率
考慮到用戶的使用成本、B端設(shè)計中效率的提升優(yōu)先率老高了??紤]系統(tǒng)的加載速度、確保我們使用的交互方式不會影響整體的性能和體驗。
 
本身彈窗、抽屜或者界面的使用選擇是需要很綜合考慮的??偟膩碚f核心是提升效率、保證我們用戶好的體驗。
2、彈窗交互優(yōu)缺點
當涉及到B端彈窗的交互方式時,有以下幾點核心優(yōu)缺點:
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
2.1、優(yōu)點
提供及時反饋
彈窗可以快速向用戶顯示重要的信息或請求,使用戶能夠即時了解系統(tǒng)的狀態(tài)或需要執(zhí)行的操作。
簡化操作流程
對于某些復雜的操作或任務,彈窗可以提供直觀的界面和簡化的步驟,使用戶更容易完成目標。
吸引用戶注意力
通過使用彈窗,可以確保用戶在操作過程中不會被其他界面元素分散注意力,從而更專注于當前的任務。
提供額外的信息或功能
彈窗可以包含更多的詳細信息或額外的功能選項,使用戶能夠更深入地了解或操作某個特定內(nèi)容。
2.2、缺點
干擾用戶操作
過度或不合適的彈窗可能會干擾用戶的正常操作,打斷用戶的工作流程,影響用戶體驗。
誤導用戶
不清晰或誤導性的彈窗信息可能會使用戶產(chǎn)生困惑或誤解,導致錯誤的操作或決策。
影響性能
彈窗的彈出和關(guān)閉可能會增加系統(tǒng)的負擔,影響性能和響應速度。
不符合用戶習慣
對于習慣于傳統(tǒng)界面的用戶來說,過于復雜或與眾不同的彈窗交互方式可能會造成使用上的困擾和不適應。
3、我的一些設(shè)計
我們項目里把升級彈窗做成了模版、廣告彈窗也是模版。當然像二次確認這樣的彈窗是組件,上貨看東西。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
這個是系統(tǒng)的一個展示彈窗、和一個從彈窗形式優(yōu)化到抽屜的模塊界面。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
這個就是一個在線聊天界面。是從SaaS里跳轉(zhuǎn)新建頁面。
大概是想了想、平時做的項目確實比較碎、最近也沒做整理盒復盤。所以界面的展示就不放太多了。而且有的信息頁模糊了。不是我不信家人們。是我不信自己、朦朧也是一種美吧。哈哈哈
 
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
最后
我大學設(shè)計史陳老師告誡過我們。她說同學們,我其實不怕你們眼高手低。我怕的是你們眼都不高。和優(yōu)秀的人一起前行、希望和優(yōu)秀的你們一起去經(jīng)歷設(shè)計、生活、工作的美好。
期待你的加入、我們的大伐木累。我可以作品集指導反正閑著也沒事不要錢。我和群里的小伙伴都是多年一線設(shè)計師來自于天南海北,不乏有互聯(lián)網(wǎng)大廠設(shè)計師。再次
期待你的加入...
 
參考
優(yōu)設(shè)網(wǎng):4個方面層層遞進,分析如何設(shè)計B端產(chǎn)品的彈窗
知乎:B端設(shè)計指南04-彈窗
知乎:運營彈窗的設(shè)計要點拆解
知乎:淺談B端產(chǎn)品彈窗一級設(shè)計方法
人人都是產(chǎn)品經(jīng)理:WEB端彈框掌握著幾天就夠了
 


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

設(shè)計的兩面性:理性決策與感性表達

天宇

引言
設(shè)計應該是感性的還是理性的?設(shè)計是感性重要還是理性重要?此類問題一經(jīng)出現(xiàn)便會引起爭議無數(shù),每個人對此都有自己的見解與理由,還有些人主張“理性與感性需要平衡”“既要理性也要感性”,此類觀點看似正確,卻缺乏任何實質(zhì)性的指導價值。
實際上,很多人都沒注意到問題本身存在的多義性。究竟什么是“設(shè)計”?有些人認為是設(shè)計決策的過程,而有的人則認為是最終產(chǎn)出的設(shè)計作品。大多時候,理性和感性兩種觀點看似針鋒相對,實際上是站在設(shè)計的不同層面進行討論。
設(shè)計的兩面性:理性決策與感性表達
 
 
 
01|設(shè)計決策
從設(shè)計決策的角度來看,感性設(shè)計指的是設(shè)計師在設(shè)計過程中主要依靠個人情緒或情感進行創(chuàng)作。許多人誤認為,只要在設(shè)計時能與用戶產(chǎn)生共情,理解其情緒波動,并將這些喜怒哀樂、喜好厭惡融入設(shè)計作品,就算是感性設(shè)計了。然而,共情并不等同于感性。共情是一種能力,理解他人處境與情感,并善于換位思考。而感性則是自己對外界事物產(chǎn)生的直接感受和情緒反應,強調(diào)的是個人視角。
在藝術(shù)領(lǐng)域,感性占據(jù)主導地位,但設(shè)計并非藝術(shù)。設(shè)計的主要目標是解決問題和滿足特定需求,而藝術(shù)更多地關(guān)注自我表達和情緒傳遞。設(shè)計始終受到客戶需求、商業(yè)目標、市場趨勢和技術(shù)可行性等一系列的限制與約束。由于這些條件的存在,直覺與天賦這些感性力量只能得到極其有限的發(fā)揮。這也是設(shè)計與藝術(shù)的顯著區(qū)別。
設(shè)計的兩面性:理性決策與感性表達
 
 
站在感性“對立面”的理性,將設(shè)計視為一項工程或科學,力求流程化和系統(tǒng)化,講究方法論,注重各方面的調(diào)研,一切動作因問題存在而起,以問題解決而終
。甚至在實際場景中持續(xù)觀察作品表現(xiàn),以期得出可復用的設(shè)計模型或定律,為后人更加高效地解決類似問題提供幫助。
所以,從解決問題的本質(zhì)屬性出發(fā),理性應該才是設(shè)計的底色。數(shù)據(jù)驅(qū)動、方法論支撐、可用性測試、競品分析、用戶研究等都屬于理性思維的具象化體現(xiàn)。
由于大部分設(shè)計師的出身多以藝術(shù)打底,所以一旦設(shè)計與藝術(shù)的界限在心中變得模糊,會習慣性地
將產(chǎn)品看作自己的"作品",而非用戶的"解決方案"
。如此一來,當面對來自各個方向的邊界與不確定性,本能的反應就不是思考了,而是抵觸,尤其是“完美”的方案已在腦中形成,如果突如其來的新要求打亂了這一切,哪怕假以用戶之名也要選擇懟回去,并不斷美化、合理化自己的設(shè)計理念。對設(shè)計師來說,這是一種自私、不負責任和缺乏職業(yè)素養(yǎng)的表現(xiàn)。
設(shè)計的兩面性:理性決策與感性表達
 
 
接下來,想象一下你的手中有一把槍,準備射擊某個目標。你的第一個動作是什么?大概率是瞄準。因為大家都知道,射擊前通過瞄準鏡或者準星,先對目標位置進行瞄準校正,射擊時才能提高命中率,這也正是理性對于設(shè)計的重要性所在。
理性在設(shè)計中的作用類似于瞄準動作,它幫助我們在設(shè)計過程中做出科學的決策,確保設(shè)計方案的準確性和可執(zhí)行性。未經(jīng)理性思考的設(shè)計,就像是不瞄準就立即開槍,其結(jié)果往往難以預測。當然也可能會擊中目標,這基本上取決于兩個因素:
  1.  
    目標遠近:
    近處的目標,即使不瞄準,也很容易擊中;但對于遠處的目標,命中率則必然大幅下降。我們可以把目標遠近理解為設(shè)計需求的難易程度,對于簡單需求,不用過多的理性分析,直接設(shè)計也能完成任務,但面對復雜的設(shè)計項目,如果不進行充分的理性分析上手就畫,大概率就要偏離產(chǎn)品目標了。
  2.  
    個人經(jīng)驗:
    經(jīng)過反復練習,可以練就不瞄準也能遠射的本領(lǐng),隨著經(jīng)驗積累還能不斷提升距離值;在經(jīng)驗不足的情況下,還不瞄準,就只能選擇一些近距離的射擊目標了。設(shè)計也是這樣,對于某類產(chǎn)品的設(shè)計經(jīng)驗較多,不用太多理性的分析決策,也能達成設(shè)計目標;缺乏經(jīng)驗時,還憑借直覺草率地進行設(shè)計,再簡單的項目也可能會搞砸。
設(shè)計的兩面性:理性決策與感性表達
 
 
所以,沒有理性支撐而完全依賴直覺經(jīng)驗的設(shè)計,一個致命性的問題就是
不穩(wěn)定
!日常工作中,設(shè)計師的有效輸出和穩(wěn)定輸出至關(guān)重要。
 
02|設(shè)計表達
假設(shè)經(jīng)過瞄準后的射擊都能順利擊中目標,那么接下來要關(guān)注的是什么呢?子彈的沖擊力和殺傷力!這里的子彈就是我們最終輸出的設(shè)計作品。在這一環(huán)節(jié),理性設(shè)計指的是方案完全圍繞產(chǎn)品功能來呈現(xiàn),追求效率與極簡認知,較少運用裝飾性設(shè)計元素,即使使用,也大多兼具輔助內(nèi)容理解的功能性目的。
而感性設(shè)計,我并不太愿意使用“感性”這一措辭,正如在上一段中的定義,感性強調(diào)的是個人出發(fā)的情緒表達。其實,“情感化設(shè)計”才更負荷大家口中常說的“感性設(shè)計”所想表達的含義,相比“理性”的設(shè)計作品,情感化設(shè)計更具有“一擊必殺”的效果。
在滿足基礎(chǔ)功能需求的基礎(chǔ)之上,通過色彩、排版、圖像、動畫等元素給予用戶充分的情感體驗,也可以利用敘事、對話、情景、微交互等策略引發(fā)共鳴。豐富多樣的情感化設(shè)計策略,讓用戶與產(chǎn)品之間更容易建立情感連接。
設(shè)計的兩面性:理性決策與感性表達
 
 
在設(shè)計決策的階段,理性確保了我們更高的命中概率,而情感的注入讓我們的設(shè)計表達具有深入人心的穿透力和影響力。典型設(shè)計案例如Apple、Tesla等產(chǎn)品設(shè)計無一不是理性決策和感性表達的充分結(jié)合。因此,回到開篇提出的問題,設(shè)計應該是感性的還是理性的?我的回答是:
作為設(shè)計師,要
堅持理性的設(shè)計決策
,同時
追求感性的設(shè)計表達
。
設(shè)計的兩面性:理性決策與感性表達
 
 
 
03|兩者關(guān)系
很多人認為,不同的設(shè)計領(lǐng)域?qū)硇院透行缘囊笥兴煌贐端產(chǎn)品中,理性占據(jù)主導地位,而C端產(chǎn)品更強調(diào)感性。從設(shè)計最終所呈現(xiàn)的效果來看,這種觀點在一定程度上是合理的。B端產(chǎn)品多用于生產(chǎn)場景,追求的是可用性,是克制和效率;C端產(chǎn)品面向普通大眾的各種生活場景,因此關(guān)注體驗的愉悅感受。兩者往往在風格調(diào)性上差異化很大。
但是,對于設(shè)計決策來說,無論C端、B端還是G端,都屬于設(shè)計項目,都要進行理性的需求分析和策略制定,即使某些產(chǎn)品類型最終選擇了偏感性的或情感化的表達手法,也是
基于理性決策后的一種選擇
,是實現(xiàn)目標的一種手段。
所以我想說的是,理性和感性兩者既不是對立關(guān)系,也不是并列關(guān)系,而是先后關(guān)系或嵌套關(guān)系:
理性是設(shè)計的基礎(chǔ)和第一步,感性則是在理性之上的選擇和展開
。
 
最后的話
作為設(shè)計師,對于設(shè)計中的理性與感性之問,不應停留在非此即彼或既要也要的簡單認知里,任何深入的思考都是有意義的。在這個存在分歧的問題上,希望我的觀點可以為你提供一點點啟發(fā),也希望各位設(shè)計師既能夠通過理性的分析制定出有效的設(shè)計策略,又能夠通過感性的表達手法創(chuàng)造出動人的設(shè)計作品,不斷提升自身的設(shè)計價值,與產(chǎn)品實現(xiàn)共贏


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

動效讓這些設(shè)計更驚艷

天宇

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


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

7大色彩技巧讓你界面更吸睛

天宇

色彩在我們?nèi)粘TO(shè)計中起著定生死的作用,它是設(shè)計的靈魂,舒適的色彩搭配可以讓設(shè)計師一遍定稿,感覺在自己的設(shè)計生涯中,大部分都是在與色彩的博弈中度過的,雖然客戶可能不懂色彩原理,可是客戶天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會有定論,不用你去辯解太多,不好的搭配,縱使有千萬種理由,也說服不了客戶,所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設(shè)計至關(guān)重要。
 
7大色彩技巧讓你界面更吸睛
 
 
 
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見模型
四、 色彩的語意及它的應用
五、 不同場景下的色彩應用
六、 色彩在B端設(shè)計中的作用
七、 B端色彩設(shè)計使用的原則
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
一、色彩的定義?
1、物理學角度
色彩是光的屬性,當光波通過物體時,物體會吸收某些波長的光,而反射或透射其他波長的光,這些被反射或透射的光波長度決定了我們看到的顏色。
 
2、心理學角度
色彩是人腦對光波長的視覺感知,不同的波長刺激視網(wǎng)膜上不同類型的感光細胞,進而產(chǎn)生不同的色彩感覺。
 
3、 藝術(shù)學角度
色彩是藝術(shù)創(chuàng)作的重要元素,它不僅關(guān)乎視覺感受,還與情感、文化、象征意義相關(guān)聯(lián)。
 
4、 設(shè)計學角度
在設(shè)計領(lǐng)域,色彩是傳達信息、影響情緒和創(chuàng)造美感的關(guān)鍵工具。
 
5、 計算機科學角度
在數(shù)字圖像處理中,色彩通常通過顏色模型(如RGB、CMYK等)來定義,這些模型通過不同比例的原色或色料混合來表示各種顏色。
 
 
 
二、色彩的三屬性
1、色相
色相是指不同顏色之間的差別,即不同顏色的表象和名稱,每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示,人的眼睛可分辨出的色別有180種左右。
7大色彩技巧讓你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。
同時,同一色相在受光強弱或者物體對光的吸收、反射性能不同的情況下,會呈現(xiàn)不同的明暗變化和差異。
7大色彩技巧讓你界面更吸睛
 
 
  
 
3、飽和度(純度)
飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長單一程度越高,飽和度就會越高;不同色別所達到的飽和度不同,一般情況下,紅色的純度可達到最高,綠色的則相對較低;同一色相深淺不同的顏色有不同的飽和度;黑白色光的滲入會導致飽和度和明度發(fā)生變化;通常,照明光線的性質(zhì)、物體表面結(jié)構(gòu)對光線吸收與反射的性能等因素影響飽和度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
三、色彩的三種常見模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即顏色的種類;S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。
 
這種色彩模型是我日常在的設(shè)計工作中用的最多的一種色彩模型,如果在同色系中如果只想讓他們有細微的變化,我通常會通過調(diào)節(jié)S和B的百分比數(shù)值來達到自己想要的目的。
7大色彩技巧讓你界面更吸睛
 
 
以上就是我在設(shè)計項目中,運用該色彩模型做的一個實戰(zhàn),項目中用到了一個圖形,需要用同色系來表達,我保持了H色值的不變,讓S值和B值都發(fā)生著微妙的不同,于是就產(chǎn)生了四五種同色系的綠色,該色彩模型特別的好使,也鼓勵大家多在實戰(zhàn)中運用這樣的色彩模型,簡單實用。
 
H色相:Hue,以角度(0°-360°)表示
S飽和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是從顏色發(fā)光的原理來設(shè)計定的,通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈,當它們的光相互疊合的時候,色彩相混,而亮度卻等于三者亮度之總和,越混合亮度越高,即加法混合。
 
紅、綠、藍三個顏色通道每種色各分為256階亮度,在0時“燈”最弱——是關(guān)掉的,而在255時“燈”最亮。當三色灰度數(shù)值相同時,產(chǎn)生不同灰度值的灰色調(diào),即三色灰度都為0時,是最暗的黑色調(diào);三色灰度都為255時,是最亮的白色調(diào)。
7大色彩技巧讓你界面更吸睛
 
 
R紅:Red,以數(shù)值(0-255)表示
G綠:Green,以數(shù)值(0-255)表示
B藍:Blue,以數(shù)值(0-255)表示
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、CMYK模型
雖然RGB模型色彩更加的豐富,但是很多顏色不能完全打印出來,于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑,通過顏料反射和吸收光線來顯色。
 
記得之前自己從事平面工作的時候,就經(jīng)常要用到CMYK模式,因為印出來的效果偏差是最小的,是最靠近設(shè)計效果圖的。
7大色彩技巧讓你界面更吸睛
 
 
通過對比,我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實更加的絢麗豐富些,而CMYK的色彩模型顏色顯示上就黯淡了不少,但是要印刷的話,就必須轉(zhuǎn)化為成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品紅:Magenta,以百分比值(0%-100%)表示
Y黃:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的語意及應用
1、紅色的語意及應用
紅色代表熱情、活力、強烈的情感和愛。它可以象征著激情、勇氣和行動力,也常與興奮、熱烈的情緒相關(guān)。
著名的快餐品牌肯德基,在自己的網(wǎng)頁及店鋪裝修中都運用了紅色,因為紅色是所有顏色中最容易引起人們注意的顏色,也是很容易刺激人們食欲和購買的顏色。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、橙色的語意及應用
橙色傳達溫暖、歡快和積極向上的情感;它常與樂觀、友好、創(chuàng)造力聯(lián)系在一起,給人以活力充沛和充滿希望的感覺。
百度網(wǎng)盤的這個登錄界面就運用了橙色,給人陽光、向上、熱情的感覺,通過色彩的運用一下讓界面有了溫度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、黃色的語意及應用
黃色象征快樂、開朗和樂觀;它能帶來明亮、愉悅的情緒,代表著陽光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件,整個色調(diào)采用的是非常有活力的黃色,這與兒童處于好奇與活力的階段相符合,這種高亮的黃色,飽和度和明度都非常的高,特別容易抓住兒童的目光,同時它是一種快樂的顏色,也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色,特別符合兒童成長的需求。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、綠色的語意及應用
綠色代表平靜、和諧與生機。綠色常與大自然相關(guān),給人帶來安寧、放松的感覺,也象征著成長、希望和新生。
青椒云的目標用戶是吸引年輕用戶和創(chuàng)意工作者,綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關(guān)注,同時綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、青色的語意及應用
青色寓意清新、寧靜和沉穩(wěn),它給人一種冷靜、理智的印象,同時也帶有一絲清新的活力。
青色是一種帶有藍色和綠色的顏色,因此青色既有藍色的專業(yè)感、信任感,也有綠色的生機感、希望感。
以下是日本某牙醫(yī)品牌的官網(wǎng)首頁,病人希望在這里帶來健康與復蘇,也希望獲得專業(yè)、可靠的治療,而青色就成了很好傳遞這種情感的品牌色。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
6、藍色的語意及應用
藍色代表冷靜、忠誠和信任;它常與沉穩(wěn)、深邃的情感相關(guān),能帶來寧靜、平和的心境,也象征著智慧和理性。
123云盤使用了藍色,藍色符合社會的普遍審美認知,接受度比較高;其次,藍色給人安全的感覺,也符合云盤的初衷,給用戶安全的存儲服務。
7大色彩技巧讓你界面更吸睛
 
 
 
 
7、紫色的語意及應用
紫色象征神秘、高貴和浪漫;它常給人一種優(yōu)雅、奢華的感覺,同時也帶有神秘莫測的氛圍,與夢幻、創(chuàng)造力等情感相關(guān)。
美柚的主要用戶是女性,紫色在色彩心理學中常被認為具有優(yōu)雅、神秘、浪漫的特質(zhì),這些特質(zhì)與女性的審美和情感需求相契合,能夠吸引女性的關(guān)注。
7大色彩技巧讓你界面更吸睛
 
 
 
 
8、白色的語意及應用
 
白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿純潔的顏色,它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面,顏色用了大量的白與灰,簡潔又不失大氣,傳遞出了一種質(zhì)樸、雅致的感覺。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
五、不同場景下的色彩應用
 
1、商場的色彩為什么總是多彩熱烈的?
 
? 吸引顧客注意力
在眾多商業(yè)場所中脫穎而出,色彩鮮艷的商場外觀和內(nèi)部裝飾更容易在人們的視線中凸顯出來,吸引過往行人的目光,激發(fā)他們的好奇心和探索欲。
 
確實多彩的顏色更加容易引起我的關(guān)注,這不看到商場的美圖,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧讓你界面更吸睛
 
 
 
? 增強可見性
即使在較遠的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場更容易被發(fā)現(xiàn),提高商場的知名度和曝光度。
多彩的配色,讓我遠遠的就被商場美輪美奐的插畫吸引,大大增加了商場的可見性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
營造愉悅氛圍
色彩可以激發(fā)積極情緒,明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關(guān)聯(lián)。當顧客進入一個色彩豐富的商場時,會感受到一種愉悅和輕松的氛圍,從而更愿意在商場中停留和購物。
星沙永旺城的美陳設(shè)計很好,墻面采用極具誘惑力的顏色與美食,把小小實物十倍放大,增加了視覺看點,讓人忍不住過去拍照曬一下,大大增加了愉悅性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
緩解壓力
在現(xiàn)代生活中,人們常常面臨各種壓力。走進一個多彩熱烈的商場,可以暫時擺脫日常的煩惱和壓力,享受購物的樂趣。
特別可愛夸張的插圖設(shè)計,引發(fā)了絲絲童趣和歡樂,讓人短暫忘記壓力,遠離煩惱。
7大色彩技巧讓你界面更吸睛
 
 
 
?
引導消費行為
商場通常會使用不同的顏色來區(qū)分不同的區(qū)域,如購物區(qū)、餐飲區(qū)、娛樂區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域,提高購物效率。
突出重點商品,對于一些重點推薦的商品或促銷活動,商場可以使用鮮艷的色彩來突出展示,吸引顧客的注意力,引導他們進行購買。
7大色彩技巧讓你界面更吸睛
 
 
 
?
塑造品牌形象
6.1 傳達個性和風格
不同的商場可能有不同的品牌定位和目標客戶群體。通過選擇特定的色彩組合,商場可以傳達出自己的個性和風格,吸引與之相符的顧客。
 
6.2 增強品牌記憶度
獨特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象,提高品牌的記憶度和辨識度。
 
芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭,是一個區(qū)域型的購物中心,集購物、餐飲、休閑、娛樂等多業(yè)態(tài)于一體,為消費者提供一站式商業(yè)綜合體,它在餐飲區(qū)采用了大量的吃喝玩樂的插畫,來引導用戶消費。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、為什么藍色在B端設(shè)計中廣泛應用?
? 視覺特性方面
1.1 穩(wěn)定性
藍色給人一種沉穩(wěn)、可靠的感覺。在B端產(chǎn)品中,用戶往往需要處理重要的業(yè)務數(shù)據(jù)和進行復雜的操作,藍色的穩(wěn)定性可以讓用戶感到安心,增強對產(chǎn)品的信任感。
7大色彩技巧讓你界面更吸睛
 
 
 
1.2 專業(yè)性
藍色通常與科技、專業(yè)領(lǐng)域相關(guān)聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶,需要傳達出專業(yè)、高效的形象,藍色正好符合這一需求。
 
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色,藍色較為柔和,不容易引起用戶焦慮和緊張的情緒;在B端使用場景中,用戶可能需要長時間使用產(chǎn)品,藍色的舒緩效果有助于提高用戶的使用體驗。
 
2.2 提高專注度
藍色具有一定的沉靜作用,能夠幫助用戶集中注意力,專注于工作任務。對于B端用戶來說,高效完成工作是首要目標,藍色的這一特性有助于提高工作效率。
 
B端產(chǎn)品在心理上追求的是類似如下圖的這種寧靜式的體驗,跟教育有著異曲同工之處,就像這個易貝樂少兒英語一樣,用大面積的藍色,希望孩子在這里能很快的安靜下來學習、專注自己的事情。
7大色彩技巧讓你界面更吸睛
 
 
 
? 行業(yè)習慣方面
3.1 科技行業(yè)引領(lǐng)
許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場中廣泛使用藍色,逐漸形成了一種行業(yè)習慣。其他企業(yè)在設(shè)計B端產(chǎn)品時,也會傾向于選擇藍色以符合用戶的認知和期望。
 
3.2 傳統(tǒng)與延續(xù)
在過去的設(shè)計中,藍色在 B 端領(lǐng)域的成功應用使得它成為了一種傳統(tǒng)選擇。設(shè)計師們在延續(xù)這一傳統(tǒng)的同時,也不斷優(yōu)化和創(chuàng)新藍色的運用方式,使其更符合現(xiàn)代設(shè)計趨勢和用戶需求。
 
嘉為科技是一個有著20多年技術(shù)沉淀的科技公司,它的官網(wǎng)和產(chǎn)品風格一直是沿用著科技藍的風格,應該也是基于傳統(tǒng)的沉淀吧。
7大色彩技巧讓你界面更吸睛
 
 
 
?藍色可以提高產(chǎn)品的復用率
很多用戶都能接受藍色的B端界面,當面對有差不多需求客戶時,同一套UI,可以多次復用,可以減少開發(fā)成本和設(shè)計成本,這也是自己通過長期實戰(zhàn)觀察發(fā)現(xiàn)的。
 
一個UI風格,用在了兩個項目中,不同的用戶,趨向同樣的風格,說明藍色在大家心目中的接受度是非常的高,用藍色可以促進設(shè)計的多次復用。
7大色彩技巧讓你界面更吸睛
 
 
在日常的項目中,我看到的B端UI界面是千篇一律的穩(wěn)重,不追求過于刺激的顏色搭配,通常都比較的干凈簡潔,不像商場里面的美陳背景設(shè)計,色彩對比非常的強烈,比較的吸引人眼球。
 
有一次我厭煩了常規(guī)的穩(wěn)重風,探索一種大膽的色彩風格時,雖然風格比較新穎,可是發(fā)出去客戶的接受度不高,覺得太不穩(wěn)重了,然后重新按照以往習慣進行設(shè)計時,就很好,客戶一致認同。
 
可見每個領(lǐng)域都有自己的色彩運用習慣,商場需要吸引人眼球、刺激消費,越大膽越好,可是B端設(shè)計需要提供一個讓人平靜去處理工作事項的環(huán)境,它需要安靜,不需要過于刺激的顏色搭配。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
六、色彩在B端設(shè)計中的作用?
1、通過色彩向用戶反饋操作結(jié)果及當前狀況
比方在日常設(shè)計當中,紅色代表流程失敗,綠色代表流程成功,橙色代表信息有告警,藍色代表著鏈接,同時不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài),在反饋結(jié)果和狀況方面,色彩起著非常重要的作用。
 
下面這個IDC運營的監(jiān)測平臺,它就是通過顏色來區(qū)分不同的告警級別的,可見顏色在B端產(chǎn)品中的重要性。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、可以很好的進行品牌傳達
B端設(shè)計中大面積使用品牌色,可以強化品牌形象,使用與品牌標志風格相近的色彩,可以幫助用戶快速識別和記住品牌,在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案,有助于建立品牌的連貫性和一致性,增強用戶對品牌的信任。
 
例如我給湖南高速設(shè)計的一套B端界面設(shè)計,用戶強烈要求改變傳統(tǒng)的藍色風格,要求整套界面設(shè)計要用湖南高速品牌色-綠色,說明在追求大流和品牌色之間,客戶更加傾向品牌的傳達。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、顏色可以很好的進行信息區(qū)分
在B端界面設(shè)計中,顏色在幫助信息區(qū)分起著非常重要的作用,通??梢酝ㄟ^不同的色彩來區(qū)分功能區(qū)域,可以讓用戶更清晰地了解界面的結(jié)構(gòu)和布局,例如,導航欄使用一種特定的顏色,而內(nèi)容區(qū)域則使用另一種顏色。
 
我設(shè)計的天翼寫作,就是這樣的設(shè)計思路,導航欄和內(nèi)容區(qū)的顏色完全不一樣,這里顏色起到了很好的區(qū)分作用。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、舒適的色彩搭配可以提升用戶體驗
選擇合適的色彩對比度可以增強文本的可讀性,減少用戶的視覺疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
 
選擇適當?shù)纳士梢誀I造出專業(yè)、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗。
 
我參與的這個后臺界面,就是通過合理的色彩搭配來引導用戶使用的,當用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示,沒有走完的流程就會是灰色的,寓意指示非常的鮮明,很好的解決了用戶不知道清晰進程的卡點,提升了用戶體驗。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、色彩可以傳遞性格
人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的,其實色彩也是有性格的,不同的色彩也有不同的性格,當我們對色彩的性格有足夠多的了解,在面對不同的客戶時,我們對色彩的拿捏以及設(shè)計需求的把握時,會更加的游刃有余。
7大色彩技巧讓你界面更吸睛
 
 
 
我們平常確實是在做設(shè)計,但是我們更多的是在與人打交道,我們更好的聆聽,會幫助我們更快的抓取到客戶的喜好,快速做出滿足客戶需求的設(shè)計,少受加班之苦。
比方說我之前給云門戶設(shè)計的一套UI,客戶的決策層是男性,且年齡偏大,他們就偏愛深沉的UI風格;而我負責的天翼云電腦專家,客戶的決策層是女性,且年齡偏年輕,她每次就喜歡輕盈、明快的UI色調(diào),不同的決策層客戶,就會帶來不同的設(shè)計結(jié)果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
七、B端色彩設(shè)計使用的原則
1、B端設(shè)計中,色彩設(shè)計應遵循6:3:1原則
在這個登錄頁面中,我就是運用的6:3:1原則,60%的主色,30%的次要色,10%的點綴色;使用了大面積的藍色和藍灰色,最后使用一點點的橙色,這樣的配色會顯得高級。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、文字、卡片背景色和邊框都使用無彩色
為了保證畫面風格的統(tǒng)一、干凈整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色,通常通過顏色的深淺來區(qū)分信息的層級關(guān)系。
 
比方說我參與的星辰大模型AI文檔生成能力的應用,里面無論文字顏色還是底色都是運用的無彩色,只是通過了色彩深淺變化來做了層級區(qū)分,因為無彩色可以起到很好的降噪作用,既傳達了信息,又不會顯得界面凌亂復雜。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、需要凸顯的內(nèi)容,用明度和純度比較高的色彩
比方說,日常我們設(shè)計的卡片都是用的白色,而底色我們用的是灰色,因為卡片里面的內(nèi)容都是比較重要的信息,需要用一個亮度比較的高的顏色,讓內(nèi)容往前走,而灰色的背景通常就往后走的感覺,這樣能跟卡片形成一個一前一后的對比,更好的幫助內(nèi)容進行傳播。
 
比方說我設(shè)計的這個IT運維監(jiān)控平臺的首頁,物理主機、網(wǎng)絡(luò)及安全設(shè)備、工單、在途工單這幾個指標是非常關(guān)鍵的,所以他們的圖片底色用了純度比較高的有彩色來標識。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、設(shè)計前一定要有定色調(diào)的意識
作為設(shè)計師,我們的設(shè)計工作其實就是在設(shè)計一種感覺,一種情緒,設(shè)計前定調(diào)的意識真的太重要了,感覺對了,什么都就對了。
 
比方說我前段時間接到了一個B端的大屏可視化需求設(shè)計,客戶說之前的大屏設(shè)計不喜歡,希望重新出一個新的設(shè)計,然后公司的需求對接人員在給我下達需求時,真的就只是給我下達了這幾個字,讓我重新出一個設(shè)計試試。
 
以我的職業(yè)直覺,感覺這個需求是不夠細化的,于是我就多問了幾句,我問客戶是想要常規(guī)的藍色調(diào)的還是別的?果然一問,客戶說不希望再用常規(guī)的藍色的,希望新的設(shè)計要用他們的品牌色綠色,剛聽到這幾個字的時候,我以為這次我把握住需求了,在收集參考圖的時候,我發(fā)現(xiàn)常見的綠色大屏有深色的和淺色的,根據(jù)自己以往的作圖習慣,我覺得深色會更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時候,我內(nèi)心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶確認一下,客戶是想要深色的感覺,還是要淺色的感覺,這次溝通又給了我深深的一擊,客戶不按常理出牌,說希望按淺色的風格來出圖。
 
在出稿之前,通過自己反復的溝通確認,發(fā)現(xiàn)設(shè)計前的定調(diào)意識真的太重要了,要不是有出圖前一波三折的反復確認以及需求的細化,就不會有后來的一遍過稿。
7大色彩技巧讓你界面更吸睛
 
 
 
5.設(shè)計的灰色盡量使用帶有色彩偏向的灰
不管我們設(shè)計什么色系的界面,都避不開用到灰色,在設(shè)計中用跟主視覺相符的灰,會使得界面更加的高級、協(xié)調(diào)與美觀,注意好了這個小細節(jié),會給我們的設(shè)計加分不少。
 
下面是我日常體驗到的兩個界面,上面綜合管理平臺里面的灰色就沒有跟主色調(diào)藍色相呼應,灰色沒有向藍色傾斜,界面看起來就沒那么美觀;下面通義千問的灰色設(shè)計就非常的注重細節(jié),灰色偏紫,整個界面看起來渾然天成,毫無違和,美感、檔次瞬間提升好幾個等級。
 
一個微小細節(jié)的在意,在無形中拉高了設(shè)計的高度,十個細節(jié)乃至更多細節(jié)的在意,就會帶來更多意想不到的結(jié)果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
總結(jié):
以上就是我最近對色彩的一些頓悟、感受和學習收獲,在不斷的復盤總結(jié)中,我們總會收獲一些新的認知,通過這次色彩的復盤之旅,發(fā)現(xiàn)色彩對設(shè)計師真的太重要了,希望我的分享對大家有啟發(fā),不足之處也歡迎大家留言交流。


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

以用戶為中心的交互設(shè)計思維

天宇

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


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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔