《点石成金:访客至上的网页设计秘笈》在用户体验领域，可以说是一部很经典的书籍，该书于2000年出版第一版，现在已经更新到第三版，自从问世以来可以说已经将近20年了，但一直是备受推崇。这本书主要为我们介绍了产品可用性原则，并用大量的案例来阐述及运用。几年前我读过一次，最近再次重温，准备做一个整理，当做自己的学习记录。

作者史蒂夫·克鲁克（简称Krug先生）是一名备受尊敬的可用性咨询师，他把多年的从业经验，以通俗易懂的方式凝结成此书，并且篇幅简短，虽然作者说两个小时就可以读完，但如果边读边思考的话，两个小时还是不够的，毕竟这是一本工具类书籍，不是小说。本篇文章只是我的一个学习记录，还是非常希望大家能够读一读原著的。

别让我思考，作为Krug可用性第一定律，意味着，设计者应该尽量做到，当看到一个页面时，应该是不言而喻，一目了然。我能明白它是什么，怎样使用它，而不需要花费很多精力进行思考。

举个例子，假如一个你不认识的人，就比如是你隔壁的邻居，对你的网站毫无兴趣，也几乎不知道如何使用，但是他仍然看一眼你的主页，就知道这是干什么的，该怎么用。

比如以下这个网站，这是我从网上随便找的一个网站，之前从来没有听说过，点击链接进入后的第一眼，就是很多关于车的元素，猜测一定是关于车的网站；右下角两个大大的按钮“找新车”“品牌找车”，那这个应该是卖车网站，八九不离十了。先不说下面是多么杂乱不堪，起码第一眼我就可以看出，这个网站是干什么的，该怎么用，这是最基本的。

有可能我们之前访问过一些网站，打开后茫然不知所措，几乎把首页的每个地方都浏览过了，才知道是该怎么操作，或者某些元素看起来像按钮，但是却不能点击，也没有点击失败的提示...总之体验很差。所以当我们创建网站时，就需要去掉这些问号。作为一个用户，永远不能让我花几秒思考，能不能点击的问题。

当我们访问WEB的时候，每个问号都会加重我们的认知负担，把我们的注意力从要完成的任务上拉开。这种干扰也许很轻微，但他们会累积起来，有时候这样的干扰不用太多，就足以让我们抓狂。这样会让我们对网站失去信心。

那么哪些事情是访问者在访问网站时不应该花时间思考的事呢？

例如：

1、我在什么位置？

2、我该从哪里开始？

3、他们把某某放在什么地方了？

4、这个页面上最重要的是什么？

5、为什么他们给他取这个名字？

...

我们在设计网站的前和后，可以把这些作为走查对象审视一下，慢慢的这些习惯就会变成你的潜意识，再次设计网站的时候就会自然而然的把这些因素考虑在内。

不过，有时候，特别是在进行一项崭新的，开拓性的或者非常复杂的页面设计时，也许只能做到自我解释。在一个自我解释的页面中，用户只需要花一点点时间去理解页面的外观，精心选择的名称，页面布局以及少量仔细斟酌过的文字。所以，如果不能做到让一个页面不言而喻，那么至少应该让它自我解释，这个非常重要。

我们常常认为用户会盯着每个网页，仔细阅读我们精心制作的文字，领会我们组织页面的方式，然后，在点击某个链接之前权衡他们的可选目标。

但是大部分情况却是，用户只会在每个页面上瞥一眼，扫过一些文字，点击第一个令他们感兴趣或者大概符合他们目标的链接。通常，页面上的很多部分他们都不看（想一想，你是不是这样浏览网页的呢）。

本想举快手WEB端的例子，没想到再次打开后发现已经改版了，而且应该是近两个月左右的事情，可惜已经不能截图，不过这次的改版比之前好多了。

上一版本中，几乎有几段整段整段的文字，虽然文采不错，比较优美吧，但谁有耐心看呢，总之我打开几次，一次也没一字一字的阅读过。这个直接增加了用户的负担，降低了主要元素的层级，画蛇添足。

所以，如果我们想设计有效的网页，必须开始接受关于网络使用的三个事实：

一、我们不是阅读，而是扫描

原因有3：

1、我们总是处于忙碌之中；

2、我们知道自己不必阅读所有内容，只对网页中的一小部分内容感兴趣，剩下的内容我们并不关心，扫描就是我们找到相关内容的方式。

3、我们善于扫描，在日常生活中，我们不管是看报纸，还是杂志，书籍，基本都是用扫描的方式，找到我们感兴趣的部分。

大家想一想，我们在看报纸的时候，是不是先浏览一遍，然后看到哪个标题比较吸引才专心去看那篇文章，而且也不会是一字一句的去读，而是知晓大概内容即可。

再举个贴近的例子，打开站酷的首页，你们会从左到右，从上到右的一字不漏的去看吗，我们是不是用眼睛扫一遍，看到吸引你的内容，然后再点进去看详情，对的，这就是互联网用户的扫描阅读。

二、我们不做最佳选择，而是满意即可

在设计页面时，我们通常假设用户只是扫过整个页面，考虑所有可能的选项，然后选择一个最好的。

事实上，大多数时间里，用户不会选择最佳选项，而是选择一个合理的选项，一旦发现一个链接，看起来似乎能跳转到我们想去的地方，那很大的机会就会去点击它。

原因有以下几个：

1、我们总是处于忙碌之中，寻找最佳策略需要的时间很长。

2、如果猜错了，也不会产生什么严重的后果。就算做了错误选择，我们只要点击几次返回按钮就好，所以，返回按钮，是WEB端用的最多的地方。

3、对选择进行仔细思考还不如很快多尝试几次。

4、猜测更有意思，猜测不会像仔细权衡那么累，而且如果猜对了，速度会更快。

当然，这并不是说用户在点击之前从不进行权衡，这要取决于时间上的紧迫以及其他因素。

大家想一想，现实中是不是这样的呢。也许通往一个入口有好几条路径，但是第一次进入该网站的时候，不会寻找最佳路径，而是试探的摸索，只要找到就可以了，不会刻意的找那条最捷径的。

三、我们不是追根究底，而是勉强应付。

生活中，人们在使用任何东西，往往不理解它们的运作原理，甚至对它们的工作原理有完全错误的理解。

无论面对哪种产品，除了刻意钻研的，很少有人会花时间阅读说明书。相反，我们往往是贸然前进，勉强应付。

比如我们买了一台新款电视机，几乎从来不会把电视机的零件一个个都拆下来，完全理解了它们的工作原理后才使用，我们甚至连说明书都不看，而是拿着遥控器自己琢磨，完全没有必要去深究。

为什么会这样？

1、这对我们来说并不重要。对于大多数人来说，是否明白背后的工作机制并不重要，只要正常使用即可，这并不是智力低下的表现，而是我们并不关心。

2、如果发现某个事物能用，我们会一直使用它。我们一旦发现某个事物能用，很少去找更好的替代品。如果偶然发现一种更好的方法，我们会换用这种更好的方法，但很少去主动寻找更好的。

举个我小时候的例子，上学时我用的第一只中性笔是同学给我的，虽然可以用，但我发现比较粗，不太喜欢，但是认为可以用，从来没想过是否有稍微细一点的。当第一只笔芯用完，去文具店购买时，发现竟然还有0.35的笔芯，很意外，当然我就放弃了之前的笔芯，换作成0.35的，这样的例子应该都会发生在每个人的生活中。

那如果人们勉强应付的时候这么多，有没有弄明白真的那么重要吗？答案是很重要，因为有时候可以勉强应付，但通常效率不高，而且容易出错。

如果用户很清楚，不是勉强应付呢？

1、他们会更容易找到自己需要的东西。

2、会更容易理解你的网站提供哪些服务。

3、你更可能引导他们到你的网站上希望他们看到的地方。

4、在你的网站上，会觉得自己更聪明，感觉更好，这样他们就会离开让人勉强应付的网站了。

这也是现在竞品之间抢夺用户的一个重要因素，两个服务内容一样的产品，一个直观明了，一个结构比较混乱，不能很快找到目标，对于这两个产品，那用户该选择哪一个呢，可想而知。

前面已经说到，现在互联网的用户阅读都是扫描式阅读，那么在这种情况下，怎样才能让用户清晰理解你的网站，提高体验。

需要注意5个方面，保证他们会很容易理解你的网站：

1、在每个页面上建立清晰的视觉层次；

2、尽量利用习惯用法；

3、把页面划分成明确定义的区域；

4、明显标识可以点击的地方；

5、最大限度降低干扰；

前面已经说到，现在互联网的用户阅读都是扫描式阅读，那么在这种情况下，怎样才能让用户清晰理解你的网站，提高体验。

一个视觉层次清晰的页面有3个特点：

1、越重要的部分越突出；

2、逻辑上相关的部分，视觉上也相关；

3、逻辑上包含的部分在视觉上游嵌套；

也可以这么说，要把版式设计的四个原则，亲密，重复，对齐，对比，把这几点做好。

对于习惯用法可以说是人的一种本性习惯了，这也是为什么很多竞品都很相似的原因了。

举个常见的例子，比如聊天的icon，都是一种对话框的设计，因为人们已经习惯了这种图标设计，如果换成其他，用户看到后会不理解这到底是什么东西。

对于设计师，很多人一直想创新，但是一定要秉持两个原则：

1、创新的方法同样也要不言而喻；

2、能够为用户带来很大价值，值得用户付出一点努力来学习新的方法。

Krug可用性第二定律——点击多少次都没关系，只要每次点击都是无须思考的选择。

文中说：WEB设计师和可用性专家一直有一个争论，用户在到达目标之前点击多少次不会觉得有挫败感，作者认为，真正的问题不是到达目标之前要点击的次数，而是每次点击有多艰难，需要多少思考，有多大的不确定性来判断自己是否在进行正确的选择。

所以当我们在使用目前一些成功的产品时，会感到自然而然的流畅体验，虽然有时候因为产品体量大，没有很快找到目标，但我们也没有过多挫败和烦躁。

Krug可用性第三定律——去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。

好处：

1、可以降低页面的噪声。

2、让有用的内容更加突出。

3、让页面更简短，让用户在每个页面上一眼就能看见更多的内容，而不必滚动屏幕。

如果有欢迎词，尽量减少，能不用就不用。

指示性说明尽量不用。

如果指示性说明非常冗长，用户发现所需信息的机会很小。

我们应该通过让每项内容不言而喻来完全消除指示性说明，当指示文字变得完全没有必要，就应把他们全部去掉。

现在比较成功的App的引导页都非常简洁，因为没有人会在进入的时候看你写的一长段文字，等待很长时间，除非视觉性很强，比如今年美团变黄的那段视频，视觉冲击力很强，我看完一次后，在网上又自己找，看了几次。所以要做到尽量减少指示性说明。

作者认为，很多网站，一旦到了第二个层次，导航会变得支离破碎，随意发挥，以至于很难找到良好的三级导航的例子。

原因有3：

1、好的多级导航本来就很难设计，同时有很多元素需要安排到页面中。

2、设计师即使在设计前两个层次也常感到时间不够。

3、第三个原因是它看起来并不重要，不是主导航，也不是二级导航，而且有一种倾向认为，当人们深入到网站的这一个层次后，会自然明白如何进行操作。

而且就算设计师提出需求，他们也可能拿不到，因为负责内容的通常不会想的那么深远。

事实上，用户在底层页面上花的时间通常和花在顶层页面的时间相同，除非从一开始就自顶往下进行导航设计，否则以后很难再进行添加，也很难保持一致性。

网站主页是我们打开后第一眼看到的，也是最容易向用户突出网站的价值等内容的，那在主页该放什么哪些内容比较合适呢：

1、站点的标识和使命：告诉我们这是什么网站，做什么的；

2、站点层次：提供服务概貌，包括内容，功能，组织形式；

3、搜索；

4、导读：主页最好有“里面有精彩内容”的暗示提醒；

5、内容经常更新；

6、友情链接；

7、快捷方式：最常访问的内容片断；

8、登录、注册；

...

除了这些主要的，最好还要满足这些：

1、让我看到自己正在寻找的东西；

2、我也许感兴趣的精彩内容；

3、告诉我从哪里开始；

4、建立可信度和信任感。

比如打开淘宝首页，你不仅可以看到以上罗列的内容，淘宝通过算法，会自动推荐你曾经搜索过得商品，最上角的非常醒目的位置，logo动效还会告诉你最近的活动。

对于一个控件的选择或者其他设计，很多团队经常在无休止的讨论，始终没有决定，这样的讨论除了浪费时间，也很容易造成紧张气氛，破坏团队成员之间的关系，常常让团队无法做出关键的决定.

我们每个人都是用户，和所有的用户一样，对网站上喜欢什么，不喜欢什么有着强烈的感觉。

我们往往认为我们自己喜欢的，绝大多数用户也都喜欢。这应该是人的一种天性。

同时，在团队中，由于职位不同，不同岗位的人对网站设计也有不同的看法。

比如设计师喜欢视觉上比较好看的网站，而开发却喜欢构建新颖，有趣，功能出色的网站。所以不同的角色，不同的视角，常常造成不同的看法，继而不停的讨论，让会议陷入僵局，当然每个人的想法并不是一层不变的，只要有足够的证据能打动他，他的想法完全可以反过来。

一旦因个人和职位不同而造成的冲突不分胜负时，讨论常常会转化为寻找某种方式（专家的意见、焦点小组或者用户测试）来决定绝大部分用户喜欢或不喜欢什么，但是，找出所谓的普通用户，就是错误的想法，因为，本来就没有什么普通用户，所有的web用户都是的。

越是仔细观察用户，认真倾听他们表达自己的想法，越能意识到他们对网页的个人反应和很多不同的变量有关系。所以，试图用一些简单的喜好来形容用户，既琐碎又没有什么作用，另一方面，好的设计会把这种复杂性考虑进去。

关于普通用户的这个说法，最糟糕的是加强了这种看法，认为好的web设计主要是找出人们的喜好，这种想法看上去不错。比如面包屑导航好，要么不好，弹出框好，要么不好，非黑即白。

问题是，对于大部分web设计问题来说，没有简单的“正确”答案，好的设计能满足需要，也就是说，经过仔细考虑，实现和测试的设计就是好的。

例如，对于Flash的使用，如果询问用户，有些用户会说他们很喜欢Flash，而另外差不多同样数量的用户会说他们讨厌Flash。实际上，他们不喜欢的是使用不当的Flash，大而复杂的动画，需要很长时间下载，没有带来任何价值。如果仔细观察他们，很可能发现同样是这些人，喜欢那些使用精心设计，适当并小规模使用Flash的网站，增加一些简约的修饰，或者有用的功能，同时又不带来麻烦。

并不是说不存在完全错误的方法，有些设计网页的方法确实是完全错误的，只是他们往往并不是设计团队通常争论的那些方法。

解决这种问题的关键方法就是，不要再问这样的问题“大部分人喜欢这样的导航吗”，正确的问题应该是“在这个页面，这种导航会让可能使用这个网站的大部分人产生一种良好的体验吗？”，然后观察人们对它的看法和使用的方法，再不断调整。

争辩人们喜欢什么既浪费时间又消耗团队的经历，而通过测试将讨论对错转移到什么有效，什么无效上，更容易缓和争论，打破僵局，而且测试会让我们看到用户的动机，理解，反应的不同，从而让我们不再坚持认为用户的想法和我们的想法一样。

在做测试时，往往很多人不清楚什么是焦点小组访谈和可用性测试的的区别，那就先科普一下。

焦点小组访谈，百度百科的解释是这样的：就是采用小型座谈会的形式，由一个经过训练的主持人以一种无结构、自然的形式与一个小组的具有代表性的消费者或客户交谈。从而获得对有关问题的深入了解。

简单来说就是一个小组围坐在桌子周围，主持人抛出问题，针对这一问题，被访谈人说出自己的想法，从而快速得到用户的意见和反应。

焦点小组可以抽象的确定你的目标用户想要什么，需要什么，喜欢什么。也可以测试出网站的理念是否有意义，价值主张是否吸引人等等。

但焦点小组只是适合用于网站设计前就应该进行的，是一个早期阶段方法。

比如电视剧《我的前半生》中，段晓天因得不到主角罗子君而为难她的那个片段，就是一次焦点小组访谈。

可用性测试的百度百科解释是这样的：让一群具有代表性的用户对产品进行典型操作，同时观察员和开发人员在一旁观察，聆听，做记录。

该产品可能是一个网站，软件，或者其他任何产品，它可能尚未成型。测试可以是早期的纸上原型测试，也可以是后期成品的测试。

简单说就是向用户展示一些内容，不管是网站还是原型，或是草图，并且要求用户说出这是什么，并用他们来完成一项特定的任务。

如果想建立一个优秀的网站，一定要测试。为一个网站工作几个星期会让你失去新鲜感，因为你对网站了解的太多，很多细节都知道，所以清楚网站是否正常运作的唯一方法就是测试。

测试会提醒你，不是每个人的想法都和你一样，会和你用同样的方法使用网站。

要记住，测试一个用户比不做测试好一百倍。测试总是会有效果，哪怕对错误的用户做一次糟糕的测试，也会让你看到改善网站的一些方面。

在项目中，早做测试，哪怕一位用户也好过最后测试50位用户。

一旦一个网站投入使用，要改变就不是很容易了，有些用户拒绝做出任何变化，所以在开始的时候，有助于防止你犯错误的方法都很划算。

测试的关键不是证明什么或者反驳什么，而是了解你的判断力。对于用户的招募也不要太严格，如果能够让用户是更接近使用网站的用户就更好了，但更重要的是，要尽早和经常进行测试，这是一个开发，测试，修复，再度测试的过程，没有什么比现场用户的反应更重要了。

其实做可用性测试没有想象的那么复杂，一个简单的可用性测试完全可以把问题解决。

那么应该测试多少用户呢：

很多情况下，每轮测试用户数量应该是三个，最多四个。前三个用户很可能会遇到几乎所有最明显的问题，更重要的是多做几轮测试，只测试三名用户有助于很快进行下一轮测试。由于你会修正在第一轮测试提出的问题，因此在第二轮测试中，就会发现新的问题。这样的话，能够很快的对测试进行总结，并能很快利用测试结果进行修正。

很多人不知道该招募怎样的测试人员，总是很纠结，其实没那么难。

实际上，我们都是初学者。就算找一位专家，你也有可能发现他也在勉强应付。

设计出的网站如果只有你的目标用户能使用，这通常不是一个好的方法，应该既要满足专家的要求也要满足新手的要求。

例外：

如果你的网站几乎由某一类用户使用，那就只招募这一类用户。

如果你的目标用户群体可以分成几个明显的阵营，而且这些阵营有着完全不同的兴趣和需要，那么至少要从每个阵营里选择用户进行一次测试。

同时避免对网站或网站背后的组织架构进行预先讨论。

可以找任何人来引导测试，真正需要的工作只是鼓励测试用户去尝试。同时还需要一个观察人，对于观察人选，建议如果能让管理层参与就好了，他们的参加能极大鼓舞团队的士气，这是他们第一次看到自己的网站被人使用，而且很多地方和他们想象的画面并不一样，这样的话，团队也更容易向管理层拿到对测试的投资，可谓是一举两得。

测试什么，什么时候测试?

测试：顾名思义，就是让测试用户看到网站，然后看他们能否理解这个网站，包括目标，价值主张，组织方法和运行方式等。

可以对用户进行关键任务测试，让用户完成一些任务，然后观察他们是怎么做的。

立刻回顾测试结果

在测试后的讨论会议上，主要做以下两件事：

给问题分类：

回顾大家看到的问题，决定哪些问题需要修正。

解决问题：

找出修正这些问题的方法。

这样，从其他人的角度看你的作品，常常能为问题提供全新的解决方案，或者让你用一种新的眼光看待原有的问题。

要记住，这是一个循环的过程，不能只做一两次就停止了。

测试常见问题：

1、用户不清楚概念：用户看着网站，要么不清楚他们说的是什么，要么他们以为自己知道，但是理解有误。

2、他们找不到自己要找的字眼：这通常意味着你组织的内容分类不符合用户的习惯或者分类符合他们的习惯，但没有使用他们期望的名字。

3、内容太多了：有时候，他们要找的内容就在页面上，但就是看不到，在这种情况下，你需要减少页面上的整体干扰或者把他们需要看到的内容设置的更加醒目，让它们从可视层次结构中更加突出。

在任何测试中，你都可能会遇到这样的情况，用户暂时出现错误，然后在不需要任何帮助的情况下回到原来的轨道。

只要出现问题的人马上发现自己偏离了原来的主体，尽量不需要帮助就能回到原来的方向，这种情况看起来没有扰乱他们的活动，就可以忽略这些。总的来说，如果用户关于在哪里找到他们需要的内容的第二次猜测总是对的，就可以了。

这样的问题总会存在的，因为有些含混之处，总是没有简单的解决方法，不管怎么做，都会有一半用户在第一次猜测的时候出错，但每个人都会在第二次猜测之内找到，这样就好。

当在测试时清楚看到人们没有理解某些内容时，大部分人的第一反应是增加一些内容，例如一些注释或者指导说明。

这样的方法不对，正确的解决方案往往是去除某个或一些让人混淆的内容，而不是增加另一些干扰。

而且不要太看重人们对新功能的需求，人们常常说“如果它能像某某”就好了，这样的说法常常被看做是在要求新的功能，如果仔细询问，常常会发现，他们已经找到一个很好的网站，能做某某功能，就算你做了这个功能，他们也不会切换到你的网站，他们只是在告诉你他们的喜好而已。

当大家看到第一个用户试着勉强应付的时候，问题和解决方法都很明显的那种惊喜，就像是现成的收获，你应该马上修正它们。

和任何好的设计一样，成功的网页需要巧妙的平衡，要记住，哪怕一个微小的变化都会带来不小的影响，有时候，真正的挑战不是修正你发现的问题，而是修正这些问题的同时不破坏已经正常运行的部分。

只要进行改变，就要仔细思考它将会影响哪些其他内容。特别是，当你把某些部分调整的更为突出时，想想看是不是把其他内容的重要性降低了。

降低网站好感度有几种方式：

1、隐藏我想要的信息；

2、因为没有按照你们的方式行事而惩罚我；

3、向我询问不必要的信息：大多数用户都很介意个人信息，如果网站要求的信息超出当前任务时，会让用户觉得很麻烦。

4、敷衍我，欺骗我：我们都会讨厌虚伪的真诚，也讨厌假意的关心，想想每次你听到“您的电话对我们来说很重要”的时候是什么感觉吧！

5、给我设置障碍：不得不等待一个长长的flash介绍。

6、你的网站看上去不专业：网站看起来很凌乱，组织很混乱。

就算你有些地方做的不好，也还有可能再度提高我的好感，只要让我相信你的所作所为是在为我着想。

提高好感的几种方式：

1、知道人们在你的网站上想做什么，并让他们容易明白：把用户最想做的几件事放在最明显的地方；

2、告诉我我想知道的。

3、尽量减少步骤，让用户以最快的途径到达他们想去的地方。

4、知道我可能有哪些疑问，并且给予解答：可以做一个经常更新的常见列表。

5、为我提供协助。

6、容易从错误中恢复：当潜在的错误不可避免时，要提供一个快速且清晰的方法快速从错误中恢复。

7、如果不确定，记得道歉：有时候会因为暂时没有能力或资源做到用户想要的，如果你做不到，至少让他们明白你知道你在给他们造成不便。

开篇

之前对js中的原型链和原型对象有所了解，每当别人问我什么是原型链和原型对象时，我总是用很官方（其实自己不懂）的解释去描述。有一句话说的好：如果你不能把一个很复杂的东西用最简单的话语描述出来，那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。



我们经常会这么写

    function Person () {

        this.name = 'John';

    }

    var person = new Person();

    Person.prototype.say = function() {

        console.log('Hello,' + this.name);

    };

    person.say();//Hello,John

1

2

3

4

5

6

7

8

上述代码非常简单，Person原型对象定义了公共的say方法，虽然此举在构造实例之后出现，但因为原型方法在调用之前已经声明，因此之后的每个实例将都拥有该方法。从这个简单的例子里，我们可以得出：



原型对象的用途是为每个实例对象存储共享的方法和属性，它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象，因此有别于实例方法或属性，原型对象仅有一份。



所以就会有如下等式成立：



    person.say == new Person().say

1

可能我们也会这么写

    function Person () {

        this.name = 'John';

    }

    var person = new Person();

    Person.prototype = {

        say: function() {

            console.log('Hello,' + this.name);

        }

    };

    person.say();//person.say is not a function

1

2

3

4

5

6

7

8

9

10

很不幸，person.say方法没有找到，所以报错了。其实这样写的初衷是好的：因为如果想在原型对象上添加更多的属性和方法，我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前，这样就会造成一个问题： 

当var person = new Person()时，Person.prototype为：Person {} (当然了，内部还有constructor属性),即Person.prototype指向一个空的对象{}。而对于实例person而言，其内部有一个原型链指针proto,该指针指向了Person.prototype指向的对象，即{}。接下来重置了Person的原型对象，使其指向了另外一个对象,即



 Object {say: function}

1

这时person.proto的指向还是没有变，它指向的{}对象里面是没有say方法的，因为此报错。



从这个现象我们可以得出：



在js中，对象在调用一个方法时会首先在自身里寻找是否有该方法，若没有，则去原型链上去寻找，依次层层递进，这里的原型链就是实例对象的proto属性。



若想让上述例子成功运行，最简单有效的方法就是交换构造对象和重置原型对象的顺序，即：



    function Person () {

        this.name = 'John';

    }

    Person.prototype = {

        say: function() {

            console.log('Hello,' + this.name);

        }

    };

    var person = new Person();

    person.say();//person.say is not a function

1

2

3

4

5

6

7

8

9

10

一张图让你秒懂原型链

 



其实，只需要明白原型对象的结构即可：



    Function.prototype = {

        constructor : Function,

        proto : parent prototype,

        some prototype properties: ...

    };

1

2

3

4

5

总结：

函数的原型对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针proto，该指针指向上一层的原型对象，而上一层的原型对象的结构依然类似，这样利用proto一直指向Object的原型对象上，而Object的原型对象用Object.prototype.proto = null表示原型链的最顶端，如此变形成了javascript的原型链继承，同时也解释了为什么所有的javascript对象都具有Object的基本方法。



Blog同步

JavaScript 队列

题目：

在计算机科学中 队列（queue）是一个抽象的数据结构，队列中的数据条目都是有秩序的。新的条目会被加到 队列 的末尾，旧的条目会从 队列 的头部被移出。



写一个函数 queue ，用一个数组arr和一个数字item作为参数。数字item添加到数组的结尾，然后移出数组的第一个元素，最后队列函数应该返回被删除的元素。

queue([], 1) 应该返回 1

queue([2], 1) 应该返回 2

queue([5,6,7,8,9], 1) 应该返回 5

在 queue(testArr, 10) 之后, testArr[4] 的值应该是 10



通关答案：



function queue(arr, item) {

/下面这两句是关键/

    arr.push(item);

    return arr.shift();// Change this line

}



console.log(queue([], 1));

console.log(queue([2], 1));

console.log(queue([5,6,7,8,9], 1));

// Test Setup

var testArr = [1,2,3,4,5];



// Display Code

console.log("Before: " + JSON.stringify(testArr));

console.log(queue(testArr, 10)); // Modify this line to test

console.log("After: " + JSON.stringify(testArr));



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

转发和重定向区别详解

        作为一名程序员，特别是java web开发的程序员，在使用servlet/jsp的时候，我们必须要知道实现页面跳转的两种方式的区别和联系：即转发和重定向的区别。



      1、RequestDispatcher.forward方法只能将请求转发给同一个WEB应用中的组件；而HttpServletResponse.sendRedirect 方法不仅可以重定向到当前应用程序中的其他资源，还可以重定向到同一个站点上的其他应用程序中的资源，甚至是使用绝对URL重定向到其他站点的资源。如果传递给HttpServletResponse.sendRedirect 方法的相对URL以“/”开头，它是相对于整个WEB站点的根目录；如果创建RequestDispatcher对象时指定的相对URL以“/”开头，它是相对于当前WEB应用程序的根目录。、



      2、调用HttpServletResponse.sendRedirect方法重定向的访问过程结束后，浏览器地址栏中显示的URL会发生改变，由初始的URL地址变成重定向的目标URL；而调用RequestDispatcher.forward 方法的请求转发过程结束后，浏览器地址栏保持初始的URL地址不变。



      3、HttpServletResponse.sendRedirect方法对浏览器的请求直接作出响应，响应的结果就是告诉浏览器去重新发出对另外一个URL的 访问请求，这个过程好比有个绰号叫“浏览器”的人写信找张三借钱，张三回信说没有钱，让“浏览器”去找李四借，并将李四现在的通信地址告诉给了“浏览器”。于是，“浏览器”又按张三提供通信地址给李四写信借钱，李四收到信后就把钱汇给了“浏览器”。可见，“浏览器”一共发出了两封信和收到了两次回复， “浏览器”也知道他借到的钱出自李四之手。RequestDispatcher.forward方法在服务器端内部将请求转发给另外一个资源，浏览器只知道发出了请求并得到了响应结果，并不知道在服务器程序内部发生了转发行为。这个过程好比绰号叫“浏览器”的人写信找张三借钱，张三没有钱，于是张三找李四借了一些钱，甚至还可以加上自己的一些钱，然后再将这些钱汇给了“浏览器”。可见，“浏览器”只发 出了一封信和收到了一次回复，他只知道从张三那里借到了钱，并不知道有一部分钱出自李四之手。



       4、RequestDispatcher.forward方法的调用者与被调用者之间共享相同的request对象和response对象，它们属于同一个访问请求和响应过程；而HttpServletResponse.sendRedirect方法调用者与被调用者使用各自的request对象和response对象，它们属于两个独立的访问请求和响应过程。对于同一个WEB应用程序的内部资源之间的跳转，特别是跳转之前要对请求进行一些前期预处理，并要使用HttpServletRequest.setAttribute方法传递预处理结果，那就应该使用RequestDispatcher.forward方法。不同WEB应用程序之间的重定向，特别是要重定向到另外一个WEB站点上的资源的情况，都应该使用HttpServletResponse.sendRedirect方法。



        5、无论是RequestDispatcher.forward方法，还是HttpServletResponse.sendRedirect方法，在调用它们之前，都不能有内容已经被实际输出到了客户端。如果缓冲区中已经有了一些内容，这些内容将被从缓冲区中。



以上五点的论述来源于：点击查看原文论述



转发和重定向的图解





两种跳转获得对象的方式

//获得转发对象getRequestDispatcher()

HttpServletRequest(httpServletRequest).getRequestDispatcher

ServletContext.getRequestDispatcher();

 

//获得重定向对象sendRedirect()

HttpServletResponse(httpServletResponse).sendRedirect();

转发和跳转的小结

      1、转发使用的是getRequestDispatcher()方法;重定向使用的是sendRedirect();



      2、转发：浏览器URL的地址栏不变。重定向：浏览器URL的地址栏改变；



      3、转发是服务器行为，重定向是客户端行为；



      4、转发是浏览器只做了一次访问请求。重定向是浏览器做了至少两次的访问请求；



      5、转发2次跳转之间传输的信息不会丢失，重定向2次跳转之间传输的信息会丢失（request范围）。



转发和重定向的选择

      1、重定向的速度比转发慢，因为浏览器还得发出一个新的请求，如果在使用转发和重定向都无所谓的时候建议使用转发。



      2、因为转发只能访问当前WEB的应用程序，所以不同WEB应用程序之间的访问，特别是要访问到另外一个WEB站点上的资源的情况，这个时候就只能使用重定向了。



转发和重定向的应用场景

       在上面我已经提到了，转发是要比重定向快，因为重定向需要经过客户端，而转发没有。有时候，采用重定向会更好，若需要重定向到另外一个外部网站，则无法使用转发。另外，重定向还有一个应用场景：避免在用户重新加载页面时两次调用相同的动作。



       例如，当提交产品表单的时候，执行保存的方法将会被调用，并执行相应的动作；这在一个真实的应用程序中，很有可能将表单中的所有产品信息加入到数据库中。但是如果在提交表单后，重新加载页面，执行保存的方法就很有可能再次被调用。同样的产品信息就将可能再次被添加，为了避免这种情况，提交表单后，你可以将用户重定向到一个不同的页面，这样的话，这个网页任意重新加载都没有副作用；



       但是，使用重定向不太方便的地方是，使用它无法将值轻松地传递给目标页面。而采用转发，则可以简单地将属性添加到Model,使得目标视图可以轻松访问。由于重定向经过客户端，所以Model中的一切都会在重定向时丢失。但幸运的是，在Spring3.1版本以后，我们可以通过Flash属性，解决重定向时传值丢失的问题。



       要使用Flash属性，必须在Spring MVC的配置文件中添加一个<annotation-driven/>。然后，还必须再方法上添加一个新的参数类型：org.springframework.web.servlet.mvc.support.RedirectAttributes。



       如下所示：



@RequestMapping(value="saveProduct",method=RequestMethod.POST)

public String saveProduct(ProductForm productForm,RedirectAttributes redirectAttributes){

 

     //执行产品保存的业务逻辑等

  

     //传递参数

       redirectAttributes.addFlashAttribute("message","The product is saved successfully");

   

     //执行重定向

      return "redirect:/……";



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

有理有据，有面有料，是一个设计作品的专业体现。之前花了四篇小文（链接在文末），讲述如何提升设计师设计作品的内在含金量和外在形式感，今天，我们将用最后的篇幅，聊聊如何给设计作品创造一个尽可能完美的终局——交互文档的细节。

千里之堤毁于蚁穴，再专业的交互设计，如果在后期交付时频繁出现细节的缺失和补充，其实还是很容易遭受研发和测试同学diss的。甚至有可能因为一个细节的疏忽，导致整体交互方案的崩盘，不得不从头再来。

如果研发过程中发生这样的设计事故，其实是非常影响团队士气和个人专业影响力的。

设计细节篇，分两个维度来阐述，一个是文档外,一个是文档内。

文档外，其实是要回归设计的初衷，很多设计师包括我自己，设计久了，总愿意把自己当作是用户的代言人，尽可能的为用户体验着想，绞尽脑汁的寻求最佳体验的设计，并以此为傲。

这如果是在产品发展的成熟期，功能相对稳定，体验同质化严重，这个时候追求的体验，寻求体验的突破是非常有意义的，可以让产品获得更多的口碑，从而带来更多的用户和收益。

但是如果是在探索期和成长期，过度的追求单一维度的体验，可能反而会成为一种产品发展的桎梏，阻碍产品的成长，而在衰退期追求的体验，则完全背离了公司作为商业组织的利益点，会显得和整个项目组格格不入。

产品生命周期与用户体验要求

所以对于探索期和衰退期的产品来说，设计师要尽可能考虑商业性和技术可行性。用最小的设计代价，快速的迭代，完成产品的目标（验证价值或解决问题）。

如果设计师在这两个阶段太揪细节，可能会因为得不到项目的支持而心灰意冷。

技术可行性和商业收益，不是我们所擅长的领域，通过前面的设计法则和用户埋点也不能准确推算，所以还需及时向技术及商务同学确认，别人家能做的产品形态，咱们家技术框架不一定支持。别人家能做的精简，可能会损害咱们家的主营业务。

涉及到这两点，除非有自上而下的旨意，否则单凭设计之力无异于蚍蜉撼树，很容易让自己费力不讨好。

文档内的交互细节，主要在于文档的完整性和阅读体验，既要面面俱到，又要清晰简洁。

面面俱到是指要尽量包含所有流程、页面及状态，避免遗漏。它体现了一个交互设计师设计思维的严谨性和设计态度。

网上有很多关于交互走查表的模板，非常的全面，但就是因为太过全面，反而让很多新人设计师望而生畏，避而远之，这就失去了交互走查表本身的意义。

我认为，交互走查表其实就是提供给设计师的一份帮助文档，大家都知道在设计的时候，提示要尽可能的简短，要适时出现，要清晰简洁，遗憾的是我看到的交互走查表往往都不满足这一条。

冗长的交互走查表，就像是冗长的帮助文档一样，把责任都推给了设计师，仿佛在说：谁让你不按照我逐条检查呢？

如果出现细节的遗漏，就变成了设计师自己的错。

谁都不想遗漏，但是后期设计时间往往真的就很紧迫，设计师除了细节的补充，可能还有其他很多任务需要做，大家只是想确认一下而已，哪有时间和精力去看那么冗长的“帮助文档”。

所以发挥一下设计师的同理心，根据二八原则，80%设计师可能遗漏的问题都只是认知走查表里20%的内容，这20%的内容也真正意义上影响我们80%的用户和体验，是设计者最为关心的。

那么，我们是不是先把这20%的设计解决好呢？这才是真正急设计师之所急，站在设计师的角度考虑问题。

所以本文精心筛选出最容易被大家所忽略，且大多数设计又必须要考虑的异常分支，为大家整理了一份《设计细节check表》，以确保主体流程的主要设计“面面俱到”。（流程设计、布局设计，以及互动设计，如果大家在前期有遵守对应的设计原则，再加上数据的支持，应该大方向都是正确的。我也希望大家尽量通过前期的理论和数据，去保证流程和整体设计的正确性，而不是要等到最后细节确认的时候，才来审视检验整体，让细节篇，真的是在完善细节。）

设计细节Check表

我把这份《设计细节check表》按照从整体到局部进行了归类：

最大的单元是指每个任务流程的检查，然后是页面单元，因为页面涉及到加载的异常分支比较多，所以单独拆出来和页面状态并列分别阐述。最后是组块单元，主要包括输入类和非输入类的组件操作及反馈。

下面我们逐一来看：

一、流程检查

流程检查主要包括三点：

1. 和其他相似流程的一致性问题

秉承一致性原则，同一个产品，能保持一致的地方，要尽可能保持一致。

在实际项目中，同一个产品，往往有多个设计师，每个设计师都负责相对独立的一大模块，偶尔就会涉及到相似功能的设计，因为是不同人在进行，所以设计出来的形态就可能不一致；

但对于用户来说，使用相似功能的人，往往可能是同一拨人，设计的不一致，体验就会有差异，不仅对于用户来说学习成本高，而且对于项目组来说同时维系两套不同的设计，成本也比较高。

2. 逆向流程标注

如果一个流程的正向流程和逆向流程是完全一致的，一般无需特别说明，但是如果返回时需要跳过某些页面或者状态快速返回，则需要进行特殊标注，否则可能会被研发同学遗漏。

3. 流程进度的保存机制

当遇到特殊情况，程序崩溃，后台杀死，断电等，进度是否能够能自动保存并恢复，如果需要，就需要考虑恢复的时机和形式。

说完流程，再来说单独的页面。谈到页面时，首先要谈的是加载状态，毕竟页面不是凭空就有的。

二、加载状态

加载状态主要要考虑以下几点：

1. 是否预加载

预加载的时机是什么时候，预加载的内容有多少？（对于用户会长时浏览的内容，一般建议预加载，预加载的内容一般会结合内容大小、浏览时长、甚至网络状态综合决定）

2. 加载前的状态

在信息未加载出来前，界面是显示空白引导，还是默认占位符，还是显示上一次的缓存内容？（一般有缓存优先显示缓存，无缓存先显示默认占位符，等内容加载完成后再进行替换）

3. 加载进度显示

是否显示加载图标，进度条，是否可以取消加载？（一般情况下等待超过0.1s，就能够被用户感知到，就建议显示加载图标，以便用户知道程序已经接收到并在响应用户的操作指令。如果等待超过1秒，就建议显示进度条，并提供取消操作，便于用户自主控制）

4. 加载机制

是全部加载，还是分布加载显示？（一般情况下，在2~3屏内的有限内容，或者完全非同类的内容，是可以一次性全部加载的，因为用户可能就是冲着某一类内容进来的，很可能会快速滑动到目标内容。

而对于同类型的图文信息，而且是内容比较多时，一般都会采取分布加载的形式，避免浪费多数用户的流量。

视频播放机制、广告图片加载等，一般还要考虑网络情况，一般WIFI情况下，因为对流量及网速的要求低，所以采用自动播放视频，自动显示图片、播放广告等，更容易被用户所接收）

5. 加载超时处理

是否自动重试加载，何时进行超时提示等。（很多产品在设计时，如果不是完全无网络，仅仅是网络信息不稳定，会尝试自动加载，以避免用户手动操作。如果自动加载超过上限，才会提示让用户稍后再试）

页面加载出来后，就要要考页面本身的状态了。

三、页面状态

需要考虑的异常页面状态主要有以下几种：

1. 无内容，或者内容被删除后的空状态。（一般会有一个默认引导图，告知结果，并附加鼓励操作的行为引导）；
2. 有内容时，且内容比较丰富时，要考虑各种内容及条数的多种组合样式，特别是极端组合样式，要检查一下看起来是否合理，是否影响整体界面样式；
3. 是否需要新功能引导。比如有新功能，希望用户尝试，或这是进行设计重构以后，功能布局发生了变化，要考虑用户是否还能找到原来的功能；
4. 页面时效性。活动类有时效性的内容，还需要考虑超过有效期后是否显示，以及如何显示，一般刚结束，都需要有一个收尾页面，便于用户查看活动结果。活动下线后可能还有一个下线不可访问页面，引导用户向其他活动，或者其他功能页面进行转移。

考虑完整体页面后，最后再来考虑一下页面内的组件状态。先来看一下输入类。

四、输入框/文本框

输入框/文本框要考虑的主要有三点：

1. 默认状态。是否有默认提示，是仅仅是填写提示，还是可以直接提交的示范内容？（现在越来越多的产品，为了减少用户的输入成本，开始在默认框中填入示范文本，考虑一下你的产品是否需要）；
2. 不可用状态，考虑是否需要；
3. 输入状态及反馈。这个要考虑的会多一点，主要包括正确/错误的实时反馈，超过输入上线时的处理方式（截断or提示）、输入非标准字段的包容性，以及输入内容是否实时保存。

最后看一下非输入类的操作组件。

五、文本/图标按钮、连接诶、可操作的卡片/列表

“文本/图标按钮、链接、可操作的卡片/列表”要考虑一下几点：

1. 默认状态。没什么好说的；
2. 悬停状态，是否需要有悬停tips提示，这个一般只有PC端才有；
3. 按下状态，也称点击态。（一般需要设置单独的视觉样式，以给用户明确的视觉反馈，正在响应用户的操作）；
4. 弹起状态，也称已点击或者已查看的状态（对于同类型的多条并列信息，通常建议添加已点击/查看状态，或者返回时，让用户明确点击的的选项，确认浏览的进度位置）；
5. 不可点击状态。说明不可点击的条件即可。

如果设计完成后，初步检查以上五项内容，基本上可以确定主题流程的主要设计内容已经面面俱到了。

文章来源：人人都是产品经理

HMI是什么？这又和我有什么关系，如果你想置身于智能时代，HMI的认知是一个不可错过，而海哥把这一生的精力投身于该领域，下面我们开始开启这条认知之路。我将分三个部分阐述HMI，分别是：HMI是什么？HMI有什么用？谁在做HMI？ 

一、HMI是什么？

HMI，是英文Human Machine Interface的首字母缩写，中文意思为“人机界面”，或“人机接口”，在国内用“人机界面”多，HMI是“人与机器之间传递和交换信息的媒介和对话接口”，可以简单理解为是一台微型的电脑，外形像平板电脑，比如苹果的iPad，但是她有很多插口，像传统办公桌上的台式电脑（后面称PC电脑），有usb接口、网线接口、串行接口。通常HMI像个积木一样，嵌入到机器上的，一般是自动化大机器，通过HMI来控制和监视机器的运作，你可以理解为HMI是一台电脑，她控制打印机打印东西这样的关系。海哥带你看看HMI庐山真貌：

看起来是不是一个平板电脑吗？对的，外形看起来像平板，但是它比较厚，而且很多电脑用的接口，而大家在生活中接触最多的两种HMI有两种，一种是取款机，另外一种就是汽车中控。

下面，海哥带你了解HMI组成，它是由两大部分组成的，就是硬件和软件。

HMI硬件方面，像PC电脑一样，有五大模块：处理器（如CPU）、显示单元（如显示器）、输入单元（如鼠标、键盘）、通讯接口（如网卡）、数据存储单元（如硬盘），那一个优质的HMI硬件主要看哪方面呢？就是处理器，处理器有8位、16位、32位，数字越高，处理能力越强。接下来看看硬件周边的接口，HMI可以连接很多种设备，比如可编程控制器（简称PLC）、变频器、直流调速器、仪表和工业设备等，它们连接到HMI的串口接口，串口的类型有RS232、RS485等。

好了，上面大概对HMI的硬件有初步了解，下面海哥带你看看软件部分，软件部分包括两部分，就是系统和画面组态软件。系统就像PC电脑的windows系统一样，有自身硬件运作正常的系统，比如我们华为的鸿蒙OS系统。接着就是画面组态软件，其实就是像windows里面的Word软件，叫法上不一样而已，常规情况下画面组态软件只有一个，不能像windows那样装很多种类型软件，而HMI固定是装一种，我们常规叫他为“工程”，当然汽车上的HMI，就像平板电脑上，功能和软件都很丰富，因为它是满足消费者人群的，而只运行一个软件的，多用在工业机器上，可以减少HMI资源消耗，还能保证整个HMI的稳定性。

海哥刚开始对组态软件不太懂，组态到底是什么？“组态”（Configure）是“配置”、“设定”等意思，它让用户像搭积木一样，把所需要的软件功能搭建起来，不需要编写计算机程序。目前常用的组态软件有：iFix、Vijeo Designer、WinCC、组态王、MCGS，不同厂家的HMI硬件使用不同的组态软件，所以他们连接要有不同的驱动程序，这对技术人员来说，学习成本还是比较高，因为目前还没有一个巨头来定义这个通用标准，而最近华为的鸿蒙OS系统，开始定义行业的平台标准，海哥个人觉得这是一件了不起的事情。下面看看常用的组态软件长什么样子，我们用WinCC作为例子。

接下来，海哥告诉你HMI的分类，大概可以分三种：

（1、薄膜键输入的HMI，显示尺寸小于5.7ˊ，画面组态软件免费，属初级产品。

（2、触摸屏输入的HMI，显示屏尺寸为5.7ˊ～12.1ˊ，画面组态软件免费，属中级产品。

（3、基于平板PC计算机的、多种通讯口的、高性能HMI，显示尺寸大于10.4ˊ，画面组态软件收费，属高端产品。

对于高端HMI产品，面对5G的个性化定制的市场特征，HMI的“配方功能”会很重要，所谓配方功能，就是一台设备完成不同种类工件的加工，这需要人机界面上具备配方功能，在加工A产品时，执行A配方，加工B产品时，执行B配方，比如西门子公司的MP系列，而如果要实现千人千面的生产需求，也许配方更是一个海量级的，这也是自动化所面临的机遇与挑战。

下面说说工作流程，一个HMI制作应用的制作过程大概是这样的流程：

海哥简短解释一下这些流程，在日后海哥会在每个模块都会有细节教程。

• 市场调研：了解到市面上的数据量，比如手机用户数量，大部分用户使用时长，竞争对手处于什么样的状态等；

• 用户画像：了解用户的年龄、地区、行为习惯、心理习惯等，并赋予到一个场景中，了解用户在场景中的整个活动和心理的过程；

• 需求定位：了解到目标用户的特征后，定制产品或的重点价值，用户为什么需要你，你有什么不一样；

• 头脑风暴：由不同岗位人员，一起想点子，先畅所欲言，再根据调研和需求来判断合适的点子；

• 原型设计：原型简单理解为手工纸质品，或模型，可以用塑料泡沫或电脑的Axure等软件，做出实体或虚拟的产品，这需要快速简单进行；

• 可用性测试：测试原型是否可行，让一些陌生人用用，看他们能理解这是什么，会不会用等；

• 高保真设计：就是把“毛坯房”变成精装修，开始做最终的视觉效果；

• 开发制造：开发与机器制造，实现功能；

• 测试修复：用一种极端条件来检查产品有没有问题，比如24小时运作会不会有问题，突然断电有没有问题；

• 版本迭代：第一代产品做出来不等于成功了，因为市场在变，用户也在变，需要保持变化，优化产品。

  
  

下面是一些问题，可以帮助大家更好了解HMI：

问：HMI看起来不就是一个很厚的触摸屏吗？

答：HMI是由两部分组成，分别是硬件和软件，而像手机或平板的那种触摸屏，只是一个触摸的硬件，这种只是让你能触摸的部件而已，可以理解为台式电脑上的显示器，只是这个显示器可以触摸。

问：PC电脑能当HMI设备用吗？

答：当然可以，只是PC电脑不在会嵌入到机器上，而是通过很长的线或者无线网络连接到机器，而PC电脑需要通过HMI的软件，来操控机器。

问：SCADA与HMI的区别？

答：SCADA是监控和数据采集系统，英文是Supervisory Control And Data Acquisition，它包含HMI，SCADA是整局的工业控制系统，范围更大。

二、HMI有什么用？

HMI有什么用？海哥认为，有机器的地方就有HMI存在的可能性，特别是5G物联网的“万物互联”的到来，数据不只是在电脑上流动，还会在机器、衣服、鞋子、碗、车等场景中串联，而把目光放在当下，HMI应用领域已经在机器、工厂、建筑物、汽车、高度监管的制药和食品行业、石油/天然气、采矿等领域已经有运作，从这些行业属性来说，你有没发现从事HMI的行业的人，它的市场体量有足够大的想象空间？哈哈，别拉后腿了，与海哥一起跟上。

目前的HMI可以做些什么呢？

（1、实时的信息状态与趋势显示；

（2、图形化、流程化控制生产线监控和控制；

（3、警报的产生和记录；

（4、历史信息的自动记录、报表自动生成；

HMI的意义有哪些呢？

（1、发挥机器应有的功能，因为你可以通过数据显示上了解到；

（2、人工合理调节机器参数，让机器间的协作、使用效率提高；

（3、HMI预警能确保安全与经济提升；

（4、让使用者操作机器和系统更友善，符合他们的生理、心理的需求，提高使用者的满意度；

三、谁在做HMI？

想在这个行业有所作为，我们怎么能不知道行业的顶尖高手在哪呢？有了标杆，起码可以衡量我们自身的水准，还有我们缺什么，从另外一个角度来说，你如何作战略选择，让自己也能从差异化中，变成另外一个顶尖高手，下面我们看看专注于HMI的企业，海哥找来自动化制造类的和汽车类的，行业很深很大，日后海哥继续挖掘新的。

下面是自动化领域HMI企业。

三菱

网址：www.mitsubishielectric.com

三菱奉行的企业经营理念“Changes for the Better”，“One三菱电机”为中国“更好的未来”和实现“更好的社会”做贡献为经营理念。e-F@ctory灵活运用IT技术，将生产现场与上层信息系统直接相连。即可实现工厂的“可视化”，同时又能促进生产设备的高性能化和最优化，缩短开发及调试周期，降低运用及维护成本，从而削减生产工序的整体成本，实现“工厂全面最优化”

西门子

网址：www.industry.siemens.com.cn

面对日益复杂的机器和系统过程，作为一站式供应商，西门子专门设计开发出了 SIMATIC HMI 人机界面技术。SIMATIC HMI 采用开放式、标准化硬件和软件接口，可快速集成到用户的自动化系统中，从而满足用户的特定人机界面需求。

施耐德

网址：www.schneider-electric.cn

施耐德电气是家居、楼宇、数据中心、基础设施和工业领域能源管理与自动化技术数字化转型的领先企业。“我们的科技，无处不在”，施耐德电气确保每一个人，在任何时间，在任何地方都能尽享能效之利。

欧姆龙

网址：www.omron.com.cn

创立于1933年的欧姆龙集团是全球知名的自动化控制及电子设备制造厂商，掌握着世界领先的传感与控制核心技术。通过不断创造新的社会需求，欧姆龙集团已在全球拥有超过35,000名员工，营业额达8,595亿日元。产品涉及工业自动化控制系统、电子元器件、汽车电子、社会系统、健康医疗设备等广泛领域，品种多达数十万种。

BEIJER 北尔

网址：www.beijerelectronics.cn

北尔电子成立于1981年，总部在瑞典南部的Malmö。北尔电子是上市公司北尔集团三大事业部之一。北尔集团的客户包括 阿法拉法(Alfa Laval)、庞巴迪(Bombardier)、阿尔斯通(Alstom)和艾默生(Emerson)等要求苛刻的大型跨国企业。2018年北尔电子集团销售额达到14亿瑞典克朗。

台达

网址：www.deltaww.com

台达成立于1971年，总部在台湾，为全球提供电源管理及散热解决方案，秉承“Smarter. Greener. Together.”的品牌理念，自动化模块中，专注于交流马达驱动器、电源治理、感测、控制与运动等产品领域的创新研发，同时整合工业自动化产品，继而开发工业控制网络，为全球客户提供全方位的解决方案服务。

汽车中控领域HMI服务企业中，海哥找了三家，他们分别是：HARMAN、INTELLIAS、ELEKTROBIT。

HARMAN

网址：www.harman.com

1980年成立，总部在美国，它是三星的子公司，公司员工规模过万，开发联网汽车系统，音频和视频产品，企业自动化和互联服务。北美，欧洲和亚洲汽车制造商是哈曼的客户。该公司还是HMI软件开发服务的先驱提供商。

INTELLIAS

网址：www.intellias.com

Intellias是一家定制软件工程公司，专注于汽车、基于位置的服务和金融技术行业。公司员工规模上千人。Intellias被Inc. 5000公认为欧洲最有前途，发展最快的私营公司之一。该软件开发公司也被列入全球外包100。

ELEKTROBIT

网址：www.elektrobit.com

作为汽车软件行业的领导者，凭借 30 多年为本行业服务的经验，EB 的软件为 1 亿多辆汽车中的逾 10 亿台设备提供支持，并提供针对互联汽车基础设施、人机界面 (HMI) 技术、导航、辅助驾驶、电子控制单元 (ECU) 和软件工程服务的灵活、创新的解决方案。

总结一下，今天的《海哥HMI人机交互》，海哥带你了解了HMI是什么，可以简单理解HMI就是一个平板PC，既包含了硬件，又包括了软件系统，硬件方面核心是看处理器，而软件方面需要用组态软件来开发，针对项目来做定制开发，开发出来的工程文件，通过串口下载到HMI的处理器上，这样HMI就可以管控自动化生产的设备，HMI是SCADA总要组成部分。

文章来源：站酷

Struts2中转发和重定向的区别以及实现方法

最近遇到一个问题，就是在设置struts2的拦截器以后，想要访问必须登录，想要的效果是转到登录页面，也就是转到xxx.jsp，但是发现没有转到，而是action结尾的，后来发现是因为在struts.xml里面配置的时候，没有在result中配置type属性，struts默认的是重定向，就是网址不变，解决办法就是在result中加type=”redirect”,就可以了



转发和重定向的区别：



重定向是不共享request的东西，重定向后的页面中无法接收request里的东西，另外dispatcher结果类型的default属性为TRUE，故<result-          type/>缺省为dispatcher 所以如果没有设置type属性的话，那么默认的是请求转发，就是说你要是什么都不写的话，默认就是这样的

1

<result name="list" type="dispatcher">/admin/jsp/userAction/list.jsp</result>

1

重定向的两个属性： 

redirect是在处理完当前Action之后，重定向到另外一个实际的物理资源，以.jsp结尾这样的 

redirectAction也是重定向，但它重定向到的是另外一个Action，就是以action结尾这样的 

只要是重定向，那么之前凡是保存在request里面的东西就全都消失了 

因为重定向实际是发送第二个请求，故请求中的东西也就不会出现在第二个请求里面了 

也就是说重定向是不共享request的东西，重定向后的页面中无法接收request里的东西，

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

Sketch 58 Beta 版本已于近期推出（其实最近一段时间已更新了好几个测试版），官方终于推出 Smart Layout 智能布局，让 Symbol 组件获得响应功能，变得更加灵活和强大。

之前我们只能使用第三方插件来制作响应式组件，比如之前介绍的 Kitchen 和 Anima。不过毕竟不是官方亲生的，难免会包含一些 bug 和不足。

比如 Kitchen 插件在制作 Symbol 组件的时候，其自动排版功能会出错。Anima 插件对上传到蓝湖的标注会有显示问题。关键是在团队协作的时候，其他使用源文件的同学也必须安装对应的插件，否则没有效果。

那么这次 Sketch 58 Beta 版本新推出的 Smart Layout 智能布局功能，能否解决长期困扰设计师的响应布局问题呢？一起来看下。

SketchBeta版本下载

如果想体验 Sketch Beta 版本，请进入 Sketch 测试版主页下载→https://www.sketch.com/beta/。但是要记住，一定不要用在自己的正式文件中，防止修改后，低版本打不开。

Sketch 58 要求 Mac 系统版本是 macOS High Sierra 10.13.4 及以上，下面是 Sketch 各大版本对应的 Mac 系统版本，如果遇到新版的 Sketch 打不开就需要检查下自己的系统版本。

• Sketch52-58系列版本需要macOS High Sierra 10.13.4及以上
• Sketch51系列版本需要macOS Sierra 10.12.2及以上
• Sketch50系列版本需要OS X El Capitan 10.11.2及以上

Smart Layout智能布局介绍

本次 Sketch 58 Beta 最大的更新就是 Smart Layout。

在新建 Symbol 组件时，弹窗新增 Layout 选项，总共有 7 个属性，分别对应不同的图标，下面是每个属性的简单介绍。

1. No Layout

正常布局，也就是和原先一样，没有特殊效果。

2. Left to Right Layout

赋予 Symbol 组件智能布局效果，组件尺寸会根据内容变化，方向是水平从左往右布局。

3. Horizontally Center Layout

同上，方向是中间往左右两端布局。

4. Right to Left Layout

同上，方向是从右往左布局。

5. Top to Bottom Layout

赋予 Symbol 组件智能布局效果，组件尺寸会根据内容变化，方向是垂直从上往下布局。

6. Vertically Center Layout

同上，方向是中间往上下两端布局。

7. Bottom to Top Layout

同上，方向是从下往上布局。

另外在选择好 Layout 属性后，Symbol 页面的画板组件图标会发生变化，除了 No Layout 布局还是之前的画板图标之外，其余 6 个都有对应的新图标，看下图。

此外，选择画板后，右侧的属性面板中会新增布局选择功能，包含上面讲的7种属性，可随时对 Layout 布局进行更改。

看上面的描述还是比较迷惑，实际上智能布局简单来说，就是赋予 Symbol 组件内容边距的功能，尺寸随内容变化而变化，有点类似于前端 CSS 中的 padding 属性。下面用实际例子展示。

制作弹性按钮

以前我们使用过 Kitchen 和 Anima 制作过弹性按钮。需求是，文字两端的边距（即CSS中的padding）保持固定，文字数量不固定，按钮宽度随文字内容走。

那么在 Sketch 58 中，我们先制作一个按钮，文字两端的边距是 20。

转化为 Symbol，出现弹窗，在新增的 Layout 下拉中，选择 Left to Right Layout，这样文字变化时，左边是固定不动的，内容往右边延展。

这样一个弹性按钮就做好了，不管文字有多少，两端边距永远保持固定 20。和前端 CSS 中的 padding-left 和 padding-right 功能一样。

如果这个时候我们再拉伸 Symbol，右侧 Overrides 会出现一个新的图标：缩小实例以适配内容。点击后，被拉伸的组件会还原为文字内容长度。

注意，这个和原先的重设覆盖层图标不同，不会清除覆盖的文本内容，只会还原为适合内容大小。

以上是从左往右的布局，水平两端和从右往左也是一样的道理，只是方向不一样，下图是从右往左的布局。

这就是智能布局的主要功能，赋予 Symbol 组件 CSS 代码 padding 属性，具备响应特征。还需要注意的是，智能布局目前只针对 Symbol 组件，Kitchen 插件是可以作用于普通组的。

制作弹性按钮组

上面是单个组件的智能布局，如果是嵌套组件呢？也是可以的，一起试下。

我们把刚才做的按钮横向分布三个，再一起做成新的按钮组 Symbol 组件，结构看下图。

新的按钮组内，每个按钮已经是响应式的，那么做成组后就会保持组内元素的间距固定，更改下文字内容看下图。

非常棒，已经满足了我们刚开始的需求。但是不建议嵌套过多，要保持组件化设计思维。当然了，间距问题，Sketch 57 已经提供了多元素间距调整功能，只多了一步，但是不用把整体再次转化 Symbol，大家可以根据自己的需要灵活选择。

制作信息卡片

以上讲的是水平方向布局，同理垂直方向布局道理也一样，我们以最常见的信息卡片为例子。一般情况下卡片图片不变，标题和内容文字的不固定会导致卡片整体高度也会发生变化。利用智能布局我们可以让卡片变成响应式扩展。

确定好上下左右的间距，例子中用的 16，然后建立组件，Layout 选择从上往下布局，这样标题和内容文字增多，上下的间距是保持不变的，内容高度自动增加。

总结

以上就是 Sketch 58 Beta 版本新增的 Smart Layout 智能布局介绍。关于这个新功能，我们还可以做很多响应式的组件，提升设计效率。Sketch 的更新速度也在加快，很多之前第三方插件才可以实现的效果也被官方一一收入囊中。希望 Sketch 的发展越来越好，成为设计师真正的设计利器。

58 版本的欢迎界面也做了大更新，至于好不好看就因人而异了。最后来一睹芳容。

文章来源：优设