人機(jī)交互課件第8章 移動界面設(shè)計相關(guān)問題

移動界面設(shè)計相關(guān)問題一實用的移動設(shè)備界面設(shè)計技巧設(shè)計布局歸根結(jié)底是為了移動設(shè)備用戶的可訪問性、可用性以及整體的可讀性。在布局設(shè)計中，重中之重的一點就是確保在所有移動設(shè)備上（無論其屏幕的大小以及各異的解決方案）的靈活性。內(nèi)容的規(guī)模會根據(jù)屏幕大小而定，解決方案也根據(jù)移動設(shè)備的不同而改變。良好的布局應(yīng)該適用于觸摸屏和非觸摸屏

1布局2順序與規(guī)模一個優(yōu)秀的移動設(shè)備用戶界面設(shè)計具備兩個主要因素。順序就是指設(shè)計中每個要素（如按鈕、textboxes和鏈接等等）的分布順序與層次。這點對于許多移動平臺上用戶與界面交互方式起著相當(dāng)重要的作用。所以設(shè)計或布局中的元素次序的排列必須保證可用性，省略那些傳統(tǒng)平臺上的花哨的設(shè)計。內(nèi)容的規(guī)模也是許多移動平臺的重要因素。比如按鈕或鏈接的大小要與觸摸屏用戶的手指大小相吻合，不過每個用戶的手指大小也是有所不同的。一個大小剛剛好的按鈕會讓所有用戶都能很好地操作。要注意的是，移動設(shè)備上為用戶手指設(shè)計的鏈接和按鈕的大小可與電腦上為鼠標(biāo)鍵盤設(shè)計的鏈接和按鈕的大小要相差很多。3重要性的層次結(jié)構(gòu)

移動設(shè)備的屏幕大小是有限的，所以要合理地利用。也就是說，你需要盡可能的剔除不必要的東西，有一個辦法就是設(shè)計好內(nèi)容的層次結(jié)構(gòu)。可利用字體的大小和顏色等將內(nèi)容分開。要讓內(nèi)容自身表述自己而不是描述內(nèi)容，為此在你的布局和設(shè)計中要盡量刪掉不必要的元素，從而增加可利用的空間，利用這些空間來安置有質(zhì)量的內(nèi)容。4輕量級設(shè)計需要記住的一點是，用戶通過移動設(shè)備訪問你的網(wǎng)站是，他們是為了查看內(nèi)容，而不是為了看你那花哨的布局，而且平添些花哨的設(shè)計會使得訪問更加緩慢。要把用戶想象成正趕著去開會的時候上你的網(wǎng)站查看些信息，他們首先關(guān)注的內(nèi)容。所以強(qiáng)調(diào)輕量級的設(shè)計，提出冗余的設(shè)計元素，將內(nèi)容良好的呈現(xiàn)出來。5重要的內(nèi)容你的網(wǎng)站肯定是具有自己的核心內(nèi)容，不過對于移動設(shè)備上的網(wǎng)站來說，需要呈現(xiàn)的就是你自己的核心內(nèi)容或者是用戶訪問你的網(wǎng)站時經(jīng)常查看的內(nèi)容，不要把你的網(wǎng)站上所有的東西都弄到自己的手機(jī)網(wǎng)站上。6簡單的導(dǎo)航

由于許多移動設(shè)備和平臺提供的瀏覽器往往不具有后退等導(dǎo)航功能，所以在你的手機(jī)網(wǎng)站上其實可以加入這些簡單的導(dǎo)航功能，不過同樣一點是導(dǎo)航不要做得太多，因為這會放慢訪問速度，占據(jù)寶貴的屏幕空間。7不要使用表格許多移動平臺往往不顯示表格，所以不要將表格作為移動網(wǎng)站設(shè)計的主題框架。8平臺監(jiān)測要想讓你的移動版的網(wǎng)站觸及更多的用戶，最好的辦法就是對不同平臺進(jìn)行測試，然后提供各個版本的網(wǎng)站。對自己的用戶的平臺進(jìn)行測試，然后根據(jù)平臺的不同提供不同的內(nèi)容和功能?？傮w而言，在移動平臺的界面設(shè)計上，首先要知道移動設(shè)備的局限性，才能更好的圍繞其進(jìn)行巧妙地設(shè)計。對不同的移動平臺要有一個很好的理解，這樣才能讓你的移動網(wǎng)站能夠適用于不同的移動平臺。同樣你可以利用平臺開發(fā)商提供的模擬器來對你的網(wǎng)站進(jìn)行檢測。二移動界面設(shè)計工具Fireworks這是一個非常高效的屏幕圖像處理軟件。提供了基本的圖形、鋼筆工具，并可以快速的完成顏色的定制設(shè)置，布局便捷。Fireworks是最佳的整合平臺。二移動界面設(shè)計工具PowerPoint提供了大量的預(yù)設(shè)工具與樣式，以滿足基本場景的繪制，并創(chuàng)建不受工具限制的演示修改環(huán)境，同樣這是最優(yōu)體積的解決方案。忘記臃腫的位圖工具吧，這里只有KB級別的wireframe。二移動界面設(shè)計工具AxureRP這是真正稱為專業(yè)意義上的交互設(shè)計工具。復(fù)雜到抓狂，當(dāng)然我們并不是需要搞懂所有的功能。RP即是RapidPrototyping，快速原型。充分利用它的自帶組件，整合到Fireworks與PowerPoint里去吧。二移動界面設(shè)計工具M(jìn)indManager二移動界面設(shè)計工具BalsamigMockups值得一試的IPhone原型工具，你會發(fā)現(xiàn)原型的表現(xiàn)也可以有趣。但只用它去做一些不正式的show。它的模型不夠精確、過于隨意，也不對中文提供支持（或許善用工具的你會導(dǎo)出到Fireworks中二次處理）。二移動界面設(shè)計工具真正熱愛你的所從事的工作?？焖俚挠涗浵敕S時隨地，電子產(chǎn)品總有盲區(qū)。拿一只順手的鉛筆，利其器，善其事。鉛筆與計事本三減少空間占用的一個案例與面向桌面電腦的網(wǎng)頁設(shè)計不同,移動平臺的設(shè)計中,屏幕空間是一個不可忽視的限制因素.設(shè)計需要符合移動平臺用戶的使用習(xí)慣,以最佳的狀態(tài)呈現(xiàn)屏幕信息.改進(jìn)原則去除不必要的提示信息合理減少界面中的文字信息,圖形化界面直觀的使用戶可以完成操作任務(wù).控制字號,使用高亮/對比方式突出類似條目信息有需要充分利用單屏的空間,在不影響文字顯示底線,采用多途徑的設(shè)計方式描述內(nèi)容.合理布局功能控件減少顯示中的控件使用,學(xué)會聰明的隱藏低優(yōu)先級的功能,對于用戶熟悉操作與產(chǎn)品開發(fā)都將是有益的.

如在Iphone平臺善用標(biāo)準(zhǔn)化的actionsheet,在Android中的collapsedmenu限制因素

平臺操作習(xí)慣遵循不同平臺的設(shè)計準(zhǔn)則(你可以從官方的UI開發(fā)指南獲取這些幫助教程),避免將錯誤的理念帶給特定的平臺.如你不會在Iphone的設(shè)計中使用Android/Symbian的Options.熟悉這些原則不僅會使產(chǎn)品易用,善用組合的設(shè)計也將提升操作體驗.屏幕物理屬性

不同尺寸的屏幕不同的UI.要考慮的產(chǎn)品在所有目標(biāo)用戶的不同屏幕的顯示效果.如果要做一個通版的UI設(shè)計,需要重點考慮帶來的負(fù)面影響.觸摸屏是另外一個需要考慮的情況,滑動使得翻頁變的容易,可點擊的元素尺寸是否有必要增大以適應(yīng)大的手指…要知道,mutli-touch目前只是apple的專利.我們需要為特定的這個頁面做些什么這個是一個Android平臺的程序.

這是優(yōu)惠券列表頁面,優(yōu)惠券是我們最重要的顯示內(nèi)容,用戶需要在單屏中預(yù)覽更多的優(yōu)惠券信息.商店信息次之.tab導(dǎo)航將被保持以保證用戶不會迷路.移除標(biāo)題.默認(rèn)收起商店信息,點擊可彈下顯示.為保證用戶對商店信息的初步了解與注意,加入商店名稱.我們將得到右面的界面.四Flow大局觀在移動設(shè)計中，我們需要完善的功能flow，對它認(rèn)知的價值使得flow在整個設(shè)計開發(fā)過程中始終走在前面。完善的flow不僅令功能產(chǎn)品更加易用，帶來良好的用戶體驗，與此同時，也有助于提升開發(fā)效率，不到位的flow將帶來設(shè)計與開發(fā)的反復(fù)，使團(tuán)隊蒙受損失。良好的移動產(chǎn)品flow標(biāo)準(zhǔn)有三個endtoend所謂endtoend是指功能根據(jù)需求設(shè)計需要符合所在平臺的特性，完整的考慮到用戶如何在任何場景下使用操作及完成任務(wù)，提供因為有效或無效操作而帶來的反饋幫助信息。清晰清晰是指整個設(shè)計中不會造成用戶的疑惑，符合平臺特性易于理解的設(shè)計。通常但凡清晰的功能，即使需要付出更多次的操作，value還是高于稍顯混亂的設(shè)計，雖然后者簡化了用戶的操作。整合受限于移動產(chǎn)品的諸多條件，合理的歸納使得產(chǎn)品使用更為流暢。這與清晰并不矛盾，重在調(diào)和。案例簡析功能目標(biāo)：通過列表快速定位城市。該功能從屬于Map視圖，圖標(biāo)以形象的道路指向標(biāo)示。

在mockup中的功能主UI，顯示支持的國家；

點擊任意國家進(jìn)入以首字母排列的城市列表；

點擊任意城市，自動切入到Map視圖并轉(zhuǎn)向相應(yīng)的可視地區(qū)。主UI左上角提供Back鍵，預(yù)留回退。在此可以使用IPhone自帶的Pickers控件，將國家列表橫向置于上方，城市列表縱向置于UI下方。

它的優(yōu)勢在于可以在一屏中解決所有的問題。

但為了更好的使用Pickers，你需要加入更多的諸如SupportedCity等提示信息以區(qū)分兩個Pickers，以及頂部的DoneCancel按鈕，以完善flow。

這使得用戶需要更多的時間來熟悉操作，這不是我們想要看到的。五為了陽光而設(shè)計部分硬件設(shè)備為適應(yīng)光線提供了相應(yīng)的解決方案——屏幕亮度調(diào)節(jié)，可以手動控制屏幕的亮度，適應(yīng)不同的環(huán)境，以及在更高端的設(shè)備上支持的光線感應(yīng)器。

更有貼心的閱讀應(yīng)用的夜晚閱讀模式，這為字體與背景提供了弱對比度的配色設(shè)計。但我們在更多的應(yīng)用軟件中發(fā)現(xiàn)，對光線環(huán)境的設(shè)計需求被忽略。

設(shè)計原則

布局結(jié)構(gòu)清晰清晰的布局結(jié)構(gòu)是對一個應(yīng)用是否可用的基本要求，功能布局層次鮮明，使得新用戶通過低成本的學(xué)習(xí)快速記憶掌握應(yīng)用的功能布局，能夠在短時間內(nèi)完成既定的任務(wù)。內(nèi)容清晰保持圖標(biāo)的簡約以及文字的可讀尺寸，切忌因為過于追求特效與視覺美感，忽略最基本的可讀性。適合的灰度與色彩對比度為不同的環(huán)境模式提供相應(yīng)的對比度設(shè)計，以減少用戶的閱讀疲勞，其中仍需保持內(nèi)容的可讀性。聲音事件的反饋設(shè)計不應(yīng)局限于視覺體驗，在enable操作后觸發(fā)的聲音，會讓用戶確信每一步操作的正確，以及填充某些環(huán)境下視覺設(shè)計的死角。適合的環(huán)境元素參與更多具有感情色彩的元素參與，將賦予界面更多的靈性。將weather的元素加入reader不是一件很溫馨的事情么？GoogleMap清晰的功能引導(dǎo)設(shè)計，綠色、紅色的Pin可以直觀的確認(rèn)目的地與當(dāng)前位置，導(dǎo)航列表簡潔，可以更可靠的工作在日光之下。QQ瀏覽器提供了白天模式/夜間模式的切換，在夜間周圍光線較弱時，一定程度上緩解了視覺疲勞。商鋪點評為室內(nèi)/室外環(huán)境分別做了配色以及字體設(shè)計。在室外的實際應(yīng)用過程中，更大的字體與對比反差帶來了良好的閱讀體驗。并概念性的加入了天氣組件，為出游逛街提供了更多便利。六移動界面隱喻設(shè)計一個簡單的問題，僅僅從展開的iPad文件夾時界面的呈現(xiàn)，你覺得，有多少種方法，可以收縮起這個文件夾？方法其實有三種：點擊（Tap）文件夾圖標(biāo)或者點擊其他區(qū)域；向上拖動（Flick）界面；雙指在兩側(cè)向內(nèi)滑動（pinclose）。第一種也許你早就知道，但后面兩種，你也許會將信將疑地去嘗試這就是隱喻。《iOSHumanInterfaceGuidelines》里面是這樣解釋隱喻對體驗的影響的：當(dāng)你應(yīng)用中的可視化對象和操作按照現(xiàn)實世界中的對象與操作仿造，用戶就能快速領(lǐng)會如何使用它。（Whenvirtualobjectsandactionsinanapplicationaremetaphorsforobjectsandactionsintherealworld,usersquicklygrasphowtousetheapp.）iOS的文件夾更多的像一個抽屜的隱喻，并且，它的頂部還是玻璃材質(zhì)的。從拉開的動畫當(dāng)中，他建立了一個類似抽屜的空間，你一看就明白了。界面與界面之間，并不是簡單的線性關(guān)系界面與界面之間其實是應(yīng)該存在聯(lián)系的，指的這種聯(lián)系是空間感。存在相互之間的層級和邏輯關(guān)系的，而且這種關(guān)系，越符合現(xiàn)實的越好。越容易讓別人理解，越來越不用讓別人學(xué)習(xí)。這就是我們需要做隱喻，我們需要通過它，去表現(xiàn)界面之間的關(guān)系。為什么需要在移動界面中注意隱喻設(shè)計？

1.導(dǎo)航缺失一個觸摸屏手機(jī)的物理尺寸在3.7寸左右，與一張信用卡相當(dāng)。在這么狹窄的空間內(nèi)，不能秉著PC客戶端“在一個主界面內(nèi)完成大部分的任務(wù)”的思想，去設(shè)計移動客戶端。必須把界面分拆。與之而來的問題是，分拆后的界面是有邏輯的，但并不能照搬PC客戶端中的方法：使用任務(wù)欄，層疊的模態(tài)對話框去表現(xiàn)這種邏輯。把界面拆分得更多獨立化，讓界面變成卡片式，一個界面只完成一項任務(wù)，保證界面之間聯(lián)系的單一化，避免界面之間邏輯，或者跳轉(zhuǎn)的混亂。2.缺乏物理力學(xué)反饋傳統(tǒng)的手機(jī)上，用戶使用鍵盤去操作屏幕上的視覺對象，鍵盤在這個階段中，扮演的其實是用戶操作行為的翻譯器。而iPhone的出現(xiàn)砍掉了這種操作行為的翻譯，變成直接觸摸，這是一項偉大的進(jìn)步。iPhone雖然縮短了操作行為的執(zhí)行階段，但卻給操作行為的反饋階段帶來了麻煩：只有視覺反饋，手指觸摸的物理力學(xué)反饋消失了。手指不再能夠感受到鍵盤按下的物理力學(xué)壓力，甚至假設(shè)你手指粗壯一點，你就幾乎沒法看見按鈕是否被按下。而在輸入時，這種情況尤甚，鍵盤手機(jī)上有著悠久歷史的高效的“盲打”輸入方式只能進(jìn)入歷史的存檔中。因此，我們更多的需要利用用戶的視覺和聽覺，去提供反饋。隱喻設(shè)計內(nèi)容

1.擬物化視覺外觀與聽覺反饋隱喻設(shè)計的第一步，從應(yīng)用的外觀著手，如果可以的話，你應(yīng)該考慮應(yīng)用的外觀表現(xiàn)出真實物理的肌理材質(zhì)，以及合理的光影效果，并且，得正確的顯示界面的元素的相互之間的空間層次感。另外我們不能忽視的一種擬物化設(shè)計：音效。它不僅是對缺乏物理力學(xué)反饋的一種彌補(bǔ)的手段，當(dāng)屏幕處于關(guān)閉狀態(tài)下時，擬物化的音效更能讓用戶了解當(dāng)前用戶的狀態(tài)。解鎖屏幕的聲音、敲擊鍵盤的聲音，以及照片拍攝的聲音。這都很好的擬物化音效。擬物化的外觀很大程度上降低了用戶的認(rèn)知成本，無需閱讀額外的文字，用戶只要看到軟件的樣子，就知道它的用途。2.即時反饋假設(shè)，你在觸摸屏的設(shè)備上，使用手勢執(zhí)行某項操作，但界面上沒有任何的反饋。你就不得不去猜測一下，你遇到的是下面的那種情況：你的操作手勢有誤，軟件無法響應(yīng)程序當(dāng)機(jī)了，暫時沒有響應(yīng)對于情況二，很抱歉，我們也許實在無能為力。但是對于情況一，我們得有必要討論一下，如果反饋用戶操作手勢有誤，并指引或者幫助用戶到正確的操作中了。由此看來，傳統(tǒng)網(wǎng)頁上使用的反饋方式，移植到觸摸屏設(shè)備上，實在是水土不服。移動設(shè)備最好的錯誤反饋，應(yīng)該是即時跟隨用戶的手勢操作的。如上圖示意，這才是一個觸摸屏上，應(yīng)該具備的一種反饋，它即時響應(yīng)了用戶的手勢動作(即使可能是錯誤的)，而當(dāng)用戶釋放操作時，又自動回歸到正確的操作結(jié)果中來。3.流動式動畫傳統(tǒng)的軟件界面之間的切換表現(xiàn)得較為粗暴，大部分情況下，他只顯示命令執(zhí)行前和執(zhí)行后兩個界面，而忽略了他們之間的那段過程。而在真實世界中，倘若沒有這個過程，你甚至很難理解過程兩端的界面，是如何聯(lián)系起來的。隱喻設(shè)計的評判標(biāo)準(zhǔn)

1.符合現(xiàn)實邏輯的界面空間流動式的動畫成為隱喻設(shè)計的最后一塊拼圖，但是我們僅僅把拼圖拼起來是不夠的，我們還需要檢驗，這樣的拼圖是否符合真實世界的邏輯。Flipboard始終如一地采用翻頁的動畫效果，無論是從首頁進(jìn)入，抑或是從某個訂閱源中返回。甚至還精細(xì)的制作了三種翻頁動畫效果：只翻動一頁，翻動兩頁，翻動三頁和以上；給以用戶這樣一種感覺：我訂閱的所有內(nèi)容，是一本雜志任何頁面都沒有互相從屬的關(guān)系，只有先后秩序的關(guān)系在首頁上的方塊型的東西，等于雜志的目錄而國內(nèi)的同類產(chǎn)品雜客，所呈現(xiàn)的界面空間卻稍有不同，整體上，像是一個時刻變換封面的雜志柜。從雜志柜進(jìn)入雜志的過程動畫，有點粗暴且難以在現(xiàn)實生活中找到相關(guān)性。若此過程動畫能與iBooks打開書籍的動畫類似或相同。也許更加符合現(xiàn)實邏輯。2.自圓其說

簡單來說，你的界面是如何進(jìn)入用戶的視眼，也應(yīng)該以相反的方式，從界面中消失，并且，這個過程，是能夠自圓其說的，且符合真實生活的隱喻的。

3.響應(yīng)用戶的直覺手勢

移動設(shè)備最大的特點是：直接操作。如果你設(shè)置了你的界面是從下方推入，那用戶可能會直覺性的認(rèn)為，我把新界面向下拉，這個界面即可消失。從圖可以看到騰訊愛看成功的照顧到了用戶從隱喻設(shè)計中所得到的直覺性手勢，只需向下拉，用戶就可以關(guān)閉此界面。從外觀上看，評論界面都處于主界面之下，而動畫效果都屬于主界面向下拉伸，評論界面向上推至界面頂部。但是zaker的同樣響應(yīng)了用戶的直覺性手勢，只需在正文界面中，向下拖動，即可激活評論界面，這不得不算是在twitter客戶端上的一種進(jìn)步和超越。七手機(jī)交互設(shè)計原則

1考慮屏幕尺寸和分辨率手機(jī)屏幕尺寸分為物理尺寸和顯示分辨率。物理尺寸是按英寸對角線計算。顯示分辨率指的是屏幕圖像的精密度，是指屏幕所能顯示的像素的多少。顯示精度是每英寸上可以顯示像素（DPI）。NOKIAN78的物理尺寸為2.4英寸，顯示分辨率為240*320像素；HTCT7278的物理尺寸為2.8英寸，顯示分辨率為480*640像素。一款軟件適配所有分辨率的手機(jī)難度較大，勢必需要先挑選主流分辨率進(jìn)行設(shè)計，在此基礎(chǔ)上適配其他分辨率的手機(jī)。

2視覺重點自上而下大多數(shù)情況下瀏覽者看電腦屏幕時都不由自主的以“Ｆ”形狀的模式閱讀網(wǎng)頁，而手機(jī)屏幕很小，顯示能力有限，屏幕上內(nèi)容盡收眼底，閱讀文字時自上而下，因而信息的重要性也是從上到下依次排列。3界面簡潔手機(jī)屏幕的顯示能力有限，使用物理按鍵時，無法像電腦或者觸摸屏那些跳躍式操作，必須依次切換控件的焦點，例如手機(jī)界面中的翻頁程序，用戶使用最多的就是“下一頁”，將“下一頁”放置為第一個控件便于用戶操作，方案1優(yōu)于方案2。界面簡潔的途徑：減少控件的數(shù)目，使程序的主功能顯然易見，引導(dǎo)用戶操作。當(dāng)內(nèi)容過多時，要突出重要信息，便于用戶快速瀏覽。顯示出錯信息時，不要只告知用戶程序出現(xiàn)錯誤，要提供有用的信息引導(dǎo)用戶完成操作。手機(jī)上網(wǎng)的速度慢，一般在6k/s，這就要求頁面的內(nèi)容盡量精簡，避免過多的圖片。頁面的內(nèi)容控制在兩屏以內(nèi)，也不能空白。比如當(dāng)用戶支付電影票之后，不能只顯示“支付成功”，可以引導(dǎo)用戶使用其他功能。簡潔要求文字描述簡練，但也要充分利用手機(jī)屏幕上僅有的顯示空間。

例如iPhone的搜索欄，搜索框用于內(nèi)容搜索，點擊之后會顯示虛擬鍵盤，除了左邊默認(rèn)的搜索圖標(biāo)之外，搜索欄還包含其他元素。占位符文本?？梢蕴嵝延脩羲阉鳈诘墓δ埽ɡ纭癝earch”）或者搜索的內(nèi)容（如Google或YouTube）。書簽按鈕。記住用戶的搜索內(nèi)容，如在地圖搜索中，書簽按鈕可以快速地查到已標(biāo)記位置、最新搜索的內(nèi)容和聯(lián)系人。默認(rèn)在搜索欄上用戶沒有輸入文本