出海已成为中互联网公司的不二选择，面对国际化的背景，有没有相对通用的办法去快速了解所需服务的用户，在早期给业务带来优势？
出海早已成为中国互联网公司的不二选择。相比在国内厮杀，国外有更多的人口/政策/资源红利。并且因为互联网的可复制模式，使得成熟的经验可以快速运用到国外，从而抢占先机。而做好国际化的本质就是【做好每个地区的本地化设计】，想用一套国际化的标准去用在全世界的各个地区取得成功是非常困难的
那有什么好的方法和理论能够让设计提前着落，为业务带来一线用户信息和设计价值呢？接下来我将给大家介绍一些实际的方法和案例帮助大家做国际化的设计，让自己的设计价值有理可依
*以下内容与公司无关，更多的是基于笔者国际化工作经验的复盘，如有错误，欢迎指正（Salute~）
首先我们要知道，一套通用的设计标准很难在多个国家吃的开，从而拿到用户信任
我们先来看个案例，这个是日本UBER司机端和日本滴滴司机端对比
最明显的区别在于，滴滴国际化在日本业务和Global业务这块，司机端采用的是移动端（global）+平板端（日本），而UBER则是一套方案解决全球问题，可能有些人会问，一套设计不是成本更低，效率更高么，为什么非要制作两套。这就要从决策成本的角度去考虑问题，而日本市场相对于滴滴其他地区市场有着完全不同的因素，涉及到了资本，使用场景，市场地位，用户画像等多方因素决定，这时的【成本与效率】已经无法排在做与不做的第一位了，接下来我们通过两张照片来看下日本司机的接驾场景
通过照片我们是否发现日本司机的画像其实和全世界其他的出租车司机都不太一样？是不是明显发现他们的年纪相对的更大一些？会穿制服佩戴白手套？ 那年纪更大是不是意味着司机的视力会相对于中年人有所下降，白手套是否会影响他操作屏幕交互，那针对这么不同用户群体是否需要单独设计呢？最终的目标是占领市场的话是否要根据本地情况去服务好当地司机呢？
那我再来举两个例子来看看，我们来看看针对日本本地化做的特殊设计细节在哪些方面？
案例一：针对司机群体老龄化设计———大屏幕设计：
日本属于老龄化国家，司机平均年龄更是在50岁以上，高龄人群的视力相比于青年处于退化阶段，因此对于高龄人群来说在驾驶的过程中去读和操作小屏幕来说是一件非常痛苦的事情，UBER采用的是一套国际化的设计语言并没有针对日本的市场进行单独的设计,DiDi在日本则是针对司机群体采用了单独平板端设计，更大的屏幕降低了司机误操作可能性的同时，也能将字体放大，尽可能让司机方便识别
案例二：针对日本司机人文的设计———语音接单
“日本服务业发达，体现在服务的细节。出租车司机出于对客户的尊重，都会戴上白手套。但是在带着手套的时候，司机很难去点击屏幕进行操作，而且在行车过程中，触碰屏幕本来就是不合规的行为。无论是从法律层面还是价值观层面我们都不鼓励司机做出这种行为，于是开发了语音接单的功能。考虑到司机群体的年纪特征，我们选用了在日本相对普及又好识别的“了解しました（りょかいしました）”进行快速语音接单,在新版本上线后，司机可以通过屏中屏的方式去学习语音接单功能，只有他完全掌握这个功能才会为他完全展现，如果司机因为自身原因无法很好地说出那句话，我们依旧会为他保留按钮输入的方式”------国际化业务中的本地化设计
（图片来自于SUXA文章《国际化业务中的本地化设计》-吕诚）
通过两个日本的案例我们能明确一个点【国际化实质就是做好每个地区的本地化设计】
怎么样让国际化的设计有法可依，我们先来看懂一个关系框架。做好一个产品实质是服务好每一个场景，那一个场景由哪几个方面组成，简单来说是由【业务】+【用户】组成，这并不难理解，我们作为产品设计师，首先是背靠业务，解决公司的商业诉求，给业务带来利益的同时给用户带来更多的使用价值然后获得用户的认可。在这个过程中，我们会将商业诉求和用户价值进行一个有效的结合，从而满足双方，但是还不够，因为一个场景还依赖客观的条件，比如时间和空间维度，最终也会影响整体的质量，我们将所有的因素通过包含关系展示出来
接下来我们往细的方向进行拆解，【业务】根据公司行业，阶段的不同以及基础能力的不同，呈现的点也不尽相同。最核心的点在于当前所属阶段，是1.0阶段力求生存下来，还是说2.0和竞品之间产生差异化，还是活3.0去打败竞品阶段。在不同阶段设计师要了解的事情也不同，对于1.0阶段来说，更精准的展示出用户画像和了解当地的文化与习惯是重中之重。但是到了2.0则应该更加关注产品目标与竞品的差异化竞争，通过差异化（杀手级）的功能形态获取更多的摇摆用户
不同的赛道，业务不同，打法也不同。我今天主要想讲的就是左右场景的另外一个因子【用户】。那如何定义一个用户呢？我们先来列举些具象的特征：
【外貌/文化风俗/地域特征/语言等】是一个用户的画像的基础组成，但是光有画像基础并不精确，因为每个国家的【法律/政策]同样会影响用户的行为。而在当今的互联网模式下，用户体验的提高必须得考虑各地区【硬件的水平以及当地的网络状况】，最后就是如何与【本地化的设计团队进行友好的合作】让体验和设计策略能够更加精准的传达到真实用户手里，获得用户认可，特别是在20年后，疫情的爆发导致设计师无法到前线进行真实有效的实地探测，那么加强合作以及对齐目标，为业务拿结果将是重中之重，接下来，我将对于每个影响【用户】的因子进行举例讲解
可能你知道，在给拉美客户做单的时候他们会要求你的界面颜色亮丽，看起来更加奔放，而在给亚洲客户做单的时候则会相反，整体看起来更加约束。但是你能清楚的知道背后的原因么？如果不清楚那你的这块分辨更多是依赖于经验和他人的总结。那有没有一套理论能够很好的去辅助你去分析你的客户用户画像，去支撑你的设计。答案是有的，他就是【霍夫斯泰德文化维度理论】
霍夫斯泰德文化维度理论（Hofstede's cultural dimensions theory）是荷兰心理学家吉尔特·霍夫斯泰德提出的用来衡量不同国家文化差异的一个框架。他认为文化是在一个环境下人们共同拥有的心理程序，能将一群人与其他人区分开来。通过研究，他将不同文化间的差异归纳为5个基本的文化价值观维度
百科连接：霍夫斯泰德理论详情 （<-点击快速查看）
完全不懂的可以看看上面的链接，我们这里跳过部分解释….通过文化将维度理论我们将文化价值观划分成6个维度
了解完霍夫斯泰德理论以后我们该如何去使用呢？我们先从拉美用户和日本用户的差异对比开始
通过霍夫斯泰德官网查询我们可得知差距最大的两个分别是【男性化与女性化(Masculinity versus Femininity)】与【长期取向与短期取向(Long-term versus Short-term)】，差值比例达到了46和44.
接下来我们来对【差值较大】以及【分值较高】的因素进行解释和举例，去理解背后的原因
日本是个生性好斗竞争意识强烈的民族。在日本企业中工作狂是他们男性气质的一种表现；而日本男主外女主内，62％的女性在第一个孩子之后选择辞职，也是男性气质的另一表现.
在日本想要成为一个出租车司机，就要在5年之内不能有任何违规，某些地方还会有特殊的考试，这里面的合格率并不高。并且在通过考试之后再在通过一系列的评分后，才能被评为A级或者AA级别的出租车，虽然这仅仅只是一张小贴纸，但是他也代表着一个出租车司机的荣誉。在这一方面，也体现日本社会的男性气质的确定性。
相比较日本，巴西人更会以家庭为中心、以教育为重心、博爱、具有个人风格意识。家庭是关键。家庭是巴西人生活的中心，也是其社会的核心价值观。对于一个家庭而言，家人共同用餐的时间是非常重要的，还有星期天的烧烤活动，能让更多的远房亲戚和朋友聚会。所以在巴西你很难看到休息日去工作的同事，甚至无法联系上他们：）
日本人将生命视为一个非常短暂的时刻，所以调查发现日本人普遍相信宿命论，他们鼓励节俭和现代教育的努力，作为为未来做准备的一种方式。
巴西相较于日本经济落后，人民的收入水平普遍不高，很多司机收入仅仅能够维持一家的支出，很难有结余，在巴西工资会按照周维度支付，以保证一家人的生活开支能够承担。
针对巴西的情况我们做了适合当地政策和环境的本地化服务。钱包1.0的时候我们先是和当地的银行合作推出了巴西99卡，允许司机随时提现且提现速度远远大于了当地的其他银行（48小时），那这种优势在收入较低的司机群体当中就会发挥很大的优势。在3.0的改版中，我们将钱包打造长了本地生活平台，我们允许司机通过平台去完成转账/水电费/电话费/还款等行为，原本需要走到线下便利店的服务被我们搬到了线上，更是大大的方便了使用99卡的群体。未来呢，我们将加大加多权益，达到使用场景独占的目的。通过这些服务为我们给用户带来了使用价值，同时我们也给业务带来了价值，更多的绑卡渗透率为我们后续的推广和矩阵式的打法提供了导流的入口
（99与当地银行合作的线上本地生活功能-99Pay）
日本地处自然灾害频发地带，没有丰富的自然资源，生存条件不太好，所以日本人有很强的危机意识，学会了为任何不确定的情况做好预防措施，对待事情也希望有明确性
而巴西虽然处于平原，没有自然灾害，但是因为社会安全因素，整个社会对于社恐事件还是有较强烈的危机意识，所以司机会更加关注接送流程中是否会前往不安全地区，以及乘客的质量
（日本司机的真实驾驶场景）
费用收取的正确与否也是服务体验优秀的表现，日本司机会用计步器进行计价，如果涉及到了其他的费用则会使用单独的计算器进行精确计算，这么做的原因是为了避免计算错误给乘客带来困扰和争执，那从这个环节来看，司机为了规避【计算错误的可能】而预备了计算器，减少了差体验的可能
在巴西，滴滴如果对司机派单如果过远会或者是危险地区会进行提示，允许司机取消派单。并且根据调研司机群体特别是夜班司机会有随身携带防护性的武器用来自我保护，那么也能很好的说明整个社会对于社恐事件还是有较强烈的危机意识。那么做为设计师，是不是意味着可以把危险地区的派单做的更加醒目，让司机能够更快识别，更快决策，而不是为了平台和用户利益进行隐藏。是不是可以把安全链路透传做的更强，让司乘都能更加快捷第一时间选择自助服务
每个国家的发展阶段不同，对于隐私重视程度不同，因此针对不同地区的海外市场，作为业务的合作伙伴设计师们需要针对不同的市场配套不同的安全合规方案，这一点格外需要注意，不然会被罚的很惨,通常获取地理位置/账号信息保留是每个公司都非要需要的，因此在空投其他国家之前需要了解是否立法关于隐私相关的法律，如果有则需要通过配置化将其他国家上线的隐私条款和设置方式复制过来使用
简单来说就是要做到信息安全，保护个体隐私。大家都知道在中国我们的信息被侵犯的体无完肤。其实在国外也是一样，各种权限，各种信息默认保留和上传。但是随着各国的重视，个人隐私也逐渐走向明确的法律保护层面。在拉美有LGPD，在欧洲有GPDR
GDPR 是(The European General Data Protection Regulation ）的缩写，即通用数据保护条例。是欧盟议会和欧盟理事会在 2016 年 4 月通过，在 2018 年 5 月开始强制实施的规定。
GDPR 意义在于推动强制执行隐私条例，规定了企业在对用户的数据收集、存储、保护和使用时新的标准；另一方面，对于自身的数据，也给予了用户更大处理权。也就是说在18年生效之后，如果再有欧洲任何公司App不对用户的数据进行合规处理，擅自收集信息就将会受到严惩
硬件的普及率以及新旧差异也同样影响着本地化设计，通过调研和外界公布的数据我们得知，在拉美高端手机的占比远远低于发达国家。因此在给发达地区做设计的时候可以考虑更多体验上的拓展，但是在给发展中国家做设计的时候则需要进行小屏幕最小尺寸的适配，这样做是为了最好的进行向下兼容，从而保证所有用户都能够使用。同样，如果你在给发展中国家做设计，那么复杂的动效和高清晰解析的大图最好是不要去做的
（网上后台数据展示截图）
拉美国家，基建水平滞后，网络下载的速率波动较大，且存在不稳定的情况，以及流量费用的价格差异。因此某些设计手法在较发达国家能带来体验但是在发展中国家可能会是灾难
举个例子，司机端的历史列表如果存在400条记录，如果司机有诉求想刷新查看更多的订单，是一次性下拉刷新展示全部好呢？还是一次性展示50条好呢？还是一次性展示20条呢？
答案是一次性展示20条是最稳妥的选择，因为网络的不稳定性，一次性加载太多数据会导致过长时间，而网络不稳定极有可能导致下载失败，并且一次性下载太多数据可能并不符合司机查询的最初诉求，反而浪费司机的宝贵流量，最终会引擎流量消耗过快引发进线，这里的决策是损失一些用户的体验去保障司机的收入，但是在拉美因为手机的性能/网速的稳定且快速/套餐足够便宜，因此我们可以尝试使用一次性加载全部的数据，这样能让体验感受更好
（99信用卡的申请权益展示/激活流程页面）
再举个例子，拉美物流相对没那么发达，且因为政治/经济局势的不稳定性，导致物流包裹存在无法送达的情况，如果收件人不知晓当前的状态而超出了等待的预期，那么他就会进线询问。那在这个场景我们有什么更好的办法？是否可以透传更多的包裹进度方便收件人查看，再者再将用户导流到客服自助而非进线？这样的好处一来体验的链路完善了，让司机可以找到自助的出口，二是方便我们可以更好的了解哪些地区收到邮寄的折损率最大？从而探索新的业务，发现新的机会点
聊这个话题前我们先将选择的范围进行收缩，聚焦在一个国家的一个群体内去看会比较容易解释。在巴西司机的收入的往往只能支撑下一周的家庭支出，难有结余。这也导致司机会选择双开（同时使用UBER接单或者其他竞品）或者进行其他赚钱的方法，如果整个群体都是这样的情况下，那么司机的忠诚度（这里指的忠诚度不是贬义词，而是每周的出车时长）必然下降。那样对于大盘的运力来说便是损失。那有没有什么办法帮助司机更好的应对这些问题
我们该如何思考这个问题,通过马斯洛的需求理论我们能够将人的诉求归为三类，基础的生存诉求/归属感和成就感。那这三种可以再细化成两类，物质层面的诉求和精神层面的诉求。司机愿意在滴滴平台跑单是基于了物质层面。那么，我们是不是可以丰富收入以外的奖励形式，提供活动奖励或者权益的折扣，又或者尝试下小额贷款，那这些是不是可以给用户带来价值点呢？
精神层面我们是不是也有发挥的空间，对于补贴，往往是有限的。那如何做到持续长期刺激司机群体？如果一个乘客对于司机进行了表扬和小费的激励，是不是可以给司机带来更大的信心去服务好乘客，那我们是不是要加强这方面的透传。是不是可以给司机提供虚拟奖励，让司机存在足够的拥有感和成就感，让司机群体也能感受到平台对他们的看重。如果勋章可以，那等级是不是也是成就之一呢？
不同的国家线上和现金的支付比例大不相同，这里受经济环境和政治环境影响较大。总的来说习惯了线上支付的习惯后就很难回到现金支付的环境，因为确实更加方便便利。一个国家大量使用现金支付的情况下，往往是互联网公司能做的发力点和蓝海。核心做法是通过核心业务导流到钱包模块，在与当地的银行和机构进行合作，增加卡和账户的渗透率。然后通过做权益和服务，满足用户的生活诉求，从而达到场景独占。最终将会让公司的业务矩阵从单核的核心业务到核心业务+本地生活
这里我们需要提到一个概念，i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。在资讯领域，国际化(i18n)指让产品（出版物，软件，硬件等）无需做大的改变就能够适应不同的语言和地区的需要。对程序来说，在不修改内部代码的情况下，能根据不同语言及地区显示相应的界面。 在全球化的时代，国际化尤为重要，因为产品的潜在用户可能来自世界的各个角落。通常与i18n相关的还有L10n（“本地化”的简称）
了解完i18n的相关背景以后我们大概可以把他定义成做国际化翻译的一个中台，所有的本地化设计在经过研发代码实现后，都会进过他们去对文案进行翻译校对，最终变成当地人可以理解的话术落地到界面上，从而进行本地化的空投，但是这里面往往存在一个适配优化的问题。大家知道英文的单词平均长度要长于汉字，而西语和葡语是英文的1.25倍到1.5倍之间，而俄语的长度更是能达到葡语的1.25倍。那么面对多国空投的适配不仅仅需要i18n进行精准翻译，还需要把控字符长度，避免折行和省略问题
我们来看下下面这个例子
（不严谨的快速翻译，只是为了更方便的展示不同文化下的文字长度）
不同国家的语言不同，文字也不同，则会存在单词，句子长度/行高的差异。如果一个产品在初期没有做好适配的话，到后期替换当地语言的时候极有可能出现文字溢出的问题，这也是为什么在做海外设计的时候最好拿当地的语言进行设计，能初筛出一些细小的问题 ，避免在和翻译中台对接的时候因为文案太长提供的空间不足而修改页面间距和留白的适配问题
如果你服务中东客户，务必需要呈现出当地的阅读排版方式（尊重本地化设计）具体的适配细节这里就不过多说了，网上搜索【RTL适配方法】即可
（Material Design中的RTL适配）
格式也是做国际化中一个非常常见且体现专业度的地方，不同国家的时间展示方式不同，会影响用户的阅读，举个例子“03/08/2019”，如果在A国理解是2019年3月8号，在其他国家复用是会存在理解成2019年8月3号的，更别说我们加上的星期之后的展示方式。这就要求我们在进行开新的国家的时候务必于前线进行更好的沟通，保障阅读的习惯和当地一致，那货币符号/地址等也应该遵守当地的习惯去展示，通常的解法是设计团队去收集信息并且与前线当地人员进行交流确认，将格式记录下来，最后与研发根据上线的国家展示不同的格式
因为时间仓促，无法面面俱到的将每个点都进行举例论证，尽可能把我认为重要的点都提了出来。理解了这篇文章并不代表看懂看明白就能做好国际化，它更像是一个方法论，帮助没做过国际化业务的同学能够快速理解当地的用户和业务的打法
希望我的文章能够抛砖引玉，给大家一些灵感，也希望更多朋友能够将国际化的经验分享给设计的朋友们。让我们一起把中国互联网国际化的业务做到越来越好
最后引用我一老哥的话进行收尾“更好的国际化就是以更好的本地化思维去看待，去理解它们。而不是仅仅以一个理性的角度去看待。要站在用户的角度去看，永远不要轻易地相信自己的理解”
文章来源：优设 作者：大完蛋
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标在设计中是一个最为基础的设计元素之一，对这部分知识花再多时间研究练习都是值得的，哪怕是工作多年的设计老手，也很难说自己把图标设计，做到出类拔萃了。所以不论是温故知新又或是学习精进，花上几分钟看看这篇超干的文章，定有收获。
本文会着重介绍图标基础规则，深入探讨图标的视觉重量和对齐问题。
一个界面中的图标通常可以近似地看成是一些基本形的组合：横向矩形、纵向矩形、倾斜矩形、圆形、三角形、正方形。模糊地看它们有相同的视觉重量，因为它们或多或少的变成了相同的斑点。
△ 图标的基本轮廓
根据图标的形状，将其嵌入到对应栅格中。例如，方形图标比三角形或细长的图标更紧凑些。
△ 图标在栅格中
△ 栅格中的基本图形
图标越紧凑，需要的空间就越少。图标锐利的边缘或小细节越多，它在画板上占据的空间就越大。
△ 图标示例，栅格中可以放不同异形的图标
△ 栅格中放更多细节的基本图形：方形，圆形，三角形
当心成为栅格的奴隶，栅格是用来辅助你而不是去限制你的。如果一个图标因为一些突出的元素而在视觉上有更好的效果，那就让它们突出。
为了使图标在非视网膜屏幕上清晰可见，请坚持使用像素网格并在线性图标上优先使用2px粗细的描边。2px居中对齐的描边通常会提供足够的粗细和清晰的轮廓
△ 2像素线型图标示例
△ 2像素线型图标示例
如果图标选择了1px的描边，则应该使用内描边或外描边而不是居中的。
△ 1像素外描边图标示例
△ 1像素外描边图标示例
1px的居中描边会使图标在放大到100%的情况下变的模糊，但如果放的更大会显的清晰。
△ 1像素居中描边线型图标示例
△ 1像素居中描边线型图标示例
根据像素网格去设置斜线的起点和终点。当斜线的角度为45°，30°和60°时会比不规则角度（像13.7°或81°）更清晰。如今仍有数百万人在使用低分辨率的屏幕设备，这就是为什么图标的清晰度仍然很重要的原因。
△ 矢量和位图图标示例
最好从复杂的图标开始去创建一个图标集。它将定义详细程度，并且对设计具有相同视觉重量的图标们有帮助。
△ 不同细节程度的图标示例
当图标的细节程度不一样时，细节越多的图标越能吸引用户的注意力，并且看起来视觉重量越大。
△ 细节不一致
在整个图标集中，图标内部相邻元素的间距不应太小或不一致。定义最小间距并在各处以同样的方式使用，以避免轮廓「粘连」。
△ 不一致的间隙
△ 间隙统一
对于线型图标，最好使最小间距和线条的粗细相等。线条要么清晰地分开，要么精确地连在一起，永远不要含糊不清。
△ 不一致的间隙
△ 间隙统一
在图标集中，可能会有些重复的细节。删掉它们，让用户的注意力集中在它们不同的地方，就像是数学里分数要约分（化简分数）一样。你看到的视觉干扰越少，你对它的理解就越清晰。
如果目标用户已经明白他或她使用的是什么，那就没必要一遍遍的重复。例如：避免使用基于信封的图标不会让人觉得这不是一个邮箱类app。（有点绕口，意思是：不用添加相关系列类的辅助图标也会让人知道这是一个邮箱类app）
这条规则也适用于图标周围的装饰（框架，背景）。如果这些对图标的识别性没帮助，则它们就会对图标识别产生阻碍。
不要将不同样式，不同角度地元素混合在同一个图标集中。一致的风格会对用户识别图标有所帮助并让用户明白这些图标有同等的重要性和状态。
△ 同一纬度的图标
△ 不同维度的图标
同样的原理也适用于线型图标和面型图标。如果你把它们混在一起，人们可能会认为它们有不同的重要性或状态。当然，除非你是故意的。例如，面型图标用于关键的指令，线型图标用于其他的指令。
△ 一组一致性图标
△ 一组不一致的图标
在界面中拥有两种不同的图标是很好的。线型图标用作不可点击或正常状态，面型图标用于点击状态。
8px网格和12列布局常用于许多界面，与基于十进制的尺寸相比更加灵活。12可以被2、3、4、6整除。因此24或48px的图标已成为了标准。如果需要更大的尺寸，可以对他们进行缩放。
完美主义不是我们的目标：没有人需要为了像素完美而去追求完美的线条。但是，这对于产品中最终呈现正确而不失真的图标是很重要的。记住图形中锚点数量达到最少并且相邻元素之间不要有间隙。
△ 矢量图标的调整与优化
还有那些烦人的「8.999px」或「100.001px」呢？如果锚点的位置很准确，图标的边缘看起来就会很清晰。此外，在合并形状时，也不会有出现多余锚点和间隙的风险。
△ 矢量图标的调整与优化
许多设计软件（例如sketch）生成的svg文件都带有不必要的文件——多余的编组，颜色图层和剪切蒙版。让我们看看，在sketch中，一切看起来似乎都不错。
△ sketch中的图标示例
在其它软件中打开这个SVG文件（例如Ai中），你会看到很多空图层，不必要的编组，有时还会有剪切蒙版。当前端开发人员将图标转换成图标字体或在网页上使用SVG文件的时候，这些都可能导致出现问题。
△ Ai中的图标示例
你可以删除这些垃圾文件然后保存。
你可以看到sketch生成的SVG文件（picture.svg）和Illustrator编辑后生成的SVG文件（picture_new.svg）在文件查看器中预览的效果不一样。顺便说下，也可以在代码编辑器中删除这些垃圾图层。如果你知道SVG代码的样子，可以尝试下直接删除不必要的数据字符串。
当然，这些建议并不是不可打破的规则。如果你知道自己在做什么，请随时跳过它们。在我看来至少在两种情况下严肃的几何图标不是最好的选择。
空状态。如果你正在设计一个页面的空状态（缺省页）如「没有任务了」或「所有邮件已读」，那么最好是用情感化的图标来表现或者只用文字去说明。情感化图标会使用户感到快乐，而没有情感的几何图标不会增加任何交互价值。
吉祥物和插图。如果屏幕上你的界面中有吉祥物或者插图，这种图案应该是感性的。我不知道设计师是如何通过有限的形状选择和坚持使用网格去刻画一个角色的。
还有一件事。在一些特殊情况下最好问问自己是否真的需要图标。这是解决问题的最好方式吗？写点有意义的文字呢？要注意使用时的平衡，否则，可爱、时髦的图标将会让人感到沮丧，所有的努力都将是徒劳的。
文章来源：优设网 作者：彩云译设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为什么那么多人觉得应该先学UI设计再学交互设计，因为UI门槛低所以入手快。其实交互比UI更早出现，从需求理论可以看出人们在追逐主观体验的感受，在基础需求未被满足前是不会出现更高层次的需求的。所以UI设计让更多用户感受到了舒适和更好的体验。殊不知，如果底层的交互和产品的可用性未被满足，那么UI做的再好也是徒劳。
市面上大量出现同质化产品、设计，就是因为大家都在按照现有的，常用的模版在设计，现在其实比早两年会好很多，很多设计师已经开始从美化工作逐渐深挖到区分甚至自我驱动或者价值探寻的工作。
例如下面的案例，这是一个电瓶车电池租赁的一个产品。
从美观角度，左侧的界面更加简洁信息也有规律，有美观的banner和看起来让人有点击欲望的大按钮以及“令人觉得很热门”的热门租赁板块。当我不放出右侧的对比图时，大家在第一反应中，有多少人可以重启自己的视角，还是说已经被这个页面所拉入到不可自拔的漩涡中去了呢？
如果让你盯着第一个界面进行改版，我相信还是会有很多小伙伴可能只是会把底下的信息流挪上来，或者新增一些“我们觉得”有用的板块。但其实这整个形态就是错的，即便将错误路径3改成了路径2，你以然还是在错误的路径上，本质没变。所以为什么我们说要做正确的事而不是正确的做事。
交互不仅仅能够让产品好用的，也要让产品走对方向。
另外，UI也是交互的一部分，属于看的懂。好用可以分为看得懂，学的快，用的会，交互体现在人们日常所接触到的大部分媒介，并且与之产生联系。例如一把水壶，水壶的设计形式首先通过视觉让你感知这是一个水壶，如果把水壶的外形做成一个马桶，你觉得它还是一个水壶吗，这叫看的懂。学的快指的是当我看懂了之后我马上就可以对这个产品进行基础操作，例如装水、倒水。而用的会就是这个水壶更多的附加功能，例如烧水、定时、调温等等。
交互的媒介是不可缺少的，大家是否去研究过为什么古代人们撰写文字是从上至下，从右往左而现代人的习惯是从左右的？古代受限于工具、媒介，竹简是主流的记录文字信息的媒介， 有人会说竹简可以从做往右写不是非要从上往下啊，但是大家可以看到人们是如何打开进行阅读的，如果是横着阅读但是打开是上下展开就会非常不自然了。
所以在当时人们为了适应非常有限的工具资源，改变了自然的操作方式。但现代社会如果说你的产品不为用户的使用和场景去考虑，那基本也就凉凉了。
从2g到5g时代的发展，除了生活方式发生翻天覆地的变化外，我们所接触到的媒介也发生了变化，从2g时代以文字为主的信息到5g时代视频、游戏、影音等为主的信息化进步，让人们对信息的获取更加方便快捷。除了内容，外对于像移动手机这样的设备用户对其操作方式和习惯也有了更多的变化，从当初的搬砖按键手机到支持ar等新技术的超智能化手机，改变了我们的认知也改变了我们的生活方式。
平台迁移的交互成本，很多同学可能都玩过moba类游戏-dota，这是一款在电脑端战术竞技类游戏。在dota中我们经常使用的交互形式主要分为键盘和鼠标的控制，键盘用来控制技能的释放和其他快捷物品的使用，都是通过按按键的形式进行释放。通过鼠标右键来控制人物的移动和左键选择技能和物品释放的目标，这是端游中基本的交互行为与操作。
在现在非常火热并且模式和dota相似度很高的王者荣耀手游中，我们看到了，如何从端游到手游的交互迁移。从鼠标控制移动到左手拇指来控制移动，右手拇指来控制技能的释放，在这里大家要注意，在端游中技能的释放是可以非常精准的，并且可以指向性释放在某一个角色中，但手游不行。鼠标拥有移动、视角、释放技能、使用物品多个功能，但是在手游中我们无法做到选中某一个技能再点击到某一个角色上，所以手游中只能进行非指向性的预判技能释放。
同样在端游和手游的吃鸡游戏中，端游键盘控制人物移动，鼠标控制射击与视角，但是在手游中控制射击与视角就需要2个手指来完成非常不方便，也很影响射击的精度，但是如果做成吸附式准星那么也就失去了很多的乐趣。所以很多的厂商为了解决的这个用户痛点开发出了吃鸡专用的辅助设备，专门用来给多余的手指进行射击操作。
另外，大家如果做b端的同学应该也深有感触，平台迁移的成本非常高。想要把集成非常复杂的业务后台切换到移动端是一件很麻烦的事，因为在网页端我们有大量的空间和更自由的控件形式去承载信息，比如联动的左侧标签导航和顶部联动的标签导航，在增删改查的操作中显得清晰高效。但是到移动端上虽然可以到做联动导航，但是页面显示实在有限，很多的信息完全无法在一个界面中呈现，所以要么将页面进行左右滑动，要么拆分进行多步操作。但本身拥有复杂业务功能的后台系统就不适宜迁移到移动端上。
web端的工具和网页通常都会有撤销操作，按CMD（ctrl）+Z大部分都可进行撤销上一步操作，但是在移动端我们无法通过特定、或者统一的手势进行撤销，所以很多时候在表单输入的时候会有一键删除图标，却无法进行撤销。所以我在想是不是可以在用户一键删除信息后，删除按钮变为撤销按钮，有待考量。
到底什么是交互设计，这个问题其实是比较复杂的，也是我一直在思考的问题。所以也翻阅了很多文献，尝试做更多的案例来解释。交互设计的概念真的挺多的，光网上能够找到的定义就不下5种，这些对交互设计的定义中，比较频繁出现的是行为、场景、用户等词汇，交互设计到底设计的是用户的行为，还是设计用户正在交互的媒介或者是用户正在使用媒介这件事情，我觉得可能还是没有能够解释清楚交互设计的本质。
中国历史文字的演变，它并不是一个模仿的过程，而是一个从底层对文化、自由、精神、环境、人的深刻理解而发生的一种进化过程。但现在其实很多的交互形式都是来源于一些大流量产品的模仿，更多的是担心用户成本过高而妥协为满足用户预期。
事实上，为什么我们讲不清楚什么是交互设计，其实UI设计也一样，她绝不可能单纯的指代用工具绘制出用户界面，其实是因为信息不对成、词不达意或者叫做你说的比人听不懂。我可以举例的是我们的汉语
例如“你可以意思一下”，单就这句话，我们大概知道最关键的是“意思”二字，包含了特别多的含义，含义需要通过语境、使用场景来区分，说者的“意思”是想告诉听者什么呢？没人知道，是一口气干完一瓶酒，还是喝一口？还是送一点礼还是？应付一下？
当然这句话中的“可以”也很有讲究，加上“可以”说明你也能选择不“意思”，是不是觉得这7个字让我们整一句话都活了起来，说者与听者如果不在一个境中，听着就压根不知道说者的具体表达含义。
同样的，在设计领域，很多设计师喜欢用大气、高级、逼格、有呼吸感描述的自己的感受。 说出来自己都要笑出声，还有什么五彩斑斓的黑等等。就比如呼吸感这样的词，这个词听起来比较抽象，让听者都有点不太好意思追问什么是呼吸感，其实你问了，说者也不知道怎么描述。可能说者觉得现在信息太密集让人无法呼吸，但设计者觉得现在刚好，所以本身就没有一个标准，更多的就是主观的感受，让你不得不接受这个建议的原因是因为两者的身份。
我们用我们能够讲述的语言去描绘我们不懂的事物，再例如设计师和开发还原只会说往左移动10px，而不会说给这个view加上padding left 10px。还有你和开发为什么沟通起来那么累就是因为你俩完全无法站在对方的角度对这件事达成共识，设计师通常喜欢描述从左到右或者从上到下，但是在开发的语音认知理，他需要知道的是空间坐标，并且具体的移动单位。所以为什么我们那么鼓励广大设计师去学习一些开发知识，开发也尽可能的去补充设计背景。
在这里，交互设计师产出的交互说明文档就是能够帮助设计师与开发有一个更好的沟通，所以能力较强的交互设计或者视觉设计都能够把自己想表达的信息表达的很清楚。
再举个例子，不知道大家有没有编辑过问卷或者做过用户访谈，很多时候是不是觉得收集到的信息无效、无用，其实很多的原因是因为我们和用户对于这些问题压根不在一个频道，比如：你的问卷问的是，您喝酒的频率是多少，选项有：从不、偶尔、经常，在用户的眼里偶尔可能是1年喝一次，而我们觉得差不多1个月喝一次算偶尔，再比如访谈的时候问用户这个问题：您觉得您喜欢下面哪个页面的风格？用户：“什么是风格？”
所以交互设计师有一个能力久显得很重要了：让万物都可与之对话的能力，对话需要什么，是语言。
我们都知道，语言是我们沟通的根本，语言是由词汇按照一定的语法结构在不同的语境中所组成的复杂系统。不同的种族有不同的语言，不同的专业有不同的语言例如在围棋中有长、立、并、空、顶等等，例如在模型手办中有分线、渗线、勾线、补土等，这也都是在特顶专业领域中的一些术语，但这些并不是语言，只是在某个领域中大家总结出来便于沟通的文字符号。
所以我们再回到上方看一下定义，首先语言是由词汇所组成，词汇是由符号做组成，大家可能都听说过比如乐高啊、原子理论这样的组件搭建方法，但这些都仅仅只是规范，而并不是语言。语言拥有更强的普适性和通用性。
那么我所认为的语言他首先包含了能够组成词汇的符号，这些符号大概就是指：点、线、面、体、色彩由这些点线面体可以组成的词汇有：按钮、文字、图标、图片等。但是光有词汇不行，在汉语中有12种词类：名词、动词、形容词，在由句子组成的词汇中包含了不同的成分：主、谓、宾、定、状、补...这里不过多叙述。
语言很重要的一点它具有语境，语言的运用包含了看听读写4个方面，看和听指的是输入，读和写指的是输出，那么交互设计语言中，也包含输入和输出两种属性，例如输入指的是由不同“词汇”组成的“句子”，比如由标题、箭头、色块组成的一个itme，是一个可被理解、看懂的输入属性的控件。输出指的是该控件可被出发并且进行状态的变化和所进行的任务跳转。
这里的控件虽然有两个属性，但是还需要语境来帮助我们理解，一个是它本身所能够输出的默认状态的，比如点击之后的跳转页面，另外他也可以具备产品赋予的自定义属性，例如底部滑出picker。
还有，在汉语中“去买两个桃子吧”，这里的“两”肯能是虚数也可能是实数，但是在交互设计中，我们如何表示点击1下和两下或者是多次呢，一般单击的属性通常可以有一些特性的符号属性所表示出来，例如加下划线的文字、一个带箭头的item、一个图标、一个带有主色的文案等等，那么双击的话可以用双箭头来表示吗，当然不可以，双击在移动端的手势中具有放大、点赞、返回顶部、定位消息、定位光标等功能。
那我们发现如果把交互设计能够做成类似于语言的系统是非常有意思，并且有用的。这会让更多信息不对称的情况消失，不仅仅是设计师，在产品团队中大家都能够有一套共性的交互语言系统，无疑是一件非常提高效率的事。但是目前的很多交互规范的文档中，大多都是多种元素的拼合，给出常用的、可复用的控件、组件，但是大家依然还是无法从语言角度去创新，这就导致了很难会有新的、有用的交互形式的出现，比如很多搜索控件都是承载在顶部导航栏中，那么在做规范的时候也只能在这个组件上去微调，殊不知搜索这个控件的“语境”并不单单只能在页面顶部，例如高德地图做的就很好。这样一来，这个组件的常规规范形式就能和很多产品区分开来了，当然要视产品形态不同。
市面上有许多的新零售电商产品，页面中的信息流也是大同小异，但是无论是交互还是产品在做设计师必须要考虑的就是产品定位与当前状态。例如目前我们看到的都是以下的信息流样式，但是我们要知道，30000个sku和3000个sku的展示策略肯定是不同的根据算法的瀑布流在30000个sku中可以随意展示，但是3000个就不行了，很可能在算法的过程中用户会频繁看到重复的商品。所以使用双列布局的方法并不合适。
所以这样的产品首屏策略就显得非常关键。我们可以看到常规的电商产品中，首屏基本上都是呈现这样的策略，从顶部的搜索、分类、banner、分流入口、cta、营销瓷片区这样的布局，从基本上能够满足一个大量sku电商产品的所有需求，但是如果用户定位和产品本身的基础无法支撑起这样的场景又该如何去做首屏策略呢？
从交互角度入手，那么既然我们无法做到大而全，那么我们至少可以做到精准、限时，让用户上瘾的策略，上瘾模型这边不再赘述。所以类似云集在首屏的策略可以概括为整合搜索与banner、分流入口、cta、营销瓷片以及以时间为纬度展示的大图信息流。重点在于可随意控制的营销工具，以及时间轴的商品推荐，让有限的资源呈现更多的形式变化以及让用户有时间概念，每天固定时间来进行活跃。
通过交互手段我们也可以给运营工具更加灵活化打基础。例如我们经常看到的营销瓷片可以划分为非常多样式与可能性，并且在后台工具中灵活控制，同时除了日常的营销目的之外，在大促或者活动需求下更可以将整一个首屏切换为极具氛围的信息呈现。
最后总结一下，我认为交互设计也包含了视觉，所以我们在决定用什么样的设计形式之前需要考虑更多，入业务、用户价值等等，从而用更加有价值的交互策略提出问题、解决问题会比单纯的用规范去搭建界面更加有效。
不管是做UI设计还是画插画，有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够，其实不然。一个可能是大家总结的太少，从来都是凭感觉和运气去配色，但其实都是有讲究的。本文不会给大家重复讲解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，这些大家都可以从某度中直接搜到。我今天要给大家分享的是人们是如何认识色彩，并且在产品设计中使用的。
大家都知道，对于不同的颜色，我们对其的感知是不同的，有人觉得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那这是什么原因呢？首先我们要知道我们眼睛内存在两种感光细胞：视锥细胞和视杆细胞，视杆细胞能够感知光线强弱但无法感知颜色，而视锥细胞却相反，视锥细胞内还有3种对不同频率光敏感的细胞。我们经常会用到视锥细胞，而视杆细胞却用的少，更多的是在黑暗的环境中使用的多。
视锥细胞的三种类型分别是低频、中频和高频视锥细胞，分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感，它的范围包含的比较广，特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。
大家在平时生活中都能看到，在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识，因为这些非常醒目。更容易被红视锥细胞感知到，但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁的多。
我们来做个实验，如下图，大家觉得在中间的灰色块是纯色还是渐变色，可能很多同学看上去都会觉得是个渐变色，但其实它就是一个纯色，不信的同学可以自己在工具中尝试一下。
但如果你把这个色块拿出来后，不在这个环境中直接进行边缘对比，那就不会出现渐变的情况了。那光说原理，我们也来看一下在产品设计中需要注意的地方，因为在UI界面设计中我们通常需要把一些图片、卡片叠加放置，这样就会造成边缘视觉的对比，本来不明显的两个元素重叠之后变的很明显。所以例如一些标签的背景色和页面整体的背景色。
如果你想要让两个颜色接近的元素具有识别度，那么最好将这两个元素进行重叠摆放而不是分开摆放。另外，如果是卡片样式的设计，背景色一定不要过于灰暗也不要过于浅白，过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比，显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。
还有，为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理，因为文字和背景叠加产生的轮廓只是文字的轮廓，在我们的第一印象中只是一种符号，当它被赋予颜色之后我们才会意识到它需要我们去注意或者可被点击，但依然还是不够明显，所以为了强化可点击这个感觉，我们才用了线框、背景色、箭头等方式。
一般来说，产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中，所以例如闲鱼、马蜂窝等，主色都采用了黄色，黄色具有非常活泼、有趣、好玩的特性，无论是线上还是线下都使用了这个品牌黄色，从每一个线上元素的主色，到线下包装的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的话，可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的，所以在线上的界面用起来会非常不和谐，和整体偏浅色、轻的风格对比起来太强烈，引起不适。
而且线上觉得还OK的颜色，由于印刷的原理，实物也会更加偏低饱和和偏暗。
我们在上一篇十万个为什么文章里提到了人们如何阅读信息，提到了一个视觉凹的概念。所以在界面中，什么样的地方使用色彩是有讲究的。所以在这里通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩。例如下方产品，使用了高亮色来引导用户视觉。
当然色彩的运用也会讲整个页面的层级凸显出来，而不单纯的用中性色来区分层级。
同样是上两张图，大家可以清晰的看到，美团中的附近热卖好点、满减标签、价格，其实都只具备信息的呈现，但不具备交互的特征和状态。但淘票票中的“4.7万”和“展开”却不一样，“展开”使用了辅助蓝色，这里的展开就具备这个文案所描述的这个控件具备的交互特性-点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上，当然也会有其他的色彩来表示可点击。
所以不是所有的元素都要赋予颜色，这样会使整个页面非常混乱
另外，UI设计中主色除了引导用户的作用外，也可以表示当前正被激活的信息状态。例如爱奇艺app中播放详情页面，当前板块标签和正在播放剧集的激活状态。
色彩除了上方所述的字段中的不同使用，在图片和整体氛围营造中也起了很大的作用，目前很多2c的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标，或者在首页营销板块的瓷片区域都会用品牌色在活动时段内进行氛围打造
在色彩的心理学上，大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面，可以看下方多种色彩的描述。
然而其实很多的产品使用的色彩和我们所认知的会有一些差别，比如咖啡品牌的主色选择，在我们常规人之中，咖啡应该是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色
在瑞幸刚出来的时候，很多人其实不太习惯把这个蓝色和咖啡结合起来，但是为了塑造品牌差异化，瑞幸一直将“蓝色”作为品牌的主基调，“小蓝杯”这一称呼不但让消费者感到亲切，也在众多的咖啡中有了属于自己的记忆点。在这支广告片中，主基调同样是使用蓝色，不但符合了当下消费者的视觉偏好，也在为用户留下记忆点之后，也让用户在看到蓝色时自然而然的想到瑞幸咖啡。
但凡各位使用了这样的配色，保证各位过不了试用期，相信我。所以大家千万要避开。
会让人产生“幻觉”！让人产生视觉疲劳，例如我将饿了么这个界面的色调调整一下大家看一下，不亮瞎算我输。
为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色。所以这个也是要避免的
让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点，所以我们常用的方法是6、3、1的色彩配比。
荧光色绝对不可以使用在UI界面中，尤其是主色。会让你瞬间失明！
在很多dribbble的飞机稿中，经常能看到这样的配色和练习。无论是在练习中还是实际项目中，这样的界面也完全无法让用户看到想看的信息，没有重点且轻飘飘的感觉。
说真的，这样的风格确实耳目一新，但个人觉得可能不会成为主流。因为它就和第五种一样：信息可识别性很差。就不说色弱的人群，就正常的用户来说大面积的白色+饱和度低的元素结合感觉就是得了“白内障”。另外我们常说的一点就是所有元素都强调就等于什么都没有强调，这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知，原则是轻量化却又需要那么多阴影，这样就有点自相矛盾的感觉。
为了营造这样的“新拟物”的轻量氛围，还不得不在整个界面中简化大部分元素，能不加文字就不能加文字，说的好听叫做使用了奥卡姆剃刀原则，有一句话一直非常影响我做设计：“设计是需要被简化的，但是简化的过程一定不简单”。所以不是单纯的简化所有元素为了达到这个风格的目的。
例如下方，两种对抗色重叠后会引起视觉闪烁的感觉。是不是觉得我有点帅的晃眼
首先我们必须要说，色彩肯定是需要结合产品和用户的定位去指定和提炼的，所以前期会需要去做一些研究例如用户画像，品牌冲刺或者是情绪板等方法。得到几类“真实的虚拟用户”，从而确定一些主色的方案。然后我们在主色的选择中需要避开上面体到的坑，并且对市面上的app进行总结，我们发现大部分的产品色，简单来讲在我们HSB模式中去色都在一个固定的范围，就像这样。
在上文中也说到用色比例的631法则，所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎，其实辅助色没有非常明显的1种或者两种，都是多色的辅助色方案，都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略，一个主色搭配多个辅色，如果有其他独立的板块可能需要重新定义专属的配色策略。
其次再定义中性色，比如字体和线条以及背景色。字体是为了让信息有对比，显示层级，那么通常给2-3种层级即可，至少2种，至多3种。在选择3个层次的中性色文字是，给大家一个建议：标题/正文文字颜色HSB的B值不要大于20.备注和次要文字b值不要大于50，默认文字不要大于80，大家可以去尝试一下，且中性色不得使用纯黑。
文章来源：站酷 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
ajax 即 “Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的技术。早期只有同步的方式，多个请求，只能顺序执行，只能等待执行。有了ajax异步技术，可以无需等待上一个请求执行完成，就可以直接发起请求。服务端返回后，ajax通过回调技术通知客户端程序，把响应的结果传递给用户事先写好的回调函数。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页进行局部更新，提升网页的效率，用户无需等待页面的刷新，嗖的一下内容就变化了。改变原有整个页面刷新，造成页面晃眼的现象。所以这项技术一出现，就得到业界的推崇。
关键字：异步、回调、局部刷新。
主流方式：
技术栈
用户页面中触发ajax请求，访问后端服务器，Web 中间件 拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串（可以通过Jsonp格式实现跨域访问）。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。
$.ajax({ //交互方式 $.get，$.post，$.getJSON
async: //请求同步异步，默认true异步
type: //请求类型：GET/POST
url: //请求的网站地址
data: //提交的数据，参数
contentType: //请求的MIME媒体类型：application/x-www-form-urlencoded（默认）、application/json;charset=UTF-8
dataType: //服务器返回MIME类型：xml/html/script/json/jsonp
success: function(data){ //请求成功，回调函数，data封装网站返回的数据
console.log( data );
},
error: function(e){ //请求失败回调函数，e封装错误信息
console.log(e.status); //状态码
console.log(e.responseText); //错误信息
}
})
json请求返回就是json格式，而jsonp请求返回是fun(json)格式。
查询网址：http://p.3.cn/prices/mgets?skuIds=J_1411013,J_1411014
[{"p":"-1.00","op":"3888.00","cbf":"0","id":"J_1411013","m":"6699.00"}, {"p":"-1.00","op":"799.00","cbf":"0","id":"J_1411014","m":"1398.00"}]
查询网址：https://d.3.cn/desc/1411000
通过JSONView插件展示数据：
网站有一个跨域问题，非同一个网站的请求默认是禁止的**（同源策略）**，那我们的页面要访问其他网站啊，例如：我们访问京东获取其商品的价格信息。这时就必须用jsonp方式进行跨域请求。
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
json字符串: { "id":"100","name":"tony","salary":"30000" }
js对象： { "id":100,"name":"tony","salary":30000 }
可以看出js对象中value值如果是整数，小数，无需加双引号
Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> //引入js支持,axios.min.js文件 <script src="../js/axios.min.js"></script> </head> <body> <div id="app"> 商品价格：{{info}} </div> </body> <script> new Vue({ el: "#app", data(){ //data的ES6函数写法 return { info : null } }, mounted(){ axios.get('../data/price.json') .then( //箭头函数，res为返回值，res.data 返回的json数据对象 res => ( this.info = res.data.price ) ) .catch(function (e){ console.log(e) }) } }) </script> </html>
注意：
axios请求头的 Content-Type 默认是 application/json，而postman默认的是 application/x-www-form-urlencoded。
ajax一般采用@RequestParam接收参数：
@ResponseBody public Result testpost(@RequestParam String username) {}
axiso采用@RequestBody的json方式接收参数
@ResponseBody public Result testget(@RequestBody Map map) {}
传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。经过多年的更新维护，真的已经是非常的方便了，优点无需多言；如果是硬要举出几个缺点，那可能只有：
Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
防止CSRF：就是让你的每个请求都带一个从cookie中拿到的key，根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
总得来说：axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。
转自：csdn 论坛 作者：布诺i
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
文章编辑:孔宇SEO
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近发现一些能提高图标细节和高级感的小技巧，今天与大家分享下这几种风格的设计思路，以及需要注意的点。
分享大纲：
顾名思义图标之间有纵深前后关系，通过这样去处理，可以让图标层次丰富，增加设计细节，打破枯燥无味的单色扁平图标。
通常大部分人设计一个图标就直接将图形画出来后，这样就完事了，没有继续深入下去。这样图标看着枯燥乏味，普通了一些。
如上图，将图标在接口处进行细节弱透明度处理，那么效果就完全不一样了。
这里需要注意，一般都是在图标的接口处进行层叠处理，从A到B的一个线性渐变。
下面来看看案例：
△ Atlassian的品牌图标系统
使用建议：运用在面形图标效果会更好些，或者线条粗一些的图标，一般运用在TabBar上面居多。
这种比较好用，将图标进行抽象放大化处理，变成一种图形方式。一般运用在卡片设计上面居多。
左侧卡片上面，图标直接使用描边效果。卡片里面虽然加了一些底纹图形，但是整体效果略显平庸了一些 。
重新将图标进行图形化处理，既能够表达当前含义，同时设计上细节和品质感有所提升。
其他思路延展示例：
当然还有一种类似的思路，可以将图标进行放大化，并进行色彩分割处理为背景，前景放图标和文案等。
如图，我将前面两个思路综合运用，图形化背景和层叠图标。这里的图形希望大家不要乱用，尽量使用图标的图形来演变。
图标通过弱渐变透明处理，其思路有点类似第一个。但是这个方法图标整体带透明度的范围更大。
先来直接看个案例：
这种图标给人比较新颖的时尚感，层次也丰富。
如何处理这种图标？
非常重要的一点，需要注意不识别度问题。如左侧图，图标和背景之间几乎融为一体，看不清主体元素。右侧处理刚好，能够识别出图标含义。
处理时候一定要注意透明度的关系，当然也与卡片背景色有关系。
关于图标设计三个小技巧，可多看几遍，思路比较简单直接。当然最重要的是灵活运用，也可以将三个思路都融合起来去设计图标。
本文只是抛砖引玉，这些图标处理的技法，并不是能适用所有场景。大家还是需要根据自己产品特征，找到合适的突破点去设计。
文章来源：优设网 作者：功夫UX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
成本思维是什么？
今天跟大家聊聊一种思维，不是产品思维也不是交互思维而是：成本思维
为什么设计师要有成本思维，以及成本思维在做我们做设计时对我们有什么帮助。
不仅仅在工作中我们需要思考成本，在生活中我们也无时无刻都在计算成本。成本总是和收益挂钩，所以贝克尔在《人类行为的经济学分析》中提到：人的任何行为都是理性选择的结果，无利可图的事人们事不会去做。虽然这句话不能覆盖所有的人，但是大多数人就是如此。
在夜深人静的夜晚你饥肠辘辘想吃夜宵，你可以选择下楼到周边小吃店就餐，也可以选择叫外卖，前者付出的成本是你需要通过身体行动来交换最后的结果，后者则是花费一定的金钱来代替前者的行动。
那么我们通常会如何选择呢？如果这两种成本有很大的差异，比如需要到很遥远的地方那么除了身体行动成本外，时间成本也会计算其中，所以相比后者成本陡然增大，于是我们就会选择成本低收益大的方式。但是假如你现在极度想要吃那家的夜宵，外卖点餐会特别影响口感，那么你可能会选择前者，这里由于外卖口感和主观意愿影响到了我们理性的选择。
成本决定了收益的效率、大小和方式，小到你伸手拿一支笔你会选择最近的，大到我们人生的投资。成本与收益之间并非是直接关系，收益的大小的不取决于成本的大小，还有风险因素。例如我们在对 UI 界面进行优化，可以选择的方式有很多：
我们的目标是让用户获得更好的体验并且提升业务价值。3 种方式需要的成本高低不同，我们都希望付出最小的成本达到最好的效果，于是我们就会考虑到风险因素，假如新流程用户不会用怎么办，假如新版本导致的数据下滑怎么办，假如行业出了新政策了怎么办等等。所以除了这些成本外也要考虑应对风险的成本。
你看为什么有钱人都会坐头等舱是因为头等舱可以帮他们节约更多的时间，提供更好的环境与服务，让他们产出更多的价值。还有假如你的车坏了，你最直接的方法就是花钱找人帮你修而不是自学自修，因为你将花费太高的成本。
再举一个例子，我们想提升能力，有的人选择自学、白嫖，有的人选择报培训班，这也只是时间和金钱上的成本选择，如果你的自学（白嫖）在短时间收益很大那就毫无疑问帮你省了一大笔钱，但是如果自学很久都毫无效果，那么时间就是你花费的成本，时间和金钱不同的是，时间不可逆。看起来花钱比花时间更好？不是，花钱也有风险，比如课程质量和服务很差，钱没了还学不到，甚至赔上了时间。但如果你选对了，那么收益就远远会大于自学。
1. 实现成本
实现成本指的是想法与落地中间需要付出的行为、时间和其他损耗，例如我们希望提升用户下单的转化率，我们可以选择：
在这几个方案中最低成本是 「按钮设计更明显」，因为只需要调整样式和简单开发就可以实现，但收益并不是最高的，而其他的方案需要更多的角色花费更多的时间来参与，但是收益也不是显而易见的。所以如果你的产品比较成熟，那么我们一定选择成本更低的方案，反之我们会进行更高成本的尝试。
还有比如我们找工作，新公司福利待遇比现在公司好 50%，平台也更大，是否不需要思考直接去呢？当然不是，你需要考虑通勤成本、生活成本、自身成长成本等等因素。如果你 50%薪资涨幅换来的是 996、每天通勤时间 3、4 个小时，不仅仅是时间精力，还有我们的身体健康的成本，我会觉得远远不值，成本太高。
2. 机会成本
我们先来看一下定义：机会成本是指面临多方案抉择时，被舍弃的选项中价值最高的就是本次决策的机会成本。举个例子，比如当前版本我们有 1 个开发一个设计一个产品，我们面临着两个需求，但是资源和时间只够我们做一个需求，这时候 2 选 1，那个被抛弃的需求所拥有的价值就是我们所选择的那个需求的机会成本，相当于我们放弃了那个需求所拥有的价值。
再通俗一点讲，我现在有 100 万，面临着两个选择：1.银行理财，年收益 4%，40000. 2.做生意投资，年收益 8%，80000，那么就相当于我花费了这 4w 的潜在成本获得了 8 万的收益。
3. 边际成本
边际成本的理解很简单，我们可以理解为我们每付出一定的成本收货的收益或者每收获 1 个单位的收益所付出的成本。用一个通俗一点的例子来讲，比如你一共学习 10 天，第一天学完你考了 30 分，第二天学完你考了 50 分……第8天学完你考了94分，第9天学完你考了98分第10天学完你考了100分，花费的单位天数一样但是每次增加的分数却越来越少，收益也就越来越少。
在做产品设计的时候，我们往往会有一个板块叫为你推荐，比如微信阅读中的这个板块，它一次提供了用户 6 本书，虽然算法可以算出有许多书，但是这里每次只提供给用户 6 本，是因为涉及到了边际成本，少量多次提供能够让用户更聚焦，更快的选择好书本进行阅读，每多提供几本书，用户选择阅读的时间成本就会越大。有同学会问：那我只给 1 本不就好了，用户就能马上读了，何必要推荐 6 本？
我们如何保证那一本刚好是用户想读的，没有办法做到如此精准，如果每次只推荐一本书，而用户尝试了几次都不喜欢，他们就会放弃，所以这里就会选择一个临界值，比如我们可以选择每次放不同数量的书，根据数据判断在给用户几本书的时候用户阅读转化和选择时间成本更低。
4. 体验成本
体验成本也是我们设计师需要时刻关注的，俞军老师在产品方法论中提到，用户价值=新体验-旧体验-替换成本，体验成本可以包含很多信息，最主要的就是认知与交互的成本。
认知成本
如何降低认知成本可以从以下这些点进行优化
1.文案
文案的设计要求是简单易懂，避免产生歧义，之前给大家举过的一个高德地图导航在到达目的地之后给出一个“原路返回”按钮的分析，大家可以再思考一下，是否会产生歧义。还有确定、确认大家是否知道怎么用呢？
文案也需要有情感化，避免生硬、带负面情绪的问题等等。
2.样式
视觉最为直观，一个按钮一个控件的样式是否能满足用户的心智和预期，将会影响用户的认知，例如以下的几个按钮，出现在不同场景用户会出现一系列问题：为什么我点了没用？为什么还不能点？我到底该点哪里？
还有你的品牌是否识别度高，也决定了用户对你的认知，最近小米花了百万请大师做了新的 logo，在视觉上更加圆润，在圆 logo 的基础上做了很多的微调，实际上也是避免了太大的 logo 变化导致品牌认知成本的提高，认知成本一旦太高，品牌市场的敏感度和曝光度还有各种替换、衍生、配套的隐性成本也会大大增加。所以这一举动是明智的。
3.信息
比如我们希望新用户去关注一些大咖、kol 获得更好的推荐，但是如果我们只是将推荐者的头像和昵称给新用户，那么这个策略就是失败的。因为我们没有考虑新用户的认知：1. 我为什么要关注她 2. 关注她我能获得什么。所以仅仅依靠头像和名字在这里对用户的认知是没有任何帮助的。
行为成本
我们通过利用肢体来和媒介进行交互，目的是完成某项任务。其实只需要你抬手，那么就是产生了成本，只不过某些成本是固定的无法减少的，比如你要去骑车那就需要去解锁，如果没有锁车可能就会被偷走，这是出于安全考虑。
行为成本在具体数字产品中我们可以发现很多，例如你只需要将手机拿起，屏幕就会亮，相比于找到解锁键再按一下成本就低了很多。而亮屏后不直接解锁是为了防止误触或者隐私，所以还需要通过指纹或者人脸进行识别。
例如几种不同的验证方式，利用滑动拼图来解锁和输入相关验证码解锁，前者比后者的学习成本和操作成本都低。
在移动端我总结了几个减少交互成本的方法，不妨来看下：
soul 音频处理；日期选择；iPhone 底部横条切换窗口
游戏昵称随机；股票买入数量
这里也有同学会问，既然都可以代替，那滑动能否代替输入？必须也是可以的，例如 iOS 自带的计时器中选择时间的控制器，还有闹钟设置，这里要注意的是，滑动代替输入是要基于本身该信息是由范围内并且不需要精细化控制的，比如房价筛选，房价本身量级很大，用户筛选也不会精确到个位数，在这里用点击和输入会比滑动的成本更低。
反例就是音量、明暗控制，大家可以感受一下输入在这里的鸡肋。你需要精确控制选输入，需要大致的范围选点击，非常模糊的感受选择滑动。
例如我们在开车进行导航的时候，打字输入非常不便，于是加入了语音输入。还有在微信进行账号切换时，我们可以选择利用语音输入数字来验证身份。
对于新用户操作复杂功能和界面的时候，提供更多提示能够很大程度上减少用户的操作成本。
在 iOS 或者安卓的手势控制中，我们会发现又一些常用的手势比如：点击、拖动、轻扫、双击、缩放，这里我们可以定义为一级手势。还有一些不常用的比如：重按、长按、三指滑动、三指缩放等，这些手势的认知成本和行为成本都很高，定义为二级手势，不建议频繁使用。
设计师在日常工作中接到的需求繁多，无论是在做需求之前还是在思考设计方案的时候，成本思维可以帮助我们很好的规避一些问题和风险，我们追求控制成本使收益最大化。所以学会控制成本的设计师不仅仅题可以提高个人工作效率还可以帮助公司创造更多价值。
文章来源：优设 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：随着公司和业务的不断发展，原先的系统不一定适用于现在的场景，因此需要进行升级改造。作为设计师，我们是如何系统性地去为业务带来更多的体系化的价值？本文作者将从五个方面进行分析，与你分享。
项目背景：
当公司的发展规模到一定程度时，考虑到信息安全、持续采购成本与相关风险，企业会采取自研的方式来实现部分协同工作软件的自产与自用，本文将以内部目标管理系统为例，阐述我们是如何系统化的做企业系统设计改版？
什么是OKR？
OKR，是Objectives 和Key Results 的缩写，即目标和关键结果，它是企业进行目标制定和过程管理的重要手段。采取OKR的管理方法，将公司目标层层分解到团队，部门再到个人，在各个层面贯穿和统一起来，以帮助实现目标达成。
改版的契机是什么？
改版不是设计说想改就能改，在做新的OKR系统之前，之前是通过「绩效系统」来进行目标管理和绩效评估，支持简单的制定和结果的评估的使用，因系统操作流程、界面体验、业务场景已经严重的影响到目标管理的效率和效果，具体体现在几个方面：
总之，工具的体验已经是严重影响公司员工目标管理的一道障碍，所以如何将整体的系统操作体验提升起来是设计急需去解决的问题。
那么，确定有问题需要改，作为设计师，我们是如何去系统性的去为业务带来更多的体系化的价值？
理清业务目标，制定设计策略，是系统性改版产品的前提，在实际工作中设计师很容易被产品的原型、对产品的描述蒙蔽，只有非常清楚的理清业务的目标，才能制定系统性、合理的设计策略来支撑业务，通过专业的设计方法来助力业务结果的达成，在这个项目中我们是如何做的呢？
对焦业务目标：
OKR系统的改版项目最开始是高层的诉求，提的业务要求很简单“让大家用起来，目标管理起来”，那么如何让大家用起来、利用系统将目标管理起来是当前需要解决的的问题。
“让大家用起来，目标管理起来”需要去解析的是，为什么旧的系统大家用不起来？为什么目标管理有这个管理机制，但是没有依赖于系统管理起来？
制定系统的设计支持策略：
设计师同行可能会问：不都是做需求吗，有啥做啥，有啥策略可言？如果是以这样的方式来做设计改版，很有可能会被业务方牵着跑，即便是知道对方坚持的不是很合理，但也没有办法来推动这件事往更好的方向发展。
理解用户，溯源本质问题，是最设计环节必不可少的环节，通过对用户的深入研究，挖掘本质的共性的问题。在这个项目中，我们通过定量+定性的手段获取用户的心声：
定量问卷——获取用户的基础的问题：
前期在公司内部针对普通员工、MGR、HRBP、高层4种角色，调研了100多位内部用户的心声，将不同岗位和职级对于绩效系统的问题真实反馈收集汇总。
定性访谈——深入获取用户的诉求：
因为系统面向对象是企业内部员工，所以针对每个角色都做了访谈调研，深入的挖掘他们对当前的产品使用问题，并将问题按照核心流程中所涉及的角色在不同阶段所需的操作和流程进行了梳理，整个阶段拆解为：制定阶段、执行阶段、结束回顾三个主要阶段，拆解每个角色在这些阶段中的触点和机会点。
结合问卷、专访谈的分析和梳理，筛选出目前系统的核心问题：制定流程、对齐关系、过程跟踪、信息触达。
在前面已经初步发现和定义了问题，这么多分散的问题如果平铺出来可能会吓到产品和研发，所以接下来需要将其系统化的变为整体的设计方案，我们需要将其串联成完整的场景，然后逐步击破，我们是如何做的呢？
重点模块及争议点的讨论：
在场景分析前期，我们设计内部针对“核心阶段”、”对齐关系“、”权限管理“、”全员OKR“进行了讨论和范畴的界定，对以下问题进行了讨论：
梳理清楚角色关系图，有助于多方去理解各个维度的关系：
结合业务需求，赋予体验价值：
OKR系统虽然最为一个内部管理系统，我们也逐步在设计侧去从“具有功能价值”往”“赋予体验价值”去发力，将更多的“能”和“可以”转变为“方便”、“简单”和“轻量化”等，来提升各个流程阶段中的体验，比如：
具体到串联场景怎么去理解？
一个新的OKR周期会经历三个主要阶段，每个阶段会涉及到多个节点，在每个一个节点上去思考发力方向：
为了便于理解，将关键的场景提供了比较简短的描述，这个描述就是从旧到新的过程，后面的设计展示也是围绕着这些内容进行展开，具体如下：
1）制定阶段，包含写、看、评、管
写：轻松撰写，高效共创
看：简单查看，便于跟进
评：轻量互动，便于记录
管：高效审核，随时跟进；条条对齐，事事关联；
2）执行阶段，包含更、改、推
更：随时更新，条条追溯
改：慎重修改，条条有据
推：合理推送，终端打通
3）结束回顾，包含查看、追溯、复盘
查看：快捷查看历史周期
追溯：记录明显标记，事事追踪溯源
复盘：复盘总结，目标达成
经过前面一系列的调研、分析总结，设计围绕着3个阶段的关键结论进行展开，即OKR制定、执行、结束三个阶段。
（因每个阶段篇幅较长，方案设计部分仅展示部分页面的思考过程和页面展示）
在写OKR时，设计让撰写轻松、可以高效的共创，主要通过以下3点：
1）清晰的页面结构
让用户能明确的感知到系统的整体结构是有规律的，可以简单被理解的，即左边全局控制，右边内容展示左边导航全局控制着写、审、查、通4个功能
右边内容展示跟随着导航内容变化
2）O与KR的录入快速切换
为了让用户可以沉浸在一个页面写内容同时，还能纵览全局结构，在写OKR的页面增加了OKR大纲的锚点切换功能，便于多个KR之间的切换，避免因页面过长带来的翻阅困难的问题。
3）减少步骤，减少跳转
减少步骤，减少跳转有很多场景都有涉及到，比如：
查看和跟进属于第三方的协同伙伴，为了让伙伴更轻松的跟进，做了2个设计处理：
在管理者审核下属员工时，简化了大量信息，前置待处理信息以及待处理的关键信息，让管理者比较直观的知道有哪些人提交了，哪些人修改了，哪些人需要重写等等。
为了让员工便捷的进度管理，在OKR管理页面以轻量的临时弹窗，来方便用户快速发起和输入内容，每条更新记录同时也能同步给关联方。
慎重修改、条条有据主要是满足管理者和关联管理诉求，OKR可以在中途被修改，但是修改的结果是需要明确告知相关人，在增加、删除、减少的内容上，以特殊的示意对比来记录依据，同时也督促发起方能审慎修改。
OKR的消息推送在整个阶段中占据了非常重要的信息触达的作用，在整个OKR的制定阶段和执行阶段不可或缺的部分，而消息推送过多将会导致信息冗余，那么如何合理进行推送消息也是重要一环。
我们把消息类型通过两个维度定义消息的优先级：“重要性”和“紧急度”，通过四象限法则，我们拆出来了：
通过此模型和产品确定了每一个消息类型的所在位置，且清晰表达的了每个消息应当的位置。
每个渠道都有相应的特点，我们结合渠道的特点去确定不同优先级的消息应当推送的渠道。
最终在实现方案上，实现了有层次、分场景的消息推送方案，尽量做到少打扰用户同时，可以及时了解重要信息。
桌面端是主力生产平台，通常是多窗口多任务，键鼠操作精确高效。在专注姿态下，我们可以尽量安静地展示更多常用功能，让用户在一个视图中即可完成相对复杂的任务。同时在列表页中，更大的空间让我们可以把目录树展开，减少导航跳转。
手机端的特点是专注当前任务。可以通过信息降噪，加强对比来让信息传达能明确，帮助用户完成单个任务；而清晰的导航可以避免小屏幕上页面频繁切换所带来的导航负担。
1）最终实现方案
结合终端的差异，把移动端定位为：侧重便捷快速的查看和沟通，同时将重编辑的场景在移动端去除了，更加侧重于查看、互动和进展更新的低成本操作的场景。
2）中途验证效果，确保上线的效果
在设计的过程中，为了进一步的验证设计合理性和易用性，针对角色代表进行了8组可用性测试，最终普遍反馈新版的操作体验更好。
针对了项目的设计效果落地，设计除了在过程中不断的跟进产品和研发提出的问题，在测试阶段提出效果走查文档，不断的打磨细节，才能保证最终的设计效果，当然付出总会有回报，新版的系统上线除了制定、管理、查看关键模块的UV和PV的业务数据达到了比较好的效果外，在新老版本的满意度和流程操作犯错率上也得到了一个比较好的验证。
在OKR系统项目的整体流程中，针对产品大改版的时候，我们设计需要前置思考业务，全局看待产品，系统性的去思考和设计，助力业务结果达成的同时让设计价值更好的体现出来，最后再回顾下整体流程：
文章来源：人人都是产品经理 作者：酷家乐用户体验设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com