前端之设计稿二三事

导语: 前端作为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 light
• windows的一些：
• 新細明體：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