创新互联-专业网站定制、快速模板网站建设、高性价比点军网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式点军网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖点军地区。费用合理售后完善,十载实体公司更值得信赖。
智能小程序比H5更美观、流畅和丰富
智能小程序能提升界面展现的美观度:
使用智能小程序能开发更精致的视觉效果
智能小程序提供丰富多样的交互增强能力:
目前开放的30多种常用组件和200多种接口,覆盖界面展现、交互流程、多媒体增强、AI能力等方面,提升开发者拼装基础页面的开发效率和用户使用体验。
百度智能小程序的200+交互能力中的的部分展示
智能小程序内容维度单一时,使用I字型架构信息,从上到下平铺直叙,浏览最为直观和方便;
当需要平行架构不同维度的内容时,引入顶部标签栏,使用T字型架构,方便用户在不同内容分类中滑动浏览;
倒T型结构与T字型结构有相似之处,只是它使用底部标签栏,用于架构内容差异性较大的功能模块;
当智能小程序功能和层级较多时,可使用工字型架构,用底部标签栏架构一级导航,顶部标签栏承载二级内容分类。
智能小程序常见信息架构模型
尊重用户的使用习惯。在用户完成任务的流程中,采用“从哪来,回哪去”的导航路径最符合用户心理预期和心智模型的交互方式。
用户使用路径:从哪来,回哪去
降低用户操作成本。考虑到移动设备的屏幕大小和使用环境,应尽量减少用户的输入交互,而改为操作成本更低的选择型交互;当然,应用百度智能识图能力,智能语音识别等能力,自动完成信息输入,能进一步降低用户操作成本。
智能小程序更多智能能力已陆续建设开放,未来将继续助力开发者用更智能的方式、更好地减少用户的操作成本,使智能小程序的交互流程更加顺畅。
合理排版,有效传达信息。阅读体验的好坏取决于排版,这考验我们开发者组织和呈现信息的能力。强调主要内容,弱化次要信息,把页面间不同的信息层次拉开,用户可以快速辨认和获取所需内容。
内容排版正误示例
智能小程序设计文档中有不同场景信息层级的字号使用建议,如标题、正文、摘要等,方便开发者了解阅读排版节奏。在这基础上,可以结合自身产品特点再加以发挥创新,定义更优的阅读节奏。
内容排版字号使用建议
有强弱区分的主次功能。好的阅读体验能让用户清晰定位并找到所求。
在下图购买火车票案例中,在去程票的购买完成页面,两个操作按钮展现都使用蓝色大按钮,会导致用户在选择过程中可能会迟疑;而在主次功能操作做了区分强调,能引导用户注意力优先级,降低了用户选择和思考的成本。
按钮排版正误示例
保证清晰易读。合理的运用色彩对比度关系,是界面内容清晰展现的关键。我们建议开发者选用组件时,选择与当前颜色对比度更大的样式。
例如:当颜色饱和度较低时,选用左列黑色样式的顶部导航栏,而当颜色饱和度较高时,使用右列反白样式,使信息可读性更好。
顶部导航栏选用建议
用色符合用户理解认知。色彩的表意会对功能引导有影响。
例如,灰色代表着不可用。因此设置按钮的颜色时,如果使用灰色的按钮文字,用户可能会认为按钮是置灰不可用的,从而让用户产生额外的理解决策成本。而使用右图肯定、直接、明了的蓝色,则能有效明示操作可行性。
按钮颜色使用正误示例
图形清晰可辨识。LOGO就是小程序递给用户的第一张名片。这张名片应该清晰可辨,这是用户能在快速一瞥间留下印象的前提。很多开发者会使用自己的小程序名称作为LOGO,但要生硬地把长长名称嵌套成LOGO的方式并不可取。
LOGO设计的正误示例
爱说唱小程序的LOGO映射产品年轻娱乐的特点
AI分诊助手的LOGO,使用听诊器与心形结合的创意设计,简洁克制的蓝白配色,彰显了它作为医疗属性工具小程序的专业和严谨。
AI分诊助手小程序的LOGO映射产品科学严谨的特点
建议输出时,将LOGO的主要图形控制中间红色区域,也就是大约占正方形图片70%左右,这样能保证logo展现完整,而适当的留白,也让logo的阅读更舒适。
LOGO设计和输出的正误示例
(1)“减减鸭”智能小程序在设计交互转场引导时,在放松舒缓的练习结束后,上移的光晕巧妙地将用户的注意力顺应着其运动的方向转移,自然地引出结果;
(2)“春节摇红包”智能小程序在摇红包的交互过程中,使用撒金币动效,增加用户摇红包的真实互动感。
(3)而“星动”智能小程序则在解锁动效中使用了类似游戏的技能触发特效,为整个活动增加了生动感和趣味性。
全面屏适配。随着全面屏手机的普及,我们也应该注意它们新增的系统特性。
全面屏适配的正误示例
考虑容错展现。页面没有正确展现内容,可能是因为网络信号突然断开,或者是用户的百度APP版本需要升级,适当的引导提示,能大大减少用户与“困惑的空白”的相遇机会。
数据异常页面展现的正误示例
为了减少这些空白,我们总结了一些常见的空态情况,并放在视觉组件库供大家使用,希望以后智能小程序令人困惑的空白们会越来越少。
百度智能小程序设计组件库中的空态图标
智能小程序体验设计指南:描述智能小程序的设计原则,提供了交互和视觉层面的设计实践建议。