iOS原名iPhoneOS，是由蘋果公司為其移動裝置開發的移動作業系統，支援裝置包括iPhone、iPad、iPod touch，今天數藝君就給大家介紹一下iPhone介面設計規範。
“介面尺寸”
目前使用iOS的iPhone常用手機型號的外觀尺寸及螢幕尺寸對比如圖所示。
蘋果手機在iPhoneX誕生之後正式進入全面屏移動時代，在UI的尺寸與規範上也有了較大變化，其中iPhone6/7/8/SE的解析度（1334px×750px）通常作為基準尺寸，可向上或向下適配。
“欄高度”
除了介面尺寸與顯示規格，iOS的介面中對狀態列、導航欄、標籤欄也有嚴格的尺寸要求，遵循相關的設計規範可有效提高最終介面設計的適配度。
狀態列、導航欄、標籤欄在介面中的位置如圖所示。
（1）狀態列（Status Bars）。
狀態列位於介面最上方，主要用於顯示當前時間、網路狀態、電池電量、SIM運營商。不同型號裝置的狀態列高度不同，例如iPhone12、iPhone11、iPhoneX等全面屏型號的手機介面狀態列高度通常為88px或132px，全面屏螢幕裝置的外觀設計的高度會高於非全面屏裝置的，iPhone6/7/8等非全面屏裝置的狀態列高度通常為40px或60px，如圖所示。
狀態列為iOS固定版式，可在系統設定中調節深色、淺色兩種模式，如圖所示。
（2）導航欄（Navigation Bars）。
導航欄位於狀態列之下，主要用於顯示當前頁面標題。目前iOS的導航欄主要包括88px和132px兩種高度。除當前頁標題外，導航欄也會用於放置功能圖示。
左側通常是後退跳轉按鈕，點選左箭頭則跳轉回上頁。
右側通常包括針對當前內容的操作，例如設定、搜尋、掃一掃、個人主頁等，全屏瀏覽介面下導航欄會自動隱藏，如圖所示。
（3）標籤欄（Tab Bars）。
標籤欄通常位於介面底部，也有少部分標籤欄位於狀態列之下、導航欄之上。標籤欄主要包括App的幾大主要板塊，通常由3~5個圖示及註釋文字組成，例如微信標籤欄內容為“微信”“通訊錄”“發現”“我”4個板塊，如圖所示。
標籤欄用於全域性導航，通常會保持顯示狀態不隱藏。不同類別的軟體根據其自身功能的不同，標籤欄內容也會有相應的變化，但基本都包含首頁、個人主頁、搜尋與發現這3類主要功能板塊，如圖所示。
瞭解與掌握iOS的欄高度，有利於在介面圖示設計的實際應用中更精確、有效地實現設計方案。
“邊距和間距”
在平面設計領域中，不論是海報設計、版式設計，還是介面設計，只要涉及整體頁面與內部圖示，頁面的邊距、元素之間的間距就都是設計要點。
邊距與間距設計得是否合理， 會影響使用者的使用體
驗。如果間距過於大，會導致使用者閱讀不流暢，文字板塊失去連貫的視覺引導，使用者識別內容的效率降低；相反，如果間距過於小，頁面整體內容會顯得過於擁擠，難以體現清晰的功能分類，影響使用者使用感。
因此在介面設計中，邊距與間距的合理性設定非常重要。以下是對相關內容的解讀與分析，幫助讀者快速掌握iOS介面中常用的間距與邊距規範。
（1）全域性邊距。
全域性邊距是指頁面板塊內容到頁面邊緣之間的間距。例如圖所示的iOS的設定頁面和備忘錄頁面的全域性邊距均為30px，這也是iOS的通用邊距。
全域性邊距的作用及設計要點主要包括以下幾點。
視覺統一性。全域性邊距可以使整體頁面的圖片與文字更加和諧，不會出現圖片過大、過於突出的情況，如果一個App設定了全域性邊距，那麼除特殊情況外，App的所有頁面也應統一使用此邊距進行規範，由此達到視覺的統一。
閱讀引導性。引導使用者從上到下的視覺流線，並且將使用者的注意力集中於頁面。
設計美觀性。合理的全域性邊距設定使整體頁面看起來更加簡潔美觀，適合長時間閱讀。
根據介面設計的版式風格與圖示數量等內容的差異，不同App中的全域性邊距設定也會有區別，如圖所示，愛彼迎的全域性邊距為30px，微博的全域性邊距為25px，淘寶的全域性邊距為20px。以iPhone 6/7/8/SE（1334px×750px）螢幕尺寸為基準，常用的全域性邊距有20px、24px、30px、32px。全域性邊距通常是偶數，並且在倍率為@2x時常用24px，倍率為@3x時常用32px。
（2）卡片邊距。
在介面設計中，卡片式設計是一種較為常用的形式，其特點是用色塊背景將資訊分組、分類，從而清晰地區分不同組別的內容，使頁面空間得到更好的利用。
頁面中的卡片邊距根據承載資訊內容的多少來界定，通常不小於16px。
邊距過小或過大都會降低資訊傳達的效率，當資訊量較少時，邊距可適當放大，例如iOS設定頁面卡片邊距為70px。
同樣，以iPhone 6/7/8/SE（1334px×750px）螢幕尺寸為基準，常用的邊距為20px、24px、30px、40px。例如，App Store卡片邊距為60px，微信訂閱號卡片邊距為40px，如圖所示。
（3）內容間距。
在介面設計中主要使用格式塔原理確定介面中的內容分佈及內容之間的間距。
根據接近法則，物體之間的相對距離會影響我們感知它們是如何組織在一起的，相距越近的物體越容易被視為一組。
例如，圖所示內容中，每個圖示所對應的圖形與名稱文字之間的間距明顯小於其與另一個圖示之間的間距，圖示之間自然分組。
“介面佈局”
根據App 的定位及每個頁面資訊內容的複雜程度不同，介面設計的版式及佈局方式也會有所區別，UI設計中常用的佈局方式主要包括無框式佈局、卡片式佈局、列表式佈局3類。
（1）無框式佈局。
無框式佈局是一種新興且流行的佈局形式，能呈現出簡約、清新、乾淨的視覺效果，使用此佈局方式的App大多包含以下3個特點。
以圖片為主體。以圖片為主體的App主要強調圖片內容，通常圖片尺寸較大且形狀規整，借圖片的塊面自然地對版式進行劃分，起到了規範畫面結構的作用。
下圖所示的下廚房和古田路九號的首頁介面，都以展示圖片為主，但兩相比較，古田路九號比下廚房介面更為整潔，因為它對圖片尺寸要求更嚴格，介面版式顯得更加有序。
功能簡潔。功能簡潔的App的介面中需要呈現元素相對較少，元素之間的距離可以進行充分的變化和協調，無框式佈局很適合於此類App。
例如，百度網盤的檔案介面以圖示名、註釋文字為主，元素較少且重複性較高，使用無框式佈局可保持畫面的簡潔性，減少干擾因素；LogoScopic Studio軟體介面以圖片為主，說明性文字需點選圖片才會顯示，使用無框式佈局可以實現極簡的畫面效果，如圖所示。
內容規律。當App整體介面中所呈現的幾類元素層級重複、類別統一、內容規律時，也非常適合使用無框式佈局。
圖所示的愛彼迎與找我婚禮App介面，其中的內容並不少，但使用了無框式佈局避免了產生資訊混亂的情況。
因為這類App的每組元素重複性較高，所以充分運用字型字號的變化及外框圖形，遵循格式塔原理，使每組元素自然分組，無須增加分割線，就可以形成簡潔的無框式佈局。
（2）卡片式佈局。卡片式佈局也是我們經常使用的佈局形式，它可以幫助設計師清晰地對整體介面進行分割，對圖片及資訊進行明確分類，使卡片之間各自獨立，互不干擾。卡片色彩通常有兩種應用形式，如圖所示。
第一種是純色模式，卡片顏色較淺，背景顏色較深，而卡片與背景之間有深色的投影，由此形成更加立體的視覺效果。當然也有相反的情況，例如卡片比背景顏色更深，或是根據整體色調卡片呈彩色。
第二種常見於iOS，卡片為半透明樣式，呈現部分背景顏色，這種樣式可以在保證使用者有效識別內容的同時，增強卡片與背景的融合性，使卡片不會填滿螢幕顯得過於生硬，也不會完全脫離背景顯得突兀，整體介面有明亮、通透的視覺效果。
常用的卡片式佈局可分為兩類，分別是單欄卡片佈局與雙欄卡片佈局。
單欄卡片佈局。單欄卡片佈局主要用於資訊類別較多的情況，將繁雜的資訊進行有效分類，利用卡片對其進行分組，使其在閱讀上不會相互干擾。當圖片、圖示、文字層次較多時，使用卡片佈局可以對所有資訊進行非常清晰的分類，如圖所示。
當然，這類佈局形式如果使用不恰當，反而會浪費空間，造成設計累贅。
雙欄卡片佈局。需要在同一頁面中呈現多張圖片時，常用雙欄卡片佈局。此佈局形式能更有效地提高介面空間使用率，呈現更多的資訊。
花瓣App和線上購物淘寶App都以圖片展示為主，使用了雙欄卡片佈局，便於在同一介面中更多地呈現商品圖片，也便於使用者對圖片進行對比，如圖所示。
（3）列表式佈局。列表式佈局常見於簡訊息較多的情況，可有效利用頁面空間，將資訊更多地展示於頁面中並做好清晰的分類。常見的社交類 App，例如微信、QQ，還有手機中自帶的通訊錄、通話記錄、簡訊等頁面都經常使用此類佈局。
根據內容數量的不同，列表高度也會有不同，內嵌式列表高度會相對較低，出血式列表高度會相對較高，如圖所示。
“圖片比例”
UI設計中常用的圖片尺寸和版式設定並不是任意的，而是建立在人體工程學基礎之上的，按照統一的圖片尺寸進行排版和設計，不僅會讓整體介面中功能的實現有序規範，而且便於後期精準調整。
根據App的定位與風格，圖片可以橫置或豎置，不同的圖片尺寸也可以同時使用，以增強畫面的豐富性，常用的圖片尺寸比例為1∶1、3∶4、2∶3、16∶9、16∶10等，如圖所示。
“圖示規範”
每個應用程式都需要一套系統圖標，例如iOS的UI主圖示可以在App Store中引起使用者的注意，並在主螢幕中脫穎而出，加深使用者對應用程式的印象，體現了對應軟體的設計定位與介面風格。
圖展示了iOS中的設定圖示、電話圖示、郵件圖示、照片圖示、地圖圖示、時鐘圖示。
（1）設計原則。
根據iOS圖示功能，我們可以分析出其UI圖示設計需要遵循以下幾點設計原則。
簡潔性。第一是主圖形保持簡潔，以簡單、獨特的圖形表達圖示含義，謹慎新增細節。如果圖示內容或形狀過於複雜，在較小尺寸的情況下可能難以分辨細節。第二是背景保持簡潔，確保識別效率，避免層次混亂。
焦點性。第一是圖示含義的焦點性，選擇的圖示元素要能有效概括和體現應用程式的功能屬性，使使用者能透過圖示快速獲悉軟體的定位。第二是圖示圖形的焦點性，儘量使用帶中心點的圖示，可在圓角矩形外 廓基礎上更規範地展示出抽象圖示。
圖形性。儘量使用簡潔的圖形來設計圖示，不要使用照片或螢幕截圖。由於圖示展示尺寸較小，因此細節太多的設計通常無法準確輔助傳達應用程式的用途，甚至會有誤導性和視覺雜亂感。
統一性。應用程式中的所有圖示在細節部分，如光學重量、筆畫粗細、位置和透視方面都應保持一致。以潮牌資訊App圖示設計為例，同一套圖示，其風格必須保持一致，如圖所示。
風格一致主要體現在圖示細節的統一，例如線條粗細、填充顏色、圓角弧度、圖形間距等細節設計需全部保持一致，形成統一規範的風格，給予使用者精準的視覺體驗。從圖我們也能對比出，實心圖示往往比輪廓圖示更清晰，如果圖示必須包含線條，則需要與其他圖示和應用程式的版式協調好權重。
（2）iOS 圖示屬性。
格式：PNG
色彩：P3（廣色域）、sRGB（彩色）、Gray Gamma 2.1（灰度）
風格：扁平化、不透明
形狀：圓角矩形
（3）iOS 圖示尺寸。
安裝應用程式後，每個應用程式都會在主螢幕和整個系統中顯示其圖示。
“版式規範”
在介面設計中，版式是貫穿和組織所有元素的設計要點，最終呈現的介面需保證各種大小的文字都清晰易讀，圖示形態精確清晰，裝飾巧妙恰當。
介面設計的核心是對功能的高度關注，因此所有的頁面空間、顏色、字型、圖形和介面元素都要合理，並且保證重要資訊傳達的高效性、準確性與互動性。
介面版式設計原則主要可以歸納為3類，分別是對齊、對稱、歸組，如圖所示。
對齊。同層級的資訊保持對齊，整體介面邊距保持對齊。整齊的版式可以有效傳遞規範的視覺效果，給使用者流暢的閱讀體驗。
對稱。手機介面尺寸較小，若使用複雜的版式會使整體版面顯得混亂，而使用對稱的版式能快速呈現一種規範整體、有條理的視覺效果。不僅是版式，圖示的設計也大多采用中心對稱的形式，這可以讓使用者視覺體驗上的舒適度更高。
歸組。當資訊較為繁雜時，設計師需要對資訊進行篩選與劃分，根據格式塔原理中的接近法則，把關聯的資訊排列得更緊密，進行歸組，為使用者提供結構清晰的瀏覽介面，提高文字可讀性。
“文字規範”
iOS中英文字型使用的是San Francisco（SF）和 New York（NY），中文字型使用的是Ping Fang SC蘋方黑體。
San Francisco（SF）是一個無襯線型別的字型，與使用者介面的視覺清晰度相匹配，使用此字型的文字資訊清晰易懂；
New York（NY）是一種襯線字型，旨在補充 SF 字型，各自效果如圖所示。
在 iOS 中使用者可自行選擇文字大小，從而提高文字的靈活性。下圖主要彙總了預設字型字號。
“設計適配”
手機的型號不同，其螢幕解析度也會有所區別，在進行UI設計時，設計師需要一項基準尺寸來適配其他多種解析度，目前通常以667px×375px@1x（1334px×750px@2x）尺寸為基準，如圖所示（@1x 表示1倍圖，@2x表示2倍圖，依此類推）。
