当前位置:首页 » 网页前端 » 电脑端web最小按钮尺寸
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

电脑端web最小按钮尺寸

发布时间: 2023-01-13 04:17:22

⑴ 移动app设计时,按钮做多大尺寸

小按钮比大按钮更难于操控。当设计移动界面时,最好把可点击目标的尺寸做大一点,这样更利于用户点击。但这个“大”究竟需要多“大”,才能方便大多数用户呢?丝路教育小编相信很多移动开发者也非常想知道这个问题的答案,最后都在各平台的UI设计规范中找到了答案。

移动平台设计指导规范告诉了我们什么?

在苹果的《iPhone人机界面设计规范》中指出,最小的点击目标尺寸是44 x 44像素。微软的《Windows手机用户界面设计和交互指南》中建议使用34 x 34像素的尺寸,最小也要26 x 26 像素。诺基亚开发指南中建议,目标尺寸应该不小于1cm x 1cm或者28 x 28 像素。

尽管这些指导规范给我们列举了各平台下可点击目标的尺寸标准,但是彼此的标准并不一致,更无法和人类手指的实际尺寸相一致,他们的建议尺寸比手指的平均尺寸要小,这会影响触摸屏下对于点击目标的精准度。

小的点击目标会导致大问题

可点击目标尺寸太小,对于用户体验来说就非常糟糕,因为如果要更精确的触控。用户需要调整手指的操作方式,从指心操作,变为指尖操作,这样才能操作尺寸较小的目标。使用指心操作通常会整个覆盖操作对象,让用户无法分辨他们所要操作的目标,也无法收到操作过程中的视觉反馈,也就无法知晓,他们的操作是否有效。当用户不得不用指尖进行操作时,又出现了一个新问题,这种操作方式非常的慢,而且很吃力,体验很差。

问题不仅这些,目标的尺寸过小还会导致失误的触摸操作。因为尺寸小,所以容易拥挤在一起,用户容易触碰到附近的目标,导致运行结果非用户所愿。手指太大,目标尺寸太小,一根手指的宽度大概能覆盖两个目标的宽度。如果不按压到错误的位置,就会导致错误的操作。食指容易出错,但是拇指更容易出错。因为拇指更大、更笨拙。有时候用户会倾斜拇指,使用拇指的侧边进行操作,但是目标尺寸过小,依然失误频繁。

在移动用户的日常操作中,拇指的使用非常频繁。有时用户无法腾开两只手操作,只能用一只手握住手机,用拇指和食指操作。在这种场景下,用户的操作精度有限,就需要提高目标尺寸来避免操作错误,这就是所谓的友好的触控体验。

食指操作下的平均像素宽度

MIT触摸实验室的做了一项研究,以手指指尖作为调查,分析其感觉机能。研究发现,成年人的食指宽度一般是1.6——2 cm。转换成像素就是45——57 px,这比那些指导书上建议的宽度都要宽。

45——57 px的目标尺寸非常够用,用户可以将整个手指紧贴在目标上。在操作的过程中,用户也能看到目标的边缘。这样用户与控制对象之间的反馈与信息传达变的非常清晰,用户也能知晓他们的操作是否有效。因为尺寸大,定位更快,拖移也更方便。费茨法则中提到过,目标越小,操作耗时就越长。小目标减慢了用户的操作速度,因为需要用户集中精力去精准定位。手指大小的目标则不一样,这种目标给予用户足够的空间操作,容错率也很高。

拇指操作情况下的像素宽度

也有很多用户用拇指敲击屏幕上的目标。拇指比食指要宽,平均宽度大概在2.5cm,转换成像素是72 px。

72像素的实际使用效果很棒,更容易定位、操作的舒适感更好。同样可以看到操作目标的边缘。这意味着用户不用费力的调整手指,使用指尖去操作了。也不用倾斜拇指,用拇指侧面点击目标。

在《小型触摸设备上单手操作研究:关于拇指操作的目标尺寸》这篇文章中发现,目标尺寸的增加会降低失误操作的次数。更多的空间提供了更高的容错率和更精确的操作,同时因为大型的尺寸,目标的表现力也变强。

另外一篇《移动端触摸设计:关于目标选择的关键》中也表达了同样的看法。

手指大小的目标尺寸很理想,但也有特殊情况

将目标尺寸的大小,设置为跟手指大小相近,其中的好处不再赘述。但并不是适合所有的设计场景。在移动设备上,空间有限。这就意味着,如果每个目标的大小都很大,那么屏幕空间根本不够,就需要不断的翻页,这在体验上很糟糕。你需要测量屏幕尺寸,然后计算比例,搞清楚“在这种尺寸的屏幕上,合适的、最大的目标尺寸是多少?”倘若你按照手指大小进行尺寸调整,整个界面的比例很糟糕;再次按照比例调整后,最大的目标尺寸效果也不假,那么就只能使用指导规范上的建议尺寸了。

对于平板设备来说,情况就没有手机那么复杂,因为平板的空间更多。不用害怕没有空间去放置点击目标,空间足够,你可以非常悠然的通过提高尺寸来提高操作适用性。手机是最麻烦的,点击目标的尺寸非常不好拿捏。但正是因为手机的空间有限,容易操作失误,所以才需要设置真实手指大小的目标尺寸。设计师的挑战就在于,要想办法,让屏幕上大多数的目标,尺寸都跟手指大小一致。但也有好处,这迫使设计师设计时更注重功能性、风格更加极简。

为游戏应用设计拇指大小的点击对象

我们无法推测的问题是,用户使用你的应用时,是用食指操作更多?还是用拇指更多?因此,针对这一点,我们要非常细致的做调研,然后设置合理的目标尺寸。 然而,如果你的应用是一款游戏的话,大多数用户会使用拇指。这就是为什么很多游戏应用中,一些控件的尺寸一般有拇指那么大,这样用户就能更稳固的双手持握,更精准的操作。

结论

通过调整目标尺寸的大小,结合实际的应用情况,能够有效的提高移动端的适用性,同时提高用户体验。不管你的应用是游戏还是别的什么。触摸屏上的目标就是用来让用户点击的。如果用户需要去想“我该怎样去点击,才能完成精确的操作”,需要再交互前思考方法,需要调整操作方法,使用多种方法才能完成交互。这说明这款产品的交互设计是糟糕的。在这篇文章里,我抛出了个人的一些观点,在触摸即将成为操作方式的一统时代,如何打造友好的触控体验?这是我们将要面临的问题。期待更多的想法,以及更规范的标准。

感谢阅读!

看完这篇丝路提醒你只要记住2点,食指点击目标尺寸是44 x 44像素,拇指是72 x72像素。所以在画界面的时候,要注意这2个尺寸

小技巧:在导出ICON的时候,假如你的ICON实际尺寸是32×32,那么你可以导出50x50PNG透明背景的ICON,重点是加了透明区域。这样就更方便点击了。

⑵ Web 页面采用多大的宽度最合适

网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计.

网页的尺寸受限于两个因素:一个是显示器屏幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软件,就是我们常用的IE,遨游,Friefox等.

高度:

高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值。

宽度:

1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。

2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005

3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001

注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

所以如果是1024的分辨率,你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点.也方便做一些浮动层的设计.

如果是800的分辨率一般都设成770。但也有设成760的.

这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右.

网页设计标准尺寸:

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

⑶ Web网页设计尺寸,到底选哪个

很多新手设计师都会面对一个问题,Web页面尺寸宽度到底选哪个?

其实答案并不是固定的,可以做成1920,也可以做1280。黑客认为最重要的决定因素在于你自己的工作电脑分辨率。

这是广告公司AdDuplex送出的统计大数据

市面上的电脑屏幕尺寸多种多样,不过大部分都集中在这几种:

1920-1080:目前常用设备中最大的尺寸(Mac 5K屏除外)

1440-900:15寸MacBook Pro为代表,很多UI设计师首选

1366-768:普通的PC电脑

1280-800:13寸MacBook Pro为代表

在以上设备中,13寸和15寸Mac Book,虽然实际分辨率非常大,但由于是Retina屏幕,视觉展示上还属于以上范围。

所以,网站的内容显示宽度大部分都在1200px以内,确保小的电脑屏幕能显示全网页内容。更早的时候很多都是960px,不过由于屏幕越来越大,目前比较少。

在了解过电脑屏幕尺寸后,网页设计尺寸(本文专指宽度,高度不限)选哪个也很清楚了:选哪个都不会错。

事实上很多设计师是这么做的:用小于1920的屏幕去设计1920的网页。

这样设计没错,而且是很多培训机构、学校的标准定义:网页设计宽度尺寸是1920。

但是如果你用了这个神器的Sketch插件,就不会按照之前的结论来设计了。

以前黑客有介绍过。 点击查看

设计师在做界面的过程中需要经常查看设计稿,以便及时修改设计细节。除非你用1920的屏幕可以设计1920尺寸,否则我们的设计尺寸和屏幕尺寸不相同,就会导致预览的界面偏移,需手动调节居中。

如果设计的尺寸和屏幕尺寸保持一致,那么插件预览的效果就会完美,不用每次都要去调节。

本质上网页设计尺寸选哪个都是正确的,关键在于怎么方便、快捷地帮助我们预览、展示设计稿。

在利用sketch插件频繁预览的前提下,黑客建议网页设计尺寸等于你的工作电脑屏幕尺寸,这会节约你很多时间。在设计后台类的界面时,这个方法的优势会更加明显。

最后有一点需要注意,在进行切图的时候,如果遇到全屏的图,需要把切图修改成1920,否则在1920电脑中切图宽度会不足。不过到了切图这一步,就属于设计工作的后期了,我们只需要花点时间把对应切图改成1920即可。

更多UI设计干货文章请关注UI黑客

微信公众号 uihacker

UI黑客官网 http://www.uihacker.com/

UI黑客论坛 http://bbs.uihacker.com/

⑷ 做交互设计时,按钮大小如何规范

做界面交互设计的时候,有个看似简单但依然容易引起撕逼的问题——按钮到底得做多大。无论是面对美术同学设计的各种精美小巧细如针尖的按钮,或是策划同学各种“加加加”的需求轰炸,还是老板“大大大”的呼喊,最终还是需要落地——按钮这玩意,多大才是大,多小才算小。这个时候,就需要一套设计规范和标准,但也要言之有理,让人心服口服地遵守。

本文就介绍一个简单快速的入门,让大家了解到按钮大小设计的逻辑,还有到底应该设多少大小的问题。

事先说明:本文介绍的每一节的课题,都是值得交互设计们深入研究的。本文从简单入手,讲究快速实用,摒弃容易混淆新人的长篇大论,但还是建议能查阅网上的相关资料,才能更加深入地了解这方面的知识,希望能帮助到大家。

1、菲茨定律(Fitts’s Law)

关于按钮到底做多大,有一个很牛逼的公式,称为菲茨定律:

其中:

MT=完成点击的时间,理论上来说越小越好

a、b 是变化参数,不知道有什么用

A = 起点到目标中心的距离,也就是手指移动到按钮的距离

W = 目标在运动轴线上的宽度,也就是按钮的大小

作为一个文科生对于任何数学公式都是拒绝的,有兴趣的同学可以网络详细研究。列出这个公式的目的是,让大家了解到,我们所谓的“按钮手感”,是由哪几个参数影响的。

不想研究这个公式的同学,可以直接看对这个公式的解读(翻译):

1)按钮越大,越容易被点中(这个有点像废话)。

2)尺寸小的按钮,只要增大微小一点,对可点击性就增加很多。

对第二点的理解就是,按钮做得太小是很可怜的,牺牲任何东西都不能牺牲按钮大小

3)随着按钮的增大,可点性增幅降低

同样,一味无脑地增大按钮尺寸,并不能带来体验感的同样幅度的提升,差不多就好。

4)按钮过大,不会显着增加精度,但会降低速度

按钮过大带来的好处会越来越小,而且会带来另外新的问题——想象一下:拿着一个硕大无比如同桌子一样大小的手柄,肯定不如正常尺寸的好。

本节get:菲茨定律是一个很牛逼的定律,想深入研究可以看知乎上的一篇文章(传送门: https://zhuanlan.hu.com/p/25530956 )。

2、不要废话直接给结论吧

菲茨定律是原理,但最终结论是什么呢,到底要设置多大的按钮呢,有很多讲交互的书籍,有各种答案:

ISO标准:

标准尺寸——19mm*19mm(mm是尺寸单位,毫米)

最小尺寸——9.5mm

最低标准——6.4mm

按钮和按钮之间最小间距——3mm

iOS(苹果)标准:

1倍率设备——44*44dp(dp表示像素,根据苹果设备屏幕,换算下来约7mm)

安卓标准:

48dp(约为7.4mm)

微软标准:

115dp(约为9mm)

看了这么多标准,是不是有点懵?

实际上,目前没有一个统一的标准,没有人可以解释为什么9mm的按钮会比8mm的按钮好,熟悉微积分的同学应该知道,一个平滑的曲线是可以无限分割的,没有那个“好”与“不好”的明显边界。

不过,现在界面都要求精细化,按钮都偏向往小了做,所以9mm~15mm就已经算得上是大按钮了,6mm~9mm是普遍喜欢的区域。但做人要有底线,最好不要再低于6mm了,而且细小的按钮加上过密的排布和微小的间距,会更加加重“误触的灾难”。

另外补充一句,特别是游戏,一些重要的入口,是不在这个体系之内的。相信大家对于很多手游内一个硕大的“play”或“开始游戏”按钮的印象都不会陌生吧。

本节get:

大按钮9mm~15mm

小按钮6mm~9mm

请尽量保持在这两个标准内

3、什么是PPI

当有人说最合适的按钮是XX像素时,那么这个人不是外行就是太懒。在移动设备上,不谈设备直接说像素(px)应该是多少多少,都是没有意义的。

打开网络,查看PPI的解释——PPI是Pixels Per Inch缩写,pixels per inch所表示的是每英寸所拥有的像素(pixel)数目。简单的说,每个手机的PPI都不一样,所以你的手机的6毫米(mm),和我的手机的6毫米(mm),是不一样的,也就是对应的像素值(px)也是不一样的。

所以PPI没什么玄乎的,就是把第2节的毫米(mm)转成像素(px)的媒介,计算方法也很简单,像素=PPI*毫米值*0.03937就可以了,当然也可以弄个高大上的公式:

实际工作中,建议大家把一些主流的设备上的都列出来,等到要做的时候再算就会很繁琐,而且事先列出来有助于时刻遵守,做得多了也就不用再一一对着看了,自然而然就会有意识地去遵守,有点像“肌肉记忆”。

另外,大家也会接触到一个DPI的概念,这两个概念非常类似,甚至有一些地方都混为一谈。网上介绍DPI和PPI区分的文章很多,有兴趣的同学可以自行寻找学习,但是有一点个人的建议:如果你是做手机游戏和软件的界面设计的,可以只关注PPI,而无视DPI,不然大量的信息充斥进来,很容易混淆。

那么如何知道设备的PPI呢,很简单直接网络,或者自己也可以算,参考我这个公式:

通过计算发现iPhoneX和官方公布的数值略有差距,可能全面屏采用了一套不同的算法。

另外再最后啰嗦一句,其实很多项目,都是只有一个“设计分辨率”的,也就是GUI设计的时候,只是以一个分辨率作设计,其他分辨率只是进行适配,不太可能每个分辨率都单独进行一套设计。目前游戏主流的设计分辨率是1334*750(iPhone6),或是1920*1080(Plus设备)。

本节get:

根据设备的PPI,把物理大小(mm)转成像素(px),才有实际操作设计的意义。

4、不同的位置对大小的影响

由于移动设备的小巧,所以其持握方式也会对按钮大小有要求,一般来说,离设备边缘的按钮应该设的更大一些,离设备越中间的按钮就可以放宽要求。

另外,如果是竖屏模式的游戏或软件,甚至是可以支持单手操作的,最好在这个基础上增加1mm左右。具体原因是:

横屏操作,和屏幕接触的主要还是大拇指指面,而横屏下,接触屏幕的很有可能是拇指指腹,从接触面积上来说,几乎少了一半。设置过iPhone指纹解锁的人应该知道,录入手指正面的指纹后,系统还需要我们录入指腹的指纹,这也是考虑到单手手持手机下,手指和指纹屏的接触情况。

5、其他解决办法

当然,规范是死的,实际情况还会有很多不得不违反规范的做法,为了让设计效果和实际体验折中妥协,我们还可以采取下列方法:

只牺牲一个维度(宽或高),也能达到较好的点按效果:

不怕小按钮,就怕小按钮扎堆,如果是并排密集的按钮,最好能预留出间距,防止误触:

上面那个3mm,放置在iPhone 8 Plus上对应的像素就是47,对应其他的设备也可以用上文介绍的方法计算出来。

让按钮的触控区域和按钮的实际尺寸脱钩,这个就需要程序做支持了,这是最一劳永逸的做法,可以应对各种不同的情况,但要注意一点:触控区域代替了按钮,执行响应的任务,那么触控区域本身就应该代替按钮,执行遵守上文所说的一系列规范了。

⑸ PC端UI设计尺寸规范

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

现象


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

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

像素密度


要知道,屏幕是由很多像素点组成的。之前提到那么多种分辨率,都是手机屏幕的实际像素尺寸。比如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,至少代码里这么写,但它的道理也和app一样。由于像素密度是设备本身的固有属性,它会影响到设备中的所有应用,包括浏览器。前端技术可以善加利用设备的像素密度,只需一行代码,浏览器便会使用app的显示方式来渲染页面。根据像素密度,按相应倍率缩放。

以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端复杂,关键就在倍率。但也正因为倍率的存在,把大大小小的屏幕拉回到同一水平线,得以保证一套设计适应各种屏幕。站在这条水平线的角度看,会发现它很好理解。

⑹ web网页设计尺寸标准(最小宽度/尺寸)

综上所述,电脑屏幕分辨率1024px,低于1024px则不再考虑,所以以上网站设计网站的最小宽度/尺寸小于1000px;

⑺ web软件的界面尺寸

尺寸适应。分辨率一直是困扰网页设计者的问题,在网页设计中大多还是集中在页面宽度的问题上。适应800px还是1024px,这就好像当年哈密雷特口中的 "To be or not to be",近年来随着显示器的变革这个问题还在愈演愈烈,除了刚刚说的2种分辨率,也许很多设计师脑中已经开始考虑1280px这个宽屏分辨率甚至更高的分辨率。当然也有的设计师干脆就只为800px,说这也是个不错的兼容性考虑,可惜我那1920px的显示器啊整天闲着两边。在 B/S结构 软件界面中从来没有这么简单的办法,因为复杂的功能可能有着大量的操作设置或数据显示,一丝一毫的空间都不容的浪费。并且上一条也指出我们不想用整页滚动条来解决问题,这带来的不单是显示面积的限制,还有就是我们需要考虑的是宽度和高度双重尺寸适应问题。不单单是显示器分辨率,当浏览器不是最大化时界面同样要适应(Mac系统根本就不存在最大化),也就是说界面要时时应对浏览器窗口尺寸大小而调整。所以利用一切可能的手段使页面可以自动适应浏览器窗口尺寸就成为了棘手但却是必须去做的事情。又由于这个问题同时又衍生出的新问题是软件界面在自动适应时不同区域不会是等比缩放尺寸的,势必有些区域随之放大缩小而有些区域固定不变。这一点可以参照 C/S结构 软件界面,以大家常用的网页制作工具Dreamweaver为例,主要的代码显示区域是随窗口尺寸的调整而调整,但上边的菜单及功能按钮区域、下边的属性及结果区域、右边的功能区域都是固定不变的或者单方向调整的(只调整宽度或者高度) 。

⑻ 如何设置WINDOWS 2000的窗口按钮在任务栏的最小宽度

根据你所说情况,可能是用户权限的问题,你可以尝试建立一个新的管理员级的帐户,原来的帐户可以删除。

如果上述方法不灵,那可得修改计算机的注册表了。方法是:打开“注册表编辑器”,找到[HKEY_CURRENT_USER\Software\Microsoft\InternetExplorer\Desktop\OldkAreas],然后选中弹出窗口右侧的一个选项“OldWorkAreaRects”,并删除。在“注册表编辑器”中找到[HKEY_CURRENT_USER\Software\Microsoft\InternetExplorer\Main],选择窗口右侧的“Windos_Placement”,将其删除。退出“注册表编辑器”,重新启动电脑,然后打开IE,将其窗口最大化,并单击“向下还原”按钮将窗口还原,接着再次单击“最大化”按钮,最后关闭IE窗口。以后再打开IE时,窗口就正常了!

如果仍不能正常使用可以尝试重装IE,具体方法是将你的系统安装盘放入光驱,在“开始菜单——运行”里面输入“rundll32.exe Setupapi,InstallHinfSection DefaultInstall 132 c:\windows\inf\ie.inf”即可,如果你使用的是Win 2000操作系统,请输入“rundll32.exe Setupapi,InstallHinfSection DefaultInstall 132 c:\winnt\inf\ie.inf”。
参考资料:http://..com/question/2512057.html

⑼ web面板占整个浏览器大小

一、快捷键法:可以按住“Ctrl++”键,一步步进行调节。二、鼠键结合法:用鼠标和键盘也能实现浏览器的宽屏设置,按住“Ctrl”键的同时向上滚动鼠标滚轮。三、缩放按钮调节:在浏览器的右下角显示“XXX%”,单击它会出现调节手柄,调节好手柄大小,勾选“缩放比例对所用网页生效”。四、调节分辨率:也可以把电脑的分辨率,调节为1024X768。
将网页内容占满整个浏览器方法:一、快捷键法:打开网页之后,发现自己的网页在浏览器中的中央位置处,而两边是空白的,可以按住“Ctrl++”键,一步步进行调节。二、鼠键结合法:用鼠标和键盘也能实现浏览器的宽屏设置,按住“Ctrl”键的同时向上滚动鼠标滚轮,这样也可以使页面变成宽屏。三、缩放按钮调节:在浏览器的右下角显示“XXX%”,这就是浏览器页面的缩放大小(各种浏览器的缩放不尽相同)。单击它会出现调节手柄,调节好手柄大小,勾选“缩放比例对所用网页生效”,现在就可以看到网页已经宽屏了。四、调节分辨率:也可以把电脑的分辨率,调节为1024X768,这样网页也可以宽屏,但是字体有些“胖”(不建议使用)。

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

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