在本篇案例當中，我們將幫助各位使用Metro風格的設計原則對原有的iOS應用設計方案進行重新構思，大家會了解到怎樣將iPad當中一些常見的界面元素及體驗模式轉換成為Metro風格，以打造全新的Windows 8應用。我們將對同一款應用在兩個平臺中的不同設計方式進行對比，幫助各位了解怎樣將你的應用與Windows 8以及Metro設計原則進行完美的融合。

我們將要研究的是一款相片日志應用，用戶可以在線查看和管理他們的照片或視頻。下圖是這款應用的Metro版本：

這款應用最初是為iPad設計的，如下圖所示。

從設計及體驗模式的角度出發，該應用可以大致被解構為六個方面：

1. 布局和導航
2. 命令與行為
3. 契約(Contract)：搜索、分享及其他
4. 觸控與手勢
5. 屏幕定向與視圖模式
6. 消息通知

Inzeit

于移動設備的操作系統及應用來說，判斷其用戶界面設計方案是否優秀的一個重要衡量標準，就是看它對于手指觸控操作的友好程度。相比于桌面計算設備及相關的軟件環境，觸屏移動設備所具有的交互特性幾乎將用戶體驗設計師們帶入了工業設計的領域；設計方案更多是在體現著人機工學方面的原理，而不再是僅僅用來規劃內容與功能的視覺呈現方式。

拇指熱區與底部原則

首先，我們需要了解人們通常會以怎樣的方式將手指停靠在設備上。拿手機來說，普通青年們多數會使用拇指來進行觸控操作，所以觸屏手機的界面交互方案基本是圍繞著拇指來進行打造的。

拇指是很不可思議的，據說它是將我們與動物區分開來的重要標志之一...拇指的功能具有相當的彈性，同時也受到一定的局限。對于常規的觸屏手機來說，我們可以使用拇指掃過屏幕當中的大部分區域，但其中大約只有三分之一屬于真正有效的觸控區域。所以在設計當中，要盡量將最重要的界面交互元素放置在這個范圍當中。在右手持機的狀況下，有效觸控區域位于屏幕的左下方：

這也正是移動系統或應用中一些重要的工具欄或導航結構通常被放置在界面底部的原因。與此相反的是，在傳統的桌面設備系統環境中，導航菜單一類的界面元素通常被放在界面頂部，無論是本地軟件還是網頁基本都是如此。對于我們有限的拇指作用范圍來說，這種傳統布局方式顯然不能在移動設備的用戶界面當中很好的適用。

相比之下，左下角還是右下角的問題略顯次要。我們在實際當中經常會更改左右手持機方式，想想看是不是這樣，譬如對于右撇子來說，當他們正在寫字或是需要同時使用鼠標操作桌面設備時，通常會將手機交于左手操作；而左撇子們則正相反。不過在多數時間內，使用右手持機的用戶還是要相對較多一些。

底部原則可以幫助我們對界面當中的可觸控元素進行更好的組織。最常用的功能按鍵應該被放在拇指最容易觸摸到的熱點區域當中，而其它相對次要或是比較敏感的控制元素則應該盡量避開這個區域。以iOS中的“編輯”按鈕來說，它通常被置于界面右上方，這個位置即可以保證它清晰可見，同時又不會被很容易的觸碰到，以免發生誤操作。

大部分的 Web 應用和動態網站都需要一個后臺管理系統用于管理前臺界面的信息展示以及用戶信息。管理后臺的設計雖然不像前臺界面那樣要求設計精美，但是也需要有清晰的管理模塊劃分，這樣使用后臺管理系統的人員才能夠方便的進行操作和管理。下面收集了十款非常漂亮的網站后臺管理系統模板分享給大家，歡迎免費下載使用。

Admin Panel Template

這個后臺管理模板的導航設計非常漂亮，頭部還有未讀的短消息和提醒的條數顯示。

在線演示     PSD下載     HTML&CSS下載

Charisma Admin Template

Charisma 是基于 Twitter Bootstrap 制作的響應式網站管理后臺模板，包含9套漂亮的主題。

在線演示     免費下載

作為最冷的色調，藍色是設計師使用最多的顏色之一。藍色表現出一種沉穩、冷靜、理智、安詳與廣闊，常用在強調科技，效率的商品或企業形象。今天這篇文章收集了26個清爽的藍色風格網頁設計作品分享給大家，一起欣賞。

IT Asia

Skyboat

紋理的使用非常廣泛：網站，橫幅，LOGO以及名片等很多場合都會使用。使用紋理的最大好處是能夠幫助設計師節省大量的時間，不需要自己去制作圖形。同時，紋理能夠讓你的設計項目更有趣，更有個性。下面是20個使用紋理的華麗的網站實例。

These Are Things

2012年里，我(英文原文作者)在TH_NK 里大約花費了50個小時用于可用性測試，其余的時間則主要用來進行實際的設計工作，或是與客戶、開發者、分析人員等進行溝通。在這些可用性測試當中，經過對被測者行為的觀察以及與他們面對面的交流，我對一些一直以來雖有所了解、但在實際工作中卻時常會忽視掉的設計原則有了更加貼近實踐的認知，另外也發現了一些從前沒有想到過的問題。時值歲末，我將這些經過實踐驗證的設計要點作以小結并分享給各位，希望能夠為大伙來年的工作帶來一定參考和借鑒的價值。

1.你不是你的用戶

捫心自問，我們真的很容易忘記一件重要的事情：用戶并不會按照我們設想的方式去行事。作為產品和設計方面的從業者，我們對自己的產品和服務太了如指掌了，對產品的功能邏輯及設計方案太心知肚明了；即使是作為第三方咨詢顧問一類的角色，你也很容易把事情考慮的過于理所當然，認為“外界”的人能非常清楚的理解你所要表達的東西。

而事實上，多數用戶在實際上手使用之前，并沒有和產品產生長久的關聯；對于我們來說很顯而易見的東西在用戶看來很可能需要一定的輔助才能理解并正確操作。交互模式是否符合直覺，是否能夠保持足夠的一致性以符合用戶逐漸建立起來的心智模型，用戶界面是否會在必要的環節提供足夠有效的輔助引導，這些都是我們在為核心功能打造設計方案的同時必須考慮到的問題。

2.導航至首頁

在很多場可用性測試當中，我們都觀察到，其實會通過點擊頁頭logo回到首頁的被測者很少；多數人都試圖通過點擊瀏覽器上的后退按鈕來實現這個目標。雖然對于設計師來說，將logo鏈接至網站首頁的做法是一種早已被普遍接受的規范，但事實上普通用戶對這一點的認知似乎并不是那么的根深蒂固。

3.通過下拉列表選擇國家

我們曾經對一個面向全球的在線零售網站的支付環節進行過可用性測試，從中我們發現，在選擇國家的時候，很少有用戶懂得通過首字母快捷鍵來快速定位國家選項在下拉列表當中的位置，然后通過上下箭頭按鍵進行調整并敲擊回車或空格鍵來完成選擇。絕大多數的用戶仍然是使用鼠標將列表點開，上下尋找并點擊選取。

其實下拉列表易用性的問題(特別是那些所包含的選項超過了7個的列表)早就引發過廣泛的爭論，使用快捷鍵進行操作的方案也是為了解決這方面的問題而孕育而生的，但在現實當中我們仍然發現有那么多的用戶實際上并不了解這種重要的導航操作。

Christian Holst在重新設計國家列表 一文中介紹過一種蠻有意思的解決方案，雖然我們還沒有對這種方案進行過量化的測試，不過至少它看上去確實比傳統的下拉列表方式要好用。

在日常工作中，我們經常會遇到一些設計的很”漂亮”的圖片不被用戶認可，點擊率很低，這時候我們會暗地里抱怨，可卻沒明白問題究竟出在哪？

網頁設計與平面設計究竟有啥區別，我們主觀的為頁面添加元素的時候是否有章可循，博主以前曾是一名視覺設計菜鳥，以自己的切身體會談談在Web頁面設計中的一些體會。

下面我們先看一個專題的banner：

第一眼看上去，畫面感好像還行，但細看后會發現整個畫面沒有一個視覺中心，這張圖片究竟想表達什么也沒有說清楚，看看上面的元素：女人，模特架，燈光，展廳，衣服。好像表達了很多，其實除了設計師本人知道這是衣服與配件專題的banner，其他人都一頭霧水。

隨著互聯網信息爆炸式增長，用戶瀏覽單個網頁時，并不像我們想象的如閱讀文章般從左到右、從上倒下逐一查看，為什么？

一、 視覺層級為什么重要

左側是設計師期望用戶的瀏覽方式，右側為用戶實際的瀏覽方式—摘自《Don’t make me think》

用戶來到一個網站有他自己特定的目標，如閱讀新聞、購物、查看新消息，然而信息量太大，逐一查看需要大量時間，這就要求網站能抓住主流用戶特征，將重點推送給他，用戶找到自己的目標或感興趣的點，才有可能繼續瀏覽或產生下一步動作，否則就會離開。

有的時候，我常常無法進入狀態，這個時候我會選擇看書。一本好書有一種力量，一種代入感的力量，會讓你隨著做著的邏輯一路陷入進去，慢慢的將內心的浮躁都洗去，讓你沉靜下來，然后整個人也跟著沉了下來。