七個移動優先網站設計常用的技巧

　　考慮到移動用戶的數量逐年提升的事(shì)實，很明顯，爲什麼(me)網頁設計師越來越多地從一開(kāi)始就(jiù)開(kāi)始規劃網站設計的移動版。移動優先的網頁設計對(duì)于那些與網頁設計無關的人而言是一個非常不尋常的概念。然而，web開(kāi)發(fā)人員經(jīng)常提到自适應和響應性web設計以及移動優先的概念。前兩(liǎng)個概念是經(jīng)過(guò)時(shí)間檢驗的，因而爲更廣泛的受衆所了解。

　　在本文中，我們將(jiāng)讨論創建移動優先響應網頁設計的7個技巧。此外，我們將(jiāng)提供一些網站示例，清楚地演示移動優先設計的基本原則。響應性、自适應式和移動優先網頁設計概念之間的區别是什麼(me)？

　　

　　目前，有三種(zhǒng)主要的方法可以使網站适應移動設備的屏幕：

　　1、移動優先設計；

　　2、響應式web設計；

　　3、自适應web設計；

　　爲了更好(hǎo)地理解差異，我們來定義它們。

　　什麼(me)是移動優先設計？這(zhè)是一個網頁設計，從一開(kāi)始就(jiù)關注手機（也就(jiù)是說(shuō)，它的界面(miàn)安排得很方便，即使是在最小的智能(néng)手機顯示屏上也可以使用），然後(hòu)才适應更大的視點（平闆電腦、筆記本電腦、個人電腦）。

　　反過(guò)來，自适應和響應式web設計也有所不同。

　　當構建響應性網絡平台時(shí)，開(kāi)發(fā)人員將(jiāng)他們的工作基于流體網格——一種(zhǒng)特殊的布局，在這(zhè)種(zhǒng)布局中，全部的參數不是固定的塊大小和它們之間的距離，而是以相對(duì)的值來設置的。因而，根據顯示的大小和分辨率自動縮放站點。這(zhè)種(zhǒng)策略的缺點之一是無法準确猜測站點在非标準屏幕設備上的行爲。

　　自适應網頁設計的原理與響應式網頁設計幾乎相同。但是，在這(zhè)種(zhǒng)情況下，開(kāi)發(fā)人員會(huì)創建幾個不同标記的流體網格線框，其中一個將(jiāng)根據用戶設備的屏幕格式，在其特性确定之後(hòu)選擇。與響應性web設計提供的用戶體驗相比，這(zhè)種(zhǒng)方法允許實現更積極的用戶體驗。

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

　　創建移動網頁設計的七個技巧

　　那麼(me)，如何從頭開(kāi)始爲移動設備設計呢？下面(miàn)我們將(jiāng)提供一個簡短的教程，其中包含一些基本的、但卻至關重要的建議，以創建移動優先設計。

　　1、從最小的手機開(kāi)始工程

　　

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

　　如果您首先創建面(miàn)向(xiàng)最小移動顯示的模闆，那麼(me)進(jìn)一步擴展更大的格式會(huì)容易得多。此外，這(zhè)種(zhǒng)技術可以消除web頁面(miàn)中不必要的多餘可選組件，并開(kāi)發(fā)一種(zhǒng)在頁面(miàn)上使用空閑空間的通用方法。

　　要實現這(zhè)一點，我們建議使用HTML/CSS框架，适合創建移動優先的适應web頁面(miàn)。最好(hǎo)是在使用與移動設備兼容的模闆的開(kāi)發(fā)環境中。示例包括引導程序、基礎、骨架、SemanticUI、Pure、UIkit等。

　　2、以簡單直觀的導航爲目标

　　

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

　　3、在接口元素之間保留盡可能(néng)多的自由空間

　　

　　随著(zhe)web設計領域的發(fā)展，包含最大自由空間的布局越來越受歡迎。最新的趨勢包括信息豐富的極簡主義圖标，當點擊（或點擊）時(shí)顯示它們的功能(néng)。由于這(zhè)個原因，全部的交互元素都(dōu)是緊湊的，模闆本身并沒(méi)有過(guò)多的不必要的細節。一般而言，這(zhè)種(zhǒng)方法通常也适用于網站的桌面(miàn)版本，因而需要設計師付出最少的努力。

　　另一方面(miàn)，盲目地遵循整潔布局的原則會(huì)給網站的轉換帶來障礙。畢竟，對(duì)圖标的過(guò)度迷戀和對(duì)文本按鈕标簽的忽視可能(néng)不會(huì)像對(duì)傳統菜單類型那樣有效。因而，在最大限度地“清洗”設計之前，從網絡營銷的角度來考慮它將(jiāng)是多麼(me)的理性。

　　4、确保快速頁面(miàn)加載

　　

　　當你開(kāi)發(fā)一個适合移動設備的設計時(shí)，确保你的網站頁面(miàn)快速加載是非常重要的。以下是一些對(duì)你有幫助的普遍建議：

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

　　使用HTTPS，Web開(kāi)發(fā)專家強烈建議通過(guò)HTTPS協議進(jìn)行全部傳輸。它不但會(huì)對(duì)用戶的安全産生積極的影響，而且會(huì)加速用戶的行動。

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

　　5、使用正确的媒體内容擴展

　　

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

　　6、仔細計劃适應更大的設備

　　

　　當你的設計基礎早已準備好(hǎo)了，你就(jiù)可以開(kāi)始考慮你的移動第一個網站在大屏幕上看到的标記。盡管絕大部分的元素都(dōu)將(jiāng)保留原有的、以移動爲中心的外觀，但還(hái)是會(huì)有一些你不得不改變的。否則，您可能(néng)會(huì)獲得一個帶有偏移塊的半空頁面(miàn)。

　　7、進(jìn)行廣泛的測試

　　

　　試著(zhe)在盡可能(néng)多的移動設備上測試你的解決方案；特别是基于android的，因爲有很多制造商和屏幕格式。這(zhè)將(jiāng)幫助您使大部分用戶都(dōu)可以訪問您的解決方案（例如，即使是那些仍然使用Internet Explorer的用戶）。

　　移動優先網頁設計的五個最成(chéng)功的例子

　　我們如今展示了五大最成(chéng)功的，在我們看來也是最著名的網站，在這(zhè)些網站中，你可以一眼就(jiù)看出移動優先網站設計的主要原則。

　　Mpierceroofing

　　

　　盡管該網站的總體設計相當保守，但其桌面(miàn)版和移動版的差異還(hái)是顯而易見的。全部必需的元素——菜單、聯系人——都(dōu)可以立即使用，無需滾動。

　　

　　總而言之，該資源擁有一切使用戶可以方便地進(jìn)行有針對(duì)性的操作，并可以直觀地單擊CTA按鈕。

　　《時(shí)尚先生》

　　

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

　　

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

　　菲利普的房子

　　

　　Philip House是一個專門提供精英住宿租賃的網站。從一開(kāi)始，它就(jiù)是一種(zhǒng)非常美觀的資源。全部的媒體内容都(dōu)是一流的，網頁設計師在桌面(miàn)和移動用戶體驗上都(dōu)做得很出色。

　　

　　你甚至不需要滾動或滑動就(jiù)可以訪問任何屏幕尺寸上的全部導航元素！

　　Smashing Magazine

　　

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

　　

　　畢竟，頁面(miàn)的标題和菜單都(dōu)是在網站加載後(hòu)顯示的。也就(jiù)是說(shuō)，不需要向(xiàng)下滾動頁面(miàn)來訪問關鍵信息和功能(néng)。

　　Typeform

　　

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

　　

　　在這(zhè)種(zhǒng)情況下，我們被最終對(duì)移動設備友好(hǎo)的、優化的資源外觀所吸引，它以正确的方式适合移動屏幕上的每個桌面(miàn)元素。可以說(shuō)，它在任何方面(miàn)都(dōu)比不上桌面(miàn)版本，這(zhè)是一個偉大的UI設計成(chéng)就(jiù)。