SAY討論區

標題: 不走尋常路，如何設計一個出彩的Win8應用？ [打印本頁]
作者: pious888    時間: 2012-11-17 19:16:33     標題: 不走尋常路，如何設計一個出彩的Win8應用？

面對不走尋常路的微軟，應當如何設計出一個好的 Windows 8 的應用呢？
border=
Windows 8 應用現狀
雖然 Windows8 剛上市隻有半個月多一點，但 Win8 之父，同時也是 Windows 和 Windows Live 部門的總裁、微軟下一代 CEO 熱門人選的史蒂芬?辛諾夫斯基卻已經離開瞭微軟（以後將很難看到作為光頭黨的他和鮑爾默、貝佐夫同時刷極客早知道的屏瞭:( ）， Windows 8 的設計語言名稱也從最初的 Metro 先是變為 Modern 接著變為 Windows 8 Style，最後變為目前微軟中國官方所稱的 Microsoft Design（本文依舊延用舊名稱 Metro 表示 Microsoft Design Language/Style），但 Windows 8 依舊在按照之前微軟的規劃一步步往前走著，Windows 應用商店的數量從最初的幾百個應用迅速增長到瞭目前的接近 1.5 萬，雖然到今天增長已經趨緩但依然強勁，預計十一月底能達到 2 萬個。
210038qn40rilocqp.png
雖然數量一直在持續增長著，但優秀出眾的應用到現在依舊是屈指可數，隨便問一個 Windows 8 用戶幾乎回答不出有哪幾個做得特別好。當然這也與 Windows 8 本身設計語言的特色有關，看起來的簡約實際是需要設計師去用心精雕細琢的，不然做出來永遠是簡陋，還是之前 Windows 8 傳統桌面的 Metro 化中所認為的那樣“Metro 風格不是讓程序員都跑來頂替設計師的”，相反它更加考驗設計師。
雖然是被稱為“Windows 8 應用”，但它與 iOS 應用、Andriod 應用以及相近的 Windows Phone 應用還是有著很大的不同，在界面設計上它更加偏向於網頁、平媒等所在的平面設計領域，在交互設計上也是更加偏向比較大的屏幕操作交互。在設計過程中需要認清這一點。
如何設計一個好的 Windows 8 應用？
我們都知道一個應用隻有適配該應用所在平臺本身的風格才能被稱為好的應用，因為隻有這樣用戶在使用的時候才能保持好的用戶體驗。那麼面對一個全新的開始界面，全新的用戶體驗界面與全新的應用佈局，應該如何才能設計出一個好的 Windows 8 應用呢？
1. 好的動態開始畫面
開始畫面是用戶認識一個應用的開始，如果有一個好的開始畫面可以給用戶留下一個很好的印象，同時也是一個好的 Windows 8 應用必須有的。
開始畫面細分可以分為啟動畫面和登陸、加載畫面。對於啟動畫面，微軟官方的規定比較死，所以你看到幾乎都是清一色的單色前景 LOGO，這樣的話除非你的 LOGO 很吸引人否則隻能說是中規中矩，畢竟你不能靠一個旋轉菊花讓用戶對你印象深刻吧。所以最好可以將限定的啟動畫面時間縮短，多在後面的登陸界面與加載界面下功夫，在這方面 騰訊QQ, Cookbook, 網易雲閱讀等做的比較好。
210039ca4njj2huxl.png
其中 QQ for Windows 8 的登陸界面與其最新的 2013 桌面版類似，背景是幹凈的天空，有一朵雲動態的飄來飄去。而 Cookbook 和網易雲閱讀是動態加載跳轉，三者其實都是是以動態效果見長，而動畫效果在 Windows 8 中最為常見，它是營造 Metro 動感的主要手段。因此如果要設計一個好的 Windows 8 應用，打造一個讓人感覺流暢、大氣舒緩的動態啟動畫面是可以加分的。
2. 好的背景/圖片/圖像
在一個應用中背景圖片可能就是伴隨用戶使用該應用的整個過程（貼靠除外），它的重要性要超過開始畫面。在平面設計中，和諧、有效的圖底關系可以讓整個構圖活躍起來，從而增強視覺沖擊力和感染力。在設計 Windows 8 應用中亦是如此，選擇一個合適的整體背景圖像不僅可以吸引用戶的註意，促使他們留下來去探究其他部分，還可以為頁面佈局服務。而選擇一個不搭調的背景圖像的話，不僅使界面變得刺眼，對用戶獲取信息造成幹擾，還有可能使用戶煩躁。如下面這個美國白宮應用。
border=
隻有一個星的評分是有原因的
210039pob1hh2nudb.png
再來看一個比較好的背景 Love Windows
另外在背景圖像的選擇上可以去參考一下平面設計，如用漸變背景增加應用清爽感；用插畫、塗鴉等增加現代感和活潑度；用圓形多的圖像來增強波普風，使其風格更加切近 Windows 8 的整體風格。對於大多數背景為灰色的應用來說，背景中加入一些不規則的圖案可以一定程度上消除略顯土氣的負面效果。
3. 好的設計界面
界面包括主界面（中心頁）、內容界面（部分頁）與詳細信息頁等各級頁面。那麼什麼是好的設計界面呢？
1. 嚴謹的排版佈局
在平面設計中，有一個隱形的構圖指導，它就是網格系統。網格可以幫助用戶從視覺上來組塊信息集，而設計師則使用網格來組織信息的內容，以保證其清晰度。在一定程度上可以說網格佈局影響著一個作品的最終外觀、心理感受和可用性。
而在 Windows 8 中，Metro 應用的一大特點就是內容形式化，因此對於占據著 Windows 應用商店絕對主流地位的是各種信息內容類的應用來說，如果一個應用有著嚴謹的網格佈局，那麼就可以說這個應用不會太差，即使它是由一個個方塊堆砌起來的。因為在 Windows 8 應用設計中網格依舊會是結構的基礎，它引導著元素的佈局，將文本、圖形和圖表組織成設計的骨架。它可以保證一個應用內的信息有著基本的清晰度，不會凌亂 。
210040ufug0kj3fan.png
比較奇怪的排版：舊版與新版的千千靜聽
210040ucg12a201lx.png
官方中規中矩的排版：說不上有多好，但怎麼說也不算差
最初級的網格佈局就是像微軟官方建議的那樣，整整齊齊的正方形塊或矩形框等。再高級點，可以利用網格創造熱點區域，利用比例差異來增添動感，建立層級關系等，見下一條。
2. 優秀的排版佈局
就像上一條所說的，由於從 Windows Phone 到 Windows 8 微軟的“示范作用”，造成瞭很多中規中矩的“方塊應用”，甚至快成瞭一種模版。到現在相信很多人對 Metro 主界面的印象還是一個個方塊或矩形框堆砌吧。
210040ydyerhwetio.png
在 Metro 規范下的設計在很多人看起來像是戴著鏈拷跳舞，因此很多設計被 Metro 的方塊給框住瞭。Windows 8 系統也越來越像一個“豆腐塊”系統，雷同的應用內方塊堆砌也經常讓人聯想起報紙上的招聘版面。
2100413u3lsnwtelj.png
這樣，要想設計一個優秀的排版佈局，就需要從網格設計上下功夫瞭，在這方面做得比較好的還是在上面提到的背景做得比較好的 Love Windows。為瞭對比效果，我們來看看同樣是在微軟 Windows 應用商店裡的推薦熱門應用中，也是同等類別的應用 Win8 使用寶典來看一下。
2100422afrskrxpgi.png
可以看到，采用對角/成角網格的 Love Windows 完勝 Win8 使用寶典，這種成 45 度的成角網格不僅具有基本的穩定感和一體感，還可以引導用戶視線向右移動。可以說是即體現 Metro 的特點又能突破 Metro 方塊的最好實例。
3. 優秀的版面設計
與整體的排版佈局不同，版面設計是對圖像金額文字等設計原色在空間中的安排，可以看作是內容在局部排版上的細化。好的版面設計應該是可以利用顏色、間隔、定位及其他設計手段營造出視覺焦點吸引讀者的註意力，並保持下去。在整體上應當是視覺焦點盡量的少，能夠讓用戶關註應該關註的地方，並保持新鮮感。
210042xkzs5ipf1bl.png
雖然是取巧於官方 Mail 但 Nextgen Reader 仍不失去一款版面設計優秀的應用
如采用方塊堆砌的話，可以說整個屏幕沒有視覺焦點，也可以說滿屏幕上每個方塊都是視覺焦點，再叫上方塊本身充斥感更強，留白少以及中文字體默認的微軟雅黑等各種原因造成整個界面讓人感覺有壓迫感並無從下手，信息間沒有層次感和關聯感。所以在版面設計上應當註意在合理留白、合適選擇字體和合理配色這三個地方來改進。
合理留白
眾所周知的，對於所有平面設計來說版面設計的基本原則是應留出足夠的空間和空白，以使閱讀和理解更加容易。因此通過有意的留白來增加呼吸感是讓信息保持易讀是基本原則，如何創造留白空間也可以看出設計師的實力。
210043vzzw1k5yth3.png
如文字不能距離太近，倘若標題或文字確實需要橫跨整個幅面的話，要給欄空兩邊的文字留下空間，或者選用更大的字符間距。（另外對於標題能精簡的盡量精簡）此外還要合理處理列寬、字符間距，行間距，欄寬，斷字（連字符號連接），標點，對齊方式等。（以列寬為例：如果列寬過窄，內容就會變得斷斷續續，用戶瀏覽過程中無法大量獲取完整信息。而列寬過寬的時候，眼睛就難以重新定位新一行文字的起點。這兩種情況都回導致視覺疲勞並影響閱讀體驗。）
合適字體
border=
上面提到瞭在 Windows 8 中系統默認選擇的是微軟雅黑字體，它在字體設計上屬於無襯線字體和黑體，因此兼顧瞭對於 Windows 8 應用來說不適合長時間閱讀和字體飽滿兩大缺點。前者會造成用戶容易視覺疲勞，而後者則增加瞭內容間的空隙，加劇瞭空間上的充斥感，增加界面呼吸難度。因此在微軟雅黑之外重新選擇一款更細、空曠度更好的字體是一個比較好的選擇。
合理配色
border=
在設計的時候除瞭需要註意留白和字體外還有註意合理配色，如通過輕快明亮的簡單搭配色來減少單色調帶來的壓抑感和審美疲勞和視覺疲勞。另外要避免會引起視覺顫動和顏色扭曲的對比顏色配對，如將互補顏色或者有相近明暗度的顏色搭配在一起的時候。
210044tpkqm34n0qf.png
另外對於金融、財經、理財、天氣等以展示數據信息為主的應用來說要多利用信息化設計，如餅圖、柱狀圖、極限圖、線圖、散點圖、時間序列圖等各種信息圖表來將復雜的數據轉換成二維視覺呈現，使人們能夠有效的在最短的時間內清晰的瞭解信息甚至其背後的趨勢等。
以上都是界面設計上，在交互設計上也需要註意以下幾點：
1. 對用戶的交互指引
之前在 Windows 8 專題裡我們曾介紹過新的 Windows 8 UI 向電腦引入一些新概念，如 Charm 菜單裡集成的搜索、設置以及右鍵選項等很多交互操作是需要用戶重新學習一下的。但是，大多數用戶不知道這一點！相信能夠完整看完 Windows 8 專題或能夠從其他地方稍微完整得學習瞭 Windows 使用的人不會太多。因此從交互上能夠對用戶有一個簡單指引在初期的也是可以加分的。
初始使用簡易教程
210045pduzzrh2g2m.png
初版微博與人人網對用戶的簡易指導教程
界面上引導用戶交互
210046uvlpdq4zyvi.png
凡客與人人網應用的頂欄
如果嚴格按照微軟官方交互規范的話，Windows 應用內主界面上是不應該有任何命令按鈕或者導航按鈕的（應放置在上方的導航欄以及下方的應用程序欄中），因為對於 Windows 8，應用內的搜索、設置以及分享是可以直接在 Charm 菜單就可以完成的。但在現在一些引導用戶右鍵的下拉菜單按鍵是可以有的，如人人網，可以一定程度上防止最初級用戶完全不知所措。而凡客雖然有但放在瞭最中間，一定程度上影響用戶關閉操作。
2. 頁面交互設計
1. 頁面層級設定要少
在導航偏弱的 Windows 8 上，信息層次偏向於扁平化，頁面交互設計上應該減少頁面層級，盡量多在一個頁面層級展示信息，減少用戶做選擇、做決定的時間。在之前我們曾介紹過的 Hick's Law / 席克定律中也有提到，“比起 2 個菜單，每個菜單有 5 項，用戶會更快得從有 10 項的 1 個菜單中做出選擇。”
2. 註意橫向滾動
如果你設計的應用最大的應用場景是 Surface 等平板用戶的話，這一點是至關重要。適用於 Win8 的 Surface 平板等觸控設備與將縱向滾動發揮到極致的 iOS 設備相比，在交互其最大的特色就是橫向滾動。但在當下，應用中橫向滾動與豎向滾動同時存在在一個頁面的應用還有很多，這種即橫滑又豎滑的交互模式會造成用戶很大的不便。以下是官方給出的標準。
在任意頁面隻能沿一個方向滑動：
Hub 視圖應當沿水平方向滑動，不允許水平豎直同時滑動
貼靠視圖必需沿豎直方向滑動
“除非有更好的選擇，否則就遵從標準”，因此在設計使用於 Surface 平板的 Windows 8 應用的時候一定要註意通過背景的設計（暗示）引導用戶左右滑動，而不是下意識的上下滑動，避免出錯。如像 Love Windows 那樣，通過成角排放內容及一些斜線等排版引導讀者調整他們慣性的 F 形閱讀方式。
3. 頁面切換效果
與最上面的動態開始畫面類似，如果能將頁面切換效果做好也是一個可以加分的項。
最後，本文主要是關於橫向全屏視圖下的設計，對於豎屏以及輔屏視圖與填充視圖（貼靠模式）、語義縮放頁面等的設計也是需要註意的。“好的設計不會完全準從設計準則”，要想設計出一個好的 Windows 8 應用設計師們需要能夠在充分理解 Metro 特點的同時跳出官方規范的框框。在這方面不妨回歸 Metro 的設計本源 - 平面設計領域去尋找設計靈感。

附件: [border=] 2100382ojvc3rsrdj.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTIyfDU3ZGQ2NTlkfDE3Nzk4MzU1MTZ8MHww

附件: [210038qn40rilocqp.png] 210038qn40rilocqp.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTIzfDdmNWFhZjQ4fDE3Nzk4MzU1MTZ8MHww

附件: [210039ca4njj2huxl.png] 210039ca4njj2huxl.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTI0fGViOWNkOTA4fDE3Nzk4MzU1MTZ8MHww

附件: [border=] 210039wudhsqjx3xl.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTI1fDQyZGIxODFkfDE3Nzk4MzU1MTZ8MHww

附件: [210039pob1hh2nudb.png] 210039pob1hh2nudb.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTI2fDAwNmU1ZmUzfDE3Nzk4MzU1MTZ8MHww

附件: [210040ufug0kj3fan.png] 210040ufug0kj3fan.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTI3fDVlYjBhZWNkfDE3Nzk4MzU1MTZ8MHww

附件: [210040ucg12a201lx.png] 210040ucg12a201lx.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTI4fGQxNTU4NWMwfDE3Nzk4MzU1MTZ8MHww

附件: [210040ydyerhwetio.png] 210040ydyerhwetio.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTI5fDJiNDIzMWVjfDE3Nzk4MzU1MTZ8MHww

附件: [2100413u3lsnwtelj.png] 2100413u3lsnwtelj.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTMwfDlhNmE4YTk2fDE3Nzk4MzU1MTZ8MHww

附件: [2100422afrskrxpgi.png] 2100422afrskrxpgi.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTMxfDEyNTg2NTlhfDE3Nzk4MzU1MTZ8MHww

附件: [210042xkzs5ipf1bl.png] 210042xkzs5ipf1bl.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTMyfGQyNzFiNjMyfDE3Nzk4MzU1MTZ8MHww

附件: [210043vzzw1k5yth3.png] 210043vzzw1k5yth3.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTMzfGFhMmRmMzVhfDE3Nzk4MzU1MTZ8MHww

附件: [border=] 2100442hs2cppfssy.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTM0fGU5MjhlNGNlfDE3Nzk4MzU1MTZ8MHww

附件: [border=] 2100442ebkyc4r0yg.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTM1fDBhMWIwYzVhfDE3Nzk4MzU1MTZ8MHww

附件: [210044tpkqm34n0qf.png] 210044tpkqm34n0qf.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTM2fDlhZGZlZjg0fDE3Nzk4MzU1MTZ8MHww

附件: [210045pduzzrh2g2m.png] 210045pduzzrh2g2m.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTM3fGE0ZjNmOTMzfDE3Nzk4MzU1MTZ8MHww

附件: [210046uvlpdq4zyvi.png] 210046uvlpdq4zyvi.png (2012-11-17 19:16:33, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MTc5OTM4fGQ3NGI0M2QyfDE3Nzk4MzU1MTZ8MHww
作者: weltergf    時間: 2012-11-17 21:13:39

正好你開咯這樣的帖
作者: alvinsiusiu    時間: 2012-11-17 21:23:49

不錯啊! 一個字牛啊!
作者: andykom28    時間: 2012-11-17 21:58:00

好貼子不多啊
作者: yan4327    時間: 2012-11-18 06:27:02

正好你開咯這樣的帖
作者: DiorCherie    時間: 2012-11-20 04:22:23

要是能加精華就好了
作者: xdxd125    時間: 2012-11-24 13:57:47

有些帖子，真的不錯



歡迎光臨 SAY討論區 (http://say.go2tutor.com/) Powered by Discuz! X2