ios設(shè)計規(guī)范?
iOS是運行于iPhone、iPad和iPod touch設(shè)備上、最常用的移動操作系統(tǒng)之一。作為互聯(lián)網(wǎng)應(yīng)用的開發(fā)者、產(chǎn)品經(jīng)理、體驗設(shè)計師,都應(yīng)當理解并熟悉平臺的設(shè)計規(guī)范。這有利于提高我們的工作效率,保證用戶良好的體驗。iOS設(shè)計規(guī)范系列共10篇。本文是第8篇,介紹圖標和圖像(Icons and Images)。
一、圖片尺寸和分辨率(Image Size and Resolution)
iOS屏幕上放置內(nèi)容的坐標系統(tǒng),是基于以點為單位的測量值,該測量值是映射到顯示器的像素。
標準分辨率顯示器的像素密度為1:1(或@1X),其中一個像素等于一個點。高分辨率顯示屏具有更高的像素密度,提供2.0或3.0的比例因子(稱為@2x和@3x)。因此,高分辨率顯示需要更多像素的圖像。
例如:假設(shè)你有一個100px×100px的標準分辨率(@ 1x)圖像。該圖像的@ 2x版本為200px×200px,@ 3x版本為300px×300px。為所有支持的設(shè)備,提供所有圖標/圖片的高分辨率圖像。
根據(jù)設(shè)備的不同,你可以將每個圖片中的像素數(shù)乘以特定的比例因子來實現(xiàn)這個目的。
設(shè)計高分辨率作品
1)使用8像素 x 8像素的網(wǎng)格。
網(wǎng)格可以使線條保持清晰,并確保所有尺寸的內(nèi)容都盡可能清晰,減少修飾和銳化。將圖像邊界對齊到網(wǎng)格以最小化縮小時可能出現(xiàn)的半像素和模糊細節(jié)。
2)以適當?shù)母袷街谱鲌D稿。
通常,對位圖/柵格圖稿使用逐行掃描的PNG文件。
PNG支持透明性,并且由于它是無損的,因此壓縮偽像不會模糊重要的細節(jié)或更改顏色。對于需要諸如陰影,紋理和高光之類的效果的復(fù)雜藝術(shù)品,這是一個不錯的選擇。
對照片使用JPEG。它的壓縮算法通常會產(chǎn)生比無損格式小的尺寸,并且偽像很難在照片中辨別。但是,逼真的應(yīng)用程序圖標看起來最好是PNG。將PDF用于需要高分辨率縮放的字形和其他平面矢量插圖。
3)將8位調(diào)色板用于不需要全24位顏色的PNG圖形。
使用8位調(diào)色板可以減小文件大小,而不會降低圖像質(zhì)量。此調(diào)色板不適用于照片。
4)優(yōu)化JPEG文件以在大小和質(zhì)量之間找到平衡。
可以壓縮大多數(shù)JPEG文件,而不會明顯降低所得圖像的質(zhì)量。即使少量壓縮也可以節(jié)省大量磁盤空間。在每張圖像上進行壓縮設(shè)置實驗,以找到可以接受的最佳值。
5)提供圖像和圖標的替代文本標簽。
替代文本標簽在屏幕上不可見,但是它們使VoiceOver能夠以聽覺方式描述屏幕上的內(nèi)容,從而使視力障礙者的導(dǎo)航更加輕松。
二、應(yīng)用圖標(App Icon)
每個應(yīng)用程序都需要一個美麗而令人難忘的圖標,該圖標在App Store中引起人們的注意,并在主屏幕上脫穎而出。您的圖標是交流您的應(yīng)用目的的第一時間。它也出現(xiàn)在整個系統(tǒng)中,例如在“設(shè)置”和“搜索結(jié)果”中。
1)擁抱簡單。
找到一個可以捕捉應(yīng)用程序本質(zhì)的元素,并以簡單、獨特的形狀表達該元素。謹慎添加詳細信息。如果圖標的內(nèi)容或形狀過于復(fù)雜,則可能難以分辨細節(jié),尤其是在較小尺寸的情況下。
2)提供一個焦點。
設(shè)計帶有單個中心點的圖標,該圖標可以立即引起注意并清楚地標識您的應(yīng)用程序。
3)設(shè)計一個可識別的圖標。
人們不必分析圖標就可以看出它所代表的含義。例如,“郵件”應(yīng)用程序圖標使用一個信封,該信封通常與郵件相關(guān)聯(lián)。花時間設(shè)計一個美觀且引人入勝的抽象圖標,以藝術(shù)方式代表您的應(yīng)用程序的目的。
4)保持背景簡單,避免透明。
確保您的圖標不透明,并且不要弄亂背景。給它一個簡單的背景,以免影響附近的其他應(yīng)用程序圖標。您無需在整個圖標中填充內(nèi)容。
5)僅在必不可少的徽標或徽標的一部分時使用單詞。
應(yīng)用程序的名稱顯示在主屏幕上其圖標下方。請勿使用不必要的詞來重復(fù)名稱或告訴別人如何處理您的應(yīng)用,例如“觀看”或“播放”。如果您的設(shè)計包含任何文本,請強調(diào)與應(yīng)用程序提供的實際內(nèi)容相關(guān)的詞。
6)不要包含照片,屏幕截圖或界面元素。
小尺寸的照片細節(jié)可能很難看清。屏幕截圖對于應(yīng)用程序圖標而言過于復(fù)雜,通常無法幫助傳達應(yīng)用程序的用途。圖標中的界面元素具有誤導(dǎo)性和混亂性。
7)不要使用Apple硬件產(chǎn)品的副本。
Apple產(chǎn)品受版權(quán)保護,不能在您的圖標或圖像中復(fù)制。通常,避免顯示設(shè)備的副本,因為硬件設(shè)計會經(jīng)常更改,并且會使圖標顯得過時。
8)不要在整個界面中放置您的應(yīng)用程序圖標。
在整個應(yīng)用程序中看到用于不同目的的圖標可能會造成混淆。相反,請考慮合并圖標的配色方案。參見顏色。
9)針對不同的墻紙測試您的圖標。
您無法預(yù)測人們會為他們的主屏幕選擇哪些壁紙,因此,不要僅僅針對淺色或深色測試您的應(yīng)用。查看不同照片的外觀。在具有動態(tài)背景的實際設(shè)備上嘗試使用該設(shè)備,該動態(tài)背景會隨著設(shè)備的移動而改變視角。
10)保持圖標四角方形。
系統(tǒng)應(yīng)用一個自動將圖標角變圓的蒙版。
1. 應(yīng)用程序圖標屬性
所有應(yīng)用程序圖標都應(yīng)符合以下規(guī)范:
2. 應(yīng)用程序圖標大小
一旦安裝了應(yīng)用程序,每個應(yīng)用程序都必須提供小圖標以供在主屏幕和整個系統(tǒng)中使用,以及一個大圖標以在App Store中顯示。
為不同的設(shè)備提供不同大小的圖標。確保您的應(yīng)用圖標在您支持的所有設(shè)備上看起來都不錯。讓App Store圖標與小圖標相匹配。盡管App Store圖標的使用方式不同于小型圖標,但它仍然是您的應(yīng)用程序圖標。它通常應(yīng)與較小版本的外觀匹配,盡管由于沒有視覺效果應(yīng)用于它,因此它可以更豐富、更細致。
3. Spotlight搜索、設(shè)置和通知圖標
每個APP還應(yīng)提供一個小圖標,當APP名稱與Spotlight搜索中的關(guān)鍵詞匹配時,iOS可以顯示該圖標。
此外,提供可以顯示在系統(tǒng)內(nèi)置的“設(shè)置”APP中的小圖標,支持通知功能的APP也應(yīng)提供一個小圖標以顯示在通知中。確保所有圖標都能清楚地識別出你的APP,理想情況下,它們都應(yīng)與你的APP圖標相匹配。
如果你不提供這些圖標,iOS可能會縮小你的主應(yīng)用程序圖標顯示在這些位置上。
不要在“設(shè)置”圖標上添加疊加層或邊框。iOS會自動為所有圖標添加1像素描邊,以便它們在“設(shè)置”的白色背景上看起來更友好。
4. 用戶可選的應(yīng)用程序圖標
對于某些APP來說,定制是一項能夠喚起用戶共鳴并增強用戶體驗的功能。如果它能在你的APP中提供價值,你可以從APP中嵌入的一組預(yù)定義圖標讓用戶來選擇一個作為備用應(yīng)用圖標。
例如:一個體育APP可能為不同的球隊提供圖標,或者一個有明暗模式的APP可能會提供相應(yīng)的明暗圖標。
請注意,APP圖標只能根據(jù)用戶的請求進行更改,并且系統(tǒng)始終會向用戶提供此類更改的確認。
提供所有尺寸并且視覺上一致的備用圖標。與主應(yīng)用程序圖標一樣,每個備用圖標都作為一組大小不同的相關(guān)圖像提供。當用戶選擇備用圖標時,該圖標的相應(yīng)大小將替換主屏幕、Spotlight和系統(tǒng)等其他位置的圖標。
為了確保備用圖標在整個系統(tǒng)中統(tǒng)一顯示,避免讓用戶在主屏幕上看到一個版本的圖標,又在設(shè)置中的看到完全不同的版本的圖標,例如:提供與主應(yīng)用程序圖標相同尺寸的圖標(App Store圖標除外)。
三、系統(tǒng)圖標(System Icons)iOS12及更早版本
在iOS 13或更高版本中,更習慣使用SF符號來表示APP中的任務(wù)和模式。當你的APP在iOS 12或更早版本中運行時,請按照以下指南操作。系統(tǒng)提供內(nèi)置圖標,表示各種用例中的常見任務(wù)和內(nèi)容類型。
在運行iOS12及更早版本的APP中,盡可能使用這些內(nèi)置圖標是個好辦法,因為它們對用戶來說已經(jīng)很熟悉了。
按預(yù)期使用系統(tǒng)圖標。每個系統(tǒng)提供的圖像都有特定的、通用的含義。為了避免混淆用戶,每個圖像必須按照其含義和推薦的用法使用。為圖標提供文本標簽。備選文字標簽在屏幕上不可見,但它們讓解說者可以直觀地描述屏幕上的內(nèi)容,使視力障礙人士更容易導(dǎo)航。如果在系統(tǒng)提供的圖標里找不到符合你要求的圖標,請設(shè)計自定義圖標。設(shè)計自己的設(shè)備比濫用系統(tǒng)提供的圖標要好。
1. 導(dǎo)航欄和工具欄圖標
在導(dǎo)航欄和工具欄中使用以下圖標。
注:可以使用文本代替圖標來表示導(dǎo)航欄或工具欄中的項目。例如:日歷在工具欄中使用“今日”、“日歷”和“收件箱”。
還可以使用固定空間元素在導(dǎo)航圖標和工具欄圖標之間提供填充。
2. 標簽欄圖標
在標簽欄中使用以下圖標。
3. 主屏幕快速行動圖標
在主屏幕快速操作菜單中使用以下圖標。