2021年6月22日星期二

前端之设计稿二三事

导语: 前端作为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作对比。

  • 尽量使用计算机自带字体

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

发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)