考慮到移動用戶的數(shù)量逐年增加的事實，很明顯，為什么網(wǎng)頁設(shè)計師越來越多地從一開始就開始規(guī)劃網(wǎng)站設(shè)計的移動版。移動優(yōu)先的網(wǎng)頁設(shè)計對于那些與網(wǎng)頁設(shè)計無關(guān)的人來說是一個非常不尋常的概念。然而，web開發(fā)人員經(jīng)常提到自適應和響應性web設(shè)計以及移動優(yōu)先的概念。前兩個概念是經(jīng)過時間檢驗的，因而為更廣泛的受眾所了解。

在本文中，我們將討論創(chuàng)建移動優(yōu)先響應網(wǎng)頁設(shè)計的7個技巧。此外，我們將提供一些網(wǎng)站示例，清楚地演示移動優(yōu)先設(shè)計的基本原則。響應性、自適應式和移動優(yōu)先網(wǎng)頁設(shè)計概念之間的區(qū)別是什么？

目前，有三種主要的方法可以使網(wǎng)站適應移動設(shè)備的屏幕：

響應；

自適應；

移動先行；

為了更好地理解差異，我們來定義它們。

什么是移動優(yōu)先設(shè)計？這是一個網(wǎng)頁設(shè)計，從一開始就關(guān)注手機（也就是說，它的界面安排得很方便，即使是在最小的智能手機顯示屏上也可以使用），然后才適應更大的視點（平板電腦、筆記本電腦、個人電腦）。

反過來，自適應和響應性web設(shè)計也有所不同。

當構(gòu)建響應性平臺時，開發(fā)人員將他們的工作基于流體網(wǎng)格——一種特殊的布局，在這種布局中，所有的參數(shù)不是固定的塊大小和它們之間的距離，而是以相對的值來設(shè)置的。因此，根據(jù)顯示的大小和分辨率自動縮放站點。這種策略的缺點之一是無法準確猜測站點在非標準屏幕設(shè)備上的行為。

自適應網(wǎng)頁設(shè)計的原理與響應式網(wǎng)頁設(shè)計幾乎相同。但是，在這種情況下，開發(fā)人員會創(chuàng)建幾個不同標記的流體網(wǎng)格線框，其中一個將根據(jù)用戶設(shè)備的屏幕格式，在其特性確定之后選擇。與響應性web設(shè)計提供的用戶體驗相比，這種方法允許實現(xiàn)更積極的用戶體驗。

在這三個方面中，最通用、消耗最少的是本文的主題——移動優(yōu)先web設(shè)計。

創(chuàng)建移動網(wǎng)頁設(shè)計的七個技巧

那么，如何從頭開始為移動設(shè)備設(shè)計呢？下面我們將提供一個簡短的教程，其中包含一些基本的、但卻很重要的建議，以創(chuàng)建移動優(yōu)先設(shè)計。

1、從最小的手機開始工程

要開始創(chuàng)建"移動優(yōu)先"響應設(shè)計的版本，首先要做的就是放棄有關(guān)解決方案在桌面的外觀的所有想法。專注于把所有的東西都放在一個典型的智能手機的小屏幕上，使用戶界面元素可見和可訪問，而不需要縮放和滾動。

如果您首先創(chuàng)建面向最小移動顯示的模板，那么進一步擴展更大的格式會容易得多。此外，這種技術(shù)可以消除web頁面中不必要的多余可選組件，并開發(fā)一種在頁面上使用空閑空間的通用方法。

要實現(xiàn)這一點，我們建議使用HTML/CSS框架，適合創(chuàng)建移動優(yōu)先的適應web頁面。最好是在使用與移動設(shè)備兼容的模板的開發(fā)環(huán)境中。示例包括引導程序、基礎(chǔ)、骨架、SemanticUI、PURe、UIkit等。

2、以簡單直觀的導航為目標

目前，移動開發(fā)中最方便的導航格式是垂直放置菜單項的下拉列表。確保用戶不必費力閱讀指示特定菜單項的文本。此外，使用交互式按鈕而不是通常的文本字符串將進一步簡化您的網(wǎng)站導航。

3、在接口元素之間保留盡可能多的自由空間

隨著web設(shè)計領(lǐng)域的發(fā)展，包含最大自由空間的布局越來越受歡迎。最新的趨勢包括信息豐富的極簡主義圖標，當點擊（或點擊）時顯示它們的功能。由于這個原因，所有的交互元素都是緊湊的，模板本身并沒有過多的不必要的細節(jié)。一般來說，這種方法通常也適用于網(wǎng)站的桌面版本，因此需要設(shè)計師付出最少的努力。

另一方面，盲目地遵循整潔布局的原則會給網(wǎng)站的轉(zhuǎn)換帶來障礙。畢竟，對圖標的過度迷戀和對文本按鈕標簽的忽視可能不會像對傳統(tǒng)菜單類型那樣有效。因此，在最大限度地"清洗"設(shè)計之前，從網(wǎng)絡營銷的角度來考慮它將是多么的理性。

4、確?？焖夙撁婕虞d

當你開發(fā)一個適合移動設(shè)備的設(shè)計時，確保你的網(wǎng)站頁面快速加載是非常重要的。以下是一些對你有幫助的普遍建議：

減少圖像的整體大小，減少頁面上圖像的文件大小是使加載速度更快的一個明顯方法。這并不意味著你必須犧牲媒體內(nèi)容的質(zhì)量。目前，有許多圖像壓縮格式和延遲加載特性，允許快速加載圖像，同時不抑制頁面內(nèi)容的其余部分的顯示。我們還建議您的網(wǎng)站使用大型圖形，但比最初的預期要少。俗話說，愈少愈好。

使用HTTPS，Web開發(fā)專家強烈建議通過HTTPS協(xié)議進行所有傳輸。它不僅會對游客的安全產(chǎn)生積極的影響，而且會加速游客的行動。

CDN服務，今天，絕對免費的內(nèi)容交付網(wǎng)絡（CDNs）存在，它們通過地理上分散的服務器網(wǎng)絡分發(fā)敏感數(shù)據(jù)。訪問者從離他們最近的CDN服務器接收內(nèi)容。這對頁面加載時間有非常積極的影響。

5、使用正確的媒體內(nèi)容擴展

移動優(yōu)先設(shè)計的一個主要問題是忘記了視頻和圖片的高寬比的精確設(shè)置。如果這些特性不是預先設(shè)定的（4：3、16：9、16：10等），或者沒有提供重新計算它們的機制，特定設(shè)備的系統(tǒng)可以獨立地改變它們。這可能會導致某些設(shè)備的布局被破壞。

6、仔細計劃適應更大的設(shè)備

當你的設(shè)計基礎(chǔ)已經(jīng)準備好了，你就可以開始考慮你的移動第一個網(wǎng)站在大屏幕上看到的標記。盡管絕大多數(shù)的元素都將保留原有的、以移動為中心的外觀，但還是會有一些你不得不改變的。否則，您可能會得到一個帶有偏移塊的半空頁面。

7、進行廣泛的測試

試著在盡可能多的移動設(shè)備上測試你的解決方案；特別是基于andROId的，因為有很多制造商和屏幕格式。這將幫助您使大多數(shù)用戶都可以訪問您的解決方案（例如，即使是那些仍然使用Internet Explorer的用戶）。

移動優(yōu)先網(wǎng)頁設(shè)計的五個最成功的例子

我們現(xiàn)在展示了五大最成功的，在我們看來也是最著名的網(wǎng)站，在這些網(wǎng)站中，你可以一眼就看出移動優(yōu)先網(wǎng)站設(shè)計的主要原則。

Mpierceroofing

盡管該網(wǎng)站的總體設(shè)計相當保守，但其桌面版和移動版的差異還是顯而易見的。所有必需的元素——菜單、聯(lián)系人——都可以立即使用，無需滾動。

總而言之，該資源擁有一切使用戶能夠方便地進行有針對性的操作，并能夠直觀地單擊CTA按鈕。

《時尚先生》

世界著名的男性雜志《時尚先生》擁有一個非常高效的網(wǎng)站，尤其是在導航方面。無論你如何發(fā)布它——從PC或智能手機——你都不需要點擊太多就能找到想要的文章。

菜單有一個方便的極簡格式，搜索字段位于菜單欄中。

菲利普的房子

Philip House是一個專門提供精英住宿租賃的網(wǎng)站。從一開始，它就是一種非常美觀的資源。所有的媒體內(nèi)容都是一流的，網(wǎng)頁設(shè)計師在桌面和移動用戶體驗上都做得很出色。

你甚至不需要滾動或滑動就可以訪問任何屏幕尺寸上的所有導航元素！

Smashing Magazine

手機粉碎雜志網(wǎng)站的建設(shè)者也做了一個偉大的工作：正如你所看到的，盡管有相當大的文本塊，空間被非常好的使用。

畢竟，頁面的標題和菜單都是在網(wǎng)站加載后顯示的。也就是說，不需要向下滾動頁面來訪問關(guān)鍵信息和功能。

Typeform

字體有一個偉大的視覺極簡但元素豐富的用戶界面。使用動畫和高清視頻以及簡單的不引人注目的文本填充并不害羞。這是一個偉大的黑白（或灰色）解決方案，當你向下滾動的時候會變得更有趣。

在這種情況下，我們被最終對移動設(shè)備友好的、優(yōu)化的資源外觀所吸引，它以正確的方式適合移動屏幕上的每個桌面元素?？梢哉f，它在任何方面都比不上桌面版本，這是一個偉大的UI設(shè)計成就。