大厂交互设计标准!交互设计文档范例模板。

交互设计文档,也叫 DRD,是交互设计师将抽象的产品需求,转化为具体的界面方案、展示页面细节的说明文档。一个好的 DRD 不仅能帮助团队了解需求背景、设计方案等,还能极大提升交互或产品经理的专业性。

所以老和这次为各位提供一个「超强交互设计文档」参考,几乎涵盖了整个需求/项目过程,帮助你在面试或者工作输出时有一个好帮手。大致目录如下:

大厂交互设计标准!交互设计文档范例模板

文档说明

1. 封面

大概绘制一下文档简介,好让同事打开后 知道是 xxx 项目的交互文档。

大厂交互设计标准!交互设计文档范例模板

2. 图例说明

让浏览者对文档的介绍模式/细节 有一个大概的总览,特别是新手接入时,能知道你列这些图例是什么意思。

包括:页面跳转图例、标签图例、流程图图例、操作手势图例等等

大厂交互设计标准!交互设计文档范例模板

3. 更新日志

记录每次修改的页面和地址,并做好页面链接。并建议有最新修改的地方打上 "新"的标志,方便同事感知是哪个页面。

大厂交互设计标准!交互设计文档范例模板

项目说明

1. 项目简介

大致写下项目背景,我们为什么要进行此次设计。以及简单说下项目范围:要实现哪些功能或优化点,甚至是下一版本的规划与发展。

大厂交互设计标准!交互设计文档范例模板

2. 项目进度

加分项:自己记录或找产品/项目经理了解当前的项目进度。在工时计算、人力安排等给予更直观的完成度和进展概览。如某一周里进行了哪些事项,如果有重点会议内容也可同步上去。

大厂交互设计标准!交互设计文档范例模板

3. 评审记录

这个也是加分项:可记录一下每次评审的进程与重点内容,再附上重点参会人员,进一步提升的项目的了解和熟悉程度。包括:产品/设计 组内评审、多方参与等情况

大厂交互设计标准!交互设计文档范例模板

需求解析过程

1. 用户调研

若有涉及到相关数据、结论可以展示出来(调研/竞品/线上等),以提供更强有力的数据证明。

2. 需求分析

基于项目、用户、设计这 3 个维度梳理出详情分析过程。

A. 项目

项目目的:为某些人提供某种产品或服务,从而获取某种价值。

项目目标:预期可衡量价值的指标,多为产品数据的反馈,如转化率。

大厂交互设计标准!交互设计文档范例模板

B. 用户

用户类型:包括用户类型、基础信息、特征信息。

用户痛点:包括行为诉求点、操作动机、阻碍点。

用户场景:包括场景类型、场景描述。

大厂交互设计标准!交互设计文档范例模板

C. 设计

设计目标:如统一操作认知、缩短交互流程等方案概括。

设计方案:如可复用平台组件、或运用 xx 达到 xx 效果。

大厂交互设计标准!交互设计文档范例模板

如果有涉及到其他方面的条件或限制,如时间/人力资源、业务限制、技术限制等,也可附加说明出来。

大厂交互设计标准!交互设计文档范例模板

页面交互方案

1. 任务流程图

基于需求分析后发设计方案,梳理其中所涉及到的流程节点。特别是关联不同用户角色、场景下的梳理。

大厂交互设计标准!交互设计文档范例模板

2. 页面流程图

待页面设计完成,可根据需要/团队习惯,决定是否输出一份整体页面的流程预览缩略图( 只针对核心/重点流程),以便整体感知整个页面流转走向。

大厂交互设计标准!交互设计文档范例模板

3. 信息架构图

梳理设计方案下所涉及到功能模块、层级,有利于理解不同功能模块之间的关联性。

大厂交互设计标准!交互设计文档范例模板

4. 交互原型

这个好理解,基于任务流程、信息架构下设计相关页面方案,注意区分层级即可。

大厂交互设计标准!交互设计文档范例模板

全局通用说明

这一 part 主要展示整个交互原型中所涉及到共性内容 or 补充说明,以便有一个整个认知或方便调取。如:

用户权限说明,展示不同用户角色下的功能

大厂交互设计标准!交互设计文档范例模板

时间/数据格式说明,整理整个方案中所设计到的字段格式

大厂交互设计标准!交互设计文档范例模板

复用页面汇总,包括页面、组件等

大厂交互设计标准!交互设计文档范例模板

常用组件汇总:如一些按钮/列表/导航栏等控件的整合

大厂交互设计标准!交互设计文档范例模板

其他特殊说明,如 AndROId 上的区别点需要强调一下的。

飞机稿,集中存放被 pass 的方案,以便后续可回溯、再次调用。

好了,以上就是交互文档的一些内容点,不一定全部都要嵌用,根据自己实际需要灵活参考合适的内容即可。

作者:和出此严

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/232889.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚重蔚管理团队
上一篇 2023年3月1日 12:30
下一篇 2023年3月1日 12:30

相关推荐

  • 网页设计三招分散用户痛点

    一、 全面多维度的视角 网页设计固然要注重细节质感,但是过於注重而忽略了全面多围度的视角去发现和结局问题。单一的只解决用户痛点并不是合理的,因为割裂了整体,脱离整体去解决或者优化是矛盾的做法! 二、 统…

    2022年6月15日
    0146
  • 聊聊设计网页怎么赚钱,ppt设计怎么赚钱的。

    设计网页和PPT设计都是可以赚钱的,以下是一些常见的方法: 1. 自由职业者:你可以成为一名自由职业者,为客户提供网页设计和PPT设计服务,你可以在各种自由职业平台上注册,如Upwork、Freelancer等,这些平台会将…

    2024年6月28日
    01
  • 轮播图你真的需要用到?

    因为,我们都知道轮播图的点击率通常都低,而且转化的效果也不好。但往往占用了页面最抢眼的大面积位置,所以要真的切实地考虑是否有必要使用轮播图。 首先,设计不当的的话,轮播图很容易被用户是广告图片而已,会…

    2022年6月25日
    0143
  • 小编教你网页设计模板使用需要注意什么。

    网站模板是什么?指的是直接套用已经设计好的网站,然后在后台重新进行对网站的设置,在里面填入相关产品的信息,从而把套用的网站改成成为自己设计的网站,最直接的优点就是操作简单、既省时又省力。因为不同企业有…

    2023年6月13日
    00
  • 走心!移动界面制作需这样打磨细节

    能够让用户快速地使用 动效和微交互是移动界面制作的最好技巧之一。在用户初次使用的时候,流畅而自然的动效能够让用户体验提升,同时还能够贴心地给予用户引导。 突显用户操作之後的变化 移动端界面制作受制於设备…

    2022年6月9日
    0126
  • 什麽类型的网站最活跃?如何提高资讯类网站设计的流量

    什麽类型的网站最活跃?这非资讯类网站莫属。对於资讯类网站而言,用户打开最多的地方,也就是资讯栏目;同时对网站SEO优化而言,资讯栏目搜索引擎蜘蛛访问最多的地方。那麽,网页设计中资讯栏目如何做好风格设计定位…

    2022年6月25日
    0155
  • 快速提升 UI 设计效果的 6 个小技巧 (UI 设计集-8)。

    编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Mark Andrew 的文章梳理了 6 个实用性很强的 UI 效果提升小技巧,是系列文章的八篇,原文最早发布于 marcandre…

    2023年3月1日 SEO操作
    00
  • 我来分享如何利用摄影三分法优化网页设计。

    对于摄影师来说,分三步走的取景布局法是一个非常熟悉的概念。虽然是一个引人入胜的概念,但是在设计网页的时候,几乎没有人会拿三分法来举例。当然,这并不意味着不可能,但这种跨范畴的事情很少被人注意到。所以…

    2023年6月17日
    01

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息