在互联网产品日趋成熟的今天，你会发现所有的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。
附 Figma 官方文案节选：无论多少次被宣告 “消亡”，设计始终生生不息。它藏在帮你避免坐过站的地铁图里，藏在一目了然的菜单里，也藏在贴心的 App 通知里。设计不是转瞬即逝的潮流，也不是可被替代的技术，它关乎体验、关乎感受，而非仅仅追求功能可用。设计屡遭唱衰，却一次次证明自身不可替代。官方链接：https://x.com/figma/status/2061101954034442293
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
jankspace精准概括这类痛点：产品对外宣传全链路无缝自动化，实际使用却要在账号、支付、文件、权限间反复跳转，消耗用户耐心却毫无体验增益，属于设计失误带来的无效负担。消费心理学宜家效应佐证：用户亲手投入步骤完成事物后，会自发抬高产品价值；动手参与的沉没成本，最终转化为情感与记忆沉淀。
| 摩擦分类 | 用户体感 | 典型场景 | 设计决策 |
|---|---|---|---|
| 坏摩擦 | 被迫填坑、烦躁流失 | 重复登录、错乱跳转、无效排队 | 全盘删除优化 |
| 交易必要摩擦 | 安全感确认 | 支付二次核验、隐私授权 | 精简话术、保留必要步骤 |
| 仪式型好摩擦 | 沉浸场景、充满期待 | 开箱、线下试穿、集章打卡 | 结构化设计，配套情绪回报 |
| 记忆型好摩擦 | 愿意投入时间、加深印象 | 长内容观看、线下展览动线、手作 DIY | 设计体验峰值 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
留存边界：极小众精细化定制场景，配置向导保留兜底入口，不作为主流操作路径。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
通过制造视觉元素的差异—— 让 “不一样” 的元素从周围环境中凸显出来，自然成为视觉焦点。
引导用户注意力优先落在关键信息或操作点上，这就是对比原则，我们可以通过形状的对比让卡片突出，增加视觉表现力：
在一些视觉页面中，也可以用异形容器增加视觉表现力，可以结合主题设计容器，例如下方就是一个以纸质火车票造型作为卡片背景的例子：
也可以结合内容设计容器，例如页面的内容是感谢用户，就可以从感谢信或者信纸的角度设计容器：
在设计中，想要为卡片或页面增加形式感，丰富背景是直接且高效的方式，可以从颜色、底纹、装饰元素这三个核心维度展开，让背景不再单调，为整体设计加分：
1. 优化颜色增加背景的形式感
可将背景的无彩色（如黑白、灰度色）替换为带有明确色相的有彩色（如柔和的薄荷绿、清新的天蓝、低饱和的珊瑚橙等）
借助 “无彩色与有彩色” 的属性差异，让卡片与周围的浅灰背景或普通卡片形成直观色彩对比，快速从整体布局中跳脱出来：
也可以将卡片的单一纯色设计，升级为多种颜色的渐变效果 —— 通过这种渐变色，让卡片与周围的背景、其他组件形成鲜明对比
从而快速从整体布局中凸显出来，成为视觉焦点，快速抓住用户注意力：
2. 给背景增加底纹
在背景中增加底纹（如低透明度的几何纹理、轻微的肌理质感等），不仅可以强化视觉层次，还可以向用户传递页面的风格氛围，增强记忆点。
例如科技类产品用细线条网格底纹增强科技感，古风类产品可以用纸张等营造复古的氛围感：
下面列举了一些常见的底纹元素，可搭配图层的混合模式、不透明度使用：
3. 在背景上增加装饰
可以根据页面/活动添加合适的装饰元素，装饰可以是图形、文字等与页面相关的元素。
装饰元素主要是为了平衡界面视觉，优化整体协调性：当界面存在 “大面积空白” 或 “元素分布不均” 时，装饰元素可起到 “视觉平衡” 作用。
这里的文字不仅是卡片标题，也可以是活动标题或者页签导航，那么文字的设计感可以怎么加呢？我们可以从图形装饰、线条装饰、文字装饰、背景装饰四个方面给文字添加设计感：
1. 图形装饰
将图形放在标题空白处增加标题的设计感：
也可以用来填补标题的空白区域，平衡视觉：
用图形代替文字的某一个笔画，传递产品的氛围：
2. 线条装饰
用简单的线条突出标题，辅助信息分层，突出重点信息，降低认知成本：
3. 文字装饰
用风格独特的字体写一句英文作为标题的装饰：
另一种方法是将文字放大起到装饰作用：
4. 背景装饰
在标题后面增加背景，不仅可以保证标题的可读性，还能让标题抓住用户的眼球，进一步强化视觉表现力：
尽管上面的案例分别展示了不同的提升形式感的方法，但在实际设计中，不必局限于单一形式。
将多种手法灵活组合（比如为卡片搭配有彩色背景的同时，叠加轻量底纹并点缀细节装饰），更能放大视觉表现力，让界面摆脱单调感，呈现出更丰富的层次与质感。
如果这篇内容对你有启发，或是你有其他提升形式感的实用思路，欢迎在评论区分享交流，一起探索更多设计可能性～
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
响应式是一种网页前端技术，让网页可以根据分辨率、设备的变更，自动调整样式和布局。
它的诞生起源于移动互联网兴起的热潮，彼时智能手机访问网站的需求激增，但多数网站的适配都是面向电脑端的大屏幕，仅有少数网站会额外开发符合移动端显示需求的版本（自适应）。
响应式的提出，就是为了解决这种问题，通过建立一套约定好的设计、开发方法，用一套代码自动适配台式电脑、笔记本、平板、移动端等各种设备，提高网站的兼容性和开发效率。
而学习响应式，首先就要从浏览器开始说起。
浏览器是一个非常特殊的软件，比如大家熟知的 Chrome、Safari、Eage 等，我们日常访问的所有网页，都需要通过浏览器加载并渲染出最终的样式。
可以把网页 HTML 文件理解成是一个程序，而浏览器就是运行这个程序的系统（环境），也就是说解析网页依靠的是浏览器而不是 Windows、Mac、iOS、Android、Linux 等客户端系统。
浏览器即系统中的系统（类似虚拟机)，不管在任何系统或设备上，只要安装了浏览器，就可以用大体相同的规则、逻辑去加载、渲染出网页。
但不同设备的屏幕有很大差异，网页如何识别并匹配这些设备呢？
方法主要有两种，第一种是浏览器会识别当前系统和设备，并提供接口让网页读取。而部分网站会准备多种规格的网页，根据获取的设备类型推送对应的规格，这种做法叫做自适应模式。
通常自适应只区分桌面端和移动端两种，较大的门户、购物、工具类网站，普遍使用自适应模式。因为移动端访问网页的需求并不高，所以会对移动端版本做大量的精简，降低开发、维护成本。
另一种方法，则是读取浏览器视图区域的分辨率。任何浏览器的界面，都包含功能区域和视图区域两个部分，功能区域提供相关的软件菜单、操作按钮，视图区域则是显示网页界面的区域。随着设备和屏幕分辨率的变化，浏览器的大小也会不同，网页视图区域也会跟着缩放。
网页视图注定小于整个浏览器的软件窗口，而浏览器作为软件，在系统中的尺寸不等于系统分辨率（或设备分辨率），一方面有系统的全局组件影响，另一方面窗口并不是非得全屏，用户可以任意调整。
所以响应式网页就是根据浏览器的视图区域做适配，不管你是在电脑上缩放软件窗口，还是在不同的设备、系统中打开，本质上都只是显示区域大小的变更。而在浏览器的检查选项中，模拟不同的设备其实就是缩放出一个指定的视图窗口出来。
这种依赖关系延伸出一个新的知识点，即网页显示的分辨率，和显示设备的屏幕分辨率，是两套不同的体系。
这是因为硬件分辨率和系统渲染的分辨率是两个概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸笔记本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系统的屏幕分辨率选择中，默认的却是 1512*982（即原来的 1/2）。
这是因为硬件分辨率太高了，1:1 渲染的话，那么大多数图标、文字是无法被看清的，所以默认使用了 2x 的规格渲染。但这只是其中一个选项，在 HIDPI 技术的加持下，用户还可以选择别的分辨率，比如我会进一步调高到 1800*1169。
在 Windows 系统中同理，虽然有很多高分辨率的屏幕，但是用户为了看清内容，会在系统中设置 120%、150% 的放大效果，等于为系统分辨率做出变更。
说到底，系统显示分辨率的规格也是无穷无尽的。但是不管外部的转换逻辑有多复杂，规格有多少，都和响应式网页无关，它只需要认准浏览器的视图区域分辨率即可。
所以了解线上案例的响应式布局规则，或者检查已经开发好的响应式页面，并不需要切换不同设备查看，只要拖拽缩放浏览器的大小（主要是宽度）即可获得完整的响应效果。
最后总结起来，响应式网页是面向浏览器视图区域做适配的布局方法，而不是面向系统、屏幕分辨率的适配，这和自适应布局有本质的差异。
在 B 端领域，绝大多数项目都只部分兼容响应式，放弃移动端的适配，即使支持移动端也是使用自适应的混合模式。要面对这些复杂的场景，就月需要理解上面这些基础的概念，否则设计师就无法真正满足响应式项目的前期创建和后期交付需要。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
因此今天兰亭妙微UI设计公司，来讲解 B 端产品界面的视觉风格，聊聊在整个行业当中视觉风格的变化与目前的现状。以及给大家说说未来应该如何选择自己产品的视觉风格～
我们会将整体分为行业初期，萌芽期、成长期、野蛮发展期、新阶段 ，每一个阶段给大家总结一个最为流行的风格，并分析这个风格出现的原因，方便大家进行理解。
我们把时间拉回到 2012 年。在那时，Ant Design 还没有出现，也没有什么 Element、Semi Design，行业当中最早的 B 端系统都是以客户端的形式进行呈现。
整体风格也非常老旧，像是那会儿的 Office、SAP、Salesforce，你可以看到都是他们青涩的模样。
在经典传统的设计风格当中，会使用大面积的白色作为底色，同时在页面中用灰色进行分割，使得整个页面散乱抢眼，导致整体的视觉很难被大众所接受，总体感觉信息较散，难以进行聚焦。
而在早期，出现这些老旧风格主要有三个原因：
关于这类风格的产品，大家不要觉得这夸张，其实在目前依旧有很多产品会延续这个风格。比如 医疗类产品、工业生产类系统，对于他们而言，能用即可，不必纠结太多。
但随着时间的推移，行业中对于 B 端设计的要求也在逐渐变高。
我们将时间推移到 2015 年前后，随着行业不断发展，在国外 Fiori、Salesforce 的出现让大家意识到，这类型的 B 端产品也是需要设计的。
因此国内外的很多系统都是在这一时间面世，像是 Ant Design、Element 都相继发布。
由于这些设计系统的诞生，你会发现大家对于整个 B 端设计有了一点自己的想法。
在设计上，会去考虑使用 区块划分，将整个页面进行规整呈现。
比如 SAP 在使用了 Fiori 过后，就会使整个界面更干净。
同样非常老牌的 Salesforce 在 2015 年的时候。也带来了相当大的视觉变化。整体都能感受到，整个页面会通过不断的分层、颜色的划分、通过黑白灰的方式去呈现页面当中的基本信息。
我们的时间来到 2018 年前后，在这个时间节点，很多产品都推出了自己的设计系统，对于 B 端设计风格而言，也会提出更高的要求。
比如 Teambition 产品当中，它们提供了自己的设计系统的内容去指导整个产品来进行迭代和优化。同样 Ant Design 它们也推出了自己的 Ant Design Pro 来演示使用设计系统过后，能够搭建出什么样的产品。
同样，这个时段很多产品也开始进行自己产品的视觉优化，这时候整体的风格是以：黑色侧边导航为主，然后内容形态进行延展。
比如像有赞、Coding、微盟、飞书，之前都是这样的设计风格来进行呈现。
你会发现它们在整体的设计上都会更加重视页面的分块颜色的区隔，整体页面的识别效率。同时这段时间爆发出来非常多的 B 端产品，随后国内都会按照侧边黑色导航的样式进行进一步设计，这一定程度上提高了国内 B 端设计的下限～
我们随后将时间推移到 2019 年后，在这时诞生了新拟态设计风格。
它最早是乌克兰设计师 Alexander Plyuto 在追波和 ins 发布的一副系列作品，随后大家发现非常奇特，所以得到广泛的关注。
新拟态的设计风格是以立体效果与浮雕元素，呈现更为三维立体的效果，会给人一种奇特、梦幻的界面体验。
随后就会有很多产品都开始进行跟进，比如 智能家居的产品、金融类产品都有所涉及，甚至很多 B 端产品也勇敢尝试，但大多数设计师设计完过后，整体评价都不算太高。
为什么没有大规模的推行，我觉得有 3 点原因：
现在还会使用新拟态风格的界面设计越来越少，大多数只会在官网设计的局部进行使用，这样可以转换视觉感受，给到用户更好的视觉冲击～
时间来到 2022-2024 年左右，你会发现很多产品都开始在这个时间节点进行更新。
像我们熟知的 飞书、有赞、微盟、ONES、Coding，再到 Ant Design、Salesforce，你会发现非常多的产品都在进行界面风格上的迭代。
对于这个风格，我们愿意叫它为 灰白风。
整体页面是以 灰色和白色 进行的页面划分，在分布上灰色占据弱侧信息，白色占据核心信息，进而形成对页面内容的划分。
聊到这里，可能有部分同学不太理解，这里我们以飞书管理后台的迭代作为示例，给大家进行讲解。
在 2018 年，飞书管理后台的第一个版本，采取的就是沉稳侧黑风，
在 2022 年，飞书的管理后台开始改变为灰白风格
由于业务的叠加，2023 年时，在此基础上增加了顶部导航的业务维度，最终形成了现在这样的界面。
为什么这类型的风格会大受追捧，我觉得有以下几个原因
关于设计风格，我们这篇只是讲解了过去的风格内容，下篇文章我们讲解当前整个 B 端产品的设计梳理，讲解了更为重要的四种风格。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
今天兰亭妙微UI设计公司，跟大家分享登录页的 12 种设计切入点，相信总有一款会入甲方爸爸的心。
作为设计师，我们常常面临一个窘境：要面对各式各样客户审美的挑剔，有时候被虐得都怀疑人生。
但找参考时，思维又容易被局限在常见的几种形式里，我通过分析大量优秀的登录页，总结了 12 个高级的设计切入点，希望能为你打开新思路。
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
设计解析：
通过以上 12 个案例的系统性拆解，我们发现 B 端登录页的设计可以有如此丰富的切入点。
它绝不仅仅是摆放表单的简单任务，而是一个融合了品牌战略、用户体验、视觉营销和技术表达的综合性设计挑战。
希望这 12 个切入点的详细分析，能成为您应对登录页设计挑战的灵感源泉和实用工具箱。
一个高级的设计，其最高境界是让用户感觉不到“设计”的存在，却能高效、愉悦地完成目标，并对品牌留下积极而深刻的印象。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com