首页

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

兰亭妙微UI设计公司分享:Fynix AI智能财务管理平台UI/UX设计深度解析

丽洁 B端ui设计文章及欣赏

导读|从AI财务洞察、现金流可视化到智能对话助手,构建“感知—分析—决策”的个人财务管理闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

1.png

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

Fynix并没有把自己限制为一款简单的记账工具或银行App的复制品,而是试图建立覆盖资产总览、AI洞察、交易管理与智能咨询的个人财务操作系统。桌面端承担全局洞察与深度分析,移动端承接高频操作与即时查看,AI则被安排在财务诊断、异常检测和理财建议等关键决策点。

对桌面端用户而言,Fynix提供了一个信息密度高但层次分明的仪表盘,将分散在多个银行账户和投资平台的数据聚合为统一的财务全景图;对移动端用户而言,Fynix将核心余额卡片和快捷操作(存款、转账)前置到iOS桌面小组件,用户无需打开App即可掌握资产动态。AI助手“Ask anything...”的入口贯穿两端,确保智能建议随时可得。

 

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

信息架构围绕“我有多少钱—钱去了哪里—接下来怎么做”展开。桌面端首页以总余额卡片、现金流图表、最近交易为优先层级;AI增强模块(收入/支出/储蓄明细)、信用评分和货币兑换被组织为可进入的功能模块;长期数据则沉淀到统计报告看板。这样的分层既照顾即时行动,也保留专业用户对趋势和细节的需求。

移动端采用“小组件+App”的双层架构:桌面小组件承担“一眼掌握”的角色,展示Total Balance和快捷操作按钮(Deposit/Send);App内部则展开完整的Cashflow柱状图、AI Assistant对话入口和详细交易列表。侧边栏导航(Dashboard、AI Fynix、Transactions、My Wallet、Invoices、Reports、Settings)采用折叠式布局,保证主内容区的视觉优先级。

 

三、关键交互:从浏览数据走向财务决策

交互亮点是把复杂的金融数据转译为可执行洞察。总余额卡片、现金流柱状图和AI助手不是装饰,而是把资产状况、收支偏差和优化建议直接显性化。

桌面端交互设计中,Cashflow图表支持“This Year”等时间维度切换,绿色柱体代表收入、深色柱体代表支出,用户可直观对比月度收支趋势;Finance Score进度条以“Excellent 92%”的量化标签呈现信用健康度,将抽象的“信用好坏”转化为可追踪的数值指标。AI Assistant模块采用圆形头像+对话输入框的拟人化设计,用户输入“What Can I help with?”即可获取个性化财务建议,降低了获取专业分析的操作门槛。

移动端则强调“少点一次”的原则:iOS小组件直接在桌面展示余额和Deposit/Send按钮,用户从锁屏到完成转账只需两次点击。App内的交易列表采用状态标签(Completed/Pending)区分交易进度,配合右侧的金额正负色标,实现“扫一眼知盈亏”的交互效率。

 

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

浅灰白背景建立专业、洁净与可信赖感,鲜绿色(Lime Green)作为核心操作色,在大面积留白中保持清晰焦点,传达增长、财富与活力的心理暗示;深墨绿色用于支出数据和警示信息,形成具有语义的第二强调色。卡片圆角、柔和阴影和扁平化设计让金融数据不至于显得冰冷,同时保持跨设备视觉一致。

色彩策略上,绿色不仅用于“存款”按钮和收入柱体,还用于Finance Score的“Excellent”状态标签和AI Enhancements模块,形成积极的心理暗示;红色仅在必要警示时使用,避免造成财务焦虑。图标系统采用简洁线性风格,既现代又不失稳重,符合金融科技行业的严谨属性。字体选择上,标题使用几何感强的无衬线字体,正文使用高阅读性的中性字体,确保在展示大量财务参数时界面依然清晰易读。

ScreenShot_2026-09-08_173822_991.png

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

对产品经理而言,最值得借鉴的是AI原生设计思维:AI不是事后添加的功能插件,而是贯穿资产总览、交易分析和用户咨询的核心驱动力。“AI Fynix”作为独立导航项出现在侧边栏最高层级,表明AI能力是产品的第一等公民,而非二级功能。这种设计思路值得所有数据密集型产品借鉴——不要让AI成为藏在设置菜单里的彩蛋,而应让它成为用户每天打开App的第一个理由。

对设计团队而言,要重点维护“数据可视化与操作便捷性”之间的平衡。Fynix在同一个仪表盘内同时呈现总余额、现金流、信用评分、交易列表和AI对话五个信息域,却通过卡片分区、色彩层级和留白控制避免了视觉混乱。其秘诀在于:每个卡片自成一统(独立背景、圆角、阴影),卡片之间用等距网格对齐,核心操作色(绿色)仅用于需要用户行动的元素,其余数据以中性色呈现。这种“卡片联邦”架构是可复用的设计模式,适用于仪表盘、后台管理系统等各类数据产品。

 

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

现有方案的主要风险是信息密度较高,桌面端仪表盘上多个数据卡片同时展示可能造成认知负荷。建议强化“今日财务重点”模块,将次要数据折叠为按需展开;AI财务建议应增加置信度说明和数据来源标注,避免用户对单一数值产生过度依赖;跨境货币兑换需明确汇率更新时间与手续费透明度。

此外,隐私安全感的设计仍需加强:虽然用户访谈中提到“keeping my personal financial information secure is very important”,但在UI上缺乏生物识别(FaceID/TouchID)入口或隐私锁的视觉暗示。建议在进入App或查看敏感交易记录时增加安全验证环节。同时,空状态设计(如“No transactions yet”)和错误状态处理(如API请求失败)也需进一步完善,确保用户在数据缺失时仍能获得清晰的引导而非空白页面。

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

 

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

Fynix展示了AI金融科技产品从“数据展示工具”走向“智能财务顾问”的路径:以数据建立认知,以AI形成洞察,以简洁交互促成行动。真正决定产品可信度的,不是展示了多少数据指标,而是每条AI建议是否透明、可执行、可被用户理解和修正。当用户的财务状况发生变化时,Fynix能否像一位老朋友一样,在合适的时机递上最需要的财务建议——这才是设计最终需要回答的问题。

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

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

 

image.png

兰亭妙微设计手册:UI 设计师必须知道的 19 条交互原理

涛涛 交互设计及用户体验

做交互设计久了,你会发现所有看似 "凭感觉" 的决策背后,都有一套经过验证的心理学和行为学原理在支撑。兰亭妙微在项目中反复参考 Jon Yablonski 整理的 Lawsofux——19 条易于理解、应用广泛的 UX 原则。今天我们把这 19 条原则做一个系统梳理,每条配上一句话的核心解读,方便大家随时查阅。

兰亭妙微设计方法论:交互设计的六大原则

涛涛 交互设计及用户体验

说起 UI 设计,就绕不开交互设计。交互设计定义的是人与系统之间交流的内容和结构,让双方互相配合、共同达成目标。兰亭妙微在多年的设计实践中,把交互设计的底层逻辑归纳为六大原则 —— 可视性、反馈、限制、映射、一致性、启发性。这六条不是空洞的理论,而是我们做每一个项目时的自检清单。

兰亭妙微ui设计公司分享:怎么做才能用字体结构塑造多样表达?

清阳 平面设计

在字体设计当中,合理运用书写逻辑规律,既能依靠笔画势态营造独特的视觉节奏感,也可以精准控制笔画与部件形态。我们还可以借由字形本身开展字与字之间的重组,以合体字的形式传递文字内涵;在保留单字独立属性的前提下,赋予字体意象化的表达能力。

image.png

案例一:「中元节」字体创意实践

image.png

  1. 以 “中元节” 作为创作案例,融合不同书写逻辑搭建字形。先用几何线条确立基础骨架,再借鉴书写笔法改造笔画部件形态,在保障文字识别度的基础上,赋予字形书写的节奏变化。

    image.png

  2. 挖掘两个汉字本身的结构特征,将二者融合为一个合体字,同步调整字面大小,实现整体结构的平衡与稳定。

    image.png

  3. 将主题相关的数字特征融入字体粗细、笔画长短、倾斜角度、笔画间距等参数,搭建一套严谨的基础造型规则,减少后期细节修改的工作量。

    image.png

  4. 路径转曲之后,遵循书写走势调整 “元” 字竖弯钩:起笔承接上一笔的收笔势态,收笔采用急转的处理方式,以此检验局部笔画形态能否带动整个字体的气韵节奏。

     

  5. 迭代收笔形态:把原本急转形成的弧线与拖笔装饰,替换成刀刻般干脆利落的笔触,配合提笔收尾的锐利感,达成视觉语言统一。

    image.png

  6. 顺着书写走势,对 “中” 字封闭部件做开口处理,让循环流动的走势和倾斜竖笔形成落笔节奏;参考篆体写法,给竖笔末端增加装饰延伸。对 “元” 字右侧连笔做倾斜变化,延续竖弯钩的书写动势,调整末端造型与拖尾细节。笔画走势内在连贯统一,视觉上却形成反差矛盾的趣味效果。

    image.png

  7. 运用外圆内方的设计逻辑:锐角位置改为圆角,内部棱角支撑字体结构,外部圆角顺应曲线连笔,烘托整体气质。

    image.png

  8. 给不同笔画部件分配色彩,依靠色彩与部件的对应关系,确立整套字体的情绪调性。

    image.png

  9. 对配套英文进行排版设计,参照中文字体的造型规则,对字母做拉长、倾斜处理;结合阅读语义,调整单词的大小层级。

    image.png

  10. 完成中英文组合排版,严格把控各组文字间距,均衡不同模块的视觉面积。即便英文字符宽度大于中文,也不要强行做等宽对齐,避免产生错误的视觉错觉。

    image.png

  11. 最后做四象限布局调整,所有形态变化,都依托中文本身的形体与动势来完成。

    image.png

关于创意字体的识别度思考 创意字体的识别度是相对概念。很多时候并非字形识别失效,只是它跳出了常规方块汉字的阅读逻辑。高识别度只是字体众多表现可能性中的其中一种。视觉传达目标与内容概念,才是决定识别度取舍的核心。把大众熟悉的汉字范式融入概念化创意,即便适度牺牲部分识别度,也能用陌生化视觉完成概念可视化,承载多层意象,实现多维度的情感解读,这也是字体创意极具魅力的表达方式。

 

转载:站酷

 

 

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

 

image.png

兰亭妙微ui设计公司分享:从零搭建网站设计:3 个核心维度,少走设计弯路

清阳 网站设计文章及欣赏

兰亭妙微ui设计公司分享:很多新手做网页设计,直接上手画页面,却忽略画布尺寸、导航选型、屏幕适配这些底层问题,最终设计稿交付开发后,出现页面错位、首屏信息被遮挡、不同设备体验差异巨大等问题。本文从画布与内容区、导航模式选型、布局与屏幕适配三大模块,拆解 PC 网站设计的关键实操要点。

一、画布与内容区:选对基准尺寸,算准真实首屏

image.png

在完成用户调研之后,正式设计的第一步,就是确定画布大小,画布基准要参考市场主流设备的分辨率分布。

根据 2021 年 PC 分辨率统计数据,1920×1080是市场占有率最高的分辨率,占比 40.75%;1920×1080、1366×768、1440×900 三者合计占比达到 62.75%。

设计选型小提示:遵循小屏适配大屏优于大屏适配小屏的兼容原则,B 端项目可以选用 1440×900作为设计画布,阿里、Material Design 的 B 端规范均采用该尺寸。 如果产品面向特定人群,可直接以用户实际设备为准,例如企业内部办公系统,员工普遍使用 1366×768 笔记本,则直接以此作为画布标准。

首屏高度,不能直接照搬屏幕分辨率

image.png

网页运行在浏览器当中,系统 UI、浏览器控件都会挤占可视区域的高度,直接用屏幕分辨率当做首屏高度,会导致核心内容被遮挡。

  1. 系统占用高度:Windows 任务栏、Mac 程序坞、系统菜单栏,都会消耗屏幕垂直空间。
  2. 浏览器占用高度:页签栏、地址栏、书签栏共同占用可视高度。 主流浏览器控件高度参考:
  • Chrome:页签栏 40px + 地址栏 46px + 书签栏 34px,合计 120px
  • Safari:页签栏 28px + 地址栏 52px,合计 80px

 

image.png

真实可视首屏高度计算公式: 严格版:屏幕分辨率高度 − 浏览器控件高度 − 系统 UI 占用高度 简易版:屏幕分辨率高度 − 浏览器控件高度

image.png

设计时以此划定首屏线,把最重要的业务信息放置在首屏可视范围内。

二、导航模式选型:左导航 VS 顶导航,任务场景决定方案

PC 网页最主流的两种导航形式:左侧导航、顶部导航。

image.png

早在 2004 年,学者 JR Kingsburg 就针对三级菜单导航做可用性实验,对比 8 种导航组合,在完成明确任务的场景下,一级导航放置在侧边,用户操作效率更高,选择错误、操作犹豫的情况更少。

两种导航优劣势解析

image.png

左侧导航(侧导航) 优势:

  • 垂直排布,换行 + 缩进可以清晰展示多层级菜单;
  • 二级菜单常驻展示,不需要 hover 触发,用户对整体菜单结构一目了然,完成指定任务效率高。 劣势:会占用页面横向空间,压缩内容展示区域。 适用场景:任务驱动型网站,后台管理系统、邮箱、票务预订系统,代表产品:QQ 邮箱、公众号后台、携程后台模块。

顶部导航 优势:横向排布,几乎不占用横向空间,最大化释放内容展示区域。 劣势:二级菜单依赖 hover 悬浮唤起,鼠标移开菜单就消失,多层级导航的阅读、理解成本更高。 适用场景:内容消费型网站,资讯、图片、视频平台,代表产品:花瓣、知乎、爱奇艺。

同一个网站不同模块,也会混合使用两种导航:以百度为例,搜索浏览页面使用顶导航,给内容让出空间;进入个人中心,需要修改资料、管理收藏等明确操作,切换为左侧导航,提升功能查找效率。 很多综合网站会采用混合方案:顶导航承载登录、全局搜索这类通用能力,左侧导航承载细分业务菜单。

image.png

image.png

三、布局与适配:看懂 3 种适配方案,对齐开发预期

基础参数参考:

  • 侧导航宽度:常用200+8n的数值区间,208‑272px 都属于行业常见范围;
  • 顶部导航高度浮动较大,36‑80px,根据业务、视觉风格自由选择。

不同分辨率对应有安全内容宽度区间,设计时需要参考安全宽度,再结合栅格系统、适配策略确定最终内容区大小。

PC 网页一共 3 种主流适配实现方案,设计阶段就需要和前端对齐方案,避免后期返工:

1. 固定宽度布局

image.png

页面整体设定固定 px 宽度,无论大屏小屏,页面尺寸不会变化。 优点:设计还原简单,开发成本低; 缺点:兼容性差。小屏幕下会出现横向滚动条,大屏幕两侧留出大量空白。

2. 自适应布局(Responsive layout)

image.png

不改变页面整体模块排布结构,将 px 单位替换为百分比、rem,页面元素会跟随屏幕等比缩放,布局结构保持不变。 大多基于栅格系统实现,栅格由列(Column)、间距(gutter)、外边距(margin)组成,移动端设计规范,很多也是栅格体系的简化版本。

3. 响应式布局(Adaptive layout)image.png

依靠 CSS 媒体查询@media,针对不同屏幕断点编写多套样式,屏幕尺寸变化时,不仅元素大小改变,模块排布结构也会发生变化,大屏、小屏呈现不一样的页面结构。 优点:各尺寸体验最优; 缺点:需要维护多套代码,开发工作量大。 实操中,通常结合栅格系统 + 屏幕断点共同实现。

协作建议:设计输出前,提前与开发确认适配方案,约定最大、最小适配屏幕边界,搭建统一的栅格规范,大幅降低沟通成本,减少还原偏差。


总结

从零设计 PC 网站,不要直接陷入视觉细节:

  1. 画布先定基准,结合市场分辨率,计算真实可视首屏,保证核心信息可见;
  2. 导航看业务场景:任务型优先左侧导航,内容消费优先顶部导航;
  3. 适配提前对齐开发,分清固定宽度、自适应、响应式的差异,用栅格规范约束内容区。

转载:优设

 

 

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

 

image.png

日历

链接

个人资料

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

存档