移动端网页设计时尺寸、响应式等问题在设计开始时怎么考虑？

时间：2024-02-14 22:10:01 | 来源：网站运营

时间：2024-02-14 22:10:01 来源：网站运营

移动端网页设计时尺寸、响应式等问题在设计开始时怎么考虑？：谢邀，以前回答过类似的问题，由于具体设计的风格会影响到尺寸的选择，所以请根据具体的需要来做尺寸选择。




由于移动端的web和APP的设计规范不一样，web统一按照72dpi分辨率设计，具体移动端小屏幕的设计尺寸的宽度断点按照320px还是640px还是750px（我的PSD设计稿一般是按照750宽度，iphone6的尺寸，但是是按照72dpi来设计，前端一般能轻易支持320宽的小屏幕），要让你的设计能够被前端采纳，总之， 你的设计要能满足前端开发的需要，更多时候的响应式，前端可以直接在你的大分辨率下解决。（你的设计要尽量遵从前端标准，要尽可能满足前端开发的需要）




当然你现在需要考虑retina屏幕，设计尽量用矢量，如果是照片，请考虑@2x的图片切图。（让然大部分中国的web没那么高要求，retina的适应很多时候用户都不会去要求）


根据比较新的数据整理收集，适应于2014~2015+，自己经过多次实践整理和调整后的一些数据，非严格数据，仅供参考使用。

设计规范需要学习，设计时需要作为一个参考，根据具体的设计，目标用户，访问设备等去约束自己的设计，有了规范才能将设计的细节价值体现出来，才能更好的符合W3C的标准。当然题主只是问了尺寸的相关东西，web设计还有很多必须掌握而且有难度的规范，比如中英文字体，色彩等。

规范并不是命令，不是说你必须按照这些数值来设计，而是作为一个参考更好的拟定自己设计时的数值。




▇ 常见的分辨率 ▇




▇ 设计稿（photoshop文件）常用分辨率参照，自己整理的常用的数值 ▇




▇ 前端切图常用分辨率参照，自己整理的常用的数值 ▇







▇ 常用智能手机分辨率和CSS宽度高度规范 ▇










▇ web在各种分辨率下的安全宽度和首屏高度参考（W3C数据）▇







自己以前的一套web设计得公开课，对响应式等分辨率做了详细的一些操作和总结。有需要可以参考一下

===============分割线===============

补充：2022年了，也许大家会认为2016年的答案，可能易经过时了。其实并不是，设计的东西，都脱离不了基础，设计的东西，无非就是工具的演变和效率提升(比如Figma)。本质上的基础是不会变的。所以不论我提供的的视频教程还是参考资料，都是不限年限的，并没有实时性，它们并不会过期。设计并不等于设计软件，软件运用只是工具。代码的时效性稍微会强一些（编程语言的基础、数据结构等知识并不会过时，但是框架，代码规范和风格等等很容易过时）

如果你觉得2016年的教程已经过时了，你大可以直接跳过Photoshop做设计稿，直接学Figma在线工具去做一套界面，它提供了非常便捷丰富的设计组件，快速高效。当你脱离了这种生产工具的时候，你会发现Photoshop你啥也不会，更别说去思考一个设计，去实现一个设计。可能用一张纸笔去绘制设计稿，都会成为阻碍。

就目前2022年来说，大多时候web做一套1920的稿件，再做一套移动端的稿件，比如1334x750(72dpi)的就足够用了（前端可以将它缩小一半作为常规尺寸参考，同时使用设计稿尺寸满足Retina的要求，WEB是需要前端来输出的，设计稿尺寸并不能决定实际项目的尺寸，但是设计稿换算成72dpi的像素参考是需要前端使用的数值），要学会节约时间提高效率，一味追求多种尺寸的不同布局的设计，是浪费，做好适配性就可以。APP的建议做大一点，比如按照iPhone X或12的标准去做，APP要考虑3x甚至4x的图片，这个只要和你的开发伙伴交流一下确定下尺寸就可以了。而且现在大量常规的App，是可以直接使用figma这种工具快速成型的，而无需考虑尺寸。比较复杂的界面设计，还是需要Photoshop能手细化图形。

至于APP的设计，APP的切图规则和web是不一样的，你可以去找APP相关的规范。web现在几乎不需要切图，前端熟练的话直接代码成型，取设计稿里面的素材图片就行，字体大小可以看看设计稿数值。有时候一个1920的web稿件就够用了，无需花时间再给一个移动设计稿，当然前端如果不懂设计，那还是需要提供一个移动搞给他。

最后，如果做的App是混合开发技术或者渐进式 Web 应用(PWA)，不是纯原生，按照web标准做稿就可以,现在做APP成本越来越低，大部分公司都会选择成本低周期短的方式去开发（大金主无所谓，几百万开发一个原生的都很正常）。

总之，参考资料需要你根据实际工作经验灵活判断选择，完全可以只提供1~2个尺寸作为自己的标准稿件，我这两个参考尺寸也是国外项目大多数稿件的web交付尺寸。当然如果你要求很细，时间很多，你大可以做四五种不同尺寸不同布局的设计稿，当然我觉得完全没有必要，PC端一种布局，移动端一种布局就可以了，开发用代码能力去做好适配性即可。我自己做开发的话，如果稿件不复杂，我只需要设计师提供一个1920的给我即可，移动端根据自己的经验直接代码响应或者自适应化。如果内容复杂，还是需要提供一个移动端的界面给我参考，节约代码输出时间。