企业官网建设流程全解析

智能镜UI设计这个方向，市面上聊的人不多。市面上讲UI设计的文章，十篇里有九篇是在讲手机APP和Web后台，剩下那篇在讲大屏可视化。但智能镜这种产品，屏幕长在镜子后面，常态下是一块反光玻璃，点亮后台才浮出信息层，交互还特别受限——它既没有手机的触控精度，也没有大屏的展示空间。这个领域的设计规范几乎是一片空白，全要靠自己趟。

我做“乐自科技智能镜界面UI设计”这个项目的时候，走了不少弯路，也沉淀下一套自己的方法。这篇就把整个设计过程完整复盘一遍，从信息架构拆解、视觉规范制定，到组件化设计、硬件适配和真机调试，每一步都讲清楚我为什么这么选。适合正在做IoT设备界面、智能家居屏，或者准备碰智能镜方向的设计师，看这篇能少踩几个坑。

1. 项目整体设计与思路拆解

1.1 智能镜UI与传统界面设计的本质差异

接手这个项目之前，我团队内部先做了一次头脑风暴，把智能镜和手机APP的UI差异拉了一张对比表。这个动作虽然基础，但非常关键，因为很多团队就是用做APP的思路去做镜面UI，最后交付的东西在真机上根本没法看。

智能镜的使用场景，决定了它和手机UI有三个本质差异。

第一是观看距离。手机是30-40厘米的近距阅读，智能镜呢，人通常站在镜面前50厘米到1米左右，有些放在玄关的镜子，人可能一边穿鞋一边扫一眼，实际观看距离可以拉到1.5米。同样是24号字，在手机上很清晰，在镜子上就偏小了。别小看这个差别，我后面定字号体系的时候，几乎推翻了自己最开始从APP搬过来的那套规范。

第二是环境光。手机屏幕自己发光，镜子屏幕也是自己发光，但镜子最大的问题是，它同时还有一面物理反射层。当你站在镜面前，你的脸、身后的灯光、窗外的自然光，全都叠加在屏幕显示内容之上。这意味着UI的信息密度必须极低——你不可能在镜子上铺一个满屏的仪表盘，那样用户什么都看不清。

第三是交互带宽。手机有成熟的多指触控、语音助手、传感器体系，智能镜呢？最常见的是单点触控加挥手传感器，部分机型有蓝牙遥控，还有纯语音控制的产品。交互方式越受限，界面越需要“自解释”，让用户一眼就知道哪里能点、点了之后会发生什么。

我们当时做第一版方案的时候，就是没想清楚这三点，直接把一个天气小组件做得又细又密，结果放到真机上一看，字全是糊的，信息全挤在一起。后来全部推翻重做，才有了后面这套思路。

1.2 为什么“信息减法”是镜面UI的第一原则

第二版设计启动时，我给自己定了一条铁律：镜面UI的信息量，只保留手机APP同功能界面的30%。这不是拍脑袋，而是基于反射对比度的实测。

智能镜就算做到最好的AG防眩光玻璃，环境光反射依然存在。在常见室内照明300-500勒克斯的照度下，反射层的亮度叠加会让屏幕上的深色区域实测对比度下降至少40%。你设计稿里觉得层次分明的深灰背景，在真机上就是一片灰蒙蒙。这就逼着你必须用大面积留白去换可读性。

我后来对团队的要求就一句话：如果这个信息在3秒内说不清楚它是什么，那它就不该出现在主界面。用这个标准重新审视第一版方案，砍掉了大概50%的内容——包括一个实时天气雷达图、一个运动步数折线图、一个智能家居设备状态灯组。这些功能有没有价值？有。但它们不适合放在镜子的主界面，要么收进二级页，要么干脆砍掉。

信息减法的另一个逻辑是：智能镜的交互时长极短，平均一次交互可能只有几秒钟。用户照镜子的时候，扫一眼时间天气就走，伸手调一调灯光亮度就走，根本不会像刷手机一样在镜子上停留五分钟。界面必须让用户在一瞥之间完成信息获取，否则就是增加认知负担。

1.3 镜像环境下的布局逻辑：从“黄金区域”到“边缘策略”

智能镜的布局规划和普通界面还有个很大的不同——你面对的是一个物理上“居中对称”的产品形态。用户的头脸永远在镜子正中间，所以UI元素如果居中放置，就会和人脸反射重叠。

我用了一个很简单的策略：主显示区域放在镜面左右两侧的中部偏上，底部留出交互热区。为什么要偏上？因为人在穿衣镜前站立时，视线自然落点是镜面中上部，这个区域叫“黄金可视区”，实测数据也显示这个区域的信息读取速度最快。而中下部留给用户的头部和躯干反射，尽量少放信息。

边缘也不是随便放。左右两侧的边缘适合放纵向信息流——比如时间、日期、天气这种需要持续展示的内容，用户的余光就能扫到。底部边缘适合放快捷操作——因为伸手去点底部是最自然的手势，不用抬高手臂。

这套布局逻辑听起来简单，但执行起来需要反复调整比例。我们最终把主信息区锁定在镜面宽度的左右各25%范围内，中间50%完全留给镜面反射。UI的“视觉重量中心”始终保持在两侧，不和用户的镜像抢视觉焦点。后来真机实测下来，这个比例在保持可读性和不干扰照镜体验之间找到了平衡点。

2. 视觉规范与方案选型实战

2.1 配色体系：为什么夜间模式不能直接“黑底白字”

智能镜的配色方案，基本可以理解为“夜间模式的极端加强版”。常规APP的深色模式，背景一般用#121212、#1A1A1A这类深灰，但在智能镜上，我强烈建议不要用纯黑，甚至深灰要偏暖。

原因和反射有关。纯黑背景在镜面上会显得“发闷”，因为反射层和屏幕之间的距离会造成光晕，黑色区域反而容易看到重影。灰偏暖的底色，比如我们最终用的#141210、#1A1714这类带一点点暖调的颜色，可以和反射的人脸肤色、室内暖光形成更自然的融合。

正文字色也一样。纯白#FFFFFF在镜面上看会泛紫边，因为镜面镀层对不同波长的光透过率不一样。我最后用的是#F2EDE6这种带暖调的近白色，实测在反射场景下文字边缘更干净，看起来也更柔和。一个对照组测试下来，受测者普遍反馈暖白比冷白“看着舒服不刺眼”。

强调色方面，我选了青蓝色系作为功能主色，比如#28C0A0这类，配合琥珀色#E8A33D做警示和通知。为什么不用蓝色？因为很多智能镜的灯光系统就是冷白蓝光的，界面再用高饱和蓝，和镜前灯混在一起很难分清楚。青蓝色更靠绿光谱，和常见灯光的区分度更高。

配色规范的落地，我做得非常细，不只是给几个色值就算完。我按使用场景拆了三套色板：日间模式、夜间模式、待机微光模式。日间模式对比度可以拉高，因为环境光本身亮；夜间模式要把亮度降下来，防止界面在暗环境中成了房间里的“大灯泡”；微光模式是只有时间和天气的极简显示，色板单独调过，保证亮度和色温都做低，不干扰睡眠。

2.2 字体与字号：远距离阅读的决定性细节

智能镜的字体选择，我踩过最大的坑是直接复用手机系统字体。

第一版用的是系统默认字体，粗细和字重都很标准，但上真机一看，问题立刻暴露了——字体发虚。原因有两层：一是镜面玻璃的折射会让笔画变细，二是小字号下的抗锯齿在镜面环境中失效。

解决办法是选用笔画更饱满的字体，并且整体字重上调一档。无衬线字体里，我倾向于选字面偏大、中宫放松的字形，用四个字概括就是“横平竖直、粗壮稳定”。中文显示尤其要注意，中文笔画比拉丁字母复杂得多，字重不够在小字号下会糊成一团。在实际调整中，我们把正文层级的最小字重从Regular提升到了Medium，标题直接用Bold或黑体字族的对应字重。

字号体系，我按观看距离重新定了一套基准，和手机APP的完全不是一回事：

• 主时间（最核心信息）：至少64-80dp，我最终用的是72dp，1米内和1.5米外都够清楚
• 次信息（日期、天气、温度）：28-34dp
• 功能标签和按钮：18-22dp，这个往下就不建议了，镜面上小于16dp的文字基本等于不可读

屏幕分辨率也影响字节的实际物理尺寸。当时这块镜子的面板是1080P级别，尺寸约为32英寸，我们按分辨率反推，一个72dp的字在屏幕上的物理高度大约在1.2厘米左右，1米观看距离下视觉角约0.7度，这个尺寸是远距可读的舒适下限。

另一个细节是行高。手机界面行高一般1.4-1.5倍就够了，镜面为了减少视觉拥挤感，我拉到1.6-1.8倍。别小看这个数字，行距拉宽松之后，整个界面在反射环境下的信息辨识度明显提升。

2.3 组件化设计：时间天气卡片如何做到“一组件三模式”

这个项目里我最想分享的组件化案例，是那个时间天气组合组件。它看着简单，就一行时间加一行天气，但真正做规范的时候，要适配三种不同状态，而且每种状态的布局还不一样。

常态模式是完整显示：左上方时间是最大字号，日期在时间右侧或下方，天气Icon加温度放在时间的右下方。信息布局上，人的视线习惯从左往右扫，所以我把时间放在最左，因为时间是这个界面上最高频的信息，其次才是日期天气。

夜间模式自动切换：整体对比度调低，颜色换成夜间色板，同时天气Icon的复杂细节被简化，颜色数量减少。因为人的眼睛在暗环境下对细节的敏感度下降，复杂的彩色Icon在夜间看就是一团亮斑。

待机微光模式：只保留时间和天气温度，Icon移除，用一个很小的圆点指示天气状况，整组组件的亮度调低到正常模式的25%。这个模式下功耗控制很重要，OLED屏幕下大面积高亮区域会显著增加耗电，所以微光模式的信息要精简到极致。

组件化的意义不只是复用，更是让设计规范能在不同产品上快速落地。我做完这个组件之后，顺带把时间、天气、日期全部拆成了独立模块，每个模块有自己完整的尺寸、间距、颜色、字重规范。后面乐自科技再出新的智能镜型号，不管是带不带触控屏、屏幕尺寸大还是小，这套组件可以直接排列组合，不用重新画。

3. 核心交互过程与信息架构实现

3.1 主界面的三层信息架构

主界面的信息架构，我分成了三个层级，对应三种不同的用户注意力模式。

第一层是持续存在层。时间、日期、天气、室内温度，这几个信息不管用户在干什么，都保持在界面固定位置。它们的特征是不需要任何交互就能看到，一闪而过就能get到信息。这层的信息密度控制得极低——整个持续存在层只占屏幕可视面积的不到15%。

第二层是唤起层。用户通过触控、挥手或语音唤起功能面板，包括灯光控制、家居控制、日程提醒等。唤起层默认是隐藏的，用户主动发起交互才出现。这一层的信息布局就相对自由了，因为用户此时是主动操作状态，注意力是集中的。

第三层是反馈层。用户操作后的即时反馈，比如调节灯光亮度的进度条变化、语音指令的识别结果文字、触控按下的高亮状态。反馈层必须在用户操作的焦点位置附近出现，不能跑到屏幕另一边去，否则用户会觉得自己操作“没反应”。

这三层结构对应的交互切换逻辑也很简单。一秒内无操作，反馈层消失；十秒无操作，唤起层收起；三分钟无操作，进入待机微光模式，只保留第一层信息。这套“渐进式隐藏”规则，保证了镜子大多数时间是一面干净的镜子，而不是一块常亮的屏幕。

3.2 触控、语音与硬件的协同设计

智能镜的交互方式虽然受限，但也不是只有一种。我们当时做的这款产品，支持触摸、语音、挥手感应三通道交互。设计UI的时候，必须同时考虑三种输入模式怎么在界面上协同。

触摸交互是最主要的。镜面触控不像手机那么灵敏，因为触控层隔着钢化玻璃和反射镀膜，信号会衰减。我们设计按钮的时候，把最小触控目标定在60x60dp以上，按钮之间的间距至少留12dp，防止误触。按钮的视觉反馈也不能太轻微，按下的状态变换要明显——我们用的是放大加变亮，而不是手机常见的“减淡”，因为镜面上轻微的透明度变化很容易被反射干扰到看不出效果。

语音交互的UI反馈，也就是“语音呼吸灯”的设计，我花了不少心思。当用户呼出语音指令时，界面底部中间会出现一个呼吸灯样式的反馈圆环，颜色是强调色#28C0A0，呼吸频率设定在2秒一个周期，明暗幅度适中，不刺眼。为什么不用常见的麦克风图标？因为麦克风图标在镜面上太像装饰图案了，呼吸灯这种动态效果更符合“界面正在听你说话”的隐喻。

挥手感应适合做非接触式交互，比如切歌、翻页。但挥手感应器有个问题，它只能识别“有/无”的动作，精度不够。所以挥手交互的设计原则是：只用来做下一步、翻页、关闭这类低风险操作，绝不让挥手来精确选择某个具体选项。界面上遇到挥手可控的环节，会显示一个横向箭头指示，告诉用户“在这里挥手”。

这三套交互逻辑，我全部在原型里做了可点击的动态模拟，交给硬件团队一起联调。这一步很关键，UI团队的交付物如果只是一堆静态图，硬件团队根本没法判断交互边界在哪里，最后做出来的东西一定和设计稿有偏差。

3.3 状态反馈与数据可视化：克制优于丰富

智能化产品总喜欢堆数据，但智能镜的数据可视化，我的经验是“宁缺毋滥”。

举个实际例子。室内空气质量检测这个功能，硬件能输出PM2.5、PM10、二氧化碳浓度、VOC指数、温湿度一堆数据。最初的设计稿把这些数据全都用仪表盘图标展示出来，画了五个圆形进度表，视觉上看着很专业。但真机测试的时候，用户反馈就一句：“我看不懂这是什么意思。”

后来我们做了一个非常克制的方案——只用一个“空气指数”的综合分级，优秀显示为暖白，良好显示为青色，轻度污染显示为琥珀色，重度污染显示为红色。颜色的同时还配了文字说明，比如“轻度污染，建议开启净化器”。用户不需要理解PM2.5是什么，他只想知道“现在的空气好不好，我该怎么办”。

运动数据的展示也是同理。步数目标进度环保留，但不再显示具体的步数数字，显示的是“完成情况占比”。心率这些太专业的指标，从主题界面上全部拿掉，放到手机APP里去展示。镜子的定位是“快速查看”，不是“专业分析”，专业分析交给手机端做。

反馈层也遵循同样的逻辑。所有操作反馈都尽量用图形加速度件加文字说明，但文字不超过五个字——“已开灯”“净化中”“闹钟已设”。控件本身就足够表达状态的地方，连文字都可以省。克制，才是这个场景最需要的设计能力。

4. 实操过程与界面高保真还原要点

4.1 画板尺寸、切图规范和设计标注

这个项目的画板尺寸设定，是先从硬件参数反推的。屏幕物理尺寸32英寸，分辨率1920x1080，PPI大约69。这个像素密度很低，比手机（通常300+PPI）差了一个数量级。这也是为什么设计稿里看着刚好合适的切图，到真机上会发虚——你根本没有足够的物理像素去呈现设计稿里的精致细节。

所以在设计标注阶段，我强制要求团队把最小可接受清晰度的像素级抠出来，具体来说就是：凡是在屏幕上最终显示尺寸小于24x24px的图标，一律重新设计，做到足够大。装饰性元素全部砍掉，因为69PPI下抗锯齿算法再优秀也救不了过小的元素。

切图方面，因为目标平台是安卓系统，所以我提供了三种尺寸的切图资源。但实际测试下来，智能镜因为硬件配置固定、屏幕大小固定，并不需要像手机那样适配大量分辨率。用最小密度资源就够，让系统自动放大，反而可能出现模糊。如果同类产品有不同尺寸，优先按最大尺寸出图，向下兼容。

我交付给开发团队的，除了一份完整的设计规范文档，还有每个界面的标注图，标注内容包括颜色色值、尺寸数值、间距数值、字体字重、交互状态。但光有标注还不够，我还输出了一份“真机调试注意清单”，里面专门标注了哪些设计效果在真机上可能打折、需要现场看效果。比如图标阴影效果，这类在镜面上基本呈现不出来，我就提前和开发沟通好，直接放弃。

4.2 夜间模式与亮度策略的实现细节

夜间模式这个部分，做得不好就直接影响用户睡眠质量。我做了三档自适应亮度调适。

第一档是环境光传感器自适应。白天的亮度基准设得高，界面在强反射下还能看清；到了晚上自动降档。传感器采集到的环境光数据经过平滑处理后映射到屏幕亮度，这中间有个门槛值，防止灯光一开一关亮度频繁跳变。

第二档是基于时间段的曲线调整。晚上22点到早上6点之间，亮度上限被强制压低，即使环境光传感器因为某种原因误判，也不会出现屏幕突然变得刺眼的情况。这段时间的界面色温同步调暖，降低蓝光比例。

第三档就是前面提到的微光待机模式，也是最考验设计细节的。微光模式不仅降低亮度，连信息的颜色都要重新定义。比如时间数字，用深暖灰代替近白色，这样在半夜醒来看一眼镜子，不会因为屏幕太亮而彻底清醒。实测下来，微光模式的显示亮度控制在正常模式的15%左右，既能看清信息，又不干扰睡眠。

这三档策略的衔接也在实践中调了几轮。最开始做得太激进，晚上过暗导致用户白天刚关灯就什么也看不见。后来加入了一个倒计时渐变的缓和机制，亮度变化不跳变，而是用5到10秒时间缓慢过渡，用户的感知就从“突然暗了”变成了“不知不觉暗下来”，舒服很多。

4.3 与开发团队的协作流程：设计不是画完就完了

整个UI设计项目周期里，真正在设计软件里画图的时间大概只占四成，剩下六成都在和开发团队联调。我在这段流程里确立了三个关键协作节点。

第一节点是设计规范评审会，在交互原型完成、视觉稿开始之前开。不是等视觉稿做完了再给开发看，而是先用规范草案和开发对齐技术边界。安卓系统能不能实现圆角遮罩的异形显示？触摸层的采样率支持不支持双击唤醒？这些东西早确认，视觉设计就能避开往不能实现的方向上使劲。

第二节点是UI走查。我作为设计方，在开发出了第一版可运行版本后，用真机逐页对照设计稿检查，输出一份问题列表。走查不能只看“长得像不像”，还要关注动态行为——动画时长合不合理、状态切换顺不顺畅、过度动画有没有穿帮。一个常见问题是开发为了省事，把按压动画直接省略了，我在走查里一次次把它加回来，因为它直接影响用户对“是否按下去了”的判断。

第三节点是回归。每次开发修完问题，我要求他们不仅要看当前页，还要把相邻交互流程全部回归一遍——比如改了首页布局，要检查二级页的返回逻辑有没有受影响。这套流程走完三轮左右，界面的完成度才能达到可以上机的状态。

5. 常见问题与排查技巧实录

5.1 真机字体渲染偏细、发虚，怎么修

这个是最普遍的问题，也是我第一版方案翻车最惨的地方。设计稿里清清楚楚的文字，到了镜面上就像被稀释了一样，笔画变细、边缘发虚。

排查思路：先是确认了分辨率适配没问题，切图也没问题，最后才定位到真正原因是镜面镀层的折射让字体的有效笔画宽度感知降低。解决手段有三步。第一步是全局把字重从Regular提到Medium及以上；第二步是把小字号从“细长优雅”的字形换成“方正粗壮”的字形，繁体细节多的字特别明显；第三步是在允许的情况下适当放大行距和字间距，让字形之间不粘连。

如果这三步做完还是虚，还有一个终极大法——把文字换成图形化显示。比如某些固定展示的模块名、区域提示，直接由设计提供一张渲染好的图片代替实时字体渲染。这个方法不灵活，但在特定场景下效果最稳定。

5.2 界面泛白，颜色发灰，设计稿和真机色差大

智能镜屏幕显示颜色的观感，受反射环境影响极大。白天自然光强的时候，整个屏幕泛白，色彩饱和度肉眼可见地下降；晚上开暖光灯，屏幕又偏黄。

我用的排查方法是拍真机样张，在特定光照条件下记录屏幕实际颜色，再和设计稿的色值对比。记录多了就发现一个规律：在室内常规照明下，屏幕显示的颜色亮度越高，受反射影响越小，所以界面核心内容的背景尽量用高明度色块或者大面积留白，反而比深色背景更保真。

另外一个要留心的是镀膜色偏。镜子玻璃镀膜通常带一点绿色或蓝色偏色，这个偏色会让屏幕的白色区域泛绿或泛蓝。解决方式是在设计阶段就做“镀膜补偿”——把界面的主背景色在取色时人为增加一点点品红，把绿偏中和掉。这个操作没有统一公式，完全取决于真实镀膜的光谱特性，必须拿到实际镜面面板样品后一手一脚校准。

5.3 OLED烧屏风险和固定UI元素

智能镜如果用的是OLED屏，长期固定显示时间、日期、天气这些静态元素，烧屏风险极高。时间数字、天气图标的位置，可能几个月后就在屏幕上留下残影。

UI设计层面能做的缓解办法有四个。第一，时间显示区域在安全范围内做“像素偏移”，每隔一段时间整体移动几个像素，让同一批像素不会始终承压；第二，降低静态元素的显示亮度，特别是待机状态下；第三，多用周边非对称的布局，减少大面积纯色块。最后还有一个笨办法，把常驻信息区域设计成可折叠的，用户长时间不使用时自动收进“屏保状态”或者直接熄灭。

在给开发写需求的时候，我会把像素偏移做得细一些，甚至规定每天的偏移方向按随机顺序来，而不是固定循环，这样可以避免烧出规律痕迹。OLED屏的这个问题，只能“物理规避”，设计上不能完全依赖软件补偿。

5.4 触控偏移和反射干扰导致“点不准”

智能镜的触控体验永远比手机差一截。用户明明按的是屏幕上的这个按钮，系统却判定按到了附近的位置。原因主要是触控层和显示层之间隔着多层玻璃和镀膜，触控屏的感应精度被削弱了。

排查办法是先记录用户的平均触控偏差方向和距离，再在控件本身的响应热区上做修正。比如用户总是右边偏上2到3毫米，那开发阶段就把按钮的可点击热区向左下做对应偏移，视觉反馈依然显示在原位置。

另外，镜面反射会让用户操作时看到自己的手指反射和屏幕显示的手指位置不一样，容易产生视觉错位，这时候只能靠反馈来纠偏——触摸成功的时候立刻给出视觉反馈（高亮、放大），让用户建立“我按对了”的信心。音效或者震动反馈在智能镜上意义有限，因为很多产品不配震动马达，所以视觉反馈是唯一的闭环确认手段。

这里有个测试技巧：走查触控准确率的时候，不能只坐在那里用鼠标模拟点击，一定要真的站在镜子前面，像真实用户那样伸手去按，这样才能重现真实的视觉错位和操作角度，很多“点不准”的问题就是这样暴露出来的。

结尾

这个项目做完，我个人最大的收获是：智能镜UI设计的本质，是在“界面显示”和“镜子本义”之间找到平衡。它首先是一面镜子，然后才是智能产品。很多交互设计经验在其他屏幕上完全适用，但到了镜面上就必须做减法、做妥协、做重新思考。

最后分享一个我自己后期一直在用的调试方法：所有智能镜界面的设计方案，先打印成1:1的黑白稿贴在普通镜子上，站在一米外看一会儿，凡是在这个状态下看不清的信息，上真机后只会更糟。这个土办法比任何高级模拟器都靠谱。

如果后续有机会优化这个项目，我会重点研究两个方向：一是更智能的上下文感知——镜子根据不同时间段、不同家庭成员自动切换显示信息；另一个是更自然的跨设备联动，比如和手机、手表、灯光系统的信息协同。智能镜的产品形态还很年轻，UI设计标准也远没到定论的时候，这个领域值得投入。