产品案例
产品案例

BOBVIP体育:如何制作实用美观的产品(交互)设计

BOBVIP体育很多产品新人(土司基也是新人--||)经常问的一个问题是“如何写一个完整的产品(交互)设计文档”,所以今天土司基将自己目前工作中的文档编写方式与分享和你在一起也是对自己工作的总结。

土司吉刚进入这个行业时,也遇到了如何写文件的问题。写作方法、工具的使用、文档的结构也发生了变化和变化。后来看到@尤文文写的博文《如何制作实用又漂亮的设计文档》,让人受益匪浅。后来,我也不断地参考优优的文档进行模仿和改进,逐渐形成了自己的文档编写方式。

作为团队的一员,你的工作成果必须交给项目中的其他同事。他将是节目大哥和设计女郎。您必须对处理您文件的同事负责。因此,您的文档必须结构清晰且易于阅读。

BOBVIP体育接下来,我们主要从文档结构、布局和线框图绘制来介绍土司基的产品设计文档。需要注意的是,每个团队都有自己的协作和沟通方式。本文中的设计文档可能并不完全适用于您的团队。请不要拘泥于模板。(请尽量根据自己的需要更改文档设计)

Tusiji 使用的设计工具是 OmniGraffle。它非常适合绘制流程图和界面线框图。还可以很好的输出PDF和目录,适合阅读分享,也很方便其他同事注释PDF。

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

BOBVIP体育提示:OmniGraffle 输出的 PDF 文件会很大(我已经导出了 500M 大小),建议使用预览打开重新导出 PDF,在 Quartz 过滤器中选择“减小文件大小”,可以大大减小文件大小。

文档结构说明

文档主要分为四个部分:封面、变更日志、功能模块、模块中的任务

BOBVIP体育BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

其中,比较重要的是“功能模块”和“模块中的任务”。两者的关系,就像小学作文的“先总后分”形式。逐个拆分“模块中的任务”。这里的“任务”是指面向用户的任务流程。

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

在 OmniGraffle 中,画布以功能模块或任务命名产品说明文档,数字标签用于区分不同的功能模块和任务。比如“创作”就是一个功能模块,这个模块有“拍摄视频”、“拍摄素材”、“合成”、“分享”四个任务。导出PDF时,PDF会根据画布的命名和顺序生成对应的目录。

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

导出 PDF 后,可以显示目录以伴随阅读。如下所示

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

覆盖

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

起初,土司吉的文件并没有封面。但是接下来有些文件需要直接给团队外的人看,在封面上直接讲一些信息是非常有必要的。同时考虑到文档的规范性和美观性,增加了封面。

显示在文档每一页上的项目名称贯穿整个文档。

页码便于阅读定位,尤其是在多人同时阅读讨论时。

最后更新时间,这是一个非常重要的数字,它可以让读者知道他们正在阅读的文档是哪个版本的。土司吉木使用更新时间作为文档版本更新的标识。

文件的标题

团队或所属部门的logo,以及作者信息也可以在这里添加。现在的团队中,只有土司基出产品设计文档,暂时不写大名。

提示:OmniGraffle 有一个内置的方便模板,可以自动更新页码和时间。

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

变更日志

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

这是文件中非常重要的部分。您需要随时记录每一次设计变更,并详细写在文档中产品说明文档,以便读者在拿到新文档后立即知道发生了什么变化。

更新时间和细节。详细信息主要描述了修改了哪个页面以及对应的修改内容。

功能模块

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

“功能模块”页面是一个概要,需要描述该模块中的功能、流程等信息。在这里产品说明文档,您可以显示简单的流程、任务流程图、功能和任务描述等。土司吉在这里展示了整个创作过程的主要步骤。

功能模块的标题,它告诉当前的功能模块,它将贯穿所有属于该模块的页面。页面内容描述,描述页面显示的信息。

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

模块中的任务

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

一个功能模块中有很多功能,需要将任务拆分并分页显示。在这里,土司吉将开始绘制界面的线框,并通过线框表示任务的流程。(复杂的流程需要用流程图来解释)

功能模块的标题,它告诉当前的功能模块,它将贯穿所有属于该模块的页面。任务名称,描述页面显示的信息,通常以任务名称命名,如“拍摄视频”、“注册账号”等。线框编号和标题描述了线框所代表的界面产品说明文档,也可以反映任务的步骤。当多人讨论时,快速定位线框也很方便。对于线框,土司吉一般直接在页面上绘制线框。在文章的最后,图思吉将分享如何绘制线框。点击手势和箭头线指示用于指示操作和界面跳转等交互动作。注释描述,

至此,设计文档的写法已经分享给大家了,接下来涂思吉简单说一下线框图的绘制

兔姬是这样画线框的

1.设置画布大小为1700pt x 1100pt,单位设置为1pt=1px。为什么要这样设置,请参见步骤 2。

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

2、在实际的界面设计中,iOS会有单屏或双屏,Android会有多屏密度。绘制线框时,我们以单一尺寸为基础。比如要绘制一个iPhone4尺寸的界面,可以直接使用矩形工具绘制480x320,并且topbar和navigation tab也是按照iOS标准尺寸绘制的,可以让线框设计更精准,更接近真正的比例,这不仅有利于界面本身。布局和生成的线框也更漂亮(请由UI设计师负责),易于查看和理解。

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

线框界面以320px的宽度绘制。根据当前页面设置,可以并排显示4个线框。你可能会问:我的产品流程步骤多,4个界面不够用,单个页面无法完整展示。如何解决?当时我也有这个疑问,还给悠悠发了私信,他是这样回答我的:

“任何复杂的产品,除了少量的ToB产品,都不能分成小故事。我之前做的一个产品有100多页的文档,也是每页4-5张图。如果有必要产品说明文档,你可以考虑一下。把第一页做成全景图。”

提示:

绘制线框时,请使用单一颜色以避免分散 UI 设计师的注意力。

一些常用的图标或者UI工具包可以提前下载并导入OmniGraffle,在绘图的时候可以直接拖拽选择。目前OmniGraffle已经内置了很多素材,土司基发现Android Design的图标包还是很不错的,点此下载。

多个重复内容可以使用一个母版。具体方法是“复制为PDF”,然后复制。

BOBVIP体育:如何制作实用美观的产品(交互)设计文档)

BOBVIP体育此文档的 OmniGraffle 模板文件下载:Dropbox

Copyright © 2022.BOBVIP体育 版权所有 网站地图
地址:陕西省延安市