首页

审美积累 | 这样的网页仪表盘怎么做?

杰睿 平面设计

refero.design 8956.jpg

refero.design 83296.jpg

refero.design 83329.jpg

refero.design 106677.jpg

先说流程:

信息架构 → 低保真线框 → 设计规范(色彩、排版、间距) → 组件化 UI → 图表可视化 → 数据对接 API

一、设计方法论(UI/UX 角度)

这些仪表盘的共同特点是:
左侧导航栏
  1.   固定位置,模块清晰(Overview、Reports、Settings 等)。
  1.   常用功能置顶(Search、Home、Feedback),增强效率。
  1.   用图标 + 简短文字,提升辨识度。
顶栏(Top Bar)
  1.   包含搜索框、通知、用户信息、设置按钮。
  1.   一般是浅色背景,弱化视觉,突出内容区。
卡片化布局(Cards Layout)
  1.   各种数据、图表都放在卡片中,统一留白、圆角、阴影。
  1.   这样用户在视觉上能快速分组信息,不会混乱。
图表与数据可视化
  1.   折线图(趋势)、柱状图(对比)、饼图(分布)、数值卡片(关键指标)。
  1.   常用库:Recharts、ECharts、Chart.js、D3.js。
层级感与留白
  1.   使用浅灰色背景 + 白色卡片。
  1.   保持 8/16/24 的间距体系。
  1.   字体大小分层(标题 h1/h2、内容 text-sm)。
交互体验
  1.   Hover 态有轻微高亮或阴影。
  1.   按钮有主次(主色按钮突出操作,次色按钮低调)。
  1.   支持筛选、搜索、切换时间区间。
 

二、技术实现(前端开发角度)

技术栈选择
前端框架:React / Vue(推荐 React + Next.js)
UI 框架:Tailwind CSS / Ant Design / Material UI(推荐 Tailwind,灵活)
图表库:Recharts / ECharts / Chart.js(推荐 Recharts,简单易用)
状态管理:React Query / Redux / Zustand
数据来源:REST API / GraphQL
 

三、参考工具

  • 设计工具:Figma / Sketch / Adobe XD(先做 UI 设计稿)
  • 前端组件库:shadcn/ui + Tailwind,能快速做出类似截图的简洁风格
  • 图表库:Recharts(React 专用)、ECharts(可定制更强大)

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

审美积累 | 信息卡片设计

杰睿 平面设计

《简约至上》
核心策略:书中提出四种简化界面的策略:
Remove(移除)
Hide(隐藏)
Organize(组织)
Displace(位移)
在具体的卡片设计中如何应用?
 
卡片设计的 6 个关键要点
在现代 Web 和移动端界面中,卡片(Card UI) 是非常常见的设计模式。它能够把内容模块化、结构化,让用户在浏览时更快获取关键信息。但卡片设计看似简单,真正要做得好,需要在细节上把握很多要点。
本文总结了卡片设计的六个关键方面,帮助设计师在实践中少踩坑。
 
信息层级清晰
突出主信息:标题、图片或关键数据应该一眼可见。
避免信息过载:不要在一张卡片里塞入过多文本或操作,保证“轻量可扫”。
合理留白:用分隔和留白来区分不同信息模块,让视觉呼吸更顺畅。
 
视觉统一性
样式一致:圆角大小、边框线条、阴影样式要统一,避免出现割裂感。
排版统一:在同一列表中保持卡片高度一致,即便内容多少不同,也要在视觉上整齐。
图片比例统一:统一图片宽高比例,避免界面错落凌乱。
 
可交互性设计
点击范围明确:整卡可点还是只有按钮可点?要有清晰规则。
交互反馈:点击、悬浮、加载时要有视觉反馈(如阴影变化、颜色高亮)。
层级感:重要交互按钮要突出,不应被次要元素干扰。
 
响应式与适配
自适应布局:在不同屏幕尺寸下,卡片能自然换行或缩放。
网格系统:通常结合 2/3/4 列布局,保持卡片整齐排列。
内容裁切:注意标题或图片在多端适配时不会被裁掉关键信息。
 
强调可扫描性
模块化信息:卡片承载的是信息块,用户往往是快速扫视而不是精读。
视觉锚点:图片、标题、按钮等应构成自然的浏览动线。
一致的阅读节奏:避免内容结构混乱,破坏用户的浏览流畅感。
 
性能与加载
懒加载:在电商、资讯流等场景下,大量卡片应分批加载,避免一次性过重。
骨架屏:在加载时用骨架屏替代空白,提升用户对速度的感知。
 
一张好的卡片应该具备:
信息清晰 —— 一眼看到重点。
视觉统一 —— 风格一致,整齐有序。
交互明确 —— 可点区域和反馈清晰。
适配灵活 —— 多端展示无压力。
可快速浏览 —— 支持扫视而非精读。
加载体验好 —— 在内容量大时依然流畅。
✨ 卡片看似是“小组件”,但它承载的是用户对信息的第一印象。做好卡片设计,就是在为整体体验加分。

0c57afabd6f4fdc67e272573eabd75ef.jpg

41b3e7c421c0b5163740d0796f95dfeb.jpg

53fab759c1bc3f1c65400c9c89e26f74.jpg

2045f2f982c19e66db6ebd40a8b84b3b.jpg

220565520b90b79a9161b4cf0e7358ed.jpg

a53bcc15a36936226ec0cfea03af3d36.jpg

e7a2886011b7ced85b4fc488d384fb55.jpg

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

审美积累 | 磨砂蓝 | AirLume.Ai

杰睿 平面设计

imgi_619_f36c19233665905.68b443a7dc028.png

整体视觉很现代、科技感强,属于典型的 新一代 SaaS / AI 工具型着陆页风格
  1. 版式(Layout)
  • 整体结构:采用 纵向单页滚动式结构(Landing Page 常见模式),用户可以顺序获取产品卖点、功能点、用户评价和转化按钮。
  • 模块化清晰:首屏价值主张 → 功能介绍 → 积分体系 → 工作流程 → 用户评价 → CTA(再次引导转化)。这是一条典型的 用户认知—说服—转化路径。
  • 对齐方式:中轴对齐为主,辅以两侧分栏(如功能点卡片区),保证了页面整体统一感和阅读节奏。
  • 留白运用:上下模块之间保持了较大留白,避免信息堆叠,让用户滚动时感到轻松、不压迫。

  1. 色彩(Color Palette)
  • 主色:深蓝到紫色的渐变,带来 科技感、信赖感,也贴合 AI / 智能搜索的品牌定位。
  • 点缀色:白色(清爽背景)、亮蓝色按钮、浅灰辅助背景。整体配色清晰,层次分明。
  • 高亮元素:价格卡片、按钮等采用明亮蓝/紫光晕效果,突出“点击感”和可交互性。
  • 氛围感:渐变与光效(如首屏小火箭、发光边框)让页面呈现未来感,但没有过度炫技,保持了商业友好。

  1. 字体(Typography)
  • 字体风格:无衬线体,简洁、现代,符合科技与 SaaS 产品调性。
  • 层级区分
    • 标题(H1/H2)字重更粗,字号大,常用白色或深蓝对比背景,突出信息重点。
    • 副标题和描述文案字体偏细,字号适中,保证信息量承载。
    • 按钮和关键数字(如“13,200 points”)字体更大更显眼,强调可操作性与利益点。
  • 可读性:字距、行距控制合理,配合留白,整体阅读体验流畅。

  1. 组块(Content Blocks)
  • 首屏(Hero Section):大标题(价值主张)+ 动效图标(火箭)+ CTA 按钮,立即传达核心价值“Save Time & Money”。
  • 功能区(Features):采用 网格卡片布局(两行四列),每张卡片有图标+标题+简述,信息可快速扫描。
  • 积分体系(Loyalty Points):通过图表、数字、视觉对比展示收益机制,强化“用得越多越省钱”的心理暗示。
  • 流程区(How it Works):采用 分步卡片(Step 01, Step 02…),降低用户认知负担。
  • 用户评价(Testimonials):引用式卡片+用户头像/星级,增强信任感。
  • 尾部 CTA(Call-to-Action):再次强化“开始 AI 搜索”的操作,典型转化闭环设计。
  • 页脚(Footer):品牌 Logo、导航菜单、社交媒体链接,保证完整性。

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

【游戏界面设计分享】《DUNE|Personal Work》

杰睿 平面设计

imgi_34_3db6b6213486985.6747309f530b9.png

imgi_35_773966213486985.6747309f52652.png

imgi_36_9a1e76213486985.67585eae083fc.png

imgi_90_456a13213486985.67585eae07f18.png

imgi_91_80499a213486985.67585eae08911.png

从《沙丘》UI概念设计看游戏界面经验

前几天在 Behance 上刷到一个《DUNE|Personal Work》的 UI 概念项目,整体完成度很高。作为设计师,我觉得这类作品不仅是视觉享受,也能总结出一些值得借鉴的经验点。这里就结合其中的阵营选择界面和整体展示,整理一些观察和思考。


1. 版式与结构:焦点与对称

这类「阵营选择」场景,本质上是一个决策界面。作者采用了很经典的结构:

  • 中央突出:当前选中的阵营(走私者)放在正中间,卡片更大、更亮,带有金色光晕。

  • 对称排布:左右阵营呈对称分布,层级自然清晰,符合玩家的浏览动线。

  • 信息分区:上半部分是角色立绘和阵营徽记,下半部分是机制说明和操作提示。模块分明,不容易迷失。

经验点:在决策型界面中,居中放大+光效高亮,是非常直接有效的焦点策略。


2. 视觉语言:氛围与辨识

《沙丘》的世界观强调沙漠、贵族与荒凉感,UI 也延续了这一氛围:

  • 材质:背景有金属与沙尘质感,带来厚重感。

  • 色彩:每个阵营配有主色(绿色、棕色、蓝色、金色、红色),既强化辨识,又有“品牌”味道。

  • 徽记:几何化的阵营符号,简洁且容易记忆。

经验点:大型世界观游戏的 UI,最好在颜色、图形符号和氛围感上形成自洽体系。


3. 信息呈现:符号化与层次感

在阵营说明区,信息拆解得很合理:

  • 优缺点:红色 V 表示劣势,绿色 ▲ 表示优势。非常直观,不需要额外解释。

  • 叙事与机制结合:不仅给数值效果,还加了剧情描述(例如与弗瑞曼的冲突),让选择更有代入感。

经验点:把理性信息(数值)和感性信息(剧情)结合,能让玩家在选择时既动脑又动情。


4. 交互与引导:清晰的操作提示

底部的操作提示很细致:

  • A 选择 / B 详情 / X 故事,分别对应不同层级的操作需求。

  • 玩家既可以直接做决定,也可以深入剧情,满足不同类型的用户。

经验点:关键节点上提供“浅 → 深”不同层级的操作选项,能兼顾快进型玩家和沉浸型玩家。


5. 作品展示方式:完整体验

Behance 项目整体除了界面,还展示了:

  • 不同场景的 UI(例如主菜单、HUD、资源界面)。

  • 色彩与符号系统,确保整体一致性。

  • 工具说明(Photoshop / Midjourney / 后期合成),透明展示流程。

经验点:在作品集展示中,不仅要秀界面,还要展示系统性思考和设计过程。


总结

这份《DUNE》个人 UI 概念作品给我的几点启发:

  1. 决策型界面要突出焦点,用对称和光效增强层级。

  2. 色彩与符号体系是阵营/角色类 UI 的关键资产。

  3. 信息既要数值化,又要叙事化,提升代入感。

  4. 操作引导要考虑不同层级的玩家。

  5. 作品集展示不仅是炫图,还要有系统设计思路。

如果你正在做游戏 UI 或作品集,这些经验都值得借鉴。

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

 

 

自适应UI设计解读 | Fathom 企业人工智能平台

杰睿 平面设计

Fathom 是一款面向企业级应用的尖端 AI 平台,核心优势在于自适应能力计算机视觉。它不仅能处理复杂的视觉识别与分析任务,还能根据不同行业场景灵活调整算法与工作流程,从而帮助企业提升自主性与运营效率。

imgi_558_original-cfc8f340944bd01924c634d555e72be6.png

imgi_577_original-0fd0acbe1a444df4948ccac15ee7e154.png

imgi_578_original-3c9ad24be39584ad4da43c3662e7694d.png

imgi_593_original-574886f35c53c61f34116c817245732e.png

original-dee23ad37d652ffadb312fd286efa806.png

该平台具备以下特点:
行业通用性 – 无论是制造、物流、零售还是医疗,Fathom 都能快速定制并部署适配的解决方案。
先进计算机视觉 – 高精度图像识别、目标检测、异常监测等能力,为生产与决策提供可靠数据支撑。
创意到落地 – 提供从构思到市场化的一体化工具链,简化研发和上线流程。
高性能架构 – 优化计算资源利用,确保大规模数据处理的速度与稳定性。
Fathom 的定位不仅是一个工具,更是企业在 AI 转型道路上的战略伙伴,让复杂的人工智能能力变得易用、可扩展、可持续。
 
一、设计语言分析
主题色调与氛围
  主色是深紫 + 黑蓝渐变,营造科技感与未来感。
  视觉重心在中上部,暗背景下的亮色文字和光晕效果强化了“高端、尖端科技”印象。
  渐变色和星空背景暗示了“无限可能”“前沿探索”。
字体与排版
  标题使用大字号无衬线字体,简洁且有张力,强调专业性。
  副标题与正文采用中等字重,行距宽松,提升可读性。
  层级分明:H1 > 功能标题 > 描述文字。
信息结构
  顶部:品牌定位(“The World's Leading Computer Vision Platform”)+ 快速行动按钮(CTA)。
  中部:可信度背书(合作品牌 Logo)。
  下部:功能模块 + 价值点 + 成功案例。
  时间轴形式呈现“从想法到落地”的流程,有助于理解产品生命周期。
图形与图标
  圆形、轨道、节点等几何元素强调“系统化”“科技环绕”概念。
  图标色彩与模块背景形成对比,快速区分不同功能。
  动态化暗示(虽然是静态图,但布局让人感觉到运动轨迹)。

二、可迁移的设计要点
视觉风格迁移
  如果你做企业级 AI 或 SaaS 产品介绍页,可以借鉴这种深色渐变背景 + 光晕 + 宇宙/星轨的氛围,强化科技与未来感。
  在其他行业(如金融、医疗)迁移时,可将主色换为品牌色或更温和的深色系,保留渐变和光效结构。
结构布局迁移
  上部:一句话定位 + CTA(方便立即引导用户操作)。
  中部:信任背书(客户 Logo、数据成就)。
  下部:功能模块化 + 价值点图标化。
  收尾:真实案例或用户评价(提升可信度)。
  这种结构可直接迁移到任何产品着陆页。
动线迁移
  从“愿景 → 信任背书 → 功能亮点 → 解决方案 → 案例”的信息节奏,降低用户流失。
  如果迁移到你的 UI/UX 分享内容,可改为“趋势背景 → 案例亮点 → 应用技巧 → 实际案例 → 互动引导”。
视觉细节迁移

金融科技产品主视觉设计

杰睿 平面设计

1.jpg

Renforce
*品牌身份
*创意方向
*数字设计
Renforce 是一个面向复杂技术生态系统组织的运营技术平台,旨在简化对定性与定量信息的端到端管理。借助先进的人机协同技术,Renforce 为日常运营提供稳健、高效且简洁的解决方案。

为了体现 Renforce 在效率与准确性上的价值主张,设计概念取材于“正方形”这一形状。
正方形是人类最常用的几何形状之一,令人着迷的是,如此简单的形态却能支撑从复杂技术到大型建筑的各种应用。它象征着精准、高效与简洁。以正方形为核心元素,品牌标识与设计系统由此构建。

2.jpg

3.jpg

imgi_726_2f9186204124853.66a336e48771d.jpg

imgi_727_728512204124853.66a336e48a7d5.jpg

imgi_729_209e30204124853.66a336e48928e.jpg

imgi_734_e5c9ec204124853.66a336e48867b.jpg

imgi_735_dc8a9e204124853.66a336e4899a3.jpg

imgi_4072_91974c204124853.66a336e3a1863.jpg

 

 

 

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

 

【原创案例分享】插画设计:水处理设备2.5D、2D器械插画设计

杰睿

项目背景:

该项目常州科德水处理成套设备股份有限公司委托设计,致力于水处理领域相关设备的视觉呈现,通过精心设计的3D与2.5D插画,生动展现各类水处理设备的结构细节与工作原理。我们旨在以直观、易懂的方式,提升公众对水处理技术的认知与兴趣。
为企业客户提供高质量的软件UI图标设计,助力其在环保领域的品牌形象塑造与市场推广。通过专业的插画设计,我们期望能够提升软件ui美观度和美誉度,引导更多人对水资源保护与可持续利用的关注与思考。

项目概述:

产品定位

产品定位为一款集科普、宣传与营销于一体的水处理设备插画设计。通过3D与2.5D视觉呈现,旨在直观展示设备细节与工作原理,提升公众认知,同时为企业客户提供高质量的视觉宣传素材,助力其品牌形象塑造与市场拓展。

目标用户

目标用户包括广大公众、水处理领域专业人士及企业客户。公众用户希望通过插画了解水处理技术;专业人士则关注设备的结构与原理;企业客户则寻求高质量的宣传素材以提升品牌形象。

设计风格

设计风格以科技感与直观性为核心,结合3D与2.5D技术,注重细节呈现与色彩搭配,营造出既专业又不失趣味性的视觉体验。通过精准的线条与光影处理,使插画作品既具有教育意义,又具备艺术美感。
 
 

2.5D插画风格

2.5D插画风格是一种介于2D和3D之间的插画艺术表现形式,是一种用二维手法表现三维效果的插画风格。它结合了二维的平面简洁和三维的立体空间感,给人既简单又富有深度的视觉体验。
 

气浮装置插画设计

2.5D的插画绘制方法让画面看起来更加的简洁、精美且充满活力。同时,足够丰富的细节装饰会带来耐人寻味的效果,能够迅速吸引观者的眼球。
 
 

刮泥机插画设计

通过二维手法表现出三维效果,让整个装置更具立体感。运用巧妙的透视和光影,在平面上营造出类似真实场景的深度感,能让观众直观地感受到处理装置的各个部分功能的空间位置,清晰的指导工作。
 
 

行车插画设计

2.5D插画不需要像3D绘画那样考虑复杂的模型构建和精细的纹理映射,降低了创作难度,同时降低了设计成本,设计效率也更加高效。
 

2D插画风格

2D插画风格,即二维插画,是一种在平面上展现的艺术形式,具有表现力强、风格多样、易于创作、适应性强、传达信息直观以及情感表达丰富等优点。
 

气浮装置插画设计

通过线条、色彩、形状和构图等元素,对该设备进行2D插画的重新创作,在图形、颜色表意上对各个功能区的分布、作用进行清晰传达。
 
 

刮泥机插画设计

2D插画的绘制过程比较简单,不需要复杂的建模和渲染技术。根据客户给的参考或者沟通讲解,确认符合行业以及设备特点的色彩及元素构成手法,产出精美、准确的设备插画。
 
 
 

行车俯视图插画设计

2D插画能够直观地传达信息,使观众更容易理解和接受。工业产品的设备介绍中应用广泛。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

UI 设计中的胶囊和弹窗设计

涛涛

该网页聚焦 UI 设计中的胶囊和弹窗设计,展示了大量各类商业活动的 banner 设计案例,涵盖电商促销、节日营销、会员福利、课程招生等多个场景,体现了胶囊按钮与弹窗在商业设计中的广泛应用,为相关设计提供了丰富的实践参考。

UI设计中的胶囊和弹窗设计

涛涛

该网页聚焦 UI 设计中的胶囊和弹窗设计,展示了大量各类商业活动的 banner 设计案例,涵盖电商促销、节日营销、会员福利、课程招生等多个场景,体现了胶囊按钮与弹窗在商业设计中的广泛应用,为相关设计提供了丰富的实践参考。

字体设计中把控 “形与势” 的方法及创意形态的挖掘

涛涛

本文主要介绍了字体设计中把控 “形与势” 的方法及创意形态的挖掘

日历

链接

个人资料

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

存档