我们只做互联网+的高阶培训 拥有好作品才会拥有好工作 咨询热线:13671165726
中文 | English

IOS 10人机界面指南(四)图像

承辉学院2016-09-28

    ios手机系统,它的交互功能舒适我们已经说过了,今天我们来了解下它的界面图像设计,像它的图标都有一个什么设计标准么?

   5. 图像(Graphics)

   5.1 应用图标(App Icon)

   每个app都需要一个精美、令人印象深刻的图标,能在苹果商店和主屏幕夺人眼球。轻瞥图标的瞬间,是你的第一个机会来传达你的app的目的。你的图标也会在系统中经常出现,比如在设置里和在搜索结果里。

640.jpeg

   拥抱简洁。寻找个单一的元素能够表现你的app的精髓,然后通过一个简单但是独特的形状来表现这个元素。谨慎地添加细节部分。如果一个图标的内容或是形状过于复杂,那么细节就很难辨认了,尤其是在更小的尺寸时。

   提供一个单独的焦点。为图标设计一个单独的、集中的点,使它能快速吸引注意力并且明确地代表你的app。

   设计一个易于辨识的图标。用户不应通过分析图标才能弄清楚它代表什么。比如,邮件app的图标使用了一个信封,因为它普遍与邮件联系在一起。花点时间去设计一个好看迷人且精炼的图标,艺术性地传达你的app的目的。

   让背景简单并且避免使用透明度。确保你的图标是不透明的,并且不要让背景变得杂乱。使用一个简单的背景,这样它就不会过度影响周围的其它图标。你没有必要将整个图标填满内容。

   只有当logo全部或部分由文字组成时,才在图标使用文字。在主屏幕时,一个app的名称会在图标之下显示。不要包含没有意义的文字重复说明名称或是告诉用户该如何使用你的app,比如“Watch”或“Play”。如果你的设计包含了一些文字,那么请强调文字与你的app提供的实际内容相关。

   不要包含照片、屏幕截图或是界面元素。影像细节在很小的尺寸会难于辨认。屏幕截图对于一个app图标来说太复杂了,也一般不利于传达app的目的。在图标中的界面元素会令人误解并且困惑。

   不要复用Apple硬件产品的图形。Apple产品受版权保护,不能在你的图标或是图片中被二次创作。一般来说,避免复用设备的图形,因为硬件设计频繁地更新换代,这会导致你的图标看起来易于过时。

   不要在界面里到处放置app图标。在app里发现一个图标用于多种目的会让人困惑。反之,考虑使用图标的色彩方案。

   在不同的壁纸下测试你的图标。你不能预期用户会为他们的主屏幕选择什么样的壁纸,所以不要只是在一种深色和一种浅色的背景上测试你的图标。而是观察它在不同的照片上如何表现。在有动态背景的真实设备上试用它,因为背景会随着设备移动而改变视角。

   保证图标的四角是方的。系统会自动覆盖一个遮罩层让图标变成圆角。

   (1)App 图标大小

   每一个app都必须提供一大一小两个app图标。小图标会出现在主屏幕,并且当你的app被安装后会被系统使用。为不同的设备提供不同尺寸的小图标。确保你的app图标在所有支持的设备上都看起来很棒。

640-1.jpeg

大图标会被用在苹果商店。

640-2.jpeg

   让小图标与大图标类似。尽管大图标有着与小图标不同的用途,但它终究是你的app图标。大图标一般都和小的看起来差不多,但是可以稍微丰富一些,更有细节,因为不会有任何视觉效果叠加在它上面。

   (2)Spotlight和设置图标

   每个app都应提供一个小图标,在Spotlight搜索,如果关键词与app名称相符,iOS会展示该图标。同时,需要设置的app同样应该提供一个小图标用于在系统内置的设置app中展示。两个图标都应该清晰标识你的app——更理想地,它们应该与app图标相符。如果你不能提供这些图标,iOS就会压缩你的app主图标展示在上述场合中。

640.png

   不要对用于设置的图标叠加或是描边。iOS会自动为所有图标加上1个像素的描边,以确保它们很好地呈现在设置白色的背景上。

   Tips:

   如果你的app能创建自定义文档,你无需额外设计文档图标,因为iOS会利用你的app图标自动创建文档图标。

   5.2 自定义图标(Custom Icons)

   如果你的app含有不能用系统图标表示的任务或模式,又或是系统图标与你的APP风格不符,你可以设计你自己的图标。自定义图标通常被叫做模板,它不含有色彩信息并且通过mask来创建你在导航栏、标签栏、工具栏或是主屏幕快速操作视图看到的图标样式。

640-1.png

   创作简单、辨识度高的设计。太多的细节会让图标看起来粗糙且不具可读性。为一个大多数用户都能正确理解并且不会反感的设计而努力。

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

   使你的自定义图标与系统图标有所区分。你的图标不能轻易地与某个系统图标混淆。如果你想让你的图标看起来与iOS图标家族相似,请使用非常细的描边去绘制它。1pt的描边适用于大多数图标(在@2x分辨率下使用2px)。

   保持图标之间一致连贯。无论你只使用自定义图标或是混合使用自定义图标和系统图标,在app中的所有图标都应该在大小、细节程度、透视和描边粗细上保持一致。

   提供两种自定义标签栏图标的版本。为未选中和选中态提供两个图标。选中态的图标经常是未选中态图标的填充版本,但是某些设计会使用不同的方法。比如,苹果的原生app经常会将内部细节反过来填充,增粗或减细描边,以及把图标放在譬如圆形的形状内。

640-2.png

   不要在自定义标签栏图标内包含文本。如果你需要展示文本,请在标签下面直接加上标题并且适当调节位置。

   不要复用Apple硬件产品的图形。Apple产品受版权保护,不能在你的图标或是图片中被二次创作。一般来说,避免复用设备的图形,因为硬件设计频繁地更新换代,这会导致你的图标看起来易于过时。

   自定义图标尺寸:

640-3.png

   5.3 图片大小和分辨率(Image Size and Resolution)

   iOS通过坐标系在屏幕上放置内容。该坐标系以点为测量单位,这些点映射到显示器中以像素表示。在一个标准分辨率的屏幕中,1点(pt)(1英尺的72/1)等于一个像素(px)。高分辨率屏幕有更高的像素密度。因为在相同的物理空间内有了更多数量的总像素,所以平均每点有了更多的像素。因此,高分辨率的显示屏需要像素更多的图片。

640-4.png

   你必须为你的app支持的设备提供所有的高分辨率图像。依据设备的不同,将每张图像的固有像素乘以相应的比例系数,就可以得到该设备所适配的分辨率。一张标准分辨率的图像对应的比例系数为1.0,并被称为@1x图片。高分辨率的图像对应的比例系数为2.0或是3.0,并被称为@2x 和@3x图片。

   打个比方,假设你有一张标准分辨率(@1x)的图片,它的分辨率为100px*100px。那么,这张图片的@2x版本就是200px*200px,@3x版本就是300px*300px。

   为不同设备准备图片时请参照以下比例系数。

640-5.png

   5.4 启动画面(Launch Screen)

   启动画面出现在app刚开始启动时候。随后,启动画面会很快被app的首屏代替,让人感觉你的app是快速响应的。启动画面不是一个炫技的时机,它只是为了增强用户对你的app能够快速启动并且立即被使用的感受。每个app都应该提供一个启动画面。

640-6.png

   启动画面

640-3.jpeg

   首屏

   因为设备屏幕大小不同,启动画面的大小也有所差异。你可以以Xcode故事板或是一组静态(static)图片的形式为你的app所支持的设备提供启动画面。因为Xcode故事板灵活性高且易于适配,所以推荐采用该形式。你可以使用一个单独的故事板来管理你的所有启动画面。

   设计一个与你的app首屏几乎相似的启动画面。如果你的启动画面包含了与首屏看起来不同的元素,那么用户会在启动画面过渡至app首屏时经历一次不愉快的跳转体验。

   避免在启动画面包含文本。因为启动画面是静态的(static),任何展示的本文都不能被定位。

   淡化启动。用户通常会在不同的app之间频繁切换,所以请设计一个启动画面,能够让app的启动体验不易被人察觉。

   不要打广告。启动画面不是一个宣传品牌的时机。不要设计一个类似开屏广告或是介绍窗口的登入体验。不要在启动画面包涵logo或是其它品牌元素,除非它们是你的app首屏的静态(static)元素。

   静态启动画面图片

   最好使用Xcode故事板制作启动画面,但必要时你也可以提供一组静态图片。根据设备创建不同尺寸的静态图片,并不要忘记包涵状态栏区域。

640-7.png

   部分ios设计标准就在这里了,下面还会贴出更多的设计标准,希望大家继续关注我们的设计资料。

承辉教务01
承辉教务02