百度小程序设计要求5个方面特别注意

2021-03-17 15:34:28发布

在百度智能小程序的设计上,百度官方提出了5个要求,对于这些要求,运营者一定要特别注意,并且尽可能地按照要求来设计。


布局:重视排版视觉优先


很多时候,用户进入一款百度智能小程序的第一感受的来源,除了页面内容之外,更多的还是来自页面的布局排版。因此,运营者在设计百度智能小程序时一定要重视排版布局,优先考虑内容的视觉感受。


在布局排版方面,有几个方面需要特别注意。首先是内容边距。运营者需要为百度智能小程序选择合适的内容边距,该边距不宜过宽或过窄。为百度智能小程序内容边距的正确和错误示例。


其次是内容的排版方式。运营者应该考虑用户的视觉浏览习惯。通常来说,用户都是“从上往下,从左往右”浏览信息的,对此,运营者在设计百度智能小程序时可以尽可能地把主要的、重要的内容放置在屏幕的左侧。


另外,为了更好地迎合用户的阅读习惯,在内容的排版方向上,运营者应尽可能地避免采用竖向排版和横竖排版混用的排版方式。


避免采用竖向排版和横竖排版混用


接着是字号的选择。百度智能小程序官方对于各场景的字号选择有着明确的要求。所示为百度智能小程序字号设计标准,运营者可以根据该标准选择合适的字号。


最后是字体颜色的选择。和字号的选择一样,百度智能小程序官方对字体颜色的选择同样有着相对严格的标准。所示为百度智能小程序字体颜色的设计标准,运营者可以根据实际情况选择合适的字体颜色。


百度智能小程序字号设计标准


许多运营者都清楚一个道理,那就是“一图胜千言”。相比于文字,图片往往更能快速吸引用户,并且也更容易在用户心中建立一个可视化的鲜明形象。因此,在百度智能小程序的设计中,图片的选择就显得尤为重要了。


运营者在选择图片时,首先要做到的就是使用清晰的图片,让用户可以清晰获知图片的内容;其次,不同类型的图片,在百度智能小程序中呈现的方式有所不同,运营者需要根据各类型的显示方式选择合适的图片。图3-13所示为百度智能小程序正常加载状态下各类图片的显示效果。



图表可以在运营者的内容表达上起辅助作用,让用户更好地理解相关信息。在百度智能小程序中,各类图标的选择都有着严格的标准。运营者在设计百度智能小程序的过程中,只需根据该标准选择合适的图标即可。


措辞:称谓用词都需讲究


在百度智能小程序的措辞上,主要有3个方面需要特别注意,即称谓、用词和标点。接下来分别进行解读。


1.称谓


在称谓上,百度智能小程序应该尽可能地采用第二人称的“你”来称呼用户,这样做的好处就在于能够拉近与用户之间的距离,让用户感觉运营者好像是在和自己说话似的。


除了第二人称之外,有时候运营者也需要使用到第一人称,用以强调用户对内容或操作的知情权及操作权。例如,在电商类百度智能小程序中,运营者可能需要设置“我的订单”版块,用以呈现用户的订单情况。


虽然第一人称和第二人称可能运营者都需要用到,但是运营者仍需避免因为混用而给用户造成困扰。例如,“在我的订单中修改你的地址”这种称谓的混用便很容易让用户疑惑。


2.用词


从用词方面来看,百度智能小程序面对的是国内用户,因此,文字应该尽可能地用中文进行表达。而在文字的具体呈现上,运营者应该考虑到百度智能小程序面对的大部分受众只是普通用户,在用词上应该选择普通用户能够看懂的表达。为百度智能小程序表达用词的正确和错误示例。


3.标点


标点符号看上去有些无关大雅,但是它却能直观地向用户传达运营者的表达意图。在使用标题符号时,运营者需要注意3点,具体如下。


①要使用中文全角标点符号。


②疑问句结尾时应该使用“?”。


③感叹用“!”表示,但是因为其表达的语气比较强烈,所以运营者应尽可能地避免在错误提醒时使用“!”。百度智能小程度标点符号的正确和错误示例。


组件:参考标准正确设置


百度智能小程序官网中为运营者提供了参考的标准,在开发百度智能小程序的过程中,运营者只需根据标准进行正确设置即可。接下来对顶部导航栏、底部标签栏、按钮、列表、输入、反馈提示和提示框的参考标准分别进行说明。


1.顶部导航栏


百度智能小程序的顶部导航栏的框架由官方统一提供,用以指示当前位置,起到页面导航的作用。它始终在屏幕顶部,不会随着页面滚动而隐藏。百度智能小程序的顶部导航栏由4部分构成,为顶部导航栏的元素解构示意图。


2.底部标签栏


底部标签栏通常用于首页视图导航的切换。当然,除了首页之外,在一些其他页面中可能也会设置底部标签栏。底部标签栏位于页面底部,和顶部导航栏相同,它是不随页面滚动而隐藏的。百度智能小程序底部标签栏由两部分构成,为底部标签栏的元素解构示意图。


3.按钮


在百度智能小程序中主要有两类按钮,一类是大按钮,另一类是小按钮。下面对这两类按钮的参照标准分别进行解读。


大按钮的高度固定为88px(44pt),圆角大小固定为8px(4pt)。运营者在自定义按钮文字时,应该尽可能地将文字长度控制在8个字符之内,因为字符太多会影响整体的观感。而各类大按钮的设置也有着一定的标准,所示为各类大按钮的设置标准。


小按钮高度固定为56px(28pt),宽度最小114px(57pt),圆角大小固定为6px(3pt)。当小按钮内的文字较多时,运营者可以通过适度拉伸宽度的方式,增加小按钮的观感。百度智能小程序官方提供了各类小程序的设置标准。


4.列表


列表是由多个等宽列表项组成,并按一定规律排列的连续条目序列,支持上下垂直滚动和响应点击操作。根据列表的内容排列情况,列表可以分为单行列表和双行列表两类,这两类列表的设置标准


5.输入


百度智能小程序的输入设计主要包括3个方面的内容,即输入表单、文本输入框和键盘。接下来分别进行说明。


百度智能小程序的输入表单由一系列文本输入框组成,支持上下垂直滚动,用户输入信息并确认后,表单将提交输入结果。为百度智能小程序的输入表单示例图。


文本输入框即可供用户输入文本内容的框型组件。在百度智能小程序中,输入的文本内容类型不同,其显示的效果也会有所差异。为不同文本内容的输入显示效果。


输入键盘方面,百度智能小程序为运营者提供了两种类别的键盘组件,一种是默认键盘,另一种是纯数字键盘。在设计百度智能小程序的输入键盘时,运营者只需根据需求进行选择即可。


6.反馈提示


反馈提示用于向用户提供其行为的简洁的结果反馈。它既不会阻塞用户后续行为,也不要求用户响应操作,在同步用户展现信息一定时间(可设置,不建议超过7s)后便自动消失。在连续反馈的场景中,新的反馈提示会被优先展现。


在反馈提示设计的过程中,运营者需要重点把握两个方面的内容,一是反馈图标,二是提示文案。


在图文Toast中,反馈图标默认存在并设定为Success。反馈图标应该将结果清楚地呈现给用户。当开发者不需要图标时,可去掉图标,使用纯文Toast。为百度智能小程度反馈图标的正确和错误示例。


反馈提示的提示文案对字数有一定的要求,在图文Toast中,最多显示7个中文汉字,当中文汉字超过7个时,提示文案将显示不完全。所以,在设计提示文案时,应尽可能地将字数控制在7个之内。所示为百度智能小程序提示文案的正确和错误示例。


7.提示框


提示框主要用以告知用户接下来的操作的信息,可以起到提醒、帮助用户确认操作的作用。需要说明的是,因为提示框是在原界面的基础上直接弹出来的,它的出现会打断用户的当前操作。所以,如无必要,运营者应该减少提示框的设置。提示框由5部分构成,所示为提示框的元素解构图。


而在提示框的设置方面,需要注意两点。一是标题。提示框的标题应该尽可能地简短清晰。百度智能小程序提示框标题的正确和错误示例


二是内容。提示框的内容应该是对标题的补充,而不只是一味地重复标题的内容。为百度智能小程序提示框内容的正确和错误示例。

TAG标签:

登录 后发表评论
0条评论
还没有人评论过~