文档详情

iOS 10 人机界面指南(四).docx

发布:2017-02-03约9.42千字共28页下载文档
文本预览下载声明
iOS 10 人机界面指南(四)5. 图像(Graphics)5.1 应用图标(App Icon)每个app都需要一个精美、令人印象深刻的图标,能在苹果商店和主屏幕夺人眼球。轻瞥图标的瞬间,是你的第一个机会来传达你的app的目的。你的图标也会在系统中经常出现,比如在设置里和在搜索结果里。拥抱简洁。寻找个单一的元素能够表现你的app的精髓,然后通过一个简单但是独特的形状来表现这个元素。谨慎地添加细节部分。如果一个图标的内容或是形状过于复杂,那么细节就很难辨认了,尤其是在更小的尺寸时。提供一个单独的焦点。为图标设计一个单独的、集中的点,使它能快速吸引注意力并且明确地代表你的app。设计一个易于辨识的图标。用户不应通过分析图标才能弄清楚它代表什么。比如,邮件app的图标使用了一个信封,因为它普遍与邮件联系在一起。花点时间去设计一个好看迷人且精炼的图标,艺术性地传达你的app的目的。让背景简单并且避免使用透明度。确保你的图标是不透明的,并且不要让背景变得杂乱。使用一个简单的背景,这样它就不会过度影响周围的其它图标。你没有必要将整个图标填满内容。只有当logo全部或部分由文字组成时,才在图标使用文字。在主屏幕时,一个app的名称会在图标之下显示。不要包含没有意义的文字重复说明名称或是告诉用户该如何使用你的app,比如“Watch”或“Play”。如果你的设计包含了一些文字,那么请强调文字与你的app提供的实际内容相关。不要包含照片、屏幕截图或是界面元素。影像细节在很小的尺寸会难于辨认。屏幕截图对于一个app图标来说太复杂了,也一般不利于传达app的目的。在图标中的界面元素会令人误解并且困惑。不要复用Apple硬件产品的图形。Apple产品受版权保护,不能在你的图标或是图片中被二次创作。一般来说,避免复用设备的图形,因为硬件设计频繁地更新换代,这会导致你的图标看起来易于过时。不要在界面里到处放置app图标。在app里发现一个图标用于多种目的会让人困惑。反之,考虑使用图标的色彩方案。请参阅Color。在不同的壁纸下测试你的图标。你不能预期用户会为他们的主屏幕选择什么样的壁纸,所以不要只是在一种深色和一种浅色的背景上测试你的图标。而是观察它在不同的照片上如何表现。在有动态背景的真实设备上试用它,因为背景会随着设备移动而改变视角。保证图标的四角是方的。系统会自动覆盖一个遮罩层让图标变成圆角。(1)App 图标大小每一个app都必须提供一大一小两个app图标。小图标会出现在主屏幕,并且当你的app被安装后会被系统使用。为不同的设备提供不同尺寸的小图标。确保你的app图标在所有支持的设备上都看起来很棒。大图标会被用在苹果商店。让小图标与大图标类似。尽管大图标有着与小图标不同的用途,但它终究是你的app图标。大图标一般都和小的看起来差不多,但是可以稍微丰富一些,更有细节,因为不会有任何视觉效果叠加在它上面。(2)Spotlight和设置图标每个app都应提供一个小图标,在Spotlight搜索,如果关键词与app名称相符,iOS会展示该图标。同时,需要设置的app同样应该提供一个小图标用于在系统内置的设置app中展示。两个图标都应该清晰标识你的app——更理想地,它们应该与app图标相符。如果你不能提供这些图标,iOS就会压缩你的app主图标展示在上述场合中。不要对用于设置的图标叠加或是描边。iOS会自动为所有图标加上1个像素的描边,以确保它们很好地呈现在设置白色的背景上。Tips:如果你的app能创建自定义文档,你无需额外设计文档图标,因为iOS会利用你的app图标自动创建文档图标。5.2 自定义图标(Custom Icons)如果你的app含有不能用系统图标表示的任务或模式,又或是系统图标与你的APP风格不符,你可以设计你自己的图标。自定义图标通常被叫做模板,它不含有色彩信息并且通过mask来创建你在导航栏、标签栏、工具栏或是主屏幕快速操作视图看到的图标样式。创作简单、辨识度高的设计。太多的细节会让图标看起来粗糙且不具可读性。为一个大多数用户都能正确理解并且不会反感的设计而努力。设计一个纯色并带有透明度的、无锯齿、无阴影的图标。iOS会去除所有的色彩信息,所以没必要使用多于一种的填充颜色。允许用透明度来定义图标的形状。使你的自定义图标与系统图标有所区分。你的图标不能轻易地与某个系统图标混淆。如果你想让你的图标看起来与iOS图标家族相似,请使用非常细的描边去绘制它。1pt的描边适用于大多数图标(在@2x分辨率下使用2px)。保持图标之间一致连贯。无论你只使用自定义图标或是混合使用自定义图标和系统图标,在app中的所有图标都应该在大小、细节程度、透视和描边粗细上保持一致。提供两种自定义标签栏图标的版本。为未选中和选中态提供两个图标。选中态的图标经常是
显示全部
相似文档