移動(dòng)應用設計十大經(jīng)典常見(jiàn)過(guò)失點(diǎn)評

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

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

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

錯誤1. 在弄清用戶(hù)流程之前匆忙開(kāi)始界面(草圖)設計

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

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

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

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

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

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

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

錯誤4. 觸摸區域太小

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

錯誤5. 濫用開(kāi)場(chǎng)動(dòng)畫(huà)

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

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

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

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

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

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

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

我想說(shuō)的是，你的應用并不一定要和官方應用一模一樣，但也不能看起來(lái)另類(lèi)到像不屬于這個(gè)平臺一樣。

錯誤8. 過(guò)分擁擠的界面

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

錯誤9. 認為所有用戶(hù)都和你一樣的使用應用

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

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

記住并不是所有界面元素都必須直觀(guān)的被用戶(hù)看到，有時(shí)我們可以隱藏一些驚喜。

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