昨天米醋跟大家分享了iOS的五大設(shè)計(jì)原則中凸顯內(nèi)容原則，那么今天我們繼續(xù)來(lái)說(shuō)說(shuō)統(tǒng)一化原則和適應(yīng)化原則。

統(tǒng)一化原則

統(tǒng)一化原則主要體現(xiàn)在視覺統(tǒng)一和交互統(tǒng)一兩個(gè)方面。在視覺統(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ī)和蘋果手機(jī)的時(shí)鐘設(shè)置方式。在錘子手機(jī)的界面中設(shè)置鬧鐘、秒表和計(jì)時(shí)器的方式都是在不同的位置進(jìn)行設(shè)定的，交互的形式有點(diǎn)擊和下拉方式，其視覺表現(xiàn)的形式也不相同，對(duì)于第一次使用的用戶來(lái)說(shuō)，操作起來(lái)會(huì)比較困難，如圖所示；而在蘋果的設(shè)計(jì)中更為講究操作的統(tǒng)一性，操作方式全是點(diǎn)擊，秒表和計(jì)時(shí)器都是使用點(diǎn)擊開啟的方式，這樣的設(shè)計(jì)能讓用戶在最短的時(shí)間內(nèi)找到正確的操作方式，如圖所示。由此看來(lái)，交互統(tǒng)一比視覺統(tǒng)一在用戶體驗(yàn)方面要更重要一些。

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

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

在交互中要遵循從哪來(lái)回哪去的原則，要保持路徑的統(tǒng)一性。可以看到在iOS系統(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放大展示主界面

適應(yīng)化原則

適應(yīng)化原則包括了場(chǎng)景適應(yīng)和屏幕適應(yīng)兩種。一個(gè)指的是使用場(chǎng)景的適應(yīng)，另外一個(gè)是屏幕的適配。在蘋果的原生天氣App中，不僅可以通過(guò)天氣的變化進(jìn)行自適應(yīng)匹配，還可以根據(jù)時(shí)間來(lái)區(qū)分白天和黑夜，讓用戶在不同的環(huán)境和時(shí)間下都能感受到軟件的智能性，如圖所示。

蘋果的原生天氣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)變化，這是常見的適配方式，可以有效保證視覺的統(tǒng)一性，如圖所示。

屏幕適應(yīng)

在橫屏和豎屏中的適配中，經(jīng)常會(huì)出現(xiàn)視覺不平衡的情況，我們會(huì)對(duì)單獨(dú)的控件進(jìn)行調(diào)整適配。例如計(jì)時(shí)器的時(shí)間選擇框，為了讓豎屏模式下的界面顯得更為飽滿，對(duì)其單獨(dú)進(jìn)行了放大設(shè)計(jì)，讓頁(yè)面從視覺上看起來(lái)更為舒服，如圖所示。

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

在手機(jī)移動(dòng)端中，蘋果有iPhone 4、iPhone 5、iPhone 6和iPhone 6 Plus等不同的機(jī)型，其中iPhone 4和iPhone 5的屏幕比例還不一樣，有時(shí)候?yàn)榱俗層脩粼诓煌臋C(jī)型上都能看到想要展示的信息，就需要考慮到在不同比例上的屏幕適應(yīng)，例如在圖中，直接嵌套后可以看到在iPhone4下的界面展示不完整，而單獨(dú)對(duì)iPhone4中的按鈕進(jìn)行縮放處理，讓整體功能(下面的兩個(gè)按鈕)在一個(gè)頁(yè)面中展示完整，可以大大節(jié)省展示空間，如圖所示。

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

單獨(dú)對(duì)按鈕進(jìn)行縮放后可展示完整

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

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

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

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

在畫板大小中設(shè)置iPhone分辨率

在一個(gè)畫布中建立多個(gè)畫板

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

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

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

導(dǎo)航條的適配

文字的適配

按鈕控件的適配

圖片的適配

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

好啦！今天就分享到這里，明天米醋將繼續(xù)給大家分享iOS的設(shè)計(jì)原則中層級(jí)性原則、易操作性原則的設(shè)計(jì)技巧，我們不見不散哦！

總結(jié)

以上是生活随笔為你收集整理的ios 设置按钮不可见_iOS的五大设计原则：统一化和适应化原则的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。