“一套優(yōu)質(zhì)的圖標(biāo)是用戶體驗(yàn)設(shè)計(jì)中必不可少的重要組成部分,把文字含義通過(guò)清晰易懂的圖形表達(dá),可以降低用戶閱讀成本以及提升產(chǎn)品界面的美觀度。“
網(wǎng)站圖標(biāo)設(shè)計(jì)
在雪球最新版本12.0中,圖標(biāo)的設(shè)計(jì)重構(gòu)也是視覺(jué)對(duì)外呈現(xiàn)必不可少的一部分,我們?cè)谶@里將重構(gòu)的思路和想法分享給大家。
01
優(yōu)化圖標(biāo)系統(tǒng)的初衷
在重新對(duì)圖標(biāo)進(jìn)行整理的時(shí)候發(fā)現(xiàn), 雪球存在大量的不被用戶所熟知的圖標(biāo)語(yǔ)意,金融產(chǎn)品功能語(yǔ)義對(duì)于用戶來(lái)說(shuō)本就陌生,我們?nèi)绾未蚱七@種陌生感,做到讓用戶“一眼即懂”,是后面設(shè)計(jì)上一個(gè)挑戰(zhàn),也是設(shè)計(jì)需要解決的最重要的問(wèn)題。
網(wǎng)站圖標(biāo)設(shè)計(jì)
雪球從10.0以后,長(zhǎng)時(shí)間未對(duì)圖標(biāo)進(jìn)行整體的梳理, 包括用戶定位的轉(zhuǎn)變, 設(shè)計(jì)細(xì)節(jié)的整體校準(zhǔn),我們梳理了目前圖標(biāo)系統(tǒng)存在的問(wèn)題,進(jìn)行Redesign:
圖標(biāo)表意混淆不清晰
圖形風(fēng)格不符合現(xiàn)階段雪球的品牌定位
圖形感受不統(tǒng)一,視覺(jué)重量不一致
如何創(chuàng)造驚喜,打磨圖標(biāo)精致度
所以發(fā)現(xiàn)了這么多問(wèn)題,我們?cè)撊绾稳プ瞿兀?/span>
02
設(shè)計(jì)關(guān)鍵點(diǎn)梳理
網(wǎng)站圖標(biāo)設(shè)計(jì)
1. 表象識(shí)別
圖標(biāo)替代的是更為易懂的文字描述,表意準(zhǔn)確應(yīng)該是圖標(biāo)的基本設(shè)計(jì)原則。在設(shè)計(jì)項(xiàng)目之初,我們與用研同學(xué)協(xié)作, 完成對(duì)圖標(biāo)表意問(wèn)題的梳理, 團(tuán)體腦暴,用研再次驗(yàn)證,保證我們的圖形是最適合于現(xiàn)在當(dāng)前語(yǔ)境。
網(wǎng)站圖標(biāo)設(shè)計(jì)
如何讓用戶“一眼即懂”?我們發(fā)現(xiàn)用戶對(duì)于圖標(biāo)的認(rèn)知, 大概可以分為“熟知” “陌生”兩種領(lǐng)域維度。
網(wǎng)站圖標(biāo)設(shè)計(jì)
由于用戶已形成了普遍認(rèn)知, 雪球在設(shè)計(jì)處理上需要做的是,解決圖形與圖形之間的形態(tài)混淆問(wèn)題即可。
網(wǎng)站圖標(biāo)設(shè)計(jì)
我們經(jīng)過(guò)調(diào)研發(fā)現(xiàn), 用戶對(duì)此圖形的理解“導(dǎo)出”“上傳圖片” “分享”“轉(zhuǎn)發(fā)”, 雖然是常見(jiàn)圖形,但是在理解上用戶很難對(duì)它直接定義為“分享”。
“沿用主流設(shè)計(jì),不適宜的創(chuàng)新會(huì)為用戶帶來(lái)更大的認(rèn)知負(fù)荷。”
文字含義已經(jīng)相對(duì)陌生,圖形如果與文字不匹配,會(huì)加重用戶的理解成本,嘗試用趣味性的表達(dá)讓用戶一眼識(shí)別。
網(wǎng)站圖標(biāo)設(shè)計(jì)
調(diào)研發(fā)現(xiàn), 小老虎的形象更容易被用戶所接受,與文字相稱, 圖形友好具有趣味性。當(dāng)然,這與我們?cè)谠O(shè)計(jì)之初對(duì)用戶理解是有一定偏差的,“金融”產(chǎn)品用戶, 并非我們所想的 “嚴(yán)謹(jǐn)呆板”,相反的是接受程度非常高。
2. 特征探索
網(wǎng)站圖標(biāo)設(shè)計(jì)
整體風(fēng)格:“簡(jiǎn)潔有力” ,設(shè)計(jì)語(yǔ)言的精煉, 使之達(dá)到形式和內(nèi)涵的極簡(jiǎn), 從而準(zhǔn)確地傳達(dá)信息,而且簡(jiǎn)潔的圖標(biāo)語(yǔ)言貼近雪球金融屬性定位。
網(wǎng)站圖標(biāo)設(shè)計(jì)
業(yè)務(wù)風(fēng)格:“活力”,更大膽的漸變用色、光影配合, 使圖標(biāo)跳躍生動(dòng)更賦活力
,增加視覺(jué)關(guān)注度!”
網(wǎng)站圖標(biāo)設(shè)計(jì)
Tab bar 的圖標(biāo)動(dòng)畫(huà)最大的作用在于解決切換時(shí)的枯燥與單調(diào),我們?cè)谠O(shè)計(jì)時(shí)除了單純追求動(dòng)畫(huà)的變化之外,更多需要思考的是什么樣的動(dòng)畫(huà)更符合我們的設(shè)計(jì)。
再來(lái)看一下,App內(nèi)的圖標(biāo)整體效果
網(wǎng)站圖標(biāo)設(shè)計(jì)
05
寫(xiě)在最后:迭代,沒(méi)有終點(diǎn)的旅程
整個(gè)項(xiàng)目耗時(shí)大概2個(gè)月, 圖標(biāo)體系的建立需要整個(gè)團(tuán)隊(duì)在設(shè)計(jì)前、中、后都能夠達(dá)成共識(shí)并協(xié)作完成。每一個(gè)小小的圖標(biāo),都是我們用心的考量,本次圖標(biāo)的改造,僅僅是一個(gè)開(kāi)始,我們會(huì)不斷地調(diào)整優(yōu)化圖標(biāo),給用戶帶來(lái)最準(zhǔn)確,舒適的視覺(jué)體驗(yàn)。
轉(zhuǎn)自:極簡(jiǎn)設(shè)計(jì)
,