技術(shù)資訊

如何制作單頁式網(wǎng)站

2014-12-02 08:58:22

制作一個簡單的單頁式網(wǎng)頁很簡單，但是往往都想的非常復(fù)雜，做一個簡單的單頁網(wǎng)站設(shè)計，就意味著完成了整個網(wǎng)站的30%，因為網(wǎng)站頁面都可以相互的套用，首先制作一個網(wǎng)站首頁，其次它的列表頁、內(nèi)容頁以及詳細(xì)頁，都可以在首頁模板中進(jìn)行修改，下面我就詳細(xì)的與大家一起溝通交流。

視覺差滾動：滾動特效是單頁設(shè)計中最盛行”花招”中的一個。輕彈鼠標(biāo)，用戶無需點擊或從歡迎頁跳轉(zhuǎn)就能來到一個新頁面。這種效果可以激勵用戶繼續(xù)滾動、閱讀、與網(wǎng)站互動，看看接下來會出現(xiàn)什么（你可以在之前的文章中學(xué)習(xí)更多關(guān)于視覺差滾動的知識）。

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

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

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

一、什么是單頁設(shè)計？

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

一個單頁網(wǎng)站可以簡單到像一頁紙，恰好吻合瀏覽器窗口且不需要滾動。但它并非總是如此。單頁網(wǎng)站可以滾動（當(dāng)然也別把網(wǎng)頁設(shè)計得太長，這非常重要，用戶會受不了）。

簡單來說，單頁網(wǎng)站是不包含域名內(nèi)的鏈接并且所有內(nèi)容都在主界面的網(wǎng)站。

二、為什么選擇單頁設(shè)計？

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

單頁網(wǎng)站通常設(shè)計得很贊，因為它們只有一次機(jī)會——第一印象——來從雜亂的視覺景觀中吸引用戶注意力。這類頁面通常都適用于不具備豐富內(nèi)容的網(wǎng)站：售賣單個產(chǎn)品的網(wǎng)站，用來推銷另一個網(wǎng)站、APP或商品的網(wǎng)站，小型作品集或簡單的信息。

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

Myowncorks