首页

B端数据可视化设计,14个章节带你掌握表单设计(下)

清阳 设计思维

表单是 B 端产品核心信息载体,优秀的表单设计能直接提升填写效率、降低错误率、减少业务成本,是 B 端体验与数据流转的关键环节。兰亭妙微ui设计公司在上篇基础上,用 14 个可落地章节,帮你掌握高易用性表单设计。

一、先明确:好表单的 5 个核心价值

 
  1. 提升体验:降低填写困惑,让操作更轻松顺畅
  2. 降低错率:清晰指引 + 实时校验,保障数据准确
  3. 提高效率:简化操作、减少重复输入,节省时间
  4. 提升完成率:降低填写门槛,减少用户中途放弃
  5. 降本增效:减少数据纠错与沟通成本,赋能业务
 

 

二、14 个表单设计核心方法(可直接落地)

 

1. 信息降噪:只留关键,简化内容

image.png

  • 极简处理:必填项占绝大多数时,隐藏选填提示符,减少视觉干扰
  • 折叠非必填:用「展示更多」收起次要字段,只保留核心必填项
  • 选填项保留意义:给愿意补充信息的用户选择权,降低填写压力,灵活收集额外数据
 

2. 标签与指引:清晰易懂,不产生歧义

image.png

  • 标签简短直白,不使用专业黑话
  • 填写规则前置提示,比如格式、长度、范围
  • 复杂字段加小问号提示,hover 显示说明,不占主视觉
 

3. 长表单:分步 / 分页,缓解填写压力

image.png

适合注册、认证、发布等流程型长表单:
 
  • 分步填写:按业务逻辑拆步骤,配清晰步骤导航
  • 分页填写:左侧固定导航,用户可快速跳转模块
  • 小缺陷:用户无法一次性看到全部字段,需做好进度提示
 

4. 动态验证:实时反馈,即时纠错

image.png

  • 输入失焦后立即校验,不等到提交才报错
  • 错误提示就近展示,明确错误原因 + 修改建议
  • 避免提交后批量修改,大幅降低用户挫败感
 

5. 默认值 + 自动填充:减少手动输入

image.png

  • 高频选项设默认值,比如常用城市、状态
  • 复用历史数据,自动填入重复信息
  • 关联字段自动联动,比如地址→邮编、身份证→生日
 

6. 智能辅助:让表单 “会思考”

image.png

  1. 上下文自动填充:手机号→姓名、身份证→生日 / 性别
  2. 条件逻辑显隐:选 “是” 展开对应字段,选 “否” 直接隐藏
  3. OCR 智能识别:身份证、发票、营业执照上传后自动提取信息填入
 

7. 响应式适配:多端一致,不崩不乱

image.png

B 端表单必做适配,避免前端自由适配导致体验差:
 
  • 固定适配:字段宽度固定,兼容客户最低屏幕分辨率
  • 间距适配:左右边距固定,组件自适应宽度(适合弹窗 / 抽屉,不建议长表单)
  • 移动端:单独设计,用系统原生输入组件,不直接套用 PC 端
 

8. 字段简洁:用最少文字讲清含义

image.png

  • 标签短、准、无歧义,不堆砌长文案
  • 合并冗余字段,不拆分语义完整的信息
 

9. 长数字不拆分:一个输入框搞定

image.png

手机号、身份证、银行卡、订单号等禁止拆成多框
 
  • 减少点击切换,支持一键复制粘贴
  • 避免分段输入带来的操作繁琐与误操作
 

10. 防错纠错:从源头减少错误

image.png

  • 格式限制:数字框仅输数字,限制长度(手机号 11 位、身份证 18 位)
  • 专用输入:车牌号用专属键盘,屏蔽 I/O 等易混淆字符
  • 范围置灰:时间选择器禁用无效日期,堵死错误操作路径
 

11. 就地编辑:在哪看就在哪改image.png

 
遵循交互之父阿兰・库珀原则:需要在哪里输出,就在哪里输入
 
  • 列表少量编辑:直接在行内修改,不跳转、不弹窗
  • 保持注意力连贯,提升操作效率
 

12. 三重保存:杜绝数据丢失

 

表单保存是 B 端底线,分三类实现:

image.png

  1. 延迟草稿:间隙 / 定时自动保存,无打扰后台运行
  2. 随机草稿:高频自动保存,保留历史版本,支持回退
  3. 条件草稿:触发式保存,异常关闭可恢复
  4. 提示保存:未保存跳转 / 离开时,弹窗确认,防止误操作
 

13. 所见即所得:实时预览最终效果

image.png

  • 表单编辑区 + 预览区联动,即时看到展示效果
  • CMS、物料配置、富文本等场景必加预览
  • 支持多端(PC / 移动端 / 小程序)效果切换查看
 

14. 重视用户反馈:让业务专家帮你优化

image.png

  • B 端用户是一线业务专家,最懂真实痛点
  • 做用户测试、收集操作反馈,持续迭代
  • 案例:贷款审核从 “逐个审” 优化为 “批量审”,效率大幅提升
 

 

三、总结

 
表单是 B 端数据流转核心枢纽,14 个设计要点围绕简洁、清晰、高效、防错、容错展开,从视觉降噪到智能辅助,从实时校验到多重保存,完整构建以用户为中心的表单体系。掌握这套方法,你的表单设计将从 “能用” 升级为 “好用”,真正为业务提效赋能。

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

 

image.png

为什么很多大厂主按钮不用主题色?原来还有这5个设计方法!

清阳 交互设计及用户体验

我发现很多人设计主按钮,只会用主题色。而兰亭妙微 ui 设计公司在服务大量企业级产品过程中发现,很多大厂设计的主按钮,并不统一用主题色。

注意,这里讲的不是作为陪衬的次按钮,而是一个页面上最显眼的主按钮 CTA (Call to Action) 按钮。

 

image.png

一、背景对比色:极致醒目,适配多色背景

image.png

核心逻辑:采用与背景色强对比的黑白基础色,让按钮在色彩丰富的界面中脱颖而出,解决主题色因画面元素干扰而辨识度不足的问题。

image.png

大厂案例:闲鱼主题色为黄色,搜索按钮选用黑色;YouTube 极少使用红色主题色,主按钮以黑色为主,而在黑底广告卡片上则切换为白色;Spotify 绿色主题色之外,大量主按钮采用白色。这类设计的共性是黑白与背景形成反向对比,白色背景配黑按钮,黑色背景配白按钮。

image.png

image.png

image.png

实测验证:美国电商平台 Etsy 曾对商品详情页 “加入购物车” 按钮做黄 / 黑配色 A/B 测试,最终选择黑色方案,数据证明其视觉吸引与点击转化效果更优。
 

image.png

image.png

适用场景:页面包含大量图片、视频、彩色元素,需要主按钮快速抓住用户注意力的场景,如首页搜索、内容播放页核心操作、电商商品页转化按钮。
 

二、背景相似色:低调适配,避免过度抢眼

image.png

核心逻辑:使用半透明色、浅灰色等与背景色调相近的色彩,让按钮融入界面的同时保持可识别性,适用于 “需作为主按钮,但无需过度醒目” 的交互需求。
 
大厂案例:酷狗短视频广告的 “看全集” 按钮为半透明样式;喜马拉雅播放页按钮均采用半透明设计;闲鱼帮助与客服页底部主按钮用浅灰色;金融 App Revolut 的按钮也以半透明为主。

image.png

image.png

image.png

 

设计考量:这类场景的背景往往色彩鲜艳(如视频、彩色广告图),叠加主题色易显杂乱,而强对比色又会过度吸引注意力,甚至干扰用户核心操作。例如未成年模式的 “不再提醒” 按钮,若设计得过于醒目,可能导致有实际需求的用户误触。
 

image.png

适用场景:背景色彩多变的视频 / 广告界面、辅助性核心操作、需避免用户误触的功能按钮。
 

三、环境色:随境变色,实现视觉和谐

image.png

image.png

image.png

核心逻辑:让主按钮色彩跟随界面环境(如广告 banner、内容卡片)动态变化,贴合环境色调的同时保证识别性,让整体视觉更协调。
 
大厂案例:美图秀秀首页主按钮会随广告 banner 的色彩同步调整;YouTube 部分广告卡片的按钮,色彩会根据卡片内容进行适配。
 
设计要点:该方法对技术实现有一定要求,需保证按钮色彩与环境的适配性 —— 既不能与环境色融合导致识别困难,也不能对比过强破坏整体美感,核心是 “和谐中突出交互”。
 
适用场景:首页广告 banner 旁的核心操作按钮、个性化内容卡片的交互按钮、注重视觉美感的创意类 App 界面。
 

四、模块色:色彩定类,助力快速识别

image.png

image.png

image.png

核心逻辑:根据产品功能模块的固定属性赋予专属色彩,让用户通过色彩快速关联按钮功能,形成视觉记忆,替代主题色的单一标识作用。
 
大厂案例

image.png

  1. 行业通用模块色:国内 App 的会员模块普遍使用金色,即便品牌主题色不同,酷狗(蓝色)、微信读书(蓝色)、携程(蓝色)的会员相关按钮均为金色;营销 / 优惠券模块多采用橙红色,闲鱼(黄色)、QQ 音乐(绿色)、饿了么(蓝色)的优惠券按钮均沿用这一配色。image.png
  2. 产品专属模块色:猎聘 App 用橙色代表求职者模块、蓝色代表招聘方模块,通过色彩划分不同身份的功能入口。
     
    设计价值:对老用户而言,无需看清按钮文字,仅通过色彩就能快速判断功能,大幅提升交互效率;对新用户而言,固定的模块色彩能快速建立功能认知。
     
    适用场景:产品有明确功能模块划分的场景,如会员体系、营销活动、身份选择、功能分类等。
 

五、状态色:色彩表意,规避操作误触

image.png

image.png

核心逻辑:利用用户的色彩认知习惯,将按钮与操作状态绑定,用色彩传递 “可操作 / 不可操作”“正向 / 负向” 的信息,通过色彩提示规避误触。
 
大厂案例

image.png

  1. 基础操作状态:所有手机的来电显示界面,均用绿色代表 “接听(正向操作)”、红色代表 “拒绝(负向操作)”,贴合大众的色彩认知习惯。
  2. 电商操作状态:淘宝直播间商品列表,橙色按钮代表 “可立即抢购”,蓝色按钮代表 “不可抢购可预约”,用色彩明确区分商品操作状态。
  3. 风险操作提示:删除、取消等负面 / 风险操作的按钮多采用红色,通过醒目的色彩提示用户谨慎操作。
     
    设计原则:遵循用户的普遍色彩认知,不随意颠覆固有习惯(如避免用绿色代表删除、红色代表确认),让色彩成为操作状态的 “视觉提示牌”。
     
    适用场景:有明确操作状态区分的场景、包含风险 / 负面操作的界面、需要用户快速判断操作可行性的交互入口。
 

主按钮放弃主题色的核心原因与适用场景总结

 

核心设计逻辑

 
大厂主按钮不用主题色,本质是从 “品牌视觉统一” 转向 “交互体验优先”,当主题色无法适配界面场景、满足交互需求时,选择更贴合实际的色彩方案,具体原因可归纳为 5 点:
 
  1. 界面色彩过于丰富,主题色的醒目度不足;
  2. 环境色彩多变,主题色难以与整体视觉和谐;
  3. 主按钮为辅助性操作,无需过度抢眼;
  4. 需通过色彩划分模块,帮助用户快速理解功能;
  5. 需通过色彩传递操作状态,避免用户误触。
 

通用设计建议

 
当遇到以下 3 种情况时,可直接放弃主题色设计主按钮:
 
  1. 按钮周围的色彩鲜艳、元素丰富,主题色易被淹没;
  2. 产品有明确的功能模块划分,需要色彩建立视觉记忆;
  3. 按钮为辅助性核心操作,或包含风险操作,无需 / 不宜过度醒目。
 
主按钮的色彩设计,最终的核心不是 “是否使用主题色”,而是 “色彩是否服务于交互”。品牌主题色可作为视觉基础,但在实际设计中,需结合界面场景、用户需求、操作逻辑灵活调整,让色彩既贴合产品视觉体系,又能真正引导用户高效交互。

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

 

image.png

长文干货!如何从零开始构建「用户行为分析」?

清阳 用户研究

一、用户行为分析:如何开始搭建

体验或交互设计师知晓用户行为分析有什么用?

答:我们所处的行业下,各类产品变得成熟精细,大家开始拼细节卷服务,市场竞争激烈。对于产品的各种优化改版也就开始变得谨慎,往往需要经过用户研究或是数据分析等工作来验证或决策,不再是由设计师或产品经理凭借过往经验办事或对标竞品照抄了,恰好用户行为分析就是用户洞察中具有代表性的一项;

体验或交互设计师为什么要掌握这些呢?

答:回归到用户体验相关设计,本身就是一项细致活儿,处处需要用户研究或数据洞察来辅助设计工作,了解其相关甚至熟悉搭建分析,从职能发展趋势来看,可能是迟早的事;

所以即使你目前用不上用户行为分析相关,也不要急着关掉文章,先简单了解一下吧,说不定你会有兴趣呢,说不定不久后刚好用上呢?

 

 

二、用户行为分析能干啥

用户行为分析是数据分析的一个重要领域,特别是在数字化服务行业中,主要目的是通过深入研究用户群体的流量动向以及操作行为特征等,来了解用户与产品间的关系、效果、趋势,以帮助我们优化产品设计、提升用户体验并驱动业务决策。

说人话就是:

监测用户在产品上做出了哪些行为、是否符合预期、有什么特征、问题在哪里,然后看看产品上需要做些什么调整或迎合用户的特征偏好来决策啥的。

三、用户行为分析有啥优势

具备一定的客观性与真实性

被动采集的行为数据有时候比用户口述反馈的信息要更真实有效,一方面更加直接,另一方面也少了些用户心理设防(霍桑效应);

image.png

具备一定的代表性与准确性

由于是群体性的大数据,所以更有代表性,并且是即时的数据记录,不容易记混记错,准确性也更好;

image.png

具备可持续性与可追溯性

通过数字化技术实现,可以伴随产品发展持续的采集数据,可以较为方便的调取过往数据进行比对追溯分析;

image.png

具备一定的 AI 不可代替性

用户行为的背后依旧是人文心理等方面的内容分析或业务场景化决策,往往离不开人工的加持介入;

image.png

四、实施构建的流程

以下是对用户行为分析的工作流图解,由于不同企业的诉求有差异,以下工作流仅代表大部分用作交流;

image.png

五、关键节点拆解说明

此次主要聊聊基础的上手运用与注意事项,不涉及过深或难以理解的部分,如果说用户行为分析可以到达高等数学的程度,那么此次就讲讲加减乘除好了,师父领进门,修行靠个人,各位看客请上座!

image.png

1. 目标需求拆解

① 什么时候开始?

首先你的产品得有流量,然后得有一个关乎到用户行为的目标,例如想看看用户流量分布、了解功能使用频率、任务执行的漏斗关系、用户行为偏好、用户数据画像构建等,这个时候就可以考虑开始了,不然就可能南辕北辙费力不讨好。

image.png

② 界定一个范围?

首先构建一套完善的用户行为分析系统并持续的维护与应用并不是一个轻松的事情,所以最好是针对性构建+多迭代,不要上来就想着做全盘搭建,表面的工作或问题往往可能只是浮冰,逐步的深入后问题会越来越多,个人深有体会!

image.png

③ 由上而下,找准路线?

通过业务目标向下拆解,一般上层目标无非是商业转化、用户活跃留存、任务通过率这些,向下拆解则是通过业务目标去锁定核心的业务场景或任务线路,这些核心的页面、场景或是任务线路,就是你前期可以界定的一个范围,后续的重点工作则是将核心功能的入口或路径穷举出来,避免数据对不上或找不到异常源头的情况。

在我的认知里,用户行为分析建设不是一锤子买卖,步伐走小一点,基础搭好一些,以后的迭代建设或维护也会轻松许多;

概括一下就是,不要追求全面,靠拢业务价值,关联上指标或者核心业务场景即可。

之前网上看到有大佬给了一个建设思路,这里搬来大家参考一下;

image.png

2. 带你认识不一样的埋点

数据埋点技术已经很成熟了,甚至有很多第三方的埋点+分析的服务,以及采集用户行为数据的不仅仅只有埋点技术方案,哪怕你做一个录屏技术都可以,只不过从数字化产品视角出发,埋点技术更有性价比,以及符合用户隐私权益,所以这里专门讲一下“埋点”这个老技术,熟悉的大佬们可以跳过埋点这部分。

① 埋点是什么

数字化应用大多有个特征,就是需要用户进行界面交互,有交互就有行为动作发生,而数据埋点就是将用户在界面交互时产生的各种类型的监控日志上报到产品后台去,这样业务团队就可以知道到用户在不同页面或业务场景下操作了什么,去往过哪些页面,当结合业务后台的订单等数据时,就可以还原出更加清晰的用户行为全貌。

通常这些埋点会分为“页面访问(PV、UV)、区块曝光(区域、时长)、按钮操作(动作、状态)”三大类型,并携带交互元素和操作者的各类特征信息参数,便于我们知晓更多的场景细节与用户情况,例如知晓这个「免费试用」按钮是对应了那个产品?点击的用户是否已开通这个产品?这个用户是否为付费用户?是否个人还是商家类型?用户从哪个渠道进来的等,而且这些植入在产品代码中的埋点可以不间断持续的采集和配套产品迭代进行维护,可以帮助业务团队获取大量有效数据用作业务分析决策。

image.png

② 什么时候派上用场

这些数据埋点主要是为业务目标的洞察分析服务,也就是说业务目标中需要采集用户行为数据时,埋点就要派上用场了,相比传统的业务日志,埋点可以收集到更加全面的界面交互的行为数据,能够简易的还原出一套线上用户的使用情景,而不仅限于一些业务后台就能统计出的转化率或基础数据等;

image.png

并且埋点数据可以与业务数据分开存储运维,这意味着埋点数据可以更迅速的根据设定的指标公式统计出期望的数据或视图,并且不会干扰业务访问的性能质量,因此产品迭代后的新老数据对比、营销活动的效果评估、用户行为的特征偏好识别等,数据埋点都以可以派上用场的。

③ 怎么提埋点需求?

首先埋点需求没有固定的文档格式,其次不同埋点服务平台的要求也有差异,就移动端来讲,很多服务商已经支持可视化埋点、全埋点、无埋点服务,可以实现自动识别交互元素并进行埋点操作,大大减少了开发工作量,那么再聊回埋点需求怎么提。

核心结论就是由上而下,通过业务目标或核心指标进行拆解,然后关联到核心的任务流程上,对于一个页面或一套流程没有必要进行全篇埋点,技巧我概括为以下几点;

image.png

埋点需求的主要内容基本包含以下,根据业务或埋点平台的差异,可以自行调整;

image.png

④ 业务扩参怎么一回事儿

扩参即扩展参数,指在当前用户界面中可以请求到的业务数据,并将这些业务数据绑定到埋点日志中一并上报给埋点数据后台,通常为一些用户属性参数、业务属性参数、设备属性参数、网络环境参数,这样我们就可以通过这些额外的参数进行数据分析或是过滤,举个典型案例;

image.png

3. 数据治理是做什么

① 为什么要治理?

简单说就是提升数据质量与准确性,在庞大的一套数据中,我们需要弄清楚数据之间的映射关系,即不同的数据参数代表了什么元素什么动作什么含义,数据是否有缺漏或冗余、报错漏报乱报、是否有无效的脏数据(例如内部的测试数据或脚本爬虫等带来的数据),如果我们不去将这些数据进行治理,则统计出的数据指标特征或趋势都将不可靠,无法被商业应用。

简单讲就是元数据没治理准确,得到的数据指标也就失去了实用价值。

image.png

② 怎么去治理?

本质是查缺补漏将无效的数据过滤掉或纠错,再把数据涵义映射成具体的指标或描述,用作进一步的指标计算与分析,如果数据又多又杂,你会发觉这一步要你老命,例如埋点就需要逐个查询原始埋点的位置、触发条件、埋点用途、埋点含义甚至与关联业务数据的关系校对等。

不过还好,一般来讲这些工作都是数据建模(BI)相关人员去负责的,作为应用层的我们,更多的是能够根据业务目标提出埋点需求、提出指标与数据报表需求,以及通过数据核算或查看数据趋势等手段找出异常让 BI 修复,所以这里就不展开埋点数据治理的方法了。

③ 数据维护不易

就埋点监控用户行为的方式来讲,除了平时的治理与报表问题修复,每次迭代改版还要做好相关埋点信息的管理与维护更新,保证不出错,不影响关联指标,甚至是线上用户偏好的推荐算法等应用,特别是数据规模越来越大后,又密切关联着业务决策时,数据更不容出错,且要求准确。

六、三大分析内容产出

1. 内容产出的先后

在用户行为分析内容构建的过程中,除非是有特定场景特定诉求,通常个人认为都是先出指标、再完善行为链路、再逐步丰满用户画像的一个过程,原因如下;

  1. 通常先接到的都是一些核心指标,例如转化率、留存率、活跃度等,同时这些指标也是上层最先关注到的;
  2. 接着就是完善不同场景或任务路径相关,帮助洞察微观视角下的体验障碍或用户偏好等,产出流量统计、流程漏斗等,起到业务体验的洞察改善决策作用;
  3. 用户画像的数据本身就没那么好收集,并且是一个逐步完善和被业务决策应用的过程,所以一开始不会直接奔着用户画像构建开始;

2. 基础指标构建

所谓指标可以理解成是产品某项业务的成绩,例如我是卖包子的,那么我的指标大概率就是每天卖出去多少包子、利润有多少、哪款包子销量高,根据这些信息我就可以知道我平时应该准备多少包子、哪些品类的包子需要多做一些、我靠卖包子能赚多少钱。

image.png

① 指标构建的原理

实际上指标的构建逻辑可以很简单,例如 A 占 B 的百分比、ABC 的总和、连续多天 A 占 B 的变化等,很多加减乘除的算法就能搞定,主要是能拿到真实数据,不然我怀疑你在做烂账......

常见指标:

image.png

3. 行为链路分析

用户行为路径是一种数字化的旅行地图,相比较传统服务的旅行地图,场景会更纯粹、意图更准确、数据采集更便捷,主要作用有以下几点;

  1. 分析用户在产品中的活动范围或页面路径的关系,可以帮助了解用户活跃分布,流量走向等情况;
  2. 识别在任务或流程漏斗中的卡点或跳失情况,帮助优化流程体验或提升转化率等指标;
  3. 通过用户的互动方式或路径特征来进行用户分类或偏好分析预测等,用于内容推荐算法或精准营销;

这些行为我们可以大致分为浏览、消费、互动三大类,根据不同的业务类型,可以选择性采集和分析相关数据,例如电商产品就比较关注用户的浏览与消费行为,常见的有商品浏览、添加购物车到下单;

而社交应用就更关注用户的互动行为,如不同类型的内容访问、评论点赞、关注收藏分享等;

这些数据最终可能由可视化的数据报表呈现出来,以便于业务团队快捷的找到数据问题或特征,如常见的漏斗图、桑基图、雷达图、树状图、散点图、决策树等;

image.png

小话题延展

最近在 UXRen 的一场分享会中,听罗浩讲了体验营销的话题,虽然是关于用户研究在职能岗位上挖掘新的商业能力的内容,但是其中有一段是关于如何在旅行地图中挖掘新的营销触点,有一些体会,这里结合用户行为链路分析简单聊一下;

背景与问题:

产品功能与业务增多,引流渠道多样化,不同渠道流量的撬动关键是什么,核心场景具备哪些能力,哪些渠道的流量能吃掉,这些流量所处的触点或场景能支持什么,用户意图是什么,产品能力能满足什么,产品发展可以支持哪些?如何分流或匹配各类流量的意图,并提供路径分发,这些用户流量数据有何趋势或特征,是否能与场景或触点进行根因分析,是否沉淀行为或偏好模型?

行为路径的重点:

在于观察不同触点下的客户意图,展开业务所能触及的部分或新的机会,并匹配合适的关键路径,以提升转化或用户粘性等,然后做数据回归分析,抓取有效的用户特征信息,并应用到产品的内容推荐或外部引流投放信息优化上。

流程过程:

触点展开与机会洞察,触点场景——意图识别——结果匹配(关键路径)——(根因回归)画像更新——算法推荐——广告优化

image.png

这一套下来,是不是感觉有点儿似成相识?后来一想这不就是一套用户增长的设计思路嘛。

4. 用户数据画像

主要是帮助了解和理解用户,使得我们可以划分用户群体和识别偏好特征,最终以提供精准营销或是洞察用户诉求来迭代改善产品。

其中偏好特征我们还可以根据业务属性细分为兴趣偏好、行为偏好、消费偏好等,并为不同偏好特征的群体提供个性化的内容服务,例如常见的内容标签标记,通过识别用户常看内容的标签,来推荐类似的标签的内容或是有潜在兴趣的标签内容来抓住用户的兴趣。

image.png

常见画像指标构建

这些指标会通过用户行为、设备信息、个人资料的完善来逐步获取,主要可以了解到用户的地域分布、年龄与性别分布、设备与活跃度情况,相应的数据在业务后台基本上都能够获取到,只需要将某个时间分区的数据拉出来,经过 Excel 之类的软件把数据加工一下,就能够获取到相关数据视图。

如果将多个数据指标结合起来分析,便可以获取一些复合型数据指标,例如哪些年龄段的用户群体消费能力更强、活跃度更高、不同教育背景的兴趣爱好是否有一定的关联性等等;

image.png

进阶画像指标构建

进阶的数据画像会完善更多的用户特征信息,便于业务团队找到用户群体的特征,做进一步的精细化运营或内容推荐,常见的画像指标如下;

image.png

此外就是在收集用户数据的过程中,保证用户隐私安全、合法性和安全性。

用户分层模型应用

当我们采集到一定的用户数据后,就可以在数据画像的构建阶段进一步完成用户分层工作,这一步是为了将用户分类,因为不同用户群的目的是有差异的,例如闲逛、精准采购、参与活动的等等,以提供差异化的服务做精准营销、识别用户群体特征做业务策略决策、或是优化产品体验相关,不过当你的用户规模尚小,运营模式简单,你也不用迫切去进行用户分层相关,因为收益不大。

那么通常都有哪些用户分层模型呢?其实你并不陌生,一些给你列举了一些;

image.png

七、分析结论到应用

相信你也发现了,用户行为分析的构建与产出并不只是行为链路的数据,同时会包揽很多其他的有价值的指标与数据,所以不要被用户行为四个字迷惑,或许你此刻正需要构建相关数据。

当你准备构建或整理用户行为分析前,记得目标或问题先行,针对性采集数据或建设指标,在你有了相对准确或清晰易懂的数据后,那些数据报表或图表根本难不倒你,说白了无非是将纯纯的一堆数据换了形式展示,如果你数据可视化的形式与应用不够了解,你可以看看 AntV 官网的介绍说明了解一下,其实你也不用每个都研究个遍,实用的就那么几个,酷炫是要代价的,报表搭建平台支不支持、Excel 支不支持、时间精力够不够研发给你整,都是问题~

AntV 官网 :https://ant-design-charts.antgroup.com/examples

最后

你可能疑问没有完整的教程手把手教你啊,其实不然,构建的前提、流程、要点、建设方向均在此篇中交代过,当你按照这套流程框架去做,基本上不会有啥大问题,一般来讲这些内容也够用,至于选用哪些数据埋点平台、数据分析平台、报表搭建平台、视自家公司情况而定吧。

也不要担心在数据报表搭建或分析的过程中,你搞不定,是不是你执行先不说,多问问百度或平台客服总能解决,如果就是觉得很难上手,那么大概率是工具你不熟,或者工具不好用

转载:优设

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

 

image.png

UI 设计细节进阶 —— 兰亭妙微设计的 24 个实用质感提升技巧

涛涛 设计管理与成长

兰亭妙微设计深耕 UI/UX 设计领域十余年,始终认为优秀的设计藏于细节。很多时候界面设计完成后总觉质感不足、差些火候,并非整体布局出了问题,而是忽略了那些能提升视觉体验的细微设计点。资深设计师与初级设计师的差距,也正体现在对这些细节的把控与打磨上。

UI 设计中的构图与排版 —— 兰亭妙微设计实战方法论

涛涛 设计管理与成长

兰亭妙微设计自 2009 年成立以来,深耕 UI/UX 设计领域十余年,为金融、医疗、智能制造等 7 大行业 500 + 企业打造全链路数字化设计解决方案,在中车数据可视化大屏、施耐德后台系统交互设计等经典案例中,始终将构图与排版作为 UI 设计的核心底层逻辑。我们认为,根据产品主题与业务内容的需求,将文字、图片、色彩等视觉要素进行有组织、有目的的组合设计,不仅是塑造界面美感的关键,更直接决定了用户的操作体验与信息获取效率,是连接产品功能与用户感知的重要桥梁。

兰亭妙微:2022 林肯 Zephyr HMI 设计解析

蓝蓝设计的小编 系统UI设计文章及欣赏

作为深耕车载 HMI 设计领域的团队,北京兰亭妙微 UI 设计团队始终以行业优秀作品为标杆,持续学习探索车载交互设计的前沿思路。本次福特内部设计团队操刀的 2022 林肯 Zephyr HMI 设计,凭借品牌基因与前沿设计的深度融合,成为车载 HMI 领域的优秀参考范本,我们也从其中汲取诸多设计灵感,现将核心设计思路与学习感悟解析如下,与行业同仁交流探讨,北京兰亭妙微,与你一起共成长

设计核心定位

 
该设计锚定林肯美式豪华的品牌基底,结合新生代高端用户对智能座舱的使用需求,以「科技赋能优雅,体验回归人本」为设计主线,打破传统豪华车机的刻板设计逻辑,让智能科技成为豪华体验的延伸,而非简单的功能叠加。这一设计逻辑也为北京兰亭妙微在车载 HMI 设计中平衡品牌调性与用户需求,提供了重要的思路参考。

视觉体系设计

 
  1. 星云、星座为核心视觉灵感(nebula/constellation 为设计核心标签),打造沉浸式视觉氛围,深色调基底搭配细腻的动态光影效果,契合林肯「静谧之旅」理念,也让科技感与高级感相融,与豪华车型内饰风格高度统一;
  2. 采用极简现代的界面布局,弱化冗余视觉元素,以清晰的信息层级、简洁的视觉符号构建界面,实现「视觉减负」,让驾驶过程中信息获取更高效,这与我们在 HMI 设计中坚持的「高效视觉表达」原则高度契合。

交互功能设计

 
  1. 适配多联屏硬件布局,打造分屏协同、全屏切换的操作逻辑,支持主驾控车、副驾娱乐 / 导航的独立操作与信息一键流转,最大化发挥多屏硬件优势,这为我们在多屏车载交互场景的设计中,提供了实操性极强的参考方向;
  2. 遵循车载交互的安全性与便捷性原则,简化操作路径,摒弃复杂文字菜单,采用卡片式交互布局,支持常用功能自定义与快捷手势操作,减少驾驶中的操作干扰,这也是北京兰亭妙微在 HMI 设计中始终坚守的核心原则;
  3. 打造场景化交互模式,结合通勤、休闲、运动等不同驾乘场景设计对应界面主题与功能组合,让交互更具针对性,为我们的场景化车载 HMI 设计带来新的灵感启发。

品牌基因融合

 
设计将林肯经典的「地平线设计」语言融入 HMI 视觉体系,通过横向视觉线条拉伸座舱视觉开阔感,与车辆内饰设计语言呼应,强化品牌识别性;同时弱化物理按键视觉占比,以智慧触板实现「数字化操作」,仅在操作时触发视觉反馈,让豪华体验渗透到每一个交互细节。这一将品牌基因深度融入交互设计的思路,也为我们在 HMI 设计中打造专属品牌辨识度提供了重要借鉴。

设计落地工具

 
本次设计综合运用 Photoshop、Illustrator 完成视觉界面与图形符号设计,通过 Cinema 4D 实现座舱与界面的建模渲染,借助 After Effects 完成动态交互效果制作,以 Sketch 进行交互原型搭建,多工具协同实现设计理念的精准落地。北京兰亭妙微在 HMI 设计工作中,也注重多设计工具的协同运用,保障设计效果从概念到落地的完整性与专业性。

兰亭妙微学习感悟

 
深耕车载 HMI 设计领域,北京兰亭妙微始终保持学习与探索的初心,从行业优秀作品中汲取设计养分,同时也在实际项目中不断打磨自身的设计能力,将前沿设计思路与实际项目需求相结合,打造兼具实用性、创新性与品牌适配性的车载 HMI 设计方案。
 
优秀的设计作品始终是行业前行的动力,未来北京兰亭妙微也将继续以优秀标杆为指引,深耕车载 UIUX 设计,持续探索创新,与行业伙伴携手共进,北京兰亭妙微,与你一起共成长
 

 

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

设计知识点 - 盒子模型 | 兰亭妙微设计

涛涛 设计思维

在 UI 与网页设计的布局体系中,盒子模型是最基础且核心的底层思维模型,也是 CSS 开发中高频使用的界面构建逻辑。兰亭妙微设计认为,掌握盒子模型的设计原理,能有效打通设计师与开发的沟通壁垒,让设计落地的效率与精准度大幅提升,无论是大到整页的布局规划,还是小到按钮、控件的细节设计,都能依托这一模型实现标准化、规范化的设计与开发。

UI 底部 Tab 栏设计总结 - 兰亭妙微设计

涛涛 移动端UI设计文章及欣赏

在移动端 UI 设计中,底部 Tab 栏是用户操作的核心导航组件,直接影响产品的操作体验与视觉质感。兰亭妙微设计结合多年移动端设计实战经验,从布局、背景、标签展现、图标样式四大核心维度,总结底部 Tab 栏的经典设计思路与实操技巧,为产品设计提供专业参考。

兰亭妙微:Web 表单设计的 5 个冷门设计技巧,让体验与效率双提升

涛涛 B端ui设计文章及欣赏

作为深耕 UI/UE 设计的专业团队,兰亭妙微在企业信息化、互联网产品、大数据软件的表单设计实践中,始终坚信细节决定体验。Web 表单作为产品与用户数据交互的核心载体,看似只是标签、输入框的简单组合,却藏着诸多易被忽视的设计细节 —— 标签末尾是否加冒号、标签与输入框如何对齐、必填字段该如何标记…… 这些看似 “无关紧要” 的冷知识,实则直接影响用户的填写效率与体验感受。

兰亭妙微:10 大设计心理学法则,打造让用户一眼倾心的数字化产品

涛涛 设计思维

作为深耕 UI/UE 设计领域十余年的专业团队,兰亭妙微始终秉持 “设计优秀,不断超越” 的核心理念,从清华主创团队的专业积淀出发,将用户心理洞察融入每一次数字化产品的设计实践中。我们深知,优秀的设计从不只是视觉上的美感呈现,更要触达用户内心,通过对心理学原则的精准运用,在屏幕端为用户创造兼具实用性与情感共鸣的交互体验。唐・诺曼的情感设计三层理论 —— 本能、行为、反思,是兰亭妙微所有设计工作的底层逻辑,本能层打造视觉吸引力,行为层保障产品可用性,反思层赋予产品深层价值,而这一切的落地,都离不开对设计心理学法则的熟练驾驭。以下便是兰亭妙微在千余次企业信息化、大数据软件、互联网产品设计中,反复验证并沉淀的 10 大设计心理学知识,掌握这些,便能让产品与用户建立第一眼的情感连接。

日历

链接

个人资料

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

存档