产品交互自查笔记#01框架布局
正文之前自己闲扯几句：最近团队内部正在做一个新的产品，而在做这个产品的过程中，慢慢暴露了团队在于磨合上，分工上的一些问题。可能是因为时间太紧、沟通不足等原因。产品承担着大部分的压力，而急于下决定，急于画线框图，而对于产品方向上的问题并没有进行详细地说明。几个星期下来，大家还是有种我们到底要做什么的状态，一切都处于摸索的状态。而其他人在这个过程中没什么参与感也成了一个很大的问题。
后来情况有些好转，产品运营这边开始分工调研，寻找差异化，找突破点，建立用户模型使用场景等。设计研发也能适当地参与到了讨论之中，在这个过程中我们也算是找到了一丝丝方向。
一直很希望经历一次产品从零开始的我，在这个过程中也让我更加理解了用户体验五要素。大家有时间可以看看，这里也贴上书籍下载地址。
这是一个非常经典的框架体系，它包括战略层（产品目标、用户需求）、范围层（功能、需求分析）、结构层（信息架构、页面流）、框架层（页面布局）和表现层（视觉传达）。在一个实际的产品开发中，战略层及范围层主要由产品经理负责，而结构层和框架层则由交互设计师来完成，表现层由视觉设计师完成。但我们团队中没有交互设计师这样一个职位，所以结构层和框架层我们是由产品和设计共同合作来完成。
前期产品及运营的同事大致确定了产品的战略层以及范围层，接下来需要做的是结构层以及框架层的东西，这里解释一下这两个层的概念：框架层是针对于单页面的结构设计，而结构层则是将单页面连接在一起，从而形成了系统。
而在这一篇文章中，主要讲的是产品的框架层。分为4个部分来讲
框架结构
信息层次
信息组织
功能操作
框架结构
①能否承载产品功能？
是要采用列表、宫格还是图表等，都要基于设计的目的、产品功能、用户画像、使用场景等这些去考虑。想想当前设计的框架是否适合承载这些产品功能，有没有更好的方式去呈现，以及尽可能地想到页面会存在的问题。大的框架对于整个产品来说是很重要的，一个应用也不可能一开始就做到十全十美，后续可能对进行优化，但一般是基于大框架的基础上进行调整。
②明确点击区域
• 用户是否明白是可以点击的。
举个例子：下图是我们团队负责的一个项目，我们做这个页面的时候就遇到这种情况，红蓝两个模块是可以点击的，但很多用户并不知道，所以一开始数据表现很差，后面我们优化的时候增加了箭头以及浮起来的小动画以及投影后数据很明显就上去了。（虽然可能不是最优方案）
（补充：同时要避免非点击区域而让用户感觉想按钮的情况）
Ace cleaner
• 点击区域问题
这也是一个经常会遇到的一个问题。研发的同事把设计的页面实现出来以后，一般会让设计这边过一下，然后你在操作的时候发现，某个按钮点击后无反应，那一般有两种情况。一种是：研发这边实现的问题，还有一种是你点击区域大小设置的问题。
在MD设计规范里面写到：为了确保平衡信息密度和可用性，触发区域大小至少是 48 x 48 dp。在大多数情况下，触发区域之间应该还有8dp或更大的间距。
MD中关于 触发区域大小 一章
③ 内容区域等是否合理统一？
这个是从我组长那里学来的。如果是开始一个新的产品，先提取该产品的主要页面先做，比如：主页、二级页面、侧边栏以及弹窗等，并在这个过程建立基础规范，页面样式重复可以后续再完善。这样在时间相对较赶的情况下，研发可以先着手把产品的框架搭建起来，而团队中有其他的设计人员的话也可以进行更好的合作。
信息层次
①信息层次是否清晰
明确任务的优先级别，对于想让用户第一眼看到或完成的任务需要在设计时进行合理凸显。拿cm来举个例：从主页来看，有一个一键清理的大按钮以及4个主要的功能，为了让用户进来后第一时间去点击一键清理按钮，在上面做了一些小动画，包括外圈3个圆的转动，冒气泡等。而且在完成提醒也和主页相呼应，做得还是比较完整的。
CM Security主界面
②表达是否清晰
能清晰地表达想要传达给用户的意思。举个手机清理软件例子，大部分的清理软件中会有一个通知栏管理的功能，能够帮你将应用通知管理起来并可以快速清理，要开启这个应用呢需要用户转到内部开启权限。各个应用会采取不同的表达方式，比如说clean master和Power clean在引导上做得算比较好的。它们用动画进行展示，告知用户我正在把你的一条条信息都收起来，并且你可以一键清理掉。虽然文字表达不太一样，但目的都是一样的，都是让用户更加理解你这个功能的意义，以及引导用户去开启权限。而有些应用就说得不明不白的。所以做这些的时候也要多去看看竞品是怎么去做的。
信息组织
这个概念会比较泛。我理解的信息组织，大范围来说是你需要将所有页面组织起来，形成一个系统。小范围来说将单个页面的信息进行有序地排列。这是一项重要的能力。有逻辑有序的信息组织能让用户更加有效率的进行应用的操作。
① 确认逻辑是否通顺
② 是否可以将信息合并归类
上段时间有个研发的同事来问我，他说他们团队的研发老大让它整理一下debug的列表，目的是为了让其他的同事（研发、测试）能够快速找到需要调试的功能。如果是你你会怎么做。
我第一个想到的就是要将内容进行分类，方式可以通过标题，颜色等方式进行区分，再者就是任务的优先级了。对于功能众多的一个页面，比如说支付宝的应用列表，google play等，如果没有分类，简直不敢想象。
③ 页面的信息承载量会不会太大
④ 视觉焦点是否明确
...
功能操作
① 是否易操作
考虑常用手机型号尺寸，用户在各种使用场景下能否快速触发。比如以下情况
– 移动情景下，注意力容易被分散（如交谈，观察周围环境等）
– 移动情景下，操作手机的时间碎片化（各种事情打断）
– 移动情景下，任务容易被中断（意外情况影响）
– 移动情景下，肢体可能被其他物体被占用（如遛狗、拎包等）
– 移动情景下，噪音分散注意力（车水马龙、人声鼎沸的路边）
...
② 重要、频繁触发的功能按钮是否在手机的可操作区域
不同的产品对应的用户场景和操作流程是不同的，而在设计的过程中同样要考虑各种影响因素。在设计产出后再回过头来检验一遍方案是否真正满足用户需求？
好了大概以上这些，内容可能还有遗留，后续还会陆续补充..
