至纯至简|手机百度8.0设计总结

8.0是手机百度发展过程中一个重要里程碑,它不仅延续了产品建立以来的要点,打破历史包袱,与时俱进地从体验和产品角度进行了创新,通过全新的整体交互框架与视觉风格,将搜索、语音搜索、FEED流信息获取、多垂类服务等进行了再设计。


8.0是手机百度发展过程中一个重要里程碑,它不仅延续了产品建立以来的要点,打破历史包袱,与时俱进地从体验和产品角度进行了创新,通过全新的整体交互框架与视觉风格,将搜索、语音搜索、FEED流信息获取、多垂类服务等进行了再设计。

至纯至简|手机百度8.0设计总结

项目背景

手机百度作为移动端的明星搜索工具,一直深受广大用户喜爱,经过多年的发展它已经成为用户获取信息和服务的重要途径。但随着功能越来越多,其产品结构也越发复杂,原有的结构形式已不能承载产品未来的发展,对产品形态进行重新设计势在必行。

在设计研究阶段,团队内部对收集到的问题进行分析和整理,归纳出以下几个要点:

  1. 产品首页功能多、结构复杂,产品定位与重点不明晰。
  2. 首页结合信息流的使用效果以及具体内容的浏览体验不佳。
  3. 框架种类繁多,同一内容在APP内不同地方打开的框架不一致。
  4. 接入和自建的各频道体验缺乏统一性,存在显著的体验差异。
  5. 视觉设计语言需要进一步统一与升级,使产品整体视觉调性感受更为整体,凝炼手百的品牌气质。

设计与思考

8.0具有承前启后的里程碑意义,如何继承已有的成果和用户习惯,同时创新性地解决前面提及的问题,为后续发展打下基础,是设计师在项目开展之初就需要解决的问题。

回归用户本质需求:信息获取,从减法开始设计

设计团队经过多次讨论和分析,决定回归用户本质需求——信息获取,围绕它从减法开始做设计。新设计中突出信息获取的重要功能:搜索和智能、个性化信息推荐,而其他功能则适度弱化和折叠。目前文本搜索是使用频度最高的信息获取方式,而以语音搜索为代表的面向未来的人机交互方式已经日趋成熟,百度的语音搜索在识别准确度与结果满足均达到业界领先水平。智能的、个性化的信息推荐则代表着未来基于大数据和人工智能的用户获取信息的方式,百度在技术上的深厚积累,得以实现“千人千面”的信息与服务满足。

围绕如何让用户更便捷地使用各种搜索和智能信息推荐,我们尝试了几十版方案。并在方案雏形基本确定后,便开始自主开发高保真可交互Demo,团队内各个角色一起试用,发现问题与不足,不断研讨和完善对细节的打磨,快速地收敛了共识,并在这个过程中收获了许多来自多种角色的优质建议。

至纯至简|手机百度8.0设计总结

至纯至简|手机百度8.0设计总结

功能分级和服务个性化,满足不同用户群体需要

手机百度的用户群覆盖面很广,几乎涵盖了各个年龄段的全体网民用户。结合使用数据来看,单个用户高频使用的功能除搜索外,还呈现个性化和多样化的特点。如何满足好共同的搜索需求,还能更好地提供个性化服务是设计中需考虑的一个要点。

经过分析,我们将目标用户划分为三大类:

  1. 仅使用搜索的用户,他们进入手百希望快速完成搜索,获取所需要的信息。
  2. 轻度定制化的用户,他们除了使用搜索外,还经常使用百度的贴吧、新闻、小说等服务,他们希望功能的布局能更加符合自己的使用习惯,操作更加便捷。
  3. 深度使用各种百度功能用户,他们不仅要求精还要求全,希望在手百上实现一站式体验。

针对不同用户,我们进行了功能分级和服务个性化设计,用户可以按需定制所需要的模块,同时还对各种功能重分类和聚合,使界面结构与功能分区明确且纯粹,便于用户能快速找到所需。

至纯至简|手机百度8.0设计总结

化繁为简,统一内容框架和内容形态

首页是一款产品的核心,其框架结构、布局的设计重要性不言而喻,在8.0中我们对首页的设计进行了探索和重新定义。

1. 以“流式”和“精炼”为核心理念的布局形式

  • 流式:Feed、搜索、第三方页面等主体界面均为“流式”为主的交互布局,使产品在整体体验上保持一致。
  • 精炼:归纳整合了首页的功能模块,确保单一模块功能单纯,降低用户的理解成本,提升易了用性。

2. 以“极简、清晰、舒适”为核心理念的视觉风格

  • 构图:极简构图,去除所有装饰元素,通过严谨排版调整各部分的比例关系,使页面干净,清晰和美观,以黄金分割进行版面结构的纵向划分,使页面布局舒适、耐看、经得起时间的考验。
  • 品牌:通过对“留白、红蓝”“左右平衡构图”的进一步优化,强化品牌感受;并使PC和移动多端首页形成品牌气质的一致性。

至纯至简|手机百度8.0设计总结

精简内容框架:将原有的5种框架缩减为3种,对类似功能的框架进行了合并,这不仅提升了统一性,而且减少了技术架构的复杂度。在合并框架的同时,我们还保留了框架元素的灵活性,为具体场景和服务下的拓展预留了空间。

至纯至简|手机百度8.0设计总结

在框架统一的诸多方案中,经过调研和测试,我们最终选择了底部返回的基础框架形态,并将主要功能整合其上,不仅使框架形式更加统一,而且在在大屏手机成为主流的背景下,用户也能更方便地操作界面底部常用功能。

精简内容形态:信息流Feed 是本次设计的一个重点,它不仅提供了一种快速获取信息的方式,而且是后续智能化推荐的承载体。在设计中我们从单体模板的角度对可能接入的内容形式进行了分类和抽离统一,有效地保证了内容形式的精简和高延展性。使丰富的各类资讯内容的排版与布局舒适合理,提升阅读的沉浸感与流畅性。

至纯至简|手机百度8.0设计总结

建立统一标准,打造平台化体验

手机百度作为一款平台性产品,接入了很多由合作团队开发的产品。为了保证用户在使用手百时能有统一的使用体验,在8.0项目设计的伊始,我们分析各内外部服务的特点,总结归纳共性制定出一套统一的平台化设计标准。

从接入内容的架构、产品界面布局、控件元素、品牌等多维度进行规范,有效地保证了最终的用户体验。

至纯至简|手机百度8.0设计总结

至纯至简|手机百度8.0设计总结

简洁灵动的细节设计,构建产品的品牌特征

传统工具类产品给用户的印象更多是冷冰冰和机械化。为了突破这种印象,在本次设计中,我们尝试通过简洁灵动的细节设计来构建产品的品牌特征,以平面化的几何形态为基础,辅以典型的色彩和动画效果来构建自己的特征,加深在用户心目中的印象。

例如语言搜索灵动的细节设计不仅展现了人工智能的强大和灵敏,而且形成了典型的品牌特征,这套设计语言也贯穿了手百的各个模块设计中。

至纯至简|手机百度8.0设计总结

总结

8.0是手机百度发展过程中一个重要里程碑,它不仅延续了产品建立以来的要点,打破历史包袱,与时俱进地从体验和产品角度进行了创新,通过全新的整体交互框架与视觉风格,将搜索、语音搜索、FEED流信息获取、多垂类服务等进行了再设计。在设计过程中,我们也深刻认识到把握用户需求,结合技术和商业模式进行分析和研究是设计工作的要点。只有不断地探索,才能从诸多可能性中找到最适合的方案,为用户提供更好的服务。

 

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

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

(0)
CatherineCatherine
上一篇 2017-05-12 06:33
下一篇 2017-05-12 08:11

相关推荐

  • 在不同屏幕和设备上,创建用户体验设计的8个步骤

    从具有微型屏幕的智能手表到最广泛的电视屏幕,其中所开发的内容,应以便在各种屏幕尺寸之间进行查看和交互。但针对不同设备的设计更多的只是调整在不同的屏幕上显示的内容大小。它涉及到很多复杂性:设计师需要把每个设备中的用户体验最大化,以便用户相信实际上应用程序是为他们的设备设计的,而不是简单地拉伸到适合屏幕。为了创建一个好的用户体验,有必要制定一个针对各种设备和屏幕尺寸的策略。

    2017-04-29
  • 用户体验的目标是做到“自然”

    不想错过精彩的荔枝话题,点击文章左上角关注“荔枝3十1”。每晚10:00点荔枝陪你说一事晚安文/励志妹图/荔枝工作室经作者授权发布用户体验的目标是做到“自然”导语“自然的体验是不需要用户去思考的。”1需要用文字来解释的交互不是好交互(1)我观察3岁的小孩用iphone很容易上手。比如,iphone的开锁,小孩甚至不用学就会用。因为触摸是人的天性,同时iphone通过箭头图标,向右滑动的文字条(小孩看不懂文字),来暗示手指触摸向右滑动来解...

    2018-04-28
  • 实例分享|在界面排版中,需要注意的七大原则(下)

    在上篇《实例分享|在界面排版中,需要注意的七大原则(上)》大家了解了界面排版的前四个原则,今天接着将后面三个原则也分享出来。一、亲密原则
    二、对比原则
    三、平衡原则
    四、相似原则
    五、简洁原则
    六、封闭原则
    七、情感原则

    2017-05-08
  • Sketch book 各种材质产品手绘表现-别人家的手绘本,拿走、收藏... [更新]

    ▲点击关注最不可思议干货今天给大家共享一波Sketch book 各种材质产品手绘表现...拿走、收藏...手绘飙车活动进行时,点击按钮加入...手绘零基础▼点击看>此方法,让零基础小伙伴们透视准确率达到98%...津美优设2017暑期1期课程|格物造型.第5天: 线稿基础-借体推敲Ⅱ点击看>此方法,让零基础小伙伴们形态推演能力爆棚!造型推敲、设计发散!津美优设2017暑期1期课程|格物造型课程.第6天:借体推敲Ⅲ点击看>此方法让零基础...

    2018-03-23
  • 为什么你爱用的 App,都用卡片式设计?

    今天这篇文章,将全面介绍「卡片式设计」,看完之后,你会知道为什么爱用的 app 都喜欢用这样的设计。设计的时候一定要思考用户会如何使用他的拇指在界面上交互。所以,界面内容的大小一定不要让用户在交互时感到不适。——译者注注:Masonry 是一个对系统 NSLayoutConstraint 进行封装的第三方自动布局框架,采用链式编程的方式提供给开发者 API。

    2017-05-04
  • 交互设计如何影响公司的发展

    在我的工作体验里,交互设计在公司,尤其是软件公司、互联网、智能家居/硬件公司里是非常非常重要的。好的交互设计师在公司里不仅会得到其他人的尊重和肯定,也会影响公司的重大决策。1.交互设计帮助留住用户交互设计的出发点是满足目标用户的需求、解决他们遇到的问题。它可以增加产品的易学性和易用性,提高效率。它使产品架构更合理,减少用户操作步骤,提高效率。同时,好的交互设计可以增强产品的趣味性,强化体验,帮助树立品牌形象。交互设计对于留住用户、增强用...

    2018-03-09
  • 十大真实Axure基础案例分享

    小编有话说:本文是我是UE网专栏作者 Wiki 跟大家分享的十个Axure基础案例,另外还赠送大家一个关于axure函数的文档,哈哈,希望对大家的交互设计学习有所帮助。 学习中如任何有问题,可在交互设计IxD学堂群(Q号:…

    交互设计WiKi 2015-05-27
  • 一套交互设计工具推荐

    刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物。这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍。

    2017-05-28
  • 运营设计常用“套路”拾趣(附实战案例)

    阳春白日风花香,又是一年芳菲至,在这最美的时节,各种运营活动又开启了,就此从视觉角度结合实战案例的小心得,对运营设计的“套路”浅谈一二。罗伯特.庞德说过:“这是一个两分钟的世界,你只有一分钟展示给人们,另一分钟让他们喜欢你。”

    2017-04-30
  • 几乎是最完美的用户体验模型—CUBI

    【导读】我们都希望能做出引人注目的创意项目——能解决业务问题,同时通过有意义、有价值的体验吸引用户的项目。然而,紧缩的预算以及紧张的时间安排,都给创造真正新颖的设计、确定设计流程中的遗漏,以及充分考虑…

    交互设计 2015-04-24