移動應(yīng)用設(shè)計十大經(jīng)典常見過失點評

在了解了跨平臺移動應(yīng)用設(shè)計的利弊和移動應(yīng)用開發(fā)常見錯誤之后，你想到了一個不錯的應(yīng)用創(chuàng)意，你甚至連應(yīng)用的名字都想好了，接下來該干什么?

現(xiàn)在，我們要談?wù)?a class="contentlabel" href="http://m.butianyuan.cn/news/listbylabel/label/設(shè)計">設(shè)計了。你需要考慮移動應(yīng)用的功能結(jié)構(gòu)、用戶流程等問題，而這些并不是那么容易?？紤]到進(jìn)入開發(fā)階段我們會涉及到諸如需求變動、項目管理等棘手的問題，所以在設(shè)計階段，我們需要給自己制定一些原則，并且要切合實際的開展工作。這樣我們才能開發(fā)出一款好用又有趣的應(yīng)用。忽略這些潛在的問題而盲目瞎干，你很有可能在此后的開發(fā)階段陷入災(zāi)難。

本文試圖幫助移動應(yīng)用設(shè)計者在工作中避免一些難纏的麻煩，希望你的應(yīng)用以及你的設(shè)計思路均能因此受益。

錯誤1. 在弄清用戶流程之前匆忙開始界面(草圖)設(shè)計

在開始界面設(shè)計前，我們要先把完整的用戶流程詳細(xì)的走通順走清楚。哪怕是再簡單的應(yīng)用，為了確保用戶流程邏輯正確、界面布局合理，我們需要反復(fù)推敲用戶流程并繪制類似上面的流程圖。另外值得注意的是，最好把關(guān)鍵功能繪制在流程圖靠近頂部的地方，而不是被層層分支淹沒在底部。

跳過此環(huán)節(jié)而草率的開始界面設(shè)計，最終開發(fā)出的應(yīng)用很可能在使用流程上不夠清晰合理，用戶上手后不得其解，興趣索然。

錯誤2. 低估開發(fā)成本

設(shè)計師在Photoshop中畫出的任何東西，最終都需要通過開發(fā)人員的代碼在屏幕上表現(xiàn)。原本只需幾小時開發(fā)的功能，由于設(shè)計師的一個看似細(xì)微的改動，可能會多耗費幾天的開發(fā)時間。所以，在設(shè)計過程中要避免畫蛇添足。

換句話說，如果設(shè)計師主導(dǎo)了移動應(yīng)用功能的取舍，那后果會很嚴(yán)重。舉個搜索框的例子，原本相對簡單的一個功能，設(shè)計師靈光乍現(xiàn)——在用戶輸入關(guān)鍵詞的同時不斷給出實時的搜索結(jié)果。這個看似細(xì)節(jié)的改動，很可能讓開發(fā)人員當(dāng)場吐血。像這種的功能改動最好經(jīng)過多方討論后做出決策，而不是任由設(shè)計師自說自話。

錯誤3. 在低分辨率下設(shè)計，使用位圖文件

始終堅持為Retina屏幕的高分辨率繪制設(shè)計圖，然后以此輸出低分辨率版本圖片。這對于老手來說是常識，我們在這里再嗦幾句。大家都知道，移動設(shè)備的常見屏幕尺寸是越來越五花八門(以iOS平臺 為例，迄今需要考慮的就有4種分辨率)。所以，繪制高分辨率版本的圖片，甚至是使用矢量圖而不是位圖，這些有助于設(shè)計師效率最大化，以及更好的應(yīng)對未來的新硬件。

錯誤4. 觸摸區(qū)域太小

普通人的食指觸摸面積在1.6至2厘米見方，而且在使用移動應(yīng)用的大多數(shù)時間里，他們的手指飛快的掠過屏幕。設(shè)計移動應(yīng)用界面需要時刻提醒自己這一點，用戶的觸摸并不能像鼠標(biāo)點擊一樣精確?？纯茨愕脑O(shè)計是不是在一屏里包含了太多的按鈕等功能觸發(fā)點，按鈕是不是足夠大，間距是不是足夠?qū)?，會不會發(fā)生用戶點選不到或者誤按其它按鈕的問題?

錯誤5. 濫用開場動畫

在啟動時播放一段精致的動畫似乎是個不錯的想法，但切忌不要為了動畫而動畫。Path和Thrillist’s JackThreads使用很酷的開場動畫是因為這些應(yīng)用啟動需要一些時間，在程序完成加載之前用戶什么也不能做(譯者：Path啟動貌似沒有啥動畫，難道是針對老版本說的?)。這種情況下，為用戶準(zhǔn)備一段簡短愉悅的動畫以消除等待的焦慮就顯得很合時宜了。

由于應(yīng)用啟動時必須首先顯示一張靜待圖片(譯者：如iOS應(yīng)用的Default.png)，然后才能切換到動畫，所以務(wù)必確保這個切換看起來天衣無縫。一些不好的例子在處理這個環(huán)節(jié)的時候產(chǎn)生了不協(xié)調(diào)的跳轉(zhuǎn)或者閃屏，這都是需要避免的。(譯者：優(yōu)酷iPad應(yīng)用的早期版本存在這種切換，處理中有一閃而過的黑屏，現(xiàn)在的版本把動畫直接去掉了)

錯誤6. 讓用戶不知所措的原地等待

在程序加載、處理數(shù)據(jù)、或者等待網(wǎng)絡(luò)反饋時不給用戶及時的反饋，會讓用戶誤認(rèn)為應(yīng)用掛了，這也是一種不好的用戶體驗。

舉例來說：通過網(wǎng)絡(luò)加載數(shù)據(jù)的同時，不要讓用戶傻傻的盯著一個空白的屏幕等待，顯示一個轉(zhuǎn)菊花或者動畫特效什么的，讓用戶明白應(yīng)用運行正常，只不過是在等待網(wǎng)絡(luò)數(shù)據(jù)。如果能顯示數(shù)據(jù)讀取的進(jìn)度條那就更好了，不過事先和開發(fā)人員商量一下開發(fā)難度(參考本文第二點)。

錯誤7. 盲目借鑒其它移動平臺風(fēng)格

糟糕的抄襲只會讓用戶感到疑惑和憤怒。每一個移動平臺都有自己的風(fēng)格，平臺廠商也已經(jīng)依據(jù)其平臺自身的審美訴求撰寫類似蘋果的Human Interface Guidelines之類的指導(dǎo)性文檔(譯者：Android現(xiàn)在也有類似的文檔)。在iPhone上開發(fā)類似Windows Phone 7的Metro風(fēng)格應(yīng)用就很可能讓習(xí)慣了iOS的用戶感到無從下手。

我想說的是，你的應(yīng)用并不一定要和官方應(yīng)用一模一樣，但也不能看起來另類到像不屬于這個平臺一樣。

錯誤8. 過分擁擠的界面

在高PPI下設(shè)計移動應(yīng)用界面，你可能不知不覺中就在一個屏幕里放了太多的東西。在27″的iMac屏幕上看設(shè)計圖，你的設(shè)計是那么的賞心悅目。請在移動設(shè)備上再多看一眼(哪怕僅僅是把設(shè)計圖導(dǎo)入手機(jī)相冊看)，可能就不是那么回事了。在一個屏幕內(nèi)塞太多的元素，會讓用戶操作起來費力，甚至淹沒了最重要的信息。

錯誤9. 認(rèn)為所有用戶都和你一樣的使用應(yīng)用

無論你的應(yīng)用界面看起來有多贊，都要做可用性測試。你可以在熟人圈內(nèi)開展小規(guī)模的beta測試，記住讓一些資深的設(shè)計師也參加。根據(jù)他們的反饋，在最終發(fā)布前調(diào)整界面。你也可以在Craigslist上發(fā)布廣告，邀請一些學(xué)生來試用新產(chǎn)品，記得提供比薩或者一點報酬什么的。

錯誤10. 忘記使用或者濫用手勢操作

記住并不是所有界面元素都必須直觀的被用戶看到，有時我們可以隱藏一些驚喜。

拿iPhone上面的官方郵件應(yīng)用 (譯者：又是老生常談的例子)，用戶可以在收件箱中通過橫掃郵件標(biāo)題激活刪除功能，這就免去了用戶點擊“編輯”、選擇郵件、選擇刪除的麻煩。這里我們發(fā)現(xiàn)有個平衡點：老用戶可能發(fā)覺出用手勢完成快速刪除，同時保留“編輯”按鈕以便不熟悉的用戶完成刪除、標(biāo)記等其它操作。所以，善用手勢但不能過分倚重手勢，一般來說要最好不要用手勢操作替代菜單等需要點選操作的界面元素。