让矿石成为主角
买家看中一块斑彩螺，看的是色彩和纹理。网站要退到后面，把位置留给照片。
StoryoftG零售 · 精油与水晶精品店网站
一间开在星空里的精品店。
这是新加坡精油与水晶精品店 StoryoftG 的网站。整个页面用纯黑打底，就像夜里的天空，页面上的色彩大多来自矿石本身。
概要
StoryoftG 是 The Green Consultancy Pte. Ltd. 旗下的品牌，位于新加坡 Liang Seah Street，经营精油与水晶，也提供空间咨询、活动支援和工作坊支援。Potadot 为这个品牌开发中英双语网站，把三大系列共 201 件精品搬到网上。品牌标志是一颗带环的行星，全站就照夜空来布局：开头是星空，结尾是一圈光环，中间全是纯黑。页面上发亮的，是矿石和矿石的照片。
客户
来自新加坡的精油与矿石精品店。
StoryoftG 隶属 The Green Consultancy Pte. Ltd.（201929260E），地址是新加坡 1 Liang Seah Street。店里分三大系列：Elegance（优雅之选）30 件、Embody（平衡映现）81 件、Element（空间净化）90 件，从精油到天铁、斑彩螺和石英都有。
StoryoftG 不只是一间商店。服务页面列出三项服务：为住家和工作场所提供空间咨询，为活动和展览提供风水艺术品与布置建议，并支援水晶工作坊。
- 201
- 件精品
- 3
- 大系列
- 3
- 项服务
- 30
- 篇文章
客户所托
矿石要隔着屏幕打动人。
这类精品，买家都想拿在手上对着光细看。到了网上，能依靠的只有照片，同一个网站还要容纳商店、服务和文章。
201 件精品要有条理
矿石一多，容易看起来像仓库。分成三个有名字的系列，访客就记得住店里有什么。
多数精品要先查询
多数精品不列价格，部分只在工作坊或活动中提供。网站要把这些精品全部展示出来，也要让买家有地方查询。
中英文读者都要照顾
StoryoftG 同时面向英文和中文读者，有些矿石大家更熟悉中文名。两边的读者都要看得自在。
设计概念
页面是夜空，矿石是星光。
StoryoftG 本来就和星空有缘：标志是一颗行星，关于我们页面开头写着 Unlocking the Secrets of the Universe（揭开宇宙的奥秘），店里还有天铁。所以主页照夜空来安排，星空开场，光环收尾，中间全是黑色。黑色的作用也像珠宝商的丝绒托盘，斑彩螺的红和绿衬在黑底上，显得更亮。
浏览路线
-
1
星空
繁星之中立着一座金色环形雕塑。
-
2
陈列
画面从夜空转到一只石雕老虎。
-
3
系列
三张大图带出三大系列。
-
4
实景
雕塑再次出现，摆在真实的柜子上。
-
5
文章
四篇文章放在金色细框里。
-
6
光环
一个圆形里有一条通往精品店的链接。
灵感从何而来
标志
一颗行星外加一道环。环形又出现在开场的雕塑上，圆形又出现在结尾的光环上，页面首尾都回到标志的形状。
店里的精品
天铁、斑彩螺、黑水晶，不少是深色的，带着闪动的光彩。深色页面比白色页面更衬这些精品。
照片
多数精品都在深色木头的角落里拍摄。木头的暖棕色让黑色不显得冷，金色和杏色的文字也与这个色调相配。
设计风格
黑色与金色之间有一抹暖杏。
大标题和正文用金色与杏色，其余交给黑色，设计不和店里的精品抢风头。
色彩
- 夜空黑
#000000整个页面的底色 - 侧栏黑
#0F0F0F侧边菜单与购物车 - 金色
#BC9762标志、按钮与章节标题 - 杏色
#DABCA5大标题与正文 - WhatsApp 绿
#25D366WhatsApp 按钮
标志的金色用在 View 和 View All 按钮上，下一步该按哪里，一看就知道。绿色是设计里唯一另加的亮色，无论滑到哪里，都找得到 WhatsApp 按钮。
字体
Step Into a World of Vibrant Energy
Fira Sans · 大标题与产品名称StoryoftG blends grace and inspiration into carefully curated essential oils and crystals, designed to enrich the spirit of your everyday moments.
Nunito · 正文光环
页面在页脚之前收在一个黑色圆形上，圆的边缘透着光。这就是标志上的那颗行星，光从背后照过来，结尾的标题就写在圆里。
细节
多数卡片的照片都在同一个木头角落里拍摄，一排不同的矿石看起来就像同一个展示柜。照片下方依次是名称、括号里的中文名（如有）、系列，以及 Event Only 这类标注。
节奏
- 星空
- 陈列
- 视频
- Elegance
- 卡片
- Embody
- 卡片
- Element
- 卡片
- 实景
- 氛围
- 文章
- 光环
- 页脚
每个系列都重复同一个安排：先是一张大图，再是黑底上的一排卡片。访客看过一次就熟悉了。上方色条就是整个页面，按实际比例画成，照片章节显示照片的平均色。
逐章导览
从星空一路滑到光环。
请您当一回访客，把主页从头滑到底。每个亮起来的地方都是一个设计决定，说明里写着原因。
开场就是一片星空
繁星之中立着一座金色环形雕塑，对面是一句杏色大标题，下方有一条金色细线。
用意 这里还没有价格，也没有产品列表。访客先感受到画廊的气氛，再进入商店。
从星空转到石雕老虎
下一段画面转到深色木头前的一只石雕老虎。简介写在一块半透明的深色底板上，叠在照片上面。
用意 有了底板，这段文字照样好读，照片也留在视线里。访客不用离开画面，就知道这家店做什么。
每个系列都有一面墙
Elegance、Embody、Element 都用一张整幅大图开场。这里是 Element 系列的斑彩螺，占去画面右半边。
用意 Elegance 是岩石上的精油瓶，Embody 是一串紫色手链，Element 是一块斑彩螺。访客还没读到产品名称，就知道这个系列卖什么。
一张卡片放得下两个名字
每张卡片有照片、名称、括号里的中文名（如有）、系列，以及 Event Only 这类标注。按箭头可以移动这一排，按 View All 打开整个系列。
用意 买家认得的可能是英文名，也可能是中文名。标注提早说明这件精品与活动有关，不必按进去才知道。
雕塑回到地面上
环形雕塑再次出现，这次摆在真实房间的柜子上。一段斑彩螺的静音视频自动播放，叠在照片下缘。
用意 开场看到的雕塑，到这里成了真实房间里的实物。
文章放在金色细框里
New Discoveries 展示四篇文章，各有日期、标题和 View 按钮。文章页共列出 30 篇。
用意 天铁、碧玺这些矿石都有专文介绍，访客查询之前可以先读一读。看过这么多照片，细框让卡片显得轻巧。
页面收在一圈光环上
边缘发光的黑色圆形里，只有一句标题和一条链接 View Art Pieces，按下去打开精品店。
用意 长页面看到最后，访客只有一个明确的下一步。星空开场，也由星空收场。
一件雕塑和一句标题文字叠在照片上大图带出这一章
名称、系列、标注真实房间里的实物主页上的四篇文章一条通往精品店的链接
手机版
小屏幕上也是同一片星空。
页面为手机重新编排，商店就在拇指够得着的地方。
- 大标题移到雕塑上方，居中排列
- 每个系列一次显示一张大卡片，View 按钮和卡片一样宽
- 底部固定一条栏，放着 Shop、My account 和 Cart
幕后功夫
夜空背后的功夫。
好看是大家先注意到的。下面这些功夫，让这门生意卖得出货、接得到查询，也照顾到两边的读者。
网上精品店
201 件精品分三大系列，设有排序、购物车和买家账户。
WhatsApp 查询
多数精品不列价格，也没有购物车按钮，页面上请买家用 WhatsApp 查询，并放了按钮。每一页还有一个浮动的 WhatsApp 按钮。
中英双语
主要页面都有中英两个版本，各有自己的网址。ZH 和 EN 两个圆形按钮一直留在屏幕上。
礼品卡
买家自定金额，写好留言，礼品卡以电邮发给收件人。
文章
30 篇文章有自己的页面，其中四篇放在主页上。
为 Google 设定
每种语言都向 Google 标明，页面也带有搜索引擎读得懂的路径与页面资料。
- 1
了解您的业务
一个名字下有商店、空间咨询和工作坊支援，店里的精品要亲眼看到才会动心。
- 2
文案撰写
把系列名称、简短文字和产品照片整理成英文版，主要页面另有中文版。
- 3
设计与开发
黑色、金色和环形定下风格，接着是系列的固定安排、商店和手机版。
- 4
SEO 与上线
设好中英网址和路径资料，然后上线。
常见问题
您可能想问。
店里的产品要让人细看？欢迎 WhatsApp Ricky（+6011-1142 1029）详谈。
Potadot 为 StoryoftG 做了什么？
我们设计并开发了网站，包括主页、设有购物车和账户的网上精品店、礼品卡、文章，以及中英两个版本。
为什么整个网站都是黑色？
不少精品是深色矿石，带着闪动的光彩，黑底能让这些色彩更鲜明。StoryoftG 的标志又是一颗行星，黑色正好相配。每个网站的配色都按客户的产品来定，各有各的选择。
有些产品可以只接受查询吗？
可以。这个网站上，多数精品不列价格，也没有购物车按钮，页面上有 WhatsApp 按钮，买家可以直接查询。少数标了价格的精品，可以直接放进购物车。
我的店也能这样做吗？
可以。我们从您卖什么、买家怎么挑选入手，您的网站会有自己的样子。不妨把您的产品告诉我们，我们再给您具体建议。
