首页

兰亭秒微设计|UI 设计师创意构思技巧与方法

涛涛 设计思维

设计师常会遇到创意卡壳、灵感枯竭的情况。兰亭秒微设计结合实战经验,整理一套可直接套用的创意构思方法,帮你稳定输出高质量设计方案,告别 “想不出来”。

搞定 B 端响应式布局:从原理到落地,一篇吃透

清阳 设计思维

 

本文聚焦B 端系统响应式设计,拆解适配逻辑、参数规范与设计交付,兰亭妙微ui设计公司帮你低成本实现合理适配,告别无效工作量与开发返工。

一、先搞懂:B 端响应式的核心定位

 
响应式的本质是让界面随浏览器窗口自动调整,保证展示完整、操作合理。
 

关键认知

image.png

  1. 关注窗口宽度,而非设备分辨率
     
    用户可自由缩放浏览器,设计只适配常用窗口宽度区间,不纠结固定屏幕分辨率。

    image.png

  2. B 端≠全量响应式
     
    B 端页面信息密集、组件复杂,全端响应式开发成本极高。优先局部适配,不做无意义的全量兼容,移动端场景建议单独开发。
  3. 只做 3 类核心适配
     
    B 端响应式仅聚焦 3 种场景,其余页面(表单、详情页)可固定宽度:
  • 布局宽度自适应:模块结构不变,宽度随窗口缩放

    image.png

  • 多列流式排布:卡片随宽度自动增减列数

    image.png

  • 组件展收控制:侧边栏、信息栏达到断点自动展开 / 收起

image.png


 

二、4 步定参数:响应式基础规范

 

1. 设定宽度边界

 
  • 最小宽度:≥900px(小于此宽度允许横向滚动)
  • 最大宽度:≤2560px(超过此宽度内容不再放大)
     
    作用:规避极端窄屏 / 超宽屏,减少无效适配工作量。

2. 划分适配区域

  • 上下结构:仅内容区做响应式,顶栏不参与

    image.png

  • 左右结构:仅右侧内容区适配,侧边栏排除在外
     
    核心原则:导航类固定组件不参与响应式
 

3. 栅格系统配置

 
以 Figma 设计为例,内容区创建栅格 Frame:

image.png

  • 列数:首选24 列,可选 12/16/20 列
  • 列间距:固定 8px/12px/16px(三选一)

    image.png

    栅格仅约束顶级组件,组件内元素无需对齐栅格。
 

4. 确定断点(Breakpoint)

 
断点是触发布局变化的临界宽度,需提前与开发确认:
  • 导航展收:≤1000px 收起,>1000px 展开
  • 多列卡片:900-1200px=3 列;1200-1500px=4 列
     
    提示:无适配场景可不设断点,避免冗余规则。
 

 

三、3 阶段落地:从设计到交付

image.png

阶段 1:分配顶级组件栅格占比

image.png

仪表盘、卡片页等页面,按栅格划分顶级组件宽度;
 
表格、表单等满宽组件,直接占满栅格区域即可。
 

阶段 2:制定组件内部适配规则

image.png

组件宽度变化时,内部元素遵循 3 类规则:
 
  1. 固定尺寸:图标、按钮等固定宽高,左 / 右对齐
  2. 填充自适应:输入框、筛选栏等撑满父容器
  3. 高度自适应:文本区域自动换行,撑开组件高度
     
    复杂组件(表格、图表)需提前同步开发适配方案。

阶段 3:输出关键页面响应式稿

 
无需全页面做适配,仅输出核心页面的小 / 中 / 大 3 版效果:
 
  • 必做页面:首页仪表盘、数据表格页、卡片列表页
     
    作用:让开发直观理解适配逻辑,避免自由发挥导致体验混乱。
 

 

四、避坑总结

  1. 不追求全设备完美适配,局部响应式是 B 端最优解
  2. 栅格只管顶级布局,组件内部用自动布局搞定
  3. 宽度边界、断点、适配区域必须提前和开发对齐
  4. 交付核心页面效果图,比纯文字规则更高效

转载:优设

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

 

image.png

搜索框的消亡启示录

清阳 设计思维

当 AI 开始重构本地生活的交互逻辑,美团的搜索框正悄然沦为旧时代的遗迹。本文深入探讨了关键词搜索与自然语言理解之间的根本冲突,揭示了筛选器背后隐藏的产品妥协,并预判了 AI 对本地生活服务入口的三大冲击。从对话框替代,到 Agent 化威胁,再到最危险的场景蒸发 —— 这场范式迁移,将如何重塑美团的护城河?
 
AI 正在重构本地生活服务的交互入口。这并非一次简单的升级,而是一场彻底的范式迁移。兰亭妙微 ui 设计公司认为,交互入口的代际变革,本质是用户心智与产品逻辑的双重重构,决定着平台未来的核心竞争力。

一、一个被所有人忽视的产品细节

image.png

周五下午六点,你打开美团,想找一家“适合带父母吃饭、安静一点、最好有停车场、粤菜或者闽菜都行”的餐厅。

你停顿了三秒。

因为你不知道该在搜索框里输入什么。“粤菜”太宽泛,“安静粤菜”不确定能否搜到,“带父母”这个条件根本没有对应的关键词。最后你妥协了,输入“粤菜”,然后手动拨动筛选器:距离3公里以内、评分4.5以上、人均150—300元。翻了两页结果,看到第十几家店的时候,已经记不清最初想要什么感觉了。

这个场景,每天发生在数以千万计的美团用户身上。没有人觉得有什么问题——毕竟大家都习惯了。

但如果认真思考,你会发现这里隐藏着一个根本性的产品矛盾:用户的真实需求是模糊的、情绪化的、充满上下文的,而搜索框的底层逻辑却是关键词匹配——它要求用户把一个复杂的人类意图,压缩成几个离散的词语。

这个压缩的过程,本身就是信息损耗。而筛选器、排序、推荐算法,不过是在这个损耗之后所做的各种补救。

今天我想深入分析的,不是美团要不要做AI,而是AI的到来如何从结构上重新定义了美团的用户交互逻辑,以及这对整个本地生活服务赛道意味着什么。

二、搜索框背后的产品逻辑:十年的“意图压缩术”

2.1 搜索框的本质不是“搜索”,而是意图的强迫翻译

image.png

从信息架构的角度看,搜索框是一个“意图翻译器”。它的工作原理是:把用户头脑中模糊的需求,强制转化为系统可以处理的结构化信号。

问题在于,这个翻译过程存在天然的信息损耗。人类表达需求的方式是自然语言,是带有情绪和上下文的整句话;但关键词搜索要求的是最小化、去语境化的词组。当你把“想找一家适合带父母的安静粤菜馆”压缩为“粤菜 安静”,你已经丢失了“带父母”所暗含的价值感需求——面子、正式感、停车便利、服务周到。这些维度,任何筛选器都覆盖不到。

更重要的是:大多数用户在打开搜索框的那一刻,自己的需求也是未完全成形的。他们需要的不是“输入词语获得列表”,而是一个能帮他们把模糊想法变成具体选择的交互过程。搜索框不是这个过程的起点,它只是一个粗暴的入口。

2.2 筛选器是“打补丁”的产物,不是真正的解法

美团过去十年,在搜索框旁边积累了越来越多的筛选维度:价格区间、评分区间、距离、营业时间、配送方式、菜系、口味偏好……每一个新增的筛选项,背后都是对搜索能力不足的一次承认。

筛选器越复杂,说明搜索越弱。这是一个重要的产品逻辑。

因为在理想情况下,如果搜索本身能理解“适合带父母”,你根本不需要“人均150—300元”这个筛选器——系统应该自己推断出价位范围。如果搜索能理解“安静”,你也不需要“评分4.5以上”来作为代理指标。筛选器的本质,是用多个结构化维度去近似替代搜索本身无法理解的语义内容。

这种设计在关键词搜索时代是合理的,因为你只能如此。但它同时也造成了一个认知负担:用户要在使用产品的同时,自己完成“需求拆解→关键词提炼→筛选器配置”这三步工作。这是用户替产品做了本该由产品完成的事情。

2.3 推荐算法为什么救不了搜索

过去几年,美团在推荐算法上投入了大量资源。首页的“猜你喜欢”“今日必吃”“附近热门”,本质上是在用主动推荐来弥补搜索的局限性。

但推荐和搜索满足的是用户决策链上的不同节点:推荐解决的是“我不知道要什么”的探索需求,搜索解决的是“我已经有方向,需要找到它”的意图需求。

当用户有明确意图的时候,推荐流是一种干扰,而不是帮助。周五六点打开美团想带父母吃饭的那个人,他不需要“今日必吃网红烤串”,他需要的是一个能理解他需求的系统。推荐算法再精准,也无法解决搜索的根本缺陷。

三、AI来了,搜索框面临的三种结构性冲击

冲击一:被对话框渐进替代

image.png

大型语言模型的核心能力之一,是零成本的自然语言理解。它可以直接处理“帮我找一家适合带父母吃饭、安静、有停车场的粤菜馆”,而不需要用户做任何翻译工作。

这不是概念,而是已经在发生的事情。当前各大互联网平台陆续接入大模型的搜索能力,其背后的产品逻辑完全一致:把关键词搜索框替换为自然语言对话框,让系统来承担“需求理解”的工作,而不是把这个负担甩给用户。

对美团而言,这意味着搜索框的替代将是一个渐进式、不可逆的过程。用户一旦体验过“说人话就能找到想要的餐厅”,他们不会再愿意回到拼关键词加拨筛选器的旧交互模式。

冲击二:被Agent整体跳过

比对话框替代更激进的是Agent路径。

在Agent模式下,用户不再经历“搜索→筛选→选择→预订”这个线性流程,而是:表达意图→Agent自主完成理解、比价、预订、提醒的全部环节→用户只需最终确认。

这意味着搜索框不只是被替换,而是作为一个独立环节被整体消解。用户无需进入美团App,只需在微信、支付宝、或者操作系统级别的AI助手中完成整个交互——美团的服务能力被调用,但美团作为流量入口的位置被彻底边缘化。

微信的AI搜索、支付宝的AI助手、华为的小艺、苹果的Siri进化版,都在朝着这个方向推进。Agent化不是遥远的未来,它是当下已经在布局的竞争格局。

冲击三:用户行为迁移导致的场景蒸发(最被低估的威胁)

前两种冲击是关于“搜索框被什么替代”,而第三种冲击更为隐蔽,也更具毁灭性:用户的使用场景可能在不进入美团的情况下被满足。

想象一个使用场景:用户在和朋友的微信群聊里讨论周五吃什么,这时群里的AI助手直接分析对话内容,给出三家符合所有人口味和位置的推荐,并且完成了预订——全程在微信内完成,美团的数据库被调用,但美团App从未被打开。

这不是技术上的想象,而是一个流量入口迁移的商业问题。美团失去的不只是搜索框,而是“用户主动打开App”这个行为本身。一旦用户的高频决策习惯在其他平台形成,美团的日活数据将面临结构性下滑。

这才是AI冲击中最危险的死法,因为它是无声的、渐进的,等到平台意识到的时候,可能已经失去了整整一代用户习惯。

四、美团真正的护城河在哪里

image.png

在讨论AI对美团的冲击时,有一个根本性的问题需要厘清:美团的价值究竟是什么?

如果美团的价值是“连接用户和商户的信息中介”,那它确实岌岌可危,因为AI可以比搜索框更高效地完成这个连接。但如果美团的价值是“把服务实际送达到用户手中的履约网络”,那AI对它构成的威胁就要小得多。

4.1 履约能力:AI造不出来的壁垒

美团今天拥有超过700万的骑手网络、覆盖数百个城市的即时配送基础设施、与数百万商户的深度绑定关系,以及每天处理数千万笔订单所形成的实时运力调度系统。

这些东西,AI无法凭空生成。大模型再强大,也无法替代一个在三十分钟内把热餐送到你手边的骑手网络。AI是信息层的技术,而美团的核心竞争力是物理层的基础设施。

这个判断有一个重要推论:美团的搜索框可以被替代,但美团的履约能力不会被替代——至少在可见的未来不会。这意味着即便美团完全失去了前端的流量入口,它也可以以“能力提供者”的角色,为其他平台的AI助手提供后端服务。

4.2 数据资产:有价值,但需正确使用

美团积累了超过十年的用户消费行为数据:什么人在什么时间什么地点吃什么,偏好什么价位、什么菜系、什么口味,有什么饮食禁忌,外卖和堂食的偏好有什么差异……这些数据是训练本地生活垂直AI模型的核心资产。

但这里有一个容易被忽视的战略陷阱:数据只有转化为理解用户意图的能力,才能成为真正的护城河。如果美团把这些数据只是用来优化推荐算法,提升现有搜索框的点击率,那它就是在用新工具巩固旧模式,而不是在构建下一个时代的竞争优势。

真正的机会是:用历史数据训练一个“深度理解本地生活消费意图”的垂直模型,让AI能够理解“带父母吃饭”背后的全部语义,能够根据用户画像推断“你说的安静,是哪种程度的安静”。

4.3 最危险的战略误判:把AI做成更聪明的搜索框

基于以上分析,美团在AI转型中最危险的做法,是把大模型接入现有的搜索产品,让对话框替换关键词框,在视觉上完成一次“AI升级”,然后宣称完成了AI化转型。

这是一种“AI美颜”——换了皮肤,底层逻辑没变。用户体验确实会有改善,但改善的是现有流程的效率,而不是对未来交互范式的卡位。

真正的产品战略应该是:放弃“流量入口”的思维定式,转向“意图响应网络”的定位。美团需要成为一个能在任何界面、任何上下文中理解用户本地生活消费意图并完成履约的系统,而不只是一个把用户吸引进App的流量平台。

五、对产品经理的三个结构性启示

image.png

美团的案例不只是一个大厂的战略故事,它对所有产品人都有直接的方法论价值。

启示一:重新识别你产品的“意图入口”

在你当前负责的产品里,用户在哪个环节表达了他最真实的需求?那个入口,通常就是AI冲击最先发生的地方。

如果你的产品依赖搜索框、关键词匹配、或者多级筛选器来理解用户需求,那么你需要认真思考:当大模型能够直接理解用户的自然语言时,你的产品流程里哪些步骤是多余的?哪些环节是在让用户替产品做本该产品做的事情?

启示二:区分“AI能替代的”和“AI替代不了的”

美团的履约网络是AI替代不了的。你的产品里,也存在这样的部分。

识别的方法:把你产品的核心价值链拆解到最细的颗粒度,逐项问自己:如果有一个无限能干的AI助手,它能把这个环节做掉吗?能做掉的是信息层,做不掉的通常是物理层、关系层、或者依赖特定资质的专业层。那些做不掉的部分,就是你在AI时代真正应该加固的护城河。

启示三:警惕“功能叠加”掩盖“结构性缺陷”的产品陷阱

美团的筛选器越来越多,是搜索本身无力的一种掩盖。在你自己的产品里,也要警惕类似的模式:当你在给现有功能打补丁的时候,要问自己,这是在解决问题,还是在拖延面对一个结构性缺陷的时间?

AI时代给了产品经理一个重新思考底层设计的机会。与其在旧的交互框架里做局部优化,不如退出来问那个更难的问题:如果今天从零开始设计这个产品,知道AI存在,我会怎么设计?

六、搜索框消失的那天

image.png

回到最开始的场景。

有一天,你打开美团,首页没有搜索框,没有筛选器,只有一行文字:“今晚有什么打算?”

你输入:“带父母吃顿正式点的,粤菜或者闽菜都行,不要太吵,最好有停车”。

系统回答:“为你找到3家符合条件的餐厅。其中顺德菜馆距你2.1公里,今晚有包间空位,停车场可停50辆,评价中高频出现‘安静’‘服务好’,人均约220元。是否帮你预留?”

你点了确认。整个过程,四十秒。

这不是遥远的科幻,它是可以预期的近未来。搜索框不会因为某一天某个版本更新而消失,它会以用户几乎察觉不到的方式,被慢慢替代——就像人们不再“搜索天气”,而是直接问语音助手一样。

美团的搜索框消失的那天,不是美团的终结,而是本地生活服务进入“意图经济”时代的标志。在那个时代里,谁拥有对用户消费意图最深的理解能力,谁拥有把服务真正送达的基础设施,谁就拥有竞争优势。搜索框只是一个UI控件,重要的从来不是它本身,而是它背后那个“理解用户意图”的能力。

而这个能力,才刚刚开始被认真对待。

转载:人人都是产品经理

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

 

image.png

兰亭秒微|设计师创意构思的技巧与方法

涛涛 设计思维

本文专为兰亭秒微设计团队打造,聚焦设计创意从 0 到 1 的生成逻辑,用可落地、可复制的方法,解决日常创意瓶颈、灵感枯竭、方案同质化问题,帮助团队稳定输出高质量视觉与创意方案。

兰亭妙微|打破常规的 UI 设计表达 ——10 种创新思路与实战应用

涛涛 设计思维

在同质化严重的 UI 设计领域,产品想要脱颖而出,不仅要满足基础功能,更要通过打破常规的视觉与交互表达,打造差异化体验、强化品牌记忆、提升用户停留时长。兰亭妙微深耕政企、工业、教育、医疗、消费产品等多领域 UI/UX 设计,结合大量落地项目,提炼出 10 种可直接复用的创新设计思路,帮你跳出固化思维,做出更有质感、更有温度的界面。

兰亭妙微|UI 设计中高饱和亮色的应用与克制

涛涛 设计思维

北京兰亭妙微(蓝蓝设计)深耕 UI/UX 设计十六年,服务航天、金融、医疗、工业监控、大数据平台等多领域政企客户,在 B 端系统、C 端产品、可视化大屏中,对高饱和亮色的运用形成了成熟的实践体系。本文结合兰亭妙微项目经验,拆解亮色在 UI 中的价值、风险与落地规范,为商业产品提供可复用的设计思路。

外卖平台搜索功能设计核心总结

清阳 设计思维

兰亭妙微UI设计公司,以美团、饿了么、大众点评为案例,分析外卖平台搜索功能的价值、类型与设计方法,提炼出打造优质搜索体验的核心要点。

一、搜索的核心意义

image.png

  1. 高效找餐:帮有明确需求的用户快速检索,节省时间、提升点餐效率。
  2. 引导消费:用热词、推荐等引导无目标用户,创造消费、促进下单。
 

二、主流平台搜索类型特点

image.png

  1. 入口:统一用搜索框,保证高曝光。
  2. 模式:美团 / 饿了么 = 全量模糊搜索;大众点评 = 城市定向搜索。
  3. 功能:饿了么 / 大众点评带扫一扫,支持二维码快速找品。
  4. 引导:美团 / 饿了么用大色块按钮;美团加搜索标签刺激转化。
 

三、四大设计原则

  1. 场景预热:搜索前用轮播热词、运营活动、IP 动态对话引导。image.png
  2. 贴心引导:提供历史搜索、搜索发现、热榜,缩小范围、展示权益。

    image.png

  3. 预期管理:实时联想关键词,展示商家 / 商品 / 优惠,减少无效操作。

    image.png

  4. 细致分类:结果分层归类,搭配榜单与笔记,方便筛选避坑。

    image.png

 

四、总结

外卖搜索要围绕效率、引导、体验打磨细节,借鉴优秀竞品设计,打造流畅流程,提升用户留存。
 

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

 

image.png

10个产品细节剖析,看看高手如何做温度的设计!

清阳 设计思维

随着互联网产品的不断发展,在生活和工作的方方面面都有非常多的产品普及,用户的选择性更多了。想要打动用户,就要拿出更优质的服务和差异化的产品,当产品和服务拉不开差距的时候,产品设计的体验感变得至关重要了。

为了提升用户体验度,做出有温度的设计才能打动用户,兰亭妙微UI设计公司相信这些案例可以带给你一些启发。

1. 插画氛围:用场景感激活用户参与欲

image.png

产品的社区、活动等模块,核心目标是提升用户参与度。温暖具象的插画场景,能快速唤起情感共鸣。
 
  • 钉钉成长社区用全家福温馨插画,精准击中家长记录孩子成长的心理,有效提升动态发布活跃度。
  • 用视觉氛围降低参与门槛,让用户愿意主动互动、分享。
 

2. 热点主题化:借势营造沉浸式氛围

image.png

蹭热点不只是营销手段,更是视觉与体验的氛围升级
 
  • 麦当劳 App 频繁推出品牌联名主题,将界面背景、插画、图标全面贴合联名风格,整体统一且辨识度极强。
  • 从视觉到交互完整落地热点氛围,让用户感受到新鲜感与品牌趣味。
 

3. 情感化动态:让打卡更有仪式感

image.png

线下到店打卡的核心是参与感与真实感,动态设计能强化这两点。
 
  • 大众点评打卡采用 IP 角色 + 定位符号动画,清晰传递 “真实到店” 的含义。
  • 流畅动效提升操作愉悦度,让简单打卡变成有情绪反馈的小仪式。
 

4. 应景天气设计:把自然氛围搬进产品

image.png

天气类产品的竞争力,在于场景化与氛围感
 
  • 苹果天气 App 在中秋夜晚同步展示圆月效果,与现实节气高度呼应。
  • 随季节、节日、天气变化的视觉皮肤,让产品更贴近生活、更有人情味。
 

5. 品牌化刷新:让基础操作贴合产品特质

image.png

下拉刷新是高频操作,贴合产品属性的趣味动效,能大幅提升记忆点。
 
  • 当当 App 将刷新设计为 “开书→翻页” 动画,完美契合图书平台定位。
  • 把通用操作变成品牌小彩蛋,枯燥动作也变得有趣。
 

6. 长按快捷删除:提升效率更人性化

image.png

消息通知易造成红点困扰,简化删除流程是体验刚需。
 
  • 淘宝通知列表支持长按一键弹出删除选项,可单条 / 全部清除。
  • 减少滑动、点按步骤,高效解决用户痛点,更贴合使用习惯。
 

7. 多元头像预设:降低设置门槛,强化 IP

image.png

很多用户不愿自定义头像,优质预设能解决这一问题。
 
  • 贝壳找房提供微信头像导入 + 专属 IP 头像选择,选择丰富、一键应用。
  • 既提升用户头像完成率,又持续曝光品牌 IP,情感化与品牌化双赢。
 

8. 点亮城市足迹:用成就感驱动用户

image.png

旅行、出行类产品的核心情感是探索欲与成就感
 
  • 高德地图首次抵达新城市会自动弹出欢迎提示,并点亮城市足迹。
  • 用轻量玩法带来即时成就感,激发用户探索更多地点。
 

9. 昼夜视觉切换:让界面随时间更治愈

image.png

动态变化的界面,能带来持续新鲜感与细腻感知
 
  • 美团 “看病买药” 个人中心,昼夜切换顶部背景与小药箱 IP 动作。
  • 柔和的视觉变化,让界面更有生命力,提升整体使用舒适度。
 

10. 多感官趣味:视觉 + 触觉打造沉浸互动

 
随着交互技术成熟,多维感官体验成为新趋势。
 
  • 马蜂窝 AI 帮手 “十一实况” 结合重力感应,旋转手机即可触发场景变化。
  • 从视觉延伸到触觉,让互动更真实、更有探索乐趣。

     

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

 

image.png

B端产品体验调研中,设计验证怎么做?

清阳 设计思维

人们认为设计师是表面工作——设计师拿着盒子说‘它看起来好!’这不是我认为好的设计。设计可不只是看起来或者摸起来的样子,设计考虑的是用它的感觉。 ——Steve Jobs 2003年11月30日《纽约时报》

在日常的 B 端产品调研支持过程中,我们研究员经常会遇到这样的场景:

“你们帮我看看,产品方案满不满足用户需求?功能符不符合用户预期?”

“(研发问)功能上线的 ROI 是多少?用户对这类功能是否有需求?解决了用户什么问题?”

“你们多找一些用户验证一下 demo 方案行不行…”

无论是产品同学,还是设计同学,相信大家或多或少都会在需求文档、设计文档评审时被业务方、研发问到方案可行性和落地价值等方面的“灵魂拷问”,而这些疑惑同时也在拷问我们研究员。那么作为研究员,我们是如何从用户的角度去辅助产品同学和设计同学进行敏捷的方案验证呢?

首先,我们先来了解什么是产品可用性测试?

可用性(Usability),被定义为一种用来衡量界面好用程度的属性。好用程度的高低一般取决于以下五个要素:

  1. 可学习性(Learnability):初次接触这个设计时,用户完成基本任务的难易程度。
  2. 效率(Efficiency):用户能多快完成任务。
  3. 可记忆性(Memorability):当用户一段时间没有使用产品后,是否能马上回到以前的熟练程度。
  4. 出错(Errors):用户能否从错误中恢复。
  5. 满意度(Satisfaction):用户对产品的主观满意度。

可用性测试主要用于验证产品的可用性,该方法能够帮助产品同学和设计同学了解在实际使用情境中该设计方案(概念或创意)的质量(评估是否可用/是否有效/用户是否满意),并在测试结果的基础上进行改进。

换句话说,可用性测试是观察有代表性的用户,让用户完成产品中的各项任务,了解用户如何使用产品,界定出可用性问题并解决这些问题,让业务、产品、设计、研发等上下游角色尽快对产品方案达成共识并积极优化产品体验。

image.png

通过可用性测试,我们可以:

  1. 了解用户如何与产品进行交互;
  2. 了解用户是否能够完成指定任务;
  3. 了解用户需要多久才能完成指定任务;
  4. 了解用户对本品和竞品的满意度;
  5. 明确产品存在哪些需要优化的可用性问题;
  6. 明确产品可用性情况及是否符合上线目标;
  7. 让产设研团队在开发上线前发现问题并解决。

那么,什么情况下可以做可用性测试?

在实际项目执行中,我们通常会在几个特定阶段去进行产品可用性测试,不同阶段采取的调研方式也有所不同,所关注的内容亦随之变化。

(1)设计初始阶段,我们通常会进行前期用户需求挖掘或相似产品使用情况分析,并基于需求概念设计出来的草图方案进行探索性可用性测试,来确定方案内容和功能的范围是否符合用户预期方向和使用需求,以此初步评估草图方案的有效性和可用性。因此,在该阶段,我们常以纸张原型测试+定性深访为主,先从认知上与用户保持一致,理解了用户,做出来的产品方案更能贴近用户诉求。

(2)灰度上线前,我们一般对 demo 终稿进行评估性可用性测试,向目标用户介绍新设计,同时尽可能保证 demo 稿是用户能够直观测试使用的,以此来确定 demo 在功能满足、信息布局、流程交互,甚至是视觉样式上是否能够提供良好的用户体验。所以,在该阶段我们更多会进行面对面测试+可用性测试量表(SUS 量表),一般在会议室等固定安静的环境中进行,并要求用户按既定任务测试操作,任务测试过程中不打断用户并观察记录用户在关键流程环节使用中遇到的问题,测试完成后向用户提出问题或进一步探究原因。

(3)灰度上线或全量上线后,我们通常会对上线后的新方案进行对比性可用性测试,通过灰度方式在同一时间维度下比较新方案和原方案的可用性反馈和用户满意度,确保方案在全量上线之前修复任何潜在问题。因此,在该阶段我们以 A/B 测试+场景化调研问卷(如下图所示)为主,通过用户体验数据和业务数据来评估出最优版本。

image.png

实际执行中,我们怎么做可用性测试?主要实施步骤有:

image.png

STEP1:设计任务

可用性测试的基础是任务,任务测试内容的好坏是能够对测试结果的准确性有直接影响的。因此在招募用户之前,需要对测试的产品方案进行任务设计。比如,测试商家在 B 端营销系统报名营销活动流程方案的任务可以是:报名一场双 11 大促活动。

在设计比较合适的测试任务时需要注意以下几点:

  1. 选择最核心的功能或操作流程作为任务。产品最核心的功能和操作流往往是最频繁被用户使用的地方,假设最常用最核心的地方还存在可用性问题,那么就算优化了其他边缘部分的可用性问题,依旧是对产品整体体验于事无补。比如在商家报名大促活动流程中,最核心的环节是查找活动→选择商品报名→跟踪报名进度,那么就需要重点将这部分作为测试任务。
  2. 任务应符合常规操作流程。在实际业务中,产品线的职责分工会比较细化,比如 A 产品会负责 A 模块,B 产品负责 B 模块…单一功能模块的测试任务较多的情况下,如果各任务之间操作流无法串联甚至是存在冲突的话,用户测试的操作流就是不合常规的,也容易给参与测试的用户带来困扰。因此,我们研究员需要根据用户操作习惯来进行评估测试任务并设计串联流程。
  3. 为任务创建一个应用场景。简单的场景描述会对用户执行任务有帮助。比如:任务是“报名一场双 11 大促活动”,我们可以创建这样一个场景:你关注的双 11 大促活动报名时间开始了,你想上商家后台去报名双 11 大促,请登录商家后台来完成大促活动报名。
  4. 明确任务的起点和终点。用户是否完成了任务的评估依据是:用户是否从起点(页面 A)到达了终点(页面 B)。因此要明确起点和终点的定义,哪个页面是起点?哪个是终点?比如:任务是“报名一场双 11 大促活动”,起点页面就是商家后台首页,终点页面就是提交报名素材成功的页面。另外在评估是否到达终点页面之外,还需要关注用户在任务过程中的操作动线、是否有效填答信息,若没有,我们需要搞清楚背后原因是什么。
  5. 任务不应过于简单。若想测试用户是否能够找到某功能,不要用类似“找到 XX 功能按钮”这类表述,我们应该给用户提供一个要处理的实际场景任务,比如不是“找到换品功能按钮”而是“报名完成后想要重新换品”。
  6. 避免提供线索和描述操作步骤。任务只需要给出具体目标即可,不需要给到测试用户具体的操作步骤,不然会容易错过用户在执行任务过程中到某一环节可能存在的“意外问题”,而这些“意外”恰恰是我们需要关注的。

STEP2:招募用户

在招募用户环节,最重要的是样本数量的确定。在实际的可用性测试中,我们常常被产品同学或设计同学问到:

“6 个用户提出的问题能代表全部么?”

“几个用户是不是太少了?他们提出的问题是可靠么?”

诸如此类的样本数量“挑战”,不胜枚举。人机交互博士 Jakob Nielsen 曾提出:“有 5 个人参加的用户测试,即可发现大多数(85%)的产品可用性问题。” Nielsen 这张经典图表(如下图)告诉我们答案:一般最严重的问题都是前几名用户发现的,随着用户数量增多,发现问题逐渐减少。

image.png

当然在实际执行中也会存在一些局限性,比如只能发现问题数量,但无法确定发现问题的严重程度,因此还是需要从实际情况比如测试任务的复杂程度、人力资源的投入程度等等来确定招募样本数量。

STEP3:前期准备

  1. 测试地点与工具准备。比如安静的会议室、电脑、录音笔、录屏软件(录制操作全程,便于后续回顾分析)等。
  2. 任务相关资料准备。如①数据收集表,如收集任务是否完成、完成时间、关键事件中遇到的体验问题、满意度;②访谈提纲,包含任务步骤、需要注意深挖的环节问题等。比如,任务是“报名一场双11大促活动”,访谈验证sop示例:

image.png

STEP4:试点测试

试点前测的目的是针对整个测试流程和提纲进行测试,便于前置发现流程和提纲中存在的问题,及时优化,避免造成真实测试用户的资源浪费。试点前测需要注意:

  1. 访谈提纲的话术表达和任务流程的设计,是否能够准确让用户理解?
  2. 提纲内容是否透露了操作步骤,用户是否很快完成任务?
  3. 时间安排是否合理,用户是否可以在规定时间内完成任务?
  4. 任务流程安排是否合理,用户是否感到疑惑?

STEP5:观察访谈

在观察测试中,需要检查用户任务目标和心理认知是否可以顺利执行下一步操作,以此来发现可用性问题,因此我们要对以下问题做到心中有数:

image.png

在事后访谈中,有以下几点小小访谈 tips:

  1. 认知习惯层面:首先了解用户对方案功能的基本理解,比如是否能够理解?理解的意思是什么?为什么会有这些理解等等,之前在这些环节中用户的操作习惯是什么样的?
  2. 需求关注层面:用户在这些环节关注哪些方面?然后再给用户解释每个功能方案的定位作用是什么,方案解决什么问题。同时追问用户,就目前方案是否解决实际中的问题,哪些问题?以及还有哪些优化的建议等等。尽管大多数人认为不该直接问用户产品的优化建议,用户给到的结论也只是基于自身经验的主观想法,但是若根据用户给到的答案继续深挖“为什么”,可能会知道用户真正想要达到的效果和预期是什么。
  3. 切记不要上来就一通讲解方案后就单纯问用户你觉得好不好,应该还要继续往下追问。因为这样通过对用户现有的行为习惯和需求关注的了解,才能够判断评估用户说的话是否逻辑自洽,才能够验证方案是否能够真正满足用户的需求,而不是伪需求。

STEP6:分析报告

一般情况下,可用性报告的内容主要包含以下三方面:

  1. 研究概述:测试目标、样本描述、研究方法等。
  2. 问题解读:问题描述、原因解读、严重程度及影响范围评估、数据结果等。
  3. 解决应对:建议的解决方案。

最后的话

好的产品设计应当满足以下特征:可用性、易用性、好用性且具有吸引力。每个特征都是为了能让产品站稳脚跟而存在的,倘若想要让产品功能最终具备这些特征属性,就离不开产品可用性测试的过程。

而且一个产品设计方案在没有经过用户验证的情况下,容易在实际上线使用后出现一些隐性风险。而前置的设计验证,在一定程度上可以辅助我们产品功能在上线前发现问题,改进设计。

以上,共勉~希望能对大家有所启发。

转载:优设

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

 

image.png

教科书级干货!6招兰亭妙微UI设计公司,带你玩转情感化设计

清阳 设计思维

过去十几年,数字产品设计的核心一直是能用、稳定、无障碍,但如今功能同质化严重,情感体验成为产品决胜关键
 
C 端用户追求 “用得开心”,加载动画、趣味细节都能提升好感;B 端用户需要 “用得舒服”,简洁界面、贴心反馈能缓解工作疲惫。
 
情感化设计不是单纯美化界面,而是用设计触发正向情绪,建立用户与产品的情感连接,最终提升满意度与忠诚度。兰亭妙微UI设计公司带您一起看。

image.png

一、什么是情感化设计

image.png

 
情感化设计是以激发用户积极情绪为核心的设计理念,超越基础功能与可用性,让用户在使用中产生愉悦、安心、被重视的感受。
 
它基于唐纳德・A・诺曼的三层情感模型,覆盖用户全体验链路:
 

1. 本能层(视觉感官)

image.png

第一眼视觉冲击,直接影响初始好感。
 
  • C 端:美团橙黄色传递温暖食欲感
  • B 端:Notion 低饱和色系降低信息压迫感
 

2. 行为层(操作交互)

 

image.png

操作流畅度与即时反馈,决定使用舒适度。
 
  • C 端:淘宝购物车动效、点击反馈
  • B 端:360 安全卫士查杀流畅动画
 

3. 反思层(品牌记忆)

image.png

 
使用后的长期感受,塑造品牌忠诚度。
 
  • C 端:网易云音乐年度听歌报告
  • B 端:Slack 年度团队感谢动画
 

 

二、UI 情感化设计发展三阶段

 
  1. 功能导向期:以技术为中心,仅满足基础使用,用户适配系统image.png
  2. 体验兴起期:关注可用性,界面更直观易用

    image.png

  3. 情感化阶段:以用户情感为核心,打造有温度的体验image.png

 

 

 

三、为什么要做情感化设计

 
人类决策由情绪驱动,大脑杏仁核、前额叶皮层等区域负责情感处理,多巴胺、血清素直接影响愉悦感。
 

image.png

情感化设计能:
 

 

  • 触发用户正向行为,降低心理防线
  • 建立品牌认同与身份归属感
  • 实现用户体验与产品价值的双赢
 

 

四、情感化设计三大核心要素

image.png

 

1. 视觉设计:用美学传递情绪

 
  • 色彩:蓝色 = 信任、红色 = 热情、黄色 = 活力,精准匹配情绪image.png
  • 排版布局:简洁对称 = 平静舒适,杂乱无章 = 焦虑烦躁image.png
  • 动画过渡:轻量动效缓解等待焦虑,提升操作愉悦感image.png
 

2. 交互设计:用细节传递关怀

 
  • 微交互:按钮反馈、悬停变化、加载动画,体现设计用心image.png
  • 个性化:基于用户行为定制推荐,让用户感到被理解image.png
 

3. 内容语言:用语气拉近距离

  • 语气适配:幽默亲切 or 专业严谨,匹配产品调性image.png
  • 正向引导:错误提示安抚、成功操作鼓励,减少用户挫败感image.png
 

 

五、情感化设计的价值(C 端 + B 端)

 

对 C 端产品:拉近距离,提升粘性

 

image.png

  • 降低使用门槛,拟人化设计减少操作挫败感
  • 强化用户认同,契合审美与情感偏好
  • 促进转化传播,激发分享欲与复购
 

对 B 端产品:提升效率,优化协作

 
  • 缓解工作压力,简化流程、清晰反馈减少焦虑image.png
  • 增强团队协作,正向激励提升参与感image.png
  • 降低落地阻力,人性化设计减少员工抵触image.png
 

 

六、6 招落地情感化设计(核心实操)

 
  1. 视觉轻量化:低饱和配色、留白设计,减少视觉疲劳
  2. 微交互精细化:操作必有反馈,加载、点击、错误状态全覆盖
  3. 文案人性化:拒绝生硬提示,用亲切、鼓励的语言沟通
  4. 场景适配化:C 端做节日皮肤、个性化内容;B 端做高效流程、简洁界面
  5. 反馈即时化:任务完成、流程卡点及时提示,给用户掌控感
  6. 迭代动态化:通过用户调研与数据反馈,持续优化情感体验

 

 

 

结尾总结

 
情感化设计不只是好看的插画、动效,而是覆盖视觉、交互、文案的全维度体验设计。
 
它把冰冷的功能,变成懂用户、有温度的产品,让 C 端用户爱上使用,让 B 端用户高效舒适。
 
做好情感化设计,需要产品、设计、研发多方协作,以用户为中心,持续迭代优化。
转载:优设

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

 

image.png

日历

链接

个人资料

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

存档