20130305早读课:iOS用户界面的新视觉比例

标签: 交互体验 产品设计 | 发表时间:2013-03-05 07:15 | 作者:reynold
出处:http://reynold.cn

推荐理由:译者@OpzoonUED 。原作者 Aen是一名移动产品设计师,他通过比较iOS系统原生与非原生应用的细微区别,以44像素最小点击尺寸缺陷为切入点,阐述iOS用户界面的新视觉比例。

grid

 

“在很多方面上,44像素块是iPhone界面的基本测量单元,决定着许多iPhone应用的视觉节奏。想要让某个可点击对象(像按钮或列表项)更方便可靠地被点击到,推荐其作为最小尺寸测量标准是很有意义的。”

以上引文是从Josh Clark的书《Tapworthy》中摘录的,这是一本iPhone UI设计的权威书籍。苹果的移动HIG(人机界面指南)中建议将44 X 44像素作为让可点击UI元素用着舒服的最小尺寸。大多数应用,包括几乎所有原生应用都遵循该44像素的节奏。大家都很高兴,所以会有什么问题呢?

由于从去年开始就进行iPhone应用界面设计,我已经深深感受到了原生应用和非原生应用的细微区别。作为一名擅长印刷品设计,且拥有敏锐排版感觉的设计师,我不禁注意到了44像素节奏的缺陷和不完善的地方。

          baselinegrid

基线网格(Baseline Grid)

苹果使用这种节奏的目的在于清晰地展示出一个固定的垂直间隔,就像基线网格(Baseline Grid)——一种在印刷品设计中非常常见的技术一样。使用基线网格的目的是为文字对齐提供主要骨干结构。这通常等同于主体内容文字的铅线(leading)和其他文字的铅线,例如,标题和块引用通常就是从多种基线网格中派生出来的。这给与文字布局一种稳定的视觉构图。使用44像素的问题在于它很难算做一种有效的节奏。

首先让我们更近一步地看看44像素节奏。例如,在一个由分组表格组成的界面上,这种节奏被进一步细分为四个区间,每个区间11个像素。(这些区间)为每个段落的头部(11像素)和每个分组表格(22像素)提供了空白间距。因此我们可以说iPhone屏幕布局遵循最大44像素,最小11像素的节奏。这两种节奏组成了视觉构图的基础。

        4411

基线网格(Baseline Grid)

 iPhone的屏幕有效尺寸是竖排方向上宽320 X 高460像素(如果是视网膜屏就是点数),不包括状态栏。如果你用460除以44,余数是20,除以11余数是9,460不能被11或44整除。(因此)垂直节奏就被打乱了。

460-44

44像素节奏

并不是只有我抱怨这事儿。除了一个结构粗糙的基线网格,作为让步,人们还到处使用许多其他任意布局值(译者注:就是间隔像素不按11/44的倍数计算),来克服不稳定的垂直节奏问题。

20像素状态栏

statusbar

iPhone和iPad的状态栏都是20像素高,意味着它也不遵循“垂直节奏”。点击状态栏,屏幕会回滚到顶部。在IOS 5系统中向下拉动它会显示通知中心。这是一个非常小的点击区域。我认为操作系统采用了一些聪明的算法来降低误差幅度,让其更易点击。这太虚伪了,一方面苹果主张44像素作为最小点击区域,但还告诉我们某个需要足够复杂操作的元素仅20个像素就够了。

29像素按钮

30pxbuttons

导航条、工具条和表格单元格中的按钮都是29像素高,所以太不符合垂直节奏了。尽管它们表面上有29个像素高,它们的有效点击高度实际上超出了顶部和底部边缘,达到了大约44个像素(高)。像Safari工具条那样的朴素风格按钮没有边框,所以它们不会说谎,我们可以察觉到它们更容易点击。

49像素选项卡(Tab Bar)

tabbar1

选项卡是由文字标签+上方图标组成的,需要额外高度放置它们。49个像素高加上黑颜色,和恶心的喇叭裤一样。怪不得Tweetie在成为Twitter前已经放弃了原生的选项卡。这也不符合44像素垂直节奏。

74像素带有提示信息的导航条

prompt

带有提示信息的导航条

如果打开了导航条上的提示信息,(导航条)就会变成74像素高,同样,这不符合垂直节奏。所以你看到,当苹果在增加越来越多的功能时,并没有重新考虑布局(情况),伴随着妥协和随意性,它几乎没能把握住视觉上的整体感。(苹果)正变得零散不堪,且看起来接近于Android了。我认为苹果是时候该重新考虑IOS用户界面的视觉比例了,并返回用户需要的和谐的比例。

4像素节奏单元

我最近尝试用另一种方法为iPhone版的Likables设计UI——采用4像素节奏单元。不多不少,就把4像素作为一个基本单元。首先,iPhone和iPad的屏幕宽高均可被4整除。采用4作为一个基本单元,我们能以4、8、16和32像素的等分间隔构造水平和垂直网格,这种方法高度灵活。

4x4

4 X 4网格

* 更新:我现在叫它4 像素节奏单元而不是节奏。就像乐谱中的四分音符一样,它通常是更大节奏的一部分。因此我不把4 像素叫做一个节奏,它更像是一个基本单元。

使用4像素单元的美妙之处在于,只需很小的修改就能把目前原生的(手机界面)元素融入到新的比例尺中。状态栏仍旧可以保持20像素高。按钮高度可以从30凸起到32像素高。可以将选项卡高度减到48像素。带有提示信息的导航条可把74替换成72像素高。分组表格单元格高度可仍旧保持44像素高。段落头部和表格组之间的距离可以是12的倍数。

随着垂直和水平间距变得相同,我们可以很容易对方形元素进行布局。例如属性图片和图标。并且通常它们都以能够被4整除的标准尺寸出现。像Facebook和Twitter这样的社交网络通常使用默认48 X 48的头像。像在Windows和OS X上的电脑图标都是16 X 16、24 X 24、32 X 32、48 X 48、256 X 256、512 X 512大小。它们都能被4整除。因此iOS上的图标能够遵循标准大小(设计),并省去了开发人员重新设计奇数大小图标的时间和精力。

alternateUI

采用新比例尺(的界面)

alternateUIgrid1

垂直网格的特写

和原来的相比,新的比例尺更稳定。同时它的外观和给人的感觉更好。现在它给人感觉不像是任意设计的电子接口,更像是根据印刷排版原则巧妙排版的物理文件。它也更好地满足了iPhone界面作为物理对象手势操作的隐喻前提。但是我们可以走的更远。

当单元格中包含更多信息时,使用4像素单元的优势很明显,它们可以很好地适应(4像素单元)。

iphone-ipod-genius-playlist-refreshed

iPod播放列表

 iPod播放列表屏幕具有包含两行文字的单元格。为了避免文字小、屏幕乱,单元格高度被提升至46像素。这样就完全丢失了视觉节奏的整体性。如果我们用48像素单元格来替代44或46像素怎么样呢?

1

iPod播放列表新旧比例尺对比

两种播放列表的文字都和浅灰色的按钮左对齐。增加的文字间距也提高了可读性和可浏览性。浅灰色按钮和导航条按钮的高度都是32像素。结果呈现出视觉上更稳定的布局。

你可能注意到了48像素节奏会把播放列表的最后一行灰色文字截掉。这并不是问题,因为用户很少从头到尾一直盯着一个静止屏幕。(人们)更容易(将视线)固定于一小块区域而不是整个屏幕,因此用户通常的行为是滚动屏幕,并把信息从底部移到屏幕的上方区域,这个区域上他们的视线位置是固定的。因此更重要是提升可浏览性,甚至是在信息密度不高的情况下。

更多例子

我已经开始用4像素单元设计iPhone版的Likables。这里有一些用来显示其多样性的截图。

A00_Welcome

Likables欢迎界面

F01_Profile

Likables个人属性界面

我想指出的是,我一点也没说使用网格会立刻让你的UI更好。因为苹果在使用一些网格配合新功能的新元素时已经变得不和谐了,我就提出了一种视觉上更稳定的网格(系统)。设计师当然还需要在设计真正好界面时考虑其他原则。

我也在为Anideo设计Denso的iPhone和iPad应用程序用户界面,并且正在整个APP中广泛使用4像素节奏。由于它太好用了,我可能会在今后的设计中为所有的APP程序使用它。

我希望一旦Likables和Denso上线了,它们就会证明4像素节奏单元是有生产价值的。我也希望苹果看到这一点,也许它会在未来的iOS版本中重新考虑UI的视觉比例。

Via: 原文出处    译者博客

如果看到这段文字,证明您已经看完这篇文章了,有什么收获有什么感想有什么不赞同,我们期待您的留言评论,并诚挚邀请您加入“互联网er早读课”QQ群,一同交流每天文章的心得并结识同行。官方2群:74447564,加群密码“职业信息+城市+姓名”,否则不予通过,入群后请修改群名片。注:官方QQ群非水群,喜欢闲聊的童鞋请勿加入。再次感谢您对早读课网站的支持。

我们猜您可能也喜欢:

20130302早读课:打造让用户流连忘返的产品

20130107早读课:十条提升iOS应用用户体验的经验分享

20130224早读课:界面设计中视觉隐喻手法

20130219早读课:拟物与极简,iOS和Win 8设计的殊途同归

20130122早读课:用户的“七宗罪”
无觅

相关 [ios 用户界面 新视] 推荐:

20130305早读课:iOS用户界面的新视觉比例

- - 互联网er的早读课,专注产品、用研、交互
推荐理由:译者@OpzoonUED. 原作者 Aen是一名移动产品设计师,他通过比较iOS系统原生与非原生应用的细微区别,以44像素最小点击尺寸缺陷为切入点,阐述iOS用户界面的新视觉比例. “在很多方面上,44像素块是iPhone界面的基本测量单元,决定着许多iPhone应用的视觉节奏. 想要让某个可点击对象(像按钮或列表项)更方便可靠地被点击到,推荐其作为最小尺寸测量标准是很有意义的.

iOS 7用户界面过渡指南

- - 搜狐MUED搜狐MUED - 移动用户体验团队
本文PDF格式文档下载地址: http://vdisk.weibo.com/s/HsGc- 过渡前的准备. 重要:由于iOS7还未最终发布,该文档的部分内容还会继续修改. iOS 7引入了许多用户界面上的改变,比如无边框的按钮,透明操作栏,全屏视图控制器布局. 使用Xcode 5可以创建iOS 7项目,并使用模拟器一窥iOS 7用户界面的变化.

苹果iOS和谷歌安卓用户界面风格对比及技术总结

- 牛腩羊耳朵 - 互联网的那点事
苹果iSO系统和谷歌安卓系统的用户界面都非常简洁漂亮,但风格还有所不同. 就我个人而言,单单就设计风格来说,大部分时间里,我似乎更偏爱谷歌的安卓系统,虽然我现在用的是3GS,也许这正是原因所在,再好的设计看久了多少也会有些审美疲劳. 闲话少叙,这篇文章里我会将iOS和安卓的相同功能界面截取出来,共有五个部分,分别是:锁屏界面、拨号界面、浏览器界面、键盘界面以及其它元素.

从图形用户界面到自然用户界面 - 对Windows 8中两种用户界面的思考

- - cnBeta.COM
当然,GUI还会在可以预见的未来长期存在,就像命令行界面(CLI)直到现在都一直存在一样. 顺便说一句,虽然从2000(NT5.0)起的 Windows不再是在DOS上加一个图形界面的外壳,命令处理程序(cmd)一直存在,甚至在7中引进了PowerShell(作为Linux爱好者, 这里就忍住不吐槽PS了),其原因值得思考.

NUI自然用户界面(Natural User Interface)

- - IT技术博客大学习
    NUI不是一个新名词.      只是经历近年的一些新产品,有了更贴切的感受.      特别是消费电子终端界面CLI、GUI、NUI的变化. 在桌面端,对象通常是显示固定的屏幕,设计师专注于键鼠驱动下的视觉效果. 到了移动端,拥有更多传感器与交互方式,便携使得移动设备不限时空,传统专注于固定场景与操作的设计思路不合时宜.

40个良好用户界面Tips

- - 设计达人
一个良好的用户界面应具有高转换率,并且易于使用. 但要用户体验良好并不容易做到,下面我们整理了40个良好用户界面Tips,希望能对你有帮助. 1 尽量使用单列而不是多列布局. 单列布局能够让对全局有更好的掌控. 而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达. 最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮.

用户界面设计原则

- - 人人都是产品经理
“设计绝不是简单的拼合,排列甚至编辑;设计是通过阐明,简化、明确、修饰,使之庄严,有说服性,甚至带一点趣味性,来赋予其价值及意义. ”——保罗·兰德(Paul Rand). 1.“明确”应该放在设计的首要位置. 对任何界面而言,“明确”是首要的也是最重要的一点. 人们必须能够辨别出它是什么,才能有效地使用你设计出来的界面.

[IOS]iOS App性能优化

- - 操作系统 - ITeye博客
iOS App的性能关注点. 虽然iPhone的机能越来越好,但是app的功能也越来越复杂,性能从来都是移动开发的核心关注点之一. 我们说一个app性能好,不是简单指感觉运行速度快,而应该是指应用启动快速、UI反馈响应及时、列表滚动操作流畅、内存使用合理,当然更不能随随便便Crash啦. 工程师开发应用时除了在设计上要避免性能“坑”的出现,在实际遇到“坑”时也要能很快定位原因所在.