图标 on Victor42

用户研究：人们如何搜索图标

hi@victor42.work (Victor42) — Sun, 09 Apr 2017 11:56:08 +0000

[国外设计第167期]

假设你是一名兽医。因为你非常善于利用人们对弱小可爱动物的爱心，所以Instagram账号经营得风生水起。但这对你来说还不够，你决定开发一个移动应用来拓展你的宠物帝国。这款应用能把人脸模拟成猫猫狗狗的脸。（承认吧，你14岁的时候肯定构想过类似的模拟马脸和猪脸的应用。毫无疑问。）

那么你的这款改变世界的应用，肯定也需要一个图标，猫咪图标。这时候Icons8就派上了用场。

在搜索框里输入“猫”，下载你喜欢的“iOS”风格图标，因为你觉得Appstore还不够拥挤，差不多就是这样。

然后，你发布了应用。你的秘书向你祝贺，从那一刻起，你的名字被载入兽医的史册。

我想表达什么？兽医真是个好职业。好吧我只是在搞笑。

人们往往有各种奇怪的兴趣。他们会搜索一些含糊不清的图标，例如“新闻”、“工作”等。用在他们的应用、网站、T恤上。

试着搜索一下工作图标，你就能了解我们的搜索算法的厉害之处，它能囊括所有几乎能与“工作”沾上边的图标。

问题是，每个人对于相关与不相关都有自己的理解。更要命的是，即使同一个人，在某些因素影响下也会对一个图标的相关与不相关做出不同的判断，比如说文字标签。给图标加上文字标签，或许就能改变人们的认知。

我们不知道怎么应对这种情况，因为我们有两种显示模式：

我下文中会把这两种模式成为 纯图标 模式和 图标+文字 模式。

哪种更好，图标还是图标+文字？哪种更适合作为默认模式？人们看到太多不相关结果时，会感到挫败吗？

我做可用性测试的主要动机，就是为了解答这几个问题。

我邀请了5位参与者（实际上是7位，不过前两位是我测试剧本的同事）。我只是让他们来搜索图标。

搜索盒子图标……

搜索狗狗图标……

……然后指出他们觉得离谱的结果：

我邀请部分人用纯图标模式搜索，另一些用图标+文字模式。我绘制了一张表格记录所有数据——对于不同模式下的每个图标，参与者指出了多少个离谱的搜索结果。

很快事情就超出掌控了。数据对我没有任何帮助。参与者之间的区别和他们的感知实在过于戏剧性，我觉得需要上百名参与者才足够让我相信数据，并从中总结出某种模式。

于是，我开始关注细微的见解。虽然有些规律会在不同模式和不同图标中显现出来，但它们背后仍有一个简单规律。下面是我的观察结果。

文字标签有影响吗？

假如你搜索盒子图标，在搜索结果中出现了这样的图形：

此时，相关与否其实是受文字标签影响的。

【译者注：在英文中，Box是盒子，而Boxing是拳击】

如果加上文字标签，人们就会觉得命令行也算相关的结果。

所以“图标+文字”模式更合适，因为人们能从中感知到更多相关的结果，于是搜索行为有更好的体验，对吗？其实不对。

视觉感知与语言感知

我们再搜索一次盒子。在各种搜索结果中发现了这个图标：

许多参与者认为它是相关的，因为它有一个盒子的外形。但这是纯图标的情况：

如果人们看到图标下方写着“显示器”，他们果断会认为这是不相关的。

这就意味着文字标签能使部分图标相关，也能使另一部分变得不相关。这是一场灾难，因为你永远不知道你得到的是哪部分。但是……

每种模式各自好在哪里？

当然，我们可以只关注事物的负面作用，但这样完全没有建设性。

下面是每种模式一些积极的方面：

纯图标模式

屏幕上可以展示更多图标，我们能更快速浏览。
我们会根据视觉感知来选择图标，甚至因为喜爱它的设计胜过含义。设计师寻找灵感时，更多以这种模式来搜索。而且，这种模式对logo创意和非UI相关的物品很有帮助（杯子、T恤等等）。

图标+文字模式

文字标签可以延伸搜索行为。比如说，如果你正在搜索“手机”图标，然后看到“消息”图标出现在其中。然后你就知道搜索“消息”或其他相关词语，持续不断扩展你的搜索词。
有时候文字标签并不明显，要求很明确的图标都有非常具体的名称。比如符号链接文件或带锁孔的盾牌。有文字的话，就很容易记住这些图标，以后要找还能找得到。对于长期持续使用我们产品的用户很有帮助。

那人们到底更偏向哪种模式？

老实说，两种几乎打了个平手。3名参与者喜欢前一种模式，剩下的则喜欢带有文字的模式。无论如何，每种模式都使相应的参与者受益了。

最后的思考

发起用户体验研究来判断哪种模式胜出，这非常有意思，但最终的结论是没有确定的胜者。

好在我们现在知道了，每种模式都有它自己的优势。把它们都展示出来是正确的选择，这样人们就可以选择符合自己习惯的模式。

希望你喜欢本文。如果对此研究有任何问题，或者想发表自己的见解，随时欢迎留言，或者通过Twitter联系我。

原文链接：https://icons8.com/articles/how-to-search-icons-like-sherlock/

作者信息：Andrew Andrew started at Icons8 as a usability specialist, conducting interviews and usability surveys. He desperately wanted to share his findings with our professional community and started writing insightful and funny (sometimes both) stories for our blog.

轻松打造iOS7风格图标

hi@victor42.work (Victor42) — Sun, 24 Nov 2013 10:29:38 +0000

[国外设计第19期]

随着近年来iOS7的发布，很多网站和APP都忙于改头换面，来适配这套全新的扁平纤细的iOS设计风格。设计好图标是件棘手的事情，尤其当你要设计一整套时，而设计线条式图标本身又是另一项挑战。

下面，我为你准备了一系列指南，能帮你通过简单的步骤打造iOS7风格的图标。

目标是什么？

凡事分轻重缓急，你设计的图标或图标集是用于你的APP吗（这里的APP也指网站）？对于这部指南来说，都无所谓。因为无论如何你都应当遵循下面这些步骤。既然对这一点明确无疑，我们来关注首要任务——研究。

研究别人是怎么做的

研究是一项需要预先完成的基本任务。这很明显，也相对沉闷，你的每项工作都应该从研究开始。不过，在图标设计中，还有些特别的东西需要了解。

首先，看看别人怎么做。有助于了解当下潮流趋势，还有相关的设计守则。最重要的是，这能给你灵感！观察各种神奇的图标作品能助你发现其中的创意闪光，当你准备画手稿时，就能产生好点子。

既然这个指南是针对iOS7的，研究苹果的做法也不失为一个好主意。观察它的图标，无论是主屏图标（比如信息），还是app中的图标（比如时钟应用中的）。看看苹果的iOS7设计准则，你就知道他们建议你怎么做。

着手画点什么

既然你已经充分了解别人的做法，也深受启发，是时候将你的想法付诸于纸上了。在创作过程中，手稿也是一项基本步骤，因为它让你仔细思考各个创意，使大脑快速进行头脑风暴产生新想法。当你画了一些简单的手稿，并将它们都罗列在眼前，正确的方向立刻就显现出来。

手绘草稿最关键的一点，不求数量多，而是要多样化。你画了上百个相同的东西一点用也没有。如果你有三个不同概念，那就有用和深刻得多。只要你保持手绘稿千变万化，就会有好结果。广泛收集灵感有助于找到合适类型的图标，并确定应该朝哪个方向前进。除此之外，看看这些各式各样的草稿，能帮你更容易找出残次品。当你无法确定正确方向，却能肯定其中哪些不会再深入下去时，这个办法相当于管用。

绘制实际图标

我可以肯定，在完成了这些手绘稿之后，你或你的团队已经有所偏好了。无论你选出了其中具体某一个，还是几个不同方案来竞争，该把它们绘制出来了。首先要建立你的栅格系统。如果是创建主屏图标，那你应该遵循苹果提供的新iOS7设计准则。这类PSD模版网上随处可见。

我的建议是尽你所能把这些不同图标都应用于栅格系统，不过先用常规做法来绘制图标。以后再回来修改细节和做统一化处理，反正你收工前还得再做调整。对我而言这很有效。全部绘制完成后，回头来确保它们都吻合栅格，并具有统一的风格——比如它们采用尖角还是圆角？同时，你也希望确认这个图标是否符合整体设计的风格，图标与app搭配吗？主屏图标能体现app的设计吗？

修饰图标

对于iOS7风格图标设计，我有几句话说。我知道iOS7提倡纤细线条的图标设计。但这也不是必须的，尤其对于主屏图标来说。不采用细线条，而采用饱满图形的大有人在，但它们和iOS7的整体风格也相当吻合。我不觉得细线条是唯一准则，你不用也没问题，尤其当你的产品设计不适合甚至根本就不采用它们时。别管它就好。

结论

创作iOS7图标不是什么难事。就此而言，我设计它们时，就像做其他类型的设计和图标一样。关于iOS7最重要的一方面就是风格，循着苹果的脚步，你也能轻松做到。关于这套新设计风格，有一点值得一提：为iOS7设计比拟物化设计要容易多了。

原文链接