移动端关我们页面设计（移动端界面网站设计）

金生今天 5

默认

摘要： 移动端网页设计尺寸标准1、尺寸：336px x 280px 适用于内容页侧边栏或文章内的广告，相较于中矩形广告，尺寸稍大，能够展示更多内容。Skyscraper（摩天条幅广告）尺...

移动端网页设计 尺寸 标准

1、尺寸：336px x 280px 适用于内容页侧边栏或文章内的广告，相较于中矩形广告，尺寸稍大，能够展示更多内容。Skyscraper（摩天条幅广告）尺寸：160px x 600px 适用于网页侧边栏的垂直广告，因其高度较长，能够吸引用户的垂直注意力。选择合适的网页 banner 设计尺寸是确保其在各种设备和平台上都能获得良好显示效果的关键。

2、Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。

3、目前市面上显示器屏幕尺寸为19-21寸，屏幕分辨率大概在1280px*800px—1440px*900px之间，前端工程师在写页面时，宽度一般设为1180px—1220px（当然，这个宽度也不是绝对固定的）。因此在做产品设计时，设计web端产品，宽度会设为1400px作为容器，位于容器上方再画一个1200px的矩形，内容区域的容器。

移动端网站制作的有哪些要求?

简洁明了：网站首页的信息要简洁，概括网站的核心内容。适配性：标题或底部栏必须与手机宽度适配，确保在各种手机屏幕上都能良好显示。兼容度：做好各种手机画面的网页内容的兼容度，确保用户在不同设备上都能获得一致且优质的浏览体验。导航便捷：导航尽量采用底部导航的方式，导航菜单数目以4-5个为佳，便于用户快速找到所需内容。

内容为王要想培养自己的固定用户，一定要坚定内容为王。推出自己原创的优质内容、紧抓热点、有自己独特的思想等来吸引并牢牢抓住用户的心，只有这样才能够在同类型的竞争者中获得更好的发展。

数量控制：移动端网站页面中的图片数量应适中。虽然图片能增强视觉效果，但过多的图片会导致页面加载缓慢，影响用户体验。手机屏幕空间有限，过多的图片也会占用过多屏幕面积，影响信息的展示。清晰度保证：图片的清晰度至关重要。在移动端设备上，由于屏幕大小和分辨率的限制，用户对图片的清晰度要求更高。

因此，手机网站制作必须考虑到兼容于多种浏览器。左右滑动才能浏览网页，因此在设计手机网页大小时，能够以滑动屏幕的方式来阅读网页，比不断放大网页观看来简单得多。

要遵循的规则就是尽量保持整洁，不要显得过于杂乱，由于乱糟糟网站会影响到客户的注意力，在手机网站界面，在保持原有的风格的基础上，尽可能的布局合理。

移动端界面设计常识规范

常用全局边距有32px、30px、24px、20px等，数值通常为偶数。不同产品根据气质采用不同的边距，如iOS原生态页面使用30px边距，微信使用20px边距，支付宝使用24px边距。最小边距建议不低于20px，以避免界面内容过于拥挤。

遵循大小写和标点符号的规范使用。优化事项重点突出：每个页面都应有明确的重点，避免页面上出现其他干扰因素。流程明确：确保用户在进行操作流程时，不会出现目标流程之外的内容打断用户。异常可控，有路可退：设计异常状态提示和解决方案，使用户在出现异常时能够有路可退。

Ant Design mobile（简称Antd Mobile）是蚂蚁金服推出的一套移动UI设计语言和React组件库，旨在帮助设计师和开发者快速构建高质量的移动端界面。以下是对Ant Design Mobile设计规范的详细介绍：设计原则 Antd Mobile遵循一系列设计原则，以确保在不同设备和平台上提供一致且优秀的用户体验。

移动端UI设计在提升用户体验方面起着至关重要的作用。为了打造友好的移动应用界面，设计师需要遵循一系列原则。以下是关键的设计原则：简洁明了的设计移动端设备屏幕尺寸有限，因此设计应以简洁为核心。精简界面元素，去除冗余信息，确保用户能够迅速理解界面内容。

移动端H5页面的设计稿尺寸(上)

经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。

H5页面设计尺寸的规范是根据手机屏幕尺寸来制定的，主要目的是确保页面内容在不同手机上都能完整呈现。手机屏幕尺寸和比例不一，因此设计时需要考虑内容的优先级，将重要的元素放在安全区内，比如背景图和关键文字信息。而边缘部分则划分为出血区，这部分内容可以被裁剪或用于遮挡手机背景。

尚界H5的尺寸通常指的是在移动端网页设计中的适配规范。以下是具体细节：视口宽度：主流移动设备屏幕宽度集中在375px（iPhone 6/7/8）至414px（iPhone 6/7/8 plus）之间，设计时常以375px为基准宽度进行布局。

你好手机像素尺寸，现在市场上大部分是：720*1280px，当然，还有680*1008；苹果的不知道。五六尺寸是：360*640 建议以：720*1280px为准来设计手机版面，ps：避免做到手机上以后图片失真。

在做设计稿的时候，我们还是按照APP的设计稿尺寸来做，那就是375*667，除非有特殊要求。02 导航栏的高度同APP一样，都是做44PX高度来进行适配。03 导航栏上的字体也同APP没什么差别，都是17px。