05.制作属于你的风格指南
设计系统你所需要知道的风格指南是,将所有的设计要素放在统一的设计框架之中。在这之中包含了包括按钮或字体等全部的设计要素。我们在设计时应该思考什么样的按钮或导航菜单才是应该被选用的。
在实践中如何使用风格指南,在这里有一些网页的案例可以参考。设计师一起来学习,精心挑选的50个知名品牌的风格指南这篇文章,详细介绍了知名平牌是如何利用风格指南,可以用来参考。
因为它可以是一个简单的草图,所以在使用配色版之前,可以方便的帮助你做出你自己的风格指南。一目了然的知道利用什么样的设计要素,那么也就会明白该使用怎样的配色来进行制作了。
选择设计制作时用的调色板时,要有「KISS(略: Keep it Simple, stupid)(越简单越好)」这样的思路。首先,尽可能的减少颜色,我们需要考虑下面几点。
背景色(英: Background)主色(英: Primary Color)次要色(英: Secondary Color)警告色(英: Error Color)成功色(英: Success Color)
主色,作为一个重要的CTA(Call to Action,详细可以看这篇文章:http://www.webpowerchina.com/knowledge/page.php?id=438译者注)按钮或强调色被使用着,很多公司将他利用在LOGO设计上。
次要色、一般利用他来区别动作行为的颜色。举个例子,在警告和成功所使用的颜色,通常使用绿色和红色,如同下面的例子,你可以利用他们来设计从而将当前状态信息传递给用户。
06.选择调色板
如果你已经想好了设计灵感,完成了风格指南并做了一些简单的草图,那么接下来你就可以选择调色板了。
一些基本的调色板,艺术家们通常将他们以相近的颜色排列在一起,这是一个非常不错的方法。
我们可以从这些配色方案中可以获得一些灵感作为参考。就让我们一起来看看如何从尝试出的许许多多的配色方案中取得最合适的方案吧。
正如前面所说,当你在挑选配色方案的时候,为了明确目,传递出怎样的信息情感给用户,你可以尝试着问自己以下几个问题。
这个配色用起来很简单吗?用什么颜色影响力最大,最能引人注目。使用的这个颜色有必要让他更亮/更暗一点吗?用户在什么时候使用商品或者设计?你想通过设计传递什么样的信息?
可以这么说,因为风格指南,颜色在设计中所担任的工作不同,各种各样的颜色的重量也是不同的(英: Weight)。举个例子、强调色比背景色所使用的次数就要多一些。
对于这一点你可以做一些练习,在实际页面中你可以将颜色依重要程度的不同来放进大小不同的形状中。下面是 Invision 的调色板。
考虑到强调色等颜色、配色以图形的模式在下面表现出来了。