.統(tǒng)的設(shè)計(jì)規(guī)范,它們明確描述了 各自提倡的界面布局及UI 組件。 這些文檔的目標(biāo)讀者是設(shè)計(jì)師與 軟件工程師。設(shè)計(jì)師在設(shè)計(jì)應(yīng)用 界面時(shí),原則上應(yīng)遵循這些設(shè)計(jì) 規(guī)范。此外, 還提供了 可編輯的UI 及圖標(biāo)數(shù)據(jù),筆者 建議大家在開發(fā)時(shí)充分利用這些 內(nèi)容。
各操作系統(tǒng)的設(shè)計(jì)規(guī)范不僅 包含各平臺的UI 設(shè)計(jì)習(xí)慣,還 介紹了該平臺蘊(yùn)含的UI 設(shè)計(jì)思 想。筆者建議所有要開發(fā)智能手 機(jī)應(yīng)用及站點(diǎn)的設(shè)計(jì)師都去閱讀 一下這些設(shè)計(jì)規(guī)范。
本書將介紹各平臺的UI 特
點(diǎn)及相應(yīng)的設(shè)計(jì)規(guī)范。大家應(yīng)當(dāng) 在閱讀本書的同時(shí),參閱相關(guān)的 設(shè)計(jì)規(guī)范文檔,進(jìn)一步加深對UI 的理解。閱讀設(shè)計(jì)規(guī)范還有助于 了解當(dāng)前智能手機(jī)的功能。
本書基于2013 年2 月的設(shè) 計(jì)規(guī)范所寫。①設(shè)計(jì)規(guī)范常會(huì)隨操 作系統(tǒng)的版本升級而變化。尤其 是, 在版本升級之后, 其設(shè)計(jì)規(guī)范及基本組件都發(fā)生了 巨大的變化。不過在 4.0 (Ice Cream ) 之后, 平臺的公開文檔漸趨完 善,其設(shè)計(jì)規(guī)范也基本穩(wěn)定。在 本書中,筆者將各平臺的設(shè)計(jì)規(guī) 范文檔簡稱為規(guī)范。
① 中文版根據(jù)最新的iOS 7 設(shè)計(jì)規(guī) 范對全書內(nèi)容作了更新。 ——譯者注
智能手機(jī)應(yīng)用與智能手機(jī)站點(diǎn)
本書將分析并總結(jié)智能手機(jī) 應(yīng)用與智能手機(jī)站點(diǎn)的UI 設(shè)計(jì) 問題(從應(yīng)用程序的角度來看, 我們可以將其稱為原生應(yīng)用與 Web 應(yīng)用)。
上述兩者的開發(fā)方式和執(zhí)行 環(huán)境各不相同,能夠?qū)崿F(xiàn)的功能 也有所差異。筆者建議設(shè)計(jì)師根 據(jù)不同的服務(wù)目的選擇合適的類 型,發(fā)揮其優(yōu)勢。不過,如今越 來越多的服務(wù)開始為智能手機(jī)站 點(diǎn)及應(yīng)用提供統(tǒng)一的UI。對用戶 來講,他們會(huì)在相同的情景中接 觸這些UI,并不會(huì)覺得有什么區(qū) 別。因此,本書不會(huì)區(qū)分這兩類 應(yīng)用, 而以UI 組件為切入點(diǎn), 對兩者的特征進(jìn)行討論。
智能手機(jī)應(yīng)用
用戶可以從應(yīng)用商店下載智 能手機(jī)應(yīng)用,將其安裝至自己的 智能手機(jī)中,以供今后使用。
本書將以智能手機(jī)應(yīng)用、應(yīng) 用、iOS 應(yīng)用或 應(yīng)用等 名稱來稱呼這些手機(jī)應(yīng)用。 與智能手機(jī)站點(diǎn)相比,智能 手機(jī)應(yīng)用在動(dòng)作流暢性、畫面 表現(xiàn)力和功能多樣性上都更加 出色。
智能手機(jī)站點(diǎn)
與PC 站點(diǎn)一樣,智能手機(jī) 站點(diǎn)也需要通過瀏覽器訪問。 iOS 的默認(rèn)瀏覽器是系統(tǒng)預(yù)裝的 。 手機(jī)沒有規(guī)定默 認(rèn)瀏覽器,不同設(shè)備可能會(huì)使用 不同的瀏覽器。但據(jù)說 今后將把 for 定 為默認(rèn)瀏覽器。
本書將以智能手機(jī)站點(diǎn)、站 點(diǎn)等名稱來稱呼這些網(wǎng)站。 與智能手機(jī)應(yīng)用相比,智能 手機(jī)站點(diǎn)的表現(xiàn)力及功能略顯遜 色,但它的即時(shí)性較高,且具有 較強(qiáng)的服務(wù)關(guān)聯(lián)性。如圖3 的 Map 和圖4 的 所示,最近,越來越多的智能手 機(jī)應(yīng)用和智能手機(jī)站點(diǎn)采用了相 近的界面設(shè)計(jì)。
智能手機(jī)UI 概覽
在智能手機(jī)UI 設(shè)計(jì)領(lǐng)域, 人們定義了一些基本的界面區(qū)域 及用戶操作行為。本章接下來將 介紹本書涉及的各種UI 組件的 基礎(chǔ)元素。第2 章將詳述它們的 主要特征及其用途。
1 頁眉()
頁眉指的是智能手機(jī)應(yīng)用或 針對智能手機(jī)設(shè)計(jì)的網(wǎng)站①的頂 部區(qū)域(對智能手機(jī)應(yīng)用來講, 頁眉是位于狀態(tài)欄下方的區(qū)域。 對手機(jī)站點(diǎn)來講,頁眉是位于地 址欄下方的區(qū)域)。智能手機(jī)應(yīng) 用又可分為iOS 應(yīng)用與 應(yīng)用,兩者的基本布局也有所不 同。手機(jī)站點(diǎn)的頁眉通常都會(huì)在 向下滾動(dòng)頁面后隱藏,而手機(jī)應(yīng) 用的頁眉則不會(huì)如此,這進(jìn)一步 增加了設(shè)計(jì)師的工作量。第2 章 將對頁眉進(jìn)行更詳細(xì)的說明。
2 頁腳()
頁腳指的是界面底部的區(qū) 域。手機(jī)站點(diǎn)常以頁腳的形式, 將整個(gè)站點(diǎn)公用的導(dǎo)航欄及版權(quán) 信息安放在頁面底部。用戶能輕 松觸及該區(qū)域,對頁腳進(jìn)行操 作,因此,頁腳通常會(huì)包含導(dǎo)航 欄或頁面操作類UI 控件。第2 章將詳細(xì)說明頁腳的相關(guān)內(nèi)容。
3 導(dǎo)航欄()
導(dǎo)航欄用于頁面跳轉(zhuǎn),或指 示用戶當(dāng)前所處位置。第3 章將 介紹導(dǎo)航欄的工作模式。
4 疊加層()
在疊加層中配置的內(nèi)容將會(huì) 與界面中已有元素重疊。疊加層 將顯示一些臨時(shí)的界面元素并遮 蓋原界面,此時(shí),原界面將保持 不變。在請求用戶執(zhí)行某些操作 時(shí),疊加層是一種常用手段。
疊加層可以大致分為兩種類 型。其中一種類型稱為模態(tài)類型, 在使用該類型的疊加層時(shí),用戶無 法操作原有界面,只能對疊加的元 素執(zhí)行操作。第2 章將介紹模態(tài)窗 口的相關(guān)內(nèi)容,第6 章將介紹模態(tài) 消息,屆時(shí),筆者將再做具體說 明。另一種名為非模態(tài)的類型與模 態(tài)類型相反,在使用這種疊加層 時(shí),用戶依然能對原界面執(zhí)行操 作。第3 章將介紹的下拉式菜單, 及第6 章將介紹的非模態(tài)消息, 都是該類型疊加層的典型應(yīng)用。
5 控件()
用戶可以通過控件來操控界面 狀態(tài)或設(shè)定狀態(tài)。舉例來說,第3 章將介紹的刷新控件可以將界面中 顯示的信息更新至最新狀態(tài),分段 控件則能夠更改正處于顯示狀態(tài) 的內(nèi)容。它們都是常用的控件。
6 操作()
操作可以指用戶通過UI 執(zhí) 行的任意行為。不過本書主要用 操作來指代保存、提交、刪除及 編輯等重要行為。用戶可以在服 務(wù)或應(yīng)用程序中執(zhí)行這些操作, 完成既定任務(wù)。
7 硬件按鈕
大部分智能手機(jī)的控制UI 都 在界面內(nèi),位于界面外的UI(按 鈕)稱為硬件按鈕。 在正 面設(shè)計(jì)了一個(gè)硬件按鈕移動(dòng)應(yīng)用ui設(shè)計(jì)模式讀后感, 設(shè)備則通常具有多個(gè)硬件按鈕②。
8 狀態(tài)欄
狀態(tài)欄是一種由系統(tǒng)控制并 顯示的UI。它主要用于顯示一些 設(shè)備信息或用戶通知信息。與其 他UI 不同,狀態(tài)欄不屬于特定 的應(yīng)用程序。在iOS 中,設(shè)計(jì)師 可以更改狀態(tài)欄的顏色及透明 度,使其與應(yīng)用程序風(fēng)格一致。
① 以下簡稱手機(jī)站點(diǎn)。——譯者注
② 從 4.0 起,建議 設(shè)備制造商減少使用硬件按鈕移動(dòng)應(yīng)用ui設(shè)計(jì)模式讀后感, 而使用虛擬屏幕按鈕。如今,很 多 設(shè)備都不再使用正面 硬件按鈕?!g者注