众所周知，B端产品中的页面以列表居多，列表的优势在于能多维度地呈现/沉淀数据项，且可结合常用操作进行管理。之前我们有对通用型的列表做过设计总结“横向看信息，纵向做类比”，当需要用“复杂”列表承载业务时，B端产品的视觉设计师可以有怎样的设计思路，以避免遇到以下场景呢？
Step01
了解产品目标与“复杂”的原因
当接到B端产品中的简单列表要升级为“复杂”列表的需求时，作为B端视觉设计师首先需要了解背后的原因与目标，便于拓展不同维度的思考以提升产品体验。通过了解业务目标，明晰对业务流程的影响，以及如何与现有业务模块的连接；通过了解用户目标，明确业务参与者中用户层是否变化等。
Step02
理解业务功能组合及使用场景
将基于产品目标拆解的需求，具象成功能组合后，B端视觉设计师需要结合业务与场景，理解其中的“复杂”点，以及发现设计难点。如：业务的流程变化，对应是否有分支增加/顺序调换等，功能又是如何体现的；不同的用户层，关注重点是什么、对应的数据项是哪些，使用方式是否有变化等。
Step03
思考与设计“复杂”列表的界面表达
结合场景理解业务功能后，B端视觉设计师便可开始思考如何设计“复杂”列表，以表现业务的进化，同时让用户能轻松地感知到。
1.先构建列表框架，以体现业务的层级
因为框架的确定，有利于构建整个内容的大关系。而框架构建离不开对列表承载的信息层级进行分析，即对数据行之间的关系分析，其中数据行之间的关系大致可分为三种：并列关系、包含关系、父子关系，如下图所示。
不同的列表框架，其优势各不相同：
并列关系的列表 - 适合承载类似数据行的集合，是目前B端系统中最常见的通用型列表；
包含关系的列表 - 适合行的数据行差异性较大的组合，弱对比强呈现，如电商网站中的订单与商品详情；
父子关系的列表 - 适合数据行相同且层级有区分的树状结构列表，对比、呈现层级关系等的拓展性高。
2.分析数据行，提升可读性
以某家族列表为例，当框架确定之后，通用型的列表即可转换为可呈现父子关系的列表。
从管理层（大B）的角度，希望通过层级了解到分布与整体情况；普通管理层（中B/小B），希望通过层级和不同维度的数据项，加深对“人”了解；小B/执行人员，通过便捷的操作增加/删除/查找/修改内容。因此当一个列表要满足不同用户层的目标时，
合理删除 - 增加不同维度的信息后，确认并删除含义重复/没有价值的信息，如：删除含义重复的子女数量列，增加其他维度更重要的信息。
分层组织 - 不同层级，数据组合可有差异，可从统计数据与详细数据、列的信息相关性组合等角度入手。如：增加统计的家庭成员数据，对其余列进行相关性分组。
适时隐藏 - 附加功能、增加选择难度等的功能/隐私信息，在用户需要时出现。如：联系方式是较为隐私信息，需要时通过hover查看/编辑。
巧妙转移 - 结合PC端的交互操作，打破静态页面呈现，增加“动态”的空间。如下图：增加横向空间宽度，以呈现更多信息。
3.用视觉手法优化各元素间的呈现
期望用视觉手法，带给不同用户“感官”层面的积极感受。同时减少视觉噪音带来的影响，让用户清晰地了解关注重点。
其中父子关系的列表注意与斑马纹的搭配使用，因为易削弱层级关系，斑马纹更适合通用型的列表。
之前有总结视觉细节的设计方法，这里不再赘述，点击下方图片即可查看。
Step04
设计回溯，是否达成目标
设计完成后，带着最初的产品目标再来看设计，是否有达成目标，在信息呈现方面是否更合理，用户获取信息是否更便捷等，退一步更能有全局思维。而对内是否可以沉淀设计资产，优化现有的结构或扩充设计规范。
小结：
B端产品中列表是最普遍存在的，而如何将不断变化 / 复杂的列表设计得更有用，T型思考法（升级版）探索了其中一种，若有其他思路/场景值得思考，欢迎留言讨论～
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
对于设计师来说，在日常的互联网设计工作中面对的主要是两类产品设计类型，一类是C端(Consumer)指的是消费者、个人用户；顾名思义就是面向个人用户提供服务的产品，是直接服务于用户的。另一类是B端（Business）指的是企业或商家；顾名思义就是面向商家、企业级、业务部门提供的服务产品，是间接服务于用户的。现在互联网进入下半场，C端产品逐渐靠近天花板，红利逐渐消退，大部分的企业开始转向B端。
对于设计师来说我们也要对自己有一个清晰的定位和转换，如何才能在业务的转换下，跟上企业的步伐，做好角色的转变和切入。
当然，从C端快速切换到B端设计或者从B端快速切换到C端都不是一件容易的事情，因为B端和C端存在比较大的一些差异。其商业属性，目标用户，使用场景，设计表达，产品诉求，用户体验，设备载体等都是不同的。B端现对于C端的业务而言更为复杂，那么这次就聊一聊B端设计师从哪些方面发掘自身设计价值，更好的为产品服务，提升产品价值。
在我们开始接触B端产品时，先要对B端产品有一个基本的概念，什么是B端产品？
常见的有OA系统，ERP，CRM，SAAS等（这里就不一一赘述，大家可以自行百度查看一下基本概念）
B端产品是帮助企业或者部门协同办公，解决一条业务链问题，将线下操作通过系统化，流程化转移到线上，提高办公效率，节约成本，高效完成任务从而提高企业的效率，减低内部不必要的消耗。
B端产品行业与行业之间的跨越度很大，因为不同的业务属性所要的产品诉求是不同的。但我们作为一个设计师，可能会遇到各种复杂的业务场景，复杂枯燥的行业术语也可能都不精通，就算学习了也不一定能非常懂，而且行业属性较重，我们大概率不是用户，业务场景还原成本高，甚至没有条件还原。所以在做设计的时候还是会懵。往往我们需要深入用户调研，尽可能地接近真实业务场景，与用户共同创造，基于业务底层逻辑提炼出强整合性、高兼容性、高拓展性的系统规范。B端的产品设计也是一个不小的挑战，那我们如何打破这个挑战更快速的接触，适应B端设计呢？
B 端产品相对而言，场景、功能、业务流程、信息架构要比 C 端更复杂，面对的异常情况也比较多，所以 B 端在设计风格上尽量做到简洁。B 端产品实用性大于美观性，在每一个功能的设计都需要你去思考很多方面：用户易用、信息层级、未来扩展，你都要做出取舍，而对于每个模块都需要你思考、结合用户场景。
面对B端产品我们应该如何分析和处理呢？
B 端的业务逻辑复杂，子业务多样化，产品的规则，流程，诉求可能随时就会调整，设计师应当基于B端的产品业务特性，市场与用户的需求，在看似杂乱无章的业务中寻找共性，梳理模块进行合理的整理和设计。
在做B端业务前，我们要对我们即将要处理的业务有一个基本的理解和认知，不同的部门员工因为职业属性，使用产品的诉求也是不同的，所以相对应的设计方案流程也是不同的，这就需要我们充分理解业务流程，有针对性的梳理。
例如：我们要做一个考勤系统，我们需要清楚公司的考勤制度，事假/病假/年假/调休等如何处理，如何提交，如何审批，月底汇算，季度汇算等问题，前期了解的流程越多越清晰，就可以帮助我们规避很多不必要的问题。
要将功能流程归类梳理整合，把杂乱的功能整理清楚，提高用户效能。
用户的时间就是金钱，这对于 B 端商家角色中尤为重要，大量订单的处理、表格化的导入和导出、批量管理和网站运营等方面，对于效率有着极高的要求，商家通过可视化界面来完成某项任务。
在这其中，影响最大的莫过于交互方式了，相信各位一定用过各大银行的网站，页面的导航关联性弱、结构不合理、提示不明确、交互流程过长，甚至有的网站光是登录，就得大费周章。
如何提高效率，我认为主要从以下几个方面着手：
如果你的产品，让人看一眼就能上手，那么说明是非常友好的设计。易用性不一定意味着简单和低智，依据复杂守恒定理（泰勒斯定理），每个应用程序都有自己内在的、无法简化的复杂度。
所以，提高易用性意味着要设计合理的交互，易用性分为对新手（小白用户）友好和对老用户（专家用户）友好，包括数量最大的中间用户。
如果你的界面是仅仅对于新手友好，那么可能完成的任务都是简单而轻松的。但是对于老用户，他需要更复杂的功能来处理大量庞杂的任务；因此在设计的时候，既要提供傻瓜式的操作方式，也要对专家用户提供提高效率的工具。
此处的智能化既包括通过大数据或者人工智能自动将操作步骤变得简洁高效，也包括诸如一些字段输入、自动定位、图片识别、OCR 等方式来使用户的效率得以提升的功能。
以前的用户要抠图可能会在 ps 中操作好几个步骤才能完成，但是随着机器学习技术的发展，ps 已经可以更加智能的抠图。当然，还包括其他功能的智能化。
在 B 端 SaaS 领域，智能化也是一个重要的趋势，针对不同的商家所面临的不同的行业领域，我们或许可以提供更加全面且友好的服务。
提高系统内的一致性，减少用户认知成本。在同一平台内的页面，样式和交互上要尽量保持一致性，不要有的地方是总金额，有的地方是总价格，这会让用户犯迷糊。提高通用性，也意味着你需要关注并熟悉系统内不同功能之间的关联性，尽量做到统一处理。
B端产品多在工作中需要长时间沉浸式使用，为帮助用户集中注意力、高效完成任务，设计风格多为冷静、克制、干净、简洁，相较于视觉，更多的是注重如何让用户理解产品逻辑。如何通过设计的处理更好的提升产品的效率，留住用户，让用户有更流程的产品体验。
在我们进入一个产品内容比较多的网站下，如何才可以让用户快速在网站中匹配到自己需求，解决自己的问题呢？最快速，便捷的处理方式就是搜索框输入关键字，通过用户的关键词在系统中为用户提供最匹配，最合适的内容，缩短用户寻找产品的时间，提升用户的使用效率，让用户有更流畅的体验。
设计要点：
提高搜索框在网站中的曝光率
提升模糊搜索的正确率
尽量不要出现搜索结果为空
文案提醒要简练，让用户扫一眼就知道要表达什么意思，不要让用户停下时间去思考，琢磨文字提示的信息，减少干扰信息，比如在处理input时加入默认提示，让表单更清晰，表意更明确；有字数限制时，要明确可输入字数和已输入字数，这样让用户有一个预期，不会出现输着输着没法输入新的内容。
设计要点：
文字简短，清晰，通俗易懂
文案风格统一
用户使用产品时，用户与产品之间形成一种“沟通”，良好的反馈机制能够大大提升这种“沟通”体验。用户的每一步操作都应当得到相应的反馈，尤其是在错误时要及时纠正，以便用户更准确的操作下一步。但是这种操作不应该只是错误色彩提示。比如当我们在输入表单时，输入错误系统并没有给我们任何提示，只是将输入框变为错误操作的颜色，这样会让用户无法流畅完成操作内容。
设计要点：
及时纠正用户错误，减少用户焦虑
将用户的错误操作清晰明了的表述出来
空状态作用和文章中“承上启下”的文字作用是一样的，空页面可以帮助我们理解上下文，让用户知道即将要发生什么，才会觉得舒服。最好的方式就是“展示和引导”：通过清晰的文字告知用户发生了什么，并且通过按钮/快速链接有效的引导用户行为，避免用户陷入死胡同，不知如何操作下一步。
设计要点：
空界面可以增加一些趣味性，个性化或者打造品牌感（IP形象/品牌logo衍生）
空界面状态保持简洁，直观易懂
引导用户操作
当icon被用于设计时，最好使用用户熟悉和容易识别的icon，以使用户能够迅速地了解其用途。如果icon无法传达正确的意思，就会变成视觉噪音，让使用者迷惑，成为使用者的认知障碍。
设计要点：
icon要易识别，正确传达表示含义
同一层级的icon，要统一标准，设计一致
B端的设计往往会有很多种情况，我们在做名称/数据的设计时尽量模拟真实的上线数据，如果涉及敏感数据可以自己改一下，但是尽量要采用字段长度，这样可以在设计中无限接近上线后的产品，减少后期因为数据展示出现的UI调整。
设计要点：
在设计阶段无限接近真实上线环境
将上线后可能出现的展示样式都要制作出来，避免后期的返工
确定功能操作的优先级，将一些用户关心的数据统计/报表展示一级页面，使用频率高的功能优先靠前展现出来，轻量级操作的信息入口尽量收起，不要展示给用户，以免造成不必要的困扰，增加用户学习成本。
设计要点：
确定功能优先级
高频次入口优先展示，低频次折叠隐藏
B端产品逻辑严密和专业性较高，用户在使用时经常不可避免的操作失误，尤其是涉及到删除数据或者金额方面的操作，我们需要格外的谨慎处理。在用户犯错时，我们要及时的提示用户，这样的操作会带来什么样的后果，提示的文案要注意语气，不要将责任全部推在用户身上，礼貌对待用户。
设计要点：
要及时反馈用户后果，避免因为不当操作造成伤害
页面删除尽量给二次确定，避免用户误点，做个人保护
尽量有垃圾箱回收，方便用户后悔
避免加载中用户等待焦虑，我们可以使用分布式的加载方式预先加载页面框架然后加载内容，在内容未出现前通过占位符的方式展示，优先加载占用网络资源较少的元素，减少用户的等待心理，占位符的方式可以让用户提前了解到页面整体的展示样式效果，给用户加载好的错觉。
在加载过程中我们可以通过这几个视觉表达方式来加载，通过显示品牌元素加载；色块加载；界面布局；灰色图显示等。
设计要点：
避免空白页加载等待，增加用户焦虑
选择最符合产品调性的加载
我们要做到减轻界面视觉呈现，但这并不是意味着减少页面功能。我们要帮助用户简化认知负担，增加界面可读性，降低用户阅读浏览复杂的大块内容时的心理压力和抵触感。将一些复杂的表单内容通过数据可视化的方式让用户更快，更便捷的查看数据，从而对业务有更直观的理解。
设计要点：
数据可视化是一个不错的选择
避免不必要的元素信息
保证可读性
一个优秀的进度条可以让用户减少很多的焦虑，并且让过程和结果步骤清晰可见，进度条的目的在于通过向用户反馈当前响应进度来让用户在等待中放松下来，在用户等待程序处理事情时，不应该把用户仍在一旁傻傻的猜想程序什么时候结束，这个步骤还有多长时间。正是这样的情景下，进度条刚好可以构建用户与系统之间沟通的桥梁。面对长时间的几十秒的操作的进度条不应该只是一个进度模糊显示，更好的处理是应该加入进步完成的百分比，清晰明了告诉用户系统完成了多少工作量还剩多少。
设计要点：
进度条可以打消用户对程序等待响应的疑惑
针对响应时间稍长的进度加入显示百分比
开发完成后设计师要开始设计走查，因为开发不可能百分之一百的还原设计图，所以最后的设计把控是非常重要的，即使是开发按照设计图还原界面但是可能代码实现后还是有些问题，或者是不同尺寸的屏幕适配，或者是加入真实数据后一些展示问题，又或者是页面的跳转/返回以及一些弹窗提示等都需要最后的走查确定；不仅仅是视觉页面验收，交互方面还要考虑去验证思考最符合用户操作体验的流程。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
关键词：横条、多个菜单选项
这个图标的样式简洁易懂，通常位于网页和App的上下角，用来告知用户这个按钮之外还有更多内容可以探索。
当产品有多个菜单选项时，考虑使用汉堡图标来显示，但尽可能避免在桌面视图中使用。
关键词：垂直、内嵌菜单
通常位于屏幕或窗口的右上角或顶部，是用于打开带有附加选项的图标，打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。
关键词：水平、内嵌菜单、web
水平三点式菜单同样常位于屏幕或窗口的右上角，用于打开菜单或显示相关项的操作。
因为图标样式是水平的，所以更容易在web上或者在表格等水平方向中使用。
关键词：子分类、子功能
九宫格菜单通常用于打开同一产品中包含不同子产品或子功能，可以在它们之间快速切换，此图标常位于产品主页的右上角。
关键词：过滤、排序
过滤式菜单由三行不同长度的线段水平叠放而成，是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用，或者与全局过滤器结合使用。
关键词：样式特殊、时尚感更强
作为汉堡图标的替代品，与显示列表菜单的目的相同吗，但是这些样式我们平常见的可能会比较少，更常用在充满现代感、时尚感和艺术感的网站上。
最后
不同的样式可能代表着截然不同的设计目的，常思考这些小而精的细节，是保证产品体验提升的关键。
参考：uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80ac
原文地址：Clip设计夹（公众号）
作者：Clippp
转载请注明：学UI网》这些不同类型的菜单图标和用法，我做了个总结分析！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
选择错误的图表类型，或默认为最常见的数据可视化类型，可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容，可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。
当使用水平条时，在基线的左侧绘制负值，在右侧绘制正值。不要在基线的同一侧绘制负值和正值。
删数据起点会导致曲解。在下面的例子中，看左边的图表可以很快的得出结论，值B比D大3倍多，而实际上，两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。
对于折线图，总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势，因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。
折线图是由线连接的“标记”组成，通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的，并且对于较短的时间间隔非常有效，但当数据更新不频繁时，这可能会导致混淆。
例如: 使用折线图来代表年度收入，如果数据是每月更新的，则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值，而在特定时间实际的收入数字是未知的，所以可能会产生误会。在这种情况下，使用垂直条形图可能是一个更好的选择。
平滑的折线图可能在视觉上很好看，但它们错误地反映了背后的实际数据，而且过粗的线会模糊真正的“标记”位置。
通常，为了节省可视化空间，当有两个具有相同度量但大小不同的数据系列时，可能倾向于使用双轴图。但这些图表不仅难以阅读，而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例，只是浏览图表，然后就得出了错误的结论。
饼状图是最流行的也是经常被误用的图表之一。在大多数情况下，条形图是更好的选择。但如果你决定做一个饼状图，有2个比较好的建议:
1）不要超过5-7片，保持简单
2）可以将额外的最小段分组到“其他”切片
如果没有适当的标签，无论你的图表有多好，它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。
将数据放在切片上可能会导致多个问题，在可读性问题上和窄切片上都会有挑战。相反，添加黑色标签能清晰的链接到每个部分。
在确定饼片秩序时，有几种常用的方法:
1）将最大的切片放在12点的位置，然后将下一片切片顺时针降序排列
2）把最大的切片放在12点的位置，第二大的放在顺时针相邻位置，第三大的放在11点的位置，其余的切片按顺时针降序排列
同样的建议也适用于其他许多图表。不要默认采用字母排序，将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图)，以确保最重要的数值占据最突出的空间，减少眼球运动和阅读图表所需的时间。
饼图通常不是最容易阅读的图，因为比较相似的值非常困难。当我们把中间部分去掉，创建一个圆圈图表时，我们腾出了空间来显示额外的信息，但这样牺牲了清晰度，极端情况下，图表就会变得毫无用处。
不必要的造型不仅会分散注意力，还可能导致对数据的误解和用户的错误印象。你应该避免:
1）3D元素，明暗面
2）阴影、渐变和其他扭曲的多彩色
3）斑马图案，过多的网格线
4）过度装饰，斜体，粗体或衬线字体
颜色是有效的数据可视化的组成部分，在设计时考虑以下3种颜色类型:
一个定性调色板最适合显示分类变量。为确保易用性，所分配的颜色应该是不同的。
连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合，可以创建一个连续的颜色集。
发散调色板是两个连续调色板的组合，中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。
看看一个方便的工具- [ColorBrewer]，它可以帮助你生成各种调色板。
根据美国国家眼科研究所(National Eye Institute)的数据，大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。
1）在调色板中使用不同的饱和度和亮度
2）把现有配色去色然后检查对比度和可读性。
确保排版能够准确传达信息，帮助用户专注于数据，而不是分散用户的注意力。
1）选择易读的字体，避免衬线和装饰过度的字体
2）避免使用斜体、粗体和全部大写
3）确保与背景有高对比度
4）不要旋转文字
这个简单的技巧将确保用户能够更有效地阅读图表，而不会扭伤他们的脖子。
如果你的任务是在web和移动项目中添加交互式图表，你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现，并能提供大量交互想法。
帮助用户通过改变参数，可视化数据进行探索。然后得出结论，最大化价值和洞察力。在下面的示例中，你可以看到IOS Health应用使用了各种数据表示的组合。
本文翻译已获得作者的正式授权（授权截图如下）
原文地址：medium
作者：Taras Bakusevych
译文地址：彩云译设计（公众号）
译者：彩云Sky
转载请注明：学UI网》天呐，国外大佬总结的这20条B端图表设计原则，简直太实用了！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在色相环上采用邻近色搭配，颜色多以明亮的高饱和度为主，使得页面更具时尚活泼感。
邻近/互补色在网页的运用
邻近色在APP中的运用
混合质感图标中的运用
通过简单的几何图形，主要是圆形、正方形、三角形等；加上混合模式的质感，给人一种高级感。加上透明度、叠加的光影，简单的几何图形背景呈现出空间感。图片上通过运用一个单色渐变，搭配方形的重复色彩叠加，给我的视觉感受是有层次的、立体的空间感。
几何图形在海报中的运用
色彩叠加在APP上的运用
这样的几何图形我们在设计网站上经常可以看到，通过重复几何图形的组合加上混合模式的叠加，在设计上别具一格。同时让我们的设计多一种表现手法也增加我们的行业竞争力。
色彩叠加还可以运用在引导页、闪屏页面。通过叠加、柔和的过渡，整体呈现的视觉效果还是很时尚、符合主流的设计趋势。
明亮的颜色搭配混合模式和不透明度，出现出另外一种效果。
google 家的品牌升级，我们也看到了最新的趋势，运用 google 经典的颜色，搭配混合模式的渐变，同时具有品牌识别性。
1.选择深色的颜色（#0A00BC），画一个圆角，填充蓝色渐变背景。
2.画一个圆，填充红色的渐变，模式选择提亮的效果，剪贴蒙板在圆角背景上。
3.画第二个大圆，填充红色的渐变，模式选择提亮，透明度调到70%，剪贴蒙板在圆角背景上。
4.画第三个圆，填充红色-黄色的渐变，模式选择正常，透明度调到85%，剪贴蒙板在圆角背景上
6.我们看到示例图交叉处是黄色渐变，把第三个和四个圆进行复制，选择交集，生成一个交叉的图形，把这个交叉的图形改为黄色渐变，模式改为加暗。
7.最后一步，右下角的高亮，通过蓝色径向渐变，调整到我们满意的效果即可，模式选择变亮，透明度90%。
原文地址：我们的设计日记（公众号）
作者：sky
转载请注明：学UI网》苹果Google都在用的设计趋势，简直太绚丽了！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
场景举例 1：实例名
包括任务名、文件名、表名、系统名等等。
典型案例：完整字段如下：
company_sales_record_20150116
company_sales_record_20150117
缩略结果：
场景举例 2：系列名称
开头统一的系列长名称，通过后半部分来区分的字段。
典型案例：阿里集团的 BU 完整名称如下：
口碑-本地生活事业部-北方大区-北方运营
口碑-本地生活事业部-七星大区-东南运营
缩略结果：
原文地址：Ant_Design（站酷）
作者： 林叶
转载请注明：学UI网》B 类产品设计细节：文本缩略
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用家电创造生活价值，把对的家电与消费者的核心需求联系在一起。针对于我们全新的品牌主张与不断年轻化的核心购买用户,在整个画面的视觉层面上表达出我们的设计语言：生活焕新，家庭，时尚有态度。
本次618项目在营销层面上，希望借助618购物狂欢这一节点，挖掘各圈层用户对家电618的期待，激活焕新需求，激发用户兴趣，刺激下单的目的。
在设计层面上，首先实现营销方向的焕新、高端及年轻化。在营销方面侧重多元化创新营销助力焕新生活和跨界营销合作线。其次在集团模板的基础上做贴合家电品类的差异化设计，第三通过场景化影响用户心智，做用户看得懂的设计。
消费者人群-Z世代
Z世代的审美从小受到信息浪潮的洗礼，“颜值即正义”他们更加追求个人幸福感，拥有鲜明的个性，勇于表达自己的观点，从这些性格特征映射到消费特征，所以他们更加喜欢有文化、有故事、有性格的品牌，非常愿意为品牌买单、为兴趣买单，追求及时行乐；个性化、多元化成为他们的主要人设标签；
概念脑暴
为了进一步提升家电品牌焕新理念在Z世代中的好感度与传播度，根据不同的家电用户群体（中高端用户、家装用户、女性用户、男性用户、年轻粉丝用户），代入主人公居家场景切换视频的设计理念，通过分析群体共性 场景故事包装、动效印象加成让互动变的更有趣、更有温度。
主会场
家电618主会场针对于我们Z世代的用户群体，创造了一个年轻化的人物形象，此形象也是搭在我们整体视觉创意的心智锚点；视觉创意设定了客厅，厨房，卫生间，三大日常展现家电商品家居场景，结合我们的人物形象，通过三段分镜动效的表现形式，希望能够给我们的用户带来沉浸式的环境共鸣，从而给用户带来全新的购物体验。
分会场——IP联盟
IP会场是通过小鸡彩虹为载体，号召百大家电萌物联合传播，在大促期间建立高颜值萌物的活动心智，视觉上打造萌趣味性风格。通过站内外联动传播，整体视觉风格统一。促成IP联盟活动的前期流量铺垫与品牌心智的认知。整体视觉创意采用了IP形象彩虹小鸡，整个视觉结合618视觉模板组成引导视觉中心点，萌趣小鸡的形象吸引视觉，以此激发（女性、颜值爱好者、Z时代）三类人群的关注，渗透萌物圈，表达出家电也可以很萌的态度。
分会场——星推官
以集团主风格为核心，保证整体品牌一致性，以明星作为流量会场，背景星星设计元素，渐变质感呈现，突出星推官主题。此次活动初期分析了去年1.0的不足，进行视觉上的优化，整体综艺视觉感更强，页面重点模块进行了交互上的创新，再用户学习零成本的情况下，体验感得到了提升。
分会场——极速焕新家
焕新家是家电第一次与综艺合作的项目，由京东家电独家冠名与东方卫视的强强合作，挖掘各圈层用户对家电618的期待，激活焕新你的生活需求。焕新家的活动视觉不同于618其他的会场，是剪辑整合了综艺的宣传片视频，与综艺节目高度契合，传递用户心智。
家电今年618整体的视觉设计相较之前，技术上应用了当前一些比较流行的软件工具与设计技法，从用户圈层维度划分，打造了5大全方位覆盖家电用户人群的会场。
从故事场景代入，再到情感化心智打造，设计表现力有过之而无不及，通过多场景，多维度，多样式的玩法，引发用户参与刺激抢购共鸣，最终达成618“焕新你的生活”的创意心智情感表达，后续我们会从大促的体系化建设与模块持续的AB测试入手，通过数据驱动设计，不断深挖家电用户对于我们整个618活动的价值体验。
原文地址：京东设计中心JDC（公众号）
作者：吴晓菊 等
转载请注明：学UI网》3C Design-618项目复盘总结家电篇
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一个优秀的设计不仅要解决正确的问题，同时也是给用户创造积极的情感。在过去，实体产品可以通过人类的五感来创造情感体验，但对于如今的数字化产品来说，这似乎很难达到，因为只是在屏幕上进行枯燥的交互来获取服务。
所以，数字化产品设计师们需要更深入的理解每种类型的情感，以及创造它们的心理学原则。
根据唐.诺曼（Don Norman）的研究，人们对一个物体产生情感有三个层次：本能、行为和反思。
本能层: “用户想要的感觉是什么”
行为层: “用户想要做什么”
反思层: “用户想成为什么样的人”
在第一层，用户将通过视觉和与产品的交互设计中产生情绪。因此，这是UI设计师擅长发挥的地方。除了美学和基本的平面设计原则外，下面是我在工作中经常应用到设计中的心理学原则。
人类的眼睛倾向于将相似的元素连接成一个组，而大脑会认为这些元素都有相同的目的。
因此，在设计具有相同功能和内容的界面元素时，就应该要保持一致性。（彩云注：这也是为什么要保持一致性的理论解释）
应用场景: 导航、控件、卡片、banner、内容、分页
人眼会将连续的元素视为一组。这一定律与对称性和相似性非常相关，通过在一个序列上设计相似和重复的元素，我们可以将用户的视线引导到我们想要的方向，它能使得阅读信息更加连贯和清晰。
一点点的切割是在暗示用户，这里还有更多的内容等待你去查看。
应用场景: 菜单、列表、排序、轮播、服务进度
当看到一幅不完整的图像时，大脑会依赖之前的经验进行填充。
这是图形和logo设计中常用的规则，但是在产品设计中，我们也经常把它用在图标和Loading设计中。
应用: 图标、loading、数据可视化
这是UI设计中的一个基本规则，因为人眼会将任何相邻元素视为一个组。
在设计的时候，我非常注重使用间距来将元素组合在一起。我通常使用大空间来分隔大内容组，然后使用小空间来分隔大内容组中的小内容组。
应用场景: 导航、控件、卡片、banner、内容、分页
我们的大脑喜欢看到对称和平衡的东西。它是所有设计领域中使用最频繁、最安全的法则。它帮助我们创造一种稳定和秩序的感觉。
当设计需要简单和谐可视化的产品时，我经常使用对称律。当用户需要关注重要的事情时，它也能让他们感到更舒服。缺点是，如果过度使用，产品会变得乏味和单调。通常，我用标题或CTA按钮来更好地强调和号召行动，打破画面的单调格局。（彩云注：CTA是call to action的缩写，中文通常翻译为行为号召。可以理解为引导用户点击的行为都算是行为号召）
应用场景:控件，banner，强调内容，产品显示，清单，导航。
这个定律是关于人眼倾向于注意脱离背景或组合的事物。
我使用这个规则引导用户的眼睛看到重要信息。它通常是一个卡片设计与一个轻投影在背景之上的层。此外，构建整体也是应用这一规则的一种方式。
应用场景：卡片、内容、列表、服务、摘要
在同一方向上移动的元素被认为比固定的元素或在另一个方向上移动的元素更相关。这个规则应用帮助我们建立组和状态之间的关系。
在制作动画时，我经常更明确地使用这个规则。然而，我们仍然可以适用于许多不同的因素。
应用场景：导航/下拉菜单，折叠，手风琴，工具提示，产品滑块，视差滚动和指示器。
当我们看东西时，我们的眼睛倾向于首先关注最突出的元素。理解这种行为将帮助我们在设计中创建一个“锚点”，从而推动用户查看我们的场景之后的内容。
应用场景:内容、落地页、价格、产品页、banner
（彩云注：维基百科解释为指个人对学习材料或所见所闻的资讯，容易记住最特殊的部分的现象。例如：有一些参考书将重要的资料，以不同颜色或特殊的字体标示出来，就是利用雷斯多夫效应来加深读者的印象。）
这也被称为隔离效应，它表明人们倾向于注意并记住与其他部分不同的部分。这条规则很容易与焦点定律混淆。不同的是，应用此规则的元素通常是独立的，没有为用户导航更多信息的额外功能。
应用场景：定价表、促销banner、不同会员介绍
基于现实世界打造的视觉体验。比如，当我们看一个视频，每个高潮笑话时都有旁白跟着一起笑时，我们会更容易发笑（彩云注：想想《快乐大本营》）。用户会喜欢我们的设计，如果它让他们感觉良好和舒适。
（彩云注：这个理论的意思是说尽可能让用户产生沉浸感，把产品用到真实的环境上，比如大家平时使用的手机样机，把设计的界面放到这些样机中就能够给人直观的感受到应用后的效果，也是这个理论的运用）。
应用场景：产品配图、插图、摄影
有很多研究表明颜色对我们的潜意识有特别的影响。对颜色的看法也因性别、宗教和文化而异。这张彩色心理学海报就足够了（彩云注：感兴趣的可以自行翻译研究下）。
此外，我们不要忘记从早期到现在一直在广泛使用的颜色，这些颜色的使用更符合用户习惯：
红色：错误
绿色：成功
蓝色：进行中
黄色：警告
就像颜色一样，人类的潜意识对不同的形状也有不同的反应。例如:
圆形、椭圆形：传递积极的信息，通常与社区或关系有关。
方形和三角形：带有强烈的信息，通常与力量和稳定联系在一起。
竖线：代表强度、力量或攻击性。
横线：表示平静、相等、安静。
这一理论解释了人类需要视觉和语言信息来尽可能快地处理信息。此外，人类是视觉动物，我们的大脑处理图像的速度是处理文本的6万倍。为了最大化设计的有效性，我们不应该去掉解释性的文字。
（彩云注：根据这个理论，在做作品集时，就应该尽可能的多用视觉化语言，文字作为辅助，对于视觉设计师来说，能用图表达的就尽量减少文字的比重。）
一个很明显的例子就是导航栏。大多数新的应用或具有复杂功能的应用都同时设计了图标和文字标签。
人类的眼睛倾向于看到平行因素比其他因素更相关。我经常使用这一原则对同一屏幕内的两组不同内容进行分类。最容易看到的例子可能是Facebook messenger界面，当帖子并排排列时，消息是平行的。
这一原则类似于格式塔原则中的相似定律，但它并不是完全相似。共同区域原则是通过我们使用分隔线、形状或颜色的方式创建的。
如果一个界面需要用户滚动更多来查看内容，我们应该有一些方法来更清楚地划分它，而不仅仅是使用间距。
应用场景：列表清单、信息流
根据NNGroup UXPin等组织或团体的各种研究，两种最常用的扫描模式是“F”和“Z”。
F的使用最为广泛，尤其是对于内容量大的网站。
Z用于不太注重文本的网站，通常强调在最后的号召行动。
一旦我们理解了如何使用这些模式，我们就可以选择布局并有效地安排元素来实现我们的设计目标。
第一印象是最令人难忘的，积极的体验可以在用户和产品之间创造持久的关系。如果能让用户在一开始就喜欢上我们的设计，就能为我们的产品创造了一个很好的优势。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先，我自己并不是一个典型用户，虽然只有三万多关注，但也算是个 KOL 了。
所以我们还是先看看对于互动较少的普通用户来说，消息页长什么样。
普通用户
页面大部分地方是私信列表，然而很多普通用户唯一的私信也许就是系统消息了，所以这个列表意义并不大。
那四个图标——邀请回答、赞同和喜欢、关注、评论和转发，对普通用户来说，数据会有但不会太多。
原本就不多的数据，被分散到四个图标入口的四个页面里，每次查看起来估计挺麻烦的。
KOL 用户
上面是我自己知乎账号的消息页截图。
私信我用得不多，而且陌生人发的消息我也不一定有时间回复，所以我觉得这个功能真的没那么重要。
那四个图标——邀请回答、赞同和喜欢、关注、评论和转发，经常会显示一个特别大的数字，尤其 99+ 那种看上去没啥意义。
而且我很奇怪为啥赞同和喜欢、评论和转发要合并到一起，这让 99+ 这个数字看起来更没意义了。
我虽然很关心这些互动数据，但是每次得要一个个点开看，就觉得麻烦了。
问题总结
以上这些问题主要来自我的观察分析，顶多再问了问身边的朋友。
如果是工作中的真实项目，最好是搞些问卷和访谈才能更加细致准确一些。
分析来分析去，我发现上面这个问题才是关键。
知乎目前的消息页是强调私信的，然而我个人认为互动更重要，所以这个方案是有问题的。
观察了一下其它 APP 的消息页，我发现有的是私信>互动，有的是私信=互动，有的是私信<互动。
我发现腾讯视频的结构不错，可以解决掉前面分析出来的知乎消息页面问题：
于是我决定主要以腾讯视频为参考，对知乎消息也进行优化。
不论是普通用户还是 KOL 用户，都能一眼看到最新数据变化，评论还可以直接点赞回复。
KOL 用户想要单独查看某种类型的数据，也可以很方便地切换二级 tab。
私信虽然不是默认展示的，但有重要消息的时候，还是可以自动定位到那里，避免用户错过重要信息。
其实原版方案里，还有一些其它问题，例如：动态 tab 是否有必要、私信发送图标是否可以藏在消息私信 tab 里等…
不过由于文章篇幅有限，这些边边角角的问题都不在这里过多讨论了。
原文地址：体验进阶（公众号）
作者：设计师ZoeYZ
转载请注明：学UI网》遇到知乎改版的笔试题，我是这么应对…
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
