焕然前行 百度PC搜索视觉进化

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
13163 22 177 2020-07-06

把“简”“智”“美”的设计理念渗透 到PC搜索的每⼀个⻆落。从元素到容器,从浏览体验到内容互通,期望⽤户感受全新的百度搜索更简洁流畅,更效率智能。

最近,⼤家可能发现百度PC发⽣了⼀些变化。是的,百度改版了。

百度搜索作为历经20年的“国⺠搜索引擎”,持续为亿万⽹⺠提供⾼效快捷的服务。2020年,本着为⽤户提供更年轻更多元化的搜索体验,启动了百度PC整站焕新改版计划。 



设计理念


三个关键词——「简」「智」「美」,勾勒搜索流畅简约⼜不失智能与审美的综合视觉体验,⽀撑⽤户对百度搜索形成新的品牌体验感知。





   

去除冗余,精简层级,突出内容。


a.全局去线 聚焦搜索框

去除分割线、链接下划线等元素,打造通透、有呼吸感的界⾯⽓息。

蓝⾊搜索框成为为全局唯⼀“带线”元素, 在⻚⾯中⼼视觉更聚焦。


b.元素放⼤ 更易读

顺应⼤屏显趋势,对标题/⽂本/图形/留⽩等视觉感知元素进⾏适当放⼤,重新排版。信息更易读,⽤户信息筛选更快捷。


c.精简层级 更清爽

对各类状态下字号、颜⾊的数量进⾏去冗收敛,减轻浏览打断带来的疲劳感,赋予浏览以节奏,构建清爽的浏览体验。



d.整合提效 优化模板

精准满⾜需求的背后是数量庞⼤的特型卡⽚⽀撑,差异化卡⽚为后续管理迭代带来巨⼤的成本压⼒。

通过设计标准化,精简模版底层逻辑,打造了⼀套极致效率的搜索模版扩展模型,⾼效赋能开发与管理迭代。


智  

灵活适配,资源互通,信息扩容。


a.新栅格 多端兼容

统⼀PC、Pad和Phone三端的栅格底层对应关系,

推⾏响应式设计成为跨平台兼容适配的底层设计原则,实现了⼀套代码⼀次开发多端兼容智能适配。



b.新映射 资源互通

配合新栅格系统,从颜⾊、字号、间距、布局、内容等多维度与移动端建⽴映射关系,

实现资源多端互通展示,从设计⼀开始就满⾜多端体验同步前⾏。



c.新容器 丰富多元

增加新容器,承载信息/服务/⼯具/互动等优质内容,最⼤程度满⾜⽤户⽇益多元化的搜索需求。


d.新组卡 内容聚合

充分利⽤百度⽣态资源,聚合丰富优质内容,根植PC场景,打造以聚焦优质内容聚合为形式的⾸位卡。





美 

干净纯粹,活泼有力,亲和圆润。


a.新蓝⾊ 科技更活⼒

引⼊了科技感更为强烈的品牌⾊,辅以鲜明的辅助⾊,减少灰阶繁多造成的不确定性,形成全新的「百度PC配⾊系统」。


b.搜索框 友好更聚焦

强化了搜索框样式,让描边变粗,边⻆变圆,配合新品牌⾊的使⽤,形成更好的存在感和友好度。



c.圆⻆化 年轻亲和

⼤圆⻆的设计语⾔贯穿在图⽚、视频以及搜索框容器等多个设计场景,界⾯整体传递着年轻与亲和。





d.投影更柔和 过渡更⾃然

弥散式投影的运⽤,让图形与⽂字之间的过渡更加⾃然,⻚⾯浏览效果更加柔和。



结语


焕新前⾏,就是持续为⽤户提供更好的搜索服务,就是保持产品活⼒与年轻。 

启动百度PC视觉进化,把“简”“智”“美”的设计理念渗透 到PC搜索的每⼀个⻆落。这是⼀个庞⼤的⼯程,从元素到容器,从浏览体验到内容互通,期望⽤户感受全新的百度搜索更简洁流畅,更效率智能。设计标准化在整个项⽬底层贯通历史与现在,并为未来内容与商业的扩容 带来更多想象⼒。

新版PC⾸⻚已于05⽉09⽇上线,各路⼩伙伴都发来了贺电,感受到了全新的⽓息,让我们倍感欣慰和压⼒。接下来的课题是新版搜索结果⻚,经过精细的打磨和攻坚,也将很快与⼤家⻅⾯,期待与你⼀起感受焕然⼀新的百度搜索。



关于我们:

MEUX,百度移动生态用户体验设计中心,负责百度移动生态体系的用户/商业产品的全链路体验设计。

服务的产品包括百度APP、百度搜索、百度百科、百度网盘、百度贴吧、百度文库、百度新闻、百度知道、百家号、百度经验、宝宝知道、一刻相册、Dubox、好看视频、全民小视频、百度商业产品等。

MEUX以「简单极致」为设计理念,创造极致用户体验的同时赋能商业,推动设计行业的价值和影响力,让生活因设计而更美好。

Powered by Froala Editor

全部评论:22

  • endison

    2020-10-21 10:47

    到现在还是觉得圆角太大了,特别是那个搜索框。太年轻化反而有点卡哇伊的感觉。 刚看了上图那张放很大的“百度一下”这个没有上下居中,差的还不是那么一点点

  • 代果与慕斯

    2020-10-20 19:54

    改版难免会诱发用户群体的不满,做平台的太懂了,尤其是那句“找按钮切回旧版”。 整体感觉,视觉干扰还是少了很多的,更简洁了。至于圆角,确实有些过大,仁者见仁智者见智吧。

  • 2020-09-30 10:21

    还成原创文章了?人家百度自己出了视觉升级说明

  • 齐大蓉

    2020-09-29 17:09

    别的不说,这个纯黑的背景真的看得人眼睛疼

  • Apocalypse_cQ

    2020-09-29 16:14

    @大大大飞机: 插件了解一下

  • 大大大飞机

    2020-09-27 16:09

    搜索第一页全是广告~做的再好看也没用

  • 网络尖刀UED团队

    2020-09-26 22:34

    我刚看了还想评,真的好看吗?看了评论,我放心了,我也觉得一般般

  • 秋然君

    2020-09-23 16:25

    个人觉着这圆角圆度着实不nice 到处这样的圆角让人觉着搜索结果的可信度降低 并且加了圆角视觉上不是简洁清爽反而复杂了

  • EE-jieyan

    2020-09-21 16:26

    且不说好看与否,有点可爱的圆角削弱了搜索结果的“权威感“,显得不太严肃。 - 搜索框激活后,输入框和联想模块糊在一起,层级感好差,非常不舒服。输入的时候有一丝不安去感。 在文字排版方面的优化方向是对的。 搜索结果中官方站点除了tag,可以把logo也展示一下。 - 圆角图片可能会影响信息完整度,作为搜索结果来说不太合适。 - 至于美观度,见仁见智吧,只能说,不合适。

  • kasa

    2020-09-21 11:06

    划重点:为什么搜索结果没有广告,不符合实际应用场景 哈哈哈哈

  • 我是大魔王Zzzzzzzzzz

    2020-09-20 11:44

    真心不好看,搜索框线太粗了,圆角太大了,感觉不到任何简洁,而且搜索结果信息的新版本是真的感觉分不清主次信息,信息层级区分不明显,难怪没几天就改回来了

  • Yuki酱711

    2020-09-18 15:03

    我真的觉得一般,那天打开发现改版了 我到处找按钮想切旧版,我桌面的一堆收藏现在要滑动才能看到 太难受了

  • 隔壁大婶Cherry

    2020-09-18 14:56

    太多圆角,而且圆得太大了,看起来不太舒服,个人观点。

  • June设计

    2020-09-18 14:38

    还是谷歌好看,还我谷歌~

  • 青橘短衫

    2020-09-18 11:28

    没有觉得多好看 有点怪怪的

  • TerryUX

    2020-09-17 16:52

    没什么特别的

  • 诺曼贝茨

    2020-09-17 14:37

    确实不是很好看,描边太粗,圆角说大不大说小不小很别扭

  • 大猩点灯

    2020-09-17 13:26

    没有之前好啊,圆角过于大了,有些过度圆润了,谷歌的那个圆角比较好

  • 莫妮卡_在隔壁

    2020-09-17 10:54

    现在还没全部改版完成吗?

  • 是LILI哦

    2020-09-17 09:13

    感觉变娘了,哈哈哈哈,其实很多细节体现在代码,性能上,UI的优化没有太多震撼感,只是风格跟进,这是个人比较其他几家的感觉,还有就是感觉失去了一些特色,加油吧,我先走啦,拜拜

  • 维也纳街头

    2020-09-16 19:17

    @yonghutiyan: 别怪我太猖狂 我觉得一般般

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票