2.2　iOS系統的組件尺寸

iOS系統的組件由狀態欄、導航欄和標簽欄等部分組成，如圖2-10所示。iOS系統對組件的高度有嚴格的規定，設計師必須遵守。

2.2.1　組件尺寸

由于不同設備的界面尺寸不同，因此界面組件的尺寸也不相同。不同設備的狀態欄、導航欄和標簽欄的高度如表2-2所示。

2.2.2　邊距和間距

在移動端界面設計中，規范界面中元素的邊距和間距非常重要。界面是否美觀、簡潔、通透，都與邊距和間距的設計規范有直接關系。根據邊距和間距的不同位置，可以分為全局邊距、卡片間距和內容間距。

● 全局邊距

全局邊距是指界面內容到屏幕邊緣的距離，整個應用的界面都應該以此來進行規范，以達到界面整體在視覺效果上的統一。全局邊距的設置可以更好地引導用戶垂直向下瀏覽。淘寶App全局邊距如圖2-11所示。

在實際應用中應該根據產品的不同風格設置不同的全局邊距，讓邊距成為界面設計的一種語言。在iOS系統中，常用的全局邊距有32px、30px、24px、20px等。如圖2-12所示，iOS系統邊距為30px，微信邊距為35px，工商銀行邊距為30px。

邊距的大小并沒有一個固定的數值，但是通常會將邊距設置為偶數。還有一種情況是將界面中的圖片通欄顯示，不留邊界，如圖2-13所示。

● 卡片間距

卡片式布局是移動端界面設計中非常常見的布局方式，圖2-14所示為卡片式布局中的一種。

通常卡片和卡片之間的距離是根據界面的風格及卡片承載信息的多少來確定的，由于過小的間距會增加瀏覽者的緊張情緒，因此卡片間距通常不小于16px，常見的間距有20px、24px、30px和40px，當然間距也不宜過大，過大的間距會使界面變得松散。iOS系統“設置”界面卡片間距如圖2-15所示。

提示

為了便于瀏覽者區分不同卡片，間距顏色的設置可以與界面分割線的設置一致，也可以更淺一些。通常會采用較低純度的灰色。

卡片間距的設置是靈活多變的，一定要根據產品的風格和實際需求去設置。讀者應通過截圖比較各類App的卡片間距數值，并融會貫通，應用到自己的設計工作中。

● 內容間距

一款App產品除了組件（狀態欄、導航欄、標簽欄）和控件，就是內容了。內容的布局形式多種多樣，此處只討論內容的間距設置問題。

單個元素之間的相對距離會影響瀏覽者感知它們是否組織在一起，互相靠近的元素看起來屬于一組，而距離較遠的則自動劃分到組外。如圖2-16所示，左邊的圓在水平方向的距離比垂直方向的距離近，可以看成4行圓點，而右邊的則會看成4列圓點。

在設計界面內容布局時，一定要重視臨近性原則的運用。在圖2-17所示的App的主界面中，每一個應用名稱都遠離其他圖標，而與其對應的圖標距離較近，這讓瀏覽者的瀏覽變得更直觀。如圖2-18所示，當應用名稱與上下圖標的距離相同時，就分不出它屬于上面還是下面，會產生錯亂的視覺體驗。

提示

臨近性原則指的是彼此接近的事物、元素，人們認為它們是相關的。所以，當面對數據時，瀏覽者會自動將數據和不同的對象分組。

實戰練習02　創建輔助線繪制iOS組件

視　頻：資源包\視頻\第2章\2-2-2.mp4　　源文件：資源包\源文件\第2章\2-2-2.psd

● 案例分析

iOS系統中的狀態欄、導航欄和標簽欄都有固定的尺寸和位置。而且為了方便瀏覽，左右兩側會有20～30px的邊界。本案例中首先使用輔助線定位iOS組件和邊界的位置，然后再使用形狀工具繪制iPhone 6的狀態欄、導航欄和標簽欄，如圖2-19所示。

● 操作步驟

01　執行“窗口＞標尺”命令，將標尺顯示出來，如圖2-20所示。執行“視圖＞新建參考線”命令，設置“新建參考線”對話框中的參數，如圖2-21所示。

02　單擊“確定”按鈕，完成狀態欄輔助線定位，如圖2-22所示。繼續執行“視圖＞新建參考線”命令，設置“新建參考線”對話框中的參數，如圖2-23所示。

03　選擇工具箱中的“矩形工具”，在畫板中單擊，在彈出的“創建矩形”對話框中設置參數，如圖2-24所示。單擊“確定”按鈕，創建一個矩形，如圖2-25所示。

提示

形狀工具有“形狀”、“路徑”和“像素”三種繪制模式。在繪制UI時，應選擇繪制“形狀”模式，避免選擇其他兩種模式。

04　修改“屬性”面板中的矩形坐標，如圖2-26所示。執行“視圖＞通過形狀新建參考線”命令，創建輔助線，如圖2-27所示。

05　使用“矩形工具”在畫板中繪制矩形，完成狀態欄和導航欄的繪制，如圖2-28所示。使用相同的方法繼續創建左右邊距的輔助線，完成效果如圖2-29所示。