首页

兰亭妙微案例拆解:APP 交互设计到底在设计什么?

涛涛 交互设计及用户体验

很多人觉得 APP 交互设计很玄乎,其实拆开来无非就是几件事:信息怎么分层、导航怎么选、首屏放什么、操作怎么流转。兰亭妙微在做竞品分析和产品走查时,有一套系统的拆解方法。今天我们用一个实际案例,把 APP 交互设计的门道讲清楚。

兰亭妙微深度思考:交互设计的本质是什么?

涛涛 交互设计及用户体验

做了这么多年设计,我们偶尔会停下来问自己一个根本问题:交互设计的本质到底是什么?是画原型?是定流程?还是让界面更好用?兰亭妙微在项目实践中不断打磨,对这个问题有了一些自己的理解。

兰亭妙微ui设计公司分享:设计原则及组件详解

清阳

前言

兰亭妙微ui设计公司分享:随着 UI 工程化、自动化开发逐步普及,传统图文版 UI 设计规范仅支持人工查阅,无法被开发工具、编译程序自动识别解析。设计产出与代码实现之间长期存在信息断层,带来规范落地难、还原度偏差、沟通成本高等一系列痛点。

为打通从设计规范到工程代码的完整链路,本文分为两大模块展开论述: 第一部分立足真实项目落地诉求,梳理 B 端 UI 核心设计原则,完整拆解全局规范、通用组件、基础控件的设计逻辑、尺寸约束、色彩规则与适用边界,输出一套严谨可读的人工设计规范,作为标准化文档的内容基础。 第二部分以这套 UI 规范为底座,结合 OpenCode 工具的解析语法、字段识别规则,对设计内容做结构化重构,定义design.md标准化文档的格式、排版与字段拆分,完成人工文档向机器可识别配置文件的转换。借助design.md,OpenCode 可自动读取设计参数,联动生成基础代码与静态资源。

本文基于公司内部《UI 设计规范 V1.0》复盘 B 端组件设计体系。如果把 B 端页面比作建筑楼房,组件就是整套系统的地基。吃透组件底层逻辑与落地约束,是高效开展 B 端设计的前提。

全文从六大设计原则、页面布局体系、字体色彩体系、通用组件规范四大模块展开,适用于公司全部自研产品,作为 UI、产品、前端、测试的统一协作准则,以此实现产品视觉体验统一、提升设计开发效率、降低跨岗位沟通损耗。文中配套规范样例、优化前后对比,直观呈现各组件标准形态与落地效果。

image.png

设计规范目标

  • 保持产品视觉风格统一
  • 提升设计输出效率
  • 减少跨角色无效沟通
  • 使用人群:UI 设计师 / 产品经理 / 前端开发 / 测试工程师

一、UI 六大核心设计原则

整套 UI 规范建立在六项通用设计准则之上,页面布局、色彩运用、组件排布都必须遵循:统一性、易用性、亲密性、对齐、对比、重复,这是界面美观、交互合理的底层基石。

  1. 统一性(Unity) 全产品的视觉风格、配色方案、布局逻辑保持全局一致。不应当为单个页面的局部美观破坏整体设计体系。栅格、色值、字号、组件样式在全项目统一复用,保障体验连贯统一。
  2. 易用性(Accessibility) 交互设计优先精简操作链路,一步可完成的行为不拆分为多步。遵循用户固有使用习惯定义组件行为。例如开关组件切换后即时生效,不再额外增加确认按钮,减少操作负担。
  3. 亲密性(Proximity) 将逻辑关联度高的元素缩短间距,归为同一个视觉模块;关联性弱的内容拉大留白,依靠间距完成页面分区,帮助用户快速识别模块边界。B 端常用的 8px 基准栅格间距,正是亲密性原则的典型落地。
  4. 对齐原则(Alignment) 页面内表单、文本、卡片、各类组件建立统一对齐逻辑,表单标签、输入框有序排布,引导用户视觉流向,提升信息阅读效率,后文表单案例会直观展示对齐优化带来的体验提升。
  5. 对比原则(Contrast) 借助色彩深浅、字号大小、元素粗细构建清晰的信息层级;主色强化核心操作按钮,次要信息降低色彩明度,让用户快速捕捉页面重点内容。
  6. 重复原则(Repetition) 图标、按钮样式、配色、间距规则在页面中重复出现,降低用户的学习成本,让用户能够快速识别同类功能组件。

image.png

二、基础布局规范

布局适配 1920p、1440p、1366p、1280p 主流桌面分辨率,采用24 列自适应栅格系统。主流页面框架分为左右布局、上下布局两种。所有尺寸严格遵循8 像素设计基准(尺寸取 8 的整数倍)。

8 像素设计原则

界面中控件尺寸、内外边距、模块间距优先使用 8px 的整数倍:8、16、24、32px…… 细微场景允许使用 4px(8 的二分之一),尽量避免 5/7/9/13 等非标准奇数像素。

底层原理

  1. 适配多倍图,规避半像素模糊:移动端与 Web 端 @2x/@3x/@4x 缩放,8 的倍数相乘均为整数,避免 0.5px 带来锯齿、发虚;
  2. 可无限二分:8=2³,可以不断向下拆分至 4px、2px、1px,既能做大块模块留白,也可以处理精细细节;
  3. 屏幕兼容性好:绝大多数主流屏幕分辨率可被 8 整除,跨设备、跨端排版对齐效果更稳定。

image.png

两种主流页面框架

(1)左右结构布局

image.png

image.png

左侧导航栏 + 右侧内容区。导航展开状态固定 200px,收起状态 64px;面包屑导航栏固定高度 40px;右侧内容区域跟随屏幕分辨率自适应缩放。

(2)上下结构布局

image.png

顶部导航栏 + 下方内容区。顶部导航栏固定高度 60px,面包屑栏固定高度 40px,下方内容区域自适应页面宽度。

栅格三要素(Margin / Column / Gutter)

栅格系统保障多分辨率下布局一致性,B 端后台优先采用24 列自适应网格,支持 1/2/3/4/6 列自由组合布局。

image.png

  • Margin(边距):内容距离容器左右边缘的留白,项目统一采用 16px /24px,必须为 8 的倍数;计算有效内容区域时,先扣除两侧边距,再均分列宽。
  • Column(列):PC 端固定 24 列栅格,单列宽度随分辨率动态变化,支持多种组合布局。
  • Gutter(列间隔):列与列之间的空隙,全局统一固定 16px。

image.png

文字排版规范

image.png

  • 中文字体:微软雅黑;英文字体:Adobe 黑体 Std
  • 四级固定字号体系,配套对应行高,区分标题‑正文‑备注层级:
    • 12px:备注、次要提示文本
    • 14px:正文、菜单、表格内容
    • 16px:小标题、导航文字
    • 24px:页面一级大标题

色彩规范

image.png

完整色板由主色调、辅助色、中性无彩色三部分组成,一套产品仅设置一个主色。

  1. 主色调 承担品牌识别,高频用于 LOGO、导航栏、核心操作按钮、选中态、重点标签,主导产品整体视觉。
  • 原色:LOGO、导航栏、主要按钮、选中标签、高亮内容;
  • 衍生浅色:标签底色、轻提示模块;
  • 衍生深色:按钮悬浮、点击交互状态;

注意:避免把主色大面积用作页面背景或大段正文文字,维持页面视觉平衡。

  1. 辅助色调 两类辅助色分别适配导航栏背景、表头背景;另外包含成功、警告、错误反馈色,分别用于操作成功、风险告警、错误提示等反馈场景。

    image.png

  2. 文字色阶

    image.png

  • #333333 一级文字:大标题、导航、正文重点;
  • #666666 二级文字:小标题、次级说明;
  • #999999 提示文字:备注、占位、次要辅助信息。

三、通用组件详细规范

B 端组件如同建筑零件,每个组件都要明确定义样式、交互状态、适用场景与边界,避免设计师自由发挥造成还原问题。

1. 按钮

image.png

B 端高频交互控件,分为填充按钮、线性按钮、文字按钮三大类;每种按钮包含:默认、悬停、点击、禁用四种交互状态。

2. 导航组件

image.png

  • 顶部导航:负责产品全局模块分类,承载大模块快速切换、系统公共功能入口;
  • 左侧导航:归属大分类下的子菜单,承载细分页面跳转。 二者互相配合,构建清晰系统层级,提升用户查找功能的效率。

    image.png

3. 面包屑导航

image.png

属于辅助导航,告知用户当前所处页面位置,支持快速回退上级页面,层级之间常用>作为分隔符号。本文采用标签式面包屑,包含静态、移入、当前选中三种状态;标签高度 28px,标签之间间距 10px,外部边距 16px。

4. 分页组件

image.png

多用于表格列表,实现分批次加载数据,降低接口读取压力。分为基础分页、长版分页、简约分页、迷你分页;基础样式建议最多展示 5 个页码,避免数字过多造成视觉混乱;长版用于数据量极大的业务。

5. 下拉选择器

 

  1. 基础单层下拉:平铺选项,适用于简单单选;image.png
  2. 多级树形下拉:支持左右分层、树形层级展示;

    image.png

  3. 下拉菜单(多选标签回显):选中内容以标签回显,超长选项 hover 气泡展示完整文本;

    image.png

  4. 单选 / 多选下拉框:需要控制选项回显文字长度,截断内容 hover 气泡完整展示。

    image.png

注意区分不同交互状态,规避用户误操作。

6. 日期选择器

覆盖单日选择、年份选择、起止时间区间选择。今日日期浅蓝标识,选中日期实心蓝底;区间选择支持单栏拼接、双栏独立布局。

image.png

  • 单项时间选择:蓝色边框标记今日,实心底色代表选中日期;
  • 年份选择器:蓝色边框标记当前年份;
  • 起止日期组合:包含组合样式、独立单分、混合模式。

7. 开关组件

image.png

开关切换后应当即时生效,不要搭配确认 / 取消弹窗。用户心智模型是点击开关直接改变状态,增加确认步骤会混淆生效逻辑,切换后给出即时状态反馈即可。

8. 单选 & 多选框

image.png

场景严格区分:圆形单选框用于互斥选项;方形多选框用于可多选集合。 统一具备三种状态:默认、选中、不可选。

9. 树形组件

image.png

适合展示多层级结构,节省页面空间;缺点在于复杂业务下维护成本较高,选型时需要结合业务复杂度评估维护代价。

10. Tab 标签页

image.png

实现在同一页面内快速切换不同数据集,拓展单页承载能力,偏向导航属性,多用于不同分类数据切换。

11. 输入框组件

image.png

  1. 基础输入框:常规、hover、激活、失焦、禁用 5 种状态;
  2. 联想搜索输入框:输入关键词自动下拉匹配结果,无匹配时展示 “无搜索结果”;
  3. 长文本输入域:常规、hover、激活、字数超限提示状态。

12. 表单组件

image.png

表单标签三种排布方案: a. 标签居左,放置输入框左侧(容易视觉不齐,不推荐) b. 标签居左,放置输入框上方 c. 标签右对齐,放置输入框左侧(推荐 B 端常规表单) 表单内部全部间距尽量遵守 8px 倍数原则,统一对齐逻辑。

13. 穿梭框

image.png

实现两组列表之间数据迁移,左侧选中项移动至右侧,右侧数据也可以回退至左侧,仅做交互视图,原始选项集合保持不变。

14. 文件上传

image.png

  1. 弹窗拖拽上传:文件拖拽至上传区域时,背景切换浅蓝色,给用户明确反馈;
  2. 按钮式上传:上传完成展示文件名与删除按钮,hover 卡片上浮。

15. 文字提示(Tooltip)

image.png

hover 触发,移出消失,不可承载操作;支持 12 个弹出方向,依附于触发按钮。

16. 气泡卡片(Popover)

image.png

点击或 hover 唤起,支持承载大段文本与操作按钮,适合内容较多的浮层场景。

17. 表格

image.png

用于大批量结构化数据展示,支持排序、筛选、搜索、分页、行操作,是 B 端后台的核心容器组件。

18. 警告提示 Alert

image.png

四种固定类型:常规提示、成功、警告、失败。

结束语

以上完整梳理了 B 端 UI 的核心设计原则、布局栅格、字体色彩、全套通用组件规范,明确各组件设计逻辑、尺寸约束、视觉样式、适用边界,搭建一套可读、可落地、跨岗位统一执行的 B 端人工设计规范。

但传统图文规范只能供人阅读,无法被自动化工具解析,很难真正打通设计‑代码的工程闭环。因此,我们会在这套人工规范基础上,对全部规则做结构化重构,适配 OpenCode 识别规则,搭建机器可读的design.md文档,完成从 “人工设计规范” 向 “工程化解析规范” 的升级落地。

 

 

转载:站酷

 

 

 

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

 

image.png

兰亭妙微ui设计公司分享:界面改版项目别这么写,否则很难打动评审

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

兰亭妙微ui设计公司分享:不少 UI 设计师在展示界面改版优化案例时,常会踩一些表达误区,很难让评审看到设计价值。下面梳理改版案例的避坑要点与正确表达思路。

三个界面改版常见雷区

1. 不要用原型图对比最终视觉稿

image.png

拿交互原型当作 “改版前版本”,和完成后的视觉稿做前后对照,这并不算改版设计。 将原型落地为高质量视觉,只是 UI 设计师的基础本职工作,这套对比无法体现你的改版迭代、问题分析与优化能力。

2. 不要对比功能差异巨大的两套界面

image.png

 

部分案例里拿来对比的改版前后页面,功能模块差异极大,几乎是两套完全不同的产品。 这种不属于改版,等同于重新设计一款 App。页面大量改动来源于产品需求迭代、交互逻辑变更,很难证明是你的设计优化带来的提升。

3. 不要刻意做很差的 “旧版本” 凑对比

image.png把 70 分的成熟界面优化到 90 分,提升幅度 20 分,足以体现设计实力。 但如果刻意捏造一份 10 分的劣质旧界面,优化到 60 分,哪怕分数涨幅看着很高,也没有说服力。 尤其是旧版明显是 AI 生成、漏洞百出的凑数图,行业内的评审一眼就能识破。

合格改版项目的两个核心原则

1. 优化点可以小巧,但必须落地真实

image.png

改版不一定要大刀阔斧重构页面,小而实在的改动,同样很有含金量,每一处优化都要有清晰合理的设计理由。

image.png

举个例子:签到金币组件优化。 原版金币样式普通,缺少产品识别度。我们可以结合产品特性,植入品牌 IP 形象、专属符号;假设产品主题和星星相关,就可以在金币内加入星星图形,还可以对星星造型做差异化设计,比如拉长其中一个尖角,强化专属视觉记忆点。

image.png

改动体量不大,但紧扣品牌诉求,优化逻辑完整闭环,就是高质量的改版细节。 如今借助 AI 工具,这类图形迭代也可以高效完成,基于品牌图形输入提示词,就能快速生成多版变体,便于方案推演。 核心:拒绝假大空,每一处改动,都要讲清楚「为什么改,改完带来什么价值」。

2. 优化要有设计新意,拒绝行业通用常识

image.png

不要把行业已经通用的基础规范当作自己的改版成果。 比如社区信息流,罗列 3 图、4 图、5 图的排版规则,朋友圈等主流产品早已落地这套模式。把这种通识内容当成优化方案,没有体现个人思考,属于无效输出。

image.png

 

image.png

什么是有价值的新意改版? 以心理咨询类列表页举例: 普通版本只是常规的列表布局。设计师洞察到心理咨询产品需要传递温暖、有温度的亲近感,于是将列表改造为便签纸张质感,搭配手写风格字体。 从用户情感诉求出发推导视觉方案,跳出标准化组件模板,这就是具备思考门槛的优质改版。

 

 

转载:站酷

 

 

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

 

image.png

兰亭妙微ui设计公司分享:《大厂高手总结!教你 3 个思路,做出更专业的数据可视化设计!》内容总结

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:仪表盘、数据可视化的价值不是单纯展示数字,而是推动业务决策;真正高价值的工作 80% 发生在制作图表之前,图表只是最后 20% 的呈现环节。

image.png

一、常见误区

image.png

很多看板数据准确、图表完整,但看完无法产出后续行动。团队习惯先拿已有的指标做图表,而非先明确业务问题;也会盲目套用 “数据‑墨水比”,一味追求极致简洁,丢掉决策者需要的业务上下文,简洁不是目的,适配场景的合适复杂度才是。 文中用Anscombe 四重奏举例:四组数据集统计结果完全一致,但可视化图形揭示完全不同的数据规律,说明表格数字会掩盖真相,可视化承担解读与沟通的作用;同时举疫情历史气泡图案例,说明合理视觉排布可以让读者先感知重点,再阅读细节。

image.png

二、图表制作前的三大核心维度(80% 关键工作)

1. 明确业务背景:从问题出发,而非从现有数据出发

不要围绕存量指标堆砌看板,先搞清楚要解决什么业务问题。

  • 模糊提问:“看看产品表现”;清晰提问:“找出一季度哪些功能驱动注册用户留存”。
  • 以电商结账流失分析举例:堆全部埋点数据会产出庞杂无效看板;先锁定问题 “用户在结账哪一步流失”,过滤 90% 噪音,漏斗图就能直接定位瓶颈。

先定要解答的业务问题,再确定取数、对比维度,剔除无效信息。

2. 面向受众做差异化设计

image.png

设计复杂度取决于受众的数据熟悉度与业务责任,同一套数据要给不同角色不同视图:

  1. 分析师:需要高密度、可下钻的详细视图,用于深度诊断挖掘问题;
  2. 高管管理者:需要高度聚合的结论视图,快速判断增长、风险与资源方向。

不要一套看板面向所有人,不同角色读取信息的诉求、承担的业务压力完全不一样。

3. 提炼业务洞察,指向行动

区分信息和洞察:信息只回答 “数据是什么”;洞察回答 “该如何判断、调整业务”。

  • 只展示指标下跌只是警报,容易引发盲目救火;
  • 把关联变量一同呈现,定位真实根因,输出可落地的业务动作(哪怕结论是暂时无需改动)。 以预订率下滑举例:指标下降本身只是信号,结合流量、投放活动,才发现是低质量新流量稀释整体转化,问题解决方向从改产品变成调整获客策略。

三、B2B 人才管理 SaaS 实战案例

项目原始需求:把海量用户行为数据展示给企业客户。团队没有直接堆砌图表,落实上面三步思路:

  1. 背景:摒弃单纯 “使用时长” 这个间接指标,选用能力得分、认证完成率等代表真实业务成果的指标;区分普通员工、管理者需要的数据颗粒度。
  2. 受众:普通员工视图偏向自我复盘、规划个人任务;管理者视图优先展示团队整体能力缺口,保留下钻查看个体的入口,二者叙事逻辑完全不同。
  3. 洞察:看板目标从被动输出报表,转向事前预警;衍生出成员指标对比的亮点功能,帮助管理者提前识别风险,主动给员工支持,而非月末事后复盘。

落地效果:平台分析模块周活提升,管理者养成每周查看看板的习惯,平台流失率下降,业务正向增长,用户反馈看板真正改变了管理沟通时机与方式。

四、总结

数据可视化不只是下游图表排版工作,要把 UX 用户体验思维前置到上游架构设计阶段。每一张图表、每一个指标,都要服务于人的实际业务目的,让可视化从被动的数据展示,变成驱动决策的工具。

 

 

转载:优设

 

 

 

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

 

image.png

兰亭妙微UI设计公司分享:WorkONE 智能文档管理应用 UI/UX 设计深度解析

丽洁 移动端UI设计文章及欣赏

导读|从问题定义、安全登录到文件管理与详情查看,构建“发现-访问-协作”的文档操作闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

 

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

WorkONE 并没有把自己限制为一款简单的文件浏览器或云存储客户端,而是试图建立一个覆盖文档存储、智能组织、便捷分享与安全协作的个人文档操作系统。移动端承担高频存取与即时操作,桌面端(如有)承接全局管理与批量处理,而设计本身则被安排在降低认知负荷、提升操作效率等关键体验节点。

核心痛点解决:针对“重要文档散落在不同平台、查找困难”以及用户在跨设备切换时“找不到刚才那份文件”的挫败感,WorkONE 提出了将文档存储、组织、分享和搜索整合到一个无缝移动端体验中的方案。

核心价值:通过“一个应用搞定所有文档工作”的理念,将碎片化的文档操作转化为流畅的单一流水线——从登录认证到文件浏览、从详情查看到文档打开,每一步都经过精心设计以减少用户的操作摩擦。

1.png 图1:WorkONE 设计案例总览——问题定义与解决方案概览

 

二、信息架构:把功能转译为用户的工作顺序

信息架构围绕“今天该做什么—正在做得怎样—下一步如何调整”展开,但在文档管理场景中被转译为“我有什么文件—文件在哪里—我该如何使用”。

首页(Home Screen):以“Hello, Jackson”的个性化问候开场,搜索栏置于顶部优先位置,下方以文件类型图标(DOCX、XLSX、PDF)作为快速入口,文件列表按最近使用或重要性排序。存储用量以进度条形式直观呈现(如68%),让用户随时掌握空间余量。

详情页(Document Detail):采用信息卡片式布局,将文件元数据(文件大小、最后更新时间、所有者、共享人数)以标签-值对的形式清晰展示。底部的“Open Document”按钮采用全宽红色设计,作为页面的唯一核心操作,避免用户在选择面前犹豫。

2.png 图2:登录认证页面——安全入口与品牌第一印象

导航结构:底部导航栏提供主页、搜索、个人中心等核心功能的快速切换,确保用户在三个主要任务路径之间只需一次点击即可完成跳转。

 3.png图3:移动端首页——文件列表与存储概览

 

三、关键交互:从浏览信息走向完成任务

交互亮点在于把复杂的文档管理操作转译为直觉化的触控反馈。

搜索优先:首页顶部即提供搜索栏,文案提示“Search files, folders...”,让用户在打开App的第一秒就能输入关键词定位目标文件,而非先浏览再猜测。这种“搜索前置”的设计显著缩短了从意图到结果的路径。

文件详情快速预览:点击任意文件即可进入详情页,无需打开文档本身即可查看关键元数据(文件大小、最后更新时间、共享状态)。这种“先看后开”的交互模式让用户在决定是否打开文档之前就能做出判断,减少了不必要的加载等待。

一键操作:无论是“Open Document”还是其他核心操作,按钮均采用全宽红色圆角矩形设计,视觉权重最高,确保用户不会在界面上找不到下一步该点哪里。

 4.png

图4:文档详情页——元数据展示与核心操作

 

四、视觉系统:品牌表达必须承担信息语义

WorkONE 的视觉语言在“专业严肃”与“现代活力”之间找到了精妙的平衡点。

色彩策略:深色背景(接近纯黑)建立专注、高端与科技感,鲜红色作为核心操作色,在大面积暗色中保持清晰的视觉焦点——登录按钮、进度条、品牌标识均以此色呈现。白色文字在深色背景上形成高对比度,确保可读性。

玻璃拟态:卡片和导航栏采用半透明磨砂玻璃效果,让背景的红色渐变若隐若现,保持了界面的通透性与层次感,避免了纯深色背景的沉闷感。

3D 元素:文件类型图标(PDF、DOCX、XLSX)采用3D立体渲染风格,具有厚度和光泽感,不仅增强了视觉趣味,还通过形状差异帮助用户快速识别文件类型。3D插画元素(如登录页的整理文件夹小人)为产品增添了人情味,缓解了企业级工具常有的冰冷感。

圆角与阴影:所有卡片、按钮、输入框均采用大圆角设计(约16px-24px),配合柔和的投影,营造出悬浮于背景之上的空间感。这种设计语言统一了从登录页到首页再到详情页的视觉体验。

5.png 图5:视觉设计展示——多界面联动与品牌视觉语言

 

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

对产品经理而言:最值得借鉴的是“搜索前置+详情预览”的信息分层策略。WorkONE 没有把所有功能平铺在首页,而是通过搜索栏解决“找”的问题,通过文件列表解决“看”的问题,通过详情页解决“了解”的问题,通过打开按钮解决“用”的问题——形成了一个完整的操作漏斗。

对设计团队而言:要重点学习深色模式下的色彩语义规范。WorkONE 将红色严格限定为操作色和进度指示色,不用于装饰性元素,确保了色彩的信息传递效率。同时,3D图标与玻璃拟态卡片的组合既保持了专业感又不失趣味,这种“严肃内容轻松表达”的手法值得在各类企业级产品中复用。

跨行业经验复用:本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司,同时也是专业的软件界面设计公司,在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司,我们深知不同行业对界面交互的特殊要求;作为数据可视化设计公司的复杂仪表盘方案,以及高端网站设计公司的品牌级视觉呈现,这套"以用户任务为中心"的信息架构逻辑均可复用。同时,我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力,确保设计稿能够被高保真还原。

 

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

现有方案的主要风险是功能密度与深色主题的平衡问题。

深色卡片可读性:在深色背景下,如果卡片之间的明度对比不够,用户可能难以区分不同的内容区块。建议强化卡片边框或增加间距,确保信息分组的视觉清晰度。

批量操作缺失:当前设计聚焦于单文件操作流,但文档管理场景中用户经常需要批量选择、移动、删除文件。建议增加多选模式和批量操作工具栏,覆盖专业用户的高频需求。

离线可用性:作为文档管理工具,用户可能在网络不稳定环境下使用。核心的文件浏览和已缓存文档的查看应支持离线模式,并在UI上明确标识文件的在线/离线状态。

 

结语:设计的最终判断标准是业务与使用价值

WorkONE 展示了文档管理类产品从“功能堆砌”走向“体验驱动”的路径:以搜索建立效率认知,以清晰的列表维持浏览信心,以详情预览减少操作犹豫,以一键打开完成行为闭环。真正决定产品粘性的,不是它支持多少种文件格式,而是用户每次打开App时,是否能在一秒内找到那份“我刚才明明记得在这里”的文件。

兰亭妙微作为作为专业的用户体验公司,我们始终坚持:好的界面设计公司不仅要交付好看的画面,更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付,核心始终不变——让技术真正服务于人的需求。

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

 

image.png

兰亭妙微设计细节:错误状态,最容易被忽略的体验分水岭

涛涛 交互设计及用户体验

在 UI 设计中,"错误提示" 看上去只是很小的一块 —— 输入框下方一行红字、弹窗里一段说明 —— 但如果没设计好,它对产品体验的杀伤力远超想象。兰亭妙微在做体验走查时发现,很多产品的核心功能做得不错,却偏偏在错误状态上马马虎虎,硬生生把用户劝退。

兰亭妙微科普:UI 设计、交互设计、UI 交互设计,到底有什么区别?

涛涛 交互设计及用户体验

刚入行的设计师经常被一堆术语搞晕:UI 设计、交互设计、UI 交互设计 —— 这三个词听起来差不多,到底有什么区别?兰亭妙微在招聘和项目协作中也经常遇到这个问题,今天我们从多个维度把这三者彻底讲清楚。

兰亭妙微ui设计公司分享:如何高效改善设计质量|实战分析

清阳 设计资源

UI 基础设计,怎样先拿到及格分?

image.png

兰亭妙微ui设计公司分享:UI 界面底层逻辑并不复杂,但不少新手,甚至从业多年的设计师,产出的作品依旧容易给人 “不够高级、不够精致、缺少设计感” 的观感。

image.png

出现这类问题,多数时候并非图片素材、色彩搭配或是审美能力的短板,根源往往出在UI 元素的尺寸与间距把控不到位。

image.png

image.png

我们可以观察一些黑白灰原型稿:仅仅摆放基础界面元素,不添加色彩、插画,整体却规整和谐、视觉稳定,几乎挑不出基础层面的硬伤,这就是做好尺寸与间距带来的效果。

image.png

我把这种状态称作界面的 “规整感”:各个模块元素尺寸合理,排布位置得当。抛开交互与用户体验,在视觉基础层面做到无明显瑕疵。

这也是我建议 UI 学习者优先打磨的核心能力。尺寸与间距就是界面的骨架,如同人的骨相。骨架基础没打好,再花哨的配色、装饰,不仅无法挽救界面,反而容易放大问题,让整体画面更加违和。

image.png

image.png

image.png读懂 UI 的尺寸:固定尺寸与自适应尺寸

 

尺寸,代表元素在界面内实际占据的空间大小,即元素的长宽数值。UI 设计里主要分为两类:固定尺寸、自适应尺寸。

image.png

先看固定尺寸:元素长宽数值固定,不会随内容变化。像导航栏、底部标签栏、按钮、文本,都有对应的合理取值区间。 并非所有组件都有唯一标准答案,更多是合理范围。例如正文字号建议 13‑16px,关注类按钮高度 24‑32px,数值一旦超出区间,就会显得突兀,和整体界面割裂。

image.png

按钮、输入框这类复合控件,采用固定尺寸定义背景与边框时,内部图文元素一般做水平、垂直居中,完成内部定位。 这是 UI 入门的基础知识点,但很多设计师遇到复杂组件时,就容易混淆逻辑:五花八门的模块,内容千差万别,很难提前预设一套固定尺寸。这时就需要用到自适应尺寸—— 组件背景大小跟随内部内容自动变化。

image.png

举个例子弹窗提示:提示文案可能是一行、两行、三行。如果强行设置固定卡片高度,就需要按照最多文字的场景预留空间,文案少时会出现大量无效留白,观感很差。主流实现方案,就是卡片高度自适应内容。

image.png

自适应模式有个关键点:区分内间距 padding 与外边距 margin,对应 CSS 盒模型的两个属性。 内间距提前设定好,组件自适应后的总尺寸 = 内部内容尺寸 + 内间距。

image.png

外边距同样承担两种作用:

image.png

  1. 限定组件整体最大尺寸:比如 B 端画布 1440px,卡片宽度 = 画布宽度‑左右外边距;移动端 App 画布 393px,卡片宽度 = 393‑16×2。
  2. 控制组件与组件之间的距离,例如商品列表卡片之间的间隙,依靠外边距实现。

UI 界面的骨架搭建,本质就是一套尺寸、间距的定义体系。把这套逻辑吃透,就能搭建稳固的界面底层,为后续视觉表现打好地基。

实战案例:C 端动态卡片搭建流程

image.png

以移动端 C 端动态卡片举例,完整梳理自适应组件的设计步骤:

  1. 依据页面全局外边距,确定卡片总宽 361px;设定卡片内间距 12px,得到内容可使用区域宽度:361‑12×2=337px。
  2. 在内容区域内排布全部元素:顶部用户信息、宽度 337px 的图片模块、底部操作图标。
  3. 根据内部内容高度,确定卡片背景高度,保证上下内间距统一,再复制组件,生成完整列表。

这里有一条铁则:同级、同类组件,间距必须保持统一,尤其内间距。如果上下、左右内间距数值混乱,页面会显得松散失衡,是首要排查的问题。

很多设计师会反着操作:先把组件背景框定死,再往里面塞内容。内容和固定背景不匹配时,就强行拉扯、压缩内部间距来 “凑数”。这正是组件凌乱、缺乏精致感的主要原因。

image.png

自适应组件标准设计流程

 

  1. 判断组件宽高:使用固定尺寸,还是自适应尺寸image.png
  2. 预先定义组件的内间距、外边距数值

    image.png

  3. 完成组件内部全部元素的布局排版

    image.png

  4. 根据内容 + 间距,反向确定组件背景的实际大小

    image.png

Figma、即时设计里大名鼎鼎的「自动布局」,底层正是这套逻辑。 很多同学误区是上来死磕软件操作,到处给组件套自动布局,却不懂背后的设计逻辑。先理解尺寸‑间距‑内容的关系,再使用工具提升效率,这才是正确顺序。工具只是手段,设计逻辑才是内核。

image.png

如何刻意练习,掌握界面骨架能力

尺寸间距的把控,不能只靠看懂理论,需要大量刻意练习。 最高效的练习方式:纯原型训练。暂时不去纠结产品逻辑、交互体验、视觉美化,只用黑白灰、基础文字、几何图形,专注打磨界面骨架。

image.png

骨架设计和视觉表现可以完全拆分。完成高质量黑白原型,本身就可以充当交互原型,直接给到评审环节,不会额外增加工作量,还能提前规避大量基础问题,提升团队整体效率。

练习素材来源十分灵活:拿自己过往旧稿重新改版;截取线上优秀产品界面,做临摹重构。 练习目标:做到不需要反复思索,凭设计直觉就能输出合理的尺寸参数。给自己定一个小目标:完成一百个界面原型练习。

结尾

在日常答疑中,尺寸间距基础薄弱是非常普遍的问题,因此专门整理这篇内容。后续我会带来更多实战改版演示,覆盖移动端、PC 端各类界面。如果你手上有效果不满意的界面稿件,欢迎在社群提交,作为后续改版案例。

 

转载:站酷

 

 

 

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

 

image.png

兰亭妙微ui设计公司分享:微信输入框被吐槽丑,可能是在为下一代AI交互铺路

清阳 交互设计及用户体验

最近我发现,微信给输入框加了一圈明显的黑色描边,把语音输入在视觉效果上做了强化。

旧版是这样的。

被人吐槽很多后,又做了一些优化,我的另一个号是这样的样式。

我在群里和朋友圈都能看到不少人吐槽,怎么改得这么丑。

我有一个猜测,微信这次可能又在把大家熟悉的输入框,往下一代AI交互入口推。其实语音输入不仅仅是在输入框这里做了加强,其他地方加的更多。

就像2011年第一次发布的语音版就是按住说话,当时也是把语音这个按钮做的特别强,连文案都一直没变过。

微信内部具体怎么考虑,我现在没在腾讯了,也没啥内部信息。下一代AI入口,是我对这些功能变化的理解。

结合我自己的使用体验,我会觉得,这也许和 AI 时代的输入方式有关。文字本来就是为了记录而发明的,但人与人日常交流最自然的方式,一直都是说话。能语音说清楚的事情,通常就不想再费力写一遍。我自己的输入习惯,也正在往这个方向走。只是受限于环境,不得不看文字。

过去我们依赖键盘,是因为语音识别还不够准确。现在识别已经足够准,再加上 AI 可以帮我们整理和修改,语音终于成了一种真正好用的输入方式。

我现在已经越来越少打字了。

我现在很享受晚上一个人在公司楼下,找个安静的地方,把一天的思考快速说出来,再让 AI 帮我整理。前段时间我是用Claude,也是在那个时候逐渐习惯了这种记录方式。在我的claude被封号之后,突然觉得以前打字其实是一件挺辛苦的事。

说话时,我基本不用看手机屏幕,只要顺着思路往下讲,就能一口气说出很多内容。现在语音识别已经足够准确,转出来的文字通常不用大改,最多让 AI 帮我整合一下就可以了。我之前也跟大家专门分享过这个语音整理的skill,我现在会放在codex里用,也挺好用的。

地址是这个 https://github.com/ColourCloudSky/voice-note-polish ,有需要的话,也可以拿去用。

以前用手机码字的时候,很多时候我有想法了就只能用几个关键词快速记录,之后还要再找时间补充。如果不是有特别强的行动力的话,这个其实挺难持续的。因为你可能会存很多关键词,但却没时间去补。

而且,说话和打字带来的状态很不一样。说的时候,我不会预先考虑太多,往往能把最直接的感受讲出来,思路也更容易自然地往下走。打字的时候,总要一边写,一边斟酌措辞,想着想着思路可能就断了。

以前我为了记得更快,我连双拼都专门学过。双拼确实很快,但现在只要环境允许,我还是愿意直接说。

尤其是在跟人聊天的场景里,语音识别和 AI 结合之后,沟通会越来越接近线下交流的状态。我们像平时一样自然地说话,系统把语音准确转成文字,这个过程会非常方便。

这跟直接给朋友发一条语音消息,还是有区别的。发语音的时候,接收的人需要找时间听完,倍速真的太重要了。语音转文字,再配合整理和修改,才更接近我现在愿意一直用的这套方式。

所以,我说的下一代AI交互入口,具体就是让用户自然地表达意思,系统接着帮助处理这段表达,最后由用户确认结果。

我们还是需要文字,只是有一部分文字,可以不用再亲手一个字一个字打出来。

从这个角度看,微信把语音输入变得更显眼,我能理解它可能想推动的方向。输入框本来就在我们每天交流的路径上,如果它能接住这套新用法,用户就有机会在熟悉的地方慢慢形成新的习惯。

但一种功能能做出来,到大家愿意用,中间还有很多事要做。

一个语音入口藏得太深,有需求的人可能发现不了。把它做得更显眼,确实可以让人注意到它。但输入框也要供那些习惯打字、暂时不想说话的人使用,新增的强调会不会打扰他们,同样需要考虑。

我愿意在公司楼下说话,是因为那里安静,也方便开口。换到不适合说话的环境,或者需要输入一段很精确的内容,键盘依然是必须的。

设计要给不同的输入方式留出位置,让用户根据当下的情况选择。产品看好一个新方向,也得照顾眼前这些真实的使用差别。

如果目的是让人发现语音功能,可以尝试描边,也可以考虑提示文案、入口位置,或者在合适的时机介绍新用法。具体选哪一种,要看原来的问题发生在哪里。

原来没看见入口,和看见了但不知道怎么用,需要解决的事情就不一样。已经会用的人,每次打开聊天还需不需要这么强的提示,也值得继续想一想。

这里需要设计师判断,什么该强调,强调到什么程度,以及用户熟悉之后该怎么办。线条的颜色、粗细、圆角,都会影响它和整个聊天界面的关系。

用户反馈很丑也是很有价值的,它至少提醒了设计师,这个变化让一部分人觉得不舒服。接下来可以继续看看,这个不舒服来自视觉上的突兀,还是使用过程里的不顺手。

入口被看见之后,还要考虑用户后续的操作体验。

还是拿微信这个语音转文字、修改后再发送这个功能来说。

一个按钮设计,拍脑袋想下应该是很简单的,如果一切顺利的话就那么几步,按下去,说话,文字出来了,发出去。

但设计还要处理那些没那么顺利的情况。录到一半想放弃,怎么取消?一个名字识别错了,怎么修改?内容正在处理,用户切走了,回来还能不能接着用?这些都要想好怎么设计。

如果再加上AI整理,还有一个判断要留给用户。它整理后的文字,是否仍然是自己想表达的意思。

重复的语气词可以删掉,但一句话里的犹豫、保留和不确定,有时就是原意的一部分。对这样的输入设计,我会希望修改后的结果容易核对,不满意时也方便重新调整。

尤其是发送这一步,用户需要清楚,自己现在是在录音、修改,还是已经把内容发给了对方。整理得再通顺,也得先让人知道自己准备发出去什么。

这些地方处理好了,用户才有理由继续使用。只让他第一次注意到一个功能,还不够。

一个按钮的描边修改,对UI来说只是最简单的一步,但背后的设计逻辑,都要思考清楚,以及说对用户的体验和对产品的战略价值怎么平衡,需要想清楚才能设计的好。

因为写设计文章的原因,我创建了10多个UI设计群,从以前每天几百条信息聊UI,聊上首页,发作品链接,到现在群里已经越来越少认真聊UI了。大家忙着讨论怎么写Skill,怎么去AI味。

难得一个输入框的改动,又让大家认真说起好不好看,我还挺感慨的。

一个看似简单的输入框设计,却需要考虑这么多复杂的事情。所以,UI设计绝对不像某些人想的那样,就是个画图的。

微信这么多年,UI视觉一直也没咋变化,那按很多人的理解,早就应该把UI干掉了,但其实他们还在,就说明一直都有更重要的东西需要去琢磨,而不仅仅是一个按钮样式。

想要把体验真正做好,真的没那么简单。背后的输入逻辑、用户习惯和产品想推动的方向,都要放在一起想清楚。产品想推动一种新习惯,设计就得把每一次使用里的麻烦处理好。

所以,别再因为看过几个AI视频和演示demo,就说要替代设计师了,优秀的设计师永远稀缺。

 

转载:人人都是产品经理

 

 

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

 

image.png

日历

链接

个人资料

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

存档