七个提高网站设计一致性的方法


七个提高网站设计一致性的方法


设计中的一致性会在无形之中使你的设计效果更加优秀,也更易于用户使用 。对于一致性来说,在某些些情况下,要理解并实践它几乎是无需伤脑的事情,而在其他情况下,理解起来可能会有点复杂 。简单来说,一致性是交互设计中的一种基本规范,它涉及到一份设计中的所有元素,它能够用在一场活动方案的策划中,也能够用在独立品牌的设计中,总之就是要创建出一个可用性高而又统一协调的产品 。
1、主色、次色以及整体的色调
为何关于如何创建一个优秀的调色板有如此多的资料?这是因为颜色能够作为传递品牌效应的关键视觉因素之一 。
一个特殊的颜色标识符可以快速的告诉用户你是谁 。想想这个世界中的那些大品牌——Coca-Cola, Facebook,T-Mobile ,它们无一不具有独特的品牌色 。如果没有这些颜色,你还能认出他们吗?
另外,使用好颜色也可以帮助用户在使用你的网站过程中始终知道他们是不是在正确的位置 。试想如果每个点击动作都把你带向一个使用新色调的页面,你还会疑惑自己究竟是不是在正确的地方吗?
为了创建一个非常棒的调色板,你应该先挑选出一个主要色,然后使用色彩理论添加一到两个次要色 。再针对每种颜色设定一组样式和使用规则,在之后的设计中坚持使用这些规则便能保证你在色彩上的一致性 。
2、字体大小、间距和位置
如同颜色应该是基于一定样式规则的调色板,字体也是需要设定规则的,而且思路也是一样的 。
(1)选择一个主要字体和大小 。
(2)选择次要字体和大小 。
相比于颜色来说,字体的设置规则可能会稍微复杂一些 。对于 web 端的样式风格来说,你应该使用 CSS 来设置元素的大小,间距和位置,以便每个标签(如h1,h2,h3,body等)调用正确的属性值 。
在一个相对固定的位置显示的字体,如导航中中的字体,应该始终保持一致性 。如果每个导航元素都采用不相同的字体,用户将会感到相当的困惑 。这种一致性规则应该贯穿整个网站,所有相似的项目中应该使用相同的字体形式 。
3、元素的尺寸大小和关系
你设计的界面元素尺寸有多大?所有的按钮都是一样大吗?标题和图片大小又是如何?
元素的大小应该由其风格决定,同一元素尺寸大小应该保持一致 。
元素使用一致的尺寸大小,并且不同元素间的关系也保持一致,便能帮助用户理解你在设计上所使用的一致性模式,并创建出一个流畅的视觉观感,达到一种和谐而平衡的效果 。
4、间距留白
跟元素的尺寸大小同等重要的还有元素间的留白 。一个元素看起来毫无任何组织和规则,能分散人们的注意力——比如一些照片重叠而其他的则互相之间留有大量的间距 。
创建并坚持于一种通用的留白规则的最好方法是使用栅格系统,该系统中那些无形的线条将帮助你决定在哪里放置以及如何放置一个元素,从而使得每一个像文本、按钮、图片这样的独立元素都能够表现的十分协调 。
在你考虑留白设计时,一定不能忘了去检查在垂直和水平方向上的一致性 。既要留意那些相似元素的关系也不要疏忽那些不同元素间的关系 。
5、跨媒介的视觉效果
品牌的视觉效果,比如平面图和插画,都应该兼容于不同媒介 。无论你的设计是面向一个网站或者宣传手册,广告牌或社会化媒体,品牌的视觉效果都不应该随媒介的变化而改变 。
这通常涉及到要使用一组通用的图片处理方式 。有些品牌对于如何正确的传达视觉效果会有一些明确的细则——比如色彩叠加或者水印效果以及图片长宽比设置等等 。不管你要设计的样式究竟如何,都要牢记的一点就是不管将来把它放在哪个媒介上,它都应该正常的传达出应有的效果才对 。

推荐阅读