iOS vs. Android_次要資訊的呈現方式(1)

LaLaLa
LaLaLa
Jul 10, 2017 · 4 min read

在規劃手機介面的時候,因為Mobile APP畫面大小的限制,所以會依照要呈現內容的重要度,設計成不一樣的編排,會將一些比較次要的內容藏到下一個層級, 這些內容可能是按鈕、文字或圖片。而按鈕大致上可以分成 (1)任務類型 (2)設定值類型 (3)導航類型 。

另外,在開發APP的時候,會因考量使用者易用性,或者是為了加速開發而使用該平台所提供的元件來設計,而iOS與Android分別對此有不同的元件可以使用。

(1)Action Sheets\Activity Views vs. Bottom sheets

操作表\底部警告框(Action Sheets)

透過由下而上滑出的 “底部警告框” 來呈現任務類型的按鈕選項,或在執行具有破壞性的操作之前,再次請求確認。對於具有破壞性、或危險行為的按鈕,請使用紅色,並且把他們放至於最上方。

避免在“底部警告框”中使用滾動。 如果“底部警告框”真的提供太多按鈕,造成 必須滾動才能看到所有的選項。這樣會讓使用者在選擇時花很多的時間, 而且會造成他們誤觸其中一個按鈕。此外,在底部必須提供一個取消按鈕,讓使用者明確瞭解怎麼退出。

活動視圖(Activity Views)

“活動視圖”由“活動按鈕(Action button)”觸發,顯示對於當前內容有幫助的任務,如複製,收藏夾或尋找等系統提供的任務。另外也包含包括Twitter和Airplay等來自其他應用的共享和操作擴展。

這些任務總是先出現在“活動視圖”中,儘管系統提供的任務無法在活動中重新排序,但如果它們不適合於當前的應用程式,那可以將它們排除。如,要防止打印圖像,可以排除打印的按鈕。或是可以設定在任何特定的間顯哪些特定的任務型按鈕。

底部動作條(Bottom sheets)

臨時底板(Modal bottom sheets): 主要用於移動設備,是菜單或簡單對話框的替代品,還可以呈現其他應用程序的深層內容。 可以用列表 (List)或網格 (Grid)的方式來顯示。依照呈現的資訊不同,分別可以對應到iOS的“底部警告框”或“活動視圖”。

固定底板(Persistent bottom sheets):持續的在底部頁面呈現應用內容。即使沒有操作它也不會消失。可以呈現的資訊較豐富,因是補充說明當夜的內容,所以與當前內容在同個高度。

兩個元件的高度不一樣,臨時底板的位置高於應用程式的內容; 而固定底版則與內容相高。 當臨時底版滑入屏幕時,屏幕的其餘部分變暗,將焦點放在底版上,必須被關閉才能與底層內容進行交互。

(2)Pickers vs. Pickers

Left Image Source: iOS Human Interface Guidelines

蘋果-選擇器(Pickers)

一個“選擇器”可包含一個或是多個可捲動的項目值。項目值可以是選擇日期或選擇時間或是任意一組選項。

有時也會出現在螢幕的下方或是在一個跳出視窗之中,當使用者編輯一個項目或是點擊菜單時,挑選項也可以用內嵌的方式表現。 當“選擇器”所要顯示的項目過多時, 請使用表格代替。過長的項目令人乏味,也無法讓使用者一眼就看到所有的項目,造成選擇上的困難。而表格可呈現較多的項目,而且使捲動更快速。

安卓-選擇器(Pickers)

與蘋果不同,安卓的“選擇器”主要是分成選擇日期和選擇時間兩種。

日期選擇器:所選日期由填充圓圈表示。 當天的日期由不同的顏色和字體粗細來表示。

時間選擇器:時間選擇器根據用戶的首選時間設置(即12小時或24小時格式)進行調整。所選擇的時間由時鐘手末端的填充圓圈表示。

在行動裝置中,“選擇器”最適合在確認對話框中顯示。但如果要在表單中顯示,請考慮使用緊湊編排的控件,如“分段下拉按鈕(Segmented dropdown buttons)”。

相關文章_iOS vs. Android_次要資訊的呈現方式(2)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade