Windows phone 應用開發[3]-UI 設計

本篇來談談Windows phone UI設計.這個有點讓我痛苦的話題.

其實談到移動平臺的設計.原來沒有實際接觸Windows phone 產品開發工作時對UI設計這個概念不是特別強烈. 並沒有感到PC端Application和移動終端上在UI設計之間的差異.但當意識這是一個塊獨立區域和Pc端UI即存在關聯而又具有自己獨立的特點時.當一個產品從需求孵化階段到用戶羣體定向設計的成型.才感到這個方向作爲開發人員的欠缺. 在6月份時

中間讀了<<User InterFace Design For Programmers>> :

這本書應該是我度過三本UI設計書中感覺最好的一本了.內容寫的很輕鬆.語言風趣.特別是裏面舉得開發人考慮UI的方式真的和我親身感受如出一轍.有好幾個地方給我印象深刻.特別如果你站在一個DEv角度去看的裏面有些觀點甚至讓你有些無比糾結.但又不得不承認自己確實存在這些情況.比如在這本書序言就對UI設計一個比較有意思的觀點:

我們表面上認爲自己在爲用戶設計，但是無論我們如何努力，我們都只是在爲我們自己認爲的用戶設計，或者更可悲地說是，爲我們自己設計。然後我們再證明這軟件也對其他人有效.

程序員們善於邏輯思考，在編程時容易沉浸在自己的世界中，還有自以爲是等等，這些特點讓UI設計對他們來說變成了一個頭痛的問題。但是在進度緊張的項目中，產品經理沒法對每個軟件細節進行把控，或者他們沒有這方面的能力。UI設計的任務只能讓程序員一塊做了.

接下來面對問題……

讀起來非常有意思.受益匪淺.雖然出版時間有點早2001年.但依然推薦各位做開發的同學好好讀讀這本書.

PDF英文原版下載地址見附件。

回到Windows phone Metro設計.這因該很多用戶能夠直觀辨別Windows phone主要因素之一. IPhone水晶風格和Android白底黑字不同.WP最大區別在於.IPhone和Android 都是以應用爲主要呈現對象.類似那個通用的八宮格. 而MEtro 界面強調的是信息的本身.而不是冗餘的界面元素.Metro設計理念來源微軟HQ位於西雅圖地區的King County Metro Transit裏的標示取得設計靈感的.如下是中文[TW臺版] WP:

雖然是個新東西.很多人也很喜歡.但依然對用戶使用來說存在挑戰.特別是體現用戶對這種認同感上.記得第一次和我們設計師交流時.總是不斷有人問爲何採用這種大塊圖標等等各種各樣的我看來很“奇怪”問題.其實在面對這些問題時我們也往往忽略問題本身還是來源用戶認同感.用戶本身也是個受體.相對IPhone和Android在07年發力至今.用戶已經接受或是從這兩個平臺獲得對智能手機Smart Phone啓蒙和認知的. 相對Windows phone Metro在10年第一個版本的介入. 時間上已經慢了一拍.這個時間差導致了IPhone和Android對用戶Smart Phone 觀念中存在先入爲主的情況. 這點上是我在不斷和設計團隊交流中感受比較深的一點.

如果你的身邊還存在很多不認同Windows phone 或對Metro詬病的人. ——這也正常.請記住.對於Windows phone認知用戶也需要時間.

談到Metro這種設計.一直很想談談Metro設計前景和現狀.

metro UI是由微軟公司開發的內部名稱爲“ typography-based design language”[基於排版的設計語言].最早出現在微軟電子百科全書95，後來的產品如：windows媒體中心、Zune播放器 都有用到這項技術

在MS Build大會展示Windows 下一個OS-Windows 8.相信看過人應該Win8 Metro設計感到耳目一新.:

其實MS規劃Windows 8可以追溯到09年.能夠在MS重要陣地操作系統得到更多的應用.Metro前景不僅體現在Win8上,同樣可以看到Metro這種設計理念逐漸***到其他產品線上類似Metro 風格的Skype 3.0：

Metro版本的 Windows Live/MSN:

Metro版本的IE 9 能接受嗎?：

當然從MS出去的設計師同樣也影響到了FaceBook。在其客戶端有所體現:

有***同學可以體驗這個客戶端 Metro風格很舒適 FaceBook發送消息:

Metro UI該技術已於2010年初（美國）獲得Metro UI專利批准（USPTO）。metro UI最新的應用是windows phone 7智能手機系統，並將應用於未來的windows 8、office 和xbox 360產品中.可見將來能夠在Windows 平臺看到更多Metro UI產品逐步出現.將作爲MS下一個主流設計但當重要角色.

如下想重點來談談在Windows phone UI設計.

我們設計團隊都具有成型IPhone和Android設計經驗.也具有完善設計流程.但對Windows phone剛開始完全就是一個小白. 中間通過真機.或是內部培訓方式逐漸介入Windows phone產品設計中來.但是後來在不斷溝通依然問題頻出. 說到底在設計團隊雖然對WP有了初步的認識但依然沒有一個人真正在日常生活使用Windows phone來解決自己實際問題.後來對所有參與Windows phone UI設計師採取強制使用兩週. 效果明顯.

因爲在討論UI原型設計時設計師不在問那麼多”Why” WP爲何要這樣設計?. 而是說 “How” 如何在WP做這個產品設計.

在微博上有人曾問過我.如何慢慢切入WP UI設計,其實官方給出Windows phone 用戶UI交付規範2.0 就是最好教材. 至於這個2.0文檔中提到很多明文規定就不多做贅述/. 那麼在Windows phone UI設計具有哪些潛藏”軍規”需要設計師去遵守. 針對Windows phone UI用戶體驗問題可以分爲三個等級:

Windows phone 用戶體驗三個等級:

[1]：必須修改-必須立即處理問題.以確保原設計能夠體現APP自身特點和價值

[2]：應該修改-這步在發佈前要處理的問題, 可能在功能成型後需要UI微調

[3]：建議處理-遵照Metro GuideLines 可以繼續改善用戶體驗的地方

如下針對這三個等級做出具體截圖實例來說明UI設計中需要注意的地方：

[2]文字和佈局對齊:

應用中可以適度使用自定義或品牌固有字體. 自定義字體可以用在頁面標題或概論章節標題中.佈局向左對齊.左側頁邊距24PX大小. 這個標準同樣適用於適用於樞軸視圖和全景試圖. 注意樞軸視圖內容按屏幕優化並縱向對齊.

[3]APP應用的圖標

圖標註意如下兩點:

A:符合Metro設計原則的品牌設計理念

B:避免在圖標適用3D 字體- • 漸變色• 囿角• 沒有含義的圖標,標誌只在“亮”或“暗”主題下醒目.

或白色背景上的黑色標誌 .原則上避免使用.

左邊爲正確使用,右邊爲誤用:

[4]元素間隔:

所有元素的水平或垂直間隔應一致，建議間隔爲12像素或12像素的倍數.這個在文字或圖片在頁面上佈局時需要額外注意:

[5]控件使用:

在全景視圖和樞軸視圖中避免使用開關控件SwitchTaggleButton.避免使用遊標控件Silder. 在操作左右滑動時頁面級動作容易被控件的操作所攔截.特別是在設置界面.

儘量避免使用內嵌Web控件WebBrowser.當應用必須內嵌Web內容時需要滿足如下兩個情況:

[1] 關閉設備平移和縮放等觸碰功能.

[2] 確保WEbBrowser內容完全可讀,可預覽

另外在頁面UI輸入比較多時.類似用戶註冊頁面.存在多個TextBox在用戶輸入.設計師總是反饋鍵盤會擋住輸入框TextBox. 特別是這點QQ客戶端也有體現. 這種方式一般慘通過控制頁面ScrollView滾動的方式動態控制.避免用戶操作彈出的鍵盤會遮擋主下面操作元素:

[6]導航:

在頁面導航中.Windows Phone不需要關閉按鈕，關閉行爲由硬件設備自帶Backup控制鍵完成,通過使用退回鍵建立導航機制.

[7]全景視圖:

全景視圖和樞軸控件時Windows phone 中所獨有的.正確的使用方式:

•背景480×800像素到1024×800像素之間

•每一個Section比例16:9

•Section中縮略圖如果不加文字描述的話，可以一行放置兩個，並且建議一行最多隻放置兩個

避免如下情況誤用:

•內容佈局超出頁面

•使用導航條

•背景顏色豔麗

•縱向滾動條

其實如上只是能夠談到Windows phone一些可以統一UI設計細節。可能不同產品APP定位不同.2.0UI也常見的設計被打破.其實這個不僅使我們在做這樣的工作.官方在沒有退出Mango2.0 UI規範明令寫着全景視圖空間禁止使用ApplicationBar空間.主要保證輸入和展示空間.但在Mango版本中依然能夠發現ApplicationBar退出一種mini模式而且在Marketplace全景視圖中出現了APPlicationBAr.其實爲了改善用戶體驗也在不斷打破自己頂下UI規範.

另我們參考設計時Product ower 常會綜合運營的考慮.往往這種情況下.官方給出的UI規範都要服從實際市場需要而發生顛覆行修改也是存在這種情況.類似在列表展示和Ui顯示層級的用戶體驗中.

Windows phone 這種類似網頁的展現形式和採用固體按鈕Backup鍵執行的導航方式. 相對IPhone中明確上下級關係明顯不同.這主要體現在如果業務中流程. 而恰好這個流程比較複雜.注意這種方式導致Windows phone 頁面層級比較深情況下. 另外中間操作不同的提示和跳轉頁面都會照成用戶在UI界面之間的迷失.複雜的UI流程如何避免?

A:首先減少頁面的數量.從設計層面減少層級關聯.主要目的是降低流程帶來比較深層級關係

B: 只做最關鍵的事.如果是一個常用的客戶端儘量把更多事情放到服務器端來做. 這是處理問題的捷徑

C: 減少用戶在頁面間操作的路徑. 也就是說流程中涉及到一件事設計中要考慮採用最短路徑去實現. 此時應注意用戶交互體驗

關於流程其實更像強調.對於常用客戶端儘量把更多工作交給能力更大的服務器端來說. 客戶端發展方向應該是”偏瘦”的。針對Windows phone 採用導航方式.複雜的UI流程和多層級關聯會徹底毀掉一個APP 最基本的用戶體驗. 用戶要在這個流程中短時間要接受更多的新概念.這樣的設計對用戶在UI交互操作來說就是一場噩夢開始.層級關係最多應該保持4級之內. 複雜流程是用戶UI交互體驗的”殺手”

其實在很多應用場景中.UI設計師在定位原型後.注意在確認效果圖前. 一定有必要去了解Windows phone Toolkit 要知道在具體數據呈現採用什麼樣控件UI元素.這同時也是BI的工作之一.目的是保證UI設計效果圖與最終開發版本之間不存在衝突. 類似如果UI設計師不知道Windows phone 存在某些元素他通常會採用比較通用控件去實現這樣會導致佈局混亂完全無Windows phone 任何特點類似如下:

如果這個UI設計師知道在性別3確定選項中在Windows phone有一個ListPicker控件去呈現. 這樣的混亂的佈局方式也就不會存在.對於這些低級失誤同時開發團隊也具有職責對於不懂編程的UI設計團隊進行一定控件使用培訓是必要的.

在設計過程中.針對某些比較類似Windows phone 系統界面UI操作. 儘量不要嘗試去打破這種統一設計規則.多參考WP系統的設計做法.類似發短信信息這種操作.其實在用戶行爲就是保持用戶使用習慣.記住用戶對陌生新鮮的概念往往都是牴觸的. 採用用戶熟悉WP系統UI處理方式將是規避這些問題：

在設計過程初期Product Ower有UI設計過程中有一個很重要的職責 -保持UI設計方案多樣可選. 其實一個好的設計方案完全在剛開始雛形的時是不斷通過爭論達到最後大家都能接受UI. 而在剛開始時Product Ower不要太多幹預. 應該儘量吧設計人員對產品的設想和想法儘量呈現出來. 這樣會在設計方案的初期形成3-4 設計方案.在討論過程比對效果往往也是最直觀的.也利於判斷UI設計在展現APP價值的優劣. 而一個好的UI設計方案誕生.需要是不斷修改貼近APP最真實的目的.

其實在UI設計中完全沒有好與壞的概念.記住UI設計目的其實只做一件事—最接近呈現APP自身的價值.

在這裏我只說了最接近.在文章頭部引述<<User Interface For Programmers>>觀點恰恰也是我所認同的.好的UI設計方案在一個小的人羣和短時間內是無法一觸而就的. 所以在產品規劃s是應該考慮劃出成型用戶UI交互體驗改善計劃,這些改善計劃是APP已經投入市場. 當你能看到最終直接用戶反饋的需求你就會發現做出好的UI設計不再是難事/.因爲你已經知道用戶想要什麼了….而用戶UI交互改善計劃也是對APP實用一種彌補措施.