IOS 10和Android 7,设计师看什么?(二)

IOS 10和Android 7,设计师看什么?(二)_第1张图片
*本文基于ios 10&Android 7官方规范进行解读和写作,理解不恰当之处,欢迎指正。

本篇主要分析IOS 10的UI设计方法和细节,具体到布局,启动画面,用色色值,字体使用,图标画法,控件像素大小等。熟悉这些,能够帮助我们在设计时做到心中有数,完善自己的设计。上一篇主要对ios 10和Android 7的整体设计理念,单位换算,切图输出与一稿适配进行了梳理。不知道有没有和我一样对于数字总是记不住的同学呢?你是怎么记忆这些内容的?

界面基本元素

IOS应用使用了来自UIKit的部件,这是一个定义了基本界面元素的编程框架。由UIKit提供的界面元素可以分为以下三种:

1. 栏:告知用户现在在应用的哪里,提供导航,而且还可能包含按钮或者其它用来触发功能和交流信息的元素。

2. 视图:包含用户在应用内最关注的信息,例如文本、图形、动画和交互元素。视图允例如滚动、插入、删除和排列之类的行为。

3. 控件:触发功能和传递信息。控件包括按钮、开关、输入框和进度指示器。

配色

IOS 关于app的配色,建议如下:

IOS 10和Android 7,设计师看什么?(二)_第2张图片

1.颜色能够暗示可交互性、增加活力以及提供视觉的连续性。

2.要考虑颜色在不同环境下的效果比如:浅色背景和深色背景,半透明元素之下和之上(比如工具栏),光线的不同等等,确保选择的颜色在大多数的使用场景下提供好的视觉体验。

IOS 10和Android 7,设计师看什么?(二)_第3张图片
IOS 10和Android 7,设计师看什么?(二)_第4张图片

3.统一使用一种关键色来暗示交互性。例如在Note中,可交互的元素是黄色的。在Calendar中,可交互的元素是红色的。避免给可交互和不可交互的元素使用相同的颜色。不然用户就很难知道到底哪里是可点击的。

IOS 10和Android 7,设计师看什么?(二)_第5张图片

4.选择与你的app logo相符的颜色是一个传达品牌的好办法。

5.关注色盲用户以及不同文化对颜色的认知差异。不同的用户看见的颜色是不一样的。比如,很多色盲用户很难分辨红色和绿色(以及任何灰色),或是蓝色和橘色。再比如,在某些文化里,红色用来表示危险;但在另一些文化里,红色又有着积极的含义。

6.使用足够的颜色对比度。在app中,过低的对比度会让内容难以阅读。比如,图标和文本可能会和背景相融合。对比度至少达到4.5:1,如果是7:1更好,因为它符合更加严格的辅助功能标准。

字体

iOS的系统字体是San Francisco。中文字体有苹方PingFang和黑体Heiti。

该字体有两个变种:SF UI Text (用于19p及以下大小的文本)和SF UI Display(用于20p及以上大小的文本)。当你在标签和其它界面元素应用了系统字体时,iOS系统会根据字号自动选择最合适的字体样式,称为动态字体,动态字体通过让阅读者选择喜欢字体大小。它还会根据需要自动改变字体,以满足辅助性功能的设置。注意用户选择大的字体只是想让自己关心的内容更易于阅读,而不是希望屏幕上的每一个文字都变得很大。

图标

IOS对于图标的建议可以看成是一种通用的设计规范,而且非常详细,我精简提炼它的描述,小伙伴们可以对着参考下自家APP图标是不是做着做着跑偏了呢?

对于应用图标,IOS的建议是:

1.拥抱简洁。寻找表现你的app精髓的元素,通过一个简单独特的形状来表现。内容不要过于复杂,那样特别是小尺寸时细节就很难辨认了。

2.易于辨识。不要让用户思考很久才知道你的图标什么意思。比如,邮件app的图标使用了一个信封,很直观。

3.避免透明的图标,并且不要让背景变得杂乱,这样它就不会过度影响周围的其它图标。

4.谨慎在图标里使用文字,除非logo全部或部分由文字组成,或者这个文字和APP内容有直接联系。也不要包含照片、屏幕截图或是界面元素。这对于一个app图标来说太复杂了,会令人迷惑。

5.在不同的壁纸下测试你的图标。你不知道用户会用什么样的壁纸,多测试。

6.图标的四角是方的就行,系统会自动让图标变成圆角。

应用图标尺寸:

IOS 10和Android 7,设计师看什么?(二)_第6张图片

对于自定义的其他的图标,IOS的建议是:

1.首要依然是创作简单、辨识度高的设计。

2.设计一个纯色并带有透明度的、无锯齿、无阴影的图标。iOS会去除所有的色彩信息,所以没必要使用多于一种的填充颜色。

3.自定义图标不要与某个系统图标混淆。如果想设计iOS图标风格,可以使用1pt的描边(在@2x用2px)。

4.保持一致性。app中的所有图标都应该在大小、细节程度、透视和描边粗细上保持一致。

5.提供为未选中和选中态提供两个图标。

6.不要在图标内包含文本。如果你需要展示文本,在标签下面直接加。

自定义图标尺寸:

IOS 10和Android 7,设计师看什么?(二)_第7张图片

启动画面

1.启动画面不是一个炫技的时机,它只是为了让人感觉你的app是快速响应的。

2.不要打广告。

3.不要在启动画面包涵logo或是其它品牌元素,除非它们是你的app首屏的静态(static)元素。

关于以上几点,看看我们常用的APP是不是很多选择性的无视了呢?反而默认为品牌宣传或者广告呢,也许这是从传统媒体时代留下的习惯。

UI控件规格

*基于@1x,虽然sketch是有模板的,这里方便速查。我认为所谓UI规范,并不是任何一个地方都照搬,分毫不差,这样不仅效率低下也失去了创新和设计的意义,但是基本的框架要是合乎规范的。

IOS 10和Android 7,设计师看什么?(二)_第8张图片


如果你喜欢我的分享记得给我留言或者点赞哦,

也可以把你的问题写在下面的评论区。

更多相关的文章记得去我的主页查阅哦。

你可能感兴趣的:(IOS 10和Android 7,设计师看什么?(二))