今天，我們要談?wù)勗O(shè)計(jì)了。你需要考慮移動(dòng)應(yīng)用的功能結(jié)構(gòu)、用戶流程等問(wèn)題，而這些并不是那么容易?？紤]到進(jìn)入開(kāi)發(fā)階段我們會(huì)涉及到諸如需求變動(dòng)、項(xiàng)目管理等棘手的問(wèn)題，所以在設(shè)計(jì)階段，我們需要給自己制定一些原則，并且要切合實(shí)際的開(kāi)展工作。這樣我們才能開(kāi)發(fā)出一款好用又有趣的應(yīng)用。忽略這些潛在的問(wèn)題而盲目瞎干，你很有可能在此后的開(kāi)發(fā)階段陷入災(zāi)難在開(kāi)始界面設(shè)計(jì)前，我們要先把完整的用戶流程詳細(xì)的走通順走清楚

第一點(diǎn)：建議做頁(yè)面設(shè)計(jì)時(shí)，一個(gè)頁(yè)面只做一件事

       用戶在完成一個(gè)任務(wù)的時(shí)候，假如需要順序完成三件事情，那么這三部需要順序分解為三個(gè)頁(yè)面。一步步引導(dǎo)用戶去完成整個(gè)任務(wù)。并且需要告訴用戶，完成整個(gè)任務(wù)需要幾步或者需要多長(zhǎng)時(shí)間，給用戶一個(gè)心理預(yù)期。假如需要完成的三件事沒(méi)有必要的順序，并且這三件事在實(shí)現(xiàn)模型中給用戶更多自由，用戶很少犯錯(cuò)（違背實(shí)現(xiàn)模型進(jìn)行交互），那么就需要在一個(gè)頁(yè)面內(nèi)完成。比如，用戶在寫(xiě)一偏日記包括“標(biāo)題”、“內(nèi)容”、“日期”三個(gè)功能，并且三個(gè)功能在一起組成了一片日記。那么這三個(gè)功能就沒(méi)有必要分解為三個(gè)步驟，完全可以在一個(gè)頁(yè)面實(shí)現(xiàn)。然后再通過(guò)好的交互方式使三個(gè)功能完美的結(jié)合在一起。在這里，筆者能想到的一種交互方式像這樣：1.三個(gè)功能有秩序的存在一個(gè)頁(yè)面中；2.當(dāng)用戶選擇其中一個(gè)功能，那么程序就講用戶注意力聚焦在此功能，然后提供用戶 返回到1的路徑。其實(shí)這個(gè)思路還是遵循了原則。

第二點(diǎn)：要避免為極端的用戶設(shè)計(jì)

       極端用戶指的是那些違反常態(tài)行為和思考的部分用戶。為極端用戶設(shè)計(jì)并沒(méi)有錯(cuò)，但是如果會(huì)影響大部分用戶的使用體驗(yàn)，那么勸你還是拋棄20%的極端用戶。更何況，你的良苦用心并不一定會(huì)帶來(lái)極端用戶的好評(píng)，既然極端，她們足以極端的讓你無(wú)法想象。我曾經(jīng)接觸過(guò)巨白的一些用戶，即這里的極端用戶。有不會(huì)用QQ的輟學(xué)少女，有第一次接觸win7不大明白的公司文員，有不會(huì)用ps的工程師，有不會(huì)玩憤怒小鳥(niǎo)的小朋友...我聽(tīng)到的最多的一句話就是“我不會(huì)用！能否教我一下?！钡菑臎](méi)聽(tīng)他們抱怨過(guò)產(chǎn)品，他們只是盡最大努力來(lái)學(xué)習(xí)使用這個(gè)產(chǎn)品。豌豆莢團(tuán)隊(duì)曾經(jīng)做過(guò)一次分享，就提到一點(diǎn)“用戶的包容性”。另外，請(qǐng)對(duì)自己的設(shè)計(jì)有足夠的自信。用戶是可以被引導(dǎo)的。我用自己用ps 6年了，除了破解新版本的時(shí)候有些小麻煩外，大部分時(shí)候，我還是和ps相安無(wú)事。為老用戶設(shè)計(jì)，為專家用戶提供高級(jí)功能，在使用幫助和新手導(dǎo)航中兼顧好學(xué)和極巨包容的新手用戶。

第三點(diǎn)；要避免功能的堆砌

       產(chǎn)品經(jīng)理在收集需求的過(guò)程中，可以列出一堆待實(shí)現(xiàn)的功能。但是在做設(shè)計(jì)產(chǎn)品的時(shí)候，需要從用戶目標(biāo)和用戶任務(wù)的角度思考問(wèn)題。否者，你的產(chǎn)品只是“一個(gè)能盛湯的勺子”，而不是用戶“喜歡用它喝湯的勺子”?？磫?wèn)題的角度，直接決定視覺(jué)產(chǎn)物。請(qǐng)你記住，僅依靠功能取勝的時(shí)代結(jié)束了。在現(xiàn)在，你不僅要絞盡腦汁的挖需求，更重要的是，把需求轉(zhuǎn)化為符合用戶模型的、對(duì)用戶有用的產(chǎn)品。在這里我想到另外一個(gè)例子：微博！簡(jiǎn)單地說(shuō)，微博產(chǎn)品分為首頁(yè)list和詳情頁(yè)(全部微博內(nèi)容+評(píng)論內(nèi)容+評(píng)論功能+轉(zhuǎn)發(fā)功能)（大部分App都是這個(gè)思路）。你是否發(fā)現(xiàn)你在list看準(zhǔn)了一條感興趣內(nèi)容進(jìn)去之后，大部分情況是想去評(píng)論或者看評(píng)論，但是你進(jìn)入“詳情頁(yè)”，映入眼簾的是剛剛瀏覽過(guò)的主體信息。OK，在這里，信息傳達(dá)存在重復(fù)性。重復(fù)傳達(dá)同樣的信息給用戶是不好的，除非你的目的是加強(qiáng)用戶記憶，但是在這里，顯然，是不必要的。有些微博APP做了改進(jìn)，便是在list頁(yè)，加入了“評(píng)論、轉(zhuǎn)發(fā)”的功能，qq空間便是這樣做的。另外微博本身有140字?jǐn)?shù)的限制，所以詳情頁(yè)的存在實(shí)在是多余。這點(diǎn)Path做的就很好。但是能把list頁(yè)和詳情頁(yè)之間的切換交互做的更自然一些就完美了。如果你只是想把工作做完，那你就額頭冒著油，目光呆滯的坐在電腦前，繼續(xù)苦逼的堆你的功能去吧。你永遠(yuǎn)享受不到，完成一件美麗產(chǎn)品的美妙感覺(jué)和驚喜。

第四點(diǎn)：拒絕過(guò)分保守

       絕對(duì)保守的人，總是不敢大膽的嘗試，常常是別人做什么，我做什么。偶爾有一些新想法，最后也一定會(huì)被否掉。這往往是大公司病。跟隨是一種穩(wěn)健的發(fā)展方法，但是不是一個(gè)適合設(shè)計(jì)師發(fā)揮的土壤?？傮w來(lái)說(shuō)年輕人是智能手機(jī)的主要用戶群，這部分人大多是80、90后，他們性格相對(duì)開(kāi)放，接納力強(qiáng)，喜歡挑戰(zhàn)，所以絕對(duì)保守的東西絕對(duì)不否和他們的口味。

第五點(diǎn)：不要太在意流量問(wèn)題

       “圖文切換、流量提醒、不顯示圖片、離線下載、網(wǎng)絡(luò)切換提醒...”是一些非常貼心的而功能。根據(jù)百度移動(dòng)互聯(lián)網(wǎng)發(fā)展趨勢(shì)報(bào)告_2012年Q2，73.7%的Android 和iOs用戶通過(guò)3G和winfi接入移動(dòng)互聯(lián)網(wǎng)。當(dāng)“節(jié)省流量”和“優(yōu)的用戶體驗(yàn)”相悖時(shí)候，只要不是太恐怖的流量消耗，還是要優(yōu)先考慮用戶體驗(yàn)。

第六點(diǎn)；把握產(chǎn)品特色

       面對(duì)設(shè)計(jì)潮流，是一味的跟風(fēng)，還是保持企業(yè)識(shí)別？這是一個(gè)比較難的抉擇，也許網(wǎng)站風(fēng)格是非常立體的，但是時(shí)下手機(jī)端設(shè)計(jì)流行平而輕的設(shè)計(jì)。那么你怎么辦？我很喜歡的一個(gè)iOs應(yīng)用 Flava，我常常用它寫(xiě)日記。它的設(shè)計(jì)風(fēng)格也是類似真實(shí)筆記本的質(zhì)感，PU仿真皮封面，紙面內(nèi)頁(yè)。由于它獨(dú)特的設(shè)計(jì)，我對(duì)它印象深刻。但是突然有一天，我感覺(jué)它找不到了，起初也沒(méi)在意，后來(lái)有一天發(fā)現(xiàn)自己ipad中貌似有一個(gè)陌生的圖標(biāo)，打開(kāi)來(lái)，發(fā)現(xiàn)原來(lái)就是Flava，全新的交互方式、設(shè)計(jì)風(fēng)格也變得很平。雖然新版本也很完美，但是我仍然很失落，那個(gè)令我印象深刻的Flava不見(jiàn)了，腦海中還浮現(xiàn)著它往昔的樣子。產(chǎn)品應(yīng)該有自己的性格，像蘋(píng)果，就非常重視這一點(diǎn)。如果連你自己都會(huì)在某一版本完全否定自己，那你如何讓用戶完全認(rèn)可你呢？

第七點(diǎn)：不要固守的格式化設(shè)計(jì)思路

       我是格式化思路的受害者。由于對(duì)ios 設(shè)備控件的過(guò)分熟悉，我很長(zhǎng)一段時(shí)間內(nèi)陷入一種格式化困境。以至于我所能想到的app，都是" 標(biāo)題欄+內(nèi)容+Tab"的格局。這樣做本身沒(méi)有錯(cuò)，也很符合ios設(shè)計(jì)規(guī)范，但是儼然沒(méi)了味道。就如一頓同樣的飯，吃了又吃，寡然無(wú)味。打破格式化設(shè)計(jì)思路最直接的手段，就是去看一些Web上優(yōu)秀的Flash網(wǎng)站，學(xué)習(xí)他們是如何打破格式化布局的。

第九點(diǎn)；保證可視區(qū)域

       文字和圖標(biāo)做的小，給人更加精致的感覺(jué)，但是在移動(dòng)設(shè)備上，這是錯(cuò)誤的設(shè)計(jì)。有些人會(huì)反駁說(shuō)：我的點(diǎn)擊區(qū)域是足夠大的！ 假如你帶著禮物去參加朋友的生日Party,一個(gè)手掌大小的禮盒，和一個(gè)14寸電腦大小的禮盒，給主人公的感覺(jué)絕對(duì)是不一樣的。發(fā)散回來(lái)，用戶眼睛里看到的是視覺(jué)大小，看起來(lái)特別小的控件，會(huì)使用戶很緊張，小心翼翼的去點(diǎn)擊，唯恐一次點(diǎn)不準(zhǔn)。每次緊張的去點(diǎn)擊一個(gè)按鈕，對(duì)用戶來(lái)說(shuō)絕非一個(gè)美好的經(jīng)歷。

       哪怕是再簡(jiǎn)單的應(yīng)用，為了確保用戶流程邏輯正確、界面布局合理，我們需要反復(fù)推敲用戶流程并繪制類似上面的流程圖。另外值得注意的是，最好把關(guān)鍵功能繪制在流程圖靠近頂部的地方，而不是被層層分支淹沒(méi)在底部。跳過(guò)此環(huán)節(jié)而草率的開(kāi)始界面設(shè)計(jì)，最終開(kāi)發(fā)出的應(yīng)用很可能在使用流程上不夠清晰合理，用戶上手后不得其解，興趣索然。

一、不應(yīng)該低估開(kāi)發(fā)成本

       設(shè)計(jì)師在Photoshop中畫(huà)出的任何東西，最終都需要通過(guò)開(kāi)發(fā)人員的代碼在屏幕上表現(xiàn)。原本只需幾小時(shí)開(kāi)發(fā)的功能，由于設(shè)計(jì)師的一個(gè)看似細(xì)微的改動(dòng)，可能會(huì)多耗費(fèi)幾天的開(kāi)發(fā)時(shí)間。所以，在設(shè)計(jì)過(guò)程中要避免畫(huà)蛇添足。換句話說(shuō)，如果設(shè)計(jì)師主導(dǎo)了移動(dòng)應(yīng)用功能的取舍，那后果會(huì)很嚴(yán)重。舉個(gè)搜索框的例子，原本相對(duì)簡(jiǎn)單的一個(gè)功能，設(shè)計(jì)師靈光乍現(xiàn)——在用戶輸入關(guān)鍵詞的同時(shí)不斷給出實(shí)時(shí)的搜索結(jié)果。這個(gè)看似細(xì)節(jié)的改動(dòng)，很可能讓開(kāi)發(fā)人員當(dāng)場(chǎng)吐血。像這種的功能改動(dòng)最好經(jīng)過(guò)多方討論后做出決策，而不是任由設(shè)計(jì)師自說(shuō)自話。

二、不能在低分辨率下設(shè)計(jì)，使用位圖文件

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

三、設(shè)備觸摸區(qū)域太小

       普通人的食指觸摸面積在1.6至2厘米見(jiàn)方，而且在使用移動(dòng)應(yīng)用的大多數(shù)時(shí)間里，他們的手指飛快的掠過(guò)屏幕。設(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)選不到或者誤按其它按鈕的問(wèn)題？

四、濫用開(kāi)場(chǎng)動(dòng)畫(huà)

       在啟動(dòng)時(shí)播放一段精致的動(dòng)畫(huà)似乎是個(gè)不錯(cuò)的想法，但切忌不要為了動(dòng)畫(huà)而動(dòng)畫(huà)。Path和Thrillist’s JackThreads使用很酷的開(kāi)場(chǎng)動(dòng)畫(huà)是因?yàn)檫@些應(yīng)用啟動(dòng)需要一些時(shí)間，在程序完成加載之前用戶什么也不能做（譯者：Path啟動(dòng)貌似沒(méi)有啥動(dòng)畫(huà)，難道是針對(duì)老版本說(shuō)的？）。這種情況下，為用戶準(zhǔn)備一段簡(jiǎn)短愉悅的動(dòng)畫(huà)以消除等待的焦慮就顯得很合時(shí)宜了。由于應(yīng)用啟動(dòng)時(shí)必須首先顯示一張靜待圖片（譯者：如iOS應(yīng)用的Default.png），然后才能切換到動(dòng)畫(huà)，所以務(wù)必確保這個(gè)切換看起來(lái)天衣無(wú)縫。一些不好的例子在處理這個(gè)環(huán)節(jié)的時(shí)候產(chǎn)生了不協(xié)調(diào)的跳轉(zhuǎn)或者閃屏，這都是需要避免的。（譯者：優(yōu)酷iPad應(yīng)用的早期版本存在這種切換，處理中有一閃而過(guò)的黑屏，現(xiàn)在的版本把動(dòng)畫(huà)直接去掉了）

五、 讓用戶不知所措的原地等待

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

六、盲目借鑒其它移動(dòng)平臺(tái)風(fēng)格

       糟糕的抄襲只會(huì)讓用戶感到疑惑和憤怒。每一個(gè)移動(dòng)平臺(tái)都有自己的風(fēng)格，平臺(tái)廠商也已經(jīng)依據(jù)其平臺(tái)自身的審美訴求撰寫(xiě)類似蘋(píng)果的Human Interface Guidelines之類的指導(dǎo)性文檔（譯者：Android現(xiàn)在也有類似的文檔）。在iPhone上開(kāi)發(fā)類似Windows Phone 7的Metro風(fēng)格應(yīng)用就很可能讓習(xí)慣了iOS的用戶感到無(wú)從下手。我想說(shuō)的是，你的應(yīng)用并不一定要和官方應(yīng)用一模一樣，但也不能看起來(lái)另類到像不屬于這個(gè)平臺(tái)一樣。

七、過(guò)分擁擠的界面

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

八、 認(rèn)為所有用戶都和你一樣的使用應(yīng)用

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

九、 忘記使用或者濫用手勢(shì)操作

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

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

總   結(jié)

       如果要用一句話概括文本提到的點(diǎn)點(diǎn)滴滴，那就是：好的設(shè)計(jì)是經(jīng)過(guò)深思熟慮的。帶著審慎的態(tài)度全面的考察你的設(shè)計(jì)，真正的從用戶的角度出發(fā)想問(wèn)題。不要試圖走走捷徑，也不要跳過(guò)測(cè)試，不要設(shè)計(jì)出連你自己都拿不出手的東西。