2021-05-07 分類: 網(wǎng)站設(shè)計
“一套優(yōu)質(zhì)的圖標(biāo)是用戶體驗設(shè)計中必不可少的重要組成部分,把文字含義通過清晰易懂的圖形表達(dá),可以降低用戶閱讀成本以及提升產(chǎn)品界面的美觀度。“
網(wǎng)站圖標(biāo)設(shè)計
在雪球最新版本12.0中,圖標(biāo)的設(shè)計重構(gòu)也是視覺對外呈現(xiàn)必不可少的一部分,我們在這里將重構(gòu)的思路和想法分享給大家。
01
優(yōu)化圖標(biāo)系統(tǒng)的初衷
在重新對圖標(biāo)進(jìn)行整理的時候發(fā)現(xiàn), 雪球存在大量的不被用戶所熟知的圖標(biāo)語意,金融產(chǎn)品功能語義對于用戶來說本就陌生,我們?nèi)绾未蚱七@種陌生感,做到讓用戶“一眼即懂”,是后面設(shè)計上一個挑戰(zhàn),也是設(shè)計需要解決的最重要的問題。
網(wǎng)站圖標(biāo)設(shè)計
雪球從10.0以后,長時間未對圖標(biāo)進(jìn)行整體的梳理, 包括用戶定位的轉(zhuǎn)變, 設(shè)計細(xì)節(jié)的整體校準(zhǔn),我們梳理了目前圖標(biāo)系統(tǒng)存在的問題,進(jìn)行Redesign:
圖標(biāo)表意混淆不清晰
圖形風(fēng)格不符合現(xiàn)階段雪球的品牌定位
圖形感受不統(tǒng)一,視覺重量不一致
如何創(chuàng)造驚喜,打磨圖標(biāo)精致度
所以發(fā)現(xiàn)了這么多問題,我們該如何去做呢?
02
設(shè)計關(guān)鍵點梳理
網(wǎng)站圖標(biāo)設(shè)計
1. 表象識別
圖標(biāo)替代的是更為易懂的文字描述,表意準(zhǔn)確應(yīng)該是圖標(biāo)的基本設(shè)計原則。在設(shè)計項目之初,我們與用研同學(xué)協(xié)作, 完成對圖標(biāo)表意問題的梳理, 團(tuán)體腦暴,用研再次驗證,保證我們的圖形是最適合于現(xiàn)在當(dāng)前語境。
網(wǎng)站圖標(biāo)設(shè)計
如何讓用戶“一眼即懂”?我們發(fā)現(xiàn)用戶對于圖標(biāo)的認(rèn)知, 大概可以分為“熟知” “陌生”兩種領(lǐng)域維度。
網(wǎng)站圖標(biāo)設(shè)計
網(wǎng)站圖標(biāo)設(shè)計
我們經(jīng)過調(diào)研發(fā)現(xiàn), 用戶對此圖形的理解“導(dǎo)出”“上傳圖片” “分享”“轉(zhuǎn)發(fā)”, 雖然是常見圖形,但是在理解上用戶很難對它直接定義為“分享”。網(wǎng)站圖標(biāo)設(shè)計
調(diào)研發(fā)現(xiàn), 小老虎的形象更容易被用戶所接受,與文字相稱, 圖形友好具有趣味性。當(dāng)然,這與我們在設(shè)計之初對用戶理解是有一定偏差的,“金融”產(chǎn)品用戶, 并非我們所想的 “嚴(yán)謹(jǐn)呆板”,相反的是接受程度非常高。
2. 特征探索
網(wǎng)站圖標(biāo)設(shè)計
定義風(fēng)格
網(wǎng)站圖標(biāo)設(shè)計
業(yè)務(wù)風(fēng)格:“活力”,更大膽的漸變用色、光影配合, 使圖標(biāo)跳躍生動更賦活力,有吸引力,強化用戶對業(yè)務(wù)功能入口的感知。
網(wǎng)站圖標(biāo)設(shè)計
色彩煥新
網(wǎng)站圖標(biāo)設(shè)計
圖標(biāo)細(xì)節(jié)
網(wǎng)站圖標(biāo)設(shè)計
03
視覺檢測
平衡視覺差
雪球圖標(biāo)目前存在圖標(biāo)視覺重量感受不一致的問題,如何解決呢?
“平衡視覺差--即怎么讓不同的圖形看上去一樣大”
只定義一個矩形出來,把所有圖形的尺寸與矩形對齊,那么最終看到的圖標(biāo)效果一定是極度不平衡的。調(diào)整視覺規(guī)律,占據(jù)面積越大的圖形,給視覺的感受就越大,所以給我們感受越小的元素,就要放的越大。
網(wǎng)站圖標(biāo)設(shè)計
建立一致性的圖標(biāo)繪制尺寸規(guī)范
畫布尺寸:根據(jù)不同的功能入口和使用場景劃分圖標(biāo)尺寸;
參考線:統(tǒng)一體量感,基于基本形象做出參考線規(guī)范。
在圖標(biāo)體系中,還需要系統(tǒng)的去設(shè)計思考構(gòu)圖上的可延展性。
“保持類似圖標(biāo)在構(gòu)造上的一致性也是建立圖標(biāo)體系節(jié)奏感的一種方法。”
網(wǎng)站圖標(biāo)設(shè)計
04
驚喜創(chuàng)造
12.0的圖標(biāo)重構(gòu)我們希望拉近與用戶的距離,使得畫面不再冰冷,通過圖形/動效等方式讓界面更具有趣味性,使用戶產(chǎn)生“愉悅感”。
“動態(tài)設(shè)計豐富了圖標(biāo)表達(dá)的更多可能性,比靜態(tài)更加吸引眼球,增加視覺關(guān)注度!”
網(wǎng)站圖標(biāo)設(shè)計
Tab bar 的圖標(biāo)動畫大的作用在于解決切換時的枯燥與單調(diào),我們在設(shè)計時除了單純追求動畫的變化之外,更多需要思考的是什么樣的動畫更符合我們的設(shè)計。
網(wǎng)站圖標(biāo)設(shè)計
05
寫在最后:迭代,沒有終點的旅程
整個項目耗時大概2個月, 圖標(biāo)體系的建立需要整個團(tuán)隊在設(shè)計前、中、后都能夠達(dá)成共識并協(xié)作完成。每一個小小的圖標(biāo),都是我們用心的考量,本次圖標(biāo)的改造,僅僅是一個開始,我們會不斷地調(diào)整優(yōu)化圖標(biāo),給用戶帶來最準(zhǔn)確,舒適的視覺體驗。
分享標(biāo)題:網(wǎng)站設(shè)計接我一標(biāo)開啟圖標(biāo)新的可能
文章分享:http://m.rwnh.cn/news/112677.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站設(shè)計等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容