精华内容
下载资源
问答
  • 2020-10-16 11:31:58

    关于网页UI设计规范、网页布局和如何提升网页用户体验设计的素材模板,到

    乐于分享UI|UX的 搜UI (SOOUI)

    网页UI设计规范

    1. 网页规范:

    网页宽度为1920 高度不限,有效可视区:950px~1200px宽度,具体尺寸根据项目,客户要求以及用户群决定。

    首屏高约为700-750PX 主体内容区域1200PX。

    文档建立:文件宽度为1920PX 高度不限,RGB颜色模式, 分辨率72

     

    2. 字体规范:

    中文常用字体:宋体-字体样式(无)、微软雅黑-字体样式(Windows LCD)、苹方(MAC)

    英文常用字体:Times NewRoman、Arial、sans

     

    (1)中文字常用字号:

    导航文字大小:14px、16px、18px、20px;

    正文内容:12px、14px;

    标题:22px、24px、26px、28px、30px;

    辅助信息:12px、14px;

    (2)英文字常用字号:

    标题和内容文字10-16px;中英文结合最小12px;全英文网站最小10px(比如底部信息);

    (3)段落字体格式:

     

    3. 网页页面等级

    (1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个。

    注意:网站的首页只能有一个。

    (2)二级页面:从首页点击进入之后的页面叫做二级页面。

    (3)三级页面:从二级页面点击进入的页面。

     

     

    4. 网页常见板块划分

    (1)头部区域-----top或header

    Logo、主导航、搜索、注册、登录、版本等信息...

     

    (2)主视觉区----banner

    展示公司品牌形象、新品宣传、主题活动等轮播大图

     

    (3)主要内容区---main

    新闻动态、产品与服务、公司介绍等

     

    (4)底部信息区---footer

    网站地图、联系我们、版权信息、ICP备案号等信息

     

    5. 网页的颜色

    (1)来自于LOGO的颜色;

    (2)来自于环境的颜色;

    (4)来自于产品的颜色;

    (5)公式:随意选择四个颜色,调整四个颜色的明度和直线色相;

    (6)选择一个符合你产品的任意颜色图片,然后在这个图片中提出来四种颜色,来作为网页的主色调 (服装,饰品、化妆品类居多)。

     

    6. 网页设计需注意的问题:

    (1)高清大图,图片不能有水印;

    (2)有图片的位置最好配有文字说明不要大篇幅的图片摆放;

    (3)文字排版,标点符号不能在一行的第一个,不要一个文字为独立的一行;

    (4)如果色块中有文字,文字必须在色块的中心,不能上或者下留有太多空白空间;

    (5)如果箭头朝下必须有下拉菜单,如果下拉菜单是合起的状态,箭头朝右;

    (6)banner不能是现成的图片,需要进行合成和设计,也需要有文字的极差关系和对比;

    (7)产品分类中必须有不同的产品体现;

    (8)在每一个板块中都必须体现明显的连接;

    (9)在网页设计中不要有重复图片,每个图片必须有一个部分是完整的;

    (10)图片素材不要直接用设计好的图片;

    (11)在板块中不要有纯图片的设计,一定有文字解释,有链接;

    (12)一个版块内的图片要选择同一种类型;

    (13)图片距离文字不要过近。

     

    1. 网页规范:

    网页宽度为1920 高度不限,有效可视区:950px~1200px宽度,具体尺寸根据项目,客户要求以及用户群决定。

    首屏高约为700-750PX 主体内容区域1200PX。

    文档建立:文件宽度为1920PX 高度不限,RGB颜色模式, 分辨率72

     

    2. 字体规范:

    中文常用字体:宋体-字体样式(无)、微软雅黑-字体样式(Windows LCD)、苹方(MAC)

    英文常用字体:Times NewRoman、Arial、sans

    (1)中文字常用字号:

    导航文字大小:14px、16px、18px、20px;

    正文内容:12px、14px;

    标题:22px、24px、26px、28px、30px;

    辅助信息:12px、14px;

    (2)英文字常用字号:

    标题和内容文字10-16px;中英文结合最小12px;全英文网站最小10px(比如底部信息);

    更多相关内容
  • web设计尺寸规范

    万次阅读 2016-09-12 21:33:44
    网页设计标准尺寸: 1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。 2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条...
    网页设计标准尺寸: 
    
    1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。 
    
    2、
    1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 

    3、在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右 4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象. 页面标准按800*600分辨率制作,实际尺寸为778*434px 页面长度原则上不超过3屏,宽度不超过1屏 每个标准页面为A4幅面大小,即8.5X11英寸 全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px 另外120*90,120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K 标准网页广告尺寸规格 一、120*120,这种广告规格适用于产品或新闻照片展示。 二、120*60,这种广告规格主要用于做LOGO使用。 三、120*90,主要应用于产品演示或大型LOGO。 四、125*125,这种规格适于表现照片效果的图像广告。 五、234*60,这种规格适用于框架或左右形式主页的广告链接。 六、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。 七、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。 八、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*10
    
    
     
    屏幕分辨率

    标准分辨率:1024px*768px(目前10%-20%的用户在用)

    主体设计内容宽度:1000px(常用宽度:960px,1170px,980px,1100px,1200px)

    首屏高度大约在700px

    常用分辨率:1280px*768px

    主体设计内容宽度:1200px(常用宽度:1190px,1170px,1100px,1200px)

    首屏高约:750px
    展开全文
  • 关于Web网页设计规范简述

    千次阅读 2022-04-19 18:04:19
    布局的不一致,使得可设计的空间也不相同。 1、左右布局 灵活性强, UI的限制小,左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整; 右侧为内容版块范围,是网站内容的展示区域。 2、居中布局 ...

    转自:微点阅读  https://www.weidianyuedu.com

    一、网页尺寸

    制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。

    但是并不代表我们可以在整个画布上作图。

    网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。

    1、左右布局

    灵活性强, UI的限制小,左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整;

    右侧为内容版块范围,是网站内容的展示区域。

    2、居中布局

    中间的黄色部分为有效的显示局域,用于网站内容的展示;换句话说,两边均为留白,没有实际用途,只是为了适配而存在;

    3.主流电脑屏幕尺寸有以下几种:

    一般网站内容显示的区域为996px;国内网站大部分还是以1000个像素为界限,因超过1000像素适合在大屏幕上浏览,小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分用户舒适的浏览网页。

    二、网页字体

    字体设计的总原则是:可辨识性和易读性。

    网页的中文字设计是系统默认的字体:宋体、微软黑体、苹果系统黑体

    英文则建议使用Times New Roamn、Arial、Comis Sans MS等无衬线字体

    常用的字号大小有以下几种:

    12px是应用于网页的最小字体,适用于非突出性的日期,版权等注释性内容。

    14px 则适用于非突出性的普通正文内容。

    16px、18px、20px、26px或者30px 适用于突出性的标题内容。注意都是偶数原则,奇数像素会出毛边!

    三、字体间距

    相邻两个文字的间距,其实不需要太过介意,除了特殊的需求之外,都可以使用默认数值的间距。

    行间距:推荐以字体大小的1.5—2倍作为参考;

    段间距:推荐以字体大小的2—2.5倍作为参考。

    例如,当选用14px 的字体时,行间距:21—28px;段间距:28px—35px。

    四、字体颜色

    六种除了主色调以外都是场景色,需要在不同的场景中使用(例如危险色表示危险的场景)六种是文字排版色,通过文字的不同用色进行文字排版,以表现层次结构。

    主文字颜色,建议使用 公司品牌的VI颜色,可提高公司网站与公司VI之间的关联,增加可辨识性和记忆性。

    正文字体颜色,保险起见,选用易读性的深灰色,建议选用 #333333到#666666 之间的颜色。

    五、首屏内容

    网页设计时,你还要特别注意网页的首屏内容,在构图和内容呈现上,首屏模块的设计至关重要。

    除去任务栏,浏览器菜单栏以及状态栏的高度,剩下的是首屏的高度。

    Window XP的首屏高度平均值是580px

    Window 7的首屏高度平均值是710px

    综合考虑到Window XP已经逐渐退出市场,在实际操作时,我们 以710px 作为依据。

    如下图所示,蓝色区域则是我们设计时需要着重考虑的首屏范围。

    另外,是关于图片尺寸的问题。

    需要全屏显示的图片,宽度尺寸严格设计为1920px。

    但是值得注意的是,图片内容的有效范围不能超过网页内容的有效范围,即控制在1200px以内。

    避免遇到小屏幕设备时,内容显示不全,而造成信息的遗漏的情况。

    六、响应式布局设计

    响应式设计指的是不同设备、屏幕、分辨率、操作方式(鼠标、键盘、触摸),保证信息在不同环境下表现一致,保证可交互可操作。

    由于页面的宽度发生了变化,进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。

    对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计)

    无论基于哪种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点,制定了临界点之后就知道,当屏幕的宽度范围位于哪一个点的时候,我们的页面信息该如何展示。)

    我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。

    常见的主要有如下几种方式:

    1、布局不变,即页面中整体模块布局不发生变化,主要有:

    2、布局改变,即页面中的整体模块布局发生变化,主要有:

    很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一临界点内(发生布局改变的临界点称之为临界点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。

    八、网页栅格

    网上有些关于栅格化系统的文章讲的非常理论化,又是算法又是模块,而且和响应式布局混在一起,让新晋的网页设计师们简直无从下手,所以这里以案例来说明何时采用以及怎么最快的建立栅格化系统。在所有关于UI的文章中,我会反复强调和前端开发人员的沟通,因为他们是你设计方案的执行者,这一点非常重要。

    1.把栅格化设计和栅格化布局分开

    强调栅格化设计(grid-design)和栅格化布局(css grid)分开描述,是个人理解这完全属于两个不同的工作,前者针对网页设计师,而后者针对前端开发人员。栅格化设计是不需考虑页面的响应的基于栅格系统的设计,主要是为了提高网页的规范性。对于一些中规中矩的网站,或者说一般创意型的网站,栅格化设计还是非常推荐的,尤其是一些规模大周期长,后期需要不断迭代的项目,栅格化设计让网页呈现出专业可信赖感,并有助于后期的维护。而栅格化布局,特指前端攻城狮使用的css框架,来实现页面的响应式布局。

    响应式设计只是网页设计的一个折中方案,依赖于项目实际情况进行选择。对于设计师来说,如果没有必须的要求,可选择广义的栅格系统,并在此基础上自由发挥创意。

    2.绝不万能的栅格化系统

    对于是否采用栅格化设计,采用下面几个案例说明一下:

    (企业站之类-以介绍几种单一产品为主)

    (功能型网站)

    (不拘泥形式的设计形式)

    针对这三个具有代表性的案例,栅格化设计是没有必要的。理由很简单,栅格的优点也是缺点,规范意味着统一也意味着限制,在以上的案例中,无需用栅格来限制设计师的灵感,毕竟这个社会,还是需要设计感的。

    但绝大多数情况下,推荐栅格化设计。尤其是图文混排、版块很多的网站,栅格化设计会让内容杂乱无章的页面呈现清爽感。

    关于栅格化布局,方案非常多,来看下面几个案例,我们都称之为栅格化设计。

    (广义的栅格化系统-无间距的单元格)

    (广义的栅格化系统-有间距的单元格)

    (广义的栅格化系统-有间距的单元格)

    对于不需要考虑页面响应(换句话说,和框架无关)的网页设计,原则可以简化成一句话:“由设计师自由决定”。

    3.栅格化设计的参数

    网上搜索结果最热的960 gird栅格系统从2009年就开始正式推出,但至今,仍然有很多设计师在使用,除了考虑到显示设备的分辨率,还依赖于960 gird的灵活性。所以,对于新晋web ui来说,采用960 grid 仍然是最佳的方案,不会出彩但也不会出错。如果是考虑到宽屏的设计(需要舍弃一部分分辨率不高的用户),可以把栅格化系统的宽度建为980甚至以上。但没有栅格化设计经验的设计师需要注意,这里说的960是含边距部分,换句话说,在psd文档中,你的内容部分是950px,栅格化版面可以借助一些非常好用的在线工具,比如知名的Grid.Guide,这是12列栅格在内容宽度950下的三种版式规范,你也可以使用24列,灵活度更高。

    Grid-Guide自动生成的栅格系统(宽950-12列)

    从图中可以看出,这三种方案列宽column width和间距gutter不同,剩下的工作对于ui设计师来说就简单了很多,你可以把版式规范的png格式下载下来,作为你网页设计的基础版块,在此基础上进行列的划分。或者只是以这个参数为基础,重新建立参考线(我更推荐这种方式,尤其photoshop cc2017的新建参考线版面,装订线对应Gutter,列宽对应column width)。我简单的拿版式规范做了个页面设计示意图,这就是基于栅格系统设计的优点,在划分列时,有理可依,有据可循。

    【基于960grid系统的版块划分示意】

    当然,既然是设计师,就可以感性的元素再多一些。比如,你希望更多的留白,就可以采用间距值较大的栅格版式,只要整个网站保持一个统一的版式即可。下图是当内容宽度为1200时生成的栅格系统,你还可以尝试很多方案,但Max Width的设定并不是那么随意,这个取决于网站的定位。

    Grid-Guide自动生成的宽1180的栅格系统(24列)

    至于高度和垂直间距,栅格化系统并没有统一的准则,设计师可以采用一些黄金分割之类满满的都是设计感之类的值,或者垂直间距与栅格系统的间距相同或是整倍,总之,也需要一个规范指导全站设计。

    栅格系统的参数根据项目的实际情况,尽量建立10的倍数或8的倍数(google material design推荐)。

    4.栅格化布局的参数

    在前面提到过,如果网站的需求是响应式的设计,这时,设计师们一定一定先问一下前端他们准备如何实现响应式布局,而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。

    关于响应式的栅格系统,首先声明一点,当前端乐意并了解CSS原理和框架的构建方式时,可以构建其他样式的网格,比如7、9、11、13等等,甚至各种异形网格,但在绝大多数情况下,更多的前端攻城狮青睐于高(tou)效(lan),而他们常用的css框架除了Bootstrap(宽480/768/992/1200,12列),还有一堆叫不出名字的轻量css框架(毕竟栅格系统只是Bootstrap的一部分,如果只是需要一个响应式的css的话,可选的非常多,比如960.gis),除此之外,有可能你那可爱的前端攻城狮用的是flexbox实现响应式弹性布局,所以在一切未知确定下来之前,请放下架子,请教一下开发人员,因为虽然不想承认,但这种情况下是前端来指导设计。值得庆幸的是,这种情况在现实中非常少的,(但不排除你接手的是一个二次开发的项目等等之类),确定他们使用哪种框架之后,设计师可以开始自己的工作了。

    下面也举个例子,是960gis的。

    【960-grid-system栅格化布局】

    看完你也许会明白为什么涉及到栅格化布局需要前端来确定了,960gis的css框架给出了三种方案,24列16列12列,设计师要在这个基础上进行设计。一旦需要栅格化布局,意味着设计师自由发挥的空间再次缩减,只有在这三个方案上选一种。这些方案从何而来呢?很简单,你只要向前端索取他使用的框架的psd模板即可,里面参考线都是建好的。而前端一定会非常乐意帮你这个忙,理由很简单,你按照他使用的框架规范进行设计也是在一定程度上缩减他的工作量,皆大欢喜。比如下面这张,就是目前最新的Bootstrap4的psd文件的截图。

    【Bootstrap4】

    设计师也可以自给自足,一般这些css框架库都会提供下载途径。尤其是Bootstrap,作为成熟的框架,很多模板文件可以套用。栅格化布局以使用的css框架库为准则,让前端开发提供给设计师再好不过。

    九、命名规范

    1、网站设计及基本框架结构

    1.1  Container

    “container“ 就是将页面中的所有元素包在一起的部分,这部分还可以命名为: “wrapper“, “wrap“, “page“.

    1.2  Header

    “header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).

    1.3    Navbar

    “navbar“等同于横向的导航栏,是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.

    1.4    Menu

    “Menu”区域包含一般的链接和菜单,这部分还可以命名为: “subNav “, “links“,“sidebar-main”.

    1.5   Main

    “Main”是网站的主要区域,如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。

    1.6   Sidebar

    “Sidebar” 部分可以包含网站的次要内容,比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.

    1.7    Footer

    “Footer”包含网站的一些附加信息,这部分还可以命名为: “copyright“.

    2、需要注意的几点:

    2.1尽量考虑为元素命名其本身的作用或”用意”,达到语义化。

    不要使用表面形式的命名.

    如:red/left/big等。

    2.2组合命名规则:

    [元素类型]-[元素作用/内容]

    如:搜索按钮: btn-search

    登录表单:form-login

    新闻列表:list-news

    2.3 涉及到交互行为的元素命名

    凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:

    鼠标悬停::hover   点击:click   已浏览:visited

    如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

    3、常用命名汇总:

    页头:header

    登录条:loginbar

    标志:logo

    侧栏:sidebar

    广告条:banner

    导航:nav

    子导航:subNav

    菜单:menu

    子菜单:subMenu

    下拉菜单:dropMenu

    工具条: toolbar

    表单:form

    栏目:column

    箭头:arrow

    搜索:search

    搜索按钮:btn-search

    滚动条:scroll

    内容:content

    标签页:tab

    文章列表:list

    提示信息:msg

    小技巧:tips

    栏目标题:title

    链接:links

    页脚:footer

    服务:service

    热点:hot

    新闻:news

    下载:download

    注册:regsiter

    状态:status

    按钮:btn

    投票:vote

    合作伙伴:partner

    版权:copyright

    网站地图: sitemap

    以上命名规范仅供参考

    展开全文
  • 今天来总结一下当前市场上的一些移动端尺寸,方便设计师和前端去考虑适配。但是最好还是针对自己的产品做调查,根据数据去做主流适配。Iphone&Ipad&Android&WEB全部规范全在这儿了...

    https://www.cnblogs.com/fang51/p/4286481.html

    移动端尺寸繁多,包括IOS和安卓,尺寸多达十余种,所以移动页面尺寸的适配一直是前端和设计的头疼。今天来总结一下当前市场上的一些移动端尺寸,方便设计师和前端去考虑适配。但是最好还是针对自己的产品做调查,根据数据去做主流适配。

    Iphone&Ipad&Android&WEB全部规范全在这儿了!!

    ①iPhone的设计尺寸

    iPhone界面尺寸:

    设备

    分辨率

    状态栏高度

    导航栏高度

    标签栏(工具栏)高度

    iPhone6 plus设计版

    1242 × 2208

    60px

    132px

    146px

    iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程

    iPhone6 plus物理版

    1080 × 1920

    54px

    132px

    146px

    iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程

    iPhone6

    750 × 1334

    40px

    88px

    98px(88px)

    iPhone5s

    640 × 1136

    40px

    88px

    98px(88px)

    iPhone5c

    640 × 1136

    40px

    88px

    98px(88px)

    iPhone5

    640 × 1136

    40px

    88px

    98px(88px)

    iPhone4s

    640 × 960

    40px

    88px

    98px(88px)

    iPhone4

    640 × 960

    40px

    88px

    98px(88px)

    iPhone图标尺寸:

    系统

    分辨率

    圆角大小

    iOS 6-

    90px - 1024px

    约为图标宽度 × 0.175

    iOS 7+

    90px - 1024px

    约为图标宽度 × 0.225

    Asset

    iPhone 6 Plus (@3x)

    iPhone 6 and iPhone 5 (@2x)

    iPhone 4s (@2x)

    iPad and iPad mini (@2x)

    iPad 2 and iPad mini (@1x)

    App icon

    (required for all apps)

    180 × 180

    120 × 120

    120 × 120

    152 × 152

    76 × 76

    App icon for the App Store

    (required for all apps)

    1024 × 1024

    1024 × 1024

    1024 × 1024

    1024 × 1024

    1024 × 1024

    Launch file or image

    (required for all apps)

    Use a launch file

    (see Launch Images)

    For iPhone 6, use a launch file

    (see Launch Images)

    For iPhone 5, 640 × 1136

    640 × 960

    1536 × 2048 (portrait)

    2048 × 1536 (landscape)

    768 × 1024 (portrait)

    1024 × 768 (landscape)

    Spotlight search results icon

    (recommended)

    120 × 120

    80 × 80

    80 × 80

    80 × 80

    40 × 40

    Settings icon

    (recommended)

    87 × 87

    58 × 58

    58 × 58

    58 × 58

    29 × 29

    Toolbar and navigation bar icon

    (optional)

    About 66 × 66

    About 44 × 44

    About 44 × 44

    About 44 × 44

    About 22 × 22

    Tab bar icon

    (optional)

    About 75 × 75

    (maximum: 144 × 96)

    About 50 × 50

    (maximum: 96 × 64)

    About 50 × 50

    (maximum: 96 × 64)

    About 50 × 50

    (maximum: 96 × 64)

    About 25 × 25

    (maximum: 48 × 32)

    Default Newsstand cover icon for the App Store

    (required for Newsstand apps)

    At least 1024 pixels on the longest edge

    At least 1024 pixels on the longest edge

    At least 1024 pixels on the longest edge

    At least 1024 pixels on the longest edge

    At least 512 pixels on the longest edge

    Web clip icon

    (recommended for web apps and websites)

    180 × 180

    120 × 120

    120 × 120

    152 × 152

    76 × 76

    ②iPad的设计尺寸

    iPad界面尺寸:

    设备

    分辨率

    状态栏高度

    导航栏高度

    标签栏高度

    iPad6/iPad Air2

    2048 × 1536

    40px

    88px

    98px

    iPad5/iPad Air/ipad mini 2

    2048 × 1536

    40px

    88px

    98px

    iPad4/ipad mini

    2048 × 1536

    40px

    88px

    98px

    iPad3/the new iPad

    2048 × 1536

    40px

    88px

    98px

    iPad2

    1024 × 768

    20px

    44px

    49px

    iPad1

    1024 × 768

    20px

    44px

    49px

    iPad Mini

    1024 × 768

    20px

    44px

    49px

    iPad图标尺寸:

    系统

    分辨率

    圆角大小

    iOS 6-

    90px - 1024px

    约为图标宽度 × 0.175

    iOS 7+

    90px - 1024px

    约为图标宽度 × 0.225

    Asset

    iPhone 6 Plus (@3x)

    iPhone 6 and iPhone 5 (@2x)

    iPhone 4s (@2x)

    iPad and iPad mini (@2x)

    iPad 2 and iPad mini (@1x)

    App icon

    (required for all apps)

    180 × 180

    120 × 120

    120 × 120

    152 × 152

    76 × 76

    App icon for the App Store

    (required for all apps)

    1024 × 1024

    1024 × 1024

    1024 × 1024

    1024 × 1024

    1024 × 1024

    Launch file or image

    (required for all apps)

    Use a launch file

    (see Launch Images)

    For iPhone 6, use a launch file

    (see Launch Images)

    For iPhone 5, 640 × 1136

    640 × 960

    1536 × 2048 (portrait)

    2048 × 1536 (landscape)

    768 × 1024 (portrait)

    1024 × 768 (landscape)

    Spotlight search results icon

    (recommended)

    120 × 120

    80 × 80

    80 × 80

    80 × 80

    40 × 40

    Settings icon

    (recommended)

    87 × 87

    58 × 58

    58 × 58

    58 × 58

    29 × 29

    Toolbar and navigation bar icon

    (optional)

    About 66 × 66

    About 44 × 44

    About 44 × 44

    About 44 × 44

    About 22 × 22

    Tab bar icon

    (optional)

    About 75 × 75

    (maximum: 144 × 96)

    About 50 × 50

    (maximum: 96 × 64)

    About 50 × 50

    (maximum: 96 × 64)

    About 50 × 50

    (maximum: 96 × 64)

    About 25 × 25

    (maximum: 48 × 32)

    Default Newsstand cover icon for the App Store

    (required for Newsstand apps)

    At least 1024 pixels on the longest edge

    At least 1024 pixels on the longest edge

    At least 1024 pixels on the longest edge

    At least 1024 pixels on the longest edge

    At least 512 pixels on the longest edge

    Web clip icon

    (recommended for web apps and websites)

    180 × 180

    120 × 120

    120 × 120

    152 × 152

    76 × 76

    ③Android的设计尺寸

    屏幕尺寸

    指实际的物理尺寸,为屏幕对角线的测量。

    为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。

    像素(PX)

    代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。

    屏幕密度

    为解决Android设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。 为了简单起见,Android把屏幕密度分为了四个广义的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi) 像素= DP * ( DPI / 160 ) 例如,在一个240dpi的屏幕里,1DP等于1.5PX。

    于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。

    典型的设计尺寸

    • 320dp:一个普通的手机屏幕(240X320,320×480,480X800)

    • 480dp:一个中间平板电脑像(480×800)

    • 600dp:7寸平板电脑(600x1024)

    • 720dp:10寸平板电脑(720x1280,800x1280)

    Android安卓系统dp/sp/px换算表

    名称

    分辨率

    比率 rate (针对320px)

    比率 rate (针对640px)

    比率 rate (针对750px)

    idpi

    240 × 320

    0.75

    0.375

    0.32

    mdpi

    320 × 480

    1

    0.5

    0.4267

    hdpi

    480 × 800

    1.5

    0.75

    0.64

    xhdpi

    720 × 1280

    2.25

    1.125

    1.042

    xxhdpi

    1080 × 1920

    3.375

    1.6875

    1.5

    主流Android手机分辨率和尺寸

    设备

    分辨率

    尺寸

    设备

    分辨率

    尺寸

    三星Galaxy S3

    4.8英寸

    720 × 1280

    三星Galaxy S4

    5英寸

    1080 × 1920

    三星Galaxy S5

    5.1英寸

    1080 × 1920

    三星Galaxy S6

    4.5英寸

    1200 × 1920

    小米1

    4英寸

    480 × 854

    小米1s

    4英寸

    480 × 854

    小米2

    4.3英寸

    720 × 1280

    小米2s

    4.3英寸

    720 × 1280

    小米3

    5英寸

    1080 × 1920

    小米3s(概念)

    5英寸

    1080 × 1920

    小米4

    5英寸

    1080 × 1920

    红米

    4.7英寸

    720 × 1280

    红米Note

    5.5英寸

    720 × 1280

    OPPO Find 7

    5.5英寸

    1440 × 2560

    OPPO Find 7 轻装版

    5.5英寸

    1080 × 1920

    OPPO N1 mini

    5英寸

    720 × 1280

    OPPO R3

    5英寸

    720 × 1280

    OPPO R1S

    5英寸

    720 × 1280

    锤子 Smartisan T1

    4.95英寸

    1080 × 1920

    华为 Ascend P7

    5英寸

    1080 × 1920

    华为 Ascend Mate7

    6英寸

    1080 × 1920

    华为 荣耀6

    5英寸

    1080 × 1920

    华为 Ascend Mate2

    6.1英寸

    720 × 1280

    华为 C199

    5.5英寸

    720 × 1280

    HTC One (M8)

    5英寸

    1080 × 1920

    HTC Desire 820

    5.5英寸

    720 × 1280

    魅族 MEIZU MX4

    5.36英寸

    1152 × 1920

    魅族 MEIZU MX3

    5.1英寸

    1080 × 1800

    ④Web的设计尺寸

    Windows XP任务栏的高度30pxWindows 7任务栏的高度40px

    主流浏览器的界面参数

    浏览器

    状态栏

    菜单栏

    滚动条

    Chrome浏览器

    22px(浮动出现)

    60px

    15px

    火狐浏览器

    状态栏高度

    导航栏高度

    标签栏高度

    IE浏览器

    状态栏高度

    导航栏高度

    标签栏高度

    360浏览器

    状态栏高度

    导航栏高度

    标签栏高度

    系统分辨率统计

    安全分辨率为1024 × 768 px可建议大分辨率为1280 × 800 px

    综合分辨率及浏览器下的统计数据

    网页宽度与首屏高度

    安全宽度1002 px可建议较大宽度1258 px

    Window XP首屏大小580 pxWindow 7 首屏大小710 px

    展开全文
  • web常见的屏幕尺寸

    千次阅读 2020-03-10 11:45:35
    设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080
  • 首先我们了解下网页设计中的各类单位及说明。原文链接 像素(px) 根据显示器的分辨率来确定长度,在web应用中多采用该单位; 点数(pt) 根据windows系统定义的字号大小来确定长度; 英寸(in)、厘米(cm)和毫米...
  • 干货!Web 网页设计规范

    万次阅读 多人点赞 2020-04-21 14:20:46
    布局的不一致,使得可设计的空间也不相同。 1、左右布局 灵活性强, UI的限制小,左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整; 右侧为内容版块范围,是网站内容的展示区域。 ...
  • IOS和安卓ui设计常用尺寸及基本知识

    万次阅读 2018-06-02 10:55:30
    IOS和安卓ui设计常用尺寸及基本知识 http://www.miued.com/917/ iOS  app  图标的圆角半径是多少? (注:现在IOS图标是不需要再画圆角了,直接方形就OK) 括弧里面是对应的半径大小 ...
  • 这是一套使用Axure制作的交互设计常用素材综合组件包,其中包含了界面模型、设备模型、流程元素、标注元素、交互手势等丰富的素材内容,主要帮助产品经理或交互设计师们使用Axure快速制作规范美观的交互输出物。...
  • 本套模板按照主流的Web标准尺寸进行设计,所有页面都遵循统一标准的网页布局规范。从本模板中可以学习到比较常用WEB端交互的实现方法,同时能获取到更多Axure相关知识点的运用技巧:Web原型的布局方法、母版的合理...
  • web 页面 常用分辨率(PC 移动端)

    千次阅读 2019-11-18 19:19:43
    之前在网上看到过一些,但是原网址忘记是哪个了 ... 分辨率 比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3|10.4寸、12.1寸、14.1寸、15寸; ) 1280*800(16:10|15.4寸) 1280*1024(比例:5:4...
  • web-UI设计(设计思路篇)

    千次阅读 2020-02-06 22:41:16
    webUI设计 笔记来源:https://www.imooc.com/video/14005 重点: 设计流程 设计规范 web-UI概述 UI 用户界面 用户、界面、交互 WUI 网页用户界面 功能为主网页 传统网页 用户为主网页 天猫等 分辨率 大部分设计师...
  • web界面设计原则

    万次阅读 多人点赞 2019-07-08 12:06:32
    web界面的设计过程中,如果全凭自己的感觉和认识来组合布置设计,很可能自己觉得效果不错,而实际用户体验并不好,用户体验不好有什么后果就不用多说了吧,因此为了更好的进行界面搭建设计,提供几个专业成熟的...
  • web页面常用布局(pc端布局和移动端布局) 什么是web布局呢? 布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种: 1、table布局:通过table元素将页面空间划分...
  • 移动端UI设计尺寸规范以及iPhone尺寸大小

    万次阅读 多人点赞 2021-01-26 09:30:47
    本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。 目录 界面设计尺寸及栏高度 边距...
  • 数据可视化大屏设计尺寸怎么定?

    千次阅读 2020-12-24 18:57:15
    大屏可视化的设计尺寸定义,一直是很多设计师苦恼的一件事,很多时候大屏出现的问题,都是因为对设计尺寸没有一个正确的认识导致。比如大屏内容呈现不全、拉伸、压缩、字号小的看不见等等,出现这样的问题就会浪费...
  • PC端UI设计尺寸规范?

    千次阅读 2020-12-21 14:46:13
    对于刚入行的UI设计师,最容易犯的错就是在设计移动APP时,不懂什么尺寸或者用哪种屏幕的尺寸是最适当的?为了解决这个问题,今天我们就简单的为大家整理做UI时最基础的尺寸规范。现象首先说现象,大家都知道移动端...
  • 今天小编要跟大家分享关于Web前端开发常用的十款开发工具汇总 1.Glitch https://glitch.com 好的,这不仅仅是一个工具,还是一个非常棒的编码平台以及一个很棒的技术社区。我可以在内置代码编辑器的帮助下托管我的...
  • 【页面尺寸】网页的尺寸受限于两个因素:一个是显示器屏幕(显示器现在种类很多,17寸为主流,正在朝19寸及宽屏的方向发展,但目前也有为数不少的15寸显示器)另一个是浏览器软件(我们常用的IE、遨游、Friefox等) ...
  • Web应用界面设计规范

    千次阅读 2020-04-17 13:01:19
    Web应用界面设计规范(Design Specification for Web UI) 目录: 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 六、界面设计规范...
  • 在文档编辑中,我们常用的是宋体,小四号字,新罗马字体,字母和数字用的是Arial字体,段落首行缩进2个字体,采用多倍行距中的1.25倍行距。 在网页开发中,普遍偏爱微软雅黑与宋体,14/16px,非衬线体。 2.字号 印刷...
  • web界面设计要素及基本设计规范

    千次阅读 2020-04-04 21:10:00
    所以,要明确的知道Web界面应该包含哪些基本要素及基本的设计规范,才能够进行高效的设计输出,当然,还要知道当下的web主流的设计方式有哪些。 设计规范存在的目的 1 在多人的团队里,通常不同的人员负责不同的流程...
  • Web UI设计基础

    万次阅读 2018-07-31 12:55:43
    显示器分辨率,垂直方向和水平方向像素的个数,因而像素尺寸不固定的 5:4 4:3 16:10 16:9 自适应布局 Web基本分类 门户类:新浪、搜狐、网易、腾讯,信息杂而多 分类信息:58同城、赶集网,生活相关的 ...
  • Web页响应式设计的一些解决方案

    千次阅读 2019-09-05 11:51:32
    Web页响应式设计的一些解决方案前言背景介绍响应式与自适应的区别合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左...
  • background-size: 规定背景图片的尺寸。 background-repeat :规定如何重复背景图像。 background-origin :规定背景图片的定位区域。 background-clip: 规定背景的绘制区域。 background-attachment: 规定背景...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,199
精华内容 10,879
关键字:

web设计常用尺寸