Mais conteúdo relacionado 行動介面設計模式2. 如何顯示大量文字資訊?
模式 應用情境 備註
Scroll 將資訊放在頁面上,過多的資訊
可以使用捲軸往下瀏覽。
資訊量過大導致下載時間長。
Vertical List 資訊可以分類,一開始顯示父項,
點選父項就可以看到子項。
可在父項標示底下有多少子項。
Infinite List 搜尋後有大量資訊,讓每頁顯示
的資訊量有限,每次只下載一頁,
看完後要移動到下一頁,需要等
候下載下一頁。
可以快速出現第一頁結果,但系
統同時在搜尋下一頁,讓使用者
有搜尋快速的感覺
Pagination 畫面提供翻頁的方式,同時顯示
頁碼,讓使用者知道看到哪。
4. 如何顯示即時訊息通知?
模式 應用情境 備註
Notification 在手機畫面最上方顯示最新訊息,
位置同手機狀態列。
Confirmation 一種強迫性質的訊息通知,必須
回應後才能繼續使用程式。
以popup的方式呈現
Popup 在主視窗之上跳出一個新視窗,
有時候會強制使用者閱讀並選擇
指令後,才能使用其他功能;其
餘應用的情況是,主畫面資訊太
多,採取popup的方式提供選項
的資訊。
Exit Guard 在退出程式時的一種再次確認機
制,避免使用者意外退出。
5. 如何構成主頁?
模式 應用情境 備註
Idle Screen 當使用完任何程式,將閒置手機
時,就必須回到這個畫面,方便
下次使用。
Lock Screen 為了怕手機在Idle Screen時,誤
觸任何按紐,可以設定成Lock
Screen,鎖定螢幕。
6. 檔案下載速度慢?
模式 應用情境 備註
Interstitial Screen 在檔案下載時,因為下載時間久,
會使用Interstitial Screen,讓使
用者知道程式正在運行中,這時
可以安排廣告畫面。
Wait Indicator 使用Wait Indicator表示程式進行
中,讓使用者知道並不是當機。
8. 資訊呈現模式
模式 應用情境 備註
Vertical List 利用水平條列方式,顯示可以分類的資訊。
Infinite 資訊量大,讓使用者先看到部份資料,同時既然下載其他資訊。
Thumbnail List 條列資訊外,再加上一張縮圖增加辨識。
Fisheye List 使用者將游標放在某行上,會得到更多的資訊,但不用點選。
Carousel 利用圖片呈現資訊,並使其以六角柱呈現,同時可以觀看三頁。
Grid 利用圖片呈現資訊,將圖片排列在畫面上,捲動瀏覽。
Film Strip 利用圖片呈現資訊,如底片一樣,一張接著一張。
Slideshow 用投影片換頁的方式,一次呈現一張圖。
Infinite Area 地圖的顯示模式,將地圖分塊下載,先出現目標區域,由模糊到清晰。
Select List 條列訊息前加上核取方塊,可應用在多選的情況。
9. 跳出視窗的作用有那些
模式 應用情境 備註
Confirmation 執行程式的過程中,需要使用者的決策,確定後才能進行。
Sign on 驗證使用者的身份。
Exit Guard 系統跳出前的最後確認
Cancel
Protestion
輸入長串資料卻誤按取消遺失,可以採取短暫儲存的功能回複。
Timeout 太久沒使用便將螢幕的功能選項失效,直接有人使用才回復。
11. 如何用橫向存取工具,用少量訊息傳達大量資訊
模式 應用情境 備註
Tabs 用兩個框架,將父項與子項分開,父項可以列出,點選父項會出現相對
應的子項。
Peel Away 模擬書本翻頁的方式來翻頁。
Simulated 3D
Effects
跟Peel Away的方式類似,差異的地方是Simulated 3D Effect 是3D呈現
Pagination 直接點頁數就可以翻頁。
Location
Within
用拖曳的方式來翻頁
12. 如何讓使用者呼叫想要的資訊
模式 應用情境 備註
Link 點選有底線的文字,就可以出現其他頁面。
Button 點選button來執行決策。
Indicator 同時由圖像和文字編輯形成的元件,使用時會觸發翻頁的動作。
Icon 用圖像來表示文字或標籤
Stack of Item 一疊相關的資訊,可被攤開顯示,同時仍可知道代表這個資訊的圖示。
Annotation 在不離開主畫面的情況下,呈現主畫面中特定資訊或額外資訊。
13. 小標籤的應用
模式 應用情境 備註
Order Data 將資訊簡化,但是仍能兼顧使用者經驗,可以接受完整的資訊。
Tooltip 一種即時的小工具,可以是文字或圖示,準確傳達狀態或資訊。
Avatar 用圖片,或是照片,作為使用者在網上的化身。
Wait Indicator 用wait Indicator顯示系統狀態,避免讓使用者因延遲而感到不適。
Reload, synch,
stop
如果需要使用手動停止或更改狀態,需要適時提供按鈕供使用者使用,
不能操作的按鈕不要出現在介面上。
14. 用小工具找資訊
模式 應用情境 備註
Zoom & Scale 如果資訊內容是地圖類的等高密度資訊,無法翻頁或是一目了然,就可
以使用這個方式,可以拖曳以及放大資料,方便尋找目標。
Location Jump 在面對一長串的標籤資料,使用一個有意義的標籤索引,協助快速找到
資訊。
Search Within 使用輸入搜尋時,search within 提供了每輸入一個字,就可以根據這個
字篩選可能的目標並重新列出清單的功能,所以很有機會在尚未輸入完
關鍵字就找到你的找的選項。
Sort Filter 這個功能跟search within類似,等於是它的延伸。在搜索前先應用
search within的功能將相關資訊置前,開始搜尋時會從前面開始搜,加
快搜尋的時間。
15. 有什麼輸入方式?
模式 應用情境 備註
Keyboards &
Keypads
手機的輸入模式受限於面積,所以輸入方式跟電腦不同。分做實體/虛擬
鍵盤/小型鍵盤 直接/多擊
Pen Input 提供觸控螢幕用手寫輸入的方式。
Mode
Switches
要提供大小寫轉換的方式,整個介面進行轉換,提供切換的按鈕應該要
有所區別。
Input method
indicator
提供目前是使用何種文字輸入的指示。
Autocomplete
& prediction
在輸入時,單字未打完前,系統先預測要打的字或是內容。
17. 輸入與選取的介紹
模式 應用情境 備註
Input Areas 輸入文字的欄位與隱喻需要相輔相成,輸入流程需有一定的脈絡
Form
Selections
使用清單的方式選擇資訊或執行某功能。
Mechanical
Style Controls
要進行一些設定時,可以採用虛擬的機械式畫面,這會與使用者的直覺
一致。
Clear Entry 提供一個安全便利的方式,清除輸入欄內的資訊。
18. 如何應用音訊與震動
模式 應用情境 備註
Tones 音訊大多是用做訊息回饋,讓使用者知道剛才的指令有執行。
Voice Input 在不碰觸裝置螢幕的情況下,採取語音作為文字輸入方式
Voice
Readback
用語音的方式,唸出螢幕上的文字,讓使用者不用視覺也能閱讀。
Voice
Notification
使用語音的方式,提醒使用者一些即時的資訊,但是因為使用者對於聲
音的接收有時並不能完全意會到,頂多只能聽到幾個字,所以螢幕上的
文字資訊還是不可少,可以讓使用者這喵一演。
Haptic output 震動輸入可以作為回饋,讓使用者知道指令成功執行。同時,在環境吵
雜時,可以取代Voice Notification,讓使用者知道有訊息進入,進而觀
看手機螢幕。
19. 硬體裝置的介紹與應用
模式 應用情境 備註
LED LED是一種視覺元件,特性是耗電量低,在手機電力不足時,可以作為
訊息通知的裝置,但是因為它只有明暗的顯示,僅能做電力狀態或是連
接外線的提醒。
Display
Brightness
Controls
將螢幕顯示控制的表單置於設定中。
Orientation 手機的螢幕很明顯的可以直看或橫看,所以都有內建偵測的元件,在設
計版面時要考量這個問題,以避免有使用者預期外的使用情況。
Location 手機附帶一些提供使用者位置資訊的裝置,不同的裝置都有不同的精度,
為了避免產生誤解,若是要表示距離,一定要考量裝置的精度,若是精
度是100公尺,螢幕上的單位請用100m,最末位數字盡量用0 或5就好。