分享网站建设知识
推动网站应用价值

提供短小精焊并有价值的建站知识分享。

PSD设计稿规范及网页设计指南 v.1
2019-10-23 18:23:54

一、文件管理

 

1、合理命名文件名称(01首页、02关于我们等)

2、将用到的图标,素材等和PSD文件放在一起,并命名。(photos/icons 文件、PSD、字体、客户网站有关资料)

3、在有条件充足情况下,将UI元素制作成模板, 形成UI元素的统一化

4、将文件同时保存在网盘,方便随时下载使用

 

 

二、图层

 

1、合理且精确地命名,对每一个图层都要命名;忌使用图层1、副本、副本2

2、合理使用图层分组(图层文件夹)

3、按文档流给图层组命名,一般来说就是将页眉组放最前、页脚组放最后,其他放中间

4、删除不必要的图层

5、合并共同元素

6、使用图层复合和智能对象

 

 

三、图片

 

1、忌随意拉伸或者压扁

2、对齐一切可对齐的元素、忌层次过多

3、谨慎使用混合模式,前端小伙伴打开来看到的效果有时并非自己的原稿

4、多使用蒙版,智能对象,这样方便修改;忌裁切图片

 

 

四、字体

 

1、使用整数值,最好是双数

2、不要随意拉伸字体,网页不同于印刷品、除非切成图片、否则前端不可能实现

3、使用分开的文本框,标题用一个文本框处理、正文也单独使用一个文本框处理,不要混合在一起

 

 

五、特效

 

1、适当地使用颜色叠加,最好直接更改颜色,而不是再次进行颜色叠加

2、平铺纹理图像,忌使用不能通过平铺重复的图片做背景

3、合理的使用描边,内部描边相对来说更为精确,而居中描边和外部描边就会形成圆角。

4、背景在运用渐变时,尽量使用上下渐变和左右渐变

 

 

六、其他

 

1、 熟悉浏览器的兼容性

2、 在设计之前搜索一些相关信息,看看自己的设计是否得到浏览器的支持,适当时候要放弃圆角/渐变/阴影等特性。

3、 使用栅格系统

4、温和地使用投影,忌一打开你的设计稿,第一时间被阴影吸引

5、使用WEB字体(中:微软雅黑、宋体;英:无限制)

6、设计的同时考虑设备宽度

7、使用正版的图标、图片,最好是客户提供的素材

8、为提升用户体验、设计404页面、反馈提醒、进度条等

9、同一个记录的图片在各处应用的尺寸比例应一样。

 

七、发稿

 

1、设计稿正式发出去之前,设计师互相校对

2、当线框图流程开展后,与线框图比较,确保各元素位置正确

3、设计稿风格、取色等一致性检查(选用的辅助色与LOGO色是否一致)

4、将用到的图标,素材等和PSD文件放在一起,并命名,一起发给前端小伙伴。(photos/icons 文件、PSD、字体、客户网站有关资料)

分享该编文章:

免责声明:本站部分文章由本网用户编辑转载并发布,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容![声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。本站拥有对此声明的最终解释权。

相关资讯: