前兩天在微博上看到一篇來自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產品經理沙龍]或者掃描二維碼

總結

以上是生活随笔為你收集整理的IOS用户界面的新视觉比例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。