做设计不会设计规范?这8套网易规范送你供你参考

各行各业都有规范,可以说我们每天都是生活在各种条条框框中,那么对我们手上的设计工作来说,如何制定设计规范来帮助我们更高质高效的完成设计工作。

作为一名设计师,制作产品的设计规范是必备技能,有的小伙伴表示从来没有做过设计规范,应该怎样做呢?

设计规范怎么做?

设计规范的模块分类有很多,会让新人感到无从下手,怎么样梳理才更能科学易用?以下六个维度可以作为参考。

1、信息系统:字体选择、颜色、层级区分


做设计不会设计规范?这8套网易规范送你供你参考

产品中的字号应该有一个全局的规划,在同一个界面内,尽量少用太多太接近的字号,比如一个产品详情页的正文部分,如果同时用了12、13、14、15、16、18去排版,文字的层级对比会比较弱,不利于阅读,视觉效果也会有点凌乱。


如果你对全局的字号没把握,不妨参考一下上图的字号分布,这套基于12、14、16、20和34号的字号分布能够良好的适应布局结构,层次明晰,所以具有一定的参考意义。当然以上仅供参考,没有绝对的字号布局方案,设计师可以根据具体的产品情况来分布。

做设计不会设计规范?这8套网易规范送你供你参考

如上图所示,「L」和 「XXL」用了两个很相似的颜色#666666和#6e6e6e,这两个颜色肉眼难以区分,在同一层级去做字体颜色区分是没必要的。同一组中的内容属于同一层级,从信息层级来讲应该要用同一种颜色,表示是同一个层级。


产品文字中一般会有一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字等,为了区分层级便于浏览,通常会根据产品需要把字体颜色深浅分成3到5个层级,常见的有#333333、#666666、#999999这个组合,这个组合的层级区分比较分明,适应性比较广,因此有一定的参考价值。

做设计不会设计规范?这8套网易规范送你供你参考

从技术实现层面来讲,对于字体的选择,产品设计和推广设计有较大的区别。

推广设计的风格多种多样,需要根据需求选择字体来营造氛围,推广设计的字体往往是做在图片上,不需要考虑用户的设备中有没有包含该字体。


产品设计的字体,很少会做在图上,大多数字体由前端工程师来实现,设计师一般会选择用户设备里自带的字体来进行设计。如果在页面中用了兰亭黑、正黑等大量第三方字体,用户的设备没有这些字体就会以默认字体来显示,最终效果会和视觉稿有很大出入。


另外,从视觉层面来讲,文字的层级一般用字号去区分,如果既用字号去区分,又用不同字体去区分信息,会显得凌乱缺乏美感,因此字体的数量应做减法,能用2种就不要用3种,能用1种就不要用2种。


2、控件系统:按钮的样式统一

做设计不会设计规范?这8套网易规范送你供你参考

在产品中按钮控件的复用度是很高的,同样的一个确定按钮也会根据页面环境不同来设定不同宽高尺寸。


需要注意的是,即使按钮宽高不同,按钮样式也需要统一宽高比例、描边、直角、圆角、色值、文字区域、字体、字间距等,以保证按钮样式的统一。


另外,在一般情况下,按钮会有四种鼠标状态。不同颜色的按钮之间,相同的鼠标状态也需统一视觉效果。比如同层级的蓝色和绿色按钮放在一起,这2个按钮在hover状态下的明度变化看起来应相对统一。


3、布局系统:界面内不能出现多余的行间距


做设计不会设计规范?这8套网易规范送你供你参考

在设计的过程中,间距这个隐形元素往往会被新人忽略,间距能表明内容之间的层级和从属关系,凌乱复杂的间距会对用户认知造成较大困扰。


因此,设计师需要将间距当做色彩、字体、字号一样的元素来设计。一个界面中能用5种间距,就不要用6种;能用3种就不要用4种,这是一个需要做减法的设计原则。


做设计不会设计规范?这8套网易规范送你供你参考

另外,内间距尽量不要大于外边距。大多环境下,外边距小于内边距时内容会有外扩力,显得拥挤,有阅读压力。外边距大于内边距时,有适当的留白,内容没有外扩力,用户的视线不受干扰,更专注于内容本身。

4、配色系统


做设计不会设计规范?这8套网易规范送你供你参考

选择主色调时,首先确定产品的调性、用户对象和所要表达的气氛,以及利用色彩所希望达到的目的,色彩取向决定了这个产品的风格。产品的辅助色可用主调色的邻近色,也可用对比色。确定主色和辅助色之前,建议应用到各种页面中去看看实际效果,因为每个页面的使用环境都不同,反复验证后才能确定最终的色彩方案。

一般情况下,可选择一到三种辅助色配合使用,整个产品的色彩最好控制在四种颜色之内。


5、品牌系统:LOGO应用


做设计不会设计规范?这8套网易规范送你供你参考

LOGO会应用到各种页面中,在LOGO定稿后需要将LOGO的各种组合方式整理出来,便于后续的实际应用。比如LOGO的左右结构及上下结构;反白的情况;黑白的情况;单色的情况;黑底白底的情况;最小尺寸;以及错误的使用方式都需要标示出来。


6、推广系统


做设计不会设计规范?这8套网易规范送你供你参考

做设计不会设计规范?这8套网易规范送你供你参考


推广规范设定应突出商品、主体内容和主要文案。不得使用无版权的图片和字体,文案排版需符合阅读习惯,避免折行,字体不要过小,字体笔画均匀识别度高,辅助图形不得扰乱文案信息和产品展示。


以及具体的排版结构,它是上下还是左右,先图后文,还是先文后图,四周的边距和文案的间距,可以和不可以的排版行为需要标示。

今天阿米给大家带来网易的8套产品的设计规范,相信你在看了这些设计规范以后,一定能设计出一套标准的设计规范

做设计不会设计规范?这8套网易规范送你供你参考

做设计不会设计规范?这8套网易规范送你供你参考


做设计不会设计规范?这8套网易规范送你供你参考

网易云音乐android端V3.0版规范遵循28原则,对产品80%的主要界面进行规范,ICON的风格统一和色彩的整体把控,以及品牌的统一性,都有条有理的安排在规范中。这份考究严谨的设计规范,列出大量方便复用的控件,在内容的框架梳理和模块的细节说明上极具参考性,非常适合设计新人借鉴参考。

做设计不会设计规范?这8套网易规范送你供你参考


做设计不会设计规范?这8套网易规范送你供你参考

做设计不会设计规范?这8套网易规范送你供你参考


做设计不会设计规范?这8套网易规范送你供你参考

做设计不会设计规范?这8套网易规范送你供你参考

做设计不会设计规范?这8套网易规范送你供你参考


做设计不会设计规范?这8套网易规范送你供你参考

做设计不会设计规范?这8套网易规范送你供你参考

素材太多,阿米就不一一展示了

总之,这份设计规范参考

做平面及UI的同学一定要保存一份


领取方式:

2、评论本篇文章

3、主页思我回复“111”即可领取


分享到:


相關文章: