網站頁面設計令人留下第一印象，好的網站設計就如穿上漂亮的衣服，令人印象深刻。今期 SHOPLINE 電商教室教你網站頁面製作技巧，由網店首頁編排到網頁設計元素，5 分鐘便掌握到設計網頁的精髓。
網店首頁編排設計｜網店網頁設計元素｜SHOPLINE 網店版面設計
網店首頁編排設計
網店首頁十分重要，大多數人在瀏覽網站時的視覺動線，是從上到下 、 左至右閱讀，而當中版面設計會涉及不同的部分：
Header
這部分通常在網頁的最上方，是訪客到訪網站時的主要視覺焦點區，你可以將最要的資訊放在這裡，例如：公司 Logo、標題、導覽列、站內搜尋引擎等，讓訪客用最短時間了解到公司資訊及產品。
Strong follow area
這是緊接着 Header 的下方，大多數訪客看完第一個區域後就會查看這個地方的資訊，你可以擺放一些突出品牌形象的圖片，或有關公司最新產品、資訊或優惠的橫額。
Content
這是在標題、導覽列、橫額的下方，是介紹網店產品的重要部分，通常包括產品名稱、圖片及價錢，多件產品分成數排，每排約 3 至 5 件產品，不建議太密集，工整及具空間感的設計讓訪客易於觀看。
Footer
最後是網站下方的 Footer，當訪客瀏覽完上面的產品後，想認識品牌更多的話，就會查看這裡的資訊，你可以擺放「關於我們」、「聯絡我們」等資訊，讓訪客加深認識公司創辦人及品牌理念，同時有需要亦可聯絡到你。
例如：Adidas 香港官網頁面最上方是公司 Logo、導覽列、站內搜尋引擎，然後緊接着下方是最新優惠的橫額，吸引人限時內購買，再下面便是網店熱門精選產品，每排約 5 件產品，並有產品名稱、圖片及價錢，最後網站下方有關於品牌更多的資訊及聯絡方法。
網店網頁設計元素
標題
進入網站時，很多時第一眼看到的就是大標題，因此應盡量精簡，以最少的字，概括整個網站頁面的主題內容，瞬間吸引訪客的目光。不建議將所有與公司業務有關的字眼都放在標題內，這會影響訪客的瀏覽體驗，同時標題過長，搜索引擎不能夠完整收錄，對 SEO 亦有影響。除了大標題，次標題亦十分重要，用以進一步解說你網店的商品或服務，最好能引起訪客的好奇，繼續看下去。
導覽列（Navigation Menu）
導覽列（Navigation Menu）就好像地圖一樣，告訴訪客網店內主要產品及服務的分類位置，並帶領訪客遊走網店各頁面。因此在設計網站時，導覽列的架構、視覺與互動設計極需深思熟慮。大多數商戶設計以下三種架構：
- 將導覽列放在左側，讓訪客由左邊第一層導覽選項，再打開第二層導覽、甚或有第三層導覽。
- 第一層和第二層導覽選項都放在網頁上方
- 第一層的導覽在網頁上方，次要導覽和第三層導覽在左側（導覽列較少放在網頁右側，相信與大多數人喜歡由左至右來閱讀網頁資訊有關）
圖片或影片
除了標題，圖片亦是吸引訪客的重要元素，最好清楚簡易地描繪到你品牌的特色，讓人一看就知道你所售賣的產品或服務。你可以配合品牌顏色或風格來加強網站的視覺效果，甚至進一步透過圖片引起訪客的興趣，讓他們點進去你的產品。
你亦可以在商品內頁擺放影片，例如售賣化妝品可以上載一些試妝影片，更具體地呈現出產品效果，還能加深訪客對網站的印象和興趣，有助提升網站轉換率。
例如：專售兒童教具的網店下午茶媽媽（Teateamama），首頁的畫面是有多個嬰孩兼色彩繽粉的繪畫，讓訪客還未看到產品及文字的時候，已經先從圖片了解到這網店是售賣與嬰幼兒有關的產品。
資訊欄
如果訪客第一次造訪網店的話，對你品牌並不了解，要將他們由訪客變為你的顧客，便要增加一些關於你的資訊，一般常見資訊包括以下的分類：
- 公司資訊：關於我們、團隊介紹、門市位置
- 客戶服務：聯絡我們、公司的社交媒體連結，如 FB、IG等
- 條款及細則：送貨規則、退換貨及退款規則、會員細則
不妨將這些資訊擺放到每頁的最下方，讓有需要的訪客隨時都看到，以便進一步了解及聯絡你，促成購買的機率。
響應式網頁設計（RWD）
SHOPLINE《2022 香港開店白皮書》數據顯示，使用智能電話下單購物的比率繼續超越電腦裝置（包括桌上型電腦及手提電腦），成為最熱門網購消費裝置，佔整體 58%。因應手機支付的趨勢，Google 現已全面執行 Mobile First Indexing 安排，強調網站的手機頁面將成網站排名位置的考量之一。
而透過 RWD 即 Responsive Web Design，中文是「響應式網頁設計」，商戶可以設計一次即可製作桌面、手機兩個版本的網店網站。萬一有任何修改或更新，也只需要改動一個設計，就能應用在不同裝置。RWD 的架構還能將網頁的文字、圖片，甚至是特殊效果，自動縮放成符合不同視窗尺寸的頁面。這個 Mobile Friendly （流動裝置友好）的設計，可以為消費者帶來更好瀏覽體驗，加長消費者停留時間，下單機會自然更大。
Call to action（CTA）
網店的目的是想將每一個瀏覽者都變為你的客戶，因此除了有鮮明的標題、圖片之外，你還要設計一個明確的行動呼籲，即 Call to action（CTA），令瀏覽者採取「下一步」，令你獲取更多他們相關的資訊，深化與他們的關係，便更易獲得訂單。
常見的 CTA 包括：「立即加入會員」、「立即免費試用」、「立即訂閱品牌電郵」
例如：SHOPLINE 首頁的橫額加入了顯眼的 「免費試用」按鈕，並以簡潔的設計，襯托出期望訪客會採取的行動，絕對有助提升網站點擊率和轉換率！
SHOPLINE 網店版面設計
不想從零開始自己設計網站？其實大部分開店平台方案一般已包括網店版面設計，以 SHOPLINE 為例，網店架構均內置 RWD 設計，店主們不用另聘網站設計師，也能輕易採用 RWD 設計。此外，SHOPLINE 提供 29 個店面設計版型，讓店家能夠自行選擇各類風格，方案內已包括網店設計，無需額外購買。即使不懂得設計美術的店家，也能以「 Drag-and-Drop 」的拖曳方式，自由編排網頁物件，快速及輕鬆設計出簡潔好用的網店，更能配合不同商品類型，建立獨一無二的品牌形象！
根據 SHOPLINE《2022 香港開店白皮書》，商戶問卷調查反映，最多店家選用的設計主題是 Ultra Chic，同時這個主題為店家帶來不少生意，在高平均訂單量的設計主題排行榜中排第二位。而設計主題 Bianco 雖然並非店家的五甲心水，但高平均訂單量的設計主題排行榜中排首位。有興趣的店家歡迎到版型主題頁面，瀏覽更多商店版型。
如果想進一步了解網店版面設計的資訊，歡迎預約專業開店顧問進行免費諮詢。SHOPLINE 亦有提供 14 天免費試用，讓你能夠親身體驗自己設計網店版面的便利和樂趣。
SHOPLINE HK 的 Content Marketing 團隊成員。喜歡在電商世界中尋寶，與大家分享所見所聞，相信遇見與錯過的事情都是緣份。