首页

竞品分析 | 基于用户体验五要素拆解

涛涛

竞品分析 | 基于用户体验五要素拆解

常见的卡片设计如何做的更吸引人点击?

涛涛

瓷片区是一种在APP设计中常见的运营位,怎么把瓷片区设计的精致呢?今天教大家4个可复用的
「隐形公式」

我们如何把竞品分析做的更好?

涛涛

市场分析报告:分析对象是整个市场和行业,目标是寻找市场机会、帮助产品定位,分析维度包括市场规模、增长趋势、市场份额、竞争状况等,使用场景是洞察行业、寻求机会,适用对象为创业者、新产品立项者、投资者等,属于宏观层面。
竞品分析报告:分析对象是自家产品的竞品,目标是学习借鉴,分析维度为产品分析,使用场景是公司内部发现问题并提供参考,适用对象是产品经理、体验设计师等。
产品分析报告:分析对象是自家产品的竞品或任意感兴趣的产品,目标是帮助自身深度了解一款产品,分析维度包括产品视角(功能、设计、技术等),使用场景是个人学习、求职,适用对象为产品经理、体验设计师等。
产品体验报告:分析对象是任意感兴趣的产品,目标是个人学习、求职,分析维度是产品设计(用户体验要素)。

设计师做了哪些事情让产品界面更高级?

涛涛

构图是作品中艺术形象的结构配置方法,是造型艺术表达作品思想内容并获得艺术感染力的重要手段,在视觉艺术(如绘画、平面设计、摄影)中常用,在 UI 设计中主要作用是构建和谐稳定的布局页面。

我们来帮你捋清楚产品的设计思路

涛涛

全程参与产品从 0 到 1 的设计能锻炼综合能力,但实际工作中更多是迭代优化,需主动熟悉业务背景以掌握设计主动权。
文章重点解析立项前探索期的设计思路,后续将介绍交付与迭代阶段。

麦当劳自动点餐系统的用户体验分析

涛涛

本文围绕麦当劳自动点餐系统的用户体验展开分析,指出其在餐食展示(无滚动提示)、个性化选项(需手动滑动才能看到更多)、付款流程(存在 53、175、157 三个混淆号码,导致 45 分钟等待)、餐号呼叫系统(两种号码并行)、桌号输入等环节存在问题。作者通过三次现场调查,基于用户画像和故事板构建解决方案,经低保真与高保真原型迭代,重新设计了菜单展示、个性化选项流程及付款系统,最终强调设计中反复测试和建立规范的重要性。

从列表到详情:提升用户转化的7种方法

lanlanwork

每个产品都希望展示更多用户感兴趣的内容,但受限于屏幕大小和人类的认知能力,我们不可能一次性获取产品中的所有信息。因此,需要采用逐层展开的结构来平衡信息密度与操作效率。这就催生了界面设计中最经典的「列表到详情」界面设计模式。这种模式在列表呈现内容摘要降低认知负荷,同时为深度探索提供入口,完美契合人类「先大概再具体」的认知路径。

2025年UI设计的新趋势,你不能错过

lanlanwork

响应式与自适应设计的进阶

在 2025 年,随着智能设备种类的持续增多,从传统的桌面电脑、笔记本电脑,到各式各样的智能手机、平板电脑,甚至新兴的可穿戴设备如智能手表、智能眼镜等,用户期望在不同设备上都能获得一致且优质的体验。响应式设计不再仅仅局限于简单的页面布局调整,而是在布局与交互层面实现更为深度的优化。

 

在布局方面,CSS 网格布局(CSS Grid Layout)和弹性盒模型(Flexbox)技术得到更广泛且深入的应用。CSS 网格布局允许设计师创建二维的网格结构,精确控制页面元素在不同屏幕尺寸下的位置与大小。例如,在一个电商网站页面中,通过 CSS 网格布局,可以使商品展示区域在桌面端以多列形式整齐排列,而在手机端自动调整为单列布局,同时保持图片与文字信息的合理展示比例。弹性盒模型则更侧重于一维布局,它能够方便地实现元素的对齐、分布与自适应拉伸。在一个导航栏设计中,使用弹性盒模型可以确保导航项在不同屏幕宽度下均匀分布,且当屏幕空间不足时,自动调整导航项的显示方式,如将部分次要导航项折叠为下拉菜单。

 

交互层面,响应式交互设计也有了新的发展。例如,手势交互在不同设备上的一致性与适应性增强。在移动端,常见的滑动、缩放、长按等手势操作,在可穿戴设备上也能以类似且符合设备特点的方式实现。在智能手表上,用户通过简单的左右滑动屏幕即可切换不同功能界面,这种交互方式与手机端的操作习惯相呼应,同时又适应了智能手表屏幕小、操作空间有限的特点。此外,视差滚动效果在响应式设计中也得到创新应用。在一些品牌宣传网站中,视差滚动效果不仅能在桌面端营造出富有层次感的视觉体验,在移动端同样可以通过优化,利用有限的屏幕空间展现独特的视觉效果,吸引用户注意力,引导用户深入浏览页面内容。

极简主义与情感化设计的融合

极简主义设计风格在 2025 年依然盛行,但其内涵有了新的拓展,与情感化设计深度融合。极简主义强调去除不必要的元素,以简洁的界面呈现核心内容与功能,提升用户操作效率。而情感化设计则关注用户的情感需求,通过设计元素引发用户的情感共鸣。

 

从色彩运用来看,在极简主义的基础上,设计师更倾向于选择具有情感暗示的色彩。柔和的暖色调如淡橙色、浅黄色,常用于营造温馨、友好的氛围,在一些儿童教育类 APP 或健康养生类应用中较为常见,能够让用户在使用过程中感受到舒适与安心。冷色调中的深蓝色,因其给人专业、可靠的感觉,常被用于金融类、办公类应用的界面设计,增强用户对产品的信任感。

图标设计也体现了这种融合趋势。极简主义的图标造型简洁,仅保留最能代表功能的关键特征。在此基础上,通过赋予图标一些独特的细节或动效来传递情感。例如,一个音乐播放应用的播放按钮图标,在静止时是一个简洁的三角形,当用户点击播放时,图标会以一种柔和的动画效果展开,如同音乐从按钮中流淌出来,这种微妙的动效设计增加了用户与图标之间的互动乐趣,引发积极的情感反馈。

文案在极简主义与情感化设计融合中也起着重要作用。简洁明了的文案不仅能够准确传达信息,还能通过语气、措辞传递情感。在一个在线购物 APP 的订单确认页面,文案 “您的宝贝已踏上旅程,期待与您早日相见”,相比单纯的 “订单已确认”,更能让用户感受到购物的愉悦与期待,从情感层面提升用户对品牌的好感度。

 

AR 与 VR 在 UI 设计中的拓展

增强现实(AR)与虚拟现实(VR)技术在 2025 年逐渐成熟,其在 UI 设计领域的应用场景不断拓展。在 AR 购物领域,消费者通过手机或 AR 眼镜,能够在现实环境中虚拟试穿衣服、摆放家具等。例如,一家家居品牌推出的 AR 应用,用户可以在手机上选择心仪的家具款式,然后通过手机摄像头将家具虚拟放置在自己家中的实际场景中,查看家具与周围环境的搭配效果。在这个过程中,UI 设计需要考虑如何在现实场景中清晰地展示虚拟家具的信息,如价格、材质、尺寸等,同时不干扰用户对现实与虚拟融合场景的体验。设计师通常会采用半透明的悬浮卡片形式展示信息,卡片的位置与大小会根据用户的视角和操作进行动态调整,确保信息的可读性与展示的自然性。

在 VR 虚拟展厅方面,企业可以利用 VR 技术打造沉浸式的产品展示空间。UI 设计在其中负责构建导航系统、交互界面以及信息展示方式。用户在虚拟展厅中通过手柄或手势操作进行浏览,UI 设计需要提供直观的导航指引,如在展厅地面设置虚拟的引导线,或者在用户视野边缘显示简洁的导航图标,引导用户前往不同的展示区域。当用户靠近展品时,自动弹出详细的产品介绍窗口,窗口的设计风格与虚拟展厅的整体氛围相协调,采用 3D 立体效果展示产品细节,增强用户的沉浸感与交互体验。技术实现上,借助 Unity、Unreal Engine 等游戏开发引擎,结合 AR/VR 设备的传感器数据,实现精准的交互响应与逼真的视觉效果。

 

数据驱动设计的兴起

数据驱动设计在 2025 年成为 UI 设计的重要趋势。通过收集与分析用户在产品使用过程中的各种数据,设计师能够深入了解用户行为与偏好,从而精准优化 UI 设计的各个环节。

在界面布局优化方面,通过分析用户的点击热图数据,设计师可以了解用户在页面上的注意力分布情况。例如,在一个新闻资讯 APP 的首页,通过点击热图发现大部分用户集中点击页面顶部的热门新闻区域以及特定分类标签,而页面底部的一些功能按钮很少被点击。基于这些数据,设计师可以调整界面布局,将重要的新闻内容与常用功能放置在更易于用户操作的位置,提高用户获取信息与使用功能的效率。

功能设计同样离不开数据支持。通过用户行为数据的分析,发现用户在某个功能模块的使用频率较低,进一步研究发现是该功能的操作流程过于复杂。设计师可以根据这些数据反馈,简化操作流程,重新设计功能交互方式。比如,在一个在线支付流程中,通过数据分析发现用户在填写支付信息环节的放弃率较高,经过优化,采用自动填充用户常用支付信息、简化支付步骤等方式,有效提高了支付成功率,提升了用户体验。

 

此外,数据驱动设计还体现在个性化推荐方面。通过收集用户的浏览历史、收藏记录、购买行为等数据,利用机器学习算法为用户提供个性化的内容推荐。在一个视频播放平台中,根据用户的观看偏好,为用户推荐符合其兴趣的视频内容,UI 设计则需要考虑如何以吸引人的方式展示这些个性化推荐内容,如采用瀑布流布局、个性化的封面设计等,提高用户对推荐内容的点击率与观看时长。

可持续设计理念在 UI 中的体现

随着环保意识的增强,可持续设计理念在 2025 年的 UI 设计中愈发重要。在资源节约方面,UI 设计注重减少数据传输量与能耗。例如,在图片处理上,采用 WebP 等高效的图片格式,相比传统的 JPEG、PNG 格式,WebP 格式在保证图片质量的前提下,能够大幅减少图片文件大小,降低数据传输量,节省用户的流量消耗,同时也减少了服务器的存储与传输压力。在动画效果设计中,避免使用过于复杂、高能耗的动画,采用简洁且必要的动画效果来提升用户体验,减少设备的电量消耗。

 

从绿色环保角度,UI 设计在色彩选择与界面风格上也有所体现。大量采用自然元素的色彩,如绿色、蓝色等,营造与自然和谐的视觉感受。在一些环保主题的应用中,界面设计模仿自然生态场景,如以森林、河流等为背景元素,传达环保理念。同时,在设计中避免使用过于刺眼、鲜艳且可能对用户视觉造成疲劳的色彩组合,减少不必要的视觉干扰,让用户在使用产品过程中感受到舒适与放松,从侧面体现可持续设计中对用户身心健康的关注。此外,在产品更新与维护方面,UI 设计考虑到版本迭代的可持续性,采用模块化设计,方便进行局部更新与优化,减少因整体更新带来的资源浪费与用户学习成本。


兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计、交互设计、UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

UX设计之概念设计

lanlanwork

一、概念设计的关键组成部分:

1. 问题定义

识别并描述设计旨在解决的核心问题或挑战。这应包括用户研究的洞察、业务目标以及明确的设计目标。

例子:如果你在设计一个健康应用,首先要定义用户面临的主要问题,比如“用户如何跟踪自己的饮食习惯?”这个定义要包括用户的痛点、业务目标以及希望达到的设计效果。

2. 用户角色和场景

开发代表性的用户角色,提供人口统计和行为信息,以帮助理解目标用户的需求、动机和目标。然后创建场景,说明用户在各种背景下如何与提出的解决方案进行交互。

例子:创建一个典型的用户角色,比如“忙碌的职场人士张先生”,他需要一个简单的方法来记录每日饮水量。然后,设计场景来展示张先生如何在一天中使用应用记录水量,并根据不同的使用情况设计交互界面。

3. 信息架构

定义产品或服务的高层结构,组织内容和功能,使用户易于理解和导航。这有助于确保信息在整个体验中清晰且一致地呈现

例子:如果你的产品是一个在线购物网站,信息架构包括如何组织产品类别、搜索功能、购物车和结账流程,确保用户能够轻松找到他们想要的商品并完成购买。

4. 草图和线框图

创建粗略的草图或线框图,以可视化用户界面的关键方面,并探索各种设计备选方案。这些早期原型有助于识别潜在问题,并指导未来的设计决策。

例子:在设计一个新的社交媒体平台时,你可以画出基本的页面布局草图,比如首页、用户个人资料页和消息页面。这些草图帮助你快速测试不同的布局方案,并发现可能的问题。

5. 设计原则和指南

建立一套高层次的原则和指南,这些将塑造设计并作为进一步开发的基础。这可能包括美学和功能性标准,以及确保可访问性和可用性。

例子:制定设计原则,如“简洁优先”,确保每个页面都尽量减少视觉杂乱。也要考虑用户可访问性,如确保文本和按钮对色盲用户也友好。

6. 迭代

不断地细化和迭代初步概念,利用用户测试和利益相关者反馈来做出有依据的设计调整。这种迭代方法允许项目在进展过程中保持灵活性和适应性。

例子:你设计了一个新的界面,但在用户测试中发现他们难以找到“设置”按钮。你可以根据反馈修改设计,调整按钮位置,然后再次测试,直到大多数用户都能顺利使用。

概念设计的目标是创建一个连贯且引人入胜的愿景,满足用户需求并与业务目标对齐。通过投入时间和精力于这一基础阶段,设计师可以为成功且愉快的用户体验奠定基础。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计、交互设计、UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

数据可视化大屏不得不说的设计奥秘——交互动效

蓝蓝设计的小编

编辑导语:我们在工作中经常会用到一些数据,数据可视化可以帮助我们更好的理清数据,动效的设计也更加能体现多维展现数据;本文作者分享了关于交互动效的数据可视化,我们一起来看一下。

数据可视化把相对复杂、抽象的数据通过可视化的手段表达出其内里的信息和规律,促进数据信息的传播和应用,更加直观地传达图表信息;通过可视化,我们的大脑能够更好地抓取和理解有效信息,增加信息的印象。

然而,如果数据可视化设计做的不合理,反而会带来负面影响,影响信息的传播,误导用户的认知;所以在设计的时候需要我们多维展现数据,不仅仅局限于单一层面,这时候动效设计就是很重要的一环了。

我们希望的数据可视化设计是可以让数据通过视觉形式,使信息更容易被接受,让数据内容更容易被理解,让数据信息更容易被记忆。

一、为什么需要交互动效设计

在一个数据项目中,有许多的数据通常都是实时变化的,为了减少数据变化刷新时的突然性以及需要告知用户数据更新,那么动效设计就是必不可少的。

此外,数据可视化大屏服务的主要是B端用户,我们在设计过程中要做到:让设计服务于数据内容,给用户以最为清晰明确迅捷的数据展示。

针对数据可视化大屏的特点,来具体谈谈我们为什么需要做动效设计:

1. 信息体量大

与B端产品一样,可视化大屏的信息体量相对庞大,且更注重用户在单位面积内获取信息的效率,因此我们需要在有限的大屏内尽可能展示多的有效信息。

但是,如果我们仅仅是一味地往数字大屏里“塞”信息,没有对信息结构、展现方式做一个很好的规划,往往庞大的数据量会造成信息堆砌,给用户接受并处理信息带来一定的干扰。

这时候,动效就可以很好的解决这个问题;利用动效,构建出数据大屏的层次,将数据存放在不同的层级页面内,为用户带来更好的数据信息服务体验。

2. 专业操作性强

从目标用户来看,可视化大屏主要面向的是具有一定专业知识的用户,因此产品需要做到专业性高、逻辑严谨、规范性强,用户在使用时按照已有的一套规范流程进行操作,大大提高工作效率。

但专业的操作流程,往往会带来操作链路过长的问题;因此我们需要进行动效设计,一个好的动效可以引导用户更快、更简的熟悉流程、上手操作、完成任务

3. 专业概念多而复杂

可视化大屏往往需要解决一些专业性的问题,同时传达出来的概念多而复杂,如果仅仅靠文字、数据来进行展现,往往会增加用户的认知成本;同时,可视化大屏在帮助业务人员理解以及帮助领导做出决策中起到了很大的作用,我们如何将复杂的专业概念快速传达呢?

这时候“动效”就产生了很大的作用——大数据时代,文字和数据实在会让人感到疲惫,但将其转化为图片甚至是动画,通过概念物化可以帮助用户更快的理解、更好的记忆

二、做什么样的交互动效

根据可视化大屏的这三个特点,具体来说说我们可以制作怎样的动效让可视化大屏动起来:

(以下案例均来源于EasyV数据可视化)

1. 信息排布

信息排布可以解决好信息体量大的问题,在有效的面积内尽可能的展示更多的信息,这就需要设计师在信息展示上进行布局优化。

当出现同一类指标需要应用于不同的场景时,可以利用交互按钮进行指标主体切换,将不同的场景数据存放在同一位置中。

比如,同属于票务销售指标的公园门票与观光车票,可以通过交互按钮进行主体切换,将不同数据的两张图表存放在同一区域块内;既解决了空间存放问题,又让用户更好的理解数据主体,提升了用户的交互体验。

当需要了解更详细的文字、数据信息时,可以通过交互动效进行信息补充。

用户在使用时可以通过总体信息概览关注到整体数据的变化,并不需要时时刻刻知道每个区域具体的数据信息,但有时候需要关注到具体的业务时往往会需要知道更详细的数据;比如,用户在点击新疆区域时可以从大屏中获取到新疆区域的动销品种、新书品种、销售码洋的信息。

将全局信息与局部信息区分开,通过动效设计优化信息的排布,可以帮助用户获得更好的交互体验。

在使用数据可视化大屏时,领导决策者会更关注全局数据,具体业务负责人会更关注局部数据;比如,上图模版中地球视角代表的就是全局数据,指标视角代表的就是局部数据,整个数据大屏中的数据被明确区分开,便于决策者与业务人员更好的使用并理解数据。

2. 引导交互

动效设计可以引导用户进行交互,让用户每进行一次操作就知道接下来该做什么立刻明晰自己的操作得到了什么。

利用动效进行交互引导即使大屏操作链路过长,也可以让用户快速上手操作,减少流程学习时间。

比如,用户的鼠标滑过,字段会高亮响应或者图表块会突出显示,提示用户此处可点击,从而吸引用户点击查看下一层级数据。

进入下一场景后,又会有对应的区域提示用户返回全局或查看其他场景;当做到层层有响应,就能减少用户在每一步操作上的困惑时间,帮助用户快速上手操作流程,并且大大提升工作效率。

3. 概念物化

将抽象的概念利用动效具象化,将会大大降低用户的学习成本,利用动效讲好一个故事,无疑是为可视化大屏景上添花的。

比如,将整个流程通过动效制作成模型展示出来,用户便能直接清晰明了的找到某个环节的数据;如今的数据可视化不再是一味的图表堆砌,更多的设计师开始关注3D建模、动效交互等等,将更逼真的场景搬上大屏,给用户身临其境的真实感。

在数据可视化大屏中,优秀的动效设计不仅仅是炫酷的场景、令人赞叹的动画,更多的是要关注到用户的体验感。

说到底,制作动效还是为了更好的服务使用者,提供更好的交互体验,有时候一个微小的动效设计就能带来用户体验的大幅提升。

 

本文由 @可爱的数据控

 原创发布于人人都是产品经理,未经许可,禁止转载

原文链接:https://www.woshipm.com/pd/4217597.html

题图来自unsplash,基于 CC0 协议

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

image.png

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

日历

链接

个人资料

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

存档