PM进阶之路 | 自媒体端产品设计

网站设计规范：

网站不同于移动应用：

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

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

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

设计尺寸和版心：

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

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

导航结构：

左右结构型：

1.左右布局，灵活性强；

2.左边通栏为导航栏，宽度没有具体的限制，可以根据实际情况进行调整；

3.右侧为内容板块范围，是网站内容展示区域。

居中结构型：

1.居中布局，中间的灰色部分为有效的显示区域，用于网站内容的展示；

2.两边均为留白，没有实际用途，只是为了适配而存在；

3.内容显示区域控制在1000px-1200px。

 导航简单易用：

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

1.简单：每个网站都应该有尽可能简单的结构；

2.清晰：导航的每项对用户而言，都应该是清楚的；

3.一致：系统的导航页在每一页中都应该是相同的；

4.快速：用户最少的点击，最快地到达目的网页。

PC导航：面包屑，非线性。

APP导航：线性。

常用字体字号：

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

1.12px是网页设计的最小字号，适用于突出性的日期，版权等注释性内容；

2.14px则适用于非突出性的普通正文内容；

3.16px或18px适用于突出性的标题内容；

4.网站的字体大小没有硬性规定，根据实际情况可以酌情考虑。

常用字体间距及透明度：

字体间距舒适范围：

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

1.行间距，字号大小的1.5-2倍；

2.段间距，字号大小的2-2.5倍；

3.当选用14px字号时，行间距：21-28px；段间距：28px-35px。

透明度：

1.87%为正文标题；

2.54%为二级标题；

3.26%禁用状态和提示文字；

4.12%分割线。

跨平台相似性：

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

1.统一：电脑、平板、手机、音乐播放器、智能手表；

2.友好；

3.易用。

超链接的处理：

处理超链接时，需注意：

1.超链接是网站中的重要组成元素；

2.点击过的超链接要改变字体颜色；

3.如果带检索功能，搜索结果中，要对关键字做出变色处理，提示用户。

视觉顺序：

1.将网页标题、登录注册按钮、导航栏等重要的内容，放在用户很容易看到的地方，以减少用户寻找的时间；

2.目的：让用户最快获取到他想要的；

3.从左到右，从上到下，Z字型。

控件设计：

1.能点击的按钮，需要给出操作提示（hover效果或点击效果）；

2.不能点击的按钮，不要做成按钮的样式，更不要加各种效果；

3.页面中相同级别的按钮，保持设计样式统一。

注意事项：

1.页面加载速度：当用户在等待内容加载时，他们很可能会变得沮丧；如果加载速度很慢，用户很可能会离开这个网站；解决方案：懒加载，预加载；

2.返回按钮：新打开的页面中尽量有返回按钮（或者面包屑导航）；如果一定要跳转到独立的页面，设置为在新窗口打开；

3.慎用促销、广告：促销和广告会抢夺用户的注意力，影响他们访问网站；

4.慎用滚动劫持：用户最不喜欢的设计之一，用户有权决定自己浏览的网页和APP的位置；

5.慎用自动播放音视频：需要用打开的音视频文件，设置为非自动播放的形式；

6.文字配色：不要使用繁重的颜色背景，配方方案要协调、易接收；

7.不要使用闪烁的文字。

自媒体端：

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

自媒体：

自媒体是指普通大众通过网络等途径向外发布内容，并借助平台使得内容传播出去的方式。

常见功能：

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

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

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

注册登录：

后台的定义：

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

后台与前台的区别：

1.使用用户不同：

前台用户：互联网用户；

后台用户：平台内部人员、第三方商家。

2.产品人员关注的侧重点不同：

前台产品：偏重交互体验、视觉效果；

后台产品：偏重业务逻辑、提升效率。

 3.产品人员的工作侧重点不同：

前台产品经理：工作偏向于用户体验、交互体验等；

后台产品经理：工作偏向于逻辑梳理、业务流程梳理、数据统计和分析等。

4.产品需求来源不同：

前台产品需求来源：竞品分析、调研问卷、用户反馈、数据分析、产品经验；

后台产品需求来源：业务推导、数据分析、产品经验。

后台与前台的联系：

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

后台导航：

网站导航栏：

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

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

横向导航栏：

适合场合：横向导航会用在后台一级功能、层级很少的情况下；

优势：位置明显，占用面积小；劣势：可拓展性比较差。

 纵向导航栏：

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

优势：方便可扩展；

劣势：占用面积比较大。

常用交互样式：

1.单击导航项，展开下一级导航列表（易学习易扩展，一般情况都可适用）；

2.主子导航项全部展示出来（较少项时，清晰明了）；

3.鼠标移入导航项区域，显示二级导航（占用空间比较少，位置稳定，交互快速）；

注意：后台常用纵向导航中的第1种样式。

横纵结合：

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

常见的后台版本：

PC版后台和移动版后台：

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

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

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

后台的产品方案搭建流程：

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

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

3.需求分析：

①通过业务场景，分析提取出需要管理的主题（对象）；

②分析各对象包含哪些元素（字段）；

③通过业务场景，分析用户对对象可以进行哪些操作（功能）；

④根据功能列表，分析功能结构；

⑤可以借助功能结构，设计原型；

⑥借助功能列表、原型、设计PRD（细化功能，分析操作流程及规则）。

后台常见功能：

增：

新增数据或者内容的功能。

删：

删除数据或者内容的功能。

改：

修改数据或者内容的功能。

查：

查看数据/内容，或者是根据条件去查询数据/内容的功能。

总结：

后台：

1.基本功能：增删改查；

2.无论是后台列表还是前台列表，都是对信息的展示，并设置相关的操作，只是界面布局、交互效果不一样；

3.后台导航的页面命名：XX列表或者XX管理。

后台列表页的组成：

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

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

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

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

内容发布：

内容列表：

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

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

流程图-添加文章：

图文数据：

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

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

粉丝管理：

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

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

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

评论管理：

1.对不良信息进行过滤；

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

3.回复用户的评论。