網(wǎng)站設計接我一標開啟圖標新的可能

作者：龍鼎網(wǎng)絡發(fā)布時間：2021-02-09 22:47:41瀏覽次數(shù)：15386文章出處：晉城自適應網(wǎng)站制作

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

網(wǎng)站圖標設計

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

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

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

網(wǎng)站圖標設計

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

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

設計關(guān)鍵點梳理

網(wǎng)站圖標設計

1. 表象識別

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

網(wǎng)站圖標設計

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

網(wǎng)站圖標設計

由于用戶已形成了普遍認知，雪球在設計處理上需要做的是，解決圖形與圖形之間的形態(tài)混淆問題即可。

網(wǎng)站圖標設計

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

文字含義已經(jīng)相對陌生，圖形如果與文字不匹配，會加重用戶的理解成本，嘗試用趣味性的表達讓用戶一眼識別。

網(wǎng)站圖標設計

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

2. 特征探索

網(wǎng)站圖標設計

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

網(wǎng)站圖標設計

業(yè)務風格：“活力”，更大膽的漸變用色、光影配合，使圖標跳躍生動更賦活力，增加視覺關(guān)注度！”

網(wǎng)站圖標設計

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

網(wǎng)站圖標設計

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

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

轉(zhuǎn)自：極簡設計

，

網(wǎng)站建設