廢話不多說，跟隨25學堂的小編直接往下看吧。下文部分為有道翻譯過來的。如有不合理之處可以點擊底部的原文連接查看。

注釋：綠色的眼睛代表產(chǎn)品采用的是Retina視網(wǎng)膜技術

1、分辨率和顯示尺寸

2、ios設備的各個型號的資源解決方案?和像素、 物理顯示尺寸

像素和物理像素呈現(xiàn)iOS設備都是平等的,但有一個例外:視網(wǎng)膜高清屏幕的iPhone 6優(yōu)先。 因為它的屏幕像素的分辨率低于自然是什么@3x決議,呈現(xiàn)內容自動調整大小以大約87%的原始大小(2208 x 1242像素適合的顯示分辨率1920 x 1080像素)。

請記住，所有的APP圖標格式和切圖文件的格式都是24位的PNG

有關APP圖標的圓角問題：

自從iOS 7應用圖標使用superellipse（超橢圓）的形狀。 因為蘋果沒有發(fā)布一個正式的模板的形狀,你將不得不使用一個?非官方的圖標模板?,復制或多或少的形狀準確的方法。

有關詳細ios風格圖標的計算方法：http://en.wikipedia.org/wiki/Superellipse

iOS8 App圖標模板尺寸規(guī)范

iOS7圖標設計規(guī)范

25學堂提醒各位APP設計師：

我們設計好我們的APP圖標尺寸是1024乘1024px ，不需要圓角 除非你是需要設計一些宣傳推廣效果圖才會用到圓角， ?上傳到APP store上 可以是直角。因為系統(tǒng)會自動幫你生成一個比較規(guī)范帶圓角的圖標。

另外，蘋果官方對外說明APP圖標是采用網(wǎng)格系統(tǒng)來制作的。但是，這個只是參考。很多圖標并不是一定要嚴格按照這個網(wǎng)格系統(tǒng)來設計?？梢噪S意點。

字體設計規(guī)范：

ios系統(tǒng)默認字體都是Helvetica Neue iOS版本。 蘋果iOS 7日以來一直在使用稍微修改版本的字體,但使用的原始Helvetica Neue設計過程是完全好的。 除了默認字體,有許多可供選擇的字體使用。 你可以找到預先安裝的字體的完整列表：http://iosfonts.com/

ios設備的色彩搭配圖：

?

工具欄按鈕圖標

圖標用于酒吧應該有兩個不同的州:默認狀態(tài)描述風格的筆劃寬度為1或1.5 pt和純色填充的活動狀態(tài)。

PX和PT轉換的公式：pt=px乘以3/4。也就是線性圖標的線的大小1.34px 或2px 通常我們繪制線性圖標的線的大小是2px。務必記住。

你永遠不應該包含任何額外的影響如一個下拉陰影或內心的陰影按鈕圖標,因為這些都是殘遺從先前的iOS版本(iOS 7重新設計之前)。 按鈕圖標應該畫在一個純色透明背景圖標的形狀作為面具,和顏色以編程方式將被應用。

活動視圖圖標

在活動視圖圖標(也稱為共享酥餅)用于在大綱設計風格,但由于iOS 8日蘋果回歸到固體填充純白色背景圖標。

常用的設計元素

iOS的隨時可用的視圖集合提供了一個偉大的和控制,允許應用程序開發(fā)人員快速構建接口。 可以定制一些元素在一定水平,但其他不可能也不應該。 iOS在設計應用程序時,你應該知道的工具集,盡可能地堅持下去。 然而,在某些情況下,有必要構建一個定制的控制,因為你需要一個更自定義外觀或想要改變現(xiàn)有的功能控制(危險區(qū)域)。 幾乎一切皆有可能,有時打破規(guī)則是有意義的,但總是三思而后行。

狀態(tài)欄設計

狀態(tài)欄包含基本系統(tǒng)信息,如當前的載體,時間、電池狀態(tài)和更多。 這是視覺上連接到導航欄,并使用相同的背景填充。 匹配你的應用程序的風格,保證可讀性,狀態(tài)欄的內容有兩種不同的風格:黑(黑),光(白色)。

是可能的隱藏狀態(tài)欄,但三思而后行。 例如,用戶可能感興趣的知道如果他們連接到一個無線網(wǎng)絡應用程序時經(jīng)常下載web內容或者藍牙時啟用應用程序需要一個藍牙鏈接到第三方硬件。 隱藏狀態(tài)欄的一個有效的原因是當您想要刪除所有從單個元素干擾,例如,當顯示全屏圖像畫廊等內容。

導航欄設計

導航欄包含控制瀏覽應用程序視圖并選擇管理當前視圖的內容。 它總是出現(xiàn)在屏幕的頂端,下面的狀態(tài)欄。 默認情況下,背景有點半透明的和模糊的內容下面條。 酒吧的背景填充可以設置為純色,漸變或自定義bitmap-pattern。

導航欄在iPhone 6肖像模式。

導航欄在橫向模式的iPhone 4 s。 欄的高度減少12 pt,除了ipad。 這也是一個常見的做法在橫向模式隱藏狀態(tài)欄。

元素應該遵循特定的排列模式。

1、后退按鈕應該對齊左邊。

2、當前視圖的標題應該集中在酒吧。

3、操作按鈕應該是右側對齊。 如果可能的話,不應該有超過一個主要行動,以避免錯過點擊和維護簡單。

工具欄設計

工具欄包含一組操作管理或操縱當前視圖的內容。 在iPhone上,它總是會出現(xiàn)屏幕底部的邊緣對齊,在iPad上,它也可以顯示在屏幕的頂部對齊。

類似的導航欄,工具欄可以修改的背景填充,是半透明的,模糊了底層的默認內容。

工具欄時應該使用一個特定的視圖需要超過三個主要行動,不適合或在導航欄會混亂。

搜索欄設計

默認搜索欄有兩種不同的風格:杰出的和最小。 兩個版本有相同的功能。

1、只要沒有用戶輸入的文本,一個占位符文本顯示在酒吧,和可選的書簽圖標,可以用來訪問最近或保存的搜索。

2、一旦輸入一個搜索詞,占位符就消失了,一個清晰的按鈕刪除所輸入的值出現(xiàn)在右邊緣。

搜索欄可以利用一個提示——一個簡短的句子介紹功能的上下文中搜索。 例如,?輸入城市、郵政編碼或機場?！?/span>

著名的搜索欄風格,沒有和一個提示。

最小的搜索欄風格。

提供更多的控制搜索查詢,就可以連鎖范圍的搜索欄欄。 酒吧將使用相同的風格范圍搜索欄和有明確定義的類時可能有用的搜索結果。 例如,在一個音樂軟件,搜索結果可以通過翻譯再過濾,專輯或歌曲。

標簽欄

標簽欄是用來允許用戶快速瀏覽不同視圖的應用程序,它應該只被用于這一目的。 它總是出現(xiàn)在屏幕的底部邊緣。 默認情況下,它有點半透明的和使用相同的系統(tǒng)模糊的底層內容導航欄。

一個標簽欄只能包含固定最大數(shù)量的標簽。 一旦標簽多于最大計數(shù),最后一個選項卡顯示將取代?More-tab”,將導致隱藏的標簽列表,與一個選項來重新進行排序顯示的選項卡。

而最大的標簽顯示在iphone 5,它可以顯示7在iPad上的標簽,同時避免more-tab。

對新的信息通知用戶視圖,有時是有意義的應用徽章數(shù)到一個標簽欄按鈕。 暫時禁用視圖,如果相關選項卡按鈕不應該完全隱藏的;相反,它應該淡出視覺殘疾人交流狀態(tài)。

表視圖設計

表視圖用于顯示小到大量的列表樣式信息在一個或多個列,選擇幾行劃分為單獨的部分或組織。

有兩種基本的表視圖類型,應該使用,根據(jù)你提供的數(shù)據(jù)類型。

平原

普通表包含的行數(shù),頂部有一個頭和一個頁腳后最后一行。 可以顯示一個垂直導航在屏幕右邊緣的瀏覽,這是有意義的呈現(xiàn)一個大數(shù)據(jù)集時,可以以某種方式排序(例如 按字母順序降序)。

分組

一個分組表允許您組織行組織。 每組可以有一個標題(最好用來描述集團)的上下文以及頁腳(有利于幫助文本,等等)。 分組表需要包含至少一個組,每組需要包含至少一行。

為表視圖類型,幾個款式可以顯示數(shù)據(jù)的方式,允許用戶輕松掃描,可能讀取和修改它。

默認的

在默認樣式表行有一個可選的圖像對齊左邊和一個標題。

與字幕

字幕表風格使一個小字幕文本行標題下面。 它是有用的為進一步解釋或短描述。

與價值

值表樣式允許您顯示一個特定值,相關行標題。 類似于默認風格,每一行可以有一個圖像和一個標題,都是左對齊。 標題是緊隨其后的是右對齊標簽的價值,通常顯示在一個稍微比標題更微妙的文本顏色。

ios情態(tài)動詞,泡芙和警報

iOS提供各種風格的臨時視圖,可以用來顯示、編輯和操縱數(shù)據(jù)的方式最適合在一個給定的情況。 雖然每個臨時視圖存在一個非常具體的目標,每一個看起來不同,所有臨時視圖仍然有一個共同點:在顯示時,它的最高指數(shù)層在當前視圖(它們出現(xiàn)的一切),和內容下面顯示的半透明的黑色背景。

活動視圖設計

一個活動視圖用于完成特定的任務。 這些任務可以默認系統(tǒng)任務,比如共享內容通過可用的選項,或者他們可以完全自定義動作。 在設計圖標定制任務按鈕時,您應該遵循相同的指導方針的活動狀態(tài)欄按鈕圖標——固體填充,沒有效果,一個透明背景。

行動

行動表是用來執(zhí)行一個動作從列表中可用的行動,迫使用戶的一個應用程序來確認一個行動或取消它。

在肖像模式(在小景觀屏幕分辨率),動作總是顯示為列表按鈕滑動,呆在屏幕的底部邊緣。 在這種情況下,一個動作表應該總是有一個取消按鈕關閉視圖,而不是執(zhí)行任何上市行動。

當有足夠的可用空間(如。 iPad屏幕上),表直觀地轉變成行動?泡芙烤盤再放?。 一個按鈕關閉視圖不需要了,因為開發(fā)一個目標以外的地方種植將自動關閉它。

警報

警報的目的是通知用戶關鍵信息并選擇迫使用戶對一些行動作出決定。

警報視圖總是包含一個標題文本,而不應超過一行和一個(純信息提醒,如。 ?OK”)或兩個(需要決定的警報,如。 ,?”和?取消”)按鈕。

同樣,你可以添加一個消息文本,如果需要,以及兩個文本輸入字段,其中一個可能是一個蒙面的輸入字段,這是適當?shù)拿艽a或密碼等敏感信息。

編輯菜單

編輯菜單允許用戶執(zhí)行操作,如復制、粘貼、剪切、等等,當一個元素被選中(文本、圖像,其他人)。 雖然可以控制哪些業(yè)務用戶可以選擇,編輯菜單設置的視覺外觀和沒有完全可配置的,除非你構建自己的定制編輯菜單。

酥餅

泡芙烤盤再放非常有用當一個特定的行動需要多個用戶輸入之前。 添加一個項目就是一個很好的例子,它有幾個屬性,需要在項目可以創(chuàng)建。

只在水平環(huán)境中,泡芙揭示下面相關的控件(如按鈕),上面的箭頭指向控制而打開。 酥餅的背景使用稍微減少不透明度和模糊了下面的內容,就像許多其他UI元素iOS 7以來所做的。

酥餅是一種強大的臨時視圖可以包含各種對象(如自己的導航欄、表視圖、地圖或web視圖。 當種植規(guī)模增長時,由于包含元素的數(shù)量和到達窗口的底部邊緣,在種植可以滾動。

情態(tài)動詞

情態(tài)動詞是一種有用的視圖的任務需要多個命令或由用戶輸入。 他們出現(xiàn)在一切之上,而開放,塊交互與其他交互元素下面。

典型的模態(tài)通常提供:

【1】一個標題來描述任務;

【2】不保存按鈕關閉模態(tài)或執(zhí)行任何其他操作;

【3】一個按鈕來保存或提交任何輸入信息;和

【4】用戶輸入的各種元素模態(tài)的身體。

有三個不同的模態(tài)風格:

1、全屏:覆蓋整個屏幕。

2、頁表:在肖像模式下,模態(tài)包括底層的內容只是部分,留下的一小部分父視圖可見下面半透明的黑色背景。 以景觀模式,頁面表模態(tài)行為就像一個全屏模式。

3、格式表:在肖像模式下,模態(tài)出現(xiàn)在屏幕的中心,讓周圍的父視圖的內容可見下面半透明的黑色背景。 模態(tài)的位置時自動調整鍵盤需要顯示出來。 以景觀模式,頁面表模態(tài)行為就像一個全屏模式。

控制

iOS提供了廣泛的控制基本上你能想到的任何必需的輸入類型。 下面你會發(fā)現(xiàn)最重要的(常用的),但是對于可用的完整列表控件,你應該看看?iOS開發(fā)庫?。

按鈕

可能最常用控制總體是美好的按鈕。 因為iOS 7,默認按鈕的設計并沒有真正像一個按鈕了,而是更像一個純文本鏈接。 按鈕控件是高度可定制的,并且允許您風格從文本風格,陰影和顏色的圖標前綴或集中如果沒有文本標簽,以及完全定制的背景。

記住,一個按鈕可以有幾個州,這應該與視覺語言傳達:默認情況下,突出顯示,選擇和禁用的。

拾荒者

器是用來從一個列表中選擇一個值可用的值。 等效網(wǎng)絡將是一個選擇框(選擇器控制也被用于當觸摸選擇在Safari)。 延長datepicker版本的選擇器,它允許用戶滾動的日期和時間,并選擇值列表(可配置)天,月和時間。

左:datepicker顯示在表視圖中,右:選擇鍵盤。

除了背景色,這是不可能改變視覺風格或大小(鍵盤)一樣選擇器控制。 大多數(shù)時候,他們出現(xiàn)在屏幕的底部,鍵盤在哪里出現(xiàn),但是可以在其他位置使用它們。

段控制

一段控制包含一組段(至少兩個),可用于諸如過濾內容或創(chuàng)建標簽清晰分類的信息類型。

段控制沒有和圖標。

每一段可以包含一個文本標簽或一個圖像(圖標),但從來沒有。 此外,使用一組混合段類型(文本和圖像)在一個段控制是不推薦。 一個段的寬度變化自動基于段的數(shù)量(兩個部分:50%的完全控制寬度、5部分:控制寬度)總額的20%。

滑塊

滑塊控件允許用戶選擇一個特定的值允許的范圍值。 自選擇價值工程很順利,沒有任何步驟,滑塊建議選擇一個估計,但不確切,價值。 例如,一個滑塊將是一個很好的控制設置音量,因為用戶可以聽到不同,可以看到不同聲音很大聲,但一個文本輸入設定一個確切的分貝值將是不切實際的。

滑塊控件沒有和描述性的圖標。

可以設置最小和最大值,圖標都顯示在開始和結束的邊緣滑塊控制,從而允許您可視化擁抱滑塊的目的。

步進

應該使用步進,當用戶輸入一個精確的值應該從有限范圍的可能值(如。 ,1 - 10)。 步進總是包含兩個分割按鈕,用于降低,另一個用于提高當前值。

視覺上,步進控制是高度可定制的:

【1】您可以使用您自己的圖標為步進按鈕;

【2】當維護本機iOS看,您可以自定義的顏色邊界,利用色彩的顏色,背景和圖標自動設置顏色為每個這些元素;和

【3】如果你想走得更遠,你可以使用完全自定義背景圖片為步進按鈕以及分隔符。

開關控件的設計尺寸

開關允許用戶快速之間切換兩種可能的狀態(tài):。是復選框的iOS應用程序。 可以定制的顏色和關閉狀態(tài),但開關按鈕的外觀和大小的開關設置,不能更改。

另外還有輸入法和鍵盤。

原文地址：http://iosdesign.ivomynttinen.com/