iOS 11 vs 10: UI和互動全面對比分析

標籤：使用者體驗   使用   amp   開始   targe   dev   解決   結合   菜單   

蘋果早在6月份的WWDC全球開發人員大會中介紹了iOS 11系統，9月我們終於收到了正式版的更新推送。經曆了11代的大版本更迭的iOS依舊保持著活力與進步。跟手上用了一年的iOS 10相比，iOS 11在UI和互動上有什麼特別的改變呢？下面讓我們一起來看看。(左邊iOS 10，右邊為iOS 11）

主畫面

左上方的導航有了明顯的改變，從小圓點變為了經典的訊號格模式，底部的Dock也去掉了APP的名稱，應用程式名稱字型加粗，相對更清晰易閱讀。

 

 

 

 

控制中心的調整是iOS 11的最大亮點之一，使用者可以自訂常用的功能塊，並且可以通過3D Touch來調整亮度和音量，控制條也從橫向變為豎向柱狀，節約了控制中心的面積，布局更為合理，讓人耳目一新。

表徵圖icon

 

 

有十個左右有較大改動的表徵圖分別是：地圖、市集、時鐘、相機、設定、通訊錄、提醒事項、音樂、通訊錄、備忘錄和計算機等。其中地圖、時鐘、相機和通訊錄的改動都是比較人性化和正常的，還有一些表徵圖的改動相對較大。

 

經典的App Store表徵圖發生了重要的變化，原本的筆和尺子表達的是“工具”的本質，如今新的icon變為了三根圓棍，三角代表穩定的結構，更多可能是強調App Store、開發人員和使用者之間的關係。

 

而計算機表徵圖的改變更為徹底，從扁平風格變得圓潤，以實心圓為主，更多是讓人推斷是在向初代iPhone OS致敬。

還有其他的一些表徵圖也進行了對應的改變，整體來說都是進行簡潔化或者對比加深，更加符合iOS 11的整體風格基調。

App Store

 

App Store的新設計突出了卡片式的相片順序，配以投影的大面積使用，提升了頁面層次和對比。這樣大膽的排版加強了App Store的設計感和藝術感，突出了層次和導航。

簡單來說App Store將應用整個的風格都進行細緻的歸類，在歸納好一個主題之後在針對於使用者各自的使用風格去進行推薦，這背後蘊含的是蘋果對於整個使用者群體大資料的歸納整理，之後再定向推送相對應的內容，實在是一個非常不錯的改變。

通知中樞

 

在新版的通知中，當我們從頂欄下滑後，背景不再使用玻璃虛化，跟鎖定畫面一樣，在上方保留時間和日期的資訊；豎屏的情況下，時間和日期會呈現在介面左側，右側則放置通知資訊，設計風格與控制中心統一模組化設計風格，跟iOS 10相比更為簡練和大方，更加符合使用習慣，空間利用也更為合理。

解鎖介面

 

iOS 11中的鎖定畫面的數字鍵變成實心，這樣的設計提高了介面的可讀性，減少細框和細線對閱讀的幹擾和影響。

=====================================================

除了iPhone之外，iOS 11本次在iPad上的表現可謂是非常驚豔，特別是互動方面讓iPad煥然一新。

iOS 11 for iPad 最大的變化是更新了一款全新的 Dock，類似於 macOS 上 Dock 的體驗。首先，這個 Dock上最多可以擺放的15個應用，並且在 Dock 右邊的分區會顯示最近使用的 3 個應用，而正在 Handoff 中的應用會出現在 Dock 的最右邊，Handoff 的應用會佔用顯示最近使用的 3 個應用的一個名額。

全新的Dock採用了底部上劃呼出的互動方式，替代了之前的控制中心，更加值得一提的是，在已經開啟一個應用的情況下，我們從螢幕底部呼出Dock並開啟一個應用，將其拖到介面上後，這個應用就會在介面右側以懸浮視窗的形式呈現。

全新的Dock與懸浮視窗結合的模式解決了iOS 10中分屏狀態下只能通過上劃滑動應用列表翻找應用的情況。跟iOS 10中的Slide Over最大的差別在於，Slide Over開啟的應用是無法操作的，而現在你可以在操作懸浮視窗的同時對主應用進行互動和操作，極大地提高了使用體驗。

 

App Switcher

 

新版任務切換中心對筆者最大的感受，莫過於終於可以不再用力雙擊Home鍵呼出了，在上劃呼出Dock後繼續從螢幕下方滑就可以開啟App Switcher。整個過程非常絲滑順暢，不僅減輕了突然切換到物理操作的不適感，也增強了系統整體的使用沉浸感。想要回到主屏的話也不用點擊Home鍵，輕點App Switcher的空白地區即可。

 

Drap & Drop

檔案拖拽這種互動方式終於在iPad得到了實現，比如在懸浮視窗，你可以在拖出一個檔案後，再分別點擊需要拖拽的其他檔案，從而會形成一個堆棧，接著就可以輕鬆地批量把檔案拖拽到主應用了。

 

二級菜單

還有一個值得一提的互動則是iOS 11 for iPad新增的二級菜單，目前為止iPad還未支援3D Touch，在新的系統裡可以通過長按應用或控制中心進入二級菜單實作類別似3D Touch的體驗效果。

總的來說，相比iOS 10，iOS 11最直觀的莫過於加粗了整體的線條感，整體無論是字型還是表徵圖效果都得到了加深和加粗，對比也更高，代表了一種平靜的進化和對使用者體驗的微調。iOS 11在iPhone上的更新較為平滑，更加強調細節上的視覺效果和操作體驗；而在iPad上的更新可以說是可圈可點，特別是在互動方面大有突破，使得iPad往生產力裝置更近了一步，也讓開發人員擁有更大的自由和平台，使得iOS的應用生態更為高效和實用。

如此巧妙的設計風格，你是否也被驚豔到了呢？作為一名iOS設計師，是不是想立馬開始動手做這樣的設計呢？這裡筆者為大家推薦以下幾款工具，相信可以協助到你。

（1）Sketch

Sketch是一款基於Mac的向量繪圖應用。面對著功能複雜繁瑣的Photoshop，Sketch相比較而言身輕如燕。最近也掀起了用Sketch設計產品原型的熱潮，因為用它來畫設計稿簡直輕而易舉，讓我們的原型圖更逼真，更有利於交流和前期的展示。目前Apple人機互動指南已經提供了iOS 11的官方UI Kit，可以在仔細閱讀設計規範後，根據UI Kit在Sketch中對自己的產品進行適配或迭代設計。

（2）Mockplus

互動正是一個原型的靈魂，是展示原型邏輯和思維最直觀的方式。在使用Sketch完成設計稿後，如果我們想要對設計稿繼續進行互動設計和團隊協作的話，我們可以為Sketch下載和安裝Mockplus的外掛程式。在完成Sketch的設計後，可以將其匯出為MP的專案檔，從而在Mockplus中進行原型設計和頁面互動，並且與團隊成員進行協作和批註。

iOS在無論在互動還是UI上都一直保持著創新和動力，除此之外我們也應該看到蘋果背後的人文精神和使用者體驗，我們在產品設計的過程中，也應該讓產品保持沉穩的氣質，順滑的體驗，產品也會因此變得鮮活而生動。

iOS 11 vs 10: UI和互動全面對比分析