PC电脑桌面端UI设计规范

 

建议使用工具

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

总结：
以上是为了让开发知道，
效果图是什么样的，
有这些素材(已导出，已压缩)，
设计稿说明：字体颜色、字号、行高、间距、段间距，这个区域是什么颜色？多高？多长？圆角多大？这里跟这里间距多少？

你可以不会敲代码，但是你需要让敲代码的人知道怎么做。