火星網校
ios11 and iphoneX UI設計規(guī)范
發(fā)布時間：2024-01-25 14:41:04 瀏覽量：211次
ios11 and iphoneX UI設計規(guī)范
近期蘋果發(fā)布了ios11系統(tǒng)、iPhone8、iPhone 8 Plus、iPhone X等，but 網上的設計規(guī)范零散，于是入行兩年的我做了一些總結，如有雷同請各位體諒，此次總結望對各位設計界的同仁有所幫助。（如有錯誤，請各位指出）！
iOS 11
iOS 11是蘋果公司研發(fā)的操作系統(tǒng)。北京時間2017年6月6日凌晨1點， WWDC（蘋果全球開發(fā)者大會）2017在加州圣何塞麥克恩利會議中心召開，蘋果系統(tǒng)iOS 11正式亮相。
正式版iOS 11在2017年9月份隨著新品iPhone的發(fā)布推送更新升級。2017年9月20日，iOS 11正式版發(fā)布，增加的特定功能是：二維碼掃描、詐騙短信識別、拼音鍵盤以及上海話語音識別等,其中，二維碼掃描還支持“掃碼解鎖”摩拜單車。
動態(tài)效果
Dock 可以出現在任何應用的界面上，只要從屏幕下方劃出就可以了。長按一個應用圖標，可以將它拖到正在使用的應用之上。
也就是說，屏幕上會同時顯示出兩個應用，再次拖動一個應用的邊緣，界面就演化成 1：1 或者 1：2 的分屏。這個操作的過程有些細節(jié)，比如拖動應用邊框，界面較大的那個會在邊緣向內收縮——這是在告訴你它即將縮小、另一個應用要出現在隔壁了。
動態(tài)特效
比如錄屏，點擊它你會看到一個從 3 到 1 的倒計時，然后它才開始錄屏；電池圖標點一下會變成黃色，用來開啟省電模式。更多的情況下，長按圖標會進入一個二級頁面，比如屏幕明暗的調節(jié)。這讓你更直觀的看到亮度的變化。
鎖屏界面
Apple Music 在鎖屏上占據的位置更少，它變成了一張卡片，顯示歌名和控制按鍵。原本 Music 會占據一整個鎖屏，有些第三方應用還會在這里展示滾動歌詞?，F在的樣子更清新一些了。
搜索順序
在Spotlight 鍵入關鍵詞，緊接著它的是推薦的關鍵詞、通訊錄、短信內容等等融合在一起的一個下拉菜單，在這下方才是與這個關鍵詞有關的應用程序。在 iOS 10 上，這個順序是反過來的。以及，Spotlight 會一直頂在主屏左邊、也就是擺放各種插件的界面。
模塊變樣
Apple Music 在控制中心中有點特殊，如果你長按，會看到這個框上不僅顯示正在播放的歌曲名稱、以及暫停播放和前后首按鈕，右上角還有一個小小的信號圖標，這里可以讓你切換正在使用的藍牙設備，比如 AirPods、各種音響。相比之下，iOS 10 切換藍牙設備的時候還需要你到設置中找到“藍牙”，再一個個查看。
拖動圖標
同時拖動多個圖標到文件夾，這也是效率提升的體現，如果你要把幾個應用拖進某個文件夾，iOS 11 上可以長按一個圖標、同時點選其他應用，就可以把它們幾個同時拖進目標文件夾之中。手機上也支持這個操作。
相關UI
一、圖標
在比較中尋求進步
iOS 10 VS iOS11
2PX線性圖標
特點：1.未選中時圖標是以2px線框形展現，選中后的當前頁以填充形態(tài)展現
2.設計、語言一致性，圖標精致輕巧。
面性圖標
特點：用輕量化的面性圖標代替2 PX的線性圖標，以較為圓潤的外觀展現，使整體更加具有親和力。
二、字體
iOS 11粗體標題
粗體
特點：粗體，且字體像素大，標題醒目（開個玩笑：典型的老夫設計）
在扁平化設計中的優(yōu)點：在扁平化設計中文字排版影響著信息層級展示的清晰與否，通過文字的字號、字重、顏色等的對比去建立清晰的信息層級，而不用太多的裝飾元素。
三、設計元素
圓角、卡片化、投影元素
特點：圓角弧度的增大讓用戶的視覺更輕快，柔和；卡片式設計貫穿在界面各個圖文排版中，起到了規(guī)整圖文內容的作用。投影元素的加入，令設計元素更加獨立醒目，強有力的抓住用戶的注意力。
四、界面布局中的留白
特點：大標題文本包含一組帶有圖片和描素的元素，組元素和組元素之間保持較大的間距。
優(yōu)點：設計元素和元素之間保持足夠的間距，可以減少用來區(qū)分層級關系的不必要裝飾塊元素，使界面簡潔、干練。
支持設備
iphone5s及5s以上
ipad air/air2及以上
ipod touch第六代
iPhone X
iPhone界面規(guī)范
不同機型升級iOS 11效果展
iPhone X規(guī)范
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
