產品相對穩定可控時，記錄這個項目全過程。內容涵蓋交互/視覺設計層面的需求分析、功能設計與執行，更願分享設計思想與理念憧憬——設計區別於美化，在於被賦予驅動靈魂。

項目背景

milk香港版，內部命名「milk mobile」。香港潮流雜志《milk》移動領域合作嘗試。目標設備：主流中高端便攜設備（iPhone/iPod touch/Android Phone/WP7…）。iOS版如期發布，獲Apple App Store「新品推薦」與「熱門推薦」，Lifestyle類別排名第二。三個月從零開始設計執行。

設計生命週期

清晰Timeline使設計在時間與質量間平衡，關鍵里程碑有產出，跟隨項目推進。

milk mobile設計定義

品牌與內容定位：面向城市快速消費的精神糧食。特質：高時效性、眼球經濟、缺乏耐心。視覺與操作營造氛圍：

• 信息傳遞高度流暢
• 信息呈現節奏感
• 輕松操作瀏覽環境

探索從Splash Screen開始

Splash是用戶進入App至程序完全可用前的首個視圖。

Splash Screen存在價值

• 品牌識別（權重30%）：桌面icon進入時傳達品牌象徵手寫milk字符，與其他產品形象統一，深化認同歸屬感。
• 必要數據加載與反饋（權重70%）：對網絡與Cache不同狀態的Scenarios處理，提供良好反饋。

iOS HIG對Splash有詳述，但不贊同「Launch Images」定義。我們感知的信息是流動的，圖像與承載信息表現應流動貼近感知。流動表現更接近Animation，iOS文字示意誤導設計師並限制可能性。Launch/Splash是無限延展的屏幕空間，不僅是「圖像」。

跨平台差異

Android注重實用性：若應用有耗時初始化，考慮展示Splash或盡快渲染主視圖再異步填充，必須指示進度避免用戶以為凍結。
WP7注重信息傳遞效率：別為品牌用Splash，避免用戶關聯性能差；僅用於極長加載時間的反饋與時間感知縮減；別用動畫Splash（用戶常以為動畫導致加載慢，往往屬實）。
通常尊重平台Design Guidelines，使App與OS融為一體。

milk香港版Splash Screen線框與場景

基於上述定義沉澱設計（細節受NDA限制不公開，可測試App觀察不同Scenarios表現）：

• 無網絡無Cache：App不可用，無數據App醜陋。需友好幫助界面，提供狀態反饋與解決方案，易識別區域提供異常網絡狀態與「重試」入口。
• 有網絡無Cache：客戶端從服務端取得少量必要數據，無縫過渡。
• 無/有網絡有Cache：優先讀取Cache，弱化用戶無需參與的載入狀態，無縫過渡。

受益於尺寸變形動畫，milk logo從Splash自然轉場至App頁面，同時漸隱Splash背景與提示信息，結束Splash。

視覺設計與交付

• 視覺風格統一於App完整視覺設計
• 黑白色調，賦予皮革材質，幽暗頂部光線滲透元素，致力簡潔不失細節（視覺設計單獨成文）
• 使視覺重心停留在豐富資訊信息
• 針對iPhone：320×480與Retina 640×960兩種尺寸（px）
• Android屏幕碎片化，實踐驗證480×800為體積與質量最佳妥協

Redlines圖像為開發提供參考，推動項目順利。時間充裕時執行Flash高仿真模型，更高效推動溝通並供開發參考。

結語

Review設計是自我提高過程，望對讀者有幫助。

文章來源：mdong.org 轉載請註明出處鏈接。