交互设计 Interaction Design 也被成为IXD。交互设计建立起了人与计算机便捷沟通的通道，它的目标是创造可用性和用户体验俱佳的产品。作为UI设计师，我们在工作之中经常会对接交互设计师和产品经理，他们具有丰富的交互知识和经验。那是不是我们作为UI设计师，就只需要专心做好视觉层面的工作而不需要了解交互设计了呢？当然不是，在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好，视觉设计师是交互设计中非常重要的角色。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

UI设计师如何有效的跨团队、多角色沟通？

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

作为设计方接口人，我近期参与了某产品新版本的交互设计及开发跟进工作。该项目的产品规划、设计、开发、运营由京深两地四方多个团队合作进行。结合自身项目经历，现将我对跨团队多角色沟通的感悟与经验加以总结，希望对大家有所帮助。有效沟通是提升工作效率的基础，尤其是鹅厂这种业务涉及多地、对外多有合作的大型公司，进行跨团队的、多角色转换的沟通是工作常态。跨团队合作项目通常需要我们在团队内部、异地leader、内外部合作伙伴、第三方外包等多种角色间灵活调整沟通方式，运用有效的沟通手段，以确保沟通效果。

背景

有效沟通是提升工作效率的基础，尤其是鹅厂这种业务涉及多地、对外多有合作的大型公司，进行跨团队的、多角色转换的沟通是工作常态。跨团队合作项目通常需要我们在团队内部、异地leader、内外部合作伙伴、第三方外包等多种角色间灵活调整沟通方式，运用有效的沟通手段，以确保沟通效果。

索引

本文将从有效沟通的心理建设、角色分析、流程搭建+工具沉淀三个层次展开。

心理建设

有效沟通的两点认识

为“传”而“达”

沟通是信息的有效传达。“传”是手段，要求沟通时需阐明观点；“达”是目的，指明沟通旨在使人通达理解。沟通中出现的自说自话、固执己见，通常是偏执于“传”，而忽视了“达”。需要明确的是，所有的沟通，都应该以接收方更好的理解接受为目的，而不是自顾自的滔滔不绝。

减少损耗

信息传达的过程伴随着信息的损耗。因此，在沟通的各个环节都需注意减少损耗，提升触达率。一方面，要理清自己的表达重点和思路，减少信息的输出损耗；另一方面，要从接受方关注点出发，提升对接受者的信息触达；此外，还要灵活切换沟通方式、正确处理意见分歧等，尽量减少信息在传递途中的折损。

跨团队多角色沟通的基本态度

跨团队——秉持中立合作的态度

• 中立——团队不同，诉求不同，秉持中立的沟通态度，不要因个人偏向导致无意义消耗。

• 合作——以同理心赢得各方的信任，避免抵触情绪的产生，营造良好的沟通氛围。

• 产品目标导向——对有争议的问题点，应综合权衡用户体验、产品目标和开发成本，以产品目标为第一要义。

多角色——认清各方关注点的差异

• 理解各方差异化的核心诉求——对不同团队角色的沟通中应有不同的侧重点，灵活的转换角色，做有针对性的输出表达。

• 对内交流——以产品目标为导向，保证内部一致；对上汇报——重点明确，避免流水帐；对外沟通——目标明确，内部一致，有针对性的沟通，避免互相拆台或鸡同鸭讲。

角色分析

项目组成员角色模型

项目伊始，在融入团队的过程中，应注意理清项目组内的不同角色，明确汇报对象，做好任务分工，理清利益关系，协调各方诉求。

（具体项目组角色模型可能涉密，略）

各角色核心诉求及沟通侧重点模型

不同角色的核心诉求不同，也因此在对不同角色沟通时也应该有所侧重，以本项目为例：京深两地四方的所有成员，可大致划分为如下七种角色。

各角色核心诉求及沟通侧重点小结

流程搭建

有效沟通流程模型

在有效沟通流程模型中，我按筹备、执行、跟进三个阶段，绘制出体验地图，将沟通中的关键节点按行为、心理、情绪、方法、工具五个纬度拆分，梳理各节点需注意的问题，以及相应的有效沟通方法和工具。（详情请点击查看大图）

筹备阶段——明确目的，同步信息

• 明确沟通目的。无论是同步邮件、电话会议还是IM群聊，都需要在发起前明确目的，列好问题清单，带着目的沟通。如：多方电话会议前，应事先知会各方会议主旨，准备会议提纲并在会议开始时向各方阐明，为会议提供清晰的行进框架。

• 提前同步信息。信息同步是沟通的前提。依据沟通目的准备沟通所需的文档，根据需要提前同步，尽量减少因信息不对称带来的时间浪费。明确易读的设计输出、正式沟通前与各方单独的预沟通、提前邮件同步告知等，都是有效信息同步的手段。

执行阶段——抓大放小、促成共识

• 对待争议，抓大放小，避免僵局。评估争议点时，先不要基于反驳避免情绪化表达，适当发问：为什么做？为什么不做？不做之后有什么后果？理智全面的做出评判。给问题点评定优先级，抓大放小，集中精力推进主功能，高成本、低优先级的细节问题放到最后统一处理，避免陷入“就是要改”vs“就是不改”的无谓消耗。根据需要及时协调第三方资源进场，寻求技术支持或资深leader的建议，避免沟通僵局的出现。

• 促成共识。无结果的沟通是无效的沟通，有效沟通应促使各方达成共识。无论是待协调、暂搁置还是需改进，都需要有一个结论明确、责任人明确、截止时间明确的沟通结论，并依此执行跟进。

跟进阶段——同步落实，自我反思

• 进度同步，问题落实。沟通过后及时同步沟通结论，设计交付、前端交付等阶段性时间节点，需以正式的项目邮件，及时周知项目相关人员。对于已解决的问题，及时跟进验收；暂时搁置的问题，做好记录，明确时间节点和责任人；需更多资源介入的问题，及时对上反馈，申请资源解决。

• 自我反思与补齐。每次沟通都是一次查漏补缺的过程，每次沟通后花时间反思一下本次沟通中自己在设计说明中有哪些疏忽、表述上有何不足、相关知识上有那些欠缺，以此为鉴及时调整、补齐疏漏。

工具沉淀

开发故事卡

说明：明确易读的设计说明文档

功能：产品设计说明、开发指导手册、阶段性交付走查依据

使用场景：跨团队沟通中，便于开发人员准确的理解设计意图；适合外部合作时模块化开发与阶段性交付，便于交付及走查。

使用要点：

• 根据信息构架拆分产品模块，分别设立索引，提供产品概览，串联各功能详情页。

• 在索引和详情页之间由超链接跳转，方便快速定位。

• 按照功能点拆分详情页，提出功能需求，明确验收标准，说明页面细节。

• 各页面统一编号与视觉源文件一一对应，方便快速查找。

需求管理文档

说明：需求及反馈问题的规范化管理模板

功能：需求变动及问题反馈的管理模板、开发发跟进的沟通文档

使用场景：开发跟进阶段，实时记录变动的需求及反馈的问题点；设计侧定期反馈给开发人员的规范化输出文档。

使用要点：

• 明确问题及目标效果，排定优先级依此解决。

• 明确负责人和时间节点，保证落实。

• 做好文档更新维护及信息同步。

• 按阶段统一反馈调整，节约开发时间。

关注点推进模型

说明：不同项目阶段明确核心关注点的虚拟模型

功能：辅助聚焦当下关注点，避免陷入不合时宜的细节或宏观问题

使用场景：从宏观到微观的产品设计过程中，帮助梳理各个阶段需沟通的核心问题，沟通时陷入细节或反复争论时的自查工具。

使用要点：

• 做好关注点的的逐步推进：探讨信息构架时就不要在交互样式上反复拉锯；讨论交互方式时就不要过度关注视觉细节。

• 不过早陷入细节。优秀产品的细节固然需打磨，但从0到1实现一款产品的过程中，将有限的资源和排期消耗在不合时宜的细节权衡上，得不偿失。

• 同样，若因执行时的设计挑战需调整产品上层，也需主题限定问题范围，不要因宏观问题上的反复而影响执行效率。

优先级评估模型

说明：不同项目阶段评估需求优先级的KANO衍生模型

功能：借助KANO模型分析思路，对需求优先级提供排定依据

使用场景：设计阶段样式取舍、开发跟进阶段需求调整的先后顺序、应对分歧如何抓大放小，都可以借助优先级评估模型辅助评估。

使用要点：

• 不同项目阶段，不同沟通对象对同一需求优先级的评定标准不同，因此应注意根据项目阶段和沟通对象灵活调整。

• 不同产品在用户体验与产品目标取舍上有所区别。一般而言，2C产品更注重用户体验，而2B产品则可能更注重实现产品目标，因此应注意具体产品具体分析。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

积分的作用在整个产品的过程中主要是希望是围绕着拉新、留存、促活去做的，配合着主打新功能等等根据产品的差异而差异化。从用户为出发点，将积分可以分为两大块：一块是获取、一块是消耗。

首先，就积分而言，是用户通过完成某些任务或手段来进行对应积分点的获取，再通过相关的手段进行消耗的一个过程。

所以从用户为出发点，将积分可以分为两大块：一块是获取；一块是消耗。

下面针对两点分开来说：

一、获取（主要是获取的方式和对应的规则）

获取方式，大类可根据用户完成对应任务类型分为：

1. 新手任务类（这是一个帮助用户熟悉产品同时激励用户使用产品的过程）

• 绑定手机；
• 绑定邮箱；
• 上传头像；
• 首次消费/发文/分享等等对应产品核心功能的首次使用；
• 完善个人信息。

根据产品核心功能和侧重点的不同而不同，一定要区别哪些信息内容是我们想从用户处获取的核心，哪一些并不是很重要。不要人云亦云，不要有“别的产品有了所以我也要有”的思想，思考一下为什么你要需要这个任务。可以多参照其他积分体系完善的对它们进行整理归类，之后结合自身产品特性再去做自己的。

2. 日常任务类

• 签到（这几乎是最基础最常见的）；
• 对应产品核心功能的使用相关的任务。

3. 运营活动类

• 节日相关类；
• 产品特定日期相关类（周年等等）。

这个具体需要配合运营相关人员的推广活动等等进行部署调整，但是一定要做好部门间的对接工作。因为活动对应分配的积分比例等等影响很深远，一定要思考好本次活动预计需要分发出去多少积分，达到怎样的活动效果？对积分整体有什么影响？存在那些可能出现的问题和漏洞？怎么去防止薅羊毛党？等等。

4. 特定激励用户类

这类主要是，例如：生日，或者和用户建立联系的特定日期（例如：几周年等等）。

5. 均衡刺激积分的流通

这类主要放在消耗中讲，主要是抽奖类把积分当作一类奖品进行兑换。

以上算是大致讲了积分的获取，要领就是结合产品结合情景去进行设置。对于初次设计的人来说，就是先要找到经典体系完整的有相关性参考价值的产品的积分体系，进行总结整理思考，然后再进行自己的设计，而且尽量多看多整理几家。

二、消耗

消耗的话根据产品的自身属性的不同，表现形式差异性比较大所以我的列举不一定人人都适用，仅供参考。但是本质都是一样的，都是进行积分的消耗。

1. 兑换商品

• 虚拟商品；
• 现实商品。

兑换的手段可以是纯积分兑换，可以是积分+现实货币。对于兑换商品的选择也是很重要，如果兑换给出的商品都让用户提不起来兴趣，那么无疑是失败的。好比二次元类搞活动积分兑洗洁精就跑的很偏了，所以选品也很重要。

虚拟产品的兑换最好是围绕着核心功能or下一步主打的功能来比较好，再或者说积分体系和会员体系是相辅相成的，可以在兑换商品，这里加入兑换会员增强之间的联系。会员体系是另外一大块了在这里就不说了。

2. 抽奖

抽奖是最好的进行积分流动的手段，如果用户只是一味的累积积分，无论是产品所提供的虚拟商品，还是现实商品都不和他心意提供另一个出口给用户。或者前两者门槛过高或需要现实货币，用户不愿花费，抽奖都是一种低花费积分小概率抽中商品，利于积分生态的流动的措施。

具体的抽奖形式就很多了什么刮刮奖啊大转盘啊，记得要控制好概率分配噢。

三、注意点

（1）对于整个积分体系上面都是细节，在实际操作中第一步，要确定的是在公司的战略上，愿意每年投入多少钱在里面，或者对于已经盈利的公司，是拿出盈利里的多少百分比来进行用户的一个回馈。

同时，在投入时，希望得到的反馈效果是怎样的，都要制定好。这个可以根据数据后期的变化再进行调整，但是一定要有这样一个概念。去估计整体的量，在这个预算下进行后期的设计，同时在后期设计完成后，在进行计算在极端情况下（两个极端）和预期情况下，和公司整体战略偏差是否在可接受范围，如果不在那么再进行调整。

（2）积分体系可以看作是产品内部的货币体系，所以要注意积分膨胀和积分紧缩的问题，要是积分的价值尽量保持在一个波动不大可控的范围内。无论是膨胀还是紧缩，都会影响产品和用户给产品带来不好的影响。请重点关注膨胀，因为多数会出现的情况时设计不当积分超发。

（3）做好相关数据的管理实时反馈，用户的领取积分数据，消耗积分数据等等，细节数据需要自己去扣清楚都是有价值的数据。后台相关页面设计到位，及时将数据反馈给相关人员进行沟通。

（4）做好风控体系，别让羊毛党毁了整个体系。

（5）不要让你的积分体系一成不变，在固定的体系下，要用不同的活动内容和兑换商品的推成出新，让用户感觉到新鲜感。如果什么都不变化不抓着节奏走，那么用户会失去兴趣。具体要和运营等等相关人员进行讨论。

（6）积分的规则一定要完善没有漏洞，不论是给出的任务还是消耗的过程一定不要有歧义，一定要仔细！！！！！！这点很重要！！！！

（7）积分体系的任务应该是对用户的留存，活跃和新增起到帮助作用的。所以不可能兼顾到所有的注册用户，一定要分清楚主次，谁是主要服务对象，服务的目的是什么等等。

好久没有写过文章了，逻辑有不顺畅，内容有错误的地方欢迎大家指出，互相学习，谢谢阅读。

本文由 @judyyyy 原创发布于人人都是产品经理。未经许可，禁止转载

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

编者按：这篇来自产品设计师 Eugen Eşanu 的文章解开了我长久以来的一个疑惑，其中的思考和经验值得我们共勉。结尾的 One more thing 是我额外补充的内容和一点想法，和当下产品设计的困境相关，也是试图补完这篇文章，希望能给你一点帮助。

当你在寻找一个能够满足你需求的应用的时候，会不会因为太多相似的产品而无从选择？当你想要在两个甚至更多相似的产品中进行选择，一切都显得那么困难。而唯一能够进行快速区分的因素似乎是设计，但是紧接着会发现连设计都是那么相似。

为什么市场上所有的应用看起来都长的同一副面孔呢？

在回答这个问题之前，我想简单澄清一些事情。为了创造出能够解决需求的产品，通常需要采用以人为本的方法来进行设计，但是事实上，那种状态太过于理想，几乎没人能够真正做到。

以人为本的设计方法，确实能够极富创造性地解决问题。当采用这种方法来为目标用户进行设计，最终能够得到了一个为这些用户量身定制的解决方案。但是，这种设计方法需要设计者具备无与伦比的同理心来真正站在目标用户的角度来思考问题，由此获得大量的想法和灵感，建立一大堆可能有效的原型，同目标用户分享你正在做的事情，验证你的感受和想法，最终将你的创新的解决方案推向世界。但是这是理想的状况。

那么为什么世界上那么多伟大的公司，依然无法真正采用这样的方法成就真正优秀的产品呢？因为几乎所有的产品身上都有一种病毒，它的名字叫做特征蔓延。

产品开发流行病：特征蔓延

特征蔓延的英文名叫做 Feature creep，它的主要症状就是不断向产品中添加功能。

现如今，绝大多数的产品，无论是物理实体还是存在于手机中的各色 APP，几乎全都面对着激烈的竞争。

激烈的竞争使得每个人都面临着压力，产品所属的企业中，从领导到产品经理再到最底层的开发者和设计师，所有人都面对着来自对手和潜在对手的压力。

这种竞争压力基本上是源自于三个方面：价格，功能和质量。非常不幸的是，绝大多数时候，这三者的压力从前到后是依次递减的。价格竞争的压力通常是最大也是最直接的，然后才是功能和产品质量，至于这个顺序意味着什么，就不赘述了。

同时，产品上线的速度和顺序也很重要。谁是进入市场第一人，这个是必须争一下的。

这样一来，想要尽快杀入市场的产品，在很大程度上是伴随着「偷工减料」的。没有足够的时间来对产品进行足够多的迭代，没有办法把系统调整到最优，没有办法把硬件缺陷都找出来，没有办法把软件中每一个 Bug 都尽量找出来，甚至绝大多数企业的领导都抱有「没事，我们随后再把问题找出来解决掉。」从电脑到汽车，从 Windows 到 iOS，从来都是如此。

没有什么 Bug 是一个补丁解决不了的，如果不行，多打几个。——Windows开发团队

当然，能够通过后期补丁解决的问题终究是少数。实际市场上绝大多数的产品确实随着补丁和修改逐步提升了，但是绝大多数仍然没有解决用户的问题。

对于特征蔓延这种病症，早在1976年就已经被发现，并且在产品设计圈当中有着非常广泛的认知。对于这种产品病有一个非常学术的描述：

特征蔓延是指一产品（如APP）的软件机能持续膨胀或增加的情形。产品基本机能以外的扩充机能，会使产品比原始设计要更复杂。长时间来看，额外或不需要的机能慢慢的进入系统中，使系统超出原来设定的目标。

假设我们拥有一个非常强大的产品团队，设计师拥有足够的同理心，开发和测试也非常靠谱，他们使用以人为中心的设计方法，探索了所有用户使用场景，并且遵循产品流程认真设计仔细测试，最终输出了一个用户想要购买的优质产品。假设这个问世的产品在各个层面上都是完美的：拥有直观的界面，良好的感觉和优秀的视觉，贴合用户的体验等等。它只有一个使命，那就是以有意义的方式满足人们的需求，让人们能够更好地生活，产品因此而走向成功。谁都想来一个。（就像解决了信号问题的 iPhone 4）

非常不幸的是，产品上市之后，各种各样的影响因素开始出现，情况开始向着并不理想的方向发展。

• 现有的用户非常喜欢这款产品，但是他们想要更多的功能，各种各样的功能，包括带孩子。
• 竞争对手开始推出新款，并且具备一些全新的、我们的产品所不具备的功能。从公司领导到用户都开始催我们的团队增加新功能。
• 客户对于产品总体上是满意，但是买的人多了之后，市场趋于饱和，销售额不可避免的下降了。是时候添加新的或者创新的功能来促使用户更新或购买新版本了。

特征蔓延就是这样出现的，产品在现有的功能上不断增加更多的功能。各种各样的理由会促使产品不得不增加功能，各种各样。然后产品开始膨胀，臃肿，直到用户实在不太想用或者彻底没法用。

而在如今的市场和商业竞争中，特征蔓延并不是唯一的绝症。

竞争驱动式设计的泥潭

哈佛大学教授 Youngme Moon 认为，产品和竞品之间的攀比对抗是让产品陷入千篇一律的境地的主要原因。通常，企业为了提升产品的市场份额，会让自家产品拥有对手一样的功能，来确保竞争力。对手的团队协同软件的售价是20美元？没事，我们开发个功能一样强大的，定价15美元好了。他们的移动端的 APP 只需要加1美元就能获得？那我们的移动端版本直接免费和桌面端绑定好了。

当产品陷入和对手刺刀见红的局面之时，两败俱伤的结果就不远了。试图逐个功能和对手竞争，必然会陷入同质化的竞争，很难让用户真正爱上其中的某个产品。

这种就是竞争驱动型设计。令人遗憾的是，即使产品的第一版是以用户为中心设计出来的优质产品，在竞争驱动下诞生的后续产品，就很难赢得用户的真心了。

很多时候如果你想创造真正卓越的产品，你不得不花费更多的时间。而即使你创造出来这样的产品，在市场上也不一定能在销售排行榜上杀入前三，屈居第四是很正常的事情。那么你还愿意这么做么？

我们都听说过先发优势，但是你真的知道获得先发优势，将会付出什么样的代价么？

用1年写一册畅销书，还是花5年成就一本经典？

以写书来举例也许更加直观。当你决定写一本关于设计的书，然后登上畅销榜，名利双收，好像挺不错的。如果它的内容是之前没人写过的，并且确实比较有市场，在内容上稍加打磨，几个月后引爆设计圈似乎不是太大的问题。事实上，它上架之后，和自己的预期相差不远，挺好。不过，不知道为什么，1年之后，热点消退，这本书也没什么人买了。

换一个做法，写书的过程中可能需要勒紧裤腰带过日子，花上5年时间仔细揣摩，写一本拥有持续价值的书，然后在之后的100年时间当中，成为设计圈中每个设计师的必读书。写书的过程中，你需要专门地进行研究，仔细地调整内容，对于每个细节都精雕细琢，花费更多的时间，让这本书有对抗时间的价值。

从长远来看，只看眼前、偷工减料的公司会自然而然过时，然后被人们所忘记。浪潮过后，谁在裸泳一目了然。

为什么总忍不住添加新的功能？

和对手的对比，总能看到自家产品的缺陷，然后补完缺陷，这有什么不对么？似乎没问题，但是这种思维方式并不会打造更好的产品。更好的策略是：

专注于自家真正擅长的领域，并继续深挖自己的长处。在自己的优势领域，集中自己的研发能力，并作为营销重点。这样才能让自己的产品从平庸走向卓越，真正能在惨烈的红海中脱颖而出。用更少更精锐的功能来成就自己，而不是在成堆的功能中与对手同归于尽。

还记得一代的 Google Pixel Phone 么？他们的营销口号是「有耳机插孔的手机」，对标的正是取消耳机插孔的 iPhone ，而这个文案正是嘲讽 iPhone 的设计太过愚蠢。令人惊讶的是，随后的 Google Pixel 2 也跟着取消了耳机插孔。现在还有谁记得 Google Pixel 系列呢？

是聚焦长处，还是忙于跟随？

伟大的设计需要脱离苟且的竞争和来自客户的压力。开始专注于你认为重要的事情，以及你目光所及的远方。在你最优秀的地方，集中精力。你必须确保你的产品是一致且连贯的。这意味着领导层需要足够睿智，也足够坚定，这样才能抵挡来自用户和市场部门不断增加产品功能的各种需求。

成就最好的产品，设计者要屏蔽来自竞争对手的声音，专注于用户真实的深层需求。

不要觉得我的话是凭空而来的。Amazon 的 CEO 兼创始人 Jeff Bezos 也提到过类似的方法，被称为「客户迷恋」。在他看来，将所有精力集中在客户的需求上，而不是竞争。重点在于三个简单的问题上：「客户需要的是什么？」「他们的需求如何才能满足」「我们可以做什么来提高客户服务和价值？」Bezos 还认为，专注于客户才是首要目标，其他的问题会迎刃而解的。如果你一开始就被市场竞争吸引了注意力，很难作出真正对的决策。产品质量通常只关乎客户和解决真实的需求。

One more thing

想要从激烈的竞争中抽身出来， 创造真正独特的产品，是许多产品设计师的愿望。但是这真的不是一句话说得清楚的事情，真实的情况比我们想象中还要复杂。

竞争驱动型的设计确实是一个很难绕过的问题，驱动产品的不仅仅是领导和客户的声音，深陷市场竞争，许多时候确实身不由己。

采用以用户为中心的设计的设计流程，还绕不开一个常见的因素：最佳实践。经过前人验证、时间打磨、用户习惯之后所获得的最佳实践，是设计师和产品在很多时候必须依托的东西。比如我们如今所看到的许多表单的设计策略和汉堡菜单的使用。用户和市场已经「塑造」出了许多最优的设计策略，设计师通常会直接拿来使用，而我们感到「千人一面」的 UI设计当中，确实有各种最佳实践所「作出的贡献」。

包括我们现在正在不断探索的动效设计，虽然力图在视觉和体验上有所创新，但是早在近百年前，迪士尼的动画设计师们已经总结出一套人性化动画设计的策略，实际上我们今天许多优秀的动效设计，依然是围绕着这一套「最佳实践」来进行设计和重设计的。

违反「最佳实践」的特立独行的设计并非不可，只不过它通常需要遵循「每次仅只能打破一个规则」的原则。在用户已经被市场培养出大量习惯的前提之下，大量采用反直觉、反习惯的设计，只会让产品死的更快。

那么是不是就没有办法了呢？当然不是。新鲜有趣的、独树一帜的设计并非没有办法设计，设计师需要在最佳实践以外的部分寻求改变，探索可能性，甚至等待契机。不同的设计趋势、元素、技法、排版布局、配色、动效进行多样化的组合，依然可以创造出让人眼前一亮的设计。但是这还不够。

早在上世纪30年代的时候，包豪斯设计学院的先哲们就已经提出过「形式追随功能」的设计箴言。这句话强调的是设计的科学性，便捷性和经济效益，而不再是围绕着装饰性和简单的形式感来进行设计。在今天这个用户体验至上、以用户为中心的设计趋势之下，UI 和视觉所代表的「形式」所追随的「功能」应该是用户的真实需求。而在这个语境下试图创新，或者恰如其分地融入一些贴合场景和目标的艺术元素，也许是个不错的突破口。

正如同在上一篇文章《熟知用户行为的这7个层面，你的设计才会走进人心》中所说的，客户买钻头的时候，需要的并非钻头而是洞，同样的，用户下载一款阅读APP 的时候，他的真实需要并非是阅读器，他需要的是内容，是信息，是满足他求知欲的文章，或者填补碎片时间的有趣的故事。

内容为王这句话早就已经不是口号了。围绕着内容做设计已经成为了诸如 Medium 和 Twtter 这样的企业的新策略，而国内的许多一线企业也开始拥有自己的「首席内容官」。让设计追随内容，让真正吸引用户的东西来撬动产品，拉升体量，才是正途。

设计和内容的结合方式多种多样，根据内容所需要的语境来搭配相应的设计是目前已知的最常见的做法。根据内容本身所具备的故事性和环境特征，视觉化地表达，让 UI 和视觉服务于内容，是许多成功的设计所验证过的技巧。

比如下面的 voyage-electrique这个网站，借助 C4D 构建的 3D 可交互式的场景来呈现电力系统的运作，清新可爱的画风和令人愉悦的音乐让原本沉闷的主题显得颇为有趣，让人心生好感的设计，使得相关的信息更容易被用户接受。流程化的信息呈现方式隐约具备了故事性的表达，即使你并不懂法语也会流连忘返，在点击和探索中多停留一会儿。语言苍白，不如点进去看看。

最后需要注意一个问题：人类先天就是喜新厌旧的生物，再新鲜有趣的东西，在获得之后都会快速地适应（适应性认知偏差），并不再感到新鲜。在内容和设计策略上，适时地注入新鲜的内容（不违反基本设计规则和产品方向的前提下），是维持活跃度而必须做的事情。

原文作者 : Eugen Eşanu

译者/编辑 : 陈子木

译文地址：https://www.uisdc.com/design-product-like-everyone-else

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

     js中构造函数的几种继承模式浅析

一、原型链模式继承

    利用原型让一个引用类型继承另一个引用类型的属性和方法 。

    用的最多。

    缺点：不可传参，不可多继承。

        


            


                


                    


                    

                

                


                    

                        function People(name, age) {//添加公有属性
                    

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }//创建一个名为People的类
                    

                

            

            


                


                    


                    

                

                


                    

                        People.prototype.eat = function() {//添加私有属性
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(this.name + '贼能吃');
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        function Cat(color) {//创建一个名为Cat的类
                    

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        Cat.prototype = new People('小叮当', 200);//实例化一个People类，并赋值给Cat类的原型链
                    

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('蓝白色')
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat.name)//'小叮当'
                    

                

            

            


                


                    


                    

                

                


                    

                        cat.eat();//'小叮当贼能吃'
                    

                

            

        

二、混合模式继承

    用call的方法只能继承私有属性，所以再加一遍一遍原型链模式继承，原型链模式继承又把私有属性和公有属性都继承了一遍。

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //创建一个父级People类
                    

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        People.prototype.eat = function() {
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(this.name + '贼能吃');
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

                        function Cat(color, name, age) {
                    

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        People.call(this, name, age); //通过call的形式继承
                    

                

            

            


                


                    


                    

                

                


                    

                        //通过call(this),将People的指向改为Cat的实例
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('蓝白色', '小叮当', 1);
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat.name);//'小叮当'
                    

                

            

            


                


                    


                    

                

                


                    

                        cat.eat();//报错，
                    

                

            

            


                


                    


                    

                

                


                    

                        //继承不了公有属性，所以cat.eat()会报错；
                    

                

            

        

为了继承公有属性，用原型链模式在把公有属性和方法继承过来，

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //创建一个父级People类
                    

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        People.prototype.eat = function() {
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(this.name + '贼能吃');
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

                        function Cat(color, name, age) {
                    

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        People.call(this, name, age); //通过call的形式继承
                    

                

            

            


                


                    


                    

                

                


                    

                        //通过call(this),将People的指向改为Cat的实例
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        Cat.prototype = new People()
                    

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('蓝白色', '小叮当', 200)
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat)
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat.name); //'小叮当'，在原型链继承的时候，就近原则,cat.name 先找到'小叮当'，就不往下找了
                    

                

            

            


                


                    


                    

                

                


                    

                        cat.eat(); //'小叮当贼能吃'
                    

                

            

        

三、拷贝继承

    优点：可以多继承，可传参；

    缺点：浪费资源，不能判断父级；

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //创建一个父级People类
                    

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        People.prototype.eat = function() {
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(this.name + '贼能吃');
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

                        function Cat(color, name, age) {
                    

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        var people = new People(name, age) //实例化一个People类
                    

                

            

            


                


                    


                    

                

                


                    

                        for (let i in people) {
                    

                

            

            


                


                    


                    

                

                


                    

                        this[i] = people[i]; //将people中的可枚举属性和方法遍历并附给Cat类，公有属性和私有属性都是可枚举属性；
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('蓝白色', '小叮当', 2);
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat.name); //小叮当
                    

                

            

            


                


                    


                    

                

                


                    

                        cat.eat(); //小叮当贼能吃
                    

                

            

        

四、寄生组合方式继承

    优点：私有属性和公有属性都单独继承，可以传参；

    私有属性可以多继承，公有属性不可多继承；

        


            


                


                    


                    

                

                


                    

                        function People(name, age) {
                    

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        People.prototype.eat = function() {
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(this.name + '贼能吃');
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

                        function Cat(color, name, age) {
                    

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        People.call(this, name, age) //用call的形式把私有属性继承过来
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

                        function Fn() {} //创建一个中间构造函数，用来接收People的公有属性，为了防止创建实例Cat实例是影响原来的people构造函数
                    

                

            

            


                


                    


                    

                

                


                    

                        Fn.prototype = People.prototype;
                    

                

            

            


                


                    


                    

                

                


                    

                        Cat.prototype = new Fn(); //将中间构造函数Fn继承people的公有属性传给Cat的原型链
                    

                

            

            


                


                    


                    

                

                


                    

                        Cat.prototype.constructor = Cat; //由于上一步重置了Cat原型链的constructor属性，所以要重新给赋回来；
                    

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('蓝白色', '小叮当', 3);
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat.name); //'小叮当'
                    

                

            

            


                


                    


                    

                

                


                    

                        cat.eat() //'小叮当贼能吃
                    

                

            

        

注：若有不严谨与错误的地方，请多指教！

2. 
   

3. 
   

4. 
   

5. 
   

6. 
   

   

7. 
   

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

Material Design（以下简称MD）是谷歌设计的一套视觉语言设计规范，主要应用于安卓类应用。

iOS Human Interface Guidelines（以下简称iOS）是苹果公司针对 iOS设计的一套人机交互指南，目的是为了使运行在 iOS 上的应用都能遵从一套特定的视觉以及交互特性，从而能够在风格上进行统一。

相对来说，我们对于 iOS 的设计规范更加熟悉——因为考虑到成本，设计师进行产品设计的时候只会出一套 iOS 的设计稿，然后去适配安卓机型。

很少会针对安卓机型再出一套 MD风格的方案，这种现象虽然存在但是并不合理。不同的系统/平台采用了不同的设计语言，不同的设计语言会培养出不同的操作习惯。

例如使用安卓手机的用户平时见到的都是 MD风格的界面，突然下了一个 iOS风格的应用，那么操作起来就会很不习惯，增加了学习成本。

为了让产品可以适用不同平台用户的操作习惯，提供 MD 和 iOS 两套设计稿是非常有必要的。当然 MD 和 iOS 的差异不是一篇文章就能说清楚的，这里我就从阴影、导航和配色这三个方面来简单分析一下 MD 和 iOS 的差异。

一、阴影

对于不太熟悉 MD 的设计师来说，MD 意味着大色块+阴影。

为什么 MD 如此痴迷于阴影？

从它的名字就可以看出来——Material Design，这里的 material 指的是纸张；因为来源于现实生活，所以 MD 非常喜欢使用真实世界元素的物理规律与空间关系来表现组件之间的层级关系，而阴影就是最常见的表现形式：

同样的账户注册，安卓界面中按钮带有阴影而 iOS 界面中按钮没有阴影。

FAB（Floating Action Button），带有阴影的浮动操作按钮甚至成为了 MD 的一大招牌。相比较而言iOS更加扁平化。

二、导航体系

产品导航体系主要由菜单栏构成，而根据位置以及交互方式可以分为顶部栏菜单、底部栏菜单和侧边栏菜单。iOS 的导航体系主要由底部栏菜单构成，而 MD 大量使用了顶部栏菜单和侧边栏菜单。

下面我们来看几个例子：

网易云音乐在 iOS 中采用的是底部栏菜单导航，而在安卓机型上导航栏被移到界面顶部，「账号」被收到侧边栏中。

b站在 iOS 中有底部栏菜单有5个标签，而在安卓机型中只有4个标签，「我的」同样被侧边栏收起来。

推特在 iOS 中使用的底部栏菜单导航，在安卓机型中导航栏被移到了顶部。

而 Apple Music 做的更彻底，在安卓机型上直接舍弃了底部菜单栏，采用了侧边栏作为主导航模式。

我们发现前两款国产应用在安卓机型上都保留了底部栏菜单，而后两款国外应用直接砍掉底部栏菜单。不只是 Apple music 和推特，很多国外的安卓类应用都没有使用底部栏菜单。而国内的应用因为考虑到 iOS，即使 MD 化也是阉割版的，属于 iOS 和 MD 的混血儿。甚至很多安卓应用在设计风格上往 iOS 靠拢，以b站为例，其5.11之前的安卓版本中都是没有底部栏菜单的。

当然这里并不是去评价 MD 和 iOS 哪个导航体系更好用，我说下自己的观点：

底部栏菜单的使用非常方便用户在单手握持情况下的操作，但是对于大屏手机来说，单手操作会显得很吃力。如果用户改由双手握持手机，那么从易用性上来说底部栏菜单没有任何优势。

MD 的方案更加注重对界面空间的利用，侧边栏菜单就不说了。以底部栏菜单为例，在安卓机型中用户滑动的时候底部栏菜单会隐藏，方便的用户可以看下知乎，安卓版的底部栏用户滑动的时候会隐藏，而 iOS 则是固定不动的。

侧边栏的优势还体现在可以提供更多的标签，底部栏菜单最多可以放5个。但是侧边栏菜单需要用户点击才能调出来，比较隐蔽，而底部栏和顶部栏相对来说就会显得一目了然，总之各有千秋。

至于为什么 MD 会抛弃底部栏菜单，我个人的理解是设备原因。因为安卓机型底部有三个物理按键，如果采用底部栏菜单作为主导航模式，容易造成用户误点击。

类似的还有 web 类应用，因为浏览器的控件栏也在底部，所以如果采用了底部栏菜单同样会造成用户的误操作。

三、配色

MD 提倡使用高饱和度的对比色来提升产品的视觉表现力，也就是我在上面提到的大色块。同样的一个功能，从底部栏背景色、插画到按钮，我们可以发现 iOS 在色彩的使用上比较克制。

知乎之前的安卓版本使用了大面积的蓝色，后来改成跟 iOS 一样的白色。这样的调整褒贬不一，有的用户反馈这完全照搬了 iOS，要改回 MD。

产品界面设计中对比效果主要由配色、尺寸、间距和阴影来完成。MD 在配色和阴影上做的比较出彩，所以 MD风格的产品在视觉表现上更有冲击力。而 iOS 则显得比较小清新，追求扁平和简洁。所以我们无法去评判这两款设计规范的孰好孰坏，因为其各自的出发点就是不一样的。

当然前面也提到了 MD 和 iOS 的差异不仅仅体现在以上说的这三点，还有一些小细节也非常值得我们思考。我们都知道在 iOS系统中，用户向右滑动的时候会返回上一级页面。因为苹果手机没有物理返回按键，所以这种机制非常受欢迎，但是在一些特定场景的时候就会有问题。例如如果我想复制微博里的「一曲肝肠断，天涯何处觅知音」，选中光标从左向右滑动，这时就会返回上一级页面，特别不方便。所以我只能从右向左进行复制，我后来试了一下微信和 QQ，发现默认复制的是整条动态，这也算是一个折衷的方案。

总结

这篇文章并不是去评判 iOS 和 MD 两种设计风格孰好孰坏，也不是让我们现在就去为自己的产品做出两套设计稿，这个目前来说也不太现实。很多国民类应用都只采用了一套设计稿，大家都这么做，整个大环境就是这样。

但是还是那句话：存在不一定合理。出两套设计稿虽然现在看起来不现实，但是我们也要做好准备，要有危机感。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

黄金分割大家应该早有耳闻，作为一名设计师，怎么来利用黄金分割线使其构图更加完美呢？

说实话，构图时是否使用黄金分割线构图并不是绝对的，它只是方法之一。但是黄金分割比例在全世界乃至全宇宙确实都是至高无上的。

当我们在网上购物，提交我们个人信息都需要用到按钮。网页UI设计的增长很快，风格似乎也是一个月一变。最近几年，我们经历过从文 本链接到拟物化设计再到扁平化瀑布流设计。导航是网页设计中最重要的元素，并且按钮是最重要的行为工具。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

问题总结  https://github.com/vuejs-templates/webpack/issues/260

1. 首先npm install --save babel-polyfill

2. 然后在main.js中的最前面引入babel-polyfill

   import 'babel-polyfill'

3. 在index.html 加入以下代码（非必须）

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

4. 在config中的webpack.base.conf.js中,修改编译配置

    


        


            


                


                

            

            


                

                    entry:{
                

            

        

        


            


                


                

            

            


                

                    app:['babel-polyfill','./src/main.js'] 
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

    

• 
  

当然，如果你只用到了 axios 对 promise进行兼容，可以只用 es6-promise

npm install es6-promise --save

• 
  

在 main.js 中的最前面 引入

import 'es6-promise/auto' 

• 以上配置，ie9兼容就完成了

那么，就有一个问题了，build之后的dist文件只有放在服务器上才能查看，但本地如何查看呢，参考一下配置

1. 修改config文件夹中的index.js文件,将build对象中的打包路径，'/‘改为'./'，由绝对路径改为相对路径,建议将sourceMap改为false,编译的时候会快一点

   build: { assetsPublicPath: './', productionSourceMap: false, },

2. 修改完之后，重新 npm run build ，得到新的dist文件夹

3. 然后进入dist文件夹

   cd dist

4. 全局安装简易node服务器

   npm install http-server -g

5. 启动简易node服务器

   http-server

6. 出现如下图所示，就代表你的服务器启动成功了，那你也能在5000端口查看编译打包后的项目了，可以在ie浏览器中直接测试了

   

7. IE在处理日期的时候，不支持-支持/的日期方式 如 2017-01-01应该 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务