過完一個新年,從一個一頁式網站說起



又過了一個年,一頁式的網站設計仍然受注目,這股風潮應該已運行了5年吧?!為什麼?因為它簡單、整齊,且令人印象深刻。傳統經典的分頁式設計仍大量地被運用,但如果你是想許個新年新希望的目標,例如自已的個人網站,讓我們來看看一頁式網站有哪些準備工作。

1、評估適合與否

這裡還是先提一下,目前兩個主要的設計方法:單頁和經典分頁。我通常會根據品牌調性、資料內容多寡等,來判斷設計的方向,既然主題是一頁式,改天再來聊分頁設計。

單頁的網站擁有簡約的風格,它通常更多圖像化表達,伴隨著少量的文字內容。整體長滾動設計使得在製作故事時可以輕鬆獲得創意,讓用戶以直線性的方式觀看你的內容,而且不會讓客戶在網站裡迷路,適用於行動網站和平板電腦,而且單頁的網站也很容易維護,並且需要比經典網站更少的資源。如果是像登錄頁面,個人履歷,攝影作品集,婚禮網站或任何與活動相關的網站,那麼值得考慮,個人覺得都合適。

2、即使是一頁式,我們仍需要架構順序

網站都會有sitemap(架構),即使是一頁式網站也需要,否則你的客戶會感到錯扼,請確保其合乎邏輯且直觀。舉例但不設限來說,通常的順序會如下:

第一個區域通常是『首頁主視覺』:好的主視覺素材佔據了網站顏值的一半因素。

再來是『關於我』:文字、品牌調性的介紹。

『產品或服務』:可以置入圖片、文字,甚至放一個CTA按鈕。

『團隊介紹』:現在的新創風潮鼓勵主管直接面對消費者,受臉書的馬克.佐柏格影響。

『媒體相簿』:如果你有的話。

『聯絡我』:表單,這通常是一個網站的CTA。

總之,刪除多餘的資訊、盡可能保持組織性和簡單條理。

3、選一個網站模版

"最好的創意,是模彷來的。"

Wix有超過500個模版提供你參考,你當然可以什麼也不幹的,直接把文字複製貼上,照片換一下就變成你的東西。但我們期待的是無限的想像及創作,畢竟你不想網站長的跟別人很像吧?!這就像走在路上遇到陌生人跟你撞衫的概念。

4、使用內建工具來分區域

打開Wix的編輯器,你可以找到『+』裡的Strip,這也是我常使用的工具項目,在沒有很好的設計功力之前,它以塊狀的方式讓你的設計有了學習的準則,同時也保有版面的整齊性。

5、做出一些視差效果

試著做出一些效果,例如在滑動的時候,你的背景可以隨著移動,或是定住區域,讓兩者產生一種視差的效果,這會讓視覺看起來比較吸晴。如果你有巧思,更可以適度的將物件作淡出淡出,甚至飛入的效果。但請適量服用,不要讓你的顧客進到你的網站像來到了哈利波特的魔法學院,這很詭異。

6、錨點(Anchor)很重要

一頁式網站絕不可缺少的物件,它可以指向你的所在區域,同樣打開你編輯器中的『+』。


7、設一個返回頂端的按鈕

建議手機版一定需要,桌機版則看你的設計如何搭配。

8、CTA

通常一頁式的CTA,建議可以做的明顯一點,背景可用強烈的視覺素材搭配,畢竟這叫網站的最後一哩路,不管是取得客戶資訊,或是讓客戶送出報價詢問等。

9、頁尾

可以將你的個人資訊,或是公司的資訊,置放於此,當然如果你的資訊很多,也是可以單獨做一個區域不受限。


10、連結你的社群帳戶

Facebook, Instagram,甚至在手機創造一個LINE連結,這會讓你的客戶覺得很方便,對你的網站留下正面形象。

如果你做的是婚禮網站,在IG上放了很多婚紗照,甚至可以置入一個Instagram Feed,它會跟你的IG帳號同步。


11、SEO設定

別忘了,如果你不會,可以參照Wix的SEO Wizard。

12、檢查手機版本

行動優先原則請注意。

以下3個網站是很好的一頁式網站案例,提供給大家參考。

Brave Women’s Conference


Mutiny Creative Agency


Lena Steinküler


在此拜個晚年,新年快樂,諸位豬年順利。

#一頁式網站

  • Facebook - White Circle

© 2017 WixTW