人機交互課件第8章 移動界面設計相關問題

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

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

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

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

如在Iphone平臺善用標準化的actionsheet,在Android中的collapsedmenu限制因素

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

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

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

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

點擊任意國家進入以首字母排列的城市列表；

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

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

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

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

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

設計原則

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

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

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

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

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

3.響應用戶的直覺手勢

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

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

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

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