Question

如何进行web页面原型图设计

Answer 1

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

Answer 2

简单来说，产品经理进行页面原型设计时，只需要把业务逻辑和交互逻辑讲明白，不需要做得特别精美，而是要把握重点，把重心放在分析用户需求、规划产品功能上。之后交互设计师可以根据产品经理的原型图进行设计。
从使用工具来看的话，产品经理在做原型时其实只需要Mockplus或摹客原型这样的快速原型设计工具。只要提前想清楚主要的功能点和交互逻辑，使用工具内置的现成组件，十分钟就能把原型做完。
交互设计师需要做的是根据产品经理绘制的原型版和相关产品文档，绘制高保真原型，通常交互设计师会使用PS、sketch、XD之类的设计工具，在完成页面设计后上传到摹客等协作平台添加交互。完成后也可以直接发链接给其他成员审阅，这时候主要看的就是原型呈现的视觉效果了。