本文目录一览：
移动端网页设计的原则有哪些?
1、菜单简洁明了 在移动端网页设计中，因屏幕大小有限，无法设置过多内容，并且在移动设备或平板电脑中用户会厌烦滚动大型的菜单栏或点击数量众多的子菜单，因而菜单栏应简洁明了，有简练的产品、服务概述，这样会缩小用户的查找范围，对进一步信息进行点击或利用搜索功能筛选。
2、内容在上，操作在下 内容在上：最重要的内容放在上面，一方面符合大家的心理预期---新闻头条一般都在顶部，另一方面也符合大家从上到下看东西的习惯。同时，由于底部容易被手指遮挡，所以内容应该放在上面最好。操作在下：手指能触达的热点区域主要分布在屏幕下方。
3、让你的整个网页都适合在移动端上浏览 相比在移动端上直接操作桌面版网页，经过适配的移动网页会大大方便用户的操作使用。将主操作按钮设计得更友好 手机用户很容易忽视手机界面上的元素，所以主操作按钮要放在显要位置。
4、减少文字输入 记住手机网站不是APP，不要繁琐的做很多操作，尽可能的简洁明了，减少使用者输入文字的机会，例如用户名、密码等，都是手机网站制作时要尽力避免的。后期的营销推销推广 朗晟建议企业制作一个移动端网站前期，需要有一个详细的策划，不要忽略了用户体验。
移动端网页设计尺寸标准
Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。 无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。
经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。
目前市面上显示器屏幕尺寸为19-21寸，屏幕分辨率大概在1280px*800px—1440px*900px之间，前端工程师在写页面时，宽度一般设为1180px—1220px（当然，这个宽度也不是绝对固定的）。因此在做产品设计时，设计web端产品，宽度会设为1400px作为容器，位于容器上方再画一个1200px的矩形，内容区域的容器。
常见网页设计尺寸 桌面端网页设计尺寸：一般为宽度1920像素，高度则视内容而定。这一尺寸是现代显示器的主流分辨率，保证了用户在桌面设备上浏览的舒适度。 移动端网页设计尺寸：随着移动设备的普及，响应式设计变得越来越重要。
一个好的移动网页是怎么设计的
1、让你的整个网页都适合在移动端上浏览 相比在移动端上直接操作桌面版网页，经过适配的移动网页会大大方便用户的操作使用。将主操作按钮设计得更友好 手机用户很容易忽视手机界面上的元素，所以主操作按钮要放在显要位置。
2、移动网站的设计是完全独立的 移动网站的设计完全独立于PC站的设计。设计风格可能与PC终端相似，但总体设计尺寸和布局有所不同。移动与PC站分离的主要原因是移动网站的浏览屏幕比较小，所以移动网站的功能和尺寸肯定会比PC网站小，考虑到用户体验，主页设计和页面设计都应该关注第一屏。
3、表单简短贴心 移动端网页设计时应考虑到用户时间，表单应简短贴心，在表单中诸如电话号码、卡片类型和发卡机构是可选项，用户可根据自身情况选择填写即可，以此来建立用户对网站的信任。比如表单只是用户用来订阅电子报，仅需登记用户姓名和邮箱即可；若是支付表单，应省略不必要字段，以此来增加网站安全度。
4、之后的往下的页面都是超出一个屏幕的，用来展示电商每个细分类别中最好的商品进行展示。用大量的品类和优惠价格打动用户进入进行消费。
5、呼吸的空间 使用负空间让重要的内容吸引用户的注意力。留白，或者负空间，指的是页面设计布局中的空白部分，或者空白元素，它们常常被忽略和忽视，虽然许多设计师认为这样的设计会浪费屏幕的空间，但是留白本身就是设计的基本元素之一。“留白常常被认为是一个活跃的元素，而非被动存在的间隙和背景。
HTML5移动网页的设计稿尺寸应该是多少?
1、经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。
2、H5的尺寸一般设计为640x1136px 既满足了显示需求，又能降低用户加载图片需要的带宽。可以用各种分辨率的移动智能手机查看我们设计的H5页面时，当然，也会出现如下的情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。第一：背景图片必须采用background-size：cover；来实现。
3、media only screen and （max-width：449px）{ } 自动根据屏幕像素 调用不同的CSS代码。
4、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。当美工完成设计图之后，前端工程师的工作就开始了。
标签： 网页设计移动端
