美文网首页@IT·互联网设计杂谈UI设计头条
iOS平台设计规范(二)APP架构

iOS平台设计规范(二)APP架构

作者: 宛苏 | 来源:发表于2019-06-18 09:11 被阅读6次
    无论是UI、交互,还是产品经理,都应该熟读iOS平台设计规范。这对我们的产品设计,百利而无一弊。

    架构(APP Architecture)  

    一、加载(Loading)

    当APP里的内容正在加载时,一个空白或静止的屏幕可能会让APP看起来像是卡死了,从而让用户感到沮丧和不知所措,甚至可能导致用户直接关掉APP放弃使用。

    创建原则:

    1、明确说明加载状态

    至少要有一个加载的图标,可以表达正在发生的状态。更好的方式是:使用类似进度条的形式,显示明确的进度,让用户可以判断自己大概需要等待多长时间。

    2、尽快显示内容

    在用户看到屏幕内容之前,不要让用户干等着加载。你可以使用占位符文本、图形或动画来告诉用户,这个区域的内容还没加载完成。在加载出内容后直接代替这些占位符元素。后台也要尽可能使用预加载,例如在播放动画或用户正在操作导航栏的选项卡时,后台预先加载出来即将播放和显示的内容。

    3、自定义加载屏幕

    虽然系统默认的进度指示器可以用,但有时会感觉它们脱离了主题,与APP的风格甚至显得格格不入。设计师可以考虑用自定义动画亦或是与APP风格相匹配的元素来设计,会使用户有更沉浸式的体验。

    4、引导或娱乐用户掩盖加载时间

    比如很多游戏、视频APP等,都可以放一段有趣的动画或占位图作为加载提示,缓解用户焦急的心情。(其实就是障眼法的意思)

    缺点是:比较耗内存,一般游戏APP里用的比较多,普通的APP很少看到用动画作为加载方式的,因为现在网络越来越快,用户只想尽快看到APP内的内容。

    二、模态(Modality)

    模态,是一种设计方式。一般作为临时性的形式出现在页面当中,需要显示操作按钮才可以退出。模态的意义在于:

    帮助用户专注于一项与当前页面密切相关的任务或选项

    确保用户可以对重要操作采取行动

    iOS提供您在应用中特定情况下使用的警报,活动视图(或共享表)和操作表。在iOS13以下的版本,你需要自定义以下模态内容的演示样式,而iOS 13及更高版本则默认以下演示样式:

    工作表

    开卡片时被暂停的任务。用可以通过以下方式关闭卡片:

    1、从屏幕顶部向下滑动

    2、当卡片内容滚动到顶部时,从屏幕上的任何位置向下滑动

    3、点击“关闭/取消”按钮

    注:工作表常用于无法启用复杂任务的非模拟内容。

    全屏

    全屏模态视图的演示样式是涵盖整个屏幕的,且完全覆盖了之前的视图,它最大限度地减轻了视觉上的干扰。用户可以点击按钮来关闭全屏模态视图。

    对沉浸式内容(如视频、照片或照相机视图)使用全屏模态视图,或者得益于全屏模态视图的一些复杂任务(如标记文档或编辑照片)。

    注:如果使用当前上下文模式视图样式在拆分视图窗格、弹出窗口或其他非全屏视图中显示模式内容,则在紧凑环境中显示模式内容时应切换到使用工作表。

    创建原则:

    1、明确说明加载状态

    只有需要用户集中注意力在做出选择或执行与当前页面不同的任务时,才能创建模态体验。模态体验使用户脱离当前的页面并需要用户主动关闭,因此只有当创建模态体验有明确的好处时才使用它。

    2、在传达重要信息或操作的情况下才使用警示框

    通常情况下,弹出警示框意味着出现了问题。因为警示框会中断体验,需要点击才能关闭。所以要让用户认为打断是有必要的,这一点很重要。

    3、确保模态上的任务简单且集中

    不要在你的APP中创建另一个APP。如果一个模态任务太复杂,那么当用户进入模态视图时,他们可能会忽略他们之前被暂停的任务。

    尤其谨慎创建太多层级结构的模态任务,因为用户可能会在多个视图中迷失不知道怎么返回或忘记怎么返回。如果模态任务必须包含子视图,请提供清晰的返回路径和完成路径。

    除非完成任务,否则不要使用“完成”按钮。

    4、始终要有取消/关闭模态视图的按钮

    例如:你可以使用“完成”或“取消”。至少有一个按钮以确保辅助技术访问模态视图,并代替手势关闭模态视图。

    5、必要时,在关闭模态视图之前进行确认,避免数据丢失

    无论用户使用手势还是按钮来关闭模态视图,如果该操作可能导致用户生成内容丢失,请提供解释情况的操作表,并为用户提供解决方法。

    6、不要让模态视图出现在Popover(弹出式气泡)上

    除非是警示框,任何元素都不该出现在Popover上。在极少数情况下,当用户在Popover中执行操作后需要用到模态视图时,请在显示模态视图之前先关闭Popover。

    7、通常,为模态任务设置一个标题

    当用户进入模态任务时,他们会离开之前的页面,因此最好使前后操作清晰连贯。你也可以在视图的其他部分中,提供更全面描述任务或指导的文本。

    8、模态视图外观应与APP风格统一

    例如,当模态视图包含导航栏时,它应该采用与APP导航栏相同的外观。

    9、为模态视图的展示提供一个合适的过渡方式

    使用与APP风格统一的过渡样式,增强用户对内容转变的认知。iOS默认的过渡方式是:模式视图从屏幕底部向上滑入,被关闭时向下滑出。注意在整个APP中使用统一的模态转换样式。

    三、导航(Navigation)

    用户往往会忽略APP的导航,除非当某些操作达不到他们的期望。我们的任务是在不会引起用户过度注意的情况下,让导航结构清晰、目的明确。导航在APP中应该显得自然和熟悉,不应该主导界面或成为页面内容中的焦点。

    在iOS中,有三种主要的导航样式:

    (1) 层级导航

    每一屏只能做一个选择,直到到达你的目的地。如果要前往另一个目的地,您必须按原路一级级返回,并从最开始的位置做出的选择。iOS的设置和邮件两个APP就是使用这种导航样式。

    (2) 平级导航

    在不同内容类别间进行切换,像音乐和App Store两个APP就是用的这种导航样式。(也是目前APP最常用的导航样式)

    (3) 内容驱动或体验驱动导航

    在APP的不同内容间切换,或者由内容本身定义导航。游戏、书籍和其他沉浸式APP通常使用此导航样式。

    一些APP会结合多种导航样式,例如:使用平级导航的应用可以在每个类别中使用分层导航。

    设计原则:

    1、始终提供清晰明确的路径

    用户应该知道他们在APP中的位置以及如何到达下一个目的地。无论导航风格如何,操作路径必须符合逻辑,可预知易于遵循。

    一般情况下,一个页面只给用户提供一个入口。如果他们需要在多个场景下看到一个页面内容,请考虑使用操作表、警示框、弹出式气泡或模态视图。

    2、设计一种能快速、轻松地获取内容的信息结构

    为你的APP设计一个信息架构,在这个架构中,只需要最少的点击、最少的滑动和最少的页面数量便可以访问相应内容。

    3、使用手势操作让页面切换更流畅

    让用户以最小的阻力在页面之间跳转。例如,你可以让人们从页面侧面滑动以返回上一个页面。

    4、使用标准导航组件

    尽可能使用标准导航控件,例如页面控件,标签栏,分段控件,表视图,集合视图和拆分视图。用户已经很熟悉这些控件了,这样能够让用户更轻松地使用你的APP。

    5、使用导航栏贯穿层级结构

    导航栏的标题可以显示层级结构中的当前位置,返回按钮可以轻松返回到上一位置。

    6、使用 Tab Bar(标签栏)展示对应类别的内容或功能

    使用标签栏显示对应类别的内容或功能。标签栏可让人们快速轻松地在不同类别之间切换。

    7、同一类型页面不同内容时可以使用页面控件

    页面控件能清楚地传达可用页面总数和当前页面位置。天气APP就是使用页面控件来展示不同地理位置的天气情况。

    四、新手引导(Onboarding)

    APP启动的这段时间是吸引新用户和留住老用户的一个机会。所以,请设计快速、有趣或者具有引导意义的启动体验。

    设计原则:

    1、提供启动页面

    启动页面在APP被打开时出现,在加载初始内容的同时,有启动页给人的印象是APP响应很快。

    启动页很快会被APP的首页取代,所以它应该尽量与首屏相似,本地化的文本和交互元素除外(这一点在国内APP当中非常罕见)。

    2、合适的方向启动

    如果你的APP同时支持纵屏和横屏,则应该以设备的当前方向启动。如果你的APP只在一个方向上运行,则应始终以该方向启动,并在需要时允许用户旋转设备。

    如果是APP是处于横屏模式下,那么不管用户将设备是向左还是向右旋转,APP都应该随着旋转正确地选择显示方向。(当然,有特殊原因除外)

    3、快速进入

    尽量避免显示闪屏、菜单和说明,这些都会让用户花更长的时间来看到内容并开始使用你的APP。相反,让人们直接潜进入最好。如果你的APP需要教学介绍或是引导,请务必提供一种跳过它们的方法,而且切忌向老用户展示它们。

    4、预想用户可能会需要的帮助

    主动寻找和思考用户可能被卡住的地方。例如:游戏中在暂停或角色没有前进时显示一些有用的提示。让用户可以重播教程,以防第一次进入APP的他们错过任何内容。

    5、只在教程中展示的重要信息

    为新用户提供引导是好的,但这并不意味着这样做就能成为优秀的APP。更重要的是,你应该让APP更直观。如果你的APP需要过多的引导,那么请重新审视/反思你的设计。

    6、让学习变得有趣和易于发现

    边做边学比阅读一长串说明更有趣和有效。在上下文环境中,使用动画和可交互性循序渐进地引导用户。要避免显示看起来像可交互的屏幕截图。

    7、不要在一开始就询问用户设置信息

    用户希望一进入APP就能马上操作。为大多数人设计你的APP,让其他的少数想要不同配置的人自己调整APP内的参数来满足他们的需求。尽可能从设备设置和默认值或通过同步服务(如iCloud)来获取设置信息。

    如果一定要询问设置信息,请在用户第一次使用APP就出现提示,并且应该允许用户稍后在APP的设置中进行修改。

    8、避免在APP内显示许可协议和免责申明

    在下载APP之前,直接在App Store展示许可协议和免责声明。如果你一定要在APP中展示这些,请确保他们融入你的设计,并且不会破坏用户体验。

    9、在重新启动前恢复之前的状态

    不要让用户为了回到APP之前的位置而重复步骤。保留并恢复APP的状态,以便他们可以从上次离开位置继续运行。

    像人人都是产品经理APP在这块就做的很好,在退出APP后,不管你什么时候再重新打开APP,都是退出之前在看的那篇文章。有时候因为某些原因退出了APP又忘记收藏文章,就不用再重新搜索寻找,这点体验非常好。

    10、不要频繁让用户对你的APP进行评分

    过快或过于频繁地要求评分是很令人反感的,并且会让最终收到的有用反馈的数量减少。

    为了获得一个更全面、客观的用户反馈,让用户有时间对APP有一个基本的了解之后再进行评分。一定要提供关闭评分提示的方法,永远不要强迫用户为你的APP评分。

    11、不鼓励重启

    重新启动APP很耗费时间,而且会让你的APP看起来不是那么可靠而且很难用。如果APP是因为内存或其他问题难以运行,使得系统只能重启,那你需要先去解决这些问题。

    五、请求许可 (Requesting Permission)

    APP必须得到用户的授权才可以访问其个人信息,包括:当前位置、日历、联系人信息、提醒和照片等。虽然用户可能会觉得APP直接获取个新信息可能更方便,但他们也希望能够控对自己的隐私数据进行自我管控。

    例如:用户喜欢系统自动获取自己的实际位置去标记照片或寻找附近的朋友,但他们仍然希望可以选择关闭这些功能。

    设计原则:

    1、在APP需要用到时才向用户请求个人数据

    用户对个人信息的请求产生质疑是很正常的,尤其是他们发现当前的请求完全没有必要时。确保只在用户必须要用到个人数据时才会发出权限请求。

    例如:APP可能只有在激活位置跟踪功能时才会请求获得用户的当前位置。

    2、解释APP需要这些个人信息的原因

    在系统的权限请求警示框中提供自定义文本(示例用途字符串)。使用简短和具体、礼貌的文案,让用户感觉轻松,没有压力。文案中没有必要包含APP的名称 - 因为系统可以自动识别你的APP并带入名称。

    3、只有关乎到APP的正常运行时,才会在启动时出现请求权限

    如果你的APP显然只有获得他们的个人信息才能正常运行,那么用户也不会对这个请求感到很反感。

    4、没有必要时不要请求位置信息

    在获得位置位置信息之前,检查系统以查看是否已启用位置服务。如果已经开启, 你可以在用户真的需要用到该功能时再进行警示框提醒,甚至可以直接省略掉警示框。

    5、使用系统提供的警示框样式

    你可以在标准的权限警示框中自定义文本,但不要直接复制标准警示框行为的提示文本和外观样式。

    六、设置(Setting)

    一些APP可能一开始就需要用户进行设置或配置选项,但大部分APP应该避免或者讲设置操作延迟。

    成功的APP可以一开始就让大多数人觉得好用、易用,同时还提供了一些便捷的路径来调整体验。当你的APP可以满足大部分用户的需求时,你就可以弱化他们对设置的需要。

    1、推测可以从系统中得到什么

    如果APP需要有关用户、设备或环境的信息,请尽可能向系统请求,而不是直接询问用户。

    例如:如果你想要知道用户的邮政编码来提供本地选项时,可以向用户请求获取他们的位置。如果用户拒绝访问其当前位置,则优雅地退回到手动输入。

    2、仔细考虑APP中配置选项的优先级

    APP的的主页是用来放置关键内容或者常用选项的。次级页面更适合放置偶尔才会更改的选项。

    3、不经常更改的配置选项放在系统“设置”中

    系统的“设置”APP是更改系统配置的中心位置,但用户必须离开你的APP才能到达“设置”APP。能在APP中直接调整设置会更方便。

    4、在适当的时候提供去设置的快捷方式

    如果APP包含引导用户到“设置”的文本,例如:“转到设置> MyApp>隐私>位置服务”,则会提供一个自动打开该位置的按钮。

    相关文章

      网友评论

        本文标题:iOS平台设计规范(二)APP架构

        本文链接:https://www.haomeiwen.com/subject/fskxqctx.html