不管甲方给多少钱，哪怕一张界面的预算只有几十块，他也想要设计亮点，但是很多同学的设计又非常平庸！

为什么你做的设计没有特点，其实原因很简单，你没有用过行业属性这一招，只要学会这一招，完全够用！

先解释下，什么行业属性：

比如你做的 App 是音乐类，那就把音乐类事物或图形提炼出来植入到设计中，比如音符、麦克风等等！

比如你做 App 是体育类，那就把体育类的图形提炼出来植入到设计中，比如跑步、篮球等等！

这样一结合，就可以做的有一定的特点！

但是相关图形或事物的植入也分层次，我个人分了五个层次：

二、第一个层次：直接表达

如果你做的产品是体育类，下面这种方式，就和体育相关：

但是这种方式就是直接表达，你是篮球，就画个篮球，是网球就画个网球，是不需要思考的，只要把设计做到精致即可。

再比如下面这个：

你是唱歌，就用麦克风来表达，都是不需要思考的，直接表达即可！

三、第二个层次：勉强拼凑

接下来就需要有一点思考了，但是思考的不多，就是如何把图形放在你原有的设计中。

比如下面这个转化图标：

如果中间我们加入的飞机的标识，那就是知道，这是买飞机票的产品：

这时候主要考验的就是飞机的表达形式，你可以是正面的飞机，也可以是侧面的飞机。

还有下面唱吧这种：本来没有任何属性的空页面：

中间加上音符，音乐app的属性就有了：

四、第三个层次：巧妙结合

接下来就需要一定的思考了，比如行程这个图标：

这里面就将飞机和轮船结合到了一起，二者的组成结构，就是这个图标的门槛，而不是之前那种直接拼到一起或者贴上去。

再比如下面这个编辑任务图标，把正常的一个竖线变成树叶，也需要一定的思考和巧妙结合：

你也能够知道，这个图标是和环保或者健康相关的！

五、第四个层次：意境传达

这个层次主要是抽象的表达，需要有一定的创意内核，比如像飞猪这种旅游相关的:

空页面采用打开窗户，多去外面看看世界的创意，来进行行业属性关联!

这种就是意境抽象的表达方式！

六、第五个层次：动态加持

最后一种就是除了以上内容外，你还可以增加动态的部分，把现实中真实的动态进行加持，那创意效果就会更加显著！

比如像这种播放音乐时候的 cd 唱片机：

七、总结

运用行业属性增加设计亮点与独特性，一共分了5个层次，分别为：

1. 第一层次：直接表达
2. 第二层次：勉强拼凑
3. 第三层次：巧妙结合
4. 第四层次：意境传达
5. 第五层次：动态加持

转载自优设网

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

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

 一、项目定位与行业现存痛点

 产品简介

Buildexa是面向施工现场项目经理、施工工长、工程管理人员的轻量化移动端项目管理APP，聚焦建筑施工全流程进度管控，依托可视化进度图表、3D施工楼栋模型，实现总项目进度、分阶段施工工期、分项工程完成率、延期任务数据实时查看，适配工地户外碎片化办公场景，简化传统厚重工程管理系统复杂操作逻辑，让管理人员手持手机即可完成项目进度巡检、工期风险识别、分项任务追踪。

传统建筑施工管理四大行业痛点

1. 进度数据不直观：传统表格、纸质台账罗列工期数字，无法一眼区分计划、延期、待完成任务，工期延误发现滞后；

2. 分层施工管理割裂：土建结构、装修收尾、水电消防等分阶段进度分散记录，无统一汇总查看页面；

3. 户外操作门槛高：传统工程系统界面拥挤、深色高饱和配色，强光下看不清文字，工地临时查看操作繁琐；

4. 项目风险无可视化提醒：延期任务、滞后分项工程无醒目卡片标注，管理人员容易遗漏工期预警。

二、产品完整业务闭环

整套APP围绕「总项目概览→单楼栋施工计划→当日工期明细→分项工程进度追踪」搭建轻量化管理闭环

1. 首页总览层：实时展示项目整体完成百分比、计划竣工日期、累计延期天数，搭配渐变进度条直观展示整体施工进度；

2. 楼栋计划层：3D写实施工楼栋模型作为视觉核心，拆分土建结构、装修收尾两大核心工序，标注各工序完成率与预计完工时间；

3. 当日工期明细层：可视化区分计划任务、延期任务、剩余待办任务，标注各批次任务起止日期，快速识别工期滞后风险；

4. 分项工程追踪层：统一汇总设计、水电、消防、管道四大施工板块，环形进度条展示各分项完工比例，完整把控细分施工环节进度。

三、四大核心页面模块设计拆解

模块1：首页总览 Dashboard

极简轻量化卡片布局，适配工地户外快速扫视场景

1. 顶部品牌与账号区：Buildexa品牌标识、消息通知、个人头像快捷入口；

2. 核心进度指标区：超大粗体展示整体施工完成率，搭配渐变橙条纹进度条，标注竣工时间、总延期天数；

3. 楼栋可视化卡片：3D施工楼栋写实插图，一键跳转楼栋详细施工计划；

4. 底部固定导航栏：首页、日程、进度、文件、文档五大高频功能，单指快速切换页面。

设计价值：项目经理打开首页3秒掌握全项目整体进度、延期风险，无需多层级点击进入复杂报表。

模块2：单楼栋施工计划页面

以3D施工模型为视觉载体，分层展示分阶段施工进度

1. 顶部筛选栏：快速切换楼栋、筛选目标施工日期；

2. 视觉主视觉：写实在建楼栋3D插画，贴合建筑行业视觉认知；

3. 工序进度卡片：分「结构施工、装修收尾」双卡片，标注完工百分比与对应完工日期；

4. 楼栋单元进度条形图：渐变橙色条展示单元施工覆盖范围与施工距离，直观掌握楼栋施工覆盖进度。

模块3：当日计划进度页面

三色分区卡片设计，清晰划分三类任务状态，工期风险一目了然

1. 三色状态区块：橙色=计划内任务、深橙=延期滞后任务、浅灰=剩余待办任务，搭配对应起止日期；

2. 分项工程列表：设计、电气、消防、管道四大施工板块，搭配环形圆角进度条展示各分项完工比例；

3. 全局筛选入口：支持按日期筛选、导出进度明细，适配工地日报、周报整理需求。

模块4：分项工程详情页面

轻量化单列卡片布局，简化冗余信息，聚焦单板块施工进度，适合户外快速查阅各细分工序完成情况，无多余繁杂图表干扰视线。

四、视觉设计体系：工业柔和轻量化工程风

 1. 色彩系统

- 基底底色：纯净米白浅底色，户外强光下清晰可读，缓解工地长时间查看屏幕视觉疲劳；

- 主品牌色：暖工业橙，代表施工、进行中任务，层级区分柔和不刺眼，贴合建筑行业属性；

- 状态区分色：深橙标识延期风险任务、浅灰代表未开始待办工序，色彩语义直观，无需文字解读即可分辨工期状态。

 2. 图形与可视化规范

1. 写实3D建筑插画：在建楼栋、塔吊施工写实插图，替代抽象线条图标，建筑从业者直观理解页面业务；

2. 轻量化进度图表：渐变条纹进度条、圆角环形进度条、分段条形图，无厚重阴影、无复杂装饰，极简清晰；

3. 圆角柔和卡片：大圆角低弱阴影模块，页面分割柔和，摆脱传统工业系统生硬厚重视觉感受。

 3. 文字层级规范

全平台无衬线简约字体，三层清晰信息层级：超大粗体进度百分比数字→工序/模块标题→日期辅助小字，户外远距离也能快速抓取核心进度数据。

五、产品商业与用户落地价值

1. 工地办公轻量化：舍弃传统PC厚重管理系统，手机端一站式完成全流程进度查看，适配工地外勤、巡检碎片化办公；

2. 工期风险可视化管控：三色任务分区直观识别延期工序，提前介入调整施工计划，降低项目逾期风险；

3. 行业视觉适配：3D建筑插画+暖工业橙主色，贴合建筑从业者审美，降低产品学习上手成本；

4. 多维度进度拆分：总项目、单楼栋、当日任务、分项工程四层进度拆解，满足不同层级管理人员查看需求。

图片来自Behance

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

当下各类 APP 界面普遍陷入矩形卡片、标准弹窗的同质化困境，普通版式难以留住用户视线。兰亭妙微 UI 团队结合多年消费、教育、文娱类产品落地经验，拆解多款主流产品里落地成熟的创意形式感设计，从运营弹窗、会员卡片、个人信息模块三大场景总结可直接复用的设计手法，低成本提升界面质感与差异化辨识度。

本文放弃单一作品深度拆解模式，整合海内外多元平面创意版式案例，覆盖潮流活动海报、艺术展览物料、美术馆主题展、线下店铺视觉、日系画廊展讯、英文活动宣传物料等多种商用、艺术向设计，为设计师提供多元化排版参考。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

滑块 (Slider/滑动选择器) 这种随处可见的输入控件，其实藏着很多设计细节。滑块靠拖动游标就能实现调节数值，实时给出视觉反馈，不管是调音量、改亮度，还是设置参数范围，都少不了它的身影。

一、滑块构成

一个标准的滑块组件，核心包括四部分元素：

1. 数值提示
2. 已调节区域
3. 调节游标
4. 数值区间
5. 未调节区域。

这几部分各司其职，组合在一起才能让用户用得顺手。

二、滑块类型

在Material Design的设计规范中，定义了四种常用的水平滑块，每一种都有自己的适用场景：连续滑块、离散滑块、居中滑块、范围选择滑块。

1. 连续滑块

这种滑块最常见，游标能在轨道上自由滑动，停在任意位置都能对应一个精准数值，没有任何限制。比如我们平时调手机音量，用的就是典型的连续滑块。

2. 离散滑块

它和连续滑块最大的区别，就是拖动时游标会自动“卡点”到预设的区间刻度上。简单说就是不能选任意值，只能在固定的数值区间里切换，适合那些需要标准化参数的场景。

3. 居中滑块

这种滑块的初始值默认在轨道正中间，往左拖是减小数值甚至调到负数，往右拖则是增大数值。像一些需要双向调节的场景，比如色彩的冷暖调整、音频的音调调节，用它就很合适。

4. 范围选择滑块

有两个游标，分别用来设定数值范围的最小值和最大值。比如设置价格区间、筛选日期范围时，用这种滑块就能一次性搞定，不用反复输入。

三、滑块设计不踩坑

看似简单的滑块，想要做得好用，这几点一定要考虑到：

1. 效果实时反馈

滑块的调节是即时生效的，用户拖动的时候，得能一眼看到数值变化带来的直观效果。比如调亮度时，屏幕明暗要跟着游标移动同步变化，不然用户根本不知道自己调对了没。

2. 轨道逻辑清晰

轨道是用来显示数值范围的，需要分成“已调节轨道”和“未调节轨道”两部分。这里要注意语言阅读习惯：咱们常用的从左到右阅读模式下，数值得从左到右递增；如果是面向阿拉伯语这类从右到左阅读的用户，数值顺序就得反过来。

3. 限制刻度数量

滑块上的刻度是用来标记数值的，游标还会自动吸附到最近的刻度值上。但设计时千万别添加过多的刻度值，不然轨道上密密麻麻的，不仅看着乱，用户调节时也很难精准定位到想要的数值。

4. 控制数值显示

在设计范围选择滑块时，一次最好只显示一个关键数值——要么是当前选中的区间，要么是用户正在拖动的那个游标对应的数值，显示太多反而会让用户混淆。

5. 使用文本框

除了直接显示数值标签，还可以在滑块外面加个独立的文本输入框，并且让输入框的数值和滑块联动，用户既可以拖动调节，也能手动输入精准的数值。

另外，用图标或文字的形式代替刻度值，也是个提升界面颜值和易用性的好办法。

四、滑块设计

案例参考最后给大家分享几个有意思的滑块设计，平时做组件的时候可以参考：

1. 经典亮度滑块

典型的连续滑块，轨道比较细、游标是经典的圆形，左右两侧还配了亮度图标，不用看数值也能秒懂当前亮度档位。

2. 尺子形式滑块

这种滑块不是传统的样式，而是做成了尺子的形状。尺子上的刻度代替了传统的数值指示器，0.1的增量清晰可见，数值直观又有趣。

3. 情绪表达滑块

虽然也是滑块的形态，但它靠颜色来表达用户情绪。每个滑块单元都是离散设计，带有刻度区间，用户滑动选择时，能通过色彩快速对应自己的情绪状态。

4. 游标固定滑块

游标固定在轨道正中间，拖动时是轨道左右移动，选中的数值显示在右侧，用户一眼就能确认当前数值，这种交互方式很新颖。

5. 速度调节滑块

用五个刻度来划分速度区间，每个刻度上方都标注了具体数值。虽然刻度间的实际数值间隔不一样，但清晰的标注让用户能精准把控速度档位。最后滑块组件虽然看着简单，但要做到真正好用，需要将形式的新颖、交互的创新、元素的搭配等细节都考虑到，于细节处见精微。

转载自优设网

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

在日常设计分享内容里，多数文章习惯单案例、单设计师深度拆解，这种方式优势在于讲解细致、逻辑完整，但长期浏览很容易产生审美疲劳。兰亭妙微设计团队本次换一种分享思路，不局限单一作品，从商业海报、画册内页、APP 宣传页、品牌长图等海量实战项目中，筛选一批创意十足、落地性强的优质版式方案分享给各位设计师，兼顾平面、UI、品牌视觉多场景，看完就能直接借鉴，快速拓宽排版创作思路。
很多设计师排版时只会套用标准栅格，页面横平竖直、元素规整对齐，成品工整却毫无记忆点。想要打造有趣耐看的版式，核心是在统一秩序中制造视觉变化，兰亭妙微结合多年政企、文创、科技类项目经验，整理四类高复用创意版式手法，搭配落地案例拆解

做 UI、可视化大屏、软件界面设计时，很多设计师常会陷入瓶颈：页面版式单调、视觉层次薄弱，完整落地的作品缺少记忆点，无法快速抓住用户视线。深耕界面设计十六年的兰亭妙微（蓝蓝设计），常年服务航天、医疗、大数据、政企管理系统等项目，在数百套 B 端、C 端产品落地中，总结出一套高效提升形式感的实操方法，轻松摆脱界面平淡问题，打造层次丰富、辨识度高的视觉页面。

转载：优设

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