Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
名詞與圖解
如何顯示大量文字資訊?
模式 應用情境 備註
Scroll 將資訊放在頁面上,過多的資訊
可以使用捲軸往下瀏覽。
資訊量過大導致下載時間長。
Vertical List 資訊可以分類,一開始顯示父項,
點選父項就可以看到子項。
可在父項標示底下...
如何顯示手機資訊?
模式 應用情境 備註
Annunciator 讓使用者知道手機的狀態,例如
收訊、電力、或是使用何種連線,
顯示位置在手機上方。
Icon 用圖示來代表特定意義。 電池代表電力,信件代表email
如何顯示即時訊息通知?
模式 應用情境 備註
Notification 在手機畫面最上方顯示最新訊息,
位置同手機狀態列。
Confirmation 一種強迫性質的訊息通知,必須
回應後才能繼續使用程式。
以popup的方式呈現
Popup 在...
如何構成主頁?
模式 應用情境 備註
Idle Screen 當使用完任何程式,將閒置手機
時,就必須回到這個畫面,方便
下次使用。
Lock Screen 為了怕手機在Idle Screen時,誤
觸任何按紐,可以設定成Lock
Screen...
檔案下載速度慢?
模式 應用情境 備註
Interstitial Screen 在檔案下載時,因為下載時間久,
會使用Interstitial Screen,讓使
用者知道程式正在運行中,這時
可以安排廣告畫面。
Wait Indicator ...
廣告的時機?
模式 應用情境 備註
Interstitial Screen 在檔案下載時,因為下載時間久,
會使用Interstitial Screen,讓使
用者知道程式正在運行中,這時
可以安排廣告畫面。不一定要使
用Wait Indica...
資訊呈現模式
模式 應用情境 備註
Vertical List 利用水平條列方式,顯示可以分類的資訊。
Infinite 資訊量大,讓使用者先看到部份資料,同時既然下載其他資訊。
Thumbnail List 條列資訊外,再加上一張縮圖增加辨識...
跳出視窗的作用有那些
模式 應用情境 備註
Confirmation 執行程式的過程中,需要使用者的決策,確定後才能進行。
Sign on 驗證使用者的身份。
Exit Guard 系統跳出前的最後確認
Cancel
Protestion
輸入...
如何呈現更多資料
模式 應用情境 備註
Windowshade 水平條列式的資訊,點一下就會出現說明資訊。
Pop-Up 跳出在父項之上的子項視窗
Hierarchical
List
父項標籤右側顯示這個父項下有多少子項
Returned
Re...
如何用橫向存取工具,用少量訊息傳達大量資訊
模式 應用情境 備註
Tabs 用兩個框架,將父項與子項分開,父項可以列出,點選父項會出現相對
應的子項。
Peel Away 模擬書本翻頁的方式來翻頁。
Simulated 3D
Effects
跟...
如何讓使用者呼叫想要的資訊
模式 應用情境 備註
Link 點選有底線的文字,就可以出現其他頁面。
Button 點選button來執行決策。
Indicator 同時由圖像和文字編輯形成的元件,使用時會觸發翻頁的動作。
Icon 用圖像來表示...
小標籤的應用
模式 應用情境 備註
Order Data 將資訊簡化,但是仍能兼顧使用者經驗,可以接受完整的資訊。
Tooltip 一種即時的小工具,可以是文字或圖示,準確傳達狀態或資訊。
Avatar 用圖片,或是照片,作為使用者在網上的化身...
用小工具找資訊
模式 應用情境 備註
Zoom & Scale 如果資訊內容是地圖類的等高密度資訊,無法翻頁或是一目了然,就可
以使用這個方式,可以拖曳以及放大資料,方便尋找目標。
Location Jump 在面對一長串的標籤資料,使用一個有...
有什麼輸入方式?
模式 應用情境 備註
Keyboards &
Keypads
手機的輸入模式受限於面積,所以輸入方式跟電腦不同。分做實體/虛擬
鍵盤/小型鍵盤 直接/多擊
Pen Input 提供觸控螢幕用手寫輸入的方式。
Mode
Swit...
有哪些可以提供操作互動的設計方式?
模式 應用情境 備註
Directional
Entry
操作游標時,使用方向鍵來控制游標的上下左右,讓按紐操作時,與游
標的方向一致。
Press-and-
Hold
觸控裝置沒有右鍵,所以用這個方式來取代...
輸入與選取的介紹
模式 應用情境 備註
Input Areas 輸入文字的欄位與隱喻需要相輔相成,輸入流程需有一定的脈絡
Form
Selections
使用清單的方式選擇資訊或執行某功能。
Mechanical
Style Controls
...
如何應用音訊與震動
模式 應用情境 備註
Tones 音訊大多是用做訊息回饋,讓使用者知道剛才的指令有執行。
Voice Input 在不碰觸裝置螢幕的情況下,採取語音作為文字輸入方式
Voice
Readback
用語音的方式,唸出螢幕上的文...
硬體裝置的介紹與應用
模式 應用情境 備註
LED LED是一種視覺元件,特性是耗電量低,在手機電力不足時,可以作為
訊息通知的裝置,但是因為它只有明暗的顯示,僅能做電力狀態或是連
接外線的提醒。
Display
Brightness
Cont...
在資訊量太多,無法在一頁顯示時,scroll是一個
解決方式,藉由捲動瀏覽大量資訊
Annunciator row是顯示手機狀態的區域,包括訊
號強弱、電力、連線狀態等。
Notofication是即時出現的訊息通
知。
需要點選才能看到的選單。
一直出現在畫面的選單。
裝置閒置中所呈現的畫面。
為了避免誤點,裝置閒置中所呈現
的一種畫面,呈現Lock Screen時
必須解鎖方能使用。
Interstitial Screen是程式執行中的畫面,
一般分成讀取中或是下載中,可以用此
空檔放置廣告畫面。
水平的文字訊息要在一個頁面呈現時,訊息
需要被堆疊,而我們通常只能看見標籤,點
開標籤才能看見下面的資訊。
顯示訊息時,因為資訊量太大,所以採用
infinite list顯示一部份的訊息,其他未顯示的
訊息需點選後再出現。
Infinite可以讓使用者覺得下載速度快,因為
程式會馬上出現第一頁的資料,事實上第二
頁以後的資料還在搜索。
顯示訊息時,每一筆資料由一張圖示加文字,
增加辨識度,但是也不一定要限定一定要圖,
可以有圖再擺即可。
當使用Fisheye List時,遊標經過的地方會提
供多一點的資訊,但這也表示不適合用在觸
控裝置上。
當想呈現的資訊都是圖片式的,可以用
carousel的方式,主要關注的頁面在正中央,
未關注的頁面出現在兩側,營造會旋轉的感
覺,方面揀選。
如果搜尋後的資訊是大量的圖片,則可以使
用grid,讓使用者透過捲動的方式,尋找目標,
如果圖片大小一致,可以在正中央設置焦點
區,進入焦點區的圖就會有額外資訊。
跟grid一樣,film strip也是應用於大量圖片資
訊,但是不一樣的是,film strip採取的是翻
頁的模式,每頁之間有區域性。
Slideshow的方式是呈現單張的圖片,如果幻
燈片一樣一次一張,經常使用fade out的方式
換頁,如果換頁方式是不斷的滑出下一張,
就變成了film strip。
Infinite area應用於大型地圖或是龐大平面的
資料,未出現在螢幕的資訊可能處於未下載
狀態,由於資訊量大,圖片呈現的速度較慢,
且不會一次就讀取完畢,而是會分區塊會是
從模糊到清晰。
Select List是將可以選擇的選項條列後,再加
上一個核取方塊,讓使用者執行功能前有一
個緩衝空間,此外也可以進行多選的選取方
式。
當一個功能需要使用者進行決策才能繼續下
去時,使用confirmation的方式進行確認,常
見的方式是跳出一個視窗請求確認。
當需要輸入隱私資料如帳密時,需要有一個
頁面專門處理,這個頁面需要有安全性,執
行時也要限定只有這個頁面可以執行,其他
頁面的動作停止。
Exit Guard是一種強制回應對話框,會中斷
一個應用程式或程序,按下取消或拒絕會關
閉對話框,返回上一頁。
Cancel protection意指對於取消的指令或是
文字,有回複的功能減少重覆輸入的時間。
Windowshade是左圖右邊那一個,在一頁橫
列的資訊中點選某一樣,就會出現該項的簡
短資訊。
Pop-UP都是疊在父視窗上的子視窗,大部份
都是強制回應,才能執行其他功能。
當有大量的資訊時,資訊可以加以被分類處
理,每一個標籤為父項目,其下有大量子項
目,就可以用Hierarchical父項目會標示其下
有多少子項目,讓使用者參考。
使用者明白要求資訊的子集時,你必須顯示有意
義的簡化資訊。
頁籤是常見的整理大量資訊的方法,雖然限制使
用者選擇的方式,但是一致性的使用方式讓使用
者有脈絡遵循。
Peel away是一種模擬書本翻頁的效果,翻頁方
式是在螢幕上拖曳,所以適合應用在觸控裝置上。
Simulated 3D Effect跟peel away類似,差別在於
Simulated是以3D 效果呈現。
Pagination是簡單的翻頁模式,使用者可以直覺
的翻頁,同時也可以知道自己看到哪一頁。
如果有特殊的翻頁模式,例如用拖曳的方式,畫
面上需顯示頁與頁之間的脈絡。
一種可選取,只有內容的項目,會提供存取其他
頁面或內容的方法
一種明顯的視覺元素,讓使用者觸發一個動作,
傳送資訊或執行功能
同時由圖像和文字編輯形成的元件,使用時會觸
發翻頁的動作。
一種視覺的元素,讓使用者可以從圖示了解點選
後會執行的功能。
一疊相關的資訊,可被攤開顯示,同時仍可知道
代表這個資訊的圖示。
在不離開主畫面的情況下,呈現主畫面中特定資
訊或額外資訊。
針對情境和觀看者,以最適當的可辨識的格式,顯示文字資訊,
並考慮使用者的經驗來表示。
例如
December 23→Dec 23
風向from the south→south→s
Tainan City→tn
Tooltip是提示的小工具,它可以是一個圖示
來表示目前的狀態,也可以是一段說明文字,
不論是哪一種,輔助用的Tooltip的資訊量不
能太大,壓縮掉主頁面。
Avatar是一種圖示,這種圖示代表一個真正
的人,所以可以設計成可點選,也可以不能
點選,如果使用者沒有上傳圖片,也不要硬
性規定。
使用wait indicator表示目前有延遲的情況,
並非系統有問題。
在介面設計上,兩個目的剛好相反的按紐,為
了防止誤按,在設計上不會讓它同時出現,只
有在可能的使用情境中才可以使用。
在顯示高密度的資訊時,例如地圖,可以運用
Zoom in Zoom Out的功能,有時候畫面會有+
-的GUI,現在的使用者經驗傾向用兩指直接拉
開或聚合。
提供一個簡單的標籤來分類資料,標籤的命名
跟標籤底下資料有關。
在手動輸入搜尋時,只要每輸入一個字,就會
將有那個字的選項提前。
先進行排序分類,將較有可能的選項置前,再
進行篩選,頁面會顯示最相關的資訊。
實體 虛擬
一個按鈕有三個字,所以
要用連擊的方式
用筆寫輸入較可以讓人不用學習,可以直接使
用,但在使用上有時筆會遮住螢幕。
在輸入框中目前是以何種模式輸入,必須要有
指引,如右圖,圖左是放在輸入框上,圖右是
放在Annunciator row。
在輸入時,系統會猜測你會輸入什麼,並條列
式放在下方,可以直接點選。
在控制遊標時,使用具指向
性的方向鍵,不需學習。
或是在觸控板上,手指滑過
的軌跡與遊標一致。
在觸空螢幕上按壓超過0.2秒,就會出現視窗,
視窗有可能是滑鼠的右鍵,在鍵盤上是出現
大小寫。
使用不同的方式讓使用知道正在作用的區域,左圖是陰影、中圖是
外框,右圖是反黑。
使用一個硬體裝置,畫面上就應該出現與這個裝置有關的資訊。
Accesskeys多用於非觸控裝置上,提供快速切
換或是標籤選取使用,如左圖中,如果你按1,
作用區域就會移動的Forecast的區塊。
播號數字鍵的排列方式應該要與一
般認知一致。
在播號時,螢幕上最好也能出現剛
按下的數字。
基於觸控螢幕的特性,手勢操作方式成為一種觸控裝置的優勢,利
用手勢操作具有直覺的特性,但是隨著想執行的功能越多,手勢設
計可能會越複雜,需要使用者經驗設計的支援。
智慧型手機中的G sensor、GPS、以及鏡頭等
硬體裝置,讓手機的使用更多元,我們可以不
用觸控螢幕,就可以用動作會攝影來執行某些
功能,例如Line搖搖手機就可以搜尋新用戶。
前面提及的內容都是以執行手機內部功能為主,remote
Gestures則是使用手機作為遙控器,進行遠端裝置的操作。
需要輸入的版面可以盡量簡潔,勿佔
空間,左圖是一個盡量壓縮空間的例
子,將說明文字省略。但需要考量再
次造訪時沒有說明文字的問題。
輸入發生的區域,最好就在其要放入
資訊的框中,若是還多出一個視窗,
輸入完再送到輸入框,會影響使用者
注意力的脈...
在輸入文字時,可以使用清單的模
式來縮短輸入時間,直接用選取的
方式取代輸入。
這個方式不挶限在資訊的點選,也
包括模式的點選,最右邊是手機的
模式,因為是模式切換,所以要用
按鈕的形式。
雖然手機是數位式的產品,但是如果是在需要作數據調整
時,可以採用機械式的畫面,讓使用者很容易的進行調整,
並且符合經驗。
行動裝置需提供一個安全、簡易的方式,來清除輸
入框的內容,因為行動裝置沒有滑鼠,選取不方便,
左圖的方式是採取將clear包含在cut all中。
明亮度的控制應放在設定中,讓使用者有預期可以在那
裡找到調整方式建議採用Mechanical Style Controls
智慧型手機都會有偵測方向性的
裝置,協助使用者有更自主性的
閱讀體驗。
相對的,開發人員就必須把兩種
方向的版型都要納入設計
The End
Prochain SlideShare
Chargement dans…5
×

行動介面設計模式

2 979 vues

Publié le

書太厚 看完隨手整理到ppt了

Publié dans : Internet

行動介面設計模式

  1. 1. 名詞與圖解
  2. 2. 如何顯示大量文字資訊? 模式 應用情境 備註 Scroll 將資訊放在頁面上,過多的資訊 可以使用捲軸往下瀏覽。 資訊量過大導致下載時間長。 Vertical List 資訊可以分類,一開始顯示父項, 點選父項就可以看到子項。 可在父項標示底下有多少子項。 Infinite List 搜尋後有大量資訊,讓每頁顯示 的資訊量有限,每次只下載一頁, 看完後要移動到下一頁,需要等 候下載下一頁。 可以快速出現第一頁結果,但系 統同時在搜尋下一頁,讓使用者 有搜尋快速的感覺 Pagination 畫面提供翻頁的方式,同時顯示 頁碼,讓使用者知道看到哪。
  3. 3. 如何顯示手機資訊? 模式 應用情境 備註 Annunciator 讓使用者知道手機的狀態,例如 收訊、電力、或是使用何種連線, 顯示位置在手機上方。 Icon 用圖示來代表特定意義。 電池代表電力,信件代表email
  4. 4. 如何顯示即時訊息通知? 模式 應用情境 備註 Notification 在手機畫面最上方顯示最新訊息, 位置同手機狀態列。 Confirmation 一種強迫性質的訊息通知,必須 回應後才能繼續使用程式。 以popup的方式呈現 Popup 在主視窗之上跳出一個新視窗, 有時候會強制使用者閱讀並選擇 指令後,才能使用其他功能;其 餘應用的情況是,主畫面資訊太 多,採取popup的方式提供選項 的資訊。 Exit Guard 在退出程式時的一種再次確認機 制,避免使用者意外退出。
  5. 5. 如何構成主頁? 模式 應用情境 備註 Idle Screen 當使用完任何程式,將閒置手機 時,就必須回到這個畫面,方便 下次使用。 Lock Screen 為了怕手機在Idle Screen時,誤 觸任何按紐,可以設定成Lock Screen,鎖定螢幕。
  6. 6. 檔案下載速度慢? 模式 應用情境 備註 Interstitial Screen 在檔案下載時,因為下載時間久, 會使用Interstitial Screen,讓使 用者知道程式正在運行中,這時 可以安排廣告畫面。 Wait Indicator 使用Wait Indicator表示程式進行 中,讓使用者知道並不是當機。
  7. 7. 廣告的時機? 模式 應用情境 備註 Interstitial Screen 在檔案下載時,因為下載時間久, 會使用Interstitial Screen,讓使 用者知道程式正在運行中,這時 可以安排廣告畫面。不一定要使 用Wait Indicator。
  8. 8. 資訊呈現模式 模式 應用情境 備註 Vertical List 利用水平條列方式,顯示可以分類的資訊。 Infinite 資訊量大,讓使用者先看到部份資料,同時既然下載其他資訊。 Thumbnail List 條列資訊外,再加上一張縮圖增加辨識。 Fisheye List 使用者將游標放在某行上,會得到更多的資訊,但不用點選。 Carousel 利用圖片呈現資訊,並使其以六角柱呈現,同時可以觀看三頁。 Grid 利用圖片呈現資訊,將圖片排列在畫面上,捲動瀏覽。 Film Strip 利用圖片呈現資訊,如底片一樣,一張接著一張。 Slideshow 用投影片換頁的方式,一次呈現一張圖。 Infinite Area 地圖的顯示模式,將地圖分塊下載,先出現目標區域,由模糊到清晰。 Select List 條列訊息前加上核取方塊,可應用在多選的情況。
  9. 9. 跳出視窗的作用有那些 模式 應用情境 備註 Confirmation 執行程式的過程中,需要使用者的決策,確定後才能進行。 Sign on 驗證使用者的身份。 Exit Guard 系統跳出前的最後確認 Cancel Protestion 輸入長串資料卻誤按取消遺失,可以採取短暫儲存的功能回複。 Timeout 太久沒使用便將螢幕的功能選項失效,直接有人使用才回復。
  10. 10. 如何呈現更多資料 模式 應用情境 備註 Windowshade 水平條列式的資訊,點一下就會出現說明資訊。 Pop-Up 跳出在父項之上的子項視窗 Hierarchical List 父項標籤右側顯示這個父項下有多少子項 Returned Result 有意義的簡化資訊,如縮短文字、圖像、圖表等
  11. 11. 如何用橫向存取工具,用少量訊息傳達大量資訊 模式 應用情境 備註 Tabs 用兩個框架,將父項與子項分開,父項可以列出,點選父項會出現相對 應的子項。 Peel Away 模擬書本翻頁的方式來翻頁。 Simulated 3D Effects 跟Peel Away的方式類似,差異的地方是Simulated 3D Effect 是3D呈現 Pagination 直接點頁數就可以翻頁。 Location Within 用拖曳的方式來翻頁
  12. 12. 如何讓使用者呼叫想要的資訊 模式 應用情境 備註 Link 點選有底線的文字,就可以出現其他頁面。 Button 點選button來執行決策。 Indicator 同時由圖像和文字編輯形成的元件,使用時會觸發翻頁的動作。 Icon 用圖像來表示文字或標籤 Stack of Item 一疊相關的資訊,可被攤開顯示,同時仍可知道代表這個資訊的圖示。 Annotation 在不離開主畫面的情況下,呈現主畫面中特定資訊或額外資訊。
  13. 13. 小標籤的應用 模式 應用情境 備註 Order Data 將資訊簡化,但是仍能兼顧使用者經驗,可以接受完整的資訊。 Tooltip 一種即時的小工具,可以是文字或圖示,準確傳達狀態或資訊。 Avatar 用圖片,或是照片,作為使用者在網上的化身。 Wait Indicator 用wait Indicator顯示系統狀態,避免讓使用者因延遲而感到不適。 Reload, synch, stop 如果需要使用手動停止或更改狀態,需要適時提供按鈕供使用者使用, 不能操作的按鈕不要出現在介面上。
  14. 14. 用小工具找資訊 模式 應用情境 備註 Zoom & Scale 如果資訊內容是地圖類的等高密度資訊,無法翻頁或是一目了然,就可 以使用這個方式,可以拖曳以及放大資料,方便尋找目標。 Location Jump 在面對一長串的標籤資料,使用一個有意義的標籤索引,協助快速找到 資訊。 Search Within 使用輸入搜尋時,search within 提供了每輸入一個字,就可以根據這個 字篩選可能的目標並重新列出清單的功能,所以很有機會在尚未輸入完 關鍵字就找到你的找的選項。 Sort Filter 這個功能跟search within類似,等於是它的延伸。在搜索前先應用 search within的功能將相關資訊置前,開始搜尋時會從前面開始搜,加 快搜尋的時間。
  15. 15. 有什麼輸入方式? 模式 應用情境 備註 Keyboards & Keypads 手機的輸入模式受限於面積,所以輸入方式跟電腦不同。分做實體/虛擬 鍵盤/小型鍵盤 直接/多擊 Pen Input 提供觸控螢幕用手寫輸入的方式。 Mode Switches 要提供大小寫轉換的方式,整個介面進行轉換,提供切換的按鈕應該要 有所區別。 Input method indicator 提供目前是使用何種文字輸入的指示。 Autocomplete & prediction 在輸入時,單字未打完前,系統先預測要打的字或是內容。
  16. 16. 有哪些可以提供操作互動的設計方式? 模式 應用情境 備註 Directional Entry 操作游標時,使用方向鍵來控制游標的上下左右,讓按紐操作時,與游 標的方向一致。 Press-and- Hold 觸控裝置沒有右鍵,所以用這個方式來取代。按壓0.2秒後出現視窗。 Focus & Cursors 這個互動方式是告訴使用者,螢幕上哪個區域可以執行指令或輸入指令。 Other hardware keys 在使用一個硬體功能時,畫面上應該要顯示其狀態。 Accesskeys 為了單擊就可以處理程式,所以設計了快速鍵。 Dialer 撥號數字鍵的排列方式應該要跟一般電話一致。 On-Screen Gestures 在觸控裝置上,使用手指在螢幕上的軌跡,作為操作的方式。 Kinesthetic gestures 讓使用者以自然的方式操作行動裝置,例如照片轉90度只要改變手持行 動裝置的角度。 Remote 利用智慧型手機資訊傳遞特性,使之成為遠端控制器。
  17. 17. 輸入與選取的介紹 模式 應用情境 備註 Input Areas 輸入文字的欄位與隱喻需要相輔相成,輸入流程需有一定的脈絡 Form Selections 使用清單的方式選擇資訊或執行某功能。 Mechanical Style Controls 要進行一些設定時,可以採用虛擬的機械式畫面,這會與使用者的直覺 一致。 Clear Entry 提供一個安全便利的方式,清除輸入欄內的資訊。
  18. 18. 如何應用音訊與震動 模式 應用情境 備註 Tones 音訊大多是用做訊息回饋,讓使用者知道剛才的指令有執行。 Voice Input 在不碰觸裝置螢幕的情況下,採取語音作為文字輸入方式 Voice Readback 用語音的方式,唸出螢幕上的文字,讓使用者不用視覺也能閱讀。 Voice Notification 使用語音的方式,提醒使用者一些即時的資訊,但是因為使用者對於聲 音的接收有時並不能完全意會到,頂多只能聽到幾個字,所以螢幕上的 文字資訊還是不可少,可以讓使用者這喵一演。 Haptic output 震動輸入可以作為回饋,讓使用者知道指令成功執行。同時,在環境吵 雜時,可以取代Voice Notification,讓使用者知道有訊息進入,進而觀 看手機螢幕。
  19. 19. 硬體裝置的介紹與應用 模式 應用情境 備註 LED LED是一種視覺元件,特性是耗電量低,在手機電力不足時,可以作為 訊息通知的裝置,但是因為它只有明暗的顯示,僅能做電力狀態或是連 接外線的提醒。 Display Brightness Controls 將螢幕顯示控制的表單置於設定中。 Orientation 手機的螢幕很明顯的可以直看或橫看,所以都有內建偵測的元件,在設 計版面時要考量這個問題,以避免有使用者預期外的使用情況。 Location 手機附帶一些提供使用者位置資訊的裝置,不同的裝置都有不同的精度, 為了避免產生誤解,若是要表示距離,一定要考量裝置的精度,若是精 度是100公尺,螢幕上的單位請用100m,最末位數字盡量用0 或5就好。
  20. 20. 在資訊量太多,無法在一頁顯示時,scroll是一個 解決方式,藉由捲動瀏覽大量資訊
  21. 21. Annunciator row是顯示手機狀態的區域,包括訊 號強弱、電力、連線狀態等。
  22. 22. Notofication是即時出現的訊息通 知。
  23. 23. 需要點選才能看到的選單。
  24. 24. 一直出現在畫面的選單。
  25. 25. 裝置閒置中所呈現的畫面。
  26. 26. 為了避免誤點,裝置閒置中所呈現 的一種畫面,呈現Lock Screen時 必須解鎖方能使用。
  27. 27. Interstitial Screen是程式執行中的畫面, 一般分成讀取中或是下載中,可以用此 空檔放置廣告畫面。
  28. 28. 水平的文字訊息要在一個頁面呈現時,訊息 需要被堆疊,而我們通常只能看見標籤,點 開標籤才能看見下面的資訊。
  29. 29. 顯示訊息時,因為資訊量太大,所以採用 infinite list顯示一部份的訊息,其他未顯示的 訊息需點選後再出現。 Infinite可以讓使用者覺得下載速度快,因為 程式會馬上出現第一頁的資料,事實上第二 頁以後的資料還在搜索。
  30. 30. 顯示訊息時,每一筆資料由一張圖示加文字, 增加辨識度,但是也不一定要限定一定要圖, 可以有圖再擺即可。
  31. 31. 當使用Fisheye List時,遊標經過的地方會提 供多一點的資訊,但這也表示不適合用在觸 控裝置上。
  32. 32. 當想呈現的資訊都是圖片式的,可以用 carousel的方式,主要關注的頁面在正中央, 未關注的頁面出現在兩側,營造會旋轉的感 覺,方面揀選。
  33. 33. 如果搜尋後的資訊是大量的圖片,則可以使 用grid,讓使用者透過捲動的方式,尋找目標, 如果圖片大小一致,可以在正中央設置焦點 區,進入焦點區的圖就會有額外資訊。
  34. 34. 跟grid一樣,film strip也是應用於大量圖片資 訊,但是不一樣的是,film strip採取的是翻 頁的模式,每頁之間有區域性。
  35. 35. Slideshow的方式是呈現單張的圖片,如果幻 燈片一樣一次一張,經常使用fade out的方式 換頁,如果換頁方式是不斷的滑出下一張, 就變成了film strip。
  36. 36. Infinite area應用於大型地圖或是龐大平面的 資料,未出現在螢幕的資訊可能處於未下載 狀態,由於資訊量大,圖片呈現的速度較慢, 且不會一次就讀取完畢,而是會分區塊會是 從模糊到清晰。
  37. 37. Select List是將可以選擇的選項條列後,再加 上一個核取方塊,讓使用者執行功能前有一 個緩衝空間,此外也可以進行多選的選取方 式。
  38. 38. 當一個功能需要使用者進行決策才能繼續下 去時,使用confirmation的方式進行確認,常 見的方式是跳出一個視窗請求確認。
  39. 39. 當需要輸入隱私資料如帳密時,需要有一個 頁面專門處理,這個頁面需要有安全性,執 行時也要限定只有這個頁面可以執行,其他 頁面的動作停止。
  40. 40. Exit Guard是一種強制回應對話框,會中斷 一個應用程式或程序,按下取消或拒絕會關 閉對話框,返回上一頁。
  41. 41. Cancel protection意指對於取消的指令或是 文字,有回複的功能減少重覆輸入的時間。
  42. 42. Windowshade是左圖右邊那一個,在一頁橫 列的資訊中點選某一樣,就會出現該項的簡 短資訊。
  43. 43. Pop-UP都是疊在父視窗上的子視窗,大部份 都是強制回應,才能執行其他功能。
  44. 44. 當有大量的資訊時,資訊可以加以被分類處 理,每一個標籤為父項目,其下有大量子項 目,就可以用Hierarchical父項目會標示其下 有多少子項目,讓使用者參考。
  45. 45. 使用者明白要求資訊的子集時,你必須顯示有意 義的簡化資訊。
  46. 46. 頁籤是常見的整理大量資訊的方法,雖然限制使 用者選擇的方式,但是一致性的使用方式讓使用 者有脈絡遵循。
  47. 47. Peel away是一種模擬書本翻頁的效果,翻頁方 式是在螢幕上拖曳,所以適合應用在觸控裝置上。
  48. 48. Simulated 3D Effect跟peel away類似,差別在於 Simulated是以3D 效果呈現。
  49. 49. Pagination是簡單的翻頁模式,使用者可以直覺 的翻頁,同時也可以知道自己看到哪一頁。
  50. 50. 如果有特殊的翻頁模式,例如用拖曳的方式,畫 面上需顯示頁與頁之間的脈絡。
  51. 51. 一種可選取,只有內容的項目,會提供存取其他 頁面或內容的方法
  52. 52. 一種明顯的視覺元素,讓使用者觸發一個動作, 傳送資訊或執行功能
  53. 53. 同時由圖像和文字編輯形成的元件,使用時會觸 發翻頁的動作。
  54. 54. 一種視覺的元素,讓使用者可以從圖示了解點選 後會執行的功能。
  55. 55. 一疊相關的資訊,可被攤開顯示,同時仍可知道 代表這個資訊的圖示。
  56. 56. 在不離開主畫面的情況下,呈現主畫面中特定資 訊或額外資訊。
  57. 57. 針對情境和觀看者,以最適當的可辨識的格式,顯示文字資訊, 並考慮使用者的經驗來表示。 例如 December 23→Dec 23 風向from the south→south→s Tainan City→tn
  58. 58. Tooltip是提示的小工具,它可以是一個圖示 來表示目前的狀態,也可以是一段說明文字, 不論是哪一種,輔助用的Tooltip的資訊量不 能太大,壓縮掉主頁面。
  59. 59. Avatar是一種圖示,這種圖示代表一個真正 的人,所以可以設計成可點選,也可以不能 點選,如果使用者沒有上傳圖片,也不要硬 性規定。
  60. 60. 使用wait indicator表示目前有延遲的情況, 並非系統有問題。
  61. 61. 在介面設計上,兩個目的剛好相反的按紐,為 了防止誤按,在設計上不會讓它同時出現,只 有在可能的使用情境中才可以使用。
  62. 62. 在顯示高密度的資訊時,例如地圖,可以運用 Zoom in Zoom Out的功能,有時候畫面會有+ -的GUI,現在的使用者經驗傾向用兩指直接拉 開或聚合。
  63. 63. 提供一個簡單的標籤來分類資料,標籤的命名 跟標籤底下資料有關。
  64. 64. 在手動輸入搜尋時,只要每輸入一個字,就會 將有那個字的選項提前。
  65. 65. 先進行排序分類,將較有可能的選項置前,再 進行篩選,頁面會顯示最相關的資訊。
  66. 66. 實體 虛擬 一個按鈕有三個字,所以 要用連擊的方式
  67. 67. 用筆寫輸入較可以讓人不用學習,可以直接使 用,但在使用上有時筆會遮住螢幕。
  68. 68. 在輸入框中目前是以何種模式輸入,必須要有 指引,如右圖,圖左是放在輸入框上,圖右是 放在Annunciator row。
  69. 69. 在輸入時,系統會猜測你會輸入什麼,並條列 式放在下方,可以直接點選。
  70. 70. 在控制遊標時,使用具指向 性的方向鍵,不需學習。 或是在觸控板上,手指滑過 的軌跡與遊標一致。
  71. 71. 在觸空螢幕上按壓超過0.2秒,就會出現視窗, 視窗有可能是滑鼠的右鍵,在鍵盤上是出現 大小寫。
  72. 72. 使用不同的方式讓使用知道正在作用的區域,左圖是陰影、中圖是 外框,右圖是反黑。
  73. 73. 使用一個硬體裝置,畫面上就應該出現與這個裝置有關的資訊。
  74. 74. Accesskeys多用於非觸控裝置上,提供快速切 換或是標籤選取使用,如左圖中,如果你按1, 作用區域就會移動的Forecast的區塊。
  75. 75. 播號數字鍵的排列方式應該要與一 般認知一致。 在播號時,螢幕上最好也能出現剛 按下的數字。
  76. 76. 基於觸控螢幕的特性,手勢操作方式成為一種觸控裝置的優勢,利 用手勢操作具有直覺的特性,但是隨著想執行的功能越多,手勢設 計可能會越複雜,需要使用者經驗設計的支援。
  77. 77. 智慧型手機中的G sensor、GPS、以及鏡頭等 硬體裝置,讓手機的使用更多元,我們可以不 用觸控螢幕,就可以用動作會攝影來執行某些 功能,例如Line搖搖手機就可以搜尋新用戶。
  78. 78. 前面提及的內容都是以執行手機內部功能為主,remote Gestures則是使用手機作為遙控器,進行遠端裝置的操作。
  79. 79. 需要輸入的版面可以盡量簡潔,勿佔 空間,左圖是一個盡量壓縮空間的例 子,將說明文字省略。但需要考量再 次造訪時沒有說明文字的問題。 輸入發生的區域,最好就在其要放入 資訊的框中,若是還多出一個視窗, 輸入完再送到輸入框,會影響使用者 注意力的脈絡。
  80. 80. 在輸入文字時,可以使用清單的模 式來縮短輸入時間,直接用選取的 方式取代輸入。 這個方式不挶限在資訊的點選,也 包括模式的點選,最右邊是手機的 模式,因為是模式切換,所以要用 按鈕的形式。
  81. 81. 雖然手機是數位式的產品,但是如果是在需要作數據調整 時,可以採用機械式的畫面,讓使用者很容易的進行調整, 並且符合經驗。
  82. 82. 行動裝置需提供一個安全、簡易的方式,來清除輸 入框的內容,因為行動裝置沒有滑鼠,選取不方便, 左圖的方式是採取將clear包含在cut all中。
  83. 83. 明亮度的控制應放在設定中,讓使用者有預期可以在那 裡找到調整方式建議採用Mechanical Style Controls
  84. 84. 智慧型手機都會有偵測方向性的 裝置,協助使用者有更自主性的 閱讀體驗。 相對的,開發人員就必須把兩種 方向的版型都要納入設計
  85. 85. The End

×