1.PC端产品设计规范

网站不同于移动应用：

屏幕适配（屏幕尺寸、分辨率）；

交互方式不同，鼠标相对手指具备更精准的点击范围，有更多的控件状态；

在设计网站原型时，并没有具体的控件大小和条栏规范，需要注意相关设计规范。

（1）设计尺寸及版心

2012年以前，分辨率主要是还是1024*768，版心为760；

现在，电脑分辨率主要是1920*1080，版心为960-1200（默认安全区1200即可)。

（2）导航结构

左右结构型：

1. 左右布局，灵活性强；
2. 左边通栏为导航栏，宽度没有具体的限制，可以根据实际情况进行调整；
3. 右侧为内容板块范围，是网站内容展示区域。

居中结构型：

1. 居中布局，中间的灰色部分为有效的显示区域，用于网站内容的展示；
2. 两边均为留白，没有实际用途，只是为了适配而存在;3、内容显示区域控制在1000px-1200px。 

 

导航设计要遵循以下原则：

• 简单：每个网站都应该有尽可能简单的结构；
• 清晰：导航的每项对用户而言，都应该是清楚的；
• 一致：系统的导航页在每一页中都应该是相同的;
• 用户最少的点击，最快地到达目的网页。

（3）常用字体字体字号

网站中文建议使用微软雅黑字体，英文则建议使用Arial字体；iOS系统用苹方字体；安卓用思源黑体；

1. 12px是网页设计的最小字号，适用于突出性的日期，版权等注释性内容；
2. 14px则适用于非突出性的普通正文内容；
3. 16px或18px适用于突出性的标题内容；
4. 网站的字体大小没有硬性规定，根据实际情况可以酌情考虑；

（4）常用字体间距及透明度

字体间距舒适范围：

字体间距舒适范围，除了特殊的需求之外，都可以使用默认数值的间距：

1. 行间距，字号大小的1.5-2倍；
2. 段间距，字号大小的2-2.5倍；
3. 当选用14px字号时，行间距：21-28px；段间距：28px-35px；

透明度：

1. 87%为正文标题；
2. 54%为二级标题；
3. 26%禁用状态和提示文字；
4. 12%分割线；

（5）跨平台相似性

用户体验设计的重要标准：

• 统一；（电脑、平板、手机、音乐播放器、智能手表）
• 友好；
• 易用；

（6）超链接的处理

处理超链接时，需注意：

• 超链接是网站中的重要组成元素；
• 点击过的超链接要改变字体颜色；
• 如果带检索功能，搜索结果中，要对关键字做出变色处理，提示用户；

（7）视觉顺序

按视觉顺序设计网站时，需注意：

• 将网页标题、登录注册按钮、导航栏等重要的内容，放在用户很容易看到的地方，以减少用户寻找的时间；
• 目的：让用户最快获取到他想要的；
• 从左到右，从上到下，Z字型；

（8）控件设计

• 能点击的按钮，需要给出操作提示（hover效果或点击效果）；
• 不能点击的按钮，不要做成按钮的样式，更不要加各种效果；
• 页面中相同级别的按钮，保持设计样式统一；

注意事项

• 页面加载速度：当用户在等待内容加载时，他们很可能会变的沮丧；如果加载速度很慢，用户很可能会离开这个网站；解决方案——懒加载、预加载；
• 返回按钮：新打开的页面中尽量有返回按钮（或者面包屑导航）；如果一定要跳转到独立的页面，设置为在新窗口打开；
• 慎用促销、广告：促销和广告会抢夺用户的注意力，影响他们访问网站；
• 慎用滚动劫持：用户最不喜欢的设计之一，用户有权决定自己浏览的网页和APP的位置；
• 慎用自动播放音视频：需要用打开的音视频文件，设置为非自动播放的形式；
• 文字配色：不要使用繁重的颜色背景，配方方案要协调、易接受；
• 不要使用闪烁的文字；

2. 后台与前台的关系

后台的定义："后台”与“前台”都是相对独立的平台。前台是服务于互联网用户的平台，后台主要是支撑前台页面内容、数据及对前台业务情况的统计分析的系统。

区别：

1.使用的用户不同。前台用户：互联网用户；后台用户：平台内部人员、第三方商家；

2.产品人员关注的侧重点不同。前台产品:偏重交互体验、视觉效果；后台产品:偏重业务逻辑、提升效率；

3.前台产品经理:工作偏向于用户体验、交互体验等；后台产品经理:工作偏向于逻辑梳理、业务流程梳理、数据统计和分析等；

4.产品的需求来源不同。前台产品需求来源：竞品分析、调研问卷、用户反馈、数据分析、产品经验；后台产品需求来源：业务推导、数据分析、产品经验；

联系：后台对前台起到页面、数据的支撑，对前台的业务情况进行数据统计分析

3.后台设计

页面设计——网站导航栏

导航栏：一般是位于网页顶部或者侧边的超链集合，它将网站的主要内容按一定顺序和结构组织起来，使访问者更快速、清晰明朗的找到资源所在位置、页面。一般设计成平铺或树状结构的区域；

样式：横向导航栏、纵向导航栏、横纵结合导航栏；

导航样式1——横向导航栏

适合场合：横向导航会用在后台一级功能、层级很少的情况下;优势:位置明显，占用面积小；

劣势：可扩展性比较差。

导航样式2——纵向导航栏

适合场合：纵向导航会适用于层级深、导航项很多的情况下；

优势：方便可扩展；

劣势：占用页面面积比较大。

常用交互样式：

1. 单击导航项，展开下一级导航列表（易学习易扩展，一般情况都可适用）；
2. 主子导航项全部展示出来（较少项时，清晰明了);
3. 鼠标移入导航项区域，显示二级导航（占用空间比少，位置稳定，交互快速）；

导航样式3——横纵结合

适用于业务模块比较独立，且业务模块下也会包含多个子模块的平台；这种情况下，主要业务模块用在横向导航栏中展示，选中某个业务模块后，其子模块导向以纵向导航栏显示。 

常见的后台版本

PC版后台和移动版后台

一般后台只有PC版，但产品人员还是需要根据用户的使用场景分析，决定PC端与移动端后台包含的内容：

1)PC后台：经常在固定场所进行的工作相应产品内容应放在PC端；

2)移动端后台：经常在不固定场所需要进行的工作或可以利用碎片时间进行的工作，相应产品内容应放在手机端（如外勤销售找附近的客户、外勤打卡等）；

后台的产品方案搭建流程

确定用户角色：确定后台最终的使用角色都有哪些。

需求收集：对各角色用户进行访谈，梳理需求目的、业务场景、流程、规则。

需求分析：

• 通过业务场景，分析提取出需要管理的主题（对象)
• 分析各对象包含哪些元素（字段)
• 通过业务场景，分析用户对对象可以进行哪些操作（功能)
• 根据功能列表，分析功能结构
• 可以借助功能结构，设计原型
• 借助功能列表、原型，设计PRD(细化功能，分析操作流程及规则）

4.自媒体端

自媒体端：手机端发布图文确实很不方便，为了优化用户体验，鼓励用户发布优质文章，需要提供一个PC端的发布环境。这个PC端的发布环境，一般称为自媒体端。

常见功能：

内容管理：文章的发布、编辑、删除、查看，对一些常用素材管理等

粉丝管理：粉丝的概况、粉丝列表和粉丝的画像等进行管理

评论管理：对评论内容的编辑、回复及常见状态的操作

（1）内容管理

后台

1. 基本功能：增删查改
2. 无论是后台列表还是前台列表，都是对信息的展示，并设置相关的操作，只是界面布局、交互效果不一样
3. 后台导航的页面命名：XX列表或者XX管理

后台列表页的组成

1.查询区，包括查询条件和查询操作（查询、重置）

2.查询结果列表，列表包括字段名称和字段值

3.关于状态字段:如果数据要在前台展示,那么就要有上下线的状态显示，并可以操作上线或下线

4.关于查询条件的控件，如果是标准化的数据（可选项有限)，则用下拉选择，如果是非标准化数据，则用输入框

ID的概念：

ID：记录的“身份证号”，不可改变。通常会规定“新建”时，系统自动生成一个ID字段，在同类记录中，每个字段的ID都是唯一的。类似唯一标识。

例如：一般为自增长的一串数字值（001、002、p001、p002....）

图文数据

图文数据页面显示用户发布文章的数据

包括：阅读数、评论数、收藏量、转发量，用户可以查看对应文章的阅读数据

逻辑规则：

1）数据包含：阅读量、评论量、收藏量、转发量

2）排列顺序：根据发布时间倒序排列

（2）粉丝管理

粉丝概况：显示粉丝相关数据，粉丝数、粉丝阅读量、粉丝增长趋势等数据

粉丝列表：显示所有关注了的粉丝，可以点击粉丝的头像进入到粉丝相关的个人主页

粉丝画像：显示粉丝画像内容包括：粉丝性别分布、粉丝年龄分布、粉丝终端分布、粉丝喜欢分类分布

（3）评论管理

对不良信息进行过滤；

筛选查看某篇文章的评论；

回复用户的评论；