网页设计倍率图？网页设计宽度？

金生 01-03 161

默认

摘要： 移动端网页设计尺寸标准Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144p...

移动端网页设计 尺寸 标准

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

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

尺寸：336px x 280px 适用于内容页侧边栏或文章内的广告，相较于中矩形广告，尺寸稍大，能够展示更多内容。Skyscraper（摩天条幅广告）尺寸：160px x 600px 适用于网页侧边栏的垂直广告，因其高度较长，能够吸引用户的垂直注意力。

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

UI设计师必备-蓝湖使用 方法

UI设计师使用蓝湖平台进行项目协同开发的方法如下：注册与登录：访问蓝湖网站，进行注册并登录。安装扩展功能：在蓝湖网页上下载并安装蓝湖的扩展功能。创建团队与邀请成员：登录后，在左上角点击向下箭头，创建新的团队。在右上角邀请同事，生成链接并发送给团队成员。

访问蓝湖网站：首先，在浏览器中搜索“蓝湖”并访问其官方网站。注册账号：如果还没有蓝湖账号，点击页面上的注册按钮，填写相关信息进行注册。登录账号：注册成功后，使用账号和密码登录蓝湖平台。下载蓝湖插件登录后下载：登录蓝湖平台后，在页面上找到并点击下载蓝湖插件的链接。

注册与登录访问蓝湖网站：首先，在浏览器中搜索“蓝湖”并访问其官方网站。注册账号：如果还没有蓝湖账号，点击页面上的“注册”按钮，填写相关信息进行注册。注册完成后，使用注册的账号和密码进行登录。

在PS中，点击左上角的向下箭头，创建新的团队。在右上角，邀请同事查看、编辑项目，生成链接并分享给团队成员。在PS中，打开“窗口”菜单，选择“扩展功能”，找到并激活蓝湖插件。重新登录蓝湖网页版账号。选择正确的团队和项目。确定当前操作的效果图尺寸。

如何批量 导出 画板 图像

排除特定画板：在画板列表中，取消勾选不需要导出的画板前的对勾即可。执行导出点击界面右下角的导出切片（Export Slices）按钮，系统将自动生成图像文件。默认导出格式为 PNG，适合需要透明背景或高质量图像的场景。

选择导出为打开文件后，依次点击菜单栏的文件 → 导出 → 导出为。勾选使用画板在弹出的导出对话框中，找到 “使用画板” 选项并勾选。此步骤是关键，确保系统识别需要导出的多个画板。设置画板范围并导出根据需求选择导出的画板范围（如全部画板或特定编号的画板），点击导出完成操作。

在AI软件中批量导出图片，可按照以下步骤操作：打开AI软件并导入图片：启动AI软件，将需要导出的图片导入到软件中。选择画板工具：点击软件界面左侧的【画板工具】。绘制矩形画板：在第一个图标上绘制一个矩形作为画板，确保覆盖整个图标区域。为其他图标重复操作：对其他需要导出的图标执行相同的画板绘制操作。

打开文件并选中画板启动Adobe PHOTOSHOP CC 2018，打开需要导出的画板文件，在画布中选中目标画板。进入导出设置界面在右侧图层面板中，用鼠标右键单击画板名称，在弹出的菜单中选择【导出为】。添加缩放参数在弹出的对话框右侧，找到【缩放全部】选项旁的【+】号标识，点击添加文件缩放参数。

在PS中批量导出画板JPG的步骤如下：把多张画板保存为psd格式。点击文件--导出--图像文件。点击上方的脚本，选择图片处理（图片），进入批处理窗口。在窗口左侧的文件夹中选择要导出的psd文件夹，然后在右侧的目标文件夹中选择要保存的文件夹。

按单个画板导出（独立文件）重新启动导出：点击【文件】→【导出】，选择保存路径和格式（如JPEG）。启用画板选项：勾选【使用画板】，并在下方选择【全部】。确认导出：点击保存后，系统会为每个画板生成独立文件（如画板1和画板2分别导出为两个JPEG）。

UI设计师必备项目协同开发平台-蓝湖使用方法

1、访问蓝湖网站：首先，在浏览器中搜索“蓝湖”并访问其官方网站。注册账号：如果还没有蓝湖账号，点击页面上的注册按钮，填写相关信息进行注册。登录账号：注册成功后，使用账号和密码登录蓝湖平台。下载蓝湖插件登录后下载：登录蓝湖平台后，在页面上找到并点击下载蓝湖插件的链接。

2、UI设计师使用蓝湖平台进行项目协同开发的方法如下：注册与登录：访问蓝湖网站，进行注册并登录。安装扩展功能：在蓝湖网页上下载并安装蓝湖的扩展功能。创建团队与邀请成员：登录后，在左上角点击向下箭头，创建新的团队。在右上角邀请同事，生成链接并发送给团队成员。

3、在PS中，点击左上角的向下箭头，创建新的团队。在右上角，邀请同事查看、编辑项目，生成链接并分享给团队成员。在PS中，打开“窗口”菜单，选择“扩展功能”，找到并激活蓝湖插件。重新登录蓝湖网页版账号。选择正确的团队和项目。确定当前操作的效果图尺寸。

4、登录后在左上角点击向下箭头，创建新的团队。右上角邀请同事，生成链接并发送给团队成员。在PS中，打开窗口扩展功能，找到并激活蓝湖。登录注册的账号，选择正确的团队与项目。确定当前处理的图片倍数。点击切图功能，选择需要切图的图标并命名，点击标记。

5、灵活的左侧栏目录调节功能介绍：蓝湖的页面布局非常灵活，你可以根据自己的使用习惯，随意调节文档和页面的分区大小，以及左侧栏和展示区的宽度。操作指南：通过拖动页面上的分隔线，你可以轻松调整各个区域的大小，使其更符合你的工作习惯。

如何用Sketch导出AI生成的UI设计图片?快速保存图像的指南

1、快速浏览导出文件，确认命名、尺寸、格式无误。结合自动化工具（如Gulp）进一步压缩图片或转换格式（如PNG→webP）。总结通过规范图层组织、合理设置导出参数、批量操作优化，可高效完成AI生成UI内容的导出。关键点包括：分辨率匹配：避免位图过度放大。格式适配：根据元素性质选择PNG/JPG/SVG。批量处理：利用多选与预设复制功能提升效率。