关于伟创 伟创新闻 伟创案例 网站套餐 联系方式
只做吸引客户的精品站!

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

lywhy / 2017/4/8 17:05:56
[核心提示] 如何在效果图中照顾到前端及优化的需求?
在网页设计中,如何在效果图中照顾到前端及优化的需求?

  一个页面在前端工程师眼里就是一堆有组织的信息块(信息对象),就像X射线扫过页面,内在的信息结构对应就是HTML的结构。比如一个评论区,可以在没有设计的前提下,用HTML定义出它的结构,因为信息对象的属性通常是固定的,如作者、发表时间、评论内容、评论表单等。里面的对象还可以再细化,如评论表单还可以拆成更细的对象,如富文本编辑器。这样将信息对象化之后会发现有大量重复的对象和固定模式可被重用。如果设计师在设计页面的时候也是这种思路,基于对信息的理解,先对象化,再针对对象设计。这样才能本质上实现模块化设计和开发。好处是一方面能准确表现产品意图,另一方面可以使开发过程更高效、更优化。设计师的理解一定要清晰的体现在设计图上,才能避免开发过程中误解。所以需要在设计图上进行必要的标注。

  我总结了一些要素:视觉规格要素:

  1. 布局规格

  2. 模块划分

  3. 对象间距关系&位置

  4. 字号&字体

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

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

  7. 行高(默认160%)

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

  9. 可点击区域

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

  11. 首屏线交互规格要素:1. 交互步骤说明(分镜图...)2. 状态(聚焦、失焦、有效、无效...)3. 提示(成功、失败、错误...)4. 动态效果说明(动画间隔、过渡效果...)5. 数据交换方式(同步、异步、本地...)6. 多和前端工程师交流这些工程化的东西可能会让感性的设计师们反感,但做为web设计师,这些东西会帮你产出一个更完整的设计。

尊重作者原创 除非特别声明,伟创科技所有均为伟创原创报道,转载请注明原文链接。
原文地址:http://www.lywhy.com/News/View.asp?id=1041  所属类别:行业风暴
相关内容
能源互联网源起,如今的话题! 2018/4/9
互联网并不是包治百病的灵丹妙药 2017/8/15
网站公司如何积极的看待竞争对手 2017/6/3
另类的客户审美让设计师不知所措 2017/5/28
别让你的企业网站空成一个花架子 2017/5/28
猜你喜欢
贺伟创科技与某物流系统签约网站制作项目 2013/5/2
伟创建站技巧赢在客户网站内容信息上面的改进 2014/8/7
怎样才能做好页面设计? 2018/1/5
伟创科技建站百科正式上线 2012/9/24
为何每次设计网站都要回到原点 2013/2/9
伟创科技分享网站架构设计的成功法则 2013/12/14
什么样的网站设计会让客户找到你? 2015/9/12
网站内链助力网络推广 2012/11/24
超市逆袭电商平台 资本催动“生鲜大战” 2013/6/27
Raytheon 宣布收购网络安全公司 Blackbird 2014/11/6
伟创热点
关于我们
公司简介
我们的优势
企业文化
公司愿景
加入伟创
伟创官方博客
金牌项目
网站建设
网站优化
软件开发
整合设计
网站运营
网站套餐
基础型网站
展示型网站
商务型网站
购物、商店型网站
FLASH动画型网站
行业、门户型网站
帮助中心
客户中心
公司SEO培训
seo顾问服务
支付方式
联系我们
我们的位置
关注我们
新浪微博
腾讯微博
人人小站
QQ空间推荐
花瓣网
建站百科全书
Copyright 2007-2012 LYWHY.Inc Sitemap 豫ICP备12012069号-1
Links
洛阳百科
建站百科