引人注目的UX设计背后的心理学
每天，您都会在线访问多个网站。他们中的一些给人留下了积极的印象，而另一些则使您在数毫秒内按下了后退按钮。您最终从一个网站购买了产品，而不是从竞争对手那里获得了产品。是什么引导这种行为？您为什么对某些网站感到满意却却避开其他网站？
这样做的主要理由之一是在用户体验设计中实施心理学。您喜欢的网站聘用的UX专家知道如何在与网站交互的每个阶段触发心理反应。在线心理学的使用是成功的，因为我们在人类生存的几个世纪中获得的某些进化特征在我们每天与世界各地的互动中仍然发挥着重要作用。
本文介绍了一些常见的UX元素以及它们背后的心理思维。
有关服务或产品的建议
例如，当您在机票预订网站上时，会在预订完成之前或之后获得有关酒店，餐厅或旅游选项的建议。在许多情况下，如果价格足够诱人，人们就会继续预订酒店或在餐厅预订。当您搜索抵押贷款时，同样适用，并且您还会获得有关债务管理或退休计划的建议。
图片：Skyscanner
这是一种称为“预期设计”的UX创意。目的是根据您在网站上查看的内容来建议您最可能需要的其他内容。这个设计思想是基于当我们在互动中感到被理解时更快乐的心理原理。这在所有领先的电子商务门户网站上也可以看到。
图片：Flipkart
这种UX设计的一种变体是在许多网站上延迟显示弹出框以进行加价销售或潜在客户。这也是可以预见的，因为它基于这样一个事实，即许多用户直到从站点上花费的时间中获得了一定的满意，才会对弹出框的内容不感兴趣。
显着性原则是另一个鼓励用户体验设计决定的心理原则。它说人们将注意力集中在当时与他们最相关的事物上。因此，正在寻找飞往夏威夷的廉价航班的度假者将很高兴看到提供经济实惠的住宿，甚至为他们的旅行提供融资选择。仅登陆页面以读取症状的用户将仅关注页面的内容，而不关注订阅弹出窗口。
限制用户选项
您选择的网站比强迫您跳过五个菜单来查找相同内容的网站更容易找到。这是因为我们发现很难做出决定时，有太多的选择。这是基于希克定律的心理原理：选择的负担。
图片：Apple
最好的UX设计人员了解这一点，并确保用户可以找到所需的信息，产品或服务而不会感到不知所措。
抢眼设计
图片：例如葡萄酒
如果网站或应用程序的设计精美（根据用户的描述），则立即导致对品牌的有利倾向。这是一种心理原理，称为审美可用性效应。如果您的网站漂亮，那么普通用户就会相信它比同一个利基网站的其他功能更实用，更值得信赖。关于吸引力的这种偏见也可以在离线状态下看到，因为研究表明，更具吸引力的人被认为比其他人更有能力和更友好。
此外，引人注目的设计可能使人们忽略网站或应用程序上的其他缺点。顶尖的UX设计人员花费必要的时间来获得任何项目的最佳美学效果也就不足为奇了。
醒目的颜色口音
图片：Paypal
诸如Trustly，PayPal，FreshBooks之类的品牌，以及您日常遇到的许多其他品牌都使用颜色强调点，以使您的眼睛指向CTA按钮，注册表格等。网站上的主要颜色为蓝色时，它们使用绿色，红色或黄色来表示突出这些区域，它会起作用！这些网站的任何访问者都可能会错过页面上的其他内容，但会看到这些部分以独特的口音仔细突出显示。
这是基于赫德维格·冯·雷斯托夫（Hedwig von Restorff）的心理对比原理，即人类更容易记住那些与其周围环境脱颖而出的东西。有趣的是，没有颜色被认为是最有影响力的。UX设计人员只需确定主导的颜色主题，并使用不会混入背景的另一种颜色作为重点选择。
产品差异化价格计划
这也称为“金发姑娘”定价技术。企业使用这种技术来销售“中档”产品。当您四处寻找虚拟主机计划时，您可能会看到更多。提供商通常列出三到五个订阅计划，并将中间计划突出显示为“受欢迎”或“热门”。
图片：Acowebs
许多人立即分析出最昂贵的计划和最便宜的计划，最终选择了所谓的中端计划。这是因为他们将其视为最高价值计划和入门级计划之间的完美中间地带。有趣的是，这些中端计划的价格没有像其他任何人一样受到严格审查，这使得它们成为提供这些品牌的品牌中最赚钱的。
这种定价技术之所以有效，是因为它基于取景的心理原理，该原理强调了人们在做出购买等决策时如何避免极端情况。它还显示了选择的呈现方式如何影响决策过程。
其他领域的更多用户体验设计师正在采用这一原理。现在，各种电子商务商店都提供多层定价结构或提供价格不同的相似产品。大型科技品牌也不例外。他们可能是这一原则的最大受益者之一。因此，下一次您发现自己忽略了中端选项规格，规格稍高但仍低于最贵机型的三星Galaxy设备时，您就知道了！
这是另一个例子。
图片：SEObirth
限时优惠
电子商务网站已经完善了使用限时报价创造产品需求的技巧。一些品牌会声明要约/产品“仅在接下来的X天内可用”，而其他品牌如亚马逊将显示详细信息，例如“仅剩5个库存”。无论哪种样式，两种策略都旨在引起您的相同反应：紧迫感，因为该产品很快将不再可用。
图片：亚马逊
这是基于稀缺性的心理学原理，该原理指出，与到处都有的物品相比，我们倾向于更加重视稀缺或不可用的物品。一个1975年的研究证实了这一原则。研究人员将相同类型的曲奇放在两个罐子中，但是第一个罐子有10个曲奇，而第二个罐子只有两个曲奇。研究参与者对第二个罐子的评价高于第一个罐子。
研究还发现，人们对以前丰富但现在稀缺的产品的评价要比总是稀缺的产品更有价值。经济学专业的学生不会对此感到惊讶，因为可用性的下降总是会触发需求的增长。
除电子商务网站外，其他具有在线形象的品牌也采用稀缺性原则。出售在线课程的企业家强调诸如“仅适用于前10名学生”，“一周内结束”之类的术语。其他人则为采取特定行动的人们提供独家利益，例如提交电子邮件地址，支付服务费用等。 。
当品牌试图销售“限量版”产品时，该原则也可以在离线营销中看到。
UX设计师之所以采用这种技术，是因为他们知道，即使产品或服务没有迫切需求，人们在产品或服务稀缺的情况下也会注意。
推荐书的战略定位
图片：ElegantReports
有没有想过为什么许多产品或服务网站的主页上都有推荐？为什么在做出购买决定之前总是要寻找推荐？这是因为社会证明的心理学原理。
当我们对任何事情都持怀疑态度时，我们会寻求同行的指导。这就是为什么您会发现人们在选择公司之前先在社交媒体上要求评论特定品牌的原因。在1969年社会科学实验强调了这一先天行为。研究表明，如果已经有足够的人参与，人们至少可以说服人们注意某些事情。
除了推荐之外，UX设计师还通过炫耀可信赖的从属关系（例如SEO专家从事的业务或以作家为特色的博客）来结合社会证明原则，订户数量，帖子中的股份数量以及产品的等级或服务，甚至获得的奖励数量。
图片：Acodez
电子商务商店通过显示名为“客户也已购买的商品”的部分来使它更进一步，以突出显示可能会使用户感兴趣的流行产品。
突出赠品
图片：皮特和佩德罗
如果您免费提供某些商品，在线用户现在或将来更有可能从您的品牌购买商品。这是基于互惠的心理原理。这就是为什么许多UX设计师强调任何交易的原因。
如果您要购买新鞋，则更有可能选择在其网站上提供“免费送货”的品牌。同样，您也可以在提供免费指南或免费咨询的登录页面上提交联系方式。
UX设计师结合对比和互惠的心理原理来创建高度转换的页面。
结论
达到既定目标的引人注目的UX设计并非偶然。最好的设计师知道，在线成功的关键是要吸引一般用户群的基本本质，他们会运用心理原理来实现这一目标。人类的在线行为是可以预测的。结合心理学和用户体验设计，您的品牌可以产生更好的结果。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前言
在这艰难又魔幻的2020年的尾声，有必要系统汇总下关于UI/UX的设计发展方向，为接下来的2021的开篇带个好头。本文在了解这些趋势的同时，分析特点并举例落地实例，来帮助大家启发创意设计工作的思考切入点。
流行趋势跟人们所处的环境密切相关，从最初的方块马赛克——>追求极度写实——>扁平风——>到现在的质感拟物，扁平设计霸屏的这几年，设计风又向更立体、丰富、更有层次感的方向发展，所以说趋势就是一个轮回。设计风格没有绝对的好坏，在审美达到一定疲劳时，就会开始出现新的设计风格。每一个新风格都值得设计师去拆解、思考，本质都是为了提升更好的交互体验。
而在进入下一个十年的过程中，我们对数字产品和体验的依赖将日益增长，预测真正胜出的将会是3D动画和用户界面/用户体验设计的结合设计，5G技术的发展，它将重塑了我们以前无法想象的交互方式，这将是一段充满创意、鼓舞人心的发展阶段。在这里让我们来看看未来那些不可忽视的设计趋势吧。
（注:图片来自网络，均标明出处及作者，若有侵权请告知删除）
1、3D与UI结合
随着且易用的3d软件工具的出现，3D 元素已经开始变得越来越受欢迎，而在这之前，UI界面一直被平面设计所主导。与 2D 不同，它提供了更为逼真的立体效果，从插画、动效、电商到平面视觉，在所有的设计类型中都能找到它，3D现实主义已是各个领域的大势。
圈中也出现了很多免费或付费的3D预设元素及场景组件，帮助3D小白更快地搭建出具有冲击力的视觉组合。
特点：
• 直观感受；
• 立体真实；
• 形态丰富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ✪
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
实例应用：
各大厂都开始纷纷尝试在产品中加入3D元素，将自家IP立体化，植入到各个品牌静态页面，加深品牌印象渗入。3D技术虽然已经出现有一段时间了，但是为了保证速度和性能表现，较少应用到产品中，随着软件技术的提升，立体渲染产品将开始慢慢运用到更多的界面交互、H5活动中。
▲闲鱼、QQ、花椒直播的3D启动页
▲得物（毒）的3D空间动效
网易云音乐每年的音乐总结报告都追随着的设计潮流，今年还可以自由选择人物形象，增强了用户的主观代入感，以下是每年的设计风格变化：
▲2018-渐变插画、2019-撞色渐变、2020-3D人物场景
▲2020-总结陈词H5
▲总结报告Banner的动效
其中IP立体化最多的当属K12教育领域，除了制作IP周边外，3D效果能适应丰富的运营场景，高度还原现实世界，给小朋友带来最真实的学习互动体验。
▲洪恩识字（3D学习场景）、腾讯开心鼠英语ABCmouse
▲IP在播放儿歌时的互动
值得一提的是今年苹果发布的macOS Big Sur除了玻璃拟态的变化，图标还加入了3D维度的拟物视觉层次。
苹果的 mac OS 的人机交互指南中也明确指出：“图标不仅是装饰性的，而且在与用户交流中起着至关重要的作用，它应该传达应用程序的主要目的并暗示用户体验。”这次扁平化和拟物化的结合，将又要引领一波设计趋势。
2、软渐变（Soft gradients）
过于强烈的渐变不再是趋势，大多数设计师都开始喜欢使用非常简单和微妙的渐变，如果产品的目标用户人群需要轻松温和的视觉环境，那么此风格再适合不过。
软渐变包括背景、阴影、反光，常与线条平面图形结合，应用于界面、网站、图标、icon等设计中。
特点：
• 低调温和
• 微妙渐变
• 清新愉悦
2.1、柔和背景
在设计网站中我们已经看到了许多非常精致，明亮柔和配色方案，混合两种以上的颜色来创造多彩的模糊背景。它使设计看起来非常现代、不打扰、清新而令人愉悦，其中画面内容是主要视觉焦点。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
实例应用：
▲咔咔、美柚
2.2、柔和阴影
柔和的彩色阴影使UI有了更微妙的深度变化，在图标设计中经常需要渐变或阴影来塑造物体，柔阴影使设计元素更丰富立体，并且它们有助于区分内容之间的层次结构。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
实例应用：
▲有道数学（已下架）
▲Uki
3、玻璃拟态（Glassmorphism）
去年新拟态掀起了一阵狂热，但这种模拟受到挤压的塑料效果（凹/凸层次感），在用户的阅读性上可能会出现问题，新拟态更适合用在局部的少量元素点缀，无法完整地使用在整套应用程序中。
▲Alexander Plyut
伴随着今年苹果发布的 MacOS Big Sur 操作系统的发布，新的拟物风格正式回归大众视野，整体风格应用了新拟态（Neumorphism）的设计思路，利用大量的毛玻璃质感和大量投影纵深感，能很好的突出前景信息，中和了扁平化图文带来的生硬不立体感。而Big Sur的图标也加入了 3D 质感设计，设计语言更为时尚简洁。苹果设计师 Alan Dye 在发布会上也提到了设计风格转变的原因，主要是希望「降低视觉的复杂度，让用户能够将注意力集中在内容上」。
而的玻璃拟态则更加注重垂直空间 z 轴的使用，背景多鲜艳色彩，在上空使用隔一层高斯模糊的毛玻璃质感，模糊的边界有细微的浅色边框，整体效果就是让元素之间有虚实结合的特殊空间。毛玻璃运用在界面中对关键信息起到强调作用，用户可以看到物体间的层次关系，哪一层在哪一层之上，就像物理空间中真实的玻璃一样。
特点：
• 透气磨砂
• 层级空间
• 简洁拟物
▲引领新拟态风格的Alexander的作品也朝着玻璃拟态变化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
实例运用：
▲毛玻璃视觉可追溯到2007年发售的Windows Vista，而当时的 OS X Yosemite 也大量使用了这种设计语言
▲的MacOS Big Sur操作系统
▲图标的变化
4、暗黑模式
暗黑模式是白色界面的相反版本，适用于午夜时分。之前用了很长时间微信的暗黑模式，突然切换成白色界面后，就像吸血鬼见到太阳光般刺眼，果然暗黑模式用久了还是比较舒服的。
暗黑模式和之前经常提到的夜间模式是有区别的，简单来说暗黑模式可以在任何场景下使用，并没有降低对比亮度；夜间模式则专为夜间场景设计，重在降低对比度，以降低在暗光环境下屏幕对人眼的刺激。
特点：
• 突出内容
• 减轻干扰
• 沉浸体验
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ✪
实例应用：
▲有道词典
▲爱范儿（ifanr）
最常使用暗黑模式的车载系统：
▲小度车载
暗黑模式的灵感最早引起大家注意的应该是抖音，在这之前大部分的应用都是白色为主，抖音整体黑色界面带来的沉浸以及轻打扰体验还是很棒的，在这之后也相继出现了以黑色为主的APP设计：
▲MOO音乐(可手动切换颜色模式)
▲Space FM
5、多彩高对比度界面
受Material Design调色板的影响，2020年用户界面趋势的一定不能少了亮色和荧光色的，可以作为主色也可以作为辅色，简约的界面中明亮大胆且对比鲜明的色彩一直都处于增长趋势。荧光色一直是90后喜欢的风格，我个人就非常喜欢荧光色，现在要是谈到该风格的受众主力军可是90后啊。
颜色是为界面添加信息和情绪以及使其看起来美观和吸引人的最有效方式之一，对比鲜明的颜色在白色和黑色界面上都能很快吸引用户的注意力，这种风格已经成为清新、酷炫、数字时代的代名词，而在2021一趋势还将会继续影响UI、平面、广告、插画等领域。
特点：
• 活泼大胆
• 对比鲜明
• 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在网站设计中的应用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
实例应用：
▲GoFun出行
▲开言英语
6、抽象几何元素
从上世纪初开始，抽象构成中的简单几何形状就已经用于视觉艺术中，多用于主背景主题或色彩细节，使用钢笔工具编辑最简单的形状（正方形，圆形、椭圆形），加上不同的颜色或渐变，让设计看起来既规则又有趣。
几何图形可以运用到UI设计中 ，将它们混合在一起以创建马赛克的效果，形成具有品牌意向符号的记忆点。
特点：
• 规则组合
• 品牌印象
• 重复记忆
▲Johnny Nova
▲Vladimir Gruev
实例应用：
最近看到的一组原色视觉刚好融合了高对比度+几何这两种风格，那就是SHINee的正规六辑合辑《‘The Story of Light’》，采用红黄蓝三色加上圆形、正方形、三角形的大块面积来打造画面空间及变化，带来极具视觉冲击的音乐色彩与魅力。
▲专辑的主视觉
当然，几何形状不止用于色彩图案细节，在UI界面布局中经常使用大块面图形，这种设计方法受到越来越多的关注。
7、极简风
极简设计的前身是2010年代中期精巧又花哨的设计，这种设计已经存在很长一段时间了，但在2020年，人们每天需要消化的信息量越来越多，所以现在用户想要尽可能避免“视觉垃圾”，这也是为什么我们会选择更简洁专一的界面。
特点
• 专注信息
• 清晰易用
• 简单操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
谈到极简主义，就不可避免会涉及到无键趋势，因为按键越少就意味着设计越简洁，而这种简化过的设计将让手势操作和语音交互更为流行。
▲Taras Migulko
▲Gleb Kuznetsov✈
实例应用：
▲夸克浏览器的夸克宝宝
8、将视频应用到UI中
在 2020 年，信息的触达的速度将会变得更快，而视频是很好的载体，各个年龄段的用户都喜欢观看引人入胜的动画，无论是选择通过短视频还是电影的方式来推广产品，都很好地灌输品牌理念，建立与受众群体的关系，加强用户忠诚信任感。
特点：
• 营造氛围
• 类型多样
• 品牌调性
▲Fireart Studio
▲Ehsan Rahimi
实例应用：
▲moo音乐登录页
▲虾米音乐欢迎页
9、插画与3D的界线越来越模糊
艺术插图从2017年开始到现在仍然很流行，几乎适用于任何类型的设计行业，是设计领域中最热的趋势之一。插画的视觉能很好的帮助用户理解产品背后的故事，为了把故事讲好，我们可以创造出一个品牌人物，赋予他人格，为他制造一些故事和冲突，最终帮助我们解决产品问题。这是在产品设计中讲好故事的基础，至于讲故事的方式，在 UI 和 UX 中都有使用，原理一样只是落地方式不同。
在2018年的蜘蛛侠平行宇宙中我们就已经看到了3D与插画的结合，艺术家保留了人物在美式漫画中的的线条笔触，把“手绘”的细节和质感都放大到了荧幕上，在剧中还采用对比强烈的大色块扩大了视觉张力，分分钟把漫画书甩到面前，让人忍不住惊呼，索尼的艺术家们是怎么把片子做得这么酷！
▲3D人物的画笔触感
▲画面光源处由波普圆点组成的背景
▲纸本漫画书中的“声音词”
▲漫画经典线条
▲Entei Ryu在3D建模使用插画质感
▲Minh Pham ✪在ui界面中的尝试
实例应用：
腾讯旗下音乐平台JOOX最近的概念宣传片，从MG、三维、定格、插画多个风格之间来回切换，给我们带来了一个多元的音乐世界。各大视频网站还搜不到，不能直接链接视频地址，喜欢的朋友可以关注微信视频号“UoU_Studio”观看完整视频。
在3D开始迅速发展的阶段，二维与三维之间的界限变得越来越模糊，插画作品也可以具备强互动性，而3D插画与动效的结合提供了一种奇妙的新方法，希望能够看到未来插画更多的可能性。
10、更多的微交互动效
最后一点，还是要强调动效在UI中的的作用，微交互最早出现在 2018 年，让用户更好地理解系统如何工作，并在引导其获得更好的体验方面扮演着非常重要的角色。它们在 UI 设计中决定了一个 App 或网站是普通还是优秀，从点击反馈、加载等待、导航交互等等，为用户界面设计增加了动态性，交互性和直观性。
动效起到的作用：
• 引起人们对应该做什么或接下来将要发生的事情的关注；
• 创造流畅和视觉愉悦的过渡；
• 带给使用者美观的享受；
• 指导我们进行复杂的操作；
• 确认用户使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
实例应用：
▲GoFun选择车辆后的页面转场动效
结尾：
2020的趋势在满足用户的美学要求上，侧重内容和感情表达，还会根据不同设备载体、新的技术而变化，为用户提供的丰富体验。
借用Adobe设计副总裁 Jamie Myrold 的一句话：如今设计师要思考的，绝不仅仅是设计一款App、网站或设计工具。我们要思考的是人类的需求、用户的需求，打造真正人性化、多元化与包容性的设计。
设计趋势还在快速增长变化，有些趋势总能长期霸屏，未来还将迎来更多新技术，每个设计人员都可以找到自己喜欢的方向，不管哪种趋势，最重要的是如何学习并合理地运用到产品中，以产生最大的设计商业价值。
文章来源：UI中国 作者：_阿丹a_
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
使用栅格系统很有帮助，它有助于在不同布局之间保持一致性，并加快设计决策的速度。栅格可更地控制不同屏幕尺寸之间的对齐方式及布局。本文重点介绍响应式栅格的重要知识点，以及产品设计师如何在设计工作流中调整栅格。
栅格由3个主要组件构成，包括列、槽和边距。
列是虚构的垂直块，用于对齐内容。我们用百分比（％）或固定值定义列宽。
栅格中的列
它是列与列之间的空间，有助于分隔内容，我们将槽的宽度定义成固定值。
栅格中的槽
边距是内容和屏幕边缘之间的空间。我们将边距宽度定义为固定值，该值决定每个屏幕尺寸的最小空间。弹性边距指的是列，槽和侧边距组成栅格后剩下的空间，它会根据不同的屏幕尺寸而变化。
栅格中的页边距和灵活边距
信息内容（图像，文本或UI元素）常常会被放置于可见和不可见的内容块中。可见内容块具有明显的边框或填充区，而不可见内容块则不具备，多数是透明底。可见的父级内容块包括卡片，横幅等组件。
卡片形式的可见内容块
不可见的内容块包括文本或功能按钮。
内容块应与列的边缘对齐，避免与槽边缘对齐。内容块中的信息是独立的，不一定非要与列对齐。
内容块的列对齐
用于构成栅格的列数称为列结构。8、12、16和20是用于响应式布局的一些最常见的列结构，设计师可以根据设计要求选择具体结构。
8/12/16/20列栅格结构
12列结构是最灵活的，它可以进一步分解成为4–4–4或3–3–3–3大小的内容块。
当屏幕尺寸到达响应点，那么页面布局也会有对应更改，以实现最佳的布局视图。列结构，列宽，槽宽度和边距都取决于响应点。内容块则根据不同的响应点堆叠或缩放，以重新调整获得最佳视图。
栅格缩放和堆叠
如果较小的屏幕具备足够空间来呈现，其实缩小比例就能展示完整了。如果屏幕实在是太小，就会垂直堆叠成一列。
栅格有3种呈现形式，一起来看下吧！
固定栅格有固定宽度的列以及页面边距，且固定的栅格具有固定的内容块宽度，该宽度在响应点范围内不会出现变化，并且页面边距会占据剩余的空间。
固定宽度栅格
流动栅格列的宽度是不定的，但槽和页面边距都是固定的。流体栅格具有灵活的内容块宽度，该宽度根据屏幕大小来变化。流体栅格中，列会随着可用空间变大或是缩小。
流动栅格
混合栅格同时具有流动宽度和固定宽度。在现代布局中，一些元素会完全脱离栅格。常见的例子比如页眉，页脚，或是出血的图片内容块。
混合栅格
如果内容块宽度大于可用的屏幕尺寸，则固定栅格会转变为流动栅格来适应屏幕。
不要以1440×900、1600×900或1920×1080等高分辨率进行设计。1280×800是电脑端内最小的分辨率，以1280×800设计的流动与固定宽度的布局都可以适应更大的屏幕。
固定宽度栅格设置
要设置固定宽度的栅格，我们对槽和列都应固定好数值。建议设置列宽为74px、槽宽32px以及16px的边距。
固定宽度栅格设置
列宽74px、槽宽32px可以生成1240px的内容块宽度（不包括两端的16px侧边距），最大化的利用了可用屏幕尺寸。在不同的响应点，固定内容宽度大于当前屏幕尺寸时，则固定宽度栅格开始变为流动栅格。
流动栅格设置
要设置流动宽度栅格，对槽使用数值，对列使用自动计算的值（以％为单位）。
流体布局栅格设置
流动栅格利用整个屏幕尺寸作为主要内容的宽度，每侧留出16px的侧边距。
在移动端使用流动栅格，槽和页边距的宽度推荐设置成16px。因为移动设备的屏幕分辨率较小，若再分成12个独立的列、槽和边距的话，设计起来也会很麻烦。
移动端的流动栅格设置
因此，我们将3列中的每列合并以创建4个粗列，从而使布局栅格既简洁又方便，快速对齐。
平板设置栅格的方式与移动设备非常相似，推荐槽宽和边距分别设置为32px与16px，可以在768×1024大小的画板上为平板设计界面。
平板电脑流动栅格设置
将12列优化成6列，让栅格清晰明了，谷歌的材质设计曾建议使用24px宽的槽与页边距，实际应用时，不妨都试下看哪个效果更好。
栅格布局的变化决定了主要内容的结构，针对不同的布局要求，使用不同的栅格系统，而页面中的内容块数量决定了页面布局的变化。
单列布局
单列布局或全宽布局，是着陆页和首页的风格之一。还可以合并12列来创建一个单列内容块，也可以将12列分配到父级内容块中。
一级页面常应用单列或全宽栅格布局
双列布局
该布局有两个内容块。通常，其中的一个内容块会占据比较多的区域进行信息展示。
在双列布局中，列要么分布在9–3或8–4父级内容块中，其中的一个组合列区域，用来创建主要内容。带有单个边栏的界面是两列布局的常见呈现形式。
三列布局
三列布局具有三个内容块，主要内容块占据最大的展示区域，在三列布局中，列分布在3–6–3或2–8–2父级内容块中。
固定宽度的侧边栏布局
固定宽度的边栏布局稍有不同。边栏宽度在一组响应点范围内固定，剩余空间由固定宽度或流动宽度的内容块占用。
侧边栏固定布局
在原型工具中，设计布局和编码有很大的不同。代码可以合并列或将其堆叠，比如合并12列以创建单个列布局，或将12列分布到一组，用来创建不同布局变化的内容块。在原型设计工具中设计布局时，你需要确保开发人员清楚了解电脑端，移动设备和平板设备上设置的列宽、槽宽及边距。像Bootstrap，Zurb Foundation等开发软件，其中对栅格值的设置会有出入。
自定义栅格
设计师可以多尝试不同的栅格值设置，以找到最适合自己的呈现形式。如果交付开发的时间非常紧急，请使用文中建议的数值，更保险也不会出错。
文章来源：站酷 作者：UX辞典
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
亚马逊作为一个知名的电商平台，它的成功背后却有一个很难让人理解的设计逻辑：成功的设计不一定是美观的。为什么会这么说呢？本文将从四个维度展开分析，希望对你有帮助
当你在设计表单时，是否对文本框和表单的规则有疑惑？本文的一些简单的规则将帮助你完成设计用户希望完成的表单。
上图是表单的发展历程，由石刻上的表单到纸质表单再到电脑上输入的表单。印刷式的表单已存在多年，我们可以从其设计中学到一些技巧。
一、文本框剖析
文本框允许用户在界面中输入文本。它们通常显示在表单和对话框中。文本字段组件设计应为交互提供明确的可见性，使字段在布局中好发现，填充且容易理解。
这些是基本文本字段的重要元素：
1.容器-可交互输入文本的区域
2.输入文本-输入文本字段
3.标签文本(标题)-告诉用户给定表单字段中属于什么信息
4.占位符文本-是所需信息的描述或示例，在用户输入文本后会被替换
5.帮助提示或验证文本（可选） -提供其他上下文或验证消息
6.头部图标（可选） -描述文本字段所需的输入类型
7.尾部图标（可选） —对输入的文本的附加控制，例如清除，隐藏/显示等
二、文本框类型
它们大多数基于基本文本框，为了更好地展示特定类型的信息而做的演变，例如输入信用卡号的文本框。以下是我们创建的整个UI中最常用的输入类型的一些示例：
为收集的数据提供正确的文本框类型，将帮助用户以正确的格式输入信息，并避免错误，从而使填写过程尽可能简单。
可以通过提供视觉上的变化来传达文本框的状态。输入文本字段可以具有以下状态之一：未激活，悬停，激活，禁用，校验，报错。大家在做表单设计时最好的做法就是遵循这些状态的变化，不要挑战已经形成的用户思维模型。
通常，文本框的标题有三种常用的位置可选择：顶部，左侧对齐和右侧对齐。采用哪种样式将取决于表单的主要目标和表单的大小，组件库以及要设计的平台。它们各自具有一些优点和缺点。
我已经根据大型设计研究的研究结果进行了汇总，最开始的Material design指南中流行的下划线输入并不是最佳选择。有趣的是，同一项研究表明，用户更喜欢带有圆角的输入。
当用户不熟悉所要填写的内容时，这是一个不错的选择
优点：标题易于拓展；充分利用垂直空间
缺点：标题和相应的输入内容之间的距离过长，而且不一致的距离会增加文本输入的完成时间
与左对齐的标题相比，完成时间快将近两倍
优点：文本的标题和输入内容的位置更紧密，减少了了眼睛的运动次数，从而缩短了完成时间
缺点：难以快速扫描表单并了解所需的所有信息
这是在大多数情况下最快的时间和最全面的选择。在移动端上效果很好，因为它们不需要很多水平空间。
优点：能够让用户单一眼球移动即可了解输入标题和输入文本，能够更快的完成
缺点：需要更多垂直空间
为表单中的所有文本框都使用相同的输入长度会使它们在视觉展现上令人愉悦，但是却很难完成填写。
输入信息后文本框内占位文本的消失，会对用户的短期记忆产生压力。没有标题，用户将无法在提交表单之前检查他们提供的所有信息。如果您需要极简的表单设计，则可以使用“Material design”浮动标题的方法。
表单内的占位符文本有时会使用户感到困惑，最好在字段外使用提示文本。
使用自动完成功能帮助解决部分查询功能，在用户的输入框中，用户可以按Enter或“右箭头键”使用它。
使用自动联想值搜索相关的关键字和建议使用的内容列表。列表以下拉弹层形式显示多个建议列表。
预填充字段并使用智能默认值。通常，您可以通过IP或地理位置轻松检测用户所在的国家和城市。根据最常见的方案进行分析，我们一般可以定义默认情况下应选择的内容。
提供上下文信息。为了用户做出正确的决定或避免错误，用户在进行转帐时将需要一些其他信息，例如帐户余额，如果能够从上下文中获取这些信息，就请及时给出。
“实时校验”是在用户浏览表单时实时检查用户输入的有效性，而不是在用户提交表单时一次性检查全部输入：
验证消息显示在靠近输入的区域，并一起显示
不要太过于激进的方式提示错误消息，应该告诉用户如何解决问题，而不是责怪他们
当字段在用户完成输入之前就被标记为无效时，请避免“提前验证”
考虑使用“正向校验”，可以增加一种愉悦感和成就感
它将消除视觉和认知负担，并且看起来更简单。
不要将全名和日期之类的文本分成多个字段
不要多次询问相同的信息
使用标签和提示复制以尽可能地缩短它
我们仅展示基本要点，通过逐步显示信息的方式来帮助用户管理信息的复杂性，在用户需要的时候再展示出来。比如加个开关按钮把不重要的信息隐藏。
使用条件逻辑能够根据用户的答案，自动显示或隐藏某些字段，并可以在表单中t跳过页面。这种方法不仅可以减少字段数，而且可以使填写过程更具个性化和对话性。
简化复杂表单的最简单方法之一就是开始对相关字段进行分组。格式塔心理学中有多种分组原则，可以使项目感觉相关：接近度，相似度，连续性，闭合性和连通性。将数十个非结构化字段分组为几个可管理的集合将显着提高表单的可用性。
有时即使删除了所有不必要的内容，某些表单也会很庞大。将大型任务分解为一系列较小的任务看起来容易得多，并促使用户将填写过程进行到最后。
显示步骤条，以视觉方式传达用户的进度，这可以提高满意度并激发用户继续填写的动力
不要过于细化表单，太多的步骤将无济于事，只会惹恼用户
对关键信息进行汇总以减轻用户的焦虑，最后需要进行复查
一列布局为用户创建了一条清晰的完成路径。使用多列表单布局的后果包括：用户跳过他们实际要输入数据的字段；将数据输入到错误的字段中；或者只是想暂停一下而可能导致放弃。
如果表单足够大，可以分成多个步骤，则应该为它分配一个单独的，清晰明确的空间。显示常规导航或任何会破坏表单填写过程的链接/按钮，只会造成混乱。我也建议不要在小型弹出窗口中使用多步骤表单。
Android或iOS提供了几种不同的键盘类型，每种类型的键盘都旨在促进不同类型的输入。为了简化数据输入，在编辑文本字段时显示的键盘应适合该字段中的内容类型。注意键盘将出现的位置。为了避免不必要的页面滚动，请将文本字段放在上方区域。
允许用户取消隐藏密码，而不是要求他们输入两次密码，这对于生成密码的应用程序也将更有效
始终显示密码要求，并显示用户在满足填写条件方面的进度。尝试简化对用户的要求
使用强度计量条以鼓励用户创建更强的密码
文章来源：站酷 作者：ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
对于产品设计师来说，在日常工作中做的产品类型主要是两种：一是B端项目，另一种是C端项目。近些年来，互联网进入下半场，C端用户增长触及天花板，流量的红利逐渐消退。很多企业的业务由C端转向了B端。
随着企业业务的转变，作为设计师的我们，也必须跟上步伐，快速做好角色的转换。当然，想从C端设计快速切换到B端设计，或是从B端设计快速切换到C端设计并非易事。因为C端和B端产品设计存在较大的反差。其商业属性、产品定位、目标用户、设计表达、业务流程等都会有很大的不同。那么今天这篇文章，我们就一起来聊聊B端和C端产品设计的差异性。
直接进入正题，本文将从目标用户、使用场景、产品需求、产品本质及特性、产品设计思维、设计原则等几个方面进行具体对比。
01目标用户
C端：
C端释义为：Consumer，意为消费者、个人用户或终端用户，使用的是客户端。C端产品往往是直接对接一般消费者，直接为广大消费者和用户提供产品或服务。例如：微信、微博、抖音等等。
B端：
B端释义为：Business，意为企业用户或商业用户。B端产品往往是为针对这类用户开发的系统型软件、工具或平台。例如：CRM 系统、 ERP 系统、OA系统、SAAS等等。
02使用场景
C端：
它会存在于我们生活中的各种场景，而且自由度非常高，当然也包含工作场景，比如周末在家无聊刷刷微博了解下国际大事、晚上睡前打开虾米听听歌、在工作间隙打开某团点个外卖等等，因此，C端产品的用户大部分使用场景是碎片化的。
B端：
B端产品更多的是在企业版内部使用，更多的是为了满足企业相关用户在“工作场景”下完成协同工作的一些特定组织需求。
03产品需求
C端：
想很好的挖掘C端产品需求，这要求我们做更细致的用户画像，比如：用户的性别、年龄、职业、文化程度、收入水平、个人喜好等都会影响到功能设计。然后通过用户画像、同理心等方法对用户的行为进行详细分析，以发掘用户具体需求。
B端：
B端产品一般是基于现有的“业务”形态，将传统线下工作，通过程序化、系统化、信息化转换为线上产品，从而提升企业协同效率，降低办公成本。需求一般来源于产品战略定位、使用者个性需求等。
04产品本质及特性
C端：
C端产品的本质基本都是一个核心功能，例如：社交类app的核心功能就是好友快速沟通；电商类app的核心功能就是购物；视频类app的核心功能就是看视频。在核心功能之外的都是一些“增值功能”，比如评论，点赞，分享等。如果除去这些附加功能，虽然会影响用户体验，但并不会妨碍核心功能的使用。
其产品特性可简单总结为一个词-分享。在使用C端产品时，用户都希望自己的“行为”能够得到其他用户的认可。比如：对自己分享的内容进行评论、分享、打赏等。
B端：
B端产品的本质是满足用户的工作需要，而公司内大部分工作，我们几乎是无法独立完成的。这意味着我们需要和其他同事协同去完成一个任务的闭环。因此，B端产品的业务逻辑会相对更加复杂。
B端产品的特性也非常明确——即“协同工作”。处于信息化时代的企业中，几乎已没有可以单独完成而不需要协同的工作了。
05产品设计思维
C端：
在上面我们已经提到过，C端产品的本质基本都是一个核心功能。因此，在设计前期，作为设计师的我们必须对产品进行全方面的考虑。到底那一个功能是我们产品的核心?哪些功能只是锦上添花?
此外，目前市场上C端产品同质化异常严重。想要产品独具一格，就必须突出特色，坚持自身的品牌亮点，才能让用户快速记住这个产品或者品牌。
B端：
B端产品的本质则是满足用户的工作需要，协同工作。对于企业来说，更多关注的是工作效率和成本。这也是B端产品最终的解决问题方向：如何提升企业的运营效率。因此，在设计过程中，我们需要不断的去优化产品流程、调整策略等。
06设计原则
C端：
在设计过程中，除了要抓住核心功能外，还需要给产品增加趣味性和创意性。趣味性，也就是要给用户带来积极的正面情绪，如：能使用户感到心情愉悦，感染人，打动人，引起用户心灵共鸣等；创意性，也就是要做出与同类产品不一样的东西，而这些新东西又是解决了用户某些痛点的。当然，做这些最终的目的是为了提升流量、留存率及转化率。
B端：
B端产品的需求往往是要解决一个企业中不同角色（普通成员，管理员、超级管理员等）之间的协助关系，在设计过程中一般需遵循如下设计原则：合理的功能与模块划分、严谨的业务流程设计、干净简洁的界面设计等。
在这里，笔者整理了几个优秀的B端产品设计案例，供读者参考。
登录界面设计
C端：
B端：
都是登录页面，差别却是如此之大。站酷面向的C端用户，账号登录支持手机号、邮箱以及第三方（微信、微博、QQ）方式。对于用户来说，选择非常多，可以说是非常人性化，大大提升了用户体验。
而网易邮箱面向的B端企业客户，账号登录仅支持邮箱登录一种方式，且用户登录时还得首先确认自己的身份是普通用户还是管理员。这也说明，在设计B端产品时，得充分考虑不同角色的权限问题。
导航栏设计
C端：
B端：
导航栏的设计布局有很多方式，面向C端用户的站酷使用了顶部导航的模式，这也是最常见的主导航模式。二级导航聚合在下拉菜单里面，鼠标hover出现。这种导航方式非常直观，访客可以快速的定位自己感兴趣的模块，另外，可以很好的展示内容区域，对于访客来说，非常友好。
面向B端用户的爱客CRM系统使用的是侧边栏导航，使得导航展示更加清晰，页面之间的切换也非常方便。这种布局方式一般用于管理后台偏多，与B端产品业务复杂性密不可分的。
B端产品原型实例
当我们明确了具体的需求后，就可以动手制作可交互原型了，这样可以很好表达出整体逻辑，让客户直观的看到功能和效果，获得较真实的感受，并在不断讨论的基础上完善未来的设计思想。接下来，一起来看看我用Mockplus做的B端产品原型效果：
原型演示地址：https://run.mockplus.cn/4oEh4pCz7K9GRtlS/index.html
文末福利
最后，我为大家准备了一份小福利。
产品团队的沟通离不开原型，今天为大家推荐的原型设计工具Mockplus，更快更简单，5分钟制作一个交互原型页面。支持团队协作和在线审阅。
点击下方链接可以免费领取Mockplus的个人版15天，数量有限，先到先得。
领取地址：https://www.mockplus.cn/home/promote
小结：
虽然C端和B端产品在目标用户、使用场景、产品需求、产品本质及特性、产品设计思维、设计原则上都有所差异，但是C端和B端产品也有很多共同点，如：都要求产品简单实用和有效准确，都是为了更好的满足用户的需求，解决用户的痛点等。如果能做好以上这些关键点，无论是做C端还是B端，都会是非常优秀的产品。
转自：ui
编辑导语：你有没有设计过结构复杂、内容繁多的表单？在设计时有没有什么技巧可以化繁为简、提升填写者的体验感呢？本文作者为我们罗列出了表单设计中可能遇到的一些问题，并且提供了解决方案，让我们一起来学习吧。
距离上次发文已经快半年多了，实在是惭愧，好久没有输出内容了，看着每周增加的零星关注人数，内心更加焦灼难安。
这半年来我换了工作，也适应了新的环境，同时也在思考新的方向，估计和大多数的设计师一样，迷茫时常伴随着我。前段时间写了几周的产品体验日记，但觉得缺乏深度就没发上来，后续我将会继续写产品体验日记，完善后分享给大家。
2020所剩无多了，我也会将积攒下的一些内容陆陆续续发上来与大家分享，感谢关注，感谢阅读。哈哈哈哈
你平时填写过的最复杂的表单是什么？调查问卷还是文档信息录入？如果一个表单字段内容巨多、结构多变、填写耗时耗力，那你将如何设计你的表单使之体验更佳？
面临的问题:
不知道大家是否看过法律合同之类的文件，多则好几箩筐，少也有厚厚一叠；类似的文档如果进行线上结构化，势必要同样要花费巨大的人力去填写表单，完成基础信息的录入工作。
同时，由于录入的时间不确定，流程不明确等问题，也制约着表单的填写。
多个不同表单之间的互有关联又相互区别，填写的时候需要来回查看以确认信息，查阅和填写相互并行，操作繁琐。
几乎每一个字段都有对应的关联项，每个单选字段的不同项决定不同的内容。同时，由于字段数量，层级划分不明确，会使填写的人失去定位，产生迷惑。
根据业务内容分级，合理运用颜色、间距、字体大小、卡片层级等进行信息分级。
一般表单是与某项功能挂钩的，信息会在多个入口录入。因此在填写长表单的时候，如果能从系统中自动获取到数据，就可以自动为其填充，可根据业务场景，判断是否让其修改和更新。
一般的长表单在涉及非审批流的时候，可以让其无限二次编辑；如果是处于审批流，则需要根据业务场景限制其编辑次数或者限定其编辑规则（草稿可编辑，一旦提交则不可编辑）。
如果一个长表单，需要多个不同的业务域的人来填写，那么需要协同编辑，并实时显示编辑的人员信息。
同时，为了避免信息丢失和编辑错乱，在同一个表单下，同一时间应该限制只允许一个人进行编辑，等其提交完后，可允许其他人进行编辑。
前端实时校验字段输入规则，后端统一校验信息交换规则。
比如对于数字输入框的校验、电话号码的校验、身份证号的校验，应该在前端实时完成。
在鼠标离开焦点区域或定位到下一个字段的时候，提示其填写有误；这样做的目的是减少后续修改的次数，在长表单下，统一提示其填写错误会是一场灾难。
在点击保存并填写下一步或点击提交信息的时候，就需要跟后端交换数据，验证录入的信息；如果不匹配，则提示错误，并从上至下定位至相应的错误字段。
要通过多种方式，引导表单的填写。
1）在开始填写之前，简要说明该表单的业务目标，大概需要花费的时间等；
2）开始填写后，关于每个字段的特殊说明，都需要标注出来。重要的要显示在页面上，不重要的就收起在注释符号中；
3）填写的过程中，切记不要到最后才告诉用户哪里出错了，重要的信息一定要提示到位，否则一旦出错，前功尽弃；
4）填写完成后，引导其下一步的操作，或者返回至列表。
表单填写完毕后的产出物就是详情页，详情页是需要浏览的。因此在设计详情页的时候，应该本着让用户浏览方便的原则去设计，需要注意以下几个点：
1）结构清晰
结构清晰是指不要讲内容一股脑的全堆在页面上，要做好信息的分类；同时，注意规划页面的层级。
2）设置快捷导航
如果一个表单是长且复杂的，那么其对应的详情页也会变得复杂和冗长，因此在页面的右侧或者顶部设置合理的快捷导航是很有必要的。
快速返回顶部按钮的使用要注意场景，如果你的页面比较长，且没有分组浏览的导航，那就需要设置快速返回顶部的按钮。
但是在存在分组浏览导航和顶部悬浮标签的情况下，不建议使用快速返回顶部的按钮，因为在填写表单的时候，使用快速置顶的场景比较少。
当一个模块混杂着各种信息的时候，单纯的模块分组已经无法处理它的复杂度了，因此需要收起高频且信息量大的模块，可以合理的减少页面的复杂度。
步骤条可以单纯的作为步骤指示器使用，也可以作为一个表单完成度的提示区域。
在填写大量字段的表单时，阅读表单内容和填写表单同样耗时耗力。
如果我们将所有的提示信息隐藏在提示符中，一般情况下用户不会去查看；但是如果去挨个查看提示信息，则会多花费一个步骤去点击或者悬停来查看提示信息，浪费了大量的时间。
因此如果涉及到重要的提示信息，请直接展示在字段的后面，不要隐藏起来。
在后台产品上，关于组件的规范统一，想必是人尽皆知的设计原则。
无论是各类平台型设计组件，还是各个公司自造的设计组件，保持统一和规范对产品设计有着重要的作用，在这里不赘述组件应该怎样规范统一。
因为无论是Ant Design还是其他设计语言，都有详尽的关于组件的定义方法，我在这里讲述一个产品设计更高层面或者更深层面的原因：
组件的规范统一并不仅仅是为了省时省力，而是为了使用户在使用的过程中达到认知上的统一和行为上的统一，在进行高频次的操作后，界面的流程或者组件样式已大致在用户脑海中形成固定印象。
因此在操作相同类的流程时，用户会有更多的掌控感，试想一下：如果你在操作人事相关的流程后，去填写绩效部分的内容时，发现一个迥异的界面或者弹窗，你肯定觉得这是不是哪里出错了，甚至会怀疑这是否是同一个系统。
目前大多数公司的管理系统经过多次缝缝补补，内部的跳转逻辑已经异常感人，界面风格也大放异彩，但是使用起来却无从下手，深感迷茫。
因此大到界面样式，小到间距大小，产品设计的规范和统一应该是最基础又不可缺少的原则。
对付复杂的表单，你需要解决的主要问题并不是填写方式或者页面设计，而是信息分级和结构拆分。解决了这个问题，基本上就解决了业务问题，其余部分就跟我们常用的表单一致。
将复杂度降低并不意味着减少页面的信息，而是通过设计师合理的信息划分，降低视觉上的复杂度和流程上的复杂度，这样才会达到当前场景下的“最佳解决方案”。
随着互联网信息化的深入发展，复杂是避免不了的。
我知道大家都推崇简洁的设计，但那只是对视觉和样式的定义，而非对信息的定义。
我们所处的世界是复杂的，行业更是复杂的。信息的复杂度与日俱增，想要处理复杂的信息，就需要从复杂中寻求规律，这规律与业务息息相关。
B端360行，行行深如海，小伙伴们，我们一起慢慢修炼吧~
一、导语
1. 业务复杂，功能较多
2. 流程较长，操作繁琐
3. 字段较多，关联项较多
二、解决方案
1. 内容分组，分步填写
2. 实时保存，避免数据丢失，提供草稿功能，避免任务中断
3.字段分组，示意结构，联动项隐喻
4. 信息自动带入，节省时间
5. 提供二次编辑功能，防止信息输入有误
6.提供多人协作编辑功能
7. 实时检验
8.做好填写引导功能
9. 详情页也需要注意信息分级
三、小细节，大体验
1. 提供快速返回顶部的按钮
2. 提供分组模块收起展开功能
3. 步骤提供信息填写完成度提示
4. 重要说明性文字尽量显示而非收起
5. 产品内组件应该规范统一
6.庞大的信息录入，表单内部要分步填写，外部可拆分成不同的表单分别填写
四、结语
文章来源：人人都是产品经理 作者：米兰小铁匠
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
看到知乎上的一个问题：如何找到一家好的高端网站设计公司？
把回答的内容也转过来记录一下。
首先回答：何为高端？
高端与低端是对应的，目前网站设计，中低端基本是用模板改改，相对价格低，有一些小型公司或不依靠网站运营收入的公司，“有个网站就好”，所以可以用这种低投入，内容有就行的网站建设公司，特点是马上就能用，三五天把内容发布进去就可以。备案可能需要一定时间。
高端设计公司，一般是量身定做，为企业做网站策划、分析，按照用户研究、网站建站的目的来进行网站的定制栏目页的设计。做竞品分析、研究对方的优缺点，设计的色系和企业标准色、情感表达、人物场景、用户体验思维，越深入，思考越成熟，做的网站品质越有保障。所以需要的时间、精力、投入相对多。
因为投入相对多，所以经营业绩好的企业、集团公司、营销类大型网站来定制的比较多。
我们公司“北京蓝蓝设计”就是为定制的高端企业用户、政府网站、软件公司来服务的。我们挺喜欢要求高的客户，这样能体现出专业设计的水平，这也是我们和其它建站公司区别开来的地方。
我们主要是给大型软件公司平台、系统做UE、交互设计、视觉设计，用户体验优化，这个，比网站设计更难，更专业。 往往一个公司的核心产品，值得把精力金钱投入到上面，产出最大的回报。近年来，除了做软件UI，大屏大数据可视化项目外，我们也扩展了“愿意把公司网站做成核 心产品”这样的公司成为合作伙伴，更好的为客户提供全方位的服务。
一旦成为我们的客户，设计无忧。
我们一定会把该做的事做好，并提供超值服务和额外附加值的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本篇文章将分享Web端表单体验优化等相关内容，分析设计师在设计B端类产品时如何让用户愉悦并的填写表单。
表单作为基础通用组件，也是在各个企业级中台中出现频率最高的元素之一。在用户界面中表单无处不在，比如：用户注册登陆页、支付页、用户反馈、共享信息数据录入等不同类型的表单。当我们使用/设计表单页面时看似是按钮、输入框等表单组件进行组合搭配使用，看似简单，但是在实际业务使用中却有着无数可推敲的细节冒出来，常常给设计师造成较多的困扰。
那么在实际工作中哪些内容会给设计造成困扰呢？举几个例子：在实际的业务中很多产品因为业务导向需要入海（非中国区方向），所以就存在表单标签对齐方式问题，如果右对齐可能在中文的情况下表单标签预设宽度正好合适，但是当用户切换到多语言时因为语言差异会导致折行严重等一些列问题，相当影响体验；设计师常常疑惑表单标签是顶部对齐、右对齐还是左对齐，他们的差异点在哪呢？必填与非必填项以什么形式告诉用户会更加合理呢？表单按钮放在页面哪个位置体验会更佳呢？
所以我们不能忽视这些设计细节，往往一些好的设计细节提升总会给用户带来不一样的用户体验。针对以上这些举重若轻的问题我们一一明确、抛出并与大家一起来进行由浅至深的探讨「如何提升表单体验」。
重点概览
一、表单分析
二、体验与优化
三、排列与布局
四、写在最后
表单分析
1.1 表单的重要性
在上面的前言中也提到了表单作为基础通用组件，也是在各个企业级中台中出现频率最高的元素之一。并且在《Web Form Design》一书中 Luke Wroblewsk 也提到了“表单决定了最关键的界面中交互的成败”，当用户使用网站时会有一个特定目标，如果设计得好，网站将实现有效性。效率、用户主观满意度以及特定用户在特定使用环境下所达到的特定目标，也是设计师想要达成的最终目标。表单往往是目标用户和整个产品的一所桥梁。因为，尽管人机交互的发展进步，表单仍然是用户在网络中进行交互的主要方式。所以表单是被认为完成目标的最终，也是最重要的阶段。
我们以淘宝来举个典型的例子，淘宝属于国民电商平台也是亚洲较大的网上交易平台，提供各类优质商品。从平台的特性来讲，它以用户下单并成交作为最终目标。其中支付表单起着一个关键的作用，用户从购买到支付完成以分步形式进行，第一步填写基本信息并提交订单，第二步选择商品并选择支付货款至第三方，第三步买方确认收货并自动打款给商家，第四步完成订单并评价。在填写表单时中间没任何阻断，用户能很顺利的按步骤完成订单。淘宝支付表单属于比较典型的分步表单。
1.2 拆分表单
我们简单提一下表单组成（网上有很多详细的相关文章），一个完整较复杂的表单是由7个基本组成部分，表单类别、表单标签、表单基本组件、占位提示、帮助信息、按钮、校验。表单可以包含以上组成部分，但不是一定都要有，比如：移动端填写验证码时为了减少用户操作，当用户填写完成之后直接提交表单验证。
表单类别：第一时间告诉用户此段落的表单大致内容，减少用户理解并承担着概括内容的作用；
表单组件：包含了输入框、下拉框、日期选择器、时间选择器、开关、上传等十几种类型，是形成表单的核心内容；
表单标签：表单标签承担着对输入项或设置项的解释作用，所以表单标签需要合理设置，核心点是帮助用户快速理解每一项字段的作用；
占位提示：使用通用的认知提示并且以较弱的方式呈现给用户，用户填完信息即消失。注意：占位提示不能替代标签，因为消失的占位提示会拉长用户的短期记忆，如果没有表单标签用户将无法在提交表单前检查他们填写的所有信息。文章下面会详细分析。
帮助信息：当表单标签不足以对输入项准确说明时，这时候需要使用文本提示用户。它不仅能让用户提前感知输入后的样式，还能够有效的告诉用户该如何输入以及表单提交后达到的目的。
按钮：当用户完成信息录入时，按钮能够对表单内容进行校验或提交。
校验：对用户信息录入内容进行校验并给出对应的错误提示。如：内容是否为空、类型格式是否正确、是否符合业务逻辑等等。校验时有两种规则，分别是使用即时校验（失焦即校验）和点击提交按钮以后的最终校验。状态分别为错误、警示、成功。
1.3 表单类型
基础表单
较为简单的一类表单，把所有表单字段平铺在页面中，字段内容较少。当用户输入少量信息即可完成一个简单快速的任务。例如：此类型表单常常用在简单的登录注册中。
分步表单
较为复杂的一类表单，把一个相对复杂的表单字段拆解为多个步骤进行。根据业务属性进行步骤分组利用步骤条告诉用户所完成的流程和进度，当用户每次填写都意味着一次节点完成，整个流程结束给予明确的结果反馈，并以提交成功为最终。分布表单有利于减轻用户由于表单大而复杂的造成的填写负担，并且能减少用户表单填写出错率。
分组表单
将一个复杂表单拆解归类分组。分组表单与分布表单特点较为相似，都可以减轻用户因为表单大而复杂的造成填写的负担，并且能减少用户表单填写出错率
体验与优化
1.1 必填项or可选项
在设计表单时大多数设计师都习惯性的使用星号表示必填字段。但那么问题来了，针对必填项和可选项用那种形式才是最科学的呢？我们简单分析一下。
当表单中的必填信息多于非必填信息时，如果使用红色星号表示必填项，那么大量红色星号导致增加用户的认知负担，使得用户无法快速识别哪些是必须填写的，哪些是不必须填写。并且使用红色星号会带给用户一些恐惧感，它增加了出错的风险并降低了表单填写率。因此在表单设计中，当必填项多于非必填项时，隐藏红色星号标记，通过暗提示标记可选项的形式来帮助用户识别。
红色星号对于不同用户也会存在不同的认知差异。对比较有经验的用户可能表意较为明显，但不代表所有用户都能理解，比如一些非中国区用户使用国际化产品时存在不同认知，因为每个国家本地化差异较大导致认知差异。
还有一点是表单中视觉噪声越少可读性越强，因此当必填项多于非必填用非必填字段提示用户会更好。
1.2 单列布局or多列布局
多列表单字段会导致用户视觉路径变长，因为如果表单中有水平相邻的字段，则用户必须以Z样式进行视线扫描，整体的效率和工作量都更大，使清晰的路径变得模糊并加长用户阅读时间。多列表单可能会存在用户跳过他们实际要输入的必填字段，将数据输入到错误字段中。而最终校验信息时用户得反复检查错误项导致用户放弃填写。
如果表单使用单列，则完成的路径是页面垂直向下的一条直线，单列布局能够给用户呈现一条清晰的视觉路。因此，表单较为简单时尽量避免将表单分成多列，在业务场景允许的情况尽量使用单列（部分业务诉求和一些特定场景要求，多列布局会更节省垂直空间，但是多列布局需要考虑字段之间的关联性，这里不强求一定只能使用单列布局）。
1.3 将复杂的表单分为几个简单的步骤
在设计师设计表单时可能业务场景复杂、字段较多，即使设计师把很多不必要的字段都删除也解决不了根本问题。所以，这时候设计师需要将大型任务分解为一系列较小的任务，使得表单更加的简洁。这种方式的好处是能将步骤以视觉的方式传达给用户数量、名称、说明等信息，更加提高用户满意度并且能激励继续填写。
但是设计师需要注意的是不要太过于细化步骤以及在小型弹出窗出现过多的步骤，过多的步骤不利与用户填写和记忆，反而增加用户负担。
1.4 按钮的位置
按钮放在页面左下角比较好还是放右下角比较好？这是设计师在设计表单时常常纠结的一个问题。其实在14世纪西方活字印刷术的发明人约翰·古腾堡提出一个概念古腾堡法则（Gutenberg Diagram），又称对角线平衡法则。它指出用户在浏览页面或一些布局时，视线往往趋向于从左上角到右下角进行扫描。左上角是第一视觉落点区（主视区），而右下角是最终视觉落点区（终点区）。与之相对，右上角和左下角则是视觉盲点。用户的视觉移动端规则是从上到下，从左到右。
所以，界面中的左上和右下是用户视觉最为重点关注的位置。遵循古腾堡法则，设计师应该把界面的关键元素放在主视区，终点区可以放按钮、强提示，盲点区可以用来放一些相对次要的内容，如辅助图形、文字信息。
同理，表单中会出现组合按钮，比如：取消与确认、提现与充值。根据古腾堡法则，用户使用界面时从第一视觉落点区是主视觉区(Primary Optical Area)，最终停留在结尾的终点区(Terminal Area)。
如下图是一个弹窗类型的表单，如果根据业务诉求确认操作重要程度强于取消操作，那么确认按钮应该放在取消按钮的右边。因为确认按钮放在右侧(终点区) 用户关注度会更强。
1.5 占位提示避免代替表单标签
常规的占位提示作用是使用通用的认知提示并且以较弱的方式呈现给用户，当在字段中填入内容这些提示通常会消失。
设计师常常遇到表单字段较多并且页面空间有限的情况，为了减少横向节省空间设计师常常的做法是将表单标签删除，使用占位提示文本作为信息提示。但是设计师必须有意识知道到这种方式适合使用在较为简单的表单中，比如：表格中点击修改名称操作，弹出气泡并且气泡中只存在一个字段。或者是在用户非常熟知的登录注册等较为简单的表单填写时使用。但是当用户需要填写大量字段信息时不建议使用占位提示代替表单标签的方式。原因有两点：1. 当用户选中文本框填写时，占位内容即消失，这时候用户无法检查并确认其所写的内容是否符合预期。2. 当用户看到文本框中已经回填内容了，误认为占位提示是默认回显内容，造成内容已经填完不需要再操作的错觉。
针对上面问题也不是没有解决方案，在Material Design中有提供针对上面的问题的解决方案，我们这边暂时称其为“浮动标签”，默认情况下输入框内显示占位文本，当用户输入内容以后占位文本浮动到内容上方与内容左对齐。
1.6 校验反馈及时并准确
设计师通常认为用户在填写表单时能够很顺利的完成表单录入，但事实相反。在实际的使用场景中，特别是在一些业务较为复杂的表单中用户极易发生错误，这时候需要需要明确的校验信息、准确的校验时机、输入的限制提示。
错误提示校验
错误校验提示一般存在于错误率较高情况下出现，如：在登录注册时，要求用户填写手机号，如果用户输入的手机号码不符合特定的输入格式，那么这时候需要明确标记错误原因，准确的帮助用户找到问题并解决，避免错误提示描述模糊不清误导用户。错误提示一般会采用“双重视觉强调”来显示错误，除了输入框突出显示外，同时需要在输入框下方加入红色指导文字。如下图所示为西瓜视频登录注册场景下的截图：
限制与格式提示
在表单中如果出现特定格式时务必要提前告知用户。可以在输入框中显示概括回答的方式引导用户，如：请输入日期，eg：mm/dd/yy。这样便于帮助用户提前感知，减少表单填写错误率。
校验时机
为了避免用户在提交时表单时出现大面积的报错问题，设计师可以使用实时校验的交互形式。如：在用户输入完成之后鼠标失焦后进行信息校验，但是需要注意的是在实时校验时避免用户还没有输入完成即出现校验误导用户，所以需要准确判断鼠标是否失焦。如下图所示为西瓜视频登录注册场景下的截图：
1.7 字段长度与输入预期成正比
在实际业务中，设计师常常习惯把每个表单字段都设置成相同的宽度，在视觉效果上看感觉会比较统一，但是这种做法实际上体验欠佳。字段的宽度应该向用户暗示所需输入内容的长度从而减轻判断负担。在Ant Design 4.0 系列分享的文章《整齐划一？不如错落有致》中分析到错落有致的排版表现似乎比整齐划一的左图更舒适，因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体。但左图过度的对齐导致暗示隐性的截断，我们惯性视觉会产生表单字段右侧空间缺了一大块的错觉。
文章总结到“表单宽度的处理方式核心旨在解决两个问题：1. 暗示填写内容长度；2. 表单项布局排列效果，我们通过设置合理的默认宽度尺寸和描述关系，就可以让设计师们跳过部分繁琐磨人的细节思考，快速搭建表单宽度合理且舒适的页面。”如下图所示：
排列与布局
1.1 定宽or自适应？
表单做定宽还是做自适应？哪个“更好”的这个问题时常困恼着我们。其中Button、Radio、CheckBox等本身是定宽组件还好，它根据内容自适应即可，但是当遇到Select、DataPicker、Cascader等类型时就会开始纠结这个问题。在实际的业务中不论是做理想中的定宽还是自适应，很多情况下浏览器窗口大小不一可能导致在一些极限情况下都会产生不尽人意的情况。脑补一下，比如：在笔记本的小屏幕下左对齐并定宽效果还不错，但是当你把页面呈现在较大显示器下，这时候页面右侧又会呈现出大面积的空白。参考AntDesign提供的典型页面以下三种样式是都会造成不同的反面效果。
所以在实际业务场景中如果没有明确自适应和特定自定义宽度的需求时可以通过以下几种方式处理。
将关联性强的字段分组
如果页面横向宽度足够大时，可以将一个区域中字段较多、并具有关联性字段进行分组，这样不仅有利于空间布局上的利用，还可以通过字段之间关联性暗提示帮助用户更好理解。格式塔心理学中有多种分组原则，可以使字段之间具有相关性：接近度，相似度，连续性，闭合性和连通性。将非结构化字段分组为几个机构化的集合提高表单的可用性。
设置字段宽度梯度
可以给字段设置几档宽度梯度的尺寸，我们可以站在AntDesign这个巨人的肩膀汲取一些相关经验，其中4.0系列分享的文章中总结到其经过对十几个业务线梳理，将组件宽度定义了5中高频的空间尺寸，分别是： XS（80~160px）、S （160~280）、M（280~360px）、L （360px~480px）、XL （480~560px）。根据原理，我们可以假设原子宽度XS为100，那么通过尺寸的倍数+间距的方式来计算其他的四种尺寸（间距暂定8px情况下得到：S=208px、M=316px、L=424px、XL=532px），通过此计算方式也是用来解决视觉对齐规则，如下图所示：
1.2 表单标签顶部对齐or右对齐or左对齐
在设计表单时到底是左对齐、右对齐还是顶部对齐呢？这个问题也是在实际业务中设计师发问频率较高的一个棘手问题。其实，不论是哪种方式都有相对的利弊，需要根据实际业务场景提供不同的解决方案。在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究，下图是Matteo Penzo研究总结得到的浏览时间表：
表单字段顶部对齐
将表单标签放置在其对应输入字段的正上方，并垂直左对齐排列，用户只需依次向下浏览即可看到标签与输入字段两个元素。其优势是横向屏幕空间足够，能够比较友好的适配多语言适合非中国区业务表单使用。并且根据上面Matteo Penzo的时间表上看，顶部对齐的浏览和填写的效率也是3种常规的对齐方式中较高的一种。不足点是会占用较多的纵向垂直屏幕空间，此外应当注意每组表单标签和输入字段与其他字段组的间距，以免层级区分度不够的问题。
表单字段右对齐
将表单标签放置在其对应的输入字段的左边，标签右对齐。其优点减少了占用屏幕的高度，并且表单标签与输入字段关系较近，所以用户在填写表单时效率较高。不足点是由于表单标签的字数不可控（特别是针对非中国区业务时，多语言切换可能会出现超长的文案，甚至出现折行的情况），可能会造成左侧参差不齐的问题，导致可读性不高用户在查看表单时比较费劲，并且不太适合非中国区业务。
表单字段左对齐
将表单标签放置在其对应的输入字段的左边，标签左对齐。表单标签和输入字段距离较远，用户从左至右浏览时间变长，并且根据上面Matteo Penzo的时间表上看，左对齐的浏览和填写的效率是3种常规的对齐方式中最慢的一种。但是，如果业务需要用户对表单放慢速度并谨慎填写（复杂表单或者表单中含有大量高级设置的陌生数据时），左对齐的方式会减少部分用户的出错率。但不太适合非中国区业务。
1.3 表单布局类型
常规布局（简单）
在实际业务中当表单字段较为简单时可使用，表单字段至上而下单列排列布局，用户只需纵向阅读填写，填写完成率较高。
多列布局（较复杂）
垂直空间有限并且表单含有较多填写字段的复杂表单时，可将具有相关联字段放在一个卡片区域中进行归类，将多个字段组合在一行，形成多列排布的暗提示帮助用户更好理解。
区域分组布局（复杂）
表单含有较多填写字段的复杂表单，可将具有相关联字段进行分类并以标题区分的形式进行字段分组，并且表单字段都在一个卡片区域内。
卡片分组布局（高复杂）
卡片分组布局一般用来处理高复杂类型表单。当业务中希望页面承载众多表单字段时，可将信息相关性弱的字段拆分为多个部分，并通过多个卡片分组承载不同类型字段，每个卡片都需有个卡片类别标题。
写在最后
本篇文章从分析表单在产品中为何如此的重要，总结了在日常工作中设计师常常遇到的表单类型和布局，设计师可通过文章中的建议和案例进而合理的选择并灵活应用。以及在实际的业务应用场景中设计师如何规避和注意一些设计细节进而提升表单的体验。文章通过一些案例进行分析，希望大家能够通过此篇文章更多的是受到启发（而不是限制），能够在日常工作中灵活应用并举一反三。这里需要强调的是作为产品设计师不论是表单设计还是全局的页面设计，都需要有理解业务本质的能力和全局的业务思考能力，不然常常会被称之为“喂，那个画图的设计”。
文章来源：tob.design