在线页面原型设计怎么做-如何进行web页面原型图设计

你说的是高保真原型,可以先用PS等设计工具做好界面设计,再上传到摹客转为高保真原型,也可以直接用摹客在线的原型设计工具画高保真交互原型,UE和开发也可以直接在摹客查看图层信息和下载切图,传达意见更准确。

最后半天心不在焉拖拖拽拽把各个部分都搭建好了,可是做出来的页面惨不忍睹,自己都没勇气打开。晚上回家后和邻居又讨论了三个小时,最后熬夜把原型图完成。虽然最后原型图也没有被采纳,但是这次原型图居然受到了表扬,领导说我的原型图有了提升。今天就写下这篇文章,为这段时间的工作做一个总结。原型设计前:①0202 重点突出内容:要清楚明了页面需要突出的内容是什么,这个在前期的讨论中一般就已经确定;②0202 第一功能目的:除了内容以外,功能方面需要突出的是什么?如引导注册或像下一级页面引导流量。③0202 如果是改版要考虑改版要解决的问题是什么?对于前一版页面存在什么问题 画原型图要考虑:④0202 内容板块如何划分,页面的内容主要分成几个模块,每个模块内存放的都应该是一些相近的内容;⑤0202 模块与模块之间的关联性:每个模块与其相近的模块之间应该有一些逻辑上的关联性,而不能随意的进行拼接;⑥0202 页面的流程:模块与模块的上下承接关系,模块与模块应该上下存在某些逻辑上的连接性。 页面完成后:完成原型图后一定要进行检查,主要从以下三个方面进行检查:⑦0202 内容是否完整:对比框架中的每一部分内容检查是否完整;⑧0202 第一屏是否把最重要的内容展现出来:页面第一屏以外的内容基本都是辅助内容,如果不能在第一屏就把内容全部展现,基本上就等于内容不完整;⑨0202 功能是否实现:想要表达的功能是否在明显的地方表现出来;⑩0202 流程是否顺畅:把相应的流程走一遍,看是否流畅。 注意tips:①0202 未完成的作品拿出来讨论页面不完整不代表思想不完整,即使是不完整的页面,里面应该也要有一个清晰的逻辑图。通过这种方法可以强迫自己想明白再下手。②0202 理清自己的思路要有属于自己的清晰思路,对内容、功能和流程自己要先想明白,可以列举一些具体的问题来辅助理清自己的思路。③0202 坚持自己的想法每一个人都有自己的想法,只要你理清自己的思路,就一定要坚持下去。用自己的逻辑解答别人的疑惑和质疑,形成自己的思路。 关于工具和作图:之前花了很多时间去研究axure,是学会了一些作图的技巧,可是渐渐发现这些对页面的提高基本不大,我是觉得在掌握基本的工具使用时可以暂时忽略工具。页面最重要的是你的想法,等到想法成熟之后不妨慢慢的考虑工具的深入,太多的考虑技巧方面的问题反而会模糊视线。思考的过程和画图的时间可以在7:3都无所谓,前期的框架和流程思路想好后,后面的原型图也就水到渠成了。

明确目标

既然是做原型的角度,我们就从具体工作来谈,首先要明确的肯定是产品目标,比如以下几个问题:

是全新的产品,还是更新改版?

有没有相匹配的前台系统?或者其他需要配合的线下资源?等等

业务层面的目标是什么?新增功能?体验优化?等等

需求分析

明确了产品目标,在做需求分析的时候就会有所侧重,总的来说,值得关注的有以下几个要素:

1、角色权限

这个非常重要,一定要在具体设计之前熟悉管理后台的所有类型用户。包括一共有几类用户,他们各自的使用需求,操作权限,还有用户权限的设计。

2、信息架构

一定要画信息结构图(即产品层面的数据模型),主要用于理清产品结构。画一下脑图,列一个excel表单,详细程度依据自己习惯即可,需要和用户配合起来设计。

这个是和普通原型设计比较不同的一点,如果是改版还需要特别标注和旧版的区别,以及旧数据的清理或迁移方案。另外,还需要考虑和其他资源(前台、对应页等)的配合,数据流向以及状态转移等。

4、功能流程

常规需要考虑的用户流程和业务规则流程。根据不同的业务目标,用户流程可以按场景或功能进行划分,给予部分用户适当的优化。业务规则流程需要保证逻辑清晰,闭环,不要遗漏异常流(闭环很重要)。

原型设计

终于可以开始原型设计啦,现在各种管理后台的主题模板都有很多,没有特别需求的情况下,和开发沟通好选择一套“抄”即可。

设计过程中注意一下导航,列表(增删改查排序筛选)等,细节上不要遗漏预览、错误/成功提示、新内容提醒、快捷键等