网站界面设计尺寸_网站界面设计尺寸标准

网站界面设计尺寸_网站界面设计尺寸标准

网站界面设计尺寸的今日更新是一个不断变化的过程，它涉及到许多方面。今天，我将与大家分享关于网站界面设计尺寸的_新动态，希望我的介绍能为有需要的朋友提供一些帮助。

文章目录列表:

1.PC端UI设计尺寸规范?

2.网页设计如何设置宽度网页设计如何设置宽度和高度

3.设计简单的静态的网页设计,尺寸是多大

4.手机网页设计多大好?

5.急求 关于网页设计的尺寸问题 急急急急急急

6.UI界面设计尺寸应该是多少？

PC端UI设计尺寸规范?

对于刚入行的UI设计师，_容易犯的错就是在设计移动_时，不懂什么尺寸或者用哪种屏幕的尺寸是_适当的？为了解决这个问题，今天我们就简单的为大家整理做UI时_基础的尺寸规范。

现象

首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480×800,480×854,540×960,720×1280,1080×1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640×960,640×1136,750×1334,1242×2208。

不要被这些尺寸吓倒。实际上大部分的_?UI设计和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。

像素密度

要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。_典型的例子，iPhone3gs的屏幕像素是320×480，iPhone4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。

所以，我们要引入_重要的一个概念：像素密度，也就是PPI（pixelsperinch）。这项指标是连接数字_与物理_的桥梁。

Pixelsperinch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指_末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

倍率与逻辑像素

再用iPhone3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。

在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。

在以前，iOS应用的资源中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要准备好，iOS会自己判断用哪张，Android道理也一样。

由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。

如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：

ldpi[0.75倍]

mdpi[1倍]

hdpi[1.5倍]

xhdpi[2倍]

xxhdpi[3倍]

xxxhdpi[4倍]

各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是友盟2014年10月到2015年03月的数据：

就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：

ldpi如今已绝迹，不用考虑

mdpi[320x480]（市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小）

hdpi[480x800、480x854、540x960]（早年的低端机，屏幕在3.5英寸档位；如今的低端机，屏幕在4.7-5.0英寸档位）

xhdpi[720x1280]（早年的中端机，屏幕在4.7-5.0英寸档位；如今的中低端机，屏幕在5.0-5.5英寸档位）

xxhdpi[1080x1920]（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上）

xxxhdpi[1440x2560]（极少数2K屏手机，比如GoogleNexus6）

自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。

不过需要注意的是，Android设备的逻辑像素尺寸并不_。比如两种常见的屏幕480×800和1080×1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320×533和360×640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。

单位

不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android_都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。

单位之间的换算关系随倍率变化：

1倍：1pt=1dp=1px（mdpi、iPhone3gs）

1.5倍：1pt=1dp=1.5px（hdpi）

2倍：1pt=1dp=2px（xhdpi、iPhone4s/5/6）

3倍：1pt=1dp=3px（xxhdpi、iPhone6）

4倍：1pt=1dp=4px（xxxhdpi）

单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080×1920，有的喜欢设成720×1280。给出的界面元素尺寸就不_了。Android的_小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。

无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确_的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。

Web怎么办

移动端页面的_单位仍然是px，至少代码里这么写，但它的道理也和_一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用_的显示方式来渲染页面。根据像素密度，按相应倍率缩放。

以iPhone5s为例，屏幕的分辨率是640×1136，倍率是2。浏览器会认为屏幕的分辨率是320×568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。

实际应用

大家_关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个_来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。

之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的_项——单位与标尺界面，把尺寸和文字单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各_单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。

要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字？

首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实_中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。

再说72，这有一定的历史原因。_早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。

现在回到正题，我们怎么通过DPI来调节倍率？既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。

下面来看看3个_各自的画布设置：

IPhone

iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。

从市场占有率数据来看，目前_多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320×568。上升势头_猛，未来有望登上_的是iPhone6的屏幕。倍率为2，逻辑像素375×667。

按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone4s，大一点的6plus也不会过于空旷。

不过在切图的时候要注意，由于iPhone6plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。

Android

都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于_了：360×640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72×2=144。想以xxhdpi为准，就把DPI设成72×3=216。

对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。

当然，这些机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起。不作考虑也是OK的。

Web

手机端网页就没有_标准了，比较流行的做法是按照iPhone5的尺寸来设计。倍率2，逻辑像素320×568。

这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素_小的。所以的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，不是特别清晰。

如果追求质量，愿意牺牲加载速度，那么可以按照_的屏幕来设计。也就是iPhone6plus的尺寸，倍率3，逻辑像素414×736。

总结

移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。

网页设计如何设置宽度网页设计如何设置宽度和高度

一般来说网页设计的宽度是多少？应该如何把握？

排名_的是360×640，是竖屏，只有在医院和学校才能看到。我们就到此为止吧。

第二位是1920×1080，占13.07%。

366×768排第三，占比6.32%。这说明目前主流的电脑分辨率是1920×1080。

第七分辨率，1024×768，是_小的计算机尺寸，只占3.13%，很少被人使用。在pc端设计网页的时候不应该考虑这个大小，而在适配pad端和手机端的时候应该考虑这个大小。

更_的响应式网站要在严格的网格规范下适应不同的宽度，以保证每个宽度下的显示效果。但是，这种成本也会相应增加。开发一个网站，需要综合考虑实际需求和开发成本。时代(时代官网)就是一个响应式网页的好案例。

扩展数据

网页设计注意事项:

1.网页设计的尺寸标准:

为1024-768显示分辨率开发的网页尺寸，宽度910px；

为800-600显示分辨率开发的网页尺寸，宽度778px；

2.网页设计中的画布设置:

注意分辨率72像素/英寸。

3.设计中的网页字体问题。

中文字体:特别注意“设置抗锯齿方法”选项选择“无”。

宋体是_常用的网页字体，12px是中文操作系统能显示的_小字体和内容。

文字大小有12px和14px两种(新vista据说可以表现10px的汉字，现在用的不多了)。

英文字体:_小英文字体为10px。verdana字体是大部分网页使用的英文字体，比arial字体更美观平衡。

效果图:

网页效果图中网页的字体，虽然在制作网页的_后过程中不需要裁剪。但作为设计中不可分割的重要元素，你一定要谨慎使用，因为你不仅要设计文字与整个网页的关系，还要设计字体的样式表颜色。

怎样在网站系统设置尺寸？

1、首先打开html编辑器，设置一个p并对p设置固定宽度和高度，还要在p里面插入一张。

2、接着在上方设置p和img的样式，将的宽度设置为何父级一样的宽度，代码就是“width:100%;”这里的100%会自动跟随父级的宽度选择，然后将父级的高度去掉，这样子集的高度就自动化了。

3、_后将设置为display:block;转为块状就可以了。

4、_后打开浏览器就可以看到固定大小的了。

做一个网页标准的像素用多少？

网页设计标准尺寸:

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

2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值,1024*768页面的标准大小是955*600,照着它的尺寸做就行了)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转来的。。。。我觉得说得很全面了

怎么用美图秀秀改变的尺寸，设置大小像素？

1、首先在打开美图秀秀软件。

2、打开后，选择“美化”，这时页面会自动跳转。

3、在新跳转的页面中，选择“打开一张图”。

4、在文件夹中，找到需要修改尺寸的，选择后点击“打开”。

5、然后我们点击右上角的“尺寸”按钮。

6、在“尺寸”界面中，可以根据需要修改的"宽度"、“高度”和尺寸单位。若是不想使用原图的长宽比，就将图中红框区域的对号取消便可。数据修改完后，点击下面的“应用”，尺寸就修改完成啦。

资料扩展

美图秀秀是2008年10月8日由厦门美图科技有限公司研发、推出的一款免费处理的软件，有iPhone版、Android版、PC版、WindowsPhone版、iPad版及网页版，致力于为全球用户提供专业智能的拍照、修图服务。

美图秀秀的特效、美容、拼图、场景、边框、饰品等功能，可以1分钟做出影楼级照片，还能一键分享到新浪微博、人_、QQ空间等。

2018年4月推出美图社交圈，鼓励年轻人秀真我，让社交更好看，美图秀秀也从影像工具升级为社区_。2018年11月28日，中消协召开新闻发布会，通报了100款_个人信息收集与_政策测评情况，测评显示，美图秀秀_涉嫌过度收集可识别生物信息、财务信息等。

PS手机端网页宽度多少合适？

中间内容区大小不能小于1000px，一般是1000-1200，高度不限制，导航栏是通栏，根据_的分辨率来，一般1920差不多了。操作方法如下：

1、首先单击文件按钮，在菜单中选择新建命令。

2、在新建文档对话框中，设置文档的详细信息，单击创建按钮。

3、然后单击工具箱中的圆角矩形工具。

4、在选项栏中选择‘路径’工具模式。设置半径为‘50’像素。

5、在文档中绘制出路径图形，然后设置前景色为白色。

6、在图层面板中，单击创建新图层新建‘图层1’。然后单击路径按钮‘切换到路径面板。

7、接着鼠标右击’背景图层‘，在弹出的快捷菜单中单击删除图层。

8、_后在对话框中单击’是‘删除背景图层，就完成了。

设计简单的静态的网页设计,尺寸是多大

许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800*600尺寸及1024*768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解.

网页设计标准尺寸:

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。

广告形式像素大小_尺寸备注

BUTTON120*60(必须用gif)7K

215*50(必须用gif)7K

通栏760*10025K静态或减少运动效果

430*5015K

Webjx.Com

超级通栏760*100to760*200共40K静态或减少运动效果

巨幅广告336*28035K

585*120

竖边广告130*30025K

全屏广告800*60040K必须为静态，FLASH格式

图文混排各_道不同15K

弹出窗口400*300(尽量用gif)40K

Webjx.Com

BANNER468*60(尽量用gif)18K

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

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

网页中的广告尺寸

1.首页右上，尺寸120*602.首页顶部通栏，尺寸468*603.首页顶部通栏，尺寸760*60

4.首页中部通栏，尺寸580*605.内页顶部通栏，尺寸468*606.内页顶部通栏，尺寸760*60

7.内页左上，尺寸150*60或300*3008.下载地址页面，尺寸560*60或468*60

9.内页底部通栏，尺寸760*6010.左漂浮，尺寸80*80或100*100

11.右漂浮，尺寸80*80或100*100以上几种说法可能有点小的出入，大家可以探讨一下

手机网页设计多大好?

iPhone手机网页的设计尺寸

iPhone5尺寸是640x1136px分辨率是326PPI

iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI

iPhone和iPodTouch_代、第二代、第三代尺寸是320x480px分辨率是163PPI

安卓网页的设计尺寸

320dp：一个普通的手机屏幕(240X320，320×480，480X800)

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

600dp：7寸平板电脑(600×1024)

720dp：10寸平板电脑(720×1280，800×1280)

ipad网页的设计尺寸

iPad第三代第四代尺寸是2048x1536px分辨率是264PPI

iPad_代第二代尺寸是1024x768px分辨率是132PPI

iPad Mini尺寸是1024x768px分辨率是163PPI

网站设计尺寸标准

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

2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值, 1024*768页面的标准大小是955*600,照着它的尺寸做就行了)

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

网页广告标准尺寸规格

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。

急求 关于网页设计的尺寸问题 急急急急急急

如果你是设计一般的网站界面，建议的尺寸：宽960px、1000px、1200px；具体使用哪一种，看这个界面面向的用户群体（比如你是专门设计给某公司员工使用的管理系统、该公司只有800*600px的电脑，那你尺寸设计为800px即可）；以前大家设计网页一般为960px，现在多数设计1000px的

如果你设计的是以漂亮为主的界面，需要瀑布流实现，这种情况需要使用自适应（例如花瓣网），你需要定义的就是导航尺寸、某一个模块的宽度尺寸；

还有一种情况，类似全屏大幅banner这种，一般是给个背景色or背景底纹、然后你来把中间的banner设计好（这个时候的尺寸也是按照960px、1000px、1200px设计，类似/）；

_后，如果你设计的界面是要作为某电脑背景板展示的，类似桌面背景这种情况，那就看对方要求，问下什么情况，然后做个对应的尺寸就好

_后，网页尺寸请用px单位

UI界面设计尺寸应该是多少？

01、界面设计尺寸及栏高度

（1）我们用Photoshop做设计新建画布应该设置多大呢？另外，iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？（注意：iOS严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图示来为你解答上面的问题。

（2）目前主流的iOS设备iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。

（3）注意：在进行iphone x设计的时候我们依然可以采用熟悉的iphone 7的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。

UI设计网页时，导航栏尺寸规格一般是多少

当前_的分辨率是1920*1080，在该分辨率下，页面中心区域为1200px以内都可以。在800*600分辨率下，导航栏尺寸规格保持在778px以内；在1024*768分辨率下，网页宽度保持在1002px以内。

如果没有_的要求，以1920尺寸设计就好（这是目前_普遍的尺寸大小），前端开发人员会自行适配其他的分辨率。

扩展资料：

UI设计网页方法

一、呈现更新颖的内容

二、增强元素的设计感

相对于普通的网页ui设计而言，具有较强的设计感的网页往往会更容易吸引用户的注意。任何一个具有创意的网站开发设计方案，都会把目光更聚焦在网页的基本布局和色彩搭配上，而这也意味着网页上一般存在很多种不同的元素。

网站开发的设计制作的类型有很多种，面对不同的类型，要有特定的网页ui设计方案。给用户提供一个寻找目标的简易方法，这样用户就容易沉浸到页面中来，同时也增加了用户操作的几率。

ui界面设计尺寸？

（一）界面尺寸规范

1、界面尺寸大小是：750x1334px。

2、状态栏(statusbar)：就是电量条，其高度为：40px。

3、导航栏(navigation)：就是顶部条，其高度为：88px。

4、主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px。

5、内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px。

（二）图标尺寸规范

1、导航栏和工具栏尺寸大小44x44px。

2、标签栏尺寸大小75x75px。

3、导航栏的文字大小_值是34-36px，标签栏的图标下方的文字大小为20px。

4、内容区域的文字大小是：20px24px，26px，28px，30px，32px，34px。

5、设置界面的图标高度和开关滑动按钮的高度：58px

（三）可点击高度规范

_成88px。88px是一个常用的设计尺寸。

（四）搜索栏高度规范

搜索栏的高度，_成58px。

（五）界面元素之间的距离规范

界面元素之间的常用距离，亲密距离：20px；疏远距离：30px。

A、疏远距离：比如，所有元素距离手机屏幕_左边的距离。

B、亲密距离：比如，左边图标与右边文字之间的距离。

5.5英寸屏幕，1242x2208px-@3x的像素分辨率，逻辑分辨率是414x981px-@1x。物理尺寸是1080x1920px。这个物理尺寸，也是目前_的大屏设计稿尺寸。

手机网页UI设计尺寸是多少

要根据不同手机不同的屏幕分辨率来规定尺寸。

一般做效果图主流都是做480*800来测试，iphone4（或s)就用640*960，但这个都只是效果图，真正开发还需要切图用点9来做屏幕适配。

常见手机显示屏分辨率：96x65，96x96，128x96，128x128，160x128，160x160，176x144，220x176，240x176，320x240，640x480，800x480

苹果4:960×640像素，3.5英寸

三星：480×800分辨率?

小米：480×8544英寸TFT屏幕?

android手机屏幕尺寸

1280×800854×480640×480480×800432×240400×240320×480320×512320×240

扩展资料：

手机ui设计是手机软件的人机交互、操作逻辑、界面美观的整体设计。置身于手机操作系统中人机交互的窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计师首先应对手机的系统性能有所了解。手机UI设计一直被业界称为产品的“脸面”，好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

随着手机移动设备不断普及，对手机设备的软件需求越来越多，手机移动操作系统厂商正在不约而同地建立手机设备应用程序市场，如_le的_Store、Google的AndroidMarket、Microsoft的WindowsPhone7Marketplace，给手机的终端用户带来巨量的应用软件。这些软件良莠不齐，界面各异，手机的终端用户在众多的应用使用中，_终会选择界面视觉效果良好，且具有良好体验的应用留在自己的手机上长期使用。

参考资料：

好了，今天关于“网站界面设计尺寸”的话题就讲到这里了。希望大家能够通过我的讲解对“网站界面设计尺寸”有更全面、深入的了解，并且能够在今后的学习中更好地运用所学知识。

猜你喜欢