在今天的 UI 设计领域，由扁平化设计风格占据主导地位，已经是无可辩驳的事实了。扁平化应用除了提升用户获取信息的效率外，对设计师而言就是设计的难度大大降低了。
一个界面的 UI 视觉元素，仅仅只需要图片素材、矢量图标、几何、文字，UI 设计师的工作仅仅是对内容进行组织和排版，涉及到绘制原创的也仅仅只有少量的图标（大多数人还画不好）。
这种状态持续了很多年，看起来岁月一片静好。
但是，这两年市场发出了一些不同的声音，那就是打破纯扁平风格的 UI 风格、元素开始越来越盛行了。
比如新拟态风格在年初炒了一波热度，各大平台和公众号都铺天盖地的发文和介绍，介绍它的设计理念和设计方法。
还有就是以饿了么、美团为首的国民级应用在主页显眼的位置里使用极具识别性的拟物图标，引起设计圈的热议。
首先讲讲新拟态设计，之所以之前只字不提，是因为我对这个风格实在没什么好感，有种对纯拟物借尸还魂的味道，且它的样式对于信息密度高的应用是完全不适用的，只能活在飞机稿里。
而国内大型应用开始在实际项目中上线拟物图标，意义就不一样了，证明这样的设计是经过几个大厂团队认可，且有共识的。
当然，这并不因为大厂用了就无脑推崇。而是纯扁平的设计已经越来越难满足部分需要强视觉效果的页面设计了。
今天的互联网和过去不一样，用户的增长留存不再是过去一样通过裂变和口碑完成，一个产品只要认真打磨体验、功能就能获得用户的青睐和驻留。用户的精力时间是固定的，而互联网产品又层出不穷，佛系的等待用户临幸是没有出路，这种现状也被称为互联网的下半场。
佛系不行，当舔狗更不行（成本太高），所以今天大型产品都在对待用户的态度都选择更具更具侵略性的霸道总裁人设。不仅是用色饱和度越来越高，运营活动越来越密集，广告和强提示也越来越多。比如刚打开了三个应用，进入的首页大家自己意会……
有点扯远了，回到话题上。在这种掠夺用户注意力的思路指引下，再做所谓的性冷淡、大留白、极简风就不会合适。当对扁平的视觉效果已经开发到极限以后，那么进一步在一些细节处应用拟物就成为必然的选择。
而拟物的应用并不可能铺设到整个应用中去，因为完全拟物化的设计降低信息浏览效率是必然的，所以它只适合做局部的视觉强化，来加强用户对特定区域的感知。
最常见的需要被凸出的要素，就是首页中应用的快速入口图标、分类图标和底部导航栏图标了。这些区域长期受运营活动支配，相信大家已经很习惯了。
只是，这些图标开始在脱离运营活动的状态下，也开始使用非扁平模式，那就不再是运营设计师的工作职责，而是 UI 设计师们绕不过去的槛了（知识盲区）！
且除了 APP 外，其它领域对于拟物设计的需求也会开始逐渐提升，尤其是目前越来越复（fu）杂（kua）的大屏数据展示、车载界面、定制系统等等。
作为新世代的 UI 设计师，多数人对拟物的设计可以说是完全空白的状态，所以是时候要重拾拟物设计这个传统艺能了。
前面我有提到，拟物主要应用在关键的图标上，但应用的拟物风格并不是过去我们追求的那种极其真实、复杂的拟物，而是经过一定简化、抽象后的拟物 —— 轻拟物。我们要先来明确一下轻拟物到底是什么。
首先我们看看，过去优秀的拟物图标和设计案例，它不仅表现元素本身的光影、透视、构造，甚至会非常完整的表现物体表面的材质和肌理。
这种图标单看起来确实很好看、细致。但是，把它丢进我们当前的页面中是非常违和的，因为它们细节实在太多了，而且画起来非常耗时间，不利于项目整体的推进。
所以为了符合画面的质感，又要考虑项目效率，轻拟物这个概念开始被提出和应用，作为一个折中的解决方案。
它和纯拟物设计的共同点在于，也表现光影、结构、透视，但它尽可能精简了轮廓的复杂度、肌理和层级，呈现出更概念化、理想化、易于辨识的拟物图形。
所以，我们主要去学习的内容是轻拟物的设计方法，而不是徒手画照片（这个可以缓缓）！
而轻拟物虽然 「轻」，但它依旧也还具备拟物的基本特征，是有实体质感的。但是扁平从插画到图标设计经过多年的改版，有各种叹（hua）为（li）观（hu）止（shao）的设计，应用大量的渐变、投影、模糊的效果，比如下图案例。
这在我们之前图标的系列干货中有提过，这类设计是面性图标的进阶版，它们依旧属于扁平风格的范畴之内，不能和轻拟物划上等号。
所以，先掌握这些概念，到下一篇中，我们就会展开具体的技法讲解和演示了。
对于这几年才开始学习 UI 设计的新手来讲，拟物已经变成一个很陌生的事物，这对行业来说是比较悲哀的一件事。
因为拟物的设计不仅仅是画图标而已，对它的学习可以全方位的提升设计师的基础素养，不仅包括对传统美术（结构、光影、色彩、透视）知识点的剖析，还包含对 PS 使用的深入探索。
可以说，自从拟物不成为必修题材以后，九成以上的UI设计师是不会用 PS 的，这极大的限制了他们自身的可能性和作品的多样性。
站内攻略作为每年大促玩法的预告者，承担了向用户输出平台节奏、吸引用户预约回流的重要任务。 不同于着眼于转化的卖货会场，或是着眼于分享的互动H5，如何能让用户更好地了解京东的大促平台玩法，便捷用户的购物旅程，就成为了它的主要任务。
在开始设计之前，我们对比了2017年至今的所有攻略页面，发现往年页面存在缺乏延续性、定位不清晰的问题。作为大促信息传达的先行军，往期的攻略反而更多承担了转化型的会场类任务，对于优惠信息的预告往往是轻描淡写地用文案带过。而每一次的攻略样式都是「船新版本」，也产生了较大的人力消耗。
然而尽管攻略的任务是信息传递，但作为整体大促链路中的一环，它终究还是需要为大盘GMV服务。那么应该如何平衡二者，以达成更好的数据效果呢？
首先，从攻略存在的核心意义——助力集团大盘GMV的提升出发，它需要达成以下几个目标：
然而纵观大促会场全局，许多卖货会场也可以达成这些目标，那么站内攻略和它们相比有具有哪些差异性呢？我们可以从对内和对外两个角度进行分析：
对内差异化：从站内来看，「我的」和「AI助手」也都承担了向用户进行活动会场推荐的功能，但「我的」是围绕用户已有的操作展开管理和推荐，是绝对精准的量身打造，「AI助手」是理性层级下的导购，需要用户先产生「想法」，再指导操作；站内攻略则是引导用户未来行为的指导和说明，先组织、筛选促销信息，再使用户产生「想法」，从而产生操作，有一定「逛」的性质。
对外差异化：从站外来看，站内攻略的定位与「什么值得买」有些近似。相比之下，站内攻略的优势则在于它能更紧密地围绕京东用户的消费习惯进行定制化推荐，和近年来以长图为主的阿里系攻略相比，则提供了更为丰富的操作（如预约），一定程度上能减少用户的记忆成本。
基于以上基础，我们对往年攻略的用户画像进行分析，并对攻略进行了横向与纵向的对比，总结出了攻略作为一个长线产品视角下的迭代思路，并根据攻略的特性制定了分时期的北极星指标：提升预热、专场期的预约加购率、提升全时期的活动分流以及提升高潮期的商品转化。那么我们又是如何根据这三个指标来拆解细分策略的呢？
交互层面：动效辅助内容聚焦
作为站内优惠信息的聚集地，如何清晰简洁传达内容，一直是交互侧需要重点思考解决的难题。于是在本次攻略中，我们对比了往期攻略中的预告样式，在数据表现较好的日历样式基础上，对页面的层级进行了进一步的简化，配合动效的引导操作，以便用户能够更聚焦地浏览日历部分的核心内容：
视觉层面：视觉层级清晰
经过对交互稿的分析理解，以下3个痛点，对此次页面的信息层级和画面舒适度是一个考验：
那么如何通过视觉的手段，让视觉层级清晰展示且画面颜色和谐呢？下面从最基础的视觉构成里的构图和色彩两方面进行分析并落地：
「构 图」整体用方形进行构图和内容分割
方形是最简洁的几何形态，对于信息量较大的页面，方形会让设计空间利用最大化，并且可以排除形态上的干扰，结构清晰的展示信息内容，让用户通顺的浏览页面。
简化视觉层级
在交互稿上，瓜分京豆模块和日历选择器两部分内容划分较为明显，但所留出的空间，会增加视觉层级的复杂度。为了尽量简化视觉层级，找交互同学商量是否可以在保持内容划分清晰的情况下，把瓜分京豆模块背景和日历选择器拉通，同时，也咨询了前端同学，视觉这样处理在实现上是否会有问题。最终，三方达成一致后，采用了视觉最终呈现的方案。
「颜 色」
为了更好的覆盖618全时期，挑选了色环上三种距离基本相等的色彩进行从暖色到冷色的色相渐变。
前端层面：复杂交互动画与跨平台功能适配
关于选中移动动画
日历选中动画部分我们需要实现的一种跟随移动的效果，那么我们需要考虑的是在当前日期是有可能去到任何一个可点击日期的位置。
实现方式：
用纯css方式控制，方块使用背景图的方式实现，通过控制类名移动位置，比如.move-[start]-[end]，缺点：需要写好每个日期对应到其它日期的位置，不够灵活
用js控制。把日期看成一个棋盘格子，每个格子都占相同的坑位大小。我们把当前日期看作a，移动至日期看作b。假设把a移动至b的横向占格子数设为n，把a移动至b的纵向占格子数设为m。那么n=当前下标 % 行个数，m=当前下标 / 行个数取整。那么a移动到b的x = w * n，y = h * m (w为格子宽度，h为格子高度)。
注：宽度获取使用block.getBoundingClientRect().width；clientWidth会忽略小数位
提升筛选效率
福利秘籍专区作为大促期间福利互动活动的集中地，承担了为互动分流，为用户提供快速查找筛选可参与活动的任务。而互动往往存在较为复杂的规则，对用户而言存在较高的理解成本。此次除了集团主推的互动，又增加了对于事业部互动的展示，对于保证页面展示效率也带来了一定的挑战。通过对往期迭代内容进行数据对比，同时参考其余会场对于多信息展示的策略，最终我们采用了BI展示，同时对用户弱相关的互动卡片进行折叠的方式提升页面的效率；而在卡片的信息展示上，选择重点突出活动可得的利益点，让用户一眼即可筛选出对自己最有价值的互动进行参与。
视觉创新优化
虽然运营同学对双11的秘籍视觉比较认可，但是仍然提出了希望有秘籍形式感的同时，能进行视觉创新的诉求。经思考后，我认为运营的诉求无法满足：
于是带着以上3点找运营同学再次沟通清楚对方的真正诉求到底是什么，经沟通，对方最重要的诉求是希望有视觉创新，秘籍形式感诉求较弱。接下来针对重要诉求集中发力，并结合此次618视觉概念（光点、光线），找到了视觉创新优化的解决方案，并和运营达成了一致。
「构图」
上面提到了方形可以排除形态上的干扰，考虑到活动入口图数量较多，且氛围图不可把控，左侧以方形构成，右侧结合了618主图形——光线，把文字和氛围图分开，让各部分信息更加聚焦。
「颜色」
结合双11用研结论——活动入口主题不够鲜明，除了活动文案类似的因素，我认为颜色也是影响因素之一。所以这次在上部分平台级活动入口，采用了2种暖色的近似色交替构成，下部分事业部活动入口，统一采用了1种和上部分近似色的冷色构成；单个活动入口，文字和氛围图的背景进行统一色相的明暗深浅变化。从整体楼层来看，从上至下，由暖至冷，不仅活动主题有了明显差异化，而且较好的过渡到下一楼层；从单个活动入口来看，左右深浅颜色的划分，不仅对不可把控的氛围图适应性更强，且主题文案更加明显。
「表现形式」
整体页面在按钮的部分采用新拟态风格，在保证吸引力的同时，也减少了颜色过多的问题，减少了信息层级。新拟态风格更适合工具功能类产品，本次只尝试使用在了页面的按钮部分，风格上也会有眼前一亮的感觉。
分时期变化的楼层策略
针对高潮期的转化指标，我们参考了往期的迭代经验，发现随着大促节奏的渐进，临近高潮期时，页面的转化模块表现往往有较大的提升。于是在本次设计中，我们针对这个数据表现，对楼层顺序进行了动态调整，高潮期将转化楼层前置，以更好地匹配不同时期的用户需求。
同时根据往期的楼层数据表现，本次我们也延续保留了数据表现较好的模块类型，例如增加了榜单的露出，以辅助页面目标的达成（以下数据来自于lan.jd.com)。
楼层整体化、内容吸引力包装
基于之前今日楼层视觉整体感较弱的问题，这次楼层背景色和页面背景色有所区分，楼层内模块颜色和楼层背景色同色，较往期此楼层来看更加整体化，又能让页面层级更加清晰。
其中，针对这次品牌入口和上海美影厂IP形象结合的策略，为了提升用户吸引力，且不干扰信息内容的前提下，视觉上采用了和用户共情，且和IP形象契合的元素——老电视机，同时按钮文案也进行场景契合的包装，增加趣味性。
与往期站内攻略对比，本次618站内攻略主要在以下方面有较为明显的提升：
品牌视觉契合及创新
在延续主视觉元素的同时，视觉风格有所创新，在页面的按钮部分采用新拟态风格，减少颜色过多而导致的复杂信息层级问题，同时也保证了视觉吸引力
视觉精致程度
整体页面颜色较有节奏，且更加清透舒适
元素细节（打光、投影等）的刻画更加精致
信息层级清晰度
通过对颜色的合理规划，有主次的文字信息，让单个楼层更整体化，各楼层模块划分清晰
数据表现
根据上线后的表现，本次福利互动模块的点击数据获得了显著的提升，今日模块的点击转化率相比往年也获得了成倍的增长，页面目标基本达成。
1. 好的经验
针对攻略这类规律性存在的活动会场，我们可以针对其主要的功能组成模块进行数据导向的设计与迭代，来更好地指导后续的优化方向；同时也可以辅助业务侧更加清晰地规划会场定位，提升页面对用户以及大促的整体价值。
2. 如何沟通
Q：需求方一味的追求热闹复杂的视觉样式创新，该怎么办？
A：热闹的氛围对于大促活动来说固然非常重要，但也要根据页面类型去判断（重氛围or重信息)。设计师要倾听诉求并搞清诉求的根本原因，并用专业的角度判断诉求的合理性，以及价值大与否。热闹氛围塑造的前提是不能影响信息的识别，否则就会本末倒置，并且热闹氛围的视觉样式要和该场景逻辑匹配 。
3. 待优化项
虽然本次页面大部分模块基于产品化的思路迭代均获得了一定的正向反馈，但产品的发展往往是个曲折上升的过程，活动会场也不例外。结合上线后反馈，站内攻略依然有以下可优化点：
日历操作体验
根据用研结果显示，日历操作体验问题反馈较多，日历模块为滑动改变日期，而非点击跳转日期的操作方式，与用户的认知不符，且首屏动效较复杂，在安卓机型上体验较为卡顿。后续如有同样的交互方式，需优化操作体验。
福利互动入口主题文案
根据用研反馈，主题文案描述不直观，不易理解，导致用户容易滑过整个模块。建议后续活动主题能简单清晰的描述优惠和玩法。
综上，未来站内攻略需要进一步探索主要功能模块对用户的价值，探索其在大促链路中独特的差异性；同时保留高用户价值模块并持续优化，以求达到更好的用户体验，用设计策略为用户与业务带来更多的价值。
文章来源：优设 作者：JellyDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。
专业又贴心医疗App页面设计
医疗行业设计案例
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
接下来的访谈翻译自微软官方博客，微软的 Office 设计部门的两位主管 Jon Friedman 和 Deepak Menon 在访谈中聊了一下 Surface Duo 背后的设计故事：
在过去的几十年当中，数码产品制造商经常会为了适应用户的习惯和需求，来不断创造产品。我们倾向于让事物变的更小、更轻、响应更快、更具包容性。我们将不同感官融入程序，创造而优雅的产品。
随着日常生活节奏和生产力的观念变化，我们经常需要反思一个问题：如何赋予人们在创作和消费、专业和个人之间流畅切换的可能性？
即将发售的 Surface Duo 是一款独特的双屏移动设备，它有着一套专门为它的硬件所定制化的产品体验，而它的设计也折射出我们探索问题的方式。
对于设计师来说，创造这样的独特产品的机会是难得的，就像你在一个住了十几年的房子里面，发现新的房间一样。会打开的是哪扇门？会通向哪个区域？会延伸出哪些创意？
对于 Surface Duo ，我们想知道，它的两块屏幕会延伸出哪些全新的工作流程，它的接缝要如何处理，怎样减轻用户的认知负荷？
受多年来我们在用户研究上的成果所启发，我们通过软硬件结合的方式来进行 Surface Duo 的研发，让它能适合你日常的需求，还可以带来独特的体验，比如在双屏上并排打开文档。
Surface Duo 仍然处于起步阶段，我们知道，它还有很多待解决的问题，这也是为什么微软会引入更多的用户和设计师，来不断地完善它。
为了让大家更好地了解 Surface Duo 的设计历程，我们请来了 Deepak Menon ，他不仅参与了 Surface Duo 的研发和设计，还是 Office 设计团队的负责人，让他来告诉大家，Surface Duo 背后的创意、研究和设计决策。
Jon：谢谢你能来，Deepak，在过去的2个月时间里，我们一直在非常密集地使用和测试 Surface Duo~
Deepak：实际上，我干脆是拿它单主力机，现在我都觉得我已经不需要其他的任何设备了。
Jon：我们当然会这么说，毕竟是我们设计了它。但是，我想这也证明了一件事情，就是这种拓展式的双屏，已经具备应对日常工作的能力，并且贴合大家的需求了。
Deepak：对。这不仅仅是「2块屏幕智能手机」所带来的体验，它更接近于是一款「折叠式的平板电脑」的感觉。它是新事物，尽管是通过铰链和转轴来实现这种可能性。
Jon：我们接触 Surface Duo 的时候，我们首先想到的一问题是：人类还有哪些需求是未曾被实现的？人们在达成目标过程中，有哪些问题是需要工具来弥合的？我们要如何来帮助用户达成这个目标？双屏的这种形态，让我们有重新思考生产力的切入点。
Deepak：对，尤其是在移动端的生产力上。
在双屏界面下，使用 Office 在 PDF 文档上签名，然后使用 Outlook 发送出去，签合同的便捷操作。
Jon：确实，你的团队在中国和印度这样移动端优先的国家做了非常深入的调研。
Deepak：我们注意到很多用户在同一设备上执行并完成一系列的任务，他们需要更快地切换。同时，企业也正在倚靠我们过去认为非常「娱乐化」的媒介来进行必要的经营。
Jon：在过去，生产力有这非常清晰的定量标准，比如一秒生产多少零件。但是如今，生产力和创意息息相关，你的情绪状态和输出的内容是一样重要的。我们在不断消费又不断创造，反思和行动来回切换。其实这都涉及到一种倾向或者流程，你会按照一定的方式来处理信息，或者当你脑中突然划过一个想法的时候，你会想立刻构建或者制作某个东西，而这也需要一系列的操作和任务来支撑。
从整个数字设备的发展历程来看，双屏的设备可能是最适合处理这种带有步骤的「流程」。Surface Duo 最精巧地的地方，就在于它可以按照你的各种需求来折叠翻转和交互，可大可小，同时也是一款贴合你的口袋尺寸的设备。
在横屏模式之下，你可以像翻书一样浏览 Word 文档
Deepak：当然，它将内容消费提升到一个全新的层次，对于丰富内容的处理，Surface Duo 更加适合和专业。在 Outlook 当中，你可以快速浏览整个星期的工作安排，在 Word 中，你可以像翻书一样阅读内容。屏幕 折叠所赋予的空间让更多的信息有了自然的展现空间。
借助 Surface Duo ，创造性的工作也得到了增强。当我使用 PowerPoint 来制作幻灯片的时候，我喜欢在一个屏幕上编辑，在另外一块屏幕上预览，两块屏幕当中，一块帮我保持专注内容制作，另一块帮我统领全局。另外，我也会在屏幕上开启多个不同的应用。
将团队的视频通话和 PowerPoint 并列摆放，让你一边沟通一边查看内容
Jon：使用它来进行远程会议可能是我最喜欢的场景之一。我喜欢在开会的时候使用双横屏模式，将视频置于顶端，在下面的屏幕浏览文档。
Deepak：或者用另外一块屏幕来调用婴儿监视器！哈哈，疫情让我们和家庭的关系更加密切，Surface Duo 让我可以更多兼顾到家庭这边。
Jon：对，很多人认为在疫情期间，家里有这么多人，移动设备的使用量可能会降低，但是很多数据表明，情况恰恰相反（仅2月初到3月下旬，微软的 Team 移动端的用户数量就增加了超过300%）。就我个人而言，我不想一直待在一个房间里面，盯着一块屏幕，其他人也都反映，需要四处走动，或者在外面工作。当我开始使用Surface Duo 的时候，开始从中获得更为强大的支撑，获得更加有效的体验。
当然，它最优雅的还是在窗口的管理上。打开多个窗口是一种非常常见的 PC 体验，但是在单屏的移动端设备上其实还不算太普遍和舒适，但是在 Surface Duo 上则很自然。
Outlook 中双屏带来的额外空间让你可以更快查看相关的收件箱和日历
Deepak：关于用户如何使用窗口来提高生产力，有过很多研究，并且两块屏幕之间的天然接缝，或者说转轴，其实很自然地造就了「两块屏幕」和「多窗口」的认知。在某些情况下，因为接缝的存在，在两块屏幕上打开完全不同的两个应用，其实是非常自然的事情。
在很多其他的情况下，用户可能会在一个屏幕中打开一个新的程序，打开新的界面，执行单独的操作，或者通过一个程序，在另外一个屏幕中打开下一步操作，然后再在两个界面之间来回操作，这都是非常平稳的。这种被分割开的两块屏幕，创造了一种全新的交互契机，而不是制造约束。
Jon：对于 Surface 的软硬件团队，我最为欣赏的一点，就是这种共生和互相促进的模式。使用 Surface Duo，你可以拥有更大的屏幕空间，而且拥有众多不同的使用应用的新方法，而 Surface Duo 也正好可以适应各种各样不同的使用场景。而我们在创建这个产品的过程中，想要兼顾到如此之多的场景和需求，其实是需要两个团队亲密无间地协作，才能做好。
对了，你刚刚说道关于照片、视频、语音等内容——这些输入方式的协作，对于创造性的工作到底有多重要？
Deepak：的确，在移动端设备上，摄像头和麦克风是必不可少的。我们希望最大限度地让 Office 最大限度地利用这些传感器，在移动地使用过程中进行协同。用户在通勤过程中如何参与到线上课程的互动？老师如何更快地给孩子批阅作业，家长要如何协助孩子？其实，Surface Duo 在研发探索的过程中，就有意识地在兼顾这些场景和问题。
从媒体库当中，将媒体拖放到 PowerPoint 当中
Jon：我喜欢这些富有包容性的解决方案。人们的学习方式和工作方式通常是截然不同的，这些自适应性良好的输入模型，能够帮助能力各异的用户完成他们所需的工作。
Deepak：当我们将新的输入模型和智能化的功能结合到一起的时候，有趣的事情就开始发生了。我们几乎还没有涉及到创作方面的内容，用户就已经拥有很多契机自由发挥，他们可以轻松、清晰地借用这种交互模式来表达自己。比如可以更加顺畅地利用模板来制作精美的 Word 文档和 PowerPoint 。
Jon：物理世界中有太多东西，我们可以将其逐渐的数字化。
Deepak：的确，将智能化的程序和多样的传感器耦合到一起，提高生产力的方式有很多——无论是提升工作效率、家庭安全性还是让内心更加平静。其实第三方开发者身上，我看到了更多思维和想法的延展，以及可能性。
Jon：对，我们已经看到很多非常有趣智能的东西了！在 Microsoft Hackathon 大会上，有人为 Surface Duo 设计了一款双人游戏，两个玩家各占一块屏幕，隔着转轴来来操作，彼此面对面，非常有趣！
Deepak：确实如此！
Jon：我们很高兴 Surface Duo 最终能够面向普通用户，我很期待它最终会在普通用户手中会迸发出怎样的创意和灵思，他们能够构建出什么样的创新软件。
Deepak：有太多值得期待的东西了 ！
译者按：
微软在硬件产品上，有着丰富的翻车历史。90年代的事情太过久远姑且不说，最近十几年，出过很多比较失败的产品，比如上架仅 6 天就全线下架的时尚社交手机 Kin One 和 Kin Two，比如被支付宝团队戏称为「1%」的 Windows Phone 系统和手机，比如几乎不存在兼容性的 Surface RT 系列的平板电脑。这些硬件我全都买过，可以说全是坑。
这些产品单独来看是失败的，但是放在更长的时间跨度上来看，却又是微软整个生态和产品链条的构成和发展上，不可或缺的部分。Kin One 是整个 Metro 设计美学真正成型并走入移动端智能设备的里程碑（之前仅用于Zune系列播放器上），Windows Phone 则是 Windows 系统向小屏幕探索的必经之路，而 Surface RT 固然失败，但是它是带着桌面端 Windows 系统从传统 X86 架构走上 ARM 的一次大胆尝试。
失败总是难免的，而微软这种大厂更是有着试错买单的底气。从内部设计和产品团队各自为战，到统一到一个部门来统一管理，Surface 系列产品的诞生就是分水岭，而这件事情是在 10 年发生的。
当然，在此之后翻车的产品依然会有，但是成功的概率比起更早的阶段（比如应对 iPad 诞生时，仓促推出的触摸屏PC），已经提升很多了。
如今只剩下拼硬件参数数字产品的世界简直是太无聊了。我很期待 Surface Duo 这类双屏折叠硬件能带来改变。
文章来源：优设 作者：Jon Friedman
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品，为你的产品设计注入灵感。
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
这并不是一篇关于设计趋势的文章，而是一篇关于基础的设计准则的文章。如果你是一名 UI 设计师，无论你经验是否丰富，有些设计的基准是需要保证的，有些容易遗忘的细节，需要借助速查清单来进行走查优化。
这份优化 UI 界面的速查清单，就是帮你搞定这件事情的。
首先声明，一个项目中最好不要使用超过2种主要字体。不过这种原则已经广为流传，就不多说了，下面说说更细节的事情：
纯大写的字母文本，要额外拉开字母之间的字间距，提升可读性。
字重超细的字体要谨慎使用。可以使用浅色，但是要根据字体情况进行选择。如果你设计的文本是装饰性也就算的，如果是需要用户能清晰阅读的，就要特别慎重，能不用就不用，否则在部分手机屏幕上看起来会非常糟糕。
先说说网页排版。标题通常分 H1 到 H6 总计6个不同层级，但是通常不会全部用到，你需要确保层级最多不超过 4 个，并且控制它们整体的逻辑和一致性。网页的首屏和登录页面上的大标题，可以用最大的那一级，毕竟，富有表现力的视觉排版是当下趋势。
但是其他的文本不要和这个标题文本差距太大。英文文本以Chrome 浏览器为例，正文使用 16px 和 17px 这种大小，并且保留 12px 文本作为最小文本。
另外，同一个段落中，不要同时使用 16px 和 17px 这样相近又不同的文本尺寸，会让用户感到迷惑。
尽量不要在行高上采用自动行高。通常，现在比较流行的做法，是将行高拉高一些，确保整体版面的透气性和可读性，尤其是涉及到大量文本的时候。
在需要突出显示的部分使用粗体。标题、链接、按钮都在这个范畴内。如果将粗体样式应用到全部文本，这样重点就不突出了。
请特别注意文本的色彩。控制好对比度，确保任何类型的显示器上都可以清晰阅读。在设计占位符文本的时候，这个问题特别突出。
留白对于整体设计的重要性是毋庸置疑的。留白的变化有助于设计师理清元素之间的关系，提供节奏感，增加平衡感。
将一个语义块和另外一个语义块分开，最简单的方法就是在两者之间增加一条 1px 的线。但是这并不是最好的方法。
我见过不少设计作品中，界面中一个又一个线条绘制的盒子相互嵌套，复杂无比，每个盒子都是用 1px 粗细的线绘制的。但是，如今的UI界面上基本不用这种手法了，大量的卡片替代了以往的各种「盒子」，通过投影和间距来控制卡片之间的关系。
边距有助于从视觉上来判断元素之间的亲疏关系。当我们考虑一个新闻资讯卡片的布局的时候，它包含有一张图片、一个标题，还有3~4行预览文本和发布日期，那么应该如何分组和间隔？标题和文本应该是一组，这一组和图片、日期的距离更远一些。听起来很令人困惑？看下面的图片你就理解了：
总会有客户或者产品会想把所有的功能和元素都怼到同一个页面或者 APP 当中。这个时候，要你让标题、菜单、文本、特价优惠、社交帐号和电话号码都齐齐整整地塞到一起，同时还要给每个组件搭配上图标。
说真的，这种问题总不能避免。这个时候可以使用这个理由来试图进行沟通：用户一次接收的信息越少，进行有效操作的可能性就越大。循序渐进地呈现信息，能够让人更加愉悦，用户对于信息的接受性也更强。
用户永远都不会费力巴拉地去拆解和分析你的页面布局，紧密局促的布局也早已不符合主流审美和日常需求了。
如果你设计的是海报、Banner 或者是 卡片 等我们所熟知的视觉元素，那么请注意边缘留白的设计。如果按照经典的方式来布置（从左上到右下），那么尽量让上方的留白更大，这看起来会让视觉更加稳当，并且更加具有视觉吸引力。
Logo、图像、图标、背景这些元素决定了整个设计给人的情绪。所以在设计的时候，需要有针对性地挑选和优化。
我并不经常做 LOGO，但是在我的职业生涯中也起码做过 20 个LOGO。我的经验是：好 LOGO 很难制作。但是设计师只要遵循基本的原则，就能创建出像样的 LOGO。
比如仔细选择配色。我有一次看到一家名为 「VIP catch」 的钓鱼用品店，他们使用了紫色的 LOGO，从名字、配色到色彩的选择都和钓鱼这个场景没有一点关系。如果选对配色，有针对性地加入一些和钓鱼相关的元素，其实也就好了。
另外就是，如果你时间有限，就不要试图给品牌 LOGO 设计一个特定的符号或者图形了，因为真的很难做好。最好制作成文本 LOGO，通过微调字体来制作。
元素下方的阴影一定不要用黑色。始终基于表层的、前景的元素来选取阴影的颜色和明暗。通常，一个看起来舒适的阴影是通过多个阴影叠加造就的，一个小且明确的阴影，位于正下方，另外一个阴影模糊且弥散，透明度更高。
任何可以矢量化的元素，都尽量制作成为矢量的。从符号、箭头到 LOGO ，现在都最好制作成为矢量 SVG 格式，方便开发人员嵌入到设计系统当中。PNG 图标的边缘模糊，在清晰度越来越高的视网膜屏幕上，矢量图形元素不仅更加锐利，而且消耗更少的系统资源。
如果你正在为网站处理一组图标，请尽量确保这些图标在视觉风格和细节处理上是统一的，看起来是同属一个「家族」的。这意味着图标的笔触宽度、边框半径、视觉重量都应该是一样的。
除了上面的几个常见的要点之外，我还要额外补充几点，它们很难直接归结为一类，但是同样重要。
很多 UI 界面元素在过去多年的发展过程中，已经形成了认知广泛的「最佳实践」。如果在设计这些 UI 组件的时候，采用打破甚至彻底违背「最佳实践」的做法，比如将图片+标题+ 文本 的顺序打乱，可能会让人感到迷惑。
熟悉的设计并不意味着无聊，你总能够在 UI 界面的一些地方找到发挥创造力的地方，而不是在这些有着清晰规则的地方搞创新。设计师和艺术家是截然不同的职业，在设计过程中，创意冲动应该在不干扰用户体验的前提下，进行发挥。
在设计移动端 UI 界面之前，应该和开发人员进行充分的沟通，这一点很重要。iOS 和 Android 端的 APP 的尺寸还相对固定，但是如果你设计的是移动端的网页，那么可能涉及到的页面尺寸就非常多了，这个时候就要用到断点非常多的网格系统来进行响应式的设计了。
Lorem Ipsum 在中文中叫乱数假文，它是自动生成的一种占位符。在如今的设计领域当中，直接使用乱数假文看起来非常不专业，因为无论是 Sketch 还是 Figma 当中都有太多的插件，可以帮你生成符合语境的占位符内容。在此基础上还有另外一个要点，就是展示性的组件内容也不要简单地复制，尽量使用不同的图片和配色，让它们看起来更加真实。
这份UI快速检查清单目前是比较符合当下 UI 设计行业的需求的，但是它并非是教条，在特定的情况下，你可能不用遵循它。当然，在多数时候，这份清单能够帮你让设计更加优秀。
1、字体版式
1.1、注意大写
1.2、注意超细体的字体
1.3、标题和正文字体尺寸
1.4、行高
1.5、文本和标题的层次结构
1.6、文字对比
2、间距和边距
2.1、去掉多余的框架和线条
2.2、梳理从属关系
2.3、少即是多
2.4、屏幕边缘留白不均匀
3、配色和图像
3.1、关于 LOGO
3.2、阴影
3.3、图标和图像
4、其他设计常识
4.1、避免使用怪异的布局
4.2、布局尺寸和参数
4.3、乱数假文
结语
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
之前我也无意中看到饿了么把「超级会员」改成了「吃货卡」，感觉还不错。虽然并不了解饿了么的会员业务，但这次改版体现了一些有趣的设计思路，正好对应了我们在设计上的疑惑点。于是就着该读者的问题，一起来聊聊其中有意思的点。
比如，如何在同质化的功能上做出一些创新且有价值的改变；如何降低营销感，把商业需求统一到用户需求上；如何不需要再纠结今天到底吃什么了……
我们「以为」的，就是真实的吗？
今天的文章，从一张图开始。
在《认知与设计》的第一章里，作者提到了关于感知的话题，在影响感知的几种方式里，第一种就是「感知的启动」，其中很典型的案例是下面的一张素描，你能看出画面中是什么吗？
一条斑点狗。
或者你没看出来？如果你看到了这只狗，就很难再回头把这张素描看做随机无序的点了。就像书里说的那样，我们看到的很多东西取决于别人告诉我们它是什么。
产品功能也是如此，它告诉了我们这是什么，我们就会这么认为。如果一开始设计的就是吃货卡，也许很多人不会想到它是会员的变体，而是仅仅当做一个福利卡来看了。对于超级会员和吃货卡的感知差别仅仅在于定义上的不同，而非本质的改变，这是很有意思的一个点。
拿生活中的一个例子去看，相同的杯子，我们可以叫它咖啡杯，同样也可以叫它养生杯，当面对不同的叫法时，我们是不是就会产生不同的代入感？
而产品大多数时候都是通过渲染场景、营造氛围来达到这个目的，我们通常将其称之为产品定位。
所以产品需要定位，需要一个鲜明的形象，然后让产品中的所有信息、功能、风格、色彩都去表现它，才能树立起用户的认知，带来深入人心的记忆点。于是，相同的功能在不同产品中的差异除了内容的填充、使用的方法、规则的定义外，还可以改变的就是 —— 包装。
就饿了么这次改版的「吃货卡」而言，它本身并非一个新功能，只是「超级会员」的一个变体，会员的本质就是产品根据用户的投入而给予的特权。所以产品只是集合了这一部分有投入有特权的群体罢了，至于怎么称呼，会员也好、吃货也罢，在产品层面都是一样的。
会员，官方的解释是：通过正式手续加入某个会社或专业组织的人。
在任何地方，我们都可以成为会员，但不是任何地方，我们都能变成吃货。所以吃货卡这个定义，一下子就把强烈的产品属性透传了出来，并联结了我们的目标用户，会员的「积分」也自然地转化成了「吃货豆」，这种概念上的改变，就是一种包装。
这是我在这篇文章中要聊的第一个点，就是通过品牌塑造来重新包装一个功能，而包装的形式要依附于产品定位。
第二大点，我们来聊营销广告与产品功能的碰撞。
在广告滥用和形式多变的今天，我们已经逐渐习惯至无感那些具有丰富色彩和设计元素的广告内容，以至于可以自动筛选出它们，打上标签，从我们的视觉中过滤出去。
但总有一些广告似乎天生具有一种隐秘的商人气质，带着精明的窥探，去诱导大家浏览、点击、分享、消费。
广告是产品的一种营销语言，而营销有时就是让利，以广告的形式，通过优惠与福利来抓住用户的心，而用户往往会认为这是欺骗。那么当商业目标和用户目标无法趋于一致的时候，我们又该如何让用户为产品站台呢？
首先，对于广告的刻板印象常源自我们接触广告的失败经验，其大致可分为三类。
第一类「虚假利益」。夸大好处，或拿非最终的利益引诱，直到我们了解了详情才发现自己是个被骗的傻瓜。
于是，产品通过弱化营销性的信息流广告，并加上清晰的广告标签，公开透明的让用户感受到自己被平等地尊重，即满足商业利益，又解决了用户的诉求问题，将两者利益统一。
但这一类并不是我们今天要聊的重点，我们继续往下看。
第二类「难度操作」，比如那些假的关闭图标、广告背景中极小的跳过按钮、或者在领取福利时的层层步骤，都是用户在接触广告时难度操作的体现。
前两种对用户来说无法原谅，而最后一种往往会作为一种营销策略，去增加用户获得奖励前对产品的投入，比如浏览、转发、消费等，这是没有问题的，关键是用户是否提前获知了我们得到奖励的所有条件。我们厌恶的，是超出我们预期的那些负担任务。
吃货卡的任务模块在优化后就直接展示了任务详情。但是首页领任务的提示却隐藏了任务的重要条件，比如「下 2 单，赚 400 吃货豆」，实际是两笔超 20 元的订单。那是否会存在一类用户，没有点击查看详情而直接下单，下单之后，发现并没有完成进度？因为外卖费用没有超过 20 元。
如果产品是担心用户因为 20 元的门槛而不做任务，那么在点击查看后的任务详情不是把这一类用户推向进一步的否定吗？我们因这样的手段能够额外获得多少增长，同时，又有多少用户因此对所有的任务失去信任，我们无法准确计算，因为得到是显性的，而失去是隐性的。比如一些音乐产品的会员机制，用户办理好之后想听某首歌，发现还需要另外再付费，于是卸载了软件。
另外，改版后吃货豆的领取方式也对应发生了改变，不是直接的发放，而是转为点击领取。
虽然趣味的动效消解了部分用户对冗余操作的厌恶感，但还是能从反馈渠道中看到用户对这种强制限时去领取奖励做法的反感。这种领取模式也可说是一种变相签到，只不过这种签到的奖励不是你通过额外行为主动赚取的，而是在已经得到的情况下被迫操作领取，和支付宝领取积分的方式一样。限定时间内不领取，还会消失。
游戏积分的领取，之所以有领取操作，是因为积分积攒的宝箱奖励，是额外的收获。玩家玩游戏的目的是体验游戏而不是为了积分与宝箱，这两者之间是有差异的。
多余的操作看起来增加了页面的曝光度，带来了更多的转化可能，却「实在」地提高了用户获得奖励的成本，从而间接降低了奖励的价值，因为投入产出比太低，所以用户常常宁愿放弃这样的奖励。
产品想要让用户感觉到方便和实惠，体验满意，但又通过这种点击才能领取的方式，强制绑定用户与页面，来触发用户的下一步行动。表面上可玩性增强了，实则是体验感的缺失。
第三类是关于「过度选择」。交互设计有一本经典的入门书籍叫《Don’t make me think》，描述了如何通过设计帮助用户理解与操作，来提高产品的易用性。同理，当我们思考营销在产品中的表现时，难道就不需要考虑用户了么？
过去的营销就像过去的产品一样，以产品实现而非用户为中心，表现产品的实现方式而不去考虑用户的心理模型。
比如软件需要我们命名才能保存，特别是系统自带的记事本软件，不仅需要自己输入文件名，还用 *txt 占了命名位，使用星号让我们无法直接保存。相比之下，很多软件已不再需要用户命名，会直接提供默认命名，还有像 Typora 这类产品，可以自动将我们的第一段文本内容作为默认文件名。
对营销而言，以实现为中心的设计想法体现在制造了尽可能多的活动类型和规则上，希望触达不同的用户。而事实是，在过度选择的压力下，很多用户直接选择了忽视。
如果去看饿了么会员旧版的设计，我们会发现它有红包、奖励金和折扣商品三类福利，三者的关系是相对分离的。
其中的规则是，当我们成为了会员：
所以我们有三种获得红包的途径：领取、购买、兑换。
再看新版吃货卡的设计，在直接领取与购买红包不变之外，新版强调以用户的消费去获得奖励，不管是直接兑换红包或者兑换店铺的专属红包，都是以吃货豆兑换为核心。相比旧版，将商铺折扣商品，替换为吃货豆兑换专项红包，其实本质是一样的，无非就是为了提高吃货豆与吃货卡的利用率罢了。
在这样一个前提下，产品增加了红包类别，给予了用户更多选择的自由。虽然随着红包的分类维度变多（专享和吃货联盟的红包、特定品牌和分类的红包、具体店铺的红包），产品的规则趋向复杂，但是理解变简单了，我们也只需要做好兑换这一件事就可以。
复杂的规则仍然可以呈现出简明的设计，我们不需要用户来负责过滤这些复杂信息，而应当要求产品，站在用户这边，去降低理解成本。自然地，产品与用户就能并轨而走，商业需求与用户需求也可统一。
当然，或许也会有用户反感这样的功能被活动化，但不得不说，这确实是一个品牌的升级。
这篇文章从几个角度聊了「吃货卡」好与不好的地方。
当然它不仅仅是一个会员功能的改版，在概念玩法上也是一种升级。从设计角度看，确实有创意的表现，虽然也有不可取之处，但是它背后的设计思考是值得学习的。
我们知道，设计虽然会受到许多框架和规则的限制，但从问题出发，思考方案的过程才是设计本身最有意思的地方。好比游戏，也是因为规则与框架的限制，以至于才有了如今丰富多彩的游戏形态。
所以即使看向那些常规的功能和成熟的设计，我们也可以融入一些不一样的东西，站在过去到现在的经验上，再做出一点改变，使其更具可玩性。
文章来源：优设 作者：呆呆U理
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
与传统PC桌面不同，手机屏幕的尺寸更加小巧操作，方式也已触控为主，APP界面设计不但要保证APP功能的完整性和合理性，又要保证APP的功能性和实用性，在保证其拥有流畅的操作感受的同时，满足人们的审美需求。
接下来为大家介绍几款手机appui界面设计
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
配色，设计师的世纪难题。从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。UI 的发展从拟物的繁琐细节中挣脱出来，却在色彩的展现中放飞了自我。
零售业有个有趣的研究成果 —— 「七秒钟定律」：人们在挑选商品和服务时 ，只需要 7 秒钟就可以确定是否感兴趣，而在这短暂的 7 秒钟内，色彩的作用占到了 67%。
要在小小的手机屏幕中加入这么多颜色，并保持其中的联系和逻辑，着实不易。如果你还对配色一无所知，完全不知道配色应该怎么入手，那么你需要了解一下，我几年经验总结的配色思路。
无论我们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我们来看看这些案例：
虽然是不同的应用，但是这个拾色器的用法大同小异，但是，很多新人并没有搞懂拾色器的正确应用逻辑。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、明度（B）。
HSB 是色彩科学中对所有颜色属性的理论划分，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。
因为一个正确的选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。
细心的同学应该已经发现了，它们的首尾都是红色，那是因为色相的序列是一个首尾相接的环形模式，所以它实际上就是色环的柱状展示图，应用起来和色环没有实际区别。
接下来就要说到重点，饱和度和明度选择区，我自己使用的习惯，是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域，然后明确它们在 UI 中的对应情绪和应用场景。
在过去的大量分析中，互联网产品的主色和重要辅助色都会往右上角聚集，一些次要、不可点的色彩聚集在中上方，而文字背景色则聚集在左侧，无人区则是我们重点避开的对象。
下面我们分析几个案例，看看它们在这个选择区中的色彩分布情况：
大家也可以自己拿一些主流的应用做截图，然后把它们的 UI 元素色彩排列到拾色面板中，就会得到基本一致的结果。牢记这9个区域的场景划分，可以帮助我们非常、安全地完成 UI 配色。
在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：
1. 主色的选择
主色是一个应用的最核心的色彩，品牌的象征色，比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。
确定主色，并没有大家想象的那么复杂，它的要点在于——你想让用户感受到哪种情绪，然后通过情绪关联一个大致的色彩范围，再进行微调。
在今天的互联网产品中，主色的应用选择范围在拾色器区域的右上角，前面已经有解释了。这和平面设计中的用色有非常大的不同。
移动端产品要在一个方寸大的空间中争夺用户的注意力，引起用户的兴趣，那么低饱和清淡的色调是无法实现这个目标的，所以今天主色饱和度越来越，比如我们之前整理的一篇总结：
为什么支付宝要换 Logo 颜色？分析下目前 Logo 的主色趋势
再加上屏幕的 RGB 显示特性，高对比度，高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法，就是在确定色相类型后，在右上方区域选出合适的色值。
2. 辅助色的选择
辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。
前面我们提到过色环，这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最朴素的原则，即两个颜色在这个环形中角度越大，那么视觉差异性越大，对比越强，比如下图的展示：
这些配色的模式是不能闭着眼随便挑的，它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择，是根据实际场景的功能决定的。
比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简单、最安全的辅助色选择方式。
没有标准元素用色的情况下，再考虑应用色环的 「角度原则」，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的则越近。
比如下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需要被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产生强烈的操作欲望。
3. 中性色的选择
中性色，是页面中文字、背景用到的颜色，它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要，实际情况恰恰相反。
主色辅助色决定了界面视觉是否出彩，而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例，就应该明白，即使只有黑白灰的状态下，我们理解这些页面和进行使用也不会有丝毫的障碍。
中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。
中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足RGB的某种特性）。
这种做法，颜色越浅的时候饱和度应用色值就越低，将这个规律在拾色器中进行表现，那么我们就可以得到一个 L 型曲线，我称它为 「中性曲线」。
掌握对于主色、辅助色、中性色的选择方法，那么对于UI配色的奥义来说，你已经掌握了一半，接下来就要了解更具体的实践思路了。
配色并不是只有色彩的色值本身，大家一直在研究各种色彩心理学和理论，却很少关心它们如何应用，如何配置。
所以，我根据主色和辅助色应用总结了一个配色的四象限表格，再分别看看它们对应的案例：
1. 主色占比大，色彩丰富度高
主色会作为顶部标题栏或其它重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务，需要用丰富的色彩来进行暗示，吸引用户关注。
2. 主色占比大，色彩丰富度低
这类配色中，主色的应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的应用。
3. 主色占比小，色彩丰富度高
这是多数主流应用的趋势，降低主色占比，留出更多的空间给内容模块的展示上，突出自身带有的服务和功能。
4. 主色占比小，色彩丰富度低
通常，会应用这种方式是因为产品的服务是相对单一，但也需要用户投入注意力的应用，设计师就会尽力避免给予用户过多的干扰。
每次在进行配色的时候，我们都需要对自己要应用哪种配色应用方式做出规划，然后再动手执行。有了这个目标，后面在整个项目的设计中的配色步骤就是水到渠成的事情了。
在实践前，我们要简单讲讲一个应用或者界面的标准配色的流程了，流程顺序如下：
具体应该怎么使用这套流程，我们用一个图虫APP改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。
1. 配色流程演示
原型是 UI 设计的基本艺能了，在开始具体设计、配色前，搭建页面的框架原型是一个必备的条件，下面，是我们已经准备好的原型案例。
然后，我们确定以橙色作为应用主色，并在拾色器中进行确认。
有了主色，就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的，那么首先可以用到的就是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。
接着，我们开始整理中性色的使用，选择新的颜色来填充文字和背景，清晰的表现模块层级，文字信息的权重。
最后，就是添加辅助色和其它色彩的元素了，这个步骤建议都是放在最后一步操作。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，所以先完成基础搭建，可以更好的帮助我们判断彩色的使用是否合理。
下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用其它色彩，来丰富页面的色彩内容。
2. 其他配色类型应用
根据第一个方案，我们可以再用这个原型来实现其余的三个方案的配色。
比如下面的主色占比大，但是色彩丰富度低的。因为已经不太适用其它辅助色，所以主色填充上我们不再填充顶部导航栏的背景，而是将更多元素应用主色，减少辅助色数量。
然后是主色占比小，色彩丰富度高的方案，进一步降低主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。
最后，就是主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就开始增多，只保留最核心的一些元素使用主色，和极少的辅助色。
根据四种不同的配色方案，我们就可以得到四种不同的配色结果和风格，在每次设计开始实施前，我们都可以根据这种做法来做尝试，并选出自己满意的方案。
要再次强调，UI 配色是极其强调形式的应用科学，最后做的往往会和一开始想的效果有极大出入，所以需要我们有几个备选方案，可以随时进行调整，并选出合理的那个。
以上是我们关于配色有关知识点的分享，希望可以帮助大家提升对 UI 配色的认识。
文章来源：优设 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
