视频设备web管理系统

基于刚结束的公司项目，想做一些交互UI设计工作流程上的梳理～

首先简单的描述下项目，另外做交互设计对公司的产品业务要有一定程度上的了解；

·项目描述：

设计编解码器的web管理页面, G-Link 4K编解码器一般以一对的形式出厂被购买;

从《1.1 开机后自动连接》《1.2 自动连接失败、手动连接》《1.3 手动Live和stop》《1.4 更换配对设备》《1.5 修改参数》《1.6 恢复出厂设置》《1.7 快速指南》这7个流程结构，绘制原型UX和UI图～

·产品属性调研：

1. 4K 的6大元素：

3840*2160分辨率、50p帧率、HDR(高动态范围，亮的越亮、暗的更深，增强“深度和立体度，立体感”)、BT.2020色彩空间(色彩更丰富)、支持10bit色深(颜色更加丰富饱满、色阶过渡更流畅)显示，以及5.1环绕立体声。

2. 现阶段编码器的工作情况：

目前只要有camera接入就可以进行编码，但也可以考虑被控制，比如解码器让什么时候编就编，什么时候停就停；

比如观看网上的视频直播，编码一直在编，如果这时有人去看他的直播，就解码了。（grid上就是编码器编码，把流推出去，谁想看就可以去拉流看一对多）；

但对于GLink，一对一的形式，如果没有解码器，只是编码就没有多大意思，所以期望开始传输的时候就开始编码，不传输就不编码。

encoder和decoder两端的“stop”和“live”按钮的含义：停止传输、开始传输；对于用户来说，“传输”是一种状态，对于开发来说，我们要给“传输”制定一个规则：什么操作能够触发传输，什么操作可以停止传输。项目中，涉及到编解码器两边的设备，而“传输”是二者之间连接且正常工作的状态... ...(此段业务内容可忽略哈)

(还有很多基础知识点的了解就不一一列举啦)... ...

·总结一下在公司的关于UED工作流程整理：

1. 分析PRD，用XMind/Axure整理产品架构和功能元素的任务流程图(工具没关系，用的顺手就行)；

tips: 先画主要流程，再把异常流程补上，查补缺漏

2. 手稿绘制，能快速出图表达结构框架和内容元素，方便初步需求会议的讨论和修改(有点丑哈哈哈)；

3. Axure绘制原型图(页面流程图)，结合竞品分析、用户历史操作经验；

设计中也有很多在与相关业务部门或技术部门了解产品属性与功能的过程中，需要结合商业目标，用户需求等多方角度去权衡取舍的地方；

比如一个产品已有属性与功能：encoder上画面区既可以显示camera源视频也可以显示解码后的数据，但不显示编码后数据与画面；decoder上画面区只能显示解码后的数据。

画面区有两种状态：video画面和缺省图；相比于编码器、解码器单独具有的属性，用户可能会更关注于他们一起工作传输时的状态，考虑这种用户需要知道的信息优先级，

所以希望encoder、decoder web页面的画面区仅显示解码后的画面；便于用户一眼即能分辨是否在传输，毕竟只知道编码器单方面的数据也是没有很大意思的。

... ...

其实也就是在已有产品属性和功能定义/规则的基础上做优化和修改;

4. UI效果图的绘制；

切图标注上传蓝湖，图标上传至iconfont，占内存小，方便开发使用；

交互思考中，尽量思考用户可能出现的异常操作，异常状态，不同状态下的使用的页面反馈；也就是所谓的操作动线，先把“线”想到，再去思考与用户交流的设计语言，交互形式，简洁易懂的设计语言离不开平时的积累与思考。(要激励自己不断学习才行呢)

(上传部分UI图)

5. 另外两点，有的公司会需要用户体验设计师邮件定时email领导同事，汇报项目进度，一般可能邮件中大致描述下，然后发送Google Drive(原型)链接，蓝湖(UI效果图)链接就完事了；

如果邮件中整理一个交互、UI进度表，对整体进度上会有更加直观，对于领导来说，也能更好的把控项目进度；

最后，由于公司是外企性质，所以对于UED来说，整理中英文翻译文档也是一部分的工作内容了；

将页面上的出现的所有文案信息均以表格的形式整理成文档；

B端后台设计区别于B端移动app设计，不仅仅是终端载体带来的交互行为的区别... ...

之后的目标想要整理关于此主题的文章，那么有缘见 (哈哈哈)～

谢谢好看的你们还愿意给我点赞👍