新闻中心
当前位置:乐达 > 新闻资讯 > 行业资讯 > 网页设计中如何在效果图中照顾到前端及优化的需求?
乐达智库     |     公司新闻     |     行业资讯

网页设计中如何在效果图中照顾到前端及优化的需求?

  一个页面在前端工程师眼里就是一堆有组织的信息块(信息对象),就像X射线扫过页面,内在的信息结构对应就是HTML的结构。里面的对象还可以再细化,如评论表单还可以拆成更细的对象,如富文本编辑器。这样将信息对象化之后会发现有大量重复的对象和固定模式可被重用。

  如果设计师在设计页面的时候也是这种思路,基于对信息的理解,先对象化,再针对对象设计。这样才能本质上实现模块化设计和开发。好处是一方面能准确表现产品意图,另一方面可以使开发过程更高效、更优化。

  设计师的理解一定要清晰的体现在设计图上,才能避免开发过程中误解。所以需要在设计图上进行必要的标注。我总结了一些要素:

  视觉规格要素:

  1. 布局规格

  2. 模块划分

  3. 对象间距关系&位置

  4. 字号&字体

  5. 颜色&效果(包括渐变、阴影、透明度)

  6. 对齐关系(包括极值)

  7. 行高(默认160%)

  8. 内容(是否限长、限宽、限个数等)

  9. 可点击区域

  10. 图片(尺寸、比例关系)

  11. 首屏线

  交互规格要素:

  1. 交互步骤说明(分镜图...)

  2. 状态(聚焦、失焦、有效、无效...)

  3. 提示(成功、失败、错误...)

  4. 动态效果说明(动画间隔、过渡效果...)

  5. 数据交换方式(同步、异步、本地...)

  6. 多和前端工程师交流

  这些工程化的东西可能会让感性的设计师们反感,但做为web设计师,这些东西会帮你产出一个更完整的设计。

点击次数:  更新时间:2018-03-31 10:20:21  【打印此页】  【关闭
上一篇:企业网站制作好不好的原因介绍  下一篇:网站建设的必要条件定位网站的主题和名称