UI尺寸规范

一、电商页面基本原则

1、界面尺寸:1920-2000px带有底图必须那么大(无底图的1366-2000px)

2、版心:980-1220px

3、Banner高度建议870px;

4、分辨率72px

5、色彩模式RGB

6、按钮高度为文字字高的的2-2.5倍

7、字体

导航:14px

字体:宋体 微软雅黑

字号:12、14、16、18、20px

专题页字体建议是12、14px,电商主页建议:16、18、20px

8、焦点图高度:600px-700px

二、登录框尺寸

1、尺寸:730x320px

2、登录界面的字体:12px 宋体 字体样式无

3、文本框高度为文字字高的的2-2.5倍

4、头标与框高度为20px

三、企业站

1、企业占中颜色尽量控制在三种以内

2、背景色:70%     主色调:25%     强调色:5%

背景有底纹画布大小建为1920-2000px

背景无底纹画布大小建为1366-2000px

4、版心宽度 980px 或 1000px 左右

5、焦点图高度小于580px 底部坐标到580px

6、在做企业站中要使用统一字体:宋体(Banner图除外)

字体字号规范:

1、头部注册、登录:12px 宋体

2、导航:16 18px 仿粗    底色块高度为字高的2-2.5倍

下拉导航与导航为从属关系建议使用小一号字体14px

内容区域的文字一般分为标题和正文两种,可以选择统一字号,用仿粗区分

文字区域到表框的边距一般为10px-20px;

版权信息文字用12px

四、照片尺寸

1、1寸:2.5x3.5cm     5寸:12.7x8.9cm

证件照拼版建议画布大小为12.7x8.9cm

名片规范

横版:90x54mm  90x55mm

竖版:50x90mm  45x90mm

圆角名片:85x54mm

折叠名片尺寸不固定

使用材质:纸张(大于200g)

四色印刷:CMYK      出血值1mm

名片的主要内容:公司名称  LOGO    姓名  职务  联系方式  业务范围

名片的排版:

1、名片边缘留足5-10mm距离

2、logo大小不能小于1cm

3、名片中最小的文字不能小于6px

名片的储存于输出:

1、将所有文字转曲(交与客户源文件)ctrl+a-    ctrl+shift+o

2、交与印刷厂PDF格式,不保留AI编辑功能

3、加入出血值

x展架、易拉宝

1、x展架尺寸:60x160cm  80x180cm

易拉宝:高200cm  宽80  90  100  110  150cm  常见的为80*200cm

展架、易拉宝输出方式为写真机,写真机输出幅面一般为:90  120  150cm

易拉宝输出材质:相纸(背面无胶)

展架:背胶纸(背面有胶) 装裱在KT版上

输出方式:写真:1软件可以使用ps软件(黑色为四色黑)

2、颜色模式可以为RGB也可以用CMYK

3、文档建立尺寸和实际尺寸一致,不需要加出血

4、展架易拉宝分辨率为72或80,特殊情况可以使用300(封面)

5、查看画布效果时,缩放比例为100%

6、使用黑色必须为四色黑(CMYK都为100),不能使用单色黑,使用单色黑,制作出的易拉版展架会有条纹。

7、背景的过度使用弱对比:色相H接近或相同,饱和度S差值在30以内或者明度B差值在30以内

8、强对比(背景与要突出的产品或文案):色相H相反,饱和度S差值在70以内或者明度B差值在70以内。

折页(出血3):纸张一般为157g铜版纸

1、四色印刷----CMYK(专色印刷要出专色版)

2、成品尺寸:制作一个90*120的三折页(从印刷厂制作完成后并且折叠后的尺寸)

2、展开尺寸:宽度 90+90+90=270  高度210

2、制作尺寸:展开尺寸+出血

2、大16K:210*285 毫米      成品尺寸 :95*210或90*210     正度16K:185*260毫米

五、APP

iOS尺寸规范:

iPhone:320x480  640x960  640x1136  750x1334  1080x1920

Ipad:1024x768  2048x1536

Android:482x800  720x1280  1080x1920

Ipad、iPhone:状态栏:40px

导航栏:88px

主菜单栏:98px

内容区域:910px

Android:

状态栏:50px

导航栏和主菜单栏:96px

内容:1038px

1、iphone英文字体为Helvetica,中文为华为细黑,冬青黑体,不用微软雅黑。

2、可点击对象的区域:尺寸不要小于44*44px;

六、智能电视

分辨率模式:1920×1080、1280×720 我们常用还是1920×1080的分辨率进行设计

颜色与分辨率

1、不要使用纯白色(#FFFFFF)可采用#F0F0F0

2、高饱和度颜色尽可能少用,会显示失真

3、大范围渐变会导致带状显示,无法达到平滑过渡

4、在界面边缘最好留出10%左右的空间(54PX)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容

  • 平面 名片(制作软件为矢量软件,如AI) 设计尺寸(标准尺寸):90*54mm、90*50mm、90*45mm 出...
    颜冉竹阅读 17,795评论 2 45
  • 声明:此次是收集互联网整理,如有侵权请联系本人进行删除 ps:如果大家有的也可以和我讨论,希望你们能提出宝贵建议,...
    小向资源网阅读 6,263评论 2 33
  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,114评论 2 237
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • iphone 6 plus设计版:1242*2208 ppi:401ppi 状态栏高度:60px 导航栏高度:13...
    youyeath阅读 47,036评论 0 24