网页设计原型（网页设计原型图是什么知乎）

本文目录一览：

1、关于网页和移动端原型设计的方式
2、如何设计出色的网站后台原型
3、什么是界面原型
4、如何进行web页面原型图设计
5、网站原型设计工具有哪些

关于网页和移动端原型设计的方式

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

网页设计原型（网页设计原型图是什么知乎）

如何设计出色的网站后台原型

要制作一个优秀的后台原型，我认为主要就分为三个部分：

对于后台功能模块的结构和页面逻辑有清晰的认识

2.能够熟练的使用原型工具

3.优秀的设计风格和设计规范

1是基础，2是进阶，3则是让原型变得出色的点缀。

怎么样保证后台的功能结构和页面逻辑的清晰合理。

很多人画原型都有一个习惯，就是不管想没想好，直接就开始打开原型工具先拉几个框，或者就照一个自认为非常不错的网站后台开始照葫芦画瓢，这在我看来都是极其危险的。网页后台不同于一般的web界面，他对于功能模块的划分和页面的逻辑要求是非常高的。一方面网站后台的层次结构相比之下要复杂的多，另外一方面，网页后台的功能更偏向于对前端页面的管理，这就导致了功能之间的关联性和引导可能就要弱得多，这样的情况下，如果没有很好的理清后台的结构就开始画原型，那么最后做出来的后台管理系统很可能就是功能的堆积，功能易用性和操作的流程性都很难得到保障。

绘制后台原型时时刻谨记的：

画原型之前，先理清后台管理的功能模块，通过树状结构图来帮助自己划分页面和模块。

amp;lt;img src="" data-rawwidth="1423" data-rawheight="676" class="origin_image zh-lightbox-thumb" width="1423" data-original=""amp;gt;

理清模块之后，就可以着手设计后台管理系统的骨架，我个人分为三种：主模块（主要分为哪些独立的功能模块），次级分类（每个功能模块又有哪些次级的功能分类），功能事件（具体到每个功能页面内存在哪些主要的操作），大概的布局方式大概如下三种

1）顶部选项卡划分主模块，左侧边栏划分次级分类

amp;lt;img src="" data-rawwidth="1116" data-rawheight="468" class="origin_image zh-lightbox-thumb" width="1116" data-original=""amp;gt;

2）左侧边栏汉堡包样式的层级分类（偷懒~大概就是worktile的侧边栏样式）

3）左侧边栏二级分类列表浮出

amp;lt;img src="" data-rawwidth="249" data-rawheight="155" class="content_image" width="249"amp;gt;

思考的路线应该是自上而下，在进行模块划分时不要拘泥于具体的某个界面的展现形式。

结构和逻辑的清晰（骨架）功能页面的设计（具体到某个页面怎么设计）优化性质的功能设计（是否需要预览，实时存储等功能）用户体验

必要时，可以牺牲用户初次使用的学习成本，初次使用的学习成本是可以为用户熟练掌握后的使用效率让步的,尽量遵循亲密/对比/重复/对齐的四原则。

对于重要但是不知道如何放置的功能，可以考虑放在顶栏的右侧，而不是放在主模块上

频繁的弹窗并不是好的选择（必要时该弹还是要弹的），如果可以的话，展开和右侧浮出半页都是不错的解决方式。

什么是界面原型

界面原型就是在需求分析阶段,完成用例过程中,或者完成用例后进行设计, 协助需求分析。

界面原型设计工具

GUI Design Studio

* 最新版本：4.5

界面模型设计中很实用的一个工具GUI Design Studio，可以让界面示意图实现基本的交互，便于演示、交流。推荐需求、软件界面设计开发等界面原型相关人员使用。

GUI Design Studio提供的了大部分C/S、B/S组件的示意图，可组合使用，在一般软件界面模型设计阶段基本可以满足需要。

Axure RP

* 最新版本：6.5

无疑是目前最受欢迎的快速原型设计软件，它是一套专门为了网站或者应用程序策划所设计的辅助工具，可以让应用网站策划人员或网站界面设计师，更快速且更简易的建立Web AP和Website的示意图、流程图、原型和规格。

Axure借鉴了office的界面，能够让用户快速上手，并且提供了丰富的组件样式修改，使得通过其能够创建低保真、高保真甚至接近于实际效果的界面。

然而最让人称道的是，Axure的丰富的脚本模式，可以通过点击和选择能够快速完成界面元素的交互，如链接、state切换、动态变化等效果，使得

Axure能够生成十分接近于真实产品的原型。另一方面，Axure能够导入其他人创建的元件库，使得Axure能够满足绝大多数类型产品的设计。

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

最后半天心不在焉拖拖拽拽把各个部分都搭建好了，可是做出来的页面惨不忍睹，自己都没勇气打开。晚上回家后和邻居又讨论了三个小时，最后熬夜把原型图完成。虽然最后原型图也没有被采纳，但是这次原型图居然受到了表扬，领导说我的原型图有了提升。今天就写下这篇文章，为这段时间的工作做一个总结。原型设计前：①�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都无所谓，前期的框架和流程思路想好后，后面的原型图也就水到渠成了。