网站的移动端一般设计多宽

1、在移动端设计稿为1080p的时候,用rem布局。怎么计算宽度和字体大小？

原文链接：http://caibaojian.com/rem-and-px.html

1rem等于多少px呢？·
1rem等于html根元素设定的font-size的px值，假如我们在css里面设定下面的css。
//code from http://caibaojian.com/rem-and-px.html
html{font-size:14px}

那么后面的CSS里面的rem值则是以这个14来换算，例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px，同理，假如一个设计稿为宽度42px,高度为35px，则换成成rem，则是42/14=3rem，35/14=2.5rem。
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

来源：前端开发博客
这是我查看资料分享过来的，具体对不对要看题主测试之后的结果

2、移动端设计稿是750 实现的时候尺寸是多大

750是像素、PC端是1920、移动端实现也是750

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

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

4、移动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，重点是加了透明区域。这样就更方便点击了。

5、移动端美工画布设计尺寸多少合适

网页尺寸：
淘宝是990（950）宽*任意高，要是自己或者企业的话，这个你随便定，一般宽度是在950-1200之间
手机尺寸：
淘宝620（480）宽*任意高，要是自己或者用其他软件的话请参考软件的要求。

6、移动端web在设计时宽度尺寸是多少合适？

首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。
像素密度
要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。

7、移动端网页设计的原则有哪些?

1、菜单简洁明了

在移动端网页设计中，因屏幕大小有限，无法设置过多内容，并且在移动设备或平板电脑中用户会厌烦滚动大型的菜单栏或点击数量众多的子菜单，因而菜单栏应简洁明了，有简练的产品、服务概述，这样会缩小用户的查找范围，对进一步信息进行点击或利用搜索功能筛选。

2、表单简短贴心

移动端网页设计时应考虑到用户时间，表单应简短贴心，在表单中诸如电话号码、卡片类型和发卡机构是可选项，用户可根据自身情况选择填写即可，以此来建立用户对网站的信任。比如表单只是用户用来订阅电子报，仅需登记用户姓名和邮箱即可;若是支付表单，应省略不必要字段，以此来增加网站安全度。

3、简化表单字段

设计表单时应考虑到表单字段数，减少用户输入字数;也要尽量将表单做的清晰明了，使必填项和可选项一目了然。而表单字段可以采用多种类型，如下拉式、复选框式以及日历式。同时在用户输入支付信息、物流信息以及预订行程时，这些类型的字段都能派的上用场，以及便于回头用户更便捷地应用自动填写功能，缩短购物过程，并为不愿注册账号的新用户提供访客支付选项。

4、通过行为召唤组件(CTAs)吸引用户眼球

行为召唤组件在移动网页中尤为重要，在设计移动网页时，尽可能将行为召唤组件放在最显眼的黄金位置，相比电脑端用户，会让移动端用户访问网站目的更加明确。同时在理想情况下，可以将行为召唤组件放置在页眉上方，用突出的颜色或字体显示，在合理范围内让它们更加醒目，并清晰地表达其内容。

5、提供用户所需的搜索结果

在设计时，应设置搜索功能，在搜索时在第一页就显示出用户所需的搜索结果，在搜索完成后，为用户再提供一些筛选条件，如价格、相关度、畅销商品等，以便用户筛选出最适合的结果。因为一些移动用户在访问网页时目的十分明确，很少在模糊菜单或一页又一页的商品间徘徊。

关于移动端网页设计的原则有哪些，环球青藤小编就和您分享到这里了。如果您对网站设计、页面排版、图像处理方面比较感兴趣，希望分享的这篇文章能够对您有所帮助。如若您还想了解更多关于平面设计的素材及技巧等内容，可以点击本站的其他文章进行学习。

8、移动端web在设计时宽度尺寸是多少合适

基本上都是640吧，高度由于是专题，可以不受限制的

9、做移动端的设计 以什么尺寸来设计

IOS篇
1、尺寸及分辨率
iPhone 界面尺寸：320x480、640x960、640x1136
iPad 界面尺寸：1024x768、2048x1536
（以上单位都是像素哦，至于分辨率一般网页UI和移动UI基本上都只要 72 ppi）
当然，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机尺寸来设计，比较方便预览效果，一般用 640x960 或者 640x1136 的尺寸设计。
P.S. 作图的时候确保都是用形状工具（快捷键：U）画的，这样更方便后期的切图或尺寸变更~
2、界面基本组成元素
iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域
这里取用 640x960 的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸：
状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40 px
导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮，其高度为：88 px
主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px
内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：734 px

iPhone/iPod Touch
第一代、第二代、第三代

iPhone4/iPhone4s

iPhone5/iPhone5C/iPhone5s
至于我们经常说的 iPhone5/5s 的 640x11136 的尺寸，其实就是中间的内容区域高度增加到：910 px
P.S. 在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变化，尺寸高度也还是没有变化的，只不过大家再设计 iOS7 风格的界面的时候多多注意一下~

3、字体大小
iPhone 上的字体英文为： HelveticaNeue 至于中文，Mac下用的是黑体-简，Win下则为华文黑体。
下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小，像素为单位，也就是大家在PS里的文字像素大小。

P.S. 多留心下一些大公司的数据研究，你会发现很多你根本没考虑到的问题

Android篇
1、尺寸及分辨率
Android 界面尺寸：480x800、720x1280、1080x1920... （单位：像素）
Android 比 iPhone 的尺寸多了很多套，建议取用 720x1280 这个尺寸，这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。