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

相关推荐

  • 新知 | 在打造用户体验上,连雷军都要向这家企业学习

    在我们之前发布过的一篇文章《小米八周年:雷军揭秘四大成功之道》中提到过,雷军在创建小米时受到了美国零售连锁超市好市多(Costco)的启发,从价值体系上来看,小米与好市多相同,都是希望用户能以可承受得起的价格享用更好的产品。好市多以优质、低价出名,在全球拥有700多个分店。从2006年到2016年,好市多的市值增长了五倍,如今的市值约为670亿美元。好市多亚洲区总裁张嗣汉在2018零售业年会上分享了好市多的运营模式、会员制度,以及管理层...

    2018-05-04
  • "用户体验“真是个万恶的东西。

    前些天跟一个在央企大鳄担任要职的朋友聊天,说起某互联网新闻媒介公司被责令整改的事情,(其实我都不确定每天操劳四化建设工作的他知道不知道这件事)我本人并没有什么观点,只是看周围的人都在吐槽说国家管的太碎了,于是就想听听他怎么说。没想到君付之一笑,言道”活该,就应该封了它,它那么大的用户群体,它那么强的社会传播性,它不负责传播正能量谁负责?难道让警察叔叔们一张张发传单传播吗?你做产品做好了挣钱了就应该想想怎么对社会发展负责,不然国家和这个世...

    2018-05-05
  • 交互设计定律 在UI设计中的应用!

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”。在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。接下来,笔者通过一些实例来解析下这些原则在设计中的应用。由于文章有点长,影响阅读体验,故本文将分为上下两篇。一. 费茨定律(Fitts’ Law)1. 费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M...

    2018-02-26
  • 提高交互设计技能的五个方法

     设计师 交互设计师  现在,所有基于Web进行设计的人都需要对交互设计原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练,但只要你了解这些学科的基本原理,依…

    2017-08-01
  • 按键的位置是如何强化用户习惯的?

    当设计师需要向用户展示大量的数据时,总是不可避免要利用到筛选和排序。筛选和排序可以帮助用户缩小他们正在寻找的数据范围。

    2017-05-30
  • 又是高分!北京林业大学交互设计专业课143分复习方法分享

    又一个高分!北京林业大学交互设计专业课143分复习方法分享-孙跃桐我决定考研大概是在16年的9月份吧,因为决定的时间比较早,我以为我准备的时间很充足。真正开始准备是在17年我先开始报了新东方的英语政治课,想先将公共课的基础打牢,在后期复习专业课的时候会有更多的精力于是我将上半年的精力全部都用在学习公共课上面。想在9月份招生简章出来之后我就开始专心复习专业课。但是当九月份招生简章出来之后,我就开始慌了。我本身想考的就是本校之前也问过考研的...

    2018-04-22
  • 一名交互设计师的日常思考方式

    如果有一天,当你发现自己“较真又矫情,苛求又世故,倔强还言辞凿凿”,别否定自己,也许你已经开始有点交互设计师的意思了。

    2017-05-05
  • 转场动效的5个核心规则

    本文作者通过大量的案例分析和过来人的经验,总结了优秀转场动效的5个核心的规则。enjoy~

    2017-04-27
  • 标签栏设计的心理暗示:高亮与视觉纵深的心理模型

    UI在设计上服从于交互,形式上不拘于一格,视觉纵深也只是其中一种心理模型。
    注:本文面向入门级设计师,大神请飘过~

    2017-05-18
  • 译文 | 我在餐厅工作时学到的关于用户体验的心得

    本人在涉足设计专业之前学习过两年的酒店管理。在我实习的过程中,经历过许多与客户之间的沟通交流,这其中有积极的也有负面的。在我看来,酒店餐厅服务也是交互的一种形式,而且这其中涉及到很多体验设计的理论和方法,当我作为交互设计师工作多年以后,仍然觉得很受启发。当我看到篇文章的题目时,我就决定要把它翻译出来!下面进入译文。

    2017-05-30