苹果WWDC2017开发者大会已经尘埃落定,除了新产品的发布,iOS 11也正式亮相。新系统中,地图、App Store、时钟、相机、联系人等等原生应用都换了新的图标。此次图标的变化势必也会激发下一个图标设计的潮流,如何设计图标又将成为一个新的热门话题。

最新版的iOS 11,相比于iOS 10,新系统在外观上的变化并不明显,已经没有几年前苹果从"拟物设计"到"扁平设计"的巨大视觉冲击感,但在图标设计上做了很多细节修改。比如地图图标增加了象征Apple Park的弧形道路、相机去掉了上下两条水平线,变动都不大但也一眼可以察觉。

在iOS历来的图标演变过程中,许多看似不明显的变化实际潜移默化中引导着图标设计风格和设计方法的演变。自iOS7开始,苹果图标设计采用扁平化风格并延续至今。扁平化风格依旧是主流设计,那么如何设计一个好看、优雅的图标呢?

在设计或者绘制图标之前,首先要搞清楚图标到底是什么,为什么要画图标等等。

1.图标是什么?

图标是具有指代意义或者象征某种特殊含义的图形,在不同场景下图标的表达含义也会有不同。当今的图标风格大致可分为拟物化和扁平化,从iOS 7开始,一系列炫目的界面和简化的app图标设计出现。扁平化设计快速,简单,直接的信息表达更能迎合这个时代。而怎样去判断它是否是一个好的图标,应至少具有三个特征:

指代性:象征具体某个事物或含义。

识别性:因为有了指代性,图标本身应具有一定的识别性和辨识度,避免误读、抽象主义等。

审美性:一个优秀的图标,在视觉上也应有良好的表现。

2.图标设计的意义是什么?

苹果用户体验设计师MikeStern解释了UI和应用图标的重要性:用户并不会根据你使用了多少技术,或是整合了多少API,或是你使用的代码有多厉害而去对应用做出评价。而是你的应用能让为做什么,给他们带来什么感受。用户期待你的应用能为他们带来直观的、美妙的甚至不可思议的体验。这一点,足以说明图标设计在整体软件应用中的重要性。

3.如何设计图标

成熟的视觉感知更有利于信息的快速传播,图标是否设计得足够精美和友好,将直接影响到用户对软件应用的判断。很大程度上来说,一个好的产品应该具有一个好的应用图标,而一个好的应用图标应该清晰地传递出产品的内涵,能让用户体验由外到内都和平统一。因此,设计师在设计应用图标时需注意以下三大原则。

可识别性

识别性是产品图标的基本,它造就了图标的唯一性。一个图标是否从根本上起作用,取决于用户是否可以轻易的理解到这个图标的含义。为了使图标更加便于理解,很多设计师选择在设计中使用黑白色。因为颜色会干扰用户的理解力,界面中颜色越多,用户寻找起来时间成本越高。

视觉统一

单个图标的构成元素能运用到整套图标中,就是我们说的视觉的一致性。审美一致性是设计元素的集合,或是设计中使其成为一个整体所贯穿使用的手法。视觉统一包括:整体风格的统一,图标大小的控制,造型的轮廓粗细的统一,颜色色调与调和的统一。

在这套图标设计中,为了让整体视觉达到统一的效果,所有的容器的线条和配色都使用了同样的风格,酒杯中的小气泡让图标显得活泼有趣。

差异性

在App Store中搜索一款应用,展示出的应用图标大都大同小异,用户在众多孪生图标兄弟姐妹中也难以取舍。而设计师在图标设计中要尽量放大图标之间的差异性,减弱图标之间的相似性,突出产品的独特之处。

合格的设计师不仅仅需要掌握深厚的理论知识,对必备设计工具如PS,Al, Illustrator等等的掌握也是很重要的。具体在每一个工具上的图标设计流程就不一一细讲了。再给大家介绍一些图标资源的网站。

4.常用图标资源网站

Other icons

Other Icons拥有很多图标设计资源,这些不同的图标都是由设计师自己设计并上传的,有些需要付费有些则是免费的,丰富的简笔画图标不仅可以使用还便于临摹,同时它还拥有许多Photoshop插件。

Icons8

Icos8是一个提供免费iOS、Windows、Android的平面化设计图案为主的搜索引擎,目前提供近4万个素材资源,数量非常丰富,同时网站也提供各种格式,各种尺寸和配色,让使用者也能自定义制作。

Flat Icon

Flat Icon有详细而又全面的图标分类,并且还为用户罗列出了热门图标,同时您也可以查看每一位作者的图标设计。也就是说,用户可以根据图标分类、作者以及网站打包的图标来找到自己需要的并下载。

Mockplus

你可能会感到惊讶,为什么Mockplus在这里?不必惊讶,Mockplus的用户都知道,它提供了2600个矢量图标和400个平面图标,免去了设计师在创作过程中四处寻找、下载图标的步骤。 直接在图标库里搜索、点击就可以将图标应用到设计中。对设计师来说,它不仅仅是原型设计工具,也是一个图标资源库,非常方便。

总结

苹果新系统图标的变化将如何影响设计界的风向,还不可预测,但对设计师们来说,最主要的还是打好基础。多掌握如何设计好图标的理论基础和如何使用设计工具,多积累一些图标素材或者掌握一些像Mockplus这样自带图标库的设计工具,对自己的设计水平有更高层次的提升才是最重要的。

从iOS 11看怎样设计APP图标的更多相关文章

  1. iOS 10.3+ 动态修改 App 图标

    支持系统: iOS 10.3+ tvOS 10.2+ Apple 官方文档 官方 API: @interface UIApplication (UIAlternateApplicationIcons) ...

  2. APP图标设计小技巧:在iOS上快速获得APP图标的真实预览图

    严格来说,这并不是一篇关于前端开发的文章,因为涉及到的知识非常浅.这只是一个向设计狮们分享的小经验,只是其中用到了一些前端内容. 最近接了个私活,了解到一个初创公司正在高价悬赏Logo(主要用于APP ...

  3. 一起来给iOS 11找bug: 苹果还是乔布斯时代的细节控吗?

    众所周知,前几天苹果在位于苹果公园的Steve Jobs剧院召开了一年一度的新品发布会,正式揭幕了全屏的iPhoneX, 随后又把iOS 11推送给了测试员(Beta Tester)(正式版将于几周后 ...

  4. 从iOS 11 UI Kit中谈谈iOS 11的新变化

    北京时间9月20日凌晨1点,iOS 11终于迎来了正式版的推送,相信各位小伙伴已经在第一时间进行了升级.iOS 11毫无疑问是一次大规模的系统更新,UI.系统内核.锁屏等多方面都进行了不同程度的改进. ...

  5. 《iOS 11 安全区域适配总结》

    本文来自于腾讯Bugly公众号(weixinBugly),作者:sonialiu,未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/W1_0VrchCO50owhJ ...

  6. iOS 11 APP 设计中的几个 UI 设计细节

    Apple 官网看了 iOS 11 的介绍,发现有不少的更新哦,比如控制中心.Siri.Live Photo 等等,总体来说都有很多不错的体验,不过本文不介绍功能,只说视觉界面. 在 iOS 11 的 ...

  7. 『创意欣赏』20款精致的 iOS7 APP 图标设计

    这篇文章给大家分享20款精致的 iOS7 移动应用程序图标,遵循图形设计的现代潮流,所有图标都非常了不起,给人惊喜.通过学习这些移动应用程序图标,设计人员可以提高他们的创作,使移动用户界面看起来更有趣 ...

  8. 你可能需要为你的 APP 适配 iOS 11

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/AZFrqL9dnlgA6Vt2sVhxIw 作者:s ...

  9. 【转】【iOS】动态更换App图标

    原文网址:http://www.cocoachina.com/ios/20170619/19557.html 前言 动态更换App图标这件事,在用户里总是存在需求的:有些用户喜欢“美化”自己的手机.至 ...

随机推荐

  1. HTML第一课——基础知识普及【1】

    请关注公众号:自动化测试实战 HTML概念及编写规范 html叫做超本文标记语言,注意它知识标记语言,不是编程语言. 编写规范: 由标记(html, div, p, h1等)组成 标记成对出现(< ...

  2. 重新学习之spring第四个程序,整合struts2+hibernate+spring

    第一步:导入三大框架的jar包(struts2.3.16.1+hibernate3.2+spring3.2.4) 第二步:编写web.xml 和struts.xml和applicationContex ...

  3. linuxkit 基本试用

    安装 linux go get -u github.com/linuxkit/linuxkit/src/cmd/linuxkit mac brew tap linuxkit/linuxkit brew ...

  4. html css 怎么使img和a标签在一个行内元素中间对齐

    答案是:#box ul.games li img{vertical-align: middle;} 这行很重要哦. <div id="box"> <div cla ...

  5. clamav完整查杀linux病毒实战(转)

    开篇前言 Linux服务器一直给我们的印象是安全.稳定.可靠,性能卓越.由于一来Linux本身的安全机制,Linux上的病毒.木马较少,二则由于宣称Linux是最安全的操作系统,导致很多人对Linux ...

  6. Hive之 数据存储

    首先,Hive 没有专门的数据存储格式,也没有为数据建立索引,用户可以非常自由的组织 Hive 中的表,只需要在创建表的时候告诉 Hive 数据中的列分隔符和行分隔符,Hive 就可以解析数据. 其次 ...

  7. [C++ Primer] 第2章: 变量

    初始化与赋值 当对象在创建时获得了一个特定的值, 我们就说这个对象被初始化了. 在使用=号时, 如果创建了新的对象, 则为初始化而非赋值. 初始化不是赋值, 初始化的含义是创建变量时赋予其一个初始值, ...

  8. unity里面的gameobject和transform的关系

    一切都是物体(gameobject),而transform是物体的一个基本属性类,包含位置,旋转,缩放,三个基本属性,两者之间可以互相转换 查找物体,建议用transform,GameObject无法 ...

  9. Bootstrap-Plugin:折叠(Collapse)插件

    ylbtech-Bootstrap-Plugin:折叠(Collapse)插件 1.返回顶部 1. Bootstrap 折叠(Collapse)插件 折叠(Collapse)插件可以很容易地让页面区域 ...

  10. pythonNet08

    线程通信 通信方法:多个线程共用进程空间,所以进程的全局变量对进程内线程均可见.线程往往使用全局变量进行通信 注意事项:线程间使用全局变量进行通信,全局变量为共享资源,往往需要同步互斥机制 线程的同步 ...