機界面設計指導手冊 目錄 一、 二、 三、手機交互設計評估標準 一、 一、 用 果是文本，使用 分辨率屏幕 創(chuàng)建（縮小總比放大好） 準則 字導航鍵 /軌跡球 ） 6. 要正確管理活動（ 7. 要正確處理屏幕方向變化 8. 要使用主題 /樣式、尺寸和顏色資源來減少界面冗余 9. 要和視覺與交互設計師合作 九要 （設計理念） 設計理念 3. 一致，吸引人，少量簡潔的變化 4. 使用云端服務來加強用戶體驗 （更早、更頻繁的由真實用戶來測試） 用戶通常是任務導向 （多給予用戶進度提示，但是不要干擾他們當前的操作） 如果用戶完成一項任務需要復雜的操作，重新思考你的設計 ! （行為模式遵循用戶的期望） （使用合適的方式來加強功能可見性） （允許回退（ 使用確定對話框更好） （只允許有意義的操作） （盡量減少不可回退的操作） 設計上的考慮因素 1. 屏幕的物理尺寸 2. 屏幕密度 3. 屏幕的方向（豎向和橫向） 4. 主要的 屏還是使用 5. 軟鍵盤還是物理鍵盤 設計上的考慮因素 6. 了解不同設備之間的相異之處是非常重要的 ! 7. 閱讀 容性定義文檔），了解設備可能的差異 8. 了解屏幕尺寸和密度分類（網絡資料） 良好的界面設計原則 1. 隱喻 2. 反映用戶的心智模型 3. 直接操作 4. 動畫效果（ 5. 看和點擊 6. 用戶控制 7. 反饋和交流 8. 容錯性（ 10. 控制你程序的復雜性 使用相對布局管理界面元素。 相對布局和線性布局是 性布局比較簡單，而相對布局可以做出比較復雜的布局管理，所以僅僅了解線性布局，很多時候是不夠的。 過這可能是跟移動平臺的性能考量有關系。 使用資源修飾符來修飾同一套資源的多個不同版本。 1，一個 2，系統(tǒng)在運行時會根據軟硬件環(huán)境來自動選擇相應修飾符版本的資源。 最常用的修飾符可能是 作多語文本）， 不同密度的屏幕制作不同尺寸的圖標和皮膚）， 橫屏和豎屏提供不同的 如果系統(tǒng)找不到對應的修飾符版本，它就會選擇無修飾符的版本，這個版本通常也是所謂的默認選擇。 使用 9 1， 9語法跟 似 2，根據邊緣的像素寬度切割出不同的拉伸區(qū)域 3，最好同時提供 版本 ” 點九 ”詳解 智能手機中有自動橫屏的功能 ,同一幅界面會在隨著手機 (或平板電腦 )中的方向傳感器的參數不同而改變顯示的方向 ,在界面改變方向后 ,界面上的圖形會因為長寬的變化而產生拉伸 ,造成圖形的失真變形。 【 普通拉伸和點九拉伸效果對比 】 1. 安裝工具 方法 1 方法 2：直接使用 程圖如下 如流程圖所示，相對與 方法 1，只需 2個步驟就可得到 .體步驟為： 1. 確定切圖后直接改變圖片的畫布大小， 2. 手動將上下左右各增加 1. 使用鉛筆工具，手動繪制拉伸區(qū)域，色值必須為黑色（ #000000）。 4. 存儲為 擇 存時手動將后綴名改為 .過這種方法的缺點是不能實時預覽，判斷并測試拉伸區(qū)域的準確性。 二、 焦點和菜單 在觸摸模式里沒有鼠標焦點，只有軌跡球。 臺里沒有鼠標焦點。軌跡球滑過顯示選擇狀態(tài) 。 主菜單應該包括全部功能；它們與活動聯系一起形成整體。 菜單上的圖標按重要性排序 。如果有 多于 5 個圖標，使用點擊 單 來查看那些不太重要的菜單項。 上下文菜單（長按）集中在一個特定對象 。 總是把那些與所選項最相關的行為放在長按菜單的頂部。 需要記住的幾點： 設計時要考慮 速度和簡潔 盡量分層來分等級 屏幕上的 活動盡量最小 使用下載進度條，下載數據時，而不是讓用戶等待去看一個加載完全的頁面。 考慮活動流而不是線性行為 屏幕上的行為 計了特定的行為方式。在你的應用程序里利用好這一點。應該堅持為的標準，避免混淆用戶。 表達 細節(jié)使得產品集中在細節(jié)。要遵循程序的美學將注意在那些 應用體驗核心的關鍵任務上。 行為與任務 程序 一個 些行為是相關的，但沒有嚴格的界限。 行為 行為是 序主要組塊，可以從創(chuàng)造的行為和其它 S 可用行為中裝配一個應用程序。 每個行為都應該被設計成只有一個用途 ， 例如照相，查找通訊錄，或讀郵件。 顯示用戶界面的程序包括一個或多個行為。當使用 備時，隨著用戶在用戶界面移動，就會一個接一個的觸發(fā)這些行為，對他們來說應該是一個 無縫的體驗、一個行為接一個行為，一個任務接一個任務 。這就像前面提過的行為流一樣。 要記住到任應該連在一起來形成一個整體并且是聯系的用戶界面。如果你的行為不遵循基本的交互設計原則，與系統(tǒng)行為流關聯時，那么用戶可能會因為缺少連續(xù)性而感到困惑和沮喪。 一個行為處理一個特定的內容（數據）類型，并且接受一系列相關的用戶行為。 行為流 用戶從一個行為到另一個行為，通過程序， 統(tǒng)會以線性導航歷史的形式記錄用戶已經訪問過的行為 。 這就是行為流，也叫做返回流（ 。 總的來說，當用戶開始一個新行為時，它就被加在行為流上，所以按返回鍵就會顯示以前的行為 戶使用返回鍵只能返回到上一次行為直至首頁，到首頁后不能繼續(xù)返回。 行為只是可以加到行為流上的那些行為， 但 些都不能添加到行為流。 任務 一個任務是一系列行為組成，使用這些行為來實現用戶的使用目標，不論這些行為屬于哪個應用程序的。 直到一個新任務被明確的定義，所有的用戶開始的行為都被認為是目前任務的一部分。 啟動任務的行為稱之為根行為（ ，一般來說，任務通常從應用程序啟動、桌面快捷方式或切換到“最近的任務” 用戶可以和啟動任務時一樣，通過從 返回到任務。 中斷任務 任務的一個很重要的功能是用戶可以中斷他們正在進行的任務，來進行另一個任務，同時，可以返回原來的任務，繼續(xù)完成它。這就說，用戶可以相繼進行多個任務，然后在他們之間轉換。 隱喻 隱喻是構建一個基于 操作任務心智模型 的模塊；用它們來傳遞應用程序的概念和功能。 基于真實世界的應用對象可以幫助用戶很快的理解該應用程序。當你設計你的應用程序時，要注意 存在的 隱喻，不要重新定義 它們。 同時，檢查應用程序執(zhí)行的任務，看是否有些自然隱喻可以使用。 反映用戶的心智模型 尊重用戶已經養(yǎng)成的行為習慣和操作流 比如說，用戶在真實世界里有寫字、寄信的經驗，也會產生特定的期待，像寫一封新的信，選一個接受者，然后寄出信。 一個忽略用戶心智模型的電子郵件程序用起來會很困難和不舒服。 這是因為程序 強加給用戶一個不熟悉的概念模型，而不是建立一個用戶已有的知識經驗模式 。 在設計程序用戶界面之前，試著去發(fā)現你的用戶的心智模型 ,這樣幫助用戶去執(zhí)行任務。 心智模型中內在的隱喻，它代表了任務的概念組成。 在寫信這個例子中，隱喻包括信件、郵包和信封。在涉及到照片的任務的思考模式中，隱喻包括照片、照相機和專輯。 我們要努力地發(fā)現用戶的期望，包括 任務組成、組織、窗口布局的工作流、菜單和工具欄組織、控制面板的使用。 要努力把個下面的特征與用戶心智模型相融合： 用戶的心智模型主要是建立在經驗的基礎上 一項任務的心智模型通常是流線型，關注任務的基本組成部分。盡管對于一個給定的任務有很多可選的細節(jié)，但是基本的組成部分占大部分，并且不會占用用戶的注意。 免 子菜單中過深的隱藏或者只在上下文菜單中可用。 通過提供怎樣使用用戶界面控件的線索來鼓勵你的用戶區(qū)發(fā)現一些功能。 直接操作 直接操作意味著人們感覺他們正在 控制 一些可觸的事情而不是抽象的。 直接操作的好處是當用戶可以直接操作對象時，他們能 更好的明白自己操作的結果 。用多點觸控來提供給用戶一種深刻的直接操作的感覺。 以通過合理的使用單點觸控來提供給用戶大部分直接操作的體驗。 為了在你的程序里加強直接操作的感覺，要確保： 當用戶在屏幕上操作對象時，那些對象仍是可見的。 用戶操作的結果要立即可見 動畫效果（ 動畫會增加用戶與設備的使用感。 通過使用 “狗耳朵”原則 ，可以給用戶一種“突然感”。 當一個狗停止跑動時會發(fā)生什么呢？它的耳朵會繼續(xù)運行然后被反彈回來。要使你的用戶界面有這種生動的感覺。比如說，當 換到另一個程序或者接一個電話時，會停止播放音樂。 另一個例子是 不同。 當用戶使用滾動條到達列表的底端時，滾動條會突然停在 ，但是， 在，如果這時繼續(xù)向下拖動滾動條，滾動條會有反彈的效果。 供真實世界的感受，但 有，只是撞到墻上并立即停止?？雌饋硎且患苄〉氖虑椋诼撓涤脩舴矫?，卻有很大不同。嚴肅的講，使用 會，你就會喜歡上動畫效果。 看和點擊 用程序比人優(yōu)勝的地方在于，它能更好的記住列表選項、命令、數據等等。使用列表格式中陳現選項，可以充分利用它的優(yōu)勢，使得用戶可以很容易的瀏覽這些選項并進行選擇。 盡量減少文本輸入。 用戶控制 讓用戶（而不是程序）來觸發(fā)和控制動作 . 要使動作簡單直接，使用戶可以容易的理解和記住。 使用用戶已經熟悉的標準控制和行為。 它們的關鍵在于提供給用戶他們需要的功能， 同時幫助他們避免危險和不可逆轉的動作 . 比如說，如果用戶可能會突然損壞數據，那么你就要提示一個警告，但是如果用戶他們選擇繼續(xù)，那他們就可以繼續(xù)操作。 反饋和交流 在長時操作中，當用戶操作時，他們需要 及時的反饋和狀態(tài)報告 。你的程序應該提供一些 可見的變化 ，這些變化根據每個用戶的動作而變化。比如說，在列表中，當用戶按下時，應該要高亮顯示這個選項，使用戶知道他們的觸摸已被觸發(fā)。 動畫效果是提供用戶反饋的一種很好的方式。 容錯性（ 要通過建立容錯性來鼓勵用戶探索你的應用程序，就是說， 使每個動作很容易可逆。 當用戶操作一項任務，當一項任務會引起不可逆操作而丟失數據時，要出現一個警告來提示用戶 。要能預期常規(guī)的問題，然后警告用戶那些潛在的負面影響。 整體審美效果 整體美觀是指 信息被很好的組織 ，要根據視覺設計原則保持一致。也是關于整合了功能的應用程序的外觀。外觀對功能有很大影響 。一個混亂或不合理的程序很難理解和使用 。 整體布局和用戶界面元素 _的設計 都應該反映了用戶使用應用程序任務時的 心智模型 。 控制你程序的復雜性 開發(fā)易用軟件的最好的方法就是使設計盡量簡單。你的程序任務越復雜，保持用戶界面簡單和被注意到就越重要 種布局形式 大布局 有五種布局方式，分別是： 幀布局） 線性布局） 對布局） 對布局） 格布局） 標簽布局（ 線性布局） 線性布局框架圖 表格布局示例 表格布局 然也可以是普通的 隱藏的列 ) 伸展的列） 收縮的列） 表格布局框架圖 相對布局（ 子控件會根據它們所設置的參照控件和參數進行相對布局。參照控件可以是父控件，也可以是其他子控件，但被參照的控件必須要在參照它的控件之前定 相對布局 意 前時間 )的定義位置 相對布局框架圖 單幀布局 用 當用 幀布局示例 標簽布局（ 是一個 素，就像在 絕對布局 （ （ 子控件需要指定相對于此坐標布局的橫、縱坐標值，否則將會像 標布局示例 從高層到低層分別是 應用程序層、應用程序框架層、系統(tǒng)運行庫層和 盡可能的使用 供的標準界面元素，并且遵循建議的用法。 用戶習慣了標準視圖和控制的外觀和行為。如果你使用標準界面元素，當用戶學習使用你的程序時，他們就可以依靠他們以前的經驗來幫助他們學習 狀態(tài)欄 包括電池狀態(tài)、時間、網絡和信號強弱等 . 它也會對用戶顯示提示圖標。 建議 ：除非有充分的理由，否則不要隱藏狀態(tài)欄。 利用提示系統(tǒng)，并在狀態(tài)欄里顯示提示的圖標。 會提供一個界面來導航不同視圖。 在程序里， 可用的。它們可以作為應用程序除了菜單之外的另一種導航方式。 建議 在你的 要用容易理解的 灰階圖片 。比如， 通訊錄 要文本結合圖片，使得 功能更容易理解。要確保文本很小，可以合適于 量最好是 4 個 ，多于 4 個會使得讀和點擊變得不容易。如果程序只是在橫屏下使用，那么就要多加幾個 如果你使用 么它們最大程度上對用戶是可用的。如果在你的程序里移動它們，那么就會使界面變得不連續(xù)，用戶會感到困惑。 例子 通訊錄 分利用了 每個 有一個簡單的灰階圖片 和 t 文字 , 使得用戶可以很快理解它們的功能。 這些 用 撥號器 , 記錄 ,聯系人 ,收藏 這些暗喻與用戶心智模型連接非常匹配 除非這個程序只在橫屏模式里用，否則 多了。 用戶很難點擊 明白 作用。 列表視圖 一個列表視圖以單列多行的方式顯示數據。 每一列都包含了 文本、 圖像和 列表視圖可以組織大量的數據。當用戶選擇了一個項目時，就會提供反饋。 列表中的選項以短暫的高亮顯示來顯示已被選中， 然后所選中的功能被觸發(fā) . 建議 當選中信息時，用標識圖片（ 表示，而不是把整列都強調 。 記住在豎屏模式下， 在觸摸模式里，沒有當前選中的項目（ 如果每一列都需要顯示綜合信息項，就要考慮用三欄布局。 示例 第一欄中可以 激活一個多任務模型，會彈出一個三個按鈕的工具欄 。 這個工具欄只有當列表視圖里一個或多個選項背選中時才會出現。它可以允許用戶在郵件箱里很快執(zhí)行一個動作。用戶也會發(fā)現 （ 單按鈕會提供跟多郵件相關的選項。 對于那些通過點擊 發(fā)現它的用戶來說，這些功能是很好的。 第二欄顯示標題和郵件的發(fā)送者。你會注意到已讀和未讀的信息，它們的顏色是不一樣的。顏色是一種很好的方式來顯示更多的信息，而不用使用任何屏幕的硬件 也會顯示郵件信息收到的時間。 覽器中的歷史標簽時有可能的歷史數量非常多。 以注意到他們使用和 序里相同的三欄布局。 網格視圖（ ?。┛丶?用法和行為 支持下拉列表的 用戶點擊界面中下拉表項，列表視圖格式里就會顯示列表值。 在屏幕上顯示列表， 懸浮在 頂端 。 用戶可以通過點擊列中的任意位置來選中他們想要的值， 點擊后回到原來頁面 ，被選中的值就會在 不要多于 16 個值 ，這個用戶就可以只用手指來 滾動三次或少于三次 單選框控件 對其內的單選框控件做分組 指定組內被選中的單選框的 對話框 對話框示例 日期選擇對話框 進度條對話框 當需要在后臺做很耗時的工作時，給用戶顯示一個進度條是一個很友好的選擇。因為其他線程是無法更新用戶界面的，所以一般我們在 更新我們的進度條。 菜單設計 指南 設計指南 正確選擇菜單的呈現方式 ,保持菜單的一致性 ,是設計優(yōu)秀程序的關鍵因素 . 優(yōu)先安放最頻繁使用的操作 屏幕高度有限 ,一些菜單會滾動 重安放重要的指令在首項 選項菜單 ,在 圖標選項菜單 上 優(yōu)先排列最頻繁使用的操作 不要僅在 關聯菜單 上安放指令 如果用戶無需使用 關聯菜單 就能夠完全使用你的程序 ,那么你設計得非常好 ! 關聯菜單 不是特別容易發(fā)現 . 關 聯菜單 的首項指令應是最直觀的 弱化 或隱藏當前內容的不可用菜單項 選項菜單 內 禁用無效的菜單項 ,讓其變灰 . 關聯菜單 內 隱藏無效的菜單項 而用戶也僅能看見可使用的選項 關聯菜單 首項指令的功能最好與直接點擊時所產生的功能一致 選項圖標菜單多使用短名稱 圖標選項菜單 里某個文本標簽過長 ,系統(tǒng)會將它攔腰截斷 ,最佳的方法是保持名稱簡潔 . 關聯菜單 和被選中項須有所聯系 用戶長按某個項 ,彈出的 關聯菜單 應包含被選中項的名稱 ,這樣用戶才清晰地知道關聯了什么 . 把一些指令放入菜單里 ,就能讓屏幕 空出位置而顯示更多內容 僅將最重要的指令固定在屏幕上 對話框不該有 選項菜單 顯示對話框后就不能有 選項菜單 顯示對話框的 )過程中無法啟動另一個全局任務 (而這也是對 選項菜單 的規(guī)定 ). 分離全局指令的特定選項 選項菜單 內 ,適合安放全局性控制 當前 進程 的指令 ,或者將指令固定顯示在屏幕上 ; 關聯菜單 內 ,適合安放針對當前被選中項的指令 .(無論如何 ,指令也可以作為 進程的一部分來運行或啟動另一個 進程 .) 圖標選項菜單 擴展選項菜單 上下文菜單、關聯菜單 選項菜單 在選項菜單中包含了應用于當前活動的全局性主要功能或開啟相關活動。 通常是通過用戶按下“ 的硬按鈕來調用。 在大部分的手機上 ,用戶按下 ”鍵就會在屏幕下方顯示選項菜單 鍵或 ” 返回 ” 鍵就會關閉選項菜單 . 想要關閉任何菜單都可統(tǒng)一使用 ” 返回 ”鍵 .(重復按 ”鍵或者點擊屏幕空白處也能實現同樣效果 .) 并需要注意在不同手機上的操作方法 . 選項菜單示例 選項菜單示例 圖標選項菜單 初次按下 屏幕底部會顯示幾個帶圖標且不可滾動的網格 .(個典型按鈕 .) 擴展選項菜單 如果這個進程的菜單項很多 (超過 6個 ),選項菜單的最后一個圖標會標記 ” 更多 ” 選中后會彈出一個包含多個菜單項目的列表 ,此列表有時還可以滾動 . 上下文菜單、 關聯菜單 上下文菜單包含了當前選定項目的次要功能。它通常是通過用戶 長按一個 元件 來調用的。 上下文菜單的每個元素依然是菜單項，但它 并不支持顯示圖標和設置快捷鍵 。 上下文菜單 還可設置頂部標題 關聯菜單其實是 被選中內容的一些可操作指令的列表 . 指令也可以成為當前進程的一部分 ,系統(tǒng)也能通過被選中內容去啟動另一個進程進行操作 . 使用 關聯菜單 被認為是快速執(zhí)行常規(guī)操作的一種捷徑 起某些常顯式的按鈕或 選項菜單 ,出現的機會更 少 聯菜單 關聯菜單 上的每個指令也應該在界面上利用多種形式直觀地顯示 “選擇文字 ” 這種操作指令也許只在 關聯菜單 出現 比如瀏覽器之類的富互聯網應用 ,或某些包含聯網的應用 ,關聯菜單 上的一些些指令在其它地方也無法使用 . (慎用 關聯菜單 這種隱性操作 ,因為在交互設計里面 ,操作分兩種 :顯性與隱性 ;隱性操作無法明確被操作對象的關系和產生的結果 ,所以大家就明白了為何手機上的左右軟鍵在屏幕上面有軟鍵功能名稱 ) 關聯菜單 上的文本指令 任何內容的 文字鏈接 與 文字區(qū)域 ,系統(tǒng)都統(tǒng)一提供一些操作選項 ,并且適用于所有程序 : 比如 “選擇全部” ,”選擇文字” ,”復制全部” ,和 “添加至字典”這幾個指令 則會有另外的操作 ,比如 “剪切全部” 與 “切換輸入法” 則會顯示”粘貼” 字鏈接 與 文字區(qū)域 中的 關聯菜單 自動插入適當的菜單項 ,就如下圖所示 . (不同場景中 ,菜單上的項目也有相應的變化 ,以便于使用 ) 選項菜單 與 關聯菜單 的區(qū)別 選項菜單 適用于 全局性的控制 ,而 關聯菜單 適用于 內容項 用戶通過操控菜單 ,然后點擊菜單項來執(zhí)行一個動作或打開一個對話框 . 合理安放菜單 ,需要細心思考菜單的 : 詳見（ 五、手機交互設計的評估標準 1、產品架構是否清晰 用戶進入產品，就可以一目了然的知道產品是 干什么 的，有 幾個功能模塊 ， 模塊之間怎么切換 。 產品層級較深的，設計師要清楚的了解有 產品有多少個二級頁面，多少個三級頁面 。這些 二級頁面和三級頁面的架構 ，是 復用一級頁面的，還是有自己的架構 。 架構 評估標準 產品 結構清晰 ，沒有不必要的層級 能 快速了解 產品有幾個 主要頁面 所有 主要部分 都能夠 通過首頁訪問 清晰的 指示當前的位置 2、產品流程是否清晰 要想表現層越簡單，背后的邏輯層可能就越復雜。 評估流程的時候，不以背后的邏輯層復雜度來評估，而是以 表現層的簡潔度來評估 的。 如一個發(fā)布帖子的流程，總共需要幾個步驟，涉及到幾個層級（一級頁面到二級頁面到三級頁面 ）。 不是步驟越少、層級越淺就是好的設計。而是 要簡單、明確、