现在的位置:主页 > 新闻中心 > 资讯动态 >

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

发布时间:16-01-18 来源:发我我网 人浏览 字号:TT 作者:admin 打印

页面设计中应当注意规避那些可能给前端及优化带来困扰的地方
举个例子,同类功能界面模块化,做到可重复调用,减轻图片加载负担。;效果图中不应出现半像素尺寸等
张克军,豆瓣前端工程师
知乎用户、知乎用户、ZhangYi-Journey 等人赞同
我认为设计师和前端工程师是在共同诠释信息,只不过设计师是用视觉语言,前端工程师是用代码。
发我我网-品牌简介
一个页面在前端工程师眼里就是一堆有组织的信息块(信息对象),就像X射线扫过页面,内在的信息结构对应就是HTML的结构。比如一个评论区,可以在没有设计的前提下,用HTML定义出它的结构,因为信息对象的属性通常是固定的,如作者、发表时间、评论内容、评论表单等。里面的对象还可以再细化,如评论表单还可以拆成更细的对象,如富文本编辑器。这样将信息对象化之后会发现有大量重复的对象和固定模式可被重用。

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

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

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

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

这些工程化的东西可能会让感性的设计师们反感,但做为web设计师,这些东西会帮你产出一个更完整的设计。
literal,web dev
知乎用户、钢盅郭子naska 赞同
设计也是施工的一部分

发我我网-成功案例

假设我们要设计一座小别墅,需要砖头、水泥、钢筋、砂石等等原材料,也需要门、窗、玻璃、地板等等成品组件。

设计师看到的是 墙、门、窗,地板。除了整体的效果图,要精确到墙多高,门多宽,窗户多高,是否协调,色调是否ok,地板裁剪。

而前端施工会具体面对 砖头、水泥、钢筋、砂石等等。混泥土质量,钢筋粗细,施工顺序等等。

细致的分工下,可以说设计师的设计精度很大程度的影响后续施工环节的速度和质量。功能型产品,设计师除了对材质、风格的控制,还得对组件市场(门窗样式等等)

有相当的了解,要不然都不知道什么可以,什么不可以。

对照一下克军讲的视觉规范和交互规范,其实设计一所房子和设计一个web站点很像。

网上也能找到现成的设计例子:facebook的psd设计稿,yahoo的设计库。

概括一下

网页设计不仅仅是网页效果图,而应该是一份施工图纸(标注,规范);

和前端之间要建立起沟通区(哪些需要掌握,哪些需要设计时询问,就像掌握对建材市场材料的了解)。

设计如果不是艺术品,得是要兼顾产品功能和效率,也就是要跳出设计做设计。
Chuckie Chang,扎根梦想的骚年 c945.com
知乎用户 赞同
面对很多设计师设计的效果图界面能否成功过稿或者能否能在前端实现和效果图一样的效果, 在效果图中照顾到前端及优化的需求 ,这个的确是一个很重要的问题,就自己经验做一些显而简洁易懂的语言归纳下咯,多多交流学习
发我我网-模板展示
1.首先作为一个视觉设计者,自己最好懂HTML,CSS和一些简单的SEO知识,一些前端代码规范等等,都是设计之前需要精心动脑子想,考虑的问题,不要在设计出效果图后,前端无法或者实现不了完美的效果,而又返回去修改界面,导致设计初衷偏离

2.用户体验,这不仅仅是一个前端开发师的事情,作为一个界面设计师,如何做出优秀的用户体验界面,是一个值得深入的问题,就比如字体大小,字体风格,图片处理,色彩感觉,操作体验,按钮、表单、行距、字距、留白等一系列设计元素的细节,这些都直接关系到前端设计师编写CSS和HTML的一些规范,所以设计者具备一定的CSS,HTML知识,就能潜意识在设计界面时,进行了“模拟CSS编写”,这样即能方便前端工作者,又能减少自己稿件的飞机率

3.流行的一些效果,表现方式的研究。互联网更新很快,要不断探索大众喜欢的模式,摸索网页设计中新的用户体验和优秀的视觉表达。这样避免一些落后的东西,走在前沿,总能找到感觉。不断学习,操作,访问各种网站,也是对设计时兼顾优化需求的一个不错的方法。

4.更多的,还是自己要善于总结和思考,实战,不断改进,每一份设计作品,都要有一点点提升,哪怕是一像素的细节,一像素的间距,都是一个重大的优化体验。

简单明了的说说,呵呵。还有更多的东西,多多交流探讨咯。
发我我网在这里祝大家新年快乐,万事如意,身体健康,阖家欢乐!
发我我网-网站 全部优惠2000元
春节期间(1月27号至3月31号)任选择其中一款网站模板都会优惠2000元,全部网站的优惠价上再减去2000元,并提供2年免费网站维护服务。

做站资讯热线

15000161882

Copyright © 2010-2016 发我我网(小翔子酷酷网)官方网站
本站文字及图片内容版权归刘翔个人所有,任何单位及个人未经许可,不得擅自转载使用(上海) | 皖ICP备15010645号-1

在线创业留言申请: 姓名: 手机或座机: