原型设计注意事项

一、手机端原型设计尺寸规范注意事项

iPhone6的原型规范如下:

1、界面尺寸布局:满屏尺寸750x1334px

2、高度电量条高度40px,导航栏高度88px,标签栏高度98px;


3、各区域图标大小工具栏、导航栏图标44px,标签栏图标50px;

4、各区域文字大小电量条文字22px,导航栏-文字32px,标签栏字20px;

5、常用的文字大小:32px,30px,28px,26px,24px,22px,20px;

6、常用的颜色:背景浅灰色#f2f2f2,文字深黑色#323232,边框色深灰#CCCCCC;

扫描二维码关注公众号,回复: 1865763 查看本文章

7、常用可点击区域的高度:88px;

8、单行文字的背景框的高度:88px,双行则为:176px,三行则为:264px;

9、常用间距:亲密距离:20px;疏远距离:30px,其它距离:10px,44px等;


原型设计中,需要考虑不同屏幕尺寸的苹果手机,在@1x的情况下的适配情况。

比如:

  iPhone5在@2x的像素分辨率、屏幕尺寸是,640x1136px;对应的@1x的逻辑分辨率,屏幕尺寸就是320x568px;

  iPhone6在@2x像素分辨率、屏幕尺寸是:750x1334px;对应的@1x的逻辑分辨率,屏幕尺寸就是375x667px;

  iPhone6Plus在@3x像素分辨率、屏幕尺寸是:750x1334px;对应的@1x的逻辑分辨率,屏幕尺寸就414x736px;

  在做原型时,做成对应的@1x的尺寸即可。

模块区分

模块之间的区分
模块之间利用“留白”、“细线”、或“色块”区分
色块分割:不同属性模块间区分
                  分割线:1px  #e5e5e5

                  色块:10px  #f2f2f2

留白分割:同一模块内文字字段间分割20px

                小模块间分割20px

细线分割:相同属性模块间区分1px  #e5e5e5


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

【页面宽度】
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

猜你喜欢

转载自blog.csdn.net/wrq9653/article/details/79594817