“民无信则不立，业无信则不兴。”——可见，信任力对于一个国家或是企业来讲是非常重要的基础。

据权威机构数据显示，2021 年第七次全国人口普查后，在我国 14.1 亿人口当中，租房人群已经超过 2 亿，租房已经成为一二线城市年轻人生活的新常态。整个租房市场在疫情过后也逐渐回暖，各大租赁平台竞争日趋激烈，争相拿出各种补贴政策吸引租户，前有自如针对毕业大学生按月付、0 押金的“海燕计划”，后有泊寓推出的 98 折入住、免费换房的“港湾活动”。在互联网技术日趋成熟、人口红利逐渐消失的当下而言，平台的服务能力趋于同质化，需要比拼的是谁有更深的内功基底：那就是打造出差异化的竞争核心。差异化的竞争核心对于房产、金融行业来讲，就是企业（平台）的信任体系建设，从满足用户基础的功能诉求——建立起用户与平台信任的关系——最后让用户对平台（产品）产生信仰与依赖，和Apple、Airbnb这样的公司一样，最终实现品牌的溢价价值，这也是马斯洛需求层次理论——满足用户从基础的生理需求到自我价值的实现。

图 1 马斯洛人的需求层级与产品价值层级映射

此外，我们在 19 年贝壳租赁满意度报告中发现，用户在对租房信息渠道的选择上更关注真房源和平台的可信度等方面。因此，我们希望打造一个简单、安全、可信赖的线上租赁环境，帮更多用户解决租房问题，建立起租客、房东与平台的信任链接，从而构建起整个平台的信任价值体系。

图 2 用户原声

产品中传递给用户的信任是什么

我们先看一下信任的定义是什么？

在社会科学或心理学中来讲，信任被认为是一种依赖关系，是一种稳定的信念，指的是个体对周围的人、事、物感到安全、可靠、值得信赖的情感体验，在个体感到某人、某事或某物具有一贯性、可预期性和可靠性时产生，值得信任的个人或团体意味着他们寻求实践政策，道德守则，法律和其先前的承诺。———出自《百度百科》

对于产品给用户的信任感来讲，可以拿恋爱的过程举例更为形象：

初识——信任——恋爱——信赖——结婚

图 3 恋爱的过程：信任感的建立

用户最初接触产品时，虽然有清晰的目的诉求（找个靠谱的伴侣共度一生），但是因为认知不够，并不能了解产品能帮自己解决怎样的问题，带来怎样的价值，这个时候需要产品通过各种方式来建立与用户的情感链接，也就是建立信任感（恋爱）的过程，只有解决了用户核心的诉求并不断给用户提供预期外的惊喜，用户才会慢慢认识到产品的价值，变的越来越离不开了，这个时候就自然而然的进行下一个环节转化(结婚）了。

所以说从产品层面去塑造信任感就是：理性（解决用户最基本的核心功能诉求）+感性（提供用户超预期的服务）这样的过程，需要注意的重点还是解决用户核心诉求为准，让产品变得能用并好用，否则一切都是空谈。

刨析问题&信任归因

通过前期的电话访谈和问卷调研，我们发现贝壳租赁用户对平台信任感较弱，存在怀疑平台房源真实性、经纪人服务质量、平台隐私安全保障等问题，于是我们首先定义了用户对与社会、对行业、对平台的信任度初始阈值，用研同学依此为基准进行问卷投放，利用结构方程模型对结果进行验真及提炼，最终总结出包括平台背书（例如强化贝壳真房源保障）、隐私保护（用户个人信息不会被泄露）等 12 个方面的信任关键因子。

我们由此梳理出了 10 多个触点作为搭建租赁业务信任体系的主脉络，希望通过稳固认知、建立保障、提升质量、构建共情能力等方面入手进行系统改造。

图 4 信任初始阈值及关键因子沉淀

如何搭建产品的信任感

通过前期对关键因子的梳理，我们总结出了匹配业务诉求、建设心理预期、强化品牌背书、建立服务保障、营造情感氛围、精琢设计细节等 6 要素作为产品设计中搭建信任体系的指导准则，下面我会以租赁首页、心愿单改版等案例逐一拆分来讲。

图 5 分层拆解信任 6 要素

1. 匹配业务诉求

我们通过数据发现，有近 30%的用户是通过首页搜索来找房的，但是根据满意度报告结果来看，好多用户提出了搜索维度少、关键信息不明显等问题，同时在搜索过程中，我们也看到了用户对地图找房、区域搜索功能有更高的期待。

图 6 用户基础诉求

同时我们对旧版本的心愿单进行了数据分析和调研发现，有主动表达找房诉求且成交的用户仅占总成交人数的 6%左右，心愿单并没有很好的匹配用户的找房诉求，原因在哪？我们梳理了 3 个问题所在：1 是旧版本的心愿单简单的把用户之前带看、咨询、关注过的房源一股脑塞在了一起，变成了房源列表的收藏夹，弱化了心愿 2 个字，对用户帮助作用不大，而用户对于找好房、找对房的主动表达诉求并没有得到满足；2 是联系经纪人的商机入口随处可见，用户在操作时容易误触与经纪人的对话窗口，引起心理反感；3 是用户添加了自己感兴趣的房源到心愿单后，产品没有提供用户后续的服务支持，导致用户慢慢流失掉；

结合上述问题，我们重新定义了首页和心愿单的业务核心，也就是提供给用户找房过程中主动表达自己诉求的窗口。在新版首页搜索中，我们新增了预算入口，并强化了搜索时的区域、地铁等关键信息帮助用户更好的进行决策；

同时在心愿单中，我们让用户可以快速的创建自己的专属找房卡，根据用户日常浏览、关注等行为向用户推荐相似房源，满足其不同维度的找房诉求，另外我们弱化了商机展位，避免不必要的打扰，让用户在安静的场景中持续感受到心愿单带来的服务帮助。

图 7 新旧搜索功能对比

图 8 新旧心愿单功能对比

2. 建设心理预期

大多数人都会遇到这种情况，当决定做一件事时就会产生很高的心理预期，且随着时间越长，预期会加倍的增长，当结果出现后，一旦和自己的想象出入很大时，就会产生很大的挫败感，甚至会选择直接放弃；

由此可见，在做产品设计时，帮用户建设好心理预期是很重要的；在新版心愿单设计中，就很好的利用了这一点，当用户在首次进入时，通过宣传导语能一目了然的感受到我们的服务宗旨， 我们强调一起帮用户规划心愿而不是简单、机械的创建一个表单，整个产品的背后有大数据和平台的服务支撑，它不仅仅承载的是用户的找房功能，还能帮助用户具体描摹出对租房偏好、体验的直观感受，让用户对心愿单的认知更加清晰明了；另外在用户点击关注房源后，我们也会通过提示的方式提前告知其下一步动作，避免用户搞不清从哪里能看到自己选择的房子。

图 9 强调服务主旨，建设用户心理预期

3. 强化品牌背书&建立服务保障

针对之前满意度报告我们发现，多数用户在租房、买房等进行大宗消费时往往都缺乏安全感，因为担心遇到假房源或者是租金过高的情况，所以在设计产品细节时，我们格外重视品牌和服务保障的宣导，例如在心愿单详情页里我们把客观的浏览数据和价格浮动变化进行外露展示，目的就是增加用户对产品的真实认知，进而获得安全感；在具体的房源详情页里，我们也在宣导贝壳平台真房源、贵必赔的服务保障，打通产品与用户之间的信任隔阂。

针对其他品牌长租公寓频频爆雷的情况，贝壳第一时间上线了公寓租房安心保障计划，我们将权益细则根据用户线上看房、下订、签约、支付等流程拆分为遇假房必赔付、未留房必赔付、有违约必赔付、有损失必赔付 4 大权益点进行强化宣导，并将常见案例以问答形式浓缩成风险提示进行外展，加强用户的安全防范意识。

图 10 透传保障权益，强化用户安全感知

4. 营造情感氛围

人类的行动和感知经常会受到情感所支配。因此调动用户积极情绪，打造情感上的认同和共鸣，是产品建立信任体系的重要环节。心愿单所描绘的宗旨就是用心服务帮你找到理想的家，通过描绘家的理念，我们希望带给用户也是温暖、贴心的感受，所以我们从设计层面上对整体的文案进行了精细打磨，让统一的情感化语言贯穿全流程，例如在找房卡上，我们没有采用常规的疑问句形式，而是选用设问句的形式来调动用户情绪，营造温情氛围，例如“你的租房预算是多少？预算多少都是自己温暖的港湾；”“你想在哪里租房？风景优美、交通便利你都可拥有”通过这些精心设计的文案，我们希望给予用户“我即将要做的事情是与往常不同的，是有意义的”心理暗示，也有心愿单“许愿”过程的仪式感。

5. 精琢设计细节

当人们下班后回到家中后，有些人会选择从冰箱里随便翻出点食物凑合着做为晚餐；而有些人则会从超市精心采购食材并根据菜谱烹饪，菜肴出锅后，还会仔细摆盘，并拍个美照上传朋友圈；快餐虽然解饿，却难以满足用户更深层次的情感体验；产品设计也是如此，因为更专业，所以更信赖，专业的产品能带给用户更多的信任感和安全感，而精致的 UI 界面就是产品严谨、专业度的直接表达。我们可以看到旧版的租赁首页、心愿单在视觉情感化表达较弱，难以让用户产生好感和信任的链接，在新版设计的过程中，我们围绕着“理想的家”的主题进行了精致的场景插画绘制，并利用文字排版合理拉大了空间，让原本拥挤的信息内容呼吸感更强；整体色彩延用了租赁频道的主色调-暖黄色，也是跟主题“家的温暖”保持契合，带给用户一致的视觉感受。

图 11 精致的视觉表达满足用户更深层次的情感体验

小结

图 12 信任心智模型

信任心智是可以通过改变关键因子进行优化和重塑的，同时人的信任度也是分层级的，分别由自我信任-关系的信任-组织的信任-市场的信任-社会的信任组成，所以产品的信任感营造需要从多方面维度去打造的。我们先要通过数据分析、定性访谈等手段，定义出用户对于社会、行业、平台本身的信任边界在哪，“例如用户对贝壳平台提供的服务保障了解多少，真房源的感知程度又是多少”，并基于此梳理出服务专业、信息透明、内容全面、服务专业等关键因素作为搭建信任体系的主脉络。最终的实现主要分为三个层面：本能层上通过精致的插画设计、人情味的文案话术、明晰的交互引导来凸显服务场景的仪式感和品质感；行为层上打造公正的信誉评价、完善的客服系统、安全的支付体系、完整的房客信息满足用户的诉求；反思层上宣导（真房源、贵必赔）的平台服务承诺夯实用户的信任基础；达成由基础诉求满足（用户能用）——能提供用户超预期的服务（用户易用）——再到与用户彼此建立起良好的信任体系（用户爱用）——最终打造一个有品牌信仰的服务平台。

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

文章来源：优设  作者：贝壳KEDC

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

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

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

前言：

入行做车载 HMI 已有 2 年余久，也该沉淀输出一些行业内容，HMI 行业还是一片蓝海，很多设计师都不敢轻易的进入这个新型的行业，觉得有难度、门槛、视觉要求高、这篇文章先带你入行，文章还是以一些 HMI 基础知识作为讲解，在设计规范方面的内容，我会添加很多干货结合实际案例讲解。

先给大家打一个预防针（规范是用来打破的，本篇文章只做为参考价值）

1. 设计规范包含什么内容

设计规范包含视觉规范和交互规范，本章节先说一下视觉规范，车载交互内容会安排在后续写作中…

2. 视觉规范：

车载端设计和移动端、web 端设计显示差别还是蛮大的，最主要的差异就在于布局的不同，接下来我们从文字、颜色、布局、圆角、图标等角度讲解，PS：偶尔还会穿插一些工作心得的内容。

文字规范：

文字是 UI 界面设计中重要的组成元素，对于文字的使用是检验设计师基础功底的时候，用得好坏会直接影响到用户在使用产品的过程中的一个体验，文字的使用从这几个纬度出发：字体选择、字号大小、颜色、字重、行高.

1. 字体选择

（我要做一个良心的博主，让你们避免侵权问题，别再傻乎乎的犯字体侵权的错误了）

在做车机系统设计的时候，需要选定该款车机中文、英文、数字或多国语言需要用什么字体。如果在乙方公司呢，客户会指定给到你字体包，插播一段小插曲（职场心得：当客户选定字体后，如果该款字体是付费字体，你得先和客户确认是否得到使用许可，避免后续官司纠纷）在甲方爸爸工作的同学一般会遇到两种情况：

• 公司已明确字体（请专业字体设计师设计一套）
• 用常规设计的字体，建议使用中文字体：思源黑体、英文/数字：Roboto。如果有做海外项目的，对于 Roboto 未涵盖的语言，建议使用 Noto Sans 字体。Noto Sans 源自类似于 Roboto 的度量标准，旨在实现视觉上和谐的国际化。

这边肯定会有人问为什么不能用苹果字体呢？它不是免费字体嘛？

普及一下：首先该车机系统属于商业用途，未得到许可使用，这就是侵权，在 app store 上 发布的 app 是可以免费使用的，因为这是在苹果生态下使用，所以不属于侵权。

2. 字号大小与字阶

车机端的字号大小的制定也是要循规蹈矩

字号肯定要远大于移动端和 web 端，为了确保文字信息的扫描性，结合了：基于 IDX & 同济 (2020) 百度 Apollo 中控视觉基础研究项目，设置清晰的文字阶级参数，还有谷歌 Android Automotive OS 研究，以下是用字的规范（标红色区域是他们之间的区别）

可参考谷歌：字体大小的遵循 4px 倍数大小增量

我们在做项目的时候，规定的字体大小维持在 4px，这样有助于保持一致性和视觉层次感

用字的注意事项：

字体大小控制在 20px，这个要谨慎使用，一般都是使用在小标签辅助类的文字上，最小的正文字号为 24px

设定文字规范有两个好处：

• 文字样式复用，不管对于设计师还是开发同学来说，都是极大提高工作效率的一件事情
• 对于界面设计来说，有规可循，避免设计时降低整体的视觉感

3. 字体用色规则

• 文字与背景颜色对比度要遵循 WCAG 的标准，需要考虑到无障碍设计需求，因此保持在 4.5:1 – 7:1 对比度，确保文字清晰易读
• 将注意力集中到最重要的区域内容
• 文本元素之间传达视觉层次感

4. 字体字重

字重是指一种字体的粗细样式，下面展示字重的种类：

上实际案列讲解：

谨慎使用中等字体粗细 ，尽量别用最粗的字体，这样会使得页面感觉差别很大，过度的不是那么自然，没有了细腻、轻盈的感觉。所以在制定字体规范的时候就尽量将 Bold 字重去掉，如果你想通过加粗字体的方式来和下面信息作为区分，请选择 Medium 字重（根据实际项目需求来定，我的规范只做参考价值）

5. 字体行高

为什么要加这一 pa，因为这个问题一直有小伙伴问到我，我就一次性解决了，文字模块需要增加安全距离，这块比较复杂。不行我后期录一期视频讲解，下文也有详细的讲解。

字体文本的高度一直困扰着设计师，我该用什么方式去对接开发？在设计过程我们是否可以使用文字字号的高度进行对齐方式，而不是使用文字区域的行高？NO 肯定是不可以的。

微信朋友圈主页作为案列：

文本的行高肯定是要大于字号的，个人动态的字号为 16px（在@1x 设计稿中）如果是多行文本的时候，微信是手动调整了文本行高（正常 Line：22px 微信实际 Line：20px），当行高为 20px 的时候，需要将文本上移 3px 才能使得图片和文本视觉在一条线上面，如果按照这个进行开发的话，开发小哥需要在 CSS 属性过程中注意图片和文本之间的实际差异，这种左右高度不一致的设计，会直接导致在开发布局过程中变得更加繁琐。

最后的结论：按照文本的行高来对接开发

普及一下小知识点：车载段落的行高一般为字号的 140%-180%的视觉呈现，提供舒适的阅读环境给到用户（取整数）

下面是一些专业性的知识 了解一下：

在设计字体过程中，字体设计师一般都会给字体预留安全距离，让字体展示更加稳定。

我们在做设计的时候，将字号设置为 30px，但实际字体的空间是需要包含上下部分的安全距离，最终实际高度就变成了 42px（Font:pingfang） 穿插一个小干货：在不同字体下相同字号，行高（Line height1）是不同的，Ant Design 的 30 号字，行高为 38px （详见配图计算方式）

颜色规范：

1. 使用场景

场景：白天阳光暴晒（阳光强度有很多档位早、中、下午） 、 梅雨季节阴雨连天 、夜晚模式、地下隧道等。

驾驶汽车在室外不确定因素会比较的多，光线强度的干扰尤其重要，照明会根据一天中的时间，天气，窗户的色调等等而有很大不同。当你设计的车载应用程序在现实世界中使用时，设计时在计算机上看到的颜色并不总是相同。考虑颜色亮度如何影响驾驶条件，以及低对比度的颜色在阳光直射下如何被洗掉。始终在多种光照条件下预览您的应用以查看颜色的显示方式。如有必要，请进行调整以便在大多数案例中提供最佳的观看体验。

最初车机厂商系统大多数都是偏爱深色背景，具有代表性的两家系统谷歌的 Android Auto 系统和苹果 Carplay 系统，我在做项目最初也是沿用了深色系。

2. 色彩中的“TF BOY”组合

我想用一句苹果的官方话说：“配色可以提供交互性，提供视觉连贯性，并且对界面赋予生命力。”这句话总结得真的非常到位。集中注意力认真听，重点来了，UI设计中颜色的使用法则，在一个页面设计中需要讲究 60-30-10法则， 在60％+30％+10％的比例下创造一种平衡感，是为了视角能够从一个焦点舒适地过渡到下一个点，避免给驾驶中的我们产生视觉落差很大的感觉。

一个项目车载系统的色彩规范，包括了品牌色、语义色、中性色。

品牌色：又称为 “强调色“ ，通常一个车载系统只有一个品牌色，也是出现频率较高的一种颜色，强调色一般使用场景为：tab 的切换选中，按钮开启状态、音乐在播放中的音符小动画等等 （拿我练习稿讲解）

语义色：语义色需要在 UI 界面中承载着具有准确的信息传达，在复杂场景里颜色的倾向性应十分明显，减少用户的理解成本和理解时间，给出行体验者带来良好的驾驶体验。

根据交通标志的定义，红色表示禁止、停止、危险，那么用户需要在第一时间识别出这种信息，黄色为警示或不良结果等，绿色则代表通行、成功，上诉说的颜色为状态色。下面要讲一下功能色：说到链接色，大家第一时间肯定想到的是蓝色。

中性色：主要用于除文字外，还被运用到背景色、分割线、置灰填充、边框、等场景中 （注：根据背景色的变化，系统其余颜色也随之而变，这是两套用色规范切换）。

3. 如何制作 HMI 色彩规范？

尽量使用较少的颜色，颜色饱和度不要过高，避免对驾驶的视觉干扰，吸引驾驶者的注意力，让老司机翻了车。

避免让交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的颜色，则很难知道在何处点击）。

保持色彩一致性（请勿使用不同的颜色来任意区分单个屏幕中的重复组件。当颜色不能增加价值时，请谨慎使用）。

建立视觉层次（通过不透明度值或者是同一色系，但不要过多的使用不透明度或对比度）。

尽量使用深色背景，这是市面上很多车厂的选择（不过蔚来、特斯拉、小鹏、carplay 都相继推出了白色版本，来适配白天，我们项目中后期也加入白天模式，经过路测在阳光很刺眼情况下，黑色会反光，无法看清显示屏幕内容），最终在实际各种照明条件下，对应用配色方案进行测试。

车载 UI 系统中使用足够色彩对比度，上述在使用场景中有所提到。

继续讲干货

(在后续文章安排里我会单独拿出 WCAG 从感知，可操作性，易于理解和稳定性去详细讲解，这次先挑重点说)

WCAG 全称是 Web Content Accessibility Guidlines（网页内容无障碍指南）它们是一组是网页内容更容易访问的建议，主要针对残疾人。一共分为三个级别 A（最低）、AA、AAA（最高）

讲个概念：两个白色的对比度是 1:1 , 白色（#FFFFFF）与黑色（#000000）的对比度为 21:1

做颜色对比的网站链接，搭梯子访问：https://next.rsuitejs.com/en/tools/palette

要满足 AAA 级准则，文本视觉呈现及文本图像至少要有 7:1 的对比度，针对大号文本以及大文本图像至少有 4.5:1 的对比度

总结：

对于颜色运用的细节，是证明了一位设计师的深度、且具备耐久力。上述内容对于颜色的规则不适用全部的设计方案，还是具体项目具体分析，用户人群不同，运用场景也不一致，比如驾驶者和后排人的屏幕设计内容肯定会有差别。还有一个点在设计需要阅读内容页面，例如：微信发来的消息、设置中文本，最好能够达到 AAA 标准。

布局规范：

HMI 的设计和其余终端设计，最大的差异就在于布局，布局是整个页面设计的框架，也是最重要的内容之一，在讲该模块内容，我会从实际项目案例出发。开始制作车载 UI 系统，需要和汽车厂商确认车载 UI 可在屏幕中，设计的尺寸区域（注：其中“屏幕”是指应用正常工作空间而不是到边缘的全部空间，有的厂商把固定按键也镶嵌这块区域中）。

1. 屏幕尺寸有多少种类别？

我们先要了解一下热门和主流车机分辨率。众所周知我们车机上的屏幕尺寸和分辨率种类可以说是种类繁多，在设计过程中设计师主要还是关注屏幕的分辨率是多少？（ 需要我们设计的屏幕为仪表盘、中控、有的车载还包含有副驾驶和后排娱乐屏幕 ）

特斯拉（Tesla）

Model3 1920*1200 15 英寸（底部控件的尺寸为 120 像素是固定 ）Model S/X 用竖屏设计 分辨率 1200*1920

蔚来

ES8 10.4 英寸 分辨率 1600*1200 / ES6 11.3 英寸 分辨率 1600*1400

理想 ONE

比较特殊，它拥有 4 块屏幕，仪表盘 12.3 英寸 1920×720 / 中控屏 16.2 英寸 2608×720

副驾驶娱乐屏 12.3 英寸 1920×720 / 再外加功能控制屏 10.1 英寸的 1280×720

小鹏

G3 竖屏幕 15.6 1920×1080 P7 控屏，在目前汽车产品中属于分辨率较高的梯队 2400×1200 精度超过 2K（普及一下 2K 分辨率标准为 2048×1080 像素）

接下来给大家观看苹果的 CarPlay 系统分辨率和谷歌车载系统

CarPlay 系统分辨率：800 * 480、1280 * 720、960 * 540、1920 * 720

相信大家已经找出规律了：在设计横屏的时候高度基本都为 720px，其余横屏幕按照比列缩小。

这块内容非常重要，以至于关乎到后面整个系统的布局方式，苹果的 CarPlay、谷歌 Android Auto、国内的百度 carLife+等都有自己的车载系统，如有的车企屏幕分辨率不一致，就无法适配成功，会出现拉伸等现象，除非通过定制化服务重新按照厂商的尺寸去重新搭建一套。我们项目中涉及到的屏幕和 CarPlay 尺寸大致很像，但布局方面我们有自己的想法，后面在自适应布局中会提到。

2. 间距的规范制定

制定一组间距值，用于布局中元素和组件之间的固定纵向和横向的间距，参考规格布局 8 像素点网格上构建，这意味着规范中的 UI 组件和元素之间相隔 8px 的倍数

谷歌 Android Auto 间距规范一共制定了常用的九种数值，P0 – P8

注意事项：提供 4px、12px 间距大小，是为了对齐较小的元素之间的距离，这两个数值谨慎使用，在大屏幕车载系统内，也有很多间距需要大于 96px，因此在对于这些数值制定规范的要求就是 8px 的倍数即可使用。

说到这边肯定会有人有疑问，我们在做规范时能不能将间距不设定成 8 的倍数，4、5、6……倍数是否可行呢，当然是可以的，“规矩是死的，人是活的“。只要是按照倍数叠加完全都 OK，如果选定一种倍数，就不能加入其他倍数，如果页面出现多种间距会使得页面没有节奏感，打破了亲密性原则。

3. 车载模块中布局

这部分对于想接触车载设计同学非常友好。讲一下通用的布局，具体交互设计等待我后续更新文章，这次就简单按照 1920×720 分辨率每个模块我都会稍微带一下。

4. 自适应布局

讲完前面每个模块的大致布局，接下来我们来探讨一下自适应布局，这个真的非常非常！！！超级重要，工作后期经常会遇到这个问题，甲方爸爸后续有增加屏幕分辨率的需求。我们前期在布局上花费的时间相对较多（但后期维护起来可以减少你很多工作量，前期需要你规划好基础框架）

下面拿实际做过的案列来陈述：抛出一个问题，我们如何将分辨率1920×720页面的内容转变成1280×720 呢？

（有同学说，直接丢开发然后他们写自适应布局）导航相关页面需要调用地图的接口，这个开发是可以直接去写自适应，但其余元素还是需设计师重新来排版。

（还有人说直接缩放比列，调整页面布局）这个方案在比例相差很大的时候是行不通的，但同比例或者很相近是完全 OK 的，正巧我们项目上有 800×480 分辨率，和 1280×720 极其相似。

（还有人表示不服：折叠某块区域内容，将该区域内容做成 icon 点击后弹出来）该方法可以使用在部分内容。

有的模块内容没法降低层级，这个办法就不行，遇到这类的情况我们就直接将这块内容适配做成 1280×720 尺寸。

如果前两种办法都行不通，有的内容就得需要做弹性布局控件了，例如设置页面，当中间空间很大的时候，放置到短屏中可以根据弹性布局拉伸该控件长度，拉至适配该屏幕的设计，如有需要请留言，后续弹性布局我会写一篇文章详细说明使用。

我们项目多种分辨率进行转化基本都按照这些方案推进下去的，来一句鸡汤：办法总比困难多，真的只要用心做事情，没有什么困难能难倒你的，还有不要做理想主义者，要做实践者，实践才会见真理。

不好意思，一下子说多了没收住 ，进入正题。谨慎重新改变布局 ： 第一是增加开发工作量，其次就是增加用户的学习成本，当然，屏幕是竖屏的时候则就需要重新布局，因为横宽比例变成了相反数值。（旋转屏幕大家可以去看看比亚迪的唐、汉车型）

上述的内容都是我们一步一个坑踩过来的，“且看且珍惜”。

圆角的规范

1. 如何制定圆角的大小规则

更圆的角和全圆角的使用

对主要动作和组件使用更圆的角（更大的角半径 or 全圆角），是需要重点突出的，圆形对大多数直线形状具有更大的视觉影响，如果在页面有足够空间的前提下，全圆角形式会和其他按钮做出反差，鼓励用户去点击。比如：全局消息通知按钮、电话模块中接听、挂断、下拉负一屏中的按钮等 （下方是练习稿案列）

较低的圆角和直角的使用

对于不需要 or 低强调的元素，使用较低角半径 or 0px 圆角=直角，例如：工具栏或列表可以用较小的圆角，专辑封面不需要再强调，所以直接将它降到 0px，我们项目音乐专辑大封面就用的直角，具体问题需要具体去分析，像音乐控件的外轮廓就是带圆角的，因此专辑封面在容器里面就必须带有圆角，不然设计风格则就不统一。

还有一个模块，就是在音乐分类的情况下会有很多专辑封面，我们对比一下两种方案：有圆角 or 无圆角，两张图对比下来，带有圆角的专辑封面有更明显的边缘产生了视觉差的感觉，而直角的专辑看起来就没有，不易突出，因此不太可能引起我们的注意。所以在网格布局中，圆角的效果更好

谷歌对于圆角的定义

在设定圆角规则时，需要注意一个事项：大小种类不宜太多，不然显得杂乱无章。

注意：即使应用布局是在 8dp 网格上构建的，但仍会提供 4dp 的半径大小，以帮助在较小的组件中形成元素。该值应谨慎使用，因为它不是 8dp 的倍数

总结：圆角还是直角没有对错之分，合适的才是最好的。

图标规范：

1. 图标的种类（车载图标分为应用程序图标、系统性图标）

应用程序图标

现在 HMI 的设计趋势已经去掉了应用程序图标，取而代之的是卡片化的设计方案，简单说一下卡片式设计有两大好处，第一，把学习成本降至最低，第二，增大的接触面积让驾驶时误触率也降到最低，给到用户最直观的体验就是简单易用。不过有的汽车厂商对这一块还是有需求，我们就稍微再提一下。

我自己也负责过有应用程序图标的项目，在 1920×720 中为 160px 分辨率和苹果@3x 分辨率相同 ；在相对较小的屏幕中应该按照比例同比缩小，如同 800×480 分辨率中首页中的应用程序图标为 80px，这是如何计算的呢？

项目中还有一款车型的屏幕分辨率为 1280×720，由于屏幕变窄，应用程序图标需要缩小到 120px，高度 720 and 480 有一个共同 240 的倍数，所以最终小屏幕的应用程序图标为 80px，圆角大小也随之而变：R：24/18/12。其余分辨率按照实际情况使用。

系统性图标（后续 HMI 组件库搭建文章中我会详细的讲解）

该系统提供了许多小图标（代表常见任务和内容类型），供导航栏和选项卡栏中使用。最好尽可能使用这些内置图标，因为它们是人们熟悉的。

2. 图标的尺寸

大厂是如何制定图标尺寸

很多博主在讲到图标尺寸的时候都是一笔带过，拿着别人得出的结论，却没说怎么计算出来，对于车载来说，前期发布这些研究报告的内容极少，所以我对图标的计算想找到了计算方式，如果大家想知道怎么换算的话可以查看：https://zhuanlan.zhihu.com/p/158099749

根据百度 IDX 驾驶体验中心，在对于《车载 HMI 界面效果客观指标实验报告》在基于视距为 50cm，计算出最小图标为 9mm 推荐使用 12mm。视觉上的 1cm 的实际像素是多少呢？这就是一个错误的想法，上面文章中也有提到屏幕分辨率无法与物理长度单位进行转换，（实际项目工作经验告诉我，因为相同的屏幕大小但是分辨率不一样，所以得出的结果不能共用）

PPI 的计算

我就大概讲一下计算原理，这个根据屏幕的分辨率，我做过一款相同屏幕尺寸的车机，都是 8 寸屏幕，但分辨率一个为 1280×720，另外一个则为 800×480，每一个格子为一个像素。

最小图标尺寸计算

接下来找一下分辨率 1280×720 最大公约数为 80，最后得出结论屏幕的比列 16:9

两边比例的平方相加 = 屏幕英寸的平方

根据勾股定理 （16X）^2 +（9X）^2=8×8 最后 x 算出的结果为 0.4357

16:9 的 8 英寸屏幕 长度（单位：英寸）=0.4357×16 =6.9712 宽 =0.4357×9=3.9213

国际计算单位 1 英寸 = 2.54cm

所得出屏幕的长度（单位：厘米）=6.9712×2.54≈17.7cm 宽 =3.9213×2.54≈9.96cm

分辨率：1280×720 宽度约等于 10cm 来计算，720/10 = 72px

分辨率：800×480 由于他们屏幕大小一致（英寸）480/10=48px

得出结论：视觉上的 1cm 的实际像素是有所差距的。

按照设计规则：按 4 的倍数来制定，因此最小图标为 40px（这个结论只是作为推荐使用，在做项目的时候，变数有很多，甲方爸爸就喜欢超级大的，你也没办法，所以还是按照项目来制定）

为了计算这个我还特地的回顾了高中学习的开根号、初中的最大公约数都搬出来了，幸好当时数学还算是个小学霸，哈哈哈~~~

下面展示一下：

谷歌 Android Auto 图标大小规范

基础的图标：主图标：44px 次要图标：36px 第三方图标：24px

头像的使用：小头像：56px 中头像：76px 大头像：96px

百度车载生态开放平台下载了他们组件库，进行了研究。

基础为图标：48px 次要图标 40px（最小图标尺寸）

这边还要说一下，对于大图标的尺寸设定，会有很多尺寸 icon，后续我还会在输出关于车载图标详细的内容，敬请关注吧。

3. 图标的点击区域

图标触摸区域分为驾驶中使用和静止中使用

例如说驾驶中需要调节空调的内外循环，原本老车机的硬按键替换成了屏幕中的按钮，原有的硬按键已经通过长期使用有了记忆性，有触感并且操作硬按键大小适中，所以在操作中减少了操作时间，降低了危险系数。新能源汽车在设计的时候可以通过增大触摸区域降低误操作、无法点击使得驾驶员视野长时间远离方向盘的情况，研究表明视野超过 2 秒以上停留，就会存在危险。

静止使用例如：在设置页面中调节车辆设置中的属性，巡航模式、电动尾门打开百分比的调节等等。

谷歌制定触摸区域的规则

最小触摸目标尺寸为 76 x 76px，需要在单个图标设计基础上再额外增加一块触摸区域，易于驾驶中可操作，在静止使用的话，我们可以遵循苹果设计规范中最小手指触摸的区域为 44x44px

这是我根据实际项目并在车内进行路测（路测：驾驶中测试）中得出结论。

还有一种特殊情况：文字+图标组合点击区域，在 icon 很小的时候也可以考虑将文字也组合一起，增大点击区域

4. 图标设计的统一规则：

• 统一风格
• 统一光源
• 统一线条粗细
• 统一圆角/直角
• 统一倾斜角度
• 断点的距离、大小统一

5. 最后最一个小插曲：命名的规范

之前经常有小伙伴问我，落地项目的 icon 切图命名规范怎么制作？就拿我之前做的风格稿首页来说，首页音乐卡片中的“下一首”的图标如何命名。

首先分析这个 icon 在哪个页面当中 or 用在哪里，接下来就是他的属性是什么 icon 还是 button，其次就是这个 icon 代表什么，这个 icon 的大小，因为在一个系统里面会有重复功能 icon，所以是有必要增加大小（这块内容是选填项），最后在增加这个 icon 是处于什么状态下，状态分为：禁用、常态、按下、选中

最后呈现：首页_音乐_下一首_常态 ，对接开发应该是翻译成英文。

有时候英文命名也可以用缩写比如设置：setting 你直接可以写成 set icon ic button bt（如果全局使用就使用   All）

总结

听完小米的发布会，是我触动较深的一次，视频弹幕中满屏刷着““干翻特斯拉”，小米造车一诞生就背负着全民的期望，创始人雷军已经功成名就，但还是愿意押上全部的声誉和未来十年的人生，全力 all in，我心中只有敬意，祝小米早日造车成功，“干翻特斯拉”，我们设计师也愿意和这个行业赌一次，行业深耕下去，砥砺前行。

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

文章来源：优设  作者：设计界的影帝

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

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

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

What 是什么

简介：「输入线索」是指用示例输入或说明文本以占位符（Placeholder）的形式显示在输入框中，以帮助用户理解需要输入的内容，或给出相关线索的一种设计方式。

例子：  在 Ant Design 输入框组件 的示例中（如下图），我们可以看到「输入线索」可以更好地帮助界面说明输入字段的内容或解释输入字段的功能。

Why 为什么

「输入线索」这种设计模式可以让界面不言自明。由于输入线索的内容位于用户输入的位置，因此用户往往不会忽略这个信息。

对比：「输入线索」VS「输入说明」

「输入说明」与「输入线索」都是辅助用户输入的设计模式，这些模式可以帮助用户明确输入信息的内容形式。

那么这两种模式有什么差异性呢？

使用「输入说明」这种模式时，快速浏览用户界面的用户可能会轻易地忽略说明信息，因为用户的目标是尽可能快地完成表单，然后进入下一步操作（虽然有的场景下这也是其中一个设计目标，但在这里不讨论）。因此，过多的文本说明也会给用户带来较大的心智负担。

Google 注册账号页是结合使用「输入说明」与「输入线索」的一个典型案例。通过使用「输入线索」告诉用户需要填写的内容，通过「输入说明」来补充填写信息的相应意图，进而使得用户可以清晰地意识到需要填写什么，并输入相应信息。

When 什么时候使用

用户可能不一定清楚需要在输入框中输入的内容。在设计上，你可能不希望在输入框附近上添加更多的字，造成视觉压迫。还有一种情况，如果界面空间有限，无法使用「输入说明」时，也可以考虑使用「输入线索」。当出现下拉菜单或者组合输入框时，往往需要配合该模式进行使用。

使用条件

· 输入框要求输入的内容可能不容易让人马上理解；

· 设计上不希望在其他地方补充新的内容；

· 可以承载文本的输入空间可能没有太多；

· 配合下拉菜单或者组合输入框使用；

How 如何使用

1. 选择适当的提示文本

· 对于下拉列表，使用 “选择”、“选取”等单词，英文使用 Select Choose 或者 Pick 等；

· 对于文本输入框，使用“输入”等单词，英文使用 Type 或 Enter；

· 尽量使用祈使句，以动词短语开头；

· 以描述输入内容的名词结尾，例如“选择状态”，“在此处输入消息”或“输入患者姓名”等；

2. 提示文本的位置

有关文本提示的位置应该和输入值的位置一致。 比如，提示本身不应该是下拉菜单中的可选值。

Example 案例

案例一：Ant Design Pro 登录功能预览

用户需求：用户登录功能的预览与体验

Ant Design Pro 是一个中后台开发的模板脚手架，其并不提供真实账号登录服务。因此 Ant Design Pro 的开发者为了模拟真实使用环境，提供了一个可正常登录的账号，账号密码分别 user 和 ant.design ，其余情况下用户输入的账号密码均会提示不正确。

在这个场景下，通过将正确的账号密码以输入线索的方式显示在占位符中，巧妙地告诉体验 Ant Design Pro 的用户正确的账号密码。

案例二：163邮箱登录页面

用户需求：登录账号

163邮箱登录页面的账号输入框中的输入线索非常有用。正常用户在看到后缀有 @163.com 时可能并不一定能意识到可以输入手机号码。而通过在占位符中 显示「邮箱账号或手机密码」，高效便捷地提示了用户可以直接输入手机号码进行登录。

案例三：小米账号登录页面

用户需求：输入账号密码

「输入线索」有一种设计上的变体，称为「浮动标签」。因为一般来说，当用户激活输入框时，占位符文本会消失。而「浮动标签」不会消失，通过移动位置和更改大小驻留在界面中。这种设计方式可以使得界面变得简洁、优雅。

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

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

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

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

华为会定期派员工去两个地方做用户研究。第一个地方是华为手机线下门店，这个地方很好理解，通过观察和访谈顾客，能挖掘到不少体验设计需求。另外一个地方我完全没想到是——手机维修中心！来维修手机的用户都是愤怒而且失望，如果员工能体会到这些用户的心境，对产品的设计底线和情感关怀应该会做得更好。

另外一方面，通过数据分析、竞品分析得来的信息，我们不过是依据脑子里已经存在的假设再设计方案验证罢了。有很多信息是未知的盲区，未知的盲区有潜在不可预估的风险，通过用户访谈探索盲区能帮助我们打破固有观念，补齐短板，做出更贴近用户的设计方案。

通过访谈确实得到了想要的信息，也为后来产品优化提供方向。访谈期间发现了一些实用的小技巧，在此分享给各位读者。

技巧 1：通过预访谈修正大纲

我猜设计好访谈大纲的你迫不及待的马上想去访谈用户，但是如何证明现在的访谈大纲的正确的呢？万一设计的问题不对，那自然得到的访谈结论也是错的。所以在设计好访谈大纲后，可以先只预约 1 个用户，或者和目标用户相近的朋友进行一次访谈预演习。通过这次演习找到大纲问题或者访谈中遇到的其他突发情况，对大纲进行修正之后再批量预约用户进行访谈。

也可以把大纲当作一款互联网产品，每一次访谈之后对大纲进行反思迭代，让下一次访谈更好。

技巧 2：寒暄和循循渐进

如果和访谈的用户一开场就单刀直入的提问，可能用户此时刚从其他事情抽身出来，注意力和记忆力都还没进入访谈状态。开场立即提问会让用户懵，因此建议一开场先和用户寒暄，比较轻松的聊一些和产品相关的问题，给访谈热热身。

技巧 3：鼓励用户畅所欲言

中国人讲究和气生财，尤其对陌生人更是客气得很。不敢当面指出你的问题，担心你面子上挂不住或者生气。另外你认为是很重要的细节，用户可能不太在乎。为了从用户言语里得出更多信息，要鼓励用户多说不好的地方，甚至可以卖惨宣称收集不到足够的问题会被老板骂，求用户多吐槽。

技巧 4：不要使用用户不懂的术语

虽然在客户面前说些黑话会让你显得很专业，或者你和同事在公司里有约定的简化术语。但是用户并不懂这些，所以在用户前面收起你身为互联网人的身份气质，好好的说人话来和用户沟通，本身也是在设计真正的用户体验。

技巧 5：多询问曾经的真实经历

越是宽泛和抽象的问题越难回答，不知道该从哪个角度开始讲起。“从场景中寻找痛点”可不能只是嘴上说说的场面话，询问用户曾经的真实经历，就是获得现实的用户使用场景，具体的问题也能让用户回忆起当时的细节，这样你才能从细枝末节中找到痛点。

技巧 6：穿插现场操作，鼓励口述想法

用户访谈是非常消耗时间的方法，好不容易访谈一次就尽量榨干所有价值。建议访谈过程中穿插一些让用户现场操作的小任务，观察用户的现场操作，根据行为分析出体验优化点。同时注意让用户一边操作时一边说出脑中的想法，获取用户的思考过程，更能得到有价值的信息。

技巧 7：不要问封闭式问题

封闭式问题得到的信息很少，而且所有的问题答案都只是你对现有已知信息设置的。如果要获得封闭式问题的答案，不如网上直接发问卷来得效率高呢，在访谈中问这些性价比不高。我们尽可能多问开放式问题，多收集未知的信息。

技巧 8：给用户荣誉感

“垃圾是放错地方的资源”——说明对某些人不重要的信息对另外对人可能非常有价值。用户对访谈中说过的话认为并不是很有意义的信息，但是对于你来说可能就是提升产品体验的高价值问题。

我几乎每次访谈的最后用户都会对我说“我就随便说说，希望能帮到你”，这时候就真诚的告诉用户这些信息很有价值，让用户心中获得访谈的荣誉感，这样可能比给物质奖励让用户更开心。并且荣誉感会激励用户之后再给你反馈更多产品使用问题，持续得到有价值的反馈。

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

文章来源：优设  作者：龙爪槐守望者

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

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

前言

在项目实际开发我们会遇到表格列过多，表格内容过长的困扰，表格数据的展现很不理想，今天我为大家介绍如何结合Datatables 使用表格固定列；

效果展示

1、在屏幕足以展现内容的情况下

2、模拟屏幕过小 或表格列过多的情况

从效果图可以看出，我将左侧两列和右侧一列 作为固定列 ，中间内容可拖动显示

开始使用

//引入juqery datables fixedColumns 根据各自的样式需求 本人使用的是bootstrap 
<link href="您的资源目录/dataTables.bootstrap.css" rel="stylesheet">
<link href="您的资源目录/fixedColumns.bootstrap.css">
<script src='您的资源目录/jquery.js'></script>
<script src='您的资源目录/jquery.dataTables.min.js'></script>
<script src='您的资源目录/dataTable.fixedColumns.js'></script> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

初始化datatables

//异步请求获取表格渲染数据
var dataTable;
$(function () {
    dataTable = $('#表格ID')..DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {url:  "您的请求URL"},
            "scrollX": true,
            "autoWidth": true,
            "columns": [
            ...
            ]
    });
}) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

初始化fixedColumns

new $.fn.dataTable.FixedColumns(dataTable,{
    "iLeftColumns":2,  //开启左侧两列固定
    "iRightColumns":1, //开启右侧1列固定
    "drawCallback": function(){
        //重绘的回调执行
    }
}); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

原理解析

在datableas 初始化后 根据设定的开启固定列，获取datables 对应表格数据 进行复制，然后采用position: absolute 在原表格 上加多一层固定列表格的展现，感兴趣的朋友可以浏览器DEBUG查阅；

出现的问题

1、固定列出现滚动条

出现这个问题是 dataTable.fixedColumns.js 插件计算固定列宽的问题，可以在源码进行修改；或者在fixedColumns.js 重绘成功后回调中执行

$(".DTFC_Cloned").css("width","auto"); 


    

        1
    

2、采用ICheck 插件无法点击 和 勾选问题

原因：因为异步加载数据的问题 ，我们每次在datables重绘的回调函数中 进行ICheck 再次初始化；
而dataTable.fixedColumns.js 是 datables 初始化完成后才执行的 ，上文也提到固定列实现的原理，其复制了固定列数据 position: absolute，那么展现给我们看到的是已经初始化的ICheck ，真正可以勾选点击的其实在下一层；

解决思路：在fixedColumns.js 重绘成功后回调中初始化ICheck； 再重新注册全选 和反选事件；

//朋友们可以根据需求 自定定义自己的初始化和事件注册
new $.fn.dataTable.FixedColumns(dataTable,{
    "iLeftColumns":2,
    "iRightColumns":1,
    "drawCallback": function(){
        //重绘Icheck 这里是我封装的初始化方法
        iCheckInitFunction();
        //重新设置全选事件 这里是我全选/反选的注册事件
        TableiCheck(".DTFC_Cloned thead tr th input.i-checks", ".DTFC_Cloned tbody tr td input.i-checks");
    }
}); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

修复版的 dataTable.fixedColumns.js 下载

大家可以选择适合自己的样式

默认展开

    

        // 所有节点加载完成后触发
    

    

        $('#jstree1').on("ready.jstree", function(e, data) {
    

    

        
    

    

        // 默认选择节点
    

    

        $('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);
    

    

        
    

    

        // 默认展开/打开全部
    

    

        $('#jstree1').jstree().open_all();
    

    

        
    

    

        });
    

    

        
    

    

        // 选择更改时触发
    

    

        $('#jstree1').on("changed.jstree", function(e, data) {
    

    

        console.log(data.selected);
    

    

        });
    

默认收起

    

        
    

    

        // 所有节点加载完成后触发
    

    

        $('#jstree1').on("ready.jstree", function(e, data) {
    

    

        
    

    

        // 默认选择节点
    

    

        $('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);
    

    

        
    

    

        // 默认关闭/收起宣布
    

    

        $('#jstree2').jstree().close_all();
    

    

        
    

    

        });
    

    

        
    

    

        // 选择更改时触发
    

    

        $('#jstree1').on("changed.jstree", function(e, data) {
    

    

        console.log(data.selected);
    

    

        });
        

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

        

             
        

        

            


        

        

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

        

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

        

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