编者按：从iOS 9改版到iOS 10之后，锁屏页面的音乐控件变大了，用户体验明显提高。那么最佳的按钮触摸大小应该是多少？经过1.2亿次的实验后，这个结果被微软/苹果等公司采用，强烈推荐学习。

@平行煎餅 ：你可能说不出来，但你肯定知道这种感觉——当你触摸手机应用界面而它不能正常工作时候，当你感觉你只有精细的点击，才能出发正确的命令时，那种混合起来的沮丧和失败感。

但是，如果你可以自己创建用户界面，你知道如何合理避免这种情况吗？如果你知道可以通过创建可靠的触摸元素，来帮助您的客户减少错误，使用效率更快，使用感觉更开心吗？

这是可能的。我们来探讨一下为什么。

记得之前写过关于标签导航如何设计的一篇文章，大体上的介绍了几种类型，这周正好遇到一个关于标签导航的问题：产品经理要求在底部的导航中由原来的五个主功能增加至六个，交互设计师如何说服产品打消这个念头？本周就这个问题我详细说下当中的几个要点以及延伸出来的几个问题。

成功的产品通常是构建在一系列优秀的设计之上的，它除了拥有优秀的框架、系统的逻辑和恰如其分的运营之外，它还需要符合用户体验规则的细节，和几经验证的最佳实践来作为支撑。

今天的文章，我们来聊聊细节，从视觉反馈、文案和留白三个角度，聊聊这些同样能够影响整体体验还很容易被忽略的元素。

视觉反馈

在许多设计方案中，视觉反馈是很容易被忽略的组成部分，然而它是整个UX设计中，对体验影响非常大的元素。没有正确的反馈，就没有正确的互动。想象一下，当你和人沟通的时候，对方根本不会给你任何语言、表情和动作的反馈，这是何等的尴尬。UI界面同样是如此。

用户会对缺少视觉反馈的UI界面感到迷惑。

你需要给用户一个反馈信号，让他们知道他们的操作是成功了还失败，接下来要向上翻页还是向下滚动，等等等等。

视觉反馈的主要目的在于：

·确认APP或者网页已经接收到了用户的操作或者提交的信息
·传达交互的结果，结果可见也可理解。给用户一个信息反馈，告诉他们任务执行成功或者失败

让按钮和控件易于被感知

在现实生活中，按钮和各种开关都被设计成易于互动、易于感知的样子，这样的设计让人们更容易控制，也能让事情向着预期的方向发展。而当用户面对UI界面的时候，他们也有同样的需求，他们希望按钮和控件能够像这些日常的设计一样，易于被感知，操控。

不管是在APP还是PC，不管是Loading页，还是在音乐播放器中，进度条的运用都非常广泛，形式也多种多样，让人眼花缭乱。做为一个交互设计新手，项目中也经常碰到进度条设计，总有很多疑惑在心中挥之不去：

目标： 为什么会有进度条的存在？引入进度条的目的是什么？

类型： 结合使用场景，进度条类型有哪些呢？它们的目标是什么？需要展示哪些信息？

形式： 进度条形式多种多样，怎样从本质上区分呢？

运用： 实际项目中如何选用合适的进度条呢？

下面列出了3种常见的进度条样式，我们将结合这3种进度条，一步一步梳理，希望可以帮助大家获得更加清晰的认知。

网站能承载多种多样的内容，但无论是哪种内容，通常都会遵循一定的信息架构。在这其中，故事是很特别的一种类型。讲故事，往往能以更叙事、更情感化的方式，将内容传递给用户。

一个好的故事，往往始于笔端，但是最终呈现，还是要依靠精巧的设计。那么设计是如何讲好故事的呢？今天的文章，为你分享一下创造故事的7个维度。

1、图片

首先，想要讲好故事，要通过设计在视觉上吸引用户。这一切要从干净清晰的视觉设计开始。壮美的图片，有趣的插画，惊艳的视频，都会抓住用户的注意力，并给予用户第一印象。

在视觉上足够突出的图片，搭配以文案，一切开始拥有了画面感，而故事因此而诞生。从照片到色彩，从文字到细节，故事所传达出来的信息和气质，和整个视觉设计应该是保持一致的，而好的故事，能够带着用户一路走过来。

编者按：说起usTwo 你可能没听过，但《纪念碑谷》你肯定玩过。这个全球顶尖的设计工作室还做过哪些酷酷的产品？他们是如何帮助设计师和客户合作的？想加入它们有哪些要求？这期直接让usTwo 的设计师为大家揭秘。

我们请到了设计工作室 usTwo 的设计师 Avalon Hu。她曾先后就读于台湾大学生物产业机电工程系和密歇根大学人机交互专业，曾在 R/GA 和汤森路透任职。本期我们聊了聊她如何从迪士尼秀场后台开始，转专业成为用户体验设计师；设计 Agency 的工作流程；usTwo 独特的企业文化和公司结构；最后她也与想加入设计 agency 的同学分享了自己的建议。

设计风格是一种很虚的东西，对于大部分的 UI 设计师来说，都是如此。

相信很多人都是在一家小型的互联网公司做设计，估计还是公司唯一的设计师，同时对设计风格又拿捏不定，总感觉是跟着产品经理或老板的思路去做设计。比如老板的要求是“大气”，谁 TM 知道这“大气”指的什么鬼？

即使花了不少时间去研究其他公司的产品，依然做不出领导满意的视觉稿，最后还被各个岗位的同事指点着去修改你一把屎一把尿喂大的稿子。

我上面也说了，其实这种事情（讲述设计风格）对于视觉设计师而言是一种很常见的现象。我身边也同样有很多设计师出现这个问题，不知道如何向领导或客户讲述自己的设计风格。

说个现象，仔细想想自己是不是这样的：我们在做视觉评审的时候，设计师讲述的常常是文字对齐、线条、高斯模糊、图片大小等视觉表现，有时候甚至沉醉于 icon 的角度及尺寸的问题。面对于产品经理与程序员的质疑只能说：我觉得这样更好看、这样比较适合我们产品的风格…之类的话。要知道，这些理由在如今这个以显性数字指标为衡量标准的互联网时代已显得苍白无力。

实话实话，想要把设计风格讲清楚，的确不是一件容易的事。但绝对要避免从感性的角度来阐述事实的这种习惯，毕竟现在的移动产品从视觉表现力方面正在逐步降低要求，这种环境的变化也是要求视觉设计师应该主动去加强设计思路的原因。

为什么要用这个颜色，为什么要用线条、模糊、留白、卡片、阴影…说这么多干嘛？别人能懂？即使听懂了，他也会从他的角度来告诉你：那我觉得这个阴影不要会更好。你怎么回复？

动效是如今UI设计中的重要组成部分，也是目前最热门的设计趋势之一。在之前的《在现代网页设计中，动效有哪些常见的用法》这篇文章中，我们探讨了动效对于交互和用户的重要意义，动效在不同的环节发挥的作用越越来越大。而今天我们要聊的是光标悬停，这也是近年动效设计的热点之一。

正是由于Material Design 和苹果所引领的动效设计风潮，许多曾经有过的设计技巧和元素正在逐步回归，而悬停就是其中之一。但是相比于曾经那些闪烁弹跳的，现如今的光标悬停来的更加微妙，更加强调功能性和体验。

和其他动效相似，光标悬停让交互的引导性更强，有的还带有预览的作用，它的使用范围非常广，大到全屏，小到提示和导航元素，不一而足。

接下来，我们通过实战案例看看，光标悬停目前有哪些创新的玩法。

首页动效

模块大家应该都不陌生，任何一个完整的界面，都会有多个功能模块，而每个模块内有相应的组件，每个组件中又有相应的元素，其中任何一点的变化，都会使用户对产品的认知发生改变。

编者按：什么是模块化设计？它有哪些优势？该如何运用模块化设计？本文腾讯CDC 的高手带你一窥模块化设计的奥妙。

在看组件和元素之前，我们先了解在他们之上的一个概念

模块

模块大家应该都不陌生，任何一个完整的界面，都会有多个功能模块，而每个模块内有相应的组件，每个组件中又有相应的元素，其中任何一点的变化，都会使用户对产品的认知发生改变。