ios介面指南01

ios人機界面指南中,主題與介面要點已簡單概略整個ios介面設計的大方向,然後再利用幾個分類章節詳細說明應用概念,目前預計使用四個篇幅來完成ios介面指南的閱讀重點,分類如下:

1.介面要點、欄位/視窗/控制元件、2.應用架構與用戶互動、3.視覺設計與圖標圖像、4.結論與其他(系統功能與擴展)

ios介面要點

這裡大方向明確告訴你,在整體介面設計上需考量介面清晰性、內容易讀性(遵從)與操作邏輯性(深度)。【介面清晰性】基本條件是圖標與文字在裝置中清楚顯示,在這兩者與介面元素的結合下,傳達給使用者更利於操作與辨識的使用體驗。介面元素可能包含圖標、文字、空間、顏色(對比度最小為4.5:1,但最好為7:1)。

左圖為對比度示意、中圖為inVisionAPP、右圖為pb+APP

pb+APP可能需要調整的方向:

  • logo圖標不適合放置在內容之中,並非重要內容也無功能性,可放置在啟動畫面上。
  • 登入圖標與標籤欄圖標樣式可一致性;標籤欄的配置較特殊,應該參考介面指南樣式
  • 文字的排版上可再調整,如“歡迎回來…”可為一列,減少畫面分列層次;畫面中的“Not Log in…”也避免與圖示重疊。

【內容易讀性】使用者快速理解並互動操作,主要考量介面動作的流暢度與合理性;雖然指南中提到,為了頁面簡潔最好不要使用漸層和陰影,但因APP類型不同,合適運用也可以達到加分效果。全螢幕內容可隱藏不必要的元素、淺色文字已讓人認為是提示資訊。

左圖為ios行事曆、右圖為AHORRO記帳APP

AHORRO與Android介面有些微差異:

  • 可將標籤欄配置為一列,因標籤數量在容許範圍內(Android為左側選單),在畫面中為常駐顯示容易干擾內容。
  • 記帳時新增的項目、支出收入的切換,各別有合理且一致性的開啟方式;如頁面從左方滑入時,舊標題也會跟著往左移出接替新標題。

使用者更容易理解APP操作,三者可說是相輔相成,【操作邏輯性】考量的是視覺層次與微互動效果,例如開啟附件,從按鈕指壓處展開一個覆蓋原內容的視窗,讓使用者知道頁面層級關係,關閉之後將附件內容往按鈕處縮回。良好微互動體驗可增加愉悅感,頁面間的轉換效果可表現深度感。

左圖為google日曆、中圖為永慶APP、右圖為住商APP

住商APP可能需要調整的方向:

  • 找屋APP重點層級在地圖與搜尋之間循環,在條件搜尋中並未有地區選項,故只能先使用地圖鎖定範圍。
  • 若選擇區間不大,可改由滑塊控制區間;拾取器樣式不夠直覺,兩者的高度可再增加。
  • 可將更多內容全部展開,可知道所有條件,由使用者自行設定目標範圍。
  • 部分選項可以提供使用者自行輸入。

看完整體性大方向之後,給予每個頁面/邏輯基本的設計原則,也是ios介面指南重點,方向與原則是貫穿整個APP介面設計的精髓。

【完整性 Aesthetic Integrity】
介面與互動結合的完整性。使用簡潔的圖表、標準控制元件、預測使用者行為等,讓使用者把注意力集中在正在執行的事情上。遊戲需要更多沉浸式,例如在等待畫面時不只出現活動指標(loading),也能看見接下來進入的場景鏡頭。

【一致性 Consistency】
操作與介面設計使用系統樣式、或相仿,從啟動圖示、圖標、介面風格、文字、名稱,讓使用者在進入APP後大幅降低學習空間,快速適應操作,所有元素在認知上都是熟悉的。

Marvel APP介面

使用Marvel創建新頁面體驗:

  • 整體介面保持簡潔,每個頁面中提供的選項皆為重要,邊引導邊操作進行每個步驟。
  • 手機版並未提供刪除專案功能(專案內單獨的頁面可自由刪除)。
  • 在一致性當中不一致的元素會變得非常突顯,必要時適合用於重要功能。
  • 項目名稱輸入框右側可添加“刪除”按鈕。
  • 專注於目前正在執行的操作上,區塊佈局中只會提供區塊樣式選擇,在點擊創建區塊後才會進入“該區塊”編輯模式,基礎原型製作的功能完善。
  • 工具按鈕熱點空間適當好點擊,圖標風格一致且直覺使用,在編輯畫面上拖曳時顯示基準格線(預測行為)、與自動對齊。

【直接操作 Direct Manipulation】
通過直接操作,使用者可以馬上看見結果,即所見即所得。

【反饋 Feedback】
搭配直接操作,讓使用者了解操作後的結果。如開關按鈕的高亮黯淡切換、點擊後的等待畫面則顯示進度條,無障礙需要更多的元素來作操作反饋,可使用視覺互動與聲音效果。

Duolingo APP
Paper APP

學習類型的APP使用大量微互動來進行反饋:

  • Duolingo導入沉浸式遊戲體驗,如按鈕音效、動態圖形、虛擬道具等等操作吸引。
  • Paper內容中有大量的互動,需要考慮提供兩種顯示模式是否加重裝置負擔。
  • 元素的反饋效果是可一致性的,且用於重要的操作事件上,過多、過重的反饋效果可能會混淆使用者操作(如感壓判斷需耗費大量記憶體,可提供關閉設定)。

【隱喻 Metaphors】
介面上熟悉的操作,如上下層視窗顯示方式,你會知道在螢幕上高亮的視窗可以移開隱藏,顯示從黯淡轉為高亮的下方視窗。如按鈕、選擇器、頁面控件(點點)一樣可以憑直覺操作。

【使用者操作 User Control】
把操作的決策權交給使用者。APP可以提醒刪除的後果,但必須由使用者自行決定是否刪除,也可取消正在進行中的操作。破壞性的操作必須交給使用者主導;如輸入密碼時顯示適當的鍵盤、從系統或紀錄中提供使用者可能選擇的資料、或自動存擋,這些則是APP必要時應該做到的。

Instagram APP

Instagram很有ios介面的簡潔風格:

  • (上圖左1)將分段控件轉變為圖像似乎會讓文字辨識度降低,縮圖右上角不起眼小圖標清楚標示類型。
  • (上圖左2)以照片為主角,每個按鈕在作用中樣式成為點綴;你會知道留言與分享按鈕在哪裡、頁面控件最多顯示5個點點,並巧妙使用大小來控制目前圖像位置。愛心直覺是喜歡,為“點讚”功能,並賦予互動式元素與“追蹤”功能相同,愛心則可隱喻為“加入我的最愛”功能。
  • (上圖右2)讓使用者決定APP權限,若不同意也能使用其他功能。
  • (上圖右1)選擇“刪除”會再次確認,若首次使用則會顯示“典藏”說明,功能類似“封存”,僅出現兩次。
  • 個人頁的漢堡選單不能點擊!?

個人認為APP的介面與功能性是必然共存缺一不可,完善功能性加上良好介面體驗,所獲得成效可能是1+1大於2,若其中為功能性或介面設計缺失,如某個按鈕點擊後毫無反應、或找不到下一步按鈕,絕對會造成1+0小於1的後果。

一、欄 Bars

告訴使用者目前的位置,可包含啟動操作的按鈕或標題等元素。其他包含狀態欄、工具欄。

導航欄 Navigation Bars
通常在狀態欄的下方,通常在左側有返回按鈕,右側可以包含控制元件,必要時可隱藏整個導航欄。

  • 導航欄必須保持簡易,玩運彩透過訪談得到數據,大多數使用者認為“回文通知”放置在導航欄是可以接受的,並使用文字作為按鈕是清晰易懂,儘管指南希望最多控制元件不超過2個,還是可依APP類型與使用者需求做適當調整。(在指南中有提到“開關”僅適合在列表中使用,此加入開關圖示為強化按鈕切換直覺操作)
  • 導航欄可使用分段控件,注意每個熱區寬度適中、勿圖文並用,如選項過多時可使用選單。
  • 分段控件內的項目必須為展平結構,雷速體育APP則是另開新頁面,頁面動向容易混淆。
左圖為玩運彩討論區APP、中圖為企鵝直播APP、右圖為雷速體育APP

欄 Search Bars
可在內容、或單獨固定在導航欄顯示,必要時加上“清除”與“取消”按鈕,可在搜尋欄下方顯示說明或提供常用的項目,加快搜尋操作。

  • FB在搜尋欄右側加入搜尋範圍切換,得以在某個群組中搜尋動態消息;範圍欄的文字有再縮減的空間。
  • FB在輸入前就先顯示“近期搜尋紀錄”,在搜尋大範圍目標時會使用(如拍賣類型的APP);Sports則是出現相關關鍵字搜尋,在有特定範圍時使用。
  • Sports搜尋按鈕置於導航欄右側,點擊後展開,並有刪除輸入按鈕(FB則使用QR碼按鈕)。
圖左1、2為FacebookAPP、圖右1、2為YahooSportsAPP

標籤欄 Tab Bars
顯示於螢幕底部,可包含任意數量的標籤,樣式在視覺上一致性,通常使用三至五個標籤。

  • FB標籤數量使用稍稍密集,點擊範圍勉強還能接受,這五種類型標籤可能是使用者必用分類,將其他標籤收納至“更多”選單內(會自動替換常用標籤)。
  • 標籤使用必為常駐顯示的展平結構,若目前尚無功能也須在內容顯示說明;另可使用小icon做提示、或微互動效果。
  • 若使用特殊標籤必須確認使用者可辨識、或熟悉使用,否則加上名稱。

二、檢視視窗 Views

在APP中見到的主要系統介面,包含文字、圖像、微互動和交互元素。其他包含行動表、圖像、地圖、網頁、彈出視窗、拆分視窗、文字視窗。

【集合 Collections、活動視窗 Activity Views、提醒 Alerts

  • 集合可管理一組有序的內容,適合大小不同的項目如照片,強調可輕鬆選擇目標,在切換每個階層時必須保持在同一個位置。
  • 活動視窗針對選定目標執行,除了自由開關內建的操作外,也可自訂操作;使用者已習慣從“操作”按鈕進入活動視窗。
  • 預設提醒介面無法做樣式修改,更改樣式需重寫連動套件;提醒頻率降低,可讓使用者警覺;說明必須簡短完整,按鈕名稱對執行結果一致,有可能被點擊的按鈕放置在右側(若有“刪除”按鈕必須明顯區隔樣式)。
左、中圖為ios照片APP、右圖為玩運彩討論區APP

列表 Tables
需要分類大量內容數據時使用,如設定操作,可為分段(大螢幕中可為拆分視窗)或分組的條列顯示方式;需要注意的是不任意變更列表順序,必要時可在列表右側增加其他控制元件。

  • 兩者在操作列表內控件同時,皆提供反饋。
  • 信義APP在介面體驗上良好,設定收尋條件時考慮使用者需求,如提供自訂輸入欄位、即時檢查搜尋結果;若以功能完整性來說則永慶勝出,介面平衡不錯,將項目、選擇明顯區隔,以主色強調操作元素,字級使用恰當,左右間距在瀏覽上較輕鬆,缺點是圖示作用不大,若移除可讓介面更簡潔。
左圖為信義APP、右圖為永慶APP

三、控制元件 Controls

使用者在主導APP操作必要的交互元素,可以是對APP下達指令或接收反饋。其他包含開關、步進器、滑塊、輸入框、頁面控件、更新、分段控件等等。

按鈕 Buttons
可在任何地方使用的控制元件,自由度高可為文字、圖形或並用;需要注意的是按鈕的名稱,必須簡短並清楚說明功能。系統按鈕分為一般按鈕、訊息按鈕、添加按鈕三種。

  • 玩運彩討論區內容中,按鈕以顏色來區分重要性,使用一致性按鈕邊框,依據頁面內容放置合適位置、按鈕名稱篩選,並透過訪談進一步確認使用者操作是否順暢。
  • 按鈕是被經常使用的互動元素,NikeRunClub登入頁中有幾種範例,主要與APP色系一致的登入按鈕、FB按鈕;次要為忘記密碼、立即加入,單純使用文字降低重要性。
  • TripAdvisor中圖形文字並用的“關注”按鈕,可加深使用者對按鈕功能的印象,並提升按鈕在頁面層次的重要程度。
左圖為玩運彩討論區APP、中圖為NikeRunClubAPP、右圖為TripAdvisor旅遊APP

編輯選單 Edit Menus
長按內容文字或圖片,會顯示對應目前內容的操作指令;需要注意在頁面上不要使用與編輯選單內指令相同的按鈕、在按鈕以外有用的內容中使用、必須保持名稱簡短。

  • 後方有"…"表示還有下一步操作;Facebook僅提供複製指令。
左圖為玩運彩網站、右圖為FacebookAPP

進度指標 Progress Indicators
進度指標常用於等待中畫面,讓使用者知道必須等待多久,若為無法量化則使用旋轉指標;需注意的是必須放置在正在執行中的區塊。

  • 進度指標在頁面載入中可放置於導航欄下方,以畫面左右邊界為起迄。
  • 使用與APP相同的元素,微互動可增加沈浸感,如遊戲中的loading畫面;也可在等待畫面中加入一些APP操作提示、廣告元素等等。
  • 進度指標能顯示時間或完成度,使用者並可隨時終止取消進行中的操作。
示意圖片來源:google

One thought to “ios介面指南01”

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *