本篇主要分析IOS 10的UI设计方法和细节,具体到布局,启动画面,用色色值,字体使用,图标画法,控件像素大小等。熟悉这些,能够帮助我们在设计时做到心中有数,完善自己的设计。上一篇主要对ios 10和Android 7的整体设计理念,单位换算,切图输出与一稿适配进行了梳理。不知道有没有和我一样对于数字总是记不住的同学呢?你是怎么记忆这些内容的?
界面基本元素
IOS应用使用了来自UIKit的部件,这是一个定义了基本界面元素的编程框架。由UIKit提供的界面元素可以分为以下三种:
1. 栏:告知用户现在在应用的哪里,提供导航,而且还可能包含按钮或者其它用来触发功能和交流信息的元素。
2. 视图:包含用户在应用内最关注的信息,例如文本、图形、动画和交互元素。视图允例如滚动、插入、删除和排列之类的行为。
3. 控件:触发功能和传递信息。控件包括按钮、开关、输入框和进度指示器。
配色
IOS 关于app的配色,建议如下:
1.颜色能够暗示可交互性、增加活力以及提供视觉的连续性。
2.要考虑颜色在不同环境下的效果比如:浅色背景和深色背景,半透明元素之下和之上(比如工具栏),光线的不同等等,确保选择的颜色在大多数的使用场景下提供好的视觉体验。
3.统一使用一种关键色来暗示交互性。例如在Note中,可交互的元素是黄色的。在Calendar中,可交互的元素是红色的。避免给可交互和不可交互的元素使用相同的颜色。不然用户就很难知道到底哪里是可点击的。
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的建议是:
1.首要依然是创作简单、辨识度高的设计。
2.设计一个纯色并带有透明度的、无锯齿、无阴影的图标。iOS会去除所有的色彩信息,所以没必要使用多于一种的填充颜色。
3.自定义图标不要与某个系统图标混淆。如果想设计iOS图标风格,可以使用1pt的描边(在@2x用2px)。
4.保持一致性。app中的所有图标都应该在大小、细节程度、透视和描边粗细上保持一致。
5.提供为未选中和选中态提供两个图标。
6.不要在图标内包含文本。如果你需要展示文本,在标签下面直接加。
自定义图标尺寸:
启动画面
1.启动画面不是一个炫技的时机,它只是为了让人感觉你的app是快速响应的。
2.不要打广告。
3.不要在启动画面包涵logo或是其它品牌元素,除非它们是你的app首屏的静态(static)元素。
关于以上几点,看看我们常用的APP是不是很多选择性的无视了呢?反而默认为品牌宣传或者广告呢,也许这是从传统媒体时代留下的习惯。
UI控件规格
*基于@1x,虽然sketch是有模板的,这里方便速查。我认为所谓UI规范,并不是任何一个地方都照搬,分毫不差,这样不仅效率低下也失去了创新和设计的意义,但是基本的框架要是合乎规范的。
如果你喜欢我的分享记得给我留言或者点赞哦,
也可以把你的问题写在下面的评论区。
更多相关的文章记得去我的主页查阅哦。