那些年蘋果做錯(cuò)的設(shè)計(jì)

3 評(píng)論 9378 瀏覽 45 收藏 24 分鐘

設(shè)計(jì)不是藝術(shù),它不是孤立存在的,更不是設(shè)計(jì)師的自?shī)首詷?lè)。設(shè)計(jì)永遠(yuǎn)和人、使用場(chǎng)景、用戶需求相關(guān)聯(lián)。iOS會(huì)不斷地更新迭代它的設(shè)計(jì),除了有商業(yè)目的上的考慮外,更多的是根據(jù)時(shí)代(人、環(huán)境、需求)的變化而變化,去做符合當(dāng)下的設(shè)計(jì)。

iOS從07年第一代iPhone發(fā)布時(shí)的iPhone OS,已發(fā)展到今天的iOS10。這些年來(lái),iOS從最初的一個(gè)簡(jiǎn)單、粗糙的ROM,發(fā)展成現(xiàn)在手機(jī)ROM中體驗(yàn)標(biāo)桿的操作系統(tǒng)。設(shè)計(jì)風(fēng)格走過(guò)了擬物化,扁平化,今年已發(fā)布的iOS10,設(shè)計(jì)風(fēng)格也開始偏向卡片式風(fēng)格,隨著新的交互方式3D Touch的加入,開始脫離單調(diào)的扁平化設(shè)計(jì),卡片式風(fēng)格讓設(shè)計(jì)語(yǔ)言更加符合用戶的操作認(rèn)知(卡片式的內(nèi)容,對(duì)人有更強(qiáng)的按壓操作暗示)。

1

iOS10鎖屏Widget界面

手機(jī)友商的跟進(jìn)

蘋果的設(shè)計(jì),給大家的印象:總能精準(zhǔn)的發(fā)現(xiàn)用戶的痛點(diǎn),在合適的場(chǎng)景下,創(chuàng)造眼前一亮的設(shè)計(jì)。如手機(jī)屏幕下滑出現(xiàn)快速搜索(Spotlight search),屏幕下邊緣上滑出現(xiàn)控制中心,這些設(shè)計(jì)創(chuàng)新,都能引起行業(yè)內(nèi)的友商迅速跟進(jìn)。

2

Vivo的控制中心的設(shè)計(jì)思路與iOS幾乎一致,操作方式都是從屏幕下邊緣上滑出現(xiàn)控制中心。

3

從左至右,依次為iOS10、MIUI、華為EMUI系統(tǒng)設(shè)置界面。很多手機(jī)ROM的系統(tǒng)設(shè)置,都沿用了蘋果的一套設(shè)計(jì)模式,將系統(tǒng)設(shè)置項(xiàng),用列表分組展示,同時(shí)將不常用設(shè)置項(xiàng),收納在二級(jí)界面中。如左圖,iOS將更多設(shè)置收納在【通用】中,小米則為【其他高級(jí)設(shè)置】,EMUI則為【高級(jí)設(shè)置】。

交互細(xì)節(jié)亮點(diǎn)

蘋果在交互細(xì)節(jié)上,也能深刻洞察用戶使用場(chǎng)景中的操作習(xí)慣,抓住用戶的需求和痛點(diǎn),針對(duì)用戶該使用場(chǎng)景下,可能的行為,去做針對(duì)性的設(shè)計(jì)。毫不夸張地說(shuō),蘋果真是將體驗(yàn)做到了極致。接下來(lái)介紹幾個(gè),個(gè)人認(rèn)為iOS上,做的比較出色的交互細(xì)節(jié)。

1. 空信息時(shí),點(diǎn)擊信息圖標(biāo),直接進(jìn)入【新建信息】頁(yè)面。

4

基于用戶的使用場(chǎng)景,預(yù)判用戶的下一步操作。

用戶在信息中的主要操作任務(wù)是查看歷史信息和新建信息。而如果信息中,沒有歷史信息時(shí),那用戶此時(shí)進(jìn)入,只有一個(gè)操作任務(wù)-新建信息,直接進(jìn)入新建信息頁(yè)面,符合用戶當(dāng)前使用場(chǎng)景的下一步操作意圖。

2. 信息等頁(yè)面搜索框默認(rèn)隱藏,下滑屏幕出現(xiàn),而聯(lián)系人列表界面的搜索框置頂,固定在列表頂部。

5

搜索框在iOS的自帶應(yīng)用中,一般是默認(rèn)隱藏,當(dāng)用戶在頁(yè)面頂部下滑時(shí),出現(xiàn)搜索框,基于用戶的這種操作場(chǎng)景,預(yù)判可能想進(jìn)行搜索,適時(shí)的出現(xiàn)搜索控件。

而在通訊錄聯(lián)系人列表上,搜索框則默認(rèn)出現(xiàn)且置頂。按照交互的一致性原則來(lái)看,其實(shí)是不應(yīng)該這么設(shè)計(jì)的,但考慮到聯(lián)系人列表,查找聯(lián)系人這一行為的使用頻率非常高,且很多人進(jìn)入通訊錄,第一任務(wù)就是通過(guò)搜索框查找聯(lián)系人,有必要將搜索框置頂顯示在聯(lián)系人列表上方。

3. iOS7以后的多任務(wù)界面,會(huì)自動(dòng)將用戶使用的上一個(gè)應(yīng)用默認(rèn)為當(dāng)前界面主要窗口,方便用戶快速的返回上一個(gè)應(yīng)用。

6

iOS7以后的多任務(wù)界面,自動(dòng)將上一個(gè)應(yīng)用默認(rèn)為多任務(wù)界面的主要窗口,一般用戶使用多任務(wù)的場(chǎng)景,主要是在當(dāng)前應(yīng)用和上一個(gè)應(yīng)用之間切換,將上一個(gè)應(yīng)用突出,作為視覺焦點(diǎn),符合絕大部分用戶使用多任務(wù)的場(chǎng)景。iOS的設(shè)計(jì)中,會(huì)著重深挖用戶的下一步操作,而不是死板的呈現(xiàn)交互默認(rèn)值。

反觀iOS7之前的多任務(wù)界面,用同樣的視覺重心,呈現(xiàn)最近四個(gè)打開的程序,缺少對(duì)用戶下一步操作的引導(dǎo)。

那些年蘋果做錯(cuò)的設(shè)計(jì)

蘋果也不是神,它也有做錯(cuò)過(guò)很多設(shè)計(jì),下面介紹一些iOS在版本更新迭代中,修改過(guò)的一些設(shè)計(jì)方案,雖說(shuō)有些設(shè)計(jì)變更,是跟隨整體設(shè)計(jì)風(fēng)格,進(jìn)行的調(diào)整,如iOS7的扁平化視覺風(fēng)格,但有些確實(shí)是蘋果做錯(cuò)了。

以下內(nèi)容,基于現(xiàn)在的角度來(lái)看(設(shè)計(jì)不是孤立存在的,或許在過(guò)去的使用場(chǎng)景下,是合適的,但不適合現(xiàn)在),可能存在爭(zhēng)議,僅代表個(gè)人觀點(diǎn),大家如果有不同意見,歡迎討論。

1. iOS8多任務(wù)界面頂部出現(xiàn)讓人費(fèi)解的最近撥打聯(lián)系人。

8

iOS8在多任務(wù)界面上方,增加了最近聯(lián)系人。希望用戶無(wú)需進(jìn)入撥號(hào)應(yīng)用,通過(guò)雙擊Home鍵,調(diào)出多任務(wù)界面,即可快速的跟最近聯(lián)系人進(jìn)行撥打電話或發(fā)送信息。

這個(gè)設(shè)計(jì)方案,在iOS9更新時(shí),已經(jīng)去掉了。失敗的原因,主要是沒有考慮用戶撥打電話的場(chǎng)景,而是生硬的將撥打電話與多任務(wù),兩個(gè)毫不相關(guān)的場(chǎng)景結(jié)合在一起,與用戶長(zhǎng)久以來(lái),養(yǎng)成撥打電話的習(xí)慣用法相違背。用戶無(wú)論什么時(shí)候撥打電話,都很難想到先雙擊Home鍵,打開多任務(wù),再在此查找最近撥打的聯(lián)系人。而且此種做法,也可能暴漏用戶的隱私。

如果你的設(shè)計(jì),需要解決的是已存在的用戶需求的話,不要挑戰(zhàn)用戶的習(xí)慣用法。

2.iOS7和8的通知中心,按照應(yīng)用歸類通知,iOS9及iOS10改為了按照時(shí)間來(lái)歸類通知。

9

iOS9以后的通知中心,將以前按照應(yīng)用來(lái)分類通知的方式,改為了按照時(shí)間來(lái)分類。我想大家在使用iOS9之前,應(yīng)該都體會(huì)到這種痛苦,清除通知中心的通知,點(diǎn)擊屏幕右側(cè)的叉叉,點(diǎn)的手都酸了的經(jīng)歷。

大家現(xiàn)在都處于一個(gè)信息爆炸的時(shí)代,手機(jī)里面裝了眾多的APP,每天會(huì)受到無(wú)數(shù)的騷擾通知,無(wú)效通知的數(shù)量遠(yuǎn)遠(yuǎn)大于有用的通知,大部分通知,用戶其實(shí)掃一眼,然后刪掉即可。通知中心最急切的需求,就是如何快速處理垃圾通知,目前,蘋果將其改為了按照時(shí)間歸類顯示通知,已有效改善處理的效率。

但其實(shí)還不夠,應(yīng)該讓用戶能方便的屏蔽通知,這也是用戶的一個(gè)痛點(diǎn),應(yīng)該允許用戶在通知中心中,可以屏蔽通知,不再接收某一應(yīng)用發(fā)來(lái)的通知。不要告訴我,第一次打開該APP時(shí),有彈出是否允許接收通知的彈窗,我想說(shuō),我還沒使用該APP,我怎么確定我喜不喜歡它呢。

深挖用戶的痛點(diǎn),而不要僅想當(dāng)然做設(shè)計(jì)。

10

網(wǎng)上搜了下,對(duì)iOS清除通知的方式吐槽的人,還挺多。

3. iOS10將iOS9相機(jī)界面的濾鏡與前后置攝像頭切換功能按鈕位置對(duì)調(diào)。

11

iOS10相機(jī)界面,將之前相機(jī)界面的濾鏡和前后置攝像頭的位置做了對(duì)調(diào)。整個(gè)設(shè)計(jì)的改動(dòng)原因,顯而易見,將使用頻率高的功能放置在更顯眼,且用戶更容易操作的區(qū)域。

將更常用的前后置攝像頭切換功能放置在用戶拍照界面下方,因?yàn)樵谑殖窒鄼C(jī)拍照時(shí),無(wú)論是豎持,還是橫持手機(jī),屏幕下方的區(qū)域都是用戶更方便點(diǎn)擊到的位置。而根據(jù)我們拍照的習(xí)慣,尤其愛美的MM,前后置攝像頭切換圖標(biāo)點(diǎn)擊的頻率,是遠(yuǎn)遠(yuǎn)高于濾鏡圖標(biāo)的點(diǎn)擊。況且現(xiàn)在第三方濾鏡APP,如Instagram,做的濾鏡種類遠(yuǎn)遠(yuǎn)豐富過(guò)iOS自帶相機(jī)。不過(guò),也不能就此斷定,iOS的相機(jī)設(shè)計(jì)師,以前沒有考慮到這個(gè)細(xì)節(jié),有可能之前有商業(yè)角度的考慮,想推廣自帶相機(jī)的濾鏡功能。

4. iOS7測(cè)試版的鎖屏界面,出現(xiàn)同樣的兩個(gè)操作指引箭頭,以及模糊不清的解鎖文案說(shuō)明。

12

很多人可能沒見過(guò)上左圖的解屏界面,它只在iOS7的前幾個(gè)測(cè)試版出現(xiàn)過(guò),不久后,就改正了。記得那會(huì)刷iOS7測(cè)試版時(shí),刷好后,點(diǎn)亮屏幕的瞬間,被這個(gè)解鎖界面嚇到了,讓我頓時(shí)變成了一個(gè)智能手機(jī)小白,不知該如何操作,根據(jù)我有限的認(rèn)知,結(jié)合解鎖界面的說(shuō)明文案和指引箭頭,從屏幕下方往上滑了那么一下,結(jié)果操作錯(cuò)誤,后來(lái)發(fā)現(xiàn)是向右滑動(dòng)解鎖。根據(jù)解鎖界面的提示文案,和緊挨著文案的向上箭頭,用戶很容易將兩者結(jié)合起來(lái)理解,記得那會(huì)很多人,跟我一樣以為向上滑動(dòng)解鎖。估計(jì)iOS7的設(shè)計(jì)變化太大,蘋果的設(shè)計(jì)師那會(huì)忙不過(guò)來(lái),草率的出了這么一個(gè)存在令人誤解的解鎖界面扁平化設(shè)計(jì)方案。還好,沒過(guò)多久,在正式版之前,就及時(shí)調(diào)整了。

上左圖解鎖界面,除了上面提到的解鎖方式指引問(wèn)題以外,還存在主要操作任務(wù)不清晰的問(wèn)題。該界面同時(shí)存在兩個(gè)箭頭,一個(gè)向上,一個(gè)向下,從視覺重心來(lái)看,它倆給用戶的暗示程度是一樣的,按照一個(gè)界面一個(gè)主要任務(wù)的設(shè)計(jì)原則,讓用戶如何理解,在解鎖界面,應(yīng)該上滑呢,還是下滑,最要命的是,無(wú)論上滑出現(xiàn)控制中心,下滑出現(xiàn)通知中心,都不是該界面的主要任務(wù),該界面的主要任務(wù)應(yīng)該是解鎖手機(jī)。而按照這個(gè)解鎖設(shè)計(jì)方案來(lái)看,用戶會(huì)被誤導(dǎo)上滑解鎖,或下滑解鎖,完全想不到右滑解鎖。

新的解鎖方案,在解鎖提示文字上左側(cè)增加了一個(gè)向右的箭頭,同時(shí)文字上,增加了向右掃光的動(dòng)畫,暗示用戶向右滑動(dòng)解鎖。界面上下箭頭也改為了短平線,減弱用戶的注意力,讓用戶聚焦到該界面主要任務(wù),向右滑動(dòng)解鎖。

5. iOS7之前的鎖屏界面,快速查看通知操作隱晦,引導(dǎo)性差。

13

關(guān)于交互,有幾點(diǎn)基本的原則:

  • 操作前可以預(yù)知;
  • 操作中有反饋;
  • 操作后可撤銷。

左圖,從界面操作前可預(yù)知角度來(lái)看,只有右滑解鎖的操作指引暗示,并沒有右滑通知,快速解鎖并進(jìn)入該通知應(yīng)用的操作暗示,界面的可用性有些差,用戶并不能知道如何快速查看通知,而用戶手機(jī)收到通知后,快速查看通知恰恰是用戶要做的主要操作。我記得那會(huì),還是同事告訴我:“你在通知上右滑看看,可以解鎖并查看通知?!毕嘈藕芏嗳四菚?huì)應(yīng)該跟我一樣,不知道鎖屏界面還可以這么操作。

右圖的解鎖界面,在最近一條通知附近,有【滑動(dòng)來(lái)查看】的文字提示,暗示在通知上滑動(dòng)進(jìn)行查看。不存在iOS6之前鎖屏界面無(wú)法獲知【右滑通知快速解鎖并查看】的可用性問(wèn)題。

6. iOS7之前的多任務(wù)切換,視覺焦點(diǎn)不夠突出,用戶的主要操作是切換最近程序,而將屏幕大部分空間浪費(fèi)在顯示對(duì)當(dāng)前操作無(wú)用的桌面。

14

多任務(wù)界面有且都只有一個(gè)任務(wù):切換最近使用的程序。但iOS6的多任務(wù)界面,只利用了屏幕下方不到1/4的區(qū)域,用于切換最近程序,既然用戶的主要操作就只有左右滑動(dòng)切換最近程序,為什么不能全屏操作,要委屈用戶的手指在下方那一點(diǎn)區(qū)域操作,且點(diǎn)擊想打開的程序,還得非常精準(zhǔn)的小心翼翼的點(diǎn),才能點(diǎn)中。而iOS7的多任務(wù)界面,就直觀清晰很多了,直接將用戶最近使用的程序界面圖和程序iCON平鋪在桌面上,操作焦點(diǎn)明確。

iOS7的多任務(wù)界面,程序縮略圖顯示最近的三個(gè)程序,而程序ICON顯示五個(gè),設(shè)計(jì)意圖是為了方便用戶更快速地切換最近的其他程序,但會(huì)給用戶造成使用上的困惑,根據(jù)iOS9和10的多任務(wù)界面改動(dòng)來(lái)看,蘋果應(yīng)該是參考了用戶使用數(shù)據(jù),很少人會(huì)去切換最近的第三或四個(gè)程序。

iOS6的多任務(wù)界面信息呈現(xiàn)還存在一個(gè)問(wèn)題:沒有主次之分。所有信息都用同樣的視覺強(qiáng)度呈現(xiàn),但并不是所有信息對(duì)于用戶來(lái)說(shuō)都是同等重要的,比如說(shuō),用戶最常使用的場(chǎng)景是:在最近兩個(gè)程序間來(lái)回切換。

7. 通話記錄中,如果聯(lián)系人有多個(gè)號(hào)碼,該通話記錄的撥打號(hào)碼不清晰。

15

iOS9之前的通話記錄中,用藍(lán)色標(biāo)注該通話記錄的撥打號(hào)碼,如果通話記錄對(duì)應(yīng)的聯(lián)系人,存在多個(gè)號(hào)碼的話,該通話記錄對(duì)應(yīng)的撥打號(hào)碼,并不能直觀的看出是哪個(gè)號(hào)碼。

iOS10在通話記錄對(duì)應(yīng)的撥打號(hào)碼上增加了一個(gè)【最近】的識(shí)別標(biāo)簽,則清晰很多,用戶可以直觀的看出哪個(gè)號(hào)碼是我該回?fù)艿奶?hào)碼。

8. iOS7的控制中心 UI界面更像沒經(jīng)過(guò)設(shè)計(jì)的交互稿,不同功能區(qū)域劃分并不清晰,明確。

16

信息的分組方式,根據(jù)格式塔理論,常規(guī)處理為間距、分割線、背景色來(lái)區(qū)分不同的信息,對(duì)比iOS7的控制中心,有沒有覺得iOS7的控制中心界面,很像沒經(jīng)過(guò)設(shè)計(jì)的交互稿,在功能多區(qū)域小的場(chǎng)景下,iOS7控制中心僅僅通過(guò)分割線來(lái)區(qū)分不同的功能區(qū)域,顯得界面過(guò)于凌亂,且用戶可操作的區(qū)域也不明確。而iOS9和iOS10通過(guò)不同的背景色區(qū)分不同功能區(qū),信息的呈現(xiàn)更加清晰。

9. iOS的分享菜單中,下面一欄功能,給人的感覺是不可點(diǎn)擊狀態(tài)。

17

分享界面下面一排功能圖標(biāo)與上面一排應(yīng)用圖標(biāo)的視覺差異,傳遞給人的感受,下面一排功能圖標(biāo)狀態(tài)更像是不可點(diǎn)擊狀態(tài),讓人感覺功能不可用。

10. 郵件詳情界面,iOS10用左右箭頭映射上一封下一封,不如iOS9用上下箭頭映射上一封下一封郵件自然直觀,更容易讓用戶理解。

18

iOS郵件列表,新的郵件在列表上方,較舊的郵件在新的郵件下方。

iOS10的郵件詳情中,用左右箭頭表示下上封郵件。向左的箭頭給用戶的暗示是返回,可以理解為返回時(shí)間較早的一封郵件,即列表下一封郵件。向右的箭頭表示前進(jìn),理解為去查看較新的一封郵件,即列表上一封郵件。左側(cè)箭頭—>上一封舊郵件,右側(cè)箭頭—>下一封新郵件,但此種對(duì)應(yīng),與郵件列表中,新郵件在上,舊郵件在下,是一個(gè)很糟糕的映射關(guān)系,增加了用戶的認(rèn)知負(fù)擔(dān),用戶很難理解,為何點(diǎn)擊左側(cè)箭頭,會(huì)跑到了列表下一封郵件。

舉一個(gè)【設(shè)計(jì)心理學(xué)】中,關(guān)于映射的例子。

19

燃?xì)庠羁丶脑愀庥成洌?/strong>

最左邊的旋轉(zhuǎn)控制的是左前燃?xì)忸^還是左后燃?xì)忸^?用戶每次使用燃?xì)庠顣r(shí),都得弄清楚映射關(guān)系。

20

燃?xì)庠羁丶那逦成洌?/strong>

上圖旋鈕和燃?xì)忸^的映射關(guān)系非常清晰,因?yàn)樾o的空間布局已將旋鈕與燃?xì)忸^清晰地聯(lián)系起來(lái)。

iOS9的郵件詳情,用上下箭頭控制上一封,下一封郵件就比較好理解多了。點(diǎn)擊向上箭頭,去到該封郵件列表上一封郵件,點(diǎn)擊向下箭頭,去到該封郵件列表下一封郵件。上下箭頭點(diǎn)擊后的去處,更符合“自然映射”,與郵件列表中的郵件順序映射關(guān)系比左右箭頭容易理解多了。

11. iOS10刪除應(yīng)用確認(rèn)對(duì)話框,將【刪除】Button從左側(cè)移至了對(duì)話框右側(cè)。

21

iOS10將刪除應(yīng)用的確認(rèn)對(duì)話框中,【刪除】Button的位置從左側(cè)移至了右側(cè),同時(shí)從藍(lán)色加粗,變更為了紅色加粗,增強(qiáng)了刪除操作的視覺提示。

iOS對(duì)話框操作按鈕的一般原則是:主要操作在右,取消操作在左。而刪除應(yīng)用的確認(rèn)對(duì)話框,一直以來(lái)都是逆向設(shè)計(jì),將【刪除】置于左邊,【取消】在右邊?,F(xiàn)在這個(gè)改動(dòng),證明他們之前的逆向設(shè)計(jì)是有問(wèn)題的。本身用戶進(jìn)行刪除操作,已經(jīng)有非常高的門檻,長(zhǎng)按圖標(biāo),圖標(biāo)抖動(dòng)后,需要精準(zhǔn)的點(diǎn)擊刪除叉號(hào)(而且刪除還放置在不那么好點(diǎn)的左上角),才能出現(xiàn)確認(rèn)刪除對(duì)話框,這一系列操作足以保證用戶不是誤操作了,沒有必要再為了防止用戶誤操作,而設(shè)計(jì)刪除障礙。

總結(jié)

22

設(shè)計(jì)不是藝術(shù),它不是孤立存在的,更不是設(shè)計(jì)師的自?shī)首詷?lè)。設(shè)計(jì)永遠(yuǎn)和人、使用場(chǎng)景、用戶需求相關(guān)聯(lián)。iOS會(huì)不斷地更新迭代它的設(shè)計(jì),除了有商業(yè)目的上的考慮外,更多的是根據(jù)時(shí)代(人、環(huán)境、需求)的變化而變化,去做符合當(dāng)下的設(shè)計(jì)。

 

作者:代希剛(個(gè)人微信號(hào):daixigang 微信號(hào)公眾號(hào):UXXX),騰訊交互設(shè)計(jì)師。

本文由 @代希剛 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 其中有幾個(gè)不能算是蘋果做錯(cuò)的設(shè)計(jì)吧,只能算是不斷的優(yōu)化;在還沒住過(guò)5星級(jí)酒店之前覺得如家也挺好住的

    來(lái)自上海 回復(fù)
  2. 第一張圖太難看了。瞬間讓我想到當(dāng)初的諾基亞N8。這是歷史的倒退。

    來(lái)自北京 回復(fù)
  3. 至少接地氣兒,贊

    來(lái)自廣東 回復(fù)