希望国内的互联网产品能够多去考虑无障碍设计，让我们的产品更有包容性，能服务更多的用户人群。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：随着SaaS行业的不断发展，对于该领域的许多企业来说，其实定价就意味着制定企业的商业模式。那么如何正确的采取SaaS的定价策略？本篇文章将会从三个不同的定价来检查定价策略的连续性，以及不同的价格如何确保公司商业模式各个方面的关联。
我最近一直在思考一个问题，一款付费产品定价多少才算合适，用户才愿意付费？这边举例某视频App，几乎每款视频会员每月的定价在15-25之间。
平台开放新用户首月6元，三个月后转至15元每月。
因为价格比较低。所以很多新片上映的时候，大多数人会选择充值3个月的视频会员，但是三个月结束后呢，用户还愿意付款全额去购买会员吗？又有多少人为了所谓的喜爱视频去付费呢？
视频内容则是用户付费的基础，后续又开通了超前点播功能，让热播的视频变成炽手可热的赚钱工具。
我们观看视频的时候肯定出现过一种情况，因为版权问题，我们需要到不同的平台观看自己喜爱的视频，这就导致我们需要下载好几种App，再充值几个会员。对于一个本身不富裕的家庭无疑是雪上加霜。
后来我跟几个朋友商量，我们三个人在不同的平台上开通一个会员，我们互相登录对方账号，这样我充值一个会员就可以获得三个平台视频的会员，想想还挺划算。
最近很多朋友问我SaaS软件中，到底如何定价才合理?
随着SaaS行业的不断发展，对于该领域的许多企业来说，其实定价就意味着制定企业的商业模式。
然而这其实并不是唯一的“支点”，但随着公司规模的扩大和用户群体的增长和变化，逐渐演变成一种不断变化的商业模式。
如果一家公司从初创公司转向主流规模扩张阶段，那么就可以看到该公司需要更专业，更有利可图的用户群体来磨炼公司产品的市场契合度。
无论你的产品如何发展，如何了解定价策略和实施定价在发展阶段是至关重要的，采用不合适的定价模型很容易导致公司发展方向飘忽不定。
SaaS定价无非两种，一种是面向用户自助服务定价，另外一种则是企业服务定价。
在扩展产品和发展业务时，在确定定价策略之前需要回答几个关键问题:
- 产品是否有锚定竞争对手（如果存在）或该产品是否可以成为替代品？
- 该应用程序解决的需求有多强烈和频繁？
- 该产品可以为用户或企业提供多少价值？
- 价值是临时的还是持续的？
- 你的网站上是否有明确的定价页面？还是你随机制作的？
- 用户是可以通过微信支付宝购买还是可以通过各个付费机制付款（贷款金融）
如果你可以熟练地回答的出以上问题，说明你对产品的了解以及商业模式有着充分的了解，在这里我们通过不同的定价来检查定价策略的连续性，以及不同的价格如何确保公司商业模式各个方面的关联。
一、SaaS基础版：1K-2.5K
其实在跟业内朋友沟通定价的时候出现过一个问题，产品的定价到底需不需要商家免费版的机制供用户体验？
我们可以看到很多市面上的产品大多都采取有免费版的机制，主要产品可以快速的获取新用户，让用户快速体验该平台为自己带来的价值，这种模式虽然可以快速获取大量的用户。
但如果初创企业采用这种模式，会因为获取客户和服务的成本可能会在短期内影响产品的收益和公司盈利跟不上。
如果你的平均订单价值每年在2500以下，那么在这个级别上，你的客户获取成本主要是基于网络营销或者创建高质量的文章来教育市场并吸引潜在客户访问你的网站。
这里的关键是降低获客成本，如果有可能的话，考虑到现金流和减少用户流失的问题，可以鼓励客户先预付明年的费用，可以赠送一些特权模块，（选购3年赠送2年）此外还需要根据产品的实力来进行合理的规划。
这些客户当中可能是一些中小型企业，因此在可寻市场方面数量较多，推广起来相对比较容易，这类客户一旦有明确需求，产品可以响应他的需求，在这个价位上，购买决策通常会很快。
如果你的产品有这类定价模式，请将内容和网络集合营销作为你主要的客户来源，总的来说尽可能减少与客户之间的交互，因此只要确定用户进来，体验完成，提交订单就可以了。
二、SaaS进阶版：2.5K-6K
很多SaaS产品业务都占据了这个区域，但这个价格区间一个关键的要点就是获客成本很容易超过产品生命周期价值，从长远来看还是任重道远的。
在这阶段，客户体验过产品后，查看自己所需的购买模块，有的时候客户会因为喜欢一个功能，但是如果使用这个功能需要提升到进阶版，但是客户资金不足，但非常想要这个功能怎么办？你有没有办法解决这类问题？
我采访过一家上市SaaS企业公司的产品总监，当时我们在沟通这类问题的时候。
他的回答是：“这个问题说难也不难，侧重点在于用户想花更少的钱就可以获取自己想要的功能，那我们就把所有的功能模块展示出来，你想要那个就点击那个，然后根据该客户使用的模块来进行定价”。
我又问到他：“如果这种情况下企业会不会做到价格不可控，最终导致竞争力不足，被市场淘汰，因为本身全部开放的话，客户选择太灵活，没有大客户怎么办？”
后来我们思考了一段时间，就在上周四，我们重新探讨了产品定价策略，这个时候我们的解决方案是这样的，仅供参考哈：
首先我们预设三个版本，基础版（1000-2500），进阶版（2500-6000），企业版（6000+）。
我们通过制定不同的版本，大家可以看到价格之间的弹性较大，这是因为我们在定价过程中，采取功能列表上下浮动的方式来实施。
这样各个模块之内的功能都会确定，但客户在使用过程中可以选取自己想要的功能，这样会减少客户的成本，从而减少客户流失率。从而也会增加大客户获取的数量。
客户：“我只使用百分之50的功能为什么要付款百分百的金额！”
中间地带是SaaS公司值得关注的一个有吸引力的领域，优惠奖品大小和客户用户数量庞大，然而，特别是在这类用户，务必要好好维护，尽可能为客户提供更多的价值，如果客户付费金额和实际回报经济不稳定，失去了平衡，那么老用户也可能会不顾一切的把你抛在脑后。
如果企业形成了这样的病态，获客成本可能会螺旋式的上升。
三、SaaS企业版：6K+
这类客户其实是企业存活时间的基础，没有那个酒店每天上几桌子人就会达到盈利的，最终要是要靠婚宴包桌，企业宴请等大客户来维持企业。
这个阶段就需要产品与市场有着高度的契合度，如果你的客户超过百分之10的付费金额在一阶段，那么先恭喜你，说明你的产品基本可以运行了几年。
这意味着产品处于高频率销售领域，需要高管接触销售，长期跟进客户销售是常态，并且需要客户经理来确保产品能够持续输出产品价值。
因为这一段利润足够高，然而在这一阶段中寻找高触发客户对于SaaS初创企业来说是一个高风险策略，尤其是销售周期变长，如果“大客户”使用它，通过会拥有很大的影响力。
“企业客户希望通过定制功能的需求来塑造产品开发。”
或者需要超出该产品的典型覆盖范围的 SLA。在公司的发展中过早地针对这种规模的客户会冒着“过度拟合”你的产品及其功能以满足单个客户的特定需求的风险，从而使你受制于他们的需求并且不适合其他潜在客户的需求.
对于 SaaS 初创公司来说，追逐“大客户”是一种高风险的策略。除非资金充足，否则收购成本可能过高。他们可能拥有雄厚的财力，但难以落地，一旦落地，他们的需求将影响业务的所有领域。
更好的策略通常是在价格连续区间的较低部分关注更丰富的潜在客户，一旦你的功能集更加成熟并且您的销售模式已建立完善，则向上游移动。
你就可以去敲钟了！
四、理解复杂相互的关系
对定价连续性的概述应该清楚地表明你的定价策略不能孤立地决定，因为每个价格点的连锁反应都是相当大的。定价需要与所产生的价值紧密结合，但也要在更广泛的决策背景下考虑要服务的客户以及进入市场的途径以获取他们的信息。
认识到不同层级的固有风险将有助于确保您在导航定价连续体的不同步骤时定位组织的每个部分。
“SaaS 市场的不断发展意味着你可能会定期重新评估您在价格连续体中的位置”
例如，对于许多初创公司来说，客户需要从入门级开始，在几年内向高端市场发展。如果刚开始就从企业定价开始，那么请注意与销售相关的长销售周期和费用确实会给现金带来压力。
如果你迈出了这一步获得一些早期的胜利，因此你可以向你的网站添加一些标志，从使用中学习并随着时间的推移添加更多引人注目的功能.
这将使客户能够随着的解决方案、公司和市场的成熟而向上游移动。
最后，确定在该连续统一体中的位置很少是“最终的”——SaaS 市场的不断发展意味着您可能会定期重新评估您在价格连续体中的位置——毕竟，这是您早期的自然定价点随着您的成长，公司不太可能保持这种状态。
这就是为什么需要了解业务的所有不同要素之间复杂的相互关系如此重要的原因——成功地在定价范围内导航取决于彻底了解产品的定价策略如何与产品的销售、营销和支持策略以及产品路线图。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：人人都是产品经理 作者：秀琴分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：在当今内容为王的时代，传统的信息流无法承载日益丰富的产品内容，一种个性化的内容推荐方式-feed流逐渐孕育而生。本篇文章中作者分析了feed流的组成元素，以及常见的feed流样式。推荐对feed流感兴趣的朋友们阅读。
在这个内容为王的时代，各个类型的产品都开始围绕着自己所处的赛道营造丰富的信息流，传统的信息流不再能承载当下丰富多样的内容，信息流也不再单纯属于信息类以及文娱类产品，许多金融类产品甚至是工具类产品都开始有了社区，不同类型的内容开始进入用户的视野。
因此传统的信息流无法承载日益丰富的产品内容，逐渐一种个性化的内容推荐方式-feed流逐渐孕育而生，其样式丰富，其中包括大卡流、双列流、沉浸流、动态流、文本流、动态流、橱窗流…..笔者将在本文中分析feed流的组成部分，以及使用场景和设计要点。
笔者调研了不同类型的feed流，发现feed流主要由以下几个部分组成。如下图：
笔者为大家挑选了几个比较常见的元素为大家进行分析。
在大多出产品的feed流中，占最大面积的就是图片或视频。相较于文字，图片更能够激发用户点击的欲望，在带有社区属性的产品中，设计师还需要考虑如何适配横屏以及竖屏封面。
其次是如果该位置出现的是视频。在常见的视频产品中，当系统识别出该内容处于用户界面的中间区域，则会自动进行预告播放。在1-2秒的时间内，用户能够快速浏览视频中最精彩的部分。在展现方式上通常使用带有圆角的距形进行展示，圆角一般设置为：8、10、12、14、16、20PX。
在feed的设计中，标题是最不可缺少的部分，在字体的设计上，大多数采用黑色字体。在排布方式上在一行至两行，如出现标题字数过多，可以用「 … 」的方式进行呈现。其次需要限制产品的创作者以及运营在配置标题时，注意文案应该简明扼要，不要过于累赘。
该区域可以叫做文案区域或二级标题区域，在该区域的设计中，字体颜色建议大多数采用灰色进行展示。在文案的编写上可以加入更带有引导性的词汇用于引导用户点击。
标签的出现目的主要有两个方面，第一个方面是帮助用户能够快速的区分内容的种类如：预告、独播、直播、精选、推荐等。用户可以在众多feed流中通过快速查看标签进行筛选，从而快速找到自己想看的内容。
第二个方面主要是帮助产品进行更加精准的流量分发，产品会根据用户的操作习惯进行分群，再根据用户兴趣给每个群体打上相对应标签。而这些标签则是对应了不同群体的用户，因此也就有了淘宝商城中千人千面的推荐形式。
辅助信息主要是为了满足不同产品的信息呈现，如在视频平台中，辅助信息可以承载电影评分、电视剧的集数、播放量、综艺的更新日期、点赞数、评论等，甚至会加入相关的快捷操作如静音。辅助信息在设计中，不易做的过于突出，需要清晰单个feed的信息层级，挑选必要的信息进行展现。
操作区域的目的是为了产品的算法更加了解用户的偏好，因为用户的兴趣是会发生变化的，如果用户在某段时间突然特别不想看到某些内容，就可以通过点击操作将内容进行「不喜欢」或「减少相关内容」的操作，这样也能给予用户对于feed流一定的自定义。
在交互形式上，点击操作区域后，建议采用较为轻量的交互方式，如点击后出现底部弹窗或气泡的形式。
仅仅了解了feed的组成部分是不够的。单个的feed流其实就像是英语学习中的单个单词一样，单独的去死记硬背某个单词其实意义是不大的，feed流的设计也同样如此。
我们还需要拥有能够将前面提到的组成元素，拆开和重组的能力，因为不同的产品业务属性不同，所需要给用户提供的内容也就不同。接下来笔者就给大家介绍一下常见的feed流形式。
介绍：文字流多在信息类产品如知乎、百度，或产品的用户评论区当中。此类样式可以运用在以文字为主的feed流设计中，并且还可以与动态流（下文会提到）之间搭配使用。
由于适配度高，可容纳更多的操作按钮，因此可以服务与以UGC内容为主的产品，UGC产品需要强调用户之间的互动，需要将互动类快捷操作外露。
如下图：
使用场景：以文字为主的信息类产品，新闻资讯类产品、评论区、产品发现页/社区
设计要点：在文本流的设计中，需要注意的是区分信息的优先级，其中标题可以采用大字号加粗的方式进行区分，正文则可以采用黑色常规的字体。
操作区域以及辅助信息可以布置在正文的下方，灰色处理，头像以及标签可以作为一个整体进行布局。在交互上，可以将分享/评论/点赞等按钮外露，从而降低用户的互动成本。
介绍：该样式主要服务与以图片/视频信息为主要内容的feed流。以淘宝为例，在淘宝2020年提出“逛淘宝”的理念后，不再一味的追求交易的最短路径，而是让用户在首页点击了某件商品之后，进入的是一系列同类商品的feed流，而不是商品的详情页。可以看出，大卡流非常适用于图片/视频信息的展示。如下图：
使用场景：以图片为主的内容且需要搭配相关操作，如评论/进入详情/分享/点赞等。劣势是单排仅显示一条feed，所需空间较大，在首页不适合单独使用，需要和其他feed样式进行搭配。
设计要点：在大卡流的设计中，由于空间较大，需要注意标题和操作区域的摆放位置，其次是需要把控创作者或合作媒体上传的图片质量。最重要的是需要考虑适配横屏和竖屏的封面，由于图片比例的不同，会涉及到相关操作交互一致性以及视觉一致性的统一。
介绍：笔者认为将双列流带到用户视野的产品非小红书莫属，从小红书发布之初到现在一直采用双列流的形式。它的好处是能够最大限度的将以图片为主的feed内容呈现给用户。
样式最初以长卡样式为主，主要用于适配竖屏图片，但随着现阶段UGC内容的发展，双列流也开始适配横屏封面。如优酷的首页feed，则是采用了双卡流中的短卡样式，也不乏将长卡和短卡搭配使用的情况。
使用场景：主要适用于需要以图片为主的UGC产品，非常适合用于首页，但不推荐与其他feed样式结合使用，容易打破双列流左右两则的排布节奏。对于相关操作按钮从数量上有局限性，不建议外露过多按钮，可以探索长按吊起更多操作的交互方式。在具体的设计样式上，建议参考小红书，仅将创作者与点赞数的操作进行外露。
设计要点：在设计双列流的过程中需要考虑左右两列之间以及上下两行之间的间距，由于内容与内容之间图片的高度不同，标题字数不同，因此需要制定良好的规范，从而保证用户在浏览内容的过程中保证两列内容之间的节奏感。其次是控制操作按钮的个数，需要根据产品实际需求，仅将最总要的操作进行外露。
对于沉浸流的使用最具有代表性的是抖音以及快手，随着各个产品赛道都加入了短视频以及直播间的模块，该类样式几乎能够在所有头部产品中见到。如在淘宝的商品详情页以及首页都加入了直播的模块，点击进入后可以沉浸的了解电子产品的测评或是服装的实际上身效果，从信息传达上会比单一的图片更加多元更具有沉浸感。
使用场景：该类样式主要适用于短视频、直播间
设计要点：由于在不同产品中，短视频起到作用不同。
比如在淘宝，短视频的目的是给予用户更直接的效果展示，让用户能够快速的了解到产品的优点，从而下单。
因此短视频在淘宝详情页中的作用就是激励用户购买，所以会在左下角加入购买的链接。再比如在视频类产品中，如优酷则是提供相关的电影片段，那么目的就是为了给产品中的电影播放区导流，因此在设计过程中也会有相应的改变。
在使用沉浸流的过程中，需要结合实际项目需求，不能将抖音快手的设计方式直接照搬到自己的产品中，这样容易导致产品功能割裂的情况。
其次是需要将功能进行分区展示，如可以将同类的相关操作聚合放置在固定的区域，由于沉浸流功能按钮会非常多，因此对用户容易造成干扰，容易找不到想要操作的按钮。
介绍：微博和微信朋友圈是笔者认为将动态流使用的最为广泛的产品，由于在这两款产品中，内容过于丰富，不仅需要适配横屏或竖屏的图片/视频，还需要考虑适配不同数量。
并且需要将所有图片展现给用户，其中还不乏动图。因此对于feed的兼容性提出了极高的要求。
使用场景：动态流可以运用在主打UGC的社区类产品当中，以及单个产品中的社区模块。
设计要点：由于发布内容的主题是合作的媒体以及用户用于记录个人生活，因此动态流的优势非常明显，可以适配不同数量的图片以及用户的自定义标签，因此动态流很难说是呈现以图片/视频为主的内容，还是以文字为主的内容，需要设计师与业务册进行协商，找到feed对于产品的定位是什么。
劣势则是用户难以抓住单条内容中的重点。因此设计师在设计的过程中，需要明确制定相关规范，灵活适配单数或双数的图片数量，从视觉上保证平衡。
介绍：橱窗流在近两年越来越多的出现在各大产品中，由于头部产品都在往超级APP的方向进行发展。
前面笔者给大家介绍的各种feed样式之间都存在着各自的优势和劣势，但是依然无法满足现在日益丰富的产品内容，因此橱窗流诞生了。其样式可以理解为将不同样式的feed进行排列组合，给予用户矩阵式的内容推荐。
使用场景：多用于产品首页金刚区的下方，作为产品中某项功能或服务的入口进行承载，如新品首发、现实抢购、正片回顾等。其次是运用在某类内容的聚合场景下。如将某一类视频形成一个组合的片单，或者是将某一类书籍形成书单，但是由于内容过多，封面难定的问题，此时可以采用橱窗流的方式进行承载。
设计要点：虽然说橱窗流能够承载丰富的内容，容易烘托产品氛围。但是设计师在设计过程中需要对视觉进行整体进行把控，由于单个区域中，可能会出现过多个内容，容易造成页面混乱对情况。因此不宜把单个feed设计对过于出跳，这样容易影响产品的流量分发。
其次是需要区分单个feed之间对样式差异，由于在橱窗流中，单个feed属于内容的集合，因此需要注意区分不同feed之间的样式。
在本文中，笔者粗略的分析了feed流的组成元素，以及常见的feed流样式。其中不同的样式各有利弊，并没有某一种万能的样式，因此在设计过程中，需要结合业务目标以及用户目标进行分析，分别分析对于标签/图片/文字/操作的需求，从而设计出最适合产品需求的feed。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：NFT，即非同质化代币，其特点在于唯一性。NFT也经常与艺术领域结合，越来越多人开始投入到NFT艺术创作当中。而唯一性和所有权的确定性，更是让NFT艺术有了一定的收藏价值，也由此产生了一些乱象。本篇文章里，作者就NFT的现状与未来发展发表了看法，不妨来看一下。
NFT代表的未来，到来了吗？
2021年7月，一张新闻图片在国内网络爆火。
图片里，四川黑水的一位藏族妇女正搬运着从新疆转运而来的“矿机”（计算机通过算力获得比特币的过程被称为“挖矿”）。她穿着藏袍，裹着头巾，手里抓着的却不是麦穗或花束，而是一把电源线。
财新图片改编版NFT，图源鹿科技网
照片出自财新周刊的报道《中国告别比特币“挖矿”》。落后地区民众与区块链科技的巨大反差，让画面充满了艺术张力，宏大的时代变迁融进镜头，这张照片不仅拥有信息价值，艺术性同样出众。
“世界名画”，网友们慨叹的同时，另一条评论也被赞上热门：“这张照片能在NFT专场卖十万美元”。
这不是臆想。照片发出后不久，一幅改编版图片出现在NFT交易平台上，叫价高达2021ETH（410万美元）。还有消息称，已有人开始接洽照片拍摄者，将其所有照片作品包装为NFT艺术品。
各种消息难辨真假，但这张照片又让区块链世界的另一个概念——NFT（非同质化代币）再一次进入公众视野。如同前几年的比特币一样，相关的新闻下，越来越多的人想知道什么是NFT，“你知道什么是NFT吗？”许多人迫切的需要解答。
相对于公众认知，NFT商业的发展是前置的。2021年开始，国外艺术领域就已经掀起了一股NFT热，并持续至今，国内的NFT领域近期也开始备受关注，腾讯、阿里等企业纷纷下场，NFT已经成为当下商业领域炙手可热的概念。
NFT拍卖、NFT盲盒、各式加密艺术展，打开资讯平台，几乎每天都能刷到一篇“NFT”相关的文章。被消息驱赶着，人们开始关注这个新兴领域，并将热度推向一个又一个的高潮。
但仍旧有很多疑问等待解答：什么是NFT，NFT是怎么火起来的，NFT艺术品又为何能如此火爆，未来又将如何发展？
NFT艺术中的NFT到底指什么？
NFT的全称是Non-fungible token，是一种基于以太坊区块链的“非同质化代币”。
与比特币、以太币等虚拟货币一样，NFT同样依靠区块链进行交易。但NFT代币的最大特点在于其唯一性，“非同质化”，每一块NFT都独一无二，不可互换，人们可以将特殊资产绑定在NFT上，其可以让许多物品成为一种数字化抽象物，变成所有者的“数字资产”。
制作NFT的编程标准“ERC721协议”
图源Tiny熊《剖析非同质化代币ERC721》
如果说比特币、以太币等同质化代币可以被比作钞票，NFT更像是一件艺术品的原件。凭借这种特性，NFT在艺术领域得到了广泛应用，诸多数字艺术品开始与NFT绑定。
NFT艺术的起源可能在2017年。
彼时，Larva Labs公司开发了一款像素头像生成器，生成了约1万个各式各样的像素头像，带着“朋克”精神的期许，这一头像系列被命名为CryptoPunks，意为“加密朋克”。2017年正值以太坊火热发展之际，Larva Labs将CryptoPunks头像挂上区块链，并赋予其流转收藏的价值。
CryptoPunks系列像素头像，图源网络
这为NFT的诞生提供了契机。同年，受CryptoPunks影响，一家名为Crypto Cats的公司推出一款名为“密码猫”（CryptocKitties）的游戏，游戏里玩家可以通过一串代码创造出一只“密码猫”数字形象，并且每一只猫都独一无二，这些密码猫们的所有权都被存储在以太坊上。
“密码猫”被认为是NFT代币的滥觞。2017年底，以太坊ERC 721协议（非同质化代币的编程标准）诞生，NFT也随之出现。2021年，经过近四年的发展，在艺术领域，NFT终于迎来了“爆发”。
密码猫CryptoKitties，图源网络
NFT的每次高流量曝光都像是行为艺术。
2021年3月，数字视觉艺术家Beeple的一套NFT艺术品备受关注。从2007年开始，Beeple每天都创作一件艺术品，最后他将五千幅作品拼接成一张图片，并将其命名为《Everydays：The First 5000 Days》，并在佳士得拍卖行上线。
艺术家Beeple的NFT作品《Everydays：The First 5000 Days》，图源网络
3月11日，一个名叫“MetaKovan”的卖家以6934.8万美元的价格拍下了这幅作品。这个数字出乎所有人的预料，NFT艺术，也开始光速出圈。
同样在2021年3月，另一个新闻也让人们看到了NFT艺术的商业潜力。著名街头艺术家Banksy的作品《Mornos》（《白痴》）被以9.5万美元的价格买下，随后购买者直播烧毁了画作，并将其NFT版本挂上NFT交易平台Opensea。最终，《Mornos》的NFT版本被以4倍的价格售出，约合人民币247万。
直播画面里，蒙面的持有者点燃了《Mornos》。画作熊熊燃烧，《Mornos》完成了从实体艺术品到NFT艺术品的转变，火光似乎正向全世界预告着，NFT艺术的时代正式来临。
烧毁《Mornos》直播画面
有趣的是，《Mornos》本就是Banksy为讽刺高价艺术品而创作的，画作展现了一个人满为患的拍卖场，拍卖师正介绍着一幅画作，而他身旁的一个相框里写着“我真不敢相信你们这群白痴买了这个”。
烧画者，也是《Mornos》实体作品的持有者——区块链公司Injective Protocol将烧画行为定义为“一种艺术表达”。在NFT艺术领域，NFT代币常常与数字艺术、行为艺术紧密结合，从而衍生出一种新的艺术形式——加密艺术。
加密艺术的特点非常明晰，区块链技术决定的“去中心化”，超越国别地理的广泛交易，以及各种各样的艺术形式。
如果要用例子去解释这些特点，可以这样畅想：你拥有的NFT艺术藏品可以以任何形式在数字世界存在，一条短视频、一件虚拟时装、一条代码、一件游戏装备、一张表情包，或是NBA球星的生涯经典瞬间，都可以被你收入囊中。
价值59 万美元的NFT《Nyan Cat（彩虹猫）》GIF，图源艺术星空
NFT艺术品的交易门槛并不高，即使你并不了解艺术领域，你仍旧可以进行收藏，艺术家也不用通过拍卖行、艺术品市场发行作品，通过区块链，每个人都可以参与到艺术市场中。
NFT的多种可能性让艺术领域为之震动。前面提到的CryptoPunks像素头像是当前炙手可热的NFT之一，在当前市场已有的一万个像素头像中，价格最高的达到了4200ETH，相当于757万美元，而外星人、猿人形象的像素头像更是高价难求，是NFT中的奢侈品。
昂贵的“猿人”CryptoPunk，图源网络
越来越多的艺术家也开始试水NFT领域。他们将自己的艺术作品进行铸币，使其成为一件NFT艺术品，将其发行于一级市场，如果有人买下了该NFT，很有可能还会进入二级市场的各种平台，再一次进行流通，而在每次交易中，艺术家都能凭此获利。
目前海外最热门的几个NFT交易平台基本都基于公链以太坊，如Opensea、Rarible、Foudation，这些平台有的准入门槛较低，有的则实行邀请制，但“铸币”都需要缴纳至少50美元的费用，收藏者们也可以在这些平台上进行NFT交易，但同样会收取较高的手续费。
NFT平台Opensea
除此之外，还有许多基于其他公链的交易平台，大大小小，不计其数，其中大部分平台的手续费较低，吸引了众多不知名的艺术创作者。
为NFT“蠢蠢欲动”的不止有艺术家，明星、各大企业、机构、品牌也开始下场。在年初的市场被点燃后，NBA、Gucci、推特，VISA等机构、公司相继开始收藏、推出NFT产品，从球星卡到虚拟时装，甚至是几个字符，都能在NFT市场掀起热潮。
NBA球星卡盲盒已经成为了当下NFT收藏品中的“顶级”，交易额达到了5亿美元以上。各式虚拟时装也备受关注，多件NFT潮鞋、服装在市场上卖出高价。
NBA球星卡NFT，图源微博
NFT艺术的边界还在不断拓宽，早期的NFT作品可能只是一张JPEG图片，现如今已经与音频、电影、游戏等多个领域接轨，NFT礼物、NFT盲盒等形式也开始发展。
知名说唱歌手艾米纳姆也推出了NFT，图源雪球
在商业上来看，“NFT艺术”存在着无限可能，许多“小艺术家”通过NFT崭露头角，有的甚至一夜暴富，各式平台蒸蒸日上，交易总额也在不断扩大。
未来，似乎即将到来。
虽然相较于海外稍显滞后，但是国内仍然赶上了NFT热。
阿里巴巴可能是“第一个吃螃蟹的人”。2021年5月，支付宝上相继推出了与敦煌美术研究所、《刺客五六七》的联名款NFT付款码皮肤，开始对于NFT的尝试。与此同时，阿里还推出NFT数字艺术专场，正式宣告入局NFT产业。到目前为止，蚂蚁集团已经售出近8000个限量版NFT。
IP也是国内NFT发展的重要动力。
《白蛇2：青蛇劫起》上映后，阿里旗下潮玩品牌锦鲤拿趣同步推出了相关NFT付款码皮肤，上线后，8万份NFT迅速售罄。借助IP进军NFT领域的还有腾讯，8月初，腾讯宣布发行300件“十三邀黑胶唱片NFT”，承载平台为腾讯旗下NFT交易平台“幻核”App。
近日网易力推的游戏《永劫无间》也搭上了NFT的热潮。7月12日，由澳洲 NFT 发行商 MetaList Lab⼯作室发⾏的《NARAKA HERO》系列盲盒上线币安NFT市场。该NFT系列盲盒得到了《永劫无间》官方IP授权，上线仅15分钟便全部售罄。
微博也推出了NFT交易平台“TopHolder头号藏家”，于8月初内测上线。“微博NFT作品”“拍卖自己的第一条微博”各种话题丛生。目前，头号藏家已吸引众多艺术家、收藏家、策展人入驻。
NFT在国内音乐领域也“大放异彩”。胡彦斌、阿朵等歌手相继推出NFT唱片、专辑，多家音乐版权平台宣布推出NFT板块，或与NFT平台达成合作。NFT艺术品的特性为IP、版权的保护问题提供了解决方案：艺术品上链后，通过不容更改、永恒存在的区块链，唯一性得以留存。
除国内大厂推出的NFT平台外，刺猬公社还注意到了国内的一些小型NFT平台，“薄盒”即是其中的一个。与阿里、腾讯等大厂一样，“薄盒”将NFT解释为一种“数字藏品”，并将自己定义为“数字潮玩收藏平台”。
“薄盒”平台可以通过微信登录，并定期与各领域的数字艺术家及加密艺术创作者合作，艺术家们可以通过平台上线自己的NFT艺术品，并进行发售。目前平台还在起步阶段，主要的数字藏品以盲盒为主。
8月13日，七夕前夜，“薄盒”平台上线了国内加密艺术家宋婷的NFT作品“《诗笺 花非花》盲盒”，盲盒中包含99朵AI玫瑰，开启盲盒将会随机获得一朵，并获取专属于这朵花的情诗。
盲盒详情页里这样介绍：“我们希望AI玫瑰的购买者可以用这样的方式，将物理世界中珍贵的情爱，寄托在不可篡改不可复制的区块链上，永恒镌记。”
像现实世界里昂贵的“永生花”一样，花费299元人民币，你就能获得一朵“永恒”的数字玫瑰，这朵玫瑰不能交易，只能赠送，“专属于您的爱”。
8月13日晚，《诗笺 花非花》盲盒上线20分钟，99份AI玫瑰全部售罄。薄盒的流量并不算高，盲盒受欢迎的原因可能是因为创作者——加密艺术家宋婷。
宋婷25岁，是国内最具代表性的加密艺术家之一，是2020年中国NFT艺术品拍卖记录保持者，2021年5月20日，她的一幅NFT作品在中国嘉德拍卖行以66.7万元成交，开了嘉德NFT艺术品拍卖的先河。
加密艺术家宋婷，图源网络
NFT艺术为年轻艺术创作者带来了更多机会，优质、有趣的NFT作品能为他们带来曝光，整个NFT市场的上扬也让艺术的变现之路更加便捷，把自己的作品铸币挂链，就有营收的机会。
B站UP主“Nut4y”的NFT作品
2021年7月，艺术创作者本雅明·艾哈迈德上线了自己的NFT《怪异鲸鱼》系列，9小时就全部售罄，最终入账80ETH。这样一组各异的像素小鲸鱼给艾哈迈德带来了超过35万美元的收入，而他今年仅有12岁。
《怪异鲸鱼》系列NFT，图源NFTCN
但目前国内NFT市场仍不成熟。由于我国禁止虚拟货币，国内NFT平台仍只能用法币进行交易，并且大部分平台仍旧只能作为一级市场，并不支持玩家之间交易，NFT艺术品的商业化并未完全打开。
尽管生态并不成熟，NFT在文娱行业仍有不小的潜力。
从海外诸多内容公司的尝试可以看出，NFT对于影视、游戏、动漫等领域IP的版权保护、商业化上都有潜力可以挖掘，还有相当多的可能性。
尽管NFT具有“唯一性”，但一个疑问仍然存在：为什么要收藏NFT?
事实上，成交价6934亿美元的《Everydays：The First 5000 Days》是一张所有人可以下载的图片，任何人都可以将这张价值4.49亿元人民币的图片存储在自己的硬盘中，甚至打印后挂在家里。这是很多NFT艺术品的特质，一段视频、一张图片、一张动图，世界上许多人都可以访问、复制，对其进行传播。
问题就出在这里：既然我可以随意的“使用”一个NFT，我为什么还要花高价去买它呢？
NFT的另一个特征正在于此：所有权的确定性。尽管许多人可以传播复制，但买下NFT的人才是其真正的拥有者。
“如果我有这幅画，即使这幅画挂在我的墙上，除非我有相关的真伪证明，否则它就不是真正意义上的属于我。”丹佛当代艺术博物馆的NFT相关讲座中，“艺术领域区块链研究员”艾米·惠特克这样描述NFT的特征。
NBA球星库里花费18万美金购买NFT头像，图源微博
艺术品成为NFT后，“鉴别真伪”将不复存在，区块链会将每一次交易、每一个拥有者记录在册，任何人都可以清楚的查询到，一件NFT的主人是谁。在CryptoPunks像素头像的圈子里，就有着不成文的规定：“将一个不属于你的CryptoPunk设置为你的头像是羞耻的。”
因此，NFT在版权保护方面有其独特的优势，通过区块链，不仅艺术品的交易更加快捷便利，鉴定成本也大大减少，让艺术品交易更加安全。
这不仅能作用于艺术领域，在当下讲求“稀缺性、限量性”的消费市场同样适用，加密球鞋就是最好的例子。
另一方面，NFT也让艺术具有了更多可能性。NFT出现后，可编程的数字艺术也得到了关注，甚至在艺术品、文化产品的所有权上也有新的探索。
各式NFT，图源B站UP主“dinlab”
2021年8月，一张CryptoPunk像素头像拍卖出了1201ETH（约合375万美元）的高价，拍下这张头像的，是478个人。
为了对抗NFT巨鲸（经济实力较强的收藏家），这478人联合竞拍了这张稀有的僵尸头像，这也代表这件NFT将被478人同时拥有，每个人都可以使用这张头像。这也为NFT提供了一定的社交属性：在NFT领域，同好仍旧能够形成固定的圈层。
478人“团购”的僵尸头像，图源巴比特资讯
但在繁荣的NFT市场，阴暗面也仍然存在。
一方面在于交易市场的混乱。较大的交易平台准入门槛高，对于经济实力不强的艺术创作者来说负担过大，最后平台仍旧“中心化”，变成高端玩家的内部游戏，大公司的下场更是让更多NFT玩家失去了对“去中心化”市场的信心。
小平台则缺乏监管与规则，在海外市场里，平台“托儿”和NFT贩子的存在也让不少艺术创作者受到蒙骗。许多平台还会遭到黑客攻击，由于bug漏洞，许多NFT艺术品被窃取，而在缺乏信息认证的平台，冒名顶替的事件时有发生，保护版权的NFT反而成为他人盈利的工具。
“不稳定性”也让人焦虑。今天为艺术创作者带来“第一桶金”的平台明天就可能“瘫痪”，依靠NFT生活并不现实，正如人为吹起的气球，一戳就破。
另一方面则是NFT市场的不良生态。
“泡沫”，是很多人对目前NFT市场的质疑。NFT一直摆脱不了令其出圈的“天价”标签，NFT的普遍高价更是让无数人投入这一市场，希望在发展的初期能通过“投资”分一杯羹。敦煌飞天NFT付款码上线后，在咸鱼平台上炒到150万，最终被紧急下架，这样的例子在NFT领域并不少见。
两个敦煌NFT付款码皮肤在咸鱼上被卖到两万元
价格虚高、蓄意炒作，在很多专业人士看来，市面上大多数NFT存在“噱头拉高价格”的现象，“圈内疯狂营销，圈外急红了眼”，整个市场在一种过高的期望下被不断抬起，呈现出与当初“炒币”相当类似的场景。
值得注意的是，尽管对于“区块链”“元宇宙”有着非凡意义，在当下NFT的应用场景仍旧非常有限，许多人不能理解NFT的价值所在，非良性的生态并不利于NFT艺术的未来发展。
“NFT收藏家不关心艺术,他们只关心能不能赚钱。”
夏日炎炎，各种NFT艺术展、加密艺术节雨后春笋般出现，从798到大兴，遍布整个北京城。
刺猬公社在一个NFT艺术展上发现，每间展区的墙上都挂着多块显示屏，屏幕上加密艺术家们的作品流转，晦涩但氛围感十足。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
简介：模糊输入是一种用于文本输入的模式，使用这种模式后，可以让用户输入文本内容时不用关心格式或语法，从而轻松达到预期目标。
例子： Google 搜索输入框
简介： 结构化格式是指用户在输入时，不仅仅使用纯文本输入，而是使用一组反映数据结构的字段，引导用户进行输入。
例子： Apple 双重验证码输入界面：
简介：「语句填空」使用一组短语字段将用户需要录入的信息，如文本、数字等串联为一句有指示意义的沟通语句。
例子： Visualeyes Design 网站的用户信息录入:
简介：「输入说明」是指在空白文本字段的旁边或下方，放置一个短语或示例，以解释此处需要输入的内容或提供关于此内容的详细要求及信息。
例子： 使用 Ant Design 组件-表单 搭建的创建小程序页面中的输入说明：
简介：「输入线索」是指用示例输入或说明文本以占位符（Placeholder）的形式显示在输入框中，以帮助用户理解需要输入的内容，或给出相关线索的一种设计方式。
例子： 在 Ant Design 输入框组件 的示例中（如下图），我们可以看到「输入线索」可以更好地帮助界面说明输入字段的内容或解释输入字段的功能。
简介：「密码强度计」即在输入新密码时，立即向用户反馈密码的有效性和强度。
例子： 百度网盘的用户注册页面，红色文字代表不合格，白色文字代表已合格。
简介：「自动完成」即在输入内容过程中，向用户推荐与已输入内容相关的信息，把输入行为变为选择行为。
例子： Ant Design 官网的全局搜索功能，用户只需要输入部分内容，下拉列表展示可能的结果，把录入行为变为更便捷的选择行为。
简介：「下拉选择」即通过使用下拉菜单或弹出式面板，来扩展菜单，使得菜单中可以包含更复杂的选择功能。
例子： Ant Design 官网的下拉菜单：
简介： 列表构建器是从较大的数据集中创建较小的数据集的一种模式。列表生成器的「数据源」和「结果」在同一个组件中可见。这允许用户通过按钮或拖放在它们之间移动项目。这种模式也常常称为两列多选择器。
例子： Ant Design 的 Transfer 穿梭框 组件就是基于这一模式的设计组件。
简介：「合理预设」是指系统提供默认选项，这些默认选项不需要用户做任何操作，可以节省用户完成表单的时间和精力。
这些默认选项来的数据源包括: 先前输入的会话数据、来自用户帐户的信息、当前位置、当前数据和时间等等。
案例 ：钉钉的“代办事项”设置功能，可以自动抓取到语句中的时间信息，自动帮助用户默认填写时间，减少用户的操作时长：
简介： 「错误提示」是表单出现输入错误时，为用户展示的一条引人注目的解释性消息，该消息可能描述用户如何修复错误。
案例： Ant Design 提供了多种表单错误校验样式：
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
SUS 全称 System Usability Scale ，系统可用性量表。SUS最初是Brooke于1986年编制，可以科学地量化用户体验，用于完成一系列任务场景后，对产品或系统整体宏观的感知可用性测量。
翻译过后可以得到下面的中文表，参与者在使用产品后对每个题目下面打钩来对产品进行5点评分。（小伙伴们可自行保存）
SUS提供整体可用性评估度量，由10个题目组成，奇数项为正面陈述，偶数项为反面陈述。
第4，5，10三项构成的子量表为“有效性”（Effectiveness）&“易学性”（Learnability） ；第2，3，7，8四项构成的子量表为“使用效率”（Use Efficiency）&“可用性”（Usability）；第1，6，9三项构成子量表“满意度”（Satisfaction）。
SUS适用范围广泛，产品新旧版本迭代之间对比，同类型竞品之间对比，同一产品不同终端之间对比均可使用。可采用线上线下问卷调研的方式，简单高效的采集真实用户反馈。避免在初期过早的关注细节。
当收集好用户问卷反馈过后，步骤如下：
1. 对于奇数序号的问题，将其得分减1；（比如第1题分数为4，得分为4-1=3分）
2. 对于偶数序号的问题，将其得分被5减去；（比如第2题分数为3，得分为5-3=2分）
3. 将所有问题最后的得分加在一起，然后乘以2.5；（每个题目的得分范围记为0~4，最大值为40，SUS可用性得分的范围在0~100，换算后乘以2.5）
4. 计算出的结果即为产品的SUS可用性得分。
Tips 注意事项：
1. 填写之前不要进行总结或讨论；
2. 应当要求用户快速完成各个题目，不要过多思考；
3. 第二题和第六题对于参与者可能难以理解，需要解释清楚；
4. 如果用户因为某些原因无法完成其中某个题目，就视为用户在该题上选择了中间值。
SUS分数等级与百分等级的区别：
我将其翻译过后得到中文表，可以大体上感知得出的SUS分数对应的用户可接受范围。
更加细化的SUS用户感知，可参照SUS分数曲线分级范围表：
注意到这里SUS分数等级与百分等级的区别。对照SUS分数曲线分级范围表，如果你的SUS分数为68，说明你的产品比市面上50%的产品可用性要好。也就是说这个产品的用户体验算是合格了，表明需要进行较小的改进。50%中值点对应SUS分数68。（（59-41）/ （71-65）= 3 故中值点为65+10/3≈68 ，68分是均值，因此对应百分比是50%。）
1. 量表公开免费，题目简单，只需参与者打分，实施便捷，操作简单；
2. 适用范围广泛，产品初期测试验证，竞品分析，新旧版本对比等等；
3. 研究证明SUS在样本量有限时，可以最快达到效果，可信度系数高；
4. 快速宏观有效区分可用系统（产品）和不可用系统（产品），避免在初期过早的关注细节；
5. 当团队内产生分歧时，SUS让更多的人员参与代替少数意见领袖说了算的形式，定量不追求定性。
6. 小样本量时依然呈现高度的内部一致性，产生真实可靠的反馈结果。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
众所周知，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点推送，导致销售短时间内会收到十几条消息。对此，我把盘点出来的消息进行筛选，精简了通知数量，优化了推送策略，优化后销售的满意度和消息触达率都高了许多。
我们不能把消息推送看做是一个简单的功能，要有一个系统性的思维，从盘点消息项、制定推送策略、设计消息文案/内容、建立推送任务、选择推送渠道、筛查有效用户、消息存储等各个阶段流程，都包含了很多因素需要我们仔细考虑的。
本文将以系统通知消息为例来介绍消息推送功能。
告诉用户消息来自哪里，谁发送的，让用户对消息内容快速建立认知，同时增强用户信任度，避免认为是垃圾消息；
什么情况下会推送这条消息，如任务到期没有完成。
什么时候推送给用户，多久推送一次
消息应该推送给谁，谁会受到消息，可能是系统中的全部成员，也可能是某个部门，或者某个人。
怎么样可以把消息发送到用户的设备上，如短信，app通知。
用户收到这条消息可以干什么，如处理待办任务。
用户需要做什么，可以得到什么结果，如收到线索分配通知，需要跟进线索。
推送的消息既不会打扰到用户，又能达到运营目的，我们需要在合理的时间选择合适的渠道推送合适的消息给合适的用户，这句话有点绕但是就是这个意思。
建立推送任务之前，我们要盘点系统中所有的通知消息，列出消息清单。根据上述消息推送描述的几大要素，以下是我在优化crm系统通知消息列举的消息项，
以销售订单和开票明细两个业务对象为例：
可以从以下三个角度来盘点消息项：
1、按通知来源：业务消息（线索、商机、回款、订单、任务等）、系统消息、用户信息等；
2、按触发条件：运营消息（回款预警、商机跟进等）、用户发起、待办消息、系统反馈等；
3、按通知对象：所有成员、部门、个人
我们要列出所有可能用到的消息项，不怕多，就怕遗漏。盘点完所有的消息后，可以按照上述表格列出消息清单，再根据业务目标、运营需求、用户需求、对消息去重、精简消息项，只留下必需推送的消息类型。
列出消息清单后，要明确什么类型的消息应该推送给什么人，即通知消息要匹配正确的通知对象。
系统给用户推送了消息，用户对消息内容感兴趣，点开了消息查看详情并进入目标页面或者处理通知消息，才能实现推送消息的目的。
to c产品需要对用户信息、用户行为等构建用户画像，用于精准推送或者个性化推送。to b产品的用户结构相对简单一些，一般是企业人员（员工、部门负责人、管理层等），根据业务使用场景
对用户划分角色，再以角色为基础匹配功能权限，进行权限控制，如销售、研发、财务、运营等对应不同的业务场景，推送消息侧重点也不同。
确定好了通知对象，我们需要思考以下问题：
1、什么时候推送消息既不会打扰到用户，又能引起用户的注意？
2、是主动推送还是由用户触发后被动推送？
3、多久推送一次合适，推送是一次性的还是持久性的？
4、这个消息推送触发后要立即处理吗？
3、用户怎么样能收到消息？收到消息后要做什么？
以下这个金字塔图可以解决上述的问题：
消息清单上的消息项，我们不能一股脑全部推送，要根据信息的提醒强度平衡通知量、推送时间、推送频率，避免对用户造成干扰而影响推送效果。
消息类型：对于需要用户立即处理，或者用户确认才能继续进行的操作，如预警、异常、错误、验证码、重要消息等，让用户及时发现并采取措施。以飞书为例，飞书上要是有人给你发了紧急消息，会以短信的形式提醒你。
推送渠道：电话、短信，但是一般不会用电话，一是成本高，二是对于用户来说是强打扰，而且陌生电话用户一般不太会理。
消息类型：无需用户立即处理，但是需要引起用户注意的操作，如运营消息、待办提醒、审批通知、系统公告等。对用户会产生一定的干扰性，此时要给用户一定的控制权，可以通过设置通知方式或者关闭通知提醒，减少消息打扰。
推送渠道：系统推送、应用内提醒，邮件。
消息类型：无需用户立即处理，仅提醒用户有新的状态，或者对用户操作后的反馈，如应用更新提醒、状态变更通知、操作成功提示等，对用户几乎不产生干扰。
推送渠道：一般只在应用内提醒或者系统内提醒。
提醒强度越强，通知数量越少，呈金字塔形状，强提醒通知数量要比弱提醒少很多。通知消息数量较多时，要权衡推送数量，推要克制，对于推送频率比较高且用户不需及时处理的消息，可以通过合并通知的方式减少消息推送的数量，减少对用户的打扰。
根据提醒强度选择推送渠道，多渠道组合协同推送，能够提高推送效率，但要保证多渠道消息内容一致。一般来说to b产品通知消息是以系统内提醒和办公协作应用（第三方工具，如飞书、企业微信等）内提醒的形式通知用户。
对于系统内的通知消息，不同强度的提醒消息会对应不同的消息通知组件。
强提醒的内容对用户来说是高关注度的，要求及时、主动的把消息推送到用户面前，用户要立即采取措施，对用户当前操作具有强干预性。
中提醒的内容对用户来说是中关注度的，要在合适的时间推送，可以是系统主动推送也可以用户发起的，用户可以延后处理，对用户当前操作的干预性为中等。
弱提醒的内容对用户来说是低关注的，可以是用户操作后的及时反馈，短暂的出现后就消失，或者可以延后处理的消息，对用户当前的操作几乎无干扰。
用户正在使用crm系统办公，同时飞书也在线，我们该如何推送消息？
用户可能已经在系统内查看了消息，再把消息推送到飞书上对用户来说就是重复提醒了。如果飞书上已经读了消息，那么系统内该条消息就要标记为已读。
用户收到推送消息后，要能快速抓到重点内容，知道这条消息表达了什么，是否需要进行处理。
一般我写消息内容时是会遵循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端产品？
常见的有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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近业务里面有个需求就是开发一个类似微信的聊天页面的H5，不需要像微信那么复杂，但是得有个样子，弄了半天之后终于有了个样子。决定写个博客记一下这个过程，希望后续不会鸽
打字的，聊天item，聊天list。大概就这样了
其中聊天list 用了一个better-scroll这个第三方插件。
首先第一步就是开发这个聊天item
分析一下需求，别人发过来的和我们发过去的是两个排版和样式，但是不用单独写两个，用个逻辑区分一下就可以了，也可以动态绑定css什么的差别很小。
<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> 这个是只有1边的，逻辑就是在消息那边加个v-if，判断来源，也可以动态绑定css
弄好以后就这样
<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> 个人觉得css还是比较重要的，这里用了sass来写。主要解决方案就是用一个display:flex配合上flex-direction: row-reverse让头像和消息左右排列
<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>
这个是没有调样式的，只是为了自己嗨弄的，可能会很丑。
最后大概就是这样的
其实我觉得很简单，难点就2个。首先是滑动，这里用了better-scroll这个组件，可以在网上搜，挺好用的。另一个就是页面布局的问题，写点css还是没得问题的。
首先去better-scroll的官网，按着他的核心逻辑抄一下。不详细谈了，总之来说，会有三层嵌套。我个人命名他们为: wrapper 和content和 item 这三层。
先弄一个json，当做会被填充的数据。
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() }, ] 然后开始写vue的代码
<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>
最后是这个样子的了
文章来源：简书。作者：Good_Nine9
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com