今日头条的出现颠覆了传统新闻产品（如网易、新浪和搜狐新闻）。
传统新闻依靠着编辑人员的推荐，将新闻触达给用户，而今日头条则依靠着新闻算法，抛弃传统人工分发的思路，使分发效率数以万计的提升，其迅速崛起，成为头部新闻资讯产品。
今日头条作为新闻信息流的头部产品，里面的设计细节和设计逻辑值得我们思考和分析。
什么是信息流？信息流有两部分组成，信息流=信息+流。
信息指的是内容，这些内容可以是新闻、视频、图片等，所呈现的样式多为列表或卡片。
流指的是瀑布流，可以无限滑动浏览。
所以信息流就是可以无限滑动浏览内容信息。
信息流的样式的好坏，会直接影响到信息的展现效率和点击率，从而影响到用户获取信息的效率和整体阅读时长。
下图为今日头条首页推荐频道的信息流：
将信息流样式进行简单分类，使用最多的四种样式为纯文、左文右图、短内容、大图视频。如下图所示：
纯文样式用于新闻中没有图片的情况，当文章中没有图片时，这时候采用改样式。列表含有：标题、来源、评论数、发布时间。
对于含有图片时候，采用左文右图样式。目前新闻对于含有图片的列表样式，一般有3种分别为：左文右图、左图右文和三图。
左图右文的样式，强化图片，弱化标题。对于新闻资讯来说，图片无法准确的表达其新闻资讯的内容，所以这种样式目前没什么产品使用。
目前市面上绝大部分产品都采用左文右图，例如今日头条、网易新闻、腾讯新闻、新浪新闻等。只有是搜狐新闻采用左图右文。
三图则通过图片吸引用户点击查看，更加通过图片引导用户点击，好处是可以提升点击率，但是整个信息流显得乱，影响用户阅读。
和网易相比，头条信息流阅读起来更加舒服，视觉压力减少，这是基于今日头条三图样式占比很少，如下图所示，网易新闻信息流插入三图样式导致整个信息流杂乱。
对比下网易新闻和今日头条信息流样式，如下图所示：
纯文，今日头条的标题颜色更深，网易的相对而言淡一些。头条的列表高度比网易的高，这意味着，头条的屏幕展示条数比网易新闻的少，但是整体的空间感和留白呼吸感更舒服。同时今日头条含有发布时间，使得用户观看新闻资讯时，能够感知新闻的实时性。
左文右图，头条的列表比网易的要高一些，对比来看，头条的标题更加明显，图片含有圆角半径，使得头条整体看上去更舒服。
大图视频，两者的区别不大，依然是标题文字颜色、封面圆角和发布时间的差异性。
小结：
头条流整体的空间感、留白，标题颜色对比做的比较好。
留白相对于网易更多一些，相同的屏幕空间，展示的内容信息会少一点，屏幕展示效率会低一些。但用户在阅读过程中舒适度更强，同样的情况下用户的阅读时长会变长。
什么是信息流分发？通过一定的设计策略，将用户的流量合理的分配到其他各个地方，从而达到产品的设计目标，促进流量利用最大化。提升流量最大限度的转化，获得更大的商业化价值。
今日头条的信息流主要包含5个模块：置顶模块、资讯列表、广告模块、短内容、其他功能模块的卡片入口。如下图所示：
推荐流顶部的置顶内容，最多置顶两条，这里是因为相关政策原因。
在正常信息流第一条之后，插入广告，为平台做商业化营收。之后就会根据用户的阅读习惯，给用户推荐信息内容，并时不时的插入广告等。
今日头条没有编辑运营，所以几乎所有的新闻都来自于机器算法。少了编辑人员的人工运营，使得今日头条有巨量的内容按照不同用户的阅读习惯推荐用户不同的内容。
在新闻信息流产品里，搜索栏所承接的使用场景主要有两个。一个是提供搜索新闻功能，通过关键词对当前或过去的新闻进行搜索。
另一个是在搜索模块提供热搜新闻，提供用户阅读。
那么如何提升搜索栏的点击次数。今日头条将热搜新闻以提示语的形式展示在搜索栏滚动，吸引用户。同时为了更大限度的展示新闻条数，采用一排两个的设计，保证的提升点击率。
用户点击搜索框之后，搜索框里面内置第一条热搜关键词。用户可通过键盘上的搜索，进行搜索。也可以点击搜索栏下方的两个热搜新闻进行搜索查看。
视频标题内置于播放器中，这样的好处可以减少卡片高度，让视频曝光量提升，缺点是用户如果想看视频标题介绍时，则需要点击下播放器，标题才能再次出现。
标题置于播放器里面，头条可以展示2.5条，而好看视频将标题置于外面只能展示2条，如下图所示：
对于广告业务来说，收入的一个重要指标则是广告曝光量，为了提升广告的收入，则必须降低视频高度，使得广告曝光效率得到提升，以此提升收入，所以头条将标题放置于播放器里面符合商业目标，但是不符合用户目标。
小视频的布局设计大致有两种，一种是抖音式布局，采用头像和操作项位于右侧。这样的好处是，视频的互动量很明显的展示出来，可引导用户互动。但对视频的内容有一定遮挡影响。
另一种是好看视频式布局，将头像昵称、操作项放在底部，弱化视频的互动数据。让用户专注于视频内容。
今日头条的小视频采用和抖音一样的布局。头像和操作项放于右侧。但是为了引导用户评论，在界面底部加入了输入框，引导用户评论，为了让用户更加方便的看评论。上滑手势变成了调起起评论。
推荐流里面的短内容（微头条），点击进入短内容feed流。而非短内容详情页。用户如果想看详情，那么需要用户再次点击。
这种设计明显体验不好，估计产品为其他短内容导流。这样的交互设计，可以使得整体的短内容流的曝光量提升好几倍。
这种做法牺牲了体验，用户如果需要看详情，则需要连续点击两次。这是为了业务指标作出牺牲的设计。
文章来源：优设 作者：Echo的设计笔记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
偏差经常不知不觉渗入我们的设计。通过了解、消除这些认知偏见，可以帮助我们改善用户体验和服务质量，确保决策的一致和中立性。
供应链资源整合是企业发展态势。企业对内部多岗位协作、企业与企业间的协作效率有更多诉求。
企业级服务系统的智能在线处理、数据准确、信息安全等特征，成为企业实际作业的得力助手。（以下简称B端）
系统提供商也便对业务型产品、设计、开发、运营等人才有更多需求。
在C端浪潮中，设计师通过创造用户流畅和惊喜的体验，发挥了显而易见的价值。
然后B端系统的业务复杂特性，普遍认知产品经理、开发会体现更大的价值。
设计师作为中间角色，难免「尴尬」，甚至沦为产品经理原型的高保真绘制人员，缺少发言权，或初次接触对海量信息无从下手。究本质原因：
未直接接触业务方和用户，无法对需求场景有深入的了解，缺少系统性设计分析、设计判断能力
我在几年的实战中，运用辛老师 「交互设计五要素」 基础原理，融合于B端业务体系，形成一套自己的思维图谱。（以下简称五要素）
从「五要素」出发，会更快速地get到关键设计点，抱着开放的态度与产品讨论方案，总会愉快地达成一致，顺利对接开发。
就像我们写小说「讲故事」一样：时间地点人物、有什么目标、使用什么工具，完成什么事情，故事才完整。基于B端实际业务场景的五要素，阿飞解说如下：
角色：
老板、运营、销售、物流、采购、库管、财务等（不同岗位日常事项不同）
权限：
主子账号（涉及到模块间的操作权限、数据权限）
用户目标：
B端一般是具有明确的作业目标，更地完成工作。老板一般希望节约人力成本，且可即时响应客户需求
商业目标：
为客户赋能、提升下单率、支付率、新业务渗透力、裂变等
业务目标：
产品会不断的迭代，了解当下需求中的业务目标
设计目标：
基于以上目标，设计需符合用户思维习惯，提高处理效率，同时避免误操作等
任何场景下，人的行为都是有「目标动机」
当以「目标」为出发点，可以增强设计判断力，输出有效方案。另外真正有价值的商业目标一般都是和用户终极目标所吻合。
时间、地点是场景的必要组成
When：
随时随地在线或工作日期间，如：售后客服需要随时在线；财务人员一般工作日处理任务
Where：
办公室、仓库、户外等。需考虑线上线下结合，系统是为用户的线下作业场景服务
台式电脑、笔记本电脑、手机、平板、扫码枪、PDA、打印机、肢体、智能运输车等
互联网媒介又包含web网页端，web客户端，小程序，H5，App等
系统功能承载在媒介中，媒介承载在实际作业下使用的工具，存在多终端配合使用。比如仓库移动作业时，会使用到平板进行盘查核对等。
需要完成什么事？通过典型的任务流分析是否可达到目标
△ 仓库移动作业场景
B端复杂业务下，设计师主动了解用户实际的场景后，五要素作为必需思考元素，经过实战验证，带给设计师的机遇价值至少有2方面：
1. 对设计师自身：
有利于设计分析、判断思维体系的完善，考虑更全面；所输出的方案符合用户思维和习惯，更容易得到各方的认可
2. 对于业务价值
可作为考量产品方案可行性的判断准则
另外，产品原型一般基于「功能」本身，而设计师从用户实际场景规划用户的任务流，可以优化产品逻辑，补全缺失场景，也会给予创造性解决方案
比如「开发票」功能 ：
在需求评审中，针对于「A向B申请开票，A撤销申请不需要B操作同意」这点，我提出建议：「需要B线上同意」
首先确实是要避免无谓的用户线上流程操作，但针对这点，我分析如下：
所以「A撤销申请B需要线上操作同意或拒绝」
△ 打印发票
以「五要素」的分析思维的表述，最终与产品、技术达成一致。
在设计中，考虑到「A申请撤销」的单据，对于双方都是需要优先确认和处理的。所以除有即时消息通知外，列表中我做了2点设计：
（若不这样，在分页列表中特殊单据很有可能从第二页后才出现，用户都发现不了）
△ 状态操作参考框架示例-原创
回顾下B端交互设计五要素
设计师的分析、判断能力是非常重要，五要素则作为系统性的思维支撑。
B端浪潮中，设计师仍有很大的机遇和价值。基于五要素分析，会对业务有所优化和补充，或提出创造性的解决方案。
设计不仅是一种技能，而是对事物本质的感知和洞察能力
交互设计五要素不仅对设计师有帮助，同时对产品、运营等人员同样具有价值。
文章来源：站酷 作者：Aber UX设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。
--手机appUI设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
编辑导语：导出功能我们经常能够使用到，看似一个很简单的功能，实则在设计的过程中需要考虑很多的因素。本文作者对导出功能的全过程进行了思考，为我们分析了两种解决方案，拆解了导出前和导出时的设计，并且进行了总结。
功能（百度释义）：功能是一个汉语词语，拼音为gōng néng，意指事物或方法所发挥的有利作用；效能。
综合以上释义，我们再从产品的角度对其理解：功能的好坏不仅仅关乎其本身，更重要的要看是否为解决实际问题而服务。
那导出功能，解决了什么样的问题？我们先来看一个场景。
小A作为一名销售人员，需要每月向领导汇报一次销售情况，为了更直观的让领导看到销售情况，小A要对销售订单数据进行不同维度展示与分析。而目前系统只能查看订单列表与销售总额，不支持不同维度的数据分析。
从场景中我们可以看到这样一个问题，由于系统只能查看订单列表与销售总额，不支持更全面的数据分析，导致小A每次向领导汇报前，只能人工将一个月近5000笔的订单（此处不考虑后续不断增加的订单量）统计在excel中，从客户维度计算出销售额、销售量，完成客户维的销售情况分析。
从产品SKU维度计算出销售额、销售量，完成产品SKU维销售情况分析，导致小A的工作效率很低，同时人工抄录导致数据错误的的情况也常会出现，最终导致数据分析结果错误。
针对该问题，我们深入思考一下，小A想要进行更全面的数据分析，可以采用以下2种解决方案：
目前我们有两种解决方案可供选择，那我们采用哪一种解决方案会更好呢？
1）采用“新增销售数据分析页面”的解决方案
通过与小A的继续沟通发现数据分析的需求并不稳定，处于变化的状态。当依据小A的需求完成分析页面后，过了一段时间发现产品随着季节变化导致销售额也不稳定，从时间维度的分析数据没有参考价值，可能要舍弃这种分析方式。
此时我们发现，小A的需求可持续的时间极为短暂，不足以支撑一个长期存在的功能，但已经将其实现为功能，则意味着功能白做了或没有产生与成本对应的价值。
2）采用“导出销售数据到excel，通过excel的数据透视功能完成数据分析”解决方案
导出销售数据到excel，可以规避因手动抄录导致的数据分析结果错误问题，同时也会节省抄录数据的时间，提高小A工作效率。
数据导出后，小A可以通过excel的数据透视功能或者其他第三方软件完成定制化的数据分析，即使不开发数据分析功能，也可以满足小A的“更全面的数据分析”需求。
例如，当小A导出如下图所示的数据后：
小A第一步可以先完成不同月份的汇总，在表中添加“月份”字段，添加公式为“=MONTH(A2)”；
第二步：再点击表格中任意单元格–插入–透视表–新建工作表，将省份拖入数据透视表字段的【筛选器】，将月份拖入【行】中，将A、B、C、D产品销售额(元）拖入【值】中；将行标签改为月份，每个字段以求和方法计算并修改字段名称。
第三步：选中透视表中数据，调整格式为加千分位逗号，保留0位小数。
第四步：为了让数据展现可视化，插入透视图。
通过公式筛选、透视表、透视图的使用，小A可以点击查看不同地区、月份、产品的分类汇总数据，可以很直观地反映出时间维度的销售情况、不同地区的销售情况、很好地为产品选择、地域选择做出数据依据支撑。
数据分析功能会从数据源、数据处理、数据的可视化来实现，而Excel的透视表对应了数据明细（数据源），公式能够完成较多的数据计算任务（数据处理）。
透视图可以直观、清晰的展示各类产品在不同月份、不同地区的销售情况及总的销售情况分析，为产品布局提供指导性参考依据（数据可视化）。
另外当小A从数据透视图看到某个月份销售额过高，可以直接点击查看透视表中的数据明细是否存在错误，当小A想查看每个产品销售额的占比，可以新建数据透视表并将透视图切换成饼状图查看。
由此可见，用Excel来做数据分析不仅可以很灵活的满足需求，而且还很实用、很方便，也不会因功能的限制导致对数据无法分析。
通过以上论证，我们发现，既要能够解决问题又要支撑一个长期存在的功能，还要用较低成本以及最快的方式来完成，我们采用最佳的解决方案：“导出”。
既然已经明确最佳解决方案是“导出”，那接下来就从导出的全生命周期看看，如何设计导出功能？
1）明确导出数据限制
无论当前的系统数据量是多少，建议都要做导出条数限制。
因2003版的excel 一个sheet表最多导出65535条数据，2007版的excel是10万4000多条。如果不设限，当用户导出的数据量超过excel单个sheet的数据量时，会出现导出失败的情况，影响用户的正常使用，且产生对系统的不信任情绪。
那应该限制到多少条数据？
我们先来了解一下导出的技术原理，当用户点击导出后，数据会被以excel的形式下载到服务器，服务器再通过网络将文件发送给用户。
在这个过程中，导出条数受限制的原因一个是服务器性能，另一个是用户的电脑性能以及所使用excel版本，在实际产品设计时，根据实际情况，制定一个合理的数据限制即可。
回到开头的场景中，用户不仅要导出数据还要做数据透视表，假设用户使用的03版excel，导出30多个字段，使用大量excel公式，最稳妥的是限制到1万条数据以内。
做了一组极限测试数据供大家参考，使用一台2核4G的服务器、1个用户使用、导出条数是1048576条（导出最大条数）、导出3个字段、使用2010版excel，导出后当使用一个sum公式时，出现了如下图的错误，导致excel异常退出。
2）明确导出格式
数据导出格式有.xls和.csv，.xls是二进制的文件用excel才能打开；.csv是文本文件，用记事本就能打开。而当前用户导出数据后要进行的是数据分析，故只需支持.xls导出。
3）明确导出需求
导出一个excel一个sheet，还是一个excel多个sheet？
考虑到用户导出数据后要对订单数据进行分析，可以与用户明确是否需要按某一维度如客户维度将数据拆分成多个sheet，减少用户操作数据的时间以便能把更多精力放在数据分析。
如果用户不需要按照某一维度拆分数据，则采用导出一个excel一个sheet的方式。
表头是否需要增加序号列？
当用户导出订单数据后，为了让用户准确操作某一行数据，需要有唯一代表一行数据的标记，而在订单导出前是以数据库的主键来标记，对于导出后的订单，则需要自动增加序号列方便用户操作。
是否有内容需要用颜色标注区别？
在导出订单数据中，为了快速掌握销售情况，有些数据是需要特别关注的、而有些不需要。因此，可以使用颜色标注来做区别，让查看人员快速找到自己想要的数据，如可以标注总计快速查看总销售额。
是否需要合并单元格？
对于导出后进行数据分析，不建议使用合并单元格，因excel中合并单元格后仅保留左上角的值如下图所示，这样会使得筛选出现错误，也影响批量的公式使用导致透视表无法分析。
如果导出后只查看数据，可以考虑使用合并单元格。
1）是否需要导出维度
百度释义：维度是事物“有联系”的抽象概念的数量，如时间维度是以时间作为描述、表达变量的度量尺度。
导出维度是指的按照特定场景下，导出以某个字段为主导数据且与该字段相关的其他字段数据。
一般来说，财务和仓库的导出业务场景不同，财务需要以订单维度导出，仓库需要按商品为维度导出，如果无需导出维度，则不需要过度设计。
2）设置表头导出字段
由于订单的一条记录数据字段会很多，包括：订单号、销售类型、客户名称、产品名称、数量、单价、收货人、联系电话、账期、发货时间、预约到仓时间、发货基地名称、发货方式、合同折让率、应收款、已收款、未收款、产季等近30个字段。
而订单分析时，收货人、联系电话、发货时间等字段则无需导出。
因此选择字段导出，可以让客户能够更快速使用并完成分析。导出和查询均要使用筛选，但呈现结果的方式不同，两者的使用场景是可以借鉴的，建议可以放置筛选区。
3）是否需要支持选择行导出
一般来说，导出数据为全量数据，如果用户通过字段选择不出需要的数据，此时要支持用户勾选某些行数据，提示用户当前勾选数据明细及数据条数。
4）其他处理
为了让客户清晰的明白订单是如何导出的，需要在导出时给予导出规则、导出图片、附件形式说明文字提示。
5）根据导出数据量，明确数据处理方式
从技术的角度说，针对较大数据量的导出场景，可以采用异步的处理方式，降低客户的焦急心理。
所谓异步，就是用户点击导出按钮后，后端接收请求并执行读取任务，用户可以不用停留在原处等待，离开当前页面去处理其它工作任务，之后再打开任务页面查看导出结果。
如果有数据可以预先计算，后端可以直接预先计算，同时避免了因采用同步的处理方式导致长时间等待的结果，客户体验会更好，工作效率也会更高。
6）是否需要任务页面
如果用户点击“导出”按钮后，10秒钟内不能完成文件打开，会让用户产生焦虑心理。为了让用户使用体验更佳，需要有一个固定页面即任务页面来承载导出任务列表。
功能，是为解决问题而生，而功能的起源是需求，需求是从场景中找到问题。
由此可见，功能设计流程一定会包含场景选定、问题分析并找准需求、解决方案分析、选定功能、功能设计这5个阶段。
做功能设计时，时刻问自己三个为什么：为什么这是一个问题（问题具备危害性）？为什么要解决这个问题（被解决的价值）？为什么我选定的功能可以解决这个问题（功能的价值）？
导出不仅可以解决文中的“需要更全面的数据分析”的问题，还可以解决“数据离线使用”的问题，导出后，数据以本地文件的形式存在，可离线使用。
另外导出还能解决“数据交付系统外部人员”的问题，导出后，数据以独立文件的形式存在，可以复制，传递。
文章来源：人人都是产品经理 作者：努力的小妖
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
写在前面
在平时的设计过程当中，你可能会有这样的疑惑，为什么在大部分APP中，当单个按钮和多个按钮同时存在时，最重要的按钮一般都会放置在页面的右侧呢？如果最重要的按钮放在左侧又有什么问题呢？按钮放在右侧的原因是什么呢？它又有什么理论依据呢？接下来带着这些疑问，开始我们今天所要介绍的内容：交互心理学之古腾堡原则
古腾堡原则的起源
古腾堡原则是由14世纪西方活字印刷术的发明人约翰·古腾堡提出，早在20世纪50年代，他在设计报纸的过程中，提出了一项原则，认为人的阅读方式应该是遵循某种习惯进行的，就像读书一样，由左到右，从上到下。这其中蕴含着什么信息呢？经过研究最终得出被后人所熟知的结论：古腾堡原则，并附上了一张图，名为「古腾堡图」。古腾堡图将画面所呈现的内容分成四个象限：
1、第一视觉区(POA)：左上方，用户首先注意到的地方
2、强休息区(SFA)：右上方，较少被注意到
3、弱休息区(WFA)：左下方，最少被注意到
4、终端视觉区(TA)：右下方，视觉流终点
从图中可以看出，用户视线很自然的会从第一视觉区开始，逐渐移动到终端休息区。整个阅读过程视线都会沿着一条方向轴开始从左到右浏览。用户会更容易关注到页面的开始与结束区域，而中间的段落则很少被关注到。古腾堡揭示了一个实用的视觉轨迹规律：阅读引力是从上到下，从左到右。
遵循古腾堡原则把关键信息放在左上角、中间和右下角，能够更好的体现元素的重要性。例如：我们平时所看到的页面弹窗、各种证明文件和合同文件等等。
古腾堡图通过对设计元素的重量与元素布局和组成方式进行调和，指导眼睛的运动轨迹。让用户迅速获取有价值的信息，同时用户对信息的熟悉程度也是影响眼睛运动轨迹的因素之一。
而随着互联网的兴起，古腾堡原则也逐渐被应用到APP设计和网页设计当中。接下来让我们来看看他在界面中的实际应用。
在设计中的应用
1.1 底部单个按钮
这种形式在引导用户操作的页面中最为常见，为了能够保证用户对内容进行阅读，所以将按钮摆放在页面底部，内容放在顶部，这样的摆放即符合用户由上到下的阅读习惯又达到了产品预期的目标。
1.2 底部垂直双按钮
上面我们提到了单个按钮的摆放思路，接下来看一下垂直双按钮的摆放思路是怎么样的。如果一个界面上同时存在两个优先级不同的按钮，并且产品希望用户对每一个按钮都有足够的关注度，那么垂直摆放是最佳选择，虽然垂直双按钮在样式上做了区分，但用户同样会停留一段时间将按钮的内容进行对比思考。
那么，按照古腾堡原则，重要的按钮应该放在页面最底部，原则上它应该是这样的：
仔细观察上图，有没有发现浅色按钮很容易被忽略掉，这样就违背了产品要保证每一个按钮都要有足够关注度的初衷，所以我们要违背古腾堡原则来满足业务需求，正如我们所看到的微信授权页面一样，
为了保证「同意」与「拒绝」这两个独立的按钮能够被用户足够的重视，并且其中的任意一个按钮不会被轻易的忽略掉，这里将「同意」按钮颜色加重，并且放在「拒绝」按钮之上，让眼睛原本垂直向下的运动轨迹产生回流的变化。
小结
原则是设计的基础，并非一成不变，要合理权衡设计原则与产品目标之间的关系。
2、顶部按钮分析
由于顶部导航栏空间有限，导致按钮相对较小，并且不便于点击操作，所以这类顶部按钮适用于修改内容的编辑页面，即可以避免误触，又可以让用户关注内容本身。关键按钮至于顶部，还可以缩短用户眼睛的运动路径，让用户更容易注意到其状态的变化状态。
小结
顶部按钮更关注可编辑的内容区域，并非按钮。而底部按钮则更关注按钮本身。并非内容。
3、水平按钮分析
除了上面提到的顶部按钮和底部按钮，还有水平摆放的按钮，比如淘宝详情页、京东详情页、网易严选详情页的「加入购物车」和「立即购买」按钮，界面中的「立即购买」按钮都放在了右下角，结合古腾堡原则的视觉终点说明，右下角为视觉终端区域，即视觉最终停留的位置，所以他们都将与转化率密切相关的「立即购买」按钮放在了界面的右下角，让用户更容易关注到。
再比如比较常见的「取消」和「确认」弹窗样式，通常是在需要让用户确认某种操作行为时出现，有可能是提交表单、协议授权、获取用户信息等等，为了防止用户误操作，这也是提升产品体验的小细节。
平常我们所看到的弹窗，推荐按钮都是在右侧，那么将推荐按钮放在左侧会怎么样？如下图所示：
不难看出推荐按钮放在右侧后，视觉在水平方向轴上产生了回流。
弹窗的目的是想让用户点击「确认」按钮，如果将「确认」放在左侧，根据古腾堡原则，用户的视线会不由自主的向右侧移动，也就是「取消」按钮的位置，想要回到左侧「确认」按钮位置就需要移动视线，并且眼睛的运动轨迹会在水平方向轴上来回的往复运动，无形中增加了用户选择时长。如果将「确认」放在右侧，「取消」放在左侧则可以为用户提高操作效率。
在实际产品中的应用案例：
小结
当产品想要让用户进行某种操作时，主要按钮放在右边
总结
1、古腾堡图第一视觉区，强休息区，弱休息区，终端视觉区
2、原则是设计的基础，并非一成不变，要合理权衡设计原则与产品目标之间的关系
3、顶部按钮更关注可编辑的内容区域，并非按钮。而底部按钮则更关注按钮本身。并非内容
4、当产品想要让用户进行某种操作时，主要按钮放在右边
文章来源：UI中国 作者：Coldrain1
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在经典的尼尔森十大启发式当中，「系统状态可见性」可以说是如今交互设计领域当中，最为重要的原则之一。通过向用户展现当前的状态，让用户拥有对系统的控制权，建立用户对于产品的信任感，这也是这种设计启发式的最重要的价值之一。
但是，想要做到可靠、易用，系统状态展现的技巧是很讲究的。这里梳理了4种最为常用的方法，结合了不少实用的案例，希望对你有所帮助。
1.1、让用户知道自己在哪
没有人会喜欢迷失方向，但是无论在现实生活还是在数字领域当中，这种情况都会发生。让用户知道他们在哪里是创建良好导航体验的关键。应用程序和网站都应该凸显当前的导航选项，帮助用户了解他们所在的位置。
Google 的底部导航栏设计
1.2、要经过多少步骤来完成任务
这也是一个非常基本的操作，通过展现步骤数量，帮助用户来预估完成这个过程所需要的时间。
Selecto 的调查问卷的设计
数字界面毕竟不是现实世界中的真实硬件机构，用户更多只能借助交互过程中的即时视觉反馈来确定是否完成了操作，即时的视觉反馈因此显得非常重要。
即时的视觉反馈让用户的操作得到了视觉上的「认可」，从而强化了「确信感」，这样一来一回的确认可以避免错误的发生，比如可以避免用户因为「感觉没有点下去」而反复点击。
这种视觉反馈的设计，最常见的范例就是点击按钮按下的微交互动画，它告知用户「系统已经捕捉到点击交互了」。
AliAli 所设计的悬停点击动画
但是在某些状况下，按钮的视觉反馈还有很多不同的呈现形式，有更多可见的、可理解的新形态，可以在原有的基础上探索更多可能性，比如下面的
2.1、单击点赞按钮
Spread love, not viruses ，作者 Charles Patterson
2.2、开关按钮
这个开关按钮不仅有点击动效，而且色彩和按钮标识也随之改变，更为清晰地表明状态，甚至兼顾到了视觉障碍用户
Switcher XLIV , 作者 Oleg Frolov
2.3、书签按钮微交互
这个书签按钮通过色彩的虚实变化来呈现书签已添加的状态，颇为巧妙。
Bookmark interaction，作者 Oleg Frolov
2.4、添加购物车微交互
在这种情况下，视觉反馈非常明确且优雅地告知用户已经添加到购物车里面了。
咖啡下单动效，作者 Nhat M. Tran
3.1、系统正忙于什么事情
当系统正在加载，正在执行，正在运行的过程中，通过动效来告知用户系统并没有停止，而是正忙于执行某件事情，是避免用户误解的手段。在用户等待的过程中，通常会实用无限加载的动效（一般使用在低于10s的操作中）：
对于超过10s的更长的执行过程，无限加载的动效会显得令人沮丧，这个时候实用进度条会更好：
这些视觉反馈很大程度上降低了系统给人的不确定感。
对于移动端应用，在初始加载阶段所使用的启动动画界面，是否精心设计，决定了用户对于整个产品的第一印象，优秀的初始加载动画能够将用户的注意力从焦躁的等待中解放出来。
Logo 闪屏 ，作者 Gleb Kuznetsov✈
3.2、内容加载
当用户需要时间来加载内容的时候，建议使用一种特殊的的容器「界面骨架」来展现。这种临时的内容容器不仅能够帮助用户快速地了解界面的整体框架，构建用户预期，并且能够在后台快速地加载数据，渐进式地帮用户获得信息。
内容加载，作者 Ginny Wood
这种设计方式对于移动端和桌面端的设计同样适用：
界面骨架加载动效，作者 Shane Doyle
4.1、通知和提醒
有效的通知和提醒，能帮用户意识到有新的事情正在发生。在多数时候，我们建议设计师使用微妙的动画来进行通知，因为动画效果会自然地吸引用户的注意力，人类的双眼的动态视觉其实是非常强的。
Aleksei Kipin 设计的通知动效
4.2、提示用户采取行动
在很多情况下，用户界面中会有很多地方会需要用户提交信息。比如，需要用户提交表单，或者用户创建了一个密码，但是在复杂度上不足需要修正，或者填写邮箱来订阅信息的时候，邮箱格式出错，等等。使用适当的视觉反馈总能够更加有效地将问题告知用户。
内联邮箱验证机制，作者 Derek Reynolds
让用户有掌控感，就是为用户创造更好的体验。在很多设计方案中，视觉反馈会因为种种原因被削弱了，甚至被忽略了。但是当用户在和 UI 进行交互的时候，期望度和可动性其实是高度依赖于这些动效和微交互，而这正是设计师需要设计出优秀视觉反馈效果的原因所在。
文章来源：优设 作者：Nick Babich
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户隐私安全在产品设计中是很重要的一个环节，本文从用户体验角度切入，从匿名模式、减少永久性和减少公开性三个方面展开分析。
我们先看⼀组来⾃⽪优的2019年6⽉的调研数据：70%的美国⼈认为，与5年前相⽐个⼈信息变得更不安全。尤其是⾼学历⾼收⼊群体。由此可⻅⽤户对个⼈信息数据的隐私担忧⽐以往更甚。
⽤户隐私安全很重要，涉及的范围和⻆度也很多。本次的分析从⽤户体验⻆度切⼊，涉及如下三个⽅⾯：
Incognito Mode匿名模式；
Reducing Permanence减少永久性；
Reducing Publicity减少公开性。
下图是Google系App(Google AppChromeYouTubeandGoogle Map)匿名模式切换，从交互体验上来说有如下⼏个特点：
统⼀在右上⻆；
可以便捷切换⾄匿名模式，反过来也很容易切回登陆状态；
匿名模式的状态提示，例如YouTube 在匿名模式下在界⾯底部有⼩字提示“您 当前处于匿名模式”。
匿名模式不是最近才流⾏的功能，最早提供隐匿模式的是苹果safari浏览器，早在 2005年就⽀持了匿名模式。Chrome浏览器在2008年就开始⽀持此模式。虽然由来已久，为什么到了2020年，匿名模式依然是国外互联⽹⼀⼤趋势呢？
我们看⼀组数据：
这是来⾃DuckDuckGo 2019年9⽉的调研（DuckDuckGo是美国的⼀款不记录⽤户⾏为保护⽤户隐私的搜索引擎）。样本来⾃美国、英国、德国和澳⼤利亚的成年⼈⽤户，共计3,411⼈的调研得出。各国⽤户对使⽤搜索引擎的个⼈隐私安全⾮常在意（是否搜集个⼈的数据和记录搜索⾏为）。
2020年5⽉DuckDuckGo⽇均搜索次数为6200万。对⽐看2019年11⽉底⽇均搜索次数4900万，2018年10⽉是2900万。
最近⼏年的持续活跃度⾼幅增⻓证明了不记录个⼈隐私的搜素引擎越来越受到⽤户的⻘睐。
国内，头条、UC浏览器在搜索框输⼊状态也提供了“⽆痕浏览”⼊⼝。
不仅是搜索引擎领域，保护⽤户隐私也成为Facebook最重要的战略⽅向之⼀。Facebook CEO Mark Zuckerberg在2019年 F8开发者⼤会上喊出“THE FUTURE IS PRIVATE”。2019年3⽉Mark Zuckerberg发⽂，主题就是《聚焦于保护隐私的社交⽹络》。
我们先看国外社交媒体Stories（⼩故事）产品形态的流⾏。
⼈们总是对于所分享的内容永远记录在⽹上感到担忧。Stories24⼩时消失缓解了⼈们的隐私顾虑，这让⽤户更安⼼地⾃然分享。
Stories由Snapchat⾸创，由 Facebook发扬光⼤。早在2019年4⽉，Facebook+Messenger Stories, Instagram Stories⽇活⽤户数就突破5亿。 2020年2-3⽉LinkedIn，Twitter也先后宣布将上线类似功能。
来⾃⽪优的调研报告：41%的美国⼈经历过⽹络骚扰，最常⻅的就是在社交媒体上。23%的⽤户最近经历的⽹络骚扰来⾃评论区的评论内容。27%的⽤户经历⽹络骚扰后决定不再发布任何内容。
我们以限定评论互动的公开性为例：
2020年5⽉Twitter上线了新的评论功能，可以限定谁可以回复帖⼦的功能，提供了三种选项：谁都可以评论，只有被关注者可以评论，只有被提及者可以评论三种公开度的限定。
Instagram也在测试“评论限制”新功能，批量屏蔽/限制评论。⽬前已经上线的⼀个例⼦：⽤户（评论发布者）如果发布的评论含有攻击性敏感词，发布前伴有提示，提醒评论含有攻击性敏感词是否真的要发布。
注重隐私提供仅好友可⻅/仅⾃⼰可⻅/仅作者可⻅/等多重维度的隐私设定有助于⽤户更安⼼地参与互动。
另外⼀个例⼦是付费频道会员：付费频道会员-限定频道的公开性让内容创作者减轻隐私顾虑不仅能获得⼴告收⼊，也能得到来⾃会员、会费的收⼊，形成“忠实粉丝”社区，有助于内容⽣态的社区化建设。
我们主要看YouTube的频道会员案例：
YouTube有两种会员模式。⼀种是YouTube整个平台的付费会员，去⼴告，看原创美剧影视，消费⾳乐，可下载内容的模式。第⼆种模式是Youtuber个⼈频道付费会员，吸引忠实粉丝加⼊。我想说的就是第⼆种。
为什么⼤V⽹红有意愿开通频道会员？
除了获得忠实粉丝收⼊变现的商业价值以及付费频道会员可以为忠实粉丝提供各种专属功能，背后也和⽹红⼤V对个⼈隐私顾虑有关。
⽹红⼤V在完全公开的社交⽹络上需要始终保持⾜够克制谨慎，避免引起争议。但在忠实粉丝付费频道专属会员群中，⽹红⼤V会减轻隐私顾虑，更加回归⾃我。
⽐如在频道会员中发布更多与个⼈⽣活相关的内容，表达更多不便在完全公开的社交⽹络中的想法和感受等，因为忠实粉丝通常更具包容度，更不容易引起争议。
YouTube频道会员费⽤可以从三种会费（按⽉）区间选择，⽀持多选：
低阶 Low Levels $0.99~3.99;
中阶 Medium Levels $4.99~14.99;
⾼阶 High Levels $19.99~49.99;
频道会员功能在2018年开始测试，⾯向粉丝数过10万的YouTuber开放。
以上综述，我们可以说：
1.匿名模式：
虽然匿名模式由来已久，但仍然是当前的⼀⼤基本⽤户体验设计趋势，尤其是匿名模式的切换便捷性⾮常重要。
2.减少永久性：
Stories⼩故事24⼩时消失缓解了⼈们的隐私顾虑，这让⽤户更安⼼地⾃然分享,已经成为国外社交媒体平台的必备功能，Facebook， Instagram平台的最主要、最具影响⼒的功能之⼀。
3.减少公开性：
⽤户总是对在社交媒体平台发表评论有所顾忌，限定评论的公开性能够有助于促进⽤户发帖表达，其他⽤户也可以更安⼼地参与互动。
付费频道会员可以限定频道的公开性，让内容创作者减轻隐私顾虑不仅能获得⼴告收⼊，也能得到来⾃会员会费的收⼊，形成“忠实粉丝”社区，有助于内容⽣态的社区化建设。
从UE⻆度，我们可以为频道会员提供专属身份设计例如专属徽章，专属表情等。
THE FUTURE IS PRIVATE， 注重⽤户隐私的体验设计越来越重要！
文章来源：站酷 作者：百度MEUX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着车内屏幕越来越多，越来越大，驾驶者在开车过程中因操作屏幕而分心机率逐渐升高。众多汽车制造商均希望探索出一种降低或避免「驾驶员分心」的安全性技术。
手势，是指人手、手和手臂结合产生的动作，作为解决「驾驶者分神」这个痛点的解决方案之一，正在全世界的汽车制造商中掀起「热浪」。
你只需要随意的挥一挥手，就能挂断电话；将手指向顺时针或者逆时针方向移动，就能调整音量大小。
汽车手势的出现，源于对车内屏幕的操作。而这些操作均来自于移动端的设计标准，比如苹果IOS设计规范中的标准手势或者谷歌Mertiral Design中的标准手势。
△ 移动端常见交互手势
常见的手势如上图，分别为
为了满足手机屏幕外观改变，屏内显示内容越来越多元化的需求，设计师们也在探索屏内手势的新玩法。
△ android底部导航栏按键从左至右分别为：返回上一级、返回主页、多任务
2017年iPhoneX的发布，正式开启了全面屏时代。为了替代Home键及android底部导航栏，各大手机厂商相继开始拥抱「全面屏手势交互」。
在车机系统中，部分汽车制造商也在积极迎接变化，比如理想one采用「三指下滑」的手势交互替代「返回主页」的图标按键。
△ 「 三指下滑」表示返回主页
2019年的Google I/O大会上，新版本Android Q选择与IOS采用一样的手势操作逻辑，即在屏幕下方提供一个指示条，用户在左侧页面边缘右滑代表「返回上一级」、提示条区域上滑代表「返回主页」、提示条区域上滑并悬停代表「多任务」。
△ android系统中的三种全面屏手势
随着全面屏手势在手机端的操作交互上达成一致，相信在不久的将来，也将越来越频繁的在车机端看到全面屏手势的「身影」。
当汽车与数字屏幕相遇，如何让屏幕与内饰结合的更加完美，又能突显品牌特性，似乎给内饰设计师带来了许多挑战与机遇，「一字屏」、「T字屏」、「7字屏」、「旋转屏」应运而生。
△ 拜腾M-Byte 一字屏
△ 理想one的T字屏
△ 合创007的7字屏
△ 比亚迪王朝系列的旋转屏
与此同时，因为成本及技术的限制，汽车制造商的量产车型不得不在屏幕上做出妥协。理想one的妥协方案是利用3块屏幕组合，在视觉上形成「大长屏」的既视感。
要让3块屏幕「变」成一块屏幕，仅仅在视觉上做足功夫显然还不够，多屏联动手势交互也不能「缺席」。
事实上，多屏联动手势交互依旧来源于IOS及android系统中的标准手势，它将不同的手势进行组合，并与页面联动显示，形成了多屏联动手势。
理想one在停车模式下，用户长按并向左滑动，即可将副驾娱乐屏上的信息「甩动」至中控屏。
天际ME7不仅有3块屏幕组合而成的前排「一字屏」，还有2块后排乘客娱乐屏，5屏联动的手势交互，天际采用「手势+屏幕显示」来解决。
在中控屏、副驾娱乐屏和后排娱乐屏上采用五指抓取手势进入多屏互动页面，比如想把中控屏上的内容分享给副驾娱乐屏，第一步是单击选中副驾娱乐屏，第二步按住并拖动中控屏至副驾娱乐屏位置，第三步在副驾娱乐屏中点击确认。
视频版交互演示：https://v.qq.com/x/page/w08791lhqus.html
通过隔空手势接听或者挂断电话，这似乎是科幻电影中才有的情节。但正如开篇所说，车内屏幕数量增多，尺寸加大的同时「驾驶者分心」的机率也增加了，盲操手势与隔空手势的出现，是解决这个痛点的一种尝试。
目前量产的汽车中，盲操手势主要是通过标准手势与声音反馈的组合来实现。
比如在理想one中，用户在空调屏上左右滑动可以调节风量，上下滑动调节温度，且系统通过声音反馈告知用户操作成功与否。
与盲操手势相比，隔空手势似乎科技感十足，备受汽车制造商的青睐，我们不仅可以在各种概念车上窥见它的踪影，在君马SEEK上，也可以实际操作一番。
君马SEEK提供8种隔空手势。
△ 左图：接听电话 右图：挂断电话
△ 左图：上一曲 右图：下一曲
△ 左图：音量升高 右图：音量降低
△ 左图：音乐播放/暂停 右图：玫瑰花
与君马SEEK相同，宝马提供「向左」手势代表上一曲、「向右」手势代表下一曲，「yeah」手势代表播放或暂停。
但在许多其他操作上，宝马与君马的手势操作则各有特色。
君马SEEK使用手掌的正面与反面来区分不同的操作，正面表示接听电话·/音量增加，反面表示拒听/音量降低。
宝马则选择向屏幕方向点击代表接听电话，手掌向右挥动代表拒听电话，手指顺时针画圈代表音量增加，手指逆时针画圈代表音量降低。
在倒车影像中，手指向右挥动代表调整视角。
△ 图片来源于「汽车界的扛把子」的短视频《宝马手势控制详细演示》
在手势交互上，拜腾也交出了自己的「成绩单」。
拜腾的手势识别共五种，手掌向下激活手势识别，手掌向上启动主页面，手指移动代表移动光标，ok手势代表确定，五指捏合可拖拽内容。
△ 图片来源于太平洋汽车网《拜腾Concept手势感应系统操作演示》
这些高大上的技术看起来令人兴奋，但在实际使用的过程中，依旧存在识别范围有限、识别精度不灵敏、识别后的响应速度慢等等问题，而各个厂家的手势识别没有形成统一的标准，且没有大规模在在用户中进行推广，必然会增加用户的学习成本。
手势识别对用户来说是「真香」还是「鸡肋」，相信时间会给出答案。
参考文献：
汽车内手势的交互设计，是一个有趣又好玩的课题，但如何让这个课题在好玩但同时易用、好用，恐怕只有设计师不断思考，并不断采用一些用户测试的方法进行验证才能获得答案。
文章来源：优设 作者：点滴DESIGN
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
