本文目录一览：
web端及移动端原型设计规范
端口类型：目前需设计的端口主要有：web端（即网页）、移动端（APP、小程序等移动设备）、IPAD（IPAD是一种移动设备，但也有自己特定的尺寸）、智能设备（例如智能电视、智能手表等等）。由于我更多接触的是web端和小程序端口，后面会以这两个为主。
产品经理制作的移动端原型确实可能因不规范而被吐槽，常见问题包括尺寸错误、模块不规范、线条感过重、预览异常等。具体如下：原型尺寸不规范移动端原型需严格遵循iOS设计规范，例如标准页面宽度为375px，高度通常为667px（长页面可突破此限制，但需保持底部标签栏固定）。
导航是结构也是节奏：导航体系是移动端设计规范的核心，好的导航能让用户清楚自己的位置和目标方向。常见导航形式有底部导航栏、顶部Tab、侧边栏、悬浮按钮等，要根据产品结构选择合适的形式，重点在于逻辑清晰、层级明确，路径越短、操作越少越好。
底部导航栏：高度48-56px，图标与文字垂直排列时需控制总高度不超过80px。设计工具中的原型图设置画布尺寸 Web端：建议设置1440×900px（中屏基准）或1920×1080px（大屏基准），内容区域限制在1200-1440px内；移动端：iPhone选择375×812px（带状态栏），Android选择360×720px。
设计师在原型步骤及应该想好对应的图层结构，交互特效，并和前端开发人员做好交流，是否可以实现，功能的评估一定要细致 1．已上传至蓝湖协作平台的高保真界面，应根据平台中的标注尺寸进行精确还原，Web界面还原度不得低于95%；移动端还原度为100%（精确到一像素）。
移动端H5页面的设计稿尺寸(上)
经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。 这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。笔者从其他文章中找到了一些答案。
设计稿尺寸与倍率处理设计师需将原型稿尺寸放大2倍处理。例如，原型稿中的元素宽度为100px，设计稿中应设置为200px。此操作旨在适配高分辨率屏幕（如Retina屏），确保图像在移动端显示清晰，避免边缘模糊或锯齿问题。
H5页面设计尺寸的规范是根据手机屏幕尺寸来制定的，主要目的是确保页面内容在不同手机上都能完整呈现。手机屏幕尺寸和比例不一，因此设计时需要考虑内容的优先级，将重要的元素放在安全区内，比如背景图和关键文字信息。而边缘部分则划分为出血区，这部分内容可以被裁剪或用于遮挡手机背景。
一个好的移动网页是怎么设计的
1、让你的整个网页都适合在移动端上浏览 相比在移动端上直接操作桌面版网页，经过适配的移动网页会大大方便用户的操作使用。将主操作按钮设计得更友好 手机用户很容易忽视手机界面上的元素，所以主操作按钮要放在显要位置。
2、响应式设计：确保桌面端与移动端界面无缝衔接，内容布局灵活适配不同屏幕尺寸。8个移动优先设计案例解析 Apple：便捷的滚动式导航设计亮点：隐藏导航优化：通过滚动页面获取信息，减少21%的内容可发现性损失，并降低导航操作时间。底部购物袋图标：符合用户购买需求，操作路径直观。
3、表单简短贴心 移动端网页设计时应考虑到用户时间，表单应简短贴心，在表单中诸如电话号码、卡片类型和发卡机构是可选项，用户可根据自身情况选择填写即可，以此来建立用户对网站的信任。比如表单只是用户用来订阅电子报，仅需登记用户姓名和邮箱即可；若是支付表单，应省略不必要字段，以此来增加网站安全度。
UI设计师必看,灵感爆表UI作品集
1、精选作品集范例参考以下范例涵盖不同风格与设计工具，适合快速获取灵感：个人作品集模板Sketchapp适用工具：Sketch 特点：模块化设计，便于快速调整布局与配色，适合展示移动端与网页设计项目。
2、网址：http：//cofolios.com/#modal-close 简介：cofolios网站展示了苹果、谷歌、微软、Airbnb等互联网巨头公司设计师的作品集。这些作品集对于UI设计师来说具有很高的学习和借鉴价值。uecook-设计灵感社区 网址：http：//uecook.com 简介：uecook是一个设计灵感社区，网站上的设计作品质量都很高。
3、UI设计师可通过搜UI（SOOUI）获取必收藏的上百种配色方案专辑，涵盖单色系、冷色系、明亮色系、暖色系、补色系等核心类型。以下为具体说明及扩展建议：核心配色方案类型解析单色系（Monochromatic）基于单一色相通过调整明度、饱和度生成层次感，例如深蓝→浅蓝→天蓝的渐变组合。
4、链接：https：// 图片：Bestfolios 简介：精选产品、交互、平面与动效设计，拥有1087个来自UI/UX设计师、平面设计师和动画设计师的最佳作品集、200份简历和更多设计灵感的画廊。
5、要让UI作品集脱颖而出，需从设计思路展示、作品集结构优化、平台选择三方面入手，结合优秀案例的共性特点，打造兼具专业性与差异化的作品集。以下是具体方法：展示作品设计思路的整体流程核心原则：UI设计是解决问题的过程，作品集需呈现“为什么做”而非仅“做了什么”。
移动端网页怎么设计尺寸
在手机上不能固定宽度，要按百分比写页面宽度。才能自适应设备。主要是这两点，当然细节上面还有很多和PC端不一样的地方。指向文件错误，比如你的网页文件在A，但是你却指向了B。你把指向的文件放到网页文件内在试试。如果下载下来的图片大小规格完全一样的话，在photoshop中设置一个动作，就能批量处理了。
在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080x1920，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。
经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。 这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。
移动端H5页面的尺寸一般设计为640x1136px。
基础设计尺寸与适配逻辑移动端H5页面通常以640x1136px为基准设计尺寸，该尺寸基于早期主流设备（如iPhone 4/5的视网膜屏）的分辨率，既能满足显示清晰度需求，又能通过压缩图片资源降低加载带宽。但需注意，实际开发中需通过响应式布局适配不同设备，而非固定尺寸。
标签： 移动端网页设计欣赏
