在這次新的視覺改版迭代中，我們更新了過去較為單一的圖標(biāo)形式，重新定義了圖標(biāo)系統(tǒng)。

在舊版頁面中，我們發(fā)現(xiàn)有幾個(gè)問題，比如：頁面形式復(fù)雜，導(dǎo)致頁面的焦點(diǎn)太多，重要功能不夠突出；一些功能過于隱藏，導(dǎo)致用戶很難搜尋…

所以在這次新的視覺改版迭代中，我們更新了過去較為單一的圖標(biāo)形式，重新定義了圖標(biāo)系統(tǒng)。

在新版中，我們主要做了如下改變：

• 采用九宮格形式，實(shí)現(xiàn)更清晰簡單的頁面層次
• 更具頁面整體感的圖標(biāo)風(fēng)格
• 突出財(cái)富頁里團(tuán)團(tuán)賺與散標(biāo)功能，讓用戶更加方便管理賬戶

設(shè)計(jì)原則

在此次圖標(biāo)設(shè)計(jì)更新的過程中，我們提出了幾個(gè)關(guān)鍵的設(shè)計(jì)原則：

1、更具識別性

我們發(fā)現(xiàn)，由于圖標(biāo)本身單線的表現(xiàn)形式，以往的圖標(biāo)系統(tǒng)并沒有很好地傳達(dá) 界面具體信息。在這次新圖標(biāo)的改版中，我們用更加具象的視覺語言給用戶精準(zhǔn)的信息傳達(dá)效果。

2、更具一致性

依照功能層級，我們統(tǒng)一了相同層級的圖標(biāo)形式，讓視覺語言更為鮮明。

3、適度的情感化體現(xiàn)

從前，嚴(yán)肅是用戶對于金融產(chǎn)品的認(rèn)知。我們希望在新時(shí)代和新場景下能夠更新用戶的這種認(rèn)知，在用戶界面的迭代過程中，采用更為豐富的造型與顏色，使頁面更具親和力。

設(shè)計(jì)過程

1、疊加風(fēng)格

我們產(chǎn)品圖標(biāo)是以數(shù)據(jù)與用戶為主要內(nèi)容。如何將內(nèi)容概括完整而不顯繁瑣重復(fù)是我們曾一度思考和疑惑的關(guān)鍵。

在嘗試過多種形式后，我們最終采用了圖形與圖形相疊加的形式來概括圖標(biāo)，在面的基礎(chǔ)上再增添一點(diǎn)基礎(chǔ)形，突破單塊面的形式。在達(dá)意上，圖形疊加風(fēng)格也更易概括復(fù)雜的金融數(shù)據(jù)的圖標(biāo)內(nèi)容。

2、保持相同的大小與間距

在 Icon 的設(shè)計(jì)過程中，圖標(biāo)一致性是一套圖標(biāo)系統(tǒng)成功的關(guān)鍵之一，不同圖標(biāo)之間的關(guān)系也一定程度上決定了整套圖標(biāo)的一致性。

（嚴(yán)格的間距控制以保持圖標(biāo)的一致性）

在這套圖標(biāo)里，圖形與圖形的疊加感與其中間留白的間距也成了整套圖標(biāo)的特點(diǎn)之一。這些特點(diǎn)保持一致，所以整個(gè)圖標(biāo)系統(tǒng)自然有了一致性。

3、圓角的采用

在之前的設(shè)計(jì)原則中，我們提到通過更新金融產(chǎn)品的嚴(yán)肅感，采用更為親和力的造型來體現(xiàn)適度的情感化。在這次的設(shè)計(jì)過程中，所有圖標(biāo)的邊角我們采用圓角的設(shè)計(jì)，從直覺上給人親和感。4px 的圓角大小也較為中和，不會給人過多的可愛感。

Icon System一覽：

后記

在整套圖標(biāo)曲折的設(shè)計(jì)過程中，我們一直在調(diào)整對于細(xì)節(jié)的把控，不讓 Icon過于嚴(yán)肅化，過于可愛化，或過于夸張化。

我們希望提高用戶在使用頁面的過程中視覺的一致性，構(gòu)筑更佳的用戶體驗(yàn)。最后希望這次新的圖標(biāo)版本，能夠帶給點(diǎn)友們一個(gè)全新的感受！

作者：鄧雅兮（點(diǎn)融黑幫）， 現(xiàn)就職于點(diǎn)融DDC，視覺設(shè)計(jì)師一枚。

本文由@點(diǎn)融黑幫（ID：DianrongMafia）原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。