移動部分設(shè)計：視覺設(shè)計
作為平臺能力的直接反應(yīng)，第一移動網(wǎng)站是一個運(yùn)動的“妥協(xié)”而不是“工藝”。今天的功能更齊全的設(shè)備，但是，讓我們有機(jī)會創(chuàng)造更多的視覺上的設(shè)計，不僅能激發(fā)和吸引用戶，但也增加經(jīng)驗的可用性。然而，隨著這個機(jī)會也有新的挑戰(zhàn)。

進(jìn)入1部分：信息架構(gòu)我們探討是什么使得在物質(zhì)和規(guī)格方面的桌面移動不同；如何，在哪里，當(dāng)我們使用移動設(shè)備；以及我們?nèi)绾问褂眠@些設(shè)備時的行為和感受。然后，在2部分：交互設(shè)計我們看著影響這些差異在發(fā)展的結(jié)構(gòu)和功能。這兩篇文章在手機(jī)和平板電腦設(shè)計提供依據(jù)。現(xiàn)在我們總結(jié)設(shè)計移動通過必要的探索視覺設(shè)計方案和相關(guān)的最佳實踐，產(chǎn)生美麗的三部分研究中，可用的應(yīng)用程序。
我們先看看移動的物理約束的設(shè)計，包括最佳實踐指南，然后我們再看看設(shè)計通信：利用視覺設(shè)計支持的移動網(wǎng)站和應(yīng)用程序的內(nèi)容。

對于物理約束設(shè)計
物理形式和手機(jī)和平板設(shè)備的觸摸屏界面為我們提供了一些基本的可用性的考慮。在一個桌面用戶可以掃描在更廣闊的領(lǐng)域的內(nèi)容或懸停在進(jìn)一步的信息元素，移動用戶都集中在一個較小的區(qū)域，必須以不同的方式演繹的相互作用。牢記定義移動布局和移動的特異性相互作用的細(xì)節(jié)，我們可以創(chuàng)建一個直觀的

移動體驗。
可用的布局
有限的可用空間在手機(jī)屏幕上提供了一個有趣的約束在如何最好的展示內(nèi)容和互動。具體的布局需要精簡和集中。
•的布局結(jié)構(gòu)–提供強(qiáng)有力的基礎(chǔ)設(shè)計需要考慮如何最好地利用可用的屏幕空間。網(wǎng)格系統(tǒng)幫助設(shè)計師實現(xiàn)：結(jié)構(gòu)均勻間隔的垂直線作為安排內(nèi)容指南。網(wǎng)格確定活動空間，這使得設(shè)計師確定按鈕，最有效的配置更容易的標(biāo)題，或圖像。安裝這些組件沿網(wǎng)格可以讓用戶在他們的旅程，同時創(chuàng)造一個清潔、美觀的視覺。
 
•空間滾動和滑動–至關(guān)重要的是，用戶可以瀏覽內(nèi)容不承諾行動，他們沒有意愿，沒有激活一個項目時，他們試圖滾動。換句話說，元素之間的間距必須足夠讓用戶能夠方便地瀏覽這些元素。

友好的用戶交互
觸摸屏界面的移動設(shè)備上也意味著視覺設(shè)計必須加強(qiáng)相互作用；換句話說，大小和元素的位置應(yīng)保證使用方便，和指示的重要性和相關(guān)性的行為。
•按鈕災(zāi)區(qū)–我們討論2部分：交互設(shè)計，適當(dāng)?shù)某叽绾烷g距的按鈕將確保他們可以很容易地激活。理想情況下，按鈕應(yīng)該44px和57px之間在標(biāo)準(zhǔn)屏幕和88px到114px對高密度屏幕（視網(wǎng)膜）。這允許足夠的地區(qū)很容易激活一個按鈕一般的指尖。
•可達(dá)性和明顯的控制–如果相關(guān)互動項目是觸手可及的對方會讓用戶更快速地使它們之間的過渡。這將有助于減少任何混淆用戶可能在如何相互連接，加快更復(fù)雜的過程。
為了加強(qiáng)溝通，我們需要讓我們?nèi)绾卫斫夂徒庾x信息的最佳使用。人類大腦對視覺信息比語言快得多，這意味著它可以使用視覺和圖像增強(qiáng)溝通非常有價值。好的視覺造型將增添價值，支持的內(nèi)容或交互的目的，并提高整體的用戶體驗（移動和桌面）。

垂直的節(jié)奏
第一加強(qiáng)溝通我們會考慮是垂直節(jié)奏的運(yùn)用。信息架構(gòu)創(chuàng)建一個合理的流程內(nèi)容，然而視覺設(shè)計可用于在內(nèi)容的視覺層次創(chuàng)造進(jìn)一步明晰。在內(nèi)容部分的大小和間距合理的使用將創(chuàng)造一個良好的垂直節(jié)奏支持的內(nèi)容層次的溝通。
 
除了垂直網(wǎng)格系統(tǒng)前面所提到的，一個基線網(wǎng)格可以幫助創(chuàng)造一個良好的垂直節(jié)奏，使內(nèi)容更容易閱讀和理解。具體來說，基線網(wǎng)格創(chuàng)建一個結(jié)構(gòu)雖然線的高度規(guī)范。這個定義的字體和大小提供了明確的領(lǐng)導(dǎo)水平的規(guī)則，但也可用于定義內(nèi)容組之間的間距。遵循這些規(guī)則將確保段落復(fù)制清晰，用戶可以清楚的區(qū)分和功能組之間的部分?；€網(wǎng)格很難準(zhǔn)確執(zhí)行在HTML和CSS，但不提供有用的指導(dǎo)，在開發(fā)和設(shè)計過程中的間距尺寸。

使用的顏色
顏色是一個非常有價值的交流工具，可以用多種方式支持內(nèi)容和相互作用。
•傳達(dá)一種色調(diào)或風(fēng)格色彩設(shè)計是很主觀的，依賴于個人經(jīng)驗和文化。然而，使用特定的音調(diào)和色調(diào)可以幫助傳達(dá)的目的的一個整體印象。明亮大膽的顏色，創(chuàng)造出一種樂趣，暗色調(diào)創(chuàng)造一種優(yōu)雅而柔和的色調(diào)或氣氛更灰可以創(chuàng)造一種復(fù)古的感覺。學(xué)習(xí)更多關(guān)于色彩理論有助于我們選擇最適合的設(shè)計目標(biāo)的顏色。
•區(qū)分部分顏色可以用來突出內(nèi)容的項目，說明項目是相關(guān)的，或支撐結(jié)構(gòu)的內(nèi)容如內(nèi)容如何分離。
 
•區(qū)分靜態(tài)項和交互的功能，用強(qiáng)烈的對比將有助于溝通差異的目的或內(nèi)容或功能之間的聯(lián)系。使用混合的中性和明亮的顏色，或顏色在色輪結(jié)束反對將確保具體項目脫穎而出，給用戶。創(chuàng)建一致的顏色的使用，例如在靜態(tài)的、活躍的和不活躍的項目，整個設(shè)計也將展示內(nèi)容和功能的差異更明顯。
隱喻可以用不同的方式來支持通信的消息或主題。
•支持一個潛在的主題-隱喻可以超越一個單一的設(shè)計元素，而成為設(shè)計或功能的一個關(guān)鍵主題。在Flipboard應(yīng)用，翻轉(zhuǎn)過渡是用戶互動的一個組成部分，和本的順利實施是在應(yīng)用程序的成功的一個因素。用一個比喻這樣可以讓概念的快速通信的用戶，以及幫助應(yīng)用程序都有一個獨(dú)特的命題。
 
•按鈕和交互設(shè)計時使用簡單的借殼按鈕可以有一個簡單的方法來模擬現(xiàn)實生活中的互動元素，使功能明顯。然而，值得注意的是，如果奉承方式必須符合品牌或風(fēng)格指南那么可以有效如果顏色和樣式可以明確區(qū)分靜態(tài)項目。Wunderlist采用按鍵與現(xiàn)實造型
•影像學(xué)圖標(biāo)可以設(shè)計移動時，在有限的屏幕空間允許的復(fù)雜概念的快速通信。使用視覺隱喻的圖標(biāo)是圖標(biāo)，已經(jīng)成為網(wǎng)絡(luò)標(biāo)準(zhǔn)，如刪除，攝像頭，和電子郵件圖標(biāo)我們提及，意味著他們可以經(jīng)常工作沒有標(biāo)簽，雖然可以理解的一瞥。設(shè)計簡單，卻清晰的圖標(biāo)是一個具有挑戰(zhàn)性的任務(wù)，所以重要的是要了解如何圖標(biāo)影響你設(shè)計的清晰性。

移動的未來
一個清晰的認(rèn)識和標(biāo)準(zhǔn)的約束，如本系列介紹，有任何移動的設(shè)計師。然而，一旦我們掌握了這些，才能有超越的指引的能力；打破規(guī)則和推動創(chuàng)新創(chuàng)造出燦爛而獨(dú)特的。這樣，隨著不斷的用戶考慮，允許我們創(chuàng)建功能和美學(xué)理想的平衡。
設(shè)計的移動有一些非常激動人心的挑戰(zhàn)和機(jī)會在它前面?？茖W(xué)技術(shù)的迅猛發(fā)展和用戶環(huán)境的不斷變化意味著今天的約束，不可能在未來幾年存在。創(chuàng)新思維和創(chuàng)新能力，將有助于我們發(fā)掘看待這些挑戰(zhàn)的新方法，并允許我們繼續(xù)尋找新的、美麗的和有用的在我們前面的設(shè)計問題的解決方案。

牧羊人設(shè)計文章推薦：

與主題預(yù)做布局
網(wǎng)站專業(yè)人員的工具
你的網(wǎng)頁網(wǎng)頁創(chuàng)意生涯