本文大纲
一、好的收藏体验这么做
二、互动信息隐私的保护
三、确定按钮放左边or右边？
四、手机实体键分布的合理性
五、静音键存在的必要性
六、经典的旋钮式交互
业内有很多人觉得手势交互没必要拿出来深究，觉得用户使用产品的过程中，自然而然就会去使用拇指，进行手势操作。但这种说法，就跟「用户心理模型」类似。当然，对于用户来说没必要深究手势交互，但作为设计师，如果不了解其背后的逻辑，那么就无法解决产品设计背后的一些问题。
所以我们今天，好好聊一聊手势交互这件事。你会发现，原来你以往观察或以为的设计问题，都是手势交互在作祟。
我们以前经常听到「以用户为中心做产品设计」这句话，意思是产品需依附于目标用户的真实场景来设计。与此同时，其实还有一句话在提醒着交互设计师如何做产品设计，就是「以触摸屏为中心做产品设计」。
为什么呢？因为用户从始至终都是在跟触摸屏做接触，不管换了什么设备，他们都是要通过屏幕与产品进行交互的。
我们可以在这里思考一下手势的意义。
手势的出现改变了什么？可以回想一下 iPhone 4 发布的时候，当看到这样一台屏幕上没有任何按键的设备，是不是会觉得不可思议？键盘，电话接听按键等都消失不见了。
人们在使用 iPhone 这样的产品时，不再需要去强行记忆任何固体按键。触摸屏与手势的结合，帮助我们隐藏不必要的元素，帮助用户聚焦于内容，在有限的物理空间获得更多的信息。
所以用户通过触摸屏与产品进行交互，跟通过键盘按键与屏幕进行交互是完全不同的。手势交互更自然且更。
手势操作对我们来说如此自然和直观的主要原因是因为它们类似于与真实对象进行直接交互。譬如你用遥控器控制电视上的按键，需要通过上下左右这样的操作来定位指示器，而触摸屏直接就可以通过手指点击内容进行操作。这是完全不同的概念。
综上所述，我们能知道，手势的三个要素：简洁、易用、直观。
所以我们通过一些常见的手势行为，就可以在产品界面上很轻松的完成任务。
常见的手势行为：
当然，我们经常也会遇到一些背离手势交互的产品设计，虽然也是点击、拖动等等，但操作起来总是不那么顺心。这里面有一个关键点就是，手势直观性。
有数据表明，苹果的 3D Touch 使用率非常低，就是因为直观性太差，用户不知道通过这个操作能带来什么结果，且使用它需要长按，经常会同时呼出「卸载」，那么效率也就会降低。久而久之，用户就不去使用了。
正面例子如下图，滑动与文案结合。
这样一看，用户马上就能知道这个操作行为如何触发，紧接着就产生行动，然后会反馈结果。
这也是手势交互的核心：触发，行动，反馈。
对比 3D Touch，触发没有提示，行动后时常有两种反馈结果，相比起来就不那么友好了。
除了上面聊的这些，手势交互还能从另一方面来提升效率，就是拇指操作区域。
我们都知道，现在手机屏幕越来越大，甚至比最早屏幕大了一倍以上。但是很多设计师并没有转换思维，跟进这个趋势的变化。
这里给大家普及一个知识：大部分人误以为，手指在屏幕上的热区是永恒不变的，但其实手指热区会根据设备的变大而缩小。因为手掌支撑设备的重心靠后走了，所以拇指操控屏幕的范围也就变小了。如下图。
结果是，手机屏幕变大，双手持机的用户变多，但依然还有 75％ 的用户是使用拇指来触摸屏幕的。因此，术语「拇指驱动设计」应运而生。
我们上面说到，在使用一些产品的时候，经常会遇到使用起来不顺心的情况，然后说了「手势直观性」的概念。但这里，还有个更重要的原因，就是「拇指操作区域」。
拇指操作区域被分为三块内容，分别是：易于触达，难以触达，以及介于两者之间的区域。
看下图。
所以在设计界面时，要注意界面的主要操作元素是否处于用户易于触达的范围之内。
如果你仔细观察并思考过，也会发现，iOS 的产品界面中，「返回」按钮就位于「难以触达」的区域。原因是产品人员本身也不想用户返回或退出，而是让用户聚焦于当前页面，想要返回，那就需要付出一点成本，什么成本？操作成本。
有人会说，由于 iOS 可以从手机的左边缘向右侧轻扫以获得返回效果，因此在大多数 iOS 产品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用户都知道这一点，也不是所有产品都支持这一特性的。而且手势交互的进化本来也就是为了提升用户操作的效率，所以本质上他们并不矛盾，只是相比以前，我们现在的操作更快了。并且「右滑」返回，本身在手势操作中相比「点击」也是更具操作成本的。
当了解了手势的一些意义，以及拇指操作区域对于产品设计的重要性之后，我们就可以通过一些案例来做一个全局分析了。
1. 内容在上，操作在下
许多人设计 App，但是没人研究过 App 为什么要这么设计。
比如，为什么起初要把标签栏放底下呢？关于这个问题，当初我也是问了许多人，而基本都只是说这是官方设计规范。这相当于是一句废话。
通过翻阅多方资料，我发现在工业设计领域有一条重要的基本设计原则：内容在上，操作在下。
比如在使用电脑的时候，操作在下意味着使用者在操作过程中，手指始终处于界面下方，而内容在上面，就不会出现手指遮挡内容的情况。
如下图的键盘操作提示：
基于此，相信你也知道为什么标签栏在下方了吧？
另外，为什么 iOS 设计规范建议将「编辑」按钮放置在界面右/左上方的位置呢？
界面右/左上角的位置对拇指来说显然是不友好的。然而，这样做的原因也是显而易见的：编辑功能会让数据发生变化。将这类控件放在难以操作的位置上（与左上角的返回是一个道理），就是一种防御性的设计策略，可以在一定程度上避免因为太容易产生误操作而导致的破坏性的结果。
通过这一小段之前聊过的内容，你们会发现，手势与拇指操作其实在驱动着产品设计。下面我们来聊个大的案例。
汉堡包菜单，也就是侧边栏导航，Facebook 早期测试显示侧边栏导航让用户使用率降低了一半。
我们一起来看看市面上给出的三类说法。
1. 可见性太低
默认状态下，用户是看不见侧边栏的，除非点击了侧边栏的弹出按钮。所以这种情况下，里面的功能都是用户脑袋里已知的，但很可能都想不起来。比如，现在你回想一下知乎底部 5 个标签分别是什么？或者微信右上角「+」里面有哪些功能？是不是要想一会儿，才能记起来？甚至还是想不起来。
之前我在文章里写过，用户对于功能的使用一定是「所见即所得」，而不是「心向往之」。用户只会注意自己看到的信息，而不是凭借记忆或想象来使用产品。
底部标签栏就很好的解决了汉堡包菜单的「可见性」问题。
2. 效率较低
效率较低主要在于操作频率，大家看下面两组图的对比。
第一张图，当用户从首页进入到个人信息页面，只需要两步；而第二张图，则要三步。
这里多一步看起来似乎影响不大，但如果现在要从个人信息页面到「标签 3」的话，第一张图也只需要两步，第二张图还是需要三步，当频繁去使用这样的产品后，用户的整体效率就会下降，体验也会随之降低。
3. 与平台模式冲突
大家应该知道，在 iOS 的操作页面中，通过手势可对 tab 进行左右切换，而侧边栏除了通过点击菜单按钮展开之外，也可以通过右滑弹出。这里面有什么冲突呢？看下图。
当页面聚焦在「标签 2」时，右滑除了能回到「标签 1」，同样也很可能会切出侧边导航栏。
这样的手势冲突，导致页面层级与功能导航的优先级混乱了。
无论是导航还是控件，当它们组成一个页面后，它们的操作就会有优先级。比如下面这个例子。
如果你对标红的分段控件比较熟悉，就知道，它是可通过屏幕滑动进行切换的。但是在「短信」里，它是不能通过滑动屏幕进行切换的，因为用户可对单条信息进行左滑做删除或其他操作。所以当页面操作模式存在矛盾时，我们会将子层级操作优先于父层级操作。
譬如你进入朋友圈，是不能马上回到首页的，这时候页面层级较深，产品人员要将用户聚焦于页面本身，如果直接能返回到首页，页面层级和产品架构就会混乱。
类似的例子还有很多，我这里就不继续列举了。
所以从「短信」的例子可以看出，当控件与控件之间的手势发生冲突时，我们要考虑优先级，将内容优先于页面来处理。那么回到上面的例子，分段控件与汉堡包菜单的手势发生冲突时，很明显我们要优先分段控件的操作，而禁止掉汉堡包菜单的右滑手势。结果就是，效率又低了。
4. 小结
这三类，如果你认真思考里面的关系，其实就会发现，它们的共通点就是与拇指的联系过于被动或直接被切断了。
它们的核心点就是拇指与触摸屏的关系。
如果你现在还不能深刻理解汉堡包菜单的劣势，那就想一下去看一下现在的产品，其中「我的」、「个人中心」或「更多」其实都是变相的汉堡包菜单。
在「我」这个标签页里，这一系列功能列表，无非就是另一种模式的汉堡包菜单，只是这里呈现的都是不重要的功能，并不影响用户使用这个产品。回想一下，你是不是很少，甚至从来没用过这里的某几个功能？再跟手势结合，就会发现，「我」所处区域并不是容易点击的区域，这就是它效率低下的原因了。现在能懂了么？
当传统的确认弹窗逐渐被手势操作取代，大家就应该察觉到：以往从电脑迁移到移动设备上的交互行为已逐渐被改善。
我曾经写过一篇文章，叫「取消按钮的设计逻辑」，讲了「左取消，右行进」这个原理。意思就是当我们在设计弹框的时候，用户已经习惯这样的操作路径，所以不要轻易更换位置以混淆用户的认知。再从手势的角度来说，就是右边更容易点击。
后来有同学说到，但是有些特殊场景，譬如删除资料，而产品人员不希望用户删除，于是把删除放在左边，取消放在右边。毕竟右边更容易点击，所以位置换了会比较合理。
这是错的！
我们不能通过改变用户使用产品的常识来将产品人员的想法置于用户之上。当用户已经形成「左取消，右行进」的认知之后，违反这样的一致性，去换位置是很危险的。所以出现了 action sheet，来解决一些产品关于 alert 无法解决的问题。
如图。
大家要记住的是，当页面逻辑与手势操作产生逻辑冲突时，我们不是去否定以前已经被验证且正确的内容，而是通过创新，来解决这个冲突。这就是拇指驱动设计的一种方式。
包括我们以前在移动设备上选择删除某项数据，都会弹出警告框，询问我们是否确认删除。这种方式会打断我们的操作行为，久而久之，用户已经对此交互方式习以为常，或者说免疫了，但这种弹框的方式始终被认为是不好的一种交互手段。所以侧滑删除，已经被更多产品功能用来取代没必要弹框的操作。
也许很多人没思考过底层原因，或者仅仅只是觉得其相比弹框显得更友好。其实这个行为是基于手势交互做了相应的优化，让用户操作起来更加方便。
到了这里，我再举个所有人都熟悉的例子，就是轮播图了。
轮播图最早出现于网页端，后来被大量商家模仿，以至于到移动端还备受各产品设计人员的欢迎。但其实很多人对轮播图的使用方法都是错误的。
下面来看轮播图与手势的关系。
试想：你的轮播图有 6 张 Banner，你要翻到第 4 张，无论是往前翻还是往后翻都要产生 3 次交互行为。而大部分产品的用户在界面停留的时间不会这么久，更不会看完你 Banner 的内容。以至于有研究表明，大部分产品里，除了第一张 Banner 的点击率能达到 83% 之外，其余的点击率都非常低。
有人说可以点击下面的原点指示器做跳转，这么小的点，你觉得点击它现实么？所以手势交互与轮播图是相互矛盾的一种设计方式。
所以当运营策划了一个活动，而你就往顶部的轮播图里塞，这个行为就已经注定这个活动的用户参与度是很低的了。除了个别电商产品，他们以卖广告位给商家作为盈利点，但即便如此，我相信这个广告位除了第一张图的点击量稍高外，其他图片的点击量相对于产品本身的用户体量比较而言还是很低的。这也是为什么部分产品把轮播图规则改为用户进入首页随机展示轮播图页面，而不是强制指定于显示第一张的原因。
毕竟轮播图在顶部，用户需要通过拇指长时间的在「延伸区域」进行操作，那么使用率自然就降低了。
如果你的产品有很多活动是在同时期进行的，那么我给部分产品的建议是放一个活动主题入口，如下图。（当然，这要视情况而定，并不是通用的。）
我们现在看到的搜索框基本都是放在屏幕顶部。
为什么呢？
市面上对这个问题的解释是这样的：用户已经被现在的产品训练得在界面的顶部必须看到一个搜索框，设计师打破这个常规就要承担风险。
看完这篇文章，你就已经知道，对于用户来说，由于屏幕顶部离拇指很远，处于难以触达的区域，在体验上很不好。所以搜索框成了认知上应该在顶部，但操作体验上又不应该在顶部的一个设计。
但是回想一下，会发现大多数 App 的主要内容都是位于易于触达的区域。所以当看到高德地图把搜索框移动到下面来之后，就能知道，拇指驱动设计的概念被越来越多的人认识到其重要性。
地图类产品把搜索框移到下面来的首创应用不是高德，应该是 Lyft。
瞧，拇指驱动设计，多酷~
《上瘾》里有句话：当人们不由自由地做出下一个举动时，新的习惯就会成为他们日常生活的一部分。
当手势充分地发挥了作用，辅助用户操作或实现功能，它就成了用户不可分割的一部分。
今天通过对手势意义的解读，以及拇指驱动设计的解析，再加上这些案例的拆解，我相信你能更好地理解为什么手势交互这么重要了。
交互设计师对于「触摸屏」，必须有深刻的认识，才能理解设计背后的逻辑。
如果这篇文章对你有帮助，记得点个赞，后面我好持续输出。
文章来源：优设
交互手势是用户操作的重要部分，交互手势的设计好坏非常影响用户体验，那么，交互手势的设计上对于容错性和逻辑性需要注意什么？
随着用户体验被愈发的重视，更多的 APP 偏向于使用多手势优化用户的操作流程，降低使用阻力。
点击某个确定的按钮的手势操作虽然被普遍使用并被用户熟知，但是增加更快捷的手势操作可以大大增大操作热区，提高操作效率，如下图。
然而，我们可以发现由于不同产品的设计师对于用户体验的理解不同、交互层面的思考不同，导致设计的交互手势也不同。
有时同一种操作在不同的 APP 中交互手势也是不统一的，这无疑增加了用户的学习成本和记忆成本。
举个例子，iOS 端的得到和有书的播放页的打开和关闭方式。
得到有两种方式打开和关闭页面，用户可以通过点击控件或上滑控件打开播放页，通过点击收起按钮或下拉页面关闭播放页。但是有书只有一种方式打开和关闭，用户只能通过点击控件打开播放页，通过点击返回图标关闭播放页。
这让习惯了使用得到的我去使用有书时，感觉非常别扭，每次都尝试用得到的手势去操作但是都失败了，失败后我下一次并没有记住仍然用手势去操作，如此反复令我相当沮丧。
容错性是一个很大的话题，今天我们仅仅在交互手势层面上讨论。
上面的例子中，有书并没有设计滑动手势去打开和关闭播放页，那么我以我的经验去进行的滑动滑操作在有书这个产品中就是错误的和不被产品识别的。但是这种手势又广泛存在于大量的音频播放 APP 中，如喜马拉雅、荔枝 FM 等。
一旦用户从这些 APP 迁移到了有书，本来养成的操作习惯在有书就失效了，用户就会感觉“这个 APP 很难用，用起来很不舒服”，进而可能放弃有书转而投向其他产品怀抱。
与手势设计类似，这也是为什么现在的同种类型的 APP 的信息架构设计越来越同质化，当我们打开淘宝、天猫、京东时我们有时感觉就像是同一个 APP ，本质上也是为了降低用户的迁移、记忆和学习成本。
如下图所示，提高手势的容错性对用户的意义。
很多优秀的产品考虑到了上述问题，设计了多手势来优化用户体验。
举个例子，在 APP Store 的首页点击一个推荐卡片后进入详情页，由于详情页是直接由卡片放大转场的，不同于传统的新页面右侧进入和从底部弹出。
在用户的使用习惯和认知中新页面如果从右侧进入就可以通过右滑返回，从底部弹出的话就可以下拉返回。因此，当用户面对卡片放大进入新页面这种全新交互时可能会疑惑如何返回，对此理解不同的用户可能会尝试右滑，也可能尝试下拉。
APP Store 的设计在此就有很好的容错性，用户可以通过三种方式返回首页，分别是、右滑返回、下拉返回和点击叉号返回，这不但降低了用户的记忆和学习成本，也便于不同习惯的用户使用。
针对不同的场景，手势的使用也会有不同。
一个很好的案例是知乎的评论：知乎的评论的关闭方式有三种，分别是下拉、右滑和点击叉号。
用户观看评论的场景有两种，第一种是只想看一下精选评论然后关闭，第二种是被评论吸引后一直往下看。当用户单手操作不方便点击叉号时，下拉对应的是第一种用户；右滑对应的是第二种用户，不管用户看了多少屏的评论，随时可以通过右滑关闭评论（因为用户翻阅了很多屏评论后需要下拉到第一条评论时，下拉关闭评论手势才会生效，所以第二种用户一般不使用下拉去关闭评论）。
可能你会心生疑惑：“第一种用户也可以使用右滑来关闭评论呀”，确实可以，但是对于人的操作习惯来说，上下滑动会比左右滑动更方便。
还值得讨论的是苹果自 iPhone 6s 开始加入的新交互方式 3D Touch，它允许用户通过更大力度的重按呼出情景菜单快捷地使用高频功能而不用先打开 APP，对于追求效率的用户来说简直不要更方便，但是对于不支持 3D Touch 的机型则无法使用情景菜单。
因此，在生活中我发现这样的现象，很多使用惯了3D Touch 的用户换到无 3D Touch 的苹果机型后很不习惯，总是尝试去重按但是是无效的。
其实在很多安卓手机上也有情景菜单这一功能，它巧妙地将卸载也加到了情景菜单中，因此用户只需要通过长按就可以获得所有需要的功能，而不是像苹果那样长按是卸载而重按是情景菜单。
我猜测苹果为了适配所有机型，提高容错性，从今年的发布会的 iPhone 11 和iPhone 11 pro 开始，取消了 3D Touch，转而使用 Haptic Touch （有震动反馈的长按）代替。当你长按某个图标时，感受到震动后松开，即可呼出二级菜单；如果震动后仍不松开，则进入到卸载 APP 时的抖动状态，使得之后的即使不支持 3D Touch的机型可以使用便捷的情景菜单了。
对于不支持 3D Touch 的老款机型会不会在 iOS 13 更新后也可以使用 Haptic Touch 呢？
如果一致统一的话，容错性将大大提高，我们将拭目以待。
不仅仅是 iOS ，Android 的版本 Android 10经历了 6 个测试版迭代后正式发布，我们发现交互手势是 Android 10 的一个巨大亮点。Android 10 在第三版内测系统开始引入全局手势操作，用户启用后，屏幕底部便不会再出现虚拟按键和导航栏，只会剩下一个指示条，上滑返回主屏、侧滑返回上一层的操作逻辑也均和 iOS 保持一致。
这可能标志着安卓手机一直以来在国内各家厂商的各种创新手势的割裂生态中即将重归统一，并和 iOS 保持一致。
这种妥协将大大提高在用户使用一款新安卓手机时的容错性，同时降低了今后用户在两大系统之间的迁移成本。
再谈谈逻辑性，在交互手势的层面上，如果用户能够通过某个手势进行某个操作后，按照逻辑，用户也可以通过反向的手势或对应的手势进行逆向操作。
比如，在微信首页下拉调出小程序页面，之后可以通过上拉返回首页。点击加号呼出更多操作，再次点击加号收起更多操作。
如果违背了用户的心理模型和逻辑性，用户就会感觉到混乱和不适。
这里举一个反例， Uki 的个人主页可以通过点击或下拉底部的固定底板收起更多信息，但是收起后只能通过点击展开更多个人信息而不能上拉，不符合逻辑与用户的心理模型。
如下图所示，逻辑性对用户的意义。
有的时候，我们会发现为了提高容错性，我们会牺牲一部分逻辑性。
就像上文提到的知乎关闭评论弹出框，逻辑上它是从底部弹出的，但是不但能够下拉关闭还可以右滑关闭。尽管右滑关闭有些违背用户的心理模型，但是确实给用户带来了很多操作上的便捷。
我们需要考虑的因素包括使用频率、危险程度和特殊体验。
1）考虑不同平台的硬件系统和操作系统特性
由于硬件与操作系统差异，iOS 系统支持很多手势，但是安卓系统在手势支持方面就不如 iOS 丰富。
安卓硬件设备的差异比较大，不同安卓手机厂商会在安卓系统的基础上自定义系统的手势操作，因此对于手势的支持也有较大的差异。对于这种情况我们需要熟悉相应平台的规范，做到心中有数。
2）考虑所选的手势的学习成本和记忆成本，用户是否已经被教育
如下图所示，尽管设备支持的手势数量多不胜数，但是日常使用 APP 时，大部分用户习惯使用的手势很少，比如单击、双击、滑动、上拉、下拉、双指扩张和收缩等。除此之外的手势教育成本和学习成本很高。
一般比较通用的功能是没有必要在此处创新的，但是如果一些特殊的操作确实需要加入时，我们就需要考虑下面的问题。
a. 如果没有教育成熟，考虑加入教学或搭配简易的操作方式
对于我们需要加入的手势操作当前用户并未被教育成熟时，我们需要考虑加入手势教学，具体的手势教学类型下一部分会详细讨论。
然而，大部分情况下用户的记忆是短期的，教学内容可能会被快速遗忘，下次用户使用 APP 时仍然不会使用特殊手势。此时我们应该将一些比较难以记忆的手势操作搭配一个简单的手势操作。
比如 QQ 阅读的下拉拟物绳灯切换夜间模式的手势操作设计，其考虑到了有些用户在现实生活中并未见过拟物绳灯，并不知道是要进行下拉才能触发操作。因此，QQ 阅读贴心地搭配了一个简单的点击操作，用户通过点击绳灯也可以切换夜间模式，如下图。
b. 考虑所选手势是否可能导致冲突和误操作，如果导致了，考虑如何避免和折中
最常见的手势冲突情况就是 APP 的手势与操作系统的全局手势冲突。
解决方案有两个，一是避免设计与全局手势一致的手势操作，例如 iOS 的在屏幕边缘右滑返回、全面屏机型的底部上滑退出应用等全局手势操作；二是仍然设计与全局手势冲突的操作，但是将全局手势部分禁用或以其他的方式区分开。
如下图有书播放页的案例，由于进度条滑动控件过于靠左，导致使用 iOS 全局右滑返回手势时有时会产生误操作，即本来想要右滑返回却不小心滑动了进度条。
这种情况下我们可以标注一个右滑手势禁用区域给开发工程师说明情况，将此情况避免掉即可。
误操作指的是，我们设计的手势操作与 APP 内的其他操作或系统全局手势操作接近导致用户触发了非预期的操作。比如 iOS 端的知乎被吐槽的一个右滑返回手势操作，经过研究发现，由于 iOS 端的知乎在浏览回答的页面设计的右滑返回的热区过大，导致用户上滑浏览的时候如果手指的滑动角度变化幅度过大一不小心就触发了右滑返回，再次进入回答后又需要翻页很久才能找到之前离开的地方，很影响体验。
我觉得知乎可以减少热区，将热区调整为 iOS 全局的右滑返回区域即可，如下图所示。
当然，产品设计需要平衡与取舍，如果减少了热区是否会影响其他用户的体验还需要考虑和调研，两者并无绝对的对错
当新手势无法直接让用户感知时，我们需要加入一些手势教学帮助用户快速上手使用。
1）手势教学方式
a. 浮层和动画引导使用静态或动态的手势图片或气泡示例告诉用户使用哪种手势进行操作
相比于静态，动态比静态更为直观和易学。
b. 内容隐喻通过微妙的视觉线索暗示用户此处可以通过某种手势进行操作
由于教学内容难免具有干扰性，对于高级用户来说是不必要的，但是对于初级用户又是必要的，因此以这种内容暗示的方式使教学极为轻量化，在低干扰的情况下使得用户学习了手势操作。
如下图，哔哩哔哩在打开第一篇文章时会平移显示下一篇文章的框架，暗示用户可以通过左右滑动切换文章。
再比如陌陌在打开点点功能时，会在用户进入页面的时候播放一个动画，暗示有很多卡片叠加在了一起，用户可以通过滑动切换卡片。
2）教学的出现时机
a. 操作前当产品中设计了不容易感知的新手势，在用户操作前，通过教学让用户了解和学习新的手势。
b. 错误操作后对于一些与用户的心理模型和习惯不一致的手势，提前预测用户可能输入的错误手势，在用户错误操作后进行提示，规范用户的操作方式。
如下图，由于知乎旧版本是通过左右滑动切换回答的，新版本调整为上下滑动后，需要纠正用户使用习惯。因此，当用户仍然使用左右滑动时，会出现浮层提示用户正确的手势进行教学。
以上是日常思考和总结，有不恰当之处欢迎指出。希望本文在大家进行手势设计的过程中能够帮助做出合理的决策。
文章来源：人人都是产品经理
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
是能点还是不能点呢？”这是当用户在面对一些操作按钮时，大脑中所迟疑的问题。
按钮越多，做决定的时间就越长。用户必须仔细看每个按钮，才能确定哪个是他们需要的。对于按钮的任何不确定性，都可能会导致他们不敢操作或误操作。
设计师可以把按钮的优先级设计的更加直观以减少这样的情况发生。当用户注意到哪个按钮与他们的任务目标更契合时，就能帮助他们快速做出决定。这篇文章就是介绍一些这样的设计技巧，通过简单的调整使得按钮变得更加直观有效。
在App中，一个常见错误就是按钮的排列顺序偏离了用户的阅读习惯。他们将优先级最高的按钮放在最前面，期望用户能首先注意到它。但其实只要按钮足够突出，视觉分量够重，用户就会注意到它，而无视它的排列顺序。
按钮顺序不是为了提供可视性，而是为了要提率。在最前面放高优先级的按钮会导致用户自上而下的阅读习惯被打断，看到按钮后还会继续阅读下面的文字，然后再回过头来找前面的按钮进行操作。
不要让用户返回再次检查按钮，而是让他们以自然的阅读习惯看完所有的内容后，按视觉比重快速进行选择。
通过将优先级高的按钮放在底部，让它处于视觉阻力最小的路径上，这使得这个按钮可以更有效率的被点击。此外，底部位置是手指最容易达到的区域，这进一步提高了效率。
App上的另一个错误是只使用文字来表示按钮。设计师使用文字按钮来表示优先级较低的操作。但是对于用户来说，这是一个糟糕的选择，因为纯文本没有一个按钮的外观，这可能导致用户会忽略了这些操作。
纯文本按钮会让用户迟疑到底是按钮还是内容，从而造成混淆。这种不确定性可能会导致他们直接跳过这些按钮。
纯文本按钮不仅让人感到疑惑，在操作上也不容易点击。将文本内容放在按钮框中，可以使得按钮更容易被点击和注意到。
与纯文本相比，描边形式的按钮是降低优先级的更好方法。它们使每个选项都易于识别，以便用户能选择他们所期望的目标。
高优先级的按钮应该是最容易被识别到的，它是直接指向用户最需要的目标操作。如果不确定优先级，请考虑哪些操作会使得用户朝着目标前进，哪些操作会使得用户回退。
在这个例子中，”付款”具有更高的优先级，因为它顺应着用户的目标流程。但不大清楚”查看购物车”还是”继续购买”的优先级是如何。
“查看购物车”操作让用户查看已经在购物车的商品，然后继续结账。”继续购物”操作将用户带回到远离结账的产品页面。
通过思考这些操作，可以清楚的看到”查看购物车”具有中等优先级，而”继续购物”具有较低的优先级。判断的理由是哪些操作使用户朝着他们的目标前进，哪些操作使他们远离目标。
前进的操作总是会比回退的操作优先级更高，因此，它们应该被设计地有更强的视觉重量和更高的颜色对比度。
颜色是一种增加按钮权重的有效方法，因为它从文本颜色中脱颖而出，吸引了用户的注意力。当按钮的颜色与文本的颜色相同时，提示性就没有那么强了。为优先级更高的按钮使用不同的颜色来辅助用户进行快速决策。
如果对每个不同优先级按钮使用相同的颜色，用户将不知道哪个优先级更高。而使用不同的颜色只会让用户更加困惑，不知道这些颜色到底意味着什么。不仅如此，每个按钮使用不同颜色，还会让视觉权重重新变得一样。
秘诀就在于使用相同的色相颜色，但改变饱和度和亮度就能改变这个按钮的优先级了，使得它比高优先级的按钮更轻。现在按钮的视觉比重有了区分，一下子就变得清晰了很多。
为了增加对比度，可以使用反色。在主按钮的深色背景上使用浅色文本，而在中等优先级按钮上使用浅色文本。这样就使得高优先级的按钮具有最亮的文本和最强的对比度。
用之前说的几个方法，已经足以区分优先级，但还可以做的更好。每个按钮设计的越直观，让用户的思考就越少。
在每个按钮文本上使用相同的粗细以表示相同的重量，最好根据优先级不同去强调不同的文本。尝试改变文本的粗细，优先级越高的按钮使用最粗体，而优先级的文本则不加粗，这样，按钮文本也有了不同的优先级，用户在阅读这些文字内容的时候就能感知到。
在这个例子中，我把”付款”这个按钮文字使用了粗体，使它变得更加醒目和明亮。”查看购物车”使用了半粗体，”继续购物”使用了中等。所以，按钮文本此时也有了一定的视觉权重。”查看购物车”中的”3项”没有加粗，因为它是补充信息，不代表具体的操作。
最后一个技巧是一种更加全面的思考，它将使按钮可供盲人使用。色盲的人是无法通过颜色来区分按钮的视觉重量的，他们还需要清晰的视觉符号。
给高优先级的按钮加上一个图标能够起到强调作用而与其他按钮区分开。当用户浏览时，他们往往更关注视觉元素而不是文本。使用图标按钮的方式能够确保引起用户足够的注意力而快速选择到高优先级的按钮。
如果删除了颜色和外框，用户仍然能够识别付款按钮，图标与文本一样，也能够起到说明的作用。
如果用户要花很长时间在操作按钮上，或者按钮的点击率很低，那就可能是按钮设计的不够直观。如果遇到了这样的情况，请尝试使用文中所说的这些技巧来优化操作按钮，或许你将会在前后版本中看到非常大的差异。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
通过点击、滑动、滚动和键盘快捷键来交互的日子吗？它们不再是唯一的交互方式,一起来了解一下~
还记得浏览网页时，只能通过点击、滑动、滚动和键盘快捷键来交互的日子吗？而现在，它们不再是唯一的交互方式，当苹果推出第一款iPhone时，多点触控技术成为了主流，用户们了解到，他们不仅可以在界面上指向、轻点还可以捏合、展开和滑动。手势成为新的操作方式。
一、UI中手势的力量
手势非常自然和直观，他们与真实世界反应类似。
对于使用手势，这里有三个主要的理由：
● 干扰少
App内，手势控制使用地越多，在屏幕上出现的按钮就越少，这样可以留出更多空间给更有价值的内容。这使得app以内容为重点，并让用户在没有障碍，或者在分心的情况下也能进行最重要的操作。
● 使用简单
一个手势一旦被用户发现和学习使用就会让用户在体验感到愉悦，而且手势可以减少步骤，来达到提高交互体验的目的。例如，当你需要删除一些项目时，用“一次点击删除一个”的方式的很浪费时间的，但是如果使用“滑动一下，删除一个”的滑动手势，就更简单快速，让用户更加愉悦。
● 无缝交互
虽然按钮看起来对于触发响应更加有用，但手势具有更大的潜力，使内容的交互更加直观。
二、手势的缺点
但同时，手势也存在难规范、易混淆等缺点。
● 增加用户负担
大多数手势学起来或者记起来不自然也不简单。举个例子，在大多数APP，一个手指的手势就对应一件事，用两个手指做一个同样的手势意味着另外一件事，其他对应事件的手势还有很多。
● 缺乏反馈
在大多数情况下，手势不会留下任何路径记录。这意味着，如果做一个手势但没有得到反应或者得到错的反应，这样就只能获得很少的信息或者不能获得有帮助的信息去解释为什么这么做。
● 缺乏一致性
大多数手势在app中还不是标准统一的。他们对于用户不总是显而易见的。甚至一个简单的滑动手势，在众多邮箱app内的邮件项目中也有着不同的工作方式。例如，在Apple Mail 中，删除一个未读项目，你应该向左滑动这个没有打开的邮件，然后界面会出现选项来删除这个项目。在Gmail里，向左滑动可以把邮件标记为未读状态。
三、手势成为移动端UI成功的关键
1.如何选择好的手势
如果你的界面里要使用手势，那你就必须要去了解你所在的市场以及你的目标用户会去使用的app。要尝试在你的app里使用和它们相同类型的手势。这样，你不仅基于你的目标市场的用户的行为优化了你的界面，还让用户从一开始就能舒适的使用你的app。
2.手势教学
虽然每个移动端app都必定会用到手势，但是要让用户很自然的就能知道如何操作(使用什么手势可以干什么)却一个挑战。可触摸的界面提供了很多条件来使用自然的手势，例如轻点、滑动和捏合来完成任务，但是不同于图形界面的操作，手势的交互用户往往是看不到的。
因此，要让用户能发现手势是很重要的。你需要确保你提供了正确的线索----通过视觉引导来帮助用户更容易的发现如何与界面进行交互。
3.如何在情境中教育用户
教程和演示的做法相当流行。在许多app中加入教程意味着要想用户显示一些说明内容来介绍界面。然而，UI教程不是介绍app的核心功能的最优雅的式。
良好执行的UI手势总是可以在易于实现视觉提示和渐进式披露的游戏中找到。这显而易见，最好的游戏可以使人们随着时间的推移来学习到技巧，而不是靠指导他们。例如，PuddingMonster 的游戏机器完全基于手势，但是他们允许用户得到基础的信息，他们不需要做很多的猜测。他们可以展示动画场景，让用户马上知道要做什么。
四、使用动效来传达手势
手势总是与移动app中的动效相关联。动效在维护用户体验中起着非常重要的作用。作为设计师，你可以利用动效来传达出用户可以进行某个操作。当动效与手势一致时，用户就会意识到自己与该物体正在相互作用。
动效在向用户提供视觉反馈上是非常重要的。没有动效，用户就不能获得足够的信息反馈，不能确定他们是不是成功地完成了手势动作。
这里有三种流行的基于动效来帮助用户学习手势。
第一种：动效视觉提示
显示一个在执行某个操作时如何和某一个界面元素进行交互的预览。它的目的是在手势和操作之间建立联系。例如下图中的这个游戏app是完全基于手势操作的，这个app让用户不用去猜测就能知道该如何操作。用动画来传达功能信息能立即让用户清晰的知道该怎么做。
第二种：内容的梳理
内容梳理是通过微妙的视觉线索来暗示用户进行手势操作。例如下图中卡片的展示，它表明这张卡的背后还存在着其他的卡片，这清晰的表明了可以滑动卡片。
第三种：功能可见性
你可以让你界面里的某些元素具有很明显的可供性来让用户知道这个是可以进行某种操作的。例如下图中点击相机icon后锁屏就会从下往上弹起，展示出在下面的相机功能。
五、总结
手势是一种强大的互动模式。移动设备已经从砖块发展到由我们手指驱动的复杂计算器。触摸和手势交互在使移动体验更加简便有趣方面，有很大的潜力。
设计一款移动端的app一定要思考手势设计。手势应该起到协调和节约时间的作用。为了设计一个有意义的手势，你应该规定一个动作以及与其配套的一个手势。提供反馈意见也非常重要，对于可能要进行的行动要有明确提示，并进行手势的引导。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
交互设计中的“所见即所得”原则
“所见即所得”原则我记得在之前的文章中就提到过，但是没有详细说明。最近在体验一些产品时，发现很多交互设计上的坑都可以归纳到“所见非所得”上。
所见非所得
我们可以首先来看一下“所见非所得”的案例：上周寄件去北京，在填写收件人信息时候，发现了一个“智能填写”的功能很有意思。所谓“智能填写”就是OCR识别技术，系统可以识别图片上的地址。例如，你的收件人地址正好是身份证上的住址，那么你就可以上传身份证照片，系统直接识别照片上的地址而不需要手动去输入。
用户具体的操作流程是：
1 拍摄/上传照片；
点击“上传图片”按钮，用户可以选择拍摄或者上传相册里的照片，框选合适的识别区域；
2 系统识别并展示结果；
系统会自动识别图片中的地址信息，并且在输入框中展示，如果有识别错误的地方，用户可以手动编辑修改；
3 用户确认；
用户对地址信息确认无误了，点击“智能填写”按钮，输入框里的地址信息会自动回填到地址栏；
了解了大致流程，我们来看一下两款竞品。产品A和B都提供了“智能填写”的功能，但是在交互设计上存在差异。产品A，当用户上传完图片才会出现“智能填写”按钮；产品B是全程展示“智能填写”按钮的。我个人更加偏爱产品A的处理模式，因为当用户都没有上传图片时，给用户展示“智能填写”按钮是没有任何意义的，这里的“智能填写”虽然可见但是不可得，用户也不能点击。当然有人会说，虽然不可点击，但是展示了也没什么问题吧？当然有问题，它会给用户带来两个痛点：
1） 增加了用户的学习成本；
对于新用户来说，产品A肯定更加容易上手。因为新用户一进入这个页面，只能看到上传图片的按钮，用户明白了我首先要上传图片。产品B是直接一股脑的把所有选项展示出来，用户不知道这些选项之间的联系和操作顺序。
2） 阻断正常操作流程；
给用户展示了他们本不应该看到的元素，可能会阻断正常的操作流程。用户如果还没上传图片，就点击“智能填写”按钮会直接报错，“所传参数不能为空”，用户哪里看懂这是什么意思。
之前在火车站取票，前面排队的大婶跟我说她的票取不了。我凑过去一看，发现她没有关闭购买保险的弹框。因为这个弹框没有盖住底部“确认打印”按钮，用户误以为还是可以点击的，导致无法正常完成取票流程。
了解到这些痛点，那么如何才能在交互设计上实现“所见即所得”原则呢？我总结了两个方法：限制和就近。
限制原则
了解限制原则，我们需要回答两个问题：
1）为什么要限制？
因为多才要限制，多会带来哪些坏处？内容多，用户处理不过来；选项多，用户挑花了眼；时间多，优惠券没有有限期限制用户懒得用。
2）限制什么？
限制用户与界面交互的触点。还是以智能填写为例，当前界面有三个触点：上传图片按钮、输入框、智能填写按钮。这三个触点分别对应着步骤一、步骤二和步骤三。如果我们在步骤一的阶段给用户提供了步骤三的触点，保不齐会有用户尝试去交互，这样的无效操作会触发报错场景。所以当用户处于一个线性的操作流程中，根据用户所处的阶段，分析用户可能进行交互操作，提供交互触点，保证用户看到的触点都是可交互的。
罔顾用户的操作阶段，一股脑的把所有触点都提供给用户。设计师倒是很省心，但是用户却会很糟心，他们需要花时间去判断和分析每一个触点的作用以及它们之间可能存在的联系。这个工作应该由我们代劳，我们来分析用户处于不同阶段所需要的功能触点。
举个知乎的例子，知乎有一个“向知友提问”的功能。但是这个按钮只会在用户滑动搜索结果页3屏后才会出现，因为滑动了3屏，我们可以猜测用户对当前的搜索结果不满意，引导用户去提问。
当然限制原则不仅仅是限制交互触点，还可以应用到产品逻辑中，帮助用户解决很多问题。我曾经遇到过一个场景，公司上线了一款优惠券，用户点击“立即领取”按钮即可领取。但是有些用户会被风控判定为了风险等级过高，导致领取失败。对于这个报错文案，我们改了好几版，但是每次都会收到用户的投诉。我们无法直接告诉用户，你是因为风险等级过高导致无法领取，因为用户风险等级过高是因为开通了某项业务。当时开通的时候，我们并未告知开通后会被判定为高风险用户。所以为了不必要的麻烦，最好的办法就是进行判断前置，如果判断用户为高风险用户那么就直接不展示该优惠券。
就近原则
从上面的阐述中，我们可以发现“所见即所得”原则最根本的目的是为了节省用户的操作时间，提升产品易用性。广义的操作时间还应该包括了用户对于反馈的感知时间，因为只有充分理解系统反馈的信息才能进行进一步的操作。如何帮助用户快速的消化反馈的信息呢？因为反馈是系统对于用户操作的回应，那么我们可以让操作和反馈尽量的贴近一点，这就是就近原则。就近原则可以分为两类：位置就近和形式就近。
1） 位置就近
所见即所得，这里的“所见”即代表着用户的视线，而用户的视线总是停留在上一个交互触点附近。
例如，还是寄件的场景，要填写发件人信息，我懒得重新填写一遍地址，正好看到输入框右边有一个附近地址的功能。我点了一下，没有反应，又点了几下才发现底部出现了一个“附近地址”的列表。这里的交互触点是“附近地址”的文字链接，我的视线也是停留在附近，没有注意到下拉列表已经出现在底部。操作和反馈完全不在同一视觉区域。
2）形式就近
形式就近，这里的形式特指反馈形式。目前最通用的反馈方式是弹框，弹框的弊端也就恰恰在于它的“通用”上。所有类型的反馈都可以用弹框来承载，用户无法立刻感知到弹框所传递内容是什么。既然反馈是系统对于用户操作的回应，而用户操作又是一个个交互触点所触发的。如果我们可以通过改变触点自身形态的变化来完成信息的传递，用户感知起来会更加容易。
举个例子，用户在输入登录密码的时候，其触点是输入框。当用户密码输入错误的时候，我们可以通过抖动输入框的方式告知用户输入错误，这里抖动是现实生活中“摇头”的映射，我们都知道摇头代表着否定的意思，用户不用看到弹框上的“密码错误”几个字也能明白密码输错了。
总结
以上就是我对交互设计中“所见即所得”原则的总结和分析，如果你有不同的意见和看法，欢迎留言或者加群讨论
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
没有用户会拒绝任何产品的锦上添花，而功能性动效对于产品来讲，在满足功能效率的同时，能够带来更多额外的附加体验，是一种相对比较容易引发体验峰值的途径，下面和大家介绍 功能性动效的定义和类型。
功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味，本文就来谈谈这四种功能性动效在移动端的使用。
定义：功能性动效是一种嵌入 UI 设计中微妙的动画，有着明确、合理的目标
功能性动效的主要类型：
页面空间转换；
视觉信息反馈；
功能操作引导；
品牌与趣味。
类型 1 ：页面空间转换动效
1.1 主要作用
页面空间转换的动效，主要是为了让用户通过理解页面中空间转换的动效，了解到界面和元素之间的空间关系，并随时感知到空间元素的变化。
告诉用户对象和窗口的状态是如何变化的，防止页面转换视盲，在空间上也能营造更好的印象。
1.2 使用场景
页面空间转换类动效，主要使用在轮播 banner／页面切换/导航菜单切换。
1.3 优秀案例赏析
案例 (1) ：轮播 Banner 中的空间转换动效
案例 (2) ：导航菜单切换
导航栏的的转换是指 App 中导航菜单状态的变换，有不同级菜单之间和同级菜单之间的转换，解释菜单之间的层级关系，让用户明白菜单转换的过程中到底发生了什么，下一步操作具体如何去做。
类型 2 ：视觉信息反馈动效类型
具备良好用户体验的产品，都应该给用户的每一个操作都提供反馈，无论成功与否，反馈会使用户觉得自己与屏幕上的元素进行真实互动。即便隔着屏幕，也能让用户看起来是在直接操作，增加操作的可控性真实自然的体感。
2.1 主要作用
视觉信息反馈类动效主要是为了告诉用户目前操作到哪里了，时时状态怎么样，缓解用户对应用处理速度的量化感知。
具体表现为：
确认系统接收到用户的操作；
确认（或拒绝）用户的行为;
明确告知用户当前操作的进度／状态，缓解用户的紧张／焦虑感。
2.2 使用场景
系统信息提示／状态反馈／操作结果反馈／进度提示／加载提示。
2.3 优秀案例赏析
案例 (1)：系统提示反馈
系统反馈，当系统状态发生重要的变化时，功能性动画也可以用来提醒用户，可以给用户一个快速而有简洁的一个反馈。例如：短信提示、来电提示。如下图：
案例 (2) ：操作结果反馈
案例 (3) ：进度提示反馈
在进度条设计中，明确告知用户当前的具体进度和状态，让用户随时随地知道还需要等待多久，对当前操作环境是可控的，而不是让用户去猜，让用户对当前的操作环境不可控。例如：他当下操作的步骤；目前数据下载／状态的具体执行进度等，让用户有心理预期。
类型 3 ：功能操作引导
当用户第一次使用你的app的时候，如果没有帮助的话，他们可能会不知道如何操作。 我们应该给用户提供一些视觉提示来告诉他们哪些操作是可行的。
3.1 主要作用
功能性的动画可以提示用户去注意那些可以完成的操作，视觉提示可以给用户告知即将发生的事情。
3.2 使用场景
新手引导/功能操作引导。
3.3 优秀案例赏析
案例 1 ：新手引导
案例 2 ：功能操作中的引导
下图中的例子，是一个游戏里面的小例子，直接用动效完美诠释了“手把手教导”，这样用户理解的成本就非常低，根本不用思考，按照引导去做就能完成任务。是一种非常清晰的解决问题的方式。
类型 4 ：品牌与趣味
4.1 主要作用
为了避免与市场上很多APP同质化，千篇一律的用户体验，品牌动画可以成为一个产品的营销工具，用来表现一家公司的品牌价值或者突出产品的优势，同时给用户一种愉快又难忘的用户体验。
4.1 使用场景
加载细节／动效速度感知／动效色彩的具体场景中使用。
4.3 优秀案例
案例（1）：Uber 启动页的打开加载动效
Uber 的打开动效不仅让用户体会到愉悦感，而且它的展开式动效还很好地“控制”了用户双眼的视觉焦点。如下图：
案例（2）：输入操作中的动效
下图的例子是一个输入账号密码操作时的动效，是动效带来趣味体验的典型案例：
当用户输入密码的时候，这个动作其实是一个非常隐私的动作，所以现实生活中，自己输密码的时候，都会希望身边的陌生人转身／不要直接盯着看。
而下面的例子就把保护用户隐私作为一种生理的本能，把这种生活中的习惯延续到界面细节当中，当用户输入密码的时候，输入框上面的猫头鹰自觉的捂住了自己的眼睛，向用户传达系统的安全性之外，也和用户进行了一次无声的趣味互动，是一个很好的信息反馈的案例。
除了上面的账号输入案例，还有其他类似的动效例子。例如：很多结果输入的反馈里，如果结果输入错误，那么输入框和文字则会来回晃动，同时输入的文字／输入框同时变红。这个效果会让我们联想到日常生活中的摆手和摇头，而这些都代表着“no”，是一种非常自然的动效交互逻辑。而正是这些小细节的使用，是打造良好用户体验的关键。
结语
其实，用户比我们预想中更能注意到页面中的细节，动效除了要帮助用户快速找到他想要的东西，达到他想完成的任务，也是一种可以给用户传递情感的交互元素。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
现在市面上的汽车大部分都是过时的，没有吸引力的用户界面，正因为如此，很多设计师都在思考未来的汽车用户界面将会如何改善我们的驾驶体验。今天这篇译文，一起来学习特斯拉和Apple Carplay 是怎么设计的！
汽车行业似乎每天都有着新的发展。很多证据都表明在接下来的20年里我们将会看到比上个世纪都要剧烈的变革。因此，顶尖的数字设计师们应该把重点放在对这个行业的关注。那么，到底什么才是车辆用户界面的未来？它能从根本上改变我们和汽车之间的关系么？
下面是我收集的一些由全世界不同的设计师设计的美丽和未来的汽车抬头显示器、用户界面交互、第三方app控制器。这些设计想法，有一些是真实存在的，有一些还正在发展中。
它为什么会让人震惊？
当你想确定你是否已经锁好车，关上灯，或者把你的车钥匙交给刚考完驾照的小屁孩的时候，你是否觉得自己是个偏执狂？
这个移动app可以让你在不离开座位的时候检查这一切，有一个柴油混合动力车？你甚至可以在你吃早餐的时候启动引擎。直观的动画会反馈你这个动作是否已经完成。
它为什么会让人震惊？
这个用户界面看起来是一个用肌肉记忆和手势驱动的通用控制模型，不同数目的手指可以触发不同事件，你可以通过iPad面板，无线鼠标等控制它。你可以通过动作来控制数值的大小等等。
这个用户界面去掉了所有需要用户记忆的小控件和视觉元素，从而你可以使用相同的手势或者它的变体，来完成多个不同种类的任务。
你可以在这里查看整个案例研究：A New Car UI
它为什么会让人震惊？
汽车将会变得更加的智能，为我们的公共场所腾出更多的空间，并且汽车的功能也将变得越来越互相关联起来。随着这些发展，数据在我们面前将会变得势不可挡，试想一下不久之前，我们的手机和其它东西一样还是一个单一功能的设备。我们在我们看到什么和如何看上有我们的控制权，它应该变得更加自然和方便使用。人工智能和机器学习将会采取直觉控制。这个由Bureau Oberhaeuser制作的原型让我们提前看到了这一切的到来。
你可以在这里查看整个案例研究：Behance
它为什么会让人震惊？
当汽车所有的零部件都变成电子系统时，你想拿起扳手就能发现问题变得越来越不可能了。这个移动app原型试图用一种你能理解的语言去描述汽车当前的健康状况，让你知道你是否有必要在开启你的海岸线之旅前修一下它。
它为什么会让人震惊？
当进行轮胎检查时，这个界面将会告诉你每个轮胎的压力范围并且告诉你它们的极限在哪里。这个用户界面提供了如此重要的反馈，我觉得它应该被纳入常用标准中去。
它为什么会让人震惊？
不用说大家都知道司机应该保持视线在路上，但是现在的手机导航都需要司机把注意力来回切换在手机屏幕和路面之间，这个叫Hudway的app把你的第二块屏幕跟挡风玻璃很好的结合了起来。你面前的那块挡风玻璃很有可能就是未来的显示界面。
你可以在这里查看整个案例研究：Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]
它为什么会让人震惊？
这个用户界面对于勇敢的探险家来说非常完美，如果你想快速的知道你周围有什么，这个用户界面可以让你在有限的路线里来一段自发的旅行。
它为什么会让人震惊？
每个人都在关注它的到来，想都不要想，如果你已经有了一堆苹果的产品，你也会在你的汽车上装上它的。Apple Carplay将会是下一代的第二块屏幕。
它为什么会让人震惊？
没有什么能和发动引擎点亮仪表，汽车轰鸣犹如巡游乐队组成的和旋一样。身边的一切，声音和延迟的视觉互动，都给与你感官的反馈。仪表会通过动画直观的告诉你，合适讲切入下个转弯，油量是否变低，以及胎压是否过低。
然而，用数字型号在方方面面代替模拟型号也会开始令人担忧，因为无法人工手动介入账款车子，当保险丝熔断，或者电子仪器故障时，汽车很快会失控。
它为什么会让人震惊？
当可穿戴设备成为我们设备的一部分时，它很明显会帮助我们的手持设备分担掉一部分的操作功能。这个原型很好的说明了它是如何将这一切展示到手腕上来的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本篇文章分别从页面打开方式的类型、当前页打开&新开页面、弹出框三方面对页面链接打开方式进行了探讨，给大家提出一些意见以供参考。
页面打开方式作为链接产品路径的基础，在设计的过程中，或多或少都会遇到选择的困扰，尤其是产品功能复杂，层级较多时，如何让用户按照自己的意愿清晰的浏览信息，保持操作连贯性，是值得体验设计仔细思考与分析的。
近期在所负责的设计项目中，团队对链接操作的打开方式产生了分歧，借此机会整理了一些案例与资料，就这个问题进行分析探讨，也给遇到同样问题的同行一些参考意见。
网页中可操作的链接，主要有按钮、icon 以及文字链接，设计中常用的打开方式则主要有以下三种：
1. 当前页打开
点击操作链接后，在当前的浏览器页面中进行内容显示与操作。
2. 新开页面
点击操作链接后，在浏览器中新开一个独立的标签页面，进行内容显示与操作。
3. 弹出框
点击操作链接后，在当前的浏览器页面中，弹出一个小尺寸的对话框，进行内容显示与操作。
首先来说说最具争议的新开页面&当前页打开。在 HTML语言中，target目标有「target=_blank」和「target=_self」两种属性，分别代表「新窗口打开」和「当前窗口打开」，下图是这两个参数的属性描述。
从这两个参数的属性上来看，「当前窗口打开」是系统默认的处理方式。这个打开方式在国外的网站中实现方式比较统一，用户也形成了一致的习惯，但国内的形式则不尽相同，以至于一直颇具争议，不同类型网站之间、同一网站不同场景之间也没有一个明确的规则标准可供大家学习和参照。
针对这个问题的讨论，可以听到两种不同的用户声音，并且都站在各自的角度阐述其道理。
举个例子，我们以同类型网站（淘宝和亚马逊）的打开处理方式进行对比，来看一下用户习惯、功能场景对链接打开方式选择的影响。
首先，我们确定一致的功能场景：用户从首页中根据各种筛选条件，查找到心仪的商品。来看一下两个网站的处理方式：
可以看出基本是两个极端，差异非常明显，再来看个有意思的现象，亚马逊中国的商品搜索方式竟然又和淘宝一致了，难道链接打开方式的差异竟是中外用户习惯的差异？
这确实占了很大一部分原因，那么造成这种差异的原因主要有：
那么，淘宝中所有的页面打开方式都是新开吗？不是。像「我的收藏」、「已买到的商品」、「购物车」等功能页面就是当前页打开。
同一个产品内部，如此区别设计的原因我认为有：
关于这两种打开方式，到底哪种操作更顺畅，确实难分高下，就跟「确定和取消哪个在左，哪个在右」是一种性质的问题，没有好坏之分，关键是要看在哪种场景下使用更合适。
新页面打开适用的场景：
当前页打开适用的场景：
以上是结合功能场景进行的选择侧重，如果就「用户体验」一定要分出个高下，我个人还是比较支持默认「当前页打开」，从体验角度分析，「当前页打开」略胜一筹的主要原因有以下两个：
小结
当我们不知道两种方式如何选择时，或许「不强制用户」才是最好的体验。因为我们面临的用户多样，电脑操作熟悉程度多样，因此不同用户对于打开方式的习惯也具有多样性，这个是设计者无法揣测和调查清楚的。
在「两害取其轻」的情况下，在当前窗口打开链接，不失为一个选择，尊重用户自己的决定，让用户对交互界面自主可控。
弹出框（弹层）又叫模态对话框，是指在用户想要对当前对话框以外的应用程序或内容进行操作时的提示方式。它一般覆盖在整体页面之上，避免了页面跳转。
弹出框通常是为了显示一个单独的内容，在不离开整体页面的情况下有一些互动，提供信息和交互。
如下图知乎中的「写想法」，用户可以快速的在弹出框中记录个人想法，记录发布后，很顺畅的回到之前的路径上继续操作，便捷，操作思路清晰。
现在很多产品中的新增、创建，也都会采用弹出框的交互方式，当然前提是在弹出框中编辑的内容不是很多，此时弹出框不仅承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。
如 iconfont 中的新建项目，用户新增后，页面会直接跳转到新的项目空间。
弹出框适用的场景：
因此，弹出框可以较好的实现上下内容层叠的感知，不打扰用户的主路径，同时作为页面承载元素和用户操作的补充，起到承前启后的作用。
本文结合这三种链接打开方式的页面交互关系，进行适用场景举例，并总结每种方式的优缺点，方便在设计中更好的根据不同的场景选择合适的页面打开方式。
当然，以上总结也是基于我个人的理解与经验，没有统一的用法和标准，在具体设计实践中，仍要靠设计者的直觉和经验来进行综合考量与判断。
作为体验设计师，如何规划用户浏览路径，是个需要严肃对待的命题。没有绝对的好与坏，但一定要结合产品类型、场景、目标用户等进行具体问题具体分析。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com