在接触和学习 UI 设计的时候，我们都必须面对国内外 UI 设计风格差异巨大的问题。比如最近 618，相信大家没少被国产应用的广告“亲切的”问候。
一方面是寻找设计灵感时要做区分，另一方面则是我们学习 UI 时看的书籍，学习的理论、规范，都是由西方国家产出的，而国内设计的方向却和它们背道而驰，用一个词来形容现状，那就是 —— 割裂。
所以在初学阶段，理论学的越多，受到的冲击也就越大，疑问也就越多。所以我们今天的目标，就是来帮大家解答这个疑问。
当我们研究国内外 UI 设计的差异时，样式上的差异只是表象，它们是由更深层次的因素所激发，所以我们首先要深究这些问题的根源。
根据过去十几年的 UI 研究经验，我总结的设计差异包含下面这些因素：
1. 盈利模式的差异
国外产品相对国内的盈利模式相对简单、健康，排除掉大型平台和其它服务配套应用外（比如会员、硬件的配套），基本就是买断、订阅、广告这三个途径。
比如我们熟悉的 Figma、Canva、Notion 等，都是订阅制服务，在产品具备足够竞争力的条件下发展出海量的付费用户，获得巨大的收益和估值（团队只有一两百人时估值过百亿刀）。既然做好产品就能盈利，那这些产品的目标自然是打造更好的产品和提供更好的服务或体验来获得收益。
而国内市场我们都知道，用户付费的意愿是非常非常低的，这就导致很多产品即使做的还不错也看不到盈利希望，尤其是大厂产品，比如迅雷，百度网盘，网易云等等。
靠基础付费模式做不出让人满意的营收，产品团队自然要使出浑身解数来找到盈利点，不管是增加一些奇怪的功能，还是制造各种营销活动。而这些尝试想要获得持续的盈利是非常困难的，所以就得一直想，一直尝试，一直投放。
虽然吃相往往看上去很难看，但不这么做就会“暴毙”，而这么做至少还可以“苟延残喘”，为了生存和盈利，产品团队做出什么离奇的操作都能做出来。
这里还要澄清一点，有很多优秀的工具产品不是国内做不出来，是做出来也很难盈利，所以有能力的团队和开发者是不会轻易往火坑里跳的。
2. 人工成本的差异
第二点就是国内外人工成本上的巨大差异，发达国家的人工成本非常高昂，不只局限在产品开发团队的成本，还包括底层运营、客服、销售、业务员、快递员等等。
而产品的衍生业务往往要借助大量的底层劳力，比如京东做外卖服务，得有充沛的、廉价的骑手作为依托才办得起来，而这在发达西方国家是难以想象的。比如最近经常讨论的为什么日本线下购物市场还很繁荣，线上发展不起来。主要原因之一就是快递员的成本差了好几倍，做不出即廉价又便捷的网购体验。
加上西方国家对雇佣关系的保护，招人容易，裁员可就没有那么简单，所以多数产品团队对扩张都持非常谨慎的态度。人数少，又不能轻易搞 996，就大大限制了产品作妖的范围，这就直接导致他们没有人力做一大堆次要功能的迭代以及运营活动，设计需求自然也会低很多。
3. 用户习惯的差异
最后一点，就是用户习惯的差异。除了前面说的付费意愿低以外，还有很多其它因素。其中在我看来影响最大的因素，就是国内用户对互联网的依赖是远高于国外用户的。
国内的移动互联网行业爆发并不仅仅是局限在互联网行业里，而是把触手拓展到各行各业，用赢学的角度来讲甚至它还大幅度完善了政府基建和民生服务。我们今天缴纳水电费，办理银行卡通过线上就能完成，而很多发达国家甚至到今天还要你去营业厅手写填表。
并且互联网产品已经成为我们购物、娱乐的重要载体，大量的决策、交易、娱乐是在上面进行的。既然用户习惯和粘性都成型了，离不开这些产品了，那么“适当损害”一下用户体验也不是不可以。尤其是大厂各类离奇的功能和运营活动可以轮番轰炸用户，同时把用户对这类负面操作的耐受度都拉高了。
既然用户都适应了，那么为什么还要“装清高”，做个简约的、有原则的、有尊严的产品？当然是加入到运营的狂欢里和其它产品一起压榨用户的注意力，像孔雀开屏一样，在最鸡肋的器官上比划……
以上三点，就是造成国内外设计差异的根本因素。最早国内产品的设计是和国外看齐的，但随着市场的反馈和验证，我们最终走出了自己的道路。这是商业的选择，而不是简单归因给审美、民族、文化、消费力的限制。
不管创业者抱着什么样的想法，进入这个牌桌以后，最终都会被市场调教成相同的模样。
作为 UI 设计师来说，也不要认为这是错误的发展方向，因为这种模式大大增加了 UI 设计的需求量，间接提供了更多的饭碗。如果产品都按欧美的模式发展和设计，那对于国内 UI 设计行业来说真正的天塌了，设计岗位会锐减 8 成以上，而这是 AI 设计根本实现不了的破坏力。
有了内因，下面再对国内外 UI 设计的具体差异做对应的拆解，帮助大家更好理解国内市场的设计特征。
1. 中英文字形排版差异
第一个差异，就是中英文的字体形态差异。中文文字是方块化等宽的，而英文字母则是大小长短不一，词组长度更长，节奏感更强。所以英文设计中，往往会将字体作为一部分融入到排版中，丰富视觉观感。
而中文设计中文字的节奏感较弱，文本的主要作用基本就是传递信息，所以只用中文排版很难出现英文的相同效果，就会促使设计师添加更多的内容，来丰富界面的效果。
2. 运营需求的平面视觉
第二个差异，就是运营设计上的差异。欧美产品中运营活动不是没有，但是数量少，而且往往在设计上也做的很随意，说好听点叫简约，说难听点就是敷衍。
而国内运营活动数量多，且投入精力更大，运营的设计是没有限制的，可以用上广告平面的所有视觉手段，不管是插画还是 3D、AI、拟物、摄影。大团队往往会配置平面设计师完成这部分工作，小公司就要 UI 设计师自己负责，所以没有固定的设计要求，水平之间差距也巨大。
运营设计的差异，源自国内广告设计方向的特色，从早年追求隐喻、创意的合成设计，到现在追求视觉冲击力的大标题、大色块设计。
而国内运营设计在今天绝不只出现在一般广告位中，会见缝插针到所有元素中，比如页面顶部、二楼、胶囊、图标区、瓷片区、底部导航等等。
3. 字段和信息数量差异
国内有大量产品的功能和服务都更完善，这也就催生了更多的信息量和交互需求，单一页面、组件的信息量、交互、状态就远远比国外产品多。
这就导致我们在设计时要考虑这些复杂的情况，需要设计师做具体的业务分析整理字段，还需要做大量的稿件做测试和评审。
不像国外很多简单的产品内容就那么点，可以花大量精力去搞用研或者测试，在这种情况下光是完成产品需求就很困难，更遑论围绕那么海量的内容做用研也是很麻烦的。
所以国内团队虽然会强调体验，但实际设计过程中必然业务优先，体验更多是围绕业务的优化和改进。所以作品集表现上业务的权重是非常高的，绝对不是学习国外的项目包装逻辑堆砌体验和用研内容。
4. 品牌视觉特征的差异
在国内激烈的竞争环境中，建立品牌化的视觉感知就是每个产品都要认真对待的事情。但本身产品内容、信息量就已经很大了，要实现品牌化的视觉输出就没办法走传统品牌的“意识流”路线，使用简单的配色和大量的留白。
同时，UI 的组件样式又高度统一，使用常规样式完成的设计是很难塑造品牌化视觉的。所以最终的解决方案，就是给组件增加更多样式细节，通过局部的创意来塑造视觉上的差异，同时再和其它应用做出区分。
于是，主流产品就陷入这种样式上的竞赛，非常高频的更新组件和视觉的设计，希望做出和别人不同的设计同时又有自己的特点。
这种现状不能说是消极的，因为它确实推动了整个 UI 行业视觉的发展，但对 UI 设计师的视觉素养要求也就更高。所以今天国内的中高级 UI 设计师，转入国外 UI 市场以后都能实现降维打击，就是因为市场的要求对自身的磨练远比外部市场高。
基于以上的差异，可以说在国内做 UI 和和在国外做 UI 是两种难度，要学习和训练的方式也完全不同。作为 UI 设计师要懂得理解背后的成因，并不会无脑迷信国外的设计要求和标准，才可以帮助我们更好融入真实的工作。
结尾再说点有趣的问题，从我们之前学员到国外工作的反馈来看，虽然国内设计容易被嫌弃，但是从设计质量和输出上已经远超欧美的平均水平。
而他们的设计师多数还在划水搞一些无关痛痒的体验和用研时，我们在解决更复杂的商业问题，如果有机会，建议你们也可以去卷国外的 UI，会有你们想象不到的优势。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
当 Toast 内图标、装饰元素较多时，画面容易杂乱松散。可以在主体元素后方增加专属背板，既能收拢零散元素、强化整体感，还能快速增加视觉层次。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
近期完成了一个颇具成就感的项目——青海师范大学大气污染可视化系统的界面视觉设计与交互设计。
项目背景：
该系统由青海师范大学委托进行重点页改版，旨在参加环保信息化领域的比赛。原系统界面功能区划分明确，但数据堆叠较为拥挤，视觉比重失衡，信息层级模糊，导致用户难以快速聚焦核心内容。
设计策略与优化：
1、风格定位：采用科技感设计语言，以深蓝为基底，通过背景图案增强纵深感，辅以科技感边框与线条点缀，在丰富页面层次的同时突出关键数据。
2、信息重构：面对庞杂数据，去粗取精，提炼核心内容。通过文字颜色、粗细及高亮处理的差异化运用，强化主次层级，使用户能够以直观的方式获取信息，有效降低理解难度。
3、视觉优化：以清晰图表替代文字堆砌，适度留白营造呼吸感。关键数据浮于场景之上，形成空间层次，在有扩展性的同时提升阅读体验。
4、场景落地：完成全国页面及山西省临汾市专题页的精细化设计，涵盖治理事件、效果分析及污染浓度趋势等核心模块。
一点感悟：
大屏设计的核心难点从来不是炫技，而是将复杂数据转化为清晰易懂的信息。界面之美，在于让用户"一眼就懂"。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
民宿预订平台的首页设计如何精准捕捉年轻用户？木鸟、途家、美团三大平台通过差异化的首页布局，分别满足了00后的场景化需求、家庭度假的深度体验和95后的低价偏好。本文将深入拆解各家平台的流量分发逻辑，揭示从搜索框到金刚区的每一个设计细节，如何成为影响用户决策的关键因素。
首页作为每个平台的门面，不仅是形象的体现，也是所有业务的入口、用户的必经之路。不同功能的App有着不一样的首页模块，选择一种适合产品本身的首页展示方式非常重要。国内民宿预订平台们，又是如何通过APP首页设置实现增长的？
开始进行APP首页对比分析之前，我们先看下木鸟、途家、美团用户的差异。
木鸟民宿近年的年度报告中多次提到，00后用户占比59%。从途家民宿五一客群看，报告中提到：“00后”和“80后”是小城民宿消费的两大主力，预订量占比都达到24%。美团旅行清明报告中提到，“95后”占比达到48%。
三大民宿预订平台纷纷聚焦95后及00后——那些已经不满足于“酒店住宿”逻辑，对住宿体验产生兴趣的年轻用户群。
据马蜂窝数据，年轻用户群基础功能型的“硬性消费”占比从2021年约70%降至2025年约50%，而精神体验型的“弹性消费”则从约28%升至约42%，沉浸式体验年增速超过30%。千人千面的消费需求正在倒逼供给侧从标准化产品转向个性化、场景化供给。
回顾民宿市场十余年发展，一条清晰脉络是“加法逻辑”：从最初的农家乐、日租房，再到网红特色民宿，再到各种“民宿+”的挖掘。用户不再满足于单纯的民宿入住，开始期待有更多住宿功能场景之外的体验。
木鸟的细分场景、途家民宿的度假需求、美团民宿的低价体验，都不是标准化复制，而是根据各自不同的定位、用户、体验需求定制设计。本质上，是回答清楚一个问题：用户在什么场景下住民宿，旅游出片、携宠出游、周末度假、同学聚会，不同场景对应不同需求，最终催生出不一样的产品设计。
研究表明，较少的选择会让用户更愉悦一些。木鸟、途家、美团作为垂类民宿预订平台，核心目标非常直接，省去了多元业务的流量取舍，流量分发和路径非常清晰。
从三家民宿预订平台的首页来看，首页的结构制定逻辑决定了首屏内容是权重最高的，越往下权重越低，这是一种头重脚轻的布局结构。基于这种逻辑，视觉效果的强弱也是由上到下衰减的，而不是下方权重低的模块反而视觉最突出。
木鸟、途家、美团APP的首页都把最核心的民宿预订按钮放到了首页首屏中心位置，重要属性依次下降。木鸟民宿区别于途家和美团民宿的点在于，木鸟民宿只有首屏，没有下拉界面。这样做的好处有二：一是用户目光更聚焦，核心首屏只保留了必要的预订功能和服务展示，减少用户在首屏阶段的跳出；第二点则是避免了二屏往后的流量衰减，对一个垂类平台来说，后续屏的设置意义不大，用户的核心目的就是为了订民宿。
下面笔者结合各家APP的详细路径来详细拆解。
（木鸟民宿）
木鸟民宿首页，重要的分流模块为：搜索、订民宿、二级导航、金刚区，分发逻辑由明确需求和隐形需求两部分组成。
明确需求：用户有明确目的，通过城市及地标定位直接查找民宿；隐形需求：根据用户兴趣不同，潜在需要的分发逻辑，例如周末出游、人气好房、宠物出游等。
明确需求各家差异不大，核心差异点在隐形需求。首页的又一个关键目标，是为不同风格不同诉求的用户铺设合理的下单路径。
按入住目的来分，有的用户是精准型用户，很清楚自己要住在哪里要哪天出行，这样的结构就方便用户一次筛选入离时间、地标位置等；有的用户是半精准用户，知道自己要去哪个城市但不具体，就可以通过目标推荐给与用户选择。
按出行喜好来分，有的用户是问题导向型，只要有地理位置符合的民宿就可以入住；有的用户是场景指向或特殊需求，比如携宠出行、出片等等。
木鸟民宿的目的分区相对清晰，没有重复的部分。
（途家民宿）
途家民宿的首页功能则相对繁琐，各种需求穿插出现。明确需求部分和木鸟民宿的逻辑相同，不同点在于宫格设置。途家民宿的宫格重点在平台侧的套餐推广和会员，这个区别或许是由于途家民宿营收压力增大，流量下滑导致单纯的订房佣金收入下滑，不足以支撑途家民宿的自造血，从而平台侧变现需求大。
（美团民宿）
美团民宿首页没有平台业务需求的设计，单纯的展示内容资源。首页结构单一，视觉美观，但屏幕效率低。
从三家民宿预订平台的首页结构拆解可以看出，木鸟民宿用户侧和平台侧设计相对平均，途家民宿重平台需求，美团民宿重用户需求。这与各平台的运营现状紧密相关。
木鸟和途家是中国最早的那批民宿平台，在2017年之后进入长时间的木途美三大时期。但在2020年途家民宿关停20城直营房源之后，途家民宿的现金流和营收压力骤然增加，携程商旅流量下滑加之重心转向跨境游，途家民宿可谓雪上加霜，难以独立行走的途家靠自身引流的佣金费用并不足以支撑商业运转，从而平台侧变现需求增加，这也是途家在首页中增加套餐和会员业务的最大因素。
木鸟民宿自2020年实现连续盈利后，尽管是一个独立运营的平台，但80%的自有流量让木鸟实现了良好的“流量-订单-扩张”的循环，网红民宿以及延伸的细分场景成为平台引以为傲的产品力，这也使得木鸟兼具用户体验和营收增长的双端利好条件。
美团民宿在首页舍弃了平台侧内容，主要和美团本地生活的发展息息相关。自外卖大战开始以来，美团确立的就是高频带低频的战略，酒旅的变现压力更多的放在主站美团旅行板块，对独立APP的要求并不大。
首页设计的最终目标还是要围绕让用户多逛逛，多看些民宿，以更少的点击完成转化。除设计外，重要的还是民宿平台的房源和服务。木鸟民宿依托特色民宿体验场景守住核心用户，途家期待通过家庭度假需求弥补商旅流量流失及特色体验短板，美团聚焦绝对低价民宿削弱品质缺失。因此，真正能让用户留下来的，仍在于平台能否在民宿市场的发展更新中，找到不可替代的生态位。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
Voltera 新能源停车充电系统 UI 全案深度拆解
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套双端停车充电系统的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
Voltera 是一套服务于新能源停车场的一体化智能管控系统，主要面向两大使用群体：停车场运营管理人员、新能源车主。
在传统模式下，双方都存在明显使用困扰：车场管理者无法直观查看车位状态、充电桩使用数据，场地利用率难以把控；新能源车主寻找空闲充电车位费时费力，充电进度、能耗情况也无法实时了解，双方使用体验都大打折扣，信息不通畅成为最大问题。
1. 面向车场运营者：把繁杂的运营数据简化呈现，支持全天候实时监控、数据趋势查看、车位预约管理，让管理工作更高效；
2. 面向新能源车主：简化操作步骤，快速找到合适的充电车位，实时查看充电状态与能耗，打造便捷的用车体验；
3. 全场景视觉与体验统一：电脑管理后台、手机 App、线下广告屏保持体验一致，线上线下服务无缝衔接。
系统支持多设备使用，包含 PC 端管理后台、苹果移动端 App、户外立式信息屏，全面适配不同场景下的使用需求。
整套系统根据两类人群的使用习惯，规划了专属操作流程：车主可完成登录、查找车位、在线预约、实时查看充电状态等操作；车场管理人员可查看全场车位数据、统计使用趋势、管理充电订单。
使用优势：
1. 功能分区明确：系统划分为登录首页、全场数据总览、车位筛选、充电数据查看、系统设置几大板块，功能划分清晰，上手零门槛；
2. 体验持续优化：结合大量真实用户的使用反馈反复调整流程，规避操作卡顿、查找困难等问题，适配不同年龄、操作习惯的使用者；
3. 人群需求区分：管理端侧重全场宏观数据，车主端聚焦个人用车需求，功能不冗余，每个人都能快速找到自己需要的内容。
电脑端专为车场管理人员打造，布局规整合理：左侧为常用功能入口，中间展示车位信息，右侧搭配全场停车场全景视图，底部呈现各类运营数据。
使用特点：
1. 信息主次分明：首页优先展示空闲车位、占用车位、充电车位等核心数据，再延伸至车位详情、月度 / 周度使用率等辅助信息，查看逻辑循序渐进；
2. 操作灵活便捷：支持全景地图缩放、鼠标悬停查看车位详情，还可自由切换年、周、日不同时间维度的数据，满足多样化管理需求，适配长时间办公查看的使用场景。
（2）手机 App：轻量化设计，随手即用
手机屏幕空间有限，系统遵循 “核心功能优先展示” 的原则，打造极简使用体验：
1. 底部设置固定导航栏，将充电这一高频功能放在核心位置，点击即可直达；
2. 首页优先展示停车场全景与推荐车位，充电页面重点突出充电进度，能耗数据也以简易图表呈现，一目了然；
3. 全设备体验统一：手机端沿用电脑端的信息展示样式，仅精简内容，用户切换设备使用时，无需重新适应，学习成本极低。
整套界面采用简约商务风格，以易用性为核心打造视觉体验：
· 整体以白色、浅灰色为基底，色调柔和，长时间查看屏幕也不易产生视觉疲劳；
· 用不同颜色区分设备与车位状态：绿色代表车位空闲、充电运行正常，蓝色专属标识新能源充电桩，橙色提示使用高峰，黑色按钮标注主要操作选项，无需阅读文字，仅凭颜色就能快速判断状态；
· 品牌视觉统一：简约品牌标识贯穿所有设备，线下宣传物料也保持同款风格，整体观感整洁专业。
文字大小区分明确，核心数据放大展示，辅助说明文字简洁精炼；页面预留充足留白，内容排布疏密得当，不会出现信息拥挤的情况。
系统搭配实景图片、简易图表辅助展示：用车场、车辆实拍图让场景更直观；用折线图、柱状图展示数据变化；用彩色区块区分不同车位类型，告别密密麻麻的文字描述。
系统将各类信息整合为标准化展示模块，分类清晰：
1. 车位信息模块：清晰标注车位位置、步行距离、收费标准、充电标识与预约按钮，电脑端多列展示、手机端单列排布，查阅方便；
2. 数据统计模块：突出核心数据，搭配简易图表，使用率、能耗等数据直观可见；
3. 充电详情模块：整合车辆状态、充电功率、剩余时长等信息，电脑端、手机端均可灵活查看。
规整的展示形式，让信息查找更快捷，大幅提升使用效率。
1. 重点数据放大呈现，车位占用率、充电进度、使用涨幅等核心信息第一眼就能捕捉；
2. 支持多维度数据对比，管理人员可清晰区分普通车位与充电车位的使用差异，为运营决策提供参考；
3. 悬浮提示功能：鼠标点击或悬停即可查看数据解读，不用反复跳转页面，查看数据更省心。
1. 智能推送贴心便捷：车主打开 App，系统会自动推荐距离最近的空闲充电车位，省去手动筛选的麻烦；车场管理后台首页直接展示全场运营数据，无需层层点击查找；
2. 数据实时同步：电脑后台与手机 App 数据实时联动，车位状态、充电进度毫秒级更新，信息零延迟；
3. 操作流程极简：从找车位、预约、充电到结束订单，全程仅需几步核心操作，无多余弹窗与繁琐表单，使用流畅；
4. 线上线下体验联动：线下户外信息屏与手机 App、电脑后台使用同款视觉与内容，服务体验保持统一。
1. 兼顾管理与使用双重需求：一套系统同时满足车场运营的大数据管理需求，和车主轻量化的用车需求，帮助停车场降低运营成本，提升整体服务效率；
2. 用数据赋能智慧运营：系统将车位空置率、充电桩使用率等运营数据直观呈现，帮助车场管理者合理调整定价、规划充电桩布局，实现精细化运营；
3. 贴合新能源行业调性：整体风格简约大气，契合新能源汽车科技、高端的行业定位，区别于传统老旧的停车系统，提升车场整体形象。
1. 多设备无缝适配：电脑、手机、线下屏体验统一，不同场景使用都顺手；
2. 数据展示通俗直观：不管是管理人员还是普通车主，都能轻松看懂各类数据；
3. 流程前置优化：结合真实使用习惯规划操作路径，从源头减少操作麻烦；
4. 精准区分人群需求：针对管理者、车主打造专属功能，各司其职，实用性拉满。
转载自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
近期和团队一起完成了一个超酷的项目——飞秒激光时域热反射测量系统（TDTR）的软件UI设计。
不得不说，做科研设备设计真的太“上头”了！
这不仅仅是一个软件界面，更是连接科学家与纳米世界的窗口。
分享一下我们的设计思考，希望能给做B端、科研仪器设计的姐妹们一点灵感～
1. 项目背景：让复杂的测量变简单 客户是一家专注于热学测试设备领域的科技企业。
设备用途： 测量纳米薄膜热导率、界面热阻等。
核心挑战： 如何把微纳尺度的复杂数据，转化成直观、易操作的视觉语言？ 我们输出了深色和浅色两套方案，客户一眼相中了浅色方案！理由是：干净、通透，长时间盯着屏幕做实验眼睛不累。
2. 设计亮点：严谨中的“小心机”
配色逻辑：红灰CP太绝了！
灰色背景： 作为基底，最大程度保证了数据图表的清晰度，不抢戏。
红色点睛： 作为品牌主色和警示色，关键操作按钮和重要数据用红色突出，既符合工业严谨性，又增加了视觉活力。
图标设计：低饱和度的“科研风” 没有用花里胡哨的渐变，而是采用几何图形+数据可视化元素。
线条扁平化，小尺寸下也能看清，降低科研人员的认知成本。
布局：多面板分栏 左侧控制参数，中间展示实时数据，右侧显示拟合分析。
这种布局让科研人员可以“一眼看全”，不用频繁切换页面，大大提升了实验效率。
3. 从设计到落地：高还原度的秘密 让人骄傲的是，我们不仅做了UI设计，还负责了QT前端开发！
通过多轮的效果走查，我们实现了设计稿的高还原度落地。看着设计图变成真正能跑代码、能测数据的软件，这种成就感真的爆棚！
4. 设计师碎碎念
做科研仪器设计，“克制”是最大的美德。 我们不需要炫技，只需要让数据更清晰，让操作更流畅。每一个像素的打磨，都是为了致敬科学的严谨。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
现在 AI 产品这么多，作为 UIUX 设计师，我到底应该使用哪一款？
Figma Make、Gemini、Claude Code、Codex，每一款产品看上去都能生成内容、写代码、做页面。
但真正深度使用过后，你会发现：它们擅长解决的问题并不相同。
兰亭妙微UI设计：今天，我们就站在 UIUX 设计师的真实工作流程中，聊聊每一款产品的能力边界，以及究竟应该如何选择。AI 产品更新很快，后续能力仍然会不断变化。
在对比之前，我们需要先明确一件事：
AI 产品不是功能越多越好，而是要看它能否进入你的真实工作流程。
比如，我要写一篇公众号文章、整理用户访谈，这和我要搭建一个复杂的页面 Demo，完全是两种任务。
如果没有理解差别，我们就很容易陷入一个误区：
今天看到别人用 Claude Code，我就去折腾 Claude Code；明天发现 Figma Make 更新了，又把所有流程搬回 Figma。
工具收藏了一堆，最后真正工作时依旧不知道应该打开哪一个。
那对于 UIUX 设计师而言，我们应该重点关注哪些问题？
接下来，我们逐个拆解。
如果你本身就在使用 Figma，又不想折腾复杂配置，那么 Figma Make 应该是最容易开始的工具。
它最大的优势在于：距离设计师原本的工作环境足够近。
你只需要在 Figma Make 中通过对话，就可以创建交互原型、Web 页面和功能 Demo。
同时，它支持将现有设计稿、竞品截图、产品文档和图片素材作为参考内容。比如，你可以丢给它一张竞品截图，让它参考页面布局、颜色和内容结构，生成一个相近的页面。
如果公司已经有相对成熟的设计系统，还可以通过 Make Kits 引入组件、变量、样式和使用规则，让生成结果更接近团队规范。
不过，这里大家需要留意：
接入设计系统，不代表生成结果一定正确。
特别是复杂业务页面，仍然需要设计师反复检查信息结构、组件使用和交互逻辑。竞品截图也只能作为参考，并不等于可以像素级还原。
这里稍微多说一点，现如今很多设计师都非常依赖 AI 工具，根本不用自己去做设计，但从来没有思考过 AI 生成的结果是否正确。比如今天有同学来咨询一个小的问题，在AI生成的页面中，他没有做任何的思考，直接使用结果导致提案失败，所以我们现在是需要具备判断能力的。
所以，Figma Make 更适合：
在我的日常使用中，Gemini 更多承担的是“内容助手”的角色。
它支持较长的上下文，也具备文本、图片、音频和视频等多模态理解能力。
因此，无论是阅读行业报告、分析竞品资料、整理访谈记录，还是拆解一段视频内容，它都非常合适。
在我自己的工作流里，无论是视频文案、公众号文章，还是课程资料，我都会使用 Gemini 做初步整理和润色。
从个人体验来看，它在表达层面会更自然一些，也更适合处理较长的文本内容。
不过，如果你的目标是直接修改 Figma 页面，或者搭建一套完整的设计工程化流程，它并不是第一选择。
Gemini 更适合：
Claude Code 的定位相对明确：
它首先是一款面向工程任务的代码智能体。
如果你需要理解复杂项目、梳理代码结构、定位 Bug，或者将一个页面 Demo 做得更加稳定，那么 Claude Code 会是非常不错的选择。
它能够读取项目文件、执行命令、修改代码，也可以通过 MCP 连接 Figma、Google Drive、Slack 等外部工具。
所以，Claude Code 并不是不能接入 Figma，而是它的重心依旧偏向工程实现。
在我的使用体验中，如果任务涉及复杂代码逻辑、项目级修改和稳定落地，我会优先考虑 Claude Code。
但如果目标是生成图片素材、调整视觉风格，或者希望在设计工具之间快速往返，它就不是我的第一选择。
Claude Code 更适合：
最后，我们来聊聊 Codex。
目前在日常辅导中，我更建议 UIUX 设计师重点尝试 Codex。
原因不是它在每一个单点能力上都绝对领先，而是：
它能够把设计师原本割裂的工作流程串联起来。
首先，Codex 可以通过 Figma MCP 读取组件、变量、布局和设计上下文，也可以将代码页面重新传回 Figma，生成可编辑的设计图层。
这就意味着，设计稿与真实页面之间不再是单向交付，而是能够反复往返。
其次，Codex 支持图片生成和迭代修改。
比如页面缺少图标、插画、背景图或者产品素材，你可以直接让它生成，再根据页面效果反复调整。
然后，它还支持 Computer Use、应用内浏览器和插件。
这就让设计师可以进一步串联：
需求梳理 -> 页面生成 -> 素材补充 -> 浏览器验证 -> 设计走查 -> 继续优化
比如我们之前讲过的设计验收，就可以让 Codex 通过浏览器查看真实页面，再对照设计稿检查问题。
当然，功能多也意味着使用时需要先想清楚任务。
Codex 并不是一个“一句话解决所有问题”的魔法工具。你依旧需要明确自己的目标，逐步搭建适合自己的工作流。
Codex 更适合：
如果你只是想快速生成原型，可以优先使用 Figma Make。
如果你需要整理资料、理解长文本和润色表达，可以优先使用 Gemini。
如果你要处理复杂代码和工程逻辑，可以使用 Claude Code。
如果你希望进一步串联设计、代码、素材和验收流程，可以重点尝试 Codex。
其实在我看来，设计师不需要强行选择唯一一款 AI 产品。
我自己更常用的方式是：
工具永远会不断更新。
我们真正需要掌握的，不是某一个软件的固定操作，而是理解它们的能力边界。
当你面对一个新任务时，能够快速判断应该使用什么工具，把想法真正落地，这才是 AI 带给 UIUX 设计师最重要的价值。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
在互联网产品日趋成熟的今天，你会发现所有的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。
蓝蓝设计的小编 http://www.lanlanwork.com