新手不知道的PC端设计小技巧,新手必看!
写点零零散散的技巧、记录一下

入行一年半,只是回过头来总结一下之前遇到的一些问题,如何解决的方法,本文章只是针对自己刚入行对设计的一些总结,一些实用的技巧。

对于从来没有接触过PC端设计的同学来说一般上来都是很懵逼的,可能从哪下手都不知道,最好的方法就是参考,前期要多多参考大厂网站的设计规范,当然这仅限于前期新手,后期自己熟练掌握了规范,还是要输出一些自己的想法和见解。
1.1、参考好的网站的前端代码
这里看的代码当然没你想像的那么高深啦,就是一些字体大小、颜色、版面大小、这些基本的东西,但是有了这些东西的框架,对于一个新手来说就不会出太大的错,当然这仅仅是局限于前期,后期也要输入自己的见解。
以MAC电脑为例:随便打开一个网页,鼠标右键点击然后选择检查元素这时就会跳出来面板

右下角的红框数据有字体颜色、字体大小,板块大小这些也就基本够用啦,这样参考下来基本能保证页面不会在视觉布局上出现太大的问题,如果你说我看不懂英文怎么办?答:谷歌翻译或者百度翻译,而且就看那几个数据还是比较容易懂的哈。
1.2、网页预览插件神器
如果你是使用sketch来做设计的话,有一个网页设计稿的预览插件,这个插件简直就是神器,基本上预览出来就和实际开发出来的八九不离十了,百度一搜索就能下载,名字叫:Preview in browser,这样你就可以大致判断你的设计在实际环境中的效果了。
1.3、中间有效区域内容
做网页肯定要有一个尺寸,常用的都是以1920x1080来做,那内容从哪里开始铺呢,这里就涉及到一个有效内容区域,一般情况下在可以在1200像素以内做,这样可以在几乎所有PC屏幕下显示,当然这个也不是定死的,一般大小都在1200-1400,如果你内容控制在1200,就可以不用做适配,如果稍微宽一些可能就要做适配了。考虑下更小的屏幕的显示效果,当然这里的大小同样可以参考别的网页,方法也是跟第一个一样查看代码。

2.1字体颜色、深浅、粗细
经常说要有节奏感,那么节奏感是什么呢,节奏在页面中怎么体现呢,对于字体来讲一般可以从大小、颜色、深浅、粗线、间距这几点来控制节奏,一张页面肯定要有节奏感,不然就会毫无重点。

2.2同一板块层级的字体大小最好不要超过三种、配色包括主题色最好不要超过三种
页面中高频率出现的同一板块字体大小最好不要超过三种。配色最好不要超过三种,因为多了的话会容易显得页面很杂乱。

2.3控制好间距
根据格式塔的邻近原则,我们在对两个不同组的内容时间距要拉得足够开,反之就要足够近。


在进行B端管理系统的设计时,这里也有几个大厂的比较规范的组件进行参考,里面涵盖了:表单、按钮、icon、布局排版、栅格、导航等等各种样式,这里我列几个现在比较常规的好用的几个大厂的组件,这几个网站都是可以直接下载sketch插件参考的
饿了吗Element ui
https://element.eleme.cn/#/zh-CN
蚂蚁金服Ant Design
https://ant.design/components/overview-cn/
阿里Fusion
以上组件仅供参考哈
![]()

以上只是我在工作中的一点小技巧的总结,之后还会更新自己的作品,和总结一些东西。新手设计师虽说前期要进行参考,但也不能过于依赖,还是要输出自己的内容,最后希望各位都能成为设计大佬~


















































































