泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式

2016-10-24    資深UI設(shè)計(jì)者

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

如果你是一名移動(dòng)產(chǎn)品設(shè)計(jì)師,你可能會同意這樣的觀點(diǎn):參考借鑒別人的設(shè)計(jì)不算抄襲。這不僅是最佳的練習(xí)方法,也是一種設(shè)計(jì)模式,而且還符合業(yè)界主流的設(shè)計(jì)趨勢,同時(shí)還能確保在用戶熟悉的模式下來創(chuàng)建可用性的界面。

有人可能會說,堅(jiān)持設(shè)計(jì)規(guī)范和跟隨其他人的步伐會扼殺創(chuàng)造力,而且時(shí)至今日,所有的APP看起來都是大同小異。從用戶體驗(yàn)的角度來看,我看到了一個(gè)不一樣的問題。你相信Google、Facebook、Instagram永遠(yuǎn)是正確的,所以習(xí)慣于采用他們的做法,因?yàn)樗麄兊脑O(shè)計(jì)目標(biāo)與你的設(shè)計(jì)目標(biāo)相同,所以你不會對此產(chǎn)生質(zhì)疑。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

我還總結(jié)了一些設(shè)計(jì)模式,在過去可能被認(rèn)為是最佳的實(shí)踐方法,但結(jié)果可能不如你想象的那么美好。

1、隱藏導(dǎo)航

在業(yè)內(nèi)各大熱門設(shè)計(jì)社區(qū),至少有50萬篇的相關(guān)文章分析漢堡包菜單(是指把菜單折疊隱藏在抽屜,因菜單圖標(biāo)像漢堡包得名),但現(xiàn)在反對這種設(shè)計(jì)模式的人也越來越多了,我想這并不是因?yàn)榇蠹叶紝徝榔诹?。簡單來說,我們要討論的不是關(guān)于圖標(biāo)本身,而是隱藏在圖標(biāo)后面的導(dǎo)航。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

幻燈片菜單靈活,方便使用

漢堡包導(dǎo)航非常易于設(shè)計(jì),你不必?fù)?dān)心屏幕空間放不下那么多內(nèi)容,只需將整個(gè)導(dǎo)航藏到左側(cè),導(dǎo)航內(nèi)容超出一屏的時(shí)候滾動(dòng)疊加。

然而,實(shí)驗(yàn)表明,以更可見的方式露出菜單選項(xiàng),可以提高用戶的參與度和滿意度,甚至能提升整體的轉(zhuǎn)化率。 這就是為什么現(xiàn)在大家都從漢堡菜單轉(zhuǎn)向易于發(fā)現(xiàn)的標(biāo)簽菜單。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

YouTube將菜單露出

2、無處不在的圖標(biāo)

由于屏幕空間有限,在大部分情況下,盡量使用圖標(biāo)代替文本標(biāo)簽,這樣會節(jié)省一些空間。 圖標(biāo)有豐富的隱喻性,大部分圖標(biāo)所代表的含義都能被用戶識別,不需要更多的理解,而且用戶大多也接受了這樣的方式。

但圖標(biāo)又有它本身的限制所在,假設(shè)你從未使用過Google翻譯,你能知道這個(gè)圖標(biāo)它所代表的功能是什么嗎?

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

谷歌翻譯

只有當(dāng)用戶點(diǎn)擊圖標(biāo)并彈出這個(gè)手寫輸入界面之后,才知道原來這個(gè)圖標(biāo)的含義是手寫功能。當(dāng)用戶不能明確功能入口指向的時(shí)候,用戶通常不會主動(dòng)去使用這個(gè)功能,阻礙了功能的曝光。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

這是一個(gè)非常常見的誤區(qū),因?yàn)槲覀儠匀坏恼J(rèn)為,用戶熟悉抽象圖形,或者他們愿意花更多的時(shí)間探索和學(xué)習(xí)怎么使用你的應(yīng)用,包括下面這個(gè)神秘的標(biāo)簽欄,如果沒有文字,單看圖標(biāo)你能理解這個(gè)圓圈和六邊形代表什么嗎?

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

如果你設(shè)計(jì)了一個(gè)識別性不強(qiáng)的圖標(biāo),希望通過彈框的方式來提示用戶,讓其變得可理解,這其實(shí)并不是一個(gè)很好的解決方案,因?yàn)閺椏蛱崾镜姆绞讲⒉贿m合在移動(dòng)端使用。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

Foursquare應(yīng)用

雖然有種種限制,這并不意味著你不應(yīng)該使用圖標(biāo),同樣也有大量的圖標(biāo)用戶非常熟悉,但那些大多是表示常見功能,例如搜索、視頻播放、電子郵件、設(shè)置等等。不過有些圖標(biāo)用戶可能仍然不確定是什么意思,比如當(dāng)他們點(diǎn)擊一個(gè)愛心圖標(biāo)的時(shí)候會發(fā)生什么?

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

大部分圖標(biāo)能被用戶識別,而且表意明確,但是有些相對復(fù)雜和抽象的圖標(biāo),應(yīng)該在其下方添加文字說明。 這樣能讓圖標(biāo)在菜單中更容易被發(fā)現(xiàn),而且能提高點(diǎn)擊率,同時(shí)也讓界面更富美感和個(gè)性。

像下方的繪畫應(yīng)用,如果沒有圖標(biāo)的裝飾,界面就會變得十分呆板,且不方便用戶快速識別功能,可用性會大打折扣;如果沒有文字說明,用戶又無法快速理解圖標(biāo)所以代表正確含義。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

總而言之,基本功能可以用通識性較強(qiáng)的圖標(biāo)來表示,但對于復(fù)雜功能且無法直觀理解的,應(yīng)該配合對應(yīng)的文字說明。 如果你需要使用到某些不常見的圖標(biāo),可以先進(jìn)行可用性測試,多問一些同事和朋友,確保其辨識性。

3、基于手勢的導(dǎo)航

當(dāng)蘋果在2007年推出iPhone時(shí),多點(diǎn)觸摸技術(shù)第一次進(jìn)入到大眾視野,所有人為這個(gè)新奇的功能感到震撼,這是以往設(shè)備所從來沒有的。我們可以用手指在屏幕上直接操作,點(diǎn)按、捏合、縮放、下拉、滑動(dòng)、旋轉(zhuǎn),等等。

在設(shè)計(jì)師眼里,手勢是一個(gè)很受歡迎設(shè)計(jì)模式,有許多APP就是是圍繞手勢控件來進(jìn)行設(shè)計(jì)的。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

clear的手勢導(dǎo)航

像隱藏導(dǎo)航與沒有文字說明的圖標(biāo)一樣,使用手勢操作的設(shè)計(jì)可以讓界面變的更簡潔。但是和前兩者的隱藏內(nèi)容不同,手勢導(dǎo)航是永遠(yuǎn)隱藏的,如果用戶忘記了這個(gè)手勢,他就會在導(dǎo)航上花費(fèi)很多時(shí)間,十分致命。

“應(yīng)不應(yīng)該有一個(gè)刪除按鈕,用戶可以向左或向右滑動(dòng),這個(gè)由產(chǎn)品設(shè)計(jì)師決定的。”

此外,手勢與圖標(biāo)具有相同的問題,像點(diǎn)按、縮放和滾動(dòng)這樣常見的手勢操作,用戶是熟悉并且理解的;但有一些操作,像側(cè)滑、雙擊和雙指縮放這樣的操作,如果需要用戶主動(dòng)去發(fā)現(xiàn),那是有難度的。

而且不同的APP之間,其所運(yùn)用的手勢并不是統(tǒng)一和標(biāo)準(zhǔn)的,它仍然是一個(gè)新興的界面設(shè)計(jì)領(lǐng)域。 即使是像左滑這么簡單的一個(gè)手勢,在不同的郵件客戶端里它們所代表的都是不同的功能。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

Apple Mail向右滑動(dòng)郵件列表是未讀取選項(xiàng)

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

Mailbox中相同的手勢是郵件存檔

仔細(xì)分析了下,當(dāng)我們搖動(dòng)設(shè)備的時(shí)候,在iOS中它代表的是撤銷,但在谷歌地圖中,它則是發(fā)送反饋的意思。

手勢設(shè)計(jì)的難點(diǎn)在于,它是隱藏的控件,這需要在用戶端做大量的努力,向所有的用戶去教育手勢的應(yīng)用。 如果你是產(chǎn)品負(fù)責(zé)人,你會怎么教會用戶向右滑動(dòng)?

4、用戶幫助和提示

當(dāng)用戶第一次使用APP的時(shí)候,大部分時(shí)候我們是通過新手引導(dǎo)一步一步教育用戶使用新功能,告訴用戶這些功能的含義。但是我并不認(rèn)可這樣的方式,用戶進(jìn)入APP后首先是想激動(dòng)的使用新功能,而不是先花幾分鐘來學(xué)習(xí)。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

搜索應(yīng)用程序中的教練標(biāo)記

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

“一個(gè)用戶界面就像是一個(gè)笑話,如果需要解釋笑點(diǎn)在哪里,那說明還不夠好笑?!?

漸進(jìn)式引導(dǎo)是指以一種更加互動(dòng)的方式來吸引首次注冊的用戶, Duolingo不解釋APP的工作原理,鼓勵(lì)用戶跳過,并用所選擇的語言進(jìn)行快速測試,也不需要用戶注冊,因?yàn)樽層脩糇羁焓煜さ姆椒ň褪菍?shí)際的體驗(yàn)。 此外,這也是一個(gè)更快速展現(xiàn)APP價(jià)值的一個(gè)途徑。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

還記得Mailbox中的滑動(dòng)手勢與Apple Mail的不同之處嗎?這是Mailbox的漸進(jìn)式引導(dǎo),每一個(gè)手勢都會有對應(yīng)的說明,用戶必須嘗試每個(gè)手勢,然后才真正開始使用APP。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

當(dāng)我們在半透明黑色蒙版上添加引導(dǎo)之前,先停下來好好思考一下,什么才是用戶使用時(shí)真正需要的。 用戶需要專注于內(nèi)容, 你應(yīng)該花時(shí)間想出一個(gè)更好的方式來迎接第一次使用的用戶。

5、有創(chuàng)意但不直觀的空狀態(tài)

空狀態(tài)是一個(gè)容易被新手設(shè)計(jì)師忽略的東西,以為無足輕重。但是,當(dāng)它涉及到APP的整體體驗(yàn)時(shí),空狀態(tài)可能是一個(gè)重要的構(gòu)成因素。

設(shè)計(jì)師往往在錯(cuò)誤消息和空狀態(tài)頁面發(fā)揮視覺創(chuàng)造力,通過情感化的設(shè)計(jì)舒緩用戶的情緒并指引他們。但,這不一定正確,過渡的設(shè)計(jì)可能適得其反。

我從谷歌相冊里面截取了一張空狀態(tài)的圖片,以這個(gè)為反例來分析一下。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

第一眼看上去給人感覺還不錯(cuò),對吧? 井井有條的排版布局,再配上精致的插圖。當(dāng)我們仔細(xì)看這個(gè)頁面的時(shí)候,就會發(fā)現(xiàn)有一些奇怪的問題:

– 這里沒有任何內(nèi)容,為什么右下角會有一個(gè)突出的搜索按鈕? 用戶要在一個(gè)空白頁面搜索什么?

– 插畫圖形應(yīng)該是不可點(diǎn)擊的,既然不可點(diǎn),為什么要做的這么突出?

– 提示說點(diǎn)擊頂部的加號按鈕制作專輯也是超尷尬,為什么提示本身不包含添加按鈕?需要用戶去到另一個(gè)地方點(diǎn)擊,這就像是“點(diǎn)擊繼續(xù)按鈕繼續(xù)”一樣。

這個(gè)空狀態(tài)內(nèi)容根本幫不了用戶理解上下文:

– 什么是收藏? 收藏它們有什么用?

– 為什么我沒有?

– 在這個(gè)頁面,我能做什么?

當(dāng)我們談到創(chuàng)造力的時(shí)候,有時(shí)候會覺得少即是多, 下面Loots的空狀態(tài)是一個(gè)很好的例子。

泛濫的移動(dòng)產(chǎn)品設(shè)計(jì)模式-IAMUE-交互設(shè)計(jì)學(xué)堂

空狀態(tài)不僅關(guān)系著視覺美學(xué)和品牌個(gè)性,在用戶體驗(yàn)上也至關(guān)重要。

最后,優(yōu)秀的設(shè)計(jì)師應(yīng)該努力嘗試不同的設(shè)計(jì)模式和實(shí)踐,而不是一味的參考借鑒他人成功的經(jīng)驗(yàn),應(yīng)該懷有一顆認(rèn)真的心去質(zhì)疑所有的權(quán)威,用實(shí)際行動(dòng)去驗(yàn)證它們。

轉(zhuǎn)載自微信 BAT

翻譯:昌勝 蘑菇街設(shè)計(jì)師

原文:Misused mobile UX patterns

地址:https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570?source=userActivityShare-74647ebfe8a-1474211032

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù) 

日歷

鏈接

個(gè)人資料

存檔