建议使用工具
Photoshop,
ps常见而AI不常见,需要考虑一下大众群体。
设计稿尺寸
画布大小1920*1080,如果是一页下来不分屏,宽度就是根据实际情况
内容宽度,常见1200px
众所周知,显示器大小并非一致大小的。背景区域相当自由区,不管对方显示器大于1920,还是小于1920。都可以保证我们的内容区域是不变的。
正常情况下,背景要么是纯色,要么是一直没有太大关系的背景图,不会因为显示器太大拉伸导致变形或展示不完,也不会因为显示器小了,裁切导致背景内容显示不全。
内容规范
文字
句子、段落文本,需要用word文档进行整理。
开发的时候只要复制对应文本即可,避免开发过程中需要重新打字出现错别字、或者复制设计稿的时候出现空格、换行符号的情况。
做的时候要大致清楚,哪些是文本,哪些是文字图片。
如果会出现后期修改的特殊字体文字,
一般情况下,网页调用访问设备的默认字体,当然也可以指定某个字体。但是,如果系统没有这个字体就不会显示字体,就会显示电脑的默认字体。
可能你会问,我电脑安装有某个字体,能不能用那个字体?
首先,你下载某个字体的时候可以发现。一个字体有十几M大小。如果硬要整个网站都用这个字体,每次打开网页都需要把这个字体下载。所以,网站会很慢。
但是,不是不能用,常用的场景是用于页面固定死的标题、序号。通过技术手段可以把这个字从字体文件中单独提取出来。或者在PS上,把这个字体栅格化导出。
在界面设计中,文字字号决定了信息层次和权重。首先要设定基准字号(最小字号),然后可依据一定规律设定导航、标题等稍大字号。一般网页基准字号有12px、14px、16px等。
简单来说,首先,尽可能的规范、固定一下字体大小。标题,正文、辅助字体大小。尽可能的少用特殊字体。
字体的使用还需要注意是否允许免费商用,如果你实力雄厚买了字体的版权当我没说。😀
除了基础的标注字号、字体名称、行高、段间距、颜色
如果设置了字体间距,需要标注间距多少。
更多注意事项还请看下来源网址👇
资料来源
https://www.zcool.com.cn/work/ZMjcwODMyODQ=.html
https://www.uisdc.com/web-design-guideline-text
图片
你要知道的是,每次打开网页相当于浏览器把网页下载到本地进行展示,图片越多、越大,加载就越久。
非必要情况下,控制一下图片的大小。比如网页的一个500*500的框框,就给整了一个1000*1000的图片,很明显不合理。
完成页面的设计稿后,还需要把素材进行分类整理
对于较大的图片,还需要给他进行压缩。
https://imagecompressor.com/zh/
https://www.yasuotu.com/
如果出现因为图片太大不给免费压缩的情况,就说明你图片太大了。麻烦你在PS上调整一下图像大小。
板块
图片也好,文字段落也好。他都是先是一个板块,其次才是内容。
除了标注基础的长宽之外,还需标注间距
资料来源
https://www.zcool.com.cn/work/ZMTkwNjg1NzY=.html
https://www.zcool.com.cn/work/ZMjU3NTA0Njg=.html
总结:
以上是为了让开发知道,
效果图是什么样的,
有这些素材(已导出,已压缩),
设计稿说明:字体颜色、字号、行高、间距、段间距,这个区域是什么颜色?多高?多长?圆角多大?这里跟这里间距多少?你可以不会敲代码,但是你需要让敲代码的人知道怎么做。