澳门永利皇宫官网|首页

新闻§资讯NEWS

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

作者:深圳网站建设 来源:万广互联 浏览数:3138 发布时间:2012-5-4 15:08:12

    好的网站设计、网页设计的网站优化其实是从需求分析阶段开始就已经要考虑SEO了,而在效果图中如何照顾前端及优化的需求,很多人都不知道。 页面设计中应当注意规避那些可能给前端及优化带来困扰的地方,同类功能界面模块化,做到可重复调用,减轻图片加载负担。效果图中不应出现半像素尺寸等。

    设计师和前端工程师是在共同诠释信息,只不过设计师是用视觉语言,前端工程师是用代码。 一个页面在前端工程师眼里就是一堆有组织的信息块(信息对象),就像X射线扫过页面,内在的信息结构对应就是HTML的结构。比如一个评论区,可以在没有设计的前提下,用HTML定义出它的结构,因为信息对象的属性通常是固定的,如作者、发表时间、评论内容、评论表单等。  里面的对象还可以再细化,如评论表单还可以拆成更细的对象,如富文本编辑器。这样将信息对象化之后会发现有大量重复的对象和固定模式可被重用。

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

    所以需要在设计图上进行必要的标注。
    视觉规格要素: 
    1. 布局规格 
    2. 模块划分 
    3. 对象间距关系&位置 
    4. 字号&字体 
    5. 颜色&效果(包括渐变、阴影、透明度) 
    6. 对齐关系(包括极值) 
    7. 行高(默认160%) 
    8. 内容(是否限长、限宽、限个数等) 
    9. 可点击区域 
    10. 图片(尺寸、比例关系) 
    11. 首屏线 

    交互规格要素: 
    1. 交互步骤说明(分镜图...) 
    2. 状态(聚焦、失焦、有效、无效...) 
    3. 提示(成功、失败、错误...) 
    4. 动态效果说明(动画间隔、过渡效果...) 
    5. 数据交换方式(同步、异步、本地...) 
    6. 多和前端工程师交流

 

本文作者:万广互联

本文地址:/news/339.html

版权所有 转载时必须以连接形式注明作者和原始出处

已有0条评论,点击发表评论最新评论

发表评论

验证码: 点击切换验证码 看不清楚?

我们为您提供

高品质网站建设

服务包含营销推广、网站建设、企业邮箱、域名空间、CRM系统开发

现在咨询 0755-23000632