作者對iOS13系統(tǒng)更新的主要模板進(jìn)行了盤點(diǎn)，并對相關(guān)的用戶需求和交互設(shè)計(jì)進(jìn)行了分析，與大家分享。

作者對iOS13系統(tǒng)更新的主要模板進(jìn)行了盤點(diǎn)，并對相關(guān)的用戶需求和交互設(shè)計(jì)進(jìn)行了分析，與大家分享。

iOS 13是蘋果公司2019年6月4日在美國圣何塞McEnery會議中心舉行推出的新一代手機(jī)操作系統(tǒng)，帶來深色模式 ，以及隱私保護(hù)新功能。

2019年9月11日，在2019蘋果秋季新品發(fā)布會上，蘋果宣布于2019年9月19日推送iOS 13正式版，支持iPhone 6S及后續(xù)機(jī)型，另外iOS 13.1也將于9月30日推送。

2019年9月20日凌晨，蘋果公司正式發(fā)布iOS 13系統(tǒng)正式版。根據(jù)iOS 13和iPadOS預(yù)覽頁面的更新信息，蘋果于9月24日發(fā)布iOS 13.1更新和iPadOS系統(tǒng)。

我相信很多同學(xué)已經(jīng)更新了iphone的IOS13系統(tǒng)，那么IOS系統(tǒng)進(jìn)行了怎樣的更新呢？其中最大的亮點(diǎn)當(dāng)然就是深色模式，除此之外還有一些重要的模塊進(jìn)行了改變，讓我們一起看看吧。

更新主要模塊：

1. 照片應(yīng)用全新改版
2. 更靈巧的音量提示
3. 更輕量的模態(tài)視圖
4. 3D Touch 變 “Haptic Touch”
5. 新增三指長按操作
6. 分段控件：沒做好的設(shè)計(jì)更新

在相冊應(yīng)用的全新改版中，相冊底部的tab是改動最大的地方。將最重要的內(nèi)容「照片」放置第一個tab中。

基于以用戶目標(biāo)為導(dǎo)向，滿足用戶需求。對樣式進(jìn)行了排版和樣式的修改。我們來分下相冊中用戶的需求是什么？

1. 基于時間軸為維度，滿足用戶按照時間先后順序的瀏覽需求。
2. 通過時間信息精準(zhǔn)鎖定需要的照片，比如，“我要找到今年國慶天安門閱兵時，我拍的照片“

根據(jù)以上兩點(diǎn)需求分析分析，時間段作為用戶瀏覽或者篩選的重要手段。因此，如何降低用戶尋找成本，就成為設(shè)計(jì)的重點(diǎn)。

在舊版本中，照片以“照片墻”的形式呈現(xiàn)：“年”的維度中，照片尺寸最小；點(diǎn)擊后，展現(xiàn)“月”維度，照片尺寸加大；再次點(diǎn)擊，進(jìn)入“天”維度，尺寸更大，如下圖所示

與舊版本相比ios13系統(tǒng)中，是基于時間段將相冊以時間段的形式打包起來。

比如，用戶想看2019年的照片，可以先找到“2019年”這個相冊，再通過月份的形式，進(jìn)行查找。

在每個時間段下，每個相冊都有一張唯一的封面圖，用戶可以通過封面圖可以快速獲取對應(yīng)照片信息。

與舊版本相比，比之前的信息無分類相比，降低了用戶的查找成本。

但這也有一些缺陷的：比如封面圖只展示一張圖片，相冊對應(yīng)時間段概念來說并沒有縱覽的概括。為此，蘋果設(shè)計(jì)師的解決方案是在“年”維度下，相冊非滑動靜止?fàn)顟B(tài)下，最底部位置的封面圖會自動每隔4秒自動切換。

同時，新版照片中，在底部tab新增一個操作欄，可以通過點(diǎn)擊換“年”、“月”、“日”、“所有照片”；同時也只支持通過滑動卡片支持下方操作tab高效的左右切換。

02 更靈巧的音量提示

iOS13之前，用戶通過按手機(jī)左上側(cè)的實(shí)體音量鍵，則會出現(xiàn)音量大小的HUD，如下圖：

提示控件叫HUD，中文叫“透明指示層”。這個透明指示面積較大，同時位于頁面中央，常常會擋住頁面中的關(guān)鍵信息，影響閱讀。

所以基于這個問題，蘋果的設(shè)計(jì)團(tuán)隊(duì)在iOS的升級中，用一個更靈動小巧的音量提示取代了HUD，如下圖：

交互邏輯詳解：

• 點(diǎn)按音量按鍵，音量提示欄會從左向右進(jìn)入，緊挨音量物理按鍵，且形態(tài)是比較粗的柱形，柱形底部展示有音量icon；
• 此時繼續(xù)點(diǎn)按音量增加或減小按鈕，則音量提示由較粗的柱形，變?yōu)檩^細(xì)的柱形，底部音量icon消失；
• 當(dāng)用戶沒有繼續(xù)點(diǎn)按音量鍵，則較細(xì)柱形從右向左退出；
• 音量提示退出后，用戶如果在3秒內(nèi)，又一次點(diǎn)按音量增加或減小按鍵，則較細(xì)柱形從左向右進(jìn)入；
• 若用戶在3秒外點(diǎn)按音量按鍵，則仍出現(xiàn)較粗的柱形。

通過觀察我們可以發(fā)現(xiàn)音量提醒存在兩種形態(tài)：粗柱形和細(xì)柱形。

為什么會有兩種方式呢？

筆者認(rèn)為，粗形態(tài)：提示用戶“當(dāng)前柱形代表的是音量”，但由于較粗的柱形遮擋面積較大，因此它會迅速變成較細(xì)的柱形，以減少遮擋。

當(dāng)手機(jī)橫置，點(diǎn)按音量按鍵，音量提醒會移動到屏幕頂部區(qū)域，這樣設(shè)計(jì)的原因，是頂部區(qū)域較為明顯，可以讓用戶可以及時看到音量調(diào)節(jié)情況，獲得及時反饋。

另外一個彩蛋：當(dāng)音量調(diào)至最大，為了透傳“音量已最大”的含義，手機(jī)會給予震動反饋，柱形也會表現(xiàn)出被“拽回”的動效，效果如下：

當(dāng)音量調(diào)至最小，音量達(dá)到最低時，也會有震動+動效，如下圖：

03 更輕量的模態(tài)視圖

在蘋果設(shè)計(jì)規(guī)范中提出的一個概念-模態(tài)視圖，是指那些在當(dāng)前頁插入的“浮層頁面”。

一般在一個大功能流程中會用到模態(tài)視圖。比如在照片中，瀏覽查看照片是應(yīng)用的核心功能，而對于照片的分享、打印等等都屬于獨(dú)立的小功能。這些“用完就走”的小功能，就很適合使用模態(tài)視圖來承載。

在iOS13之前，iOS系統(tǒng)里的模態(tài)視圖，一直是全屏的形態(tài)，如下圖所示