情感化设计-贝壳找房 视觉自查
如果我最初问消费者他们想要什么，他们应该是会告诉我：“要一匹更快的马！”——亨利·福特
目录
1. 项目回顾
2. 情感化研究
2.1 情感化设计的由来
2.2 使用情感化设计的原因
3. 自查流程
3.1自查流程的意义
3.2 主视觉分析
3.3 icon
3.4 分页
3.5 标签
3.6 字体
3.7 行距
1.项目回顾
「买房」是人生大事，而「找房」起到决定性作用。
传统的找房主要依靠房产中介介绍、带看，过程费时费力，而对房产领域不熟悉的新人用户更是饱受「假房源」、「吃回扣」的苦；而贝壳的出现就是为了打通房源和用户的桥梁，让找房不再困难。
贝壳在2018年完成了从0到1的历程，但在移动端/web端都有许多的错漏和细节的不完善。从1到2的过程相对复杂，往往在立项之后会遇到一些项目之外/历史遗留问题——在修改响应式设计的过程中查看旧版网格系统设定，发现以早期链家网为模版的网格系统在设计时还没有到移动端设备爆发增长的年代（链家在2009年开始互联网化），因此没有考虑到众多尺寸的适配方案。改则费时费力，牵一发而动全身，不改则后续设计方案处处受限，所以干脆推翻重新设定网格系统。
《贝壳官网迭代计划——响应式布局》
https://www.zcool.com.cn/article/ZMTAwMDgxMg==.html；
《情感化设计-贝壳找房 产品体验优化》
https://www.zcool.com.cn/article/ZMTAyNjU0NA==.html
《贝壳找房—情感化设计—「看点」频道》
https://www.zcool.com.cn/article/ZOTcxNTEy.html
也以此为契机，优化产品的用户体验。虽然过程非常曲折，但顺藤摸瓜发现问题本质的那一瞬间是豁然开朗的，过程中也参考了许多优秀案例和大神分享核心技术，收获颇丰，过往一些模糊不清的概念随着论证得到了明确的解答，所以把整个思考和实践过程整理出来分享给大家。
2情感化研究
2.1情感化设计由来
概念是由唐纳·A·诺曼在《设计心理学3-情感化设计》一书中提出
情感化设计是旨在抓住用户注意力、诱发情绪反应，以提高执行特定行为的可能性的设计。通俗的讲，就是设计以某种方式去刺激用户，让其有情感上的波动。通过产品的功能、产品的某些操作行为或者产品本身的某种气质，产生情绪上的唤醒和认同，最终使用户对产品产生某种认知，在他心目中形成独特的定位。
2.2 使用情感化设计的原因
目前主流项目的优化流程是通过产品、交互、设计的讨论，将目标拆解、量化，然后调整整体架构、交互模式、视觉层级来正确引导用户完成既定目标。
但这样的用户研究方式太过理想化。
“事实上，理性行为在现实社会很少发生，人类的大部分行为都是非理性的，人类的消费行为往往会受到周围环境（时间、信息量、目标、兴趣、参照物、他人）影响，甚至有很多用户是通过分享链接直接进入某个产品页，而不是按照设想的从主页进入。”——《Don’t Make Me Think》
因此这次以「产品使用过程中的负面情绪」为准，判断产品目前存在的问题，并以减少或消除负面情绪为目标导向进行设计工作。
3.自查流程补充用户思维局限
3.1自查流程补充用户思维局限
用户访谈时很少会提及或描述产品视觉上的问题，当产品的视觉有小部分不合理情况出现时，用户只会感觉到“好像有点变化”、“看起来怪怪的”等没有明确指向的描述来反馈问题，或者有部分用户就干脆没有意识到有什么不好的。用户在使用过程中的体验大部分来自产品的可用性和易用性——视觉呈现只要符合定位，基本上不会有用户明确感知、反馈这个问题造成这样的原因有很多——知识壁垒、审美情趣、用户使用情境等，但「用户不反馈」并不意味着「产品没问题」。因此需要团队自查来补充用户的思维局限，同时也是挖掘用户没有明确表述的隐性需求。
3.2造型解析
1.圆角是非常重要视觉元素，而LOGO是产品给用户的第一印象，因此分析logo中转折、结束点的圆角设置是统一视觉的第一步。经分析LOGO在转折和结束点都采用的全圆角处理，因此新版的视觉框架基本上都遵循全圆角的处理方式。
2.LOGO造型整体左右扩张的趋势，在视觉上会有“胖”的感受，因此后续的icon元素需要遵循这个感受制作。
解决方案
受logo造型影响最直接的是整个系统内的icon，两者在圆角处理上会保持一致来达到和谐的效果。
1.旧版定位icon留出左右空间较多，上下空间较少，在视觉上给人细长瘦削的感受，这种视觉趋势与logo不一致。
2.在底端圆角处理上给人“尖锐”的视觉感受，线段相交处的圆角过小。
解决方案
首先在上部横向拓展体积，但「定位」本身是属于长方形结构，完全和logo保持一致是不现实的，因此上部的拓展保持了克制。转而增加下部的体积，向两侧延展，制造向两侧拓展的视觉趋势，缓解旧版尖锐的视觉趋势，同时缩小中心部的留白，增加上部正形体积，强调左右延展的视觉趋势，均衡「定位」本身长方形的视觉趋势，努力与logo的视觉趋势保持一致。
3.3 分页不符合主视觉
旧版的分页视觉不符合视觉规范，分页的造型、配色与贝壳LOGO的“圆润”没有相应联系；分页的取色也与贝壳品牌色没有相应联系。
解决方案
web端的分页的大小本身不大，方形基础上调整一些细微的圆角很难达到效果，因此直接采用全圆角造型，和logo形成呼应，色彩设定上选择品牌色作为鼠标「hover」效果。
3.4 筛选标签无圆角设计
旧版地图模式的筛选标签采用无圆角设计，与主视觉不符且点击状态缺少反馈；
标签内部文字到上下边距存在不对称，不排除是前期为调整页面视差做的刻意调整，但视觉角度出发内部文字是不居中的状态，很影响美观；
web端的标签体积偏小，目前是用直线分割多个标签，这样的设计本身没有问题，在移动端也是通用的做法，但对鼠标操作而言，操作主要依靠前臂移动，精准程度显然是不及手指操作的移动端，太过紧密的标签容易引起“点错”的误操作。
解决方案
1.调整标签圆角，鉴于web端标签本身偏小的体积，2px圆角的视觉效果太隐晦，调整为4px可以达到较明显的视觉效果。
2.字体调整为16px大小，上下间距调整为12px，解决旧版上下不均衡的视觉效果。
3.在调整圆角后，再增加12px的标签间的间距，避免标签因为体积问题引起“点错”等误操作。
4.增加鼠标「hover」状态反馈——标签底色调整为品牌色，同时增加箭头的翻转动态，强调「点击」的反馈。
3.5 字体设定
根据上篇《响应式网格系统》的结果，旧版字体系统已经不再适应4px原则，因此需要重新设置字体,以4的倍数为基准——设n=4，跨度阶梯在1n～3n之间，标题字体粗细Bold,正文字体粗细为light/medium，「楼盘名称」和「副标题」大小为16px～24px；
3.6 字体深色色值调整
深色字体的色值也需要重新设定，旧版色值为#222222，没有色彩倾向，与品牌色没有关联，这一点虽然非常隐晦甚至难以察觉，但当色值调整至#171A21后，在视觉上更加容易吸引注意力，视觉效果也更加突出。
现实世界中的无彩色非常少见，任何人眼所见物体都会受环境光和自然光的影响有一定的色彩倾向，因此大面积的无倾向色会在一定程度上给用户造成“不真实感”，这一点非常隐晦甚至难以察觉。
下图是同文本的色值效果对比
3.7 旧版行高设置不当导致断裂感
旧版行高数值偏大——区块组合、图文组合的间距偏大——「小区精选」中图片和楼盘名称间距19px，楼盘名称和建造年代有13px，造成了主负标题的「断裂」感；
标题区块之间间距达到112px，过大的数值容易造成浏览效率的降低；
且大部分行高数据不再符合4px的原则，因此需要重新设定行高数值。
解决方案
新版行高以前期网格系统确定的4px为原则，在标题和图文间距上采用较大的6倍间距作为区分，在图片和内容间距采用3倍间距，即达到了区分效果，又不至于重复6倍间距造成视觉上的重复。在楼盘名称和地理位置的区分上采用数值最小的4倍像素，避免旧版的「断裂感」。
区块之间的间距调整为72px，提升了主页瀑布流的浏览效率；
——————————————————————————————————————————————————————————————————
以上是视觉自查流程的一些案例，其实设计师的话语权在团队内部也是非常重要的，但大部分设计师都出于各种各样的原因没有参与到前期的策划层面，导致后期工作开展很被动，自己的想法没能够落实，又或者是很多细节都没到位，被交付节点赶着上架了，只能靠后期迭代，这是非常可惜的；
因此在情感化设计的流程里加入「视觉自查」这一个流程，一方面是补充用户的思维局限，另一方面也是给设计师在团队中争取一些话语权，在前期策划层面就开始规划视觉呈现，构建组件库等，为后期延展元素排雷。
