《怦然心动：情感化交互设计指南》丨NOTES

精彩地阐述出了当人们访问网站，打开软件，购买实体产品和被某人吸引时的心理状态，并且非常深入地用心理学的方法解释了刺激和触发人类行为的因素。书中提供的众多方法，让我们可以创造出更加持久和深刻的用户体验。

Stephen PAnderson是一位享誉世界的交互设计师和顾问，他在建设和领导信息构架师和交互设计师团队方面有着十余年的丰富经验，其客户包括Nokia、Frito-Lay、SabreTravel Network和Chesapeake Energy等知名企业。Stephen创建了著名的应用程序Mental Notes—一种广泛应用于产品开发、具有心理学要素的交互设计工具。

LinkedIn填写资料的流程：展现资料完善度，如25%，提示用户只需填写另一项资料就能提升到45%。通过逐步激励引导用户完善资料。它为什么会奏效？

行为的拆分 ，把复杂的任务分解成简单的任务，人们更易采取行动。

适度的挑战 ，有挑战才有乐趣，不会困难到无从下手，也不会简单到无聊透顶。

地位 ，人们常常评估，相对于他人和自己的最佳纪录，交互如何削弱或加强人们的地位。

成就 ，人们更趋于参加有意义的受到大家认可的活动。

寻找人们做事的潜在动机，从中提取行为原则，运用到设计中去。

诱惑即有意诱使某个人进行某种行为的过程。多数产品就好比一个沉默的朋友，人很好，但不会表现自己，他们的好，用户不会花时间去发掘。因为还有数不胜数的其它产品来吸引用户的眼球。太多竞争，你怎么可能脱颖而出？

真正使游戏体验如此美妙的原因并非网页的可用性， 而是心理学的应用。 通过清除令人困扰的界面干扰因素，网页的可用性为用户获得良好体验铺平了道路，但真正使用户获得良好体验的却另有其因— 了解用户的动机所在。 把易于使用和真正想要使用混为一谈是不恰当的。

Donald Norman说过：当技术满足了基本需求，用户体验便开始主宰一切。用户体验需求等级模型如下：

选择一种特殊颜色的口红或换个发型，既是为了展现个人风格也是为了得到别人的关注。视觉设计也是同样的道理，设计必然包含一些艺术的表达（即风格），但我们更应该关注由此引发的人类行为。

美学 包括可以引起感觉的一切事物—不只是我们看到的，也包括我们听到的、闻到的、尝到的和感觉到的。作为用户体验设计者，必须考虑能影响使用者交互的一切刺激因素。

感知的功能可见性，关于用户怎样，以及应该与一个对象进行交互的暗示。简单来说就是：如果它看起来像一个按钮，那么它就必须是个按钮。如果你不能建出网页的物理模型，那么用户就可能感到困扰。

亲近法则 表明，如果我把两个或多个物品组合在一起，你就会假设它们是有关联的。如果其中一个物品相对于另一个物品来说有不同的特征，我们就能感觉出它的不同，这就是 对比 。比起不具有共同特征的元素，具有一致性视觉属性的元素更容易被关联在一起，这就是 均质连接性 。

产品的个性影响我们的感知，想想我们能多快的从一个人的装束及表现就定位出他是个什么样的人。人们倾向认同一些个性， 信任与否和个性有关，看法和期望也与产品个性有关，用户会选择与自己个性相匹配的产品。 索尼的电子狗，如果做成一个机器男管家，那么如果他只对我们一半的指令能做出反应，我们就认为他坏了，但电子狗被认为不一定会执行我们的命令，所以如果它执行了，我们会感到高兴。 考虑一下你的产品有什么个性，同时这样的个性会带来什么样的期望。

据2002年斯坦福大学的研究成果：影响一个网站可信度的因素是：网站整体的视觉传达设计，包括版面设计、排印方式、字体大小和颜色方案。相对于信息真实性、结构、知名度，网站对人感官感受的影响更为深远。用户对网页产生第一印象只要50毫秒（1/20秒）

迪士尼对排队路线进行了精巧的设计，让人无法判断出排队路线在哪儿终止，娱乐设施从何开始，从而使得漫长的等待看上去变得更短暂。通过分散注意力和运用错觉效果，使得漫长的等待变得不那么糟糕。

《新科学家》发现：如果进度条要制造出走得更快的假象，其上下波动效果要随之加快。充满了向左推进的博文的进度条看上去走得更快。我们的大脑倾向于计算周期，而不是时间。循环更慢的让人感觉时间过得更快。

好的视觉审美可以弥补差的可用性，减少任务完成时间，降低出错率。当我们放松的时候，我们的大脑更灵活，并更能为复杂的问题找到解决方法。Norman提供了另一种解释：我们喜欢去做那些能让我们感到愉快的事情。我们更愿意去面对那些对我们有吸引力的问题。美学不仅影响可用性的感觉，也对实际性能有影响。

视觉设计不是附加的价值，不是核心功能的一层外壳。 形式和功能不是彼此孤立的 ，如果形式独立于功能，就意味着美学和功能是两个独立的要素，那么我们就会忽视“美不仅意味着装饰”这一原则。也许你会说“网页不必美观，只需便于使用”，也许有一定道理，但它与人类对视觉刺激的反应相互矛盾，将事物的外观与功能区分开显得有些可以。

苹果公司推出iPod时，曾直接把它与一盒口香糖作比较，它们的尺寸几乎一样。这是一个非常棒的隐喻，我们 把新信息同一些为人熟知的事物联系起来，通过这种方法来阐释它们的意义。 尺寸成了iPod与其他音乐破放弃的关键区分因素。

时刻思考大家所做的联想，可以显著提高你的设计。 通过理解各种美学元素所能引发的联想，我们可以使人们对我们的设计做出期望的反应。

设计选择应该支持某种特别的行为目标，大家自然都想让这个世界变得更美好，但变美并不总会为我们带来好处。

公认的美学。与基本的设计美学原则有关，如对称、协调、三分法则和黄金比例。

文化的美学。是在某个时刻从某种方面我们发现某种文化的迷人之处。

主观的美学。就是你个人觉得对象具有美，这与个人品味有关。

主观>文化>公认

虽然人们喜欢美丽的事物，但要思考我们的美学选择所带来的预期效果，一旦你理解了不同美学选择所产生的的效果，你就会发现有意做出缺乏风格的设计是完全可能的—前提是这种设计能实现特定目标。

视觉理解可以理解为：所得取决于所见和所知。当谈论联想，指的是我们所知的—不管来自过去的经验还是大众智慧—都会影响我们的判断和行为。

我们会朝其他人都在看的方向看。显示他人的存在将显著的改变我们的行为。Facebook注销账号的原始界面文案：我们很遗憾你要离开了，告我们你觉得Facebook没法用的原因。后来新的注销页面放上了一些你朋友的头像并询问：你确定注销账户吗？你的298位好友再也无法联系你了。这种设计让注销率减少了7%。

不要在评估可能的情感和联想价值之前，就判非功能性的设计元素没有价值，并将之去掉。

不要在所有元素中优先考虑视觉设计，就像这部分内容是对美学的论证。好的设计是关于做出全面和可评估的决策。

不要把视觉设计当做一种装饰，在项目的最后才添加。

伺机用图形强化或代替问题，五岁的孩子能理解这个嘛？

用视觉隐喻或模型来解释晦涩的概念。

做出适合于你的受众和商业目标的美学选择。

幽默的各种好处不多说了，通过使用情感化设计，培养用户形成对品牌的积极记忆，不仅鼓励用户成为常客，还能让他们为喜爱的产品做宣传。幽默不适用与一切情况，真正思考的应该是品牌的个性。

当人们感到愉快时，人们能够排除不重要的信息并发现有用的提示来解决问题。紧张时，肾上腺素能制造出恐惧和焦虑，我们会变得更集中。处于积极状态时，多巴胺能让我们变得兴趣盎然，跳出常规思维。

个性化、定制化，比如你的支付宝年度账单。

意外的，越让人意外越开心。

有意义的，有用的，不普通的。

令人愉快的包装。

我们的大脑会自发寻找组织、简化复杂信息的方法，就算没有模式存在，而当我们发现了一种模式，我们就会很高兴。比如对对碰，我们乐于在混沌中寻找模式。通过解决难题，我们可以得到短暂的快感。模式是人类理解知识的关键，你展示什么样的信息，能唤起人们的好奇心并鼓励它们寻找模式？

人们会对悬而未决的问题着迷。餐厅在你结账时会送你一张优惠券，上面写着千万不要打开，否则无效，下次来就餐时带上这张卡，可能会获得某种优惠，从免费的开胃菜到打八折，甚至更多，但直到你下一次来之前你都不知道你得到了什么。这就是激发人们好奇心的部分。

信息可以以直截了当或让人好奇的方式展现，如果选择后者，不但一定能获得关注度，还有可能获得更高的参与度—好奇心驱使人们去了解更多。已知的可能被忽视的信息已经被转换成一些未知的、神秘的、需要找到答案的信息。 当我们感觉到有知识空缺时，就会变得好奇。 为了消除被剥夺感，我们想找到丢失的信息，悬疑小说就在创造这种被剥夺感。我好奇，因为我所知道的和我想知道的之间存在空缺。好奇心的强度， 与特定信息填补信息差的可能有关系。 好奇心与我们队某个特定领域的认识程度有关系，我们对某些话题越了解，我们就越可能专注于自己的信息差。LinkedIn告诉用户某公司查看了你的简历，但你需要付费。

让你的小把戏有趣，让人感觉物有所值。

努力使信息与用户有直接联系。

承诺提供一些有价值的信息并说明获得这些信息需要付出什么代价。

通过之前的体验和上下文线索来建立诚信。

用图形来暗示或直接创造神秘的感觉。

不要尝试使用别处会免费赠送的东西来吸引用户。

/呦呵，作者说50Cent是说唱艺术家，难得/人们想在事物上留下属于个人的标记，表明“我来过这”“这就是我”。从选车牌到选纹身，到贴满贴纸的笔记本，我们喜欢自我表现，我们需要各种方式表达自己的个性、感受或想法。 当人们被允许控制某些事物，自我表现的需求就会体现出来。 究其实质而言，只要你允许用户发表言论和评价就是一种允许自我表现的方式，只要将这些评论与个人资料链接起来，用户就有机会再网上表现自己。

当你将某件事进行了简化，你就增加了人们去做那件事的可能性，建议详细的行动步骤，推动人们迈出第一步。设定默认选项，做出小小的承诺，分享地点，这些都是可以引导和改变行为的细节。

两种卡片，一种盖章八次可以获得免费洗车的机会，一种盖十次张可以获得免费洗车的机会，但已经盖了两个章了。结果拿到第一种卡片的人有19%获得免费洗车的机会，而拿得到第二种卡片的人有34%获得免费洗车的机会。

行为拆分将一个复杂的任务分解为几个简单的步骤，行为塑造被用来加强一种期望的行为习惯。教授新知识的时候，从最简单的工作开始，逐步加强对所需行为的训练。另一种方式是，当用户掌握一个技能或熟练度增加的时候，就给予他们奖励。 确定你期望他们做出的行为，列出完成这个行为所需额步骤，每完成一步就给予奖励。

影响人们决策的原因：可利用信息、经验和偏见、问题的表达方式。我们不擅长制定长期决策，更善于理解相对值而非绝对值，情感或情绪影响我们的行为。我们不擅长预测什么会使我们快乐，我们甚至不善于描述自己会首先因什么而快乐。

减少选项。 提供6种果酱时，比提供24种果酱时的购买量多了10倍。

减少文字。

有趣的干扰。 投资网站的 测试夹杂着关于个人喜好的问题。

隐藏信息，制造“少”的错觉。 可展开/收起的表单。

迷惑视觉系统，让内容更简约。 四行表格变成三行表格。

减少思考时间。 代替文字。

运用对比。

利用默认选项。 两个选择之间，我们倾向于选择无需付出任何代价的那个。

提出明确建议。 不要问对方有没有空，选定时间直接问对方同意不同意。

给予方便和个性化的推荐。 Steepster的评级系统，当鼠标停在某个刻度时，会显示之前评价过的星级，便于比较。

损失规避和所有权偏见。 我们讨厌失去。就算可以获得更多也不愿意放弃已有的东西。试验：有杯子的人对杯子的估价是没有杯子的人的估价的两倍。

在交互中进行角色扮演。

记叙体验过程。 记录体验中的每个步骤，包括经历的任务和情感。

将复合式要求分解为简单小步骤。 行为拆分，行为能遵循一定顺序吗？ 第四步：将每一刻的选择简化到最少。 将人们必须做出的选择（或行动）的数量限制为最小值。

寻找微时刻。

重鼠标，轻键盘。

为了获得商业成功，人们必须怎样做？ 要将商业目标翻译为行为目标 ，比如“提高上传视频的质量”并不是你可以为之设计的行为—它是某些行为改变后的结果。而类似“鼓励人们对所上传视频进行甄选”才是一个合适的行为目标。然后问自己： 如何鼓励这种行为？

稀缺性。 如果某事物的使用受到限制或被宣布为稀有罕见，我们就会推断它有价值。如果限制用户每日的上传数量是否会让用户上传时三思而后行呢？

限定权利。 人们渴望拥有被视作专有或只属于特定人群的事物。如果上传高清或高评价视频的用户获得更多特定功能的使用权呢？

权威。 我们喜欢关注权威并听取其建议。如果向用户发送知名导演的录制教程呢？

行为塑造。 逐渐教授新知识。如果设置适用于大多数用户的很常见的小挑战呢？

游戏首先必须有趣、吸引人—假定现在没有引人注目的积分和徽章，也没有简单的奖励程序，因为这些无论如何都会令人上瘾—如果人们不喜欢游戏所强调的行为，他们就会感到沮丧。好的游戏能为人们的生活带来欢乐。

玩耍可以自然发生，不需要任何公开宣布的目标。而 游戏有规则、目标 和其他特点。某事物加入游戏机制，这个事物现在具有了之前没有的新一层乐趣使人们更容易被这个事物所吸引。但光是加入积分和徽章并不能将其变成游戏，必须透过表象看本质。

多数游戏都属于下列类别：

玩耍和挑战；

矛盾和选择；

反馈回应；

目标和奖励；

虚构的世界。

社交要素虽然极具影响力，但不属于核心要素。玩家可能会面对各种矛盾，而且反馈回应可能与地位、身份、声望和其他动态社交行为相互关联。

游戏引入了挑战，以目标的形式体现，通过一些人为制造的矛盾及选择，玩家想成功挑战就变得复杂起来。一套所有玩家都必须遵守的规则更加剧了这种状况。矛盾可能是资源的稀有，竞争，或我们在游戏过程中必须做出的选择和计算等形式体现。游戏的过程中还存在各种反馈回应，有时这些反馈会引发体现为外在的激励因子，如目标和奖励“升到下一级”。（游戏是一个由各种规则确立的，玩家在其中参与人为制造的矛盾并产生可计量结果的系统）

人的内心趋于讯号新奇事物和各种挑战，趋于扩展和锻炼自己的能力，趋于探索和学习。为使目标明确，你需要建立等级，先建立一系列小目标，然后朝着更有意义更高级的目标发展。

如果你想让一个服务更像一个游戏，思考那些使游戏有趣的机制，不要借鉴其他游戏那些表面的内容，而要理解是什么使一个热门的游戏好玩。然后，寻找你服务中的这些机制。通过建立一个挑战，你能维持人们的喜悦。

得不到的才是最好的。 人们推断使用受限的事物具有特定的价值。

在商务中运用稀缺性。 饥饿营销。

用稀缺性来提高质量。 限制用户上传文件的数量。

使用稀缺性鼓励用户参与。 收件箱只能容纳15封邮件会不会鼓励用户及时清理邮箱呢？

稀缺性的其它形式 。限制时间、限制权限。

难得的东西一般比容易得到的东西好，人们用“使用受限”来帮助他们决策，如果面包店缺一种点心，但又充足的其它点心，这也许能说明哪种点心更受欢迎。利用稀缺性通常是做出选择的捷径。还有观点认为如果某个事物稀缺难以为人所得，它侵犯了我们对情况的控制感。事物本身的稀缺对自由选择是一种威胁，它可能是一种鼓励用户做出期望行为的有用手段。

所有限制带来的最终结果就是人们被迫做出选择：现在做还是等会做？怎么做？先做什么？就想RPG游戏，你会选择什么样的装备去什么样的副本，你需要计算，哪一种选择能更好的帮你达成目标。

当外界环境对我们的行为做出反应时，我们就获得了一些可以帮助我们提高相关领域能力的信息。

确定鼓励或阻止用户进行的特定行为模式。

将所期望的行为模式转变为可被动追踪和测定的数据。

将这些行为与积分联系起来。

将积分转换为一种周期性的得分及其他有用的信息。（如月报）

以有趣的方式展现这种得分。（如把距离显示为巴黎铁塔那么高）

创造将数据转化为有用信息的规则。

设置挑战。

添加社交暗示。（如与好友的比较）

让游戏有趣，让玩家开心。

对用户评论的行为实行积分奖励，这种行为可能适得其反。人们做出评论、分享、喜好及其他各种社会行动的理由，与地位、身份、声望和许多其他自发产生的内在激励因子有关。 开源软件和维基百科之所以能长存，是源于人们的内在动机，如果牵扯进外部奖励，必定会抑制这种内在的激情 ，或者导致不好的结果。

奖励促使人们去获取更多奖励，如果发表每一条评论都能获得奖励， 你真正在意的便不再是你评论的内容，你会写很多无意义的评论，因为你关注的是积分。 激励只对特定的行为类型有用。但它也能将人们的关注点从任务转移到提供的奖励上来。

我可以炫耀我的徽章、成绩单上的分数，这些都是我选择的有形符号，我攻克的挑战和我收到的反馈，但要记住， 仅当这些事物代表我的身份，或我尝试建立身份的一部分时，它们才具有意义。 积分和徽章， 当这些东西强调了人们所渴求的事物时，它们才会有效。 当缺乏内在动机时，如果用它们来制造趣味，效果将只是一时的。常见的机制：积分、等级、记分牌排行榜、成就、徽章、任务。

我们离一个目标越近，完成它的欲望就越强烈。不但向用户展示用户已达成的任务，还要像用户展示未完成的，当人们知道自己缺少什么时，就会强迫自己去收集。如早期的QQ图标点亮。新的任务永远都在出现，为用户展示的似乎是唾手可得却又永远无法实现的目标，就好比骑在马上，在马眼前垂一根胡萝卜引诱其往前走。

愉悦并不能持久，所有的关系最后都会陷入僵局。生物学家的观点是，曾向我们大脑发送多巴胺的物质，停止了这项工作。这就是为什么游戏不断向你提出各种挑战。 就算是魔兽世界以令人上瘾而闻名，也必须使它们的世界保持活力，不断进行改造 ，为忠实玩家创造新的目标，只有这样才能维持人们的兴趣。 相同的东西重复太多，就会随着时间失去魅力。

我尝试分享现实世界、互联网世界的例子，我更专注于这些不变的行为模式，而不是哪一个特别的例子/感兴趣自行搜索Fogg行为网格/

魅力超越了任何特定的策略或战略。许多交际打人帮助人们建立一种身份感和自信感。结交女人的新方法？一开始要弄清你是谁以及你代表着什么。 服务和产品也要确立自身的定位和个性，并努力确保所有的用户交互都能塑造出始终如一的品牌形象。当你有了身份，知道了自己是谁，不是谁，你知道自己代表了什么。一旦确定了这个，你就有了故事，这是一种吸引人们并使他们记住你的最有效的方式。 人们都在寻找与自身最搭配的故事，根据计划进行的每一步都经过我们的深思熟虑，根据我们是谁和我们想成为哪种人而定。在此基础上，再根据我们想交往的人和想了解的事而决定。你能不能明确的讲述一个关于你服务的故事？好公司的一个特点是，每个人都知道它为什么存在。

使公众关注其他人正在做什么，可能会增加你想要的行为或不想要的行为。 根据其他人的行为来做决定是很自然的事情 ，我们是极度依赖社会的物种。如果大家都在做这件事，某种程度上就证明了做这件事是安全的。如果你了解为什么客户评价起作用，你就可以想出一种有创意的方式来展示许多人都支持某一想法。/社交互动很复杂，不能将某种因素作为单一的影响因素去看/

诱惑不是指欺骗或者操纵，而是给予人们更多他们想要的，渴求的或需要的，甚至他们还不知道对自己有用的东西。诱惑是指在原本互不了解的情侣之间搭建一座桥梁。 诱惑人们，并以此揭示你是谁和你想做什么，并在这个过程中让人知道为什么你值得被关注。

本书的目的是用新颖的交互设计想法来激发你的灵感，如同任意一本技术书籍，现在的例子不久就会过时或被模仿，但这些想法当初起作用的原因却是不变的。这正是本书的核心所在： 这些想法背后的心理学原理，对人类的行为进行永恒的探索。 如果我们能理解什么样的事物能吸引人们，并保持这种吸引力，我们就可以创造更多令人愉快和极具诱惑的体验。

人人都是产品经理和结网推荐

以下书籍适合产品经理

01 《产品经理手册》——哥乔斯

02《结网》——王坚

03《人人都是产品经理》——苏杰

04 «失控»

05《用户体验的要素》

06《Don't make me think》

07《学会提问》

08《精益求精--卓越的互联网产品设计与管理》

09《项目管理之美》：偏重于项目管理

10《掌握需求过程》：偏重于需求挖掘

11《流程管理》 ：偏重于项目型团队产品经理

12《网站设计解构》：偏重于Web产品经理

13《瞬间之美》 ：同上

14《GUI设计禁忌》 ：偏重于客户端产品经理

15《About Face 3交互设计精髓》：偏重于客户端产品经理

16《用户体验度量》：有一定用户群产品的产品经理可以看

17《胜于言传：网站内容制胜宝典》：资讯类网站产品经理最好看一看

18《Web导航设计》：偏重Web

19《锦绣蓝图》：怎样规划令人流连忘返的网站

20《赢在用户》

21《重来》

22《瞬间之美》

23《湿营销》

24《世界是平的》

25《三双鞋》

26《故事的领导力》

27《人月神话》

28《情感化设计》

29《经济学的思维方式》

30《社会心理学》

31《用户体验面面观》

32《启示录-打造用户喜爱的产品》

阅读《人人都是产品经理》，掌握产品经理对于需求管理、项目管理、团队协调的相关理论知识。这本书对于产品经理的基本工作有一个很好的概括，阅读本书可以让你对产品经理的工作有一个全面的认识。

阅读《结网》，阅读一个资深产品经理关于互联网产品产品经理职业选择以及如何创建互联网产品的相关知识，同时在用户体验，产品优化、数据分析、产品运营、项目管理、竞争情报分析等有了一定的认识，《结网》跟《人人都是产品经理》都是国内产品经理实战类的书籍，但是两者还是有很大的区别，《结网》更多的是从大方向去着手，《人人》涉及更多的是日常的工作细节，是一个很好的互补。

阅读《产品经理的第一本书》，认识传统的产品经理与互联网产品经理之间的区别，同时可以在产品的优化、营销、定价、推广上加深认识。

阅读《启示录》，知道打造好产品的三个基本条件以及如何打造用户喜爱的产品的一些工作与产品管理经验，《启示录》注重于产品的管理，流程的优化，项目的管理等知识。

用户体验交互设计相关：

阅读《don’t make me think》，了解了web网页设计的一些指导原则（别人我等，别让我想，别让我烦）和网页设计如何能更加突出、方便用户，同时初步接触了网页可用性测试的相关知识和原则；

阅读《用户体验要素》，这本书能带给我一些用户体验的基础概念，同时能让读者对用户体验领域的关注点能更深入的思考，用户体验的优化要从五个层面进行考虑，战略层，范围层，结构层，框架层，表现层，这五个层面基本囊括的用户体验的所有要素，五个要素也是互联网产品设计的整体思路，打造一款优秀的互联网产品，这五个层面的知识都要关联起来。

阅读《赢在用户》，这本书也是对于用户体验方面的书籍，以用户为中心的设计，通过阅读了解了用户调研的方法和数据处理办法，在用户研究方面，这本书能给读者一个很好的思路和实践指导。

《交互设计四策略》，这本书也很不错，让你懂得如何关注核心功能，简化设计，设计出更好的用户体验的产品；

市场营销、网络推广相关理论知识：

阅读《玩赚你的网站-网站运营手册》，该书能在网站运营上给我很大的启示和帮助，能帮助读者很好的了解在互联网上百度搜索（SEO)排名的优化，网站运营推广的方式，网站运营策划以及网站运营管理是如何进行的。

阅读《怎样卖龙虾》，这本书能从很多方面启发我对于产品改进，产品销售的思维，同时这本书也从用户出发，以用户的价值启发营销人员对于产品营销的创新点和思路。

阅读《啤酒与尿布》，这本书是关于购物篮分析的，对于产品之间关联性能透彻的分析，同时也在数据分析带给读者一些思路，从中可以学到如何从看似无序的数据中找出关联。

阅读《怪诞行为学》，这本书关于消费者非理性的行为分析以及大量的案例能让读者从各个公司的产品营销活动中想出相关非理性行为，同时能让读者初步的了解如何去分析消费者行为和消费心理。

阅读《口碑》，在如何利用口碑，如何引爆流行上学到了一些方法论，这本书跟国内一本书非常的相近《正在爆发的互联网革命》，相似却并不相同，笔者认为《口碑》的整体战略的出发点要比《正在爆发的互联网革命》要高，也就是说，谈的问题要更有深度，尽管两本书都是通过实例来论证互联网web20对生活、工作、产业的影响，实例较多而论点较少，但是若对互联网不是很了解的同学们可以一读。建议读一本就够了，《口碑》会好些。

怎么设计WEB登录页面，让页面不平庸

用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位由此可见,“门面’就如人的脸面之于人的形象一样重要,而WEB的登录页面就相当传统的“门面”。

现在越来越多的大型网站把登录和首页放在一起设计,由此可见登录页面的重要性,一个出彩的登录界面,将提升产品的品质,赋予产品独特的气质,登录界面也是一个发挥情感化设计,提升用户体验,拉近与用户之间距离的兵家必争之地,本文不谈趋势,不讲交互大道理,不涉及技术,就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。

优雅大方

如果说iPad是介于传统电脑和手机之间的产品,那么tumblr则是介于blog和twitter之间的服务。相比twitter,它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖,带来一种全新的视觉体验,安东尼·德·圣-埃克苏佩里曾说过,“完美就是多一点则太多,少一点则太少。”Tumblr的登录页面没有过多的视觉干扰,优雅大方,一切元素的存在都是为了用户更好的登录,登录过程非常流畅。

精致的质感表现

iCloud是苹果公司所提供的云端同步服务,用户有5GB的免费存储空间。负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说:“乔布斯会一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。他非常重视细节,细致程度居然达到了像素的层面。如果发现问题,乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求,细致的纹理,微妙的阴影,精致的质感,完美的细节,金属光泽可以随着鼠标指针移动,底部的图标可以随着分辨率的大小自适应,改变排列方式,确保用户的浏览体验。

iCloud给我们上了很好的一课,有句大家都听过却未必做到的话——细节决定成败,丰富的细节可以提升设计的价值,也是判断一个设计高下的一条很重要的标准之一,精致舒适的质感纹理,给用户一种沉浸式,充满惊喜的登录体验,是一种很棒的表现方式。

小清新的插图

在网页设计中,插图非常具有表现力,它与绘画艺术关系密切。所以大部分设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合,具有独特的艺术魅力,从而更具表现力。越来越多的设计师,将插画运用到网页设计中来,生动有趣温情的清新插图,能迅速的抓住用户的眼球,让登录界面的更加具有亲和力,

163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆,有故事的插图与用户建立情感的联系,唤起用户的心灵共鸣,让用户更有归属感。

Vimeo是一家提供高清视频存放服务的网站,在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。

人文关怀的品牌传达

设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现人文关怀,传播品牌理念的绝佳位置。

QQ邮箱登陆页面每一次刷新都能看到不同的内容,或用海子的诗,或用迈克尔杰克逊的歌词,唤起用户的共鸣,设计手法简洁,主体信息突出,引导清晰,并没有多余的元素,界面中最重要的操作“登录”按钮使用了交通中通行的绿色,而没有使用常用的蓝色,细节设计非常考究,对每个细节都注入人文的关怀。

新浪微博将登录框设计成一条围脖的样式,用户的每一次登录都是一次品牌传达的过程,切合新浪力推的围脖品牌理念,织围脖的概念深入人心。

越来越大的登录框

越来越大的输入框设计,让用户输入起来感到心情舒畅,登录过程非常愉悦,在显示器越来越大的今天,mailchimp大输入框显的霸气十足,并且一反常态的可以看到自己的密码,第一次在WEB登录框里见到这种设计,非常贴心正是这种不拘一格的设计,让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。

简约而不简单

WEB设计的风格越来越趋向于简洁,登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静的,砍掉了多余的元素,颜色,形状和纹理,不能使用让人眼前一亮的设计元素,只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味,wordpress后台登陆页面采用适当的投影,灰色的巧妙运用,以及出错的抖动提示,让整个登录页面简约而不简单堪称典范。

参考:

如何设计APP的登录页

登录页的设计开发需要先列出一个流程的操作,在根据设计流程开发出登录页。

移动应用分类:

直接使用的功能应用,属于工具类型的。

非强制登录

主要是一些资讯、生活类应用,第一次启动的时候既可以选择立即注册,也可以选择不注册,直接进入主界面,用户无须登录可以使用部分功能。

这类应用具有很强的个人隐私熟悉,为了用户的安全隐私保护,需要强制登录。

登录页面设计流程:

先选择登录的模式。

整个界面背景填充颜色。

多效果混合模式。

选择的填充。

视觉设计前先理清楚界面的逻辑,界面中每个元素的点击从哪里来到哪里去。App因为产品账号体系不同的,所以有各种登录注册方式。登录注册有四种方式。每种方式可以采用不同的形式的背景图设计。第一点:了解你的目标客户群的心态

1、做微任务的目标客户群(如随时随地看看新闻,听听歌,看看**,聊聊八卦之类):

这类的解决方案是设计的app最好是小而准,不要大而全。越全的功能应用,只能代表着这个应用在各方面的都很平庸

2、喜欢当工具来使用的目标客户群:比如找地图,看天气,查数据等。

这类的解决方案是我们尽最大努力的去满足用户的情景需求。做到极致和简单。

3、无聊的客户群,用来打发消磨时间的:无需求,漫无目的的

这类的解决方案是尽可能展示用户感兴趣的东西,帮助客户来打发消磨时光。

第二点:app原型图的制作和设计讨论

这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。

常用的app原型图工具:移动app原型设计神器pop、axure、foreui等

第三点:app视觉设计与设计要点

(1)大概设计板块有app启动页面设计,app界面设计的尺寸规范,app图标设计等

一般来说,手机屏幕是从上往下布局的,重要的信息会放在上方。但是在操作上,大部分人都是单手拿手机,常用的操作,要放在界面的下方。

另外还有一个原则,最小的触摸单位,一般是44个像素。如果再小,你的拇指难以触碰,或者容易引发误操作。同时,也不要让界面太拥挤。

所以,设计师必须用减法设计,这个过程需要花时间思考、简化元素。

你必须记住:(1)隐藏设计或者减法设计(2)分区或分类(3)帮用户做决策(4)提高交互创新设计(5)让人有爽快感和新奇感(6)在设计中浸入情感,把握用户的心理。(谈谈如何进行产品设计以及产品情感化设计)

一位大师这样说过“真正的简约设计是:作品必须不断的被简化,一改再改,直到设计最终成形。”

2014年app设计风格趋向扁平化和卡片化。卡片,扁平化都会是移动app设计的趋势!认为卡片设计确实同时兼具了“拟物”和“极简”2种优势!

第四点:app界面设计流程

(1)设计app界面时,学会从优秀app界面设计作品中寻求灵感,以前的艺术大师,用少量的资源做了大量的设计。

(2)放下工作,休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作,带着全新的眼光工作,比长时间冥思苦想更有

(3)并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存,对比两个版式就能很快分清孰好孰坏。

(4)由于实物展示的相对比例至关重要,所以要及早在不同的目标设备上测试。

(5)整个设计过程中不断问自己“真的需要吗”。支撑项目时候,找一些讨巧的办法,例如,添加一些有趣的元素、样式会这样会很容易也会很吸引人,但必须始终注意剔除不必要的元素,不断精简。甩掉你费尽心血的部分总是难以割舍,但修改过程必须挑剔。

第五点:app界面设计测试与预览修正

设计完成之后,我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具:快速在移动终端上预览app界面设计效果图的方法最后:好的app界面设计作品必然是要经过不断升级、重复迭代的。

常见的几种网站设计风格

极简风:

越少,越经典“这是不少设计大师遵循的设计风格。

“好的设计是尽可能少的设计”这条原则也同样适用于网页设计中。

除非必要的信息,页面中每增加一个元素,都会引起用户过多的小,甚至成为用户完成目标任务的阻碍。

极简设计的好处就在于它能最大化节约用户的时间成本。

无边框风:

这里的边框是指任何类型的装饰性容器。

通过去掉装饰性的容器,加强基本内容的设计感。

提升质量和排版布局,从而改变整体因无装饰性容器的视觉表现。

插画风:

除了使用大量作为背景或主体元素外,

图形插画的运用也是一种很好的方式。

网页Banner可以运用插画来表达网站主题,同时加上插画图标的点缀,使网页看起来清新有趣,加强网站本身的独特性。

扁平风:

扁平化设计可以说是时下最常用的网页设计风格了,它弱化了材质、渐变、阴影,去除了冗余信息的图形元素、排版。这种风格设计可以使画面显得更加平滑,提升了网站内容信息的视觉层级,更加方便用户快速寻找自己需要的内容。同时扁平化的界面能更好实现不同尺寸的转化。这也是现在互联网公司较长采用的一种风格。

3D风格:

这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境,而是那些运用少量3D效果使整个网页显得更加灵动,通过扁平化的基础上,添加一些生动的非扁平元素,给网站带来了原本缺乏的纵深感,同时提升主体视觉吸引力。

纵向分割:

这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境,而是那些运用少量3D效果使整个网页显得更加灵动,通过扁平化的基础上,添加一些生动的非扁平元素,给网站带来了原本缺乏的纵深感,同时提升主体视觉吸引力。

网页设计——根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。

网页设计的工作目标，是通过使用更合理的颜色、字体、、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的试听感受。

网页设计常用的工具包括AI、PS、FL、FW、DW等。

网页，是网站中的任何一页面，通常是HTML（是标准通用标记语言下的一个应用）格式（文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等）。网页通常用图像档来提供图画，网页要使用网页浏览器来阅读。

在网页设计的认识上，许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制

作软件，就能搞好网页设计了。

其实网页设计是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的

任务，它的实现依赖于网页的制作。正所谓“功夫在诗外”，网页设计中最重要的东西

，并非在软件的应用上，而是在我们对网页设计的理解以及设计制作的水平上，在于我

们自身的美感以及对页面的把握上。

首先，我们要弄清楚网页设计的任务。

一、设计的任务

设计是一种审美活动，成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并

非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。

网页设计的任务，是指设计者要表现的主题和要实现的功能。站点的性质不同，设计的

任务也不同。从形式上，可以将站点分为以下三类。

第一类是资讯类站点，像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量

的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的

亲和等问题。

第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设

计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。然

而就现状上来看，这类网站有粗制滥造的嫌疑。

第三类则是形象类网站，比如一些中小型的公司或单位。这类网站一般较小，有的则有

几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对

设计者的美工水平要求较高。

当然，这只是从整体上来看，具体情况还要具体分析。不同的站点还要区别对待。别忘

了最重要的一点，那就是客户的要求，它也属于设计的任务。

明确了设计的任务之后，接下来要想的就是如何完成这个任务了。

二、设计的实现

设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制，这一部分可以在

纸上完成。第二部分为网页的制作，这一过程是在计算机上完成的。

设计首页的第一步是设计版面布局。我们可以将网页看作传统的报刊杂志来编辑，这里

面有文字、图像乃至动画，我们要做的工作就是以最适合的方式将和文字排放在页

面的不同位置。

除了要有一台配置不错的计算机外，软件也是必需的。不能简单地说一个软件的好坏，

只要是设计者使用起来觉得方便而且能得心应手的，就可以称为好软件。当然，它应该

能满足设计者的要求。笔者常用的软件是Macromedia的Dreamweaver、Fireworks、

Flash以及Adobe的Photoshop、imageready，这些都是很不错的软件。

接下来我们要做的就是通过软件的使用，将设计的蓝图变为现实，最终的集成一般是在

Dreamweaver里完成的。虽然在草图上，我们定出了页面的大体轮廓，但是灵感一般都

是在制作过程中产生的。设计作品一定要有创意，这是最基本的要求，没有创意的设计

是失败的。在制作的过程中，我们会碰到许多问题，其中最敏感的莫过于页面的颜色

了。　　

四、造型的组合

在网页设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一

个元素。抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要

素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同组合与搭配

来构造整个页面的。

通常我们可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、

交叉、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。在设计中应

根据具体情况，选择最适合的表现手法，这样有利于主题的表现。

通过点、线、面的组合，可以突出页面上的重要元素，突出设计的主题，增强美感，让

观者在感受美的过程中领会设计的主题，从而实现设计的任务。

造型的巧妙运用不仅能带来极大的美感，而且能较好地突出企业形象，而且能将网页上

的各种元素有机的组织起来，它甚至还可以引导观者的视线。

三、色彩的运用

色彩是一种奇怪的东西，它是美丽而丰富的，它能唤起人类的心灵感知。一般来说，红

色是火的颜色，热情、奔放；也是血的颜色，可以象征生命。**是明度最高的颜色，

显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和

平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感

觉，表示和平与圣洁。

我们知道，颜色是光的折射产生的，红、黄、蓝是三原色，其它的色彩都可以用这三种

色彩调和而成。换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们

的作品更贴近现实。

色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流当中的一

个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水

平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。

单纯的颜色并没有实际的意义，和不同的颜色搭配，它所表现出来的效果也不同。比如

绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、

淡雅、浪漫的气氛。红色和**、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配

则会给人带来暖意。设计的任务不同，配色方案也随之不同。考虑到网页的适应性，应

尽量使用网页安全色。

但颜色的使用并没有一定的法则，如果一定要用某个法则去套，效果只会适得其反。经

验上我们可先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和

对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目

的视觉效果。

五、设计的原则

　

设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循五个大的

原则：统一、连贯、分割、对比及和谐。

统一，是指设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中

切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。

连贯，是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表

现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯

，使整个页面设计的各个部分极为融洽，犹如一气呵成。

分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了

然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不

仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归

纳。

对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与

直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、

聚与散等等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。

和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线

条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传

达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受

形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。　

六、网页的优化

在网页设计中，网页的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速

度和页面的适应性，影响观者对网站的印象。

在资讯类网站中，文字是页面中最大的构成元素，因此字体的优化显得尤为重要。使用

css样式表指定文字的样式是必要的，通常我们将字体指定为宋体，大小指定为12px，

颜色要视背景色而定，原则上以能看清且与整个页面搭配和谐为准。在白色的背景上，

我们一般使用黑色，这样不易产生视觉疲劳，能保证浏览者较长时间地浏览网页。

是网页中的重要元素。的优化可以在保证浏览质量的前提下将其size降至最低

，这样可以成倍地提高网页的下载速度。利用Photoshop6或Fireworks4可以将切

成小块，分别进行优化。输出的格式可以为gif或jpeg，要视具体情况而定。一般我们

把有较为复杂颜色变化的小块优化为jpeg，而把那种只有单纯色块的卡通画式的小块优

化为gif，这是由这两种格式的特点决定的。

表格(table)是页面中的重要元素,是页面排版的主要手段。我们可以设定表格的宽度、

高度、边框、背景色、对齐方式等参数。很多时候，我们将表格的边框设为0，以此来

定位页面中的元素，或者籍此确定页面中各元素的相对位置。我们知道：浏览器在读取

网页html原代码时，是读完整个table才将它显示出来的。如果一个大表格中含有多个

子表格，必须等大表格读完，才能将子表格一起显示出来。我们在访问一些站点时，等

待多时无结果，按"停止"按钮却一下显示出页面就是这个原因。因此，我们在设计页面

表格的时候，应该尽量避免将所有元素嵌套在一个表格里，而且表格嵌套层次尽量要

少。在使用Dreamweaver制作网页时，会自动在每一个td内添加一个空字符“ ”。如果

单元格内没有填充其它元素，这个空字符会保留，在指定td的宽度或高度后，可以在源

代码内将其删去。

网页的适应性是很重要的，在不同的系统上，不同的分辨率下，不同的浏览器上，我们

将会看到不同的结果，因此设计时要统筹考虑。一般我们在800600下制作网页，最佳

浏览效果也是在800600分辨率下，在其它情况下只要保证基本一致，不出现较大问题

即可。

说了这么多，只是希望能对做“网页设计”的人有所帮助，希望他们在做网页的时候能

够从整体着眼，无愧于“设计”这两个字。顺便说一下，本文只代表本人个人观点，仅

供参考。

对于网页的框架与定位,这个是很难说得清楚的,这要看你在做网站时,对网站的

规划,并不能一并而论的,如果你没有这方面的经验,就多多在网上看看别人是如何设计

的吧,是非常的用的,可以把他们给抓下来,做个图库,方便自己设计

其实看看一些设计精良的网页，会对自己有很大的作用，

把别人的网页下载下来，再用相关的软件，进行分析，

可以学到许多的东西的，是一种快捷的学习方法，

但决不是COPY

我认为首要的是突出主题

一个好的网站(个人的只能算做网页)最首要的是突出你的主题,在别人搜索或访问时首

先就看有没有自己所需要的内容,要么就直奔主题然后再在主题鲜明的基础上做好框架

设计一个好的网站要做到层次分明,结构合理,让人一看就能明白你想要表达的中心思

想是什么,以及怎样才能以以最快的速度找到自己想要的内容这两个主要问题解决后再

在一些细节上加以润色,就能制作出赏心悦目的网站