lulu導語：“為移動而設計，談視覺設計”是“為移動而設計”一系列譯文的第三篇。主要承接之前兩篇譯文的敘述，介紹移動端的視覺設計上如何創造優美、移動應用的解決方案。

為移動而設計，第二部分:交互設計

為移動而設計，第一部分：信息架構

以下為譯文：

在《20130228早讀課：為移動而設計，也談信息的架構》中，我們研究了移動環境和桌面環境在物理和規格上的區別；我們何時、何地、如何使用移動設備；以及當使用移動設備時我們的行為和感覺。在《為移動而設計，也談交互設計-20140714早讀課》中，我們在開發結構和功能時，看到了這些區別（在交互設計中）帶來的影響。這兩篇文章為移動和平板設備的良好設計奠定了基礎。這里我們會研究視覺設計上如何創造優美、移動應用的解決方案，以及相關的最佳實踐。

首先，我們將會看到為移動設備的物理限制進行的設計，包括最優方案的指導方針；接下來，我們會看到為通信進行的設計：使用視覺設計元素支持移動網站和應用的內容。

為物理限制而設計

移動和平板設備的物理外形和觸摸屏界面提供給我們一些基本的可用性考量，桌面用戶可以瀏覽更寬廣的內容區域，或將鼠標移到目標對象身上查看更多內容，而移動用戶關注的是更小的屏幕，且必須以不同的方式進行交互操作。我們可以把移動布局和移動專屬交互方式銘記于心，從而創造出一種更直觀的移動體驗。

可用的頁面布局

在如何更好地展示內容和進行交互這個問題上，移動屏幕有限的可用空間對我們造成了有趣的限制。尤其需要注意的是：移動布局要流動性和集中性并存。

布局結構——為了給設計打好基礎，我們需要考慮如何最大化利用有限的屏幕空間。柵格系統幫助設計師實現了這一點：均勻間隔的垂直線結構能夠幫助進行內容布局。柵格定義了活動空間，讓設計師更容易判定按鈕、標題或圖片的有效位置。把內容沿著柵格進行布局能夠引導用戶進行瀏覽，與此同時，還能創造一種整潔、優美、令人愉悅的視覺效果。

滾動和滑動的空間——用戶需要能夠隨意瀏覽內容，而無需進行他們意識不到的操作，同時，在嘗試進行滾動操作時，也無需讓他們觸發某個元素。這點尤其重要。換句話說，元素與元素之間的距離必須足以讓用戶很容易地通過它們進行導航跳轉。

對用戶友好的交互

移動設備上的觸摸屏界面，意味著視覺設計必須強調交互性；換句話說，應該保證頁面元素的尺寸和空間的易用性，并應該為用戶指明操作動作之間的重要性和關聯性。

按鈕點擊區域——正如我們在第2章：交互設計中討論的那樣，合適的按鈕尺寸和大小能夠確保其更易于被點擊。理想情況下，按鈕應該在標準屏幕下44px到57px之間，視網膜屏下88px到114px之間。從而能提供給平均尺寸的手指尖易于點擊的足夠空間。

直觀且易用的控制方式——如果關聯的兩個交互元素能夠很容易地相互接觸，用戶就可以快速在二者間切換。在用戶思考交互之間的關聯性時，這種做法能夠降低其疑惑感，并能加快其對復雜交互的理解速度。

為通信而設計

物理限制僅是我們在為移動設計時面臨的一半挑戰。另一半是通信信息?！耙苿觾炏取痹瓌t提醒我們，移動用戶應能夠從移動站點獲得同桌面級站點同樣的體驗。在這個原則的指導下，為移動通信而設計影響著所有設計師的設計思路，要求他們能夠接近他們正在通信的信息。

為了強調通信，我們需要最大化利用我們所理解和解釋的“信息”。人類大腦理解視覺信息比理解文字要快得多，這意味著使用圖形和影像來加強通信是十分有意義的。良好的視覺元素會產生附加價值，能夠幫助理解內容或交互的目的，還能夠整體提升用戶體驗（對于移動和PC端均是這樣）。

垂直節奏

首先我們考慮加強通信的方法是使用垂直節奏。信息架構創造了一個可感知的內容流，但是，視覺設計能夠用于創造更清晰的內容視覺層次。內容區塊之間可感知地利用尺寸和留白，會創造一個良好的垂直節奏，從而支撐內容層級之間的通信。

除了之前提到的垂直柵格系統，基線柵格能用于創造良好的垂直節奏，從而使閱讀和理解內容更容易。特別地是，基線網格在行高規范的基礎上創造了一種架構?；€柵格在定義排版行距和大小時提供了清晰的水平排版規則，同時也可用于定義不同內容組之間的間距。在這些規則的引導下，能夠確保段落副本清晰可辨，并且用戶能夠清晰地分辨段落和特征組之間的不同?；€柵格通過HTML和CSS精確實現很困難，但會在設計過程進行尺寸和間距設計時提供有用的指導。

使用顏色

顏色對于通信來說是另外一個 不可思議的有用工具，它能夠用于以多種方式支持內容和交互。

傳達語氣和風格——在設計過程中顏色是非常主觀的，依賴于個人經驗和文化。但是使用特定風格和色調可以幫忙傳達目標的整體印象。明亮而大膽的顏色代表快樂，深色系代表優雅或有氣氛，而更柔和的色調與更多的灰色能夠創造一種懷舊復古風。學習更多的“顏色理論”能夠幫助我們選擇最適合設計主體的顏色。

段落之間進行區分——顏色能夠用于突出內容元素，表明元素之間是如何連接的，或者支撐內容架構，例如：內容是如何分割的。

區分靜態元素和交互式功能——使用強烈的對比能夠幫助傳達不同的設計目的，或者在內容和功能之間進行連接?；旌鲜褂弥行院兔髁恋念伾?，或者使用色輪上相對的顏色，能夠保證特定的元素對用戶突出顯示。創造一致的顏色用法，例如橫跨靜態、活躍和不活躍的元素貫穿整個設計，將也能更清晰地證明內容和功能的不同。

改變通信狀態——在用戶和某個元素進行交互時，顏色能夠被智能地用來高亮信息、通知和錯誤。例如，許多站點使用綠色代表成功信息，紅色代表錯誤信息來代替冗長復雜的信息。在使用色彩的一貫原則上，這種做法能夠在快速傳達新信息時幫助提升設計的可用性。

使用隱喻

最后，在通過視覺設計進行溝通時，隱喻會是一種非常有力的解決方案。通過喚起一個已知且熟悉的元素或視覺對象，隱喻能夠讓用戶快速理解內容和功能。在數碼領域，擬物化設計是使用視覺隱喻最極端的例子，這種方法設計的界面元素被設計成看起來特別像真實世界的物品。并且，盡管這種做法在后來被賦予了壞名聲，Windows8和iOS7的設計都遠離了它，這些操作系統和其他移動網站和Apps還繼續使用簡單的隱喻來設計用戶界面，例如垃圾桶代表刪除，真實照相機代表網絡相機，信封代表電子郵件。

隱喻可用于以不同的方式來支持傳遞消息或主題

支持基本主題——隱喻能夠用于擴展單一設計元素，而并不是成為設計或功能的一個關鍵主題。在Flipboard app中，flip切換是用戶交互不可分割的部分，平滑地實現這一交互是這款app成功的關鍵一環。在這一過程中使用隱喻能夠向用戶快速傳達設計理念，同時能夠幫助app樹立其獨特性。

按鈕和交互——在設計按鈕時使用簡單的擬物化設計，能夠以一種簡單的方法模擬真實交互元素，并且讓功能更清晰和明顯。但是，值得注意的是，如果扁平化設計要求匹配品牌或風格，如果顏色和風格設計能清楚地和靜態元素區分開，這種設計會很有效。備忘錄就使用真實樣式的按鈕。

圖標——圖標在有限屏幕空間的移動設計時很有用，因為其能夠快速表達復雜概念。對圖標使用視覺隱喻——尤其是已變成通用標準的圖標，例如我們提過的刪除、網絡攝像頭和電子郵件圖標——意味著它們能經常無需標簽，一撇見就能被認知。設計簡單、清晰的圖標是一種挑戰，所以懂得圖標是如何影響設計清晰度這一理念十分重要。

移動的未來

清晰地理解限制和標準，正如本文描述的那樣，對于任何移動設計師都很有意義。但是，只有我們掌握了這些，才有能力超越這些指導原則；打破規則，并拓寬創造力來打造智能和獨特的體驗。這一點，加上持續考慮用戶體驗，允許我們在功能和美學之間找到理想平衡。

為移動而設計會面臨很多令人激動的挑戰，在此之前，還有很大的機遇。技術的快速發展和用戶環境的持續改變意味著今天的限制，在接下來的幾年后不復存在。創新思維和創造力會在面對這些挑戰時幫助我們發現新的解決方案，并且在我們面臨設計問題時允許我們持續發現新的、優美的、易用的解決方案。

作者：ELAINE MCVICAR 原文出處：Designing for Mobile Part 3: Visual design

譯者：s2dongman_產品盒子 ? 來源：互聯網er的早讀課