兰亭妙微UI设计公司分享:过去,产品经理谈界面设计,常常只需要说一句:“这个页面按后台系统常规样式做就行。”
但今天,这句话已经不够用了。
一方面,AI 产品、SaaS 工具、内容平台、数据看板、运营后台越来越多,产品的第一印象越来越依赖界面质感。另一方面,前端开发已经不再是从零开始写每一个按钮、表单和弹窗,大多数团队都会基于成熟的 UI 框架或组件库快速搭建产品。
所以,产品经理虽然不一定要会写代码,但至少应该知道:市面上有哪些常见的前端 UI 框架?它们分别适合什么产品?什么时候该用现成框架,什么时候需要做定制设计?如果你完全不了解这些,很容易在需求评审时提出“不现实的设计要求”,或者在产品视觉层面输给竞品。
这篇文章,就帮产品经理系统梳理一次。
简单理解,前端 UI 框架就是一套已经设计好、开发好的界面组件集合。
比如:
按钮、输入框、下拉选择器、表格、弹窗、标签页、菜单、日期选择器、上传组件、通知提醒、侧边栏、数据卡片……
这些都是产品页面中高频出现的基础元素。
如果没有 UI 框架,前端工程师就需要从零开始写这些组件,不仅开发效率低,也很难保证不同页面之间的风格统一。
而有了 UI 框架之后,团队可以直接调用现成组件,再根据品牌风格进行主题定制。对于产品经理来说,这意味着:
所以,UI 框架并不只是“让页面变好看”的工具,它本质上是产品研发效率的一部分。
很多产品经理会觉得:“UI 框架不是前端工程师的事情吗?我为什么要懂?”
原因很简单:你不需要会用,但你需要会判断。
产品经理至少要知道三个问题:
第一,这个产品适合用什么类型的 UI 框架?
一个企业管理后台,和一个 AI 聊天产品,和一个营销活动页面,对界面风格的要求是不一样的。后台系统更看重表格、表单、权限、筛选和数据展示;AI 产品更看重现代感、轻量感、动效和交互体验;官网落地页则更看重视觉冲击力和转化路径。
第二,UI 框架会影响产品气质。
同样是一个管理系统,用 Ant Design、Element Plus、shadcn/ui、HeroUI 做出来的感觉可能完全不同。有的偏企业化,有的偏清爽,有的偏现代,有的偏国际化。
第三,UI 框架会影响需求实现成本。
有些组件框架本身就提供复杂表格、表单校验、日期选择、上传、权限布局等能力,实现成本较低;但如果产品经理提出的交互和框架默认能力差异很大,研发成本就会上升。
所以,懂 UI 框架,不是为了替前端做技术选型,而是为了让产品经理在设计需求、评估成本、判断风格时更专业。
前端 UI 框架很多,但产品经理不需要全部掌握。你只需要知道以下几类。
如果你做过中后台产品,大概率听说过 Ant Design。

它最适合的场景是:企业管理后台、CRM、ERP、数据平台、运营后台、权限系统、审批系统、配置系统等。
Ant Design 的优势是组件非常完整,尤其适合复杂表格、复杂表单、数据筛选、弹窗、菜单、导航、分页、上传等中后台场景。对于国内很多 B 端产品来说,它几乎已经是一种“默认选择”。
但它也有一个明显问题:默认风格比较“企业化”。如果不做主题调整,产品容易看起来像传统后台,缺少年轻感和高级感。
产品经理在使用 Ant Design 时要注意一点:它适合提高效率,但不代表产品一定好看。如果是面向外部客户的 SaaS 产品,最好在颜色、间距、卡片、图标和数据可视化上做二次设计。
适合场景:
不太适合:
Element Plus 是 Vue 生态里非常常见的 UI 组件库,很多国内团队做后台系统都会用它。

如果你的技术团队使用 Vue 3,那么 Element Plus 通常会是一个很容易被考虑的选项。它上手成本低,文档友好,组件也比较完整,适合快速搭建管理系统。
它的产品气质和 Ant Design 有点类似,都是偏中后台、偏效率、偏稳定的路线。对于产品经理来说,Element Plus 的核心价值不是“多么惊艳”,而是“稳定、通用、开发快”。
适合场景:
需要注意的是,如果产品对视觉高级感要求很高,Element Plus 默认风格也需要二次设计,否则容易显得普通。
Naive UI 也是 Vue 3 生态中值得产品经理了解的一套组件库。

和 Element Plus 相比,Naive UI 的气质更轻、更现代,视觉上也更清爽一些。它比较适合那些既需要后台能力,又希望界面不要太传统的产品。
比如 AI 工具后台、内容管理系统、知识库产品、数据分析工具、轻量 SaaS 控制台等,都可以考虑 Naive UI。
对产品经理来说,Naive UI 的价值在于:它不那么“老派后台”,同时又具备比较完整的组件能力。如果你希望产品既有效率,又看起来更年轻,它是一个不错的选择。
适合场景:
Arco Design 是一套偏企业级的设计系统和组件库,既有 React 版本,也有 Vue 版本。它的整体风格比传统企业后台更年轻,适合需要兼顾效率和视觉感的产品。

如果说 Ant Design 更像成熟稳重的企业后台,那么 Arco Design 相对更轻、更活泼一些。它适合做企业协同产品、效率工具、数据平台、SaaS 后台、运营系统等。
产品经理可以把 Arco Design 理解为:在企业级能力和年轻化视觉之间做平衡的一套方案。
适合场景:
MUI 是 React 生态里很成熟的一套组件库,基于 Google 的 Material Design 风格。

它的特点是规范感强、组件完整、国际化程度高。很多海外产品、开发者工具、SaaS 产品会使用 MUI。
不过,MUI 的默认风格有比较明显的 Material Design 特征。如果你的产品希望看起来更“Google 系”,MUI 会比较合适;但如果你希望做出独特品牌感,就需要进行较多主题定制。
适合场景:
Mantine 是一套比较全能的 React 组件库。
它的优势在于组件丰富、hooks 完整、主题定制能力强,适合做各种 Web 应用,尤其适合 SaaS、后台系统、工具型产品。
和 Ant Design 相比,Mantine 的视觉气质更轻一些;和 shadcn/ui 相比,它又更像一个完整的组件库,开箱即用能力更强。
如果你的团队使用 React,并且想要一个既能快速开发、又不会太传统的 UI 框架,Mantine 是值得考虑的选择。
适合场景:
近几年,Shadcn ui 在 React 和 Next.js 圈子里非常受欢迎。

严格来说,它并不是传统意义上的组件库。它更像是一套可以复制到自己项目里、再自由改造的组件体系。它的设计风格非常现代,配合 Tailwind CSS 使用,很容易做出高级、干净、有质感的界面。
这类风格非常适合 AI 产品、SaaS 官网、开发者工具、数据看板、知识库产品、内容平台等。
shadcn/ui 的优势是好看、灵活、可控;缺点是它对前端团队能力要求更高,不像传统组件库那样“一装即用”。如果团队前端能力不错,它可以做出非常有差异化的产品视觉;如果团队比较依赖现成组件,使用成本可能会更高。
适合场景:
对产品经理来说,shadcn/ui 值得重点关注。因为现在很多新一代 AI 产品的界面风格,已经不再是传统后台,而是更轻、更白、更克制、更高级的设计语言。
HeroUI 也是一套适合 React 项目的现代 UI 组件库。

它的特点是默认视觉比较好,组件带有更明显的现代感和动效感,适合做 AI 工具、创作者产品、社区产品、轻量 SaaS 产品等。
如果产品经理希望产品一开始就有不错的视觉表现,而不是完全依赖设计师和前端从零调整,HeroUI 会是一个不错的选择。
适合场景:
Tailwind CSS 严格来说不是 UI 组件库,而是一套 CSS 工具框架。
你可以把它理解成一套“原子化样式系统”。它不会直接给你一个完整的表格或弹窗,但它可以让前端非常灵活地搭建各种界面。
现在很多现代 UI 框架和组件方案都会基于 Tailwind CSS,比如 shadcn/ui、HeroUI 等。
产品经理不需要理解 Tailwind CSS 的写法,但要知道它代表了一种趋势:越来越多团队不满足于直接套用传统组件库,而是希望通过更灵活的样式系统,做出更有品牌感的界面。
适合场景:
产品经理不需要决定最终技术选型,但可以和设计师、前端一起从以下几个维度判断。
如果是企业后台、管理系统、配置平台,可以优先考虑 Ant Design、Element Plus、Arco Design。
如果是 AI 产品、SaaS 工具、开发者工具,可以重点关注 shadcn/ui、HeroUI、Mantine。
如果是 Vue 技术栈,可以看 Element Plus、Naive UI、Arco Design Vue。
如果是官网、落地页、活动页,可以关注 Tailwind CSS 及其生态组件。
React 项目常见选择:
Vue 项目常见选择:
不同框架并不是随便选的,它和团队技术栈高度相关。产品经理不要只说“我喜欢这个风格”,还要问一句:“我们现在的前端技术栈适合用它吗?”
如果产品里有大量复杂表格、筛选、表单、权限、弹窗、上传、日期选择,组件完整度非常重要。
这类产品更适合选择成熟组件库,比如 Ant Design、Element Plus、Mantine、Arco Design。
如果产品更重视视觉表达、页面质感和品牌差异化,可以选择 shadcn/ui、HeroUI、Tailwind CSS 生态。
很多产品的问题不是“没有 UI 框架”,而是“所有页面都长得像模板”。
如果你希望产品有自己的品牌感,就不能只依赖默认样式。产品经理需要关注:
一个成熟产品,最终一定不是简单套模板,而是形成自己的设计系统。
如果你是做企业中后台:
优先看 Ant Design、Element Plus、Arco Design。它们组件成熟,适合复杂业务场景,尤其是表格、表单、筛选、权限等能力比较重要的系统。
如果你是做 AI 产品:
优先看 shadcn/ui、HeroUI、Mantine。它们更容易做出现代感和高级感,适合 AI 工具、AI 工作台、AI 内容平台、AI Agent 控制台等产品。
如果你是做 SaaS 产品:
可以根据风格选择 Mantine、shadcn/ui、Ant Design、Arco Design。如果是偏后台管理,可以选 Ant Design 或 Arco;如果是偏现代工具,可以选 shadcn/ui 或 Mantine。
如果你是做官网和营销页:
可以关注 Tailwind CSS 生态。相比传统后台组件库,它更适合做品牌官网、课程页、活动页、产品介绍页。
如果你是 Vue 团队:
可以重点看 Element Plus、Naive UI、Arco Design Vue。如果想稳妥,就选 Element Plus;如果想更现代,可以看 Naive UI;如果要企业级完整方案,可以看 Arco Design Vue。
第一个误区:以为 UI 框架等于设计稿。
UI 框架只是基础组件,不等于完整设计。真正的产品体验还包括信息架构、页面布局、视觉层级、交互路径、文案表达和品牌调性。
第二个误区:只看好不好看,不看业务复杂度。
有些框架看起来很美,但不一定适合复杂后台。如果产品有大量表格、筛选和表单,组件能力比视觉炫酷更重要。
第三个误区:只追求差异化,忽略开发成本。
如果每个组件都要重写,每个交互都要高度定制,产品看起来可能更特别,但研发成本和维护成本也会大幅上升。
第四个误区:认为用了某个框架就一定高级。
同样使用 shadcn/ui,有的产品很高级,有的产品也会很普通。框架只是起点,最终效果取决于设计能力、前端实现和产品细节。
产品经理了解 UI 框架,不是为了和前端争论“到底用哪个库”,而是为了提升产品判断力。
你至少要能判断:
当你能回答这些问题,和设计师、前端沟通时就会更专业。
AI 时代,产品经理的能力边界正在变化。
过去,产品经理重点关注需求、流程和功能;现在,产品经理还需要懂一点界面审美、组件思维、设计系统和研发效率。
前端 UI 框架就是连接产品、设计和研发的重要桥梁。
你不需要成为前端工程师,但你需要知道:
真正优秀的产品经理,不只是会写需求文档,也要能判断一个产品该用什么方式被更高效、更美观、更可持续地做出来。
这,就是产品经理应该了解前端 UI 框架的原因。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微UI设计公司:在用户需求日益多元化的旅游市场中,会员权益的价值不仅在于提供优惠,更在于创造差异化的体验与长期归属感。本次会员权益感知升级,我们通过权益展示规则优化和场景化等方式,加强用户对会员权益的感知,让用户从预订到旅程的每个环节都能清晰感知会员权益的价值。
当前,集团持续加大在会员权益方面的投入,旨在通过更具价值的权益体系提升用户体验。优质的会员服务不仅能增强用户粘性和忠诚度,更能有效提高权益使用率和订单转化率。此次会员体验升级,正是希望通过优化权益设计和服务体验,实现用户价值与平台效益的双赢,最终形成"投入-体验提升-效益增长"的良性循环。
通过走查线上各业务线(如机票、酒店等)的页面,我们发现了以下 2 个问题:
1. 不同业务线间:权益的展示节点和感知强度不同,缺少一致的设计原则
目前各业务线在会员权益方面的设计手段不同,在权益展示点位和感知强度上存在明显差异,缺少一致的设计原则进行规范。具体表现为:
酒店:主要通过货架展示强化会员权益感知
机票:侧重在列表页和中间页等固定位置展示
火车票:则聚焦于权益使用环节的触达
2. 单个业务线内:优势权益在流程中没有充分传达
通过对各业务线现有页面的走查,我们发现会员权益在订前、订后部分关键节点存在展示缺失的问题。虽然用户在流程中能看到权益信息,但整体感知度仍有不足。
针对上述问题,我们需要建立统一的设计原则,在保持各业务线自身特色的同时,形成协同一致的会员体验,提升用户对会员权益的整体感知效果。
本次优化主要围绕两个核心目标展开:一是建立规范的权益展示原则,二是提升用户对权益的感知度。具体将从以下几个方向着手:
1. 权益前置,强化展示
根据历史机票和酒店的项目数据,我们发现将具有明显优势的权益提前展示,能够显著增强用户的感知,并有效提升预订转化率。例如携程酒店将会员账户中的的权益与预订流程结合,将原本无早餐的劣势转化为会员可免费兑早餐的优势展示。这样的方式为我们提供了本次优化的思路——通过权益前置来强化权益,加强感知。
什么样的权益需要前置?——设定强弱权益规则
为提升会员权益展示效果,我们通过对权益内容的系统分析,将其划分为两大类别:强权益和弱权益。
强权益:指与产品线直接相关或对价格产生显著影响的权益,例如酒店业务的免费早餐服务和会员专享价格。这类权益在用户购买决策中起关键作用,能有效提升用户满意度和预订转化率,因此需要在核心预订节点进行重点展示。
弱权益:指与产品线关联度较低的权益,例如机票业务的快速安检服务。虽然这类权益不会直接影响用户的预订决策,但可作为增值服务提升用户体验,间接促进转化。
为确保权益展示的客观准确,我们也可以借助内部的权益价值计算公式,量化每项权益的实际价值,帮助我们精准评估和展示权益,为用户提供更有价值的会员体验,最终提升用户满意度和忠诚度。
2. 让权益贯穿各节点的策略
在对各业务线的线上页面进行走查时,我们注意到订前、订后部分节点常常出现权益感知缺失的情况。
为了充分提升权益的曝光,我们制定了强弱权益展示的规则,定义了在各节点展示的必要性。在预订前节点,我们优先展示与用户决策紧密相关的强权益,并在相关性较低的节点提前展示弱权益,以加深用户印象并促进转化。预定后,对收益、转化率和 CPO(客服来电率)的影响较小,需要做到尽可能强的展示。
根据以上规则,我们在实际点位进行了应用:
以火车票业务为例,我们通过优化权益展示策略,在首页新增曝光点位、强化现有页面展示效果,并完善订后权益展示,使会员权益的触达贯穿用户全流程。优化后,权益曝光率和用户感知强度有了明显的提升。
3. 更加严格的设计规范
此前制定的会员权益视觉规范,因各业务线复杂度不同,在多次迭代后逐渐出现差异,导致不同业务线之间展示不一致、单个业务线内流程不统一的问题。为此,本次优化中我们也重点明确了各类场景的标签使用规范和文案规范,全面提升展示一致性,同时加强会员身份的表达。
经过以上几点优化,上线后数据显示用户对会员权益的满意度、会员权益的使用率都有显著提升,验证了设计方案的有效性。
除了常规流程中的会员感知,我们也在思考如何进一步加深用户的印象,让用户订票时优先选择携程。
1. 出行中节点——提供好用的体验
订后的节点往往容易被忽视,以机票的快速安检权益为例,用户通常需要打开携程 App → 查找订单详情 → 定位权益入口 → 完成核销,步骤较长,导致体验打折。
新版本中,我们将出行相关的会员权益(如快速安检)直接前置至携程 App 大首页的行程卡片。用户打开 App 即可快速查看和使用权益,无需多层跳转。改版后,用户体验和权益使

用率都得到了提升。
2. 会员升级节点——制造惊喜感
基于 KANO 模型,我们可以将用户需求分为三类:基本型、期望型、兴奋型,在前面的改版中我们已经满足了用户的前两类需求。我们希望制造惊喜感和仪式感来满足用户的兴奋型需求。携程会员体系以“山峰”为视觉符号,不同高度代表不同等级,用户每次升级,都象征着翻越一座新的高峰。象征用户翻越山峰的升级节点正是满足用户“兴奋型需求”的关键时刻。
因此,在用户升级时,我们在携程首页增加升级弹窗强化惊喜感和仪式感。用户打开 App 即可直观感受到等级提升的成就,并快速了解新增权益。上线后带来了人均使用权益订单量、会员中心访问率等数据的提升。
通过系统化的设计与持续迭代,会员权益体系能够深度释放用户价值,推动品牌的长期可持续增长。在这个过程中,我们需要确保用户在全渠道触点中获得连贯一致的体验,从而建立稳固的品牌信任,降低用户的学习与决策成本。同时,我们需要强化会员的价值感知,通过具象化的权益呈现和情感化的设计表达,让用户切实感受到专属特权与归属感,最终打造出更具黏性的用户体验闭环。
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

Neemo Project 企业AI项目管理后台全案运营价值解析
北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。今天,我们来深度拆解一套企业AI项目管理后台的ui设计,从信息架构、配色策略、移动端适配到数据叙事的视觉表达,逐一解析其背后的设计决策。
一、项目基础概述
1.1 项目背景与核心用户痛点
Neemo Project 是搭载 AI 辅助能力的企业级项目管控后台,核心服务两类人群:企业项目管理者、跨部门协作执行团队成员。
传统项目管理工具普遍存在运营与使用痛点:
管理者视角:项目工时、任务完成率、周期进度数据分散,需要手动汇总多表格统计,无法实时全局把控项目风险与交付节点;多团队协作成员、会议、截止任务分散在不同页面,统筹效率低下;
执行团队视角:任务缺少清晰时间规划,到期提醒滞后,流程重复工作占用大量人力,缺少自动化辅助工具简化重复性工作;
界面体验痛点:多数传统管理后台布局拥挤、深色界面色彩杂乱,数据图表层级混乱,长时间办公浏览极易视觉疲劳,缺少标准化状态区分体系,任务进度难以快速识别。
本产品以「AI 自动化赋能 + 全维度数据可视化 + 轻量化任务协同」为核心设计思路,从管理层全局管控、执行层高效落地两个维度,解决企业项目协同低效、数据统计繁琐、节点管控缺失的行业痛点。
1.2 项目核心设计目标(以企业真实运营需求为核心)
全局数据直观可视化:整合工时、任务完成量、周期活跃度、团队协作信息,首页一站式呈现,管理者无需多页面跳转即可掌握项目全貌;
AI 自动化降本增效:内置 AI 辅助模块,自动简化常规流程、分析项目绩效、动态管控任务截止时间,减少人工重复操作;
标准化任务协同体系:统一任务状态标识、日历排期、会议管理、截止预警模块,跨团队成员快速看懂任务优先级与进度;
统一高端深色专业视觉体系:搭建完整组件库,深色基底搭配高区分度功能色,兼顾长时间办公护眼需求与 B 端产品专业科技感,全页面操作逻辑、视觉语言高度统一。
1.3 完整企业项目管理闭环
产品覆盖完整项目全生命周期管理:项目总览数据大盘 → AI 绩效分析辅助 → 月度日历任务排期管理 → 截止节点风险监控 → 团队协作人员管理 → 会议日程统筹 → 任务状态动态更新与自动提醒。
二、全链路企业使用体验拆解
2.1 项目总览首页:一站式全局管控大盘
页面左侧固定侧边导航栏,收纳全部一级功能入口,便于管理者随时切换模块;页面顶部为项目基础信息栏,展示总投入工时、进行中 / 已完成任务总量、协作人员头像组,配套独立 AI 助手快捷入口,一键调用智能分析功能。
页面核心区域分层排布多维度可视化图表:长条柱状图展示项目全周期每日任务活跃度,环形进度环直观呈现整体任务完成率;右侧分区独立卡片承载截止任务清单、团队会议日程两大核心模块,卡片内自带进度条清晰展示各子任务交付进度,主次信息层级分明,管理者打开页面即可快速定位风险滞后任务。
2.2 日历任务排期模块:清晰规划每日执行工作
首页下方嵌入月度日历视图,按日期纵向排布当日全部待执行任务;不同状态任务采用标准化色块区分:绿色代表已核验完成、橙色代表进行中、紫色代表待启动规划、红色代表风险逾期任务。
单条任务卡片精简展示任务名称、归属模块,鼠标悬浮可展开详情弹窗,支持快速筛选任务状态、自定义视图排序,团队成员可快速认领、查看自身负责工作,管理者可直观查看每日团队负载,合理分配工作量。
2.3 AI 绩效分析与截止管控模块:自动化降低管理成本
独立 AI 绩效分析模块自动测算流程简化效率,量化 AI 为团队节省的工作量;截止管控功能实现全自动化管理:系统自动识别变更交付节点,推送到期提醒,任务逾期时自动重新分配对接人员,无需管理者手动跟进督促。
整套状态标签组件统一规范,Active、In Progress、Validation 三类核心进度标识色彩固定,全页面通用,团队成员无需额外学习即可快速分辨任务阶段。
2.4 团队协作与会议管理模块:打通跨部门信息同步
页面右上角聚合全部项目协作人员头像,点击可快速查看成员分工、在线沟通;独立会议卡片统一记录会议主题、时间段、会议规划内容,区分「已规划 / 进行中 / 已结束」状态,自动留存会议记录,避免跨部门信息断层,减少线下同步沟通成本。
三、视觉与标准化组件系统:高端深色 B 端专业体验
3.1 色彩视觉体系(适配企业长时间办公场景)
基底主色:低饱和深紫深色背景,弱化屏幕强光刺激,长时间办公不易视觉疲劳,塑造科技感专业企业氛围;
数据高亮色:明黄色用于整体进度环形图、绩效重点数据,紫色作为 AI 功能、待启动任务主色,绿色代表完成 / 核验状态,橙色代表进行中任务,四色形成强区分度,快速识别数据与任务状态;
文字层级:纯白色大号数字展示核心指标,浅灰色小字承载辅助说明,高对比度保障深色界面文字清晰可读;
操作功能色:白色作为按钮、弹窗基础底色,与深色背景形成柔和对比,不刺眼。
3.2 全场景可复用标准化组件库
整套后台搭建完整统一组件体系,覆盖:侧边导航、数据柱状图、环形进度指标、任务日历卡片、截止任务卡片、会议日程卡片、任务状态标签、弹窗浮窗、AI 功能按钮、人员头像组件等全部页面基础元素。
统一组件带来双重企业使用价值:
管理 & 执行端:全页面视觉、交互逻辑统一,新入职团队成员快速上手系统,降低工具学习成本;
产品迭代端:新增项目模块、AI 功能、管理报表可直接复用现有组件,大幅缩减设计、开发人力成本,系统拓展性更强。
3.3 品牌视觉体系配套
项目配套专属点状抽象品牌 Logo,以圆点阵列构成字母 M 图形,简约几何风格和后台科技极简视觉完全统一,线上后台、宣传物料视觉语言贯通,强化企业项目管理工具专属品牌记忆点。
四、交互与企业管理体验核心亮点
全局信息前置设计:首页聚合工时、进度、任务、会议、协作人员全部核心数据,减少多层级页面跳转,提升管理者统筹效率;
AI 自动化全流程赋能:自动绩效分析、到期提醒、任务重分配,替代大量人工统计、跟进工作,压缩管理人力成本;
标准化色彩状态体系:任务、数据、功能通过固定色彩区分,无需阅读文字即可快速抓取核心信息;
轻量化悬浮弹窗交互:任务详情、人员信息、操作菜单均采用浮窗展示,无需新开页面打断当前工作流;
多模块分区独立卡片设计:截止任务、会议、周期数据分区隔离,信息互不干扰,逻辑清晰不杂乱。
五、项目商业落地价值
提升企业项目交付效率:全局可视化管控 + AI 自动化工具,提前识别项目滞后风险,降低延期交付概率,提升项目交付质量;
缩减企业管理人力成本:自动统计、智能提醒、任务重分配功能,减少项目专员、行政跟进、数据统计的人工工作量;
差异化市场竞争力:市面多数项目管理工具缺少内置 AI 辅助模块,深色高端可视化界面精准面向中大型企业、科技团队,形成独特产品优势;
可持续业务拓展:模块化组件架构可后续拓展多项目台账、财务工时统计、客户对接模块,满足企业长期数字化管理升级需求。
六、全案设计总结
双人群需求平衡设计:同时兼顾企业管理者全局数据统筹、一线执行团队轻量化任务操作两类核心诉求;
B 端深色数据界面分层设计,核心指标放大前置,辅助信息收纳至次级区域,解决海量数据阅读困难问题;
AI 功能深度融入产品全流程,用自动化设计解决企业重复性管理工作痛点;
全组件化界面搭建,统一视觉与交互标准,兼顾团队使用流畅度与产品长期迭代拓展能力。
图片来自Behance
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

谁说B端医疗软件只能是枯燥的表格?
今天分享一个把严谨科技做成艺术品的案例——德祥生物全自动血型分析系统。
由兰亭妙微(蓝蓝设计)操刀,这次不仅是UI升级,更是一场关于“效率与美感”的深度重构!
亮点一:色彩心理学的应用
摒弃传统高亮色,采用冷调蓝+浅灰背景。
目的:降低视觉噪点,缓解检验科医生长时间工作的视觉疲劳,同时保持医疗设备的严谨感。
亮点二:信息层级重构(左-中-右)
左侧导航:功能分区明确,快速切换;
中间核心区:模拟物理卡盘形态,直观展示运行状态;
右侧数据区:关键指标(样本数、完成率)实时悬浮。
目的:符合人眼扫描习惯,缩短寻找信息的时间,提升操作效率。
亮点三:异常状态的强提醒
利用红/绿/蓝三色建立条件反射。
目的:无需阅读文字,余光扫过即可判断设备是“正常”、“进行中”还是“报错”,极大降低事故风险。
设计师碎碎念:
好的B端设计,是在克制中找平衡。 既要满足微流控技术的复杂参数展示,又要保证界面的清爽易用。 这套设计做到了“始于颜值,忠于效率”,值得所有医疗SaaS产品经理参考!
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

线上医疗问诊预约 App 全案用户体验价值解析
北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。今天,我们来深度拆解一套线上医疗问诊预约 App 的ui设计,从信息架构、配色策略、移动端适配到数据叙事的视觉表达,逐一解析其背后的设计决策。
一、项目基础概述
1.1 项目背景与核心用户痛点
本项目是一站式线上医生预约诊疗 App,核心覆盖两类使用人群:有问诊、复诊需求的普通就医用户、多科室私立诊所 / 综合医疗机构运营方。
传统线下就医与老旧医疗预约产品存在多重体验短板:
用户端:挂号流程繁琐,科室查找复杂,医生资质、出诊时间、收费标准信息分散,预约操作步骤冗长;无法直观查看患者真实评价,难以快速匹配适配自身需求的医师;
机构运营端:多科室数据分散,预约、改期、取消流程依赖人工客服,人力成本高,缺少统一的患者管理与线上获客渠道;
界面体验:多数医疗软件色调沉闷、信息堆砌,页面层级混乱,中老年用户操作门槛高,缺乏安全感与专业舒适感。
本产品以「简化全流程预约、透明化医疗信息、轻量化多科室管理」为核心设计思路,从患者就医体验、机构运营效率两大维度解决行业现存痛点。
1.2 项目核心设计目标(以用户真实需求为核心)
降低用户就医操作门槛:科室分类直观,预约链路极简,全年龄段用户均可独立完成挂号;
医疗信息透明化:集中展示医师从业年限、接诊人数、收费、出诊时段、真实患者评价,帮助用户快速决策;
优化机构运营效率:线上自助改期、取消预约,减少客服接待压力,打通多科室统一管理后台;
统一专业温和的视觉体系:医疗向低饱和蓝为主色调,搭建标准化组件库,全页面视觉、操作逻辑连贯,塑造安心可靠的医疗品牌感知。
1.3 完整用户使用闭环
产品覆盖完整就医线上流程:科室快速筛选 / 搜索 → 医师列表浏览对比 → 医师详情资质查看与评价查阅 → 选择就诊日期时段 → 一键完成预约 → 预约单管理、线上改期取消、就诊后评价反馈。
二、全链路用户使用体验拆解
2.1 首页科室筛选页:快速定位就诊需求
页面顶部设置全局搜索框,支持医生、病症、科室关键词检索;下方以统一图标色块分区展示全科室入口,心内科、牙科、妇科、心理科等八大常见科室一目了然,无需多层菜单查找。
下方医师推荐卡片集中展示核心信息:医师姓名、所属医院科室、综合评分、每日出诊时段,底部放置醒目黑色预约按钮,用户无需进入详情页即可快速发起挂号,大幅缩短操作路径。同时支持收藏心仪医师,方便后续复诊快速查找。
2.2 医师详情页:完整透明展示医疗信息
点击医师卡片跳转详情页,分层陈列全部决策所需信息:
基础资质:从业年限、累计接诊患者数量、每小时诊疗费用;
就诊预约模块:下拉选择就诊月份、具体日期,多时段分时选择框清晰区分可预约档期;
患者真实评价板块:拆分接诊沟通、院内环境两大评价维度,星级直观展示医师服务水平。
全部信息分区清晰,主次分明,用户无需反复翻页即可完整了解医师情况,减少决策顾虑。
2.3 预约与订单管理页:自助化降低人工成本
预约成功后生成专属就诊订单卡片,清晰标注就诊医师、时间、地址;支持用户线上自主更改就诊时间、取消预约,全部操作无需联系客服。
订单配套核对清单,区分线上问诊、线下到院诊疗两类服务,就诊前自动留存预约凭证,方便到院核验,同时减少机构前台核对工作量。
2.4 就诊评价页面:完善双向反馈体系
就诊结束后用户可提交多维度星级评价,分别针对医师沟通服务、医院环境两大板块打分,评价数据实时同步至医师主页,为后续患者提供真实参考,同时帮助机构优化服务短板。
三、视觉与组件系统:塑造专业安心的医疗氛围
3.1 色彩视觉体系(适配医疗行业信任感需求)
主色调:干净柔和的深海蓝,医疗行业通用信任色,低饱和度不刺眼,弱化就医焦虑感;
基底色:纯白 + 浅灰页面底色,弱化视觉压迫,长时间浏览无疲劳感;
功能区分色:纯黑色作为主行动按钮(预约、提交),高对比度突出核心操作;浅灰用于次要标签、辅助文字;红色爱心作为收藏标识,轻微点缀提升页面活力。
3.2 标准化可复用组件库
整套 App 统一标准化组件,覆盖科室图标按钮、医师信息卡片、星级评分模块、日期时段选择器、评价表单、底部操作按钮等全部基础元素。
统一组件带来双重用户价值:
患者端:全页面操作样式、交互逻辑一致,老人、新手无需反复学习页面操作;
机构运营 & 迭代端:新增科室、活动页面可直接复用组件,大幅降低开发与设计成本,系统扩展性更强。
四、交互与用户体验核心亮点
需求前置筛选:首页直接展示全科室入口 + 热门医师推荐,用户打开 App 即可完成核心操作,减少跳转层级;
信息分层减法:医师卡片只保留关键决策信息,详细资质、评价收纳至详情页,首页不堆砌冗余文字;
全自助预约管理:支持自主改期、取消预约,减少机构人工客服压力,提升用户自主操作便捷度;
透明化评价体系:多维度星级评价直观展示医师服务水平,消除用户线上挂号信息不对称的顾虑;
极简预约链路:从选科室到完成挂号仅 3 步核心操作,无多余弹窗、表单拦截。
五、项目商业落地价值
提升患者留存与转化:简化挂号流程、信息透明化,降低用户就医决策成本,提升线上预约转化率,为医疗机构拓宽线上获客渠道;
降低机构运营人力成本:线上自助改期、取消、评价全流程自动化,大幅减少客服、前台接待工作量;
打造差异化线上医疗品牌:温和简约专业的视觉风格,区别于市面上杂乱繁杂的医疗 App,塑造安心可靠的品牌形象;
可持续业务增长:模块化系统架构支持后续拓展会员套餐、线上问诊、治疗套餐等增值业务,帮助机构提升长期营收。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

Dorun Dorun 结伴跑步社交 App 全案体验价值解析
北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。今天,我们来深度拆解一套结伴跑步社交 App 的ui设计,从信息架构、配色策略、移动端适配到数据叙事的视觉表达,逐一解析其背后的设计决策。

Dorun Dorun 是一款主打「结伴慢跑、运动社交」的轻量化跑步记录 App,核心服务两类人群:日常慢跑爱好者、想要养成运动习惯却难以独自坚持的普通用户。传统运动类产品普遍存在用户体验短板:
1. 独自运动缺少陪伴与正向激励,用户极易放弃打卡,运动留存率低;
2. 运动页面数据繁杂冰冷,纯数字图表枯燥,缺少情绪共鸣;
3. 社交链路薄弱,无法实时查看好友运动状态,运动分享形式单一;
4. 界面视觉生硬严肃,长时间使用容易产生疲惫感。本项目通过「陪伴式 IP + 实时社交 + 轻量化运动记录」的设计思路,从情绪、功能、视觉三层解决用户坚持运动难、社交互动弱的核心痛点。
1. 降低运动门槛:新手引导清晰易懂,操作步骤极简,零基础用户也能快速上手;
2. 打造陪伴式情绪体验:专属卡通 IP 贯穿全流程,消解独自运动的孤独感,持续给予运动激励;
3. 完善运动社交闭环:实现好友实时位置 / 运动状态查看、运动成果个性化分享、长期运动数据沉淀;
4. 统一全页面视觉语言:搭建标准化组件库,保证从引导页、运动页到个人中心,操作逻辑、视觉感受连贯统一。
产品完整覆盖运动全生命周期:新手引导 →运动前好友状态查看→运动中轨迹实时记录→运动后个性化打卡分享→个人长期运动数据存档,形成完整的“运动—社交—复盘”闭环。
开屏三页引导完全站在用户视角,直白展示三大核心功能:结伴跑步、查看好友实时运动、打卡分享运动日常。页面搭配治愈 IP 形象,文字简短易懂,底部统一行动按钮,无多余信息干扰,用户 3 秒就能明白产品能为自己带来什么,大幅降低新用户认知成本。
运动前页面:社交激励唤醒运动动力
用户进入 App 首页即可实时查看全部好友运动动态:包含好友跑步距离、上次运动时间、在线状态。配套暖心唤醒通知机制:针对 3 天以上未运动的好友推送提醒,通过社交督促激发用户运动意愿,解决 “独自运动没动力” 的核心痛点。页面信息分层清晰:好友动态列表为核心区域,底部放置一键开启跑步的主按钮,用户无需多次跳转就能快速开启运动。
跑步过程页面摒弃繁杂数据堆砌,只保留用户最关心的 4 项核心信息:实时距离、运动时长、配速、步频;搭配彩色渐变地图轨迹,直观展示跑步路线,视觉柔和不刺眼;全程仅保留 “暂停记录”“结束跑步” 两个核心操作按钮,避免多余功能分散用户运动注意力,适配户外跑步单手简易操作的使用场景。
跑步结束后支持两种打卡展示形式:标准轨迹地图、自定义实景照片背景;用户可自由替换背景图,搭配运动数据生成专属运动动态,丰富分享素材,提升用户主动分享至社交平台的意愿。极简一键发布按钮,完整打通 “运动完成 - 分享互动” 的社交链路。
个人主页分为两大模块:打卡相册、月度运动记录清单。打卡相册以日历图文形式留存每一次运动瞬间,月度清单清晰展示每日跑步数据,让用户直观看见长期运动收获,强化坚持运动的成就感,提升用户长期留存。
项目打造专属蓝色软萌球形 IP,覆盖全套情绪表情:开心奔跑、疲惫低落、加油鼓励、心动点赞等,适配 App 全部使用场景。核心设计逻辑:将冰冷的运动数据赋予情绪温度,用户运动时、懈怠时、完成目标时都有对应 IP 形象陪伴,消解独自运动的枯燥感,建立情感联结。IP 统一应用在弹窗、气泡提示、卡片、引导页,品牌记忆点极强。
· 主色调:柔和浅天蓝色,低饱和度不刺眼,适配长时间户外、室内看手机场景,传递轻松治愈的运动氛围;
· 辅助色:浅灰、纯白作为页面基底,深蓝色作为主操作按钮,区分主次操作;
· 状态色:火焰橙、爱心粉、星星浅黄作为情绪点缀色,仅用于 IP、标签小元素,不破坏整体干净清爽的视觉基调。
整套 App 搭建完整可复用 UI 组件库,覆盖按钮、输入框、列表、卡片、弹窗、底部导航、标签气泡等全部基础元素。统一组件带来两大用户优势:
1. 全页面操作逻辑一致,用户切换页面无需重新适应操作方式;
2. 界面整洁统一,无杂乱视觉元素干扰,查找功能、阅读信息效率更高。
1. 实时好友同步机制:无需主动刷新,一键查看好友当前跑步位置与进度,实现“线上结伴跑步” 的陪伴感;
2. 轻量化信息减法:运动页面只保留刚需数据,非必要功能全部收纳至次级页面,适配户外单手操作;
3. 情绪化反馈设计:所有弹窗、通知、结果页面搭配对应 IP 表情,运动完成给予正向鼓励,懈怠时给予温柔提醒;
4. 多形式分享载体:支持地图轨迹、实景照片双模式打卡,满足不同用户的社交分享喜好;
5. 数据可视化沉淀:日历相册 + 月度清单双重形式记录运动成果,直观强化用户运动成就感。
1. 提升用户留存:依靠陪伴 IP + 社交激励双设计手段,解决运动类 App 普遍存在的 “三分钟热度” 流失问题,拉长用户使用周期;
2. 降低用户获客成本:丰富个性化打卡素材,驱动用户自发向外分享传播,实现自然流量裂变;
3. 差异化市场竞争力:市面上多数跑步软件偏向专业硬核数据,本产品主打治愈陪伴社交,精准切入普通休闲慢跑人群空白赛道;
4. 低研发迭代成本:全套标准化组件库,后续新增活动、功能页面可快速复用,降低产品迭代开发成本。
1. 以用户情绪需求为底层逻辑,不止做运动数据工具,更打造陪伴式运动社交空间;
2. 全流程轻量化信息设计,区分运动前 / 中 / 后不同场景的用户操作需求,精准简化页面信息;
3. 专属 IP 贯穿全场景,建立独特品牌情绪记忆点,和同类运动产品形成明显视觉差异化;
标准化组件系统统一全端体验,兼顾用户使用流畅度与产品长期迭代效率。
图片来自Behance

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

最近一直在做GIS监测类的项目,从大气污染到生态资源,从气象预报到城市管网。越做越觉得,GIS监测的设计,真的不只是“画个好看的地图”那么简单。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

在接触和学习 UI 设计的时候,我们都必须面对国内外 UI 设计风格差异巨大的问题。比如最近 618,相信大家没少被国产应用的广告“亲切的”问候。
一方面是寻找设计灵感时要做区分,另一方面则是我们学习 UI 时看的书籍,学习的理论、规范,都是由西方国家产出的,而国内设计的方向却和它们背道而驰,用一个词来形容现状,那就是 —— 割裂。
所以在初学阶段,理论学的越多,受到的冲击也就越大,疑问也就越多。所以我们今天的目标,就是来帮大家解答这个疑问。
当我们研究国内外 UI 设计的差异时,样式上的差异只是表象,它们是由更深层次的因素所激发,所以我们首先要深究这些问题的根源。
根据过去十几年的 UI 研究经验,我总结的设计差异包含下面这些因素:
1. 盈利模式的差异
国外产品相对国内的盈利模式相对简单、健康,排除掉大型平台和其它服务配套应用外(比如会员、硬件的配套),基本就是买断、订阅、广告这三个途径。
比如我们熟悉的 Figma、Canva、Notion 等,都是订阅制服务,在产品具备足够竞争力的条件下发展出海量的付费用户,获得巨大的收益和估值(团队只有一两百人时估值过百亿刀)。既然做好产品就能盈利,那这些产品的目标自然是打造更好的产品和提供更好的服务或体验来获得收益。
而国内市场我们都知道,用户付费的意愿是非常非常低的,这就导致很多产品即使做的还不错也看不到盈利希望,尤其是大厂产品,比如迅雷,百度网盘,网易云等等。
靠基础付费模式做不出让人满意的营收,产品团队自然要使出浑身解数来找到盈利点,不管是增加一些奇怪的功能,还是制造各种营销活动。而这些尝试想要获得持续的盈利是非常困难的,所以就得一直想,一直尝试,一直投放。
虽然吃相往往看上去很难看,但不这么做就会“暴毙”,而这么做至少还可以“苟延残喘”,为了生存和盈利,产品团队做出什么离奇的操作都能做出来。
这里还要澄清一点,有很多优秀的工具产品不是国内做不出来,是做出来也很难盈利,所以有能力的团队和开发者是不会轻易往火坑里跳的。
2. 人工成本的差异
第二点就是国内外人工成本上的巨大差异,发达国家的人工成本非常高昂,不只局限在产品开发团队的成本,还包括底层运营、客服、销售、业务员、快递员等等。
而产品的衍生业务往往要借助大量的底层劳力,比如京东做外卖服务,得有充沛的、廉价的骑手作为依托才办得起来,而这在发达西方国家是难以想象的。比如最近经常讨论的为什么日本线下购物市场还很繁荣,线上发展不起来。主要原因之一就是快递员的成本差了好几倍,做不出即廉价又便捷的网购体验。
加上西方国家对雇佣关系的保护,招人容易,裁员可就没有那么简单,所以多数产品团队对扩张都持非常谨慎的态度。人数少,又不能轻易搞 996,就大大限制了产品作妖的范围,这就直接导致他们没有人力做一大堆次要功能的迭代以及运营活动,设计需求自然也会低很多。
3. 用户习惯的差异
最后一点,就是用户习惯的差异。除了前面说的付费意愿低以外,还有很多其它因素。其中在我看来影响最大的因素,就是国内用户对互联网的依赖是远高于国外用户的。
国内的移动互联网行业爆发并不仅仅是局限在互联网行业里,而是把触手拓展到各行各业,用赢学的角度来讲甚至它还大幅度完善了政府基建和民生服务。我们今天缴纳水电费,办理银行卡通过线上就能完成,而很多发达国家甚至到今天还要你去营业厅手写填表。
并且互联网产品已经成为我们购物、娱乐的重要载体,大量的决策、交易、娱乐是在上面进行的。既然用户习惯和粘性都成型了,离不开这些产品了,那么“适当损害”一下用户体验也不是不可以。尤其是大厂各类离奇的功能和运营活动可以轮番轰炸用户,同时把用户对这类负面操作的耐受度都拉高了。
既然用户都适应了,那么为什么还要“装清高”,做个简约的、有原则的、有尊严的产品?当然是加入到运营的狂欢里和其它产品一起压榨用户的注意力,像孔雀开屏一样,在最鸡肋的器官上比划……
以上三点,就是造成国内外设计差异的根本因素。最早国内产品的设计是和国外看齐的,但随着市场的反馈和验证,我们最终走出了自己的道路。这是商业的选择,而不是简单归因给审美、民族、文化、消费力的限制。
不管创业者抱着什么样的想法,进入这个牌桌以后,最终都会被市场调教成相同的模样。
作为 UI 设计师来说,也不要认为这是错误的发展方向,因为这种模式大大增加了 UI 设计的需求量,间接提供了更多的饭碗。如果产品都按欧美的模式发展和设计,那对于国内 UI 设计行业来说真正的天塌了,设计岗位会锐减 8 成以上,而这是 AI 设计根本实现不了的破坏力。
有了内因,下面再对国内外 UI 设计的具体差异做对应的拆解,帮助大家更好理解国内市场的设计特征。
1. 中英文字形排版差异
第一个差异,就是中英文的字体形态差异。中文文字是方块化等宽的,而英文字母则是大小长短不一,词组长度更长,节奏感更强。所以英文设计中,往往会将字体作为一部分融入到排版中,丰富视觉观感。
而中文设计中文字的节奏感较弱,文本的主要作用基本就是传递信息,所以只用中文排版很难出现英文的相同效果,就会促使设计师添加更多的内容,来丰富界面的效果。
2. 运营需求的平面视觉
第二个差异,就是运营设计上的差异。欧美产品中运营活动不是没有,但是数量少,而且往往在设计上也做的很随意,说好听点叫简约,说难听点就是敷衍。
而国内运营活动数量多,且投入精力更大,运营的设计是没有限制的,可以用上广告平面的所有视觉手段,不管是插画还是 3D、AI、拟物、摄影。大团队往往会配置平面设计师完成这部分工作,小公司就要 UI 设计师自己负责,所以没有固定的设计要求,水平之间差距也巨大。
运营设计的差异,源自国内广告设计方向的特色,从早年追求隐喻、创意的合成设计,到现在追求视觉冲击力的大标题、大色块设计。
而国内运营设计在今天绝不只出现在一般广告位中,会见缝插针到所有元素中,比如页面顶部、二楼、胶囊、图标区、瓷片区、底部导航等等。
3. 字段和信息数量差异
国内有大量产品的功能和服务都更完善,这也就催生了更多的信息量和交互需求,单一页面、组件的信息量、交互、状态就远远比国外产品多。
这就导致我们在设计时要考虑这些复杂的情况,需要设计师做具体的业务分析整理字段,还需要做大量的稿件做测试和评审。
不像国外很多简单的产品内容就那么点,可以花大量精力去搞用研或者测试,在这种情况下光是完成产品需求就很困难,更遑论围绕那么海量的内容做用研也是很麻烦的。
所以国内团队虽然会强调体验,但实际设计过程中必然业务优先,体验更多是围绕业务的优化和改进。所以作品集表现上业务的权重是非常高的,绝对不是学习国外的项目包装逻辑堆砌体验和用研内容。
4. 品牌视觉特征的差异
在国内激烈的竞争环境中,建立品牌化的视觉感知就是每个产品都要认真对待的事情。但本身产品内容、信息量就已经很大了,要实现品牌化的视觉输出就没办法走传统品牌的“意识流”路线,使用简单的配色和大量的留白。
同时,UI 的组件样式又高度统一,使用常规样式完成的设计是很难塑造品牌化视觉的。所以最终的解决方案,就是给组件增加更多样式细节,通过局部的创意来塑造视觉上的差异,同时再和其它应用做出区分。
于是,主流产品就陷入这种样式上的竞赛,非常高频的更新组件和视觉的设计,希望做出和别人不同的设计同时又有自己的特点。
这种现状不能说是消极的,因为它确实推动了整个 UI 行业视觉的发展,但对 UI 设计师的视觉素养要求也就更高。所以今天国内的中高级 UI 设计师,转入国外 UI 市场以后都能实现降维打击,就是因为市场的要求对自身的磨练远比外部市场高。
基于以上的差异,可以说在国内做 UI 和和在国外做 UI 是两种难度,要学习和训练的方式也完全不同。作为 UI 设计师要懂得理解背后的成因,并不会无脑迷信国外的设计要求和标准,才可以帮助我们更好融入真实的工作。
结尾再说点有趣的问题,从我们之前学员到国外工作的反馈来看,虽然国内设计容易被嫌弃,但是从设计质量和输出上已经远超欧美的平均水平。
而他们的设计师多数还在划水搞一些无关痛痒的体验和用研时,我们在解决更复杂的商业问题,如果有机会,建议你们也可以去卷国外的 UI,会有你们想象不到的优势。
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

当 Toast 内图标、装饰元素较多时,画面容易杂乱松散。可以在主体元素后方增加专属背板,既能收拢零散元素、强化整体感,还能快速增加视觉层次。 搭配装饰图形时可巧用视觉对比:若主体元素线条圆润,可选用棱角分明的爆炸图形、几何图形做搭配,软硬结合让画面更有看点。在此基础上,还能继续叠加细节:添加卡片纹理、细线条装饰,进一步打磨精致度。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

近期完成了一个颇具成就感的项目——青海师范大学大气污染可视化系统的界面视觉设计与交互设计。
项目背景:
该系统由青海师范大学委托进行重点页改版,旨在参加环保信息化领域的比赛。原系统界面功能区划分明确,但数据堆叠较为拥挤,视觉比重失衡,信息层级模糊,导致用户难以快速聚焦核心内容。
设计策略与优化:
1、风格定位:采用科技感设计语言,以深蓝为基底,通过背景图案增强纵深感,辅以科技感边框与线条点缀,在丰富页面层次的同时突出关键数据。
2、信息重构:面对庞杂数据,去粗取精,提炼核心内容。通过文字颜色、粗细及高亮处理的差异化运用,强化主次层级,使用户能够以直观的方式获取信息,有效降低理解难度。
3、视觉优化:以清晰图表替代文字堆砌,适度留白营造呼吸感。关键数据浮于场景之上,形成空间层次,在有扩展性的同时提升阅读体验。
4、场景落地:完成全国页面及山西省临汾市专题页的精细化设计,涵盖治理事件、效果分析及污染浓度趋势等核心模块。
一点感悟:
大屏设计的核心难点从来不是炫技,而是将复杂数据转化为清晰易懂的信息。界面之美,在于让用户"一眼就懂"。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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