移动界面设计的10个原则

无论你如何测量它,移动都是巨大的并且在不断增长。云计算,无处不在的宽带和价格合理的移动设备的融合已经开始改变我们社会的方方面面。分析师预测,到2015年,手机将超越台式电脑,成为我们访问互联网的主要手段。

为了跟上这个快速变化的环境,设计师和开发人员 - 以及与他们合作的人 - 需要开始考虑将移动作为主要的项目目标;作为事后的想法,并没有把一些东西加到以桌面为中心的项目上。

手机不同

虽然它们经常被集中在一起作为计算设备,但智能手机和台式电脑却截然不同:小屏幕与大屏幕,间歇性与可靠连接,低带宽与高带宽,电池供电与插入等等。鉴于此列表,人们可能会想到将移动设备视为“真实”计算机的动力不足版本。但这是一个错误。

事实上,情况恰恰相反:智能手机在很多方面实际上比台式机更强大。他们非常个人化,永远在线,与我们在一起,通常是连接的,可以直接寻址。此外,他们还使用功能强大的传感器进行爬行,这些传感器可以检测位置,移动,加速度,方向,接近度,环境条件等。

鉴于移动和桌面计算设备之间存在许多差异,因此设计移动设备与为桌面设计设计有很大不同。在我的研讨会上,我编制了10个移动界面设计原则列表,帮助熟悉桌面设计和开发的人们释放出移动平台的独特功能。

01.移动心态

由于移动设备和桌面设备之间存在差异,因此在开始之前必须让自己融入移动思维模式。

  • 专心:更多并不是更好。无情地编辑你的功能。您不得不把东西留下来。

The Wenger Giant proves that more is not necessarily better

温格巨人证明更多不一定更好
  • 独一无二:了解是什么让你的应用程序与众不同并放大它。移动应用程序的海洋中有很多鱼。如果您的应用没有什么特别之处,为什么有人会选择它?
  • 妩媚动人:移动设备非常个性化。他们是我们不变的伙伴。友好,可靠和有趣的应用程序是一种使用的乐趣,人们将会非常依赖这种体验。
  • 体贴:应用程序开发人员经常关注开发的乐趣,他们自己的应用程序的心理模型或他们的个人业务目标。这些都是很好的起点,但如果您希望创造一种引人入胜的体验,那么您必须将自己置身于用户之中。

02.移动环境

繁忙的专业人士通过一个手提包和另一方面的智能手机在机场赛车的形象是许多人在考虑移动计算环境时的画面。它肯定是一个背景,但它不是唯一的背景。为了开始让用户自己,我们需要考虑三个主要的移动环境:无聊,忙碌和迷失。

  • 无聊:有很多人在家里的沙发上使用智能手机。在这种情况下,面向更长使用时间的沉浸式和令人愉快的体验非常适合。尽管如此,中断的可能性非常高,因此请确保您的应用可以在您的用户离开的地方继续。示例:Facebook,Twitter,愤怒的小鸟,网络浏览器。
  • :这是“机场跑步”的情景。在繁忙的环境中单手快速可靠地完成微任务的能力至关重要。请记住,在这种情况下,用户将拥有隧道视野,因此巨大的目标和大胆的设计非常重要。示例:TripIt,电子邮件,日历,银行业务。
  • 丢失:在过境,不熟悉的环境或熟悉的环境中但对未知事物感兴趣的用户属于丢失的类别。在这种情况下,粗略的连接性和电池寿命是很大的问题,因此您应该提供一定程度的离线支持,并且不遗余力地使用地理定位和其他电池供电。典型示例:地图,Yelp,Foursquare。

03.全球准则

不同的应用需要不同的方法,设计和技术。也就是说,口袋大小的触摸屏设备的固有特性提出了几个全球指导方针;即,总是重要的东西。

  • 响应:响应能力绝对至关重要。我不能强调这一点。如果您的用户执行某项操作,您的应用需要立即确认交互。请注意,响应速度和速度不是一回事。如果某些操作需要时间,则可以。只需确保让用户知道您正在处理它。
  • 抛光:波兰人非常有价值。由于我们与智能手机的关系具有“恒定的伴侣”特性,因此需要注意细节以获得完美的小细节。我认为这就像汽车的“适合和完成”。发动机可能很强大,车身风格华丽,但如果高速公路上有很多道路噪音或嘎嘎声,那么通勤者的体验就会开始降低。
  • 大拇指:随着触摸屏界面的出现,每个人都在谈论'手指这个'和'手指'。实际上,拇指是我们需要设计的。除非用户用双手与她的智能手机进行交互,否则几乎不可能在屏幕上触摸手指。即使是双手抓握,她也可能用两个拇指打字。拇指是默认值。
  • 目标:看看你的右手拇指。不是小费,而是面部 - 与手机屏幕接触的部分。我的是瓶盖的大致尺寸和形状。非常适合很多事情,但在针对智能手机的微小区域时,还远非精确。拇指友好的UI元素的神奇数字似乎是44像素。例外比比皆是,但这是一个好的 - 咳嗽 - 经验法则。您还应该意识到目标相对于彼此的位置。例如,将Backspace按钮直接放在SMS应用程序中的Send按钮旁边是个坏主意。
  • 内容:触摸界面的革命在于它们使我们能够直接与我们的内容进行交互。这将删除抽象(如鼠标和触控板),更符合我们的大脑连线方式。我不必远远看到它的重要性:我两岁的孩子可以毫无困难地操作iPad,但笔记本电脑对他来说是一个谜。通过尽可能减少界面镶边(按钮,标签栏,复选框,滑块等)并将内容放在前面和中心,充分利用触摸UI的直观功能。

Clear for iOS is a to-do list app that has no chrome at all; it’s pure content

清除iOS是一个根本没有铬的待办事项列表应用程序;这是纯粹的内容
  • 控制:当您必须添加控件时,请尝试将它们放在屏幕的底部(换句话说,在内容下方)。想象一下添加机器,浴室秤甚至是电脑 - 控制器位于显示器下方。如果不是,我们将无法看到内容在使用时发生了什么。与传统的网络或桌面软件相比,这种真实的设计考虑因素,导航和菜单栏几乎总是在顶端。这在鼠标上下文中是有意义的,因为指针几乎不可见。手臂末端的“肉指针”并非如此。
  • 滚动:避免滚动。我可以向你保证,移动设备存在“低于首屏”。此外,具有非滚动屏幕具有比滚动视图更稳固和可靠的“感觉”,因为它更可预测。当然,某些屏幕必须滚动,但最好尽可能避免它。如果您认为可发现性可能是一个问题,您可以将可滚动内容的动画反转到其默认位置,以提供一个微妙但有效的指示,即视图中有更多内容。

04.导航模型

有许多新颖的移动应用程序导航模型(Path的径向角落导航泉水),但如果您要使用常见的导航模型之一,请务必选择最适合您的应用程序的导航模型。

  • 无:单屏应用程序应用程序(例如iPhone上的Weather应用程序)
  • 标签栏:三到六个不同的内容区域(例如iPhone的Twitter)
  • 向下钻取:列表和详细内容层次结构(例如iPhone上的设置应用程序)

05.用户输入

即使在最好的设备上打字也会发臭,所以你应该尽你所能让用户更轻松。例如:

  • 流行的智能手机上有十几种键盘变体(文本,数字,电子邮件,URL等)。考虑每个输入字段,并确保显示对正在完成的数据输入最有用的键盘。
  • 自动纠正可能会非常令人沮丧,因为有一个致力于它的网站。考虑每个输入字段并确定应启用哪些自动输入选项(例如自动更正,自动大写和自动完成)。
  • 如果你的应用程序邀请大量打字,你应该确保你支持像我这样的胖子一样的横向风格。

A sample of the various keyboards available on iOS

IOS上提供的各种键盘示例

06.手势

现代触摸界面最具代表性的方面之一是它们支持基于手势的用户交互。和手势一样酷,你需要记住几件事:

  • 无形:手势是看不见的,所以发现是一个问题。你必须决定如何向用户透露它们的存在。我见过的最聪明的方法是安装在Apple零售店的促销iPad上。当页面首次加载时,任何可滚动区域都会快速“反向滚动”到其默认位置。这立即邀请来自用户的轻扫或轻弹手势,而不必明确指示哪些区域是可滚动的。
  • 两只手:多点触控手势需要双手操作。我发现这在iOS上的原生地图应用程序中特别明显,该应用程序使用捏合打开手势来缩小。当我在一个外国城市旅行,一手咖啡而另一手咖啡,这是一个恼人的限制。 Android通过在地图上叠加放大/缩小按钮来解决这个问题(这意味着您可以在伦敦周围晃动咖啡时继续享用咖啡)。
  • 很高兴有:在大多数情况下,我认为手势“很好”但不重要。有点像键盘快捷键 - 高级用户会喜欢它们,但大多数人甚至不知道他们在那里。
  • 没有替代品:手势的常用词汇表尚不存在,因此大多数应用程序跳过可以单指使用的可见控件还为时过早。

07.迎新

  • 肖像是迄今为止最受欢迎的方向,因此首先针对此案例进行优化。
  • 如果您的应用程序邀请大量输入,您应该支持横向方向,以便人们可以访问更大的键盘。
  • 当方向意外地改变时,它就会......迷失方向。如果您认为您的应用会长时间使用(例如,Kindle阅读器应用),请考虑在应用中添加方向锁定。

08.通讯

  • 提供反馈意见:为每次互动提供即时反馈。如果你不这样做,用户会想知道应用程序是否已冻结,或者他们是否错过了他们试图击中的目标。反馈可以是触觉的(如Android'砰砰声'振动),也可以是视觉效果(例如突出显示敲击按钮)。如果用户请求了需要很长时间的操作,请显示微调器或进度条,让他们知道您收到了他们的请求并正在处理它。
  • 模态警报:模态警报对用户的流量非常有冲击力,因此只有在出现严重错误时才应使用它们。即使这样,也要通过保持语言安心和友好来减轻强度。切记不要对“FYI”类型信息使用模态警报。
  • 确认:当您必须要求用户确认操作时,可以显示模态确认对话框(例如“您确定要删除此草稿吗?”)。确认比警报更少侵入,因为它们响应用户操作,因此在上下文中甚至可能是预期的。务必将“最安全”选项作为对话框中的默认按钮,以帮助避免无意中的破坏性操作。

The Twitter app for iOS has a completely content-free launch page

适用于iOS的Twitter应用程序具有完全无内容的启动页面

09.发射

当用户在使用之前返回您的应用程序时,您应该在用户停止的位置恢复操作。这将给出速度的幻觉,并有助于整体感受到响应。

如果可能,您首次加载应用时显示的启动屏幕应该是应用内容的“无内容”图片。任何看起来具有交互性的东西(例如按钮,链接,图标,内容)都会通过邀请失败的互动来制造挫败感。

注意:抵制在您的启动屏幕上放置品牌材料的诱惑。它们让用户感觉好像在看广告,他们会因为让他们坐在那里而怨恨你。当然,品牌发布屏幕的持续时间不会长于空屏幕,但无论如何都存在延迟感。

10.第一印象

  • 你的偶像:你的图标必须在其他图标的海洋中争夺注意力。在这种情况下,将其视为名片而不是艺术品。字面意思 - 显示您的应用程序的功能。使用强大的轮廓并将文本保持在最低限度。一个抛光的图标表明一个优秀的应用程序,所以值得投入大量的时间和金钱去做正确的事情。
  • 首次发布:首次发布是成败的情况。如果新用户在尝试熟悉您的应用时感到困惑或沮丧,他们会尽快放弃。如果您的应用提供了复杂的功能,您可能需要包含“提示和技巧”叠加层,或者可能包含几个方向屏幕面板。请注意,这是取代好的设计;如果您发现自己创建了大量帮助文本,则可能表明您的UI需要工作。

结论

移动计算为希望在移动设备上提高工作效率的网页设计人员和开发人员提供了一个惊人的机会。是的,有一点学习曲线,但很多网络专业人员的遗留经验,技能和工具都会很好地转化。不可否认,移动世界的变化速度有时令人畏惧 - 但是嘿......至少它永远不会无聊。

喜欢这个?阅读这些!



翻译字数超限