移動設計第三部分：視覺設計

來自專欄翻譯菌的互聯網14 人贊了文章

作為一個響應式的功能平台，第一個手機網站只是一個「試驗品」，而不是「成品」。在今天，如此多的智能設備的確給了我們機會去做更多的視覺設計，這不僅能激發和吸引用戶，而且增加了用戶體驗。當然伴隨著機會就意味著更多的挑戰。

第一部分：在信息架構（Information Architecture）里，我們探討了移動端和桌面端在物理表現形式以及規範上有哪些差異；比如何時何地我們會如何使用移動設備；以及我們在使用這些設備時的行為和感受。然後在第二部分：交互設計（Interaction Design）中，我們重點研究了這些差異在開發結構和功能時會有哪些影響。這倆部分為我們如何在移動端和平板上做出良好設計提供了基礎。最後我們在第三部分做出總結，即通過探索視覺設計解決方案和相關的最佳實踐來研究移動設計，從而做出既美觀又好用的應用。

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

在束縛下做設計

移動設備和平板設備的外形和可觸控性給我們帶來了一些基本的可用性方面的思考。在桌面端，用戶所面對的是更大的顯示區域和更多的內容（相對於移動端），或者將滑鼠懸浮在某個元素上時能夠獲得更多的信息，但是移動端的用戶則只能將視線集中在一塊較小的屏幕上，而且必須以各種不同的方式來與設備進行交互。通過記住定義一個移動端布局和移動端交互規範的細節，我們可以在移動端上創造一個直觀的體驗。

1. 可用的布局

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

? 布局的結構— 為了給設計打好基礎（造房先打地基，設計頁面先設計布局），我們需要考慮如何最有效地使用屏幕空間。」柵格系統」（Grid System）有助於設計師做到這點：均勻分布的垂直線結構可以作為放置內容根據。用這個方法，能讓設計師更容易將按鈕、標題或圖像放在最有效的地方。將頁面組件放在網格上有助於引導正在「使用」頁面的用戶，同時創造一個乾淨美觀的視覺體驗。

? 滾動和滑動的空間— 用戶在瀏覽頁面內容時，不應該有任何與瀏覽頁面無關的操作被用戶「激活」，在用戶嘗試滾動頁面時不應該「打開一個鏈接/頁面」，這一點很重要。換句話說就是，元素之間要有足夠的間距來允許用戶輕鬆地瀏覽頁面。

人性化的交互

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

? 按鈕點擊區域 — 正如我們在第2部分：交互設計中，所討論的那樣，足夠的按鈕尺寸和間距將確保它們可以被輕鬆地激活。 理想情況下，標準屏幕上的按鈕應該在44px到57px之間，在高密度（視網膜）屏幕上按鈕應該在88px到114px之間。 這允許均勻的指尖有足夠區域去更容易地激活一個按鈕。

? 可觸及的和顯著的控制項— 如果相關連的交互模塊彼此之間很容易點擊，它將允許用戶更快地在它們之間轉換。 這將有助於減少用戶在交互連接方面的困惑，並加快更複雜的流程。

為通信而設計

物理條件限制這方面只是我們為移動設備設計時所面臨挑戰的一半。 另一半則是在信息傳達方面。「移動第一」（mobile first）。這個理論提示我們，移動用戶應該從網站上獲得與桌面用戶相同的信息價值。 考慮到這一點，為移動通信而設計影響了這個方式- -所有設計師需要接觸他們正在交流的消息。

為了加強通信，我們需要充分利用我們對信息的理解和解讀。 人腦解讀視覺信息要比文字信息快得多，這就意味著使用視覺和圖像來加強通信是非常有價值的。 良好的視覺樣式能夠增加價值，支撐內容或者交互的主體，並改善整體的用戶體驗（移動端和桌面端）。

1.垂直排版規律

我們優先考慮使用垂直排版來傳達信息。信息結構創建了一個合理的內容流，而可視化設計可以進一步明確區分內容的層級。在內容排版上使用合適的尺寸和間距，可以創建一個良好的垂直方向的視覺流，更清晰的傳達不同層級的內容。

除了前面提到的垂直網格系統，基線網格（baseline grid）可以在垂直方向上創建一個良好的的排版，使用戶更容易閱讀和理解內容。具體來說，基線網格是通過行高的規範來創建的一種網格結構。它在排版上明確的規定了行距和尺寸，同時也有助於確定垂直方向上不同的內容組之間的間距。遵循這些規則可以確保內容段落的可讀性，並且可以使用戶清楚地區分一段內容和整體內容的差別。基線網格在HTML和CSS中很難精確地實現（implement accurately） ，但是它在設計過程中可以為開發尺寸和確定間距提供良好的指導。

2.使用顏色

顏色是另外一種非常有價值的傳達信息的工具，可以有多種方式來保證內容和信息交互。

? 傳達一種色調或風格— 色彩設計是非常主觀的，它依賴於個人經驗和文化。使用特定的色調和明暗程度可以幫助我們傳達目標的整體印象。明亮大膽的色彩營造出一種趣味性，暗色調營造出一種優雅的氛圍或基調，而加入了灰的淺色調會營造出一種復古感。了解更多的色彩理論（color theory）有助於我們選擇最適合設計目標的顏色。

? 區分細節— 顏色可以用來突出內容項，說明內容項之間的聯繫，或維持結構化的內容，比如保持內容之間的獨立性。

?區分靜態項和交互功能— 使用強烈的對比有助於傳達用途的不同或者在內容或功能之間的連接。混合使用中性色和明亮色，或者用對比色以確保對於用戶來說這個特定項目是顯眼的。創建一致的用色，例如跨靜態的、激活的、未激活的項目，通過設計可以更清晰的展示內容和功能之間的不同。

? 傳達狀態的變換— 顏色可以智能的使用，在用戶對一個元素進行交互後，它可以突出消息、提示和錯誤等顯示。例如，許多網站使用綠色來表示成功，紅色表示錯誤信息來代替更長更複雜的文本消息。這有助於提高設計的可用性，通過使用一致的顏色約定來快速傳遞新信息。

3.使用隱喻

當通過視覺設計進行交流的時候隱喻可以作為一個有力的解決方案。隱喻通過喚起人們已經熟悉的元素或者可視的對象使用戶快速的理解內容和功能。擬物化就是視覺隱喻的極致使用，界面元素被設計成與現實世界中的事物完全相似的模擬現實世界的對象。雖然它最近名聲不怎麼好並且Windows8和iOS7都遠離隱喻設計（ iOS7 moving further away from it），但這些操作系統和其它移動網站和APP都在使用簡單的隱喻界面設計，如可被刪除的垃圾、照相機的攝像頭和郵箱的信件。

隱喻可以被用於不同的方式去支持傳達信息和思想。

? 維持一個根本的思想— 隱喻可以延伸單個設計元素所能表達的含義，從而成為設計或功能的關鍵中心點。在Flipboard(飛麗博) APP，翻轉過渡這個動作是用戶交互的一個完整部分，而這一過程的順利實現是應用程序成功的一個因素。通過這種方式使用隱喻，可以快速的傳達概念給用戶，同時有助於APP展現自己的亮點。

? 按鈕和交互 — 設計按鈕使用的擬物化，是一種模擬真實生活互動元素並使功能變得清晰明了的有效途徑。然而，值得注意的是，如果扁平風格必須符合品牌或風格的指導方針，那麼靜態物料項目的顏色和樣式被清晰劃分時才得以有效實現。Wunderlist軟體按鈕運用了逼真的樣式。

? 圖標解讀 — 在設計移動設備，圖標就非常用，用於在有限的屏幕空間允許快速交流複雜的概念。圖標在視覺隱喻的運用——特殊的圖標已成為網路標準，例如我們提到的刪除、網路攝像頭和電子郵件的圖標——也就意味著，人們在工作時可以不需要解釋也可以一目了然。設計簡單而清晰的圖標是一項具有挑戰性的任務，因此了解圖標怎樣影響你的設計（icons affect the clarity of your design）的清晰性就很重要的。

未來的手機

一個清晰明了的規範準則，比如本系列描述的，對任何移動設計人員都是有價值的。然而只有當我們掌握了這些準則，我們才能超越準則，打破規則，打破創造性的界限，創造出一些輝煌而獨特的東西。隨著對用戶持續不斷的考慮，會讓我們創造出的主意在功能和美感得以平衡。

移動設計面臨著一些令人興奮的挑戰和巨大的機遇。技術的快速發展和不斷發生變化的用戶場景意味著今日的限定可能在幾年後不復存在。對於這些挑戰，創新思維和創造力可以幫助我們探索新方法，並且讓我們在面對設計問題時可以持續發現新的、優秀的、具有可解決性的解決方案。

名詞解釋：

1、柵格系統（Grid System）：柵格設計系統（又稱網格設計系統、標準尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。運用固定的格子設計版面布局，其風格工整簡潔，在二戰後大受歡迎，已成為今日出版物設計的主流風格之一。

【感謝關注我們的小夥伴，你們的贊、收藏、評論是我們持續更新的動力~】