北京時間 9 月 20 日凌晨 1 點(diǎn)，iOS11 終于迎來了正式版的推送，相信各位小伙伴已經(jīng)在第一時間進(jìn)行了升級。iOS11 毫無疑問是一次大規(guī)模的系統(tǒng)更新，UI、系統(tǒng)內(nèi)核、鎖屏等多方面都進(jìn)行了不同程度的改進(jìn)。小編第一時間為大家整理好了iOS11 優(yōu)秀 UI Kit的下載資源，并且與大家談一談UI Kit背后的iOS11 的新變化。

10年的長子網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整長子建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“長子網(wǎng)站設(shè)計(jì)”,“長子網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1、 iOS 11 UI 的新變化

在準(zhǔn)備著手設(shè)計(jì)前，首先我們來梳理一下iOS 11 的設(shè)計(jì)理念。在iOS系統(tǒng)的長期發(fā)展中，隨著功能和界面的不斷豐富，整個系統(tǒng)日趨復(fù)雜，App內(nèi)部的功能架構(gòu)也有同樣的情況。因此，Apple設(shè)計(jì)團(tuán)隊(duì)在新系統(tǒng)中強(qiáng)調(diào)了“指引”這一設(shè)計(jì)思維，并充分地把這一設(shè)計(jì)思維貫徹到了iOS11 的方方面面。

此外，我們再來看看蘋果設(shè)計(jì)團(tuán)隊(duì)的設(shè)計(jì)原則：

• 內(nèi)容凸顯的第一原則

• UI元素不與內(nèi)容競爭，除非是幫助用戶去理解潛在功能的作用

在這樣的設(shè)計(jì)思維和原則的基礎(chǔ)上，我們從以下幾個角度進(jìn)行分析。

(1)粗體標(biāo)題導(dǎo)航欄

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

如果你想要打造頂層是標(biāo)簽欄結(jié)構(gòu)的APP，這種設(shè)計(jì)規(guī)范就會非常適合，使用粗體大標(biāo)題能夠讓用戶在大量的標(biāo)簽切換中快速地意識到自己目前所處在的位置;

尤其是對于內(nèi)容豐富的APP，大量的頁面和各種深度的結(jié)構(gòu)層次，在使用大標(biāo)題后，相信可以起到很好的頁面引導(dǎo)作用。

但是我們看到的是，時鐘這項(xiàng)系統(tǒng)應(yīng)用仍然保持了原有的字體排版模式，其原因在于這項(xiàng)應(yīng)用在內(nèi)容和功能上互相平行獨(dú)立，非常容易分辨，如果在每項(xiàng)的界面繼續(xù)采用大標(biāo)題，UI元素會潛在對內(nèi)容造成了競爭，從而違背了基本設(shè)計(jì)規(guī)則。相應(yīng)的如果是內(nèi)容和布局類似的APP的話，粗體標(biāo)題就會起到很好的指示作用。

(2)提升設(shè)計(jì)層次

“層次(層次)”是UI很重要的元素，讓重要的，不重要的東西區(qū)隔開來，引導(dǎo)使用者的閱讀動線。清晰的層次可以減輕用戶的閱讀負(fù)擔(dān)，降低信息尋找的腦力消耗，從而讓主次關(guān)系更加協(xié)調(diào)統(tǒng)一。

• 卡片式和投影

在新版的iOS11 界面中，不少地方采用了卡片式或是宮格式的排列模式，視覺上一致，也易于設(shè)計(jì)上的迭代。這種主要適用于流量分發(fā)的渠道型頁面，能夠結(jié)構(gòu)層次清晰地展示圖文的層級關(guān)系，起到規(guī)整圖文內(nèi)容的作用;

伴隨卡片式的內(nèi)容一起出現(xiàn)的還有投影的大量使用，令設(shè)計(jì)元素更加獨(dú)立醒目，極好的抓住用戶的注意力。

• 界面布局中的留白

iOS11 的大標(biāo)題文本中都包含一組帶有圖片和描述的元素，組元素和組元素之間保持較大的間距。這樣的話，設(shè)計(jì)元素和元素之間保持足夠的間距，可以減少用來區(qū)分層級關(guān)系的不必要裝飾元素。

• 顏色/字號/字重

iOS11 中也大量使用了顏色深淺、字號大小和文本粗細(xì)來展示標(biāo)簽的不同層次，我們可以看到照片APP在iOS10 中章節(jié)標(biāo)題和照片對比不明顯，在更新后，章節(jié)標(biāo)題主標(biāo)題字體變大加粗，副標(biāo)題字體變大，顏色變?yōu)榱嘶疑w層次得到了提升。

(3)圓角圖標(biāo)

iOS11 中的大量的圖標(biāo)由2px線性改為了面型，從線框狀態(tài)變得更加圓潤，親和力。總體來說邊角更圓潤，空心變?yōu)閷?shí)心，色快感變重，使iOS的視覺更加輕快、柔和。

系統(tǒng)圖標(biāo)中，狀態(tài)欄訊號強(qiáng)度從•••••改回階梯式，電量圖標(biāo)的線面比例變得更均衡一些，標(biāo)簽欄圖標(biāo)從空心/實(shí)心兩態(tài)變成全實(shí)心粗線條設(shè)計(jì)，配合整體設(shè)計(jì)調(diào)性。

2、原型設(shè)計(jì)

在使用Sketch設(shè)計(jì)完基于iOS11 系統(tǒng)的靜態(tài)視覺稿后，想要對設(shè)計(jì)稿進(jìn)行進(jìn)一步的交互設(shè)計(jì)和團(tuán)隊(duì)協(xié)作的話，推薦在Sketch中安裝Mockplus插件，結(jié)合Mockplus就可以輕松將Sketch中完成的設(shè)計(jì)稿轉(zhuǎn)變成可交互原型，從而在Mockplus中進(jìn)行快速原型設(shè)計(jì)，并且與團(tuán)隊(duì)成員進(jìn)行協(xié)作和批注。

下載地址：https://www.mockplus.cn/download

3、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下載：

(5)Applypixels下載：

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

相信有了這些資源和工具后，大家能夠快速地做出適配iOS11 的APP視覺稿和原型，關(guān)于更多詳細(xì)的設(shè)計(jì)規(guī)范和資源，大家可以參考蘋果官方的人機(jī)交互指南：

新聞標(biāo)題：從iOS11UIKit中談?wù)刬OS11的新變化
轉(zhuǎn)載注明：http://www.rwnh.cn/article18/cpgidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站、做網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站策劃、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)