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

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

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

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

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

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

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

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

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

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

 

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

　　啟動
 

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

 

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

　　iOS對應(yīng)用啟動的要求就兩個：快速，無縫。
 

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

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

　　蘋果鉛筆
 

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

 

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

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

　　游戲控制器
 

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

 

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

　　指針
 

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

 

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

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

 

　　小部件
 

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

 

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

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

 

　　側(cè)邊欄
 

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

 

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

　　下拉菜單
 

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

 

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

　　結(jié)尾
 

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