首页
PS教程
PSD素材
PS素材
高清图片
背景图片
字体下载
矢量素材
PS资源
PS作品
影楼PS
下拉
用户名
电子邮箱
用户名
密 码
记住登录
登录
找回密码
注册
摄影
摄影教程
LR预设
摄影交流
摄影修图
影楼
婚纱相册
儿童相册
写真相册
台历模板
打包
PS模板包
PS素材包
PS字体包
PS笔刷包
下载
背景大图
插件下载
PNG下载
电子相册
资料
PS专题班
教程下载
视频教程
PS教程区
影楼样片
认证投稿
帖子
用户
版块
帖子
搜索
调色动作大全
光斑素材
薇拉调色图层
修图教程
雪花素材
PS磨皮滤镜大全
PS抠图滤镜大全
PS动作大全下载
PS渐变大全下载
PS形状大全下载
PS图案大全下载
PS样式大全下载
资源包下载
婚纱模板
儿童模板
写真模板
台历模板
背景大图
剪贴素材
电子相册
视频教程
儿童后期背景
婚纱后期背景
写真后期背景
天空背景素材
雪景背景素材
儿童模板字体
婚纱模板字体
写真模板字体
3D立体背景
名片模板大全
2019挂历模板
菜谱模板大全
知羽相册下载
艺匠相册下载
金夫人相册
婚庆x展架模板
火焰笔刷打包
睫毛笔刷打包
星光笔刷打包
烟雾笔刷打包
2019台历模板
毕业纪念相册
影楼广告模板
3D免抠图模板
4D婚纱模板
新手必看:如何成为86ps的认证会员
数码照片处理技巧视频教程大全下载
儿童照片扑克
最新PhotoShopCS5教程pdf
影楼VIP卡模板大全
2012-2015儿童模板
淘宝产品摄影视频教程
HDR摄影视频教程
A4成长册彩页模板定制
后期修图视频教程下载
2019年8/12寸台历定制
8寸台历DIY套件批发
台历挂历模板定制
快速认证加入VIP
如何获得下载权限
86ps会员专区
>
PS教程区
>
页面构建的审图与细节(原创理论)学习分享
发帖
回复
返回列表
2055
阅读
2
回复
页面构建的审图与细节(原创理论)学习分享
[复制链接]
上一主题
下一主题
只看楼主
倒序阅读
使用道具
楼主
梦舞飞扬
发表于: 2013-05-27
作者:微博UDC
原文:
作为专业的页面构建工程师,除了在专业技能上有很高的要求以外,还需要具有一定的对设计图的审稿能力。审图,并非是意味着追求跟PSD一模一样,甚至耗费大量时间截屏跟PSD去“对像素”。在我的理解中,审图是通过对UI设计稿的分析,充分理解UI设计师的意图,再结合UE的交互状态,从中做到真正的“还原设计稿”。
事例一:有取有舍,方是领悟
比如,在这样一张设计稿中
图片:01.jpg
设计师的意图:
这个话题列表的行高19px,每个单条话题下面是有4px边距的。而话题标题与其自身的描述文字之间没有间距。
页面构建工程师的分析过程:
由于该模块对行高的重置,已经“约定”好了,文本规范的行高是18px。通过沟通,设计师认可将本段落的行高由19px改为18px。但这仅限于标题与描述文字之间的行距。而标题与标题之间4像素下边距,从构图上说明了单条话题之间的段落关系,不能一味的用18px行高解决。因为通过我们对设计稿的理解,设计师用这4像素,拉大了标题之间的间距,从视觉上形成了段落感。所以对于重构来讲,这4像素万万不能忽略,不然从视觉呈现的角度,设计师就不能容忍了。所以,有取有舍,方是领悟。
在这个模块的制作中,还发生了一个小插曲。如下图:
图片:02.jpg
设计师的意图:
这是11号的细明体,因为是点缀,又是提示性图片,所以小于前面标题的宋体12号字。
页面构建工程师的分析过程:
起初,重构组的同学在讨论设计稿时,都提议把它们做成活文字,就是宋体12号。彩色圆角块用CSS3写,扩展性特好。因为这个模块是运营团队负责,在未来也更能够满足随时更换文字的需求。万一以后再来个“惊爆”、“头条”啥的呢?每张图都重新切、重新拼么?
但是,站在理解视觉设计的角度,这种小tag讲究的就是精致。如果做成文本文字,虽然面临将来的需求变更时,会有一定程度上的成本,但是与正文区别太小,就突出不了小tag的感觉,也显得没有那么精致了。所以在各种纠结权衡下,我最终选择把它们做成了图片。
事例二:麻烦的CSS写法能换来更好的视觉效果
再举另外一个例子,我们有这样一个模块。
图片:03.jpg
本部分内容设定了隐藏,需要回复后才能看到
(申明:此教程来源于网络,转载请注明作者,如需商业用途请与作者联系。请支持原创!)
共
条评分
只看该作者
沙发
cece
发表于: 2014-02-23
谢谢分享
共
条评分
只看该作者
板凳
yuguorui8
发表于: 2018-09-04
共
条评分
发帖
回复
返回列表
http://vip.86ps.com
访问内容超出本站范围,不能确定是否安全
继续访问
取消访问
隐藏
快速跳转
摄影
LR预设
摄影交流
摄影修图
摄影教程
影楼
婚纱相册
儿童相册
写真相册
台历模板
打包
PS模板包
PS素材包
PS字体包
PS笔刷包
下载
背景大图
插件下载
PNG下载
电子相册
资料
PS专题班
PS教程区
教程下载
认证投稿
影楼样片
视频教程
关闭
关闭
选中
1
篇
全选
24套216P儿童模板
400套会声会影模板
20套古装相册模板
21套全家福相册模板
1500套淘宝海报模板
4月最新儿童模板15套
孕妇模板12套+样片9套
儿童样片349P+DM单
A4幼儿成长纪念册
商业修图视频教程
马克杯照片模板大全
2014婚纱样片大全
婚礼跟拍相册模板
韩国儿童海报模板
摄影入门视频教程
商业修图视频教程
商业合成视频教程
2014影楼样片100套
淘宝产品描述模板大全
影楼价格表PSD模板
好看的PS英文字体
AE电子相册模板
地产广告模板大全
最佳菜谱模板大全
淘宝素材模板大全
光盘封面模板大全
2016影楼样片大全
淘宝水印图片大全
水珠水花笔刷大全
儿童影楼DM模板大全
T恤烫画图案图片大全
行业画册模板大全
后期蓝天白云晚霞天空
RAW格式人物原片大全
高清花纹背景图片大全
电影海报模板大全