1. 首頁 > 生活百科 > >

移動端可視化設計思路

生活百科微交互


移動端可視化設計思路

文章插圖
前言:你在使用一款產品的時候有過這種感覺嗎？產品中一個不經意的小細節或功能點，突然讓你對產品產生了更好的好感，比如一個溫馨的提醒，一個便捷的操作，或者一個有趣的反饋等等 。這些能引起用戶共鳴的“微交互”設計，給用戶帶來的運氣并不多，讓產品看起來更人性化 。同時也是設計的初心，對用戶的關懷，是設計師匠心態度的體現 。
本文將對之前的微互動案例以及與“可視化”相關的案例進行總結 。
NathanYau在《數據之美》中寫道，可視化不僅是一種工具，更像是一種媒介，可以幫助我們最大限度地挖掘數字背后的信息，讓數據“說話”講故事 ?？梢暬瘜⑿畔⒑蛿祿D化為用戶更能理解的圖表、圖形、地圖等元素，通過顏色和樣式突出其中的變化，幫助用戶更高效地獲取信息、判斷趨勢、識別變化 。
1 。降低理解難度
通過視覺表達，將難以理解的信息更清晰的呈現出來，幫助用戶理解和吸收 。
案例一:CRO監控大屏幕——在與地球的實時監控大屏幕上，添加與當天一致的終止線數據 。在觀看實時業務數據的同時，還可以了解當時晝夜變化的影響 。讓監護儀觀察到的數據更立體，判斷更全面 。
案例二:D2SQL編輯器可以把代碼變成結構化的流程圖，同時用顏色和圖形來標識每個節點，讓代碼讀者更好地理解代碼結構 。
2 。讓用戶感知變化
可視化中變化的凸顯，可以幫助用戶快速達成目標，在最短的時間內獲取更多的信息，引導用戶進行更深層次的探索 。
案例一:雪球的股票列表，每一項的背景顏色會隨著實時漲跌而閃爍紅色或綠色，實時狀態會放在列表頁面的前面 。
案例二:掌上運維APP展示數據趨勢和預警變化等相關信息，讓用戶在查看數據的同時獲得可能引起數據變化的原因信息，便于更快的處理 。
案例三:MTEE策略對比，通過顏色的變化來識別兩個版本策略的差異，讓用戶更直觀的獲得策略的變化點 。
3 。呼應用戶的情況
在可視化中加入與用戶情境相關的元素，可以讓用戶獲得更合適、更直接的信息感知 。
案例一:菜鳥裹裹，在物流詳情頁圖形化顯示包裹的狀態，顯示包裹的始發地、當前位置、距離目的地的距離、終點站、經過時間等信息 。以一種更直觀的方式 。更直觀的呈現信息，讓用戶心中有數，增加用戶對物流的信任和好感 。
案例二:螞蟻財富，在基金收益曲線的末端，設計了盈利標志，紅色為盈利，綠色為虧損，讓用戶快速感知收益，“是盈利還是虧損”，“是盈利還是虧損多少” 。
4提高數據操作感
提供了足夠方便的過濾或操縱組件，讓用戶可以查看更多視圖空并快速定位想要的內容 。
情況一:在小睡眠app中，通過雷達圖的變形來顯示當前播放的聲音，點擊相應的圖標就可以開啟和關閉聲音；通過滑塊可以調整聲音強度的組合，實時可視化顯示，用戶易于理解 。
案例二:OBERHAEUSER中將將雷達圖的尺寸設計為可調整，保證了雷達圖的高可讀性，拖拽切換方式相當方便 。
案例三:阿里云WAF安全防護產品，直觀的呈現用戶受到的攻擊情況，通過拖動滑塊，點擊數字，控制折線圖和列表的顯示內容，幫助用戶快速定位目標事件，一鍵完成所需的防護設置 。
【移動端可視化設計思路】在視覺設計中插入微交互，可以讓用戶更好更方便的獲取信息，了解信息，引導用戶進一步操作，讓信息變得更有效更直接 。

    推薦閱讀