首页

界面设计案例分享 | ComplyContro品牌&UI

杰睿 系统UI设计文章及欣赏

imgi_214_9f0c73226297935.683f29f07b819.png

imgi_775_146bae226297935.683f1fcc7bea5.png

imgi_784_ef7ed4226297935.683f29f07b253.png

imgi_789_2e8849226297935.683f1fcc7a7d5.png

imgi_794_02439d226297935.683f1fcc7a01b.png

imgi_801_e002ed226297935.683f29f0799dc.png

imgi_808_89d252226297935.683f28f9eb07f.png

imgi_817_b4ccb4226297935.683f289fc694a.png

imgi_821_90ae54226297935.6840132c29038.png

 

1. 项目背景 & 设计目标

  • 项目名称与内容:这是为 ComplyControl——一个专注金融领域的前沿 AI 合规模块(具备实时监控、智能检测与欺诈发现功能)的品牌形象与网站界面设计项目 Behance+1

  • 完成时间与平台:发布于 2025 年 6 月 4 日,整合品牌设计、网站 UI/UX 及用户界面,使用 Figma 与 Webflow 等工具进行创作与实现 Behance

2. 品牌视觉识别(Brand Identity)

  • 标志设计:图中展示了简洁现代的标志(logo),结构紧凑且具识别度,呈现强烈的科技感与专业感 。

  • 配色策略:项目运用了对比鲜明的暖色(如橙红)与冷色(蓝色),辅以深色底调,强化视觉冲击力,同时展现了兼具活力与稳重的品牌气质 。

  • 字体风格:在字体展示中可见清晰可读的无衬线体,搭配简洁的数字表现,进一步传达专业且现代的品牌语言 。

3. 界面设计(UI/UX & Website)

  • 移动界面布局:图中呈现了移动设备上的 UI 布局,包括导航菜单与交互按钮,采用扁平化设计,按钮与图标配色清晰,对焦用户操作体验 。

  • 数据可视化:图表或百分比数据显示以清晰简练的方式呈现关键指标(如 95%、40% 等),辅助用户快速理解核心内容 。

  • 整体风格语言:整体风格简洁、科技感强烈,布局逻辑清晰,强调功能与信息可视化,有助于金融产品的信息传递与可信感建立。

4. 工具与创作流程

  • 设计工具:项目中使用了 Figma 进行界面与原型设计,利用 Webflow 实现响应式网页开发与交互效果。同时还运用 After Effects、Photoshop 以丰富视觉表现与动画效果 。

  • 多方协同:项目由 Embacy Design 领衔,联合多位设计师及机构参与,展现了团队协作的深度与创意整合能力 。


总体评价与亮点

优点 描述
清晰品牌定位 通过色彩、字体与视觉元素的统一,传达了“科技 + 合规”的品牌主旨。
现代化视觉表现 配色对比强烈、界面干净、排版有序,符合金融科技产品的使用场景。
信息表达精准 数据视觉化突出、界面交互明确,提升用户理解与体验效率。
专业工具运用 Figma、Webflow、AE 等工具的融合使用提升了设计的实施效率与表现力。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

从零到上线:小程序开发全流程指南(含界面设计要点)

杰睿 移动端UI设计文章及欣赏

小程序已经不是什么新鲜事物了,从微信到支付宝,从抖音到百度,几乎每个主流平台都有自己的小程序生态。对企业来说,它是低门槛触达用户的工具;对个人开发者来说,它是快速试水产品想法的方式。

如果你从没做过小程序,不知道从哪下手,这篇文章会帮你理一遍全流程,并从界面设计的角度给出一些实用建议,让你从“想做”到“上线”不再迷茫。


1.明确目标与平台选择

小程序不是只有微信这一种,常见的平台有:

微信小程序:用户量大,生态完善,适合大多数应用场景。

支付宝小程序:金融、生活缴费、电商支付等场景强。

抖音小程序:适合内容带货、短视频场景导流。

百度小程序:搜索入口强,适合工具型和信息型应用。

建议:先想清楚你的目标用户在哪个平台活跃,再决定优先开发哪个平台的小程序。


2.注册与认证

不同平台的小程序都需要先注册账号:

注册开发者账号(企业、个体工商户、个人都可以,功能权限会不同)。

进行实名认证(企业通常需要营业执照,个人只需身份证)。

获取 AppID(这是你的程序唯一标识)。


3.准备开发环境

以微信小程序为例,开发环境配置步骤:

下载微信开发者工具(Windows/Mac 都有)。

选择语言框架

  1. 原生开发(WXML + WXSS + JS)
  1. 第三方框架(Taro、Uni-app、WePY 等,支持多端同时发布)

使用 AppID 创建项目(测试阶段可用“体验版”AppID)。


 

4. 设计与原型:从交互到视觉的桥梁

小程序虽然运行在移动端,但它并不是传统的 APP。它的页面切换、加载速度、交互逻辑都有一些特殊限制,所以 UI 设计需要有针对性。

设计要点

界面结构简洁 小程序的核心优势是“轻量”,用户希望在 13 步内完成操作。UI 结构建议保持 23 层深度,不要做复杂的菜单树。

尺寸与单位

  1. 设计稿一般用 750px 宽(对应 rpx 单位,自适应不同屏幕)
  1. 可触控区域最小建议 88rpx × 88rpx,避免手指误触。

一致性

  1. 按钮样式、色彩体系、字体大小在全局保持一致。
  1. 使用平台提供的 UI 规范(微信有 WeUI),减少开发适配成本。

首屏体验

  1. 保证 2 秒内展示核心内容。
  1. 可以用骨架屏或渐进加载提升感知速度。

适配多端主题 微信等平台支持暗色模式,设计时要考虑浅色/深色的对比度。


5.核心开发步骤

小程序基本文件结构:

.json:页面配置(导航栏颜色、标题、是否下拉刷新等)

.wxml:结构(类似 HTML)

.wxss:样式(类似 CSS)

.js:逻辑与交互处理

开发流程:

搭建项目结构

编写页面模板与样式

绑定数据与事件(MVVM 思路)

调试 API(如登录、支付、获取位置等)

进行真机预览


6.接口与数据

小程序常用的数据来源:

平台 API(如微信支付、用户信息、位置等)

自有后端接口(需要部署在可访问的服务器上,支持 HTTPS)

第三方服务(如云开发、BaaS 平台)

如果不想自己搭服务器,可以用 微信云开发,直接在平台提供的云函数、云数据库上写逻辑。


7. 测试与优化:别忽视视觉细节

除了性能测试,还要做 UI 视觉与交互测试

检查不同机型下字体是否过小或溢出。

确认交互反馈(点击高亮、按钮状态变化)是否及时。

检查色彩对比度,确保在户外光线下依然清晰可读。


8.提交审核与上线

流程:

上传代码到平台

填写版本信息与更新说明

提交审核(不同平台审核时间不同,一般 1~3 天)

审核通过后可发布上线

上线后,记得持续关注数据(访问量、留存率、转化率),不断迭代优化。

 

做小程序并不一定要是程序员,很多第三方平台和低代码工具(如 uni-app、Taro、HBuilderX、即速应用)也能帮助你快速上线。但理解基础流程和开发逻辑,可以让你在产品迭代中更高效、更有掌控感。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

界面设计 | 大屏设计 | Shipp-Logistics 交付管理应用 / UI/UX 设计

杰睿 大数据可视化设计文章及欣赏

Shipp-Logistics 交付管理应用 / UI/UX 设计

Shipp-Logistics 是一款面向中小型物流公司的交付管理应用,旨在提升配送效率、简化任务分配流程,并为司机提供清晰、可操作的任务指引。

本项目从用户研究出发,围绕“调度员-司机”双端交互流程,设计了完整的任务创建、路线规划、实时追踪与状态回报机制。UI风格采用模块化信息呈现+中性色调,兼顾操作高频与环境复杂下的可读性与点击效率。

关键设计亮点包括:

高端界面设计 | 数字产品 | Platformcraft-俄罗斯商业云存储产品

杰睿 大数据可视化设计文章及欣赏

 

Platformcraft 是一款来自俄罗斯的商业级云存储产品,致力于为企业提供稳定、安全且高效的文件管理与协作服务。其品牌视觉以字母“P”与云的图形结合为核心,简洁而富有科技感,象征着平台(Platform)与云端(Cloud)之间的高度融合。

从设计语言来看,Platformcraft 的标志设计强调结构感与数字秩序:

  • 标识构建基于几何网格,提升在不同尺寸与场景下的可识别性;

  • 色彩采用深蓝与渐变紫,传达出专业性与技术前沿感;

  • 在图标使用上,适配度极高,无论是在 Dock 栏、移动端应用或印刷场景中都保持极佳的清晰度与一致性。

这套视觉系统不仅提升了品牌辨识度,也为其云服务产品赋予了可信赖的第一印象,是典型的“技术驱动 + 品牌精致化”结合的典范设计。

imgi_144_d77009228742893.6858e2e3cce3d.png

imgi_246_ae80c9228742893.6858e2e3d2b57.png

imgi_248_cee6d9228742893.6858e2e3cbc14.png

imgi_767_089bd0228742893.6858e2e3cf2d2.png

imgi_772_794d94228742893.6858e2e3cc91c.png

imgi_774_0cf6bf228742893.6858e2e3d074a.png

imgi_776_7f0d9c228742893.6858e2e3cfb0b.png

imgi_778_866b35228742893.6858e2e3d1055.png

imgi_780_8903f4228742893.6858e2e3d4f2f.png

imgi_782_c8e308228742893.6858e2e3d5735.png

imgi_788_8a052b228742893.6858e2e3d33cc.png

imgi_792_678fd5228742893.6858e2e3d42d7.png

imgi_795_0c137b228742893.6858e2e3ced08.png

imgi_798_ccc6ad228742893.6858e2e3cb426.png

imgi_800_e2d205228742893.6859306545b14.png

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

人性化界面设计:模式

杰睿 大数据可视化设计文章及欣赏

你会怎么评价下面两款收音机收音机的设计?

索尼收音机

图1是索尼的一款收音机。它的面板右下方4*8依次排布的黑色按键分别对应了32个提前设置好的收音机。按任意一个按键,可以收到某一个收音机。

某货车收音机面板

图2是一个车载收音机。左边首先把收音机划分为三组。屏幕右下方的两排圆形按钮中,有一个是用来选择三组收音机的其中之一。剩下的1*6个按键来选定该组中的某一个收音机(如果需要切换AM-FM,操作还比较复杂)

以前索尼的无线电设计看起来很复杂,但它实际上更好用。因为每一个按键对应着同一个收音机,当用户熟悉了健身并使用习惯后,他们甚至可以不用揉捏操作面板,而直接通过手指触摸数字按下自己想要的按键。这样的操作即使是在黑夜中也能进行。前置遥控器的设计虽然减少了按键并节省了空间,却牺牲了易用性。因为这是该设计中引入了模式(modes):当用户使用同一个操作时,而系统由于不同的状态给出了不同的回应。

这里引入了《人性化界面》这本书推崇的一个主要原则:好的界面不应该存在模式。

如果无论系统状态如何,相同的用户输入总是会产生相同的结果,则系统是非模式的。

重要的概念

为了更好的理解模式和界面设计的关系,以下是一些需要了解的概念:

注意力点(locus of Attention):是指时刻我们意识的集中的地方。人类在任何时刻都有一个注意力点。你对这个点以外的区域是盲目的。比如当你集中注意力在阅读可能的文字时,就注意不到你的曼谷脊柱屏幕的顶端时间指针发生了变化。

夜间操作(手势):指用户对界面的一个连续的操作,可能是一个鼠标或双击。

模式(mode) : 针对一个操作,如果一个系统根据其当前的状态有不同的反应,就代表这个系统存在不同的模式,而每个一个模式下界面的反应是一致的

——比如作者非常反对的大写锁定键(Caps Lock):当这个按键被按下时,电脑处于一个大写输出模式中;当这个按键被再次按下时,电脑回到另一个模式;

— — 再比如所有电脑的电源键就存在模式。根据电脑当前的开关状态,同样按下电源会导致电脑开机或关机;

— — 还有 Photoshop 中的鼠标操作,在不同的绘画状态中,点击鼠标的结果是完全不同的。

界面模式的严格定义

为了从用户的角度讨论模式的利弊,作者进一步严格定义了界面模式:

针对用户操作: 1. 根据当前系统状态的不同而给出不同的反应,2. 并且此时的系统状态是在用户的注意点之外(即用户无法感知到的系统状态)此时就认为界面存在模式

  • 在这个定义下再看一个例子:键盘的删除键(退格/删除)。每当你按下删除键,被删掉的内容都是不一样的。因为但是人们往往注意力集中在即将被删掉的文字上,因此不构成模式。

模式是用户误操作和影响业余性的主要原因之一:因为用户没有意识当前的系统状态,因此无法了解到哪一个模式下,也不会知道自己的操作会带来什么样的结果。很多时候他们只能不断试错来完成任务,这也阻碍了使用习惯的养成。

对设计的启示

为了避免上述问题,界面设计应该完全采用Quasimode。Quasimode的是用户必须通过连续的物理操作让系统维持在某种特定状态下,并在此状态下避免引入某种模式。典型的例子就是电脑的Shift键,按下Shift的同时敲击键盘会进入大写字母输入模式。这样的优势在于连续的动作动作让用户时刻记住自己在某个模式中,从而不会误操作。

值得强调的是,遵循模式设计原则的产品往往也会影响盲人所用(可访问性设计)。因为模式的定义就考虑了人们的注意力集中点,而我们每个人对于我们注意力之外的事物,都是“看不见”的。

从非常真实的意义上来说,我们对于我们关注点之外的世界都是盲目的。

《人性化界面》的杰夫·拉斯金(Jef Raskin)是Mac的初代设计师和思考者。他相信机器的交互方式应该是人性化的:即交互的过程能够最大化作者的考虑并遏制我们人类的能力和缺陷。

本书的第二章为读者铺垫了很多重要的理论基础,而后面的章节会开始剖析和挑战我们平时习习的UI模式,比如文件夹,桌面,导航。

因为本书读完相见恨晚深受启发,决定开坑一系列读后感!

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

北京ui设计服务【原创】人工智能大模型管理平台UI设计案例分享

杰睿 系统UI设计文章及欣赏

 

项目背景

在当下数字化浪潮中,各类大模型如语言、图像生成模型不断涌现,企业与机构对其应用需求激增。然而,模型开发流程繁琐、部署成本高昂,不同模型间数据交互与共享困难重重。同时,模型性能优化、安全管理等问题亟待解决。在此背景下,大模型管理平台应运而生,它旨在整合资源,简化模型开发与部署流程,提升模型性能与安全性,为各行业高效利用大模型提供有力支持,助力人工智能技术深度融入业务。
该系统的原首页中信息量比较少,在设计时除了对页面美观的优化,从内容、布局、用户使用场景、使用习惯、交互方式等方 面也进行考虑,增加了一些统计的图表, 「历史访问信息」采用卡片式列表,突出模块和内容。同时增加「个人上传记录」信息和「历史访问信息」可以进行 切换查看。

项目概述

产品定位

大模型管理平台定位为人工智能领域的核心枢纽。它是模型全生命周期的智慧管家,从研发时整合数据与算法资源,到部署时适配多元硬件环境,再到运营中实时监测性能,全方位守护。同时,它也是跨行业的赋能引擎,为金融、医疗、制造等行业提供定制化模型服务,加速业务智能化转型。

目标用户

大模型管理平台的目标用户广泛且多元。科技企业研发团队、金融机构从业者、医疗行业的研究人员和临床医生、教育领域的课程开发者与教育科技企业。此外,政府部门进行城市规划、交通管理等决策时,也能从平台获取支持。这些用户都期望通过大模型管理平台,挖掘数据价值,实现业务的智能化升级 。

设计风格

系统首页重构信息组织架构,丰富信息 和数据,同时页面采用精美的图标和小 插图提高页面的精细美观度。 设计风格采用简约的设计语言,清晰、 简洁和直观的表达方式,模块化布局, 强调的是界面强调可复用性和通用性, 配色采用经典蓝色,蓝色具有很好的兼 容性,可以与多种颜色搭配使用,形成 和谐的视觉效果。
 
 

设计亮点

首页其他方案欣赏

 

「原创」ui设计 | 数据可视化意义

杰睿 设计管理与成长

 

无论你是产品经理、设计师、数据分析师,还是企业管理者,现在都绕不开一个话题:数据可视化
它不仅是图表,更是认知效率、决策效率和沟通效率的三重提升器。
但问题是——
数据可视化的真正价值不是“图画得好看”,而是“让数据真正能被理解和使用”。
这篇文章,我想和你聊聊它的本质意义、使用场景和设计要点。

 一、数据可视化的核心意义:三大关键词

  1. 理解:从“信息”到“洞察”
大量原始数据往往是无序抽象的。比如一个 CSV 表格里的几百行用户行为数据,你很难从中直接看出模式或异常。
而通过可视化,比如热力图、分布图、关系图,你可以:
  • 快速看出用户在哪个页面停留时间最长
  • 找到销售额波动与节假日之间的关联
  • 识别出系统哪个模块的报错频率最高
 可视化把“信息”转成了“洞察”。

  1. 沟通:跨角色的信息桥梁
你有没有遇到这种情况:
  • 技术写了一堆接口日志,老板看不懂
  • 产品写了一堆用户行为描述,开发理解偏差
  • 数据分析做了几页表格,运营说“太复杂了”
这些问题的底层,是信息的语言不统一
图表,是各角色之间最通用的语言。一个好的仪表盘,让技术知道重点,业务知道异常,老板知道方向。
可视化是跨角色协作的**“公共语境”**。

  1. 决策:支持及时、量化的判断依据
没有数据支持的决策,基本靠感觉。而没有可视化支持的数据,大多沉睡在数据库里。
比如,你在做这些决策时:
  • 哪个页面需要重点优化?
  • 用户从哪一步骤流失最多?
  • 运营活动ROI值到底多少?
如果没有可视化,你就只能翻一堆表格和SQL。 有了可视化,一眼看懂趋势、结构和异常
 可视化提升了决策速度 + 准确性,对商业来说是直接价值。

 二、常见可视化类型与使用场景

可视化类型 常用图形 场景举例
趋势图 折线图、面积图 日活变化、收入走势
比较图 柱状图、条形图 不同渠道对比、用户量对比
结构图 饼图、树图、旭日图 用户构成、品类占比
分布图 散点图、箱型图 用户活跃度、价格分布
流程图 桑基图、漏斗图 用户转化路径、行为流
地图图 热力图、地理图层 城市分布、物流路径
 一个优秀的数据仪表盘,不是图表堆砌,而是围绕目标问题+场景任务进行设计组合。

 三、容易被忽略的设计误区

  1. 以“图形好看”为目标,而非问题导向
错误例子:“我们加个3D柱状图看起来高端一点。” 正确方式:先问清楚业务要判断什么问题,再选图形。
  1. 一页显示太多,信息密度超载
“十个图表一屏”,结果没人看得懂。可视化应该分层次、分焦点、按角色定制。
  1. 忽略数值细节(单位、时间维度)
图表不标注单位,不注明时间区间,很容易误导。

四、数据可视化的思维转变

旧思维 新思维
图表是“美化”工具 图表是“决策”工具
先画图再找指标 先定义问题再设计图
数据放可视化页面就好 数据要讲故事、有节奏、有引导
一页尽量放满图表 每张图要有目的,能引导结论

 五、推荐几个数据可视化入门资源

  • 《Information Dashboard Design》 — 可视化设计经典书籍
  •  《The Visual Display of Quantitative Information》 by Edward Tufte
  •  工具:Tableau、Power BI、DataV、Apache ECharts、D3.js、AntV G2

 写在最后:数据不是图,是故事的线索

好的数据可视化,不是炫技的图表拼图,也不是堆叠的信息墙,而是一个个有逻辑、有问题、有方向的洞察过程
它帮你看见问题,理解用户,发现机会。
所以真正重要的不是“怎么画图”,而是“你想看清什么”。

如果你也想从0入门数据可视化,或者在做仪表盘设计、业务数据图表决策时遇到困惑,欢迎在评论区交流想法。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
 

界面设计:Web3场景下,大屏设计中的用户体验要点解析

杰睿 设计思维

73e3b0a4-2ff5-4175-beb1-2d4510ce87bc.png

d65a7188-3597-4010-9533-c1bb1e02b796.png

在传统互联网产品中,数据看板和仪表盘是常见的管理工具。而随着 Web3 技术的发展,链上行为、资产状态、合约执行等信息变得越来越复杂,如何可视化地理解这些动态数据,成为产品设计中的新挑战。
在这一背景下,数据大屏逐渐成为 Web3 项目方、平台运营方、审计安全机构等角色的重要信息枢纽。但在实际设计过程中,许多大屏项目容易陷入“炫酷外观”而忽略了核心交互体验。
本文将从交互设计的角度,探讨 Web3 场景下的大屏设计应关注哪些用户体验要点,避免“看上去很厉害,却没人真正在用”的设计误区。

一、Web3应用为何需要大屏?

Web3 应用天然拥有强数据属性:去中心化交易、流动性池、区块链浏览器、智能合约调用……背后都对应着高频、高维度、链上链下混合的数据系统。
大屏在 Web3 中的主要使用场景包括:
链上运营监控:例如 DEX 交易量、TVL 变化、用户活跃趋势
安全审计看板:异常交易预警、地址聚集行为识别
链级数据展示:Gas 消耗趋势、区块出块速度、矿工分布等
多链资产管理:跨链桥资产流通图、跨链交易流向展示
这些场景中的共通点是:数据变化快、维度多、使用者需要“实时看清”并“快速判断”。这也是大屏发挥价值的关键。

二、Web3大屏设计的5个核心用户体验要点

  1. 可读性优先于炫酷感
Web3 的数据普遍较为抽象,如交易哈希、钱包地址、Gas 费用、TVL等,对非专业用户甚至部分运营者而言并不直观。
在这种背景下,大屏首要设计目标是让用户“看得懂”,而不是制造视觉噱头。
设计建议包括:
使用足够大的字号和清晰的字体(避免细线体在大屏上模糊)
色彩控制在 2~3 个主色 + 层级灰色,避免过多亮色干扰焦点
图表需具备必要的坐标轴、单位标注、异常标记,不应纯粹装饰化
简洁比花哨更重要,清晰比动效更关键。

  1. 实时感知与状态提示
Web3 的链上数据具有强实时性,许多核心指标在数分钟内可能出现剧烈波动。因此,大屏必须能体现“当前状态”以及“更新节奏”。
建议包括:
明确标出“数据更新时间”,让用户知道当前信息的时效性
对关键变化支持动效强调,如箭头上扬/下降、数值闪动提醒等
异常状态颜色需与正常状态明确区分(避免“全绿”或“全蓝”)
此外,设计中应尽量避免让用户怀疑数据是否卡住了,这会极大削弱其对大屏的信任度。

  1. 异常可感知,支持预警反应
大屏不只是展示,更应该帮助用户“识别风险”或“发现机会”。
在 Web3 应用中,这种“感知”尤为重要,比如:
某地址在短时间内发生大量交易 → 潜在恶意行为
某资产流动性短时间骤降 → 潜在清算风险
合约调用量瞬时异常上升 → 可能被攻击或刷单
设计中可引入以下机制:
颜色警示(如红、橙色信号)
简洁文案说明(如“交易量骤增 300%”)
可展开详情但不跳转页面,降低阅读负担
将这些机制融入 UI 组件,可以极大提升大屏的实用性。

  1. 信息层次清晰、模块布局可读
由于大屏往往信息密集,如何组织信息成为交互设计的核心难点。
推荐的分层方式:
第一层:核心概览指标(如总交易量、活跃地址、Gas趋势)
第二层:分区域信息块(如按链分类,或按用户/合约分类)
第三层:详细趋势图/交易列表等可拓展内容
使用模块化的卡片布局、留白区分信息块,可以帮助用户在几秒内抓住重点,避免“眼花缭乱”的阅读体验。

  1. 可维护、可扩展、可适配
Web3 数据结构在不断演变:新增协议、新增链、新增地址标签……这就要求大屏具备良好的可维护性。
设计策略包括:
所有数据组件可复用,如“标准图表组件”、“警示模块”、“K线区块”
UI 布局具备适应不同分辨率的弹性(如1080p/4K/LED拼接屏)
尽量使用“数据结构驱动的渲染逻辑”,而非固定死图布局
在设计前期明确这些要求,可以大幅降低后期重构成本。

 
Web3的大屏设计,不是为了炫技、也不是为了迎合形式,而是为了帮助人们在复杂数据中看清趋势、发现问题、做出反应。
它的真正价值在于:
降低理解门槛
提升监控效率
提供可视化决策支持
 
 
在这个数据密集、变化迅速的领域,交互设计师的任务,就是为用户建立起这座“可感知的桥梁”。
 
如果你正在设计或评估一块 Web3 场景下的大屏,不妨从以上几点出发,重新审视它是否真正服务了使用者的体验,而不仅仅是满足了展示的需求。
如果你有正在推进的 Web3 数据大屏项目,欢迎留言交流你的设计思路与挑战,我也会持续更新关于 Web 应用与交互设计的专业观察。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

【原创】交互设计案例分享:资源库网站设计

杰睿 交互设计及用户体验

 

项目背景:

随着生态保护意识提升,青海丰富的鸟类资源亟待数字化呈现与科普推广。为打破信息分散壁垒,助力科研、生态教育及观鸟爱好者交流,客户想要造青海鸟类资源库网站,以专业、直观、易用的 UI 设计,串联鸟类数据、科研成果与公众认知 。
该项目是与青海师范大学合作的[青海鸟类资源库]网站交互及UI设计,青海师范大学是我们的老客户了,本次项目我们也是从前期的内容整理归纳、交互原型设计、UI设计,再到最后的客户后期的开发还原度走查工作,最终实现的效果也获得了客户的认可。

项目概述:

产品定位:聚焦青海鸟类生态,打造集科普教育、科研辅助、观鸟互动于一体的数字化平台。既为专业学者提供精准数据检索、学术成果展示窗口,也向大众普及鸟类知识、传播生态保护理念,成为青海鸟类生态对外展示的 “数字名片” 。
目标用户:需求精准数据查询、学术成果沉淀与共享,关注知识图谱、文献列表等功能模块的科研学者;热衷鸟类科普、观鸟活动,期望通过直观界面了解物种、观测历程的生态保护爱好者;以轻松方式接触生态知识,侧重可视化展示(如地图分布、演化流程)与趣味互动(评论区、相关鸟类推荐 )的普通公众。
设计风格:色彩以青海地域元素为灵感,蓝天、雪山、湖泊蓝白渐变打底,搭配鸟类羽毛自然色调,营造清新、贴近自然氛围;布局遵循 “信息分层、高效浏览” 原则,大模块分区清晰,用卡片式设计承载内容,既保证视觉呼吸感,又通过微交互增强科技感与操作流畅性
 

设计亮点与价值:

知识图谱可视化:以鸟类为核心,关联栖息环境、食物链等信息,通过动态交互图谱,让用户直观理解物种生态关系,打破知识传播壁垒;
精准服务多元需求:为学者设计文献检索、数据统计模块,支持高效科研工作;为爱好者打造观鸟圣地推荐、实时评论互动,构建交流社区;为大众简化信息层级,用大图、短文案、轮播展示核心内容,降低科普门槛。
品牌与生态共鸣:通过统一视觉语言(如 Logo 融入鸟类形态、底部生态友好链接),强化 “青海鸟类保护数字阵地” 品牌认知,让用户在浏览中自然产生生态守护认同感,助力青海生态文化传播。
 
 

日历

链接

个人资料

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

存档