• UI 設計
  • 更新:2026-07-14
  • 初版:2021-02-02

拆解 UI:EZ WAY 易利委-1-Tab Bars

不曉得大家有沒有注意到,因為全球受到疫情的影響,很多實體店面都關閉只靠線上商店獲利。

非常多人失業,購買能力下降,銷售狀況更是雪上加霜。我自己習慣購買的幾個品牌甚至給出了 70% off 這種折扣。(然後我就買買買了。)

購買國外的商品進到台灣,必需先過海關,需要使用EZ WAY 易利委這款 App 報關,但當我打開 App,就像是開啟一場莫名奇妙之旅…

你可以透過上方的操作影片,發現一些「怎麼會這樣?」的奇思妙想。

或是直接下載 App ,這是款非常實用的產品,只要從海外買東西都會用到。包含淘寶和蝦皮,除非你都找代購,不然遲早要裝的啦~

報關的迷宮

  • 那個回主畫面,幾乎只有在主畫面的時候才按得到。

  • 懶人包…外連一張網頁圖片,使用者得背下懶人包裡的教學、離開這一頁,在看不到教學的情況下才能操作 APP。

  • 文字客服,也是嵌入網頁,好幾種關閉按鈕和俄羅斯套娃一樣,各位可以去試試看。

  • 更多服務 > 使用教學,根本壓著頭逼你看,滑個幾頁才出現「略過導覽」,字還和「點擊跳下一張」幾乎連在一起。而且上一頁的和下一頁的點擊操作和預期的完全不一樣。

常見問題的(+)(>)(∧)icon 非常微妙,把網頁操作的設計方式搬到 App 上又獨創一格。

在 iOS 裡其實有個很古早的設定,如果欄位上有個很明顯的(>)按鈕,點擊(>)按鈕和點擊欄位,前往頁面是不一樣的。再者,(>)有明確的方向性,應該要向右去下個頁面,而不是轉個方向變成(∧)。

  • 主畫面中間右方的「QA」是常見問答,應該是 FAQ 吧?和下方選單的「更多服務 > 常見問題」是同一個畫面。大概是使用者太笨了所以要把常見問題的入口多放幾個好讓使用者知道 App 怎麼用。

  • 右上角的設定…「關閉 App 」的切換開關完全是神來之筆,點了「關閉 App 」就關閉整個 App 了耶!求仁得仁有什麼不對嗎?下方選單的更多服務頁裡也有關閉 App 呢!真是太驚喜太意外了。

槽點太多了一篇大概講不完,這篇先講我覺得主畫面上明顯不太對勁的選單設計。照頁面外觀設計看起來像是 Tab Bar,但操作起來完全不是這麼回事。

Tab Bar

Tab Bars 和 Toolbars 這兩種選單十分常見,但真要說它們倆差別在哪…一個有字、另一個沒字?

來看個實例,就拿 App Store 來說,底下的 Bar 是 Tab Bars,平時咱們會怎麼操作它?

  1. 可能會在第一個選單頁「Today」 滑一滑,看看今天有什麼新玩意。
  2. 然後切去「遊戲」頁看看有什麼免費又好玩的遊戲。
  3. 突然想起那個誰誰誰推薦過某個 App 不錯用所以切去「搜尋」頁輸入關鍵字找找。
  4. 最後點了「App」去看看能不能透過熱門類別排行榜找到那款 App。

在這 4 個操作流程中, Teb Bars 是不是幾乎都存在於畫面上?

再想想看 Tab Bars 上的 5 個頁籤,以資料層級的角度來看,好像都是平級的對吧?

講通白一點,也就是你可能會在 A 頁籤操作操作、突然切去 B 頁籤滑兩下,發現了什麼所以跑去 C 頁籤的內容,然後點去 D 頁籤。

像是 FB,你有可能滑滑 A 頁的時間軸、看到通知小紅點跑去 E 頁看看發生什麼事、然後切去 C 頁社團瞄兩眼新貼文…

這就是 Tab Bars 的用法。

Tab Bars - Bars - iOS - Human Interface Guidelines - Apple Developer

Toolbars

最常見的 Toolbars 範例就是瀏覽器啦!

不管是 Safari、Chrome、Firefox,底下那條 Bar 就是 Toolbars。

(順帶一提,我現在用的是 Brave Browser ,老公推坑的,速度快很多。 )

Toolbars 上的操作都是針對現在頁面的內容,不像 Tab Bars 切來切去換頁面。

各種長得很像的選單

不是有 icon+文字的就是 Tab Bars、只有 icon 的就是 Toolbar,不是這樣區分。

很多時候有各種原因,只是外觀長得像而已。

工程師可以拉塊底圖、放個 icon+文字當操作元件,擺一排長條,看起來就很像運用內建元件做出來的 Bar。

但如果真的要使用內件元件的話,設計師們是不是要知道這個情況下該用哪種 Bar?Bar 上的 icon 尺寸多少呢?

Toolbars - Bars - iOS - Human Interface Guidelines - Apple Developer

特別提官方文件的原因不只是希望各位知道這兩種 Bar 的差別,也想讓各位多看看官方給的文件,不要害怕看文件,當你按了整頁翻譯後,其實官方文件沒有你想像中的那樣洪水猛獸。

後記

很多人在粉絲團傳訊問我 Redesign 要怎麼做、該怎麼思考比較好。當然是先從自己覺得好像哪裡不對勁的地方開始。

不只是拆解介面元素,可以的話我想加進一些你們眼中比較冷硬的知識,透過實例解說。

之後會聊聊資訊架構、列表設計、表單設計等等。

沒有意外的話我希望能寫一系列解讀 App 的文章…寫文沒靈感真是痛苦的一件事。如果你有任何希望我拆解的 App,歡迎留言或傳訊告訴我喔!

更多文章

wave
推播通知越多越好?這樣設計反而更有效
推播通知越多越好?這樣設計反而更有效

「叮咚!」深夜收到促銷通知,氣到直接刪 App?
推播訊息設計不好,真的會讓使用者崩潰!
到底怎樣的通知才不討人厭,還能提升互動?

為什麼你的 UI 讓人找不到重點?看看你的衣櫃就知道
為什麼你的 UI 讓人找不到重點?看看你的衣櫃就知道

你的衣櫃是整齊分類,還是塞到找不到衣服?
其實,資訊架構(IA)就像收納術,分類對了,使用者就能輕鬆找到所需內容,UI 設計也是一樣的道理!

為何明明是「好設計」,卻讓人用得很痛苦?
為何明明是「好設計」,卻讓人用得很痛苦?

你有沒有遇過這種狀況?
門推不開、按鈕搞不懂,結果發現「設計害了你」?
其實 UX 不只在螢幕裡,生活處處是可用性考驗!

內容清單 Content Inventory
內容清單 Content Inventory

對於 UI 設計來說,「內容」有 4 種:圖片、影片、聲音、文字。不管使用者最終想看到什麼、操作什麼樣的任務,都需要「內容」。那在開發流程中,「內容」會在什麼時候決定?

Akane Lee

Akane Lee

內心戲小劇場超多!每個事件背後,都有無數個為什麼,天天和自己的腦內聲音吵架。

Comments

wave
comments powered by Disqus

Press ESC to close