做到这三点挑战，产品经理只会不断升值
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
最近深度体验了多款银行 APP，发现优秀的 UI 交互设计真的能让使用体验直线飙升！今天就和大家分享那些让人惊艳的交互设计细节，原来银行软件也能这么 “懂人心”！
传统银行界面里，资产总览可能就是一串冷冰冰的数字，让人看完毫无波澜。但在一些采用先进交互设计的 APP 中，数据可视化彻底改变了这种局面。比如某银行 APP 的资产看板，运用动态折线图实时展示近 30 天的资金变动趋势，当收益上涨时，折线会以流畅的动画向上攀升，还搭配轻快的音效，直观又有趣；而当支出增多时，折线下滑的同时，图表区域会变成醒目的黄色预警色，提醒用户注意消费情况。
再比如理财产品对比界面，不再是密密麻麻的文字介绍和参数表格。设计师将不同产品的风险等级、预期收益、投资周期等关键信息，转化为雷达图、柱状图结合的形式。用户只需轻轻滑动屏幕，就能 360 度旋转雷达图，全方位对比各产品的优劣势，这种可视化交互让复杂的理财选择变得一目了然，就像有个专属理财顾问在身边为你讲解。二、人性化交互流程：告别繁琐操作
过去在银行 APP 转账，可能要经历选择转账类型、输入卡号、填写金额、核对信息等多个步骤，流程冗长且容易出错。而经过精心设计的交互流程则大不相同。某头部银行 APP 采用了 “智能转账” 交互模式，当用户点击转账按钮，系统会自动识别用户最近的转账对象和金额，将其展示在快捷转账列表中，用户只需一键点击，就能快速完成转账操作。如果是给新用户转账，在输入卡号时，系统会实时校验卡号有效性，并通过颜色变化提示用户输入是否正确，避免因输错卡号导致转账失败的尴尬。
在账户管理方面，下拉刷新的交互方式已经屡见不鲜，但有一款银行 APP 却玩出了新花样。当用户下拉刷新账户余额时，界面会出现一个可爱的小动画，比如一只小钱包 “咻” 地打开，金币 “哗啦” 掉落，同时余额数字以动态效果更新。这种充满趣味性的交互，让原本枯燥的刷新操作变得生动起来，给用户带来了愉悦的使用体验。
交互设计的魅力还体现在对用户情感的关注上。在一些银行 APP 的登录界面，除了常规的密码输入方式，还加入了指纹识别、面容 ID 等快捷登录方式，并且在用户选择这些方式时，会有柔和的光影效果和轻微的震动反馈，仿佛在和用户进行 “亲密互动”。当用户忘记密码时，找回密码的流程也不再是冷冰冰的提示，而是通过引导式的交互界面，一步一步带领用户完成身份验证和密码重置，整个过程就像在和一个贴心的客服人员对话。
这些优秀的 UI 交互设计案例，不仅让银行 APP 变得更加易用、有趣，也真正实现了从 “功能导向” 到 “用户体验导向” 的转变。希望未来能看到更多银行在交互设计上发力，为我们带来更出色的使用体验！大家在使用银行 APP 时，有没有遇到过哪些让你印象深刻的交互设计呢？欢迎在评论区分享！
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
前面的文章我们分享了交互设计思维，这篇文章，我们来看看用户目标与交互目标。交互设计的核心，就是帮用户拆解这些目标并找到最优路径，让他们觉得“这事儿没那么难”。
编辑导读：人是视觉动物，相比于文字，人们更容易被图片吸引。而如何在界面设计中运用好图片，给用户更好的视觉体验，本文作者有自己的想法，一起来看看吧。
在UI设计中，配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计，具有设计感的配图不仅是吸引用户的重要元素，能比原本平淡无奇的文字界面更让人产生点击欲望，还能体现出设计师的品味、以及相关方面的专业性。
在这个快节奏的时代，相比文字，图像的传达效率会更快、更高、更有助于用户轻松理解及记忆。配图用的好，往往能起到决定画面基调、流程引导、视觉平衡等关键作用，所以，在同等样式的布局下，因图片的使用及处理方式的不同，界面的品质也会存在较大的差异。本篇文章将介绍一些在UI设计中配图的基础知识，帮助大家在图片列表、背景处理、图文混排、头图等相关界面设计无从下手时提供灵感，在选择图片、后续处理时如何做到有规律可循带来一些思路。
在文字出现之前，人们都是靠看到的图像来理解信息内容，即便后来文字能表达出很丰富的内容，图示也不可少，试想一下，当别人拿着密密麻麻的数据给你看时，能看的头皮发麻，你更希望有一张清晰的图表，但并不能说明别人的数据不清晰。所以，图像相比文字能更具说服力、更容易传达信息，使读者产生共鸣、震撼内心，让人看了一目了然，能直观的与人产生互动。
当说到UI设计中的图片非常重要时，并不是说文字就一定比图片弱，好的文字也能带给我们无限的遐想，只能说在更大的概率上图片和文字哪个更吸引人，所以我更倾向于观赏图片，然后感受到带来的美好。但是，如果非要问我选择哪一个时，我只能说“只有小孩子才做选择题，我（设计师）全都要”，图片可以表达出丰富的内容，再用文字言简意赅，是一个非常完美的组合。
图片有多种格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在UI设计中，最常用的无非JPG、GIF、PNG三种。
JPG：目前为止使用最多的图片格式，兼容各大操作系统浏览器及编辑软件，非常方便被打开和处理，但不能显示透明底，压缩后会失去一部分原始信息。
PNG：如需编辑，PNG应该算是所有图片格式中的最佳选择，支持无损压缩及透明底，但针对需要高保真的复杂图片，压缩后的文件较大，且有少数的浏览器不支持。
GIF：动效图片，支持透明底及无损压缩，通常由视频格式的内容转换而来，但对色彩有非常严格的要求，数量最多不超过256种，相比前面两种，GIF格式的文件更大。
在移动端UI设计中，我归纳了最常用的几个图片比例，分别是1:1、3:2、4:3、16:9四种，这些比例都是源于最早的胶片摄影及现代相机的传感器演变而来。当我们不知如何选择比例时，首先需清楚的了解界面图片的应用场景、来源用户以及图片比例背后的缘由，否则将很难把控，下面将针对这几个比例作具体分析。
1）1:1 比例
因为相机结构的原因，早期最传统的120胶片画幅就是正方形（6*6cm），即1：1的比例，此比例更容易的将构图规整，使其最大程度的突出照片主体。
在如今的电商APP中，商品图片绝大多数都遵循了1：1的比例，不管横向还是纵向都能将信息进行完整化的展示，且方便多场景、页面的适配。另外，用户头像也都使用了这一比例。
2）3:2比例
起初135胶卷的比例就是3：2，主要是因相机取景框的大小而决定。在移动端，这一比例使用也比较广泛，例如新闻、旅游类型产品，在拍照之后无需裁剪等处理，直接上传使用，非常方便。
3）4:3比例
随着摄影的发展，小/微型相机出现而诞生4：3比例，且移动设备发展迅速，在非专业摄影的情况下，手机能很大程度上代替单反并成为主流拍照设备，目前市场上主流手机的拍摄尺寸基本都为4：3比例。相比3：2的图片，4：3图片占比更大，能最大化显示图片以突出重点信息。
4）16:9比例
根据人体工程学的研究，人眼视野范围的比例约为16：9的长方形，所以电视、显示器及投影范围的设计都是基于这个黄金比例。
线上产品不用多说，影视类型的产品均采用16：9的尺寸，例如爱奇艺、优酷、腾讯视频等，到目前为止，这个比例在设定上还没出现过问题。
在上述4个尺寸中，最容易混淆的是3：2和4：3，如果不清楚如何选择，请根据产品目标定位，看看到底是以内容为主导还是图片为主导。例如：资讯类型产品很注重标题文案，即会使用上文下图、左文右图的版式，选择3：2作为封面，以降低图片的视觉重量；旅游、租房类产品，则可使用4：3的图片，以传达更多信息。这种选择方式虽然不是绝对，但当我们陷入两难的困境时，可作为参考依据帮助快速决策。
1）单图布局
全屏：具有很强的视觉冲击力，非常适合用于传播行业属性及品牌调性。单图全屏布局处理灵活，可整体突出、局部特写或加纯色不透明度纹理/遮罩，对图片细节、构图等有较高的质量要求，一般用于登录、启动引导、产品介绍背景等页面。
卡片：以单张图片作为视觉引导，宽高不固定，但占据界面大部分区域及重要位置，主要突出产品调性和成为吸引用户的流量入口，促使用户与其产生交互行为。常用于产品详情页头图、推荐页、专题入口等。
2）图文列表
在图文列表界面，很多时候，我们都在想一个问题，到底是选择左图右文、左文右图还是上图下文？所以我们首先要明白F式（从上到下、从左到右）浏览布局，这也跟人眼的浏览习惯相吻合，然后确定图、文信息内容的权重，根据优先级将重要的信息放在关键位置。
单列组合
左文右图：以文字为主、图片为辅，主要强调文字信息，且图片与标题的关联性不是很大，能减少减少图片对文字的干扰，对图片的质量要求不高，很多新闻、资讯类产品都是选用这种方式布局。
左图右文：在图片内容优先于文本内容的情况下，采用左图右文的方式，更强调以图片直观的传达内容、吸引用户的视线，对图片的质量要求高于左文右图，一般是电商、旅游类产品的最佳之选。
上图下文：一行只显示一张图片，大多采用横图，同屏一般不超过两个内容，用户需要从图片中获取大量信息，对图片的质量要求很高，大多有专门的人员审核，以完成对图片的品质的把控。这种方式很占用界面的纵向空间，部分租房类、艺术类产品会选用此种方式。
双列组合
并排：相同高度的比例控制，是较为经典图文布局，相比单列，同屏可展示更多的图片内容且空间利用率更高，能同时向用户传达更多信息。
错位：图片高度自适应（瀑布流），在限制宽度的条件下，高度自由发挥，让图片得到更多的舒展，利用率更高。双列错位的排版方式增加了版式的趣味性，可缓解用户在长时间浏览下的视觉疲劳，需要注意的是宽高比例不要太大、成跳跃式的变化，否则可能导致视觉混乱，且低高度的图片信息很容易被忽略。
3）多图组合
规则：3张或以上的规则的图片组合很常见，主要用图片列表来引导用户查看更多，通常利用单排左右滑动或九宫格的方式呈现。例如旅游、租房、影视类产品，包括手机相册、社交圈子等。
不规则：多图不规则比例并不常见，因移动端设备可视宽度有限，容易导致混乱的错觉。艺术、拼图类产品看到的居多，另外，部分社交类产品为了展示不同远近距离的层级关系也会用到这种排版方式。
图片常见的手势操为：滑动、点击、双指缩放，除此之外，还有很多针对所有元素都可以操作的交互手势，这里就不多说了，下面单独对图片手势作出介绍。
1）滑动
上下滑动：通常在图文列表或单张图片内容超过一屏的情况下，通过上下滑动查看更多信息。
左右滑动：为了拓展更多内容，多用于相同等级的图片列表或大图切换，在页面列表中会将无法同时展示的图片呈现一部分或以数量作为提示，引导用户探索以发现更多。
2）点击/长按
单击：单击可查看图片，从缩略图到详情或大图的切换操作；
双击：针对图片本身进行某些操作，比如喜欢、点赞等，另外，部分图片通过双击进行一定比例的放大缩小。
长按：调出图片的部分属性信息、下载图片等进行下一步操作。
3）双指缩放
当我们需要查看图片的某些局部信息或细节时，就会使用双指（开合）缩放的交互手势。
因图片的色彩变化不规则，为了保证图片上层文字的可读性，通常会在文字区域加一个纯色遮罩，也可设置不透明度的渐变效果，使遮罩跟图片的过渡更加协调，提升视觉美观度。
毛玻璃效果通常出现在应用的2、3级页面，对应用性能会有一定的消耗，一般使用封面图片进行大幅度的高斯模糊作为背景使用，可在上层加上一定透明度的蒙层配合使用，透明度数值根据不同的图片色彩及使用场景适当的调整。毛玻璃效果既能满足文字内容的清晰呈现，又能提供场景氛围并提升界面的品质感与神秘感，我们最熟悉的当属音乐播放页面的背景模糊效果了。
对于自营平台，内容较为固定的商品页面，可将商品抠图后自定义背景，让界面的整体设计风格可控，延展性更高。不适配平台类型应用，因为会让商家产生较高的运营成本。
图片圆角值设定，能体现出不同的产品属性及气质。例如：直角比较硬朗，给人高冷、力量的感觉，小圆角传达出安全、专业的属性，而大圆角显得活泼、可爱，更有亲和力。
图片出界常用于运营设计，例如图片轮播、胶囊banner、专题页等，另外，经抠图处理过的图片也可用在商品详情页顶部图示。这种效果能有效避免呆板，营造出画面氛围，制造出更强烈的视觉冲击力。
UI设计中，任何一个设计思路、想法及效果样式都是为产品而服务，图片也不例外，需要根据不同的场景进行合理搭配，好的配图更能与用户产生共鸣。
配图必须要明确主体，一眼就能看出核心内容，且不可以炫技或好看为主，否则会被多余的元素、效果影响主体视觉导致没有重点。但确定好一张图片的风格及色系后，后续也要保持统一。
图片以实用性为准，如果一味的追求漂亮、好看，最终可能形色各异造成视觉的不统一，严重影响用户体验。设计师在选图时需要对风格精准把控或后续稍加处理，以形成统一的视觉。
常见的控制方向有图片类型（位图/插画/形状）、视角（平视/仰视/俯视）、商品背景（简约/复杂/纯色）、呈现区域（堆积/局部/特写）、构图（中心/水平线/对称/对角线…）等。另外，还有很多抽象的方式但并不是绝对的，我们都可以尝试从不同的角度去调整，力求让所有图片达到最佳视觉效果。
因人的天性即向往美好、品质（非物质化）生活，固品质感的配图更容易吸引用户的注意力，让人想要拥有的感觉，如果色彩不够饱满，不管风格是多么统一，也达不到良好的用户体验。在选好图片后，可对色相、饱和度、亮度稍加调整，以确保色彩饱满、丰富。
有时候做设计为了方便，整个界面的图片直接复用同一张，即便设计的再好，也可能隐藏着不易察觉的瑕疵。需要说明的是，一个成熟且专业的设计师，首先要对自己负责，然后才是设计，即便是初稿，在即将呈现给大家或汇报前，一定要给出上线后最真实的效果，这样方便他人贴合实际给出一些方向性的建议，帮助自己更好的决策。经处理过的实际配图能体现整体效果，方便找出图片以外的设计缺陷，例如版式、字体大小、层级关系等问题。
静态图片常用的无非PNG、JPG这两种格式，文件较大的图片会影响打开页面或刷新时的速度，本地图片更会增加应用包的大小。从设计稿中导出图片时需要控制文件大小，如无特别（超大图）情况，切勿主动降低图片质量后再导出，否则会影响界面整体的视觉美观度。
这里推荐一个线上无损智能压缩神器：https://tinypng.com，仅限PNG、JPG、WEBP格式的图片。
△上图可以看出，图片在压缩了76%后，由1.4MB变成了332KB，肉眼很难看出（查看大图）质量上的损失。
切图不像以前那么麻烦，同一张图片需要手动导出多套规范，现在只需在软件（或安装插件）标记好切图，上传到类似蓝湖、摹客等第三方线上应用，分享给团队成员即可各自下载web、Android、iOS对应的多套规范制图。
设计师在设计过程中，一定要按照规范的最大极限保留原图，以iOS系统@1x规范设计稿为例，如果图片的宽度是100px，那么导入软件中的图片宽度至少要在300以上，然后再进行缩小（PS中需转为智能对象），如果低于300px，开发在导出@3x的图片就会失真，可能会因损失像素而出现模糊的情况。
文章中所介绍的图片使用方法及处理技巧，并非最好、唯一的答案，但在你没有更好的方法之前，多多少少能从中得到启发。UI中图片设计的本质在于自身的专业能力，然后用自己的视觉产出和设计手段去吸引、打动用户，从而为产品带来利益，也能体现出设计价值。
不得不承认，人们很多时候都是通过视觉表象决定是否需要深入了解、拥有某一件事/物，设计师就是在做视觉表象的表达，如果图片用的好，不仅能让你的设计更加出彩，还有一定几率转化用户，形成商业价值。
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于 CC0 协议
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
2025年，UI/UX设计领域正迎来一系列令人兴奋的创新趋势。从更具沉浸感的3D元素到人性化的分区设计，从动态排版到模糊与颗粒效果的巧妙运用，再到生物识别技术的普及和可穿戴设备的深度适配，这些趋势不仅让界面更加美观，更提升了用户体验和情感共鸣。本文将深入探讨这些前沿设计趋势，为设计师和产品团队提供灵感和方向，帮助他们打造出更具吸引力和实用性的数字产品。
2025 年，数字设计领域会有很多新机会，这都得靠创新来推动。设计师们现在越来越大胆，敢打破传统套路，设计出的东西不仅要实用，还得有吸引力，能真正打动人。
比如，会有更多 3D 元素加入设计里，让用户感觉更真实、更沉浸；还有很多设计会把 “方便用户” 和 “拉近人际距离” 放在首位，不再只追求技术炫酷，而是更关注用户的实际需求和情感感受。
那么我们来看一下有哪些趋势~
你有没有过这样的体验？打开一个 APP，信息像 “乱炖” 一样堆在一起，找半天找不到重点。
2025 年的设计师学会了 “断舍离”
就像日式便当盒把饭菜分成不同格子，现在设计师也把网页或 APP 界面分成多个 “小格子”，每个格子放不同功能或内容（比如数据、图片、文字）。
好处：信息更清晰，用户一眼就能看出重点，而且设计师可以灵活排列，让页面既整齐又好看。
比如有的网站用这种格子展示不同模块，重要内容更突出，干扰少。
分区设计技巧：格子的大小、间距、边框都有讲究！重要内容的格子更大、边框更粗，次要信息的格子更 “低调”，就像妈妈给你装便当，爱吃的菜永远摆在最显眼的位置。
图片网站链接：https://selestial.co/
以前网页里的 3D 图像是 “摆件”，现在它们会 “互动” 了！
3D 效果不是新鲜事，但现在更厉害：能互动、能沉浸！
比如网页里的物体可以 360 度旋转，虚拟试穿衣服、查看产品细节，甚至结合 AR/VR 让你感觉身临其境。
现在手机和浏览器性能更强了，3D 元素加载更快，甚至能在低配设备上流畅运行，设计师可以大胆用毛茸茸的 3D 图标、会 “呼吸” 的动态按钮（比如按钮按下时像真的被按下去一样凹陷）。
好处：画面更立体、有趣，用户体验像在真实世界互动，不再是死板的图片和文字。
图片网站链接：https://kevinhilgendorf.com/
图片网站链接：https://labs.chaingpt.org/
字体不再老老实实不动，而是会 “跳舞”：大小变化、颜色渐变、跟着用户操作移动，甚至根据内容情绪调整动画（比如错误提示字体变红闪烁，成功提示变绿飘动）。
好处：吸引注意力，传递品牌个性，比如让标题动起来，用户一眼就被抓住。
文字不再是 “死板的符号”，而是会 “表演” 的演员，我们可以做一些交互创意方面的案例假设
案例1：一个新闻网站的标题 “今日热点”，当你滚动页面时，“热点” 两个字会像火苗一样跳动，吸引你点击；电商网站的 “限时折扣” 按钮，文字会从左到右 “跑马灯” 式滚动，仿佛在喊 “快看我！”。
案例2：社交媒体 APP 的评论区，当有人给你发 “生日快乐”，“生日快乐” 这几个字会飘出彩色 confetti（纸屑），还会放大缩小；如果收到一条提醒 “网络连接失败”，文字会变成红色，轻微抖动，像在着急地告诉你 “出问题啦”。
案例3：未来的动态字体甚至能根据你的输入语气自动调整！比如你在聊天框里输入 “气死我了！”，发送后文字会变成红色，扭曲变形，模拟 “愤怒” 的情绪；输入 “哈哈哈哈哈”，文字会笑着上下弹跳，自带喜感。
图片网站链接：https://wodniack.dev/
图片网站链接：https://romaingranai.xyz/
背景不再是纯色或简单渐变，而是加了 “滤镜”：有的模糊像柔光，有的带颗粒感像老照片，让界面更有层次和温度。
好处：不抢主内容的风头，却能增加细腻的质感，让用户觉得界面更精致、有 “呼吸感”。
想象一下：你的屏幕不再是冰冷的玻璃，而是像磨砂质感的灯罩，透着柔和的光 ——
例如：一个阅读 APP 的背景，不是纯灰色，而是带点模糊的浅灰，像隔着一层薄雾，文字浮在上面更突出，眼睛看久了也不累；
短视频 APP 的点赞按钮背后，有淡淡的颗粒感，像老电影胶片，点击时还会有轻微的 “沙沙” 声，复古又治愈。
例如：有些网站的光标变成了半透明的小圆圈，移动时会在背景留下淡淡的拖影，像在雪地上踩出脚印；
购物车图标点击时，周围会升起细小的颗粒，像撒了一把金粉，让操作更有 “仪式感”。
现代人看腻了 “完美到反光” 的数字界面，这种带点 “不完美” 的质感，反而让人感觉亲切，像摸到了真实的纸张或布料。
图片网站链接：https://breadzine.com/
以前的暗色模式是 “纯黑配白字”，刺眼又冰冷，现在设计师给它加了 “柔光滤镜”：
不是纯黑背景配白字那种刺眼的暗模式，而是柔和的 “低对比度暗调”：比如深灰配浅灰，带点淡淡光影，像傍晚的光线一样舒服。
好处：保护眼睛，减少视觉疲劳，还营造出高级、安静的氛围，比传统暗模式更温馨。
颜色更温柔：比如微信的暗色模式，背景不是纯黑，而是深海军蓝，文字是浅灰色，图标带一点淡金色光泽，晚上刷手机像在暖黄色的台灯下看书，不刺眼还很高级。
场景化设计：一个助眠 APP 的低光模式，界面会模拟 “月光效果”，背景有淡淡的云层阴影，按钮像夜空中的星星一样微微闪烁，配合白噪音，让你还没开始冥想就先放松下来。
保护眼睛更贴心：低对比度设计减少视觉疲劳，尤其适合长时间用手机的上班族、学生党，再也不用担心晚上刷手机 “亮瞎眼”。
图片网站链接：https://www.chromatique.studio/
图片网站链接：https://dribbble.com/shots/24281290-Kenn-Food-Processor-Landing-Page
图片网站链接：https://silverdrive.nl/
你有没有被 APP或网站 的 “谜之提示” 搞懵过？比如 “操作异常，请重试”—— 到底哪里异常？现在设计师开始 “说人话” 了
按钮上的字、提示信息、错误提醒…… 这些细节文字越来越重要。比如 “提交” 改成 “确认发布”，错误提示写 “网络好像断了，点击重试” 而不是冷冰冰的 “错误 404”。
好处：让用户知道该做什么，减少操作困惑，就像有个小助手在旁边轻声指导。
按钮文案更具体：以前 “提交” 按钮，现在改成 “确认并发布动态”，你一下就知道点了之后会发生什么；购物车的 “结算” 按钮变成 “去支付（含 3 件商品）”，清楚告诉你当前购物车数量。
错误提示会 “安慰人”：当你登录密码输错，不再是 “密码错误”，而是 “密码好像不对哦，是不是字母大小写搞错了？试试找回密码吧～”，带点 emoji 和亲切感，让你不烦躁。
空状态会 “引导”：比如一个笔记 APP 的空白页，不再是冷冰冰的 “暂无笔记”，而是画着一个小台灯，配文 “点击新建笔记，开始记录今天的小确幸吧～”，鼓励你行动起来。
图片网站链接：https://clickup.com/
图片网站链接：https://www.headspace.com/
不用记复杂密码了！指纹、人脸、语音识别越来越普及，甚至未来可能用眼动或神经信号验证。比如手机刷脸解锁、支付时扫指纹，又快又安全。
好处：再也不怕忘记密码，登录像 “本能反应” 一样自然。
你还记得自己设过多少个密码吗？邮箱、银行、社交软件……2025 年，你只需要 “露个脸”
“扫个指纹”：
生活场景：早上上班，刷脸打开公司门禁；午休用指纹支付买咖啡；晚上回家，虹膜识别解锁手机，全程不用输密码。甚至连银行 APP 转账，看一眼摄像头就能确认身份，安全又快捷。
默默验证更省心：有些 APP 会 “偷偷” 验证你 —— 比如你常用手机的手势是右手拇指解锁，系统会记录你的握持姿势，当检测到左手拿手机且指纹不符时，自动触发安全提醒，不用你手动操作，安全藏在细节里。
特殊场景：比如戴着手套不方便指纹解锁？未来的可穿戴设备可能支持 “静脉识别”，通过血管纹路确认身份，下雨天、运动时也能轻松解锁。
图片网站链接：https://dribbble.com/shots/23201694-Face-id
智能手表不再是 “缩小版手机”，而是更懂你的 “贴身伙伴”：
智能手表、VR 眼镜、健康手环等设备的设计越来越难：屏幕小，怎么让用户操作方便？
比如用手势滑动、语音命令，甚至靠眨眼控制；还要考虑戴着舒服（轻、贴合手腕）、续航久、适应各种场景（运动时防水，强光下看得清）。
小屏幕大讲究：比如一个运动手表，跑步时屏幕自动切换成 “极简模式”，只显示配速、心率、里程，字体超大，你 glancing（扫一眼）就能看清；当你停下来休息，屏幕会慢慢显示更详细的数据，像个贴心教练。
交互方式创新：VR 眼镜不再靠手柄操作，你眨眨眼就能切换菜单，点点头就能确认；智能手环检测到你睡眠不好，早上会震动提醒 “昨晚睡眠质量一般，今天记得多喝水哦”，还会同步调整手机的屏幕亮度，帮你缓解疲劳。
场景化适配：比如滑雪专用智能眼镜，强光下自动调暗镜片，检测到你加速滑行时，界面只显示速度和路线，避免分心；潜水手表接触到水时，自动锁定屏幕防止误触，浮出水面后又恢复正常。
图片网站链接：https://inspect-ar.com/en/
图片网站链接：https://dribbble.com/shots/18628321-Fitness-Smart-Watch-UI
界面不再只追求好看，还要让用户用得爽、有情感共鸣：分区清晰、3D 互动、动态字体吸引眼球，模糊背景和低光模式让眼睛舒服；UX 写作和生物识别减少操作麻烦，可穿戴设备更懂用户的使用场景。
本文由人人都是产品经理作者【南设】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
用户体验是一个老生常谈的话题。在进行 UI & UX 设计时，我们经常会忽略一些细节，虽然我们并没有觉得有什么问题，但往往会极大地影响用户的体验，从而影响整个产品。作者在本文中提出了 6 条提升用户体验的微技巧，一起来学习吧！
在设计高效、易读和漂亮的 UI 界面时，只需要小的改动就能让你的设计眼前一亮。在这篇文章中，我为你带来了另一些容易付诸实践的 UI 和 UX 微技巧。这些技巧只需很小的改动就可以帮助你提升用户体验。让我们开始吧！
如果你有一个设计项目，可以让你在颜色选择方面有比较多的自由，不要总是倾向于用彩虹般的颜色来进行设计。
如果你走的是彩虹路线，你很快就会发现很多内容看起来都不匹配。简单地使用一个基础色，然后将该颜色的色调和明暗进行变化并应用，可以令你的设计更加协调和一致，并且看起来更专业，而不需要那些闪亮的彩虹和需要色彩理论学位。
UI 可以是干净的、极简的和直截了当的，这毋庸置疑。但不能以牺牲用户体验为代价。对于像选项菜单这样简单的东西，要确保用户只需快速浏览一下，就能够找到选择的项目。
你不需要在这里追究更多细节。简洁的粗体就足够让用户轻松的分辨出他们选中的目标，而且他们的输入已经得到反馈。
当涉及到长篇文字内容时，你可能会倾向于使用灰色的中间色调，这可能没什么问题。但如果你同时使用更轻字重的字体，就会发现这影响了这段内容在任何尺寸屏幕上的可读性。
不要让用户因为这种原因退出页面。可以通过将文字的颜色加深来简单地解决这个问题，让每个人都更加易读。对于较轻字重的字体，只需将其颜色加深几个级别，就能显著的改善其可读性。
你希望用户的眼睛每次都能快速、有效地注意到页面上最重要的元素，并将认知的努力降到最低。通过使用视觉层级原则，如字体大小、字重、颜色和布局，仅举几例，你可以通过这些技巧轻松地把最重要的元素放在突出位置。遵循这些原则有助于改善用户的体验，并有助于引导用户以更直接、准确地方式使用产品。
在用户进行操作之前，特别是点击某些 CTA 按钮之前，要确保他们不会被蒙在鼓里，知道接下来会发生什么。在执行操作之前，始终让用户清楚地了解他们在点击突出显示的 CTA 按钮时可以期待些什么。改善每一步的用户体验，不要让他们在旅程中任何一个触点产生疑问。
CTA 按钮在页面中哪怕不是最重要的部分，也是最重要的之一，让它在页面中突出出来!
不要让用户将它与页面上其他类型的元素（例如通知或标签）混淆。它需要很容易地被分辨出来，而这可以通过简单地为 CTA 设置单独一种颜色就做到。当然，你可以在尺寸、形状等方面做更多的细节，但只要为你的 CTA 保留一种颜色，仅此一点就可以减少大部分问题。
我希望通过这几条简短的小贴士，你能意识到对你的设计进行小的调整也能带来完全不一样的用户体验。
译者：吴鹏飞；授权获取：吴鹏飞；审核指导：王翎旭；
本文由@三分设 翻译发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
卡片式设计是产品常用的页面设计手段之一，它自带的分割属性让页面布局更加清晰，也是页面布局的利器。但是，分割也可能会影响用户沉浸式的浏览体验等问题。如何用好卡片式设计？本文作者对此进行了分析，与你分享。
近几年，卡片式设计可以说是移动端产品中极为常见的设计形式了，甚至有很多互联网大厂将卡片式设计纳入设计语言，在各大APP中得到广泛运用。
卡片式设计自带分割属性、让界面更有层次感，能给人一种视觉上的享受，也因此让其成为了页面布局的利器，但它并非万能，因分割的原因可能会影响用户沉浸式的浏览体验、造成横向/纵向空间浪费等问题，需要根据实际场景和内容形式来确定，不要专门为了“卡片式”而设计。
很多设计师对卡片设计习以为常，但对于使用卡片的原因、视觉表现方式、优/缺点等并不是很了解。那么卡片到底该如何设计？需要注意哪些细节？笔者根据经验并结合平时的一些思考，跟大家一起聊聊在设计中极易忽略的细则，希望能帮助大家提升卡片设计的精致感。
早在互联网时代之前，卡片就出现在了我们生活中的方方面面，如名片、不干胶标签、便利贴、会员卡…等，不管是何种类型的卡片，它都将代表着我们现实生活中的某个特定信息。
卡片指的是含有图片或文本信息的容器，它将我们需要的信息归纳在一起、并形成独立的个体，以至于后续被引用到线上界面中，同样具有非常不错的信息归纳效果。
卡片本身就是一个完整的信息区块、并同时承载丰富的互动方式。在UI设计中，个性化和美感兼备的卡片式设计具有很强的易用性，它是一个UI设计组件，将标题、文本内容、图形/图片进行整合并模块化，让信息的表达更加直观、操作也更便捷。
卡片式设计之所以能成为当今比较流行的趋势，是因为它能让界面信息更有层次感，从设计、交互、视觉以及用户体验等各方面来看，都有不错的优点。站在用户角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相对来说，学习成本也是极低的。
卡片在占用屏幕空间较少的情况下能够将不同大小、不同类型的信息内容按逻辑进行分组呈现，使界面结构更加清晰。相比纯粹的留白或分割线，卡片不仅对信息作出了分割，其本身还是一个独立的容器，让归纳组合后的信息能快速突出重点，将复杂内容简单化处理。
卡片式布局整齐简练，清晰的信息结构有助于用户浏览，方便快速找到自己感兴趣的内容，避免用户产生一种费时或感觉内容超长的恐惧感，还能节省更多的时间成本。最常见的就是信息列表、图文混排等，不仅做到了视觉上的美观，也达到了平衡文字及图片强弱的效果。
卡片式设计有利于场景拓展，他能在信息不断增/减的情况下、页面依然能组成一个连贯的整体，在视觉上毫无违和感。例如支付宝在头部插入的广告引流入口、淘宝在节假日增加二层楼…等。
卡片式设计一度打破了移动端多为纵向操作、原有传统的列表式布局，在空间有限的移动端设备中，还能很好的利用横向空间。将横向滑动区域的最后一个卡片漏出一小部分（若隐若现才是诱惑），不仅能给予用户更多选择与期待，其空间利用率也得到了很好的扩展，在展示更多内容的情况下依然能保持模块的整体性。
卡片式设计能很好的通过边界衬托出内容的整体性，特别是在电商类产品中的首页头部、瓷片区、营销引流区将其应用到了极致，即便在卡片数量较多的情况下，用户依然能清晰的感知到内容的归属层级以及重要信息。
卡片作为一个容器，它可以自由无限的等比缩放，非常适合响应式设计。在手机、iPad、电脑等屏幕尺寸复杂的情况下，通过放大缩小或增减纵向排列数量的方式配合响应式的断点设计，让同一界面在不同设备之间轻易的创造出一致性的视觉体验。
卡片给人最直观的感觉就是可以操作，它不用箭头、按钮或超链接等引导性的视觉元素提醒，节省了一定的页面空间，还有着更大的操作热区，无需做到精准点击。卡片式设计很容易融入各种交出手势，如单击、双击、长按、拖动、滑动等，为用户提供更多便捷的操作。
卡片可通过缩放的形式充分利用动画进行页面跳转，例如App Store“Today”频道，点击卡片后直接等比放大至全屏，给用户一种还停留在当前页面的错觉，避免了传统的跳转页面而造成的信息割裂感，流畅丝滑的过渡，给用户更自然的交互体验。
这种类型的卡片在UI设计中最为常见，柔和的圆角、边缘阴影以及四周很自然的留白，让内容模块的存在感更加强烈，整个页面信息的层级也更加清晰。
悬浮型卡片并非模态弹窗，与其相比，悬浮卡片不需要主动操作触发，可作为临时控件或长期固定显示，并且比模态弹窗能承载更多信息内容，可通过伸缩来定义卡片中的信息数量，或多、或少、或展示、或隐藏，在页面中非常灵活。
例如高德地图首页，搜索框及右侧的功能入口长期悬浮在地图之上，而下方卡片中的内容会随着高度的伸缩自动调节可展示的数量，非常实用。
通栏类型的卡片具有更强的视觉阻断，对区分不同的功能模块有不错的效果，不过这种类型只通过页面背景色保留上下边间、且不会过多，不然页面会显得零散、杂乱。
瀑布流主要正针对图片较多、或以图片为主的内容设计，它最大的优点是无需过于在意图片的高度，最大限度的还原原始图片效果。
卡片式设计的瀑布流对信息的组合、包容性更强，不仅能在单屏区域内显示更多内容，同时又将每组信息组合作出了明确的划分，在不破坏页面整体性的基础上也做到了相对独立，如花瓣、Pinterest就是最好的例子。
信息流的展现方式主要以文字、图片或视频内容为主，是一种较长内容的媒介，不管哪种展现方式，其都需要用户耗费较长时间的滑动、浏览来筛查对自己有用的信息。
卡片式设计将信息进行分块处理，通过阻隔的方式快速告知用户每个卡片的核心内容，便于用户在长时间的滑动过程中也能快速识别重要信息。
卡片式左右滑动组合在音乐、视频类产品中用最为广泛，因内容本身就图片居多，也更适合卡片式设计，相比平铺具有更强的层次感，对用户的吸引力较强，尤其最右侧漏出的一小部分内容营造出神秘的感觉，用户会不由自主的想去滑动以求获取更多信息。
卡/券设计实际是把生活中的实物映射到了UI设计中，通过模拟实物造型设计成卡片样式，有效降低用户的理解成本，并对其有了更直观的感知，真实感尤为强烈。
对于用户主动触发或系统临时发起的非固定性内容，利用卡片式设计会让信息布局更灵活、视觉更突出，在不影响用户使用的前提下，可出现在任何位置。
卡片式设计可以将个人中心、个人主页、会员等页面中的关键信息进行概括，并在头部位置进行重点突出，不仅让原本单个的内容形成整体，还能营造出沉浸式的氛围。
为了保持界面设计的一致性，需要将卡片样式纳入设计规范，例如卡片是否通栏、是否需要设定圆角半径、不同场景中卡片大小的划分界限以及圆角数值的确定等，大部分情况下都需要遵循设计规范。
在同一产品中，虽然要遵循设计规范以确保一致性的视觉效果，但并非所有页面都适合卡片式设计。
那么，到底是否需要采用卡片形式、使用哪种卡片类型？这还得根据页面内容属性及目标定位来决定。例如社交产品中的临时会话列表、动态圈子使用卡片形式，很浪费纵向空间、甚至会显得很“鸡肋”，用分隔线或间距留白来区分信息组显然更合适；但对于电商类型的产品，利用卡片将不同的商品分隔后又进行归纳，会更容易识别，信息的可读性也会更强。
卡片式设计本身就包含了容器与背景的层级表现，为了保持内容的正常展示与用户浏览体验，避免在卡片中嵌套多层卡片，以免信息层级杂/乱而增加用户的视觉负担。
如果再同一卡片中需要再次区分多个信息组，可利用间距留白、分割线或浅色背景等元素属性来区分，依然能达到想要的效果。
因为卡片内、外的双向间距留白，在空间有限的移动端设备中，横向空间利用率较低，因此除了合理的减小左右间距外，还可以适当利用左右滑动来扩充横向隐性空间。
例如淘票票首页，在1.5屏的范围内，几乎每个模块都能横向滑动查看更多内容，从用户体验角度出发，这是纵向空间无法比拟的。
卡片式设计不是目的，其主要是用来更好的区分信息层级、提升用户浏览体验，因为卡片要作为独立空间的存在，必定会增加上下间距而导致页面拉长，因此，如无必要，不必盲目采用卡片式设计。
例如美团APP的「首页、电商、购物车、我的」4大主功能页面都使用了卡片形式，而「消息」页则采用分割线进行信息分组，试想一下，如果为了统一规范而使用卡片，不仅造成很强的割裂感、还会极大的浪费纵向空间。
这点不用多说，新闻资讯类产品的内容详情页就是最好的证明，不管其他页面是否采用卡片形式，但详情页并不会跟随形式，一方面可以让同屏展示更多内容、增加空间利用率，另一方面可减少无关元素对用户产生的干扰、给予沉浸式的浏览体验。
很多时候，我们总会听到PM说这个很重要、那个也很重要，都需要突出一点，殊不知当什么都突出了也说明什么都没有突出。在单个卡片中，组始终牢记这个准则：一次只突出一个核心信息，以便于用户快速、精准捕捉，切记不可贪多。
卡片式设计之所有能快速流行起来且经久不衰， 其主要得益于自身的灵活性，尤其是在跨设备、跨屏幕上有着纯天然的优势，能忽略设备的差异给用户提供更好的服务。卡片并不是简单的样式设计，它是一种自由布局的设计语言，通过多种方式的信息组合、结合丰富的交互操作，给用户创造出极致的使用体验。
信息的呈现方式虽有不同，但最终的目的都是为了服务于内容，卡片式设计只是其中的一种形式而已，在设计过程中，我们需要根据内容结合实际情况作出合理的判断，切勿拘泥于形式而忽略内容本身的重要性。
任何设计风格及展现形式都有可能成为历史，卡片式设计也不会例外，但绝对不是这么快就结束，它依然值得我们去深究，力求打造更好的信息布局、更舒适的用户体验。
专栏作家
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在交互设计中，字体的呈现方式是提升信息传递效率的重要一环，文字信息层级的处理是否得当，一定程度上会对用户的视觉体验有着重要影响。那么在字体设计上，设计师或者相应的业务人员应该如何做好处理，以提升信息传播的效率和质量？不如来看看作者的总结吧。
文字是设计中的重要组成部分，就像我们平时看到的海报，里面各种被精心设计过的字体经常会成为视觉焦点，以醒目且个性化方式传达出内容的精髓，最后达到的效果事半功倍。
虽然在UI设计中不需要对文字过分设计，但图文作为主要的传播途径，字体的使用是否规范合理将直接影响着信息传播的优先级、重要程度以及用户的接收质量和效率。所以不管是平面设计还是UI设计，字体都是不可忽视的核心元素，做好对文字信息层级的处理，对用户的视觉体验有着至关重要的作用。
互联网经过多年的发展，也积累的很多的专业字体知识，设计师应该去了解字体的性格及特征并将其合理运用，才能将信息更清晰地传达给用户。本文将围绕着字型、字号、字距、字重等几个属性，针对各方面深度解析，希望能够帮到大家。
文字是信息内容的载体，能最直接的将信息清晰地表达出来，字体则表现了文字的外在特征，合理地使用这些属性特征不仅能清晰准确地传递信息、用于特定场景还能赋予情感表达，展现出独特的魅力，例如：健身、器械类的产品使用的字体通常会给人一种力量、刚硬、壮实的感觉，而女性专用产品字体则显的纤细、苗条。
不同类型的字体传达出不同的气质，综合来讲，字体可分为黑体、宋体、圆体、书法体这四类，平时大家看到的各种形形色色的其他字体，基本是通过这几类延伸而来。
在UI设计中，绝大多数的文字排版用的是黑体，诸如思源黑体、阿里巴巴普惠体、苹方（ios）、微软雅黑（PC web）等都是标准的黑体。另外，特定场景如瓷片区、卡片、banner、专题头图、引导页、闪屏等，对于用什么字体不会有太大的限制，在避免商用侵权的前提下符合产品气质即可。
黑体字的笔画横平竖直、粗细均匀且字面呈正方形，一般来说，没有衬线的字体都可以称作黑体。黑体结构清晰、简洁有力，能让界面显得庄重还附有现代感，虽然气质上没有太大的个性化、但可塑性很强，这也是在UI设计中、黑体一直很受青睐的原因，无论是标题、正文、提示等使用场景都可以作为首选，对老设计师能多一个选择、新手设计师也不易犯错。
iOS与Android是移动设备的两大系统，虽然很多设计师用一稿适配两端、遇到特殊页面也只是单独拎出来微调即可，但对于中、大型的互联网公司则很难满足优质用户体验中的部分细微差别，例如：iOS的苹方字体在Android设备中无法高度还原、预留的文字数量上限位置无法显示完整等，都会影响用户体验。
此外，iOS和Android都有自己独立的设计规范，大家有时间的可自行查看，本文只对字体规范作基本了解。
iOS使用的是「苹方」字体，提供了6个字重，英文字体为「San Francisco」；Android使用的是Google联合Adobe发布的「思源黑体」，为充分满足设计要求，提供了7个字重，英文字体为「Roboto」。
此外，如果界面中涉及的数据较多，数字使用DIN字体也是不错的选择，字体外形较长，易用且耐看，很适合数据统计展示，不过这款字体商用的话需要收费的。
字号的大小决定信息的层次和权重，不规律的使用字号会让页面信息杂乱，不利于用户阅读。在设定字号规范时，需特别注意最小值和递增值。
最小值决定信息的可读性，以2倍图为例，iOS11系统将最小字号规范为11pt（22px），但很多产品依然将最小字号设定为20px，甚至部分产品将18px的数字加粗运用在标签中，所以最小字号的设定并没有固定数值，原则上不影响用户的浏览就行。笔者建议最小字号不要低于20px，在设计过程中，可以通过设备实时预览，因为同样的字号在不同的环境、色值、背景下，其视觉效果都有所区别。
其次，递增值决定着信息层级区分的明显程度，遵循字号越大、递增值越大的原则，常用字号数量控制在6种左右。iOS和Android都是采用的2倍数栅格系统，为了让字号的层级区分更明显，字号设定要避开奇数且最小递增值不要低于4px，下面举几个常见的例子：
规范好的字号该如何使用，还得根据界面中的实际场景来决定，如下图：
字间距是指两个字符之间的横向间隔距离，在界面排版中，除了西文的字间距调整需求较大外，中文通常只保持默认，只有少数场景才会手动调整，且没有固定的规律，保持视觉舒适状态即可。例如：banner、界面大标题、重要数字（取件码）显示等。
行高是指包围在字体之外的隐形边框，一个字体元素的的行高等于文字上边框+下边框+字号的高度之和。
西文字体因高度的参差不齐，本身就能制造出视觉上的上下空间，通常行高为字号的1.2倍，而中文字体没有上下间隙的延伸，行高则较大，一般在1.5倍左右，如果字号较小且折行较多，行高甚至能达到字号的2倍。
字重指的是字体的粗细，不同的字重能体现出不同的层级关系，给用户的视觉感受也截然不同。
像苹方、思源、阿里巴巴普惠这些家族字体一般都会有极细体、细体、常规体、黑体、粗体等多个字重，在UI设计中，实用的就常规体、加粗两个字重，再通过色彩、字号使其成为对立关系，明显的拉开文字内容层级后，方能保持良好的浏览体验。
这种主要针对标点符号，以英文字母为标准，半角是指一个符号占用一个标准字符（英文）的位置，全角则是占用两个字符位置。
众所周知，中文使用都是全角、英文使用半角，并且会随着中/英文的切换而自动改变，但有时候难免会操作失误让页面中的某处信息看着怪怪的却不明所以、另外中文信息中的时间/日期也大多会使用半角符号，所以设计师对此有一定了解的时候，在处理这些细枝末节就能做到收放自如。
在色彩规范中，除主/辅助色之外，设计师还会提供3~4个等级的配色，如通用的#333（标题）、#666（正文）、#999（提示）、#ccc（占位符），这也是UI通用的文字色用色规范，不同的字号需用色规律。
如果想进一步延展，可以增加一点品牌色，也可以使用#000（纯黑）调整不透明度来体现文字色彩层级，深色模式中很常见，下面我们一起来了解几个常见的使用场景。
标题的主要作用是让用户以最快的速度了解界面主要信息，需要时刻吸引用户的注意力，例如APP中的导航栏、模块标题、内容标题、数据统计等。需要简单明了且有冲击力，字号一般会控制在30px以上并加粗显示，直接使用一级色值（#333）即可。
在特殊场景下，标题也可以使用主体色值，但一定要注意容器背景与其他信息色彩的协调，不然花里胡哨的还不如用回一级色值。
正文并不需要吸引用户注意力，它主要是提供标题的注释或内容的详细说明。
当白色背景文本内容过多、在需要用户仔细阅读的情况下，一定要注意颜色不能太深，不然显的主次不分，还有些刺眼，这里推荐26~30px字号使用二级文字（#666）色值。
提示类文字使用场景就相对较多，它除了给用户展示当前状态，还能给予合理的引导，促进用户进行下一步操作。常见使用色值为三级（#999）、四级色值（#ccc），例如界面中的操作注意事项、表单占位符等。字号一般为24px，因使用场景不同，也会有特殊的存在，例如表单中占位符的字号会跟随输入后的字号统一。
超链接在字号、色值上没有一定的限制，但需要一个特定的辅助元素/属性来提示用户这是可点击的。
例如APP登录页面，找回密码、注册、获取验证码等，大部分都是用主体色、图标（右箭头）等方式强化可操作入口，而PC端网页中超链接的表现方式，下划线、蓝色字体、>>这三种方式几乎能涵盖所有。
规范并非不可更改，它只能帮助设计师在大部分使用场景中减少设计出入并提高产出效率，但总有一些使用场景需特殊对待，字体也不例外，如以下场景：
虽说黑体（苹方、思源、阿里巴巴普惠）是UI设计中的首选字体，但这也仅仅只是建立在不出错的的情况下、满足基本条件而选择，如果想表达出产品的类型、情感、气质等品牌属性，在不影响用户识别的前提下，可选择一款符合产品气质的字体，打造出差异化的浏览体验，对于追求完美的APP来时是一个不错的解决方案。
例如，部分艺术、女性类的APP会选择使用宋体，整体看起来有一种高端、时尚且优雅的感觉。
整体界面使用特殊字体还是相对较少，为了更好的体现出产品属性/风格，将其融入不同的模块及使用场景，会让产品更有特色，例如banner、瓷片区、大标题、头图等，对用户的视觉吸引力能得到很大提升。
在一个APP中，坚持使用同一个家族的字体，对标题、正文等文字信息有一个统一的视觉规划，这样有助于建立起体系化的设计思路，避免在开发落地时存在一致性问题，减少开发与设计的出入。
笔者曾见过这样的设计师，界面中原本用了「苹方」字体，在一个特殊场景下，「苹方」的粗体字重无法满足大标题的使用需求，于是将大标题单独改为「阿里巴巴普惠体」的最大字重。
从表面上看，上述的设计需求是满足了，但稍有不慎就会成为没有价值的艺术品，首先，单独一处使用不同家族的字体，会影响整体视觉的一致性；其次，若程序没有嵌入另外的字体，产品落地后其视觉效果毫无改观，且更没有必要为了某个场景的使用要单独嵌入几十到几百兆的家族字体，让应用安装包无故加大。在设计中，有时候在解决某个问题时，解决方案并非无可替代，加粗字体亦是如此。
另外，在可用性、实用性强且必要的情况下，并非不能再增加一个家族字体，例如所有标题系列使用「阿里巴巴普惠体」、数字系列都使用「DIN」，前提是一定要形成体系化，并非某一处的使用。
在同一个界面中，字体色值、字号、字重等，都是用于区分信息层级，尽量不要使用过多的层级，避免层级混乱影响信息浏览。
在信息层级处理方式的四个基本原则中，「对比」就是将复杂的信息通过元素的各种属性以不同的视觉效果呈现，来体现信息节奏感，并非是为了好看而随意给文字赋予各种属性及样式效果。
避头尾使用在文字内容较多的折行场景中，主要处理标点符号刚好出现在一行文字的开头或结尾时，通过自动调整单行的字符间距、在视觉上将标点符号前移或后移。
在新闻资讯类应用的详情页中，避头尾使用的较多，用以避免头/尾存在标点符号造成视觉重量不一、信息参差不齐的问题出现。
很多时候，为了区分信息层级，首先想到的是利用不同的字号、字重来体现，这当然没有问题，但如果结合字体的明暗关系（灰度色值等级）则效果更佳。
如下图：标题一级色值（#333）、正文二级色值（#666）、时间日期三级色值（#999）。
备用字体只会运用在web页面中，如果网站需要一款特殊的字体才能彰显其独特的气质、同时又担心用户在某些设备中因为没有这个字体而无法浏览其效果，则会另外再选择一款相近的通用字体作为备选，以弥补视觉体验上的损失。
如果字体包不大，也可以让开发将其放在服务器端，这样能让所有用户都能看到相同的效果，省去了不少麻烦。
可读性应该是选择字体的首要元素，虽说很多文字我们都可以从前后字义、联想词等角度将自己的理解补充完整，但完全没有必要。
UI设计不像海报那样融入较多的艺术成分，更需要的是内容清晰、表意明确、高效率的传达，任何增加用户阅读、理解成本的做法都应该规避掉，例如过于变形的可爱风格、书法手写体等都尽量少用。
文本内容是UI界面中占比较多的元素之一，设计师需要对其基本属性及使用场景有一个清晰的了解，使用的是否恰当取决于我们对字体的选择。虽说在UI领域，字体模块类的文章比较少（更多是文字、字库的设计），但它在设计规范中的地位是举足轻重，选好一款字体对设计来说是锦上添花。
关于UI界面中的字体，其实没有太多的讲究，也没必要整得花里胡哨，重点在于排版过重中注意信息层级的划分以及有足够的视觉舒适度即可。
专栏作家
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
大部分产品中都含有一些引导帮助的功能，这些功能有什么作用呢？对于设计者来说，应该秉持怎样的初心来设计呢？目前，引导帮助功能又有哪些常见的分类呢？带着这些问题，我们一起走进这篇文章，看看作者为我们的分享。推荐相关人员阅读与学习。
前几天眼睛不太舒服，去医院做了一个检查（视疲劳导致）。
因为要走商保，所以需要使用社保卡，之前我记得社保结算都需要去人工窗口，我刚过去就被一个穿着红马褂的大妈拦住说自助机也可以用社保，要我扫她胸前挂的码（可以快速到达电子社保二维码界面），扫完她就开始帮我点击操作。
她觉得我应该不会操作，所以让我看一遍，其实这个操作并不难，只是因为我不知道自助机上可以用，自助机周围也没引导操作流程。而且她这种方式让很多年纪大的人和外地过来看病的觉得你是个骗子，后面好几个人都还是去了窗口。
在B端产品中也有很多类似问题，用户不知道有这个功能、也不知道这个功能怎么使用，特别是一些数据类产品，专业性比较强。产品、技术都认为用户和他们一样都懂，实际上并不是，这个时候你需要提供一些邀请，引导用户进行使用。
邀请就是引导用户进行操作前的提醒和暗示，通常包括实时的提示信息和预期功能，以表明在当前界面或下个界面可以做什么，这是成功的交互式界面关键所在。
例如：飞书-我的空间，当鼠标停留在可编辑区域上时，就会实时地显示邀请（复选框），这个例子的缺点是鼠标如果不处于相应区域上，就不会显示邀请。
另一种方案是任何时候都显示邀请，例如：石墨文档-我的桌面，复选框一直显示。
静态邀请就是通过直接在页面上给出交互提示，可以让用户随时看到期望的界面功能。
静态邀请主要有两种模式：引导操作邀请、漫游探索邀请。
01 步骤引导
例如：华为云HECS服务器产品就给出1、2、3操作步骤
引导操作会占据页面较大的空间，同时也会吸引用户的眼球。所以在设计时需要思考一下，你希望引导用户执行什么操作，用户是否可以多次查看，这样有利于设计出明晰的页面和信息层。
02 白板引导
另一种引导操作邀请叫白板式引导。
意思很明确：现在只有一个空白页面，需要引导用户创建内容。
利用空白区域“变废为宝”，如何对该区域应有的功能给出提示，是诱导用户创建内容（填补空白）的有效方式。
与引导操作邀请关系密切的是漫游探索邀请。假设你重新设计了某个页面并添加了一组全新的功能，怎样才能保证用户恰当地使用新页面，同时发现新添加的功能呢？漫游邀请是向用户介绍新功能最好的方法。
最佳实践：
静态邀请适合提示用户当前界面中包含什么功能。然而，许多调查试验表明，用户经常不会阅读指导说明性的文字。而在用户交互过程中，在他们需要的时候提供邀请则是一种不错的方式。动态邀请就是在用户交互过程中的某个点上吸引用户，并引导他们继续下一步操作。
吸引用户的一种方式是通过鼠标悬停来显示邀请
例如：飞书消息列表鼠标移入后， 背景变化的同时会有一个“勾”图标来吸引用户，鼠标移入上去后提示可以点击完成，点击后消息移除列表。
最佳实践
唐纳德·诺曼将这个术语引入到设计领域。最经典的例子是门把手，门把手的预期功能是可以抓握、扭转或按压。屏幕元素可感知的预期功能没有物理属性，不过，由于习惯、术语、图形及一致性等原因，用户能够在某种程度上感觉到他们可以操作这些元素。
例如：第一张图飞书文档sheet页“加号”图标与第二张图“三个点”图标，就是一种预期功能邀请。用户没触发之前就能猜到触发后会是什么效果。
预期功能邀请之所以有效，是因为利用人们已知的习惯与认知引入交互，从而让用户顺利完成一连串操作。
最佳实践
设计邀请时怎么才能猜测用户的想法，也是一项重要挑战。如果用户下一步可能会执行多种操作，而事实上又不可能准确判断用户想法，那么面临的困难就会比想象的大很多。
在google sketchup （ 3D）绘图工具中，当鼠标点击某个点后，进行第二个点连接时，会有多种可能性，这个时候系统也不确定用户会怎样连接，但会给出对应的提示，比如：端点、中点、背面、侧面等点位来辅助用户进行连接。
例如：这种工作流场景个人觉得也算是一种，点击“加号”右侧会滑出面板，给出你可以添加的动作。
这种在交互期间以可见方式向用户表明系统推断出的用户想法被称为推论邀请。
图片类型的更多邀请，例如：站酷相关推荐
文字更多邀请，例如：QQ邮箱右侧最近联系人
精心设计的应用能够通过邀请体现出各自的细微差别，无论是静态还是动态，都是引导用户顺利进入下一个交互层次的有效方法。
谢谢观看！
作者：夜莺YEAH；公众号：夜莺B端UX设计
本文由 @夜莺YEAH 原创发布于人人都是产品经理，未经作者许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
设计是通过美感和逻辑来提升用户体验，提高企业满意度。本文探讨美感设计在用户体验中的作用，从五个维度分别论述美感设计的重要性，一起来看看吧。
设计是通过逻辑和美感来解决人们的问题，满足他们的愿望。本文将探讨美感在用户体验设计中的作用，以此提高用户和企业的满意度。
数字产品的成功与否，除了其功能性能以外，美感也扮演了至关重要的角色。在竞争日益激烈的市场，用户的选择不仅仅局限于功能是否满足需求，审美愉悦和情感需求也成为了影响购买决策的关键因素。因此，设计对于产品的成功至关重要。
随着需求层次的提高，人们的选择越来越多样化和理性化。教育和收入水平的提高，使他们开始思考超越功能的问题。此外，用户更加注重产品的美感和和谐性，因此美学在其选择中扮演着越来越重要的角色。
马斯洛金字塔，展示需求层次
美感在用户体验设计中发挥以下作用：
创新农业服务FarmSense的网站设计
美学是将设计的过去、现在和未来连接在一起的重要桥梁。当今的布局和图形基于世界文化数百年来积累的丰富遗产。现代设计师和艺术家通过各种趋势和创新对其进行改造，创造出一个新的文化历史圈子，展示了历代最杰出艺术家的杰作。这正是艺术和审美在设计中所发挥的作用。我们不是要重新发明轮子，而是要让它变得更现代化，以解决当下的问题。
美学可用性效应是指用户更倾向于认为外观吸引人的产品更加实用。即使实际上这些产品并没有更加有效或高效。这种现象被用户体验设计大师 Nielsen Norman Group 视为一种重要原因，因为既有吸引力又实用的界面才能真正提供良好的用户体验，而不仅仅是功能性 UI。
在1995年，日立设计中心进行了一项研究，研究人员Masaaki Kurosu和Kaori Kashimura探究了人机交互实践中的美学吸引力和易用性。该研究测试了252名研究参与者对26种ATM用户界面的易用性和美学吸引力进行评分。结果分析表明，审美情趣评级与感知易用性之间的相关性高于审美情趣评级与实际易用性之间的相关性。因此，该研究得出结论，无论用户试图评估系统的功能，任何界面的美感都会对用户产生强烈的影响。
在 UX 设计中，美感是一个关键因素，它对用户体验目标有着深远的影响。UX 设计通常包括四个核心方面：外观吸引力和视觉和谐、可用性、可访问性和效用性。这些方面综合起来，使得产品具有吸引人的外观、易于操作、适用于不同能力和设备、能够解决问题以及让用户感到愉悦。
Flower Store 应用程序指导用户完成订购个性化花束的过程
然而，对于那些开始推出新产品或改进知名产品的公司来说，他们也必须从不同的角度考虑。他们需要思考各种财务、转换、销售和所有其他业务运营方面的因素。
设计美学是否会对他们的商业目标产生影响呢？当然会。色彩理论和心理学、屏幕上的和谐、易读的文本内容以及吸引人的图像不仅对于满足用户需求非常重要，而且对于销售和让企业获得满意度也至关重要。
不同的元素可以融入用户界面并构建其美感，其中包括：
这些要素一起形成了交互美学，对于积极的用户体验有着直接的影响。另外，建议我们将过长的句子分解为短句，以减少重复，并提供改进建议。
加密博客设计使用有限的调色板使其看起来严肃但不沉闷，并呼应大报的传统布局以设置印刷媒体迁移到数字世界的强烈美感。
在 UX 和业务的交叉点上，一致性是实现美学和可用性效果的核心。Jacob Nielsen 曾指出：“一致性是最强大的可用性原则之一，因为当事物表现始终一致时，用户不必担心会发生什么。”因此，为了实现一致性，必须确保整个产品中的界面元素和交互方式始终保持一致，并遵循统一的设计准则。
事实上，它比交互更进一步。它还有助于建立强大的品牌。标志和品牌项目、网站、应用程序、电子邮件和社交网络——产品与用户的每一个接触点都应该遵循一个总体理念和一套价值观，并以一致和完整的风格包装。
金融科技服务 Crezco的身份设计采用一致的方法，使品牌能够通过各种沟通渠道建立有吸引力、值得信赖和稳固的形象。
在全球范围内，所有设计解决方案都需要回答一个关键问题——为什么？Simon Sinek，一位领袖力专家曾说过：“人们购买的不是你做的事情，而是你为什么这样做。”你所做的只是证明你的信念，这是产品和服务保持一致和鼓舞人心的原因。从“为什么”开始做出的决策将决定如何与用户交流，无论通信方式是什么。因此，您需要明确您所沟通的内容，无论与品牌的联系是什么。这样可以建立信任，使品牌更加强大，这正是美学在用户体验中发挥作用的地方。此外，您应该简化长句，减少重复，并提供改进建议以提高文本的清晰度和简洁性。
设计不仅要解决功能问题，还要考虑美感与情感需求。在数字产品市场竞争激烈的今天，美感对于产品的成功非常重要。人们的需求也逐渐提高，开始关注产品的美感和和谐性。美感在用户体验设计中的作用包括：使设计情感化，保持数字产品与现实世界的联系，支持使用感官，满足审美需求，以风格将不同事物结合在一起，让产品在竞争中脱颖而出。用户更倾向于认为外观吸引人的产品更加实用，这也是良好用户体验的重要原因。
原作者：Marina Yalanska
本文由 @唐小白 翻译发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com