iOS11界面設(shè)計(jì)規(guī)范,附加iOS11所有控件PSD(最新資源片)
1.iOS設(shè)計(jì)主題(官方原話(huà)翻譯)
作為一名應(yīng)用設(shè)計(jì)師斩狱，您有機(jī)會(huì)提供一款非凡的產(chǎn)品忿檩，并將其推向App Store圖表的頂端。為此潜腻，您需要滿(mǎn)足對(duì)質(zhì)量和功能的高度期望窍育。
三大主題將iOS與其他平臺(tái)區(qū)分開(kāi)來(lái)：
明晰卡睦。在整個(gè)系統(tǒng)中，每個(gè)尺寸的文字都清晰可辨漱抓，圖標(biāo)精確清晰表锻，裝飾細(xì)膩而恰當(dāng)，并且對(duì)功能的強(qiáng)化重點(diǎn)激發(fā)了設(shè)計(jì)乞娄。負(fù)面的空間瞬逊，顏色，字體仪或，圖形和界面元素巧妙地突出重要內(nèi)容并傳達(dá)交互性确镊。
尊重。流暢的運(yùn)動(dòng)和清晰美觀的界面有助于人們理解并與內(nèi)容互動(dòng)范删，而不會(huì)與內(nèi)容競(jìng)爭(zhēng)蕾域。內(nèi)容通常填滿(mǎn)整個(gè)屏幕，而半透明和模糊往往暗示更多瓶逃。最小化邊框束铭，漸變和陰影的使用可保持界面輕盈通風(fēng)，同時(shí)確保內(nèi)容至關(guān)重要厢绝。
深度契沫。獨(dú)特的視覺(jué)層次和逼真的動(dòng)作傳達(dá)層次結(jié)構(gòu)，賦予生命力昔汉，促進(jìn)理解懈万。觸摸和發(fā)現(xiàn)提高了喜悅度拴清，并且在不丟失上下文的情況下訪(fǎng)問(wèn)功能和附加內(nèi)容。在您瀏覽內(nèi)容時(shí)会通，轉(zhuǎn)場(chǎng)提供深度感口予。
2.設(shè)計(jì)原則
為了最大限度地提高影響力和覆蓋面，請(qǐng)?jiān)谙胂竽膽?yīng)用身份時(shí)牢記以下原則涕侈。
2.1.審美的完整性
審美完整性代表了應(yīng)用程序的外觀和行為與其功能的整合程度沪停。例如，幫助人們執(zhí)行嚴(yán)肅任務(wù)的應(yīng)用程序可以通過(guò)使用細(xì)微裳涛，不顯眼的圖形木张，標(biāo)準(zhǔn)控件和可預(yù)測(cè)的行為來(lái)讓他們保持專(zhuān)注。另一方面端三，身臨其境的應(yīng)用程序（例如游戲）可以提供令人著迷的外觀舷礼，讓人感到有趣和興奮，同時(shí)鼓勵(lì)發(fā)現(xiàn)郊闯。
2.2.一致性
一致的應(yīng)用程序通過(guò)使用系統(tǒng)提供的界面元素妻献，眾所周知的圖標(biāo)，標(biāo)準(zhǔn)文本樣式和統(tǒng)一的術(shù)語(yǔ)來(lái)實(shí)現(xiàn)熟悉的標(biāo)準(zhǔn)和范例团赁。該應(yīng)用程序以人們期望的方式結(jié)合功能和行為育拨。
2.3.直接操作
直接操作屏幕上的內(nèi)容吸引人們并促進(jìn)理解。用戶(hù)在旋轉(zhuǎn)設(shè)備或使用手勢(shì)影響屏幕內(nèi)容時(shí)會(huì)遇到直接操作欢摄。通過(guò)直接操縱至朗，他們可以看到他們行動(dòng)的直接，可見(jiàn)的結(jié)果剧浸。
2.4.反饋
反饋意見(jiàn)確認(rèn)行動(dòng)并顯示結(jié)果以向人們通報(bào)。內(nèi)置的iOS應(yīng)用程序?yàn)槊總€(gè)用戶(hù)操作提供可感知的反饋矗钟。點(diǎn)擊時(shí)唆香，互動(dòng)元素會(huì)突出顯示，進(jìn)度指示器可以傳達(dá)長(zhǎng)時(shí)間運(yùn)行的狀態(tài)吨艇，而動(dòng)畫(huà)和聲音有助于明確操作結(jié)果躬它。
2.5.隱喻
當(dāng)應(yīng)用程序的虛擬對(duì)象和動(dòng)作隱喻熟悉的體驗(yàn)時(shí)，人們可以更快地學(xué)習(xí) - 無(wú)論是植根于真實(shí)還是數(shù)字世界东涡。隱喻在iOS中運(yùn)行良好冯吓，因?yàn)槿藗兣c屏幕進(jìn)行物理交互。他們移動(dòng)視圖以揭示下面的內(nèi)容疮跑。他們拖動(dòng)和滑動(dòng)內(nèi)容组贺。他們切換開(kāi)關(guān)，移動(dòng)滑塊祖娘，并滾動(dòng)選擇器值失尖。他們甚至可以翻閱書(shū)籍和雜志。
2.6.用戶(hù)控制
在整個(gè)iOS中，人們（而不是應(yīng)用程序）都在掌控之中掀潮。應(yīng)用程序可以建議采取行動(dòng)或警告危險(xiǎn)后果菇夸，但應(yīng)用程序接管決策通常是錯(cuò)誤的。最好的應(yīng)用程序在啟用用戶(hù)和避免不想要的結(jié)果之間找到了正確的平衡仪吧。通過(guò)保持交互元素的熟悉性和可預(yù)測(cè)性庄新，確認(rèn)破壞性行為并使取消操作變得容易，即使它們已經(jīng)在進(jìn)行中薯鼠，應(yīng)用程序也可以讓人感覺(jué)自己處于控制之下择诈。
iPhone X
iPhone X包含一個(gè)大尺寸，高分辨率人断，圓潤(rùn)的邊緣到邊緣的超級(jí)視網(wǎng)膜顯示屏吭从，可提供前所未有的身臨其境的內(nèi)容豐富體驗(yàn)。
屏幕尺寸
在縱向方向上恶迈，iPhone X上的顯示寬度與iPhone 6涩金，iPhone 7和iPhone 8的4.7英寸顯示屏的寬度相匹配。然而暇仲，iPhone X上的顯示比4.7英寸顯示屏高145pt步做，導(dǎo)致大約20％用于內(nèi)容的額外垂直空間。
縱向尺寸
1125px×2436px（375pt×812pt @3x）
景觀尺寸
2436px×1125px（812pt×375pt @3x）
布局
在為iPhone X設(shè)計(jì)時(shí)奈附，您必須確保布局充滿(mǎn)屏幕全度，并且不會(huì)被設(shè)備的圓角，其傳感器外殼或用于訪(fǎng)問(wèn)主屏幕的指示燈遮擋斥滤。
大多數(shù)使用標(biāo)準(zhǔn)将鸵，系統(tǒng)提供的UI元素（如導(dǎo)航欄，表格和集合）的應(yīng)用程序會(huì)自動(dòng)適應(yīng)設(shè)備的新外觀佑颇。背景材料擴(kuò)展到顯示器的邊緣顶掉，UI元素被適當(dāng)?shù)夭迦牒投ㄎ弧?/p>
對(duì)于具有自定義布局的應(yīng)用程序，支持iPhone X應(yīng)該也相對(duì)容易挑胸，尤其是如果您的應(yīng)用程序使用自動(dòng)布局并遵守安全區(qū)域和邊距布局指南痒筒。
在iPhone X上預(yù)覽您的應(yīng)用程序。
您可以使用Simulator（包含在Xcode中）預(yù)覽您的應(yīng)用程序并檢查剪輯和其他布局問(wèn)題茬贵。如果您的應(yīng)用支持橫向模式簿透，請(qǐng)確保您的布局看起來(lái)很棒，無(wú)論設(shè)備是向左還是向右旋轉(zhuǎn)解藻。顛倒的人像模式在iPhone X上不受支持老充。某些功能（如寬色影像）最適合在實(shí)際設(shè)備上進(jìn)行預(yù)覽。
提供全屏體驗(yàn)螟左。
確保背景延伸到顯示器的邊緣蚂维，并且可垂直滾動(dòng)的布局（如表格和集合）一直延伸到底部戳粒。
插入基本內(nèi)容以防止裁剪。
一般而言虫啥，內(nèi)容應(yīng)居中對(duì)稱(chēng)插入蔚约，以便在任何方向看起來(lái)很棒，不會(huì)被角落或設(shè)備的傳感器外殼卡住涂籽，或被訪(fǎng)問(wèn)主屏幕的指示器遮擋苹祟。為獲得最佳效果，請(qǐng)使用標(biāo)準(zhǔn)的系統(tǒng)提供的界面元素和自動(dòng)布局來(lái)構(gòu)建您的界面评雌。應(yīng)用程序應(yīng)堅(jiān)持UIKit定義的安全區(qū)域和布局邊距树枫，以確保根據(jù)設(shè)備和上下文進(jìn)行適當(dāng)?shù)牟迦搿０踩珔^(qū)域還可防止內(nèi)容與狀態(tài)欄景东，導(dǎo)航欄砂轻，工具欄和選項(xiàng)卡欄重疊。
當(dāng)設(shè)備處于橫向模式時(shí)斤吐，對(duì)于某些應(yīng)用程序（如游戲）來(lái)說(shuō)搔涝，可以將適當(dāng)?shù)目煽刂瓶丶胖迷谄聊幌路剑ㄑ由斓桨踩珔^(qū)域下方），以便為內(nèi)容提供更多空間和措。將控件放置在屏幕的頂部和底部時(shí)使用匹配的插頁(yè)庄呈，并在Home指示符周?chē)舫鲎銐虻目臻g，以便人們?cè)趪L試與控件進(jìn)行交互時(shí)不會(huì)意外定位它派阱。
注意狀態(tài)欄的高度诬留。
iPhone X上的狀態(tài)欄比其他iPhone上的狀態(tài)欄更高。如果您的應(yīng)用假設(shè)固定狀態(tài)欄高度用于將內(nèi)容定位到狀態(tài)欄下方贫母，則必須更新您的應(yīng)用以根據(jù)用戶(hù)設(shè)備動(dòng)態(tài)定位內(nèi)容文兑。請(qǐng)注意，當(dāng)語(yǔ)音錄制和位置跟蹤等后臺(tái)任務(wù)處于活動(dòng)狀態(tài)時(shí)腺劣，iPhone X上的狀態(tài)欄不會(huì)更改高度彩届。
如果您的應(yīng)用程序當(dāng)前隱藏了狀態(tài)欄，請(qǐng)重新考慮針對(duì)iPhone X的決定誓酒。
iPhone上的顯示高度為內(nèi)容提供了更多垂直空間，而不是顯示4.7英寸iPhone贮聂，并且狀態(tài)欄占據(jù)了應(yīng)用程序可能贏得的屏幕區(qū)域沒(méi)有充分利用靠柑，狀態(tài)欄也顯示人們覺(jué)得有用的信息，只應(yīng)該隱藏起來(lái)以換取附加價(jià)值吓懈。
重新使用現(xiàn)有作品時(shí)請(qǐng)注意寬高比差異歼冰。
iPhone X具有不同于4.7英寸iPhone的寬高比，因此全屏幕4.7英寸iPhone圖案在iPhone X上全屏顯示時(shí)會(huì)出現(xiàn)裁剪或信箱耻警。同樣隔嫡，全屏iPhone X圖片在顯示時(shí)會(huì)出現(xiàn)裁剪或無(wú)框在4.7英寸的iPhone上全屏顯示甸怕。確保重要的視覺(jué)內(nèi)容保留在兩個(gè)顯示屏尺寸上。
避免將交互式控件明確放置在屏幕的底部和角落腮恩。
人們?cè)陲@示器的底部邊緣使用滑動(dòng)手勢(shì)訪(fǎng)問(wèn)主屏幕和應(yīng)用切換器梢杭，這些手勢(shì)可能會(huì)取消您在此區(qū)域?qū)嵤┑淖远x手勢(shì)。屏幕的遠(yuǎn)角可能是人們難以舒適地到達(dá)的困難區(qū)域秸滴。
插入全角按鈕武契。延伸到屏幕邊緣的按鈕可能看起來(lái)不像按鈕。
尊重全寬按鈕兩側(cè)的標(biāo)準(zhǔn)UIKit邊距荡含。出現(xiàn)在屏幕底部的全寬按鈕看起來(lái)最好咒唆，它具有圓角并與安全區(qū)域的底部對(duì)齊，這也確保它不會(huì)與Home指示符發(fā)生沖突释液。
不要掩蓋或特別關(guān)注關(guān)鍵顯示功能全释。
不要試圖隱藏設(shè)備的圓角，傳感器外殼或通過(guò)在屏幕頂部和底部放置黑條來(lái)訪(fǎng)問(wèn)主屏幕的指示器误债。不要使用括號(hào)浸船，邊框，形狀或教學(xué)文字等視覺(jué)裝飾來(lái)特別關(guān)注這些區(qū)域找前。
允許自動(dòng)隱藏指示器以節(jié)省訪(fǎng)問(wèn)主屏幕糟袁。
當(dāng)啟用自動(dòng)隱藏時(shí)，如果用戶(hù)未觸摸屏幕幾秒鐘躺盛，指示器將淡出项戴。當(dāng)用戶(hù)再次觸摸屏幕時(shí)，它會(huì)再次出現(xiàn)槽惫。這種行為應(yīng)該僅用于被動(dòng)觀看體驗(yàn)周叮，如播放視頻或照片幻燈片。
Design Templates
Guides
Production Templates
UI Elements
期待你
最近開(kāi)通了一個(gè)公眾號(hào).壁紙相關(guān)的.獲取本文下載資源請(qǐng)關(guān)注后輸入'ios'獲取
