打造美观清晰易使用的交互文档.pdf

打造美观清晰易使用的交互文档 在检查交互文档的时候，我有句口头禅是： 这交互稿画得太丑了。“ ”听到这句话的小朋友， 有些回了句 哦“…”，有些则会问 交互稿也要考虑美么，交互稿不是逻辑“ ok 就行了么 ”，脸上是 不甚理解的。 交互文档也要考虑美 为什么交互文档也要考虑美，我觉得有以下几点原因： 不过，对交互文档 美“ ”的定义，还和视觉不太一样。 一份美的交互文档，应该是美观、清晰、易于 使用的，它更偏向于一种逻辑美。 交互文档的内容 所以，一份好的交互文档都应包含哪些内容，注意哪些方面呢？以下内容来自于导师的经验传承， 来自于工作中同事的建议反馈，以及自己的经验。 1 、媒介 PPT 、 PDF 、HT ML…… 你用什么格式输入你的交互文档？ PPT 和 PDF 的好处是看上去正式、漂亮，同时因为每一页的画布尺寸是固定的，不容易看漏东西。 但缺点也是明显的，一张 PPT 没放几个界面就满了，感觉不自由。而且对于动辄几十上百页的交互 文档，缺乏索引。所以，我还是推荐带侧边索引，画布空间不受限的 HT ML 格式。 2 、标识说明 放在文档第一页。 对于初次接触你的交互文档的人来说，这样一份说明有助于对方理解你的交互，尤其是一些非通用 的标识。 3 、修订记录 放在文档第二页。 写明文档的修订者，方便开发找到对应的交互；列出文档更新的具体日期（最近更新的排最前）， 给出被修改页面的超链接，同时写明具体修改的内容。 4 、页面标题 写在每一页的顶部。表明当前页所述的功能是属于哪个模块的，这样看的人不容易迷失。 5 、对齐 对齐让文档可读性更好。 单个界面之中元素的对齐、界面和界面之间的对齐，页面上任何东西都是应该能找到对齐点的。 你的注释的对齐了吗？当年我的导师指出我交互稿里的注释没对齐这一点时，恍然大悟：这都是细 节啊！ 右边注释对齐后，可读性更好 6 、UI ：颜色、线条、留白 （1 ）尽量做到黑白灰不带彩色。 否则颜色和视觉稿不一致，测试会来问到底用哪种。 （2 ）灰色会让交互稿看上去更精致。 避免使用黑色线条，尽量不要出现黑底白字。 看自己两年前的交互文档，虽然也是整齐的，但总有种说不出的复古。 （3 ）用深浅不同的灰来表现层次和重点。 （4 ）合理留白，避免界面过挤或过空。 注意颜色、留白这些细节 讲到这里，有人会问，交互把时间浪费在这种视觉层面的事上有用么？ 我倒觉得这是设计常识，或者你有没有意愿提高自己在这方面的能力。若有，则随手一画就是如上 图右边的界面，何谈浪费时间。你永远无法预测一种技能在未来会派上什么用场。 当然，如果你会用交互组件库（回复交互组件库可查看文章），也会省很多时间。 7 、热区 标明热区的范围。 比如，为了图省事，没有标明右上角 关闭“ ”的热区范围。然后开发就把热区做成和 X 一样的大小了。 就有用户来反馈这个 X 点不中。 正确的表现方法： 对于紧密相连的热区，也有一些表现方法，能让开发看得更清楚： 透明度叠加法 颜色区分法 重复罗列法 8 、图片 使用图片时，要注意和背景融合，避免出现 剪贴画“ ”。 若暂没有找到合适的图标，宁可统一用占位符替代，辅以文字注释。 说到占位符，视觉有话说： 每次交互随手拉一个图片占位符，我都要冥想好久。“ ” 配图，到底配什么图好呢？ 所以，若对图片内容或风格有想法，不要吝啬用各种形式在交互文档中表现出来。 9 、流程图 主线和分支的走向要始终保持一致。 如下图，红框框出的 是“”和 否“”在两次判断中的走向不一致，对看的人来说就不是很好的体验。 正确的流程图表现 界面流程也同样应该做到主线和分支清晰。 流程之间不要隔太多空白，不然开发会误以为这个页面的交互到此为