非官方的iOS設計指南

1 評論 13961 瀏覽 13 收藏 27 分鐘

有時候為iOS設計app并不是一件簡單的事,但是如果你能找到正確的最新的蘋果設備信息,并按照正確的方向,那么為iOS設計app或許會變得簡單容易些。

關于這些指南

這些指南描述了如何遵守蘋果的iOS 人機交互指南來設計app,而不是講用自定義控件可以做成什么樣的設計,有時候打破規則也很重要。該文檔的目的并不是為一些復雜的設計問題提供解決方案。該文檔是非官方的,將會定期更新和擴充內容,最近一次更新是2014年11月11日。

分辨率和顯示屏規格(Resolutions和Display Specifications)

Points 和Pixels的區別

Pixels(像素)是數字顯示屏上我們可控制的最小物理元素,在一個特定屏幕尺寸中可以有多個像素,PPI(pixels-per-inch)越高,則渲染的內容會越清晰。

Points用以衡量分辨率。根據屏幕的像素密度,一個point可以包含多個像素(比如在常規的retina屏上,1pt包含2 x 2的像素)。

當你針對多個顯示屏類型進行設計時,你應該以points進行思考,但以pixels進行設計。這意味著你仍需要以3種不同的分辨率來輸出設計資產,不管你針對哪個分辨率設計應用程序。

QQ截圖20141117135513.jpg

iPhone 6+縮減像素取樣

在iOS上渲染像素和物理像素(physical pixels)是等同的,只有一個例外:iPhone 6 Plus的Retina HD顯示屏。由于它屏幕的像素分辨率要低于一個常規的@3x分辨率,所以被渲染內容會自動調整為原始尺寸的87%(從2208*1242像素來適應為1920*1082像素的顯示屏分辨率)

55.jpg

iPhone 5S, 6 以及6+顯示屏區別的詳細信息可參看:The Ultimate Guide To iPhone Resolutions

App Icons

60.jpg

自動應用效果

多尺寸的應用程序icon通常被添加到應用程序包中,當在設備上渲染時,iOS會將效果應用在應用程序icon上。

(1)圓角

圓角半徑值已經不存在了。從iOS 7開始,app icon已經使用了超橢圓的形狀。由于蘋果沒有發布該形狀的官方模板,所以你得精確地使用非官方的模板

QQ截圖20141117140106.jpg

圓角的圖形不應該包含在最終的輸出資產中,但如果你想要添加和應用程序icon拐角對齊的描邊和陰影效果,那你可能還會用到圓角圖形。

提醒:因為你想將應用效果和icon拐角對齊,所以如果你正使用超橢圓的形狀對icon資產進行蒙版(遮罩),那要確保在遮罩外的區域不能使用任何透明的圖形。應用程序icon不支持透明度,相反作為純黑色進行渲染。如果你的遮罩不是百分百精確,那用戶將會在圓角邊緣看 到黑色的鋸齒。推薦將canvas的背景設置成和app icon一樣的背景。

(2)邊框描邊(某些情況下)

如果你使用的app icon有白色的背景,那么將會應用1pixel的灰色邊框,以便更容易地識別icon的邊緣。這只能在設置app和App Store中進行。

(3)后續問題(iOS 6 和之前的版本)

在舊的iOS版本中,這些效果會自動應用:可以被禁用的圓角(和iOS 7+中使用的icon不同)、主屏幕上的陰影效果以及關澤效果等。

柵格系統

61.jpg

蘋果開發了具有黃金分割比例的柵格系統,可用以正確地調整和對齊icon上的元素。不過,甚至是蘋果設計師的原生app icon也沒有完全嚴格地遵守柵格系統。所以如果你的icon上的元素在沒有嚴格遵守柵格系統的情況下能更好地展示,那你可以考慮下打破一些固有的規則。

字體排版

所有的iOS版本中默認字體都是Helvetica Neue。從iOS 7開始,蘋果使用了稍作修改的字體,但是在你的設計過程中使用原始的Helvetica Neue是極好的。除了默認字體外,你還可以使用很多可選的字體,你可以在此查看完整的預置字體列表。

自定義字體

從技術角度講,True Type Font (.ttf)可以被用在iOS app中,但要注意許可問題。一般來說,使用完全免費或者商業化的字體是安全的。MyFonts最大數量地包含了可用在app中的許可字體。

調色板

ios-color-theme.jpg

iOS 7以后,蘋果在操作系統和預裝app中使用了更有生機和活力的調色板。雖然你可以使用上邊默認的iOS調色板,但你也可以使用自己的顏色(如果你想與眾不同,當然要使用了)。

圖標

在iOS app中,icon一個很好的用法是使用視覺化的關系來支持文本標簽,從而執行一些操作或者完全取代文本(最常用的比如”New”、”Delete”等)。通常,我們使用icon來區分導航欄、工具欄以及標簽欄。

各種”欄”的按鈕icon

各種”欄”中的按鈕icon應該有兩種狀態:默認狀態下的1或者1.5pt筆畫寬度的輪廓樣式,以及純色填充的活躍狀態。

ios-bar-icons.jpg

不要在按鈕icon上添加任何額外的效果,比如下拉陰影或者內陰影,因為這些是iOS 7之前版本中的用法。按鈕icon應該在一個透明背景上以一種純色進行繪制–icon的形狀作為遮罩,顏色將會以編程形式應用。

活動視圖圖標

活動視圖(通常指分享彈出視圖)中的icon以輪廓樣式設計,但蘋果在iOS 8以后回歸到白色背景上的實體填充icon風格。

ios-activity-icons.jpg

常用設計元素

iOS提供了很多不錯的現成的視圖和控件,可幫開發者快速構建頁面。開發者可以將一些元素自定義到某個級別,但是也有一些元素不能或者不應該進行自定義。當為iOS設計應用程序時,你應該知道一些工具集的使用,只要是可能,就應該堅持下去。但在一些情況下,可能需要設計一些自定義控件,因為你需要一個更加定制化的界面或者想要改變現有控件的功能(有點危險)。幾乎任何一件事情都是有可能的,而有時候你需要打破既有的規則,不過需要三思。

狀態欄

狀態欄包含了基本的系統信息,比如運營商、時間、電池狀態以及其他等,它在視覺上通常與導航欄聯系在一起,并且使用相同的背景填充。為了匹配你的app的風格,并且易于閱讀,狀態欄的的內容一般有兩種不同的風格:深色(黑色)和淺色(白色)。

62.jpg

你可以隱藏導航欄,但要思考清楚。比如在app下載web內容時,用戶可能對設備是否連接上WiFi網絡比較感興趣,在app要求藍牙連接第三方硬件時,用戶可能會想知道應用是否啟用了藍牙。一個令人信服的隱藏狀態欄的理由是你想移除對的那個元素的所有干擾信息,比如全屏展示內容,比如圖片。

導航欄

導航欄包含在app多個視圖間進行導航的控件,以及在當前視圖中管理內容的選項。導航欄通常展示在屏幕的頂部,狀態欄的底部。默認情況下,背景是半透明的,在導航欄下方還有模糊的內容。導航欄的背景可以是純色的,漸變的或者是自定義的位圖模式。

63.jpg

豎屏模式下的iPhone 6導航欄。

64.jpg

橫屏模式下的iPhone 4S導航欄。導航欄的高度減了12pt,除了iPad。這也是常見的橫屏模式下隱藏狀態欄的方法。

元素應當遵循特定的對齊模式:

1.返回按鈕通常居左對齊。

2.當前視圖的標題應當居中展示在bar中。

3.Action按鈕通常居右對齊。如果可能的話action按鈕應當限制在一個主要操作行文,以避免錯誤點擊,并維持其簡潔性。

工具欄

工具欄包含用于管理或者操作當前視圖中內容的一些操作。在iPhone上,它通常出現在屏幕的底部,但在iPad上也能出現在屏幕的頂部。

和導航欄類似,工具欄的背景填充也能調整,默認情況下工具欄本身是半透明的,在其下方還有模糊的視圖內容。

65.jpg

當一個特定視圖要求三個以上主要活動,但放在導航欄上又顯得凌亂時,你可以使用工具欄。

搜索欄

搜索欄默認有兩種風格:突出的和最小化的。兩種類型的搜索欄在功能上是一樣的。

1.只要用戶沒有輸入文本,搜索欄中會展示占位符文本,而書簽icon則可用來訪問最近或者保存的搜索。

2.鍵入搜索項目后,占位符消失,一個清晰的刪除按鈕會出現在搜索欄的右側。

搜索欄可以利用一個提示–一個短句來介紹搜索的上下文環境。比如”鍵入某個城市、郵政編碼或者機場”

66.jpg

不使用提示和使用提示兩種風格

67.jpg

最小化搜索欄類型

想要提供對檢索詞條的更多控制,可用scope bar(范圍欄)限制搜索欄,scope bar會使用和搜索欄一樣的風格,當搜索結果有清晰的定義類別時,這種方法比較有用。比如,在一款音樂類app中,搜索結果可以按照專輯和歌曲再次過濾。

標簽欄

用戶可使用標簽欄在app的單個視圖間快速導航,并且標簽欄也只能用于這個目的。標簽欄通常出現在屏幕的底部。默認情況下,標簽欄是略透明的,并且向導航欄一樣使用系統的模糊效果。

68.jpg

標簽欄包含固定的最大數量的tabs,一旦標簽數量超過其可容納的最大數量,后邊的標簽將會展示在隱藏的”More-tab”列表中,并且有一個選項可重排標簽順序。

雖然iPhone上最多可展示5個標簽,但是在iPad上最多可展示7個標簽。

為了提醒用戶視圖上的新信息,有時候需要在標簽欄按鈕上使用標記數量。如果一個視圖被臨時禁用,那么相關的標簽按鈕不應當完全被隱藏,相反應當淡出視覺范圍以表示其禁用狀態。

表視圖(Table View)

表視圖以單列或者多列形式展示少數或者多個列表風格的信息,并有能將內容分組的選項。根據你展示的數據類型,通??墒褂脙煞N基本的表視圖風格:

無格式的

69.jpg

無格式表視圖包含的幾行內容的頂部可以有頁眉,最后一行后邊可以有頁腳??梢栽谄聊挥疫吘壵故敬怪睂Ш?,以便在表中進行導航,這種情況適合展示以某種方式儲存的大數據集的時候,比如按照字母降序排列。

分組樣式

70.jpg

分組表視圖允許用戶對內容進行分組。每個分組可以有頁眉(最佳用法是描述類組的上下文環境)和頁腳(適用于幫助文本等)。一個分組的表視圖至少需要包含一個類組,并且每個類組至少要包含一行內容。

對于以上兩種表視圖類型,可用幾種風格來展示數據,以方便用戶快速掃描、閱讀和適當調整內容。

默認

71.jpg

默認的表視圖有一個居左對齊的可選圖片和標題。

帶有副標題

72.jpg

在每行標題下展示小字號的副標題,適用于進一步的解釋說明或者簡短描述。

帶有數值

帶數值表類型可展示與行標題相關的特定數值。類似默認的類型,每行都有一個居左對齊的圖片和標題。在該類型中,數值居右對齊,通常使用比標題淡一點的文本顏色。

73.jpg

模態視圖、彈出視圖以及提醒(警示)視圖

iOS提供了多種風格的臨時視圖,可以某種方式在既定的情況下展示、編輯或者操作數據。雖然每種臨時視圖因某個非常特定的目的而存在,但外觀上卻大有不同,不過所有臨時視圖都有一個相同的地方:在展示時,它就是當前視圖上最上方的圖層,下方的內容被一個黑色的背景所覆蓋。

活動視圖(ACTIVITY VIEW)

活動視圖用以展示特定的任務。這些任務可以是系統默認的任務,比如通過可用選項分享內容,或者是完全自定義的活動。當為自定義任務按鈕設計icon時,你應當遵從活躍狀態和欄按鈕icon的一些設計指南–純色填充、無任何效果、以及在一個透明背景上。

QQ截圖20141117143200.jpg

活動(ACTIONS)

活動頁面用來執行可用操作列表中的單項操作,并且強迫用戶確認或者取消某個活動。

QQ截圖20141117143238.jpg

在豎屏模式下(以及尺寸比較小的橫屏模式下),actions以按鈕列表形式滑入,并呆在屏幕的底部。這種情況下,活動列表應該有一個取消按鈕來關閉視圖和執行任何列表中的action。

當有足夠可用的空間時(比如iPad上),活動列表可在視覺上轉為彈出視圖。不過此時不一定非得有一個關閉按鈕,用戶點擊彈出視圖外的任何地方都能關閉彈出視圖。

提醒視圖

提醒視圖的目的是用來通知用戶一些關鍵性的信息,并有選擇地迫使用戶做出選擇。

提醒視圖通常包含一個標題文本(最好不要超過一行)、一個(純信息提醒,比如”OK”)或者兩個按鈕(要求用戶做出決定,比如”Send”或”Cancel”)。

QQ截圖20141117143313.jpg

你可以在提醒視圖中添加消息文本,如果需要的話則可添加兩個文本域,其中之一可以是蒙版的輸入區,適合密碼或者PINs之類的敏感信息。

編輯菜單(EDIT MENU)

用戶可使用編輯菜單執行復制、粘貼以及剪切等操作。雖然你能控制用戶可以選擇哪個操作,但是編輯菜單的視覺外觀是設定好的,不能重新配置,除非你設計一個完全自定義的編輯菜單。

74.jpg

彈出視圖(Popovers)

當某項特定操作要求多個用戶輸入才能繼續進行時彈出視圖就非常有用了。在水平方向上,彈出視圖可通過箭頭指向展示下方相關的控件(比如按鈕)。彈出控件的背景透明度稍有降低,可展示其下方的模糊內容,像iOS 7以后其他很多UI元素一樣。

QQ截圖20141117143433.jpg

彈出視圖是一種非常強大的臨時視圖,可包含類似導航欄、表視圖、地圖或者web視圖等對象。隨著彈出視圖所包含內容和元素的增加,其窗口也能滾動展示。

模態視圖

模態視圖適用于需要多個命令和用戶輸入的情況,位于屏幕上所有內容的最上方。典型的模態視圖通常提供:

1.描述任務的標題。

2.關閉模特視圖的按鈕,沒有保存或執行任何其他操作。

3.保存或者提交任何已輸入內容的按鈕。

4.模態窗口主體中提供大量用戶可輸入的元素。

有三種可用的模態視圖類型:

1.全屏模式:覆蓋整個屏幕

2.頁表模式:豎屏模式下,模態視圖覆蓋屏幕上的部分內容,僅在半透明的暗色背景上展示部分父視圖的內容。橫屏模式下,模態視圖會像全屏模態視圖那樣展示。

3.表格頁面模式:豎屏模式下,模態視圖出現在屏幕的中間。模態視圖范圍之外,父視圖內容展示在半透明背景之下。當需要展示鍵盤時,模態視圖的位置會自動調整。橫屏模式下類似全屏模態視圖。

控件(Controls)

iOS為基本上任何類型的輸入需求提供了各種各樣的控件。以下列出的是最常用的控件,但想要看詳細的完整的可用控件列表,請在iOS Developer Library中查看。

按鈕

最常用的控件可能是按鈕。iOS 7以來,默認的按鈕設計看起來更像一個純文本鏈接。按鈕控件支持高度自定義。按鈕可以有幾種不同的狀態,可以使用視覺語言傳達:默認、突出、選擇以及禁用等。

選擇器(PICKERS)

選擇器用來在一個可用值列表中選擇某個值,和Web上的下拉選框功能類似。選擇器的擴展版本是日期選擇器,允許用戶滾動日期和時間列表來選擇一個月、日以及具體時間。

ios-picker.jpg

左:表視圖中的日期選擇器,右:選擇器作為鍵盤

除了背景色外,不可能更改其視覺風格或者尺寸。很多時候,選擇器位于屏幕的底部,像鍵盤一樣展示,但不能用在其他地方。

分段控件(SEGMENT CONTROLS)

分段控件包含一組至少兩個以上的分段,可用來過濾內容或者為清晰分類的內容創建標簽。

75.jpg

不帶icon與帶icon的分段控件

每個分段可包含一個文本標簽或者一個圖片(icon),但不能同時包含兩者。另外,不建議在一個分段控件中混合使用不同的分段風格,比如文本和圖片。每個分段的寬度會基于分段的數量自動調整(兩個分段各占50%,5個分段各占20%)。

滑桿(SLIDERS)

滑桿控件允許用戶從允許值范圍中選擇一個特定的值。由于使用滑桿選擇一個值的操作非常流暢,并且無需額外的步驟,所以建議在選擇預估值的時候使用滑桿,而不是選擇精確的值。比如滑桿可以很好地用來設置音量,用戶可以聽到和看到音量大小的不同,而通過輸入文本來設置精確的dB值是不切實際的。

76.jpg

不帶icon與帶icon的滑桿控件

可以為最小值和最大值設置icon,icon會展示在滑桿控件的開始和末尾兩端,從而在視覺上加強滑桿的目的。

進步器(STEPPER)

當用戶從一個有限的值范圍中(比如1-10)鍵入準確的值的時候,可使用進步器。進步器通常包含兩個分段按鈕,一個是降低當前值,一個是增加當前值。

77.jpg

進步器的視覺外觀支持高度自定義:

1.可使用自己的icon作為進步器按鈕;

2.當想維持iOS原生的外觀時,你可以自定義進步器邊框、背景以及icon的顏色。

3.如果你更進一步使用自定義,那你可以為進步器的按鈕和分割符使用完全自定義的圖片。

開關(SWITCH)

78.jpg

用戶可使用開關在”ON”和”OFF”兩種狀態間切換。設計師可自定義兩種狀態的顏色,但是開關按鈕的外觀和尺寸是設定好的不能更改。

鍵盤(KEYBOARDS)

有多重鍵盤類型可為特定的文本輸入提供最好的鍵盤。雖然你可以使用自己完全自定義的劍蘭,但默認的鍵盤無需調整風格和尺寸,很多時候更加方便一些。

來源:CocoaChina翻譯? ?編輯:suiling?

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這個怎么收藏啊。。。

    來自浙江 回復