lulu導(dǎo)語：“為移動而設(shè)計，談視覺設(shè)計”是“為移動而設(shè)計”一系列譯文的第三篇。主要承接之前兩篇譯文的敘述，介紹移動端的視覺設(shè)計上如何創(chuàng)造優(yōu)美、移動應(yīng)用的解決方案。

為移動而設(shè)計，第二部分:交互設(shè)計

為移動而設(shè)計，第一部分：信息架構(gòu)

以下為譯文：

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

首先，我們將會看到為移動設(shè)備的物理限制進(jìn)行的設(shè)計，包括最優(yōu)方案的指導(dǎo)方針；接下來，我們會看到為通信進(jìn)行的設(shè)計：使用視覺設(shè)計元素支持移動網(wǎng)站和應(yīng)用的內(nèi)容。

為物理限制而設(shè)計

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

可用的頁面布局

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

布局結(jié)構(gòu)——為了給設(shè)計打好基礎(chǔ)，我們需要考慮如何最大化利用有限的屏幕空間。柵格系統(tǒng)幫助設(shè)計師實現(xiàn)了這一點：均勻間隔的垂直線結(jié)構(gòu)能夠幫助進(jìn)行內(nèi)容布局。柵格定義了活動空間，讓設(shè)計師更容易判定按鈕、標(biāo)題或圖片的有效位置。把內(nèi)容沿著柵格進(jìn)行布局能夠引導(dǎo)用戶進(jìn)行瀏覽，與此同時，還能創(chuàng)造一種整潔、優(yōu)美、令人愉悅的視覺效果。

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

對用戶友好的交互

移動設(shè)備上的觸摸屏界面，意味著視覺設(shè)計必須強(qiáng)調(diào)交互性；換句話說，應(yīng)該保證頁面元素的尺寸和空間的易用性，并應(yīng)該為用戶指明操作動作之間的重要性和關(guān)聯(lián)性。

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

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

為通信而設(shè)計

物理限制僅是我們在為移動設(shè)計時面臨的一半挑戰(zhàn)。另一半是通信信息?！耙苿觾?yōu)先”原則提醒我們，移動用戶應(yīng)能夠從移動站點獲得同桌面級站點同樣的體驗。在這個原則的指導(dǎo)下，為移動通信而設(shè)計影響著所有設(shè)計師的設(shè)計思路，要求他們能夠接近他們正在通信的信息。

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

垂直節(jié)奏

首先我們考慮加強(qiáng)通信的方法是使用垂直節(jié)奏。信息架構(gòu)創(chuàng)造了一個可感知的內(nèi)容流，但是，視覺設(shè)計能夠用于創(chuàng)造更清晰的內(nèi)容視覺層次。內(nèi)容區(qū)塊之間可感知地利用尺寸和留白，會創(chuàng)造一個良好的垂直節(jié)奏，從而支撐內(nèi)容層級之間的通信。

除了之前提到的垂直柵格系統(tǒng)，基線柵格能用于創(chuàng)造良好的垂直節(jié)奏，從而使閱讀和理解內(nèi)容更容易。特別地是，基線網(wǎng)格在行高規(guī)范的基礎(chǔ)上創(chuàng)造了一種架構(gòu)。基線柵格在定義排版行距和大小時提供了清晰的水平排版規(guī)則，同時也可用于定義不同內(nèi)容組之間的間距。在這些規(guī)則的引導(dǎo)下，能夠確保段落副本清晰可辨，并且用戶能夠清晰地分辨段落和特征組之間的不同。基線柵格通過HTML和CSS精確實現(xiàn)很困難，但會在設(shè)計過程進(jìn)行尺寸和間距設(shè)計時提供有用的指導(dǎo)。

使用顏色

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

傳達(dá)語氣和風(fēng)格——在設(shè)計過程中顏色是非常主觀的，依賴于個人經(jīng)驗和文化。但是使用特定風(fēng)格和色調(diào)可以幫忙傳達(dá)目標(biāo)的整體印象。明亮而大膽的顏色代表快樂，深色系代表優(yōu)雅或有氣氛，而更柔和的色調(diào)與更多的灰色能夠創(chuàng)造一種懷舊復(fù)古風(fēng)。學(xué)習(xí)更多的“顏色理論”能夠幫助我們選擇最適合設(shè)計主體的顏色。

段落之間進(jìn)行區(qū)分——顏色能夠用于突出內(nèi)容元素，表明元素之間是如何連接的，或者支撐內(nèi)容架構(gòu)，例如：內(nèi)容是如何分割的。

區(qū)分靜態(tài)元素和交互式功能——使用強(qiáng)烈的對比能夠幫助傳達(dá)不同的設(shè)計目的，或者在內(nèi)容和功能之間進(jìn)行連接。混合使用中性和明亮的顏色，或者使用色輪上相對的顏色，能夠保證特定的元素對用戶突出顯示。創(chuàng)造一致的顏色用法，例如橫跨靜態(tài)、活躍和不活躍的元素貫穿整個設(shè)計，將也能更清晰地證明內(nèi)容和功能的不同。

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

使用隱喻

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

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

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

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

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

移動的未來

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

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

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

譯者：s2dongman_產(chǎn)品盒子 ? 來源：互聯(lián)網(wǎng)er的早讀課