web产品的交互说明文档应该怎么写( 二 )


你可以找一款优秀的APP,去研究它如何设计这些细节,是否还有我没有提到的点,研究透了下次自己设计才能做到更加全面 。当然,交互细节说明,只是方案的表述,每一个小点都有好几种设计方案 。
如何权衡选择体验更优的方案,才最是考验交互设计 师的能力 。你可以对比研究几款优秀产品,看它们在细节设计有何不同,分析其中的缘由,想想是否有更好的方案,学无止尽 。
如何提升交互文档的浏览体验 交互设计 师的目标是提升产品的体验,我们输出的文档本身也应该有上佳的浏览体验 。为了达到这个目标,我也在不断优化文档的撰写方式和排版 。
下面聊聊我尝试过的几种方式 。方式1:一页纸表示所有的线框图,配上箭头+简单的文字说明 网上流传着很多这种风格的图,最初觉得这样的图很有范儿,以为这就是他们输出的全部交互文档,所以按照这种模式产出 。
等到自己做的多了会发现这类图大多只表达了某个界面的正常状态,并没有详细的交互说明来体现界面的内容布局和交互操作反馈 。方式2:一页一个界面,每个界面建一个交互说明文件夹,分功能模块写交互说明(Web产品) 工具: Axure Web产品的特点是,层级复杂,每个界面比较大而且内容很丰富 。
通常会组织好页面层级,再画每个界面的原型,待几轮讨论过后界面布局和内容基本确定之后,再为每个界面撰写各自的交互说明 。考虑到每个界面中的内容模块和功能点不少,我没有在确定好的界面上直接标注交互说明,而是将这个界面划分为几个功能模块,并给每个功能模块新建一个页面用来写交互说明 。
如下图,分别是 Ax 。
2.如何写一份交互说明文档我用的摹客来写交bai互说明文档,感觉是为产品团队量身打造的文档工具,支持在线撰写或上传本地文档 。
文档可以和Mockplus、Axure的原du型图和Sketch、Adobe XD、PS的设计稿互相引用,相互论证 。也支持自动生成历史版本,可随时追溯和查看 。完成后可以直接生成链接分享给同事zhi,同事可以在上面选中文字评论,审阅很方便,哪里有问题也可以随时查看修改 。
文档结合设计稿或原型图,可以更加清晰地阐述dao交互逻辑、设计思路、功能专范围、页面细节等等 。团队领导也可以根据产品需求文属档清晰了解为什么需要开发这样一款产品 。项目的其他相关方也可以随时参阅需求文档,了解项目的基本信息 。
3.一个网站的交互文档该怎么进行撰写1.首先做到有效的沟通:
和UI沟通页面用的什么栅格,文字大小、颜色,通用的样式等
和产品经理沟通产品的流程,用户操作流程,业务需求等
前端和开发一起沟通一些具体的交互动作哪些属于服务器异步,哪些属于刷新页面等
这样会减少一些BUG和开发时间
2.原型图:
主要的功能做完后可以先给开发看一下,这样他们能提前进入一些功能的开发
我个人在用axure做原型的时候,第一页:修改记录,第二页:会把一些通用的东西提出来放进去统一说明,第三页:功能点复杂的就配上页面流程图,下边就是具体的页面原型,简单的动作顺手就做了,复杂的就分开表示,写上详细的说明,如涉及到表单验证会单独的写一份表单验证说明 。
可能说的比较乱,凑合看吧,欢迎讨论
4.一个网站的交互文档该怎么进行撰写1.首先做到有效的沟通:和UI沟通页面用的什么栅格,文字大小、颜色,通用的样式等和产品经理沟通产品的流程,用户操作流程,业务需求等前端和开发一起沟通一些具体的交互动作哪些属于服务器异步,哪些属于刷新页面等这样会减少一些BUG和开发时间2.原型图:主要的功能做完后可以先给开发看一下,这样他们能提前进入一些功能的开发我个人在用axure做原型的时候,第一页:修改记录,第二页:会把一些通用的东西提出来放进去统一说明,第三页:功能点复杂的就配上页面流程图,下边就是具体的页面原型,简单的动作顺手就做了,复杂的就分开表示,写上详细的说明,如涉及到表单验证会单独的写一份表单验证说明 。