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

瞬间的规划 II

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

好的规划绝不是单纯的因为天才的构思或者创意爆发的一瞬间而发生的,只要规划师在“继续改进”的迭代方法中才干到达好的效果,你必须经过不断的“质疑自己”,在不同的规划种找到缺陷,并寻求 更好的计划来改进它。Bill Scott在他的《Web界面规划》里提到了关于富交互规划的六个准则告知咱们怎么发现并找到处理的方法,我遵循这些规划准则,经过实例和数据来和咱们一起剖析一些有趣的瞬间,辅导咱们的规划。

一、直接操纵准则

直接操纵准则就像Alan Cooper在《ABOUT FACE 2.0》中陈说的那样”:“在哪里输入,就在哪里输出“。例如修正内容的操作完全能够不用从头打开页面,而直接在当时页面进行就能够了。

flickr是用到即时修正相片信息的网站。这种方法更开门见山,用户不用切换当时页面就能完结。他们将更乐意为他们相片改名字,那么也就意味着会有更多与相片有关的元数据被记载下来,方便其他用户更好的搜索和阅读。咱们先剖析一下在这个操作的交互瞬间。


每个交互元素在不同触发事 件下所表现的呼应状况。其中橘黄色区域是隐藏在初始状况后面发生的动作和呈现的元素。

瞬间的规划 II(图二)

约请修正——默认情况下,标题正常显现。当鼠标悬停在标题上,标题马上显现黄色布景条和一个“click to edit”的提示条呈现,这种约请提示的好处是——告知用户当时区域是可修正的并引导他们去点击。

修正——单击今后,就当即进入到修正模式,标题原位置呈现了标题表单和”save”“cancel”按钮,用户就能非常清楚他们是在修正标题。(这种方法的缺陷就是多出来的按钮会把相片顶到下一行,造成排版不稳定)

完结——保存方法有很多种,flickr采用了文本的”saving…“临时替换标题,一旦保存完结,新标题就会以非修正的款式呈现。

上述过程中,运用到了一些约请提示用户完结修正,只满意了”可操作性“。那么用户怎样才干发现这个功用呢?这就涉及到”可拜访性“问题。上述比如只要在鼠标移上去时才干被用户发现是可修正性的,那么很可能存在一部分用户没有用鼠标移上去而疏忽这些约请。为了让功用更易被发现,能够采用在标题边放”修正“链接。单击该链接便可触发修正。(不过这也会影响到页面的视觉搅扰问题,如果有过多的功用提示会造成页面噪点过多,可用率下降。)因此,做规划是要权衡易读性和易修正性哪个重要,做出取舍。

二、保持轻量级

Digg在早期的时分,用户想要推一篇文章,需要经过两步操作。而现在的改进版——只要单击”digg“马山就能够记载一次投票。就因为”单击,完毕“简略了一点,带来了用户活跃度和网站点击率的飞速添加,这正是交互轻量级规划的一大效果。

怎样经过简化交互,完成操作更接近内容,然后保证规划的轻量级呢?

1.费茨规律

费茨规律指的是:移动到方针上的时刻(T)和移动间隔(D)的对数(S)成正比。用公式表示为:

T = a + b log2 ( D / S + 1 )来核算。其中

D:鼠标到达方针的间隔
S:方针的宽度(尺寸)

咱们能够简略的理解为:方针定位越简略,间隔鼠标当时的位置就应该越近,方针占用空间应该更大。为了简略,咱们能够把功用都会集到一块(如放在菜单栏和工具栏中)。可是这样就违反了费茨规律(找起来会很费力,间隔也会添加)。经过上下文工具把操作放在相关内容邻近是不错的方法。[注:上下文工具是桌面右键菜单的web版]

2.实时可见的工具

digg在每篇文章周围,有一个推举的记分卡,下方的”digg it“按钮要比其他的操作显得显着。鼠标悬停的时分”digg it“的按钮边框变成黑色杰出显现,单击”digg“后,投票结果马上记载并在记分卡上实时更新。一起”digg“按钮灰掉不可点,标签文本也变成灰色”dugg“。

瞬间的规划 II(图三)

和digg一样,豆瓣的打分也是网站的中心功用。因此明确的操作(评级)约请非常重要。打分后,用户能够随意更改打分分值,对评价作出删去和修正。

瞬间的规划 II(图四)

shutterstock把参加的收藏的图片总是显现在页面底部的遮罩层中,用户能够随时看到并修正自己添加的图片。

瞬间的规划 II(图五)

3.保持要害内容可见

Gmail在页面加载的时分考虑了用户慢速衔接的运用情况,减少款式的加载,运用备选计划保证主要内容可见。

瞬间的规划 II(图六)

淘宝的listing页面一次改版,鼠标悬停在宝物图片上时,不只呈现大图,一起还在时刻维度上对卖家推荐的商品轮播显现,用户相同能够点击下方的小图来挑选查看。不只保证了要害内容可见,一起处理了多信息的展示和交互。

瞬间的规划 II(图七)

4.只做一件工作

Linkdin音讯列表中,用户名承载着两个交互行为:鼠标点击后会跳转到用户profile页面,而鼠标悬停0.5秒今后呈现弹出层,显现该用户的简介。如果咱们不做0.5秒的限制,就会呈现用户在鼠标以上去时马上显现弹出层,那么很可能会有用户认为这个链接只具有这一种操作功用,而疏忽了它能够点击的功用。所以对一个交互行为只赋予它一种功用,多种功用需要考虑用其它方法去完成。

瞬间的规划 II(图八)

Amazon用别的一种方法来处理多功用的展示。星星打分的信息包括两方面:鼠标悬停展示弹出层显现每颗星的打分人数;鼠标点击后显现评价详情页面。如果把这两个信息一起经过点击星星来完成就会呈现上述类似问题。Amazon则是经过添加一个类似下拉的按钮来承载鼠标悬停的交互行为,把点击行为只留给星星。

瞬间的规划 II(图九)

上一条:浅析网页颜色运用...

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