B端表单标签的对齐方式对用户体验和界面设计至关重要。本文深入探讨了不同表单标签对齐方式的优劣势及适用场景，包括行内标签、顶标签、左标签文字右对齐和左标签文字左对齐等，帮助设计师在实际工作中做出最佳选择，提升表单填写效率和用户体验。
表单作为B端系统最常见的组件之一，一些常见的do、don’t想必大家已经十分熟。今天我们唠一唠【表单标签】这个细节。
在一些成熟的组件库中，大都提供了上下布局的顶标签、左右布局的左标签等样式可供选择。左标签样式，在不同的产品中，又存在标签文字左对齐、右对齐的情况，那它们之间差异在哪呢？如何选择呢？
最近工作中，正好在梳理相关的规范，于是把自己的一些思考及处理经验整理了一下，分享出来～
先对齐一下语言：表单标签、表单域。
会从这几个维度进行比较，放一个简易版表格，下文细说。
优势：
劣势：
用户操作阻塞：如输入框聚焦，输入内容时，行内标签隐藏，用户操作会受阻。
使用场景：
一般用于用户心智已经十分成熟的页面，比如登录页、注册页等。
优势：
劣势：
Y轴屏效低：对页面纵向空间的利用率会比较低。
使用场景：
优势：
劣势：
使用场景：
优势：
劣势：
使用场景：
优势：
劣势：
优势：
劣势：
使用场景：
本文由人人都是产品经理作者【Clippp】，微信公众号：【Clip设计夹】
原文链接：https://www.woshipm.com/share/6208137.html
原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微（蓝蓝设计）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开发
兰亭妙微（蓝蓝设计）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开发
兰亭妙微（蓝蓝设计）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开发
兰亭妙微（蓝蓝设计）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开发
兰亭妙微（蓝蓝设计）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
出海产品面临着语言、文化和用户习惯的巨大差异，这对UI设计师提出了更高的要求。本文为出海产品的UI设计提供了全面的干货指南，从文字、图标、色彩、图案到交互手势等多个角度，详细拆解了设计师在面对小语种和不同文化背景时需要注意的关键点。
随着TikTok的海外关注度和影响力逐渐扩展、小红书在海外友人的媒体圈炙手可热，国内的互联网市场逐渐趋于饱和，互联网产品纷纷向东南亚、非洲、拉丁美洲、欧洲扩展商业版图，这也为UI设计师创造了新的机遇。
对于出海产品而言，UI设计师需要有基础的语言文化了解，在此基础上去进行设计才能真正满足海外用户的需求，本文主要从UI的文字、图标、色彩等几个角度来拆解设计师在设计海外项目时需要注意的关键点，避免因为文化习俗差异而影响产品的易用性。
目录：
1.小语种文字：超长文本的处理规则、镜像语言、小语种适配检视技巧
2.图标：需要镜像的典型图标、不需要镜像的典型图标、图标特例
3.颜色
4.图案：禁忌图标、禁忌手势、禁忌物品、禁忌动物
5.交互手势
当在某些语种下出现界面用语超长显示不完整的情况，应按照如下优先级进行处理：
（1）精简界面用语
在保证可理解的前提下，考虑对该语言的翻译进一步精简，采用其他较短的近义词或者精简表达，如“save number”在界面用语超长时应精简为“save”。
（2）动态布局
当控件周围没有其他控件冲突时，控件可根据界面用语长度动态扩展，如按钮。
（3）缩小文字
将文本逐级缩小，建议最小缩小到18sp/dp。
⚠️并列的层级关系，文本超长时所有文字需要同时缩小字号
（4）多行显示
在设计中文时，提前考虑预留小语种换行空间，⚠️按音节换行。
（5）跑马灯
避免同意界面使用过多的跑马灯，1-3个为宜。过多的跑马灯会分散用户注意力，界面显示混乱。跑马灯占用系统资源，影响性能，过多的跑马灯可能会导致卡顿。
（6）打点截断
显示不下到文字截断显示并在末尾增加“…”
截断的使用场景：
A.用户自定义内容，如文件名，相册名
B.某处显示空间有限，但可以在本层级/上一层级/下一层级查看到全量内容。
阿拉伯、波斯语、乌尔都语、希伯来语等语言的书写都是从右向左书写，和当今世界主流语言（如英语）从左向右书写的方向相反。
受文字书写方向的影响，阿拉伯语言的用户对于左右逻辑的认知和英文等LTR （left to right)完全相反，比如习惯将右侧作为开始，左侧作为结束。
为了支持RTL语言和用户习惯特点，在UI设计中，需要在文本，界面布局，手势操作和动画，图标等交互元素中满足RTL的特殊要求。
（1）字串显示——检视语言：西班牙语（拉丁美洲）
（2）大字体显示——检视语言：西班牙语（拉丁美洲）
（1）后退，前进
（2）显示前进方向的图标，如：骑车 发送 进度条。
▲ 阿拉伯语-显示前进方向
（3）右侧具有滑块的音量图标应当镜像，滑块应从右向左显示，如：音量调节。
▲ 阿拉伯语-音量调节
（4）表达含有文本含义的图标，如：对话框、书写、备忘录。
▲ 阿拉伯语-文本含义图标
（1）虽然时间的线性表示在RTL中被镜像，但圆形时间方向不是。对于RTL需要，时钟仍然是顺时针转动，时钟图标或带有箭头指向顺时针图标的刷新图标不应该镜像。
▲ 阿拉伯语-带有时间含义的图标
（2）国际标准的图标不需要镜像，如蓝牙。
（3）拟物图标不需要镜像，如SIM卡。
(4) 斜线不需要镜像 ，如静音图标。
▲ 阿拉伯语-特殊免镜像图标
(1)亮度图标需要镜像：英文习惯认为左边暗，右边亮；阿拉伯语习惯认为左亮，右边暗。
(2)阿拉伯语有自己的问号❓
(3)阿拉伯语am.pm的位置要移动到时间左侧
1.中东市场：绿色为主、火红与黄色慎用。绿色象征吉祥，但叙利亚视黄色为不祥之兆，伊朗不喜爱蓝色。
2.非洲市场：禁忌多样。黑色普遍被认为不祥，红色在乍得、尼日利亚等国也不受欢迎。
3.欧洲市场：白色神圣，黄色慎用。
禁忌手势
禁忌物品
禁忌动物
RTL语言中，带左右滑动方向的图片或者是左右滑动展开功能选项，应遵循与英文界面相反的镜像规则。
▲
汉语-左滑删除
以上就是从小语种文字、图标、颜色、图案、交互手势等方面总结的出海产品设计干货，希望能让你有所收获~
本文由人人都是产品经理作者【Clippp】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自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
在交互设计中，字体的呈现方式是提升信息传递效率的重要一环，文字信息层级的处理是否得当，一定程度上会对用户的视觉体验有着重要影响。那么在字体设计上，设计师或者相应的业务人员应该如何做好处理，以提升信息传播的效率和质量？不如来看看作者的总结吧。
文字是设计中的重要组成部分，就像我们平时看到的海报，里面各种被精心设计过的字体经常会成为视觉焦点，以醒目且个性化方式传达出内容的精髓，最后达到的效果事半功倍。
虽然在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
蓝蓝设计的小编 http://www.lanlanwork.com
