作為一個(gè)直接響應(yīng)式的功用平臺(tái)，第一個(gè)手機(jī)網(wǎng)站只是一個(gè)“實(shí)驗(yàn)品”，而不是“廢品”。在今天，如此多的智能設(shè)備確實(shí)給了我們時(shí)機(jī)去做更多的視覺(jué)設(shè)計(jì)，但這不只能激起和吸收用戶(hù)，而且增加了用戶(hù)體驗(yàn)。當(dāng)然隨同著時(shí)機(jī)就以為著更多的應(yīng)戰(zhàn)。

首先我們來(lái)看看挪動(dòng)端設(shè)計(jì)上的物理限制，其中包括最佳理論案例；然后我們將著眼于通訊設(shè)計(jì)，用視覺(jué)設(shè)計(jì)為挪動(dòng)站和應(yīng)用的內(nèi)容提供支持。

在約束下做設(shè)計(jì)

挪動(dòng)設(shè)備戰(zhàn)爭(zhēng)板設(shè)備的外形和可觸控性，給我們帶來(lái)了一些根本的可用性方面的考慮。在桌面端，用戶(hù)所面對(duì)的是更大的顯現(xiàn)區(qū)域和更多的內(nèi)容（相關(guān)于挪動(dòng)端），或者將鼠標(biāo)懸浮在某個(gè)元素上時(shí)可以取得更多的信息。

但是挪動(dòng)端的用戶(hù)則只能將視野集中在一塊較小的屏幕上，而且必需以各種不同的方式來(lái)與設(shè)備停止交互。經(jīng)過(guò)記住定義一個(gè)挪動(dòng)端規(guī)劃和挪動(dòng)端交互標(biāo)準(zhǔn)的細(xì)節(jié)，我們能夠在挪動(dòng)端上發(fā)明一個(gè)直觀的體驗(yàn)。

1. 可用的規(guī)劃

挪動(dòng)端屏幕的空間局限性，給設(shè)計(jì)工作帶來(lái)了一個(gè)有趣的限制——如何在有限的屏幕上以最優(yōu)的方式，顯現(xiàn)內(nèi)容以及提供最好交互方式。詳細(xì)來(lái)說(shuō)，規(guī)劃要既精簡(jiǎn)又能讓用戶(hù)集中留意力。

（1 ）規(guī)劃的構(gòu)造

為了給設(shè)計(jì)打好根底（造房先打地基，設(shè)計(jì)頁(yè)面先設(shè)計(jì)規(guī)劃），我們需求思索如何最有效地運(yùn)用屏幕空間。”柵格系統(tǒng)” 1（Grid System）有助于設(shè)計(jì)師做到這點(diǎn)：平均散布的垂直線構(gòu)造能夠作為放置內(nèi)容依據(jù)。

用這個(gè)辦法，能讓設(shè)計(jì)師更容易將按鈕、標(biāo)題或圖像放在最有效的中央。將頁(yè)面組件放在網(wǎng)格上有助于引導(dǎo)正在“運(yùn)用”頁(yè)面的用戶(hù)，同時(shí)發(fā)明一個(gè)潔凈美觀的視覺(jué)體驗(yàn)。

滾動(dòng)和滑動(dòng)的空間：用戶(hù)在閱讀頁(yè)面內(nèi)容時(shí)，不應(yīng)該有任何與閱讀頁(yè)面無(wú)關(guān)的操作被用戶(hù)“激活”，在用戶(hù)嘗試滾動(dòng)頁(yè)面時(shí)不應(yīng)該“翻開(kāi)一個(gè)鏈接/頁(yè)面”，這一點(diǎn)很重要。

換句話說(shuō)就是，元素之間要有足夠的間距來(lái)允許用戶(hù)輕松地閱讀頁(yè)面。

2. 人性化的交互

在挪動(dòng)設(shè)備上的觸摸屏界面，也意味著視覺(jué)設(shè)計(jì)必需增強(qiáng)交互。換句話說(shuō)，元素的大小和位置應(yīng)確保其易用性，并指出動(dòng)作之間的重要性和相關(guān)性。

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

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

為通訊而設(shè)計(jì)

物理?xiàng)l件限制這方面只是我們?yōu)榕矂?dòng)設(shè)備設(shè)計(jì)時(shí)所面臨應(yīng)戰(zhàn)的一半，另一半則是在信息傳達(dá)方面。“挪動(dòng)第一”（mobile first），這個(gè)理論提示我們，挪動(dòng)用戶(hù)應(yīng)該從網(wǎng)站上取得與桌面用戶(hù)相同的信息價(jià)值。思索到這一點(diǎn)，為挪動(dòng)通訊而設(shè)計(jì)影響了這個(gè)方式——一切設(shè)計(jì)師需求接觸他們正在交流的音訊。

為了增強(qiáng)通訊，我們需求充沛應(yīng)用我們對(duì)信息的了解和解讀。人腦解讀視覺(jué)信息要比文字信息快得多，這就意味著運(yùn)用視覺(jué)和圖像來(lái)增強(qiáng)通訊是十分有價(jià)值的。 良好的視覺(jué)款式可以增加價(jià)值，支撐內(nèi)容或者交互的主體，并改善整體的用戶(hù)體驗(yàn)（挪動(dòng)端和桌面端）。

垂直排版規(guī)律

我們優(yōu)先思索運(yùn)用垂直排版來(lái)傳達(dá)信息，信息構(gòu)造創(chuàng)立了一個(gè)合理的內(nèi)容流，而可視化設(shè)計(jì)能夠進(jìn)一步明白辨別內(nèi)容的層級(jí)。在內(nèi)容排版上運(yùn)用適宜的尺寸和間距，能夠創(chuàng)立一個(gè)良好的垂直方向的視覺(jué)流，更明晰的傳達(dá)不同層級(jí)的內(nèi)容。

除了前面提到的垂直網(wǎng)格系統(tǒng)，基線網(wǎng)格（baseline grid）能夠在垂直方向上創(chuàng)立一個(gè)良好的的排版，運(yùn)用戶(hù)更容易閱讀和了解內(nèi)容。

詳細(xì)來(lái)說(shuō)，基線網(wǎng)格是經(jīng)過(guò)行高的標(biāo)準(zhǔn)來(lái)創(chuàng)立的一種網(wǎng)格構(gòu)造。它在排版上明白的規(guī)則了行距和尺寸，同時(shí)也有助于肯定垂直方向上不同的內(nèi)容組之間的間距。遵照這些規(guī)則能夠確保內(nèi)容段落的可讀性，并且能夠運(yùn)用戶(hù)分明地域分一段內(nèi)容和整體內(nèi)容的差異。

基線網(wǎng)格在HTML和CSS中很難準(zhǔn)確地完成（implement accurately） ，但是它在設(shè)計(jì)過(guò)程中能夠?yàn)殚_(kāi)發(fā)尺寸和肯定間距提供良好的指導(dǎo)。

運(yùn)用顏色

顏色是另外一種十分有價(jià)值的傳達(dá)信息的工具，能夠有多種方式來(lái)保證內(nèi)容和信息交互。

傳達(dá)一種色彩或作風(fēng)：顏色設(shè)計(jì)是十分客觀的，它依賴(lài)于個(gè)人經(jīng)歷和文化。運(yùn)用特定的色彩和明暗水平，能夠協(xié)助我們傳達(dá)目的的整體印象。亮堂大膽的顏色營(yíng)造出一種興趣性，暗色彩營(yíng)造出一種文雅的氣氛或基調(diào)，而參加了灰的淡色調(diào)會(huì)營(yíng)造出一種復(fù)古感。理解更多的顏色理論（color theory）有助于我們選擇最合適設(shè)計(jì)目的的顏色。

辨別細(xì)節(jié)：顏色能夠用來(lái)突出內(nèi)容項(xiàng)，闡明內(nèi)容項(xiàng)之間的聯(lián)絡(luò)，或維持構(gòu)造化的內(nèi)容，比方堅(jiān)持內(nèi)容之間的獨(dú)立性。

辨別靜態(tài)項(xiàng)和交互功用：運(yùn)用激烈的比照有助于傳達(dá)用處的不同，或者在內(nèi)容或功用之間的銜接。混合運(yùn)用中性色和亮堂色，或者用比照色以確保關(guān)于用戶(hù)來(lái)說(shuō)這個(gè)特定項(xiàng)目是顯眼的。創(chuàng)立分歧的用色，例如：跨靜態(tài)的、激活的、未激活的項(xiàng)目，經(jīng)過(guò)設(shè)計(jì)能夠更明晰的展現(xiàn)內(nèi)容和功用之間的不同。

傳達(dá)狀態(tài)的變換：顏色能夠智能的運(yùn)用，在用戶(hù)對(duì)一個(gè)元素停止交互后，它能夠突出音訊、提示和錯(cuò)誤等顯現(xiàn)。例如，許多網(wǎng)站運(yùn)用綠色來(lái)表示勝利，紅色表示錯(cuò)誤信息來(lái)替代更長(zhǎng)更復(fù)雜的文本音訊。這有助于進(jìn)步設(shè)計(jì)的可用性，經(jīng)過(guò)運(yùn)用分歧的顏色商定來(lái)快速傳送新信息。

運(yùn)用隱喻

最近，當(dāng)經(jīng)過(guò)視覺(jué)設(shè)計(jì)停止交流的時(shí)分隱喻能夠作為一個(gè)有力的處理計(jì)劃。隱喻經(jīng)過(guò)喚起人們?cè)?jīng)熟習(xí)的元素，或者可視的對(duì)象運(yùn)用戶(hù)快速的了解內(nèi)容和功用。

擬物化就是視覺(jué)隱喻的極致運(yùn)用，界面元素被設(shè)計(jì)成與理想世界中的事物完整類(lèi)似的模仿理想世界的對(duì)象。固然它最近名聲不怎樣好并且Windows8 和iOS7 都遠(yuǎn)離隱喻設(shè)計(jì)，但這些操作系統(tǒng)和其它挪動(dòng)網(wǎng)站和APP都在運(yùn)用簡(jiǎn)單的隱喻界面設(shè)計(jì)，如可被刪除的渣滓、照相機(jī)的攝像頭和郵箱的信件。

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

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

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

圖標(biāo)解讀：在設(shè)計(jì)挪動(dòng)設(shè)備，圖標(biāo)就十分用，用于在有限的屏幕空間允許快速交流復(fù)雜的概念。圖標(biāo)在視覺(jué)隱喻的運(yùn)用——特殊的圖標(biāo)已成為網(wǎng)絡(luò)規(guī)范，例如：我們提到的刪除、網(wǎng)絡(luò)攝像頭和電子郵件的圖標(biāo)——也就意味著，人們?cè)诠ぷ鲿r(shí)能夠不需求解釋也能夠了如指掌。

設(shè)計(jì)簡(jiǎn)單而明晰的圖標(biāo)是一項(xiàng)具有應(yīng)戰(zhàn)性的任務(wù)，因而理解圖標(biāo)怎樣影響你的設(shè)計(jì)的明晰性就很重要的。

將來(lái)的手機(jī)

一個(gè)明晰明了的標(biāo)準(zhǔn)原則，比方本系列描繪的，對(duì)任何挪動(dòng)設(shè)計(jì)人員都是有價(jià)值的。但是只要當(dāng)我們控制了這些原則，我們才干超越原則，突破規(guī)則，突破發(fā)明性的界線，發(fā)明出一些輝煌而共同的東西。隨著對(duì)用戶(hù)持續(xù)不時(shí)的思索，會(huì)讓我們發(fā)明出的主見(jiàn)在功用和美感得以均衡。

挪動(dòng)設(shè)計(jì)面臨著一些令人興奮的應(yīng)戰(zhàn)和宏大的機(jī)遇，技術(shù)的快速開(kāi)展和不時(shí)發(fā)作變化的用戶(hù)場(chǎng)景，意味著今日的限定可能在幾年后不復(fù)存在。關(guān)于這些應(yīng)戰(zhàn)，創(chuàng)新思想和發(fā)明力能夠協(xié)助我們探究新辦法，并且讓我們?cè)诿鎸?duì)設(shè)計(jì)問(wèn)題時(shí)能夠持續(xù)發(fā)現(xiàn)新的、漂亮的、具有可處理性的處理計(jì)劃。