移動UI設計須知

 　　在相對更小的空間裡實現同樣的功能，做到這一點並不容易。自從互聯網發明以來，屏幕的尺寸一直穩步增長，網頁設計師已經學會如何充分利用屏幕空間。現在的網格系統大概有960像素寬，在豎直方向允許無限延伸。在人們開始使用手機之前，空間一直都是一件廉價的商品。

　　在寬大的頁內設計比在移動設備有限的空間中設計要容易的多，曾經寬敞的空間助長了那些散漫的排版和大范圍的負空間設計。而在寬度只有320-480像素的手機屏幕裡，兩欄的排版設計都變得非常冒險。

　　但是在頁設計中，最難的部分不是分幾欄這個問題，也不是采用響應式的框架設計，更不是學習媒體查詢和倒退回舊式的浏覽器，最大的挑戰是設計師需要決定應該保留和刪除哪些內容。

　　移動UI的設計經驗

　　將網站進行改版使之能夠適應移動設備有許多方式。最簡單也是最常用的方法是：什麼也別改。結果就是：文字很小，讀起來不方便;導航很難點擊;比郵票還小的圖片也會喪失原有的視覺沖擊力。這樣的用戶體驗真實糟透了，但是從網站擁有者的角度來看，這樣的改版不需要付出任何辛苦。

　　另外一種方法是設計出包含網站主要內容的手機版本。我們想當然地認為內容管理系統會配備兩套內容，事實往往並非如此，采用這種方式會使網站成為手機設備容量限制的犧牲品，特別當更小的屏幕只能容納更少的內容時更是如此。

　　人們不在移動設備上訪問網站，(可能)是因為他們不需要那麼多信息，更可能的原因是他們想要更便利些。然而網站管理者需要另外一種便利，不需要同時管理兩套內容。如果存在兩套內容，就會增加產生內容不一致的風險，於此同時，為手機浏覽者和非手機浏覽者同時服務會產生的加倍的工作量。

　　那些願意將精力只投入在一套內容中的設計師明白實現這一目標的機會就在這小小的(手機)畫布中。

　　“小設計”不是新出現的事物

　　緊湊地思考並不意味著思維因此局限。在其他媒介上的設計已經向人們充分展示了如何在受限制的情況下將內容進行創造性地提煉。

　　名片

　　名片需要完成兩項明確的功能：

　　給他人留下印象，

　　用一種便攜的方法向他人提供聯系方式。

　　名片上沒有空間進行商品宣傳或者列舉出所有產品。最後，富有創造力的名片設計師用一種隨意的方式思考這個問題“名片到底是什麼?”

　　廣告牌

　　尺寸並不是唯一的問題。手機 UI 設計師想要解決注意力集中的問題，就如同廣告牌設計師努力抓住移動中的人們的注意力一樣。司機將他們大部分的注意力都集中在駕駛上，因此廣告牌必須在很遠地距離就給人們留下印象。公路廣告的設計空間已經寬容很多了，但是仍然需要在極短的時間內傳遞信息。一個成功的廣告創意能夠講一個完整的故事，與視覺信息相輔相成。

　　RSS訂閱

　　精簡的信息傳達並不局限於視覺媒介。簡單而便攜，真正簡單的設計去除了任何不必要的寬度、高度、字體、顏色以及浏覽器兼容性的要求。訂閱內容沒有任何關於何時、何地以及如何才能被使用的設定，因此它可以通過設計的迭代來滿足從站到 App Store 的應用等任何情況下的使用需求。

　　名片、廣告牌、代碼以及新聞訂閱有一個共同的宗旨——簡化並不僅僅意味著(內容的)刪減和(體積的)縮小，它代表著專注!

　　濃縮結構

　　專注於網站的開發上並不是件容易的事情，專注會耗費很多精力，需要不斷奉獻，這兩者都會激發出人的創造力，即使一時無人欣賞。第一種方式是使網站結構扁平化。

　　上圖所示就是一個典型的站點地圖。站點地圖中呈現出不同頁面之間的相互關系，這些關系可以通過方塊之間的連線表明。站點地圖既不精確(導航欄允許用戶在不同頁面間實現跳轉)，也沒有什麼實質性的幫助(鏈接並不是內容)。

　　設計師僅根據傳統的站點地圖來決定需要合並和刪減什麼內容是十分需要技巧的。維恩圖恰好可以在這方面派上用場。

　　上面的例子就通過重疊的橢圓展示了不同內容間的關系。“案例”(Case studies)可以描述清楚產品和客服如何使顧客從中受益。因此，“案例”的圓圈覆蓋了“產品”(Products)和“服務”(Services)兩方面的內容。顧客可能會訂購的產品(重疊的部分表示)，“聯系我們”(Contact)頁面和其他內容不關聯，它是獨立的內容。

　　六個橢圓不代表站點只有六個頁面，確切地說，它代表站點有六類信息或者功能。一家公司可能生產很多商品，但是每一種商品都應該有名稱，說明，圖片以及購買設置。同樣地，每一個案例都是獨特的故事，但是都應該采用相同的問題/解決方案格式。

　　為了用戶能夠專注於站點，我們需要將重疊的部分最小化。

　　上述方案需要將每個案例和與之相關的商品或客服進行整合。如果一個案例介紹的內容超過一個，那麼就應該鏈接到下一個內容，不要再重復。主頁或商品概述可能列舉每一件商品。不要再用一個獨立的購物車頁面重復列舉那些內容，每一件商品旁邊都應該設置一個“立即購買”按鈕，在新的付款頁面完成整個購買流程。

　　維恩圖適用於任何類型的網站。

　　找到博客的帖子必須要進行兩個頁面的操作嗎?上面的例子介紹了如何通過一個有設置的頁面完成之前兩個頁面才能做到的工作。

　　這種方法只是指導方針，不是規定，在使用的過程中會根據網站的不同而有所變化。主頁依然會和其他內容有重疊的部分，因為主頁上常常包含整個網站的內容連接。在上述內容中，雖然下訂單被合並到商品頁面中，但是我們卻設計出了一個新的“付款”頁面。專注不是減少頁面的數量，而是使整個過程變得更加流暢。

　　使用折疊

　　將內容進行合並，這是以更加復雜的設計為代價解決了導航欄的問題。幸運地是，相同的概念——統一信息的類型——能使單個頁面和整個網站都從中受益。下圖展示了典型的新聞類頁面。

　　雖然這種布局方式在寬屏台式機或者筆記本電腦上能夠行得通，但如果應用在智能機上就會有問題(如下圖)。

　　借用報紙行業的一句諺語： “折痕”是讀者最先看到的地方。但是折疊與其說是分界線倒不如說是新內容的開始。在使用觸屏設備的時候，人們本能地知道通過手指輕輕滑動屏幕就可以滾動頁面。那意味著設計師可以最大限度地發揮折疊的優勢。

　　首先，我們一起來回顧一下使用維恩圖的宗旨，將相關類型的信息進行整合。

　　過度使用的導航鏈接(通常是最先著手修改的地方)以及跳轉到其他文章的廣告要麼被合並要麼被移除。元數據出現在導航周圍的空白區域。廣告、目錄、站點名稱以及導航是否出現在屏幕頂端反映了設計師心中的優先級順序。

　　當我們拋棄了最開始設想的頁面概念，然後根據內容重新組織頁面，就會有出人意料地效果。

　　上文中，新的頁面元素經過重新組織後展現在一個垂直面上。概念上說，智能機的浏覽器變成一扇窗，用戶需要將每一塊內容填充進去。不是屏幕變小了，而是與平時相比，用戶每次可以看到的內容變少了。

　　重新思考導航條設計

　　手機使得設計師對傳統元素進行了徹底地改造，不僅僅是重