@-朱宇軒?：以iOS 10的鎖屏界面為例，讓你知道如何有理有據地分析一個界面交互的好壞。iOS說：“清晰度，咱倆分手吧”。以往的iOS鎖屏界面非常簡單直接，但是來到今年的iOS10，情況發生非常大的變化，在開始認真嚴肅地為大家分析（tucao）之前我想先說明一些東西：

• 分析并寫下這篇文章絕對不是為了黑蘋果的設計大神們，因為我也不知道蘋果的設計團隊在做出這些決定的時候面對的是什么樣的制約或有什么更加長遠的目標。此文針對設計做分析，不是針對某人或某團隊。
• iOS10的鎖屏界面的交互方式時常讓我感到困惑，我想探究原因。
• 我們都知道，當一個產品或是某個界面所要承擔的任務變得越來越復雜，需求越來越多的時候——盡管一些新添加的東西的出發點是為了“更加好用”，它總是趨向于變得更加難以設計，更加難以使用。為什么會這樣呢？iOS10的鎖屏界面或許是一個非常好的學習案例。

這個新的鎖屏界面

這邊就不再贅述新Home在硬件和機械上面表現出來的造詣了，本片文章專門分析在鎖屏界面之下，用戶與notification center（消息通知界面），widgets（插件界面），camera（相機界面），以及和其他元素的交互方式和體驗。

死于過多滑動操作

來看看這張圖——

iOS10的鎖屏界面用上了茫茫多的圓角矩形來承載你最近的未讀消息。

1. 向右滑動：消息并解鎖后可以直接打開相應的app，這一點與之前的iOS系統相似。（安卓則是無論向左還是向右滑動都能將該條消息清除，暫時忽略。）
2. 向左滑動：消息則能看到“查看”和“清除”兩個按鈕。
3. 在沒被消息覆蓋的屏幕區域「向右滑動」進入控件中心。
4. 在沒被消息覆蓋的屏幕區域「向左滑動」進入相機。
5. 在相機的界面內「向右滑動」切換至錄像模式。（居然不是退回到鎖屏界面）

這些個巨大的圓角矩形塊塊多起來的時候，你只能通過滑動時鐘的那塊區域才能進入控件中心，因為只有那兒才沒有消息“擋住你”，光是這一點就會讓用戶覺得非常不便利。當沒有任何東西擋住你的時候你又可以比較隨便地滑動進入控件中心，一切變幻莫測，用戶必須小心翼翼地進行操作，而且誤操作的幾率非常之高。

總結一下：在能夠橫向滑動的界面里最好不要再出現能夠橫向滑動操作的元素。（當然，如果操作方向是相反的話可以有）

橫劃打開相機好像蠻酷

前面提到，在沒被消息覆蓋的屏幕區域向左滑動可以進入相機，這個設計思路本身是蠻不錯的（以往的iOS里面則是按住相機icon是向上滑動進入相機）。在iOS10的鎖屏界面下方出現的小點點也給出了暗示：向左滑動可以進入相機。然而···。

我們從場景進行分析。

我們的用戶看知道向左滑動能夠進入相機，而進入之后他又突然地不想拍照了，這時候他想退回到鎖屏界面，你猜他會怎么做？能夠滑動進入的界面，尤其是橫向的，一般都能向進來時相反的方向滑動進行返回，然而在相機界面橫劃你只能進入“錄像”模式，你必須要點Home鍵才能返回。

總結一下：這里拿出兩條尼爾森的啟發（國內或較多被稱為“尼爾森的十條準則”），大家參考看看。

比給出錯誤信息提示更好的設計是在一開始就不要讓用戶容易犯錯。

盡量不要讓用戶需要去思考不同的詞、環境和操作是否真的有不同的意義。

尼爾森十大原則：《拿不定設計？讓經典的尼爾森十大可用性原則幫你！（附案例）》

控件中心到底是在哪個頁面里？

iOS10還在鎖屏狀態下就擁有兩層幾面，第一層就是你激活屏幕所看到的第一個頁面啦，而第二層就是通過下拉操作呼出通知中心。

以上的設計讓你有兩種方法到達控件中心：1.向右橫劃直接到達。2.通過下拉操作呼出通知中心，再向右橫劃到達。（如果你已經在控件中心，那么下拉出來的通知中心將無法向右橫劃到達控件中心）

這個邏輯聽著就覺得很奇怪，在如此短的操作流程之內同樣內容同樣功能的頁面重復出現了兩次，這讓用戶非常困惑：到底這個控件中心是在哪個頁面。這還不是最令人無所適從的點，我們來看看下面這個場景——

用戶進入了插件中心，看完一些自己想看的東西之后想要退回到之前的頁面，這時候他是向左橫劃即可，還是由屏幕底部向上滑動收起下拉出來的通知中心才行呢？這需要一點點時間老考慮。盡管他無論如何都能回到去，但是用戶還是需要停下來思考一小會，所有操作上的停頓都是因為產生認知負擔。

這兩個幾乎完全相同的頁面出現在非常相近（Z軸上非常相近）的兩個層級之上，導致了用戶需要停下來思考一會才知道自己到底是在哪個控件中心以及如何退出。

覺不覺得這里的設計就像迷宮一樣？另外，當已經在控件中心的時候，用戶無法在下拉出來的通知中心橫劃再次到達位于“下拉層”的控件中心，這一點對于設計來說或許是合理的，假如你已經在A點的時候，你還能通過某些操作再次到達內容功能完全相同，但卻不是盛放在同一個界面之上的話這將顯得非常蠢，然而用戶有很大的可能并不能夠理解到這一點。這是非常典型的以設計為中心的設計，而不是以用戶為中心的設計。總結一下：

1. 盡量避免在Z軸上面相近的兩個界面上放相同的信息，這會對用戶造成一些困擾。
2. 應該給予用戶足夠多的視覺上的暗示來闡明系統當前的狀態。

總結

iOS系統一直以其優秀的設計著稱，這一點無需過多地解釋，或許是這次更新加入了太多前所未有的新功能，讓一些問題被忽略或者說是忽視了。在某些點上，iOS的這次大膽的更新或許需要重新產生出一套更加成熟的設計規范，讓一切重回正軌。

「用案例說話的好文合集」

1. 《流程｜用一個實戰案例，幫你認識完整的設計流程》
2. 《網易實戰！從一次活動設計聊聊交互設計師的3個階段》
3. 《交互案例實戰！三個按鈕背后由小見大的交互思考》

原文地址：zyxscientist.github

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com