[iOS用户界面的新视觉比例.docVIP

iOS用户界面的新视觉比例 New Visual Proportions for the iOS User Interface iOS用户界面的新视觉比例 原文：/design/new-visual-proportions-for-the-ios-user-interface/作者：@Aen??译者：s2dongman（申悦）??转载请标明出处 “在很多方面上，44像素块是iPhone界面的基本测量单元，决定着许多iPhone应用的视觉节奏。想要让某个可点击对象（像按钮或列表项）更方便可靠地被点击到，推荐其作为最小尺寸测量标准是很有意义的。” ? ? ? ? 以上引文是从Josh Clark的书《Tapworthy》中摘录的，这是一本iPhone UI设计的权威书籍。苹果的移动HIG（人机界面指南）中建议将44 X 44像素作为让可点击UI元素用着舒服的最小尺寸。大多数应用，包括几乎所有原生应用都遵循该44像素的节奏。大家都很高兴，所以会有什么问题呢？ ? ? ? ? 由于从去年开始就进行iPhone应用界面设计，我已经深深感受到了原生应用和非原生应用的细微区别。作为一名擅长印刷品设计，且拥有敏锐排版感觉的设计师，我不禁注意到了44像素节奏的缺陷和不完善的地方。 ? ? ? ??基线网格（Baseline Grid） ? ? ? ? 苹果使用这种节奏的目的在于清晰地展示出一个固定的垂直间隔，就像基线网格（Baseline Grid）——一种在印刷品设计中非常常见的技术一样。使用基线网格的目的是为文字对齐提供主要骨干结构。这通常等同于主体内容文字的铅线（leading）和其他文字的铅线，例如，标题和块引用通常就是从多种基线网格中派生出来的。这给与文字布局一种稳定的视觉构图。使用44像素的问题在于它很难算做一种有效的节奏。 ? ? ? 首先让我们更近一步地看看44像素节奏。例如，在一个由分组表格组成的界面上，这种节奏被进一步细分为四个区间，每个区间11个像素。（这些区间）为每个段落的头部（11像素）和每个分组表格（22像素）提供了空白间距。因此我们可以说iPhone屏幕布局遵循最大44像素，最小11像素的节奏。这两种节奏组成了视觉构图的基础。 ? ? ??基线网格（Baseline Grid） ? ? ? iPhone的屏幕有效尺寸是竖排方向上宽320 X 高460像素（如果是视网膜屏就是点数），不包括状态栏。如果你用460除以44，余数是20，除以11余数是9，460不能被11或44整除。（因此）垂直节奏就被打乱了。 44像素节奏 ? ? ? 并不是只有我抱怨这事儿。除了一个结构粗糙的基线网格，作为让步，人们还到处使用许多其他任意布局值（译者注：就是间隔像素不按11/44的倍数计算），来克服不稳定的垂直节奏问题。 20像素状态栏 状态栏 ? ? ? iPhone和iPad的状态栏都是20像素高，意味着它也不遵循“垂直节奏”。点击状态栏，屏幕会回滚到顶部。在IOS 5系统中向下拉动它会显示通知中心。这是一个非常小的点击区域。我认为操作系统采用了一些聪明的算法来降低误差幅度，让其更易点击。这太虚伪了，一方面苹果主张44像素作为最小点击区域，但还告诉我们某个需要足够复杂操作的元素仅20个像素就够了。 29像素按钮 29像素按钮 ? ? ? 导航条、工具条和表格单元格中的按钮都是29像素高，所以太不符合垂直节奏了。尽管它们表面上有29个像素高，它们的有效点击高度实际上超出了顶部和底部边缘，达到了大约44个像素（高）。像Safari工具条那样的朴素风格按钮没有边框，所以它们不会说谎，我们可以察觉到它们更容易点击。 49像素选项卡（Tab Bar） 选项卡 ? ? ? 选项卡是由文字标签+上方图标组成的，需要额外高度放置它们。49个像素高加上黑颜色，和恶心的喇叭裤一样。怪不得Tweetie在成为Twitter前已经放弃了原生的选项卡。这也不符合44像素垂直节奏。 74像素带有提示信息的导航条 带有提示信息的导航条 ? ? ? 如果打开了导航条上的提示信息，（导航条）就会变成74像素高，同样，这不符合垂直节奏。 ? ? ? 所以你看到，当苹果在增加越来越多的功能时，并没有重新考虑布局（情况），伴随着妥协和随意性，它几乎没能把握住视觉上的整体感。（苹果）正变得零散不堪，且看起来接近于Android了。我认为苹果是时候该重新考虑IOS用户界面的视觉比例了，并返回用户需要的和谐的比例。 4像素节奏单元 ? ? 我最近尝试用另一种方法为iPhone版的Likables设计UI——采用4像素节奏单元。不多不少，就把4像素作为一个基本单元。首先，iPhone和iPad的屏幕宽高均可被4整除。采用4作为一个基本单元，我们能以4、8、16