移動(dòng)應(yīng)用設(shè)計(jì)中應(yīng)避免的10種錯(cuò)誤
導(dǎo)讀:本文是來自移動(dòng)應(yīng)用開發(fā)公司Sourcebits系列文章Mobile App Trends Series(譯者:此網(wǎng)站要梯子)中的一篇,文章內(nèi)容適合初涉此領(lǐng)域的讀者,現(xiàn)翻譯如下。
在了解了跨平臺(tái)移動(dòng)應(yīng)用設(shè)計(jì)的利弊和移動(dòng)應(yīng)用開發(fā)常見錯(cuò)誤(譯者:此兩篇翻譯中)之后,你想到了一個(gè)不錯(cuò)的應(yīng)用創(chuàng)意,你甚至連應(yīng)用的名字都想好了,接下來該干什么?
現(xiàn)在,我們要談?wù)勗O(shè)計(jì)了。你需要考慮移動(dòng)應(yīng)用的功能結(jié)構(gòu)、用戶流程等問題,而這些并不是那么容易??紤]到進(jìn)入開發(fā)階段我們會(huì)涉及到諸如需求變動(dòng)、項(xiàng)目管理等棘手的問題,所以在設(shè)計(jì)階段,我們需要給自己制定一些原則,并且要切合實(shí)際的開展工作。這樣我們才能開發(fā)出一款好用又有趣的應(yīng)用。忽略這些潛在的問題而盲目瞎干,你很有可能在此后的開發(fā)階段陷入災(zāi)難。
本文試圖幫助移動(dòng)應(yīng)用設(shè)計(jì)者在工作中避免一些難纏的麻煩,希望你的應(yīng)用以及你的設(shè)計(jì)思路均能因此受益。
錯(cuò)誤1. 在弄清用戶流程之前匆忙開始界面(草圖)設(shè)計(jì)
在開始界面設(shè)計(jì)前,我們要先把完整的用戶流程詳細(xì)的走通順走清楚。哪怕是再簡單的應(yīng)用,為了確保用戶流程邏輯正確、界面布局合理,我們需要反復(fù)推敲用戶流程并繪制類似上面的流程圖。另外值得注意的是,最好把關(guān)鍵功能繪制在流程圖靠近頂部的地方,而不是被層層分支淹沒在底部。
跳過此環(huán)節(jié)而草率的開始界面設(shè)計(jì),最終開發(fā)出的應(yīng)用很可能在使用流程上不夠清晰合理,用戶上手后不得其解,興趣索然。
錯(cuò)誤2. 低估開發(fā)成本
設(shè)計(jì)師在Photoshop中畫出的任何東西,最終都需要通過開發(fā)人員的代碼在屏幕上表現(xiàn)。原本只需幾小時(shí)開發(fā)的功能,由于設(shè)計(jì)師的一個(gè)看似細(xì)微的改動(dòng),可能會(huì)多耗費(fèi)幾天的開發(fā)時(shí)間。所以,在設(shè)計(jì)過程中要避免畫蛇添足。
換句話說,如果設(shè)計(jì)師主導(dǎo)了移動(dòng)應(yīng)用功能的取舍,那后果會(huì)很嚴(yán)重。舉個(gè)搜索框的例子,原本相對(duì)簡單的一個(gè)功能,設(shè)計(jì)師靈光乍現(xiàn)——在用戶輸入關(guān)鍵詞的同時(shí)不斷給出實(shí)時(shí)的搜索結(jié)果。這個(gè)看似細(xì)節(jié)的改動(dòng),很可能讓開發(fā)人員當(dāng)場(chǎng)吐血。像這種的功能改動(dòng)最好經(jīng)過多方討論后做出決策,而不是任由設(shè)計(jì)師自說自話。
錯(cuò)誤3. 在低分辨率下設(shè)計(jì),使用位圖文件
始終堅(jiān)持為Retina屏幕的高分辨率繪制設(shè)計(jì)圖,然后以此輸出低分辨率版本圖片。這對(duì)于老手來說是常識(shí),我們?cè)谶@里再啰嗦幾句。大家都知道,移動(dòng)設(shè)備的常見屏幕尺寸是越來越五花八門(以iOS平臺(tái) 為例,迄今需要考慮的就有4種分辨率)。所以,繪制高分辨率版本的圖片,甚至是使用矢量圖而不是位圖,這些有助于設(shè)計(jì)師效率最大化,以及更好的應(yīng)對(duì)未來的新硬件。
錯(cuò)誤4. 觸摸區(qū)域太小
普通人的食指觸摸面積在1.6至2厘米見方,而且在使用移動(dòng)應(yīng)用的大多數(shù)時(shí)間里,他們的手指飛快的掠過屏幕。設(shè)計(jì)移動(dòng)應(yīng)用界面需要時(shí)刻提醒自己這一點(diǎn),用戶的觸摸并不能像鼠標(biāo)點(diǎn)擊一樣精確??纯茨愕脑O(shè)計(jì)是不是在一屏里包含了太多的按鈕等功能觸發(fā)點(diǎn),按鈕是不是足夠大,間距是不是足夠?qū)?,?huì)不會(huì)發(fā)生用戶點(diǎn)選不到或者誤按其它按鈕的問題?
錯(cuò)誤5. 濫用開場(chǎng)動(dòng)畫
在啟動(dòng)時(shí)播放一段精致的動(dòng)畫似乎是個(gè)不錯(cuò)的想法,但切忌不要為了動(dòng)畫而動(dòng)畫。Path和Thrillist’s JackThreads使用很酷的開場(chǎng)動(dòng)畫是因?yàn)檫@些應(yīng)用啟動(dòng)需要一些時(shí)間,在程序完成加載之前用戶什么也不能做(譯者:Path啟動(dòng)貌似沒有啥動(dòng)畫,難道是針對(duì)老版本說的?)。這種情況下,為用戶準(zhǔn)備一段簡短愉悅的動(dòng)畫以消除等待的焦慮就顯得很合時(shí)宜了。
由于應(yīng)用啟動(dòng)時(shí)必須首先顯示一張靜待圖片(譯者:如iOS應(yīng)用的Default.png),然后才能切換到動(dòng)畫,所以務(wù)必確保這個(gè)切換看起來天衣無縫。一些不好的例子在處理這個(gè)環(huán)節(jié)的時(shí)候產(chǎn)生了不協(xié)調(diào)的跳轉(zhuǎn)或者閃屏,這都是需要避免的。(譯者:優(yōu)酷iPad應(yīng)用的早期版本存在這種切換,處理中有一閃而過的黑屏,現(xiàn)在的版本把動(dòng)畫直接去掉了)
錯(cuò)誤6. 讓用戶不知所措的原地等待
在程序加載、處理數(shù)據(jù)、或者等待網(wǎng)絡(luò)反饋時(shí)不給用戶及時(shí)的反饋,會(huì)讓用戶誤認(rèn)為應(yīng)用掛了,這也是一種不好的用戶體驗(yàn)。
舉例來說:通過網(wǎng)絡(luò)加載數(shù)據(jù)的同時(shí),不要讓用戶傻傻的盯著一個(gè)空白的屏幕等待,顯示一個(gè)轉(zhuǎn)菊花或者動(dòng)畫特效什么的,讓用戶明白應(yīng)用運(yùn)行正常,只不過是在等待網(wǎng)絡(luò)數(shù)據(jù)。如果能顯示數(shù)據(jù)讀取的進(jìn)度條那就更好了,不過事先和開發(fā)人員商量一下開發(fā)難度(參考本文第二點(diǎn))。
錯(cuò)誤7. 盲目借鑒其它移動(dòng)平臺(tái)風(fēng)格
糟糕的抄襲只會(huì)讓用戶感到疑惑和憤怒。每一個(gè)移動(dòng)平臺(tái)都有自己的風(fēng)格,平臺(tái)廠商也已經(jīng)依據(jù)其平臺(tái)自身的審美訴求撰寫類似蘋果的Human Interface Guidelines之類的指導(dǎo)性文檔(譯者:Android現(xiàn)在也有類似的文檔)。在iPhone上開發(fā)類似Windows Phone 7的Metro風(fēng)格應(yīng)用就很可能讓習(xí)慣了iOS的用戶感到無從下手。
我想說的是,你的應(yīng)用并不一定要和官方應(yīng)用一模一樣,但也不能看起來另類到像不屬于這個(gè)平臺(tái)一樣。
錯(cuò)誤8. 過分擁擠的界面
在高PPI下設(shè)計(jì)移動(dòng)應(yīng)用界面,你可能不知不覺中就在一個(gè)屏幕里放了太多的東西。在27″的iMac屏幕上看設(shè)計(jì)圖,你的設(shè)計(jì)是那么的賞心悅目。請(qǐng)?jiān)谝苿?dòng)設(shè)備上再多看一眼(哪怕僅僅是把設(shè)計(jì)圖導(dǎo)入手機(jī)相冊(cè)看),可能就不是那么回事了。在一個(gè)屏幕內(nèi)塞太多的元素,會(huì)讓用戶操作起來費(fèi)力,甚至淹沒了最重要的信息。
錯(cuò)誤9. 認(rèn)為所有用戶都和你一樣的使用應(yīng)用
無論你的應(yīng)用界面看起來有多贊,都要做可用性測(cè)試。你可以在熟人圈內(nèi)開展小規(guī)模的beta測(cè)試,記住讓一些資深的設(shè)計(jì)師也參加。根據(jù)他們的反饋,在最終發(fā)布前調(diào)整界面。你也可以在Craigslist上發(fā)布廣告,邀請(qǐng)一些學(xué)生來試用新產(chǎn)品,記得提供比薩或者一點(diǎn)報(bào)酬什么的。
錯(cuò)誤10. 忘記使用或者濫用手勢(shì)操作
記住并不是所有界面元素都必須直觀的被用戶看到,有時(shí)我們可以隱藏一些驚喜。
拿iPhone上面的官方郵件應(yīng)用?(譯者:又是老生常談的例子),用戶可以在收件箱中通過橫掃郵件標(biāo)題激活刪除功能,這就免去了用戶點(diǎn)擊“編輯”、選擇郵件、選擇刪除的麻煩。這里我們發(fā)現(xiàn)有個(gè)平衡點(diǎn):老用戶可能發(fā)覺出用手勢(shì)完成快速刪除,同時(shí)保留“編輯”按鈕以便不熟悉的用戶完成刪除、標(biāo)記等其它操作。所以,善用手勢(shì)但不能過分倚重手勢(shì),一般來說要最好不要用手勢(shì)操作替代菜單等需要點(diǎn)選操作的界面元素。
總結(jié)
如果要用一句話概括文本提到的點(diǎn)點(diǎn)滴滴,那就是:好的設(shè)計(jì)是經(jīng)過深思熟慮的。帶著審慎的態(tài)度全面的考察你的設(shè)計(jì),真正的從用戶的角度出發(fā)想問題。不要試圖走走捷徑,也不要跳過測(cè)試,不要設(shè)計(jì)出連你自己都拿不出手的東西。
英文原文:mashable 編譯:伯樂在線 – 陳遠(yuǎn)
- 目前還沒評(píng)論,等你發(fā)揮!