欢迎来到合肥浪讯网络科技有限公司官网
  咨询服务热线:400-0678-380

轻规划,让网站活络简便的6个技巧

发布时间:2019-11-09 文章来源:本站  浏览次数:78

在网站或软件的策划和规划过程中,咱们常常听到这样的评论:“这个功用规划得太重了”又或“咱们期望可以处理得轻一些”。本文首要从实践和总结的视点出发,提出了让规划变得更轻的6个技巧。

何为轻规划:

在开端之前先需要明确下何为轻规划。这里并不想给轻规划下一个专业的定义,只是概括了咱们对轻规划所应具有的特性的理解。

  • 具有活络的可交互元素:页面上的链接、文本框、按钮等可交互元素能活络地呼应操作并即时反应。
  • 简便的流程和提示,不打断用户的当前使命:一项使命尽量用少而清楚的过程去完结,提示和暂时使命尽量不中断用户主使命,不要让用户做不必要的承认和操作。
  • 不搅扰用户的注意力:用户是来运用产品和服务的,而不是来赏识精美的规划,假如运用过程中会因为规划元素分散注意力那么可能是规划太重了。试着少用些无用的装修和细节。

轻规划的6个技巧:

1. 活络的logo呼应区

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

下面列举了几个logo区活络呼应鼠标例子,在运用过程中发现,小小的变化不只提升了可用性,还让网站显得活络而有生气。

轻规划,让网站活络简便的6个技巧(图二)

2. 活络的可交互元素

导航对于网站的重要性不言而喻,导航元素要即时呼应鼠标操作。

轻规划,让网站活络简便的6个技巧(图三)

重要的操作和引导按钮应该规划得愈加细致些,包含按钮的三态(常态,hover,active)乃至四态(添加一个禁用态)。这么做也是为了使重要的可交互元素对不同的操作及时给出反应,使其显得活络高效。

轻规划,让网站活络简便的6个技巧(图四)

文本框的状态也是一个容易被疏忽的细节,首要是获取焦点后无提示或者提示不行显着。

轻规划,让网站活络简便的6个技巧(图五)

另外对于一些呼应时刻稍长的操作,应该给出进展反应。似乎是显而易见的道理,但是规划中往往也容易忽视。

3. 清楚且温文的提示

提示一般都是供给辅助性信息的,既然是辅助性的,就不宜喧宾夺主过分强化。除非必要,也最好不要给用户带来额外的操作(比如需要用户主动关闭,承认等)。提示的内容也是为了带来协助或者供给反应,因而要言不烦最重要。

twitter中更换个性化主题时的提示,从页面顶部柔软出现,停留片刻后自动消失。

轻规划,让网站活络简便的6个技巧(图六)

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

轻规划,让网站活络简便的6个技巧(图七)

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

    不常用的操作可以弱化,或者躲藏起来,当鼠标经过的时分再出现。这个是基于上文说到的不搅扰用户注意力视点出发的。

    Twitter中将每条微博条目的操作躲藏了起来,减小了对阅览的搅扰。而且在鼠标经过条目呼应区和操作时,都有相应的变化以作为反应。

    轻规划,让网站活络简便的6个技巧(图八)

    flickr中针对相片的操作也运用淡灰色,尽可能弱化和减少对相片浏览的搅扰。

    轻规划,让网站活络简便的6个技巧(图九)

    5. 引导和强化引荐操作

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

    大而易用的表单和注册按钮

    轻规划,让网站活络简便的6个技巧(图十)

    箭头和赤色的按钮一同供给了清楚的视觉途径指引。

    轻规划,让网站活络简便的6个技巧(图十一)

    常用操作的特异处理。某些浏览器的撤退操作也有类似处理。

    轻规划,让网站活络简便的6个技巧(图十二)

    6. 简便处理暂时使命

    假如在看一部精彩电影的时分想喝水了,是期望走到厨房间倒水呢还是期望手边就有一个杯子和水壶?显然人们都不太乐意中断主使命和注意力去处理暂时使命,页面规划也是如此,能在当前页面完结果尽量在当前页面完结。模态窗口、跳转页面、付出层等都不是让用户觉得舒服的做法。除非的确必要,少运用这样的做法。

    flickr中对相片名字的即时修改,当页完结,十分轻盈。

    轻规划,让网站活络简便的6个技巧(图十三)

    Delicious中对保藏条目的删去承认,同样在当页完结,轻盈且很好地降低了骚扰。

    轻规划,让网站活络简便的6个技巧(图十四)

    小结:

    本文从可用性视点提出了轻规划的几个技巧:

    1. 活络的logo呼应区;
    2. 活络的可交互元素;
    3. 清楚且温文的提示;
    4. 躲藏或弱化不常用的操作;
    5. 引导和强化引荐操作;
    6. 简便处理暂时使命

    上一条:图标规划作品鳞爪...

    下一条:音乐与规划——了解色彩运...