從iOS 11 UI Kit中談?wù)刬OS 11的新變化

0 評(píng)論 9950 瀏覽 61 收藏 9 分鐘

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

1、 iOS 11 UI 的新變化

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

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

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

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

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

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

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

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

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

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

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

卡片式和投影

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

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

界面布局中的留白

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

顏色/字號(hào)/字重

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

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

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

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

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視覺稿和原型,關(guān)于更多詳細(xì)的設(shè)計(jì)規(guī)范和資源,大家可以參考蘋果官方的人機(jī)交互指南:

蘋果人機(jī)交互指南:

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

iPhone X適配指南:

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

 

本文由 @jongde 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!