前陣子介紹了免費的高雄單頁式網站的樣版,今天再精選六個單頁式網站的範例。單頁式的網站雖然簡單,但也包含了大多的資訊了。單頁式的網站能讓您與其他傳統網站更佔上風,透過有創意的設計,版面可以更為活潑、自由。

單 頁式的網站架構是經由點選功能項目後,進行類似傳統網站錨點的功能,讓畫面移動到該功能處,但經由Javascript的包裝,也可用jQuery的 mousewheel插件模擬出滑鼠滾動的效果,目前的架構大多是一個誇張的頁首,以及一個聯絡我們的頁尾,靜態有「個人簡介」或是「關於我們」,動態的 則是一些「工作案例」、「產品」等,經由jQuery 的 Carousel 的插件,可以進行左右的瀏覽。

在成本不高的狀況下,單頁式的網站佈局是個很好的選擇,再加上一些外掛的功能,例如Facebook、Plurk、Twitter等社交網站的功能,就能變得非常豐富了!

一頁式網站設計案例

***

這是一位程式設計師的網站,一進去畫面就說「你在找網站開發的自由工作者嗎?你來對地方了!」,然後可以觀看作品集,個人簡介,最下面就是聯個表單。

作品集的部份用旋轉木馬(Carousel)的效果,點擊後用聚光燈(Lighbox)的效果,放大作品圖。

網址:http://eshbeata.com/#top

一頁式網站設計案例

***

非常有趣的首頁,「我們叭啦叭啦叭啦叭啦設計叭啦叭啦叭啦叭啦開發叭啦叭啦叭啦叭啦
網站叭啦叭啦叭啦叭啦商標叭啦叭啦叭啦叭啦多媒體叭啦叭啦叭啦叭啦平面設計…」

比較特別的是作品集用手風琴(Accordion)的效果展示。

網站:http://www.mokshastudio.com/

一頁式網站設計案例

***

這算是單頁式網站比較大型的了,荷蘭一個很酷的公司,負責做會場的「聲音」、「燈光」、「視覺」所以三個單字合起來就是公司名稱SLV,首頁利用幻 燈片的效果輪撥之前工作的一些照片,然後用旋轉木馬(Carousel)顯示工作案例的圖片跟文字介紹,這裡完美的展示畫面切換的效果,不僅可以切換圖 片,也可以變更文字。然而案例太多了,畫面展示大約十筆的案例列表,再利用摺合/展開的特效,來顯示或隱藏更多的作品案例,最後頁尾就是聯絡表單跟聯絡資 訊囉。

網址:http://www.slv-rent.be/

一頁式網站設計案例

***

手繪圖示(icon)的小巧網站,只賣一種東西,就是手繪的圖示,一組29塊美金,但遺憾的是立即購買(BUY NOW)的功能沒作用,應該連個PayPal之類的,也很快速方便。

當然,網站上也放了一些免費的圖示小贈品,當作公關工具囉。

網址:http://steedicons.com/

一頁式網站設計案例

***

一家位於加拿大的小型工作室,主要是開發iPad、iPhone、Android、Windows web的手機應用程式。

網址:http://www.developi.ca/#

一頁式網站設計案例

要毒更多的單頁式網站設計,請點這裡,有七十款供您參考。

看多了嗎?我們也提供單頁式的網站設計,有興趣的話,請到留言版留言哦,謝謝。


arrow
arrow
    全站熱搜

    jaichang2008 發表在 痞客邦 留言(1) 人氣()