UI設(shè)計(jì)中的IOS14設(shè)計(jì)規(guī)范

　　你了解UI設(shè)計(jì)的規(guī)范嗎?
 

　　很多新人在開始做移動(dòng)端UI設(shè)計(jì)的時(shí)候，對(duì)界面的尺寸規(guī)范不是那么清楚，很多時(shí)候都是憑借自己的感覺和經(jīng)驗(yàn)去設(shè)計(jì)，導(dǎo)致做出來(lái)的頁(yè)面總是不那么盡如人意，從而一遍遍修改，拉低了工作效率。
 

　　那么，今天AAA教育郭老師就跟大家聊一聊，設(shè)計(jì)規(guī)范的那些事!
 

　　什么是設(shè)計(jì)規(guī)范?
 

　　通俗來(lái)說(shuō)，設(shè)計(jì)規(guī)范是圍繞在某種風(fēng)格或者大型設(shè)計(jì)項(xiàng)目下形成可視化、數(shù)據(jù)化的標(biāo)準(zhǔn)，針對(duì)相對(duì)獨(dú)立的體系建立的統(tǒng)一遵守條款。
 

　　UI設(shè)計(jì)規(guī)范是基于用戶界面而制定的一套可復(fù)用設(shè)計(jì)庫(kù)，也是為了方便設(shè)計(jì)師、開發(fā)和測(cè)試人員共同協(xié)作，而遵循的規(guī)律和法則。
 

　　iOS設(shè)計(jì)規(guī)范
 

　　每個(gè)設(shè)計(jì)平臺(tái)有不同的設(shè)計(jì)規(guī)范，今天先說(shuō)常用的iOS設(shè)計(jì)規(guī)范。iOS 與其他平臺(tái)不同，主要是清晰、順應(yīng)、縱深三大原則。
 

　　9月17日，蘋果正式發(fā)布了iOS 14的新版系統(tǒng)，這次較大的亮點(diǎn)，便是iPhone桌面UI新增“小組件”功能，讓原本規(guī)規(guī)矩矩的 iPhone主頁(yè)發(fā)生了很大的變化;更進(jìn)一步的如果你足夠敏銳，就一定會(huì)第一時(shí)間想到小部件是需要 UI 進(jìn)行設(shè)計(jì)的。

 

        下面我們著重來(lái)看一下新增的幾個(gè)章節(jié)。
 

　　啟動(dòng)
 

　　規(guī)范導(dǎo)航：應(yīng)用框架_2.1啟動(dòng)

 

　　這里注意把啟動(dòng) (Launching) 和啟動(dòng)頁(yè) (Launch Screen) 區(qū)分開來(lái)，啟動(dòng)指的是應(yīng)用啟動(dòng)的整個(gè)過(guò)程，而不單單指啟動(dòng)頁(yè)面。
 

　　iOS對(duì)應(yīng)用啟動(dòng)的要求就兩個(gè)：快速，無(wú)縫。
 

　　快速指的是利用啟動(dòng)頁(yè)面來(lái)緩解用戶的等待感，甚至可以設(shè)計(jì)一張與應(yīng)用首頁(yè)差不多的啟動(dòng)頁(yè)，騙過(guò)用戶的認(rèn)知。
 

　　無(wú)縫則指的在啟動(dòng)的過(guò)程中不要請(qǐng)求設(shè)置信息、不要要求評(píng)價(jià)、不要顯示授權(quán)許可和免責(zé)聲明，總之，不要打斷用戶在啟動(dòng)過(guò)程中的體驗(yàn)。
 

　　蘋果鉛筆
 

　　規(guī)范導(dǎo)航：用戶交互_3.2蘋果鉛筆

 

　　蘋果鉛筆作為 iPad 的殺手級(jí)配件，其硬件靈敏度、功能完善度和對(duì) iPadOS 的集成度都已經(jīng)達(dá)到了很高的水準(zhǔn)。其中，開發(fā)者可以利用 Apple Pencil 觸控的三層緯度即高度 (Altitude)、壓力 (Pressure) 和方位角 (Azimuth) 來(lái)設(shè)計(jì)一套優(yōu)異且完善的手寫交互體驗(yàn)。還可以自定義雙擊筆身的功能，讓 App 和 Apple Pencil 更加契合，讓用戶在 iPadOS 當(dāng)中流暢的工作。
 

　　而且值得一提的是，新的 iPadOS14 已經(jīng)支持 Apple Pencil 全局手寫輸入，不需要再呼出那個(gè)半屏高的鍵盤來(lái)打字了。
 

　　游戲控制器
 

　　規(guī)范導(dǎo)航：用戶交互_3.9游戲控制器

 

　　其實(shí) iPadOS 剛剛出來(lái)就已經(jīng)支持了游戲控制器 (游戲手柄)，這一章節(jié)主要旨在指導(dǎo)移動(dòng)游戲開發(fā)者 (或者游戲UI/UX設(shè)計(jì)師) 如何利用游戲手柄，來(lái)帶給用戶最好的游戲體驗(yàn)。
 

　　指針
 

　　規(guī)范導(dǎo)航：用戶交互_3.13指針

 

　　iPadOS13.4 以及 iOS13.4 版本引入了動(dòng)態(tài)的指針效果，蘋果依然在原有的指針交互上更進(jìn)一步做出了更多的改變，比如說(shuō)高亮、抬升、懸浮三種內(nèi)容效果，以及隨內(nèi)容效果而無(wú)縫變形的指針形狀。
 

　　這里值得 UI 設(shè)計(jì)師注意的重點(diǎn)概念，叫做元素的命中區(qū)域 (hit regions)，這個(gè)區(qū)域可以幫助指針進(jìn)行磁吸定位，并定義指針變形的邊界，所以在做 iPadOS 的適配時(shí)需要格外注意元素的 Padding。

 

　　小部件
 

　　規(guī)范導(dǎo)航：系統(tǒng)功能_4.11小部件

 

　　作為此次 iOS14 更新的重點(diǎn)，小部件的設(shè)計(jì)要點(diǎn)還是相當(dāng)多的。簡(jiǎn)而言之，除了之前概述中提到的三種尺寸之外，對(duì)于設(shè)計(jì)師來(lái)說(shuō)更重要的是利用圖形、圖片、文字和排版設(shè)計(jì)出一個(gè)有重點(diǎn)、實(shí)用且優(yōu)美的小部件。iPhone 用戶頭一次可以這么大程度地自定義自己的桌面，所以小部件的設(shè)計(jì)如何設(shè)計(jì)得出彩又不浮夸，對(duì)設(shè)計(jì)師來(lái)說(shuō)也是一種考驗(yàn)。
 

　　官方給出了小部件的標(biāo)準(zhǔn) Padding，為 16pt，更緊湊的為8pt。我們也制作了一份小部件邊距模版。

 

　　側(cè)邊欄
 

　　規(guī)范導(dǎo)航：UI欄_7.3側(cè)邊欄

 

　　不得不說(shuō)，iPadOS 正朝著 MacOS 大跨步前進(jìn)，從之前的支持鼠標(biāo)、游戲手柄，到現(xiàn)在引入 MacOS 應(yīng)用經(jīng)典的側(cè)邊欄，再到這次 WWDC20 展示出的運(yùn)行在 A12Z 上的 MacOS Big Sur，我們似乎可以看到 iPad/Mac 融合正在逐漸從未來(lái)，向現(xiàn)實(shí)走來(lái)。
 

　　下拉菜單
 

　　規(guī)范導(dǎo)航：控件_下拉菜單

 

　　我們可以注意到蘋果的下拉菜單，也會(huì)有主屏快捷操作菜單的影子——左邊標(biāo)題，右邊符號(hào)。不過(guò)鑒于現(xiàn)在國(guó)內(nèi) APP 早就用上了自己設(shè)計(jì)的下拉菜單，以后估計(jì)也不太會(huì)去向官方靠攏，這一趴看看交互原則就好，具體設(shè)計(jì)還是各玩各的。
 

　　結(jié)尾
 

　　更新介紹就到這里結(jié)束了，實(shí)際上本次規(guī)范更新的幅度并不大，尤其是對(duì) iOS 來(lái)說(shuō)，但依然涵蓋了幾個(gè)比較重要的點(diǎn)比如小部件。希望各位對(duì)官方規(guī)范保持最新的理解，在工作中游刃有余。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。