大数跨境
0
0

UI设计师如何和前端建立良好的沟通,PC端UI设计规范

UI设计师如何和前端建立良好的沟通,PC端UI设计规范 睿讯捷科技
2022-08-01
0

一、PC端名词解释

PC端是指persional computer个人电脑端,一般指终端、个人用户端,客户端 。


二、设计稿尺寸

画布大小1920*1080,如果是一页下来不分屏,宽度就是根据实际情况内容宽度,常见1200px。


我们都知道显示器大小并非一致的。背景区域相当自由区,不管对方显示器大于1920,还是小于1920,都要保证我们的内容区的内容完全显示。

正常情况下,背景要么是纯色,要么是一直没有太大关系的背景图,不会因为显示器太大拉伸导致变形或展示不完,也不会因为显示器小了,裁切导致背景内容显示不全。

三、内容规范

1、文字

句子、段落文本,需要用word文档进行整理。

开发的时候只要复制对应文本即可,避免开发过程中需要重新打字出现错别字、或者复制设计稿的时候出现空格、换行符号的情况。


做的时候要大致清楚,哪些是文本,哪些是文字图片。

如果会出现后期修改的特殊字体文字,一般情况下,网页调用访问设备的默认字体,当然也可以指定某个字体。但是,如果系统没有这个字体就不会显示字体,就会显示电脑的默认字体。可能你会问,如果我电脑安装有某个字体,能不能用那个字体?首先,你下载某个字体的时候可以发现,一个字体有十几M大小,如果硬要整个网站都用这个字体,每次打开网页时都需要先加载这个字体,导致网站加载速度会很慢,所以不建议使用非电脑常见字体。电脑常见字体有:宋体,黑体,微软雅黑等,这些字体不可用于包括但不限于商标注册、商业海报等。如果在特定场景需要使用特殊字体、符号,可以把这个字体、符号栅格化导出给前端,以图片的形式加载。


在界面设计中,文字字号决定了信息层次和权重。首先要设定基准字号(最小字号),然后可依据一定规律设定导航、标题等大字号。一般网页基准字号有12px、14px、16px等。

尽可能地规范固定字体名称,字号大小,字体颜色,行间距,字间距,字体的使用还要考虑是否允许免费商用。

2、图片

每次打开网页时相当于浏览器把网页下载到本地进行展示,图片越多、越大,加载就越慢。

非必要情况下,控制一下图片的大小。比如网页需要上传500*500的图片,设计成了1000*1000的图片,很明显不合理。完成页面的设计稿后,还需要把素材进行分类整理。

3、板块

图片也好,文字段落也好。他都是先是一个板块,其次才是内容。除了标注基础的长宽之外,还需标注间距。

总结

以上是为了让开发知道,效果图是什么样的,
有这些素材(已导出,已压缩),
设计稿说明:字体颜色、字号、行高、间距、段间距,这个区域的色号、尺寸、圆角、间距

你可以不会敲代码,但是你需要让敲代码的人知道怎么做,更好的还原设计稿。


【声明】内容源于网络
0
0
睿讯捷科技
互联网信息服务,技术咨询,技术开发,客户至上,精益求精
内容 16
粉丝 0
睿讯捷科技 互联网信息服务,技术咨询,技术开发,客户至上,精益求精
总阅读0
粉丝0
内容16