2016-10-24 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
如果你是一名移動(dòng)產(chǎn)品設(shè)計(jì)師，你可能會(huì)同意這樣的觀點(diǎn)：參考借鑒別人的設(shè)計(jì)不算抄襲。這不僅是最佳的練習(xí)方法，也是一種設(shè)計(jì)模式，而且還符合業(yè)界主流的設(shè)計(jì)趨勢(shì)，同時(shí)還能確保在用戶(hù)熟悉的模式下來(lái)創(chuàng)建可用性的界面。
有人可能會(huì)說(shuō)，堅(jiān)持設(shè)計(jì)規(guī)范和跟隨其他人的步伐會(huì)扼殺創(chuàng)造力，而且時(shí)至今日，所有的APP看起來(lái)都是大同小異。從用戶(hù)體驗(yàn)的角度來(lái)看，我看到了一個(gè)不一樣的問(wèn)題。你相信Google、Facebook、Instagram永遠(yuǎn)是正確的，所以習(xí)慣于采用他們的做法，因?yàn)樗麄兊脑O(shè)計(jì)目標(biāo)與你的設(shè)計(jì)目標(biāo)相同，所以你不會(huì)對(duì)此產(chǎn)生質(zhì)疑。
我還總結(jié)了一些設(shè)計(jì)模式，在過(guò)去可能被認(rèn)為是最佳的實(shí)踐方法，但結(jié)果可能不如你想象的那么美好。
1、隱藏導(dǎo)航
在業(yè)內(nèi)各大熱門(mén)設(shè)計(jì)社區(qū)，至少有50萬(wàn)篇的相關(guān)文章分析漢堡包菜單（是指把菜單折疊隱藏在抽屜，因菜單圖標(biāo)像漢堡包得名），但現(xiàn)在反對(duì)這種設(shè)計(jì)模式的人也越來(lái)越多了，我想這并不是因?yàn)榇蠹叶紝徝榔诹?。?jiǎn)單來(lái)說(shuō)，我們要討論的不是關(guān)于圖標(biāo)本身，而是隱藏在圖標(biāo)后面的導(dǎo)航。
幻燈片菜單靈活，方便使用
漢堡包導(dǎo)航非常易于設(shè)計(jì)，你不必?fù)?dān)心屏幕空間放不下那么多內(nèi)容，只需將整個(gè)導(dǎo)航藏到左側(cè)，導(dǎo)航內(nèi)容超出一屏的時(shí)候滾動(dòng)疊加。
然而，實(shí)驗(yàn)表明，以更可見(jiàn)的方式露出菜單選項(xiàng)，可以提高用戶(hù)的參與度和滿(mǎn)意度，甚至能提升整體的轉(zhuǎn)化率。 這就是為什么現(xiàn)在大家都從漢堡菜單轉(zhuǎn)向易于發(fā)現(xiàn)的標(biāo)簽菜單。
YouTube將菜單露出
2、無(wú)處不在的圖標(biāo)
由于屏幕空間有限，在大部分情況下，盡量使用圖標(biāo)代替文本標(biāo)簽，這樣會(huì)節(jié)省一些空間。 圖標(biāo)有豐富的隱喻性，大部分圖標(biāo)所代表的含義都能被用戶(hù)識(shí)別，不需要更多的理解，而且用戶(hù)大多也接受了這樣的方式。
但圖標(biāo)又有它本身的限制所在，假設(shè)你從未使用過(guò)Google翻譯，你能知道這個(gè)圖標(biāo)它所代表的功能是什么嗎？
谷歌翻譯
只有當(dāng)用戶(hù)點(diǎn)擊圖標(biāo)并彈出這個(gè)手寫(xiě)輸入界面之后，才知道原來(lái)這個(gè)圖標(biāo)的含義是手寫(xiě)功能。當(dāng)用戶(hù)不能明確功能入口指向的時(shí)候，用戶(hù)通常不會(huì)主動(dòng)去使用這個(gè)功能，阻礙了功能的曝光。
這是一個(gè)非常常見(jiàn)的誤區(qū)，因?yàn)槲覀儠?huì)自然的認(rèn)為，用戶(hù)熟悉抽象圖形，或者他們?cè)敢饣ǜ嗟臅r(shí)間探索和學(xué)習(xí)怎么使用你的應(yīng)用，包括下面這個(gè)神秘的標(biāo)簽欄，如果沒(méi)有文字，單看圖標(biāo)你能理解這個(gè)圓圈和六邊形代表什么嗎？
如果你設(shè)計(jì)了一個(gè)識(shí)別性不強(qiáng)的圖標(biāo)，希望通過(guò)彈框的方式來(lái)提示用戶(hù)，讓其變得可理解，這其實(shí)并不是一個(gè)很好的解決方案，因?yàn)閺椏蛱崾镜姆绞讲⒉贿m合在移動(dòng)端使用。
Foursquare應(yīng)用
雖然有種種限制，這并不意味著你不應(yīng)該使用圖標(biāo)，同樣也有大量的圖標(biāo)用戶(hù)非常熟悉，但那些大多是表示常見(jiàn)功能，例如搜索、視頻播放、電子郵件、設(shè)置等等。不過(guò)有些圖標(biāo)用戶(hù)可能仍然不確定是什么意思，比如當(dāng)他們點(diǎn)擊一個(gè)愛(ài)心圖標(biāo)的時(shí)候會(huì)發(fā)生什么？
大部分圖標(biāo)能被用戶(hù)識(shí)別，而且表意明確，但是有些相對(duì)復(fù)雜和抽象的圖標(biāo)，應(yīng)該在其下方添加文字說(shuō)明。 這樣能讓圖標(biāo)在菜單中更容易被發(fā)現(xiàn)，而且能提高點(diǎn)擊率，同時(shí)也讓界面更富美感和個(gè)性。
像下方的繪畫(huà)應(yīng)用，如果沒(méi)有圖標(biāo)的裝飾，界面就會(huì)變得十分呆板，且不方便用戶(hù)快速識(shí)別功能，可用性會(huì)大打折扣；如果沒(méi)有文字說(shuō)明，用戶(hù)又無(wú)法快速理解圖標(biāo)所以代表正確含義。
總而言之，基本功能可以用通識(shí)性較強(qiáng)的圖標(biāo)來(lái)表示，但對(duì)于復(fù)雜功能且無(wú)法直觀理解的，應(yīng)該配合對(duì)應(yīng)的文字說(shuō)明。 如果你需要使用到某些不常見(jiàn)的圖標(biāo)，可以先進(jìn)行可用性測(cè)試，多問(wèn)一些同事和朋友，確保其辨識(shí)性。
3、基于手勢(shì)的導(dǎo)航
當(dāng)蘋(píng)果在2007年推出iPhone時(shí)，多點(diǎn)觸摸技術(shù)第一次進(jìn)入到大眾視野，所有人為這個(gè)新奇的功能感到震撼，這是以往設(shè)備所從來(lái)沒(méi)有的。我們可以用手指在屏幕上直接操作，點(diǎn)按、捏合、縮放、下拉、滑動(dòng)、旋轉(zhuǎn)，等等。
在設(shè)計(jì)師眼里，手勢(shì)是一個(gè)很受歡迎設(shè)計(jì)模式，有許多APP就是是圍繞手勢(shì)控件來(lái)進(jìn)行設(shè)計(jì)的。
clear的手勢(shì)導(dǎo)航
像隱藏導(dǎo)航與沒(méi)有文字說(shuō)明的圖標(biāo)一樣，使用手勢(shì)操作的設(shè)計(jì)可以讓界面變的更簡(jiǎn)潔。但是和前兩者的隱藏內(nèi)容不同，手勢(shì)導(dǎo)航是永遠(yuǎn)隱藏的，如果用戶(hù)忘記了這個(gè)手勢(shì)，他就會(huì)在導(dǎo)航上花費(fèi)很多時(shí)間，十分致命。
“應(yīng)不應(yīng)該有一個(gè)刪除按鈕，用戶(hù)可以向左或向右滑動(dòng)，這個(gè)由產(chǎn)品設(shè)計(jì)師決定的?！?
此外，手勢(shì)與圖標(biāo)具有相同的問(wèn)題，像點(diǎn)按、縮放和滾動(dòng)這樣常見(jiàn)的手勢(shì)操作，用戶(hù)是熟悉并且理解的；但有一些操作，像側(cè)滑、雙擊和雙指縮放這樣的操作，如果需要用戶(hù)主動(dòng)去發(fā)現(xiàn)，那是有難度的。
而且不同的APP之間，其所運(yùn)用的手勢(shì)并不是統(tǒng)一和標(biāo)準(zhǔn)的，它仍然是一個(gè)新興的界面設(shè)計(jì)領(lǐng)域。 即使是像左滑這么簡(jiǎn)單的一個(gè)手勢(shì)，在不同的郵件客戶(hù)端里它們所代表的都是不同的功能。
Apple Mail向右滑動(dòng)郵件列表是未讀取選項(xiàng)
Mailbox中相同的手勢(shì)是郵件存檔
仔細(xì)分析了下，當(dāng)我們搖動(dòng)設(shè)備的時(shí)候，在iOS中它代表的是撤銷(xiāo)，但在谷歌地圖中，它則是發(fā)送反饋的意思。
手勢(shì)設(shè)計(jì)的難點(diǎn)在于，它是隱藏的控件，這需要在用戶(hù)端做大量的努力，向所有的用戶(hù)去教育手勢(shì)的應(yīng)用。 如果你是產(chǎn)品負(fù)責(zé)人，你會(huì)怎么教會(huì)用戶(hù)向右滑動(dòng)？
4、用戶(hù)幫助和提示
當(dāng)用戶(hù)第一次使用APP的時(shí)候，大部分時(shí)候我們是通過(guò)新手引導(dǎo)一步一步教育用戶(hù)使用新功能，告訴用戶(hù)這些功能的含義。但是我并不認(rèn)可這樣的方式，用戶(hù)進(jìn)入APP后首先是想激動(dòng)的使用新功能，而不是先花幾分鐘來(lái)學(xué)習(xí)。
搜索應(yīng)用程序中的教練標(biāo)記
“一個(gè)用戶(hù)界面就像是一個(gè)笑話(huà)，如果需要解釋笑點(diǎn)在哪里，那說(shuō)明還不夠好笑?！?
漸進(jìn)式引導(dǎo)是指以一種更加互動(dòng)的方式來(lái)吸引首次注冊(cè)的用戶(hù)， Duolingo不解釋APP的工作原理，鼓勵(lì)用戶(hù)跳過(guò)，并用所選擇的語(yǔ)言進(jìn)行快速測(cè)試，也不需要用戶(hù)注冊(cè)，因?yàn)樽層脩?hù)最快熟悉的方法就是實(shí)際的體驗(yàn)。 此外，這也是一個(gè)更快速展現(xiàn)APP價(jià)值的一個(gè)途徑。
還記得Mailbox中的滑動(dòng)手勢(shì)與Apple Mail的不同之處嗎？這是Mailbox的漸進(jìn)式引導(dǎo)，每一個(gè)手勢(shì)都會(huì)有對(duì)應(yīng)的說(shuō)明，用戶(hù)必須嘗試每個(gè)手勢(shì)，然后才真正開(kāi)始使用APP。
當(dāng)我們?cè)诎胪该骱谏砂嫔咸砑右龑?dǎo)之前，先停下來(lái)好好思考一下，什么才是用戶(hù)使用時(shí)真正需要的。 用戶(hù)需要專(zhuān)注于內(nèi)容， 你應(yīng)該花時(shí)間想出一個(gè)更好的方式來(lái)迎接第一次使用的用戶(hù)。
5、有創(chuàng)意但不直觀的空狀態(tài)
空狀態(tài)是一個(gè)容易被新手設(shè)計(jì)師忽略的東西，以為無(wú)足輕重。但是，當(dāng)它涉及到APP的整體體驗(yàn)時(shí)，空狀態(tài)可能是一個(gè)重要的構(gòu)成因素。
設(shè)計(jì)師往往在錯(cuò)誤消息和空狀態(tài)頁(yè)面發(fā)揮視覺(jué)創(chuàng)造力，通過(guò)情感化的設(shè)計(jì)舒緩用戶(hù)的情緒并指引他們。但，這不一定正確，過(guò)渡的設(shè)計(jì)可能適得其反。
我從谷歌相冊(cè)里面截取了一張空狀態(tài)的圖片，以這個(gè)為反例來(lái)分析一下。
第一眼看上去給人感覺(jué)還不錯(cuò)，對(duì)吧？ 井井有條的排版布局，再配上精致的插圖。當(dāng)我們仔細(xì)看這個(gè)頁(yè)面的時(shí)候，就會(huì)發(fā)現(xiàn)有一些奇怪的問(wèn)題：
– 這里沒(méi)有任何內(nèi)容，為什么右下角會(huì)有一個(gè)突出的搜索按鈕？ 用戶(hù)要在一個(gè)空白頁(yè)面搜索什么？
– 插畫(huà)圖形應(yīng)該是不可點(diǎn)擊的，既然不可點(diǎn)，為什么要做的這么突出？
– 提示說(shuō)點(diǎn)擊頂部的加號(hào)按鈕制作專(zhuān)輯也是超尷尬，為什么提示本身不包含添加按鈕？需要用戶(hù)去到另一個(gè)地方點(diǎn)擊，這就像是“點(diǎn)擊繼續(xù)按鈕繼續(xù)”一樣。
這個(gè)空狀態(tài)內(nèi)容根本幫不了用戶(hù)理解上下文：
– 什么是收藏？ 收藏它們有什么用？
– 為什么我沒(méi)有？
– 在這個(gè)頁(yè)面，我能做什么？
當(dāng)我們談到創(chuàng)造力的時(shí)候，有時(shí)候會(huì)覺(jué)得少即是多， 下面Loots的空狀態(tài)是一個(gè)很好的例子。
空狀態(tài)不僅關(guān)系著視覺(jué)美學(xué)和品牌個(gè)性，在用戶(hù)體驗(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ì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com
