如何做图标改版设计?来看58 App的实战案例! - 优设网 - UISDC

如何做图标改版设计?来看58 App的实战案例!

2017/09/01 6525评论区

58UXD:经过几个月的努力,全新的58App icon视觉升级已经完成,新版icon给了大家全新的感受,鲜明的风格使其在众多App中脱颖而出,那么是什么推动我们做了这次改版设计,设计过程中又经历了哪些故事呢?今天就来跟大家分享一下这次icon升级的点点滴滴。

改版前提

首先,我们需要认识一点,即icon对于一款App的重要性,它主要体现在“助理解,吸引力,趣味性”等方面,因此,我们的设计也必须要体现这些特点。

前期调研

改版之前,我们进行了一定的用户调研,用户普遍反馈“用色略显沉闷,缺乏吸引力,图形辨识度不高”等问题,这与我们的改版想法不谋而合。

明确方向

基于用户反馈的问题,以及对产品的理解,我们明确了此次改版的方向和目的:

  • 提高图标辨识度,帮助用户更加直观的认识产品和功能
  • 用色上更加大胆,使产品充满活力和吸引力
  • 努力与大众App风格拉开差距,保持独特性

初期风格尝试

设计初期,我们进行了众多不同风格的尝试,虽然略显不成熟,但也为最终的成品提供了很多灵感:

风格确定

经过不断的风格尝试和自我否定之后,我们终于确定了主icon的设计风格:

设计特点

基于58Logo的品牌色,将四种色彩元素运用到icon里,单个icon采用单一色系,这样保证整体性的同时又将每个icon进行突出。

方形的icon可以增加体量感,提升App的辨识度,同时使得整体性更强。

icon基本采用两层叠加的展现形式,深色层在底部,浅色层置于顶部且设置透明度,这样的透明度叠加效果,为每一个icon增加了呼吸感,提供了生命力。

设计过程

设计的过程遵循了以下六个设计点,分别是形象、造型、表达、风格、调整及配色。

形象:顾名思义,就是能够代表产品内容的意向,一个准确生动的形象,十分有助于icon的可识别性。比如用购物袋表达二手物品,用猫咪表达宠物等等。

造型:造型是icon设计的筋骨,就好像一个人是健康的还是有缺陷的。一个icon有没有美感很大程度就取决于造型是否优美和谐。icon造型以方形为主,统一圆角尺寸,造型尽量做到细致考究。

表达:在表达定义的时候,首先要符合一般使用的行为习惯,UI本身的意义就在于附加到“功能”上的一个表现层,具备最直接的操作和交互的功能。

风格:彩,方,透。

调整:图标设计完成之后要进行细节的调整。

配色:配色采用的是58Logo的四种配色,在明度和纯度上加以调整,使各个图标搭配起来更加和谐。

大类页icon

主icon视觉风格确认了,接下来就是把这套设计语言推行到大类页的icon中来。这时,我们把握的原则是icon在体量感上要低于首页的主icon,做出区分度的同时,要做好大体的统一。

设计特点

色彩纯度明度较主icon均作出调整,降低量级。

方形的icon可以增加体量感和整体性。

保留叠加效果,但去掉了透明度的变化。

通过新旧版本的对比可以更直观的发现,新版的icon彩色的搭配更加引人注目,造型上也更加考究。

小工具icon

在接下来就是小工具icon的设计,这类的icon是整个app中第三层级的icon,所以在视觉上需要与主icon做明显的区分,以拉开主次。

设计特点

  • 线

线性图标,量级继续降低。

方形icon统一。

单色运用。

总结

每一次图标设计都是一次挑战,要表意明确更要注重美感,风格上还要尽量独树一帜。统一性,差异性,识别性,趣味性,缺一不可。设计的过程也是一个不断挖坑和填坑的过程,不经过反复的思考和打磨,呈现出来的效果就不会理想。

不过这一切的折磨也好,挑战也好,在最终成型的那一刻都变得微不足道了。呈现出最佳的视觉效果和体验感受才是最重要的。

毕竟,每一个icon都是从设计师手上跳出的精灵。

欢迎关注58UXD 的公众号:

「最近有哪些值得关注的改版?」

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/58-app-icon-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里