網(wǎng)站設(shè)計(jì)接我一標(biāo)開啟圖標(biāo)新的可能

2021-05-07 分類：網(wǎng)站設(shè)計(jì)

“一套優(yōu)質(zhì)的圖標(biāo)是用戶體驗(yàn)設(shè)計(jì)中必不可少的重要組成部分，把文字含義通過(guò)清晰易懂的圖形表達(dá)，可以降低用戶閱讀成本以及提升產(chǎn)品界面的美觀度?！?/strong>

網(wǎng)站圖標(biāo)設(shè)計(jì)

在雪球最新版本12.0中，圖標(biāo)的設(shè)計(jì)重構(gòu)也是視覺對(duì)外呈現(xiàn)必不可少的一部分，我們?cè)谶@里將重構(gòu)的思路和想法分享給大家。

優(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ǎ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)存在的問題，進(jìn)行Redesign：

圖標(biāo)表意混淆不清晰
圖形風(fēng)格不符合現(xiàn)階段雪球的品牌定位
圖形感受不統(tǒng)一，視覺重量不一致
如何創(chuàng)造驚喜，打磨圖標(biāo)精致度

所以發(fā)現(xiàn)了這么多問題，我們?cè)撊绾稳プ瞿兀?/p>

設(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)表意問題的梳理，團(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ì)

網(wǎng)站圖標(biāo)設(shè)計(jì)
我們經(jīng)過(guò)調(diào)研發(fā)現(xiàn)，用戶對(duì)此圖形的理解“導(dǎo)出”“上傳圖片” “分享”“轉(zhuǎn)發(fā)”, 雖然是常見圖形，但是在理解上用戶很難對(duì)它直接定義為“分享”。
“沿用主流設(shè)計(jì)，不適宜的創(chuàng)新會(huì)為用戶帶來(lái)更大的認(rèn)知負(fù)荷?！?br>

網(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)格

整體風(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)更賦活力，有吸引力，強(qiáng)化用戶對(duì)業(yè)務(wù)功能入口的感知。

網(wǎng)站圖標(biāo)設(shè)計(jì)
色彩煥新

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

網(wǎng)站圖標(biāo)設(shè)計(jì)
圖標(biāo)細(xì)節(jié)

舍棄舊版圖標(biāo)的尖角設(shè)計(jì)，采用圓角設(shè)計(jì)，讓整個(gè)圖標(biāo)體系看起來(lái)更柔和，更圓潤(rùn)，更具親和力，結(jié)合界面圓角卡片等元素，希望傳達(dá)雪球的包容性。

網(wǎng)站圖標(biāo)設(shè)計(jì)
03
視覺檢測(cè)

平衡視覺差
雪球圖標(biāo)目前存在圖標(biāo)視覺重量感受不一致的問題，如何解決呢？

“平衡視覺差--即怎么讓不同的圖形看上去一樣大”
只定義一個(gè)矩形出來(lái)，把所有圖形的尺寸與矩形對(duì)齊，那么最終看到的圖標(biāo)效果一定是極度不平衡的。調(diào)整視覺規(guī)律，占據(jù)面積越大的圖形，給視覺的感受就越大，所以給我們感受越小的元素，就要放的越大。

網(wǎng)站圖標(biāo)設(shè)計(jì)
建立一致性的圖標(biāo)繪制尺寸規(guī)范
畫布尺寸：根據(jù)不同的功能入口和使用場(chǎng)景劃分圖標(biāo)尺寸；
參考線：統(tǒng)一體量感，基于基本形象做出參考線規(guī)范。

可延展性
在圖標(biāo)體系中，還需要系統(tǒng)的去設(shè)計(jì)思考構(gòu)圖上的可延展性。
“保持類似圖標(biāo)在構(gòu)造上的一致性也是建立圖標(biāo)體系節(jié)奏感的一種方法?！?/strong>

網(wǎng)站圖標(biāo)設(shè)計(jì)
04
驚喜創(chuàng)造

12.0的圖標(biāo)重構(gòu)我們希望拉近與用戶的距離，使得畫面不再冰冷，通過(guò)圖形/動(dòng)效等方式讓界面更具有趣味性，使用戶產(chǎn)生“愉悅感”。
“動(dòng)態(tài)設(shè)計(jì)豐富了圖標(biāo)表達(dá)的更多可能性，比靜態(tài)更加吸引眼球，增加視覺關(guān)注度！”

網(wǎng)站圖標(biāo)設(shè)計(jì)
Tab bar 的圖標(biāo)動(dòng)畫大的作用在于解決切換時(shí)的枯燥與單調(diào)，我們?cè)谠O(shè)計(jì)時(shí)除了單純追求動(dòng)畫的變化之外，更多需要思考的是什么樣的動(dòng)畫更符合我們的設(shè)計(jì)。
再來(lái)看一下，App內(nèi)的圖標(biāo)整體效果

網(wǎng)站圖標(biāo)設(shè)計(jì)
05
寫在最后：迭代，沒有終點(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è)開始，我們會(huì)不斷地調(diào)整優(yōu)化圖標(biāo)，給用戶帶來(lái)最準(zhǔn)確，舒適的視覺體驗(yàn)。

分享標(biāo)題：網(wǎng)站設(shè)計(jì)接我一標(biāo)開啟圖標(biāo)新的可能
文章分享：http://jinyejixie.com/news/112677.html

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

廣告

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

猜你還喜歡下面的內(nèi)容

細(xì)說(shuō)網(wǎng)站設(shè)計(jì)中的那些事 2021-05-07
網(wǎng)站設(shè)計(jì)策劃方向包括哪些 2021-05-07
真正以“用戶”作為核心的網(wǎng)站設(shè)計(jì)才是根本 2021-05-07
細(xì)節(jié)——決定網(wǎng)站設(shè)計(jì)的成敗 2021-05-06
什么樣的網(wǎng)站設(shè)計(jì)可以吸引用戶？ 2021-05-06

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

網(wǎng)站設(shè)計(jì)接我一標(biāo)開啟圖標(biāo)新的可能