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

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

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

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

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

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

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

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

牧羊人設計文章推薦：

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