⼩程序设计指南⼩程序ui设计规范汇总
⼩程序ui设计规范汇总：
⼩程序是⼀种全新的应⽤形态，⼩程序平台不需要下载安装即可使⽤应⽤的平台，⼩程序实现了应⽤“触⼿可及”的梦想，⽤户扫⼀扫或者搜⼀下即可打开应⽤。状态背景图更改
也体现了“⽤完即⾛”的理念，⽤户不⽤关⼼是否安装太多应⽤的问题。应⽤将⽆处不在，随时可⽤，但⼜⽆需安装卸载。
概要
基于⼩程序轻快的特点，我们拟定了⼩程序界⾯设计指南和建议。设计指南建⽴在充分尊重⽤户知情权与操作权的基础之上。旨在⽣态体系内，建⽴友好、⾼效、⼀致的⽤户体验，同时最⼤程度适应和⽀持不同需求，实现⽤户与⼩程序服务⽅的共赢。
友好礼貌
为了避免⽤户在中使⽤⼩程序服务时，注意⼒被周围复杂环境⼲扰，⼩程序在设计时应该注意减少⽆关的设计元素对⽤户⽬标的⼲扰，礼貌地向⽤户展⽰程序提供的服务，友好地引导⽤户进⾏操作。
重点突出
每个页⾯都应有明确的重点，以便于⽤户每进⼊⼀个新页⾯的时候都能快速地理解页⾯内容，在确定了重点的前提下，应尽量避免页⾯上出现其他⼲扰项影响⽤户的决策和操作。
反例⽰意
此页⾯的主题是查询，却添加了诸多与查询不相关的业务⼊⼝，与⽤户的预期不符，易造成⽤户的迷失。
纠正⽰意
去掉任何与⽤户⽬标不相关的内容，明确页⾯主题，在技术和页⾯控件允许的前提下提供有助于⽤户⽬标的帮助内容，⽐如最近搜索词，常⽤搜索词等。
反例⽰意
操作没有主次，让⽤户⽆从选择
纠正⽰意
⾸先要避免并列过多操作让⽤户选择，在不得不并列多个操作时，需区分操作主次，减轻⽤户的选择难度。
流程明确
为了让⽤户顺畅地使⽤页⾯，在⽤户进⾏某⼀个操作流程时，应避免出现⽤户⽬标流程之外的内容⽽打断⽤户。
反例⽰意
⽤户本打算进⾏搜索，在进⼊页⾯时却被突如其来的抽奖弹窗所打断；对于抽奖没有兴趣的⽤户是⾮常不友好的⼲扰; ⽽即便有部分⽤户确实被“诱⼈”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的⽬标，进⽽失去了对产品真正价值的利⽤和认识。
清晰明确
⼀旦⽤户进⼊我们的⼩程序页⾯，我们就有责任和义务清晰明确地告知⽤户⾝在何处、⼜可以往何处去，确保⽤户在页⾯中游刃有余地穿梭⽽不迷路，这样才能为⽤户提供安全的愉悦的使⽤体验。
导航明确，来去⾃如
导航是确保⽤户在⽹页中浏览跳转时不迷路的最关键因素。导航需要告诉⽤户，我在哪，我可以去哪，如何回去等问题。⾸先在系统内的所有⼩程序的全部页⾯，均会⾃带提供的导航栏，统⼀解决我在哪，如何回去的问题。在层级导航保持体验⼀致，有助于⽤户在内形成统⼀的体验和交互认知，⽆需在各⼩程序和切换中新增学习成本或改变使⽤习惯。
导航栏
导航栏，直接继承于客户端，除导航栏颜⾊之外，开发者⽆需亦不可对其中的内容进⾏⾃定义。但开发者需要规定⼩程序各个页⾯的跳转关系，让导航系统能够以合理的⽅式⼯作。
导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页⾯进程。⽬前导航栏分深浅两种基本配⾊。
导航区(iOS)
导航区通常只有⼀个操作，即返回上⼀级界⾯。
导航区(Android)
同iOS⼀样，导航区也只有⼀个返回上⼀级页⾯的操作，⽽点击安卓⼿机⾃带的硬件返回键也起到相同作⽤。
导航栏⾃定义颜⾊规则(iOS和Android)
⼩程序导航栏⽀持基本的背景颜⾊⾃定义功能，选择的颜⾊需要在满⾜可⽤性前提下，和谐搭配提供的两套主导航栏图标。建议参考以下选⾊效果：
选⾊⽅案⽰例
页⾯内导航
开发者可根据⾃⾝功能设计需要在页⾯内添加⾃有导航。并保持不同页⾯间导航⼀致。但是受限于⼿机屏幕尺⼨的限制，⼩程序页⾯的导航应尽量简单，若仅为⼀般线性浏览的页⾯建议仅使⽤导航栏即可。
开发者可选择⼩程序页⾯添加标签分页(Tab)导航。标签分页栏可固定在页⾯顶部或者底部，便于⽤户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。⼀个页⾯也不应出现⼀组以上的标签分页栏。
其中⼩程序⾸页可选择提供的原⽣底部标签分页样式，该样式仅供⼩程序⾸页使⽤。开发时可⾃定义图标样式、标签⽂案以及⽂案颜⾊等，具体设置项可参考开发⽂档。
顶部标签分页栏颜⾊可⾃定义。在⾃定义颜⾊选择中，务必注意保持分页栏标签的可⽤性、可视性和可操作性。
减少等待，反馈及时
页⾯的过长时间的等待会引起⽤户的不良情绪，使⽤⼩程序项⽬提供的技术已能很⼤程度缩短等待时间。即便如此，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓⽤户等待的不良情绪。
启动页加载
⼩程序启动页是⼩程序在内容⼀定程度上展现品牌特征的页⾯之⼀。本页⾯将突出展⽰⼩程序品
牌特征和加载状态。启动页除品牌标志(Logo)展⽰外，页⾯上的其他所有元素如加载进度指⽰，均由统⼀提供且不能更改，⽆需开发者开发。
发布评论