编辑导读：如今，谷歌可以说是科技领域规模最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。
图片来自Material
在没有其他方法的情况下，图标可以成为理想的指示工具。——《谷歌材料设计指南》
在《Design of Everyday Things》一书中，有“以人为本的设计之父”之称的唐·诺曼（Don Norman）阐述了他对图标的理解：图标就是代表动作、同时可以指示该动作以何种方式完成的元素。在数字产品中，我们很少会出现“左滑-删除”这样的文字指示，而是通过左滑的动作引出一个红色的小垃圾桶来阐明“左滑就会删除”这样的设定。
在用户和产品交互之前，插入动画效果。——《谷歌材料设计指南》
如果我们希望一款数字产品有着极简主义外观，那么我们可以借助动画来达到这一点。在上图的例子中，最开始画面中甚至不会出现垃圾桶的图标。在我们手指滑动后，也就是人机交互的动作产生之后，才会出现这一垃圾桶，同时也会强化“滑动表示删除”这样的信息。动画效果有效简化洁面、改善用户体验的功能。
图片来自Medium｜制图Eddy Gann
动画可以展示图标所代表的执行动作，从而增加流畅感和愉悦感。在两个视觉效果之间插入带有动画效果的图标，可以反映这两个视觉效果之间的关联。——《谷歌材料设计指南》
在两个动作之间增加一个过渡的动画，这个效果我们应该很熟悉。最简单的例子就是“播放/暂停”按钮。在点播放后，该图标变成了暂停按钮；点下暂停按钮，该图标又变成了播放按钮。这个变化的图标展示了播放和暂停两个动作之间的关系。
这只是一个简单的案例。现在想象一段更加复杂的经验：比如将某个产品添加到购物车中，购物车图标会出现装进货物的动画效果；或者想象某一功能无法使用时图标的弹出效果。
带动画效果的图标本身并不复杂，我们可以在Adobe XD中完成：通过给图标添加预设效果，或者加入淡入、淡出的效果即可。
动画效果可以根据需要设计出简单或复杂的运动轨迹。图标虽然小，却是影响用户体验非常重要的一环，我们可以通过设计复杂的运动轨迹来强调它的重要性。——《谷歌材料设计指南》
请记住，如果界面上所有的元素和图标都在动，那么用户可能会不知所措。过度使用这一方法反而会削弱你想强调的重点。给图标添加动画应该适可而止。
调色板生成工具｜图片来自Medium
调色板生成工具（Material’s Palette Generator）可以调出任何你需要的颜色，色相，亮度，色度等都可以通过一系列算法调节出来，通过算法调出的色彩实用又美观。——《谷歌材料设计指南》
如果我们无法使用谷歌的调色板生成工具，手动调色就会变成一件非常麻烦的事。调色板生成工具最大的好处就在于它自动给你调出了同一种颜色的不同形态（如蓝色从暗到明、从深到浅的形态），你就不需要再对照标准调色板一点点矫正了。不过即使没有这样的自动生成工具，你也应该仔细检查并矫正自己的调色工具。
颜色对于数字产品的重要性，就像是盐和胡椒粉对吐司的重要性一样——添加太多了，就盖过了吐司自身的风味；太少了，味道就会变得寡淡。在选择配色以求增加品牌视觉效果时，一定要仔细考虑清楚给哪里添加什么颜色。
通过有节制地在APP里添加颜色，你还可以突出相应的内容，如文本、图片、按钮等。你可能已经注意到了，Instagram和Twitter上面布满了色彩鲜艳的图片和图标，与之相对应，它的用户界面非常简洁，不会喧宾夺主。
色彩也可以是一种交互元素，要考虑它们在什么地方交互，希望达到什么效果。最重要的元素要用最突出的色彩。——《谷歌色彩设计指南》
当一个元素的色彩与周围环境形成对比时，用户会更理解它的重要性。我们可以给重要的元素增加“色彩权重”，这个概念是说增加色彩的饱和度，使用更加大胆、更吸引人的色彩，制造视觉冲击。
另外，我们可以将重要的信息加粗显示，让它在第一时间进入用户的眼睛。简单来说，如果一种信息比另一种信息更重要，那么前者就要在色彩和篇幅上胜过后者，好让用户直观地进行区分。
文字类型生成工具｜图片来自Medium
Google Fonts是谷歌研发的一款文字类型生成工具，可以使用它来调节字体、大小等。您可以根据需要调整和优化产品的文字设计。——《谷歌材料设计指南》
字体设计是一门艺术，它不仅关乎选择某一种具体的字体，更设计如何使用、粗细调节、比例调节等，目的是增加界面的可读性，从而增强产品的实用性。谷歌研发的这款文字类型生成工具为设计师提供了多样的选择和排版支持。通过这一款文字类型生成工具，可以节省时间，迅速生成段落、标题、正文、按钮等。
文章来源：人人都是产品经理 作者：Danny Sapio. 译者：Michiko
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：对于老一辈人来说，他们没有赶上互联网兴起的时候，等到想要主动“触网”时，才发现很多操作根本搞不清楚。尽管产品设计师已经极可能考虑到了老人群体的用户体验，但在实际操作中，老人家还是一头雾水。这时，操作越是简单的产品，越能够赢得他们的喜爱。本文作者从自身经验出发，对这类现象进行分析，与你分享。
上周某天吃完晚饭，我妈递过她的华为手机怯怯地问我：你有空吗？我想叫你帮我跟那个商家说换一个快递，我们家这边的百世快递的站撤了，叫他们不要用这个快递。
我脑海中闪过一个念头：嗯？最近我没有帮她付款啊。但随即也是接过她的手机打开了淘宝。我妈立刻阻止我：不是淘宝，是拼多多。随即自己打开了她微信里的拼多多小程序，演示给我她找不到商家客服。我跟她说，这个功能要用APP才行，于是帮她下载了拼多多APP并很快解决了问题。
弄完之后，我们又展开了这样的对话：
我妈：哎呀，这个拼多多真是太好了，物美价廉，超方便！你怎么不早教我用！
我：我自己都不怎么用拼多多啊！
我妈：这个是我的舞友上周教我的！我打开一看，哇，好多有用的东西，又便宜！第一天我就买了几百块的！
我：但是拼多多很多假货啊！
我妈：我又不像你们追求什么名牌！有什么假货可言？一条裙子30块！
我：……
我妈：而且！以前我在淘宝总要你帮我付款，现在我用拼多多自己用微信就可以支付了。
我：我早就叫你开个支付宝账号，你自己又不开！
我妈：那么麻烦，我不会，你又不教我！而且又要绑定银行卡，万一哪天我的钱被人家骗走，那些什么黑客……
我：哪有黑客黑你，你又不是马云……
我妈：还有，拼多多退货很方便！以前我在淘宝的时候，退货要你帮我搞，还要在家等快递上门，很不自由，现在我自己去菜鸟驿站退就得了。
我：好吧。
我妈：以后我就用拼多多，我那些舞友都在用！
我：你开心就好。
我回头想了想，这是一个以用户定位和产品特征为优势抢夺用户的典型场景。
首先看看以我妈为原型的粗略用户画像：
为什么我说拼多多是从用户定位和产品特征这两个维度抢夺走了我妈这样的淘宝用户的呢？
首先，我用的是“抢夺”这个词。
我并没有用挤占、分流这样的词。因为，在跟我妈的交谈里，我已经感受到她心里估计“从此淘宝一生黑”了。也确实，一个月以来我妈没有再叫我在淘宝付款过。所以，我想我妈大概率未来不会再用淘宝了，也就是说，淘宝直接流失掉了我妈这个用户。
其次，来看看用户定位。
根据上面我列出的以我妈为原型的用户，多吗？我简单查了一下。
根据国家统计局官网上发布的《中华人民共和国2019年国民经济和社会发展统计公报》，60周岁以上的人口约有2.5亿人，60-65周岁的人口约有83250000人，分别占人口总数的18.1%和6%；根据中国互联网信息中心官网发布的《第46次<中国互联网络发展状况统计报告>》，截止2020年6月，我国手机网民用户规模达9.4亿。
那么，根据这个比例可以推算，这样的用户大约在5千万—1亿的规模。
这么大的一个用户群体，实际上是淘宝自己放弃掉的。自从前几年淘宝打假货的行动和品牌化（力推天猫）的战略执行以来，实际上大量的县城以下、60岁以上的用户都被淘宝放弃掉了。
以我妈为原型的这批用户，他们大多数没有支付宝账号，但在微信上有钱，但除了平时发发红包，菜市场便利店买点东西，基本上还是没有用出去。于是，这批用户沉淀在微信钱包里的海量的钱，很难直接转化到淘宝上。
另外一个关键的地方在于，他们对淘宝是有怨言的，但在拼多多出来之前，没有替代物。某种程度上来说，对用户而言，忠诚度是很虚无的。真正对品牌有感情而产生“忠诚”的用户极少极少，品牌还是得需要不断优化产品，满足用户的需求。
品牌也好，产品也好，本质上是为用户提供价值，而不是要跟用户“谈恋爱”。
这是很多品牌的一个误区。没有在自身的产品上下功夫，去了解用户瞬息万变的需求，而去打“情怀”，讲“文化”。所以，我们可以看到当某些品牌醉心于自己的“情怀和文化”之时，其竞争对手在了解用户需求和优化产品而推出竞品后，瞬间打垮行业老大哥的案例。
最后来讲讲产品特征。
我妈使用淘宝的流程是怎么样的呢？
挑选商品——下订单——点击“找人付款”——发送需支付的订单到我的淘宝账号——退出淘宝——打开微信——告诉我发了一个订单——发红包给我——我看到微信或淘宝信息——点击需支付的订单——支付——退出淘宝——打开微信收红包。
而她使用拼多多呢？
挑选商品——下订单——支付。
当我列出这两个产品使用流程之后，我猜如果你是我妈，你也会用拼多多了。
在我妈跟我的对话里，还突出强调了“退货难”这个点。实际上是淘宝的物流服务不好吗？并不是。我一直觉得淘宝的物流虽然不如京东，但并不差，而且也不断在优化升级。但为什么我妈还是觉得不好呢？这一点不能单纯地从物流本身来看，而得回到淘宝的产品来看。
在淘宝上，推出了一个功能，叫“找人付款”。当时我觉得这个功能很好，解决了我帮我妈买单时，她要跳出淘宝从微信给我发链接的麻烦。但最终却带来了一个重要的弊端：当要退换货时，我这边无法执行，她那边又不知道如何操作。
而当我从PC端登上我妈的淘宝账号之后，PC端的退换货服务非常麻烦和繁琐，让我都研究了差不多一个小时才解决。而最后，我妈那边又无法支付退货费用，我在PC端也支付不了，也不能“找人付款”。总之，整个过程极其麻烦。虽然淘宝也意识到了产品上的缺陷，但目前的情况而言，这样的产品还是对于我妈这样的用户非常不友好。
而拼多多呢？它基于微信这个社交生态圈。加上没有什么太多余的功能，我妈很快就能上手了，自己操作还是比别人代操作方便多了。
谈到这里，我还意识到一个重要的问题。
从产品对人际关系的影响而言，淘宝是负向的，而拼多多是正向的。从某种程度上而言，60岁以上的这代人，是被互联网抛弃了，所以当他们想搭上这波潮流时，不得不面对自己的儿女，需要向他们请教，怎么用怎么学。这一点首先就会让不少子女心烦，不少父母自卑。
再进一步，如果每次父母网购都得“捆绑”上子女时，对人际关系是正向的吗？而在拼多多上购物时，他们不仅可以大大优化自己的产品使用流程，还能跟自己的老朋友们一起拼单，互惠互利，这对人际关系的影响有很大的正向作用。
你有什么被别的产品抢走的故事吗？
一点个人小想法，想到哪写到哪。
如果你有不同的意见和想法，欢迎评论或留言。
文章来源：人人都是产品经理 作者：@源记物语
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Apple 致力于让每件产品都赏心悦目，与其说官网是产品展示平台，倒不如说它是苹果产品分支的延续。从 Apple.com 找设计灵感是每一位设计师都做过的事，那它到底有何魅力？文章对Apple的网页设计展开了梳理分析，与大家分享。
每当有新产品发布时，我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段时间发布的 iPad Pro 也一样。
这背后是 Apple 基于 webGL 技术，创造的一种沉浸与交互式产品体验。
我们在产品介绍页可以看到，苹果使用了大量的滚动 scroll 来体现连续性。
一方面，滚动作为大多数 Web 用户最自然的操作，学习成本极低。
另一方面，在冗长的页面下，滚动能让产品特性保持更自然的转场衔接。
iPad Pro 的连续性
另外，采用了大量的动画式转换（animated transition），即操作时展示的动态效果，以此来增加趣味性。
伴随着丰富的、若隐显现的章节文案，就像电影的旁白一样，娓娓道来。
通过滚动的方式增加交互性，这是明智之举。试想一下，如果只放置已渲染的演示视频，那么用户的操作会受到限制，只能在视频中前进或后退，毫无乐趣可言。
AirPods的趣味性
说到言之有序，我们看 iPad 的页面介绍。四款产品，分别是：iPad Pro、iPad Air、iPad、iPad mini。
拍摄角度的秩序感，可谓妙不可言。
iPad的秩序感
如此一来，即显得有序，也不会导致视觉疲劳。
其次，官网与 iOS 保持协同的设计语言，给用户呈现了一致的感官体验。
从 iOS 11 开始，苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合，转向的 Medium + Bold ，以此增强信息传播中的识别力。
HomePod
另外，高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。
第三是视差带来的层次感。
苹果奉行包豪斯的无装饰和极简的理念。当然，它不是那种附庸的美观及外表的光鲜，而是将复杂难懂的技术以简洁的形式传达给用户。
Mac Pro 视差滚动
在信息层次方面，Apple 的编排设计由浅入深，犹如抽丝剥茧。很好的利用了视差滚动，传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。
不仅如此，样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉，呈现刺激与震撼。举两个例子：
A13芯片的扩张力
扩张力：整个画面以 A13芯片 为视觉中心点，元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导，视觉张力就出现了，让人感觉巍峨壮观。
Pro级摄像头的排斥力
排斥力：通过元素的大小对比，可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写，传达空间意识。视觉上被其构图、美感触动。
再聊聊苹果的高级感是怎么来的？
我们都知道，高饱和度的色彩，会影响人的情绪波动。相反，低饱和度的配色，对人眼的刺激较弱，会有一种冷静且克制的高级感。
iMac Pro 高级感
回过头来看苹果官网的大部分页面，除了产品界面色彩 和 按钮蓝 之外，其他的文字、背景、控件一律采用黑白灰色系，以此营造高级感。
甚至是 iPhone 11 Pro 新出的暗夜绿，也是高级灰中加了一点点绿而已。
换言之，减少使用颜色的数量，降低色彩的饱和度都能削减色彩对人的情绪，起到提升产品高级感的效果。
iPad 留白
除此之外，恰当的留白可以更加突出产品内容，让重要的信息更准确的传达。并且能营造出广阔的空间感，让画面得到延伸，呈现一种意境美。
所以我们做设计时应当多做减法，避免无意义的视觉元素堆砌，反而能让你的设计更有高级的气质。
这又印证了现代主义建筑大师密斯·凡德罗的那句话：Less Is More。
当然，只有留白是不够的。既然是做宣传，那么一份高分辨率、精致的配图就显得尤为重要。
苹果官网大部分的产品都是采用实拍+后期修图，而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果，这一点能看到苹果对于品质的追求。
Designed by Apple in California
不仅如此，苹果产品圣经《Designed by Apple in California》，以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频，相当硬核。
做过英文 Web 的设计师都知道，英文往往比中文更好设计，相同的布局英文出来的效果也更好看。
这不是崇洋媚外，心理学有个词叫做「母语羞涩」。简单来说就是，中文对于我们来说，太常见了会让人产生一种廉价感（实际上是羞涩感）的心理感受。
老外也一样，你可以看到美国企业：苹果、麦当劳、星巴克都是使用图形 Logo，而日本企业不用母语，而是用英文，比如 SONY、TOYOTA、Canon。
你的下一台电脑，何必是电脑。
回到苹果官网，我们看到一部分文案是英文产品名称，这个不会感觉羞涩。
那中文部分怎么办呢？比较有意思的是，Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差，但基本上能明白字面意思。
其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格，来凸品牌气质。举几个例子：
最后一点。生活要有仪式感，苹果官网也有仪式感。
国际妇女节专题
在一些特殊的日子里，例如三八节当天，友商选择打广告促销。而苹果推出了国际妇女节专题，致敬女性的伟大，这一做法颇具人文情怀。
不过话又说回来，感动归感动，还是参与友商的打折活动香。
文章来源：人人都是产品经理 作者：阿洋
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
目前基于用户画像的标签体系在各行各业开始得到应用，对于涉及范围广，专业知识深的互联网招聘领域来说，建立标签体系的难点是什么呢？应该如何建立标签体系？怎么验证标签体系的准确性？文章对这三个问题展开了分析探讨，与大家分享。
电商行业客观来说属于比较简单的toC领域，知识网络是比较容易理解的通用知识，可通过用户的购买习惯、偏好、商品品类等建立标签体系。医疗行业属于专业性强的领域，建立标签体系必须要懂医疗技术的专家团队才可以，但是易于操作的是，只需要医疗一个领域专家就可以完成专业的标签体系建设。
但对于招聘行业来说，行业、职位涉及范围广，且专业性强，因为各行各业的公司和求职者都会通过招聘平台建立联系，而且有很多高精专的职位和候选人，怎么评估B/C端之间专业技能、工种、行业之间的匹配度，确是一大难点，而且理论上来说需要集齐各个行业、各种职位的专家人员才能建立起招聘行业的标签体系，但这在现实中要怎么操作呢？
那么机器是否可以自动完成招聘领域的标签体系建设呢？用NLP抽取职位JD中的描述并将其聚类，比如抽取Java、spring、Unix、Visio、Excel等工具技能，原型设计、交互设计、需求分析等工作内容技能，用户运营、产品运营、数据运营等工作方向技能，这是互联网从业者最熟悉的开发、产品、运营的工作内容和技能，如果机器可以识别这些类别标签就很完美了。
但现实却是看似的完美与和谐，万一Java是出现在了招聘专员的职位描述中呢？用户写的是“负责招聘Java工程师”，假如Visio出现在Java工程师的描述中呢？假如Excel出现在运营专员的职位描述中呢？这些技能还是不是这个岗位的核心能力？
首先，Java出现在招聘专员出其实是可以用硬规则过滤掉的，比如限制职位和技能的关系，也就是说不是所有技能都满足所有职位，有的技能只适用于某些职位，在其他职位内就是无效信息。
其次，需求分析是不是产品经理的技能标签呢？有的人说肯定是了，这个回答可以说对也可以说不对，对是因为需求分析确实是产品的必备能力和工作内容，不对是因为所有的产品经理都需要需求分析，那这个能力还是该产品经理区别于其他产品经理的能力吗？
最后Excel会出现在运营专员内、也会出现在招聘专员内，也会出现在统计专员内，那么它还是个核心的技能标签吗？
通过以上分析可得到以下归纳性的总结：
所以通过以上分析可知，纯NLP机器识别的方式不能完成招聘领域的标签体系建设，因为机器没办法在一个岗位的众多技能中筛选出哪些是重要的知识技能，哪些是不重要的知识技能。
招聘领域的标签大家首先可以想到的就是学历、工作年限、薪资范围等比较通用的职位/简历端匹配维度，当然这些显性通用的标签早已被各招聘平台做成了结构化的筛选项。
其次还有一些比较小众的维度要求，比如有的职位要求海外经历、党员、国企工作经历、籍贯、年龄等，有些平台也把其中的某些维度做成了平台上的结构化标签。
不过这些不是我们研究的重点，我们主要研究的是每个职位专业的知识方向的技能。
建立专业知识标签体系的重点就是建立专业的岗位研究专家团队，想要做某个岗位的专业知识标签研究，肯定需要熟悉该岗位的人员，是选择从事该岗位工作的人员呢，还是对这类岗位有所了解的HR人员呢？
因此就这两类人员进行了调研与分析，最终发现从事该岗位的人虽然对所从事的岗位了解比较深入，但对其他相关的岗位未必了解，也不太了解招聘过程中用户的感知与思维；
HR人员虽然在专业深度上对岗位的了解不是很深入，但所了解的岗位范围广，只要从事过某个行业的HR工作，基本都熟悉该行业所有的岗位与关注的重点技能，且HR经常使用招聘平台，有用户感知，对用户行为与逻辑都非常了解，所以HR更适合做岗位专业知识研究，而且该专家团队最好是来自各个不同行业的HR人员。
团队建好了，大概的研究思路也有了，接下来就可以好好研究标签体系具体的生产流程与规则了，对此进行了如下图的总结：
体系建立的目的肯定是运用在算法的推荐与搜索中，初期可以通过离线的漏斗数据转化对比（命中标签与未命中标签的转化对比）来验证该标签体系的离线匹配效果，再者可通过灰度实验，小流量上线实验来验证实际线上的匹配效果。
专业知识标签关注的只是匹配度的准，最终线上使用肯定还要考虑用户是否活跃，B端HR是否着急要人，C端求职者是否在找工作，如何平衡专业知识的准与用户行为的活之间的权重也一大难点，要找到那个准与活平衡的比例区间，在这个区间内线上能实现最大的用户达成，这方面在此不多做分析，需要算法同学多次调整模型才能达成。
基于用户行为的用户画像标签体系在电商领域中运用广泛，在招聘领域此类标签体系同样适用，只不过电商领域中的“查看-联系卖家-购买”行为在招聘领域变成了“查看-开聊-达成约面”行为。
电商平台中的协同过滤理论在招聘平台也同样适用，只是变成了基于相似职位的过滤和基于相似候选人的过滤。有的企业以往达成的多数是名校候选人，那么我们就知道该企业偏好有名校教育经历的；有的企业招聘销售岗更倾向于在专业知识体系中的有软件销售经验的候选人，那么我们就知道该企业偏好软件行业的销售候选人。
通过用户画像体系我们可以评估用户的偏好，以期在该用户以后的推荐中使用其偏好，达到更好的效果。
静态通用标签是所有职类共用的标签特征，属于大批量标准化的生产与运营，通用标签生产完善了，可以实现粗矿式大步快跑节奏的匹配达成；
而专业知识标签是每类职位专业的标签特征，是小批量精细化的生产与运营，在前面大步快跑达到一定匹配度之后，再结合精细化的小步快跑方式，逐步将每个职类的颗粒度划分为更精细化的颗粒度，达到更高匹配程度；
在前面标准化、精细化两轮分类之后数据已经被分成了一个个小类，但却没有衡量单个用户偏好的特征标签，而动态的用户行为标签就是单个用户个性化的偏好特征标签，用户的偏好有可能是通用的学历、年限特征，也可能是专业知识中某个技术框架、某种产品品类特征。
最终，静态标准化通用标签、专业知识精细化标签、动态行为个性化偏好标签，三者相互作用、相辅相成，提升招聘领域线上效果的匹配准确度。
文章来源：人人都是产品经理 作者：艳杰
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在如今大数据的时代，一些软件会根据我们的地理位置、性别、喜好等等进行算法推荐；能够对一定规范的输入，在有限时间内获得所要求的输出；比如TikTok，以用户为中心进行推荐，度很高；本文作者分析了TikTok 的真正优势，我们一起来看一下。
字节跳动往往被说成是一家算法公司，很多人认为， TikTok是靠算法的黑科技才取得成功的。
事实真的是这样吗？
eugenewei认为不是：TikTok的算法跟其他公司使用的并没有太大的不同；TikTok最大的优势是它采取了对算法友好的设计模式，在自己内部建立了一个飞轮，帮助其机器学习算法看到了优化自己所需要看到的东西。
原文发表在其个人博客上，标题是：Seeing Like an Algorithm；篇幅关系，我们分两部分刊出，此为上半部分。
划重点：
在我上一篇关于TikTok的文章中，我讨论了为什么它的For You Page算法是让TikTok发挥作用的结缔组织；它就是主板的总线，用来连接和关闭所有的反馈回路。
但是，在急于了解为什么各家公司都想收购TikTok的情况下，如果字节跳动把这款热门的短视频app拆分出来的话，围绕着它的算法的炒作已经有点被异化成那种往往被归纳为最近西方对中国科技分析的套路了。
在这篇文章中，我想讨论一下TikTok的设计究竟是如何帮助它的算法表现得跟它一样好的。
上次我讨论了为什么FYP（For You Page）算法是TikTok飞轮的核心，但是如果这一算法不够有效的话，那整个反馈回路就会崩溃；哪怕你对TikTok或短视频领域不感兴趣，了解一下这个算法是如何实现性也很重要，因为各行各业的公司都日益面临着核心优势是机器学习算法的竞争对手的竞争。
我想讨论的是TikTok的设计是如何帮助它的算法“看”东西的。
James C. Scott的《国家的视角》（Seeing Like a State）是那种很独特的书，看过之后你会意识到硅谷就有那种使用（滥用）清晰性这个术语的类型。
我是在看到Venkatesh Rao的书摘之后第一次听说这本书的，如果你不打算看原著的话，那篇书摘仍然是很好的tldr入门读物（Scott Alexander的书评也不错，只不过他的书评也已经长到可以做自己的tldr ）；不过，我建议你还是要好好看看原著。
Scott那本书的副标题是“那些试图改善人类状况的项目是如何失败的”。
这本书可以提高你对日常生活当中的各种意外后果的意识，当我们也有着伟人一般的傲慢时，不妨保持更谦卑的态度；这个世界比我们想象的要更丰富、更复杂。
比方说，Scott的讨论有很多都跟我们的现代社交网络巨头的某种傲慢感有关；这些占主导地位的应用的目的就是要提高自身用户群的清晰性，其中包括促进互动、防止用户流失并最终提供定向广告；反过来，这又导致他们的母公司陷入到错综复杂的问题之中，至今都未能摆脱困境。
不过这是需要另行讨论的话题了；Scott关注的是民族国家如何用简化的抽象在概要的层面 “看清”自己的公民，而我想讨论的是TikTok的app设计是如何让它的算法“看到”有效地执行匹配工作所需的所有细节的——这篇文章讨论的则是是应用和服务在设计时最大限度利用机器学习新模式。（我知道，这种讨论有点讽刺意味，因为这种“看法”有可能被塑造为另一种决定用户看法的看法，一种美国的科技公司只能作壁上观的看法。）
近年来，至少在像我这样的门外汉看来，我们意识到，只需要通过把训练的数据量增加几个数量级，机器学习就可以取得很大程度的进步；也就是说，就算算法本身跟几年前没有太大的不同，仅通过在更大的数据集上对其进行训练，人工智能研究人员就能取得像GPT-3这样的突破（GPT-3暂时给科技Twitter们带来了高潮） 。
当大家说TikTok的算法是取得成功的关键时，很多人会把某些神奇的代码段看作是公该司的秘密武器。
俄罗斯当代后现代主义作家Viktor Pelevin说，所有的现代电影都是同一个主角：一个装满钱的公文包；从《死吻》的放射性物质公文包，到《低俗小说》里面的那个类似的里面金光闪闪的、不知道装着什么的公文包；从《魔头对捕头》（The Formula）的创世纪方程，到大卫·马梅特（David Mamet）的《西班牙囚犯》（The Spanish Prisoner）里面的秘密的金融处理，我们长期以来一直对有魔力的麦格芬（McGuffin，推动情节发展的对象或事件）感到痴迷。
最近几周，对TikTok算法的讨论已经把它提升成了类似的东西，这个算法就好像是《夺宝奇兵》系列电影（如《法柜奇兵》、《圣战奇兵》…）里面那些神秘的考古文物一样。
但是这个领域大多数的专家的态度不会是这样，他们不相信TikTok在机器学习推荐算法方面取得了迄今为止我们所不知道的进步；实际上，大多数人会说，TikTok的做法大概跟别人的解决问题方法无异。
但是要记住的是，机器学习算法的有效性不仅仅取决于算法，还要取决于利用某些数据集训练过后的算法；GPT-3也许并没有什么新鲜，但是通过接受大规模的数据训练，以及设置大量的参数，其输出往往令人惊讶。
同样地，基于自身数据集训练过的TikTok FYP算法，在将视频与认为该视频有趣的人进行匹配方面非常准确有效（而且，同样重要的是，在不向那些不认为视频有趣的人推送方面也很有效） 。
有些领域，比方说文本，可以轻松获得大量训练得很好的数据；比方说，要想训练出像GPT-3这样的AI模型，你可以到互联网、书籍等上面找到大量可用的文本集；如果你想训练视觉AI，可以在网上和各种数据库里面找到大量照片；训练仍然很费钱，但是至少你手头有足够的训练数据。
但对于TikTok （或者抖音）来说，它那擅长推荐短视频给受众的算法可就没有公开可用的这么大规模的训练数据集了。
去哪里可以找到模因、小孩跳舞、对口型、可爱的宠物、推销品牌的网红、士兵越障训练、小孩模仿品牌等内容的短视频呢？就算你有这样的视频，又该去哪里找到关于大众对此类视频感受的可比数据呢？除了Musical.ly的数据集以外（主要是美国喜欢玩对口型的青少年），这样的数据并不存在。
这是一个独特的鸡生蛋还是蛋生鸡的问题，如果没有这款app的的摄像头工具和滤镜，以及拿到版权的音乐剪辑的话，TikTok的算法需要训练的那种视频就很难创建。
那么，这就是TikTok设计的魔力所在：app会激发和促进视频的创作与浏览，算法然后用这些视频进行训练，再反过来激发和促进视频的创作与浏览，形成反馈回环。
为了让自己的算法发挥最大的效用，TikTok成为了自己的训练数据源。
要了解TikTok是如何做出这么强大的学习飞轮，我们需要对它的设计进行深入研究。
关于科技的UI设计，主导的思想流派（至少是我成长的过去二十年里）关注的重点是消除用户所做事情的摩擦，并让他们在此过程中感到愉悦；其设计目标是优雅，什么是优雅：优雅就是直观、巧妙，甚至时尚。
也许没有一家公司比苹果把这种设计风格体现得更加淋漓尽致，巅峰状态下的苹果总能把自己的软硬件做出优雅的感觉——“就是这么好用（it just works）”，但同时又很迷人，让用户觉得很雅致。
（苹果控制风格的名声就没那么光彩了——手机、笔记本电脑不可替换的电池，目前有关应用商店规则的争论）在发布新品的主旨演讲时，展示一块硬邦邦的铝块是如何变成崭新的MacBook Pro机身的视频的理由是什么？
因为听到工业激光把那块铝雕刻成一体化机身时发生的声音很性感？然后，当你在咖啡店用那台笔记本电脑敲击一封电子邮件时，在你的潜意识里，有关那段视频的一点残留的记忆里面会不会让你的多巴胺受到一点点的触动？
这种以用户为中心的设计模式在这么长时间以来一直占据着主导地位是有原因的，尤其是在消费类技术里面。
首先，这的确有用——苹果的市值最终超过了2万亿美元（还记得假冒的Sean Parker说过十亿美元很酷吗？那还是十年前，现在十亿美元不再是金牛了，财富的量级在飞速发展。）
此外，我们生活在大规模网络效应时代，应用了Ben Thompson的聚合理论并获得大量用户群的科技巨头，可以在他们所参与的市场当中发挥出不可思议的杠杆作用——要先做到这一点，最佳的办法之一就是设计出能比竞争对手更好地满足用户需求的产品和服务。
长期以来，这种设计流派一直占据着主导地位，以至于我几乎忘记了过去时代惯常采用过的一些蛮不讲理的软件设计了。（不要把它跟野兽派设计混为一谈，后者其实就像它在建筑方面的表亲一样，在设计上是相当美的。）
但是，如果要想最大限度地服务好用户的关键要取决于对机器学习算法的训练呢？如果这个ML算法需要庞大的训练数据集该怎么办？在机器学习方兴未艾的时代，这日益成为关键的设计目标。
在考虑如何设计app时，你日益必须考虑怎么才能最好地帮助算法去“看”——为了最大限度地服务好用户，请先服务好你的算法。
TikTok让我着迷，因为不管是意外还是有意而为之，这都是一个为了尽可能多地给自己的算法提供有用信号的现代app的典范——这就是我所谓的算法友好型设计的范本。（我曾经想过把它叫做以算法为中心的设计，但觉得这种说法有点过头了；一个帮助算法看见东西的设计到头来仍然是为了给用户提供尽可能好的体验。）
我们仍然可以认为这只是以用户为中心的设计的一种变体，但是对于那些大量采用机器学习算法组件进行产品开发的团队来说，明确地承认这一点也许有用；毕竟，当产品经理，设计师和工程师开会讨论app设计时，算法是不会出席的；但是，对算法的训练需求必须得到体现。
James Scott在谈到《国家的视角》，谈到了城市设计等领域的巨大变化，比如让土地面积和业主数量对征税者“清晰可见”；TikTok的设计使得它的视频、用户和用户首选项对For You Page算法清晰可见；这种app设计履行了它的主要职责之一：“像算法一样看东西”。
我们不妨仔细看看，TikTok打开后就是“For You Page”页面，然后直接进入视频。这就是它的样子。
这个是到目前为止有史以来最热门的TikTok视频，截止到我发布这篇文章时，它的34.1M个点赞可能已经不止了；你可以看看有关这条TikTok是如何诞生的故事，看过之后你仍然会觉得这是一个充满悖论的文化难题，但是你看过后会喜欢的。
我把这个给我侄女看了，然后我们一起循环播放了好几十次，然后我们一起开始大喊“从M到B，从M到B”，然后一起笑了起来，这是我在这场疫情当中真正的感受不是绝望的少数几次之一。
整个屏幕被一个视频填满。只有一个视频，视频用竖屏全屏显示；注意，这是不能滚动的，而是分页。视频几乎是立即自动播放（接下来的几个视频被加载到后台，所以轮到的时候可以很快播放出来）。
这种设计让用户要面对一个紧迫的问题：你对这个短视频的感觉如何？就这个短视频。
从视频开始播放到现在，你所做的一切都是你对该视频的感受的信号；你是不是在它还没播放完就滑向了下一个视频？是的话就隐含（尽管边界是显性的）表示你对它不感兴趣。
你是不是看了不止一次，让它循环播放了好几次？似乎不知怎的它就吸引了你。你有没有通过内置的分享面板分享了这段视频？这是正面情绪的另一个有力指标。
如果你点击右下角旋转的LP图标，看了更多有着同样背景音乐的视频的话，就是该视频对你胃口的进一步信号；音乐线索往往是模因的代名词，现在TikTok又有了一条为你推荐视频的轴线了。
还有，你是不是跑去看了看视频创作者的个人资料页面？你是不是看过她其他的视频，然后还关注了对方？是的话说明你除了欣赏视频以外，也许你还特别欣赏对方这个人。
但是，我们不妨再退后一步，看看这你还没有看到这个视频之前，TikTok的算法自己是怎么“看见”这个视频的；在这个视频通过FYP算法发送到你的手机之前，TikTok的运营团队有人已经看了这个视频，并添加了大量相关标签或标记。
这个视频是跟跳舞有关的吗？是对口型？还是视频游戏？有小猫吗？还是花栗鼠？是搞笑的吗？主体是男的还是女的？大概几岁？是群视频吗？背景在哪里？用的是什么滤镜或视觉效果？如果里面包括有食物，是什么食物？等等，所有这些标签都成为了算法现在可以看到的功能。
视频还要在视觉AI这里处理一下，并为自己能看到的东西做出贡献；TikTok有些摄像头滤镜能够跟踪人脸、手或者手势，所以视觉AI往往在视频被创建出来之前就被调用过了。
这个算法还可以看到TikTok所了解到的有关你的信息，你过去喜欢什么类型的视频？有关你的人口统计学信息或心理学信息有哪些？你是在哪里看这个视频的？你用的是什么类型的设备？等等，除此之外，还有哪些其他用户跟你相似？
一、《国家的视角》 Vs 算法的视角
二、TikTok把自己变成算法的训练源
三、以用户中心 Vs 对算法友好
文章来源：人人都是产品经理 作者：纸盒小卡车
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在做交互设计或者视觉设计时要遵循一些既有的原则，其中非常重要的一条就是【格式塔定律】
一、什么是格式塔原理？
格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt，因此这些理论也称做视觉感知的格式塔原理。
格式塔学派主张人脑的运作原理属于整体论，“整体不同于其部件的总和”。例如，我们对一朵花的感知，并非纯粹单单从对花的形状、颜色、大小等感官资讯而来，还包括我们对花过去的经验和印象，加起来才是我们对一朵花的感知。
格式塔心理学家认为这些原则之所以存在，是因为头脑具有天生的倾向，可以根据某些规则感知刺激中的模式。（是不是觉得hin神奇）
比如，这是著名的“人脸花瓶幻觉”图。如果以黑色为背景，白色为图形，则是一个花瓶；如果以黑色为图形，白色为背景，则是两个人的侧脸。它也反映了图形和背景对一幅图的影响。
二、什么是格式塔原理？
使用不同数量的空格来合并或分离元素是传达有意义的分组的关键。例如，在Ant Design的标题区域中，“ 搜索”功能与站点的主要导航位于同一行。但是，主导航和搜索之间的多余空格表示它们属于不同的组，因此具有独特的功能。对于使“ 搜索”功能在主菜单的其余部分中脱颖而出，此空格至关重要。
但是，在较小的屏幕上，无法保持此间距。为了避免将这些区域视为一个整体，页面收缩宽度的时候，搜索后的文字隐藏了。
应具有固定或锁头标题的网站特别可以从使用独特的背景颜色或清晰的边框中受益，从而有效地将标题与下面滚动的页面内容区分开。此外，大页脚的单一统一背景色 可有效地表示该区域中的所有链接都属于一个组。
创建清晰的边界是一种强大的视觉提示，可以压倒其他分组原则，例如接近性或相似性。因此，当需要包含几种不同类型的UI元素或无法调整对象之间的空白量时，它是一种强大的工具。我们做页面时如果需要把两个元素放成一组与其他元素区分，那么我们可以用线框画出边界来达到目的。
如果其它因素相同，那么相似的物体看起来归属于一组。接下来从形状、颜色、尺寸上来说明相似性原理，这也就是我们平时做视觉设计时的原理，比如我们设计稿宣讲时可能会被开发、产品以及测试同学问到“为什么用这个形状？为什么这里用这个颜色？为什么这两个尺寸不一致？等等，细细体会这个相似性原理就会给我们答案，让我们在画设计稿时能够有理有据。
在上图中，我们头脑中自然而然的会分成“四列”，也就是圆形一列，三角形一列，然后再圆形一列，三角形一列，而不会看成“三行”
应用共享的颜色来表示某些项目是相关的，因此可能具有相似的功能，这很有效。通用颜色往往比其他特征（例如形状）更加突出，因此可以用于组合不同类型的元素并传达它们确实相关。
在用户界面设计中，颜色通常用于指示常用功能。例如，使用单个链接颜色作为与用户交流可点击内容，链接颜色应仅保留给交互式文本和其他可单击元素，因为用户会意识到所有具有此特征的项目都是相关的，并且以相同的方式工作。因此，链接颜色不应用于关键字，不可点击的标题或实际上不可点击的附近图标。
如上图，就是一个用色的反面例子，“ 消息中心”中的所有按钮均为绿色，因此用户必须花时间确定哪个是提交表单的主要按钮。（此外，“ 提交”按钮离消息区域很远，并且根据Fitts的定律，这种缺乏接近性也会降低用户的速 度。）
相同颜色的按钮将被视为具有相同的重要性级别。因此，应为主要操作性按钮保留单独的颜色，以帮助它们在辅助按钮中脱颖而出。
在用户界面中，我们经常使用大小来强调内容或按钮中最重要的部分。相同的大小表示相同的视觉突出度，并且在所有其他条件相同的情况下，将共享该属性的所有元素连接在一起。一致地使用大小会创建视觉层次结构，并使页面易于扫描，因为人们可以立即看到并理解这些类型分组。
例如，在产品列表页面中，每个单独的产品列表都以相同的大小（和相同的形状）显示。这种一致的视觉样式告诉我们该区域中的所有物品都是产品。共享大小将其与其他不同的UI元素分开。当某项商品在此列表中以不同的大小或形状出现时，就会突出显示为不属于产品分组。下面这个产品集合的促销以单个产品列表大小的两倍显示。
下面是我最开始尝试的招聘系统首页的改版：
根据上面的相似性原理和接近性原理就可以很容易看出来，这个页面结构和逻辑不清晰：
1.待处理和招聘日程两个模块之间的区分不够清晰：因为这两个模块右侧应用了同样的形状和颜色的按钮（相似性原理），让用户在心理上产生联想，同时这两个模块之间只靠间距来区分，区分的太弱了（接近性原理）
2.招聘日程头部日期与下面的面试安排卡片联系太弱：因为面试卡片用了非常强的边界区分的线条（接近性原理-构建清晰的结构）确实在面试模块之间构建了清晰的结构，与此同时卡片与头部的日期之间看起来没有什么关联。
3.首页的选中效果太弱，分析这个页面的层级，左侧首页选中才应该是最重的，能让用户第一眼就知道在系统中的位置，很显然目前来看很容易忽视首页这个位置，关注点被吸引到了快捷入口。这并不是我们想要传达给用户的。
根据格式塔原理中的相似性原理和接近性原理，对页面的结构进行了调整，就看起来清晰多了。
所以，我们在制作完设计稿后，可以应用格式塔原理，分析下最终呈现给用户的结构和逻辑是否清晰。而这也是做视觉的理由和底气。
视觉倾向于感知连续的形式而不是离散的碎片。
连续理解起来是很简单的，但连续却解决了非常复杂的问题。通过找到非常微小的共性将两个不同的环连接成一个整体。在引导页中经常会用到这个。
视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。
闭合可以实现统一整体，这不难理解。但是有一个非常有趣的现象值得我们去观察和思考，就是不闭合时候也会实现统一的整体，更确切的说，这种现象是一种不完全的关闭。这些图形与设计给人以简单，轻松、自由的感觉。所以，完全的闭合是没有必要的。最著名的应用便是苹果公司的logo，咬掉的缺口唤起人们的好奇、疑问，给人巨大想象空间。
我们倾向于分解复杂的场景来降低复杂度。
我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素，其余则是背景。这个原理经常会在海报设计中应用，这也是为什么我们做海报，做平面时，一定要制作好背景，背景的氛围很重要。
文章来源：站酷 作者：ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为人类，我们无法总是理性地看到事物的本质。社会心理学告知我们，人类的感知与决策，在一定程度上，会带有偏差。而作为设计师，我们可以主动利用这些偏差，设计更好的产品。
本文介绍了三条曲线，它们都将认知偏差做了可视化的表达，前两个来自日常收集整理，后面一个由笔者总结工作经验得出，下面开始吧。
1984 年，经济学家 Mazur 提出模型：我们的大脑难以处理冗长的信息，因为不确定性随着信息的增加而增加。随着时间推移，我们对收益的感知下降。
决策中，我们倾向于把长期的权重调低：无论是收益还是成本，只要时间够长，我们都倾向认为它不够重要。
举例来看：各大银行如何吸引潜在用户办理信用卡？可以承诺在后期，提供专业的优质服务与购物优惠，也可以信用卡办理完成的当下，让用户领取诸如行李箱、厨具套装之类的礼品。虽然两种方式都有可能吸引来用户，但原本办卡意愿相对低的用户，大部分是被当下的礼品所吸引。换言之，这部分用户是「额外的」。
各大互联网产品都深谙此道，比如购买会员的页面，首月打折/首月免费/一年后付费都是惯用的手法，就在当下，给用户利益，促进转化。
技巧总结：比起稍后的利益，我们更倾向当下给用户一些甜头，哪怕甜头很小。
峰终定律由诺贝尔奖得主 DanielKahneman 提出：人们对于一段体验的评价，取决于这段时间内最好的体验，与结尾的体验。我们的大脑最擅长「以偏概全」，它不会无差别收录所有内容，只会去记录离自己最近、让自己印象最深的点。
宜家是峰终定律最好的践行者。顾客的购物流程中，差强人意的体验不在少数。比如店员很少，难以及时获得帮助，比如购物路线很长，对于有明确购物目的的顾客不太友好，比如永远要排的结账长队等等。
但是宜家把握了它的「峰&终」。「峰」是过程中的小惊喜，比如随时可以坐下体验的沙发躺椅，比如偶尔出现的极便宜的家居用品，比如贴心的铅笔与尺子；「终」就是结账出口外，抚平顾客排队焦躁的冰淇淋与热狗。
而这些产品宜家本可以提高售价，但却没有。因为用一个美味便宜的冰激淋结束购物之旅，糟糕体验被抛到脑后，人们回想起宜家时，会选择性地认为整个流程都非常棒。
游戏产品也非常善于遵循峰终定律让玩家玩得更尽兴。比如疫情之后大热的 Switch 健身环大冒险。
运动时，系统会一直强力夸夸为玩家打气，完成动作都会有及时的鼓励给到，创造一个接一个的体验「峰」值。每一次通过关卡，还会让玩家站直并高抬双手，将健身环举过头顶坚持几秒，画面里的「终」是非常有仪式感的 ending 动作，让玩家成就感满满。
技巧总结：在满足了用户的常规体验之后，用心打造一些带有巧思的设计，安排在流程的中间与结尾处，给用户创造峰值体验。这不仅有可能让普通用户转化转化成忠诚用户，还能极大提高产品满意度还能带来口碑效应。
租房产品中，用户在 APP 内挑选几套心仪的房源，再约房东/经纪人去实地看房，是很典型租房用户场景。我们发起「看房路线」这一功能的设计。使用看房路线，用户能够在选好x套房源后，根据智能规划的看房顺序与路线，辅以时间提示与导航，有条不紊地去实地看房，妥妥贴心功能。
我们大费周章产出了设计方案，上线后的效果，无论是使用频率与使用深度，都不理想。调研后发现，实地看房的场景，其实存在极大的不确定性。用户在看房中途，可能做出决策租赁某一套，也可能被经纪人带领去看别的房源，从而中断原本的计划。
用户是完全自由的，他们会寻求最熟悉、最好用、最稳妥的途径去解决自己的非娱乐性问题。至于导航，用户平时使用什么同类产品呢？高德地图、百度地图这类很成熟的地图类应用。
用户不会因为场景不在专业的地图APP内，就原谅打折扣的导航体验。用户预期远高于实际产品开发程度，这种认知偏差，需要产品人来买单。
总结这个功能的问题出现在哪里？其一，设计缺失，没有将线下流程的旁枝侧节考虑全面；其二，设计过度，但没有成本去满足用户的高阶需求。如何调整用户的预期到合理的区间，我们做设计时的「度」怎样把握，徒劳曲线应运而生。
横轴是设计投入程度，纵轴是用户满意度，随着设计投入程度的加大，用户的满意度呈递增态势，但到了一定程度，满意度会断崖式下跌至谷底，这个阶段的设计投入便是徒劳。当设计投入快到达极限时，满意度又陡然到了一个新的高度。
我们要将自己的设计置于一个合理的区间，并将用户的期望调整同步。当有足够成本支持（无论可观支持抑或主观争取）时，把握机会，为用户创造体验。
技巧总结：要引导用户在使用产品的时候，对功能有合理的预期——如果不能提供完善的服务，就用朴素的设计方案满足用户的基本诉求，而非好高骛远。在用户有更加合理选择的时候，给与用户便利，尊重用户的自由。这样不太功利的思考与设计，很可能带给你的产品带来更快的迭代，与更多的用户。
双曲贴现、峰终定理、徒劳曲线，三条曲线尝试将人们的思维偏差暴露出来，利用得当，事半功倍。希望能带给你一点启发。
文章来源：优设 作者：58UXD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
满足用户的懒是用户体验的本质，利用用户的懒是探索人性的设计！
用户有多懒？
人有七宗罪，其中就有懒惰，懒是人的天性，是刻在骨子里的基因。
现在互联网产品几乎都是在满足人的懒，买菜不用去超市、饿了可以叫外卖、不想看书读给你听、不想打字有语言功能等等，互联网的发展把人惯得越来越懒，也正因如此，才成就了许许多多的产品。
为用户多想一步，就是思考用户的行为目的是什么，然后在设计上为用户提供快捷的操作方式，这样就能提高产品的使用体验。
设计产品时不能总以自己惯有的思维方式去设计，要能把自己变成当下产品的用户，站在用户的角度去寻找答案解决问题。
我们从更高一个层面去思考这个问题，是哪些人创造了互联网盛世，又是哪些人推动了社会进步，绝对不是懒的学习、懒的改变自己的人，而是那些善于思考想要改变“懒”的人。
文章来源：站酷-吴星辰
蓝蓝设计( 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