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

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


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

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

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

  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

相关推荐

  • 这个简单粗暴的设计为何是“好设计”?

    作者:UX沐沐(公众号:Liveux)   20世纪著名建筑师史密斯.德罗在总结他成功经验时说“魔鬼藏在细节中”,面对一些习以为常的设计,设计师能否洞察背后的不寻常? 今天想探讨一个我们每天都能见到数十次的“寻常”设计…

    交互专题 2017-08-07
  • 当与需求方争论时,UX 设计师的正确姿势该是怎样的?

    在我们平常的设计工作中,和需求方产生各种争论的情况很常见,双方都比较偏执强势的时候,很容易陷在各自的立场中,谁也说服不了谁;如果设计师本身就离自己负责业务的用户有一定距离(比如大多数的 B 类产品),就更容易在需求方面前陷入被动。这种时候,我们更需要从自己的专业思考角度走出来,用科学的方式去收集、分析、定位、验证问题,洞见问题本质,来和对方更好地达成一致。产品经理 A:我们的首页好久没改版了,要不要来点动作?
    设计师:好啊好啊,我也正想和你提议呢,早就看不下去了!
    (省略双方需求沟通过程若干字)
    ***进入设计评审阶段***
    运营:哎,这个内容对我们推广 XX 很重要的,怎么能去掉呢?
    产品经理 B:我负责的这块业务你是不是漏掉了,要首页首屏重点透出!
    产品经理 C:你要考虑万一某某用户来访怎么办,他们的诉求得满足~
    老板:我需要什么什么感觉,没体现出来啊!
    设计师:塞这么多东西用户都想看吗?
    众人:我不管,这块内容很重要的!
    ***设计师吭哧吭哧改了一版新的***
    众人:感觉好复杂啊!是不是还是别改了……当所有人都觉得一匹更快的马已经够用时,该如何说服他们接受相对昂贵、不容易习惯的汽车呢?

    2017-05-02
  • 如果你即将面试交互设计,可以参考一下这篇

    交互设计也是设计类,设计类的面试只要看作品说话而已。但是,偶尔有也会有些面试官完全都不理你的作品,然后会问一些比较宽泛的问题,今天的汇总就是主要针对这部分题目。题目大多都能回答,但是偶尔一个题目打过来还是会有点懵,所以事先做好准备会相对比较好。最最重要的当然是介绍你的作品!介绍你的作品!介绍你的作品!(重要事情说三遍)讲的思路就是你从什么地方找到设计的依据,然后做了什么设计。下面就是面试的其他问题:1、自我介绍。答:(自我介绍算是面试的...

    微信热点 2018-03-25
  • 看似平淡无奇的Icons,到底什么才是它的正确使用方式?

    了解食材是厨师的基本功课之一,了解器材是摄影师的基本功课之一,了解城管的时间表是卖热干面大叔大妈的基本功课之一,了解各个组件的设计模式和属性是交互设计师的基本功课之一。

    2017-05-08
  • 交互设计师的60日计划第十五天

    今天晚上去上了想上已久的舞蹈课,超级超级开心。说要学舞说了这么久,总是不能兑现。今年的另一个要实现的事情,就是每周坚持学舞蹈吧。 20150813 产品经理的自己提的方案也可能并不是他想要的 很久以前师父和老大…

    交互专题 2015-08-20
  • 设计师如何具有工程师思维?

    常常在提 design thinking, 让工程师有设计思维,但作为一个设计师,很多时候工作处理的都是交互层的东西,那如何像一个工程师一样理解一个项目呢?或者说如何具有工程师思维? 这个问题的简单回答是:根本没有“工…

    2015-05-24
  • 在用户体验中询问用户的4个问题(译文)

    该客户的体验是一个思考的人从我们产品的认知度如何去成为一个真正有用的抽象用户,但抽象并非最终有意义。要真正改进您的产品,您需要与您的用户交谈。无论是面对面的,应用内的还是通过电子邮件发送的调查,都需要花时间与用户签到并保持对他们最重要的事情。这种双向反馈也是您可以用来帮助人们通过漏斗最有效的工具之一,并最终帮助他们坚持成为您产品的惯用用户。让我们看看如何从战略上使用问题从用户那里获得正确的信息 - 这种信息将帮助您采取行动。如何提出从收...

    2018-02-26
  • 【总结】阿里UED内部资料 ▏优秀的交互设计师这样养成

    一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。 大约五年前选择了这个职业,一路走来,质疑过、探讨过…

    2015-12-04
  • 用户体验是玄学吗?

    恍恍惚惚又是一年年底。又到了设计师们的“季节性迷茫期”,最近我的公众号后台经常接到好多朋友的信息,自己行间透露着迷茫和不自信。大的趋势和节奏还是和去年一样,有些视觉设计师询问我如何转UI,有些UI设计师问我如何才能培养产品思维…其实大家都在迷茫,在这里我想分享一个用户体验相关的综述给大家,希望能对大家找准自家的定位有帮助。我最初是一名UI/视觉设计师,然后随着一步一步的发展,给自己的目标也在发生变化,我现阶段给自己的最终定位是成为一名用...

    2018-02-06
  • Sketchelp·2018暑期工业设计考研课程

    还是你们熟悉的Eric,还是你们熟悉的二师兄。2014年的夏天,天气热的没羞没臊,我们第一次开辅导考研手绘,那时只有三个人,一套笔。那时很开心,每天举着煎饼果子画手绘。两周年,四学期,已完善的课程,将在这个暑假全新开始:是不是临摹还行,轮到自己设计就歇菜?想知道有没有考研的“套路”?一个产品换个角度画,却死活画不出?产品+交互界面真的有很难?故事版的卡通形象一点也不卡通怎么办?“那天”万一考卷画坏了怎么办?答案都在这里。。。真实一线从业...

    2018-05-04