前言：
遇到一些客户，他们的设计师从平面/游戏或者其他行业转行过来，面试到公司做网页做UI项目，结果出的设计图不规范不专业。在这里汇总一下。
Q1. 为什么现有网页设计尺寸是1920x1080px？
答：主要原因是因为1920*1080px分辨率占有市场将近50%的份额；另一方面这个分辨率其实是厂商和用户之间的妥协分辨率比例。
1920*1080为主流分辨率
数据来源：网站流量平台 - 百度统计流量研究院
Q2：为什么移动端选择750*1334px的分辨率呢？
答：750是物理像素，浏览器调试的375是逻辑像素。一句话就是移动端适配比较好换算适配。
具体参考：移动开发的设计稿为什么大多数是750px？_weixin_45785873的博客-CSDN博客_前端设计稿一般基于iphone几的
Q3：网页/移动端字号最小多少？
答：网页最小中文字号12px，英文不要小于10px（谷歌浏览器小于12px的字自动显示12px，需要看小字需要设置）。移动端最小中文字号20px，最小英文字号18px，有需要16px也可以接受。无绝对值，看情况需要。为了用户的舒适阅读体验，还是遵循设计原则比较好，毕竟是人家的研究成果。
Q4：移动端手指触摸点需要留多大？
答：44*44px及以上。参照iphone设计规范。
Q5：字体该用什么呢？
答：网页一般用微软雅黑，因为windows默认字体是微软雅黑，可减少加载时间保证在每一台windows设备上显示一致。也可以用其他字体，但最好不要用默认黑体，页面上加载会有锯齿。个人不推荐网页用苹果的平方系列主要是因为在小字（小于16px有锯齿）方面实在是不好看。如果是英文网页，倒是可以选择很多英文字体，然后服务器加载、网页字体压缩即可。推荐华为官网用的一款字体："Manrope",Arial,Helvetica Neue,Helvetica,sans-serif。
移动端设计，中文字体为「苹方」；英文字体为「San Francisco」，想要其他字体也可。
Q6：那我一个页面这里用微软雅黑，那里用adobe黑，再另一块地方用思源黑，一个页面用N种字体可以不呢？
答：理论上是可行的，然而这么做是不专业的。页面上除了必要的如图片设计、大标题之类的地方需要用到特殊字体，其他文字内容区域建议使用相同字体，这样即使你的页面不是微软雅黑字体，前端也只需要加载一种或两种字体进来，多了页面加载慢，可能一个简单官网总共才四五M，你一个字体都有十多M。所以如无特殊情况，一致性是最佳选择。如果有特殊考量，这也是可以解决的啦~
Q7：页面内容宽度设为多少呢？
答：你是不是觉得全屏才震撼？然而苹果官网最大内容宽度也才980px。在2/3/4k屏幕下，浏览器的实际展示分辨率并没有1920px宽，如果内容宽度不是自适应的必定会有滚动条出现。
12'的macbook pro的几种分辨率：1024*640/1280*800/1440*900（默认分辨率）/1680*1050（最大设置）。
13.9'的华为笔记本3k屏3000 x 2000分辨率/260 PPI，实际浏览器视口分辨率大约为1202px宽。
所以通俗点讲在macbook和nK屏幕上，浏览器显示的实际分辨率大小是我们适配的大小，并非设计大小。因此当用1920px宽度设计的时候，如果页面内容繁杂，你想偷懒不想设计多个版本，需要考虑主内容宽度最好不要超过1024px（配图可以超过这个宽度的，窄屏下显示一部分即可）。
Q8：设计只凭直觉，不居中不对齐是否可行？
答：我有遇到过这样的设计稿-单独banner内容不居中偏左或者偏右、图文列表图和文参差不齐、卡片列表每张卡片大小不一、整个页面从上到下找不到宽度规律（这一块内容宽度1031px，那块宽度1249px，另外一块1352px完全无规律）、标题文字全文不一致（上面的主标题倾斜，下面的主标题不倾斜了）、文字和矢量形状转成了位图等等各种不规范。
说实话看到这样的设计稿都要崩溃，然而很难想象这些问题都能出现在同一个设计稿中！每次收到设计稿都要仔细挨个图层查看检查问题，不然就要一直问一直问，问到自己都不好意思再问的程度。要是碰到脾气大的前端，怕是要屌人~
所以呀，网页和移动端不同于平面或其他设计，它喜欢对称和规矩。很多东西都是循环出来的，如果每个都不一致前端要多写好多代码，而且除了显得不细致专业外没有什么用处，一致性是对设计最起码的尊重呀~ 宽度建议用整数，绝对居中设置的时候好整除。除了超大素材图可以转位图外文字和矢量形状建议保留不转化，前端可以快速复制和查看矢量形状属性。
最后还是建议设计师多少了解一些前端知识。
Q9：设计师需要切图吗？
看前端是否有设计基础。如果他会用ps/sketch/ai，让他自己切图是最佳选择，他也不会让你切图，因为你切的图跟他的实现思路不一致，切的图没法用；如果前端不会使用这些软件，那就只能你配合他切图了。要沟通好，他叫你怎么切你就怎么切，否则你要做很多返工。
Q10：前端不按我的设计稿写页面怎么办？
答：合理的需要接受，不合理的提出来改正。
Q11：前端要求我的移动端图标用矢量图合理吗？
答：合理。如果你是375px的图，矢量图是为了好导出几倍图，在高分辨率下不模糊，或者制作文字图标也需要标准矢量图。位图也是一样，需要大尺寸。
Q12：我需要考虑页面的动画效果吗？
答：必须要。现代页面死气沉沉的会非常不好看。所以不管是页面内容加载效果还是banner动画，都要考虑到。找出效果来让前端参考，实现的意义共同讨论。
网友评论