展架与展板的设计需要那几个步骤

1、突出主题，作为宣传册种的一员也脱离不来提高宣传的目的，因此主题一定要够大，这样才能够比较突出。2、布局内容，一般把主题布局到上部分三分之一的位置，而所宣传的亮点则布局到中间的位置，这样层次更加明显。3、颜色基调，产品公司基本情况给予相应的色彩计划定制，确保与公司整个风格相符合一致。

后台产品设计规范

以下数值为参考，请结合特定产品灵活运用。

1. 页面布局

统一尺寸

据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。

适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。

页面框架

页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。

栅格布局

栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。

需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。

谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。

尺寸设定

一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度  200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。

相对间隔

定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。

2. 标准色

颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。

品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。

辅助色用于提示其他场景，比如成功、失败、警告、无效等。

中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。

其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。

3. 标准字

后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。

后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。

行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。

4. 图标

图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。

除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。

5. 按钮

按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。

按钮的交互状态包括默认、悬停、点击和不可用。

按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。

规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。

填充按钮之间间距最小为 10px。

6. 导航

导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。

各类导航中的字体大小可进行统一设定。

顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。

侧栏菜单为垂直导航菜单，可以内嵌子菜单。

下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。

步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。

分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。

面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。

徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。

7. 表单

表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。

字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。

输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。

输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。

表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。

选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。

搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。

单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。

开关按钮外框 40*20px，内部圆形 16*16px。

8. 表格

表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。

表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。

表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。

行高

表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。

行数

表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。

列宽

列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述）。

列数

表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

对齐方式

表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。

详情入口

表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。

9. 反馈

包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。

弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。

弹框

弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。

侧滑框

侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。

骨架屏

为某些特定数据提供数据加载等待时的占位图形组合。

全局提示

建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。

警告提示

用不同颜色和样式展示需要关注的信息。

通知提醒

消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。

10. 缺省状态

绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。

页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。

11. 数据可视化

数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。

功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。

考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。

1、折页设计要尽量精致美观，展示的产品应选择最佳角度，力求逼真和清晰，字体清秀，色调与内容和谐，以增加客户购买力为最终目的。

2、.常见的宣传折页尺寸如下：(注：用于印刷、裁切需要每边增加3mm)

宣传单成品尺寸：420×285mm(A3/大8开)   210×285mm(A4/大16开)

宣传单设计尺寸（含出血）：426x291mm   216×291mm

（以上为常规的标准宣传单尺寸，非标准的宣传单尺寸可能会造成纸张的浪费，所以在选用时需注意。）

3、纸张：宣传单常用可选择的纸张有105g、128g、157g、200g、250g等。纸张的类型除铜版纸外还可选择双胶纸及艺术纸印刷。其中，157G铜版纸为时下最常用的宣传单用纸。

4、宣传单、折页的整体设计:折页的封面及封底要抓住商品的特点，以定位的方式、艺术的表现吸引消费者，而内页的设计要做到图文并茂。

封面形象需要色彩强烈而显目；内页色彩相对柔和便于阅读。对于复杂的图文，要求讲究排列的秩序性，并突出重点。封面、内页要造成形式、内容的连贯性和整体性，统一风格气氛，围绕一个主题。

什么是详情页？

详情页是产品内容的体现，是商家展示产品信息及卖点的页面，是体现产品内在美、容易使客户产生共鸣的页面。产品详情页要与产品主图、产品标题相对应，产品详情页必须真实介绍产品的属性。一个完整的产品详情页的作用就是告诉消费者产品是什么。产品的价格、外观、功能，以及产品与同类竞争者相比较的优势等。详情页一般由以下部分组成：首图 Banner、产品信息、产品外观展示、产品细节展示及产品功效介绍等。对于每个不同的产品，都有其自己定义的详情页。作为电商首先的一个工作就是要把商品详情页设计好，只有这样才可能吸引越来越多的用户去浏览。一张好的详情页可以大大的提高店铺转化率。

详情页设计对于公司和产品的重要性：

1、聚焦产品的卖点和亮点

同一种产品如何在众多商家中脱颖而出，详情页很重要。用户浏览产品时间短暂，详情页是否聚焦卖点和亮点，是否满足客户需求，是否解决客户顾虑点，影响着客户是否继续关注后续内容以及是否有购买行为。

另外详情页是用户完整使用产品时必经的页面，产生关键的产品数据，比如：内容型产品，会在该页面产生阅读量、播放量等；电商型产品，引导用户做购买决策等。详情页吸引力越高，用户停留的时间就会越长，所以产品详情页设计不光要有良好的视觉效应，还要有缜密的构思、精美的排版，对客户做积极引导，将直接影响产品交易的转化。

2、展现公司实力和强化信任

产品详情页是核心的展示区域。要让客户真心地放心地购买产品，产品详情必须展现企业的实力和产品的可信程度。

优质的产品详情页能够展现企业规模、产品细节处理、特色之处、设计过程、制造流程，并注明产品鉴定方法、使用方式、注意事项等，体现企业对顾客的真诚。另外产品详情页布局的每一个屏设计紧密结合材质、功能、尺寸等产品信息，不能过度修饰，若造成与产品本身相差甚大，不仅使得客户反感没有欲望，还会失去大量客户。

3、 产品详情页能够激发客户购买欲望

产品展示只能是客户间接感官，不能直接接触。因此，客户有无购买欲望与产品图片、产品描述等详情质量决定的。

产品详情页架起了客户与产品深度了解的桥梁，吸引买家深入了解产品，或者引导买家浏览店铺中的其他商品，已达到进店流量的利用做大化。对店铺的销量起着很重要的作用。优质的产品详情页能够对客户的购买行为产生正面积极影响，能够激发客户消费欲望，树立信任感，促使客户下单。即产品详情页承载了店铺的流量和公司的订单量。

设计详情页需要注意的内容：

在商品详情页是吸引客户购物的前提下，将各类关键要素最有效地进行合理的规划设计是落实核心设计策略的第一步。常见的商品详情页，设计时主要注意的内容包括视觉要素、品牌要素、商品要素、服务要素、营销要素和互动要素。

1、视觉要素

重视觉营销服务，通过视觉提升整体导购环境质量及感官体验。详情页设计所用图片、文案、字体、排版、配色等诸多因素的整体风格都需注意。通过高质量的详情页的视觉效应，第一时间抓住消费者的眼球。还有注重烘托符合产品特性的氛围，使产品在特定环境中的使用状态的表达更容易使消费者产生共鸣。

2、品牌要素

并非单指商品所属的某个品牌，而是指在商品详情页上，所展示出的品牌特征性，包括商家的信誉水平、商家认证资质、服务评价及评分状况、商品品质等。注重商品品牌与品质的塑造，这是构建消费者信任度的基础，无论是什么类型的商品详情页，构建信任度是消除用户购物顾虑的关键因素。

3、商品要素

包括商品的标题、商品图片、规格参数价格、库存、功效、工艺、品牌、品质、使用场景等。商品要素是详情页设计过程中的核心要素，通过商品要素的各类信息展示，能向消费者传递商品的价值性。

整个商品详情页，需要合理地排版布局商品要素的各类信息，让消费者对商品的了解由浅入深，由不信任到产生购买兴趣，从而逐渐影响消费者对商品的认知。

4、服务要素

与商品要素紧密相关，商品详情页必不可少的部分，服务至上是建立消费购物信任度的关键。无论是实物类商品还是虚拟商品，在电商平台的销售过程中，都必须附带上丰富的、高质量的销售服务，通过让消费者感知销售服务的质量水平和便捷性，进步提升消费者购买商品的决策信心。

5、营销要素

主要是指商品的促销活动与优惠政策，以及商品的各类关联推荐等营销元素，常见的营销要素包括促销信息、促销标签、优惠信息、返利、奖励、赠品等。注意营销技巧的合理运用，无论是促销工具还是价格工具，核心都是为了最大化吸引消费者的注意力，影响消费者的心理。

6、互动要素

主要是指在商品详情页的浏览过程中，提供给消费者进行人机互动操作的功能元素。无论是浏览、分享、下载、收藏、还是加入购物车或直接购买，都应让这些工具便捷地出现在消费者的视野中，让其随时随地能基于场景进行高频的互动操作。

看人家的心理价位吧。要是我收一般一稿不论大小最少200块，毕竟设计不是买菜，不是越大约好，关键是设计的质量还有辛苦费，200块，估计如果对方请你吃一顿也不只200吧，所以这个价还是比较合理的。

案例解析详情页设计的技巧

电商视觉比拼的不仅仅是视觉技巧了，而是怎么让客户愉悦，最重要的是如何让客户在愉悦的同时可以快速地下单。我们自己在设计详情页页面的时候，一定要注意页面设计的基础三原则：

基本原则一：信息图像化

文字是循序渐进的处理，同时能被记住的只有20%，而图片同步被大脑处理能记住的是100%，所以详情页面的描述应尽可能地图像化。

基本原则二：高效表达

内容不要过于臃肿，表达要清晰有条理，简单直接。不要影响到页面打开速度。页面载入时间过长，会影响销量。

基本原则三：要掌握客户最关心的点

你所认为客户最关心的地方，往往并不是客户最关心的不同的产品客户所需求、所关注的地方不同，不同的产品顾客关注的地方也是各不相同。

了解了设计的基础原则之后，我们一起来看看：一个页面如何从抓住眼球到最终成交的逻辑，让页面深入人心，让页面可以帮助你说服你的消费者。

一、吸引顾客 留住顾客

客户的需求：产品独特的卖点(与别人的产品不同的地方，产品优势)、活动价格优惠、不同的服务(购买产品能得到什么享受、服务)、痛点(解决问题烦恼)等。

比如说，服装类的产品顾客可能关注的是衣服的款式，模特穿着的样子，衣服的尺寸以及衣服的尺码，模特的身材体重以及他穿着的衣服的大小码对比。这样才能得出来自己穿起来是什么样子。

而功能性产品比如说保健品之类的，顾客关注的就是本件产品到底有什么功能。你的产品肯定要一个突出点，比方说缓解疲劳。需要打出来一点吸引人的地方，你的产品与别人的为何不同，优势在于哪里。这里主要可以分为：近期热点事件、网络流行、新概念、主题氛围、生活主张、实际利益、好奇心、品牌的嫁接、新品上市、产品创意、强视觉、名人效益、限时限量等。

以下简单举例：

左边的产品是冬天的衣服。怎么吸引买家看下去?冬天买衣服除了看款式，更重要的是保暖。图片营造出一种温暖的气氛，暖色的背景外加女模特头上的灯光，给人以温暖的感觉，符合顾客心里的想法。

右边的产品是夏天带的防晒头盔，为什么会带?就是因为夏天太晒，但是带上难免会有点热，这时候用冰块的背景和雪山给人以冰凉的感觉，对抗炎热夏天，不仅防晒更强调清凉舒爽。

以上就是主题氛围，主要还是给顾客以代入感。

上图左边的产品是保健品，卖点是可以延缓衰老，这就是顾客所能得到的实际利益。设计上因为是保健品，注重天然、自然，所以背景用的水果，然后前面的女人面带微笑显得很年轻，整体给顾客一种年轻健康的感觉。

右边的图是卸妆水，除了卸妆以外可以细致毛孔，补水紧致，清爽温和，这些都是买卸妆水的顾客所需要的。而实际的功能和利益是需要文字和图片结合的，这类产品一般文案都比较多，所以更要注意文案的排版，一定要有规律，要做到有序、有层次、有重点，同时也别忘了运用背景的烘托效果。文案和背景的绿色清新相呼应，让人深刻地感知到产品的功能性。

上图左边的产品是百岁山矿泉水，不需要过多的修饰，就一句话：水中贵族百岁山，富含多种微量元素。我们的水就是好，就是水中的贵族，就是和别人的不同。此类产品主要吸引人的地方就是文案。

右边的产品是无烟不粘锅，可以看做是生活的主张：你用了这个东西逼格就高了!此类的设计主要是背景烘托文案，突出文案来吸引顾客。也可以放几张顾客使用的照片，强调大家都在使用，引发跟风从众的心理。

上图左边的产品是运动时候带的那种耳机，所以以强视觉的方式展现，就是类似于电影海报的方式，吸引顾客的眼球，让顾客有看下去的欲望。但此类设计比较考验阅历和合成功底，不仅仅需要好看，更需要和产品以及文案相贴合。

右边的产品就是很常见的新品上市，这也是一种很常见的吸引顾客的.方式。人都是有一种喜新厌旧心理和对新鲜事物的好奇心，这类的整体详情页应该围绕新品、新功能、新感受来做一个整体布局。

二、提升顾客兴趣 确认需求

上面提到的只是吸引顾客看下去的方法，顾客看详情页面主要还是想买东西的，因此必须要有顾客想要看到的元素。

产品的参数一定要有，并且写清楚。有的产品还需要测量方法等，方便顾客选择合适的尺码，这样第一显得专业，第二也方便顾客选择合适的尺寸。

鞋类产品最好在产品参数里面加上选码须知。如果产品比正常尺码小的话，一定要标注出来。

产品的细节一定要尽量展示得详细一点。比如：包包的各种角度展示，然后内里、拉链部分。如果是品牌的产品，品牌的LOGO一定要展示清楚，产品的走线一定要展示清楚，这样才能提升产品整体的品质感。

衣服的细节尽可能地展示清楚，也可以在旁边加一个全景展示和细节的对比。排版上面可以不拘一格，更具有引导性，像上图右边使用的就是线的引导。

上图左边的产品是女包，背景里的海鸥、大海、飞扬的女人裙角，给人一种奢华大气的感觉。不用文字描述，就能显示出产品的品质。这就是视觉设计简单易懂的原理，千万不要大篇幅的文字说明，既不显得高端，又会让人抓不住重点。