移動UI設計須知(3)

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

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

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

移動UI設計經(jīng)驗

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

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

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

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

“小設計”不是新出現(xiàn)的事物

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

名片

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

1. 給他人留下印象，
2. 用一種便攜的方法向他人提供聯(lián)系方式。

名片上沒有空間進行商品宣傳或者列舉出所有產(chǎn)品。最后，富有創(chuàng)造力的名片設計師用一種隨意的方式思考這個問題“名片到底是什么？”

廣告牌

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

RSS訂閱

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

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

濃縮結構

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

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

設計師僅根據(jù)傳統(tǒng)的站點地圖來決定需要合并和刪減什么內(nèi)容是十分需要技巧的。維恩圖恰好可以在這方面派上用場。

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

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

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

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

維恩圖適用于任何類型的網(wǎng)站。

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

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

使用折疊

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

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

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

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

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

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

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

重新思考導航條設計

手機使得設計師對傳統(tǒng)元素進行了徹底地改造，不僅僅是重新組織。除了進行更好地改造，他們也提出疑問“我們?yōu)槭裁葱枰脑欤?rdquo;

用戶可以通過鏈接列表對網(wǎng)站內(nèi)容有大致了解，但是列表過于冗長成為設計師不得不應對的問題，如今這種趨勢變得日益明顯。導航條已經(jīng)過時了，頁面和面板的形式正在流行。越來越多的響應式網(wǎng)站將導航條移動到單獨的頁面或者采用下拉列表的形式。按照慣例，輕擊包含三個水平條的圖標就會顯示出可點擊的鏈接列表或者站點架構。

如上圖所示，5家網(wǎng)站都采用了三個橫條☰表示的導航圖標，導航圖標☰有時有解釋，有時沒有。輕擊圖標，導航就會浮現(xiàn)在頁面上。這種方式效果不錯，因為用戶可以決定何時顯示或隱藏鏈接。

奇怪地是，星巴克的圖標還包含一個懸停狀態(tài)，但也許并不奇怪。移動設計意味著為更多應用場合進行信息設計，而不僅僅是臺式機瀏覽器之外支持移動設備。

消減內(nèi)容

消減多余的信息不論對手機網(wǎng)站還是臺式機網(wǎng)站，都同樣重要。但進行信息的刪減并不是那么容易的事情。因為通常情況下事物的發(fā)展過程都是從無到有。

1. 計劃：要明確目標、受眾、責任、如何度量成功等等。
2. 設計：創(chuàng)建圖形，撰寫素材、建立原型等等。
3. 構建：HTML, CSS, jQuery, Dojo, PHP, .NET, CMS,（在這里你可以插入最喜歡的同時最令你厭煩的縮寫詞）
4. 測試：在不同的瀏覽器中，在實際使用的過程中
5. 配置：上傳至服務器，建議采取這種順序。

這是違反用戶直覺的行為，但是為了用戶在使用的過程中可以更加專注，設計師就必須從開始設計的時候就進行刪減。

1. 計劃
2. 設計
3. 復查：為了鞏固刪減的成果，我們需要不斷向自己發(fā)問“我們還能再做些什么？”
4. 構建
5. 測試
6. 編輯：仔細檢查網(wǎng)站的每個部分，如果去掉某個部分，網(wǎng)站還能正常運行嗎？
7. 再次測試：棒極了，你去掉好幾個部分，但是有沒有做的太過頭了？
8. 配置

這不是為了刪減而刪減也不是為了部分用戶使用方便而讓網(wǎng)站變得低能。這是在進行信息設計，為的是能夠讓這些信息在用戶期望之外的更多場合發(fā)揮效用。

• 幫助用戶做出明智的選擇：例如，一段描述性文字并不總是能服務于標題。標題本身就應該包含幫助用戶決定應該點擊什么的正確的關鍵字。縮略圖應該在展示整幅圖像的同時保持自身的可識別性。
• 練習重新設定：當你在創(chuàng)建或者編輯頁面、帖子、圖片或者別的媒體時，想想他們在不同的使用環(huán)境時會呈現(xiàn)出什么樣子。就像在不同的瀏覽器中進行測試一樣，同樣的設計在不同的環(huán)境中會有什么反應？在手機瀏覽器中還能正常工作嗎？在臺式機瀏覽器中呢？在郵件中呢？能夠被大聲誦讀嗎？能夠被粘貼到word文檔中，被打印和傳真嗎？不要輕視那些看似荒謬的使用情形，他們都是出色的嘗試，不久之前網(wǎng)頁根本沒辦法出現(xiàn)在手機上。你的網(wǎng)站將來會出現(xiàn)在什么地方？
• 刪掉主頁：不要擔心，之后還可以把主頁放回來的。沒什么比去掉設定的簡介能夠幫助你更好滴發(fā)現(xiàn)網(wǎng)站的優(yōu)先級。哪個頁面能夠最好地呈現(xiàn)網(wǎng)站的宗旨？如果它們之中有一個頁面能夠代替主頁的作用，那么你可以想想這個頁面到底能為網(wǎng)站做什么。
• 在每個頁面，每篇文章，內(nèi)容的每個部分都重復這個實驗：如果你刪掉了它，什么能夠替代它？如果回答是“無可取代”，那么它就是必須的。如果主頁消失了，“主要業(yè)務”的頁面依然能夠正常工作，那么你需要對頁面再設計，直到它變得至關重要，或者干脆刪掉它。

總而言之，一定要簡明扼要。在如今這些現(xiàn)代媒體中，空間和注意力都太寶貴了，我們必須充分利用。