首页

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

涛涛

本文专为兰亭秒微设计团队打造,聚焦设计创意从 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

B 端表单设计(上)优化版|清晰、好读、可直接落地

清阳

在B端产品设计中,表单作为核心数据录入与交互载体,其设计的合理性直接影响产品效率与用户体验,兰亭妙微ui设计公司在长期服务B端客户的过程中发现,许多产品因表单设计不规范、逻辑混乱,导致用户填写效率低、错误率高,甚至放弃操作。基于此,结合兰亭妙微ui设计团队的实战经验,我们保留核心干货,修正设计误区,梳理清晰逻辑,打造一份可直接落地、适合设计师快速查阅的B端表单设计指南,助力更多产品打造高效、易用的表单体验。
 

一、开篇:B端表单到底是什么?

表单是B端产品核心数据录入载体,本质是把线下纸质单据搬到线上,适配电脑/移动端操作习惯。核心目标:降低填写成本、减少错误、提升效率、提高完成率。

image.png

二、表单三大设计原则

  1. 表意明确:用对组件:日期用DatePicker、数字用InputNumber,不混用、不误导。
  2. 简洁高效:信息获取快、录入操作快;视觉清爽,不堆砌。
  3. 安全容错:操作前:清晰提示输入规则;操作中:实时校验、自动纠错;操作后:草稿保存、二次确认防误操作。

三、表单基础构成(必掌握)

基础表单 = 标签 + 表单域 + 提示信息 + 操作按钮;高阶表单 = 基础 + 校验提示/帮助提示/占位符/动态增减。

image.png

1. 标签布局(4种,效率排序)

效率:顶对齐 > 右对齐 > 左对齐 > 内部标签
  • 顶对齐标签:速度最快(50ms定位)、浏览填写双快、省横向、占纵向。✅ 适用:追求快速填写、标签长短不一、延展性要求高。

    image.png

  • 右对齐标签:填写快、省纵向、阅读稍慢。✅ 适用:要屏效+要速度,标签长度差异小。image.png
  • 左对齐标签:阅读稳、填写慢、省纵向。✅ 适用:复杂/敏感信息、需要用户仔细核对(如注册)。

    image.png

  • 内部标签:省空间、输入后消失易遗忘。✅ 适用:移动端极简表单(≤2项),不建议PC端大量使用。

     

2. 必填/选填标记规则(统一最关键)

image.png

  • 全必填:可统一不标,保持全局一致即可
  • 必+选混合:只标必填* 或 只标选填,二选一并贯穿全站
  • 星号位置:建议放标签左侧,一眼扫完必填项

3. 表单域(输入核心)

image.png

包含:输入框、选择器、时间选择器、数值选择器、上传。
设计要点:
  • 宽度与输入内容匹配:长度暗示输入量(建议用80/120/160/240/400这5档)
  • 提供合理默认值:减少选择负担,提升填写速度
  • 提示文案:有用、具体,不写“正确但无用”的话

4. 操作按钮

image.png

  • 弹窗表单:按钮底部居右(确认在最右)
  • 页面长表单:按钮居中(减少操作距离)
  • 阅读顺序:右上角/右下角 → 从右往左;表单内 → 从左往右

四、表单4种布局类型

  1. 基础表单:表单项≤7个、结构简单,直接单列/双列排布。

    image.png

  2. 锚点定位表单:内容极多、纵向超长、各组强关联,用锚点快速跳转。

    image.png

  3. 标签页(Tab)表单:内容多、各组无强关联,用Tab分组隔离。

    image.png

  4. 分步(Steps)表单:有先后逻辑顺序,给用户进度预期。

    image.png

五、表单5种交互形式(按内容量排序)

内容由少到多:气泡卡片 → 原位编辑 → 弹窗 → 抽屉 → 页面跳转
  1. 气泡卡片 Popover:轻描述、轻操作,不打断流程。

    image.png

  2. 原位编辑:展示即编辑,回车保存,极简录入。

    image.png

  3. 弹窗 Modal:不离开当前页,承载简单表单。

    image.png

  4. 抽屉 Drawer:侧边滑入,可多层,适合中量内容。

    image.png

  5. 页面跳转:最通用,适合复杂、长表单,必打断当前流程。image.png

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

     

    image.png

兰亭妙微:UI 设计中的色彩运用法则与实战实践

涛涛

色彩是 UI 设计的灵魂,它并非单纯的视觉装饰,而是传递品牌情绪、引导用户行为、强化设计质感的核心语言。兰亭妙微深耕 UI/UE 设计领域十六载,始终将色彩运用作为设计体系的核心环节,在工业制造、医疗健康、财税金融、航天军工等垂直领域,将色彩理论、色彩心理学与行业场景深度融合,形成了一套 “理论落地 + 行业适配 + 用户感知” 的色彩运用方法论。从色彩比例的精准把控到色彩情绪的精准传递,从自然灵感的汲取到实用工具的高效运用,兰亭妙微让每一种色彩的选择都有逻辑、有温度、有价值,让色彩成为连接品牌与用户的无声桥梁。

如何做好B端产品的竞品分析?

清阳

竞品分析作为日常工作中常用的基础能力,在 C 端和 B 端两种截然不同的产品形态下需要面对的难点也是不尽相同的。那么作为面向企业、公司的 B 端产品,在做竞品分析时的流程以及侧重方向上都有哪些特点呢?兰亭妙微UI设计公司将从产品差异等几个方向为大家分享一下自己的思考和总结,以期能够提供参考和建议。

“竞品分析”我们从字面上理解,就是对现有的以及潜在的竞争产品的优劣进行分析和总结。用以了解市场行情及自身产品的定位,发现新的市场机会,探索产品迭代的有效策略。在正式介绍 B 端竞品分析的经验和思路之前,想先简单介绍一下 C 端产品和 B 端产品的差异点,也能更好的理解 B 端产品的特性。

一、先搞懂:B 端 vs C 端 核心差异

image.png
B 端产品面向企业 / 组织,强调效率、流程、合规;C 端面向个人用户,强调体验、流量、转化。两者做竞品分析的思路完全不同。
 
表格
 
 
 
对比维度 B 端产品 C 端产品
用户 企业客户、组织角色(管理者 / 员工) 海量个人用户
场景 办公场景、工作流程、时间固定 生活场景、碎片化、强私人属性
设计 重流程、效率、稳定性 重体验、细节、拉新留存
竞品 公开度低、同质化低、难体验 公开易找、同质化高、易体验
盈利 定制化报价、按年 / 模块收费 明码标价、会员 / 广告 / 电商
 
B 端竞品分析两大难点
 
  1. 竞品难找、信息不透明
  2. 产品难试用、核心功能不开放
 

 

二、第一步:明确分析目的 + 搭建分析框架

image.png

做竞品分析前,先定目标,避免盲目对比。
 

1. 分析目的(二选一为主)

 
  • 战略层:对比市场定位、定价、客户群、产品矩阵、服务模式
  • 功能层:找产品优缺点、看流程合理性、辅助迭代规划
 

2. 必收集的背景信息

image.png

  • 公司背景:成立时间、规模、行业案例
  • 技术背景:核心技术、迭代节奏、生态合作
  • 客户与场景:目标行业、使用角色、核心痛点
 

 

三、第二步:B 端竞品怎么找、怎么筛?

 

1. 四类必选竞品

image.png

  1. 初代产品:看行业起源,理解原始需求
  2. 直接竞品:核心对标,全面拆解
  3. 间接竞品:局部功能可借鉴的产品
  4. 头部竞品:行业标杆,看成熟方案
 

2. 小众领域:先发散→再收敛

 
  • 发散:提炼核心关键词(如体验管理→CEM、体验监测、客户洞察、数据采集)
  • 收敛:用官网信息筛选,剔除定位不符的 “伪竞品”
 

3. 信息渠道

 
  • 行业报告、行业峰会 / 论坛
  • 搜索引擎、垂直媒体
  • 厂商官网、客户案例、销售资料
 

 

四、第三步:B 端产品难体验?这 4 种方法最实用

 
B 端多为半公开 / 非公开系统,不能直接注册试用,用以下方式突破:
 

1. 半公开产品(可对外售卖)

image.png

  • 看官网:快速了解定位、功能、客户、案例
  • 申请试用 / 付费:最真实体验流程与交互
  • 角色扮演咨询:假装客户问销售,获取报价、交付、实施细节
 

2. 非公开产品(内部系统 / 定制系统)

image.png

  • 人脉借账号:亲自操作体验
  • 操作录屏 / 影子计划:录屏回放完整流程
  • 用户访谈:访谈使用者 / 客服,了解真实痛点
  • 流程记录:梳理操作路径,还原体验地图
 

 

五、第四步:分析总结 + 输出可落地结论

image.png

  1. 按框架对齐信息:功能、流程、体验、定价、客户、服务逐项对比
  2. 提炼优劣势:哪些可直接借鉴、哪些要避开
  3. 结合自身落地:不照搬竞品,匹配公司资源、产品定位、团队能力
  4. 长期跟踪:B 端迭代慢,需持续关注竞品更新

image.png


 

六、极简工作流程(直接照做)

定目标 → 2. 搭框架 → 3. 找竞品 → 4. 巧体验 → 5. 对比分析 → 6. 输出结论与迭代建议

转载:优设

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

 

image.png

 

日历

链接

个人资料

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

存档