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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

設(shè)計(jì)原則

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

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

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

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

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

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

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

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

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

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