“ios人机界面指南”的阅读记录

植夫发布

  • 简介

Apple人机界面指南  iOS Human Interface Guildeline英文版https://developer.apple.com/中文版翻译https://github.com/conanwhf/ResourceDoc/blob/master/0.0fromApple.mdApple人机界面指南,有Mac、iOS版、watchOS、tvOS四个系统 。本次主要阅读iOS版人机界面指南。
材质化设计 Matertal  Desing  英文版https://material.io/guidelines/中文版翻译http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.htmlhttp://www.woshipm.com/u/95525
参考资料轻松看懂规范!详解组件控件结构http://www.uisdc.com/loading-symbols

阅读记录
  • 阅读总结

ios人机界面指南更像一个偏交互类的方法论,matertal 更像一套给开发用的设计规范,两个规范同时阅读和对比搞不定,这次主要阅读ios人机交互指南。


以前关注产品的评价体系,“有用 — 能用 — 好用”,强调易用性、可用性等,感觉移动端的规范都在试图描述创造好用户操作流程(flow),为用户提供一个清晰的流程,明确的信息层次结构,创造有“心流”体验的产品所以在设计原则“用户控制”中描述,应用可以对用户进行操作建议,对可能造成严重后果的行为发出警告,但不应该替用户来做决定。
现在云盘是使用ios规范,但是移动端是使用H5的,和原生应用差别很大,我们没有做H5的适配,导致Android手机上差别很大,控件看上去都会很小气,内容列表也很密集。

阅读方法主要是带着工作中的问题去阅读,后面写总结时发现,很多内容都忘记了,需要不断用去对比印证,没有印证的地方,往往记得不清楚。在阅读上,发现之前碎片化的阅读不是太好,主要是读的时候对当前工作生活没有影响,很多时候都是点到为止。如果到此不深究,在知识积累上也毫无连贯性。

在阅读的时候尽量进行“主题阅读”,比如这一次“各个平台设计规范阅读对比”。

通过阅读指南,发现自己有些存在模糊的地方,主要是对控件的理解和信息(内容)的表达。控件:按钮、开关、搜索、滚动、文本、弹框、加载……这些都需要深入练习,特别是对比两个设计方法论之间的区别,对常用控件的理解会更深,需要不断练习,不是看一遍规范就能提高的;信息表达:如何将信息准确表达,很多的细节需要去推敲,规范只是给出一些常规的说明,需要以后不断的去总结。
发现研读和遵循着平台设计规范,只是能做出“不会出错”的设计,在创新性方面是不足的,另外只看这一套设计规范是有局限的,需要多找几套设计规范去对比。

下一步需要完成的:怎样制定一个对控件针对性练习的计划?对不同版本(产品)设计原则的整理,真正能运用到实际设计中整个规范都在围绕用户任务(flow)展开,在这个过程中遇到哪些场景、使用哪些控件、什么样的方法去优化,所以把整个指南按照这个思路拆开,归纳分类后按照类别去梳理。

对比两个的规范虽然内容差别很大,但是对比一下它们的目录,很多相似之处,ios有很多认知类的规范,material更多组件类,我把ios规范的导航、菜单、表单、列表、表格、按钮、弹出框等组件按照用户流程的场景去整合几个分类。

认知类
  1. 设计原则
  2. 明确用户所处的位置:导航(2.4)、标签菜单,用户引导
  3. 优化过程中的场景:无障碍设计(2.1)加载(2.2)新手引导(2.5)身份验证(3.3)数据输入(3.4)快速查看(4.4)
  4. 任务流程中打断:对话框模态(2.3)多任务处理(4.1)通知(4.2)操作表-底部弹框(8.1)活动设置栏(8.2)警告(8.3)局部弹出窗口(8.8)
  5. 对操作的响应:反馈(3.6)手势(3.8)撤销(3.10)
规范类
  1. 控件:文件处理(3.7)图像(8.5)地图(8.6)阅读进度条(8.7)
  2. 特殊处理的设计方法:集合(8.4)

思维导图
一、认知类
1、 设计原则


美学完整性整体美感体现在一个应用的视觉外观和交互行为与其功能相结合的优良程度。使用微妙且无干扰的图形、标准化的控件和可预知的交互行为使用户聚焦在任务本身。问题:让用户聚焦任务本身的设计方法都有那些?


一致性一款内部统一的应用通过使用系统提供的界面元素、风格统一的图标、标准的字体样式和一致的措辞来实现相同的标准和规范。应用所包含的特性和交互方式是符合用户心理预期的。问题:用户的心理预期会受到什么影响?问题:为确保一致性交互和视觉会制定那些设计规范?


易用性在屏幕上可直接操作的内容能够促进用户参与并有助其理解。用户可以体验到通过旋转设备或者使用手势来控制屏幕上的内容。通过直接操作,他们可以即时看到自己的行为结果。问题:体验过的产品中用户那些行为动作是符合本能和认知模型的?


2、明确用户所处的位置:导航(2.4)、用户引导,标签栏(7.4)工具栏(7.5)导航栏(7.1)状态栏(7.2)分段控制-tab标签(9.8)


在页面始终提供一个清晰的路径。人们应该始终知道你的应用程序在哪里,以及如何到达下一个目的地。使用标准导航组件。尽可能使用标准导航控件,如页面控件,选项卡栏,分段控件,表格视图,集合视图和拆分视图。用户已经熟悉这些控件,并会直观地知道如何绕过你的应用程序。导航栏的标题可以显示层次结构中的当前位置,后退按钮可以轻松地返回到以前的位置。一般来说,导航栏应该只包含视图的当前标题,后退按钮和一个管理视图内容的控件。云盘最近功能,在点击发送联系人按钮后,到联系人选择页面,下一页标题栏“选择”没有告知用户,不知道处于什么位置。

标签栏按钮不应该用来执行操作。
标签栏和工具栏之间的区别,这两种类型的栏都出现在应用程序屏幕的底部。选项卡栏让用户在应用程序的不同部分之间快速切换,工具栏包含用于执行与当前上下文相关的操作的按钮,如创建项目,删除项目,添加注释或拍摄照片。
在云盘新的交互中标签菜单栏是放了一个工具属性的“创建”按钮。


3、使用过程中的任务:无障碍设计(2.1)加载(2.2)新手引导(2.5)身份验证(3.3)数据输入(3.4)快速查看(4.4)


明确的加载状态能够表示任务在进行中,显示明确的进度,这样用户就有心理预期,能知道他们还需等待多久,任务过程中需要的控件,都是为了表达清楚何时正在发生什么事情。


举例子:云之家各个轻应用使用不同的加载状态和进度显示。云盘移动端是分步加载,先使用云之家的进度控件,加载出来是云盘的页面菜单,然后页面中使用自己刷新控件加载内容。而第二次加载状态会因为网速快,一闪而过,这个地方需要优化。

今日头条在微信的加载没有让用户在空白的屏幕画面前去等待内容的加载,立刻显示屏幕画面,然后通过占位符、图形明确告知用户哪些内容还未显示。当内容加载成功后,替换占位元素,产生一种内容已经加载出来只是没完全显示的错觉,

4、任务流程中打断:对话框模态(2.3)多任务处理(4.1)通知(4.2)操作表-底部弹框(8.1)活动设置栏(8.2)警告(8.3)局部弹出窗口(8.8)

模态(对话框),打断用户操作(心流)过程(flow)。被动模态:提示账户名称必须是多少位,密码错误会有提示错误或者是否忘记密码,程序在加载中。主动模态:ios系统上滑功能栏(行动表),移动端的搜索。


对话框简短的,描述性的标题。屏幕上阅读的文字越少越好,避免添加额外的文本作为消息。由于单词标题很少提供有用的信息,因此可以考虑提问或使用短句。只要有可能,将标题保留一行。使用句式大小写和完整的句子适当的标点符号,不要使用句尾的标点符号。尽量保持消息足够短,以适应一两行,以防止滚动。使用句式大小写和适当的标点符号。避免听起来指责,判断或侮辱。


在迭代产品设计中,合适的措词成为很大困扰,绞尽脑汁想页面中的某个按钮到底是叫”取消”还是叫”放弃”?大多时候也不能和用户的审美情感、记忆、期望产生共鸣,结合规范对标题的说明和文案部分,以下4个点最重要:

  1. 能够描述产品的核心功能或典型使用情景;
  2. 要考虑目标用户的可理解;
  3. 要有情感化;
  4. 有时该直接就得直白明了,不要用是否的疑问。

Ios规范中关于文本标题的描述:使用熟悉的,可理解的单词和短语,避免人们可能不理解的缩写词和技术术语。保持界面文字清晰简洁。人们快速简单地吸收简短的文字,不理解被迫阅读长篇文章来完成任务。找出最重要的信息,简明扼要地表达,突出显示,这样人们就不必太多地找到他们想找的东西,或者找出下一步该做什么。

确定适当的交互元素。人们应该能够一眼看出一个元素的作用。标注按钮和其他交互元素时,请使用动作动词,例如“连接”,“发送”和“添加”。友好的语气。一种非正式,平易近人的风格回应着你在午餐时与人交谈的方式。使用幽默时要小心。而一开始看起来很聪明的文字会随着时间的推移变得令人不快。


举例子:云盘图片预览,更多里面点开只是“保存和取消”,为什么要把保存隐藏起来的意图让人难以理解。不能直接给用户提供,而是通过一个额外对话框,在任务流程中误导用户。保存到手机和下载没有什么区别。

5、对操作的响应:反馈(3.6)手势(3.8)撤销(3.10)登录(3.3)输入(3.4)拖放(3.5)查看(3.7)


让用户自然地识别出产品的功能,避免让用户艰难回忆规范中的反馈中主要是对触觉的反馈,由于在移动端是使用H5,这个反馈和原生应用是不一样的。


举例子内容是您的最高优先级,最高优先级的内容是“我在哪里上传了什么文件”,每个列表的按钮指向同一个共享,和共享更新是重复的。

举例子:场景1:我将云盘放在浏览器收藏夹(添加收藏时是未登录状态),以后每天打开收藏夹都需要登录,点击30天内免登陆也不行。场景2:现在盲打不熟练,几乎每次都会输错密码,每次登录都必须点击登录按钮才会验证。这种都是自己在登录的时候遇到的特殊场景。
尽可能延迟登录。人们在被迫登录时往往会放弃应用程序,然后再做任何有用的事情。动态验证字段值。在输入后立即检查字段值,以便用户可以立即纠正它们。

二、规范类
6、控件规范总结


加载清楚何时加载正在发生    尽快显示内容    掩盖加载时间
模态(对话框)最大限度地减少模态的使用    保持模态任务简单,简短    提供更全面描述任务或提供指导的文本    不要在弹出窗口上方显示弹框导航始终提供一个清晰的路径    信息结构,可以快速,方便地获得内容 使用标准导航组件     有分段控件(tab标签)和工具栏时尽量不要用导航


通知提供有价值的信息通知    不要同一件事情发送多个通知    当通知预览被隐藏时,提供描述性文字以供显示提示,设备正在使用时出现在屏幕顶部几秒钟,然后消失。警告,出现在设备正在使用的屏幕的顶部,并保持在那里,直到手动解散。


Siri高效 快速响应并尽量减少交互    直接带人到内容    Siri中显示时,界面无法响应手势    定义人们可能在请求中实际使用的特定术语导航栏标题可以帮助人们了解他们在看什么    一般来说,导航栏应该只包含视图的当前标题,后退按钮和一个管理视图内容的控件    标准的后退按钮可以让他们通过信息层次来追溯步骤    后退按钮总是执行 – 返回到前一个屏幕    给文本标题按钮足够的空间


搜索栏使用搜索栏而不是文本字段来实现搜索,文本字段没有人们期望的标准搜索栏外观。启用清除按钮,大多数搜索栏包含一个清除按钮,删除该字段的内容。多数专用搜索栏包含一个立即终止搜索的“取消”按钮考虑在搜索栏下方提供有用的快捷方式和其他内容


状态栏避免永久隐藏状态栏    使用状态栏来表示网络活动


Tab标签栏平整您的信息层次结构,并提供一次访问多个同行信息类别或模式。避免有太多的标签    使用情况提供了一系列预定义的图标


工具栏当你有三个按钮或更少的时候,文本有时可以更清晰。避免在工具栏中使用tab标签控件。


操作表 -底部弹框提供一个取消按钮。对执行破坏性或危险操作的按钮使用红色避免在动作表中启用滚动。人们必须滚动才能看到所有的选择,滚动需要额外的时间来作出选择,很难做到,而不会无意中点击一个按钮。


警告最小化警报。警报会破坏用户体验,只能用于确认购买和破坏性行为(如删除)或通知人们有关问题的重要情况。写简短的,描述性的多字报警标题。屏幕上阅读的文字越少越好。避免听起来指责,判断或侮辱。避免解释警报按钮。双键警报提供了两种选择之间的简单选择。给警报按钮简洁,逻辑的标题。最好的按钮标题由描述选择按钮的结果的一个或两个词组成。允许人们通过退出到主屏幕取消提醒。


进度控制器当使用页面视图控制器时,页面按顺序流动,无法在不加入页面之间跳转。


局部弹出窗口popover的箭头应该尽可能直接指向显示它的元素。永远不要显示出一个层叠或层次结构,其中一个从另一个出现。


表格iOS实现了两种风格的表格,普通表格和分组表格。考虑表格宽度, 显示内容之前不要等待大量的表格内容加载。如果表格的数据需要花费时间加载,请显示进度条或旋转活动指示符,保持文本简洁    在进行选择时提供反馈。

文本视图保持文字清晰。iOS提供了几种不同的键盘类型,每种键盘类型都被设计为便于不同类型的输入 

按钮按钮文字使用动词过长的文本可能会挤占您的界面,并可能在较小的屏幕上被截断。考虑只在必要时添加边框或背景,默认情况下,系统按钮没有边框或背景。
详细信息披露按钮在表格行中存在详细信息披露按钮时,点击该按钮可显示其他信息。
长按编辑菜单为当前上下文显示适当的命令,菜单不应显示需要选择的选项菜单位于插入点或选择的上方或下方,具体取决于可用空间,不要使用与编辑菜单相同的功能来实现其他控件,提供多种方式来启动操作会导致不一致的用户体验,
翻页页面控件不显示页面如何指示哪个页面。页面控件应始终居中并位于内容底部和屏幕底部之间。
选择器使用可预测的和逻辑上有序的值。长列表可能是繁琐的导航选择器
进度不要让人们盯着等待您的应用程序加载内容或执行冗长的数据处理操作的静态屏幕。始终准确地报告进度。进度条非常适合显示任务的状态,特别是当它帮助传达任务需要完成的时间。
刷新尽管人们喜欢能够立即触发内容刷新,但他们也期望定期进行自动刷新。不要让用户负责启动每个更新。
滑块用手指滑动以在最小值和最大值之间移动
开关更改开关状态的开关状态或使用自定义图像来表示开关。开关只能在用于表格,例如在可以打开和关闭的设置列表中。如果您需要工具栏或导航栏中的类似功能,请改为使用按钮,并提供两个不同的图标来传达这些状态。
文本框占位符文本充足时,不要使用单独的标签来描述文本字段适当时在文本字段的右端显示一个清除按钮
自定义键盘提供一个显而易见的方法来切换键盘。

分类: 体验报告

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据