每种类型的网格都有不同的用途，通过了解不同的网格类型帮助我们在设计的时候匹配最合适的网格。

1、 基线网格

基线网格是由等距水平线组成的密集网格，用于确定文本的位置。基线网格通常与分栏网格结合使用，以确保每列中的文本在界面上均匀对齐。

基线网格最简单的示例是一张划线纸，准确清晰地展示设计元素的位置。

2、单栏网格

3、分栏网格

这是日常设计中最常使用的网格类型，将一个页面拆分成多个垂直区域，然后将对象与之对齐。

报纸和杂志的排版设计、网页和APP的设计都会广泛使用分栏网格。

4、模块化网格

5、像素网格

在用Photoshop作图时，不断放大画布，会看到画布上有密集的像素网格出现。

数字屏幕是由数百万像素的微观网格组成的，为了设计的准确性，设计师需要逐个像素地编辑图像，同时也练就了“像素眼”。小到一个icon，大到整个网页，都可以借助像素网格来完成。

6、层级网格

层级网格是指按照内容的重要性来组织界面元素，让用户能够按照主次的层级顺序浏览界面。层级网格主要用在网页设计中，形式比较自由形式，大多数是结合网页的内容来确定。

将界面中的内容进行优先级排序，按照层级结构清晰展示内容的优先级，为产品提效。

二、在UX/UI中使用网格的5个技巧

在工作中尝试使用网格系统时，下面的关键要点能帮助我们实现有效、灵活的设计：

1、规划网格与页面的关系

2、不要只使用网格设计

当接到一个全新的需求时，很多设计师习惯以常用的网格和栏宽作为标准开始设计。

3、保持设计元素在网格内

网格中每一栏之间都会有间距作为分隔，当页面中的文本和图形跨越多栏时，需要保持内容在网格每一栏的边缘，避免将元素放到间距的边缘。

4、不要忘记基线对齐

确保基于列的设计中的所有文本遵循一致的基线，这样可以大大改善页面的和谐感和组织感。

5、考虑使用8pt网格进行设计

我们的设计必须能保证在各种设备和屏幕分辨率下都能工作并且看起来很清晰。使用基数的倍数的尺寸和间距有助于使设计过渡清晰和系统化。

最后

以上是在UX/UI设计中常见的6种网格类型和5个技巧，希望通过这些内容能让你对网格系统的应用有更深的认识。

作者：Clippp

转载请注明：学UI网》在UX/UI设计中使用网格系统的5个技巧

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

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

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

我们将产品划分为三个阶段：

1.0：满足了以产品为中心的设计，达成生产售卖通顺闭环；

2.0：满足了以消费者为中心的设计，考虑更多用户体验；

 3.0：加入以人文中心主义的设计，人文感官品牌情怀社区。

那么明确了我们本次升级的方向后，制定了整个产品的框架，底层加入了人文感官品牌情怀的相关因素，再应用到我们现有的业务上，在协同上进行高效的链接，产品到设计，设计与设计，设计到开发。最终形成了我们的前台展现页面。

根据我们的用户画像以及多轮访谈调研， 得知用户的相关正负情绪。生活当中家务工作的角色分配问题，一直是经常出现的一个场景。用户希望通过我们的产品服务，来提升生活的幸福指数！

在以此为前提的背景下，用户希望我们是专业标准化的、省心高效的、温暖温馨的、舒适的、具有亲和力的等等。最终都会期望以更有品质的生活而结尾，那么“品质生活”即为我们需要来传递给用户的情感。

 那么品质生活是什么呢？

其实用户对我们的要求是一款提升生活品质及愉悦感的产品，而非工具。

综上所述，我们确定了以品质生活成为我们的本次设计语言升级的slogan，再结合业务的自身特性，我们进行了详细的拆分后提炼出了以下相关关键词，来满足用户更多的情感诉求。

干净明亮 

居住环境的洁净会带给人更多舒适惬意的感受。首先对品牌色进行了升级，使其更鲜明。也延展与其相匹配的辅助色来打造出完善的色彩体系。

光 

专业 

高效 

用户携带诉求而来，那么减少用户感到麻烦的情绪，对产品的识别清晰、操作便捷提升是最直接影响的。

亲和力 

服务行业需必备的能力，微笑服务也成为了我们的业务情感透传标准。提炼出微笑符号结合我们的实际场景进行运用！

慢生活… 

在对用户的相关情感诉求结合业务进行了落地后，对效率类设计原则也进行了相应的升级。

应用整体架构也是一个应用对外呈现的基础结构，是系统风格的体现形式之一，除了特殊设计诉求，通常情况下，应用需要使用通用的应用架构来保持系统的一致性和用户操作的易用性。

布局不是静态固定的，栅格系统在一个应用内的重要程度不言而喻。我们设定了以4dp / 4pt为基数的栅格系统。

文本作为产品中用户获取信息的主要信息载体，字号大小和字重决定了信息的层级和主次关系。对字号、字重、行高以及组合字体进行了设定，为不同的场景创造了层级分明以及清晰的信息读取体验。

针对页面内容区域的通用元素间距进行了分类。设计师结合具体场景的情况，来调用间距参数的适配逻辑。以此来结合栅格系统进行更好的适应相关视觉元素符号的对应变化。

 圆角参数  

结合业务属性保证亲和力的透传，在产品尽量避免出现锐角图形的设计表达手法。故此针对圆角的大小也进行了系统级别的定义，进行深度统一管理！

语意原则及动效等，并依据相关设计原则产出了组件库。

在多元化的产品时代，时刻关注并满足用户的情绪，是产品能脱颖而出的关键！在建立设计语言手册时从提升用户体验和满足商业价值整体考虑，挖掘流程当中线上线下的触点，多维度思考并总结落地，深度传递品牌理念。

设计语言手册更多时候是一个相对宽泛的阈值，并非组件的固定值，在某些业务场景下能为用户带来增值体验或较高商业价值时，可以被打破。最后，核心就是在搭建语言手册时应思考更多“为什么”这么做！

作者：58UXD

转载请注明：学UI网》如何通过设计语言手册来传递品牌理念！

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

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

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

作者：程鑫

转载请注明：学UI网》中后台产品的产研协同提效调研

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

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

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

现在很多公司面试UI都会面试交互能力，问你设计方案的推导、怎么量化、怎么分析、怎么做深度的设计思考等等，所以呢大部分设计师在本身视觉能力没那么强的情况下，无奈在作品包装中加入了推导分析的文字部分，结果，问题又来了，这些分析过程和推导其实是经不起推敲的，因为往往在实际工作中，大部分设计师没有真的运用过这些方法、数据，靠的是参考市面上的作品集从而包装出来，也就经不起面试官的深问。最后作品集也成为了四不像的结果。

那么如果我们的设计基本功没那么强，但又想展示自己的思维能力该怎么做呢？我在这里并不是教大家怎么去编和套设计流程的框架和理论，而是希望大家能明白，如果要放你的思维过程，应该怎么正确的去放，如果真的没做过，我建议不要去硬套，很容易漏洞百出。

设计师的定位和价值

一个项目的推导过程首先要明确，你在项目中扮演的是什么角色，你在整个项目中的价值是什么，是独立负责？还是某一个环节的执行者？我相信很多同学都想把自己包装成一个独立负责人，恨不得整个产品从立项到调研到分析到执行都一个人包揽，但你越这样去包装，作品集内容就越零散。

作品集主要展示的是你个人的能力，而不是让你去描述和介绍你的产品。很多同学都变成了后者，比如先描述项目背景、产品的用户群体是什么、每个功能模块分别是什么功能…..这样的方式去包装作品真的味同嚼蜡，没体现能力不说，还很枯燥。

一、讲故事

其实我们可以用讲故事的框架，来整理项目流程以及展示你在项目中的价值。在上学的时候老师会跟我们说，要讲清楚一件事，需要分别理清楚三个阶段，分别是：起因、经过、结果。所以我们现在要讲一件什么事呢？我们要讲的是，你是如何通过设计手段帮助产品/用户解决问题的。

那么我们就可以用起因、经过、结果三个阶段来阐述我们是怎么解决问题的，把这个逻辑给梳理出来。

1、起因

起因包含了

1.有哪些问题/机会

2.你是怎么发现问题的（为什么要做这个项目）

3.导致问题出现的原因是什么

比如我举个例子，我发现我家厕所外墙开始掉粉脱落，甚至时不时的浴室柜下方会流出一些水，所以我怀疑是不是哪里漏水了，在这里我用的是观察法，用观察法很直观的看到了问题。接下来我要去找到问题的原因，到底是什么原因导致了外墙掉粉脱落以及渗水的问题。于是我先自己做了一个假设，是不是埋在地下的水管破了？因为之前有用过腐蚀性很强的通下水道的药剂，但是这个原因被我排除了，因为如果水管漏水那么就会一直漏，而不是间歇性的出水。那还有可能是什么原因呢？浴室柜中下水管堵塞导致水流到了没做美缝的缝隙中吗？还是楼上漏水渗下来了？

最后经过多个原因的排除，问题找到了，是由于楼上确实漏水以及淋浴间下水不畅长期积水导致水从下水管口子边上的缝隙流了过去，两个原因。

所以我们再回过头来看，作品包装中起因应该说明哪些事项：

1.1和2可以合并在一起写，比如通过xx方法我们找到了目前产品中存在的问题，也可以写我们找到了xxx问题，是由于我们用了xxx方法。

2、你是怎么发现你产品中存在的问题的？

是自我经验的观察判断？还是通过数据分析找到的某个现象（比如一个板块的点击率在逐月下降）还是通过对用户访谈或者体验地图找到了某些体验问题？你得采用一些方法，越客观越好，比如很多同学在找问题的时候总会用一些比较宽泛的修辞来描述：首页结构不合理、层次不清晰、体验较差，所以看到这样的描述，我就想问，那么具体不合理、不清晰、体验较差的点在哪里呢？为什么你觉得不合理、不清晰、体验较差？是你的主观感受？还是数据表现？还是客户的体验？你得证明出来。所以问题的来源是很多的，有的是你专业经验的判断，有的是用户的反馈，有的是数据的表现，都不一样。

3、导致问题出现的原因是什么？比如很多同学做改版，改版原因他们就写：结构不合理、层次不清晰、体验较差…..这个是不对的，改版原因应该是，由什么具体事件，导致的结构不合理、层次不清晰、体验较差，比如通过对用户在支付任务流程中的数据表现，我发现经常有用户在支付流程中跳失，导致转化率下降，因此我们调研访谈了10个在支付流程中跳失的用户，其中8个用户在准备支付的时候找不到编辑收货地址的功能，于是他们放弃了这次支付，这个问题凸显的就是核心功能没有满足用户预期，有效性差。至于样本量的问题我就不展开了。

很多同学在第一阶段会放很多产品的一些市场研究、定位，这些其实一点用也没有，雷声大雨点小，一开始切入点很大，结果这些点对描述你的设计能力没有任何帮助，并且在后面的设计方案和策略中也完全不能体现出来有什么关联。不如聚焦一点，针对问题直接进行展开。

小结一下，起因包含了3个问题，这三个问题可以通过几种方法来解答：

1.你是怎么发现问题的（经验判断法、渠道反馈法、用户调研法、数据分析法、可用性测试…..）

2.有哪些问题（卡片分类法、kano模型、价值分析法……）

3.导致问题出现的原因是什么（经验判断法、用户访谈、观察推测……）

二、经过

这个阶段就是用来体现你是怎么解决问题的，这里我们就要来讲到解决问题的策略和逻辑了。诸葛亮草船借箭大家都听说过吧，这个事件的问题在于缺箭，为什么会缺箭呢？原因是没有足够的时间和材料来制作那么多箭矢，要解决这个问题怎么办呢？招募更多的士兵？收集更多的材料？采用缓和之计争取时间？显然这些策略是无效的，那怎么办？内部不行，只能靠外部来解决，于是就有了草船借箭。

再举个例子，这两天有点头痛（问题），医生说头痛可能有多种因素造成的，例如睡眠不好、颈椎有问题、受凉、压力大等等（原因），所以为了解决这个问题，我就可以有几个不同的策略，如果是睡眠导致的，那么我就通过改善睡眠质量来解决，如果是颈椎导致的，那么我可以去找中医做一下推拿，这些都是解决问题的策略。

所以在经过阶段你必须讲明白你是怎么选择一种合适的策略的。举个例子，比如有一个新的电商产品上线了，并合作了一些大品牌，但是我们发现这个品牌的销量还不如一些不知名的品牌来的高（问题），于是我们通过第一步的研究起因，发现用户之所以不买单，是因为他们觉得这些大品牌在你们平台卖的是不是假货（原因）。那么为了解决这个问题，我们就要研究一下具体的策略，怎么样能够让用户对该品牌产生信赖，而我们又如何才能让用户知道这个品牌是正品呢？

策略1:透出品牌资质和曝光度：告知用户我们有品牌授权的资质

策略2:给予用户更多保障：给用户产品质量的售后保障和检测权利

策略3:让用户提前进行体验：可以给部分用户试用

经过分析以及成本权衡，策略2和3实施起来较为困难，成本高，于是策略1是一个比较好的选择。那么具体的方案就要到第三阶段来呈现了。

再举个例子，抖音大家都有用过吧，在之前的老本版中，有用户想查看当前视频的上下集，非常不方便（问题），因为需要点击或者侧滑进入作者首页，然后经过滑动才能找到当前视频的位置（原因）。所以为了解决这个问题，如果你是抖音的设计师，你会有哪些策略呢？

策略1.提高用户查看视频的效率：直接给用户定位到当前视频

策略2.提高作者制作系列视频的便捷性：可以让用户不用进入主页也能看到上下集

所以，小结一下，“经过”这个阶段中找策略我们依然也可以用到一些方法：上瘾模型、aarrr模型…..但是这些模型我是不建议大家在作品集里写的，太形式化了，在大厂的设计流程中，设计策略基本上是通过产品和设计的经验判断给出的，不会真的说是靠这个模型工具而产生输出的策略，比如像我们说“给用户一种温暖的感觉”，这是一个设计目标也可以是一个策略，但它很难说是由哪个方法论或者工具提炼出来的。

三、结果

结果，也就是我们通过设计目标和策略，选择具体的设计方案。在作品集中，设计方案给面试官展示，这其实没那么重要。面试官想看的是什么呢？是你虽然最后给出了a方案，但是在设计过程中，有没有b方案和c方案，最后让你选择a方案的理由是什么，你是怎么思考的，也就是方案的由来。

这个才是我们展示能力的最好表现。以上面的抖音为例，通过策略1，用户点击主页可以直接定位到当前视频的区域以便用户查看上下集，如果直接根据这个策略设计方案是很简单和直观的，只要定好位，并给用户一个当前正在播放哪个视频的状态，做个标签即可。

但是最终方案并不是这样的，而是当用户侧滑或者点击头像后先定位到的是用户主页的头部区域，而在右下方给了一个“刚刚看过”的按钮，点击按钮才会定位到刚刚正在看的视频。

这两个方案显然是有区别的，为什么不直接定位，而要多给出一个“按钮”呢？原因就在于抖音更希望观看者和作者能够更多的产生互动和链接，提高作者的关注率，让观看者先看到作者的主页，再去查看刚才的视频，因为只有你关注了作者，作者才有更多动力去制作视频，同时关注作者也会为你个人的偏好附上一个大的权重，以便于做更精准的推荐。 

这是对于两种方案的解读，所以方案a和方案b，为什么选b不选a，这就是理由。当你的方案呈现在作品集中，面试官就会这么问。

通常在做方案的时候，大家也总会用到竞品分析，竞品分析是一把双刃剑，它可以让你的方案至少不会出大错，也可以让你的方案没有特点，所以这也很考验设计师是怎么将产品业务的定位、用户属性、业务目标的差异化结合到方案中去的。竞品分析大家也很喜欢单独拿出一个板块放在作品集里，咱先不论有没有真实操作过，放在作品集里的内容，一定要有目的性，大家仔细品一下这句话。你想要通过放这块内容告诉面试官什么？是你拿了一堆竞品做了比较和描述，还是说你能够结合自己业务和用户的特性，找到和其他竞品设计差异化的点，最后应用或指导到你的设计方案中去？

结果阶段除了方案的探索、权衡外，还需要进行验证和复盘。虽然咱们花了很大的力气，从发现问题到找到原因，再到定义目标和策略，最后选择方案，但并不意味着最后的结果是好的，因为我们不知道我们的方案到底有没有解决最一开始的问题，你原来头痛，最后选择了吃药，结果吃了一个月，还是没好，那就说明：1.问题原因不对 2.策略有问题 3.药吃错了。所以如果你要以结果为导向，那么最后的验证和复盘不可缺少。那有同学说，我们公司没有数据，没有用户，那我要怎么验证呢？那我劝你好好跟产品或者老板去谈一谈，虽然你想操这个心，但是老板都不在意那也没有办法，但是你在面试的时候需要表达出这样的思维。

总结一下 

再说一下，分析推理部分，不是UI/UX作品集必备，你想做纯视觉包装作品集也可以，但我们要清楚，你应聘的岗位要求是什么，而你的作品集和岗位要求是否能对应起来。现在的一些公司要求都很高，UI和UX都成为了标配要求，所以我们尽可能要把这两块都在作品集里展示出来。有人说，我实在没做过这些东西，让我编也编不出来怎么办？那就从今天起试着开始主动找找产品存在什么问题，然后去解决它，试着走一遍：起因、经过、结果三个阶段，我相信你一定会有收获。 

1、什么是卡片？

早在互联网时代之前，卡片就出现在了我们生活中的方方面面，如名片、不干胶标签、便利贴、会员卡…等，不管是何种类型的卡片，它都将代表着我们现实生活中的某个特定信息。

卡片指的是含有图片或文本信息的容器，它将我们需要的信息归纳在一起、并形成独立的个体，以至于后续被引用到线上界面中，同样具有非常不错的信息归纳效果。

2、互联网中的卡片式设计

卡片本身就是一个完整的信息区块、并同时承载丰富的互动方式。在UI设计中，个性化和美感兼备的卡片式设计具有很强的易用性，它是一个UI设计组件，将标题、文本内容、图形/图片进行整合并模块化，让信息的表达更加直观、操作也更便捷。

卡片式设计之所以能成为当今比较流行的趋势，是因为它能让界面信息更有层次感，从设计、交互、视觉以及用户体验等各方面来看，都有不错的优点。站在用户角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相对来说，学习成本也是极低的。

二、卡片式设计价值

1、结构清晰

卡片在占用屏幕空间较少的情况下能够将不同大小、不同类型的信息内容按逻辑进行分组呈现，使界面结构更加清晰。相比纯粹的留白或分割线，卡片不仅对信息作出了分割，其本身还是一个独立的容器，让归纳组合后的信息能快速突出重点，将复杂内容简单化处理。

卡片式布局整齐简练，清晰的信息结构有助于用户浏览，方便快速找到自己感兴趣的内容，避免用户产生一种费时或感觉内容超长的恐惧感，还能节省更多的时间成本。最常见的就是信息列表、图文混排等，不仅做到了视觉上的美观，也达到了平衡文字及图片强弱的效果。

2、场景拓展

卡片式设计有利于场景拓展，他能在信息不断增/减的情况下、页面依然能组成一个连贯的整体，在视觉上毫无违和感。例如支付宝在头部插入的广告引流入口、淘宝在节假日增加二层楼…等。

3、空间扩展

卡片式设计一度打破了移动端多为纵向操作、原有传统的列表式布局，在空间有限的移动端设备中，还能很好的利用横向空间。将横向滑动区域的最后一个卡片漏出一小部分（若隐若现才是诱惑），不仅能给予用户更多选择与期待，其空间利用率也得到了很好的扩展，在展示更多内容的情况下依然能保持模块的整体性。

4、突出重点

卡片式设计能很好的通过边界衬托出内容的整体性，特别是在电商类产品中的首页头部、瓷片区、营销引流区将其应用到了极致，即便在卡片数量较多的情况下，用户依然能清晰的感知到内容的归属层级以及重要信息。

5、兼容多端

卡片作为一个容器，它可以自由无限的等比缩放，非常适合响应式设计。在手机、iPad、电脑等屏幕尺寸复杂的情况下，通过放大缩小或增减纵向排列数量的方式配合响应式的断点设计，让同一界面在不同设备之间轻易的创造出一致性的视觉体验。

6、易于操作

卡片给人最直观的感觉就是可以操作，它不用箭头、按钮或超链接等引导性的视觉元素提醒，节省了一定的页面空间，还有着更大的操作热区，无需做到精准点击。卡片式设计很容易融入各种交出手势，如单击、双击、长按、拖动、滑动等，为用户提供更多便捷的操作。

7、跳转流畅

卡片可通过缩放的形式充分利用动画进行页面跳转，例如App Store“Today”频道，点击卡片后直接等比放大至全屏，给用户一种还停留在当前页面的错觉，避免了传统的跳转页面而造成的信息割裂感，流畅丝滑的过渡，给用户更自然的交互体验。

三、常见的卡片式设计样式

1、四周留白

这种类型的卡片在UI设计中最为常见，柔和的圆角、边缘阴影以及四周很自然的留白，让内容模块的存在感更加强烈，整个页面信息的层级也更加清晰。

2、悬浮内容之上

悬浮型卡片并非模态弹窗，与其相比，悬浮卡片不需要主动操作触发，可作为临时控件或长期固定显示，并且比模态弹窗能承载更多信息内容，可通过伸缩来定义卡片中的信息数量，或多、或少、或展示、或隐藏，在页面中非常灵活。

例如高德地图首页，搜索框及右侧的功能入口长期悬浮在地图之上，而下方卡片中的内容会随着高度的伸缩自动调节可展示的数量，非常实用。

3、通栏类型

通栏类型的卡片具有更强的视觉阻断，对区分不同的功能模块有不错的效果，不过这种类型只通过页面背景色保留上下边间、且不会过多，不然页面会显得零散、杂乱。

四、卡片适用场景介绍

1、瀑布流

瀑布流主要正针对图片较多、或以图片为主的内容设计，它最大的优点是无需过于在意图片的高度，最大限度的还原原始图片效果。

卡片式设计的瀑布流对信息的组合、包容性更强，不仅能在单屏区域内显示更多内容，同时又将每组信息组合作出了明确的划分，在不破坏页面整体性的基础上也做到了相对独立，如花瓣、Pinterest就是最好的例子。

2、信息流

信息流的展现方式主要以文字、图片或视频内容为主，是一种较长内容的媒介，不管哪种展现方式，其都需要用户耗费较长时间的滑动、浏览来筛查对自己有用的信息。

卡片式设计将信息进行分块处理，通过阻隔的方式快速告知用户每个卡片的核心内容，便于用户在长时间的滑动过程中也能快速识别重要信息。

3、左/右滑动

卡片式左右滑动组合在音乐、视频类产品中用最为广泛，因内容本身就图片居多，也更适合卡片式设计，相比平铺具有更强的层次感，对用户的吸引力较强，尤其最右侧漏出的一小部分内容营造出神秘的感觉，用户会不由自主的想去滑动以求获取更多信息。

4、优惠卡/券

卡/券设计实际是把生活中的实物映射到了UI设计中，通过模拟实物造型设计成卡片样式，有效降低用户的理解成本，并对其有了更直观的感知，真实感尤为强烈。

5、突发事件/临时提醒

对于用户主动触发或系统临时发起的非固定性内容，利用卡片式设计会让信息布局更灵活、视觉更突出，在不影响用户使用的前提下，可出现在任何位置。

6、部分页面头图

卡片式设计可以将个人中心、个人主页、会员等页面中的关键信息进行概括，并在头部位置进行重点突出，不仅让原本单个的内容形成整体，还能营造出沉浸式的氛围。

五、卡片式设计原则及小技巧

1、一致性原则

为了保持界面设计的一致性，需要将卡片样式纳入设计规范，例如卡片是否通栏、是否需要设定圆角半径、不同场景中卡片大小的划分界限以及圆角数值的确定等，大部分情况下都需要遵循设计规范。

2、功能定位决定卡片形式

在同一产品中，虽然要遵循设计规范以确保一致性的视觉效果，但并非所有页面都适合卡片式设计。

那么，到底是否需要采用卡片形式、使用哪种卡片类型？这还得根据页面内容属性及目标定位来决定。例如社交产品中的临时会话列表、动态圈子使用卡片形式，很浪费纵向空间、甚至会显得很“鸡肋”，用分隔线或间距留白来区分信息组显然更合适；但对于电商类型的产品，利用卡片将不同的商品分隔后又进行归纳，会更容易识别，信息的可读性也会更强。

3、避免过多卡片嵌套

卡片式设计本身就包含了容器与背景的层级表现，为了保持内容的正常展示与用户浏览体验，避免在卡片中嵌套多层卡片，以免信息层级杂/乱而增加用户的视觉负担。

如果再同一卡片中需要再次区分多个信息组，可利用间距留白、分割线或浅色背景等元素属性来区分，依然能达到想要的效果。

4、合理利用横向空间

因为卡片内、外的双向间距留白，在空间有限的移动端设备中，横向空间利用率较低，因此除了合理的减小左右间距外，还可以适当利用左右滑动来扩充横向隐性空间。

例如淘票票首页，在1.5屏的范围内，几乎每个模块都能横向滑动查看更多内容，从用户体验角度出发，这是纵向空间无法比拟的。

5、降低纵向空间的浪费

卡片式设计不是目的，其主要是用来更好的区分信息层级、提升用户浏览体验，因为卡片要作为独立空间的存在，必定会增加上下间距而导致页面拉长，因此，如无必要，不必盲目采用卡片式设计。

例如美团APP的「首页、电商、购物车、我的」4大主功能页面都使用了卡片形式，而「消息」页则采用分割线进行信息分组，试想一下，如果为了统一规范而使用卡片，不仅造成很强的割裂感、还会极大的浪费纵向空间。

6、长文表达不适合卡片

这点不用多说，新闻资讯类产品的内容详情页就是最好的证明，不管其他页面是否采用卡片形式，但详情页并不会跟随形式，一方面可以让同屏展示更多内容、增加空间利用率，另一方面可减少无关元素对用户产生的干扰、给予沉浸式的浏览体验。

7、突出一个核心内容

很多时候，我们总会听到PM说这个很重要、那个也很重要，都需要突出一点，殊不知当什么都突出了也说明什么都没有突出。在单个卡片中，组始终牢记这个准则：一次只突出一个核心信息，以便于用户快速、精准捕捉，切记不可贪多。

六、结语

卡片式设计之所有能快速流行起来且经久不衰， 其主要得益于自身的灵活性，尤其是在跨设备、跨屏幕上有着纯天然的优势，能忽略设备的差异给用户提供更好的服务。卡片并不是简单的样式设计，它是一种自由布局的设计语言，通过多种方式的信息组合、结合丰富的交互操作，给用户创造出极致的使用体验。

信息的呈现方式虽有不同，但最终的目的都是为了服务于内容，卡片式设计只是其中的一种形式而已，在设计过程中，我们需要根据内容结合实际情况作出合理的判断，切勿拘泥于形式而忽略内容本身的重要性。

任何设计风格及展现形式都有可能成为历史，卡片式设计也不会例外，但绝对不是这么快就结束，它依然值得我们去深究，力求打造更好的信息布局、更舒适的用户体验。

原文地址：能量眼球

作者：大漠飞鹰CYSJ

转载请注明：学UI网》卡片式设计 | 掌握这些技法，快速提升界面效果！

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

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

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

一、底部标签栏主题化设计

1、底部标签栏图标主题

在不改动结构的情况下，替换底部标签栏图标是最方便的形式。通过主题化的图标也非常容易传递氛围，无论是在节日庆典、购物季、主题活动等场景中，这个形式都是最直观的表达之一。

比如优酷 APP 在中秋节的时候，就将底部标签栏图标替换为各式各样的月饼造型，主题营造也是非常的明显。将原本的图标造型融入到月饼图案中，镶嵌图案的设计非常巧妙，不仅保留原本的识别特征，也强化了主题氛围感。

除了在图标造型上面发挥以外，也可以将主题文案融入到设计中，这也是较为直接的表现形式。作为特定主题来说一目了然，需要把控主题文案数量。

2、底部标签栏背景层

底部标签栏的设计中，除了通过图标设计附和主题之外，也可以在背景层进行主题氛围营造。由于底部属于操作频繁区，背景层的设计不能过于抢眼，容易干扰功能的识别与操作。比如前段时间抖音 APP 将底部标签栏背景层进行主题营造的时候，在黑色层上面运用的色调比较深一些，与原本黑色的沉浸式体验有差异，在白底上面呈现效果还可以。

没过多久抖音设计团队便进行了更新，压暗了背景元素的色调，弱化了视觉感。更符合原本的感官体验习惯，也能强化主题感。

除了抖音以外，小红书 APP 前段时间也在底部标签栏背景层上面进行了营造。如果营造面积比较大的话，在无图标形式（纯文字版底部标签栏）上面比较适合。如果带有图标的话，适合做局部强化。

二、顶部视觉区强化主题感

顶部视觉区包含状态栏、导航栏和顶部内容区域，通常是白底、灰底、品牌色底和运营主题背景等为主。也是强化视觉感的常见区域，作为营造主题氛围来说也是非常好的选择。

该区域不仅可以作为功能性活动入口，也能在特殊时间段作为氛围营造。很多产品都会在顶部视觉区域做应变处理，满足多场景的需求发挥。

顶部视觉区的强化也是增强页面感官体验的方式之一，除了静态背景的营造以外，也可以使用动态或者流体渐变等形式。

三、金刚区图标设计主题化

金刚区也是作为主题化设计最常见的区域，由于该区域像百变金刚一样，较强的灵活性方便元素替换和重组。

1、图标主题化

在一些特定主题日活动中，可以将金刚区图标替换为带有主题元素的设计，以此增强活动氛围。通常是阶段性时间内展示，可以是图标造型层面主题化，也可以是主题文案镶嵌在图标造型中，灵活性相对比较高。

2、局部动效化表达

除了整体金刚区变动以外，也可以在局部图标上进行设计发挥，这样带来的干扰性比较低。通常是以图标微动效为主，以此来突出个别功能和活动主题等。不适合过度动效，容易互相干扰，适合局部动效化表达，突出局部内容的关注度。

金刚区作为曝光度较高的区域，经常作为流量分发的关键场景，主题化发挥也是非常具备灵活性的。

小结

产品设计除了常规性的视觉升级和功能优化以外，主题化设计也是至关重要的，可以让用户时刻感受产品的变动。一成不变的体验使用时间长了也会麻木，结合节日庆典和一些主题活动进行视觉呈现，可以在感官体验层面得到提升。

本文观点属于个人经验总结，不足之处欢迎大家补充，我们互相进步。

作者：黑马青年

转载请注明：学UI网》UI 场景中常见的 3 个主题化区域

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

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

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

一、设计一个开放的圆

圆是最完美的图形，所以把很多东西设计成圆形都会很好看，logo也一样，但如果设计成一个封闭的圆，可能会给人不够灵活、缺少变化的感觉，所以，我们可以尝试把logo设计成一个开放的圆，即只要一个半封闭状态的圆，或者是设计一个不完整的圆，比如下面这些案例：

▲ 由于这种logo属于半封闭的图形，所以也比较容易处理成正负图形。

把logo设计成一个开放的圆有以下几个好处:

❶ 视觉平衡。因为圆形本身是对称图形；

❷ 视觉聚焦。圆形会让人的视觉往中心集中；

❸ 有设计感。因为通常把一个图形设计成圆形都需要简化和规范，这会增加图形的设计感。

示例一

几年前我接触了一个品牌名称首字母为“s”的电子公司，也用这种方式做了一个logo方案，字母S加上圆。在下面的两种组合方式中，很明显第二个更开放、更有设计感一些。

但仅仅如此肯定还不行，一是这个S太普通，二是图形没有经过规范，所以我在草图上尝试了几个方向，最终选择了下图来执行，简单、抽象，在感性的柔和中夹杂着一点理性的坚硬。

对于这种简约风的几何图形，通常都是通过采用圆形裁剪来制作，这样会更快捷、也更严谨，在草图的基础上通过多次调整，最终确定了如下图的辅助线(如果你的草图不是很规范，那么就不必太遵循草图)。

通过这些辅助线我们就能得到中间这个比较规范的“S”图形。

运用AI中的路径查找器中的工具，我们很快就能得到如下图形，填上颜色这个开放的圆形logo就做完了。

在最终的图形中，我们除了能看到圆和S以外，我们甚至还能看到握手和循环图形，这些对于企业来说都是非常好的寓意，这也为我们写标志说明提供了一些不错的思路和依据。

二、塑造矛盾空间

矛盾空间是一种在三维世界中并不存在的二维图像，矛盾空间的形成通常是利用视点的转换和交替，在二维的平面上表现了三维的立体形态，我们熟知的埃舍尔就是这个领域的艺术大师。

这种手法也常常被用在logo设计中。

使用塑造矛盾空间设计的logo具有以下几个好处:

❶ 有趣。带有视觉欺骗效果的logo会让人忍不住想多看几眼；

❷ 富有艺术效果和创意。设计这样的logo需要一定的空间感和想象力；

❸ 具有良好的寓意。比如无限、无止尽、可持续等。

示例二

我的一个朋友开了一家装饰艺术品工作室，名字叫首工艺场，英文名为：First Technical Field，于是委托我设计一个logo，他是这样说的：我没什么要求，只要简单、大气、好看、现代、独特、富有艺术气息就好了，真的，我没什么要求。”

这个logo其实并不好做，老实说，我当时也没啥思路，于是我用品牌英文名的首字母在画纸上随意捣鼓，天知道我画了多少稿，终于我发现用两个字母F左右对称排列，中间形成的空间刚好可以加入字母T。

这个图形让我想到了曾经看过的一件矛盾空间作品。

纯二维的效果过于普通，我觉得可以尝试在此基础上加入矛盾空间效果，这样会更符合设计需求，于是得到了下面这个图形。

最后，在AI中用矩形工具进行规范制图，于是就得到了下面这个矛盾空间logo图形，客户表示非常满意，毕竟他给的实在太少了。

三、立体渐变

即通过渐变色使图形呈现出立体效果，这样的logo也非常多，并且在前些年很流行。

虽然现在logo设计的大趋势是扁平风，但是仍有不少设计师和客户青睐这种立体渐变风，比如近两年才面世的北京冬奥会logo、IE浏览器新logo等等。

因为这种风格的logo其优势也是显而易见的，比如:

❶ 美观。这类图形既有细腻的颜色变化，又有层次感，很容易得到惊艳的视觉效果；

❷ 有很强的品质感。这种图形通常都需要倚仗曲线，再加之渐变色和立体效果，所以细节会比较丰富；

❸ 视觉冲击力强。丰富的颜色变化和对比关系，可以大大加强图形的视觉冲击力。

示例三

第三个客户是一家名叫东瑞的生物科技有限公司，主要是销售酵素、胶原蛋白之类的产品，logo设计要求简单、时尚、能体现行业属性。对于这张logo，比较稳妥的做法还是运用品牌名的首字母来做，由于没有英文名，所以我选择了品牌名拼音的首字母“D”和“R”来做创意组合。

由于字母D是一个完全封闭的图形，所以我想到了用正负形的方式来设计，即把字母R作为D的负形，行得通吗?应该是可以的，因为大写的字母R可以简化成下图效果，与字母D一结合就能得到我们想要的效果。

组合的方式有两种，我个人更喜欢开放的图形，并且我觉得第一种组合方式很普通，造型不是很好看，所以我选择了第二种方向。现在我们开始正式制图。

第一步：在AI中用矩形工具画一个正方形，然后用直接选取工具把右边的两个直角拉成圆角，拉到最大。

第二步：把描边加粗到一个比较合适的效果，主要考虑字母D的负形大小与描边粗细的比例，是否符合字母R的特点，确定描边粗细以后，将路径扩展外观，使其变成一个轮廓图形，然后把左边的直角也拉成小圆角。柔和一点更符合企业的调性。

第三部：画一个直角梯形对字母D进行裁剪，梯形的宽度和倾斜角度是关键，尽量保证R的识别性和图形的美观性，裁剪完以后得到如下效果。

第四步：把图形的部分转角处也拉成圆角，然后给其填充一个蓝色，到这里基本的造型就做好了。

但是这样的效果还是有点过于普通，也体现不出行业特性，于是我想到了添加立体渐变效果。

第五步：在现有的图形基础上画如下两个圆，我们的目的是要用下图中两条黑色的路径对图形进行裁剪，而这两条路径一定要很自然地融入图形中，所以，画圆要很讲究，依据是找到圆与图形的切点和交叉点，如右图中的四个点。

第六步：在上图基础上用路径查找器里面的工具对进行裁剪、合并等操作得到如下图形，原来的图形被弧线切割成了三部分。

第七步：给图形的三个部分分别填上由浅到深的渐变色，使其呈现出立体效果，考虑到企业的行业属性，我使用了蓝色到青色、绿色到黄色、黄色到橙色三个渐变色，最终效果还可以。

logo图形设计方案合集:

logo设计得太常规容易被客户说没有品质感、体现不出企业或品牌的价值感，所以合理地使用一些技巧是有必要的，这会客户会觉得你的logo设计还是花了一些心思的，看起来比较专业，所谓得套路者得人心，希望这篇文章对你有帮助。

作者：葱爷

转载请注明：学UI网》3个技巧瞬间提升logo设计的价值感

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

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

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

前言概述

百度教育“好诗连连”是一款轻松有趣又别具中国古典美韵的学习平台，在2022年先后荣获设计界三项国际知名大奖：德国红点品牌与传达设计奖、美国Muse Creative Awards 金奖、韩国K-design 设计奖。本文分享设计团队是如何通过精湛的多维设计打造诗词视听盛宴，让用户感受到传承千年的诗词魅力，唤起用户对古典文化的热爱。

一、设计主旨：沉浸式国风视听盛宴，传承诗词文化之美一  唯美意境 诗词悟得到 · 打造沉浸式国风视听盛宴

王勃《滕王阁序》中千古名句 “落霞与孤鹜齐飞，秋水共长天一色” ，勾勒出一幅宁静致远的画面让人动容，中华古诗词之美，含蓄而生动。我们在设计上营造唯美意境，体现诗词的韵味之美。通过提取中国传统文化中的古典色彩及传统纹样、琵琶与古筝的音韵，将传统元素与现代审美融合，重组诗词新国风设计语言，还原诗词意境，构建全新【寓教于乐】的游戏化学习体验，赋予诗词新的文化魅力。

1.视觉语言体系

1.1 从东方古典色中提炼色板

我们从壁画丹青、紫禁红墙中汲取色彩灵感，采用低饱和度、柔和而优雅的配色，使东方色彩美学的悠然、自然与诗意自洽融合；同时还采用山水碧绿中的翠涛、醽醁，红墙中的海天霞、十样锦，壁画中的青鸾、檀唇，构成整个画面中的古典色彩秩序。

1.2  提炼中国风视觉语言符号，形意结合，传情达意

通过借形法、取意法、形意结合法提炼国风元素与图腾、传统文化中寓意吉祥的纹样，传达美好寓意；东方古老的凤凰展翅高飞，指代源远流长的中华文化；乌纱帽与宫殿寓意学业精进、金榜题名；寄情山水与出淤泥而不染的荷花，更为文人雅士所钟爱。

1.3  确立绘画手法

运用类工笔的绘画手法，白描勾线，结合笔墨丹青的晕染，来营造诗词如画卷般的唯美意境。

2. 听觉语言

古代诗歌最早是用来吟唱，它注重声律、音韵、平仄、对仗，讲究韵律和谐、抑扬顿挫；白居易《琵琶行》中描写 “转轴拨弦三两声，未成曲调先有情”，沈约《咏筝》“秦筝吐绝调，玉柱扬清曲” 中描写筝曲抑扬自如，清妙悠扬；在音效的选择上，采用古筝、琵琶的音色来营造古风意境，音符配合点击、滑动、任务完成等反馈，让人沉浸于诗词的氛围中。

二  趣味学习 诗词背得快 · 搭建趣味玩法及激励机制

趣味化游戏机制，基于心流理论设计，解决了诗词学习体验中用户常见的枯燥、挫败的负面体验，构成了诗词知识获取、学习和背诵的完整学习机制。设计了诗词连线、诗词对战、成语填空三种多元游戏模式，加强诗词背诵和相关知识的扎实记忆，让学习更快更有趣。

传承古典诗词文化之美

通过百度教育好诗连连，我们让沉睡在纸质典籍中，以诗词为代表的文化遗产焕发时代光彩与蓬勃生机，鼓励用户学习和感受传承千年的诗词魅力，重新唤起当代年轻用户对传统诗词文化的热爱和理解，也使便捷轻松地获得诗词知识乐趣成为可能。

作者：文教互娱用户体验

转载请注明：学UI网》打造诗词视听盛宴，传承古典文化之美 | 百度教育

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

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

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

用户体验设计首先字面意思是用户+体验。

01 座舱内的用户除了驾驶员还要考虑非驾驶员， 非驾驶员也有多种角色：老人/儿童/青年。

02 体验：用户发生使用操作的感受。

但实际用户体验一定是脱离不了场景的，场景是用户发生行为的一个大环境。

03 考虑场景的时候除了考虑的当下现实场景还有未来场景。

场景案例：充电全屏展示充电信息

场景案例：导航交互体验，先展开详细信息，然后再收起信息

场景案例：蔚来的360泊车系统开启时不能唤醒nomi

而且产品的研发和功能创新，用户的体验都是依据场景体系建立的。所以HMI设计过程当中，场景体系化的建立尤为重要。

二、智能座舱的场景体系化搭建

1、搭建流程

01 场景发掘：竞品分析、用户画像定位、产品定位、用户旅程图

场景发掘首先要把场景和使用的用户做定位，结合实际项目进行用户画像定位，确定场景主题，寻找到目标用户进行实车访谈和拍摄。

02 场景数据细化：网络数据、用户访谈、实车测评数据、常见高频数据

这一步主要是把用户访谈收集上来的数据，进行拆分和细化，然后筛选出有价值的数据进行录入。

用户访谈数据录入到数据库里，产品经理和设计师会针对收集上来的用户反馈，进行痛点/和爽点的挖掘。提出需求解决方案。

03 场景应用设计：原型设计、界面设计

基于场景的应用设计会分为两个步骤、一个是原型设计、一个界面设计、原型设计时我们更多是组内评估、找专家来提供指导性意见，到了界面设计时候除了专家评审、可以做出demo给用户进行测试来获得反馈。

04 场景走查：还原场景

在设计方案产出完成之后，给用户还原到我们发掘的场景去进行走查，根据用户旅程图查看有没有遗漏的用户场景和不同的用户反馈。

2、搭建工具

整个智能座舱的场景体系化搭建需要几个工具，竞品分析、用户画像定位、产品定位、用户旅程图。

用户调研方法有很多，我们需要掌握（调查问卷、用户画像、用户体验地图、用户访谈、焦点小组、）

今天核心介绍使用频率最高的三种用研方法。

2.1 用户旅程图

关注用户在驾驶阶段的行为、方式、心情、痛点、期待。

关键步骤：

① 设定场景、目标、期望（用户画像）

② 确定行为路径

③ 建立核心地图

④ 包装地图

⑤ 绘制故事板

2.2 可用性测试

可用性测试已经成为获得用户反馈的流行手段，主要因为他们上手快，能快速反应出问题。

关键步骤：

① 明确测试目的

② 问卷框架的设计

③ 投放调研问卷

④ 组织测试

⑤ 整理输出结论

2.3 5W+1H法则

5W+1H 是选定的项目、工序或操作，可以从原因(Why)、对象(What)、地点(Where)、人员(Who）、时间（When）、方法(How)等六个面进行思考。

① 原因—立项背景？

② 对象—什么功能？

③ 地点— 什么场景下？

④ 人员–驾驶员？/非驾驶员？

⑤ 时间–什么时机？哪个流程之后？

⑥ 如何–什么方式操作？

三、细化座舱用户体验的三阶段

1、用户体验的三阶段

体验的时间性有三个主要组成成分，及熟悉程度、功能依赖和情感依赖。

1.1 初识体验：

我们在产品使用初期的阶段，都会对产品有个使用预期。例如期望产品能提供一个好的体验，或者怕产生不好的体验。

1.2 使用体验：

使用体验分为两个阶段：使用产品初期和使用产品深度期

进入到车内试驾或者试乘，试驾员和销售除了会让用户体验车机的基础功能外，主要介绍的就是和竞品车型的竞争功能。

产品深度体验期的时候，长期的可用性变得更加重要，而不是最初的易学性。从而产品的实用性成为影响我们整体评估判断的主要因素。

1.3 获得体验：

最后，当我们接受了产品，在我们的日程生活中它参与了我们的社交活动。成为了生活当中的固定解决问题的工具，这个阶段产品体验就具有可识别性了。

2、体验的三条路线

2.1 体验线路是感官线

我们现在座舱内的交互感官有、触感、听感、视觉、嗅觉、语音。用户在人机交互的时候第一时间获得直观感受。

2.2 体验线路是情感线

情感线是诺曼强调感情在塑造体验中的重要性。比如灯光秀、宠物模式、和拟人化的汽车助手。带给用户都是情感上的满足。这些情感构成了与汽车的首次互动体验。

2.3 体验线路的流畅

就像C端和B端一样，我们交互体验的线路效率和流畅程度，能给用户增强驾驶乐趣。或者最大限度减少信息元素的干扰，让驾驶员沉浸在当下。

3、把握用户体验的多样性

3.1 个人价值观的差异

首先个人的因素，因为我们成长的环境不同，造成了对价值观的差异，有的人喜欢刺激新颖的产品，有的人喜欢乏善可陈的产品。

3.2 产品属性问题

第二可能是产品属性的问题，游戏产品带给用户就是不断的快感刺激，工具类型的产品用户使用流程流畅会更好。

3.3 跟随时间线的体重心变化

用户的使用体验对于时间的变化，通过用户旅程图，他们对产品的关注点会产生变化，例如用户刚开始对产品互动中更关注新的功能和刺激的体验。但在使用过一段时间后他们可能不会再关注他的新颖程度，更关注产品的实用性和效率。所以需要我们在不同的使用阶段重新帮助用户提升体验。

原文地址：七酱设计笔记

转载请注明：学UI网》基于智能座舱场景的用户体验设计

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

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

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