一、产品定位：先回答系统替谁解决什么问题

二、信息架构：把功能转译为用户的决策顺序

• 全局层：首页以醒目的总营收数字（如 $1,651,045,139）为视觉锚点，确立信任感；
• 分析层：收入趋势图、月度支出、销售预测被组织为核心分析模块；
• 执行层：具体的会计科目、客户查询和团队分享功能作为辅助工具存在。
  这种分层既照顾了管理者对“大数”的关注，也保留了财务人员下钻分析的需求。

三、关键交互：从浏览报表走向即时洞察

• 自然语言查询：界面底部的搜索框不仅仅是搜索，更是一个AI对话框（"Ask anything or search"），允许用户用自然语言提问（如截图中的 "What is our gross margin?"），直接获取分析结果，而非在菜单中翻找。
• 可视化反馈：图表中的悬浮提示框不仅显示数值，还带有绿色的增长百分比标签，直接将数据变化转化为业务含义。
• 跨端一致性：从桌面端到平板再到手机，核心数据卡片（如Forecast, Monthly Expenses）保持布局逻辑一致，确保用户在切换设备时认知负荷最小化。

四、视觉系统：品牌表达必须承担专业语义

五、面向产品与设计团队的可复用价值

六、专业审视：仍需补齐的体验边界

• 在大屏上展示极其精确到个位数的巨额数字（$1,651,045,139）虽然震撼，但在实际B端场景中可能需要支持自定义精度或脱敏显示。
• AI生成的建议（如底部的问答）需要增加数据来源的引用或置信度提示，避免用户对AI产生的“幻觉”数据盲目信任。
• 移动端虽然展示了核心数据，但对于复杂的财务报表编辑功能似乎有所阉割，需明确移动端的权限边界。

很多体验设计师长期困在执行层，日复一日输出界面、改需求，专业绘图能力过硬，但很难向上进阶。市面上流传大量设计师能力等级表，把初级、中级、高级能力一条条罗列，兰亭妙微结合政企 B 端、数字化产品大量项目实战认为，能力清单只能作为参考，现实中设计师能力往往长短不一，不会完全按表格标准化成长。真正的进阶，不只是把本专业做熟练，更要向上拓展上游能力，站在产品、业务视角思考问题，才能拉开设计师之间的差距。结合团队内部人才培养经验，我们梳理六大可落地的进阶能力方向。

很多设计师做 UI，把重心放在视觉美感、配色、图标打磨上，却忽略了用户的认知心理。好看不等于好用，真正优秀的用户体验，本质是顺应人的认知习惯，降低用户思考与操作负担。深耕政企 B 端、数据可视化、各类 App 界面设计多年的兰亭妙微，结合大量商业项目实践，拆解 4 个高频实用的设计心理学原理，把理论落地到真实界面设计工作当中。

兰亭妙微ui设计公司分享：很多设计师会遇到这样的困境：明明元素都齐全，但整体界面观感粗糙廉价，想要优化却找不到切入点。本文结合真实改版案例，从头部 Banner、内容列表、全局布局三个维度，拆解一套可直接复用的界面优化方法。

一、优化视觉重心：Banner 模块

Banner 是页面第一眼的视觉焦点，界面质感差，往往问题就出在这里。我们可以从图标、卡片色彩与投影两点着手调整。

1. 简化图标造型，统一色彩语言

原版 Banner 图标结构繁杂、色彩堆砌，阴影油腻浑浊，高饱和度投影让画面显得杂乱。 借助 AI 工具重构图标，优先选用造型简洁、轮廓明确的图形；配色做减法，以黑白为基底，搭配品牌主题色，弱化多余装饰，强化整体风格识别度，减少视觉噪音。

2. 调整卡片色彩，克制使用投影

原始 Banner 卡片投影过重，卡片与背景边界模糊，渐变过渡生硬，卡片内容被背景吞没，文字辨识度大打折扣。

优化思路：

1. 去掉冗余投影，提升卡片与背景的色彩对比度；
2. 重新调整渐变明暗分布，让文字信息优先突出，保证内容清晰可读。

   

二、梳理内容模块：列表区域优化

Banner 调整完成后，向下处理列表板块。列表常见三大弊病：图标风格割裂、卡片排版混乱、状态标识文字过小，导致信息层级模糊。

1. 统一图标视觉风格

旧版列表图标色彩五花八门，质感、样式互不统一，和底部导航栏视觉语言脱节。 将全部列表图标更换为和导航栏保持一致的线面结合样式，整套界面图标体系统一，减少风格冲突，页面会瞬间变得整齐有序。

2. 规范卡片排版，强化状态信息

原版卡片内部字号层级过多，文字排布散乱；任务状态提示字号过小，用户很难快速识别任务进度。

优化要点：

• 规范字号体系，控制卡片内字体层级数量；
• 对齐各类文本，平衡卡片内部布局；
• 放大状态标签，保证「已完成」「进行中」等状态清晰易读。

三、校准全局观感：整体布局调整

局部细节打磨完毕，最后回归全局，解决底色、边距带来的廉价感。

1. 改良背景色调，拉开页面层级

原版大面积高饱和度浅绿色背景，视觉油腻，卡片和背景边界混淆。 保留头部小范围主题色渐变，主体背景切换为柔和浅灰色；头部色彩局部下沉，制造页面空间层次感，让 Banner、列表卡片从背景中 “浮” 出来，界面高级感立刻提升。

2. 修正页边距，找回页面呼吸感

页面边距过大，内容区域被过度挤压，内容聚拢局促，缺少舒展的呼吸空间。 适度收窄页面左右边距，压缩顶部冗余空白，重新分配屏幕空间，让内容充分舒展，阅读体验更加舒适。

写在最后

当你的界面看起来不够精致，不必直接推翻全部设计。可以遵循这套顺序：先打磨头部核心 Banner，再修复列表等内容组件，最后校准背景、边距等全局设定。从局部到整体逐步迭代，就可以低成本完成界面质感升级。

转载：站酷

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

兰亭妙微ui设计公司分享：随着跨端办公趋势不断深化，B 端业务早已不再局限于 PC 后台。手机、平板正在成为业务人员随时随地处理工作的重要载体，打破办公场景的时空束缚。但 B 端移动端绝非 PC 页面简单缩小，需要围绕移动端场景、角色、操作习惯做轻量化重构。本文将从设计认知、核心模块实操、项目落地协作三个维度，完整拆解 B 端移动 App 的设计思路与实战要点。

一、建立认知：理清多端差异，找准移动端定位

PC、平板、手机三端并不是简单复制，而是一套功能逐级下放的关系：屏幕尺寸越小，功能越聚焦核心，剔除复杂配置与低频操作，适配对应角色的真实工作场景。

表格

以有赞美业工作台为例：手机端只保留宫格式核心入口；Pad 端在入口之外直接展示业务内容；PC 端承载完整数据看板、快捷操作与复杂管理功能。

设计启示：同样一套业务，不同终端的用户角色、使用目标完全不同，移动端设计的核心目标，是在保证操作效率的前提下兼顾可用性，而不是复刻 PC 全部能力。

二、核心模块实操：表单、列表、数据页、工作台四大组件设计

B 端移动端高频页面集中在表单、列表、数据看板、工作台，下面结合行业案例拆解每个模块的设计策略。

2.1 B 端移动端表单设计

表单由标题、必填标记、字段标签、提示文案、输入区域、操作按钮共同组成。 大部分表单追求快速完成，但部分场景需要引导用户审慎填写，例如资质审核页面、小屏适配、多语言国际化场景，这时标签布局方案就至关重要。

1）左对齐标签（左标签‑左内容）

优势：贴合阅读习惯，适合陌生、复杂业务字段，引导用户仔细阅读内容； 劣势：长标签会拉大标签与输入框距离，拉长填写耗时。 眼动实验表明，左对齐标签填写速度最慢，适合资质认证、金融申请这类需要审慎核对信息的页面，刻意放缓用户填写节奏，降低出错概率。

变体方案：左标签‑右内容，优化长标签适配，视觉排布整齐；但标签与输入框的关联性减弱，适合选择类录入场景。

2）顶对齐标签

优势：阅读效率极高，标签到输入框视觉跳转仅需 50ms，比左对齐快约 10 倍；对长标签、多语言场景兼容性强； 劣势：占用更多纵向屏幕空间，适合字段数量不多的移动端页面。

选型总结：追求填写效率优先选顶对齐；需要用户仔细阅读、风险较高的业务，优先选左对齐标签。

2.2 B 端移动端列表设计

移动端 B 端列表核心目标：快速查看信息、高效完成操作，由卡片容器、筛选器、搜索三大要素构成。

1. 卡片：移动端优先卡片式布局，承载多元信息与交互，适配多端展示，强化信息区分；分为长卡片（如饿了么商家版订单）、短卡片（如 58 同城商家版招标信息），根据信息密度选型。
2. 筛选：帮助用户在海量业务数据中快速定位，减少手动翻找成本。
3. 搜索：支持关键词直达目标条目。

视觉差异化设计技巧： 可以参考真实线下单据的视觉语言做拟物化轻量化表达，消解纯数据页面的枯燥压迫感。例如途牛商旅复刻纸质差旅审批单线条、医鹿模拟病历钉扣样式、饿了么商家版模仿外卖小票样式，让界面和真实业务认知对齐，提升用户的理解效率。

2.3 B 端移动端数据页设计

移动端数据页面 = 核心指标统计 + 可视化图表卡片 + 筛选控件 + 明细列表。

• 指标统计：提炼业务核心指标，采用主指标 + 辅助指标的组合展示；
• 可视化图表：做到 “一图胜千言”，把海量抽象数据转化为直观图形。

1）激励性数据设计

参考经典电力公司案例：通过对比图表，向用户展示自身和周边群体的用电差异，利用对比感知驱动行为改变，最终实现整体功耗下降。这套思路同样可以迁移到 B 端产品，通过对比维度，让业务人员直观感知自身业务的好坏差距，激发优化意识。

2）移动端图表取舍

移动端屏幕有限，图表需要做取舍：

• 直角折线：数据精度高；平滑曲线：降低认知负担，视觉更柔和；
• 部分业务场景可以弱化坐标轴、简化刻度，牺牲部分绝对精度，强化趋势感知，适合首页概览类图表，追求趋势感知而非精准读数（如淘特商家版生意参谋）。

2.4 B 端工作台：产品价值的门面

工作台是用户进入产品的第一站，帮助用户快速掌握工作进度、直达高频功能入口，是产品体验、视觉规范的核心落地场景，千牛、飞书、医蝶谷均是典型代表。

改版实战案例 —— 医蝶谷医生工作台 旧版首页将极速问诊模块占据近 40% 首屏空间，对接单慢的新手医生不够友好；新版做业务与视觉双重优化：

1. 业务策略：将极速问诊模块收起，把问诊 Tab 整合到首页，首屏优先展示待办任务，医生打开 App 就能直观掌握当日工作，提升抢单门槛合理性。
2. 视觉策略：弱化功能图标饱和度，减少视觉干扰，把用户注意力引导到待办、消息等高价值业务信息上，而非花哨的图标样式。

实战案例：医疗医生端音视频排班设计

医生工作具备三大特征：突发事务多、多任务并行、流程复杂（手术、查房、带教、接诊、写病历穿插进行），排班时间碎片化、无固定周期。针对该业务痛点，落地三条设计策略：

1. 优化层级，提升屏幕利用率 将时间标签置顶，调整卡片内信息权重；自动收缩无任务的时间段，无需向下长距离滑动，首屏就能够看到全天完整排班。
2. 色彩标签传递信息，克制视觉元素 放弃复用 C 端业务图标，改用简约色彩标签区分不同问诊类型，快速识别排班类型。
3. 简化操作路径，降低操作成本 优化前添加一组时段需要 4 步，设置 3 段不连续排班要操作 12 次；优化后单条时段仅需 3 步，3 段不连续排班 4 步即可完成，大幅降低高频排班的操作负担。

B 端设计关键启示：视觉好看只是基础，所有交互、界面优化，都必须扎根于真实业务场景与用户工作习惯，行业壁垒高的产品，前期深度用户调研必不可少。

三、落地协作：设计师如何与开发配合，推动规范落地

多数 B 端移动端以 H5、RN 技术实现，便于多端复用。设计师不仅要输出视觉，更要理解前端实现逻辑，减少落地偏差，提升整体研发效率。

3.1 提升开发效率：框架先行，分层交付

不要等全部视觉完成再交付，优先输出页面的底层框架线框图给到开发，研发可以先搭建页面 DOM 结构，之后再交付视觉标注，完成 CSS 样式还原，实现部分并行开发，节约项目工时。

3.2 性能优化：图片资源策略，降低服务器与带宽压力

图片资源会占用服务器存储，同时影响页面加载速度：

1. 提高图片复用率，同一份素材多处复用；
2. 大图分层切图：将人物、主体元素从背景中拆分独立输出，实测可将图片体积减少约 50%，同时支持不同页面复用主体素材。

3.3 关注 H5 环境下容易踩坑的细节

1. 空格占位符  （1 个空格）、 （半个汉字宽度）、 （1 个汉字宽度），文本换行、间距实现需要提前和开发对齐规则。
2. 字重还原问题 PingFang 字体的 Medium (500) 在 Web/H5 环境下还原效果差，和常规字重几乎看不出差异。需要和前端提前约定：设计稿中 Medium 中黑体，代码直接写font‑weight:600，保障粗细效果和设计稿一致。

3.4 循序渐进推动设计规范落地

很难在一个版本完成全部规范整改。设计师需要兼具部分产品思维，对优化需求做优先级拆分，分版本迭代上线。 推荐建立排期跟进表格，记录需求描述、分类、版本、负责人、上线时间，明确状态，同步给产品、开发，持续跟进，避免规范只停留在设计稿无法落地。

转载：优设

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

兰亭妙微ui设计公司分享：2024 年，58 同城完成企业文化焕新，借此契机，产品迎来一轮全面视觉升级。项目确立四大设计原则：简单有效、美好安乐、多元融合、自然生长。这套理念不仅指导整体视觉改版，更是搭建产品与用户情感连接的内核。

在启动图标体系设计时，《道德经》中 “大方无隅” 的哲思带来重要启发：开放包容、和谐自然的内核，恰好与本次设计理念高度契合，也为整套图标体系定下创作基调。下面将从形、意、色、境、规五个维度，完整复盘 58 同城图标设计的实战全过程。

一、形｜方圆之间，容纳万千表达

形态是图标设计的根基，不同轮廓会直接带给用户截然不同的感知。

1. 确立基础形态

方形代表秩序、规则与稳定，如同坚实的基石，承载产品体系的严谨；圆形象征包容、柔和与流动，传递产品面向用户的亲和姿态。 结合项目设计理念，我们将二者融合，打造方中有圆、方圆共生的基础图形语言。既保留产品的秩序感，又传递出与用户共生共存的温和气质。

2. 业务符号的融入

58 同城业务线庞杂，每个板块都具备独有的业务特质。为此我们提炼专属业务符号，嵌入图标设计当中，强化业务辨识度，唤醒用户的业务认知，让图形不止是装饰，更是业务信息的载体。

3. 线条语言的取舍

线条风格延续方圆融合的设计基调，摒弃生硬锐利的直线，大量使用流畅弧线与曲线，贯彻和谐、自然、舒适的体验追求，统一整套图标气质。

二、意｜兼顾功能传递与情感共鸣

图标是界面最直观的视觉符号，表意是否清晰，直接决定用户体验好坏。本次设计的核心目标：打造看得懂、能共情的图标体系。

1. 选用大众共识视觉符号

坚持以用户为中心，优先选用大众具备普遍认知的物象。例如求职匹配公文包、工卡；二手车对应汽车；生活服务对应清洁工具。 这类符号无需额外解释，用户一眼就能读懂含义，降低认知成本。

2. 适度细节丰富表达

在扁平化基底之上，增加适度光影与细节刻画，为图形赋予真实感与层次。既强化信息表意，也避免图标单薄空洞，让用户浏览时一目了然。

3. 不止功能，更要触动情绪

优秀的图标不止完成功能指引，更需要传递情绪价值。通过形态塑造、色彩搭配、细节打磨，给用户带来感官上的舒适愉悦，让用户在使用产品的过程中，感受到设计的温度与关怀。

三、色｜构建有生命力的色彩系统

色彩是图标强大的视觉武器，决定图标的吸引力与气质表达。

1. 搭建全新品牌色彩体系

基于原有 58 品牌色做拓展迭代，由原先 4 种品牌色扩充为 5 套标准色，并且和各业务线做绑定适配。这套色彩体系具备开放、包容的特质，为品牌视觉注入全新活力。

2. 色彩虚实搭配提升表现力

将新色彩体系落地到图标当中，为不同业务图标赋予专属气质。通过色彩、图形虚实对比组合，强化风格辨识度，增加画面趣味性，让图标在繁杂界面中可以有效抓住用户视线。

四、境｜分层设计，适配真实使用场景

作为大型平台类产品，图标不能一套样式通吃全部页面。合理划分视觉层级，梳理平台与业务的关系，避免视觉过载，打造沉浸式浏览体验。

1. 建立三级视觉层级

我们把图标划分为三个层级，适配不同页面位置：

1. 一级图标：首页主金刚区，用户第一眼关注的区域，强调视觉权重与引导能力；
2. 二级图标：首页副金刚区、各业务大类金刚区，保证识别度的同时，与一级形成视觉落差；
3. 三级图标：个人中心等功能入口，以极简形态优先满足功能实用性。

2. 贴合场景做差异化处理

• 一级金刚区图标：叠加光影、质感细节，强化重点引导；
• 二级图标：偏向扁平化，尺寸收窄，做视觉退让，保留识别；
• 三级图标：采用线性样式，适配功能入口轻量化的使用场景。

五、规｜无规矩不成方圆，设计靠规范落地

再出色的创意，离开了规范，就很难保持长期统一。完善的图标规范，保障多名设计师协作下产出风格一致，稳定整体设计质量。

1. 沉淀完整设计规范文档

输出完备的图标规范手册，覆盖设计理念、基础网格、倍率、形状符号、图形特征、场景用法等维度，作为团队统一的设计依据。同时归集全部图标资产库，方便设计师快速调用，提升协作效率。

2. 用数据和用户反馈做科学校验

设计好坏不能只依靠设计师主观审美。项目全程引入量化评估，收集真实用户反馈、分析线上数据，持续迭代优化，让设计决策回归用户真实体验，而不是个人喜好。

写在最后

图标体量虽小，却是产品与用户之间重要的连接媒介，承载信息传递与情感共鸣双重价值。 本次项目，我们从形塑造基底、意传递信息、色赋予气质、境适配场景、规保障落地五个维度完成整套图标体系。同时依靠规范约束、用户数据验证，保障后续迭代质量。 未来，58UXD 团队也会继续延续这套设计理念，持续探索，为用户带来更有温度的设计体验。

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

对于刚踏入 UI 设计领域的新人来说，常常会陷入看得多、上手难的困境：浏览大量优秀作品，真正接手项目却无从下手。深耕 UI/UX 设计多年的兰亭妙微，结合大量商业项目实战经验，整理出 4 个适合 UI 新手的实用学习方法，帮助初学者建立科学的学习习惯，稳步夯实设计底层能力。

这篇站酷文章聚焦金融股票类产品的色觉障碍用户无障碍设计，指出全球约 3 亿色盲群体，在股票软件使用中普遍遭遇体验障碍，剖析现实困境，输出整套 UI 解决方案，并强调测试验证的重要性，以富途 APP 作为落地案例进行佐证。

作为设计师，工作中一定都接触过色域。但兰亭妙微在团队交流中发现，很多人对色域的概念以及它对方案显示效果的影响不甚了解，导致工作中经常遇到这些问题：不确定设计软件中该选哪种颜色配置，干脆忽略；不知道为什么效果图在不同设备上显示颜色不同；设计稿和实际开发上线的界面存在色差。

有效的色彩应用技巧，是每一位视觉设计师都必须具备的基本功。随着扁平化设计和 Material Design 的普及，色彩理论知识变得愈发重要。如今，鲜艳的颜色和渐变出现在各类数字产品的界面上 —— 从趣味娱乐应用到商业网站，无处不在。然而，关于亮色对用户体验的影响，仍有许多值得深入探讨的地方。兰亭妙微结合多年设计实践，对亮色 UI 的优缺点进行系统分析。