订阅移动开发RSS CSDN首页> 移动开发

四种应该打破的iOS设计规则

发表于2015-07-31 11:23| 次阅读| 来源Nielsen Norman Group| 0 条评论| 作者AURORA BEDFORD, RALUCA BUDIU, KARA PERNICE, and AM

摘要:本文作者直指苹果《iOS人机界面指导手册》中的设计在测试中可能会造成可用性问题的pattern,结合实际应用案例总结出页面控制、顶部的表格提交按钮、加号(+)图标、Move icon这四种应该比打破的iOS设计规则。

CSDN移动将持续为您优选移动开发的精华内容,共同探讨移动开发的技术热点话题,涵盖移动应用、开发工具、移动游戏及引擎、智能硬件、物联网等方方面面。如果您想投稿、参与内容翻译工作,或寻求近匠报道,请发送邮件至tangxy#csdn.net(请把#改成@)。 


大的软件公司,比如苹果、微软和谷歌都为用户和设计师发布了设计指导手册。一方面,设计与开发人员可以提前建造界面,而无需创造(与测试)全新的UI元素。另一方面,在所有设计人员都遵守这些指南的情况下,同一个OS系统上所运行的不同程序会带给用户一致性的观感。

在本文中所列的风格设定都是被频繁推荐的。但有些情况下,“官方”设计在实践中表现欠佳。尽管如此,出于未知原因——也许只是权衡利弊,并未深入研究,或许推荐的pattern对一个很有难度的设计挑战来说,似乎算是最好的解决办法了——这个pattern仍被列入风格设定中。

下面这四种常见的iOS pattern都是苹果官方在其设计的App中所广泛采用的,同时也受到很多其他设计师的追捧。其中一些摘自《iOS人机界面指导手册》(HIG,iOS Human Interface Guidelines)一书。我们一次次看到这些设计所造成的可用性问题,冒着被苹果大神劈的危险,在此声明:不推荐下面这些模式,因为它们没能通过可用性测试:

  • 页面控制(Page Control):标明页面的圆点(Dot)
  • 顶部的表格提交按钮(Submit button)
  • 加号(+)图标
  • Move icon

页面控制:标明页面的圆点

很多iOS用户都很熟悉页面控制。iOS页面控制是一行水平排列的圆点,代表打开view或页面。当前选中的页面以不透明的圆点表示,而其他页面以透明圆点表示。


iOS主屏幕使用圆点(页面控制)指明current view,还有其他view页面的数量。这是圆点使用中认可度最高、也最为常见的案例之一,也是其中少数运行良好的案例之一,因为用户了解:有多个充斥着杂七杂八icon的页面,只管一页页扫过去,找到想要的app就行了。(整体定位icon的用户体验并不理想,但页面圆点不算问题。)

一些App与网站使用这个界面元素来表明内容页可滑动,还有一些将它用在页面上,表示content可以水平滚动(carousel)。在移动web与应用中,这是一个流行的设计方式,但用户也经常会忽视掉那个圆点。在可用性测试中,这些圆点在整个界面中太不起眼,无法明确指示出还有其他可用的content view。因此,不应使用在像是功能导航之类的关键功能上,或作为访问信息的唯一方式。


在这款iOS App “Stock Market HD:Stocks and Shares”中,在“Watchlist”、“Wishlist”、“Sold”和“My Holding”这些views之间切换的唯一明显方式就是:发现页面底部的圆点,然后通过滑动来探索额外的功能。

虽然设计与开发人员可以选择使用什么颜色的圈圈,想要设计出一个精致而醒目的半透明小圆点十分困难。很多设计在花哨的图片上也使用了这些圆点,导致这个本来就很细小的设计元素进一步融进背景中。如果用到圆点,为了帮助用户注意到它们,可以加强圆点与背景之间的色彩对比,或将圆点尽可能放在纯色背景上。


“Zappos”这款iOS App在页面的上半部分运用了圆点来标明有多个content view。在第一张图中,圆点在以鞋子为背景的图片上依稀可见,而在第二张图中,完全与背景中的椅子融为一体。

一些网站与App甚至打破了现有的iOS惯例,使用正方形、其他形状或者在页面四周随意挪动圆点。即便遵循iOS指南中的设计惯例来使用这些圆点,用户想要找到它们也十分困难。背离标准改变这些元素的话,只会更难识别或理解。如果使用圆点,将它们置于控制元素的底部中间。


Android版的“Fab” App借用了iOS的圆点,但将它们放在了轮播元素的右侧,而不是放在中间。

即使用户确实注意到圆点,还有一个重要的可用性问题。圆点仅允许顺序读取,并未指出页面的内容。无论圆点指示的是轮播元素(carousel),还是单独的页面,都有同样的可用性问题。尤其是以轮播元素代表页面,限制了用户的控制体验。用户无法知道下面会有什么,也没办法直接切换到感兴趣的页面。

作为替代,我们推荐:

  • 想一下,甚至可以通过滑动来访问内容。可以通过导航或文本链接访问的话,体验更佳。
  • 将内容截出一块(文本或图片),以便给用户直观的视觉提示,用户可通过滑动显示更多的信息。


iOS App Store没有使用圆点,而是使用要素切片为用户展示导航carousel是可移动的。

0
0