“一套優(yōu)質的圖標是用戶體驗設計中必不可少的重要組成部分，把文字含義通過清晰易懂的圖形表達，可以降低用戶閱讀成本以及提升產(chǎn)品界面的美觀度。“

網(wǎng)站圖標設計

在雪球最新版本12.0中，圖標的設計重構也是視覺對外呈現(xiàn)必不可少的一部分，我們在這里將重構的思路和想法分享給大家。

01

優(yōu)化圖標系統(tǒng)的初衷

在重新對圖標進行整理的時候發(fā)現(xiàn)， 雪球存在大量的不被用戶所熟知的圖標語意，金融產(chǎn)品功能語義對于用戶來說本就陌生，我們如何打破這種陌生感，做到讓用戶“一眼即懂”，是后面設計上一個挑戰(zhàn)，也是設計需要解決的最重要的問題。

網(wǎng)站圖標設計

雪球從10.0以后，長時間未對圖標進行整體的梳理， 包括用戶定位的轉變， 設計細節(jié)的整體校準，我們梳理了目前圖標系統(tǒng)存在的問題，進行Redesign：

• 圖標表意混淆不清晰

• 圖形風格不符合現(xiàn)階段雪球的品牌定位

• 圖形感受不統(tǒng)一，視覺重量不一致

• 如何創(chuàng)造驚喜，打磨圖標精致度

所以發(fā)現(xiàn)了這么多問題，我們該如何去做呢？

02

設計關鍵點梳理

網(wǎng)站圖標設計

1. 表象識別

圖標替代的是更為易懂的文字描述，表意準確應該是圖標的基本設計原則。在設計項目之初，我們與用研同學協(xié)作， 完成對圖標表意問題的梳理， 團體腦暴，用研再次驗證，保證我們的圖形是最適合于現(xiàn)在當前語境。

網(wǎng)站圖標設計

如何讓用戶“一眼即懂”？我們發(fā)現(xiàn)用戶對于圖標的認知， 大概可以分為“熟知” “陌生”兩種領域維度。

網(wǎng)站圖標設計

網(wǎng)站圖標設計

我們經(jīng)過調研發(fā)現(xiàn)， 用戶對此圖形的理解“導出”“上傳圖片” “分享”“轉發(fā)”,  雖然是常見圖形，但是在理解上用戶很難對它直接定義為“分享”。
“沿用主流設計，不適宜的創(chuàng)新會為用戶帶來更大的認知負荷?！?br>

網(wǎng)站圖標設計

調研發(fā)現(xiàn)， 小老虎的形象更容易被用戶所接受，與文字相稱， 圖形友好具有趣味性。當然，這與我們在設計之初對用戶理解是有一定偏差的，“金融”產(chǎn)品用戶， 并非我們所想的 “嚴謹呆板”，相反的是接受程度非常高。

2. 特征探索

網(wǎng)站圖標設計

定義風格

整體風格：“簡潔有力” ，設計語言的精煉, 使之達到形式和內涵的極簡, 從而準確地傳達信息，而且簡潔的圖標語言貼近雪球金融屬性定位。

網(wǎng)站圖標設計

業(yè)務風格：“活力”，更大膽的漸變用色、光影配合， 使圖標跳躍生動更賦活力，有吸引力，強化用戶對業(yè)務功能入口的感知。

網(wǎng)站圖標設計

色彩煥新

色彩作為第一眼視覺，我們大量的應用了高飽和度漸變色， 更加符合雪球聚焦“新中產(chǎn)”年輕受眾群體的喜好， 使圖標能成為雪球界面上的點睛之筆， 為產(chǎn)品氛圍更添一分活力。

網(wǎng)站圖標設計

圖標細節(jié)

舍棄舊版圖標的尖角設計，采用圓角設計，讓整個圖標體系看起來更柔和，更圓潤，更具親和力，結合界面圓角卡片等元素，希望傳達雪球的包容性。

網(wǎng)站圖標設計

03

視覺檢測

平衡視覺差

雪球圖標目前存在圖標視覺重量感受不一致的問題，如何解決呢？

“平衡視覺差--即怎么讓不同的圖形看上去一樣大”

只定義一個矩形出來，把所有圖形的尺寸與矩形對齊，那么最終看到的圖標效果一定是極度不平衡的。調整視覺規(guī)律，占據(jù)面積越大的圖形，給視覺的感受就越大，所以給我們感受越小的元素，就要放的越大。

網(wǎng)站圖標設計

建立一致性的圖標繪制尺寸規(guī)范

畫布尺寸：根據(jù)不同的功能入口和使用場景劃分圖標尺寸；

參考線：統(tǒng)一體量感，基于基本形象做出參考線規(guī)范。

• 可延展性

在圖標體系中，還需要系統(tǒng)的去設計思考構圖上的可延展性。

“保持類似圖標在構造上的一致性也是建立圖標體系節(jié)奏感的一種方法。”

網(wǎng)站圖標設計

04

驚喜創(chuàng)造

12.0的圖標重構我們希望拉近與用戶的距離，使得畫面不再冰冷，通過圖形/動效等方式讓界面更具有趣味性，使用戶產(chǎn)生“愉悅感”。

“動態(tài)設計豐富了圖標表達的更多可能性，比靜態(tài)更加吸引眼球，增加視覺關注度！”

網(wǎng)站圖標設計

Tab bar 的圖標動畫大的作用在于解決切換時的枯燥與單調，我們在設計時除了單純追求動畫的變化之外，更多需要思考的是什么樣的動畫更符合我們的設計。
再來看一下，App內的圖標整體效果

網(wǎng)站圖標設計

05

寫在最后：迭代，沒有終點的旅程

整個項目耗時大概2個月， 圖標體系的建立需要整個團隊在設計前、中、后都能夠達成共識并協(xié)作完成。每一個小小的圖標，都是我們用心的考量，本次圖標的改造，僅僅是一個開始，我們會不斷地調整優(yōu)化圖標，給用戶帶來最準確，舒適的視覺體驗。

分享標題：網(wǎng)站設計接我一標開啟圖標新的可能
文章分享：http://redsoil1982.com.cn/news/112677.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站設計等

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)