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

要制作一个优秀的后台原型，我认为主要就分为三个部分：
1对于后台功能模块的结构和页面逻辑有清晰的认识
2能够熟练的使用原型工具
3优秀的设计风格和设计规范
1是基础，2是进阶，3则是让原型变得出色的点缀。
如果楼主有架构设计能力的话，后台比前台简单，因为对UI UE的要求不高。
如果架构设计能力不够的话，那就不是前后台的问题了，这本身就变成了一个不可完成的任务。
因为后台本来就是就是环环相扣的地方。所以要求设计者本人必须思路清晰，条理清楚，即使不去画，脑子里也有完整的流程图。整个流程都是顺畅的可拓展的和业务贴合的。如果没有这个基础，那一切都会变成灾难。
然后就是性能了，做数据表的时候一定要考虑好这一点，加上必要的冗余，不要让所有联系最后都变。

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

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

页面宽度

1、在IE60下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE60(或更低)无论你的网页多高都会有右侧的滚动条框。

2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005

3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001

如果是1024的分辨率，你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点。也方便做一些浮动层的设计。如果是800的分辨率一般都设成770。但也有设成760的。这些需要明白并且牢记，不然很可能做出来不符合浏览器要求。不过一般我们都会设定的再稍微小一点，因为有些浏览器加了插件或者其他的东西宽度会有变化，所以800的分辨率一般设定760左右，1024的设定990左右。

网页设计标准尺寸参考：

1、800600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2、1024768下，网页宽度保持在1002以内，如果满框显示的话，高度是612-615之间，就不会出现水平滚动条和垂直滚动条。

3、页面长度原则上不超过3屏，宽度不超过1屏，每个标准页面为A4幅面大小，即85X11英寸。

4、全尺寸banner为46860px，半尺寸banner为23460px，小banner为8831px（另外12090，12060也是小图标的标准尺寸）

5、每个非首页静态页面含字节不超过60K，全尺寸banner不超过14K

网页广告尺寸

1、120120，这种广告规格适用于产品或新闻照片展示。

2、12060，这种广告规格主要用于做LOGO使用。

3、12090，主要应用于产品演示或大型LOGO。

4、125125，这种规格适于表现照片效果的图像广告。

5、23460，这种规格适用于框架或左右形式主页的广告链接。

6、39272，主要用于有较多展示的广告条，用于页眉或页脚。

7、46860，应用最为广泛的广告条尺寸，用于页眉或页脚。

8、8831，主要用于网页链接，或网站小型LOGO。

广告形式像素大小最大尺寸

BUTTON12060(必须用gif)7K；21550(必须用gif)7K

通栏76010025K静态或减少运动效果；4305015K

超级通栏760100to760200共40K静态或减少运动效果

巨幅广告33628035K；585120

竖边广告13030025K

全屏广告80060040K必须为静态，FLASH格式

图文混排各频道不同15K

d出窗口400300(尽量用gif)40K

BANNER46860(尽量用gif)18K

悬停按钮8080(必须用gif)7K

流媒体300200（可做不规则形状但尺寸不能超过300200）30K播放时间小于5秒60帧(1秒/12帧)

网页中的广告尺寸

1首页右上，尺寸12060

2首页顶部通栏，尺寸46860

3首页顶部通栏，尺寸76060

4首页中部通栏，尺寸58060

5内页顶部通栏，尺寸46860

6内页顶部通栏，尺寸76060

7内页左上，尺寸15060或300300

8下载地址页面，尺寸56060或46860

9内页底部通栏，尺寸76060

10左漂浮，尺寸8080或100100

11右漂浮，尺寸8080或100100

我们首先明确两个定义：

原型的定义：

用线条、图形描绘出的产品框架，也称线框图。

交互设计的结果输出，可能是一张纸上的几张图；原型代表着交互设计的结果，当最终实现的时候，交互流程会和原型保持一致；可以理解为草稿或者叫做参照物

原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式。就本质而言，原型是一种沟通工具。

原型设计的定义：

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

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

其次，了解原型设计的作用，主要有两点：

沟通： 因为是原型是需求和功能的具象化表达，所以原型可以辅助产品经理与领导、交互、UI和技术的沟通产品思路。虽然需求文档也是可以满足沟通需求的，通过用例将交互写到设计描述文档中，但是原型可以更详细地解释交互。

测试：因为原型相较于UI稿来说修改更方便，所以原型能提高产品经理的功能设计没通过评审时返工的工作效率。没有哪一家互联网公司可以不经过测试，就直接上产品和服务。原型在识别问题、减少风险、节省成本等方面有着不可替代的价值。

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

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

该如何使用原型设计，那么原型设计工具就是必不可缺的。

又选择什么工具来制作原型？主要考虑以下几个因素（排名分先后）：

1 熟悉程度和获得工具的便利度；

2 所需的时间和精力；

3 可复用的代码/框架；

4 为测试创建可用的原型；

5 价格和学习曲线。

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

希望对你帮助~

有任何疑问可以追问，，谢谢~

---