首页

兰亭妙微审美积累 | 插画与ui结合的APP设计

杰睿 设计资源

jhk-1760694999284.jpg

jhk-1760695005621.jpg

jhk-1760695009572.jpg

jhk-1760695049387.jpg

jhk-1760695088683.jpg

APP插画情感化设计的核心思路,其实是审美和功能不脱节!
 
1. 先拆场景需求:美妆APP要突出专业感,儿童类要够童趣,跟着功能和用户情绪来定方向,设计才不脱离实际使用场景。
2. 插画风格统一适配:从扁平化手绘、绘本童话这些细分风格里选匹配的,整套设计保持线条、色彩、形象比例一致,避免视觉割裂,加深用户记忆。
3. 色彩兼顾情绪和层次:用色彩心理学传递品牌情绪(比如低饱和色显沉静),再通过“主色-辅色-中性色”划分界面层级,既传情绪又突出功能、承载信息。
4. 插画不只是装饰:和功能深度绑定,比如用人物互动插画暗示社交属性,儿童APP用童话角色做交互按钮,降低用户认知成本,还能承载功能逻辑。
 
 

用户体验设计公司·兰亭妙微审美积累|教育系统设计

杰睿 设计资源

在现代教育系统中,设计不仅是界面的美观,更关乎学习效率与用户体验。一个好的教育系统,应让教师管理便捷、学生学习高效,同时信息清晰、操作直观。通过合理的模块划分、直观的导航和可视化数据呈现,教育系统能够帮助教师快速掌握课堂动态,帮助学生轻松获取知识。界面设计的每一处细节——从色彩搭配、排版布局到微交互动效——都影响着用户的专注与操作感受。优秀的教育系统设计,不仅提升教学效率,更让学习成为一种舒适自然的体验,让教育科技真正服务于师生的需求和成长。

色彩柔和,学习氛围更轻松

Skillzone 选用柔和的紫色为主色调,紫色常给人智慧、有创造力的的感觉,很符合教育的特点。再搭配简洁的黑白
色,既让界面看着清爽,又能通过色彩区分不同功能区。像左侧侧边栏用黑色,主界面用浅紫和白色,这样大家
能快速找到想看的内容,长时间学习也不容易觉得视觉疲劳,学习氛围更轻松。

布局清晰,操作一目了然

网站采用侧边栏加主内容区的布局。左侧侧边栏列出 "Dashboard (仪表盘)""Courses (课程)""Teachers (教
师)" 等功能,老师和学生能一键直达想去的板块。主内容区按功能模块化,比如支付页面,银行卡信息用卡片
展示,交易明细用列表呈现;测验页面分栏显示课程进度和题目,信息传递高效,不管是老师安排教学,还是学
生学习操作,都简单明了。

交互贴心,用着顺手又省心

交互设计处处为用户考虑。就说测验功能,学生答题页有 "Retakeequiz (重新测验)""Next lesson (下一课)"
按钮,操作反馈及时又明确;老师创建测验时,能选多种题型,还能添加图片等媒体、设置答题时间和分数,满
足多样教学需求。消息模块里,聊天界面实时显示在线状态、课程预约详情,师生沟通方便又顺畅。这些贴心设
计,让教学、学习、交流都很顺手。

数据直观,信息一看就懂

数据呈现也很直观。日历功能用时间轴加不同颜色色块,展示课程星、讨论、练习等活动,不同颜色代表不同活动
类型,老师能一眼看清教学安排;测验结果页清楚展示答对题数、每题对错和答案,学生能快速复盘学习情况。
复杂的教学和学习信息,通过这样的设计变得简单易懂,方便大家家获取信息
好的教育类网站设计,能真正为教学和学习服务,Skillzone 在这些些方面的设计,值得教育行业伙伴参考,也希望
能助力更多教育机构提升教学与学习体验~

编组 2.png

编组 3.png

编组 4.png

编组 5.png

编组 6.png

编组 7.png

编组 8.png

编组 9.png

编组 10.png

编组 11.png

编组 12.png

编组 13.png

编组.png

 

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

UI设计公司审美积累 | 高端商城界面设计

杰睿 设计资源

极简风格往往能传达出品牌简约、高端、注重品质的形象,适合那些主打简洁设计、高品质商品的品牌,能与目标消费者追求精致、不繁琐的生活方式相契合。
简洁的界面设计也有助于提升网站的加载速度和操作流畅性,优化用户的购物体验,使用户能更高效地进行购物操作,如选择商品、查看价格、调整数量等。

imgi_310_49394d232762731.68a3294f94ed8.png

imgi_1403_361d75232762731.68a468128e784.png

imgi_1422_915121232762731.68a3294f9f31a.png

imgi_1423_ae712c232762731.68a465155bb18.png

imgi_1424_6b50f7232762731.68a465155ce34.png

imgi_1427_03cd85232762731.68a465155adb0.png

imgi_1434_389f94232762731.68a3294fa3ba4.png

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

ui设计公司灵感收藏夹

杰睿 设计资源

灵感从不是凭空降临的惊喜,而是藏在日常收集里的伏笔,每一次记录都是为创意爆发攒下的星光。

0ceb29bb269b4fd396dc57577d8e1b00.jpg

7b107f923f7dbb208543890d1ad89cd6.jpg

16dc73f9be2b99061a616ee3beeac46b.jpg

ec15686b0fcdc80984044618d336151f.jpg

imgi_14_13e9882e-dba1-437e-a2c3-09e43531cc40_thumb.jpg

imgi_16_973688c7-bfed-4fe4-a6a5-8931cc64d3f1_thumb.jpg

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

灵感捕手 | APP 界面设计灵感速递

杰睿 设计资源

UI 设计的审美,是藏在交互里的 “隐形体贴”:比如按钮点击时自然的反馈动效、信息层级清晰的卡片布局、适配不同场景的柔和色彩搭配,高审美 UI 能让用户无需思考就能流畅操作,在每一次滑动、点击中感受到 “被照顾” 的舒适。

4b6a6c2b4879d8357e7bc8b8ce0f4531.jpg

649f046c901db26a133e176a746cc6d0.jpg

b4c16736f8adbabfa9493ed76b3d23ee.jpg

c6eb08f64b101112b60174ee1f5b2b41.jpg

ca8266278e31c66c81f3dd0d2142eb60.jpg

dc9ef7173fe023e3f71d48e21eb7e1d1.jpg

fbe7a4e9aef20ce9a8ae920ab8f5348d.jpg

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

灵感补给站 | pinterest 设计灵感分享 UI版面设计3

杰睿

当产品陷入同质化,审美便是破局的钥匙 —— 用户愿为 “好看又好用” 买单,品牌能靠 “有风格” 出圈,好审美,从来都是商业里的隐形护城河。
仅作参考与分享,素材来源:pinterest

2fad1725b89b2191272507cc5c31fc5c.jpg

6b3c250316f1f94fefb25377064066f9.jpg

21b39adc554c0487a9dede2b359ce52b (1).jpg

45a8c98ed6e3f7575b6ff3472412fd5f.jpg

7144a17f7b159b41088bc48a02ad094a (1).jpg

30300279db5d006f2b6b96585a7da2f8.jpg

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

审美积累 | 调度仪表盘设计

杰睿

imgi_304_053d45221013163.67cd751ac20fa.jpg

imgi_1370_edbb7a221013163.67cd72c24f099.png

imgi_1376_980bb9221013163.67cd72c24d253.jpg

imgi_1380_aaa6eb221013163.67cd72c24f7e1.jpg

imgi_1382_48ebcf221013163.67cd7600cb1fa.jpg

 

模块化卡片布局 —— 信息拆分为独立卡片,任务、进度、日程分区清晰。
清爽视觉风格 —— 浅色背景 + 圆角卡片 + 鲜明配色标签,保持简洁层次。
直观交互反馈 —— 筛选、进度可视化、即时提醒结合轻动效,提升体验。
 

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

审美积累 | PC端地图界面设计

杰睿

imgi_2_0.jpg

imgi_4_23d060a7-db6d-491b-bf5e-2363895d73b2_thumb.jpg

imgi_6_a346c6cc-21e5-428d-b093-a14e4f257734_thumb.jpg

imgi_8_02cc1365-414e-45ea-934f-df620026ea9b_thumb.jpg

imgi_10_c4f9dce3-d53d-42b9-9bd0-8e97beadac1b_thumb.jpg

imgi_12_ca0b5b22-ec2e-4b46-bedb-013064dbdecd_thumb.jpg

imgi_14_bc1ef6c3-3ae9-41c3-bc65-ecad863aeac5_thumb.jpg

imgi_17_dfa5efbf-9de3-49d2-912d-d5ee58da27a4_thumb.jpg

从底图到业务层:PC端地图界面如何实现信息分层与视觉平衡
在智慧城市、物流调度、能源监控等场景中,PC端地图界面已经不再是简单的“位置呈现”,而是承载了大量业务数据与决策支持的核心工具。 然而,如何在一张地图上同时呈现 地理底图信息业务图层数据,并保持清晰的逻辑与视觉平衡,却是界面设计公司与开发团队必须解决的难题。

一、信息分层的核心逻辑

地图产品本质上是“信息叠加”的结果。若没有分层逻辑,用户很快就会被复杂的数据淹没。
  1. 底图层
  • 提供地理环境参考(道路、地形、建筑轮廓)
  • 核心要求是 中性、克制,避免喧宾夺主
  • 常见做法:低饱和度灰度底图、弱化标注
  1. 业务基础层
  • 展示用户任务相关的基础信息,例如网点分布、线路规划、设备位置
  • 设计要点是 信息可见但不抢眼,为后续的动态数据留出空间
  1. 业务动态层
  • 呈现实时变化的数据,如车辆状态、订单流向、传感器监测数值
  • 通常用高亮色、动效(闪烁、涟漪、轨迹动画)来强化感知
  1. 交互提示层
  • 信息提示框、选中高亮、悬浮说明
  • 是用户与地图互动的桥梁,要求 简洁、即时、可撤销

二、视觉平衡的实现方法

在 PC 大屏上,地图不仅要承载丰富数据,还要保持长时间使用的舒适度。
  1. 色彩体系
  • 底图采用冷色、中性灰,业务数据用品牌色或高饱和色突出
  • 避免多种亮色竞争,保证“主色一条线”
  1. 层级对比
  • 用透明度、模糊度区分不同层级
  • 实现“用户第一眼看到关键数据,第二眼才注意到背景”
  1. 信息密度控制
  • 允许用户分级缩放查看,避免一次性展示全部数据
  • 在全局视角显示聚合点,在局部放大时再展开细节
  1. 交互辅助
  • 鼠标悬停、框选、过滤器,让用户主动控制信息呈现
  • 既避免过度堆叠,也提升探索体验

三、典型应用场景

  • 智慧物流:地图上展示仓库与配送点,动态标记车辆路径和订单流向
  • 能源监控:底图为地理环境,业务层显示管线、设备节点,动态层展示实时监测数据
  • 城市治理:基础道路网为底图,业务层叠加垃圾清运、停车管理、交通流量信息
这些场景的共同点是:底图提供空间认知,业务层承载决策数据,二者必须通过视觉设计实现有机融合。

四、设计公司的角色

对于 PC 端地图界面而言,用户体验公司或 UI 设计团队的工作并非单纯的“美化”,而是:
构建 数据分层规则,明确不同数据的优先级与展现方式
设计 视觉平衡方案,确保用户在复杂界面中快速定位关键信息
与开发团队协作,优化 性能与渲染效率,保证地图在大数据量下依然流畅
从底图到业务层,PC端地图界面的本质是“信息分层”;而从数据到交互,视觉平衡是最终体验的保障。 随着智慧城市与行业可视化需求的不断增长,如何在地图界面中找到清晰的层次与美学平衡,将成为未来设计与开发团队长期探索的课题。

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

审美积累 | APP界面设计全案 | 运动与健身应用

杰睿

 

  1. 前期准备
  • 需求分析:明确 APP 的功能定位、目标用户、使用场景(如健身、社交、工具类)。
  • 竞品调研:参考类似 APP 的界面设计风格和交互逻辑。
  • 信息架构:整理功能模块、界面层级关系(比如首页 → 搜索 → 详情)。

  1. 设计规范制定
像图中展示的那样,先定义一套完整的视觉系统:
  • 色彩系统
    • 主色(Brand color,图中是荧光绿 #BBF229)
    • 辅助色(violet、blue)
    • 功能色(Success、Warning、Destructive)
    • 灰度体系(文字、背景、分割线)
  • 字体与排版
    • 确定字体(如 Arimo)
    • 字重(Regular、Medium、Semibold)
    • 字号层级(11, 14, 16, 18, 20, 24 px)
  • 组件与图标
    • 常用按钮(主按钮、次按钮)
    • 输入框、卡片、标签
    • 图标风格保持统一
  • 间距与网格
    • 定义标准间距(4/8/12/16/24/32 px)
    • 使用栅格系统保持界面一致性

  1. 界面设计流程
线框图(Wireframe)
  1.   先画低保真草图,确定信息布局和交互逻辑。
  1.   只关注功能,不要过早上色。
高保真设计(High-fidelity Mockup)
  1.   在 Figma、Sketch、XD 等工具里进行界面绘制。
  1.   应用视觉规范(颜色、字体、组件)。
交互动效
  • 给按钮、切换、过渡增加动效(如点击反馈、页面滑动)。
  • 使用 Figma Prototype、After Effects 或 Principle 做演示。

  1. 设计到开发落地
  • 交付规范
    • 使用 Figma 的 Design System + 组件库,开发能直接复用。
  • 代码实现
    • 前端可用 Flutter、React Native、SwiftUI、Android Compose 来实现设计。
    • 色彩、字体、间距都要和设计稿一一对应。

  1. 推荐工具
  • 设计工具:Figma(最推荐)、Sketch、Adobe XD
  • 图标资源:IconPark、Feather、Flaticon
  • 色彩搭配:Coolors、Khroma
  • UI 组件库:Material Design、Ant Design Mobile、Fluent UI

 

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

审美积累 | 移动端仪表盘组合

杰睿

色彩搭配

  • 浅色调为主:大部分设计采用白底+浅灰的简洁风格,显得干净清爽,凸显数据和内容本身。
  • 点缀色突出功能:蓝色、绿色、橙色在图表、按钮和数据关键点上有选择性使用,起到视觉引导作用。
  • 深色模式应用:右上角的“Global View”使用了深色宇宙背景,科技感和沉浸感较强,与其他浅色UI形成对比。
 

布局设计

  • 卡片化布局:几乎所有界面都采用卡片式分块设计,增强模块之间的区隔,便于信息快速抓取。
  • 图表为核心:柱状图、折线图、饼图等大量出现,强调数据的可视化,信息一目了然。
  • 留白充足:大部分界面在边距和行距上都留有呼吸空间,避免拥挤,让界面更现代。
 

风格与趋势

  • 扁平化 + 微拟物:大部分界面遵循扁平化(Flat Design),但在图表阴影、卡片圆角上有轻微拟物感,属于当下流行的“新拟物/柔性UI”趋势。
  • 图标与字体统一:采用简洁、无衬线字体(多为 San-serif),提升现代感。图标轻量且一致,保证界面调性统一。
  • 国际化审美:整体风格与欧美常见的 SaaS、金融科技应用一致,偏向专业、理性、简洁。
 

功能与体验

日历

链接

个人资料

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

存档