下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

设置网站轻便的6个小技巧

作者:课课家教育     来源: http://www.kokojia.com点击数:816发布时间: 2016-09-26 09:17:03

标签: 网站设计轻设计设计技巧

想学设计?来看看大师是如何完成作品的?

  当今有很多人在设计网站的时候,都会在网站或软件的策划和设计过程中,而我们也会经常听到这样的讨论:“哇,这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的话题,也是方兴未艾的web2.0大浪下设计师们的最爱。我们来看看那些在全世界遍地开花的SNS网站,其实无论是视觉元素还是交互流程均是能轻则轻。网站灵敏轻便的设计对于设计者来说是有一定难度的,但是又是设计师们必须要考虑的,其实掌握了一些技巧也许就不会显得那么困难。而我们在本文主要从实践和总结的角度出发,提出了让设计变得更轻的6个技巧,这6个小技巧也仅仅只是参考,如果你有更灵巧的方法,欢迎留下建议在课课家。感谢大家的支持。

  首先我们来解释一下何为轻设计:

  我们必须要在开始之前需要明确下何为轻设计。而这里并不想给轻设计下一个专业的定义,我们只是归纳了大家对轻设计所应具有的特性的理解,这也是小编的建议和大家的集体建议而已。

  具有灵敏的可交互元素:在这个页面上的链接、文本框、按钮等可交互元素能灵敏地响应操作并即时反馈。

  我们按照轻便的流程和提示,不打断用户的当前任务:我们在进行一项任务的时候,并且要尽量用少而清晰的步骤去完成,提示和临时任务尽量不中断用户主任务,不要让用户做不必要的确认和操作,这是最基本的,不要令客户产生厌烦情绪。

  不干扰用户的注意力:用户是来使用产品和服务的,而不是来欣赏精美的设计,如果使用过程中会因为设计元素分散注意力那么可能是设计太重了。试着少用些无用的装饰和细节,这个也是很重要的,太多的元素,会让人眼花缭乱,要具体突出重点。

  总的来说:请设计包括这几点:具有灵敏的可交互元素,按照轻便的流程和提示,不干扰用户的注意力。三点结合,这就便是我们所需要的轻设计,轻设计就应该具备这几个条件,把网站都弄得轻便一些,那样就会比较让人接受与比较舒服地看,起码不会眼花缭乱。

  下面我们来介绍一下轻设计的6个小技巧:

  小技巧1:灵活的logo响应区

  在我们点击网站的logo通常能将我们带回到首页。而从这个角度看,Logo不仅起着品牌标识的作用,我们还承担了重要的导航功能。其实,就连普通的链接当在鼠标划过时都有下划线或者变色提示,那么logo作为一个更为重要的可交互元素,我们是否也应该在鼠标划过时提供适当的反馈呢?

  下面列举了几个logo区灵活响应鼠标例子,我们发现在使用过程中发现,其小小的变化不仅提升了可用性,而且还让网站显得灵敏而有生气。

网站灵敏轻便的6个轻设计技巧_网站设计_轻设计_设计技巧_课课家

  小技巧2:灵敏的可交互元素

  首先来说一下导航菜单,导航对于网站的重要性不言而喻,而导航元素便需要即时响应鼠标操作。

首先来说一下导航菜单,导航对于网站的重要性不言而喻,而导航元素便需要即时响应鼠标操作。

  对于一些重要的操作和引导按钮应该设计得更加细致些,包括按钮的三态(常态,hover,active)甚至有四态(增加一个禁用态)。其实这么做也是为了使重要的可交互元素对不同的操作及时给出反馈,从而使其显得灵敏高效,这个可交互元素在网页中举足轻重,因为如果某些元素缺失了,会导致观者找不到导入点,带着迷茫进入网站,有了一些元素,会让它们方便快捷地找到它们所需要的。

其实这么做也是为了使重要的可交互元素对不同的操作及时给出反馈,从而使其显得灵敏高效

  文本框的状态也是一个容易被忽略的细节,它的主要作用是获取焦点后无提示或者提示不够明显的,那么我们就会发现它的缺点了。

文本框的状态也是一个容易被忽略的细节,它的主要作用是获取焦点后无提示或者提示不够明显的。

  另外对于一些响应时间稍长的操作,我们就应该给出进度反馈。这似乎是显而易见的道理,但是设计中往往也容易忽视。

  小技巧3:清晰且温和的提示(这就是提示栏,要放在显而容易见的地方,方便观者者找到)

  提示通常都是提供辅助性信息的,既然是辅助性的,就不宜喧宾夺主过分强化。除非必要,也最好不要给用户带来额外的操作(比如需要用户主动关闭,确认等)。提示的内容也是为了带来帮助或者提供反馈,因此言简意赅最重要。

  twitter中更换个性化主题时的提示,从而使页面顶部柔和出现,在那里停留片刻后,它就可以自动消失了,觉得很神奇的感觉吧。

清晰且温和的提示(这就是提示栏,要放在显而容易见的地方,方便观者者找到)

  如:meme中的follow提示,在操作处出现,大家细心点就可以发现了。

如:meme中的follow提示,在操作处出现。

  小技巧4:隐藏或弱化不常用的操作

  不常用的操作可以弱化,或者隐藏起来,当鼠标经过的时候再出现。这个是基于上文提到的不干扰用户注意力角度出发的,这样可以减少令观者眼花撩乱的情况。

  Twitter中将每条微博条目的操作隐藏了起来,这样做可以减小了对阅读的干扰。而且在鼠标经过条目响应区和操作时,都会有相应的变化以作为反馈。

不常用的操作可以弱化,或者隐藏起来,当鼠标经过的时候再出现

  我们可以看出,在那个flickr中针对照片的操作也使用淡灰色,我们可以尽可能弱化和减少对照片浏览的干扰。

在flickr中针对照片的操作也使用淡灰色,我们可以尽可能弱化和减少对照片浏览的干扰。

  小技巧5:引导和强化推荐操作

  强而明晰的引导是十分必要的,研究表明用户在浏览页面的时候是跳跃性、非线性的,我们发现用户并不喜欢在诸多的操作中选择和寻找最佳选项。所以清晰的引导就显得更加重要了。重要和常用操作还可以特异处理,那样以便于用户寻找和点击。

  小编觉得运用大而易用的表单和注册按钮,这是最佳的方案。

运用大而易用的表单和注册按钮,这是最佳的方案。

  其实这也是方法之一:在箭头和红色的按钮是可以一起提供了明晰的视觉路径指引。

 这也是方法之一:箭头和红色的按钮一起提供了明晰的视觉路径指引。

  而我们常用操作的特异处理。如某些浏览器的后退操作也有类似处理。

而我们常用操作的特异处理。如某些浏览器的后退操作也有类似处理。

  小技巧6:轻便处理临时任务(这个等于快捷键,老板键。)

  如果在看一部精彩电影的时候想喝水了,是希望走到厨房间倒水呢还是希望手边就有一个杯子和水壶?显然人们都不太愿意中断主任务和注意力去处理临时任务,页面设计也是如此,所以能在当前页面完成就尽量在当前页面完成。但有一些是模态窗口、跳转页面、付出层等都不是让用户觉得舒服的做法。除非确实必要,但是还是少使用这样的做法比较好,因为,大多数这样的情况会导致页面的缺失或者数据的掉失。

  flickr中对相片名字的即时编辑,当页完成,是一种非常轻巧方法。

flickr中对相片名字的即时编辑,当页完成,是一种非常轻巧方法。

  而Delicious中对收藏条目的删除确认,其同样在当页完成,轻巧且很好地降低了骚扰,轻便简单实用,真的是一举多得。

而Delicious中对收藏条目的删除确认,其同样在当页完成,轻巧且很好地降低了骚扰。

  小编小结:

  我们在本文从可用性角度提出了轻设计的几个技巧:

  1.灵活的logo响应区。

  2.灵敏的可交互元素;

  3.清晰且温和的提示;

  4.隐藏或弱化不常用的操作;

  5.引导和强化推荐操作;

  6.轻便处理临时任务

  以上仅是个人的实践和经验总结,欢迎大家指出不足之处并提供更多轻设计方面的建议。

  小编结语:网页设计中,经常会听到别人说到一个名词,那就是这个区域或者功能太“重”了,平时我们所理解的轻重一般都是用来形容重量,但是在这里使用或许会让大家有点摸不着头脑?其实很简单,这里的轻重是全局的来说,比如太过于紧凑,颜色太深,比例太大等都可以用轻重来形容,这不是重点,重点是出现这种情况,作为设计师的我们应该如何解?那小编相信,大家看完这个教程,都会受益匪浅吧,特别是大家在设计网站的时候,这几个小技巧,会帮助你的网站成为更好的网站,因为符合大多数用户的需求,那就等于成功了一半了,而且大家在这些设计中,难免没有方法,所以这个这几个小技巧还是很管用的,教程中,我们所提及的设计,正是大家所追求的简单的设计页面,设计页面时,记得注意把元素留完整,不必要的尽量隐藏,那么整个页面看起来就会简洁一点。如果大家还想了解更多的教程,欢迎与小编闲聊,我很有空的哦。

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程