童鞋們欣賞完55個不落窠臼的單頁網站設計后，驚呆了的時候是不是也想自己打造一個單頁網站呢？那么今天設計師@十萬個為什麼從國外翻譯的一篇教程你可得好好瞧瞧了 ^_^

不是每個網站都要很復雜或包含很多頁內容信息，有時候一個頁面就足夠了。不過你打算用一個頁面來創建網站，并不意味著它會很輕松。開發一個單頁網站布局所需要的思考與規劃，不比某些更加復雜的網站少。它需要將所有相同的基礎元素整合成一個更大的站點，還要讓人看起來印象深刻，你得照著預期進行并且懷揣明確的目標。

有數不清的酷炫招式可以幫助你充分設計好單頁網站。特別為您介紹一下，并推薦相關的熱門文章：）

視覺差滾動：滾動特效是單頁設計中最盛行"花招"中的一個。輕彈鼠標，用戶無需點擊或從歡迎頁跳轉就能來到一個新頁面。這種效果可以激勵用戶繼續滾動、閱讀、與網站互動，看看接下來會出現什么（你可以在之前的文章中學習更多關于視覺差滾動的知識）。

相關閱讀：網頁特效：滾動視差設計指南

移動App歡迎頁：創建一個特別的歡迎頁面，在用戶通過移動設備和平板電腦訪問你網站的時候，鼓勵他們下載App。這個"廣告頁面"可以幫助你將網站用戶轉化為正式的App用戶。

相關閱讀：35個超贊的iOS App網站欣賞

隱藏式導航：鼠標接近時會出現和隱藏的菜單可以在整個設計中節省空間，并且始終在熟悉的位置提供導航（通常是頁面頂部）。你也可以試試其他導航特效，比如Jamie Oliver's Fifteen頁面中那樣，導航剛開始在屏幕中央，隨著鼠標向下滾動移至頂端（并且固定位置）。

相關閱讀：網頁新趨勢：革命性的創新網頁導航設計

動畫特效：如果視覺差滾動不是你的菜，考慮一下用動畫或視頻背景來增加視覺吸引力。移動物體會誘使用戶逗留，看看接下來發生什么。

相關閱讀：聊聊那些令人愉悅的動畫特效

本文中我們來看一些精彩的單頁網站設計，它遠比你想象要流行。在你欣賞這些網站的外觀的同時，不妨點擊訪問，體驗一下網站中這些非常棒的用戶界面細節。

什么是單頁設計？

creatance

單頁網站建立在單個窗口中，單頁網站的概念更多基于滾動而非點擊（盡管點擊也沒有被禁止）來瀏覽和通讀網站與它的內容。

一個單頁網站可以簡單到像一頁紙，恰好吻合瀏覽器窗口且不需要滾動。但它并非總是如此。單頁網站可以滾動（當然也別把網頁設計得太長，這非常重要，用戶會受不了）。
簡單來說，單頁網站是不包含域名內的鏈接并且所有內容都在主界面的網站。

為什么選擇單頁設計？

lostphoneexperiment

單頁網站設計有很多注意事項，它并不適合每個項目，
它流行的使用場合：上線前的APP預告、帶有email注冊表單的網站、作品集展示工具、引導用戶跳轉的網站、簡單展示產品和信息的公司網站。

單頁網站通常設計得很贊，因為它們只有一次機會——第一印象——來從雜亂的視覺景觀中吸引用戶注意力。

這類頁面通常都適用于不具備豐富內容的網站：售賣單個產品的網站，用來推銷另一個網站、APP或商品的網站，小型作品集或簡單的信息。

既然這類網頁的設計通常都高度視覺化，文字就得盡可能保持精簡。單頁網站同時也需要一個清晰易懂的用戶界面，用戶才能準確知道他們可以用這個網站來做什么

懷揣目標

Itrackmytime

Myowncorks

Fajnechlopaki

Fuunnyfacescamera

開始設計單頁網站時要有清晰的目標。你想讓用戶在你的網站上做什么？他們瀏覽時候應該接收到什么信息？

比如說，如果你在預告你一個APP，你可能想要用戶提供email地址，這樣你可以在發布時告知他們。如果你在出售一套UI工具，你的目標就是將訪問量轉化為銷量，其他行為可能包括：填寫表單、觀看視頻、轉到其他站點，或以上都有。

在開始設計之前，了解你想要用戶做什么，并且自始至終反復強調。

通往成功的設計秘訣

Thinkbear

Fk-agency

既然你已經了解自己想讓網站干什么，遵從下面的幾條秘訣，然后踏上發布之路吧。

一、創造第一印象。你只有唯一的機會來增加新用戶。你的網站得通過視覺吸引來迅速告訴用戶他們為何來這；
二、保持專注。記住你的目標，去除所有礙事的小花樣、設計元素和文案；
三、使用鮮明的視覺風格。無論純色、圖片或漂亮的照片，選擇一種很棒的視覺表現，并且大張旗鼓地使用它；

四、開發一個清晰的導航。盡管你可能會懷疑你需要導航干什么——它畢竟只是個單頁網站——任何一個包含許多目錄、表單和各種形式鏈接的網站都需要清晰的導航。用來告訴用戶不同按鈕的用途（尤其他打算下載或購買你的產品）。即便是擁有少量內容的網站，也需要包含一個清晰易懂的指引來發揮作用；
五、精心組織。你絕對沒法在單頁設計的版面（或空間）中說清楚你的全部所想。信守什么是重要的，并將所有東西根據重要性層級排個序。撰寫簡單清晰的文案，不斷編輯直到措辭簡潔明了、切中要害；

設計時玩得開心！

酷炫的花樣和效果

Fifteen

Infomaticapp

Onemore

Pixelstadium

結論

和其他類型的設計"花招"或趨勢相比，單頁網站只有在你內容專為它定制時才有效，這種風格最適合內容有限且視覺鮮明的網站。
 

原文地址：designmodo
譯文地址：colachan
譯者：@十萬個為什麼
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：156982）分享實戰經驗。
設計微博：擁有粉絲量56萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：