30 天前的第一篇文章，我們從一個帶有灰色取消按鈕的訂閱畫面開始聊起。今天這篇完結篇，想帶大家看一個真實發生、規模非常龐大的商業案例，看看這些介面設計的細節，在...
填寫完資料準備上傳身分驗證的照片，畫面跳出一行字：「檔案上傳失敗，請稍後再試」。我們通常不確定是檔案太大、格式不對，還是單純網路訊號不好。順手重新整理頁面再試一...
買機票或規劃旅遊行程的頁面，放滿了精美的景點照片、飯店推薦、租車優惠跟免稅品目錄，整個畫面看起來超級豐富。我們一路滑到底部按下確認付款。事後看明細時，剛好發現角...
大家中午點外送的時候，通常會有自己特別喜歡的固定餐點。像是點一份夏威夷拌飯，習慣挑選藜麥、生菜、鮭魚跟蝦卵，淋上橘醋醬，最後還要特別備註不加芹菜跟香菜。 有時候...
幾天前在滑社群的時候，看到一家看起來超好吃的餐廳，順手就按了收藏。今天剛好想找出來貼給朋友，打開 App 點進個人主頁，再點開右上角那三條線。 跳出來的選單裡有...
大家逛網購的時候，商品頁面上的「加入購物車」跟「立即購買」兩個按鈕通常靠得很近。有時候我們只是想先加進購物車，等一下再慢慢挑，手指稍微偏了一點點到「立即購買」，...
多數 App 裡，紅色通常帶著警示的意味，綠色則給人一種可以放心前進的安全感。在某些訂閱制服務的取消頁面中，設計團隊把顏色的配置稍微做了轉換。「確定取消」用上了...
註冊帳號時，整個過程通常會被拆成好幾個步驟。走到第四步時，我們有時會發現第二步的方案類型選錯了。想點上一步修改，這時畫面上剛好沒有返回按鈕。 按下瀏覽器內建的上...
大家網購結帳時，應該都有過類似的經驗。在結帳頁面按下「確認付款」後，畫面剛好沒有跳出轉圈圖示，也沒有顯示「處理中」。 這時候我們通常會以為自己沒按好，很自然地又...
大家打開手機遊戲，想買一點鑽石解鎖新角色時，儲值頁面通常會列出三個選項：「60 鑽 NT$30」、「300 鑽 NT$150」、「680 鑽 NT$299」。我...
最近有一部低成本動畫《牛來》引發了很大的關注。這部由導演跟媽媽兩人花了五年手工製作的電影，剛上映時票房只有七千多元人民幣。 後來，觀眾開始在社群上分享這部電影的...
大家逛網購或使用 App 時，應該都遇過這種彈出視窗。畫面問你想不想領取專屬折扣碼，底下的按鈕一個寫著「開心領取」，另一個拒絕選項則是寫著「忍痛放棄」或是「狠心...
大家回想一下，逛網購時把稍微高單價的商品（像是猶豫了很久的相機或電子產品）先放進收藏清單的經驗。 過了幾天，下班通勤正在滑手機時，畫面上突然跳出一則推播通知：「...
大家週末在串流平台追劇時，經常會遇到一個情境。 一集剛剛播完，畫面右下角馬上跳出一個提示：「5 秒後自動播放下一集」。這時候我們不需要找遙控器，也不用移動滑鼠點...
大家在網購準備結帳時，常常會在購物車頁面看到一條進度條，上面寫著「還差 NT$10 元即可享免運」。 看著進度條跑到七八成，剩下最後一小截空白，這時我們經常會順...
大家平常在逛網購、看保健品的時候，畫面裡經常會出現一種設計：一個金色的圓形勳章，上面寫著「專業藥師推薦」，旁邊還搭配著一個白袍人物的小圖示。 在猶豫要不要下單的...
大家手機裡可能都有裝過那款學語言的 App。裡面有一隻很有戲的貓頭鷹，會陪著你上完第一堂課，連續打卡時會開心地幫你歡呼，還會用各種生動的表情幫你加油。 有時候剛...
大家回想一下剛註冊完新服務的經驗。進到首頁後，畫面上方經常會有一個提示寫著：「個人檔案已完成 80%」。 剩下的那 20% 通常只是換個大頭貼，或是勾選幾個興趣...
下載一款全新的健身 App 時，第一步通常會先問「你的健身目標是什麼」，接著問「希望多久看到成果」，再來是「每天願意投入多少時間」。 每一題都只要輕輕點一下，...
最近有一款名叫 SlapMac 的 Mac 軟體，售價 7 美元，功能非常單一：只要拍打你的筆電，它就會發出各種慘叫聲。 裡面內建了 8 種情緒、130 多種音...
大家回想一下最近搶熱門演唱會門票，或是報名大型體育賽事的情境。 好不容易擠進了選位畫面，心裡可能還在猶豫要不要多花點錢選個視野更好的前排座位。這時，畫面上方出現...
大家回想一下平常下載 App 的經驗。 有一種是一打開就要求綁定信用卡才能免費試用七天。遇到這種畫面，我們通常會下意識先關掉。 另一種是打開網頁，直接讓你上傳照...
想像一下，你在逛購物網站時，畫面右下角是不是常跳出這種小提示：「台北的陳小姐剛剛買了這件商品」，過沒幾秒又跳出「新竹的林先生也下單了」。 雖然你沒有特別去算它到...
想像一下這個日常：睡前你想放鬆一下，打開 Threads 或 X（Twitter）的「為你推薦」頁面。原本只是想看看新鮮事，結果滑沒幾篇，就看到一篇觀點極度偏激...
點進某個 App 的隱私設定，你可能會先看到一排看起來人畜無害的分類：「帳號」、「安全性」、「隱私」、「廣告偏好」。 好不容易點進廣告偏好，畫面又跳出十幾個子項...
想像一下這個畫面：點進一個軟體的訂閱方案頁面，眼前攤開六個選項，每個卡片底下還掛著十幾條打勾打叉的功能比較表，外加幾個加購項目。你原本想認真比價，但來回滑了三次...
當你不想再用某個訂閱軟體的時候，點進取消訂閱，先跳出一個「你確定要放棄以下福利嗎？」的畫面，往下拉還有一個「離開前先聽聽我們的挽留方案」，接著又塞了一份問卷硬要...
訂機票的時候，頁面上跳出一行小字：「這個艙等只剩 2 個座位」。你其實還沒決定要不要訂，甚至還開著別家航空公司的網頁在比價。但看到這行字的那一秒，手通常已經先點...
你有沒有點進一個購物頁面，看到「原價 $2,999，特價只要 $999」，明明壓根不認識這個牌子、也沒比價，卻覺得「哇賺到！」的瞬間？ 大腦其實沒有一把客觀的價...
Modal vs Page：不是 UI 選擇，而是「你要不要中斷使用者」 在產品開發裡，有一個問題幾乎每個團隊都會吵過： 這個功能要用 Modal，還是開一個...
Hailey
iThome鐵人賽
看影片追技術