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 八、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實用一種彌補措施.

 如上比較零碎記載我的對Windows phone UI設計一些體會.以下給出WindowS phone Metro設計一些設計師資源.:

Metro ToolKit Codeplex

Jeff Wilcox's "Metro" Desgn GuideLine For Developers ,V1.00 [針對開發Windows phone 一些UI指導]

Metro Twitter Client

Getting Started With Metro UI In DotNetBar for WPF

Metro design language Of Windows phone  [官方給出Lession]

還有一些必成成型設計資源和方案. 和在國外APP設計採用設計評估方案和設計草圖. 文件太大沒法上傳放到微博上.盡請關注.

Windows phone 應用開發: Windows phone應用開發[1]-Text To speech Windows phone應用開發[2]-數據緩存 Windows phone應用開發[3]-UI設計

[1]標題:

標題應該是左對齊，不該有背景，邊框，下劃線或任何其餘種類的裝飾，惟一例外的是可能使用到企業的LOGO：