萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

WWDC 2015 親筆筆記:Apple Watch 官方釋出的 11 條設計微技巧

親歷 WWDC 2015 設計師提煉官方 Session 精華,配圖詳解 11 條 Watch 設計微技巧,直指性能與體驗核心,極具實戰參考價值。

核心信條:性能即體驗,2-5 秒定生死

官方數據:用戶單次交互平均 2-5 秒。盡可能快地呈現信息,是 Watch 設計的最高原則。

1. 激進優化 JPG:犧牲質量換速度

用戶行走中瞥視 4cm 屏,需極速加載而非高清。降低 JPG 質量、使用精確尺寸圖片,大幅縮減體積。

2. PNG 必用 PNG-8 + 黑色背景

PNG-8 顯著減小體積;90% 場景黑底顯示,直接用黑色背景替代透明通道,再經 ImageOptim 壓縮,效果拔群。

3. 逐步加載:不讓用戶傻等

大圖/地圖加載時,同步展示其他信息(文字、佔位圖),保持體驗連貫。

4. 佔位符尺寸必須與實圖一致

否則圖片載入瞬間內容「向下跳動」,干擾滑動操作,體驗極差。

5. 內容排序:重要信息零滾動可見

極短交互窗口下,關鍵信息必須首屏直達,視覺權重分配服務於「最快被看見」。

6. 返回鍵標籤 = 當前頁標題(非父頁)

iPhone 頂部導航欄容納雙標題,Watch 無空間。蘋果決定保留用戶更關注的「當前頁標題」作為返回標籤,犧牲父級上下文換取聚焦。

7. 觸控目標放大:≥ 75px (38mm) / ≥ 80px (42mm)

越大越好,確保手指盲操也能命中,補償抬腕晃動帶來的精度損失。

8. 必用 SF Compact 字體

San Francisco 字體提供 Compact 版專供 Watch,字符間距更大,小字號下清晰度顯著提升。

9. App 圖標專為圓形小尺重設計

  • 移除文字,保留核心圖形;
  • 簡化圖形並縮小;
  • 若功能為手機輔助(如相機快門),圖標直接表達該功能差異。

10. 設計稿無需預留邊距,表框天然提供 Padding

表盤邊框自帶安全邊距,設計時內容可貼邊佈局,無需額外留白。

11. 關愛色盲用戶:紅綠高對比在黑底可能失效

官方建議黑背景省電,但紅綠強對比在色盲/色弱眼中幾乎無差別。務必用模擬工具驗證配色可訪問性。

copyright © 萬盛學電腦網 all rights reserved