Kingsman 版型使用指南

Artboard_Copy_6.png

适合售卖精品、服饰、家具、首饰、3C 类等有高清商品图需求的商家,Kingsman 能呈现出知性的网站风格。

S____.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 要更新至新版编辑器才有支持喔!

位置:管理后台 > 目录分页管理 > 网店目录管理 > 商店页尾点击编辑

mceclip3.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

如何制作?

位置:管理后台 > 目录分页管理 > 网店分页 > 编辑页面 > 请使用设计面板的「文字与标题」元件

mceclip13.png

 

此版型的「文字及标题」元件,只要有填写「描述」栏位,就会显示背景色,若只填写「标题」栏位,不会显示背景色,此外需将元件自己佔用一行,背景色才会生效

 

_____2019-05-23___12.34.24.png

背景色将抓取主题颜色#1 的底色,因此建议选择跟他搭配的字体颜色。

如果觉得文字字距太近,可用 CSS 语法调整:

1. 请在编辑段落的编辑栏,选取文字后点击 </> 按键。

mceclip10.png

2. 在第一个 <p> 的后方贴上这段语法:<span style="letter-spacing:3px;"> 并点击确定就可以喽!

3 可以依照想要的距离输入数字,越大字距会越远。

mceclip11.png

 

三、商品细节页排版建议

商品细节页新增了三个功能:

1. 商品放大镜效果:顾客使用鼠标放置在商品主图上时,商品图会依原尺寸放大

2. 使用鼠标滑动即可查看所有商品图

3. 商品叙述和配送方式会缩小在右侧,目的是让顾客聚焦在商品图本身

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.46.31.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 的特色介绍,立即试用看看吧! 

 

 

还有其它问题?提交请求

评论