架构|手把手教你撰写交互设计文档( 三 ) ui设计

一般情况下，像日活数那些简单的数据可以直接问后台同学就能获得，而用户某些环节的存活率、转化率等就需要利用【数据埋点】，市场上也有很多第三方做数据埋点的，例如神策数据、Growing IO等，这里就不展开说了，但是面试的时候你能说出这些就会显得很专业。

文章插图
8. 信息架构（必须）信息架构属于用户体验的结构层，就像产品的骨架一样，而信息架构设计就是对产品信息进行构架、归类的设计，信息架构能够防止我们对产品功能点遗漏，同时也可以通过产品大体的信息架构观察出产品设计是否合理。
一般来说（干货来了），产品架构分支可以分为度和层，而好产品的信息架构在广度和层度都是恰到好处，下面我举两个反例大家就懂了。
产品架构的广度太广（不懂的看下图）：信息架构的广度太广意味着页面的承载信息量特别的多，没有侧重点，这样用户点进页面后会思考很久而不知所措，最经典的就是某某宝和某同城，新用户进入到首页真的模棱两可。

产品架构的层太深：信息架构的层太深会导致另外一个问题就是页面非常的多，要找到一些功能的话操作非常的困难，最常见的就是某些视频的取消会员流程（包括当年的ofo退费），你们是不是为了退费或者取消某APP会员百度过很多次？

反过来思考，如果某些功能你不想被用户发现，但是又必不可少的话应如何设计，你懂得。

文章插图

文章插图
9. 业务流程图（可选）绘制业务流程图的目的就是：梳理并分析优化业务流程。我知道很多同学做UI设计师的时候可以完全不管业务，直接做设计，但是作为交互设计师了解产品业务是非常重要的，因为不了解业务你就无法完成交互设计，优化业务场景。
举个例子：在教育考试系统中一般流程是：教育局出通知→学生报名考试→老师审核→报名通过→老师编排学生考试名单→学生开始考试对号入座→教育局公布成绩→学生查询成绩→考试结束，看这一些列的流程。
因为关联特别多，如果对业务不熟悉的话设计起来会非常的不便，如果前期因为业务流程不熟悉而设计出错误的交互稿的话，后面就会特别麻烦。
那么如何去绘制完整的业务流程：
如果你的产品经理比较专业的话，可能会直接给你一个现成的业务流程图，那样就能省事很多。
要是没有产品经理的话，最直接的就是问用户，这里介绍我最常用的方法就是“一听二问三确认”。
一听：先听客户代表或者业务方的介绍。听得过程中，不打断对方，以最简单的方式勾出主体脉络，即基本要素中的角色、活动、协作关系梳理出即可。
二问：完成上一步后，就可以进行提问了。主要是沿着流程进行发问，重点放在分支、产物关系上。看看是否存在分支的情况，各协作之间是否有交付物。一边问，一边修正。
三确认：最后一步就是自己讲一遍流程，和客户代表或者业务专家进行最后的确认。

文章插图
10. 交互原型（必须）几乎可以说，上面所有的东西都是为了完成交互原型做铺垫的，我相信对大家来讲交互原型都非常熟悉，但是给大家分享几个经常犯错的点。
【1】页面尽量只采用黑白灰配色，避免干扰UI同学设计。这是大家经常犯错的一个点，毕竟很多同学以前是UI出身，做交互稿时也顺便配配色，这样会非常影响UI同学设计的（不在其位不谋其政，你做UI的时候也不希望有人在旁边指指点点吧）。
所以我们做交互稿时只采用黑白灰就够了，灰度大小就代表信息的重要程度，简洁规范即可。
【2】页面的跳转用连线表示其实就很方便了，真正厉害的人不会到处炫技。有些同学在交互稿上各种跳转、动态面板、中继器等花里胡哨一大堆，这样开发同学看起来特别的难受，所以很多时候用连线的方式表示往往是最简单明了的。
【3】如果涉及到多端设计（IOS、Andriod、PC端）的话，除非产品非常庞大，不然就放在同一个设计文档中，避免以后评审还要弄多个文件。
【4】创建一个适合自己的组件库，在日常设计中，80%的控件是可以重复利用的，做一个合适的组件库能节省大量时间。

文章插图