首页

兰亭妙微ui设计公司分享:海量股票数据如何清晰呈现?百度金融从搜索页到官网的系统化 UI 升级复盘

清阳 交互设计及用户体验

前言

兰亭妙微ui设计公司分享:随着理财、投资用户群体愈发年轻化、多元化,证券类产品早已跳出单一交易工具的定位,逐步进化为融合数据研判、投资策略、情绪陪伴的一站式金融服务平台。
 
当下用户更自主、理性,对平台提出双重核心诉求:既要信息直观可信、操作高效顺滑,也需要整套统一的设计语言建立专业认知,从而沉淀对平台的信任感与情感认同。
为适配行业变革与用户需求升级,百度 MEUX 设计团队以百度搜索金融结果页、百度股市通官网两大核心阵地为载体,完成从搜索卡片到落地官网的全链路体验重构。我们系统性梳理金融垂类用户行为与产品底层逻辑,依托统一设计体系、标准化响应式策略完成体验革新,全面强化百度金融多终端、多场景下的专业表达,提升用户信赖度。

一、现状诊断:高密度金融页面四大核心痛点

项目初期,团队以 PC 端百度股票搜索结果页为核心样本,从页面结构、交互链路双维度深度走查,归纳出高密度数据场景共通的四大体验短板:
  1. 信息组织无序,获取效率低下

    image.png

     
    金融数据维度繁杂、体量巨大,页面结构松散、信息颗粒度模糊,缺少分层引导框架,用户抓取核心行情、财报等关键信息成本极高。
  2. 内容密度失衡,阅读体验疲劳
     
    全页面信息平铺排布,视觉节奏无起伏,长时间浏览易产生视觉倦怠,大幅降低用户深度探索、主动查阅更多内容的意愿。
  3. 模块割裂形成信息孤岛
     
    行情、公司资料、走势图表、财务数据各区块相互独立,缺少逻辑串联,用户无法快速搭建完整个股认知体系。
  4. 视觉体系老旧,专业感知薄弱
     
    页面层级区分模糊,核心数据缺少视觉权重,整体视觉风格滞后于主流金融产品,难以传递平台权威、专业的品牌形象。

二、三大优化策略:系统性升级高密度数据体验image.png

针对现存痛点,我们确立三层递进式设计目标,从信息承载、数据聚合、视觉表达同步落地优化:
  1. 提效信息流转:搭建条理清晰、高容纳度的标准化内容框架
  2. 聚合多维数据:打造层级分明、逻辑连贯的数据呈现体系
  3. 重塑视觉感知:构建克制、专业、沉浸式的金融视觉语言

1. 重构页面内容框架,放大大屏信息承载效率

image.png

依托 PC 端大屏展示优势,我们摒弃传统单列流式布局,改造页面头部,打造聚合式数据总览看板,强化页面一体感与浏览连贯性。
 
针对旧版页面权重模糊、重点数据埋没的问题,对个股核心指标做前置聚合:股票名称、交易代码、所属市场、实时报价、涨跌幅、汇率等关键数据集中放在首屏顶部,用户打开页面即可快速完成基础行情判断,大幅缩短决策路径。

2. 引入 Bento 便当式布局,打造高聚合结构化浏览体系

 

股票数据具备强逻辑、高维度、高密度的特性,原有零散分块布局会割裂用户认知。本次改版引入Bento(便当式)模块化设计,将海量信息按业务主题拆分、规整为独立区块,如同便当盒分区收纳食材一般,清晰划分信息类别,强化页面视觉层次。

① 信息结构化,降低认知负荷image.png

以百度股票 PC 搜索结果页为例,我们将分时行情、K 线走势、企业基本面、财务指标等信息分类收纳至独立 Bento 模块。规整的分区结构梳理清数据内在逻辑,用户能快速定位所需板块,数据识别与页面浏览流畅度同步提升。

② 轻量化递进交互

image.png

模块默认展示核心精简信息,满足快速浅浏览需求;同时适配 PC 端 hover 悬浮交互,鼠标移入即可展开完整详情,兼顾高效速读与深度查阅两种用户行为,平衡信息密度与交互便捷性。

3. 迭代金融专属视觉体系,夯实专业信任感知

image.png

旧版页面视觉噪点冗余、层级区分弱,我们从色彩、图表、文本、微动效全维度优化,打造干净克制、适配金融场景的视觉系统,减少视觉干扰,强化专业氛围感。

色彩体系:克制沉稳,优化涨跌色感知

金融用户对红、绿涨跌色敏感度极高,我们调整红绿配色饱和度与明度,弱化刺眼高饱和色调,整体页面基底偏向低饱和中性灰,营造稳定、严谨的视觉氛围,从色彩层面传递平台权威可靠的气质。

趋势图表可视化升级

image.png

旧版走势图仅单一蓝色,涨跌趋势辨识度不足。新版以开盘价为中间基准线,采用红 / 灰 / 绿三色渐变区分上涨、平盘、下跌区间,走势幅度通过渐变深浅直观体现,用户一眼即可捕捉股价波动趋势与强弱变化。

文本与阅读节奏优化

从基础视觉规范入手全方位降低用户阅读负担:
  1. 字号、行距分级管控:收缩冗余大号字体,建立清晰字号层级,增加段落留白与模块间距,提升长篇财报、资讯文本可读性;
  2. 色彩降噪管控:非核心辅助信息统一使用灰度展示,大面积留白制造视觉呼吸感,视线自然聚焦价格、涨跌幅等核心数据;
  3. 轻量化动态引导:图表加载过渡、模块 hover 高亮等细微动效,辅助用户识别层级切换,赋予静态数据页面柔和节奏感。

    image.png

整套视觉策略协同生效后,页面阅读舒适度、信息聚焦度显著提升,用户浏览海量数据时更专注、不易疲惫。

三、体验全域延伸:百度股市通官网全站系统性优化

搜索结果页改版上线后,页面停留时长、点击深度、全页浏览量等核心数据均实现正向增长,用户对页面专业度、信息读取效率反馈良好。基于 PC 搜索页成熟的设计方法论,我们将整套优化思路延伸至百度股市通(百度金融官网)全站,对标行业头部金融平台,围绕内容展示效率、多端响应适配两大方向完成沉浸式体验升级。

1. 页面结构彻底重构

image.png

百度股市通旧版采用固定宽度灰底卡片布局,既浪费大屏可视空间,模块层级冗余繁杂,数据展示严重受限。参考行业主流通栏沉浸式设计方案,我们彻底重构全站骨架,取消固定窄容器,释放横向展示空间,强化页面整体连贯性,多维数据并行展示,信息获取效率大幅提升。
同时新增个股聚合概览页,复用搜索结果页的数据看板思路,单页面整合一支股票全部核心维度信息,实现从 “分散跳转查找” 到 “一站式集中洞察” 的体验跃迁。image.png

2. 标准化响应式设计,实现多端体验统一

 

大屏设备普及背景下,一套设计适配 PC、平板、窄屏浏览器等多终端,是体验一致性的核心基础。我们搭建统一栅格响应式规则,打通设计规范与前端开发落地标准,实现一次设计、全终端自适应。
 
落地过程中归纳拉伸、等比缩放、横向扩展、固定尺寸、分栏堆叠五类适配逻辑,覆盖页面 80%-90% 常规模块;剩余特殊场景持续迭代差异化适配方案,预留长期优化空间。

平板端适配逻辑

image.png

以平板设备为例:PC 端横向双栏排布的图表、公司资料模块,在平板屏幕压缩后自动垂直堆叠;图表横向等比压缩并保留全部关键指标,保障数据完整可读。同时针对平板无 hover 交互的特性,增加点击展开详情的交互入口,补齐操作短板。

宽窄屏差异化布局

针对超宽屏、窄浏览器窗口两种极端场景,基于栅格设置多组适配断点,为每个核心模块定义宽度规则与信息展示优先级:
  • 超宽大屏:自动切换三栏并行布局,充分利用横向空间,提升单次浏览的数据承载量;
  • 窄屏窗口:收敛为单列垂直视图,仅保留核心行情数据,次要板块自动折叠收起,避免关键信息被繁杂内容淹没。
     
    标准化响应式体系不仅保证跨设备体验连贯统一,也为后续新增业务模块预留充足拓展弹性。

总结与未来展望

image.png

新版百度金融搜索结果页、百度股市通官网同步上线后,页面停留、浏览深度、交互点击等核心数据全面向好。设计改造成功引导用户行为转变:从单纯 “查看股价”,转向主动深挖走势、财务、企业基本面等多维数据,充分验证了这套高密度数据设计体系的落地价值,也为同类复杂数据产品提供可复用的实践思路。
本次改版不只是表层视觉、页面布局美化,更是对金融产品信息表达逻辑、用户认知路径的深度重塑。我们以设计驱动业务体验升级,在专业严谨的行业属性与流畅易用的用户体验之间找到平衡,探索适配金融垂类的界面、交互新模式。
后续团队将持续跟进用户真实反馈,迭代视觉规范、交互细节,不断打磨清晰、可信、易用的一站式金融数据服务体验。
 

转载:优设

 

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

 

image.png

 

兰亭妙微ui设计公司分享:AI产品交互设计自查:5大模块+6个信任开关,缺一不可

清阳 设计资源

兰亭妙微ui设计公司分享:最近把手机里所有带AI助手的APP都试了一遍,包括支付宝的蚂小财、蚁小保,滴滴打车助手小滴,招商银行的AI理财顾问、飞猪千问定车票等等。

各赛道都在抢着把AI能力塞进自己的产品。

试完之后的感受挺微妙的,大部分AI助手就用过一两次就不再打开了。

坦率的讲,不是这些AI不够聪明。底层模型的能力虽然有差距,但回答问题的水平都已经在可用线以上了。真正拉开差距的是交互设计,就是用户打开你的AI助手之后,整个体验是怎么串起来的。

AI产品的交互设计跟传统APP完全不同。传统交互设计解决的是怎么操作,AI交互设计要解决的是怎么表达意图和怎么建立信任。

行业里目前有两套被广泛引用的设计框架,一套解决前者,一套解决后者。

所以无论是产品经理还是设计师,都应该先掌握AI产品的设计特性,然后针对性的进行自己内部产品的AI升级,而不是看着大家都整小助手,就赶忙上线一个小助手,但用起来根本啥也不是。

你的AI助手能力如何,用户感受如何,下面通过五大领域+六大模式来自查下你的助手吧~

一、五大领域:AI交互的完整模块

这套框架来自Smashing Magazine 的 AI 界面设计研究,把AI交互拆分成五个功能模块,下面来简单说明一下。

1. Input UX — 表达意图

用户怎么把想法传达给AI。这是AI交互的第一步,也是最难的步骤,因为用户的意图往往是模糊的,且需求的来源本身就是把多样。

核心设计要点:提供多种表达通道,如文字输入、语音输入、拍照识别、视频对话等,让用户自己选择使用最顺手的方式。

比如支付宝/豆包等:语音+图片+文本多模态输入,用户可以直接拍一张图问这是什么,不用打字描述,降低了表达门槛。

2. Output UX — 展示结果

用户把想法告诉AI了,接下来就是AI怎么把结果交出来,AI生成的结果怎么呈现。不同于传统APP的固定页面,AI的输出是动态的、多维度的,是将最佳可读性的结果呈现给用户。

核心设计要点:结果展示必须可读、可比较、可评估。用户第一眼要能判断靠不靠谱。

比如在设计的时候不要长短大论的文字给到客户,一定是结构化,图文并行的给到客户,比如千问、可灵从开始大大篇报告逐渐给出结构化输出。

AI回答自动拆分为大纲、要点、表格、各种曲线图折线图等多种形式,用户不用自己从一大段文字里提取信息。

3. Refinement UX — 微调输出

AI给的初始结果通常是80分,用户需要微调到95分。这是体验的关键分水岭。

核心设计要点:微调必须即时反馈、所见即所得。操作粒度合适,优先用预设降低决策成本。

4. AI Actions — 执行任务

AI从给建议升级为替你做。帮你看是一回事,帮你操作是另一回事,信任门槛完全不同。

核心设计要点:执行类操作必须配上确认机制,让用户随时能看到AI将要做什么。

比如AI在工作时,都会告诉你他正在干什么执行到哪一步了,让用户放心,帮你办理业务时,或者在帮你打车时,一定是将执行前的确认交给用户。

5. AI Integration — 场景融合

AI能力嵌入到用户已有的工具和工作流中,而不是让用户跳到另一个APP去用AI。

核心设计要点:AI的出现时机和位置必须自然,与已有工具的数据和操作必须打通。

比如你用千问集成了各类的能力,不用点外卖去闪购、买票去飞猪,只需要在千问你告诉他帮我下单即可,这样用户对AI助手的依赖就会增强,不会再去点击传统的入口。

以上框架讲的五个功能模块。你可以理解为,一个完整的AI助手,这五个模块的设计都得到位。少了任何一个,体验就会在那个环节断掉。

但这还不够。

你把功能模块都设计好了,用户凭什么相信你的AI?凭什么让AI替自己做事?

这就是第二套框架要解决的问题。

二、六个设计模式:让用户信任AI的六个设计开关

我自己的观察是,大部分AI助手在信任这块做得都比较粗。要么就是什么都不解释直接给你结果,要么就是一股脑把操作都做了也不提前说一声。用户用着用着就慌了,不知道AI在干什么、为什么这么干、干错了、怎么办。

做得好的AI助手是怎么处理信任的呢,主要关注六个设计模式。

六个模式的核心让用户信任AI的六个设计开关,把控制权交还给用户。AI可以执行,但用户必须能预览、能确认、能理解、能质疑、能撤回、能干预。

这套框架来自行业智能体UX模式研究,专门解决一个问题——当AI替用户做事时,怎么让用户信任它、控制它、纠正它。

1. Intent Preview — 意图预览

  • AI执行前先展示行动计划,用户确认后才动手。设计目标:接受率 > 85%。

比如,小滴我告诉他帮我叫一辆回家的车,他会实时展示他当前思考进度,然后跑完结果后给出我确认的地址和时间,然后在帮我匹配对应的车辆,这样用户对他的行为一目了然;

还有一些操作更类B端工具,如Claude Code 每次任务之前会先列一个清单,要澄清哪些需求,改动哪些文件、每个文件改什么内容,你确认了它才开始,完全放心的交给AI。

2. Autonomy Dial — 自主度旋钮

  • 让用户调节AI的自主程度,渐进释放。四级模式:只给建议、计划确认、确认后执行、自主执行。

基础C端客户层面,可释放给用户可选择的模式,如基础快速和深度思考、如一个功能独立的快捷入口和分步的引导入口,便于用户自主灵活的选择;对于B端的工具,在辅助自我工作上,可以更灵活的调整AI介入的程度,更好的AI为我所用。

3. Explainable Rationale — 可解释性

一是AI做完后告诉用户为什么,展示AI思考的链路;

二是其中变量的解释,如通过上下文的解释,或者持续的告知和引导;

三是自我批判解释,需帮助用户评估其可靠性,如自我批判(如“此信号可能因某某因素而被夸大”),或提供其他角度的回答,来引导用户自主做出判断。

特别是一些资金基金财富保险类的助手,其严谨性和解释性要更加明确。

4. Confidence Signal — 置信度信号

AI不确定时老实告诉用户,核心原则:不确定性必须可见,不能藏在看似自信的输出背后。

当用户问到具体办理或查询的事件时,遇到不确定的问题直接说我不太确定,这个信息我无法验证,不会编造答案。

还有就是使用简单、可见的指标,如百分比或低/中/高等级,来标示结果的置信度。

对于文本内容,可以在视觉上高亮不确定的部分。

5. Action Audit & Undo — 审计与撤销

完整操作记录+ 一键撤销。设计目标:撤销率 < 5%。

支持用户查看以往的对话记录,让用户的记录有迹可循,可追溯之前的咨询信息;

6. Escalation Pathway — 升级路径

AI不确定时主动求助用户。设计目标:恢复成功率 > 90%。

三、下一步:实际落地

回到开头那个问题,大部分AI助手为什么做得不到位?

因为它们要么缺模块,五个功能模块没有全覆盖,用户在某个环节卡住了就放弃了;要么缺信任,六个信任模式没有做到位,用户不敢让AI做重要的事,要么两个都缺。

拿到一个AI助手的设计需求,怎么落地呢,三步走。就像机长在起飞前会严格的自查所有系统是否准备齐全,才会起飞,必要的限制,是对产品和用户负责。

第一步,拿五大领域当模块地图过一遍。你的AI助手在表达意图、展示结果、微调输出、执行任务、场景融合这五个环节,每个环节的交互形态想清楚了吗?有没有哪个环节是缺失的?

第二步,拿六大模式当信任自查清单过一遍。坦率的讲,意图预览和撤销是最低要求,几乎所有涉及AI执行的功能都应该配上。自主度和可解释性根据功能复杂度决定。置信度信号和升级路径在信息不确定的场景下必须具备。

第三步,把缺失的补上。不是每个功能都要六个模式全覆盖,但每一个被省掉的模式都应该有明确的理由,而不是没想到。

所以在设计时,传统产品,产品/设计的产出是一套界面操作流程。AI产品,产出是一套行为规则,AI在什么时机、以什么方式、展现什么信息、留给用户什么控制权。这些东西才是负责AI项目的人真正要决定的事情。

 

转载:人人都是产品经理

 

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

 

image.png

兰亭妙微ui设计公司分享:自然交流设计-多模态交互·上篇

清阳 设计资源

兰亭妙微ui设计公司分享:继上一篇我们提出了 HAI 交互设计法,并通过「深度理解」锚定了人性不变的需求后。本次,我们将视角转向技术演进所带来的交互变革,以「自然交流」的设计顺应技术之变。

AI 从大语言模型向多模态模型、乃至世界模型演进,其本质是理解能力的维度扩展:从符号语义解析,延伸至物理情境理解。这一质变使机器能够真正读懂人的意图、感知当下情境,为人机交互从“人适应机器”转向“机器适应人”奠定了基础。

在此趋势下,人机互动从屏幕走向空间,从单一通道走向多模态自然协同。面对这一变化,本文回归人类原生交流规律,系统构建多模态交互设计体系,通过分析其特征、类型与方法,为 HAI 时代的人机交互提供思考框架与理论参照。

01 AI 正重塑人类与设备互动的方式

从平面到空间

从纸张文字、电话语音到移动互联网的影像,每一次媒介形态的跃迁,都深刻重塑着我们理解世界的维度与感知的边界。

而今,在 AI、空间计算与 XR 等前沿技术的融合推动下,数字世界与物理世界的边界正逐步消融。虚实融合不再仅是愿景,而是正在成为新一代信息社会的底层体验范式。这一趋势不仅深刻变革着人类获取信息与沟通交互的方式,更驱动数字智能本身持续进化——它正突破虚拟的边界,向可感知、可交互、乃至可栖居的具身化智能方向演进

从单模态到多模态

从平面到空间的演进,也标志着交互范式本身的重构。过去数十年间,人机交互始终被禁锢于二维屏幕之内,依赖于键盘、鼠标、触控等单一模态的输入方式。而未来,随着智能传感、空间计算与多模态 AI 的成熟,交互将快速跨越屏幕的边界,迈向三维空间与自然融合的多模态交互方向

02 多模态交互的概念

多模态是人类与世界的原生语言

人类以多模态的方式互动,世界以多模态的结构呈现。人类所创造的多模态技术,正是根植于这一双重现实为基础而发展。

生物学层面上,多模态互动(Multimodal Interaction)是一个完整的“传递‑接收”循环:指人体通过多种运动/效应通道(Motor/Effector Channels)传递信息,并通过多种感官通道(Sensory Channels)接收信息。正如人类在交流中同时扮演“表达者”与“倾听者”。

多模态交互正是这一生物机制的数字化延伸,它融合多种“表达”与“感知”方式,使人机互动不断逼近人际交流的自然体验。

多模态交互:指人类利用多种表达通道(如肢体、声音语言、眼神)和感知通道(如听觉、视觉、触觉)与计算机系统进行通信的过程。

—— 本·施奈德曼(Ben Shneiderman)

多模态交互首次在1979年麻省理工理查德·A·博尔特(Richard A. Bolt)撰写“Put-that-there: voice and gesture at the graphics interface”(将语音和手势结合)。

综上所述,人类通过“多通道输入”传递意图,系统通过“多通道反馈”回应结果让人类感知,从而形成一个实时、连贯的交互闭环。因此,多模态交互的本质并非模态的简单叠加,而是构建一个以人为中心的对话循环。

为深入剖析这一循环,本文将分两篇展开系统性阐述:上篇聚焦多模态输入(人类如何表达),下篇探讨多模态反馈(系统如何回应)。

03 多模态输入

多模态输入的类型

前文中所提到的多模态表达是从生物学角度切入,指人体通过多种运动/效应通道(Motor/Effector Channels)传递信息。

而多模态输入根据用户参与程度又可分为两类:显性输入与隐性输入。

  1. 显性输入(Explicit Input):指用户有意识主动的交互行为,如接触(触摸、握持)、声音、视线、表情及空间动作等行为能力。这类行为直接承载用户意图,是当前人机交互的主要方式。
  2. 隐性输入(Implicit Input):指用户无需主动表达的信号、由系统自动感知,如生理状态、注意力水平等,主要用于辅助理解用户状态与环境上下文。

随着 AI 理解能力的深化,系统正逐步融合显性与隐性信号。但当前交互设计的核心仍是优化显性输入——它是用户意图最直接的出口。下文将围绕这一焦点,阐述基于主动表达的多模态输入设计方法。

多模态输入的设计方法

设计多模态输入前,采用系统化的分析框架,基于人机交互领域中的 “意图‑行为‑情境”分析思路,将动机、体验与变化纳入考量。对应的是 设计动机(Why)→设计体验(How)→适应变化(What if) 该框架依次引导设计者回应以下三个核心问题:

  1. 设计动机:单模态是否满足,多模态输入优势是什么?
  2. 设计体验:多模态输入是否自然协调?
  3. 适应变化:使用情境是否多变,应如何动态适应?

后续,将依此三阶段展开说明:

1. 设计动机:单模态是否满足,多模态输入优势是什么?

【动机:多模态的必要性】

我们想象一个日常沟通场景:“与熟人对话时,我们通常会简洁地表述,乃至含糊省略;而与陌生人对话时,则会表述得更明确,更丰富”。其实这揭示了一个本能倾向,人在确保意图能被准确传递的前提下,会倾向使用最“经济”的表达方式。

这正是关于多模态输入的必要性思考,其核心是遵循 “奥卡姆剃刀”原则:如无必要,勿增实体。若单一模态已能轻松、准确的完成任务,就无需引入更多模态。

因此,判断多模态输入的必要性,首先需要审视单模态是否存在阻碍或瓶颈。多模态设计的价值必须明确,关键在于创造增量体验,而非简单叠加,其必要性可从提升“效率、准确、流畅”三个维度进行审视与评估。

1)效率性(简化复杂任务):该任务是否因操作逻辑复杂,导致单模态表达低效甚至无法完成?

说明:在传统汽车HMI中调节后视镜需依循界面,多步骤操作。智能座舱则允许用户看向目标后视镜+手部操作,将多步操作融合为一步自然动作,实现“所见即所控”。

2)准确性(提升意图准确性):单模态输入是否容易产生歧义或错误,需要其他通道进行确认或补充?

说明:支付等高安全性操作,若仅依赖单一验证,仍存在误识风险。结合人脸识别与按压指纹验证,可大幅提升交易可信度。

3)流畅性(增强输入流畅性):判断当前交互流程是否存在明显的操作断点,是否可通过多模态实现更流畅连续的交互?

说明:键盘打字虽成熟可靠,但行走移动时仍会打断输入,而“长按语音输入、松开转文字”则允许用户在不中断当前活动的情况下持续输入。

综上所述,多模态的必要性,取决于它能否提升单模态在效率、准确或流畅性上的增量体验?若能,则引入具备明确价值;若不能,则应力求简洁,避免过度设计。应始终基于用户是否需要,而非技术是否能够。

2. 体验设计:多模态输入是否自然协调?

【动机:多模态的协调性】

构建自然协调的多模态输入体验,这要求设计兼顾人体的共性规律与个体的差异偏好。

在共性层面,须符合人体行为的客观规律,确保模态资源得到合理编排,否则会引发冲突与疲劳。

在差异层面,须贴合个体不同的偏好方式,使模态方式是契合个人偏好,否则会显得僵化且笨拙。

因此,协调性的实现,具体落实在这两项的设计任务上:

模态的资源合理编排(共性)

克里斯托弗·威肯斯(Christopher Wickens)的多重资源理论(MRT)为此提供了核心依据:人类的认知与动作资源并非单一整体,而是分布于多个相对独立的“资源池”。用以解释为什么有些任务更容易同时完成(例如边走路边嚼口香糖),而另一些任务则难得多(例如边说话边用眼阅读)。

威肯斯多元资源理论模型图形,方块表述人类的不同资源池,由HFE Solutions的KT Smith绘制。

基于此理论,合理编排的目标在于实现动作资源有效分配,让交互感觉轻松、自然。我们可从表达资源的数量、难度、重叠使用这三个设计要点上:

1)模态组合数量:模态越多(1→N),需调用的资源池越多,协调难度与消耗越大。

说明:调用的资源数量增多,也会造成相互之间的配合难度上升,非特殊情况,尽量克制在 2-3 种内。

2)模态行为难度:输入动作精度要求越高(模糊→精细),资源消耗会增大。

说明:一个需要高精度定位的“精细手势”远比一个自然的“挥手”消耗更多资源,设计应遵循最小努力原则,将高频、连续操作分配给低难度模态。

3)模态调用重叠资源:若多个模态竞争同一资源池(如同时进行两项触控任务),会产生干扰。

说明:如要求用户同时执行“触摸打字”和“触摸控制”两项任务,会较难完成,应优先选择资源互补的模态。

因此,设计中,不应只考虑提供尽可能多的输入方式。而是需要思考,将用户有限的资源,配置在最值得、最不费力、且互不冲突的地方,从而降低用户负担。这一理念落实到具体的行为动作设计上,体现为上述的三项设计准则,对此做个小结:

数量克制,组合控制在 2-3 种模态内;难度适配,最大程度降低高频操作的动作精度;资源互补,优先组合调用不同通道的模态(如“语音+视线”),避免竞争同一资源池(如多重触控)。

模态的方式贴合个人(差异)

合理的模态资源编排建立了客观、普适的效率基线。而真正的自然协调还需根据个体差异进行适配,需兼容具有不同生理条件、文化背景与行为习惯的用户,因为并不存在“标准人”,故设计必须尊重用户的“多样性”

1)贴合个人生理特征:用户的生理能力存在客观差异,设计应提供合适且具有包容性的交互通道。

说明:如儿童手部能力尚在发育,面向该群体的智能手表普遍采用更大的热区,并多采用长按的操作方式,避免精细点按。

2)贴合个人文化习俗:同一行为在不同文化中可能语义迥异,设计应契合文化特征并避免歧义。

说明:以“OK”手势为例,在中国表示认可,在土耳其、希腊等地则具有侮辱性含义。系统需识别此类文化差异,确保交互意图准确传达。

3)贴合个人习惯偏好:不同用户的使用习惯存在显著差异,设计应支持个性化配置并主动适配差异。

说明:如 Apple Pencil 在设计时,便兼顾了惯用左右手的两类用户不同的持笔握姿与手掌落点,为不同习惯的用户提供一致的顺滑书写体验。

某种多模态组合,对一个人来说是直觉,对另一个人来说却可能成为障碍。因此,模态方式的“贴合个人”,是让模态主动适配不同用户的生理条件、文化习俗与习惯偏好,为每个人提供最自然、最有效的表达路径。

最后,为多模态输入协调性做一小结,其构建路径可概括为 “模态的资源合理编排 → 模态的方式贴合个人” 。前者建立普适的效率基线,解决“可用性”问题;后者则针对个体差异进行适配,解决“契合性”的问题。二者共同推动交互设计从标准化的效率,走向因人而异的协调。

3. 适应变化:输入的情境是否多变?

【动机:多模态的适应性】

前文中,多模态输入的协调性,是为交互体验建立了相对稳定的静态基础。然而,真实的互动场景始终处于动态流动之中。

想象一个日常情景:从安静书店步入喧闹地铁站时,我们会不自觉地提高音量、增加手势以保持沟通。

人类天生懂得根据环境、状态与任务动态调整“输出”方式。这一本能揭示出人机交互的关键原则:有效的沟通需要根据环境、自身状态和任务状态的变化动态调整输出方式。

基于这一洞察,用户输入应具备“动态适应性”,能主动感知情境变化,智能调度最适宜的输入通道。具体而言,这种适应性体现在三个关键维度:

1)适应环境条件变化:依据环境变化所带来的影响,提供最优输入通道。

说明:如手表进入到游泳模式因物理环境发生改变,会关闭触摸通道,输入通道以物理旋钮与实体按键为主。

2)适应用户状态变化:识别用户实时行为与注意力水平,匹配输入方式。

说明:在驾驶场景中,为减少分神,车机系统会优先推荐语音指令或方向盘上的实体按键输入,而非触控屏幕输入。

3)适应任务状态变化:理解任务不同阶段的核心目标,提供契合的输入支持。

说明:在紧急事件中,系统将跳过复杂操作,直接提供极简交互,如支持挥手、点头等本能输入方式,以最短路径完成关键确认。

有效的沟通,从来不是用固定的方式应对流动的世界。因此,多模态输入的适应性,本质是让系统具备与人类同等的情境应变能力。为不同环境、状态与任务阶段,预判并匹配最适宜的输入通道。如果说协调性中的“资源编排”确立了效率基线、“贴合个人”实现了因人适配,那么“动态适应”则确保了交互在每一次当下发生时的合理性

04 多模态输入:最大程度承接人类的自然表达

至此,我们完成了对多模态输入设计的系统探讨。在基于 AI 推动“机器不断适应人”的背景下,了解交互正从平面走向空间、从单模态走向多模态。能观察到,交互是向着顺应人类本能,契合人类直觉的方向发展。而多模态输入,则对应的是人类的表达本能,其最终目的:最大程度承接人类的自然表达

本文基于人类自然表达的“意图‑行为‑情境”为原型,将其转化为设计思考的 “动机—体验—适应” 框架,系统回应了多模态输入的三个根本问题:

设计动机:为何需要多模态?- 解决效率、准确、流畅的瓶颈;设计体验:如何实现自然协调?- 模态资源合理编排,模态资源贴合个人;适应变化:怎样应对变化?- 动态调度输入通道,适配环境、个人与任务状态;

未来,随着 AI 感知与情境理解能力的进化,多模态交互将超越界面,成为人与世界无缝衔接的交流方式。它以轻量行为承载深远意图,在虚实融合中重新定义交流的边界——表达的极简,源于极致的理解。

 

转载:人人都是产品经理

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

 

image.png

兰亭妙微ui设计公司分享:界面改版 | 如何改版更有效(视觉篇)

清阳 移动端UI设计文章及欣赏

兰亭妙微ui设计公司分享:采用 KET 青绿、PET 暖黄双主色区分学段,优化首屏与功能入口,课程阶梯分层排布,实现用户分层、合规运营与商业化转化提升。
优化要点:
❶ 色彩:KET 青绿、PET 暖黄,区分高低阶用户
❷ 头部:Banner 强调测评引流,提升转化
❸ 功能:金刚区按考纲设词 / 听 / 说 / 写四大入口
❹ 课程:分层排布「免费→低价→中班→VIP」,服务不同阶梯用户
❺ 收益:用户分层清晰、内容合规、提升付费转化

image.png

image.png

image.png

image.png

image.png

image.png

image.png

 

转载:站酷

 

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

 

image.png

兰亭妙微ui设计公司分享:五种视觉差异化创作方法,解决设计同质化与画面平淡问题

清阳 设计资源

兰亭妙微ui设计公司分享:做设计时你是不是也总踩坑:图纸完整、逻辑没问题,可交稿后老板一句 “太平了,不出彩”,瞬间不知道怎么优化?
 
前段时间我就因为作品缺乏记忆点被提点,总监特意整理了一套通用创意手法,图标、IP 吉祥物、平面海报全都适用,吃透这 5 种思路,再也不怕设计同质化。

01 改变比例:打破常规视觉,图标快速出圈

 

这是做图标最省事、出效果最快的技巧。大众早已习惯万物标准比例,稍微调整局部尺寸,就能立刻跳出大众审美。
  • 铅笔造型:拉长笔杆、放大笔尖,弱化常规均衡感;

    image.png

  • 交通工具:轿车拉高车顶、放大车轮;飞机加粗机身、缩短机翼;image.png

    image.png

    很多动画里的趣味载具,本质都是靠夸张比例制造反差。
     
    只要改动局部长宽、大小配比,普通图形马上拥有专属辨识度。

02 元素替换:局部巧置换,兼顾创意与行业属性

相比单纯改尺寸,元素替换更考验巧思:保留物体完整轮廓,只替换局部配件,既要贴合本体形态,又要融入行业符号,做到和谐不违和。
  1. 节庆灯笼:把底部流苏替换成品牌所属品类的叶片;

    image.png

  2. 铃铛图形:内部金属圆珠换成闪电造型,适配科技类视觉;

    image.png

  3. 游戏手柄:功能按键替换成趣味表情符号,增加活泼感。

    image.png

     
    核心逻辑:大轮廓不变,用细节替换传递主题,创意含蓄不突兀。

03 元素组合:跨界拼接,IP 吉祥物核心创作法

和 “局部替换” 区分开:元素组合是把两个完全无关的完整事物融合重构,是吉祥物、卡通形象设计的万能公式。
 
经典组合思路参考:
  • 果蔬 + 动物:番茄 × 猫咪、蘑菇 × 小鸡、大葱 × 小鸡;

    image.png

  • 物品 + 生物:鸵鸟 × 羽毛球。

    image.png

     
    两种载体特征互相保留,拼接后诞生全新形象,既有辨识度又自带趣味故事感,非常适合品牌 IP 创作。

04 形状变化:替换基础轮廓,制造差异化基底

所有物体都有原生基础造型,圆柱、圆形是最常见的基底,把底层几何形态更换,整体气质会完全翻新。
  • 医疗针管:原生圆柱形改为方形管身,硬朗简约,适合医美、医疗器械视觉;

    image.png

  • 被咬过的苹果:常规圆形果身改成三角形基底,小众独特,适合潮流文创图标。

    image.png

     
    不用修改物体结构,仅更换底层几何面,低成本让基础图形摆脱普通感。

05 大小对比:夸张反差,海报强视觉张力利器

主打平面海报、主视觉设计,依靠极致大小对比制造视觉冲击,快速抓住观众视线。
 
原理是刻意放大主体、缩小配角,用尺寸落差制造戏剧感:

image.png

  • 趣味 IP 海报:巨型太阳鸭搭配微小背景场景;
  • 创意警示画面:迷你人物搭配巨型炸弹。
     
    一巨一微的强烈反差,天然形成画面焦点,完美解决海报 “画面平、无重点” 的通病。

 

 

转载:站酷

 

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

 

image.png

兰亭妙微ui设计公司分享:UX 文案设计指南:6 大核心原则,打造易懂好用的界面文案

清阳 行业趋势

兰亭妙微ui设计公司分享:很多产品团队都轻视界面文案,觉得只要无错别字就达标,却忽略了文案是用户与产品交互的核心对话载体。一句模糊的按钮文字,比如笼统的「提交」vs 精准的「确认支付」,都可能直接造成用户犹豫、流失。
不少人会照搬苹果极简文案逻辑,但这套表达完全贴合苹果品牌调性,直接套用在其他产品上往往水土不服。今天系统拆解 UX 文案底层逻辑,教你适配自身产品,写出兼顾易用性与品牌感的界面文字。

一、先搞懂:什么是 UX 文案?

UX 文案(用户体验文案)依附于体验设计而生,核心目标是降低产品操作门槛、统一品牌感知;和传统营销文案有本质区别 —— 后者重在说服转化、推销产品,而 UX 文案只负责让用户和产品的交互顺畅自然。
优质 UX 文案需要融合 5 大核心要素,存在清晰优先级,需由底层向上搭建:

image.png

UX文案四层金字塔模型
 
  1. 用户需求(底层根基):深度读懂用户,所有文案围绕用户诉求展开
  2. 简洁友好的文案:语言通俗直白,降低阅读理解成本
  3. 建立同理心:匹配用户当下情绪,语气贴合使用场景
  4. 一致性管理:全产品术语、语气、格式统一规范
  5. 品牌表达(顶层):传递品牌调性,助力业务目标落地
底层基础没做好,上层再华丽的文字都是空洞无效。好的 UX 文案不靠华丽辞藻堆砌,核心是梳理完整用户交互路径,用文字解决用户痛点。

二、UX 文案创作起点:一切从用户出发

1. 精准回应用户疑问

UX 文案的创作原点从来不是企业想输出什么,而是用户想知道什么。创作时先拆解用户潜在疑问,给出简短、明确的答复。

image.png

最典型场景:系统错误弹窗。只写「发生错误」是完全不合格的提示,完整提示必须覆盖三层信息:
  • 是什么:明确告知出现了哪种故障
  • 为什么:简单说明故障产生的原因
  • 怎么办:给出用户可直接执行的解决办法
核心创作逻辑三句话:读懂用户诉求、只回答当下疑问、表达极简直白。

2. 五步深度吃透你的用户

image.png

对用户画像越清晰,文案越精准。动笔前先理清 5 个关键问题,锁定文案的表达方向:
  1. 用户是谁:锁定受众年龄、职业、产品熟悉程度,划定认知基线
  2. 用户当下情绪:操作时是期待、烦躁、焦虑还是放松,决定文案语气轻重
  3. 用户会有哪些疑问:预判全流程高频困惑点,提前用文案答疑
  4. 用户的常用表达:使用受众日常习惯的词汇,减少认知隔阂
  5. 用户核心目标:用户打开产品想完成什么操作,文案全程服务这个最终目的

三、6 大落地原则,写好专业 UX 文案

原则 1:清晰简洁,杜绝模糊歧义

image.png

动笔前自问两个问题:这条信息用户是否必需?能不能用更短的话讲清楚?
 
冗余修饰、冗长描述都会抬高用户理解成本;模棱两可的话术极易引发用户焦虑、迟疑。
  • 简洁:能少一字就不多一字,压缩无效修饰词
  • 清晰:拒绝模糊指代,精准描述对象、位置、动作
反面案例:「在底部查看」存在双重歧义 —— 用户无法区分是页面底部还是手机屏幕底部;更优表达直接标注「页面底部查看订单」,省去用户反复寻找的成本。

原则 2:高可访问性,适配全人群理解

image.png

规避晦涩行业黑话、专业术语,文案难度贴合大众基础认知。
 
优秀界面文案要做到:老人、新手、视力不佳人群,在任意使用场景下都能快速读懂,不设置理解门槛。专业名词若无法替换,必须附带简短通俗解释。

原则 3:务实有用,提供可落地解决方案

文案要给到用户有效、准确的信息,答非所问会直接消耗用户对产品的信任感。
 
当用户遇到异常场景,不能只告知现状,必须配套可操作指引。

image.png

缺货提示文案优劣对比
 
反面示例(低效):该产品目前缺货,补货后会通知您
 
优化示例(实用):该产品目前缺货,补货后我们将第一时间推送提醒,点击「接收通知」即可订阅
用户的核心诉求是「如何及时买到商品」,优化后的文案直接给出操作按钮,解决用户真实需求。

原则 4:真实坦诚,拒绝诱导套路

UX 文案不能作为套路、裹挟用户的工具。很多产品会利用焦虑话术、模糊按钮引导用户做出非本意操作,大幅损耗产品信任度。

image.png

功能关闭弹窗文案优劣对比
 
反面弹窗陷阱:关闭闹钟提示框,用「您可能错过重要通知」制造焦虑,按钮设置「取消 / 查看」混淆用户判断,用户无法一眼分辨关闭功能的入口。
 
规范正向表达:直白提问「确定要关闭闹钟功能吗?您可能错过重要通知」,按钮区分「取消 / 确定关闭」,操作意图一目了然。
另一类常见诱导文案:「不开启通知会错过全部更新」,刻意制造压迫感;中性友好替代方案:「开启通知可实时接收动态更新,您可按需自主选择」,把选择权交还用户。

原则 5:全域一致性,统一产品语言体系

image.png

一致性是消除用户困惑、顺滑操作体验的关键。若页面间术语、按钮文字、提示风格割裂,用户每次切换页面都要重新学习操作逻辑。
 
统一规范落地细节:
  1. 同一操作全程使用固定名称,比如下单按钮统一叫「提交订单」,不可时而「提交订单」、时而「确认订单」
  2. 弹窗、空状态、报错、按钮的句式、标点、语气保持统一
  3. 专业名词、功能名称建立产品术语库,全团队统一使用

原则 6:贴合品牌,用文字塑造产品性格

UX 文案不只是功能说明,更是传递品牌人格的载体。同一功能,不同定位产品的表达逻辑完全不同。
 
举例:账户异地登录安全提醒
  • 年轻化潮流 APP(亲和口语):注意啦!有陌生设备尝试登录你的账号,非本人操作请立刻修改密码哦
  • 金融专业工具(严谨正式):【账户安全预警】检测到陌生设备登录请求,为保障资金安全,请前往「我的 - 设置 - 账户安全」修改登录密码
文案语气、措辞、句式要和品牌定位匹配,让用户通过文字直观感知产品调性。

文末总结

文案是用户体验的「最后一公里」。即便交互逻辑流畅、视觉设计精美,一旦文案模糊、误导、晦涩,依然会造成用户困惑、操作流失。
做 UX 文案的核心心法:永远把「用户能不能看懂、知不知道下一步该点什么」放在第一位,文字服务操作、表达贴合用户,才能真正发挥文案的体验价值。
 

转载:站酷

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

 

image.png

兰亭妙微ui设计公司分享:AI Chat 产品设计思考③:对话容器(Ctn)—— 人机协同的交付载体

清阳 行业趋势

前言:UI 设计的最高境界,是「无感透明」

兰亭妙微ui设计公司分享:此前和多位大厂资深 UI 设计师探讨:顶级 UI 设计的内核究竟是什么?我们跳出设计师审美视角,回归用户真实体验,最终达成共识:最好的设计是透明无感,如同空气,用户沉浸使用却察觉不到界面本身
举个直观例子:选购口红时,从打开 App 到完成支付,全程操作丝滑无阻滞。事后复盘整个流程,你不会记住界面多精致、动效多华丽,只会觉得所有步骤顺理成章、毫无门槛。
传统移动互联网产品,设计底层逻辑是构建用户路径,以用户地图为载体,核心目标是流量分发、曝光转化;
 
而 AI 智能体(Agent)产品,设计逻辑转向响应用户真实意图,核心价值是提升决策效率、完成深度转化。
进入 AI 时代,「无感体验」被赋予更深一层定义:弱化操作感知,让用户只聚焦最终结果。这不只是视觉层面减少干扰,更是对用户决策成本的全方位降低。
我们可以把 Chatfeed 对话流视作一套全新交互操作系统,本文重点拆解的容器(Container,简称 Ctn),就是这套系统里独立运行的微型应用单元。
 
AI 负责逻辑推演、内容生成,容器承接落地交互与信息交付;缺少标准化容器,大模型输出只会停留在纯文本层面,无法打造高效率、高转化、高信任感的无感交互体验。

一、读懂对话容器:AI 的标准化交付单元

1.1 容器的核心定义

在 Chatfeed 对话体系中,容器是承载 AI 输出信息的标准化 UI 载体,绝非简单的聊天气泡。它是一套可自适应内容类型的交互单元,会根据承载内容 —— 纯文本、图文 / 视频 / 音频多媒体、交互表单、专业数据、商品 SKU 自动切换形态,本质是 AI 面向用户的标准化交付物。
市面上主流 AI 产品的容器分为五大类:文本容器、多媒体容器、基础交互容器、专业输出容器、商业交易容器。

1.1.1 文本容器:结构化文字信息载体

基于 Markdown 语法渲染纯文本内容,专门承载诊断报告、数据分析、长方案建议等大段文字。通过分层排版、视觉权重区分,完成内容结构化梳理,大幅提升文本可读性与专业质感。

image.png

文本容器示例
 

1.1.2 多媒体容器:可视化感知增强单元

承载图片、短视频、音频类素材,用可视化内容补充文字短板:文物图片提供视觉佐证、实操视频做教学演示、语音音频实现情绪安抚,丰富信息传递的感知维度。

image.png

多媒体容器示例(图/视频/音频)
 

1.1.3 基础交互容器:对话内信息收集组件

内嵌于对话流,快速收集用户补充信息、引导下一步操作,通用性与易用性是核心设计目标,降低用户输入门槛。常见形态:选择题单、信息填写表单、快捷引导按钮组。

image.png

基础交互容器示例
 

1.1.4 专业输出容器:复杂能力可视化载体

image.png

用于展示 AI 高阶运算成果,适配代码块、网页预览、3D 模型、数据图表等复杂内容,直观呈现模型专业能力,强化产品专业背书。

1.1.5 商业交易容器:对话转化核心载体

image.png

标准化展示商品 / 服务核心信息,整合实拍图、定价、核心卖点、行动按钮(CTA),是对话场景下完成商业变现、引导下单的核心 UI 单元。

二、容器四大核心设计原则

2.1 一致性:统一底层骨架,差异化视觉皮肤

image.png

所有容器共用一套基础设计规范:统一圆角、留白间距、阴影层级、品牌基础色,构成标准化底层骨架;
 
仅可根据智能体赛道微调视觉皮肤:医疗智能体采用克制理性的蓝白配色,美妆智能体使用高对比时尚色系,但底层交互逻辑、组件规则必须完全统一,避免用户认知割裂。

2.2 高信噪比:降噪分层,0.5 秒抓取核心信息

移动端屏幕空间有限,且大模型易输出冗长冗余内容,容器设计的核心目标是让用户半秒内锁定重点,落地两大核心手段:
  1. 建立清晰视觉分层

    image.png

     
    弱化分割线,优先依靠字号、字重、留白区分信息层级,让关键结论视觉自动突出,无需用户逐字检索;
  2. 强制内容结构化输出

    image.png

     
    杜绝密集大段纯文本,需前端渲染层 + 工程提示词(PE)双向配合,将 AI 输出拆分为独立视觉区块。
结构化设计带来三重收益:
 
① 用户快速定位信息、预判后续操作,大幅降低阅读认知成本;
 
② 约束 AI 过度赘述的问题,精简文本体量,清晰度显著提升;
 
③ 规避智能体人设跑偏、输出逻辑散乱的问题。

特殊场景:数字人智能体反向适配

image.png

常规专业对话需强结构化,但数字人场景需要弱化显性分层,把结构藏在自然话术内。
 
数字人核心价值是建立情感信任、模拟真人沟通,若直接输出条目化文本,会产生强烈机械违和感,削弱用户信任感。
举个对比案例:用户反馈失眠
  • 机械结构化输出(负面):症状:睡眠不足;诱因:压力过载;方案:每日冥想放松
  • 自然共情表达(正面):能感受到你近期身心疲惫,睡眠状态持续变差,大概率是长期压力堆积导致。我给你整理几个当下就能执行的舒缓方法,我们一步步调整。

2.3 行动导向:放大交互可供性,分层设计触发逻辑

image.png

容器的最终价值是驱动用户产生行动,尤其商业化场景;但引导动作不只能依靠独立按钮,核心思路是让内容本身成为交互触发器
 
依据菲茨定律:交互热区面积越大,点击成本越低,操作流畅度越高,因此优先采用全容器区域点击触发。
整套交互流程采用分级触发策略
  1. 浏览、查看类轻操作:全区域热区触发,例如点击完整商品卡片跳转详情;
  2. 支付、删除等不可逆关键操作:保留独立高亮按钮,增加交互摩擦力,强化用户确认感与操作掌控力。

2.4 流式体验:将等待焦虑转化为实时生成感知

大模型内容生成存在天然时延,传统 App 瞬时加载逻辑不适用于 Chatfeed,空白屏幕会放大用户等待负面情绪。行业主流方案是「流式打字输出 + 模板骨架屏」,并根据容器类型分层设计加载策略:

策略 1:未确定容器类型(纯文本 / AI 思考阶段)

image.png

不渲染固定骨架屏,采用流畅打字机动效逐字输出,容器高度平滑动态变化,避免气泡生硬跳动、页面滚动剧烈抖动,让用户感知内容正在实时生成。

策略 2:容器类型固定、生成耗时较长(文生图 / 视频 / 代码)

image.png

提前渲染对应容器的灰色骨架占位,缓冲完成后平滑替换真实内容,消解长时间等待的焦虑感。

特例:商品 SKU 转化场景

若后端数据传输速度足够优化,可直接跳过骨架屏,省去多余 UI 等待步骤,让用户注意力直接聚焦商品卖点与下单入口,最大化对话转化效率,美团小美 AI 推荐已落地该方案。

三、容器落地四大避坑指南

照搬传统 IM 聊天气泡做 AI 对话容器,是绝大多数设计师、产品经理的常见误区。微信、飞书等传统即时通讯,服务于「人与人对话」;AI Chat 是「人与大模型协同」,完全两套底层逻辑,照搬设计会出现排版混乱、信息过载、交互断裂等体验硬伤。

3.1 样式失控:纯文本输出破坏标准化设计系统

image.png

痛点:Figma 中定义完整字号、字重、行高规范,但大模型默认输出无标签纯文本,缺少层级标记,导致重点无加粗、标题无分区、关键数据淹没在大段文字中,界面粗糙廉价。
 
根源:工程层(PE)与前端渲染层脱节,AI 无法识别 UI 设计规范。
完整解决方案:
  1. 工程侧约束:在系统提示词强制要求 AI 输出标准 Markdown 语法,标题用 #标记,核心结论加粗 **,列表有序拆分;
  2. 前端侧映射:搭建专用 Markdown 解析器,将语法标签一对一翻译为设计系统预设组件样式。

3.2 视觉抖动:流式输出造成页面剧烈跳动

image.png

打字机动效虽缓解等待焦虑,但输出表格、代码、长列表等复杂组件时,容器高度无法提前预判,气泡忽大忽小、滚动条持续跳动,造成严重视觉疲劳。
优化方案:
  1. 为容器设置基础最小高度,规避初期小幅跳动;
  2. 前端识别图表、代码、表格等复杂输出类型时,优先渲染骨架占位,内容缓冲至完整模块后再平滑替换。

3.3 长篇信息过载:冗余内容折叠收纳,规避页面跳转

image.png

大模型为保证逻辑完整,常会输出大量推导过程、注释、备用方案,用户仅需最终结论时,冗余内容会形成信息墙;同时合规、可信度要求下,冗余文本又不可直接删减。
解决方案:容器内置折叠 / 展开组件,收纳次要信息;
 
核心设计红线:所有信息延展、次级操作尽量在当前对话流内完成,禁用新页面跳转。Chatfeed 核心是沉浸式信息流,跨页跳转直接打断对话连贯性,割裂用户沉浸感,优先使用折叠面板、非模态弹窗承载延展内容。

3.4 缺失消息编辑能力:忽略 AI 交互「反复调试」核心需求

image.png

传统 IM 发送消息后无法修改,但 AI 交互中,调整提示词、重新生成是高频刚需。若不支持气泡直接编辑,用户只能复制、粘贴、修改、重发,操作链路冗长笨重。
行业两种成熟方案,无绝对优劣,适配不同产品定位:
  1. 单次编辑限制(如灵光):主打专业严谨,限制修改次数,引导用户梳理完整需求后再提问;
  2. 无限制自由编辑(如豆包):主打轻量化高频交互,降低多轮调优的操作成本,提升流畅度。

结语:设计容器,本质是重构全新人机协同关系

AI 对话容器早已不止是好看的 UI 组件,它承载着一套全新的人机交互逻辑 —— 不再是单向信息推送,而是人与大模型联合生成、协同解决问题。
作为设计师与产品从业者,不能只停留在视觉层面绘制组件,必须吃透大模型底层特性:Token 输出限制、Markdown 结构化能力、内容幻觉问题,才能打造出可控、高效、体验顺滑的 AI 对话产品。
 

转载:站酷

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

 

image.png


兰亭妙微ui设计公司分享:从生图到代码落地|打通 AI×UI 全链路标准化工作流

清阳 行业趋势

全文导读

兰亭妙微ui设计公司分享:以往 AI 生成 UI 效果图与可落地设计稿、前端代码之间存在明显断层。本次我们完整跑通一套可复用标准化 SOP:文字需求→AI 草图 / 效果图→Figma 结构化设计稿→AI 自动生成代码→移动端真实预览
 
这套流程能大幅降低页面初稿重复搭建成本,验证设计稿到前端页面的还原精度,覆盖页面结构、组件、交互、多端适配全环节,同时沉淀团队专属提示词、设计规范与验收标准。
 
AI 真正的价值,从来不是一键生成完整 App,而是把设计师的创意想法,快速推进至可查看、可交互、可开发迭代的落地阶段。
 
AI×UI全链路流程图
 
此前我分享过 AI 效果图导入 Figma 的实操方案,解决了 AI 与设计工具之间的第一层壁垒。而本次团队完成闭环测试,补齐了从设计稿直达可运行代码的最后一环。
 
我们的核心目标:
  1. 提升初稿产出效率,消除重复绘制、素材处理等机械工作;
  2. 实测不同工具从 Figma 稿到前端页面的还原度、调试成本;
  3. 逐步覆盖页面布局、通用组件、交互动效、多尺寸响应适配;
  4. 沉淀可复用的团队 SOP、标准化提示词、交付验收清单、组件规范。
本次 Demo 完整链路:AI 生成效果图 → Figma MCP 搭建基础稿 → 设计师精细化校正 → WorkBuddy/Codex 生成前端代码 → 移动端真机预览
 
简单启动页可实现近乎 100% 视觉还原,包含渐变立体按钮、3D 插画等复杂元素均可通过代码原生实现,而非整图拼接。

image.png

设计稿与代码对照演示
 

一、第一阶段:文字需求一键生成 AI 效果图

本次演示选用 APP 版本更新启动页作为案例,以参考图为基准,通过 GPT Image 2 快速产出匹配需求的高保真效果图。
 
只需在提示词内明确 5 项核心信息,AI 即可快速输出贴合预期的视觉方案:
  1. 页面类型(启动页 / 首页 / 活动页等);
  2. 画布尺寸、倍率规范;
  3. 页面完整文字文案;
  4. 插画、吉祥物、装饰图形等视觉元素;
  5. 整体视觉风格、品牌配色体系。

image.png

GPT Image2生成效果图流程
 
效果图定稿后,即可进入下一环节:将像素效果图转化为分层可编辑的标准 Figma 设计稿。

二、第二阶段:Figma MCP 双方案,平衡结构完整性与插画精度

现阶段 Figma MCP 可直接基于效果图自动生成页面图层,但两种单一路线各有短板,最优解是分层素材 + 全局结构合并的组合方案。

方案 1:全图直传,一键生成完整页面框架

操作方式:在 Figma 内调用 MCP 插件,上传完整效果图并输入分层指令,要求区分文字、图片、系统状态栏,锁定 750px 移动端二倍画布尺寸。

image.png

Figma MCP提示词设置

image.png

自动生成分层图层
 
优势:自动搭建完整页面层级,背景、状态栏、标题、功能按钮、分页指示器全部原生生成,页面布局结构完整可编辑。
 
短板:3D 渐变、半透明光影、复杂插画会出现锯齿、分辨率不足;装饰箭头、立体图形矢量还原效果较差。

方案 2:AI 分层导出高清透明素材,保障插画质感

针对复杂视觉插图,先通过提示词让 AI 拆分独立透明 PNG 素材,将数字图形、吉祥物、标题文字、装饰线条、背景、按钮拆分为单独图层,输出 4K 高清无损文件。

image.png

分层导出提示词

image.png

拆分后的透明素材
 
再将分层素材传入 Figma MCP,指令 AI 按效果图位置完成画布拼接。
 
优势:插画、立体装饰素材画质无损,渐变光影细节完整保留;
 
短板:仅导入素材,不会自动生成规范文字组件、按钮容器、标准页面布局。

最优实操:两种方案合并,兼顾结构与画质

将方案 1 自动生成的完整页面结构,与方案 2 导出的高清分层素材在 Figma 内整合,由设计师统一校正间距、文字样式、图层层级,最终产出规范可复用设计稿。

image.png

分层素材导入Figma

image.png

图层合并效果

image.png

三版对比校正
 
AI 生成文件仍存在细节瑕疵:间距不统一、SVG 图标不标准、文字样式未遵循设计规范,必须由设计师做标准化微调,才能交付开发。

三、第三阶段:Figma 设计稿一键转前端代码,复杂组件原生还原

完成标准化 Figma 稿后,我们实测 Codex、WorkBuddy、CodeBuddy 三款 AI 代码工具,可直接读取设计图层与切图资源生成可运行页面。
 
本次测试最大突破:立体渐变按钮、带阴影圆角容器不再以整张图片实现,而是生成原生 button 标签,通过 CSS 还原渐变、圆角、投影、点击反馈等全部视觉效果,页面语义化完整,不影响交互开发。

image.png

浏览器代码与界面对照
 

1. Codex 代码还原操作指南

可直接对接 Figma MCP,一键拉取设计稿资源,输入简单交互需求即可生成还原度 90% 以上的静态页面。
 
两种使用渠道:网页端插件、VS Code 本地客户端,本地编辑器加载速度更快,支持实时查看、修改完整项目代码。

image.png

Codex网页端操作

image.png

VS Code代码编辑界面
 

2. WorkBuddy / CodeBuddy 落地方法

两种工具账号体系互通,有两种对接 Figma 路径:
  1. MCP 远程连接:通过配置 json 文件完成官方服务器授权,实现 Figma 文件实时同步;

    image.png

    WorkBuddy MCP配置
     
  2. 切图文件导入(推荐新手):使用 Figma 插件 Heron Handoff 导出标注与切图资源,提前给所有插画、装饰素材开启导出权限,AI 识别效率更高、消耗 Token 更少、加载速度更快。

image.png

Heron Handoff导出切图
 
新建项目后由 AI 自动搭建前端运行环境,口头输入交互、适配需求即可生成完整页面代码。

四、三款 AI 工具选型对比 & 付费方案参考

Codex(ChatGPT Plus/Pro 配套)

适合高频设计转代码需求,20 美元 / 月 Pro 套餐解锁完整 Codex 额度,可搭配 DeepSeek 拓展算力,日常页面还原、快速原型完全够用。

image.png

ChatGPT付费档位
 

WorkBuddy / CodeBuddy

注册即赠送 2000 积分,体验版每月附赠 500 免费积分,轻度测试无需付费;付费档位分为 70/140/700 元每月,随档位提升解锁任务数量、协作人数、代码实时补全权限,独立团队可按需选购高级版。

image.png

WorkBuddy套餐价格
 

五、全流程总结:AI 时代设计师的核心价值转移

完整跑通这套 Demo 后,我最深的感悟并非 AI 能够替代设计师,而是设计师的工作重心正在发生根本性转变:
 
过去大量时间消耗在重复素材抠图、页面搭建、间距校准、切图标注、转译开发文档等机械执行工作;如今 AI 可承接绝大多数标准化重复劳动。
但 AI 无法自主完成核心决策:
  • 判断适配产品定位的视觉风格;
  • 规划可长期复用的组件图层结构;
  • 定义页面适配逻辑、交互落地技术方案;
  • 制定可交付的视觉还原验收标准。
以上核心判断,依旧依赖设计师的专业能力。
未来 UI 设计的核心竞争力,不再是单一工具熟练度,而是整合多类 AI 工具、搭建稳定可复用全链路工作流的能力。
 
这套流程虽未达到完美,但已经实现完整闭环。AI×UI 工作流真正的意义,是大幅压缩创意到落地的周期,让设计师把精力集中在创意、体验与设计体系搭建上。
后续会持续更新复杂页面测试案例、标准化提示词模板,大家有想看的工具实操、工作流技巧,欢迎在评论区留言交流。
 

转载:优设

 

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

 

image.png

兰亭妙微ui设计公司分享:层层拆解|移动端首页视觉设计完整思路

清阳 移动端UI设计文章及欣赏

兰亭妙微ui设计公司分享:本篇聚焦首页视觉体系的搭建方法,系统讲解信息聚合型首页如何平衡丰富度与整洁度,让页面吸睛却不杂乱。

 

一、首页视觉全局规划:热闹不等于混乱

image.png对于资讯、电商这类信息聚合型首页,极简风格天然存在适配矛盾。国内市场竞争激烈,若首页视觉过于寡淡,很难抓住用户注意力;放在作品集里,平淡的页面也极易被同类作品淹没。因此这类首页需要适度丰富的视觉表现,但花哨必须可控,不能无节制堆砌效果。

1. 页面视觉失控的核心根源

image.png

很多页面迭代后变得杂乱,并非初始方案就臃肿,而是长期碎片化调整破坏了整体秩序:
  1. 分模块独立修改,缺少全局视觉强弱统筹,各组件孤立设计;
  2. 运营活动图单独产出,未匹配页面整体调性,色块、风格突兀割裂;
  3. 未提前规划视觉层级,强弱元素随机排布,浏览动线被打乱。
解决关键:先定全局视觉节奏,再落地细节,提前划分每个模块的视觉权重,建立自上而下的强弱秩序。

2. 核心底层逻辑:上强下弱的视觉衰减规律

image.png

移动端首页遵循垂直浏览逻辑,首屏内容权重最高,越向下模块优先级越低,视觉强度也需同步递减:
  • 高饱和度、强特效、大尺寸视觉元素,全部集中在首屏上半区
  • 下半屏弱化视觉冲击力,避免用户视线被下方模块抢夺,违背自然浏览习惯。
衰减并非直线式降低,而是带有起伏的曲线节奏:相邻两个高视觉强度模块之间,必须插入低饱和度、简约轻量化的模块做过渡缓冲,依靠对比原则拉开层级,这是决定页面高级感的核心手法。

3. 三类视觉元素统一管控:UI、运营图、商品配图

页面所有视觉载体都要纳入全局管控,三者视觉强度统一规划,避免互相冲突:
  1. UI 控件:按钮、分割线、卡片等基础组件统一规范,作为页面视觉基底;
  2. 运营宣传图:大促、活动 banner 是强视觉载体,必须匹配所在模块的权重,高权重区可用高饱和渐变,低权重区则降低色彩对比度;
  3. 商品 / 内容配图:页面配图数量远多于运营图,是节奏失控高发区。
     
    实操方案(电商场景举例):区分两种配图规范 —— 浅色白底简约商品图用于弱化模块,带场景背景的复杂商品图用于重点推荐区,统一管控图片视觉重量,让图文自然融合。

二、首页主流视觉强化方案(6 类通用落地手法)

想要合理提升页面丰富度,可复用行业通用标准化设计方式,按需组合使用,全程以全局层级为判断标准。

1. 顶部氛围背景(首屏核心强化手段)

image.png

页面顶部采用品牌色系渐变、弥散模糊作为全局氛围基底,快速建立产品辨识度,同时利用上下模块形成反差平衡:
  • 顶部深色渐变背景 → 紧随下方模块使用纯白底色、极简样式,中和厚重感;
  • 顶部浅色系柔和渐变 → 下一模块搭配高饱和卡片、多彩图标,制造视觉起伏。

2. 功能快速入口区

image.png

图标 + 文字是基础形态,单纯 3D / 插画图标不会造成视觉过载,属于轻量化细节优化;
 
如需提升入口权重,可将功能按钮做完整卡片化处理(如奶茶小程序堂食 / 外卖分区),依靠大面积底色、主题配图放大视觉存在感,适合高频核心功能。

3. 瓷片区多卡片布局

image.png

瓷片区本身由多卡片组合而成,最简易的强化方式是差异化卡片底色;
 
优质瓷片区设计拒绝均等排布:卡片区分大小尺寸,搭配差异化内文排版,形成主次关系,避免所有卡片视觉重量完全一致,页面呆板单调。

4. 异形边框突出卡片模块

image.png

普通白底卡片辨识度不足时,可通过外框体系提升存在感,三大核心细节:异形裁切边缘、彩色描边边框、定制化标题字体;
 
仅通过外层边框拉高视觉强度,内部内容保持清爽,既能突出模块,又不会让信息拥挤。

5. 优惠福利组件

image.png

优惠券、满减、红包类模块自带强营销属性,视觉强度可根据运营权重灵活调整:
  • 低权重福利:浅底色衬托高饱和数字,克制不抢镜;
  • 高权重主推活动:全幅红 / 橙高饱和底色,搭配爆炸贴纸、立体字,最大化吸引点击。

6. 底部导航差异化设计

image.png

底部导航整体视觉不宜过重,但可做单点反差:突出首页、发布按钮等核心 tab,搭配专属图形、渐变底色,局部强化细节,既丰富页面底部,又不会打破上强下弱的整体秩序。

三、设计收尾总结

移动端首页视觉没有固定标准答案,设计师可自由发挥创意,但所有特效、色彩、配图都需要服务全局层级:
  1. 始终遵循首屏优先、上强下弱、强弱交替的对比节奏;
  2. UI、运营图、商品配图三类视觉素材统一管控,避免各自为战;
  3. 六大模块强化手法按需搭配,拒绝无限制叠加特效;
  4. 设计顺序先定整体视觉权重,再细化图标、配色、细节样式。
后续会持续更新组件落地实操案例,大家有想看的设计技巧,欢迎在评论区留言交流。
 

转载:站酷

 

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

 

image.png

兰亭妙微ui设计公司分享:# 别让设计抛弃银发群体:5 个落地级适老化交互细节,产品优化

清阳 设计资源

前言

兰亭妙微ui设计公司分享:人口老龄化进程持续加快,越来越多中老年群体开始深度使用手机、线上服务,但现有数字化产品普遍存在操作门槛过高的问题:字号偏小、功能入口繁杂、操作链路冗长、操作反馈模糊…… 大量长辈因复杂交互流程产生挫败感,被迫割裂于数字生活之外。

简化操作链路,是适老化 UX 设计最核心的破局思路。本文结合滴滴、淘宝、微信、工行、QQ 等主流产品老年版落地案例,拆解 5 套可直接复用的适老化交互设计方法,清晰梳理老年用户核心痛点与对应优化方向。

image.png

老年用户四大核心操作痛点

  1. 点击层级过多,操作路径冗长
  2. 功能步骤繁琐,记忆负担重
  3. 界面信息繁杂,视觉辨识度低
  4. 操作反馈模糊,无法判断操作是否生效

四大优化方向

  • 精简点击层级,缩短操作路径
  • 压缩操作步骤,直达核心功能
  • 极简页面布局,强化视觉识别
  • 建立清晰反馈机制,降低试错成本

最终实现三大体验提升:操作效率提升、使用负担减轻、整体体验增强。

一、五大适老化实操设计方法 + 真实产品案例

方法 1:精简点击层级,减少无效操作

 

长辈记忆、操作反应速度有限,每多一次点击,都会大幅提升使用门槛。适老化设计核心原则:核心功能操作步骤控制在 2 步以内

案例 1:滴滴出行老年版 vs 标准版image.png

标准版流程:输入目的地→选择车型→点击叫车,多层操作; 老年版优化:首页放置超大「呼叫出租车」主按钮,预设出发地址,一键发起叫车。 设计逻辑:剥离次要筛选功能,聚焦长辈高频打车需求,砍掉多余交互步骤。

案例 2:QQ 老年版动态入口对比

image.png

标准版:底部「动态」标签→二次分类列表,两次点击才能查看好友动态; 老年版:点击底部动态 tab,直接展示好友动态信息流,一步直达。 总结:砍掉中转页面,缩短操作路径,从根源降低老年用户操作成本。

方法 2:轻量化直观界面,剔除冗余信息

 

中老年视觉分辨力下降、信息筛选能力弱,复杂多模块界面极易造成视觉混乱。适老界面设计标准:大图标 + 大字号 + 高对比度,只保留高频刚需功能

案例 1:滴滴个人中心页面对比

image.png

标准版:承载会员、钱包、出行、福利、营销活动数十个模块,信息密度极高; 老年版:页面大幅留白,功能以大块卡片分区展示,仅保留订单、亲情账号、电话叫车、客服等长辈刚需功能,弱化全部营销内容。

案例 2:淘宝「我的」页面适老优化

image.png

标准版:堆叠会员、优惠券、推荐商品、频道入口等海量营销模块; 老年版:仅保留订单、收藏、客服、会员权益四大核心板块,放大图标与文字,移除所有推荐信息流,减少视觉干扰。 总结:做信息减法,简化页面布局,让长辈一眼找到所需功能。

 

方法 3:全链路语音交互,替代文字输入image.png

多数长辈存在打字困难、视力衰退问题,语音交互是降低输入门槛的核心解决方案,在搜索、转账、查询等高频场景必须重点落地。

案例 1:淘宝语音搜索入口

标准版:仅顶部文字搜索框,依赖手动打字; 老年版:页面底部放置醒目橙色「按住说话搜一搜」语音按钮,无需打字,口述商品名称即可完成检索。

案例 2:工商银行老年版语音操作

标准版:转账、查资产、缴费均需手动点击多层菜单; 老年版:底部导航固定超大语音操作按钮,长辈口述指令即可完成账户查询、转账、生活缴费等全流程操作。 总结:用语音替代手动输入与多层菜单点击,适配中老年操作短板。

方法 4:高频功能前置,增设快捷直达入口

image.png

将长辈刚需功能、求助渠道放置页面最醒目位置,免去多层查找,实现一键直达。

案例 1:微信锁屏视频通话小组件

标准版完整流程:解锁手机→打开微信→查找联系人→点击视频通话,共计 4 步; 老年版优化:支持锁屏桌面添加视频通话小组件,一键拨通指定家人,无需解锁、无需打开 APP。

案例 2:饿了么一键客服求助入口

image.png

标准版:我的页面→更多功能→我的客服,多层隐藏; 老年版:首页底部固定「帮助」按钮,点击直接接通人工客服电话,遇到订单问题可快速求助。

方法 5:清晰反馈机制(原文底层逻辑补充)

适老化设计容易忽略操作反馈:按钮点击高亮、操作成功文字提示、语音播报结果,让长辈清晰感知「操作是否生效」,避免反复重复点击。

二、适老化操作简化的三大未来发展趋势

image.png

  1. 智能化:AI 主动预判需求 依托 AI 算法预判长辈使用习惯,智能推送常用功能、自动填充地址 / 联系人,减少手动操作;
  2. 协同化:跨设备无缝联动 手机、平板、智能穿戴设备账号互通,操作数据同步,长辈可在任意设备接续未完成操作;
  3. 个性化:自定义操作界面 支持长辈自主调整功能入口排序、隐藏无用模块、调节字号、按钮大小,适配不同年龄、视力、操作习惯。

三大趋势最终目标:打造更便捷、更高效、更有温度的数字化适老体验。

全文总结

对于数字化产品而言,适老化交互简化绝非锦上添花的加分项,而是产品必须落地的基础刚需。 减少点击层级、轻量化直观界面、全域语音交互、高频功能快捷入口、清晰操作反馈,这五套落地方法,能够从底层大幅降低老年用户使用挫败感,让长辈不用反复摸索、不用害怕点错、不用四处查找功能。

这些看似微小的界面交互细节,本质是用设计消解数字鸿沟,让银发群体平等、有尊严地享受互联网服务,这也是适老化设计真正的价值内核。

 

转载:站酷

 

 

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

 

image.png

日历

链接

个人资料

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

存档