交互学堂
专注分享专业知识

你热衷艺术,可你知道 2017 年设计的风向标吗?

阿西UED阅读(1466)

设计在生活中无处不在,而设计的趋势也随着时间的推移不断受到来自媒体、技术、时尚等方面的影响。

一个好的设计被认可的周期也许很长,但一个设计趋势流行的生命周期大多不会超过 1-2 年。下面这篇文章整理自著名设计网站 Behance,原标题《2017 Design Trends Guide》(2017 设计趋势指南),原作者:Loredana Papp-Dinea,共同作者:Mihai Baldean。

如果你热爱设计,或者你恰巧是一名设计师,希望这篇关于 2017 年的设计趋势会对你有所帮助或启发。

半扁平设计

在过去几年,扁平化几乎主宰了网页设计,但新的一年这类设计会走向更多维度并往空间上发展。从增加轻投影开始,逐渐走向“半扁平”。

Project: Listener’s Playlist

Author: Anzi .

更多 3D

3D 正在引领着潮流,我们很快就会看到其对设计领域的影响,再加上 VR/AR 即将带来的改变,或许这一切会来得比想象中更快。

Project: LUV.IT

Author:  AARON MARTINEZ

Project: Air Max ’17

Author: Berd -; Lukas Vojir; mark haley; Oliver Harris; Jeff Thomson

Project: Better You Brand

Author: Craig Minchington; Satellite Office; Brand Nu

Project: Open Annual Awards

Author: TAVO

动效

动画被越来越多的运用在 web 设计上,它可能是很多种形式。在过去的一年,动画也绝对是 web 设计圈的流行趋势,当你抉择是否要用它时,不要犹豫。

Project: Nickelodeon Kids Pick The President

Author: JeanPierre Le Roux

Project: ZH OURO- Rio 2016

Author: Leo Natsume; Guilherme Maron

几何形状、线条与图案

只是加入一些形状与平面图形,就会让你的网页看起来更生动且富有趣味。

Project: Pfizer – Active and 50+ for The New York Times

Author: justyna stasik; Vladimir Marchukov

Project: DRAP.agency Branding; Mireldy Design; Filip Gjurin

更大胆的用色

在过去的 2016 年随着一些品牌标志的更新或是大品牌服饰系列的设计,我们发现单纯的两色或是三色搭配已不再能满足设计者的要求,或许在新的一年,更大胆地使用色彩会是一个不错的选择。

Project: Edris – Logo Designed by MiLo

Author: Loredana Papp-Dinea; Mihai Baldean; Milo Themes

Project: Rendered — Responsive Demo Website for Adobe; Serge Vasil

个性化的图形与插画

除了图片库里的那些图片,你还可以选择一些自己定制的图形与插画,在给用户留下更深印象的同时,也能展现更多独特的视角。

Author: Margarita Petrianova

Author: Zhang Jing

活用视频

人们越来越需要高品质的视频来讲述一个好故事,而通过网站上的视频或是重复播放的片段,可以更好的吸引用户并使其保持新鲜感。

Project: Hillsong

Author: Ruslan Siiz

剪裁与几何

老牌而经典,这是永远不变的趋势。

Author: Aleksandr Maksimov

Author: Mingo Ideas Up

线条与图案

前者在现代商业中运用广泛,后者则是一个新趋势,通过独一无二的重复让作品更精彩。

Author: Sam Healy; Andrea Schlaffer; Jacek Janiczak

Author: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner

复古风与渐变

复古的风格从未过时,而你们应该也都知道 Instagram 更新的那个 logo 了。

Author: Роман Додонов; Mingo Ideas Up; Will Try Further

Author: Mingo Ideas Up

要么大、要么小

字体在越来越漂亮的同时也有着自己的变化,你会更多看到那些被撑得很大却又不失美感的文字。你也会看到那些即使很小,却依旧能通过图像与颜色的对比使得阅读并不吃力的小字。

Author: Alexander Laguta

Project:  Baugasm Series – Pack 4

Author: Vasjen Katro

Author: Slava Oleinik; Bahaa Samir; Witty Digital

Project:  Baugasm Series – Pack 4

Author: Vasjen Katro

本文原链接:http://dwz.cn/5mSQYV

原作者:Loredana Papp-Dinea|Mihai Baldean

IOS 10人机界面设计指南[中文版]

阿西UED阅读(24813)

随着iPhone7的发布,iOS10普及起来已经不远,所以iOS10的人机交互规范大家也需要学习起来了,分享的是迄今为止翻译得最全面的,iOS10人机界面设计指南[中文版],希望能帮到大家,enjoy!

1.1 设计原则(Design Principles)

作为一名移动应用设计师,意味你有机会发布一款具有杀伤力的产品能够登上苹果商店的榜首。为了实现这个目标,你的产品必须在质量和功能上达到高标准。

以下三大原则让iOS系统有别于其它平台:

清晰(Clarity):

纵观整个系统,任何尺寸的文字都清晰易读,图标精确易懂,恰当且微妙的修饰,聚焦于功能,一切设计由功能而驱动。留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。

遵从(Deference):

流畅的动效和清爽美观的界面有助于用户理解内容并与之交互,而不会干扰用户。当前内容占据整屏时,半透明和模糊处理能够暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化,从而突出内容。

深度(Depth):

清楚的视觉层和生动的动效表达了层次结构,赋予了活力,并有助于理解。

易于发现的且可触发的界面元素能提升体验愉悦感,让用户在成功触发相应功能或者获得更多内容的同时还能掌控当前位置的来龙去脉。当用户浏览内容时,流畅的过渡提供一种纵深感。

要想扩大影响力和涉及范围,在设计你的独特应用时,请熟记以下几点原则:

美学完整性(Aesthetic Integrity)

美学完整性代表了一款应用的视觉表象和交互行为与其功能整合的优良程度。例如,一款协助用户完成重要任务的应用应该使用不易察觉且不引人注目的图形、标准化控件和可预知的交互行为从而让用户保持专注。反之而言,一款沉浸式体验的应用(比如游戏),就需要吸引人的视觉表象,在鼓励用户探索的同时带来无穷的乐趣和刺激。

一致性(Consistency)

一款内部一致的应用能够贯彻相同的标准和规范:使用系统提供的界面元素、风格统一(众所周知)的图标、标准的字体样式和一致的措辞。应用所包含的特征和交互行为是符合用户心理预期的。

直接操作(Direct Manipulation)

对屏幕上的对象直接操作(而不是通过一堆控件)能够提升用户的参与度并有助于理解。直接操作指包括用户旋转设备或者使用手势控制屏幕上的对象。通过直接操作,他们的交互行为能够得到即时可视的反馈。

反馈(Feedback)

反馈认证交互行为,呈现结果,并通知用户。系统自带的iOS应用对每一个用户行为都提供了明确的反馈。可交互的元素被点击时会被临时高亮,进度指示器(progress indicator)显示了需要长时间运转的操作的进度,动效和声音加强了对行为结果的提示。

隐喻(Metaphors)

当一个应用的虚拟对象和行为与用户熟悉的体验相似时——无论这种体验是来源于现实生活或是数字世界,用户就能更快速地学会使这款应用。隐喻在iOS中能够起作用是因为用户与屏幕进行物理上的交互。他们通过将视图移出屏幕来显示下方的内容,他们拖曳(drag)和滑动(swipe)对象,他们拨动(toggle)开关,移动(move)滑块,滚动(scroll)数值选择器,他们甚至通过轻扫(flick)来翻阅书籍和杂志。

用户控制(User control)

在iOS内部,是用户——而不是应用——在控制。应用可以对一系列用户行为提供建议,或对可能造成严重后果的行为发出警告,但不应该替用户做决定。好的应用会在让用户主导和避免不想要的结果中找到平衡。为了让用户感觉到是他们在控制,应用应该使用熟悉且可预知的交互元素,让用户二次确定有破坏性的行为,并且让即使在运行中的操作也能够被轻易取消。

1.2 iOS 10 新特征介绍

在iOS 10,你可以创造前所未有的更强大的应用。当你浏览这些新改变并在思考他们将如何帮助你的应用时,请特别关注设计指南。

1473319387-7750-1473309660-5246-nw2016063044

搜索屏幕和主屏幕的窗口控件(widget)

Widget 提供即时且有用的信息,或是应用特有的一些无需打开应有就能使用的功能。在过去,用户在消息中心添加widgets当作快速入口。现在,用户在搜索屏幕添加widgets,用户可通过在主屏或是锁屏右滑进入搜索屏幕。你也可以在主屏通过3D Touch触发的某个应用的快捷操作菜单(quick action list)上方添加widget。Widget的设计和交互方式也改变了。请注意更新你现有的设计。

1473319390-6194-1473309659-8204-nw2016063043

与Messages的联动

应用可以通过执行一种出现在对话下方的messaging插件让用户与朋友分享来自该应用的内容。应用可以通过Message分享文字,图片,视频,贴纸,甚至可交互的内容,譬如信息内的游戏。

1473319388-2145-1473309659-5438-nw2016063042

与Siri的联动

应用能够与Siri联动,从而让用户使用声音来执行相应的应用操作,譬如打电话、发短信和开始锻炼。

1473319393-8908-1473309659-1846-nw2016063041

可拓展的通知栏

你可以通过拓展详情视图来强化你的通知栏,用户可以在未锁屏状态下通过3D Touch功能点击或是下滑你的通知来打开拓展视图。使用这种视图能够让用户快速浏览更多信息,并允许他们在不离开当前界面的情况下对该消息进行快速操作。

1.3 界面基本元素

大多数的iOS应用使用了来自UIKit的部件,这是一个定义了基本界面元素的编程框架。这个框架让各种应用在视觉上达到一致的同时还提供了高度的个性化。UIKit元素是灵活且常见的。它们是可适配的,让你能够设计一个在任何iOS设备上都看起来很棒的应用,而且能够在系统发布新版本的时候自动更新。由UIKit提供的界面元素可以分为以下三种:

栏:

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

视图:

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

控件:

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

为了进一步定义iOS界面,UIKit规定了你的应用能够采用的功能。通过这个框架,你的应用可以对触摸屏上的手势作出应答,还可以包含一些例如绘画、辅助和打印的功能。

iOS也和其他编程框架和技术紧密结合,譬如Apple Pay、HealthKit 和ResearcKit, 它帮助你设计出一个强大地惊人的应用。

2. 交互(Interaction)

2.1 3D 触摸(3D Touch)

  • 2.1.1 主屏幕交互(Home Screen Interaction)
  • 2.1.2 轻压(Peek)和重压(Pop)
  • 2.1.3 Live Photos

2.2 辅助功能(Accessibility)

2.3 音频(Audio)

2.4 身份验证(Authentication)

2.5 数据输入(Data Entry)

2.6 反馈(Feedback)

2.7 文件处理(File Handling)

2.8 启动初体验(First Launch Experience)

2.9 手势(Gestures)

2.10 加载(Loading)

2.11 模态(Modality)

2.12 导航(Navigation)

2.13 请求许可(Requesting Permission)

2.14 设置(Settings)

2.15 用辞(Terminology)

2.16 撤销和重做(Undo and Redo)

2.1 3D 触摸(3D Touch)

3D Touch 为触碰式交互增加了一个维度。在支持3D Touch 的设备上,用户通过对触摸屏施加不同的力度来实现更多的功能,譬如触发菜单、显示更多的内容或是播放动画。用户无需学习新的手势来使用3D Touch。当他们轻压屏幕并且获得应答的时候就能立即发现这一新的交互维度。

2.1.1 主屏幕交互(Home Screen Interaction)

在支持3D Touch的设备的主屏按压应用图标会触发相应的操作视图。该视图让你能够快速地执行常用的应用任务和预览有趣的信息,譬如日历应用,它能够提供创建新事件的快捷操作,同时显示日程表上的下一个事件。了解相关设计指导,请参阅Home Screen ActionWidgets

2.1.2 轻压(Peek)和重压(Pop)

轻压允许用户使用3D Touch在当前环境上预览一个临时视图内的对象,譬如一个页面、链接或者文件。要想在支持该功能的设备上实现预览,只需用手指对应用施加一点压力,而抬起手指就能退出预览。要想打开对象来浏览更多的内容,请更重地按压屏幕直到对象放大到填满屏幕。在一些轻压视图上,你可以通过上滑来显示相应的操作按钮。譬如,在Safari打开了某个链接的轻压视图时,你可以通过上滑展开相应的操作按钮——打开链接,添加至阅读列表和复制链接。

1473319391-5862-1473309774-3021-cy201607011

利用轻压视图提供实时的,内容丰富的预览

理想情况下,轻压视图为该项提供足够的信息以补充说明当前任务,或者帮助你决定是否完全地打开该项。例如,预览邮件(Mail)信息中的链接,从而决定是否在Safari浏览器中打开或者分享给朋友。轻压视图一般被利用于表单视图中,提供一个行项的详细信息,从而决定是否选择该项。

设计足够大的轻压视图

设计一个足够大的轻压视图从而保证手指不会遮挡到内容。确保轻压视图能够提供足够详细的信息,以便用户决定是否按地更重来完全地打开该项。

统一使用轻压和重压功能

如果你只在某些地方使用轻压和重压,而不在另一些地方使用,用户就不会知道到底哪里可以使用这个功能,而且可能会认为你的应用或是他们的设备出了问题。

允许每个轻压视图都能够被重压

虽然轻按视图能够提供给用户他们所需的大部分信息,但如果他们想离开当前任务并转移注意力至该项时,应该允许他们过渡到重压。

避免在轻压视图中呈现按钮式元素

如果用户抬起手指去点击类似按钮的元素,轻压就会消失。

1473319388-6307-1473309772-7374-cy201607012

不要让同一项具备轻压和编辑菜单(Edit menu)两个功能

当一个项目同时启用两个功能时,不但会让用户感到困惑,也会让系统难以判断用户目的。了解更多指导,请参阅Edit Menus

适当时提供操作按钮

不是每个一轻压都需要操作按钮,但这是一个为常用任务提供快捷操作的好方式。如果你的应用已经为项目提供了自定义的点击并长按(touch-and-hold)动作,那么最好在轻压里包含同样的操作。

避免为打开被轻压的项目提供操作按钮

用户一般都通过更重的按压来打开他们轻压的项目。所以,没有必要再提供一个明显的打开按钮。

不要让轻压成为唯一的执行项目操作的操作

并不是所有设备都支持轻压和重压,甚至有的用户会关闭3D触摸功能。你的应用为这些情况考虑其它触发项目操作的方式。譬如,你的应用可以将轻压的快捷操作映射到一个视图中,该视图会在点击和长按时出现。

2.1.3 Live Photos

应用可以通过支持Live Photos,并在照片中加入压感用来查看动态回忆。当你按压它们时,Live Photos死而复生,通过动作和声音再现拍照的前后时刻。了解相关设计指导,请参阅Live Photos

2.2 辅助功能(Accessibility)

iOS 提供了大量的辅助功能来帮助失明、失聪以及其他残疾群体。大部分以UIKit为基础的应用能够轻易地具有辅助性,让更多的用户来使用你的应用,因为你为所大众提供了平等的使用体验。

为图片、图标和界面元素提供可选择的文字标签

可选择的文字标签在屏幕上是不可见的,但是他们让VoiceOver能够通过声音描述屏幕上有什么,让失明用户能够轻易地使用导航。

相应辅助功能的偏好设置

如果你的应用使用UIKit来实现用户界面,文字、界面元素就会自动调整至相应辅助功能的偏好设置,譬如加粗并且更大的文字。你的应用也应当在适当的时候检查并相应辅助功能的偏好设置,譬如当减弱动态效果(reduce motion)的开关被打开时。采用自定义字体的应用应该力图和系统字体的辅助特性保持一致。

测试应用的辅助功能

除了文字和动态效果的变化,辅助功能选项还能改变对比度,反转颜色,降低透明度以及更多。为那些需要这些功能的用户启用设置并观察你的应用将会变成什么样并且如何运作。

包含隐藏式字幕和口述影像

隐藏式字母帮助失聪以及重听用户明白视频中的对话和其它音频内容。口述影像为视觉受损的用户提供了关键视频内容的口头解说。

了解更多信息,请查阅iOS AccessibiltyAccessibility Programming Guide for iOS

2.3 音频(Audio)

无论声音是你应用体验的要素或只是一个点缀,你都应该知道用户对声音有什么要求并且满足他们的期待。

用户通过音量键、静音键、耳机声控和屏幕上的音量调节滑块控制声音。非常多的第三方配件也包含声控功能。音频可以通过内部和外部的扬声器、耳机输出,甚至通过支持AirPlay或是蓝牙设备无线输出。

静音:用户将他们的设备调节至静音来避免被意外的声音(比如电话铃声和短信提示声)打扰。他们也想要关闭没有意义的声音,包括按键声、音效、游戏配乐以及其它音频反馈。当设备被设置成静音,只能出现被明确被打开的声音,比如媒体播放中的声音、闹铃和音频/视频信息。

音量:无论是使用物理的设备按键或是屏幕上的滑块,用户都希望系统的所有音量都能够被改变,包括音乐声和应用内的音效。但是铃声音量是唯一例外,它只能在没有任何声音播放的情况下被单独调节。

耳机:用户使用耳机来私密地听声音并且能够释放他们的双手。当用户插入耳机时,他们希望声音能够自动继续播放而不被打断。当拔掉耳机时,他们希望播放能够立即停止。

必要时自动调节不同层级的声音,但不是整体音量

为了达到更好的混合音效,你的应用可以单独调节不同层级音频间的相对音量。但是,最终的音量输出应该由系统音量决定。

恰当的时候允许音频重选路由(rerouting)

用户会经常想要选择一个不同的音频输出设备。比如,他们会想要通过客厅的立体音响、车载收音机或是苹果电视来听音乐。请支持这个功能除非你有令人信服的理由不这么做。

使用系统提供的音量视图来调节音量

音量视图(volume view)是最好的能提供调节音量的界面控件。这个视图是自定义的,包含一个音量调节滑块,甚至包含一个用来替音频输出重选路由的控件。了解实现方法,请参阅MPVolumeView Class Reference

短音和振动请使用系统声音服务

了解实现方法,请参阅System Sound Services Reference

如果声音对你的应用十分重要请设置音频类别

不同的音频类别允许声音被静音按钮静音、与其它声音混响、或是当你的应用在后台时播放。根据类别的含义和当前设备的音频播放情况来选择一个类别,然后将其分配给你音频对话(audio sessions)。比如,非必要情况下,请不要打断用户正在收听的来自其它应用的音乐。总的来说,尽量不要在你的应用运行时更改所属的音频类别,除非应用需要经常地录制然后播放音频。了解实现方法,请参阅Audio Session Programming Guide

在适当时候继续播放被干扰打断的音频

正在播放的音频有时会受来自其它应用的声音干扰。暂时性干扰(比如来电铃声)被认为是可恢复的。永久性干扰(比如被Siri打开的播放列表)被视为不可恢复的。当一个可恢复的干扰出现时,你的应用应该在干扰结束时恢复音频播放(假设音频在干扰出现之前就已经开始播放了)。比如,一个在播放配乐的游戏和一个在播放音频的媒体应用都应该恢复声音的播放。当干扰发生时应用没有在播放任何音频,那么它也就不需要恢复任何对象。

1473319394-4167-1473309774-7916-cy2016070114

让其它应用知道何时你的应用将停止播放暂时性的音频

如果你的应用可能会暂时性地干扰到其它应用的音频,那么就应该恰当地标明声音片段,从而让其它应用知道确切的恢复时间。了解实现方法,请参阅AVFoundation Framework Reference 中的AVAudioSessionSetActiveOptionNotifyOthersOnDeactivation。

只有在有意义时才对声音控件作出反应

无论你的应用在前台还是后台,用户都能够通过应用界面以外的东西控制音频的播放,比如在控制中心(Control Center)中,或者耳机声控。如果你的应用正在一个明确与声音相关的环境下播放音频,或是连接到一个支持AirPlay的设备上,那么对声音控件作出反应是合理的。但是,你的应用不应该混淆其它应用的音频,因为它们可能会在控件被激活时播放。

不要重新定义声音控件

用户希望声音控制在任何应用都保持一致性。永远不要重新定义声音控件。如果你的应用不支持某些控件,那么只需不对它们作出反应即可。

2.4 身份验证(Authentication)

要求用户进行身份验证时应该用有价值的东西交换,比如个人化体验、获得更多功能、购买内容或者同步数据。如果你的应用要求身份验证,请保证登陆流程快速简单并且低调,这样就不会减少应用的乐趣。

尽可能地延后登陆

用户经常遗弃应用因为他们在做一些有用的事前被强制登陆。在强制用户前给他们一个爱上你的应用的机会。在购物应用内,允许用户启动应用后能马上浏览你的商品,然后在他们决定购买时才要求登陆。在流媒体应用内,允许用户先探索和了解你能够提供的内容,然后在他们播放时让他们登陆。

解释身份认证的优势以及如何注册

如果你的应用要求身份认证,在登陆界面简要友好地介绍之所以要登陆的原因及其优势。并且请牢记不是每个人在开始使用应用时都拥有一个账号。请确认你解释了如何得到账号,或者提供一个简单的应用内的注册方式。

展示适合的键盘来减少数据输入

比如,当要求填写一个邮箱地址时,请展示包含信息输入所需快捷键的邮件键盘窗口。

2.5 数据输入(Data Entry)

无论是点击界面元素还是使用键盘,信息输入都是一个冗长的流程。当一个应用在做一些有用的事情前要求用户一连串的输入,进而拖慢了流程,那么用户会很快感到失望,甚至会彻底地抛弃这个应用。

1473319395-8130-1473309773-1534-cy2016070131473319395-7784-1473309773-4938-cy201607014

可能时展示选项

尽可能地提高信息输入的效率。比如,考虑使用选择器或是列表来替代输入栏,因为从一列提前设定好的选项中选择一个比打字容易。

可能时从系统中获取信息

不要强迫用户提供那些可以自动或是在用户许可内就能获取的信息,比如联系人或是日历信息。

提供可靠的默认值

尽可能地预填最可能的信息值。提供一个可靠的默认值缩短了做决定的时间从而加快了流程。

只有在收集完必需信息之后才能进行下一步

在允许“下一步”或“继续”按钮前,确保所有必要的输入框都有信息。尽可能地在用户输入之后就立马检查输入值,这样他们就能立即改正。

只要求必要的信息

只有系统运行真正必需的信息才使用必填栏。

简化值列表的导航

尤其是在列表和选择器中,必需能够简单地选择值。考虑通过将值列表按首字母排序或是其它逻辑排列,从而加快浏览和选择的速度。

在输入栏显示提示以辅助说明

当输入栏没有其它文字时,可以包含占位符文字——比如“邮件”或“密码”。当占位符文字已经足够说明时不要再单独使用标签来描述。

2.6 反馈(Feedback)

反馈让用户知道应用现在在做什么,发现下一步他们应该做什么,并且理解操作的结果。

1473319396-9170-1473309773-8045-cy201607015

悄悄地在你的界面中加入状态或其它类型的反馈

理想中,用户能够在不采取任何操作或是被打扰的情况下得到重要的信息。比如,当用户在邮件应用中查看邮时,状态信息被巧妙显示在工具栏上。这个信息不会和屏幕上的主要内容抢风头,但是用户在任何时候快速一瞥就能查看。

避免不必要的警告

警告是一种有威力的反馈机制,所以它应该只被用于传递重要的并且最好是需要操作的信息。如果用户看到太多包含无关紧要信息的警告框,他们很快就会学会忽略之后的警告。了解更多帮助,请参阅Alerts

2.7 文件处理(File Handling)

用户在创建、查看和操作文件时无需思考文件系统。如果你的应用需要运行文件时,尽可能地淡化文件处理。

1473319396-4443-1473309775-6651-cy201607016

让用户相信除非主动取消或删除

文件会随时被保存。总而言之,不要让用户去即时保存文件。反之,在文件被打开、关闭,或是跳转至其它应用时,应该自动定时地替用户保存文件。但在某些情况,比如正在编辑一个已被创建的文件时,保存和取消的选项也是有意义的,因为它们帮助确认何时编辑的内容应该被保存。

不要提供创建本地文件的选项

用户总是希望他们全部的文件都能在任何设备上读取。如果可能,你的应用应该支持文件云储存,比如通过与iCloud类似的服务。

设计一个直观并且图像化的文件浏览界面

理想情况下,使用用户熟悉的系统文档选择器来浏览文件。如果你想设计一个自定义的文件浏览器,请确保它是直观且高效的。最好的文件浏览器应该是高度图像化的,提供了文档的视觉再现。要想加快导航速度,减少手势的使用,并且考虑提供一个添加新文件的按钮,这样用户就无需再到其它地方去创建新文档。

让用户在你的应用内就能预览文件

你可以使用Quick Look 功能让用户查看来自Keynote、Numbers和Pages的内容,以及PDF文档、图片以及某些其它格式的文件,即使你的应用并没有真正打开它们。请参阅Quick Look

合适时,与其它应用共享文件

如果有意义,你的应用可以通过document provider extension与其它应用共享文件。你的应用也可以让用户浏览和打开来自其它应用的文件。了解实现方法,请查阅Document Picker Programming Guide

2.8 启动初体验(First Launch Experience)

应用的启动时间是你接触新用户并与老用户再次连接的第一个时机。请设计一个快速、有趣并有教育意义的启动体验。

提供启动画面

启动画面在应用打开时出现,在加载应用初始内容的同时,让人感觉你的应用的响应速度很快。因为这个画面很快就会被应用的首屏替代,所以它应该尽量与首屏相似,除非出现可定位的文字和可交互的元素。了解更多,请参阅Launch Screen

选择合适的方向启动

如果你的应用同时支持竖屏和横屏模式,那么应该以设备目前的方向启动。如果你的应用只在一个方向运行,那它只能在相同方向启动并在需要时允许用户旋转设备。除非有迫不得已的原因,否则处于横屏模式的应用正确地选择方向,无论Home键是在左侧还是右侧。了解更多信息,请参阅Layout

快速使用。避免出现延迟用户使用应用时间的启动画面、菜单和说明。反之,允许用户快速进入应用内。如果你的应用需要教学或是介绍步骤,为用户提供一个跳过的选项并且不要对老用户展示这些。

提前设想用户可能会需要的帮助

经常主动地考虑用户何时会遇到麻烦。比如,一个游戏,能够在暂停或是角色很难升级时提供一些诀窍。当用户错过启动画面的内容时,允许他们之后重新观看教程。

只在教程中展示最关键的内容

虽然为新用户提供引导没错,但是教学不能成为优秀的应用设计的代替品。更重要的是,确保你的应用是直观的。如果你的应用需要过多的引导,那么请重新审视你的设计。

让学习变得有趣而且易于学习

通过操作来学习比阅读一长串说明来的更有趣和有效。 在上下文环境中,通过动画和可交互性循序渐进地教导。避免展示看起来似乎可交互的屏幕截图。

避免在最开始要求用户设置信息

用户期待应用马上工作。为大多数人设计你的应用,然后让余下少部分需要不同配置的人自己调整参数来满足他们的需求。尽可能地,从设备设置和默认中或许设置信息,或者通过同步服务,比如iCloud。如果应用一定要求设置信息,那么在最初在应用内提示用户,然后允许用户稍后在应用设置中修改。

避免展示应用内的接受许可协议和免责声明

在你的应用被下载之前直接在苹果商店展示接受许可协议和免责声明。如果你必须将这些东西放在你的应用里,那么以和谐融入它们,以避免干扰用户体验。

在你的应用重新启动时恢复之前的状态

不要让用户重新操作来回到之前的应用定位。保存并且复原应用的状态,这样用户就能从他们上次离开的位置继续。

不要太快或是太频繁地要求用户对你的应用评分

太快或是太频繁地要求评分会让用户恼怒,并且减少最终收到的有用反馈的数量。为了鼓励考虑周到的反馈,在要求评分之前,给用户足够的时间直到他们形成对应用的看法。总是提供跳出评分提示的选项,并且永远都不要强迫用户对你的应用评分。

不要鼓励重启

重新启动耗费时间并且让你的应用看起来即不可靠又不可用。如果你的应用出现储存或者其它问题,导致它无法运行只能系统重启,那么你应该解决这些问题。

2.9 手势(Gestures)

用户通过在触摸屏上使用手势来与iOS设备交互。这些手势表现了一种亲密的人与内容之间的联系,并且加强了对屏幕上对象直接的操作感。用户普遍地希望一下的标准手势能够在操作系统和每一个应用内保持一致。

点击(Tap):激活一个控件或者选择一个对象。

拖曳(Drag):让一个元素从一边移动到另一边,或者在屏幕内拖动元素。

滑动(Flick):快速滚动或是平移

横扫(Swipe):单指以返回上一页,呼出分屏视图控制器(split view controller)中的隐藏视图,滑出列表行中的删除按钮,或在轻压中呼出操作列表。在iPad中四指操作用来在应用间切换。

双击(Double tap):放大并居中内容或图片,或者缩小已放大过的。

捏合(Pinch):向外张开时放大,向内捏合时缩小。

长按(Touch and hold):在可编辑或者可选文本中操作,显示放大视图用以光标定位。在某些与集合视图类似的视图中操作,进入对象可编辑的状态。

摇晃(Shake):撤销或重做

一般使用标准手势

用户已熟悉了标准手势,并不喜欢在做相同事情时被强迫去学习不同的方式。在游戏等沉浸式体验的应用中,自定义的手势能够成为体验的有趣要素。但是在其它应用中,最好使用标准手势,这样用户就无需花费多余的力气去学习和记忆它们。

不要禁止系统性的手势

除了标准手势,还有一些手势会触发系统性的操作,譬如呼出控制中心或是通知中心。在每个应用中,用户都依赖使用这些手势。

避免使用标准手势来执行非标准的操作

除非你的应用时一个极具可玩性的游戏,否则重新定义标准手势会变得混论和复杂。

为基于界面的导航和操作提供补充性的快捷手势,而不是取而代之

可能时,提供简单明显的方式来导航或是执行操作,即使它可能意味着额外的点击。非常多的系统应用包含一个提供了清晰可点的返回上一页的按钮的导航栏。但是用户也能通过在屏幕边缘右滑来返回。在iPad,用户能够点击Home键退出到主屏幕,或是使用四指捏合的手势。

使用多指手势来加强某些应用的体验

虽然涉及多个手指同时操作的手势不适用于每一个应用,但是他们能够丰富一些应用的体验,譬如游戏和绘画应用。比如,一个游戏可能包含多种屏幕上的控件,比如同时操作的的控制杆和发射键。

2.10 加载(Loading)

当内容在加载时,一片空白静止的屏幕好像应用被冻住了,让人感到困惑和失望,而且很可能让用户离开你的应用。

明确加载的状态

至少,展示一个活动旋转器(activity spinner)来表明有任务在进行中。更胜一筹的是,显示明确的进度,这样用户就能知道他们还需等待多久。

通过教育或娱乐用户来填充加载的时间

尝试展示游戏诀窍、令人愉悦的视频序列或者有趣的占位图。

自定义加载画面

尽管标准的活动指示器还不错,但他们有时会感觉是脱离上下文环境的。尝试设计符合你的应用或游戏的自定义动画和元素,以实现一个更沉浸式的体验。

尽快显示内容

不要让用户在看到屏幕画面前去等待内容的加载。立马显示屏幕画面,然后通过占位符、图片或者动画明确告知用户哪个范围的内容还未显示。当内容加载成功之后再把占位元素替代掉。可能时,比如当动画在播放时或是用户在某个层级或菜单导航时,在后台预加载接下来要出现的内容。

了解更多指导,请参阅Progress Indicators

2.11 模态(Modality)

模态突出焦点,因为用户只有在完成当前的任务或关闭一个信息或视图之后才能去做其它事情。操作列表、警告框和活动视图都提供了模态化的体验。当屏幕上出现一个模态视图时,用户必须采取一个决定(点击按钮或是其它)才能退出模态化体验。在日历(Calendar)中编辑事件或是在Safari浏览器中选择书签都是模态视图在应用中被采用的例子。一个模态视图可以占据整个屏幕、整个父视图(比如浮出层)或者屏幕的一部分。一个模态视图一般都含有“完成”和“取消”按钮来退出视图。

1473319397-4540-1473309775-2811-cy201607017

△ 警告框

1473319397-6606-1473309774-4307-cy201607018

△ 模态视图

减少模态的使用

一般来说,用户更喜欢与应用进行非线性的交互。只在必须要引起用户注意时、某个任务必须被完成或是确认关闭时,或保存重要数据时才考虑使用模态视图。

提供一个明显并可靠的退出模态任务的方式

确保用户总是知道他们关闭一个模态视图将导致的结果。

保持模态任务简单、简短并且高度集中

不要在你的应用中创建一另一个应用。如果一个模态任务太过复杂,用户在进入模态视图时就会看不到视他们本想执行的任务。当创建一个包含多层级视图的模态任务时请格外谨慎,因为用户可能会在多个视图中迷失并不知道如何返回。如果一个模态任务必须含有次视图,那么请提供单级的跳转路径以及清楚的完成路径。除非完成任务否则不要使用标有“完成”的按钮。

如果合适的话,请使用能够明确说明任务的标题

你也可能在视图的其它部分提供详细描述任务的文字或是提供指导。

只有在传达关键以及需要操作的信息时才使用警告框

警告框干扰体验,并且需要单击才能关闭,所以必须要让用户认为这个打断是有理由的。了解更多,请参阅Alerts

尊重用户的通知偏好设置

在设置里,用户明确规定了他们想要如何地接受来自你应用的通知。遵循这些个人偏好,这样他们就不会想要完全地关闭来自你应用的通知推送。

不要让模态视图盖在在浮出层上

除了警告框,任何元素都不应该覆盖在浮出层之上。在极少数情况下,你需要让模态视图在用户完成浮出层内的任务之后弹出,那么请先关闭浮出层再展示模态视图。

让模态视图的视觉风格与你的应用相符

一个模态视图可能包含一个导航栏。在这种情况下,请使用与你应用内的导航栏一样的视觉风格。

选择合适的模态视图样式

你可以使用到以下任何一种样式:

1473319398-3885-1473309774-5624-hbbb20160701

为展示模态视图选择一个合适的过渡方式

使用与应用风格相符的过渡方式来加强用户对当前内容转变的认知。默认的过渡方式让模态视图垂直地从屏幕底部向上滑出,然后在被关闭时下滑。弹出样式的过渡是指当前视图水平滑出,显示出模态视图,看起来就好像模态视图藏在当前视图的背后。当模态视图被关闭时,原先的视图便重新滑回来。在你的应用内容部使用统一的模态过渡方式。

了解更多模态视图的实现方法,请参阅UIViewController Class ReferenceUIPresentationController Class Reference

2.12 导航(Navigation)

用户往往意识不到一个应用的导航,除非它没有达到他们的预期。你的工作就是实现一种能够支持应用结构和目的的导航,并且让人们注意到到导航的存在。导航应该让人觉得自然和熟悉,并且不应该主导界面或者抢走内容的风头。在iOS,主要有三种导航结构。

分层导航:

在每屏都做一次选择,直到你到达目标位置。要想到达另外的目标位置,你必须原路返回一些层级或是从头开始重新选择。原生应用设置(Settings)和邮件(Mail)就是采用这种导航结构。

1473319398-1092-1473309775-3381-cy201607019

扁平导航:

在不同的内容类别间切换。原生应用音乐(Music)和App Store就是采用这种导航结构。

1473319398-7271-1473309775-3328-cy2016070110

内容驱动或是体验驱动式导航:

在内容中自由地转换,或是内容定义导航。游戏、阅读以及其它沉浸式应用一般都采用这种导航结构。

1473319399-7799-1473309775-2457-cy2016070111

有的应用结合了多种导航形式。比如,采用了扁平导航的应用也可能在每个类别之内使用层级导航。

总是提供清晰的路径

用户应该一直知道他在应用的什么位置以及如何去往下一个目标位置。除了要有清楚的导航形式,还应该确保对象间的路径是合理的、符合预期的并且容追溯的。一般来说,为用户提供到达某一屏的唯一路径。如果他们需要在非常多的情景下看到某一屏幕的内容,那么考虑采用操作列表、警告框、浮出层或是模态视图的形式展示这些内容。了解更多内容,请参阅Action Sheets,Alerts,Popovers, 和Modality

设计一个能够快速简单地访问内容的信息结构

合理地组织你的信息结构,保证它只用最少次数的点击、横扫和屏幕间跳转就能访问相应的内容。

使用触摸手势来制造流畅感

让用户能轻松地在界面内跳转,而感受不到阻力。比如,你可以让用户在屏幕边界右滑,而返回到上一屏。

使用标准的导航组件

可能时,使用标准的导航控件比如页面控件、标签栏、分段控件、表格视图、集合视图和拆分视图。用户已经熟悉了这些控件,他们很自然地就知道如何玩转你的应用。

使用导航栏访问分层内容

导航栏内的标题栏能够说明当前的层级位置,使用返回按钮能够轻易地回到上一个位置。了解更多指导,请参阅Navigation Bars

使用标签栏来展示内容或功能相似的类别

标签栏让用户能够快速简单地在类别中切换自如,而不受当前位置的限制。了解更多指导,请参阅Tab Bars

使用多页面展示同类型的内容时请使用页面控件

页面控件能够清楚地表示总页数,以及当前页的位置。天气(Weather)应用就使用了页面控件来表示不同地理位置的天气页面。了解更多指导,请参阅Page Controls

TIP

分段控件和工具栏不具备导航功能。使用分段控件能够组织信息放入不同的类别。使用工具栏为当前内容提供交互控件。了解这些元素的更多信息,请参阅Segmented ControlsToolbars

2.13 请求许可(Requesting Permission)

1473319399-1789-1473309776-9049-cy2016070112

用户必须对应用予以授权,应用才能获取用户的个人信息,比如当前位置、日历、联系人信息、提醒事项以及照片。虽然用户在使用获得这些信息的应用时会感到方便,但是他们还是希望能够控制自己的私人数据。比如,用户希望为他们的照片自动标上当前的地理位置,或是寻找附近的朋友,但是他们又同时希望能有关闭这些功能的选项。

只在应用真的需要时才向用户请求获得个人数据

用户会质疑个人信息的请求是很自然的,尤其是他们发现当前的请求没有明显的必要时。确保允许请求只在用户真的在使用某些需要个人数据的功能时才出现。比如,一个应用只有在激活一个位置跟踪的功能时才请求获得当前的位置。

当需求不明显时向用户解释为什么你的应用需要这些信息

你可以在系统提供的允许请求警告框上添加自定义的文本。使用明确且有礼貌的文本,这样用户就不会感到有压力。使用简短文本,并且使用句子。没有必要包含你的应用名字。系统已经替你在警告框上说明了应用的名字。

在应用一启动时就请求允许那些对运行你的应用至关重要的信息

如果用户明确地知道你的应用只有获得这些个人信息才能运行,那么他们就不会反感。

不必要时不要请求位置信息

在获得位置信息之前,检查系统以查看位置服务是否已经被打开。使用这个知识,可以延迟提醒,直到使用需要该信息的功能时才进行提醒,甚至可能完全避免提醒。

学习如何实现定位功能,请参阅Location and Maps Programming Guide

2.14 设置(Settings)

有一部分的应用可能需要一开始就让用户决定设置或布局选项,但是大部分应用避免或是延迟这么做。成功的应用能够一开始就让用户很好地使用,并且同时提供了一个便捷的途径去调整体验。当你的应用被设计成满足大部分用户的需求,你就可以减少他们对对设置的需要。

推断你可以从系统中得到什么

如果你需要关于用户、设备或是环境的信息,那么尽可能地向系统请求而不是直接询问用户。比如,如果你想要知道用户的邮编来提供本地的选项时,可以向用户请求获取他们的当前位置。

在你的应用中对配置选项的优先排序深思熟虑

应用的主屏是一个放置关键或是常用选项的绝佳位置。次屏则适合放置只偶尔才更改的选项。

把不经常更改的配置选项放到系统设置里

系统的设置(Settings)应用是更改系统配置的核心地带,但是用户必须离开的应用才能到达那里。因此在你的应用中直接调节设置更加方便。如果你的应用必须提供很少改动的设置选项,请参阅Preferences and Settings Programming Guide中的Implementing an iOS Settings Bundle 部分。

适当时提供去设置的快捷路径

如果你的应用包含引导用户去设置的文本,比如“去设置>我的应用>隐私>定位服务”,请提供一个能够自动打开该界面的按钮。了解如果实现这个行为,请参阅UIApplication Class Reference中的Settings Launch URL部分。

2.15 用辞(Terminology)

每一个在应用中的文字都是与用户对话的一部分。利用好这个对方让用户在你的应用中感到自在舒适。

使用熟悉易懂的单词和短语

科技可以让人感到害怕。避免使用用户可能不理解的或是技术术语。根据你对用户的了解来决定哪些单词和短语是合适的。总的来说,能够吸引每个人的应用是不应包含深奥的技术语言的。这类语言比较适合针对高端或是技术用户的应用。

保持界面文本的清晰和简洁

用户能够快速且轻易地理解短而直接的文本,他们不喜欢在完成任务时被强迫去阅读很长的文本。找到最重要的信息,简洁地陈述它,然后突出地展示它,这样用户就不需要为了知道他们在找什么或是下一步该做什么而阅读太多信息。

避免使用让人听起来很傲慢的语言

避免使用“我们”,“我们的”和“我的”(比如“我们的教程”和“我的锻炼”)等字段。他们有时候被理解为无礼或是傲慢的。

尽量使用日常且友好的语气

一个日常亲近的风格就类似你在和别人吃午饭时聊天的语气。偶尔使用简写,并使用“你”和“你的”来直接与用户对话。

请谨慎使用幽默

记得用户可能会多次阅读你界面上的文字,而那些第一次看起来很俏皮的文字可能在多看几次之后会显得恼人。同样记住在一种文化中的幽默方式可能并不适用于其它文化。

使用相关且一致的语言和图像

确保引导在当前环境中总是合适的。如果某人在使用iPad,那么久不要给他展示与iPhone相关的文字和图片。根据平台选择使用相符的语言。你在触摸屏上点击、滑动、横扫、捏合或者拖曳对象。你按压物理按钮,或者按压对3D触摸作出反应的对象。你旋转和摇晃设备。

提供精确的日期

使用今天、明天这类友好的词语是合理的,但是如果你没有详细说明当前的位置,那么这些词语就会令人困惑或是显得不够精确。请考虑一个在午夜12点前发生的事件。在某个时区,这个事件可能发生在今天。但是在另一个时区,同样的事件可能在昨天就已经发生了。总而言之,日期应该体现出正在查看事件的用户所在的时区。然而,在某些情况下,比如一个跟踪航班状态的应用内,明确地显示起飞地区的日期和时区才更加清楚。

恰当地指出可交互的元素

用户应该瞥一眼就能知道这个元素是什么用的。当给按钮或是其它可交互元素标记时,使用操作动词,比如连接、发送和添加。

2.16 撤销和重做(Undo and Redo)

很多的应用都允许用户通过摇晃设备来撤销或是重做某个操作,比如打字或是删除。当该撤销和重做通过摇晃被触发时,会出现一个提示框,询问用户是要撤销(重做)操作还是什么都不执行。

1473319400-9926-1473309776-1331-cy2016070113

简明扼要地描述将要被撤销或是重做的操作

撤销和重做的提示框标题会自动地包含“撤销”或是“重做”这样的前缀(以及后面的空格)。你需要在前缀后面提供额外的一两个词语用来形容什么会被撤销或是重做。比如,你可以创建一个提示框标题叫做“撤销命名”或者“重做地址更改”。

如果你已经把摇晃手势用来撤销和重做,那么就不要把它用于其它操作

即使你能通过编程赋予摇晃手势不同的意义,但同时你也冒着很大的风险使用户困惑,并让你的应用变得不可预知。

节制地使用撤销和重做按钮

如果在应用中为执行相同任务提供多种途径便会让人困惑。如果你的应用真的需要专门的撤销和重做按钮,那么请使用系统提供的标准按钮并且把它们放在一个符合预期的位置,比如导航栏。

只在当前情境中执行撤销和重做操作

撤销和重做必须对当前的(而非之前的)情境有明确直接的影响。

了解更多实现方法,请参阅Undo Architecture

3. 特性(Features)

  • 3.1 多任务处理(Multitasking)
  • 3.2 通知(Notification)
  • 3.3 打印(Printing)
  • 3.4 快速查看(Quick Look)
  • 3.5 Siri

3.1 多任务处理(Multitasking)

多任务处理让你能够通过iOS设备上的多任务处理界面或是在iPad上使用四指手势,随时且快速地从一个应用切换至另一个。在iPad,多任务处理也能够让你在Slide Over,分屏视图(Split View)或者画中画(Picture in Picture)模式下同时使用两个app。从屏幕右侧横扫就能进入Slide Over模式,它能让你在不离开当前app的情况下暂时性地使用第二个app ,比如在你使用Safari浏览器的时候快速地查看你的邮箱。分屏视图让你同时地使用两个并排的app,而画中画让你在一个app工作时也能观看视频。

设计一个能在多任务处理环境下从容工作的app取决于你的app是否能够和谐地于其它应用在设备上共处。也就是说,你的app不应该使用过多的CPU、存储空间、屏幕空间或是其它系统资源。它应该合理应对来自其它app的突发干扰和声音,快速流畅地隐去后台或是从后台中被呼出,并且即使在后台也能可靠地运行。

1473319400-6944-519-1277-uisdc-iOS-201609071

准备好应对中断,并且准备好随时恢复。你的app在任何时候都可能被中断。当中断发生时,你的app应该快速精准地保存当前的状态,这样用户返回app时,就能完美无缝地从他们上次离开的地方继续使用。了解更多实施细则,请参阅 App Programming Guide for iOS 中的 Preserving Your App’s Visual Appearance Across Launches 部分。

确保你的界面能够与双倍高度的状态栏(double-high status bar)共处。一些比如进行中的通话、录音和共享功能会在屏幕顶部展示额外的一个状态栏。在对此无准备的app中,这个增加的高度会遮挡其它的界面元素或是把它们挤下去,从而导致布局问题。在你的app中测试这些情况以保证你的界面能够应对自如并且仍然看起来很棒。

暂停需要时时关注或是用户参与的活动。如果你的app是一个游戏或是观看媒体文件,请保证用户在切换至其它app时也不会错过任何内容。当他们切换回来时,让他们从上一次离开的地方继续就好像他们从未离开过。

恰当地处理来自应用外的声音。有时候,你的app的音频可能会被来自其它app或是系统的声音打断。比如,来电铃声或是被Siri打开的音乐播放列表会中断你的app的音频。当这种情况发生时,你的app应该以符合用户预期的方式处理。对于重要的音频干扰,比如播放音乐、广播或是有声读物,你的app应该停止播放它自己的音频。对于短暂的干扰,比如GPS导航通知,你的app应该暂时地降低它的音频音量或是先暂停音频然后在干扰结束时继续播放。了解更多指导,请参阅 Audio

在后台完成用户发起的任务。当用户开启了一个任务,即使离开了app他们也希望任务能够被完成。如果你的app正在执行一个不需要额外用户输入的任务,请在app回到前台前在后台完成它。

节制地使用通知。无论你的app在前台、后台或是完全没有被打开,它都能在特定的时间给用户推送通知。使用通知来传达重要讯息是可行的,但是避免让用户被过多通知烦扰。比如,当你的app在后台时,不要每完成一个任务就给用户展示一个通知。相反的,让用户通过返回你的app来查看任务的完成情况。了解更多指导,请参阅 Notifications

了解关于iPad的实施细则,请参阅 Adopting Multitasking Enhancements on iPad

3.2 通知(Notification)

无论设备被锁屏还是在使用中,app都能随时利用通知来提供及时和重要的信息。比如,通知可能会在以下几种情况出现:当新消息到来时、一个事件将要发生时、有新数据可获取时或是某些状态发生改变时。用户在锁屏上、在屏幕顶部(使用设备时),以及通知中心(通过从屏幕顶部边缘下滑呼出)看到通知栏。每个通知都包含应用名称、一个app图标以及一条消息。通知的到来也可能伴随声音提示,以及app图标上小红点角标的出现和更新。

每个app的通知行为都可以在设置里面被单独管理。只要是支持通知功能的app,你有可以完全地打开或关闭这个功能。你同样可以设置通知是否在通知中心和锁屏上可见,是否在app图标上出现角标,以及选择以下一种通知样式:

横幅:当设备在使用时在屏幕上方出现几秒,然后消失。

提醒框:当设备在使用时在屏幕上方出现,直到被手动关闭。

在未锁屏的设备上通过点击通知、或是在锁屏时右滑,来结束通知、把它从通知中心移除并打开发送通知的应用展示相关的内容。比如,在未锁屏的设备点击一条新的邮件通知,就会打开邮箱并且显示新的信息。

在一个未锁屏的设备,上滑通知或让它消失能够关闭通知,也可能将它从通知中心移除。

使用3D Touch 在一个通知上按压,或时在未锁屏时在通知上下滑,就能打开拓展的详情视图。这个视图支持自定义并且包含最多四个操作按钮。比如,一个待办事项app可以推送一个含有详情视图的任务通知,上面有可以推迟任务和标记为已完成的按钮。一个日历事件的通知提供了“小睡”操作来推迟事件的闹铃。

TIP:

通知可以是本地或是远程的。本地通知由同一个设备发出和接收。一个待办事项应用就使用本地通知来提醒用户一个将要到来的会议或是到期日。远程通知,也叫做推送通知,来自一个服务器。一个多玩家游戏就使用远程通知让每个玩家知道什么时候轮到他们了。

用户必须明确通过选择来接收来自每个app的通知——他们在第一次使用app的时候都被要求这么做。如果有人选择不接收通知,他们同样也能通过访问设置来选择接收。

提供有用的通知。用户打开通知是为了快速获得最新消息,所以你的重点是提供有价值的信息。使用完整的句子,句首字母大写,合适的标点符号,并且不要截短你的信息——必要时系统会自动处理。避免在通知中引导用户打开你的app,进入指定页面然后点击指定按钮来完成一些任务,因为当通知被关闭时用户很难记住它们。

就算用户没有作出回应,也不要为同一件事情发送多个通知。用户只有在方便时才会理会通知。如果你为同一件事发送了多个通知,并且填满了通知中心,那么用户就很可能关闭来自你app的通知。

不要包含你的app名字和图标。系统会自动地在每条通知的顶部显示这些信息。

角标是用来补充说明通知,而不能表示重要的信息。记住app的角标可以被关闭。如果你的app依赖于通过角标来传达重要信息,就等于你在冒着用户会错过这些信息的风险。

保持角标实时更新。当收到对应的消息时立即更新你的app角标数字。你也不想让用户猜测是否收到了新消息,他们只有在看到确切提示之后才会进入你的app查看。请注意将角标上的数字清零意味着同时在消息中心移除所有相关的通知栏。

提供声音以辅助你的通知提醒。当用户没有盯着屏幕时,声音是一个引起他们注意的绝佳方式。一个待办事项app,在需执行重要任务时可能就会播放一个提示音。你的app可以使用自定义声音或是系统的提示音来达到效果。如果你使用自定义的声音,请确保它是简短、与众不同并且制作精良的。请参阅Local and Remote Notification Programming Guide中的Preparing Custom Alert Sounds部分。请记住用户可以随时地关闭通知提示音。他们也可以开启伴随着声音的振动——这只能被手动开启,而不能通过你的app程序来关闭。

1473319401-4322-519-7301-uisdc-iOS-201609072

考虑提供一个详情视图。一个通知的详情视图提供了关于该消息的更多信息,并且允许他们在不离开当前环境的情况下去执行快速的操作。这个视图应该包含有用、易识别的信息,让人感觉就是一个你的app自带的插件。它可以包含图片、视频以及其它内容,它还能在显示时动态更新。比如,一个拼车app就能够在该视图展示一个地图,并标出正在朝着你的位置行驶的汽车位置。

提供直观、有用的操作。一个通知的详情视图能最多包含四个操作按钮。这些按钮应该用来执行常用、省时的任务,而不用通过打开你的app。使用简短、首字母大小写的名称,明确地描述操作的结果。一个通知的详情视图还能在屏幕上呼出一个键盘用来收集执行操作需要的信息。比如,一个通讯app可以允许用户直接在新消息通知上回复。

避免展示破坏性的操作。要在通知详情视图里展示破坏性操作之前请仔细考量。如果你必须展示它们,确保用户拥有足够的上下文信息,以避免出现意外后果。破坏性的操作应该以红字呈现。

了解更多实现细节,请参阅Local and Remote Notification Programming Guide

3.3 打印(Printing)

你的app能够利用系统自带的AirPrint技术来使用兼容的打印机实现图片、PDF以及其它内容的无线打印。当用户在有AirPrint功能的应用内浏览可打印的内容时,他们一般通过在导航栏或是工具栏点击一个操作按钮,然后再点击打印按钮来打开打印视图。 这个视图提供了一个可用打印机的列表以及一些自定义选项,比如打印的份数、页面范围,并且提供了一个开始打印的的按钮。

1473319402-4726-519-2324-uisdc-iOS-201609073

让打印选项易于发现。如果你的app有一个工具栏或是导航栏,请使用系统提供的操作按钮来打印。用户对这个按钮更加熟悉,并且在其它应用中也是用它来打印。如果你的app没有工具栏或是导航栏,那么设计一个自定义的打印按钮来代替。

只在可以打印的情况下才允许打印。如果在你的屏幕上没有任何内容或是没有可用的打印机,那么不要在用户点击“操作”按钮后显示打印按钮。如果你的app使用自定义的打印按钮,在无法打印时让其不可点击或是隐藏。

提供有价值的打印选项。想想用户在打印来你的内容时会想要指定哪些选项。考虑可以选择页面范围和打印份数的选项。启用附加的选项,比如双面打印,如果这样有意义并且打印机也支持的话。

了解更多实现细节,请参阅 Drawing and Printing Guide for iOSUIPrintInteractionController Class Reference

3.4 快速查看(Quick Look)

在你的app中,快速查看让用户能够预览Keynote,、Numbers、Pages、PDF文档、图片以及其它类型的文件(即使你的应用并不支持这些文件格式)。邮件(Mail)使用Quick Look来查看附件。在下载附件之后,Mail在邮件信息内显示附件的图标和文件名。点击图标就能预览附件。

1473319402-4856-521-9235-uisdc-iOS-201609074

在当前环境下合理地展现预览视图。在iPhone上,如果你的app有导航栏,让预览视图下移留出位置给导航栏,就和你的app其它层级的视图一样。在iPad或是没有导航栏的app内,在一个全屏的有导航栏的模态视图中打开预览视图。通过以上两种方法,导航栏就能提供退出Quick Look的按钮,以及预览特有的一些按钮,比如分享和标记。如果你的app包含一个工具栏,那么预览特有的按钮就会在工具栏出现而不是导航栏。

了解更多实现细节,请参阅 Document Interaction Programming Topics for iOS 和 Quick Look Framework Reference for iOS

3.5 Siri

你的app可以与Siri联动来执行一些任务以应对来自用户的语音命令和问题。

音频和视频通话应用:拨打电话和查找通话记录

消息应用:发送消息和阅读收到的消息

提供支付服务的应用:发送和请求支付

管理图片的应用:查找和显示图片

提供交通服务的应用:预定行程和提供行程状态信息

提供健身活动的应用:开始、暂停、恢复、结束和取消锻炼

与CarPlay联动的车载软件:更改车上的音频源、温控系统、除霜设置、座椅温度和无线电台。

1473319402-1572-519-9436-uisdc-iOS-201609075

Siri负责语言处理和语义分析来把语音请求转换成你的app能够处理的操作指令。你的app应该负责定义它所支持的功能、验证收到的信息、为Siri提供它需展示的信息以及采取操作。

在验证信息的时候,如果某些信息丢失或是不明确,你的app可以指示Siri来展示选项,向用户请求确认,或是请求更多信息。按照Siri的逻辑,某些任务比如发送信息和支付,在app执行任务之前首先需要用户确认。

来自你的app的回应信息会由Siri说出来并且呈现在Siri界面。合适的话,你的app可以提供自定义的内容让Siri来展现。比如一个健身app,可能会提供自定义的锻炼信息。

力求一个无需触屏或注视屏幕的声控体验。用户在使用Siri时不会经常盯着屏幕看。他们可能会通过耳机、汽车或是穿过房间来与Siri互动。尽可能地,让用户在无需解锁屏幕的情况下也能完成任务。

快速应答并且减少交互操作。用户使用Siri是为了方便,所以不要让他们等待回应。你的app应该在收到请求之后尽快地验证信息以及采取操作。当需要说明和更多信息时,呈现高效且集中的选项以降低需要额外提示的可能性。

将用户直接带到指定内容。从Sir转换你的app,应该直接去往用户期望的目的地。不要显示中间画面或是信息,阻碍转换过程或是拖慢用户。

保证是相关的、精确的以及合适的。你的app的回应必须和当前的请求相关而且必须精确地反映用户期望。永远不要包含可能会被认为是冒犯或是侮辱人格的内容。

将最安全、价格最低的选项设为默认值。一个应答无论如何都不应该骗人或歪曲信息,尤其是当它会带来经济上的影响时。对于一次涉及不同价位的购买,不要默认选择最贵的。当用户决定付钱时,不要在不告知用户的情况下收取额外的费用。

提升自定义词库的准确性。通过定义那些用户可能会在请求时用到的特殊术语,比如联系人、照片标签、相册名字、路线选择和运动名称,你的app能够帮助Siri去了解更多与执行你应用操作有关的内容。这些术语必须在你的app中是非一般的、特殊的,并且用户可能会在发起请求时真正用到。这些你提供的词汇不能包含其它应用的名字、与其它app明显相关的术语、不合适的语言或是被系统占用的短语,比如“Hey Siri”。记住任何你定义的术语都会被Siri用来解决用户请求,但是并不保证一定能够被识别。

提供请求例句。为Siri提供例句,当用户点击Siri界面的帮助按钮时这些例句就会被展现在指南里。使用这些例句引导用户如何以最简单高效的方式通过Siri来使用你的app。

确保你的自定义界面与Siri很好的融合。你可以使用app特有的颜色、象征性图像或是其它设计元素来表达品牌风格,但是任何自定义界面元素必须让人感觉它们仍然适合于Siri界面。

不要在自定义界面包含你的app名字和图标。系统会自动展示这些信息。

不要打广告。属于你应用的Siri体验永远都不能包含广告、营销或是app内购买的推销。

不要试图模仿或是操控Siri。你的应用永远都不能模仿Siri,也不能试图复制由Siri提供的功能,或是提供一个来自于Apple公司的应答。

了解更多实现细节,请参阅 SiriKit Programming Guide

4. 视觉设计(Visual Design)

  • 4.1 动画(Animation)
  • 4.2 品牌化(Branding)
  • 4.3 颜色(Color)
  • 4.4 布局(Layout)
  • 4.5 字体(Typography)

4.1 动画(Animation)

贯穿于iOS系统的优美、精细的动画在用户和屏幕屏幕内容之间建立了一种视觉上的联系。当动画被合理利用时,它能够表达状态、提供反馈、加强直接操纵感,并且视觉化呈现用户的操作结果。

明智且审慎地使用动画和动效。不要为了使用动画而使用动画。过度或是无理由的动画会让用户感到不连贯或是错乱,尤其是在那些不能提供沉浸式体验的app中。iOS经常使用动效,比如在主屏和其它地方使用了视差效果,来建立用户对深度的认知。这些效果有助于增强理解和提升愉悦感,但是滥用它们就会让一个app变得令人困惑并且难以控制。如果你想使用动效,一定要进行用户测试以保证它们真的能完成使命。

使用连贯的动画。一个熟悉并流畅的体验能一直让用户参与其中。用户已经习惯了贯穿于iOS系统的精细动画,比如平稳的过渡、横竖屏之间的流畅转换和基于物理现实的滚动。 除非你在创造一个沉浸式体验,比如游戏,不然自定义动画都应该和系统自动地动画相符。

力求真实性和可信性。用户可以接受艺术创造,但是当动效没有意义或是违背了物理定律时,用户就会感到混乱。打个比方,如果用户通过在屏幕顶部下滑呼出一个视图,那么他们应该也能通过上滑将该视图关闭。

4.2 品牌化(Branding)

成功的品牌化不仅是单纯地在应用中添加品牌元素。优秀的app通过优雅别致的文字、颜色和图片来营造独特的品牌辨识度。提供足够多的品牌元素让用户感觉是处在你的app中,但要因为给予太多而变成干扰。

融入精妙的、不唐突的品牌元素。用户使用你的应用是获得娱乐、得到信息或是完成任务,而不是为了观看一个广告。要想达到最好的体验,请巧妙地将品牌融于应用设计中。让app图标的颜色贯穿于界面设计是一个在你的app中提供专属环境的好办法。

不要让品牌化阻碍了优秀的应用设计。首先,让你的app像是一个iOS app。保证它是直观的、易于导航的、易用的并且以内容为中心的。当你的app在其它平台也适用,不要为了保持品牌的一致性而牺牲了设计的质量。

内容比品牌化更重要。在屏幕顶部一直放置一个除了展示品牌元素以外没有任何用途的头栏,就意味着牺牲了用来浏览内容的空间。取而代之的,考虑采用低侵入性的方式来实现品牌化,比如使用自定义的配色方案和字体,或是巧妙地自定义背景。

抵制住想要在应用中到处展示logo的诱惑。避免在app中到处展示logo,除非它是品牌化中是必不可少的一部分。这点在导航栏中尤其重要,因为提供一个标题比logo更加有用。

遵循Apple的商标准则。Apple的商标不能在你的应用名字或是图像中出现。请参阅Apple Trademark ListGuidelines for Using Apple Trademarks

TIP

App Store 为突出你的品牌提供了更多的机会。了解相关指导,请参阅 App Store Marketing Guidelines

4.3 颜色(Color)

在iOS,颜色能够暗示可交互性、增加活力以及提供视觉的连续性。在挑选app色调的颜色时,请参考系统的色彩方案,以保证这些颜色无论是单独还是组合、在浅色背景还是深色背景上都看起来很棒。

1473319403-4830-519-5665-uisdc-iOS-201609076

在app内使用互补的颜色。你的app内的颜色应该和谐共处,不会互相冲突和干扰。如果你的app风格的基础色调是柔和的,那么使用一系列与之协调的柔和色调。

考虑在app中统一使用一种关键色来暗示交互性。在Note中,可交互的元素是黄色的。在Calendar中,可交互的元素是红色的。如果你定义了一种关键色用于传递可交互性,那么你要保证其它颜色不会与之冲突。

一般来说,选择与你的app logo相符的颜色数量有限的色板。巧妙地使用颜色是一个传达品牌的好办法。

避免给可交互和不可交互的元素使用相同的颜色。如果可交互和不可交互的元素是同一种颜色, 用户就很难知道到底哪里是可点击的。考虑半透明对颜色的影响。颜色在半透明元素之下和之上(比如工具栏)都会看起来很不一样。

在多种光线条件下测试你的app的颜色方案。光线会在市内和室外、房间氛围、不同的时间、气候等条件下明显地变化。你的app在现实世界中使用时看到的颜色不会一直和你在电脑上看到的颜色相同。你应该在不同的光线条件下预览你的应用来观察颜色的真实表现,比如在晴朗的户外。必要时,应当调整颜色以求在大多数的使用场景下提供最好的视觉体验。

考虑True Tone显示屏对颜色的影响。True Tone显示屏利用了环境光传感器来自动调整显示屏的白点,以适应当前环境下的光线情况。专注于阅读、照片、视频和游戏的应用可以通过确定一种白点纠正模式来强化或弱化True Tone 的效果。了解更多实现细节,请参阅 Information Property List Key Reference

关注色盲用户以及不同文化对颜色的认知差异。不同的用户看见的颜色是不一样的。比如,很多色盲用户很难分辨红色和绿色(以及任何灰色),或是蓝色和橘色。避免把这些颜色组合作为区分两种状态或值的唯一方式。比如,用红色方块和绿色圆形来表示下线和上线状态,而不是用红色和绿色的圆形。有些图形编辑软件含有能够帮助你证明你是否是色盲的工具。同样地,考虑你对颜色的app在其它国家和文化中会被如何看待。比如,在某些文化里,红色用来表示危险;但在另一些文化里,红色又有着积极的含义。请确保在你的app中的颜色传达了合适的讯息。

使用足够的颜色对比度。在app中,过低的对比度会让内容难以阅读。比如,图标和文本可能会和背景相融合。在线的颜色对比度计算器能够帮助你精确的分析应用中的颜色对比度,以确保它符合最佳标准。请确保你的app对比度至少达到4.5:1,但是7:1更好,因为它符合更加严格的辅助功能标准。

4.4 布局(Layout)

用户总是希望能够在他们所有的设备以及任何一种模式下使用他们最喜欢的app。在iOS,界面元素和布局能够被配置以在不同的设备中、在iPad中多任务操作时、分屏模式时以及屏幕旋转时,自动改变形状和大小。因此,提前计划并且设计一个在任何环境下都能提供非凡体验的app是十分重要的。

环境变化时保持当前内容的焦点不变。内容是你的最高使命。让焦点随着环境变化而改变是令人迷惑又沮丧的,它会让用户感觉当前的app失控了。

确保最重要的内容在默认大小下清晰可读。除非用户选择调整大小,否则不应该让用户横向滑动才能阅读重要的文字信息,或是放大才能看清重要的图片。

在app内保持整体一致的视觉外观。一般来说,具有相似功能的元素应该看起来相似。

利用视觉权重和平衡来表示重要性。大的对象能够抓住人的眼球,显得比小的更加重要。大的对象也更易于点击,当app在容易分散注意力的环境中(比如厨房和健身房)被使用时这点尤其重要。一般来说,把首要的对象放在屏幕的上半部分并且放在偏左的位置——处于从左往右的阅读环境时。

利用对齐来方便浏览,并且表达结构和层级。对齐让app看起来整齐有次序,当页面滑动时有助用户聚焦,更容易找到信息。缩进(indentation)和对齐还可以表明多组内容之间的关系。

避免无缘由的布局变动。即使用户旋转了设备,也不代表整体的布局需要变换。比如,如果你的app在竖屏模式展示了一网格的图片,那么在横屏模式你没必要依次展示同样的图片。相反地,你只需要简单地调整网格的尺寸就行了。尽量在任何环境下都能维持相当的体验。

可能时,同时支持竖屏和横屏模式。用户更喜欢在两种模式下都能使用app,所以最好能够满足他们的期望。

如果你的app只支持一种模式,那么请支持该模式的两种变量。如果你的app只能在一种模式下运行,那么确保它能够支持该模式的两种方向变化是十分重要的。比如,如果你的app只在横屏模式运行,那么无论Home键在左边还是右边,应用都该能正常使用。如果设备被旋转180度,那么你的app内容也该同时旋转180度。反之,当用户拿错设备方向时,你的app没有自动旋转,那么他们就会很自然地知道应该旋转设备。你无需告诉他们该如何纠正。

根据当前使用内容来定制应用对旋转的反应。比如,一个需要用户旋转设备来控制角色移动的游戏,就不会在游戏中根据设备的旋转来改变模式。但是,它可以根据当前设备的旋转方向来展示菜单和引导步骤。

为可交互元素提供足够的空间。尽量让所有控件都有不小于44pt x 44pt的点击区域。

准备好应对文本大小的改变。当用户在设置里选择了不同的文本大小,他们总是希望大部分的app都能合理适配。为了适应某些文本大小的改变,你可能需要调整布局。了解更多关于应用内文本使用的信息,请参阅Typography

了解更多适应性的实现细节,请参阅 Auto Layout Guide

4.5 字体(Typography)

iOS的系统字体是San Francisco。该字体有两个变种:SF UI Text (用于19p及以下大小的文本)和SF UI Display(用于20p及以上大小的文本)。当你在标签和其它界面元素应用了系统字体时,iOS系统会根据字号自动选择最合适的字体样式。它还会根据需要自动改变字体,以满足辅助性功能的设置。请前往 Resources 下载San Francisco字体。

1473319403-6241-520-3481-uisdc-iOS-201609077

作为iOS的系统字体,San Francisco含有拉丁、希腊和西里尔字母,以及多种用于其它文字系统的字体。

强调重要信息。使用字体粗细、大小和颜色来强调app中最重要的信息。

如果可能的话,使用单种字体。混合使用多种字体会让你的app看起来零散和草率。考虑使用一种字体和几种样式和大小。

可能时使用内置的文本样式。内置的文本样式让你能在视觉上清晰地表达内容,同时保持最佳的可读性。这些样式建立在系统字体的基础上并能让你得益于关键的排版特性,比如动态字体,能够根据每种字号自动调整字距和行间距。iOS含有以下文本样式:

1473319404-2710-520-1492-uisdc-iOS-201609078

确保自定义字体清晰可辨。iOS支持自定义字体,但往往很难阅读。除非你的app必须使用自定义字体,比如出于品牌目的或是为了营造沉浸式的游戏体验,否则的话请坚决使用系统字体。如果你使用了自定义字体,请确保它是可读的。

让自定义字体实现辅助功能。系统字体能够自动对辅助性功能做出反应,比如当需要加粗文本时。使用自定义字体的app,应该通过检查辅助功能是否启用或是向系统注册以收到设定更改的通知,来执行同样的行为。请参阅 Accessibility

动态字体大小

SF UI字体的两个变种经过精心的设计,无论尺寸大小都十分清晰可读。动态字体通过让阅读者选择喜欢字体大小,从而提供了额外的灵活度。设计师们也可以去下载一些已经用iOS10设计的文件来研究。

1473319404-4882-523-7429-uisdc-iOS-201609079

△ 最小号

1473319404-8068-20-8156-uisdc-iOS-2016090710

△ 小号

1473319405-5549-21-3394-uisdc-iOS-2016090711

△ 中号

1473319405-5540-22-2948-uisdc-iOS-2016090712

△ 大号(默认)

1473319406-1744-22-4064-uisdc-iOS-2016090713

△ 加大号

1473319406-6259-22-2615-uisdc-iOS-2016090714

△ 超大号

1473319406-8054-22-7725-uisdc-iOS-2016090715

△ 最大号

根据内容的优先级来应对字体大小的改变。不是所有的内容都一样重要。当用户选择了一个更大的尺寸,他们只想让自己关心的内容更易于阅读,而不是希望屏幕上的每一个文字都变得很大。

字体使用和字距

在界面原型中使用正确的字体变种。当字号不大于19点时使用SF UI Text。使用SF UI Display来展示20号及更大的文字。根据以下规则适当调整字距:

1473319407-4438-22-1685-uisdc-iOS-20160907161473319407-1628-23-8311-uisdc-iOS-2016090717

原文地址:UISDC

PC端web管理系统的交互设计规范分享

阿西UED阅读(2051)

前些时间正准备写交互规范,就去网上搜罗了一下交互规范的一些范本,想作为借鉴参考,但却没能找到比较满意的,找到了一些零散的内容(当然有些还是有参考价值的),所以就觉得交互规范这方面的内容比较少,就来此给分享一下自已整理的规范。本规范是PC端 web管理系统的规范,文档结构和内容有参考过网上一些大牛的分享,个人的思考并不完善希望各位大神多多指正和补充。不多讲了,请看正文…
本规范按web交互属性分三个部分:页面信息规范、信息交互规范、通用组件规范。

一、页面信息规范
页面命名
页面兼容
文字
内容图片

二、信息交互规范
数据操作
链接
提示信息

三、通用组件规范
导航
表单
按钮
加载
失败/空页面
鼠标
键盘


一、 页面信息规范

  1. 页面命名
    每个页面都要有与之模块对应的名称。
  2. 页面兼容性
    (1)页面大小兼容
    自适应1366*768px及以上的分辨率
    默认窗口设置下,不应出现水平滚动条,避免出现垂直滚动条(当内容过多时允许滚动条)
    (2)弹窗、弹页要保证768高度的分辨率显示正常,同时能移动查看弹出框内容。弹出框高度为不超过450px,且显示在内容页面相对水平、垂直相对居中位置。

浏览器兼容
兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。

  1. 文字
    (1)文字用系统自带的常规字体,且分一级标题、二级标题、主内容文字、次内容文字、辅助文字(说明或引导性文字,提醒性文字),分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。
  2. 内容图片
    (1)内容图片均带1px描边。
    (2)内容图片未加载出来时显示系统默认图片。

二、 信息交互规范

  1. 数据操作
    显示数据(表格)
    (1)表头:字体加粗、且比单无格内容字体大一号,且体字体大小参照UI效果图。
    (2)单无格:文字图片内容左对齐,数字、金额内容右对齐。
    (3)操作内容原则上均用文字表达,如“编辑-删除”
    (4)鼠标划过表格单行时,颜色高亮。
    (5)原则上每页显示15-20条数据,实际显示条数据可按设计排列效果而定。
    (6)表格中不定长的字段,固定显示宽度,超出内容用“…”显示光标停留后,在浮动层显示详细内容。

选中数据
(1)勾选全选则选中当页所有记录
(2)去掉当页某个记录的勾选,则全选也去掉勾选。
(3)翻页后,自动去掉已勾选的记录及全选的勾选。
(4)翻页后是否进行选择记录的保留应试具体业务而定。
(5)刷新页面后,自动去掉已勾选的记录及全选的勾选。

新增数据
(1)新增的记录必须排在新增页的首行;
(2)所有列表页面默认按数据新增时间倒序排列。
(3)提交失败后留在当前提交页,且保存用户已经输入的内容以便再次提交。
(4)提交成功后自动回到数据列表页。
(5)提交时需对主要标识字段进行重复值、空值(空格)判断。

修改数据
(1)修改完成后必须回到原记录所在位置,且刷新显示修改后的值。
(2)提交失败后留在当前提交页,且保存用户已经输入的内容以便再次提交。
(3)在查询条件下修改返回后,保留原有查询条件,且修改后的数据如果不满足查询条件则不显示。
(4)提交时需对主标识字段进行重复值、空值(空格)判断。

查询数据
(1)把所有查询条件全部显示出来,并放在查询列表上方位置。
(2)每个查询条件必须有预置文案。
(3)每次查询后保留当前输入的查询条件。
(4)当未查询到任何记录时,需给予未查找到相关记录的提示信息。
(5)除了用户明确要求不需要外,需提供模糊查询功能。
(6)必须要有条件“重置”功能,重置后恢复到初始状态。

删除数据
(1)必须有确认删除的提示信息。
(2)删除成功后刷新不显示删除的记录。
(3)删除成功后返回到原记录所在页面,而当原记录所在页不存在时,则返回上一页。
(4)当被删除的记录与其他记录存在关联时,请示需求界面给予不允许删除、更明细提示等信息。

提交/上传数据
(1)当提交所费的时间较长时,需给出等待的提示,如:沙漏、菊花、进度条等。
(2)提交时需对主标识字段进行重复值、空值(空格)判断。
(3)提交成功后不可重复提交,有列表展示提交内容的直接返回到展示页面。
(4)必须要有“取消或返回”功能。

分页
(1)当对查询结果进行分页时,分页的同时需要能够执行查询功能;
(2)当页数较多时,允许输入具体页数进行查询;

取消
(1)取消必须给予提示。
(2)取消操作后须返到原记录所在状态。

返回
(1)当从一个页面点击按钮或链接进入子页面时,子页面必须提供返回按钮

  1. 链接
    (1)链接文字或图片当鼠标划过时会变成点击手形。
    (2)本窗口打开:查询结果、上下翻页、新增、修改等操作在本窗口打开。
    (3)新窗口打开:各类详情、预览页面等采用新窗口打开。
  2. 提示信息
    预先信息提示
    (1)内容提交类:每个输入项、条件选选项(包括时间选择)均需要给出提示信息。该提示信息可放置在输入框内或者控件尾部(如密码要多少多少位。搜索框提示用户输入什么内容等。)
    (2)谨慎类操作:针对不可修改、重要操作选择等操作属于谨慎类操作,均需给出提示信息。如审核是否通过操作、退款申请操作、价格输入等。

操作信息提示
(1)确认提示:修改设置、删除数据等操作时需要弹出提示框,用户需要选择后方可执行。
(2)错误提示:当用户的操作不符合规则、输入数据不符合规则需要给出操作提示。比如输入数值不符系统规定,则进行提示。
(3)错误提示分为:即时提示、提交后提示。本系统这里统一用即时提示。
(4)读取提示:涉及到大量信息读取缓慢的时候应该进行提示。比如进入后台查看商品列表时,由于网络、数据量大等原导致载入缓慢,应该显示读取提示信息,已避免用户过度重复点击操作。

结果信息提示
(1)保存结果提示:当进行商品添加/修改此类涉及到数据保存的操作,不管是否成功均需给出提示。统一用Toast提示,内容为“保存成功!”原则上保存之后直接显示结果页(也可视具体情况定)。
(2)查询结果提示:任何信息列表、查询结果,当对应信息结果的时候需要给出有无结果状态提示。不得使用空白信息。

三、 通用组件规范

  1. 导航
    菜单导航栏
    (1)导航路径:原则上不超过三级就能到达用户想要的主要页面,且随时能返回。
    导航菜单:各级别的菜单宽高一致,样式一致。鼠标划过或点击选中菜单模块时会有突出(比如高亮)状态显示。
    (2)有子菜单的模块默认不显示子菜单,点击后显示子菜单,再次点击时可收起。

当前位置导航
(1)原则上每个页均有“当前位置导航”,但弹出页、预览页等特殊页面无需当前导航。
(2)若当前位置导航有多个层级,则当前层级的前面层级均可链接到相应页面。
(3)当前位置导航位置固定,具体位置参考UI设计效果图。

  1. 表单
    (1)表单输入框由 表单字段名称: + 输入框组成,字段名称原则上2-4个汉字。
    (2)预置文案:输入框内均需有预置文案,且光标进入输入框获得焦点时文案自动消失,若输入框失去焦点且未输入任何文字时恢复预置文案。
    (3)下拉选择框中内容有多级时,只显示一级,其他级呈灰色不可用状态,选择一级后才会激活第二级,以此类推。如:部门作为查询条件时,点击下拉框,默认只有一级部门可用,点击一级部门再激活开显示二级部门。
    (4)界面的必填项以红色*号标识出来,且标识在“表单字段名称”前面。存在必填项未填写时,输入框失去焦点即时提示,输入框红色描边,且输入框下方左有相应红色提示文案。输入框未曾获得过焦点直接提交时,同样输入框红色描边+红色提示文案提醒。
    单行输入框:在未限制字数情况下,当输入文字比前输入框长时,最先输入的文字隐藏,光标和最后一个输入的文字显示在输入框尾部。
    (5)多行输入框:需要有“当前已输入字数/最多可输入字数”(如:50/100)。
    (6)与限制条件不符的费法输入应即时提醒。
    (7)只允许输入日期、时间的输入框需要通过格式化方式约束输入,而不是输入非法值后给出提示;
  2. 按钮
    (1)按钮种类:优先操作按钮,次要按钮,不可用按钮。
    (2)按钮状态:默认显示状态,鼠标经过状态,点击状态。
    (3)按钮位置:按windows交互习惯先优先后次要(左确定,右取消)。
    (4)按钮样式:可直接写文字,或文字+图标(具体方案参照UI设计效果图),原则上按钮上文字为2-4个汉字。
  3. 加载
    (1)当数据获取较慢,或网络状况不佳时,要有统一的加载方案图示告诉用户“数据正在加载中…”。(如:漏斗、菊花、进度条等)具体图文可参与UI设计效果。
  4. 失败/空页面
    (1)当页面没有数据、加载失败或出错时,要有统一的提示文案图标告诉用户“页面加载失败/暂无数据/页面出错”,具体图文可参与UI设计效果。
  5. 鼠标
    (1)默认状态鼠标为“箭头形状”,经过可点击元素时变为“手指状”,在可输入框中为“竖线光标状”
  6. 键盘
    (1)支持回车键提交
    (2)支持回车键查询
    (3)支持tab键移动光标焦点,移动遵循从左至右,从上至下的原则

公司级的规范文档格式并不是像上文一样,但鉴于简书排版能力有限,只能做到这样子了,哈哈……,有想要文档格式参考的小伙伴可以加我 QQ:275371854(同微信),也欢迎各位喜欢UI交互设计的小伙伴们一起交流学习。

文/边跑边学走
原文链接:http://www.jianshu.com/p/677868714757
著作权归作者所有,转载请联系作者获得授权。

创业还没听过在线Logo生成器? 那你就落伍了!

IvySung阅读(1251)

创业还没听过在线Logo生成器? 那你就落伍了!

创业的第一步 – Logo

不论是创业或创建新的网站,踏出成功的关键第一步是设计出一个易于一般社会大众识别的logo,以传达企业或服务宗旨,打造企业的视觉形象。

品牌Logo可以说是你的企业或网站的门面。Logo以抽象或具体图形来体现你的品牌精随,并且是一种可应用于在线或离线的推广品牌元素。

聘请专业设计师

说得容易,做更难!一个小小的logo看起来微不足道,却并非轻而易举就能设计出优秀的logo。往往必须找到很有天分的设计师才能够设计出充分诠释企业精神的logo。虽然要找到这样的设计师并不容易,但只要用对管道通常都能找得到经验丰富的logo设计师。通过这种方法设计logo最大的缺点是你必须有大笔经费,聘请一名专业设计师的高成本对创业中的市场新鲜人而言真的是很吃不消!

还有其他设计Logo的方法吗?

在聘请一名专业的平面设计师之前,不妨尝试使用在线logo生成器来帮助你制作logo。市面上有许多工具可使用,有些甚至是让你免费在网上使用。这对投资成本抓得紧的新鲜创业人来说是创业艰辛路上的一丝署光。

在线Logo生成器怎麽用?

市面上的logo生成器大同小异,在这里就目前市场上最热门的在线logo生成器 – Logaster,来举例说明。这是目前网上最方便使用,也是制作效果最佳的在线logo制作网站之一。使用Logaster你还能制作名片丶网站图示和信封等。设计出来的logo不但专业又美观,成本低又不失高雅大方。关键是省时丶省钱丶省力,是创业人的好帮手!

image001

 

 

让我们开始制作你的企业专属logo吧!跟着以下步骤操作,三两下立即见效:

1步进入主页,点击“开始制作logo”。新窗口将打开。输入logo名称(例如,你的公司或网站名称),并选择logo类别。

image003

2步Logo生成器将为你生成多种logo概念,从中选择你最喜爱的一个logo。

image004

3步编辑你选择的logo(更改图标丶字体丶色彩元素,添加或删除标语等)或不做更改直接保存

image005

4步下载logo。 Logaster支持各种常用的图像格式,如PNG,PDF,SVG, JPEG等。

image006

 

这样就大功告成啦!恭喜你成功踏出创业的第一步! 你已经完成你的第一个logo。重复所有步骤直到制作出你满意的logo为止。如果最初的几个logo看起来不怎麽美观也不要气馁,多试几次就能驾轻就熟。如果你的logo只是使用于个人网站或非商业用途网站,那麽你所设计出来的logo应当足以发挥效用。商业网站的logo设计必须多花一点时间与公司内部团队讨论,浏览Logaster网站上出色的logo案例能帮助你汲取更多灵感,设计出令人印象深刻与耳目一新的企业logo。

 

原创作者: Ivy Sung 创业人经验分享

微信小程序设计指南 · 小程序

阿西UED阅读(2275)

概要

基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢。

友好礼貌

为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地引导用户进行操作。

重点突出

每个页面都应有明确的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容,在确定了重点的前提下,应尽量避免页面上出现其他干扰项影响用户的决策和操作。

反例示意

此页面的主题是查询,却添加了诸多与查询不相关的业务入口,与用户的预期不符,易造成用户的迷失。

1474696462-8421-1-1-1

纠正示意

去掉任何与用户目标不相关的内容,明确页面主题,在技术和页面控件允许的前提下提供有助于用户目标的帮助内容,比如最近搜索词,常用搜索词等。

1474696461-5074-1-1-2

反例示意

操作没有主次,让用户无从选择

1474696462-2255-1-1-3

纠正示意

首先要避免并列过多操作让用户选择,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。

1474696464-3424-1-1-4

流程明确

为了让用户顺畅地使用页面,在用户进行某一个操作流程时,应避免出现用户目标流程之外的内容而打断用户。

反例示意

用户本打算进行搜索,在进入页面时却被突如其来的抽奖弹窗所打断;对于抽奖没有兴趣的用户是非常不友好的干扰; 而即便有部分用户确实被“诱人”的抽奖活动所吸引,离开主流程去抽奖之后可能就遗忘了原本的目标,进而失去了对产品真正价值的利用和认识。

1474696464-8803-1-2-1

清晰明确

一旦用户进入我们的小程序页面,我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路,这样才能为用户提供安全的愉悦的使用体验。

导航明确,来去自如

导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户,我在哪,我可以去哪,如何回去等问题。首先在微信系统内的所有小程序的全部页面,均会自带微信提供的导航栏,统一解决我在哪,如何回去的问题。在微信层级导航保持体验一致,有助于用户在微信内形成统一的体验和交互认知,无需在各小程序和微信切换中新增学习成本或改变使用习惯。

微信导航栏

微信导航栏,直接继承于客户端,除导航栏颜色之外,开发者无需亦不可以对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系,让导航系统能够以合理的方式工作。

微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色,在iOS和Android展示有所不同,如下图所示:

导航区(iOS)

导航区通常只有一个操作,即返回上一级界面。开发者可定义其内容,不可对样式进行修改

导航区(Android)

同iOS一样,导航区也只有一个返回上一级页面的操作,而点击安卓手机自带的硬件返回键也起到相同作用。

1474696465-1284-2-1-1

微信导航栏自定义颜色规则(iOS和Android)

小程序导航栏支持基本的背景颜色自定义功能,选择的颜色需要在满足可用性前提下,和谐搭配微信提供的两套主导航栏图标。建议参考以下选色效果:

选色方案示例

1474696466-3403-2-1-2

页面内导航

开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致。但是受限于手机屏幕尺寸的限制,小程序页面的导航应尽量简单,若仅为一般线性浏览的页面建议仅使用微信导航栏即可。

微信控件库提供标签分页(Tab)导航供开发者选择。标签分页栏可固定在页面顶部或者底部,便于用户在不同的分页间做切换。为确保点击区域,标签不得超过4项。一个页面也不应出现一组以上的标签分页栏。

标签分页栏选中态默认为100%实色,未选中态带有60%,其中选中态颜色可自定义。在自定义颜色选择中,务必注意保持分页栏标签的可用性、可视性和可操作性。 1474696467-6075-2-2-7

1474696468-7877-2-2-8

减少等待,反馈及时

页面的过长时间的等待会引起用户的不良情绪,使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此,当不可避免的出现了加载和等待的时候,需要予以及时的反馈以舒缓用户等待的不良情绪。

启动页加载

小程序启动页是小程序在微信内容一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需开发者开发。

1474696468-5047-2-2-1

页面下拉刷新加载

在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式。 开发者可自定义需要通过下拉交互完成刷新的页面,此类交互微信将提供标准能力和样式。在样式上,刷新图标与下拉标示配色已捆绑,分为深浅两套方案,开发者在使用时,应注意头部文字、下拉标识与刷新图标的和谐统一。当用户在该类页面做出下拉交互时,出现微信小程序页面标准加载动画。开发者无需自行开发样式

1474696470-8273-6-1-1

带有标签分页(Tab)页面的下拉刷新加载

若页面带有标签分页(Tab),开发者可将刷新动作位置定义到标签栏之下,且仅刷新当前页面内容,开发者暂无法自行定义此加载效果。

1474696471-2163-2-2-5

深浅两套下拉样式

微信下拉提示用于给用户明确的小程序归属者,防止造假与作弊。此处标示提供深浅两套方案,文字颜色不可自定义,开发者在自定义背景色时,应注意保证下拉标示的辨识度。iOS和Android配色方案相同如下展示。

1474696471-3601-2-2-4

微信下拉标示错误使用案例

请避免以下错误使用情况,确保信息的可见性和页面的可用性

1474696472-8556-2-2-6

1474696473-2819-2-2-8

页面内加载反馈

开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全体,自定义加载样式都应该尽可能简洁,并使用简单动画告知用户加载过程。 开发者也可以使用微信提供的,统一的页面加载样式,如图中例所示。

1474696474-7148-2-3-1

模态加载

模态的加载样式将覆盖整个页面的,由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感,因此应谨慎使用。除了在某些全局性操作下不要使用模态的菊花。

1474696474-7284-2-3-2

局部加载反馈

即只在触发加载的页面局部进行反馈,这样的反馈机制更加有针对性,页面改动小,是微信推荐的反馈方式。例如:1474696475-1771-2-3-3

加载反馈注意事项

  • 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
  • 载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。
  • 不要在同一个页面同时使用超过1个加载动画。

结果反馈

除了在用户等待的过程中需予以及时反馈外,对操作的结果也需要予以明确反馈。根据实际情况,可选择不同的结果反馈样式。对于页面局部的操作,可在操作区域予以直接反馈,对于页面级操作结果,可使用弹出式提示(Toast)、模态对话框或结果页面展示。

页面局部操作结果反馈

对于页面局部的操作,可在操作区域予以直接反馈,例如点击多选控件前后如下图。对于常用控件,微信设计中心将提供控件库,其中的控件将提供完整操作反馈。

1474696476-6022-2-3-4

页面全局操作结果——弹出式提示(Toast)

弹出式提示(Toast)适用于轻量级的成功提示,1.5秒后自动消失,并不打断流程,对用户影响较小,适用于不需要强调成功状态的操作提醒。特别注意该形式不适用于错误提醒。

1474696476-2156-2-3-5

页面全局操作结果——模态对话框

对于需要用户明确知晓的操作结果状态可通过模态对话框来提示,并可附带下一步操作指引。

1474696477-1862-2-3-6

页面全局操作结果—结果页

对于操作结果已经是当前流程的终结的情况,可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成,并可根据实际情况给出下一步操作的指引。

1474696478-4612-2-3-7

异常可控,有路可退

在设计任何的任务和流程时,异常状态和流程往往容易被忽略,而这些异常场景往往是用户最为沮丧和需要帮助的时候,因此需要格外注意异常状态的设计,在出现异常时予以用户必要的状态提示,并告知解决方案,使其有路可退。

要杜绝异常状态下,用户莫名其妙又无处可去,卡在某一个页面的情况。2.2中所提到的弹窗和结果页面都可作为异常状态的提醒方式。除此之外,在表单页面中尤其是表单项较多的页面中,还应明确指出出错项目,以便用户修改。

异常状态——表单出错

表单报错,在表单顶部告知错误原因,并标识出错误字段提示用户修改

1474696479-4337-2-3-8

便捷优雅

从PC时代的物理键盘鼠标到移动端时代手指,虽然输入设备极大精简,但是手指操作的准确性却大大不如键盘鼠标精确。为了适应这个变化,需要开发者在设计过程中充分利用手机特性,让用户便捷优雅的操控界面。

减少输入

由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在设计小程序页面时因尽量减少用户输入,利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

减少输入,巧用接口

例如下图中,在添加银行卡时,采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 ,充分利用这些接口将大大提高用户输入的效率和准确性,进而优化体验。

1474696479-6572-3-1-1

除了利用接口外,在不得不让用户进行手动输入时,应尽量让用户做选择而不是键盘输入。一方面,回忆易于记忆,让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入;另一方面,仍然是考虑到手机键盘密集的单键输入极易造成输入错误。 例如图中,在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索,而减少或避免不必要是键盘输入。

1474696480-2556-3-1-2

避免误操作

因为在手机上我们通过手指触摸屏幕来操控界面,手指的点击精确度远不如鼠标,因此在设计页面上需点击的控件时,需要充分考虑到其热区面积,避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时,往往就容易出现这样的问题。由于手机屏幕分辨率各不相同,因此最适宜点击像素尺寸也不完全一致,但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准组件库中,各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配,因此再次推荐使用或模仿标准控件尺寸进行设计。

利用接口提升性能

微信设计中心已推出了一套网页标准控件库,包括sketch设计控件库Photoshop设计控件库,后续还将完善小程序组件,这些控件都已充分考虑了移动端页面的特点,能够保证其在移动端页面上的可用性和操作性能;同时微信开发团队也在不断完善和扩充微信小程序接口,并提供微信公共库,利用这些资源不但能够为用户提供更加快捷的服务,而且对页面性能的提高有极大作用,无形之中提升了用户体验。

统一稳定

除了以上所提到的种种原则,建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性,在不同的页面尽量使用一致的控件和交互方式。

统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标,减轻页面跳动所造成的不适感。正因如此,小程序可根据需要使用微信提供的标准控件,以达到统一稳定的目的。

视觉规范

为方便设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;同时提供方便开发者调用的资源。

预览地址:https://weui.io

字体规范

微信内字体的使用与所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, 11(pt),使用场景具体如下:

1474696481-3254-5-1-1

字体颜色

1474696481-3838-5-1-3

主内容 Black 黑色,次要内容 Grey 灰色;时间戳与表单缺省值 Light 灰色;大段的说明内容而且属于主要内容用 Semi 黑;

1474696482-3191-5-1-4

蓝色为链接用色,绿色为完成字样色,红色为出错用色 Press与 Disable状态分别降低透明度为20%与10%;

1474696483-9297-5-1-5

列表视觉规范

1474696483-4058-5-2-1

表单输入视觉规范

1474696484-6433-5-3-1

按钮使用原则

列表外按钮上文字标准

按钮高度为44px下使用: 颜色 #000000 / #353535 字号 18pt

  • 可点状态下文字调整透明度为60%
  • 不可点状态下文字调整透明度为30%

    1474696485-2059-5-4-1

列表外按钮上文字标准

按钮高度为25px下使用: 颜色 #000000 / #353535 字号 14pt

页面线性按钮上文字标准

按钮高度为35px下使用: 颜色 #09BB07 / #353535 字号 16pt

1474696485-3431-5-4-2

图标使用原则

1474696486-7141-5-5-1

苹果再次更新《App Store审核指南》,新增内容多达25处!

阿西UED阅读(1377)

近日苹果再次对《App Store审核指南》进行了更新!(这是苹果今年第三次更新《App Store审核指南》,前两次更新的时间分别是6月13日和4月19日)。
 
对比此前的版本,此次的修改和完善不仅涉及了SiriKit(Siri开发包)、Stickers(贴纸)等新的iOS特性,还增加了与应用标题、iMessage扩展、Safari扩展、订阅模式等有关的内容。除此之外,还对禁止诱导用户评论和窃取用户隐私等规定进行了重申。
 
为方便大家迅速get审核指南的最新动态,小编对修改和新增的内容进行了整理和总结,重点内容如下所示↓↓
1.应用名称必须限制在50个字符以内,且不应包含和应用名称没有关系的术语或描述等。
 
2. 应用程序不能强迫用户为应用评级/评论、下载其他应用程序或以访问功能、内容,或使用应用程序为目的的类似行为。
 
3. 即使应用已经审核通过,也应该随时更新你的应用,以确保它对新的和现有的用户是有用且具有吸引力的。应用不可用或出现崩溃现象将随时可能被从App Store移除。(苹果真的要开始清除App Store中的废弃应用了!)
 
4.关于新的订阅模式
①可以在你自己的App之间提供一个共享的订阅,但这些订阅不得扩展到第三方应用程序或服务中
 
②订阅内容不能包括消耗性积分、宝石、游戏内货币等等,即使和其他供应品结合的时候也是不被允许的。
 
③想基于订阅这种商业模式改变现有的应用程序时,不能取消现有用户使用那些已购买过的功能。
 
5.关于 Stickers(贴纸)
 
①对于贴纸的内容,确保你拥有所有必要的版权、商标、宣传的权利和许可。如果应用程序使用了没有获得相关权利的贴纸内容,则会被从App Store移除。对于屡犯者,将面临着从开发者计划中删除的后果。
 
②如果贴纸的含义不易理解,请在你的审核备注中添加明确的解释,以免延误审核过程。
 
考虑区域性敏感内容,如果你的贴纸包不太容易被接受,或者违反当地的法律,请不要让你的贴纸包在这个国家/地区可用。
 
6.Safari View Contoller必须向用户展示可视的页面,且控制器不能通过其他视图或图层隐藏或掩盖。此外,在没有用户知晓或同意的情况下,应用程序不能使用Safari View Controller追踪用户
 
从以上的修改部分我们不难看出:一苹果对App Store应用的审核有变严的趋势;二苹果以提前为iSO10做了多项准备。鉴于近来开发者踩雷屡见不鲜& iSO10正式登场的时间临近,小编将更新后的《App Store审核指南》也进行了翻译和整理,需要的同学请耐心阅读或收藏。
 
以下是更新后的审核指南(修改部分为红色字体):
 
 
目录
提交应用之前—检查列清单
1.安全
1.1 不当内容
1.2 用户生成的内容
1.3 儿童分类
1.4 人身伤害
1.5 开发者信息 
 
2.性能
2.1 应用程序的完整性
2.2 Beta版测试
2.3 应用内容的准确性
2.4 硬件兼容性
2.5 软件要
 
3.业务
3.1 付款 
     3.1.1 应用内付费
     3.1.2 订阅
     3.1.3 基于内容的“阅读”应用
     3.1.4 代码:
     3.1.5 应用之外的商品和服务
     3.1.6 Apple Pay
3.2 其他商业模式问题
     3.2.1 可接受的方式
     3.2.2 不可接受的方式
 
4 .设计
4.1 模仿者
4.2 最少功能
4.3 垃圾应用
4.4 扩展
4.5 苹果网站和服
 
5.法律
5.1 隐私
     5.1.1 数据收集和存储
     5.1.2 数据的使用和分享
     5.1.3 卫生与健康研究
     5.1.4 儿童
     5.1.5 位置服务
5.2 知识产权
5.3 游戏、赌博、彩票
提交应用之后—期待
 
提交应用之前
为了帮助你的应用尽可能顺利地通过审核,请查看下列可能降低审核速度或导致应用被拒的常见问题。本清单无法代替审核条款或保证应用过审,但如果你确保你已经达到了清单的各项要求,这将是个良好的开始。
确保你已经:
  • 测试你的应用程序,确保它不会发生崩溃和bugs。
  • 确保应用的所有信息和元数据是完整且准确的。
  • 更新联系人信息,确保审核团队可以及时联系到你。
  • 提供一个有效的测试帐号和登录信息,并提供测试应用时所需的硬件和资源(例如,一个测试用的二维码)。
  • 保证审核期间后台运行正常。
  • 如果应用的某些功能和应用内购买隐藏地较深,则需要在审核备注中提供详细的描述文档和支持文档。如果因为地域或其他限制导致我们无法正常使用应用的某些功能,请提供该描述该功能的视频链接。
  • 检查你的应用程序是否符合其他指导性文档,例如:
 
开发指南

App Programming Guide

(应用程序编程指南)

App Extension Programming Guide

(应用扩展编程指南)

iOS Data Storage Guidelines

(iOS数据存储条款)

Mac OS X File System Documentation

(Mac OS X文件系统文档)

Safari Extensions Development Guide

(Safari扩展开发指南)

iTunes Connect Developer Guide

(iTunes Connect者开发指南)

 
设计指南

iOS Human Interface Guidelines

(iOS人机界面准则)

Mac OS Human Interface Guidelines

(Mac OS人机界面准则)

tvOS Human Interface Guidelines

(tvOS人机界面准则)

watchOS Human Interface Guidelines

(watchOS人机界面指南)

 
品牌营销指南

App Store Marketing Guidelines

(App Store市场营销指南)

Apple Pay Identity Guidelines

(Apple Pay识别标志指南)

Add to Apple Wallet Guidelines

(加入Apple Wallet指南)

Guidelines for Using Apple Trademarks and Copyrights

(使用Apple商标和版权的条款)

一. 安全 
当用户从App Store安装应用时,他们需要确认这种行为是安全的。所以,应用程序中不能包含令人烦恼的,或者具有攻击性的内容,且使用过程中不会造成身心伤害。我们列出了集中常见的缺陷,如果你的应用准备吓唬或与冒犯用户,App Store将不是你的应用应该上架的地方。1.1 不当的内容应用程序不应该包括具有攻击性、敏感、令人不悦、侮辱或品味低下的内容。例如:1.1.1 诽谤或人格侮辱的内容,包括引用或评论宗教、种族、性取向、性别或其他目标人群的内容,尤其是该应用对特定的人或群体造成了伤害(只有专业的政治讽刺作家和幽默大师才不会受到此限制)。1.1.2 针对人或动物被杀害、致残、折磨、虐待等较为逼真的描述,或具有鼓励暴力倾向的内容。如果是游戏应用,那么其中的敌人不能只针对特定的种族、文化、政府、公司以及任何其他实体。

1.1.3 叙述中鼓励人们非法或者轻率地使用武器和某些危险品,或为人们购买枪支提供方便。

1.1.4 公开的性爱或色情的内容。根据韦氏词典的定义,这些内容特指“明确地描述或展示性器官,或其目的在于激发人们的性欲,而不是展示美学或者渲染气氛”。

1.1.5 煽动宗教仇恨或者对宗教文献的误导性和不准确的引用。

1.1.6 提供虚假的信息和功能,包括提供不正确的设备信息或具有欺骗性质的的功能,例如:虚假的位置跟踪工具。即便明确指出该应用是“出于娱乐性的目的”也不能逃避该项规定。发送匿名虚假信息或拨打恶意电话的应用会被直接拒绝。

1.2 用户生产内容

为了防止非法滥用用户生成的内容,从而给用户提供虚假信息、盗取用户的知识产权,社交以及包含用户生成信息的应用必须包括下述功能: 
 
  • 从被发布的应用中过滤不良内容
  • 提供举报和反馈通道
  • 提供阻止骚扰用户的服务
  • 提供联系方式,让用户可以快速联系到你
 

如果应用使用用户生成的内容或提供服务时的主要目的是发布色情内容、人肉搜索、侮辱用户、恐吓用户等,那这种应用不应该放在应用商店中,且苹果可能会在不通知开发商的情况下直接将其下架。如果你的应用使用用户生成的信息来提供网络服务,并且网页上包含了一些限制级的内容,需要默认隐藏并且提供明显的NSFW(不适合工作场所)标识,用户主动点击才会显示。

1.3 儿童分类

儿童分类是人们找到适合儿童使用的应用的良好方式。如果你希望你的应用在这个类别中上架,你需要关注并且在设计应用时照顾到儿童的良好体验。这些应用程序不可以包括指向其他应用的链接、付费入口以及其他可能会吸引儿童的不适合的内容,除非提供家长监控和开启的功能。请记住,一旦客户期望你的应用程序遵循儿童类别的要求,那么它需要进行不断地修改从而满足后续版本的儿童类别的条款更新。即便你打算取消发布在儿童类别当中,也一样需要遵守这些条款。点此了解家长监控的更多内容。 
 

儿童类别的应用不允许包括基于用户行为的广告(也就是这种广告会根据用户行为而决定展示什么样的内容)。如果包含了广告,这些广告必须也适合儿童。与此同时,你也需要特别留意世界各地有关在线收集儿童数据的相关法律法规。请务必查看本条款的隐私条款来了解更多的相关信息。

1.4 人身伤害

如果你的应用程序可能会危害到人身安全,我们可能会拒绝掉它。这类情况包括:

1.4.1 如果你的应用属于医疗范畴,那我们将会对这个应用提供用于医疗诊断的信息的准确性进行更加严格的审查。如果你的医疗应用已经获得了相关监管部门的批准,你需要随同你的应用一并提供指向相关批准文档的链接用于审核 。

1.4.2 药物剂量计算器必须来自药物生产企业、医院、高校、健康保险公司以及其他具有合法资质的实体。或者你的计算方法已经获得了FDA或其他国际上的同行的认可。考虑到潜在的人身伤害的危险,我们需要确保你的应用会长期获得更新和支持。

1.4.3 应用程序不允许鼓励人们非法摄入过量的酒精或药物,或者鼓励未成年人消费药物、酒精和烟草。与此同时,严禁销售大麻等毒品。

1.4.4 应用程序只能显示执法机构提供的酒后驾驶检查站,而且不允许鼓励人们进行危险的行为,包括酒驾、超速。

1.4.5 应用程序禁止强迫人们采用违背苹果硬件的安全文档的方式,包括冒着设备损坏或者造成人身伤害的危险使用他们的设备。例如,应用程序不应该鼓励人们将设备塞到床垫下面或枕头下面充电。

1.5 开发者信息

用户需要了解当他们遇到问题的时候该如何与您联系。确保你提供的链接当中包含了使用户找到你的非常方便的方法。如果联系人信息不准确或者过期,这不仅令用户失望,在有些国家和地区这也属于违法行为。与此同时,确保支付许可包含发行商的有效联系信息,并且这些信息采用分配给发行商的来自权威机构的合法的根证书进行签名。
 
二. 性能
2.1 应用程序的完整性

提审版本的应用必须是最终版本,并且包含了所有应用内容以及所有有效链接。应用在提交的时候需要清除掉所有占位符、无效地址和临时内容。请确保你的应用在提交审核之前经过充分测试并且没有Bug,如果你的应用需要登陆,需要包含一个合法的账户而且对应的后台服务也是正常有效的。如果你的应用包含应用内付费,确保他们是完整的,最新的,并且审核人员可以很容易找到。如果不可以,需要提供明确的解释为何不行。不要把应用程序审核当作软件测试服务,如果你的应用不完整或者存在明显的技术缺陷,它将直接被拒绝。

2.2 Beta版测试

您的应用程序的测试版本不应该上架到应用商店,请使用Testflight来代替。如果你的应用提交到Testflight Beta,那么这个应用已经准备好对外发布,并且符合应用审核条款。请注意,Testflight版本的应用不允许从测试人员当中获取任何利益,包括来自众筹的资金。你应该对测试人员提供明确的更新说明。请通过Testflight Beta测试说明了解更多信息。

2.3 应用内容的准确性

客户在下载你的应用的时候需要明确了解你的应用是什么,所以请确保你的应用描述、截图、预览视频始终是最新版本,并且能够准确反映你的应用。

2.3.1不要在你的应用当中包含任何隐藏和没有相关说明文档的功能。你的应用程序的功能必须让用户和审核人员了解清楚。如果这样的行为过分或者反复出现,你可能会被苹果从开发者身份当中除名。我们努力确保App Store是一个令人信赖的生态系统,并且期望每一个开发者也能够遵守这种要求。如果你没有信誉,我们不想和你合作。

2.3.2 如果你的应用程序包含了应用内付费功能,请确保你的应用程序的描述、截图和预览视频能够明确表明哪些功能、关卡、订阅内容等需要额外购买。

2.3.3 你的截图必须符合你的应用程序的实际内容,而不是标题艺术,登陆界面和闪屏界面。

2.3.4 预览视频是让用户快速了解你的应用以及应用用途的好方法。为了确保人们清楚地了解他们会在你的应用当中获取什么,预览视频必须从应用本身的运行效果之中捕捉。而Stickers(贴纸)和iMessage扩展需要用户在短信软件中才能体验。你可以通过添加解说或文本描述等来帮助解答视频本身无法解释清楚的内容。

2.3.5 你需要遵守App Store的类别定义,并且为你的应用选择最合适的类别。如果你选择的类别不符合你的应用,我们可能会帮助你改变应用类别。

2.3.6 你必须诚实的回答iTunes Connect上面提供的年龄分级的问题,从而你的应用可以良好的使用家长控制功能。如果你的应用年龄分级不正确,用户可能会对你的应用程序的行为表示十分意外,这也可能导致某些国家和地区的监管部门对你的应用分级不正确的问题开展调查。

2.3.7 选择一个独一无二的应用名称,并确保设置的关键词能准确描述你的应用。请不试图使用任何商标术语、流行应用的名字以及其他毫不相关的词语来戏弄系统。应用名称必须限制在50个字符之内,且其中不能包含和应用名称没有任何关系的术语或者描述。苹果可能随时修改这些不恰当的关键词。

2.3.8 你的应用内容应该适合所有的用户,所以一定要确保你的应用图标、截图和预览视频能够准确的反映你的应用。即使你的应用程序年龄分级高于4+,你的图标、截图和预览视频也必须符合4+的年龄分级。例如你的应用是一个游戏,并且具有暴力内容,你必须选择一个不反映死亡、枪决的截图放到应用商店当中。记住确保你的应用内容,包括应用名称和图标(小图标、大图标、Apple Watch图标等)是一致的从而防止用户感到迷惑。

2.3.9 开发商具有保证版权合法的责任,包括应用程序图标,截图,预览视频的版权。图标、截图和预览视频需要使用一个虚构的账户的信息,而不是一个真实的用户信息。

2.3.10 确保你的应用专注于iOS、Mac、Apple TV or Apple Watch,在应用或者元数据中不包含其他平台的名称、图标、图像,除非有特定的、被认可的互动功能。

2.4 硬件兼容性

2.4.1 为了确保人们可以尽可能充分的体验你的应用,在可能的情况下iPhone应用也可以完美支持iPad。我们鼓励您建立通用的应用,使得用户可以在不同的设备上使用。

2.4.2 你的应用需要高效的利用电量。应用程序不应该快速的消耗电池电量并且产生过多的热量,或者对用户的设备造成不必要的负担。

2.4.3 你的Apple TV应用可以在只有Siri遥控器或者游戏手柄的时候可以正常运行,但我们不反对你通过更多的外围设备增强你的应用功能的做法。如果你需要一个游戏控制器,请确保在游戏当中对这个游戏控制器提供明确的教程,从而让用户知道如何使用这个控制器。

2.4.4 应用程序不应该建议或者要求设备重新启动。

2.4.5 通过Mac App Store发布的应用还需要遵守额外的要求:

(i)它们必须适当的被沙盒化,而且遵守Mac OS文件系统文档。这些应用也必须通过对应的Mac OSAPI来修改其他应用的数据(例如书签、地址簿和日历)。

(ii)必须使用Xcode对应用进行打包,不允许包含第三方的安装程序。它们必须是自我包含的、单一文件的安装包,而且不能在共享的位置安装代码和解压资源。

(iii)在未经用户允许的情况下不允许自动启动或者开机启动,而且用户退出应用之后不允许在未经用户同意的情况下残留后台进程。应用不允许自动将图标放在Dock或者用户桌面。

(iv)应用程序不允许私自下载和安装其他应用,驱动,额外的代码,以及添加应用功能或者明显改变与审核版本的应用不同的应用工作方式的资源文件。

(v)应用程序不允许要求升级到root权限,或者使用setuid属性来升级权限。

(vi)这些应用运行的时候不允许弹出要求许可证的窗口,或者其他的显示方式来反盗版(应用商店允许付费并视为购买了正版授权)。

(vii)必须使用Mac App Store发布更新,其他方式不被允许。

(viii)应用程序仅在在当前版本的系统就可以运行,不允许使用可选安装的技术或者废弃过时的技术(例如Java, Rosetta等)。

(ix)所有的本地化版本必须包含在同一个应用程序包下。

2.5 软件要求

2.5.1 应用程序只能使用公共API,不允许使用私有API。

2.5.2 应用程序bundle当中需要是自包含的,不允许读写它们设计的容器之外的数据,并且不得下载、安装或执行代码,包括其他iOS,watchOS,macOS和tvOS的应用。

2.5.3 如果应用程序传播病毒、文件、计算机代码或者其他可能损坏操作系统和硬件的功能,包括消息推送和游戏中心,将被拒绝。如果这种行为十分恶劣而且反复出现,开发者可能会被苹果除名。

2.5.4 多任务的应用只能在预期目的下运行后台服务,例如网络电话、音频播放、定位服务、任务计划、本地通知等。如果你的应用程序使用了定位服务,需要提供一个明确的提醒告诉用户这么做会加快电量消耗。

2.5.5 我们会在IPv6网络上审核你的应用,所以如果你的应用程序无法使用IPv6协议,可能会被拒绝。

2.5.6 应用程序如果浏览网络,必须使用WebKit框架和WebKit Javascript标准。

2.5.7 使用蜂窝数据网络播放的视频如果超过10分钟,必须使用HTTP Live Streaming技术并且提供192kbps的码率选项。

2.5.8 改动用户桌面/home界面环境体验的应用,以及模拟多应用小工具使用体验的的应用将会被拒绝。

2.5.9 应用程序如果修改了标准开关的功能,例如音量上下键和响铃开关,或者其他原生用户界面元素和行为将会被拒绝。

2.5.10 应用程序在提交的时候不允许包含一个空的广告栏或者测试广告。

2.5.11 SiriKit

(i) 集成 SiriKit(Siri开发包) 的应用程序只能注册不需要其他应用即可处理完成的事件。例如,如果你的应用是一个主打膳食计划的应用,你就不应该注册“开始锻炼”这种事件,即使和一款健身应用共享了集成。

(ii) 确保plist中的词汇和短语适合于你的应用,并且应用已经注册的事件通过 SiriKit 可以正常工作。
 
(iii) 尽可能以最直接的方式解决Siri的请求,不要在请求和执行之间插入广告或其他营销信息。当需要完成一个任务时,仅使用现有的间隙的UI(例如,让用户制定一种详细的锻炼形式)。
 
三. 业务 
你的应用可以在App Store当中有多种方式赚钱。如果你的应用的商业模式不够明显,请在应用内容或者审核备注当中提供商业化描述。如果你的应用程序的行为我们无法理解,或者你的应用内付费入口不够明显,将会使得你的应用审核速度变慢甚至被拒绝。尽管定价权在你,但是如果你的应用或者应用内付费存在明显的敲竹杠的行为,我们也会拒绝发布这个应用或者这个应用内付费。我们会拒绝掉视图以不正常的高价格欺骗用户的昂贵的应用。
 
如果我们发现你视图诱导用户给较高评价等操纵评价的行为,例如通过支付来诱导、过滤不良评价、通过水军刷虚假评价或者通过第三方的公司或团队代表您进行这类操作,我们会采取措施来维护App Store的环境,其中可能包括将你从开发人员当中除名。 
 
3.1 付款
3.1.1 应用内付费:
如果你希望通过付费才可以解锁你的应用当中的一些功能(例如,订阅内容,游戏货币,游戏关卡,获取优质内容,解锁完整版本),你必须使用应用内付费(IAP)。应用程序不允许包括按钮、链接或者其他调用方式和行为指导用户采用非IAP的方式付费。
 
通过IAP购买的游戏内的虚拟货币或积分必须只能在这个应用内才可以消费,不能过期,你应该确保你的应用针对具有可恢复的应用内付费具有恢复应用内付费的购买状态的功能和机制。
 
如果你的应用内付费的付费类型不正确,你的应用会被拒绝。
应用不可以直接或间接使用应用内付费的内容和功能向其他用户赠送礼品。
 
在Mac应用商店发布的APP需要使用其他机制或者包含一个插件而不是应用商店本身来完成这样的赠送功能。 
3.1.2 订阅:在App Store中,无论哪种类型的应用都可以提供自动更新的应用内付费订阅。当你将自动更新订阅合并到你的应用中时,一定要按照下面的指导方针。
 
3.1.2 (a) 允许的用途:如果提供自动更新订阅,你必须向客户提供持续的价值。例如(虽然下面的列表不是很详尽,但比较适合订阅):新游戏关卡、交互游戏、多玩家支持、应用提供一致且实质性的更新、访问大量的不断更新的媒体内容、软件即服务(SAAS)、云支持。此外:
 
  • 可以同时提供“菜单式服务”(例如,在提供整个影视资料库的订阅服务的同时,也提供单个电影的购买和租赁服务)。
 
  • 你可以在你自己的App之间提供一个共享的订阅,但这些订阅不得扩展到第三方应用程序或服务中。订阅必须在用户所有的可以符合应用安装条件的设备上都能够正常使用。了解更多关于跨应用程序共享订阅信息。
 
  • 应用程序不得强迫用户必须完成应用评级/评论、下载其他应用程序或其他类似行为之后才能访问某些功能、内容或者使用应用。
 
  • 和所有的应用一样,应该允许用户在没有执行其他附加任务的情况下,使用某些功能,比如在社会媒体上发帖、上传联系人、多次登录应用等。
 
  • 订阅内容不能包括消耗性积分、宝石、游戏内货币等等,即使和其他供应品结合的时候也是不被允许的。不过,你可以提供购买某些促销消耗品的订阅(例如,以优惠的价格购买宝石的会员)。
 
  • 如果你想基于订阅的商业模式改变现有的应用程序,则不能取消现有用户已经支付的主要功能。例如,在向新用户介绍某个订阅模式时,允许已经购买“解锁完整版游戏”的用户继续访问游戏。
 
3.1.2 (b) 升级和降级:用户应该有一个无缝升级/降级的体验,不能一不留神就订阅到只是类型上稍有区别的同一事物。阅读最佳实践管理你的订阅升级和降级设置。
3.1.2 (c) 订阅信息:要求客户订阅之前,你应该向用户清楚地描述价格、每月发行的次数、云存储的价格、哪种方式可以访问你的服务。此外,也要确保你已经清楚地传达了协议附表2中关于契约、税收、银行等方面的内容。
3.1.3 基于内容的“阅读”应用:应用可以允许用户访问他们之前购买的内容或者订阅的内容(比如报纸、杂志、书籍、音频,音乐,视频,专业的数据库,网络电话,云存储以及其他被批准的服务例如管理学生成绩和课程表的教育应用)。应用程序提供商不允许指引用户采用IAP之外的付费机制付费。 
3.1.4 代码:应用不允许使用自己的机制来解锁应用内容和功能。包括许可证密钥,增强现实的标识,二维码等。在条件不允许的情况下(例如这个功能需要搭配特定的硬件才可以使用,比如天文应用程序在有望远镜的情况下可以扩展它的功能),这些应用可以不使用应用内付费来解锁这些功能。应用程序的功能如果搭配一个被批准的硬件来使用(例如一个玩具),可以只解锁基本的功能,并提供一个应用内付费解锁增值功能。您不允许要求用户购买一个不相关的产品或者参加一个市场营销活动来解锁应用的功能。 
3.1.5 应用之外的商品和服务:如果你的应用允许人们购买商品和服务,但这些商品和服务的消费和该应用无关,你必须使用非IAP的方式完成支付。例如Apple Pay,信用卡和借记卡支付入口。应用程序可以使用批准的虚拟货币进行交易(例如比特币,狗狗币),只要这些付费方式遵守这个应用发布的国家和地区的相关法律法规即可。 
 
3.1.6 Apple Pay:使用Apple Pay的应用程序在出售商品或服务之前,必须提供所有商品和服务的信息给用户。必须正确的使用Apple Pay的品牌和用户界面元素,符合Apple Pay身份识别条款和人机交互界面条款(Apple Pay Identity Guidelines and Human Interface Guidelines)。使用Apple Pay提供定期付款必须提供下述信息:
 
  • 定期的时间长度以及明确指出在取消之前定期付款将一直持续
  • 每个周期提供什么样的功能和服务
  • 实际收费的账单
  • 取消定期付款的方式
3.2 其他商业模式问题
下面的列表并不全面,而且拟提交的应用可能会触犯我们以后更新的最新政策。但是这里面也提供了一些额外的你应该和不应该做的内容: 
 
3.2.1 可接受的方式
(i)你的应用可以展示给用户你开发的其他应用,但你的应用程序不能仅仅是提供其他应用程序的目录应用 。
(ii)展示或者建议其他的第三方应用的集合,并且这些应用被设计为在特定领域才发挥作用(例如健康管理,航空服务,交通服务),你的应用程序需要提供强大的编辑能力,使得它看起来不像是一个单独的商店页面。 
(iii)当租约过期的时候禁止用户访问特定的需要批准出租的内容(例如电影、电视节目、音乐和书籍)。但是其他的物品和服务不能过期。 
 
(iv)支付许可可以用于付款或者收费,转移优惠券和票据(例如电影票,优惠券和VIP凭证)。其他用途可能会导致应用被拒绝或者撤销支付许可证书。 
(v)保险类应用必须是免费的,符合发布地区的相关法律法规,且不能使用应用内付费。 
 

3.2.2 不可接受的方式

(i)展示第三方应用的界面、扩展、插件看起来和App Store很像,或者作为一般的兴趣集合。

(ii)苹果的硬件和系统内置的功能需要付费才可以解锁,例如通知推送,照相机,陀螺仪。包括苹果服务,例如苹果音乐的访问能力和iCloud存储的访问能力。

(iii)人为的增加广告的展示量和点击量,包括应用程序被设计为主要展示广告的应用。

(iv)在应用内为慈善机构募捐资金。这类应用在应用商店必须免费而且必须使用其他方式募捐资金,例如通过短信,网页内支付。

(v)通过某种方式人为限制应用的使用人群,例如通过位置或者载体来限制。

(vi) 应用应该允许用户在没有执行其他附加任务的情况下能使用某些功能,比如在社会媒体上发帖、上传联系人、多次登录等。应用程序不能强迫用户为应用评级/评论、下载其他应用程序,或以访问功能、内容、使用应用程序为目的的类似行为。
 
4.设计
苹果的用户非常喜欢那些简洁、精致、创新、易于使用的应用,这也正是我们希望在应用商店中看到的。虽然是你在设计伟大的应用,但以下条款是通过应用商店审核的最低标准。同时记住,即使应用已经审核通过,也应该随时更新你的应用,以确保它对新的和现有的用户是有用且具有吸引力的。应用不可用或出现崩溃现象将随时有可能被移除出App Store。
4.1 模仿者
拿出你自己的创意,我们知道你具有创意,所以请将你的创意实现出来。不要简单照搬应用商店当中的流行应用,或者仅仅对这个应用的名称和UI进行简单的修改并将其作为自己的应用。除了冒着侵犯他人知识产权的风险外,应用商店也难以搜索到正确的应用,并且这也使得你的同行受到不公正的待遇。 
4.2 最少功能
你的应用在除了仅仅包装一个网站页面之外还要包含其他的功能和内容。如果你的应用程序不是特别有用、独特、或者看起来像是一个应用程序,那么它不应该在应用商店上架。如果你的应用没有提供持久的娱乐价值,或者仅限于让人们感觉毛骨悚然,这个应用可能会被拒。如果应用仅仅是一首歌曲或者一部电影,它应该被提交到iTunes Store。如果应用仅仅是一本书或者一本游戏指南,那它应该被提交到iBooks商店。 
 
4.2.1 应用程序应该按照它的预期目的来调用API和开发框架。并且在应用描述当中明确指出这种融合方式。例如,HomeKit框架应该提供家庭自动化服务,HealthKit应该是基于健康和健身的目的并且集成在健康类应用程序当中。 
4.2.2 除了目录用于提供专门的类别之外。应用程序的主要功能不应该是提供营销材料,广告,网络剪辑,内容聚合或者链接集合。 
 
4.2.3 你的应用程序应该不依赖其他应用或功能就可以正常工作。 
 
4.2.4 Apple Watch应用如果看起来像是一个表盘会令用户困惑,因为用户期望Apple Watch具有丰富的功能,例如刷卡,消息提醒和第三方服务。如果你的应用程序使用独特的方式展示时间是具有创造性的(例如对于冲浪爱好者展示潮汐的时间),但是如果你的应用看起来特别像传统的手表的表盘,我们会拒绝它。 
 
4.2.5 如果应用的主要功能是访问iCloud以及iCloud的文件管理器,你需要提供额外的附加功能来使你的应用批准上架。 
4.3 垃圾应用
不要为同一个应用程序创建多个Bundle ID。如果你的应用程序有多个版本,例如针对特定的国家和地区的版本,体育队伍,大学等,考虑提交一个版本的应用但是使用应用内付费来作区分。此外还要避免将你的应用放到已经饱和的分类下。App Store当中已经有了足够多的手电、放屁、打嗝、和某种不好的词语的应用。如果想要往App Store投放垃圾应用可能会导致你的开发者资格被撤销。 
 
4.4 扩展
应用程序扩展必须符合应用程序扩展开发指南(App Extension Programming Guide)或Safari扩展开发指南(Safari Extensions Development Guide),并且如果可能应该包括额外的功能,例如帮助界面,设置界面等。扩展应用的界面不应该包括市场营销内容,广告和应用内付费。 
 
4.4.1 键盘扩展包括一些额外的规则,
 
他们必须: 
 
  • 提供键盘输入功能(例如:键入字符);
  • 提供切换输入法的方法;
  • 在没有网络的状态下仍能正常访问;
  •  根据《App Extension Programming Guide》(应用扩展开发指南)的要求提供数字和小数的输入键盘;
  • 收集用户信息只以增强iOS设备的键盘扩展功能为目。
 
他们不能:
 
  • 包括市场营销、广告或应用内购买;
  •  在设置以外启动其他应用;
  •  为了其他行为重置键盘按钮,例如:按住“返回”键启动相机。
 
4.4.2 Safari扩展必须可以在当前OS X系统上的Safari浏览器上正常运行,它们不能干扰到系统和Safari UI元素,并且绝不能包含恶意或者误导用户的内容或代码。违反此规则将会被从开发者计划中除名。除了必要的功能,Safari扩展不能要求访问更多的网站。
 
4.4.3 Stickers
Stickers(贴纸)是一种伟大方式——它不仅能让信息充满活力和乐趣,还能让人们以睿智、有趣、富有意义的方式表达自己。无论你的应用是包含标贴纸扩展,还是你创建了一个独立的贴纸包,它的内容都不应该冒犯用户、营造负面的体验,或违反法律。
 
(i) 一般来说,如果它不适合上传至应用商店,那它就不适合作为一款贴纸应用。
 
(ii) 考虑区域性敏感内容,如果你的贴纸包不太容易被接受,或者违反当地的法律,请不要让你的贴纸包在这个国家/地区可用。
 
(iii) 如果我们不理解你的贴纸的含义,请在你的审核备注中添加明确的解释,以免延误审核过程。
 
(iv) 确保你的贴纸内容不仅仅来源于你的朋友和家人,它们不应该针对个人事件、组织、或关系。
(v) 对于贴纸的内容,你必须拥有所有必要的版权、商标、宣传的权利和许可。且除非你获得了授权,否则你不能提交任何内容。记住,你必须能够根据要求提供可核实的文件。如果应用程序用了没有权利使用的贴纸内容,它将会被从App Store删除。对于屡犯者,将会被移除开发者计划。如果你确信你的内容被另一个供应商侵犯了,可以在这里提出申诉。
4.5 苹果网站和服务
4.5.1 应用可以订阅一些苹果提供的RSS源,例如iTunes Store RSS源。但是不能收集从苹果网站上获得的任何信息(包括apple.com,iTunes Store,App Store,iTunes Connect,开发人员门户网站等),或者创建一个基于这些信息的排名。 
4.5.2 苹果音乐API可以允许用户在使用你的应用的时候访问他们的订阅内容。用户必须主动使用播放、暂停和跳过按钮来访问播放列表,不允许应用擅自访问和播放。此外你的应用不允许要求用户必须付费或者间接赚钱才可以访问苹果音乐服务(例如应用内付费,观看广告,获取用户信息等)。 
 
4.5.3 不要使用苹果服务去发送垃圾信息,钓鱼,发送垃圾邮件。包括游戏中心,推送消息等。不要尝试反向追踪,扫描,嗅探,或者非法获取玩家ID,别名和其他来自Game Center的信息,否则你会被从开发者当中除名。 
 
4.5.4 推送通知不得作为应用必选项才能使用这个应用,不能用于广告,促销和直销的目的,或者发送敏感和机密信息。 
 
4.5.5 只能使用Game Center规定的方式访问Game Center玩家ID等信息,但不能展示在APP当中或者分发给第三方厂商。
 
五.法律  
应用程序必须遵守当地的所有法律法规才可以正常使用(如果你不确认需要遵守哪些法律法规,请咨询律师)。我们了解这些事情十分复杂,但是保证遵守当地一切适用的法规是你应尽的义务,不仅仅是遵守我们的条款。当然,如果应用程序拉帮结派、煽动和蛊惑人们犯罪的这种鲁莽行为会直接导致应用被拒。 
 
5.1 隐私
保护隐私是苹果生态系统当中的重中之重。你应该谨慎小心的使用收集到的个人信息,以确保你遵守适用的法律条款和苹果开发人员计划许可协议(Apple Developer Program License Agreement)。更不用说这些都是用户对你的的期望。更具体地说: 

5.1.1 数据收集和存储

(i)收集或使用用户数据的应用必须提供隐私政策,并且需要加密用户数据。这些数据包括但不限于HealthKit,或其他健康/医疗技术、HomeKit、键盘扩展、Apple Pay、Stickers和iMessage扩展的应用,还包括登陆、访问设备上的用户数据(例如,地理位置、通讯录、日历等)。

(ii)如果你的应用程序并没有包括明显地基于用户账户的功能,请允许用户在不登陆的情况下就能正常使用。应用程序不能要求用户输入个人信息来使用其中的功能,但和核心功能直接相关的应用或法律要求的情况除外。如果应用的核心功能并没有和某个特定的社交网络(例如:Facebook、微信、微博、Twitter等等)相关,你必须提供无需登录的方式或通过另一种机制访问的功能。获取用户基本资料、分享到社交网络,或邀请朋友使用这个应用都不被认为是核心的应用功能。

(iii)如果开发人员使用应用窃取密码或其他隐私数据,将会从开发者计划中除名。

(iv)Safari View Contoller必须向用户展示可视的页面,且控制器不能通过其他视图或图层隐藏或掩盖。此外,在没有用户知晓或同意的情况下,应用程序不能使用Safari View Controller追踪用户。

5.1.2 数据的使用和分享

(i)你在向用户提供明确的如何使用用户数据的说明文档并取得用户明确的许可之前,你的应用不能使用或者转移用户的数据。

(ii)如果不是基于提升用户体验,提升软硬件性能或者符合苹果开发者计划许可协议(Apple Developer Program License Agreement)的广告推广目的,不允许使用或者向第三方厂商告知用户数据。

 
(iii)从HomeKit API当中获得的数据不允许应用在广告投放和数据挖掘的目的。 
 
(iv)使用苹果支付并且通过苹果支付获取用户数据的应用,在使用或向第三方厂商告知的时候只能基于促进或改善商品和服务的交付的目的。 
5.1.3 卫生与健康研究

健康、健身和医疗数据十分敏感,所以这类应用程序需要遵守额外的规则以保护客户的隐私安全:

(i)如果目的是打广告或者用户数据挖掘(用于提升健康管理,或者用于获得了批准的科研目的除外),那么应用不得使用或者向第三方披露用户的健康、健身和医疗数据。这些数据来自但不限于HealthKit API,运动和健身功能,或者其他有关健康的学科的研究课题。

(ii)应用不能向HealthKit以及其他医疗研究和健康管理应用当中写入虚假数据,而且不能够在iCloud上存储健康数据。

(iii)致力于人类健康相关的学科研究必须在参与者的同意之下才可以进行,或者对于未成年人,他们的父母和监护人的同意之下才可以进行。相关许可条款必须包括(a)性质、宗旨和研究时长;(b)研究程序,风险和参与人的利害关系;(c)数据的保密性和管理方法,包括与第三方共享的任何数据;(d)参与者如果有疑问需要知道的联络方式;(e)参与者如何撤出的机制。

(iv)如果应用进行健康相关的研究必须具有独立的伦理审查委员会的许可。此类批准必须按照要求提供。

 

5.1.4 儿童

基于很多因素,在使用来自儿童的数据的时候务必保持谨慎。我们希望您在使用这些数据之前能够仔细了解相关要求和国际适用的法律条款,例如儿童在线隐私保护法(Children‘s online privacy protection act,COPPA)。

应用程序只能基于提供必要的功能和非年龄相关的娱乐价值的目的下,而且在遵守相关法律的前提下才可以请求获取孩子的生日和父母的联系方式。 
 
此外,儿童类应用如果需要采集、传输、分享儿童的信息(包括姓名、地址、电子邮件、位置、照片、视频、图画、聊天功能、其他个人数据和与上述任何信息一起使用的永久的标识符),必须提供隐私条款,而且必须符合所有适用于儿童的隐私政策。为了明确起见,如果这类应用需要家长监控,通常这两种情况所需要提供的隐私条款会有所不同。点此了解详细信息。 
 
5.1.5 位置服务使用位置服务的应用程序必须提供和位置服务直接相关的功能。使用基于位置的API不允许用于提供紧急服务,或者实现自动控制车辆、飞行器以及其他设备(小型的设备例如小型无人机和玩具例外),远程控制汽车警报系统等。在收集、传输和使用用户的位置数据之前,请确保你已经取得了用户的同意。如果应用程序使用了后台定位服务,务必在应用当中阐明其目的。参考人机交互界面条款(Human Interface Guidelines)了解最佳的做法。 
 
5.2 知识产权
确保你的应用只包括你创建的内容,或者在使用他人的内容的时候具有合法的许可协议。如果你在许可协议规定的方式之外使用这些内容可能会被苹果下架你的应用。当然,这也意味着其他盗用你的内容的应用也可能会被下架。如果你认为你的知识产权已经被侵犯,请填写这个表单发起诉讼申请。知识产权相关法规在每个国家和地区有所不同,但你的应用必须避免以下最基本的错误: 
 
5.2.1 一般而言:不要使用受保护的第三方内容,如商标、版权作品,或者在你的应用当中使用未经专利许可的创意。不要包含误导、虚假,山寨的描述,名称和应用内容在你的应用当中。 
 
5.2.2 第三方网站/服务:如果你的应用使用、访问、展示和商业化第三方的服务,请保证你已经获得了相应的授权许可。并且许可文件必须根据要求在审核前一并提供。
5.2.3 音频和视频下载:应用程序不能对非法分享、保存、转换或者来自第三方源的数据的非法使用提供方便(第三方来源包括Apple Music, YouTube, SoundCloud, Vimeo等),除非具有相应的合法授权协议。如果应用提供了音视频文件,可能这些文件也会违反知识产权,所以你的应用在提供这些文件和服务的访问能力之前务必具有合法授权协议并且必须按照要求在审核前提供。 
5.2.4 苹果广告代言:不要明示或暗示苹果公司是你的应用的供应商,或者苹果为你的应用的功能和质量代言。如果你的应用被授予“编辑选择奖”,苹果会自动加上这个徽章。 
 
5.2.5 苹果产品:禁止创建一个应用看起来与苹果已有的产品,用户界面(如Finder),应用(如App Store, iTunes Store或Messages),广告主题相似,并且不允许拼错苹果产品名称(如Iphone, iTunz)。iTunes音乐的预览不允许在取得对应的授权许可之前直接使用。例如作为拼图应用的背景音乐,游戏背景音乐等。如果你的应用展示了Activity圆圈,不允许修改圆圈的显示方式以及它们代表的数据。人机界面交互条款当中对如何使用Activity圆圈有更多的信息。 
 
5.3 游戏,赌博,彩票
赌博、游戏和彩票功能可能是最难以管理也是苹果应用商店当中最普遍的促销方式。只有当你完全明白相关法律风险并且已经准备好足够的时间应对监管部门的审查的时候才可以考虑使用。不过有些事情需要牢记: 
 
5.3.1 抽奖和竞猜必须由应用开发商赞助。
 
5.3.2 用于抽奖和竞猜的官方规则必须在应用当中予以提供,并且明确表明苹果公司不是赞助商或者以任何形式参与该活动。 
 
5.3.3 应用不允许使用应用内付费购买信用点或者虚拟货币,并把它们与实际的货币结合使用,也不允许在应用当中购买彩票,抽奖券,和进行资金转移。 
 
5.3.4 提供需要使用真实货币进行游戏的应用(例如体育博彩、扑克赌博、赌场游戏和赛马竞猜等)或者提供彩票,必须具有当地相关监管部门的合法的授权许可。而且发行的地区仅限于许可协议规定的地点,并且在应用商店当中必须是免费的。非法赌博的工具,包括计牌客不允许上架到App Store当中。彩票App必须具有下列要素:报酬,中奖几率和奖金。
After提交应用之后 
 
一旦你将应用程序和元数据提交到iTunes Connect当中,并且进入审核流程,这里有一些事情你需要牢记: 
 
时间:应用审核团队会尽快审核你的应用,我们也一直努力加快审核速度。可以在此了解更多有关App审核的信息。 
 
状态更新:你的应用的当前状态会在iTunes Connect当中直接反映。所以你可以在上面留意你的应用状态。 
 
加急审核申请:如果你们对时间非常敏感,你们可以点此申请加急审核。请务必当你在真正需要它的情况下才进行加急审核,因为你也需要尊重你的同行。如果我们发现你在滥用这个系统,我们可能会拒绝你的加急申请。 
 
发布日期:如果你的发布日期设为未来的某个时候,你的应用在到达那个时间点之前不会发布到应用商店上面,即便是已经通过了审核。请记住,你的应用在所有选定的应用商店上架可能需要长达24小时的时间。 
 
被拒:我们的目标是严格遵守这些准则,但人无完人,如果你的应用程序被拒绝并且你对此表示疑问或者希望提供更多的信息,请使用解决方案中心来和应用审核团队直接沟通。这可能对你的应用尽快上架有帮助,而且这也可能帮助我们完善应用程序审核流程或者让我们发现审核政策当中表述不清的地方。如果你仍然对结果有异议,请点此提出上诉。
我们很期待看到你们未来发布的产品!

本文部分内容由腾讯网 Hearstzhang 翻译整理,转载请注明来源!

 

[PSD组件资源] iOS 10 GUI for Photoshop PSD源文件

阿西UED阅读(3869)

 今天给大家推荐的是  iOS 10 GUI for Photoshop PSD ,ios交互设计规范,大小有266M,需要下载 PSD 源文件。

分享者:阿西 UED

原作者:Great Simple

文件格式:.PSD

文件下载地址:iOS 10 GUI – Photoshop 密码: rrwz

备用下载地址:https://pan.baidu.com/s/1nuABsWp

更多内容:关注微信号 AioUED

1113

1112

1473743077-8349-3afc-11e6-8e18-5750de775ced
1473743072-5707-3afb-11e6-b8d4-c3b714b5647e
1473743083-7658-3afb-11e6-b30d-c79902cabd1a
1473743102-8029-3afd-11e6-8312-0313ff10324f

iOS 10 GUI

1.1

By Great Simple Studio

100% Vector. Free forever. High detalisation.

1473743092-2262-3af7-11e6-aab1-d31f792d8209
1473743149-4682-3afb-11e6-8b35-bd4c9907f496

1473743153-2503-3afe-11e6-b30d-c79902cabd1a

Structured, layered and named UI elements and screens.

1473743163-3829-3b9e-11e6-80b3-d7fa8489a384
1473743170-8067-3b9e-11e6-b8d4-c3b714b5647e

Fully customizable

Every useful element made using vector shapes

1473743220-1914-3b16-11e6-b30d-c79902cabd1a

Accuracy

Made with extra attention to Apple guidelines

iPhone 6 resolution

Screens made in 1x resolution for iPhone 6: 375x667px

1473743229-4535-3b17-11e6-8c95-e5268d226ce7

SF UI font

You need to download it before working with GUI.

SF UI via Apple Developer

1473743257-2393-3bb6-11e6-8312-0313ff10324f
1473743267-5805-3ba5-11e6-b30d-c79902cabd1a

Hope you’ll love it!

[sketch组件库] iOS 10 GUI for sketch

阿西UED阅读(4822)

 今天给大家推荐的是 iOS 10 GUI 组件 for sketch ,ios交互设计规范,大小有93M,需要下载 Sketch 源文件。

分享者:阿西 UED

原作者:Great Simple

文件格式:.sketch

文件下载地址:https://pan.baidu.com/s/1o8uA0rS  密码:cn5f

更多内容:关注微信号 AioUED

1113

1112

1473743077-8349-3afc-11e6-8e18-5750de775ced
1473743072-5707-3afb-11e6-b8d4-c3b714b5647e
1473743083-7658-3afb-11e6-b30d-c79902cabd1a
1473743102-8029-3afd-11e6-8312-0313ff10324f

iOS 10 GUI

1.1

By Great Simple Studio

100% Vector. Free forever. High detalisation.

1473743092-2262-3af7-11e6-aab1-d31f792d8209
1473743149-4682-3afb-11e6-8b35-bd4c9907f496
1473743153-2503-3afe-11e6-b30d-c79902cabd1a
For Sketch 3.8.3

Updated July 19th, 2016

Start designing for iOS 10 today. With a little help of this GUI.

iOS 10 Beta is live now, and we already re-drew its best screens with extra attention to Apple guidelines. Use this GUI to simplify your designing or mocking up process or take a look how the iOS UI elements work in detail.

Structured, layered and named UI elements and screens.

1473743163-3829-3b9e-11e6-80b3-d7fa8489a384
1473743170-8067-3b9e-11e6-b8d4-c3b714b5647e

Fully customizable

Every useful element made using vector shapes

1473743220-1914-3b16-11e6-b30d-c79902cabd1a

Accuracy

Made with extra attention to Apple guidelines

iPhone 6 resolution

Screens made in 1x resolution for iPhone 6: 375x667px

1473743229-4535-3b17-11e6-8c95-e5268d226ce7

SF UI font

You need to download it before working with GUI.

SF UI via Apple Developer

1473743257-2393-3bb6-11e6-8312-0313ff10324f
1473743267-5805-3ba5-11e6-b30d-c79902cabd1a

Hope you’ll love it!

精进UCD设计总监第一字典——全局UI设计规范手册

Tina阅读(2490)

注:本文档由PM7V – Ian Huang整理于2016年9月初,随着硬件设备条件变更,最佳规范倍率可能随着时间推移需要加倍计算!


1 UI基础

1.1 像素

1.1.1 逻辑像素(Pt)
在软件层面构成了画面图像
也称逻辑点,是控制屏幕显示内容多寡的单位

1.1.2 物理像素(Px)
在硬件层面构成了液晶屏幕

1.1.3 手机图像
由物理像素和逻辑像素共同构成,缺一不可

1.1.4 开发原理
程序猿在开发中需将设计师提供的分辨率(物理像素)转换为逻辑像素后才能控制页面显示的内容

1.1.5 范例
IPad_mini分辨率768×1024,倍率为1X,即1Pt=1Px
IPad_mini2分辨率1536×2048,倍率为2X,即1Pt=2Px
15.4寸Macbook_Pro分辨率2880×1800(更多空间逻辑分辨率1920×1200),倍率为1.5X,即1Pt=1.5Px

1.2 倍率

1.2.1 倍率:1个逻辑像素可以对应任意个物理像素点(1Px、1.5Px、2Px等)
1.2.2 公式:倍率 = 物理像素 / 逻辑像素
1.2.3 倍率换算图
1

1.2.4 常见分辨率
2

注:因开发工具不同,IOS逻辑像素单位是pt,Android逻辑像素单位是dp
3

1.3 倍率优劣

1.3.1 开发换算
1X倍率,1pt=1px,逻辑像素 = 物理像素,无需换算
2X倍率,1pt=2px,逻辑像素 = 物理像素 / 2,能快速换算
3X倍率,1pt=3px,逻辑像素 = 物理像素 / 3, 很难换算,除不尽时需四舍五入,易产生误差
优劣:1x > 2x > 3x

1.3.2 设计成本
1x倍率,元素控件尺寸必须为偶数,能兼顾居中排版避免误差,设计难度低
2x倍率,元素控件尺寸必须为4的倍数,否则容易影响居中排版,设计难度中
3x倍率,元素控件尺寸必须为6的倍,否则严重影响居中排版,设计难度高
优劣:1x > 2x > 3x

1.3.3 查看效果图
因设备中查看效果图时,逻辑像素会被成倍放大,故倍率高的设计图更接近所见即所得的效果。
优劣:3x > 2x > 1x

1.3.4 倍率转换
1x倍率转2x、3x时只需乘以2或3即可;
2x倍率转1x需除以2,转3x需乘以1.5,相对繁琐;
3x倍率转1x、2x时需先除以3,再乘以1、2,极为繁琐;
优劣:1x > 2x > 3x

1.3.5 切图
PC:
默认1x切图;

APP:
1x切图已被淘汰,市面设备分辨率普遍在2x以上;
2x可直接导出2x切图,导3x切图仅需乘以1.5倍;
3x可直接导出3x切图,导2x切图需除以3再乘以2,较为繁琐;
优劣:2x >3x >1x

1.3.6 对比
4

1x、3x个别优势较大,但存在明显短板,2x最为均衡,建议使用。


2 PC端

2.1 最佳基数

2.1.1 最佳像素倍率1X
1Pt=1Px

2.1.2 最佳元素控件尺寸
偶数

2.1.3 最佳分辨率宽度
窄屏:980px
宽屏:1220px

2.2 栅格结构

2.2.1 栅格公式:(A×n)-i = w (60×21)-20 = 1220
2.2.2 窄版980PX
180:40:760
5

640:40:300
6

720:20:240
7

2.2.3 宽版1220PX
900:20:300
8

960:20:240
9

2.3 版块间距

2.3.1 上下左右间距为20PX
10

2.3.2 特殊情况为40PX

2.4 图片大小

2.4.1 横图比例-10:7
2.4.2 竖图比例-7:10

2.4.3 窄版
横图:
二图版式
480×336PX
间隔1×20PX
三图版式
300×210PX
间隔2×40PX
四图版式
230×161PX
间隔3×20PX
五图版式
180×126PX
间隔4×20PX
11

竖图:
二图版式
480×685PX
间隔1×20PX
三图版式
300×428PX
间隔2×40PX
四图版式
230×328PX
间隔3×20PX
五图版式
180×257PX
间隔4×20PX

2.4.4 宽版
横图:
二图版式
600×420PX
间隔1×20PX
三图版式
380×266PX
间隔2×40PX
四图版式
290×203PX
间隔3×20PX
五图版式
228×160PX
间隔4×20PX

竖图
二图版式
600×857PX
间隔1×20PX
三图版式
380×543PX
间隔2×40PX
四图版式
290×414PX
间隔3×20PX
五图版式
228×326PX
间隔4×20PX

2.5 颜色

2.5.1 框架颜色
整体框架线颜色——#eeeeee
间隔线颜色——#e8e8e8
板块间隔灰底——#i8i8i8
按钮边框颜色——#d8d8d8
输入框颜色——#cccccc

2.5.2 文字颜色
重要文字
场景:标题
悬停色:Hover色(轻)
参考色:#333333

次要文字
场景:正文
参考色:#666666

弱文字
场景:说明文案
参考色:#999999

极弱文字
场景:输入框默认文字
参考色:#bbbbbb

链接文字
场景:未点击前的链接状态色
默认定制色:参考网站主色调
参考样例:#0099FF

Hover文字(重)
场景:强营销文案
默认定制色:参考网站强调色
参考样例:#666699

2.5.3 按钮颜色(定制色)
后台操作类(正常)
背景色#00b34a
文字色#ffffff

后台操作类(Hover)
背景色#0cb048
文字色#ffffff

前台营销类(正常)
背景色#f36f20
文字色#ffffff

前台营销类(Hover)
背景色#e7691e
文字色#ffffff

次级操作(正常)
背景色#d8d8d8
文字色#000000

次级操作(Hover)
背景色#cccccc
文字色#000000

2.5.4 色彩组合
以上定制色可参考《UI设计规范辅助文档》-色系组合页挑选组合

2.6 图标(定制)

2.6.1 可参考Bootstrap图标库
2.6.2 范例
12

2.7 填写框

2.7.1 正常状态
13

2.7.2 激活提醒状态
14

2.7.3 报错状态
15

2.7.4 表单间距
16

2.8 命名规范

2.8.1

一级文件夹(以板块名称命名) eg:006 找装修公司
二级文件夹(以日期命名) eg:2016.8.16
三级文件夹(以序号+板块名称+页面命名) eg:01-找装修公司-列表页
二级文件夹(作废文件) eg:pass
三级文件夹(以日期+板块名称+页面命名) eg:2018.8.16-找装修公司-列表页
二级文件夹(原型图文件) eg:2016.8-原型图
三级文件夹(以日期+板块名称+页面命名) eg:2018.8.16-找装修公司-列表页


3 移动端

3.1 最佳基数

3.1.1 最佳像素倍率2X
1Pt=2Px

3.1.2 最佳元素控件尺寸
4的倍数

3.1.3 最佳分辨率
【重IOS】750×1334px
【重安卓】720×1280px

3.1.4 【3x场景】当前控件尺寸×1.5倍
iPhone Plus控件(3x)
放大模式
1125×2001px
在1080P屏幕展示位0.96倍大小

标准模式
1242×2208px
在1080P屏幕展示位0.87倍大小

安卓1080P控件(3x)
1080×1920px
3.1.5 【4x场景】当前控件尺寸×2倍

2K屏幕
1440×2560px
机型样例
小米5

3.1.6 【6x场景】当前控件尺寸×3倍
4K屏幕
2160×3840px
机型样例
Sony-Xperia Z5 Premium
VR设备

3.2 iPhone设计规范 (2x-750P标准)

3.2.1 界面布局参考值
状态栏——40px
标题栏——88px
主菜单栏(标签栏、底部条)——98px
内容区域——1108px
宽度——640~828px
高度——960~1472px
17

3.2.2 图标尺寸
导航栏
44×44px

内容区域
58×58px
因留2px作为阴影效果显示,实际图标占用60px

标签栏
默认
50×50px
最大尺寸
96×64px

3.2.3 文字尺寸
⑴ 导航栏
36px
重要标题
例:导航栏的退出、注册、登录文字按钮

34px
较为重要标题
例:顶部导航栏主标题

⑵ 内容区域
① 标题
32px
正文大标题

30px
正文标题、重要节点文字

② 正文
28px
大多数文字
例:商品名称、简介、辅助按钮

③ 注释辅助
24px
辅助性正文文字
20px
辅助性次要文字
例:时间信息

⑶ 标签栏图标下方文字
20px

3.2.4 原型图颜色 (线框图)
文字
黑色#282828
深灰色#6566565
浅灰色#989898

边框
浅灰色#C3C3C3

背景
淡灰色#f2f2f2

按钮背景
纯白色#ffffff

3.2.5 常用像素
可点击高度(88px)
18

子栏内控件高度(58px)
19

控件之间距离
亲密距离20px
左图标与右边文字之间的距离
图标到顶部边栏线的距离

疏远距离30px
所有元素距手机屏幕最左边和最右边的距离
20

图标在列表栏目内默认居中
21

3.2.6 UI定制项
原型图直角呈现
按钮
文本框

UI设计图圆角呈现
按钮样式
1、所有能点击的图片不得小于44px(Retina需要88px)
2、单独存在的部件必须是双数尺寸
3、两倍图以@2x作为命名后缀
4、充分考虑每个控制按钮在4中状态下的样式,如图
22

注:UI设计师需按网站风格决定圆角半径的大小

3.3 组件适配原则

3.3.1 等比缩放
屏幕宽度不变、高度变化时,控件高度不变;
屏幕宽度变化时,控件高度自适应等比变化,保持不变形;
屏幕高度的变化不影响控件的比例变化。

3.3.2 弹性控件
列表两端组件与屏幕左右两端边距始终固定,中间距离自适应
23

列表存在长文字时,“文字长度自适应”先于“间距自适应”
24

屏幕越宽,显示按钮越多
25

3.3.3 文字流
文字换行高度间隔自适应,文字后的内容应紧跟文字底部。
26

固定单行文字,默认不换行,超出文本一般用”…”省略
27

参考排版变化如下:
28


4 UI交付 @2x

4.1 标注

4.1.1 画布大小:以当前所选的分辨率为准进行标注(720P或750P)
4.1.2 字体:按照像素px标注,可在角落附上px与sp单位的换算规则, 如@2x,1sp=2dp=2px。
4.1.3 颜色:按照实际的颜色值标注,Android颜色值取值为十六进制的值 比如一绿色的值,给工程师的值为#5bc43e。
4.1.4 间距:每个主要的控件必须标注出来,各种边距必须标注清楚。 角落可附上px与dp的换算规则,@2x,1dp=1px

4.2 切图

4.2.1 统一采用png格式
4.2.2 命名
默认以@1x、@2x、@3x倍率作为目录
依图片性质命名。如bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png等

4.3 图片优化

4.3.1 图片压缩优化
4.3.2 ICON 可采用PNG 8
4.3.3 支持完全透明和完全不透明两种效果和256色
4.3.4 需要高清的可采用 PND24/32

4.4 切图参考
29


4.5 致产经同仁

你好产品同仁,我想帮你,快来加入PM7V成为免费种子用户一起探讨精进产经技术吧!
PM7V官网:www.pm7v.com |全国Q群:139410784 |上海Q群:132415260
微信公众号:pm7ver(PM7V)


4.6 引用参考资料

感谢以下供参考的UI规范资料,本人仅进行整理统合,并统一了互相矛盾的一些内容。
1、张云钱——《交互设计:iOS原型尺寸规范》
2、jasmine_sunny ——《iOS和Android的app界面设计规范》
3、jorel——《APP UI设计及切图规范》
4、海边来的设计师——《UI适配攻略·教程》

文章由PM7V – Ian Huang原创授权转载到iamue网,未经许可,禁止转载。

内部教程!超实用6步透视网易设计规范(附完整PDF下载)

阿西UED阅读(3683)

▌文:网易UEDC / 吴良

这是一份不可多得的网易干货资料,更是一份非常标准的设计规范准则!产品经理&视觉设计必看!

对于刚入行的新人,可能觉得设计规范是一件很高大上又很让人头疼的事情,面对这么多设计模块感到无从下手。设计规范如果考虑不到位,往往会出现规范太空洞缺乏实际指导意义、规范太死板影响设计发挥等问题。这篇文章会从新人的角度出发,总结一些设计规范要点,算是一次温故总结的分享。

本文提供网易云音乐和LOFTER的规范文档下载,强烈推荐下载: https://pan.baidu.com/s/1i5hmCXf 去浏览器下载吧~

读者对象:

刚接触产品设计的视觉设计师

一、设计规范有什么用?

设计规范能为团队解决不少问题,并提升工作效率,主要体现在以下三个方面:

1、解决多人协作时控件混乱问题

1472437001-1428-7YO9xJqPBhGia8fq08RorDQibOAg

一个大型项目的视觉稿,往往会有几十个甚至是上百个页面。对于第一次做这种大项目的设计师,如果在视觉风格成型后没有做规范的话,哪怕自己一手包办全部页面,恐怕也很难统一视觉样式。在创作阶段设计其他页面时,如果没有规范来指导,设计过程中很容易产生细微的出入,导致每个控件都会有细微的差别,经常会做着做着就出现控件不一致的问题,比如A页面的按钮是4PX圆角,B页面的按钮又做成了6PX圆角,再后来做的C页面的按钮又做成了2PX圆角。如果一直埋头苦干赶页面,没检查出这些问题,页面做的越多错误就越多,到时候几十个页面的控件都要修改,那可真是苦不堪言啊。

一个人做页面尚且会出现这种样式不统一的问题,更何况是多人协作。因此,在进行多人协作一个项目前,可由主视觉设计师出一份视觉规范,其他一起协作的几个设计师遵循这个规范,才能把控视觉统一性,提高效率,减少返工率。

另外,当新人加入团队的时候,他们对产品的品牌基因可能理解不透,这时设计规范就可以帮他们快速上手,并且保持产品的统一性。

2、解决开发效率、代码冗余问题

1472437001-1082-nCOJ6XbIJDiataHOH8hq0ibfIqQw

如果没有做规范,就拿按钮这个常见的控件来举例,程序员不知道具体的规范,每个程序员用代码写了A页面的按钮样式,然后在开发B页面时又要重新用代码写按钮样式,页面越多程序员的工作量也就越大,影响项目进度,代码也会越来越臃肿。

如果做了规范,程序员从视觉规范中了解到哪些控件是可以一次性写好并能重复调用。在规范的辅助下,程序员在搭建全局共用元素时规则更加清晰明了,如按钮、行间距、字体大小、色值等等。

另外,对于末端界面没有规范到的角落和由规范控件组成的新页面提供了有效参考,比如规范中已经列出的5种常用弹窗样式,后来需求迭代时出现由原有规范样式混搭组成的新弹窗,这时程序员就可以借鉴原有5种弹窗里的标题、间距、按钮等样式去完成该工作。

3、解决产品迭代中品牌形象会走样问题

1472437001-3051-s8yOwNGkYfPW49ibv6icJCW9vZpQ

产品在迭代过程中,往往是小版本进行几个功能的迭代比较多。如果没有做规范,在多次迭代过程中会忘记设计初衷,同样一个TAB控件,可能会出现多种不同样式的TAB,举一反三,这种太随意的设计会让产品控件混乱,导致品牌形象走样,看起来很不协调,像是几个风格不同的设计师共同完成的半成品。

有了规范,后续迭代中也能保持设计初衷,遵循定制好的设计规范,维护好品牌形象。就算是后来加入新的设计师,新的设计师也能通过主设计师做好的规范,统一品牌形象。

规范能使产品在不断更新迭代中保持品牌形象不走样,保持产品特性,产品的规范统一增加了用户使用认知,不同程度有效提升用户体验。

二、设计规范操作的五大误区

设计规范的工作量不小,开始动手之前应了解一下有哪些误区,尽量少走弯路,更科学高效地完成一份有效的规范文档。

错误一:规范建立时机不对

1472437004-8052-LhgTQpAz6OteSzXuFqUcB0lfd7Ww

规范建立的时机很重要,太早或者太晚都会给后续迭代带来很多麻烦。

如上图所示,如果在创作初期就做设计规范,这时视觉风格还没成型,投入太多精力去做规范,在视觉风格定位后,之前做的视觉规范又要推翻重做,因此太早做设计规范会造成没必要的返工。

如果等V1.0上线后才开始做规范,已经错过了最佳时机。因为在V1.0开发的后半部分的两大工作是设计师拓展页面和程序员进行开发,在设计师拓展页面的阶段,如果没有设计规范的指导往往会很难保持视觉统一性,这时把页面交到程序员手里,同样一个控件在各个页面中的呈现样式却不一样,混乱不协调的控件库会对程序员造成困扰,从而影响开发进度。在程序员前期开发阶段,如果有了规范,就可以快速根据规范搭建控件库,高效完成工作。

因此,最佳时机是在完成风格定位后做规范,可以承上启下高效完成工作。

错误二:对非重要界面进行规范设定

1472437002-5377-0vWsQQlrO99cHRcmCqOA06gCOlYg

记得以前刚接触设计规范的时候,觉得设计规范就像一本设计圣经可以非常细致全面的指导设计工作,然后我对全部界面都做了详细的规范,花了很多时间和精力做出的设计规范多达几十页好几十个细分模块,最后实际应用时发现自己被这份设计规范打脸,因为有时做新的页面,如果死板的100%遵循了规范,做出来的视觉效果不好;如果完全抛开设计规范,那之前做的过于全面的规范等于白做了,可见太过全面的规范会影响设计师发挥,并不是一件好事。

所以,整理规范时,应只针对控件、色值、质感、动效、品牌元素等重要界面进行规范设定。

错误三:规则没弹性

1472437004-7745-EQlsibnHWrIWgiatxRCLCc9pqEQA

采用28原则只能针对产品80%的界面进行规范。这里讲的80%和20%是一个相对的概念,80%代表色彩、按钮、字体、间距等重要内容,这些内容需要进行详细的规范说明。另外的20%是指某些控件是不可复用并且不重要的,这种20%的内容不需要花费精力做进规范里。这个28原则需要设计师根据具体情况具体分析,作出更适合当下的设计。

如果对所有界面进行100%规范,一方面会束缚设计师的发挥,另一方面也会影响产品迭代的设计弹性,比如一个产品官网进行了100%规范,需求迭代时要在导航加上一个活动入口,这时如果死板的遵循原先的导航规范来加这个活动入口,视觉效果和活动数据效果可能并不理想,所以在面对这类需求的时候,适当的做出导航调整也是可以的。

错误四:规范没有迭代

1472437005-3397-T2DLY2PKsHGQZg1rEW65MdUVY8sQ

在完成v1.0版规范后,产品还会一直迭代,产品改版过程中必定会不断优化设计。

如果设计师没有跟着产品改版的节奏去迭代视觉规范,一般会出现两种情况:一是被原规范的旧样式束缚,死板的遵循最初的规范,长久下去会出现视觉样式过时的问题。二是改版中用了新的视觉风格,没有及时总结归纳成规范,这样一来又会出现品牌形象走样的问题。

所以在产品迭代过程中需要对旧的规范进行更新优化,不好的、过时的规范需要及时同步归纳,并及时通知到项目相关人员。要不然,陈旧的规范起不到帮助设计工作的开展,反而是一种负面影响。

错误五:规范没有执行力

1472437005-9602-FehoTErMzHpIjg1hoLtqOic4nE9Q

有两种规范是缺乏执行力的:

第一、规范内容不具体,缺少对核心模块的细节说明。各个模块缺少必需的说明,比如色彩模块中有主色却缺少辅助色的说明,按钮模块中缺少滑过、点击、不可点状态的说明,字体模块缺少字体磅数的分布设定。这种没有核心内容的规范,没有参考价值,规范的作用几乎等于零,其他参与项目的设计师还得找制作规范的设计师要相关的规范才能进行下去,所以这种类型的规范是没有执行力的。

第二、规范太全面死板太臃肿,无从看起,对后续设计有束缚。对所有界面的所有元素进行规范,连不重要的元素也强行归纳进来,多达几十页的规范文档。造成三方面的影响,一是会增加大量没必要的工作时间来制作规范,二是设计师和程序员需要花很多时间精力去看无关紧要的内容,增加了很多负担。三是设计本来就不是一件绝对的事,需要20%的灵活空间,不然后面遇到新的页面,死板的把规范用在新的页面上,出来的效果可能并不好。

三、设计规范怎么做?

设计规范的模块分类有很多,会让新人感到无从下手,怎么样梳理才更能科学易用?以下六个维度可以作为参考。

1、信息系统:字体选择、颜色、层级区分

1472437006-4095-Ykt5LgfjPtLtdibp99vUDncqkSnw

产品中的字号应该有一个全局的规划,在同一个界面内,尽量少用太多太接近的字号,比如一个产品详情页的正文部分,如果同时用了12、13、14、15、16、18去排版,文字的层级对比会比较弱,不利于阅读,视觉效果也会有点凌乱。

如果你对全局的字号没把握,不妨参考一下上图的字号分布,这套基于12、14、16、20和34号的字号分布能够良好的适应布局结构,层次明晰,所以具有一定的参考意义。当然以上仅供参考,没有绝对的字号布局方案,设计师可以根据具体的产品情况来分布。

1472437007-1653-kje9OiaQQZ2sf8uaOTYzu0U7mbww

如上图所示,「L」和 「XXL」用了两个很相似的颜色#666666和#6e6e6e,这两个颜色肉眼难以区分,在同一层级去做字体颜色区分是没必要的。同一组中的内容属于同一层级,从信息层级来讲应该要用同一种颜色,表示是同一个层级。

产品文字中一般会有一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字等,为了区分层级便于浏览,通常会根据产品需要把字体颜色深浅分成3到5个层级,常见的有#333333、#666666、#999999这个组合,这个组合的层级区分比较分明,适应性比较广,因此有一定的参考价值。

1472437011-4399-Jlz40VYd0119pYHLHsXkG2DZfpJA

从技术实现层面来讲,对于字体的选择,产品设计和推广设计有较大的区别。

推广设计的风格多种多样,需要根据需求选择字体来营造氛围,推广设计的字体往往是做在图片上,不需要考虑用户的设备中有没有包含该字体。

产品设计的字体,很少会做在图上,大多数字体由前端工程师来实现,设计师一般会选择用户设备里自带的字体来进行设计。如果在页面中用了兰亭黑、正黑等大量第三方字体,用户的设备没有这些字体就会以默认字体来显示,最终效果会和视觉稿有很大出入。

另外,从视觉层面来讲,文字的层级一般用字号去区分,如果既用字号去区分,又用不同字体去区分信息,会显得凌乱缺乏美感,因此字体的数量应做减法,能用2种就不要用3种,能用1种就不要用2种。

2、控件系统:按钮的样式统一

1472437010-8881-scLw68d9zpppJcgTEmu6JPjlr2ww

在产品中按钮控件的复用度是很高的,同样的一个确定按钮也会根据页面环境不同来设定不同宽高尺寸。

需要注意的是,即使按钮宽高不同,按钮样式也需要统一宽高比例、描边、直角、圆角、色值、文字区域、字体、字间距等,以保证按钮样式的统一。

另外,在一般情况下,按钮会有四种鼠标状态。不同颜色的按钮之间,相同的鼠标状态也需统一视觉效果。比如同层级的蓝色和绿色按钮放在一起,这2个按钮在hover状态下的明度变化看起来应相对统一。

3、布局系统:界面内不能出现多余的行间距

1472437011-9369-jOcu233cibIm8jBY0gb923ZvOtAg

在设计的过程中,间距这个隐形元素往往会被新人忽略,间距能表明内容之间的层级和从属关系,凌乱复杂的间距会对用户认知造成较大困扰。

因此,设计师需要将间距当做色彩、字体、字号一样的元素来设计。一个界面中能用5种间距,就不要用6种;能用3种就不要用4种,这是一个需要做减法的设计原则。

1472437012-1612-h1XiaR8OGib7or4WoGr7ibTppV2A

另外,内间距尽量不要大于外边距。大多环境下,外边距小于内边距时内容会有外扩力,显得拥挤,有阅读压力。外边距大于内边距时,有适当的留白,内容没有外扩力,用户的视线不受干扰,更专注于内容本身。

4、配色系统

1472437013-7563-jHyibjibg0hMa7fydpLVPhzptXDQ

选择主色调时,首先确定产品的调性、用户对象和所要表达的气氛,以及利用色彩所希望达到的目的,色彩取向决定了这个产品的风格。产品的辅助色可用主调色的邻近色,也可用对比色。确定主色和辅助色之前,建议应用到各种页面中去看看实际效果,因为每个页面的使用环境都不同,反复验证后才能确定最终的色彩方案。

一般情况下,可选择一到三种辅助色配合使用,整个产品的色彩最好控制在四种颜色之内。

5、品牌系统:LOGO应用

1472437014-7440-WvibHvYRyhicoicVIGu96xIiandg

LOGO会应用到各种页面中,在LOGO定稿后需要将LOGO的各种组合方式整理出来,便于后续的实际应用。比如LOGO的左右结构及上下结构;反白的情况;黑白的情况;单色的情况;黑底白底的情况;最小尺寸;以及错误的使用方式都需要标示出来。

6、推广系统

1472437014-7941-VHRpfYFeODvCibVAFgFCBpynvLJA

1472437015-4963-WHmiam2BEkHkibksRsibaKMiaukA

推广规范设定应突出商品、主体内容和主要文案。不得使用无版权的图片和字体,文案排版需符合阅读习惯,避免折行,字体不要过小,字体笔画均匀识别度高,辅助图形不得扰乱文案信息和产品展示。

以及具体的排版结构,它是上下还是左右,先图后文,还是先文后图,四周的边距和文案的间距,可以和不可以的排版行为需要标示。

四、设计规范案例

1472437015-9558-RYibxuibWf4dvJRXt20giasF0OfA

1472437016-5116-UNs0RoOsQyiaf4GPUeS5jM6Wia9w

1472437017-2124-XB7dtO5eVa37oVjMpwFaWDuQSDKA

网易云音乐android端V3.0版规范遵循28原则,对产品80%的主要界面进行规范,ICON的风格统一和色彩的整体把控,以及品牌的统一性,都有条有理的安排在规范中。这份考究严谨的设计规范,列出大量方便复用的控件,在内容的框架梳理和模块的细节说明上极具参考性,非常适合设计新人借鉴参考。

1472437018-6533-KOhibQggb8y9pwt6qX8bkX9CMLVw

1472437018-3208-qtibPbmTicJJSJH4TL0wBNYxhVkA

1472437019-6060-5MYGdqGRQuhPDo0icK2RIBMyc4BA

LOFTER经过几个大版本的迭代,设计风格和LOGO都有所改变,因此规范也随之迭代优化。对比V1.0和V5.2规范,可以发现LOFTER在V1.0产品初期阶段,只需对色彩、字号、按钮等主要模块进行规范,随着产品的发展,到了V5.2版设计规范,对规范进行了更多的补充说明,以及保持产品自身的品牌调性。

LOFTER这份精而美的设计规范,页数不多,但每页都是经过三思后得出的总结,推荐一看。

正确使用标签选项卡的12个姿势

Tina阅读(730)

这里是关于标签选项卡的12个设计准则:

1、使用标签选项卡在相同容器不同内容下的视图间切换,而不是作为导航将用户带到不同的区域。这是最重要的一点,因为在不同的标签视图下切换时保持内容容器的一致是我们在开始使用标签选项卡时最主要的原因。

2、每一个标签背后的内容要合乎逻辑,好让用户能够轻而易举的预见到选择一项后会发现些什么。 (卡片分类是研究这类“微型信息架构”问题的方法之一。 如果你找不出有明显不同的归类性信息,那么使用标签选项卡就可能是管理你页面内容的错误方法)

3、只有当用户不需要同时看到多个选项卡的内容时,再考虑使用标签选项卡。如果人们确实需要比较不同标签页的信息,那么相比于把所有信息都放在一个页面显示,多标签的做法会因为用户需要在不同标签间来回切换,无疑增加了用户的阅读负担和操作成本,进而降低网站的可用性。

4、所有的标签在本质上应该是平行的(类似的),如果标签跟标签之间显著不同,用户将会把他们视作网站的导航。

1468895741-5986-aa20005c213a9687eb7

Workday 的主页主要使用标签控件指向它的服务和应用,而第一个标签却是提供公司的概览,跟其他标签并不处在平行关系,因此最好将其移除才对

5、突出强调当前选中的标签,确保其表现形式足够让用户意识到究竟是哪个标签选中了。

1468895743-8382-aa20005c212df977c4a

Ticketmaster 的标签控件通过无色的处理标示出当前选中的选项卡,然而这种做法更适用于至少有3个标签时。图中只有2个标签的时候,你很难告诉我究竟哪个才是选中的标签

除了高亮显示的方法,你也可以通过尺寸、标签、图标上的变化或者位置上的调整来标识出当前选项。如上图中所示,在只有两个标签时这种额外的标识尤其重要。

6、对于那些未被选中的标签,其应该保持清晰可见的状态且易于读取,提醒用户还有其他选项可供选择。而如果这些标签在背景下隐藏过深时,就会存在一定的风险,即用户可能永远不会点击到它们甚至发现不了这些选项。

7、当前的标签要关联到指定的内容区域,就好比你是在拖动不同标签对应的实体卡片一样。这样的话,就能突出显示对应的内容面板,同时也能够在只有两个标签的时候依然明确的告诉用户当前选中的是哪个标签。

1468895742-5855-aa10005bb376e168e4e

Travelers 的标签控件将选中的标签和内容面板置于相同的颜色,强化了两者之间的关联性

8、使用简单明了的标签语言,而不是代办专业性的描述。每个选项卡对应的文本标签应该在1-2个单词,保证用户易于阅读。如果你真的需要更长的标签语言,那就意味着你的标签控件设计的过于复杂了。

9、不要针对标签语言采用全部大写的做法,这绝不是一个好的主意,因为会增加阅读的难度。虽然可读性对单一的,简短的词组不成问题,但是正如网站可用性指南中描述, 你应该选择一个大小写格式(无论是针对句子还是标题样式)并坚持使用。

10、要坚持所有的标签选项卡只采用单行排列。如果放置在多行的话,就会引起元素间的跳跃性,破坏用户在空间上的记忆,使他们不可能记住自己已经访问过的标签。另外,这种做法也是设计过渡复杂的一个表征,这个时候你必须要考虑简化你的设计。

11、将标签选项卡布置在页面顶部的一个面板上,不要放在用户常常会忽略的边栏或底部位置。

每个标签对应的内容区域在视觉上应该有明确的界限。从喻意上来说,使用标签就像在老式的抽屉式卡片目录下翻阅索引卡片一样,因此用户必须在第一眼就能明白什么组成了“索引卡片”(即选项卡面板)。

1468895742-6389-a9f00071b23becaa452

Reuter 主页下的市场选区内,使用边框来从视觉上表现出标签对应的内容区域

12、所有的标签选项卡在视觉和作用方式上应该一致,因为这种一致性的做法能够帮助用户在几个方面建立起对他们对用户界面的把控度:

(1)可识别性:当一些东西看起来总是一致时,你能够知道要去找哪一个以及找到的那个又是什么。

(2)可预见性:当一些东西总是以一致的方式作用时,你能够预见到当你作用于它时将会发生什么。

(3)自主性: 当你可以依赖你过去的所有可用的知识特性,您可以很容易地构建起一连串的动作来达成你的目标。

(4)高效性:你不需要花费额外的时间来学习新东西,也不必担心不一致的功能会带来的影响。

结论

在图形化的用户界面设计中,标签选项卡看上去简陋而无趣。但是就像本文提到的,在创建作用优良,容易使用,提升体验的标签时,仍然有一些需要我们注意的具体问题。

标签选项卡的设计问题只是我们在分析UX的优良性时遇到的一个普通的问题。如果你在追踪用户在页面内的行为操作,如果发现用户在某些页面中很少使用到标签,请尝试检查你的设计是不是违背了本文中提到的一些指导原则。如果确实违背了,那可能就出自你的设计问题,不过你也有可能通过重新设计后再来做个快速的A/B测试来弥补自己的过错。

如果你遵循了本文中的指导原则进行设计,用户就能够不需要花费额外的探索或猜测来搞清楚如何使用你的标签。这就意味着他们可以把所有的时间和脑力用来理解在这些标签背后的内容和特性。  标签本身是毫无意义的,但是当它们本身能够在不打扰用户的同时还能指引用户前往正确的内容和特性时,你便不得不承认它也是可以做到耀眼的。

译自:https://www.nngroup.com/articles/tabs-used-right/

 

Airbnb首席设计师:如何创建一套自己的设计规范

阿西UED阅读(8694)

注:本文是Airbnb新的设计语言的一部分,由Airbnb首席设计师Karri Saarinen发布于airbnb.design。

从事软件开发和设计工作,我们往往需要提出一个完整的一次性解决方案。但有时我们是受到时间的限制,或者我们只是还没有确定一个清晰的发展方向。一次性的解决方案并不是说它不好,但是如果它不是建立在一个坚实的基础之上,最终我们会发现自己还是不得不回过头来偿还技术积累和设计这笔债。

视觉语言就像任何其他的语言一样。如果不被使用它的每个人共享并理解,那么使用这种语言沟通将很容易出现误解。随着产品或整个团队的壮大,这种模式带来的问题也会越来越突出。

设计一直都是系统最主要的构成部分,设计规范是一种使产品达到可扩展性和可重复性的方式。无论是潘通色卡还是飞利浦发明的十字槽螺钉,这些设计规范使我们能够避免混乱,从而创造更好的产品。最适合建立设计规范的可能就是数字化产品领域了。但它往往不被我们视为优先级的事项。

更好、更快是一个设计规范最基本的要素。更好是因为一致性的体验能让产品更易用;更快是因为它为设计师提供了一套协作的共同语言。

一、为什么需要设计规范

Airbnb这些年增长非常快速。目前我们的设计部门有十多个专职设计输出小组。我们越来越意识到我们需要更系统的设计方法用来指导和提升大家的工作效率。我相信对软件行业来说,这个问题更严重。

1、缺少限制
相比于其他设计领域,软件设计几乎没有物理限制。这就意味着任何一个问题都可能有多种解决方案,但这恰恰可能造成用户体验的不一致。因此作为产品所有者或设计师,我们必须创建并遵循自己的设计规范。

2、多人协作
软件通常是由一个团队设计出来的,有时甚至可能是很大的团队。这就意味着,创造一个连贯一致的用户体验的难度会随着团队成员的人数增加而呈指数增长。另外,无论团队协作多么一致或团队多小,不同的人总会有不同的解决方案或设计风格,很容易导致体验割裂。

3、多个平台
我们需要让产品应用于多种不同的平台和设备。为保证产品在多平台间的同步及体验的一致性,通常需要在不同平台上去做很多重复性的工作。

4、软件是连贯的
软件的另一个不同之处在于,虽然它可以被认为是一个产品,但他不会像传统的消费品那样真的磨损或被更换。即使公司和其产品本身发生了大的变化,多年前的代码和设计仍然会存在于产品的许多地方。这就要求不断的维护和升级。

二、马上开始

为了迅速解决我们前面提到的挑战,我们挑选了一些设计师和工程师组建了一个小组,把手头的工作全部放下,在公司外面找了一个工作室,专心于设计创建这套设计语言系统(DLS)。

1466518862-4825-bzC4ehuGBzfzlA6yicZNqlTTKaAw

我们为DLS设置的目标是创建一个更美观和通用性的设计语言。通过定义好的可复用的组件来提高效率。为了集中我们有限的精力,我们优先选定了客户端平台:Android和IOS。

我们开始重新审视和打印出我们以往的那些设计稿。然后将这些设计稿按照顺序依次粘贴在一个板子上,这样我们就能找出哪块的体验比较糟糕并提出优化方案。我们认为,创建一个设计规范最好的开始方式就是先把现有的难题处理掉。我们每个人都分别专注于那些需要重新设计的产品页面或是某些模块,很快我们就建立起了一套指导原则:

1、统一性
每个模块的设计都是整体的一部分,应该对整体的表现有正向的提升作用。不应该有单独的特性或风格。

2、通用性
Airbnb在全世界都被广泛地应用。我们的产品和视觉语言应该被所有用户认可并理解。

3、形象化
我们同时专注于功能设计和视觉设计,我们的产出物应该能清晰地引导用户的认知。

4、会话式
我们使用了动态呼吸式的表现手法让用户能够轻易地理解我们的产品。

三、奠定基础

在开始设计这个系统之前,我们已经创建了一个基本的风格指南,我们称为基础部分。这个基础简单地定义了我们的字体、颜色、图标、间距和信息结构。当设计师们在各自探索多样化的创意设计方案时,这个基础风格指南对于一个统一的设计规范来说是必不可少的。我们觉得自己都非常努力,因为我们在为共同的理想工作。回顾我们集体工作的每一天,我们开始看到这个系统模式渐渐浮现出来。我们会在必要时采取纠偏措施,开始定义标准化的组件。

1466518862-4424-GD6BWYibQeJQjwxBnQoicjf0jSLA

四、创建组件

一般来说,许多风格指南定义组件都被作为“原子组件”,然后用于构建更复杂的“分子组件”。理论上,这种做法能很好的构建连贯灵活的系统。而在现实中,更可能的情况却是:这些可复用的组件被各种方式整合在一起,形成一个更复杂的“分子组件”。其结果往往是造成了各种杂乱脱节的体验,使系统难以维护。

为了避免依赖“原子组件”,我们转而开始考虑把组件作为一个活的有机体元素。它们有功能和特性,是由一组属性定义构成,可以与其他元素共存,也能单独起作用。

一个统一的设计语言不应该仅仅是一组静态规则和单个组件构成的,它应该是一个不断发展的生态系统。

例如,我们的用户头像元素可能最初是被一个风格指南定义的,但最终被用于各种平台上时可能要面临不同的排列或呈现方式,这会导致我们后续难以更新。所以我们必须要在做好适配的前提下解决这个问题。

1466518934-2873-A287BqHSVlDoJnwUVzSiaC5yeoEw

每个组件都会定义一些必需的元素(如标题、文本、图标和图片),有时也可能包含其他可选元素。这些元素在Sketch文档和代码层都要被定义。不是让层独立于组件起作用,我们要求每个组件都有一个层,并能在视图逻辑上可见或隐藏。

1466518935-4462-SG8SvxmYLowKo90bLazYJwGicUDQ

构建组件库

我们在创建这些组件的同时,会把他们收集在一个叫做库的根文件,这种做法贯穿整个设计过程中。一两周后,我们开始看到通过在反复的设计中使用库文件所带来的生产力上巨大飞跃。某天,当最后的原型确定了之后,我们的团队已经能够使用我们的库文件提供的框架在短短几小时内创造近50张设计稿。

随着库文件的扩张,我们开始把各个功能相似的独立组件整理到一个画板中,做好分类。这些画板由一系列常规的分类组成:导航,移动文本,图片和特殊类。

1466518862-4940-86BXUicoEoVAjUJpDBnb2oyj6mbA

我们创建了一组用于手机的组件(iOS和Android),并让他们适配平板电脑。平板电脑上的组件在很大程度上跟手机上的相同的,从技术层面上来说只需要一套代码,两套不同的样式而已。类似于为网页设计而生的响应式设计方案,这些系统组件在外观和位置上都可以不同。设计师可以使用常规组件设计一个版本,之后就可以很容易地适应IOS和Android下的不同屏幕尺寸。

对于平板电脑,我们创建了一个简单布局的概念,如焦点视图,它聚焦于页面内容,模态窗口和网格布局。

1466519081-3940-OUibl39EG3FN6NibibP9XYWZSyPg

所有的组件和视图都是用我们自己的技术视图框架构建的,用来处理这些风格,状态和自适应性。

经验教训

我们知道这是一个具有挑战性的项目。这意味着要重新设计和重新构建应用程序中的大多数视图。我们尽最大的努力创建出一个视觉语言系统并于4月17日发布新应用程序。在以后的项目中,我们希望我们能够避免下面这些坑。

1、并不是所有的组件都是同等优先的

在大多数应用程序中都会有一套组件是经常重复使用的。对我们来讲,这些组件就像表格中的行元素。回想一下,我真希望我们花了更多的时间来考虑这些组件并产出一套强大的模式和组件库。事实上在最后,我们曾经被那些不一致的组件伤透了脑筋。

2、Sketch

我们最初试图在Sketch中用创建符号的方式来做这些组件,但最后导致一片混乱。即使是现在,我们的设计文件有时仍难以维护。下一步,我们能找到更好的办法来维护和创建新组件。

3、文档

这个项目要求我们在有限的时间内完成,导致我们忽视了一些文档记录的工作。文档的缺乏带来了一些本可以避免的混乱。像编程一样,创建良好的文档的至关重要的。对我们而言,这是一个迟早要做的事,以便让我们在做每个决定时有更清晰的思路和参考。

三、结论

这是一个里程碑式的任务,虽然这让很多产品团队成员付出了很多,但最终我们发现创建一个自己的设计语言系统是非常值得的,也是迈向未来的巨大一步。

自从设计语言和代码可以方便的共享以来,我们现在可以在所有客户端平台上大致同步的构建和发布功能。而开发进度也明显更快了,因为产品工程师可以将更多的注意力放在写功能逻辑而不是视觉代码上。此外,工程师和设计师现在也都是用同一个设计语言。

设计师们对这个系统特别兴奋。它让产品人员更加关注真实的需求和设计体验,而不是填充、颜色和类型的选择。这套设计语言让我们的视觉风格保持了很好的一致性,让整个系统更加的流畅。这个系统还使我们所有人能够更快的实现高保真原型和任何想法的呈现,而成本却更低。

我相信在这套系统的辅助下,我们可以将更多精力集中在关注实际的用户体验和我们想要传达给用户的概念和想法上。

-END-


作者:Karri Saarinen
译文来源:http://airbnb.design/building-a-visual-language/

交互密度与最小交互区域

KunalNg_UED阅读(879)

体验优秀的App之所以优秀,往往是因为他们能让用户快速访问到各项功能。这里就涉及到多点触摸的交互密度,一个较大的触摸区域,在常规操作下十分好用。

或许对于一些用户来说,触控区域的大区块,视觉上可能有点难看,但一旦你习惯了这种操作,就会发现他们的体验真的非常棒。

对于要求精确度的任务,比起键盘和鼠标,多点触控方式其实并不适合。因为多点触控很容易受到交互密度的影响。

什么是交互密度?想像一下一台设备的显示,分割成一个个的小方块。每个方块代表的是理想的最小交互区域。简单点说,就是相当于你将很多个按钮两两贴在一起,每个按钮就是你能点击到的最小交互区域。同样的大小里最小交互区域越多,交互密度就越高。

645816

当然,一台设备上不可能显示的全是按钮,但最小交互区域仍然是存在的。例如在矢量绘图App里,这决定了你是要放大到多大,才能选择出两个单独的点来。

645817

同一个矢量绘图App里,在较低的交互密度下,你便需要放大到一定大小才能轻松选取出两个点。

645818

44pt vs 20pt

iOS上,苹果建议44x44pt作为最小的点击目标区域。这适用于整个系统,苹果的app和第三方app都一样。导航栏高度是44pt,列表行高是44pt,以及许多按钮都是44pt高。虽然也有一些小于这尺寸的例子,但不多见。

对于OS X 系统,没有直接的苹果视觉指导,但有大量可使用的示例资源——如每个OS X窗口左上角的“交通灯”按钮是12x12pt,文件窗口上的标准打开和保存按钮是20pt高,OS X 菜单栏高为22pt,下拉菜单项的高度为19pt。从这看来,使用20x20pt作为OS X上舒适的最小交互区域似乎是明智的,也是合理的。

上面的对比意味着OS X有两倍于iOS的交互密度,加之在X轴和Y轴上,导致了显示同样的内容,iOS上需要4倍的区域大小。这很值得注意。

这尺寸的区别可以在很多地方看到。iOS Mail的栏高是44pt,OS X上则是22pt。iOS上Tweetbot的分享icon是27pt高,OS X上只有13pt高。你能发现的每一处这样有意思的比较,iOS都有着大约两倍的高度和宽度。

645819

显示密度

你可能注意到我上面的比较例子一直使用的都是iOS 点(points)和 OS X 点(points)单位,并没有提及显示像素密度的不同。这是故意的,因为显示密度在iOS设备之间都会有些区别,以及大多数Mac设备之间,但是UI本身使用的pt点的尺寸是不变的。1pt大小在显示密度低(分辨率低)的设备上显示会比较大,显示密度高的设备上则看起来很小。

堆栈

不同的输入方法带来不同的交互方式,在一个单一的交互区域上,可以堆栈许多交互功能。例如iOS上的一个区域可以是点击,连续点击,长按甚至是3D Touch。

这还不够复杂,在OS X上也有同样的地方,单击、双击、长按、右击鼠标。实际上,鼠标输入也会经常配合键盘的修饰符(⇧, ⌥, ⌃, 和 ⌘)使用。许多设计软件可以通过⌥(Windows里的alt)+拖动来复制。这不是什么稀奇的功能,他让设计人员每天几乎使用上百次,极大提高工作效率。这些快捷操作也可以是另外的方式,但相同的是都不会占用额外的屏幕空间来使用。

在交互栈中,多点触控不及鼠标和键盘。我有想过键盘可以配合多点触控设备使用,但这对比与成熟、普及的iOS和OS X操作方式,并不成熟。说实话,这种配合方法是一种不入流的输入方式。

设备的交互区数

忽略堆栈,一台iPad Pro可以容纳大约723个独立的最小交互区域。一台12寸的Macbook呢?2074。最小的Mac设备则拥有比最大的iOS设备多两倍以上的UI显示量。

645820

这些数据有用吗?对于大部分工作和App来说,并没有多大用处。但对于专业的视频、音乐和设计工作呢?是的,或许其产生的效益比我预想的会更多。

这之中应该存在一个理想的交互密度方案,但显然我还没有研究出来 🙂 。多点触控总是受到很多方面影响,包括人类手指的尺寸。

如果多点触控是未来的的话,或许,我们会需要一个更大的屏幕吧。

淘宝UED的设计流程

阿西UED阅读(2415)

国内知名 UED 团队的设计流程是怎样的?
淘宝 UED 的设计流程图
1464777369-5934-54c5e1695eeeeb1710eb62c947-b来源:流程图 ;大图:流程图

alex web:

这个流程图本来是和要喝猴哥芸苓一起搞到墙上的,很遗憾由于项目原因不能继续跟进,只能请苛卡mm代劳。最终上墙的版本是根据ued的真实流程做了调整的。

这个版本是参照af3.0制作的理想化的流程。拿出来祭奠一下。

iOS 9设计规范 中文版 完整版

阿西UED阅读(20778)

1463474610-2403-11

文章索引

  • 1.1 为iOS而设计(Designing for iOS)
  • 1.1.1 设计跟随内容 (Defer to Content)
  • 1.1.2 保证清晰(Provide Clarity)
  • 1.1.3 用深度层次来进行交流(Use Depth to Communicate)
  • 1.2 iOS应用解析(iOS App Anatomy)
  • 1.3 适应性和布局(Adaptivity and Layout)
  • 1.3.1 为自适应而开发(Build In Adaptivity)
  • 1.3.2 在不同环境提供良好体验(Provide a Great Experience in Each Environment)
  • 1.3.3 使用布局来沟通(Use Layout to Communicate)
  • 1.4 启动与停止(Starting and Stopping)
  • 1.4.1 即时启动(Start Instantly)
  • 1.4.2 时刻准备好停止(Always Be Prepared to Stop)
  • 1.5 导航(Navigation)
  • 1.6 模态情境(Modal Contexts)
  • 1.7 交互性与反馈(Interactivity and Feedback)
  • 1.7.1 可交互元素吸引用户点击(Interactive Elements Invite Touch)
  • 1.7.2 用户所知道的标准手势(Users Know the Standard Gestures)
  • 1.7.3 反馈有助于理解(Feedback Aids Understanding)
  • 1.7.4 输入信息的方式要简单(Inputting Information Should Be Easy)
  • 1.8 动画(Animation)
  • 1.9 品牌推广(Branding)
  • 1.10 颜色与字体(Color and Typography)
  • 1.10.1 色彩有助于增进沟通(Color Enhances Communication)
  • 1.10.2 优秀的排版提供清晰的传达(Great Typography Enables Clear Communication)
  • 1.11 图标和图形(Icons and Graphics)
  • 1.11.1 应用图标(The App Icon)
  • 1.11.2 小图标(Small Icons)
  • 1.11.3 图形(Graphics)
  • 1.12 术语和措辞(Terminology and Wording)
  • 1.13 与iOS的整合(Integrating with iOS)
  • 1.13.1 正确使用标准UI元素(Use Standard UI Elements Correctly)
  • 1.13.2 弱化文件和文档处理(Downplay File and Document Handing)
  • 1.13.3 必要时提供可配置选项(Be Configurable If Necessary)
  • 1.13.4 充分利用iOS技术(Take Advantage of iOS Technologies)

译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines(2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会陆续更新,敬请期待。

1.1 为iOS而设计(Designing for iOS)

iOS 表现了以下三大设计原则:

  • 遵从(Deference):UI应该有助于用户更好地理解内容并与之交互,并且不会分散用户对内容本身的注意力。
  • 清晰(Clarity):各种尺寸的文字清晰易读;图标应该精确醒目,去除多余的修饰,突出重点,以功能驱动设计。
  • 深度(Depth):视觉的层次感和生动的交互动画会赋予UI新的活力,有助于用户更好地理解并让用户在使用过程中感到愉悦。

1463474612-6404-10

无论你是重新设计现有的应用,还是重新开发一个新应用,请基于下列方法进行设计考虑:

  • 首先,去除掉UI元素让应用的核心功能突显出来,并明确之间的相关性。
  • 然后,使用iOS的主题来定义UI并进行用户体验设计。完善细节设计,以及适当合理的修饰。
  • 最后,保证你设计的UI可以适配各种设备和各种操作模式,使得用户在不同场景下都可以享受你的应用。

在整个设计过程中,时刻准备着推翻先例,质疑各种假设,并以内容和功能视为重点来驱动每个细节的设计。

1.1.1 设计跟随内容 (Defer to Content)

尽管清新美观的UI和流畅的动态效果都是iOS体验的亮点,但内容始终是iOS的核心。

这里有一些方法可以确保你的设计既可以提升功能体验,又可以关注内容本身。

充分利用整个屏幕。系统天气应用是这个方法的绝佳范例:用漂亮的全屏天气图片呈现现在的天气,直观地向用户传递了最重要的信息,同时也留出空间呈现了每个时段的天气数据。

1463474613-1914-10

重新考虑(尽量减少)拟物化设计的使用。遮罩、渐变和阴影有时会让UI元素显得很厚重,导致影响到了对内容的关注。相反,应该以内容为核心,让用户界面成为内容的支撑。

1463474615-1798-10

用半透明UI元素样式来暗示背后的内容。半透明的控件元素(比如控制中心)可以提供了上下文的使用场景,帮助用户看到更多可用的内容,并可以起到短暂的提示作用。在iOS中,半透明的控件元素只让它遮挡住的地方变得模糊——看上去像蒙着一层米纸——它并没有遮挡屏幕剩余的部分。

1463474623-2291-10

1.1.2 保证清晰(Provide Clarity)

确保你的应用始终是以内容为核心的另一个方法是保证清晰度。这里有几种方法可以让最重要的内容和功能清晰可见,且易于交互。

使用大量留白。留白可以使重要的内容和功能更加醒目、更易理解。留白还可以传达一种平静和安宁的心理感受,它可以使一个应用看起来更加聚焦和高效。

1463474616-3507-10

 

让颜色简化UI使用一个主题色——比如Notes中用了黄色——高亮了重要区块的信息并巧妙地用样式暗示可交互性。同时,也让应用有了一致的视觉主题。内置的应用使用了同系列的系统颜色,这样一来,无论在深色或浅色背景上看起来都很干净,纯粹。

1463474620-5205-10

 

通过使用系统字体确保易读性。iOS的系统字体(San Francisco)使用动态类型(Dynamic Type)来自动调整字间距和行间距,使文本在任何尺寸大小下都清晰易读。无论你是使用系统字体还是自定义字体,一定要采用动态类型,这样一来当用户选择不同字体尺寸时,你的应用才可以及时做出响应。

1463474621-2631-10

使用无边框的按钮。默认情况下,所有的栏(bar)上的按钮都是无边框的。在内容区域,通过文案、颜色以及操作指引标题来表明该无边框按钮的可交互性。当它被激活时,按钮可以显示较窄的边框或浅色背景作为操作响应。

1463474626-6209-10

1.1.3 用深度层次来进行交流(Use Depth to Communicate)

iOS经常在不同的视图层级上展现内容,用以表达层次结构和位置,这样可以帮助用户了解屏幕上对象之间的关系。

对于支持3D触控的设备,轻压(Peek)、重压(Pop),以及快捷操作(Quick Actions)能让用户在不离开当前界面的情景下预览其他重要内容。

1463474626-3411-10

通过使用一个在主屏幕上方的半透明背景浮层,这样文件夹就能清楚地把内容和屏幕上其他内容区分开来。

1463474626-8036-10

如图所示,备忘录(Reminders)以不同的层级展示内容条目。用户在使用备忘录里的某个条目时,其他条目会被集中收起在屏幕下方。

1463474632-2899-10

日历具有较深的层级,当用户在翻阅年、月、日时,增强的转场动画效果给用户一种层级纵深感。在滚动年份视图时,用户可以即时看到今天的日期以及其他日历任务。

1463474633-2156-10

当用户选择了某个月份,年份视图会局部放大该月份,过渡到月份视图。今天的日期依然处于高亮状态,年份会显示在返回按钮处,这样用户可以清楚地知道他们在哪儿,他们从哪里进来以及如何返回。

1463474633-9952-10

类似的过渡动画也出现在用户选择某个日期时:月份视图从所选位置分开,将所在的周日期推向内容区顶端并显示以小时为单位的当天时间轴视图。这些交互动画增强了年、月、日之间的层级关系以及用户的感知。

1463474635-9390-10

 

1.2 iOS应用解析(iOS App Anatomy)

几乎所有的iOS应用都应用了UIKit framework中定义的组件。了解这些基本组件的名称、作用和功能可以帮助你在应用的界面设计过程中做出更好的决策。

1463474821-5549-10

UIKit提供的UI组件可以大致分为以下4种类型:

  • 栏(Bars):包含了上下文信息来指引用户他们所在的位置,以及控件来帮助用户导航或执行操作。
  • 内容视图(Content Views):包含了应用的具体内容以及某些操作行为,比如滚动、插入、删除、排序等等。
  • 控件(Controls):用于执行操作或展示信息。
  • 临时视图(Temporary Views):短暂出现给予用户重要信息或提供更多的选择和功能。

UIKit除了定义UI组件元素,还定义对象如何实现功能,例如手势识别、绘图、辅助功能和打印支持。

从编程的角度来看,UI组件元素其实是视图的子类,因为它们继承了UIView。视图能绘制屏幕内容并知道用户何时在其范围内触屏。视图的所有类型有:控件(比如按钮和滑块)、内容视图(比如集合视图和表格视图),以及临时视图(如警告提示和动作菜单)。

要在应用中管理一组或者一系列的视图,通常需要使用视图控制器。它能协调视图的内容显示,实现与用户交互的功能并能在不同屏幕内容之间切换。比如,“设置”使用了一个导航控制器来展示其视图层级。

这里有一个关于视图与视图控制器如何结合并呈现iOS应用的UI的例子,如图。

1463474638-6082-10

尽管开发者认为真正起到作用的是视图和视图控制器,但一般用户感知到的iOS应用是不同屏幕内容的集合。从这个角度来看,在应用里,屏幕内容一般对应于一个独特的视觉状态或者模式。

注:一个iOS应用程序包含一个窗口。但是,不同于计算机程序中的窗口,iOS窗口没有可见的部分并且不能在屏幕上被移动到另一个位置。很多iOS应用程序只有一个窗口;可以支持外部显示设备器的应用程序可以有不止一个窗口。

iOS Human Interface Guidelines中,屏幕(screen)这个词和大部分用户理解的一样。作为一个开发者,你也许需要阅读一下其他与UIscreen相关的章节,这样你可以更好的了解如何关联外部屏幕。

 

1.3 适应性和布局(Adaptivity and Layout)

1.3.1 为自适应而开发(Build In Adaptivity)

人们通常希望在他们所有的设备和多种情境中使用自己喜欢的应用程序,比如在不同的设备方向上和iPad的分屏情况下。尺寸类别( Size classes)和自动布局(Auto Layout)可以通过定义屏幕的布局、视图控制器和视图在环境变化时候应该怎么适应来帮助你实现这个愿望。(显示环境[display environment]的概念指的是设备的整个屏幕或者其中一部分,比如弹出框的区域或者iPad分屏视图中其中一侧的区域。)

iOS在特征集合(trait collection)的定义中包含了显示环境的概念,特征集合囊括了尺寸类别(size class),显示比例(display scale)和用户界面语言(user interface idiom)。你可以使用一个特征集合让你的视图和视图控制器响应显示环境的变化。

iOS定义了两个尺寸类别(size class),常规的(regular)和压缩的(compact)。常规尺寸与拓展的空间紧密相关,压缩尺寸与约束的空间相关。想要定义一种显示环境,你需要定义一种横屏尺寸类别,与一种竖屏尺寸类别。如你所想,一个iOS设备在竖屏模式可以使用一套类别,而横屏模式下可以使用另一套类别。

iOS能随着尺寸类别和显示环境变化而自动生成不同布局。举个例子,当垂直尺寸从压缩变为常规时,导航栏和工具栏会自动变高。

当你靠尺寸类别来驱动布局变化时,你的应用在任何显示环境时都能显示得很好。关于如何在Interface Builder中更好的使用尺寸类别,你可以查阅Size Classes Design Help.

注:在一种尺寸类别中,持续使用Auto Layout进行小的布局调整,比如拉伸或压缩内容。更多Auto Layout,参看 Auto Layout Guide.

下面的实例可以帮助你形象展现尺寸类型如何适配不同设备的显示环境。例如:iPad(包括iPad Pro)在长宽和横屏竖屏时都使用常规尺寸类型。换句话说,iPad显示环境一直处于垂直和水平的常规状态。

1463474647-5640-10

注:合格的iPad型号支持多任务,你的应用可能需要与其他应用共享同一个屏幕。确保使用Auto Layout,这样你可以在用户使用多任务功能时响应他,比如 分屏模式(Split View)和多任务分屏模式(Slide Over)。

除了使用Auto Layout,当你在iPad Pro上展示可读性的内容时,依靠UIView的 readableContentGuide属性是非常重要的,这样可以拥有让读者舒服的边距。

iPhone的显示环境可根据不同的设备和不同的握持方向而改变。

竖屏时,iPhone6 Plus使用的是压缩宽度和常规高度类型。

1463474690-4062-10

横屏时,iPhone6 Plus使用的是常规宽度和压缩高度类型。

1463474691-7151-10

其他iPhone型号,包括iPhone6使用相同的尺寸类型设置。

竖屏时,iPhone 6,iPhone 5 和iPhone 4S使用的是压缩宽度和常规高度。

1463474822-3576-10

横屏时,这些设备在宽高上使用的都是压缩类。

1463474823-5896-10

1.3.2 在不同环境提供良好体验(Provide a Great Experience in Each Environment)

当你使用自适应来开发UI时,你可以保证UI跟随显示环境变化而适当地响应。遵照这些指南,你可以给用户良好的设备响应体验。

在所有环境下都保持对主体内容的专注。这是最高优先级。人们使用应用时,浏览感兴趣的内容并与之发生互动。随着环境变化改变专注点会让用户感觉到迷失方向,让他们感觉对应用失去控制。

避免布局上不必要的变化。在所有环境中保持一致的使用体验,能让人们在旋转设备或在不同设备上运行你的应用时维持稳定的使用模式。例如,如果你在水平的常规模式下使用了网格来显示图像,那么无需在压缩模式下使用列表来展示同样的内容,虽然你可能调整了网格的尺寸。

如果你的应用只在一个方向上运行,那么请直接一点。人们希望在各种握持方式下都可以使用你的应用,能满足这个期待是最好的。但是,如果你的应用只在一个方向下运行,那么你应当注意:

  • 避免出现提示人们旋转设备的相关UI元素让应用在支持的方向下清晰地运行,如果需要用户旋转设备,不要给UI添加不必要的混乱。
  • 支持同一个方向上的变化。例如,如果一个应用只能横屏运行,用户无论用左手或是右手握持时都能触及到home键。如果用户在使用应用时180度旋转设备,那最好应用内容也能及时响应并旋转180度。

如果你的应用将设备方向翻转视为用户输入(的一种指令),那么就按照程序设定的方式来响应设备翻转。举个例子,一个游戏让用户利用设备翻转来移动游戏中的部件,那么这个游戏应用本身(的UI)不能对翻转屏幕产生响应。在这种情况下,你必须关联两个需要变化的方向,并且允许人们在这两个方向切换直到他们开始(了解并执行)应用的主体任务。一旦人们开始执行主要任务,那就开始按程序设定的那样来响应设备的动作。

1.3.3 使用布局来沟通(Use Layout to Communicate)

布局包含的不仅仅是一个应用屏幕上的UI元素外观。你的布局,应该告诉用户什么是最重要的,他们的选择是什么,以及事物是如何关联起来的。

强调重要内容或功能,让用户容易集中注意在主要任务上。有几个比较好的办法是在屏幕上半部分放置主要内容——遵循从左到右的习惯——从靠近左侧的屏幕开始:

1463474829-1914-10

使用不同的视觉化重量和平衡来告诉用户当前屏显元素的主次关系。大型控件吸引眼球,比小的控件更容易在出现时被注意到。而且大型控件也更容易被用户点击,这让它们在应用中尤其有用——就像电话和时钟(上面的按钮)那样——能让用户经常在容易分心的环境下仍然保持正常使用。

1463474645-4389-10

使用对齐来让阅读更舒缓,让分组和层次之间更有秩序。对齐让应用看起来整洁而有序,也让用户在滑动整屏内容时更容易定位和专注于重要信息。不同信息组的缩进与对齐让它们之间的关联更清晰,也让用户更容易找到某个控件。

确保用户在内容处于默认尺寸时便可清楚明白它的主要内容与含义。例如,用户应当无需水平滚动就能看到重要的文本,或不用放大就可以看到主体图像。

准备好改变字体大小。用户期望大多数应用都可以响应他们在iOS的设置中设定的字体大小。为了适应一些文本大小的变化,你也许需要调整布局;想要得到更多文本显示相关的信息,请查阅下文“颜色与字体”中相关的内容。

尽量避免UI上不一致的表现。在一般情况下,有着相似功能的控件看起来也应该类似。用户常常认为他们看到的不同总有原因,而且他们倾向于花时间去尝试(译者按:因此为了避免用户做无用的尝试,建议类似的功能外观都保持一样。)

给每个互动的元素充足的空间,从而让用户容易操作这些内容和控件。常用的点按类控件的大小是44 x 44点(points)。

1463474832-9155-10

 

1.4 启动与停止(Starting and Stopping)

1.4.1 即时启动(Start Instantly)

我们通常认为用户不会花超过一两分钟去评价一款新应用。当你可以最大程度地利用这段极短的时间,即时呈现对用户有帮助的内容时,你就能够激发新用户的兴趣并给所有用户一种极棒的体验。

1463474832-9182-10

重要:不要在安装过程结束后告诉用户需要重启设备。重启需要花费时间,同时也会让人觉得你的应用不可靠且很难使用。
如果你的应用有内存使用或其它问题,导致不重启就无法流畅运行,你必须声明这些问题。想要了解如何开发一款性能良好的应用,请参阅Use Memory Efficiently.
尽可能避免使用闪屏或者其他启动体验方式。用户能够在启动应用后立即开始使用是最好不过的。

尽可能地,避免让用户做过多设置。而应该如此:

  • 聚焦在80%目标用户的需求上。这样绝大部分用户就无需设置各种选项,因为你的应用已经默认处于他们想要的状态。如果有些功能仅有少部分用户想要,或者是大部分用户只需要使用一次,那就别管它了。
  • 尽可能用其他方式获取更多的用户信息。如果你能得到用户在内置应用或硬件设置中提供的信息,直接从系统中获取,不要让用户再次输入。
  • 如果你必须要求用户设置用户信息,在你的应用中直接提示用户输入。然后尽快保存这些设定(一般来说,保存到你的应用的设置模块中)。这样用户就无需强制跳出应用进入系统设置页面了。如果用户需要更改设置,他们可以在任何时候进入应用的设置模块进行修改。

尽可能让用户晚一点再登录。最理想的状态是,用户在无需登录的情况下就能尽量多地浏览内容并使用部分功能。例如,App Store会在用户确定进行购买商品时,才要求用户进行登录。对于那些强制用户登录后才能进行一切有用操作的应用,用户往往会直接放弃。

如果你的应用必须先登录后使用,那么你应该在登录页面有一些简短的文字,来描述为什么必须先登录,以及这样做会给用户带来什么好处。

谨慎使用新手引导(介绍应用的功能和如何进行操作)在考虑新手引导之前,你应该努力地完善你的应用,尽可能使应用的功能直观和易于寻找。其实,好的应用不需要新手引导。如果你确实觉得需要新手引导,那么请参考如下的建议,设计一个简洁、有针对性并且不妨碍用户的新手引导。

  • 只提供开始使用应用所必需的信息。好的新手引导应该告诉用户第一步应该做什么,或者简短地演示大部分用户感兴趣的一些功能。如果在能够探索你的应用之前,给用户展示太多信息,让用户记住这些不是当前所必须的内容,会让用户觉得你的应用很难用。如果在某些特定场景下确实需要额外帮助,那么也应该只在用户处于这个场景之后再提供。
  • 使用动画和可交互的方式来吸引用户,并让用户通过实际操作来学习如何使用。对于文字内容的增加应该谨慎,且仅当增加文字对于提升体验有益时才这么做。不要指望用户会阅读大段的文字。例如,可以使用动画而不是文字来描述如何执行一个简单的任务。在引导用户了解较为复杂的任务时,可以通过一些引导浮层来简要说明每一个步骤用户需要做什么。尽可能避免展示应用截图,因为截图不可交互的,用户可能会混淆截图和应用的实际界面。
  • 能够让用户很容易地取消或者跳过新手引导。有些用户看完新手引导之后就不想再看,有些甚至根本就不想看新手引导。请记住用户的选择,不要强迫用户每次打开你的应用都要再选择一次。

不要太早要求用户去给你的应用评分。过早要求用户进行评分可能会适得其反。如果你想获得有价值的反馈和评论,在邀请用户评论之前,请给他们一点时间来使用你的应用,并对你的应用形成印象。例如,你可以等用户访问了一定数量的页面或完成了一定数量的任务之后,再邀请他们进行评价。

一般建议按照屏幕默认的定向方式启动你的应用。尽管如此,如果你的应用只有一种屏幕方向,那么就始终以这个方向启动,让用户在他们自己需要时再改变设备方向。例如,一个游戏或者媒体观看应用只在横屏模式下运行,那么就应该以横屏模式启动,即使设备当前处于竖屏模式。这样的话,如果用户在竖屏模式下打开应用,他们也知道应该把设备转成横屏来进行使用。

1463474834-1113-10

注:最好让横屏应用支持两种方向的横屏,即home键在左或在右方都支持。如果设备当前已经处于横向状态,那么就按照当前状态启动应用,除非你有充分的理由不这么做。其他情况时,可以考虑按home键处于右侧的方式启动应用。(想要了解更多关于支持不同设备方向的内容,请参阅前文中Adaptivity and Layout相关章节。)

提供一张与应用首页看上去一样的闪屏。iOS会在启动应用时调用这张图,这样可以让用户觉得启动速度很快,同时,也可以让你的应用有足够的时间去加载内容。具体如何制作闪屏,请查阅Launch Files。

如果可能,不要让用户在初次启动应用时阅读免责声明或者确认用户协议。你可以直接在App Store展示这些内容,使用户在下载前就有所了解。如果在某些情况下你必须展示这些内容,要确保它们与界面保持统一并在产品功能与用户体验之间达成平衡。

在应用重启后,需要恢复到用户退出使用时的状态,让他们可以从中断之处继续使用。无需让用户记住是如何回到此状态的。了解更多关于保持和恢复应用状态的有效方式,请查阅Preserving Your App’s Visual Appearance Across Launches。

1.4.2 时刻准备好停止(Always Be Prepared to Stop)

iOS 应用不存在关闭或退出选项。当用户切换到另一个应用,回到主屏幕或者将设备调至睡眠模式的时候,其实就是停止了当前应用的使用。
当用户切换应用时,iOS的多任务系统会将其放置到后台并将新应用的UI替换上来。在这种情况下,你必须做到以下几点:

随时并尽快保存用户信息。因为在后台的应用随时有可能被终止或退出。

当应用停止的时候保存尽可能多的当前状态的详细信息。这样使用户可以在回到应用时能从中断之处继续使用。例如,在使用可滚动的数据列表时,退出后保存列表所在的位置。了解更多关于保持和恢复应用状态的有效方式,请查阅Preserving Your App’s Visual Appearance Across Launches.

有些应用可能需要一直在后台运行。例如,用户可能希望能在使用一个应用的同时还能一直听歌,接着又想用另外一个应用来检查代办项或者玩游戏。关于如何正确处理多任务,请查阅Multitasking.

不要强制让应用退出。因为这样会让用户误以为是系统崩溃。如果有问题产生,需要告诉用户具体状况以及如何解决。以下有两个建议,取决于出现的问题有多严重,可以酌情使用:

如果应用中所有的功能当前都不可用,那么应该显示一些内容来解释当前的情形,并建议用户如何进行后续操作。这部分内容给予了用户以反馈,使用户相信你的应用现在没问题。同时这也可以稳定用户情绪,让他们决定是否要采取纠正措施,继续使用应用,还是切换到另一个应用。

1463474652-9188-10

如果只有部分功能不可用,那么只要当用户使用这些功能时显示提示即可。其他情况下,用户就应该能正常使用应用的其他功能。如果你决定使用警告框来进行提示,请确保只在用户尝试使用不可用的功能时再显示。

1463474652-9224-10

 

1.5 导航(Navigation)

除非导航设计不合理,不然用户应该明显察觉不到应用中的导航体验。导航设计应该能够支撑你应用结构和目的却又不分散用户注意力。
广义来说,导航主要有以下几种类型,每个导航都有其适应的应用结构:

  • 分层
  • 扁平
  • 内容或体验驱动

在有层级结构的应用中,用户在每个层级中都要选择一项,直到到达目的层级。如果要切换到另一个目的层级,用户必须回退一些层级,或者直接回到初始层级再次选择。系统设置和邮箱应用在这方面是很好示范,可以参考他们。

1463474650-9040-10

译者注:以上为视频截图,完整视频可点击观看

在扁平信息架构的应用中,用户可以从首页目录直接切换到另一个,因为所有的分类都可以从主屏直接访问。音乐和App Store是两个使用扁平结构的好例子。

1463474654-7327-10

译者注:以上为视频截图,完整视频可点击观看

在内容或体验驱动的信息架构应用中,导航也会根据内容或体验来设计。例如,在阅读一本电子书时,用户会一页接一页的进行阅读,或者直接从目录中选中某一个指定的页码;同样,在游戏中导航也是体验的重要组成部分。

1463474654-4657-10

译者注:以上为视频截图,完整视频可点击观看

在某些情况下,在一个应用中结合多种导航类型会有很好的效果。例如,对于扁平信息结构中某一分类下的内容,用分层导航的方式来显示可能会更好。

应该让用户时刻清楚自己当前在应用中所处的位置,及如何前往目的页面。无论使用哪种适合你的应用结构的导航,最重要的是用户访问内容的路径要有逻辑、可预期和易于追溯。

UIKit定义了一些标准的UI元素,以方便地构建分层或扁平导航,还有一些元素可以构建以内容为中心的导航,例如电子书或者媒体观看类应用。游戏或者其他体验驱动的应用通常需要一些自定义的元素和行为。

使用导航栏(Navigation Bar)帮助用户轻松访问分层内容。导航栏的标题可以显示用户当前所处的层级,而后退按钮可以回到上一层级。想要了解更多内容,请查看Navigation Bar.

使用标签栏(Tab Bar)显示同类型的内容或功能。标签栏很适合于扁平信息结构,可以让用户在分类之间随意切换,而不用在意当前所处的位置。想要了解更多内容,请查看Tab Bar.

在应用中,如果每屏显示的都是同类项或同类页,可以使用页面控件(Page Control)。页面控件的优点是可以直观地告诉用户有多少个项目或页面,以及当前所处位置。想要了解更多内容,请查看Page Control

一般来说,最好能给用户提供到达每一屏的唯一路径。如果某屏内容用户需要在不同场景下查看,可以考虑使用临时视图,例如模态视图、动作菜单或警告框。想要了解更多,请查看Modal ViewAction SheetAlert

UIKit同时还提供了以下相关控件:

  • 分段控件(Segmented Control)。分段控件让用户在一屏内就可以查到不同分类的内容,而不需要切换到其他屏幕。
  • 工具栏(Toolbar)。尽管工具栏和导航栏或标签栏相似,但是工具栏不具导航作用。相反,工具栏为用户提供了可以控制当前屏幕内容的控件。

(译者注:上文提到的Navigation Bar, Tab Bar, Page Control, Modal View, Action Sheet, Alert, Segmented Control和Toolbar均处在iOS Human Interface Guidelines的第4章 UI Elements部分,翻译将在后续更新中放出,烦请各位耐心等候。若有需要,亦可先参考先前已翻译的iOS7 UI Elements章节:。)

 

1.6 模态情境(Modal Contexts)

模态是一个承载某些连贯操作或内容的优缺点并存的模式。它可以给用户提供一种不脱离主任务的方式去完成一个任务或者获得信息,但是也会临时性的阻止用户对应用的其他部分进行交互操作。

1463474656-2378-10

理想情况下,用户可以与iOS 应用进行一种非线性的交互,所以,尽可能的减少你应用中的模态体验是最好的。通常情况,仅在以下情境可以考虑使用模态:

  • 必须引起用户关注的时候
  • 一个独立的任务需要完成或者很明确需要被放弃,为了避免在模棱两可的状态下遗漏用户信息的时候

保证模态任务简单、简短和高度聚焦。你肯定不希望用户使用模态视图时像使用应用中的一个mini应用一样。如果子任务过于复杂,用户会在进入模态情境时忽略了主要任务。在设计一个涉及视觉层次的模态任务时特别要考虑这一点,因为用户有可能迷失并且忘记如何回到之前的操作中去。如果一个模态任务必须包含不同视图的子任务,确保给用户一个独立、清晰的导航路径,并避免迂回。更多关于模态试图的信息请参考Modal View.

始终提供明显、安全的退出模态任务的途径。确保用户在退出模态视图时可以预期操作的结果。

一个任务需要多层级的模态视图时,确保用户理解点击非最高层级下的完成按钮的结果。点击一个低层级视图上的完成按钮是完成这个视图中任务的一部分,还是整个任务。因为有可能存在这种困惑,所以要尽可能避免在下级视图中添加完成按钮。

保证提醒对话框的内容都是必要且可操作的。提醒对话框会打断用户的体验并且要点击才会消失,所以要让用户感到提醒信息是有用的,打断是有价值的。想要了解更多请参考Alert.

(译者注:上文提到的Modal View与Alert均处在iOS Human Interface Guidelines的第4章 UI Elements部分,翻译将在后续更新中放出,烦请各位耐心等候。若有需要,亦可先参考先前已翻译的iOS7 UI Elements章节:。)

尊重用户关于接收通知的偏好设置。用户会设置接收应用通知的形式,确保遵重用户的喜好设置,否则可能会触怒用户,导致其关闭应用中所有的推送通知。

 

1.7 交互性与反馈(Interactivity and Feedback)

1.7.1 可交互元素吸引用户点击(Interactive Elements Invite Touch)

为了暗示交互性,设计时会使用很多线索,包括点击的反馈、颜色、位置、上下文、表意明确的图标和标签等。并不需要过于修饰元素来向用户展示可交互性。

在支持3D Touch的设备上,当用户按压主屏上的图标时,背景会虚化以此来暗示可以进行更多功能的选择。

1463474842-9504-10

一个关键的颜色可以给用户提供很强的视觉指引,尤其是没有冗余的其它颜色时。为了对比,使用蓝色来标记可交互的元素,同时能提供统一的、易识别的视觉风格。

1463474660-6515-10

返回按钮使用多个线索指明其可交互并传达其功能:它出现在导航中,显示了一个指向后方的图标,使用了关键色,并且显示了上一级页面的标题。

1463474837-8469-10

一个图标或者标题提供了清晰的名称指引用户点击它。例如,地图中的标题“Flyover Tour”,“Directions to Here”,清晰的说明了用户可做的操作。结合关键色,就可以省去按钮边界或其他多余的修饰。

1463474663-8120-10

在内容区域,必要时可以给按钮添加边界或背景。位于栏(Bar)、动作列表(Action Sheet)和警告框(Alert)中的按钮可以不需要边界,因为用户知道在这种区域中大多数选项是可交互的。但是在内容区域,有必要使用边界或背景将按钮从其他内容中区分出来。例如,音乐,时钟,照片,App Store在一些特别的场景中使用这种按钮。

照片管理中给分享按钮增加了边框,从其他解释性文本中区分出来。

1463474663-4163-10

时钟在秒表和计时页面中给按钮增加背景来强调开始和暂停按钮,并且使按钮在易分散注意力的内容中更容易点击。

1463474663-6490-10

应用商店中使用有边界的按钮,将按钮和整个内容条区分开来,点击整条内容查看详细信息,点击按钮进行下载安装。

1463474666-7854-10

1.7.2 用户所知道的标准手势(Users Know the Standard Gestures)

用户使用点击、拖拽、捏合等手势与应用和他们的IOS设备进行交互。使用手势拉近了用户和设备之间的距离,并且增强了直接操纵感。用户通常期待手势在不同应用之间都是通用的。

用户在使用3D Touch时不需要学习额外的手势操作。当用户轻按屏幕并得到反馈时,很容易就能发现3D Touch提供的额外的交互方式。

1463474670-3486-10

除了用户熟悉的标准手势,iOS还定义了一些系统范围内的操作,例如呼出控制中心(Control Center)或消息中心(Notification Center)。用户可以在任意应用下都使用这些手势。

不要给标准手势赋予不同的行为。除非你的应用是游戏,否则重新定义标准手势会使用户迷惑,且增加使用难度。

不要创建和标准手势功能相似的手势操作。用户已经习惯了标准手势的行为,没有必要让用户额外学习不同的操作手势来达到同样的操作结果。

可以用复杂手势作为完成某任务的快捷方式,但不能是唯一触达方式。最好给用户提供一些简单,直接的方式完成某操作,即使这种方法需要他们额外地多点击一到两次。简单的手势能让用户集中于当前的体验和内容,而不是交互操作本身。

除非是游戏,否则避免定义新的手势。在游戏或其他沉浸式的应用中,操作手势也是有趣体验的一部分。但是在普通应用中,帮助用户达成目标要比操作本身重要的多,所以最好使用标准手势,尽量避免让用户去发觉和记忆新的操作。

在特定的环境中,可以考虑使用多指操作。虽然复杂的操作并不一定适用于所有应用,但对用户会花大量时间使用的应用来说可以丰富体验,例如游戏或创建内容环境。但因为非标准手势可发现性差,要尽量少用,并且不要让这类手势成为完成任务的唯一方式。

1.7.3 反馈有助于理解(Feedback Aids Understanding)

反馈帮助用户了解应用当前在做什么,发现接下来可以做什么以及理解他们动作产生的结果。UIKit的操作和视图提供了很多反馈类型。

尽可能将状态或其他的反馈信息整合到UI中。用户不进行操作或不跳出当前内容就能获得需要的信息是最好的。例如,邮箱将当前的状态显示在不影响当前内容的工具栏上。

1463474670-6123-10

避免显示不必要的提醒对话框。对话框是很强的反馈机制,只有在传递非常重要,且可操作的信息时才需要使用它。如果用户常看到很多没有重要信息的对话框,他们很快就会忽略所有对话框提醒。想要了解更多信息,请参考Alert.(译者注:Alert处在iOS Human Interface Guidelines的第4章 UI Elements部分,翻译将在后续更新中放出,烦请各位耐心等候。若有需要,亦可先参考先前已翻译的iOS7 UI Elements章节:。)

1.7.4 输入信息的方式要简单(Inputting Information Should Be Easy)

不管用户是点击控件还是使用键盘,输入信息都会花费时间和精力。如果在发挥有用的效用前就让用户输入大量信息会减弱用户继续使用的欲望。

让用户更容易的进行选择。例如,使用选择器或者表格代替纯文本,因为大部分用户觉得从列表中进行选择要比打字容易的多。

1463474686-3236-10

适时地从iOS中获取信息。设备上存储了大量的用户信息。可以的话,不要让用户提供你可以轻易找到的信息,例如联系人或日历信息。

提供有用的反馈来平衡用户的输入。在使用应用的过程中,付出和回报的概念可以帮助用户感到进程在被推进。

 

1.8 动画(Animation)

细微、精美的动画遍布iOS的用户界面,他们使应用的体验更具吸引力,更具动态性。适当的动画可以:

  • 传达状态和提供反馈
  • 增强直接的操纵感
  • 将用户的操作可视化

1463474672-6931-10

(译者注:以上为视频截图,完整视频请点击观看)

谨慎地增加动画,特别是在那些无法提供沉浸式体验的应用中。过多和无理由的动画会阻碍应用的流畅性,降低性能,还会分散用户在操作中的注意力。

尤其是要有目的地,合理地应用动效和UIKit中的动态控件,并确保对结果进行测试。合理地使用动效可以提升用户的理解程度和愉悦感;应用过度使用动效会给用户带来迷惑和难以掌控的感觉。

如果可以,保持自定义动画和内置动画的一致性。用户习惯于内置iOS应用使用的精细动画。事实上,用户倾向于把视图之间的平滑切换,对设备方向改变的流畅相应和基于物理的滚动效果看做是iOS体验的一部分。除非,你的应用要给用户提供类似游戏应用的沉浸式体验,这种情况下自定义的动画可以区别于内置动画。

使用风格类型一致的动画。自定义动画之间也需要保持一致性,这样可以让用户在使用应用以之前建立的经验为基础。

一般来说,自定义的动画要考虑动画的现实性和可信性。人们乐意接受自由的艺术创作,但是当动效不合理或者违反物理学时,用户会感到困惑。例如,当你从屏幕顶部下滑拖出一个视图的时候,你也要上滑将它收起,因为这么做可以帮助用户记住这个视图从何而来。如果你下滑到屏幕底部关闭这个视图,用户关于从屏幕上方呼起的心理模型就会被打破。

 

1.9 品牌推广(Branding)

成功的品牌推广不仅仅包括在应用中添加品牌元素。优秀的应用应该通过创建独特的外观和感觉来为用户提供愉悦、难忘的体验。

在iOS系统之下可以很容易地使用自定义的图标、颜色和字体来创建区别于其他应用的UI。当你进行这些元素的设计时,牢记以下两点:

  • 每个自定义的元素本身都需要具备良好的观感和功能性,但它也应该与应用中其他元素保持一致,无论应用中其他元素是自定义的还是标准的。
  • 为了在iOS中感觉舒适,你的应用虽然不必看起来跟内置的一样,但是需要对它的遵从、清晰度和深度(如欲了解更多,参见1 为iOS而设计(Design for iOS))进行整合。花些时间弄清楚在你的应用中遵从、清晰和深度所代表的意味,并把它们在你的自定义元素中表达出来。

当你需要让用户意识到你的品牌时,你应该遵循以下几点:

以精致优雅不唐突的方式植入品牌元素。用户使用你的应用来完成事务或者进行娱乐,他们不希望被强迫着去观看广告。为了获得最好的用户体验,你可以通过字体、颜色和图像的设计来潜移默化地地提醒用户你的品牌身份。

1463474814-8753-10

避免远离用户关心的内容。不要像上图中的反例那样将仅有品牌意义的内容放在屏幕顶部二级栏上持续展示,使正文内容空间被压缩,而是考虑以其他低侵入性的方法无处不在地展示品牌,如使用自定义颜色、字体,或巧妙地定制屏幕的背景。

抵抗住诱惑,不要把你的logo贯穿整个应用。移动设备的屏幕多数相当小,logo的每一次出现都会占据空间,从而将用户与他们想看的内容隔离开。而且,在应用中显示logo并不能像在网页中显示logo那样达到相同的目的:对于用户来说通常会很容易在不知道网页所属的情况下访问一个网页,但却极少有用户会在完全不看一个iOS系统中的应用图标的情况下就打开它。

 

1.10 颜色与字体(Color and Typography)

1.10.1 色彩有助于增进沟通(Color Enhances Communication)

在iOS系统中,颜色会用于表明交互,传递活性以及提供视觉连续性。内置的应用程序选择使用那些看起来更具个性的、纯粹、干净的颜色,并辅以或亮或暗的背景组合。

1463474678-9852-10

如果你要创建多样的自定义颜色,要确保它们能够和谐共存。例如,如果你的应用的基本风格是柔和的色调,你就应该创建一个协调的柔和色调的色板用于整个应用。

注意在不同情境下的颜色对比。例如,如果在导航栏的背景与栏按钮标题之间没有足够的对比,按钮就会很难被用户看到。一个快速但不严谨的方法是通过将设备置于不同的光照环境之中(包括晴朗的室外)来测试设备上的颜色是否具有足够的对比度。

虽然在设备上查看你的应用能够在一定程度上帮助你找到需要调整的地方,但这仍代替不了能产生可靠结果的更科学客观的方法。这种方法涉及到判定前景色和背景色的亮度值是否符合一定的比率。这个比率值可以通过在线对比度计算器或者根据WCAG2.0标准中提供的公式自己计算获得。你应用中理想的颜色对比度应该是4.5:1或更高。

当你使用自定义的栏颜色时,着重考虑半透明的栏和应用内容。当你需要创建能匹配特别颜色的栏颜色时(比如一个已有品牌中的颜色),可能在你获得你想要的结果之前,你需要用各种颜色进行实验。栏的显示将会同时受到iOS系统所提供的半透明栏与藏在栏后面的应用内容的呈现所影响。

API注:使用浅色(tintColor)的属性值给予栏按钮颜色,使用栏浅色(barTintColor)的属性值为栏本身赋色。欲了解更多关于栏属性的内容,可参见UINavigationBar Class Reference,,UITabBar Class ReferenceUIToolbar Class Reference和 UISearchBar Class Reference.

注意颜色的盲区。多数色盲的人很难区分红色与绿色。需要对你的应用进行测试以确保在其中你没有将红色与绿色作为区分两个不同状态或值的唯一方式,一些图像编辑软件或工具能够有效的帮你验证颜色的盲区。通常意义来说,使用多种方式来表征原色的交互性是非常好的(需要了解更多关于在iOS系统中表征交互性的信息,请参阅Interactive Elements Invite Touch)

考虑选择一种基准色颜色来表征交互性与状态。内置的应用里的基准色包括比如备忘录中的黄色,和日历中的红色等等。如果你定义一种用于表征交互和状态的基准色,要确保你的应用中的其他颜色不会与它发生冲突。

避免给可交互和不可交互的元素使用相同的颜色。色彩是表明UI元素交互属性的方式之一。如果可交互和不可交互的元素使用相同的颜色,用户将会难以判断哪些区域是可点的。

色彩可以向用户传达信息,但不一定会以你希望的方式。每个人眼中的色彩是不一样的,不同的文化为色彩赋予的意义也是不相同的。花时间来研究如何使用色彩才可能会被其他国家或者文化接受。你要尽可能确定应用中运用的色彩向用户传达了恰当的信息。

大多数情况下,不能让颜色喧宾夺主,让用户分心。除非色彩是应用的目的和本质所在,通常情况下色彩应该用来从细微细节之处提升用户体验。

1.10.2 优秀的排版提供清晰的传达(Great Typography Enables Clear Communication)

Apple为全平台设计了San Francisco字体以提供一种优雅的、一致的排版方式和阅读体验。在iOS 9及未来的版本中,San Francisco 是系统字体。

San Francisco搭配Dynamic Type,可以为您提供:

  • 一系列的字号大小,在任何用户设置,包括可访问性设置下,可获得优质的清晰度和极佳的阅读体验。
  • 自动调整文字的粗细,字母间距以及行高的能力。
  • 为语义上有区别的文本模块指定不同的文本样式,比如正文、脚注或者标题。
  • 文本可以根据用户在字号设置和可访问性设置中指定字体大小的变化作出适当的响应的能力

下载San Francisco可访问 https://developer.apple.com/fonts/.(注意:iOS9中的San Francisco字体取名为SF-UI)。当你在你的app中采用San Francisco时,你可以调整模拟器>设置中的值来测试在不同尺寸下你的app的文本。

注:如果你是用自定义字体,你仍然可以采用Dynamic Type或根据系统的字号设置来规划字体范围。当用户改变设置时,你的应用也必须响应式的配合。如需了解如何使用文字样式并确保当用户改变文字型号设置时你的应用能够获取通知,可以参考Text Styles.

San Francisco 有两类尺寸: 文本模式(Text)和 展示模式(Display)。 文本模式适用于小于20点(points)的尺寸,展示模式适用于大于20点(points)的尺寸。当你在你的app中使用San Francisco时,iOS会自动在适当的时机在文本模式和展示模式中切换。

注:如果你使用应用程序如Sketch或Photoshop来生成你的设计,那么当你设置的字体不小于20点的时候,你需要切换到展示模式。iOS会根据字体大小为San Francisco自动调整字间距。(字间距是以用作于修改文字间距)。表格10-1 和 10-2分别是文本模式(Text)和展示模式(Display) 在不同字号下的间距值。

1463474679-2607-10

1463474812-7634-10

为了突出某些文字或者为了在内容块之间建立视觉关联,你可以依赖由Dynamic Type支持的语义化样式,如标题、正文,你也可以指定字体权重,如细体或者半粗。使用 Dynamic Type样式使得你的内容能更好地表达含义,但如果你想要对你的设计有更好的把控能力,你可以对特定的文字设置特定的权重。(想要了解更多关于调整字体权重, 可以参阅UIFont Class Reference.)

例如,你可能想要增加某些文字的权重,来帮助用户可视化你的内容的层次结构,或者把用户的注意力吸引到特定的词或短语。另外,你可以通过增加较小文字的权重和减小较大文字的权重,在多个不同字号的、相邻的标签中建立视觉凝聚。字体权重在内容的整体风格和表达中有重要影响,因此你可以选择特定的权重来达到设计目的。

文本尺寸的响应式变化需要优先考虑内容。并不是所有的内容对于用户都是同等重要的。当用户选择更大的文本尺寸时,他们是想要使他们关注的内容更容易阅读;他们并不总是想要屏幕上的每个单词都更大。

例如,当用户选择具备更大易用性的文本尺寸时,邮件将会以更大的尺寸显示邮件的主题和内容,而对于那些没那么重要的信息——如时间和收件人——则采用较小的尺寸。

1463474682-5156-10

确保一个自定义字体在不同尺寸下的所有类型都具备可读性。实现这一效果的方法之一是效仿在不同的文本尺寸下iOS系统呈现字体样式的一些方法。例如:

  • 文本永远都不应该小于11点(points),即使是用户选择极小的文本尺寸。相较而言,内容样式使用17点的字号作为大尺寸,这也是默认的文本字号。
  • 通常来说,字号与行距值在每一档的文本尺寸设置中差别为1点。唯一例外的是两种标题的样式,它们在极小、小和中尺寸的设置中均使用相同的字号、行距和字距。
  • 在最小的三种文本尺寸中,字间距相对较大;而在最大的三中文本尺寸中,字间距相对紧凑。
  • 标题和内容的样式使用相同的字体尺寸,同时,为了区分标题与内容样式,标题样式使用更重的值。
  • 导航控制栏的文本使用相同的字号,而内容文本的样式则使用大尺寸的设置(值为17点)。
  • 文本总是使用常规或者中重,一般不适用轻或者加粗。

通常情况下,应用中整体应该使用单一字体。多种字体的混杂会使你的应用看上去支离破碎和草率。相反,使用一种字体和少数样式。根据语义用途,使用UIFont类的API来定义不同文本区域的样式,比如正文或者标题。

1463474683-2055-10

 

1.11 图标和图形(Icons and Graphics)

1.11.1 应用图标(The App Icon)

每个应用都需要一个漂亮的图标。用户常常会在看到应用图标的时候便建立起对应用的第一印象,并以此评判应用的品质、作用以及可靠性。

以下几点是你在设计应用图标时应当记住的。当你确定要开始设计时,请参考App Icon来获取更详细的设计规格与指导。(译者注:App Icon处在iOS Human Interface Guidelines的Icon and Image Design部分,翻译将在后续更新中放出,烦请各位耐心等候。)

  • 应用图标是整个应用品牌的重要组成部分。将图标设计当成一个讲述应用背后的故事,以及与用户建立情感连接的机会。
  • 最好的应用图标是独特的,整洁的,打动人心的,让人印象深刻的。
  • 一个好的应用图标应该在不同的背景以及不同的规格下都同样美观。为了丰富大尺寸图标的质感而添加的细节有可能让图标在小尺寸时变得不清晰。

1.11.2 小图标(Small Icons)

iOS提供了一系列小的icon,用以代表各种常见任务与操作,它们常用在标签栏(Tab Bar)、工具栏(Toolbars)与导航栏(Navigation Bar)中。用户通常都已经了解这些内置图标的含义了,因此可以尽可能的多使用它们。

1463474683-5707-10

如果需要自定义动作或者内容,你也可以设计自定义图标。设计这些小的线性图标与设计应用图标有很大的区别,请参考Bar Button Icons来了解更多内容。(译者注:Bar Button Icons章节处在iOS Human Interface Guidelines的Icon and Image Design部分,翻译将在后续更新中放出,烦请各位耐心等候。)

请注意,你有时候也可以用文字来代替工具栏和导航栏的图标。 就像iOS的日历里面,工具栏上便是使用”今天”,”日历”和”收件箱”来代替图标进行表意的。

1463474686-3255-10

想要决定在工具栏和导航栏中到底是用图标还是文字,可以优先考虑一屏中最多会同时出现多少个图标。同一屏幕中图标的数量过多可能会让整个应用看起来难以理解。使用图标还是文字还取决于屏幕方向是横向还是纵向,因为水平视图下通常会拥有更多的空间,可以承载更多的文字。

1.11.3 图形(Graphics)

iOS应用大多数图形丰富。无论是你需要展示用户的照片,还是需要创建自定义图片,以下这些需求都应该遵守:

  • 支持Retina显示屏。确保你应用中的所有图片资源都提供了高分辨率规格。尤其需要注意的是,iPhone 6 Plus需要提供@3x规格的图片,而所有其他的高分辨率iOS设备都需要提供@2x规格的图片。
  • 显示照片或图片时请使用原始尺寸,并不要将它拉伸到大于100%你不会希望在你的应用中看到拉伸和变形的图片。可以让用户自己来选择他们是否想要缩放图片。

不要使用从苹果系列产品中复制的图形。这些图形均受版权保护,而且产品的设计可能会频繁改变。

不要将苹果的应用图标,图像或者截图用于你的设计中。所有苹果的设计均受版权保护并且不允许出现在你的UI中,除非它们是由系统直接提供的。

 

1.12 术语和措辞(Terminology and Wording)

你在应用中呈现的每一个字都是与用户进行对话的一部分。把握这样的对话机会,为你的用户提供清晰的表意与愉悦的体验。

设置是面向全体用户的一个基础应用,因此它使用了简明扼要的语言来描述用户可以进行的操作。举个例子,设置→勿扰模式(Do Not Disturb)就没有使用难以理解的复杂技术术语,而是用了简单的语言,给用户描述了里头的一系列操作。

1463474814-2650-10

保证你使用的术语是用户能理解的。根据你对用户群的理解来决定在应用中使用什么样的词汇。举个例子,在一款针对小白用户的应用中使用技术术语是不合适的,但对于针对高端用户的应用来说,使用技术术语是很自然的事情。

使用非正式的友好语气,但不需要太过卑微。避免太正式太僵化,或者太过嘻嘻哈哈,傲慢无礼。请记住,用户可能会反复阅读这些文本,因此有些起初看上去很俏皮的语句,多看几次之后可能会显得烦人。

像新闻编辑一般遣词造句,避免不必要的冗余语句。当你的文案足够简明扼要,用户就可以很轻松地阅读和理解它。确定最重要的信息,精炼它并且突出它,让用户不需要读一大段文字才能了解他们在找什么,以及下一步要做什么。

给控件加上短标签或者容易理解的图标。让用户只扫一眼就能知道这个控件是干什么的。

描述时间时要注意准确性。今天和明天这些词汇确实显得比较友好,但有时候会让用户费解,因为你可能没有办法确定用户当前的时区和时间。举个例子,假如有一项活动会在半夜12点前开始,对于在同一个时区的用户而言,这个活动是在今天开始的,但对于那些在早一点的时区里的用户而言,这个活动在昨天就已经开始了。

为你的应用写一则漂亮的App Store描述,最大程度地把握住这个与潜在用户沟通的绝佳机会。除了准确描述你的应用、强调应用的品质与亮点以外,你还需要:

  • 修正所有的拼写、语法与标点符号错误。这些小错误也许不会影响用户正常使用,但是可能会让他们对应用的整体品质产生负面印象。
  • 尽量少用全大写的词汇。虽然大写单词有时候可以吸引注意力,但是全大写的段落不适合阅读,而且会产生一种朝用户扯着嗓子吼的感觉。
  • 可以描述bug修复情况。如果您的应用新版包含用户一直期待的bug修复,那在你的软件描述中提到这一点就是个很好的做法。

 

1.13 与iOS的整合(Integrating with iOS)

与iOS整合,指的是在当前平台上给用户提供一种舒适的、宾至如归般的体验,当然这并不意味着我们要把每一个应用做的和内置应用一模一样。

最好的与iOS整合的方式便是深刻地了解iOS的主题与核心——这一部分在上文为iOS而设计(Designing for iOS)部分中已有详细描述,并寻求出如何在你的应用中融合与表达这种主题。当你这么做的时候,遵循本章中的指引可以帮助你为你的用户提供他们想要的体验。

1.13.1 正确使用标准UI元素(Use Standard UI Elements Correctly)

尽可能使用UIkit提供的标准UI元素是一个好主意。多使用标准元素而非自定义元素,你与你的用户都将受益:

  • 标准UI元素会根据iOS官方的更新而自动更新——而自定义元素不会。
  • 标准UI元素对于你自定义外观和行为来说拥有优秀的扩展性。举个例子,iOS中所有的视图(Views,从UIView中继承的对象)都是可以使用TintColor属性来定义颜色的,它让应用配色变得很简单。
  • 用户更熟悉和习惯标准的元素,因为他们可以立刻明白你的应用中这些元素的用途。

想要充分地利用标准UI元素的优点,有一些关键点需要特别注意:

严格遵循每个UI元素的设计规范。当你应用中的UI元素的外观与功能都是用户所熟悉的,他们可以很容易地根据先前的经验来使用他们,进而更好地使用你的应用。你可以从这些章节中找到各种UI元素的设计规范:Bars, Content Views, Controls, Temporary Views.

(译者注:上文提到的章节均处在iOS Human Interface Guidelines的第4章,翻译将在后续更新中放出,烦请各位耐心等候。若有需要,亦可先参考先前已翻译的iOS7 UI Elements章节:。)

不要混用不同版本的iOS里的UI元素。你一定不希望让用户觉得你的UI元素来自于与当前用户的设备版本不同的iOS系统。

大体来说,请避免创造自定义UI元素来表现标准交互行为。先问问你自己为什么一定要创建一个与标准UI元素行为完全相同的自定义元素。如果你只是想改变标准UI元素的外观,可以考虑使用UIKit外观定制API(UIKit appearance customization APIs),或者给元素填充别的颜色。如果你需要定义一个与标准控件稍有不同的行为,请确保你在改变了这个UI元素的属性和行为之后,这个元素仍然能完成你所希望的操作。如果你需要完全自定义一个行为,最好是设计一个与标准元素完全不相像的自定义元素。

提示:Interface Builder让获取标准UI元素,使用外观定制API(the appearance customization APIs),获取属性,以及在你的应用里使用自定义和系统自带图标变得很简单。想要了解更多Interface Builder的内容,请参阅Xcode Overview.

不要用系统自带的按钮和图标表达其他含义。iOS提供了多种可用的按钮和图标。请确认你了解它们的准确表意;不要单纯凭借你看到这些图标样式的猜测和理解来解读和使用它们。(你可以在Toolbar and Navigation Bar ButtonsTab Bar Icons中了解到这些按钮和图标的准确含义。)

如果你所需要的功能无法用系统提供的按钮和图标来表现,你也可以设计自定义按钮。自定义按钮的设计可以参考 Bar Button Icons.

(译者注:上文提到的章节均处在iOS Human Interface Guidelines的第4章,翻译将在后续更新中放出,烦请各位耐心等候。若有需要,亦可先参考先前已翻译的iOS7 UI Elements章节:。)

如果你的app是沉浸式体验,那么创造全新的自定义UI是合理的。因为你在创造一个统一的体验环境,让用户在其中能够有所期待并探索如何控制应用。

1.13.2 弱化文件和文档处理(Downplay File and Document Handing)

iOS应用可以帮助用户创建和处理文件,但这并不意味着用户需要过分考虑iOS设备的文件系统如何运作。

如果你的应用中支持用户创建和编辑文档,那么提供一个清晰的图形库视图(document library view)让用户能够方便地打开或者新建文档是一个好的做法。理想状况下,这样的图形库视图拥有以下特征:

  • 高度图形化。用户通过屏幕上的缩略图就可以一目了然,快速找出自己想要的文件。
  • 让用户用最少的动作完成自己的任务。比如说,用户可以快速地水平滚动文件列表,然后轻点一下自己想要的文件来打开它。
  • 包含新建文档功能。一个图形库视图应该支持让用户点击一个新建文档的占位图便完成新建文档操作,而不是让用户通过访问别的地方来新建文档。

举个例子,Pages的图形库视图里面,既展示了用户已存在的文档,也加入了便捷的新建文档操作。

1463474690-8352-10

提示:你可以使用Quick Look Preview功能来让用户预览你的应用中的文件,哪怕你的应用不能打开这些文件。想要了解如何在你的应用中提供这个功能,请参阅Quick Look.

如果你的应用允许用户使用在其他应用中创建的文档,你可以通过模态文档选择视图控制器(modal document picker view controller)来帮助用户触达它们。这个控制器可以提取用户在iCloud中的文档,还可以通过文档提供者扩展(Document Provider extensions)来提取在其它应用中创建和储存的文件。想要了解更多文档提供者扩展的内容,可以参考Document Provider Extensions; 想要了解更多文档提取视图控制器,请参考Document Picker Programming Guide.

给用户足够的信心,让他们相信除非主动取消或者删除,他们的成果会被随时妥善保存如果你的应用帮助用户创建于管理文档,不能要求用户每次都能及时保存。无论是打开另一个文档或切换应用的时候,iOS应用都应当承担起帮助用户保存输入内容的责任。

如果你的应用的主要功能不是创造内容,但又允许用户查看或编辑信息,这种情况下你需要询问用户是否要保存修改。在这种场景下,比较好的做法是提供“编辑”按钮,点击后进入编辑状态,同时编辑按钮变成“保存”和“取消”按钮,这种变化可以提示用户当前处于编辑模式。“保存”可以保留修改内容,“取消”则退出编辑模式。

1.13.3 必要时提供可配置选项(Be Configurable If Necessary)

某些应用需要用户手动安装或设置选项,但是大部分应用不需要如此。一个好的应用可以让大部分用户快速上手,并通过主界面给用户提供便捷的调整体验的方式。

当你的应用在默认状态下就能满足大部分用户的期望,用户对设置的需求就减少了。如果你需要储存用户的基本资料,可以优先向系统请求和拉取相关信息,而不是上来就让用户自己填写它。如果你一定要提供用户鲜少用到的设置项,请参考App Programming Guide for iOS中的The Setting Bundle部分来了解如何在代码中定义它们。

尽可能在主UI中提供设置选项。如果这个设置项代表着用户一个基本任务,又或者用户在进行主线任务时有可能频繁改变设置,那么将设置项放在主UI中会很方便。如果用户只是偶尔才会用到设置项,那么可以将其放在独立的视图中。

如果应用内相关设置需要在系统设置中改变,帮助用户直接访问系统设置。尤其是,如果你要用一段文字来描述如何改变这个设置,比如“设置>隐私>定位服务”,倒不如直接放置一个按钮,点击后即可到达设置中的定位服务。想要了解如何实现,请参考 Settings Launch URL.

1.13.4 充分利用iOS技术(Take Advantage of iOS Technologies)

iOS提供了丰富的技术方式来支持用户完成他们所期望的各种任务和场景。这意味着在绝大多数情况下,将系统提供的技术整合到你的应用中,往往比自定义一种新的技术更为可靠。

某些iOS技术,比如多任务并行(Multitasking)与语音向导(VoiceOver)等等,是所有应用都应该包含的系统级特性。而另外一些技术是否整合到应用中,则取决于应用本身的功能性。比如处理门票和礼品卡的应用(Wallet)支持用户在应用内内购(In-App Purchase),展示应用内置广告(iAd Rich Media Ads)则可以整合 Game Center,同时支持iCloud.

 

本章英文原文访问地址:iOS Human Interface Guidelines
本章中文翻译PDF下载:点此下载

[button title=”第一章” url=”” color=”default” size=””/]

[button title=”第二章” url=”” color=”default” size=””/]

[button title=”第三章” url=”” color=”default” size=””/]

[button title=”第四章” url=”” color=”default” size=””/]

[button title=”第五章” url=”” color=”default” size=””/]

ios8设计规范 中文版 完整版

阿西UED阅读(1741)

1463035203-5698-20140922202951181-630x360

文章索引

  • 1.1 为iOS而设计(Designing for iOS)
  • 1.1.1 以内容为核心(Defer to Content)
  • 1.1.2 保证清晰度(Provide Clarity)
  • 1.1.3 用深度来体现层次(Use Depth to Communicate)
  • 1.2 iOS应用解析(iOS App Anatomy)
  • 1.3 适应性和布局(Adaptivity and Layout)
  • 1.3.1 为自适应而开发(Build In Adaptivity)
  • 1.3.2 在不同环境提供良好体验(Provide a Great Experience in Each Environment)
  • 1.3.3 使用布局来沟通(Use Layout to Communicate)
  • 1.4 起始与停止(Starting and Stopping)
  • 1.4.1 即时启动(Start Instantly)
  • 1.4.2 时刻准备好停止(Always Be Prepared to Stop)
  • 1.5 导航(Navigation)
  • 1.6 模态情境(Modal Contexts)
  • 1.7 交互性和反馈(Interactivity and Feedback)
  • 1.7.1 用户知道标准手势(Users Know the Standard Gestures)
  • 1.7.2 可交互元素吸引用户点击(Interactive Elements Invite Touch)
  • 1.7.3 反馈有助于理解(Feedback Aids Understanding)
  • 1.7.4 输入信息的方式要简单(Inputting Information Should Be Easy)
  • 1.8 动画(Animation)
  • 1.9 品牌推广(Branding)
  • 1.10 颜色与字体(Color and Typography)
  • 1.10.1 色彩有助于增进沟通(Color Enhances Communication)
  • 1.10.2 文字应该清晰易读(Text Should Always Be Legible)
  • 1.11 图标和图形(Icons and Graphics)
  • 1.11.1 应用图标(The App Icon)
  • 1.11.2 栏图标(Bar Icons)
  • 1.11.3 图形(Graphics)
  • 1.12 术语和措辞(Terminology and Wording)
  • 1.13 与iOS的整合(Integrating with iOS)
  • 1.13.1 正确使用标准UI元素(Use Standard UI Elements Correctly)
  • 1.13.2 弱化文件和文档处理(Downplay File and Document Handing)
  • 1.13.3 必要时提供可配置选项(Be Configurable If Necessary)
  • 1.13.4 充分利用iOS技术(Take Advantage of iOS Technologies)

1.UI设计基础

1.1 为iOS而设计(Designing for iOS)

iOS 的革新关键词如下:

  • 遵从:UI能够更好地帮助用户理解内容并与之互动,但却不会分散用户对内容本身的注意力。
  • 清晰:各种大小的文字应该易读,图标应该醒目,去除多余的修饰,突出重点,很好地突显了设计理念。
  • 深度:视觉的层次和生动的交互动作会赋予UI新的活力,不但帮助用户更好理解新UI的操作并让用户在使用过程中感到惊喜。

1463035205-8322-09

无论你是重新设计一个现有的应用或是重新开发一个,请尝试下列方法:

  • 首先,去除了UI元素让应用的核心功能呈现得更加直接并强调其相关性。
  • 其次,直接使用iOS的系统主题让其成为应用的UI,这样能给用户统一的视觉感受。
  • 最后,保证你设计的UI可以适应各种设备和不同操作模式,这样用户可以在不同场景下舒适地享用你的应用。

在整个设计过程中,时刻准备着推翻先例,假设问题,并以重点内容和功能(为目标)来驱动每个细节设计。

1.1.1 以内容为核心(Defer to Content)

虽然明快美观的UI和流畅的动态效果是iOS体验的亮点,但内容始终是iOS的核心。

这里有一些方法,以确保你的设计能够提升你的应用功能体验并关注内容本身。

充分利用整个屏幕。天气应用是最好的例子:漂亮的天气图片充满全屏,呈现用户所在地当前天气情况这最重要的信息,同时也留出空间呈现了每个时段的气温数据。

1463062062-9225-09

尽量减少视觉修饰和拟物化设计的使用。UI面板、渐变和阴影有时会让UI元素显得很厚重,致使抢了内容的风头。应该以内容为核心,让UI成为内容的支撑。

1463035288-7336-09

尝试使用半透明底板。半透明的控件——比如控制中心——关联了使用场景,帮助用户看到更多可用的内容,并可以起到短暂的提示作用。在iOS中,透明的控件只让它遮挡住的地方变得模糊——看上去像蒙着一层米纸一样——它并没有遮挡屏幕剩余的部分。

1463035294-9165-09

1.1.2 保证清晰度(Provide Clarity)

保证清晰度是另一个方法,以确保你的应用中内容始终是核心。以下是几种方法,让最重要的内容和功能清晰,易于交互。

使用大量留白。留白让重要内容和功能显得更加醒目。此外,留白可以传达一种平静和安宁的视觉感受,它可以使一个应用看起来更加聚焦和高效。

1463035206-4840-09

让颜色简化UI一个主题色——比如在记事本中使用的黄色——让重要区域更加醒目并巧妙地表示交互性。这同时也给了一个应用一个统一的视觉主题。内置应用使用家族化的系统颜色,无论在深色和浅色背景上看起来都干净,纯粹。

1463035207-2489-09

通过使用系统字体确保易读性。iOS的系统字体自动调整行间距和行的高度,使阅读时文本清晰易读,无论何种大小的字号都表现良好。无论你是使用系统或是自定义字体,务必使用动态型,这样你的应用可以在用户选择不同字号时做出应对。

1463035222-9308-09

使用无边框的按钮。默认情况下,所有bar上的按钮都是无边框的。在内容区域,无边框按钮以文案、颜色以及操作指引标题来表明按钮功能。当按钮被激活时,该按钮呈现高亮的浅色状态来作为操作响应。

1463035221-3263-09

1.1.3 用深度来体现层次(Use Depth to Communicate)

iOS经常在不同的层级上展现内容,用以表达分组和位置,并帮助用户了解在屏幕上的对象之间的关系。

通过使用一个在主屏幕上方的半透明背景浮层来区分文件夹和其余部分的内容。

1463035218-1196-09

备忘录以不同的层级展示,如插图所示。用户在使用备忘录里的某个条目时,其他的条目被收起在屏幕下方(译者按:其实这个视觉提示使用起来很隐晦)。

1463035224-5360-09

日历有较深的层级,当他们在翻阅年、月、日的时候,以及增强的交互动画给用户一种层级纵深感(循序切换的层次,从年到月到日)。在滚动年份视图时,用户可以即时看到今天的日期以及其他日历任务。当用户处于月份视图时,点击年份视图按钮,月份会缩小至年份视图中的所处位置。

1463035294-6719-09

今天的日期依然处于高亮状态,年份出现在返回按钮处,这样用户可以清楚地知道他们在哪儿,他们从哪里进来并且知道如何返回。

1463035295-9639-09

类似的过渡动画出现在用户选择一个日期时:月份视图从所选位置分开,将当前的周日期推向屏幕顶端并翻转出以小时为单位的当天时间视图。这些动画加强了日历上年月日之间的关系的感知度。

1463035221-8026-09

1.2 iOS应用解析(iOS App Anatomy)

几乎所有的iOS 应用都应用了UIKit framework中定义的组件。了解这些组件的名字,作用和构成能够帮助你设计应用过程中做出更好的决定。

1463035230-1922-09

UIKit提供的UI组件大致分成以下4种大类:

Bars包含了导航信息,告诉用户他们所在的位置并包含了一些能帮助用户浏览或启动某些操作的控制按钮。

内容视图:包含了应用的主体内容以及某些操作行为,比如滚动、插入、删除、排序等等。

控制按钮:展示信息或者控制动作。

临时视图:短时间出现,给用户重要信息或者额外的选择或者其他功能。

除了定义UI组件,UIKit也定义对象实现的功能,例如手势识别、绘图、辅助功能和打印支持。

从编程的角度来说,UI组件被认为是不同类别的视图,因为他们从UIView得到继承。视图能绘制屏幕内容并且知道用户何时触摸了屏幕。视图的所有类型有:控件(比如按钮和滑块),内容视图(比如集合视图和表格视图),以及临时视图(如警告提示和动作菜单)。

要在应用中管理一组或者一系列的视图,通常需要使用一个视图控制器,它能协调视图的显示内容,实现与用户交互的功能并能在不同屏幕内容之间切换。比如,“设置”使用了一个导航控制器来展示其视图层级。

下面是一个例子,关于视图与视图控制器如何结合并呈现iOS 应用的UI。

1463035232-4784-09

虽然开发者认为真正起到作用的是视图和视图控制器,但一般用户感知到的iOS应用是不同屏幕内容的集合。从这个角度来看,在应用里,屏幕内容一般对应于一个独特的视觉状态或者模式。

注:一个iOS应用程序包含一个窗口。但是,不同于计算机程序中的窗口,iOS窗口没有可见的部分并且不能在屏幕上被移动到另一个位置。很多iOS应用程序只有一个窗口;可以支持外部显示设备器的应用程序可以有不止一个窗口。

iOS Human Interface Guidelines中,screen这个词和大部分用户理解的一样。作为一个开发者,你也许需要读一下其他与UIscreen相关的章节,这样你可以更好的了解如何关联外部屏幕。

1.3 适应性和布局(Adaptivity and Layout)

1.3.1 为自适应而开发(Build In Adaptivity)

人们通常想随心所欲地使用自己喜欢的应用程序。在iOS 8及未来的版本中,你可以使用不同分辨率和自动布局来帮助你定义屏幕布局视图,视图控制器以及需要随显示环境改变的视图(显示环境display environment的概念指的是设备的整个屏幕或者其中一部分,比如一个跳出菜单区域或一个分视图控制器的主视图部分)。

iOS定义了两个尺寸类别(size class),常规的(regular)和压缩的(compact)。常规尺寸有着较易拓展的空间,而压缩尺寸约束了空间的使用。想要定义一种显示环境,你需要定义横纵尺寸类型。如你所想,iOS设备可以有横屏竖屏两种不同的使用模式。

iOS能随着显示环境和尺寸类别变化而自动生成不同布局。举个例子,当垂直尺寸从压缩变为常规时,导航栏和工具栏会自动变高。

当你靠尺寸类别来驱动布局变化时,你的应用在任何显示环境时都能显示得很好。关于如何在Interface Builder中更好的使用尺寸类别,你可以查阅Size Classes Design Help

注:在一种尺寸类别中,持续使用Auto Layout进行小的布局调整,比如拉伸或压缩内容。

下面的实例可以帮助你理解尺寸类型是如何适配不同设备的显示环境。例如:iPad在长宽和横屏竖屏时都使用常规尺寸类型。换句话说,iPad显示环境一直处于垂直和水平的常规状态。

1463035232-7832-09

iPhone的显示环境可根据不同的设备和不同的握持方向而改变。

竖屏时,iPhone6 Plus使用的是常规高度和压缩宽度类型。

1463035232-7798-09

横屏时,iPhone6 Plus使用的是压缩高度和常规宽度类型。

1463035233-2046-09

其他iPhone型号,包括iPhone6使用相同的尺寸类型设置。

竖屏时,iPhone 6,iPhone 5 和iPhone 4S使用的是压缩宽度和常规高度。

1463035237-5781-09

横屏时,这些设备在宽高上使用的都是压缩类。

1463035238-9945-09

1.3.2 在不同环境提供良好体验(Provide a Great Experience in Each Environment)

当你使用自适应来开发UI时,你可以保证UI跟随显示环境变化而适当地响应。遵照这些指南,你可以给用户良好的设备响应体验。

在所有环境下都保持对主体内容的专注。这是最高优先级。人们使用应用时,与感兴趣的内容发生互动。当使用环境变化的同时,改变专注点会让用户感觉到迷失方向,丧失了对应用的控制。

避免布局上不必要的变化。在所有环境中类似的使用体验让人们在旋转设备或在不同设备上运行你的应用时维持使用模式。例如,如果你使用一个网格在水平的常规模式下显示图像,你无需在一个列表中展示与压缩模式下相同信息,虽然你可能调整了网格的尺寸。

如果你的应用只在一个方向上运行,那么请直接一点。人们希望在各种握持方式下都可以使用你的应用,能满足这个期待是最好的。但是,如果你的应用只在一个方向下运行,那么以下几点请务必注意:

  • 避免提示人们旋转设备的提示UI出现。让应用清晰地运行在支持的方向下,让用户明白应该旋转设备,而不是添加不必要的引导性混乱。
  • 支持同一个方向上的变化。例如,如果一个应用只能垂直运行,用户无论用左手或是右手握持时都能触及到home键。如果用户在使用应用时180度旋转设备,那最好应用内容也能及时响应并旋转180度。

如果你的应用将设备方向翻转视为用户输入(的一种指令),那么就按照程序设定的方式来响应设备翻转。举个例子,一个游戏让用户利用设备翻转来移动游戏中的部件,那么这个游戏应用本身(的UI)不能对翻转屏幕产生响应。在这种情况下,你必须关联两个需要变化的方向,并且允许人们在这两个方向切换直到他们开始(了解并执行)应用的主体任务。一旦人们开始执行主要任务,那就开始按程序设定的那样来响应设备的动作吧。

1.3.3 使用布局来沟通(Use Layout to Communicate)

布局包含的不仅仅是一个应用屏幕上的UI元素外观。你的布局,应该告诉用户什么是最重要的,他们的选择是什么,以及事物是如何关联起来的。

提升重要内容或功能,让用户容易集中注意在主要任务上。有几个比较好的办法是在屏幕上半部分放置主要内容,以从左到右的习惯,从靠近左侧的屏幕开始。

1463035241-6179-09

使用视觉化的重量和平衡向用户展示相关的屏显重要元素。大型控件吸引眼球,而比小的控件更容易在出现时被注意到。而且大型控件也更容易被用户点击,这让它们在应用中更加有用——就像电话和时钟(上面的按钮)——用户经常在容易分心的环境中能(正常)使用它们。

1463035241-9228-09

使用对齐来让阅读更舒缓,让分组和层次之间更有秩序。对齐让应用看起来整洁而有序,也让用户在专注于屏幕时更有空间,从而专注于重要信息。不同信息组的缩进与对齐让它们之间的关联更清晰,也让用户更容易找到某个控件。

确保用户能明白处于默认尺寸的首要内容的含义。例如,用户无需水平滚动就能看到重要的文本,或不用放大就可以看到主体图像。

准备好改变字体大小。用户期望大多数应用能有设置字号大小的功能。为了适应一些文本大小的变化,你也许需要调整布局;想要得到更多文本显示相关的信息,你可以查阅章节Text Should Always Be Legible.

尽量避免UI上不一致的表现。在一般情况下,有着相似功能的控件看起来也应该类似。用户常常认为他们看到的不同总有原因,而且他们倾向于花时间去尝试(译者按:因此为了避免用户做无用的尝试所以建议类似功能外观一样)。

给每个互动的元素充足的空间,从而让用户容易操作这些内容和控件。常用的点按类控件的大小是44 x 44点(points)。

1463035242-7884-09

1.4 起始与停止(Starting and Stopping)

1.4.1 即时启动(Start Instantly)

有种说法是用户往往不会花超过一两分钟去审视一个新应用,当你将应用从打开到启动这段时间压缩得很短,并且同时在载入过程中呈现一些对用户有帮助的内容,你就会激发用户的兴趣并给所有用户一个惊喜。

重要:不要在安装过程结束后告诉用户需要重启设备。重启需要时间并且会让人觉得你的应用看上去不可靠而且很难使用。

如果你的应用有内存使用问题,或者不重启就无法流畅运行,你必须声明这些问题。关于如何开发一款性能良好的应用,请查阅iOS应用编程指南

尽可能避免使用闪屏或者其他启动体验。用户能够在启动后立即开始使用应用是最好不过的。

1463035243-5037-09

避免让用户做过多设置。而应该如此:

  • 聚焦在满足80%的用户需求上。这样主体用户群就无需设置各种选项,因为你的应用已经默认处于他们想要的状态。如果有些功能有少部分用户想要,换句话说,大部分人不需要的话,就别管它了。
  • 尽可能用其他方式获取更多(用户)信息。如果你能得到用户在内置应用或硬件设置中提供的信息,直接从系统中获取它们,而不需要再次让用户输入。
  • 如果你必须获取设置信息,在你的应用中直接向用户询问,然后尽快保存这些设定(译者注:这段讲的是权限许可,如能否访问照片或者日历或地理位置信息等等)。这样用户就无需强制跳出应用进入系统设置页面了。如果用户需要更改设置,他们可以在任何时候进入应用的设置选项进行修改。

尽可能让用户晚一些再登录。最理想的状态是,用户在无需登录的情况下就能尽量多地浏览内容并使用部分功能。例如,App Store应用会在用户浏览商品并确定进行购买时,才要求用户进行登录。对于必须登录才能进行后续浏览和操作的应用,用户往往会直接放弃。

如果你的应用必须先登录后使用,那么你应该在登录页面有一些简短的文字,来描述为什么必须先登录,以及这样做会给用户带来什么好处。

谨慎使用新手引导(介绍应用的功能和如何进行操作)。在考虑新手引导之前,你应该完善你的应用,尽可能使应用的功能直观和易于寻找。有句话说得好,好的应用不需要新手引导。如果你确实觉得需要新手引导,那么请参考如下的建议,设计一个简洁、有针对性并且不妨碍用户的新手引导。

  • 只提供开始使用应用所必需的信息。好的新手引导应该告诉用户接下来第一步应该做什么,或者简短地演示大部分用户感兴趣的一些功能。在能够浏览你的应用之前,如果用户遇到太多的信息,让用户记住这些不是当前所必须的内容,他们很可能会觉得你的应用很难用。如果在某些特定场景下确实需要一些引导,那么也应该在用户进入这个场景之后再进行。
  • 使用交互动画来吸引用户,并让用户通过实际上手来学习如何使用。对于文字内容的增加应该谨慎,且仅当增加文字对于提升体验有益时才这么做。不要指望用户会阅读大段的文字。例如,可以使用动画而不是文字来描述如何执行一个简单的任务。在引导用户了解较为复杂的任务时,可以通过一些引导浮层来简要说明每一个步骤用户需要做什么。尽可能避免展示应用截图,因为截图是死的,用户可能会混淆截图和应用的实际界面。
  • 能够简单地取消或者跳过新手引导。有些用户看完新手引导之后就不想再看,有些甚至根本就不想看新手引导。请记住用户的选择,不要强迫用户每次打开你的应用都要再做一次选择。

不要太早要求用户去给你的应用评分。过早要求用户进行评分可能会适得其反。如果你想获得用户有价值的反馈和评论,在邀请用户评论之前,请给他们一点时间来使用你的应用,并对你的应用形成印象。例如,你可以等用户访问了一定数量的页面或完成了一定数量的任务之后,再邀请他们进行评价。

一般建议按照屏幕默认的定向方式启动你的应用。尽管如此,如果你的应用只有一种屏幕方向,那么就始终以这个方向启动,让用户在他们自己需要时再改变设备方向。例如,一个游戏或者媒体观看应用只在横屏模式下运行,那么就应该以横屏模式启动,即使设备当前处于竖屏模式。这样的话,如果用户在竖屏模式下打开应用,他们也知道应该把设备转成横屏来进行使用。

1463035244-5401-09

注:最好让横屏应用支持两种模式的横屏,即home键处于左右两侧的状态。如果设备当前已经处于横向状态,那么就按照当前状态启动应用,除非你有充分的理由不这么做。其他情况时,可以考虑按home键处于右侧的方式启动应用。(想要了解更多关于支持不同设备方向的内容,请参阅Respond to Changes in Device Orientation.)

准备一张与应用首页看上去一样的闪屏。iOS会在启动应用时调用这张图,这样可以让用户觉得启动速度很快,降低对等待时间的感知度。具体如何制作闪屏,请查阅Launch Images。(译者注:Launch Images章节处在iOS Human Interface Guidelines的Icon and Image Design部分,翻译将在后续更新中放出,烦请各位耐心等候。)

如果可能,不要让用户在初次启动应用时阅读免责声明或者确认用户协议。你可以直接在App Store展示这些内容,使用户在下载前就有所了解;虽然这个办法能最大地减少麻烦,但也不是一直可行。如果在某些情况下你必须展示这些内容,要确保它们与UI保持统一并在产品功能与用户体验之间达成平衡。

在应用重启后,需要恢复到用户退出使用时的状态,让他们可以从中断之处继续使用。无需让用户记住是如何达到此种退出状态的。

1.4.2 时刻准备好停止(Always Be Prepared to Stop)

iOS 应用无需关闭或退出选项。当用户切换应用,回到主屏幕或者将设备调至睡眠模式的时候,其实就是停止了当前应用的使用。

当用户切换应用时,iOS的多任务系统会将其放置到后台并将新应用的UI替换上来。在这种情况下,你必须做到以下几点:

  • 随时并尽快保存用户信息,因为在后台的应用随时有可能被终止或退出。
  • 当应用停止的时候保存当前状态,使用户可以在回到应用时能从中断之处继续使用。例如,在使用可滚动的数据列表时,退出后保存列表所在的位置。

有些应用可能需要一直在后台运行。例如,用户可能希望能在使用一个应用的同时还能一直听歌,接着又想用另外一个应用来检查代办项或者玩游戏。关于如何正确处理多任务,请查阅Multitasking。(译者注:Multitasking章节处在iOS Human Interface Guidelines的iOS Technologies部分,翻译将在后续更新中放出,烦请各位耐心等候。)

不要强制让应用退出。因为这样会让用户误以为是crash。如果有问题产生,需要告诉用户具体状况以及如何解决。以下有两个建议,取决于出现的问题有多严重而酌情使用:

如果应用中所有的功能当前都不可用,那么应该显示一些内容来解释当前的情形,并建议用户如何进行后续操作。这部分内容给予了用户以反馈,使用户相信你的应用现在没问题。同时这也可以稳定用户情绪,让他们决定是否要采取纠正措施,继续使用应用,还是切换到另一个应用。

1463035246-6307-09

如果只有部分功能不可用,那么只要当用户使用这些功能时显示提示即可。不然的话,用户就应该能正常使用应用的其他功能。如果你决定使用警告框来进行提示,请确保只在用户尝试使用不可用的功能时再显示。

1463035248-4012-09

1.5 导航(Navigation)

除非导航设计的不合理,不然用户不应明显察觉到应用中的导航体验。放置导航到一个能够支撑你的应用结构和目的却又不过分引起用户注意的状态。

广义来说,有三种主要类型的导航,每种导航都有其适应的应用结构:

  • 分层。
  • 扁平。
  • 内容或经验驱动。

在分层应用中,用户在每个层级中都要选择其中一项,直到目的层级。如果要切换到另一个层级,用户必须回退一些层级,或者直接回到初始层级进行再次选择。系统的设置和邮件应用在这方面是很好的示范,可以参考他们。

在扁平应用中,用户可以从一个主要分类直接切换到另一个,因为所有的主要分类都可以从主屏直接访问。音乐和App Store是两个使用扁平结构的好例子。

在内容驱动或经验驱动信息结构的应用中,导航的内容也会根据内容或经验来进行设计。例如,在阅读一本电子书时,用户会一页接一页地进行阅读,也会在目录中选择想要阅读的页码跳转后开始阅读。同样的,在游戏应用中,导航的作用也非常重要。

在某些情况下,在一个应用中结合多种导航类型会有很好的效果。例如,对于扁平信息结构中某一分类下的内容,用分层导航的方式来显示可能会更好。

用户应该时刻清楚自己当前在应用中所处的位置,以及如何前往他们所想到的页面。

无论导航类型是否适合你的应用结构,最重要的是用户访问内容的路径应该是合理、可预期和易于寻找的。

UIKit定义了一些标准的UI元素,这些元素即可以构建分层或扁平的导航,也可以实现以内容为中心的导航,例如电子书或者媒体观看类应用。游戏或者其他经验驱动的应用通常需要一些自定义的元素和行为。

使用导航栏(Navigation Bar)帮助用户轻松访问分层内容。导航栏的标题可以显示用户当前所处的层级,而后退按钮可以回到上一层级。查看Navigation Bar了解更多。

使用标签栏(Tab Bar)显示同类型的内容或功能。标签栏很适合于扁平信息结构,可以让用户在分类之间随意切换,而不用在意当前所处的位置。查看Tab Bar了解更多。

在应用中,如果每屏显示的都是同类项或同类页,可以使用页面控件(Page Control)。页面控件的优点是可以直观地告诉用户共有多少个项目或页面,以及当前所处的位置。查看Page Control了解更多。

一般来说,最好能给用户到达每一屏的路径。如果用户需要,就应该考虑使用临时视图,例如模态视图、动作菜单或警告框。查看Modal ViewAction SheetAlert了解更多。

(译者注:上文提到的章节均处在iOS Human Interface Guidelines的第4章,翻译将在后续更新中放出,烦请各位耐心等候。若有需要,亦可先参考先前已翻译的iOS7 UI Elements章节:。)

UIKit同时还提供了以下相关控件:

  • 分段控件(Segmented Control)。分段控件让用户在一屏内就可以查看到不同分类的内容,而不需要切换到其他屏幕。
  • 工具栏(Toolbar)。尽管工具栏看起来和导航栏或标签栏相似,但是工具栏不具导航作用。相反,工具栏为用户提供了可以控制当前屏幕内容的控件。

1.6 模态情境(Modal Contexts)

模态是一个承载某些连贯操作或内容的优缺点并存的模式。它可以给用户提供一种不脱离主任务的方式去完成一个任务或者获得信息,但是也会临时性地阻止用户对应用的其他部分进行交互操作。

1463035251-5645-09

理想情况下,用户可以与iOS 应用进行一种非线性的交互,所以,尽可能减少应用中的模态体验是最好的。通常情况,在以下情形下可以考虑使用模态情境:

  • Ÿ必须引起用户关注的时候。
  • Ÿ 一个独立的任务需要完成或者很明确需要被放弃,为了避免在模棱两可的状态下遗漏用户信息的时候。

保持模态任务的简单,简短和高度聚焦。你肯定不希望用户使用模态视图时像使用应用中的一个mini应用一样。如果子任务过于复杂,用户会在进入模态情境时忽略主要任务。在设计一个涉及视觉层次的模态任务时特别要考虑这一点,因为用户有可能迷失并且忘记如何回到之前的操作中去。如果一个模态任务必须包含不同视图的子任务,确保给用户一个独立、清晰的导航路径,并避免迂回。

始终提供明显、安全的途径退出模态任务。确保用户在退出模态视图时可以预期操作的结果。

一个任务需要多层级的模态视图时,确保用户理解点击完成按钮的结果。点击一个低层级视图上的完成按钮是完成这个视图中任务的一部分,还是整个任务?因为存在这种困惑的可能性,所以要尽可能避免在下级视图中添加完成按钮。

保证提醒对话框的内容都是重要且可操作的。提醒对话框会打断用户的体验并且要点击才会消失,所以要让用户感到提醒信息是有用的,打断是有价值的。

尊重用户关于接收通知的选择。用户会设置接收应用通知的形式,必须尊重要用户的喜好设置,否则可能触怒用户,导致其关闭所有的推送通知。

1.7 交互性和反馈(Interactivity and Feedback)

1.7.1 用户知道标准手势(Users Know the Standard Gestures)

用户使用点击、拖拽、捏合等手势与iOS设备进行交互。使用手势拉近了用户和设备之间的距离,并且增强了直接操纵感。用户通常期待手势在不同应用之间都是通用的。

1463035258-8361-09

除了用户熟悉的标准手势,iOS还定义了一些系统范围内的操作,例如呼出控制中心或消息中心。在任意应用下都可以使用这些操作。

不要给标准手势赋予不同的行为。除非你的应用是游戏,否则重新定义标准手势会使用户迷惑,且增加使用难度。

不要创建和标准手势功能相似的手势操作。用户已经习惯了标准手势的行为,没有必要让用户学习达到同样效果的不同操作。

可以用复杂手势作为完成某任务的快捷方式,但不能是唯一触达方式。最好给用户提供一些简单、直接的方式完成某操作,即使这种方法需要额外的动作。简单的手势能让用户集中于当前的体验和内容,而不是交互操作本身。

除非是游戏,否则避免定义新的手势。在游戏或其他沉浸式的应用中,操作手势也是有趣体验的一部分。但是在普通应用中,帮助用户达成目标要比操作本身重要的多,所以最好使用标准手势,尽量避免让用户去发掘和记忆新的操作。

在特定的环境中,可以考虑使用多指操作。虽然复杂的操作并不一定适用于所有应用,但对用户会花大量时间使用的应用来说可以丰富体验,例如游戏或创建内容环境。但因为非标准手势可发现性差,要尽量少用,并且不要让这类手势成为完成任务的唯一方式。

1.7.2 可交互元素吸引用户点击(Interactive Elements Invite Touch)

为了暗示交互性,设计时会使用很多线索,包括颜色、位置、上下文、表意明确的图标和标签等。并不需要过于修饰元素来向用户展示可交互性。

一个关键的颜色可以给用户提供很强的视觉指引,尤其是没有冗余的其它颜色时。为了有对比,使用蓝色标记可交互的元素,并且使用统一的、易识别的视觉风格。

1463035257-5305-09

返回按钮使用多个线索指明其可交互性并传达其功能:它出现在导航中,显示了一个指向后方的图标,使用了关键色,显示了上一级页面的标题。

1463035261-8601-09

一个图标或者标题提供了清晰的名称指引用户点击它。例如,地图中的标题“立交桥路线”,“定位到这里”,清晰地说明了用户可做的操作。结合关键色,就可以省去按钮边界或其他多余的修饰。

1463035257-7771-09

在内容区域,有必要给按钮添加边界或背景。操作条中的按钮、动作表单和提醒对话框可以不需要边界,因为用户知道在这种区域中大多数选项是可交互的。但是在内容区域,按钮有必要使用边界或背景将按钮从其他内容中区分出来。例如,系统自带的音乐、时钟、照片和App Store应用会在一些特别的场景中使用这种按钮。

照片应用中给分享按钮增加了边框,与其他解释性文本进行了区分。

1463035257-3987-09

时钟应用在秒表和计时页面中给按钮增加背景来强调开始和暂停按钮,并且使按钮在周围的内容中更容易点击。

1463035269-2792-09

App Store应用中使用有边界的按钮,将按钮和整个内容条区分开来,点击整条内容查看详细信息,点击按钮进行下载安装。

1463035268-1694-09

1.7.3 反馈有助于理解(Feedback Aids Understanding)

反馈会帮助用户了解应用当前在做什么,发现接下来可以做什么以及理解动作产生的结果。UIKit提供了很多反馈。

尽可能将状态或其他的反馈信息整合到UI中。用户不进行操作或不跳出当前内容就能获得需要的信息是最好的。例如,邮箱应用将当前邮箱的状态显示工具条上,这样就不会影响当前内容。

1463035270-7249-09

避免显示不必要的警告框。警告框是一种很强的反馈机制,只有在传递非常重要也是理论上可行的信息时才需要使用它。如果用户常看到很多不是重要信息的警告框,他们很快就会忽略所有对话框提醒。

1.7.4 输入信息的方式要简单(Inputting Information Should Be Easy)

不管用户是点击控件还是使用键盘,输入信息都会花费时间和精力。如果发挥有用的效用前就让用户输入大量信息会减弱用户继续使用的欲望。

让用户更容易地进行选择。例如,使用选择器或者表格代替纯文本,避免要求用户打字来提高选择效率,降低选择成本。

1463035272-6781-09

适宜地从iOS中获取信息。设备上存储了大量的用户信息。可以的话,不要让用户提供你可以轻易找到的信息,例如联系人或日历信息。

提供有用的反馈来平衡用户的输入。付出和回报的概念可以帮助用户感到进程在被推进。

1.8 动画(Animation)

iOS的用户界面中遍布着细微、精美的动画,它们使得应用的体验更具吸引力、更具动态性。适当的动画可以:

  • 传达状态和提供反馈
  • 增强直接操作的感觉
  • 帮助人们可视化他们的操作结果

谨慎地增加动画,特别是在那些无法提供沉浸性体验的应用中。看起来过多的无理由的动画会阻碍应用的流畅性,降低性能,还会分散用户在任务中的注意力。尤其要说的是,要有目的和限制性地使用运动效果和UI组件中的动态行为,并确保对结果进行测试。一旦被合理的使用,这些效果能提高用户的理解度和愉悦度;过度使用他们则会使应用看起来很迷惑,很难控制。

在合适的时候,使自定义的动画与内置动画保持统一。人们习惯于谨慎添加动画,尤其是在那些不能提供沉浸式用户体验的应用中。如果应用主要关注一些严肃的任务或者生产性任务,那么动画就显得多余了,还会无端打乱应用的使用流程,降低应用的性能,让用户从当前的任务中分心。

开发者的自定义动画应该切合内置iOS应用的动画。用户习惯于内置iOS 应用使用的精细动画。事实上,用户趋向于把视图之间的平滑转换,对设备方向改变的流畅响应和基于物理力学的滚动效果看作是iOS体验的一部分。除非你的应用能够给用户沉浸式的体验–比如游戏–自定义动画应该可以与内置应用的动画相媲美。

使用风格类型一致的动画。在应用中使用风格类型一致的动画非常重要,可以让用户构建基于使用应用获得的用户体验。

大多数情况下,恰当一点的做法是让自定义动画更具现实性。用户乐意于接受自由的艺术创作,但当你的动画违背物理定律和自然法则的时候,他们会感觉到非常迷惑。

1.9 品牌推广(Branding)

品牌推广并不仅仅是在应用中展示品牌的颜色和logo。理想状态下,你开发的某个特定品牌的应用应该通过创建独特的外观和感觉来为用户提供难忘的体验。

在iOS系统之下可以很容易地使用自定义的图标、颜色和字体来创建区别于其他应用的UI。当你进行这些元素的设计时,牢记以下两点:

  • 每个自定义的元素本身都需要具备良好的观感和功能性,但它也应该与应用中其他元素保持一致,无论应用中其他元素是自定义的还是标准的。
  • 为了在iOS中感觉舒适,你的应用虽然不必看起来跟内置的一样,但是需要对它的遵从、清晰度和深度(如欲了解更多,参见1.1 为iOS而设计(Design for iOS))进行整合。花些时间弄清楚在你的应用中遵从、清晰和深度所代表的意味,并把它们在你的自定义元素中表达出来。

当你需要让用户意识到你的品牌时,你应该遵循以下几点:

以精致优雅不唐突的方式植入品牌的颜色和图片。用户使用你的应用来完成事务或者进行娱乐,他们不希望被强迫着去观看广告。为了获得最好的用户体验,你可以通过字体、颜色和图像的设计来潜移默化地地提醒用户你的品牌身份。

避免远离用户关心的内容。比如,在屏幕顶部展示一个二级栏目,仅用来展示品牌资产,这意味着内容没有足够的空间,可以考虑以其他低侵入性的方法无处不在地展示品牌,比如巧妙地定制屏幕的背景。

1463035271-2351-09

抵抗住诱惑,不要把你的logo贯穿整个应用。移动设备的屏幕多数相当小,logo的每一次出现都会占据空间而将用户与他们想看的内容隔离开。而且,在应用中显示logo并不能像在网页中显示logo那样达到相同的目的:对于用户来说通常会很容易在不知道网页所属的情况下访问一个网页,但却极少有用户会在完全不看一个iOS系统中的应用图标的情况下就打开它。

1.10 颜色与字体(Color and Typography)

1.10.1 色彩有助于增进沟通(Color Enhances Communication)

在iOS系统中,颜色会用于表征交互,传递活性以及提供视觉连续性。内置的应用程序选择使用那些看起来更具个性的、纯粹、干净的颜色,并辅以或亮或暗的背景组合。

1463035272-9227-09

如果你要创建多样的自定义颜色,要确保它们能够和谐共存。例如,如果你的应用的基本风格是柔和的色调,你就应该创建一个协调的柔和色调的色板用于整个应用。

注意在不同情境下的颜色对比。例如,如果在导航栏的背景与栏按钮标题之间没有足够的对比,按钮就会很难被用户看到。 依据经验的法则来说,需要区分的颜色必须至少存在50%的亮度差异。(我们)需要将设备置于不同的光照环境之中(包括晴朗的室外)来测试设备上的观感效果。

提示:一种发现需要更高对比度的区域的方法是降低UI的饱和度并在灰度模式下查看它。如果在灰度版本中你很难区分可交互与非可交互元素或背景等,你有可能需要增加这些元素之间的对比度。

当你使用自定义的栏颜色时,着重考虑半透明的栏和应用内容。当你需要创建能匹配特别颜色的栏颜色时(比如一个已有品牌中的颜色),可能在你获得你想要的结果之前,你需要用各种颜色进行实验。栏的显示将会同时受到iOS系统所提供的半透明栏与藏在栏后面的应用内容的呈现所影响。

API注释:使用浅色(TintColor)的属性值给予栏按钮颜色,使用栏浅色(BarTintColor)的属性值为栏本身赋色。欲了解更多关于栏属性的内容,可参见UINavigationBar Class Reference,,UITabBar Class ReferenceUIToolbar Class ReferenceUISearchBar Class Reference(译者注:相关章节翻译将在后续更新中放出,烦请各位耐心等候。)

注意颜色的盲区。多数色盲的人很难区分红色与绿色。需要对你的应用进行测试以确保在其中你没有将红色与绿色作为区分两个不同状态或值的唯一方式,一些图像编辑软件或工具能够有效的帮你验证颜色的盲区。通常意义来说,使用多种方式来表征原色的交互性是非常好的(需要了解更多关于在iOS系统中表征交互性的信息,详见Interactive Elements Invite Touch)。

考虑选择一种基准色颜色来表征交互性与状态。在内置的应用中基准色有比如备忘录中的黄色与日历中的红色等。如果你定义一种用于表征交互和状态的基准色,要确保你的应用中的其他颜色不会与它发生冲突。

色彩可以向用户传达信息,但不一定会以你希望的方式。每个人眼中的色彩是不一样的,不同的文化为色彩赋予的意义也是不相同的。花时间来研究如何使用色彩才可能会被其他国家或者文化接受。你要尽可能确定应用中运用的色彩向用户传达了恰当的信息。

大多数情况下,不能让颜色喧宾夺主,让用户分心。除非色彩是应用的目的和本质所在,通常情况下色彩应该用来从细微细节之处提升用户体验。

1.10.2 文字应该清晰易读(Text Should Always Be Legible)

文字首先必须是清晰可辨的。如果用户不能看清楚应用中的字词,那么文字再好看也是没是无意义的。当你在你的应用中采用Dynamic Type时,你可以实现:

  • 能自动调整文字的粗细,字母间距以及行高。
  • 为语义上有区别的文本模块指定不同的文本样式,比如正文、脚注或者标题。
  • 文本可以根据用户在动态文字和可访问性设置中指定字体大小的变化作出适当的响应。

注:如果你是用自定义字体,你仍然可以依据系统的字号设置来规划字体范围。当用户改变设置时,你的应用也必须响应式的配合。

就你而言,要采用Dynamic Type需要一些工作。为了学习如何使用文字样式并确保当用户改变文字型号设置时你的应用能够获取通知,可以参考Text Styles in Text Programming Guide for iOS(译者注:相关章节翻译将在后续更新中放出,烦请各位耐心等候。)

文本尺寸的响应式变化需要优先考虑内容。并不是所有的内容对于用户都是同等重要的。当用户选择更大的文本尺寸时,他们是想要使他们关注的内容更容易阅读;他们并不总是想要屏幕上的每个单词都更大。

例如,当用户选择具备更大易用性的文本尺寸时,邮件将会以更大的尺寸显示邮件的主题和内容,而对于那些没那么重要的信息——如时间和收件人——则采用较小的尺寸。

1463035302-2333-09

在适当的情况下,当用户选择一个不同的文本尺寸时要调整页面布局。例如,当用户选择小的文本尺寸时,你可能想将内容由一列的布局方式改为两列。如果你决定根据不同的文本尺寸调整布局,你可以选择针对尺寸的子集来实现——如包含小,中和大尺寸——而不是对于每个可能的尺寸都进行布局的调整。

确保一个自定义字体在不同尺寸下的所有类型都具备可读性。实现这一效果的方法之一是效仿在不同的文本尺寸下iOS系统呈现字体样式的一些方法。例如:

  • 文本永远都不应该小于11点(points),即使是用户选择极小的文本尺寸。相较而言,内容样式使用17点的字号作为大尺寸的默认文本尺寸设置。
  • 通常来说,字号与行距值在每一档的文本尺寸设置中差别为1点。唯一例外的是两种标题的样式,它们被应用在极小、小和中尺寸的设置中,使用了相同的字号、行距和字距。
  • 在最小的三种文本尺寸中,字间距相对较大;而在最大的三中文本尺寸中,字间距相对紧凑。
  • 标题和内容的样式使用相同的字体尺寸,同时,为了区分标题与内容样式,标题样式使用更重的值。
  • 导航控制栏的文本使用相同的字号,而内容文本的样式则使用大尺寸的设置(值为17点)。
  • 文本总是使用常规或者中重,一般不适用轻或者加粗。

通常情况下,应用中整体应该使用单一字体。多种字体的混杂会使你的应用看上去支离破碎和草率。相反,使用一种字体和少数样式。根据语义用途,使用UIFont类的API来定义不同文本区域的样式,比如正文或者标题。

1463035279-5715-09

1.11 图标和图形(Icons and Graphics)

1.11.1 应用图标(The App Icon)

每个应用都需要一个漂亮的图标。用户常常会在看到应用图标的时候便建立起对应用的第一印象,并以此评判应用的品质、作用以及可靠性。

1463035278-9284-09

以下几点是你在设计应用图标时应当记住的。当你确定要开始设计时,请参考App Icon来获取更详细的设计规格与指导。(译者注:App Icon章节处在iOS Human Interface Guidelines的Icon and Image Design部分,翻译将在后续更新中放出,烦请各位耐心等候。)

  • 应用图标是整个应用品牌的重要组成部分。将图标设计当成一个讲述应用背后的故事,以及与用户建立情感连接的机会。
  • 最好的应用图标是独特的,整洁的,打动人心的,让人印象深刻的。
  • 一个好的应用图标应该在不同的背景以及不同的规格下都同样美观。为了丰富大尺寸图标的质感而添加的细节有可能让图标在小尺寸时变得不清晰。

1.11.2 栏图标(Bar Icons)

iOS提供了一系列小的icon,用以代表各种常见任务与操作,它们常用在标签栏(Tab Bar)、工具栏(Toolbars)与导航栏(Navigation Bar)中。用户通常都已经了解这些内置图标的含义了,因此可以尽可能的多使用它们。

1463035279-4828-09

如果需要自定义动作或者内容,你也可以设计自定义图标。设计这些小的线性图标与设计应用图标有很大的区别,请参考Bar Button Icons来了解更多内容。(译者注:Bar Button Icons章节处在iOS Human Interface Guidelines的Icon and Image Design部分,翻译将在后续更新中放出,烦请各位耐心等候)

请注意,你有时候也可以用文字来代替工具栏和导航栏的图标。 就像iOS的日历里面,工具栏上便是使用“今天”、“日历”和“收件箱”来代替图标进行表意的。

1463035279-9505-09

想要决定在工具栏和导航栏中到底是用图标还是文字,可以优先考虑一屏中最多会同时出现多少个图标。如果数量过多,可能会让整个应用看起来难以理解。使用图标还是文字还取决于屏幕方向是横向还是纵向,因为水平视图下通常会拥有更多的空间,可以承载更多的文字。

1.11.3 图形(Graphics)

iOS应用大多数图形丰富。无论是你需要展示用户的照片,还是需要创建自定义图片,以下这些需求都应该遵守:

  • 支持Retina显示屏。确保你应用中的所有图片资源都提供了高分辨率规格。尤其需要注意的是,iPhone 6 Plus需要提供@3x规格的图片,而所有其他的高分辨率iOS设备都需要提供@2x规格的图片。
  • 显示照片或图片时请使用原始尺寸,并不要将它拉伸到大于100%你不会希望在你的应用中看到拉伸和变形的图片。可以让用户自己来选择他们是否想要缩放图片。

不要使用带有苹果符号与版权的图片。这些符号都拥有版权,并且产品的设计可能会经常改变。

1.12 术语和措辞(Terminology and Wording)

你在应用中呈现的每一个字都是与用户进行对话的一部分。把握这样的对话机会,为你的用户提供清晰的表意与愉悦的体验。

1463035284-1254-09

设置是面向全体用户的一个基础应用,它使用了简明扼要的语言来描述了用户可以进行的操作。举个例子,设置→勿扰模式(Do Not Disturb)就没有使用难以理解的复杂术语,而是用了简单的语言,给用户描述了里头的一系列操作。

保证你使用的术语是用户能理解的。根据你对用户群的理解来决定在应用中使用什么样的词汇。举个例子,在一款针对小白用户的应用中使用技术术语是不合适的,但对于针对高端用户的应用来说,使用技术术语是很自然的事情。

使用非正式的友好语气,但不需要太过低三下四。避免太正式太僵化,或者太过嘻嘻哈哈,傲慢无礼。请记住,用户可能会反复阅读这些文本,因此有些起初看上去很俏皮的语句,多看几次之后可能会显得幼稚和烦人。

像新闻编辑一般遣词造句,避免不必要的冗余语句。当你的文案足够简明扼要,用户就可以很轻松地阅读和理解它。确定最重要的信息,精炼它并且突出它,让用户不需要读一大段文字才能了解他们在找什么,以及下一步要做什么。

给控件加上短标签或者容易理解的图标。让用户只扫一眼就能知道这个控件是干什么的。

描述时间时要注意准确性。今天和明天这些词汇确实显得比较友好,但有时候会让用户费解,因为你可能没有办法确定用户当前的时区和时间。举个例子,假如有一项活动会在半夜12点前开始,对于在同一个时区的用户而言,这个活动是在今天开始的,但对于那些在早一点的时区里的用户而言,这个活动在昨天就已经开始了。

为你的应用写一则漂亮的App Store描述,最大程度地把握住这个与潜在用户沟通的绝佳机会。除了准确描述你的应用、强调应用的品质与亮点以外,你还需要:

  • 修正所有的拼写、语法与标点符号错误。这些小错误也许不会影响用户正常使用,但是可能会让他们对应用的整体品质产生负面印象。
  • 尽量少用全大写的词汇。虽然大写单词有时候可以吸引注意力,但是全大写的段落不适合阅读,而且会产生一种朝用户扯着嗓子吼的感觉。
  • 可以描述bug修复情况。如果你的应用新版包含用户一直期待的bug修复,那在你的软件描述中提到这一点就是个很好的做法。

1.13 与iOS的整合(Integrating with iOS)

与iOS整合,指的是在当前平台上给用户提供一种舒适的、宾至如归般的体验,当然这并不意味着我们要把每一个应用做的和内置应用一模一样。

最好的与iOS整合的方式便是深刻地了解iOS的主题与核心——这一部分在上文1.1 为iOS而设计(Designing for iOS)部分中已有详细描述,并寻求出如何在你的应用中融合与表达这种主题。当你这么做的时候,遵循本章中的指引可以帮助你为你的用户提供他们想要的体验。

1.13.1 正确使用标准UI元素(Use Standard UI Elements Correctly)

尽可能使用UIKit提供的标准UI元素。多使用标准元素而非自定义元素,你与你的用户都将受益:

  • 标准UI元素会根据iOS官方的更新而自动更新——而自定义元素不会。
  • 标准UI元素对于你自定义外观和行为来说拥有优秀的扩展性。举个例子,iOS中所有的视图(Views)都是可自定义颜色的,它让应用配色变得很简单。想要了解更多如何给UI元素定义颜色,可以参考iOS 7 UI Transition GuideUsing Tint Color的相关章节。
  • 用户更熟悉和习惯标准的元素,因为这对于他们来说没有学习成本,他们可以立刻明白这些元素的用途。

想要充分地利用标准UI元素的优点,有一些关键点需要特别注意:

严格遵循每个UI元素的设计规范。当你应用中的UI元素的外观与功能都是用户所熟悉的,他们可以很容易地根据先前的经验来使用他们,进而更好地使用你的应用。你可以从这些章节中找到各种UI元素的设计规范:Bars, Content Views, Controls, Temporary Views.

(译者注:上文提到的章节均处在iOS Human Interface Guidelines的第4章,翻译将在后续更新中放出,烦请各位耐心等候。若有需要,亦可先参考先前已翻译的iOS7 UI Elements章节:。)

不要混用不同版本的iOS里的UI元素。你一定不希望让用户觉得你的UI元素来自于与当前设备版本不同的iOS系统。

大体来说,请避免创造自定义UI元素来表现标准交互行为。先问问你自己为什么一定要创建一个与标准UI元素行为完全相同的自定义元素。如果你只是想改变标准UI元素的外观,可以考虑使用UIKit外观定制API(UIKit appearance customization APIs),或者给元素填充别的颜色。如果你需要定义一个与标准控件稍有不同的行为,请确保你在改变了这个UI元素的属性和行为之后,这个元素仍然能完成你所希望的操作。

 

不要用系统自带的按钮和图标表达其他含义。iOS提供了多种可用的按钮和图标。请确认你了解它们的准确表意;不要单纯凭借你看到这些图标样式的猜测和理解来解读和使用它们。(你可以在Toolbar and Navigation Bar ButtonsTab Bar Icons中了解到这些按钮和图标的准确含义。)

如果你所需要的功能无法用系统提供的按钮和图标来表现,你也可以设计自定义按钮。自定义按钮的设计可以参考Bar Button Icons

(译者注:上文提到的章节均处在iOS Human Interface Guidelines的第4章,翻译将在后续更新中放出,烦请各位耐心等候。若有需要,亦可先参考先前已翻译的iOS7 UI Elements章节:。)

如果你的应用是沉浸式体验,那么创造全新的自定义UI是合理的。因为你在创造一个统一的体验环境,让用户在其中能够有所期待并探索如何控制应用。

1.13.2 弱化文件和文档处理(Downplay File and Document Handing)

iOS应用可以帮助用户创建和处理文件,但这并不意味着用户需要过分考虑iOS设备的文件系统如何运作。

如果你的应用中支持用户创建和编辑文档,那么提供一个清晰的图形库视图(document library view)让用户能够方便地打开或者新建文档是一个好的做法。理想状况下,这样的图形库视图拥有以下特征:

  • 高度图形化。用户通过屏幕上的缩略图就可以一目了然,快速找出自己想要的文件。
  • 让用户用最少的动作完成自己的任务。比如说,用户可以快速地水平滚动文件列表,然后轻点一下自己想要的文件来打开它。
  • 包含新建文档功能。一个图形库视图应该支持让用户点击一个新建文档的占位图便完成新建文档操作,而不是让用户通过访问别的地方来新建文档。

举个例子,Pages应用的图形库视图里面,既展示了用户已存在的文档,也加入了便捷的新建文档操作。

1463035286-2111-09

如果你的应用允许用户使用在其他应用中创建的文档,你可以通过模态文档选择视图控制器(modal document picker view controller)来帮助用户触达它们。这个控制器可以提取用户在iCloud中的文档,还可以通过文档提供者扩展(Document Provider extensions)来提取在其它应用中创建和储存的文件。想要了解更多文档提供者扩展的内容,可以参考Document Provider Extensions; 想要了解更多文档提取视图控制器,请参考Document Picker Programming Guide.

给用户足够的信心,让他们相信除非主动取消或者删除,他们的成果会被随时妥善保存如果你的应用帮助用户创建于管理文档,不能要求用户每次都能及时保存。无论是打开另一个文档或切换应用的时候,iOS应用都应当承担起帮助用户保存输入内容的责任。

如果你的应用的主要功能不是创造内容,但又允许用户查看或编辑信息,这种情况下你需要询问用户是否要保存修改。在这种场景下,比较好的做法是提供“编辑”按钮,点击后进入编辑状态,同时编辑按钮变成“保存”和“取消”按钮,这种变化可以提示用户当前处于编辑模式。“保存”可以保留修改内容,“取消”则退出编辑模式。

1.13.3 必要时提供可配置选项(Be Configurable If Necessary)

某些应用需要用户手动安装或设置选项,但是大部分应用不需要如此。一个好的应用可以让大部分用户快速上手,并通过主界面给用户提供便捷的调整体验的方式。

当你的应用在默认状态下就能满足大部分用户的期望,用户对设置的需求就减少了。如果你需要储存用户的基本资料,可以优先向系统请求和拉取相关信息,而不是上来就让用户自己填写它。如果你一定要提供用户鲜少用到的设置项,请参考App Programming Guide for iOS中的The Setting Bundle部分来了解如何在代码中定义它们。

尽可能在主界面提供设置选项。如果用户在进行主线任务时有可能频繁改变设置,将设置项放在主UI中会很方便。如果用户只是偶尔才会用到设置项,那么可以将其放在独立的视图中。

如果应用内相关设置需要在系统设置中改变,帮助用户直接访问系统设置。尤其是,如果你要用一段文字来描述如何改变这个设置,比如“设置>隐私>定位服务”,倒不如直接放置一个按钮,点击后即可到达设置中的定位服务。想要了解如何实现,请参考 Settings Launch URL.

1.13.4 充分利用iOS技术(Take Advantage of iOS Technologies)

iOS提供了丰富的技术方式来支持用户完成他们所期望的各种任务和场景。这意味着在绝大多数情况下,将系统提供的技术整合到你的应用中,往往比自定义一种新的技术更为可靠。

某些iOS技术,比如多任务并行(Multitasking)与语音向导(VoiceOver)等等,是所有应用都应该包含的系统级特性。而另外一些技术是否整合到应用中,则取决于应用本身的功能性。比如处理门票和礼品卡的应用(Passbook)支持用户通过In-App Purchase完成购买,展示应用内置广告(iAd Rich Media Ads)则可以整合 Game Center,同时支持iCloud

英文原文访问地址:iOS Human Interface Guidelines
中文翻译PDF下载:iOS人机界面指南(一):UI设计基础

2.设计策略

文章索引

  • 2.1 设计原则(Design Principles)
  • 2.1.1 美学完整性(Aesthetic Integrity)
  • 2.1.2 一致性(Consistency)
  • 2.1.3 直接操作(Direct Manipulation)
  • 2.1.4 反馈(Feedback)
  • 2.1.5 隐喻(Metaphors)
  • 2.1.6 用户控制(User Control)
  • 2.2 从概念到产品(From Concept to Product)
  • 2.2.1 定义应用(Define Your App)
  • 2.2.2 为任务量身订制界面(Tailor Customization to the Task)
  • 2.2.3 原型与迭代(Prototype & Iterate)
  • 2.3 案例学习:从桌面到iOS(Case Study: From Desktop to iOS)
  • 2.3.1 iPad版Keynote应用(Keynote on iPad)
  • 2.3.2 iPhone版邮件应用(Mail on iPhone)
  • 2.3.3 iOS系统内的网页内容(Web Content in iOS)

 

2.1 设计原则(Design Principles)

2.1.1 美学完整性(Aesthetic Integrity)

美学完整性并不评判应用的视觉设计,或者用来描述应用的风格特征。美学完整性是指一款应用的视觉表现和交互行为在与功能结合后所传达出的整体一致性。

1463061472-4985-10

人们关心应用是否提供了应有的功能,但是也会潜移默化甚至是很直接地被应用的视觉表现和交互行为所影响。举个例子,一款协助用户完成任务的应用,可以通过使用精美而又无干扰的装饰性元素、标准的控件和可预期的交互行为来帮助用户聚焦在任务本身上。这样,应用就能传达出清晰一致的信息,使得人们信任它。但是,如果应用使用干扰的、琐碎或随意的UI来呈现任务,那么人们可能会对其可靠性和可信赖度产生怀疑。

另一方面,在沉浸式应用中—例如游戏—用户期待惊艳的视觉表现,为用户带来乐趣和刺激,并鼓励用户进行探索。人们不希望在游戏中完成严肃的或生产力式的任务,他们会期待游戏的视觉表现和交互行为能够整合进任务当中。

2.1.2 一致性(Consistency)

一致性可以让人们在一款应用中的不同部分甚至不同应用间复用他们的知识和技能。一款具备一致性的应用不应盲从地复制其他应用,也不应在风格上一成不变。应用应专注于让人们觉得舒适的标准和范例,并提供应用内部统一的体验。

1463061471-6841-10

在决定一款iOS应用是否要遵守一致性原则时,请思考如下问题:

  • 应用是否和iOS标准一致?是否正确地使用了系统提供的控件、视图和图标?是否以用户所预期的方式整合了设备的特性?
  • 应用是否内部统一?文案是否使用了一致的措辞和风格?同样的图标是否表意相同?在不同的位置执行同样的操作时,人们是否能能预期会发生什么?
  • 应用是否和先前的版本保持一致?条款和意义是否保持不变?基本概念和主要功能是否发生了变化?

2.1.3 直接操作(Direct Manipulation)

当人们不再使用一堆控件进行操作,而是直接操作屏幕上的对象时,他们能更集中精力完成任务,也更容易理解这些行为所产生的结果。

1463061477-7256-10

使用多点触摸界面,人们可以通过捏合操作来直接放大和缩小图片或文本内容。在游戏中,玩家应该直接移动和作用在屏幕上的对象。例如,游戏中可能会显示密码锁,用户可以通过转动它来打开。

在一款iOS应用中,如下情况中人们应该能够进行直接操作:

  • 旋转或者移动设备来影响屏幕上的对象
  • 使用手势来操作屏幕上的对象
  • 显示即时可视的操作反馈

2.1.4 反馈(Feedback)

反馈可以明示人们的行为,展示操作的结果,并更新于任务进程之中。

1463061481-4192-10

iOS内置的应用对用户的每个行为都提供了可感知的反馈。当人们点击列表项和控件时,它们会被临时高亮,并会在操作过程中持续一段时间,以此展示控件被执行的过程。

精细的动画会给人们带来有意义的反馈,帮助阐明行为的结果。例如,列表中新增一项时的动画可以从视觉上帮助人们发现列表的变化。

音效同样可以为人们提供有效的反馈,但不应成为唯一的反馈方式,因为人们不一定能听到。

2.1.5 隐喻(Metaphors)

当应用中的虚拟对象和交互行为与用户已经熟悉的体验相似时—无论这些体验是来源于真实或数字生活—用户就可以快速地掌握如何来使用这个应用。

当应用使用隐喻来传达某种用法或体验时,最好不要让隐喻突破所依赖的对象或交互行为本身的限制。(译者注:此处可理解为对于隐喻的使用应量力而为,不要过于牵强。)

由于人们实际上是和屏幕进行物理上的交互,所以iOS应用有很大的余地来使用隐喻。iOS中的隐喻包括:

  • 移动分层视图来显示被遮挡的内容
  • 拖曳、轻扫和滑动游戏中的对象
  • 点击开关,滑动滑块,转动选择器
  • 轻扫来翻阅书本或杂志

2.1.6 用户控制(User Control)

是人—而不是应用—发起和控制行为。应用可以对用户进行操作建议,对有危害的后果予以警示,但是不应替用户来做决策。好的应用会在给人们帮助他们避免不必要结果的能力时,找到正确的平衡。

1463061476-2678-10

当对应用的交互行为和控件都较为熟悉和可预期时,用户会觉得应用更易上手。那些简单直白的交互行为更容易被用户所理解和记住。

人们会希望在一个操作被执行之前有足够的机会来取消,也希望在执行一个不可逆的操作之前可以有机会来进行确认。最后,人们还会希望能够停止正在执行中的操作。

2.2 从概念到产品(From Concept to Product)

2.2.1 定义应用(Define Your App)

应用的定义是对应用主要功能和目标用户的简明具体的描述。

尽可能早地创建应用的定义可以帮助你将一个想法和功能清单转换为用户想要的条理清晰的产品。在开发过程中,可以使用定义来决定某些功能和行为是否合理。使用以下几个步骤来创建一个可靠的应用定义。

1、列出所有你认为用户可能喜欢的功能

可以直接进行头脑风暴。此时,你需要列出所有与产品中心有关的任务。不用担心清单太长,因为接下来会进行删减。

假设你一开始的想法是开发一个帮助人们购买食品杂货的应用。你可以思考在进行这项活动时,会涉及到哪些相关的任务,这些就是用户可能感兴趣的潜在功能。例如:

  • 创建清单
  • 查找食谱
  • 比较价格
  • 定位商店
  • 给食谱做注释
  • 查找可使用的优惠劵
  • 查看烹饪演示
  • 探索不同的烹调方法
  • 寻找某些食材的替代物

2、确定目标用户

现在你需要清楚地将你应用的用户与其他iOS应用的用户区分开来。确定在此情此景下,什么是对你的用户最重要的。在食品杂货例子中,你可能需要问问你的用户:

  • 通常是在家里做饭还是更喜欢现成的食物
  • 是忠实的优惠券用户还是认为优惠券没多大价值
  • 喜欢寻找特别的食材还是喜欢基本食材
  • 严格按照食谱做菜还是只把食谱当做灵感来源
  • 喜欢少量多次购买还是一次性购买大量食物
  • 希望能保留多个不同目的的清单还是只希望记录回家路上需要购买的几个东西
  • 坚持使用固定的品牌还是会使用方便的替代品
  • 习惯于购买固定的一些物品还是会按照食谱来购买

思考过这些问题之后,你可以从三个方面来描述目标用户的特征:喜欢按照食谱进行尝试,时常很匆忙,通常情况下很节俭。

3、根据目标用户过滤功能清单

如果在确定了一些用户特征后,你最终只得到了几个主要功能,那么你就已经步入了正轨:出色的iOS应用应该聚焦在帮助用户解决问题的核心任务上。

例如,即使第一步想出的那些可能需要的功能都是有用的,也不可能全都被第二步定义的目标用户认可。

当你在目标用户的使用情境下检查功能清单时,就可以判断你的应用应该聚焦在三个主要功能上:创建清单,获得并使用优惠劵,获得食谱。

此时你就可以给出应用定义了,总结该应用做什么以及为谁做。食品杂货购买应用的定义可能如下:

“为热爱烹饪且节俭的用户订制的创建购物清单工具。”

4、不止于此

应用定义应该贯穿于整个开发过程,使用应用定义来确定功能,控件,措辞的合理性。例如:

当你想要新增一个功能时,问问你自己这对应用的主要目的和目标用户是否非常重要。如果不是,可以置之不理。例如,你已经确定了你的用户对大胆新颖的烹饪方法感兴趣,那么着重展示盒装蛋糕和现成的食物就不太合适。

当你考虑用户界面的外观和行为时,问问你自己你的用户更喜欢简单的、流线型的风格,还是有明显主题的风格。以用户目标为指导来完成你的应用,理解用户期望通过你的应用完成什么,例如完成任务的能力,快速找到答案的能力,深入综合内容的能力,或者获得娱乐的能力。例如,尽管你的食品杂货清单应用需要易于理解和快速上手,但你的用户还是可能倾向于一个有关食物的主题界面。

当你考虑应该使用怎样的措辞时,努力和用户对这个主题的专业程度相匹配。例如,尽管你的用户可能不是由专业的大厨组成,但你也可以肯定他们希望看到有关食材和技术专用的措辞。

2.2.2 为任务量身订制界面(Tailor Customization to the Task)

好的iOS应用会根据清晰的目标和易用性来平衡用户界面的设计。为了达到这种平衡,要确保在设计阶段前期就考虑定制化。因为考虑品牌性、原创性和适销性通常会影响定制化的决策,所以专注于定制化怎样影响用户体验是有挑战性的。

可以由应用中的任务着手:用户执行这些任务的频率如何,在什么样的环境下进行?

举个例子,想象一个计算器应用使用的是精心设计的,充满艺术感的风格,并且使用了创新的布局来展示大家熟悉的计算器元素。这些像艺术品一样的细节渲染和创新的布局并不会影响用户去理解怎样点击按钮和查看计算结果。但是对于只想简单完成任务的用户,这种新奇的体验和美丽的界面很快就会失去效用,并且可能成为一种妨碍。

1463061475-3120-10

相反,GarageBand(随身录音室应用)可以不展示好看的、逼真的乐器来帮助用户制作音乐,但这样会使应用缺少身临其境的愉悦感。在GarageBand里,界面不只是向用户展示了如何使用,同样使得制作音乐的主任务更容易完成。

1463061484-4218-10

当你思考定制化如何增强或减弱用户完成任务的注意力时,记住以下几点:

定制总要有缘由。理想情况下,定制化的用户界面能促进用户完成任务并增强他们的体验。你最好尽可能地用任务驱动定制化决策。

尽量避免增加用户的认知负担。用户对标准界面元素的外观和行为都已经很熟悉了,所以他们不用停下来思考如何使用它们。当用户面对外观和行为与标准不同的元素时,他们就失去了经验优势。除非你的独一无二的元素能够使任务更容易完成,否则用户很可能不喜欢被强制学习一些在其他应用都不通用的操作。

保持内在的一致性。你的应用中自定义元素越多,保持这些元素外观和行为的一致性就越重要。如果用户花费时间去学习了你创建的那些不熟悉的控件,那么他们会希望新学到的这些操作能够在整个应用中通用。

总是以内容为重点。因为标准元素很熟悉,所以它们不会分散用户在内容上的注意力。当你自定义用户界面时,注意确保界面元素不会抢走用户对内容的注意力。例如,如果你的应用允许用户观看视频,你可能选择设计一个自定义的重播控件。但是不管你用的是自定义还是标准的重播控件,都没有它是否在用户开始观看后隐藏,点击屏幕后出现来的重要。

在对标准控件进行重设计时再三思考。如果你不只是想自定义标准控件,而是想重设计,确保你的重设计能提供尽可能多的信息。例如,你设计了一个开关控件,它没有可以指明相反状态存在的信息,那么用户很可能意识不到这是个有两个状态的控件。

一定要彻底测试自定义的界面元素。在测试过程中,近距离的观察用户是否能预测你的元素如何使用以及是否能容易地与它们交互。例如,如果你创建的控件的可点击区域小于44 x 44点,用户点击时就会有困难。或者如果你创建了一个视图对点击和滑动的反馈不一样,确保这个视图提供的功能值得用户去额外关注交互的不同。

2.2.3 原型与迭代(Prototype & Iterate)

在你投入工程资源实现设计之前,创建原型来进行用户测试是个很好的主意。即使只有几个同事来帮你测试原型,你也会收获一些关于应用功能和用户体验的新鲜观点。

在设计的早期阶段,你可以使用纸面原型或者线框图去呈现主要的视图和控件,并且标明每个页面之间的跳转关系。你可以从线框图测试中获得一些有用的反馈,但是线框图的稀疏性有可能会误导用户。因为用户很难想象当线框被实际内容填满时体验会有什么样的变化。

如果你有一个可以在设备上运行的原型,那你可以得到更多有用的反馈。当用户能在设备上与你的原型进行交互时,他们能更容易发现应用中哪里功能不满足预期,哪里体验过于复杂。

创建可靠原型的最简单的方法是使用基于故事板(storyboard)的Xcode模板创建一个基础应用,然后使用一些类似于占位符的内容来进行填充。(故事板(storyboard)文件可以涵盖应用中的所有界面,并且包括界面之间的跳转关系。)接着,将这个原型导入到设备中,这样被测者就可以有一个尽可能真实的体验了。

你不需要在原型中提供大量的实际内容或者使每一个控件都可用,但是你确实需要营造足够的情境来保证真实的体验。并且需要在典型用户体验和非典型的边缘情况之间做好平衡。例如,如果你的应用需要处理很长的列表项,你的原型就不能只显示一两个条目。而且在用户测试交互中,只要被测者能够点击屏幕上的一个区域进入到下一个逻辑页面或者完成主任务,那他们就可能会提供更有建设性的反馈。

当你使用Xcode应用模板来创建原型时,你可以免费使用很多功能,并且它可以相对容易地进行设计中的响应反馈调节。在你确定设计方案并投入资源进行实现之前,应该对原型进行多次迭代测试。想要开始学习Xcode,请参考Xcode Overview

2.3 案例学习:从桌面到iOS(Case Study: From Desktop to iOS)

2.3.1 iPad版Keynote应用(Keynote on iPad)

桌面版的Keynote 应用是一个十分强大而又灵活的应用,可以创建非常优秀的幻灯片。人们喜爱Keynote将简单易用与良好的细粒度的操作结合进而控制无数精确细节的方式,如动画和文本属性等。

1463061499-2435-10

iPad版的Keynote提取了Keynote桌面版的核心要素,并通过创造以下的用户体验使它在iPad上更舒适:

  • 专注于用户内容
  • 在不削减功能的基础上减少系统的复杂性
  • 提供有用而又令人愉悦的快捷操作
  • 延续桌面版本的体验
  • 利用动人的动画提供良好的反馈与交流

Keynote用户能很快理解如何使用iPad版,是因为它使用了iPad原生的范例,符合了用户对功能上的预期。新用户可以用简单、自然的方式直接操控内容,所以可以很容易学会如何使用iPad版的Keynote。

Keynote从桌面版向iPad版的转变是基于从细节到深层的大量修改和重新设计的。这些都是一些最明显的适应性:

流线型的工具栏

工具栏中只有少数的元素,但是它们是用户在创建内容时所使用的全部功能和工具的统一入口。

1463061488-8555-10

简化并优先响应用户焦点的检查器

iPad版的Keynote能自动侦测各种工具,能通过对用户需求进行分类以修正被选择的对象。(译者注:特别是根据当前的操作对象而有限选择某些工具。)通常,人们可以在第一检查器视图中完成他们需要的所有修改操作。如果他们需要修改那些不常用的属性,他们可以下拉另一个检查器视图来进行。

1463061491-6964-10

丰富的预设样式集

人们可以利用预设的样式很简单地改变对象(如表格或图表)的外观或者感觉。除了颜色之外,每个集中,例如表格的标题和轴区分标识等的预设属性都被设计得与整体的主题和谐一致。

1463061493-4081-10

直接操作内容,丰富有意义的动画

在iPad版的Keynote中,用户可以拖动滑块到一个新的位置,可以扭动旋转一个对象,也可以轻击图片来选中它。iPad版Keynote的响应动画进一步加强了这种可直接操作的印象。例如,用户在移动某个滑块时它通常会暂停,而当它被放置在一个新的位置时,环绕在周围的滑块将会向外扩散给它留出空间。

2.3.2 iPhone版邮件应用(Mail on iPhone)

邮件应用是OS X中一款好用而又广受好评的常见应用。它也是一个很强大的程序,可以允许用户撰写、接收、分类和存储邮件,追踪行动和事件,也可以编写备忘录和邀请等。桌面版的邮件应用通过一系列的窗口提供了这些强大的功能。

1463061495-2432-10

iPhone版的邮件专注于桌面版邮件的核心功能,帮助人们接收、撰写、发送和组织他们的信息。为了塑造移动iPhone版的邮件应用,将这些功能浓缩在为其量身定制的界面之中,做了如下的工作:

  • 将人们的内容前置和居中的合理化呈现
  • 专为处理不同任务而设计的不同视图
  • 易于浏览并符合认知的信息结构
  • 适时提供强大的编辑和组织性工具
  • 传达动作和提供反馈的微妙且动人的动画

(我们)必须明白相较于桌面版的邮件应用,iPhone版的邮件应用不是(译者注:或者说并不需要是)一个更好的应用,而是为移动端用户重新设计的邮件应用。iPhone版的邮件应用专注于桌面版的功能子集并将它们呈现在一个吸引人的精简界面之中,据此为移动端的用户提供了核心的邮件体验。

为了使邮件应用的体验能适应移动场景,iPhone版的邮件应用在几个关键的方面革新了用户界面。

直接、高度专注的页面

每个页面显示了邮件应用体验的一个方面:账户列表、邮箱列表、消息列表、消息查看和编辑视图。用户可以在一个屏幕内滑动查看完整的内容。

1463061505-4123-10

简单、可预见的导航

通过每屏的一次点击,用户可以逐层展开通用内容(账户列表)进入具体页面(一封消息)。每个页面会显示一个标题用以指示用户所在的位置,以及一个返回按钮用以更容易地回溯到他们之前的步骤。

需要时即可获取的、简单的点击性控件

基本上在任何场景之下,编写邮件和查阅新邮件都是人们首要希望进行的操作,因此iPhone版的邮件应用保证了这两个功能在多个页面中都可以便利地进行。当用户查看一封消息时,就会显示诸如回复、移动和删除等对消息的操作。

针对不同任务的不同类型的反馈

当人们删除一封消息时,它会动态地进入垃圾桶图标中。当人们发送一封消息时,可以看到它的发送过程;而当发送结束时,人们可以听到一个特别的声音提示。通过消息列表页面工具栏的副标题,用户通过简单一瞥就可以查看邮箱上次更新的时间。

2.3.3 iOS系统内的网页内容(Web Content in iOS)

iOS版的Safari应用在iOS设备上提供了出众的移动网页浏览体验。人们喜欢阅读清晰的文字和图片,也希望能通过旋转设备或者捏合和点击屏幕来调整视图。

基于标准建立的网站可以在iOS设备上显示得很好。特别是那些能侦测设备并不需要插件的网站可以同时在iPhone和iPad上都表现得很好,两者之间不会需要太多的修改,即使有也很小。

除此之外,成功的网站应具备以下的典型性:

  • 如果页面宽度需要匹配设备宽度,可以设置合适的视窗(viewport)来适应设备
  • 避免CSS中固定的定位,以便当用户缩放或拖动页面时内容无法被移出屏幕
  • 拥有一套基于触控操作的用户界面,而不是依赖基于传统点击操作的交互

有时候,额外的一些修改可以(使页面)更合理。例如,在iOS系统中,很多网页应用会设置合适的视窗(viewport)宽度并通常隐藏Safari的UI。如欲了解更多如何进行这些修改,参见Safari Web Content Guide章节中的Configuring the ViewportConfiguring Web Applications

网站也可以通过其他的方法适配桌面网页体验到iOS端的Safari浏览器中:

使键盘适应iOS端的Safari

当键盘和格式辅助信息出现时,iPhone上的Safari应用会将你的网页显示在URL地址下方和键盘与格式辅助信息上方。

使弹出式菜单适应iOS端的Safari

在桌面版的Safari应用中,弹出式菜单会包含很多选项,就如在其他OS X应用中一样。在必要的情况下,菜单展开后可以超出应用窗口的边界以显示其中的所有选项。在iOS版的Safari应用中,弹出式菜单由原生的元素所呈现,这样能提供更好的用户体验。例如,在iPhone上,弹出式菜单会出现在选择器(picker)当中,选择器里会一个用户可选择的选项列表。(欲了解更多选择器控件的内容,可以参见Picker。)

英文原文访问地址:iOS Human Interface Guidelines (Design Strategies)
中文翻译PDF下载:iOS人机界面指南(二):设计策略

转载自:https://isux.tencent.com/

交互设计问答社区

寻找答案发起提问