在灵笼中，白月奎开着奥迪在满是噬极兽的世界驰骋。小伙伴们也惊呼连连。其实，这是一款名为AI trail的奥迪概念车已经被生产，预计2030年上市，那现实中是什么样的呢？接下来，就从奥迪开始，为大家盘点未来感的汽车是什么样子的吧。

1.奥迪AI trail 

这也是一辆纯粹的SUV。它有四个电动马达，每个轴距上有一个，这使它具有四轮驱动能力，它在公路上的最高速度为每小时81英里，越野范围为155英里。它的轮胎压力可以根据地形，在移动中调整。

奥迪 AI trail外观

当你坐在里面，它会给出一个令人难以置信的宽广的观察范围，她甚至可以让你看到轮胎。因为里面有足够的空间，甚至没有任何多余的显示器，它是完全由你的手机进行控制的。

把手机作为屏幕，从而达到更广阔的视野

你可能已经注意到没有大灯，但这是因为它用于照明的灯被安装在自主的无人机上，这些无人机会在前面飞行，为你照亮道路。当你在光线不好的环境野营时，你可以通过折叠无人机，手电筒等照明设备。

无人机搭载照明灯

充当照明设备的无人机

2.雷诺EZ-Go 

雷诺在2018年发布了他们的电子出租车概念车easy go，同样计划在2030年面世。其设计理念是：在未来，汽车的所有权已经不在是一种趋势，当我们需要旅行时，我们只需预约一辆自动驾驶的汽车。雷诺高层表示，网约车和共享移动服务将会是雷诺的主要发展方向。当你来到一个陌生的场景，你可以透过360的窗户来欣赏沿途的风景。进入内部，内部空间可容纳六名乘客，呈U型排列车顶从前面打开，提供存储空间。并且它还有四轮转向功能，意味着它可以在城市间轻松穿梭。当然，作为更明显的旅途用车，它的车速最高限制在50m/h。对于行动不方便的乘客，它有一个可伸缩的斜坡，当你需要下车是，将自动伸向路边，让乘客可以更加方便的进出。

在城市穿梭的ES-Go

通过显示器可以看到基本信息

汽车内饰

方便进出的设计

3.terrafugia tf-x

相信小伙伴们多少在科幻电影当中看到“会飞的汽车”，我在小的时候看过一个电影《第五元素》，依稀记得家里的七大姑八大姨，嗑着瓜子，坐在炕头，讨论着“我们有没有机会坐上这样的汽车”。这部这款汽车可能在不久的将来将会满足大家的远景。

电影《第五元素》

如果你正在寻找未来的汽车是什么样子的，那么 terrafugia tf-x就是我们我们理想的设计。这款汽车售价 28 万美元起，折合人民币约为190万左右。它拥有一双可折叠的螺旋桨，隐藏在车机两侧。

TF-X外观                                                                              展开双翼的TF-X

这款汽车很快就由波士顿的设计公司开发出来了，这款概念车比它最初看起来的空间要大得多，它是插电式混合动力，能够实现全自动飞行，在紧急状态下可以手控或者遥控。在动力系统上采用插电式混合动力传动系统，有两个600制动马力的电机和一个33制动马力的燃料发动机，电脑自动控制，拥有有四个座位，可垂直起降空中续航可达640 公里，最高时速为 185 公里/小时，但是它在路上的最高速度或它的范围还没有被公司宣布，即它可以飞到可伸缩的翅膀上折叠出一个连接的螺旋桨的事实。

与此同时，各国的航空当局也在讨论和协商制定管理这一新兴交通业的政策和安全标准。如果未来将会普及飞行汽车，那么开上飞行汽车是否需要飞行驾照？人们是否会花费超过100万RMB来购买？

正在倒车的Terrafugia TF-X

飞行中的Terrafugia TF-X

4.雪铁龙19_19

雪铁龙1919确实是一款具有未来设计感的汽车，它的目的是要做到其舒适性已优先于其他每一个元素，它的设计理念是未来航空工业。结合前挡风和立体化的玻璃覆盖，上半部分更像一个漂浮的太空舱。

雪铁龙19-19外观

它在车顶后部安装了激光雷达探头，主要用于在长距离行驶时的自动化驾驶。 它的踏板和方向盘，是可以伸缩的。但当驾驶者想自己驾驶时，踏板会降到合适的位置，方向盘会展开。当用户不想驾驶的时候，方向盘会自动缩回，智能音箱自动升起，几乎像一个潜望镜一样，帮助用户实时检测驾驶情况，并且把信息显示在挡风玻璃上。

自动驾驶模式，信息在挡风玻璃上显示

5.辆丰田LQ

丰田LQ的设计原则是，让司机和他们的车辆之间有更加紧密的联系。所以通过加入最先进的先进的AI，称为Yuyi，将人工智能打造成你在车内最好的朋友之一。 

会眨眼睛的LQ

它是全电动的，拥有SAE  L4级自动驾驶系统，这意味着不需要用户的参与，因此车厢的舒适性就显得尤为重要。在座舱内的乘客被不断地监测，AI将根据司机的情绪和警觉状态来调整温度，甚至是驾驶模式。并将进一步尝试在情感上吸引司机，使他们在旅途中保持愉快的心情。车内的每个控制都是语音激活的，这代表车内几乎没有任何物理按键，所有的信息将会投射在挡风玻璃上。甚至可以调整照明水平，在空气中释放平静的感觉，AI也会选择自己的音乐播放列表，唤起它认为目前最符合你情绪的音乐。

AI根据用户心情播放相关音乐

正在自动驾驶的LQ

6.梅塞德斯-奔驰Vision AVTR

如果你想看到世界上最有未来感和最有异国情调的轻型概念车，那么你一定要看的就是这辆车。相信小伙伴们都看过《阿凡达》这个电影，无论是科幻的剧情，还是绝美的场景，都在当时引起了不小的轰动。这辆车的灵感就是来自《阿凡达》这部电影。而且契合度可谓是非常的高。

阿凡达场景                                                                  阿凡达宣传海报

它外观采用了仿生设计，整体观感十分科幻。车身两侧采用了全透明设计，意在大幅提高车内视野，强调车内、车外的交互。它还使用了33瓣采用了独立的仿生襟翼，看起来像爬行动物的鳞片，可以根据不断变化的条件来调整车辆上方的空气流动。

《阿凡达》电影中的精灵树

他的轮胎，借鉴了电影中，精灵树的样式，并且它去掉了传统的圆形轮，胎取而代之的是球形轮胎，它提高了机动性，对周围的影响较小，并且能够扭转30度，这意味着汽车可以以螃蟹的方式侧向移动。

AVTR外观

可以依据气流和感应翻转的仿生襟翼

内饰以流动的波浪和花朵形状为基础，这看起来是有史以来最舒适、最高效和最愉快的旅程。这辆车会与你交谈，了解你想去的地方，在给它下达指示后，你需要做的就是坐下来，让它做所有剩下的事情。值得一提的是，车内同样没有任何按键，当你伸出手站，并且注视手掌时，按键就会显示在你的手心上，你进行移动点击等操作。

AVTR内饰                                                             显示在手掌上的虚拟按键

通过手掌来控制方向                                                用手掌进行交互

通过对趋势的了解和分析，相信小伙伴们对未来感汽车有了新的认识和理解。目的也是为了让大家更好的把自己的理念和设计与未来汽车相贴合，亦或是产生灵感，发散思维，做出更好的创作。希望在不久的将来，无论在汽车造型，还是内饰，或是仪表等，可以看到大家充满激情的设计。

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

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

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

什么是查询列表？

首先我们先了解下官方Ant Design对查询列表的定义：

简介：

查询列表可以查看和处理大量的条目数据，常有导航至详情的作用，

用户可在列表页对条目进行筛选、搜索、对比、新增、分析、下钻至条目完整详情页等操作。

设计目标：

帮助用户更高效的查看、处理、查找条目。

设计原则：

易读性：采用格式一致外观，突出有利于对象识别的关键信息。利用富交互分层展示信息以减少认知负荷；

可寻性：列表以易于浏览的逻辑排序。提供合适的搜寻组件帮助用户快速查找信息；

常规布局顺序：

数据过滤 + 数据统计 + 数据列表 + 批量操作

模板页面示例：

现在有了官方解答指导，我们就先从分析模仿开始

查询列表有什么？

从四个维度开始一一分析：

一、数据过滤：

常规的数据过滤分为两种类型：

1、条件筛选：

特点【结构化+有限范围】，筛选需求和数据都是结构化的，

比如有一个用户信息表，需要筛选出性别【男】+城市【北京】+年龄段【18-24岁】的用户，就是因为信息属性可以被量化和拆解处理，我们才能多条件组合筛选（且的关系）出来；

组件：选择器（单选/多选）；

布局：上下结构（常用）、左右结构，条件多时要配合可折叠操作；

形式：区域堆叠、表头、弹窗；

2、搜索查询：

特点【非结构化+模糊/精准匹配】，搜索的需求是非结构化的，

比如还是用户信息表，需要查到一个叫【宁荣荣】的信息，你就只能去手动打字去搜索，因为姓名是开放式的信息，无法被结构化处理。

组件：基础搜索框、高级搜索框；

布局：跟随列表，常放置其左上角或右上角；

关于具体使用，搜索不用多说，遵循系统统一性原则，选择一处固定位置就好，

对于B段产品，业务本身比较复杂，筛选条件偏多，原则建议从使用高低频入手，高频显性，低频置后、折叠都可（后续可以出一片详细的筛选篇分享下）

二、数据统计：

数据统计一般作为查询列表的重要配角出现，方便用户直观了解到当前页面的统计信息。

就是列表数据提炼出来统计信息，数据名称+数值，左右、上下布局都可，

有一点强调一下，业务的数据统计要求和条件筛选联动变化，就要放在条件筛选下方，

如果统计数值是固定值，就放置条件筛选上方。

三、数据列表：

这里的列表主要陈述标准的【表格Table】形式，

表格被公认为是展现数据最为清晰、高效的形式之一。

它常和排序、搜索、筛选、分页等其他元素一起协同，适用于信息的收集和展示，以及操作结构化数据，

明显优势就是结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。

常规内容构成：

Header：标题、筛选（高频）、操作按钮、表搜索、icon（列设置、刷新、全屏）

Table-Header：复选框、序号、列名称、icon（排序、提示、列筛选、列搜索）

Table-Content：数据内容、按钮

Footer：多选数量，分页器

四、批量处理：

批量操作是作用于整个页面的操作，故放置与页面最底部，当然这个可以根据应用场景调整位置，

常见操作有【批量删除】【批量禁用】【批量导出】。

如何设计查询列表？

笔者也是从0开始接触B端设计，开始查阅了相关很多设计规范体系，一顿狼吞虎咽，依葫芦画瓢出了设计模板

下图就是依据Ant Design设计出的第一版查询列表模板

经过产品和研发评审，这样的布局表现虽说“五脏俱全”、“兼容性较好”，但是脱离了用户实际使用场景和交互路径，割裂感也很强，

举个例子，你准备盖一个房子，常规讲应该有有客厅、卧室、书房、厨房和卫生间五个空间，但你现在只是单纯用砖块砌了五个房间，大小一样，毫无顺序，想必你也不会这么盖···，我们现在从头开始，你是不是会考虑：

1、是不是进门应该是客厅，是不是应该大一点好接待客人；

2、书房是不是应该远离，减少噪音；

3、哪些房子需要窗户，窗户朝哪边好通风，阳光充足；

4、等等···

总结一句：我们设计出的交互操作&视觉呈现，要契合用户实际使用场景和路径，而不是自己YY。

怎么获取你想要的答案？调研和竞品分析。

调研可以向产品、销售、交付人员获取你想要的信息，

竞品分析可以找同类型产品进行优劣分析，取其精华。

下面列举调研和竞品分析的几个点说明下：

调研一

问：产品或销售登门拜访客户时，演示电脑分辨率是多少？客户使用电脑分辨率是多少？

答：多为老式笔记本电脑且分辨率偏小，1440*900、1366*768偏多。

机会点：上图数据来自百度统计-流量研究院也只能作为辅助参考，最终还是要看产品实际用户设备情况，为了保证页面内容尽可能多的展示在屏幕上，布局得紧凑，要优先适配小屏幕效果，所以设计稿尺寸得调整为1440*800（去除浏览器顶部页签+地址栏+Win任务栏高度，再取整）。

调研二

问：询问客户使用查询列表页面是否能高效的查看、处理、查找条目

答：查询查看没问题，就是一屏数据内容展示的太少，标题栏、筛选和数据统计占了太多高度，而且筛选也不常用，导出按钮在底部不明显，横向滑动很难用，看错行。

机会点：优化布局，筛选考虑折叠或者表头筛选，横向数据堆积能否换行展示，导出操作是否可以放在上方？

竞品分析：纷享销客CRM

优点：列表内容占主要视觉面积，筛选采用表头和自定义配置条件功能结合，列内容可自定义隐藏/显示/前置和列固定左侧，优先展示用户自己想看的信息，减少横向滚动条操作和提升小屏用户体验，将主动权交给用户，列表视图和分屏视图也满足了不同用户的查看需求，以上这些都是很好的优化方向。

竞品分析：广联达

优点：同样列表内容占主要视觉面积，高频筛选放出来，低频筛选采用折叠交互方式，用户有需要则点开【更多筛选】去操作，顶部有数据统计支持总揽，Table内容对于强关联的内容进行上下组合（节省横向空间），所有的操作按钮集合到右上角，方便用户定位操作。

总结一下：

以上就是笔者在调研和竞品分析上可以获取到的主要信息，虽说第一版套用AntD模板的设计并不理想，但对于初入B端行业的笔者来说着实重要，对查询列表的框架、功能、和交互有了基础指导和了解，才能有后续的一些针对特定业务场景的设计优化改版，凡事还是得现有基础理论支持，后面的路才会走的更远。

言归正传，下图就是针对上面的总结优化后的查询列表，相比第一版（可上划参考对比）变化还是挺大的，各位可以对照的优化点细细体会下：

1、取消面包屑（系统深度较浅），优化（减少）标题栏高度；

2、增加数据统计，区域板块使用分割线划分，减少割裂感；

3、页面操作按钮集合放置在右上角，主按钮统一在最右侧；

4、高频筛选常驻+表头筛选结合交互（这里其实还是有问题的，对于组合筛选操作并不易用，待优化）；

5、增加Table刷新和列设置操作（刷新和设置icon）；

6、列锁定（锁子icon）可以快速自定义设置优先左侧固定；

7、Table内容根据业务内容属性合并上下组合展示，节省横向面积（宁可上下滑动，也不要横向滑动，至少减少横向滑动的距离）；

这一版看起来整体架构层级依然清晰明确，从视觉角度看更丰富、更有节奏感，从交互来看也更符合用户的操作场景，新增了几个辅助功能，让用户可以根据自己的业务需要自定义配置列表内容，更有掌控感，能更高效的查看、处理、查找相关信息，这也是基本达到了查询列表的设计目标。

经过和产品经理沟通，此次优化思路和方向也很准确，获得了肯定，后续的迭代还需持续进行。

调研和竞品分析带来的好处想必各位也体会到了，凡是我们不了解不精通的，就去多看看多搜搜，总会有收获，站在巨人的肩膀上总会看的更远。

Ending

这次的分享是自己在探索B端道路上的小经历，同时也体会到一些更深层次的东西，比如设计的意义在哪，什么是好的设计，怎么才能做出“好”的产品，在此分享给各位，希望能给大家带来些思维上的变化，共同进步。

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

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

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

使用图片作为背景

这里的图片选择要突出核心内容且一定要高质量，不要选择杂乱无章或与主题无关的低质量图片

将图片于背景进行融合

结合页面表达需要，选择合适的配图并做融合或出界的设计，会让画面极具吸引力和强烈的设计感。

将高质量的图片紧密的放在一起，不留任何间距

当画面主要以高质量图片吸引用户注意时，尽可能的利用更大展示面积，这样会显得更加高级和有视觉冲击力。

在图片下方添加色块

这里的色块要注意跟图片的主色调保持相近，可以直接吸图片上的颜色然后找找邻近色就好了，色环上 30°区间内的颜色就比较和谐。

在图片下方/上方增加图案或形状

这里的形状建议不要太过于复杂，用一些基本图形就可以，比如圆点、方块矩形之类的，增强画面的形式感

在图片下方或上方增加文字、图案或不规则形状

这里的文字、图案或不规则形状跟上面的技巧类似，都是起到装饰的作用，但文字的话有时候还要注意识别性，比如文字比较紧凑的时候。图案或形状更多的是起到视觉引导的作用。

将图片剪切到文字或形状中

这个很好理解，就是以文字或形状作为遮罩，增加画面的设计感，文字尽量选择粗体

在图片周围增加一个非常窄的边距

这个技巧可能跟第 3 条有些冲突，其实这 2 个方法都是可以的，要根据页面具体的排版情况灵活使用。

在图片上增加颜色层

这个技巧也比较容易理解，一般会选择饱和度较高的颜色应用在充满活力的页面上，增加画面的冲击力。

在彩色叠加到图片中的一部分上

这个技巧跟上面的有些类似，只不过是以小面积叠加的形式，颜色一般选择品牌色或主题色，与背景尽量有较大反差会更加容易出彩。

将图片剪切成其他形状

这个方法有一点需要注意的就是剪切的形状不要过于复杂，一般用基础图形就好

以上，就是我总结的一些可以用来操作 UI 图片的实用方法，这些方法可以使得作品变得更加有视觉感也更加专业。

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

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

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

1.1 图标的主要类型

理解图标，首先关注的是图标本身的类型，在整个 UI 体系中，图标基本就分成3个大类：

工具图标：包含一定产品功能隐喻的简化抽象图形，代替文字节省界面空间，方便用户理解

装饰图标：主要目的是用来装饰界面的视觉元素，样式大于功能，常用于节日活动中

启动图标：产品的启动图标，即用来在系统中打开该产品的图形按钮，基本以自身 LOGO 为主

在 B 端项目中，应用最广泛的必然是工具图标，而装饰、启动图标却鲜有露面机会。但出现的少，不代表没有，解释工具图标前，我们先优先讲解下装饰和启动图标在什么情况下会出现。

其中，SAAS 类服务就有很多会重点强调品牌、情感化设计的案例，例如大家比较熟悉的阿里云和腾讯云。项目中就大量启用 3D 化的装饰图标提升界面的质感。

启动图标则会应用在一些比较大型的项目里，当项目出现了很多下级功能模块或类似插件的体系时，就会采取使用应用图标的方式作为入口。

比如 Figma 也是一个 B 端工具，它的插件列表中就可以看见不同的启动图标。还有类似 Slack、Invision、Teambition 等产品，一个庞大的产品生态就必然会衍生出强化不同子产品身份的需求，就自然而然会用到启动图标了。

最后，就是我们熟知的工具图标了，前两种图标，在前期画不好不要紧，毕竟这类规格的产品会有经验更丰富的设计或总监坐镇，新手当个切图仔即可……

但是工具图标，重要性就不言而喻了，B 端项目对工具图标的需求非常大，几乎每个组件中都会包含图标。

虽然今天网上有非常丰富的图标素材库，但在形式各异的 B 端项目里依旧是供不应求的，各种行业特有的功能、实物、隐喻，只能设计师自己完成。

B 端设计师在图标设计领域的主要工作，就是确定图标样式、设计图标、导出切图。下面的分享我们也会主要围绕工具图标展开。

1.2 B端工具图标的风格

工具图标的应用主要包含两个部分，线性图标和面性图标。

这里再提图标风格，不是把以前的知识点重新讲一遍，而是要强调 B 端图标的特殊性。和 C 端相比，B 端图标的实用属性更高，并不需要过多凸显本身的视觉风格。

所以，工具图标中，使用大量渐变、插画、投影的类型都要排除掉，它们对 99.9% 的项目都只会造成体验的负影响，不要被网上的追波风飞机稿给带偏。

适合 B 端项目的工具图标只要应用最基础的线性和面形风格即可，一定要划分出差异，应该只包含圆润、纤细、尖锐这几种。

很多人好奇线性和面形图标在 B 端设计中有什么使用上的差异呢？答案是没有差异。

线性和面形的使用，纯粹看设计师在当前场景判断哪个合适用哪个，只要保证对应图标风格统一即可。

不过如果遇到一些比较特殊的情况，比如要表现各类设备的复杂图标，那用线性的做法还是相对合适和简单一点。

1.3 图标的统一性规范

对 B 端设计来讲，独立设计图标的步骤是必不可少的，应该掌握的图标规范还是必须要懂的。

我们虽然没有 C 端那么多风格和技法的拖累，但想画好 B 端图标却多出了其它难点，那就是一个页面中出现的图标实在是太多了。

这就引发了我们要讲的第一个规范要点 —— “统一性”，所有同规格类型图标具有一致性的特征，这些特征包含了：

• 粗细一致：首先使用统一的描边、线段粗细参数

• 圆角一致：使用一致的圆角数值，不要一下尖角一下圆角

• 透视一致：使用接近的透视角度，不要有的侧视有的正视图

• 大小一致：视觉的大小保持一致，有均衡的大小感受

如果不能保证统一性的基本要求，那么整个页面看起来就会非常的廉价、业余。很多新手处理 B 端项目就是应用了多套素材库图标，它们的细节完全不一样，统一性当然无从谈起。

而让整套图标保持统一性，是相当有难度的，其中最难的一点，就是如何让一套图标的大小均衡。虽然我们要对每套图标确定一个固定的尺寸，但不代表图标实际图形的长宽数值是完全一致的。

几何图形对视觉有一定的欺骗性，有不同的大小体验，比如下方案例（鱿鱼游戏乱入？）：

所以，基于这样的特性，每个图标本身都包含了两层属性，图标的占位尺寸和视觉尺寸。占位尺寸指它在界面中的实际占地大小，是透明白的，排版的时候以这个尺寸作为实际的边缘来测量。

而视觉尺寸，则是在占位尺寸下图标图形的实际大小，这个大小是带给我们实际视觉感受的部分。一套图标的不同图形必然视觉尺寸是各不相同的，我们用占位尺寸包裹它们来方便我们进行统一的应用。

所以，使用成熟的图标素材必然会发现图形周边还会有透明的空白区域。当然，不同的素材，这个留白也是有区别的，下一个小节就会解释。

最后要声明一点，一套项目中可以包含多个规格（2-5个）的工具图标，比如导航用的图标比普通工具图标更复杂一点，设计师只要保证每种规格保持的统一性即可。

1.4 图标的栅格系统

图标越多，大小的控制越困难，所以专业的图标库绘制就必然会应用图标的栅格系统进行辅助。

在 Ant 的体系中，一个基于栅格的图标实际包含3层，背景层、格线层、图形层。

背景层，即图标展位尺寸，需要先确定出这个元素的大小，然后才是里面的绘制区域。通常，栅格系统会为边缘预留 1-4 像素的内边距（出血位），正所谓四周留一线，日后好相见。

格线层，则是使用的栅格线段，也是最重要的部分。格线层通常由 4 个基本图形构成，包含正方形、圆形、水平长方形、垂直长方形。

这四个图形的长宽大小不一，原因是为了对应几何图形视觉尺寸不同的特征。把它们并列排列，就可以发现它们的视觉大小非常接近。

这些格线的作用，就是提前帮我们确定好视觉比例，帮助我们快速绘制相同图形类型的图标。

但是，不是完美符合这四个图形要求的图标该怎么办，总不能格线把所有轮廓都给你实现出来吧？

格线的另一层作用，也就是最重要的作用，其实是一个用来做测量的工具，而不是轮廓依据。在几何视觉差中，最基础的大小原理是占用面积越大的图形，尺寸感受越大。所以，长宽一致的正方形大于圆形，圆大于三角形。

所以当我们绘制的非常规图形，和类似格线进行对比时，长宽缺少的一侧，就要由另一侧增加数值来填补它的面积。

比如下图 Ant 官方的电脑图标，它的宽是横向矩形，但是中间区域面积较小，所以增加了高度进行平衡。

再看一些其它的案例

这一步没有固定的参数使用技巧，设计师需要将完成的图标置入到其它图标旁边进行调试，确保尺寸是合适的。

格线只是一个图标大小设置的参考工具，一切以最终效果为标准。

理解完图标的基本规范，就到图标的使用逻辑了，解决一些常见的设置误区。

2.1 图标应该做多大

图标该做多大的，这是目前被问到最多的问题。本来应该是非常简单的一件事，但很多工作多年的设计师也搞不清楚。

仔细捋了捋，罪魁祸首就是 AntDesign 这套规范中对图标画布的解释了。

要重点强调，Ant 设计图标的意图，和一般项目的是完全不同的。Ant 作为一套庞大的开源项目，它的图标核心特征之一就是 —— 适应性。

这些图标要被应用到各种不同的设备、显示器、系统中，图标尺寸会用多大，在几倍图环境显示全都是不确定的。所以图标一开始按越大的规格完成，后续实际应用中的缩放、匹配也就越容易，适应性越高。

但是，在我们自己的项目中，这种做法是完全没有必要的，1024 图标的负面影响包含：

• 像素数过多使得数值的制定难度大大提升，不管是元素尺寸还是描边粗细

• 矢量图形源文件进行缩放很容易发生错位，提前轮廓化会破坏源文件

• 缩放图标后描边的数值往往会出现非整数和 0.5 的状态，虚边问题严重

在常规项目里，一套项目是可以包含不同尺寸和规格的图标的，而不是我们做一套相同风格的图标在整个应用中无差别使用。

这也意味着，每个图标在产品中的使用场景通常只有一个尺寸，不需要去面临缩放的情况。即使需要缩放，也只是这套图标中的少数几个需要，或者相对特殊的项目。

所以，图标尺寸设定，就是根据当前位置合适的尺寸来制定。可以使用素材在已经设计好的布局中尝试多大的数值合适，然后创建同样的数值即可（尽量以4的倍数为标准）。

2.2 素材的正确使用方法

我们知道图标的素材非常丰富，不管是 Iconfont、IconPark 还是 Iconsearch 等网站，都提供了海量的素材。但是只要稍微专业点的项目，往往素材库都满足不了，部分规格的图标还是需要我们自己重新绘制。

所以说图标素材就完全没用了吗？当然不是。

图标的正确用法是作为一种快速试错的参照物，它可以帮助我们实现：

• 参考图标的具体尺寸在哪个数值最合理

• 参考当前场景使用面性还是线性的风格更合理

• 参考图标的设计风格是圆还是尖锐更合理

• 参考相关隐喻的图形样式哪种更合理

在项目的界面设计阶段，我们一向建议优先使用外部的素材，尤其是 IconPark 这种比较统一，还可以快速调节图标样式的工具网站。

这个过程即使素材找不到和寓意一致的也没关系，用相近的图标替代就可以。等到页面布局基本完成以后，最后再集中精力对需要绘制的图标重画一遍（甚至是在开发阶段绘制）。

通过别人的图标来快速匹配尺寸、风格、样式，会帮助我们节省非常多的时间，也有助于我们设计出更专业、美观的图标。

另外，就是针对项目一些偏小尺寸的通用图标，就可以比较放心的应用素材，例如翻页的左右、更多、下拉、搜索等等。

2.3 图标的色彩和状态

图标的尺寸、样式都确定了，最后就是关于图标的色彩和不同状态的制定了。

前面讲过，B 端项目对图标的装饰属性没有那么迫切，所以正常情况下，太花哨的图标是要尽量避免的。彩色、渐变色、投影，都不应该在这个情况下胡乱使用。

常规的图标只要使用中性色即可，而需要特别对待的图标，色彩可以从主色或者辅助色中选取。比如需要高亮显示的打勾或者打岔。

当然，如果项目涉及到一些特殊的工具图标，类似工厂、工业领域表达实体设备的拟物图标，可以打破这个原则。但是，同样避免这套拟物图标的每个图标用色不同，尽量只使用 3 种以内的颜色完成拟物的填色。

同时色彩的使用还有一个重要的意义就是对图标不同状态的呈现，部分图标会承担按钮的功能，包含默认、选中两个基本状态。

普通权重的图标，未选中状态可以在默认色彩基础上使用透明度来实现。

高权重的图标，则可以在选中的状态替换色彩，或者更改图标的类型，将原本的线性更改成面形并填充色彩制造反差。

完成所有图标的设计以后，最后一步就是切图和导出了，这决定你的图标能不能被正确运用到线上项目中。

3.1 图标的收纳和命名

在一套专业的 B 端项目中，已经设计好的图标是设计规范的 “资产” 内容之一。图标的文件不能散落在项目的各个界面里，而是在规范页面中有统一的整理和收纳。

这种做法的流程是，先在软件的规范库中创建对应的图标组件（ Symbol / Compoent ），然后再在具体页面中应用，方便后续的统一管理和修改。

而在这个过程中，我们也需要对图标有正确的命名方法，来确保团队调用、检索图标的效率。通常，我的图标命名规范如下：

尺寸 / 类型 / 图标名-状态

示例：

48px/导航图标/表盘页-默认

24px/一般图标/搜索-默认

“/” 号的引用主要是方便软件中对组件层级进行划分，而我调用图标的规则势必是先从尺寸开始，再选择对应规格，最后类型和状态。

提前命名也是方便后续我们切图和导出，但要提及一点，图标的命名不要追求英文化，因为我们的词汇量不可能实现正式的英文命名规则，只会写一堆大家都看不懂的单词。

而开发在使用我们的图标切图时，也不会用我们之前取的命名，会根据自己的命名习惯重新命一遍，写个让他能看懂的名字远比用乱七八糟的英文强。

3.2 图标的切图格式

接下来，就要解释切图的规则了。很多没有经验的设计师切图就只是随手加个切片，然后上传蓝湖发给开发自生自灭了，这是一个非常不合理的操作。

再或者，强行使用 Fonticon 格式，而不管实际情况如何，造成最后实现效果完全不同步或实现不了。

切图是通过前端调用并在浏览器中进行显示的图形，而要被浏览器正常显示，就有必要了解适合使用的切图格式。

图片的格式包含位图和矢量两种，位图是通过记录像素色值的图形格式，假设一张图是 100*100 像素，那么记录 1W 个像素点的色彩，所以无法支持无损缩放。而矢量则是通过记录点线面的坐标绘制出显示图形的格式，可以支持自由缩放。

理论上，矢量格式是最佳的图标切图格式，但是它的限制同样有很多，例如：

• 无法记录渐变色

• 导出轮廓容易有错误

• 无法记录拟物图形

• 无法记录投影元素

前面说过，普通项目中同一图标是很少出现一会儿大一会儿小的需求，所以矢量最大的特征无损缩放，往往就不需要我们去考虑。矢量格式切图的主要出发点是用来应对移动端显示器 1x、2x、3x、4x 等不同倍率缩放的问题，而不是网页端的基本使用。

当一套项目中出现了矢量格式无法覆盖的图标时，那么即用矢量切图，又用位图，就会显得非常的混乱。只有类似 LOGO 等图形元素，才需要考虑 SVG 格式，而不是一看到图标就上。

所以，最适合切图的格式就是位图的 PNG 格式，一方面它是无损的，另一方面它支持透明背景，在切图应用上可以完美和设计稿结合，而这是其它大多数位图格式不具备的特征。

当每次项目完成以后，并不需要通过蓝湖来实现切图的导出，如果切图文件分散在各个项目页面里，那么一定会有很多图标被遗漏，尤其是图标的不同状态切图。

所以，最理想的切图形式，就是将所有图标完成整理和命名以后，一起框选，然后导出成 PNG 格式，再同步给程序员即可。

以上就是关于 B 端图标应用的所有知识点了。后续会将这些内容进行分拆，更新到原子核系列课程中去，会有更细节的案例说明。

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

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

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

一、前言

随着互联网的快速发展，B端行业也逐渐崛起，很多企业管理中使用的软件我们通常称其为B端管理系统，而在B端系统中“权限管理”是必不可少的功能，不同的系统中权限的应用复杂程度不一样，都是根据实际产品以及需求情况而设置合理的权限。而我们现在对于权限的设置基本上都是建立在RBAC权限模型上的、扩展的，下面我会通过介绍RBAC权限模型的概念以及结合实际业务情况列举权限设置的应用。

二、什么是RBAC权限模型？

RBAC是Role-BasedAccess Control的英文缩写，意思是基于角色的访问控制。RBAC认为权限授权实际上是Who、What、How的问题。在RBAC模型中，who、what、how构成了访问权限三元组，也就是“Who对What进行How的操作，也就是“主体”对“客体”的操作。其中who是权限的拥有者或主体（例如：User、Role），what是资源或对象（Resource、Class)。

简单的理解其理念就是将“角色”这个概念赋予用户，在系统中用户与权限之间通过角色进行关联，以这样的方法来实现灵活配置。

RBAC其实是一种分析模型，主要分为：基本模型RBAC0、角色分层模型RBAC1、角色限制模型RBAC2和统一模型RBAC3。

RBAC权限模型是基于角色的权限控制。模型中有几个关键的术语：

• 用户：系统接口及访问的操作者

• 权限：能够访问某接口或者做某操作的授权资格

• 角色：具有一类相同操作权限的用户的总称

  
  

1）RBAC0

RBAC0是RBAC权限模型的核心思想，RBAC1、RBAC2、RBAC3都是在RBAC0上进行扩展的。RBAC0是由四部分构成：用户、角色、会话、许可。用户和角色的含义很简单，通过字面意思即可明白，会话：指用户被赋予角色的过程，称之为会话或者是说激活角色；许可： 就是角色拥有的权限（操作和和被控制的对象），简单的说就是用户可使用的功能或者可查看的数据。

用户与角色是多对多的关系，用户与会话是一对一的关系，会话与角色是一对多的关系，角色与许可是多对多的关系。

2）RBAC1

RBAC1是在RBAC0权限模型的基础上，在角色中加入了继承的概念，添加了继承发的概念后，角色就有了上下级或者等级关系。

举例：集团权责清单下包含的角色有：系统管理员、总部权责管理员、区域权责管理员、普通用户，当管理方式向下兼容时，就可以采用RBAC1的继承关系来实现权限的设置。上层角色拥有下层的所有角色的权限，且上层角色可拥有额外的权限

3）RBAC2

RBAC2是在RBAC0权限模型的基础上，在用户和角色以及会话和角色之间分别加入了约束的概念（职责分离），职责分离指的是同一个人不能拥有两种特定的权限（例如财务部的纳入和支出，或者运动员和裁判员等等）。

用户和角色的约束有以下几种形式:

• 互斥角色：同一个用户在两个互斥角色中只能选择一个（也会存在一个用户拥有多个角色情况，但是需要通过切换用户角色来实现对不同业务操作）

• 基数约束：一个用户拥有的角色是有限的，一个角色拥有的许可也是有限的

• 先决条件约束：用户想要获得高级角色，首先必须拥有低级角色

  
  

会话和角色之间的约束，可以动态的约束用户拥有的角色，例如一个用户可以拥有两个角色，但是运行时只能激活一个角色。

例如：iconfont和蓝湖的用户与角色就采用了约束的概念，超级管理员只允许只有一个

4）RBAC3

RBAC3是RBAC1与RBAC2的合集，所以RBAC3包含继承和约束。

二、为什么要引用RBAC权限模型？

RBAC中具有角色的概念，如果没有角色这个概念，那么在系统中，每个用户都需要单独设置权限，而系统中所涉及到的功能权限和数据权限都非常多，每个用户都单独设置权限对于维护权限的管理员来说无疑是一件繁琐且工作量巨大的任务。

而引入角色这个概念后，我们只需要给系统设置不同的角色，给角色赋予权限，再将用户与角色关联，这样用户所关联的角色就直接拥有了该角色下的所有权限。

例如：用户1~用户8分别拥有以下权限，，不同用户具有相同权限的我用不同的颜色做了区分，如下图：

在没有引入RBAC权限模型的情况下，用户与权限的关系图可采用下图的杨叔叔展示，每个用户分别设置对应的权限，即便是具有相同权限的用户也需要多次设置权限。

引入RBAC权限模型及引入了角色的概念，根据上面表格的统计，用户1、用户3、用户5、用户8拥有的权限相同，用户2、用户6、用户7拥有相同的权限，用户4是独立的权限，所以我们这里可以根据数据统计，以及实际的需求情况，可以建立三个不同的角色，角色A、角色B、角色C，三个角色分别对应三组用户不同的权限，如下图所示：

对应的上面的案例表格我们就可以调整为含有角色列的数据表，这样便可以清楚的知道每个用户所对应的角色及权限。

通过引用RBAC权限模型后，对于系统中大量的用户的权限设置可以更好的建立管理，角色的引入让具有相同权限的用户可以统一关联到相同的的角色中，这样只需要在系统中设置一次角色的权限，后续的用户便可以直接关联这些角色，这样就省去了重复设置权限的过程，对于大型平台的应用上，用户的数量成千上万，这样就可避免在设置权限这项工作上浪费大量的时间。

三、引入用户组的概念

我们依旧拿上面表格案例举例，虽然前面我们应用的RBAC权限模型的概念，但是对于大量用户拥有相同权限的用户，我们同样的也需要对每个用户设置对应的角色，如果一个部门上万人，那么我们就需要给这个部门上万人分别设置角色，而这上万其实是具有相同的权限的，如果直接采用基础的RBAC权限模型的话，那么面对这样的情况，无疑也是具有一个庞大的重复的工作量，并且也不利于后期用户变更的维护管理，那么针对相同用户具有相同的权限的情况，我们便可以引入用户组的概念。

什么是用户组呢？用户组：把具有相同角色的用户进行分类。

上面我们的数据表格案例中的用户1、用户3、用户5、用户8具有相同的角色A，用户2、用户6、用户7也拥有相同的角色B，那么我们就可以将这些具有相同角色的用户建立用户组的关系，拿上面的案例，我们分别对相同角色的用户建立组关系，如下：

用户1、用户3、用户5、用户8→建立用户组1

用户2、用户6、用户7→建立用户组2

因为用户4只有一个用户，所以直接还是单独建立用户与角色的关系，不需要建立用户组，当然尽管只有一个用户也是可以建立用户组的关系，这样有利于后期其他用户与用于4具有相同的角色时，就可以直接将其他用户添加到这个用户组下即可，根据业务的实际情况而选择适合的方案即可。

通过案例表格的变化我们就可以直观的看出权限设置变得清晰简洁了，通过第用户组赋予角色，可以减少大量的重复的工作，我们常见的企业组织、部门下经常会出现不同用户具有相同角色的情况，所以采用用户组的方式，便可以很好的解决这个问题，给具有相同权限的用户建立用户组，将用户组关联到对应的角色下，此用户组就拥有了此角色下的所有权限，而用户是属于用户组的，所以用户组下的所有用户也就同样的拥有了此角色下的所有权限。一个用户可以属于多个用户组，一个用户组也可以包括多个用户，所以用户与用户组是多对多的关系。

四、引入权限组的概念

权限组与用户组的原理差不多，是将一些相对固定的功能或者权限建立组的关系，然后再给此权限组赋予角色，目前我所接触的B端项目中使用权限组的概念的比较少，可简单的看一下关系图

四、功能权限和数据权限

B端系统中一般产品的权限由页面、操作和数据构成。页面与操作相互关联，必须拥有页面权限，才能分配该页面下对应的操作权限，数据可被增删改查。所以将权限管理分为功能权限管理和数据权限管理。

功能权限管理：指的是用户可看到那些模块，能操作那些按钮，因为企业中的用户拥有不同的角色，拥有的职责也是不同的。

数据权限管理：指的是用户可看到哪些模块的哪些数据。

例如：一个系统中包含多个权责清单（清单1、清单2、清单3），系统管理员能对整个系统操作维护，也就可以对系统中的所有清单都能操作（增、删、改、查）；假如分配给总部权责管理员的是清单1，那么他将只能对清单1进行操作（增、改、查）；普通用户也许只有查看数据的权限，没有数据维操作的权限（查）,这里的操作是系统中所有可点击的按钮权限操作，列举的增删改查只是最常见的几种操作而已。

五、实战案例总结

我目前所做的项目是一个关于权责管理平台的B端系统，关于系统中的权限需求我这里简单的介绍一下，并采用上面所总结的RBAC权限模型对实际业务需求进行设计分析：

01：不同的区域管理员的权限各不相同（说明会存在不同的用户具有不同的权限，那么我们就可以采用角色对其进行规范）

02：有大量的用户具有相同的权限（例如组织、部门等）（说明存在相同权限的用户，那么我们就可以采用用户组的概念）

03：上级管理员拥有下级人员的所有权限（说明存在继承关系）

04：不同用户所看到的数据和能编辑的数据不同，一些机密性的数据只允许部分人员看或者编辑（说明存在约束）

05：会存在临时性的用户（说明需要支持新建新角色）

06：同一用户会存在多个角色（多角色求合集或者切换用户角色）

简单说明一下，我所做这个项目的人员管理是在另外一个系统中管理的，权责平台只是调用另外一个平台的组织结构树即可，所以权限设置模块没有做人员管理的模块

根据上面对需求的分析，整个权限管理模块中我们需要建立用户组管理模块、功能角色管理模块、业务（数据）管理模块、权限设置模块，下面就对每个模块做更细致的页面展示设计分析

1）用户组管理模块

用户组管理主要是对具有相同权限的用户分类建组，所以页面中我们需要有新建用户组的功能，每个用户组下我们需要关联对应的组织、部门、岗位、人员，让这些具有相同权限的用户在同一个用户组下，如下图：

2）功能角色管理模块

B端项目中一般会建立几个默认的角色是不支持用户修改、删除的，例如最常见的系统管理员，而也会需要有其它角色的需求，所以此模块需要支持用户新建角色，功能角色是对大模块的页面和操作的权限设置，操作权限的颗粒度可以细分到每个页面的每一个按钮的操作，如下图：

3）业务（数据）角色管理模块

业务角色是对页面中的数据饿查看的权限设置，而对于系统中的普通用户查看系统的权限是常用不变的，所以我们考虑默认有一个普通用户的角色，其它业务角色用户根据实际需求情况自行建立即可，由于我们权责系统的特殊性，我们需要满足用户对部分数据可编辑且对部分数据的字段可编辑，按照常理来说，编辑的操作行为是属于功能权限的设置，但是这里的操作行为是建立在数据的基础之上的，所以如果把这里对数据的操作权限在功能角色模块中设置，就会显得混乱，所以我们直接在业务角色模块中加入对数据的可编辑权限，这里在设置的时候更方便灵活

4）权限设置模块

权限设置模块只需要设置权限分配的对象，选择对应的用户或者用户组，关联对应的功能角色和业务（数据）角色即可，这样就形成了一条完整的闭环的权限设置

对于06同一用户会存在多个角色，我们系统是采用切换角色的模式来实现的，因为不同角色中存在互斥的情况，以及所涉及的领域不同，操作权限差距较大，求合集不利于控制权限，所以只能采用切换的模式实现

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

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

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

随着用户体量的变化和短视频平台的规范化，抖音的产品定位也相应的变成了“抖音，记录美好生活”。在往后用户量不会再有大规模变化的增长，而外部竞争例如快手等依然不断增长的情况下，抖音是如何发展稳固自己的短视频“一哥”地位呢？

一、短视频行业发展现状

短视频行业在2016年之后呈井喷式增长，移动端时代加速了短视频行业的发展，近年短视频平台不断在商业模式上进行探索，一方面成为创新性新媒体营销平台，另一方面也结合直播带货迎来新的增长点，短视频营销的市场模式逐渐受到认可，也成为短视频媒体平台的主要收入来源。

数据显示，2020年中国短视频市场规模已达到1408.3亿元。

抖音、快手是目前短视频行业头部平台，但抖音在社交和移动端支付等业务发展加持下，规模优势逐渐抛开快手。关于短视频用户最常使用的产品调查结果显示，抖音以70.9%的占比排名第一，快手占比52.3%。

面对竞争，快手积极寻求资本化，但其营收快速增长的同时伴随着亏损持续扩大，高收入由高成本带来，商业转化能力并没有较大提升，长期来看发展模式存在风险。

抖音及快手在短视频领域头部优势明显，快手发展起步早，用户基础深厚，且积极发展电商和游戏直播等业务，成为头部典型代表；抖音虽然发展时间较短，但追赶势头明显，入驻KOL数量多，带货推广情况良好，也成为用户最多的短视频平台。

数据显示，受访用户最常使用短视频平台排名中，抖音以45.2%的占比排名第一，快手和哔哩哔哩分别占比17.9%及13.0%，排名第二及第三。

其他字节系短视频产品如西瓜视频、抖音火山版等占比也达到4.3%和1.6%。抖音凭借其内容分发机制优势成功俘获用户的青睐，成为用户最常使用的短视频应用；同时，快手用户黏度较低，逐渐被抖音拉开差距，并且受到其他平台追赶。

1. 政治因素

2014年8月，中央安排部署新措施，宣布大力实施创新驱动发展战略， 积极推动传统媒体数字化、网络化、智能化发展。2016年，为贯彻中央部署，各种创新型短视频app的上线了，短视频形式受到越来越多媒体和创作者的关注。这对于短视频app市场无疑提供了一个巨大的市场开发空间。

2. 经济环境

短视频的快速传播使其市场规模也实现了高速扩容，各大短视频在创造巨大流量的同时，其市场规模也在飞速增长。根据中国网络视听节目服务协会数据，2018年我国短视频行业市场规模达到467.1亿元，较2017年的55.3亿元增长744.7%。

数据显示，2020年中国短视频市场规模达到1408.3亿元，继续保持高增长态势，2021年预计接近2000亿元。近年短视频平台不断在商业模式上进行探索，一方面成为创新性新媒体营销平台，另一方面也结合直播带货迎来新的增长点，市场仍将进一步发展。

3. 文化环境

截至2018年12月底，我国短视频用户规模达6.48亿，同比增长58.05%，高出长视频用户0.36亿，网民使用比例达78.2%；2019年6月，中国短视频行业的用户规模达8.57亿人。

同时，短视频用户使用时长占总上网时长的11.4%，超过综合视频(8.3%)，成为仅次于即时通讯的第二大应用类型。

2020年，短视频月总使用时长同比上涨1.7倍，全面超越在线视频，成为仅次于即时通讯的第二大行业。在移动互联网总使用时长增量中，短视频占了33.1%，即时通讯占了18.6%，综合资讯占了9.7%。2020年已超7亿人，预计2021年增至8.09亿人。

4. 科技支撑

• 智能手机普及和网络环境的优化，提高了短视频用户的流畅体验，成为短视频用户规模增长的直接动力。
• 基于人脸识别和AR等技术在短视频上的应用，提高了短视频用户体验的丰富性和趣味性，进而增加用户使用时长，强化用户粘性。
• 大数据，图像识别等技术推动内容数据和用户数据更加精细化，进而试下内容和用户的精准匹配，极爱去哪个用户短视频内容获取的个性化体验，增加用户忠诚度。

二、竞品分析

1. 基础信息

2. 产品迭代

通过以上两个产品历史迭代情况可以看出来，双方在功能上都越来越相同，这也是基于用户体验改进和市场变化而衍生出来的：

抖音：可以明显的看到抖音的更新重点放在了用户体验和更新社交属性上，除了优化产品，修复问题，多次大量上架新增各种特效、道具、滤镜和活动，提供了工具辅助内容制作，大大提高了其创造性、便利性、娱乐性和用户生产内容的动力。

另外，抖音的“朋友”板块新增了产品的社交属性，让其定位多元化，不局限于单一的短视频功能，也提高了用户使用产品的可能性。基于互联网+的大数据时代，抖音也不断更新算法，根据用户日常体验，推出了智能搜索和发现优化。

快手：由于产品定位不同，所以快手并没有跟抖音一样更新丰富的滤镜、道具等功能，产品更新日志绝大多数都是“问题修复以及性能提升”和“优化用户体验”两条。

在8.0.0的版本是快手产品更新最为关键的一次，新增“多入口内容”、“沉浸式上下滑体验”、“瀑布流”，此次更新之后快手用户的日均使用app时间提高了30%。而在之后的更新中，上下滑体验也被应用于发现页和同城页，旨在留住用户，获取用户使用时间，开发新用户。

3. 产品用户

1）用户地域分布

抖音：

source：百度指数

快手：

source：百度指数

数据显示，两个产品的用户地域主要都是分布在华东、华南地区，呈现由东到西、由南到北、由沿海到内陆扩散的局势。

这很大一部分程度上是因为沿海地区的经济发展迅速、生活节奏快、工作压力大导致其居民易产生焦虑、焦躁、空虚等现象，表达轻松、搞笑、美好形象的短视频的出现可以让他们有短暂的放松时间和对自己的精神压力的部分释放，这极大地促使他们对短视频App有了更高频率的使用。

虽然两款产品的用户地域分布大相径庭，但是还是有一定的区别：快手相对于抖音其用户比例中北方用户占很大一部分，比如山东、河北等地。

而抖音则更偏向南方用户，这主要是因为用户性格跟产品定位的契合度的关系。北方人性格豪爽，重情重义，更多的偏爱生活化的东西，喜欢真情实感接地气的表达真善美；南方人追求精致、美好的生活的状态。差异化决定了两款产品有不同的适用人群。

2）年龄和性别分布

抖音：

source：百度指数

快手：

source：百度指数

数据显示，两款产品都具有明显的年轻化特点，用户人群年龄段主要分布在20～39岁之间，这一部分群体主要是90后、00后，新社会下成长起来的具有新思想的自由个体，接受新事物的能力强，富有创造性，他们可以快速获取并进行信息更替和传播。

就成长层面来看，这部分人群也处在人生拼搏的阶段，压力相对较大，更容易产生焦虑的心理状态，短视频可以暂时性在一定程度上减轻他们的焦虑感，也可以丰富他们的生活，满足他们足不出户在家里就可以了解热点资讯的需求。而该部分人群也逐渐走向社会经济舞台中央，客观上也有利于抖音带货等商业模式的开展。

3）用户兴趣

抖音：

source：百度指数

快手：

source：百度指数

可以看出来两款产品用户在兴趣爱好上基本一致，影视音乐、软件应用、资讯类的视频播放量较高，其他各分类项目的占比也比较稳定，影视音乐一直处于领先地位。

其中医疗健康的占比增速最大，这跟近几年的新冠疫情有直接的关系，也由于生活水平的提高和理念的进步，人们更加关心自己的身心健康。

总的来说，两款产品的用户差距在逐渐缩小。

抖音：最初的目标用户是潮流酷炫的年轻群体，平台最初的内容运营是往偏时尚方向布局，吸引高校年轻人进行创作，最早赞助的综艺是“中国有嘻哈”这类以“潮为特征的节目。年轻的一二线地区的时尚人群是抖音的种子用户。之后随着用户数的增长，平台内容逐渐丰富，用户群体（覆盖区域、年龄分布）等分布更加均匀。

快手：快手最初没有刻意进行内容引导，但是其普惠的流量分发方式对当时缺乏针对性的社交、娱乐产品的下沉市场用户有极大吸引力，因此快手的种子用户是由下沉市场（尤其是北方地区）的用户构成。但是由于快手之后在垂直领域的突破，目前快手的用户结构也比之前更为均衡。

4. 产品主要功能对比

左：抖音 右：快手

在快手8.0.0版本之后，首页视频也采用了沉浸式上下滑的模式，这一点也是借鉴了抖音的首页，可以更快速直接的提供给用户短视频体验，也更容易留住用户。

点赞方式都采取了双击点赞或图标点赞。

抖音的主页面除了推荐列表，还有“朋友”和“附近”，而快手却把“附近”这一模块放在了底部的标题栏里面。

抖音左上角有专属直播通道；快手放置了个人中心的入口，直播入口则放到了新建页面里。

抖音评论展开视频播放界面维持原状，一部分视频会被评论遮挡；而快手打开评论后，播放界面则会整体缩小至评论上方，虽然不会挡住视频，但是由于太小可能会导致观看效果不理想。

抖音在播放界面左滑会直接进入作者主页查看详细信息，而快手则会拉出作者其他的作品列表，如果要进入作者主页需要点击头像才能进入。

关注图标在弹出页面也会显示，但是抖音的更醒目。

抖音搜索界面有榜单排名可以直接查看热点，方便接触时尚资讯；而快手则放置了各项的分类条目，比较生活化。

抖音搜索栏有扫一扫功能，思维逻辑适合市面上很多app，用户容易适应。

抖音在最新版本里“附近”栏目里新增了“学习”栏目，两者可以切换；附近同城也新增了数据检测和类似“朋友圈”的功能；快手在同城新增了“校友”这一玩法，社交属性大大增加。

抖音在“消息”界面归类了粉丝新增、互动消息、系统消息和私信四种基本通知，“可能认识的人“被归类到了”粉丝‘中；快手直接在“消息”界面推荐了可能认识的人。

抖音群聊归类在“消息”；快手把群聊放在了个人主页。

抖音的辅助拍摄工具库（滤镜、特效等）相比于快手来说大很多，玩法也多样。

总的来说，在浏览方式上，快手已经借鉴了抖音的“沉浸式”上下滑动的模式，但仍然保留了一些自己的东西，但是就作者体验来看，产品形象为简洁、方便的快手，反而越来越有一些画蛇添足的味道：

• 在体验过程中，左滑的新作品小界面和评论播放界面缩小都由于尺寸太小而造成观看效果不佳
• 直播入口不能直接进入而需要多次点击不太方便
• 消息界面太过冗杂

三、盈利情况

消费者提出需求，生产者根据需求研发产品、完善产品、更新产品，而产品必须要在满足消费者需求的同时给创作者带来利润，才能形成一个完整的闭环。其中产品质量决定了它所能带来的利润，而利润又反过来直接决定了产品的走向。

下载量对比：

source：七麦数据

数据显示，在去年11月到今年10月的时间里，抖音的下载量虽然处于波动状态但是一直领先于快手的下载量，平均保持在180000左右，而快手一直保持在100000左右起伏不大。

收入量对比：

source：七麦数据

可以很明显的看到，抖音的收入几乎是快手的3～4倍，而短视频平台的收入主要来自于广告收入、直播打赏收入和电商分成收入三个方面，而在其中，广告和直播打赏的收入占总体收入的89%，盈利模式和收入结构不同：抖音重仓广告VS快手重仓直播，这也反应了其商业变现成熟，但是多元化程度不够的弊端。

1. 广告变现

抖音广告收入占比80%：抖音中心化的分发机制，导致特别容易打造爆款，特别容易聚集流量打造名声，因此广告占有很大的优势，而广告的盈利模式有很大的利润率，所以抖音的80%的收入都来自广告。

抖音收入来源分配比重

2. 直播打赏

快手直播收入占比60%：快手倡导粉丝经济和社区文化，使得KOL与粉丝之间的粘性很大，因此做直播的利润空间就显得非常大，虽然没有广告收入的利润多，但是收益平稳，也是快手的主要盈利方式。

快手收入来源分配比重

3. 电商分成

短视频电商行业主要有三种运营模式：

1. 电商平台向短视频平台荐物，商品短视频栏目等内容生产者开始发力。
2. 电商平台和短视频平台合作，为电商平台引流。
3. 综合垂直类短视频平台，实现内容分发和购买一体化。

1）产品电商发展历程

抖音：

快手：

可以看出抖音相比于快手更先于铺垫电商业务，而且在之后的产品上线、功能完善更替、迭代升级和营销上面更频繁也更为完善，这也是抖音充分发挥了大数据、大流量的作用。

在2020年10月抖音实现了电商业务的彻底闭环，也奠定了抖音在电商业务上超过快手的基础。

2）服务定位

3）具体分析

生产群体：

快手：头号主播、精通电商的主播达人、公会和线下个体卖家等。

快手的这些电商达人大多有一个共同的特点：粉丝数量在几十到百万不等，有一部分具有一定的带货经验，甚至很多人本身就是淘宝中小店家入驻快手。比起头部网红，她们在直播展示、销售技巧、促进成交等方面有着显著的专业性。

抖音：以网红达人为主．线下商家为辅。

目前在抖音上卖货的主要仍是以网红达人为主。据相关数据显示，抖音达人、网红主播带货的方式以拍摄短视频为主，在视频中放上同款衣服的链接，实现边看边买，但是这也对视频的内容质量有很高的要求。

商品类型：

快手：商品类型多样，涵盖日用品、化妆品、衣服、食品等。

快手主播、用户甚至商家卖的商品五花八门，其上架商品的属性实在跟快手的产品定位及其用户属性不谋而合。

抖音：注重“调性”，商品最多的类型为衣服，而且是潮流穿搭。

抖音仍是很讲究“调性”。相关报告显示，抖音目前卖得最多的商品是衣服。而且是潮流穿搭，配上长得好看的帅哥美女的视频带货，用户很容易被种草安利然后拔草，同时通过补贴和发放优惠券的形式，刺激用户下单。

大局来看两款产品的销售模式是基于其市场定位的：快手用户购买商品，可能更多地是出于对主播的爱和信任，也就是信任电商；而抖音用户购买商品，往往是由于视频的内容足够优质，也就是兴趣电商。

四、总结与建议

总的来看，抖音重分析，内容分发去中心化。抖音在生产内容签约了一批网红、达人，通过MCN机构，持续稳定的输出高质量内容，PGC覆盖范围广，但是如何保证普通用户不丢失掉自主生产内容的积极性，打造PGC+UGC完美结合的体系。

快手内容分发去中心化，重视普通用户的UGC生产力，轻运营。快手得益于三五线城市的下沉用户，而这部分用户在生活中缺少表达的机会，但是具有表达欲望，所以造就了快手的内容生产主力军。

由于当前的网络用户主力军仍是90后、00后，年轻张扬、个性活泼的调性符合抖音的产品定位，再加之其运营的力度、体系的成熟和产业链的完整，所以抖音在大数据、大流量基盘的加持下，牢牢站稳了短视频“一哥”的位置。

建议：

1. 注重内容属性，不论是抖音还是快手不论是视频内容本身的质量还是商品的质量，虽然在大IP的加持下行业异常火爆，但是从长远来看，只有产品本身具有高质量属性，才能获得用户认可；
2. 未来在电商业务方面必定还会有新的发展，抖音已经有了更为完整的产业链闭环，快手应该加快建设完整体系；
3. 短视频行业竞争强烈，在不断的迭代出现了很多增值服务，但是应该化繁为简，从用户的实用性和便捷性考虑，这样产品跟用户之间才能保持持续稳定的联系；
4. 抖音应该促进普通用户的生产创造性，支持UGC内容的生产，避免同质化内容严重。

在前面项目的基础上继续，因为我们的项目进来页面主题就是用户数据，所以我们想让它一进来就是高亮状态，那么我们可以这样做，同时我们再加上一个菜单：

<template> <div> <el-menu
                        style="width: 200px; min-height: calc(100vh - 50px)" default-active="user" :default-openeds="[1]" class="el-menu-vertical-demo"> <!--这是两个函数，我们可以先不写@open="handleOpen"--> <!--@close="handleClose"--> <el-sub-menu index="1"> <template #title>系统管理</template> <el-menu-item index="user" :route-="{path:'/'}">用户管理</el-menu-item> </el-sub-menu> <el-menu-item index="data" :route-="{path:'/'}">数据管理</el-menu-item> </el-menu> </div> </template> <script> export default { name: "Aside" } </script> <style scoped> </style>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

访问效果如下：

可以看到一进来因为页面主体是用户管理界面，所以“用户管理”菜单栏是默认高亮的，然后还多了一个数据管理的菜单栏。
菜单之间怎么跳转一会儿再讲，我们现在先写注册和登录。
在写注册和登录之前，我们先讲一下路由，可以看到我们这个路由文件下的文件中，默认的“/”访问的是Home文件：

Home页面写的就是我们这个用户表的增删改查，然后Home页面呢是在我们的App.vue中给它嵌入进去了的，<router-view>就是展示的Home，还有Header啊Aside等

首先我们尝试一下可不可以直接在路由文件下写上一个Login路由，同时我们在views页面下创建一个Login.vue，看看能不能成功：

注意引入路由的写法要特别注意，不能直接像下面这样写：

而应该用引入的方式;

现在我们重启访问/login：

成功；
但是同时我们也看到了问题，我们明明是登录界面，为什么进到了后台主页了，而我们想要的登录界面应该是一个非常独立的界面，所以我们的这个路由是有问题的。因为我们之前是直接使用App.vue作为项目的框架，其实这个App.vue在我们的main.js里面是引入进来了的：

引进来之后呢直接作为createApp的根节点来使用，所以这个App.vue这个界面呢，不适合用来作为我们的这个后台骨架来使用：

它应该是一个全局的根节点，所以我们需要把App.vue里面的东西把它给挪走，挪到另一个界面，我们要把App.vue呢给它空出来，让App.vue可以直接访问我们所有的界面。
怎么做呢？
我们在src目录下新建一个layout文件夹，这个文件夹呢就用来做我们项目的骨架部分，再在这个文件下建一个Layout组件：

然后把之前在App.vue的东西copy过来：

然后Header啊Aside啊那些组件我们需要在这个组件里面进行引入，然后App里面的那些原来引入的就删掉就行了：

然后现在我们就完成了迁移，现在我们要去配置一下我们的路由，实现我们后台的一个访问。
路由怎么配置呢？非常简单。
我们来讲解一下刚才这个什么意思，App.vue里面我们只写了一个router-view，而这个router-view呢就作为我们这个全局的一个根节点访问，
这个router-view里面既可以是登录界面也可以是注册界面也可以是后台主体，就是根据它是路由进行一个展示。当我们访问到我们的后台主体的时候，会进行一个二次的嵌套路由，那这个嵌套路由怎么写呢？我们先配置登录页面的路由和后台管理布局的路由：

此时访问/和访问/login都能到达对应的页面：

但是访问/时，Home主体页面并没有出来，只出来了/对应的页面骨架的路由，怎么让这个Home主体页面出来呢，这就涉及到了嵌套路由，像下面这样写，children属性是一个数组属性，意味着其可以嵌套多个路由：

访问/下的home路由，可以看到如下页面：

vue-router给我们提供了重定向属性，可以让我们在访问某个路由页面时自动重定向到一个我们指定的路由页面：

现在我们直接访问/试试，可以看到依然是访问的home页面：

现在路由问题解决之后我们就可以去写我们的登录页面了。

<template> <!--将整个浏览器页面放在一个大div里
    width: 100%表示这个让div撑满全屏
    height: 100vh同上，一个撑满高度一个撑满宽度--> <div style="width: 100%; height: 100vh;background: darkslateblue; overflow: hidden"> <!--margin: 参数1 参数2; 参数1表示上下距离，参数2表示左右距离，auto表示自动匹配
        如果页面产生了空白，就在外层最大的div上加一个overflow，设置为hidden即可--> <div style="width: 400px; margin: 150px auto"> <!--font-size表示字体大小，text-align表示字体居中--> <div style="color: #cccccc; font-size: 30px; text-align: center; padding: 30px 0"> 欢迎登录 </div> <!--然后去element上copy一个表单--> <el-form ref="form" :model="form" size="normal"> <el-form-item> <el-input prefix-icon="el-icon-user-solid" v-model="form.username"></el-input> </el-form-item> </el-form> <el-form ref="form" :model="form" size="normal"> <el-form-item> <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password></el-input> </el-form-item> </el-form> <el-form ref="form" :model="form" size="normal"> <el-button style="width: 100%" type="primary" @click="login">登录</el-button> </el-form> </div> </div> </template> <script> import request from "../utils/request"; export default { name: "Login", data(){ return{ form:{} } }, methods: { login() { request.post("/api/user/login",this.form).then(res => { if(res.code === "0"){ this.$messageBox({ type: "success", message: "登录成功" }) //    登录成功之后进行页面跳转，跳转到主页 this.$router.push("/") }else{ this.$messageBox({ type: "error", message: res.msg }) } }) } } } </script> <style scoped> </style>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

然后现在去写我们后端的接口：

 //用户登录 @PostMapping("/login") public Result login(@RequestBody User user){ User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername,user.getUsername()).eq(User::getPassword,user.getPassword())); if(res != null){ //登录成功 return Result.success(); }else{ //登录失败 return Result.error("-1","用户名或密码错误"); } }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

现在数据库中的数据有：

我们试着访问登录：

可以看到登录成功：

然后我们再去我们的网页头部右侧的用户信息栏写一下退出系统的操作：

点击则路由跳转到登录页面。
然后还有注册页面，也一起写了，注册页面其实逻辑和登录界面差不多，我们copy一个登录组件进行更改即可。

然后进行更改就行了，注册不过就比登录多了一个确认密码的操作。

<template> <!--将整个浏览器页面放在一个大div里
    width: 100%表示这个让div撑满全屏
    height: 100vh同上，一个撑满高度一个撑满宽度--> <div style="width: 100%; height: 100vh;background: darkslateblue; overflow: hidden"> <!--margin: 参数1 参数2; 参数1表示上下距离，参数2表示左右距离，auto表示自动匹配
        如果页面产生了空白，就在外层最大的div上加一个overflow，设置为hidden即可--> <div style="width: 400px; margin: 150px auto"> <!--font-size表示字体大小，text-align表示字体居中--> <div style="color: #cccccc; font-size: 30px; text-align: center; padding: 30px 0"> 欢迎登录 </div> <!--然后去element上copy一个表单--> <el-form ref="form" :model="form" size="normal" :rules="rules"> <el-form-item prop="username"> <el-input prefix-icon="el-icon-user-solid" v-model="form.username"></el-input> </el-form-item> <el-form-item prop="password"> <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password></el-input> </el-form-item> </el-form> <el-form ref="form" :model="form" size="normal"> <el-button style="width: 100%" type="primary" @click="login">登录</el-button> </el-form> </div> </div> </template> <script> import request from "../utils/request"; export default { name: "Login", data(){ return{ form:{}, rules:{ username:[ {required: true,message:"请输入用户名",trigger:'blur'}, ], password:[ {required: true,message:"请输入密码",trigger:'blur'}, ] } } }, methods: { login() { //发送请求之前先加这个判断，不为空且满足规则时才发送请求 this.$refs['form'].validate((valid) => { if (valid) { request.post("/api/user/login",this.form).then(res => { if(res.code === "0"){ this.$messageBox({ type: "success", message: "登录成功" }) //    登录成功之后进行页面跳转，跳转到主页 this.$router.push("/") }else{ this.$messageBox({ type: "error", message: res.msg }) } }) } }) } } } </script> <style scoped> </style>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

    

        66
    

    

        67
    

    

        68
    

    

        69
    

    

        70
    

    

        71
    

    

        72
    

    

        73
    

    

        74
    

    

        75
    

    

        76
    

其中我们还要注意在请求数据之前要先判断表单内部是否数据符合要求，否则不予请求，同样在Login页面内也要加入该判断：

<template> <!--将整个浏览器页面放在一个大div里
    width: 100%表示这个让div撑满全屏
    height: 100vh同上，一个撑满高度一个撑满宽度--> <div style="width: 100%; height: 100vh;background: darkslateblue; overflow: hidden"> <!--margin: 参数1 参数2; 参数1表示上下距离，参数2表示左右距离，auto表示自动匹配
        如果页面产生了空白，就在外层最大的div上加一个overflow，设置为hidden即可--> <div style="width: 400px; margin: 150px auto"> <!--font-size表示字体大小，text-align表示字体居中--> <div style="color: #cccccc; font-size: 30px; text-align: center; padding: 30px 0"> 欢迎登录 </div> <!--然后去element上copy一个表单--> <el-form ref="form" :model="form" size="normal" :rules="rules"> <el-form-item prop="username"> <el-input prefix-icon="el-icon-user-solid" v-model="form.username"></el-input> </el-form-item> <el-form-item prop="password"> <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password></el-input> </el-form-item> </el-form> <el-form ref="form" :model="form" size="normal"> <el-button style="width: 100%" type="primary" @click="login">登录</el-button> </el-form> </div> </div> </template> <script> import request from "../utils/request"; export default { name: "Login", data(){ return{ form:{}, rules:{ username:[ {required: true,message:"请输入用户名",trigger:'blur'}, ], password:[ {required: true,message:"请输入密码",trigger:'blur'}, ] } } }, methods: { login() { //发送请求之前先加这个判断，不为空且满足规则时才发送请求 this.$refs['form'].validate((valid) => { if (valid) { request.post("/api/user/login",this.form).then(res => { if(res.code === "0"){ this.$messageBox({ type: "success", message: "登录成功" }) //    登录成功之后进行页面跳转，跳转到主页 this.$router.push("/") }else{ this.$messageBox({ type: "error", message: res.msg }) } }) } }) } } } </script> <style scoped> </style>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

    

        66
    

    

        67
    

    

        68
    

    

        69
    

    

        70
    

    

        71
    

    

        72
    

    

        73
    

    

        74
    

    

        75
    

    

        76
    

然后现在去后端写register的接口：

//用户注册 @PostMapping("/register") public Result register(@RequestBody User user){ User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername,user.getUsername())); if(res != null){ //说明用户名重复 return Result.success(); } //该用户不存在，予以注册 if(user.getPassword() == null){ user.setPassword("123456"); } userMapper.insert(user); return Result.success(); }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

就此我们的注册页面也写完啦。

1

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

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

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

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

1.在搭建项目之前，先安装淘宝镜像和命令行工具，可能需要等待一段时间（电脑安装过一遍之后，以后建项目时就不需要再安装）：

        a.Win+R打开命令提示行cmd；

        b.进入命令行cmd，设置淘宝镜像；

npm config set registry https://registry.npm.taobao.org

        c.安装可生成脚手架代码的命令行工具；

npm i -g @vue/cli

        当命令行窗口显示 [ + @vue/cli@版本号 ] 时说明安装成功。

2.开始创建项目

        a.先决定要把项目文件夹保存在哪个位置；此处以test文件夹为例；

        b.进入test文件夹后，shift+鼠标右键打开power shell窗口；

c.运行 vue create 自定义项目名；此处以项目名为test为例，出现提示后按以下过程进行选择：

        1）? Please pick a preset:

        2）? Check the features needed for your project:

        3）? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  N

        4）? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

        5）? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

        6）? Save this as a preset for future projects? (y/N)  N

        最后命令行窗口显示Successfully created project xzvue说明项目创建成功。

        此时我们便可在test文件夹中看到整个项目。

3.使用vscode打开并运行脚手架项目

（1）右键单击package.json文件，选择"在集成终端中打开"；

（2）在终端窗口中输入：npm run serve，等待后出现App running at : - Local :http://localhost:8080/，如下：

（3）按住Ctrl，点local:右侧的连接，即可自动打开浏览器。 

        需要的时候就可以在集成终端中输入npm i、npm i vant -S 等命令下载node_modules包、安装vant等等。

        注意vue采用的是热编译，修改后无需停止或重启项目，只要一修改，就会立刻自动重新编译，重新运行，自动在界面上显示新内容。

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

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

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

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

背景

在 B 端设计领域中，不管是内部用户、产品、设计师、开发，还是外部产品、设计师等，总能听到关于界面「屏效」方面的诉求或吐槽。

「屏效」狭义理解是「界面过度留白」；广义理解，「屏效」源自谐音“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数）。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。

为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感，于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开，将实践过程中反复验证有效的设计策略沉淀成设计手册，同步将部分功能进行工程化，确保可以开箱即用。

探索阶段-为谁在何时何地设计

用户声音｜不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%；认为提升屏效对体验有提升的终端用户占 50.6%。

外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里，其中就有 2 点提到关键字「效率」。

通过了解不同用户和产品类型发现，不同的用户在工作场景的产品使用中有着相似的特征：

案例收集｜发现问题，大胆假设

纵观 B 端产品界面，发现普遍问题和收录在解决屏效问题上实践得比较好的案例，为了逐步突破问题，选择以数据产品中覆盖率极高的表格为设计切入点，通过线上跨产品多端地毯式的体验走查，发现表格三个层次的问题：

视觉、交互层在无需理解业务场景和用户目标的情况下，都较容易发现，属基础问题，但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设：为提高屏效，可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度，可以通过提高信息密度；交互层为提高操作速度，可以缩短当前手势到目标之间的距离；信息层为提高信息被理解的速度，可以通过重组织等方式。

基于假设，我们进行了进一步的桌面研究，查阅论文等书籍，寻找设计理论的验证和指导。

竞品分析｜寻找实践证据，谨慎验证

我们知道视觉上界面留白过多（过疏会增加滚屏成本，过密因易串行而影响阅读效率），以表格「行高」为例，探索各表格在字号、字高和行高的关系，因为不同字体的同字号实际像素高度会有差异，因此选择的是字高（即文字垂直高度的视觉大小）而非字号或字行高，决定留白的两个重要因子是字高和表格行高，以次推演，界面元素和元素间距的留白关系，探究在视觉层怎样的留白率能保证甚至提升屏效。

以数据产品中的表格为例，通过直接和间接竞对的方式，分别从数据的查阅（视觉）、分析（交互）维度进行功能点和设计细节上的比对，来看看优秀产品是如何解决屏效问题。

直接竞对：内部用户口碑较好的产品 A、B外界竞对：同领域的 Tableau、网易有数、金山、微软表格；间接竞对：谷歌邮箱、AntD 等的紧凑主题的常规列表（一维表格）

通过竞品分析可以发现，数据分析领域的表格留白率普遍较低（信息密度高），尤其是金山和微软的电子表格，其次是同类面向数据用户的 Tableau、网易有数，而谷歌邮箱等工作台常用的常规列表紧凑版本中，留白率和数据领域的电子表格不相上下。

紧凑版的使用场景也常常是面对数据量巨大的信息呈现，通过切换紧凑主题，提升信息的快速浏览，而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大，而在实际案例实践中，也已经将表格行高优化至 30px，克制的使用留白。

除此外，竞品其他层次的设计也做了比对，总结来看整体设计做法：高密度、少屏数、少留白等。

文字陷阱：中英文字高不等于字号

举个容易犯错的竞品参考是，谷歌在紧凑版主题下字号 12px，列表行高是 28px，但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤，缺乏呼吸感。

原因在于谷歌的 12px 是英文字体，实际字高只有 10px，而 AntD Table 的语境是中文字偏多，实际字高有 12px，所以留白的差异在于一个是 18px（28-10），一个是 16px（28-12），这也是为什么决定决定留白的两个重要因子是「字高」和表格行高，而非「字号」和表格行高，进一步推演，决定界面留白的是「元素视觉高度」和「元素间距」。

论文查阅｜寻找理论证据，谨慎验证

研究表明，低密度认知负荷低，但高密度任务完成率高，用户更喜好

参考资料：论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息，用户需要需要阅读（视觉），思考和理解（认知），需要点击按钮、操作鼠标和打字（行动），在人机工程学中，统称为负荷。即认知（记忆）负荷、视觉负荷、动作负荷，即分别对应用户体验设计的三个层级，信息/视觉/交互。而负荷所花费资源从多到少依次为：认知 > 视觉 > 行动。

认知负荷，举个例子，看了但不一定懂了。你是否有这么一种体验——刷抖音，虽然很多（信息密度小，输出效率低），但可以一直刷下去并且刷很久；而看一门 C4D 教学视频，即使就短短十来分钟（信息密度大，输出效率高），但是却要看上半天。因为刷短视频时，你的输入效率远高于作者的输出效率，而看一门 C4D 教学视频时，你的输入效率远低于作者的输出效率。可是，输出效率是客观的，输入效率是主观的。如果输出效率很高，你可以通过提高自己的输入效率（比如让自己成为 C4D 专家）来跟上作者，从而变强；否则输出效率很低（信息质量低），你的输入效率很高（很专业），信息于你而言都是无效的。

假设负荷总量不变的情况下，那么以上三类场景界面需要对用户负担分配大致如下，官网品宣类需要低认知成本，低视觉负担，视觉要求高，用户才会被吸引过来阅读，甚至酷炫的交互更能增加互动体验而带来的趣味感，比如苹果官网，信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息，而 B 端应用因为是专业使用，首先认知方面随着员工的专业度提高而降低，因此可以通过提高视觉负担，来降低行动负担，进而减少操作用时，当然最佳情况是三个维度能整体降低负担，让总负担降低，就需要更多设计巧思了。

面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中，设计师常用的 Top 3 做法为：【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。

实践阶段-如何设计

通过以上的探索，我们可以确定的是，B 端产品面向专业人员的工作界面设计中，提高屏效可从视觉、交互、信息三个层次进行，视觉层-高密度，即提高屏幕信息密度；交互层-低跳转，通过减少页面跳转、手势与常用操作的距离等；信息层-有效性，通过重组织或辅助信息帮助用户理解，甚至提供帮助手册等以提高用户专业能力。

基于以上的总结，对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，寻找运营机会点。

如下表格经过高屏效策略优化前后对比图，优化前相同维度下不同人群数量的对比需要视线来回跳动比对，而优化后的表格内容，更符合用户看差异场景下分析目的数据查阅，视线锁定相同维度，即可快速比对数值大小。

下面以视觉、交互、信息三个层次解剖设计过程背后的思考。

视觉层｜高密度-克制的留白

眼动理论：研究表明，人眼最小可视视角 0.3 度，水平最大眼动舒适转动区 30度，垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px，水平视野舒适眼动宽 1200px，垂直视野舒适眼动高 2200px。参考资料：论文《基于眼动交互的用户界面设计与研究》

如图，缩小表格行高的同时，目标信息之间的眼动距离随之缩短，在眼动舒适区内看到更多信息，便于信息的高效获取。

交互层｜低跳转-高频信息前置

理论基础：菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。参考资料：菲兹定律

表格单元格借助交互状态，增加悬浮出现的信息组件，前置显示目标单元格明细信息，同时通过交互出现的指示器辅助行列信息的获取，高频操作考虑手势位置放置，缩短与操作目标的距离，以提高整体操作效率。

信息层｜有效性-信息重组织

理论基础：交互设计四大策略「组织、删除、隐藏、转移」参考资料：《简约至上》

用户为了对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，但内容的重组织方式让两数据行需要频繁点击滚动条来查看，根据用户目标，将关联性大的数据放置相邻列（即将要对比的人群放置列头），即可快速查阅，减少眼跳距离。

结语

设计趋势中常见的大字体大留白界面，但在 B 端场景中，面对紧张的工作节奏，时间和注意力变得尤为可贵，相对而言，基于复杂度守恒定律， B 端信息量大且高频访问的产品中，「用得快」要比「看得美」更重要，「高密度」「低跳转」诠释的即是「空间换时间」，少一次点击，少一次跳转，少一份等待，就多一份时间和效率。

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

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