適合販售精品、服飾、傢俱、首飾、3C 類等有高清商品圖需求的商家，Kingsman 能呈現出知性的網站風格。
一、開放定義三種主題顏色及字型
1. 自訂主題顏色#1 底色與文字顏色
底色：會套用在網站頁首＆頁尾 & 手機側邊選單 & 所有按鍵底色（避免使用淺淡的顏色，以提高可讀性）
文字顏色：會套用在顯示於 主題顏色#1 底色上的文字顏色，例如目錄上的文字、按鍵上的文字
如下圖：目錄與購物車按鍵，這裡的主題顏色#1 底色設為綠色，文字顏色設為白色
2. 自訂主題顏色#2：
會套用在價格的文字及白背景上的按鍵、icon 上
比方商品細節頁的商品價格、數量按鍵
3. 配色建議
這個主題可以搭配三種顏色，若想打造不出錯的柔和視覺風格，在 主題顏色#1 的底色可使用低飽和度的莫蘭迪色系立即提高質感。字體顏色輕鬆的選擇白色就很百搭。
若想製作個性感強一些的網站，也能直接使用黑色。
而主題顏色#1＋主題顏色#2＋字體色的搭配，若想要色調單純，可以讓 主題顏色#1 的底色 和 主題顏色 #2 使用同一顏色。
若喜歡稍有變化的配色，可以選擇相近色較不容易出錯：
將 主題顏色#1 的底色，僅調整明度或飽和度作為 主題顏色#2 色，盡量不調整色相
若想讓顧客留下強烈的視覺印象，可使用對比色，比方黑色與黃色。
網路上有許多優質的配色網站，不妨多嘗試看看吧！特別推薦此網站的 TOP 50 網站配色方案
4. 字型選用
黑體較適合現代、潮流的風格，宋體為襯線字，較適合經典、文青風格的網站。一旦套用，整個網站都會換成選用的字體。
二、在進階分頁製作特色大標題
在官網製作引人注目的 Slogan，讓顧客能聚焦你的品牌精神。
如何製作？
透過「進階分頁」中的「文字與標題」元件，相關的介紹可以參考：文字元件｜進階分頁
此版型的「文字及標題」元件，只要有填寫「描述」欄位，就會顯示背景色，若只填寫「標題」欄位，不會顯示背景色。（若背景色顏色較深的話，建議勿與商品元件放置於同一行，避免顏色顯示不明顯）
背景色將抓取主題顏色#1 的底色，因此建議選擇跟他搭配的字體顏色。
如果覺得文字字距太近，可用 CSS 語法調整：
1. 請在編輯段落的編輯欄，選取文字後點擊 </> 按鍵。
2. 在第一個 <p> 的後方貼上這段語法：<span style="letter-spacing:3px;"> 並點擊確定就可以囉！
3. 可以依照想要的距離輸入數字，越大字距會越遠。
三、商品細節頁排版建議
商品細節頁新增了三個功能：
- 商品放大效果：顧客鼠標移到主要圖片後，出現彈跳視窗顯示「原尺寸」圖片
- 使用滑鼠捲動即可查看所有商品圖
- 商品敘述和配送方式會縮小在右側，目的是讓顧客聚焦在商品圖本身
因此在後台編輯商品說明時，建議將所有圖片集中放置在「商品主要圖片」，「商品描述」盡量簡短，版面配置才會好看喔！另外，建議上傳的商品圖尺寸不超過 1000x1000px，盡量減少記憶體耗費，網站速度才會快。
四、建議 Banner 尺寸
請記得使用圖片壓縮工具，讓大圖不會佔用顧客太多網路流量導致網站讀取速度過慢，推薦使用：https://tinypng.com/
進階分頁：如果是頁首置頂 Banner，喜歡整個螢幕滿版圖片，可使用 1920x840px。
如果不想佔滿整個螢幕，喜歡較窄的比例，推薦使用 1920x640px，這樣在桌機約佔滿 3/2 畫面範圍
在商品列表頁的 Banner，建議高度不超過 640 px，讓顧客在一進入商品列表頁時，能稍微看到第一排商品。
五、其他專屬特色
-
置中排版、以大圖展示的 IG 版型
-
特色部落格排版
首篇文章會以滿版顯示來聚焦顧客注意，其下為兩兩並排，在每次捲動時可以一次看多篇文章，節省顧客時間並曝光更多！文章封面將抓取文章內的首張圖片，建議圖片使用比例 16:9 會有最好的呈現效果，超過的圖片範圍將會被裁切。
以上是 Kingsman 的特色介紹，立即試用看看吧！
評論