iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
2
自我挑戰組

UI / UX 設計白皮書 - Material Design 導讀系列 第 30

UI / UX 設計白皮書 / Material Design 導讀_Day30 Platform guidance 平台指導

  • 分享至 

  • xImage
  •  

昨天我們了解到 Platform guidance 平台指導,子母畫面模式可讓兩個活動同時顯示在螢幕上,執行兩種不同的應用程式活動,也可以調整子母畫面的畫面尺寸,但要注意邊緣滑動手勢可能要提供另一種方式開啟側拉式選單,在子母畫面時能要保持響應式排版,讓畫面顯示更具有一致性。透過滑動手勢可以即時更新畫面動態區塊及排版,提供用戶快速的掌握最新的資訊及訊息。在文字被反白選擇時顯示工具欄提供更多操作選項。

今天我們進入到 Material Design 中 Platform guidance 平台指導的最後一天,今天會了解了解關於 Android 小工具和跨平台適應,讓我們繼續看下去吧。


Platform guidance 平台指導

Android bars / Android 狀態欄
Android fingerprint / Android 指紋
Android haptics / Android 觸覺
Android iconss / Android 圖示
Android navigating between apps / Android 在介面之間導覽
Android notifications / Android 通知
Android permissions / Android 權限
Android settings / Android 設定
Android slices / Android 片段
Android split-screen / Android 子母畫面
Android swipe-to-refresh / Android 滑動刷新
Android text selection / Android 文字選擇工具欄
Android widget / Android 小工具
Cross-platform adaptation 跨平台適應

Android widget / Android 小工具

小工具可顯示有關應用程式最重要的數據和功能的訊息。

小工具在手機主螢幕上以合併的形式顯示應用程式的最新內容和有趣的內容。它們連結到應用程式中更豐富的細節。用戶可以在其主螢幕面板上移動小工具位置並調整其大小(如果有支援)。

本圖片截取自 Material Design。

訊息小工具顯示對用戶重要的一些元件,持續追蹤訊息,例如:天氣或運動成績,點選視窗小工具會將相關的應用程式開啟並在螢幕中顯示詳細訊息。

集合小工具顯示相同類型的多個元件,集合小工具提供垂直滑動瀏覽。例如:新聞應用程式中的文章集合。集合小工具專注於兩個互動:

  • 提供瀏覽收藏
  • 可以開啟應用的詳細訊息

控制小工具顯示常用功能,可以在不打開應用程式的情況下從主螢幕開啟這些功能,控制小工具可以提供用戶選擇要不要進入詳細資訊的畫面。例如:音樂小工具允許用戶從音樂應用程式外播放、暫停或跳過音樂曲目。

混合小工具
許多小工具是混合而成的工具集合,結合了不同類型的應用程式,混合小工具可以依據需求增加其他應用程式的元件。例如:結合音樂播放小工具將控制組件與訊息組件的元件組合在一起,使用戶知道目前正在播放的歌曲名稱。

可滑動的小工具 ( 例如:列表或網格 ),顯示在集合小工具時可以擴大或縮小顯示於可以垂直滑動的區域。無論視窗小工具的大小如何,用戶仍然可以使用滑動瀏覽所有內容。確定要顯示多少應用程式的訊息,對於較小的視窗小工具,顯示重要的基本內容,隨著小工具的增加而添加文字訊息。

不可滑動的小工具,訊息類型的小工具不可滑動畫面,所有內容和排版必須符合用戶選擇的大小。

調整大小:允許用戶調整小工具的視窗高度或寬度,這項調整會影響主畫面上的小工具的排版。例如:長按可以選擇需要調整的小工具,接著拖動結點或是小工具的邊角來設定尺寸大小,調整完成後可觸摸小工具以外的區域,系統會立即保存小工具的尺寸更改。

應用程式可能可以調整大小,或受到水平或垂直的尺寸更改的限制。小工具應適應符合不同裝置之間的間距要求,包括單元數、大小和間距變化,並且依照裝置的不同進行自適應調整大小。

導覽
您的小工具應提供應用程式經常使用區域的連結,包括:

  • 允許用戶建立新內容的功能,例如:新文件或消息
  • 前往應用程式的主畫面

放置在主螢幕畫面後,Android 小工具將顯示介面配置選擇。配置應:

  • 不顯示超過 2-3 個配置元件
  • 使用對話框而不是全螢幕顯示選擇,保留用戶的內容區塊

設置完成後,小工具通常不會顯示 "設定" 或 "配置" 按鈕。

Cross-platform adaptation 跨平台適應

Material Design 支援跨平台的設計和可用性的實踐,創造美好的用戶體驗。

Material Design 是在傳統和網頁設計領域的基礎上建立在最佳做法,從用戶體驗研究和認知科學為基礎,從研究結果中得出的設計指南旨在普遍應用於所有平台和裝置。

設計約定因平台而異。這些約定上的差異會影響用戶理解 UI 或完成某些任務的能力。在這種情況下,建議參考用於主要用戶使用的裝置平台約定。在設計差異影響最小的區域,可以選擇適應多種平台。

以下準則指示何時適應桌機平台約定,並且選擇適應的平台。平台慣用準則不斷發展更新,而 Material Design 也一直朝進步與發展,提高設計介面的品質。

本圖片截取自 Material Design。

跨平台指南
工具欄:工具欄通放置於螢幕框架的頂端及底部。在 iOS 上工具欄稱為導覽列,高度比 Android 版本低。在 Android 上工具欄稱為頂端應用列。建議對工具欄標題使用該平台的預設的文字對齊方式,除非同時存在多個操作按鈕。

tags: Android 預設工具欄標題靠左對齊,IOS 預設工具欄標題置中對齊,當應用列右側出現操控按鈕也不會影響工具欄標題的對齊方式。

半透明:Material Design 使用陰影來表示應用列中的高度。在 iOS 中產品可以使用半透明來區分應用列和內容,搭配細線做為邊框,保持頂部應用列和內容之間有區別。

影像學:系統圖示用於表現平台中許多通用操作。Android 系統中返回按鈕為箭頭 " ← " 圖示,在 iOS 系統中返回按鈕為 "ㄑ" 圖示。Android 系統中更多操作的圖示為三個垂直圓點,而在 iOS 系統中更多操的圖示為三個水平圓點。

控制項目:操控元件需明確指出用戶如何進行互動。iOS 系統開關與 Material 開關有相同的功能和表現形式,在項目列標顯示複選標記而不是單選按鈕。

可選動作:下拉式選單藉由圖示、按鈕或操作觸發的選項列表。

對話框通知用戶需要決策的重要通知,對話框可以包含多個操作,在 iOS 上有些組件執行與 Android 上的對話框具有類似功能,例如:警報和操作列表,依據操作按鈕的數量及內文長度,決定對話框組件是否要調整為 iOS 的排列方式來顯示。

對話框中帶有有兩個水平放置的文字選項按鈕操作時,請使用簡潔 " 警報 " 通知用戶。然而對話框中有三個或三個以上長字串標籤的操作時,產品可能使用 iOS 操作列表或底部工作表。

滑動手勢從裝置螢幕的邊緣開始滑動顯示隱藏於畫面外的內容。邊緣滑動可能會與其他滑動手勢發生衝突,例如:在頁面或表格行中進行水平滑動,為避免衝突,邊緣滑動應與其他任何物件的滑動操作方式相同。

轉場通過動畫說明 UI 元件之間的關係,幫助用戶導覽應用程式。建議使用平台預設值作為轉場動作的起點。

Android 上的預設轉場使用放大縮小的比例來表現畫面轉場。
iOS 上的預設轉場使用水平移動來表現畫面轉場。

文字排版傳達文字內容和品牌。文字必須清晰易讀並且可以調整大小。如果您的應用程式已經使用了特定品牌的字型進行品牌宣傳,建議在整個應用程式中適度使用該字型。

Android 上的預設字型是 Roboto。在 Android 上,應以可縮放像素指定文字大小,並允許使用輔助功能來調整字型大小。

iOS 上的預設字型是 San Francisco。使用這種字型是實現輔助功能的最簡單方法(例如:動態類型)。使用其他字型可能需要進行調整才能保有相同的輔助功能。


今天我們了解到 Platform guidance 平台指導,在應用程式的主畫面中用戶可以依照喜好增加各種類型的小工具,小工具中的內容過多時可以使用滑動顯示更多資訊,也可以調整各個小工具的尺寸大小提供更多的區域導覽連結,小工具只會在畫面中局部顯示而不會使用全螢幕顯示,讓用戶可以在主畫面輕鬆操作常用功能。在不同平台上的介面視覺及操作介面間有者些微的差異,根據介面操作及項目內容來考量畫面的排版,搭配手勢及轉場動畫提高用戶體驗,也提高設計的品質。

終於結束 Material Design 中所有的章節,今天也是我們 30 天的鐵人賽文章的最後一天,雖然 2020 的鐵人賽進入了尾聲,但個平台的介面設計準則仍然會持續更新,為了提升更好的使用體驗,我們仍然要時刻保持閱讀學習,每天一點一點的逐個擊破,找出那些藏在細節中的魔鬼,不要讓大魔王有機會可以捉弄我們,迎向更美好的介面設計吧(握拳)!

如果您喜歡這篇文章或是這篇文章有幫助到您,歡迎按讚鼓勵,感謝大家這麼多天來的支持與鼓勵~


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day29 Platform guidance 平台指導
系列文
UI / UX 設計白皮書 - Material Design 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-09-30 06:18:50

恭喜完賽 /images/emoticon/emoticon37.gif
UIUX 的東西不容易理解,有時候會被忽視 ... 感謝分享!

感謝呀~ 加油~你也快完賽了!
介面設計的概念用背的比較死板,多看指南內化之後就運用自如啦。

一起創造更美好的介面設計吧。

/images/emoticon/emoticon37.gif

我要留言

立即登入留言