轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   sillybuy.com  )是一家專注而深入的設(shè)計機(jī)構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、  cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

 來源： http://beforweb.com/node/132

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，            請點(diǎn)這里

移動設(shè)備與傳統(tǒng)桌面設(shè)備雖然都被成為“計算設(shè)備”，但它們之間的差異是顯而易見的：移動設(shè)備的屏幕要小很多，無線網(wǎng)絡(luò)鏈接方面會有不穩(wěn)定，電池續(xù)航能力較弱，等等。這份“弱點(diǎn)”清單可以列的很長，但如果你因此認(rèn)為移動設(shè)備就是降級版的計算機(jī)，那同樣是錯誤的看法。

實(shí)際上，從其他一些角度來觀察，移動設(shè)備又是比桌面設(shè)備更加強(qiáng)大的。智能手機(jī)和平板電腦都是更加個人化的設(shè)備，它們會一直陪伴在你身邊，讓你隨時隨地都可以接入互聯(lián)網(wǎng)獲取所需的信息；它們身上還有傳統(tǒng)設(shè)備所不具備的很酷的功能，包括GPS、數(shù)位羅盤、加速計等等。

所有這些差異都使得移動設(shè)備當(dāng)中的應(yīng)用程序在界面設(shè)計方面存在很多獨(dú)到之處。我(英文原文作者)基于在自己的workshop中的工作經(jīng)驗(yàn)，總結(jié)出了移動應(yīng)用界面設(shè)計的十條原則及小提示，在這里與大家分享，希望能夠幫助那些還不是非常熟悉這個領(lǐng)域的設(shè)計師們建立起一套有實(shí)踐價值的設(shè)計思維框架。

1.設(shè)計觀念

從傳統(tǒng)設(shè)備轉(zhuǎn)向移動領(lǐng)域，設(shè)計師們首先要做的是調(diào)整思維模式和設(shè)計觀念。

• 專注 ：移動應(yīng)用的本質(zhì)目標(biāo)是幫助人們以最高的效率完成特定的任務(wù)。少即是多，你要砍掉的產(chǎn)品功能通常會比你想象的多很多。
• 獨(dú)特：從一開始就要理解你的應(yīng)用與同類產(chǎn)品相比具有哪些獨(dú)到之處，將其體現(xiàn)到產(chǎn)品的整體用戶體驗(yàn)策略當(dāng)中，并在交互及視覺設(shè)計流程當(dāng)中著重突出這些賣點(diǎn)。
• 迷人 ：移動設(shè)備是相當(dāng)個人化的工具，人們會在長久的使用過程中逐漸將感情融入到軟硬件當(dāng)中；應(yīng)用程序同樣要與用戶在情感層面產(chǎn)生互動，通過各種友好的、有趣的、可信賴的設(shè)計與功能讓用戶覺得愛不釋手。
• 體貼 ：不要將注意力過多集中在“開發(fā)”本身上，不要將自己的心智模型以及產(chǎn)品的業(yè)務(wù)邏輯作為設(shè)計的準(zhǔn)繩。如果你確實(shí)希望自己的產(chǎn)品能夠被更多用戶所接受，那么必須學(xué)會站在他們的角度觀察問題、制定設(shè)計決策。

不要用“多多益善”的觀念打造移動應(yīng)用

相關(guān)閱讀：

• 隨“機(jī)”應(yīng)變的用戶體驗(yàn)設(shè)計
• 移動應(yīng)用的差異化與用戶體驗(yàn)策略

2.使用環(huán)境

說到移動設(shè)備的使用環(huán)境，人們通常會聯(lián)想到專業(yè)商務(wù)人士在機(jī)場一手拖著行李箱一手?jǐn)[弄智能手機(jī)的畫面。不過這只是移動應(yīng)用上下文環(huán)境的其中之一，我們需要考慮的使用情景可以歸納為3類：

• 打發(fā)無聊 ：其實(shí)很多用戶會在家中窩在沙發(fā)里面使用移動設(shè)備。在這種情景下，人機(jī)會話時間更長，需求偏向于娛樂休閑，因此更加擬真的、令人愉悅的體驗(yàn)是必須的。
• 忙碌 ：前面說到的機(jī)場的畫面算是比較典型了。這種情景下，應(yīng)用必須能在用戶一手持機(jī)的情況下幫助他們快速完成一些小任務(wù)目標(biāo)；界面當(dāng)中的文字及交互對象要夠大夠清晰，確保在不穩(wěn)定的狀況下依然可以辨識，便于操作。
• 異地 ：用戶正在旅途中，或是處于相對陌生的環(huán)境里。這種情況下，不僅要考慮到前面一點(diǎn)當(dāng)中提到的可讀性易用性方面的問題，同時，網(wǎng)絡(luò)鏈接、電量等方面的因素也是不能忽視的。針對這類情景設(shè)計的產(chǎn)品，要提供必要的離線功能支持，同時盡量精簡那些會造成電量消耗的功能特性。

推薦閱讀：iOS Wow體驗(yàn) - 為應(yīng)用的上下文環(huán)境而設(shè)計

3.通用的設(shè)計規(guī)范

不同類型的應(yīng)用(實(shí)用型、效率型、沉浸型)有不同的設(shè)計與開發(fā)規(guī)則，但從整體角度上講，為小尺寸觸屏移動設(shè)備的應(yīng)用進(jìn)行設(shè)計的過程中，有一些全局性的規(guī)范需要我們注意：

• 響應(yīng)性 ：如果用戶執(zhí)行了操作，應(yīng)用必須立刻作出相應(yīng)的反饋。響應(yīng)性和速度不是一回事，也許有些功能的實(shí)現(xiàn)確實(shí)需要花上一段時間來完成，例如加在媒體文件，但你必須讓用戶知道該進(jìn)程正在發(fā)生。(推薦閱讀：為用戶的成功操作提供正面反饋 )
• 細(xì)節(jié) ：我們在設(shè)計和開發(fā)過程中沒有在意的細(xì)節(jié)之處很可能被用戶輕而易舉的注意到。優(yōu)秀的細(xì)節(jié)設(shè)計非常有助于提升產(chǎn)品整體的體驗(yàn)滿意度。想象一輛擁有強(qiáng)力引擎和靚麗外觀的汽車，如果駕駛室沒有經(jīng)過認(rèn)真打造，或是在路上一直發(fā)出討厭的噪音，那么用戶滿意度顯然會被大打折扣。
• 拇指 ：關(guān)于觸屏操作，其實(shí)在多數(shù)情況下，我們只是在為拇指進(jìn)行設(shè)計，除非你確定用戶會同時使用兩只手來操作設(shè)備。而且即使用戶是在雙手持機(jī)，通常也是使用兩只拇指進(jìn)行操作。所以，設(shè)計方案通常需要圍繞著拇指進(jìn)行考慮。
• 點(diǎn)擊目標(biāo) ：看看自己拇指的手指肚，也就是用來觸控界面的地方。我自己的看上去無論尺寸還是形狀都像個瓶蓋兒。即使長的再好看，對于移動設(shè)備界面當(dāng)中那些微小的操作對象來說也顯得大了些許。Apple在iOS界面設(shè)計規(guī)范中建議可觸擊元素的最小尺寸應(yīng)該是44像素見方，不過在實(shí)際當(dāng)中，不符合這條規(guī)范的案例也有很多，包括Apple自家的應(yīng)用。另外，相鄰元素之間的布局關(guān)系也是你需要留意的，例如，在創(chuàng)建內(nèi)容類的應(yīng)用中，將返回按鈕直接擱在保存按鈕旁邊就不是個好主意。
• 內(nèi)容 ：“直接操縱 ”是觸屏設(shè)備交互模式的根基。用戶可以直接與界面進(jìn)行交互，而不需要鼠標(biāo)一類的輔助設(shè)備(同時也是干擾因素)。這種模式的優(yōu)點(diǎn)是不言而喻的，遠(yuǎn)的不說，我兩歲的孩子可以輕松的使用iPad，但完全搞不定筆記本或臺式機(jī)。對于運(yùn)行在觸屏設(shè)備當(dāng)中的應(yīng)用來說，更是要精簡界面元素，使內(nèi)容呈現(xiàn)方式與功能的操作方法盡可能的符合“直接操縱”框架下的直覺模式。
• 控制元素的布局 ：通常情況下，具有控制功能的界面元素需要被放置在內(nèi)容的下方，這樣我們在執(zhí)行操作的時候才不會將內(nèi)容遮擋住。想想看計算器、磅秤，或是眼前的計算機(jī)。雖然傳統(tǒng)的桌面軟件和Web頁面都是將相關(guān)的導(dǎo)航和操作放在頂部的，但那只適用于鼠標(biāo)操縱的情況，畢竟指針的尺寸相對于整個顯示設(shè)備來說是微不足道的。
• 滾屏 ：多數(shù)時候，“折線以下”的忌諱同樣存在于移動應(yīng)用的界面設(shè)計當(dāng)中。另外，對于某些應(yīng)用來說，單屏模式可以帶來更加堅實(shí)可靠的感覺，因?yàn)樗械膬?nèi)容都是可預(yù)知的。當(dāng)然，在多數(shù)應(yīng)用中，避免滾屏是不現(xiàn)實(shí)的，不過可以思考一下是否有什么方式可以減少滾屏帶來的不確定感，讓用戶了解到那些還沒有進(jìn)入可視范圍的內(nèi)容的存在。

推薦閱讀：又是為了觸屏移動設(shè)備而設(shè)計

4.導(dǎo)航模式

新奇的導(dǎo)航模式越來越多了，在Path中你就能發(fā)現(xiàn)不止一個。不過如果你仍然決定采用那些用戶所熟悉的原生標(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)航

推薦閱讀：

• iOS交互模型與創(chuàng)新的產(chǎn)品概念
• 先了解規(guī)則，再尋求創(chuàng)新 - 關(guān)于iOS應(yīng)用界面自定義

5.用戶輸入

在觸屏設(shè)備中輸入文字，這事兒幾乎可以用痛苦二字來形容了，再棒的設(shè)備和應(yīng)用也不例外。我們要做的是盡最大努力幫助用戶降低負(fù)面感受。

• 智能手機(jī)的系統(tǒng)平臺當(dāng)中通常都會內(nèi)置一些針對不同類型內(nèi)容的鍵盤，例如文本、數(shù)字、Email、URL等。在你的應(yīng)用中，確保針對不同的內(nèi)容類型使用對應(yīng)的鍵盤，提升用戶輸入的效率。
• 輸入法自帶的自動糾錯功能有時真的蠻鬧心的?？梢詾槟愕膽?yīng)用預(yù)先做好這方面的設(shè)置，例如打開或關(guān)閉掉某些字段的自動糾錯(auto-correct)、自動首字母大寫(auto-capitalisation)或是自動完成(auto-complete)。
• 如果你的應(yīng)用確實(shí)需要用戶輸入很多文字，那么可以考慮為應(yīng)用增加橫屏模式，讓用戶通過更寬一些的鍵盤進(jìn)行輸入。

6.手勢

電容觸屏移動設(shè)備的一個標(biāo)志性特色就是手勢操作。

• 無形 ：手勢是無形的，所以怎樣進(jìn)行合理的引導(dǎo)，讓用戶了解應(yīng)用支持的手勢操作，同時又不會很明顯的破壞界面協(xié)調(diào)性，這就變的有點(diǎn)兒挑戰(zhàn)了。
• 多點(diǎn)觸控 ：要進(jìn)行多點(diǎn)觸控，正常人類通常需要兩只手來配合操作。例如“雙指張開”，要么是雙手持機(jī)通過兩個拇指完成，要么是單手持機(jī)同時用另一只手的兩根手指來操作。有些時候這樣其實(shí)蠻鬧心的，例如當(dāng)我走在路上一手拿著咖啡一手拿著手機(jī)時，如果應(yīng)用當(dāng)中的某些功能必須要我使用雙指張開的手勢來完成，我會覺得很難過(這也正是我個人覺得Clear好看不好用的原因 - 譯者C7210)。
• 錦上添花 ：我個人始終認(rèn)為手勢操作，特別是各種炫酷的多點(diǎn)觸控操作更像是一種錦上添花提升體驗(yàn)的輔助交互方式，即使用戶不知道它們的存在，也應(yīng)該可以正常的使用應(yīng)用。

深入閱讀：

• iOS用戶體驗(yàn)解析 - 手勢
• 移動設(shè)備操作圖例與觸屏人機(jī)工學(xué)

7.屏幕定向

• 目前來看默認(rèn)的也是最主流的屏幕定向方式仍是豎屏。
• 正如前面提到的，如果你的應(yīng)用需要用戶輸入很多文字，那么最好考慮支持橫屏視圖模式，讓人們能使用更寬一些的鍵盤。
• 對于內(nèi)容閱讀類的應(yīng)用，也可以考慮在應(yīng)用內(nèi)增加獨(dú)立的鎖屏設(shè)置。

深入閱讀：橫豎屏切換中的界面設(shè)計與體驗(yàn)提升

8.交流

• 提供反饋 ：為用戶的每一個交互行為提供即刻的反饋，否則用戶會疑慮程序是否發(fā)生了什么問題，或是錯誤的認(rèn)為自己并沒有完成自己想要進(jìn)行的操作行為。反饋的形式可以是觸覺上的，例如震動，當(dāng)然多數(shù)情況是視覺上的，譬如為交互對象增加高亮效果或是使用動畫過渡效果。如果某個操作從執(zhí)行到產(chǎn)生結(jié)果需要花上一段時間，一定要提供等待標(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)時，動作表單(Action Sheet)會更加合理一些。相比于警告框，動作表單更像是在上下文當(dāng)中對用戶行為的響應(yīng)，而不是唐突出現(xiàn)不明狀況的東西。

9.啟動加載

不能假設(shè)用戶會連貫的使用應(yīng)用直到完成目標(biāo)。在某些情景中，用戶很可能會暫時退出應(yīng)用；當(dāng)他們再次回來時，最好確保當(dāng)前的狀態(tài)和他們離開時完全一致，包括輸入的內(nèi)容及執(zhí)行過的操作和設(shè)置等。

對于某些類型的應(yīng)用，可以在加載時使用和首屏界面完全一致的“空界面”圖片作為啟動圖像，這樣做可以降低用戶對等待時間的感知，讓他們覺得應(yīng)用從啟動到加載完成只需花費(fèi)很少的時間。不過需要注意的是，不要在這個“空界面”圖片中放置任何交互元素。

twitter的iPhone應(yī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)品類型和定位。
• 首次啟動 ：首次啟動的表現(xiàn)往往可以決定一款應(yīng)用的成功或失敗。如果一位新用戶在這個環(huán)節(jié)感到迷惑和受挫，他們會很快的放棄這款產(chǎn)品。如果你的應(yīng)用提供了復(fù)雜的功能，那么可以考慮增加一些提示引導(dǎo)，幫助用戶在最短的時間內(nèi)對產(chǎn)品產(chǎn)生準(zhǔn)確的理解。不過要注意的是，這些引導(dǎo)提示絕不能代替設(shè)計方案自身的自我描述性，如果你發(fā)現(xiàn)自己正越來越多的想著那些引導(dǎo)說明而減少了對界面設(shè)計方案的鉆研，那么該反省反省了。(推薦閱讀：具有引導(dǎo)性的移動應(yīng)用界面設(shè)計模式 )