产品基础知识Day11

1.产品设计——个人页面设计

登录和未登录时,看到的个人主页是否有区别?

未登录和已登录，可使用的功能是否一样?

 你自己看到的你自己页面，和别人看到的你自己的页面是不太一样的，这个页面叫做个人主页；

个人主页常见的信息有哪些?

头像、昵称、性别、简介、地区、生日等

个人主页的常见功能有哪些?

消息、设置、我的作品、我的收藏、用户反馈

2.产品设计——列表首页

图文列表——布局方式

根据产品定位和内容侧重点不同，图文的列表一般有两种展现形式：

1、左侧的形式注重文本信息，图片的权重较低；

2、右侧的形式更注重图片信息，文本信息权重较低；

 视频列表——布局方式

视频/直播的列表一般有两种展现形式：

列表一般包含如下元素：

1. 视频封面；
2. 视频标题；

根据视频播放模式不同，视频列表排列方式也不同：

1. 单列；
2. 多列；

内容列表信息组成：

1. 内容基本信息，比如标题、正文、视频、封面等
2. 内容发布者信息，比如头像、昵称、认证状态、关注状态等3.内容互动信息，比如点赞数、评论数、分享数、摇放数、阅读数等

设计要点：视频排列规则

3.产品设计——内容详情页

图文详情页

 图文混合排版方式

包含的信息：文章标题、发布人（头像、名称)、发布时间、文章正文(文字、图片)、评论；

图文分离排版方式

包含的信息：发布人(头像、名称)、发布时间、文章正文（标题、文字、图片)、评论；

视频详情页

 根据播放模式不同，视频/直播内容在详情页的展现形式；

详情页一般包含如下元素：

1. 视频播放；
2. 视频标题；
3. 发布者/播主信息（头像、昵称)；

互动行为

常见互动：评论、点赞、回复评论、收藏、分享

在产品设计上，互动相关功能一般包含如下元素：

1. 行为操作功能；
2. 行为数据；

设计要点：

1. 点赞是最简单的行为，分享是最希望用户做的事，所以这俩功能在页面要凸出；
2. 分享的功能，目前主流分享渠道：微信、朋友圈、QQ和微博；
3. 对于不常用的功能，比如删除、举报，可以收纳在右上角的多功能键中。

互动的价值：

1. 对内容消费的人，互动是表达情绪的方式；
2. 对内容生产者，互动是对自己创作的激励；
3. 对于内容，互动是用于区分内容质量和热度的重要尺度；
4. 对于平台，分享是口碑营销最好的手段；
5. 对于平台，举报是用户监督内容质量的一种常见方式

用户评论流程

用户在内容详情页去进行评论的相关流程

 图文发布

一种比较简单的内容形态，内容包含两种元素：文字和图片。

要提供一个页面供用户发布文章

图文内容发布

对于图文内容发布，页面主要包含如下元素：

1. 标题（如果有的话)
2. 文本输入，包括文字、表情等
3. 图片上传，跟文本混合排列
4. 发布和取消按钮

设计要点

1. 标题文本要控制字符长度
2. 图片要控制张数，要支持删除
3. 在没有任何内容输入前，发布按钮灰状不可点
4. 点击取消要做缓冲提示
5. 文字或者图片是不是必须有

4.交互说明

交互说明可以看做交互设计师或产品经理输出的最核心的“产品”；

交互说明面向的“用户”是下游的同事——UI设计师、开发工程师和测试工程师；

基本交互形式

页面交互

 元素控件交互（页面内部）

 交互说明规范

交互说明主要包括以下3个维度：

页面流程：可以表达产品的整体结构，帮助同事了解界面之间的关系。一般来说，页面间的流程要通过原型的结构来体现。

内容布局：

• 页面什么结构，有哪些模块，基本的布局；
• 显示什么样的数据（文本、图片、视频、音频)，显示样式或格式是什么样的?数据从哪里来的？
• 说明不同状态下的显示规则（比如登录、加载、角色、网络、有无内容等)；

交互逻辑：页面中的控件操作有什么效果，会跳转到哪里去;另外还要注意交互的数据逻辑（限制条件）和异常反馈（操作错误)等；

交互说明撰写思路

1. 先写页面有哪些功能模块，比如导航栏、列表等
2. 再每个模块写，看到了哪些数据(图文、音视频等)
3. 这些数据怎么来的，比如用户发布、系统自动生成等
4. 再写数据的显示格式，比如长度、行数、数量、有无等
5. 写完看到什么，再写能做什么，即有哪些操作，比如点击、输入、滑动等
6. 操作的反馈，比如跳转新页面、弹框提示、toast提示等
7. 操作的限制条件，比如不同角色、不同等级、是否登陆、网络状态等
8. 系统操f作的反馈，比如输入错误等
9. 即看到了什么，能做什么。

交互说明规范

页面说明：先将整体页面结构进行划分；如有必要，描述清楚相关路径；

标注＋命名：将原型按照划分好的结构进行标准，并且进行命名；

撰写说明：区域页面描述、区域功能描述；

注意事项：

• 原型要先画默认状态（没有任何操作之前的状态），然后再绘制交互后的效果；
• 产品经理在设计交互逻辑时，为了避免让用户陷入更深层级中，一般要求单流程最多跳三次（特殊情况除外），常见的临时视图不占次数；
• 在设计强制执行页面时（如强制注册）一般不提供其他跳转出口，让用户保持高度专注，形成逻辑闭环，减少错误发生；（慎用）
• 弱执行流程（比如浏览、查看详情等）可提供跳转出口（如分享），增加流量；
• 完成阶段一般可以设置快速返回，让用户更快从深层返回。

页面整体说明

1. 这个是什么页面
2. 包含哪些功能模块
3. 路径：怎么进入该页面

交互说明细节

1. 涉及到颜色、大小尺寸、字体、样式、位置、形状等决定产品外观的描述，可以不用写，交给UI处理
2. 字符规则：1个汉字 = 2个字符，1个字母 / 数字 / 符号 = 1个字符