认识达内从这里开始

在强调「以用户为导向」的今天，许多设计都是围绕着用户需求来展开。专业的视觉表现力自然是设计师的看家本领，但同时也不能忽略了B面：设计需要通过引导用户行为，让用户跟随你的设计思维，使之跟随你的预期构思进行操作，更好地满足用户需求，从而把握设计的主动权。

本文将从以下5点出发和大家讨论。

1按钮设计和拇指驱动

按钮的样式直接影响用户的操作行为，所以为了提高产品的使用效率，我们需要让用户快速点击按钮。如下图：MT(Move Time)为移动到目标中心所需时间，W(Width)为目标宽度大小，D(Distance)是从起始位置到目标中心的距离。

对应到具体APP上：MT为完成这个操作所需要的时间，W为按钮宽度，D为底部到按钮的距离。

费兹定律认为：

当：D一定时，W越小，MT越大;W越大，MT越小;

当：W一定时，D越大，MT越大;D越小，MT越小;

让我们来转化成设计上的语言：

一般情况下，按钮越大越容易点击，在不受输入键盘影响的前提下，按钮离屏幕底部越近越好。

比如QQ公众号的设计，关注按钮基本在屏幕的最底端(而且面积大)，有研究数据表明：75%的交互都是拇指驱动的，而拇指悬停的位置刚好是屏幕的底部区域。拇指提供了最方便的移动范围，而出了最小的力。这种生理上的放松是贝尔实验室的研究者们在设计界面时特别提出的，这点同工业设计师们一致。

这里给大家普及一个知识：大部分人误以为，手指在屏幕上的热区是永恒不变的，但其实手指热区会根据设备的变大而缩小。因为手掌支撑设备的重心靠后走了，所以拇指操控屏幕的范围也就变小了。这也就解释了为何我们通常把按钮设计在屏幕的最底端。

如果要把费兹定律应用到我们的设计中去，我们就要尽可能的缩短D的距离(距离屏幕底部的距离);反之亦然，就是说：如果你不希望用户做某个操作，你就可以增大D的距离，阻止用户的这个行为。

下面是一个完美的案例：

苹果系统的关机操作区域在屏幕的最上方，目的就是增加D(从起始位置到目标中心的距离)并在在此基础上又增加了从左到右的交互操作，实打实的又增加了一段横向距离!

另外再说一个原理：

如果你希望提高某个按钮的点击率，那么按钮旁边就不要再有其他的操作行为(比如：按钮或者文字)。但如果你希望用户做操作前阅读某些信息或作出思考(协议勾选等)，那么你可以将该信息设计的离按钮很近。

拿QQ和微博的登录注册举例：

QQ的「登录」按钮周边没有任何其他的按钮和文字，因为QQ是一个独立的工具，并无任何第三方账号登录的选择，所以「忘记密码」和「用户注册」设置在页面的底部，一方面方便用户在需要这两个功能时的操作，一方面也完全不会干扰用户对「登录」的操作。

微博的「登录」和「用短信验证码登录」在位置上很接近，而「忘记密码 和 登录遇到问题」与「用短信验证码登录」位置上也很接近(当然视觉权重逐级下降)，这样用户在回忆不起密码时就可以迅速有效的选择「短信验证码」的登录方式或者进行「忘记密码」的操作。因为微博的「登录」和「用短信验证码登录」在功能上极其相似，所以位置也很接近，方便用户操作。

2格式塔原则

视觉元素的排布和呈现对用户的体验有着很大的影响，如果界面中元素的规律性很差，看起来将会是极其混乱的，用户无法获得有效的指引，更不要说进行正确的操作。

格式塔原则：

相近(Proximity)：距离相近的各部分趋于组成整体。

相似(Similarity)：在某一方面相似的各部分趋于组成整体。

封闭(Closure)：彼此相属、构成封闭实体的各部分趋于组成整体。

连续(Continuity)：我们倾向于完整地连接一个图形，而不是观察残缺的线条或形状。

简单(Simplicity)：具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。

根据格式塔原则我们可以看出：相近性、相似性、封闭性、连续性、简单性、在这两个看似简单的界面中得到了精准的运用。

3颜色是有进退性的

颜色是有所谓的前进色和后退色的，并且在众多领域得到了广泛应用。例如，广告牌大多使用红色、橙色和黄色等前进色，这是因为这些颜色不仅醒目，而且有凸出的效果。正确的使用颜色可以明确视觉层级，使界面结构清晰，营造视觉氛围。

「支付宝股票」，即使不明确说明，我们也知道，灰色背景上面的白色卡片是在页面布局的最前面，即使白色卡片上又叠加一层灰色卡，我们的视觉也不会觉得突兀，因为灰色自带「后退属性」。

弹窗出现的时候加黑色蒙层凸显弹窗，这也得益于黑色的「后退感」增加了元素的「对比度」。

暖色上放置一个冷色，即使冷色确确实实的放在暖色的上方，也会有种凹下去的即视感。而冷色上放置一个暖色，冷色更退，暖色更进，颜色的对比会显得更加强烈。

在一项研究中，专家们发现，大部分人都会觉得底部有深色阴影的图片看起来更自然。重物在下，轻者在上的放置方式是一种本能，这是模仿物理界中重力将重物拖至底部的原理。

4尽量不要使用 是否 作为操作文案

信息传达有效性原则要求：设计应当清晰准确，易于理解。所以，关键性操作我们要提供明确直观的信息反馈，尽量避免让用户误操作。

用户操作到这一步的时候，对该信息产生了疑惑：不能查看订单?确定退出?是?否?是什么?是不能查看订单吗?那我是要点是还是否?大大降低了用户对产品的体验。

而正确的做法是不让用户思考，写出你具体操作的文案，并根据右手拇指法则，右边放置引导用户操作的行为，左边放置相反操作。

用户不应该也不需要想任何东西

5图文的排布关系

人的阅读方向是从左到右，呈现F或Z字型的浏览模式，所以要考虑信息的因果顺序关系：重要的标题性信息放左边，解释的、渲染气氛的信息放右边。

什么时候适合「左图右文」?

电商单品促销：人对图形的感知度要高于文字，所以电商设计中对与单个或者单类的商品展示选择先商品后商品名称和描述内容。

商城商品列表：图片表达信息更直接、帮助用户更快的了解商品信息(颜色、款式、造型)，从而更快的找到自己想要的。并且将更为吸引用户视觉的元素置于前面也更符合人们一贯以来的排列习惯。

如果理论不够直观，那么我们映射到生活当中，在实体店购物的时候，映入眼帘的肯定首先是商品本身、然后通过关注商品的详细信息(价格、材质等)最终决定买哪种商品。最根本的原因就是帮助用户更快的找到自己想要的商品，也是遵循了人们的购物习惯。

在设计过程中，我们也倾向于把相同属性和结构的内容设计成同样的形式，保证设计的一致性可以减少用户的认知负担，使内容更好的被感知。

什么时候适合「左文右图」?

新闻资讯类：人的视线顺序是从左往右的，所以先看图片再阅读文字，左图的视觉点遵循了Z字型浏览方式。但右图对用户而言就会产生一个问题，因为移动端的尺寸都很小，图片所包含的信息有时又太过于隐蔽，用户一眼根本看不出是什么意思，之后通过阅读文字才知道那张图所传达的意思，这时候用户可能会再一次查看那张图片，这便造成了用户的视觉反复。

综上所述：左文右图适合用户量较大，其内容有可能来自非专业编辑的用户，配图质量无法保证，同时其产品属性又多以文字为主;

但是也不是所有的资讯类产品都适合这种版式

细分类APP，其内容质量高，主要由一些专业人士编辑的APP，也可选择左图右文。

我倾向于用报纸和杂志来比喻这两类样式：从起源来看，报纸的出现是为了将国家发生的事件告知市民，杂志来源于罢工，罢课以及战争中的小册子;在内容方面，报纸更重视时效性，杂志更注重美容的知识趣味性;在外观设计方面，报纸多数只是简单的排版，而杂志多为优美的版面设计以吸引受众的注目。该理论同样适用于图文的上下结构。

品牌大促类：文案信息需要被强化，引导用户视线，强调先后关系，有木有发现，像这种「品牌行销」，且主推的类目非单一时候，强调的都是「文字信息」。

写在最后：

不同的时期设计师需要具备不同的思考维度，跳脱纯粹的设计思维，以用户体验产品设计思维，承担更多的责任。把自己对于设计提升产品价值的思想传播出去，让自己的设计作品有量化支撑的说服力，让不同职能的人员认识到设计的价值。

刚入行的小伙伴们，紧跟形势，能让你用最快的时间抓住趋势，快人一步成为高薪大牛。悄悄告诉你，加入达内UI免费训练营，是你成功的捷径哦~