导航:首页 > 万维百科 > ui设计网页界面尺寸大小

ui设计网页界面尺寸大小

发布时间:2020-09-03 00:07:11

1、网页设计合适的页面尺寸是多少

网页设计选用的分辨率是72像素,使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计,一般采用全屏展示和两侧留白的方式。
全屏展示,是整个网站看起来大气一些,但是布局要合理安排,不然看起来有些傻大的感觉。
两侧留白是为了适配不同电脑屏幕的尺寸,能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域,内容限时区域在好控制在1000px-1200px。

2、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的主页指示器的位置。

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

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

如果没有指定的要求,以1920尺寸设计就好(这是目前最普遍的尺寸大小),前端开发人员会自行适配其他的分辨率。

(3)ui设计网页界面尺寸大小扩展资料:

UI设计网页方法

一、呈现更新颖的内容

设计师在进行网页ui设计的过程中需要注意的是,想要让自己的网页看起来更加与众不同,但也不必过于夸大,可以用一些新鲜的理念和不同的布局来吸引用户访问。比如以一种动态的方式,将信息呈现给用户,以此来赢得用户更多的关注。

二、增强元素的设计感

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

三、激励用户更多操作

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

4、响应式网页 界面设计 多大字号

响应式的网页设计,除了布局的变化以外,还有字号的改变。通常使用@media。比如:
h1 {
font-size: 48px;
}
@media (max-width: 767px){
h1 {
font-size: 36px;
}
}

以上的CSS可以让网页在设备屏幕尺寸小于768px的时候,让h1的字号从原始的48px变为36px。在实际的应用中,尤其是h1、h2、h3等等这样的大标题的字号设置,其实还是有一点点的瑕疵。因为可能需要额外多设定几个@media的宽度。
屏幕宽度从1280px、1024px、768px、640px、480px,直到320px,跨度非常大,为了保持比较完美的显示,通常会用Screen Size之类的浏览器插件,来显示不同宽度下布局的显示状况。h1 标签内,因为字号大,字数也或多或少,为保险起见,有时会为每一种屏幕宽度都定制一个合适的字号,这样稍显麻烦。
有一种解决的方案,用Viewport的方法。
%vw = %viewport width

我们用%vw来定义字号,也就是说用屏幕宽度的百分比来定义字号的大小。例如:
h1 {
font-size: 2.5vw;
}

这样一来,无论屏幕宽度如何变化,h1的字号会保持在Viewport宽度的2.5%的大小。

5、做手机界面设计的尺寸是多少

从设计方面来看,做手机界面设计的尺寸一般分为iPhone和Android两种设备。

如果以iPhone为设计设备,尺寸一般是使用750x1334,1125 x 2436,1242 x 2208这三种尺寸设计都可以,750x1334是2倍图设计,1125x2346和1242x2208都是3倍图来进行设计。

如果是用PS做设计稿就用750*1334,如果是用SKetch或者XD来设计,常见是用1倍尺寸来说,也就是375*667或者375*812(iPhone X)。

如果以Android为设备进行设计,尺寸一般使用720x1280,1080x1920进行设计第一种是2倍图,第二种是3倍图。

近年来iPhone和Android的设备增多,各尺寸也逐渐变多,下面有一份安卓屏幕尺寸表:

以及一份iOS屏幕分辨率和尺寸表:

(5)ui设计网页界面尺寸大小扩展资料:

1、UI界面设计的基本要素:

机界面层级: idle(待机界面) Mainmenu(主菜单) Submenu(二级菜单)Third level menu(三级菜单) 界面除了包括图标和文字外,比较重要的还有function animation(呼叫,发送信息等) 以及 function interface(计算器,日历界面等)

明确意义的图标,风格鲜明的版面设计是手机界面设计的重要工作,较为流行的是以Motorola,Nokia等为代表的欧洲简单风格,以及韩国的时尚绚丽的风格。

2、设计注意事项:

尺寸问题: 480X800,540X960,720X1280,1080X1920象素尺寸是较常见的手机屏幕尺寸,在设计时可以根据实际产品要求进行设计,更大的屏幕可以有更多的交互表现和视觉元素的支持,较为自由。

色彩问题: 由于手机lcd本身的限制,在色彩的还原程度上没有pc如此完善,因此在选用色彩时要根据使用的屏幕进行调节。

可实现性问题: 受到硬件运算速度和内存的影响,以及不可预计的后台程序开发难度,过于复杂的效果将很难进行实现,与程序工程师和ui工程师,硬件工程师的沟通显得尤为重要。

6、请问做后台界面设计用多大的设计尺寸合适?

尽量大些,前端可以按需求自适应 你可以做个大到1920尺寸宽的设计图

7、网页和软件UI设计用多大尺寸显示屏比较合适、?

网页1002PX宽度最好。
软件UI,当然是看你软件是在什么机器上运行拉。

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

这个不同手机尺寸不一样,比如
iphone3 320*480 iphone4 640 * 960
android 240*320 320* 480 480* 854 这些比较常用,还有一些其他分辨率
看你具体是针对什么手机做的了!

9、手机端网页设计尺寸多少

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

与ui设计网页界面尺寸大小相关的知识