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

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

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

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

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

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

1.設(shè)計觀念

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

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

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

相關(guān)閱讀：

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

2.使用環(huán)境

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

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

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

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

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

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

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

4.導(dǎo)航模式

新奇的導(dǎo)航模式越來越多了，在Path中你就能發(fā)現(xiàn)不止一個。不過如果你仍然決定采用那些用戶所熟悉的原生標(biāo)準(zhǔn)導(dǎo)航模式，那么同樣要確保你的選擇是符合產(chǎn)品實際需求的。最常見的一些導(dǎo)航方式包括：

• 沒有導(dǎo)航 ：單一界面的實用型應(yīng)用(例如iOS自帶的“天氣”)。
• Tab Bar ：為應(yīng)用提供的一種能夠在全局層面上組織子任務(wù)、視圖界面或功能模式的導(dǎo)航機制(例如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ù)面感受。

• 智能手機的系統(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)用確實需要用戶輸入很多文字，那么可以考慮為應(yīng)用增加橫屏模式，讓用戶通過更寬一些的鍵盤進(jìn)行輸入。

6.手勢

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

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

深入閱讀：

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

7.屏幕定向

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

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

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)用從啟動到加載完成只需花費很少的時間。不過需要注意的是，不要在這個“空界面”圖片中放置任何交互元素。

twitter的iPhone應(yīng)用加載界面

另外，盡量不要在啟動圖像中使用太多品牌信息方面的內(nèi)容，因為這種方式很有可能讓用戶覺得他們正在看廣告。

10.第一印象

• 應(yīng)用圖標(biāo) ：你的應(yīng)用圖標(biāo)要在各種同類產(chǎn)品的圖標(biāo)海洋里進(jìn)行戰(zhàn)斗。本質(zhì)上講，它更像是名片而不是藝術(shù)品。要盡量在圖標(biāo)中表達(dá)出你的產(chǎ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è)計模式 )