推特图标怎么设计(推特的图案)

1、突变风格

多为单色突变，颜色过渡清新自然，是现在的干流规划风格之一。除用于图标外，突变风格可运用的场景十分多，如APP中的背景图、按钮等。

2、剪影风格

特点是精约、概括,视觉识别度良好，规划感强，常被用于APP的功能型图标中。剪影图标可分为线性和面性两种，线性为未选中状况，面性为选中状况。

3、长投影风格

通常会以纯色作为图标主体背景，该风格颜色对比度大，视觉冲击力强，通过长投影杰出主体，从而发明鲜明的层次感和空间感，常用于APP页面中的分类图标。

4、卡通风格

特点是可爱，富有亲和力，规划简洁而精致，视觉效果杰出，但风格小众，运用范围比较限制，常用于女人或二次元APP中。

5、轻质感风格

层次简单，用色素雅干净，采用轻投影、轻突变的办法规划。这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉。

6、拟物风格

iOS7以前，拟物风格都是U规划的干流，这类图标的特点是通过细节和光影复原实际物品的造型和质感，能给用户极强的代入感，用户可通过对实际事物的联想，快速体会图标表达的目的。

1. 创建新文档  

启动  Illustrator 创建新的项目文件“  文件”“新建” 或者 “Control-N” 。然后为新文件命名，设置尺寸，然后选择 像素  为  单位  和  RGB  的  色彩模式 。

接下来，转到 编辑首选项常规 并将 键盘增量 设置为 1像素 ，然后转到 单位 将数据设置如下图所示选项。接下来绘制的过程中你会发现这些设置将为你提供很大的帮助。

2. 创建图标形状

第1步

使用 椭圆工具（L） 画板上绘制一个 98 x 98像素的 圆圈,并创建 4px 深灰色 描边。

转到“  视图”“标尺”“显示标尺” ，然后在圆的四周创建参考线，作为活动绘图区域。

第2步

接下来，使用 矩形工具（M） 绘制一个 30 x 30像素 的正方形，在正方形的对角线之间绘制一个三角形。将此三角形移动到灰色圆圈的左下方。确保它没有超出绘图区域。

第3步

接下来我们需要做一些小调整。使用 添加锚点工具（+）  在三角形上添加一个新的锚点。将此点拖动到灰色轮廓上避免接触到圆圈内部。最后，用与圆圈相同的深灰色着色。

第4步

选择灰色圆圈并转到 对象扩展外观 ，将圆圈内部笔触变为填充，选择生成的灰色环形状以及三角形，然后在“  路径查找器”  面板中选择“ 联集  ” 将它们合并为单个形状。图标的主要形状就完成了。

第5步

制作“  图标形状  ”的五个副本，然后依照参考图像或进入“  对齐”  面板将它们排列在画板上。将每个图标形状移动到单独的图层并相应地命名它们，方便之后在“  图层” 面板中进行图标的调整。

3. 创建脸书（ Facebook ）图标

第1步

定位到“  Facebook图标  ”图层，选择 文字工具（T） 并使用 World of Water字体 ， 粗体 ，在画板上输入字母“  f  ” ，尺寸为  68pt 。填充与形状相同的填充颜色并赋予文字2pt的轮廓。

转到 对象扩展轮廓 两次以展开文本。然后在图标形状内移动字母，与图标形状对齐。

第2步

将图标形状和徽标保存为两个单独的形状，将它们合并为复合路径。进入“  路径 查找器”  面板中按“  联集” ，然后按“  对象”“复合路径”“制作”（Control-8） 。

4. 创建照片墙（Instagram）图标

第1步

定位在“  Instagram图标  ”图层上。使用 矩形工具（M） 画板上绘制 44 x 44像素 正方形; 然后转到 形状 面板并在 圆角半径 中输入 10 px 获得圆角（1）。用相同的深灰色填充此形状。

使用 椭圆工具（L） 绘制一个 25 x 25像素的 圆; 然后选择两个形状并选择 对齐 面板中的 水平对齐中心 和 垂直对齐中心 （2）。

选中两个形状的同时，在“  路径查找器”  面板中选择“  减去顶层  ” 获得复合路径（3）。

第2步

接下来，在图标上绘制一个细长的 46 x 2 px 矩形; 然后选择两个形状并在“  路径 查找器” 面板中选择“  减去顶层” ，然后进入“  对象”“复合路径”“制作”（Control-8） （1）。

在图标的右上方绘制一个 5 x 5 px 圆圈，选中两个形状后，在“  路径 查找器” 面板中选择“  减去顶层” ，然后选择“  对象”“复合路径”“制作”（Control-8） （2）。

第3步

绘制 18 x 18像素 的圆圈，使用相同的深灰色给它创建一个 2pt 的轮廓。选择图标形状以及此圆圈，然后在“  对齐”  面板中按“  水平对齐中心” 和“  垂直对齐中心 ” 确保它们完美对齐（1）。

保持选中状态，转到 对象扩展对象 以将笔划转换为形状（2）。选择两个形状并在“  路径 查找器” 面板中选择“ 联集” ，然后选择“  对象”“复合路径”“制作”（Control-8） （3）。

第4步

将完成的复合形状排列在图标形状的中心（1）。

此时，“  Instagram图标  ”图层上应该有两个形状：徽标和图标形状。保持选中它们，进入“  路径查找器” 面板中按“  联集” ， 然后选择“  对象”“复合路径”“制作”（Control-8） （2）将它们合并到新的复合路径中。

5. 创建推特（Twitter）图标

第1步

定位在“  Twitter图标  ”图层上，创建一个 27.5 x 27.5 px 的圆圈，填充与图标形状相同的深灰色。切换到 钢笔工具（P） 绘制小鸟的主体形状，如下图所示。

创建喙，绘制一个类似三角形的形状，然后转到 对象变换反射 ，选中 水平，  然后点击 复制 以获得下半部分。

最后，用 钢笔工具（P） 绘制翅膀的形状。选择所有形状并在“  路径查找器 ” 面板中选择“  联集  ” 将它们合并为单个形状。

第2步

将鸟标志移动到图标形状内，将其排列在中心位置（1）。

在“  Twitter图标  ”图层上，您现在应该有两个形状：徽标和图标形状。选择两个形状进入“  路径查找器” 面板单击 “联集” ，然后选择“  对象”“复合路径”“制作”（Control-8） 。

6. 创建优兔（YouTube）图标

第1步

定位在“  YouTube图标  ”图层上。使用 矩形工具（M） 在画板上 绘制一个 50 x 37像素的 矩形（1）; 然后转到 变形 面板并在 圆角半径 中输入 8 px 获得圆角（2）。

接下来，在圆角矩形的中心位置（3）绘制一个小三角形，然后保持选中两个图形，进入“  路径查找器” 面板中选择“  减去顶层  ” 获得复合路径（4）。

第2步

将徽标移动到图标形状内并将其排列在形状中心（1）。如果需要，将图标形状和徽标合并到新的复合路径中（2）。

7. 创建色拉布（Snapchat）图标

第1步

在“  Snapchat图标  ”图层上，绘制一个 27 x 43像素 的矩形（1）; 然后转到“ 变形” 面板并在“ 圆角半径”  中输入 12px ，获得圆角矩形（2）。

使用 直接选择工具（A） 选择形状的左下角和右下角锚点，将它们向外移动一段距离（3）。切换到 添加锚点工具（+） 并使用它在底部添加三个新的锚点; 然后移动它们并调整手柄以创建波浪形形的底部（4）。

使用 添加锚点工具（+） 在左侧和右侧添加其他两个锚点; 然后将它们向内移动，获得类似幽灵的形状（5）。

第2步

使用相同的深灰色填充上一步骤中获得的形状（1）。然后使用 钢笔工具（P） 绘制两条短线条作为手臂，并将粗细设置为 4pt 。选择“描边 ”  面板中的“  圆形端点” 选项以获得圆形末端（2）。保持选中手臂形状的同时，转到 对象扩展外观 将笔划变为形状（3）。

选择所有形状，然后在“  路径查找器 ” 面板中选择“  联集  ” 将它们合并为单个形状（4）。

第3步

将徽标移动到图标形状内，将其排列在图标形状的中心（1）。如果需要，也可以将徽标和图标形状合并到一个新的复合路径中（2）。

8. 创建矢量Pinterest图标

第1步

在“  Pinterest图标  ”图层上，使用 文本工具（T） 使用 Magnolia脚本字体 在画板上写下字母“  P  ” ，大小设置为 64pt （1）。转到 对象扩展外观 将文本转换为形状（2）。 

在 直接选择工具（A） 的帮助下 ，移动文字上的一些锚点获得尖形的底端，使其顶部变得更圆，使其右侧不那么圆（3） ，最后，你会得到一个更像原始徽标的形状（4），当然也不需要完全相同。

第2步

将徽标移动到图标形状的中心位置（1）。如果需要，可以将徽标和图标形状合并为新的复合路径（2）。

9. 保存图标

第1步

首先将所有图标整齐的排放在画板上

第2步

我们以Facebook图标为例。使用 矩形工具（M） 绘制一个 98 x 98像素 的正方形。选中图标和方形，选择 水平对齐中心 和 垂直对齐中心 确保它们居中对齐。

仅选择正方形并转到 对象画板转换为画板 以定义新区域。转到 文件导出另存为Web 来保存图标。选择您需要的文件类型， PNG ，透明背景或 JPEG ，然后点击 保存 。对其余图标执行相同操作以单独保存它们。

10. 创建图标通知符号

第1步

使用 矩形工具（M） 绘制一个  80 x 50像素 矩形，并用浅红色（1）着色。在“  变换” 面板中，选择“ 圆角半径” 输入 10px 获得圆角矩形（2）。

在圆角矩形的底部绘制一个小三角形（3），然后保持选中两个形状，进入“  路径查找器” 面板选择“  联集  ” 将它们合并为单个形状（4）。

第2步

在圆角矩形的左侧绘制白色的 11 x 11像素  圆圈 ，然后在其下方绘制一个 15.5 x 6像素 矩形。在圆角矩形中将 圆角半径 设置为 4px （1）。

使用 文本工具（T） 并使用 Sniglet字体 写入“  1  ”或者任意的 数字 ，大小设置为 27磅 。给它一个白色填充和 0.75pt 的轮廓（2）。

第3步

首先绘制一个 14 x 14像素 的圆圈，填充白色（1）。使用 直接选择工具（A） 选择底部锚点并向下移动一定距离获得类似花瓣的形状（2）; 然后在“  变换” 面板（3）中将此形状旋转 20度 。转到 对象变换反射 ，选中 垂直 并单击 复制 获取第二个形状，通过使它们的底部锚点重叠来对齐它们（4）。

保持选中两个形状的同时，在“  路径查找器” 面板中选择“  联集  ” 将它们合并为心形（5）。

最后，使用相同的字体和设置在形状的旁边输入数字（6）。

第4步

将创建好的形状放置在图标的右上方，完成通知符号。

完成

大家在社交聊天平台很喜欢使用emoji表情，你们知道emoji是怎么设计出来的吗？为什么emoji表情有微笑的大便？我们一起来看看它们的发展史。

使用手机或电脑与人联系时，如何表示“高兴”或“同意”?时下最流行、最方便的办法可能就是发个笑脸图标，对方立即心领神会。热衷者更是认为，用简单图标代替文字表达抽象概念，将成为一种趋势，在互联网上引发一场关于交流的“革命”。

最早源自日本

这种表情符号起源于日本，英文叫emoji，即其日语读音，意为“图文字”。它的创造者叫栗田穰崇，曾是日本都科摩通信公司一名职员。上世纪90年代，这家公司希望加强其寻呼机业务的市场竞争力，栗田想到把一些简单的卡通图案添加到寻呼机显示内容中，以吸引更多青少年用户。

栗田从漫画书和日本汉字等元素中获取灵感，用一支铅笔和一张纸，设计出首批表情图标，包括微笑的脸、音符等等。

“图文字”最早在日本网络及手机用户中流行，后被美国苹果公司加入其2011年底发布的iOS5输入法，自此开始席卷全球。目前，这套表情图标已被绝大多数计算机系统所兼容的编码“统一码”(Unicode)采纳，普遍应用于各种手机短信和社交网络。

表情也能变色

目前，统一码正式“收编”的表情图标有722个，苹果、Android等系统的用户都能使用。今年夏天，总部设在美国的统一码联盟宣布，将在现有体系中增添至少250个新的表情图标，包括下雨的云朵、黑色太阳镜、飘浮的商务装男士，以及颇有争议的竖中指等等。

11月初，统一码联盟又发布新技术报告，宣布将在明年发布的“统一码8.0”版本中增加改变表情图标卡通人肤色的功能。也就是说，笑脸、哭脸等表情图标的颜色将不再是如今统一的橘黄色，而是可以根据用户喜好，自行更改为红、黑、白等色。

在2013年的一项市场调查中，针对“你是否在信息中使用表情图标”这个问题，74%的美国受访者和82%的中国受访者给出肯定答复。

据统计，“推特”上使用最频繁的表情图标是笑脸，每天有超过4.7亿个笑脸符号被发送和接收。

文化差异难免

虽然绝大多数表情图标表意直白，但也有少数图标曾引起不同文化背景用户的困惑和误解。

例如，北美的用户们无法理解为何日本人会在表情图标中设计一坨“微笑的大便”。事实上，在日本文化中，“金大便”是被视为好运的象征，因为日语“大便”的发音与“运气”相似。

以上就是emoji表情的发展史，大家看过之后是不是有所了解了，谢谢阅读！

也许是因为我在视觉设计上没有太多经验，我发现平常在与视觉设计师讨论设计方案时，我们常常讨论的是：“我觉得这样布局很奇怪”、“我觉得A不太好看”、“这个地方给我带来了某种XXX的感觉”、“这样显示会不会给用户带来某种误解”……

不难发现， 大多数时候我们讨论的是一种捉摸不透的“感觉” 。视觉设计固然需要美感和源于直觉的创造力，但是 作为一个“设计”领域，它需要有更多理性的思考 。为什么应该是这样？这对用户的情绪和行为带来了怎样的影响？我们需要一些研究结果和经验法则作为参考，知其所以然才能做出好的设计。

为网站、APP或产品设计一个漂亮的用户界面需要技能、天赋和灵感的特殊组合。

但是用户界面的设计不是漂亮就行。它应该帮助用户去做他们需要做的事情。

为了创造出不但有吸引力，而且能够服务于用户体验的设计，你需要清楚地认识到你的设计决策是如何帮助或者阻碍你的用户的。

我们在UserTesting执行和分析过数十万个可用性研究，从中看过了很多有效的（以及不那么有效的）视觉设计决策。现在我们想分享一下我们从这些研究中学到的东西。

你将会学到如何做出对用户友好的设计决策，并且为你的公司带来最好的结果。

在设计师的工具箱中，颜色是最有力的工具之一。

你可以使用颜色去影响用户的情感，吸引他们的注意力，把他们置入适于购物的情绪体验中。颜色同时也是客户对一个品牌认知的主要因素之一。

由于可能的颜色组合是无限的，很难去决定哪种颜色会对你的网站或应用产生最大影响。去测试所有的颜色是不可能的，但是我们总结了关于颜色如何影响用户的态度和行为的一些技巧和趋势。

基础颜色理论的原理是雕琢用户体验的一个重要起点。

互补色可以用来吸引观看者的注意力并且创造活力，而类似色可以用来在设计中创造协调感和一致感。考虑一下在主页或者主屏幕上你可以如何使用互补或类似的配色方案，去为用户奠定基调并且让用户进入能够促使他们采取你期望的行为的心态中去。

当你在文本中使用颜色时，记住把两种低对比度的颜色放在一起会使它们非常难以阅读（不管它们是互补色还是类似色）。

在手机屏幕上尤其如此，因为用户更可能在户外或者明亮的地方使用手机以致屏幕比较刺眼。

（译注：原文描述了他们做的一个关于颜色偏好的性别差异的研究，但由于样本只有50人且差异不大，在此不译，感兴趣的同学可以查看原文。）

众所周知，颜色可以唤起情感，以下是传统上与颜色关联的情感：

很多著名公司在客户购买之前很久就已经用颜色唤起了特定的情绪。

客户也会将颜色和特定的行业建立联系，比如蓝色和科技，绿色和健康，红色和快餐。当有些公司为了匹配客户期望而选择用行业通用色时，有些公司发现反其道而行之可以快速让人留下印象。

举个栗子。在旅游业中，蓝色对于网站和应用来说是非常常用的。看一看下面这个网站主页：

蓝色代表着可信赖，这对旅游公司来说是一个好事。但是旅游网站使用蓝色并不是一个铁则。

维珍美国航空在设计网站时就选择了反其道而行。

当它与用户对航空网站的期待不同时，就会显得比较突出。选择一个意料之外的颜色可以有效地让用户体验到高兴，并且让他们记住你的公司。

你的网站或应用对有视觉障碍的用户来说是什么样子的？

大约8%的男性和0.5%的女性 患有某种形式的色盲。色盲有多种情况，但红绿色盲是最常见的。红绿色盲患者无法区分红色，绿色和具有相似值的黄色，尤其是当绿色中含有的黄色比蓝色更多时，比如下面的橄榄色背景色。

如果你不得不使用对色盲患者来说难以区分的颜色组合，你仍然可以通过提高颜色之间的对比度来保证可及性。比如下面这张图使用了非常暗的红色和非常亮的绿色，不管是否色盲都很容易看清楚。

还有一些关于可及性的要点：不要忘记那些可能在使用屏幕阅读器访问你的网站的用户。你是否曾经在填写表格的时候收到一个错误信息，比如“标红的字段是必填的”？这对于那些无法看到红色字符的人来说是极其糟糕的体验。最好避免在网站或者应用中提到颜色，并且提供更加具体的错误信息，比如“邮件地址是必填的”。

可及性测试工具

有一些很棒的工具可以帮助你测试网站的可及性。

有些优化转化率的专家会声称对按钮来说最好的颜色是大胆的、吸引眼球的红色，但也有人说绿色最佳因为绿色表示“开始”。

有大量的A/B测试显示了CTA按钮（CallToAction）的颜色改变会对转化带来极大的影响。HubSpot在以前仍叫做Performable的时候分享了这个著名的测试：

尽管他们原来预测绿色按钮会表现得更好，但是红色按钮带来的点击量高了21%。但是他们仍然提醒读者，这个测试结果本身不应该使所有人都把按钮变成红色。可能的解释是他们的用户就是喜欢红色，尽管其他的用户可能更喜欢绿色。或者，更可能的情况是，这个红色按钮得到了更多注意是因为它是这个页面上唯一的红色物体。

坏消息是并不存在一种魔法颜色能在所有网站上都表现最优。好消息是有一些经验法则可以帮助你有效地使用颜色。

对比是关键

这看起来很明显，但是我们还是要说：如果你希望用户点击某处，你要让它足够突出。如果你的网站或应用使用了很多橘色，用户可能不会马上注意到一个橘色的按钮，不管这个橘色按钮在其他公司的A/B测试中表现多好。

在我们的研究中，我们让用户指出他们在每个网站上首先会点击的东西。不出意料，用户更可能点击与背景形成强烈对比的CTA按钮。

明亮令人难忘

在上面提到的那个50人的研究中，我们问的最后一个问题是用户访问的哪个网站最令人印象深刻。

50%的用户选择了明亮的网站。有趣的是很多选择深色或者白色网站的用户是出于一些与设计无关的原因。比如一个用户认为Dropbox是最印象深刻的因为她已经有了Dropbox账号。

文字的主要目的是帮助用户去做你需要让他们做的事情——不管是探索产品，学习如何玩一个游戏，还是浏览一些令人愉快的故事。

遗憾的是，在网站和应用排版中有很多相互矛盾的选项，并且没有一个适用于所有情况的严格规则（否则事情也太简单了吧）。但是你可以做一些事情，以保证你为网站或应用选择的字体对你和你的用户有所帮助，而不是跟你唱反调。

文字的尺寸和布局会对在线阅读的体验带来巨大影响。年龄较大的人或者有视力障碍的人在面对小字的时候尤其痛苦。即使是视力正常的人盯着屏幕太久后也会觉得疲劳——当他们为了阅读不得不斜视或者放大时会感到激怒。

看看下面这个例子：对于台式机来说，正文较好的处理方式是每行50-75个字符，字号不低于16pt。

关于文本颜色和可读性，有两种不同意见：

应用多少对比度需要微妙的平衡。因为屏幕之间的差异太大，在设计师的屏幕上显得足够深的灰色在用户的屏幕上可能更淡。

在手机上有足够的对比度尤其重要，因为用户可能需要在户外或者明亮的地方使用。

W3C网站内容可及性指南 是一个不错的开始。他们设定了最小对比度的标准，保证适度低视力的用户能够阅读你的文本。你可以使用一个 对比率工具 快速找到你设定的对比度是否在合适范围中。

但是纯黑的文本（#000000）对于诵读困难者来说更难以阅读，并且经过长时间阅读后会导致眼睛疲劳。

很多设计师选择使用非常深的灰色或者实际的黑色（而不是纯黑），比如#0D0D0D，#0F0F0F，或者#141414。

一旦你选择了颜色，让真实用户在自然环境中使用任何你能想到的设备试用是绝对需要的。如果任何测试用户在阅读你的文本时遇到了麻烦，那么有理由相信你的客户正在遭遇相同的问题。

在传统的印刷排版中有个常识，衬线字体可以通过在水平方向上温和地引领视线而提高可读性和阅读速度。

但是关于这两种字体的实际区别的研究结果非常不确定。我们需要自己做试验，所以我们做了一个研究，让30个用户阅读两个除了字体之外完全相同的页面（A使用的是Arial，B使用的是Times New Roman），并测量阅读时间和理解程度。

我们得出的结果同样是难下定论的。

阅读非衬线字体页面的用户平均阅读速度高了9%，但是差异没有达到统计显著水平。并且，用户的理解率也非常接近：阅读衬线字体页面的用户的理解分数高了1%，同样也是不显著的。

唯一值得注意的区别是阅读衬线字体的用户抱怨的次数是另一组的两倍（表示段落很难阅读的用户在衬线字体组和非衬线字体组分别是6人和3人）。

所以衬线字体有什么问题呢？

首先，衬线改变了每个字母的轮廓，所以它们对有诵读困难症或视力障碍的人来说更难识别。

第二，因为这些水平线非常小，它们在低分辨率的老计算机屏幕上显示效果很差。（智能手机和平板上的Retina屏幕有更高的分辨率，会让衬线字体更容易阅读。）

这意味着我们在电子产品上只应该使用非衬线字体吗？

绝对不是。这只是意味着当你选择使用衬线字体的时候，要确保使用干净而准确的在线字体，并且——你知道的——用真实用户去测试你的选择。

你选择的字体是用户在你的网站或应用中的整体体验中的主要部分。考虑完整的情境，而不是只是在设计的时候依赖某些规则。

你的用户期待什么？

有什么更复杂的东西吗？乐趣？极简主义？在访问网站或打开你的应用之前，用户对你的品牌已经有哪些了解？你想要创造怎样的第一印象？

客户在使用什么设备？

对于大多数电子设备来说，你的用户会在火车上，在电视前，在阳光明媚的露台上阅读你的文本。确保保持他们的注意力，不要用难以阅读的文字把他们赶跑。

用户试图完成什么？

购物？学习？娱乐？确保你提供的体验与用户的需求（以及你的商业目标）相匹配。

如果你希望客户快速理解你的产品特点以便他们决定下单，那么选择让他们瞄一眼就能够理解的字体。如果你希望用一个长而吸引人的故事保持读者的注意力，那么选择让用户容易保持盯住页面的字体。

不管设计的是网站还是应用，在用户界面上的任何图标都应该为某个目的服务。当然，图标的存在是为了节约屏幕空间。但是更重要的是，图标应该帮助你的用户。如果得到正确的处理，图标可以帮你指导用户快速而直观地完成任务，而不需要过多地依赖文本。但是如果处理得不好，图标也会迷惑用户，把他们带向错误的路径，并摧毁他们使用产品的体验。

因为有很多的应用和网站都在使用令人迷惑的图标，我们想知道一个问题：让一个图标达到用户友好需要做什么呢？

我们做了一个远程可用性研究去探索移动应用上的图标带来的用户体验。我们观察了35个用户与一系列安卓应用上的190个图标的交互过程。有些图标是很明显的，比如放大镜表示搜索功能。有一些不太明显，比如一个旗帜表示群成员。有一些有文字标签，有一些则没有。

令人舒服的图标

有一些图标几乎是通用的。一个房子形状的图标会带你到主页或者主屏幕，一个购物车会让你购买东西，这都是相当安全的猜测。

在大多数情况下，图标不是一个用来发挥创意的地方。你可以依赖其他设计元素去传达品牌信息。你的图标的首要工作是指导你的用户到他们想要去的地方。用奇特的或者过度聪明的图标表示基本功能，会摧毁用户体验。保持简单就好。

令人迷惑的和矛盾的图标

当你使用有着矛盾或者多重含义的常用图标时，麻烦就来了。

想象一下你在一个应用中的一张图片下面看到这个图标。它表示什么？如果你点击了它会发生什么？这个图标是用来表示你喜欢某些东西，这非常清楚。

但是它会把这个图片或项目保存到收藏夹列表吗？它会通知某人你喜欢了它吗？它会塑造你的偏好并在你的信息来源中添加相似的图片或项目吗？或者它只是对支持的一种通用表达？

就像这个心，有很多图标我们常常在多种情境下见到，但是它们在不同图标中的的功能都稍有不同。考虑以下这些有多重含义的常用图标：

即使是在应用本身的情境中，这些符号也可能很令人迷惑，用户可能期待某个结果但却得到了一个不同的结果。

更别说iOS和安卓系统惯例的不同了。不同操作系统的栏图标可能非常不同，给用户带来了额外的困惑。如果你对这件事情不太确信，请阅读这篇描述了 分享图标的12种变化 的文章，其中几种很容易被误解为其他东西而不是分享。

过时的图标

很多常用的图标参照了过时的或者废弃的技术。很多应用中保留的保存图标，对于大多数使用过软盘的人来说没有问题，但很多95后会认为这些老人家们坚持使用这种图标是个怪癖。继续使用像软盘这种图标会让你的品牌对年轻用户群来说显得过时。即使是电话图标也可能需要演变，因为年轻的用户已经不太能够辨认出电话机了。

独一无二的图标

最棘手的图标挑战之一是当你的产品有独一无二的功能，不在分享、喜欢、上传图片、输入文本等标准动作之内时，应该怎么做。你如何使用一个简单的符号传达更加抽象的概念——比如观看你即将到来的旅游，向朋友发送一个有声读物，查看你的历史订单，或者追踪你的睡眠模式？

很多设计师在做尝试，很多设计师失败了。无论在你知道一个图标应该代表什么之后图标具有怎样的意义，对于第一次使用的用户来说它都可能带来完全不同的体验。

这并不是说如果你想要创造一个可用的用户界面，就不能远离通用图标。有一些独特的图标不管对新用户还是老用户来说都能有效地传达它们的意义。

推特著名的羽管笔图标就是很好的例子。尽管没有标签，在我们的研究中仍然有80%的用户正确地猜到它是干什么的。

针对于那些认为一图胜千言的人来说可能会有些失望：

我们很容易期望用户（尤其是手机用户）会到处点，高兴地尝试所有不同的图标直到他们发现了每个图标是干嘛的。

但实际上，用户会被新的用户界面吓到并且不会像我们期望的那样在他们的舒适区之外探索。在一个不熟悉的产品中，用户想要在采取动作之前就清楚地知道这样做会发生什么。

你的图标需要在用户点击之前为用户设定清楚的期望，而这通常意味着使用文本标签。

我们的研究结果：有标签VS没有标签

在我们的研究中，我们发现对有标签的图标来说，在88%的情况下用户能够在点击之前正确地预测将会发生什么。

而对于没有标签的图标来说，这个比率只有60%。

并且如果没有标签的图标在应用中是独一无二的，那么用户在点击之前正确预测将会发生什么的比例只有34%。

比如说，Meetup应用使用一个名牌图标表示小组活动并加上了一些额外的品牌识别。但是，因为一个空的名牌不会让大多数人想起活动或者通知，所以他们增加了标签。100%的测试参与者能够正确地猜测出这个加了标签的图标能干什么。

有一些设计师发现加标签违背了使用图标的目的，并且使用户界面显得杂乱。为了避免使用标签，他们在教程或者引导页面中加上了关于使用图标的说明，希望训练用户如何与图标交互。

虽然这可能是用来介绍独特的或者不通用的图标的好方式，但是 这不应该替代更加直觉化的设计。 记住一件事：用户常常跳过教程或者很快地忘记了他们学过的一切。教程应该是一个工具，而不是一个依靠。

在做一个新的设计的时候，跟随最佳实践比如高对比度按钮和可读性强的字体是一个很好的开始。但是最终，正确的设计决策是能够带来预期结果的那个。去发现你的设计决策是否给用户带来直觉并且以你希望的方式影响他们。

验证你的假设

把你的设计当做是你需要常常去验证、反证或改进的假设。这会给你信心去尝试很多实验并发现什么才能够带来最好的商业结果以及愉悦你的用户。

做定期的用户测试，去听用户如何描述他们在使用你的网站、应用或者产品时的体验。你将会听到他们描述你的品牌与什么情感联系在一起，你会看到很多因为令人疑惑的图标或者难以阅读的文字而让他们感到困惑的地方。

但是你不必等到有了一个开发完成的真实的产品才能去收集用户反馈；你可以在原型设计阶段就开始用户测试。这会帮助你验证你的设计决策并带着信心继续，或者快速发现和修复所有不起作用的设计。

如果你的设计已经实现了，使用A/B测试验证你的设计决策是否影响了用户行为，转化率以及以你期望的方式带来的收益。

这是当你在验证你的设计时可以询问用户的一些问题：

如果你的设计决策对用户起作用并且能够指导他们使用你的用户界面，那么用户就能够完成你期望他们完成的事情了。这不只是一个有效的设计——这也是一种巧妙的商业行为。

翻译自：