本篇來(lái)談?wù)刉indows phone UI設(shè)計(jì).這個(gè)有點(diǎn)讓我痛苦的話題.

其實(shí)談到移動(dòng)平臺(tái)的設(shè)計(jì).原來(lái)沒(méi)有實(shí)際接觸Windows phone 產(chǎn)品開(kāi)發(fā)工作時(shí)對(duì)UI設(shè)計(jì)這個(gè)概念不是特別強(qiáng)烈. 并沒(méi)有感到PC端Application和移動(dòng)終端上在UI設(shè)計(jì)之間的差異.但當(dāng)意識(shí)這是一個(gè)塊獨(dú)立區(qū)域 和Pc端UI即存在關(guān)聯(lián)而又具有自己獨(dú)立的特點(diǎn)時(shí).當(dāng)一個(gè)產(chǎn)品從需求孵化階段到用戶(hù)群體定向設(shè)計(jì)的成型.才感到這個(gè)方向作為開(kāi)發(fā)人員的欠缺. 在6月份時(shí)

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

這本書(shū)應(yīng)該是我度過(guò)三本UI設(shè)計(jì)書(shū)中感覺(jué)最好的一本了.內(nèi)容寫(xiě)的很輕松.語(yǔ)言風(fēng)趣.特別是里面舉得開(kāi)發(fā)人考慮UI的方式 真的和我親身感受如出一轍.有好幾個(gè)地方給我印象深刻.特別如果你站在一個(gè)DEv角度去看的里面有些觀點(diǎn)甚至讓你有些無(wú)比糾結(jié).但又不得不承認(rèn)自己確實(shí)存在這些情況.比如在這本書(shū)序言就對(duì)UI設(shè)計(jì)一個(gè)比較有意思的觀點(diǎn):

我們表面上認(rèn)為自己在為用戶(hù)設(shè)計(jì)，但是無(wú)論我們?nèi)绾闻?#xff0c;我們都只是在為我們自己認(rèn)為的用戶(hù)設(shè)計(jì)，或者更可悲地說(shuō)是，為我們自己設(shè)計(jì)。然后我們?cè)僮C明這軟件也對(duì)其他人有效. 程序員們善于邏輯思考，在編程時(shí)容易沉浸在自己的世界中，還有自以為是等等，這些特點(diǎn)讓UI設(shè)計(jì)對(duì)他們來(lái)說(shuō)變成了一個(gè)頭痛的問(wèn)題。但是在進(jìn)度緊張的項(xiàng)目中，產(chǎn)品經(jīng)理沒(méi)法對(duì)每個(gè)軟件細(xì)節(jié)進(jìn)行把控，或者他們沒(méi)有這方面的能力。UI設(shè)計(jì)的任務(wù)只能讓程序員一塊做了. 接下來(lái)面對(duì)問(wèn)題……

讀起來(lái)非常有意思.受益匪淺.雖然出版時(shí)間有點(diǎn)早2001年.但依然推薦各位做開(kāi)發(fā)的同學(xué)好好讀讀這本書(shū).

?PDF英文原版下載地址見(jiàn)附件。

回到Windows phone Metro設(shè)計(jì).這因該很多用戶(hù)能夠直觀辨別Windows phone主要因素之一. IPhone水晶風(fēng)格和Android白底黑字不同.WP最大區(qū)別在于.IPhone和Android 都是以應(yīng)用為主要呈現(xiàn)對(duì)象.類(lèi)似那個(gè)通用的八宮格. 而MEtro 界面強(qiáng)調(diào)的是信息的本身.而不是冗余的界面元素.Metro設(shè)計(jì)理念來(lái)源微軟HQ位于西雅圖地區(qū)的King County Metro Transit里的標(biāo)示取得設(shè)計(jì)靈感的.如下是中文[TW臺(tái)版] WP:

雖然是個(gè)新東西.很多人也很喜歡.但依然對(duì)用戶(hù)使用來(lái)說(shuō)存在挑戰(zhàn).特別是體現(xiàn)用戶(hù)對(duì)這種認(rèn)同感上.記得第一次和我們?cè)O(shè)計(jì)師交流時(shí).總是不斷有人問(wèn)為何采用這種大塊圖標(biāo)等等各種各樣的我看來(lái)很“奇怪”問(wèn)題.其實(shí)在面對(duì)這些問(wèn)題時(shí)我們也往往忽略問(wèn)題本身還是來(lái)源用戶(hù)認(rèn)同感.用戶(hù)本身也是個(gè)受體.相對(duì)IPhone和Android在07年發(fā)力至今.用戶(hù)已經(jīng)接受或是從這兩個(gè)平臺(tái)獲得對(duì)智能手機(jī)Smart Phone啟蒙和認(rèn)知的. 相對(duì)Windows phone Metro在10年第一個(gè)版本的介入. 時(shí)間上已經(jīng)慢了一拍.這個(gè)時(shí)間差導(dǎo)致了IPhone和Android對(duì)用戶(hù)Smart Phone 觀念中存在先入為主的情況. 這點(diǎn)上是我在不斷和設(shè)計(jì)團(tuán)隊(duì)交流中感受比較深的一點(diǎn).

如果你的身邊還存在很多不認(rèn)同Windows phone 或?qū)etro詬病的人. ——這也正常.請(qǐng)記住.對(duì)于Windows phone認(rèn)知 用戶(hù)也需要時(shí)間.

談到Metro這種設(shè)計(jì).一直很想談?wù)凪etro設(shè)計(jì)前景和現(xiàn)狀.

metro UI是由微軟公司開(kāi)發(fā)的內(nèi)部名稱(chēng)為“ typography-based design language”[基于排版的設(shè)計(jì)語(yǔ)言].最早出現(xiàn)在微軟電子百科全書(shū)95，后來(lái)的產(chǎn)品如：windows媒體中心、Zune播放器 都有用到這項(xiàng)技術(shù)

在MS Build大會(huì)展示W(wǎng)indows 下一個(gè)OS-Windows 8.相信看過(guò)人應(yīng)該Win8 Metro設(shè)計(jì)感到耳目一新.:

其實(shí)MS規(guī)劃Windows 8可以追溯到09年.能夠在MS重要陣地操作系統(tǒng)得到更多的應(yīng)用.Metro前景不僅體現(xiàn)在Win8上,同樣可以看到Metro這種設(shè)計(jì)理念逐漸***到其他產(chǎn)品線上類(lèi)似Metro 風(fēng)格的Skype 3.0：

Metro版本的 Windows Live/MSN:

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

當(dāng)然從MS出去的設(shè)計(jì)師同樣也影響到了FaceBook。在其客戶(hù)端有所體現(xiàn):

有×××同學(xué)可以體驗(yàn)這個(gè)客戶(hù)端 Metro風(fēng)格很舒適 FaceBook發(fā)送消息:

Metro UI該技術(shù)已于2010年初（美國(guó)）獲得Metro UI專(zhuān)利批準(zhǔn)（USPTO）。metro UI最新的應(yīng)用是windows phone 7智能手機(jī)系統(tǒng)，并將應(yīng)用于未來(lái)的windows 8、office 和xbox 360產(chǎn)品中.可見(jiàn)將來(lái)能夠在Windows 平臺(tái)看到更多Metro UI產(chǎn)品逐步出現(xiàn).將作為MS下一個(gè)主流設(shè)計(jì)但當(dāng)重要角色.

如下想重點(diǎn)來(lái)談?wù)勗赪indows phone UI設(shè)計(jì).

我們?cè)O(shè)計(jì)團(tuán)隊(duì)都具有成型IPhone和Android設(shè)計(jì)經(jīng)驗(yàn).也具有完善設(shè)計(jì)流程.但對(duì)Windows phone剛開(kāi)始完全就是一個(gè)小白. 中間通過(guò)真機(jī).或是內(nèi)部培訓(xùn)方式逐漸介入Windows phone產(chǎn)品設(shè)計(jì)中來(lái).但是后來(lái)在不斷溝通依然問(wèn)題頻出. 說(shuō)到底在設(shè)計(jì)團(tuán)隊(duì)雖然對(duì)WP有了初步的認(rèn)識(shí)但依然沒(méi)有一個(gè)人真正在日常生活使用Windows phone來(lái)解決自己實(shí)際問(wèn)題.后來(lái)對(duì)所有參與Windows phone UI設(shè)計(jì)師采取強(qiáng)制使用兩周. 效果明顯.

因?yàn)樵谟懻揢I原型設(shè)計(jì) 時(shí)設(shè)計(jì)師不在問(wèn)那么多”Why” WP為何要這樣設(shè)計(jì)?. 而是說(shuō) “How” 如何在WP做這個(gè)產(chǎn)品設(shè)計(jì).

在微博上有人曾問(wèn)過(guò)我.如何慢慢切入WP UI設(shè)計(jì),其實(shí)官方給出Windows phone 用戶(hù)UI交付規(guī)范2.0 就是最好教材. 至于這個(gè)2.0文檔中提到很多明文規(guī)定就不多做贅述/. 那么在Windows phone UI設(shè)計(jì)具有哪些潛藏”軍規(guī)”需要設(shè)計(jì)師去遵守. 針對(duì)Windows phone UI用戶(hù)體驗(yàn)問(wèn)題可以分為三個(gè)等級(jí):

Windows phone 用戶(hù)體驗(yàn)三個(gè)等級(jí): [1]：必須修改-必須立即處理問(wèn)題.以確保原設(shè)計(jì)能夠體現(xiàn)APP自身特點(diǎn)和價(jià)值 [2]：應(yīng)該修改-這步在發(fā)布前要處理的問(wèn)題, 可能在功能成型后需要UI微調(diào) [3]：建議處理-遵照Metro GuideLines 可以繼續(xù)改善用戶(hù)體驗(yàn)的地方

?

如下針對(duì)這三個(gè)等級(jí) 做出具體截圖實(shí)例來(lái)說(shuō)明UI設(shè)計(jì)中需要注意的地方：

?

[2]文字和布局對(duì)齊:

應(yīng)用中可以適度使用自定義或品牌固有字體. 自定義字體可以用在頁(yè)面標(biāo)題或概論章節(jié)標(biāo)題中.布局向左對(duì)齊.左側(cè)頁(yè)邊距24PX大小. 這個(gè)標(biāo)準(zhǔn)同樣適用于 適用于樞軸視圖和全景試圖. 注意樞軸視圖內(nèi)容按屏幕優(yōu)化并縱向?qū)R.

?

[3]APP應(yīng)用的圖標(biāo)

圖標(biāo)注意如下兩點(diǎn):

A:符合Metro設(shè)計(jì)原則的品牌設(shè)計(jì)理念 B:避免在圖標(biāo)適用3D 字體- ? 漸變色? 囿角? 沒(méi)有含義的圖標(biāo),標(biāo)志只在“亮”或“暗”主題下醒目. 或白色背景上的黑色標(biāo)志 .原則上避免使用.?

?

?

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

?

?[4]元素間隔:

所有元素的水平或垂直間隔應(yīng)一致，建議間隔為12像素或12像素的倍數(shù).這個(gè)在文字或圖片在頁(yè)面上布局時(shí)需要額外注意:

[5]控件使用:

在全景視圖和樞軸視圖中 避免使用開(kāi)關(guān)控件SwitchTaggleButton.避免使用游標(biāo)控件Silder. 在操作左右滑動(dòng)時(shí)頁(yè)面級(jí)動(dòng)作容易被控件的操作所攔截.特別是在設(shè)置界面.

盡量避免使用內(nèi)嵌Web控件WebBrowser.當(dāng)應(yīng)用必須內(nèi)嵌Web內(nèi)容時(shí)需要滿足如下兩個(gè)情況:?

[1] 關(guān)閉設(shè)備平移和縮放等觸碰功能. [2] 確保WEbBrowser內(nèi)容完全可讀,可預(yù)覽?

?另外在頁(yè)面UI輸入比較多時(shí).類(lèi)似用戶(hù)注冊(cè)頁(yè)面.存在多個(gè)TextBox在用戶(hù)輸入.設(shè)計(jì)師總是反饋鍵盤(pán)會(huì)擋住輸入框TextBox. 特別是這點(diǎn)QQ客戶(hù)端也有體現(xiàn). 這種方式一般慘通過(guò)控制頁(yè)面ScrollView滾動(dòng)的方式動(dòng)態(tài)控制.避免用戶(hù)操作彈出的鍵盤(pán)會(huì)遮擋主下面操作元素:

?[6]導(dǎo)航:

在頁(yè)面導(dǎo)航中.Windows Phone不需要關(guān)閉按鈕，關(guān)閉行為由硬件設(shè)備自帶Backup控制鍵完成,通過(guò)使用退回鍵建立導(dǎo)航機(jī)制.

?[7]全景視圖:

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

?背景480×800像素到1024×800像素之間 ?每一個(gè)Section比例16:9 ?Section中縮略圖如果不加文字描述的話，可以一行放置兩個(gè)，并且建議一行最多只放置兩個(gè)?

?

避免如下情況誤用:

?

?內(nèi)容布局超出頁(yè)面 ?使用導(dǎo)航條 ?背景顏色艷麗 ?縱向滾動(dòng)條?

?其實(shí)如上只是能夠談到Windows phone一些可以統(tǒng)一UI設(shè)計(jì)細(xì)節(jié)?？赡懿煌a(chǎn)品APP定位不同.2.0UI也常見(jiàn)的設(shè)計(jì)被打破.其實(shí)這個(gè)不僅使我們?cè)谧鲞@樣的工作.官方在沒(méi)有退出Mango2.0 UI規(guī)范明令寫(xiě)著全景視圖空間禁止使用ApplicationBar空間.主要保證輸入和展示空間.但在Mango版本中依然能夠發(fā)現(xiàn)ApplicationBar退出一種mini模式而且在Marketplace全景視圖中出現(xiàn)了APPlicationBAr.其實(shí)為了改善用戶(hù)體驗(yàn)也在不斷打破自己頂下UI規(guī)范.

另我們參考設(shè)計(jì)時(shí)Product ower 常會(huì)綜合運(yùn)營(yíng)的考慮.往往這種情況下.官方給出的UI規(guī)范都要服從實(shí)際市場(chǎng)需要而發(fā)生顛覆行修改也是存在這種情況.類(lèi)似在列表展示和Ui顯示層級(jí)的用戶(hù)體驗(yàn)中.

Windows phone 這種類(lèi)似網(wǎng)頁(yè)的展現(xiàn)形式和采用固體按鈕Backup鍵執(zhí)行的導(dǎo)航方式. 相對(duì)IPhone中明確上下級(jí)關(guān)系明顯不同.這主要體現(xiàn)在如果業(yè)務(wù)中流程. 而恰好這個(gè)流程比較復(fù)雜.注意這種方式導(dǎo)致Windows phone 頁(yè)面層級(jí)比較深情況下. 另外中間操作不同的提示和跳轉(zhuǎn)頁(yè)面都會(huì)照成用戶(hù)在UI界面之間的迷失.復(fù)雜的UI流程如何避免?

A:首先減少頁(yè)面的數(shù)量.從設(shè)計(jì)層面減少層級(jí)關(guān)聯(lián).主要目的是降低流程帶來(lái)比較深層級(jí)關(guān)系 B: 只做最關(guān)鍵的事.如果是一個(gè)常用的客戶(hù)端盡量把更多事情放到服務(wù)器端來(lái)做. 這是處理問(wèn)題的捷徑 C: 減少用戶(hù)在頁(yè)面間操作的路徑. 也就是說(shuō)流程中涉及到一件事設(shè)計(jì)中要考慮采用最短路徑去實(shí)現(xiàn). 此時(shí)應(yīng)注意用戶(hù)交互體驗(yàn)?

?

關(guān)于流程其實(shí)更像強(qiáng)調(diào).對(duì)于常用客戶(hù)端盡量把更多工作交給能力更大的服務(wù)器端來(lái)說(shuō). 客戶(hù)端發(fā)展方向應(yīng)該是”偏瘦”的。針對(duì)Windows phone 采用導(dǎo)航方式.復(fù)雜的UI流程和多層級(jí)關(guān)聯(lián)會(huì)徹底毀掉一個(gè)APP 最基本的用戶(hù)體驗(yàn). 用戶(hù)要在這個(gè)流程中短時(shí)間要接受更多的新概念.這樣的設(shè)計(jì)對(duì)用戶(hù)在UI交互操作來(lái)說(shuō)就是一場(chǎng)噩夢(mèng)開(kāi)始.層級(jí)關(guān)系最多應(yīng)該保持4級(jí)之內(nèi). 復(fù)雜流程是用戶(hù)UI交互體驗(yàn)的”殺手”

其實(shí)在很多應(yīng)用場(chǎng)景中.UI設(shè)計(jì)師在定位原型后.注意在確認(rèn)效果圖前. 一定有必要去了解Windows phone Toolkit 要知道在具體數(shù)據(jù)呈現(xiàn)采用什么樣控件UI元素.這同時(shí)也是BI的工作之一.目的是保證UI設(shè)計(jì)效果圖與最終開(kāi)發(fā)版本之間不存在沖突. 類(lèi)似如果UI設(shè)計(jì)師不知道Windows phone 存在某些元素 他通常會(huì)采用比較通用控件去實(shí)現(xiàn) 這樣會(huì)導(dǎo)致布局混亂 完全無(wú)Windows phone 任何特點(diǎn) 類(lèi)似如下:

?

?如果這個(gè)UI設(shè)計(jì)師知道在性別3確定選項(xiàng)中在Windows phone有一個(gè)ListPicker控件去呈現(xiàn). 這樣的混亂的布局方式也就不會(huì)存在.對(duì)于這些低級(jí)失誤同時(shí)開(kāi)發(fā)團(tuán)隊(duì)也具有職責(zé)對(duì)于不懂編程的UI設(shè)計(jì)團(tuán)隊(duì)進(jìn)行一定控件使用培訓(xùn)是必要的.

在設(shè)計(jì)過(guò)程中.針對(duì)某些比較類(lèi)似Windows phone 系統(tǒng)界面UI操作. 盡量不要嘗試去打破這種統(tǒng)一設(shè)計(jì)規(guī)則.多參考WP系統(tǒng)的設(shè)計(jì)做法.類(lèi)似發(fā)短信 信息 這種操作.其實(shí)在用戶(hù)行為就是保持用戶(hù)使用習(xí)慣.記住用戶(hù)對(duì)陌生新鮮的概念往往都是抵觸的. 采用用戶(hù)熟悉WP系統(tǒng)UI處理方式將是規(guī)避這些問(wèn)題：

?在設(shè)計(jì)過(guò)程初期Product Ower有UI設(shè)計(jì)過(guò)程中有一個(gè)很重要的職責(zé) -保持UI設(shè)計(jì)方案多樣可選. 其實(shí)一個(gè)好的設(shè)計(jì)方案完全 在剛開(kāi)始雛形的時(shí)是不斷通過(guò)爭(zhēng)論達(dá)到最后大家都能接受UI. 而在剛開(kāi)始時(shí)Product Ower不要太多干預(yù). 應(yīng)該盡量吧設(shè)計(jì)人員對(duì)產(chǎn)品的設(shè)想和想法盡量呈現(xiàn)出來(lái). 這樣會(huì)在設(shè)計(jì)方案的初期形成3-4 設(shè)計(jì)方案.在討論過(guò)程比對(duì)效果往往也是最直觀的.也利于判斷UI設(shè)計(jì)在展現(xiàn)APP價(jià)值的優(yōu)劣. 而一個(gè)好的UI設(shè)計(jì)方案誕生.需要是不斷修改貼近APP最真實(shí)的目的.

其實(shí)在UI設(shè)計(jì)中完全沒(méi)有好與壞的概念.記住UI設(shè)計(jì)目的其實(shí)只做一件事—最接近呈現(xiàn)APP自身的價(jià)值.

在這里我只說(shuō)了最接近.在文章頭部引述<<User Interface For Programmers>>觀點(diǎn)恰恰也是我所認(rèn)同的.好的UI設(shè)計(jì)方案在一個(gè)小的人群和短時(shí)間內(nèi)是無(wú)法一觸而就的. 所以在產(chǎn)品規(guī)劃s是應(yīng)該考慮劃出成型用戶(hù)UI交互體驗(yàn)改善計(jì)劃,這些改善計(jì)劃是APP已經(jīng)投入市場(chǎng). 當(dāng)你能看到最終直接用戶(hù)反饋的需求你就會(huì)發(fā)現(xiàn)做出好的UI設(shè)計(jì)不再是難事/.因?yàn)槟阋呀?jīng)知道用戶(hù)想要什么了….而用戶(hù)UI交互改善計(jì)劃也是對(duì)APP實(shí)用一種彌補(bǔ)措施.

?如上比較零碎記載個(gè)人對(duì)Windows phone UI設(shè)計(jì)一些體會(huì).如下給出WindowS phone Metro設(shè)計(jì)一些設(shè)計(jì)師資源.:

Metro ToolKit Codeplex

Jeff Wilcox's "Metro" Desgn GuideLine For Developers ,V1.00 [針對(duì)開(kāi)發(fā)Windows phone 一些UI指導(dǎo)]

Metro Twitter Client

Getting Started With Metro UI In DotNetBar for WPF

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

還有一些必成成型設(shè)計(jì)資源和方案. 和在國(guó)外APP設(shè)計(jì)采用設(shè)計(jì)評(píng)估方案和設(shè)計(jì)草圖. 文件太大無(wú)法上傳放到微博上.盡請(qǐng)關(guān)注.

Windows phone 應(yīng)用開(kāi)發(fā): Windows phone應(yīng)用開(kāi)發(fā)[1]-Text To speech Windows phone應(yīng)用開(kāi)發(fā)[2]-數(shù)據(jù)緩存 Windows phone應(yīng)用開(kāi)發(fā)[3]-UI設(shè)計(jì)?

[1]標(biāo)題:

標(biāo)題應(yīng)該是左對(duì)齊，不應(yīng)有背景，邊框，下劃線或任何其他種類(lèi)的裝飾，唯一例外的是可能使用到企業(yè)的LOGO：

轉(zhuǎn)載于:https://blog.51cto.com/chenkai/763416

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Windows phone 应用开发[3]-UI 设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。