【PS必备技能】2.5D图形制作规范，用ps最简单的方法让你学会2.5d图形设计！
视觉设计基础“四大原则”之《重复性》
如何制作视觉平衡的图标，正确的形状对齐以及完美的圆角
如何一次只做一个小决策，创造一个更容易获得和使用的体验
引人注目的UX设计背后的心理学
每天，您都会在线访问多个网站。他们中的一些给人留下了积极的印象，而另一些则使您在数毫秒内按下了后退按钮。您最终从一个网站购买了产品，而不是从竞争对手那里获得了产品。是什么引导这种行为？您为什么对某些网站感到满意却却避开其他网站？
这样做的主要理由之一是在用户体验设计中实施心理学。您喜欢的网站聘用的UX专家知道如何在与网站交互的每个阶段触发心理反应。在线心理学的使用是成功的，因为我们在人类生存的几个世纪中获得的某些进化特征在我们每天与世界各地的互动中仍然发挥着重要作用。
本文介绍了一些常见的UX元素以及它们背后的心理思维。
有关服务或产品的建议
例如，当您在机票预订网站上时，会在预订完成之前或之后获得有关酒店，餐厅或旅游选项的建议。在许多情况下，如果价格足够诱人，人们就会继续预订酒店或在餐厅预订。当您搜索抵押贷款时，同样适用，并且您还会获得有关债务管理或退休计划的建议。
图片：Skyscanner
这是一种称为“预期设计”的UX创意。目的是根据您在网站上查看的内容来建议您最可能需要的其他内容。这个设计思想是基于当我们在互动中感到被理解时更快乐的心理原理。这在所有领先的电子商务门户网站上也可以看到。
图片：Flipkart
这种UX设计的一种变体是在许多网站上延迟显示弹出框以进行加价销售或潜在客户。这也是可以预见的，因为它基于这样一个事实，即许多用户直到从站点上花费的时间中获得了一定的满意，才会对弹出框的内容不感兴趣。
显着性原则是另一个鼓励用户体验设计决定的心理原则。它说人们将注意力集中在当时与他们最相关的事物上。因此，正在寻找飞往夏威夷的廉价航班的度假者将很高兴看到提供经济实惠的住宿，甚至为他们的旅行提供融资选择。仅登陆页面以读取症状的用户将仅关注页面的内容，而不关注订阅弹出窗口。
限制用户选项
您选择的网站比强迫您跳过五个菜单来查找相同内容的网站更容易找到。这是因为我们发现很难做出决定时，有太多的选择。这是基于希克定律的心理原理：选择的负担。
图片：Apple
最好的UX设计人员了解这一点，并确保用户可以找到所需的信息，产品或服务而不会感到不知所措。
抢眼设计
图片：例如葡萄酒
如果网站或应用程序的设计精美（根据用户的描述），则立即导致对品牌的有利倾向。这是一种心理原理，称为审美可用性效应。如果您的网站漂亮，那么普通用户就会相信它比同一个利基网站的其他功能更实用，更值得信赖。关于吸引力的这种偏见也可以在离线状态下看到，因为研究表明，更具吸引力的人被认为比其他人更有能力和更友好。
此外，引人注目的设计可能使人们忽略网站或应用程序上的其他缺点。顶尖的UX设计人员花费必要的时间来获得任何项目的最佳美学效果也就不足为奇了。
醒目的颜色口音
图片：Paypal
诸如Trustly，PayPal，FreshBooks之类的品牌，以及您日常遇到的许多其他品牌都使用颜色强调点，以使您的眼睛指向CTA按钮，注册表格等。网站上的主要颜色为蓝色时，它们使用绿色，红色或黄色来表示突出这些区域，它会起作用！这些网站的任何访问者都可能会错过页面上的其他内容，但会看到这些部分以独特的口音仔细突出显示。
这是基于赫德维格·冯·雷斯托夫（Hedwig von Restorff）的心理对比原理，即人类更容易记住那些与其周围环境脱颖而出的东西。有趣的是，没有颜色被认为是最有影响力的。UX设计人员只需确定主导的颜色主题，并使用不会混入背景的另一种颜色作为重点选择。
产品差异化价格计划
这也称为“金发姑娘”定价技术。企业使用这种技术来销售“中档”产品。当您四处寻找虚拟主机计划时，您可能会看到更多。提供商通常列出三到五个订阅计划，并将中间计划突出显示为“受欢迎”或“热门”。
图片：Acowebs
许多人立即分析出最昂贵的计划和最便宜的计划，最终选择了所谓的中端计划。这是因为他们将其视为最高价值计划和入门级计划之间的完美中间地带。有趣的是，这些中端计划的价格没有像其他任何人一样受到严格审查，这使得它们成为提供这些品牌的品牌中最赚钱的。
这种定价技术之所以有效，是因为它基于取景的心理原理，该原理强调了人们在做出购买等决策时如何避免极端情况。它还显示了选择的呈现方式如何影响决策过程。
其他领域的更多用户体验设计师正在采用这一原理。现在，各种电子商务商店都提供多层定价结构或提供价格不同的相似产品。大型科技品牌也不例外。他们可能是这一原则的最大受益者之一。因此，下一次您发现自己忽略了中端选项规格，规格稍高但仍低于最贵机型的三星Galaxy设备时，您就知道了！
这是另一个例子。
图片：SEObirth
限时优惠
电子商务网站已经完善了使用限时报价创造产品需求的技巧。一些品牌会声明要约/产品“仅在接下来的X天内可用”，而其他品牌如亚马逊将显示详细信息，例如“仅剩5个库存”。无论哪种样式，两种策略都旨在引起您的相同反应：紧迫感，因为该产品很快将不再可用。
图片：亚马逊
这是基于稀缺性的心理学原理，该原理指出，与到处都有的物品相比，我们倾向于更加重视稀缺或不可用的物品。一个1975年的研究证实了这一原则。研究人员将相同类型的曲奇放在两个罐子中，但是第一个罐子有10个曲奇，而第二个罐子只有两个曲奇。研究参与者对第二个罐子的评价高于第一个罐子。
研究还发现，人们对以前丰富但现在稀缺的产品的评价要比总是稀缺的产品更有价值。经济学专业的学生不会对此感到惊讶，因为可用性的下降总是会触发需求的增长。
除电子商务网站外，其他具有在线形象的品牌也采用稀缺性原则。出售在线课程的企业家强调诸如“仅适用于前10名学生”，“一周内结束”之类的术语。其他人则为采取特定行动的人们提供独家利益，例如提交电子邮件地址，支付服务费用等。 。
当品牌试图销售“限量版”产品时，该原则也可以在离线营销中看到。
UX设计师之所以采用这种技术，是因为他们知道，即使产品或服务没有迫切需求，人们在产品或服务稀缺的情况下也会注意。
推荐书的战略定位
图片：ElegantReports
有没有想过为什么许多产品或服务网站的主页上都有推荐？为什么在做出购买决定之前总是要寻找推荐？这是因为社会证明的心理学原理。
当我们对任何事情都持怀疑态度时，我们会寻求同行的指导。这就是为什么您会发现人们在选择公司之前先在社交媒体上要求评论特定品牌的原因。在1969年社会科学实验强调了这一先天行为。研究表明，如果已经有足够的人参与，人们至少可以说服人们注意某些事情。
除了推荐之外，UX设计师还通过炫耀可信赖的从属关系（例如SEO专家从事的业务或以作家为特色的博客）来结合社会证明原则，订户数量，帖子中的股份数量以及产品的等级或服务，甚至获得的奖励数量。
图片：Acodez
电子商务商店通过显示名为“客户也已购买的商品”的部分来使它更进一步，以突出显示可能会使用户感兴趣的流行产品。
突出赠品
图片：皮特和佩德罗
如果您免费提供某些商品，在线用户现在或将来更有可能从您的品牌购买商品。这是基于互惠的心理原理。这就是为什么许多UX设计师强调任何交易的原因。
如果您要购买新鞋，则更有可能选择在其网站上提供“免费送货”的品牌。同样，您也可以在提供免费指南或免费咨询的登录页面上提交联系方式。
UX设计师结合对比和互惠的心理原理来创建高度转换的页面。
结论
达到既定目标的引人注目的UX设计并非偶然。最好的设计师知道，在线成功的关键是要吸引一般用户群的基本本质，他们会运用心理原理来实现这一目标。人类的在线行为是可以预测的。结合心理学和用户体验设计，您的品牌可以产生更好的结果。
文章来源：UI中国 作者：Shawn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
全新的2021已经到来，在这个适合展望未来的时候，淘宝也迎来了品牌形象的升级，一个万象更新的淘宝正在向我们走来。
全新的2021已经到来，在这个适合展望未来的时候，淘宝也迎来了品牌形象的升级，一个万象更新的淘宝正在向我们走来。
“淘宝直播很有趣味”，“淘宝人生很新潮”，“淘宝更好逛了”越来越多的用户在感受淘宝的新变化。新淘宝，让用户在“淘好物”过程中更能感受到“逛”的乐趣，从产品、直播等多场景多维度带给用户全新体验。作为淘宝的镜子，我们的品牌也伴随着产品的升级，在设计层面表达了全新内核。
在新淘宝的大背景下，设计的挑战在于如何将抽象的心智具象表达。此次品牌设计将围绕“连接”“开放”“有趣”三大设计理念透过字体传达淘宝的品牌新内核。
连笔&连接
在新的字体中将有粘连但又不够流畅的笔画结构，让它们“一气呵成”起来，通过连笔来表达“连接”，它寓意了新淘宝要更好地连接商业、用户和内容。
空隙&开放
“通透”是新的字体比较直观的感觉，让字体本身结构上有“呼吸”的空间，它代表了新淘宝对外能够提供充足的空间，同时也将生态体系打开，从而吸收更多的资源共赢共创。
弧度&有趣
新的字体在弯折笔画的连接处做了弧度处理，让整个字体看起来更加有活力，它要展现的是新淘宝将产出更加丰富多样的内容，让消费者能体验到更多趣味且好逛。
很荣幸本次升级邀请到了国内著名的字体设计厂商方正字库与知名品牌设计公司MetaDesign一起联合完成我们的LOGO设计，整个过程中都提供了非常专业的指导。
全新“淘宝”品牌标识，充分融合了中华传统书法文化和现代的设计语言、设计手法，呈现出多元、丰富、有趣的品牌面貌。
全新升级的“淘宝”特别注入了自然书写的笔势，将写意融入设计之中。在设计上借鉴了行书的技法，在字体的笔势相承之处运用连笔书写，线条流畅自如，笔画之间气息贯注、流动和谐。
连笔
字体部件的设计突出了笔画的血脉与气势，字体起笔处注入能量，转折时意气相聚，呈现出蓄势待发的姿态，末尾的钩画收笔果断，整体给人一种势如破竹、一气呵成的视觉感受。
蓄势
“淘宝”横画起笔处采取直切手法，如逆锋蓄势，运笔时线条微弧上扬，收笔处笔画轻提，笔势流丽、焕发风采。
横画上扬
新“淘宝”的设计细节精微生动，通过适当的减细、避让，字体笔画结构紧密得当，布白停匀、筋骨相谐，穿插避让恰到好处。
避让
两个单字点画的笔形浑圆一致、遥相呼应，形成左右顾盼的姿态，文字之间脉络贯通，构成一个有机的整体。
呼应
中英文字标互相呼应；英文字标需要足够简约才能满足LOGO以中文为主，英文为辅的传播需求。
优化LOGO的笔划及布白，提高LOGO在数字端上小尺寸下的可识别度。
当淘宝的中文字标设计逐渐成型，我们希望英文字标能承载相同的设计理念。
‘T’的横画呼应中文的横划特征:微弧上扬，以流畅的圆角收笔。
‘a’维持双层结构,更能与相邻的‘o’更能区分，保持高的视别度;顶部的拱形弧线与淘字的‘勹’部笔势互相呼应。
开放’o’字的内白，平衡笔划粗细的变化；确保外轮廓的弧线图滑流畅，使造形更丰富生动。
升级后的英文字标彰显中文字标的设计精髓，与时并进。
新淘宝，新品牌，新形象。为了能够让用户对于品牌有更具体的认知，此次品牌升级还创造了淘宝自己的超级符号，结合业务丰富的场景，让视觉语言更具专属性和多样性，让用户更好的感知到，一个更连接用户、更开放平台、更充满趣味的新淘宝正在走来。
文章来源：UI中国 作者：AlibabaDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在我开始所有话题之前，我有问题想问大家，大家工作快乐吗？
我听到了特别积极的反应，说非常的快乐。希望大家说快乐，不是因为今天是周五。
但是呢，其实，工作并没有我们想象中那么快乐，是所有的活动当中快乐指数的，跟躺着带来的快乐差不多的，有些人躺着什么也不干，也比工作快乐。
什么原因导致了工作的不快乐？
第一类，关乎目标。大部分人认为工作是为老板服务，所以很难受。另一类，是因为反馈，很多工作的结果依靠于外界，依靠于老板，所以你跟直属上司的关系，决定了工作的体验。第三类，是我们认为挑战和技能的不匹配，导致了我们工作的不快乐。当挑战大于技能的时候，你就会焦虑，当技能大于挑战的时候，你就会觉得无聊，你的工作就会在焦虑和无聊之间来回地徘徊，这是我们理解的世界。
这个问题，在数字世界中会变得更加的明显。70 年前，第一台计算机出来之后能解决的问题非常的简单，但是 70 几年过去了，数字世界得到了非常大的发展，我身边任何一个小设备都远远大于 70 年的。而现在的我们和 70 年前的前辈们没有本质的区别，我们有 7+2 的记忆法则，最多只能记住 9 个数字，这就导致了在数字世界当中，我们所面临的挑战远远大于人类所掌握的技能。
数字世界往往给我们带来了挑战大于技能，所以你的体验是负能的。如果你的工作更加有趣，挑战能够匹配技能的时候，工作就会变得很好玩。工作就像打游戏一样，你通过了一关，技能得到了提升，工作就会变得持续好玩，所以我们在无聊和焦虑中间寻找平衡，这个平衡就是快乐的通道。
说起工作，大家多多少少会有快乐的体验，但是和躺在沙滩上睡觉的体验完全不一样。某一个下午或者晚上，需要处理一件稍微有难度的事情时，你需要集中所有的注意力，专注于你和你的事情，一抬头两个小时过去了，这是一种极度饱满、极度被满足之后的快乐，它是一种成长的快乐，也是一种挑战和技能匹配的快乐，也是全情投入的快乐，所以我们所说的快乐工作指的是全情投入的工作。
基于这样的思考，我们将每个人都追求快乐工作，作为Ant Design 的基本假定。
第一个原因是，我们认为人或多或少都有这样的快乐体验；第二个很重要的原因在于，对于大多数人而言，我们醒着的绝大部分时间都要工作，如果你无法在工作中体验到快乐，人生将会在焦虑和无聊中度过。
基于这样的思考，我们找到了 Ant Design 的基本假定。就像光速不变基于相对论一样，我们想基于这样的假定，表达 Ant Design 的体系。
这就是 Ant Design 的基本假定，每个人都追求快乐工作，Ant Design 中每个人是谁？我们分成两种不同类型的用户：第一类是用户，第二类叫做设计者。所谓的设计者是创造这些应用性能的人，也就是在座的大多数。
我们将快乐拆成两部分，一部分是快感，一部分是乐趣，基于此，我们衍生出了 Ant Design 四个价值观，设计首先是自然的，其次是确定的，第三，设计是要有意义的，第四，设计是能让用户和产品不断成长的，它是具有生长性的。
所以接下来的分享当中，因为时间的关系，我会重点分享其中的两块。
第一块叫做确定性。分享一个小案例，我刚入行的时候，就碰到了社会的毒打，我想找到我的合作伙伴进行验收发布的环节，因为设计师对细节有非常强的管控情系，我用略微虔诚的态度说：“亲，能稍微调整一下列宽吗？”，他可能没理解我的意思，说“我觉得挺好”，我说“都换行了，哪里好？”，我以为会引起他的注意，结果他回了我一句：“这不重要，你行你上。”
我一开始并不明白，为什么这个世界是这样的？我认为我们都应该有同样的认知，直到有一天我看到他的竞争升级 PPT 的时候，我就明白了，原来他不是针对我，他不换行不仅在产品上，PPT 里也不换行。不同的人有不同的想法，不同的工种也有不同的想法，而我们的工作是需要这样一群人一起合作，就会导致一个问题，当不同的人有不同的、不确定性的想法，会导致研发过程的不确定性。
我们总说，一个人可以走得很快，一群人才能走得很远。我们要想办法怎么让这群人可以步调一致地走得快，又走得远，我们把这套体系、方法论叫做 ETCG 2.0。
这是原有 ETCG 的基础上，进行升级的过程。我们希望面对同样的问题，各个角色都能推理出同样的方案。就像你在春天种下一颗苹果树的种子，你一定在秋天可以得到一颗苹果树，而不是一颗梨树。
ETCG 2.0几个字母分别代表不同的意义，第一个是功能范例，第二个是模板，模板是我们基于业务的抽象，目的是帮助新手或者帮助不同设计师保持设计的一致性，指引页面如何设计，比如这是典型的列表页，由高级搜索和表格组成。今年在模板的基础之上又做了一层更大的精进，我们做了抽象和规范衍生出了模板组件。一行模板组件，当无法满足你的需求时，只要一行代码，就可以得到一个完整的序列。
除了列表页，还有表格页，还有图表、表单，以及布局，构成了我们对系统的抽象，叫做「四表一局」，它大概覆盖了中后台系统、或者企业级产品 80% 以上的业务诉求，同时本着非常开源、开放和普惠的心理，整个「四表一局」正式对外开放，大家可以访问 Ant Design 的仓库下载和使用。
ETCG 中的 C 是组件，是 Ant Design 最早和大家见面的内容，五年的时间里面，我们有了很多数量上和质量上的精进，同时创造了非常多的社会价值。这五年前，非常令我们自豪的是，有接近 1000 名贡献者参与到 Ant Design 的建设中，同时 TOP 50 当中，60% 来源于社区，他们为 2 万家企业提升了 3-5 倍的研发效能，同时我们正式于去年年底成为全球开源第一的组件库。五年前，蚂蚁集团发起了 Ant Design 这个项目，但是它今天所取得的成就是来源于社区和我们的共同努力，这里的荣誉和掌声应该献给所有为Ant Design 贡献过代码的同学，谢谢你们的支持。
ETCG 的 G 有两个。第一个 G，是对组件样式的抽象，我们用了变量化的方式进行了约束和管控，它可以做什么？特别简单，你的老板今天不喜欢蓝色，想要橙色，你只要一行编码，就让组件库发生了焕然一新的变化。
ETCG 的第二个 G，是我们今年重点建设的部分，也是全新的一部分，叫做 Guides，指的是人和机如何进行互动交互的过程。
比如说这里是应该放一个数值输入框，还是放一个输入框？以及如何进行放置？我们将琐碎的交互规则进行抽象和封装，让机器学习这些规则，让机器帮助我们进行这些规则。你只要导入原数据，几乎不用做任何的配置和更改，可以得到可进入生产环境、可研发的表单页面，设计得可能比初级的设计师产生的效果更好，你想要的一切都应该放在合适的地方。
这就是我们对 Ant Design 确定性的理解，不需要设计师参与的设计产品，提升了设计和研发的体验，当然商业化还需要很长的时间。当下如何解决现在碰到的问题？仰望星空，也要脚踏实地。作为设计师，我在想怎么解决五年前的问题，我很想说我行我上。
我们怎么使用？使用 Kitchen 进行编辑化的能力，把 13% 甩给我的合作伙伴。如果你觉得还不够，想做更多的管理和管控，甚至可以用「四表一局」的能力进行服务的搭建，搭建可进入生产环境的服务产品，让设计师变成设计工程师的角色。
在今天分享的最后一趴，我和大家聊聊这个场次经常听到的词，那就是“自然”，学术界和产业界对自然有非常多的理解。我们把它定义成了形容词，我们认为这个行为很自然，大家经常在各个场合听到的一句话，设计是关乎如何运作的问题，Ant Design 在这个基础上，要聊的是 how it worksnaturally。
同样分享一个小案例，在我们有一天的用户群里，我们的用户反馈了一个非常有意思的问题。他说语雀可以插入图片吗？语雀的负责人当时在现场，就回到：“当然可以，最基本的能力”。我们的用户问出第二个特别具有代表性的问题：“可是我们找不到在哪里”。语雀是阿里内外都很喜欢的一款文档类文件。编辑页的第一页，我们的工程师特意做成了绿色的，你点进第一个的第一行就是图片上传的功能。但是大家有没有想过？我们仅仅隐藏了一级，就让用户记不起来有这个功能，我们仅仅隐藏了一级，就让用户找不到这个功能。这不是语雀产品特有的特征和问题，而是这个时代大部分问题具有的特征和问题，因为大部分的产品处于 1973 年的基础上。
WIMP 是什么？Window、lcon、Menu、PointDevice，当我们的功能只有 20 几个的时候，这是非常好的设计，总比代码行好太多，今天我们说了数字世界当中，我们的设备、计算机、网络成千上亿倍的发展，用户怎么记得住 8000 个功能？用户怎么定位到 8000 个功能在哪里？所以 WIMP 界面碰到了人机交互的瓶颈阶段。
为什么碰到瓶颈会越来越不自然？第一个角度从人机互动的环节，当用户记不住的时候，就没办法从哪个入口出发。所以 WIMP 界面第一个不自然的原因在于，所有动作的发起都依托于用户。用户一旦记不住，一旦找不到，人机交互就没办法走通，这是 WIMP 界面的第一个问题。
第二个问题，要回到人身上。人的行为分为有意识、无意识的两层，能量消耗比较大的就是有意识层面。WIMP 在于所有的行为依托于用户有意识地触发，这本身就是一个非常消耗脑力的一件事情。在我们面对这么多功能的环境下，这两个问题导致了我们在数字世界当中碰到的巨大问题。因为我们知道系统的功能每天在增加，数字世界不需要遵循物理制造的极限，它可以进入无限备功能的叠加，所以在这个世界当中碰到的挑战远远大于我们所掌握的技能，所以 WIMP 界面碰到了诞生以来最大的问题。
我们如何解决这个问题呢？首先一定要清晰地认识到，人是有意识和无意识两种思维的结构和意识形态的。同时系统也可以分为两部分，一部分是主动功能，第二部分是被动功能，我们要尝试的守正出奇。守正延续了 WIMP 界面常规的功能，让人有意识寻找功能，触发系统的能力。但是出奇要多做一步，除了让用户找功能之外，我们要增加很多的主动式的交互，让功能找到用户。
接下来分享几个案例，在我们的常规设备当中，都已经有这样一些主动式的服务来寻找到你。
第一类是相逢不相识，名字很好听，解释也特别好玩。在语雀当中有一个小功能是我特别喜欢的功能，当我编辑一篇文档，编辑了大于 30%、50% 的文本量，这个钩会自然地帮我钩上，因为它有一个基础的设定：如果这篇文章发生了比较大规模的修改，你的订阅者很自然的想知道你这篇文章做了什么。
第二个相逢不相识的地方，大家可以聚焦一下支付宝。有兴趣可以打开支付宝首页，在你的收款码应用里，解决什么样的问题？解决面对面交易的问题，所以当你输入一个金额完成以后，自然旋转屏幕的时候，这个屏幕会进行自然的翻转，这样对面扫你钱的人，可以看到信息的正面，这非常自然。
第二个主动式交互的类型，叫做可用不可见。和相逢不相识的区别在哪里？就是默默地为你提供了服务，但你可能永远不会知道它的存在。在苹果第一代出来的时候，做了一个非常牛逼的设计，因为大家都知道虚拟键盘，没有物理触感，所以误触率很高。虚拟键盘怎么解决？苹果基于非常有趣的思考，在苹果的全键盘里面，只要输入了 Desig 的时候，通过语义词的分析，N 点击的范围远远大于旁边的 B 或者 M，以及上面的 G 部分，这是帮助你做主动选择的服务，只是我们从来不知道有这样一件事情。所以我们将这些自然的人机互动方式进行整理，包括融入到更多的案例以后，发现人机主动式交互有九种不同类型的分类，除了输入法，更多是通过用户使用情景的上下文进行优化的过程。
我们有了这张人机自然的交互，怎么解决语雀的问题？我和在座的语雀设计师有过这样的讨论，用户说图片上传找不到，我们大部分人的第一反映是把图片上传显示单独放出来。这可能会解决刚才的问题，但是如果明天财务说表格找不到了，我是不是还要把表格拿出来？有人说附件找不到了，还要把附件拿出来吗？我们需要从主动式交互的角度畅想怎么优化人机互动的过程。
回到这张自然交互的工具，提供了一种简易的思维框架。
我们去判断哪些是可以去做的，第一件事特别简单，我们判断用户使用的上下文是什么，我们发现很多产品的通用习惯，直接把图片拖进去，做成小的服务，用户根本不需要知道功能的存在就可以使用。
第二个从原数据角度来理解，图片是一种特殊结构的数据，它是 jpg、png。用户在外部复制了之后，进入编辑页可以主动推送他一个服务，询问他是否要粘贴，本质上并不复杂，但是它确实在 WIMP 界面传统意义的基础上，又提供了初级的部分，又额外做了一部分。
我们所定义的自然里面，是需要我们做更多的主动式的服务，让我们这个海量的功能能够在合适的场景下，去找到用户，从而节约人的脑力和体力。因为对于人来说，我们和 70 年前的爷爷辈们没有本质的区别，我们需要被善待。有感兴趣的同学可以看支付宝的访问码，也期待和大家做更多的互动。
分享的最后一趴，我简单总结一下今天做了哪些事情和分享了哪些内容。第一趴，我们提出了 Ant Design 的基本假定，我们认为每个人都缺少快乐工作，这种快乐工作是和我们平时闲散完全不同的问题。同时大多数人都不可避免的来工作，我们怎么扭转工作对我们的体验，这是人生中非常大的问题。第二趴，我们衍生出新的价值观，这四个价值观中，因为时间篇幅的原因，重点和大家讲了确定性和自然的价值观，这是历史最悠久，也是最有代表性的两块。基于这两个价值观，我们衍生出了不同的组建库也好、可视化资产也好，相关的设计资产以及设计策略，以及配套的设计工具，当然蓝色部分是我们今天介绍的重点。最后这张图特别适合拍照，这是我们系统提供给大家的主动式服务。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
完美，不是因为没有什么可以增加，而是没有什么可以减少。
创建美观、可用和的UI界面需要花费时间进行设计细节的打磨，本文从视觉和情感化设计两个方面来说说如何提升UI设计的高级感。
1、视觉元素
在互联网产品日趋成熟的今天，你会发现所有的App越来越像，似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重，使得设计不精致，产品没有气质和品牌感。一个App设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节，一起来学习。
1.1 使用颜色深浅构建层次结构
在对UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重，这有助于在内容中建立层次结构。通过使用颜色的深浅，为元素赋予不同的重要性。如果可以的话，你甚至可以采用两到三种颜色：
类似的，在UI设计的时候，通常两种不同的字重足以营造出优秀的层次感：
▲主标题字重为600，其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400，因为这一部分字体本身尺寸已经较小，低于400会使得可读性不佳。如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理
不要在有色背景上使用灰色的文本，在白色背景下，将黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不错的淡化其视觉效果的做法。
但是在彩色背景下，想要降低和背景色之间的对比，通常有两种方法：
一是降低白色文本的不透明度；二是让文本逐步接近背景色，而不是改为灰色。
▲左图设计师职位信息为白色文字降低不透明度，右图为和背景同色相高明度的颜色
其次当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃。通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。
1.2 统一色调
选择一种基础色，再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。
1.3 干净的阴影
阴影是UI设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净，增加了画面的精致。如果阴影的范围太小或颜色太深，位置也没有偏移，而是聚集在元素的四周，就会让画面更加扁平，让视觉变得厚重，呈现出不精致的画面感。
还有一种扩算阴影是模拟元素本身的颜色投射在背景上，由于阴影与元素的色调一致，因此呈现出十分融洽的画面感。在UI设计中，这种手法不宜过多使用，否则呈现出的各种色彩搭配会让人眼花缭乱。
1.4 个性的图标设计
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个App的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。通常，大多数App都是使用iOS规范的设计样式（默认灰色，选中填充品牌色），这样的设计太普通，太常见了。要想让标签栏图标设计精致和富有个性，可以丰富每一个选中态图标的视觉表现，例如给图标加上背景和表情，即显得生动有趣，又增加了用户的好感，给人留下深刻的印象。
3D立体图标设计是近几年来的流行趋势，看上去十分精致、华丽，但是看久了会让人产生轻微的视觉疲劳，同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。
1.5 Tab的设计感
Tab是App设计中最常见的控件之一，它源自Material Design的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计，而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上，Tab和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态。因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的Tabs就被创造出来了。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条，这样就建立起视觉上的联系，让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上，既让界面视觉，又进一步强化了用户对品牌形象的认知。
1.6 无框设计 去繁从简
在UI设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法，使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：
使用阴影
阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力。
使用不同的背景色来区分
通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除分割线，因为你根本不需要它。
增加额外的留白
创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。
1.7 统一设计元素
在App中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观。这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。
1.8 符合产品气质的字体
选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。虽然默认字体可以满足大多数App 的设计需求。但会出现一个问题就是，系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。
1.9 第三方图标风格统一
大多数App都支持三方登陆，他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计。一个设计精致的App不应漏过任何的细节，我们可以以自家App的图标风格为依据，对第三方图标进行优化设计。
1.10 图片中寻找色彩
App中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式，为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。
1.11 提高图片质量
图片的质量影响着整个App的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用。即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
1.12 卡片式设计
现在的UI界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率。同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。
2、情感化设计
心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时，使他产生情感的变化，那么产品便不再冷冰冰，他透过眼前的东西，看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心琢磨，人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈，有时候仅仅一句文案、一幅插图、一个动画就能打动人心，使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面，这些简单而美好的设计细节充满了积极情绪，它是满足产品的功能性和易用性之后，追求更高层次的目标。
2.1 提示性文字
语言是情感化设计最直接的利器，拟人化的对白相比冰冷的话语更能获得用户的好感，赋予产品的新的生命力。例如App那些push推送通知，因为用户每天收到的PUSH实在是太多了，早已心如止水！这个时候，你就需要一条成本低、效率高的PUSH文案，去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣，让人看到会心一笑。
2.2 下拉刷新
下拉刷新是用户在App使用中经常进行的操作，常见的下拉刷新设计是图标加文字的形式，这种设计简单、直观，但毫无设计感，不能引发用户任何的情绪。
下拉刷新是一种临时状态，丰富它的设计细节不会造成与产品界面的格格不入，相反，一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿，暗示正在快马加鞭的加载新内容，小鹿形象延续了品牌logo。作为资讯类产品，内容更新速度至关重要，奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感，瞬间就让下拉刷新变得生动有趣。
2.3 头像设计
个人中心页与用户信息密切相关，用户的虚拟形象在这里得以展现，常见的设计是一个用户头像加登陆文字的形式，这种默认的头像设计无法得到用户的认同感。
现在很多的产品已经放弃了死板的默认头像，给用户更多的选择。赋予产品一些人格魅力，可以让产品富有生命力，消除人机界面的冰冷交互，帮助用户和产品建立友好的联系。例如美团外卖和躺平，它们各自的身份都代表了产品的气质和用户的属性，让用户产生一种身份的认同感。
2.4 缺省页化解负面情绪
通常状态是，当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式，这种简陋的设计会给用户心理造成很大的落差，陷入负面情绪中。情感化设计在此时就可发挥巨大的作用，它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大，根据产品属性和品牌延展图形，结合动效或插画等情感化设计，可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景，让用户会心一笑，使产品充满了趣味性。
2.5 标签栏微动效
情感化设计变得越来越丰富，图标设计上升至可以展示动画效果。通过动效的使用，标签栏切换变得不再死板。用户在频繁切换页面时，不再觉得单调。精心设计的动态效果，能够缓解用户等待时焦躁的心情，从心理上缩短用户等待时长，让品牌更加深入人心。
2.6 模拟用户行为
如果一个产品可以模拟用户的行为，将用户代入真实的情境中，用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化，播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。
情感化设计可以拉近用户与产品之间的距离，在更深的层面体现出对人性的关怀，为人们带去情感上的愉悦和感动。洞悉用户的行为，换位思考去满足用户的需求，情感交流就产生了。例如当你截屏了一张图片，打开微信对话框时就会自动显示这张图片，提前预知了你发截图的需求。
再例如很多观众都习惯了在电影结尾等彩蛋的习惯，因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时，你会发现影片详情页会有彩蛋提醒，告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息，就不必再为了不确定的彩蛋期待浪费时间啦。
2.7 有趣的细节设计
俗话说：有趣的灵魂万里挑一，可见有趣是可以引发交流进而让人们产生积极的情绪。 在UI设计中，有些有趣的设计是隐形的，需要用户自己去发现，当用户找到这颗彩蛋时，就会获得一份喜悦和乐趣，增强用户对产品的探知欲。例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右，你会打开鬼畜区的新世界(⊙o⊙)（友情提示：记得戴上耳机或调小音量）其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母，发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕！
有些有趣的设计又是显性的，目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员，不仅可以尊享丰富的影视资源，还能让自己的ID在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕，让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性，一方面也丰富了弹幕区的多样化，可谓一举两得了。
文章来源：UI中国 作者：漂浮柠檬核Fyin印迹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
