[译] 设计一致性的7个小贴士

设计中的一致性会在无形之中使你的设计效果更加优秀,也更易于用户使用。它为用户提供了足够的空间去按着你要要的方式来体验你的设计。

对于一致性来说,在某些些情况下,要理解并实践它几乎是无需伤脑的事情,而在其他情况下,理解起来可能会有点复杂。简单来说,一致性是交互设计中的一种基本规范,它涉及到一份设计中的所有元素,它能够用在一场活动方案的策划中,也能够用在独立品牌的设计中,总之就是要创建出一个可用性高而又统一协调的产品。下面的这些例子我们要特别注意,因为每一个品牌在一致性和可用性设计方面都是佼佼者。

1、主色、次色以及整体的色调

1469149559-7270-267326-b94442cb4251fa18

为何关于如何创建一个优秀的调色板有如此多的资料?这是因为颜色能够作为传递品牌效应的关键视觉因素之一。

一个特殊的颜色标识符可以快速的告诉用户你是谁。想想这个世界中的那些大品牌——Coca-Cola, Facebook,T-Mobile ,它们无一不具有独特的品牌色。如果没有这些颜色,你还能认出他们吗?

另外,使用好颜色也可以帮助用户在使用你的网站过程中始终知道他们是不是在正确的位置。试想如果每个点击动作都把你带向一个使用新色调的页面,你还会疑惑自己究竟是不是在正确的地方吗?

为了创建一个非常棒的调色板,你应该先挑选出一个主要色,然后使用色彩理论添加一到两个次要色。再针对每种颜色设定一组样式和使用规则,在之后的设计中坚持使用这些规则便能保证你在色彩上的一致性。

2、字体大小、间距和位置

1469149561-8693-267326-0aec4ae778041208

如同颜色应该是基于一定样式规则的调色板,字体也是需要设定规则的,而且思路也是一样的。

(1)选择一个主要字体和大小。

(2)选择次要字体和大小。

相比于颜色来说,字体的设置规则可能会稍微复杂一些。 对于 web 端的样式风格来说,你应该使用 CSS 来设置元素的大小,间距和位置,以便每个标签(如h1,h2,h3,body等)调用正确的属性值。

在一个相对固定的位置显示的字体,如导航中中的字体,应该始终保持一致性。如果每个导航元素都采用不相同的字体,用户将会感到相当的困惑。这种一致性规则应该贯穿整个网站,所有相似的项目中应该使用相同的字体形式。

3、元素的尺寸大小和关系

1469149563-6614-267326-152c586b93d2576e

你设计的界面元素尺寸有多大?所有的按钮都是一样大吗?标题和图片大小又是如何?

元素的大小应该由其风格决定,同一元素尺寸大小应该保持一致。

元素使用一致的尺寸大小,并且不同元素间的关系也保持一致,便能帮助用户理解你在设计上所使用的一致性模式,并创建出一个流畅的视觉观感,达到一种和谐而平衡的效果。

4、间距留白

1469149564-4477-267326-c6a6eb8a2c7ec94e

跟元素的尺寸大小同等重要的还有元素间的留白。没有什么比一个元素看起来毫无任何组织和规则能更分散人们的注意力——比如一些照片重叠而其他的则互相之间留有大量的间距。

创建并坚持于一种通用的留白规则的最好方法是使用栅格系统,该系统中那些无形的线条将帮助你决定在哪里放置以及如何放置一个元素,从而使得每一个像文本、按钮、图片这样的独立元素都能够表现的十分协调。

在你考虑留白设计时,一定不能忘了去检查在垂直和水平方向上的一致性。既要留意那些相似元素的关系也不要疏忽那些不同元素间的关系。

5、跨媒介的视觉效果

1469149562-5264-267326-a57e5b41afe2a328

品牌的视觉效果,比如平面图和插画,都应该兼容于不同媒介。无论你的设计是面向一个网站或者宣传手册,广告牌或社会化媒体,品牌的视觉效果都不应该随媒介的变化而改变。

这通常涉及到要使用一组通用的图片处理方式。有些品牌对于如何正确的传达视觉效果会有一些明确的细则——比如色彩叠加或者水印效果以及图片长宽比设置等等。不管你要设计的样式究竟如何,都要牢记的一点就是不管将来把它放在哪个媒介上,它都应该正常的传达出应有的效果才对。

为了最有效的做好这项工作,你最好创建一个可视化的图像集,收集大量的高质量,高分辨率的图像以方便你的重复使用。

6、工作自然的用户模式

1469149561-6338-267326-65094f38d5c44f48

你的设计应该跟现有类似的设计按着相同的方式发挥作用,并遵循那些公认的用户模式。设计师们往往想要做些违背事物自然规律、与众不同的事情,你千万不要掉入这个陷阱。

如果一个网站或者应用程序亦或是任何印制元素能按着用户期待的方式工作,那么他们之间便能轻而易举的产生交互。这因为个时候,用户本身清楚的知道自己要做什么以及该如何达到目标,而设计本身则变为一只无形之中指引用户方向的手(其实这也正应该是一个设计师的真实目标才对)。

这里有四种类型被普遍接受的设计模式值得我们来思考:

(1)内容模式:设计样式和内容的情感语气以及你的品牌。

(2)标记模式:在设计整个网站页面时,你需要用到的 HTML 和 CSS 。

(3)设计模式:每一个元素的外观和所有相关的风格。

(4)用户模式:用户如何与设计元素,如按钮、菜单或图标产生交互。

7、一致的界面元素

1469149564-6666-267326-4cfea99ffe047bb7

虽说这不是粘性导航,但是思路相似。

对于你的网站来讲,其中的每一个交互动作和界面元素应该以同样的方式工作。

(1)链接直接在当前标签页打开或在新的标签页中打开(为每个链接选择一个相同的打开方式)。

(2)按钮自始至终采用相同的颜色。

(3)导航位置固定且选项不变。

(4)页脚和侧边栏应持有一个特定的位置和大小(不应使页脚在一个页面上巨大而在另一个页面很小)。

(5)所有图标易于识别,且其指向符合用户的预期。

(6)可点击的元素应该总是可点击的(如有链接的图片)。

上班列出的这几项展示了所有你在考虑用户粘性和网站可用性时需注意的一些细节。一定要记住,如果你允许一个元素能执行一个动作,元素本身的样式和交互动作就应该是统一的。

结论

设计上的一致性能够创造出符合用户心理模型的产品结构。它也能创建一个有助于提升产品可用性,用户能够理解并愿意与之交互的框架。

对每个项目来讲,一致性开始于一些列的规则和样式指南。即使你是单兵作战,也一定要先创建出一套规则,指出在设计中该如何使用颜色、字体、尺寸、间距、界面元素以及交互动作等等。这种做法将会加快你的设计进程并让你设计出更具可用性的好设计。

译自:https://designshack.net/articles/graphics/7-tips-for-designing-consistency

译者/三达不留点gpj,原文链接:http://www.jianshu.com/p/9715b73f47d9#

 

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/16592/

(0)
TinadminTinadmin
上一篇 2016-07-21 09:57
下一篇 2016-07-22 14:20

相关推荐

  • 一款APP从设计稿到切图全记录

    这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用。另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用。 Part 1 项…

    2016-10-18
  • 设计师色彩理论终极指南

    如果一幅图所表达的内容就可以胜过数千文字的叙述,那么一张界面又有多少内容可以让我们探讨呢?事实证明,这里有许多不同的主题值得我们去讨论,其中一个主题就是色彩理论,它包含挑选一个匹配颜色色系的基本技巧…

    2016-06-27
  • 设计效果评估及产品迭代-有理有据做设计

    近期关注了几篇关于考核产品效果的文章,话题都是围绕如何权衡“数据指标”和“用户体验”。本人更认可的是Facebook总监的说法“ 数据目标是很有用的,但它和用户体验不应陷入永久的竞争对立局面 ”。在我们评估设计效果…

    2017-03-08
  • 创业还没听过在线Logo生成器? 那你就落伍了!

    创业还没听过在线Logo生成器? 那你就落伍了!创业的第一步 - Logo不论是创业或创建新的网站,踏出成功的关键第一步是设计出一个易于一般社会大众识别的logo,以传达企业或服务宗旨,打造企业的视觉形象。品牌Logo可…

    2016-10-17
  • 是否后悔买了iPhone 6/plus?来看iPhone7的设计创意

             最近,有一些争论关于苹果2015年iPhone阵容。 虽然很多表明苹果将遵循传统,同样期待iPhone发布与更新内部今年晚些时候,其他人认为苹果制造商将打破其模式和直接跳转到iPhone的7系列。 无论原来是如此,下一…

    2015-05-11
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 如何为弱势群体做包容性设计之视力篇

    作为设计师,我们总说:我要让我的设计更漂亮和高大上,要完成老板的业务目标,要让多数用户的体验顺畅。我们总是优先考虑大多数人和强者的利益,然而世界是多样和公平的,除了这些我们眼中的“目标用户”和“大多数人…

    2016-12-02
  • 如何快速、高效地进行图标设计

    最近做了一组图标练习,通过这次设计小练习,总结和分享下对现在比较流行的线性图标和插画风图标的一些思路和方法,源文件已经上传。 我们在设计或者绘制图标之前,首先要搞清楚图标的定义,图标到底是什么,为什么…

    2016-06-03
  • 2016 年 UI 设计的新趋势

    移动应用 1. 各平台 (Android/iOS/HTML5/Web) 的标准设计语言接近一致 部分原生控件上只存在风格上的差异,对用户无显著影响。 Material Design 不会大兴其道,更不可能逆袭(用 Material Design 设计的 App 在 iOS…

    2016-01-09
  • App Store2016年最新审核规则

    编号 中文内容 1.1 为App Store开发程序,开发者必须遵守 Program License Agreement (PLA)、人机交互指南(HIG)以及开发者和苹果签订的任何协议和合同。以下规则和示例旨在帮助开发者的程序能获得 2.1 崩溃的程序…

    UI设计 2016-01-21