实用干货！教你手机UI设计稿完美适配！
今天跟姐妹们分享超实用的移动端UI设计技巧，让你的设计稿完美适配各种机型，不再担心尺寸错乱的问题~
一、设计尺寸选择
以前我总是纠结到底用什么尺寸，其实移动端设计稿选择375x812就够啦！这个尺寸基本能覆盖大部分手机，而且方便还原度把控。记得设置分辨率72ppi，这样导出的图标和切图才不会虚。
二、栅格系统设置
贼多小伙伴问我怎么让界面元素对齐，其实关键就在栅格系统！
按Ctrl+R显示标尺 右键标尺选择“像素” 设置12列栅格，左右边距各16px 列间距选择16px
这样设置完，分分钟让你的设计整整齐齐，贼专业！
三、字号规范
字号选择可太重要啦，我总结了几个超好用的尺寸：
主标题：20px 次级标题：16px 正文内容：14px 辅助文字：12px 小号文本：10px
温馨提示：字号千万别太小，考虑下年纪大的用户，最小不要低于10px哦！
四、间距处理
想让界面看起来舒服，间距处理可是关键中的关键：
卡片内边距：16px 元素间距：8px的倍数（8/16/24/32） 区块间距：24px或32px 图标间距：8px
记住一个超实用的小技巧：按住Shift拖动图层，就能保证间距是8的倍数，贼方便！
五、配色方案
配色这块最容易踩坑，我来教大家一个超简单的方法：
主色调选择1-2个 功能色必备： * 成功色：#67C23A * 警告色：#E6A23C * 错误色：#F56C6C 中性色必备： * 主要文字：#303133 * 常规文字：#606266 * 次要文字：#909399 * 占位文字：#C0C4CC
六、图标处理
很多姐妹问我图标怎么处理才专业，这里有个超实用的小技巧：
新建24x24px的画布 实际图标控制在20x20px内 描边粗细统一1px 选择“贴齐像素”避免虚边
记得导出的时候选择“导出为web所用格式”，格式选PNG-24，这样图标才清晰！
七、组件命名规范
文件命名也是门技术活，我来教你最清晰的方式：
模块名-类别-功能-状态 例如：home-btn-search-normal
这样命名清清楚楚，再也不会找不到素材啦！
八、状态反馈
这可是让设计看起来贼专业的关键：
按钮悬停：透明度80% 按钮点击：透明度60% 加载状态：动画持续时间0.3s 禁用状态：透明度40%
关节锈温馨提示：记得给每个可点击元素都加上状态反馈，这样用户体验杠杠的！
最后の重点
别忘了导出规范：
切图导出：2倍图(@2x)和3倍图(@3x) 命名规范：模块名_功能名@2x.png 保存格式：PNG-24
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
