作為一個直接響應式的功用平臺，第一個手機網站只是一個“實驗品”，而不是“廢品”。在今天，如此多的智能設備確實給了我們時機去做更多的視覺設計，但這不只能激起和吸收用戶，而且增加了用戶體驗。當然隨同著時機就以為著更多的應戰。

首先我們來看看挪動端設計上的物理限制，其中包括最佳理論案例；然后我們將著眼于通訊設計，用視覺設計為挪動站和應用的內容提供支持。

在約束下做設計

挪動設備戰爭板設備的外形和可觸控性，給我們帶來了一些根本的可用性方面的考慮。在桌面端，用戶所面對的是更大的顯現區域和更多的內容（相關于挪動端），或者將鼠標懸浮在某個元素上時可以取得更多的信息。

但是挪動端的用戶則只能將視野集中在一塊較小的屏幕上，而且必需以各種不同的方式來與設備停止交互。經過記住定義一個挪動端規劃和挪動端交互標準的細節，我們能夠在挪動端上發明一個直觀的體驗。

1. 可用的規劃

挪動端屏幕的空間局限性，給設計工作帶來了一個有趣的限制——如何在有限的屏幕上以最優的方式，顯現內容以及提供最好交互方式。詳細來說，規劃要既精簡又能讓用戶集中留意力。

（1 ）規劃的構造

為了給設計打好根底（造房先打地基，設計頁面先設計規劃），我們需求思索如何最有效地運用屏幕空間。”柵格系統” 1（Grid System）有助于設計師做到這點：平均散布的垂直線構造能夠作為放置內容依據。

用這個辦法，能讓設計師更容易將按鈕、標題或圖像放在最有效的中央。將頁面組件放在網格上有助于引導正在“運用”頁面的用戶，同時發明一個潔凈美觀的視覺體驗。

滾動和滑動的空間：用戶在閱讀頁面內容時，不應該有任何與閱讀頁面無關的操作被用戶“激活”，在用戶嘗試滾動頁面時不應該“翻開一個鏈接/頁面”，這一點很重要。

換句話說就是，元素之間要有足夠的間距來允許用戶輕松地閱讀頁面。

2. 人性化的交互

在挪動設備上的觸摸屏界面，也意味著視覺設計必需增強交互。換句話說，元素的大小和位置應確保其易用性，并指出動作之間的重要性和相關性。

按鈕點擊區域：足夠的按鈕尺寸和間距將確保它們能夠被輕松地激活。，理想狀況下，規范屏幕上的按鈕應該在44px到57px之間，在高密度（視網膜）屏幕上按鈕應該在88px到114px之間。 這允許平均的指尖有足夠區域去更容易地激活一個按鈕。

可觸及的和顯著的控件：假如相關連的交互模塊彼此之間很容易點擊，它將允許用戶更快地在它們之間轉換。 這將有助于減少用戶在交互銜接方面的困惑，并加快更復雜的流程。

為通訊而設計

物理條件限制這方面只是我們為挪動設備設計時所面臨應戰的一半，另一半則是在信息傳達方面。“挪動第一”（mobile first），這個理論提示我們，挪動用戶應該從網站上取得與桌面用戶相同的信息價值。思索到這一點，為挪動通訊而設計影響了這個方式——一切設計師需求接觸他們正在交流的音訊。

為了增強通訊，我們需求充沛應用我們對信息的了解和解讀。人腦解讀視覺信息要比文字信息快得多，這就意味著運用視覺和圖像來增強通訊是十分有價值的。 良好的視覺款式可以增加價值，支撐內容或者交互的主體，并改善整體的用戶體驗（挪動端和桌面端）。

垂直排版規律

我們優先思索運用垂直排版來傳達信息，信息構造創立了一個合理的內容流，而可視化設計能夠進一步明白辨別內容的層級。在內容排版上運用適宜的尺寸和間距，能夠創立一個良好的垂直方向的視覺流，更明晰的傳達不同層級的內容。

除了前面提到的垂直網格系統，基線網格（baseline grid）能夠在垂直方向上創立一個良好的的排版，運用戶更容易閱讀和了解內容。

詳細來說，基線網格是經過行高的標準來創立的一種網格構造。它在排版上明白的規則了行距和尺寸，同時也有助于肯定垂直方向上不同的內容組之間的間距。遵照這些規則能夠確保內容段落的可讀性，并且能夠運用戶分明地域分一段內容和整體內容的差異。

基線網格在HTML和CSS中很難準確地完成（implement accurately） ，但是它在設計過程中能夠為開發尺寸和肯定間距提供良好的指導。

運用顏色

顏色是另外一種十分有價值的傳達信息的工具，能夠有多種方式來保證內容和信息交互。

傳達一種色彩或作風：顏色設計是十分客觀的，它依賴于個人經歷和文化。運用特定的色彩和明暗水平，能夠協助我們傳達目的的整體印象。亮堂大膽的顏色營造出一種興趣性，暗色彩營造出一種文雅的氣氛或基調，而參加了灰的淡色調會營造出一種復古感。理解更多的顏色理論（color theory）有助于我們選擇最合適設計目的的顏色。

辨別細節：顏色能夠用來突出內容項，闡明內容項之間的聯絡，或維持構造化的內容，比方堅持內容之間的獨立性。

辨別靜態項和交互功用：運用激烈的比照有助于傳達用處的不同，或者在內容或功用之間的銜接。混合運用中性色和亮堂色，或者用比照色以確保關于用戶來說這個特定項目是顯眼的。創立分歧的用色，例如：跨靜態的、激活的、未激活的項目，經過設計能夠更明晰的展現內容和功用之間的不同。

傳達狀態的變換：顏色能夠智能的運用，在用戶對一個元素停止交互后，它能夠突出音訊、提示和錯誤等顯現。例如，許多網站運用綠色來表示勝利，紅色表示錯誤信息來替代更長更復雜的文本音訊。這有助于進步設計的可用性，經過運用分歧的顏色商定來快速傳送新信息。

運用隱喻

最近，當經過視覺設計停止交流的時分隱喻能夠作為一個有力的處理計劃。隱喻經過喚起人們曾經熟習的元素，或者可視的對象運用戶快速的了解內容和功用。

擬物化就是視覺隱喻的極致運用，界面元素被設計成與理想世界中的事物完整類似的模仿理想世界的對象。固然它最近名聲不怎樣好并且Windows8 和iOS7 都遠離隱喻設計，但這些操作系統和其它挪動網站和APP都在運用簡單的隱喻界面設計，如可被刪除的渣滓、照相機的攝像頭和郵箱的信件。

隱喻能夠被用于不同的方式去支持傳達信息和思想。

維持一個基本的思想：隱喻能夠延伸單個設計元素所能表達的含義，從而成為設計或功用的關鍵中心點。在Flipboard（飛麗博） APP，翻轉過渡這個動作是用戶交互的一個完好局部，而這一過程的順利完成是應用程序勝利的一個要素。經過這種方式運用隱喻，能夠快速的傳達概念給用戶，同時有助于APP展示本人的亮點。

按鈕和交互：設計按鈕運用的擬物化，是一種模仿真實生活互動元素并使功用變得明晰明了的有效途徑。但是，值得留意的是，假如扁平作風必需契合品牌或作風的指導方針，那么靜態物料項目的顏色和款式被明晰劃分時才得以有效完成，Wunderlist軟件按鈕運用了逼真的款式。

圖標解讀：在設計挪動設備，圖標就十分用，用于在有限的屏幕空間允許快速交流復雜的概念。圖標在視覺隱喻的運用——特殊的圖標已成為網絡規范，例如：我們提到的刪除、網絡攝像頭和電子郵件的圖標——也就意味著，人們在工作時能夠不需求解釋也能夠了如指掌。

設計簡單而明晰的圖標是一項具有應戰性的任務，因而理解圖標怎樣影響你的設計的明晰性就很重要的。

將來的手機

一個明晰明了的標準原則，比方本系列描繪的，對任何挪動設計人員都是有價值的。但是只要當我們控制了這些原則，我們才干超越原則，突破規則，突破發明性的界線，發明出一些輝煌而共同的東西。隨著對用戶持續不時的思索，會讓我們發明出的主見在功用和美感得以均衡。

挪動設計面臨著一些令人興奮的應戰和宏大的機遇，技術的快速開展和不時發作變化的用戶場景，意味著今日的限定可能在幾年后不復存在。關于這些應戰，創新思想和發明力能夠協助我們探究新辦法，并且讓我們在面對設計問題時能夠持續發現新的、漂亮的、具有可處理性的處理計劃。