在互联网产品日趋成熟的今天，你会发现所有的App越来越像，似乎是同一套模版设计出来的产品；而这种普适化的设计会导致同质化严重，使得设计不精致，产品没有气质和品牌感。
一个App设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的UI设计。
兰亭妙微UI设计公司，总结了12个简单直观的提升设计感的小细节，一起来学习。
在对UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比；单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重，这有助于在内容中建立层次结构；通过使用颜色的深浅，为元素赋予不同的重要性。
如果可以的话，你甚至可以采用两到三种颜色：
类似的，在UI设计的时候，通常两种不同的字重足以营造出优秀的层次感：
▲主标题字重为600，其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400，因为这一部分字体本身尺寸已经较小，低于400会使得可读性不佳。
如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理：
不要在有色背景上使用灰色的文本，在白色背景下，将黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不错的淡化其视觉效果的做法。
但是在彩色背景下，想要降低和背景色之间的对比，通常有两种方法：
一是降低白色文本的不透明度；二是让文本逐步接近背景色，而不是改为灰色。
▲左图设计师职位信息为白色文字降低不透明度，右图为和背景同色相高明度的颜色
其次当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃；通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。
选择一种基础色，再调整色调和颜色深浅来增加均衡；设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。
阴影是UI设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。
相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净，增加了画面的精致；如果阴影的范围太小或颜色太深，位置也没有偏移，而是聚集在元素的四周，就会让画面更加扁平，让视觉变得厚重，呈现出不精致的画面感。
阴影不一定是黑色的，还有一种扩算阴影是模拟元素本身的颜色投射在背景上，由于阴影与元素的色调一致，因此呈现出十分融洽的画面感。
在UI设计中，这种手法不宜过多使用，否则呈现出的各种色彩搭配会让人眼花缭乱。
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。
我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个App的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。
通常，大多数App都是使用iOS规范的设计样式（默认灰色，选中填充品牌色），这样的设计太普通，太常见了；要想让标签栏图标设计精致和富有个性，可以丰富每一个选中态图标的视觉表现，例如给图标加上背景和表情，即显得生动有趣，又增加了用户的好感，给人留下深刻的印象。
3D立体图标设计是近几年来的流行趋势，看上去十分精致、华丽，但是看久了会让人产生轻微的视觉疲劳，同时因其复杂的结构会增加用户的认知成本，一般在外卖美食类应用中比较常见。
Tab是App设计中最常见的控件之一，它源自Material Design的设计规范；现在很多iOS产品当中也开始使用这种导航栏样式来进行设计，而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上，Tab和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态；因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。
例如虾米音乐的Tab选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的Tabs就被创造出来了。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。
从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条，这样就建立起视觉上的联系，让用户产生由内而外的一致感受；例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上，既让界面视觉独一无二，又进一步强化了用户对品牌形象的认知。
在UI设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法；使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。
我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：
1）使用阴影
阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力，让内容更聚焦。
2）使用不同的背景色来区分
通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分；所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除分割线，因为你根本不需要它。
3）增加额外的留白
创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了，通过留白和间距来实现元素分组是UI设计中的常用手法。
在App中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。
通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。
如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观；这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。
选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。
虽然默认字体可以满足大多数App 的设计需求，但会出现一个问题就是——系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微；例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。
大多数App都支持三方登陆，他可以减轻用户注册的时间成本。
通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计；一个设计精致的App不应漏过任何的细节，我们可以以自家App的图标风格为依据，对第三方图标进行优化设计。
App中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式；为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。
我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。
图片的质量影响着整个App的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想；而低品质的图片会瞬间拉低App的质感。
在App设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用；即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
现在的UI界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率；同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微UI设计公司分享：当AI能够深度理解'团圆经济'的情感密码，节日营销正在从流量争夺升级为心智渗透的精准战役。58同城在中秋期间以'好岗离家近'为核心，通过AI生成融合城市地标与职业场景的个性化视觉，在6大城市实现千万级曝光的同时提升简历投递量40%。这场品效合一的实践揭示了一个关键趋势：AI不再是冰冷的效率工具，而是情感共鸣的放大器——它让招聘广告从信息堆砌转向情感连接，真正实现了品牌温度与业务增长的双赢。
项目首先基于人口特征、营销资源与业绩需求，精准圈定长沙、成都、西安、无锡、南昌五大目标城市。这些城市的共性在于春节/中秋返乡率超80%，乡土情结与团圆氛围尤为浓郁。
执行层面：项目聚焦6大城市的24个核心商圈，选择电梯内、户外大屏、公交站亭三大高频触达渠道。
主视觉采用“品牌区+创意区”双分区布局：左侧传递“好岗离家近”的核心主张，右侧则分别针对B端企业（展示招聘实力）与C端求职者（突出岗位优势），引导“求职者投递-商家入驻”的双向转化。
AI设计的核心价值，在于让“情感共鸣”与“高效落地”并行不悖。本次项目中，AI技术贯穿创意生成、视觉优化全流程，既精准传递“团圆+留乡”的情感内核，又破解了多城市定制、短周期交付的效率难题，实现双重突破。
设计提案方向：
设计紧扣“中秋团圆”与“留乡就业”的双重诉求，以主题文案将求职需求与家庭情感深度绑定，精准触动目标人群的“本土情结”。
创意构思沿两个方向展开：
「中秋+商圈实景」方向提案：
快速建立“本地招聘”的直观认知，通过融合城市地标与品牌色，结合 “中秋团圆” 节点，延续 “好岗离家近” 的核心诉求，同时针对不同城市定制化文案（如西安的“照的见你的未来”、成都的“岗位和火锅一样沸腾”），既传递就业价值，又契合城市气质，激活留乡就业的情感需求。，让城市印记成为情感纽带。
「中秋+地标+职业人物」方向提案：
采用真实场景与AI生成插画人物相结合的方式（如职场女性与城市景观、特色元素的融合），画面生动富有层次，打破传统招聘广告的单调感。
最终方案：
AI技术在此次项目中深度融入从创意到落地的全流程，实现“多快好省”的突破：
创意图像生成：借助Topnow等工具，快速合成“中秋+商圈”的定制化场景，使AI元素与实景自然衔接，直观传递信息，降低用户理解成本。
高效素材处理：
即梦4.0：
字体设计：几分钟内完成字体设计方案。
处理图片：快速调整建筑角度、优化图片内容，适配户外大屏的传播需求，大幅减少后期耗时。
即梦3.0：
生成图片：月亮的质感与主文案的艺术化呈现，通过 AI 技术实现视觉吸引力，既保证节日氛围的营造，又让文案具备强记忆点。
卡通插画：效果比4.0优秀
在插画生成上表现卓越，通过精准指令，快速产出风格统一的本地职业形象（如成都外卖小哥、西安青年群体），传递“本地工作的愉悦感”，效率远超人工。
关键词参考：
“一个外卖小哥抱着熊猫玩偶，大步跑，绿色系工作服，开心地笑，黑色单线描边，扁平插画，炫彩配色”
“一个女孩面对手机视频通话，身穿衬衫，坐姿端正，张口说话，居家环境，黑色单线描边，扁平插画，橙色系配色”
“5个男女青年，抬头看前方，一人手指前方，全身，站立，背影，时尚穿搭，黑色单线描边，扁平插画，丰富配色”
具体成效：
创意阶段：半天生成4个完整方向，传统方式需2-3天。
多城市适配：快速产出兼具系列感与地方特色的视觉方案。
修改优化：响应客户反馈的速度提升70%以上。
基于“一套核心视觉，多场景适配”原则，AI扩图、高清修复，协助快速延展生成线下物料、线上专场Banner、长图海报等多尺寸物料，确保线上线下品牌形象统一，强化用户认知。
AI赋能的设计创新，本次设计通过情感、商业、品牌三大逻辑，实现“品效合一”核心目标。让设计不仅是视觉呈现，更实现了品牌价值与业务增长的双重落地。
1.情感逻辑：激活本土情结，拉动C端转化。AI设计精准触达留乡需求，让“像鸟飞往自己的山”不再只是心理期许，而是有具体岗位支撑的现实可能。数据印证成效：长沙、成都、西安等地线上专场简历投递量增长40%，“本地岗位”搜索量上升62%，有效拉动C端用户参与度。
2.商业逻辑：精准赋能B端，超额完成业绩。对B端商家而言，精准广告投放是核心需求。通过“行业+地域”的定制化广告设计，有效提升了商家投放意愿与合作转化。
3.品牌逻辑：沉淀长期认知资产。设计围绕“贴近受众、强化认知、促进转化”原则，将“提供家乡好工作”的营销逻辑，拆解为“明月+地标+文案+品牌信息”的直观的视觉符号组合，降低用户信息理解成本。通过品牌色、视觉等符号在多场景的重复曝光，持续强化“找本地好工作，就上58”的用户心智，使品牌从工具平台升级为“助力团圆”的伙伴，构筑独特的品牌竞争壁垒。
本次实践为行业带来核心启示：AI是设计师的“超级助手”，其核心价值在于提升效率与精准度。未来的品牌设计应聚焦于 “策略为先，AI赋能，情感共鸣”的融合模式——以策略为导向，用AI提效，最终以情感打动人心。
打动人心的永远是对人性的洞察和情感的共鸣：
对招聘品牌推广而言，这打破了“信息堆砌”的传统广告模式；对更广的行业来说，则示范了“AI赋能设计，设计驱动品效”的新路径。技术终究是工具，而深度的策略思考与人文洞察，永远是设计师不可替代的核心价值。当AI与品牌策略、情感共鸣深度结合，营销才能实现真正的突破，为品牌创造可持续的长期价值。
58同城此次中秋品牌营销项目，正是技术理性与创意感性完美融合的例证。用AI实现高效精准的落地，用设计传递深刻的情感价值，最终成就了品牌声量与业务增长的双赢，也为行业提供了可复制的品效合一实践范本。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
UI 设计中依旧有很多装饰图标要使用偏拟物的设计风格，虽然很多人以为可以通过 AI 来生成，但实际上真正符合页面需要的设计很难通过 AI 来获得，所以我们依旧要自己来绘制。
这类轻拟物图标画起来并不难，只需要掌握一定的规律以及几个基本操作技巧即可。而最好的入门方式，就是从“画圆”开始，就像学素描时最开始画的圆形石膏，用它来认识光影的效果。
设计中对拟物效果的实现，就是对三个基本要素的塑造，形体、光影、材质。
形体就是物体本身的外轮廓和外形样式，不同的风格和设计标准会对外形有不同的绘制要求，比如有的复杂写实有的简约随意。除了外形复杂度外，还有个关键的知识点，即 —— 透视关系。
透视关系就是现实世界物体在人眼中成像的一种模式，离得越近的东西越大，越远的东西就越小，也就是我们所说的近大远小。用一个正方体来解释，就是当它摆出不同角度时，那么侧边的面会朝远端逐渐缩小。
如果不带透视关系，那么它的不同面就没有缩小的效果，上下边平行处于等高的状态。
设计师输出图形，就要正确的反映空间关系，加或不加都可以，但不能出现两种混用的冲突，那就是没想好要怎么表现。同时就是元素本身角度的控制会对下一步光影的应用产生巨大的影响，因为不同的角度就会形成不同的光影关系，而之所以素描最喜欢从圆开始练起，就是因为圆形 “只有一个” 角度。
第二个光影要素，就是物体在接受光照后呈现出来的高光反射与遮挡光源后形成的投影。如果只有一个圆，在接受一个光源的照射后就会形成下面这样的光影关系。
也只有在光照的影响下，物体的表面才不会是纯色的，也才能反应本身的弧度。所以每次绘制拟物图形我们都要确定它的光源在哪，决定受光面和投影的方向。
最后一点则是材质，也就是物体表面使用哪种材料，这不仅会决定它使用哪种肌理纹路，也会决定它面对光影的效果。比如一个镜面材质，表面就是光滑且高反光度的，而磨砂玻璃材质，则是弱反光且具有透明模糊的效果。
上面三个就是拟物图标绘制最核心的知识点，也是最基础的美术专业知识，虽然它们还有很多细节可以拓展和学习，但所幸我们今天设计的质感图标不再是追求高度还原的拟物，而是经过简化的 —— 轻拟物。
虽然那些知识不能被忽视，但因为我们要设计的东西也简单，所以可以在一边实践中一边学习，效果会更好。
接着我们就开始来画圆，掌握拟物效果的实操方式，在这里我们演示用的软件还是 Figma，只用到最基础的矢量、填充、描边、图形效果等基础功能。不管你用 Sketch 还是即时设计、Mastergo 都一样。
第一步就是创建画布后画个圆，这个圆用 100-200px 大小就行，然后给圆填充一个基础的颜色。
然后我们确定这个圆是镜面材质的，光源是从正上方往下打。所以圆应该上方比下方颜色亮，且因为这是球体有弧度，所以添加的是 “径向渐变”。通过这个渐变的添加为整个圆的色彩定调，确定明暗关系。
接着添加高光和投影，高光在顶部呈现不规则的椭圆状，然后使用垂直透明度渐变向下逐渐消失。高光是种折射是会受到反射对象色彩影响的，所以高光也不可能是纯白，而要使用和圆一样色相的高明度色彩。
然后就是下方投影，这里一定要明白投影会反映空间的关系。如果使用默认图层效果中的投影，它只能表现环境中的背景和我们的视线垂直，光源也是从视线这侧来的。而我们现在希望塑造的是背景是在底部，且光源是从上打下来的，那么软件自带的投影模式就不适用。
软件自带投影的方向
我们希望创建的投影方向
想实现这个效果就要独立绘制投影，最简单的方式就是先画个小点的深色投影轮廓，然后为它添加图层模糊效果。
到这里图形基本的状态和光影效果都有了，但这看起来太粗糙了，想让它更细腻更生动，就看我们怎么理解光影并为它添加更多细节进去了。
首先作为一个有颜色的玻璃球体，虽然会形成投影但也有光穿过它投射到背景上，那么这些穿过的光线就可以被表现出来，也就是底部要再叠加一层有色的投影。
同时因为光穿透到底部会再往回折射，所以球体底部实际上是会“积累”光线的，这不是明暗交界线，而是玻璃材质本身的一种特性，所以这个积累亮度的底部就要单独画出来，然后添加渐变和模糊效果。
而光在打到顶部时高光的形成是在表面之下（这个大家可以观察玻璃珠），那么表层也有受光面，我们就可以再做个表面的椭圆模糊叠加到上方，让它的高光面更自然。
最后，就是为圆添加一个描边，这个描边还有渐变色，来表现球体边缘的厚度。而这个厚度在顶部是远处不是受光位置所以较深，而底部在反光处所以有高亮。
完成上面的效果这个案例就做完了，要想做细节还可以再往下做。我们可以简单在上面添加图标，那么就是一个玻璃质感的按钮。
做拟物类图标的内核，就是你想表现什么样的结果，要让它的细节呈现到什么地步。复杂和极简没有对错，关键的是你添加的每个细节都能有真实的物理特性去支撑，那么它们看起来才是合理的。
学习拟物就是认识美术的基本原理的过程，再学习不同细节呈现的软件操作方式。
软件是次要的，理解才是最重要的。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
附 Figma 官方文案节选：无论多少次被宣告 “消亡”，设计始终生生不息。它藏在帮你避免坐过站的地铁图里，藏在一目了然的菜单里，也藏在贴心的 App 通知里。设计不是转瞬即逝的潮流，也不是可被替代的技术，它关乎体验、关乎感受，而非仅仅追求功能可用。设计屡遭唱衰，却一次次证明自身不可替代。官方链接：https://x.com/figma/status/2061101954034442293
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
商品卡片是一个广泛存在于电商产品中的组件，不管是狭义上的商品，还是广义上的所有可交易产品 (包括课程、服务、游戏等虚拟商品)，都需要商品卡片来承载它们的关键信息，以方便用户快速了解商品的核心属性。
常见的商品卡片有两种形式，也是电商 App 普遍使用的两个视图，即：网格视图和列表视图，卡片在这两种视图中有着不同的布局，其信息包含能力也有所差异。
1. 两种布局
如 Part.1 种所说，商品卡片通常有两种布局形式，分别是网格布局和列表布局。
①网格布局
网格布局可以使用瀑布流，图片的尺寸相对来说会更单一一些，因为需要严格控制卡片的错落程度，不至于过于杂乱。
当然，并不是只能做成瀑布流，完全对齐的网格布局也很常见，只需要严格限制图片和字段的高度，且为有高度差异的字段 (一般是标题) 留出空间即可。
②列表布局
列表布局通常也会保持所有图片尺寸一致，但文本区域需不需要与图片等高，得看具体项目中商品需要露出的信息多寡，像京东这种信息非常多的，文本区域就可以超出图片的高度范围。而如果信息量中等，那么等高是一种比较好的选择。
但如果信息比较少，强行把某一字段与图片底对齐的做法会导致组件内的间距比组件间的更大，从而影响亲密性识别。
这时候可以在两个商品之间加分割线。
2. 卡片样式
主要有三种样式，我称之为有全包、半包和开放式。
全包：有明确的卡片背景，将图片和文本全部包括在内部，比较不常见。
半包：图片部分会撑满卡片的边界，而文本依然在卡片内部，比较常见。值得注意的是如果卡片需要做圆角，图片朝内的两个角不需要给圆角。
开放式：没有明确的卡片背景，图+文本自成卡片区域，在设计上通常会让文本两侧较之图片稍微向内缩进一些距离，在让亲密性表现得更舒适。可以两侧缩进，也可以只缩进右侧。
3.卡片内容
不同类型的商品、不同需求的产品所需要表达的信息是不同的，但总结来说有以下这几类：
其中，图片、标题和价格，这三个是最基础的信息，几乎每个商品卡片都必不或缺。其余的信息则并不一定每个都要包含在内，不同的 App 会根据自己的展示需求挑选其中几类排布在卡片内。
信息展示的顺序、和权重对比，都会根据实际情况略作调整。例如一些国外的电商 App，会把价格的权重做得比标题更大。而对于网格布局和列表布局，所展示的信息尽可能保持一致。但因为网格视图不适合展示的过长，所以如果信息真的非常多，那么网格视图可以适当省略。例如小米有品是一个典型的例子，网格视图相比列表视图只少了商品规格表，因为这个字段实在不适合放在网格视图展示。
4. 不同的使用场景
之所以会把使用场景放在这里，是因为商品卡片的使用场景会影响它所展示的信息类型。举个例子，淘宝首页推荐内的商品卡片内所包含的信息，就比搜索出来的完整商品卡片少了一些。
这是因为推荐中的商品信息务求直击要害，其导购需求远远强于展示需求，同时也考虑到推荐页应同屏展示更多商品，所以会把其他可能会影响用户获取核心信息，且可能造成卡片过长的字段全部隐去了。
同理，商品卡片在购物车中的信息也不一样，考虑到存在于购物车中的商品都是用户已经了解过大部份信息的商品，所以设计时要抓住用户在这种场景下最关注的内容——价格和规格，所以购物车中的卡片会多出一些价格变动、规格重选、数量修改等信息。
总之，商品的使用场景很大程度上会影响展示信息的选择，最核心的要点是一定要考虑用户在不用的场景下，最核心的信息诉求是什么，不同 App 对此可能有不同的做法，我在这里也无法一概而论。
5. 不一样的商品卡片
①Asos/Massimo Dutti
国外的电商 App，尤其是品牌自己的 App，总是会做得非常极简，一个标题一个价格一张图片，几乎做到了商品卡片最简洁的状态，这是品牌气质决定的，也是产品定位决定的。所以国内走出海路线的 App 大多也会是这个风格，比如 Shein。
②马蜂窝/飞猪
举这两个例子并不是因为两者的组件设计得有多精妙，而是因为它们有着另一种不同的商品，以及所呈现出来的不同的组件——酒店。
我在这里想要说明的是，不同的商品类型可能也会有其特有的字段类型，尤其是服务型商品，不同的服务所呈现出来的组件会有很大不同。
这里收集了一些商品卡片的线上案例，也可以作为设计时的参考：
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
1. 初识B端产品和C端产品
C端 Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端 Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。
在我们日常生活中，在手机上使用的大多是 C 端产品，单一的 C 端产品通常是为了实现单一的需求。比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。
而面向 B 端的产品，我个人称之为「暗渡陈仓」，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即 C 端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。
虽说我们日常使用的更多是 C 端产品，但是 B 端产品对我们的影响也是时时刻刻存在着。C 端产品在明，逐渐改变着现代人的生活方式，B 端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。
2. B端和C端产品的区别
在我看来，C 端产品以消费互联网为主，B 端产品以产业互联网为主，C 端更感性，而B 端更理性。
从使用者的角度来说：
从开发的角度来说：
3. 后台产品常见分类
后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在 B 端产品的范围之内的，常见的类型包括：
1. 初识后台产品设计
说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，则苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多等问题。
后台产品不同于普通用户所使用的 APP，它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的 app，再给他几个其他的音乐 APP，用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。
对于后台产品来说，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业，甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有「保密协议」的使命感，所谓「隔行如隔山」，在后台产品更是如此；最后，后台产品设计往往没有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。
2. 后台UI设计工作流程
后台 UI 设计的工作，大体分为三个部分：需求分析、设计执行、数据分析。
在需求分析阶段，要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。
在设计执行阶段，参照 PM 给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做 UI 视觉方面的设计，而这时后端同步构思需求的实现方案。UI 设计师向前端了解实现框架，方便交接和沟通。当界面实现，UI 设计师应该是最早进行测试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。
数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。
3. 制定设计规范的作用
为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。
以下数值为参考，请结合特定产品灵活运用。
统一尺寸
据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。
适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。
页面框架
页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。
栅格布局
栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。
谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。
尺寸设定
一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度 200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。
相对间隔
定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。
颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。
品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。
辅助色用于提示其他场景，比如成功、失败、警告、无效等。
中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。
其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。
后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。
行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。
图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。
除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。
按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。
按钮的交互状态包括默认、悬停、点击和不可用。
按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。
规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。
填充按钮之间间距最小为 10px。
导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。
各类导航中的字体大小可进行统一设定。
顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。
侧栏菜单为垂直导航菜单，可以内嵌子菜单。
下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。
步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。
分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。
面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。
徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。
表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。
字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。
输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。
输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。
表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。
选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。
搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。
单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。
开关按钮外框 40*20px，内部圆形 16*16px。
表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。
表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。
表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。
行高
表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。
行数
表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。
列宽
列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「...」展示，鼠标悬停出现完整内容（比如详情、描述）。
列数
表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
对齐方式
表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。
详情入口
表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。
包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。
弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。
弹框
弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。
侧滑框
侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。
骨架屏
为某些特定数据提供数据加载等待时的占位图形组合。
全局提示
建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。
警告提示
用不同颜色和样式展示需要关注的信息。
通知提醒
消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。
绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。
页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。
数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。
功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。
考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。
不管是做 C 端产品还是 B 端产品，都是为了实现用户的需求、帮用户解决问题。
刚接触后台产品的时候，最希望能把产品做的炫酷、美观，工作中慢慢地发现项目的背后思考更为重要，产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多，对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力，合理引入 antdesign 和 element 等开源的设计组件，会使得设计师以及前端事半功倍，有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。
在后台产品的设计过程中，更应该把宝贵的时间用在更值得关注的事物上，让设计师能够辅助业务挖掘，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题和实现价值。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
分别站在整个产品设计研发流程中各个角色的不同角度，在工作中可能会有以下“抱怨时刻”：
由此，体现出搭建设计规范的作用和意义：
搭建设计规范的意义
产品侧：⼀个产品不同分支多个团队完成的时候，可以保证产品团队使用同一份设计规范快速完成产品原型设计。保证可复用模块的交互体验的⼀致性。
设计侧：通过设计规范去解决大部分需求，极大提高效率解放双手，让设计师能去做一些更发挥创意和想象力的设计。
开发侧：形成开发资产，可以提升研发效率，降低维护成本。开发工程师无需再重复开发同⼀个组件，只需要去组件库里调用即可，配合业务逻辑，高效完成界面开发，做到开箱即用。
测试侧：标准化的设计规范，是测试人员最喜欢看到的。例如，设计规范规定弹窗 footer 区按钮组居右，那么测试人员只要测到不居右，就可以给产品提优化建议了。
设计规范中具像化的环节是设计组件化，最早可以追溯到工业革命时期，福特创造的流水线生产方式。福特将汽车分解成零部件，再把零部件模块化组装，这⼀创举极大的提高了生产效率。
根据资料显示，T型车是世界第一款大量使用通用零部件，并进行大规模流水线装配的汽车。这种方式极大地提高了T型车生产效率，降低了生产成本。1914年，福特已经可以做到93分钟生产一辆汽车，而同期其他所有汽车厂商的生产能力总和也不及于此。到了1920年代，T型车的价格甚至降到300美元一辆（问世之初T型车的售价仅需850美元，而同期的竞争对手则通常为2000-3000美元一辆）。
原子设计理论最初来源于化学领域，这一点从名字可以听出来。在化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。
2013年前端工程师BradForst将此理论运用在界面设计中，形成一套设计系统，包含5个层面：原子、分子、组织、模板、页面。
当公司的业务产品逐渐扩大时，我们就需要制定一套完整的设计系统，提升设计和开发的协作效率，统一所有设计师的输出物。
总之，将设计拆分成一些基本元素，例如一个按钮、一个弹窗，再根据业务需求、产品逻辑重新组装，形成最终的产品，这就是原子设计理论（组件化设计），区别于整体设计制造的一种新的工作流程。
1. 设计系统搭建—原子
原子是物质的基础组成部分，是构成设计系统的最基础元素。
在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线、间距、圆角、阴影等。
2. 色彩体系
中后台产品的色彩体系主要分为3类：品牌色、功能色、中性色。
色彩体系
3. 文字体系
B端产品的文字系统设计目标：增强阅读体验、提升信息获取效率，字体是体系化界面设计中最基本的构成之一。
字体的大小、字重、色彩区分体现界面信息的层级关系。
文字体系
4. 阴影、圆角、线条
阴影：在B端界面中，有些特殊的元素会使用到阴影，从阴影中我们可以看出物体距离平面的高度，距离平面越高的物体阴影越大；
圆角：从直角到圆角给人带来从严谨冰冷到柔和亲切的心理感受，在B端界面中，常用2-8px圆角；
线条：分割模块及辅助定位。
5. 后台设计系统搭建—分子
在界面中，分子是按照规律组合起来的元素，如：按钮、搜索框、选择器等。
以按钮为例，文字、色块、图标和间距这些抽象的原子产生关联组合成分子：图标、文字传达含义；颜色、圆角传递特性；间距、尺寸定义规范。
6. 后台设计系统搭建—组织
分子+原子组合成更复杂和可拓展的组织（区块组件），如搜索区、卡片列表区、表单区、数据统计区等。
7. 后台设计系统搭建—模板
由原子+分子+组织构成的更复杂更专注页面底层架构，并非具体页面。
8. 后台设计系统搭建—页面
带业务逻辑的场景案例，如标注场景、权限管理、详情设置等，将页面模板填充真实的文字、图片后形成页面，即带交互逻辑的高保真原型图，真实内容使设计系统有了“生命”。
虽然通过设计规范可以对产研流程提效，但在开发还原中还是会经常遇到一些棘手的问题。
为了解决和优化上述的问题，DesignToken应运而生。它可以解决产品设计和开发过程中的细节、变更和风格一致性的问题，有效提高产研团队设计质量和协作效率。
1. Design Token 介绍
“Token”原本的意思是“令牌，指令”，与Design连在一起指“设计变量”。在工程逻辑中用于用户身份与服务器端进行验证，而在设计体系中，DesignToken则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过一套符合设计师、工程师理解的统一的命名规则，为这些样式参数的定义名称。
2. Design Token 优势
① 设计语义更易理解
帮助设计师和开发建立统一语言，设计方案更加一致。
从下到上的Design Token 命名思路
②主题皮肤一键替换
主题皮肤的替换可以用在两个维度，一是浅色模式和暗色模式的替换，二是不同品牌色之间的替换。我们可以将不同主题的同一个场景下的颜色使用同一个Token命名，达到一键换肤的效果适配不同客户方案。
③设计变更高效维护
替代传统工作流一键替换效果。例如修改二级文本的颜色，传统工作流需要先修改设计规范，修改设计稿，然后输出给开发，开发逐一更新代码，完成后提交给设计师进行走查验收。而当使用Token之后，只需要更新Token参数，就可以直接导出JSON给开发，一键自动更新。提高效率不止一点点。
④设计效果精准还原
代码编辑器自动化提示颜色选择，如不正确则产生报错。
使用Token开发和传统开发的对比
总结一下使用 Token 开发的优势：
3. Design Token 应用流程
第一步：提炼 token 元素；第二步：定义命名规则；第三步：整理 Design Token 资产表；第四步：开发与应用。
Design Token 应用实践
接下来具体说说如何为 Design Token 命名，命名方式目前并没有绝对统一的要求，不过有一定的逻辑规则，可以由设计师找前端开发一起商量出一个都能通俗易懂便于理解的命名规则，举个例子：
命名规则示意
为了更好的统一规范，应用 Token，建议成熟的互联网公司设计团队搭建自己的低代码平台。一键更换主题，尽在指尖。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
jankspace精准概括这类痛点：产品对外宣传全链路无缝自动化，实际使用却要在账号、支付、文件、权限间反复跳转，消耗用户耐心却毫无体验增益，属于设计失误带来的无效负担。消费心理学宜家效应佐证：用户亲手投入步骤完成事物后，会自发抬高产品价值；动手参与的沉没成本，最终转化为情感与记忆沉淀。
| 摩擦分类 | 用户体感 | 典型场景 | 设计决策 |
|---|---|---|---|
| 坏摩擦 | 被迫填坑、烦躁流失 | 重复登录、错乱跳转、无效排队 | 全盘删除优化 |
| 交易必要摩擦 | 安全感确认 | 支付二次核验、隐私授权 | 精简话术、保留必要步骤 |
| 仪式型好摩擦 | 沉浸场景、充满期待 | 开箱、线下试穿、集章打卡 | 结构化设计，配套情绪回报 |
| 记忆型好摩擦 | 愿意投入时间、加深印象 | 长内容观看、线下展览动线、手作 DIY | 设计体验峰值 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天分享分析一套名为「APEX」的航天发射与回收控制台 UI 设计系统——它可能是近年来暗黑系数据大屏领域最完整的作品之一。
────────────────────────────────────────
上图是Logo Construction 页面，包含几何图形构建过程、Key Values 清单、Clear Space 规范、On-Board Panel 金属铭牌效果图、ID Card 工牌效果图。
这套设计的起点不是界面本身，而是一个完整的品牌识别体系。Logo 采用几何化的"M/N"折线图形，通过严格的网格系统和角度标注（A1 60°、A2 60°）完成构建。这种做法传递出一个信号：这不是"画出来的"，而是"工程推导出来"的。
三个值得注意的品牌细节：
• Key Values 清单将 Corner Radius、Stack Ratio、Grid Multiple 等参数量化到小数点后两位——这种"伪工程规范"的呈现方式，本身就是一种视觉叙事手段，让品牌看起来像真实的军工项目
• On-Board Panel 金属铭牌效果图：把 Logo 做成金属蚀刻效果，配合 S/N 序列号和规格参数（AL-142 SPEC: AMS 4027），完成了从数字设计到物理实体的视觉跨越
• ID Card 工牌：Operator / Alex Chen / Launch Director / EXP 12/2026，用真实工牌的格式强化了整个项目的沉浸感
设计启示：B 端/工业级 UI 项目，如果能在界面之外补充品牌载体（铭牌、工牌、实体 Mockup），说服力会呈指数级增长。
────────────────────────────────────────
上图是The Brief 文档页 + WHAT BROKE ON B-04 事故报告页。
这套作品最独特的地方在于：它不只是"好看的界面"，而是有故事背景的完整设计系统。
The Brief 页面采用类似军方密件的红头文件格式——FROM / TO / DATE / SUBJECT / PRIORITY 的元信息栏，正文用衬线体排版，引用语"We launch the booster every twenty-three days. We recover it every twenty-three days"营造出强烈的任务氛围。
B-04 事故报告页则展示了另一种信息架构能力：
• Mission Timeline：一条时间轴贯穿从 PRE-IGNITION 到 RECOVERY COMPLETE 的全过程，关键节点（T+04:57 TELEMETRY GAP · 30s）用黄色高亮 + 虚线框标注异常区间——这是非常成熟的事件标注模式
• Operator Stress Map：三张并排的折线图分别展示 Launch Director / Telemetry Officer / Recovery Captain 的注意力负荷曲线，黄色渐变填充区域直观标示高压时段
• Operator Testimonials：底部三张引言卡片用双引号图标 + 小字署名，把冷冰冰的数据还原为人的体验——"We were guessing for thirty-eight seconds"
这种"数据 + 人文叙事"的组合，是高端 B 端设计区别于普通仪表盘的关键差异点。
────────────────────────────────────────
上图是One surface. Four operators. Nine minutes. 概念标题页。
"One surface. Four operators. Nine minutes."
这句话只有六个英文单词，但它完成了三件事：
• 定义了交互范式（One surface = 统一操作界面）
• 定义了用户角色（Four operators = 四个操作岗位）
• 定义了时间约束（Nine minutes = 任务窗口）
下方四张线稿风格的人物侧脸插图（Launch Director / Telemetry Officer / Recovery Captain / Engineer），用极简的轮廓线勾勒出角色身份，每个头像下方标注岗位名称。这种处理方式在视觉上极度克制，却信息量充足。
设计启示：任何复杂系统的 UI 设计，都应该有一个"一句话概括"的概念页。它不仅是封面，更是整个设计系统的"宪法"——后续所有界面的设计决策都要能回溯到这句话。
────────────────────────────────────────
上图是主控面板总览 + Launch Director 主界面。
这是整套设计的核心界面。T-MINUS HOLD 00:10:42.88 以巨大的等宽字体占据左半屏视觉重心，周围是大量留白——和之前分析的车辆仪表盘使用的是同一策略：让数字自己说话。
但这套设计在此基础上做了更极致的延伸：
① System Readiness 点阵网格 右侧用一个 8×8 的方格矩阵表示系统状态，每个子系统（Avionics / Propulsion / Range / Payload 等）对应一个格子。绿色 = GO，橙色 = HOLD，红色 = NO-GO。这种"一目了然"的状态表达方式比文字列表高效得多——用户可以在 1 秒内扫完所有子系统健康状态。
② Auto-Sequence Path 自动序列路径 左侧竖向排列的任务清单（Sensor Calibration → RF Uplink Established → Range Clearance...），每个任务前用三角形图标表示状态：绿色 ▲ = 已完成，橙色 ⚠ = 等待中，灰色 = 未开始。这是一种非常清晰的线性进度可视化方式。
③ 火箭线稿插画 右侧大面积区域放置火箭透明线稿图（Wireframe），内部用绿色渐变填充表示液氧（LOX）储量——84.2%。这种"技术蓝图 × 实时数据"的组合，既提供了设备形态参照，又嵌入了关键运行参数。
④ Secure Audio Channel 音频通道波形图 右上角的小型音频波形条（AES-256 ACTIVE），暗示这是一个实时通讯环境。这类"微细节"的存在感虽然弱，但对营造专业氛围至关重要。
────────────────────────────────────────
上图是Stage 1 LOX 详情 + 引擎集群温度监控。
上图是Launch Director 与 Telemetry Officer 并排对比。
上图是Recovery Captain 与 Engineer 并排对比。
这套设计最令人印象深刻的架构决策是：为四个不同角色设计了完全不同的数据视图，且每个视图的信息密度和数据类型都精确匹配该角色的职责：
|
角色 |
核心关注 |
主色调 |
关键组件 |
|
Launch Director |
全局状态 + 倒计时 |
绿色 |
Readiness 网格、Auto-Sequence |
|
Telemetry Officer |
实时遥测数据 |
红色 |
波形图、雷达扫描、引擎剖面 |
|
Recovery Captain |
回收海域 + 着陆区 |
绿色+红 |
雷达圆环、海况热力图、甲板平面图 |
|
Engineer |
子系统参数 |
绿色 |
Readiness 网格、诊断图表、引擎温度 |
Stage 1 LOX 详情卡片的设计尤其出色：
• 84.2% 用超大的绿色等宽字体显示
• 右侧是一个透明的圆柱形容器 3D 渲染图，内部绿色液体高度与百分比对应——数据可视化与三维插画的完美融合
• 下方列出 TEMP（-183.4°C）和 PRESSURE（4.2 BAR），字体大小层级清晰
• 引擎集群部分用九宫格排布九个引擎喷口，每个喷口上方标注编号，其中 #07 用橙色高亮标记异常温度（1120°C），#03 和 #09 显示正常温度
Engine Cluster 温度条形图：底部一根横向的温度分布条，从绿（420°C）过渡到黄再到红（1480°C），ENG-07 区域明显偏黄/橙——一眼就能定位哪个引擎出了问题。
────────────────────────────────────────
上图是TOPOLOGY 拓扑图。"Four roles. Two locations. One protocol."
这张拓扑图回答了一个核心问题：四个操作员之间是什么关系？数据怎么流动？
画面布局清晰地展示了信息链路：
• Ground Station（地面站卫星天线）→ 通过 Fiber Backbone 连接到 Mission Control（任务控制中心）
• Mission Control 内部有两个席位：Launch Director + Telemetry Officer
• Mission Control 通过 Orbital Uplink 连接到 Satellite GEO-04
• 同时通过 Manual Override/Fallback 链路连接到 DroneShip "North Star"（海上回收船）
• DroneShip 上有另外两个席位：Recovery Captain + Engineer
• 还有一个独立的 Meteorological Mesh / Atlantic 气象数据源
每条连线都用虚线 + 不同颜色区分（绿色 = 正常链路，黄色 = 备用链路，红色 = 应急链路），并标注了延迟时间（Fiber 1.2 Gbps / Orbital 38 ms / Descent Targeting 12 ms）。
设计启示：复杂系统的 UI 设计，如果缺少一张"上帝视角"的拓扑图，用户就很难建立对整体架构的心智模型。这张拓扑图就是整个系统的"地图"。
────────────────────────────────────────
上图是轨道飞行视图 + Ascent 阶段视图。
这是整套设计中最具视觉冲击力的页面之一：
上半部分：地球边缘的太空视角，可以看到城市灯光分布在大陆上，一枚白色箭头轨迹线从地表射入太空，旁边标注 8.42 MACH 和 112.4 KM —— 当前速度和高度。右上角的状态标签显示 MAX-Q CLEARED（已通过最大动压点）。
下半部分分为多个数据模块：
• Aerodynamic G-Force：左侧的 G 力曲线图，红色斜纹填充区域标示危险范围，白线表示当前值（// critical load 6.22G //）
• Aerodynamic Heating：六边形蜂窝热力图，中心亮红色表示最高温区（Peak Nose Core Temp: 1,940°C）
• Flight Event // WECO：事件列表，[ STAGE 1 CUTOFF CONFIRMED ] 用绿色标注已完成事件
• Trajectory Attitude：右侧小型地球仪显示当前姿态角（Pitch: 48.1°, Roll: 0.8°）
特别值得一提的是下图的变体版本——部分区域被黄色/黑色斜纹遮罩覆盖，模拟军事系统中常见的"机密信息遮盖"效果。这种细节处理极大地增强了真实感。
────────────────────────────────────────
上图是真实控制室环境中的大屏渲染。
这张图把 UI 从"屏幕截图"提升到了"空间体验"层面：
• 整个控制室笼罩在红色应急灯光下，营造出紧张的事故处置氛围
• 中央大屏显示的是 Telemetry Officer 的雷达界面（红色主题）
• 大屏前方坐着几位操作员的剪影背影，他们面前还有各自的工作站屏幕
• 右上角的数字时钟显示 3:20，暗示这是某个关键时刻的时间戳
为什么这张图重要？
大多数 UI 设计只停留在 Figma/Sketch 的画布上。但这套设计考虑了物理环境中的呈现效果——红色环境光如何影响界面的可读性？大尺寸投影下的字号是否足够？多人协作时的视线方向是否合理？这些"超出像素"的问题才是决定实际落地质量的关键。
────────────────────────────────────────
上图是Aborted/Ordnance 中止/引爆界面。
当系统进入中止/紧急模式时，界面发生了显著变化：
• 主色调从绿色切换为红色：正常态的绿色元素全部变为红色或橙红色
• 圆形雷达视图中央显示 KSC LAUNCH-PAD 39A，外围有多层同心圆环（绿色→黄色→红色）代表不同的安全区域边界
• Exclusion Zone [ EXCLUSION ZONE ] 标签用红色菱形图标标记禁区
• 左上角显示 ABORT 状态标识，左侧边栏也变为红色调
• 底部的 Flight Termination System 面板显示 [ ORDNANCE ARMED ] 状态，KEY_ALPHA / CMD 显示 [AUTHORIZED] 或 [PENDING]
这种基于状态的色彩系统反转，是高风险行业 UI 的标准做法——用户不需要阅读文字，仅凭颜色就能判断当前处于"正常"还是"紧急"状态。
────────────────────────────────────────
上图是DroneShip 回收船甲板监控界面。
Recovery Captain 的主界面展示了海上回收阶段的全貌：
• 顶部状态栏：Vessel 名称 "A SHORTFALL OF GRAVITAS"、Droneship Connectivity [STABLE]、Signal Latency 24 MS
• Sea State & Wind：左上角海况热力图，Speed 14 KTS，Sea State 3 (MODERATE)
• 甲板俯视平面图：中央大型区域显示无人机船甲板布局，三层同心圆环（SAFE ZONE / RISK ZONE / ABORT ZONE），目标落点用绿色菱形标记
• 底部四模块：
• Grid Fins：四个舵面角度滑块（+02° ~ +05°）
• Deck Impact & Legs：着陆冲击热力图 + 四条着陆腿状态（LANDING LEGS: DEPLOYING...）
• Action Zone：机械臂抓取装置的线稿图 + [ DECK SECURE ] 按钮
黄色/黑色警示条纹的使用也是一大亮点——多处区域用斜纹条纹表示"受限/加密/不可用"，既是功能表达也是一种视觉节奏的调节手段。
────────────────────────────────────────
上图是Module 03/04 和 Module 05/06 子系统详情。
最后两张图展示了子系统的精细化设计：
Module 03 — VECTOR THRUSTERS（矢量推进器）：
• 四个推进器的 3D 线稿图，每个箭头标注推力方向
• 推力数值直接标注在推进器旁：42% / 38% / 89% / 34%
• 底部状态栏：DP MODE: STATION KEEPING [ ACTIVE ]
Module 04 — ALTITUDE TELEMETRY（高度遥测）：
• 一条下降曲线图，横轴为 TIME TO IMPACT（撞击倒计时），纵轴为 ALTITUDE
• 下方两个超大数字：ALT: 1,240m / SINK RATE: 42 m/s
Module 05 — G-FORCE TELEMETRY：
• G 力曲线图，红色区域标示危险范围
• 注释文本：// critical load 6.22G //
Module 06 — STAGE SEPARATION & MECO：
• 事件确认列表 + 多组进度条（Stage 1 Return Trajectory / Grid Thrusters / Retro-Burn 等）
• 右侧火箭剖面图标注各部件状态（Pneumatic Clamps: RELEASED）
这些模块化的设计使得整个系统具有极强的可扩展性——新增一个子系统只需增加一个 Module 卡片，而不需要重构整个界面。
────────────────────────────────────────
这套 APEX 发射控制系统 UI 给我们留下了以下可直接应用的设计原则：
1. 从品牌到界面的全链条设计：Logo → 工牌 → 铭牌 → 界面 → 物理环境，每一个触点都在讲故事
2. 概念先行，一句话定义系统："One surface. Four operators. Nine minutes." 让所有设计决策有据可依
3. 角色驱动的差异化界面：不同岗位看到不同数据，信息密度精确匹配职责需求
4. 状态即颜色，颜色即语义：绿色=正常/GO，黄色=警告/HOLD，红色=紧急/NO-GO/ABORT
5. 点阵网格替代状态列表：System Readiness 的方格矩阵比文字列表快 5 倍完成认知
6. 线稿插画承载工程美感：透明线稿 × 数据填充，比写实渲染更有"控制室"的专业感
7. 拓扑图是复杂系统的必需品：没有"地图"，用户就无法建立全局心智模型
8. 考虑物理环境的影响：屏幕上的好看 ≠ 控制室里好用，环境光、观看距离、多人协作都是设计变量
────────────────────────────────────────
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套车辆安全数据分析仪表盘的 UI 设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
────────────────────────────────────────
手机端 iPhone Mockup 中的 AI 智能洞察弹窗卡片，白色卡片浮层覆盖在主界面之上。
手机端的这张 Smart AI Insight Card，展示了 B 端弹窗设计的一个重要原则：层级的建立靠光影，不靠线条。
• 主界面采用浅灰背景（约 #F5F6FA），弹窗卡片是纯白浮层 + 微投影（Y-offset 4px, blur 8px），层次关系干净利落，无需额外边框来界定卡片范围
• 卡片内部包含车辆碰撞示意图、型号信息（Ford Model 2017）、事件类型标签、CTA 链接共四类信息层，通过纵向网格对齐排布，视觉密度控制在舒适区间
• 左上角的蓝色警示标签（高饱和蓝，类似 #0047FF）是整个卡片唯一的色彩重心——它同时承担了"信息类型标识"和"视觉激活点"两个职能，让用户 0.3 秒内锁定核心信息
设计启示：弹窗卡片中，单一高饱和色点 + 大量灰白留白 = 最高效的注意力引导策略。不要用多个颜色"争抢"用户视线——在 B 端场景下，克制即高级。
────────────────────────────────────────
iPad 宽屏 Mockup 展示的 Advanced Visual Data Graph 界面，左侧浅灰数据区 + 右侧高饱和蓝详情面板形成强烈对比。
全系界面仅使用蓝 + 灰白两个色系，却呈现出强烈的科技感和专业感。这种配色策略的背后是一套严格的色彩分工：
|
层级 |
颜色 |
用途 |
|
主内容区 |
#F5F6FA / 浅灰底 |
降低视觉疲劳，承载长期查阅的大量数据 |
|
强调面板 |
高饱和蓝 #0028FF |
聚焦关键信息，建立信息的视觉优先级 |
|
交互元素 |
蓝色渐变 |
按钮、选中态、CTA 链接 |
|
数据图表 |
蓝白渐变 + 灰色辅助线 |
保证数据可读性为第一优先级 |
其中右侧蓝色详情面板的处理尤为出色：纯蓝底色上使用白色线稿风格的车辆技术插画，融合了"工程图纸"的美学质感与"数字大屏"的现代感。这种「工程蓝图 × 数字大屏」的混搭风格，是近两年 B 端设计中逐渐成熟的视觉语言，特别适合汽车、工业、安防等领域的产品界面。
iPad Mockup 的展示意义：宽屏设备框让仪表盘的宽屏布局优势一目了然——选对展示载体，本身就是最好的设计说明。
────────────────────────────────────────
Collision Analytics 完整看板，在笔记本设备 Mockup 中的实际效果展示，包含主数据区 + 底部卡片列表 + 右侧蓝色抽屉面板。
在完整的 Collision Analytics 看板中，信息被严格划分为三个优先级层级，每一层对应不同深度的阅读需求：
第一层：核心指标（0.5s 锁定）
• 「48.2%」以超大字号占据左上角视觉重心区
• 这是用户在任何场景下都能瞬间锁定的"那个数字"
• 时间维度切片（Year/Quarter/Week）以 Tab 形式置于指标上方，提供灵活切换的同时不侵占核心数字的空间
第二层：趋势与异常标注（5s 理解）
• 折线图上用蓝色竖线直接标出风险突增的时间节点
• 箭头线从竖线引出，连接到文字说明"Collision severity increased by 64.2%"
• 这种标注式数据可视化让用户不必在图表和说明文字之间来回跳转——上下文信息被直接嵌入图表内部
第三层：可对比的详情卡片（30s+ 深入）
• 底部三张卡片（Collision Reconstruction / Firestorm Viper / King Cobra）以等宽网格并列排布
• 每张卡片结构完全一致：左侧标签 + 中间标题 + 右侧关键百分比，支持快速横向对比
• 右侧蓝色抽屉面板作为"按需展开"的详情层，随时可召唤、不抢占主内容区域
核心方法论：B 端仪表盘的信息架构不是"把数据放上去"，而是精心设计一条「用户先看什么 → 再看什么 → 如何深入」的视线引导路径。
────────────────────────────────────────
手机端两张卡片并排展示，左侧为蓝色聚焦卡片（Collision Reconstruction），右侧为白色常规卡片，两张卡片形成对比。
移动端的 B 端设计面临的核心挑战是：在极有限的屏幕空间内，把复杂数据讲清楚。这组移动端卡片展示了三个可复用的设计原则：
原则一：一卡一事 每张卡片承载一个分析命题，不做多任务混合。蓝色卡片 = 需要用户关注的条目，白色卡片 = 常规信息条目。颜色在此承担了优先级语义，而非装饰功能。
原则二：图文合一 车辆技术插画与百分比数据（如 35% severity）在同一卡片内左右排布。插图不是装饰——它用视觉化的方式解释了"碰撞严重程度"这个抽象概念，大幅降低了用户的理解成本。右侧的折线小图同时提供时间维度的趋势感知。
原则三：时间轴极简化 折线图上方的时间维度切换（Year/Quarter/Week/Month/Day）只用一排文字 Tab 完成，整个交互区域高度不超过 40px——零控件感，零视觉冗余，却承载了五个时间维度的切换入口。
────────────────────────────────────────
Focused Analytics 界面，左侧大量留白区域居中展示 +64.2% 大数字，右侧为折线趋势图 + 蓝色聚焦行动卡片。
最后一张 Focused Analytics 画面，是全套设计中最值得细品的一个单页。+64.2% 的增长数据被单独放在整个左半屏，周围是大量留白。这种处理方式背后有一条被反复验证的设计法则：
数字的"说服力" = 字号 × 留白面积
具体执行层面：
• 巨大的无衬线字体 + 极简居中排版，让数字本身成为页面唯一的视觉锤，用户不需要阅读任何辅助文字，就能"感受"到这个数字的分量
• 右侧折线图从 0 开始缓慢爬升、斜率逐渐增大，用图形曲线的"加速感"还原了"问题在恶化"的紧迫性——这是叙事型数据可视化的经典手法，图形本身在讲一个"从平稳到恶化"的故事
• 左灰右蓝的分屏策略将界面分为"客观数据区"和"行动聚焦区"，完整闭环了「信息获取 → 风险感知 → 行动指引」的用户旅程
• 蓝色聚焦卡片内部包含标签、标题、技术插画、百分比数值、进度条、说明文字共 6 个信息层级，全部通过字号、字重、间距做出清晰区分，密而不乱
────────────────────────────────────────
这套作品给我们提供了以下可直接应用到实际项目中的设计准则：
1. 配色做减法：2 个主色 + 灰白体系，足够构建完整的科技感 UI。颜色越多，信息噪音越大
2. 信息分三层：核心数字 → 趋势标注 → 对比详情，为用户建立有节奏的阅读路径
3. 弹窗靠光影：偏移投影 + 留白比边框分割更优雅，更符合现代 UI 的视觉趋势
4. 颜色即信息：界面上唯一的高饱和色，必须指向用户当前最该关注的区域
5. 移动端一卡一事：小屏不做多任务混合，一张卡片讲清一个命题，宁可多滑一屏
6. 数字要能被"感受"：超大字号 + 充足留白 + 叙事型曲线，比干巴巴的百分比数字更有冲击力
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com