圖片版權所屬：站長之家

作為一個直接響應式的功能平臺，第一個手機網站只是一個“試驗品”，而不是“成品”。在今天，如此多的智能設備的確給了我們機會去做更多的視覺設計，但這不僅能激發和吸引用戶，并且增加了用戶體驗。當然伴隨著機會就以為著更多的挑戰。

本文是做出總結，即通過探索視覺設計解決方案和相關的最佳實踐來研究移動設計，從而做出既美不雅又好用的應用。

首先我們來看看移動端設計上的物理限制，其中包羅最佳實踐案例；然后我們將著眼于通信設計，用視覺設計為移動站和應用的內容提供支持。

在束縛下做設計

移動設備和平板設備的外形和可觸控性，給我們帶來了一些基本的可用性方面的考慮。在桌面端，用戶所面對的是更大的顯示區域和更多的內容（相對于移動端），或者將鼠標懸浮在某個元素上時能夠獲得更多的信息。

但是移動端的用戶則只能將視線集中在一塊較小的屏幕上，并且必需以各種不同的方式來與設備進行交互。通過記住定義一個移動端布局和移動端交互規范的細節，我們可以在移動端上創造一個直不雅的體驗。

1. 可用的布局

移動端屏幕的空間局限性，給設計工作帶來了一個有趣的限制——如安在有限的屏幕上以最優的方式，顯示內容以及提供最好交互方式。具體來說，布局要既精簡又能讓用戶集中注意力。

（1 ）布局的結構

為了給設計打好基礎（造房先打地基，設計頁面先設計布局），我們需要考慮如何最有效地使用屏幕空間?！睎鸥裣到y” 1（Grid System）有助于設計師做到這點：均勻分布的垂直線結構可以作為放置內容按照。

用這個方法，能讓設計師更容易將按鈕、標題或圖像放在最有效的地方。將頁面組件放在網格上有助于引導正在“使用”頁面的用戶，同時創造一個干凈美不雅的視覺體驗。

滾動和滑動的空間：用戶在瀏覽頁面內容時，不該該有任何與瀏覽頁面無關的操作被用戶“激活”，在用戶嘗試滾動頁面時不該該“打開一個鏈接/頁面”，這一點很重要。

換句話說就是，元素之間要有足夠的間距來允許用戶輕松地瀏覽頁面。

2. 人性化的交互

在移動設備上的觸摸屏界面，也意味著視覺設計必需加強交互。換句話說，元素的大小和位置應確保其易用性，并指出動作之間的重要性和相關性。

按鈕點擊區域：足夠的按鈕尺寸和間距將確保它們可以被輕松地激活。，抱負情況下，標準屏幕上的按鈕應該在44px到57px之間，在高密度（視網膜）屏幕上按鈕應該在88px到114px之間。 這允許均勻的指尖有足夠區域去更容易地激活一個按鈕。

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

為通信而設計

物理條件限制這方面只是我們為移動設備設計時所面臨挑戰的一半，另一半則是在信息傳達方面?！耙苿拥谝弧保╩obile first），這個理論提示我們，移動用戶應該從網站上獲得與桌面用戶相同的信息價值?？紤]到這一點，為移動通信而設計影響了這個方式——所有設計師需要接觸他們正在交流的消息。

為了加強通信，我們需要充分利用我們對信息的理解和解讀。人腦解讀視覺信息要比文字信息快得多，這就意味著使用視覺和圖像來加強通信是非常有價值的。 良好的視覺樣式能夠增加價值，支撐內容或者交互的主體，并改善整體的用戶體驗（移動端和桌面端）。

垂直排版規律

我們優先考慮使用垂直排版來傳達信息，信息結構創建了一個合理的內容流，而可視化設計可以進一步明確區分內容的層級。在內容排版上使用合適的尺寸和間距，可以創建一個良好的垂直標的目的的視覺流，更清晰的傳達不同層級的內容。

除了前面提到的垂直網格系統，基線網格（baseline grid）可以在垂直標的目的上創建一個良好的的排版，使用戶更容易閱讀和理解內容。

具體來說，基線網格是通過行高的規范來創建的一種網格結構。它在排版上明確的規定了行距和尺寸，同時也有助于確定垂直標的目的上不同的內容組之間的間距。遵循這些規則可以確保內容段落的可讀性，并且可以使用戶清楚地區分一段內容和整體內容的不同。

基線網格在HTML和CSS中很難精確地實現（implement accurately） ，但是它在設計過程中可以為開發尺寸和確定間距提供良好的指導。