搜索
 找回密码
 立即注册

QQ鐧诲綍

鍙渶涓姝ワ紝蹇熷紑濮

扫一扫,访问微社区

智能小程序体验设计指引

查看: 2939| 评论: 2| 发布者: 月月

??? ??С
简介:过去10年里,随着移动互联网的发展,移动APP已经渗透到用户生活的方方面面;而浪潮之下,唯有那些体验更美观、更流畅、更丰富的产品,最终留在用户的手机里,留在了用户的身边。智能小程序的体验优势相对于受到诸多 ...

过去10年里,随着移动互联网的发展,移动APP已经渗透到用户生活的方方面面;而浪潮之下,唯有那些体验更美观、更流畅、更丰富的产品,最终留在用户的手机里,留在了用户的身边。

智能小程序体验设计指引

智能小程序的体验优势


相对于受到诸多浏览器限制的H5,智能小程序在美观、流畅、丰富的体验上更胜一筹,甚至可以和APP并驾齐驱。智能小程序在打造更加美观易用的界面的同时,还能支持流畅的交互动效,并开放了丰富多样的交互组件和能力,帮助开发者用比APP更低的开发成本,达到了更好的、更端化的体验。

智能小程序体验设计指引

智能小程序比H5更美观、流畅和丰富

智能小程序能提升界面展现的美观度:

与传统浏览器不同,智能小程序没有顶部地址栏和底部导航栏,用户能更沉浸聚焦于小程序本身内容。基于智能小程序框架,开发者可以在更大的展现空间中充分发挥创意能动性,制作更美观、更高品质的小程序。

智能小程序体验设计指引

使用智能小程序能开发更精致的视觉效果

智能小程序提供丰富多样的交互增强能力

目前开放的30多种常用组件和200多种接口,覆盖界面展现、交互流程、多媒体增强、AI能力等方面,提升开发者拼装基础页面的开发效率和用户使用体验。

智能小程序体验设计指引

百度智能小程序的200+交互能力中的的部分展示

体验设计六部曲

1. 选择合适的信息架构


优秀体验设计的第一步,不是打开电脑启动设计软件,而是全面理解所要设计的智能小程序的定位、功能,为它选择最合适的信息架构。
  1. 智能小程序内容维度单一时,使用I字型架构信息,从上到下平铺直叙,浏览最为直观和方便;
  2. 当需要平行架构不同维度的内容时,引入顶部标签栏,使用T字型架构,方便用户在不同内容分类中滑动浏览;
  3. 倒T型结构与T字型结构有相似之处,只是它使用底部标签栏,用于架构内容差异性较大的功能模块;
  4. 当智能小程序功能和层级较多时,可使用工字型架构,用底部标签栏架构一级导航,顶部标签栏承载二级内容分类。

智能小程序体验设计指引

智能小程序常见信息架构模型

2. 铺设顺畅的交互流程


尊重用户的使用习惯。在用户完成任务的流程中,采用“从哪来,回哪去”的导航路径最符合用户心理预期和心智模型的交互方式。

我们建议在智能小程序的交互流程设计中也层层递进,在符合用户习惯和认知的基础上,顺畅的交互流程应当是在帮助用户更高效完成信息的获取或任务的执行:减少使用障碍,缩短用户步长,降低操作成本。

智能小程序体验设计指引

用户使用路径:从哪来,回哪去

降低用户操作成本。考虑到移动设备的屏幕大小和使用环境,应尽量减少用户的输入交互,而改为操作成本更低的选择型交互;当然,应用百度智能识图能力,智能语音识别等能力,自动完成信息输入,能进一步降低用户操作成本。

智能小程序更多智能能力已陆续建设开放,未来将继续助力开发者用更智能的方式、更好地减少用户的操作成本,使智能小程序的交互流程更加顺畅。

3. 建立舒适的阅读体验


合理排版,有效传达信息。阅读体验的好坏取决于排版,这考验我们开发者组织和呈现信息的能力。强调主要内容,弱化次要信息,把页面间不同的信息层次拉开,用户可以快速辨认和获取所需内容。

智能小程序体验设计指引

内容排版正误示例

智能小程序设计文档中有不同场景信息层级的字号使用建议,如标题、正文、摘要等,方便开发者了解阅读排版节奏。在这基础上,可以结合自身产品特点再加以发挥创新,定义更优的阅读节奏。

智能小程序体验设计指引

内容排版字号使用建议

有强弱区分的主次功能。好的阅读体验能让用户清晰定位并找到所求。

在下图购买火车票案例中,在去程票的购买完成页面,两个操作按钮展现都使用蓝色大按钮,会导致用户在选择过程中可能会迟疑;而在主次功能操作做了区分强调,能引导用户注意力优先级,降低了用户选择和思考的成本。

智能小程序体验设计指引

按钮排版正误示例

4. 使用友好的色彩系统


保证清晰易读。合理的运用色彩对比度关系,是界面内容清晰展现的关键。我们建议开发者选用组件时,选择与当前颜色对比度更大的样式。

例如:当颜色饱和度较低时,选用左列黑色样式的顶部导航栏,而当颜色饱和度较高时,使用右列反白样式,使信息可读性更好。

智能小程序体验设计指引

顶部导航栏选用建议

用色符合用户理解认知。色彩的表意会对功能引导有影响。

例如,灰色代表着不可用。因此设置按钮的颜色时,如果使用灰色的按钮文字,用户可能会认为按钮是置灰不可用的,从而让用户产生额外的理解决策成本。而使用右图肯定、直接、明了的蓝色,则能有效明示操作可行性。

智能小程序体验设计指引

按钮颜色使用正误示例

5. 打造有识别度的LOGO


图形清晰可辨识。LOGO就是小程序递给用户的第一张名片。这张名片应该清晰可辨,这是用户能在快速一瞥间留下印象的前提。很多开发者会使用自己的小程序名称作为LOGO,但要生硬地把长长名称嵌套成LOGO的方式并不可取。

以智能小程序学院为例:长文字嵌套后LOGO的识别度不好,其次,留白过多,导致欠缺基础美感。通过视觉创意技巧把它转化为图形化设计,从而让LOGO更构图饱满,表达更清晰,更利于小程序的传播,辨识和记忆。

智能小程序体验设计指引

LOGO设计的正误示例

映射产品特点。这张LOGO名片应当与界面有所呼应,在用户打开小程序之前,提前向用户传递小程序的特点。

爱说唱小程序logo使用镭射渐变整合了一系列高纯度、高明度的色彩,丰富多变的颜色层次配合跳跃的涂鸦字体,预示它是一个年轻独特,富于娱乐感的时髦的潮范小程序。

智能小程序体验设计指引

爱说唱小程序的LOGO映射产品年轻娱乐的特点

AI分诊助手的LOGO,使用听诊器与心形结合的创意设计,简洁克制的蓝白配色,彰显了它作为医疗属性工具小程序的专业和严谨。

智能小程序体验设计指引

AI分诊助手小程序的LOGO映射产品科学严谨的特点

正确输出完整展现。想让自己的品牌LOGO能整整齐齐地展现,输出图片时需要注意细节:由于开发者平台提交的LOGO是正方形图片,但在实际上页面展示小程序时,会把方形图片的裁切成圆形,因此我们要特别关注logo裁切后的效果。

建议输出时,将LOGO的主要图形控制中间红色区域,也就是大约占正方形图片70%左右,这样能保证logo展现完整,而适当的留白,也让logo的阅读更舒适。

智能小程序体验设计指引

LOGO设计和输出的正误示例

6. 运用生动的动效设计


适时适度的动效,能使流程间的流转过渡更平滑,并让小程序富于人情味。

(1)“减减鸭”智能小程序在设计交互转场引导时,在放松舒缓的练习结束后,上移的光晕巧妙地将用户的注意力顺应着其运动的方向转移,自然地引出结果;

(2)“春节摇红包”智能小程序在摇红包的交互过程中,使用撒金币动效,增加用户摇红包的真实互动感。

(3)而“星动”智能小程序则在解锁动效中使用了类似游戏的技能触发特效,为整个活动增加了生动感和趣味性。

7. 其他:注重设计细节


全面屏适配。随着全面屏手机的普及,我们也应该注意它们新增的系统特性。

当小程序没有适配全面屏时,不仅影响页面美观,底部操作按钮过于靠近系统操作区,导致无法正常使用。

智能小程序体验设计指引

全面屏适配的正误示例

考虑容错展现。页面没有正确展现内容,可能是因为网络信号突然断开,或者是用户的百度APP版本需要升级,适当的引导提示,能大大减少用户与“困惑的空白”的相遇机会。

智能小程序体验设计指引

数据异常页面展现的正误示例

为了减少这些空白,我们总结了一些常见的空态情况,并放在视觉组件库供大家使用,希望以后智能小程序令人困惑的空白们会越来越少。

智能小程序体验设计指引

百度智能小程序设计组件库中的空态图标

智能小程序体验设计工具


智能小程序体验设计指南:描述智能小程序的设计原则,提供了交互和视觉层面的设计实践建议。

智能小程序体验设计指引

百度智能小程序官网中的体验设计指南
  • 智能小程序设计组件库,支持sketch版本和Photoshop版本。
  • 设计走查表:支持线上版本、Excel版本和PDF版本,方便项目流程的各阶段查漏补缺。
  • 智能小程序设计故事:介绍设计六部曲的设计方法在项目中的实践。
  • 智能小程序官方示例:直接使用感受百度智能小程序的交互组件和能力。

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

题图来自Unsplash, 基于CC0协议

本文仅代表作者个人观点,不代表SEO研究协会网官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱cxb5918@163.com。更多相关资讯,请到SEO研究协会网www.seoxiehui.cn学习互联网营销技术请到巨推学院www.jutuiedu.com。

晕倒

感动

大哭

惊呆

口水
已有 2 人参与

会员评论

  • 游客 2019-5-25 17:22 引用
    全网VIP影视搭建,公众号、抖音、微商吸粉加人爆粉,全能影视APP搭建、加微信:571832434 回复1 给你教程
  • 小仙 2019-5-25 11:17 引用
    转发了
推荐阅读

    2019-09-21 12:48
  • 作者:糖大胆儿

    5招助力创始人改变世界

    编者按:《海外头条》是创业邦推出的海外栏目,服务于广大创业人群,为他们提供专业、有启发性和实用性的海外讯息。栏目通过分享优秀的行业热点文章,帮助创业者打开新思路,洞悉全球市场动向,掌握大企业背后的秘密

  • 2019-09-21 12:46
  • 作者:lixueli0226

    长城发布员工股权激励方案,进一步建立健全的激励机制

    据相关的媒体报道,9月6日长城汽车对外发布了2019年限制性股票与股票期权激励计划方案,据方案内容显示,此次激励计划拟授予激励的对象一共1928人,权益的总计高达18,509.13万份,权限为A股普通股,股份约占公司股份

  • 2019-09-21 12:45
  • 作者:木木seo

    旅客充电宝自燃,航班起飞后返航!东航回应了

    今天一早南京飞厦门的MU2809航班因旅客充电宝自燃起飞后返航于南京禄口机场落地“@东方航空”随后发布了通报机场回应来了!2019年9月4日,MU2809南京-厦门航班,07:16在南京禄口国际机场起飞。飞机起飞后,因一名旅

  • 2019-09-21 12:38
  • 作者:hamelong11

    微信欠帐不还怎么办

    微信欠账不还,债权人可以和债务人协商,协商不成可以向人民法院提起诉讼,申请法院强制执行。【法律依据】《民事诉讼法》254条规定,强制执行的标的应当是财物或者行为。当事人拒绝履行发生法律效力的判决、裁定、

  • 2019-09-21 12:26
  • 作者:月月

    「Excel技巧」如何快速去掉单元格里的绿色小三角形标识

    制作了这么一份表格,里面包含人员身份证号码,都知道身份证号码是超过15位,录入前,需要先将单元格格式设置为文本格式,然后再输入身份证号码。然而,输入后,单元格左上角会有一个绿色小三角形。这种情况,是不是

  • 2019-09-21 12:26
  • 作者:陈仓河谷

    菜鸟学EXCEL之9:EXCEL的数据类型及录入和编辑数据技巧

    作为电子表格,EXCEL最主要的功能就是处理和分析数据,本篇文章将要给大家介绍下EXCEL的数据类型,还要讲解如何在EXCEL中录入和编辑数据,另外还要讲解自动填充、导入外部数据等实用技巧。EXCEL数据类型EXCEL数据类

  • 2019-09-21 12:25
  • 作者:veryql

    89平米简约日式原木风格装修效果图,家庭很少用的装修风格

    89平米简单日式原木风格装修效果,蛮小清新的,可是家庭很少用这样的装修风格,但确实也挺美,想尝试不同风格的家庭装修业主可以尝试一下啊,下面看一下装修效果图!【免责声明】本文仅代表作者或发布者个人观点,不

  • 2019-09-21 12:20
  • 作者:dfzk313

    苹果手机别“瞎买”,目前这3款性价比最高,随便买哪部都不亏

    苹果在当今的智能手机界绝对是超级大佬的存在,前些天苹果公司的市值已经突破了万亿美元,这也是全球首家突破万亿美元的公司。苹果公司在去年9月份一口气发布了三款手机,分别是iPhone 8、iPhone 8 Plus以及iPhone X

  • 2019-09-21 12:19
  • 作者:卢保林

    跳槽时离职需要一个月,但新公司要求一周内入职,怎么办?

    又到了金九银十跳槽季,有的小伙伴直接选择裸辞,虽然离职一时爽,但如果迟迟找不到工作又难免焦虑,于是不少职场人都选择“骑驴找马”的方式跳槽。先找到工作后再提辞职,就不会存在职业空窗期,更不会有裸辞后的压

  • 2019-09-21 12:18
  • 作者:qetula

    三大运营商真透明,5G“看得见”,明明白白做选择

    最近一个多月,中兴通讯、华为、vivo IQOO相继发布了5G手机,三星也在中国召开了5G手机发布会,小米MI9、vivo NEX、OPPO、荣耀的5G手机也将于近期发布。有了手机,哪里有5G信号,能真正让用户感受到5G的速度?从三大

文章排行

TOP ARTICLES

返回顶部