微信搜一搜·产品体验报告&方案（二）

1.需求层决定表现层

1.1通过网上搜索以及百度指数的搜索关键词，发现用户基于车票的查询需求是最强的使用场景；

1.2通过杭州公积金-关键词，假设用户更多的获取是关于公积金办理事项的业务；并选择官方政府服务网站或者小程序办事 ；

1.3俩个场景的差别，为什么杭州公积金没有汽车票服务更精准；

1.3.1汽车票作为一种交通工具通行证，本身词汇覆盖了目的地、时间、到达地；直观的信息传达

1.3.2杭州公积金从字面信息组成看更具象，确定了地点，以及公积金业务；杭州的公积金其实跟很多城市的公积金差异性不大；重点是公积金有什么作用，也可以看作间接的传达内容服务；比如公积金转移、查询、提取、等办事项

2.结果页结构

汽车票

2.1.1用户-搜索汽车票-选择服务-查询/订票等具体场景（如时间、地点等）

是否可以简化流程，将查询页面致前

2.1.2目前结果页的展现层级；汽车票服务、相关服务、公众号、汽车票预定、圈子、网页搜索、百科、小城讯、文章、相关搜索、本次搜索满意度；这个层级与整体分类很统一，暂不进行分析；默认采用页面层级结构

2.1.3将查询卡加入现有层级

杭州公积金

2.2.1用户对于LBS地址诉求很清晰-搜索杭州公积金-选择公积金转移、查询、提取、等办事项

是否可以丰富入口，将快捷入口致前

2.2.2目前的浙江省直公积金-关键词不是很匹配；还有只有查询业务入口；结果页层级杭州公积金服务、相关服务、热门资讯、文章、网页、相关搜索、本次搜索满意度

2.2.3提升地理位置关联度，放出公积金转移、查询、提取、等办事项等入口

3.表现层-阅读需求

3.1什么是阅读需求？

一组信息通过不同的字号反差组合来满足不同场景下的文字阅读需求，这称之为阅读需求，阅读需求一般可以归纳为以下3种类型：快速定位型、浏览型、阅读型。

·快速定位型：主体内容突出，反差比大，可快速检索到需要的信息。

·浏览型：被检索信息主次较为平均，字号反差比适中。

·阅读型：无特殊强调内容，需要用户沉浸式阅读，字号反差比较小。

三种阅读需求如图

3.2微信搜一搜结果页的阅读需求是什么？

定义为快速定位型和浏览型之间。原因是在阅读信息流时，用户有获取标题关键信息的强定位属性，同时也有浏览信息的浏览诉求；从结果页信息流阅读习惯的分析，我们提到两个关键词，信息的定位和浏览，后面的探索也会围绕这两个关键词展开。

4.信噪比与界面

“信噪比”（Signal-to-Noise Ratio）原本是用在声音和图像领域的概念，指在声音传播过程中信号和噪音的比例。这个理论也可以运用在页面中，如果要将讯息完整地传递给使用者，可以选择强化原有的讯息，或是降低多余的杂讯，来提高“信噪比”（Signal-to-Noise Ratio）以增加讯息成功被判读的机率，也让使用者能更轻松地阅读资讯。

一组信息是否更好的兼容定位与浏览属性，在于信息本身是否足够强调与清晰；“信噪比”理论是帮助我们理解“信息清晰度”的存在。

简而言之，“信噪比”理论通指有效信息和次级信息的比例，控制平衡这个比例，可以有利于信息完整的传递给用户，也能更轻松的获取资讯。

通过强化页面内的有效信息，降低多余信息，从而提升页面内的“信噪比”，以达到提高有效信息内容传递，帮助用户能更轻松获取有用信息的目的。“信噪比”理论是非常通用、使用广泛的指导理论，对信息流页面设计有明确的指导作用。

5.“有效，轻松的选择”

信息产生是源头，这里的损耗在所难免，我们所要做的，是尽可能控制“传递”和“接受”阶段的损耗

为了更好的提升首页阅读效率，我们重新审视当前的设计目标，通过对不同组合的空间调整，平衡展示效率以及阅读识别性，控制“传递”和“接受”中不必要的信息损耗；将设计目标锁定在“有效，轻松的选择”

6.文字的反差比

6.1如果说“信噪比”是信息流优化的理论依据，那么“反差比”则是验证页面信息反差关系的手段。

调整页面内文字反差，一般通过三种方式来提升或调整

·字号

·字重

·字色

调整页面文字反差，一般通过三种方式来提升或调整文字间的反差

6.2首页中Feed流的标题字号，通过 iOS 和 Android 的通用文字规范可以发现，最小阅读文字为12号字（10号字用在标签，9号字用在数字提醒，都不适合作为阅读文字），Material design中正文内容默认字号为16pt/dp，iOS规范中则定义了7个正文字阶（14、15、16、17、19、21、23)

选取了16号字、17号字为主要验证目标，综合多方因素

·微信朋友圈文字17pt/dp，考虑平台设计语言统一性

·微信搜一搜生态内容质量相对较高，我们提升了字符的大小，整体提升+1原则，如标签10+1、最小文字12+1等

通过反差比我们尝试了在最常用的信息流卡中的具体情况

6.3关于设计元素；此场景都属于标题展示；大标题与内容标题；

上俩个场景我们可以选择到17/15、17/16整体看起来更和谐；但相比17/16 这个反差比真实太小了；以至于在远距离观看手机很难去很清楚看到标题；再次我们也要考虑信息流可控制的高度，有时主体并不是反差越强越好，反差也是有阈值范围，超过这个阈值范围，会导致信息展示比例不协调，用户侧也会起到反作用。

当然武断17/15也不一定对；这里引入字重的场景

7.围绕上述结果，我们通过设计语言的统一性

进行整理-汽车票、杭州公积金结果页面涉及到的卡片

在解决整体卡的设计前，我们先确定间距的语言

7.1卡片间距，区分结果页中不同分类

7.2隐藏的几何形体造成的心理上的错觉

7.2.1即实际上两条线段长度一样，但为什么竖的看起来更长。

确实有一种说法是，人眼球横向运动比竖向运动容易，于是看横的更简单，大脑以为横的要短，看竖的费力，于是大脑以为竖的长。但是，我可以举出一个反例：

如果上面的说法正确，那么上面这图，看起来也应该是竖的比横的长。但为什么这样摆放看起来就差不多长呢？

7.2.2实际上，如果我给出下面两幅图楼主可能就明白一些了：

看，分别是一个等腰三角形和一个正方形。而这个等腰三角形有一个特点，即腰比底长，看起来比较“高瘦”，而正方形就十分“匀称”。

7.2.3这给了我们一些启发，见下图：

这两根线段，看起来是否好像一样长呢？我问过几个同学，他们表示差不多。但实际上，竖的比较短。如果说横向线段长度是2的话，那么竖向线段长度为根号3约1.732。如果你足够细心，那么也许发现了，线段的端点连起来正好是一个正三角形。

7.2.4正三角形完美的对称性给人“匀称”的感觉，于是，那两条线段看起来就差不多长了。

这种现象叫做“隐藏的几何形体造成的心理上的错觉”。

7.3界面中的几何形体

7.3.1主标题H1间距1如图所示，我们确定了左36，右28

7.3.2一般页面会使用2px/4px/8px作为最小单位，甚至还有以5px为单位的。

在 Material Design 的规范中，栅格系统的最小单位是8dp，所有距离、尺寸都是8dp的整数倍，

如 iOS 的界面边距是30px，并非为8的倍数。

·从删格化角度以36/28；同时为4的倍数及最小单位4px

·按照1>2>3，我们也要加入字符的高度，找到接近态

如图确定1=28px、2=20px、3=12px

8.具体方案

8.1汽车票、杭州公积金

8.2涉及到的设计语言-卡片组件

9总结

思路：

围绕【微信搜一搜搜索结果页】——信息流；

通过阅读需求的定位，确定信息流的本质——“有效，轻松的选择“

运用提升信噪比与界面的目的，打造信息流表现层设计方法论

采用文字反差比、隐藏的几何形体造成的心理上的错觉等手段，确定界面设计文字、间距等细节

结合移动端设计语言、统一性、约束性，完成信息流设计组件化

将信息流做到“有效，轻松的选择“

注意事项：

此方法中很多场景，需要进行AB测试；由于时间短，并没有采用这样的方式；如每个环节增加这样的方法，数据驱动界面设计，那么会更准确找到设计方案。

感谢🙏

Dragonlee