整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
頁設計，是一項處理小型網(wǎng)站的絕佳技巧，甚至有些網(wǎng)站你可能認為一張頁面搞不定，也同樣適用。從易于維護，到減少帶寬占用，使用單頁網(wǎng)站的好處不勝枚舉。
假如你應對的是個小型網(wǎng)站，通常只有幾個頁面的那種，可以考慮使用單頁設計，看看它是否能簡化項目，對用戶更加友好。繼續(xù)閱讀，你將了解它的益處，何時使用（或不該使用），還有一些你該遵循的絕佳慣例。
很顯然，單頁設計并非所有項目的理想選擇。但假如可能的話，有一大堆理由使用它。
默認情況下，用戶要瀏覽單頁網(wǎng)站，只要知道如何滾動就行。你也可以加入箭頭或其他瀏覽暗示，但除了少數(shù)例外，其實滾動就足以讓用戶在各部分間穿行。
完全不用擔心用戶身陷多層導航中，無休止地尋找他們所要的東西。如果頁面上有多個部分，頁頭或其他導航鏈接通常很有幫助，不過即使沒有它們，網(wǎng)站仍然是可用的。
這點并非既成事實，編碼良好的單頁網(wǎng)站，或許編寫起來比多頁網(wǎng)站更快。設計過程有時可以花更少的時間，盡管這取決于單頁網(wǎng)站的復雜程度。
一旦你腦海中有基本的布局，單頁網(wǎng)站還能利用某些特定的設計約束來加快進程。尤其較之于多頁網(wǎng)站而言，單頁網(wǎng)站各個部分要保持無縫銜接。如果你已經(jīng)明確哪些能做哪些不能，這類約束的確能加速頁面開發(fā)。
維護也更簡單。當你只需要處理一個頁面，維護工作就大大簡化了，只要網(wǎng)站本身編碼良好。
這條構筑了上面一點。當你只有一個頁面要處理，你不得不把一切簡化為它們最基本的形態(tài)。不再需要一頁頁毫無用處的市場宣傳。你必須直截了當、開門見山。
高質量的站內鏈接，是網(wǎng)站在搜索引擎中的表現(xiàn)的重要組成部分。盡管搜索引擎并不是很多網(wǎng)站必須的最大流量源，它們仍然重要。
單頁網(wǎng)站的鏈接總是指向自己。搜索引擎抓取時，這可以增加網(wǎng)站的權重。
單頁網(wǎng)站往往從敘事角度出發(fā)，這點多頁網(wǎng)站可不擅長。這可以促進轉換，激發(fā)用戶采取行動。
人們習慣于聆聽故事，不論在線上還是線下，所以這點有著顯而易見的用戶體驗優(yōu)勢。我們兒時就開始閱讀和聽故事，于我們而言，這是自然而然的事情。
再也不需要組織一列列數(shù)不清的頁面和子頁面了。無需多慮每個頁面是父級還是子級。也沒有龐雜的導航菜單和子菜單。所有都在一頁上。是要包含導航鏈接，還是讓用戶滾動，這取決于你，就看是否有助于提升用戶體驗。網(wǎng)站如果有多個頁面，是絕對不會這么考慮的。
盡管不像從前，對服務器而言已經(jīng)不成問題，不過想想近年來有多少用戶通過移動設備訪問你的網(wǎng)站。減少網(wǎng)站的帶寬占用，會贏得流量有限的用戶的感激。
當然，響應式設計不只限于單頁網(wǎng)站。但即使采用了響應式設計，網(wǎng)站越復雜，讓它適應小屏幕還是愈發(fā)困難。單頁網(wǎng)站并不復雜，這是必然的。運用響應式設計總體來說更容易。簡化導航和類似改變，也更容易成就適用于小屏幕的設計。
視覺差滾動可能是互聯(lián)網(wǎng)中發(fā)生過的最美妙的事情，也可能是個被濫用的噱頭，來蹂躪我們?yōu)g覽器，這取決于你怎么看。無論你站在哪一方，它似乎近期并不會消失。
就我而言，我希望有時間和地方來實現(xiàn)視覺差滾動。這個效果對于某些單頁網(wǎng)站大有裨益，而對于另一些則是噱頭，甚至更糟：難以使用。關鍵是要明確一點，你使用視覺差滾動真的能提升網(wǎng)站的易用性嗎，還是因為你覺得它看起來很酷？
如果要使用視覺差滾動，還要考慮一件事，使用Javascript還是純CSS技術來實現(xiàn)。關于這兩個選擇，請參見資源部分了解更多信息。
雖然有單頁網(wǎng)站大有益處，但它們也不是完美的全尺寸適配方案。雖然很多時候單頁網(wǎng)站比多頁網(wǎng)站更合理，但也有很多時候不應該使用單頁設計。
總之，假如你的網(wǎng)站只有少數(shù)頁面，單頁網(wǎng)站或許是最佳選擇。將一切濃縮在一個頁面上，能讓網(wǎng)站整體具有更現(xiàn)代的外觀，如果內容精簡，那么單頁網(wǎng)站可以讓它看起來更豐富。
單頁網(wǎng)站的另一個普遍案例，就是發(fā)布預告頁面。它們通常是單頁網(wǎng)站，帶有新聞郵件的注冊表單。多數(shù)情況下，發(fā)布預告期間面向大眾的信息很容易組織在一個頁面上，所以，設計這些頁面時優(yōu)先考慮這種風格是很合理的。
產(chǎn)品單一的電商網(wǎng)站，也是單頁網(wǎng)站表現(xiàn)優(yōu)秀的領域。如果你只賣一種產(chǎn)品，無論它是實體或是虛擬的，何必勞煩使用多個頁面呢？一個簡單的單頁網(wǎng)站才是更好的銷售工具。
可能你覺得更復雜的電商網(wǎng)站不適合用單頁網(wǎng)站，但它仍然可行。當然，有十多種產(chǎn)品的網(wǎng)站中我會避免使用，不過單張頁面也足以輕易支撐一個簡單的在線商店，通過彈出窗口來承載產(chǎn)品詳情和支付流程。
不該使用單頁網(wǎng)站的情況十分明確：龐大、復雜，或必須保有海量信息的網(wǎng)站不適合做成單頁網(wǎng)站。在這些情況下，使用相對傳統(tǒng)的網(wǎng)站結構更加明智。
雖然有大量的單頁網(wǎng)站存在，但也有很多混合型網(wǎng)站。它們給人印象是個單頁網(wǎng)站，但通過ajax、彈出窗和類似技術，它們事實上包含了多頁內容。
網(wǎng)站Dang & Blast就是這方面的絕佳案例。
如果無法讓所有東西徹底融入單個頁面，這會是和很好的解決方案。
說到單頁網(wǎng)站，某些站點用了某種“取巧”的辦法。它們的主站是個單頁網(wǎng)站，但在其他域名下也有個博客（有時是Tumblr或托管在WordPress.com的網(wǎng)站）。這么做沒有問題，它能突出主站的信息，也不用舍棄博客帶來的好處。
優(yōu)秀設計的多數(shù)準則，在單頁網(wǎng)站中仍然適用，其實也適用于任何網(wǎng)站設計。還有一些額外的東西需要牢記，其中有些之前已經(jīng)提到了。
設計如果對于你試圖表現(xiàn)的內容而言過于復雜，對你和你的用戶都沒有任何好處。相反，要盡可能簡化設計和內容，還能表達出你要的信息。
正因為用戶可以通過滾動來瀏覽你的網(wǎng)站，但并不意味著這是最友好的方式。如果你的網(wǎng)站很長，有很多部分，這點尤其正確。除非有特別好的理由，還是應該加入直達特定部分的鏈接，來使你的網(wǎng)站更加友好。
單個頁面不代表一整個冗長部分。實際上也不該如此。將內容根據(jù)邏輯劃分為幾大塊，用戶才能更容易找到他們所需。
單頁網(wǎng)站常常有大幅背景。當然，有時候這些背景很樸素，或帶有平鋪紋理；不過也有單頁網(wǎng)站利用所有的空間來揮灑創(chuàng)意。前面提到了，這也有助于劃分內容。背景未必要是單一的圖片。可以是一系列圖片，如果這樣做與內容更相符的話。
單頁網(wǎng)站的資源成百上千，還包括模版；我們這里重點關注表現(xiàn)突出的幾個。
PureCSSParallax Scrolling：Keith Clark的這篇文章闡釋了如何通過純CSS打造視覺差滾動效果。如果你不想用JavaScript（或者不懂）的話，這是個很好的選擇。
Skrollr：“為剩下的人準備的視覺差滾動”。這是個獨一無二的庫，適用于移動端和桌面。不需要jQuery，只有原生JavaScript。
Stellar.js：Stellar.js是另一個簡單易用的視覺差滾動庫。它提供了很多設置選項和iOS支持。
One Page Website Wireframes：如果你不確定如何構建你的網(wǎng)站，這個單頁網(wǎng)站線框圖集是很好的出發(fā)點。免費下載。這里還有第二集可供下載。
One Page Love：One Page Love是首屈一指的單頁網(wǎng)站集合，里面有超過5000個網(wǎng)站案例，并且一直在更新。他們還主打大量模版和其他資源。
Start Bootstrap：Start Bootstrap集成了海量的免費單頁網(wǎng)站Bootstrap主題。主題適合機構、自由職業(yè)者、作品集、著陸頁等等。
One Page Love Templates：除了豐富的網(wǎng)站集合，One Page Love也提供免費和收費的模版。
One Page Mania：One Page Mania提供獨特的網(wǎng)站和模版集合，供你下載或購買。
對各種網(wǎng)站來說，單頁設計都是非常棒的選擇。盡管它們不是小型網(wǎng)站的唯一設計方案，對很多項目而言它都是值得考慮的。思考使用單頁設計的理由，然后也思考不用的理由，再做決定。
譯者：可樂橙；譯文地址：http://colachan.com/post/3418
可樂橙，微信公眾號：可樂橙（colachangreen）。UI/UX設計師，關注互聯(lián)網(wǎng)，關注科技。現(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中。或許不是一名優(yōu)秀的設計師，至少是個快樂的設計師。
大家好，今天給大家?guī)硪惶妆容^不錯的單頁制作課程。
本套課程作者在9年多時間里，一直專注于單頁網(wǎng)站制作、優(yōu)化、推廣和單頁營銷方面的研究，并帶領一批學員通過單頁網(wǎng)站銷售產(chǎn)品，實現(xiàn)網(wǎng)上成功創(chuàng)業(yè)！
什么是手機版單頁網(wǎng)站
手機版單頁網(wǎng)站，是用Html5代碼編寫的純靜態(tài)獨立頁面網(wǎng)站，自動適應手機、臺式電腦、平板電腦的用戶屏幕觀看，完美展現(xiàn)產(chǎn)品和項目內容，用戶體驗好。
在單頁網(wǎng)站里面，可以添加文字、圖片、視頻、動畫、客服系統(tǒng)、訂單系統(tǒng)、分享系統(tǒng)、流量統(tǒng)計系統(tǒng)等等功能，使單頁網(wǎng)站功能強大、內容豐富多彩！
本套“單頁網(wǎng)站制作教程”，是由作者根據(jù)多年的實戰(zhàn)經(jīng)驗總結，原創(chuàng)開發(fā)錄制而成，教程系統(tǒng)全面、簡單易學、上手快速，即使是0基礎的新手朋友，也能快速學會。
手機版單頁網(wǎng)站能做什么
1.產(chǎn)品展示
單頁網(wǎng)站是一個獨立的頁面，不存在分散目標客戶注意力的信息。頁面簡單直接，從頭至尾展示產(chǎn)品信息。讓目標客戶最直觀的的全方位了解你的產(chǎn)品，達到快速成交的目的。
2.服務展示
如果你有一技之長，想通過提供自己的技術服務來賺錢，只需要制作一個單頁面，把自己當特長展示出來，留下聯(lián)系方式，做好網(wǎng)站推廣，就有客戶主動找上門。
3.競價推廣
用競價推廣是當前大流量入口之一。競價推廣排名快，效果好，利潤高。而競價推廣的落地頁，全部用的自適應競價單頁面，自動適應手機和電腦用戶屏幕，完美展示產(chǎn)品信息，
4.做信息流
信息流屬于競價推廣的一種，是把廣告信息展示在百度和360旗下相關聯(lián)平臺上面，訪客點擊信息流鏈接進入單頁面，進行產(chǎn)品展示和客戶轉化，完成產(chǎn)品銷售。
單頁網(wǎng)站強大優(yōu)勢
1.制作超級簡單
單頁網(wǎng)站模板，可做任何編輯和排版。包括修改文字內容、更換圖片、更換視頻、修改背景顏色以及訂單系統(tǒng)。只要會打字會做圖片，就可以實現(xiàn)自己動手不求人，制作出精美的符合你要求的單頁網(wǎng)站，實現(xiàn)銷售產(chǎn)品網(wǎng)絡賺錢的目的！
2.全方位展示產(chǎn)品
單頁網(wǎng)站因為沒有網(wǎng)站的固定框架和固定表格限制，也沒有分散目標顧客注意力的信息。可以輕松的添加文案、圖片、視頻、見證和訂單系統(tǒng)，全方位展示你的產(chǎn)品，達到快速成交的目的！
3.吸引目標客戶注冊
單頁網(wǎng)站很容易吸引訪客注意力，在頁面上添加客戶注冊系統(tǒng)，通過設置免費贈品方式，很容易獲得訪客聯(lián)系信息，方便后期對潛在客戶進行后端培養(yǎng)和產(chǎn)品銷售。
4.易被搜索引擎收錄
因為單頁網(wǎng)站，是精心設計和布局的，有著良好的用戶體驗和網(wǎng)站優(yōu)化，更容易被搜索引擎搜錄，帶來好的排名！
5.單頁網(wǎng)站安全性高
單頁網(wǎng)站沒有后臺管理，如果有人想攻擊你的單頁，他只有攻陷整臺服務器，才能拿到控制權。但是服務器都是放在專業(yè)的IDC機房，有高級防火墻和殺毒軟件防護，還有專業(yè)的技術人員維護，難度可想而知。
6.單頁網(wǎng)站管理方便
單頁網(wǎng)站只有簡單的文字信息、圖片資料、視頻和其他代碼組成。即使網(wǎng)站程序壞了，恢復數(shù)據(jù)也就幾分鐘的事情。需要修改內容，只需要在電腦上面編輯完成，用FTP軟件上傳，覆蓋掉前一個單頁即可。
手機版單頁制作教程介紹
手機版單頁網(wǎng)站制作教程，包含“單頁制作”和“單頁優(yōu)化”2部分視頻內容，是由作者總結9年多建站實戰(zhàn)經(jīng)驗，原創(chuàng)開發(fā)的高清視頻課程。旨在幫助想用單頁網(wǎng)站，在網(wǎng)上賣產(chǎn)品的朋友，實現(xiàn)網(wǎng)上賺錢的夢想！
本套手機版單頁網(wǎng)站制作課程，共有21課時，通過精心排版、錄制、剪輯，時間控制在15分鐘左右，只講干貨不說廢話。
單頁網(wǎng)站制作視頻，全部是高于720P高清視頻，由淺入深、循序漸進講解，簡單易懂，即使零基礎的朋友，都能輕輕松松學會單頁網(wǎng)站制作。
想要學習的話，可以私聊視頻內容！
單頁應用（Single Page Application）越來越受web開發(fā)者歡迎，單頁應用的體驗可以模擬原生應用，一次開發(fā)，多端兼容。單頁應用并不是一個全新發(fā)明的技術，而是隨著互聯(lián)網(wǎng)的發(fā)展，滿足用戶體驗的一種綜合技術。
一直以來，搜索引擎優(yōu)化（SEO）是開發(fā)者容易忽略的部分。SEO是針對搜索（Google、百度、雅虎搜索等）在技術細節(jié)上的優(yōu)化，例如語義、搜索關鍵詞與內容相關性、收錄量、搜索排名等。SEO也是同行、市場競爭常用的的營銷手段。Google、百度的搜索結果是重要的用戶入口，騰訊云（www.qcloud.com）有30%左右的流量來自搜索引擎。因此SEO在品牌、營銷、用戶量的緯度是非常重要的基礎能力。
那么單頁應用與傳統(tǒng)直出頁面在SEO方面有哪些不同之處呢？
單頁應用實際是把視圖（View）渲染從Server交給瀏覽器，Server只提供JSON格式數(shù)據(jù)，視圖和內容都是通過本地JavaScript來組織和渲染。而搜索搜索引擎抓取的內容，需要有完整的HTML和內容，單頁應用架構的站點，并不能很好的支持搜索。
如果站點在用戶體驗和搜索友好權衡時，如果我們做到更好的體驗，也做到友好的搜索支持，既是一箭雙雕。
單頁應用只有一個頁面，視圖的變化通常是通過路由（route）來驅動，首先，我們先來談一談單頁應用的URL中的#號，很多采用單元結構王皓咱的URL都出現(xiàn)了這個符號。
#號在瀏覽器的URL中是一個錨點，在當前頁改變#號的參數(shù)，頁面會跳轉到錨點所在的位置，通過JavaScript我們可以獲取到#號后的參數(shù)：
1 2 | location.hash // 獲取URL hash location.hash = "#list" //改變URL hash |
改變#號后的參數(shù)，頁面并不會重載，于是大多數(shù)的單頁架構網(wǎng)站，都在URL中采用#號來作為當前視圖的URL地址，例如：
1 2 3 | example.com/#index //首頁視圖 example.com/#list //列表頁視圖 example.com/#list/1 //id為1的列表信息的視圖 |
Backbone.js就是通過改變#號參數(shù)來組織視圖，這里有一個demo可以很直觀的體驗URL的變化。
看過這個demo，你獲取會發(fā)現(xiàn)很熟悉的符號#!，Twitter曾在URL使用這個標識。這個標識是Google提出。（AJAX 抓取：網(wǎng)站站長和開發(fā)人員指南1：
因為復雜的單頁架構頁面，對Google來說抓取比較困難，于是給開發(fā)者制定一個規(guī)范：
#!符號，例如example.com/#!/detail/1，于是Google開始抓取example.com/?_escaped_fragment_=/detail/1；_escaped_fragment_這個參數(shù)是Google指定的命名，如果開發(fā)者希望把網(wǎng)站內容提交給Google，就必須通過這個參數(shù)生成靜態(tài)頁面。
根據(jù)上面的demo，我簡單示例一下Google要抓取的頁面的樣子:
http://119.28.4.22/?escapedfragment_=/detail/1
如此以來，就需要Server通過生成靜態(tài)的內容以便Google抓取。
以下將簡單介紹，單頁架構，爬蟲訪問根目錄時如果配置Server端的路由。
當Google訪問119.28.4.22/#!/detail/1時，會自動轉化成http://119.28.4.22/?_escaped_fragment_=/detail/1，以Nginx為例：
1 2 3 | if ($args ~ _escaped_fragment_) { rewrite ^ /api; } |
/api為后臺服務的接口，已nodejs為例，代理設置如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 | upstream nodejs { server 127.0.0.1:3000; } location /api { proxy_set_header X-Request-URI $request_uri; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_set_header Port $server_port; proxy_pass http://nodejs; proxy_redirect off; } |
如此，我們便將Google的訪問重寫到/api這個接口，然后在Server的/api處理請求把靜態(tài)內容輸出即可。
Gogole的這個規(guī)范，必須有sitemap支持，因為有可能單頁架構的站點，索引頁面也是JavaScript渲染的。提交sitemap時，不用關注_escaped_fragment_這個參數(shù)名，只提交帶哈希符號的URL即可，例如：
1 2 3 | http://119.28.4.22/#!/detail/1 weekly 0.5 |
技術潮流的步伐很快，單頁應用，URL哈希處理也沒渲染的方式實際上已經(jīng)流行了很久，在國外很多用戶數(shù)據(jù)較好的情況下，開發(fā)者會選擇HTML5 History API的pushstate特性開發(fā)，在URL中拋棄#!。但是IE6、7等低端瀏覽器用戶情況較多的網(wǎng)站，#能夠很好的兼容。關于采用HTML5 History API來架構單頁應用的方案，也歡迎討論。
文章來源：騰訊isux
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
