UI設計中的IOS14設計規範

2020-12-09 騰訊網

你了解UI設計的規範嗎?

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

那麼，今天我就跟大家聊一聊，設計規範的那些事!

什麼是設計規範?

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

UI設計規範是基於用戶界面而制定的一套可復用設計庫，也是為了方便設計師、開發和測試人員共同協作，而遵循的規律和法則。

iOS設計規範

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

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

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

啟動

規範導航：應用框架_2.1啟動

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

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

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

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

蘋果鉛筆

規範導航：用戶交互_3.2蘋果鉛筆

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

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

遊戲控制器

規範導航：用戶交互_3.9遊戲控制器

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

指針

規範導航：用戶交互_3.13指針

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

這裡值得 UI 設計師注意的重點概念，UI設計中的IOS14設計規範https://www.aaa-cg.com.cn/ui/2709.html叫做元素的命中區域 (hit regions)，這個區域可以幫助指針進行磁吸定位，並定義指針變形的邊界，所以在做 iPadOS 的適配時需要格外注意元素的 Padding。

小部件

規範導航：系統功能_4.11小部件

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

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

側邊欄

規範導航：UI欄_7.3側邊欄

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

下拉菜單

規範導航：控制項_下拉菜單

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

結尾

更新介紹就到這裡結束了，實際上本次規範更新的幅度並不大，尤其是對 iOS 來說，但依然涵蓋了幾個比較重要的點比如小部件。希望各位對官方規範保持最新的理解，在工作中遊刃有餘。因此，您現在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請給我點個關注，我之後還會發包含有關在該領域工作的更多相關文章。

相關焦點

  • UI設計中Android和IOS設計差異總結
    由於設計師、產品經理使用的行動裝置大部分是iPhone，所以在做設計時，容易忽略Android和iOS的差異，按照iOS的規範進行設計，兩端只做一套。所以設計師在設計過程中，針對兩端的差異性，可以單獨將具有差異性的Android部分做出來，保持兩端的差異性。今天我就總結了一下android和iOS差異性。
  • UI設計哪個學校好?零基礎學UI設計教程分享
    UI設計哪個學校好？零基礎學UI設計教程分享。沒有任何基礎到底適不適合學習ui設計，多久可以學會，如果零基礎想學習ui設計哪裡好呢?其實ui設計入門簡單，很多職場轉行和畢業的新手小白系統的學習幾個月都能學會，所以大家想學習ui設計其實不要太過於擔心。
  • 乾貨篇,最佳UI設計規範10例
    不得不承認，整理設計規範是UI設計師設計能力的一種體現，尤其是便隨項目越來越多的情況下，對設計規範的把控力，成為了設計師職業素養的一種體現。無論還是處於自己設計創作的階段，還是和程式設計師溝通推動產品開發的階段，設計規範完善與否，對產品的一致性和用戶體驗有著近乎於決定性的關鍵作用。在UI設計的過程中，設計規範是一個關鍵步驟。整理設計規範很苦惱？
  • 優秀UI設計師必知的字體設計規範
    前幾期給大家分享了關於UI設計的排版、配色、流行趨勢、情感化設計等等。這些都固然重要但是似乎忽略了什麼，沒錯那就是字體!今天胡老師就和大家聊聊優秀UI設計師必知的字體設計規範。字體為什麼重要?字體不僅僅只是字體，它更是用戶界面設計的重要組成部分。好的排版將建立強大的視覺層次，為網站提供圖形平衡，並設置產品的整體色調。字體指導並通知用戶，優化可讀性和可訪問性，並確保出色的用戶體驗。
  • 蘋果iOS14界面首秀,UI設計煥然一新,比iOS13更漂亮
    在疫情逐漸蔓延至全球之後，蘋果於3月14日正式宣布，該公司將於6月線上舉辦蘋果2020WWDC開發者大會。屆時，iOS、iPadOS等將亮相，雖說蘋果官方並未說明具體日期，但也讓一眾果粉的心落到了實處，算是沒有白白期待一場。
  • UI設計中彈窗設計指南
    彈窗在交互中一般分為兩種形式：模態彈窗與非模態彈窗模態彈窗——模態彈窗會打斷用戶的正常操作，要求用戶必須對其進行回應，否則不能繼續其它操作;非模態彈窗則不會影響用戶的操作，用戶可以不對其進行回應，非模態彈窗通常都有時間限制，出現一段時間後就會自動消失。
  • UI設計師工作流程規範,想轉行的小姐姐看過來
    序號 流程節點/事項規範/輸出備註1拿到原型分析流程分析用戶在使用產品過程中，需要進行的行為與認知過程4建立UI設計規範經過過程中的嘗試，溝通修改後，規範每一個模塊的設計組件，包括icon，柵格等。需求、設計、開發三方確認6界面切圖輸出根據開發需求進行ios以及Android各個版本的不規則矢量icon切圖輸出。
  • 乾貨|如何構建UI組件設計規範
    基於組件的設計規範可以使應用程式具有視覺和功能上的一致性，這有助於用戶感到賓至如歸，並能夠輕鬆地得到指導以完成與產品的所需交互。二、為什麼需要組件設計規範？組件是用於UI設計和開發的一種很好的辦法，使用較少的可重用的組件，更好地實現一致性。
  • 南京ui設計中的構成是什麼?
    南京ui設計中的構成是什麼？構成是一種造型概念，它的含義是將不同形態的幾個以上的單位元素組成一個新的形態，構成能夠掌握均衡、比例、節奏、統一等形式，美能夠讓用戶感受色彩明暗、對比以及冷暖的變化。今天我們來說說，構成都有哪些內容？
  • UI設計網站 | 常用的UI設計網站大集合
    UI設計網站推薦學ui網http://www.xueui.cn學UI網是一個發布高質量設計教程和分享設計經驗的免費UI學習平臺！UI設計者http://www.shui-mai.comUI設計者,是一個自學UI設計的手機APP，主要學習UI設計和UE互動設計的平臺。系統學習UI設計以及交互知識。UI中國http://www.ui.cnwww.ui.cn-（原iconfans）界面設計垂直社區、中國人氣最高的圖形界面互動設計平臺。
  • UI設計規範-色彩
    對於ui設計師來說，懂得基本的配色方法，是非常重要的功課。顏色跟其他事物一樣，使用需要恰到好處。如果您在配色方案中堅持使用最多三種基色，您將獲得更好的效果。將顏色應用於設計項目中，要保持色彩平衡，您使用的顏色越多，越難保持平衡。顏色不會增加設計品質 – 它只是加強了設計的品質感如果您需要調色板中定義的顏色以外的其他顏色，請使用明度和色調進行調整。
  • UI設計軟體中PS2021總結
    四、引人注目的新功能01新功能一：一鍵換天空換天空、換背景，一直以來都是設計師的「必備技能」，UI設計軟體中PS2021總結https://www.aaa-cg.com.cn/ui/2716.html以前我們都需要用快速選擇工具，或者魔棒工具，一點一點的去摳。
  • 一份超詳細的UI設計規範全攻略
    設計語言是一個很龐大的設計體系，包括字體、網格系統、顏色、圖形等等，而筆者在本文中也分享了相關的設計原則與關鍵詞，希望對你有所啟發。▲https://www.materialui.co/
  • 網頁的設計規範有?
    網頁的設計規範有？網站設計並無具體平臺限定的風格，也沒有必須要設計的系統級導航欄和工具欄。所以網站設計更加靈活，然而因為太靈活也會讓我們的設計師無從下手。接下來我們將和零基礎學ui設計的新人一起分享網頁設計的設計規範，幫助大家在工作的時候可以進行參考。
  • WeUI 2.0.0 發布,微信 Web 應用設計 UI 庫
    WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計，可以令用戶的使用感知更加統一。新版更新內容如下： 【增強】 顏色規範、字體大小規範、間距規範對齊微信 7.0 新視覺風格 【增強】 更新按鈕 UI 【增強】 按鈕改為默認定寬184px，需要用回拉通型可加 classweui-btn_block 【增強】 新增行按鈕 UI 【增強】 更新圖標 UI 【優化】 weui-msg
  • 北京ui設計學校培訓
    北京AAA教育教育為學員開展的UI設計精品課程，也是講重點放在基礎階段進行，並且為學員全方位講解設計知識，讓學員從經典設計軟體掌握到精通、從各行業的設計風格、理念到設計規範等，保障學員職業範圍選擇更寬。
  • UI設計是做什麼的?UI設計入門學習怎樣學?
    一、首先了解一下UI設計是做什麼的？UI設計分為實體UI和虛擬UI，網際網路說的UI設計是虛擬UI，UI即UserInterface(用戶界面)的簡稱。UI設計，即，用戶界面設計，也叫界面設計，是指對軟體的人機互動、操作邏輯、界面美觀的整體設計。
  • UI設計規範10條
    我們在做網際網路產品中，有的是以產品功能，但大部分以項目為緯度進行分割。在產品1.0後，設計團隊需要UI設計師建立規範，如果你所在的產品團隊有2個以上的UI同學。那可能在1.0還沒開始，一套好的UI規範就是需要立馬做的。 首先要明確，UI規範是需要UI設計師或UED團隊來完成的。
  • UI設計中評論區設計指南
    評論區在APP中有著不可或缺的地位,評論區又主要分評論入口、評論展示、評論排序三個方面，不同屬性的APP評論區側重點又都不一樣。只有了解這些差異,我們在做相關的APP時才能夠更好的下手。因此，了解不同屬性的APP評論區的區別是很有必要的，下面我就針對UI設計中評論區設計指南進行簡單的說明。
  • ui設計中的標籤有哪些作用
    ui設計中的標籤有哪些作用？相當一部分ui設計師在進行頁面設計的過程中，會針對不同的內容提取相對應的標籤，並確定目標關鍵詞。但是很多小夥伴都不清楚這些標籤的實際作用，那麼接下來小編就給大家簡單講一下這個問題。