网站原型图设计

1、常用快速原型设计工具大比拼，原型设计工具哪个好用

Principle可能是目前制作可交互Demo最容易上手、综合体验最棒的软件了。
可以手机数据线连接预览（无需网络，支持即时显示），也可以云端直接打开文件。
Mac上支持录制操作，导出文件可选.mov 或 .gif
Principle和Sketch一样，改版后全部使用点作为单位（6Plus＝414*736）
但是图片在导入导出的时候还有些问题，为了确保在Principle最终效果是清晰的，Sketch中画板导出需要*2，贴入P中时再缩小。
Principle最大的优点就是上手非常快，界面和Sketch如出一辙，如果设计稿是Sketch做的，那么从画第一个控件到页面元素动起来整个过程都会是行云流水般。
希望可以帮助到你~~
希望采纳谢谢~~~~~

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

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

3、Axure 设计网站原型时，网站宽度和高度怎么设置比较好

【页面尺寸】网页的尺寸受限于两个因素：一个是显示器屏幕（显示器现在种类很多，17寸为主流，正在朝19寸及宽屏的方向发展，但目前也有为数不少的15寸显示器）另一个是浏览器软件（我们常用的IE、遨游、Friefox等）

【页面高度】高度是可以向下延展的，所以一般对高度不限制。对于一屏来说一般没有一个固定值，因为每个人的浏览器的工具栏不同，所以高度没有确切值。

【页面宽度】
1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001
如果是1024的分辨率，你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点。也方便做一些浮动层的设计。如果是800的分辨率一般都设成770。但也有设成760的。这些需要明白并且牢记，不然很可能做出来不符合浏览器要求。不过一般我们都会设定的再稍微小一点，因为有些浏览器加了插件或者其他的东西宽度会有变化，所以 800的分辨率一般设定760左右，1024的设定990左右。
网页设计标准尺寸参考：
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话，高度是612-615之间，就不会出现水平滚动条和垂直滚动条。
3、页面长度原则上不超过3屏，宽度不超过1屏，每个标准页面为A4幅面大小，即8.5X11英寸。
4、全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px （另外120*90，120*60也是小图标的标准尺寸 ）
5、每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K

【网页广告尺寸】
1、120*120，这种广告规格适用于产品或新闻照片展示。
2、120*60，这种广告规格主要用于做LOGO使用。
3、120*90，主要应用于产品演示或大型LOGO。
4、125*125，这种规格适于表现照片效果的图像广告。
5、234*60，这种规格适用于框架或左右形式主页的广告链接。
6、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
7、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。
8、88*31，主要用于网页链接，或网站小型LOGO。

【广告形式 像素大小 最大尺寸】
BUTTON 120*60(必须用gif) 7K；215*50(必须用gif) 7K
通栏 760*100 25K 静态图片或减少运动效果；430*50 15K
超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果
巨幅广告 336*280 35K；585*120
竖边广告 130*300 25K
全屏广告 800*600 40K 必须为静态图片，FLASH格式
图文混排 各频道不同 15K
弹出窗口 400*300(尽量用gif) 40K
BANNER 468*60(尽量用gif) 18K
悬停按钮 80*80(必须用gif) 7K
流媒体 300*200（可做不规则形状但尺寸不能超过300*200） 30K 播放时间 小于5秒60帧(1秒/12帧)

【网页中的广告尺寸】
1.首页右上，尺寸120*60
2.首页顶部通栏，尺寸468*60
3.首页顶部通栏，尺寸760*60
4.首页中部通栏，尺寸580*60
5.内页顶部通栏，尺寸468*60
6.内页顶部通栏，尺寸760*60
7.内页左上，尺寸150*60或300*300
8.下载地址页面，尺寸560*60或468*60
9.内页底部通栏，尺寸760*60
10.左漂浮，尺寸80*80或100*100
11.右漂浮，尺寸80*80或100*100

4、原型设计的简介

原型设计：

线框图描绘的是页面功能结构，它不是设计稿，也不代表最终布局，线框图所展示的布局，最主要的作用是描述功能与内容的逻辑关系。

原型图是最终系统的代表模型或者模拟，比线框图更加真实、细致。

原型设计的目的：

原型设计的核心目的在于测试产品，没有哪一家互联网公司可以不经过测试，就直接上产品和服务。

原型在识别问题、减少风险、节省成本等方面有着不可替代的价值。

虽然需求文档也是可以满足沟通需求的，通过用例将交互写到设计描述文档中，但是原型可以更详细地解释交互。  

（原型设计在产品设计中所处的位置）

设计流程：首先明确产出原型目的以及用户群体，这个原型有多大效率帮助我传达设计或测试设计？ 有多少时间做原型？其次需要什么级别的保真程度？

目前比较好用的在线原型设计工具有Marvel，Invision，墨刀等等。

希望对你有帮助~欢迎追问~

5、网站交互设计：线框图，原型和视觉稿的区别

首先，他们都是网站的界面和交互方面的模型，但完成度各不相同。

线框图 —— 更多侧重呈现网页界面的主体结构，极易只要的页面跳转和逻辑关系。一目了然的了解网页设计的大致情况。

原型图 —— 原型添加更多的界面细节以及交互，已然是相当真实的网页设计模型，能够进行初略的产品演示和测试。

视觉图 —— 更进一步丰富视觉、细节以及交互，与最终产品十分接近，方便演示和迭代。

当然，设计师设计过程中，使用的工具也会有所不同。例如，线框图和原型图，一般原型设计工具，例如摹客Mockplus, 几分钟就能快速完成。它新出的在线全新升级版本，提供更多模板、组件、交互以及状态设计选择，高还原度原型设计，轻松打造。

6、网站设计前需要制作网站原型图吗

是的，需要制作网站效果图，要吧网站大致效果和框架定好，才能更好的进行一步代码和后台的制作，网站原型图是网站建设前的基础，每个专业网站建设公司应该 都是需要的，这样子才更有思路条理

7、网页设计流程，用画原型图吗？逻辑谁来设计

首先要有网页或者说是网站的需求方提供需求内容。
例如页面要包括哪些，如用户登录，注册，信息展示，甚至在线支付之类的东西。
然后还要有一些具体功能需求，如用户注册需要提供哪些资料，如身份证，地址之类的信息。
信息展示具体是哪些。

有需求方先要写明自己的需求，然后根据需求进行下一步的设计，原型图肯定要画，因为没有图就无法制作网页。
先把图画好，然后和对方商定细节，例如logo的大小，段落间距，字体颜色，之类的细节东西。
画好图并确定后就可以按照图来制作网页。
至于内部后台相关也要商定。
具体由谁来做什么要视情况而定。
例如如果对方公司有美工之类的，可能就直接给你一些素材甚至画好的图让你直接制作。
也有可能需要你自己画图或者找人画图。

8、提供几款界面原型设计软件

做界面设计如果没有好的工具进行辅助，那只会导致事倍而功半。下面推荐几款不错的界面原型设计软件：

界面原型图绘制工具 Pencil

Pencil 是一款开源的原型图绘制工具，手绘风格的，就像自己在纸上画的那样。Pencil 还可以用来绘制各种架构图和流程图，同时还提供 Firefox 的插件。

开源原型设计工具 Framer

Framer 是一个开源原型设计工具，使用 CoffeeScript 编写。支持动画效果和交互操作。

基于 HTML 的界面原型库 Shireframe

Shireframe 可通过 HTML 实现界面原型的绘制。基于 AngularJS 和 jQuery 驱动，使用 RequireJS 进行模块加载，使用 Bootstrap 进行展示 

原型制作软件 Axure RP

AxureRP 是一个快速原型制作软件，由美国Axure Software Solutions, Inc.公司开发。 Axure RP 能让操作它的人快速准确的创建基于Web的网站流程图、原型页面、交互体验设计、标注详细开发说明，并导出Html原型或规格的Word开发文档。

软件界面原型设计工具 UIDesigner

UIDesigner，简称“UID”，是一款进行软件界面原型设计的工具。 它拥有强大的模板和预制功能，能够快速的搭建起软件界面的高保真原型。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通，减少不必要的工作内耗。

产品原型设计工具 Mockup

Mockup 是一款手绘风格的产品原型设计工具，在短短的几分钟内，用户可以创建一个模型。采用 Vala 语言开发。 应用程序使用从工具条中拖放对象到虚线带白色区。

产品原型设计工具 Balsamiq Mockups

Balsamiq Mockups是产品设计师绘制线框图或产品原型界面的利器。在产品设计的需求阶段，低保真的线框图或者草图设计介于产品流程设计与高保真DEMO设计之间，在Balsamiq Mockups出现之前，流程图可以使用Visio，高保真DEMO可以使用Axure，但我们并没有好用的草图设计工具；在产品设计管理中，我们通常在产品的业务流程和数据流转已经相当明确时才开始进一步考虑产品的结构层和框架层，虽然此时纸、笔、白板都是非常简单方便的交流工具，但是他们的最大劣势就是——很难将有价值的原型保存下来。Balsamiq Mockups的出现完美的解决了这个问题。

最后需要说的是，无论是推崇手绘，还是喜欢原型软件，做界面设计最重要的还是想法，工具只是用来帮助实现想法的。不必过于追求技术，也不必过于追求视觉表现，有时只需要专注于产品逻辑、页面交互、布局结构这些，其余的就交给美工。

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

1、画原型之前，先理清后台管理的功能模块，通过树状结构图来帮助自己划分页面和模块。
2、理清模块之后，就可以着手设计后台管理系统的骨架，老渔哥认为可以分为三种：主模块（主要分为哪些独立的功能模块），次级分类（每个功能模块又有哪些次级的功能分类），功能事件（具体到每个功能页面内存在哪些主要的操作）
3、思维导图帮助理清思路很有帮助。
4、思考的路线应该是自上而下，在进行模块划分时不要拘泥于具体的某个界面的展现形式。