之前发布了几篇关于组件如何构建的文章，大家对组件的整体构建步骤有了一定的了解，整体的大框架上都较为熟悉。本次分享主要切入点是如何运用设计规范以及前端基础知识来辅助，进行原型交互细节提升，希望本次分享能够带给大家帮助。
情感化路由路标设计，传递寄递温暖
作为面客的战略级重点渠道，客户端的查单详情功能日均使用量达千万级别。随着公司业务的不断增长，查单诉求也随之增加。
结合功能体验、业务需求等方面的调研与了解，得出以上地图路由可解决的四个主要痛点。通过轨迹稀释与动态采样、底层数据归集、生动化视效、元素动态运营等手段，提升快递路由信息在地图上传达的透明度与丰富性，方便用户自助查询快递位置等内容，管理客户预期，同时加强用户对功能忠诚度、将客户留存在顺丰的平台上。
确认按照信息精度强化、情感共鸣设计、渠道视效优化三个目标方向来推动需求的实现，同步梳理需求优先级、管理需求迭代，敏捷满足功能诉求。
1. 通过梳理线下现有收转运派等全流程操作场景，针对性处理、展示对应运输工具元素，突显顺丰多样场景、多式联运的运输优势。
2. 拉通多关联系统顺利完成数据流转，纳入包括顺丰小哥/顺丰大哥/同城骑士上报的快递员位置、陆运系统等上报的货车位置，辅以里程数等高精度信息完成展示。
图标应用延展
新年图标
造型：以新年元素老虎，兔子延展，直观的反映新年气息，瑞狮迎新。飞机挂上中国结和小兔子开飞机突出新春的喜庆氛围。小哥派件图标给小哥戴上瑞狮/兔子帽子，增加年味，寓意小哥给大家送福了。
色彩：俯视插画风格配合高饱和色彩，活泼氛围加上新春元素体现趣味性。
执行难点：由于图标尺寸很小，需要顾及图标的精美丰富程度，但也不能画得过于复杂繁琐，在精简与精美的中间做一个良好的平衡。
传统节日图标
造型：由于劳动节是个严肃的节日，需要高举劳动的旗帜， 不分贫富贵贱，愿大家努力齐进取。所以在货车和飞机后面飘着鲜艳的红旗，上面标着“劳动光荣”字样。小哥派件图标后面带着一个麦穗满满的袋子，寓意共同努力就会得到丰收的成果。端午是“飞龙在天”吉祥日，龙和龙舟文化始终贯穿在端午节的传承历史中，所以我们以龙舟为载具，用卡通的形式简化龙舟繁杂的造型，让用户一看就能产生共鸣。另外飞机及小哥的图像中就加上粽子，清晰明了传达出端午送安康的信息。
色彩：劳动节俯视插画风格配合温暖的色彩，突出劳动节的光荣与奋斗的热情。端午节以黄绿色为
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
持续更新中……
折叠屏手机形态 ，主要是以下3种：
1、展开态：折叠屏设备完全展开后的形态。有更大的屏幕尺寸，可充分显示应用内容。
2、折叠态：折叠屏设备折叠后的形态。折叠后屏幕尺寸变小。
3、支架态：折叠屏设备处于完全展开和折叠的中间状态，可平稳放置。
1、展开态： 8英寸 2480x2200px 约8:7.1
2、折叠态： 正面屏 6.6英寸 2480x1148px 约19.5:9
3、折叠态： 背面屏 6.38英寸 2480x892px 约25:9
字号大小和粗细决定了信息的层级和主次关系。在设备上我们使用以下字号的合集为不同的控件及排版场景创造了清晰易读、层次分明的阅读体验。
展开态图标和字体大小不应发生明显变化，在保证可读性的基础上，建议保持跟折叠态一样的大小。若一定要发生大小变化，则最大不要超过1.2倍。为确保有较好的可读性，展开态单屏文本长度不超过40字，推荐36字左右。
1、通用原角场景：从系统层面建立参数化圆角，目前支持 5 种通用圆角大小。分别是：4vp、8vp、12vp、 16vp、 24vp。
2、控件圆角场景：不同控件会有不同的圆角大小，因此单独定义了圆角场景。
折叠屏展开态下屏幕尺寸变大，有利于更高效的信息展示或更沉浸的内容浏览。要充分利用折叠屏的大屏幕优势，需要进行宽屏的页面布局适配。态布局：针对设备宽度变化而进行界面版面重排的一种布局方式。动态布局可以细分为“自适应动态布局”和“响应式动态布局”两类。基于栅格系统考虑动态布局时，可参考：栅格系统。
1、自适应动态布局：随着屏幕设备规格的变化，界面中所呈现的信息量有增加，但信息架构不变。常见的自适应动态布局的表现形式为：相对拉伸、相对缩放、延伸布局等。
2、响应式动态布局：随着设备屏幕规格的变化，页面内的信息架构会发生变化。常见的响应式动态布局的变形形式为：挪移布局、重复布局、瀑布布局等。
一、页面布局布局&交互创新
结合六种动态布局规则，三种双页面交互架构规则以及多窗交互规则，在折叠屏上可以进行多种布局样式和交互的创新设计，以下为一些参考范式。包括：分栏布局 、挪移布局 、重复布局 、瀑布流&宫格布局 、临时双窗
分栏是一种层级关系的左右分窗口布局，旨在在宽屏设备上有较好的显示效果，帮助用户更高效地处理任务。文件管理、联系人、设置、备忘录等应用非常适合在展开态分栏布局。备忘录的分栏布局示例，如下图：
折叠屏设备，从折叠到展开，可以通过挪移布局进行布局的变化，提升阅读舒适度和浏览效率。
以下为4种常见的挪移布局用法。
范式1：不同页面的内容整合到同一页的挪移布局。
边看边评
阅读时，在展开态同时显示文章详情和评论列表，满足一边阅读文章一边看评论的诉求。阅读新闻时新闻详情页和评论页合一的示例，如下图：
图片较多的阅读场景，同样适用于“边看边评”体验。本场景下建议默认保持大图显示，点击“评论”按钮后，再触发页面布局的变化，同时显示图片和评论。用户主动触发“边看边评”后，下一次访问该页面，需要保持上一次的布局效果。查看图片时边看边评的示例，如下图：
范式2：同一页面的上下结构内容，变成左右结构的挪移布局。
杂志排版
本范式常用于阅读场景的图片和文本之间的挪移布局。不仅能解决图片过大的问题，还能通过杂志化布局带来更好的视觉效果。同一页面的新闻，从上下图文变成左右图文的挪移布局示例，如下图：
范式3：有层级结构的图文内容，变成左右结构的挪移布局。首页的图文内容，从层叠变成左右图文的挪移布局示例，如下图：
范式4：通过挪移布局，在展开态上减少次要信息对核心信息的干扰。看视频时，弹幕和操作按钮挪移布局到周边空闲区域的示例，如下图：
多人视频通话时，参会人信息从底部挪移到展开态的侧边，减少对视频通话画面遮挡的示例，如下图：
折叠屏设备，从折叠到展开，页面内的列表、卡片等均可通过重复布局，横向展示更多信息，提升页面的浏览效率，同时避免信息过疏。列表在展开态重复布局的示例，如下图：
从折叠态到展开态，使用重复布局时，通常内容按照从左到右的Z字形排布。如下图：
瀑布流布局适用于卡片式结构。折叠态的单列卡片，到展开态显示双列卡片，不同高度的卡片形成错落有致的瀑布流布局。可以有效提升页面的浏览效率和可视化效果。新闻首页卡片瀑布流布局示例，如下图：
瀑布流布局和卡片的重复布局比较相似，内容也按照从左到右的Z字形排布，卡片的高度可以不同。视频卡片从折叠到展开态的瀑布流布局示例，如下图：
在大屏幕设备上，双页面同时显示，为用户创造了新的操作体验。当应用中的两个页面间有关联关系时，可以考虑采用组合页面的方式，根据不同的场景诉求，选择合适的页面组合关系。组合页面有三种：层级关系 、主从关系、并列关系。
1、层级关系
层级关系有多层级和单一层级两种。层级关系的双窗口，即为通常说的分栏。
2、多层级分栏
多层级关系有完整的多层结构，例如复杂的系统设置菜单，海量内容（例如综合电商的商品，视频、图片或音乐的媒体资源，新闻网站的海量新闻）的门户及多级分类子页面。
此类型的交互特点为：
（1）第一级的基础分类通常以列表形式呈现。
（2）末级列表页面中的元素为最小内容元素，例如单个商品、单个媒体素材、单条新闻等。
有多个层级递进关系的场景示例，如下图：
单一层级结构一般以“列表+详情”形式呈现，列表中的每个元素都是末端元素，元素中没有二级分类列表。例如邮件、信息、备忘录等内容型元素的列表。
此类型的交互特点为：
（1）列表中只存在单独的元素，没有子列表，左右两侧内容属性固定，较少用户迷失。
（2）点击左侧中某一个条目，右侧打开对应的详情内容。
（3）用户可以借助在左侧列表中点击任意一个条目，在右侧快速打开对应的详情内容，实现内容快速切换。
在主从关系类型中，一侧主导页面为沉浸式场景；辅助页面在另一侧，呈现评论、互动讨论、参考信息等相关内容。可根据沉浸内容情况分为左右或上下的组合页面结构。
此类型的交互逻辑特点：
（1）两部分之间相互独立，且有明显的主从关系。
（2）辅助侧依赖主导侧存在，如果主导侧关闭或切换，辅助侧页面不能单独存在，需同步关闭或切换。
（3）主导侧的内容呈现，没有受到打扰和中断，持续保持最佳的沉浸状态。
（4）辅助侧的内容用户可以进行滚动浏览，适合于信息流数据，用户可参与互动。
主从关系的信息架构样式主要有如下几种，应用可根据具体场景进行选择：
从属信息默认以悬浮面板的形式显示，通过特定按钮或特定手势交互触发，一般用于作为主要信息的筛选项或更多菜单项，不影响主要信息的展示。短视频应用使用悬浮面板的示例，如下图：
导航应用悬浮面板的示例（折叠屏展开后，悬浮面板不拉伸，不遮挡底部主要信息），如下图
从属信息默认以边栏形式显示，通过界面比例和视觉效果表现从属关系，不影响主要信息的展示，同时能快速浏览或操作从属信息。短视频应用使用侧边栏的示例，如下图：
在并列关系中，界面中的两侧内容处于同等重要的地位。两侧的内容可以是同类型的内容，也可以是不同类型的内容。
例如购物应用中，下单前对两个相似商品的情况进行详细的对比就是相同类型内容的页面并列；购物应用中一侧窗口显示商品，另外一侧显示和商家的对话界面，就是不同类型内容的页面并列。
并列关系方便用户对两个商品的信息进行更详细的比对或进行更高效的交互操作。 在这种组合页面下，左右两页面间无主次和从属关系，页面分割比例应为1:1
折叠屏展开态、平板、电脑等大屏幕设备，具有多任务并行和效率型任务处理的先天优势。
系统提供了悬浮窗、分屏、平行视界三种多窗口交互，为用户在大屏幕设备上的多任务并行、便捷的临时任务处理提供更佳的使用体验。多窗口类，如下图：
多窗口的应用
多任务并行
通过分屏可实现多任务并行。有左右分屏和上下分屏两种方式。针对短视频、IM对话、购物等内容，左右分屏体验更佳；针对长视频、游戏、会议等内容，上下分屏体验更佳。通过分屏进行任务并行的示例，如下图：
临时任务处理
通过悬浮窗可实现便捷的临时任务处理。
三方应用根据业务需求，列举需要调用窗口的场景，对系统提出调用窗口显示的请求，系统提供将特定页面窗口化显示的能力。例如，临时查看附件、拨打电话、查看地图、IM对话、登录等场景，都非常适合使用应用内悬浮窗。应用内悬浮窗查看附件的示例，如下图：
形成分屏或打开悬浮窗后，从某个窗口内拖拽内容到另一个窗口，即为跨窗口拖拽。跨窗口拖拽图片的示例，如下图：
折叠屏相对于普通手机有两个明显的特点：可随时折叠展开、展开后屏幕变大。折叠屏UX设计中需考虑如下体验诉求：
1、体验连续
屏幕可随时折叠展开，在体验上要保证用户体验的连续性，应用需要遵从屏幕显示的兼容和应用状态的连续。屏幕兼容：由于屏幕尺寸发生变化，应用应采用适当的手段对屏幕上内容布局进行优化调整。
应用连续：应用在折叠与展开状态切换的过程中保持正常运行。
2、体验增值
屏幕变大后，用户体验在某些方面有增值。
更多内容：大尺寸屏幕可显示更多内容，提高显示和操作的效率。
更加沉浸：大尺寸屏幕可显示更清晰的细节，适合图片浏览、视频欣赏、游戏等应用和场景。
多任务并行：多个窗口可同时在大尺寸屏幕内展示，为用户多任务并行提供了直观高效的方式。
1、基础要求
（1）保证布局良好
（2）窗口内布局的特殊处理
（3）保证应用任务的连续性
（5）音频冲突处理
（6）多窗口体验融合
2、保证布局良好
应用内的元素布局应进行响应式设计，保证应用界面在全屏、悬浮窗、分屏不同窗口模式间进行切换时、在设备横竖屏旋转时、调整系统字号、调整系统显示模式后，依然保持可用、良好的布局，不出现应用元素无法显示的问题。
3、窗口内布局的特殊处理
分屏窗口内，在应用界面顶部会显示分屏拖拽横条，且隐藏系统状态栏。应用界面中需要增加一个状态栏高度，来避免出现分屏拖拽横条和应用顶部的功能热区重叠，导致应用功能无法操作的问题。悬浮窗窗口内，悬浮窗的操作横条是在应用界面外显示的，因此应用不需要留出状态栏高度，避免在窗口内出现空白区域。
4、保证应用任务的连续性
当应用以分屏、悬浮窗显示时，需要保证应用不被特殊情况所打断进程。例如应用在不同窗口模式间切换时、在设备横竖屏旋转时、调整系统字号、调整系统显示模式后，应用不会发生重启、闪退等问题。且切换之前的任务和相关状态得以保存和延续，或者能够快速恢复，给用户提供连续的体验。
5、保证多个任务同时正常使用
例如用户正在玩游戏或看视频，同时在使用其他应用。只要游戏或视频应用还在前台显示，依然要保证能正常运行，不会因为用户正在使用的是另一个应用，而导致游戏暂停或视频暂停。
6、音频冲突处理
当应用正在播放视频或播放音乐时，新打开一个窗口应用，并触发了新的音频任务，原应用对音频的处理要符合用户预期，例如临时暂停音视频的播放或降低音量，以便于用户听到新的音频。
7、多窗口体验融合
可通过长按顶部横条并拖拽的交互，实现分屏和悬浮窗之间的互换。实现多窗口体验融合。
1、方式介绍
悬浮窗用于在已有的任务基础上，临时处理另一个任务，或短时间多任务并行使用的场景。 支持同时使用多个悬浮窗。手机、折叠屏折叠状态下，一屏幕内最多展开一个悬浮窗；平板或 折叠屏展开状态下，一屏幕内最多展开两个悬浮窗。其他悬浮窗自动最小化为悬浮球叠加显 示。悬浮窗适用于玩游戏看视频等沉浸式场景下临时回复消息；购物时临时使用计算器计算等。
1.1 触发方式
（1）通过一步小窗的手势操作快速让应用从全屏到悬浮窗。本交互适用于所有支持智慧多窗的应用。
（2）智慧多窗应用栏触发：从屏幕边缘向内滑并悬停，拖出应用栏，点击应用图标，打开该应用的悬浮窗。本交互适用于所有支持智慧多窗的应用。
（3）横幅通知触发：沉浸式场景来通知，点击通知，悬浮窗展示。本方式有效解决了查看通知的跨应用跳转痛点。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
作者：忻芸
链接：https://www.zcool.com.cn/article/ZMTU3MjM5Ng==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
作者：姝斐suphie
链接：https://www.zcool.com.cn/article/ZMTYyMTc3Mg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
整个体验设计的大趋势是和社会科学的那一套思路走得越来越近，因此现在大家可以观察到做交互设计或者用户研究经常会借鉴心理学/社会学的研究方法去应用成熟的理论模型甚至建立模型、去“玩概念”，但可惜的是咱这一行大多数设计师都没有这样的教育背景，就算是所谓的“大厂公众号出品”，也难免会有思虑不周的时候。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
作者：张阳光Designer
链接：https://www.zcool.com.cn/article/ZMTYyMTczNg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
作者：JasonGYF
链接：https://www.zcool.com.cn/article/ZMTYyMTM4OA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
作者：姝斐suphie
链接：https://www.zcool.com.cn/article/ZMTYyMTc3Mg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
本文没有咬文嚼字的地方，只是一个配色技巧的分享，十分简单，简单到流泪，但或许对你来说又十分实用，实用到无语。原本就是天然的馈赠，你我只是顺手采撷之......
网页视觉层面主要是由形式（或叫布局）、色彩、图片和文字信息组成，设计师通常对形式感关注的比较多，因为视觉冲击力、设计差异性或创新大多都仰赖形式呈现，而色彩主要影响整体观感、设计品质以及受众情绪，很多时候我们设计了一个不错的形式却未能做出这个稿子应有的品质，会不会太可惜？
形式需要思考创造，图片素材需要学习处理，文字需要梳理编排，但网页色彩是不是一定需要有天生的色感、丰富的理论和多年经验沉淀才能运用自如？
当然不！
关于网页配色
网页配色的文章在网络上很多，甚至有些泛滥，稍微关注过的同学应该都知道“色轮”、“色卡”等辅助性配色工具，但那更多都是从印刷介质上的色彩系统延伸出来的，不完全适用于网页，甚至造成很大的局限，比如你会较真的通过色轮来选用网页色彩吗？再比如通过下面提供的配色组合，你能自由的应对一个又一个的类型相若的网页设计需求吗？
由于CMYK与RGB色彩模式不同，网页的色彩呈现数量要庞大的多，选用也应该更自由，但在配色上却常碰到设计作品偏脏、发灰、花哨等大问题，这事儿得解决。
网页案例剖析
“网页配色不宜超过三种。”
真理，这没错，但更多是从色相（赤橙黄绿青蓝紫等不同颜色）上来说的。
色相差异明显，主要色彩的选取就比较好办，常见的有对比色、临近色、冷暖色调互补等方式，可以简单设定，或直接从成功作品中借鉴主辅色配比都可以，比如常见的朱红点缀深蓝、明黄点缀深绿等。
但通常，我们需要面对的设计需求在色彩分配上会有更多的问题出现：
（由于本人从事游戏网页视觉设计工作，故案例均以游戏网页做示意说明，其他网页类型可以做延伸思考或仅作参阅）
如上所示，根据网页信息的多寡，会有更多色彩区域的层级划分和文字信息层级区分需求，那么在守住“网页色彩（相）不超过三种”的原则下，只能寻找更多同色系的色彩来完善设计，也就是在“饱和度”和“明度”上做文章。
这也就是本文为解决这一问题所要分享的“天然”配色技巧：叠柔配色法。
叠柔配色技巧分享（这里才是正文，上面都是废话）
这个方法非常简单，无需知道三角函数、四则运算，无需理解色彩指数和直方图，甚至不用了解色阶曲线和亮度强弱......甚至，你可以对色彩毫无知觉。
★只需要明白三个关键词：叠加、柔光和透明度（填充）。
如果连这三个关键词都不甚明了，那就记住他们所在的位置（下图）：
注意：透明度与填充略有不同，填充不会影响到“混合选项”的效果，而透明度则是作用于整个图层。
顺便，花几分钟时间了解一下这个配色技巧的原理：
即：用纯白色（#ffffff）和纯黑色（#000000）通过“叠加”和“柔光”的混合模式（效果类似调整饱和度和明度），在任意一个色彩上得到最匹配的颜色（然后通过调整透明度选取最适合的辅色）。
（上图示例中，调整叠/柔模式的黑白色块的不同透明度（取10%到100%整数值为例）就可以得到差异较明显的40种配色，通过这种技巧，理论上每一种颜色都可以轻易获得无穷尽的“天然配色”，并且是“0失误”！）
★ 由于叠加和柔光模式对图像内的最高亮部分和最阴影部分无调整，因此该配色方法对纯黑色和纯白色不起作用。
设计实战演示：
要不要像上面图示看起来的那样复杂？
不用，只需要理解了上面的方法，就可以忘记图示，在你的设计工作中自由发挥！
简单三步：
① 一个黑或白色，或黑白渐变（可以是点、线、面...甚至字体）
② 混合模式选择叠加或柔光
③ 调整透明度（1%-100%随意，省心的做法是直接键入一个整数值，比如：轻质感类页面可以选择20%-40%，重质感感类可以键入60%或以上）
如下图：
（无论你采用何种主色，用黑白色彩叠加或柔光，你都可以轻松自如的获得完美匹配的整套色系，附件有PSD源文件：下载地址在回复中的226楼）
这并不仅仅适用于色域划分或提取几个辅色，如下图：字体颜色、细节线条、按钮渐变、边角高光、描边阴影......都可以用黑白色肆意挥洒！
方法延伸（细节篇）
假如将该方法运用到一个按钮上......
通过混合选项中的“阴影、外发光、描边（不适用叠柔法）、内阴影、内发光”可以自由的刻画5层像素级细节（当然，通常在实际的使用中刻画1到3层即可）。
且无论形状、色彩如何变化，这些细节都如影随形、色彩都随变而变~可节省大量重调细节或盲目选取配色的时间！
细节、品质和效率，一石三鸟，兼而得之！
（近期看到设计圈有讨论“网页雕花不可取”的课题，假如让细节成为习惯，让美感成为直觉，雕花也便只是普通设计行为而已。）
案例历练：
后记：
叠柔配色法：无招胜有招~把抓不住的感觉交给精密的计算机，科学化进行你的设计。
更短的时间，更高的品质，你，值得拥有~......
另：方法是死的，人是活的，配合色阶、曲线、色彩平衡等，还可以玩出更多花样来......
分享来自：TGideas-腾讯游戏官方设计团队
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
作者：孔雀
链接：https://www.zcool.com.cn/article/ZMzI5ODg=.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
蓝蓝设计的小编 http://www.lanlanwork.com
