所在位置：
首页 >
营销资讯 >
网站运营 > 在网页设计中，如何在效果图中照顾到前端及优化的需求？
在网页设计中，如何在效果图中照顾到前端及优化的需求？
时间：2024-02-13 17:35:02 | 来源：网站运营
时间：2024-02-13 17:35:02 来源：网站运营
在网页设计中，如何在效果图中照顾到前端及优化的需求？： 我认为设计师和前端工程师是在共同诠释信息，只不过设计师是用视觉语言，前端工程师是用代码。
一个页面在前端工程师眼里就是一堆有组织的信息块（信息对象），就像X射线扫过页面，内在的信息结构对应就是HTML的结构。比如一个评论区，可以在没有设计的前提下，用HTML定义出它的结构，因为信息对象的属性通常是固定的，如作者、发表时间、评论内容、评论表单等。里面的对象还可以再细化，如评论表单还可以拆成更细的对象，如富文本编辑器。这样将信息对象化之后会发现有大量重复的对象和固定模式可被重用。
如果设计师在设计页面的时候也是这种思路，基于对信息的理解，先对象化，再针对对象设计。这样才能本质上实现模块化设计和开发。好处是一方面能准确表现产品意图，另一方面可以使开发过程更高效、更优化。
设计师的理解一定要清晰的体现在设计图上，才能避免开发过程中误解。所以需要在设计图上进行必要的标注。我总结了一些要素：
视觉规格要素：
1. 布局规格
2. 模块划分
3. 对象间距关系&位置
4. 字号&字体
5. 颜色&效果（包括渐变、阴影、透明度）
6. 对齐关系（包括极值）
7. 行高（默认160%）
8. 内容（是否限长、限宽、限个数等）
9. 可点击区域
10. 图片（尺寸、比例关系）
11. 首屏线
交互规格要素：
1. 交互步骤说明（分镜图...）
2. 状态（聚焦、失焦、有效、无效...）
3. 提示（成功、失败、错误...）
4. 动态效果说明（动画间隔、过渡效果...）
5. 数据交换方式（同步、异步、本地...）
6. 多和前端工程师交流
这些工程化的东西可能会让感性的设计师们反感，但做为web设计师，这些东西会帮你产出一个更完整的设计。
在线咨询
