×
“一套優質的圖標是用戶體驗設計中必不可少的重要組成部分，把文字含義通過清晰易懂的圖形表達，可以降低用戶閱讀成本以及提升產品界面的美觀度。“
網站圖標設計
在雪球最新版本12.0中，圖標的設計重構也是視覺對外呈現必不可少的一部分，我們在這里將重構的思路和想法分享給大家。
01
優化圖標系統的初衷
在重新對圖標進行整理的時候發現， 雪球存在大量的不被用戶所熟知的圖標語意，金融產品功能語義對于用戶來說本就陌生，我們如何打破這種陌生感，做到讓用戶“一眼即懂”，是后面設計上一個挑戰，也是設計需要解決的最重要的問題。
網站圖標設計
雪球從10.0以后，長時間未對圖標進行整體的梳理， 包括用戶定位的轉變， 設計細節的整體校準，我們梳理了目前圖標系統存在的問題，進行Redesign：
圖標表意混淆不清晰
圖形風格不符合現階段雪球的品牌定位
圖形感受不統一，視覺重量不一致
如何創造驚喜，打磨圖標精致度
所以發現了這么多問題，我們該如何去做呢？
02
設計關鍵點梳理
網站圖標設計
1. 表象識別
圖標替代的是更為易懂的文字描述，表意準確應該是圖標的基本設計原則。在設計項目之初，我們與用研同學協作， 完成對圖標表意問題的梳理， 團體腦暴，用研再次驗證，保證我們的圖形是最適合于現在當前語境。
網站圖標設計
如何讓用戶“一眼即懂”？我們發現用戶對于圖標的認知， 大概可以分為“熟知” “陌生”兩種領域維度。
網站圖標設計
由于用戶已形成了普遍認知， 雪球在設計處理上需要做的是，解決圖形與圖形之間的形態混淆問題即可。
網站圖標設計
我們經過調研發現， 用戶對此圖形的理解“導出”“上傳圖片” “分享”“轉發”, 雖然是常見圖形，但是在理解上用戶很難對它直接定義為“分享”。
網站圖標設計
調研發現， 小老虎的形象更容易被用戶所接受，與文字相稱， 圖形友好具有趣味性。當然，這與我們在設計之初對用戶理解是有一定偏差的，“金融”產品用戶， 并非我們所想的 “嚴謹呆板”，相反的是接受程度非常高。
2. 特征探索
網站圖標設計
網站圖標設計
業務風格：“活力”，更大膽的漸變用色、光影配合， 使圖標跳躍生動更賦活力互聯網，有吸引力，強化用戶對業務功能入口的感知。
網站圖標設計
網站圖標設計
網站圖標設計
03
視覺檢測
雪球圖標目前存在圖標視覺重量感受不一致的問題，如何解決呢？
“平衡視覺差--即怎么讓不同的圖形看上去一樣大”
只定義一個矩形出來，把所有圖形的尺寸與矩形對齊，那么最終看到的圖標效果一定是極度不平衡的。調整視覺規律，占據面積越大的圖形，給視覺的感受就越大，所以給我們感受越小的元素網站建設，就要放的越大。
網站圖標設計
畫布尺寸：根據不同的功能入口和使用場景劃分圖標尺寸；
參考線：統一體量感，基于基本形象做出參考線規范。
在圖標體系中，還需要系統的去設計思考構圖上的可延展性。
“保持類似圖標在構造上的一致性也是建立圖標體系節奏感的一種方法。”
網站圖標設計
04
驚喜創造
12.0的圖標重構我們希望拉近與用戶的距離，使得畫面不再冰冷，通過圖形/動效等方式讓界面更具有趣味性，使用戶產生“愉悅感”。
“動態設計豐富了圖標表達的更多可能性，比靜態更加吸引眼球門頭溝網站建設，增加視覺關注度！”
網站圖標設計
Tab bar 的圖標動畫最大的作用在于解決切換時的枯燥與單調，我們在設計時除了單純追求動畫的變化之外，更多需要思考的是什么樣的動畫更符合我們的設計。
網站圖標設計
05
寫在最后：迭代，沒有終點的旅程
整個項目耗時大概2個月， 圖標體系的建立需要整個團隊在設計前、中、后都能夠達成共識并協作完成。每一個小小的圖標，都是我們用心的考量，本次圖標的改造，僅僅是一個開始，我們會不斷地調整優化圖標，給用戶帶來最準確，舒適的視覺體驗。
轉自：極簡設計
，文章來源：網站建設公司
文章標題：網站設計接我一標開啟圖標新的可能
文本地址：http://m.yoyoenglish.cn/info_1562.html
本文章Word文檔下載：
網站設計接我一標開啟圖標新的可能
關注公眾號
進入手機版
點擊咨詢
4006-234-116
返回頂部