被濫用的移動設(shè)計模式

如果你是一個經(jīng)驗豐富的設(shè)計師,你可能贊同這樣一個觀點:受其他作品/設(shè)計指南啟發(fā)而進行設(shè)計或者模仿其他設(shè)計并不見得就是一種抄襲行為类早,相反,它是一種最佳的學(xué)習(xí)過程,是對設(shè)計模式的學(xué)習(xí)搏色,對設(shè)計準(zhǔn)則的學(xué)習(xí),是一種設(shè)計出用戶都能理解的用戶界面的方法券册。

有些人可能會說如果太依賴于設(shè)計指南或遵循他人的設(shè)計模式/思想频轿,就會抹殺設(shè)計師自己創(chuàng)造性,終有一天烁焙,所有的程序可能都會看起來一樣略吨。不過從用戶體驗的角度來看,我意識到了另外一個比較嚴重的問題:遵從所謂最佳設(shè)計案例的設(shè)計模式/思想考阱,可能會使你相信像Google/ Facebook / Instagram 這樣的設(shè)計(極有可能是你最喜歡的應(yīng)用程序)永遠是對的翠忠,你會視他們的目標(biāo)也就是你的目標(biāo),并對此不會提出任何質(zhì)疑乞榨。這里有一些模式被認為是(或曾經(jīng)是)最佳的設(shè)計代表秽之,然而它們實際上可能沒有你第一眼看到認為的那么好当娱。

1、隱藏導(dǎo)航

至少已經(jīng)有50萬篇寫過關(guān)于漢堡包菜單的文章考榨,其中大部分出自對此設(shè)計方案持反對意見的設(shè)計師之手跨细。如果你不曾看到,不妨看看這兩篇:http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/河质,http://jamesarcher.me/the-hamburger-menu/)冀惭,這并不是關(guān)于圖標(biāo)本身的問題,關(guān)鍵在于圖標(biāo)背后隱藏導(dǎo)航的這種做法究竟該如何評價掀鹅。

一個滑動側(cè)邊欄靈活易用

上面這種方案對設(shè)計師非常有吸引力且設(shè)計方便:因為你不必擔(dān)心有限的屏幕空間被過多占用散休,你只要把所有導(dǎo)航放在一個默認隱藏的側(cè)邊滑動欄里面即可。

然而實驗表明乐尊,如果以更明顯的方式來顯示菜單欄選項戚丸,用戶的使用度和滿意度都會得到提升,甚至能增加收入扔嵌。這就是為何YouTube已經(jīng)舍棄掉原本的漢堡菜單欄限府,轉(zhuǎn)而將最重要的導(dǎo)航選項提出來一直可見。

YouTube 導(dǎo)航方式的變化

如果你的導(dǎo)航結(jié)構(gòu)復(fù)雜痢缎,隱藏處理并不會使體驗友好胁勺。

2、到處都是圖標(biāo)

針對屏幕大小有限的問題独旷,乍看上去用圖標(biāo)取代所有文本標(biāo)簽是不必費什么腦子就能想到的方案署穗。象形符號占用更少的空間,不用被翻譯成有限的文本势告,而且人們也往往更熟悉蛇捌,不是嗎?似乎現(xiàn)在所有的應(yīng)用程序也都是這樣考慮和去做的咱台。

然而络拌,上述的方案不過是個假想,正是基于這個假想回溺,設(shè)計師們有時就會就會設(shè)計出難以辨別的圖標(biāo)來指向具體功能春贸。例如,在Instagram中遗遵,你能想到右上角的圖標(biāo)功能是指發(fā)送信息嗎萍恕?

或者,假設(shè)你從未使用過谷歌翻譯车要,你認為點擊右下角的圖標(biāo)是觸發(fā)什么功能呢允粤?

無論是假設(shè)你的用戶很熟悉抽象的象形圖,還是認為他們愿意花時間去理解他們,這種想法常常是不正確的类垫。

Bloom.fm 的神秘標(biāo)簽欄

如果你設(shè)計過圖標(biāo)且認為添加一個彈出標(biāo)簽?zāi)軌蛟鰪娝囊曈X可用性司光,那么你就錯了。即使你設(shè)計的是一個正方形悉患,用戶也還是需要去了解它残家。

Swarm 的圖標(biāo)提示

然而上述表述并不就是說你不應(yīng)該使用圖標(biāo)。實際上售躁,有一些圖標(biāo)是用戶已經(jīng)熟知的坞淮,而這些圖標(biāo)大多是代表著搜索、視頻播放陪捷、郵箱回窘、設(shè)置等功能。(不過用戶還是不能確定揩局,當(dāng)他們點擊一個心形圖標(biāo)時會發(fā)生什么毫玖。)

有些圖標(biāo)是被大部分用戶熟知的掀虎,是可以通用的

無論如何凌盯,針對復(fù)雜而抽象的功能,我們一般應(yīng)該使用適當(dāng)?shù)奈谋緲?biāo)簽來標(biāo)示出來烹玉。在這些情況下驰怎,圖標(biāo)是仍然有用的,它們能夠增強菜單選項的識別度和觸摸感二打。?

Pixelmatr 的導(dǎo)航

3县忌、基于導(dǎo)航結(jié)構(gòu)的手勢

當(dāng)蘋果在2007年發(fā)布iPhone時,多點觸控技術(shù)一下子吸引到了大家的注意(并很快成為主流)继效,人們意識到他們不再是只能在界面上點按症杏,還能實現(xiàn)縮放、嚙合和滑動等操作瑞信。

自此厉颤,手勢操作自然而然也開始受到設(shè)計師的歡迎,而且誕生了很多使用手勢操作實現(xiàn)功能控制的程序凡简。

Clear 里面的手勢操作

就像隱藏導(dǎo)航逼友、使用圖標(biāo)取代文本標(biāo)簽一樣,手勢看上去對于試圖節(jié)省屏幕空間的設(shè)計師也是一種有效的方法秤涩。

關(guān)于手勢你需要知道的第一件事是它們通常是隱藏的帜乞。人們需要記住它們,其結(jié)果就像漢堡包菜單一樣:如果你將一些選項/操作藏起來筐眷,那么只有更少的人才會去用到它黎烈。

另外,手勢面臨跟圖標(biāo)類似的問題:雖然有一些大部分人都能理解的常規(guī)手勢,包括點按照棋、縮放津畸、滾動等,但是在一些程序中的特定手勢仍然需要人們?nèi)グl(fā)現(xiàn)和學(xué)習(xí)之后再去使用必怜。

很可惜的是肉拓,現(xiàn)在大多數(shù)App中充斥的手勢操作并沒有實現(xiàn)標(biāo)準(zhǔn)統(tǒng)一化——這仍然是界面設(shè)計的一個新領(lǐng)域。即使如滑動一封郵件這樣的操作在不同的郵箱程序中也可能面臨不同的結(jié)果梳庆。

在蘋果的郵箱程序中暖途,郵件向右滑動標(biāo)示出“標(biāo)記為未讀”的選項


在Mailbox中,相同的手勢則代表將郵件歸檔


4膏执、遮罩式的引導(dǎo)說明

引導(dǎo)說明驻售,是最近一個關(guān)于用戶體驗的熱門話題,是指用戶初次接觸到應(yīng)用程序時程序向用戶展現(xiàn)的一個使用幫助更米。針對這個概念欺栗,大多程序的做法都是使用一個遮罩層向用戶解釋界面的必要元素和功能。

dcovery 的做法

然而為何這卻是一個糟糕的解決方案征峦?因為大部分用戶都會跳過你的說明介紹迟几。他們只想能快點開始使用你的程序。即使他們注意到了你的使用說明栏笆,當(dāng)退出遮罩層后也都通常會統(tǒng)統(tǒng)忘記类腮。(尤其當(dāng)屏幕上塞滿了信息)。最后一個關(guān)鍵點在于蛉加,這種依靠遮罩引導(dǎo)的設(shè)計方式表明你的程序功能本身設(shè)計的還不夠直觀(直觀的設(shè)計不需要向用戶解釋才對)蚜枢。請牢牢記住:

如果還需要解釋給用戶针饥,那就說明其本身設(shè)計不夠好

實際上厂抽,引導(dǎo)流程可以使用很多益于用戶的方式來進行設(shè)計。例如丁眼,Slack筷凤,使用面向用戶的第一屏向其顯示一些必要的內(nèi)容,簡單地介紹自己户盯,專注于告訴用戶自己的價值所在嵌施,而不是使用屏幕標(biāo)注展示太過具體的功能特性。

一個引導(dǎo)新用戶的更具對話式的方法是采用循序漸進的說明莽鸭。Duolingo是這樣做的:通過前面的引導(dǎo)吸引用戶進入程序吗伤,然后針對自己選擇的語言開始一個快速測試(用戶甚至不需要注冊登記),因為邊做邊學(xué)是最好的學(xué)習(xí)方式硫眨。另外足淆,這樣也是一個向用戶傳達產(chǎn)品價值的更精巧的方式。

還記得Mailbox郵箱中的滑動手勢功能不同于蘋果郵箱嗎?循序漸進式的引導(dǎo)說明是這樣的:用戶在開始使用程序前必須嘗試每個手勢的時候再向他們傳達使用方法巧号。

在一個半透明的遮罩層上設(shè)計引導(dǎo)說明之前族奢,停下來想想新用戶的初次體驗究竟會是如何的。專注于上下文丹鸿。在大多數(shù)的情況下越走,都會有一個更好的方式來歡迎您的用戶。

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

空狀態(tài)是大部分沒有經(jīng)驗的設(shè)計師經(jīng)常忽略的地方廊敌,然而對于一個完整的用戶體驗環(huán)節(jié)來說,它也是其中重要的一環(huán)门怪。

有時候設(shè)計師將錯誤信息提示頁面或空狀態(tài)處理頁面都視作一個可以發(fā)揮想法創(chuàng)意的地方骡澈。看一下谷歌照片的對空狀態(tài)的處理方法:

乍看上去掷空,它好像處理的還不錯肋殴。遵循設(shè)計規(guī)范,布局合理坦弟,還有一張漂亮的圖片护锤。

然而,當(dāng)你重新審視减拭,你會發(fā)現(xiàn)有一些明顯奇怪的地方:

(1)沒有任何數(shù)據(jù)的情況下那里為何有一個突出的搜索按鈕蔽豺?你怎么可能在這種情況下還用到搜索区丑?

(2)中間的圖片(突出的元素)明顯的是不可點的(盡管很多人會嘗試)

(3)文本提示說你應(yīng)該點擊右上角的那個按鈕創(chuàng)建內(nèi)容拧粪,那為何不在提示后邊直接放置創(chuàng)建按鈕呢?

上面的這種空狀態(tài)并未讓用戶理解以下內(nèi)容:

(1)什么是照片集沧侥?它們?yōu)楹斡杏茫?/p>

(2)為什么我沒有任何數(shù)據(jù)可霎?

(3)我能做什么或者我是否應(yīng)該做些什么?

當(dāng)談到創(chuàng)造性時宴杀,我們認為有時候少即是多癣朗。下面這種空狀態(tài)就處理的很好。(讓我們現(xiàn)在忽略“點擊下面的按鈕”這條指令旺罢,即文本提示下面的按鈕本身就有很明顯的引導(dǎo)作用旷余。)

Loots 的空狀態(tài)處理

別忘了空狀態(tài)(類似于網(wǎng)頁端的404頁面)不應(yīng)該僅僅關(guān)乎視覺效果和品牌調(diào)性,它在提升可用性方面更為重要扁达。所以請保證你的設(shè)計直觀易用正卧。

質(zhì)疑一切

請牢記不同的應(yīng)用程序和用戶之間是有差異性的,適用于一個程序的設(shè)計方案并不見的對另外的程序有效跪解。這絕對不是一個放之四海而皆準(zhǔn)的東西炉旷。而且,你也難以準(zhǔn)確的知道為何一個程序按那種套路設(shè)計。

所以窘行,請保持質(zhì)疑的態(tài)度饥追,然后自己思考,自己設(shè)計罐盔,自己研究但绕。

去權(quán)衡,試驗惶看,驗證——如果你的設(shè)計更能體現(xiàn)價值壁熄,不必擔(dān)心自己沒有遵循所謂的設(shè)計指南。

譯自:https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570?adbid=667750768665997312#.v789aqc8d

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末碳竟,一起剝皮案震驚了整個濱河市草丧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌莹桅,老刑警劉巖昌执,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異诈泼,居然都是意外死亡懂拾,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門铐达,熙熙樓的掌柜王于貴愁眉苦臉地迎上來岖赋,“玉大人,你說我怎么就攤上這事瓮孙√贫希” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵杭抠,是天一觀的道長脸甘。 經(jīng)常有香客問我,道長偏灿,這世上最難降的妖魔是什么丹诀? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮翁垂,結(jié)果婚禮上铆遭,老公的妹妹穿的比我還像新娘。我一直安慰自己沿猜,他們只是感情好枚荣,可當(dāng)我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著邢疙,像睡著了一般棍弄。 火紅的嫁衣襯著肌膚如雪望薄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天呼畸,我揣著相機與錄音痕支,去河邊找鬼。 笑死蛮原,一個胖子當(dāng)著我的面吹牛卧须,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播儒陨,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼花嘶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蹦漠?” 一聲冷哼從身側(cè)響起椭员,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎笛园,沒想到半個月后隘击,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡研铆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年埋同,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片棵红。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡凶赁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出逆甜,到底是詐尸還是另有隱情虱肄,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布忆绰,位于F島的核電站浩峡,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏错敢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一缕粹、第九天 我趴在偏房一處隱蔽的房頂上張望稚茅。 院中可真熱鬧,春花似錦平斩、人聲如沸亚享。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽欺税。三九已至侈沪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間晚凿,已是汗流浹背亭罪。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留歼秽,地道東北人应役。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像燥筷,于是被迫代替她去往敵國和親箩祥。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容