文末有福利

說(shuō)到IOS，大家都很清楚。

蘋(píng)果公司開(kāi)發(fā)的便攜式操作系統(tǒng)。

ipad、iphone、ipod觸摸等，

正在使用這個(gè)系統(tǒng)。

可以說(shuō)，蘋(píng)果產(chǎn)品的成功，

iOS系統(tǒng)占據(jù)了大半的功勞。

此后，蘋(píng)果公司一路開(kāi)疆?dāng)U土，

從一個(gè)瀕臨破產(chǎn)的公司，

發(fā)展到市值萬(wàn)億的巨無(wú)霸，

而成功的背后，

離不開(kāi)它一直以來(lái)的創(chuàng)新精神。

iOS歷程：

蘋(píng)果的設(shè)計(jì)從未停止過(guò)“創(chuàng)新”。2007年1月蘋(píng)果發(fā)布了iOS手持設(shè)備操作系統(tǒng)，這為未來(lái)的移動(dòng)設(shè)備發(fā)展做出了非常重要的貢獻(xiàn)。在2013年秋，蘋(píng)果推出了“扁平化”設(shè)計(jì)，這是自2007年iPhone問(wèn)世以來(lái)，iOS操作系統(tǒng)進(jìn)行的最大一次改版?；仡檌OS系統(tǒng)的發(fā)展，就會(huì)發(fā)現(xiàn)蘋(píng)果最不缺的就是創(chuàng)新。如今，已經(jīng)進(jìn)入iOS 13的時(shí)代，走過(guò)了整整12年的時(shí)間。

蘋(píng)果的目標(biāo)永遠(yuǎn)沒(méi)有改變，做極致的設(shè)計(jì)，讓用戶的易用性達(dá)到最好。當(dāng)然，這也是設(shè)計(jì)的原則。蘋(píng)果的設(shè)計(jì)在視覺(jué)上注重3點(diǎn)：主次分明、去粗取精、醒目易懂。

這樣的UI設(shè)計(jì)才能稱得上是情懷，而極致體現(xiàn)在給用戶帶來(lái)的驚喜上。下面我們先來(lái)看看iOS的幾個(gè)極致的細(xì)節(jié)設(shè)計(jì)。

第1個(gè)：iOS鍵盤(pán)上每個(gè)字母的觸控區(qū)域的大小是不一樣的，會(huì)隨著輸入的頻率發(fā)生改變，如圖所示。

iOS的鍵盤(pán)

第2個(gè)：為了讓文本的使用更加方便，關(guān)鍵信息會(huì)自動(dòng)加上鏈接，例如網(wǎng)址、地址、電話和時(shí)間等信息，如圖所示。

iOS的文本

第3個(gè)：在早期的iOS 6.0系統(tǒng)中，此時(shí)的設(shè)計(jì)還遵循著“擬物化”設(shè)計(jì)，音樂(lè)滑動(dòng)條的設(shè)計(jì)高度還原了金屬的真實(shí)效果，當(dāng)用戶傾斜手機(jī)時(shí)，會(huì)發(fā)現(xiàn)金屬音量滑塊的反光效果會(huì)閃動(dòng)，如圖所示。

iOS 6.0系統(tǒng)的音樂(lè)滑動(dòng)條

第4個(gè)：為了滿足用戶在不同場(chǎng)景中都能操作方便，會(huì)將信息以多種入口進(jìn)行展示。例如在短信中考慮到信息文本過(guò)長(zhǎng)的情況，用戶可能第一時(shí)間無(wú)法看到時(shí)間信息，因此iOS的短信在左滑時(shí)也可以看到時(shí)間，從而方便用戶閱讀時(shí)間信息，如圖所示。

iOS的短信

下面數(shù)藝君為大家詳細(xì)介紹一下iOS的5大設(shè)計(jì)原則，希望大家能從這些設(shè)計(jì)原則中尋找到屬于自己的設(shè)計(jì)。

01 凸顯內(nèi)容原則

凸顯內(nèi)容原則就是去除多余的元素，做極致的設(shè)計(jì)！在iOS的設(shè)計(jì)中，經(jīng)常會(huì)利用整個(gè)屏幕背景進(jìn)行設(shè)計(jì)，這樣可以讓信息的聚合度變得更好，如圖所示。

用整屏背景進(jìn)行設(shè)計(jì)

使用半透明的效果能加強(qiáng)場(chǎng)景的代入感，讓用戶知道是從哪打開(kāi)的，可以更好地體現(xiàn)出上下層的關(guān)聯(lián)性，如圖所示。

用半透明加強(qiáng)場(chǎng)景的代入感

在閱讀信息的時(shí)候，為了解決不同用戶的需求，可以對(duì)文本的字號(hào)大小進(jìn)行設(shè)定，從而保證閱讀性，如圖所示。

設(shè)定文本的字號(hào)大小

在iOS 7.0之后，導(dǎo)航中的按鈕實(shí)現(xiàn)了無(wú)框化，只需要通過(guò)顏色進(jìn)行區(qū)分，通過(guò)高亮的文字即可體現(xiàn)文字的可點(diǎn)擊性，如圖所示。

無(wú)框化的按鈕

當(dāng)在一個(gè)頁(yè)面中存在很多按鈕時(shí)，為了降低頁(yè)面的信息壓力，頁(yè)面中的按鈕多數(shù)使用的是描邊形式的“幽靈按鈕”，如圖所示。

用描邊按鈕降低頁(yè)面的信息壓力

02 統(tǒng)一化原則

統(tǒng)一化原則主要體現(xiàn)在視覺(jué)統(tǒng)一和交互統(tǒng)一兩個(gè)方面。在視覺(jué)統(tǒng)一方面，要講究字體、顏色和元素的統(tǒng)一性，標(biāo)題字號(hào)的統(tǒng)一，主色彩和輔助顏色的統(tǒng)一都是能夠體現(xiàn)出產(chǎn)品一致性的基本標(biāo)準(zhǔn)，關(guān)于這方面的知識(shí)將在后面的內(nèi)容中進(jìn)行詳細(xì)介紹；交互統(tǒng)一，是指操作使用的一致性，在一個(gè)軟件中保持交互形式的一致性可以大大降低用戶的操作時(shí)間。

下面來(lái)對(duì)比一下錘子手機(jī)和蘋(píng)果手機(jī)的時(shí)鐘設(shè)置方式。在錘子手機(jī)的界面中設(shè)置鬧鐘、秒表和計(jì)時(shí)器的方式都是在不同的位置進(jìn)行設(shè)定的，交互的形式有點(diǎn)擊和下拉方式，其視覺(jué)表現(xiàn)的形式也不相同，對(duì)于第一次使用的用戶來(lái)說(shuō)，操作起來(lái)會(huì)比較困難，如圖所示。

錘子手機(jī)鬧鐘、秒表和計(jì)時(shí)器設(shè)置

而在蘋(píng)果的設(shè)計(jì)中更為講究操作的統(tǒng)一性，操作方式全是點(diǎn)擊，秒表和計(jì)時(shí)器都是使用點(diǎn)擊開(kāi)啟的方式，這樣的設(shè)計(jì)能讓用戶在最短的時(shí)間內(nèi)找到正確的操作方式，如圖所示。由此看來(lái)，交互統(tǒng)一比視覺(jué)統(tǒng)一在用戶體驗(yàn)方面要更重要一些。

蘋(píng)果手機(jī)鬧鐘、秒表和計(jì)時(shí)器設(shè)置

在交互中要遵循從哪來(lái)回哪去的原則，要保持路徑的統(tǒng)一性?？梢钥吹皆趇OS系統(tǒng)中，點(diǎn)擊App主圖標(biāo)后會(huì)基于產(chǎn)品的icon放大展示出產(chǎn)品的主界面，如圖所示，當(dāng)按Home鍵退到主頁(yè)界面的時(shí)候也是基于產(chǎn)品icon的縮放進(jìn)行消失的。這樣的交互方式能更好地體現(xiàn)出頁(yè)面與App之間的關(guān)系。

基于產(chǎn)品的icon放大展示主界面

03 適應(yīng)化原則

適應(yīng)化原則包括了場(chǎng)景適應(yīng)和屏幕適應(yīng)兩種，一個(gè)指的是使用場(chǎng)景的適應(yīng)，另外一個(gè)是屏幕的適配。

在蘋(píng)果的原生天氣App中，不僅可以通過(guò)天氣的變化進(jìn)行自適應(yīng)匹配，還可以根據(jù)時(shí)間來(lái)區(qū)分白天和黑夜，讓用戶在不同的環(huán)境和時(shí)間下都能感受到軟件的智能性，如圖所示。

蘋(píng)果的原生天氣App

在很多的閱讀類產(chǎn)品中也會(huì)有日夜的切換功能，從而保證用戶在夜晚關(guān)燈的模式下還能舒服地進(jìn)行閱讀，如圖所示。

日夜切換功能

有時(shí)候可以通過(guò)硬件和軟件的結(jié)合來(lái)對(duì)場(chǎng)景進(jìn)行適應(yīng)，在TCL 360空氣凈化器的界面設(shè)計(jì)中，可以通過(guò)不同的顏色來(lái)表現(xiàn)空氣的指數(shù)，這樣可以用直觀的方式表現(xiàn)空氣的質(zhì)量，如圖所示。

TCL 360空氣凈化器的界面

相比于適應(yīng)化原則中的場(chǎng)景適應(yīng)，屏幕適應(yīng)則更為重要。在iPad的界面中要考慮橫屏和豎屏的效果，設(shè)置界面的左側(cè)菜單的寬度是保持不變的，而右側(cè)的列表信息會(huì)發(fā)生適應(yīng)變化，這是常見(jiàn)的適配方式，可以有效保證視覺(jué)的統(tǒng)一性，如圖所示。

屏幕適應(yīng)

在橫屏和豎屏中的適配中，經(jīng)常會(huì)出現(xiàn)視覺(jué)不平衡的情況，我們會(huì)對(duì)單獨(dú)的控件進(jìn)行調(diào)整適配。

例如計(jì)時(shí)器的時(shí)間選擇框，為了讓豎屏模式下的界面顯得更為飽滿，對(duì)其單獨(dú)進(jìn)行了放大設(shè)計(jì)，讓頁(yè)面從視覺(jué)上看起來(lái)更為舒服，如圖所示。

計(jì)時(shí)器的時(shí)間選擇框

在手機(jī)移動(dòng)端中，蘋(píng)果有iPhone4、iPhone5、iPhone6和iPhone6Plus等不同的機(jī)型，其中iPhone4和iPhone5的屏幕比例還不一樣，有時(shí)候?yàn)榱俗層脩粼诓煌臋C(jī)型上都能看到想要展示的信息，就需要考慮到在不同比例上的屏幕適應(yīng)。

例如在圖1中，直接嵌套后可以看到在iPhone4下的界面展示不完整，而單獨(dú)對(duì)iPhone4中的按鈕進(jìn)行縮放處理，讓整體功能（下面的兩個(gè)按鈕）在一個(gè)頁(yè)面中展示完整，可以大大節(jié)省展示空間，如圖2所示。

圖1：直接嵌套后的界面展示不完整

圖2：?jiǎn)为?dú)對(duì)按鈕進(jìn)行縮放后可展示完整

在設(shè)計(jì)工作中，我們應(yīng)該設(shè)計(jì)哪個(gè)尺寸？如何只做一套設(shè)計(jì)圖就可以完成多屏幕的適配呢？下面以iOS的界面尺寸為例來(lái)進(jìn)行講解。

蘋(píng)果手機(jī)的分3種主要的分辨率，即640px×1336px、750px×1334px和1242px×2208px，其中切圖的后綴分別為@2x、@2x和@3x，如圖所示。在現(xiàn)在的硬件設(shè)備趨勢(shì)下，效果圖可以出iPhone6的尺寸大小，也就是750px×1334px的大小，可以通過(guò)iPhone6的基礎(chǔ)尺寸來(lái)進(jìn)行適配。

蘋(píng)果手機(jī)的分辨率

在Photoshop CC 2015中新建文檔時(shí)，可以從“畫(huà)板大小”選項(xiàng)中找到iPhone機(jī)型的分辨率，如圖1所示。一般會(huì)使用畫(huà)板的方式來(lái)制作App界面，因?yàn)樵谝粋€(gè)畫(huà)布中可以建立多個(gè)畫(huà)板，這樣可以同時(shí)處理多個(gè)頁(yè)面，從而保證頁(yè)面的統(tǒng)一性，同時(shí)也方便進(jìn)行制作，如圖2所示。

圖1：在畫(huà)板大小中設(shè)置iPhone分辨率

圖2：在一個(gè)畫(huà)布中建立多個(gè)畫(huà)板

因?yàn)樵O(shè)計(jì)的效果圖是iPhone6的尺寸（750px×1334px），所以在設(shè)計(jì)的過(guò)程中我們要理解界面元素的適配原則。由于iPhone5和iPhone6的屏幕精度是一樣的，所以從iPhone5到iPhone6的適配可以進(jìn)行拉升適配，但是不同元素的拉升方式也是不同的。iPhone5和iPhone6共用一套切圖，如圖所示是同款A(yù)pp在不同屏幕下的截圖大小對(duì)比。

同款A(yù)pp在不同屏幕下的大小對(duì)比

在將iPhone5適配到iPhone6時(shí)，頭像和文字的大小可以保持不變，導(dǎo)航條可以通過(guò)左右進(jìn)行拉伸適配，如圖1所示；對(duì)于文字的適配，可以根據(jù)屏幕的寬度進(jìn)行折行顯示，如圖2所示；對(duì)于按鈕控件的適配，可以保持按鈕的高度進(jìn)行左右拉升適配，如圖3所示；對(duì)于圖片適配，可以進(jìn)行等比縮放，如圖4所示。

圖1：導(dǎo)航條的適配

圖2：文字的適配

圖3：按鈕控件的適配

圖片的適配

對(duì)于iPhone6適配到iPhone 6 Plus就更好辦了，因?yàn)閕Phone6Plus的尺寸是iPhone6的1.5倍，所以只需要出一套@3x的切圖就可以了（1.5倍iPhone6的切圖）。

04 層級(jí)性原則

很多設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中經(jīng)常會(huì)將頁(yè)面設(shè)計(jì)得很豐富，每個(gè)圖標(biāo)每個(gè)形狀都制作得很細(xì)致，但是做完以后發(fā)現(xiàn)整體頁(yè)面變得雜亂無(wú)章，沒(méi)有聚焦點(diǎn)，這就是沒(méi)有抓住主次的原因。

那什么是設(shè)計(jì)的層級(jí)呢？讓用戶視線集中在主要的任務(wù)上！從視覺(jué)上認(rèn)知的一種空間關(guān)系，有層級(jí)的設(shè)計(jì)能讓用戶提高效率引導(dǎo)用戶閱讀。從閱讀的視線來(lái)講，在閱讀信息的時(shí)候是先垂直再橫向，從左到右，從上到下進(jìn)行閱讀的，所以會(huì)把信息層級(jí)按照這樣的方式進(jìn)行排列，類型篩選放在上面，然后才是詳細(xì)篩選分類，如圖所示。

閱讀的主次順序

在設(shè)計(jì)時(shí)，經(jīng)常會(huì)將內(nèi)容主圖標(biāo)展示在左邊，而描述性的文字和按鈕會(huì)放在右邊，如圖所示。

主圖標(biāo)的設(shè)計(jì)位置

我們還可以通過(guò)填充色塊或者設(shè)定元素的大小來(lái)區(qū)分按鈕的重要性，如圖所示。

用色塊或元素區(qū)分按鈕

通過(guò)冷色和暖色也可以區(qū)分主次。在頁(yè)面中經(jīng)常會(huì)用冷色作為背景，而可點(diǎn)擊的按鈕則用暖色進(jìn)行突出顯示，如圖所示。

用冷色和暖色區(qū)分主次

在界面設(shè)計(jì)中，視覺(jué)中心的圖形的擺放次序會(huì)比前景更靠前，所以在閃屏頁(yè)的設(shè)計(jì)中經(jīng)常會(huì)把品牌或者主圖形放在比較靠中心位置，如圖所示。

主圖形應(yīng)放在開(kāi)屏的中心位置

05 易操作性原則

按鈕與按鈕之間要保持足夠的間距，讓用戶操作起來(lái)更容易，同時(shí)也可以避免失誤性的操作。在一般情況下，界面中一排的icon數(shù)量不要超過(guò)5個(gè)，如圖所示。

按鈕之間要留有足夠的距離

在瀏覽頁(yè)面時(shí)，經(jīng)常會(huì)遇到一些無(wú)信息的頁(yè)面，例如 404頁(yè)面、錯(cuò)誤頁(yè)面和空白頁(yè)面等，這些頁(yè)面一般會(huì)使用圖文搭配的形式進(jìn)行提醒，如圖所示。請(qǐng)大家注意，在這樣的頁(yè)面中一定要引導(dǎo)用戶進(jìn)行反饋，并指引用戶找到目標(biāo)。

無(wú)信息的頁(yè)面

在頁(yè)面中，要時(shí)刻注明當(dāng)前的狀態(tài)位置，也就是說(shuō)要用導(dǎo)航讓用戶知道現(xiàn)在正位于什么樣的頁(yè)面或處于什么樣的狀態(tài)，如圖所示。

注明當(dāng)前的狀態(tài)位置