藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：http://www.shejidaren.com/designing-for-mobile-part-3.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

為了利用平臺(tái)化的功能，歷史上第一批移動(dòng)網(wǎng)站不得不在很多方面做出“讓步”，因此遠(yuǎn)達(dá)不到“佳作”的水平。而如今，功能更加完備的設(shè)備讓我們有機(jī)會(huì)打造出更具視覺(jué)吸引力的設(shè)計(jì)，這些設(shè)計(jì)不僅能夠刺激和吸引用戶，更能夠提高用戶體驗(yàn)的實(shí)用性。不過(guò)，機(jī)會(huì)的出現(xiàn)同時(shí)也伴隨著挑戰(zhàn)。

在第一節(jié)：信息架構(gòu)中，我們共同探索了移動(dòng)端在物理特性和規(guī)格方面有別于電腦的地方；我們使用移動(dòng)設(shè)備的時(shí)間、地點(diǎn)和方式，以及使用移動(dòng)設(shè)備時(shí)的行為方式及感覺(jué)。之后在第二節(jié)：交互設(shè)計(jì)中，我們探討了這些區(qū)別對(duì)于結(jié)構(gòu)和功能的開(kāi)發(fā)有著哪些影響。上面這兩篇文章為優(yōu)秀的手機(jī)和平板電腦設(shè)計(jì)提供了基石。下面，我們進(jìn)入移動(dòng)端設(shè)計(jì)研究的第3部分：探索視覺(jué)設(shè)計(jì)解決方案以及打造漂亮、好用的應(yīng)用所需遵循的一些最佳實(shí)踐。

首先我們來(lái)看如何針對(duì)移動(dòng)設(shè)備的物理制約進(jìn)行設(shè)計(jì)（包括各項(xiàng)最佳實(shí)踐），然后聊聊訊息傳遞方面（也就是使用視覺(jué)設(shè)計(jì)支持移動(dòng)網(wǎng)站和應(yīng)用上的內(nèi)容）的設(shè)計(jì)。

針對(duì)移動(dòng)設(shè)備物理制約進(jìn)行設(shè)計(jì)

手機(jī)和平板電腦的物理形式和觸摸屏界面限定了其在使用方面的幾項(xiàng)基本注意事項(xiàng)。對(duì)于電腦，用戶可以在寬廣的內(nèi)容空間內(nèi)任意滾動(dòng)或通過(guò)鼠標(biāo)懸浮查看細(xì)節(jié)信息，但移動(dòng)用戶所面對(duì)的空間則較為有限，因此必須采取不同的交互方式。要?jiǎng)?chuàng)造出直觀的用戶體驗(yàn)，我們就必須要牢記有關(guān)移動(dòng)布局和移動(dòng)交互的特定限制因素。

實(shí)用布局

移動(dòng)屏幕上有限的空間對(duì)內(nèi)容和交互的有效呈現(xiàn)提出了一些有趣限制。具體來(lái)說(shuō)就是：布局務(wù)求精簡(jiǎn)、專注。

·    布局結(jié)構(gòu)-為了給設(shè)計(jì)提供強(qiáng)有力的基礎(chǔ)，我們需要考慮如何最有效的運(yùn)用有限的屏幕空間。在這方面網(wǎng)格系統(tǒng)可以給設(shè)計(jì)師帶來(lái)很大幫助：均勻分布的垂直線條結(jié)構(gòu)可以起到引導(dǎo)和安置內(nèi)容的作用。網(wǎng)格能夠界定出空間是否均勻，從而能讓設(shè)計(jì)師更輕松地判斷出放置按鈕、標(biāo)題或圖像的最佳位置。沿網(wǎng)格放置元素一方面能夠給用戶的旅程帶來(lái)方向感，同時(shí)也能帶來(lái)清爽、美觀的視覺(jué)效果。

·     滾動(dòng)及滑動(dòng)的空間-在用戶瀏覽內(nèi)容或者滾動(dòng)屏幕時(shí)，一定要保證他們不會(huì)意外執(zhí)行預(yù)期外的操作，或者激活不需要的對(duì)象。換句話說(shuō)，屏幕上各個(gè)元素之間的間距必須足夠大，讓用戶能夠輕松在其間進(jìn)行導(dǎo)航。

用戶友好的交互

移動(dòng)設(shè)備采用觸摸屏界面還意味著視覺(jué)設(shè)計(jì)必須起到強(qiáng)化交互的作用；換句話說(shuō)，視覺(jué)元素大小和位置的安排要保證使用的方便，并突出不同操作的重要性及相互之間的聯(lián)系。

·    按鈕點(diǎn)擊區(qū)域-如第2節(jié)所討論：按鈕大小和間距的充足與否決定了交互能否輕松實(shí)現(xiàn)。在理想情況下，標(biāo)準(zhǔn)屏幕上的按鈕大小應(yīng)為44px到57px，高密度屏（視網(wǎng)膜屏）上為88px到114px。這個(gè)大小可以保證正常人的指尖能夠輕松激活按鈕。

·     能夠得到看得見(jiàn)的控件—相關(guān)的交互對(duì)象應(yīng)該能輕松用手指夠得到，以方便用戶更快捷地在彼此之間進(jìn)行過(guò)渡切換。這樣有助于減弱用戶對(duì)交互操作之間彼此聯(lián)系的困惑，進(jìn)而提高復(fù)雜交互流程的進(jìn)展速度。

訊息傳遞設(shè)計(jì)

在進(jìn)行移動(dòng)端設(shè)計(jì)時(shí)，物理方面的制約還只是我們所面臨的難題之一。另一項(xiàng)難題是如何傳遞訊息?！耙苿?dòng)為先”的理念教導(dǎo)我們移動(dòng)用戶通過(guò)移動(dòng)設(shè)備和電腦所獲得的價(jià)值應(yīng)該是相同的。記住這一點(diǎn)后，我們就會(huì)發(fā)現(xiàn)，移動(dòng)端訊息傳遞的設(shè)計(jì)會(huì)影響到各位設(shè)計(jì)師所要傳遞訊息的內(nèi)容。

為了提高訊息傳遞效率，我們需要善加利用我們理解和解構(gòu)信息的方式。人腦解譯視覺(jué)信息的速度要遠(yuǎn)遠(yuǎn)快于文字信息，也就是說(shuō)使用視覺(jué)元素和圖像能夠更加有效地提高訊息傳遞效率。優(yōu)秀的視覺(jué)樣式能夠提高價(jià)值、為內(nèi)容或交互的目的提供支持，并改善整體用戶體驗(yàn)（既適用于移動(dòng)端也適用于電腦）。

垂直節(jié)奏

我們要考慮的第一個(gè)提高訊息傳遞效率的方式是利用垂直節(jié)奏。信息架構(gòu)能夠創(chuàng)建出一套合理的內(nèi)容流，而通過(guò)視覺(jué)設(shè)計(jì)我們可以進(jìn)一步在內(nèi)容的視覺(jué)層級(jí)內(nèi)實(shí)現(xiàn)更高的明晰度。合理利用不同內(nèi)容板塊的大小和相互之間的間距可以創(chuàng)造出優(yōu)秀的垂直節(jié)奏感，從而為內(nèi)容層級(jí)的訊息傳遞提供支持。

除了前面提到的垂直網(wǎng)格體系之外，也可以用基線網(wǎng)格創(chuàng)造合適的垂直節(jié)奏感，讓閱讀和理解內(nèi)容變得更加容易。明確地說(shuō)，基線網(wǎng)格能夠通過(guò)規(guī)范線條的粗細(xì)來(lái)創(chuàng)造結(jié)構(gòu)。這樣可以給文字方向和尺寸的界定提供明確的水平標(biāo)尺，同時(shí)也能夠確定不同內(nèi)容組之間的間距。使用這些標(biāo)尺可以保證文案的清晰易讀，而且用戶能夠明確區(qū)分不同的板塊和功能組?；€網(wǎng)格在HTML和CSS中的具體操作可能比較困難，但確實(shí)能夠?yàn)樵O(shè)計(jì)流程中的大小和間距設(shè)定提供指導(dǎo)。

顏色使用

顏色是訊息傳遞的又一有力工具，其可通過(guò)多種不同方式支持內(nèi)容和交互。

·    表現(xiàn)基調(diào)或樣式—設(shè)計(jì)中的顏色是個(gè)非常主管，而且嚴(yán)重依賴于個(gè)人感覺(jué)和文化背景的東西。但是，通過(guò)使用特別的色調(diào)和陰影有助于表現(xiàn)設(shè)計(jì)師腦中想給人的整體印象。明亮大膽的顏色能給人帶來(lái)樂(lè)趣感，較深的色調(diào)能營(yíng)造優(yōu)雅的氣氛，而柔和的色調(diào)則可帶來(lái)古典感覺(jué)。深入研究顏色理論可以幫助我們根據(jù)設(shè)局目標(biāo)選擇最適合的顏色。

·    區(qū)分不同板塊—顏色可以用來(lái)區(qū)分不同的內(nèi)容對(duì)象、顯示對(duì)象之間的關(guān)聯(lián)，或者支持內(nèi)容結(jié)構(gòu)，例如表現(xiàn)內(nèi)容之間是彼此分離的。

·    區(qū)分靜態(tài)對(duì)象和互動(dòng)功能—使用強(qiáng)烈的對(duì)比有助于傳達(dá)出你要表現(xiàn)出的區(qū)別或者不同內(nèi)容及功能之間的聯(lián)系?；旌鲜褂弥行院兔髁恋纳驶?qū)Ρ葟?qiáng)烈的色彩可以讓特定的對(duì)象在用戶眼中表現(xiàn)地更加突出。在設(shè)計(jì)中對(duì)顏色的連貫使用（例如全部靜態(tài)對(duì)象使用相同色調(diào)，激活和非激活對(duì)象使用不同色調(diào)）可以更加明確地彰顯出內(nèi)容和功能之間的區(qū)別。

·    傳達(dá)狀態(tài)改變—顏色還可以用來(lái)在用戶與某個(gè)元素進(jìn)行交互后巧妙地表現(xiàn)信息、通知和錯(cuò)誤狀態(tài)。舉例來(lái)說(shuō)，很多網(wǎng)站使用綠色表示操作成功、紅色表現(xiàn)錯(cuò)誤信息，而不是使用冗長(zhǎng)繁復(fù)的文字。通過(guò)連貫的使用顏色來(lái)快速傳遞新信息有助于提高整體設(shè)計(jì)的實(shí)用性。

使用象征

最后來(lái)講講象征。象征在視覺(jué)設(shè)計(jì)的信息傳遞中是一個(gè)非常強(qiáng)大的解決方案。通過(guò)象征手法，可以讓用戶聯(lián)想到自己本來(lái)就比較熟悉的元素或視覺(jué)對(duì)象，從而達(dá)到快速理解內(nèi)容和功能的目的。擬物化就是在數(shù)字空間內(nèi)使用視覺(jué)象征的。擬物化是指將界面元素設(shè)計(jì)地和真實(shí)世界中對(duì)應(yīng)的物體高度相似。另外，盡管Windows8和iOS7對(duì)擬物化的摒棄給這一風(fēng)格帶來(lái)了不好的名聲，但它們以及其他很多應(yīng)用還是在很大程度上于界面上使用了簡(jiǎn)約化的擬物設(shè)計(jì)。例如用垃圾桶表示刪除、照相機(jī)表示攝像頭、信封表示郵件等。

象征可以通過(guò)多種方法來(lái)支持訊息或主題的表現(xiàn)。

·    支持潛在的主題—象征手法可以用來(lái)對(duì)單一的設(shè)計(jì)元素進(jìn)行延展，從而使其成為設(shè)計(jì)或功能的關(guān)鍵主題。在Flipboard這個(gè)應(yīng)用中，翻轉(zhuǎn)效果是用戶交互操作中的一個(gè)不可或缺的組成部分，而這一效果的順暢與否則是這個(gè)應(yīng)用成功的關(guān)鍵因素。這一象征手法的使用可以快速向用戶傳達(dá)產(chǎn)品的理念，同時(shí)奠定產(chǎn)品獨(dú)特的定位。

·   按鈕與交互—在設(shè)計(jì)按鈕時(shí)使用簡(jiǎn)單的擬物化來(lái)模擬真實(shí)生活中的交互元素，讓功能更加明確。但有一點(diǎn)需要引起我們的注意：如果品牌或樣式指南中要求使用比較簡(jiǎn)約的風(fēng)格，那么可以讓顏色和樣式與靜態(tài)對(duì)象產(chǎn)生明顯的區(qū)別，從而讓這一方法達(dá)到更佳的效果。Wunderlist的按鈕就是用了模擬真實(shí)生活的風(fēng)格

·   圖標(biāo)—考慮到有限的屏幕空間要求快速傳遞復(fù)雜的概念，因此圖標(biāo)對(duì)于移動(dòng)端的設(shè)計(jì)非常重要。對(duì)圖標(biāo)使用視覺(jué)象征手法（特別是已經(jīng)成為網(wǎng)上標(biāo)準(zhǔn)的圖標(biāo)，例如刪除、攝像頭和電子郵件的圖標(biāo)）意味著即便不附上說(shuō)明標(biāo)簽，用戶也能一看就懂。設(shè)計(jì)簡(jiǎn)單但明確的圖標(biāo)是一項(xiàng)有難度的工作，所以一定要理解圖標(biāo)對(duì)設(shè)計(jì)明晰度有何影響。

移動(dòng)的未來(lái)

明確理解移動(dòng)設(shè)備的制約和標(biāo)準(zhǔn)（正如本系列文章所述）對(duì)于移動(dòng)設(shè)計(jì)師來(lái)說(shuō)非常關(guān)鍵。但是，只有真正掌握了這些內(nèi)容，我們才能夠突破規(guī)范的限制、打破陳規(guī)，將創(chuàng)意發(fā)揮到更加獨(dú)特、出彩的東西上。除此之外，我們還要不斷思考用戶的需求，努力實(shí)現(xiàn)功能與美觀之間的平衡。

移動(dòng)端的設(shè)計(jì)既是挑戰(zhàn)也是機(jī)遇。技術(shù)的飛速發(fā)展和用戶背景的不斷改變意味著今天的制約在未來(lái)幾年內(nèi)就可能會(huì)消失。革新的思維和創(chuàng)意能夠幫助我們探索發(fā)現(xiàn)看待這些挑戰(zhàn)的新角度，讓我們持之以恒地發(fā)現(xiàn)新的、漂亮的而且好用的針對(duì)設(shè)計(jì)問(wèn)題的解決方案。

掃一掃，案例分享帶回家（藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺(tái)）