前兩天在微網誌上看到一篇來自iiconfans的文章推薦：《[經驗交流] IOS界面設計的新比例關系 - [圖形界面]》，覺得對iOS APP設計時的布局排版很有幫助，決定将其翻譯成中文，和大家共同學習，譯文如下：
New Visual Proportions for the iOS User Interface
iOS使用者界面的新視覺比例
原文：http://aentan.com/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使用者界面的視覺比例了，并傳回使用者需要的和諧的比例。
---------------------------------------------------- 關注pmcaff微信公衆賬号，會逐漸開放更多内容 可在公衆帳号中搜尋 [pmcaff産品經理沙龍]或者掃描二維碼
