Windows Phone介面設計中的細節鑒析- [使用者體驗]

關於WP7的個人看法:對WP7簡潔的介面設計感覺很喜歡，也在學習有關WP開發方面的知識，轉這篇文章來收藏思考。

一、與眾不同的解鎖介面

Wp7的解鎖介面是非常與眾不同的。位於中間偏下位置上的時間資訊是最吸引人眼球的，即利用了英文在排版設計中的優勢又貫徹了一下返璞歸真的視覺設計理念，將資訊以一種毫無負擔的展現方式給使用者呈現出來。在時間資訊的下面會有簡訊、鬧鐘等推送資訊。最頂部自然少不了裝置電量、訊號等系統資訊。

整個介面中沒有我們已經習以為常的解鎖提示，或者“鎖”的提示，整個介面看起來更像是一幅畫。但是在使用手機的時候，使用者一點都不用擔心不知道怎麼進入待機介面。當使用者手指觸碰到螢幕上任何地方的時候，手機畫面就會有一個類比重物落地再彈起的擬物動畫。

通過這樣一個動畫提示，相信絕大多數使用者都會，嘗試著往上滑動介面，那麼恭喜你，你已經知道如何來進入待機畫面了。顯然，這樣的動畫提示，比任何形式的文字提示都生動、直接的多。介面簡潔、乾淨，操作提示生動、形象且沒有任何視覺負擔，這就是wp7給我們帶來的第一個驚喜。當使用者往上滑動畫面，待機介面徐徐展現給到使用者的眼前，整個過程猶如大幕拉開一般。這期間有個小細節值得我們注意，那就是解鎖介面上的時間資訊會隨著整個畫面的上升而逐漸消失。

在防止誤操作造成的解鎖問題上，wp7也考慮的非常周到。如果對解鎖介面的上滑動作快速有力，即被系統識別為有效操作，會立即進入待機介面。反之，上滑動作緩慢，則需要將鎖定畫面上滑至螢幕1/3處才會完成解鎖。

二、簡潔清晰的待機介面

完成解鎖之後就能看到Wp7的待機介面了。待機介面採用了全新的內容展現和布局形式，不是千篇一律的表徵圖也不是厚重的widget與質感的表徵圖組合，而是採用更為抽象化的介面，大塊的方塊、超大的字型，讓使用者一目瞭然。

在應用表徵圖的內容表現上也根據應用屬性的不同，所涵蓋的內容也不同。功能類應用，如電話、郵件等會以單色表徵圖來展現功能，當有新訊息或未接來電等，會在表徵圖邊上顯示相應的數字；

資訊類應用，如連絡人、圖片等就會以連絡人照片、部分圖片內容來展現。

從應用的表徵圖的資訊構成上來看，我們可以把每個表徵圖分成三層來看待：最底層是背景圖也可以是系統的色塊，中間一層是應用的名稱，最上面是推送的資訊。

對各應用入口的編輯可以通過長按，然後啟用應用入口的編輯狀態，來進行位置的調整和刪除操作。位置的調整可以通過手指的拖拽來完成，刪除操作則是通過點擊當前啟用應用的右上方表徵圖來完成。完成操作之後點擊任意空白地區就可以退出編輯狀態。

在待機介面向左滑屏或者點擊右上方有個向右的箭頭，就進入了應用程式列表。同理，在程式列表頁點擊左上方向右的箭頭或者向右滑屏就能回到待機介面。程式列表中表徵圖大小都為62*62px,在保證不易誤點的情況下，可以儘可能多的展現列表內容。

在應用程式列表，使用者可以通過長按某個應用，然後啟用對其的編輯菜單從而進行卸載、添加到待機介面，以及查看熱度和進行評論的操作。

三、畫卷般的全景視圖

要說wp7中的應用，就不得不先介紹一下Panorama，即全景視圖。它是由Metro的引入而帶來手機介面上的重大變革，它不同於以往的任何一個手機系統的使用者介面。不再是讓你的內容去適應狹小的手機螢幕，也不再是在不同的表單之間來回切換。它提供了一種全新的視圖，在水平方向上擴充內容到螢幕之外，來展現/整合不同的控制項、資料和服務，就好像把它們排布在一張橫軸的畫卷上。當前可視地區所停留的部分，只是手機螢幕的大小部分，就好像畫卷上的一個滑動視窗。使用者所需要做的只是輕輕地在介面上橫向滑動手指，這張畫卷就會隨之而動將你想要看的內容帶到你眼前的焦點地區。

wp7中的所有應用都是採用這種架構來實現的。不論在視覺還是在互動上都是區別於以往其他任何手機中的程式的。這點相信會給使用者帶來更多的新鮮感。

四、新穎的動畫效果

如果說wp7的特點就這些的話，那它也不足以引發這麼大的影響。除了新創的Metro理念以及panorama的全景視圖外，在視覺特效上也是相當給力的。比較有代表性的是流暢的滑屏效果、層級進出之間的翻頁效果以及動態載入動畫。滑屏效果，流暢的橫向滑屏是與全景視圖緊密相關的衍生品。

由於採用了全景視圖，所以在當前屏是可以在右側看到橫向的下一屏的一部分內容的，這也給橫向滑屏的動畫做好了鋪墊，使得實際在滑屏操作時真的有再看畫卷一樣的體驗。翻頁動畫，在不同類型的頁面中，它的具體表現形式也是有所不同的。待機畫面的翻頁動畫，當使用者在點擊一個應用之後，被點擊的應用本身暫時不動，其他應用一起向外翻（向左翻）走，類似翻書，然後被點擊的應用也跟著單獨向外翻出。給人感覺就像開啟了一扇神奇的門似地，不論是語義還是動畫都傳達了一種開啟的感覺，很符合開啟應用這樣操作。

內容列表的翻頁動畫有三種，一種是進入文字清單項目時——向外翻（向左翻）、一種是退出文字清單項目時——清單項目逐條向裡翻（向右翻），還有一種是退出整個頁面內容——整個頁面一起向裡翻（向右翻）。感覺上就像迎面開啟，和隨風消逝的感覺。

Wp7是一個款非常有突破性的系統，它帶給我們的不僅僅是視覺上的衝擊，更多的是設計理念上的開闊。相信伴隨著wp7上的應用的豐富，它會帶給我們更多驚喜。

原文：http://mux.baidu.com/2011/04/928/