结构设计终端插件,有很多事须要考量。责任编辑归纳了许多能应用领域于结构设计的新颖提议,供大家一同参照和自学。
插件之间的优劣差别一般来说是其采用者新体验(UX)的产品质量。现如今,终端采用者对插件打入冷宫:读取时间短,更易采用且在可视化过程中备感畅快。
如果要使插件获得成功,则UX必须是商品思路的关键重要组成部分。
一、最优化采用者知觉损耗
知觉损耗是指采用该应用领域所需的忍耐力。大脑的处置潜能十分有限,当插件一次提供更多太多关键信息时,可能会使采用者惊慌失措,进而使她们舍弃各项任务。
1. 去除杂乱
消解杂乱是“ 终端UX结构设计的五大准则 ”中的主要提议众所周知。网页杂乱是杰出结构设计的最大敌方众所周知,杂乱的网页会给采用者增加过多的关键信息:每一加进的按键,影像和工具栏单厢使萤幕更为繁杂。
网页杂乱在PC端上十分差劲,但在终端电子设备上则更为差劲(这原因是我们在终端电子设备上的内部空间远没有PC端那么多)。在终端结构设计中除去任何人无谓的东西是很关键的,因为增加杂乱会提高理解能力。
1)Becoming主义者能协助你处置杂乱的UI问题:
尽量避免文本(仅向采用者提供更多她们须要知道的文本)尽量避免介面原素,单纯的结构设计将使采用者放心采用该商品(简约的条码栏(右)比杂乱的条码栏(左)快得多)
2)采用渐进式呈现出技术显示更多快捷键
2. 增加重复性各项任务
在结构设计中寻找须要采用者努力的任何人事物(这可能是输入数据,做出决定等),并寻找替代方法。
例如,在某些情况下,你能重复采用以前输入的数据,而无谓求采用者键入更多数据,或采用已有的关键信息来设置智能默认值。
3. 将各项任务分解为小各项任务
如果各项任务须要采用者执行大量的步骤和操作,则最好将此类各项任务划分为多个子各项任务。该准则在终端结构设计中十分关键,因为你不想一次为采用者带来太多繁杂性。
一个很好的例子是电子商务插件中的分步付款流程,其中结构设计人员将繁杂的结帐各项任务分解成若干个小各项任务,让采用者完成每一小各项任务。
不同的小各项任务还能协助连接两个不同的活动(例如浏览和购买)。当一个流程被表示为逻辑上相互连接的多个步骤时,采用者能更轻松地进行操作。
(查找电影并购买电影院门票)
4. 采用熟悉的萤幕
熟悉的萤幕是指采用者在许多插件中单厢看到的萤幕。“入门”,“新功能”和“搜索结果”等萤幕已成为终端插件的实际标准。它们不须要额外的解释,因为采用者已经很熟悉它们。这使采用者能采用以前的经验与该应用领域进行可视化,而无需自学。
(Quora插件中的采用者个人资料萤幕)
5. 最优化采用者输入
在小巧的手机萤幕上打字不是最舒适的新体验。实际上,它经常容易出错。采用者输入的最常见情况是填写表格。以下是一些新颖的提议,可简化此过程:
1)删除任何人无谓的字段,使表格尽可能短
(表单结构设计的经验法则是,越短越好。将多个字段合并为一个更易填充的字段)
2)提供更多输入原型
字段原型是一种协助采用者格式化输入文本的技术。一旦采用者将注意力集中在某个字段上,就会出现一个须要输入的格式,该原型会在填写该字段时自动设置文本格式,进而协助采用者专注于所需的数据并更容易地注意到错误。
3)采用自动填写等智能功能
例如,填写地址字段一般来说是任何人注册表单中最有问题的部分。采用“ 自动填写地址”工具,使采用者能够以比常规输入字段更少的击键次数输入她们正确的地址。
4)动态验证字段值
在提交数据后,当你不得不返回并更正错误时,这很令人沮丧。尽可能在输入后立即检查字段值,以便采用者立即进行更正。
(内联验证)
5)为填写字段的类型自定义键盘
询问电话号码时显示数字键盘,询问电子邮件地址时显示@按键。确保该特性在整个插件中得到一致的实现,而不是只针对某些表单。
(使键盘与所需的文本输入匹配)
5. 预测采用者的需求
主动寻找采用者采用中可能须要协助的步骤。例如,下面的萤幕快照显示了采用者须要提供更多特定关键信息的部分。
(输入字段旁边的简明协助文本将协助采用者找到条形码的关键信息)
6. 利用视觉权重来表示关键性
萤幕上最关键的原素应该具有最大的视觉权重。通过字体的粗细、大小和颜色,能roid或 iOS 构建插件时,不要从其他平台移植UI原素。
工具栏,功能原素(输入字段,复选框,开关)和字体应具有原生感,尽可能多地采用自己的组件,这样人们才会信任你的应用领域。
1)使终端插件与网站保持一致
这是外部一致性的一个例子。如果你具有Web服务和终端插件,请确保它们都具有相似的特征。这将使得采用者在终端插件和web之间进行平滑的过渡。结构设计不一致(例如,不同的导航方案或不同的配色方案)可能会引起混乱
二、让采用者来控制
1. 保持可视化原素熟悉且可预测
可预测性是采用者新体验结构设计的基本准则。当事按照采用者预期的方式运行时,她们会有一种更强的控制感。与PC不同,在PC上,采用者能采用悬停效果来了解事物是否是可视化式的,而在终端电子设备上,采用者只能通过点击某个原素来检查可视化性。这就是为什么,对于按键和其他可视化原素,必须考量结构设计如何传达可视性。
2. “返回”按键应正常工作
创建不正确的“返回”按键会给采用者带来很多问题。防止在一个多步骤的过程中点击“返回”按键把采用者带回到主萤幕。
好的结构设计能使采用者更轻松地返回并进行修改。当采用者知道能再次查看她们提供更多的数据或选择的快捷键时,这使她们能轻松地继续。
3. 有意义的错误提示
人非圣贤孰能。人们与应用领域互动时会发生错误。有时,它们的发生原因是采用者犯了一个错误。有时,它们的发生原因是插件失败。无论是什么原因,这些错误及其处置方式单厢对UX产生巨大影响。不当的处理错误消息加上无用的错误关键信息会让采用者感到沮丧,这可能是采用者舍弃插件的原因。
以Spotify中的错误状态为例。它不能协助采用者理解上下文,也不能协助她们找到“我能做什么?”这个问题的答案。
(萤幕仅显示“发生错误”,并未提供更多有关解决问题的任何人建设性提议)
不要假设采用者有足够的技术知识来解决问题。总是用直白的语言告诉别人哪里不对。每一错误消息应该告诉采用者:
哪里出错了,为什么?采用者应该采取什么措施来修复错误?三、结构设计无障碍的介面
无障碍结构设计使所有潜能的采用者都能获得成功采用商品。考量有视力障碍,听力障碍和其他残疾的采用者如何与你的应用领域互动。
1. 注意色盲人群
全球人口中有4.5%患有色盲(每12名男性中有1名,每200名女性中有1名),有4%的人视力低下(每30人中有1人),有0.6%的人是盲人(每188人中有1人)。很容易忘记我们是为这类采用者结构设计的,因为大多数结构设计师都不会遇到此类问题。
举一个单纯的例子。终端端表单的获得成功和错误消息一般来说分别以绿色和红色显示,但是红色和绿色是受色觉不足影响最大的颜色。填写表格时,你很可能已经看到以下错误消息:“红色字段为必填项”?虽然这看起来似乎不是一件大事,但此错误消息与以下示例中的表格相结合,对于色觉不足的人来说可能是极其令人沮丧的新体验。
(色盲采用者无法区分以红色突出显示的字段)
正如 W3C的指导准则所指出的那样,颜色不应该用作传达关键信息,指示操作,提示响应或区分视觉原素的唯一视觉手段。采用其他视觉指示符以确保采用者能够与介面进行可视化十分关键。
(采用工具栏和条码显示哪些字段无效能更好地将关键信息传达给色盲采用者)
2. 将动画设为可选
晕车的采用者一般来说会在其OS设置中关闭动画效果。在辅助功能偏好设置中启用增加动作快捷键后,你的应用领域应最优化或消解其自己的动画。
四、简化导航
每一插件都应优先考量协助采用者采用导航。如果人们找不到它们,则插件具有的所有出色功能和引人入胜的文本都将无关紧要;同样,如果花太多时间或精力去发现如何采用你的商品,你很可能会失去采用者。
采用者应该能够直观地探索该插件,并且无需任何人解释即可完成所有主要各项任务。
1. 采用标准导航组件
最好采用标准的导航模式,例如条码栏(对于iOS)和抽屉式导航栏(对于Android)。大多数采用者都熟悉两种导航模式,并且会直观地知道如何采用你的插件。
(侧抽屉(Android))
(条码栏(iOS))
2. 优先考量导航快捷键
根据采用者与你的应用领域互动的方式确定导航的优先级。为常见的采用者各项任务分配不同的优先级(高,中,低)。在UI中突出显示具有高优先级和频繁采用的路径和目的地。采用这些路径定义导航。以一种须要最少数量的单击、滑动和屏幕来组织你的关键信息结构。
3. 不要混杂导航模式
当你为你的应用领域选择一个主要的导航模式时,要始终如一地采用它。不应该有这样的情况,你的插件的一部分有一个条码栏,而另一部分有一个抽屉式导航栏。
4. 导航可见
正如雅各布·尼尔森所说,认识某件事比记住它容易。通过使操作和快捷键可见来最优化采用者的采用负担。导航应该在任何人时候都可用,而不仅仅是在我们预期采用者须要它的时候才可用。
5. 明确当前位置
在许多终端插件菜单中,不指明当前位置是一个十分常见的问题。人们随时都应该知道她们在插件中的位置。
(Health data被突出显示和Activity在布局的顶部可见)
6. 采用功能性动画阐明导航的转换
动画是描述状态转换的最佳工具。它能协助采用者了解网页布局中的状态更改,触发更改的原因以及在须要时如何再次发起更改。
(繁杂的过渡更易理解)
7. 在UI中小心采用手势
在可视化结构设计中采用手势可能很诱人,但是在大多数情况下,最好避免这种诱惑。当手势用作主要导航快捷键时,它们会导致差劲的UX。为什么?因为手势是隐藏的控件。
正如托马斯·约斯指出的在采用者介面中采用手势的最大缺点是自学曲线。每次将可见控件替换为手势时,插件的自学曲线就会上升。发生这种情况原因是手势的可发现性较低——它们始终是隐藏的,并且人们须要能够识别这些快捷键才能采用它们,这就是为什么仅采用广泛接受的手势的原因。
在UI中采用手势时,请遵循一些单纯的规则:
1)采用标准手势
“标准”是指你所在类别中最适合应用领域的手势。人们熟悉标准手势,因此无需额外的努力即可发现或记住它们。
2)提供更多手势作为可见导航快捷键的补充,而不是替代
手势能用作导航的快捷方式,但不能完全替代可见菜单。因此,即使这意味着一些额外的操作,也始终提供更多一种单纯可见的导航方式。
责任编辑作者:Nick Babich
原文地址:
https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/责任编辑由 @Kris 翻译发布于人人都是商品经理。未经许可,禁止转载。
题图来自Unsplash,基于CC0协议
