如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

來源：UI中國(guó)

也許有時(shí)候反面教材能讓我們學(xué)到更多東西

軟件，教程，文章，歡迎來的我的主頁逛逛，獲取更多真正實(shí)用的設(shè)計(jì)資源！zyxscientist.github.io

---

iOS說：“清晰度，咱倆分手吧”

以往的iOS鎖屏界面非常簡(jiǎn)單直接，但是來到今年的iOS10，情況發(fā)生非常大的變化，在開始認(rèn)真嚴(yán)肅地為大家分析（tucao）之前我想先說明一些東西：

• 分析并寫下這篇文章絕對(duì)不是為了黑蘋果的設(shè)計(jì)大神們，因?yàn)槲乙膊恢捞O果的設(shè)計(jì)團(tuán)隊(duì)在做出這些決定的時(shí)候面對(duì)的是什么樣的制約或有什么更加長(zhǎng)遠(yuǎn)的目標(biāo)。此文針對(duì)設(shè)計(jì)做分析，不是針對(duì)某人或某團(tuán)隊(duì)。
• iOS10的鎖屏界面的交互方式時(shí)常讓我感到困惑，我想探究原因。
• 我們都知道，當(dāng)一個(gè)產(chǎn)品或是某個(gè)界面所要承擔(dān)的任務(wù)變得越來越復(fù)雜，需求越來越多的時(shí)候——盡管一些新添加的東西的出發(fā)點(diǎn)是為了“更加好用”，它總是趨向于變得更加難以設(shè)計(jì)，更加難以使用。為什么會(huì)這樣呢？iOS10的鎖屏界面或許是一個(gè)非常好的學(xué)習(xí)案例。

這個(gè)新的鎖屏界面

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

死于過多滑動(dòng)操作

來看看這張圖——

掏出你的手機(jī)操作一下，看是不是這樣的

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

1. 向右滑動(dòng)消息并解鎖后可以直接打開相應(yīng)的app，這一點(diǎn)與之前的iOS系統(tǒng)相似。（安卓則是無論向左還是向右滑動(dòng)都能將該條消息清除、暫時(shí)忽略。）

2. 向左滑動(dòng)消息則能看到“查看”和“清除”兩個(gè)按鈕。

3. 在沒被消息覆蓋的屏幕區(qū)域向右滑動(dòng)進(jìn)入控件中心。

4. 在沒被消息覆蓋的屏幕區(qū)域向左滑動(dòng)進(jìn)入相機(jī)。

5. 在相機(jī)的界面內(nèi)向右滑動(dòng)切換至錄像模式。（:-(居然不是退回到鎖屏界面）

這些個(gè)巨大的圓角矩形塊塊多起來的時(shí)候，你只能通過滑動(dòng)時(shí)鐘的那塊區(qū)域才能進(jìn)入控件中心，因?yàn)橹挥心莾翰艣]有消息“擋住你”，光是這一點(diǎn)就會(huì)讓用戶覺得非常不便利。當(dāng)沒有任何東西擋住你的時(shí)候你又可以比較隨便地滑動(dòng)進(jìn)入控件中心，一切變幻莫測(cè)，用戶必須小心翼翼地進(jìn)行操作，而且誤操作的幾率非常之高。

總結(jié)一下：在能夠橫向滑動(dòng)操作的界面里最好不要再出現(xiàn)能夠橫向滑動(dòng)操作的元素。（當(dāng)然，如果操作方向是相反,或者程序能夠區(qū)分得出用戶想要操作的是哪個(gè)元素的情況下可以有）

橫劃打開相機(jī)好像蠻酷

前面提到，在沒被消息覆蓋的屏幕區(qū)域向左滑動(dòng)可以進(jìn)入相機(jī)，這個(gè)設(shè)計(jì)思路本身是蠻不錯(cuò)的（以往的iOS里面則是按住相機(jī)icon是向上滑動(dòng)進(jìn)入相機(jī)）。在iOS10的鎖屏界面下方出現(xiàn)的小點(diǎn)點(diǎn)也給出了暗示：向左滑動(dòng)可以進(jìn)入相機(jī)。然而···。

我們從場(chǎng)景進(jìn)行分析。

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

總結(jié)一下：這里拿出兩條*尼爾森的啟發(fā)（國(guó)內(nèi)或較多被稱為“尼爾森的十條準(zhǔn)則”）*，大家參考看看。

比給出錯(cuò)誤信息提示更好的設(shè)計(jì)是在一開始就不要讓用戶容易犯錯(cuò)。

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

控件中心到底是在哪個(gè)頁面里？

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

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

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

用戶進(jìn)入了插件中心，看完一些自己想看的東西之后想要退回到之前的頁面，這時(shí)候他是向左橫劃即可，還是由屏幕底部向上滑動(dòng)收起下拉出來的通知中心才行呢？這需要一點(diǎn)點(diǎn)時(shí)間老考慮。盡管他無論如何都能回到去，但是用戶還是需要停下來思考一小會(huì)，所有操作上的停頓都是因?yàn)楫a(chǎn)生認(rèn)知負(fù)擔(dān)。

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

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

總結(jié)一下：

1. 盡量避免在Z軸上面相近的兩個(gè)界面上放相同的信息，這會(huì)對(duì)用戶造成一些困擾。

2. 應(yīng)該給予用戶足夠多的視覺上的暗示來闡明系統(tǒng)當(dāng)前的狀態(tài)。

大總結(jié)

iOS系統(tǒng)一直以其優(yōu)秀的設(shè)計(jì)著稱，這一點(diǎn)無需過多地解釋，或許是這次更新加入了太多前所未有的新功能，讓一些問題被忽略或者說是忽視了。在某些點(diǎn)上，iOS的這次大膽的更新或許需要重新產(chǎn)生出一套更加成熟的設(shè)計(jì)規(guī)范，讓一切重回正軌。另外，無論多么優(yōu)秀的公司的設(shè)計(jì)團(tuán)隊(duì)都會(huì)有犯錯(cuò)的時(shí)候，作為一個(gè)設(shè)計(jì)師我們要有魄力去質(zhì)疑，往往在一些反面教材里面我們能總結(jié)出更加有價(jià)值的經(jīng)驗(yàn)。

藍(lán)藍(lán)設(shè)計(jì)( m.payeee.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)