揭秘京东网络战略：京东店铺页面设计与美化技巧

京东商城店铺页面如何设计
每家店铺标配的4个基础页面均可独立设计，初始状态下系统已预设了一些常规信息，您可根据需求进行删除或修改。
每个页面的设计流程一致，以下以“店铺首页”为例进行演示。
页面设计需遵循以下原则：
首先【创建布局】-接着在布局中【插入模块】-然后【调整】模块内容-最后【发布】操作，共5步。
1、布局名词解释
布局：指将页面划分为不同结构的区域，所有设计元素需放置于布局内；每个页面可包含多个布局。
系统目前提供12种布局供您选择和组合。
特别提示：
每个页面的顶部都有一个固定通栏布局（不可删除、移动），其中放置的模块将在店铺所有页面中自动显示。
建议在此布局中仅放置店铺LOGO、店内导航和主推活动的横幅等；若只想在当前页面显示内容，请手动添加新布局后再添加模块，请勿使用默认布局。
2、创建布局
2.1 可用布局列表在装修页面点击顶部左上角的【创建布局】按钮，即可打开如下选择器：
共有12种布局可供选择。
2.2 使用说明
点击【创建】后，该布局将出现在页面底部，如需调整位置，可手动向上移动。
创建后的可视化页面显示“通栏布局(990)”：
当鼠标悬停在布局区域内时，会显示布局名称、尺寸和操作，如上图所示：
名词解释
通栏(990)：表示该布局名称，同时指出其为宽度990px的通栏布局
红叉：表示删除该布局的操作，删除时连同其内容一并删除且无法恢复，操作需谨慎。
绿色箭头：表示布局可上下移动操作
重复以上操作，我们可以根据设计需求向当前页面添加多个不同风格的布局，例如在某个页面添加了7个布局，显示如下：
注意事项：
布局创建后显示为一个虚线框，每个虚线框代表一个独立的布局。上图中选中的是左右布局，常用于左侧放置分类，右侧放置推荐商品。
您可以根据自己的设计思路，选择使用1个或多个布局；布局的使用数量建议不要超过10个。
3、模板名词解释
选择了布局，就相当于为装修设定了大纲和框架，接下来我们需要往框架中填充内容。
名词解释
功能模块：提供特定特效的系统功能称为功能模块。
系统目前有5个目录分类共15个功能模块。
可用的“模块”列表
在任意一个布局的左下角有一个名为【插入模块】的操作按钮，点击会弹出如下：
由上图可以看出模块所属目录和名称。
上图为“店铺基础模块”，该目录下共有4个功能模块：
分页显示商品：如果您有M个商品，设置每页显示20个，那么就会有M/20个分页，直接点击页码即可查看对应页面的商品列表；每个页面上的商品可以按照【销量】【价格】【好评数】进行排序。
默认是按照SKU的上架时间从晚到早排序的，您可以通过更换【模板】来调整默认排序。
商品类目：该模块用于显示店铺内的商品分类。
店内搜索：该模块是店铺内搜索框，您可以根据设计要求将其放置在合适的位置。
店内搜索结果：顾名思义，用于显示搜索结果的，该模块默认在“店铺内搜索结果页面”预置，如无特殊要求请不要删除。
第二个目录显示如下：
由上图可见该目录下有2个模块：
销售排行：用于显示店铺内商品的销售榜单，默认是前10个。
商品推荐：该模块使用频率最高，如“热卖”“店长推荐”“重点推荐”等均可以使用该模块实现。
品牌团：仅适用于第三方卖家。商家可在该模块的“设置”中通过SKU ID录入参加了品牌团购的商品。
第三个目录为“店铺营销”模块，显示如下：
由上图可看到该目录共有4个模块：
自定义内容区：也称为“HTML编辑器”，是装修店铺使用频率最高的模块之一，目前自定义内容可以上传图片、编写代码等。如果您懂一些dreamweaver、html、CSS DIV，使用这个模块可以让您装修出更炫的效果。
导航：比较容易理解，即为输入一个关键词并配置一个链接网址即可。
轮播图：通过编辑需要轮播的html片段以及背景颜色，实现html片段的轮播效果！
接下来看第四个目录“公司相关”，截图如下：
由上图可以看出该目录包含3个模块：
店铺简介：即显示品牌介绍内容的模块。
店铺公告：即显示店铺内公告信息的模块。
店招模块：即显示店铺招牌内容的模块。
接下来看第五个目录“公司相关”，截图如下：
由上图可以看出该目录包含1个模块
搭配详情：展示用户在搭配购里面的商品搭配，在“设置”中输入搭配id可置入搭配信息。
在装修时，根据设计需求可以添加以上15个模块中的任意一个或多个，同一个模块在一个页面上可以多次使用。
4、插入模块
4.1 插入“分页显示商品”模块4.1.1 插入操作流程
选中要插入模块的布局，例如：
点击【插入模块】按钮，依次找到目标模块后点击【放入】，
模块放入完毕后，可对模块进行修饰和内容完善，操作如下：
4.1.2 设置
点击模块的【设置】，会弹出如下操作面板：
如上图，默认选中的是【皮肤】操作。
4.1.3 皮肤
名词解释
皮肤：用于美化该模块的边框和周边，详细功能说明：
皮肤选择：系统预置了2套皮肤，可以快速选择使用
标题栏：用于设置模块标题区域范围内皮肤的操作
内容区：用于设置模块内容区域范围内皮肤的操作
底部栏：用于设置模块最底下区域范围内皮肤的操作

底部栏：用于设定模块最底部区域范围内的界面操作

4.1.4模板
每个模块系统都预设了1个或多个版式，通过更换版式可以让模块外观瞬间改变：
说明：
版式分为“最近使用”“我的制作”和“系统版式”，分别表示如下：
最近使用：其中存放的是你最近使用过的版式，可以快速选取无需寻找
我的制作：其中存放的是你自己制作的版式
系统版式：由官方或第三方开发者提供版式
4.1.5标签
名词解释
标签：指的是与模块标题并列显示的可添加超链接的功能。标签的使用如下：
使用说明：
输入“超链接文本”和“网址”如上图中的，然后点击【添加】，可以添加多个，最后点击【批量更新】，最后记得点击【保存】哦，待页面【发布】后可看到效果，点击【刷新】即可看到效果哦。
4.2添加“商品分类”模块
4.2.1添加的操作流程
选中要添加该模块的布局，点击【添加模块】按钮：
选中“商品分类”模块，点击【放置】：
放置后显示如下：
点击模块名称后面的【设置】可进行该模块的内容完善和显示效果更换等。
4.2.2设置
点击【设置】后显示如下：
默认选中的是【界面】。
4.2.3界面
同4.1.3操作
4.2.4版式
同4.1.4
4.2.5标签
同4.1.5
4.3添加“店内搜索”模块
4.3.1添加的操作流程
选中要添加该模块的布局，然后点击左下角的【添加模块】，举例如下：
点击【添加模块】后，弹出的操作面板中找到“店内搜索”模块，并点击【放置】：
放置后默认显示如下：
如上图可见，该模块位于“分页显示商品”的下面。
名词解释
版式的拖动移动：鼠标移动到模块上，并按下左键，不松开左键同时移动鼠标可将模块移动到一个新的位置，比如上下交换位置等。
这时，用鼠标选中“店内搜索模块”，按下左键向上拖动鼠标，待移动到目标位置时松开鼠标左键，即可将该版式移动到上面(同理也可以往下移动、跨布局移动等)，如下：
松开鼠标：
即可完成模块的上下移动，当然模块的移动不局限于布局内，也可以在布局间来回移动哦。
点击该模块名称后面的【设置】，可进行内容修改。
4.3.2设置
如上图所示默认选中界面。
4.3.3配置
名词解释
配置默认关键词：你可以设定一个搜索词，设定后该词会搜索框里默认显示出来。
配置热荐词：你可以设定3个推荐词，方便用户直接搜索而无须手动输入。
价格筛选：开启后可以让用户按照N元到M元之间来搜索你的店内商品。
4.3.4界面
操作同4.1.3
4.3.5版式
操作同4.1.4
目前系统预置有2个版式，截图如下：
4.3.6标签
操作同4.1.5
4.4添加“店内搜索结果”模块
4.4.1添加的操作流程
“店内搜索结果”模块默认预置在“店内搜索结果”页面里，如无特殊需求请勿删除。
系统预置该模块的显示位置截图如下：
点击【页面装修】显示如下：
当用户点击【搜索】按钮后，用该模块显示搜索结果的，如果删除了该模块，将无法显示搜索结果，请慎重操作，在没有把握的前提下请勿删除和移动该模块。
当然该模块也可以设置，如在上图中点击模块名称后面的【设置】。
4.4.2设置
默认显示如下：
如上图，默认选中了“界面”。
4.4.3界面
操作同4.1.3
4.4.4版式
操作同4.1.4
4.4.5标签
操作同4.1.5
4.5添加“销售排行榜”模块
4.5.1添加的操作流程
选中将要添加销售排行榜模块的布局，比如：
点击【添加模块】，在打开的操作面板中找到“销售排行榜”模块，并点击【放置】，
放置该模块后默认显示效果如下：
点击设置可进行模块内容配置。
4.5.2设置
点击设置打开操作面板默认是“界面”。

置入完成之后，系统将默认展示如下界面，您可点击名称旁的【调整】按钮来优化导航模块的内容：

4.7.2 调整
点击【调整】按钮后，会弹出一个如下操作界面：
系统默认开启【配置】操作。

4.7.3 配置
名词解释：
导航名称：指的是超链接的文字内容。
链接地址：指的是点击文字后跳转的网址。
完成添加后，点击保存即可看到效果。

4.7.4 主题
操作与4.1.3相同。

4.7.5 模板
操作与4.1.4相同。

4.7.6 标签页
操作与4.1.5相同。

4.8 添加“自定义内容区”模块
4.8.1 添加的操作流程
选择用于添加该模块的布局，并点击布局左下角的【添加模板】按钮，在模块选择界面中找到“自定义内容区”并点击【插入】，
插入完成后显示如下，可点击【调整】来完善内容：

4.8.2 调整
点击【调整】按钮，系统默认打开配置内容区域，通俗称为“HTML编辑器”。

4.8.3 配置
自定义内容区功能简介，自定义内容支持使用：
1) HTML代码(仅支持body标签内的代码，不含body)
2) 部分CSS代码：常用效果的CSS代码也可以
3) Script代码：常见的javascript代码
4) 系统内置的js库js代码
如果您写入了CSS代码，那么为了避免和系统css冲突请在您的CSS代码前面添加.user等标识，以避免和系统默认样式冲突。

4.8.4 主题
操作与4.1.3相同。

4.8.5 模板
操作与4.1.4相同。

4.8.6 标签页
操作与4.1.5相同。

4.9 添加“轮播图”模块
4.9.1 添加的操作流程
选择要添加轮播图模板的布局，通常用轮播图来做banner、首图等所以一般选择位于页面中上位置的布局：
点击【添加模块】按钮，找到轮播图模块并点击【插入】：
模块插入后默认显示效果如下图，可点击【调整】进行修改内容：

4.9.2 调整
点击【调整】按钮，打开操作界面，系统默认会选中配置操作。

4.9.3 配置
说明：
1) 点击【选择图片】上传轮播显示图。
2) 标题：输入每一张图片的标题。
3) 链接：输入每一张图片的链接到的网址，注意必须是京东网址。
操作完成后点击保存，您最多可以设置8张轮播图哦。

4.9.4 主题
操作与4.1.3相同。

4.9.5 模板
操作与4.1.4相同。

4.9.6 标签页
操作与4.1.5相同。

4.10 添加“店铺简介”模块
4.10.1 添加的操作流程
选择要添加店铺简介模块的布局，然后点击左下角的【添加模块】按钮，该模块默认预置在“店铺简介页”里。如果没有特殊需要，请勿删除和移动。
点击【调整】可对该模块进行管理和美化。

4.10.2 调整
说明：该模块的简介内容在供应商后台--【我的店铺】-【店铺装修设置】-【品牌简介】：

4.10.3 主题
操作与4.1.3相同。

4.10.4 模板
操作与4.1.4相同。

4.10.5 标签页
操作与4.1.5相同。

4.11 添加“店铺公告”模块
4.11.1 添加的操作流程
店铺公告模块默认预置在店铺首页左下角的位置，如无特殊需要请勿删除。
4.11.2 调整
该模块的内容维护在“供应商后台”-【我的店铺】-【公告海报管理】-【公告管理】。
点击该模块的【调整】直接定位到主题操作

4.11.3 主题
操作与4.1.3相同。

4.11.4 模板
操作与4.1.4相同。

4.11.5 标签页
操作与4.1.5相同。

4.12 添加“店铺招牌”模块
4.12.1 添加的操作流程
店招模块默认在每一个页面的顶部，如果无特殊要求请勿删除该模块。该模块的内容维护在“供应商后台”-【我的店铺】-【店铺管理】-【店铺基本信息】。
4.12.2 调整
点击可以进行修饰操作。

4.12.3 主题
操作与4.1.3相同。

4.12.4 模板
操作与4.1.4相同。

4.12.5 标签页
操作与4.1.5相同。

5、页面设置
页面设置包含背景设置和分享设置。

5.1 背景设置
在每一个页面装修的时候，浏览器窗口的左上角都有一个按钮叫【页面设置】点击它可以看到【背景设置】
说明：
背景颜色：可以选择或者输入背景色颜色值。
背景宽度：用来限定背景色、背景图的宽度;数值单位是像素，留空则表示全屏。
背景图片：请上传一张图片，大小限制300K。
采用“背景图片”结合“自定义内容区”模块可以制作出诸如“全屏banner”之类的效果。

5.2 分享设置
为店铺增加分享浮动条，可以选择显示在页面的左侧还是右侧，同时可以设定默认分享词;支持分享店铺到新浪微博，腾讯微博，人人网，开心，豆瓣等其他第三方网站。
分享词，留空则程序自动读取一段文字，建议手动撰写文案后保存。
说明：
分享词：建议输入140字符内，因为要分享到微博等网站，超出部分将被对方网站自动截断。
可能会影响微博内容的完整性。

京东主页结构与子页结构区别
主页结构和子页结构的区别是功能和设计重点不同。根据查询相关公开信息显示，功能不同，主页结构是为了引导用户进入网站，提供商品分类和推荐等信息，以吸引用户的注意力和兴趣，子页结构是为了满足用户的具体需求，提供商品详情、购物车、订单等功能，以便用户完成购物流程和交易，设计不同，主页结构需要考虑页面的整体布局、颜色搭配、图片和文字的呈现方式等，以提高页面的美观度和吸引力，子页结构需要考虑页面的功能性、易用性、信息的呈现方式等，以提高页面的实用性和用户体验。