Icon 改版:对于细节的把控才是关键

在这次新的视觉改版迭代中,我们更新了过去较为单一的图标形式,重新定义了图标系统。


在这次新的视觉改版迭代中,我们更新了过去较为单一的图标形式,重新定义了图标系统。

Icon 改版:对于细节的把控才是关键

在旧版页面中,我们发现有几个问题,比如:页面形式复杂,导致页面的焦点太多,重要功能不够突出;一些功能过于隐藏,导致用户很难搜寻…

Icon 改版:对于细节的把控才是关键

所以在这次新的视觉改版迭代中,我们更新了过去较为单一的图标形式,重新定义了图标系统。

Icon 改版:对于细节的把控才是关键

在新版中,我们主要做了如下改变:

  • 采用九宫格形式,实现更清晰简单的页面层次
  • 更具页面整体感的图标风格
  • 突出财富页里团团赚与散标功能,让用户更加方便管理账户

设计原则

在此次图标设计更新的过程中,我们提出了几个关键的设计原则:

1、更具识别性

我们发现,由于图标本身单线的表现形式,以往的图标系统并没有很好地传达 界面具体信息。在这次新图标的改版中,我们用更加具象的视觉语言给用户精准的信息传达效果。

2、更具一致性

依照功能层级,我们统一了相同层级的图标形式,让视觉语言更为鲜明。

3、适度的情感化体现

从前,严肃是用户对于金融产品的认知。我们希望在新时代和新场景下能够更新用户的这种认知,在用户界面的迭代过程中,采用更为丰富的造型与颜色,使页面更具亲和力。

设计过程

Icon 改版:对于细节的把控才是关键

1、叠加风格

Icon 改版:对于细节的把控才是关键

我们产品图标是以数据与用户为主要内容。如何将内容概括完整而不显繁琐重复是我们曾一度思考和疑惑的关键。

在尝试过多种形式后,我们最终采用了图形与图形相叠加的形式来概括图标,在面的基础上再增添一点基础形,突破单块面的形式。在达意上,图形叠加风格也更易概括复杂的金融数据的图标内容。

Icon 改版:对于细节的把控才是关键

2、保持相同的大小与间距

在 Icon 的设计过程中,图标一致性是一套图标系统成功的关键之一,不同图标之间的关系也一定程度上决定了整套图标的一致性。

Icon 改版:对于细节的把控才是关键

Icon 改版:对于细节的把控才是关键

(严格的间距控制以保持图标的一致性)

在这套图标里,图形与图形的叠加感与其中间留白的间距也成了整套图标的特点之一。这些特点保持一致,所以整个图标系统自然有了一致性。

3、圆角的采用

Icon 改版:对于细节的把控才是关键

在之前的设计原则中,我们提到通过更新金融产品的严肃感,采用更为亲和力的造型来体现适度的情感化。在这次的设计过程中,所有图标的边角我们采用圆角的设计,从直觉上给人亲和感。4px 的圆角大小也较为中和,不会给人过多的可爱感。

Icon System一览:

Icon 改版:对于细节的把控才是关键

后记

在整套图标曲折的设计过程中,我们一直在调整对于细节的把控,不让 Icon过于严肃化,过于可爱化,或过于夸张化。

我们希望提高用户在使用页面的过程中视觉的一致性,构筑更佳的用户体验。最后希望这次新的图标版本,能够带给点友们一个全新的感受!

 

作者:邓雅兮(点融黑帮), 现就职于点融DDC,视觉设计师一枚。

本文由@点融黑帮(ID:DianrongMafia)原创发布于人人都是产品经理,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23208/

(0)
CatherineCatherine
上一篇 2017-05-04 12:06
下一篇 2017-05-04 14:22

相关推荐

  • 成为设计师不是不可能!

      前言:本文译自国外高质量问答社区Quora,原文作者Karen X. Cheng,原是微软Excel的项目经理,后通过自学转型成为设计师。她讲述的自学过程详实细致且条理有序,读完会发现与想象中的大不一样,对于想自学设…

    2015-04-01
  • UNStudio:健康城市,基于未来的设计

    📌 编辑 |Cassi.W编者按:城市公共环境作为人们共同的“家”,需要群策群力共同营造。城市公共基础设施作为“城市家居”是人们日常生活舒适感、安全感的主要保证。第二届“衲田杯”可持续设计国际竞赛正在火热报名中,你的脑洞是否还够用?“新技术引领下的智慧城市家居”有很多可能性,需要大家去探索、去研究、去发现。本期我们将走近UNStudio事务所的智慧城市实践,为你的方案增添一点灵感!- UNStudio -Ben van Berkel本·...

    2018-03-17
  • 在网页设计中,如何运用方框/方形元素?

    如何让方正方框/方形元素不死板有创意?今天这篇好文总结了超多的设计方法和实战案例,建议阅读。

    2017-05-07
  • 【产品分析】微信拼手气红包的贪嗔痴

    春节期间火爆的“拼手气”红包,让用户疯狂点击拼手速网速,拼rp看金额,每一个环节都深深戳着用户的G点,高潮迭起。“拼手气”就是拼人品,那么,最佳手气者是不是有机可循呢?微信红包这样的设计目的在何处? Aaron毛…

    2015-03-05
  • 四维世界的交互演进:交互的演进历史

    你有没有想过,这个世界其实并不是你看的那样?你有没有想过,其实唯心主义和唯物主义的区分,从本质上看其实还是唯心主义?今天咱们简单谈谈交互的演进历史。

    2017-05-28
  • 交互设计 | 张艺谋这样玩儿

    3 月 4 日,张艺谋导演的观念演出《对话·寓言 2047》在上海大剧院正式演出。在连演两场之后,他们将移师广州和杭州,共同组成《对话·寓言 2047》第二季的演出。尽管被称为第二季,但此次演出的内容与去年 6 月在国家大剧院上演的第一季大体相似。开场仍旧是 71 岁的蒙古族老人其布日一边编织着麻绳,一边唱着悠扬的蒙古长调。背景中,美国先锋艺术家 Daniel Wurtzel 利用空气动力学原理,让一块云纱在舞台上翩翩飞舞。在这个段落之...

    2018-03-06
  • 新手转向资深的必经之路——交互文件命名的最详细规范(上)

    经过一期带团队的体验,阁主发现文件命名有点让人抓狂,实在忍不住更新一篇文章去说说这其中大家约定俗成的规则,不仅包括切图命名规则,还包括文件整理规范。之前楼主有整理过简单的,貌似不够用,今天再来具体说说。

    2017-05-01
  • 为女性设计APP的7个小技巧

    Groove CEO解释了如何以正确的方式为女性设计APP。 提示:如果你将花,心形,及娃娃混在一起设计,那你可能需要重新思考你的设计。 当我的公司Groove着手建立一个定期跟踪器,我们知道这将是一个挑战。 搜索以女性客户为…

    2015-04-28
  • APP交互设计,需要注意五点事项

    交互设计这个词最早提出来是在1927-1970年,那个时候只是个初创期。后续随着时间推移,互联网和机器的发展,这几年开始被人重视这个交互设计。很多公司专门成立个部门叫UED,听起来很吓人,设计师没有接触过,不知道是什么东西,具体里面有哪些核心内容?其实说白了就是把人,机器和界面相融合,做到顺其自然,顺理成章,不要反其道而行,逆天反人类。

    2017-05-13
  • 三八XX节专题页设计该怎么玩?看这篇就够了!

    在本文中,作者将带大家看下,那些围绕着妇女节的专题页面可以怎么玩?一起来look~look~

    2017-05-07