👋 Hey there,

歡迎品嚐這週的設計私房菜，本期的主題包括：

1. 完整「觸控 Touch 設計」避雷清單

2. 優秀網站設計推薦 & 分析

3. AI 業界有哪些事情值得我們關注

在開始之前，請將這封郵件移動至您的主要 Inbox folder，這樣可以提高私房菜的遞送成功率喔～ ❤️

觸控設計避雷 Checklist

這份完整的「觸控設計避雷清單」綜合了 9 大類別的基礎要求與進階優化建議。

無論你是在初步規劃還是持續優化產品階段，都可以依據這份清單迅速定位問題並提升使用者體驗。

1. 觸控目標與可點擊區域

• 目標大小：所有可點擊元素區域（例如按鈕、圖標、表格）應至少為 44 × 44 像素，避免用戶誤觸或需要重複點擊。

• 圖標與標籤搭配：將 icon 與文字標籤結合使用，擴大可點擊區域，提升辨識度和操作準確性。

• 內邊距與間距：為連結、表單和搜索框設置足夠的內邊距，確保用戶點擊時不會誤觸其他元素。

• 功能分隔：將功能相反的圖標（例如「刪除」與「儲存」）分開放置，避免用戶誤操作。

2. 導航與布局

• 底部導航：在行動裝置上，將主要導航放在底部，最多設置五個標籤，方便用戶用拇指操作。

• 中心關鍵操作：將最重要的圖標或CTA按鈕置於底部導航欄中央，提升使用效率。

• 浮動按鈕：使用浮動按鈕（例如懸浮動作按鈕）提供快速訪問關鍵功能的途徑。

• 重複行動號召：在內容中重複展示關鍵操作，避免用戶需回溯尋找。

• 屏幕方向適配：確保介面在橫屏和豎屏模式下均易於使用，導航位置注意適應設備方向。

• 自適應設計：優化介面適配不同螢幕尺寸，保持觸控目標大小一致。

3. 手勢與交互

• 手勢支援：除了點擊和雙擊，加入滑動、捏合、縮放等手勢，增加交互的多樣性。

• 雙擊撤銷：允許用戶在同一位置雙擊以撤銷或恢復操作，提升靈活性。

• 多點觸控：為需要複雜交互的應用設計多點觸控支持，確保手勢間不衝突。

4. 反饋與提示

• 視覺反饋：用戶點擊時提供即時視覺反饋（例如放大效果或高亮狀態），增強交互體驗。

• 提示位置：將工具提示或資訊顯示在可點擊區域上方，避免遮擋操作區。

• 錯誤處理：提供清晰、即時的錯誤提示，使用顏色和文字說明問題及解決方案。

• 觸覺反饋：為關鍵操作（如按鈕按下）加入振動或觸覺反饋，提升單手操作體驗。

5. 輸入與表單

• 輸入區域大小：確保輸入欄位足夠大，適配觸控鍵盤，並提供即時輸入反饋。

• 鍵盤遮擋測試：測試鍵盤彈出時輸入區域的可見性，確保關鍵欄位不被遮擋。

• 下拉菜單替代：用切換開關或按鈕替代下拉菜單，提升觸控操作便捷性。

• 不精確點擊處理：當用戶點擊不準確時，顯示更大的選擇器視圖，幫助用戶更精確操作。

6. 內容與媒體控制

• 自動播放控制：用戶點擊屏幕時暫停自動播放內容（如輪播圖、影片），避免干擾操作。

• 複製與分享：為文字區塊提供複製和分享按鈕，提升內容操作效率。

7. 導航與分頁

• 上一頁/下一頁導航：

  • 移動設備：置於底部左右兩側。

  • 平板設備：置於屏幕中央的左右兩側。

• 任務完成時間：測量用戶完成任務（無錯誤）所需時間，優化用戶流程以提高效率。

8. 性能與優化

• 響應速度：優化觸控響應時間，減少延遲，確保流暢交互體驗。

• 單手操作：將關鍵控件置於拇指易觸及範圍，優化手勢設計支持單手使用。

9. 測試與評估

• 點擊測試：測試用戶重複點擊或輕觸的頻率，評估產品是否易於操作。

• 多設備測試：在不同設備和螢幕尺寸上測試，確保一致性。

*如果您想引用此清單內容，請註明出處並保留原作者資訊。謝謝配合！

精彩設計推薦

這次的推薦，來自精品珠寶品牌 Cartier 卡地亞

網站的主題是卡地亞 2024 年鑑，用來慶祝在過去一年中的非凡旅程。

網站透過高品質的設計，向我們展示了 Cartier 革命性的創造力、創新力和永恆的優雅。

視覺呈現方面保持了一貫的簡約和高級感。畢竟是 Cartier ，所以宣傳影片、照片等素材的品質自然屬於頂尖水平。

字體選擇方面，較多使用了 「Serif 襯線體字」。這麼做的目的是為了體現卡地亞品牌的高貴感、獨特性、古典與現代融合。與品牌的「永恆優雅」相互呼應。

網站出色的地方其實更多來自互動層面，無論是介面過渡效果還是標題加載的微互動。網頁效能也做的非常好，加載非常平滑，整個瀏覽的過程令人享受。

最讓我印象深刻的地方有幾個：

1. 進入網站的 Loading 動畫非常巧妙，透過逐漸放大的 ”365 Days“ 效果來突出”2024“ 年度回顧主題。

2. 進入首頁，Hero Section 部分採用了很常見的背景播放影片的設計，但是巧妙之處在於「左下角」同時多加入了一個區域用來播放更多與背景影片相關的內容。 這麼做，不僅提升了 Hero Section 的層次感，還可以讓用戶對內容更感興趣，增加了點擊率。

3. 當我們向下捲動的時候，不同 Section 之間的過渡效果非常順滑，並且視覺上呈現出一種類似紙張展開的感覺。 最出彩的地方是，捲動時夾在兩個 Section 之間的 Background 展示了和下一個 Section 內容有關的圖片，這樣設計第一可以讓主題的過渡更加自然；第二這種方法可以進一步突出主題的氣質，強化情緒傳遞。

💡 Insights

我們在設計專案的時候，不能僅僅侷限在“靜態”視覺的部分，不再是用什麼顏色？什麼字體？什麼素材圖片而已。

網站也好、APP也好，一定要多思考如何在不同的「深度」上做出創新。每一次滑鼠的點擊、捲動、手指的滑動、觸碰應該如何給出反饋？

這個反饋的過程必須與產品、品牌的主題、氣質相匹配，起到 1+1 大於 2 的效果。

想要建立自己的設計思維與 Sense，我們不能只是關注在 UIUX 設計領域，所有與「觀眾、用戶」有關的領域都應該去學習。畢竟我們設計出來的作品好壞，取決於背後使用和瀏覽的「觀眾們」。

另外，我會在接下來最新一期的 YT 影片中分享如何提升 UIUX 設計師美學素養的獨家心法喔～

AI 業界最新動態

🤯 OpenAI 正式宣布「Deep Research 深入研究」功能正式向所有 Plus 訂閱用戶開放。

這項可以說 ChatGPT 最強的功能之前只有每個月 $200 美金的 Pro 用戶才可享用。

可能有些同學還不太熟悉 Deep Research，這裡簡單介紹一下：

DR 是 ChatGPT 專門用來進行課題研究的模型。與普通 ChatGPT 相比，主要區別和優勢有

1. 主動的信息搜尋與整合，可以獲取最新數據，並且篩選、驗證、最後整合。

2. DR 專門為多步驟複雜的研究任務設計，它能夠解析複雜文本，深入推理，自動調整研究方向。

3. 與普通 ChatGPT 的回答不同，DR 可以生成媲美人類研究員的深度報告。研究效率和結果的可靠性不誇張的說是目前 AI 工具中最強。

不過需要注意，普通付費用戶每個月只能使用「Deep Research」提問 10 次（Pro 用戶上限為 120 次）。

👇接下來再來聊聊 AI 業界還發生了哪些值得關注的事情。

1. 微軟祭出免費功能

   微軟將 Copilot 的語音功能和 Think Deeper 工具免費開放，讓普通用戶無需額外費用即可使用先進的 AI 語音助手和深度思考功能。這降低了 AI 技術的使用門檻，用戶可以通過語音交互輕鬆獲取建議、制定計劃或解決問題，提升日常工作和生活的效率。
   

2. 亞馬遜推出「Remarkable Alexa」
   升級版的 Alexa 整合了更智能的 AI 功能。雖然可能需要付費訂閱，但是新版 Alexa 不僅能控制燈光或音樂，還能提供個性化建議（如食譜或購物清單），讓用戶更依賴語音助手來簡化日常任務。其普及可能推動智能家居成為普通家庭的標配。
   

3. 職場 AI 調查 
   來自 Pew Research 的一項調查顯示，美國 52%的工人擔心 AI 自動化會對就業產生負面影響，特別是普通的工作。 只有6% 的工人覺得 AI 的出現會提供更多工作崗位。 普通用戶尤其是職場人士需要了解這些趨勢，提前學習新技能（如數據分析或 AI 工具使用），以保持競爭力。
   

4. Perplexity 準備推出 AI 瀏覽器
   名為 Comet 的瀏覽器將引入 AI 驅動的搜索功能，提供更智能、個性化的上網體驗。普通用戶在瀏覽網頁時能更快、更準確地找到所需信息，這將提升信息獲取的效率，減少搜索過程中的時間浪費。
   

5. 蘋果在休斯頓建設 AI 伺服器工廠
   Apple 將在休斯頓建設新的 AI 伺服器製造設施，預計 2026 年啟用，創造約 2 萬個就業機會。外界提到的 5000 億美元是蘋果未來四年的總資本支出計劃，而非單一項目。 創造就業的同時，可能推動美國 AI 基礎設施的發展，但 5000 億美元的總額顯示這只是更大計劃的一部分。

   
   
   從這些趨勢中，我們可以明顯感受到現在的 AI 業界競爭已經處於白熱化。得益於中國之前 DeepSeek 的鯰魚效應，各大廠商也相繼推出更多免費、優惠的方案。使得我們普通使用者可以用更便宜更低的門檻體驗到最新的 AI 技術。

💗 Thanks for reading!

感謝你耐心品嚐完今天的私房菜，希望你喜歡這週的內容。也希望「避雷清單」可以為你的設計工作帶來便利！

歡迎你分享推薦給更多的朋友，那我們下期見嘍～👋

Taony