7个实用规则,让你的设计更加简单直观

简单直观的设计并不一定非得是极简的,它同样可以是丰富而又有趣的。


简单直观的设计并不一定非得是极简的,它同样可以是丰富而又有趣的。

7个实用规则,让你的设计更加简单直观

还记得KISS原则么?KISS 是 Keep it Simple and Stupid 的缩写,指的是要将产品做的连白痴都会用,因此也常常被称为懒人原则。这一设计原则最初在1960年被提出并应用于美国海军的相关设计。在此后的50多年当中,设计在技术和思路上经历了翻天覆地的变化,但是KISS原则依然非常重要,并且影响巨大。

绝大多数的平面设计师在刚刚开始接触设计的时候,或多或少都接触过KISS原则,但是在具体实施的时候,却常常不知要如何实施。想要创造一个足够简单的设计,可能比你想象的要复杂一些。那么,今天接下来要说的7个规则,能够帮你在杂乱的思路里面,理出一条通路。

1、一个页面,一个目标

7个实用规则,让你的设计更加简单直观

想要设计一个简单直观的网站,那么你应该为每个页面设定一个目标。每个页面最终是要引领用户进行某一个操作,从导航到页脚都要围绕这一个目标来设计。

可以是点击一个链接,也可以是在表单中输入信息,还可以是查看视频或者进入一个游戏。但是不论是哪种,都应该关注单个用户在这个页面中的转化率。

分散用户注意力的东西太多了,他们可能因为这些干扰而打断了原本正准备进行的操作。所以,你要做一个目的性明确的设计,集中精力来引导用户。每个按钮上下的设计元素,包括滚动的效果本身,都尽量将用户导向按钮、链接等。这种目标上的一致性能够很好的帮助用户了解他们需要在网站上做什么,简单的选择往往能够让用户更轻松参与进来。

2、坚持使用一两个字体族

7个实用规则,让你的设计更加简单直观

有许多设计规范会推荐用户在一个设计项目中使用三个甚至更多的字体。不过,将使用的字体缩减到2个字体族当中,会让整个设计的凝聚力更强。

许多字体族当中,不同的字重能够创造足够的视觉对比度。许多字体族当中甚至包含了多种不同样式的字体,其中有些可选的字体形式感十足,甚至非常适合用来做尺寸超大的标题。

所以,你的主要工作是挑选适合正文用的字体以及用作展示的字体,选择两套能够相互搭配的字体族,那么你整套设计可用的字体搭配应该都可以搞定了。

接下来你会发现,这样的字体搭配能够让你的整个排版和视觉层次更易于管理控制。

3、使用一致的对齐方式

7个实用规则,让你的设计更加简单直观

左对齐,居中,还是靠右对齐,无论你是喜欢哪种,尽量在整个设计当中贯彻这种方式。这种对齐方式的选取不仅仅是文本本身的对齐,还包含了各种其他元素的对齐方式。

Adaptable 的网站在这个事情上就做的很好。尽管轮播图中的图片和文本的内容各不相同,但是几乎都采用了统一的左对齐,文本和行为召唤按钮也是做对齐,元素与元素之间的间距也很统一,这种一致的美感让人非常舒适。

左对齐和居中对齐是最常见的两种对齐的方式,因为这两种是可读性最强的排版方式。而在针对较长的文本进行排版的时候,左对齐是首选选项。

4、建立层次

7个实用规则,让你的设计更加简单直观

用户不应该在查看你的网页的过程中费脑子思考。所以,即使是最简单的视觉排版,都应该具备足够清晰的层次。

你的设计应该从主视觉开始。它可以是一个图像,也可以是一个视频,同样可以是一段文本,但不论是哪种,它都应该是给予用户第一印象的元素。

接下来,通常需要有一些文字内容,告知用户这个设计或者这个网站是干啥的,通常,它会以标题的形式和主视觉搭配起来,一同传递信息给用户。

随后可以增加一些说明性的副标题。此外,还应该提供导航等元素,因为基于用户的浏览习惯,他们会期望看到这些内容,并且已经具备了与之相关的浏览习惯。所以,通过这样层次化的设计,可以让用户更便捷地获取信息。

5、运用空间与留白

7个实用规则,让你的设计更加简单直观

不要纠结于留白太多,留白其实是服务于各种设计元素的,它会让你的设计更好。

如果你想要设计真正简单直观的设计,留白是必不可少的组成部分。给每个元素足够的空间,有空间的衬托,才能让这些元素被访客注意到,因此,千万不要让整个布局杂乱不堪,而应该创造有视觉焦点的布局。

使用空间窍门在于一致性的把控。为每个元素周围的留白、文本的字间距、行间距都设定好,然后尽可能保持规则性。如果这样设计出来的效果看起来不自然,也许你只需要对留白稍加调整就可以了。当你打开自己的设计,视觉自然聚焦到你想要用户看的地方的时候,你就会知道你的留白和空间设计是争取的。

6、强化对比度

7个实用规则,让你的设计更加简单直观

从色彩到尺寸大小,具有高对比度的设计元素能够让整个项目的设计感和精细度得到提升,哪怕是在极简的设计框架之下。

明亮而又富有对比度的配色是许多跟随流行的项目所青睐的选择,因为这样更容易吸引用户的注意力。大胆的配色让一个简单的设计显得更加富有设计感,也更加有趣。为了充分的利用色彩的对比度,尽量选择色轮上相对位置的色彩搭配,并且调整色彩饱和度到合适的状态。也许你会在其中寻找到意想不到的搭配。

7、使用一致的图标和元素

7个实用规则,让你的设计更加简单直观

设计的一致性是最基本的设计规则,也是最容易被忽略的设计规则,与此同时,它也是许多优秀的设计的秘密所在。有太多的网站采用不匹配的设计元素,导致整个设计陷入尴尬。

所以,创建一整套系统而一致的图标和UI元素合集与规则是相当有必要的,一旦你完成设定,应该在整个设计项目中贯彻并运用这套UIKit 和规则。

如果你为一个元素确定了色彩,选择了一个光标悬停的特效,那么你需要基于使用状况和用量

Praticca Vending Machines 这个网站就采用了超大的图标来告知用户,可以点击获取更多的信息。包含+号的彩色图标沿用了相同的样式,并且为不同的区块搭配了不同的色彩,引导用户去点击。

结语

简单直观的设计并不一定非得是极简的,它同样可以是丰富而又有趣的。但是简单而易用的页面的设计过程是需要用心做才能达成的,它需要具备高度的可用性和直观的设计,确保用户在使用的时候足够直觉、不会迟疑。

 

原文作者:CARRIE COUSINS

原文地址:designshack

翻译:@陈子木

译文地址:http://www.uisdc.com/7-simple-design-rules

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

(0)
CatherineCatherine
上一篇 2017-05-09 13:07
下一篇 2017-05-09 15:05

相关推荐

  • 交互设计

    产品设计流程和方法产品设计4大原则交互设计及基本原理(简约4策略)交互设计的作用【未完,待续~~~】

    2018-01-31
  • 交互设计可以区分出一个好的产品和一个差的产品——「得米Micah」

    这是 Bestony 推荐给你的第141个公众号基础信息公众号名称: 得米Micah公众号类型:文章型订阅号公众号ID:MicahDesign更新频次:不定期更新简介今天为大家分享的公众号来自一个交互设计师 Micah 。搞互联网的或多或少都听过这个岗位,我在网易待过,也曾经为外包公司干活,也为初创企业作过技术服务,很多时候,不同产品的区别最大的点可能便是在于交互设计。小公司或外包公司会有设计师,但是是我们所说的「视觉设计师」,而大公司...

    2018-03-15
  • 唯品会实习|面向19/18届,地点广州

    公司介绍唯品会(NYSE:VIPS)VIP.com成立于2008年,以“全球精选 正品特卖”为品牌宗旨,在中国开创了“精选品牌、深度折扣、限时抢购”的时尚特卖模式,在线销售服饰鞋包、美妆、母婴、居家、生活等全品类名品。招聘岗位商务助理(18/19届)■岗位职责:1. 负责跟进预上线商品的所有商品资料;2. 负责检查货品清单正确性、完整性、准确性、规范性,交接正确的资料给相关部门;3. 负责申请标准的档期,走档期流程并落实档期日期;4. ...

    2018-03-06
  • 淘宝双12亲亲节:活动视觉分析(预热期)

    双12对比双11,最大的区别是双11更强调品牌的狂欢、而双12更强调年轻、有趣、活力。本文作者将为大家分析一些观点,仅供参考!亲,能包邮吗?亲,还能在便宜点吗?

    2017-05-14
  • 2018用户体验设计趋势,你知道吗?

    设计师总再盼望未来 - 在整个工作流中我们重复相同的事情。最后,困扰设计师往往是围绕着一个简单的问题:我们如何才能提高用户的体验?为了解决这个题,Figma采访了18位设计师,让他们来来预测2018用户体验设计趋势。1.可用性第一,个性化第二“我真的希望2018年设计师们将可用性设计铭记在心。我们不要在基本元素上使用超浅灰色,我们做得每一个像素动画不应该只是因为它看起来不错,我们不应该让用户难以理解内容,因为我们是设计师。”2.设计师要...

    2018-01-31
  • 用户体验与故事大王的创新火花

    嗨,亲爱的小伙伴们,2018年4月25日,我们又一同相约创新的周三,每周一次的创新工程实践如期而至。此次见面课主场是北京大学,由黄文彬老师主讲的《用户体验创新》。首先带大家了解一下黄老师。来自北京大学、南开大学、北京科技大学、西安电子科技大学、新疆大学、暨南大学、西北农林科技大学、西安交通大学、南昌大学、东北农业大学、哈尔滨工程大学等全国285所高校、九万六千多名师生共同收看了此次课程直播,其中江苏工程职业技术学院和山东财经大学参加了本...

    2018-04-25
  • Apple Watch超细致的硬件交互设计?什么!硬件还有交互设计?

    阿西导读:交互设计在任何有与人产生交互的设备|系统中,人机交互的范围很广,但交互设计的目的是为了提升整体的用户体验. 冷锻不锈钢,炼就强韧与魅力。 产品的用途,决定产品所用的材质。Apple Watch 设计的初衷是为…

    2015-01-26
  • 交互设计之架构真经

    建立信息架构是交互设计师主要工作之一,是需求转向交互稿中非常重要的过程。一个架构的好坏决定这这个产品未来的命运,只有具有一个好的信息架构,才会具有一个好的产品体验。以下将从认识——前期工作——如何产出——如何判断,四个步骤来介绍信息架构。一、何为信息架构信息架构设计是对信息进行结构、组织方式以及归类的设计、好让使用者容易使用和理解的一项艺术与科学。这是比较官方的说法,简单通俗的说法就是对信息进行组织和层级分层。当我们一看到购物车这个信息...

    2018-05-01
  • “用户体验”3.9万油电混合植保机演示视频

    植保季就快来到,很多植保团队以及飞手非常关注行业植保机的动向,不仅因为飞机本身的性价比高而且续航时间和作业效率同样是大家非常关心的事情。因为对于植保作业来说,作业效率关系着成本和收益,同样的植保机在单位时间内所节省的时间相当于是多出来的利润,这也就是为什么油电混合植保机能被大众所看中的缘由。近期在无人机网(www.youuav.com)发布的这款3.9万油电混合植保机一经亮相之后在植保行业中引起了足够的重视,很多朋友对其抱有足够的兴趣,...

    2018-04-24
  • 交互设计自学攻略

    交互设计是一个现在很热的岗位,工资待遇,发展前景都比较好。一些学工业设计,计算机,心理学及相关专业的人都想加入其中。 但国内大学只有少量开设相关的专业,而且集中在设计名校,如(清华,西交大,北理,江南…

    2015-08-19