云南11选5任三玩法 > 网页UI设计 >

UI设计师与Web前端合作8大要点

  这里的分享一些比较系列化的专业共识给大家,特别是UI设计师和web前端都需了解的知识点,双方在这些知识点上达成共识,有助于能更加畅通无阻的进行沟通交流,可以更好的开发完美的产品。

  一个网页的尺寸设置与屏幕分辨率和浏览器相关,我们不可能满足所有用户的最佳尺寸,但我们能做的是让绝大多数用户感觉是最佳的。

  我们可以通过统计分析工具获取用户屏幕分辨率数据,从而为设计提供参考。例如使用百度统计来获取用户屏幕分辨率数据。

  移动端可根据业务需求和产品特点选择响应式适配,还是独立移动版设计,对于页面结构和功能简单的站点,适用响应式,对于大型业务复杂的站点,移动端建议独立版本设计。移动端字体大小使用rem单位,以适配不同手机分辨率,保持整体缩放。移动端适配原则:文字流式、控件弹性、图片等比缩放。

  设计师将logo、icon、固定位图片等图片元素生成2倍大小提供给前端,前端利用MediaQuery实现Retina高清屏适配。

  英文字体:HelveticaNeue(优先字体),Helvetica(备用字体),Arial(次级备用字体)。

  设定字体使用规范,如主标题、次标题、小标题、正文、辅助文字、失效文字、链接文字等字号、颜色、样式等。

  补充:字号不得小于12px,标准icon可转成字体图标,特殊字体可以使用WebFont。

  •数字与单位之间需要增加空格。例外:度、百分比与数字之间不需要增加空格;

  设计中对色彩的运用首要应考虑到品牌层面的表达,另外很重要的一点是色彩的运用应达到信息传递,动作指引,交互反馈,或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。

  在交互行为中需对色彩做变化时,建议采取在颜色上添加黑色或者白色并按照n+5%的规律递增的方式来实现。以下图为例,当鼠标hover某个特定元素,就视为浮起,对应颜色就相应增加白色叠加,相反点击的行为可以理解为按下去,在颜色上就相应的增加黑色的叠加。

  最常见的是12列栅格系统,例如Bootstrap的栅格系统,支持将一行分成1列、2列、3列、4列、6列等,并提供了强大的响应式布局方案。

  设计需了解一些常见动画效果、实现手法、和js动效库,例如:渐隐、缩放、移动、伸缩、摇摆等,便于和前端沟通。

  按设计环境规范进行设计,如:Web、iOS、Android设计规范。遵循文件命名及画板图层命名规范。

  好工具能优化工作流程,解放生产力,提升工作效率,这里列举一些常用工具和插件。