国内外的不少企业协同工具在宣传自己的产品特点时，不约而同地总喜欢把电子邮件设为假想敌，「彻底颠覆电子邮件」、「Enjoy your work without Emails」……

不过我接触过不少公司和团队，在试用多个协同平台后，还是把主阵地转回到电子邮件。在我看来，至少有以下8个理由会让电子邮件这一最「古老」的互联网通信方式继续存在和流行下去。

1、电子邮件依然是目前世界范围内成本最低、普及度最高的沟通交流渠道

无论是Facebook、微信还是其他那些拥有上亿用户的社交网络，都还不敢宣传自己已经连接了地球上的每个人；而越洋电话的成本也并不是每个人都能承受的。但电子邮件的成本几乎等于零，注册和接收都是免费，任何人只要拥有自己的邮箱和网络接入（一小会就可以），就能和世界上任何有邮箱的人沟通。

2、互联网服务的帐号体系主要基于电子邮箱建立

虽然现在很多网站和app提供了社交帐号的快捷登录，但它们依然会预留一个电子邮箱的位置。「电子邮件+密码」的组合支撑着几乎所有互联网服务的账号体系，验证信息、找回密码时都得用到邮箱。

3、电子邮件的注册和使用门槛很低

Gmail、Outlook、网易邮箱、QQ邮箱……选择一个自己喜爱的邮箱服务提供商，设置好自己能记住的邮箱名和密码——Bingo！——立刻就给你的朋友和同事们发邮件吧。你完全不需要再去填写年龄、生日、性别之类的个人信息，如今最「纯净」的互联网产品可能只剩下电子邮件了。

4、有了电子邮件，就具备了基本的日常事务在线处理工具

主流的电子邮件都配备了日历和通讯录功能，有的像Gmail、QQ邮箱还提供待办事项。拥有了一个常用邮箱后，导入你的通讯录，把日程安排写到日历里。如果你没有更多的要求，一个电子邮箱就能解决基本的日常事务需求。

5、效率协同工具难以解决企业的内外沟通问题

正如我开头提到的，那些声称要「杀死邮件」的协同工具都没能解决一个频繁出现的需求：企业内部和外部的沟通问题。当你和同事们热火朝天地在内部平台上达成一致后，发现还是得把讨论结果誊抄到邮件里发给外面的合作伙伴。当外面的人回复邮件后，你又得哼哧哼哧填到内部平台里。长此以往不胜其烦以后，干脆整建制回归电子邮件得了。

6、电子邮件不仅是沟通工具，还是存档备份工具

感谢大容量邮箱成为标配，以及「归档」这一理念的功能化（这也是我钟爱Gmail的重要原因之一），我们不再需要没事就把过往的邮件删除掉，而是可以像档案室一样把它们存在某个文件夹里。如果哪一天老板突然跟你翻一两年前的旧帐，你就可以理直气壮地把当时的邮件搜出来给他看。

7、通过邮件达成的协议具备法律效力

这点真的非常重要！电子邮件不可逆、不可修改的特性让它得以成为法律公证的对象之一。我国的《合同法》和《民事诉讼法》都明确规定，电子邮件属于具备法律效力的「书面形式」。所以不要把微信里随意回复的坏习惯带到邮件里，不是每一家邮箱都提供撤回服务的。

8、当你在写电子邮件时，往往更认真严谨一些

之所以叫它「电子邮件」，正是它在信息时代继承了以前人们书写信件的优良习惯。那时「家书抵万金」，每一个字、每一句话都饱含深情。现在虽然不用像那样字斟句酌，但我们在写邮件时相对更加认真和严谨，尤其是在汇报工作、交流方案等环节，邮件自带的「仪式感」暗中让人觉得马虎不得。

说到这里我不得不再次强调，用微信交流一些快速执行的工作事务无可厚非，但把整个工作都搬到微信上真心是不负责任的行为。即时通讯的产品形态就决定了它的沟通方式是具有很大随意性的，你和同事本来是在探讨项目，但可能是以插科打诨结束。还是让严肃的工作回归严谨的邮件吧！

搜索就像用户和系统之间的对话：用户将他们的信息需求提交上来查询，系统针对提交的信息进行检索，再从界面上给用户以反馈，呈现为一组结果。所以，搜索结果页是搜索的最重要的组成部分之一，它满足了用户对于特定信息的需求。

这篇文章中，我将搜索结果页的 10 项最佳实践列举出来，它们应当能够有效的帮你提升整个用户体验。

1、点击搜索按钮之后，不要清除用户的查询内容

对于用户的查询内容，在搜索结果页当中应当忠实地、完整地呈现出来。这不仅包含目前的搜索，而且应当涵盖之前的搜索内容。对于许多信息获取的过程而言，历史和当前查询内容都是关键信息，如果用户当前的搜索关键词找不到想要的结果的话，他们会稍加调整，并继续搜索。为了方便用户进行查询，最好在搜索框中保留初始的关键词，便于查看也便于调整进行下一次查询。

2、提供准确的和相关的搜索结果

搜索结果的第一页是至关重要的。必须承认，搜索结果页给用户提供的信息与体验是整个搜索体验的关键环节，搜索引擎的转化率好坏与否，与之息息相关。通常只需要通过一两次搜索，用户就能通过搜索结果页，快速地对整个搜索引擎的素质进行判断。

准确地将搜索结果反馈给用户是构建用户信任的基础。所以，搜索引擎需要确定结果的优先级，并且将匹配度最高的结果呈现在结果页上。

3、使用有效的自动建议

无效的自动建议让整个搜索体验降低，而精准的自动建议会让整个体验好上许多，它会根据用户用户的输入内容(词汇词根和后台数据)为用户提供有用和精准的输入内容建议，这有助于帮助用户提高搜索过程的精准度，提升整个搜索体验。

4、内容纠错

输入错误绝对是最常见的错误，如果用户错误地输入某个关键词，而你的检测到了，并且针对错误提供更正之后的结果，这样就成功的规避了因为错误的关键词所导致的不良后果，用户也不用再次进行搜索了。

苹果的 0 条目的搜索页面并不支持搜索结果自动更正

相反，Asos 在这方面就做的很好，当输入错误发生的时候，他们会尽量以无侵略性的方式来帮助客户，比如“您的初始搜索为Overcoatt，我们也为您搜索了Overcoats的相关结果”。

5、显示搜索结果的数量

显示搜索结果的数量能够让用户更清楚他们需要在浏览结果这件事上花费的时间。

而搜索结果同时还能帮助用户针对下一次搜索，作出跟明确的调整和选择。

6、保留最近的用户查询

即使用户熟知搜索引擎的全部功能，也需要借助大脑记忆来挑选关键词，进行搜索。想要找出有意义的、可用的搜索关键词搭配，用户需要结合他们的搜索方向，最近的查询，联想相关的属性和关键词，最终促成一次成功的搜索。在设计整个搜索体验的过程中，你应该始终记住一点：

尊重用户的努力。

你的网站应当存储所有最近的搜索，以便在用户进行下一次搜索的时候，提供这些数据。

最近的搜索帮助用户节省了在相同内容搜索上所耗费的时间和精力。

小贴士：尽量一次展示不超过 10 个条目，这样不会让用户觉得信息过载。

7、选择合适的页面布局

不同的内容其实需要不同的页面布局来支撑的，而我们最常见的两种布局，列表布局和栅格布局，应该能够满足绝大多数的需求。对于布局，我们的经验以一言以蔽之就是：

细节用列表展现，图片靠栅格支撑。

让我们在Cotext 的产品页面中验证一下这一经验。产品的细节展现是非常重要的时刻，对于电子产品而言，需要呈现的配置信息非常的多，所以，列表视图是非常合理的。

而对于相对产品信息更少的产品而言，栅格式的布局则是更好的选择。想服装这样的产品，少有需要借助文本式的产品信息来呈现其特征的，更多还是依靠图片和视觉设计，所以这类产品需要栅格式的布局，而不是冗长的内容信息。

小贴士：

• 允许用户选择列表视图和栅格视图，让用户选择他们更喜欢的方式来查看内容。

• 在设计栅格布局的时候，确保图片的尺寸合理，大到足以看清其中细节，而又不会太大，让用户一次尽量看到更多的条目。

8、展示搜索过程

理想状况下，用户点击搜索按键之后，搜索结果会立刻显现出来。但是实际情况是，它通常是需要有一个过程的。通过进度条和动效让用户明白他们大概需要等多久，或者让等待的过程更加有趣。

小贴士：动效可以有效的分散用户等待过程中的无聊感，让用户实际等待的体验更好。

9、提供排序和过滤的选项

当用户看到的搜索结果过多，或者相关度较低的时候，会对搜索结果非常茫然。而排序和过滤的功能则能够很好的缓解这一情况。

过滤和排序能够帮用户调整和缩小搜索结果，大幅度降低用户手工翻页筛选的工作量。

小贴士：

最重要的一点是不要让用户有太多的选择，如果搜索本身需要大量的筛选的话，那么默认尽量折叠或者隐藏一些相对不那么重要的结果。

不要隐藏排序功能。

当用户筛选到了一个相对狭窄的搜索范围的时候，在结果页面的顶部对此范围进行标注和说明。

10、不要告诉用户“没有结果”

什么都没搜到会让用户感到非常沮丧的，尤其是当用户进行了好几次搜索之后，依然没有结果。你应该尽量避免用户陷入死胡同，当用户没有搜到他们想要的内容之时，应当为他们提供有价值的替代品。

结语

搜索引擎为一个网站所提供的价值是显而易见的，而可用性良好，体验平滑舒适的搜索结果页则能够让用户快速地判断出网站和搜索引擎的重要价值。

一个优秀的搜索引擎应当在结果页当中，为用户提供有效、有用、有价值的搜索结果。

原文作者：Nick Babich

译文：@陈子木

先看最终效果图:

　　下面开始讲解:

　　1.布局

　　先来说一下 我们制作网页一般的大小

　　高度：没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。

　　宽度：

　　1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。

　　2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005

　　3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001

　　注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

　　所以如果是1024的分辨率，你的网页不如设成1000安全一点。

　　如果是800的分辨率一般都设成770。

　　这些需要明白并且牢记，不然很可能做出来不符合浏览器要求，不过一般我们都回设定的再稍微小一点，应为有些浏览器加了插件或者其他的东西宽度会有变化 所以 800的分辨率一般设定760左右，1024的设定990左右.

　　我这样用辅助线和标尺把大概范围划分出来，注意我的划分，正好是770，和1000的地方，应为我要做的网站是1024分辨率下的，但是考虑到依然可能存在800分辨率的用户，所以我回把主要的内容和菜单都放置在770以内，770-1000的地方放一些辅助的东西，这个习惯特别是在做一些门户网站设计的时候更要考虑以下，毕竟改善用户体验也是我们要考虑的问题.

　　2.开始工作

　　我们继续讲解，现在我们来画上部菜单部分的内容，其实很简单拉，就是画一个方框，一个圆，然后组合，加上渐变就可以了，如下图设置

 

 

 

　　3.下面我们来画哪个类似徽章的东西

　　其实也很简单，创意是类似奖状上贴的哪个获奖标志一样，会让网站生动一点，嘿嘿.

　　我们选择多边形，如图:

　　设置如下，继续贴图，大家要注意一下图层顺序，拖动到下层就好了

　　恩 要注意，这个图层我们固定了以后通常就不动了，所以要锁定，不然鼠标晃来晃去很容易把图移位，注意图层那里点一下就多了一个小锁子，方便吧，这下他就彻底不干扰我们了!

　　好的我们继续，其实其他的东西都大同小异

　　我们来研究一下细节.

　　我最喜欢的就是firewroks超级多的纹理，在ps里面有些纹理要自己做真的好麻烦啊!

　　我最喜欢的对角线，恩

　　看页面左边的渐变部分，其实就是拉出来了一个矩形，然后加上线性的渐变，然后加上对角线的纹理，稍微调整一下透明度，就这么简单，效果却很好看，嘿嘿

　　下一个小地方，就是产品资讯的背景框，其实也很简单

　　就是一个矩形，然后外框为红色，矩形加一个内部发光，发浅灰色的光，就这样就成了

　　下一个地方 就是右上角大家可以看到一个类似网格的底纹

　　其实就是一个矩形，再加上一个蒙版，一个渐变，就ok了，现在看起来是不是生动很多，嘿嘿

　　OK，看图

　　就这样一个网站的平面设计三下五除二的就搞定了，嘿嘿，怎么样fireworks方便不!

　　OK，今天就到这里，再欣赏一下我们的作品吧，不错吧!

PS中的羽化，是指边缘虚化、不生硬。羽化值越大，虚化的边缘越宽，如下图，羽化值分别是0、10、20。

 

 

　　羽化值的设置，参数要小于选区宽度或者高度的二分这一，否则产生逻辑错误。