应用在UI插画和B端产品设计中的情感化设计

“设计实际上是一种交流行为,这意味着要深刻理解与设计师交流的人。” ——来自唐纳德·诺曼(Donald A. Norman)《设计心理学》作者通过一定的设计手段,观察用户的反馈,激发用户联想并产生共鸣,使其获得情绪上的愉悦感和情感上的满足感。用户提供有温度、有人情味的产品设计体验。

应用在UI插画和B端产品设计中的情感化设计

为什么需要情感化设计?

总体来说,好的情感化设计可以为用户创造更好的价值,三点思考如下:

  1. 心理学研究表明,人类具有情感的诉求。
  2. 当诉求得到满足后,会产生一系列的正向情感,这些情感具有改变人脑解决问题并帮助大脑做决策的能力。
  3. 一般用户研究基于用户行为,关注产品自身的功能性和用户的体验感。

一、情感化设计的三个层次

在唐纳德·诺曼的《设计心理学3-情感化设计》一书中从知觉心理学的角度解释了人的本性三个特征层次,即本能层次、行为层次、反思层次。

应用在UI插画和B端产品设计中的情感化设计

马斯洛需求简化可以分为:生理需求、安全需求、情感需求。将三种需求映射到产品设计中,分别对应的是产品的可用性、稳定性和情感设计的需要。再将其与情感化设计的模型对应,建立情感化设计的需求模型:本能层次的设计、行为层次的设计、反思层次的设计。

一款优秀的 APP 产品,往往要有良好的界面视觉设计、流畅的交互体验感、引发用户共鸣的情感价值等优点。

1. 本能层次的设计

人是视觉动物,对外在审美的洞察和认知是本能思考的。此时主要的外在特征,视觉审美占人的主要支配因素。

具有美感的设计画面,人们喜欢接受并且有好感度。本能层是感官刺激的直接反馈。对应到产品层面的设计能力便是外在的美观性,根据本能层的定义建立与之对应的情感化需求模型是—视觉(形、色、字、质、构)设计等审美思考点。

2. 行为层次的设计

行为水平的设计,注重的是效用,产品功能要好用,高效解决用户使用功能的行为水平的设计。

对应产品的易学性与易用性。易用性是通过交互与技术手段达成;易学性,是好的用户引导设计;由此我们可以建立与行为层对应的情感需求模型是 — 用户的有效引导设计。

交互信息层级明确,按钮设计运用了弥散大投影,列表的扁平化的场景设计中,用户使用单手手势容易操作。

3. 反思层次的设计

当用户在使用产品后,产品与用户之间建立情感链接,通过与用户之间的互动,满足用户的安全感心理、满意度、品牌 IP 的记忆点等。

通过本能层与行为层的共同作用,在用户的内心会产生混合的情感,融合了文化、仪式、个人经历、情感等很多。

因素。映射到产品的设计中就是产品的情感温度,对应的情感需求模型-营销类的运营设计(成就感、关怀、互动)人性的设计。

成就激励,实现用户的自我价值,签到打卡、一枚勋章、一个标签、排行榜等正向情感的视觉设计。

情感化设计的思考

a. 本能水平的设计(如下图所示)

1. 本能水平的设计,要求UI设计师在设计中,学会从视觉层面思考,使用符合用户心智的本能认知的图形创意设计,以此来满足用户本能的审美体验感和满足感。
人们第一眼看到、感觉到的设计画面,看APP界面元素的设计是否会激发用户的兴趣点,以及其界面的可用性和审美如何。

应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计应用在UI插画和B端产品设计中的情感化设计

上面的设计,是用户容易认知的精美的视觉设计作品。容易识别的图形创意设计,扁平化的极简主义设计风格,是符合现代用户的审美需求的设计风格。

容易理解和操作的界面设计。从布局上思考,手机界面尺寸有限,APP界面设计风格简约,用合适的模块设计,来展示APP的主要内容,以此突出产品的核心功能的体验设计。

b. 行为水平的设计(如下图所示)

1. 产品为人们服务,提升用户的满意度和好感度。事实是:三分之二的用户在安装应用程序72小时后,就很少使用它了。最成功的应用程序是那些由于良好的行为水平的设计,人们才会经常使用它,因为良好的产品设计可以更好的为用户服务。

提升用户体验最关键的是:产品设计不仅要好看,同时也要方便用户更好的使用这款产品。

行为层次的设计,侧重于实现产品交互上的易用性,用户是否能够顺利地完成操作,使用产品是否符合用户的使用习惯。

应用在UI插画和B端产品设计中的情感化设计

1. 左边案例:得到产品截图后,有意见反馈和分享两个按钮操作的设计,方便用户分享截图,或者收集用户的意见反馈;是符合用户心智模式的易用性的行为水平的设计。

2. 右边案例:微信设计,当用户点击“+”后,微信系统会识别手机相册最近的一张截图,设为用户可能发送的图片;是符合用户心智模式的易用性的行为水平的设计。

c. 反思水平的设计(如下图所示)

反思层次的设计。产品设计是否会调动用户的情感;用户情感的反馈,是属于更深层次的体验设计,受到用户的文化背景、经验、教育程度等因素的综合影响。

应用在UI插画和B端产品设计中的情感化设计

1. 左边案例:金融交易产品设计的界面设计,当用户想保护自己资产的隐私时,可以点击右上方的关闭眼睛icon,资金显示变为隐藏的星号,传递给用户以安全感。

2. 右边案例:为了您的账户安全,请设置手势密码,或者跳过;一个小小的关怀,安全感的体验设计,马上让用户感觉到登录的流程中,有了安全感。

3. 反思水平的品牌 IP 形象的融入和视觉设计-是符合用户的心智模式的体验设计。比如下面的界面设计作品和品牌 IP 形象设计作品等。吉祥物融入界面设计,既能减少用户的负面情绪,也可以不断的增强品牌在用户心中的形象。如下图所示。

应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计

下面我将从和用户内心感受相关的三大情感体验入手分析。

安全感

应用在UI插画和B端产品设计中的情感化设计

安全感就是渴望稳定、安全感的心理需求。安全感主要表现为用户的可控感和确定感的设计。

具体案例分析如下:(有效传达安全策略、产品设计的品质感、品牌效应、信息安全、为用户着想、预先告知用户操作结果等方面)来做设计,以此来传达给用户安全感。

有效的传达安全策略。1. 京东金融-安全感的蓝色品牌色使用。2. 京东金融的隐私政策-传递给用户安全感 。如下图所示:

应用在UI插画和B端产品设计中的情感化设计

产品设计的品质感,带给用户以安全感。 界面设计的简约风格、大气、导航清晰的产品,显得很专业和值得信任的感觉,如下图所示。

应用在UI插画和B端产品设计中的情感化设计

品牌效应是安全感传递的元素,用户对互联网产品的感受,通过品牌调性传递给用户以安全感,得到用户的信任。

应用在UI插画和B端产品设计中的情感化设计

营造安全氛围,品牌蓝色赋予用户以安全氛围;收益率和理财期限,信息层级明确;大公司品牌营造安全的氛围,风险等级等展示,传递给用户良好的安全氛围感。

应用在UI插画和B端产品设计中的情感化设计

预先告知用户操作结果,提升用户的信任感

1. 发红包的运营设计弹窗。通用红包,满 35 元优惠 4 元 , 提升用户的信任感。

2. 住宿的界面设计。住宿的列表设计,展示了用户需要看的核心内容,信息层级明确,提升了用户的信任感。

应用在UI插画和B端产品设计中的情感化设计

满足感

一个好的情感化设计,可以满足用户的精神需求。生存需求满足后,人们更想实现自我价值,获得满足感。

接下来,我会从(分享成果,赋予用户专属元素,超出用户预期)三方面分析

a. 分享成果让用户得到满足感

1. 当用户旅游或参加活动后,美食、住宿后,开心的心情和场景,希望通过社交平台分享出去。

应用在UI插画和B端产品设计中的情感化设计

b. 赋予用户专属感的元素设计( VIP 会员等 )

飞猪的会员界面设计,会员的卡片化设计,星巴克升杯,行程管家,西溪湿地门票 0.1元购买,都是赋予用户专属元素的体验设计,提升用户的满足感,进而提升产品的会员注册率和商业变现价值。

应用在UI插画和B端产品设计中的情感化设计

c. 超出用户预期的界面设计

虾米音乐的主题换肤设计,除了官方配色的皮肤设计,还有海上钢琴师等主题设计,同时用户还可以根据自己的审美偏好,自行定义皮肤的颜色,体验设计感很棒。都是超出用户预期的视觉体验设计。

应用在UI插画和B端产品设计中的情感化设计

亲切感

亲切感是指亲近友善的感受,一个人得到他人赏识、喜爱、好的评价,受到称赞而使内心得到满足感和愉悦感;在产品设计中,产品设计对用户友好,用户就会对产品产生好感。

案例分析如下 :

a. 鼓励用户分享和反馈,增加亲切感

作为一款旅游产品,用户分享内容,宝贝评价、和分享者的互动,都可以增加用户的粘性度和留存率。

增加了用户对产品的亲切感,是很棒的产品体验设计。

应用在UI插画和B端产品设计中的情感化设计

b. 以服务者的姿态做设计,增加用户的亲切感

作为一款内容型产品,让用户选择自己近期最感兴趣的内容,最美路线的旅行等内容设计,推送符合用户需要的出行信息,提升产品的活跃度。行程线路的设计,宝贝评价和很美的主题文案设计,提升了产品的亲切感。

应用在UI插画和B端产品设计中的情感化设计

什么样的设计具有格调感和品质感?

1. 具有高格调色感的设计,看起来具有典雅之美,设计特别有品质感。

a. 苹果的海报设计感,如下图所示。

1 . 周围留白的深色背景,很好的突出主视觉和主题的设计。

2 . 光感的映射,展示精致的 Ipone 的产品外观美,显得整个画面设计感,格调很美。

3 . 信息层级很明确:主视觉、主题内容,背景层、文字链接层,信息设计层级很明确,设计很棒。

应用在UI插画和B端产品设计中的情感化设计

b. 来自站酷海洛的设计图,很有品质感和格调美感,如下图所示。

应用在UI插画和B端产品设计中的情感化设计

c. 很有格调的海报设计展示,如下图所示。

应用在UI插画和B端产品设计中的情感化设计

绿色背景色,英文字母,文字排版很有设计感。辅助图片很好的融入整体画面,显得海报设计很有设计感。

小结:

  1. 情感化设计:可以拉近用户与产品之间的距离,让用户感受到产品的温度。
  2. 情感化设计的三要素:本能水平的设计、行为水平的设计、反思水平的设计。
  3. 情感化设计带给用户的三大情感体验:安全感,满足感,亲切感。
  4. 格调感和品质感的设计,有典雅美,可以提升用户体验的设计感。

情感化设计的价值和意义

应用在UI插画和B端产品设计中的情感化设计

1. 产品设计不仅要理解用户的使用习惯,也要掌握用户的情绪感受和体验。

关于 404 界面的情感化设计,如下图所示:

应用在UI插画和B端产品设计中的情感化设计

2. 情感化动效设计,让产品的体验设计去触动用户的内心,拉近产品与用户之间的距离。

比如,产品 UI 的情感化的动效设计,动态的展示可以方便用户更好的理解产品的操作过程,产品的界面设计和动态交互,可以触动用户的内心,拉近产品与用户之间的距离。

应用在UI插画和B端产品设计中的情感化设计

Guillaume Kurkdjian的动画

3. 互联网同类型的产品,在服务、功能、内容上,缺少差异化的设计,我们要重视设计的驱动价值,更好的满足用户的情感化需求的设计,可以提升用户的粘性度和愉悦感,如下图所示。

4. 差异化设计,采用符合用户心智模式的体验设计,可以占据用户心理的位置;节奏感是动画的灵魂。

好的体验设计,为您的产品设计赋能和提升用户的满意度。

差异化设计-动效设计的价值 :

1. 增加体验设计的舒适度:让用户认知过程更为清晰。

2. 增加界面活力:第一时间吸引注意力,突出重点功能。

3. 层级关系:体现元素之间的层级与空间关系。

4. 用户的反馈: 助力交互体验。

应用在UI插画和B端产品设计中的情感化设计
5. 微交互动画在情感化设计中的价值

微交互动画在界面状态之间进行了平滑的转换,并改善了应用设计的体验。用户可以更好的了解之前和当前的状态。同时,微交互动画使得设计有了情绪价值,同时为产品设计增加了必要的设计细节展示。

应用在UI插画和B端产品设计中的情感化设计

TinoFran的应用内动画

6. 语音识别动画在情感化设计中的应用

2020年的一个趋势,应用程序内语音导航工具,基于振动的用户手势响应,以及可以使内容更具对比度的应用程序,更好的提升了用户的体验感。

应用在UI插画和B端产品设计中的情感化设计

Cristian Hurhui的语音识别动画

小结:

微交互动画,UI界面的精美设计和微交互引导 – 成为了应用程序的设计条件。微交互动画都可以创造情感吸引力,并为用户带来审美满意度。可以帮助品牌与目标受众建立联系感,并建立用户对公司的忠诚度。

二、B端产品在情感化设计中的应用

应用在UI插画和B端产品设计中的情感化设计

1. 原研哉曾经提过一个理念:让感官被重新发现。“设计师先不要急着画草图,而是先想想使用者的感受”。

2. 我们决定从用户的感官情感作为切入点,通过解读用户行为背后的情绪感受,来解决用户体验设计的需求。

3. B端产品为什么要做情感化的设计 ?

用户调研思考

与用户的聊天发现,他说用某个产品经常有不想使用的感受,但是用户每天都必须使用 B 端系统设计的工作。

常规的用研方法通常是基于用户的行为。“基于产品的自身功能、设计、体验是否有问题” 这三个维度的思考。

对用户的内心感受和情感关怀的视角是关注很少。

B端产品如何去做情感化设计?

回顾 TO C 端的情感化设计,登录提示、空状态等使用插画和微交互,会提升用户体验,带给用户满足感和惊喜感,产品设计上起到锦上添花的效果。

我们在落地 B 端产品时,会发现三个问题 :

  1. 提升用户情感的方法缺少体系化和系统化。
  2. 使用视觉和微交互的设计手法,可以给用户带来部分好的价值感和情绪价值。
  3. 不能全面验证设计的产出。

学习一下 Ant Design 特色的情感化设计体系 ?

回顾一下 2018 年前,Ant Design 的设计价值观是:”确定”、”自然”。

“确定”指代设计的边界,使设计者在保持克制的状态下做出更好的决策。

“自然”是指汲取自然界中的灵感,挖掘自然的美学表达和行为交互,创建更高效和有层次的产品体验。

在”确定”和”自然”的基础上,我们反思 Ant Design 情感化设计要为用户带来什么样的基调呢。

提到企业级产品,给人的印象有”技术门槛”、”操作复杂”、”专业术语”等一些冰冷的、缺乏人情味的关键词,所以我们需要给用户带来有温度的、有人情味的产品设计。

情感化的产品设计体验,”情感”这个词,是 Ant Design 设计语言中的第三个价值观。

应用在UI插画和B端产品设计中的情感化设计

覆盖范围

接上文,情感化设计聚焦在插画、微交互层面,结合诺曼的情感化设计的三层次理论来看,偏本能层比较多。

应用在UI插画和B端产品设计中的情感化设计

这是我们非常好的设计机会点,还可以更加丰富一些。

比如:企业级产品的核心价值体现在解放生产力、提升效率,设计者如何通过完善的设计方案,协助产品为用户提升效率。

这就需要我们通过行为水平的设计去做一些事情,辅助用户更高效的使用产品,对产品产生正向的情感。

对于反思水平的设计,体现在用户对产品的所思所想,是点睛之笔,需要我们全局思考。

Ant Design 的情感化设计体系,不仅停留在视觉本能层,还要加入行为水平的设计思考。

切入点,从用户情感诉求出发,系统性地思考产品设计,哪些场景需要做情感化设计、怎么做、做到什么程度,确定什么样的产品设计目标,作出情感关怀的设计方案,结合业务层面的思考,迭代优化设计落地,提升用户在使用产品过程中的情绪体验价值。

情感定义

用户的”情绪感受”,来源于心理学,它是人对客观事物是否满足自己的需要而产生的态度和体验,引申到企业级产品领域,可以理解为用户对产品是否满足自己的需要而产生的体验感。

情感诉求导向的设计流程,分五个步骤完成情感化设计的探索和落地,如下图所示。

应用在UI插画和B端产品设计中的情感化设计

以 Ant Design 的企业级产品设计的情感指标 :

提升正向情感指标:

愉悦、惊喜、信任、期待、自豪。

转化负向情感指标:

生气、失望、疑惑、焦虑、挫折。

参考 Ant design 系列的产品设计,用户对于期待、疑惑这两种情绪是感受最多的,而自豪的成就感非常少,排到最后。

根据这个排序,Ant design 设计做到了:提升用户的正面情绪的价值感,转化用户的负面情绪价值感;

结合工作场景的思考,制作用户听得懂的情感化设计

a. 维持和提升用户对产品设计的期待感

b. 减少用户的焦虑感

c. 强化用户的信任感和愉悦感

e. 提升产品设计带给用户的惊喜感和自豪感

以阿里的企业级产品为例,落地情感化的设计目标。

在产品设计的首页,我们主要关注的是疑惑、期待、信任的三种情感。

1. 与用户产生的微互动的设计,有助于培养 Ant DataGo “简单、易用”的用户心智模型。

应用在UI插画和B端产品设计中的情感化设计

如上图,用心呈现的美学与用户互动的设计,能为我们产品打造良好的第一印象,给用户带来愉悦感和惊喜感。

2. 在次屏位置,补充了对产品核心能力的描述,进一步帮助新手用户快速认识这个产品,降低疑惑感。

应用在UI插画和B端产品设计中的情感化设计

3. 第三屏,图表分类展示。

应用在UI插画和B端产品设计中的情感化设计

4. 第四屏,满足用户的工具和资源,带给用户满足感和惊喜感。

应用在UI插画和B端产品设计中的情感化设计

以上的产品设计,提升用户的信任感,这是一个真正帮助用户的企业级系统的产品设计。

企业级产品的设计语言体系

1、网页PC端的设计语言

国外的案例如下:

2020年,Web端设计趋势中,插画始终保持着一定的地位,插画用新的方式重新定义了网页设计、UI 设计,在设计界面时,它应该是设计过程的一部分,以帮助强调品牌或网站所提供的服务及产品的信息,它能营造产品的氛围感,表达产品的情感。

国际网页设计师 Mike 的作品,精致的原型设计和视觉、插画设计,如下面两个图。

应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计

几何插画在网页设计中的应用,如下图所示。

应用在UI插画和B端产品设计中的情感化设计

2、国内企业级产品的设计体系 —— Ant Design

蚂蚁的企业级产品是一个庞大且复杂的系统,数量多且功能复杂,而且变动频繁,常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件,可以得到一些稳定且高复用性的组建化设计。

随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个目标,蚂蚁金服体验技术部经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。

基于「自然」、「确定性」、「意义感」、「生长性」之四大设计的价值观,通过模块化设计的解决方案,让计师专注于更好的用户体验设计。

应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计

色彩

系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。

色彩模型

Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计,该模型更便于设计师在调整色彩时对于颜色有明确的心理预期,同时也方便团队间设计师的沟通。

布局

UI 界面的布局空间要基于「动态、体系化」的角度出发展开思考。受到建筑界大师柯布西耶的模度思想的启发,基于「秩序之美」的原则,探索 UI 设计中的动态空间秩序,形成了 Ant Design 的界面布局方式,为设计者构筑具备理性之美的布局空间创造了条件。

在中后台视觉体系中定义布局系统,我们建议从 5 个方面出发:

1. 统一的画板尺寸。2. 适配方案。3. 网格单位。4. 栅格设计。5. 常用模度。

字体

在中后台的视觉体系中,定义字体系统,我们建议从五个方面思考字体:

1. 字体家族的选择。2. 主字体的运用。3. 字阶与行高。4. 字重的选择。5. 字体的颜色选择。

图标

Ant Design 的图标设计原则,源自”确定”和”自然”,落实到图标的设计领域,一共有四个设计原则。

1. 准确: 设计造型准确的图标(保持偶数原则,去掉小数点),选择表意准确的图标设计风格。

2. 简单: 在表意清晰准确的基础上,尽量保持图形设计的简洁。

3. 节奏:图标设计构图中的秩序之美。

4. 愉悦:图标设计带给用户的愉悦感。

关于图标设计,建立优秀的图标设计体系,需要整个团队在设计前、设计中以及设计后,都能够达成一致性的思路并且精诚合作去完成一套图标设计。

阴影

阴影来源于现实生活的反映物体与物体之间距离的物理现象。在界面设计中,通过模拟元素的投影直截了当的来告诉用户,元素之间的高度距离与层次关系。

暗黑模式使用场景思考

  1. 当需要长时间在暗光环境下工作时,建议使用暗黑模式,减小亮度对比带来的视觉压力,保证使用者的体验舒适感。
  2. 当需要沉浸式的专注工作内容时,建议使用暗黑模式,可以帮助使用者更关注凸显出来的内容和操作。

暗黑模式的设计原则

1. 内容的舒适性

暗黑模式下避免使用对比很强的色彩或内容,长时间使用会带给用户以疲劳感。

2. 信息上的一致性

暗黑模式下的信息内容需要和浅色模式保持一致性,保持原有的层级关系。

以百度网盘为例,如下图所示:

应用在UI插画和B端产品设计中的情感化设计

设计模式

秉承 Ant Design 设计价值观,针对企业级产品反复出现的设计问题,设计模式给出一般性的解决方案,实现跨应用交互一致性的有效融合。依照设计模式使用 ant design 组件化设计界面,即减少了不必要的认知成本,又能够提升交互确定性和设计的效率价值。

设计模式包含以下内容:

原则

基于设计的价值观衍生出的设计技巧,包括如何高效组织信息、帮助建立用户与界面设计的互动等原则性要求。

全局规则

通过规范用户常见的互动行为,包括导航、数据录入、数据展示、反馈、操作、帮助等,呈现组件化设计元素的标准用法。

模板文档

基于蚂蚁中台的设计经验,总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器等典型的解决方案,介绍每类页面的设计目标、设计技巧以及典型页面内容等,帮助广大设计者可以快速构建界面。

可视化的设计

可视化的设计语言是基于 Ant Design 衍生的一套具有数据可视化特性的设计指导原则,让数据表达更符合用户的心理,以帮助『设计者』孵化出更具业务特性的数据可视化解决方案,屏蔽不必要的设计差异和实现成本,从而解放『设计者』和前端的生产力,实现数据图表的研发效能全面提高。

比如:国外的一个案例 :

应用在UI插画和B端产品设计中的情感化设计

小结:

企业级产品设计中,进行情感化设计的思路和方法总结

我们希望这条情感化设计之路能给大家带来启发,其中有两点可以分享:

1. 以人为本:从用户自身出发,优先关注用户的情感,洞察到用户的真实诉求,以此来改进我们的产品体验设计。

2. 标本兼治:运用整体逻辑、全局思维,去思考情感化的设计,让设计师的视角更加开阔、更加贴近用户和产品,带着对 “人” 的关怀,去打造温暖人心的企业级产品设计。

三、插画在情感化设计中的应用

应用在UI插画和B端产品设计中的情感化设计

插画(图形化的设计语言)

“插画是一种视觉形象化的设计,它的基本诉求功能是将信息最清晰、最明确、最直接的传递给观众。”——徐海鸥《插画的艺术》

插画的设计原则

从最底层的设计价值观到最上层的设计方法,HiTu 沿袭了 Ant Design 的 ETCG 的设计思路,将图形化资产组件化,分可形成模板,合则可拼搭成案例。

应用在UI插画和B端产品设计中的情感化设计

国外设计师的插画案例,应用在网页设计中,如下图所示。

应用在UI插画和B端产品设计中的情感化设计

2. 数码插画在情感化设计中的应用

当下,带有醒目的有趣数字插图的用户界面。在创新和艺术实验的渴望驱使下,设计师们在UI设计中尝试使用明亮而勇敢的插图。

应用在UI插画和B端产品设计中的情感化设计
应用在UI插画和B端产品设计中的情感化设计

用户界面设计者Victor Nikitin

用户交互伴随着精美的插画。您可以看到各种插画的艺术设计风格,技术和新的数字插画趋势,成为一幅令人难忘的画面,对用户产生了强烈的情感吸引力。

3. 插画提升信息的传达效率,插画在产品设计中越来越重要。

用户对于具象元素的感知能力远高于文字,为了提升内容的易读性,可以使用插画。以教育APP 为例,如果我学教育课程,就会在教育界面的任务界面中,搭配一个教育类型的插画;通过插画上所描绘的场景可以知道是教育产品的主题设计。插画在这里替代传统意义上“标题”,插画结合 “标题” 可以更加高效传达内容。

应用在UI插画和B端产品设计中的情感化设计

4. 插画能传递情绪价值。例如我们一般会给一个产品界面配一个主题插画,而所有的活动都是通过创建使用场景,使用户产生诉求的。如果这里只使用文字,那么用户需要通过文字进行联想来感知这个场景,配上插画则省去了思考的过程,让用户更容易认知,推送消息的打开率会提升,如下图所示。

应用在UI插画和B端产品设计中的情感化设计

插画可以让用户更好的感知的界面设计中的内容;用户对于插画的欣赏,让用户有很好的代入感。

5. 插画的尺寸比例一般是:1:1、3:2、4:3 和 16:9 ,如下图所示。

a. 突出展示内容的主体,考虑正方形构图,1:1 的比例 ,突出表现产品的信息 ; 如下图红色的区域所示。

应用在UI插画和B端产品设计中的情感化设计

b. 3:2 和 4:3 的尺寸比例差不多,比如 ipone 默认拍摄出来的照片,网页设计中的图片比例是 4:3, 如下图红色的区域所示。

应用在UI插画和B端产品设计中的情感化设计

c . 目前主流手机的屏幕比就是 16:9 这个尺寸。

为什么是16:9 ?因为根据人体工程学的研究,人的两只眼睛的视野范围是一个长宽比例为16 : 9 的长方形,所以笔记本显示器等行业都是根据黄金分割比例来设计产品。16:9 的配图在视频类 APP 中应用得最多,符合用户的浏览习惯。如下图红色的区域所示。

应用在UI插画和B端产品设计中的情感化设计

小结:以上列举的是常见插画的尺寸比例。

6. 国际网页设计师 Mike 的设计作品,插画在网页设计中的应用,如下图所示。

应用在UI插画和B端产品设计中的情感化设计

今天就分享到这里了,小伙伴我们下期再见

业界动态

社群营销:如何增强用户的参与感?

2020-8-7 11:40:44

业界动态

做B端产品决策或产品设计前,需要判断需求价值

2020-8-7 12:43:54

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索