Kingsman 版型使用指南

Artboard_Copy_6.png

適合販售精品、服飾、傢俱、首飾、3C 類等有高清商品圖需求的商家,Kingsman 能呈現出知性的網站風格。

T____.jpg

 

一、開放定義三種主題顏色及字型

位置:管理後台 > 商店設計 > 設計 > Kingsman 的設定 > 店面版型

1. 自訂主題顏色#1 底色與文字顏色_____2019-05-22___6.57.45.png

底色:會套用在網站頁首 Header Menu & 頁尾 Footer & 手機側邊 Menu & 所有按鍵底色(避免使用淺淡的顏色,以提高可讀性)

文字顏色:會套用在顯示於主題顏色#1 底色上的文字顏色,比方 Menu 上的文字、按鍵上的字

Header Menu 與購物車按鍵,這裡的主題顏色#1 底色設為綠色,文字顏色設為白色

_____2019-05-22___7.12.10.png

 

Footer

_____2019-05-22___7.12.17.png

系統將抓取 Footer 編輯器的最下一欄填滿主題顏色#1 的底色。你可在此欄填寫品牌版權資訊,或依喜好拉入影片、圖片等元件。

Footer 要更新至新版編輯器才有支援喔!
位置:管理後台 > 目錄分頁管理 > 網店目錄管理 > 商店頁尾點擊編輯

_____2019-01-07___3.17.33.png

請注意,編輯模式不會顯示底色,必須點擊預覽或套用才會看到效果。文字、圖片記得要挑選足夠凸顯的顏色:例如深色底配白字、明亮的圖/淺色底配深字... 等,視覺上才能跳脫突出。

_____2019-05-23___11.18.45.png

 

 

2. 自訂主題顏色#2:

會套用在價格的文字及白背景上的按鍵、ICON 上

_____2019-05-22___6.57.51.png比方商品細節頁的商品價格、數量按鍵

_____2019-05-22___7.03.08-1.png

 

3. 配色建議

這個主題可以搭配三種顏色,若想打造不出錯的柔和視覺風格,在主題顏色#1 的底色可使用低飽和度的莫蘭迪色系立即提高質感。字體顏色輕鬆的選擇白色就很百搭。

_____2019-05-22___7.35.41.png

若想製作個性感強一些的網站,也能直接使用黑色。

_____2019-05-22___7.44.29.png

而主題顏色#1+#2+字體色的搭配,若想要色調單純,可以讓主題顏色#1 的底色和 #2 使用同一顏色。

若喜歡稍有變化的配色,可以選擇相近色較不容易出錯:

將 #1 的底色,僅調整明度或飽和度作為 #2 色,盡量不調整色相

若想讓顧客留下強烈的視覺印象,可使用對比色,比方黑色與黃色。

_____2019-05-22___7.52.40.png

網路上有許多優質的配色網站,不妨多嘗試看看吧!特別推薦此網站的 TOP 50 網站配色方案

 

4. 字型選用

_____2019-05-22___6.57.57.png

黑體較適合現代、潮流的風格,宋體為襯線字,較適合經典、文青風格的網站。一旦套用,整個網站都會換成選用的字體。

 

二、在進階分頁製作特色大標題

在官網製作引人注目的 Slogan,讓顧客能聚焦你的品牌精神。

3123.jpg

如何製作?

位置:管理後台 > 目錄分頁管理 > 網店分頁 > 編輯頁面 > 請使用設計面板的「文字與標題」元件

_____2019-05-23___12.30.08.png

 

此版型的「文字及標題」元件,只要有填寫「描述」欄位,就會顯示背景色,若只填寫「標題」欄位,不會顯示背景色,此外需將元件自己佔用一行,背景色才會生效

 

_____2019-05-23___12.34.24.png

 

背景色將抓取主題顏色#1 的底色,因此建議選擇跟他搭配的字體顏色。

如果覺得文字字距太近,可用 CSS 語法調整:

1. 請在編輯段落的編輯欄,選取文字後點擊 </> 按鍵。

_____2019-01-07___4.35.19.png

2. 在第一個 <p> 的後方貼上這段語法:<span style="letter-spacing:3px;"> 並點擊確定就可以囉!3 可以依照想要的距離輸入數字,越大字距會越遠。

_____2019-01-07___4.37.22.png

 

三、商品細節頁排版建議

商品細節頁新增了三個功能:

  • 商品放大鏡效果:顧客使用游標放置在商品主圖上時,商品圖會依原尺寸放大
  • 使用滑鼠捲動即可查看所有商品圖
  • 商品敘述和配送方式會縮小在右側,目的是讓顧客聚焦在商品圖本身

demo.gif

因此在後台編輯商品說明時,建議將所有圖片集中放置在「商品主要圖片」,「商品描述」盡量簡短,版面配置才會好看喔!另外請注意上傳的商品圖尺寸不超過 1000x1000px,盡量減少記憶體耗費,網站速度才會快。

_____2019-05-23___1.52.38.png

 

四、建議 Banner 尺寸

請記得使用圖片壓縮工具,讓大圖不會佔用顧客太多網路流量導致網站讀取速度過慢,推薦使用:https://tinypng.com/

進階分頁:如果是頁首置頂 Banner,喜歡整個螢幕滿版圖片,可使用 1920x840px。

_____2019-06-06___11.48.00.png

如果不想佔滿整個螢幕,喜歡較窄的比例,推薦使用 1920x640px,這樣在桌機約佔滿 3/2 畫面範圍

_____2019-06-06___11.50.28.png

在商品列表頁的 Banner,建議高度不超過 640 px,讓顧客在一進入商品列表頁時,能稍微看到第一排商品。

_____2019-06-06___11.49.15.png

 

 

五、其他專屬特色

  • 置中排版、以大圖展示的 IG 版型_____2019-05-23___4.01.31.png

 

  • 特色部落格排版

首篇文章會以滿版顯示來聚焦顧客注意,其下為兩兩並排,在每次捲動時可以一次看多篇文章,節省顧客時間並曝光更多!文章封面將抓取文章內的首張圖片,建議圖片使用比例 16:9 會有最好的呈現效果,超過的圖片範圍將會被裁切。

_____2019-05-23___4.18.42.png

以上是 Kingsman 的特色介紹,立即試用看看吧! 

還有其他問題?提交請求

評論