前端达人 - 设计每日一贴---北京兰亭妙微/UI设计公司

首页

152024-4

认识“增长设计”

前端达人

一些从产品/运营设计角度对用户侧增量的思考，希望分享对大家能有所帮助。文中如理解有误，欢迎交流指正。

增长设计其实已经不是特别新颖的概念，伴随互联网载体的发展，我们关于用户增长也是在不断的迭代的。

在导入期和成长期，运营手段侧重利益驱动，通过补贴/红包等短平快的推广活动快速获取用户；当产品积累了大量注册用户，进入漫长的成熟期，持续促进用户活跃就成为更加重要的目标。

今天，我们来简单的聊聊什么是“增长设计”，日常的产品/运营设计中，如何利用增长设计做好用户的激活与留存转化。

以往的——“AARRR”增长策略模型

我们先来简单解析下这个模型。

首先第一个环节（Acquisition）：获取用户

简单来说，就是如何让用户发现或接触我们的产品，产品的用户增量，一定是长期且持续的不断的设法获取新用户。

第二个环节（Activation）：用户激活

完成第一步流量获取之后，下一步要做动作的就是激活用户了，因为在现在这个快节奏时代，人们的记忆力太短暂了，关注力也在变弱。而被拉新过来的用户，不见得就能成为是你的用户，所以需要让用户在短时间内产生兴趣并注册使用产品。

第三个环节:（retention ）提高留存

现在流量越来越贵的情况下，好不容易来的流量不好好加以利用简直是浪费，如果用户成功激活之后，使用一次产品之后就流失，那单个用户的成本特太高了，所以为了拉低获客成本，我们就要想办法让用户持续性的来活跃。提升粘性做好留存。

第四个环节：（revenue）商业变现

在完成前三个环节之后，也就是如何让用户付费，让产品和服务产生商业价值和营收。

最后一个环节：（referral）推荐分享

分享推荐，是用户的一种自我传播行为，通常来说就是利用一个事件来吸引用户主动分享，以达到一传十，十传百的效果。社交电商玩的就是这个套路，拼多多直表示：这活我熟，我天天干，比如用邀请多少好友点链接可以提现100现金，砍一刀免费领取奖品等等。

如今的——

“RARRA”增长策略模型

如今的增长模型有何区别？

以 C 端产品为典型

在当下的互联网市场中，大多产品都会有一俩个或多个竞争对手。如果C端用户留存率不佳，用户生命周期不能拉长，就算获客端导入足够的用户量，但用户流失可能也同样的快。因为用户信息获取的渠道变得简单，而且选择变多了。用户很快就会流失或者被吸引到其他竞品上。

所以当下每个产品都开始注重和思考用户留存与培养用户忠诚度的问题，留存逐渐显现出极高的战略地位，因而也就渐渐的出现了以用户留存主导的增长策略。

我们设计师要想所做的用户增长肯定不是去街上发个小广告，去地铁上拿着产品的下载二维码让用户去下载我们的产品，我们设计师着手的设计增长范围还是从用户体验去入手，回归到产品功能设计和体验提升上。

例如，公司现在想要提升某款产品的销量，作为设计师做方案输出的时候肯定不会是建议让公司去请个明星代言来吸引用户下单之类的。

设计师的增长观一定是基于产品本身

，我们所要思考的应该是如何让用户快速认识我们的产品，悉知我们产品的优势和价值，缩短路径下单路径，便利流畅让用户能成交，尽量让用户有优秀的使用体验从而助力用户的数据增长。

-------------------------------------------------------------------------

人是社交型的集合体，包括社交反馈、伙伴关系，甚至是从众和竞争心理。当你看到朋友

晒出某些技能、珍贵的物品或者靓丽的照片，你也会想跟他一样，这一驱动力也反映了我们为什么生来就偏爱与我们有关的人。

举个例子，假设我是一个喜欢阅读的用户。

当我打开微信读书，APP告诉我，作为我的微信好友的“他/她”同样在使用着微信读书，并且他还在阅读当初我看过的“硅谷钢铁侠”这本了解埃隆•马斯克最全面、最真实、最经典读本。

这时你会发现，原来身边有人也对这本书这么感兴趣，从而激发用户对这个微信读书这款产品的认同感。同时这个APP里肯定能找到更多的优秀读物，从而从动力上强化了用户对产品使用行为。

APP内的红包激励手段

——烧钱要烧得明明白白，不同的用户的“精细化烧法”

1.新用户红包：拉新激活

在用户首次接触产品，也就是用户新鲜感最高的时候，新用户的大额红包有利于快速激活用户的注册行为，让新用户快速熟悉使用流程，尽快完成第一单，将新用户尽快转化成有效用户。

2.满减限时红包：用户促活

顾名思义，这类红包具有时效性。要求用户在指定的时间段内使用红包，过期红包则失效。这类赠送的红包目的是给用户低成本薅羊毛的机会，同时制造紧迫感，鼓励并强化用户产生尽快完成购买下单的行为，主要目标就是为了提升产品转化率。

3.会员成长红包：用户粘性

用户以优惠的价格开通会员后，通过平台每月赠送红包从而可以享受更多优惠或者奖励金的形式，让用户每到饭点时就惦记着我还有个红包没用，如果不用就浪费了，从而增加用户的沉默成本，能持续的让用户在固定时间内重复回归产品，而达到保持用户粘性的目的。

关于个性化推荐，提升用户动力。

这里我们主要看一下保险行业。特别是互联网保险，线上产品的销售一定是产品找人，结合场景的方式，保险产品自动找人进行自我营销。推荐保险的意义需要第一时间就被用户所感知到，产品是非常符合他的需求的，这个时候才有可能高效的完成客户转化。

提升用户动力之——游戏化

当产品积累了大量注册用户，进入漫长的成熟期，持续促进用户活跃就成为更加重要的目标，用户对简单的商品宣传（运营活动）容易感到乏味或无法提起持续参与的兴趣，所以更多的会将运营活动包装成一个简单易懂的游戏去俘获用户的芳心。

比如人人都有的支付宝，常见的如：收集，养成，抽奖，种植...等系列游戏化增长玩法是其此阶段的主要运营手段之一，在利益驱动的同时，加强游戏化的趣味体验，取悦用户、制造记忆点，更有利于黏住用户、建立长期忠诚。

游戏化玩法尤其重要的一点就是任务体系，任务奖励可以激励人们采取行动，将用户引导去体验不同的页面，它帮助用户熟悉更多的APP功能和流程。更可以设置分享型的任务，让用户主动传播产生裂变，这既是内容分发最有效的途径，也是拉新促活的低成本实现方法。

-------------------------------------------------------------------------

上面说了做加法，那接下来我们聊聊如何做减法。

绝大数用户刚接触产品或工具时，都会有一部分人选择离开，可能是注册环节、功能指引环节等等，所以在这个阶段对于用户的激活和留存的最好方式就是帮产品做减法

-------------------------------------------------------------------------

当然，增长设计远不止上面分享的这些。比如积分成就体系，完善奖励机制，弹窗引导助推，弱化用户的负面情绪....限于时间原因，今天暂时先分享到这

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件 UI界面设计、能源及监控软件 UI界面设计、气象行业 UI界面设计、轨道交通界面设计、地理信息系统 GIS UI界面设计、航天军工软件 UI界面设计、医疗行业软件 UI界面设计、教育行业软件 UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

作者：7V_Kevin
链接：https://www.zcool.com.cn/article/ZMTYxNjk0NA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(520)

102024-4

设计方法论 I 超全面的页面分割设计指南

前端达人

当你打开一个页面，首先映入眼帘的是丰富多样的内容和信息。如何在有限的空间内，既保证内容的完整性，又让用户能够轻松理解和浏览，这背后的奥秘就在于页面分割。今天，我们就来一起

探讨页面分割的艺术与技巧

，看看它是如何为你的设计增添魅力，提升用户体验的。

在设计中，页面分割不仅仅是一种技术手段，更是一种艺术表现。它如同一位细心的画师，巧妙地运用线条、色彩、空白等元素，

将页面内容划分为一个个清晰、有序的区域。

通过这些分割，用户能够更快速地找到所需信息，更轻松地理解页面内容，从而享受到更加愉悦的阅读体验。

页面分割的魅力在于其

多样性和灵活性

。不同的页面可以采用不同的分割方式，如线条分割、卡片分割、留白分割等，以满足不同的设计需求和用户习惯。同时，页面分割也需要根据内容的实际情况进行合理调整，既要保证信息的完整性，又要避免过度分割带来的混乱感。

在本文中，我们将一起探讨页面分割的原则、技巧和应用实例。我们将学习如何运用不同的分割方式来优化页面布局，提升用户体验。同时，我们还将分享一些成功的页面分割案例，以激发你的设计灵感，为你的界面设计注入新的活力。

分享目录：

一、分割的常见样式

二、线性分割

三、卡片分割

四、留白分割

五、总结

线性分割：

通过使用线条来划分页面的不同区域，以达到组织内容、引导用户视线和提升整体美观度的目的。这种分割方式简单明了，能够清晰地展现出页面内容的层次和结构。

卡片分割：

卡片式设计是一种流行的界面分割方法，通过将内容划分为独立的卡片或区块，使用户能够更清晰地理解信息。每个卡片通常包含相关的内容，如文本、图片或按钮，以便用户快速浏览和交互。

留白分割：

主要通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然地将信息进行分组。这种留白的方式能够为页面增加呼吸感，降低视觉噪音，使设计看起来更简洁。

近年来，设计趋势从

“卡片式设计”转向了“去线化设计”，

即倾向于使用留白分割而非过多的线条分割，以实现更为简洁清晰的界面效果。设计师在选择分割方式时，应

优先考虑留白分割，其次是线性分割，最后是卡片分割

。这个选择顺序反映了设计界的一般原则，即在不影响信息传达的前提下，尽可能保持设计的简洁性。

线性分割的定义：

线性分割设计是一种在视觉设计中使用的技巧，它使用线条、边框或细线等元素来划分、区分或连接页面上的不同内容区域。这种设计手法主要用于

提高页面内容的可读性和组织性，帮助用户更好地理解和浏览页面信息。

线性分割设计具有以下优势：

1.划分区域：

线性分割可以将页面划分为不同的区域或模块，使得每个区域的内容更加清晰、有序。这有助于用户快速定位和浏览所需的信息，提高阅读效率。

2.区分内容：

线性分割可以用来区分不同类型的内容，如文本、图片、图表等。通过线性分割，可以将这些内容进行分组或归类，使得页面更加整洁、有序。

3.引导视线：

线性分割可以引导用户的视线，帮助他们更好地理解页面内容。通过合理的线性分割设计，可以突出显示重要的信息或元素，引导用户关注到关键内容。

4.增强层次感：

线性分割可以增强页面的层次感，使得页面内容更加丰富、有深度。通过不同样式的线性分割，可以区分不同的信息层级，帮助用户更好地理解页面结构和内容关系。

使用原则：

在使用分割线时，我们应遵循一些原则，以确保其有效地帮助用户理解页面的组成，同时避免过度使用带来的视觉干扰。

1.分割线应当微妙而不过于显眼。

它们在布局中应该容易被用户注意到，但又不应成为焦点，以免分散用户的注意力。

2.分割线应被视为次要的元素。

只有在留白等其他设计手法无法有效起到分割作用时，才考虑使用分割线。它们应当是布局中的辅助工具，而不是主导元素。

3.谨慎使用分割线。

过度使用分割线可能会导致页面显得混乱和复杂。相反，我们应该用分割线来创建信息分组，而不是简单地分割每一个条目。通过审慎而恰当地使用分割线，我们可以有效地提升页面的可读性和用户体验。

图片来源于参考文章

线性分割三种类型：

通栏分割线、内嵌分割线和中间分割线。

1.通栏分割线（Full-bleed Dividers）：

通栏分割线通常横跨整个页面宽度，用于分隔彼此完全独立的内容区域。这种分割线在视觉上非常显著，能够清晰地划分出不同的内容区块，使用户能够迅速区分不同部分的信息。通栏分割线通常用于区分文章、产品列表、服务介绍等独立的内容区域。

2.内嵌分割线（Inset Dividers）：

内嵌分割线通常位于内容区域内部，用于分隔有锚点（如头像、图标等）的相关内容。这些锚点可以是图片、符号或小的图形元素，它们与分割线一起，帮助用户更好地理解和区分内容。内嵌分割线常用于列表、卡片式布局、时间线等场景中，用于展示有关联但不同类别的信息。

3.中间分割线（Middle Dividers）：

中间分割线位于两个内容区域之间，用于分隔无锚点的相关内容。这种分割线通常比通栏分割线更细，更注重于在视觉上划分空间，而不是强调内容的独立性。中间分割线常用于文本段落之间、列表项之间或不同功能区域之间，以提供清晰的结构和层次。

在大多数情况下，当信息层级较为简单（即信息层级≤2）时，使用分割线进行信息分割是一种有效的方法。然而，实际上，

如果留白间距足够大，我们也可以使用留白来达到类似的效果

。通过增大留白间距，我们可以创造出清晰的视觉区域划分，使得信息之间的界限更加明确。

与分割线相比，足够大的留白间距可以避免多余的线性元素干扰，让整体视觉效果更加清爽。这样的设计选择有助于提升用户的阅读体验，使用户更加轻松地理解和消化信息。

因此，在

信息层级较简单的情况下，我们可以灵活地选择使用分割线或留白来进行信息分割

。通过调整留白间距，我们可以达到与分割线相似的效果，同时保持整体设计的简洁和清晰。

为了提升屏效

，我们希望在一屏内展示尽可能多的信息。在这种情况下，分割线的设计显得尤为重要，因为它们能够

有效地划分信息区域，使内容更加清晰、易于理解。

通过使用分割线，我们可以

将较多的信息条理化

，使得用户能够更快速地找到所需的内容。与没有分割线的布局相比，使用分割线能够

显著提高信息的可读性和可理解性。

在相同的信息布局下，分割线能够将信息区域明确地划分开来，

防止信息之间产生混淆或交叉

。这种划分不仅使得每个信息块更加独立，而且提高了信息之间的对比度，使用户能够更轻松地识别和区分不同的信息。

因此，当我们的目标是提高屏效并展示大量信息时，分割线的设计是一个关键要素。通过合理地使用分割线，我们可以确保信息布局更加清晰、有序，从而提高用户的阅读效率和满意度。（如下图）

线性分割在移动端页面设计中的应用场景广泛，尤其是在

需要清晰划分信息模块时

。如微信的聊天列表中，线性分割被用来区分不同的消息条目。每条消息之间通过一条细线进行分隔，使得每条消息清晰可辨，方便用户快速浏览和定位到特定的消息。

线性分割还常用在各类

App的信息提示

中，如果有多条消息需要展示，线性分割可以用来

区分不同的消息组

。例如招商银行APP中，当用户收到多条未读消息时，每条消息之间可以通过线性分割进行区分，使得每条消息清晰可辨，方便用户逐一查看和处理。

在APP

需要用户填写信息和设置的表单页面中

，线性分割可以用来区分不同的输入字段或信息区域。这有助于用户更清晰地了解需要填写的信息，提高表单的填写效率和准确性，比如站酷的设置页面（如下图）

卡片分割的定义：

卡片分割设计主要通过将内容或功能区域划分成独立的“卡片”来进行信息展示和组织。每个卡片通常包含相关的内容或功能，并且与其他卡片通过一定的间距或线性分隔进行区分。

卡片分割设计具有以下优势：

1.内容封装：

卡片分割设计将相关内容或功能封装在一个独立的卡片内，使得每个卡片成为一个独立的信息单元。这有助于保持页面内容的清晰和整洁，方便用户浏览和理解。

2.明确边界

：每个卡片通常具有明确的边界，通过边框、阴影或间距等元素来区分不同的卡片。这种边界的存在使得每个卡片在视觉上相对独立，方便用户进行区分和识别。

3.灵活布局：

卡片分割设计具有很高的灵活性，可以根据需要自由调整卡片的大小、位置和排列方式。这使得设计师可以根据不同的设计需求和用户习惯来灵活调整卡片的布局，以达到最佳的视觉效果。

4.强调重点：

通过不同的视觉处理手法，如改变卡片的颜色、大小或样式等，可以突出显示重要的卡片或内容。这有助于吸引用户的注意力，引导他们关注到关键信息。

卡片的基本构成：

卡片是一个独立的主题性容器，旨在将内容和操作组合在一起。它可以包含多种元素，如容器、缩略图、标题、副标题、富媒体、辅助文字、按钮和图标按钮等。这些元素并非必须全部存在，而是根据具体需求进行选择和配置。无论选择哪些元素，它们都会以易于扫描和操作的形式整齐地放置在卡片上。这种设计使得卡片成为一个灵活且高效的信息展示工具，适用于各种场景和应用。

卡片分割常见的类型：

卡片分割可分为

通栏卡片

和

非通栏卡片

1、通栏卡片：

其特点是卡片占据整个页面宽度，没有左右边距。通栏卡片的设计可以提高布局的灵活性，使得页面内容更加宽敞和大气。同时，通栏卡片也可以更好地突出展示单条内容，引导用户的视线，提高阅读效率。

2.非通栏卡片：

与通栏卡片相比，它会在卡片的左右两侧留有边距，不完全占据整个页面宽度。这种设计方式可以使得页面内容更加有层次感和组织性，同时也有利于突出显示某些关键信息。

通栏卡片

通栏卡片相较于非通栏卡片，其设计特点在于去除了左右两端的留白，仅保留上下边距，从而提供了更大的展示空间。这种设计使得卡片内的内容能够占据整个页面宽度，进一步增强了内容的视觉冲击力。在通栏卡片中，卡片与背景的关系通常通过一条背景色块来抽象表现，这种简洁的处理方式避免了过多的视觉元素干扰，使得页面整体看起来更加整洁和统一。

通栏卡片可以被视为在极简列表式和传统卡片式设计之间的一种折中选择。它继承了卡片式的分层方式和强交互性，使得用户能够轻松地浏览和交互页面内容。如下图微博“关注”、微信“发现”页面。

非通栏卡片

通常采用带圆角的设计形式

，这种设计不仅赋予卡片一种柔和、圆润的视觉效果，还增强了用户的视觉舒适度。结合阴影效果以及四周的边距，非通栏卡片巧妙地形成页面留白，使得整体设计层次感更加丰富。

通过巧妙的投影设计以及前后颜色的精准设定，非通栏卡片成功地让内容与背景之间

产生视觉空间感

，进一步强化了内容的立体感和层次感。这种设计技巧不仅提升了卡片的视觉吸引力，还使得用户在浏览页面时能够更加轻松地

区分和聚焦关键信息

。

在页面设计中，非通栏卡片的应用范围十分广泛。无论是用于展示文章、产品、图片还是其他类型的内容，非通栏卡片都能够通过其独特的视觉效果和设计元素，为用户带来更加舒适、美观的视觉体验。同时，非通栏卡片还具有良好的

适应性和灵活性

，可以根据不同的设计需求和用户习惯进行定制和调整，满足不同场景下的应用需求。如下图夸克“夸克日报”、APP Store“首页”

选择使用通栏分割线还是卡片分割，主要取决于你的设计目标和内容需求。以下是三个参考建议，帮助你做出更好的选择：

1.当内容已有自然分割线时：

如果你的主题内容本身就已经有明确的分割线，比如列表项、段落分隔等，那么采用非通栏分割会是一个好选择。卡片可以清晰地界定每个内容块，使主题信息层次更加分明，提高用户的阅读效率。

2.当内容类型多样且占据较大空间时：

如果单个主题内部包含了多种类型的内容，如文字、图片、视频等，且这些内容在垂直方向上占据了较大的空间（例如，内容长度超过屏幕高度的一半），使用非通栏分割会更加合适。卡片能够有效地圈定内容范围，为用户提供一个明确的视觉边界，帮助他们更好地理解和消化信息。

3.当需要增强横向空间感时：

如果你希望扩展页面的横向空间，或者暗示用户可以横向滑动页面查看更多内容，那么非通栏卡片会是更好的选择。非通栏卡片的设计能够利用横向内容连续性原则，帮助用户建立页面可以横向滑动的意识，从而提升页面的互动性和用户体验。如下图知乎“发现”、站酷“推荐”。

卡片分割更适合图文混排

卡片分割设计以其独特的布局方式，成为图文混排中的理想选择。它能够巧妙地将不同大小、媒介的内容统一呈现在一个界面中，

实现了内容的多样性与统一性的结合

。这种设计不仅让单屏区域能够显示更多内容，还通过合理的空间划分，确保了文字和图片之间的和谐共存，既维持了视觉的一致性，又

巧妙地平衡了文字和图片的视觉强度

。因此，在需要同时呈现多种内容和媒介的场景中，卡片分割无疑是一种高效且美观的解决方案。如下图知乎“想法”、站酷“首页”

留白分割的定义：

留白分割是目前设计的主流趋势，越来越多的产品在使用留白分割设计。留白分割主要通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），将信息进行自然的视觉分组。

留白分割具有以下优势：

1.突出重点信息：

通过增加间距，可以将关键信息与其他内容区分开来，使用户更容易注意到。

2.提高可读性：

适当的留白可以使文字或图形元素之间的界限更清晰，减少视觉干扰，从而提高用户的阅读效率。

3.增强设计感：

留白可以为设计增加呼吸感，避免元素过于拥挤，使整体布局更加和谐、美观。

当元素之间的间距保持均匀时，整个视觉呈现会显得平衡且协调，大脑默认为一个整体。然而，一旦元素的横向和纵向间距发生变化，我们的大脑会

基于接近性法则

，本能地将距离较近的元素视为一个整体或群组，这就是留白分割。（如下图）

留白分割在

有规律且卡片样式较多

的页面中表现尤为突出，在有大量卡片样式的页面中，每个卡片通常都包含一定的信息。通过留白分割，可以清晰地划分每个卡片的信息区域，使用户更容易区分和阅读每个卡片的内容，增加呼吸感，避免元素过于拥挤，从而提高整体的可读性。例如下图中主流的音乐类App

相反，如果在没有规律且页面内容较多的情况使用留白分割，则会使页面杂乱无章。比如下图咸鱼的“广场”界面feed流中，图片从1～9张都有的情况下，使用留白分割，页面就会变得杂乱，影响视觉效果。而脉脉则采用了卡片式分割样式，页面模块则相对清晰很多。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件 UI界面设计、能源及监控软件 UI界面设计、气象行业 UI界面设计、轨道交通界面设计、地理信息系统 GIS UI界面设计、航天军工软件 UI界面设计、医疗行业软件 UI界面设计、教育行业软件 UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

作者：King_LBJ
链接：https://www.zcool.com.cn/article/ZMTYxMDk2NA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(844)

102024-4

产品设计中的心智模式：深度理解用户需求与行为｜北京蓝蓝UI设计公司

前端达人

一、引言

在产品设计的世界里，心智模式是一个至关重要的概念。它反映了用户的内在需求、期望和行为习惯，是产品设计的核心依据。本文将带你深入了解产品设计中的心智模式，掌握如何通过洞察用户心智模式，创造出真正满足用户需求的产品。

二、什么是心智模式？

简单来说，心智模式是指人们对于世界的认知和理解的内在模式。它是人们对事物的看法、经验和行为习惯的集合，影响人们对世界的感知和反应。在产品设计中，了解和利用用户的心智模式，可以帮助我们更好地把握用户需求，创造出更符合用户习惯和期望的产品。

三、如何洞察用户心智模式？

观察研究：深入观察用户在实际生活中的行为、习惯和需求，理解他们的真实需求和痛点。这需要设计师具备敏锐的观察力和同理心，能够设身处地地站在用户的角度思考问题。
用户调研：通过问卷、访谈等方式，直接获取用户的反馈和建议。这有助于了解用户的期望、偏好和顾虑，进一步揭示他们的心智模式。
竞品分析：研究市场上类似产品的设计，理解其满足用户需求的优点和不足。通过竞品分析，可以洞察用户在不同产品间的选择和行为模式，从而深入理解他们的心智模式。

四、如何运用心智模式进行产品设计？

明确目标用户：了解目标用户的心智模式，根据他们的需求和行为习惯进行产品设计。这有助于确保产品功能、交互和视觉设计等方面符合用户的内在期望。
优化用户体验：基于用户的心智模式，优化产品的使用流程。例如，通过合理的信息架构、易于理解的交互设计和符合用户直觉的视觉语言，提升产品的易用性和用户体验。
创新设计：通过深入了解用户的心智模式，发现潜在的需求和痛点，为产品设计带来创新点。这有助于创造出真正解决用户问题的产品，提升市场竞争力。
迭代优化：在产品发布后，持续收集用户反馈，了解用户在使用过程中的感受和体验。根据用户的反馈和行为数据，不断优化产品设计和用户体验，以满足用户不断变化的心智模式。

五、结语

在产品设计过程中，了解和运用心智模式至关重要。通过深入洞察用户的心智模式，我们可以创造出更符合用户需求的产品，提升用户体验和市场竞争力。因此，设计师应不断提升对用户心智模式的认知和理解，以更好地满足用户需求，推动产品的持续创新和发展。

蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

评论(0) 浏览(538)

262024-3

AI实操：用WHEE辅助设计app启动页

前端达人

今天我们继续用WHEE，带你玩转AI实操，设计春天出行启动页运营海报！

这次的主题是春天出行！

（文末已附上同款配方链接）

Part 01

第一，先找一下灵感参考图

第二，从三个方向来分析

版式
元素
色调

收集灵感图时，有4点要注意

风格：整体风格是否符合我们的主题和目标用户群？
版式：版式是否清晰、易读？
元素：运用的元素是否与主题相关？
色彩：色彩搭配是否和谐、美观？

我们先来看一下“春天”

-版式

从版式上面来看一下他们共同的特征，基本上都是一个上下结构的版式特征

这种结构简单明了，合适各种类型的内容

上方主标题，下方logo落款，这种排版方式我感觉是最稳的一种结构

即使是新人也能很容易出排版效果

标题的排版方式呢,有横向排版和竖向排版

它除了使用常规的黑体字

还有手写体，我感觉手写体更加符合主题

-元素

从元素结构来看

天空，河流，山川，阳光、花草等等

这些元素能够让人联想到春天的清新、活力和愉悦，增加了海报的吸引力和代表性

-色调

色调呢基本也是以蓝色，白色，绿色为主旋律

也就是阳光、白云、绿色植物

接着来看看“出行”

-元素

元素呢也是在上面“春天”的基础上面

多出车，人，露营等周边关于户外的元素

这些元素能够更加生动地展现春季户外活动的场景和氛围

-色调

色调也基本蓝、白、绿

这个主题我觉得还是要有生机感、有活力一点的色调才对

总结设计方向和关健词提取

版式

整体的版式规划采用上下的结构

主标题放在上方，横排版，用手写黑体

关键词

核心词：草地，拖车、车辆、山川

效果词：可爱的卡通设计、梦幻的视觉效果、鲜艳的色彩

Part 02

接下我们看一下WHEE的参数

提示词、模型这里维持默认就好

当然也还可以使用它的智能联想功能

看看有什么新灵感，亦或者是反向词等等

风格模型

在模型商店里面，这里我用了citypop的风格模型

当然这里面还有很多的模型，比如新中式风格，工笔画盲盒等等

所以在关键词里就不需要在写风格的关键词了

直接选择相对应的风格模型会更加高效率

出来的画面结果也更加接近目标视觉

参数这里保持默认就好

我们第一次跑图主要还是测试关键词

后续看情况在进行调整

这是我一共刷了两次图

从呈现的结果上面来看

第一排比较符合想要的感觉

画面上方也好做文字的排版

添加关键词“露营、帐篷”

氛围的感觉还是少了一点，因为少了露营和帐篷的元素

我们可以在右侧这里，选“重新编辑”按钮

这样我们就可以延续之前的设置继续编辑

然后我们把露营和帐篷关键词加上，其它不变

从结果来看第一张有帐篷的氛围更好

第三张和第四张有点脱离了

但是第三张处理一下拿来做弹窗感觉效果也会非常好

然后我们在右侧这个放大一下像素

这样就可以得到一个更高清的分辨率

Part 03

接着我们来做一下主标题的字体设计

就用手写黑体

我们先找一些毛笔字字形作为笔画垫字

用钢笔工具描出字形（这里先以春字为例）

我们挑选出重要的笔画特征就好

其实是不需要跟原来的一样

这样会更有灵性

比如这里“春”字，上部首里的三横

我这里只要第三横连笔的特征

后面的几个字也是以此类推

描绘完之后呢，我们加一粗一点描边的大小

同时将端点和边角都设为平头

基本的字体结构完成了

下一步就是细节的调整了

首先调整一下字间距

排版的话，我给它是上下错落

这样会给人比较轻松的感觉

整理细节的话，就需要注意

笔画之间的关系和空间感

例如“春”字上部首的第三横与“日”中间那一横

“出”和“行”的连接，以及它们相互之间的关系

完成主标题的设计之后，我们先来对画面进行二次构图

天空部份我们不需要太多

第一是文案放在上方识别度较低

第二放大主体元素露营车和帐篷后，它也能够更好的突出主题氛围

按照原先的计划做上下结构的版式设计

上面我们放主标题文案信息

但是单看着主标题设计还不够丰富

所以需要在添加一些细节

在“日”字上方和“出行”下方

我们在用文案做成曲线跟随字形弧度

同时他们也是相互呼应的

描述信息直接放在主标题下方

居中对齐的样式就好

下面就放辅助的信息

同时也是居中对齐的样式

这样上下就有元素关系的呼应

统一的居中对齐的样式

也会让文字阅读效率大大提高

最后在放入一些固定落款的元素就完成啦～

Part 04

总结

1. 设计方向和关键词提取

通过收集和分析同类题材，得出设计方向和关键词

前期的方向确定是很重要的，有效的方向可以减少后期改稿

2. 视觉风格

选择对应的风格模型，得到想要的视觉风格

WHEE模型库中有很多风格模型，这大大的提升了工作的效率

3. 主标题字体设计

以毛笔字字形作为基础字形，设计出主标题

毛笔字结合黑体的感觉非常合适这轻松、放松类型画面

4. 画面排版

根据前期版式分析确定的方向，对画面进行文字排版

文案与文案之间，标题字体设计

都需要注意它们之间的关系，以及统一性

今天的分享到这儿就结束啦

我们下篇见咯

以下同款配方链接

https://www.whee.com/ai/text-to-image?id=198427&styleModelId=3044&editorMode=advanced

https://www.whee.com/ai/text-to-image?id=198428&styleModelId=3044&editorMode=advanced

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

作者：智明了智明
链接：https://www.zcool.com.cn/article/ZMTYxMzc2NA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(586)

262024-3

2024年动效设计前瞻

前端达人

在数字化时代，动效设计已经成为吸引用户眼球、提升用户体验不可或缺的一部分，动态元素的呈现效果，相比纯图片也新增了很多乐趣与惊喜，融入进我们生活中的方方面面。

2023年，我们看到了许多令人眼前一亮的动效设计形式，例如尼桑Ariya车机交互中，当驾驶员启动车辆时，信息娱乐系统的启动界面会展示一个动态的汽车品牌标志，伴随着流畅的过渡效果和音效，营造出一种高科技感和品牌认知度。

Current Time 0:00

Duration Time 0:08

Loaded: 0%

Progress: 0.00%

从微交互到增强现实，从三维动画到自然运动，随着技术的不断发展与用户的不断变化，动效设计也在不断演进和创新。那未来的动效设计会是怎样的形式呢？在本文中我们一起来探讨一下吧！

温馨提示：以下图片均来源网络，GIF格式文件需要加载，感谢耐心阅读～

一、2023年动效设计表现形式

动效设计在用户界面、广告营销、游戏开发等领域都发挥着重要作用，常见的表现形式有微交互动效、3D动效、数据可视化动效以及场景化动效。

1、微交互动效

在2023年，微交互动效成为了设计师们关注的焦点。通过细腻的动画效果，提升用户体验，增强用户对界面的感知，使用户操作更加直观和愉悦。

在移动应用界面中，按钮、导航栏、滑动卡片等交互元素中常见微交互动效，例如美团小象超市，当用户点击底部标签栏按钮时，文字的颜色发生变化，图标右下角增加主题绿色填充，页面同步切换，给予用户直观的反馈，告知其操作已被识别；

美团-小象超市-手机录屏

车机界面中，导航栏通常用于切换不同的功能页面或查看系统状态。例如问界驾驶模式调节，用户通过手势操作导航栏显示，按钮高亮效果，驾驶模式以微交互动效呈现预览，以使界面切换更加流畅、直观，同时帮助驾驶员更轻松地操作界面，提升驾驶安全性和用户体验。

问界驾驶模式，来源网络

2、3D动效

三维技术制作的动画效果，通常具有立体感和逼真感，能够在屏幕上呈现出立体空间中的物体运动和变化。这种动效在视觉上更加生动、震撼，常用于影视特效、游戏开发、虚拟现实等领域。

视频来源网络

在电影、电视剧等影视作品中，3D动效常被用于创造出各种特效场景、人物动作或者虚拟世界，增强视觉冲击力和真实感。例如好莱坞大片《复仇者联盟》中，各种特效场景和超级英雄的动作都采用了大量的3D动效制作，如钢铁侠的攻击动作、蜘蛛侠的飞行、蜘蛛网特效等，让观众身临其境地感受到了超级英雄的力量与魅力。

游戏开发中，3D动效被广泛应用于游戏角色的动作表现、场景建模、特效设计等方面，提升游戏的沉浸感和视觉体验。

王者荣耀破晓版

车机界面中，可以通过3D动效制作出全景效果，使驾驶员在车内就能感受到真实的车外景象，增强驾驶体验和安全感。例如导航系统中，使用3D地图和路况动效，让驾驶员更清晰地了解路况和行驶路径。

Apollo anp3.0-障碍物绕行

3、数据可视化动效

数据可视化动效通过直观的动画展示数据变化，增强数据的可读性和理解性，使数据更生动、直观地呈现在用户面前，帮助用户更好地理解数据的含义和趋势。这种动效在金融、统计等领域尤为常见。

在商业领域中，数据可视化动效常被用于制作各种分析报告、销售演示等，通过动态图表、实时数据更新等动态效果，可以让数据报告更具吸引力和说服力。例如企业的数据监控面板中，可以使用数据可视化动效来实时展示销售额、用户访问量、库存情况等数据指标的变化情况。

来自DataV-设计中心

并且通过动态变化的图表、实时更新的数据指标等动效效果，可以让管理者更及时地了解业务状况，做出相应的决策。

来自DataV-设计中心

在科学研究和教育领域，数据可视化动效可以帮助科学家和教育工作者更好地展示研究成果和教学内容。例如，通过动画效果展示监测数据的动态变化、预警统计等，可以使抽象的概念更具体化、更易于理解。

来自DataV-设计中心

车机界面中，可以通过数据可视化动效来展示车辆的驾驶数据，如车速、油耗、行驶里程等。例如，通过动态图表、实时更新的数据指标等动效效果，可以让驾驶员更清晰地了解车辆的行驶情况，帮助其做出更安全、更经济的驾驶决策。

@ Musemind UI/UX Agency，dribbble

4、场景化动效

场景化动效通过模拟真实世界的场景，让用户在虚拟空间中获得更自然的交互体验。产品展示或推广中，场景化动效可以帮助展示产品的特点、功能和优势。例如，在欧莱雅巴黎振兴霜互动 AR邀请卡，可以使用场景化动效展示产品的成分含量，以吸引消费者的注意力和兴趣。

欧莱雅巴黎振兴霜互动 AR 邀请卡，@KIVISENSE

车机界面中，我们也能看到场景化动效展示驾驶模拟场景，帮助驾驶员更直观地了解车辆的行驶状态和安全提示。例如导航系统中，展示车辆在雨天、雪天或夜间等不同路况下的行驶情况，以提醒驾驶员注意安全驾驶。

HUDWAY Drive，来源网络

二、2024年动效设计发展方向

2023年动效设计不仅追求美观，更注重与用户的深度沟通。每一个动效都在讲述品牌故事，引导操作，提升易用性和趣味性。站在这个时间节点上，我们不禁要思考：接下来的一年，动效设计又将如何进化？它将如何继续深化与用户的互动，提升整体的用户体验呢？

1、智能化动效

随着人工智能技术的不断发展，利用人工智能（AI）技术或者智能算法来设计和生成动画效果，以实现动效的智能化、个性化或自适应。这类动效可以根据用户的行为、喜好或者环境变化实时调整，以提供更符合用户需求和情境的动画体验。

音乐专属推送

在移动应用、网页设计等界面中，可以利用智能化动效来实现智能交互界面，根据用户的操作习惯和需求动态调整动画效果。例如，苹果音乐专属推送，根据我的浏览、检索等行为和歌曲收藏、喜好等，智能调整动态加载的内容，建立我的专注音乐空间，提升我整体的使用体验和满意度。

2024款小鹏G9 超智驾豪华纯电SUV，小鹏汽车官网

在车机界面中，可以利用智能化动效设计车载智能助理系统，根据车辆状态、道路情况和驾驶员行为实时调整动画效果，提供更智能、更安全的驾驶辅助功能。例如，根据车辆的自动驾驶状态实时调整驾驶模拟场景的动画效果，帮助驾驶员更好地理解车辆的行驶情况和驾驶状态。

2024款小鹏G9 超智驾豪华纯电SUV，小鹏汽车官网

根据车内温度和湿度调整空调和座椅加热系统，实现智能化的温度控制和舒适度提升。

2、增强现实（AR）和虚拟现实（VR）的融合

2016年至今，AR和VR技术的发展持续加速，增强现实和虚拟现实融合动效成为热门话题。越来越多的行业开始关注和应用AR/VR技术，如教育、医疗、零售、汽车等领域，这种动效在现实环境中叠加虚拟物体和效果，使用户能够与虚拟内容进行互动，创造出更加丰富和沉浸式的体验。

虚拟试衣间

@Amol Arora

用户可以利用增强现实和虚拟现实融合技术，在现实环境中体验虚拟试衣间。通过智能设备查看虚拟衣服和配饰，以便在不实际试穿的情况下预览其外观和适合度。

虚拟家居设计

@ Bell'Arte Living - Estofados

利用AR/VR融合技术，用户可以在现实空间中体验虚拟家居设计，例如在现实环境中预览家具、装饰品等虚拟物体的摆放效果，并根据实际需要进行调整。

车机领域

@ Shutterstock

在车机场景中，汽车制造商可为客户提供汽车内容定制体验，客户通过AR应用或VR头盔在虚拟环境中预览汽车内部的不同配置和颜色方案，并根据个人喜好进行定制选择。

Acura Parts & Service

关于车辆维修和保养方面，通过AR应用，车主可以在现实车辆上查看虚拟的维修部件和保养步骤，以便更容易地进行维护保养。

The future of AR in Cars，Behance

同时也可应用于驾驶辅助和车载娱乐，例如智能导航、虚拟HUD、驾驶模拟和增强现实车载娱乐，进一步提升车机系统的智能化水平和用户体验，为驾驶员和乘客带来更安全、便捷、有趣的车载生活体验。

3、交互式动效

交互式动效在2024年仍会继续保持流行，并有望进一步发展，使用户能够更直观地参与到动效的生成和表现中。例如在车机系统中，通过交互式动效显示车辆的驾驶状态、周围环境和导航路线等信息，驾驶员可以通过触摸屏或语音指令与系统进行交互，调整设置并获取所需信息，提升驾驶安全和便捷性。

UI Motion Reel-百度Apollo，@ SeanCham

使用手势控制技术，驾驶员和乘客可以通过手势在车内控制屏幕显示和功能操作，例如多屏影音同步、开关车窗等，提高驾驶员的操作便捷性和安全性。

Li L9, Flagship Intelligent Cockpit.

4、环保与可持续性动效

International Competition for the Xinxiu District Masterplan Con，@ McGregor Coxall

随着环保意识的日益增强，对于具有环保和可持续性理念的动效设计也将受到更多关注和青睐。例如通过动效设计呈现城市绿色化规划的效果，城市绿道、绿色建筑等，向用户展示城市环境的改善和生态环境的保护。

@ Ahmad Sulaiman

在车机界面中，设计能源监测动效，显示车辆的能源利用情况，包括电池电量、油耗情况等，提醒驾驶员合理使用能源，节约能源资源。

5、跨界融合动效

未来的动效设计也将更加注重跨界融合，设计师可以借鉴其他艺术领域的元素和创意，将不同领域的美学观念融入到动效设计中，创造出新颖而富有创意的动效形式。

BTS - NB Numeric - NM1010 Tiago Lemos Signature Model

例如在品牌推广中，混合媒体新形式，模糊现实世界和虚拟世界的界限，Nike结合了实拍场景视频、草图、模型等形式的融合，创造跳出屏幕的动态内容。

来源网络

车机系统中，应用全息投影技术，将导航地图以立体全息的形式显示在车内，提供更直观、更生动的导航体验；

Waymo cars，Google Design

Waymo汽车收集了大量关于周围物体和交通模式的数据，反馈乘客看到的是整洁的视觉图像和清晰标记的行程更新，增强驾驶安全与便捷性。

总之，2024年的动效设计将继续成为各行业中不可或缺的重要组成部分，呈现出更加多元化、智能化和个性化的特点。作为设计师，我们需要不断学习和探索新的设计理念和技术手段，以创作出更加出色的动效作品，为用户带来更丰富、生动和愉悦的体验。同时，我们也需要关注环保、可持续性等社会问题，积极推动动效设计的绿色发展。

以上视频、图片均来源网络，若侵可联系修改删除，欢迎交流探讨，谢谢～

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

作者：Shirley_雪r
链接：https://www.zcool.com.cn/article/ZMTYxMzQzMg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(750)

192024-3

智慧电力可视化大屏管理系统

前端达人

Current Time0:00

Duration Time0:05

Loaded: 0%

Progress: 0.00%

作者：121Jay

链接：https://www.zcool.com.cn/work/ZNjc0NzczODg=.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(529)

192024-3

《UnitLife》APP界面/交互设计案例

前端达人

下面开始：

作者：dodoheyiqian
链接：https://www.zcool.com.cn/work/ZNjgwNjI4OTI=.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(518)

182024-3

B端产品的C化该怎么去做？

前端达人

B端C化由来已久，概念化的东西怎么变为现实？阿鱼带你一步一步来...(ps:纯干货，有图有真相)

作者：是一整条咸鱼
链接：https://www.zcool.com.cn/article/ZMTYxMzE0MA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(509)

182024-3

今天来聊一聊视觉语言的体验升级

前端达人

视觉表现不关乎体验？拜托，信息的传达都是靠眼睛的好吧，哈哈

作者：是一整条咸鱼
链接：https://www.zcool.com.cn/article/ZMTYxMzI5Mg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(487)

122024-3

如何利用动效打造B端的用户体验

前端达人

说到B端后台产品，我们会想到业务复杂、信息庞大、用户角色多、页面层级深、使用门槛高等特征。这些特征让后台产品在设计时更强调“简单直接”，无需多余的设计元素，相比之下，没有C端产品有趣。而作为B端后台设计师在工作中会面临很多复杂场景的设计需求，有时候需求方未必能理解设计理念，会让设计师陷入“头秃”的状态。针对B端后台产品某些体验问题，我们可以借助动效的力量去解决。

下面将结合工作经验，以及线上文章，分享如何利用动效来提升B端后台产品的体验。

主要分为两大块：

使用动效不是为了炫技，而是辅助解决设计中发现的问题。我们要思考的是，眼下的问题结合动效能否达到1+1>2的解决效果。设计方案除了要得到需求方的认可，还要有开发团队的支持。设计师做到从痛点中出发，于可行处落地，才是有效的设计。那什么场景下的问题可以考虑结合动效呢?

1、信息量折叠收纳

B端业务的复杂程度决定了产品的信息体量，这也考验着设计师设计页面时，能为用户在有限的空间里获取多少信息。举个例子，用户的办公设备是小型笔记本，它的屏幕小，用户一屏看到的内容有限。这时需求方建议减少留白，压缩空间，信息往上堆积，页面最后会拥挤不堪。庞大的信息体量力求对用户的吸收效率，也对设计造成困扰，针对这种情况我们可运用“折叠收纳”法

应用案例1: 按钮折叠

如果一个页面的按钮太多，可“折叠”按钮。以下面的科目树为例，每个科目有若干个功能按钮，如按钮全部展示，不利于用户聚焦重要信息。用户必定是先看科目标题，如有需要才对科目进行操作，基于这个思路可把按钮折叠起来，待用户鼠标悬浮至科目才出现按钮。在恰当的场景下将按钮折叠，有助于精简页面结构。一个页面按区域划分功能区和信息区，信息区被文案铺满了，可简化功能区的表现形式。比如按钮和解释文案，可对解释文案进行收纳，用户鼠标悬浮上去显示。对于用户来说，一个按钮的含义只要使用一次便清楚。

应用案例2: 内容折叠

B端后台因信息量大有很多长页面，这时可在用户进行页面滚动浏览时，根据用户滚动的内容进行折叠。如下的筛选项占据了页面头部一定的空间，用户滑到结果列表内容时，已选项固定在顶部精简展示。

小结:通过“折叠收纳法”优化页面布局，根据用户的操作行为给予内容变化，帮助用户降低信息量过大带来的阅读疲劳，也让设计师在有限的设计空间里“堆积”信息。

2、对路径进行引导，及时给与用户反馈，提高效率

B端产品会有极其复杂的功能，这些功能通常用步骤条来拆分，引导用户分步完成。面对复杂功能。需求方希望

在页面的各个位置添加用法提示文案。但用户并不想阅读一串串文字，这时可结合用户的操作行为，及时响应引导下一步操作。

应用案例1:

操作响应如下的这个页面需要用户把左边的字段拖拽到右边生成卡片。当用户拖拽时，给予动效反馈让用户感知字段拖拽方向。这种可视可感知的方式帮助用户快速掌握用法，提升效率。

应用案例2:引导响应

在工作中我们也许会接到类似的修改需求:“按钮不够突出，不够大，要又大又突出”。你看完后心里想:“还不够突出吗，要这么大干什么呢?”这时沉住气，分析修改的根本目的，它想要突出的目的是什么?

1、这个按钮在整个页面中承载极其重要的功能，视觉上用户需立刻注意到2、点击按钮后的内容十分重要，希望增强点击欲。

当用户鼠标悬浮至按钮时，及时响应引导，一个箭头既起到醒目作用，也引导着用户去往下一步。

小结: B端后台页面信息繁杂，功能多。通过动效帮助用户在使用过程中增强反馈和引导，正确的引导能缩短用户的操作路径，提升效率。

3、增加情感化体验

B端后台产品大部分是给专业人员使用的，信息表单居多，页面内容相似，比较单调。加入适当友好的情感化式效可以提升产品的趣味性，减少用户使用的倦怠感。

应用案例1: Loading动效

常规的Loading动效通常是一个圆在转圈，当用户面对长时间加载时，一直盯着一个圈会产生焦虑感。情感化Loading动效可总结为两类:

1、产品本身有一个IP形象，可围绕IP进行创作。例如“加薪猫”，加载的时候猫咪追着钱币奔跑，增加了跑步流汗的细节，提升它已经在努力加载的形象感;

2、根据Loading的文案进行拓展设计，提取文案元素，图形场景化，分散用户等待的焦虑。

应用案例2:化抽象为形象

有些B端产品的业务背景专业而又抽象，可借助动效的力量化繁为简，化抽象为形象。以下面数据字典为例。用通过该字典进行与业务相关的字段查询。该页结构较简单:搜索栏和热词入口。我结合模块名称，对特征进行具体物化，在页面加入字典和放大镜元素。通过物化让用户快速感知该模块的作用。类似的大入口页面也可以运用3D效果，它能让物化更加立体。

比较常用的动效设计工具有: Ae、Principle、ProtoPie。这里分享一下我在工作中常用的并能解决大部分问题的工具。

1、Principle:快速制成交互动效演示Demo

Principle是一款只能用于Mac OS系统的交互设计工具，它的操作界面跟Sketch类似，学习成本较低。它搭配Sketch使用，能对界面做转场过渡动效和一些细节的交与动效。当你想提出某个交互动效提案时，可用Princidle快速制成演示Demo，导出GIF或视频给到需求方，让他们快速明白你的想法及可行性后台界面演示demo可直接选择箭头光标，呈现效果更贴合真实场景。

2、After Effect: 适合各种场景下的动效制作

AE是绝大UI设计师必备的动效制作工具。它支持Mac OS和Windows系统，其自身有着强大而丰富的特效库。现在也能通过AEUX插件，把Sketch里的图层直接导入到AE使用。AE的功能大而全，日堂工作中多用干制作情感化需要的图形动效，比如Loading、lcon点击动效等等。

小结: 设计师需要学习和掌握的软件很多，软件更新迭代的速度也很快。可选择能解决工作中绝大设计需求的软件精学，其余可在空闲时作为知识技能储备来学习。

总结

做适合的动效为B端产品体验赋能

当你在设计一款从0-1或是重构的B端后台产品，你可重新定义设计风格、规范控件。当你是半途介入一款风格规范都已相当成熟的B端产品，通常遇到的问题较为繁琐，可能是对一个按钮、一个颜色、一句文案去精打细磨。这时设计师需提升产品全局观，在设计过程中对遇到的问题层层剖析，洞悉设计的发力点，并在恰当的场景下紧贴产品特性和业务需求，提出恰到好处的动效方案，以小点出发，真正为产品的体验赋能。

作者：CNLILY
链接：https://www.zcool.com.cn/article/ZMTYxMTI2OA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(459)

« 1 ... 4 5 6 7 8 9 10 ... 77 »

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

首页

认识“增长设计”

设计方法论 I 超全面的页面分割设计指南

产品设计中的心智模式：深度理解用户需求与行为｜北京蓝蓝UI设计公司

AI实操：用WHEE辅助设计app启动页

2024年动效设计前瞻

智慧电力可视化大屏管理系统

《UnitLife》APP界面/交互设计案例

B端产品的C化该怎么去做？

今天来聊一聊视觉语言的体验升级

如何利用动效打造B端的用户体验

分类

日历

链接

个人资料

存档