众所周知，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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

我们每天都会收到很多应用软件推送的短信或者push消息，它们总会推送各种消息吸引我们打开APP。鉴于我每天都要手动清除这些通知消息，并且有时候打扰到了我的生活（午休的时候被推送消息吵醒），除了微信和工作软件外我基本关闭了APP消息通知，下载新的app也会选择不开启消息通知。

消息通知能提升用户活跃度，但是推送过多的消息对用户来说是一种信息负担，也打扰了用户的生活，用户轻则关闭消息通知，重则卸载应用。每天接触这么多消息通知，大家有没有想过他们是怎么推送这些消息的？

不管是to c 产品还是 to B 产品，消息推送是运营必不可少的一部分。to C产品在产品运营环节通过消息推送，能提升用户活跃率、留存率，提升业务转化率，to B产品通过消息推送能提高工作效率，及时知晓业务问题（毕竟用户只会在工作需要的时候使用系统）。

近期我在做crm系统移动端的版本时，销售反馈系统推送的消息太多，打扰了正常工作，他们觉得很烦，表示都不相干收到这么多消息通知。接到反馈后，我盘点了系统推送的所有消息，发现消息类型多达20几种，并且集中在周一上午10点推送，导致销售短时间内会收到十几条消息。对此，我把盘点出来的消息进行筛选，精简了通知数量，优化了推送策略，优化后销售的满意度和消息触达率都高了许多。

我们不能把消息推送看做是一个简单的功能，要有一个系统性的思维，从盘点消息项、制定推送策略、设计消息文案/内容、建立推送任务、选择推送渠道、筛查有效用户、消息存储等各个阶段流程，都包含了很多因素需要我们仔细考虑的。

本文将以系统通知消息为例来介绍消息推送功能。

一、简述消息推送

1、通知来源

告诉用户消息来自哪里，谁发送的，让用户对消息内容快速建立认知，同时增强用户信任度，避免认为是垃圾消息；

2、触发条件

什么情况下会推送这条消息，如任务到期没有完成。

3、推送时间/频率

什么时候推送给用户，多久推送一次

4、通知对象

消息应该推送给谁，谁会受到消息，可能是系统中的全部成员，也可能是某个部门，或者某个人。

5、推送渠道

怎么样可以把消息发送到用户的设备上，如短信，app通知。

6、消息文案

用户收到这条消息可以干什么，如处理待办任务。

7、操作反馈

用户需要做什么，可以得到什么结果，如收到线索分配通知，需要跟进线索。

二、消息推送策略

推送的消息既不会打扰到用户，又能达到运营目的，我们需要在合理的时间选择合适的渠道推送合适的消息给合适的用户，这句话有点绕但是就是这个意思。

1、列出消息清单

建立推送任务之前，我们要盘点系统中所有的通知消息，列出消息清单。根据上述消息推送描述的几大要素，以下是我在优化crm系统通知消息列举的消息项，

以销售订单和开票明细两个业务对象为例：

可以从以下三个角度来盘点消息项：

1、按通知来源：业务消息（线索、商机、回款、订单、任务等）、系统消息、用户信息等；

2、按触发条件：运营消息（回款预警、商机跟进等）、用户发起、待办消息、系统反馈等；

3、按通知对象：所有成员、部门、个人

我们要列出所有可能用到的消息项，不怕多，就怕遗漏。盘点完所有的消息后，可以按照上述表格列出消息清单，再根据业务目标、运营需求、用户需求、对消息去重、精简消息项，只留下必需推送的消息类型。

2、确定通知对象

列出消息清单后，要明确什么类型的消息应该推送给什么人，即通知消息要匹配正确的通知对象。

系统给用户推送了消息，用户对消息内容感兴趣，点开了消息查看详情并进入目标页面或者处理通知消息，才能实现推送消息的目的。

to c产品需要对用户信息、用户行为等构建用户画像，用于精准推送或者个性化推送。to b产品的用户结构相对简单一些，一般是企业人员（员工、部门负责人、管理层等），根据业务使用场景

对用户划分角色，再以角色为基础匹配功能权限，进行权限控制，如销售、研发、财务、运营等对应不同的业务场景，推送消息侧重点也不同。

3、确定推送时间/频率

确定好了通知对象，我们需要思考以下问题：

    1、什么时候推送消息既不会打扰到用户，又能引起用户的注意？

    2、是主动推送还是由用户触发后被动推送？

    3、多久推送一次合适，推送是一次性的还是持久性的？

    4、这个消息推送触发后要立即处理吗？

    3、用户怎么样能收到消息？收到消息后要做什么？

以下这个金字塔图可以解决上述的问题：

消息清单上的消息项，我们不能一股脑全部推送，要根据信息的提醒强度平衡通知量、推送时间、推送频率，避免对用户造成干扰而影响推送效果。

3.1、强提醒

消息类型：对于需要用户立即处理，或者用户确认才能继续进行的操作，如预警、异常、错误、验证码、重要消息等，让用户及时发现并采取措施。以飞书为例，飞书上要是有人给你发了紧急消息，会以短信的形式提醒你。

推送渠道：电话、短信，但是一般不会用电话，一是成本高，二是对于用户来说是强打扰，而且陌生电话用户一般不太会理。

3.2、中提醒

消息类型：无需用户立即处理，但是需要引起用户注意的操作，如运营消息、待办提醒、审批通知、系统公告等。对用户会产生一定的干扰性，此时要给用户一定的控制权，可以通过设置通知方式或者关闭通知提醒，减少消息打扰。

推送渠道：系统推送、应用内提醒，邮件。

3.3、弱提醒

消息类型：无需用户立即处理，仅提醒用户有新的状态，或者对用户操作后的反馈，如应用更新提醒、状态变更通知、操作成功提示等，对用户几乎不产生干扰。

推送渠道：一般只在应用内提醒或者系统内提醒。

提醒强度越强，通知数量越少，呈金字塔形状，强提醒通知数量要比弱提醒少很多。通知消息数量较多时，要权衡推送数量，推要克制，对于推送频率比较高且用户不需及时处理的消息，可以通过合并通知的方式减少消息推送的数量，减少对用户的打扰。

4、推送渠道

根据提醒强度选择推送渠道，多渠道组合协同推送，能够提高推送效率，但要保证多渠道消息内容一致。一般来说to b产品通知消息是以系统内提醒和办公协作应用（第三方工具，如飞书、企业微信等）内提醒的形式通知用户。

对于系统内的通知消息，不同强度的提醒消息会对应不同的消息通知组件。

4.1、强提醒消息组件类型

强提醒的内容对用户来说是高关注度的，要求及时、主动的把消息推送到用户面前，用户要立即采取措施，对用户当前操作具有强干预性。

4.2、中强提醒消息组件类型

中提醒的内容对用户来说是中关注度的，要在合适的时间推送，可以是系统主动推送也可以用户发起的，用户可以延后处理，对用户当前操作的干预性为中等。

4.3、弱强提醒消息组件类型

弱提醒的内容对用户来说是低关注的，可以是用户操作后的及时反馈，短暂的出现后就消失，或者可以延后处理的消息，对用户当前的操作几乎无干扰。

用户正在使用crm系统办公，同时飞书也在线，我们该如何推送消息？

用户可能已经在系统内查看了消息，再把消息推送到飞书上对用户来说就是重复提醒了。如果飞书上已经读了消息，那么系统内该条消息就要标记为已读。

5、消息文案

用户收到推送消息后，要能快速抓到重点内容，知道这条消息表达了什么，是否需要进行处理。

一般我写消息内容时是会遵循3w1h原则：what（发生了什么），why（什么原因），when（消息触发时间）、how（我该怎么做），再根据实际情况进行适当调整。在设计消息文案时要考虑用户的预期，不要标题和消息内容不一致，或者消息内容和详情页不一致，可以通过推送点击率辅助判断推送是否达到预期效果。

上述原则并不是固定死的，需要根据实际推送目的进行调整，如运营信息可以通过标题、摘要或图片吸引用户，可以直接附带链接跳转到详细信息。

设计消息文案/内容的要点：

    1、消息文案要简明易懂；

    2、重要的信息要放在前面；

    3、不同推送渠道的消息内容要保持一致；

    4、通过短信或者邮件推送的消息要说明信息来源平台，避免用户认为是垃圾信息，如【腾讯】【网易】等。

三、消息中心设计

消息推送给用户后，用户看完不一定会立即处理，延后处理的时要能够找到相应的消息，此时需要消息中心呈现所有的push消息。

消息中心受产品定位、系统框架等因素影响呈现形式会有所不同。消息中心的入口主要有顶部图标（悬浮通知）、左侧tab等形式。

    1、顶部图标：适用于消息数量较少，或者消息不是产品核心业务场景的情况。一般会在顶部导航右边，或者左侧导航下方，以 badge 的形式在图标上提示新消息的数量；

    2、左侧 tab：适用于消息以用户间通讯为核心场景的情况。可根据消息类型进行分类，以 badge 的形式提示未读消息或未处理消息的数量。

消息列表按时间维度排序，可以对信息进行分类展示，如全部，未读、稍后处理的tab分类形式展示，消息类型比较多的情况下通过选择消息类型快速找到相应消息。

四、总结

消息推送并不是简单的把需要提醒用户注意的事项全部推送出去，合理的推送策略才能到达推送目的。

消息推送前的思考：

    1、应该推送什么消息，推送给谁？

    2、什么时间适合推送，为什么要推送这条消息？

    3、怎么推送？

    4、推送的这条消息是否能引起用户兴趣？

    4、用户查阅了这条消息知道要干什么吗？

思考完以上问题基本上能确定一份消息清单 ，要保证推送效果还要注意以下推送的要点：

    1、权衡消息推送数量，只推送必需的消息；

    2、选择合适的推送时间、推送频率，避免对用户产生打扰；

    3、消息文案简明易懂；

    4、多渠道推送保持消息文案一致，不要重复推送；

    5、需要用户采取措施的消息提醒，在用户解决问题之前，要持续提醒；

蓝蓝设计建立了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端产品有一个基本的概念，什么是B端产品？

常见的有OA系统，ERP，CRM，SAAS等（这里就不一一赘述，大家可以自行百度查看一下基本概念）

B端产品是帮助企业或者部门协同办公，解决一条业务链问题，将线下操作通过系统化，流程化转移到线上，提高办公效率，节约成本，高效完成任务从而提高企业的效率，减低内部不必要的消耗。

B端产品行业与行业之间的跨越度很大，因为不同的业务属性所要的产品诉求是不同的。但我们作为一个设计师，可能会遇到各种复杂的业务场景，复杂枯燥的行业术语也可能都不精通，就算学习了也不一定能非常懂，而且行业属性较重，我们大概率不是用户，业务场景还原成本高，甚至没有条件还原。所以在做设计的时候还是会懵。往往我们需要深入用户调研，尽可能地接近真实业务场景，与用户共同创造，基于业务底层逻辑提炼出强整合性、高兼容性、高拓展性的系统规范。B端的产品设计也是一个不小的挑战，那我们如何打破这个挑战更快速的接触，适应B端设计呢？

困难会有，办法也会有的

B 端产品相对而言，场景、功能、业务流程、信息架构要比 C 端更复杂，面对的异常情况也比较多，所以 B 端在设计风格上尽量做到简洁。B 端产品实用性大于美观性，在每一个功能的设计都需要你去思考很多方面：用户易用、信息层级、未来扩展，你都要做出取舍，而对于每个模块都需要你思考、结合用户场景。

面对B端产品我们应该如何分析和处理呢？

1.了解业务和产品

B 端的业务逻辑复杂，子业务多样化，产品的规则，流程，诉求可能随时就会调整，设计师应当基于B端的产品业务特性，市场与用户的需求，在看似杂乱无章的业务中寻找共性，梳理模块进行合理的整理和设计。

在做B端业务前，我们要对我们即将要处理的业务有一个基本的理解和认知，不同的部门员工因为职业属性，使用产品的诉求也是不同的，所以相对应的设计方案流程也是不同的，这就需要我们充分理解业务流程，有针对性的梳理。

例如：我们要做一个考勤系统，我们需要清楚公司的考勤制度，事假/病假/年假/调休等如何处理，如何提交，如何审批，月底汇算，季度汇算等问题，前期了解的流程越多越清晰，就可以帮助我们规避很多不必要的问题。

要将功能流程归类梳理整合，把杂乱的功能整理清楚，提高用户效能。

2.提高效率

用户的时间就是金钱，这对于 B 端商家角色中尤为重要，大量订单的处理、表格化的导入和导出、批量管理和网站运营等方面，对于效率有着极高的要求，商家通过可视化界面来完成某项任务。

在这其中，影响最大的莫过于交互方式了，相信各位一定用过各大银行的网站，页面的导航关联性弱、结构不合理、提示不明确、交互流程过长，甚至有的网站光是登录，就得大费周章。

如何提高效率，我认为主要从以下几个方面着手：

1. 提高易用性

如果你的产品，让人看一眼就能上手，那么说明是非常友好的设计。易用性不一定意味着简单和低智，依据复杂守恒定理（泰勒斯定理），每个应用程序都有自己内在的、无法简化的复杂度。

所以，提高易用性意味着要设计合理的交互，易用性分为对新手（小白用户）友好和对老用户（专家用户）友好，包括数量最大的中间用户。

如果你的界面是仅仅对于新手友好，那么可能完成的任务都是简单而轻松的。但是对于老用户，他需要更复杂的功能来处理大量庞杂的任务；因此在设计的时候，既要提供傻瓜式的操作方式，也要对专家用户提供提高效率的工具。

1. 智能化

此处的智能化既包括通过大数据或者人工智能自动将操作步骤变得简洁高效，也包括诸如一些字段输入、自动定位、图片识别、OCR 等方式来使用户的效率得以提升的功能。

以前的用户要抠图可能会在 ps 中操作好几个步骤才能完成，但是随着机器学习技术的发展，ps 已经可以更加智能的抠图。当然，还包括其他功能的智能化。

在 B 端 SaaS 领域，智能化也是一个重要的趋势，针对不同的商家所面临的不同的行业领域，我们或许可以提供更加全面且友好的服务。

3.提高通用性

提高系统内的一致性，减少用户认知成本。在同一平台内的页面，样式和交互上要尽量保持一致性，不要有的地方是总金额，有的地方是总价格，这会让用户犯迷糊。提高通用性，也意味着你需要关注并熟悉系统内不同功能之间的关联性，尽量做到统一处理。

提高B端品质的设计方法

B端产品多在工作中需要长时间沉浸式使用，为帮助用户集中注意力、高效完成任务，设计风格多为冷静、克制、干净、简洁，相较于视觉，更多的是注重如何让用户理解产品逻辑。如何通过设计的处理更好的提升产品的效率，留住用户，让用户有更流程的产品体验。

1.内容丰富网站，提高搜索能力

在我们进入一个产品内容比较多的网站下，如何才可以让用户快速在网站中匹配到自己需求，解决自己的问题呢？最快速，便捷的处理方式就是搜索框输入关键字，通过用户的关键词在系统中为用户提供最匹配，最合适的内容，缩短用户寻找产品的时间，提升用户的使用效率，让用户有更流畅的体验。

设计要点：

提高搜索框在网站中的曝光率

提升模糊搜索的正确率

尽量不要出现搜索结果为空

2.提示信息保持简短直白

文案提醒要简练，让用户扫一眼就知道要表达什么意思，不要让用户停下时间去思考，琢磨文字提示的信息，减少干扰信息，比如在处理input时加入默认提示，让表单更清晰，表意更明确；有字数限制时，要明确可输入字数和已输入字数，这样让用户有一个预期，不会出现输着输着没法输入新的内容。

设计要点：

文字简短，清晰，通俗易懂

文案风格统一

3.及时纠正用户错误，不要仅靠色彩提示

用户使用产品时，用户与产品之间形成一种“沟通”，良好的反馈机制能够大大提升这种“沟通”体验。用户的每一步操作都应当得到相应的反馈，尤其是在错误时要及时纠正，以便用户更准确的操作下一步。但是这种操作不应该只是错误色彩提示。比如当我们在输入表单时，输入错误系统并没有给我们任何提示，只是将输入框变为错误操作的颜色，这样会让用户无法流畅完成操作内容。

设计要点：

及时纠正用户错误，减少用户焦虑

将用户的错误操作清晰明了的表述出来

4.空页面状态给用户提示操作

空状态作用和文章中“承上启下”的文字作用是一样的，空页面可以帮助我们理解上下文，让用户知道即将要发生什么，才会觉得舒服。最好的方式就是“展示和引导”：通过清晰的文字告知用户发生了什么，并且通过按钮/快速链接有效的引导用户行为，避免用户陷入死胡同，不知如何操作下一步。

设计要点：

空界面可以增加一些趣味性，个性化或者打造品牌感（IP形象/品牌logo衍生）

空界面状态保持简洁，直观易懂

引导用户操作

5.使用用户熟悉的icon便于识别

当icon被用于设计时，最好使用用户熟悉和容易识别的icon，以使用户能够迅速地了解其用途。如果icon无法传达正确的意思，就会变成视觉噪音，让使用者迷惑，成为使用者的认知障碍。

设计要点：

icon要易识别，正确传达表示含义

同一层级的icon，要统一标准，设计一致

6.内容真实性

B端的设计往往会有很多种情况，我们在做名称/数据的设计时尽量模拟真实的上线数据，如果涉及敏感数据可以自己改一下，但是尽量要采用字段长度，这样可以在设计中无限接近上线后的产品，减少后期因为数据展示出现的UI调整。

设计要点：

在设计阶段无限接近真实上线环境

将上线后可能出现的展示样式都要制作出来，避免后期的返工

7.确保最重要的功能优先靠前

确定功能操作的优先级，将一些用户关心的数据统计/报表展示一级页面，使用频率高的功能优先靠前展现出来，轻量级操作的信息入口尽量收起，不要展示给用户，以免造成不必要的困扰，增加用户学习成本。

设计要点：

确定功能优先级

高频次入口优先展示，低频次折叠隐藏

8.告诉用户某个操作可能会带来什么结果

B端产品逻辑严密和专业性较高，用户在使用时经常不可避免的操作失误，尤其是涉及到删除数据或者金额方面的操作，我们需要格外的谨慎处理。在用户犯错时，我们要及时的提示用户，这样的操作会带来什么样的后果，提示的文案要注意语气，不要将责任全部推在用户身上，礼貌对待用户。

设计要点：

要及时反馈用户后果，避免因为不当操作造成伤害

页面删除尽量给二次确定，避免用户误点，做个人保护

尽量有垃圾箱回收，方便用户后悔

9.提升加载过程中体验

避免加载中用户等待焦虑，我们可以使用分布式的加载方式预先加载页面框架然后加载内容，在内容未出现前通过占位符的方式展示，优先加载占用网络资源较少的元素，减少用户的等待心理，占位符的方式可以让用户提前了解到页面整体的展示样式效果，给用户加载好的错觉。

在加载过程中我们可以通过这几个视觉表达方式来加载，通过显示品牌元素加载；色块加载；界面布局；灰色图显示等。

设计要点：

避免空白页加载等待，增加用户焦虑

选择最符合产品调性的加载

10.可读性优化，简化界面

我们要做到减轻界面视觉呈现，但这并不是意味着减少页面功能。我们要帮助用户简化认知负担，增加界面可读性，降低用户阅读浏览复杂的大块内容时的心理压力和抵触感。将一些复杂的表单内容通过数据可视化的方式让用户更快，更便捷的查看数据，从而对业务有更直观的理解。

设计要点：

数据可视化是一个不错的选择

避免不必要的元素信息

保证可读性

11.进度条增加清晰信息引导

一个优秀的进度条可以让用户减少很多的焦虑，并且让过程和结果步骤清晰可见，进度条的目的在于通过向用户反馈当前响应进度来让用户在等待中放松下来，在用户等待程序处理事情时，不应该把用户仍在一旁傻傻的猜想程序什么时候结束，这个步骤还有多长时间。正是这样的情景下，进度条刚好可以构建用户与系统之间沟通的桥梁。面对长时间的几十秒的操作的进度条不应该只是一个进度模糊显示，更好的处理是应该加入进步完成的百分比，清晰明了告诉用户系统完成了多少工作量还剩多少。

设计要点：

进度条可以打消用户对程序等待响应的疑惑

针对响应时间稍长的进度加入显示百分比

12.设计验收

开发完成后设计师要开始设计走查，因为开发不可能百分之一百的还原设计图，所以最后的设计把控是非常重要的，即使是开发按照设计图还原界面但是可能代码实现后还是有些问题，或者是不同尺寸的屏幕适配，或者是加入真实数据后一些展示问题，又或者是页面的跳转/返回以及一些弹窗提示等都需要最后的走查确定；不仅仅是视觉页面验收，交互方面还要考虑去验证思考最符合用户操作体验的流程。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

<template> <div class="record-wrapper"> <!-- 时间，后续开发 --> <div class="time"></div> <!-- 消息， msg通用样式 msg-right/msg-left 区分排版左右 --> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <!-- 消息框， msg通用样式 message-wrapper-right/left 区分聊天框颜色 --> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> </div> </template> 

<template> <div class="record-wrapper"> <div class="time"></div> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> <div v-else class="msg msg-left"> <div class="img-wrapper"> <img class="img" :src="from2" /> </div> <div class="message-wrapper message-wrapper-left"> <div class="message">{{ message }}</div> </div> </div> </div> </template> <script> export default {
  name: "",
  props: {
    from: Number, // 1: 自己    2: 别人
    message: String,
    timestamp: Date,
  },
  data() {
    return {
      from1: require("../../../assets/imgs/from1.jpg"),
      from2: require("../../../assets/imgs/from2.jpg"),
    };
  },
}; </script> 

<style lang="scss" scoped> .record-wrapper { margin: 4px; padding: 4px; } .time { text-align: center; } .msg { display: flex; flex-direction: row; .message-wrapper { max-width: 220px; margin: 0px 10px 0px 10px; .message { margin: 8px; word-wrap: break-word; //英文换行 } } .message-wrapper-left { background-color: lightslategray; border-radius: 0px 12px 12px 12px; } .message-wrapper-right { background-color: powderblue; border-radius: 12px 0px 12px 12px; } .img { flex: auto; height: 36px; width: 36px; border-radius: 8px; } } .msg-right { flex-direction: row-reverse; } .msg-left { flex-direction: row; } </style> 

Vue开发聊天界面（二）

export const chatItems = [ { type:1, message:"fdaf地方撒风大撒风阿斯顿飞fd阿斯顿飞安德森发大水发大水发大水奋斗发的大撒风安德森 发大发大水发", from:1, timestamp: new Date() }, { type:1, message:"fdaf地方撒风大撒aa风阿斯顿飞ffdsafsfadsfadsfjlkjsadflkosdajfl asdjlffsaf水奋斗发的大撒风安德森 发大发大水发", from:1, timestamp: new Date() }, { type:1, message:"做紧d咩嘢?", from:2, timestamp: new Date() }, { type:1, message:"？？？", from:2, timestamp: new Date() }, ] 

<template> <div class="scroll-wrapper" ref="scroll"> <div class="scroll-content"> <chat-item v-for="item in chatItems" :key="item.message" :type="item.type" :message="item.message" :timestamp="item.timestamp" :from="item.from" ></chat-item> </div> </div> </template> <script> import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel"
import ChatItem from "./ChatItem";
import { chatItems } from "../../../assets/data/items";

BScroll.use(MouseWheel)

export default {
  name: "",
  data() {
    return {
      chatItems,
      bs: null
    };
  },
  components: {
    "chat-item": ChatItem,
  },

  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.bs.destroy();
  },
  methods: {
    // better-scroll的代码
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        scrollY: true, // 上下滚动
        click: true,   // 开启点击事件
        startY: document.querySelector(".scroll-wrapper").clientHeight - this.$refs.scroll.scrollHeight + 5 , // 初始高度
        mouseWheel: true,   // 鼠标滚动
        probeType: 2, // listening scroll hook
      });

      // 下面的不要也行，官网抄的顺便留下来了
      this.bs.on("scroll", ({ y }) => {
        console.log("scrolling:" + y);
      });
      this.bs.on("scrollEnd", () => {
        console.log("scrollingEnd");
      });
    },
    clickHandler(item) {
      alert(item);
    },
  },
}; </script> <style lang="scss" scoped> .scroll-wrapper {
  height: calc(100% - 160px);  // 留一些空间给 打字的地方 和 header
  overflow: hidden;    // 非常之关键
} </style> 

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：简书。作者：Good_Nine9

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

• 较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。
• 更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。
• 保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。
• 更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。
• 可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。
• 更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

1、在data中声明要设置的定时器名称：

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                timer: null  // 定时器名称
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },复制代码
            

        

    

2、在mounted中创建定时器：

    


        


            


            

        

        


            

                this.timer = (() => {
            

        

    

    


        


            


            

        

        


            

                // 某些操作
            

        

    

    


        


            


            

        

        


            

                }, 5000)复制代码
            

        

    

3、在页面注销时清理定时器：

    


        


            


            

        

        


            

                beforeDestroy() {
            

        

    

    


        


            


            

        

        


            

                clearInterval(this.timer);
            

        

    

    


        


            


            

        

        


            

                this.timer = null;
            

        

    

    


        


            


            

        

        


            

                }复制代码
            

        

    

然鹅，并没什么卵用，在切换页面后，定时任务依然顽强的奔跑着。

    


        


            


            

        

        


            

                beforeDestroy() {
            

        

    

    


        


            


            

        

        


            

                clearInterval(this.timer);
            

        

    

    


        


            


            

        

        


            

                this.timer = null;
            

        

    

    


        


            


            

        

        


            

                console.log(this.timer)            //输出为: null,但是任务依然在继续运行
            

        

    

    


        


            


            

        

        


            

                }复制代码
            

        

    

可能是我的姿势不对吧。害羞.jpg

经过在各大论坛一番查找发现：

通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器：

    


        


            


            

        

        


            

                const timer = setInterval(() =>{
            

        

    

    


        


            


            

        

        


            

                // 某些定时器操作
            

        

    

    


        


            


            

        

        


            

                }, 5000);
            

        

    

    


        


            


            

        

        


            

                // 通过$once来监听定时器
            

        

    

    


        


            


            

        

        


            

                // 在beforeDestroy钩子触发时清除定时器
            

        

    

    


        


            


            

        

        


            

                this.$once('hook:beforeDestroy', () => {
            

        

    

    


        


            


            

        

        


            

                clearInterval(timer);
            

        

    

    


        


            


            

        

        


            

                }) 复制代码
            

        

    

哇，成功了...

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

resize:none

<textarea style="resize:none " rows="8" cols="80" ></textarea> 


    

        1
    

如果你使用谷歌浏览器或火狐浏览器，你会发现页面上的textarea元素的右下角有个小三角，用鼠标箭头拖拽它，你的textarea就能随着放大或缩小。这是现代浏览器为方便用户而添加的一个辅助功能(很遗憾，不包括IE，如果你使用IE，是看不到的。)。Web程序员在设计网页时，一般给了textarea一个固定的长宽，通常是配合布局而设定。但挑剔的用户往往会认为太小或太大。有了这个可以调整大小的工具后，用户就可以自己选择合适的大小了。

但是，有时候是应用的需要，Web程序员需要禁止这个可以调整textarea大小的功能(IE完全没这个问题！)，也就是去掉右下角的小三角，有什么办法呢？很简单，使用CSS的resize属性。

    


        


            


                


                

            

            


                

                    <style type="text/css">
                

            

        

        


            


                


                

            

            


                

                    textarea {
                

            

        

        


            


                


                

            

            


                

                    resize: none;
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    </style>
                

            

        

    

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务