网页设计鼠标经过图片出现下拉(html鼠标放上去图片切换天下)

　　好设计与坏设计

　　大连创课教育：好设计与坏设计一个美国作家兼易用性研究的专家JaredSpool曾经说过:“好的设计是看不见的。只有当它设计的不够好的时候才会被我们注意到”。通过看好的和坏的设计的案例，你会发现这样并不只是有趣，同时也给设计师上了一堂课。这些案例中能总结出了是哪些引起设计失败的因素，并致力让看到这篇文章的设计者避免在设计时犯同样的错误。帮助设计师理解了如何为真实世界设计解决方案的方法。

　　所以让我们来看看下面这些设计的例子吧，看看好的设计是如何产生如何工作的，坏的设计是如何坏事的。

　　1.信息超载

　　坏例子:洛杉矶的停车标识

　　洛杉矶的停车牌的信息超载已经几十年了，它们一直因为理解起来很困难而臭名昭著。因为交通规则非常复杂，在很小的一个板子上传递了太多的信息显得特别混乱。有多混乱呢？我们来看看2010年的这个停车牌的样子：

　　JorgeGonzalez

　　想象你在周二早上九点开车行驶在这条路上，你可以在这里停车嘛？这样简单的一个问题似乎要花费很多脑筋才能回答。

　　作为设计师，我们会经常遇到这样的情况:在很小的区域展示很多内容。LA的停车标识也许是个极端的案例了，但是很多时候我们为移动APP设计时，也意味着同样的问题。是否有解决此类问题的通用的办法呢？让我们看看下面好的设计的例子。

　　好例子:NikkiSylianteng设计的停车标识

　　设计一个标识来展现所有信息，而且还需要容易理解，听起来是不可能的事情，但实际上来自布鲁克林的设计师NikkiSylianteng做到了。

　　NikkiSylianteng.

　　Nikki设计的停车标识最终作为LA的正式停车标试运行了。Nikki的设计起到了非常好的效果在于它是以用户为中心的。Nikki意识到司机只是简单地想知道他们能不能在那块停车而已，是或否-这就是全部了，也就是说标识要明显标志出是和否的含义就行。

　　她的设计中以视觉设计为主，比单纯用文字要更直观地传达了这个信息。结果是相当惊人的直观:绿色表示OK，红色表示不可以停车。甚至这个标识还考虑到了红绿色盲的人群，不可停车用了斜线为背景。

　　现在当你看这个设计的时候，你就知道在周二上午早上九点，这里不可以停车。这些绿色条简直简单的一目了然。

　　我们来看下Nikki设计此标识的研究过程:

　　我(以下以“我”代表Nikki观点)

　　为什么停车牌要设计的如此复杂呢？我都为此叫了三次罚款了。其实只需要回到司机心中的问题“我能停在这里吗？”“能停多久？”这两个问题就好。希望借此机会可以做到一个小小的改动就能够让多少人避免吃罚单的窘境.

　　学到的最佳实践方法

　　?理解你用户需要什么，然后基于他们的需求来设计，这能帮助你解决信息过载的问题。

　　?想要给你的用户传达很多信息？尝试用视觉的方法来代替纯文字吧。

　　2.MysteryMeat导航(MMN)

　　坏例子:LazorOffice.com

　　1998年由VincentFlanders的网站提供的神秘肉类导航(MMN)的意思是指:在用户点击它或将光标指向之前，链接的目标页面不可见的情况。属于“MysteryMeat”是指在美国公立学校食堂提供的肉类，如此处理使其类型不可辨别。

　　MMN是不好的因为它减少了导航元素的可发现性。这给用户的认知增加了负担，因为用户必须猜测如何导航或者点击什么内容才能跳转到什么地方去。

　　虽然大多数MMN都存在在比较旧的网站设计上，不过在现代网站上发现它们还真是令人惊讶。例如一家创建预定制家居的设计公司也居然用了MMN.

　　LazorOffice,LLC.

　　LazorOffice.com的主页上有一个九宫格的图像网格。正如你所见到的，这个表格没有给出一点关于点击之后将会去哪里的迹象或标识。九个图就那么摆在那里，让我们中的一些人会陷入苦苦思考而不是与页面进行交互。

　　在主页的下方，又有一些缩略图摆在那里，他们是可以点击的么？是的-只有你把光标移动到一个图片上，它会变成一个指针的时候。但是当你点击之后会发生什么？“通过点击去发现吧”从来不是一个好的用户体验。很可能你的用户将放弃导航并在竞争对手的网站中找到替代的解决方案。

　　好例子:InteractionDesignFoundation网站上的课程卡片

　　好在MMN问题是很容易解决的。关键就是你必须给出清晰的文本标签链接Alttext。在鼠标浮上卡片的时候简单的加上一个“ViewProject”按钮，就会大大的提高网页的易用性了。

　　InteractionDesignFoundationApS

　　上图网站的课程卡片由于有了链接说明就不再是MMN了。不仅在每个卡片下面有“viewcourse”的按钮链接可以标识出点击后会发生什么操作，同时当鼠标移动到卡片上时，还有一个文字“Gotocourse”的文字说明。很多网站都遵循了这样的一个设计方法，你也应该试试，这样可以让你的网站易用性大大提高。

　　由此学到的最佳实践方法

　　始终给链接以文本标签Alttext，这一点开发尤其也要注意。用户是不会喜欢点击那些不知道何去何从的神秘物体的。

　　3.给用户的操作增加摩擦或阻碍

　　坏例子:iFly50.com

　　作为设计师，我们要非常小心地添加对用户操作的阻碍或摩擦，除非非要用户执行该操作。然而有时候，我们可能会无意中增加对用户操作的摩擦阻碍（多半主要出于了审美或者新奇的原因）从而导致不利用户的体验。

　　一个例子就是iFly50.com,是iFlyFLM杂志周年纪念版，来展示50个旅游的惊人理由的案例。然而在某些目的地例如下图这里，在底部有一个按钮来要求用户点击后等待几秒钟来看更多的照片。

　　KoninklijkeLuchtvaartMaatschappijNV(KLMRoyalDutchAirlines).

　　iFly50网站期待他们的用户每次想看更多图片时就点击这个按钮并等待几秒钟。每次点击都要增加几秒钟的等待的这种阻碍结果导致了非常差的用户体验。想象如果用户不是点击一个页面马上就加载出来，而是每点击一次都要等待几秒，估计用户早都不耐烦，他们可能点了几次之后就会退出浏览不再光临。

　　很多时候，设计师倾向于随着最新的交互风格或新的动作来让网站脱颖而出，但是如果这有可能需要增加用户和网站间交互的摩擦时，千万要小心谨慎的使用。大多数时候，那些经过试验和测试的惯例设计往往可以很好的工作。

　　好例子:IOS中的弹性滚动

　　有趣的是，如果小心地对用户操作过程增加摩擦有时又可以带来很好的设计效果。苹果在其移动操作系统IOS中，发明了一个很受欢迎的设计-弹性滚动。在某些情况下（例如在网页的最末尾处）滚动变得困难甚至回弹。告知用户已经到达底部了。

　　InteractionDesignFoundationApS.

　　在IOS中的弹性滚动设计里，这些摩擦阻碍是有意加上去的。你可以看到在上面的操作中，当用户滚动提到网页末尾时会出现增加滚动阻碍，这表示不再允许用户滚动了。这对用户来说是最直观的体验。

　　学到的最佳实践方法

　　尽可能地避免给用户添加不必要的摩擦或阻碍，除非没有其他选择了。

　　4.“聪明”的设计忽略了易用性

　　坏例子:Bolden.nl

　　有时候，“聪明”的设计可能会损害用户体验。更危险的是，设计师们都喜欢聪明的设计。它们那小小的神奇效果可以给用户带来喜悦。可悲的是，大多数人不是设计师，更可悲的是，不是所有的聪明的设计都是好的设计，尤其是当它们引发了可用性、可发现性的问题的时候。

　　以荷兰的策略设计和开发工作室Bolden的网站为例:

　　Bolden

　　你能告诉我这个主页想表达什么意思么？不能？那么那是因为你没有移动你的鼠标到左上和右下角去，那样你才能看到效果.

　　这是一个聪明的设计么？当然是的。但是它是坏的设计么？绝对的。

　　这是为设计师而设计的一个网站,而非普通用户的一个例子。网站严重地降低了标题的可读性。无论谁设计这个网站都没有告诉用户应该把鼠标移动到角落才能看到准确的信息。这就意味这标题的发现依赖于点击事件。此外，即使标题显示出来了，它的文本和背景之间的对比也很差，你会看到重叠的文本。这一切加起来都在创建一个不友好的网站。

　　好例子:CultivatedWit.com

　　CultivatedWits网站是一个很好的反例，说明如何聪明的设计而且不会对可用性造成损害。

　　CultivatedWit.

　　CultivatedWit的主页展示了一个猫头鹰插图。当你鼠标移动的时候，猫头鹰的图会闪烁。左眼会闭上:

　　惊喜！

　　这两个聪明设计的主要的区别在于，这个猫头鹰小动画不是构成网站重要的组成部分，只是点睛之笔。因此即使用户没有发现这个聪明的设计元素，也不影响可用性。此外他们还提供了一个明确的向下箭头，告知用户还有内容在下面。当你向下滚动时就能够看到：

　　这样的网站很聪明，又不会牺牲用户体验。这个页面中文字与背景的良好的对比度，这种方式创造出一种机智感，仅有一个小问题就是文本“Joinouremailclub”应该更加凸显一些，需要增强对比度。但作为一个整体，CulteredWit是个提供聪明的设计又不损害UX的好例子。

　　学到的最佳实践方法

　　应该始终将聪明的设计尽可能地对实际用户进行测试，有时候聪明的设计反而会牺牲可用性和用户体验。

　　5.多余的动画

　　坏例子:PayPal收据的概念版设计(采集自Dribbble)

　　动画是互动设计的关键元素，但是它们应该始终都为了一个目的就是为了引导用户，更加直观。而不应该是为了做动画而做动画效果。但是，设计师往往会爱上动画，执着于动画的原因可能是因为动画很有趣，但我们却不会到什么时候该用什么时候不该用。

　　VladyslayTyzun设计的在PayPal电子收据的动画概念就是错误地使用了复杂动画的例子：

　　VladyslavTyzun.

　　这个动画很漂亮，但确实多余。总共需要3.5秒钟才能看到交易的细节。一个收据的简单的淡出动画就足够了，因为它占用的时间更少对用户会更好。

　　当设计师无法得到足够的动画效果时这个问题似乎变得很危险。截止到2016年，Vladyslav的动画获得了500多个like,和8000多次的浏览。这显示出误导了很多设计师设计动画的观念。在你展示你的动画效果给其他设计师时最好谨慎考虑。记住用户实用任何产品都是有目的性的-我们希望在短暂时间和空间内展示给他们所需要的，而不是让用户在我们的动画长廊中徘徊。

　　好的例子:Stripe结账动画

　　当我们有目的性的做动画时，结果就会相当的好。请看下面的条码结账的动画效果，当用户接受到了一个验证码并输入时:

　　Stripe,Inc.

　　Stripe使用动画效果来让事情看起来更快:它为用户提供了实时更新，例如从Sending到Sent.甚至用户还没收到短信的时候，就告诉用户已经发送了短信了。这就防止用户在沮丧地等待，也保证了SMS正在进行中。

　　W3C的受邀网络动画专家RachelNabors，建议在设计动画时的五个注意的原则：

　　1.刻画动画:在创建之前先思考，为达到何种目的使用动画。

　　2.动画设计原则要基于迪士尼12准则以上:迪士尼12条动画原则是用来制作动画或电影的，不一定对网页或APPs适用。

　　3.有用的和易用性为主，然后才是美感。美感应该放在UX之后。

　　4.放快四倍的速度:好的动画是不会引人注意的，这意味着应该让他们快些播放完。

　　5.安装一个关闭开关:对于大型动画渲染效果极慢，那请加上一个让用户可选择不执行动画的开关。

　　学到的最佳实践方法

　　永远让你的动画有目的。太多的动画会损失产品的用户体验。美感应该在功能之后。

　　总结

　　看完了这些好的和坏的设计的例子难道不很有趣么？而且它们的教育意义也很强。这些关键的设计要点和最佳实践被总结在了下面:-

　　1.了解你的用户的需求，然后提供他们想要的信息。

　　2.如果你要传达很多信息，请尝试使用视觉图形图像来代替文字。

　　3.永远都要将Link的部分加上Alttext标签，以便用户知道点击后会去哪里。

　　4.避免对用户的操作增加摩擦或阻力，除非是为了劝阻用户别那么做的时候。

　　5.检验“聪明”的设计，谨慎地使用它们。

　　6.动画就像咒语，如果滥用它造成的损失会比益处多。

　　大连创课教育：好设计与坏设计要想理解为什么设计失败了，就看看那些为什么成功了的设计的例子吧，然后从中吸取教训。