最近几年以来，大家能看到B端设计趋势已经越来越火热，在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计，让设计出来的图表高大上，符合业务需求，让业务方和总监对你赞不绝口，本文就必须看完和收藏了，因为实在是太实用！
应用设计越来越依赖数据驱动，对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表，但我们其实可以通过遵循一些简单的规则来改变这个情况。
选择错误的图表类型，或默认为最常见的数据可视化类型，可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容，可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。
当使用水平条时，在基线的左侧绘制负值，在右侧绘制正值。不要在基线的同一侧绘制负值和正值。
删数据起点会导致曲解。在下面的例子中，看左边的图表可以很快的得出结论，值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]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以帮助你生成各种调色板。
根据美国国家眼科研究所(National Eye Institute)的数据，大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。
1）在调色板中使用不同的饱和度和亮度
2）把现有配色去色然后检查对比度和可读性。
确保排版能够准确传达信息，帮助用户专注于数据，而不是分散用户的注意力。
1）选择易读的字体，避免衬线和装饰过度的字体
2）避免使用斜体、粗体和全部大写
3）确保与背景有高对比度
4）不要旋转文字
这个简单的技巧将确保用户能够更有效地阅读图表，而不会扭伤他们的脖子。
如果你的任务是在web和移动项目中添加交互式图表，你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现，并能提供大量交互想法。
帮助用户通过改变参数，可视化数据进行探索。然后得出结论，最大化价值和洞察力。在下面的示例中，你可以看到IOS Health应用使用了各种数据表示的组合。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
当设计师被迫待在家里时，终于能有时间去反思现有的设计并重新创造。无聊是艺术家最大的敌人，他们会尽可能地打破困局。
对我们来说，2021年相当困难。世界上最长寿的猫庆祝了它的34岁生日，这可能是发生的唯一一件好事，顺便说一下，你会在文末看到这只可爱的小猫照片。
那么，2022年的UI/UX设计趋势是什么呢？看看现在的情况，我们已经可以预测未来的设计趋势，就像我们对2021年所做的预测一样（回头看非常准确）。
在本文中，我们将发现：
3D视觉设计师的内卷将会越来越严重
数据可视化的工作将变得越来越重要
服务的移动化还需要做出更多努力
scrollytelling 技术会越来越流行
旧的滚动是无聊的。如果你想吸引注意力，你就需要实现滚动叙事（scrollytelling）。（彩云注：这个技术的核心在于边滚动页面边讲故事）
《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。
它是一种叙事形式，可以在网页和APP上呈现。想象一下，在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地，你会想看到这个故事的结局。它就像一个游戏，带你穿越迷宫。虽然你不能影响它的进程，但却让你感觉自己能参与其中。
2022年，Scrollytelling将会出现在你看到的每一个流行网站上。
另一方面，scrolllytelling让用户真正去阅读内容。你可以用动态文本让他们产生兴趣，比如谷歌的网站 (https://www.google.com/search/howsearchworks/)。他们的团队知道如何让信息看起来更好:
Scrollytelling在用户向下滚动时被激活，因此得名。没有点击，没有选择的麻烦，没有弹出窗口。你似乎停留在一个地方，但通过滚动，把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果，还需要认真思考一个你想要讲述的故事情节。
所以，最好的网站不可能在2天内建成，需要更多的时间去打磨。
IAmBinadam令人惊艳的叙述设计
滚动叙事的项目通常需要大量的时间和精力。不过，这样做的结果是值得的。页面变成“活的”，每一秒都有新的事情发生，所以在阅读时很难感到无聊。
那么移动端APP呢? Pure是一款约会应用（彩云注，这个应用在app store可以搜到，推荐大家安装一个体验一下，非广告），它创造了一种我称之为“tappytelling”的故事(当你第一次点击并打开应用时，它就会被激活):
Scrollytelling是为用户而创建的，用户很喜欢它，不需要到其他页面去阅读整个故事。相反，网页设计的整个故事都是事先考虑好的，并尽可能以最有趣的方式设计出来。
如何在2022年做出一个还不错的企业网站？你不会想告诉用户你是“XX领域公认的领导者，该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。
最好不要用形容词，而是用事实来说明:你有多少分支机构，在哪些城市，谁是你的客户，以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据，你需要让它不仅简单，而且有趣。
数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事（Scrollytelling）紧密结合。以下是IAmBinadam展示数据的方式:
通过去除数据集的复杂性，使信息更容易让读者感知。
不同级别的数据具有不同的大小，这样用户知道应该先从哪里查看
读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大，那些干净整洁的数字带来的正面影响更大。
有些图表乍一看甚至不像图表，这使得它们更加能被注意到
还有一种现象叫做“新冠后遗症”。这是Covid对公司及其员工的长期影响。根据英国国家统计局的数据，2018年，压力和焦虑的平均得分约为2.7/10。自新冠疫情发生以来，得分已升至4.0/10，很少低于这一水平。同样因为大流行，在过去两年里工作量增加了4个小时。
人们压力太大，卷的太辛苦，以至于不愿去看复杂的数据。
设计师做好数据可视化，以保持人们的注意力。记住，复杂的信息通常被忽略，因为读者试图节省他们的时间，更有可能使用滚动按钮。
Illustration by Mona Chalabi
以下是我们推荐的一些表示数据的方式
1）图表和曲线图
2）插图
3）静态信息图
4）互动信息图
Illustration by Ink Factory
一个好的图表，或者任何其他形式的数据可视化，都应该具有在Edward Tufte的“定量信息的可视化显示”中描述的特征。在他的书中，Tufte通过图表解释了好图表的3个原则：
1）展示数据的图形元素与数值总数的比值应趋向于1。简单地说，应该删除一切不必要的元素，保持整洁。
2）充分利用好画面空间。也就是说，需要将数据编排的更紧密
Graph by Hootsuite
3）客观地描述数据。不要使用夸张的图表，可视化数据可以看起来很酷，但真实永远是更重要的。
根据We Are Social的数据，2021年有52.2亿人使用手机，约占世界人口的66%。自2020年1月以来，手机用户数量增长了1.8%(9300万)，而手机联网总数量增长了7200万(0.9%)，到2021年初达到80.2亿。
过去一年，社交媒体用户的数量增长了13%以上。到2021年初，社交网络上已有近5亿新用户注册。根据App Annie的数据，Android用户每天花在手机上的时间超过4小时。2020年，安卓用户上网时长超过3.5万亿小时。
令人印象深刻的数字，是吗？似乎到2022年，为产品做一个APP将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用？有以下几点可供评估：
1）用户主要通过移动设备访问你的网站这是你应该了解的重要数据。
客户和你在一起的时间越长，你就有越多的机会去吸引他们，了解他们的习惯，并给他们想要的东西。（彩云注：这就是为什么各大厂之间都在拼命抢占用户的在线时长。）
2）帮助内部业务流程更加有效。
如果你想要提高员工的工作效率、改进工作流程或增加利润，那么就制作一个可以帮助管理业务流程的移动应用。
如今，像这样的手机应用使企业能够执行越来越复杂和多样化的任务，加快日常重复操作和文档管理。
3）实现一些网站上没有的新功能。
如果你认为APP能为用户打开新的触点，并让用户体验更加友好，那么它就值得考虑开发。问问自己的APP能提供什么新的商业机会？例如，随着疫情的蔓延，许多人开始用上健身APP在家里锻炼。
4）竞争对手做的情况。
要了解竞争对手在做什么，他们是否有APP，能做什么，以及他们是否真的对用户有用。
查看App Store和谷歌Play的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要，那么你就容易被甩在后面。
5）复购率。
一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了，给他们发送一个通知就能完成，成本更低。
在正确的时间提供的报价越有吸引力，人们购买的可能性就越大。
6）促销工具。
有了应用，你就不需要花钱设计和制作实体卡，客户也不需要随身带卡。将促销计划整合到APP，并分享有用的促销信息。
开发手机网站比开发手机应用需要更少的工作量，这反过来可以降低整体推广成本。
这部分是由于响应式设计的出现，它允许你根据打开网站的设备屏幕来调整网站。至于APP，它们必须为许多移动平台单独编写:Android、IOS、Windows等。
一些设计师认为“前端驱动的网络体验”会是2022年的一个好机会，我非常同意!（彩云注：在国内，现在开发小程序的肯定越来越多了。）
我们一开始并没有将其放在首位，因为这并不是一个新的趋势，在很久以前设计师们就已经设计了很多3D图像和动画了。
Cardi B rhymes with 3D
3D技术已经在过去流行了很多年，但它不会很快消失。此外，我们预测3D图形将变得更加多样化和包容。
在过去的几年里，3D艺术和动画已经出现在各种UI设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。
3D当然应该成为2022年最热门的趋势和预测之一，因为与经典动画相比，逼真的3D形状结合动画总是引人注目的。
“从技术上讲，通过3D更容易传达更多内容，因为它比平面图片更接近我们的感知。3D插图更有深度，信息量更大，也更具互动性。"
许多设计师将3D对象无缝地“安置”在2D空间中。它允许创建更有趣的组合，也作为一个优秀的工作方法蕴藏着巨大的潜力。
乌克兰政府网站用3D手模拟了黑客帝国
注意一点：在整合3D图形等重量级内容之前，确保你的应用性能是OK的，能够快速加载所有元素。
Meta的logo既不是2D也不是3D。或者两者兼而有之?这就是即将到来的2022年的莫比乌斯带和薛定谔的猫。
Meta logo的变化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：这个概念在去年简直不要太火，未来几年肯定还会是一个大的趋势，设计师也需要保持关注。跟着趋势走，易于放大自身价值。）
越来越多的公司在网站和移动应用中使用动画，以提高用户的沉浸感和体验，使内容更有趣。
动画是2022年重要的网页设计趋势。2022年，如果没有它，你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和3D动画的结合，2D动画和3D动画的结合。设计师这样做是为了获得不同寻常的风格解决方案，以及提高最终产品的质量。
2022年，动画设计将是品牌市场定位的重要组成部分，想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长，实现新想法的机会也在增加。
1）讲故事动画。
可以通过在界面和用户之间建立情感联系来传达信息。
加载动画Yoichi Kobayashi
2）更有趣的加载。
用户不愿意等待，除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力，还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。
3）光标效果。
用户可以精确地观察光标所在的位置。通过添加智能互动动画，对这个光标作出反应来探索网站。这种效果在21世纪初非常流行。如你所知，流行趋势往往每20年就会重演一次。
4）动态排版
你有没有想过让字母跳舞?
据Statista统计，2020年全球动画市场达到了2700亿美元。趋势是视频，而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问，动画插图的优势是它们非常灵活和多样化。
宝马历史动画
这样的作品通常用于两种情况:
1）用于解释视频
2）电商广告
动画解说的趋势出现在几年前，解说视频清楚地显示点击的位置或公司的项目是关于什么的。
在招聘或商业视频中，用户更喜欢看画出来的人物，而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣，就像活着的人一样。
微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果:它们显示发生了什么，将导致什么操作，下一步需要做什么。
图片来源awwards
动画交互将为你的设计注入活力，并有助于保持用户粘性。关注每一个细节是设计师工作的关键，因为设计中的所有元素都可以带来积极的用户体验。
重要的是要达到元素的和谐，而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色，它们为界面元素增强价值。
微交互有助于页面导航，解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能，以实现特定的行为。
2022年，在线品牌面临着新的挑战，需寻求新的解决方案，其中之一就是动画logo设计。
图片来源Toridori
动画logo主要有以下几点营销优势:
1）吸引注意力。这意味着它们有助于提高品牌知名度。
2）有助于提高SEO。谷歌更倾向于动态内容，带有动态图形的页面更容易吸引用户。
3）在移动端看起来更好。丝滑的动画看起来比静态的logo更有趣。
4）最重要的是展示了历史。静态logo背后的想法正在动画中发展。由于这一点，在几秒钟内，你可以展示品牌的使命，甚至它的价值!
一家洗衣机[公司]的标志(https://www.schulthess.ch/)
现在有很多设计模板，可以很容易地用字体制作一个动画logo:
图片来源Shabello, Bobby Voeten
记住，设计趋势总是在变化的，但是设计的意义不会变。如果你不能深刻理解这一点，那么任何设计趋势的文章不能帮你做好设计。
这是前面提到过的世界上最老的猫。她今年34岁(相当于人的160岁)
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
很多时候既让初入B端行业的设计师感到一丝丝迷茫，因为不同的B端系统也就意味着，它的业务一定就会有所不同。比如CRM系统当中的客户生命周期管理，OA的办公自动化，特定的行业往往都会蕴含着不同的业务类型
而作为设计师，如果只了解设计模式、设计组件，不去分析设计最后的业务诉求，其实是没有任何意义。因此想要通过B端设计指南，和大家一起聊聊B端业务，以及背后所牵涉的具体逻辑。今天就简单聊聊最为常见的 审批
开始之前，还得再多说两句，因为一个系统当中，业务本身就不是独立存在的。因此在去讲述审批的过程，一定会涉及到 流程、权限、表单配置 等一些基础内容，建议可以先做初步了解，再结合文章进行阅读
虽然在说起源，其实我更想给大家讲清楚 审批在B端系统 当中的重要性
审批字面意思是审查并加以批示，通常指对 下级呈报上级的公文进行审查批示，报请上级审批
现如今，任何事情一定都会有分工协作，而使用审批的好处是可以
规范员工行为
提高企业运转效率
系统存档便于溯源
保护环境（毕竟减少了纸张浪费）
当然在不同的阶段的公司，对于审批的诉求是不太一样
小公司：因为审批的决策路径短、流程上都非常简单，但因此就会缺乏规范保障。比如在外出办公时，看似只需要与老板当面进行口头上的沟通即可，但是在外出出现意外时，由于缺乏外出办公的相关证据，员工的权益则很难得到保障
大公司：因为审批的决策路径长，流程上都极其复杂，因此会在多人协作下完成整个流程审批。比如想要申请购买办公用品时，会由 行政、Leader、财务 层层审批，从提交审批到最终落实可能需要十天半个月，但是这样的流程，能够确保企业在清查财务状况时，更加有理有据
审批的演变，就是从最开始的规章制度而来。比如在早期去政务机构办理各种业务时，会让你去填写各种纸质表单。在审核过程中，则需要有各个机关的盖章及批准，而这种形式正是政府对于普通市民的自上而下的管理方式
审批其实是整个B端系统的灵魂，因为在B端系统当中，企业想要使用系统的一大痛点便是 核心的管控
因此你会发现，只要一个独立的系统，一定会存在独立的审批模块。因为B端管理系统当中企业的最终目的，是管理手中的人，而审批便是最为常见的一种手段
审批在如今的B端系统当中，可以理解为它是一组消息，在这一组消息当中会有：“具体的文本、对应的附件、以及照片视频”这些内容都是辅佐 申请人 去讲诉你需要申请的内容
比如我们在申请病假时，往往需要出示 三甲医院所开设的证明，对于这个证明，如何在表单当中出现，你会发现最为常见的便是拍摄证明图片，然后上传到表单当中（这个与字段属性紧密相连，我就不做不过介绍）
审批的这组消息还会有些特殊，因为它非常重要，你可以理解为它是一则“加急消息”会提醒审批人快速的进行处理，同时会告知相关的参与人（处理人、抄送人）审批的进度、并且无论成功与否，都会在系统当中留下 足迹，因此它起到了 “追踪、通知、留存” 三个非常重要的作用，我们首先对于审批进行一个基础的拆解
如果把审批单独拿出来，你会发现审批会牵涉到 发起人、处理人、抄送人
审批的发起人，也是整个审批流程的归属人，他最关心整个审批进展
因为在发起人的角度，创建完审批事项后，可能还需要进入审批页面，完善 后续附加信息、及时了解审批状态、催促审批人的审核、处理驳回意见 等等，因此站在发起人的角度，审批需要尽可能详细的展示 当前审批的状态、完整的审批流程、驳回信息的快速操作、成功信息的必要通知
审批的处理人主要在审批过程做出决策，因此他更在乎的是审批申请内容的信息。比如 审批的信息内容、直接的审批操作、多条审批的管理
当然，在一些大型的集团企业当中，会将审批分为审批「直接处理人」与「间接处理人」（后文以 直处人、间处人 简称）
「直处人」作为审批的第一处理人，也就意味着他的意见至关重要，如果「直处人」通过过后，相对而言整条审批的通过几率会大大增加。通常「直处人」是作为申请人的直系领导居多，因此多数情况下可以理解为直属领导进行 “把关”
「间处人」作为审批的后续处理人，同样在流程当中也十分重要。但在有些情况下，比如一些偏平化管理的企业，「间处人」更多像是“权利”的象征，因为权利已经下放给「直处人」，而「间处人」起到知晓审批以及企业的规章制度要求
审批抄送人主要起到通知对应角色的作用，因为一条审批的出现，会造成诸多影响，假设今天你需要申请事假，如何通知同部门的其他成员呢？
发送即时消息，显得过于简单；每个打电话，又有些麻烦；发送企业邮件，又怕他们没有看到
这时候抄送人会显得尤为关键
通常抄送会有企业流程上管理员配置的固定抄送人，以及发起人选择的自行抄送人 两种类型
固定抄送人 角色通常与管理员配置整个流程有关，他是角色当中 管理员 所配置的重要通知人，比如今天你的请假信息，肯定会告知行政，像这类默认的通知流程，则可以将其设为固定抄送人
自行选择抄送人 则是提供给发起人自行选择，该条审批可能会影响到的相关人群。比如就是发送给同事，让他们知晓今天你不在岗位上，因此自行选择可以增加审批抄送的灵活性
这里肯定会有很多读者会问，我选择抄送人与我发消息给同事，有什么区别么？
看似完全相同，实则有明确的区分
通过消息，将审批内容传达，本质上是你自行将内容发送给对方，对方会对于你这个消息的真实性会产生疑问？你是否通知了
而选择抄送，更为权威，更能体现你这条消息的真实性，并且整个流程都已经由领导进行批准，因此不会存在太大问题
其实审批的本质就是一组消息，而这一组消息当中，申请人 通过 表单配置 去获取需要补充的消息内容，而流程会根据企业所配置的流程方式将这一组消息进行合并转发给对应人，而审批人则需要对这一组消息进行回复“通过、驳回” 来让整个流程继续延续
审批当中，最主要的便是流程。因为你可以通过查看流程图，去了解整个企业的组织架构、规章制度、员工管理方式
串行审批主要是指当一个审核节点通过后，才能进入下一个审核节点。如果节点驳回，则可以根据业务实际需要，配置驳回的返回路径，会有：拨回到发起人、驳回到上一个节点、或驳回之前任意一个节点 重新审批
并行审批是指一个审批节点存在多个角色同时审批，这里会存在两种情况
任何一个人审批通过，则可以进入下个节点，这也就是系统当中常说的 「或签」
所有审批人员通过，才能进入下个节点，这也是系统当中常说的 「会签」
条件审批就是将企业当中的规章制度映射到实际的项目当中，通常就是某个审批内容会根据 金额多少、实际数量 等 进而选择哪个角色进行审批
比如销售人员在申请一个合同审批时，会根据合同金额的不同，审批人也会有所差异
当金额小于8000时，合同直接由财务专员进行审批，进而让流程进行快速审批
当金额大于8000时，合同会由销售主管进行审批，让销售主管能够掌握企业的重要合同
通过发起人选定一个审批事项后，将自主选择后续的审批内容，进而实现审批的后续选择。这是一种较为灵活的审批流程，当企业尚未形成标准化流程时，自主的核心就是当发起人发起一个审批，提交时需要自行选择下一个环节的审批人。而下一个环节的审批人审批通过后，可以选择继续流转到再下一个人去审批，或者结束这个流程
审批的背后，它映射的其实是企业的一条条管理制度，而它的设计一定是要满足企业的实际需求。因为你负责的产品不是为某一家企业提供的服务（定制化产品），并且企业管理制度的变动其实是家常便饭，你需要去考虑一个通用的解决方案，这个解决方案拆解下来会分为三个内容，分别是：申请表单、流程配置、更多配置 进行讲解
审批表单是最为一个“简单”的用户可配置化表单，因为现如今大多数B端产品都是以 SaaS 作为基础（如果是定制化产品 它的审批内容、流程也不会是固定不变的）也就意味着审批表单需要为企业提供“DIY”的方式，通过表单提供不同的字段类型，去构建审批的实际要求
比如在一个选择请假时，年假、事假、病假、婚假 等的要求都会有所不同
如何知道他们的差别，其实可以根据《劳动法》的相关规定 以及 各个其实的实际公司制度，进行个性化的处理
在申请婚假时，需要上传你的结婚证，以证明其真实性；在病假时，需要有3甲医院的病情证明；在年假时，则需要有你的剩余年假天数。而这些特殊诉求，其实都需要在表单当中进行各种定制化表单
当然这只是极为常见的 请假 场景，而在实际业务当中的复杂场景（更多需要将 审批与其他系统关联）一个简单的表单是没有办法进行满足
这也是很多企业会发现，无论是飞书、钉钉、企业微信，都没有办法满足其实际流程需求。又没有办法改变自身流程，只能够自研、定制化 产品，这也是为什么即便各行各业都有了初具规模的 SaaS 产品，但是还是会有很多企业愿意自行研发软件
企业可以根据自身的系统流程，在流程配置当中去定制特定的流程。在这个页面的设计上，需要注意不同参与人的状态，以及复杂流程时如何才能够进行清晰的阅读，因此增加了 颜色区分（发起人、审批人、抄送人）+ 视图缩放 功能
颜色自然不必多说，整个系统需要统一，因此不能够只考虑在管理后台的颜色，是一定要在详情页当中也能过保证颜色的一致。这样才能够满足实际业务所需
视图缩放只是小小提一下，常见的视图缩放会放在左侧，至于为什么，自己稍稍揣摩揣摩
由于流程配置的属性页面会涉及很多表单的复杂逻辑，这个只能够留在我的 训练营的课程 当中进行拆解，这里就不过多赘述
更多配置项则是审批在实际情况下的特殊处理，比如：申请人修改审批的具体时间、能够将审批转发给其他人、出现多次相同的审批人是否去重 等等... 其实就是将审批的设计方案进行“赋能”，去满足更多企业在实际场景当中的需求，感兴趣的同学可以去 钉钉、飞书 了解详情
审批，核心还是提高企业运转效率，如果在审批之间，还需要不同角色私下反复沟通，本质上就失去了审批的意义。而审批本身，就是一个典型的B端产品 从场景到需求，进而研发功能，最后又回归场景，你设计的好与坏，落地到真实的场景当中，试试便知
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
用户体验（User Experience，简称UE/UX）这个词是在上世纪90年代中期，由用户体验设计师 唐纳德·诺曼（Donald Norman）所提出和推广。
定义：用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。
可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品用户体验的核心，不好的可用性会导致用户放弃使用产品。
可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。
指的是用户学习如何与产品进行交互，以实现目标所花费的时间和精力，即用户能否在初次使用产品时完成简单的任务或实现用户目标。
用户在使用产品一段时间后，能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例，用户能否快速的下载想要的东西，在同一系列中，可以快速下载更多的相关内容。
我们常说互联网是有记忆的，好的产品体验是帮助用户去记忆。用户在体验中，要对一些有意识、无意识的行为进行记忆是一个比较大的负担，如果在一些环节通过系统能帮用户记录，会降低用户的负担。比如在搜索、历史记录、浏览记录等。
用户在使用产品时，发生错误后，能否快速帮助用户识别和纠正错误，帮助用户从错误中恢复的能力。如常见的注册登录，当用户属于邮箱格式不对的时候，给出提示，并且告知错在哪里。如果提示语只是："请输入正确的邮箱" 用户可能会疑惑，错在哪里。
满意度指的是用户与设计互动产生的愉悦程度，可以是用户使用产品时流畅的交互和优秀的视觉设计，也可以是用户在产品中得到的满足感。比如sir语音交互，王者荣耀等级（满足感）
产品能否提供用户在完成任务时所需要用到的基本功能，例如P图类软件，用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。
在满足实用性的基础上 针对用户提供不同场景下的功能定制，如美图秀秀，在提供图片美化的同时，针对用户不同的使用场景还提供视频剪辑、视频美容等功能。
用户能够预测到下一步操作或者整个流程的交互，将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。
可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。
物理功能可见性是基于对象的物理外观。在视觉上，这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件，最常使用的就是播放/暂停，上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中，这就是功能可见性。
当信息或者列表过多时区分状态的展示，将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来，会极大地破坏易用性，因为人们将不得不进入一个个邮件详情页当中进行确认，才能获取到原本由徽标提供的状态信息，这样的互动非常低效且乏味。
当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤，后面还有多少步骤，完整清晰的流程展示。如果将这些信息隐藏起来，用户会困惑当前进行到哪一步，接下来还有多少步骤。
强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素（如滚动条、命令按钮和图标等）的设计必须能够为用户提供足够清楚的建议，让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么，以及如何与它们进行交互行为（点击、长按、滑动 等）
给用户及时、恰当的反馈，是体验设计中非常重要的一项原则；对每个用户的操作都应该有恰当的系统反馈（包含视觉、听觉、触觉）。
明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。
当用户产生某个动作时，给予相对应的连接反馈。如大概用户点击某个按钮时，按钮默认的外观与点击后的外观发生变化，结合现实世界的开关去思考（按下 开灯）动作与反馈是连接的，即时的。
希克定律，是1951年由威廉·埃德蒙·希克首先提出的，认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多，做出选择所花的时间就越多，当面临选择的数量增加，做出决定的时间也会跟着增加。
如京东筛选，在搜索结果页会将筛选条件收起，因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单，并且做好归类，用户能够更迅速的作出决定。
费茨定律，是1954 年 由保罗.菲茨首次提出，在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。
T：代表完成移动所需的平均时间
A：代表光标开始/停止时间
B：代表光标移动速度
D：代表从起点到目标中心的距离
W：代表目标的尺寸
简单来说就是指：随着目标的距离增加，移动到目标的时间更长，并且随着目标的尺寸减小，选择目标的时间也会增加。
所以在界面设计当中会遵循越重要的功能，占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。
屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中，所以我们在进行产品设计的过程中，会将常用/重要的操作放置在屏幕边缘处，便于用户操作。
神奇数字7±2法则是1956年由 乔治·米勒 所提出的，根据乔治·米勒的研究，人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。
由于人类的大脑处理信息的能力有限，大脑会将复杂信息划分成 块 和小的单元。如：京东和每日优鲜的分类处理。
人类短期的记忆一般一次只能记住5-9个，所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。
复杂守恒定律是1984年由 拉里·泰斯勒 所提出的，也称作泰斯勒定律。认为每一个产品设计的过程中，都有其固有的复杂性，存在着一个临界点，超过了这个点产品设计的过程就不能再简化了，你只能将固有的复杂性从一个地方转移到另外一个地方。
在产品设计中，会尽量的简化界面。当功能过多时进行一个整合的处理，跳转或者滑动操作。如查看更多或者常见的汉堡导航。
新乡重夫认为遗忘有两种：一种是疏漏，另一种是忘却。他建议采用一些措施来预防产品的缺陷。
防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；比如常见的信息输入状态，未输入置灰不可点，输入变为可点击状态。
微信拍一拍：微信在出了拍一拍功能之后，很多时候点击头像的时候会不小心拍到别人，现在的拍一拍是可以撤销的，在客户端鼠标悬浮上就可以进行撤回，移动端长按出现撤回弹窗，两分钟内有效。
微信朋友圈动态：点击返回图标会出现的弹窗，避免误操作。利用防错原则，可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。
奥卡姆剃刀 定律 ：它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉 （William of Occam，约1285年至1349年）提出。 这个 原理 称为“如无必要，勿增实体 ”，即“ 简单有效原理 ”
不必要的元素会降低设计的效率，不管是实体、视觉或者认知上，多余的设计元素，有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息，可以用「更多信息」来实现。如夸克浏览器，首页只放置重要功能 搜索 和几个整合内容的图标入口。
让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件，在播放音乐之后进入其他的tab，在上面都会悬浮播放/暂停的区域。都能够随时操作。
就是产品的易用性，如果年纪大点的人，也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验，简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内，并且抖音会根据用户的停留时长等推送用户感兴趣的内容。
页面的使用率，当你想要在一屏新增很多内容时，页面的布局就会变得拥挤和区域变小，容易过于干扰用户做出选择，重要功能不够突出等。夸克浏览器首页强化了搜索功能 和几个整合内容的图标入口；uc浏览器首页内容过多，当用户想要使用搜索功能时很容易被其他内容干扰。
前面说到的希克定律说到，当选择的数量越多，用户做决定的时间就更长。做过多的决定也是一种压力，在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示，马蜂窝根据产品属性放置了6个重要的功能入口，便于用户更快的去选择所想要的功能。
最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是：艺术抛出问题，而设计解决问题。
我们设想一个场景，当你在艺术展厅站在一副名画面前，你所思考的是什么？是惊叹画家的画技还是整个画面给你的感觉是一种故事，你会不会思考艺术家在作画时的心情，处境，为什么要这么去画？想表达怎么样的情感？
然后我们再设想一个场景，同样在艺术展厅，你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是 相机 对吧？因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、马蜂窝 — 人性化设计识别文章地点
二、微博 — 社区游戏化设计提升互动率
三、QQ — 通过手势消除未读消息
四、最右 — 情感化设计保护用户隐私
五、抖音 — 深夜提醒贴心的功能
六、网易音乐 — 把分享游戏化
七、QQ音乐 — 歌词沉浸式体验
八、盯潮 — 趣味性banner轮播，增加用户点击
在马蜂窝任意文章中，如果出现地区则可以通过当前页面对地区进行提取
减少用户操作路径，降低产品使用成本
日常在各个平台浏览文章时大家都会遇到在文章内会出现一些如地名、人名、物品等相关名词，此时如果对名词感兴趣则需要切换场景去进行搜索，而马蜂窝在这方面深入洞察到用户痛点，基于旅游社交产品背景下在添加地点直达（包含多个地点）功能，解决了对景点感兴趣的用户使用体验。
根据马蜂窝这个人性化功能，是否可以在不同的产品内进行应用，如在一些游戏社区中所提到的虚拟装备、道具等物品添加弹窗简要说明，帮助新手玩家快速理解玩法、功用等
在微博动态详情中进行长按点赞触发动画
通过游戏化点赞玩法激励用户进行互动，提升互动率
打破传统点赞动画，微博设计动效采用大胆创新的全屏动画并搭配上散发的微表情，在长按与连点两种手势下动效规律不同，消除用户枯燥感，微博作为国内最大社交平台，页面展示上已经形成用户深刻认知，在不影响基本风格上进行彩蛋设计有效的提成用户互动率
在qq聊天页面中对底部消息气泡进行拖动，消除所有未读消息
提升用户操作效率和使用体验
qq作为社交工具，每位用户都会添加大量人、群以及关注各种推送，在这种场景下用户每条消息都去操作需要花费大量时间，QQ把传统的消息已读以一种简单的交互手势作为代替，相对全部已读在操作上更佳便捷
通过qq的这个交互细节，在其他产品场景中同样适用，如一些音乐、电台相关的产品在离开播放页面后播放状态会悬浮在页面之上，如果关闭的话则需要点击暂停或者进入详情后关闭，也可以考虑使用拖动手势进行关闭
在最右登录页面输入密码时ip形象会出现捂眼睛动作
强化用户隐私和心理信任感
日常在使用一些敏感性操作时我们都会注重隐私，如一些表单的填写、密码输入等相关操作，最右在登录页面使用到了ip形象的动作去向用户传递心理上的暗示，这种手法很好的把品牌曝光与体验相结合
长时间刷抖音时会系统会提示，在深夜使用时会支持设置提醒时间
防止用户疲劳使用产品，定时缓解注意力
在使用抖音时大家可能会经常深陷其中无法自拔，往往忽略了时间影响身体健康，提醒机制则在深夜不同时间段进行间接提示，虽然在用户体验中不提倡打扰用户，但在短视频这个场景下如果过渡沉浸便会造成反向影响
在网易音乐对某首音乐进行分享时可以对音乐进行个性化定制，对歌曲进行编辑添加文字、图片、语音等以视频方式呈现
把分享以一种偏游戏化的形式呈现，提升用户分享率
传统分享基本是直接让用户分享到第三方平台，而网易音乐这个设计把分享场景进行多元化处理，以定制音乐罐子为切入点，用户自由编辑个性化处理装进罐子进行分享，是一种视频剪辑融合音乐的一种新玩法，破圈传统枯燥的分享场景，提升用户分享率
在音乐歌词页面中可以支持设置歌词主题
新颖的呈现手段，强化用户沉浸式听歌
传统的音乐产品在详情页面展示了一屏歌曲歌词，面对大量的文字用户在寻找某段歌词时效率不是很高，对大量的字段也极为枯燥，而qq音乐使用了创新的展现形式，把手机主题概念融入歌词中达到新的视觉体验，根据不同的主题对应的动画也不同，大大的提高了用户的视听体验
在盯潮首页banner处对其进行拖动甩出
通过交互玩法提升用户对banner的点击
banner在页面通常点击率较低，用户会默认为广告，在盯潮内滑动banner时会发现banner可以进行拖动，并且松开时会自由掉多，把传统的banner切换做出了可玩性更高的效果，同时这个设计手段也能吸引用户注意力引导用户对banner进行点击
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
具有大量库存商品，或是涉及复杂产品的网站，通常会提供产品类别页面，或者是产品列表页面。 类别页面就像是特定产品类别的主页。他们可能不提供完整的产品列表，但可能会展示一些产品并提供产品子类别的链接。这种页面本质上是用户在进入产品列表页面的过程中经过的一个中间步骤，让用户不用一下子面对海量的分类信息。
Eddie Bauer 在其全局导航中， WOMEN 链接将用户带到了这个传统的类别页面。这些页面通常包含产品照片和营销内容，以及促销子类别（例如SHOP FLANNEL 和 SHOP FLEECE ）的链接。
类别页面通常提供以下组合：
并非所有产品都需要专门的类别页面。 不过这种情况有时候会让用户非常恼火，因为用户需要通过额外的步骤才能查看特定类别的产品。
许多网站完全省略了类别页面，而是将用户直接引导到产品列表页面，在那里他们可以借助过滤筛选的方式来浏览产品。
Bonobos 网站上的 Pants & Jeans 链接不是类别页面，而是将用户直接带到产品的列表页面。这种方法通常效果很好，因为它尽快向客户展示了他们可选的选择。
虽然本文偏向于电商网站中的类别页面的探讨，但实际上这些页面也用于其他类型的网站，特别是新闻资讯和教育类的网站。这些建议也可能适用于这些情况，但最好根据领域对你的设计进行测试，以防你的用户需求与购物型用户的需求不同。
如果您的电商网站所涉及的产品非常复杂，以至于您的许多客户需要经过学习之后才会使用，才能正确地过滤和比较产品，那么类别页面就是一个好主意了 。此外，具有 大类别和大量子类别的网站，有时会提供某种类型的独立类别页面，以帮助用户找到有意义的起点。
不过，你可以决定让特定的产品具有类别页面，而其他的则不具有独立的类别页面。例如，Lululemon 主打的健身服装产品（大多不需要分类页面），同时也销售一种名为 MIRROR 的昂贵的家庭健身产品，后者需要更详细的解释，因此有自己的分类页面。
Lululemon 为其复杂的家庭健身产品 MIRROR 提供了一个单独的类别页面，但并未为其所有产品类别使用类别页面。
类别页面可以对电子产品等复杂产品起到解释作用 。如果用户还不了解产品选项，他们可能还没有准备好单击单个产品。与随机点击不同的产品相比，类别页面为他们提供了一种更有效地了解各种潜在相关产品功能的途径。
例如，智能手表通常会有不同的功能和价格范围，著名智能手表品牌 Fossil 在自己的网站提供了一个类别页面，列出了不同类型的智能手表，并提供「立即购买」、「了解更多」 以及「比较」的选项。
Fossil 的 智能手表分类页面解释了不同型号的智能手表的功能和性能差异
购物型用户可能不需要通过网站来学习服装或食品等熟悉商品的内容和知识。然而，一个拥有大量产品和内容，并组织成许多子类别的网站，仍然可以从类别页面中受益——尤其当子类别页面可以通过独特的图文清楚地介绍产品的时候。这比一长串标签文本更容易方便用户了解产品，此外它还可以为国外的购物者提供帮助。
REI 销售用于各种户外活动的许多产品，从皮划艇到登山用具。如果点击网站的全局导航中Camp & Hike 链接之后，页面跳转到一个包含所有露营产品的列表面，用户可能会不知所措，而且无趣。相反，REI 让链接指向到一个传统的类别页面，而不是列表，这个页面包括：
REI 使用传统的类别页面来帮助购物者在庞大的 Camp & Hike 类别中找到适合自己的产品。
如果你的网站确实提供了传统的类别页面，请同样为用户提供了避免进入这些页面的简单方法，并在他们愿意时，也能直接转到产品列表页面。为你的站点的全局导航，提供指向子类别产品的列表页面（比如使用超大导航 Megamenu ），以及指向传统类别页面的链接。
可能还需要确保搜索结果始终指向产品选项，而不是将购物者引导到类别页面。在我们的研究中，Zappos 会将某些搜索结果指向到以品牌为中心的类别页面，而不是链接到该品牌的产品。
在用户测试的时候，一位参与者看到孩子后很生气，因为搜索她最喜欢的品牌 Sam Edelman 时，她进入了一个具有促销感的传统类别页面，而不是指向她要的产品。对她来说，这感觉像是一个不必要的额外步骤。
「当我进入 Sam Edelman 时，我想看到结果。我不希望打开一个品牌的分类页面。」
当用户在 Zappos.com 上搜索「sam edelman」时，她很恼火地看到一个没有列出任何单个产品的品牌类别页面。
当用户搜索时，他们希望立即看到结果。
为了避免传统的类别页面的缺陷，并提供对产品列表的快速访问，许多电商网站现在在主产品列表页面中，结合混用了少量的类别有页面的设计——例如简短的描述性内容，或简短的子类别菜单。
在女士紧身裤 产品列表页面上，Lululemon 包含了一些传统会在类别页面上显示的元素：营销内容（蓝绿色框标注的区域）和对不同紧身裤样式的解释，以及指向这些子类别的链接（以黄色框标注的区域）。
这种混合呈现方法效果很好，因为对描述或子类别菜单感兴趣的用户可以暂停并阅读它，而不感兴趣的用户可以简单地跳过，直接快速访问实际的产品列表。
一些电商网站在 产品 Banner 旁边加入营销的内容和元素，这些元素传达有用的信息而不会减慢用户的速度，就像传统的类别页面一样。
高级珠宝零售商 VRAI 使用混合式设计，在一些产品列表页面中包含类别页面样式元素。它的一个产品列表页面当中，圆形订婚戒指页面中，包含了带有价格的产品列表，以及解释性的内容。顶部的文字描述了此类产品的一般特征。侧面板提供了有关该类别中所有产品共有特征的说明，以及更多详细信息。
在这个列表页面中，VRAI 包含了促销内容（以蓝绿色框标注）和说明性内容（以黄色框标注）。其中所呈现的图文内容是典型的传统类别页面的特征（没有产品列表）。
一些零售类的网站不使用类别页面，而是提供指向产品列表页面上的子类别的导航链接。这些链接（这是最初发明类别页面的原因之一）让用户轻松浏览网站的产品库存。
例如，Ann Taylor 的 裤子 列表页面显示了不同款式裤子的类别，并提供指向该子类别的链接。这些内容直接显示在产品列表上方，帮助用户了解可用类别项目，并且直接导航到这些类别。
Ann Taylor 的网站在 裤子 的列表页面的顶部，加入了不同裤子款式和合身度的说明和图片，以便用户了解其中的差异。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
老龄化社会已经到来，如何让中老年群体更好地使用互联网产品是当今的热门话题。猫眼演出设计团队负责的一个 B 端项目的使用人群需覆盖到中老年用户，也属于适老化的涵盖范畴。
在前期调研和设计环节中，我们收集了一些相关的文献及案例，并且结合项目实践有所思考和沉淀，在这里与大家分享。
世界卫生组织根据现代人生命状况，提出了人生阶段年龄的新划分。45~59 岁为中年人；60~74 岁为年轻老年人；75~89 岁为老年人；90 岁以上为长寿老人。[1]
随着年龄的增长，人们的身体机能、心理状态、认知能力等都会出现衰退的情况。
适老化设计是无障碍设计中的一种。无障碍设计于 1974 年由联合国组织提出，设计中需要充分考虑具有不同程度生理伤残缺陷者和正常活动能力衰退者（如残疾人、老年人）的使用需求。[2]
目前互联网产品中大多数的适老化设计，主要是集中在 C 端。针对不同障碍（视觉、肢体、听觉、认知障碍）[3]，目前普适的适老化设计原则有：
1. “强烈“好于“柔和”
针对视觉障碍，常见做法有增大字体大小，使用非衬线体字体，提高颜色对比度等。
相比原版的 App，百度大字版 App 和支付宝长辈模式修改了 UI 界面，每个功能模块都用了明亮的大色块、加大字体的设计。
2. 善用“辅助”和“替代”
针对听觉障碍，常见的做法有通过视觉辅助，将声音转化成文字、扩大音量、降低语速等。
Google 安卓系统推出了 Live Caption 功能，可自动将手机上播放的内容转换成字幕。Live Transcribe-「Sound Notification 声音通知」功能，可识别特定声音（比如烟雾警报器、婴儿啼哭、敲门声等），并转化成文字及视觉符号推送至手机，方便听障用户辨别生活当中一些重要的声音信号。
3. “点击”好于“滑动”
针对肢体障碍，减少页面信息的密度，避免使用过小的按钮以及复杂的交互手势。
有研究表明，老年群体在操作时难以瞄准物体，在浏览图片时，由于视力衰退导致无法对焦，他们会不断地用两只手指放大/缩小并反复点击屏幕。[4]
平安银行 App 关怀模式采用卡片拼接的设计方式，将间距放大，保证每个信息有更大的展示空间，同时也放大按钮点击热区，提高操作的准确率。
4. “具象”好于“抽象”
针对认知障碍，避免使用不易识别的图标，尽可能配有图标或图片，简化信息内容。
有研究表明，文字+图标为主的设计有助于提升老年新手用户对新 ATM 使用的学习效率和记忆。[5]
滴滴 App 关怀模式针对老年人进行功能精简，满足高优先级核心诉求，首页只放「一键打车」，操作简单，大字、无广告。
在很多行业中，中老年人因为拥有丰富的经验在岗位上更具竞争优势，譬如教师、医生、律师、会计等职业，工作年限长、经验足是优势，可以提供更好的服务。他们既会使用 C 端产品，也有使用 B 端产品的场景。
随着时代变迁，2015 年世界卫生组织提出了“健康老龄化”理念[6]，倡导改变过去“老了就要退出社会生活”的消极认识。
从“老有所依”到“老有所为”，很多的 B 端场景都覆盖了中老年用户，如何提升中老年用户的办公用户体验是重要课题。
另外我们看下 C 端与 B 端的主要差别：
C 端 App 中时常将简单作为适老设计宣传点。追求简单有一部分原因是，C 端用户是在自己的场域操作且几乎无时间压力。而 B 端产品却相反，业务逻辑复杂，用户要长时间使用而且要求效率。B 端面向企业定制化，针对特定人群、情景，使得在适老化设计中要解决的问题更清晰。
留意生活中的零售行业，如餐厅、商场、药局、便利店的服务人员，往往能看到中老年人的身影。
POS 系统是 B 端场景中使用率最高的产品之一，POS 系统的英文全名为 Point of Sale，中文名为销售时点信息系统。[7]它由硬件与软件组成，根据产业和店面类型的不同，会有功能上的差异。
最近团队参与了一个改造 POS 系统的项目，使用人群覆盖到了中老年用户，提升他们的办公用户体验是其中一个产品目标。
本次项目主要是 POS 界面的更新，完整的 POS 体验不仅有软件本身，有更大的部分在于实体环境与设备，例如：结账区的控件、店面的摆设、扫描枪，读卡器等，而 POS 界面是连结上述元素的节点。
在对 POS 系统进行改造时，我们是按照以下设计思路进行的：
第 1 步:沿用旧系统规则与结构
B 端系统背后往往由成熟的业务场景和复杂的业务逻辑构成。B 端系统往往不是一个从 0-1 全新的系统，而是存在一个被使用了很多年的系统。
在这种情况下，企业服务的每个用户都是趋向于规避风险的。人们可能已经习惯了原有的解决方案（尽管不好用，但是大家都会用了），但新的方案如果不好用，他们的生产力反而会因为不知道如何使用新方案而降低。
这就意味着在做 B 端设计时，现行的方案会产生很大的习惯引力。
当设计师要引入一个新方案时，取消或改变某些功能及操作行为将有难度，不能霸道性更改，取代需要合理性。
设计思路：
第 2 步：理清主要用户与使用场景
想要了解使用者的真实痛点，需从场景出发。
第 3 步:用适老化设计原则去解决场景中的问题
POS 使用场景有很多，这里列举 3 个常见的使用情境：
可能存在的障碍：无法聚焦信息内容，难做到边看屏幕边与顾客交流。
设计目标：确保信息在复杂的环境中，信息内容清晰可读。
设计思路：
1. 放大信息内容
服务至上，POS 使用者在工作时需保持端庄热情的姿态，不能只专注看 POS 屏幕信息而不顾顾客。
内容大小的确立由设备分辨率、环境灯光、字体、视距等因素决定，在复杂的现场环境中，信息内容要清晰易读。
2. 色彩对比度符合 WCAG 标准
参照 WCAG 有 AA 和 AAA 的对比度标准，界面中的信息与其背景间的关系对比度至少在 4.5:1 之上，保证信息易读性。
WCAG 全称是 Web Content Accessibility Guidlines(网页内容无障碍指南)。这是一套由无障碍功能专家编辑的指南，有若干国家在其网络无障碍功能法律要求中明令必须使用这些指南。[8]
一些设计插件可以帮助我们检验色彩对比度是否符合 WCAG 标准，给大家推荐 2 款：Sketch 插件 Cluse，Figma 插件 A11y-Color Contast Checker。
3. 设计有意义的动画
通过动效来表达静态视觉效果无法准确传达的信息，如反馈、引导下一步、状态表达等。好的动效与视觉设计是互补而成系统的。
比如用动画来展示商品被加进购物车的状态，引导下一步操作。
4. 加大点击热区
提高使用者点击操作的准确率和速度。
5. 一屏策略
在这次的项目中存在一个场景，除了销售端服务员看到的屏幕，顾客也会有一个客显屏，即服务人员看到的界面，顾客也会看到。
对于页面信息框架以及布局尽量“一屏”展示，确保双方的视线和注意力一致，便于沟通交流。但这时会有挑战：字放大、按钮放大，信息和功能在一屏上怎么放得下？
解决思路：
可能存在的障碍：在顾客的“催促”下，使用者也会着急，对事物表现出茫然的情绪，定位当前位置困难。
设计目标：追求信息的有效表达和操作的直觉性与效率。
设计思路：
1. 避免使用不易识别的图标
B 端系统中会有些功能很难用一个图标去表达其含义，此时文字+图标按钮优于纯图标按钮，能帮助 POS 使用者更好地理解语意并做出操作。
2. 信息的呈现符合用户眼动规律，操作轨迹越短越好
可运用古腾堡图表法 Diagonal Balance，它由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出。他发现人们视觉阅读规律，左上角是视觉第一落点区，右下角是视觉最终落点区，右上角和左下角都是一个视觉落盲点，大多数情况容易被忽略。
在进行信息排布时，可根据用户习惯性的眼动规律，将最重要的信息放在左上角，右上角和左下角添加辅助元素，右下角作为整个视觉落点可以展示重要操作。
可能存在的障碍：百忙之中，应变能力下降，容易发生误操作的情况。
设计目标：预防不当行为，提升容错率，反馈要及时有效且清晰。
设计思路：
1. 通过二次确认避免误操作
在产品设计时，要把各种可能性考虑进去，通过模态对话框让用户二次确认来避免误操作行为。
当有重要操作时需告知用户处理结果，状态反馈信息采用的颜色需要遵守用户对色彩的基本认知，如红色代表警示，黄色代表警告、绿色代表成功等。
上述举例的设计原则是启发但不是限制，每个设计提案最后都要经过用户调研，看是否符合使用者的使用习惯，是否真能解决业务与工作中的痛点。
附上总结图：
其实设计到后面会发现，起初为了方便中老年用户使用 POS 运用的设计原则，最终都能给多数人带来很大便利。
这是因为我们每个人在某些时候都会遇到各种临时的无障碍需求。
适老化设计，不仅仅只是为中老年群体做设计，更是一种新的设计思维方式，去挖掘更多普适的场景痛点，来指导我们做方案设计。
市面上很多适老化设计方法为 B 端产品提供了借鉴，但 B 端产品不能为了适老而适老，理清相关工作情境和要解决的问题很重要；不能霸道性更改，取代需要合理性，因为 B 端产品现行的方案会产生很大的习惯引力。
以上是近期对 B 端引入适老化设计的一些思考和沉淀，是开始，也将继续，适老化设计还有很多值得深究和验证的内容。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在 2020 年，疫情最为严峻的时候，B 端这一领域得到了前所未有的关注，而那时，身为 B 端用户体验设计师的我，也曾总结过，当时 B 端设计的诸多趋势，比如：
多端需求：即桌面端、平板端、移动端的设计形式
设计中台：拥有更为统一的设计平台，与这两年讨论较多的设计资产相同，都是起到快速协作的作用
随着 2022 年的到来，B 端行业又会迎来哪些新的机会？今天我们就从整个的 B 端入手，回顾一下 2021 年的设计形式，展望一下 2022 年的设计趋势。当然趋势完全是我自己个人主观理解，仅供参考，如有异议，以你为准~
完整的趋势，我们会分为视觉趋势与产品趋势：
虽然 3D 化的视觉风格早已到来，但是在 B 端市场上，3D 风格在此之前依旧表现的十分克制。随着 C4D、Blender 这些 3D 建模软件的不断普及，再加上互联网上关于 3D 建模教程的增多，你会发现 3D 风格的视觉表现，是一个 B 端视觉设计师的基本要求。
而 3D 风格用在 B 端软件当中，会有两个使用场景：
图标
因为在 B 端产品当中，图标本身就是非常难以去表现，比如“物联网，大数据”，许多抽象词汇很难通过一个具象的事物进行表达，而在企业官网当中，在视觉表现上的要求又十分的高。因此你会发现，在视觉风格上的选择，往往只有 3D 图标 + 插画这一条路。
并且 3D 图标的使用场景不会太过于局限，也可以用于产品的工作台、运营营销工具箱等页面，因此 3D 图标的出现，它的应用场景也会相比之前要更加的广阔。
可视化大屏
大屏设计也在不断的“内卷”，因为传统的 2D 可视化大屏所搭建出来的大屏已经满足不了企业的野心， 像 DataV 腾讯云图 ，大家都在朝着 3D 风格，炫酷的方向进行延展，因此也就会导致 3D 的视觉风格需求激增，而 3D 建模仿佛就是大势所趋。
虽然新拟态是在前两年的产物。这个设计风格背后，遭到了很多设计师的质疑与排挤。但是随着这个风格的不断成熟，感觉它在 B 端视觉领域（特指的是官网 ），是非常受欢迎的，因为整体的风格，与官网的设计形式趋同。
同时作为 B 端产品的官网，其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作给出的真实反馈，而使用了新拟态的官网按钮，给你的反馈非常真实。
这里安利一下腾讯云的首页官网，大家就会发现在设计风格上大量的采取了新拟态元素，并且配合 3D 风格的图标，以及毛玻璃材质的设计，让它的设计瞬间加分不少。
在去年，设计系统迎来了一波发展的高峰期，随着字节、腾讯，三大设计系统（Arco Design、TDesign、Semi Design）的开源，其实是给我们很多 B 端设计初学者，有了更加完整仔细的 B 端入门教程。
清晰的讲解了每一个组件的使用方式，以及注意事项，仔细阅读这里面的内容，其实就是 B 端设计的入门学习。而未来，国内的环境，开源的系统也会越来越多，大家可以针对这几大类不同的设计系统进行对比，或许会有一番收获。
这里的超级 app 可能和大家潜意识里的支付宝、微信这些软件不太一样
在 B 端行业，随着疫情的不断扩散、再加上两年时间的发展，很多 B 端产品的功能架构都出现了一个现象，产品的功能开始变得非常拥挤。因为 B 端软件的核心价值其实就是靠着一个又一个功能去累积，也就意味着随着 B 端产品的发展，功能模块在不断的累积，导致在设计层面，这样的现象变得更加严峻。
你会发现左侧的导航菜单已经完全没有办法装下这些导航内容，而这一现象也反映在很多产品当中，比如我了解的飞书管理后台、薪人薪事 等等诸多 B 端产品，它们在整个导航内容上，已经增加到一级导航 15+ 、二级导航 40+ ，这无疑会开始对设计师的能力造成巨大考验。
面对这一情况，许多导航菜单都将会迎来前所未有的挑战，最近也在深入研究导航菜单过多时的解决办法，发现了一些新的导航菜单设计方法，有机会咱们重新梳理一下导航菜单的内容，将 B 端设计指南文章进行更新。
低代码定制化
低代码一直是我关注的一个领域，先给不明白低代码的同学简单科普一下。
低代码，一种快速开发应用的软件，将通用、可重复利用的代码形成组件化的模块，通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码，类似用“乐高积木”的方式来开发。
在国外有很多著名的低代码成功案例。Outsystems（国外非常出名的低代码平台）帮助施耐德电气在 20 个月内推出了 60 款应用程序，开发过程加速了两倍；在 2012 年即将推出 Model S 之际，特斯拉放弃了 SAP 的 ERP 产品（可以思考一下为什么），改用低代码开发平台 Mendix，用 25 个人四个月时间自建 ERP 系统。
去年，低代码平台，也有很多新产品面世，其中就包含：
因此你会发现，其实低代码就是在解决一件事，围绕着某一个业务场景，通过平台的持续完善优化。让所有的功能都能围绕这个业务展开，其中包括：权限、时间轴、流程、表单、公式等等，能够解决很多特殊的业务场景。而低代码会涉及到设计思路上的转变，以及低代码编辑器的出现，如何去设计如此复杂的配置流程，如何让用户能够快速上手，如果你能够有比较完整的思路，这些都会成为我们设计的新机会。
行业细分
随着互联网市场的不断发展，用户会越来越关注产品在自己行业的应用，比如 CRM，其实只是一个笼统的称呼，现在 CRM 市场又会分为 SCRM、运营 CRM，等诸多产品。
SaaS 类的平台也出现了负责从虚拟主机和数据库层面入手的 iPaaS 以及从应用和数据层面入手的 aPaaS。
即使是大家经常使用的 钉钉、企微、飞书，它们也在各自的领域有所擅长。
因为 B 端产品，在底层逻辑上是不能允许趋同的产品出现，如果你和别人的产品一样，其实是没有办法在目前的市场上立足。因此你会发现，虽然产品形式都会比较相同，但是 B 端市场十分广阔，大家都在去寻找自己产品的差异化。
当然市场是瞬息万变的，这里也只是简单聊聊我自己的看法，希望对你有所帮助。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
B 端产品主要是 Web 端产品，空间大、操作多，内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系，从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。
格式塔主要包括 7 个基本原则：
今天我们就来总结下，格式塔原理在 B 端产品中是如何应用的？
我们先看 2 张截图，分别是不同分辨率下的界面效果。
可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。
当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。
相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。
例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。
通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。
IBM、苹果的 Logo 设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。
在 UI 设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。
另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。
用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。
下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体，而是理解为两组信息。
在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。
例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。
通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。
特别是 B 端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。
主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。
当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。
而 B 端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。
共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少，我没有找到合适的案例解释这个原理。
在移动端产品中有些应用案例。比如 iOS 系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。
虽然 B 端产品没有 C 端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。
格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
提到轮播首先可能想到的是广告，我们经常在移动端首页或网站首页会看到各式各样的轮播banner，不管在移动端还是网页上通常点击数据都是非常差的，本篇文章带你深入了解banner轮播。
如果需要设计一个轮播，我们应该考虑哪些因素？如何让轮播更具有价值？如何让轮播的体验更好？如何避免轮播常见的问题。
本篇文章通过以下几点探索轮播的特性，预计阅读20分钟
1、用户真的使用轮播吗
2、轮播的轮换形式
3、轮播的进度展示
4、轮播定位
5、轮播的切换
6、对轮播进行分类
7、使用缩略图进行预知
8、轮播异形化
9、轮播时间
10、总结
用户是否对轮播有感知，这个则需要根据不同的场景进行判断，包括每个产品中的每个轮播对用户用户的定位也不相同，常见的应用场景品牌曝光、活动营销、产品展示，每个场景下相关的数据也不相同。
促销轮播banner
品牌推广轮播banner
产品介绍轮播banner
同时还有个关键因素，轮播的占比，这里以pc端为例若是产品是以品牌效应吸引用户的，大多轮播是以大的屏幕占比为主通常会占首屏的50%，如果是以营销、内容为主的产品，轮播通常以16:9、7:4的常规比例进行展示。
用户在使用产品时会默认忽略轮播区域，一般轮播都会有自动轮换机制，一定时间后自动轮放下一张banner，那么每当页面上进行轮播时便会吸引用户进行关注，效果上会有一定的提升，所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。
还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。
如果banner是作为内容传播希望用户通过banner了解内容，那么则要避免放在最后一位置，对于用户而言最后一张轮播路径过于长，并且用户很少会手动滑动banner。
国外一家公司在针对轮播中进行了相关的研究测试，随着页数的增加用户的点击逐步下降。
那么如果想让产品中的轮播更具有效果，则需要根据不同的场景设定策略达到目的。
不管在移动端还是手机端，轮播都有各种交互形式和尺寸，以pc为例在交互上会多样化一些，常见的几种则是通过滚轮滑动、通过点击切换两种。
如下图某艺术网站，它则是通过鼠标滚轮进行切换轮播banner，并且banner的占比也是铺满首屏，这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点，同时也符合用户目标。
在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换，并且占比也是铺满首屏，在医美领域用户更关注美感，而轮播形态也是符合用户的心理预期更加沉浸美观。
而在移动端轮播的形式就比较统一，大多都是自动播放+手指滑动进行切换。
在网页中轮播都会有当前的定位点，许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标，不用一张一张切换，但是在有些产品中会忽略这一点，设计中会做的非常小导致用户在点击上可用性不太友好，如下图中的banenr进度点设计上过于小导致点击上有些阻碍。
如以下网站去除进度定位的方式，通过缩略图预览来告知用户下一个banner的内容，空白区域也可以添加缩略图引导介绍等关键信息，帮助用户提前预知在体验上相对较好。
以下国外某网站在进度定位的设计上采用了标签文案方式进行设计，能够帮助用户更加全局的了解banner内容
定位主要是用来指示当前轮播的进度，像上图中讲的便于用户更加全局的观看banner的张数和当前进度。
以下网站的设计中则把定位与进度相结合，进度条展示该banner预计多久会切换下一张，对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。
以下是某个国外网站，不管是pc还是移动端都在轮播底部添加了水平条，告知用户当前位置
随着市场上产品同质化严重，产品的竞争力也更依赖体验，在下图中的数据可视化的网站上，在进度条上就利用了产品的特性以饼状图的形式进行展示。
在刚才上面举的例子中很多优秀的网站在设计上都很有创新性，但是需要注意一个点，在轮播中不只有自动播放，还需要考虑用户手动切换，因为在实际用户浏览中可能会对产品的播放时间达不到预期，此时则会使用手动切换，除去可点击的进度点，还需要上一张和下一张的入口切换。
在此基础上需要注意，在处于最后一张banner时，下一张切换还能不能点击，第一张时上一张切换还能不能切换，这个取决于产品特性和轮播张数，如果轮播张数过小的话则需要进行循环播放，如果过多的页数则第一步和最后一步不可点击。
上一张和下一张的距离远近取决于banner的大小，如果轮播banner占比较大时则需要考虑用户的操作时长，距离越短时间越快，为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出，便于用户寻找。
如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大，保持视觉平衡，因为小区域banner用户能够更加全局的观看，在使用上不会犹豫。
反观移动端在轮播中除了展示banner进度外很少展示切换按钮，移动端更加依赖手势交互。
当轮播banner过多时利用标签进行分类，用户通过点击标签进行查看相关的轮播组合。
此方式更适合一些电商平台、新闻网站这种内容过多的产品
如下图国外社交媒体网站则使用了标签进行分类，此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。
在banner首屏中，显示的内容越多，越能激发用户进行点击，像上面讲过的农业产品网站就使用下一张预览图的形式进行展示，当然不仅局限于这种形式，如下图中的餐饮网站把所有的轮播banner展示给用户观看。
相对于缩放图，图标展示效果上也较好，空间占用更少，使用这种方式需要谨慎，对图标的识别性要求较高，我印象中能够使用的这种方法的网站是苹果官网，让产品抽象化展示。
在移动端也存在这种设计手法，但是基于分辨率原因移动端的缩略图展示过少，最常见的如下图中的马蜂窝和企鹅电竞。
轮播最大的缺陷则是像刚开始讲的用户会默认为广告，对此可以使用个性化设计突破用户心理障碍，使轮播banner更具备亲和力。
如下图中的数码科技网站，利用产品与背景的结合营造出一种功能性的展示。
再例如下图中苹果官网入口，结合百度的定制化功能在大搜中进行个性化处理，把常规的banner轮播以功能卡片形式进行展示，同时卡片承载产品动画引导用户进行点击。
苹果官网进入后随意点击产品介绍页后会发现，苹果把轮播结合鼠标滚轮营造沉浸式观看，每个屏效内都展示产品一个功能特点，打破传统banner的展现形式。
自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级，如我们平常使用产品时会忽略banner广告，我们会更加关注移动中的东西，特别是在移动端上通常是banner进行轮播时才会关注。
谷歌设计团队曾对banner轮播的时间进行测试，测试结果得出5s-7s的轮播时间最佳，在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。
如下图谷歌商店的轮播时间设定在6s。
同时还需要注意，在自动播放的过程中如果用户鼠标hover上去后，则需要判定播放暂定，避免用户错过感兴趣的内容。
本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍，在实际产品中轮播有很多可用性上的问题存在，我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com