你好，歡迎來到沐風與體驗設計。
iOS系統迎來了一次重大更新，iOS13。在這次更新中，深色模式無疑是系統最大的亮點之一。
除此之外，沐風還發現了新系統在交互設計上的一些改變。這些改變，有的是改的更好了；有的。。。我認為還值得商榷。下面為大家一一解析。
照片應用全新改版
照片App，有4個tab。第一個tab，也是最重要的tab，是“照片”tab。照片App的這次改版，改動最大的也是照片tab。
設計改版，從表皮上看是改變了頁面的排版和樣式；從核心看，是改變了產品的形態，目的只有一個：用更好的方式滿足用戶的需求。
於是問題來了：在照片tab裡，用戶的需求是什麼？
分析可知，用戶的需求主要有以下兩個：
1. 按照時間先後順序，瀏覽照片。這就像用戶使用實體的相冊，從前往後翻閱相冊，以此回憶起某個時間段，比如“去年暑假”、“剛工作那年”。
2. 根據時間信息，尋找某張照片。比如，“我想找去年9月左右的一張照片”。
分析一下上面兩個需求，不論是瀏覽，還是尋找特定照片，用戶都需要先定位到某個時間段。因此，如何以一種高效的形式呈現出時間線上的照片，就成為設計的重點。
在改版前，照片以“照片牆”的形式呈現：“年”的維度中，照片尺寸最小；點擊後，展現“月”維度，照片尺寸加大；再次點擊，進入“天”維度，尺寸更大，如下圖所示
相比舊版，蘋果新版的做法，是把一個時間段的相片，用相冊的形態封裝起來。
比如，用戶想看2014年的照片，可以先找到“2014年”這個相冊，再瀏覽2014年當中以月份組織起來的相冊，如下圖所示：
在每個維度下，相冊都有一張封面圖，用戶可以通過封面圖瞭解該相冊的內容。
相冊封面圖比起改版前的縮略圖照片牆，瀏覽起來容易多了。
但這也有一個弊端：封面圖每次只能展示一張圖片，對整個相冊的內容無法完整的概括。蘋果設計師的解決辦法，是在“年”這個維度下，相冊在靜止的情況下，最底部位置的封面圖會自動每隔4秒自動切換，就像很多應用頂部的焦點圖那樣；如果在封面圖位置按住並左右滑動，也可以切換封面圖的照片
這個交互操作，巧妙地解決了“相冊只使用一張封面圖，如何代表這個相冊”的難題，可以說是神來之筆了。
另外，新版照片App，在底部增加了一個操作欄，點擊可以切換“年”、“月”、“日”、“所有照片”這些維度；增加了手勢返回的支持：從屏幕左邊緣向右滑動，可以返回上一個維度，例如現在用戶位於“日”這個維度，向右滑動則可以返回到“月”這個維度。這些控件和操作的增加，對於用戶在不同時間維度之間切換，還是很方便的。
更靈巧的音量提示
iOS13之前，用戶按動手機左上側的實體音量鍵，則會出現如下的提示：
這個提示控件名叫HUD，中文翻譯為“透明指示層”。這個透明指示層個頭很大，而且位於頁面正中央，經常會擋住頁面中的關鍵信息。
蘋果的設計團隊大概也發現了這個問題，因此在iOS的升級中，用一個更靈動小巧的音量提示取代了HUD
具體交互邏輯如下：
- 點按音量增加或減小按鍵，音量提示會從左向右進入，出現在音量鍵的旁邊，且形態是比較粗的柱形，柱形底部展示有音量icon；
- 此時繼續點按音量增加或減小按鈕，則音量提示由較粗的柱形，變為較細的柱形，底部音量icon消失；
- 當用戶沒有繼續點按音量鍵，則較細柱形從右向左退出；
- 音量提示退出後，用戶如果在3秒內，又一次點按音量增加或減小按鍵，則較細柱形從左向右進入；
- 若用戶在3秒外點按音量按鍵，則仍出現較粗的柱形。
觀察上面的交互邏輯，可以看到，音量提醒有兩種形態：較粗柱形和較細柱形。
為什麼會有兩種？
沐風認為，較粗形態是提示用戶“當前柱形代表的是音量”，但由於較粗的柱形遮擋面積較大，因此它會迅速變成較細的柱形，以減少遮擋。
當手機橫置，點按音量按鍵，音量提醒會移動到屏幕頂部區域，這樣設計的原因，是頂部區域較為明顯，可以讓用戶可以及時看到音量調節情況，獲得及時反饋。
另外還有一個彩蛋：當音量調到最大，為了表現出“已經到頭了不能再調大了”的含義，手機會給出震動反饋，柱形也會表現出被“抻（chen）”了一下的動效，效果十分呆萌
當音量調到最小然後繼續點按音量減小鍵時，也會有震動+動效
更輕量的模態視圖
模態視圖，是蘋果iOS設計規範中提出的一個概念，是指那些在當前頁插入的“浮層頁面”。
模態視圖一般用於在一個大功能流程中，相對獨立的小功能。比如在照片App中，瀏覽查看照片是應用的核心功能，而對於照片的分享、打印等等都屬於獨立的小功能。這些“用完就走”的小功能，就很適合使用模態視圖來承載。
在iOS13之前，iOS系統裡的模態視圖，一直是全屏的形態，如下圖所示
iOS13中，將模態視圖改成了非全屏的形態，且支持手勢向下滑動，則退出當前模態視圖頁面，如下圖所示
這樣的改變，讓體驗更輕了。
所以，更輕了是不是好事呢？
沐風認為是好事。原因是模態視圖承載的功能，都是當前情景下的一些簡單操作。這些簡單操作，宜輕不宜重。
道理很簡單：如果這些操作太複雜，會影響用戶對應用裡核心功能的使用，屬於本末倒置。最好的情況，是用戶迅速用完這些分享、打印之類的簡單操作，然後繼續瀏覽照片的核心功能使用。
iOS13，將模態視圖輕量化，更激勵用戶用完就走，是符合場景的設計。
3D Touch 變 “Haptic Touch”
在iOS13以前，系統裡是有3D touch的：當用戶“先按住，然後再更用力向下按下去”，就會觸發3D Touch。這個交互操作很創新，但使用成本略大。反正沐風我是很少使用這個操作了，因為用起來真的會覺得有一點不爽：先按著，然後使勁按，比別的操作都要費勁。
這次iOS13的更新，把3D Touch直接改成了Haptic Touch，也就是長按操作。說實話比原來順暢多了，也輕鬆多了。
下圖所示，是在iOS自帶的郵件應用裡，長按一封郵件後，出現的頁面。左邊是默認的狀態，當用戶在頁面上從下向上滑動後，則出現右邊所示的狀態。
其實長按所喚起的這些操作選項，邏輯上很像是電腦上的“單擊鼠標右鍵”所喚起的選項，是系統提供的、在當前情景下，可以對當前目標進行的一系列的額外操作選項。
新增三指長按操作
在iOS中，三指長按，並且滿足以下條件時，會出現剪貼板：
1. 當前頁面有輸入光標；
2. 剪貼板中有內容（也就是說，你進行過剪切、複製操作，或者輸入文字操作）。
如下圖所示
不過在體驗這個功能的過程中，發現一個bug：iOS自帶的備忘錄應用中，兩種操作欄出現了重疊
在其它應用中，如果喚起一種操作欄，則另一種操作欄會消失，邏輯更為合理。
在體驗的過程中，發現三指長按時容易觸發到別的操作。
總體來說，三指長按操作，觸發條件比較隱蔽且多，使用起來不是很方便。個人不是太喜歡這個新增的設計。
分段控件：沒做好的設計更新
下面這張圖，對比了改版前後的分段控件
可以看到，改版之後，去掉了原有的分割感，取而代之的是在一個通欄中，用一個白色按鈕來表現當前的選中項。
在交互上，這個控件沒有變化，依然是隻能用點擊來選擇分段控件裡不同的選項。但改版之後，視覺上造成了一種“可以通過滑動來切換選項”的錯誤預期 。
雖然改版後，視覺上更柔和了，但從交互的角度，這樣的改變可能會誤導用戶進行左右滑動來切換，是有一定缺陷的。
再貼一個App Store的截圖
看起來確實很有滑動感啊，有木有。
以上為大家分析了iOS13中，6個交互優化。從中可以看出，設計師懂些交互，還是很有必要的 。
如果文章對你有啟發，歡迎轉發。
閱讀更多 沐風與體驗設計 的文章
