首页

兰亭妙微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设计公司分享:DeepSeek AI智能助手应用UI/UX设计深度解析

丽洁 大数据可视化设计文章及欣赏

导读——从对话式交互、多模态输入到AI深度思考,构建连续的智能协作闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

 

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

DeepSeek并没有把自己限制为一款简单的聊天机器人或问答工具,而是试图建立覆盖文本对话、图像生成、数据分析、语音交互与深度推理的AI个人助手操作系统。移动端承担高频交互与即时执行,AI则被安排在计划生成、内容创作、知识探索等关键决策点。

1.png 

图1:DeepSeek AI 主界面——功能胶囊与对话入口

 

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

信息架构围绕“我想做什么—正在做得怎样—下一步如何深入”展开。首页以欢迎语、功能胶囊和输入框为优先层级;图像生成、文本总结、数据分析等功能被组织为可进入的任务模块;长期对话则沉淀到聊天历史。这样的分层既照顾即时行动,也保留专业用户对深度推理和复杂任务的需求。

2.png 图2:移动端设计展示——从引导注册到对话交互的完整流程

 

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

交互亮点是把复杂AI能力转译为可执行操作。功能胶囊(Chips)、Deep Think开关、语音输入和文件上传不是装饰,而是把用户意图直接显性化。语音交互将自然语言与AI处理连接,图像生成采用描述→生成的单向流程,减少用户在复杂功能面前的认知负担。

3.png 图3:功能网格与“Unlock Limitless Possibilities”——能力全景展示

 

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

深紫色与黑色渐变背景建立沉浸、科技与未来感,霓虹紫作为核心操作色,在大面积深色中保持清晰焦点;白色文字用于主要信息,浅灰色用于次要信息,形成具有层级感的视觉体系。玻璃拟态卡片、柔和光晕和鲸鱼Logo让AI产品不至于显得冰冷,同时保持跨界面视觉一致。

4.png 

图4:功能详情展示——语音输入、图像生成与深度学习的多模态交互

5.png 

图5:品牌标识设计——鲸鱼Logo几何构建与应用图标规范

 

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

对产品经理而言,最值得借鉴的是多模态交互闭环:用户输入并非终点,而是必须进入AI理解、任务执行、结果呈现和再次交互。对设计团队而言,要重点维护功能发现、任务执行和结果反馈之间的可追溯关系,使用户知道AI正在做什么、为什么给出某项结果,而非只展示一个黑箱式的回复。

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

 

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

现有方案的主要风险是功能密度较高,深色卡片在小屏上容易出现同权竞争。建议强化“当前任务优先”原则,将次要功能折叠为按需展开;AI深度思考过程应增加进度可视化与中间状态提示;多模态输入(语音、图像、文件)也应提供更明确的状态反馈和错误恢复机制。

 

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

DeepSeek展示了AI助手产品从工具走向陪伴式系统的路径:以对话建立信任,以多模态能力扩展边界,以即时反馈维持使用习惯。真正决定产品可信度的,不是模型能生成多少内容,而是每次交互是否透明、可理解、可被用户引导和修正。

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

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

 

image.png

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

涛涛 交互设计及用户体验

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

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

涛涛 交互设计及用户体验

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

兰亭妙微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

存档