移動UI設(shè)計須知

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

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

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

移動UI設(shè)計經(jīng)驗(yàn)

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

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

人們不在移動設(shè)備上訪問網(wǎng)站，（可能）是因?yàn)樗麄儾恍枰敲炊嘈畔?，更可能的原因是他們想要更便利些。然而網(wǎng)站管理者需要另外一種便利，不需要同時管理兩套內(nèi)容。如果存在兩套內(nèi)容，就會增加產(chǎn)生內(nèi)容不一致的風(fēng)險，于此同時，為手機(jī)瀏覽者和非手機(jī)瀏覽者同時服務(wù)會產(chǎn)生的加倍的工作量。

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

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

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

名片

名片需要完成兩項(xiàng)明確的功能：

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

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

廣告牌

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

RSS訂閱

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

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

濃縮結(jié)構(gòu)

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

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

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

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

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

為了用戶能夠?qū)Ｗ⒂谡军c(diǎn)，我們需要將重疊的部分最小化。