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

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

1、分辨率和顯示尺寸

2、ios設(shè)備的各個(gè)型號(hào)的資源解決方案?和像素、 物理顯示尺寸

像素和物理像素呈現(xiàn)iOS設(shè)備都是平等的,但有一個(gè)例外:視網(wǎng)膜高清屏幕的iPhone 6優(yōu)先。 因?yàn)樗钠聊幌袼氐姆直媛实陀谧匀皇鞘裁碄3x決議,呈現(xiàn)內(nèi)容自動(dòng)調(diào)整大小以大約87%的原始大小(2208 x 1242像素適合的顯示分辨率1920 x 1080像素)。

請(qǐng)記住，所有的APP圖標(biāo)格式和切圖文件的格式都是24位的PNG

有關(guān)APP圖標(biāo)的圓角問題：

自從iOS 7應(yīng)用圖標(biāo)使用superellipse（超橢圓）的形狀。 因?yàn)樘O果沒有發(fā)布一個(gè)正式的模板的形狀,你將不得不使用一個(gè)?非官方的圖標(biāo)模板?,復(fù)制或多或少的形狀準(zhǔn)確的方法。

有關(guān)詳細(xì)ios風(fēng)格圖標(biāo)的計(jì)算方法：http://en.wikipedia.org/wiki/Superellipse

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

iOS7圖標(biāo)設(shè)計(jì)規(guī)范

25學(xué)堂提醒各位APP設(shè)計(jì)師：

我們?cè)O(shè)計(jì)好我們的APP圖標(biāo)尺寸是1024乘1024px ，不需要圓角 除非你是需要設(shè)計(jì)一些宣傳推廣效果圖才會(huì)用到圓角， ?上傳到APP store上 可以是直角。因?yàn)橄到y(tǒng)會(huì)自動(dòng)幫你生成一個(gè)比較規(guī)范帶圓角的圖標(biāo)。

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

字體設(shè)計(jì)規(guī)范：

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

ios設(shè)備的色彩搭配圖：

?

工具欄按鈕圖標(biāo)

圖標(biāo)用于酒吧應(yīng)該有兩個(gè)不同的州:默認(rèn)狀態(tài)描述風(fēng)格的筆劃寬度為1或1.5 pt和純色填充的活動(dòng)狀態(tài)。

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

你永遠(yuǎn)不應(yīng)該包含任何額外的影響如一個(gè)下拉陰影或內(nèi)心的陰影按鈕圖標(biāo),因?yàn)檫@些都是殘遺從先前的iOS版本(iOS 7重新設(shè)計(jì)之前)。 按鈕圖標(biāo)應(yīng)該畫在一個(gè)純色透明背景圖標(biāo)的形狀作為面具,和顏色以編程方式將被應(yīng)用。

活動(dòng)視圖圖標(biāo)

在活動(dòng)視圖圖標(biāo)(也稱為共享酥餅)用于在大綱設(shè)計(jì)風(fēng)格,但由于iOS 8日蘋果回歸到固體填充純白色背景圖標(biāo)。

常用的設(shè)計(jì)元素

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

狀態(tài)欄設(shè)計(jì)

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

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

導(dǎo)航欄設(shè)計(jì)

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

導(dǎo)航欄在iPhone 6肖像模式。

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

元素應(yīng)該遵循特定的排列模式。

1、后退按鈕應(yīng)該對(duì)齊左邊。

2、當(dāng)前視圖的標(biāo)題應(yīng)該集中在酒吧。

3、操作按鈕應(yīng)該是右側(cè)對(duì)齊。 如果可能的話,不應(yīng)該有超過一個(gè)主要行動(dòng),以避免錯(cuò)過點(diǎn)擊和維護(hù)簡單。

工具欄設(shè)計(jì)

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

類似的導(dǎo)航欄,工具欄可以修改的背景填充,是半透明的,模糊了底層的默認(rèn)內(nèi)容。

工具欄時(shí)應(yīng)該使用一個(gè)特定的視圖需要超過三個(gè)主要行動(dòng),不適合或在導(dǎo)航欄會(huì)混亂。

搜索欄設(shè)計(jì)

默認(rèn)搜索欄有兩種不同的風(fēng)格:杰出的和最小。 兩個(gè)版本有相同的功能。

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

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

搜索欄可以利用一個(gè)提示——一個(gè)簡短的句子介紹功能的上下文中搜索。 例如,?輸入城市、郵政編碼或機(jī)場。”

著名的搜索欄風(fēng)格,沒有和一個(gè)提示。

最小的搜索欄風(fēng)格。

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

標(biāo)簽欄

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

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

而最大的標(biāo)簽顯示在iphone 5,它可以顯示7在iPad上的標(biāo)簽,同時(shí)避免more-tab。

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

表視圖設(shè)計(jì)

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

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

平原

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

分組

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

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

默認(rèn)的

在默認(rèn)樣式表行有一個(gè)可選的圖像對(duì)齊左邊和一個(gè)標(biāo)題。

與字幕

字幕表風(fēng)格使一個(gè)小字幕文本行標(biāo)題下面。 它是有用的為進(jìn)一步解釋或短描述。

與價(jià)值

值表樣式允許您顯示一個(gè)特定值,相關(guān)行標(biāo)題。 類似于默認(rèn)風(fēng)格,每一行可以有一個(gè)圖像和一個(gè)標(biāo)題,都是左對(duì)齊。 標(biāo)題是緊隨其后的是右對(duì)齊標(biāo)簽的價(jià)值,通常顯示在一個(gè)稍微比標(biāo)題更微妙的文本顏色。

ios情態(tài)動(dòng)詞,泡芙和警報(bào)

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

活動(dòng)視圖設(shè)計(jì)

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

行動(dòng)

行動(dòng)表是用來執(zhí)行一個(gè)動(dòng)作從列表中可用的行動(dòng),迫使用戶的一個(gè)應(yīng)用程序來確認(rèn)一個(gè)行動(dòng)或取消它。

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

當(dāng)有足夠的可用空間(如。 iPad屏幕上),表直觀地轉(zhuǎn)變成行動(dòng)?泡芙烤盤再放?。 一個(gè)按鈕關(guān)閉視圖不需要了,因?yàn)殚_發(fā)一個(gè)目標(biāo)以外的地方種植將自動(dòng)關(guān)閉它。

警報(bào)

警報(bào)的目的是通知用戶關(guān)鍵信息并選擇迫使用戶對(duì)一些行動(dòng)作出決定。

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

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

編輯菜單

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

酥餅

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

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

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

情態(tài)動(dòng)詞

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

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

【1】一個(gè)標(biāo)題來描述任務(wù);

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

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

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

有三個(gè)不同的模態(tài)風(fēng)格:

1、全屏:覆蓋整個(gè)屏幕。

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

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

控制

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

按鈕

可能最常用控制總體是美好的按鈕。 因?yàn)閕OS 7,默認(rèn)按鈕的設(shè)計(jì)并沒有真正像一個(gè)按鈕了,而是更像一個(gè)純文本鏈接。 按鈕控件是高度可定制的,并且允許您風(fēng)格從文本風(fēng)格,陰影和顏色的圖標(biāo)前綴或集中如果沒有文本標(biāo)簽,以及完全定制的背景。

記住,一個(gè)按鈕可以有幾個(gè)州,這應(yīng)該與視覺語言傳達(dá):默認(rèn)情況下,突出顯示,選擇和禁用的。

拾荒者

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

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

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

段控制

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

段控制沒有和圖標(biāo)。

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

滑塊

滑塊控件允許用戶選擇一個(gè)特定的值允許的范圍值。 自選擇價(jià)值工程很順利,沒有任何步驟,滑塊建議選擇一個(gè)估計(jì),但不確切,價(jià)值。 例如,一個(gè)滑塊將是一個(gè)很好的控制設(shè)置音量,因?yàn)橛脩艨梢月牭讲煌?可以看到不同聲音很大聲,但一個(gè)文本輸入設(shè)定一個(gè)確切的分貝值將是不切實(shí)際的。

滑塊控件沒有和描述性的圖標(biāo)。

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

步進(jìn)

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

視覺上,步進(jìn)控制是高度可定制的:

【1】您可以使用您自己的圖標(biāo)為步進(jìn)按鈕;

【2】當(dāng)維護(hù)本機(jī)iOS看,您可以自定義的顏色邊界,利用色彩的顏色,背景和圖標(biāo)自動(dòng)設(shè)置顏色為每個(gè)這些元素;和

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

開關(guān)控件的設(shè)計(jì)尺寸

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

另外還有輸入法和鍵盤。

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