打造良好UI的32条建议(上).pdf

打造良好 UI 的32 条建议（上） 今天的话题，来自 G ，关于提升页面易用性及转化率。本文带来的建议和观点，较适用 于Web 服务和移动应用的 Landing 页面。我们可以看到越来越多这样的页面，有些相当出彩，市面 上也有不少相关的设计展示汇总文章。而本文则从设计原则和实践的角度带来一些思想武器供我们 学习参考。 全文共 32 个要点，较长，今天先上一半，下周补完。接下来进入译文。 1.尝试单栏布局 单栏布局可以让你对内容叙事进行更好的控制。 从上到下的方式能够以更符合读者预期的方式对他 们进行引导，而多栏布局很有可能对页面的主要目标产生干扰作用。试着通过故事来引导用户，并 在底部放置最重要的 Call to Action 。 2.赠送礼物，而不是急于成交 向用户赠送礼物，这不仅是友好的表现，而且是一种基于互惠原则的说服策略。所谓互惠，顾名 思义，如果你通过赠予象征性的好处来表示友好，那么将来对方也会对你进行回馈。 3.整合相似的功能，以简化 UI 我们会在无意当中创造出多个功能类似或相同的元素，不奇怪，这是基本的熵原理 —— 事物总是在 向混乱的方向发展。留意那些名称不同但功能重复的元素，这会增加用户的认知负荷，使他们产生 疲劳感。通常， UI 的复杂度越高，用户的学习曲线就越陡峭。考虑不定期的对产品 UI进行评估，对 那些功能类似的元素进行整合。 4.展示社会认同，而非自吹自擂 社会认同是另一种可以直接提升转化率的说服策略。他人对你产品的谈论和赞许，将会使 Call to Action 在用户看来更具吸引力。试着使用一些知名机构或媒体颁发的鉴定证书，或展示相关数据， 这些都是很好的社会认同证明。 5.多次展示 Call to Action 这种方式特别适合于单栏布局的长页面，或者也可以让 Call to Action 在多个页面中多次出现。你自 然不想在一个页面中一口气展示 10 个同样的 Call to Action ，然而如今长页面越来越普遍，让所有内 容都保持在 折线以上“ ”的原则越来越不受用。你可以试着在第一屏当中放置一个不那么强的 Call to Action ，然后将作用相同但视觉形式更突出的 Call to Action 放置在内容底部。当人们看过所有内 容后，他们会停下来，思考一下接下来做些什么 —— 就在这里，完成转化或关闭交易。 6.为交互元素使用更显著、更具对比度的视觉样式 例如配色、层次、对比等视觉风格要素可以帮助人们更好的理解和使用你的产品界面，让他们知道 自己现在在哪，接下来可以去哪。为了清晰的呈现这些信息，可点击元素 (链接、按钮 )以及可选择 项目 (选项 ) 、普通文字内容的视觉风格必须彼此形成显著的差异，并且在全局范围内保持风格的一 致性。在下面的草图范例中，我使用蓝色来表示可点击元素，黑色文字表示已选择或当前所在位置 标题。如果你能正确的使用视觉风格，用户将能更好的通过这些视觉线索浏览界面。绝不要让这几 类视觉元素的呈现方式含糊不清，否则你就是在给用户找麻烦。 7.推荐，而不是罗列选项 在展示多个产品选项时，可以尝试重点推荐其中的一种，因为很多用户就是需要一点推动。我相信 有相关的心理学研究可以证明，选项越多，人们做选择的难度就越高，某个选项被选中的概率就 越低。推荐多个产品中的一种，突出展示其相关信息，使其权重高于其他几个选项，有用。 8.提供撤销功能，而不是弹出确认 设想一下，你刚刚点击了一个按钮或链接。撤销功能尊重人类的基本意图，允许首先平滑的产生相 应的行为。而另一方面，弹出确认的形式会质疑用户的意图，致使用户对自己要做的事情产生疑虑 。我愿意假设，多数时候，用户的行为都符合自己的意图，误操作只是少数情况。当用户需要反复 执行某个行为的时候，低效、丑陋的弹出确认就会一遍一遍的呈现，非常不人性化。尝试通过撤销 功能让用户感觉自己正在充分控制局面，尽量不要通过确认来提出质疑。 9.声明目标用户类型 你的产品是面向所有人的还是精确的锁定某类人群？直言产品和服务的目标用户类型，这