移動(dòng)應(yīng)用的十項(xiàng)設(shè)計(jì)原則及小提示
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(
www.newchinaweekly.com
)是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì)
、 cs界面設(shè)計(jì)
、 ipad界面設(shè)計(jì)
、 包裝設(shè)計(jì)
、 圖標(biāo)定制
、 用戶體驗(yàn) 、交互設(shè)計(jì)、
網(wǎng)站建設(shè)
、平面設(shè)計(jì)服務(wù)
來源：
http://beforweb.com/node/132
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，
請點(diǎn)這里
移動(dòng)設(shè)備與傳統(tǒng)桌面設(shè)備雖然都被成為“計(jì)算設(shè)備”，但它們之間的差異是顯而易見的：移動(dòng)設(shè)備的屏幕要小很多，無線網(wǎng)絡(luò)鏈接方面會有不穩(wěn)定，電池續(xù)航能力較弱，等等。這份“弱點(diǎn)”清單可以列的很長，但如果你因此認(rèn)為移動(dòng)設(shè)備就是降級版的計(jì)算機(jī)，那同樣是錯(cuò)誤的看法。
實(shí)際上，從其他一些角度來觀察，移動(dòng)設(shè)備又是比桌面設(shè)備更加強(qiáng)大的。智能手機(jī)和平板電腦都是更加個(gè)人化的設(shè)備，它們會一直陪伴在你身邊，讓你隨時(shí)隨地都可以接入互聯(lián)網(wǎng)獲取所需的信息；它們身上還有傳統(tǒng)設(shè)備所不具備的很酷的功能，包括GPS、數(shù)位羅盤、加速計(jì)等等。
所有這些差異都使得移動(dòng)設(shè)備當(dāng)中的應(yīng)用程序在界面設(shè)計(jì)方面存在很多獨(dú)到之處。我(英文原文作者)基于在自己的workshop中的工作經(jīng)驗(yàn)，總結(jié)出了移動(dòng)應(yīng)用界面設(shè)計(jì)的十條原則及小提示，在這里與大家分享，希望能夠幫助那些還不是非常熟悉這個(gè)領(lǐng)域的設(shè)計(jì)師們建立起一套有實(shí)踐價(jià)值的設(shè)計(jì)思維框架。
1.設(shè)計(jì)觀念
從傳統(tǒng)設(shè)備轉(zhuǎn)向移動(dòng)領(lǐng)域，設(shè)計(jì)師們首先要做的是調(diào)整思維模式和設(shè)計(jì)觀念。
- 專注
：移動(dòng)應(yīng)用的本質(zhì)目標(biāo)是幫助人們以最高的效率完成特定的任務(wù)。少即是多，你要砍掉的產(chǎn)品功能通常會比你想象的多很多。
- 獨(dú)特：從一開始就要理解你的應(yīng)用與同類產(chǎn)品相比具有哪些獨(dú)到之處，將其體現(xiàn)到產(chǎn)品的整體用戶體驗(yàn)策略當(dāng)中，并在交互及視覺設(shè)計(jì)流程當(dāng)中著重突出這些賣點(diǎn)。
- 迷人
：移動(dòng)設(shè)備是相當(dāng)個(gè)人化的工具，人們會在長久的使用過程中逐漸將感情融入到軟硬件當(dāng)中；應(yīng)用程序同樣要與用戶在情感層面產(chǎn)生互動(dòng)，通過各種友好的、有趣的、可信賴的設(shè)計(jì)與功能讓用戶覺得愛不釋手。
- 體貼
：不要將注意力過多集中在“開發(fā)”本身上，不要將自己的心智模型以及產(chǎn)品的業(yè)務(wù)邏輯作為設(shè)計(jì)的準(zhǔn)繩。如果你確實(shí)希望自己的產(chǎn)品能夠被更多用戶所接受，那么必須學(xué)會站在他們的角度觀察問題、制定設(shè)計(jì)決策。
不要用“多多益善”的觀念打造移動(dòng)應(yīng)用
相關(guān)閱讀：
2.使用環(huán)境
說到移動(dòng)設(shè)備的使用環(huán)境，人們通常會聯(lián)想到專業(yè)商務(wù)人士在機(jī)場一手拖著行李箱一手?jǐn)[弄智能手機(jī)的畫面。不過這只是移動(dòng)應(yīng)用上下文環(huán)境的其中之一，我們需要考慮的使用情景可以歸納為3類：
- 打發(fā)無聊
：其實(shí)很多用戶會在家中窩在沙發(fā)里面使用移動(dòng)設(shè)備。在這種情景下，人機(jī)會話時(shí)間更長，需求偏向于娛樂休閑，因此更加擬真的、令人愉悅的體驗(yàn)是必須的。
- 忙碌
：前面說到的機(jī)場的畫面算是比較典型了。這種情景下，應(yīng)用必須能在用戶一手持機(jī)的情況下幫助他們快速完成一些小任務(wù)目標(biāo)；界面當(dāng)中的文字及交互對象要夠大夠清晰，確保在不穩(wěn)定的狀況下依然可以辨識，便于操作。
- 異地
：用戶正在旅途中，或是處于相對陌生的環(huán)境里。這種情況下，不僅要考慮到前面一點(diǎn)當(dāng)中提到的可讀性易用性方面的問題，同時(shí)，網(wǎng)絡(luò)鏈接、電量等方面的因素也是不能忽視的。針對這類情景設(shè)計(jì)的產(chǎn)品，要提供必要的離線功能支持，同時(shí)盡量精簡那些會造成電量消耗的功能特性。
推薦閱讀：iOS Wow體驗(yàn) - 為應(yīng)用的上下文環(huán)境而設(shè)計(jì)
3.通用的設(shè)計(jì)規(guī)范
不同類型的應(yīng)用(實(shí)用型、效率型、沉浸型)有不同的設(shè)計(jì)與開發(fā)規(guī)則，但從整體角度上講，為小尺寸觸屏移動(dòng)設(shè)備的應(yīng)用進(jìn)行設(shè)計(jì)的過程中，有一些全局性的規(guī)范需要我們注意：
- 響應(yīng)性
：如果用戶執(zhí)行了操作，應(yīng)用必須立刻作出相應(yīng)的反饋。響應(yīng)性和速度不是一回事，也許有些功能的實(shí)現(xiàn)確實(shí)需要花上一段時(shí)間來完成，例如加在媒體文件，但你必須讓用戶知道該進(jìn)程正在發(fā)生。(推薦閱讀：為用戶的成功操作提供正面反饋
)
- 細(xì)節(jié)
：我們在設(shè)計(jì)和開發(fā)過程中沒有在意的細(xì)節(jié)之處很可能被用戶輕而易舉的注意到。優(yōu)秀的細(xì)節(jié)設(shè)計(jì)非常有助于提升產(chǎn)品整體的體驗(yàn)滿意度。想象一輛擁有強(qiáng)力引擎和靚麗外觀的汽車，如果駕駛室沒有經(jīng)過認(rèn)真打造，或是在路上一直發(fā)出討厭的噪音，那么用戶滿意度顯然會被大打折扣。
- 拇指
：關(guān)于觸屏操作，其實(shí)在多數(shù)情況下，我們只是在為拇指進(jìn)行設(shè)計(jì)，除非你確定用戶會同時(shí)使用兩只手來操作設(shè)備。而且即使用戶是在雙手持機(jī)，通常也是使用兩只拇指進(jìn)行操作。所以，設(shè)計(jì)方案通常需要圍繞著拇指進(jìn)行考慮。
- 點(diǎn)擊目標(biāo)
：看看自己拇指的手指肚，也就是用來觸控界面的地方。我自己的看上去無論尺寸還是形狀都像個(gè)瓶蓋兒。即使長的再好看，對于移動(dòng)設(shè)備界面當(dāng)中那些微小的操作對象來說也顯得大了些許。Apple在iOS界面設(shè)計(jì)規(guī)范中建議可觸擊元素的最小尺寸應(yīng)該是44像素見方，不過在實(shí)際當(dāng)中，不符合這條規(guī)范的案例也有很多，包括Apple自家的應(yīng)用。另外，相鄰元素之間的布局關(guān)系也是你需要留意的，例如，在創(chuàng)建內(nèi)容類的應(yīng)用中，將返回按鈕直接擱在保存按鈕旁邊就不是個(gè)好主意。
- 內(nèi)容
：“直接操縱
”是觸屏設(shè)備交互模式的根基。用戶可以直接與界面進(jìn)行交互，而不需要鼠標(biāo)一類的輔助設(shè)備(同時(shí)也是干擾因素)。這種模式的優(yōu)點(diǎn)是不言而喻的，遠(yuǎn)的不說，我兩歲的孩子可以輕松的使用iPad，但完全搞不定筆記本或臺式機(jī)。對于運(yùn)行在觸屏設(shè)備當(dāng)中的應(yīng)用來說，更是要精簡界面元素，使內(nèi)容呈現(xiàn)方式與功能的操作方法盡可能的符合“直接操縱”框架下的直覺模式。
- 控制元素的布局
：通常情況下，具有控制功能的界面元素需要被放置在內(nèi)容的下方，這樣我們在執(zhí)行操作的時(shí)候才不會將內(nèi)容遮擋住。想想看計(jì)算器、磅秤，或是眼前的計(jì)算機(jī)。雖然傳統(tǒng)的桌面軟件和Web頁面都是將相關(guān)的導(dǎo)航和操作放在頂部的，但那只適用于鼠標(biāo)操縱的情況，畢竟指針的尺寸相對于整個(gè)顯示設(shè)備來說是微不足道的。
- 滾屏
：多數(shù)時(shí)候，“折線以下”的忌諱同樣存在于移動(dòng)應(yīng)用的界面設(shè)計(jì)當(dāng)中。另外，對于某些應(yīng)用來說，單屏模式可以帶來更加堅(jiān)實(shí)可靠的感覺，因?yàn)樗械膬?nèi)容都是可預(yù)知的。當(dāng)然，在多數(shù)應(yīng)用中，避免滾屏是不現(xiàn)實(shí)的，不過可以思考一下是否有什么方式可以減少滾屏帶來的不確定感，讓用戶了解到那些還沒有進(jìn)入可視范圍的內(nèi)容的存在。
推薦閱讀：又是為了觸屏移動(dòng)設(shè)備而設(shè)計(jì)
4.導(dǎo)航模式
新奇的導(dǎo)航模式越來越多了，在Path中你就能發(fā)現(xiàn)不止一個(gè)。不過如果你仍然決定采用那些用戶所熟悉的原生標(biāo)準(zhǔn)導(dǎo)航模式，那么同樣要確保你的選擇是符合產(chǎn)品實(shí)際需求的。最常見的一些導(dǎo)航方式包括：
- 沒有導(dǎo)航
：單一界面的實(shí)用型應(yīng)用(例如iOS自帶的“天氣”)。
- Tab Bar
：為應(yīng)用提供的一種能夠在全局層面上組織子任務(wù)、視圖界面或功能模式的導(dǎo)航機(jī)制(例如iOS自帶的“電話”)。
- 列表
：用于在樹形信息結(jié)構(gòu)中進(jìn)行瀏覽(例如iOS的“設(shè)置”)。
iOS的Tab Bar
iOS的列表導(dǎo)航
推薦閱讀：
5.用戶輸入
在觸屏設(shè)備中輸入文字，這事兒幾乎可以用痛苦二字來形容了，再棒的設(shè)備和應(yīng)用也不例外。我們要做的是盡最大努力幫助用戶降低負(fù)面感受。
- 智能手機(jī)的系統(tǒng)平臺當(dāng)中通常都會內(nèi)置一些針對不同類型內(nèi)容的鍵盤，例如文本、數(shù)字、Email、URL等。在你的應(yīng)用中，確保針對不同的內(nèi)容類型使用對應(yīng)的鍵盤，提升用戶輸入的效率。
- 輸入法自帶的自動(dòng)糾錯(cuò)功能有時(shí)真的蠻鬧心的。可以為你的應(yīng)用預(yù)先做好這方面的設(shè)置，例如打開或關(guān)閉掉某些字段的自動(dòng)糾錯(cuò)(auto-correct)、自動(dòng)首字母大寫(auto-capitalisation)或是自動(dòng)完成(auto-complete)。
- 如果你的應(yīng)用確實(shí)需要用戶輸入很多文字，那么可以考慮為應(yīng)用增加橫屏模式，讓用戶通過更寬一些的鍵盤進(jìn)行輸入。
6.手勢
電容觸屏移動(dòng)設(shè)備的一個(gè)標(biāo)志性特色就是手勢操作。
- 無形
：手勢是無形的，所以怎樣進(jìn)行合理的引導(dǎo)，讓用戶了解應(yīng)用支持的手勢操作，同時(shí)又不會很明顯的破壞界面協(xié)調(diào)性，這就變的有點(diǎn)兒挑戰(zhàn)了。
- 多點(diǎn)觸控
：要進(jìn)行多點(diǎn)觸控，正常人類通常需要兩只手來配合操作。例如“雙指張開”，要么是雙手持機(jī)通過兩個(gè)拇指完成，要么是單手持機(jī)同時(shí)用另一只手的兩根手指來操作。有些時(shí)候這樣其實(shí)蠻鬧心的，例如當(dāng)我走在路上一手拿著咖啡一手拿著手機(jī)時(shí)，如果應(yīng)用當(dāng)中的某些功能必須要我使用雙指張開的手勢來完成，我會覺得很難過(這也正是我個(gè)人覺得Clear好看不好用的原因 - 譯者C7210)。
- 錦上添花
：我個(gè)人始終認(rèn)為手勢操作，特別是各種炫酷的多點(diǎn)觸控操作更像是一種錦上添花提升體驗(yàn)的輔助交互方式，即使用戶不知道它們的存在，也應(yīng)該可以正常的使用應(yīng)用。
深入閱讀：
7.屏幕定向
- 目前來看默認(rèn)的也是最主流的屏幕定向方式仍是豎屏。
- 正如前面提到的，如果你的應(yīng)用需要用戶輸入很多文字，那么最好考慮支持橫屏視圖模式，讓人們能使用更寬一些的鍵盤。
- 對于內(nèi)容閱讀類的應(yīng)用，也可以考慮在應(yīng)用內(nèi)增加獨(dú)立的鎖屏設(shè)置。
深入閱讀：橫豎屏切換中的界面設(shè)計(jì)與體驗(yàn)提升
8.交流
- 提供反饋
：為用戶的每一個(gè)交互行為提供即刻的反饋，否則用戶會疑慮程序是否發(fā)生了什么問題，或是錯(cuò)誤的認(rèn)為自己并沒有完成自己想要進(jìn)行的操作行為。反饋的形式可以是觸覺上的，例如震動(dòng)，當(dāng)然多數(shù)情況是視覺上的，譬如為交互對象增加高亮效果或是使用動(dòng)畫過渡效果。如果某個(gè)操作從執(zhí)行到產(chǎn)生結(jié)果需要花上一段時(shí)間，一定要提供等待標(biāo)示或進(jìn)度條一類的視覺元素，讓用戶知道系統(tǒng)正在進(jìn)行必要的處理工作。
- 模態(tài)對話
：主要指Alert警告框，這是一種非常不友好的、會中斷當(dāng)前任務(wù)流程的對話方式，所以你應(yīng)該僅在發(fā)生了重要問題或有可能導(dǎo)致嚴(yán)重后果的地方使用它來提醒用戶。即使必須用到它，也要盡量保持文案的友好。
- 確認(rèn)
：當(dāng)你希望用戶對是否要執(zhí)行某種操作進(jìn)行確認(rèn)時(shí)，動(dòng)作表單(Action Sheet)會更加合理一些。相比于警告框，動(dòng)作表單更像是在上下文當(dāng)中對用戶行為的響應(yīng)，而不是唐突出現(xiàn)不明狀況的東西。
9.啟動(dòng)加載
不能假設(shè)用戶會連貫的使用應(yīng)用直到完成目標(biāo)。在某些情景中，用戶很可能會暫時(shí)退出應(yīng)用；當(dāng)他們再次回來時(shí)，最好確保當(dāng)前的狀態(tài)和他們離開時(shí)完全一致，包括輸入的內(nèi)容及執(zhí)行過的操作和設(shè)置等。
對于某些類型的應(yīng)用，可以在加載時(shí)使用和首屏界面完全一致的“空界面”圖片作為啟動(dòng)圖像，這樣做可以降低用戶對等待時(shí)間的感知，讓他們覺得應(yīng)用從啟動(dòng)到加載完成只需花費(fèi)很少的時(shí)間。不過需要注意的是，不要在這個(gè)“空界面”圖片中放置任何交互元素。
twitter的iPhone應(yīng)用加載界面
另外，盡量不要在啟動(dòng)圖像中使用太多品牌信息方面的內(nèi)容，因?yàn)檫@種方式很有可能讓用戶覺得他們正在看廣告。
10.第一印象
- 應(yīng)用圖標(biāo)
：你的應(yīng)用圖標(biāo)要在各種同類產(chǎn)品的圖標(biāo)海洋里進(jìn)行戰(zhàn)斗。本質(zhì)上講，它更像是名片而不是藝術(shù)品。要盡量在圖標(biāo)中表達(dá)出你的產(chǎn)品的主要功能和賣點(diǎn)，準(zhǔn)確的體現(xiàn)出產(chǎn)品類型和定位。
- 首次啟動(dòng)
：首次啟動(dòng)的表現(xiàn)往往可以決定一款應(yīng)用的成功或失敗。如果一位新用戶在這個(gè)環(huán)節(jié)感到迷惑和受挫，他們會很快的放棄這款產(chǎn)品。如果你的應(yīng)用提供了復(fù)雜的功能，那么可以考慮增加一些提示引導(dǎo)，幫助用戶在最短的時(shí)間內(nèi)對產(chǎn)品產(chǎn)生準(zhǔn)確的理解。不過要注意的是，這些引導(dǎo)提示絕不能代替設(shè)計(jì)方案自身的自我描述性，如果你發(fā)現(xiàn)自己正越來越多的想著那些引導(dǎo)說明而減少了對界面設(shè)計(jì)方案的鉆研，那么該反省反省了。(推薦閱讀：具有引導(dǎo)性的移動(dòng)應(yīng)用界面設(shè)計(jì)模式
)
