开发者社区> 爱原型设计> 正文

从iOS 11看怎样设计APP图标

简介: 苹果WWDC2017开发者大会已经尘埃落定,除了新产品的发布,iOS 11也正式亮相。新系统中,地图、App Store、时钟、相机、联系人等等原生应用都换了新的图标。
+关注继续查看

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

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

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


img_d0a5302808c0cef4948e8891ce31176b.png

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

1.图标是什么?

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

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

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

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

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

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

3.如何设计图标

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

可识别性

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


img_adcc23ae371dd3acf9c3f52a7ee9b0db.png

视觉统一

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

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


img_36958bc00f47042680e354be292dc0e9.png

差异性

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


img_75d95386a8dd8485ebe359a10ee8e9c9.png

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

4.常用图标资源网站

Other icons

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


img_04d1199ab51d4e41bfc1061e181143ce.png

Icons8

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


img_81dc4b778c9264b21da378146178cad7.png

Flat Icon

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


img_34575e881c1ee681ff1b977308969c7f.jpe

Mockplus

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


img_e76e70de39709847f968dc44db0ffb5c.png

总结

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
iOS上架App Store详解(图文)
APP专用密码app-specific password是专门用于上传ipa文件的一种密码,是一种苹果的安全机制! 现在苹果开发者账号开启了双重认证,提交ipa文件时候都需要这个密码!
65 0
Application Loader及Transporter App上传ipa外、可以在Windows上架iOS APP工具
随着xcode的更新,苹果公司已经不直接提供Application Loader这个工具上传IPA了,导致上传ipa比较难搞了。 这里分享介绍一个可以在Windows、跨平台申请iOS证书上传ipa的工具Appuploader,方面跨平台开发没有苹果电脑,或者还不熟悉iOS上架流程的开发者使用。 双重验证码登录,安全放心,已帮助上万开发者提交苹果APP!
19 0
ios app安装到iphone手机的方法
ios app安装到iphone有三种不同的方法,各种方法的使用场景是不同的,你可以根据不同的场景来使用其中一种方法。
65 0
一步一腳印的 iOS App 上架和更新流程
APP Uploader APP开发助手-iOS APP上架到App Store的辅助工具,解决iOS APP上架繁琐费时的情况,帮助跨平台APP开发者上架苹果应用,在没有配置Mac苹果机的情况,实现iOS证书申请,创建iOS开发者证书、iOS发布证书等各类证书,iOS开发者在Windows、Linux或Mac系统中上传IPA到App Store,简化iOS APP上架流程!在Windows pc中轻松快速上架你的APP。
50 0
如何增加 iOS APP 虚拟地址空间及内存上限?XNU 内核源码解读
1. 引言 最近一段时间在做钉钉 iOS 内存专项治理,解决内存不足时的 jetsam 事件及 malloc 的异常崩溃。在进程创建时系统会为每个 app 设定内存最大使用上限,内核会维护一个内存阈值优先级列表,当设备内存不足时低优先级的 app 会首先被内核中止进程。在阅读 XNU 内核源码过程中我们发现提供系统了两种能力可以扩展 App 的虚拟地址空间(com.apple.developer.kernel.extended-virtual-addressing)和增加内存使用上限(com.apple.developer.kernel.increased-memory-limit)。
136 0
iOS开发:下架App的步骤
首先登陆你的 iTunes Connect
250 0
《一步步了解iOS APP上架流程,让你的APP顺利进入App Store的大门》
随着Apple Store越来越成熟,以及越来越多的开发者和公司希望在该平台上投放自己的产品,iOS APP上架成为许多开发者和公司普遍关注的话题。但是,由于苹果App Store的审核政策日益严格,大多数开发者和公司都不太清楚iOS APP上架的具体流程。今天,我们将为您介绍iOS APP上架的具体流程,希望可以帮助您顺利的完成iOS APP的上架。
82 0
iOS APP上架流程(详细)
Appuploader可以辅助在Windows、linux或mac系统直接申请iOS证书p12,及上传ipa到App Store,最方便在Windows开发上架没有苹果Mac电脑的开发者!配合本教程使用,可以快速掌握如何真机测试及上架!
94 0
iOS App廋身体积压缩之字体图标使用
iOS App廋身体积压缩之字体图标使用
35 0
+关注
爱原型设计
一名PM,分享个人与设计(UI/UX等)相关的经验与教程。
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
移动App持续交付之路
立即下载
移动App研发加速—跨平台解决方案
立即下载
云原生时代下的App开发
立即下载
相关实验场景
更多