首页

常见的 10 大图标设计风格

天宇 图标设计文章及欣赏

图标是产品中不可或缺的部分,随着设计趋势的不断变化,图标设计风格也在不断丰富。在产品中会出现哪些常见的图标设计风格呢?结合产品案例体验,今天黑马哥为大家简单梳理一下,列举出常见的 10 个图标设计风格。
常见的 10 大图标设计风格
 
 
 
 
1. 线性功能图标
线性功能图标是产品中最常见的风格,设计时控制好图标规范即可。常见的多为单色(无彩色系、品牌色等),也有用品牌色作为点缀色的案例。
常见的 10 大图标设计风格
 
 
 
 
2. 面性功能图标
面性功能图标与线性风一样,也是产品中最常见的风格。有单色单图形、多色叠加风、微渐变风格等表达形式。
常见的 10 大图标设计风格
 
 
 
 
3. 磨砂玻璃质感图标
磨砂玻璃质感图标是轻质感的表达形式之一,也是近些年较为流行的趋势。可以扁平也可以微质感,在立体感图标上面也可以运用这类效果。
常见的 10 大图标设计风格
 
 
 
 
4. 微质感图标
微质感图标相较于扁平化设计而言,更能突出细节的深入和真实感的体现。微质感图标的层次感也更丰富,该技法也是设计师的必备技能。
常见的 10 大图标设计风格
 
 
 
 
5. 晶白风图标
晶白风图标常用于金刚区栏目,利用白色不透明度关系和背景色关系进行图标设计,图标质感、层次感、空间感等都能得以体现。
常见的 10 大图标设计风格
 
 
 
 
6. 立体感图标
立体感图标分为 2.5D、伪 3D、3D 建模等形式,特别是随着三维设计趋势的普及,立体感图标的运用也逐步普及,也可以利用 AI 工具完成该类型图标。
常见的 10 大图标设计风格
 
 
 
 
7. 插画风图标
插画风图标是插画风格的简化融入,以此提升图标设计的特征感,使得图标具备差异化的视觉效果,也能烘托出整体设计的质量。
常见的 10 大图标设计风格
 
 
 
 
8. 主题化图标
主题化图标设计风格多样,会结合活动主题或者节日庆典等内容,根据主题设计图标更能体现产品温度。
常见的 10 大图标设计风格
 
 
 
 
9. 写实类图标
写实图标是以技法表现实物特征,比较考验质感表现、透视光影等技法能力。随着扁平化趋势,写实类设计逐步被淡化,但是也有部分产品会局部性运用。
常见的 10 大图标设计风格
 
 
 
 
10. 实物图图标
直接将产品实物图作为图标相对较少,但是依然有产品会选择使用,还原其内容表达的真实性。
常见的 10 大图标设计风格
 
 
 
以上为产品中常见的图标设计风格,根据不同需求采用。对于设计师而言,这也是首先需要掌握的图标技能。
 
本文由 @黑马青年(heimaui)原创发布。未经许可,禁止转载。

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

小卡片大布局-带你掌握卡片设计攻略

天宇 移动端UI设计文章及欣赏

UI界面中的卡片设计是一种常见且有效的设计方式,它通过将内容以模块化、层次化的形式呈现,提升了界面的可读性和用户体验。通过分割特性,可以赋予界面更多的层次感,为用户带来视觉上的愉悦。然而,卡片式设计并不是无懈可击的,由于其分割的特性可能会对用户的沉浸式浏览体验产生一定的影响,例如造成横向和纵向空间的浪费等问题。因此,在决定是否使用卡片式设计时,我们需要根据实际场景和内容形式进行判断,而不是刻意追求“卡片式”而设计。
卡片在移动端设备上,运用的越来越多,然而,在选择使用卡片设计、视觉呈现方式以及其优点和缺点等关键因素方面,仍然存在一些被忽视的细节。在进行卡片设计时,我们应该注意哪些细微之处呢?以下我们就一起来探讨下如何设计卡片。
一、卡片的概念
小卡片大布局-带你掌握卡片设计攻略
 
 
什么是卡片?
 
在日常生活中,一些常用的银行卡、名片、VIP卡、扑克牌等就是一张卡片,这些卡片主要是用来传递卡片本身的一些信息。例如使用者可以从银行卡上获取卡片的所属银行、卡号等信息;可以从名片中知道卡片所属人以及此人的一些基本信息等。
UI界面中的卡片设计是一种常见且有效的设计方式,它通过将内容以模块化、层次化的形式呈现,提升了界面的可读性和用户体验。
小卡片大布局-带你掌握卡片设计攻略
 
 
卡片出现在了我们生活中的方方面面,如名片、不干胶标签、便利贴、会员卡..等,不管是何种类型的卡片,它都将代表着我们现实生活中的某个特定信息。卡片,通常包含图片或文本信息,是一种有效的信息承载方式。UI界面中的卡片设计是一种常见且有效的设计方式,它通过将内容以模块化、层次化的形式呈现,提升了界面的可读性和用户体验。
小卡片大布局-带你掌握卡片设计攻略
 
 
卡片式设计是一种常见的UI组件,它能够将不同的内容分层次组合在一起,从而让页面看起来更有秩序感。卡片通常由标题、内容描述、图像、按钮等元素组成,自带简约和易用的属性,方便用户快速理解和操作。
小卡片大布局-带你掌握卡片设计攻略
 
 
二、卡片的交互设计
小卡片大布局-带你掌握卡片设计攻略
 
 
当用户与卡片进行交互时,卡片需要星现特定的视觉反馈。常见的卡片状态包括默认、
悬浮(pc端)、激活、选中
等。
小卡片大布局-带你掌握卡片设计攻略
 
 
为了更好的区分卡片和背景,可以用填充底色、措边、添加阴影来让卡片与背景有区分。
小卡片大布局-带你掌握卡片设计攻略
 
 
卡片的可读性主要取决于字体的选择和字号的大小,例如,即使两个卡片具有相同的布局,但如果选择的字体和字号不同,它们的可读性和视觉效果可能会有很大的差别。
小卡片大布局-带你掌握卡片设计攻略
 
 
卡片上的文字间距最好有一定的规律,这里可以按网格法来规划,比如8px网格,10px网格等等。网格的使用其实可以很灵活,比如我这里的卡片其实就用到了8px网格,各间距就会用8的倍数来做。大小比例就尽量用黄金比例来处理,这样做目的一方面是为了让界面有秩序,另一方面是提升决策效率。
小卡片大布局-带你掌握卡片设计攻略
 
 
在设计卡片布局时,通常会将多个卡片以网格的形式排列在页面上,以保持水平方向和垂直方向的对齐,这样可以使页面看起来更有序、更规范。
小卡片大布局-带你掌握卡片设计攻略
 
 
当卡片中包含标题、内容、图片和按钮等多种元素时,需要考虑到标题与圈片的位置关系以及标题和内容的长短等因素。例如,如果卡片的顶部是标题,由于标题字数可能不确定,我们可以在卡片上方保留至少两行的空间以容纳标题,而保持卡片内的图片和按钮位置不变。
三、常见的卡片样式
小卡片大布局-带你掌握卡片设计攻略
 
 
小卡片大布局-带你掌握卡片设计攻略
 
 
边距卡片,
这种类型的卡片在UI设计中最为常见,柔和的固角、边缘阴影以及四周很自然的留白,让内容模块的存在感更加强烈,整个页面信息的层级也更加清晰。
小卡片大布局-带你掌握卡片设计攻略
 
 
悬浮卡片
并非模态弹窗,与模态弹窗相比,悬浮卡片无需主动操作触发,可作为临时控件或长期固定显示。此外,悬浮卡片能承载更多信息内容,可通过伸缩来定义卡片中的信息数量,多则展示全部内容,少则仅显示关键信息,非常灵活。
通栏卡片
具有更强的视觉阻断,对区分不同的功能模块有不错的效果,不过这种类型只通过页面背最色保留上下边间、且不会过多,不然页面会显得零散、杂乱。
四、卡片、列表、无框设计的区别
什么是卡片设计
卡片式设计借用了现实世界中的卡片的特征,就像一张信用卡或名片,它承载了图片、文字、按钮等元素,以一个缩略的形式提供了快速浏览信息的模块。在视觉表现形式上,卡片式设计可以分为扁平式卡片和通栏式卡片,前者更像传统意义上的卡片,上下左右都留有空隙:后者仅在上下留有空隙,甚至无空隙。
卡片式设计的优点
1.独特的设计语言
,卡片本身是一种设计语言,就像面形图标一样具有矩形的形状,带着圆角或直角,甚至还有轻微的阴影。这种独特的设计语言可以快速地从扁平化设计中区分出来,带给用户强烈的辨识度。例如 Google 将卡片作为 Material design 的设计语言,运用到 Android系统所有的移动设备上,形成了独一无二的视觉风格。
小卡片大布局-带你掌握卡片设计攻略
 
 
2.灵活的空间扩展
,相比传统的列表式设计只能纵向滚动浏览,卡片式设计的空间扩展性更加灵活多变。由于每一个卡片都是独立存在的因此既可以纵向滚动,也可以横向滑动。例如马蜂窝的卡片式设计通过横向滑动在狭窄的屏幕上展示更多内容,花瓣的两列卡片式设计也为界面空间提供了更多的展示内容,这些都大大提高用户的浏览效率。
小卡片大布局-带你掌握卡片设计攻略
 
 
3.清晰的视觉呈现。
卡片化繁为简,将不同类型的元素有效地组织!在一起,形成一个封闭式的视觉形式。每一个卡片之间都具有独立性不会相互干扰,它们保持着一致的外观,让界面看上去干净和简洁。例如 App Store 和去哪儿赋予每一个卡片一个主题,以简单明快的内容表现形式吸引用户的注意力,简洁、连贯的卡片也避免了因为内容太长让用户产生畏惧心理。
小卡片大布局-带你掌握卡片设计攻略
 
 
4.易于的内容整理。
卡片是一个容器,将不同纬度的内容进行区分或将相同纬度的内容归纳在一起,形成一个独立的模块,能有效地避免信息散乱和分类不清晰的状况发生,让界面的视觉层次变得清晰。例如途牛在一个界面中展示了多种不同形式的卡片式设计,通过卡片的大小颜色、图文组合进行区分,视觉层次清晰明了。再例如腾讯视频将相同功能的列表进行分组,有助于用户快速获取信息。
小卡片大布局-带你掌握卡片设计攻略
 
 
5.特殊的功能属性。
卡片不仅是内容的容器,同样也是操作和交与的载体,由于它的视觉表现是独立存在的,因此可以用于背景之上的对话框设计,以强烈的视觉表现力寻求一次互动。例如进入后弹出一个对话框,请求用户开启通知。再例如滴滴出行和美团外卖将一次活动推广展现在卡片上,以此快速吸引用户的注意力。
小卡片大布局-带你掌握卡片设计攻略
 
 
什么是列表式设计
列表式设计是 App 中最常见的表现形式,它使用分割线对不同的元素进行有效的组织,帮助用户理解界面的视觉层次。在视觉表现形式上,列表式设计根据分割线的不同长度可以分为半分割线式列表、缩进分割线式列表和通栏分割线式列表。
列表式设计的优点
1.轻量化的设计。
列表式设计是真正意义上的扁平化设计,不像卡片式设计那样有着清晰的视觉层次,它让所有的信息内容处于同一个平面。这样的好处是干净的界面可以减少对用户的视觉干扰,以便用户顺畅的进行浏览。亲切和友好的用户体验是列表式设计的最大优点,它非常适合于形式简单的信息内容。例如网易云音乐和今日头条的每一条动态都有着相似的形式,轻量化的列表式设计让用户的浏览变得轻松和优雅。
小卡片大布局-带你掌握卡片设计攻略
 
 
2.提升浏览效率。
列表式设计没有宽厚的空隙作为信息内容的区分而是使用一条细窄的分割线。它非常适合于非常多的同类的信息内容、可以极大地节省界面的空间,让狭小的屏幕显示更多内容,在无形中就提升了用户的浏览效率。例如 微博 和腾讯新闻的商品都是左图右文的结构,使用简单的列表式设计,有助于用户快建地进行浏览。
我们再来试看分析微博动态为什么使用卡片式设计,而不是列表式设计。首先,微博强调每一个动志的丰富内容和独特个性,希望用户进行分事、评论和点赞操作,卡片式设计有效地将用户的注意力停量在当前的卡片上;其次,五花八门的内容形式使用卡片式设计易于整理,可以保持清晰的视觉层次。
什么是无框式设计
无框式设计是一种去形式化的设计,它强调化繁为简,去除一切与内容无类的装饰性元素,旨在突出内容本身、好让重要的信息及功能更容易被关注,让用户更加清晰和直观地进行浏览。在无框式设计中,你几乎看不到区分内容的分割线,它通过大间距就完成了视觉层次的划分留白是它的最大武器。
小卡片大布局-带你掌握卡片设计攻略
 
 
无框式设计的优点
1.极简主义风格。
相比卡片式设计追求“多”,无框式设计则追求“少”,即用最简单的形式和最理性的设计创造最深入人的艺术感受例如余音使用白色的背景,左小右大的边距和大量的留白,呈现出一种独特的产品气质。列表设计去掉分割线,干净到一尘不染的界面让用户产生极为深刻的印象。
2.掌控注意力
。无框式设计最显著的特征就是去除装饰性的分割线通过间距的亲密和疏远对比进行视觉层次的划分。大量的留白设计把空间留给内容,把内容留给用户。使用了无框式设计没有了那些分割线的干扰,有效地掌控了用户的注意力,让用户把目光集中在内容本身。
3.保持界面整洁。
设计是连贯、统一的,没有了边框可以让界面保持干净、整洁的画面。而一旦有了边框,这种简洁的设计就会被打部精王德商处可见那些细碎的分副线或描边,使得界面变的拥挤不堪。大部分用户都喜爱干净、整洁的画面,微博和腾讯新闻就是这样的设计。
五、卡片的应用场景
小卡片大布局-带你掌握卡片设计攻略
 
 
瀑布流
瀑布流主要正针对图片较多、或以图片为主的内容设计,它最大的优点是无需过于在意图片的高度,最大限度的还原原始图片效果。
信息流
信息流主要通过文字、图片或视频等媒介来展示较长的内容,这需要用户花费一定的时间进行滑动和浏览,才能筛选出对自己有用的信息。
左右滑动
在音乐、视频等以图片为主要内容的产品中,卡片式左右滑动的设计最为常见。这是因为卡片式设计能够更好地展现内容的层次感和吸引力,尤其对于以图片为主的产品来说,卡片式设计可以提供更丰富的视觉效果,增强用户的浏览体验。
页面头部
卡片式设计是一种有效的布局方式,它可以在个人中心、个人主页、会员等页面中,将关键信息进行整合和概括,从而形成清晰、连贯的视觉结构。
 
六、卡片的设计原则
在UI界面中,卡片设计是一种重要的布局方式,它以其简洁性、模块化和可自定义特性而备受设计师与使用者青睐。以下是卡片设计时需要遵循的一些关键原则:
小卡片大布局-带你掌握卡片设计攻略
 
 
一、简洁清晰原则
信息精炼:每张卡片应仅展示关键信息或功能,防止信息负荷过大,确保用户能够快速获取所需内容。
视觉元素简洁:避免在卡片上添加过多的装饰性元素,保持设计的简洁性。
二、一致性原则
视觉风格统一:不同卡片之间应保持一致的视觉风格,包括颜色、字体、图标等,以提高用户识别及使用效率。
布局规范:卡片的布局应遵循一定的规范,如边距、圆角大小等,以保持整体的一致性。
三、层次性原则
信息层级明确:通过字体大小、颜色、图标等方式明确信息的层级关系,引导用户按照重要性顺序浏览信息。
视觉空间感:利用投影、前后颜色设定等手段提升整体设计层次感,使卡片看起来更加立体和自然。
四、交互体验原则
操作便捷:为用户提供充足的操作空间与方式,如点击、滑动等,鼓励用户深度参与信息生成与传播过程。
反馈及时:在用户与卡片进行交互时,应提供及时的反馈效果,如颜色变化、动画等,以增强用户的交互体验。
五、适应性原则
响应式设计:卡片设计应能够适应不同屏幕尺寸和设备类型,确保在各种环境下都能保持良好的显示效果。
内容灵活:卡片的内容应具有一定的灵活性,可以根据实际需求进行调整和更新。
六、设计细节原则
圆角设计:圆角的设定应符合整体的风格调性,大圆角表达柔和,小圆角表达硬朗。
边距与留白:合理的边距和留白可以提升整体设计的层次感,使内容更加突出且易于阅读。
标题与正文:标题应简短明了,用于说明卡片的内容;正文部分则应简洁精炼,避免冗余信息。
卡片设计在UI界面中扮演着重要角色,它不仅能够提升用户体验,还能增强信息的可读性和可理解性。因此,在进行卡片设计时,应遵循简洁清晰、一致性、层次性、交互体验、适应性以及设计细节等原则,以确保卡片设计的质量和效果。
总结
随着科技的不断进步和用户需求的变化,卡片设计也在不断发展和创新。未来,卡片设计将更加注重个性化和智能化。通过用户行为分析和机器学习等先进技术手段,可以为用户提供更加精确和个性化的推荐和服务。同时,虚拟现实(VR)和增强现实(AR)等新技术的发展也将为卡片设计带来更多元化的应用场景和更丰富的用户体验。
综上所述,UI界面中的卡片设计是一种重要且有效的设计方式。通过遵循设计原则、掌握设计技巧并借鉴优秀案例,可以设计出既美观又实用的卡片界面。


作者:蘑菇小象117
链接:https://www.zcool.com.cn/article/ZMTYzNjU2MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

数据图表:多领域信息可视化的核心工具

ui设计分享达人 大数据可视化设计文章及欣赏

 
 
PART 1 ——————
数据图表的概述
数据图表是将复杂的数据集转换为图形或图像的过程,旨在通过视觉化的方式简化信息的理解和分析。它不仅是一种技术手段,更是一种沟通工具,能够帮助人们更有效地解释数据、发现模式、做出决策并传达见解。
数据图表:多领域信息可视化的核心工具
 
 
「核心价值」
·  简化复杂信息:数据图表通过图形化的手段简化了大量数字或文本信息,使读者能够迅速抓住关键点。
·  促进理解与学习:利用人类大脑对图形和色彩的敏感性,数据图表加速了信息处理过程,支持教育和培训。
·  辅助决策制定:数据图表为管理层或其他决策者提供了有价值的商业智能,支持快速决策。
·  提升沟通效果:促进了跨部门协作和公众传播的效果。
 
「核心要素」
·  数据:来源可以是数据库、API或文件,类型包括定量和定性数据。
·  图表类型:根据数据特性和分析目的选择最恰当的图表类型。
·  设计原则:确保图表清晰易读、准确无误、风格一致且具备视觉吸引力。
 
「核心目标」
·  简化复杂信息:使大量数字或文本信息变得直观易懂。
·  促进理解与学习:加速信息处理过程,支持教育和培训。
·  辅助决策制定:提供有价值的商业智能,支持快速决策。
·  提升沟通效果:增强跨部门协作和公众传播的效果。
·  探索数据关系:发现隐藏模式,验证假设。
·  监测与跟踪进展:实时监控关键指标,规划项目管理。
 
⭐️ 
PART 2
 ——————
应用标准指南
数据图表:多领域信息可视化的核心工具
 
 
设计有效的数据图表不仅需要选择合适的图表类型,还需要遵循一系列设计要点以确保图表既美观又实用。以下是应用数据图表时需要注意的标准指南:
 
1. 明确目标与受众
·  理解需求:明确你希望通过图表传达的信息是什么。
·  考虑受众:了解你的目标受众是谁,他们的知识水平和兴趣点在哪里。
2. 简洁性与清晰度
·  去除冗余:避免不必要的装饰元素,保持图表简单明了。
·  突出重点:通过颜色、字体大小等方式强调最重要的信息。
·  易于解读:确保图表中的每个元素都有其明确的意义,并且容易被理解。
3. 数据准确性
·  精确无误:保证所使用的数据是最新且经过验证的。
·  透明度:注明数据来源,增加可信度;如果适用,提供数据获取方法或计算公式。
4. 合理使用颜色
·  色彩心理学:根据情感联想选用颜色,例如绿色通常关联增长,红色常用来警示。
·  对比度:使用足够的颜色对比来区分不同的数据系列或类别,同时考虑到色盲用户的需要。
·  一致性:在多个图表中保持颜色方案的一致性,以便于比较。
5. 标签与注释
·  完整标签:为所有轴、图例和其他重要元素添加清晰的标签。
·  必要注释:对于特别重要的数据点或异常情况进行说明,帮助用户更好地理解图表内容。
6. 图表标题与描述
·  简洁标题:用简短而准确的语言概括图表的主要信息。
·  辅助文本:如有必要,可以添加副标题或简短描述来补充背景信息或解释图表含义。
7. 交互性(如适用)
·  工具提示:当用户将鼠标悬停在某个数据点上时,显示详细信息。
·  动态更新:对于实时数据,设计允许自动刷新的图表。
·  筛选与排序:提供选项让用户根据自己的兴趣过滤或重新排列数据。
8. 响应式设计
·  适应多平台:确保图表能够在不同设备(桌面电脑、平板电脑、智能手机)上良好显示。
·  可缩放:允许用户放大特定区域或滚动查看超出初始视图的数据。
9. 避免误导性表示
·  比例尺的选择:合理设置Y轴起始值和增量,避免夸大或缩小差异。
·  避免三维效果:除非绝对必要,否则不要使用三维效果,因为它们可能会扭曲感知比例。
10. 故事讲述
·  逻辑连贯:构建一个从开始到结束逐步理解数据背后意义的故事线。
·  引导视线:通过布局和视觉层次引导观众关注最重要或最有趣的部分。
11. 测试与反馈
·  用户测试:邀请真实用户测试图表,收集反馈以改进设计。
·  持续优化:基于用户反馈和技术进步不断调整和完善图表设计。
 
遵循上述标准可以帮助创建出既美观又功能强大的数据图表,从而更有效地支持决策过程并促进信息交流。
 
⭐️ 
PART 3 
——————
图表构成元素
想准确的将图表与所要表现的数据进行对应,需要了解图表本身所包含的基本元素。
数据图表:多领域信息可视化的核心工具
 
 
在这些元素中正常情况下一定在图表中的有:标题、时间范围、图形主体,经常出现的有:坐标系、图例、提示信息,有时候会有的有:切换选项和值域。
 
· 标题
(Title)
简明扼要地说明图表的内容和目的。
标题应位于图表上方居中位置,使用清晰易读的字体和大小。
 
· 坐标系(Coordinate System)
定义图表的X轴和Y轴,以及数据点的位置。
坐标轴应清晰地标记,包括刻度线和刻度值。确保刻度间隔合适,易于阅读。
 
· 时间范围(Time Range)
告知用户图表数据覆盖的时间段。
如果图表显示的是时间序列数据,时间范围可以放在标题下方或者图表底部的X轴标签旁边。
 
· 图形主体(Graph Body)
定义图表的X轴和Y轴,以及数据点的位置。
坐标轴应清晰地标记,包括刻度线和刻度值。确保刻度间隔合适,易于阅读。
 
· 图例(Legend)
解释图表中不同颜色或图案代表的数据系列。
图例应放置在图表的边角位置,不妨碍图表的主体内容。图例中的颜色或图案应与图表中的一致。
 
· 提示信息(Tooltip)
允许用户选择不同的数据系列或时间范围。
切换选项可以是按钮或下拉菜单的形式。应放置在图表的一侧或顶部,不影响图表主体的可视性。
 
· 切换选项(Toggle Options)
允许用户选择不同的数据系列或时间范围。
切换选项可以是按钮或下拉菜单的形式。应放置在图表的一侧或顶部,不影响图表主体的可视性。
 
· 值域(Value Range)
允许用户调整坐标轴的范围,以聚焦于特定的数据区间。
值域调整通常出现在坐标轴附近的小控件中,例如滑块或输入框。
 
⭐️ 
PART 4 
——————
常见的数据图表类型
数据图表:多领域信息可视化的核心工具
 
 
在C端(消费者端)应用中,数据图表是一种非常重要的可视化工具,它能够帮助用户更直观地理解和分析数据。
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
数据图表:多领域信息可视化的核心工具
 
 
 
⭐️ 
PART 5 
——————
选择合适图表的关键因素
数据图表:多领域信息可视化的核心工具
 
 
挑选最佳图表类型是一个综合考量数据集特点、应用场景需求以及目标受众理解能力的过程,是确保数据有效传达的关键。以下是选择图表类型时应考虑的几个重要要点:
 
1. 数据性质
·  定量 vs 定性:确定你的数据是数值型(如销售额、温度)还是分类型(如性别、地区)。数值型数据通常适合柱状图、折线图等;分类型数据可能更适合饼图或条形图。
·  时间序列 vs 非时间序列:如果数据随时间变化,如股票价格或天气预报,则折线图和面积图可能是最佳选择。如果是静态数据,如人口统计信息,则可以考虑柱状图或饼图。
 
2. 比较需求
·  类别对比:如果你需要比较不同类别的数量或比例,柱状图、条形图和饼图是很好的选择。
·  趋势分析:对于展示随时间或其他连续变量的变化趋势,折线图和面积图更为合适。
·  相关性探索:当你要研究两个变量之间的关系时,散点图可以帮助你发现潜在的相关性或模式。
 
3. 数据量与复杂度
·  少量数据:对于简单且数据点较少的情况,饼图、条形图等可以直接清晰地传达信息。
·  大量数据:面对大量数据或高维数据集时,热力图、气泡图、树状图等能够更有效地处理复杂信息,并帮助识别模式。
 
4. 用户目标与受众理解能力
·  决策支持:如果目的是辅助快速决策,那么应该选择易于解读、直观明了的图表类型,如子弹图、漏斗图等。
·  教育或解释:针对教育目的或需要详细解释的数据,可以选择更具互动性的图表,如带有工具提示或动态更新功能的图表。
 
5. 图表的功能性
·  强调差异:如果你想突出显示异常值或显著差异,可以选择箱线图、瀑布图等。
·  构成分析:为了展示各部分占整体的比例关系,饼图和堆叠柱状图非常有用。
·  分布展示:直方图和密度图能很好地展示数据的分布情况,包括集中趋势和离散程度。
 
6. 可视化效果与美观性
·  视觉吸引力:某些图表不仅传递信息,还能增强视觉美感,如玫瑰图、雷达图等,适用于报告封面或演示文稿中。
·  空间效率:在有限的空间内传达更多信息,子弹图、仪表盘等紧凑设计的图表是不错的选择。
 
7. 行业惯例与标准
·  领域特定:不同的行业可能有其偏好使用的图表类型,例如金融领域常用蜡烛图,地理信息系统常用地图可视化。
·  遵循规范:遵守所在领域的图形表示规范,确保图表的专业性和可接受性。
 
通过综合考虑上述要点,你可以为特定的数据集和应用场景挑选出最合适的图表类型,从而最大化数据的价值并促进有效的沟通。选择图表时,务必结合实际需求和用户背景,确保最终呈现的信息既准确又易于理解。
 
⭐️ 
PART 6 
——————
使用场景
数据图表:多领域信息可视化的核心工具
 
 
「健康类应用」
健康类App通过使用多样化的数据图表,不仅让用户对自己的健康状况有了更直观的理解,同时也激励用户采取积极的生活方式改变,从而改善健康状况。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  直观布局:图表的颜色和布局让用户能够迅速获取关键信息,如每日步数、卡路里消耗等。
·  视觉层次分明:使用不同的颜色、字体大小和对比度来区分关键信息和次要信息,最重要的数据一目了然。
·  一致性:整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
 
2. 互动性
·  深度探索:用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的锻炼记录或饮食摄入情况。
·  多维度筛选:灵活的筛选选项,让用户可以根据时间范围(日、周、月)、运动类型等进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为图片或CSV格式的功能,便于打印或分享给教练或朋友。
 
3. 个性化
·  用户定制:根据用户的个人健康目标或偏好调整图表内容,例如突出显示关键指标的变化趋势或特定训练方案的效果。
·  目标跟踪:类似于健康管理目标设定,允许用户设定并跟踪自己的健身目标,如减重、增肌等。
·  建议与反馈:集成系统推荐的图表视图或设置,方便用户快速评估进展,并为用户提供有针对性的反馈和建议。
 
4. 实时更新
·  即时反馈:图表能够迅速反映最新的健身数据,如实时监测的心率或运动进度,这对于及时调整训练计划尤为重要。
·  同步与整合:与其他健身设备或平台无缝对接,自动同步来自各种来源的数据,如智能手环、跑步机等,确保数据的完整性和准确性。
·  通知与提醒:当某些关键指标达到预设目标或需要特别关注时,及时向用户发送通知或提醒,鼓励持续参与。
 
5. 教育与支持
·  学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的健身数据和图表背后的意义。
·  社区交流:创建一个安全的社区平台,让用户之间可以交流经验和支持,增加互动性和动力。
 
综上所述,健身类APP图表运用的设计特点不仅强调了清晰易读、互动性强、个性化定制和实时更新,还特别注重用户体验和社区互动。这些特性共同作用,可以帮助用户更有效地管理和理解健身数据,从而促进更好的健康管理和运动效果。
 
「医疗辅助应用」
医疗辅助应用的数据图表设计特点可以从健身类APP的设计特点中汲取灵感,但同时也需要考虑到医疗行业的特殊需求和严格标准。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  专业术语解释:确保图表本身清晰易读的同时,提供必要的术语解释或简短说明,帮助非专业人士理解复杂的医学概念。
·  视觉层次分明:使用不同的颜色、字体大小和对比度来区分关键信息和次要信息,确保最重要的数据一目了然。
·  一致性:保持整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
 
2. 互动性
·  深度探索:用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的测量结果或特定治疗阶段的效果。
·  多维度筛选:灵活的筛选选项,让用户可以根据时间范围(日、周、月)、病患群体、疾病类型等进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为PDF、CSV等格式的功能,便于打印或分享给其他医疗专业人员。
 
3. 个性化
·  患者定制:根据患者的健康状况、治疗计划或个人偏好调整图表内容,例如突出显示关键指标的变化趋势或特定治疗方案的效果。
·  医生建议:集成医生推荐的图表视图或设置,方便医生快速评估病情进展,并为患者提供有针对性的反馈。
·  健康目标跟踪:类似于健身APP中的目标设定,允许患者设定并跟踪自己的康复或健康管理目标,如血压控制、体重管理等。
 
4. 实时更新
·  即时反馈:图表能够迅速反映最新的健康数据,如实时监测的生命体征或实验室检测结果,这对于紧急情况下的决策尤为重要。
·  同步与整合:与其他医疗设备或系统无缝对接,自动同步来自各种来源的数据,如可穿戴设备、医院信息系统等,确保数据的完整性和准确性。
·  通知与预警:当某些关键指标超出正常范围时,及时向患者和相关医护人员发送通知或警告,以便采取必要的干预措施。
 
5. 隐私与安全
·  数据加密:所有传输和存储的数据都应经过严格的加密处理,确保患者信息的安全。
·  访问权限控制:实施细粒度的权限管理,确保只有授权人员可以查看敏感数据。
·  合规性:遵守相关的法律法规和行业标准,如HIPAA(美国健康保险流通与责任法案)或其他国家/地区的疗数据保护法规。
 
6. 教育与支持
·  学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的健康数据和图表背后的意义。
·  社区交流:创建一个安全的社区平台,让患者之间或患者与医生之间可以交流经验和支持。
 
综上所述,医疗辅助Web应用的数据图表不仅要具备清晰易读、互动性强、个性化定制和实时更新的特点,还需要特别关注隐私保护和安全性,以及提供足够的教育和支持资源。这些特性共同作用,可以帮助医疗专业人员和患者更有效地管理和理解健康数据,从而促进更好的医疗服务和健康管理。
 
「金融类应用」
金融类应用的数据图表设计需要特别关注清晰性、互动性、个性化和实时更新,同时还要考虑到金融行业的特殊需求如安全性、合规性和专业性。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  直观布局:图表的颜色和布局让用户能够迅速获取关键信息,如股票价格走势、投资组合表现等。
·  视觉层次分明:不同的颜色、字体大小和对比度来区分关键信息和次要信息,确保最重要的数据一目了然。
·  一致性:整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
·  术语解释:提供必要的术语解释或简短说明,帮助非专业人士理解复杂的金融概念。
 
2. 互动性
· 深度探索:用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的交易记录或市场波动情况。
·  多维度筛选:灵活的筛选选项,让用户可以根据时间范围(日、周、月、年)、资产类型(股票、债券、基金等)进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为图片、PDF或CSV格式的功能,便于打印或分享给财务顾问或同事。
·  情景模拟:提供情景分析工具,用户可以调整变量(如利率、通胀率)来预测不同市场条件下的投资表现。
 
3. 个性化
·  用户定制:根据用户的个人投资目标或偏好调整图表内容,例如突出显示关键指标的变化趋势或特定投资策略的效果。
·  风险偏好匹配:基于用户的风向承受能力,推荐适合的投资组合配置,并展示相应的风险与回报图表。
·  建议与反馈:集成系统推荐的图表视图或设置,方便用户快速评估投资进展,并为用户提供有针对性的投资建议和反馈。
 
4. 实时更新
· 即时反馈:确保图表能够迅速反映最新的金融市场数据,如实时股价、汇率变动等,这对于及时调整投资策略尤为重要。
·  同步与整合:与其他金融平台或服务无缝对接,自动同步来自各种来源的数据,如银行账户、证券账户等,确保数据的完整性和准确性。
·  通知与提醒:当某些关键指标达到预设阈值或需要特别关注时,及时向用户发送通知或提醒,帮助用户抓住投资机会或规避风险。
 
5. 安全与合规
·  数据加密:所有传输和存储的数据都应经过严格的加密处理,确保用户隐私和资金安全。
·  访问权限控制:实施细粒度的权限管理,确保只有授权人员可以查看敏感数据。
·  合规性:遵守相关的法律法规和行业标准,如GDPR(欧盟通用数据保护条例)、SOX(萨班斯-奥克斯利法案)等,确保数据处理符合法律要求。
 
6. 教育与支持
·  学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的金融数据和图表背后的意义。
·  社区交流:创建一个专业的社区平台,让用户之间或用户与金融专家之间可以交流经验和支持。
·  客户支持:提供在线客服或热线电话,确保用户在遇到问题时能够得到及时的帮助。
 
综上所述,金融类应用的数据图表设计不仅要具备清晰易读、互动性强、个性化定制和实时更新的特点,还需要特别关注安全性和合规性,以及提供足够的教育和支持资源。这些特性共同作用,可以帮助用户更有效地管理和理解金融数据,从而做出更加明智的投资决策。
 
「信息记录类应用」
另一类比较常用图表的 App 是信息记录类 App,这些 App 通常会统计用户主动输入信息的频次或频率,依此生成一段时间周期内的统计图表。
数据图表:多领域信息可视化的核心工具
 
 
——图表运用特点——
1. 清晰易读
·  直观布局:图表的颜色和布局让用户能够迅速获取关键信息,如每日情绪波动、月度费用支出等。
·  视觉层次分明:不同的颜色、字体大小和对比度来区分关键信息和次要信息,确保最重要的数据一目了然。
·  一致性:保持整个应用程序中图表风格的一致性,包括颜色编码、图标和布局,以增强用户对不同页面间数据的理解。
·  术语解释:对于不太常见的记录类别或指标,提供必要的解释或简短说明,帮助用户理解图表内容。
 
2. 互动性
·  深度探索:允许用户通过点击、滑动或其他交互操作深入查看更详细的数据,如具体日期的记录详情或特定事件的影响。
·  多维度筛选:提供灵活的筛选选项,让用户可以根据时间范围(日、周、月、年)、记录类型(如费用分类、情绪标签)进行筛选,满足个性化的查询需求。
·  导出功能:为用户提供将图表导出为图片、PDF或CSV格式的功能,便于打印或分享给朋友或顾问。
·  情景模拟:在适用的情况下,提供情景分析工具,用户可以调整变量(如预算分配)来预测不同情况下的结果。
 
3. 个性化
·  用户定制:用户的个人目标或偏好调整图表内容,例如突出显示关键指标的变化趋势或特定习惯养成的效果。
·  目标跟踪:类似于健身APP中的目标设定,允许用户设定并跟踪自己的记录目标,如每月节省金额、每周阅读书籍数量等。
·  建议与反馈:集成系统推荐的图表视图或设置,方便用户快速评估进展,并为用户提供有针对性的反馈和建议。
 
4. 实时更新
·  即时反馈:图表能够迅速反映最新的记录数据,如实时更新的情绪评分或新添加的费用条目,这对于及时调整计划尤为重要。
·  同步与整合:与其他相关平台或服务无缝对接,自动同步来自各种来源的数据,如银行账户、健康监测设备等,确保数据的完整性和准确性。
·  通知与提醒:当某些关键指标达到预设阈值或需要特别关注时,及时向用户发送通知或提醒,帮助用户保持记录习惯或抓住改进机会。
 
5. 隐私与安全
·  数据加密:所有传输和存储的数据都应经过严格的加密处理,确保用户的个人信息和敏感数据的安全。
·  访问权限控制:实施细粒度的权限管理,确保只有授权人员可以查看敏感数据。
·  合规性:遵守相关的法律法规和行业标准,如GDPR(欧盟通用数据保护条例),确保数据处理符合法律要求。
 
6. 教育与支持
· 学习资源:提供额外的学习资源链接或内置教程,帮助用户更好地理解他们的记录数据和图表背后的意义。
·  社区交流:创建一个安全的社区平台,让用户之间可以交流经验和支持,增加互动性和动力。
·  客户支持:提供在线客服或热线电话,确保用户在遇到问题时能够得到及时的帮助。
 
7. 历史回顾与趋势分析
·  长期趋势:提供长周期的趋势分析图表,帮助用户回顾过去一段时间内的变化和发展,如年度费用总结、多年情绪变化等。
·  模式识别:通过可视化手段帮助用户发现隐藏的模式或规律,如消费习惯、情绪波动周期等。
·  里程碑标记:在图表中标记重要的里程碑或转折点,如重大事件发生的时间、重要决策做出的时刻等,增强回忆和反思的价值。
 
综上所述,信息记录类应用的数据图表设计不仅要具备清晰易读、互动性强、个性化定制和实时更新的特点,还需要特别关注隐私与安全性,以及提供足够的教育和支持资源。这些特性共同作用,可以帮助用户更有效地管理和理解记录的信息,从而促进更好的自我管理和行为改变。
 
⭐️ 
PART 7 
——————
结语

情绪价值在体验设计中的应用

ui设计分享达人 交互设计及用户体验

近两年“情绪价值”这个词,相信每个人应该或多或少都有过接触,从商业空间的营销场景到后来渗透到每个领域、每个行业。 
 
先说下这个词的概念,它源于心理学和社会学, 本意为:“它指的是一个人或事物对他人情感状态所产生的积极影响和价值。这种价值不仅仅体现在短暂的愉悦感受上,更包括长期的情绪稳定、心理满足和精神支持。” 
无论是在网红还是在新型电商行业中,许多品牌强调的已经不是单一的产品功能价值,而是增加了强调在消费体验中为消费者带来的快乐、满足、归属感等等一些积极的情绪。这足以说明,无论是品牌、产品还是服务越来越注重为消费者提供情绪价值。 
 
而用户体验设计的本质其实就是让人在使用产品的过程中有非常愉悦的感觉,这一点与“情绪价值”这个词的核心也有点不谋而合。 
 
情绪价值在体验设计中的应用
 
 
相信我们都有这样的疑问:情绪价值在体验设计中重要吗,有什么具体的关系?在设计工作中的情绪价值到底重要吗?情绪价值对产品使用的提升有哪些,具体要怎么做?相信看完下面的内容,你应该会对上面的问题有答案的。 
 
一、情绪价值对用户体验的影响
首先我们可能需要了解情绪价值能给用户带来什么?申晨老师在一次分享会上有提到过情绪价值的三个方向:愉悦感、保障感、专享感。三者由浅入深影响着用户在使用产品时的情绪变化,对应到体验设计中是这样的: 
  •  
    愉悦感→影响用户的满意度
  •  
    保障感→影响用户的容忍度
  •  
    专享感→影响用户的忠诚度
 
提升用户满意度
积极情绪的诱导
 
当产品或服务能够提供情绪价值时,会引发用户的积极情绪。如下图,三种UI会给用户不同的情绪反馈,积极的情绪(右图)往往会让用户驻足停留的更长一些,即便没有需求,也会更愿意去花费一些时间去深入了解,进而带来一些拉新、浏览转化等等数据的提升 
情绪价值在体验设计中的应用
 
 
满足情感需求
 
许多产品和服务通过满足用户的情感需求来提供情绪价值。用户在使用这些产品时,会因为产品所承载的情感因素而感到满足,进而提升对产品体验的满意度。例如: 
  •  
    社交媒体的分享被赞,是一种被关注、被认可的情感需求;
  •  
    直播平台app的互动效果,也是一种渴望互动的情感需求,以此刺激观看者送出礼物。
改善用户对负面体验的容忍度
情绪缓冲作用
 
当产品或服务出现一些小问题时,之前积累的情绪价值可以起到缓冲作用。例如: 
  •  
    在使用某工具产品时,友好的客服系统会给用户比较积极的情绪积累,从而选择包容一些比较小的错误;
  •  
    还有很多错误页面的情感化设计,目的亦是如此。
引导解决问题的积极态度
 
如果用户对产品或服务有情感上的依赖,当遇到问题时,他们会更积极地寻找解决办法,而不是抱怨和放弃。例如: 
  •  
    当产品或服务偶尔出现卡顿现象时,其用户社区氛围很好,用户之间可以互相交流使用经验和解决方案,并且软件开发者也会积极回应用户的问题。这种情绪价值会让用户愿意配合开发者解决软件卡顿问题,而不是直接卸载软件。
 
情绪价值在体验设计中的应用
 
 
增强用户的忠诚度
能够在用户和产品 / 服务之间建立起情感纽带
 
  •  
    以苹果产品为例,苹果公司通过简洁、易用的设计,以及高效的客户服务,为用户提供了良好的情绪体验。用户在使用苹果产品的过程中,会逐渐对品牌产生信任和喜爱。这种情感纽带使得用户在下次购买电子产品时,更有可能继续选择苹果产品,忠诚度较高。
  •  
    一些会员制度也注重通过情绪价值来增强用户忠诚度。例如,酒店的会员计划会为会员提供优先入住、免费升级房间、生日惊喜等服务。这些措施让会员感受到特殊待遇,产生一种被重视的情绪,从而增强了用户对酒店品牌的忠诚度。
推动口碑传播
 
当用户从产品或服务中获得了高情绪价值,他们更愿意向他人推荐。例如: 
  •  
    用户在一家餐厅用餐,餐厅的服务人员热情周到,菜品的呈现方式也很有创意,让用户在享受美食的同时获得了愉悦的情绪体验。这种用户很可能会将这家餐厅推荐给朋友、家人,通过口碑传播为餐厅带来新的顾客。
  •  
    在线游戏如果能为玩家提供丰富的社交互动功能,让玩家在游戏中结交朋友、组队作战,获得团队合作的快乐和成就感等情绪价值,玩家就会积极向周围的人宣传这款游戏,扩大游戏的用户群体。
 
 
二、什么产品适合通过创造情绪价值提升使用体验
 
C端产品:在创造情绪价值的应用策略下,更容易获得显著成果
情绪价值在体验设计中的应用
 
 
 
创造情绪价值这种有效的策略,尤其在面向个人用户产品时,可以更显著提升其使用体验。例如: 
  •  
    社交类产品
    如微信、微博等,通过提供社交互动和情感连接,增强用户的归属感和幸福感 
  •  
    内容类产品
    如视频平台、音乐应用等,通过提供丰富多样的内容,满足用户的情感和娱乐需求 
  •  
    娱乐类产品
    如游戏、盲盒等,通过游戏性和不确定性,激发用户的兴趣和情感投入 
  •  
    交易类产品
    如电商平台、在线购物等,通过营造购物氛围和提供个性化推荐,增加用户的购物愉悦感 
  •  
    工具类产品
    如效率工具、健康管理应用等,通过提供情感化的设计和反馈,提升用户的使用体验和满意度 
 
那么 B 端产品是否同样适用呢?答案无疑是肯定的。随着企业数字化转型的迅速推进,B 端产品在各个行业领域当中得到了广泛的应用,用户体验的重要性越发显著。 
 
 
B端产品:创造情绪价值更有利于提高忠诚度
 
情绪价值在体验设计中的应用
 
 
创造情绪价值的方式
 
  •  
    情感设计:通过设计元素和交互方式激发用户的情感共鸣,增强用户对产品的认同感和忠诚度。例如,通过微动画、个性化推荐和人性化提示,设计师可以为用户创造愉悦的使用体验
  •  
    个性化服务与定制化解决方案:了解客户的独特需求和痛点,提供个性化的建议和支持,帮助客户解决实际问题,带来更多情感上的满足感
  •  
    优化用户体验:注重产品设计和交互体验优化,提供良好的客户服务和多种使用方式,不断优化产品功能,以提升用户的整体使用体验
 
 
创造情绪价值的重要性
 
  •  
    提升用户满意度和忠诚度:通过创造情绪价值,产品可以显著提升用户的满意度和忠诚度,从而促进续费和口碑传播
  •  
    增强产品的市场竞争力:在功能相似的产品中,提供卓越的用户体验可以成为SaaS产品的核心竞争力,帮助企业在市场中脱颖而出
 
 
三、体验设计师如何提升产品的“情绪价值”
我们可以从设计核心的三大阶段(用户研究阶段、设计阶段、测试与优化阶段)入手,来创造与提升产品的情绪价值 
 
用户研究阶段
情绪价值在体验设计中的应用
 
 
 
深入了解用户情感需求
开展定性研究
:通过用户访谈、焦点小组等方式,挖掘用户在使用产品时的情感期望。例如,在设计一款健身APP时,与健身爱好者进行深入访谈,了解他们在健身过程中的情绪变化。可能会发现,用户在完成一次具有挑战性的训练后,希望得到即时的鼓励和成就感,这就为产品设计提供了情感方向。
 
进行定量研究
:利用问卷调查等手段,收集用户对现有产品情绪体验的数据。比如,询问用户在使用某电商平台时,购物流程是否让他们感到焦虑或愉悦,以及在哪些环节有这种情绪。通过数据分析,找出用户情绪的痛点和兴奋点。
 
构建用户画像与情绪场景
 
创建用户画像
根据用户研究的结果,构建详细的用户画像,包括用户的性格、生活方式、价值观等因素,并且添加情绪维度。以一款旅行APP为例,其中一个用户画像可能是“年轻的探险爱好者,性格乐观,追求刺激,在旅行前会充满期待和兴奋”。这样的画像有助于设计师站在用户的角度思考情绪体验。
描绘情绪场景
:针对不同的用户画像,描绘他们使用产品的情绪场景。比如,对于上述旅行APP的用户,在规划行程时,他可能会在APP上查找小众景点,此时的情绪是好奇和兴奋;在旅途中使用导航功能时,希望得到精准的指引,情绪是焦虑或安心,取决于导航的准确性。这些情绪场景为后续设计提供了具体的目标。
 
 
设计阶段
情绪价值在体验设计中的应用
 
 
视觉设计方面
色彩运用
:色彩对情绪有着强烈的影响。例如,暖色调如红色和橙色通常传达活力、热情的情绪,适合用于激发用户兴趣的界面元素,如促销活动页面;冷色调如蓝色和绿色则给人冷静、可靠的感觉,可用于数据展示或需要用户集中注意力的区域。在设计金融产品界面时,使用蓝色为主色调可以让用户感到安全和信任。
图形设计
:简洁、易懂的图形能够快速传达信息并引发积极情绪。在图标设计上,要符合用户的认知习惯。例如,在社交产品中,使用微笑的表情图标表示点赞或喜欢,用户很容易理解并产生愉悦的情绪。同时,利用有趣的插画或动画可以增加产品的趣味性。如在儿童教育产品中,用生动的动画来讲解知识,能够吸引孩子的注意力并让他们感到快乐。
排版布局
:合理的排版可以提升用户的阅读体验和情绪。清晰的标题和正文层次,适当的文字间距和行高,能让用户感到舒适。在新闻类产品中,采用模块化的排版,将不同的新闻内容清晰划分,使用户在浏览时不会感到混乱,从而减少烦躁情绪。
 
交互设计方面
反馈机制设计
:为用户的操作提供及时、明确的反馈可以提升情绪价值。例如,当用户点击一个按钮时,按钮会有短暂的变色或动画效果,让用户知道操作已被接收。在加载页面时,使用有趣的加载动画代替单调的进度条,如旋转的小图标或者跳动的小球,能够缓解用户等待的焦虑情绪。
操作流程优化
:简化复杂的操作流程,减少用户的认知负担和操作失误。在移动支付产品中,尽量减少支付步骤,让用户能够快速完成支付,避免因流程繁琐而产生烦躁情绪。同时,可以增加一些引导性的交互,如新手引导教程,帮助用户轻松上手产品,提升用户的自信心和满意度。
个性化与定制化设计
:根据用户的喜好和行为习惯,提供个性化的交互体验。例如,音乐产品可以根据用户的收听历史推荐相似风格的歌曲,用户会因为产品的贴心而感到愉悦。并且允许用户对界面布局、主题等进行定制,让用户有更多的掌控感,满足他们的自我表达需求。
 
内容设计方面
文案撰写
:使用友好、易懂的文案可以拉近与用户的距离。在产品提示信息中,避免使用生硬的专业术语,而采用亲切的语气。例如,在一款智能家居产品中,当设备连接成功时,显示“哇,您已经成功连接啦,现在就可以享受智能生活啦”,这样的文案会让用户感到轻松和愉快。同时,文案的风格要与产品的定位和目标用户相匹配。
内容策略
:提供有价值、有趣的内容可以提升情绪价值。在知识付费产品中,确保课程内容不仅有深度,而且讲解方式生动有趣。对于内容社区产品,鼓励用户分享积极向上的内容,如生活中的小美好、励志故事等,营造一个充满正能量的社区氛围,让用户在浏览内容时感到愉悦和鼓舞。
 
 
测试与优化阶段
情绪价值在体验设计中的应用
 
 
可用性测试与情绪评估
进行可用性测试
:在产品原型阶段,邀请用户进行可用性测试,观察用户的操作行为和情绪反应。例如,在测试一款办公软件的新功能时,注意用户是否能够顺利使用,以及在使用过程中是否出现困惑、烦躁等情绪。可以通过用户的面部表情、言语反馈等方式收集情绪信息。
情绪评估工具
:利用情绪评估工具,如情感化可用性量表(UEQ)等,对用户的情绪体验进行量化评估。UEQ可以测量用户对产品的吸引力、易用性、可靠性等维度的情绪感受,通过数据分析,找出需要优化的情绪体验点。
 
根据反馈优化设计
迭代设计
:根据用户测试的反馈,对产品的视觉、交互和内容设计进行迭代优化。例如,如果用户在测试中表示某个界面元素的颜色让人感到刺眼,设计师可以调整颜色方案。如果用户对某个操作流程不理解,就优化操作引导。
持续关注情绪反馈
:产品上线后,持续收集用户反馈,关注用户情绪价值的变化。随着用户需求的变化和市场环境的改变,不断调整产品设计,以保持和提升产品的情绪价值。例如,在节日期间,对产品界面进行节日主题的装饰,为用户提供新鲜感和节日氛围带来的愉悦情绪。
 
四、情绪价值是否具备量化条件
可以通过以下方法对其进行量化计算
 
情感化可用性量表
情绪价值在体验设计中的应用
 
 
原理:UEQ是一种广泛用于量化用户对产品情绪体验的工具。它通过一系列的问卷题目来测量用户对于产品的吸引力、易用性、效率、可靠性和刺激度等多个维度的感受。例如,在吸引力维度上,会询问用户对于产品外观、风格是否感到喜欢;在易用性维度,会涉及用户操作产品时是否感到轻松、方便等问题。 
 
应用:在一款产品/功能的用户体验测试中,使用UEQ可以收集用户对该应用在不同维度的情绪评价。通过对大量用户反馈的数据统计,得出该应用在各个维度的量化得分,比如吸引力维度得分较高,说明产品在视觉等方面能引发用户积极情绪,而如果易用性维度得分较低,则可能表示产品的操作流程等会让用户产生负面情绪。 
 
 
净推荐值(NPS)与情绪关联量化
 
情绪价值在体验设计中的应用
 
 
 
原理:净推荐值是通过询问用户“您是否愿意将这个产品推荐给其他人”来衡量用户忠诚度。虽然NPS本身不是直接对情绪价值的量化,但它与用户的情绪体验密切相关。当用户体验到较高的情绪价值,如愉悦、满足等,他们更有可能成为推荐者,NPS得分就会升高。 
 
应用:通过定期收集用户的NPS数据,并且结合用户对功能使用体验的详细反馈(包括对产品、服务、售后等环节的情绪感受),可以间接量化情绪价值对用户忠诚度的影响。例如,如果发现NPS得分高的用户在评价中经常提及购物过程中的快乐情绪和优质服务体验,就可以推断出情绪价值在提升用户忠诚度方面起到了积极作用。 
 
 
 
  1.  
    生理指标测量
 
情绪价值在体验设计中的应用
 
 
原理:情绪会引发身体的生理反应,如心率、皮肤电导率、瞳孔大小等变化。通过专业的设备可以测量这些生理指标,以此来推断用户的情绪状态。例如,当用户感到兴奋或紧张时,心率会加快;当他们感到好奇或专注时,瞳孔可能会放大。 
应用:在用户体验实验室中,测试用户在使用虚拟现实(VR)游戏的情绪体验。通过佩戴可以监测心率和皮肤电导率的设备,观察用户在游戏不同场景下的生理指标变化。如果在某个刺激的战斗场景中,用户的心率明显上升,皮肤电导率也增加,就可以推断用户处于兴奋或者紧张的情绪状态,从而量化游戏场景对用户情绪的激发程度。 
 
虽然有量化方法,但也只有部分可被量化,完全精准量化还存在一定的挑战 
 
 
难以完全量化的原因
情绪的复杂性和主观性
个体差异:不同用户对同一产品或体验的情绪反应存在很大差异。例如,对于一款具有挑战性的游戏关卡,一些玩家可能会因为克服困难而感到兴奋和满足,而另一些玩家可能会因为觉得太难而产生沮丧情绪。这种个体差异使得很难用统一的标准来量化情绪价值。
文化背景影响:文化因素也会对情绪价值的感受产生影响。在某些文化中,含蓄的情感表达是常态,而在另一些文化中,人们可能更倾向于直接的情感反应。比如,在日本文化中,用户可能对产品的精致、细腻的设计有更深刻的情感共鸣,而西方文化中的用户可能更看重产品的创新性和个性化带来的情绪体验。
 
情绪与情境的动态变化
使用场景的多样性:用户在不同的使用场景下对产品的情绪价值感受不同。例如,一个音乐播放软件,用户在运动场景下可能更关注节奏强烈的音乐带来的激励情绪,而在睡前场景下则更看重舒缓音乐营造的放松情绪。这种随场景变化的情绪体验难以用固定的量化指标来衡量。
 
时间因素:用户对产品的情绪体验也会随着时间而变化。最初接触产品时的新鲜感可能会带来积极情绪,但随着时间推移,如果产品缺乏更新或出现问题,情绪可能会转变为消极。而且情绪的产生和消退过程很难精确量化,例如很难确定用户从感到满意到产生厌烦的具体时间节点。
虽然难以量化,但情绪价值在实际应用中发挥的作用还是很大的。 
 
 
结束语
在体验设计的广阔领域中,情绪价值犹如一股无形的力量,悄然影响着用户与产品之间的每一次互动。它不仅仅是愉悦感、保障感和专享感的简单叠加,更是用户在深层情感层面与品牌建立起的稳固纽带。通过精心设计的用户体验,我们能够触动用户的情感,激发他们的共鸣,从而在用户心中留下深刻而持久的印记。


作者:群核科技MCUX
链接:https://www.zcool.com.cn/article/ZMTY0OTIxNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

以用户为中心的交互设计思维

ui设计分享达人 交互设计及用户体验

聊聊关于设计思维的内容,会从产品设计、体验设计、交互设计三个方面入手。
目前是第三篇,关于交互设计思维的内容。到这里设计思维的内容全部结束了。
感谢
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维


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

产品设计如何利用心理学

ui设计分享达人 设计思维

产品设计的成功除了依赖设计方案和技术实现,还与用户的心理密切相关。用户心里决定了我们用怎样的设计策略解决问题。我们常认为人们做决策时是理性的,但其实用户行为经常是非理性,会受到情绪、习惯和社交环境的影响。了解这些心理学规律能帮助我们更好地的预测和引导用户行为,优化产品体验,提高用户的粘性、留存率和转化率,从而产品商业价值最大化。
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学


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

“好的设计组件”在搜索设计场景中的定义

ui设计分享达人 设计思维

 
 
关于设计组件库,我们有一些新思考
 
 
 
从网上搜索设计组件,我们能找到各种对外公开的设计组件库,同样还有不少或概括或详细的文章,手把手教你“如何搭建一个好的设计组件库”,但这些方法论很少探讨面对C端组件频繁增改、设计规范动态调整,如何高效赋能业务设计交付的相关内容,但这恰恰是搜索业务面临的关键问题。
 
搜索是一个“牵一发而动全身”的业务,每一个微小的设计细节都有可能影响各个业务的数据指标,一个“好的设计组件库”需要以一种潜移默化的方式让设计师掌握设计规范,完成合规的设计,从这个角度而言它应该比较
「好懂」
 
而作为服务于整个设计团队的公用设计组件库,面对每月数以万计的调用次数,它必须保障最基本的易用性,应该非常
「好用」
 
同时,面对频繁迭代,“好的设计组件”还需要保持最快的更新速度,为各个横向团队提供正确的样式,从这个角度来说它还要
「好维护」
 
因此,
「好懂、好用、好维护」
是搜索设计语境下,对一个“好的设计组件”的定义。
 
关于设计组件库,我们有一些新思考
 
 
 
接下来,我们将从这三个「好」入手,分享搜索设计组件库在升级过程中的一些思考,希望能和大家共同探讨。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
“万丈高楼平地起”,我们先来说说如何从零开始构建一个既符合设计规范又易于理解的设计组件。
 
首先,在搭建组件时,我们可以考虑采用
多层嵌套
的方式,即组件(Component)内部嵌套变体(Instance)。这种方式不仅能省去组件搭建和修改过程中的重复操作,甚至还能在解绑组件时,通过选中内部的子组件图层进行解绑,大大简化了搭建和使用双方的操作流程。
 
在多层嵌套的思路下,我们可以进一步用
“底层灵活、上层收敛”
来指导组件的搭建。这意味着底层变体的形式足够多样,能够支持大部分的状态切换,而在上层组件搭建的过程中显性地加强规范的指引(如规范中不允许使用的样式不对外展示),以降低超出规范设计的可能。
 
具体的搭建流程可以大致分为三步:
场景收集和分析、搭建基本变体组、拓展高阶变体组
 
我们将通过视频组件搭建的生动案例,具体介绍如何依据“底层灵活、上层收敛”原则来搭建组件库,使得组件本身既足够灵活,又能起到足够的约束作用。
 
关于设计组件库,我们有一些新思考
 
 
 
在着手搭建某类组件时,我们首先通过规范确认和场景遍历,广泛收集各类变体。随后,从我们能想到的所有维度出发,对这些变体进行细致定义。这样,我们就能得到一张详尽描述组件变体性质的表格。表格的第一列依次列出变体1、变体2、变体3等,而第一行则罗列出各种维度,如宽度、比例等。通过这种方法,我们可以将原本零散、杂乱的组件变体描述,系统地归纳整理成一张清晰明了的表格。
 
关于设计组件库,我们有一些新思考
 
 
 
表格通过不同维度来唯一确定一个变体,这些维度可大致分为两个特性和一个共性。共性指的是所有变体在这一维度上均保持一致,常见特性则涵盖了最常见的分类性质,如宽度、高度、数量和优先级等,而业务特性则与具体业务紧密相关。
 
在搭建组件时,我们可以遵循
「共性-常见特性-业务特性」
顺序,这样的顺序有助于降低理解成本,因为最符合心智的分类被置于外层,同时底层的组件又保持了足够的灵活性,便于切换各种变量。对于业务特性,我们可以根据实际情况灵活处理,既可以将其作为基本组件的延展,也可以不将其纳入组件范畴。
 
以视频组件为例,我们从表格中获取的信息如下:
 
  •  
    视频尺寸及其组合是最符合用户心智的变体选择;
  •  
    播放状态是所有变体的共有性质;
  •  
    自动播放情况与业务相关,但不一定需要在组件库中呈现;
  •  
    高阶组件仅涉及少部分尺寸的组件,应在完成基本组件搭建后再进行。
 
据此,我们可以轻松梳理出视频组件搭建流程的优先级:
 
  1.  
    播放状态作为共性,应首先搭建;
  2.  
    基本组件尺寸和组合是最符合用户心智的变体选择,应紧随其后;
  3.  
    高阶组件在完成基本组件搭建后再进行。
 
值得注意的是,“封面槽位”是“播放状态”中的一个图层。根据“底层灵活、上层收敛”的原则,我们将其插入到搭建播放状态之前。因此,视频组件的最终搭建流程为:
 
  1.  
    封面槽位;
  2.  
    播放状态;
  3.  
    基本组件尺寸和组合;
  4.  
    高阶组件。
 
关于设计组件库,我们有一些新思考
 
 
 
完成对视频组件搭建的分析,我们就可以有条不紊地开始搭建组件了。先搭建基本组件视频组件,再用基本组件搭建高阶组件。这一步骤虽然为大家所熟知,但仍需格外注意,如配置项的设置要力求合理,也可以融入设计规范和使用规范,同时还应将一些搭建过程中的零散组件集中收纳避免被调用。关于这些具体的注意事项,我们将在后续部分进行详细阐述。
 
至此我们完成了组件搭建的基本流程,一个达到及格线的视频组件就诞生了。据统计,优化后每次调用视频组件将节省至少10步的点击操作!
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了一个基本组件的搭建后,我们可以转换视角,从使用的角度来审视并检查这个组件。
 
我们期望,从插入组件变体、切换组件配置,再到最后的解绑组件,整个流程都能纵享丝滑且稳定可靠,确保业务设计师在使用过程中获得最佳体验。
 
关于设计组件库,我们有一些新思考
 
 
 
我们可以一步步来审视组件的使用过程。首先是插入组件,据观察,通常有三种方式,①在左侧的资产面板(Assets)中直接找到对应组件并插入;②通过查阅设计规范,锁定所需的变体后复制粘贴;③选中一个不需要的组件,通过右侧的“切换变体”面板(Swap instance)切换成所需的变体。很明显,在这个过程中依赖的是组件的精准搜索和快速定位。
 
关于设计组件库,我们有一些新思考
 
 
 
为了提升搜索精度,我们可以从组件命名入手,采用中、英、数字结合的方式,实现模糊匹配;也可以在发布时隐藏不希望被调用的组件,以减少无用的搜索结果。如果组件是采用前文提到的“多层嵌套”方式搭建的,我们可以添加“Preferred”子组件,这样在切换时会优先展示这些子组件,这个功能在切换图标时尤为实用。
 
对于习惯边查阅设计规范边使用组件的设计师,我们增加了更多实际使用的正误案例,这些案例直观展示了组件变体的正确选择和使用方式,进一步降低了规范的理解成本,有效辅助设计决策。同时,我们专门维护了一个固定区域,用于平铺展示所有组件变体。为了确保能够轻松点选,我们将变体放在最外层展示(即不在任何Frame、Group或Section中)。这样能让设计师一目了然地看到所有变体,从而快速选择所需的组件。
 
关于设计组件库,我们有一些新思考
 
 
 
在组件配置阶段,有三项注意点能让组件更加易用,即“重视组件的可视化效果、设置高效易用的配置项、贴心地保存修改”。
 
关于设计组件库,我们有一些新思考
 
 
 
考虑到C端组件的多样性和用户的使用习惯,我们应避免使用过于复杂的分组方式。相反,应更注重组件的样式展示,并尽量简化组件的层级结构。这样,设计师在使用时能够更直观地看到组件的外观,而无需深入复杂的层级去查找。
 
另外值得注意的是,Figma会默认用组件集合中最左上角的组件生成预览样式,因此应当把视觉上最有代表性的变体放在左上角,这个效果在切换变体(Swap instance)时很重要,因为目前在该面板中没法查看组件细节,只能靠缩略图和名称来推测是哪个组件。
 
关于设计组件库,我们有一些新思考
 
 
 
其次对于配置项的设置也大有讲究,业界有组件库为了实现C2D2C,从源头上将设计组件和前端组件的配置项打平,这是不错的思路,但有可能会提升设计侧的理解成本。针对搜索业务的特殊语境,我们还是选择了从「规范理解」角度去设置组件的配置项,将所有允许自定义的配置尽可能外露,并清晰地说明修改限制,如字数限定、选项个数等,这样能够在使用的过程中强化业务设计师对规范的掌握。
 
另一个常常被忽视的关键点是选项和配置的排序问题。为了提高浏览和选择的效率,建议对选项和选项之间,以及外层的不同配置项,都按照一定的逻辑顺序进行排序。
 
关于设计组件库,我们有一些新思考
 
 
 
最后一点,我们称之为
“贴心地保存修改”
机制,这个针对的是文字修改的场景。
 
在实际操作中,使用一个组件可能需要对多个配置项进行修改。有时在修改完文字内容后再去调整其他配置时,已修改的文字会被重置。这时文本属性(text property)的设置就显得尤为重要,它能够记忆并保存修改过的文字内容,从而免于重复输入。
 
还有一些情况是,某个组件变体实际上并没有与某个值相对应的组件(尽管Figma机制允许选择该值),用户切换后就会发现组件完全变了,只能撤回。为了避免这类情况,建议使用另外的标记来表明组件某个设置项是不可切换的。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了组件的搭建和检查,接下来让我们聚焦于组件的日常维护。
 
这一环节可以从两个维度展开,一是依托中台的日常数据监控进行维护,二是通过团队内部的紧密协同机制来保障。后者更多侧重协作流程和机制上的建设,在本文中我们不做更多展开,重点讨论前者。
 
数据监控的方式主要依托Figma中的组件数据看板(查看路径:View libraries-Analytics),看板中展示了各个组件的调用数和解绑数数据,这些数据不直接反映组件的优劣,但如果我们观测到某个组件解绑率偏高,我们会考虑直接把它
作为模板
而不是创建成组件。
 
关于设计组件库,我们有一些新思考
 
 
 
 
总结
 
以上是百度搜索设计团队在设计组件库升级过程中的心得分享,包括搜索业务对于“好的设计组件”的诉求,以及一些搭建和优化组件的实用思路,核心是探讨如何从组件库建设的角度入手,成功助力团队提升设计资产消费效率。
 
关于设计组件库,我们有一些新思考
 
 
 
当前我们已经完成设计资产工程化的前序环节,我们对设计资产的升级和探索并没有结束,未来我们将持续探索设计系统工具化的形态、与AI大模型结合的机会,通过丰富消费途径,实现在业务交付的不同阶段下全方位提效。这部分内容后续有机会也将会和大家见面,请大家期待!
 
感谢阅读,以上内容均由百度MEUX团队原创设计,以及百度MEUX版权所有,转载请注明出处,违者必究,谢谢您的合作。申请转载授权后台回复【转载】。


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

B端基础 | 弹窗设计基础知识

天宇 B端ui设计文章及欣赏

建筑设计师尤哈尼·帕拉斯玛说、简约并非简单,它是通过深思熟虑后对事物本质的准确把握。知其然、知其所以然。这次文章会尽量简洁一点。
 
奔跑的日子、总是希望优秀的你和我一起同行。让我们一起在艺术的环境里生菌、知识的海洋里狗刨~
 
B端基础 | 弹窗设计基础知识
 
 
第一部分 | 弹窗基础知识
如果你只是想了解一下弹窗的基础知识,那么看这部分就够了。只需3分钟无痛、来去自如不影响上班哦。
弹窗定义;弹窗来历;弹窗拆分;弹窗分类;弹窗尺寸;
B端基础 | 弹窗设计基础知识
 
 
1、弹窗定义
弹窗是用户和系统交互信息的容器
。(在网上搜了一些文章看,他们的弹窗定义写的基本都是各写各的)我的这个定义绝对靠谱。站的维度高,从人机交互工程出发。这定义没错的妥妥的。说出去基本不会有人反驳你(如果有人敢反驳你把我的名字告诉他,反正我他也不认识我哈哈哈)
 
2、弹窗来历
弹窗最早的起源可以追溯至上世纪90年代。当时,互联网广告的投放形式主要是将广告嵌入在页面内容中,但这种方式存在一些问题。广告商担心消费者在浏览负面内容时,会将广告与负面信息联系在一起,从而对品牌造成不利影响。因此,网页托管网站trippod.com利用网页脚本程序,发明了一种在新开窗口发布广告的方法,这就是网络弹窗的起源。
B端基础 | 弹窗设计基础知识
 
 
3、弹窗拆分
整体的去分析、在大部分的弹窗类型里都会包括
关闭、内容区、模态层
(非模态类别的没有个元素)
B端基础 | 弹窗设计基础知识
 
 
3.1、模态层
模态层通常是搁在原页面和弹窗之间的半透明黑色。其主要的作用是1、降低用户在操作中被强打断的不适和跳出当前页面的恐慌感。让我们的用户更加的聚焦弹窗内容。
B端基础 | 弹窗设计基础知识
 
 
我个人在设计时模态层基本都是50%的纯黑,但并不是一定要用50%的纯黑,要结合自己的平台业务、设计风格等方面去制定。偷偷的告诉你这个模态层加入一点微微的色彩倾向在视觉上往往会更好一点。
3.2、关闭
弹窗的关闭是用户退弹窗的重要途径、一般都会在弹窗内容右上角。弹窗关闭按钮也有在弹窗范围外的。我们要保证弹窗关闭的清晰明确,来方便用户操作。
在弹窗中、关闭弹窗的途径除了叉掉。还可能有其他的。如取消按钮。
3.3、内容区
内容区的内容是根据弹窗类型的不同,内容就会有所不同。什么都可能有、图标、确认信息、选择框、输入框。只要是页面上能出现的都可能会出现在弹窗的内容区域。
B端基础 | 弹窗设计基础知识
 
 
4、弹窗分类
弹窗的分类从交互形式差的差异。我们可以将其分为
模态类和非模态类
。这两个大类就比较好区分,看看有没有那层模就行了。常见弹窗类型表单弹窗、抽屉、警告提示、全局提示、通知提示、气泡确认等。
B端基础 | 弹窗设计基础知识
 
 
4.1、模态类
模态是目前我们比较常见的类型、模态类弹窗打断用户的操作行为,用户必须对其进行操作才能解散弹窗,否则不能进行其他操作。模态类最常见的就是、
表单弹窗、确认弹窗
。当然还有其他的文件选择、信息展示、等等。
B端基础 | 弹窗设计基础知识
 
 
4.1.1、表单弹窗
这弹窗在B端设计里是最最最常见的一种弹窗。虽然我们现在的系统大部分是很智能的。但是复杂的业务就意味着你会和系统产生大量的交互信息的交换。所以这表单可太常见了哪哪都是他。(烦死个人)不过在你制定好一套规使用规范后。基本这样的弹窗是不太需要设计介入的,产品和FE两人一对使用模版就上了。
4.1.2、确认弹窗
这种弹窗就比较好理解了。承载较为紧急的信息,让用户快速处理;如:用户未保存,就点击离开当前页面,通过对话框让用户做出选择。在执行一个重要信息的删除时,通过二次询问引起用户的注意,让用户再次做判断;这类弹窗;
4.1.3、优点/缺点
优点:
强不会让用户忽略或跳过,确保信息的交互响应;引导用户操作;增加用户的参与度,可以提升用户的活跃度和参与度。
缺点:
01、会中断用户的操作流程,打断用户的思路或行为。
02、可能会影响用户体验,因为用户需要等待关闭弹窗后才能继续其他操作。如果弹窗内容过多或过于复杂,用户可能会感到困惑或不知所措。
03、如果过度使用模态类弹窗,例如频繁弹出广告或无意义的信息提示,用户可能会对其产生反感甚至抵制使用相关软件或平台。
4.2、非模态
可以不打断父应用程序,无需停止进度,用户仍可以对父级内容进行交互。大部分应用于信息的反馈和提示。常见的非模态类弹窗大概有、警告提示、全局提示、通知弹窗、气泡确认框;
B端基础 | 弹窗设计基础知识
 
 
4.2.1非模态优点/缺点
优点:
不打断操作流程;不会干扰用户操作用户体验更好;常用于轻量级的信息或提示。
缺点:
可能会被忽略,导致信息传递不畅;不适合展示重要信息;形式通常比较单一,不能满足复杂的展示需求
4.3、其他
林子大了什么鸟儿都会有,一定会有我没有接触到的前沿交互方式。所以这个其他留给未来更优秀的我们去发现。
5、弹窗尺寸
弹窗的尺寸和电脑屏幕分辨率是有关系的。主流的分辨率1920*1080像素。其他的还有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。
我在设计界面是一般用的是1440*900的设计尺寸。在做弹窗的时候已经不考虑1366*768分辨率以下的屏幕了。多以弹窗的安全高度要小于600px
弹窗的宽度还是要根据自己业务需求去定义的。比如我们的业务最宽的弹窗1280像素。像站酷的查看作品他是整屏的宽度。
模特还怪好看的
模特还怪好看的
 
我在我们平台定义的表单弹窗宽度虽然很不严谨、好像也没有什么理论支撑。但是确一直再用。尺寸分别为、400、600、800、1000、1280。之后还是要细化的。这样的定义弹窗尺寸导致的结果是,开发还原想过不是太好。
B端基础 | 弹窗设计基础知识
 
 
第二部分 |弹窗2.0项目里
承载内容、为什么会有这么多的弹窗类型。问题不在于弹窗,而在于合适的承载内容和交互类型。
B端基础 | 弹窗设计基础知识
 
 
1、弹窗、抽屉、界面
在项目里我们应该怎么去选择这三种内容呈现方式呢。如果你只是设计师大部分时间你也不用选。你只有建议的权利没有决定的权利。如果产品原型是弹窗、你给做了个抽屉。你可以从下面几方面去找支撑点去和产品撕逼、干翻他的原型用你的效果图。
AI的提高画面质量还是有待提高呀
AI的提高画面质量还是有待提高呀
 
1.1、内容
弹窗和抽屉或界面他们承载的内容量是不一样的。所以在选择用那种交互方式时可以从我们业务需要展示的内容量来考虑。简单的确认或通知适合用弹窗、需要展示大量内容或进行复杂的功能时就适合用抽屉或者界面了。
1.2、体验
我们可以从用户体验方面出发、如页面的空间感、考虑空间大小和布局。操作流程上、考虑用户在界面上被打断进程的成本。一致性、确保与其他业务模块交互方式保持一致,为用户提供一致的体验。
1.3、效率
考虑到用户的使用成本、B端设计中效率的提升优先率老高了。考虑系统的加载速度、确保我们使用的交互方式不会影响整体的性能和体验。
 
本身弹窗、抽屉或者界面的使用选择是需要很综合考虑的。总的来说核心是提升效率、保证我们用户好的体验。
2、弹窗交互优缺点
当涉及到B端弹窗的交互方式时,有以下几点核心优缺点:
B端基础 | 弹窗设计基础知识
 
 
2.1、优点
提供及时反馈
弹窗可以快速向用户显示重要的信息或请求,使用户能够即时了解系统的状态或需要执行的操作。
简化操作流程
对于某些复杂的操作或任务,弹窗可以提供直观的界面和简化的步骤,使用户更容易完成目标。
吸引用户注意力
通过使用弹窗,可以确保用户在操作过程中不会被其他界面元素分散注意力,从而更专注于当前的任务。
提供额外的信息或功能
弹窗可以包含更多的详细信息或额外的功能选项,使用户能够更深入地了解或操作某个特定内容。
2.2、缺点
干扰用户操作
过度或不合适的弹窗可能会干扰用户的正常操作,打断用户的工作流程,影响用户体验。
误导用户
不清晰或误导性的弹窗信息可能会使用户产生困惑或误解,导致错误的操作或决策。
影响性能
弹窗的弹出和关闭可能会增加系统的负担,影响性能和响应速度。
不符合用户习惯
对于习惯于传统界面的用户来说,过于复杂或与众不同的弹窗交互方式可能会造成使用上的困扰和不适应。
3、我的一些设计
我们项目里把升级弹窗做成了模版、广告弹窗也是模版。当然像二次确认这样的弹窗是组件,上货看东西。
B端基础 | 弹窗设计基础知识
 
 
这个是系统的一个展示弹窗、和一个从弹窗形式优化到抽屉的模块界面。
B端基础 | 弹窗设计基础知识
 
 
这个就是一个在线聊天界面。是从SaaS里跳转新建页面。
大概是想了想、平时做的项目确实比较碎、最近也没做整理盒复盘。所以界面的展示就不放太多了。而且有的信息页模糊了。不是我不信家人们。是我不信自己、朦胧也是一种美吧。哈哈哈
 
B端基础 | 弹窗设计基础知识
 
 
最后
我大学设计史陈老师告诫过我们。她说同学们,我其实不怕你们眼高手低。我怕的是你们眼都不高。和优秀的人一起前行、希望和优秀的你们一起去经历设计、生活、工作的美好。
期待你的加入、我们的大伐木累。我可以作品集指导反正闲着也没事不要钱。我和群里的小伙伴都是多年一线设计师来自于天南海北,不乏有互联网大厂设计师。再次
期待你的加入...
 
参考
优设网:4个方面层层递进,分析如何设计B端产品的弹窗
知乎:B端设计指南04-弹窗
知乎:运营弹窗的设计要点拆解
知乎:浅谈B端产品弹窗一级设计方法
人人都是产品经理:WEB端弹框掌握着几天就够了
 


作者:彪形大汉pro
链接:https://www.zcool.com.cn/article/ZMTYwNjg4NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

设计的两面性:理性决策与感性表达

天宇 设计思维

引言
设计应该是感性的还是理性的?设计是感性重要还是理性重要?此类问题一经出现便会引起争议无数,每个人对此都有自己的见解与理由,还有些人主张“理性与感性需要平衡”“既要理性也要感性”,此类观点看似正确,却缺乏任何实质性的指导价值。
实际上,很多人都没注意到问题本身存在的多义性。究竟什么是“设计”?有些人认为是设计决策的过程,而有的人则认为是最终产出的设计作品。大多时候,理性和感性两种观点看似针锋相对,实际上是站在设计的不同层面进行讨论。
设计的两面性:理性决策与感性表达
 
 
 
01|设计决策
从设计决策的角度来看,感性设计指的是设计师在设计过程中主要依靠个人情绪或情感进行创作。许多人误认为,只要在设计时能与用户产生共情,理解其情绪波动,并将这些喜怒哀乐、喜好厌恶融入设计作品,就算是感性设计了。然而,共情并不等同于感性。共情是一种能力,理解他人处境与情感,并善于换位思考。而感性则是自己对外界事物产生的直接感受和情绪反应,强调的是个人视角。
在艺术领域,感性占据主导地位,但设计并非艺术。设计的主要目标是解决问题和满足特定需求,而艺术更多地关注自我表达和情绪传递。设计始终受到客户需求、商业目标、市场趋势和技术可行性等一系列的限制与约束。由于这些条件的存在,直觉与天赋这些感性力量只能得到极其有限的发挥。这也是设计与艺术的显著区别。
设计的两面性:理性决策与感性表达
 
 
站在感性“对立面”的理性,将设计视为一项工程或科学,力求流程化和系统化,讲究方法论,注重各方面的调研,一切动作因问题存在而起,以问题解决而终
。甚至在实际场景中持续观察作品表现,以期得出可复用的设计模型或定律,为后人更加高效地解决类似问题提供帮助。
所以,从解决问题的本质属性出发,理性应该才是设计的底色。数据驱动、方法论支撑、可用性测试、竞品分析、用户研究等都属于理性思维的具象化体现。
由于大部分设计师的出身多以艺术打底,所以一旦设计与艺术的界限在心中变得模糊,会习惯性地
将产品看作自己的"作品",而非用户的"解决方案"
。如此一来,当面对来自各个方向的边界与不确定性,本能的反应就不是思考了,而是抵触,尤其是“完美”的方案已在脑中形成,如果突如其来的新要求打乱了这一切,哪怕假以用户之名也要选择怼回去,并不断美化、合理化自己的设计理念。对设计师来说,这是一种自私、不负责任和缺乏职业素养的表现。
设计的两面性:理性决策与感性表达
 
 
接下来,想象一下你的手中有一把枪,准备射击某个目标。你的第一个动作是什么?大概率是瞄准。因为大家都知道,射击前通过瞄准镜或者准星,先对目标位置进行瞄准校正,射击时才能提高命中率,这也正是理性对于设计的重要性所在。
理性在设计中的作用类似于瞄准动作,它帮助我们在设计过程中做出科学的决策,确保设计方案的准确性和可执行性。未经理性思考的设计,就像是不瞄准就立即开枪,其结果往往难以预测。当然也可能会击中目标,这基本上取决于两个因素:
  1.  
    目标远近:
    近处的目标,即使不瞄准,也很容易击中;但对于远处的目标,命中率则必然大幅下降。我们可以把目标远近理解为设计需求的难易程度,对于简单需求,不用过多的理性分析,直接设计也能完成任务,但面对复杂的设计项目,如果不进行充分的理性分析上手就画,大概率就要偏离产品目标了。
  2.  
    个人经验:
    经过反复练习,可以练就不瞄准也能远射的本领,随着经验积累还能不断提升距离值;在经验不足的情况下,还不瞄准,就只能选择一些近距离的射击目标了。设计也是这样,对于某类产品的设计经验较多,不用太多理性的分析决策,也能达成设计目标;缺乏经验时,还凭借直觉草率地进行设计,再简单的项目也可能会搞砸。
设计的两面性:理性决策与感性表达
 
 
所以,没有理性支撑而完全依赖直觉经验的设计,一个致命性的问题就是
不稳定
!日常工作中,设计师的有效输出和稳定输出至关重要。
 
02|设计表达
假设经过瞄准后的射击都能顺利击中目标,那么接下来要关注的是什么呢?子弹的冲击力和杀伤力!这里的子弹就是我们最终输出的设计作品。在这一环节,理性设计指的是方案完全围绕产品功能来呈现,追求效率与极简认知,较少运用装饰性设计元素,即使使用,也大多兼具辅助内容理解的功能性目的。
而感性设计,我并不太愿意使用“感性”这一措辞,正如在上一段中的定义,感性强调的是个人出发的情绪表达。其实,“情感化设计”才更负荷大家口中常说的“感性设计”所想表达的含义,相比“理性”的设计作品,情感化设计更具有“一击必杀”的效果。
在满足基础功能需求的基础之上,通过色彩、排版、图像、动画等元素给予用户充分的情感体验,也可以利用叙事、对话、情景、微交互等策略引发共鸣。丰富多样的情感化设计策略,让用户与产品之间更容易建立情感连接。
设计的两面性:理性决策与感性表达
 
 
在设计决策的阶段,理性确保了我们更高的命中概率,而情感的注入让我们的设计表达具有深入人心的穿透力和影响力。典型设计案例如Apple、Tesla等产品设计无一不是理性决策和感性表达的充分结合。因此,回到开篇提出的问题,设计应该是感性的还是理性的?我的回答是:
作为设计师,要
坚持理性的设计决策
,同时
追求感性的设计表达
设计的两面性:理性决策与感性表达
 
 
 
03|两者关系
很多人认为,不同的设计领域对理性和感性的要求有所不同,在B端产品中,理性占据主导地位,而C端产品更强调感性。从设计最终所呈现的效果来看,这种观点在一定程度上是合理的。B端产品多用于生产场景,追求的是可用性,是克制和效率;C端产品面向普通大众的各种生活场景,因此关注体验的愉悦感受。两者往往在风格调性上差异化很大。
但是,对于设计决策来说,无论C端、B端还是G端,都属于设计项目,都要进行理性的需求分析和策略制定,即使某些产品类型最终选择了偏感性的或情感化的表达手法,也是
基于理性决策后的一种选择
,是实现目标的一种手段。
所以我想说的是,理性和感性两者既不是对立关系,也不是并列关系,而是先后关系或嵌套关系:
理性是设计的基础和第一步,感性则是在理性之上的选择和展开
 
最后的话
作为设计师,对于设计中的理性与感性之问,不应停留在非此即彼或既要也要的简单认知里,任何深入的思考都是有意义的。在这个存在分歧的问题上,希望我的观点可以为你提供一点点启发,也希望各位设计师既能够通过理性的分析制定出有效的设计策略,又能够通过感性的表达手法创造出动人的设计作品,不断提升自身的设计价值,与产品实现共赢


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

动效让这些设计更惊艳

天宇 交互设计及用户体验

微动效在产品设计中的运用已经非常普及了,无论是在图标还是界面场景中,都运用得很普遍。通过动效的辅助不仅可以提升设计情感化,也能解决更为复杂的交互场景,让设计更惊艳。
 
最近在体验一些产品的过程中,黑马哥也发现了几个借助动效表达的设计方案,效果十分的惊艳,分享出来和大家一起学习一下。
动效让这些设计更惊艳
 
 
 
 
目录
一、3D 动效呈现会员等级
二、情感化 IP 提升搜索关注度
三、结合场景的情感化动效
四、3D 空间感的 Banner 设计
五、通过动效引导用户操作
六、微动效引导 VIP 续费
七、动态还原实时天气
八、动态 IP 引导按钮设计
九、微动效赋予品牌活力
 
 
 
一、3D 动效呈现会员等级
会员中心通常会通过 3D 图标来助力会员等级设计,除了静态的表达也会通过动效和新颖的交互形式呈现,以此提高会员中心的视觉表现力。
 
最近在体验腾讯视频 APP 时,会员专区在表现用户会员等级的设计中,没有使用传统的徽章形式,而是以 3D 数字结合动效的形式表达。3D 动效的设计使得会员等级区别于常规形式,更有吸引力。 
动效让这些设计更惊艳
 
 
 
 
二、情感化 IP 提升搜索关注度
IP 形象是成就品牌的关键因素之一,被广泛运用到产品感官体验的设计中,带来的情感化共勉也是显而易见的。
 
在使用悟空浏览器 APP 时,启动产品进入首页后搜索框上方出现悟空的 IP 形象,悟空呈现出左右环顾、上下打量,最后看向搜索框的系列动作等表现。不仅提高了搜索功能的关注度,也使得产品设计更具情感化。
动效让这些设计更惊艳
 
 
 
 
三、结合场景的情感化动效
根据不同的业务场景进行设计表达,可以更好的服务目标用户,而情感化的设计提升,可以拉近产品与用户之间的亲和力。
 
为了降低用户等餐过程中出现的负面情绪,饿了么 APP 下单之后在详情页中根据点餐的不同设计了情感化的动效表达。无论是快餐还是冷饮等,都针对性地设计了微动效的元素,以此来表现当前状态。
动效让这些设计更惊艳
 
 
动效让这些设计更惊艳
 
 
 
 
四、3D 空间感的 Banner 设计
通过突出设计、交互、布局结构等的创意性,可以使得 Banner 具备更强的差异化,以此来突出 Banner 的存在感。
 
腾讯视频 APP 首页的 Banner 布局也会经常呈现出一些很有创意的方案,比如之前体验到一个结合 3D 空间感营造的设计案例,就非常有吸引力。通过动态过度到立体空间,再恢复到默认形式,这个动态的过程演变就能让用户过目不忘。
动效让这些设计更惊艳
 
 
 
 
五、通过动效引导用户操作
针对一些使用频次不高或者过于隐藏的功能,为了提高用户的操作概率,会通过一些特殊的设计表达来提升用户的关注度,引导用户进行相关操作。
 
比如麦当劳 APP 首页中,为了吸引用户下拉进入二层楼,通过动效的形式设计了一个摇摆的铃铛,以此来吸引用户的注意力。用户看到像是随风飘动的铃铛,就会忍不住去拉动,这就达到了引导用户操作的目的,提高了二层楼内容的曝光度。
动效让这些设计更惊艳
 
 
 
 
六、微动效引导 VIP 续费
针对一些无法通过占比面积进行突出的元素,运用微动效的形式设计是常见的设计手法。
 
网易云音乐 APP “我的”板块中,为了突出 VIP 续费按钮,黑胶唱片以动效的形式在按钮中来回滚动,以此强化续费按钮的关注度。
动效让这些设计更惊艳
 
 
 
 
七、动态还原实时天气
天气类产品从简单的静态预告升级为动态实时还原,可以让用户更加直观的判断天气变化,也能提高界面设计的感官体验。
 
比如 iPhone 自带的天气 APP,以动态还原实时天气作为界面背景,不仅便于用户识别天气,也使得产品设计更具情感化体验。
动效让这些设计更惊艳
 
 
 
 
八、动态 IP 引导按钮设计
按钮设计样式可以发挥的空间很大,除了在造型、配色、空间感等方面突出设计以外,也能通过按钮微动效或者动态引导等形式强化。
 
比如智行火车票 APP “抢票”板块中,为了突出“添加抢票”按钮的存在感,以动效 IP 引导进行设计。不仅使得按钮更突出,设计感也显得俏皮可爱,凸显亲和力。
动效让这些设计更惊艳
 
 
 
 
九、微动效赋予品牌活力
立足于品牌做设计是突出产品差异化的关键,这也是产品设计未来的演变趋势之一,如何提高品牌的曝光度和记忆度,成为设计师不断探索的方向。
 
最近在使用夸克 APP 时,微动效赋予品牌 LOGO 的活力感让人印象深刻。在众多特殊节庆等时间段,夸克也会以动效的形式赋予品牌更多变化,不仅使得产品更具年轻化属性,也能更好的传递品牌基因。
动效让这些设计更惊艳
 
 
动效让这些设计更惊艳
 
 
 
 
小结
动效使得产品具备更多的变化,也能辅助解决更多复杂功能的交互场景,探索动效的场景运用可以提升设计灵感,希望本期的分享可以带给大家更多设计灵感。本文描述属于个人体验总结,不足之处我们努力改进。
 
本文由 @黑马青年 原创发布。未经许可,禁止转载。


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

日历

链接

个人资料

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

存档