【交互設(shè)計干貨】11條App設(shè)計準(zhǔn)則

App設(shè)計準(zhǔn)則

1. 給足暗示,別藏著掖著

很多App喜歡用手勢引出功能,就比如長按或兩指點(diǎn)擊。用手勢引出功能本非壞事,但得確保操作的顯而易見。你得把UI畫清楚,讓用戶明白背后的含義。如果用戶根本不知道如何操作,或者操作的提示并不明顯,這種設(shè)計就形同虛設(shè)。

值得注意的是,如果你設(shè)計的手勢,不同于系統(tǒng)標(biāo)準(zhǔn)中的常規(guī)手勢,那么用戶可能更希望通過以前習(xí)慣性的手勢,來完成操作。

還有一點(diǎn),如果用戶沒有用手勢去觸發(fā)某功能,而該功能又沒有以其他形式呈現(xiàn)給用戶,那么用戶會陷入不知從哪里去尋找該功能的困惑中。

就比如,iOS自帶的郵件App,“刪除郵件”的功能隱藏在長按“歸檔“圖標(biāo)之后。

2. 去粗取精,精簡即王道

如果你還糾結(jié)于某功能放哪兒時,那么可能意味著該功能并不是很重要,你得簡化App。

舉個栗子,比如谷歌地圖,就有很多隱藏功能:位置信息,搜索歷史,方向,當(dāng)?shù)赝扑],分享功能等。

但并非人人都可以像谷歌如此全能,集多種功能于一身。最好的辦法是,簡化次要,突出重心。很多好用的App,就是集中精力做好一個主要功能。

去粗取精并不會讓你的App遜色,它能更好的強(qiáng)調(diào)主要功能,讓App輕松易用。

3. 單一功能,忌漢堡菜單

如果你的App有很多功能,你可能想用漢堡式菜單(hamburger menu)。但數(shù)據(jù)顯示,它非常低效,這些被放在里面的功能,不容易被看到(如果不點(diǎn)擊漢堡式菜單的話),而且還容易和其他導(dǎo)航方式相沖突。

那么什么時候使用漢堡式菜單呢?除非里面的功能,80%的情況下,都不會被用到 。

換句話說,主頁面就能實(shí)現(xiàn)的功能,是主要功能。次要功能,比如設(shè)置,就可以放在漢堡式菜單里。GoGatch,一個預(yù)約出租車的App,就是典型例子。

除了漢堡式菜單,有哪些可替代方案呢?

如果你的App非常復(fù)雜,并且精簡功能不太可能,那么你可以用其他菜單,來代替漢堡式菜單。比如,標(biāo)簽菜單(tab menu),具體栗子是,用戶點(diǎn)擊“更多”,就能加載更多,像Facebook。或者橫向滑動菜單(horizontal scroll menu),下拉式菜單(drop down menu)等。

4. 方便至上,別拒人千里

但非人人都能力相當(dāng),當(dāng)你用對比色(比如紅色和綠色)來區(qū)分不同狀態(tài)時,你有考慮過色弱和色盲的感受嗎?

所以啊,別總用依賴顏色,再加點(diǎn)兒補(bǔ)充說明(extra cue),比如圖形(icons)或文字(text)。(如下所示)

對于這些有特殊需求的用戶,作為設(shè)計師,得善用設(shè)計規(guī)范。比如iOS的設(shè)計規(guī)范中(standard controls鏈接),就涵蓋了針對不同的用戶群體,所采取的不同設(shè)計方案。具體如,針對色弱和色盲的反轉(zhuǎn)色屏幕,聲控操作,語音識別等,非常人性化。

5. 動效輔佐,讓過程流暢

動效就如潤滑劑,讓頁與頁之間的跳轉(zhuǎn),順暢而自然。比如,當(dāng)用戶點(diǎn)擊了一個按鈕之后,在彈出的頁面上,看見左上角的“返回”按鈕時,便知道,“哦,我還有退路可尋?!?/p>

通常情況下,大部分系統(tǒng)自帶的動效,比如向左滑動,彈出窗口等,已能有效滿足用戶需求。但如果你想設(shè)計原創(chuàng)動效,請務(wù)必問問自己,是真的希望讓界面過度更為舒暢,還是僅僅讓它看起來高大上?

6. 簡明扼要,別啰哩吧嗦

手機(jī)屏幕就那么點(diǎn)兒大,App里的文本信息,最好簡單明了。精簡文本,易找(approachable),易用(usable),易懂(understandable)。下面這個租車App就是個反例,太多信息,雜亂冗長,和mini版的網(wǎng)頁沒什么區(qū)別。

(Avis,租車App)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

7. 除非必要,忌彈出窗口

很多用戶會直接關(guān)掉彈出窗口,讀都不讀。

(別設(shè)計這種雞肋的彈出窗口)


除非必要,盡量別用。具體例子如,起提示作用的彈出窗口:

在進(jìn)行某一操作時,征求用戶的許可。比如,一個拍照App,征求用戶使用相機(jī)的許可。

又比如,刪除重要的內(nèi)容時,和用戶再次確認(rèn),是否刪除。

當(dāng)你使用彈出性提示窗口時,要精簡直接,避免與用戶正在進(jìn)行的操作缺乏直接聯(lián)系。避免使用一般性用語,比如“OK”“取消”,或者“YES”“NO”。盡量使用與正在進(jìn)行的操作,具有直接聯(lián)系的用語,比如“刪除”“上傳”等。

提示窗口讓交互過程更加謹(jǐn)慎,提醒用戶正在進(jìn)行的操作,避免誤刪或其他失誤。具體應(yīng)用場景,比如,“下載完成”“已加入購物車”等。

再者,留有退路,也是很重要的人性化功能。讓用戶“撤銷”某一操作,比“再次確認(rèn)”某一操作,更便捷有效。(如下圖所示)

對于操作錯誤時的警示窗口,應(yīng)提供解決問題的有效方案,而非僅僅告知其“出錯了”。別像下圖那樣設(shè)計:

(用戶就納悶兒了,“出了什么問題,又該如何解決?”)

8. 解決問題,請注意措辭

當(dāng)App中的問題得到解決,希望告知用戶時,要避免“問題已解決,功能已提升”這種籠統(tǒng)干澀的用語,而應(yīng)涵蓋具體細(xì)節(jié)。例如,介紹用戶使用場景,以故事的形式,呈現(xiàn)有價值的信息?;蛘吲c用戶互動,增加用戶反饋。范例如下:

9. 理性對待,重用戶反饋

認(rèn)真對待用戶反饋,但勿言聽計從。你得心里有數(shù),你的App應(yīng)該怎么運(yùn)做。

用戶選擇你的產(chǎn)品,是對你的想法和決定的認(rèn)可。當(dāng)他們想提建議時,別充耳不聞。

當(dāng)用戶希望新增某項(xiàng)具體功能時,多思考背后的原因,別只是盲目的應(yīng)和。把它當(dāng)做一次機(jī)會,讓你重新設(shè)計基礎(chǔ)的任務(wù)流程。

換言之,就是讓你重新思考,哪些任務(wù)需要被完成。

設(shè)計之后的版本,是與之前大不相同,像新的一樣?還是在原有基礎(chǔ)上,進(jìn)行微調(diào)?你可以征求用戶的意見。

10. 用戶測試,應(yīng)耐心觀察

在進(jìn)行用戶測試時,先別急于引導(dǎo),而應(yīng)耐心觀察。

在觀察用戶使用產(chǎn)品的過程中,找到突破點(diǎn)。留意問題出現(xiàn)在哪個階段,何種狀態(tài)。做一個耐心的觀察者,而非質(zhì)問者。當(dāng)用戶對某一操作產(chǎn)生疑問時,應(yīng)認(rèn)真觀察其反應(yīng),而非立即詢問怎么回事。

再者,不要心存預(yù)設(shè)和偏見。用戶研究是用來“檢測”設(shè)計的,而非“證實(shí)”設(shè)計的。

產(chǎn)品或多或少都會有瑕疵,如果產(chǎn)品的可用性測試一無所獲,對產(chǎn)品的提升,提不出半點(diǎn)有效建議,那么只能說明,測試的方法不對。

11. 遵照規(guī)范,多平臺投放

不管你的產(chǎn)品是投放在iOS、安卓,還是Windows平臺上,都應(yīng)遵照其相應(yīng)的設(shè)計規(guī)范。

你可以做如下選擇:

1. 在各平臺的設(shè)計規(guī)范和各品牌的設(shè)計規(guī)范中,求得平衡與統(tǒng)一。例如Facebook App。

2. 側(cè)重平臺的設(shè)計規(guī)范,例如WhatsApp App。

3. 側(cè)重品牌的設(shè)計規(guī)范,例如Instagram App。

取決于你的App復(fù)雜程度,

通俗來講,App越是復(fù)雜,產(chǎn)品的開發(fā)時間就越長,用戶的學(xué)習(xí)成本就越大。這種情況下,應(yīng)該聰明的利用該平臺上已有的標(biāo)準(zhǔn),進(jìn)行設(shè)計。這樣一來,大大節(jié)省了產(chǎn)品的開發(fā)時間,降低了用戶的學(xué)習(xí)難度。

(圖)

比如澳洲稅務(wù)局App,在iOS,安卓,Windows不同的平臺上,雖采用了不同的UI元素,但它們都遵從了同樣的設(shè)計規(guī)范。比如套索開關(guān)(toggle switch),雖形狀不同,但顏色一致。


結(jié)語

精簡App功能

區(qū)分主要次要

少用漢堡菜單

確保可讀可觸

不做浮夸動效

濃縮文字信息

觀察用戶行為

熟知設(shè)計規(guī)范

本文為作者為平日收集的交互好文,逐字翻譯,規(guī)整用語。希望用簡潔凝練的表達(dá)方式,分享給大家。歡迎討論、勘誤。

譯者背景:加州藝術(shù)學(xué)院(CCA)交互設(shè)計本科

譯者網(wǎng)站:ritalei.com

英文原版鏈接:https://uxplanet.org/10-plus-1-commandments-for-the-modern-mobile-app-designer-7370353fb034

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容