有人说它是全世界最牛逼的APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。关于这两种说法，众说纷纭，本期设计大侦探，就来全面拆解铁路12306APP，一起来看看这个产品到底是如何设计的，用户体验如何。

一、导读

1. 内容结构
全文9700字，分为六个部分，分别是导读、产品画像、出行服务、内容服务、思考总结和后记，你可以通过下面的思维导图对本文内容快速的了解。

2. 适合人群
第一类，UI/交互设计师，可以跳出执行层，全方位体验12306的产品设计，多维度去思考和总结如何规避类似的陷阱；第二类，产品经理/运营，通过全面的产品设计拆解、体验反馈，获取产品设计参考；第三类，旅游及出行相关行业从业者，通过对12306的全面拆解，获取竞品设计参考。

3. 分析模型
第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的5个重要环节，主要用于拆分和分析产品的功能价值。
第二个，尼尔森十大可用性原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则，任何产品的设计，都可以通过这十个原则进行指导设计。尼尔森十大原则包括即系统可见性原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则、人性化帮助原则，通过这十大原则，可以对12306的产品设计体验进行全面的校验和侦查。
第三个，设计心理学。包括常见的格式塔原理、费茨定律、巴甫洛夫反应、7±2效应、席克定律等常见设计基础理论。

二、产品画像

1. 产品介绍
铁路12306是中国铁路客户服务中心推出的官方手机购票应用软件，主要为全国各地的乘客提供火车票预定、机票预订、汽车票预订等购票业务，首个版本发布于2012年10月16日，根据易观千帆数据，截止到2022年10月，12306月活跃用户人数6,923.78万。

2. 用户画像
铁路12306的用户群体主要以男性用户居多，占比65.04%，女性占比34.96%；从年龄分布看，以24-30岁的用户群体最多，占比36.52%，31到35岁的用户占比24.23%，36到40岁占比20.27%，41岁以及以上占比10.30%；从用户消费能力看，中高消费者占比33.48%，中等消费者占比30.43%，高消费者占比14.70%；从地域分布看，新一线城市用户最多，占比27.93%，一线城市占比19.93%，二线城市占比19.00%，其中广州用户最多，其次为深圳、杭州和北京。

3. 信息结构
铁路12306的一级菜单包含首页、出行服务、订单、铁路会员和用户中心。「首页」主要为用户提供火车票、飞机票和汽车票的购买，其次还提供各种快捷功能入口和酒店预订等服务；「出行服务」主要为用户提供约车、酒店、订单等服务；「订单」是可查询和管理在12306的各种订单；「铁路会员」是12306的会员版块，提供车票兑换、会员活动等内容；用户中心提供个人资料管理、出行向导和常用功能等内容。

4. 重要迭代记录
根据七麦数据统计，铁路12306的APP首个版本发布于2012年10月16日，截止到2023年1月12日，APP版本已经更新至V5.6.3版本，近一年版本更新次数为5次。
版本重要迭代记录
2021年9月，发布V5.4.0版本，新增无障碍功能、老人及障碍人士购票更便捷，即爱心版；

5. 产品生命周期
作为中国铁路客户服务中心的官方购票平台，铁路12306距离首个版本发布时间已经过去10年。从易观千帆数据观察，截止到2022年10月，12306月活跃用户人数6,923.78万，日均活跃人数811.65万。由于是国有企业运营，而且是垄断业务，12306没有任何商业变现的压力，从产品发布时间和活跃用户人数看，目前处于产品生命周期的成熟期。

6. 竞争图谱
截止到2022年10月，易观千帆数据显示，铁路12306APP在苹果的APP Store应用市场APP总排名71位，旅游类排名第一，汽车火车船票预定类第一，月活跃用户人数几乎是其他APP的总和。

三、出行服务
作为12306最核心、最重要以及实现商业变现的服务，出行服务主要为用户提供火车票、飞机票的销售，其次还链接了众多第三方合作伙伴，为用户在出行的各种场景提供了便捷的服务。

1. 票务
「票务」是12306最核心的服务，主要为用户提供火车票、飞机票和汽车票的查询以及销售，其次12306还对三种产品进行了组合，推出了空铁联运、铁水联运这样的服务。
1.1 火车票
「火车票」就是为用户提供火车和动车的票务销售，用户输入出发站、终点站和时间以后，就可以进行查询，其次还支持对已购买的车票进行变更到站、改签和退票。
1.1.1 售票
1.1.1.1 售票页
当用户输入目标站点以后，就进入了售票页。在这个页面，可以看到当天列车的所有车次，包括直达、中转、出发时间和剩余票数。在底部，有一个菜单栏，包含了筛选、耗时最短、发时最早、显示票价和候补下单五个功能，这主要是帮助用户快速寻找符合自己需求的车次，比如出发车站、出发时间等。

体验陷阱
这个页面的操作体验不太友好，底部的菜单栏不仅没有实现全屏手机设备的兼容，而且几乎和背景的元素贴合在一起，不够醒目，如果用户不注意，根本无法发现底部竟然还有一排菜单栏帮助用户进行高效的检索。
1.1.1.2 订单页
①在用户选择好车次以后，就进入订单页。用户需要选择座位的系别，包括硬座、软座、二等座、一等座、特等座等。

②用户需要选择乘车人。添加乘车人的步骤比较简单，在输入用户的真实姓名、身份证号码和手机号码以后，即可添加成功。首次使用12306的用户需要进行身份核验，用户需要通过验证系统发送的核验信息才能添加成功。
细节侦查
「姓名」这里有一个非常友好的设计体验，那就是针对无法输入的生僻字、名字超过30个字符，以及外籍用户的极端情况都给出了详细的指导，针对用户可能出现的极端的情况给与及时的提示，这就是尼尔森十大原则中的容错原则，帮助用户从错误中恢复，将损失降到最低。
③在「选择乘车人」的右边，还有一个「选择受让人」的功能。这个功能有很高的学习成本，会让用户摸不着头脑。我也是通过百度查询才了解到这是一个用户权益功能，它主要是指用户可以把平时购买火车票获得的积分转让给指定的用户，积分又可以抵消火车票款，从而实现抵扣。

④选择好乘车人以后，用户可以进行选座，就进入了提交订单、支付费用的环节。
1.1.1.3 支付页
①订单生成后，用户需要在付款限定时间内支付火车票费用，否则订单将会取消。其次在支付页，也向用户推荐相关的保险服务，比如铁路乘意险，又分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险。

②「购买返程」其实一个非常便捷的功能，但12306设计的层级太深了，而且没有加上一键返回首页或订单页的按钮，用户如果想退回到订单页或首页，需要不断点击返回，操作路径实在太长。

体验陷阱
底部菜单设计了三个按钮，违反了费茨定律的设计原则。用户在这个支付页的主要目标是支付费用，但是菜单栏的三个按钮权重设计得一样高，取消订单和购买返程这两个按钮，严重干扰了用户的选择，降低了操作效率。
1.1.1.4 支付成功页
当用户支付成功以后，「支付成功页」为用户提供餐饮预订、出行保险、酒店入住、网络约车等服务，非常便捷。不过内容的规划比较乱，体验稍差。

1.1.1.5 候补下单
「候补下单」是一个非常方便的功能，这个功能主要解决在当前车次没票的情况帮助乘客自动排队，如果有其他乘客退票，就自动抢票，非常贴心。这个功能也被誉为黄牛的终结者，帮助乘客自主排队。
1.1.2 变更到站
「变更到站」是指乘客可以更改目标站点，进入订单详情页后，点击「变更到站」按钮，点击底部的「立即变更到站」就可进入变更页面。在变更页面，乘客可以重新输入目标站点，然后再次进入车票售票页，选中需要变更的车次以后，进入订单页提交订单，变更成功。需要注意的是，变更到站只能办理一次。

体验陷阱
当用户点击「变更到站」的时候，如果不注意观察页面，根本感受不出原来需要在底部菜单栏进行操作，会让乘客陷入焦躁，不知道下一步从哪里进入。其次在变更到站页面，下半部分设计了很多快捷入口，比如车站大屏、约车、餐饮特产等，把用户的注意力分散了。这两个设计都严重了违反了费茨定律和席克定律，大大降低了用户的操作效率。
1.1.3 改签
「改签」是指用户可以更改出行的时间，改签的流程和「变更到站」相似，进入售票页后，选中需要变更的车次，进入订单页提交订单，改签成功。需要注意的是，车票改签只能办理一次，开车前48小时以上，退票费为票价5%，24小时至48小时之间为10%，不足24小时为20%。退票费最少2元起步。

1.1.4 退票
「退票」是指用户可以退掉已经购买的车票，退票流程比较简单，点击退票后，进入退票确认页，点击确认退票成功。需要注意是，距离开车前8天以上的不收退票费，其他的时段将会根据列车开车前的时间收取手续费，最高20%。

迭代建议
在用户点击退票的时候，应该出现弹窗，再次提醒用户是否确认退票，这样能避免用户误操作。这就是尼尔森十大原则的容错原则，帮助用户从错误中恢复，将损失降到最低。
1.1.5 购票后
当乘客购买车票后，12306的首页会加入一个行程的版块，向用户展示最近的行程详情，其次一级菜单栏「出行服务」内容也会同步更新。这个设计非常友好，直观醒目地告诉乘客最近的行程信息，通过外部触发避免乘客忘记行程。
1.1.5.1 行程页
这个页面从上至下包含四个部分，头部是乘客详细的车次信息，比如出发时间、经停站、天气等；中间是车票信息，包含检票口、座位号、车次和乘车二维码等信息；接下来按乘客出行前服务、车站/列车服务和到达服务三个场景为乘客推荐其他服务，比如餐饮预定、酒店预定等服务；底部是关于出发站、到达站的天气预报信息和优惠服务等信息。

细节侦查
行程页把乘客的出行拆分为3个场景，出行前服务（提供重点客户预约、我要选酒店、我要去车站、我要订餐饮和禁带物品规定）、车站/列车服务（提供临时身份证证明、遗失物品查找、我要订餐饮和站内导航）和到达服务（遗失物品查找、我要订酒店、接站约车、旅游景点预定、投诉建议和站内导航），这就是以场景为中心的设计——将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成什么任务”。
1.2 飞机票
「飞机票」就是为用户提供飞机的票务销售，用户需要输入出发站、终点站和出发时间，如果携带孩子或者婴儿，还需要单独勾选。飞机票同样支持改签和退票。
1.2.1 售票页
售票页的内容非常简单，在头部，用户可以左右滑动选择时间，页面内容以Feed流向用户展示详细的航班信息，其次还为用户提供了其他出行方案参考。底部设计了一个菜单栏，用户可以进行筛选设置，还可以根据价格高低和出发时间排序。

1.2.2 选择舱位
选中航班班次以后，进入到「选择舱位页」，在这个页面可以查看到航班的详细信息，比如航空公司、起飞时间、值机柜台等。用户需要选择舱位等级，比如经济舱、商务舱和头等舱，选中后，即可进入预订流程。

拓展阅读
为什么同一架飞机同一个经济舱飞机票价格不一样？这是因为一个飞机的不同舱位实际上是不同的产品，所以座位有不同的等级，故而价格有了出入。其次他们主要的区别包括但不限于退票改签的灵活程度、出票期限和目的地停留期限等等。
1.2.3 订单页
在订单页，可以查看到订单的详细信息，包括收费说明、退改说明等，在用户添加乘客以后，就可以提交订单。这里需要注意一下，如果乘客携带孩子或婴儿，需要添加儿童出行人。

体验陷阱
当乘客勾选了「携带儿童或婴儿」的选项以后，在订单页准备支付的时候，系统提示乘客需要返回添加儿童出行人信息。但却并没有告诉乘客如何添加，或直接给出对应的功能跳转链接，这让用户点击「返回添加」后却找不到功能入口。这就违反了尼尔森十大原则的防错原则，不仅在用户犯错之前没有给出提示，犯错了还不给与指导，真的非常糟糕。
1.3 汽车票
「汽车票」为用户提供客车的票务销售，用户输入出发站、终点站和时间以后，就可进入售票页。汽车票的订单流程非常简单，在选中客车车次以后，添加乘客支付费用后，订单即可生成。

体验陷阱
用户在选择「达到地」搜索框输入地名时候，应该提供模糊搜索，比如输入湖南的地名，应该为用户提示相关联的车站。
1.4 空铁联运
空铁联运，顾名思义就是把飞机和高铁这两个产品组合在一起销售，支持用户一站式购买“飞机+高铁”的联运行程，只需一次购票、一次支付。这个功能的使用场景主要是针对出发地和目的地没有直飞的航班情况下，为用户提供飞机+高铁的转运方案。这个功能对于乘客来说，支持一站式购买“飞机+高铁”车票，可以节省购票时间，非常友好。

1.5 铁水联运
和空铁联运一样，这也是一个组合产品的销售，支持用户一站式购买“高铁+水运”的联运行程。使用场景、功能价值以及操作流程和空铁联运一样，我们就不必重复。

1.6 雪具快运
12306还推出了一个雪具快运的服务，为广大旅客提供多种个性化雪具寄送产品服务，还支持随车办理或上门办理寄送服务，目的是为用户打造滑雪的新体验。「雪具快运」的操作流程也比较简单，采用预约制，选中服务后，填写用户详细信息，支付成功后，订单生成。

1.7 小结
作为12306最重要、最核心、最复杂的功能，从这个版块的内容拆解和实操体验来看，可以看出12306确实已经解决被誉为全世界最复杂的抢票算法逻辑（笔者通过实操测试，几乎都能买到票），特别是在春运这种会出现超过上亿用户抢票场景，真可谓非常不容易。不过从用户体验来看，非常一般，甚至有很多不合理的设计。
2. 出行
出行是12360结合了乘客在出行的场景中潜在产生的需求设计的服务，有结合车站商家的在线点餐，有结合当地地域特色的旅游服务，还有约车、保险、酒店等服务。这些服务，多数由第三方合作方提供。
2.1 餐厅特产
「餐厅特产」是一个为乘客提供在线点餐的服务，在乘客输入列车车次以后，就可以进行点餐，支持外卖配送至列车和到店自取两种形式。这个功能设计得很友好，不仅解决乘客在乘车前的就餐问题，为车站的商家引流，还可以增加平台的变现方式。

2.2 铁路游
「铁路游」是12306结合旅游出行的场景，为乘客推出的一项旅游服务，包含旅游专列、跟团游、周末游和自由行等。这个场景的链接其实非常好，但是版块目前设计得比较简单，内容也比较少。

2.3 约车
「约车」是为乘客提供接送站、接送机、打车和租车的服务。这是一个强刚需的需求，用户在出行的前后都有用车服务。为乘客提供约车服务，不仅能增加变现方式，还能方便乘客出行。通过实操体验，约车主要由第三方合作方提供服务，比如曹操出行、T3出行等公司，为乘客提供出租车、品质专车和商务车等车型。

2.4 保险
保险分为乘意险和出行保险。铁路乘意险分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险，在乘客购买铁路的订单页就会向乘客推荐，乘意险价格低，保障项目包含意外身故、伤残、医疗费用、住院津贴等。出行保险由第三方公司中国太平洋保险提供，主要为乘客提供出行安心保、空铁联运险和旅程预定取消险。

2.5 酒店
酒店这个版块的内容相对夯实，不仅有新客大礼包这样的用户权益，还有商旅专区、今夜甩卖、高端酒店这样的内容。甚至还设计了专门的酒店会员VIP，包含普通会员、银卡会员、金卡会员、白金卡会员和黑金卡会员，相对其他版块而言，这个版块花了比较多的心思。

2.6 铁路商城
铁路商城是12360以乡村振兴·帮扶推介为主题打造的一个商城，包含了帮扶专区、优选好物、兑换专区、今日特卖等内容，其次还支持企业集采，批量购买。

2.7 小结
从这个版块，可以看出12360其实结合了用户吃穿住行的刚需场景设计了对应的服务，有自主运营也有完全依靠第三方提供。不过整体的用户体验比较差，事实上可以参考像顺丰速运、智联招聘这些APP，通过内置小程序的形式来设计，完全可以把这些版块让第三方单独设计和维护，同时还能为用户带来更好的体验。
3. 会员
铁路畅行会员是中国铁路统一对外会员服务品牌，开通畅行会员不需要花钱，畅行会员主要是用于会员用户积累乘车积分、用积分兑换车票等，主要包含积分权益，兑换车票、无票候补和会员活动四大会员权益。这个页面设计得比较简陋，也没有太多价值的内容，可以看出12306在用户运营方面比较欠缺。

4. 订单
12306的订单包含了火车票订单、餐饮订单、保险订单、酒店订单、空铁联运订单、计次定期票订单、约车订单、出站引导服务订单、铁路商城订单、汽车票订单、旅游订单和铁水联运订单多达12种订单，从这些订单类型可以看出12306的服务特别多。

体验陷阱
这个设计实在太糟糕，严重违反了7±2效应。琳琅满目，花枝招展，让用户在这个页面几乎迷失。更糟糕的是，当你有一个非常重要的待支付订单，这个页面竟然没有角标提醒，最终你会因为这个糟糕的设计打乱自己的行程计划。

四、内容服务

内容服务是帮助产品实现用户留存和运营的版块，不过从12306的内容设计来看，整个产品的运营手段比较少，所以我把12306现有设计的功能拆分为便捷功能和向导功能。

1. 便捷功能
以下这七个功能，对用户而言，是非常便捷、友好的功能，可以帮助用户在出行的旅途中获取很多帮助。
1.1 车站大屏
「车站大屏」是一个非常贴心的功能，通过这个功能，可以为用户提供车站的实时列车信息，非常方便。大屏详情页可以拆分为三块内容，左上角可以切换全国各地的火车站，头部还有搜索框，为用户提供车次的查询，主体内容是当前车站向西的车次信息，包含发车时间、候车室、检票口和候车状态等。

1.1.1 车次详情页
进入列车的「车次详情页」，可以查看当前车次的完整信息，比如检票状态、候车室、检票口和全程停靠站、停留信息。在这个页面，还提供了「关注列车」的功能（关注后并无关注数据，显得很鸡肋），以及直接预订当前车次的入口。

1.1.2 车站详情页
「车站详情页」就像一个站点的主页，为用户提供完整的车站信息查询。这个页面可以拆分为四块，头部可以切换其他站点，并提供当前车站的天气情况以及车站基础信息。金刚区位8个功能入口，包含车站车次、站内导航、重点旅游、餐饮服务、周边酒店等。中间是当前车站的起售时间和换乘时间，底部是车站附近周边的酒店精选。

迭代建议
这个页面把车站当做一个主体，聚合了一个车站完整的功能，其实挺有创意，但页面隐藏得很深，如果不去拆解，几乎很难发现，很是可惜。我认为完全可以提高权重，升级为一级栏目，代替会员，或者和出行栏目进行整合升级。
1.2 站内导航
「站内导航」提供目标车站的LBS导航，对于乘客来说，到达一个陌生的站点，需要清晰的指引，这是一个非常便捷、温馨的功能，能帮乘客解决很多问题。不过这里有一个莫名其妙的设计，那就是进入这个功能之前，系统提示请摇“8”字校准手机，事实上这里是一个加载动画，但是画面和内容却误导了用户，我甚至每次进入都傻乎乎的摇动手机。

1.3 临时身份证
临时身份证是一个非常重要的功能，12306现在支持APP在线申请，极大方便了乘客的出行。申请流程也比较简单，填写个人信息，验证审核通过后，就可以生成电子证照使用。每个人每个月有3次申请临时乘车身份证机会。

1.4 遗失物品
这是一个非常贴心的功能，如果你在乘车的过程中不小心丢失物品，可以通过这个功能登记，输入你的详细信息就能登记成功。

1.5 重点旅客
这也是一个非常贴心的功能，主要为老年人、残疾人服务，通过填入你的信息，列车会根据你的情况提供优先进站、协助乘降等服务。

1.6 爱心版
爱心版就是长辈版，专门为中老年用户设计的版本，在用户中心切换后就可进入爱心版。整个版本设计得非常简洁，操作步骤也比较简单，对中老年用户比较友好。

1.7 英文版
英文版在用户中心的设置点击语言即可切换，整体的版本设计得直接简洁，用户体验不错。

1.8 小结
从这个版块可以看出，一个产品如果以用户为中心去设计，是可以为用户带来很大的便捷和愉悦体验。比如像临时身份证这样的功能，过往我们只能提前出发去车站排队办理，但如今12306已经把这样的痛点解决，为用户节省了大量的时间。
2. 向导功能
以下8个功能，虽然属于出行向导，不过体验下来，感觉用户体验比较差，很多功能完全无法弄懂它的设计目的是什么，显得非常鸡肋。
2.1 快捷退票
「快捷退票」这个功能的设计，让人摸不着头脑。从操作流程看，首先需要输入用户的详细信息，包括姓名、身份证号码和手机，其次需要进行人脸核验，到了第三步还需要选择车票的日期车次，在最后的退票操作页面，用户点击退款后，没有和用户再次确认就直接退票。整个流程体验下来，非常糟糕。

体验陷阱
这个功能和订单页的退票感受不出来有何区别？如果用户要退款，不如直接去订单页进行退票，操作步骤简单，一目了然。其次不支持自动导入用户的购票信息实在太不方便，需要通过选择车票购买日期和车次，这个设计实在让人生气和愤怒（我在体验的过程中到了第三步只能退回到订单页把购票日期和车次截图下来，又再次重复前面两个步骤才到这个步骤）。
2.2 联系方式
这也是一个看不懂的功能，进入页面后，需要用户输入乘客的详细信息，但是这个乘客信息和用户在购买车票时候需要添加到乘客信息有什么不同？更糟糕的是，当你把自己的电话号码、身份证信息填入后，系统会显示核验成功，然而当你再一次进入，页面内容还是和之前并无区别，你不知道自己是不是还要重新输一次？

2.3 时刻表
「时刻表」主要为乘客提供查询列班车次的出发时间和到站信息，但这个功能「车站大屏」几乎已经包含了，这个功能显得意义不大。

2.4 查票价
这个功能非常鸡肋，因为在火车票的售票详情页就可以清晰直观地查询到列车票价信息，相反在这个页面，根本无法看到价格，因为价格的字体大小只有20px，乘客几乎很难注意到。

2.5 查代售点
这个功能主要为用户提供全国各地火车票代售点的查询，不过在互联网技术发展到今天，火车票代售点越来越少了。从12306采集的信息来看，部分代售点缺少电话等关键信息，对用户来说，比较鸡肋。

2.6 起售时间
这个功能为用户提供各车站每日的起售时间，属于一个低频功能，可以解决乘客某些极端场景的需求。不过在我体验下来，比如通过此功能查询1月29日的车票，显示北京站起售时间为10:00，但是在火车售票版块，我也可以直接购买1月29日的车票，这让我比较疑惑这个功能的价值在哪里。

2.7 正晚点
「正晚点」同样是一个鸡肋功能，而且还需要输入准确的车次才能进行查询，车站大屏已经完美可以取代这个功能。

2.8 列车状态
「列车状态」比正晚点都还鸡肋，让人愤怒，因为你需要输入正确的出发地、到达地和出发时间，对了，还有正确的车次才能进行查询，这样的操作成本比下载12360APP都还麻烦。

2.9 小结
从这个部分的内容拆解和操作体验来看，12360的产品设计得不够细致和贴心，很多功能就像是硬生生塞进去一样，滥竽充数。其次从他们的产品迭代记录次数可以看出，近1年更新时间只有5次，也许每一次都是在做加法，没有想过做减法，所以导致这部分的功能显得鸡肋而且有很大缺陷。

五、思考总结

通过对铁路12306的全面拆解，接下来我将从内容层、功能层、体验层和视觉层进行总结。
1. 内容层
12306整个产品的内容设计，用一句话总结，可以归纳为——心有余力而不足。可以看到12306围绕乘客购票、出行的潜在需求场景都设计了对应的服务，比如酒店、约车、点餐、商城等，甚至还有空铁联运、铁水联运这种多场景的组合售票方式，不过在实际的版块内容打造中，则显得比较空洞，体验一般。这个产品，可以说几乎没有创新点，这主要也是由于它是由国有企业设计运营，背景极其复杂，设计目标也飘忽不定。
2. 功能层
在2015年之前，铁路12360承担了被誉为历史上人口迁移最大的春运的抢票工作，那时候一票难求，春运去12360就像是一场噩梦。不过在经过多年的升级和优化以后，目前12360的购票效率非常高，经过笔者多次的测试和调研，目前通过12360购票已经不再是难事。而且还设计了候补抢票这样的功能，帮助用户解决买票痛点，可谓非常贴心、友好。
3. 体验层
铁路12306的用户体验，非常一般，我在这次的产品拆解中至少侦查出了20条体验陷阱，这些陷阱都会给用户带来极其糟糕和愤怒的体验。比如让我像个傻瓜摇动手机的站内导航载入页，这完全就是把用户当成傻子一样看待，其次还有一堆数不清的鸡肋功能，对用户的操作体验造成了严重的干扰。我甚至认为爱心版和英文版比标准版使用起来更愉悦，更能减少我的焦虑。
4. 视觉层
作为一个UI设计师，在拆解12306的产品过程中，我对整个产品的设计感到绝望。首先，没有做到统一性，整个产品毫无设计规范，比如卡片的圆角、品牌色、版块间距根本不统一，这样的视觉体验一眼望去就非常糟糕；其次，图标、活动图、橱窗图以及详情页的设计毫无美感，满满的山寨APP风格，特别是订单页的ICON，花花绿绿、琳琅满目，连最基础的统一都没有做到。

六、后记

作为一款国民级用户APP，铁路12306仿佛陪伴了80、90后的青春。还记得10年前老家是黑龙江和河北的大学室友，每年春运开启之前就为了回家的火车票犯愁，不仅要去遥远的火车站排队，很多时候还可能空手而回，那便是最初对12306的记忆。
如今十年过去了，12306解决了亿万人的出行抢票需求，让我们在春运的路上，可以轻松购买一张回家的票。但下一个十年，我更希望12360的产品团队，可以重视用户体验设计，让我们不再掉入那些体验陷阱。

作者：设计大侦探      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



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



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

前言

配图是我们平时在设计工作中经常用到的，一个好的配图很多时候会直接影响到一个作品的好坏，图片本身也是一种视觉语言，通过学习跨领域的知识可以帮助我们提升自身所处的领域设计能力，本篇文章和大家讨论一些构图和景别知识，通过对这些知识的了解判断如何选择一个好的配图以及怎么应用好配图，大多数设计师选择配图时都是凭着主观意识在选择配图，你所选择的配图很大程度会受到你的主观意识的影响，这些主观意识来源于自身审美、文化、环境等因素的，因此在我们的主观意识基础上，应该具备一定的客观依据来帮助我们更好的选择合适的配图。

构图与景别知识在摄影、绘画、影视中应用很多，但很多设计师容易忽视这些知识，这些知识看似是摄影、绘画、影视等行业的知识与设计好像没太大关系，这些知识也是很有必要学习的的理论知识，对构图景别的理解很大程度会影响你能否把握好设计画面中的配图，配图本身也是一种视觉语言，提升构图和景别知识对设计师整体综合实力提升是有帮助的，当你做三维和插画等设计时同样也会用到这些知识，了解这些知识会让你以客观依据的角度，运用和判断设计中配图的好与坏。

01 关于构图

目前来看几乎所有的艺术或商业作品，无论是摄影、绘画、CG等都离不开画面的构图与结构，你甚至能在很多绘画大师的的经典作品中看到他们作品中也使用了构图理论，合理的构图作品，给观众美的视觉享受和与众不同的情感体验，同时提升画面表现，关于构图的知识很宽泛，构图方式方法也非常多，有的作品中可能包含多种构图形式，这里给大家大致介绍一些常见的构图知识，目的是抛砖引玉让大家意识到良好的构图能平衡画面同时，传达出更清晰明确的图像信息。

1.1 中心构图

中心构图是将画面主体放置在画面的视觉中心，让主体成为整个画面的视觉焦点，通过周围环境氛围烘托画面主体，这种构图形式聚焦主体，能更好的凸显画面主体。

1.2 一点透视

一点透视构图有较强的空间感和纵深感，画面的元素会向中心聚焦，会把观众的视觉引导向画面中心，比较适合表现画面空间感。

1.3 黄金法则

黄金法则构图遵循古希腊学者毕达哥拉斯的黄金分割比例进行构图，也就是我们常说的 0.618:1，黄金法则构图有采用像三分法那样井字构图，还有采用黄金螺旋的构图方式，构图时将主题放置在黄金比例焦点或线上。

1.4 对角线构图

对角线构图中主体在画面的对角线位置排列，对角线构图视觉冲击强，具有动感和不稳定性，更使画面更有趣味和视觉张力。

1.5 三角形构图

主体在画面中呈三角形状，正三角形构图画面更具稳定性，反之倒三角形构图会使画面有紧张感和不稳定性。

1.6 字母形构图

字母形构图画面呈现字母形态，不同的字母构图会给观众带来不同的视觉感受，S 形构图是一种比较常见的构图形式，S 形构图迂回延伸使画面产生优美、雅致、韵律感。

1.7 引导线构图

引导性构图利用画面中有形或无形的线，引导观众的视觉聚焦到画面的重点，引线不一定是一条线，它是一种具有引导性的东西，光影、道路、河流等都可以做为引导线，引导性构图视觉表现强，引导观众视线突出主体。

1.8 三分构图

三分构图是最常用的构图方法，结构由两条竖线和两条横线构成，形成一个井字，也叫井字构图法，在三分构图中主体通常放置在四个交点上或线条上，三分法是比较常见的构图形式，可以在很多摄影和绘画作品中看到。

1.9 对称构图

对称构图是根据对称轴，使画面形成的对称的构图形式，比较常见的对称构图上下对称、左右对称，对称构图具有平衡性、稳定性、均衡性。

1.10 水平线构图

水平线构图也是比较常见的一种构图，水平线构图通常表现宽广的场景，地平线、海面、湖面等主题，水平线构图给人宽阔、稳定、平静、舒适的感觉，水平线构图主要是是采用横画幅来表现。

1.11 垂直线构图

垂直线构图中主体呈现为垂直的线条，垂直线构图给人高耸、庄严、挺拔的感觉，具有较强的视觉张力，锤子线构图常采用竖画幅来表现。

1.12 十字形构图

十字形构图是水平线和垂直线的组合，十字形构图画面会给人平稳、安全、严肃、神秘的感觉。

1.13 夸张透视

夸张透视会以比较特别和夸张的的视角表现画面和主体，使画面整体都具有强大的视觉张力和冲击力。

1.14 虚实对比

虚实对比通过主体和背景的间的虚与实对比，从而突出画面主体，虚实对比使画面更有层次和空间感。

1.15 明暗对比

明暗对比通常以暗衬托明，在视觉感受中越暗感觉离我们越远，越明亮感觉离我们越近，明暗对比对比可以使画面更有立体感，层次感等，通过画面中的明暗对比形成的强烈反差，可以凸显画面中主体，引导观众视线到主体上。

1.16 色彩对比

色彩对比中包含三个要素色相对比、纯度对比、明度对比，同时根据色环中的色相变化，还可以分为同类色对比、邻近色对比、对比色对比、互补色对比，色相角度变化越大对比月强烈，通过色彩对比可以突出画面重点、丰富画面、提升画面层次，背景色彩与主体色彩形成对比，能凸显画面主体。

1.17 奇数原则

奇数原则画面通常是一个、三个或五个主体，通常不超过七个，超过七个时观众会将其视为一个整体，当画面中为主体为奇数时，在视觉上会比偶数更和谐、更美观。

1.18 视觉引导

视觉引导通过画面内容引导用户视觉，视觉引导形式有很多种，人物或动物直视、运动方向、肢体语言等，都可以引导用户在观看画面时的视线运动。

1.19 大小对比

通过大小对比使主体与周围元素形成差异化的视觉冲突，同时大小对比中的次要元素还可以作为比例参考，突出主体的大小，强烈的视觉落差增强版面节奏。

02 关于景别

裁剪图片为不同景别的图片对板式设计也有很大影响，不同景别的图片传达的视觉语言也是不同的，哪怕是图片朝向的位置都值得我们仔细思考，在配图时我们要思考通过图片传达什么视觉信息给观众，所以在我们做设计时，要想清楚当前页面要传达什么样的信息从而采用什么样的景别。

2.1 大远景

大远景通常表现广阔气势宏伟的场景，大远景的空间感非常强，强化景物与环境的关系，主体相对较小与场景形成强烈的大小对比。

2.2 远景

远景营造主体与场景的关系，通过画面场景叙述主体和场景的关系，远景具有较强的空间感，具有开阔的画面场景。

2.3 全景

全景通过场景来体现主体的处境，利用人物和场景的关系强化主题，全景中主体会被强化形成明显的内容中心，从而弱化场景。

2.4 中景

中景表现主要表现人物膝盖以上，在中景中人物在画面中的占比更大更为突出，人物会被强化，同时弱化场景。

2.5 近景

近景主要表现人物胸部以上，画面中人物或主体会占有主导地位，强调人物的情感特征，通过细微人物的动作、肢体语言、表情等表现画面主题。

2.6 特写

特写主要表现人物肩部以上或主体的细微部分，主体被放大，场景弱化到难以分辨，强调主体的情感、心理或产品的工艺结构等。

2.7 大特写

大特写会将主题放的更大，展现主体的局部细节，大特写具有强调和突出主体细节特征的作用，具有极强的视觉效果。

写在最后

配图知识是设计师在平时工作或设计练习中必备知识，很多时候我们在选择配图时完全是凭感觉在选，图片也是一种视觉语言，作品整体质量也会受到配图的影响，本次配图知识分享希望能帮助大家在之后选择设计配图时，在主观意识判断的基础上有一个客观的依据，写这篇文章的同时，我也正好根据文章大纲做了一套板式练习作为文章配图，最后给大家分享几个高质量的图片网站（需要翻墙）

图片网站分享

摄影类图片
https://unsplash.com/
https://burst.shopify.com/

CG类图片
https://www.deviantart.com/
https://wallhaven.cc/

作者：Tomato76      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



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



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

几乎所有c端产品中都会有收藏功能，也是为用户提供对喜欢的内容进行个性化保存、分类和管理的空间。

同时也方便用户再次消费某个内容时，减少再次记忆和查找的成本。比如我喜欢做菜，但是年纪大了记性不好，每次做一道菜我都会打开我的某音收藏夹里找到视频教程，这个老小子的视频教出来的菜味道真不错。

收藏夹要解决用户什么问题

两个关键词：1.管理 2.分类

管理，就是我们所说的增删改查。“增”，我们需要在用户浏览信息时给该信息提供收藏功能，这里要注意的是收藏信息的颗粒度，什么信息可以收藏，一段话？一篇文章？一个用户发布的完整内容？还是一张图片？产品对收藏最小单位的定义要明确，因为会影响到对收藏内容的分类。例如微信可收藏的最小单位很多，有链接（包含文章）、文件、图片/视频、音乐、语音、聊天记录、笔记、位置，而像饿了么只能关注店铺，对任何菜品、用户评论等等都无法进行收藏。b站你可以收藏视频、漫画、商品，但是不能他人的动态。

删没什么好说的，再来说一下改和查。因为他俩会涉及到收藏的流程。我们知道不同产品的收藏流程是不同的，例如马蜂窝、闲鱼等产品，用户收藏内容后只给出收藏成功的toast/提示栏提示，并告知收藏到了哪里；

而腾讯视频、抖音、携程则是当用户进行收藏后除了给出成功提示还会给出收藏列表的入口；

最后，像知乎、豆瓣在点击收藏后直接给出滑出操作框让用户选择收藏夹或创建收藏夹以及是否要转发。

3种流程的区别

前两种我认为区别并不大，是否要在提示框里给用户进入收藏列表的入口，更多还是取决于产品是否想让用户离开这个场景，还是让用户继续浏览。之前我们提到过闭环，但是闭环一般针对任务而言，但是收藏严格来说不算是“任务”，而是用户的一种“行为”，感知起来区别还是很大的，因为任务是有明确目标的，比如给用户安排一个任务，让他对某个商品进行分类收藏，那么用户会根据这个分类收藏的目标去进行操作，任务结束后给用户相关的引导和出口。但是在用户自然的浏览场景中，对内容的收藏并没有具体目标，所以要不要给用户在点击收藏后引导进入收藏列表要具体情况具体分析。

其次是知乎、豆瓣，在用户点击收藏后给予是否要创建收藏夹的功能，相比于前两种，对信息内容的管理，更加明显了。首先为什么他们和前两种不同呢，像知乎用户是有KOL效应的，个人的收藏夹可以公开，他人可以查看他人的收藏夹，有点类似于花瓣的画板，同时对于这类知识、内容类的应用，对于分类的要求和需求更高更多，本身知识的维度就很多，颗粒度很小，所以在用户进行收藏行为时主动提醒用户可以创建收藏夹。

那淘宝是怎么做的，它在用户收藏的时候也给出一个菜单，用户可以选择收入到某个收藏夹，也可以默认不放入，还可以去创建并放入，这就是更个性化了。

但是咱们说前两种没有给在收藏时给创建功能的就不个性化了吗？也不是，个性化也要根据产品定位和用户需求来的，比如马蜂窝的一些机票车票、旅游产品，做一个收藏夹创建，好像没必要，因为可收藏的类型不多，个性化标签也不明显，显然是没必要的。腾讯视频、闲鱼显然也是。那我们再来聊一个细节。

知乎在点击收藏某个回答的时候，页面会唤起收藏模块，让用户选择你要收藏到哪里，但这里的体验不是很好，因为用户想要收藏某个内容必须先选择收藏夹，如果不选择则无法收藏成功？

无论你当前是否创建了收藏夹，都必须选择或点击完成，如果有创建过，那就需要经历：1.点击收藏图标  2.点击要收入的收藏夹 3.点击完成，如果没有创建过那么默认会创建一个收藏夹。而淘宝则不是，无论你是否创建收藏夹，只要点击收藏图表那就已经收藏成功，在这个前提下，你可以选择是否要收入到某个收藏夹还是新创建一个。

所以知乎、豆瓣的收藏单位大多以回答、帖子为主，这样的内容系统无法帮助生成标签，所以需要用户自己创建分类，在收藏时给予创建功能是合理的，但我认为知乎这样的设计还是不够人性化，但是站在业务角度看，就是想引导用户去创建分类，也是能理解的，虽然在体验和效率上并不是最优。

创建、分类、搜索都是帮助用户再次进入收藏空间时能够更好的查找想要的内容。同时不同产品会有不同的筛选标签，比如微信阅读，收藏其实就是书架，哦，应该说，书架就是收藏。筛选维度分为：更新、进度、购买、分类。所以我们在设计收藏功能的时候，要根据用户的筛选场景和内容来制定合理的筛选维度。

收藏和点赞还有加入购物车的区别

收藏的属性就是收纳、管理和分类，但是和点赞、购物车不同，点赞意味着认同，具有社交属性，同时也为了帮助产品记录用户个偏好用作研究，而收藏则是用户想对该内容进行收集，比如我正在准备一个辩论赛，我抽了一个反方观点，虽然我本身并不喜欢这个观点，但是为了准备辩论的素材和题目我会对这个内容进行收藏，但不会点赞，虽然收藏大部分时候也有对内容的认可，但不完全是。所以收藏更多的是用户个人对信息的单方面管理，点赞则一个即时互动。

收藏和购物车也是一样的，购物车承载的是更多消费、商品营销的表达、算价以及凑单活动，购物车和直接消费强关联，而收藏夹多关注与对商品的存储管理、搜索查找，虽然也有一部分需求重合，但用处、和场景还是有很大区别的。

最后，总结一下，设计收藏夹时，我们首先得根据产品定位和用户需求以及内容的维度来选择好收藏夹的颗粒度或最小单位，其次，根据业务或用户需求设定好收藏夹的收藏逻辑和流程，最后，做好用户对收藏内容的查找以及分类筛选的体验。

作者：应骏      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



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



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

可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。

可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设计过程有所帮助。

// 为什么要数据可视化

数据可视化就是用图表来表示数据信息，它所传达的信息包括你所拿到的数据源和你分析后的结果，再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息，是我们可视化的最终目的。

举个例子，同样一组数据，用表格的形式呈现是很难有所洞察的；如果将各个地区维度的数据聚合以柱图形式呈现，很容易就能看出各个地区间数据的差异，并从中洞察规律

关于如何设计好数据可视化图表，这边总结了三个步骤：选择适合的图表，强化视觉层次，图表响应式适配。

一、选择适合的图表

数据可视化的图表种类繁多，当我们真的开始作图，往往会遇到一个困境：有这么多类型，要如何选择正确的图表呢？首要依据是考虑所要传达的信息意图，即所要制作的图表它的任务是什么，再通过分析数据关系来选择表达方式；第二层意图是图表传达内容，这时候我们就需要根据数据的特征去突出和强化。

1. 分析数据关系

根据数据分析的方式来看，每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构，再结合数据关系作出选择。了解图表的可能知道，一般图表的数据关系有构成、比较、分布，以商业数据为例，常见的还有流转关系。

构成关系

构成关系的图表表达的是部分和整体的关系，用于分析总体和各部分的占比比例，构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小，也可以使用比较关系的图表。

常用图表：饼/环图、堆叠图、面积图等，如涉及到层级结构，还会用矩形树图或旭日图等特殊结构图表。

关键词：“占比、比例、百分比”

比较关系

比较关系是基础分析中常用的一种图表类型。在一定的取值范围内，通过对两个或两个以上的指标分析，可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式，趋势对比用于表示一段时间内数据的变化，分类对比用于比较数据规模。

常用图表：趋势对比常用图表有折线图、散点图等；分类对比常用条形图、柱状图、气泡图等。

关键词：“增减、升降、涨跌、波动”

分布关系

利用空间分区来展示数据之间的分布关系，常用于体现两个或以上数据的相关性。

常用图表：散点图、热力图、雷达图等

关键词：“随着……而变化、A/B之间的相关性、交/并集”等

关联与流转

流转关系是B端数据常用的一种关系，它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等，以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。

常用图表：关系图、桑基图、漏斗图、进度图等

关键词：“流程步骤、留存、转化、关系”

2. 分析数据特征

按数据关系和分析目的选择好图表类型后，第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有：变量特征、维度特征、层级特征、流程特征。

变量特征

分辨一个指标通常有两类特征，按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势，离散数据通常统计各分类下数量的变化。

• 连续型数据：指在一定区间内可以任意取值的数据叫连续数据，其数值是连续不断的。如身高、体重等带有时间因素变量的数据等，通常用折线图体现变化趋势。
• 离散型数据：指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据，用柱图表现更加体现变量的特征。

维度特征

多维度分析需要将多个变量在同一平面上直观的表示，可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据，可使用不同颜色进行分类

• 根据分析视角选择图表：对于多维度变量的数据我们需要明确分析的视角，去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据，如需要全局视角查看个班的综合素质，推荐使用雷达图；对比单科成绩的变化分布，则推荐使用堆积图。

层级特征

多层级数据由多个部分构成一个整体，又称树形结构数据。除了用结构树图表表现以外，还可以考虑以下两种图表类型：

• 矩形树图：突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小，它以面积的形式突出展现各个子层级节点的占比，可帮助用户看到数据的层次结构以及各层级之间的关系。

例如：上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额，通过色调来区分不同类型，颜色的深浅代表分类下的子集，面积体现销售占比。对比一般结构树图表，它的优势在于可以有效利用空间。

• 旭日图：突出细分层级关系。由多个圆环图嵌套而成，也称为径向树图，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。常用于细分分析方法，将事物从大到小进行拆解。每个级别的数据通过1个圆环表示，离原点越近代表圆环级别越高。 旭日图在显示一个环如何被划分为多个层级时最有效，而矩形树图适合比较相对大小。

流程特征

流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径；其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。

二、强化视觉层次

选择合适的图表后，在信息传达上也需要正确的表达，展示形式美观的同时能够清晰的体现数据特点。

1. 强化数据特性

使用图表正确的表达信息，需要设计师在强化数据特性的同时避免偏差

• 趋势易感知：折线图数值如过于平均导致趋势平缓，有时候无法体现偏差；在强调数据趋势的场景下，推荐用动态取值范围让波动保持在一定范围内，放大波动占比更突出趋势。

• 展示更准确：柱状图依靠柱体面积体现最终数值，使用动态范围截断将会导致数据解读不完整；始终将 y 轴从 0 开始，才能更准确的反映柱图中的值。

2. 色彩视觉传达

除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一。

我们在之前的文章里有介绍过图表的取色模型，通过调整颜色HSL值的区间，可以得到以下三种意图色板：

• 定性型-分类色板：用于区分不同的类型，又称为无序色板。适合区分没有内在顺序的类别
• 定量分歧型-发散色板：通过两边互补色来体现，具有明亮的中间值，然后以不同的色调在刻度的两端变暗。通常用于可视化负值和正值
• 定量顺序型-顺序色板：从亮到暗或相反的渐变。适合可视化从低到高的数字。

那么我们要怎么样去使用这些色板呢？下面几个案例将带你了解其中的差异。

定性型：使用色调来进行分类

数据内在没有顺序差别时，建议使用色调值（H）进行区分；如定义国家、行业等类型。如果希望图表看起来更加专业，以下有几项分类色板的小建议：

• 选取尽量少的色调：取色时无需使用整个色环，使用邻近色或互补色的取色方式显得更加专业。

• 色板适度明暗交替：一些视障人士无法区分色相，主要靠颜色的明暗差异来识别，通过饱和度和暗度的调整，创造明暗交替的色板。

定量型：使用深浅色板强调内在顺序

如果在同一个分类下包含子类别，或者数据本身具有排名属性，那么建议使用连续色板来突出他们内在的顺序，使图表更加易读。

• 顺序色板-选择合适的插值：根据数据的分布情况选择不同的的插值断点，突出数据的差异。如以下案例中，根据统计学概念设定不同的取值区间，左侧示例使用的是平均线性差值，反映的是数据的集中趋势；右侧示例使用的是中位数插值，能更好的体现数据分布的形态。

• 发散色板-关注对比色的识别性：尽量避免红绿配色，如需使用绿色，偏黄或偏蓝的绿色更易分辨，对视障人士也更加友好。

三、图表中的响应式设计

B端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的环境，根据不同端去适配显示效果，以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。

1. 布局框架适配

在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间；元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。

如案例中的图表，在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。

2. 图表元素适配

要适配移动端，网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外，还需要考虑手机屏幕的尺寸和图表元素的适配性，去兼容相关的交互操作。

• 信息浮层：在图表中，信息卡元素是传达信息内容的重要组件，在网页端中悬浮展示，通常会占据很大空间；图表适配移动端后，信息浮层改动到图表上方常驻显示，并跟随手指的滑动变化响应数值，完整展示信息的同时也避免了页面抖动。

• 坐标轴标签：过长的坐标标签在适配过程中会产生重叠，而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配，避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配，精简空间避免堆叠。

3. 极值适配

因B端平台的特性，我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。

• 缩放和平移：在数据范围过多时增加取值范围的缩略轴组件，通过限制展示范围让数据量显示可控。

• 互动切换视图：如果折线的类别过多且无法省略的，建议分组查看。默认状态仅当前组折线高亮，其他数据以浅色显示，通过切换的方式查看其他组别的信息。

• 悬浮鼠标高亮：在分类过多不好分辨时，可使用悬浮高亮的交互方式突出相关联的数据组。

还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因，在这篇文章就不做深入讲解了，以后可独立介绍。

// 结语

数据可视化在B端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确，才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据，确保用户能够更好的接收信息，才是可视化的关键

作者：百度MEUX      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



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



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

本次针对百度APP中的视频播放器场景，为提升手势操控效率，我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型，以探索如何在视频场景中构建便捷高效的进阶手势体验设计。

二、什么是「组合手势」

「组合手势」是基于常规手势的组合扩展，其通常由两种或两种以上的常规基础手势所构成，若组合方式及使用场景得当，可助力用户更便捷的触达功能。

以前述的视频场景常规手势为例，其触发机制一般可分为两个阶段：step1交互信号→step2执行任务，即用户通过某一基础手势发出交互信号，系统收到信号确认后便可立即执行任务，但整个过程是线性的，手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。

于是我们在现有常规手势两阶段触发机制的基础上，尝试引入「意图识别」环节，并梳理出「组合手势」的设计模型，以探索不同基础手势相互组合后的扩展可行性。

「组合手势」触发一般可分为三个阶段：step1交互信号→step2意图识别→step3执行任务，前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。

由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口，因此，其差异化创新具有较大设计灵活度，尤其需根据具体的使用场景进行综合考量。

三、「长按组合手势」激活快捷菜单

1.项目背景

百度APP视频场景早期的播控功能较少，如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。

随着后续视频场景的功能建设日渐完善，我们便在基础菜单面板中拓展了一行视频菜单，专门用于承载视频场景特有的播控功能。但当前播控功能已达10余项，菜单面板弹出后还需左滑才可露出后面的功能入口，因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。

2.竞品调研及选型

通过对竞品进行调研，我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型，  分别为：长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。

选型A

「长按触发独立播控面板」：通过长按手势可激活从屏幕底部弹出的独立播控面板，此方案扩展性较强，但对视频沉浸观感体验有一定的打断感；

选型B

「长按触发浮层播控选项」：通过长按手势可触发置于视窗上层的浮层选项入口，一定程度上可延续视频观看的沉浸体验，但浮层扩展性有限；

选型C

「长按触发特定播控功能」：通过长按手势触发特定的某个播控功能（如长按“快进”），一定程度上可满足此功能的重度用户，但对于长按手势的使用效率较低；

3.设计方案

1）长按手势交互扩容

针对目前视频播控菜单存在的问题，经过和业务对上述三种长按交互选型方案进行综合考量，最终决定聚焦于以方案“选型B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置，并探索一套更便捷的触发机制，以此对视频场景中的播控菜单进行设计升级。

但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据，用户对此功能的使用频率高、并已形成较深的操控认知，若直接下线“快进”功能则会对用户使用习惯产生较大影响，尤其是视频场景的重度用户。

那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢？是否有可能将“快进”和“快捷菜单”进行融合？这也是本次项目对于便捷手势体验的重要设计探索点。

基于此，我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义，通过「长按+滑选」的机制触发快捷菜单功能项，以缩短视频常用功能路径。对应到设计模型的三个阶段分别为：

step1：以“长按手势”创建一个新模式，即发出交互信号并唤出浮层菜单；

step2：若用户未松开手指，则系统默认开始识别用户意图，是否有以“拖拽手势”滑选至目标功能项以选择功能；

step3：用户滑选锚定至目标功能后，松手释放即可完成最后的功能执行确认。

「长按+向上滑选」快捷触发对应功能项；

「长按+向下滑选」快捷触发“快进”（一定程度上兼容老用户对于此功能的使用习惯）。

2）容错性兼容
在设定「长按+滑选」组合手势的同时，考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程，我们同时也支持点选的操作模式，即用户长按后若未产生滑选行为便松手，则松手后依然可通过点选的方式触发对应播控功能项。

3）易用性打磨

差异化的创新设计形式在前期总会面临质疑和挑战，本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式，于是在DEMO开发完成后便进行了一次小范围内的定性可用性测试，以预期在上线前可先收集一波体验问题进行快速打磨优化。

我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本，并邀请了10+名不同年龄段的目标用户进行访谈测试。

测试访谈的过程中，被测用户在进行1至2次尝试操作之后，均可掌握如何使用「长按+滑选」的组合手势，这也为我们增添了不少信心。

同时，我们通过观察用户操作行为及用户主动反馈，发现仍有部分易用性细节可进一步打磨优化。

3.1 ）扩展触发热区：

考虑到单手握持手机的使用场景，可尽可能扩大定义长按手势的触发热区，屏幕中除顶/底bar框架区以及本身就自带长按事件的按钮入口之外，其它大面积区域热区均可支持长按触发快捷菜单，以降低触发难度、提升易用性。

3.2 ）支持跟手触发：

长按后浮出的快捷功能项，其浮出位置支持跟随手指的纵向触发位置而浮出，可减少手指在屏幕上的位移距离、操控更便捷。

3.3 ）实时提示及响应反馈：

灵活判断当前手势触控状态（如滑入选择 / 松手触发），在界面中即时给出相对应的引导提示或振感反馈，以帮助用户快速适应新的手势触发机制。

方案上线及验证

以AB实验对本次设计方案进行定量测试验证：

「对照组」效果：长按触发“快进”（各播控功能入口仍归置于基础菜单面板之中）；

「实验组」效果：长按触发“快捷菜单”选项（支持滑选和点选模式）；

小流量实验上线后，经过近半个月的观察，大盘指标稳定、播放完成率等满意度指标稳步提升。

「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升，说明用户对部分高频功能的确有很强的快捷触发诉求。

「实验组」的“快进”虽多了一步触发步长，实验前期“快进”使用率不及「对照组」，但随着用户对于「长按+滑选」手势整体的使用占比持续走高，通过滑选触发“快进”的操作习惯也快速被培养起来，对于用户来说，长按快捷菜单带来的整体收益是大于折损的。

二期扩展方案
随着长按快捷菜单的上线推全，长按手势的渗透率也持续走高，用户逐渐对视频场景更多的播控功能有了长按触发的诉求，于是我们对长按菜单进行了二期的设计升级，在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能，用户通过长按后的可选播控项增多，播控功能整体的使用量得到进一步提升。

四、「组合手势」拓展探索

手势交互是用户在现实世界行为的映射，无论是基础手势还是组合类高级手势，都须符合用户认知习惯、并融入具体的使用场景中进行设计。

以「组合手势」设计模型为指导基础、并结合具体的项目实践，我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。

1.「右滑返回手势」激活“小窗播放”

“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。

基于用户的此种操控意图，我们以“右滑返回手势”发出交互信号而触发浮出小窗入口，随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图，若有短距上滑拖拽行为，松手释放即可快捷激活视频小窗，以提升观看体验的连续性。

2.「双指手势」激活“满屏播放”

“双指拖拽手势”可拖拽并清屏视窗画面，以此手势发出交互信号，若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为，则松手释放即可快捷激活“满屏播放”，以满足更沉浸视频浏览体验。

五、结语

便捷手势的设计出发点是为提升操控效率、缩减功能触发路径，从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发，后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。

作者：百度MEUX      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



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



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

关于B端组件｜按钮 的设计要点分享

提到按钮，大部分人印象就是文字加个背景框，并没有太多需要设计的空间。但是作为B端设计师，相信很多同学在工作过程中都产生过以下问题：

按钮作为最基本的交互单位之一，几乎在每个页面中我们都会使用到。由于不同行业下业务场景的复杂性，很多时候很难直接参照其他产品的按钮进行复用，也无法用一套布置方案复用所有场景，所以作为B端设计师需要对按钮控件具备足够的认知，理解其背后的使用逻辑和规范，才能满足多层级跨场景的设计需要。

本文结合自身的工作经验，对按钮进行了系统性的整理和总结，希望对各位B端设计师同学的日常工作和学习有所帮助。

01 按钮的发展历史

在详细介绍按钮前，我们先简单了解下按钮的发展历史。按钮的概念起初是源自现实物理世界的实体按钮，在日常生活中如电源开关、计算器、电话等都是通过实体按钮进行控制，由于其简单直观易操作的特性，即使如今各种电子产品都逐渐发展为触控屏操作，实体按钮依旧被保留了下来。

当数字屏诞生后，人机交互设计开始走向数字屏幕后，为方便用户理解，在很长一段时间内设计师都是采用拟物风按钮来暗示用户可执行的操作。伴随着客户端设备升级和开发方式的变更，至2013年 Apple 在iOS7上第一次采用了扁平化设计，至此按钮样式开始往扁平化发展。随后历经了多年发展，按钮的样式开始层出不穷，但是无论样式如何变更，其背后的体验交互逻辑依旧是物理世界按钮的映射。

02 什么是B端中的按钮

2.1 按钮的定义

在B端设计中什么样的组件可以定义为按钮？我们先来看看国内外设计系统中对按钮组件的定义：

总结来说，按钮可以理解为用于承载即时操作和命令的组件。由于B端产品业务逻辑复杂、页面流程多，相较于传统意义上的按钮，B端中的按钮被设定为可复用、规范化的组件，通过对组件元素进行拆解、归纳、重组，将其划分为特定类型的组件方便管理和使用。

按钮相较于输入框、选择器、单选框等控件无法进行数据输入，相较于标签、文字提示等控件也无法进行信息浏览，其关键在于【即时性】和【承载操作】，既可单独完成操作，也可与其他控件联动，作为触发操作的行动点。

2.2 容易与按钮混淆的控件

1）标签 Tag

虽然同样翻译为标签，但是此处指的是 Tag 标签，而非 Tabs 标签页。标签在样式上与按钮几乎相同，且同样可以添加图标标识和触发操作。两者的区别在于，标签侧重于信息的选择、筛选和分类，而按钮则只是单纯用于触发即时操作，因此很多时候标签会设置不同颜色样式以便信息区分。

2）开关 Switch

和其他录入控件相比，开关Switch最显著的特点便是和按钮一样触发后立即生效，因此很多初级设计师很容易将其与按钮归为一类。

其区别是，开关承载的是两种互斥状态的切换，如打开/关闭、显示/隐藏、启用/禁用等，此外由于在视觉上符合用户对现实世界中开关的认知，所以可以直接展示当前项的状态。

3）单选/多选框 Radio/Checkbox

单选框和多选框一般用于状态标记，但是无法直接触发操作，所以通常会和按钮配合进行使用。最常见的搭配场景便是在登录页，用户勾选【记住密码】或【自动登录】后标记其状态，再点击按钮进行登录。

03 按钮的原子拆解

相较于其他组件，按钮的元素构成较为简单，分为内容层和容器层，通过将不同元素进行搭配组合，即可设计出不同类型的按钮类型和按钮状态。

内容层：图标和文字自由组合。内容层作为操作引导的核心必须存在。

容器层：控制颜色、圆角、描边、投影等样式，有些设计系统下还会加上交互动效，提升用户体验感。

04 如何区分按钮类型

在查阅大厂的设计规范时，相信以下按钮名称大家应该都不陌生：主按钮、悬浮按钮、图标按钮、危险按钮、下拉按钮、文字按钮、CTA按钮……很多新手设计师会产生疑惑：

为什么要划分如此多的按钮类型？

这些按钮间的区别是什么？

为什么各家设计系统下按钮分类都不相同，我应该选择哪种作为参考？

为了区分好按钮类型，关键要先明确类目划分的边界。这里为了方便大家学习，我从按钮的强调程度和使用场景2个纬度将按钮进行划分，基本涵盖了常见的按钮类型：

4.1 依据强调程度划分

在同一个页面中往往会存在多个行动点，因此需要将按钮依据强调程度进行划分，确保用户可以依据设计的按钮层级快速找到最需要操作的按钮。常见的按钮强调程度可以分为3个层级：

高度强调：承载页面上最重要和突出的行动点。为了保证视觉层级最高，通常会采用大面积主色填充或投影增加空间层级的方式进行区分，例如主按钮和FAB按钮（悬浮按钮）

中度强调：承载仅次于最重要行动点的常规操作。为了避免太过吸引用户注意，通常采用中性色进行描边或填充，也被称之为次按钮。

轻度强调：对页面中其他操作补充或可选操作。为了确保视觉上不凸显，通常不会填充背景色，常见于文字按钮和图标按钮。在轻度强调中还可以划分为弱强调（内容填充主色）和不强调（内容填充中性色），由于文字按钮填充中性色难以和正常文本进行区分，所以一般内容填充中性色只会用在图标上。

由此我们得到了依据强调程度划分的几个常见按钮类型：主按钮 > 次按钮 > 文字按钮 > 图标按钮。接下来针对每种类型我们来展开说明。（FAB按钮在B端页面中属于特定场景下使用的按钮，不具有通用性，故划分到使用场景中进行讨论）

1）主按钮 Primary

主按钮代表着页面中的核心操作项，是视觉权重最高的按钮，常用于突出提交、完成、确定等操作。为吸引用户注意，常使用品牌色填充背景引导用户视觉焦点。关于主按钮的使用需要遵循以下2个原则：

• 在一个焦点任务中最多只使用一个主按钮。同时存在多个主按钮会让用户失去操作焦点，造成信息干扰。

• 主按钮并非必须使用。如果没有必须突出的操作项，强行添加主按钮反而会打破按钮间的层级关系。

2）次按钮 Secondary

次按钮是使用最频繁的按钮，当在页面中不确定选择哪种按钮时，使用它往往是最安全的。次按钮通常使用中性色，其样式可以分为描边型和填充型：描边型使用最为广泛，是次按钮首选的样式，而填充型相对特殊，在不同设计系体下会根据业务场景选择是否使用。

关于填充型次按钮

相较于描边型，早年在B端产品中很少会见到使用填充型样式作为次按钮使用的，但是可以发现近几年国内外设计系统如Arco Design、Marterial等，开始陆续将填充型次按钮纳入到按钮组件库中。

填充型次按钮更多的使用场景是在移动端上，其视觉强调程度弱于主按钮但又高于描边型，可以更好的表达组件的整体性和吸引用户注意。

伴随着硬件设备的发展，桌面端和移动端的操作边界开始逐渐模糊，各产品开始追求全生态环境下的统一性。为降低用户在设备切换时的体验隔阂，一套设计系统需要能同时满足多端设备的兼容，而填充型样式更符合其场景需求。最典型的便是iPadOS连接鼠标操作时，悬停态下填充型按钮明显比描边型更容易被识别。

如何选择次按钮的样式

基于以上考虑，在工作中选择次按钮样式时可以参考以下建议：

如果当前项目上已经有在使用的开源库，尽量以原有组件库为主。除非自身产品有设备互通的场景或需要同一套设计语言兼顾不同端，否则增加多余的次按钮样式只会更加复杂且影响用户的体验一致性。

如果是项目是0～1搭建组件库，根据自身业务场景选择其中一种样式使用即可。一般桌面端产品使用描边型，如果产品生态中有移动端，为了保持设计语言的统一更建议采用填充型。

此外还需考虑前端修改组件库样式时的开发成本。

3）文字按钮 Text

文字按钮适合承载如取消、还原等无需特意强调的操作，通常使用在表格操作栏、表单页等场景。为了和普通文本做区分，提示当前内容可交互，需要加上链接色（一般是蓝色）提醒用户。

文字按钮和链接的区别

文字按钮和链接（Link）的默认样式一致，在搭建组件库时很容易发生混淆。其区别在于按钮用于发起动作，触发相应的业务逻辑，而链接的作用是导航，作为页面跳转或锚点定位的触点。为了更好的区分，可以在交互样式上进行处理：

文字按钮：指针悬停时容器添加背景色。

链接：指针悬停时文本添加下划线。

4）图标按钮 Icon

图标按钮的视觉层级最弱，但是由于占据空间小，常用于同时展示多个操作项时使用。由于缺少文字解释，单纯的图标可能会造成用户的理解偏差，故建议在指针悬停时加上Tooltip的文字提示进行辅助说明，对于特定操作还可加上快捷键指引。

4.2 依据使用场景划分

在依据强调程度划分的基础上，还有部分按钮只应用于在特定的业务场景中，所以各设计系统下的按钮分类会有所不同。以下按钮的应用场景较为频繁，故被单独划分为一类方便交流和管理。

1）功能按钮 Function 

功能按钮顺应用户心智，采用绿色、橙黄色、红色代表了成功、警告、危险三种功能按钮，用户无需浏览按钮内容，直接通过色彩即可识别当前操作可能导致的后果。
由于功能按钮的视觉权重往往比主按钮还高，在页面中需谨慎使用，避免对其他页面信息造成干扰。

2）虚线按钮 Dashed

相较于普通的描边型按钮，虚线按钮只承载传输文件或新增配置项等操作，为方便用户感知，将其描边设计为虚线样式。

上传 Upload

由于虚线按钮只能支持单纯的触发操作，在很多上传情景下不能满足其业务需求，故逐渐衍生出单独的上传组件，相较于虚线按钮：

上传组件支持批量上传

通常有更大的交互区域且允许支持拖拽上传，以降低用户的操作门槛

搭配展示文件列表，用于对已上传文件进行预览、重新上传、删除等操作

3）幽灵按钮 Ghost

顾名思义，幽灵按钮不具备实体性，一般底色为透明，其按钮的内容反色，通常使用在复杂或颜色较深的背景中，例如 banner 图、官网首图等，避免按钮突兀地破坏背景的整体性。由于幽灵按钮使用的场景不固定，因此无须严格遵循现有规范，只要满足其特定场景下的业务需求即可。

4）行为召唤按钮 CTA

CTA，即“Call to Action”的缩写，意思是行为召唤。该词原本是营销领域的术语，后来逐渐引用至互联网领域中，即目的在于给用户一个明确的反馈：当前事件的操作流程已经完成或即将发起一个新的流程。

CTA按钮之所以会被单独归类，因为当按钮作为吸引用户采取点击行为的载体时，时常在事件操作的最后一步出现，作为产品的关键触点之一，可以有效提高页面或屏幕的转化。也因此当页面中存在多个按钮时，CTA按钮的优先级往往是最高的，可以通过色彩对比、元素点缀等方式引导用户点击。

5）悬浮按钮 FAB

悬浮按钮FAB，即Floating Action Buttons的缩写，其特点是会始终悬浮在页面的固定位置，不会随着页面滚动而消失。

在B端产品中，FAB按钮更多的使用场景是承载全局性的附属功能，常见操作包括咨询、客服、快捷键、点赞、收藏、分享、回到顶部等。在设计FAB按钮时需注意以下要点：

不能干扰用户在当前页的正常操作和浏览。尽量放置在页面的固定位置，当操作数过多时可将其他操作下钻至更多按钮中。

承载操作须是当前页的全局操作，无须与其他页面元素发生联动即可触发。如不能承载保存、删除、清空等操作。

6）下拉菜单 Dropdown

按钮组不是单独的按钮类目，而是按钮组的集合体，当多个同级操作项同时出现，但不想占有太多页面空间时使用。通常按钮组会将最关键的主操作露出，其他操作收入更多操作项中。

严格来说 下拉菜单Dropdown 并不属于按钮类型，但因为其使用场景较为频繁且时常用来承载多个按钮操作，故在此处作为单独类型进行讲解。下拉菜单作为操作命令集合使用时，可以简单理解成按钮组：将多个操作按钮收纳到同一菜单下。在使用时有两点需要额外注意：

和选择器Select的区别

选择器Select 属于录入控件，在基本形态上和 下拉菜单Dropdown 高度相似，都是通过下拉浮层来容纳更多信息，在实际应用时经常容易被混淆。要区分两种组件，最关键是理解其使用场景：

下拉菜单：当页面上的操作命令过多时，用此组件可以收纳操作元素。核心是菜单导航和命令集合

选择器：用于一组选项中选择一个或多个数值。核心表单填写和数据筛选

样式与操作项的关系

当下拉菜单用来承载操作项时，各操作项关联性也会引起下拉菜单样式上的区别，这里用实际的案例辅助大家理解：

乍一看似乎都是差不多的样式，在工作中很多设计师也是随机选择其中一种进行使用，但是作为设计师，就是应该从细节之处见真章，每一处设计都应有理有据。
简单来说，以上三种组合按钮中的操作关联性是逐渐疏远的，这一点从按钮样式上也可以看出。

新建一：合并同类项。突出新建操作本身，更多操作项是新增的数据类型进行区分，减少重复文案的出现。

新建二：操作延展。强调的是数据导入的形式，提供更多操作渠道供用户选择。

新建三：信息收纳。各操作项之间并没有关联性，只是缓解空间压力或突出使用最频繁的操作。

05 按钮的交互状态

在了解了以上按钮类型，我们来看看按钮的交互状态。不管哪种按钮类型都会存在相应的交互状态，设计师在交付设计稿时需要将不同状态下的按钮样式进行标注，方便前端开发。

在刚开始接触按钮时也曾被一堆状态给乱花了眼，光是理解不同状态的区别已经头大。其实回头来看，开始只要记住4种最关键的按钮状态便可满足大部分的使用场景，即按钮的正常态、悬停态、点击态和禁用态。

在日常工作中，没有设置聚焦态和加载态并不会影响用户的正常使用，但是加上后可提升用户的产品使用体验，大家可以根据开发成本和实际的业务情况考虑是否加上。 

1）正常 Normal/Default

按钮的初始状态，即默认情况下的基础样式，此处不多做介绍。

2）悬停 Hover

当鼠标指针移入按钮时的状态。为了暗示用户鼠标指针已进入按钮的可交互区域，按钮相较于正常状态在背景色彩等样式上会有明显的区别。悬停态通常还会配合鼠标指针变化辅助用户理解，在前端CSS样式表中常用 cursor:pointer ，指针变化为伸出食指的手。
由于悬停态是由鼠标指针移动引起，故只有设计桌面端产品时需要考虑到，而在移动设备上通过手指操作故按钮不存在悬停的状态。（在iPadOS更新至13.4版本后开始支持连接键鼠操作，但是在日常工作中很少会出现，此处不予以讨论）

3）激活/点击 Active/Press

鼠标点击即按下按钮时的状态。激活态是在悬停态基础上发生变化，鼠标指针样式和悬停态保持一致，按钮背景色发生变化，提示用户已触发点击操作。

4）禁用 Disabled

按钮无法操作被锁定时的状态。该状态是为避免用户误操作而设立，如在登录页未完成信息填写时将提交按钮禁用，提示用户无法点击，只有填写完必填字段后才可以点击提交。在鼠标悬停时指针变化为禁用状态，在前端CSS样式表中常用 cursor: not-allowed，通常会配合tooltip文字解释说明行动点不可用的原因，避免用户疑惑。

值得一提的是，禁用按钮并非只有置灰一种样式，只降低色彩饱和度和明度也是禁用按钮的表现手法之一，且相较于置灰更方便用户识别主次按钮。

以上是针对不同按钮状态的说明，这里并没有针对不同状态的样式进行详细说明，因为不同的设计体系下可能会采用不同状态样式进行展示。为方便对比，这里将常见组件库中的按钮状态进行了整理：

可以发现，除了TDesign中描边按钮激活态下增加了中性色填充外，基本按钮状态都是保持着一致的梯度变化。这里以正常态的按钮样式为基准，将悬停和激活状态下的色彩变化进行整理：

总结来看，在不同色彩的按钮上按钮状态会按照不同梯度分布：

主色（品牌色）按钮色彩梯度从浅到深：激活 〉正常 〉悬停

中性色按钮色彩梯度从浅到深：激活 〉悬停 〉正常

之所以出现这种情况，主要是因为在搭建产品色彩体系时，品牌色一般会采用色板中间色作为主色（通常是第六个颜色），故不管往浅往深都有更多灵活调整的空间。而背景使用的中性色为了避免干扰视觉层级，通常选择色彩较浅的中性色，因此没有再往下延伸色彩梯度的空间。

以上介绍的四种状态建议采用色彩组件库中色卡进行配色，上图标注了不同按钮状态的配色选择，下面是AntD和ArcoD的色板生成工具（关于产品取色未来会专门出一期文章进行讲解）。

ArcoDesign Palette 色彩工具
Ant Design 色板生成工具

5）聚焦 Focus

该状态用于指示电脑光标的位置。在有些场景下不操控鼠标，只通过键盘方向或Tab切换选择页面元素进行操作，反而是更高效的操作方式。常见的聚焦态按钮样式为增加描边，有的设计系统下会采用和悬停态一样的样式。键盘操控快捷键推荐：

【Tab】前进

【Shift + Tab】后移

【Enter】激活

6）加载 Loading

表明用户操作后系统正在处理的状态。由于服务器响应或网络延迟等问题，有时候用户操作完需要间隔一段时间才能响应，加载态可缓解用户的焦虑情绪，避免用户由于未收到反馈而反复操作的情况。

源自 Arco Design-组件按钮

06 按钮设计需考虑的因素

接下来便到了本文的最关键部分，也是按钮设计中出现最频繁和令人头痛的问题：我的按钮究竟应该放在哪里？

在此之前先要理解按钮设计的目标是引导用户采取我们希望用户采取的行动。这就需要尽量帮助用户快速找到需要操作的按钮并了解执行该操作的结果，同时尽可能避免误操作。基于以上目标，我们从用户实际操作路径的视角来梳理按钮设计时应考虑的问题：

按钮区在页面中的什么位置——空间位置

有多个按钮时采用怎样的阅读顺序更合适——排列顺序

按钮采用怎样的样式更合适——视觉样式

6.1 按钮区的空间位置

当用户进入页面时，除了浏览当前页的信息内容还需要寻找接下来可执行操作的可交互区域，即按钮区。除了单纯通过视觉差异区分按钮和页面其他元素外，还需考虑到用户在信息浏览过程中的视觉动线。结合古腾堡法则和格式塔原理，给出以下设计建议：

1）放置在用户的浏览路径中

在没有其他视觉效果引导时，F型和Z型网页浏览模式可以作为用户视觉动线的基础指导，关于以上2种浏览模式网上有太多相关介绍，此处就不再赘述。

2）尽可能靠近其所控制或联动的对象

将关联性强的信息放在一起，可以降低阅读成本，提高用户的感知效率。

6.2 多按钮的排列顺序

1）保持用户的操作惯性

这里先讨论一下开头提到的问题：主操作项放在左边合适还是右边合适？我们先来看看一些案例：
可以发现，即使是业内顶尖的互联网公司也并没有遵从同一套确定方案。我们再看看这位在英国学人机交互的研究生所做的课题实验：https://www.woshipm.com/pd/3104897.html。具体的实验过程不再详细赘述，直接来看结果：对于新用户而言，确定按钮的位置对操作时间和错误率影响并没有太大差别。并由此得出更关键的结论：不要轻易改变当前产品中用户已经习惯的按钮位置。
在此基础上对于操作项不固定的页面，给大家整理了以下建议：

2）同类操作项按组分类

最典型的案例便是编辑器类产品的操作项，将同类操作区整理分组，方便用户查找。

3）阅读顺序符合操作预期

此处的阅读顺序并非特指从左往右、从上往下，而是依据用户当前视觉动线，优先满足用户预期或操作可能性最大的按钮需要最先被用户发现。

考虑到人体工程学操作习惯和操作后果的影响，还需注意一些特定的场景：

4）流程操作遵循方向认知习惯

流程属性的按钮如上一步、返回、后退等操作用户习惯在左边，而下一步、前进、更多等操作在右边。

5）破坏性操作提升操作门槛

如删除或清空按钮，尽可能放置在远离主按钮的位置，甚至可以下钻至更多按钮中，避免误触。

6.3 按钮的视觉样式

在文章开始基于强调程度划分按钮类型时，按钮的视觉样式便是基于其强调程度划分的，页面中越是需要强调的按钮其视觉权重越高。前文中只划分了主按钮、次按钮、文字按钮、图标按钮这4种基本类型，此外还可以通过文本粗细、内容量等方式进一步细分。

07 关于按钮的其他问题

7.1 按钮的尺寸

按钮的尺寸优先体现在其高度上，而宽度一般根据内容区大小自动适配。通常会将按钮分为大、中、小三个规格，以满足不同场景下的使用需求。

高度

• 大尺寸：通常使用在企业官网、账号登录、导航菜单等场景中。一般高度设置为40～64px。
• 中尺寸：按钮的默认尺寸，适用在B端页面的大部分场景。一般高度设置为28～40px。
• 小尺寸：常用于气泡弹窗等小型控件中。一般高度设置为12～28px。

宽度

关于按钮宽度需要注意的是，由于按钮内容的不固定，同规格按钮可能因为内容量差异引起视觉上的层级误判。故为了减少按钮错综不齐的情况，建议设置按钮最小宽度的界限，一般为4个文字+左右内边距。

7.2 按钮的文案

相较于其他方面，似乎大家对产品文案总是保持着“点到为止”的态度，但是并不意味着文案不重要，错误的文案会让用户产生疑惑，严重影响用户体验。相反好的按钮文字甚至可以做到即使不去阅读上下文，单凭按钮文案即可做出正确的判断。在一些关键节点的CTA按钮，文案的优化可以带来转化率大幅度的提升。因此关注文案细节也是设计师平时需要考虑的问题。优秀的按钮文案包含以下几个要点：

1）内容简洁，删除赘词

按钮区域寸土寸金，每一个字都要有其存在的意义，如果删除也不影响信息表达即没必要存在。

2）表达清晰，避免产生歧义

文字表达清晰，避免使用用户难以理解的专业术语。

3）规范用词，不要出现错别字

常见的“登陆&登录”、“收获&收货”、“即时和及时”都是容易打错的词。

以下给大家整理了常见易错的按钮文案表，建议保存收藏。

4）一致的语法表达

如统一采用动宾结构：修改价格、提交工单、查看更多等。

5）适当的情感化表达

结合自身品牌特性，在按钮中融入适当的情感化文案，也是塑造品牌心智的触点之一。

7.3 按钮的圆角

当前市面上主流的互联网产品大多都采用了圆角设计，因为圆角矩形相较于直角更具安全感和亲和力、在相似内容中识别度更高，且圆角对信息的聚焦性更强。同样B端设计中通常也会在按钮中加入圆角，方便用户更高效的辨别和获取信息，但是需要注意的是圆角并非越大越好，过大的圆角会导致按钮操作热区的缩窄，更不易被点击触发。如在移动端产品上都是采用手指按压，而桌面端采用鼠标指针单击，相较之下后者对点击按钮的触发精度要求更高，也因此全圆角按钮（也被称为胶囊按钮）更适合在移动端产品上使用。

此外按钮的圆角设置还需考虑到产品整体的视觉一致性，在不同场景下都要保证统一的感官体验，如在大尺寸的按钮上圆角的曲率也应设置更大。

作者：虾米的设计笔记      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



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



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

前言：

1886年，由卡尔·本茨发明的第一辆汽车距今已经有130多年了，汽车座舱的发展已经来到了一个新的阶段，现阶段我们称其为智能座舱。它不仅有着先进的数字化仪表中控大屏，还有流媒体后视镜、抬头显示、智能空调、智能氛围灯等功能，看得见的看不见的地方无不凸显着科技进步带来的变化。

作为HMI设计师，在这个领域也工作了许久，对于智能座舱、HMI的设计有了些见解和思考，本文试图通过总结实车座舱、工作经验、设计来展望未来的HMI设计趋势，以及尝试分析作为HMI设计师我们应该如何在设计这一领域去赶上智能汽车发展的风口。希望这些想法能让刚入行或者想入行的设计师同学们对于HMI设计有一个帮助。

目录：

一、时代变革下的智能座舱——“第三空间”

二、科技发展带来的设计需求改变

三、用户体验带来更高的设计要求

四、情感需求引领新的设计方向

五、总结

一、时代变革下的智能座舱——“第三空间”

随着自动驾驶等技术的进步，智能座舱最后将围绕座舱电子、座舱内饰全面升级到移动的“第三空间”，将信息、娱乐、互联等功能进行全面融合，为消费者提供更便捷的体验。汽车将不再是代步工具，用户在车内即可实现娱乐和办公，汽车有望进化成为家庭、办公场所之外的“第三空间”。

尽管也有人认为汽车只是个代步工具，但更智能化更数字化的智能座舱就是大势所趋，各家车企八仙过海各显神通，不停进行车辆的智能化升级，提升智能座舱的体验，软件定义汽车，这是行业的共识，许多互联网公司也加入了这场战争。

在这样的背景下，作为设计师的角度，看着智能座舱的智能化在不断提升，我们对于HMI设计有了些思考。我们认为会有这几个方面带来HMI设计需求或要求的的变化：

二、科技发展带来设计需求的转变

硬件技术的革新带来体验形式的改变，而完善的设计升华用户对于新科技的体验。在“未来”还没有到来的时候，发挥设计的主观能动性能，能让现在成为更好的现在。好的视觉体验不应只是数字化的体验，硬件能够给予视觉更加完整，更加丰富的体验感受。智能座舱科技能力不断提高对设计有了不一样的需求。作为设计师，关注科技和车机硬件技术的进步能够拓宽我们的视野，延展设计的画卷。

·用户从驾驶者到决策者到转变

传统的HMI由中控系统，屏幕，⽅向盘控制等模块组成，受限于应⽤场景⼤多只满⾜于⾏驶功能，强调的只有⼈和⻋的关系，但随着⽆⼈驾驶解放了⼈的双⼿，⼈和⻋的关系将被重新思考定义。

1、通过设计提升自动驾驶的体验，增强用户的使用信心：

自动驾驶模式下，通过摄像头特、毫⽶波雷达、超声波雷达等扫描记录下当前⻋辆所处的环境信息，将路况信息和道路周围环境车辆等信息进行可视化呈现在屏幕上。在这个过程中，除了硬件的可靠性能否扫描出周围环境车辆物体之外，可视化的视觉设计也会影响到用户的信心。

交互层面，需要有更多自动驾驶可视化图像的交互思考和创新，例如当开启自动驾驶的车辆在一个复杂的十字路口等待红绿灯是，周围复杂的情况会让用户恐慌，特斯拉的fsd就会在停下等红绿灯时，抬高视角，这种方式可以通过屏幕的可视化信息观察到更多路况车辆信息，从而让用户对机器产生信任感。

视觉层面上，一般来说识别度比较重要，能更直观的展示模型可视化信息就好，但是可视化信息的表现形式可以作为视觉设计的重点，可以是线性模型，也可以是白模等等，要去契合车机的主题、颜色、概念，又要达到可视化的要求。

2、不同的主题模式以及新的视觉风格：

作为决策者的汽车用户当然需要更多的主题颜色或主题风格选择，他们不再简单要求能用就行，不仅仅是更好用的交互，对视觉设计当然也有了新的要求。

一般来说，现在的车机系统最少都要有一套黑白模式，分别匹配白天黑夜的的驾驶场景；有的更是需要在越野、城市、长途情况下有不同的视觉主题界面；或者是运动和沉浸驾驶有不同的界面风格，这些根据需求都是需要去考虑的，如何匹配视觉设计。最常见的黑白模式来说，在设计其中一套的过程中，就要去考虑如何适配成另一套，比如白色模式下的卡片投影，在黑色模式下如何显示，如果不显示投影如何去区分卡片。

设计的视觉风格的趋势不是一成不变的，我们认为他的发展是螺旋式上升的，手机的UI最开始的拟物风格满满的向着扁平化发展，但扁平化后大家又开始追求拟物，后面就诞生了轻拟物风格和2.5d等风格，现在又流行简约3d风格。以前由于车载芯片性能等问题，随着车载芯片、屏幕性能的不断发展，未来的HMI设计风格绝对不会一尘不变，他同样也会追求不同的设计风格，轻拟物、简约3d图标甚至3d界面的交互都会不断产生甚至已经产生，也要求设计师去了解和掌握更多的设计风格。

·数字化、智能化的变革

电动汽车行业飞速发展,智能AI和人际互联等人车交互概念也跟着兴起,对于中控台的需求和功能复杂度也跟着越发精细起来，全液晶显示和HUD已经成了基本操作，炫酷、科技感爆棚的HMI设计成为标配。

1、越来的大的车载屏幕：

燃油车时代评价一辆车不可避免的会讨论汽车三大件：发动机、底盘和变速箱。但是智能座舱时代，不少人戏称新的三大件是：彩电、冰箱和沙发。虽然是戏称，但是我们也可以看出来大屏幕车机等提升座舱体验的设备越来越成为用户购买汽车的一个指标。当然也有人不这么认为，但是市场是很诚实的，大屏幕的车机就是更受欢迎，笔者曾问过一个刚毕业几年准备买自己人生中第一辆车的朋友，你买车会在意车的中控屏大小吗？他的回答是：当然会，大就是好。

可以看出，作为HMI设计师，面对的情况就是越来越大的屏幕尺寸和分辨率以及越来越多屏幕数量。这也给了设计师更多的发挥空间。交互上可以有更多的交互形式，同时也有了更高的视觉要求，需要有场景、有主题、有氛围等等等。作为座舱内最显眼的屏幕，也不简单是呈现功能那么简单，它也成为汽车内饰的一部分，除了车内的氛围灯，屏幕内也需要呈现更多的设计美感。

2、虚拟现实技术的发展：

虽然前文提到了驾驶员不再是单单驾驶者，但是首先驾驶这一需求是不会消失的，其次且随着自动驾驶的发展，用户也希望能通过虚拟现实技术看到更多的信息来帮助自己完成抉择决策。未来虚拟现实增强技术将在安全驾驶方面扮演着更为重要的角色。虚拟现实增强技术对于用户而言，具有很大的直观性，通过结合现实路况信息，实时出现一些虚拟箭头来直观地引导我们前进，从而避免在驾驶中出现开过路口和分散驾驶员注意力的情况。

其实目前大面积应用的hud也算是虚拟现实技术的一种，AR-hud早已经成为了现在智能汽车的标配，未来几年，我认为会有越来越的的用户摆脱低头看仪表的习惯，hud可以帮助驾驶者更便捷更安全的获取驾驶、车辆、车道等信息。

我们都知道hud这一技术最早是作用于军用战斗机的，随着技术的进步虚拟现实技术会不断下放到民用汽车上，所以作为设计师对这方面的技术也需要有更多的了解，如何运用在汽车上，设计出更加符合汽车操作和行驶逻辑的虚拟现实技术的视觉信息。

另一个方面就是虚拟成像，科幻电影中的虚拟成像来进行互动和对话或许也会成为未来的HMI设计趋势，但这可能要很久以后才能实现了，或许同元宇宙一样久-_- !!!

三、用户体验带来更高的设计要求

以用户更能理解、更能接受的方式展现全新的智能化座舱，提升操作的舒适性和高效：用更简单的方式传达更直观的信息。这是我们在用户体验基础上做设计需要做到的。

用户对于智能座舱的操作不熟悉，产生不信任感，我们需要以设计为连接点，和用户沟通。科技满足人的基本需求，艺术升华体验。在科技飞速进步的当下，科技研发固然关键，以眼睛为窗户让用户体验到科技的进步同样不可缺少，帮助用户用视觉感受未来、提高体验是作为设计价值的最高追求。

·沉浸式的体验感

当车辆从工具变为一个能够让人沉浸和享受的空间，在原有的交通属性之外增强智能座舱的空间的娱乐属性。当在车内等待或者不想下车在车内躺一会，小憩、k歌、电影等可能都是会干的事，露营、闲聊等也可以是智能汽车提供的环境。所以我们需要将有限的画面变成无限的遐想空间。

1、契合功能的氛围设计：

不要好奇为什么有人为什么会在车上睡觉，会在车上看电影，但是这个需求是一定存在的，作为“第三空间”，这是智能座舱应该要胜任的能力。

设计师需要做的就是打造契合这些场景下的氛围感，通过氛围灯音效可以打造出一个适合观影、聊天的氛围，前文提到屏幕也是车辆内饰的一部分，也需要通过视觉画面、动效去一起营造这个可以沉浸的氛围。

2、视觉设计的画面感：

当科技满足了基本需求后，我们需要更出色视觉设计来升华用户的视觉体验。屏幕作为一幅画框呈现我们想要的画面，我们认为HMI的界面设计会更多的趋向于整体的画面感以及场景化，通过打造一个屏幕内的场景空间，在服务和交互体验上突破创新，给用户体验智能座舱的沉浸式体验空间。

目前已经有不少汽车的都已经用场景化的UI来上到自己的中控仪表上。场景主题的HMI已经不只是单单的概念无法落地，虚幻引擎技术的加入也能让更多的三维场景能够落地到实车上。

传送门

·信息内容需化繁为简

智能座舱的一个很大的特点就是几乎将所有车内功能按键、报警都搬进了屏幕内，那么几乎所有的信息都要通过屏幕获取，所有的功能都需要通过屏幕点击操作完成，但是当所有的内容信息功能都堆积在一起时，任谁看着都会产生信息焦虑。

通过设计去凸显重要消息和重要功能是解决问题的重要方法。许多汽车中控屏都将空调和座椅的快捷操作加入到了屏幕的底部dock栏，因为空调是使用频率十分高的功能。交互层面的设计需要做到简化常用功能的使用层级步骤，视觉设计需要做到让重要功能显眼易操作。

传送门

·一触即动的反馈

我相信所有人都会认为如果车机使用起来如果不流畅，体验会很糟糕，特别是如果极其卡顿，会不愿意使用，这也是许多人驾驶车辆的时候宁愿放着更大的中控屏不用，而去用手机导航的一个重要原因。受制于车载芯片的性能和屏幕的质量，过去确实这种卡顿是没有办法解决的。但是这些随着芯片性能和技术能力的提升，或许芯片已经不是造成车辆卡顿的罪魁祸首。

如果车机上的动效做的不够流畅舒适，也会产生“卡顿”感，同样是对用户体验的破坏。所以一定要做好动效反馈，掌握好动效节奏，让用户感受到一触即动舒适感，是可以大大提高用户体验的。关于具体的动效设计受篇幅影响就不展开了，我认为这一块车机与手机和pad上的动效体验一致，苹果靠着极其出色丝滑流畅的动效设计让人使用起来体验感十分舒适。界面中的元素彼此关联，而非独立存在。好的动效设计是在界面中某一个元素发生变化时，与之相关联的元素也会产生逻辑上合理的变化。动效不是独立存在的，而是彼此关联着的。界面是由元素所组成的整体，所以当界面中的某一些元素发生变化时，周围的环境也会受到影响。

动效设计像交互设计、视觉设计一样已经成为用户体验的一个重要组成部分。一款具备舒适动效标准的车机系统能给车主带来更好的客户体验。当然，做好同开发的对接也很重要哦！！！

四、情感需求引领新的设计方向

当科技水平很高且生活中处处是科技的产品，人类就会越加渴望高情感的环境。科技本身并不是冰冷的，它带有温度、灵感、和情感；科技也不是孤立、静止的，它在不断地寻求自身的发展并拓展与人类的关系。我们需要通过设计让科技与用户完成情感上的交流，让其更具有艺术感和亲和力，让车机从“孤岛”成为乌托邦。

·是助手更是伙伴

语音助手通过智能对话与即时问答的智能交互，实现帮忙用户解决问题，而智能语音助手在智能座舱中的地位越来越受到重视。在功能的基础上，如果智能语言助手能够跟有温度有情感，用户也能够更信任系统，拥有更好的使用体验。

如何让语言成为助手和伙伴呢，我们认为如果只是冰冷的vui光效反馈，是做不到温度和感情的，可能我们需要一个语言形象。当用户唤起语言是，会有一个具体的形象出现在屏幕上或屏幕外，让用户产生与系统对话的感觉，产生愿意与其对话的意愿，建立情感触点；另一方面，也可以打造一个提高汽车品牌产品力点IP形象。

所以语音形象的设计，我们认为也是HMI设计师需要考虑和思考的，需要设计出契合品牌的IP形象，来成为用户的专属语音助手和伙伴。他or她需要有丰富的表情、丰富的肢体动作，甚至有情绪来与用户进行互动反馈，从而达到提升用户体验的目的。

如何设计出一个有温度有情感的语音助手大家可以翻翻之前发的文章《车载智能助手设计：智能座舱的合作伙伴》，希望能对大家有所帮助！！！

·无微不至的细节设计

博大而深沉的情怀让人赞赏，但微小而细腻的情感让人感动。总有人能够被某个看似平凡的细节深深打动，这便是细节设计的价值，我们精准的去定位用户群体，探索用户的情感需求，当然希望能够做出打能够做出打动人心的细节设计。除了下面几个点当然还有更多的细节设计，就需要在设计过程中去慢慢体会和发现了了。

1、多模态交互方式：

人机的交互方式早就已经不再是单单的触屏操控，理想L9的后排屏幕，通过手势或者语音都可以进行操作，将手放在屏幕前半米外的位置挪动，屏幕就会有光标跟着手移动，握拳就是点击确认，尽管这种交互方式目前来看还有瑕疵，但是作为设计师看到的应该是在车上，会有更多更自然的多模态交互方式出现，可不仅仅只是手势，通过文字、语音、视觉、动作、环境等多种方式进行人机交互，充分模拟人与人之间的交互方式，这不只是个噱头，而是实打实的体验设计。语音不就是一个典型的多模态交互的方式吗。我们相信会有更多更自然交互方式，让人既自然更加自然，做到“无感”的舒适。

2、情感化设计：

前文说到语言助手的设计需要情感，但情感化设计是不仅仅体现在语音上，其实情感化设计是共通的，这是一种设计思维，这种思维可以体现在很多设计方面，比如，我们在视觉设计上也可以去传递感情。而我们认为，未来的HMI设计在很多地方都需要去考虑到用户群体的情感共鸣。下面这个例子，重型卡车的仪表设计，钢铁元素是赖以生存的车，“门”是向往的家。依托大卡车司机在慢慢长路上对家的思念和向往，用“门”的元素去撬动这种情绪，以情感作为窗口，去引起卡车司机的共鸣。

传送门

五、总结

HMI设计当然不仅仅只有这些，还有很多，我们试图总结一些关于HMI设计师需要去思考去了解的东西。新能源汽车的快速发展，同时也带着智能座舱有了更高的需求，随着这些因素，智能座舱对设计的要求无疑会越来越高。作为HMI设计师也需要对技术带来的革新变化有敏锐的观察能力并思考；同时也要有充足的知识体系和思考发掘能力去完成提高用户体验的设计；同时也要有代入式的情感去进行情感化的设计.... 等等等等。这当然也不是一朝一夕的事情，也需要我们设计从业者伴随着快速发展的汽车这个行业一同去进步。共勉！！！

作者：EPUX      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



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



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

前言

Vue框架作为当前主流的前端框架之一，作者尤雨溪更是国内开发者心中男神，作为开发工程师你是否知道Vue框架名字的由来？你是否知道Vue框架作者尤大大创作Vue过程中的几个节点？今天就来带领大家深入Vue背后的故事

Vue萌芽

其实尤大大最初专业为室内艺术，并非计算机，但是尤大大在后面到帕森斯设计学院进修艺术研究硕士学位，学习的是科技与设计项目，它涵盖了编程、设计和新媒体艺术，也正是在这个时候尤大大自学了JavaScript，开始用JavaScript进行创作，毕业后就进入了谷歌，尤大大为谷歌浏览器开发了一些实验性的互动场景，把它们放到了作品集中，尤大大在采访中提到曾在学校期间开发了一个克隆版的Clear应用，它是一个有着很新颖的手势操作的待办事项应用程序，它应该算是“滑动来完成”手势操作的开拓者了，所以就在网页上重置了他的大部分功能，它在黑客新闻（Hacker News）上火了起来，被很多网站报道了，这件事让谷歌的招聘官注意到了尤大大，那时候谷歌有很多为谷歌浏览器开发的实验性场景，包括一些3D动效、2D的物理效果和可视化的处理等，都是尤大大他们在用的浏览器上实现的，这在当时是前所未有的，它真的体现了JavaScript的强大，不知什么缘故尤大大就接到了谷歌招聘官的电话她说，你有兴趣加入我们的创新实验室吗，作为我们招收的五人之一，尤大大当时真的不敢相信，都没给他们发我的简历就直接有人给打电话让加入谷歌，那肯定是要去的，尤大大非常高兴，自己不用也搬家，工作场地就在纽约；

尤大大聊出这段经历：“工作两年多，做一些有意思和实验性的项目，稀奇古怪的点子，比如说，十年后的搜索界面是什么样子的，或者如果整面墙都是可以互动屏幕的会怎样？如果谷歌能够听懂你说的每一句话？讽刺的是这件事现在几乎已经成为现实了，我们要做出一些关于这方面的概念视频和这种交互操作的原型，在2012年。在很长的一段时间内，我都在用原生的JavaScript来手写这些原型，因为这些原型不会使用传统的UI界面，他们需要很多特殊的处理，这些处理手段在如今普通的应用中很难见到，我尝试着去用一些现有的框架进行开发，但是很多时候我发现他们不能解决我的问题，我使用的第一个框架是Backbone，Backbone更像是一个为应用搭建的结构，他不会帮助你控制视图，尽管Angular提供了数据绑定，能将视图和数据状态同步起来，但它太约束你写代码的方式，所以它也不能很好的处理我正在进行的工作项目，因为这些项目很注重交互而不是如何成为一个完整的应用程序，我开始思考如何才能让我的工作变得更高效，就在那时我开始想或许我可以自己开发一个我自己的框架，最初我的目标就是开发一个非常简单专一的工具，仅仅就是同步DOM和一些JavaScript对象，这是最初的想法，在这个初始项目有了一点人气之后，我们开始扩大开发范围，一点点加入一些新功能到这个生态环境中去，最终使他变成了一个框架。”

Vue名字的由来

尤大大对Vue.js进行的首次提交是在2013年的6月份，它刚开始的名字是Seed.js，据尤大大说当时想不到一个更好的名字，但是当尤大大要在NPM上发布的时候，发现Seed.js在NPM上已经被占用了，所以只能再想一个，尤大大表述：“我觉得，这是一个视图（View）的框架，但是就叫他View的话有点太直接了，所以我就把“View”放到谷歌翻译里面，然后我找到了它法语的翻译——vue，只有三个字母，看起来很好，也没有在NPM上被占用，所以我就用了这个名字。”

因着Vue免试进入Meteor

尤大大自述：“我基本上就是为我自己创建的这个框架，所以我的期望是，我希望，开发出一个我自己喜欢的框架，这也是我为什么要做这个框架的原因，我当然还在谷歌创意实验室工作，所以我把它发布成了我的私人项目，应该有几百名用户，我觉的有几百个GitHub的星星，给了我很多初始用户。”

你有没有想过你会通过这个赚到钱？尤大大：“完全没想到，当我出版的时候，并不是真的在说我想将其发布为一个可持续的项目，就像一个音乐爱好者为了乐趣而做一个专辑，你知道那种感觉不是为了赚钱，你发布这个音乐，只是因为你享受创作它的过程，并且你希望其他人能听到它，所以开发Vue.js的过程就像是一个途径像是我在做一个人们在真实世界中真的会用到的东西，相比我在谷歌创意实验室的工作来说，我们把做的东西给经理们看，但谁知道这个东西什么时候会变成现实呢（这里主要的意思是在谷歌中想法的出现到真正的落地的周期都是不确定的，甚至都不知道能否落地）所以我有一种冲动，要开发一个人们真正会用到的东西，我当时并没有想那么多，但有一个热门的开源项目会帮助找到下一个工作，这就是我加入Meteor的方式，他们基本上很倾佩我在Vue上做出的工作，所以他们直接跳过了面试的过程，当场就给了我工作，所以我很高兴，这才是你进行开源项目工作获得的真正的好处之一；

Vue逐步完善

尤大大在Meteor工作的时候，仍然在持续的开发Vue.js，因为尤大大觉得它在那时就像自己的孩子一样，我们可以看到上面尤大大的提交记录，在Github上看到一个非常绿的图表，因为尤大大在每个周末都会完成很多提交，当时进行更多的工作也越来越有必要了，因为Vue的用户越来越多了，据尤大大表述Vue一直在成长所以会出现更多的问题，更多的Bug要被修复。

Taylor推荐Vue

就在那段时间，Taylor发了一条推特提到了Vue.js，那是2014年，Taylor Otwell 是Laravel的作者，Laravel是一个非常流行的PHP框架，大家都知道在2014年那段时间PHP火的一塌糊涂。

Taylor那天在推特上说：“目前自己在学习React，但是状态很迷惑，React很难，我正在学习Vue.js，因为它看起来很简单”，虽然看起来这不像是一个正式的对Vue的认可，他只是在说我正在学习Vue.js"，然后很多人开始问他：你觉得Vue怎么样，它好用吗？基本上在每一条回复中，他都说，没错，它很棒，这开始看起来像是一个对Vue公开的认可，然后所有的Laravel用户就会想，哇，如果Taylor喜欢Vue，那它肯定很好呀，所以我们也应该试一试，所以Vue就获得了很多来之Laravel社区的用户"

Taylor表述：“我当时在网上查找一个JavaScript框架来开发这个叫Laravel Spark的产品，它是一个快速开发脚手架，帮助你开发你自己的软件和服务体系，帮助人们启动他们自己的生意，就像我一样，我感觉到不知所措，我看了其他的框架，他们有复杂的编译流程，需要很多工具才能起步，我尝试了Vue.js发现你可以用Windows笔记本就能写出一个简单的网页应用你不需要其他的编译工具，仅仅需要添加一个CDN链接，写几句JavaScript，你的网页就跑起来了，对于我这个不是很熟悉JavaScript的人，至少可以说这么简单就可以实现那么多功能，真的让人耳目一新而且还不需要学习很多其他的工具，我记得我发布了一条推特说《我发现了这个很棒的新玩意叫Vue.js，像我一样的新手，都可以写出JavaScript应用程序，真的很令人惊叹》因此我们为Laravel Spark采用了Vue.js，最后产生了，你知道的，为Laravel带来了超过一百万美金收入，成千上万个用户搭建了他们自己的生意，所以这真是一件对Vue.js和Laravel都很棒的事情，帮助简化了不知道多少，使用Spark搭建的业务，都同时运用了Laravel和Vue.js”

Vue因受质疑发布1.0

上面说到的这些都发生在尤大大决定全职开发Vue.js之前，在那之前Vue.js还处于只是在前端社区中比较有名的阶段，尤大大还没想过要将它作为自己的全职工作，甚至是从中赚钱，直到尤大大学习到Taylor的做法之后，才知道Laravel是那么庞大，意识到或许自己真的能干点东西出来，但开始有人发起帖子和讨论说：“我到底该用哪个？我应该用Vue.js吗？”，你能看到的很多的回复都是：“不要用，因为它还是起步阶段”、“它不稳定，它仅仅由一个人维护着，天知道它什么时候就消失了”，尤大大想证明这些人是错误的，要让Vue.js变成一个V1.0版本的可生产的框架，所以尤大大花费了整个2015年的假期，用3个星期的时间把所有东西都开发好，更新文档，然后在2015年10月，尤大大发布了1.0版本；

LinusBorg加入

当时Vue.js刚刚发布了1.0版本，还不存在像今天这样的核心团队，只有大概三个人，他们都忙着弄好文档和修复Bug，在1.0发布之后，当时的论坛就像是一个荒地；LinusBorg 就到论坛里去回答很多的问题，在论坛里非常的活跃，LinusBorg 了解到很多。

LinusBorg自述：“ 人们在他们项目中遇到的问题，我都在我空闲时间里干这件事，持续了三到四个月之后，Evan了解到了这个情况，他就给我发了一个Slack邀请，之前我们从未交流过，我也没开启任何问题讨论，没提出合并请求，我没在代码上做出任何贡献，但我从一开始就注意到Vue.js框架不仅是正确的编码，不仅是一个库，还需要一个描述它工作原理的文档，帮助你解决问题，它应该是我们需要的能想到的最好的文档，我们必须要扎身到社区中去，我们需要额外的工具和支持，这就是我被邀请到Vue团队的原因，因为我慢慢成长为社区领袖，我也确实加入到了Vue的核心团队，即便在没有对代码和内容作出贡献的情况下，不过之后我为了我所谓的自尊心，我学习了源码，研究了一些代码库，看了一些问题，然后开始四处作出一些贡献”。

萌生全职做Vue想法

尤大大自述：“我认为在1.0版本之后，我开始尝试着进行全职工作，或者这个东西还真能给我一些收入，让我能够把它当作一个全职工作，这时我开始觉得我在Meteor和我在Vue.js上的工作存在一些差异，在Meteor我只是一个普通的开发者，我没有做决策的权利，虽然我可以提出建议但我还远没到那种，说我们应该怎么做的那种地位，这让我对Meteor的发展有一些悲观，相比之下，Vue.js一直在快速成长。我注意到用Meteor的人比较少，而用Vue.js的人越来越多，所以那时我就觉得或许把Vue.js作为我的全职工作是值得的”

Vue在恰到好处的时机出现

LevelUp教程的Scott Tolinski在Vue火了后，人们一直要求他做一个Vue.js的教程，在这个系列的教程中，会为大家讲到所有关于Vue.js的知识。

Scott Tolinski表示：“Vue.js出现的正是时候，因为很多人从Angular一代出现或更早之前就开始用Angular，人们都觉得Angular一代很简单，但当Angular二代推出的时候它几乎是一个完全不同的版本了，那个时候React也正在被推出，所以很多开发者开始用React，他们觉得React是个能够登上前端宝座的新东西，但这些开发者就会失去使用Angular一代的那种简单，轻松的感觉，就会感觉到有一种差距，这个由Angular一代的缺失而导致的大洞，Vue.js正好在这个时候出现了，它填补了一个空白，因为人们想要更低的入门门槛，还想要React的这种强大和灵活性，而这就是Vue.js的强项了，它吸取了多个框架和平台最强的部分”。

探索经济来源

尤大大自从有了全职开发Vue.js的想法，就在探索能让自己经济上独立的办法，尤大大做的第一件事就是设立一个Patreon（众筹平台）账号，结果发现还真的不错，在建立那个账号不久之后，就能拿到2000美元一个月，尤大大的一位朋友郭达峰，他是“上线了（Strikingly）”的CTO，一个YC投资的公司，他的公司有个小基金用来支持开源项目，纯粹是出于做好事的想法，如果能拿到这个支持的话，尤大大就完全可以辞掉工作，并开始全职开发Vue.js了，这就足以让尤大大迈出这一步，至少可以去尝试一下。

Serah Drasner加入

Serah Drasner在CSS-tricks工作，是一个写手，Serah Drasner问Chris Coyier：“我觉的我要写一篇关于Vue.js的文章”，他说听起来不错，所以Serah Drasner开始写关于Vue.js的一篇文章，感觉要写挺长的，Serah Drasner问Chris Coyier：“什么情况下一篇文章需要分为一个系列来写”他说，什么时候你觉的你需要写一个目录的时候，那个时候Serah Drasner就该分开写了，Serah Drasner自述：这个时候我写的谷歌文档就已经有25页长了，然后我写完了最好一章，动画，最后就有了一个共有五篇文章的一个系列，我接着不断的写关于Vue.js的东西，下个月我写了更多的文章，然后做了一些Demo和一些开源项目，我觉得从那个时候开始，我就对这个框架感到非常激动，我想要投资更多的时间到其中去，所以Evan和Chris Fritz就邀请我和他们一起制作文档，同时进行一个新的项目叫cookbook，然后我就开始领导cookbook项目并且加入了Vue.js核心团队，现在我帮助运营Vue文档的见面会，Vue团队的见面会我真的很喜欢和这个团队一起工作。

全职投入Vue建设

“在家里工作绝对是非常自由的，你可以自己定制时间表，除去不需要通勤的第二大好处可能就是你不需要穿的像Tom Dale一样。”

尤大大：“想象一个在中国的人想要学习一个新的框架，他们去官网发现只有英文的文档，如果这个框架本身就非常难懂的话就更糟了，他们就会很难学会这个框架，但当他们到Vue.js官网的时候发现这里有中文版的文档，他们读了一下发现文档是由母语是汉语的人写的，一些技术性的内容直接用汉语表达的话会有些奇怪，因为你必须对技术名词想出一些很好的译名，比如说绑定（binding），引用（reference）或视图模型（view model），有些东西你甚至都翻译不了，因为汉语是我的母语然后英语版本的文档也是我自己写的，所以我能够改写一些术语，让它的汉语翻译更自然，这种语言上的熟悉让他们能够读懂你的框架，比他们用自己不熟悉的第二语言来学习要快的多，制作这样的中文文档，绝对帮助提高了Vue.js在中国的使用度”；

Vue引入国内

Jinjiang Zhao：“在中国，很少有人在科技界很知名，所以在中国，人们把Evan看作是一个英雄，一个中国开发者开发的人人都喜欢的框架”；

Gu Yiliang：“这在中国真的很不寻常，我们看不到有人能在开源项目上对世界作出这么大的影响，不仅仅是在中国内部，Evan，他是世界顶尖的，而且他还是中国人，所以我觉得这就是他有这么多中国粉丝的原因”；

Taylor：“他是一个中国人，当中国人看到这一点的时候，他们觉得自己是这其中的一部分，觉得自己是Vue社区的一部分，这是一种很真实的感觉因为他们与Vue的创始人是联系在一起的，Evan为中国社区的作为创造了一种强大的现象，它在中国的开发者之间建立了一种强大的联系，每个人都希望成为这个群体的一员，它让你感觉很棒，当你是这个群体中的一员时，Evan能融入这个群体，这种力量是非常强大的，这是他能在中国成功的巨大原因，它能够融入到这个群体中真的很惊人”；

Jinjiang Zhao：“那个时候移动网络非常的复杂并且不稳定，尤其是在中国，很多人还在用GPRS数据，所以我们尝试搭建一些新的，小体积高性能框架，帮助我们开发成千上万个网页，来支持千万级别的流量，这个量是非常非常大的，我在Github发现了Vue，所以我们的故事就开始了”；

Vue受拥国内

尤大大被到阿里巴巴园区，做一个小的科技讲座，介绍Vue背后的基本想法、是怎么开始做它的、用Vue的好处到底是什么、相比一些手写的jQuery。

他们花费了很长时间，一年或一年半，一些开发者终于接受了Vue，并开始使用它，现在越来越多的人都在用Vue，在那之后，阿里巴巴也越来越多的用Vue了，人们也开始对Vue.js有更多的了解，因为尤大大在知乎上的存在，同时也因为Vue.js在中国以外也获得了更多的关注，这些消息也反向流回中国，人们才发现有一个新的框架叫Vue.js，事实上很多人都是以一个开源项目的身份认识到Vue.js，然后他们才意识到原来这是一个中国人写出来的，Gu Yiliang采访中提到：“我们主要是在我们的企业管理应用上使用Vue.js，像是谷歌的AdWords，我想为什么不参与到Vue.js其中呢？它在发展，它是潮流，中国开发者不仅仅把他当作一个开源项目开发者，而是一个开源项目领导者。”

Leo Deng：“我很熟悉Ember.js，而Vue.js看起来和它很像，所以我开始用Vue.js写一些东西，确实起作用了，我感觉它像是我已经学过的东西，Vue.js有非常高质量的中文文档，帮助了很多入门级的工程师进行开发，我们用它来开发生态系统，社区，我觉得这就是它这么流行的原因，在中国我们有很多的软件工程师，但是我们没有一个像他那样的巨星。”

Vue在决策背景方面的独有优势

Serah Drasner：“在软件工程领域，不光是Vue.js，在所有软件开发领域，我们都有一个概念叫做“终身仁慈独裁者，描述有些人是项目行动策划的关键大脑，来推动项目的前进，它并不意味着，有些人把它搞混了，认为这意味着没有其他人为这个项目而工作，这完全是错误的，你可以看到有非常多的人在为Vue.js和Vue核心而共同工作，它确实意味着它背后有一种推进力量，我觉得当存在一个像Vue.js这样不是产自大公司的项目，是有好处的因为它的内容是非常真实的，我们得到的好处就是，我们不是被某一个公司推动的"，这意味着不是大公司在指定规则，是人们。”

Taylor：“Evan有一个总体的巨大的图景，Angular和React是由大公司搭建起来的，从一开始就有很多人参与其中，它们像是被一个委员会设计的，但对与Vue.js和Evan来说，在他大脑中有一个单一的图景，他希望创造这个整体的框架，我觉得这对于创造一个非常好的产品是非常重要的，这也是Vue.js如此成功的原因。”

LinusBorg：“前端市场被脸书的React统治，Angular是谷歌的，然后就是我们，像是一堆书呆子做他们自己的框架，完全是因为他们想做。”

Scott Tolinski：“它给人的感觉不像是一个公司，这样的话会让人更激动，更多像是民间的，光是这种想法就足以让人们感到兴奋，让人们想去使用它。”

LinusBorg：“Vue.js仍然在成长，它不是在推翻前端领域成为统治者，这不是它的目标，我们只是很高兴能为这个项目而工作，我们很高兴看到它的成长，也对它未来的发展感到很激动，我也不是很确定。”

尤大大：“我很自豪当初迈出了那一步，离开了早9晚5的工作，并开始投身于我真正热爱的事业上去，有时候我会看着那些星星，我们有了那么多用户，那么多的下载，但是什么给了我最大的成就感和满足感呢，是每次我看到这些人们"，尤其是在结束一场集会之后，人们会走过通常握着我的手说谢谢你，Evan，谢谢你让我的生活变得更轻松，就是这些场景让我觉得，这就是我开发Vue.js的原因，我创造了这个东西，我把他分享给人们，希望它能让人们的生活变得更轻松，人们向我走过来，感谢我做出了这个东西，这也算完成这个循环了"

总结

如今Vue框架火爆IT行业，已成为前端工程师的必备技能，其实也是博主我现在饭碗依靠的技术，Vue现在的Star数近20w，使用者更是数不胜数，正如尤大大表示自己很自豪的迈出那一步，其实作为受益者的我们更是感恩尤大大当时所做的决定；在CSDN的《新程序员004》中也曾攥入“与Vue.js作者尤雨溪畅谈他的程序人生”的篇幅，有兴趣的朋友可以阅读一下尤雨溪Vue登榜GitHub之路看似不难，加油每一位前端人。博主作为尤大大的忠实粉丝且作为Vue技术的热爱者并在CSDN构建了Vue技能树，欢迎大家打卡学习哦 https://edu.csdn.net/skill/vue

本期推荐

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见 (opens new window)），腾讯课堂官方为uni-app录制培训课程（详见 (opens new window)），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见 (opens new window)）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

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

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

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

目录

一、前言介绍：

二、系统分析：

2.1 可行性分析

2.1.1 技术可行性

2.1.2 经济可行性 

2.1.3 操作可行性

2.2 系统性能分析

2.3 系统功能需求分析

2.3.1管理员用例需求如图所示

2.3.2 用户功能需求如图所示：

2.3.3用户登录注册时序图

2.4 系统的功能结构图

 2.5 系统数据库设计

 2.5.1 图书回收管理实体E-R图

2.5.2 回收预约管理实体E- R图

 三、功能截图： 

3.1 登录注册模块：

3.2 前端首页功能：

3.2.1 首页模块：

3.2.2 新书榜：

3.2.3 特价区：

3.2.4 旧书回收：

3.2.5 公告资讯：

3.2.6 个人中心：

3.2.7 后台管理：

3.2.8 客服管理：

3.3 后台管理模块：

3.3.1 图书分类顾客：

3.3.2 回收类型管理：

3.3.3 新书榜管理：

3.3.4 图书详情

3.3.6 用户信息管理：

3.3.7 订单模块管理：

3.3.8 系统模块管理 ：

四、代码实现：

五、文档目录：

六、项目总结： 

八、源码获取：

一、前言介绍：

        随着现在网络的快速发展，网上管理系统也逐渐快速发展起来，网上管理模式很快融入到了许多商家的之中，随之就产生了“网上图书购物系统”，这样就让网上图书购物系统更加方便简单。

        对于本网上图书购物系统的设计来说，系统开发主要是采用java语言技术，在整个系统的设计中应用MySQL数据库来完成数据存储，具体根据网上图书购物系统的现状来进行开发的，具体根据现实的需求来实现网上图书购物系统网络化的管理，各类信息有序地进行存储，进入网上图书购物系统页面之后，方可开始操作主控界面，主要功能包括管理员：首页、个人中心、图书分类管理、回收类别管理、新书榜管理、特价区管理、旧书回收管理、用户管理、订单评价管理、回收预约管理、图书回收管理、管理员管理、系统管理、订单管理。前台使用：首页、新书榜、特价区、旧书回收、公告资讯、个人中心、后台管理、购物车、客服。用户：首页、个人中心、订单评价管理、回收预约管理、图书回收管理、我的收藏管理、订单管理等功能。

        本系统主要讲述了网上图书购物系统开发背景，该系统它主要是对需求分析和功能需求做了介绍，并且对系统做了详细的测试和总结。具体从业务流程、数据库设计和系统结构等多方面的问题。望能利用先进的计算机技术和网络技术来改变目前的网上图书购物系统状况，提高管理效率。

二、系统分析：

2.1 可行性分析

        可行性分析主要是针对这个项目开发是否有意义和价值观来进行的全面分析，在分析的过程当中发现这个系统所存在的不足之处。就拿这次网上图书购物系统的设计与实现来说主要是针对一些用户在发布网上图书购物系统信息时遇到不方便的操作和问题来进行解决问题的，最后能够让网上图书购物系统开发得到最大的用处。而且对于用户方面我们可以提供给一个简单方便操作的网上图书购物系统。所以我们要计算开发这个系统它能否有效的解决好这个系统经济问题，在开发完成以后所带来的利益是否大于开发过成当中的成本。所以可行性的研究与分析是这个系统在开发和设计上是必不可缺少的一部分。从该系统文章的全部来看，我们要从以下几个方面进行分析：

技术可行性：在技术方面我们要从现有自己掌握的技术能否设计出我们当初所预定的目标。

经济可行性：在这次系统开发和设计过程当中所用的经费是否大于以后给社会带来的价值观。

操作可行性：系统在用户使用过程当中是否方便、简单，能否达到大部分的用户会使用。

2.1.1 技术可行性

        技术的可行性分析主要是针对开发该系统所用到技术进行分析，对于网上图书购物系统的设计，可以在任何一个地方都进行使用和管理。通过当前我们所学的程序开发和语言介绍利用以上的技术开发该系统是比较合适的。而且我们在使用的数据库也是要保证这个系统的完整性、数据安全性好的条件。

2.1.2 经济可行性 

        经济可行性主要是决定这个系统是否具有价值存在，是否具有开发意义，如果开发的项目不能够节约物品和资源，反而使用的大量的人力、财力和物力不成正比甚至小于投资成本，那么该项目是不具备开发意义和价值的。在开发本项目的初期，节约成本是最基本的，设计和开发都是由本人一人完成的，并且在开发中使我学习到了很多的知识，也开拓了自己的眼界，在通过可行性分析之后，该项目的利大于弊，所以该项目是具有开发意义和价值的。

2.1.3 操作可行性

        网上图书购物系统的开发登录界面它是我们最常见的一种登录窗口来完成的，用户可以使电脑来进行登录并简单的访问不需要做任何的操作。对于此次的系统开发它主要是基于B/S结构和java技术及MySQL数据库来完成，让系统开发更加完美和完善，所以我们开出的系统界面更加人性化，用户使用也更加方便。而且系统在使用过程当中也拥有方便操作、易管理等特点。

经过以上的叙述，所以开发此系统在经济上、技术上是满足开发条件的。

2.2 系统性能分析

1.如果我们想要对前后台处理的层次分明那么我们就要采用B/S模式来进行系统的开发这样就可以方便用户的使用。

2.对于系统的开发和设计我们就要采用大家日常所需要的要求，这样一来可以提高系统的适用性也能保证系统利用价值。对于一个系统来说一个好的框架是很重要的，因为一个好的框架它可以提高系统的稳定和高效性。

3.在系统界面上也要设计一个方便快捷的登录界面，这样就可以提高用户对系统操作性和适用性。

4.在系统模块设计当中我们要对系统各个模块进行合理简化和设计，这样就能提高系统使用性。

5.对于一个完整的系统来说对于它的测评和测试是比较重要的，所以我们在软件设计程序中要保持软件占用的时间和速度快的特点。

6.对于这个系统来说我们首先要考虑所设计出的系统它具有那些突破和体现，所以我们尽力去改进这个系统去适应用户。

2.3 系统功能需求分析

        对于一个新的网站来说开发新网站我们就要做出这个系统的任务需求分析，因为对系统分析的质量好坏它可以决定这个网站开发的意义，俗话说得好一个好的开头是成功的一半，对于开发这个网上图书购物系统来说前期的分析是比较重要的，所以任务分析它可以决定这系统的开展和设计，这样就可以保证用户满意性。

任务的需求它能决定这个系统开发过程当中一个重要环节，所以我们在系统开发过程所用质量是比较重要的，因为我们在系统应用过程当中不一定那会出现问题，所以我们在进行对系统分析是比较重要的，因为它可以决定这个系统功能和需求。

本课题要求实现一套网上图书购物系统的开发与实现，主要实现功能包括管理员：首页、个人中心、图书分类管理、回收类别管理、新书榜管理、特价区管理、旧书回收管理、用户管理、订单评价管理、回收预约管理、图书回收管理、管理员管理、系统管理、订单管理，

前台使用：首页、新书榜、特价区、旧书回收、公告资讯、个人中心、后台管理、购物车、客服，

用户：首页、个人中心、订单评价管理、回收预约管理、图书回收管理、我的收藏管理、订单管理  网上图书购物系统。

2.3.1管理员用例需求如图所示

2.3.2 用户功能需求如图所示：

2.3.3用户登录注册时序图

前端用户发送登录请求-验证输入的账号虚线-执行数据查询-返回查询结果-判断用户是否存在-前端根据结果集执行不同的操作。

2.4 系统的功能结构图

        通过系统需求分析，本网上图书购物系统主要实现功能包括；管理员：首页、个人中心、图书分类管理、回收类别管理、新书榜管理、特价区管理、旧书回收管理、用户管理、订单评价管理、回收预约管理、图书回收管理、管理员管理、系统管理、订单管理。用户：首页、个人中心、订单评价管理、回收预约管理、图书回收管理、我的收藏管理、订单管理等功能。其功能结构图如下图所示。

 2.5 系统数据库设计

        在该系统的信息中，由于数据库的支持，我们可以对数据库进行收集、整理、更新和加工等操作。由于数据库的存储功能强大，所以数据库已经成为了计算机必不可少的，一个数据库的好坏直接影响该系统的质量和效率。一个系统中的数据库是必不可少的，并且起着决定性因素。通过之前的系统分析，可以规划出本系统中使用的主要等，下面设计出这几个关键实体的实体关系图。

订单管理实体E-R图如图4-2所示

 2.5.1 图书回收管理实体E-R图如图所示

2.5.2 回收预约管理实体E- R图，如图所示：

 三、功能截图： 

3.1 登录注册模块：

通过填写用户名、密码、角色等信息，输入完成后选择登录即可进入网上图书购物系统。

3.2 前端首页功能：

网上图书购物系统，在系统首页可以查看首页、新书榜、特价区、旧书回收、公告资讯、个人中心、后台管理、购物车、客服等内容。

3.2.1 首页模块：

3.2.2 新书榜：

新书榜，在新书榜页面可以填写图书名称、分类、标签、图片、作者、出版社、发行日期、价格等内容进行立即购买。

 图书页面，可以收藏，加入购物车，查看详情以及评论和购买等操作。

 购物车详情，可以添加数量和删除。点击购买进行模拟支付结账。

选择收货地址后点击支付下单：

 支付成功后查看物流状态信息：

3.2.3 特价区：

3.2.4 旧书回收：

查看回收详情，点击回收预约填写相关信息，完成后管理员进行审核。 

3.2.5 公告资讯：

3.2.6 个人中心：

个人中心可以查看修改个人信息，查看订单得各种状态，以及对收货地址进行查看修改和收藏进行查看。也可以收货地址页面可以填写联系人、手机号码、地址、默认等内容进行添加地址

3.2.7 后台管理：

普通用户后台管理：

3.2.8 客服管理：

可以对客服进行留言聊天。

3.3 后台管理模块：

3.3.1 图书分类顾客：

3.3.2 回收类型管理：

3.3.3 新书榜管理：

管理员对新书榜管理查看图书名称、分类、标签、图片、作者、出版社、发行日期、价格等信息进行详情、删除、修改、查看等操作。

3.3.4 图书详情

3.3.6 用户信息管理：

3.3.7 订单模块管理：

3.3.8 系统模块管理 ：

四、代码实现：

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 新书榜
            

        

    

    


        


            


            

        

        


            

                 * 后端接口
            

        

    

    


        


            


            

        

        


            

                 * @author 
            

        

    

    


        


            


            

        

        


            

                 * @email 
            

        

    

    


        


            


            

        

        


            

                 * @date 2022-01-18 07:36:34
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                @RestController
            

        

    

    


        


            


            

        

        


            

                @RequestMapping("/xinshubang")
            

        

    

    


        


            


            

        

        


            

                public class XinshubangController {
            

        

    

    


        


            


            

        

        


            

                @Autowired
            

        

    

    


        


            


            

        

        


            

                private XinshubangService xinshubangService;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 后端列表
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                @RequestMapping("/page")
            

        

    

    


        


            


            

        

        


            

                public R page(@RequestParam Map<String, Object> params,XinshubangEntity xinshubang, HttpServletRequest request){
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                EntityWrapper<XinshubangEntity> ew = new EntityWrapper<XinshubangEntity>();
            

        

    

    


        


            


            

        

        


            

                PageUtils page = xinshubangService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xinshubang), params), params));
            

        

    

    


        


            


            

        

        


            

                return R.ok().put("data", page);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 查询
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                @RequestMapping("/query")
            

        

    

    


        


            


            

        

        


            

                public R query(XinshubangEntity xinshubang){
            

        

    

    


        


            


            

        

        


            

                EntityWrapper< XinshubangEntity> ew = new EntityWrapper< XinshubangEntity>();
            

        

    

    


        


            


            

        

        


            

                ew.allEq(MPUtil.allEQMapPre( xinshubang, "xinshubang"));
            

        

    

    


        


            


            

        

        


            

                XinshubangView xinshubangView = xinshubangService.selectView(ew);
            

        

    

    


        


            


            

        

        


            

                return R.ok("查询新书榜成功").put("data", xinshubangView);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 后端详情
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                @RequestMapping("/info/{id}")
            

        

    

    


        


            


            

        

        


            

                public R info(@PathVariable("id") Long id){
            

        

    

    


        


            


            

        

        


            

                XinshubangEntity xinshubang = xinshubangService.selectById(id);
            

        

    

    


        


            


            

        

        


            

                xinshubang.setClicknum(xinshubang.getClicknum()+1);
            

        

    

    


        


            


            

        

        


            

                xinshubang.setClicktime(new Date());
            

        

    

    


        


            


            

        

        


            

                xinshubangService.updateById(xinshubang);
            

        

    

    


        


            


            

        

        


            

                return R.ok().put("data", xinshubang);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 前端保存
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                @RequestMapping("/add")
            

        

    

    


        


            


            

        

        


            

                public R add(@RequestBody XinshubangEntity xinshubang, HttpServletRequest request){
            

        

    

    


        


            


            

        

        


            

                xinshubang.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
            

        

    

    


        


            


            

        

        


            

                //ValidatorUtils.validateEntity(xinshubang);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                xinshubangService.insert(xinshubang);
            

        

    

    


        


            


            

        

        


            

                return R.ok();
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 删除
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                @RequestMapping("/delete")
            

        

    

    


        


            


            

        

        


            

                public R delete(@RequestBody Long[] ids){
            

        

    

    


        


            


            

        

        


            

                xinshubangService.deleteBatchIds(Arrays.asList(ids));
            

        

    

    


        


            


            

        

        


            

                return R.ok();
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 前端智能排序
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                @IgnoreAuth
            

        

    

    


        


            


            

        

        


            

                @RequestMapping("/autoSort")
            

        

    

    


        


            


            

        

        


            

                public R autoSort(@RequestParam Map<String, Object> params,XinshubangEntity xinshubang, HttpServletRequest request,String pre){
            

        

    

    


        


            


            

        

        


            

                EntityWrapper<XinshubangEntity> ew = new EntityWrapper<XinshubangEntity>();
            

        

    

    


        


            


            

        

        


            

                Map<String, Object> newMap = new HashMap<String, Object>();
            

        

    

    


        


            


            

        

        


            

                Map<String, Object> param = new HashMap<String, Object>();
            

        

    

    


        


            


            

        

        


            

                Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
            

        

    

    


        


            


            

        

        


            

                while (it.hasNext()) {
            

        

    

    


        


            


            

        

        


            

                Map.Entry<String, Object> entry = it.next();
            

        

    

    


        


            


            

        

        


            

                String key = entry.getKey();
            

        

    

    


        


            


            

        

        


            

                String newKey = entry.getKey();
            

        

    

    


        


            


            

        

        


            

                if (pre.endsWith(".")) {
            

        

    

    


        


            


            

        

        


            

                newMap.put(pre + newKey, entry.getValue());
            

        

    

    


        


            


            

        

        


            

                } else if (StringUtils.isEmpty(pre)) {
            

        

    

    


        


            


            

        

        


            

                newMap.put(newKey, entry.getValue());
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                newMap.put(pre + "." + newKey, entry.getValue());
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                params.put("sort", "clicknum");
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                params.put("order", "desc");
            

        

    

    


        


            


            

        

        


            

                PageUtils page = xinshubangService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xinshubang), params), params));
            

        

    

    


        


            


            

        

        


            

                return R.ok().put("data", page);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                <!DOCTYPE html>
            

        

    

    


        


            


            

        

        


            

                <html>
            

        

    

    


        


            


            

        

        


            

                <head lang="en">
            

        

    

    


        


            


            

        

        


            

                <meta charset="utf-8">
            

        

    

    


        


            


            

        

        


            

                <title>新书榜</title>
            

        

    

    


        


            


            

        

        


            

                <meta name="keywords" content="" />
            

        

    

    


        


            


            

        

        


            

                <meta name="description" content="" />
            

        

    

    


        


            


            

        

        


            

                <meta name="renderer" content="webkit">
            

        

    

    


        


            


            

        

        


            

                <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
            

        

    

    


        


            


            

        

        


            

                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
            

        

    

    


        


            


            

        

        


            

                <link rel="stylesheet" href="../../layui/css/layui.css">
            

        

    

    


        


            


            

        

        


            

                <link rel="stylesheet" href="../../xznstatic/css/common.css"/>
            

        

    

    


        


            


            

        

        


            

                <link rel="stylesheet" href="../../xznstatic/css/style.css"/>
            

        

    

    


        


            


            

        

        


            

                <script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
            

        

    

    


        


            


            

        

        


            

                <script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
            

        

    

    


        


            


            

        

        


            

                </head> </div>
            

        

    

    


        


            


            

        

        


            

                <div class="pager" id="pager" :style="{textAlign:1==1?'left':1==2?'center':'right'}"></div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </div
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                <script src="../../layui/layui.js"></script>
            

        

    

    


        


            


            

        

        


            

                <script src="../../js/vue.js"></script>
            

        

    

    


        


            


            

        

        


            

                <script src="../../js/config.js"></script>
            

        

    

    


        


            


            

        

        


            

                <script src="../../modules/config.js"></script>
            

        

    

    


        


            


            

        

        


            

                <script src="../../js/utils.js"></script>
            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                // 获取轮播图 数据
            

        

    

    


        


            


            

        

        


            

                http.request('config/list', 'get', {
            

        

    

    


        


            


            

        

        


            

                page: 1,
            

        

    

    


        


            


            

        

        


            

                limit: 5
            

        

    

    


        


            


            

        

        


            

                }, function(res) {
            

        

    

    


        


            


            

        

        


            

                if (res.data.list.length > 0) {
            

        

    

    


        


            


            

        

        


            

                let swiperList = [];
            

        

    

    


        


            


            

        

        


            

                res.data.list.forEach(element => {
            

        

    

    


        


            


            

        

        


            

                if (element.value != null) {
            

        

    

    


        


            


            

        

        


            

                swiperList.push({
            

        

    

    


        


            


            

        

        


            

                img: element.value
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                vue.swiperList = swiperList;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                vue.$nextTick(() => {
            

        

    

    


        


            


            

        

        


            

                carousel.render({
            

        

    

    


        


            


            

        

        


            

                elem: '#test1',
            

        

    

    


        


            


            

        

        


            

                width: '100%',
            

        

    

    


        


            


            

        

        


            

                height: '430px',
            

        

    

    


        


            


            

        

        


            

                arrow: 'hover',
            

        

    

    


        


            


            

        

        


            

                anim: 'default',
            

        

    

    


        


            


            

        

        


            

                autoplay: 'true',
            

        

    

    


        


            


            

        

        


            

                interval: '3000',
            

        

    

    


        


            


            

        

        


            

                indicator: 'inside'
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //类型查询
            

        

    

    


        


            


            

        

        


            

                categoryList();
            

        

    

    


        


            


            

        

        


            

                //类型搜索
            

        

    

    


        


            


            

        

        


            

                $(document).on("click", ".category-search", function(e){
            

        

    

    


        


            


            

        

        


            

                vue.swiperIndex = $(this).attr('index')
            

        

    

    


        


            


            

        

        


            

                pageList(e.target.innerText);
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                // 获取列表数据
            

        

    

    


        


            


            

        

        


            

                http.request('xinshubang/list', 'get', param, function(res) {
            

        

    

    


        


            


            

        

        


            

                vue.dataList = res.data.list
            

        

    

    


        


            


            

        

        


            

                // 分页
            

        

    

    


        


            


            

        

        


            

                laypage.render({
            

        

    

    


        


            


            

        

        


            

                elem: 'pager',
            

        

    

    


        


            


            

        

        


            

                count: res.data.total,
            

        

    

    


        


            


            

        

        


            

                limit: limit,
            

        

    

    


        


            


            

        

        


            

                groups: 3,
            

        

    

    


        


            


            

        

        


            

                layout: ["prev","page","next"],
            

        

    

    


        


            


            

        

        


            

                theme: '#065279',
            

        

    

    


        


            


            

        

        


            

                jump: function(obj, first) {
            

        

    

    


        


            


            

        

        


            

                param.page = obj.curr;
            

        

    

    


        


            


            

        

        


            

                //首次不执行
            

        

    

    


        


            


            

        

        


            

                if (!first) {
            

        

    

    


        


            


            

        

        


            

                http.request('xinshubang/list', 'get', param, function(res) {
            

        

    

    


        


            


            

        

        


            

                vue.dataList = res.data.list
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                window.xznSlide = function() {
            

        

    

    


        


            


            

        

        


            

                jQuery(".banner").slide({mainCell:".bd ul",autoPlay:true,interTime:5000});
            

        

    

    


        


            


            

        

        


            

                jQuery("#ifocus").slide({ titCell:"#ifocus_btn li", mainCell:"#ifocus_piclist ul",effect:"leftLoop", delayTime:200, autoPlay:true,triggerTime:0});
            

        

    

    


        


            


            

        

        


            

                jQuery("#ifocus").slide({ titCell:"#ifocus_btn li", mainCell:"#ifocus_tx ul",delayTime:0, autoPlay:true});
            

        

    

    


        


            


            

        

        


            

                jQuery(".product_list").slide({mainCell:".bd ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:5,trigger:"click",interTime:4000});
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            

                </body>
            

        

    

    


        


            


            

        

        


            

                </html>
            

        

    

五、文档目录：

六、项目总结： 

         对于本次的系统开发来看，它主要是把我以前所学的知识进行了一次综合的应用。经过这次毕业设计的制作它主要是把我以前所学的理论知识应用到社会实践当中。通过这一次的网上图书购物系统的设计与实现它能够有效把计算机知识与实际问题相互应用，通过计算机网络技术来解决用户生活当中的实际问题，从而提高我的编程能力。虽然在这次毕业设计当中我遇到了很多的问题和困难，但是通过不断的调试和老师的帮助让我圆满的完成了这次毕业设计。通过这次毕业设计的制作让我对计算机实际应用得到了很强的锻炼，同时也大大的提高了我的动手动脑能力，让我也感受到了其中的乐趣和喜悦。

        通过这次项目设计的撰写把我在大学期间所学到的东西都应用上了，但是我觉得还是微不足道的，因为在这次毕业设计当中让我深深的了解到对于软件开发和学习理论知识它是两个完全不同的概念。但是通过这次软件的开发让我在以后的工作当中打下了良好的基础。

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

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

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

前言

作为后端开放人员，最烦的事就是自己写接口文档和别人没有写接口文档，不管是前端还是后端开发，多多少少都会被接口文档所折磨，前端会抱怨后端没有及时更新接口文档，而后端又会觉得编写接口文档太过麻烦。Swagger 可以较好的接口接口文档的交互问题，以一套标准的规范定义接口以及相关的信息，就能做到生成各种格式的接口文档，生成多种语言和客户端和服务端的代码，以及在线接口调试页面等等。只需要更新 Swagger 描述文件，就能自动生成接口文档，做到前端、后端联调接口文档的及时性和便利性。

一、简介

官网：https://swagger.io/

Swagger 是一个规范且完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。

Swagger 的目标是对 REST API 定义一个标准且和语言无关的接口，可以让人和计算机拥有无须访问源码、文档或网络流量监测就可以发现和理解服务的能力。当通过 Swagger 进行正确定义，用户可以理解远程服务并使用最少实现逻辑与远程服务进行交互。与为底层编程所实现的接口类似，Swagger 消除了调用服务时可能会有的猜测。

Swagger 的优势

• 支持 API 自动生成同步的在线文档：使用 Swagger 后可以直接通过代码生成文档，不再需要自己手动编写接口文档了，对程序员来说非常方便，可以节约写文档的时间去学习新技术。
• 提供 Web 页面在线测试 API：光有文档还不够，Swagger 生成的文档还支持在线测试。参数和格式都定好了，直接在界面上输入参数对应的值即可在线测试接口。

二、基本使用

1. 导入相关依赖

通过在项目中引入 Springfox，可以扫描相关的代码，生成该描述文件，进而生成与代码一致的接口文档和客户端代码。

 <!-- swagger --> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-spring-web</artifactId> <version>2.9.2</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.9.2</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>2.9.2</version> </dependency> 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

2. 编写配置文件

在配置文件 config 目录下，添加 swagger 的配置文件 SwaggerConfig.java

@Configuration // 配置类 @EnableSwagger2 // 开启 swagger2 的自动配置 public class SwaggerConfig { } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

这个时候 Swagger 已经算是整合到项目之中了，可以启动下服务，输入：http://localhost:8080/swagger-ui.html# （这里我的项目端口是 8868 ，项目路径是 /mike，所以我打开的文档地址为 http://localhost:8868/mike/swagger-ui.html# ）即可查看 swagger 文档。

可以看到 Swagger 文档中大概有这四类信息

• 组
• 基本信息
• 接口信息
• 实体类信息

2.1 配置基本信息

Swagger 有自己的实例 Docket，如果我们想要自定义基本信息，可以使用 docket 来配置 swagger 的基本信息，基本信息的设置在 ApiInfo 这个对象中。

Swagger 默认的基本信息展示

ApiInfo 中默认的基本设置

• title：Api Documentation
• description：Api Documentation
• version：1.0
• termsOfServiceUrl：urn:tos
• contact：无
• license：Apache 2.0
• licenseUrl：http://www.apache.org/licenses/LICENSE-2.0

SwaggerConfig.java 配置文件添加以下内容：

 @Bean public Docket docket() { // 创建一个 swagger 的 bean 实例 return new Docket(DocumentationType.SWAGGER_2) // 配置基本信息 .apiInfo(apiInfo()) ; } // 基本信息设置 private ApiInfo apiInfo() { Contact contact = new Contact( "米大傻", // 作者姓名 "https://blog.csdn.net/xhmico?type=blog", // 作者网址 "777777777@163.com"); // 作者邮箱 return new ApiInfoBuilder() .title("多加辣-接口文档") // 标题 .description("众里寻他千百度，慕然回首那人却在灯火阑珊处") // 描述 .termsOfServiceUrl("https://www.baidu.com") // 跳转连接 .version("1.0") // 版本 .license("Swagger-的使用(详细教程)") .licenseUrl("https://blog.csdn.net/xhmico/article/details/125353535") .contact(contact) .build(); } 

    




    

        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
    

重启服务，打开 Swagger 文档，基本信息改变如下所示：

2.2 配置接口信息

默认情况下，Swagger 是会展示所有的接口信息的，包括最基础的 basic-error 相关的接口

有时候我们希望不要展示 basic-error-controller 相关的接口，或者是说这想要显示某些接口，比如说：user-controller 下的接口，由该怎么去实现呢？这个时候就需要设置 扫描接口

 @Bean public Docket docket() { // 创建一个 swagger 的 bean 实例 return new Docket(DocumentationType.SWAGGER_2) // 配置接口信息 .select() // 设置扫描接口 // 配置如何扫描接口 .apis(RequestHandlerSelectors //.any() // 扫描全部的接口，默认 //.none() // 全部不扫描 .basePackage("com.duojiala.mikeboot.controller") // 扫描指定包下的接口，最为常用 //.withClassAnnotation(RestController.class) // 扫描带有指定注解的类下所有接口 //.withMethodAnnotation(PostMapping.class) // 扫描带有只当注解的方法接口 ) .paths(PathSelectors .any() // 满足条件的路径，该断言总为true //.none() // 不满足条件的路径，该断言总为false（可用于生成环境屏蔽 swagger） //.ant("/user/**") // 满足字符串表达式路径 //.regex("") // 符合正则的路径 ) .build(); } 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

可根据自己的需求去设置对应的配置，这里我就不再一一赘述了，以上是我所设置的配置，重启服务，打开 Swagger 文档，接口信息改变如下所示：

可以看到之前 basic-error-controller 相关的接口已经没有了

2.3 配置分组信息

Swagger 默认只有一个 default 分组选项，如果没有设置，所有的接口都会显示在 default `分组下，如果功能模块和接口数量一多，就会显得比较凌乱，不方便查找和使用。

swagger 文档中组名默认是 default，可通过 .groupName(String )

 @Bean public Docket docket() { // 创建一个 swagger 的 bean 实例 return new Docket(DocumentationType.SWAGGER_2) .groupName("mike") // 修改组名为 "mike" ; } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

修改后：

如果需要配置多个组的话，就需要配置多个 docket() 方法，这里我就简单写两组，代码如下：

 /**
     * 展示 controller 包下所有的接口
     */ @Bean public Docket docket1() { // 创建一个 swagger 的 bean 实例 return new Docket(DocumentationType.SWAGGER_2) .groupName("mike") // 修改组名为 "mike" // 配置接口信息 .select() // 设置扫描接口 // 配置如何扫描接口 .apis(RequestHandlerSelectors .basePackage("com.duojiala.mikeboot.controller") // 扫描指定包下的接口，最为常用 ) .paths(PathSelectors .any() // 满足条件的路径，该断言总为true ) .build(); } /**
     * 展示路径为 /error 的所有接口（基础接口）
     */ @Bean public Docket docket2() { // 创建一个 swagger 的 bean 实例 return new Docket(DocumentationType.SWAGGER_2) .groupName("yank") // 修改组名为 "yank" // 配置接口信息 .select() // 设置扫描接口 // 配置如何扫描接口 .apis(RequestHandlerSelectors .any() // 扫描全部的接口，默认 ) .paths(PathSelectors .ant("/error") // 满足字符串表达式路径 ) .build(); } 

    




    

        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
    

重启服务，打开 Swagger 文档，接口信息改变如下所示：

组名为 mike 的文档中只有 user-controller 相关的接口信息

组名为 yank 的文档中只有 basic-error-controller 相关的接口信息

3. 控制 Swagger 的开启

在开发或者测试环境下，我们开启 swagger 会方便前端和后端的交互，但是如果在生产环境下也开启 swagger 的话，是会将接口暴露出去的，有极大风险，如何让 swagger 根据不同的环境来决定是否开启？

这里我准备了四个项目的配置文件，dev、test、pro 三个环境的配置文件仅是端口上的不同

• application.yml -------------------------- 全局配置文件
• application-dev.yml -------------------- 开发环境配置文件
• application-test.yml -------------------- 测试环境配置文件
• application-pro.yml -------------------- 生产环境配置文件

application.yml 内容如下，用于指定选择的环境：

spring: profiles: active: dev 


    

        1
    

    

        2
    

    

        3
    

可以通过代码判断此时是在什么环境：dev、test、pro，如果是在 pro 生产环境，则关闭 swagger。

 /**
     * swagger 配置
     * @param environment 环境
     */ @Bean public Docket docket(Environment environment) { // 设置环境范围 Profiles profiles = Profiles.of("dev","test"); // 如果在该环境返回内则返回：true，反之返回 false boolean flag = environment.acceptsProfiles(profiles); // 创建一个 swagger 的 bean 实例 return new Docket(DocumentationType.SWAGGER_2) .enable(flag) // 是否开启 swagger：true -> 开启，false -> 关闭 ; } 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

在 application.yml 全局配置文件中环境指向 dev 时，是可以打开 swagger 的

如果我将 application.yml 全局配置文件中环境指向 pro 时，就不能打开 swagger 了，提示 Could not render e, see the console

4. 常用注解使用

之前有说 Swagger 会将接口请求或者相应的实体类信息展示在 Models 下的，比如我 UserController.java 下有一个接口如下所示：

 @PostMapping(value = "/query-user-info") public ResponseBean queryUserInfo(@RequestBody @Validated IdReq req) { return ResponseBean.success(userService.queryUserInfo(req)); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

它的请求体是 IdReq，响应是 ResponseBean，Models 展示这两个实体类信息如下：

前端可通过看这个 Models 知道后端定义实体类的信息。

@ApiModel

该注解是作用于类上面的，是用来描述类的一些基本信息的。

相关属性：

• value：提供类的一个备用名，如果不设置，默认情况下将使用 class 类的名称
• description：对于类，提供一个详细的描述信息
• parent：这个属性用于描述的是类的一些父类信息
• discriminator：这个属性解释起来比较麻烦，因为这个类主要体现在断言当中
• subTypes：可以通过这个属性，指定我们想要使用的子类

譬如：这个为给 IdReq 这个类添加该注解

@Data @NoArgsConstructor @AllArgsConstructor @ApiModel(value = "Id请求体") public class IdReq { private String id; } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

可以看到这里的名字从 IdReq 变成 Id请求体 了

@ApiModelProperty

它的作用是添加和操作属性模块的数据。

该注解的使用详情可参见博客：@ApiModelProperty注解的用法

这里我还是以 IdReq 类为例，为该类的属性添加说明

@Data @NoArgsConstructor @AllArgsConstructor @ApiModel(value = "Id请求体") public class IdReq { @ApiModelProperty("主键id") private String id; } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

可以看到这里对该字段有一个备注说明。

@ApiOperation

该注解用来对某个方法/接口进行描述

该注解的使用详情可参见博客：Swagger @ApiOperation 注解详解

这里我以 UserController 下的接口为例：

 @PostMapping(value = "/query-user-info") @ApiOperation(value = "根据id查询用户详情") public ResponseBean queryUserInfo(@RequestBody @Validated IdReq req) { return ResponseBean.success(userService.queryUserInfo(req)); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

可以看见该接口就多了对其的描述信息。

@ApiParam

该注解使用在方法上或者参数上，字段说明，表示对参数的添加元数据（说明或者是否必填等）

相关属性：

• name：参数名
• value：参数说明
• required：是否必填

这里我以 UserController 下的接口为例：

 @PostMapping(value = "/query-user-infos") @ApiOperation(value = "条件查询用户信息") public ResponseBean queryUserInfos( // name 用户名称 不必填 @ApiParam(value = "用户名称", required = false) @RequestParam(required = false) String name, // gender 用户性别 必填 @ApiParam(value = "用户性别", required = true) @RequestParam(required = true) GenderEnum gender ) { return ResponseBean.success(userService.queryUserInfos(name,gender)); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

这里会展示请求参数的备注信息，以及是否必填等。

5. 接口调用

使用 swagger 除了让前后端交互变得方便，也让接口的请求变得简单，只需要填写好请求所需要的参数信息，便可直接发起请求。

比如说接口 /user/query-user-info

点击 Try it out

设置好请求所需的参数，点击 Execute 执行

就能看到接口响应的结果了

接口 /user/query-user-infos 也差不多

三、进阶使用

1. 添加请求头

有时候我们的接口是需要获取请求头信息的，这样的话就还需要在 swagger 配置中添加请求头的配置。

 @Bean public Docket docket() { // 设置请求头 List<Parameter> parameters = new ArrayList<>(); parameters.add(new ParameterBuilder() .name("token") // 字段名 .description("token") // 描述 .modelRef(new ModelRef("string")) // 数据类型 .parameterType("header") // 参数类型 .defaultValue("default value") // 默认值：可自己设置 .hidden(true) // 是否隐藏 .required(false) // 是否必须 .build()); // 创建一个 swagger 的 bean 实例 return new Docket(DocumentationType.SWAGGER_2) .groupName("mike") // 修改组名为 "mike" // 配置接口信息 .select() // 设置扫描接口 // 配置如何扫描接口 .apis(RequestHandlerSelectors .basePackage("com.duojiala.mikeboot.controller") // 扫描指定包下的接口，最为常用 ) .paths(PathSelectors .any() // 满足条件的路径，该断言总为true ) .build() // 添加请求头参数 .globalOperationParameters(parameters); } 

    




    

        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
    

比如接口：

 @GetMapping(value = "/get-token") @ApiOperation(value = "获取请求头中的token信息") public void getToken( @RequestHeader(value = "token",required = false) String token ) { // 直接获取 token 信息 System.out.println("token = " + token); // 通过代码获取 ServletRequestAttributes servletRequestAttributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes(); if (servletRequestAttributes != null) { HttpServletRequest request = servletRequestAttributes.getRequest(); String header = request.getHeader("token"); System.err.println("header = " + header); } } 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

可以看到这个接口已经可以去设置请求头了，调用接口

后端也能获取到。

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

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

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