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

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

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

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

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

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

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

iOS主屏幕使用圆点(页面控制)指明current view,还有其他view页面的数量。这是圆点使用┍中认可度最高、也最为常见的案例之一,也是其中少数运行良好的案例之一,因为用户★了解:有多个充斥着杂七杂八icon的①页面,只管一页页扫过去,找到想要的aζpp就行了。(整体定位icon的用户体验并§不理想,但页面圆点不算问题。)一些App与网站‥使用这个界面元素来表明内容页可滑动,还有一些将它用在页面上,表示content可以水平滚动(carousel)。在移动web与应用中,这是一个流行的设▓计方式,但用户也经常会忽视掉那个圆点。在可用性测试中,这些圆点在整个界面中太不起眼,无法明确┌指示出还有其他可用的c↖ontent view。因此,不应使用在像是功能导航之类的关键功能上,或作为访问信息的唯一方式。

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

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

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

&

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

Android版的“F←ab” App借用了iлOS的圆Ⅰ点,但将它们放在了轮播元素的右侧,而不是放在中间。

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

作为替代,我们推荐:

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处: 四种应该打破的iOS设计规则