Doris Bien 版型使用指南

1.SHOPLINE_________.png

blobid0.jpg

Doris Bien 版型隆重推出,风格简约细致,适合贩售化妆品、甜点、首饰、质感选物、婚纱类等,有高清商品图或是有在经营部落格的商家。

Doris Bien 提供深浅两种背景色选择,让不同商家类型做更适合的搭配,如:
浅白色 特别适合少女系化妆品、甜点、首饰、文创设计品、家居、婚纱
深黑色 特别适合男性运动用品、潮流服装、手表等。 

 

 

一、依照品牌形象客制网店颜色

1.自订背景颜色

你能选择网站布景色,并将会控制整个网站的色系为整体深黑或浅白色。
位置:管理后台 > 商店设计 > 设计 > Doris Bien 的设定 > 店面版型

blobid2.png

若設為深黑色,示意如圖:

dark_home_copy.png

 

若設為浅白色,示意如圖:

light_home_w.png

2.自订主题颜色与文字颜色

blobid3.png
使用色码可以控制整个网站的按键、重点资讯、底线颜色,请使用 HEX 六位数色码。 (避免使用浅淡的颜色,以提高可读性)
色碼參考:https://www.digitaling.com/articles/36629.html

 

 

二、让顾客聚焦在商品介绍的设计感商品细节页

Doris Bien 的商品细节页没有商品分类的侧边栏,商品图片以更大的尺寸清楚呈现,商家可以利用更多精美的行销图文做搭配来介绍、行销商品。
商品描述、了解更多、送货及付款方式的版型设计整齐、简约且特别规划出更多面积让资讯或图文更好阅读!以下有四点特色小简介:
  • 商品订购栏位
  • 商品描述栏位
  • 了解更多栏位
  • 送货及付款方式栏位

 

1.商品订购栏位

线条装饰让介面优雅简约亦富设计感Hubble_______.png

2.商品描述栏位

因为宽度较大,商品描述用置中对齐较美观

mceclip0.png

3.了解更多栏位

可以摆放更多商品相关的大图来增加资讯丰富度

blobid7.png

4.送货及付款方式栏位

左右两栏设计,帮助资讯区分好读

Screenshot_2020-07-07_at_10.30.35_AM.png

 

 

 

三、建议 Banner 尺寸

请记得使用图片压缩工具,让大图不会占用顾客太多网路流量导致网站读取速度过慢,推荐使用:https://tinypng.com/


1.进阶分页

如果是页首置顶 Banner,喜欢整个萤幕满版图片,可使用 1920 x 850 px。

banner-size_3.jpg

如果不想占满整个萤幕,喜欢较窄的比例,推荐使用 1920x640px,这样在桌机约占满 3/2 画面范围

Artboard_2.png


2.商品列表页

提供上传全宽的Banner ,让商家可以利用此区块营造各个不同分类的情境和丰富度,建议Banner 高度不超过640 px,让顾客在一进入商品列表页时,能稍微看到第一排商品。

blobid9.png

Banner 采用全宽显示,特别适合精品类型的产品展示。

light_PLP_with_no_banner_2.png

 

 


四、体验更好更活泼的部落格版型设计

Doris Bien 部落格版型为响应式设计,文章会自动使用首图作为封面,并依照文章标题和封面长短调整高度和排版,一屏网页里可以呈现更多文章。不需担心不会网页排版,因为 Doris Bien 已预先设计好如何呈现,让商家可以更轻松自由的产出文章来丰富网店!
 light_Blog_list_page_3.png
以上是 Doris Bien 的特色介绍,立即试用看看吧!

 

 

 

 

 

还有其它问题?提交请求

评论