产品汪必备的软件除了Office系列(包括:Word、Excel、PowerPoint、Visio、Project),使用最多的就是MindManager和Axure,MindManager又叫“脑图”、“思维导图”,是将手稿转化为规范性和逻辑性更强的结构图的工具。Axure是根据MindManager的思维导图,进一步画出产品原型的工具,对Axure的功能掌握的越多、越熟练,操作起来才能更加快捷,实现“高保真”的效果。下面小编应用MindManager软件绘制“今日头条”APP的思维结构图,应用Axure软件绘制“360手机助手”APP的原型图。
一、MindManager
首先,应用MindManager的“组织状导图”绘制今日头条的结构框架,组织状导图结构清晰,符合人眼看事物的视线方向,即从左到右,从上到下,而且一眼看起来很清晰。当然,可以根据个人喜好选择自己认为表达起来更加清晰的模板。
组织状导图接下来,开始绘制思维导图。今日头条的导航栏分为4个内容:首页、视频、关注、我的。每个部分又有不同数量的标签,以首页为例,除了搜索和换一批为固定条目,用户可根据自己兴趣选择喜欢的标签,如:推荐、热点、视频、特卖、社会、图片……,小编今天截图发现,APP右下角的换一批消失了,bug?
(1)对于那些需要进一步说明的主题,可通过“备注”(分为水平和垂直两种呈现方式)进行说明。
(2)MindManager还可以发挥项目管理的作用,通过“标记”说明工作进展,如对于“换一批”这一功能,是否存在缺陷,需要进行讨论,可标记一个橙色的旗帜。
(3)一些主题需要附上文件加以说明,可在主题上添加“附件”,如火山直播的功能尚不完善,将有关其功能的介绍放到附件中。
(4)一些情况下,两个功能是相互关联的,如打开我要爆料之后的页面包括爆料功能,可用箭头将这两部分内容关联起来。
(5)在需要将主题和其子主题进行框选,对整体进行总结说明或标注时,可用到“边界”功能,如在首页的新闻list中,点击某条新闻区块的任何位置都可以进入该条新闻的正文界面,可将专题新闻进行整体框选。
(6)主题还可以添加链接,用来辅助说明相关信息,如头条号新闻点击之后的内容,与专题新闻中的头条号新闻被点击之后出现的内容相同,为了避免复制粘贴,更加清晰地展现各内容之间的关系,在头条号新闻上添加一个链接到专题新闻的头条号新闻页面中。
软件截图以上只介绍了MindManager的部分功能,在绘制思维导图的过程中,还需要注意一些原则,如:同一功能用相同的名字命名,不同功能的命名不同;命名尽量能够做到简单、清晰明了;需要备注的地方一定要备注,避免忘记等等。
二、Axure
首先,强调母版的重要性,在做360手机助手的原型过程中,小编一直在使用母版,在不同页面中,出现相同区块时,使用母版可以省不少力气,而且页面整体看起来也会非常完整,不至于碎片化。网上关于如何使用Axure的教程较多,小编说一些关于使用Axure的注意事项。
(1)去网上找Android和iPhone各个型号的手机元件,在我们做APP原型时,手机元件作为背景可以更好地展现出页面的整体感觉,我用的是iPhone6的手机元件。
(2)在做原型之前,首先确定字体样式(一般地,Android中的中文字体是思源黑体,英文字体是Roboto,iPhone中的中文字体是华文细黑,英文字体是Helvetica)、字体大小、文字颜色、图片大小、背景色等基本样式,绘制时注意保持统一。确定页面数量,每个页面的子页面有哪些,页面之间的逻辑关系。
(3)利用元件库内的元件进行编辑,需要其他元件可到网上查找。
(4)需要对整个页面进行说明时,在页面属性的页面说明中进行备注。
(5)由于母版数量较多,须对母版清楚命名、归类整理。
(6)对于一些交互功能,实在很难做出来的情况下,用语言描述即可,比如一个页面切换为另一个页面时,该页面从左侧推出,另一个页面从右侧推入,用软件做出来较为繁琐,或者根本不知道怎么做时,语言描述会更加快捷,毕竟我们的目标是做出原型图,交互功能可以由UI设计师和研发人员来做,当然,能够做到高保真的话还是极好的,一定要保证你的描述能让UI设计师和研发人员看懂!
小编做了6个360手机助手的页面,一大波截图来袭~~~
页面一(推荐——分类):
页面二(推荐——精品):
页面三(游戏——精选):
页面四(软件——分类):
页面五(应用圈——看内容):
页面六(管理):
总结啦~
MindManager和Axure使用起来较为简单,能够很快上手,多多练习,肯定能够学会,but一个大前提是,前期已经做好了需求分析和调研,确定了产品目标和结构框架。Anyway,做产品是一个反复迭代的过程(PDCA循环),产品汪、程序猿、设计狮需要反复沟通磨合,最终才能得到一个靠谱的产品,remember产品汪的最终目标是改变世界!
欢迎评论,欢迎拍砖~多多益善~~~
微信公众号:产品之行(gh_62a6775f458c)
公众号
网友评论