發(fā)現(xiàn)iOS 13里鮮有人提及的設(shè)計(jì)細(xì)節(jié)

目前iOS 13 開(kāi)發(fā)者預(yù)覽版已經(jīng)更新到Beta 6,距離9月發(fā)布正式版還有一個(gè)月左右的時(shí)間。按往年的經(jīng)驗(yàn),此時(shí)的iOS 13 Beta 6已經(jīng)非常接近正式版。

 

網(wǎng)上有很多有關(guān)iOS 13的功能介紹,但在設(shè)計(jì)細(xì)節(jié)上卻鮮有人提及。 

在iOS 13中,除了大家關(guān)注的深色模式(Dark),Apple還調(diào)整了大量原生App的設(shè)計(jì)細(xì)節(jié)。下面就讓我們一起看看吧! 

PS:此次用于對(duì)比的機(jī)型和系統(tǒng)信息如下: 

文件1.jpg    

設(shè)備1:iPhone 7 ,iOS 12.4

   

設(shè)備2:iPhone X,iOS 12.2

   

設(shè)備3:iPhone6S,iOS 13 Developer beta 6 


本次iOS 13全局細(xì)節(jié)調(diào)整較多,我將之分為兩部分進(jìn)行闡述: 

文件2.jpg

第一部分-全局組件:Switch、分段控件、Sheet彈窗、Context Menu等; 

第二部分-原生App:相機(jī)、Safari、短息、地圖等。



1.1 默認(rèn)頭像 

文件4.jpg

在iOS 12系統(tǒng)中,“默認(rèn)頭像”都具有性別特征。比如通訊錄的圖標(biāo),就是由一男一女的剪影所組成。 

在其他位置,比如:通訊錄詳情頁(yè)、短信列表、AppStore所用的默認(rèn)頭像均為“男性”剪影。

 

而在iOS 13中,上述這些位置的頭像,都變成了去性別特征的圓形頭像。如下圖: 

文件5.jpg

PS:Apple沒(méi)有根據(jù)賬號(hào)性別顯示男/女頭像,而是采用“無(wú)性別頭像”。我想這么做也許是為了更好的照顧到“跨性別群體”的感受。 

文件6.jpg

此前跨性別群體曾要求Apple在Emoji表情中增加“特殊人群”、“特殊家庭”和“彩虹旗”等標(biāo)志,這些眼下已出現(xiàn)在iOS 12.2的Emoji中。



1.2 開(kāi)關(guān)(Switches) 

自iOS 7發(fā)布以來(lái),iOS的切換開(kāi)關(guān)一直沒(méi)有變化。其特點(diǎn)是,開(kāi)關(guān)的投影延展到了“凹槽”外、且底色會(huì)有縮放動(dòng)效。 

文件7.gif

時(shí)隔五年,蘋(píng)果對(duì)切換開(kāi)關(guān)的細(xì)節(jié)做了調(diào)整。在最新的OS 13中,開(kāi)關(guān)的投影縮到了“凹槽”內(nèi),并且取消了底色縮放的過(guò)渡,改用“漸隱漸顯”的過(guò)渡方式。 



1.3 圖標(biāo)

文件8.jpg

一些長(zhǎng)期保留直角的圖標(biāo),在iOS 13中均改為圓角,線條也得到了加粗。 

文件9.jpg

Apple今年在Mac上推出了一款名為 SF Symbols 的軟件。里面集成了約1500個(gè)官方圖標(biāo),這些圖標(biāo)分別具有9種重量(粗細(xì)),可以與San Francisco字體無(wú)縫結(jié)合。設(shè)計(jì)師可以根據(jù)文字的字重,選配對(duì)應(yīng)重量(粗細(xì))的圖標(biāo),如下圖:

 

文件10.gif

除了重量外,Apple還針對(duì)每個(gè)圖標(biāo)提供了三種不同的尺寸:Small、Medium、Large。如下圖: 


文件11.jpg三種狀態(tài)下文字字號(hào)相同,圖標(biāo)尺寸不同。官方對(duì)上述三種尺寸給出了對(duì)應(yīng)的使用場(chǎng)景,如下圖: 

文件12.jpg

圖片中三種場(chǎng)景下列表中文字字號(hào)相同,列表高度不同,圖標(biāo)尺寸隨之發(fā)生變化。

具體細(xì)節(jié),大家可觀看官方介紹視頻https://developer.apple.com/videos/play/wwdc2019/206/ 



1.4 分段控件 Segmented Controls 

文件13.jpg

新版的分段控件由過(guò)去的描邊線,改為填充的形式。其中,選中狀態(tài)的滑塊含投影,投影效果和切換開(kāi)關(guān)一樣,投影只在“凹槽”內(nèi)。 

現(xiàn)在越來(lái)越多的App棄用描邊按鈕,改用面型按鈕。在iOS 11蘋(píng)果重做AppStore時(shí),就將“安裝/更新”的線性按鈕改為填充,如下圖: 


文件14.jpg

PS:留意手機(jī)中App,會(huì)發(fā)現(xiàn)“線轉(zhuǎn)面”已然是近兩年設(shè)計(jì)的小趨勢(shì)~ 



1.5 彈窗視圖(Sheet)

文件15.gif

在iOS 13之前,模態(tài)展示的視圖默認(rèn)是全屏(Fullscreen)。 

iOS 13新增了一種操作視圖:操作的視圖會(huì)被縮小,同時(shí)淡化置于新跳出視圖的下方。 

這樣的彈窗視圖在Human Interface Guideline(蘋(píng)果設(shè)計(jì)指南)中被稱為Sheet。新版的視圖有助于用戶明確信息的層級(jí),便于用戶找回此前被暫停的任務(wù)。

新版的視圖彈窗(Sheet)提供三種關(guān)閉方式: 

  • 從屏幕頂部向下滑動(dòng)

  • 當(dāng)卡片內(nèi)容滾動(dòng)到頂部時(shí),從屏幕上的任何位置向下滑動(dòng) (單手操作的)

  • 點(diǎn)擊按鈕 

如果關(guān)閉新版彈窗時(shí)存在“修改為儲(chǔ)存的內(nèi)容”這類行為時(shí),要提醒使用者是否要放棄編輯。還是以日歷App為例:

文件16.gif

iOS 12新建任務(wù)退出沒(méi)有提醒,而在iOS 13中進(jìn)行相同的操作,就會(huì)出現(xiàn)對(duì)應(yīng)的提醒。 

根據(jù)蘋(píng)果在HIG中的建議,彈窗中的任務(wù)需要簡(jiǎn)單、簡(jiǎn)短,避免過(guò)于復(fù)雜,導(dǎo)致用戶忘了此前他們所暫停的任務(wù),進(jìn)而導(dǎo)致用戶“迷路”,以通訊錄為例:


文件17.jpg

新建聯(lián)系人可能會(huì)填寫(xiě)大量信息,適合采用全屏視窗,而添加照片、添加動(dòng)話表情則非常適合使用新版彈窗。 

文件18.jpg

此外,對(duì)于拍照、錄像、照片編修、文件編輯等這類需要沉浸式、較復(fù)雜的使用場(chǎng)景,就適合維持過(guò)去全屏(Fullscreen)的呈現(xiàn)方式。

文件19.jpg

PS:值得一提的是,新視圖在iOS 12信息、郵件等App中早有應(yīng)用(小范圍測(cè)試)。更多有關(guān)Sheet的更多介紹,詳見(jiàn):https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/ 



1.6 HapticTouch 

文件20.jpg

在iOS 13中,Apple取消了 3DTouch(又名 Force Touch),改用了HapticTouch 

而所謂HapticTouch,我理解就是長(zhǎng)按,囧... 

文件21.gif

此前,在支持3DTouch的機(jī)型上,輕輕長(zhǎng)按桌面圖標(biāo),圖標(biāo)會(huì)開(kāi)始晃動(dòng),會(huì)進(jìn)入重新排列桌面的狀態(tài)。

而“重按”某個(gè)圖標(biāo),就可以通過(guò)3DTouch呼出菜單。 

在改用HapticTouch之后,原本的3DTouch也隨之取消,系統(tǒng)不再區(qū)分輕按和重按。只能通過(guò)長(zhǎng)按呼出菜單,“重新排列桌面”也變成了菜單中的一個(gè)選項(xiàng)。如下圖: 

文件22.jpg

PS:之前就覺(jué)得3DTouch嗷嗷難用,不想用時(shí)按重了,想用時(shí)又按輕了。啊啊啊啊...

如今都現(xiàn)在改成“長(zhǎng)按”,我看挺好~ 

除了手機(jī)桌面,其他支持3DTouch的操作,也紛紛變成了HapticTouch,比如原本Safari可以通過(guò)3DTouch呼出預(yù)覽: 

文件23.gif

現(xiàn)在也改為長(zhǎng)按呼出預(yù)覽。



1.7  Context Menu

 

文件24.jpg

其實(shí),Context Menu某種程度上可以看做是電腦上的鼠標(biāo)“右鍵”操作。用戶可以通過(guò)快速?gòu)棿暗牟藛卧陧?yè)面中進(jìn)行更多操作。 

與電腦鼠標(biāo)“右鍵”不同的是,Context Menu還攜帶了一個(gè)內(nèi)容的預(yù)覽畫(huà)面。 

文件25.jpg

在過(guò)去,這樣的操作需要配合“3DTouch+上滑”才可以調(diào)起底部的互動(dòng),如下圖

 

文件26.gif

而Context Menu則是通過(guò)長(zhǎng)按一步調(diào)起預(yù)覽畫(huà)面和菜單。 



1.8 音量調(diào)整視圖 

文件27.gif 

在iOS12版本中,音量的調(diào)節(jié)圖標(biāo)是在屏幕中間顯示一個(gè)巨大的鈴鐺,鈴鐺下面會(huì)有音量大小的進(jìn)度條,嚴(yán)重干擾用戶視線。

iOS13的音量控制圖標(biāo)也進(jìn)行了全新的設(shè)計(jì),音量大小的圖標(biāo)被設(shè)計(jì)在了屏幕左側(cè)。在音量的調(diào)節(jié)過(guò)程中,喇叭圖標(biāo)也非常直觀的顯示了音量大小的變化。 

文件28.gif

另外,左側(cè)的音量可以支持滑動(dòng)調(diào)整,類似底部控制器彈窗的音量調(diào)節(jié)。 

PS:在蘋(píng)果著手改進(jìn)之前,一些軟件公司已經(jīng)著手優(yōu)化音量調(diào)節(jié)的視圖,比如 

文件29.gif

快手、多閃、愛(ài)奇藝、開(kāi)眼就把音量調(diào)節(jié)放到了不阻擋視線的角落上。 



1.9 三指菜單

 

文件30.jpg

過(guò)去,在iPhone上編輯內(nèi)容時(shí),如果刪除了不該刪除的內(nèi)容,可以通過(guò)搖一搖手機(jī),執(zhí)行撤銷操作。 

如果想“取消剛執(zhí)行的撤銷”,需要再次搖一搖手機(jī),選擇“重新正在鍵入”。講真,這套操作理解起來(lái)還真有點(diǎn)麻煩。

 

文件31.jpg

對(duì)此,在iOS 13中也有優(yōu)化,只要用3個(gè)手指點(diǎn)擊屏幕,就可以呼出一個(gè)全新的菜單。用來(lái)完成:撤銷、剪切、復(fù)制、粘貼、重做這五個(gè)操作。 

文件31.jpg

值得一提的是,Edit Menu依然存在,可以和三指菜單同時(shí)出現(xiàn)。 



1.10 深色模式對(duì)Safari的影響 

網(wǎng)上已經(jīng)有很多關(guān)于深色模式的介紹,這里想和大家說(shuō)一個(gè)細(xì)節(jié): 

此前,Safari在普通狀態(tài)下界面為白色,在無(wú)痕模式下界面變?yōu)樯钌?nbsp;

文件33.jpg

如今,iOS 13可以切換為深色模式,在深色模式下,Safari普通狀態(tài)就是深色,那無(wú)痕模式該如何顯示? 

Apple對(duì)Safari做了相應(yīng)的調(diào)整:依靠地址欄顏色和操作欄圖標(biāo)顏色進(jìn)行區(qū)分。 

當(dāng)系統(tǒng)為淺色模式時(shí),兩種瀏覽模式的界面如下: 

文件34.jpg

當(dāng)系統(tǒng)為深色模式時(shí),兩種瀏覽模式的界面如下:

文件35.jpg

匯總對(duì)比如下: 

文件36.jpg

你負(fù)責(zé)的App,是否也有類似的特殊頁(yè)面,需要重新設(shè)計(jì)?





作者:海邊來(lái)的設(shè)計(jì)師

原文鏈接;https://mp.weixin.qq.com/s/dYE_cl_dgWGpxSE48Pc2RA

每天更新,
全站高品質(zhì)素材免費(fèi)下載!