前端之设计稿二三事

导语: 前端作为web项目开发流程中的一个环节，在实际开发过程中，必定要和ui/交互设计师进行沟通协调，以便保证设计稿能够完全代码化，并且是设计师希望的效果。所以，在这里我总结了一些前端开发需要注意的设计稿的一些东西。

目录

设计稿为750px的原理常用中文字体英文名称解放军外国语学院设计稿和代码化的区别

设计稿为750px的原理

很多前端都不知道为什么设计稿的宽要750，这次我就解释一下通用的说法。

手机像素其实是逻辑像素（pt），通常情况下，1pt=2px;设计稿上面的单位一般都是物理像素（px），css一般使用的是px，所以没有用pt;750px已经是人类视觉可以接受的最大的分辨率，再大也看不出效果；一般是以iphone5（320px）或者iphone6（375px）为参考设备；一般情况下的设计稿就是640/750，这样就是最佳的分辨率宽了；

常用中文字体英文名称

下面是一些常用编辑招聘的设计稿字体英文名称。

宋体 simsun黑体 simhei微软雅黑 microsoft yahei微软正黑体 microsoft jhenghei新宋体 nsimsun新细明体 pmingliu细明体 mingliu标楷体 dfkai-sb仿宋 fangsong楷体 kaiti仿宋_gb2312 fangsong_gb2312楷体_gb2312 kaiti_gb2312宋体：simsuncss中中文字体（font-family）的英文名称mac os的一些：华文细黑：stheiti light [stxihei]华文黑体：stheiti华文楷体：stkaiti华文宋体：stsong华文仿宋：stfangsong儷黑 pro：lihei pro medium儷宋 pro：lisong pro light標楷體：biaukai蘋果儷中黑：apple ligothic medium蘋果儷細宋：apple 冬季新娘礼服lisung l幼儿教师辞职信ightwindows的一武汉家教些：新細明體：pmingliu細明體：mingliu標楷體：dfkai-sb黑体：simhei新宋体：nsimsun仿宋：fangsong楷体：kaiti仿宋_gb2312：fangsong_gb2312楷体_gb2312：kaiti_gb2312微軟正黑體：microsoft jhenghei微软雅黑体：microsoft yahei装office会生出来的一些：隶书：lisu幼圆：youyuan华文细黑：stxihei华文楷体：stkaiti华文宋体：stsong华文中宋：stzhongsong华文仿宋：stfangsong方正舒体：fzshuti方正姚体：fzyaoti华文彩云：stcaiyun华文琥珀：sthupo华文隶书：stliti华文行楷：stxingkai华文新魏：stxinwei

设计稿和代码化的区别

一般情况下，前端开发对于设计稿的还原程度能够达到95%以上就很不错了，那么为什么会有些许的稍微的差别呢。

网页设计师容易犯的错误

以原生app的体验对h5页面进行设计

由于原生app的体验流畅，界面华丽，设计师往往会原生app体验靠拢，尽量参照h5网站进行设计，不要和app作对比。

尽量使用计算机自带字体

设计稿上面的字体要考虑到版权和开发的问题，不能天马行空，用一些非常漂亮的优美的字体展现，在编码过程中需要开发下载设计稿的字体并上传服务器，但是却造成盗用版权、性能降低、访问缓慢等诸多现实问题；建议使用系统自带字体。

设计稿展现的是最理想的状态

设计稿展现很理想丰满，但是现实很骨感，情况相当复杂，反应不出文本溢出，字体折行，分辨率大小等问题。设计师在设计的时候一定要注意这些问题，设计图是死的，现实是多变的。

前端开发工程师容易犯的错误

写代码之前先分析设计稿

三思而后行，拿到设计稿后不要匆匆地去做，写代码，避免返工重写。磨刀不误砍柴工，结构分析一定要先做，分析页面整体布局，有哪些模块，哪些是通用的，特效是什么，有哪些要和设计师再次确认的，没有问题后再动手写代码。

仔细审阅设计稿，精确1px编码

在做的过程中，一定要仔细查看内容，包括边框太细没看到，颜色太淡忽略掉等等问题，还有就是单位精确到1px范围内，细节决定成败。

要考虑动态内容溢出

内容溢出包括文字溢出，列表溢出，从接口获取数据后内容溢出，拿到设计稿后，确认布局后，就要处理各种溢出问题了。

考虑增删元素

要动态评估页面，即便一些动态变动内容删除调也不影响页面整体视觉，即便增加内容也不影响现有页面内容排版布局。

考虑可维护性、可扩展性

代码写的过程中，一定要考虑可维护性，能自适应的尽量自适应，比如列表那里再加一个分类项目，可以放下，可以扩展内容。根据实际情况，不限高，不限宽度，以便后面好维护。

以上就是有关设计稿的前端这边要注意的情况。

以上内容出自 guan’blog