web端及移动端原型设计规范
1、端口类型：目前需设计的端口主要有：web端（即网页）、移动端（app、小程序等移动设备）、IPAD（IPAD是一种移动设备，但也有自己特定的尺寸）、智能设备（例如智能电视、智能手表等等）。由于我更多接触的是web端和小程序端口，后面会以这两个为主。
2、．已上传至蓝湖协作平台的高保真界面，应根据平台中的标注尺寸进行精确还原，Web界面还原度不得低于95%；移动端还原度为100%（精确到一像素）。2．开发人员完成视觉部分内容以后，必须由UI设计师及前端技术负责人进行校对工作。
3、移动端原型制作：Axure能够轻松创建移动应用的原型，帮助设计师和开发人员更好地理解产品的交互逻辑和界面布局。软件原型制作：对于桌面应用或软件产品，Axure同样能够创建详细的原型，包括界面布局、交互逻辑等。流程图框架图制作：Axure还支持创建流程图和框架图，帮助用户梳理产品的整体结构和流程。
4、一般原型设计规范： 产品的内容框架：产品功能的信息架构、流程判断的信息架构、带注解的线框图、过渡页面、带算法的页面、页面流程图（Axure0的页面快照）、多入口流程图、具体模块图、多方协作图、动画效果等。如果需要定义原型规范，请总结以上要点。
5、经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。
移动端网页设计尺寸标准
1、Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。 无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。
2、经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。
3、目前市面上显示器屏幕尺寸为19-21寸，屏幕分辨率大概在1280px*800px—1440px*900px之间，前端工程师在写页面时，宽度一般设为1180px—1220px（当然，这个宽度也不是绝对固定的）。因此在做产品设计时，设计web端产品，宽度会设为1400px作为容器，位于容器上方再画一个1200px的矩形，内容区域的容器。
4、在PC端网页设计中，通常选用1200px宽度作为安全区域的设计标准，这是基于目前市面上的设备主流分辨率及栅格概念的出现而得出的结论。使用栅格系统可以有效提高网页的规范性、增强页面统一性并提升用户体验。在移动端网页设计中，则需要采用响应式设计来适应不同设备的屏幕尺寸和分辨率。
5、网页尺寸的设计标准因设备类型而异，主要分为PC端和移动端两大类：PC端网页的设计尺寸 标准设计稿尺寸：宽度通常为1920px，高度则建议最小为1080px。这一尺寸能够适配大多数PC显示器的分辨率，确保网页内容在不同设备上都能良好展示。
移动端Web页面适配方案(整理版)
移动端web页面的开发，由于手机 屏幕尺寸 、 分辨率 不同，或者需要考虑 横竖屏 问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
Rem适配方案通过动态调整根元素的字体大小来实现不同屏幕适配，适应性强，兼容性好，适用于大部分移动端系统和机型。动态设置根元素字体大小通常采用媒体查询或javascript实现，确保页面在不同设备上呈现适配效果。计算rem值时，需要将视觉稿上的px单位值转换为rem单位，Sass等预处理器可以简化这一过程。
开头从苹果手机iPhoneX发布之后，前端人员在开发移动端Web页面时，得多注意一个对IOS所谓安全区域范围的适配。这其实说白了就是iphoneX之后的苹果手机，在页面上，你需要对顶部和底部多预留一点空间。造成这个问题的主要原因就是苹果手机在屏幕上出现了所谓的刘海屏，而且更是在屏幕下方加了一条小黑条。
总结而言，通过结合HTML lib-flexible插件、动态计算字体大小和响应式设计原则，可以有效实现移动端 css rem 的无限适配，确保网页在各种设备和屏幕尺寸下的良好显示效果。开发者应根据实际项目需求选择合适的方法，并在开发过程中持续优化以满足不同场景的适配需求。
做移动端Web页面时,处理IOS的安全区域
1、safe-area-inset-right：安全区域距离右边边界距离，竖屏时为0。safe-area-inset-bottom：安全区域距离底部边界距离，大约高度为34px。
2、首先，在IE6浏览器的菜单栏中找到并点击“工具”选项。然后，在下拉菜单中选择“Internet选项”。进入安全设置：在“Internet选项”对话框中，点击上方的“安全”选项卡。接着，在“选择一个区域以查看或更改安全设置”部分，选择“Internet”区域（这通常是默认选中的）。
3、iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。
4、点击“自定义级别”按钮。在弹出的“安全设置Internet区域”窗口中，找到“显示混合内容”这一选项。将此选项从默认的“提示”更改为“启用”。应用并确定：点击“确定”按钮保存更改。返回“Internet选项”窗口，再次点击“确定”以应用所有更改。
