百度三端搜索首页之美:精确、精准、精细

持之以恒的学习是设计的来源,责任感是设计的原则,而灵感是设计的升华。


持之以恒的学习是设计的来源,责任感是设计的原则,而灵感是设计的升华。

百度三端搜索首页之美:精确、精准、精细

在正式开始之前,我们首先来思考几个问题:

  1. 在众多的产品中,我们设计的产品在体验层面是怎么样脱引而出的,作为设计师应该想什么,做什么,怎么做?
  2. 一个产品在多端的体验中,又是怎么样保持统一的体验效果。
  3. 如何较多层面的洞见用户诉求,提炼和总结成一个具体的、可衡量的标准,创造更极致的用户体验。

百度三端首页每天数亿人使用,作为设计团队,我们经过不断实践和反思,提炼整合确立了自己的设计观。通过以下一些案例分享其中一些经验,希望以此作为设计师工作思考的模板与参考。

一、“精确”:带来多端统一的设计

随着智能设备的普及,浏览方式的多样化,百度首页也面临着多终端的挑战。如果缺少设计原则,就像走在钢索上的人,步步都可能是陷阱。因此在多终端的快速改版和保证品牌一致性并存的路上,我们一直遵循以下几项原则:统一设计来源、统一布局方式、统一视觉图形。

百度三端搜索首页之美:精确、精准、精细

统一的设计来源可以使多端拥有一致化的体验。黄金分割是最普遍也是最能引起人美感的。我们所熟知的蒙娜丽莎的脸、雅典的帕台农神庙等都应用了该比例设计。百度三端首页的排版设计也不例外。黄金分割点约等于0.618:1,百度pc首页的搜索区距页面底部是474px,整体版面的高度是768px,两者之间的比例是0.618,非常接近黄金分割。wise首页及padweb同样都是运用了黄金分割来规范搜索框的位置,让有规则的美,严谨的融入其中。

百度三端搜索首页之美:精确、精准、精细

统一的布局可以使品牌的一致性发挥的淋漓尽致。我们需要为用户营造良好的搜索体验,去掉其他的干扰因素。比如在端的设计中为保证搜索框的简洁,搜索框周围的留白,给用户更好的搜索体验。在产品形态上,从用户的使用场景出发,提供多种搜索方式,语音搜索和图片搜索,可以让更多的人平等的得到所求。

统一的视觉感受是首因效应。百度三端首页统一的品牌色“百度蓝”的出现,利用色彩增强了对品牌的记忆,让用户记忆犹新。百度一下是近因效应,他引导用户在每一次使用的时候都对百度的品牌发起重复记忆,在用户的脑海中形成一种强势的语言。

百度三端搜索首页之美:精确、精准、精细

二、“精准”:需求前期的用户分析

唐.诺曼曾经说过,如果用户界面设计中有任何神圣的原则,那必然是“了解你的用户”。遵循这一点,我们在设计初期,对用户画像进行“庖丁解牛”似的分析,不但可以帮助设计师更好的理解用户和产品,更指导和定位了产品的设计格局。

在百度wise首页改版设计的前期,我们使用问卷调查和用户访谈的方法去做全方位的用户画像分析。

百度wise首页作为日均pv1亿以上的综合性平台,细化用户画像,对其进行属性分割就显得更为重要。用户的基本需求,除了满足搜索以外,年轻用户对于新闻娱乐信息有较强的阅读,而大龄用户则对NS等信息入口依赖性强。

百度三端搜索首页之美:精确、精准、精细

针对用户的需求划分,我们大致归纳为信息导向、搜索导向。同时结合问卷调查中的各领域偏好,建立个性化推荐机制,增加用户粘性,为产品创造更大的价值。 我们对页面的整体风格设计方向的定位是个性、简约。个性——让用户更有效的把注意力集中在内容上,在期间不断的进行对设计的探索和研究,简约——让用户在使用我们产品时能够跟轻便和舒适的获取所需。最终呈现出了全新的百度wise产品体验。

百度三端搜索首页之美:精确、精准、精细

信息导向-feed提供个性化、多维度阅读体验。wise首页从一开始的卡片聚合形式经过两个全量版本,和无数个小版本的实验,一步步走向feed瀑布的信息聚合形式。注重更精准的个性化信息推荐,为用户提供更加契合的信息。

信息流由右图模式改为左图模式,看似一点的改变,其实却有效的优化了用户体验,从眼动实验中的到结论,人的浏览路线为“之”字型,图片在左侧更可以在第一时间吸引用户的关注度,图片的阅读速度大于文字很多倍,可以在同样的时间,诉求更快的得到满足。

百度三端搜索首页之美:精确、精准、精细

搜索导向-搜索入口的更好展现。搜索框作为发起搜索最直接的途径,对它一点点的改变都是非常慎重的,在用户对信息量需求激增的前提下,调整搜索区域与信息区域的占比变得尤为重要。运用黄金比例,将搜索框定位在一个最优的比例上,同时保证信息展现的最大化。搜索框区域提升,内容区域展现更多,满足资讯需求。

百度三端搜索首页之美:精确、精准、精细

三、“精细”: 设计中细节决定成败

精细的细节可以可以让产品散发气质、加强用户对产品印象和关注度。在首页的产品设计中我们不断为视觉细节体验进一步打磨。在细节中我们对图标、文字、颜色都进行了细节的严格把控

图标在界面设计中被广泛的应用,图标会延续对真实世界的认知,用图说话,用图沟通。百度三端首页在图标的设计上遵循了一直一来坚持的线型设计风格,在原型的基础上进行精雕细琢。

百度三端搜索首页之美:精确、精准、精细

让搜索干干净净,清晰的视觉风格,去掉搜索框的效果修饰, 背景颜色更加清爽。

百度三端搜索首页之美:精确、精准、精细

这是我们团队的工作理念和设计观,这也是我们团队元思考和组织建设的基础。经过不断的磨炼与反思,我们充分认识到了工作理念和设计观对于一个团队的重要性,我们时刻在提醒自己,要不断对已有的经验和结论进行反思,要从更多的视角对它进行观察和思考。只有与时俱进,才能生生不息。

最后,借用一句名言送给所有还在设计之路上的人:持之以恒的学习是设计的来源,责任感是设计的原则,而灵感是设计的升华。与大家共勉!

 

本文由 @百度MUX 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25914/

(0)
CatherineCatherine
上一篇 2017-05-12 20:35
下一篇 2017-05-12 22:33

相关推荐

  • Axure教程-蜻蜓FM收音机iPhone端高保真原型案例下载

    本文是原型库网站金乌投稿——蜻蜓FM收音机iPhone端高保真原型。使用AxureRP7.0制作蜻蜓.FM网络收音机产品原型分享

    IxD案例 2015-01-04
  • 产品思维~02·用户体验与结婚教练

    今天继续分享《得到》app梁宁的大师课程产品思维30讲,感兴趣可以下载《得到》app继续关注,在文后会附上《得到》app的下载方式。其实梁老师真的很幽默也很形象,来用结婚教练的例子来类比产品的用户体验,同样的结婚也好,创业找合伙人也罢,都是非常重要的长期关系,改变一个人那是非常难的一件事情,那么如何去观察和判断一个人就显得尤为重要。如果没有受过专业训练,那么眼睛看到的很可能是不真实的,你的感觉以及情绪很容易被某个点所牵制,而且在你没有强...

    2018-04-26
  • 四个帮你提高UI设计效率的工作技巧

    业界 NG 率:接近 100%许多人认为创造力和逻辑是左右半脑分开管辖的、设计师和工程师使用的是不同部分的能力,所以大家各安其份做好自己的工作就好——我负责光鲜亮丽地画图,工程师就负责用超大声的同刻键盘在黑色的屏幕上编写外星文。

    2017-05-20
  • 污力传感器——当飞机杯都有了交互体验

    污力传感器入门枕边人这是一个高科技枕头,包含一个指环和一个内置在枕头里的扬声器。当用户带上指环设备将获取用户的心跳。通过智能手机应用控制从而将信号传送到对方枕头内的扬声器中,用户靠到枕头上就仿佛实时听到爱侣的心跳!该枕头还会微微发光哦,是不是更加温馨甜蜜。污力传感器进阶Kissenger它是一款可以将远在千里之外恋人的亲吻传送到面前的装置,是不是听上去晕乎乎的?请收看以下视频:硅胶唇下嵌有高精度力传感器,用以测量吻时嘴唇不同部位的动力,...

    2018-01-30
  • 不是首发!互联网女皇报告中文完整版发布

    腾讯科技讯 6月1日,有“互联网女皇”之称的玛丽·米克尔今天在美国Code大会上发布了2017年的互联网趋势报告,腾讯科技第一时间推出完整中文版。关注腾讯科技微信号(ID:qqtech),回复“女皇2017”,可获得中英文PDF版…

    2017-06-01
  • 芝加哥艺术学院交互设计硕士成功案例

    等你点蓝字关注都等出蜘蛛网了学生档案毕业院校:北京某大学本科专业:网络设计本科平均分:3.45申请学位:硕士申请专业:交互设计TOEFL:95GRE:无案例回放W同学是2015年10月底进入公司服务体系的,想要申请2017年秋季入学的设计类相关专业。通过第一次电话联系,名校规划导师了解到W同学的基本情况是:北京某大学网络设计专业学生,GPA:3.45,TOEFL:77分,没有GRE成绩。再通过头脑风暴课上的深入挖掘,名校规划导师更全面更...

    2018-04-26
  • 转化率低是设计师的问题?这锅我们不背!

    市场反馈好不好是由那些自带话语权或流量的人或产品决定的,这些人或产品既左右了大部分人的喜欢和习惯,又代表了大部分人的喜欢和习惯。转化率=(产生购买行为的客户人数 / 所有到达店铺的访客人数)× 100%

    2017-08-04
  • Medium评选的年度最佳设计文章2016

    译者:陈晶,审校:刘洁 该文章为UXRen翻译组的陈晶和刘洁同学基于Medium的文章《Medium’s Best Design Writing of 2016》整理、翻译和审校完成,为我们呈现了北美科技圈在2016年的最佳设计文章。 注明: 1、以下文…

    交互专题 2017-08-07
  • 工业设计与交互设计的关系

          工业设计是一个很宽泛的概念:它的设计构思上需要考虑到产品整体外型线条、各种细节特征的相关位置、颜色、材质、音效、人因工程等;产品范围上包括杯子、电脑、交通工具等实体产品。认为「工…

    2017-08-01
  • 读书:交互设计四策略

    1. 认知什么是简单的体验:用一句话把它写出来,包括我要设计什么,遵循哪几条设计规则,尽量使用最简单的术语。描述我希望用户拥有什么体验(用户使用场景、我的设计怎么满足)。2. 三种类型的用户:专家型用户:愿意探索产品或服务,并给你提建议;随意型用户:有兴趣使用更高级更复杂的产品,掌握重要功能的使用方法;主流用户:使用产品为了完成某项任务,掌握重要功能的使用方法;3. 关注用户的感情需求在设计过程中应该对用户的行为感兴趣,而不仅仅是自己的...

    2018-02-28