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

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

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

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

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

　　通俗來說，設計規(guī)范是圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準，針對相對獨立的體系建立的統(tǒng)一遵守條款。
 

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

　　iOS設計規(guī)范
 

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

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

 

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

　　啟動
 

　　規(guī)范導航：應用框架_2.1啟動

 

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

　　iOS對應用啟動的要求就兩個：快速，無縫。
 

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

　　無縫則指的在啟動的過程中不要請求設置信息、不要要求評價、不要顯示授權許可和免責聲明，總之，不要打斷用戶在啟動過程中的體驗。
 

　　蘋果鉛筆
 

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

 

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

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

　　游戲控制器
 

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

 

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

　　指針
 

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

 

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

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

 

　　小部件
 

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

 

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

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

 

　　側邊欄
 

　　規(guī)范導航：UI欄_7.3側邊欄

 

　　不得不說，iPadOS 正朝著 MacOS 大跨步前進，從之前的支持鼠標、游戲手柄，到現在引入 MacOS 應用經典的側邊欄，再到這次 WWDC20 展示出的運行在 A12Z 上的 MacOS Big Sur，我們似乎可以看到 iPad/Mac 融合正在逐漸從未來，向現實走來。
 

　　下拉菜單
 

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

 

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

　　結尾
 

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