移動應(yīng)用平臺交互設(shè)計方案專題培訓(xùn)課件

目錄移動交互基本原則移動視覺展示基本原則移動交互的變化和趨勢移動視覺展示的變化和趨勢交互評估移動信息時代應(yīng)用類型特征為三種：一是效率型應(yīng)用

例如，iPhone、HTC等智能手機(jī)應(yīng)用。二是實(shí)用型應(yīng)用

例如，Pad、iPad等平板電腦應(yīng)用。三是沉浸型應(yīng)用

例如，筆記本、臺式機(jī)等應(yīng)用。移動交互基本原則移動交互基本原則在用戶執(zhí)行明確的任務(wù)時，我們應(yīng)該提供新穎、簡潔、明了的交互方式，不要為了填滿整個屏幕而增加一些與主要任務(wù)沒有直接關(guān)聯(lián)的功能，不要為了功能而功能，或者是為了大而全地展示產(chǎn)品功能，而是應(yīng)該提升產(chǎn)品的用戶體驗(yàn)和性能。增強(qiáng)交互直接操作的好處是當(dāng)用戶可以直接操作對象時，他們能更好的明白自己操作的結(jié)果；讓用戶（而不是產(chǎn)品）來觸發(fā)和控制動作，要使動作簡單、直接，使用戶可以容易的理解和記?。徊徽撊魏螘r候，只要有可能，就使用用戶已經(jīng)熟悉的標(biāo)準(zhǔn)控制和行為；為了在產(chǎn)品里加強(qiáng)直接操作的感覺，我們要確保：當(dāng)用戶在屏幕上操作對象時，那些對象仍是可見的；用戶操作的結(jié)果要立即可見，即所見即所得。簡單、直接的操作移動交互基本原則豎向的大屏幕可以滿足大部分用戶常用瀏覽內(nèi)容的需求，但當(dāng)豎屏較小時，用戶就會將屏幕旋轉(zhuǎn)為橫屏，因?yàn)檫@樣可以使用戶瀏覽較多的信息?？紤]到有些產(chǎn)品只能在橫屏或豎屏下顯示，所以顯示產(chǎn)品為正常顯示方式，無論當(dāng)前移動設(shè)備是什么方位。避免使用UI元素來告知用戶旋轉(zhuǎn)設(shè)備（支持180°旋轉(zhuǎn)。）。支持全方位操作在長時操作中，當(dāng)用戶操作時，他們需要及時的反饋和狀態(tài)報告。產(chǎn)品應(yīng)該提供一些可見的變化，這些變化根據(jù)每個用戶的動作而變化。增強(qiáng)反饋和交流移動交互基本原則在有嚴(yán)重的問題或者重大操作發(fā)生時，可以使用聲音來提示用戶，但是通常應(yīng)該允許用戶取消聲音。除非特別必要時，不要提供聲音反饋如果按鍵布局過于擁擠，用戶就要小心翼翼地花更多時間去操作，那么錯誤也會緊接而來。簡潔易用的界面空間必須合理地控制按鈕布局和交互元素，讓用戶更快更容易點(diǎn)擊。提供指尖大小的點(diǎn)擊區(qū)域相似的視覺元素，而只在某一區(qū)域變更內(nèi)容。普遍的規(guī)則是寧愿轉(zhuǎn)換單獨(dú)的視圖或者組件，也不要進(jìn)行全屏切換，以保證用戶的視覺穩(wěn)定性，幫助用戶理解自己所處的位置。減少全屏切換移動交互基本原則通過設(shè)計產(chǎn)品中的UI來組織信息框架，減少控件的數(shù)量和淡化顯示效果，創(chuàng)建和產(chǎn)品風(fēng)格相符的控件，這樣即不突出，但又易于發(fā)現(xiàn)。這樣就能夠讓用戶注意力能夠集中其所要做的工作中，而當(dāng)用戶需要改變工作狀態(tài)時，也能夠立即找到相應(yīng)控件進(jìn)行改變工作狀態(tài)。弱化界面控件移動設(shè)備的屏幕一般支持自定義的多點(diǎn)觸摸，但也要不用響應(yīng)不標(biāo)準(zhǔn)的觸摸手勢，如果有也只有一種方式來執(zhí)行操作命令。多點(diǎn)觸控在合理的情況下，應(yīng)盡可能地減少輸入，直接為用戶提供選項(xiàng)；或者通過語音輸入、聲紋識別等新技術(shù)，為用戶提供更便捷的輸入模式。減少輸入移動交互基本原則浮動窗口可以顯示控件或者工具，不必切換屏幕即可完成操作。但是由于移動設(shè)備產(chǎn)品各自屏幕大小均不一樣，所以在設(shè)計過程根據(jù)實(shí)際情況進(jìn)行調(diào)整，原則上則是使用浮動窗口顯示控件或工具。浮動窗口和模態(tài)視圖有些相似，當(dāng)浮動窗口顯示時，不能操作主視圖。但模態(tài)視圖是模態(tài)的，然而浮動窗口可以用在兩種途徑：模態(tài)：浮動窗口出現(xiàn)時，周圍的界面淡化，需要一個明確的操作取消；非模態(tài)：點(diǎn)擊浮動窗口周圍的界面也可以取消浮動窗口。如果在移動設(shè)備中使用了模態(tài)視圖，可以考慮可以浮動窗口替代它。以下情況下可以幫助我們決定浮動窗口的使用是否合理：是否需要不同類型的輸入？是否需要用戶穿過多級視圖？可能在主視圖操作才可以完成任務(wù)嗎？任務(wù)需要用戶深度投入并且是程序的一個主要功能？使用浮動窗口（Popovers）移動交互基本原則產(chǎn)品程序啟動時用戶無須等待即可開始操作。啟動圖片中顯示品牌信息是容許的，如果非要使用啟動畫面，明確顯示時候不應(yīng)過長并且無需用戶進(jìn)行任何交互。移動設(shè)備一般都有“Home”鍵，產(chǎn)品在用戶按“Home”鍵之后，則需要做到以下兩點(diǎn)：盡快和合理地保存數(shù)據(jù)；退出時保存界面的每一個細(xì)節(jié)。立即啟動和隨時準(zhǔn)備停止另外，我們也要注意用戶也不是想像中那么傻的，不要一味提醒他們?nèi)绾尾僮鳎◣椭蕉嗾f明產(chǎn)品越難用），在設(shè)計時應(yīng)該關(guān)注如何更有效地引導(dǎo)用戶集中精力快速完成任務(wù)。避免不必要的交互移動視覺展示基本原則移動視覺展示基本原則較少的信息層級關(guān)系，用戶通過操作跳轉(zhuǎn)較少的頁面即能找到想要的信息。如果產(chǎn)品展示部分設(shè)計得當(dāng)可以避免用戶尋找信息時跳轉(zhuǎn)的次數(shù)過多，減少用戶的流失和界面的復(fù)雜度。信息扁平化所有方位中都顯示相似的界面布局，旋轉(zhuǎn)時盡可能保留信息內(nèi)容或文本的原有樣式，尤其在用戶閱讀、瀏覽信息內(nèi)容時，重要的是避免旋轉(zhuǎn)后用戶找不到瀏覽到哪里了。如果非要對信息內(nèi)容重新布局，最好可以使用動畫、提示等幫助用戶理解當(dāng)前信息內(nèi)容的變化。避免布局變化過大或者無緣無故的改變當(dāng)用戶旋轉(zhuǎn)移動設(shè)備的方位時，如果重點(diǎn)顯示的內(nèi)容發(fā)生變化，就會使用戶感覺對產(chǎn)品失去控制，所以我們在設(shè)計時得保證首要內(nèi)容。旋轉(zhuǎn)屏幕時保證首要內(nèi)容為重點(diǎn)移動視覺展示基本原則應(yīng)該是信息內(nèi)容隨著移動設(shè)備的旋轉(zhuǎn)而旋轉(zhuǎn)。避免使用UI元素或者定義一個旋轉(zhuǎn)手勢來完成旋轉(zhuǎn)動作分段控件可以顯示并列的信息，使用戶在第一時間顯示更多的信息，以便于用戶在初始階段就能得到用戶所要的關(guān)鍵信息。工具欄中顯示分段控件例如，提供1004×768和748×1024的圖片來滿足兩個方位的顯示要求。為每個顯示方位各提供一個啟動圖片或動畫標(biāo)簽欄顯示不同種類信息或者是不同的產(chǎn)品模塊，是提供一個界面來導(dǎo)航不同視圖。使用標(biāo)簽欄移動視覺展示基本原則移動設(shè)備的屏幕一般都支持豐富、美觀和動人的UI設(shè)計，因此我們可以嘗試增加產(chǎn)品中產(chǎn)品UI的深度和細(xì)節(jié)。整體視覺效果分段控件可以顯示并列的信息，使用戶在第一時間顯示更多的信息，以便于用戶在初始階段就能得到用戶所要的關(guān)鍵信息。工具欄中顯示分段控件列表（也就是表視圖）在移動設(shè)備中常用于顯示大量的數(shù)據(jù)信息，但可以使用一個更豐富的方式來顯示同樣的信息。例如：一般手機(jī)中的聯(lián)系方式是一個列表，而在iPad中的聯(lián)系方式看起來是一個美觀的通訊錄，iPad的列表可以顯示更多的信息。重新思考列表移動視覺展示基本原則雖然在啟動屏、登錄屏或產(chǎn)品介紹欄目中出現(xiàn)公司或產(chǎn)品名稱及Logo是完全可以接受的，但是在其他窗口中的可用空間應(yīng)該出現(xiàn)其產(chǎn)品內(nèi)容。如果沒有其他內(nèi)容，則應(yīng)盡量使窗口小一些。不要到處粘貼公司或產(chǎn)品的名稱及Logo用熟悉的隱喻為用戶的任務(wù)提供直接而直觀的界面;但是我們在設(shè)計過程中，也不需要將基于產(chǎn)品的實(shí)現(xiàn)局限于真實(shí)世界的對應(yīng)物上范圍內(nèi);隱喻支持用戶認(rèn)知而不是記憶。隱喻效果移動交互的變化和趨勢移動交互的變化和趨勢基于動作的交互技術(shù)使得電腦可以識別人類的行為與動作。比如現(xiàn)在基于動作的系統(tǒng)能解讀人類面部表情，或者手部動作所隱含的意思。動作可以充當(dāng)人機(jī)交流時更無縫的一種方式，例如iPhonebump這個軟件，能讓兩個人通過“碰”一下來交換聯(lián)系信息。這個動作和碰見某人、交換名片類似，這種交互方式對于最終用戶來說感覺很自然。其實(shí)這些是應(yīng)用了移動設(shè)備本身的LBS和重力感應(yīng)，實(shí)現(xiàn)“碰撞”設(shè)備交互數(shù)據(jù)，其它還可以應(yīng)用到如通訊錄、照片和應(yīng)用程序等等范圍?；趧幼鞯慕换ゼ夹g(shù)移動交互的變化和趨勢語音是較早就進(jìn)行的一種自然交互技術(shù)，語音撥號、語音命令控制、簡單的數(shù)據(jù)輸入等工具已經(jīng)開始在一些移動設(shè)備中使用。利用語音識別技術(shù)，用戶通過語音輸入來拓寬移動設(shè)備輸入的窄道，而語音的信息反饋則使用戶可以使用除視覺之外的第二感覺通道來接收信息?；谡Z音的交互移動交互的變化和趨勢前年推出的一些WikitudeTravelGuide軟件除了象現(xiàn)在這樣在一個俯瞰圖上疊一個路線圖，并且在用戶即時實(shí)拍的影象上顯示地理導(dǎo)航信息，并設(shè)備合成與真實(shí)環(huán)境相關(guān)的實(shí)時信息（現(xiàn)實(shí)增強(qiáng)技術(shù)的潛在功能之一）?，F(xiàn)實(shí)增強(qiáng)技術(shù)的應(yīng)用當(dāng)然不限于導(dǎo)航，例如iPhone手機(jī)上的Yelp軟件能滾動顯示你針對當(dāng)前正在拍攝的酒店的顧客評價；諾基亞手機(jī)上的PointandFind能讓用戶馬上檢索相關(guān)信息，用戶僅需要把手機(jī)的攝相頭對準(zhǔn)檢索對象即可來。在其它領(lǐng)域，增強(qiáng)現(xiàn)實(shí)也可以得到較多的應(yīng)用，例如：教育：網(wǎng)絡(luò)課堂上建立學(xué)生與教師在顯示器前的直接互動；醫(yī)療：醫(yī)生們可以用增強(qiáng)現(xiàn)實(shí)來遠(yuǎn)程指導(dǎo)病人解決問題?，F(xiàn)實(shí)增強(qiáng)技術(shù)

移動交互的變化和趨勢要盡量充分地利用相關(guān)服務(wù)的技術(shù)能力，對用戶在上下操作環(huán)境中的各方面特征進(jìn)行更加細(xì)微準(zhǔn)確的了解與分析?？紤]對用戶的地理位置信息、工作計劃、任務(wù)安排、會議行程、行事歷、微博feed、Gmail賬戶等中的訂閱、提醒服務(wù)、通訊錄等進(jìn)行合理合法的利用，使產(chǎn)品應(yīng)用能夠?yàn)橛脩籼峁└又悄堋⒏觽€性化的內(nèi)容及功能。目前的一些些智能化只是局限于表象，也僅僅是初級階段，而產(chǎn)品的真正智能化則在于產(chǎn)品自身的特性，例如下一代智能分析將從傳統(tǒng)的離線分析轉(zhuǎn)向在線嵌入式分析。用戶可以從分析歷史數(shù)據(jù)來解釋發(fā)生了什么，到對歷史和來自多種系統(tǒng)的實(shí)時數(shù)據(jù)進(jìn)行即時分析以模擬和預(yù)測未來。下一代智能分析會在第三維度上成熟，從由個別進(jìn)行的結(jié)構(gòu)和簡單的數(shù)據(jù)分析移向來自眾多系統(tǒng)對多種類型的復(fù)雜信息的分析。這就需要有云計算、大數(shù)據(jù)、內(nèi)存計算甚至是物聯(lián)網(wǎng)等技術(shù)去支撐。智能化與個性化的交互移動交互的變化和趨勢例如Zite的內(nèi)容閱讀類應(yīng)用，它會讀取用戶在GoogleReader、Twitter和Delicious賬戶中的內(nèi)容信息，分析用戶的個人喜好，并在此基礎(chǔ)上向用戶推薦其他內(nèi)容源當(dāng)中的相關(guān)文章。例如讓用戶試著在這款應(yīng)用中授權(quán)其Delicious賬戶，五秒鐘之內(nèi)，它就完成了對用戶曾經(jīng)收藏過的文章的分析，并基于用戶的興趣方向生成了一本完全個性化的雜志，讓用戶可以閱讀到更多感興趣的新文章。智能化與個性化的交互移動交互的變化和趨勢隨著傳感器和智能被添加到像連接到因特網(wǎng)上的移動設(shè)備這樣的物理器件中，互聯(lián)網(wǎng)的擴(kuò)展要素包括嵌入式傳感器、圖像識別、信息短距離相互傳輸和近距離無信通信（NFC）支付等，使得移動設(shè)備中數(shù)據(jù)可以像物品一樣被隨時隨地的交換，包括用戶的身份信息。近距離無信通信（NFC）讓用戶在一個兼容的讀卡器前揮一下他們的手機(jī)就可以完成付款。一般移動設(shè)備自帶的NFC功能，包含用戶各種卡類信息，從而可以取代用戶的銀行卡、飯卡、公交卡和門卡等等。與物聯(lián)網(wǎng)結(jié)合的交互移動交互的變化和趨勢觸屏移動設(shè)備通過對手指劃動屏幕的手勢進(jìn)行識別，來完成與移動設(shè)備的交互。但是由于識別技術(shù)的限制，可用的手勢種類不多，隨著其他計算視覺等技術(shù)在手機(jī)上的成熟運(yùn)用，則手勢識別會有更大的發(fā)展。類似的例如PalmPre有一個手勢感應(yīng)板能識別手指的滑動方式，從右到左意味著后退，把一應(yīng)用從屏幕丟出去意味著退出、緩緩向上拖動意味著喚醒全局導(dǎo)航。手勢交互移動交互的變化和趨勢裸眼3D技術(shù)裸眼3D技術(shù)是利用前置攝像頭探測用戶和設(shè)備的相對位置，在屏幕上顯示立體化的圖形，不需要戴眼鏡可以看到3D的效果。攝像頭交互技術(shù)攝像頭的潛力同樣越來越讓人開始關(guān)注，除了拍照和拍視頻還有很多料想不到的功能，比如類似于kinect的操作，在屏幕上方移動手掌可以操作移動設(shè)備、GalaxyNexus的臉部識別功能等。虛擬現(xiàn)實(shí)表情識別空間動作交互智能的各種表面技術(shù)其它一些新興的交互技術(shù)移動視覺展示的變化和趨勢移動視覺展示的變化和趨勢采用流體布局，而不是固定寬度，這樣更多的樣式表被查詢設(shè)備選擇——網(wǎng)頁能夠隨著不同設(shè)備屏幕的變化而自適應(yīng)變化，從而使得不同屏幕尺寸的設(shè)備都能夠擁有完美的顯示。通過對不同的瀏覽器寬度用不同的CSS來進(jìn)行渲染，能夠控制在不同寬度下個元素的表現(xiàn)效果。增強(qiáng)適配性，平面化的圖形便于橫向拉伸，分辨率增大的同時，頂部可以由兩欄合并為一欄，手機(jī)和平板可以使用同一個程序，所以應(yīng)用程序?qū)⒏嗟目紤]高分辨率的顯示效果，而不是簡單的欄目自適應(yīng)拉伸，去刻意填滿屏幕，故今后的相關(guān)設(shè)計中，則應(yīng)充分考慮到欄目的合并或平行化。響應(yīng)式界面設(shè)計（有虛擬化桌面的傾向，并且逐漸達(dá)到一個產(chǎn)品均適應(yīng)不同設(shè)備平臺，即多平臺、多設(shè)備瀏覽的統(tǒng)一）移動視覺展示的變化和趨勢自WP7使用Metro風(fēng)格之后，Windows8為代表的界面會將這種新興設(shè)計風(fēng)格推向主流，Metro的特點(diǎn)就是簡潔與直觀，沒有過分華麗的炫目背景與精致的功能圖標(biāo)。Android4.0系統(tǒng)的視覺設(shè)計，放棄了原有的設(shè)計風(fēng)格，整體正在向平面化、格子風(fēng)的設(shè)計方向進(jìn)化，雖然沒有那么強(qiáng)烈的Metro設(shè)計風(fēng)格，但是這足以可以體現(xiàn)Metro風(fēng)格的影響力。平面化、格子化視覺風(fēng)格移動視覺展示的變化和趨勢部分移動應(yīng)用由于發(fā)展時間比較長，已經(jīng)變得有些臃腫，默認(rèn)的五個標(biāo)簽欄已經(jīng)滿足不了架構(gòu)需求。類似Pad的側(cè)邊欄越來越多出現(xiàn)在手機(jī)界面設(shè)計，有助于減少界面的層級關(guān)系，充分利用顯示空間，或者讓目錄型數(shù)據(jù)便于在較低分辨率的界面中操作。側(cè)邊欄可以保證視覺的穩(wěn)定性，如果和界面操作不沖突的話，可以依靠左右滑動手勢調(diào)出側(cè)邊欄，提升操作效率。側(cè)邊欄也可以放置操作按鈕，但可能會導(dǎo)致界面看起來顯得擁擠，更多的側(cè)邊欄樣式及應(yīng)用場景還需要根據(jù)實(shí)際產(chǎn)品應(yīng)用情況不斷地進(jìn)行嘗試。側(cè)邊欄菜單移動視覺展示的變化和趨勢動態(tài)效果設(shè)計和交互視覺都息息相關(guān)，是一種動態(tài)交互行為的用戶反饋特效。優(yōu)秀的動態(tài)效果設(shè)計，能夠增加用戶交互的親和力和趣味性，提升產(chǎn)品的用戶體驗(yàn)。動態(tài)效果會被越來越多的平臺軟件應(yīng)用，移動設(shè)備硬件的提升，給動態(tài)效果體驗(yàn)設(shè)計帶來了展示的機(jī)會，給軟件產(chǎn)品的用戶體驗(yàn)升級提供了更大的空間。動態(tài)效果（媒體化效果之一，現(xiàn)階段往往是使用在產(chǎn)品功能之間的轉(zhuǎn)換）移動視覺展示的變化和趨勢動態(tài)效果設(shè)計和交互視覺都息息相關(guān)，是一種動態(tài)交互行為的用戶反饋特效。優(yōu)秀的動態(tài)效果設(shè)計，能夠增加用戶交互的親和力和趣味性，提升產(chǎn)品的用戶體驗(yàn)。動態(tài)效果會被越來越多的平臺軟件應(yīng)用，移動設(shè)備硬件的提升，給動態(tài)效果體驗(yàn)設(shè)計帶來了展示的機(jī)會，給軟件產(chǎn)品的用戶體驗(yàn)升級提供了更大的空間。而Foursquare和Gowalla會在合適的時機(jī)，提醒你可以執(zhí)行某個操作。某個按鈕挪了位置，快速去添加好友，開始簽到并與好友分享圖片。通過這樣一種Tips告知的形式，讓用戶關(guān)注到系統(tǒng)的狀態(tài)，引導(dǎo)用戶可以繼續(xù)走向哪里，可以啟動很好的幫助用戶熟悉應(yīng)用的作用。合理的用戶引導(dǎo)移動視覺展示的變化和趨勢產(chǎn)品的定位和核心功能決定了主界面的布局，對于不同信息架構(gòu)的產(chǎn)品，主界面會有很大的不同，但是要使產(chǎn)品從同類產(chǎn)品的相似界面中脫穎而出只有使用戶專注。從主界面點(diǎn)擊超過三次才能操作的功能被使用機(jī)率則非常低，普通用戶不會樂于使用深層界面被掩藏的功能。同樣，也有數(shù)據(jù)表明，在界面上突出某項(xiàng)功能的視覺特征，會提高用戶使用該功能的機(jī)率；對具有“利用碎片化時間”和“顯示區(qū)域較小”特征的移動應(yīng)用來說，讓用戶在多個功能按鈕中進(jìn)行選擇，也會成為影響用戶體驗(yàn)的因素。另一個影響視覺設(shè)計的因素是：設(shè)計的重點(diǎn)與單個功能的使用率。突出主要功能（或者產(chǎn)品定義的核心）移動視覺展示的變化和趨勢提到在移動設(shè)備的小空間內(nèi)展示大量核心功能，F(xiàn)acebook的第一版就做的非常到位。當(dāng)然，這里指的是展示所有信息和擁有直觀的界面。3.0與之相比，你會發(fā)現(xiàn)它使用“跳板”的方式來簡化界面，既保持了直觀又維護(hù)了功能。又例如Flickr對功能、視覺設(shè)計和小屏幕移動設(shè)備顯示這三者間平衡上的處理同樣出色。Flickr的核心是照片，它的用戶或許不希望看到又大又笨的導(dǎo)航，用戶明確想要的是照片。Flickr已經(jīng)設(shè)法調(diào)整核心功能，去掉那些標(biāo)題和導(dǎo)航（而事實(shí)上，很多導(dǎo)航元素已經(jīng)在照片本身的交互上實(shí)現(xiàn)了）。簡化界面移動視覺展示的變化和趨勢移動設(shè)備的屏幕越來越大，但還是要減少不必要視覺元素干擾用戶，特別是對于瀏覽類產(chǎn)品，更注重擴(kuò)大主體顯示區(qū)域。目前有一些移動設(shè)備上的瀏覽器將地址欄放置底部，增加顯示空間，同時讓用戶的操作集中在界面底部。又例如百度手機(jī)瀏覽器WP7版單指滑動工具欄可以縮放頁面，這也是動效的應(yīng)用案例之一，目的同樣也是為了擴(kuò)大主體顯示區(qū)域。全局顯示移動視覺展示的變化和趨勢一些應(yīng)用把界面設(shè)計成層，利用i