作為一個直接響應(yīng)式的功能平臺，第一個手機網(wǎng)站只是一個“試驗品”聪全，而不是“成品”泊藕。在今天，如此多的智能設(shè)備的確給了我們機會去做更多的視覺設(shè)計难礼，但這不僅能激發(fā)和吸引用戶娃圆，而且增加了用戶體驗玫锋。當(dāng)然伴隨著機會就以為著更多的挑戰(zhàn)。
第一部分：在信息架構(gòu)（Information Architecture）里讼呢，我們探討了移動端和桌面端在物理表現(xiàn)形式以及規(guī)范上有哪些差異撩鹿；比如何時何地如何的情況下我們會使用移動設(shè)備；以及我們在使用這些設(shè)備時的行為和感受悦屏。然后在第二部分：交互設(shè)計（Interaction Design）中节沦，我們重點研究了這些差異在開發(fā)結(jié)構(gòu)和功能時會有哪些影響。這倆部分為我們?nèi)绾卧谝苿佣撕推桨迳献龀隽己迷O(shè)計提供了基礎(chǔ)础爬。最后我們在第三部分做出總結(jié)甫贯，即通過探索視覺設(shè)計解決方案和相關(guān)的最佳實踐來研究移動設(shè)計，從而做出既美觀又好用的應(yīng)用幕帆。
首先我們來看看移動端設(shè)計上的物理限制获搏，其中包括最佳實踐案例；然后我們將著眼于通信設(shè)計失乾，用視覺設(shè)計為移動站和應(yīng)用的內(nèi)容提供支持常熙。
在束縛下做設(shè)計
移動設(shè)備和平板設(shè)備的外形和可觸控性給我們帶來了一些基本的可用性方面的思考。在桌面端碱茁，用戶所面對的是更大的顯示區(qū)域和更多的內(nèi)容（相對于移動端）裸卫，或者將鼠標(biāo)懸浮在某個元素上時能夠獲得更多的信息，但是移動端的用戶則只能將視線集中在一塊較小的屏幕上纽竣，而且必須以各種不同的方式來與設(shè)備進(jìn)行交互墓贿。通過記住定義一個移動端布局和移動端交互規(guī)范的細(xì)節(jié)，我們可以在移動端上創(chuàng)造一個直觀的體驗蜓氨。
可用的布局
移動端屏幕的空間局限性聋袋，給設(shè)計工作帶來了一個有趣的限制——如何在有限的屏幕上以最優(yōu)的方式顯示內(nèi)容以及提供最好交互方式。具體來說穴吹，布局要既精簡又能讓用戶集中注意力幽勒。
?? 布局的結(jié)構(gòu) — 為了給設(shè)計打好基礎(chǔ)（造房先打地基，設(shè)計頁面先設(shè)計布局）港令，我們需要考慮如何最有效地使用屏幕空間啥容。”柵格系統(tǒng)” 1（Grid System）有助于設(shè)計師做到這點：均勻分布的垂直線結(jié)構(gòu)可以作為放置內(nèi)容根據(jù)顷霹。用這個方法咪惠，能讓設(shè)計師更容易將按鈕、標(biāo)題或圖像放在最有效的地方淋淀。將頁面組件放在網(wǎng)格上有助于引導(dǎo)正在“使用”頁面的用戶遥昧，同時創(chuàng)造一個干凈美觀的視覺體驗。
?? 滾動和滑動的空間 — 用戶在瀏覽頁面內(nèi)容時，不應(yīng)該有任何與瀏覽頁面無關(guān)的操作被用戶“激活”渠鸽，在用戶嘗試滾動頁面時不應(yīng)該“打開一個鏈接/頁面”叫乌，這一點很重要。換句話說就是徽缚，元素之間要有足夠的間距來允許用戶輕松地瀏覽頁面。
人性化的交互
在移動設(shè)備上的觸摸屏界面也意味著視覺設(shè)計必須加強交互革屠；換句話說凿试，元素的大小和位置應(yīng)確保其易用性，并指出動作之間的重要性和相關(guān)性似芝。
?? 按鈕點擊區(qū)域 — 正如我們在第2部分：交互設(shè)計中那婉，所討論的那樣，足夠的按鈕尺寸和間距將確保它們可以被輕松地激活党瓮。 理想情況下详炬，標(biāo)準(zhǔn)屏幕上的按鈕應(yīng)該在44px到57px之間，在高密度（視網(wǎng)膜）屏幕上按鈕應(yīng)該在88px到114px之間寞奸。 這允許均勻的指尖有足夠區(qū)域去更容易地激活一個按鈕呛谜。
?? 可觸及的和顯著的控件 — 如果相關(guān)連的交互模塊彼此之間很容易點擊，它將允許用戶更快地在它們之間轉(zhuǎn)換枪萄。 這將有助于減少用戶在交互連接方面的困惑隐岛，并加快更復(fù)雜的流程。
為通信而設(shè)計
物理條件限制這方面只是我們?yōu)橐苿釉O(shè)備設(shè)計時所面臨挑戰(zhàn)的一半瓷翻。 另一半則是在信息傳達(dá)方面聚凹。“移動第一”（mobile first）齐帚。這個理論提示我們妒牙，移動用戶應(yīng)該從網(wǎng)站上獲得與桌面用戶相同的信息價值。 考慮到這一點对妄，為移動通信而設(shè)計影響了這個方式- -所有設(shè)計師需要接觸他們正在交流的消息湘今。
為了加強通信，我們需要充分利用我們對信息的理解和解讀饥伊。 人腦解讀視覺信息要比文字信息快得多（brain interprets visual information much faster than words）象浑，這就意味著使用視覺和圖像來加強通信是非常有價值的。 良好的視覺樣式能夠增加價值琅豆，支撐內(nèi)容或者交互的主體愉豺，并改善整體的用戶體驗（移動端和桌面端）。
垂直排版規(guī)律
我們優(yōu)先考慮使用垂直排版來傳達(dá)信息茫因。信息結(jié)構(gòu)創(chuàng)建了一個合理的內(nèi)容流蚪拦，而可視化設(shè)計可以進(jìn)一步明確區(qū)分內(nèi)容的層級。在內(nèi)容排版上使用合適的尺寸和間距，可以創(chuàng)建一個良好的垂直方向的視覺流驰贷，更清晰的傳達(dá)不同層級的內(nèi)容盛嘿。
除了前面提到的垂直網(wǎng)格系統(tǒng)，基線網(wǎng)格（baseline grid）可以在垂直方向上創(chuàng)建一個良好的的排版括袒，使用戶更容易閱讀和理解內(nèi)容次兆。具體來說，基線網(wǎng)格是通過行高的規(guī)范來創(chuàng)建的一種網(wǎng)格結(jié)構(gòu)锹锰。它在排版上明確的規(guī)定了行距和尺寸芥炭，同時也有助于確定垂直方向上不同的內(nèi)容組之間的間距。遵循這些規(guī)則可以確保內(nèi)容段落的可讀性恃慧，并且可以使用戶清楚地區(qū)分一段內(nèi)容和整體內(nèi)容的差別园蝠。基線網(wǎng)格在HTML和CSS中很難精確地實現(xiàn)（implement accurately）?痢士，但是它在設(shè)計過程中可以為開發(fā)尺寸和確定間距提供良好的指導(dǎo)彪薛。
使用顏色
顏色是另外一種非常有價值的傳達(dá)信息的工具，可以有多種方式來保證內(nèi)容和信息交互怠蹂。
?? 傳達(dá)一種色調(diào)或風(fēng)格 — 色彩設(shè)計是非常主觀的善延，它依賴于個人經(jīng)驗和文化。使用特定的色調(diào)和明暗程度可以幫助我們傳達(dá)目標(biāo)的整體印象褥蚯。明亮大膽的色彩營造出一種趣味性挚冤，暗色調(diào)營造出一種優(yōu)雅的氛圍或基調(diào)，而加入了灰的淺色調(diào)會營造出一種復(fù)古感赞庶。了解更多的色彩理論（color theory）有助于我們選擇最適合設(shè)計目標(biāo)的顏色训挡。
?? 區(qū)分細(xì)節(jié) — 顏色可以用來突出內(nèi)容項，說明內(nèi)容項之間的聯(lián)系歧强，或維持結(jié)構(gòu)化的內(nèi)容澜薄，比如保持內(nèi)容之間的獨立性。
? 區(qū)分靜態(tài)項和交互功能 — 使用強烈的對比有助于傳達(dá)用途的不同或者在內(nèi)容或功能之間的連接摊册》艟混合使用中性色和明亮色，或者用對比色以確保對于用戶來說這個特定項目是顯眼的茅特。創(chuàng)建一致的用色忘分，例如跨靜態(tài)的、激活的白修、未激活的項目妒峦，通過設(shè)計可以更清晰的展示內(nèi)容和功能之間的不同。
? 傳達(dá)狀態(tài)的變換 — 顏色可以智能的使用兵睛，在用戶對一個元素進(jìn)行交互后肯骇，它可以突出消息窥浪、提示和錯誤等顯示。例如笛丙，許多網(wǎng)站使用綠色來表示成功漾脂，紅色表示錯誤信息來代替更長更復(fù)雜的文本消息。這有助于提高設(shè)計的可用性胚鸯，通過使用一致的顏色約定來快速傳遞新信息骨稿。
使用隱喻
最近，當(dāng)通過視覺設(shè)計進(jìn)行交流的時候隱喻可以作為一個有力的解決方案蠢琳。隱喻通過喚起人們已經(jīng)熟悉的元素或者可視的對象使用戶快速的理解內(nèi)容和功能啊终。擬物化就是視覺隱喻的極致使用，界面元素被設(shè)計成與現(xiàn)實世界中的事物完全相似的模擬現(xiàn)實世界的對象傲须。雖然它最近名聲不怎么好并且Windows8和iOS7都遠(yuǎn)離隱喻設(shè)計（?iOS7 moving further away from it），但這些操作系統(tǒng)和其它移動網(wǎng)站和APP都在使用簡單的隱喻界面設(shè)計趟脂，如可被刪除的垃圾泰讽、照相機的攝像頭和郵箱的信件。
隱喻可以被用于不同的方式去支持傳達(dá)信息和思想昔期。
?? 維持一個根本的思想 — 隱喻可以延伸單個設(shè)計元素所能表達(dá)的含義已卸，從而成為設(shè)計或功能的關(guān)鍵中心點。在Flipboard(飛麗博)? APP硼一，翻轉(zhuǎn)過渡這個動作是用戶交互的一個完整部分累澡，而這一過程的順利實現(xiàn)是應(yīng)用程序成功的一個因素。通過這種方式使用隱喻般贼，可以快速的傳達(dá)概念給用戶愧哟，同時有助于APP展現(xiàn)自己的亮點。
?按鈕和交互 — 設(shè)計按鈕使用的擬物化哼蛆，是一種模擬真實生活互動元素并使功能變得清晰明了的有效途徑蕊梧。然而，值得注意的是腮介，如果扁平風(fēng)格必須符合品牌或風(fēng)格的指導(dǎo)方針肥矢，那么靜態(tài)物料項目的顏色和樣式被清晰劃分時才得以有效實現(xiàn)。Wunderlist軟件按鈕運用了逼真的樣式叠洗。
?? 圖標(biāo)解讀 — 在設(shè)計移動設(shè)備甘改，圖標(biāo)就非常用，用于在有限的屏幕空間允許快速交流復(fù)雜的概念灭抑。圖標(biāo)在視覺隱喻的運用——特殊的圖標(biāo)已成為網(wǎng)絡(luò)標(biāo)準(zhǔn)十艾，例如我們提到的刪除、網(wǎng)絡(luò)攝像頭和電子郵件的圖標(biāo)——也就意味著名挥，人們在工作時可以不需要解釋也可以一目了然疟羹。設(shè)計簡單而清晰的圖標(biāo)是一項具有挑戰(zhàn)性的任務(wù)主守，因此了解圖標(biāo)怎樣影響你的設(shè)計（icons affect the clarity of your design）的清晰性就很重要的。
未來的手機
一個清晰明了的規(guī)范準(zhǔn)則榄融，比如本系列描述的参淫，對任何移動設(shè)計人員都是有價值的。然而只有當(dāng)我們掌握了這些準(zhǔn)則愧杯，我們才能超越準(zhǔn)則涎才，打破規(guī)則，打破創(chuàng)造性的界限力九，創(chuàng)造出一些輝煌而獨特的東西耍铜。隨著對用戶持續(xù)不斷的考慮，會讓我們創(chuàng)造出的主意在功能和美感得以平衡跌前。
移動設(shè)計面臨著一些令人興奮的挑戰(zhàn)和巨大的機遇棕兼。技術(shù)的快速發(fā)展和不斷發(fā)生變化的用戶場景意味著今日的限定可能在幾年后不復(fù)存在。對于這些挑戰(zhàn)抵乓，創(chuàng)新思維和創(chuàng)造力可以幫助我們探索新方法伴挚，并且讓我們在面對設(shè)計問題時可以持續(xù)發(fā)現(xiàn)新的、漂亮的灾炭、具有可解決性的解決方案茎芋。
———————————————————————————————————
名詞解釋：
1、柵格系統(tǒng)（Grid System）：柵格設(shè)計系統(tǒng)（又稱網(wǎng)格設(shè)計系統(tǒng)蜈出、標(biāo)準(zhǔn)尺寸系統(tǒng)田弥、程序版面設(shè)計、瑞士平面設(shè)計風(fēng)格铡原、國際主義平面設(shè)計風(fēng)格）偷厦，是一種平面設(shè)計的方法與風(fēng)格。運用固定的格子設(shè)計版面布局眷蜈，其風(fēng)格工整簡潔沪哺，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計的主流風(fēng)格之一酌儒。
原文鏈接：http://www.uxbooth.com/articles/designing-mobile-part-3-visual-design/
往期文章：
