在信息架構(gòu)中济赎，我們共同探索了移動端在物理特性和規(guī)格方面有別于電腦的地方酬蹋；我們使用移動設(shè)備的時間冲呢、地點和方式，以及使用移動設(shè)備時的行為方式及感覺。之后在第二補的交互設(shè)計中，我們探討了這些分別對于結(jié)構(gòu)和功能的開發(fā)有著哪些影響数尿。下面，我們進入移動設(shè)計第三補：探索視覺設(shè)計解決方案以及打造漂亮惶楼、好用的應(yīng)用所需遵循的一些最佳實踐右蹦。
首先我們來看如何針對移動設(shè)備的物理制約進行設(shè)計（包括各項最佳實踐），然后聊聊訊息傳遞方面（也就是使用視覺設(shè)計支持移動網(wǎng)站和應(yīng)用上的內(nèi)容）的設(shè)計鲫懒。
針對移動設(shè)備物理制約進行設(shè)計
手機和平板電腦的物理形式和觸摸屏界面限定了其在使用方面的幾項基本注意事項嫩实。對于電腦，用戶可以在寬廣的內(nèi)容空間內(nèi)任意滾動或通過鼠標懸浮查看細節(jié)信息窥岩，但移動用戶所面對的空間則較為有限，因此必須采取不同的交互方式宰缤。要創(chuàng)造出直觀的用戶體驗颂翼，我們就必須要牢記有關(guān)移動布局和移動交互的特定限制因素。
實用布局
移動屏幕上有限的空間對內(nèi)容和交互的有效呈現(xiàn)提出了一些有趣限制慨灭。具體來說就是：布局務(wù)求精簡朦乏、專注。
布局結(jié)構(gòu)—為了給設(shè)計提供強有力的基礎(chǔ)氧骤，我們需要考慮如何最有效的運用有限的屏幕空間呻疹。
在這方面網(wǎng)格系統(tǒng)可以給設(shè)計師帶來很大幫助：均勻分布的垂直線條結(jié)構(gòu)可以起到引導和安置內(nèi)容的作用。網(wǎng)格能夠界定出空間是否均勻筹陵，從而能讓設(shè)計師更輕松地判斷出放置按鈕刽锤、標題或圖像的最佳位置镊尺。沿網(wǎng)格放置元素一方面能夠給用戶的旅程帶來方向感，同時也能帶來清爽并思、美觀的視覺效果庐氮。
滾動及滑動的空間—在用戶瀏覽內(nèi)容或者滾動屏幕時，一定要保證他們不會意外執(zhí)行預期外的操作宋彼，或者激活不需要的對象弄砍。換句話說，屏幕上各個元素之間的間距必須足夠大输涕，讓用戶能夠輕松在其間進行導航音婶。
用戶友好的交互
移動設(shè)備采用觸摸屏界面還意味著視覺設(shè)計必須起到強化交互的作用；換句話說莱坎，視覺元素大小和位置的安排要保證使用的方便衣式，并突出不同操作的重要性及相互之間的聯(lián)系。
按鈕點擊區(qū)域—如第2補所討論：按鈕大小和間距的充足與否決定了交互能否輕松實現(xiàn)型奥。在理想情況下瞳收，標準屏幕上的按鈕大小應(yīng)為44px到57px，高密度屏（視網(wǎng)膜屏）上為88px到114px厢汹。這個大小可以保證正常人的指尖能夠輕松激活按鈕螟深。
能夠得到看得見的控件—相關(guān)的交互對象應(yīng)該能輕松用手指夠得到，以方便用戶更快捷地在彼此之間進行過渡切換烫葬。這樣有助于減弱用戶對交互操作之間彼此聯(lián)系的困惑界弧，進而提高復雜交互流程的進展速度。
訊息傳遞設(shè)計
在進行移動端設(shè)計時搭综，物理方面的制約還只是我們所面臨的難題之一垢箕。另一項難題是如何傳遞訊息。雖然移動用戶通過移動設(shè)備和電腦所獲得的價值應(yīng)該是相同的兑巾。但是移動端訊息傳遞的設(shè)計會影響到各位設(shè)計師所要傳遞訊息的內(nèi)容条获。
為了提高訊息傳遞效率，我們需要善加利用我們理解和解構(gòu)信息的方式蒋歌。人腦解譯視覺信息的速度要遠遠快于文字信息帅掘，也就是說使用視覺元素和圖像能夠更加有效地提高訊息傳遞效率。優(yōu)秀的視覺樣式能夠提高價值堂油、為內(nèi)容或交互的目的提供支持修档，并改善整體用戶體驗（既適用于移動端也適用于電腦）。
垂直節(jié)奏
我們要考慮的第一個提高訊息傳遞效率的方式是利用垂直節(jié)奏府框。信息架構(gòu)能夠創(chuàng)建出一套合理的內(nèi)容流吱窝，而通過視覺設(shè)計我們可以進一步在內(nèi)容的視覺層級內(nèi)實現(xiàn)更高的明晰度。合理利用不同內(nèi)容板塊的大小和相互之間的間距可以創(chuàng)造出優(yōu)秀的垂直節(jié)奏感，從而為內(nèi)容層級的訊息傳遞提供支持院峡。
除了前面提到的垂直網(wǎng)格體系之外兴使，也可以用基線網(wǎng)格創(chuàng)造合適的垂直節(jié)奏感，讓閱讀和理解內(nèi)容變得更加容易撕予。明確地說鲫惶，基線網(wǎng)格能夠通過規(guī)范線條的粗細來創(chuàng)造結(jié)構(gòu)。
這樣可以給文字方向和尺寸的界定提供明確的水平標尺实抡，同時也能夠確定不同內(nèi)容組之間的間距欠母。使用這些標尺可以保證文案的清晰易讀，而且用戶能夠明確區(qū)分不同的板塊和功能組吆寨∩吞剩基線網(wǎng)格在HTML和CSS中的具體操作可能比較困難，但確實能夠為設(shè)計流程中的大小和間距設(shè)定提供指導啄清。
顏色使用
顏色是訊息傳遞的又一有力工具六水，其可通過多種不同方式支持內(nèi)容和交互。
表現(xiàn)基調(diào)或樣式—設(shè)計中的顏色是個非常主管辣卒，而且嚴重依賴于個人感覺和文化背景的東西掷贾。但是，通過使用特別的色調(diào)和陰影有助于表現(xiàn)設(shè)計師腦中想給人的整體印象荣茫。明亮大膽的顏色能給人帶來樂趣感想帅，較深的色調(diào)能營造優(yōu)雅的氣氛，而柔和的色調(diào)則可帶來古典感覺啡莉。深入研究顏色理論可以幫助我們根據(jù)設(shè)局目標選擇最適合的顏色港准。
區(qū)分不同板塊—顏色可以用來區(qū)分不同的內(nèi)容對象、顯示對象之間的關(guān)聯(lián)咧欣，或者支持內(nèi)容結(jié)構(gòu)浅缸，例如表現(xiàn)內(nèi)容之間是彼此分離的。
區(qū)分靜態(tài)對象和互動功能—使用強烈的對比有助于傳達出你要表現(xiàn)出的區(qū)別或者不同內(nèi)容及功能之間的聯(lián)系魄咕●媒罚混合使用中性和明亮的色彩或?qū)Ρ葟娏业纳士梢宰屘囟ǖ膶ο笤谟脩粞壑斜憩F(xiàn)地更加突出。在設(shè)計中對顏色的連貫使用（例如全部靜態(tài)對象使用相同色調(diào)哮兰，激活和非激活對象使用不同色調(diào)）可以更加明確地彰顯出內(nèi)容和功能之間的區(qū)別烟具。
傳達狀態(tài)改變—顏色還可以用來在用戶與某個元素進行交互后巧妙地表現(xiàn)信息、通知和錯誤狀態(tài)奠蹬。舉例來說，很多網(wǎng)站使用綠色表示操作成功嗡午、紅色表現(xiàn)錯誤信息囤躁，而不是使用冗長繁復的文字。通過連貫的使用顏色來快速傳遞新信息有助于提高整體設(shè)計的實用性。
使用象征
通過象征手法狸演，可以讓用戶聯(lián)想到自己本來就比較熟悉的元素或視覺對象言蛇，從而達到快速理解內(nèi)容和功能的目的。擬物化就是在數(shù)字空間內(nèi)使用視覺象征的極致宵距。擬物化是指將界面元素設(shè)計地和真實世界中對應(yīng)的物體高度相似腊尚。
另外，盡管Windows8和iOS7對擬物化的摒棄給這一風格帶來了不好的名聲满哪，但它們以及其他很多應(yīng)用還是在很大程度上于界面上使用了簡約化的擬物設(shè)計婿斥。例如用垃圾桶表示刪除、照相機表示攝像頭哨鸭、信封表示郵件等民宿。
象征可以通過多種方法來支持訊息或主題的表現(xiàn)。
支持潛在的主題—象征手法可以用來對單一的設(shè)計元素進行延展像鸡，從而使其成為設(shè)計或功能的關(guān)鍵主題活鹰。在Flipboard這個應(yīng)用中，翻轉(zhuǎn)效果是用戶交互操作中的一個不可或缺的組成部分只估，而這一效果的順暢與否則是這個應(yīng)用成功的關(guān)鍵因素志群。這一象征手法的使用可以快速向用戶傳達產(chǎn)品的理念，同時奠定產(chǎn)品獨特的定位蛔钙。
按鈕與交互—在設(shè)計按鈕時使用簡單的擬物化來模擬真實生活中的交互元素锌云，讓功能更加明確。但有一點需要引起我們的注意：如果品牌或樣式指南中要求使用比較簡約的風格夸楣，那么可以讓顏色和樣式與靜態(tài)對象產(chǎn)生明顯的區(qū)別宾抓，從而讓這一方法達到更佳的效果。Wunderlist的按鈕就是用了模擬真實生活的風格
圖標—考慮到有限的屏幕空間要求快速傳遞復雜的概念豫喧，因此圖標對于移動端的設(shè)計非常重要石洗。對圖標使用視覺象征手法（特別是已經(jīng)成為網(wǎng)上標準的圖標，例如刪除紧显、攝像頭和電子郵件的圖標）意味著即便不附上說明標簽讲衫，用戶也能一看就懂。設(shè)計簡單但明確的圖標是一項有難度的工作孵班，所以一定要理解圖標對設(shè)計明晰度有何影響涉兽。
總 結(jié)
明確理解移動設(shè)備的制約和標準（正如本系列文章所述）對于移動設(shè)計師來說非常關(guān)鍵。但是篙程，只有真正掌握了這些內(nèi)容枷畏，我們才能夠突破規(guī)范的限制、打破陳規(guī)虱饿，將創(chuàng)意發(fā)揮到更加獨特拥诡、出彩的東西上触趴。除此之外，我們還要不斷思考用戶的需求渴肉，努力實現(xiàn)功能與美觀之間的平衡冗懦。
