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

蘋果早在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上都一直保持着創新和動力，除此以外咱們也應該看到蘋果背後的人文精神和用戶體驗，咱們在產品設計的過程當中，也應該讓產品保持沉穩的氣質，順滑的體驗，產品也會所以變得鮮活而生動。