如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
交互设计中的“所见即所得”原则
“所见即所得”原则我记得在之前的文章中就提到过，但是没有详细说明。最近在体验一些产品时，发现很多交互设计上的坑都可以归纳到“所见非所得”上。
所见非所得
我们可以首先来看一下“所见非所得”的案例：上周寄件去北京，在填写收件人信息时候，发现了一个“智能填写”的功能很有意思。所谓“智能填写”就是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界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
刚入行的新手设计师容易出现一个问题，接到需求就开始设计，最后出现的界面和原型几乎一模一样，唯一的区别就是上了色，加了图片和图标，最后提交审核时老板反馈，“这个界面看上去太“平”了，你在这里加个背景色吧；这个图标太小，你再放大一点；这个位置你在加点装饰……”。
这主要原因还是界面没层次导致的，虽然老板对设计不太清楚，但是关于业务逻辑我们的设计稿是否表达清楚，重点是否突出这个他最清楚了。
那么如何才能提高界面层次呢？我们可以从两个方面入手，在设计前我们需要考虑突出内容层次的方法；在设计中需要考虑突出视觉层次的方法。
目录
一、突出内容层次的方法
将相关联的元素进行组合
确认内容优先级，将优先级高的放在前面
确认重要内容，将其差异化设计
二、提高视觉层次的方法
利用线、面、留白将模块进行分割
利用大小、投影、背景图突出视觉层次
利用颜色对比提高视觉感受
利用文字对比提高界面的可阅读性
一、突出内容层次的方法
当一个界面信息量比较大时，层次感好的界面用户进来能快速的获得想要的信息，同时最终达到产品的目的。而层次感差的界面用户看半天也不知道要做什么，看一会也就走了。因此良好的视觉层级是界面成功的关键。在设计前我们需要将相关联的元素进行组合；确认内容优先级，将优先级高的放在前面；确认重要内容，并将其差异化设计。
1.将相关联的元素进行组合
在设计前，产品原型图已经将我们的元素进行了分类组合，但是他们更多的是考虑逻辑、功能上的层次，而如何有一个清晰的内容层次呢？设计师可以利用《格式塔心理学》中的接近性原则将相关联的元素组合在一起，不相关的拉开距离，同时形成一定的规律和节奏，这样会让用户阅读起来更轻松。
需要注意的是，界面中的间距需要满足一定的规律和节奏，比如模块之间的间距大于标题到内容的间距；在内容中不相关联的内容间距大于相关联的间距，如下图所示。
天猫个人主页的个人信息区排在最前面就是遵循了用户的浏览习惯；其次是我的订单和物流信息排在了第二的位置这是用户想看到的内容；最后是我的福利排在了第三位这是产品想给用户看的内容。
京东金融的我的页面用户的资产信息排在最前面，他首先是遵循了用户的浏览习惯，同时也是用户想要看到的内容，其次是功能入口区排在了第二的位置这是产品想给用户看的内容，最后是福利大礼包排在第三位这也是产品想个用户看的内容。
2.确认内容优先级，将优先级高的放在前面
将相关联的信息整理之后就需要确认模块的优先级了，由于用户的浏览顺序是自上而下的，因此我们需要将优先级高的模块放到前面。
那么优先级如何判断呢？大家可以从三个方面去考虑，第一是遵循用户的浏览习惯；第二是用户想看的内容；第三是产品想要用户看的内容，如下图所示。
天猫个人主页的个人信息区排在最前面就是遵循了用户的浏览习惯；其次是我的订单和物流信息排在了第二的位置这是用户想看到的内容；最后是我的福利排在了第三位这是产品想给用户看的内容。
京东金融的我的页面用户的资产信息排在最前面，他首先是遵循了用户的浏览习惯，同时也是用户想要看到的内容，其次是功能入口区排在了第二的位置这是产品想给用户看的内容，最后是福利大礼包排在第三位这也是产品想个用户看的内容。
3.确认重要内容，将其差异化设计
在设计时我们需要知道，优先级高的模块不一定重要程度就高，因此我们还需要确认模块的重要层级，同时利用背景、布局等方式进行差异化设计，用起用户注意，如下图所示。
网易严选中的新人专享礼和品牌制造商直供就采用了差异化设计，职工类模块采用的是普通的宫格式布局，新人专享礼采用添加背景的方式，加深了模块的纵深感，对比其他模块更加突出。
大麦网中的特色模块和其他模块也采用了差异化设计，特色模块采用拼图的方式设计，其他模块采用列表的方式进行设计，用户进入页面首先就能够看到这个模块，提高用户接受信息的效率。
土豆视频个人主页的列表部分也采用了差异化设计，消息提醒、我的收藏、观看记录、我的缓存这四个用户常用的功能采用宫格式布局，其他不常用的我的会员、客户与反馈、设置采用列表式结构，这样也能够提高用户操作速度。
二、提高视觉层次的方法
当然内容层级确定了显然不够，我们还需要考虑突出界面的视觉层次，这样用户才能够清晰舒适的浏览我们的界面。那么提高视觉层次的方法有哪些呢？在设计中，我们可以利用线、面、留白将模块进行分割；利用大小、投影、背景图等突出视觉层次；利用颜色对比提高视觉感受；利用文字对比提高界面的可阅读性。
1.利用线、面、留白将模块进行分割
大家记得在设计前我们已经对界面中相关联的元素进行了组合，组合之后就可以利用线、面、留白的方式，将不相关联的元素进行分割，提高界面的视觉层次，从而提高用户的浏览和操作效率。
线分割：是最为基础的分割方式，其优势是占用空间小、分割感弱，多用于列表、Feed流中。需要注意的是，分割线颜色设置需要非常浅，避免模块之间强烈的分割感，比如橘子娱乐的列表就是采用若隐若现的线，让列表中的内容更规整。
面分割：也可叫背景栏分割，其优势是占用空间小、可操作性高，同时能够更好的区分不同模块之间的关系，多用于模块和模块之间的分割，比如转转个人主页的模块采用面分割浏览性更强。
留白分割：是iOS11发布之后兴起的以留白或间距的方式进行分割，其优势是无强烈的分割感，界面清爽，多用于比较有规律或以大图为主的模块之间的分割，比如转转主页下方的卖二手还钱、买实惠好货等，其内容部分都较为规则，采用该方式较为合适。
2.利用投影、大小、背景图突出视觉层次
为了突出界面的视觉层次，我们还可以通过投影、大小、布局等增加界面的对比，从而突出重要信息。
投影：是界面对比较常用的一种方式，其优势是提升界面的空间感，改变视觉次序，通过投影大小的变化还可营造不同的空间关系，多用于卡片风格的设计中，比如Keep均是采用卡片风格的设计，添加投影后让界面视觉层次更突出了。
大小：是大众最为熟知的对比方式，其优势是通过大小对比能够很快的拉开视觉层次，同时能够很好的引导用户浏览路径，比如ofo黄色的大按钮远远都能看见，该页面就一个目的扫码用车。
背景图：往往不如投影和大小常用，但是它的使用可以将模块从其他样式中年凸现出来，多用于banner、推荐等重要模块中，比如美图秀秀的推荐模块，该模块可以说是美图的核心模块。
3.利用颜色对比提高视觉感受
颜色是最容易感知到的对比方式，通过颜色我们可以明确哪些是重要信息，在使用中我们可以通过色相、明暗、饱和度上进行对比，其多用在按钮、重要信息、导航、背景板中。
自如首页上的租房、服务、旅行采用对比色进行强调对比，进入页面用户就能够清楚这三块是是界面的核心功能，同时引导用户关注右侧的具体服务信息。
淘票票首页中的按钮、引导提示、标签栏选中均用了红色进行强调对比，很容易引起用户的注意，让用户看一眼就知道如何操作。
招商银行首页中的话题PK采用对比色进行强调对比，很容易引起用户操作的兴趣。
4.利用文字对比提高界面的可阅读性
文字的层次感往往和字体大小和明暗有关，其中字体大小是提高文字信息层级的重要手段，在文字排版中如果文字之间的层次不清晰，那么一定是大小的对比不够，在UI中字体大小对比往往在4-8px较为适合，如下图所示。
当字体大小对比适合之后就需要通过通过字体的明暗突出主要信息，弱化次要信息，从而提高界面的可阅读性，如下图所示。
在UI设计中我们往往都设定了字体规范，这样不仅能够达到设计统一，同时也有很好的对比性，常用字号为40, 36, 32,28,24, 22(px)，比如优酷的星球页面，通过字体大小，颜色深浅的对比，让用户首先看到重要信息，弱化次要信息。
三、总结
在界面设计中为了降低用户的理解成本，突出重点内容，让用户使用起来舒适，就需要有个清晰的内容层次和视觉层次。
在设计前我们需要考虑将相关联的元素进行组合；确认内容优先级，将优先级高的放在前面；确认重要内容，将其差异化设计。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
飞猪首页在这两年，经历过无数次大大小小的改造。而在2018年7-8月，我们对飞猪首页进行了尤为重要的，一次较为完整的改头换面。这篇文章，包含了飞猪首页历次改版的回顾。我们也想和大家分享一下，2018年，我们这次完整改造背后的思考。
我在2015年毕业后，就来到了飞猪。其实当时还没有飞猪的概念，那时候的 app 叫「阿里旅行·去啊」，后来了解到我们还有过「淘宝旅行」、「阿里旅行」、「去啊」等这些曾用名。
说起名字还有个故事。我刚工作那会打Uber，司机们都特热情，打车能和你聊一路。
有个司机问我：「你是在阿里哪个部门工作呀？」，我就说：「去啊」。司机很激动，马上说：「哦哦，我知道，那个去哪儿网，头像是绿色骆驼的那个！我老婆手机里就装了一个！」
我连忙说：「不是的不是的，我们叫去啊，不叫去哪儿。我们也叫阿里旅行，或者淘宝旅行，你知道吧…」
然后我们讨论了一路「去啊」和「去哪儿」的区别。
虽然直到我下车，我也不知道司机老哥有没有弄明白。
这个事其实很有代表性。在当时，旅行市场最大的品牌就两个，携程和去哪儿。虽然市场上还有同程、穷游、蚂蜂窝、驴妈妈、艺龙等旅行相关的app，但我们就叫「去啊」，其实已经暴露了我们的目的（并不是为了让大家想下「去哪儿」的时候，不小心下载了「去啊」），而是我们当时的目标就是要做一个对标OTA 的旅行预订工具。
这时候我们的首页和他们比起来，简直满分。当然，我指的是相似度，满分。
这其实就是飞猪的起源版本首页。在这里我们可以看到巨大的机票、酒店这样的旅行类目预订的入口，其实就是为了让用户有「预订」的认知。
直到有一天，产品经理在压榨设计师出图，我隐约听到「我们是平台，不是OTA」这样的说法。那个设计师熬掉好几根头发之后，方案确定了，我们便有了下面这个版本的首页。
我们看到，这个版本的首页看起来不像携程了，更像是当时的淘宝。那个产品经理把他的 iphone5s 擦得锃亮，非常兴奋地给我展示：「你看，这个首页，改得太棒了！比以前好多了！」
其实以我当时的聪明才智，真没看出来。但后来想想，这个改版其实是一次觉醒。这个改版意味着，我们要在平台的业务模式下，在机票酒店这样的预订心智之外，找到自己的特色。
而这种差异化的思维模式影响了接下来一年多的首页设计。
刚开始接首页时，我们尝试从内容进行突破，将商品罗列升级为旅行内容。
同时，在品牌升级为飞猪之后，我们尝试为用户提供更个性的服务，基于用户可能想去、准备出发、正在旅行等不同阶段，设计了「目的地个性化」模块，让有不同需求的用户可以看到不一样的目的地、玩法、商品。
后来我们新起了场景化项目，有个业务小组产出了全球第一站、周边好去处这两个出境、周边的导购场景。
并且我们将首页所有的信息都进行了个性化处理，让每个人每天可以看到不一样的内容。
当然，首页的样式看起来越来越美好了，但我们仍然不满意。
上面这些版本的首页，有一个共性：我们一直围绕着业务的布局，在首页上设计业务模块。比如下面的这些模块：
而体现在数据上，也有这么几个共性：
用一句话来总结，就是用户对排列业务模块搭出的首页没有建立认知。
2018年4月开始，我们着手对飞猪首页进行一轮整体的改版。在改版之前，我们首先需要对之前首页进行一次全面的体检。
在这里，我们使用 NLP 理解层次，来深入理解飞猪首页到底发生了什么。
简单介绍一下 NLP 理解层次：我们一般可以通过6个层次理解事物，由低到高分别是：环境、行为、能力、BVR（信念/价值观/原则）、身份、精神。这套框架几乎可以帮我们分析理解一切问题。
△ 用NLP分析问题背后的原因
1. 环境：飞猪业务主导的环境
飞猪的整体环境核心是以业务为导向的，设计的大部分工作是属于支持性质的。在首页工作中，我们做得更主动一些，常给一些提案，也可以算作是共创。但核心的决策权是属于业务和产品的，所以这就导致，飞猪最后上线的东西，往往优先考虑的是业务的重要性。
2. 行为：首页根据业务调整不断改版
我们始终在跟踪首页的数据，并根据数据的变化、业务的倾向性对首页进行日常的调整。
3. 能力：设想的场景没有做好，维度少/内容欠佳
我们希望做场景化，其实是很好的想法。但业务前期只尝试了周边、出境两个场景，这很难匹配旅行用户各种各样的偏好。
同时，飞猪在生产高质量内容的方面做得不够，产出的内容没有让用户产生兴趣。
4. BVR：内容数量>内容质量
因为飞猪的内容起步晚，在起步初期的目标是提高内容的数量，而非生产高质量的爆款文章。所以当后续我们需要用到内容时，常常担心取到一些充数的质量不高的内容。
5. 身份：售卖平台
飞猪以往的定位仍然是旅行商品预订平台，这也会在一定程度上，导致我们不会在提升内容质量上投入太多。
6. 精神：？
这个层面我只能说我个人的理解：我希望飞猪能让旅行者享受更多旅行的快乐。
通过分析我们发现，飞猪的身份定位，对我们设计产品会有从表及里的深度影响。如果我们定位是旅行预订工具，必然只能做出小的创新。所以如果要做大改变，首先要定义飞猪的新身份。
而恰巧，2018年飞猪迎来了新的品牌定义──「全球fun肆玩」。我们开始从旅行预订平台进行更大胆的转型，试图建立新的在线旅游生态。
在这个身份转变的契机下，我们在2018年对首页进行了升级。
飞猪的新目标叫「全球fun肆玩」，关键在fun。我们需要通过设计，激发用户旅行的欲望。
旧版飞猪的框架依然是围绕业务架构建立的。而在这次改版中，我们希望基于每一个普通旅行者的视角，来建立新的首页框架。
在建立框架之前，我们需要挖掘的是，旅行是什么？
有人说旅行是机酒火汽的预订，其实不是。我理解的旅行指的是人，花一段时间，离开现在的位置，去感受快乐。其中包含了角色、目的、地点、时间4个关键的因素。而取决于角色的不同，每个人在旅行上作出的决定也是不同的，所以「人」是旅行真正的内在因素。
而我们认知里零散的旅行方式，如：跟团游、自由行、亲子游、出境游、周边游只是被内在因素对旅行产生影响的结果。
而偏偏旅行还要求我们产生玩的想法，留出足够的时间，从一个地方去另一个地方。当定机票酒店已经不再是个难题的时候，我们决策困难的原因更多是在自身：我不知道自己想要什么样的旅行。
所以我们解析了用户的旅行特性，发现每个用户喜欢的内容、商品，都是不同，且是特色鲜明的。所以我们的核心需要做到的，就是让这些无数的普通人，都能感知自己的内在，并找到和自己内在适合的旅行方式。而直接放商品、内容都让用户难以理解。所以我们选择了更理想的方式来让用户理解自己的内在──主题。
我对主题这两个字的定义是：一句话描述你想要的旅行。这句话可以是：情侣最爱去、国内必玩地、舌尖上的中国、隐居西子湖畔等等和你匹配的点。
我们初步将主题组织成了灵感、计划、商品三个维度，希望能在玩什么、什么时间去、买什么等旅行决策上，对用户由内而外地产生帮助。
在搭建好了框架后，我们需要的就是更好的承接能力。核心考验的就是内容的生产和算法的组织。
为了让用户看到更好的内容，我们使用了新的后台，可以通过算法，动态选出具有相似主题的无数商品，搭建频道，并进行投放，做到千人千面。
在内容质量上，我们还将继续寻找突破口，进行新的升级。
飞猪2018的首页，我们也在视觉上打破传统，做了很多突破。
突破空间 – 打破「屏效比」的伪命题
在移动端设计的时候，设计师往往被要求利用屏幕的空间。
而业务方和 PD 也非常机智，总能有一些金点子，例如：「区块再矮一点」、「文字再小一点」、「给我多放几排」、「一排再给我多放几个」。
在这样的诉求下，我们的界面设计常常会失去很多留白空间，导致信息密度会很大。而太大的信息密度反而会影响用户的阅读欲望，甚至降低用户的阅读效率。
而随着设计影响力的增加，大家认识到了一个更美的、更能讨人喜欢的界面，不是什么都放上来的界面。
图片 – 大图凸显内容品质
由于以往对空间利用的苛刻，我们的图片常常会被压缩得很窄、很矮，有时甚至无法形成系统的图片比例。而在解决了空间的问题后，我们可以按照1 : 1、16 : 9、4 : 3这样的标准比例来设计图片坑位的大小。这些比例能更好地帮助用户阅读图片的内容。
文字 – 不是装饰，更不仅是内容
随着iOS11的推出，大标题对设计已经产生了较大的影响力。我们在设计首页时就做了大胆的尝试，使用简短有力的大标题和留白作为每个模块的区隔，让用户的视线可以从一个模块自然地过渡到下一个模块。
同时，我们尽量保证内容是简短有力的，这样就可以用更大的字号，减少用户阅读的成本。
色彩 – 来自于旅行的颜色
以往在猜你喜欢中，我们的标签都是用黄色或者黑色底，盖在图上来做的。但这会影响图片的品质，同时较小的标签文字盖在图上，其实并不适合用户阅读。
所以我们优化了方案，让小文字和图片不要重叠，提升了文字的阅读性。同时通过改变标签文字的颜色，让标签成为了商品卡片的点缀。
我们回顾了飞猪首页的设计历史，并看到了2018年我们的探索。这背后伴随的是行业、市场、用户的变化，提醒着我们需要把产品设计得更优秀，来面对无尽的挑战。
2018年飞猪首页的改版，也代表着首页设计模式的转变，从业务争夺入口转型为基于用户体验，设计师、产品经理、业务方、技术团队协同作战的模式。
而作为设计师，更需要始终围绕着用户，在桎梏中跳舞，做出好体验的设计。
2018飞猪首页的改版只是开始，飞猪才刚刚转型，未来我们将更加紧密地围绕用户，提供质的服务。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则，是由Ollie Johnston和Frank Thomas在他们的书《The Illusion of Life》中提出来的观点（译者注：这本书在豆瓣的评分有9.3分，值得一看）。这些原则最初是用来为动画片这种传统的形式设计的，然而，这些原则也同样适用于UI设计。所以，我想在这里做一个有趣的尝试，看能否将这些动画原则联系起来。
在动画中，挤压和拉伸代表了物体的重力，质量，重量和灵活性。举例来说，当一个弹球在它撞击地面时会发生形态变化，就是挤压和拉伸。
在界面中，挤压和拉伸很容易就联想到按钮。当一个按钮被按下时，就可以理解为受到了挤压，通过控制按钮的挤压和拉伸，我们可以很轻易的做好一个按钮的交互动画。除了按钮之外，这种原则也可以应用于UI中的任何交互元素上。
按钮在交互时的挤压和拉伸
挤压和拉伸被应用于侧边栏
让观众能预先知道接下来将会发生什么，它是先于下一步会发生的动作。举例来说，迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳、正在跑步的人要停止跑步前会逐渐变慢步伐等等。
在界面中，悬停状态就是很好的例子。当我们把鼠标悬停在元素上时，元素会提供反馈，表明它是可以点击的，并且在点击时，又会有一些别的反馈。
悬停的交互通常会暗示这个按钮是可以点的
在有水平滚动界面里，通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子，因为它是在告知用户下一步的一些信息。
在传统动画中，时间会决定关键帧的绘制方式。帧数越多，动画就越流畅，同时也更慢，时间能够给动画赋予情绪和性格。
时间的节奏感是任何动画的基础，速度在元素编排中起着非常重要的作用。速度太慢，用户会不耐烦，速度太快，用户又会错过一些内容。一般来说，大多数UI动画在200-600ms之间，其中悬停和反馈交互时长大约为300ms，精细的转场动画大约在500ms。也可以去参考谷歌的动画规范（https://material.io/design/motion/speed.html#duration），里面非常详细的解释了每种动画类型的持续时间。
一些设计系统，如Carbon（https://www.carbondesignsystem.com/guidelines/motion/）、Lightning（https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/）都把运动的节奏感视为一个很重要的方面，并为每种类型的过渡都制定了严格的规范。
右边的过渡动画显得太过于漫长，繁琐。
在现实世界中，大多数物体都遵循着缓动运动规律。也就是说，物体的运动并不会瞬间开始或瞬间结束，就像一个物体自由落体，也是一开始很慢后面才变会变快。
左侧的卡片是没有缓动的，右侧的是带有缓动的，看起来会自然很多。
给UI中的元素加上缓动会让它看起来更加自然，缓动和节奏感都是可以有效的提升动画的品质。
舞台中的表演需要合适的编排才会精彩。也就是说，对象在场景中如何摆放，每个动画又如何出现，关乎演出的质量。通过这种编排，能够将注意力引向最重要的角色。
在界面中，呈现方式能够决定元素的位置，以及在交互时，它应该如何编排才能将用户的注意力引向预期的元素。
比如现在有一个基于兴趣的音乐APP，对这个应用来说，最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此，有必要将类似的操作与其他元素分开编排，有目的的引导用户。
一个从高处抛出的小球，运动轨迹会做抛物线轨迹运动，弧线能使物体的运动更加自然。
在界面中，沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时，多尝试使用弧线轨迹。
通过对比，能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。
在动画中，次要动作能够起到烘托主要动作，比如动画中的角色在走路时，头部的晃动就是次要动作，却能够让角色行走显得更加自然。
在界面中，次要操作能够起到强化关键动作，当元素需要向用户提供反馈时，这个方法非常管用。所有的微交互都是基于这个附属动作原理。
按钮边上的粒子效果强化了主按钮的点击效果
场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。
在界面中，重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的FAB按钮就是一个很好的例子，FAB按钮在不动的时候也比较能引起注意，因为它通常会带有比较鲜明的颜色，并且是独立悬浮在界面元素之上的。当它被点击时，FAB的动画被放大，把整个界面都占满，使得它完全占据用户的注意力。
FAB 夸张的交互形式
对于支付这么重要功能的按钮，通过夸张的动效引起用户的注意
想象一只兔子从高处跳下来，当兔子开始起跳时，它的耳朵动作会与身体动作发生错位。然后当它着陆时，它的身体停下来了，但是耳朵还在动。前者称之为跟随动作，后者被称为重叠动作。其原理说的就是：没有任何一种物体会突然停止，物体的运动是一个部分接着另一个部分的。
在界面中，可以使元素在停止之前超过它们原本的位置，使得元素运动更加自然。（译者注：大白话就是我们常说的回弹效果。）
界面有一定的回弹，会显得更加自然。
当界面滚动时，文字会跟随图片的运动，图片与文字以不同的速度运动会更加自然。（译者注：像是被拖着走的那种感觉）
界面中的每一次交互都必须在适当的场景中精心设计，让整个体验更具沉静感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。
这些原则正在以不同的形式应用于当今的数字产品中，值得敬畏的是，30年前设计的一套规则到今天仍然适用。
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在互联网快速发展的进程中，越来越多人将个人财产、隐私、数据，以及心理安全都存放在产品平台上。这么一来，想要产品获得用户芳心，让用户用得放心，不仅要为用户提供安全可靠的保障系统，也要将安全氛围显化传达给用户。那么，可以从哪些方面着手设计产品，提升用户安全感呢？下面一些案例，会从新的角度给你灵感。
很多时候我们可能只是心血来潮想尝试一下某款app，并没有注册帐号长期使用的打算。所以每当打开的应用，如果出现强制要求注册，才能开启使用的情况，真的会对产品的体验好感全无，甚至怕麻烦放弃使用。一些产品会提供「游客」身份试用简版「会员」享全部功能的选择给新用户，这无疑是一种体验不错的方案。
但如果受限于功能使用，或者就是要提高产品的用户量，必须引导注册，该如何减少用户的反感情绪呢？
最近爆红的ZEPETO的登录界面就很值得借鉴。用「制作ZEPETO」和「已有ZEPETO」的文案，替代生硬的「登录」与「注册」。相同的功能设计，但因文案传达情绪的不同给人带来不一样的感受。
「制作ZEPETO」几个字不仅直白地说明了产品意图，还悄悄将「注册」转化成了用户制作ZEPETO过程的一部分，无形中降低了用户对强制性注册的心理防备。
为了吸引粉丝，短视频的作者会争相模仿，一些观众用户也会因为有趣去体验尝试，但很多视频里的体验和动作都是存在安全隐患的。为了规避风险，「抖音」里某些视频的下方会提示：「效果未知，请勿轻易尝试」或者「该行为存在危险，请勿轻易模仿」。
如果刷「抖音」时长超过五小时，也会提示看视频时长并提醒用户注意适当休息。这些小提示的出现，都是出于对用户健康安全着想与负责的引导，也是产品团队规避责任与风险的方式。
用户在进行语音交互时，想取消当前操作的概率非常大。如果系统按照错误的指令执行，会给用户带来挫败感。「支付宝」的语音交互会根据用户当前的手势进行操作提醒，以减少用户的学习成本。
不存在干扰或打断用户操作行为进行的强制性，又能给予用户对当前操作进行修正的机会。让用户轻松胜任操作，利用「控制错觉」打破用户对不熟悉操作的顾虑与恐惧感。
对于大多数团队来说，敏捷开发时间短任务重，在有限时间内并不能把所有功能都上线。「微信」团队在订阅号里，添加了未开发功能提示。
当用户长按文章时会出现toast提示，用特定的交互与简要文字说明提示用户「功能正在开发未上线」。
「工具提示」往往出现在新用户引导流程，但微信团队将它用在了未完成开发功能的提示上，让用户对之后上线的功能产生期待感。
在支付宝的「我的」页面中，「总资产」的后面会显示绿色的「账户安全保障中」的文案。同样的，「财富」页面的「总资产」项后面也会显示「保障中」的微文案。不断出现强调资金安全性的文案，其实是支付宝在通过细节设计提升用户在使用产品期间的安全感。因为当涉及金钱交易时，用户都是极其慎重与不安的。
所以产品不仅要为用户提供安全可靠的保障系统，也要将不可见的安全氛围显性化传达给用户。通过界面细节，比如文案展示出产品的安全性，能借助心理暗示的作用缓解用户内心的不安情绪，增强对产品的信任感。
「即刻」app对于用户评论的审核机制十分具有萌点：如果用户在发表评论的内容中，包含不友善或具有人生攻击的词句，系统会自动弹出模态弹窗，提醒用户修改留言。如果用户依旧不愿修改言论并坚持发布，评论内容是可以发布成功的，但言论中包含的不符合平台规定的字眼会被系统强制修改。
比如在发布的评论中包含具有攻击性的词语「智障」，发布成功后会被系统修改为「大笨蛋」。没有强行阻断用户的评论行为对用户造成评论失败的挫败感，又巧妙化解了不友善言论的发布,维护了社区的和谐。将所有负面甚至不文明的言论全都自动过滤强行变萌，设计出这个审核功能的小哥哥或小姐姐一定有着一颗敏感又温柔的心吧～
「恐惧症」是一种以恐惧症状为主要临床表现的精神类疾病，指对特定的人、物或场景有按耐不住的焦虑、紧张甚至是恐惧的心理。如果在「百度」搜索含有「密集恐惧症」、「深海恐惧症」等类似关键词的图片，会在呈现完整加载结果前出现遮罩遮蔽图片，并用文案提醒用户图片可能引起不适请自行选择是否继续查看。
由于无法确保浏览内容的用户是否具有相关病症，强制性阻断操作给予提醒并将是否继续的选择权交与用户，算是对用户的使用体验很用心的考量了吧。
对于上班族而言，每天吃什么简直是个世纪难题。面对海量的店家及不同的组合优惠，常常挑花了眼，还是无从下手。如果你也存在这样的问题，不如来试试「美团外卖」新推出的「满减神器」吧。
针对店家的优惠特点，系统会提前帮你罗列出最佳的优惠选择。不仅会标注出各个套餐近期购买的人数，还会优先推荐「高回头率」的套餐选择。解决了选择困难的痛点，让用户吃得实惠又省心。
「支付宝」与「微信」早在几年前就推出了「延时到账」功能，但由于入口隐藏较深使用的人并不多。更重要的是即便中途发现被骗，也无法立马撤销交易，一旦延迟转账超时钱，还是会直接打到对方账户。而这一次新版「支付宝」联合警方优化了反诈骗的流程，对「延时到账」功能的升级可谓是真正解决了转账安全的痛点。
对于选择「延时到账」的用户，如果在到账前发现被骗，虽无法自行撤回款项但只要上传报警的相关凭证，这笔转账就会被临时冻结。一旦警方判定被诈骗的情况属实，用户的转账就能原路返回转出帐号了。更贴心的是，即便用户没有进行「延时转账」操作，当「支付宝」的风控系统识别到转账存在风险（比如对收款方账户的交易历史行为存疑）会自动提醒用户进行「延时转账」。
今天在用「美团外卖」与商家进行联系时，发现了一个「加密号码」的弹窗。当你确认联系商家后，会出现语音提示：「美团外卖保护你的隐私，商家将不会知道你的号码」。这个小细节很赞是因为在保护了用户隐私的同时也通过语音提示在用户心中强化了平台的安全性与贴心。
以前如果用户给商家差评了，很有可能会接到不少商家的骚扰电话，造成不好的产品使用体验。因此团队设计了「加密号码」的功能，加强了用户隐私的保护，让联系商家变得更安心无负担。
1、ZEPETO是如何做到强制用户注册，却不让人反感的？
2、「抖音」的另类温馨提示，规避责任和风险
3、好的用户提示能给用户增加「安全感」
4、适当的「工具提示」,能增加用户的期待感
5、怎样向用户传达隐性的安全感？
6、「即刻」让社区不友善言论自动变萌的魔法是什么？
7、也许你都不知道，自己会有「恐惧症」
8、替用户做决定，不一定是坏事
9、转账也终于有「后悔药」可以吃了
10、美团外卖上线「加密号码」，让订餐更安心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天为大家推荐的素材是一款admin系统后台网站模板： Light Bootstrap Dashboard，这套后台源码界面十分好看，这也是小编为何推荐的原因之一。
该网站模板使用 Bootstrap 前端框架搭建，对于要兼容响应式手机网页用户推荐使用。此外，小编特喜欢左侧面板设计，可以自由切换颜色，并且能更换背景，颜色与背景的处理非常 nice! 但不足之处就是后台元素不够强大，如果需要更多后台模块，可以购买作者的Pro版。但即使如此，这个免费版个人认为也值了。
下面一起看看这个免费的管理后台模板源码有什么组件、模块：
后台首页的元素并不多，但用户可以自行添加进去。
也可以说是简单的皮肤切换，主要有颜色和背景2种自定义皮肤选项。
如果是Pro版本可带有排序功能。
总体元素虽然少了一些，但是漂亮的界面却算是弥补这些不足，当然你也可以购买 Pro 版，也不贵。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
文章包括品牌理念、品牌识别、APP大改版、品牌延伸。
△ 点击查看完整视频
百度网盘是百度提供的个人云存储服务，自2012年上线至今，通过强大的技术能力以及承担高额的带宽成本，为7亿用户提供文件存储、备份、分享、共享等服务，成为行业领先位置。
这6年里，我们从满足基础存储需求的一款工具，到现在越来越意识到高品质和情感化的体验对于用户的重要性。
因此，团队希望通过本次的品牌升级，能够从视觉识别、产品体验、线上线下推广等多维度来传递品牌核心价值，同时遵从极简克制的百度「高级感」设计理念，形成一套完整统一的设计语言，真正的做到像 slogan 所传递的：「让美好永远陪伴」。
本次品牌升级希望传递用户3个核心点：更有温度、更便捷、更年轻。
网盘一直以来存储着用户的美好回忆，比如：每一次难忘旅途的照片，宝宝成长记录，家人团圆时的合影，激情工作时的陪伴。因此，它不仅仅是一款冰冷的工具，而是一个懂你的、有情感、有温度的生活助手。
过去几年，网盘一直主打的品牌核心点是「安全」、「免费」、「大空间」，不可否认之前的品牌传递是成功的，因为通过这些核心点，在同行业的用户占有率达到80%以上。
但是，未来除了最基础的「安全」以外，还需要传递什么感受呢？我们深知产品体验还有很大的提升空间，比如：如何让产品更易用、存储更便捷、查找更方便、浏览更沉浸等等。因此，「便捷」是接下来品牌需要传达给用户的核心价值。
通过数据分析，网盘的用户24岁左右占大多数，也就意味着我们的主流群体是年轻人。除此之外，保持品牌的年轻化，也是每一个公司都希望做到的。
因此，本次品牌升级，我们希望不管是从视觉层面，还是文案互动，以及运营手法，都更加年轻化及趣味性。
品牌升级不是虚喊口号，而是应该通过各个设计触点的配合给用户传达融合、一致的感受和体验。因此，我们从以下几个场景进行渗透：品牌识别、APP设计、品牌延伸。
在品牌识别渗透环节，涉及到以下几个方面进行优化设计：品牌色、品牌标识、品牌字体。
品牌色
品牌色是用户感知品牌最直观的方式，比如：想到可口可乐就想到红色，想到百事可乐就是蓝色，想零度可乐就是黑色。对，好的品牌色能够占领用户心智，从而产生联想，这就是品牌色的重要性。
那么百度网盘呢？网盘的品牌不是从0到1的小而美的创新设计，需要兼顾7亿用户量对品牌的已有认知，这是一个令人头疼的挑战。
因此在品牌色的选择上，考虑到较大改动带来的用户认知成本的增加，所以经过多轮尝试和讨论后，决定延续用户已有认知的「红蓝」配色，在此基础上，进行调整并渗透新品牌的理念。
同时，在品牌色上希望传递「更年轻」的品牌理念。我们大量收集体现「年轻」的场景进行多轮讨论筛选，提取色调，结合情绪板，最终提炼并定义了我们的品牌色。
品牌标识
在做品牌标识（LOGO）阶段，大家发散了很多想法，尝试了很多方案。
通过多维度思考以及利弊权衡，最后选择在延续原有 logo 特征上，体现新品牌理念——「更有温度」的感受。
那么，现实生活中什么场景，会给人「有温度的」感受呢？我们想到了拥抱、爱心、阳光、火焰等等。最终觉得「微笑」更符合我们所传递的感受，同时也能更好的跟原有 LOGO 特征进行结合。
以下是 LOGO 的设计思路，用颜色体现「年轻」，微笑体现「温度」。
LOGO的最终造型：
品牌字体
LOGO 确定后，还需要设计与之搭配的品牌文字，这个阶段最主要是找到跟品牌性格以及图形风格相契合的字体骨架。同时兼顾原有字体的认知，在此基础上进行微调。比如：统一字体的粗细，以及切角的角度，使整体视觉更加协调。
LOGO和字体组合的最终版本：
不可否认，传递品牌理念最直接的方式，就是在用户使用它时。因此，我们对产品 NA端进行9.0全新升级（这是自上线以来第一次大改版）。
品牌基因
在互联网产品越来越同质化的今天，做出有差异性和符合品牌调性的设计是我们面临的挑战。因此，在品牌基因方面，做了大量的尝试。
经过多轮讨论，我们选择以「积木」作为网盘的品牌基因。因为「积木」陪伴着我们成长，代表着我们的童年，给人温暖的感受，同时，不同几何形的积木看似单一，组合起来又有很多可能性，体现了年轻和趣味。
在图形设计（ICON）时，提取「积木」中的几何元素进行叠加处理，用色上更加鲜亮，突显年轻化，形成网盘自己的图形体系。
相比「尖锐」的直角，圆角给人柔和的视觉感受，同时经过多轮的尝试，最终确定圆角大小为8px。
同时在空白页上延续图形风格，能够更好的统一视觉语言，传递更加一致的品牌感。
动效上，采用了符合「积木」运动特征的物理属性。因此，运动节奏上利落的不拖泥带水。比如，积木受到一个力，由于摩擦力会快速停止，而并非很Q 的弹性动效。
下图中，「蓝球」代表目前网盘中元素的运动方式，「红球」代表了市面上常见的弹性运动方式。
下图，是将这种运动规则使用在产品界面中时：
同时底部 tab 在运动节奏上，也采用相同的运动规律，赋予产品年轻活力的视觉感受，同时又不会喧宾夺主过度抢戏。
下拉刷新，是增强品牌记忆的最好体现。本次提取 logo 基本元素，同时强调「微笑」，加深用户对品牌的印象。
功能设计
前面有提到，百度网盘保存着用户非常多美好回忆的照片，或许那些回忆，用户都已经忘记，但往往这些才是最大的惊喜和感动。
因此，9.0版本新增「故事」模块，让美好回忆与你不期而遇。通过技术对优质、精彩照片的筛选，生成故事卡片，推送给你，给你带来温暖。
为了节省用户时间，传递品牌「更便捷」的理念，本次改版我们优化「分类」模块，将「分类」外置于首页顶部，减少用户操作步长，轻松查找自己的文件。
同时在首页新增「最近」功能，方便用户便捷查找历史操作，而不是像以前，反复点击层层相套的文件夹去浏览与查找。
排版布局
文件列表是用户使用网盘最高频的路径，针对这个场景，我们遵循视觉服从功能，极简克制的百度「高级感」设计理念，通过视觉手段区分信息层级，让用户浏览时「更便捷」。
因此，本次对文件列表排版布局，从以下几个维度进行优化：大小、重量、间距。
大小
改版前，用户打开文件列表，首先看到的是满屏黄色的文件夹，而这些并不能帮助用户进行浏览或筛选，反而会造成视觉干扰。
因此，本次对文件图标大小，缩略图尺寸，以及标题信息大小，进行整体调整，从而提升浏览效率。
重量
对于文件列表，信息层级重要性依次为：名称>图标>时间，因此，本次优化了视觉重量对比。
通过视觉重量的处理（对标题字号加粗、颜色增强），让用户更加便捷的获取有效信息。
间距
以下是旧版安卓端和改版后对比，去除顶部蓝色双导航的同时，通过缩小文件图标，进而缩小列表间距。
同时，调研行业内有代表性产品的列表行间距，综合分析对比，最终确定列表行间距为「180px」，平衡体验的同时，让用户在首屏看到更多内容。
还对 NA端进行统一的栅格化布局，让页面富有统一的秩序感和韵律。让元素、模块、页面间距有规律可循。
栅格化布局落地全部界面：
以上，是品牌理念渗透到 APP 设计中，进行9.0大改版的相关设计，从品牌基因、功能设计到排版布局，统一的传递全新品牌理念。
线上线下的活动和物料设计，也是品牌和用户的触点，在设计的时候需要延续整体的品牌调性，传递出统一的品牌感。
以上，是百度网盘本次品牌升级背后的原因，以及相关体验设计优化。从前期定义品牌核心理念（更有温度、更便捷、更年轻），到通过不同场景及接触点进行渗透（品牌识别、APP设计、品牌延伸），线上线下多维度的传达统一的品牌理念。所做的这一切，都是希望能为用户提供更好的服务。
本次品牌升级，是百度网盘所有同学努力的结果，我们深知还有很多体验需要提升，这次升级只是开始，会持续让用户感受到「让美好永远陪伴」。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
