從交互設計的角度,看iOS11的5點不足

3 評論 13243 瀏覽 37 收藏 7 分鐘

提前下載了開發者版本的iOS11體驗了大半個月,除了很耗電、手機很燙以外,道長打算從交互設計的角度去淺析一下個人對iOS11部分交互以及可改進的地方,為了避免篇幅過長,所以只挑幾點出來講。

一、WP風格的標題欄及導航條功能

熟悉WinPhone(以下簡稱wp)交互風格的同學都知道,這種設計方式是wp一直推崇的,wp的風格就是標題左對齊并很大,不過它的UI界面操作是在底部浮動著,這個主要是跟硬件特性帶來的操作習慣有關,另外本身wp自動的物理操作按鍵是在底部,所以iOS11這次這個改變道長個人覺得還是考慮沒那么周全。

1、普通導航條

iOS11的頁面操作功能還是在導航條上面,用戶往上滑動頁面時,大標題會隱藏、導航條的中間會把標題按照iOS7以后的顯示方式顯示居中,首先動畫過度上來說還是蠻奇怪的,其次是會顯得大標題多余,破壞UI整體性??梢愿娜缦聢D:

改進:上滑時大標題導航條在左邊變小,返回按鈕依然在,另二三級后頁面如果沒有左右滑動切換頁面造成沖突的情況下,統一考慮采用左滑返回上一級頁面。

2、不統一的大標題+tab標簽導航條

比如導航條里面有分tab標簽的情況,iOS11就是不統一的,我們首先拋開說是tab導航條是包含于或不包含于大標題導航條的場景,更何況在最近通話和我的消息這兩個場景里面,tab標簽是大標題的分類,而iOS11卻不統一。

改進:tab標簽在大標題導航的下面,向上滾動時大標題變小,tab吸頂。

3、導航條功能的不統一

看兩個界面里導航條的功能,個人收藏這一幀里的“添加”功能在左邊,“編輯”功能在右邊,而短信的卻反過來,添加在右邊,編輯在左邊,同樣是一級頁面,承載相同能力的功能入口卻放置在相反的位置,我考慮了不同的場景或可能性,但還是覺得很奇怪。

改進:統一“添加”在右邊,“編輯”在左邊。

二、Appstore里面不能統一的“返回”

Appstore的改變很大,業務上改最多,但在交互上,不得不提的是第一幀“今天”的APP詳情頁面,如上圖一,想要返回到一級頁面有兩個操作方法,第一個是點擊右上角的關閉按鈕,第二個操作方法是長按界面向下拉一定距離后松開,則回到上一級頁面。

而在App這一幀點擊到某個APP的詳情頁面后,返回上一級頁面的兩個操作方法分別是點擊導航條左邊的“返回”按鈕或長按頁面向左滑動一定的距離。

改進:統一點導航左上角的“返回”按鈕和長按向左滑動一定距離后返回上一級,下拉一定距離放開返回這個方案看起來不錯,但很多頁面都是需要下拉刷新的,而在物理動作上面,這兩個會造成沖突,所以舍棄掉長按下拉一定距離放開返回上一級的操作。

三、3D touch真的那么好嗎?

改動最大的這個地方,全都支持3D touch特性,使勁長按后彈出更多的操作界面,首先不講這個界面看起來有多亂,蘋果可能也考慮到不支持3D touch的機型怎么處理,所以就在調整屏幕亮度和調整音量的兩個操作上面兼容了輕輕長按也能上下滑動來調整,而使勁長按(3D touch)是跳轉到一個新的界面去,在這個頁面用戶有事輕輕的長按來調整亮度或音量大小。

講真3D touch好費力啊。

那么像“長按”這么省力的交互手勢真的比3D touch差嗎?我和身邊的小伙伴爭論加“似乎達成共識”后覺得,長按和3D touch唯一能解決的問題是——在桌面上長按圖標會觸發的結果是icon上有刪除按鈕,而使勁長按能出快捷方式,所以我個人感覺這個3D touch真心沒那么好。我們看一個長按的例子:

長按真的可以做很炫酷的事情啊,比如UC瀏覽器在新聞詳情頁面長按出現的“老羅大爆炸”功能,輕輕長按和使勁長按(3D touch),你選哪個?

#專欄作家#

芒果道長,人人都是產品經理專欄作家,起點學院特聘導師。騰訊課堂【30天教你做一個APP】作者。

本文獨家首發于人人都是產品經理,未經本站許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 1.3導航條功能的不統一 這一點:在列表類頁面的設計里,對列表及單元的大部分操作(如編輯,刪除,移動),觸發口一般放在右邊/右上角。但是信息應用比較特殊,添加/撰寫新信息是最重要的功能,這個入口的優先程度能有理由將編輯擠到下一級的位置(左上角),代替它在右上角的操作熱區處。

    來自廣東 回復
  2. 第一條,關于導航條的優化建議,如果用在Android上,是好的,完全沒問題。但是用在iOS上,就會和iOS的返回邏輯沖突。

    iOS的返回邏輯是:“返回icon”后面緊跟父頁面的頁面名稱,也就是向用戶預告返回到哪個頁面,然后當前頁面的名稱是居中顯示。
    Android的返回邏輯是:“返回icon”后面就是當前頁面的頁面名稱,左對齊顯示。像微信會在返回icon和頁面名稱中間加個分割線,而一些體驗不好的APP,直接就緊挨在一起。

    來自北京 回復
  3. 用i6就沒有3D touch啦

    來自湖南 回復