Icon 改版：對於細節的把控才是關鍵

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

在舊版頁面中，我們發現有幾個問題，比如：頁面形式複雜，導致頁面的焦點太多，重要功能不夠突出；一些功能過於隱藏，導致用戶很難搜尋…

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

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

• 採用九宮格形式，實現更清晰簡單的頁面層次
• 更具頁面整體感的圖標風格
• 突出財富頁里團團賺與散標功能，讓用戶更加方便管理賬戶

設計原則

在此次圖標設計更新的過程中，我們提出了幾個關鍵的設計原則：

1、更具識別性

我們發現，由於圖標本身單線的表現形式，以往的圖標系統並沒有很好地傳達 界面具體信息。在這次新圖標的改版中，我們用更加具象的視覺語言給用戶精準的信息傳達效果。

2、更具一致性

依照功能層級，我們統一了相同層級的圖標形式，讓視覺語言更為鮮明。

3、適度的情感化體現

從前，嚴肅是用戶對於金融產品的認知。我們希望在新時代和新場景下能夠更新用戶的這種認知，在用戶界面的迭代過程中，採用更為豐富的造型與顏色，使頁面更具親和力。

設計過程

1、疊加風格

我們產品圖標是以數據與用戶為主要內容。如何將內容概括完整而不顯繁瑣重複是我們曾一度思考和疑惑的關鍵。

在嘗試過多種形式后，我們最終採用了圖形與圖形相疊加的形式來概括圖標，在面的基礎上再增添一點基礎形，突破單塊面的形式。在達意上，圖形疊加風格也更易概括複雜的金融數據的圖標內容。

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

在 Icon 的設計過程中，圖標一致性是一套圖標系統成功的關鍵之一，不同圖標之間的關係也一定程度上決定了整套圖標的一致性。

（嚴格的間距控制以保持圖標的一致性）

在這套圖標里，圖形與圖形的疊加感與其中間留白的間距也成了整套圖標的特點之一。這些特點保持一致，所以整個圖標系統自然有了一致性。

3、圓角的採用

在之前的設計原則中，我們提到通過更新金融產品的嚴肅感，採用更為親和力的造型來體現適度的情感化。在這次的設計過程中，所有圖標的邊角我們採用圓角的設計，從直覺上給人親和感。4px 的圓角大小也較為中和，不會給人過多的可愛感。

Icon System一覽：

後記

在整套圖標曲折的設計過程中，我們一直在調整對於細節的把控，不讓 Icon過於嚴肅化，過於可愛化，或過於誇張化。

我們希望提高用戶在使用頁面的過程中視覺的一致性，構築更佳的用戶體驗。最後希望這次新的圖標版本，能夠帶給點友們一個全新的感受！

作者：鄧雅兮（點融黑幫）， 現就職於點融DDC，視覺設計師一枚。

本文由@點融黑幫（ID：DianrongMafia）原創發佈於人人都是產品經理，未經許可，禁止轉載。