編輯導讀：前段時間， iOS14 升級了。蘋果的每一次升級都會引起人們的廣泛關注，畢竟它代表著行業標杆。本文作者在使用的過程中，對iOS14 中「時間控制項」的設計產生了疑問，並從三個方面展開分析，提出自己的一點思考，與你分享。
前幾天升級 iOS14 後在「日曆APP」中遇到個「時間控制項」使用體驗問題，在朋友圈「吐了個槽」後收到很多類似反饋，後來在使用「提醒事項APP」中發現有個類似「時間控制項」，體驗下來感覺挺順溜，於是想做個對比分析看看區別。
防槓說明1：接下來聊的體驗純我的「主觀感受」，對比分析也是基於過往的經驗來聊，沒有數據也沒有其他支撐，交流為主，無他意求放過。
防槓說明2：蘋果在「日曆APP」和「提醒事項APP」這 2 個 APP 設計一定有考慮過，文章純粹從外部視角去聊體驗感受，不聊 APP 的場景&戰略&定位。
一、iOS14 的「時間控制項」長什麼樣
iOS14 「日曆APP」新建日程&點擊展開「時間控制項」後的狀態
先介紹下「時間控制項」長什麼樣，上圖左邊是「日曆APP」中「新建日程」界面，點擊「開始-時間」後就展開了「時間控制項」，控制項中分別有這5個功能：時鐘控制項（鍵盤+觸摸）、年月控制項、快捷切換月份控制項、日曆控制項、時區功能，「提醒事項APP」的「時間控制項」界面基本差不多，具體差異會在在對比中展示。
二、開始做3個角度對比
對比1：日曆間距處理
整體來看「時間控制項」中的「日曆」是問題最大影響體驗最大的地方，「日曆」中的日期和日期之間的距離是大過日期和左右屏幕的距離，這會導致日曆看起來比較散不是一個整體，見下圖中黃色標記和藍色標記。
這類型的問題屬於「格式塔理論」中的「Law of Proximity接近法則」，間距沒有起到把相關元素粘起來的作用，相反把元素拆散，有種信息量很多密密麻麻的感受。
「日曆APP」中日期之間間距和屏幕間距對比
具體「Law of Proximity 接近法則」的意思是：相互接近的事物被認為比相隔較遠的事物更加相關。
格式塔理論中的接近法則示意圖
這裡密密麻麻的感受還有另一個理論基礎「米勒定律」，因為人同時處理信息大約是「7±2」條信息，當信息量超出這個數量後出現，本能上一定是先排斥的，大家回想下如果你要填寫一個複雜表單時候的場景，就是這樣的感覺。
米勒定律的示意圖
我們對比下「提醒事項APP」中的日曆選擇，間距處理保證了日期距離是比外面小的，日曆看起來就是一個整體可操作的控制項狀態，如果拿「格式塔理論」和「米勒定律」來看的話都是在合理範圍內，事實感受也是這樣
「日曆APP」和「提醒事項APP」日曆進行對比
對比2：上下層級關係處理
「時間控制項」是通過點擊展開的，如果這個簡單控制項，僅展開動效足以讓用戶理解，只是這「時間控制項」中包含5個功能佔了 1/2 的屏幕，動效解決不了，加上「對比1」的日曆間距問題，信息量巨大且複雜。控制項裡面除了標題做了「文字加粗」處理去表現層級，在「上下銜接 or 左右遞進 or 背景顏色」都沒做很多工作。
和上一級樣式是在太接近，沒有能明顯區分開，和上一層級融合到一起後，界面看起來從一行行就變成點擊後一下子增加「爆發式」的信息出現，觀感複雜+信息量變大。如果處理合適「理想中的層級關係」應該是圖片右邊這樣的，用戶一眼看到的是一塊塊而不是一個個。
日曆APP 時間控制項展開後感覺是「碎裂」，理想應該右側這樣塊狀的層級結構展開。
再來對比「提醒事項APP」中的層級關係，整個「時間控制項」左右都有縮進，左上和上一級的銜接處分割線也做了處理，加上上一級日期標題前有個「日曆ICON」，很自然在視覺上就出現了上下層級關係出現，內容一樣看起來清晰簡潔很多。
「提醒事項APP」中用縮進和風格線去表現層級關係
對比3：頁面布局上的對比
再把視角放到頁面布局中，「日曆APP」採用的是邊到邊布局（Edge to Edge）方式，「提醒事項APP」採用的是卡片式布局（Card）方式。
在 iOS 系統中「邊到邊布局」是從 iOS7 後蘋果開始採用的方式，優勢是把極大增加了屏幕空間利用率，可顯示內容增加，當時主打機型是 4 英寸屏 的iPhone5s，，屏幕空間有限。
iOS6 和 iOS7 設置界面的對比
從圖片中裡面是不是感覺 iOS6 也有點卡片式布局的意思，其實大家當時對 iOS6 印象還是「擬物化」，這裡也就不展開了。
「卡片式布局」是被 Google 推崇起來的，當時有款產品叫「Google Now」（現在已經下線），這個產品可以語音互動&主動提醒（飛機、路況、比賽比分、突發新聞等等）信息內容給到你，包含的信息內容多樣且複雜，用了卡片設計去解決了信息多而不亂的問題，信息和信息之間互不受到影響。
GoogleNow 主界面，卡片設計為主
「Google Now」產品已經下線，找了個介紹視頻（https://v.qq.com/x/page/f03052ojg4u.html），大家可以注意裡面不同場景下的卡片的布局都是不同的，也方便未來的擴展。
回到這兩個頁面布局對比中，不過不展開「時間控制項」這樣對比來看兩邊布局並沒有很大的問題，具體看是要更多「包容」還是要「屏效」。
不過這裡我們對比的是「時間控制項」，這部分看來「卡片式布局」是更合適的，布局能包容不同複雜的信息，塊和塊&功能和功能之間是更加清楚，不會引起混亂。
現在很多產品也都在考慮「卡片式布局」，像「手機淘寶」這兩年基本上已經完全改造成「卡片式布局」，我理解是因為手淘信息流複雜&個性，照片和元素的出現都不是固定的，用卡片作為「容器」去包容「內容」，讓界面有秩序。
但這裡還是要提一嘴信息流不要「無腦」追「卡片式布局」是最好，比如媒體為場景的APP，顯然「邊到邊布局」顯然更合適，比如 Instagram ，要給照片以更多的展示空間，也比如電商中對商品品質有信心的，那也適合「邊到邊布局」，比如 SNKRS，對球鞋品質表現的更加到位。
先理解再去設計「適合自家產品」的風格是個挺重要的事，畢竟一個產品風格會用很久，改動成本很高。
三、最後總結一下
真的是抱著「心驚膽戰」的心情去做的對比，蘋果設計一直都是行業標杆，這次是想趁聊對比時「拋磚引玉」聊聊「界面細節是如何決定設計品質」，這些東西非常小，合作上下遊也不一定在意，覺得差不多就好。現在產品迭代速度飛快，留給設計師的時間也不多，怎麼樣能夠快速有效地把細節處理好，是一個值得長期討論的話題。
最後抽取一些文章中的「關鍵詞」做個總結：
間距控制：有些設計師出稿或工程師開發&驗收時會忽略「間距」的價值，其實「間距」對設計品質影響非常大，背後設計理論支撐是「格式塔理論」，如果對「間距」不敏感，那要多練習練習去找好的產品設計去觀察和感受。米勒定律：很多人看界面覺得亂，為什麼感覺亂背後可以通過「米勒定律」做設計理論支撐，人在同一時間處理信息程度是「7±2」個，數量越多越亂。層級關係：表單或複雜頁面中的界面需要把層級關係表現到位，不然界面會亂七八糟，在 iOS11 時候蘋果已經注意到這一點並且已經提倡過，閱讀了解「iOS11 設計理念和 3 個設計方向」。邊到邊布局：一種屏幕效率利用高的界面布局，在iOS7 開始後被使用卡片式布局：一種能夠把複雜信息有序融合在一起的布局，更多包容和擴展好了，今天和大家就嘮叨到這～
本文由 @icojump 原創發布於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。