從iOS 11 UI Kit中談談iOS 11的新變化

北京時間9月20日淩晨1點，iOS 11終於迎來了正式版的推送，相信各位小夥伴已經在第一時間進行了升級。iOS 11毫無疑問是一次大規模的系統更新，UI、系統內核、鎖屏等多方面都進行了不同程度的改進。小編第一時間為大家整理好了iOS 11優秀 UI Kit的下載資源，並且與大家談一談UI Kit背後的iOS 11的新變化。

1、 iOS 11 UI 的新變化

在準備著手設計前，首先我們來梳理一下iOS 11 的設計理念。在iOS系統的長期發展中，隨著功能和界面的不斷豐富，整個系統日趨復雜，App內部的功能架構也有同樣的情況。因此，Apple設計團隊在新系統中強調了“指引”這一設計思維，並充分地把這一設計思維貫徹到了iOS 11的方方面面。

此外，我們再來看看蘋果設計團隊的設計原則：

• 內容凸顯的第一原則
• UI元素不與內容競爭，除非是幫助用戶去理解潛在功能的作用

在這樣的設計思維和原則的基礎上，我們從以下幾個角度進行分析。

（1）粗體標題導航欄

扁平化設計中，文字排版影響著信息層級的展示的清晰與否，通過文本的字號、字重、顏色等的對比去建立清晰的信息層級，而不用太多的裝飾元素。iOS 11中最讓你印象深刻的莫過於粗體大標題欄的變化。

如果你想要打造頂層是標簽欄結構的APP，這種設計規範就會非常適合，使用粗體大標題能夠讓用戶在大量的標簽切換中快速地意識到自己目前所處在的位置；

尤其是對於內容豐富的APP，大量的頁面和各種深度的結構層次，在使用大標題後，相信可以起到很好的頁面引導作用。

但是我們看到的是，時鐘這項系統應用仍然保持了原有的字體排版模式，其原因在於這項應用在內容和功能上互相平行獨立，非常容易分辨，如果在每項的界面繼續采用大標題，UI元素會潛在對內容造成了競爭，從而違背了基本設計規則。相應的如果是內容和布局類似的APP的話，粗體標題就會起到很好的指示作用。

（2）提升設計層次

“層次（層次）”是UI很重要的元素，讓重要的，不重要的東西區隔開來，引導使用者的閱讀動線。清晰的層次可以減輕用戶的閱讀負擔，降低信息尋找的腦力消耗，從而讓主次關系更加協調統一。

卡片式和投影

在新版的iOS 11界面中，不少地方采用了卡片式或是宮格式的排列模式，視覺上一致，也易於設計上的叠代。這種主要適用於流量分發的渠道型頁面，能夠結構層次清晰地展示圖文的層級關系，起到規整圖文內容的作用；

伴隨卡片式的內容一起出現的還有投影的大量使用，令設計元素更加獨立醒目，極好的抓住用戶的註意力。

界面布局中的留白

iOS 11的大標題文本中都包含一組帶有圖片和描述的元素，組元素和組元素之間保持較大的間距。這樣的話，設計元素和元素之間保持足夠的間距，可以減少用來區分層級關系的不必要裝飾元素。

顏色/字號/字重

iOS 11中也大量使用了顏色深淺、字號大小和文本粗細來展示標簽的不同層次，我們可以看到照片APP在iOS 10中章節標題和照片對比不明顯，在更新後，章節標題主標題字體變大加粗，副標題字體變大，顏色變為了灰色，整體層次得到了提升。

（3）圓角圖標

iOS 11中的大量的圖標由2px線性改為了面型，從線框狀態變得更加圓潤，親和力。總體來說邊角更圓潤，空心變為實心，色快感變重，使iOS的視覺更加輕快、柔和。

系統圖標中，狀態欄訊號強度從?????改回階梯式，電量圖標的線面比例變得更均衡一些，標簽欄圖標從空心/實心兩態變成全實心粗線條設計，配合整體設計調性。

2、iOS 11 UI Kit資源集錦

（1）Apple官方下載地址（PS、Sketch）：

https://developer.apple.com/design/resources/#ios-apps

（2）iOS Design Kit下載：

https://www.iosdesignkit.io/ios11-gui/

（3）UI 8 下載：

https://ui8.net/products/sparks-ios-11-ui-kit

（4）Sketch APP Source下載：

https://www.sketchappsources.com/free-source/2689-ios-11-app-store-design-uu-sketch-freebie-resource.html

（5）Applypixels下載：

https://applypixels.com/template/ios-11-ui-kit/

相信有了這些資源和工具後，大家能夠快速地做出適配iOS 11的APP視覺稿和原型，關於更多詳細的設計規範和資源，大家可以參考蘋果官方的人機交互指南：

蘋果人機交互指南：

https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

iPhone X適配指南：

https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

本文由 @jongde 原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自，基於CC0協議

文章來源：