文档库 最新最全的文档下载
当前位置:文档库 › 微信小程序的官方设计指南和建议(最新规范抢先看)

微信小程序的官方设计指南和建议(最新规范抢先看)

微信小程序的官方设计指南和建议(最新规范抢先看)
微信小程序的官方设计指南和建议(最新规范抢先看)

c基于微信小程序轻快的特点,我们(微信官方)拟定了小程序界面设计指南和建议。设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢。

一、友好礼貌

为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地引导用户进行操作。

重点突出

每个页面都应有明确的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容,在确定了重点的前提下,应尽量避免页面上出现其他干扰项影响用户的决策和操作。

反例示意

此页面的主题是查询,却添加了诸多与查询不相关的业务入口,与用户的预期不符,易造成用户的迷失。

纠正示意

去掉任何与用户目标不相关的内容,明确页面主题,在技术和页面控件允许的前提下提供有助于用户目标的帮助内容,比如最近搜索词,常用搜索词等。

反例示意

操作没有主次,让用户无从选择

纠正示意

首先要避免并列过多操作让用户选择,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。

流程明确

为了让用户顺畅地使用页面,在用户进行某一个操作流程时,应避免出现用户目标流程之外的内容而打断用户。

反例示意

用户本打算进行搜索,在进入页面时却被突如其来的抽奖弹窗所打断;对于抽奖没有兴趣的用户是非常不友好的干扰;而即便有部分用户确实被“诱人”的抽奖活动所吸引,离开主流程去抽奖之后可能就遗忘了原本的目标,进而失去了对产品真正价值的利用和认识。

二、清晰明确

一旦用户进入我们的小程序页面,我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路,这样才能为用户提供安全的愉悦的使用体验。

导航明确,来去自如

导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户,我在哪,我可以去哪,如何回去等问题。首先在微信系统内的所有小程序的全部页面,均会自带微信提供的导航栏,统一解决我在哪,如何回去的问题。在微信层级导航保持体验一致,有助于用户在微信内形成统一的体验和交互认知,无需在各小程序和微信切换中新增学习成本或改变使用习惯。

微信导航栏

微信导航栏,直接继承于客户端,除导航栏颜色之外,开发者无需亦不可以对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系,让导航系统能够以合理的方式工作。

微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色,在iOS和Android展示有所不同,如下图所示:导航区(iOS):

导航区通常只有一个操作,即返回上一级界面。开发者可定义其内容,不可对样式进行修改

导航区(Android):

同iOS一样,导航区也只有一个返回上一级页面的操作,而点击安卓手机自带的硬件返回键也起到相同作用。

微信导航栏自定义颜色规则(iOS和Android)

小程序导航栏支持基本的背景颜色自定义功能,选择的颜色需要在满足可用性前提下,和谐搭配微信提供的两套主导航栏图标。建议参考以下选色效果:

选色方案示例:

页面内导航

开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致。但是受限于手机屏幕尺寸的限制,小程序页面的导航应尽量简单,若仅为一般线性浏览的页面建议仅使用微信导航栏即可。

微信控件库提供标签分页(Tab)导航供开发者选择。标签分页栏可固定在页面顶部或者底部,便于用户在不同的分页间做切换。为确保点击区域,标签不得超过4项。一个页面也不应出现一组以上的标签分页栏。

标签分页栏选中态默认为100%实色,未选中态带有60%,其中选中态颜色可自定义。在自定义颜色选择中,务必注意保持分页栏标签的可用性、可视性和可操作性。

减少等待,反馈及时

页面的过长时间的等待会引起用户的不良情绪,使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此,当不可避免的出现了加载和等待的时候,需要予以及时的反馈以舒缓用户等待的不良情绪。

启动页加载

小程序启动页是小程序在微信内容一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需开发者开发。

页面下拉刷新加载

在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式。开发者可自定义需要通过下拉交互完成刷新的页面,此类交互微信将提供标准能力和样式。在样式上,刷新图标与下拉标示配色已捆绑,分为深浅两套方案,开发者在使用时,应注意头部文字、下拉标识与刷新图标的和谐统一。当用户在该类页面做出下拉交互时,出现微信小程序页面标准加载动画。开发者无需自行开发样式

带有标签分页(Tab)页面的下拉刷新加载

若页面带有标签分页(Tab),开发者可将刷新动作位置定义到标签栏之下,且仅刷新当前页面内容,开发者暂无法自行定义此加载效果。

深浅两套下拉样式

微信下拉提示用于给用户明确的小程序归属者,防止造假与作弊。此处标示提供深浅两套方案,文字颜色不可自定义,开发者在自定义背景色时,应注意保证下拉标示的辨识度。iOS和Android配色方案相同如下展示。

微信下拉标示错误使用案例

请避免以下错误使用情况,确保信息的可见性和页面的可用性。

页面内加载反馈

开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全体,自定义加载样式都应该尽可能简洁,并使用简单动画告知用户加载过程。开发者也可以使用微信提供的,统一的页面加载样式,如图中例所示。

模态加载

模态的加载样式将覆盖整个页面的,由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感,因此应谨慎使用。除了在某些全局性操作下不要使用模态的菊花。

局部加载反馈

即只在触发加载的页面局部进行反馈,这样的反馈机制更加有针对性,页面改动小,是微信推荐的反馈方式。例如:

加载反馈注意事项

?若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。

?载入过程中,应保持动画效果; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。

?不要在同一个页面同时使用超过1个加载动画。

结果反馈

除了在用户等待的过程中需予以及时反馈外,对操作的结果也需要予以明确反馈。根据实际情况,可选择不同的结果反馈样式。对于页面局部的操作,可在操作区域予以直接反馈,对于页面级操作结果,可使用弹出式提示(Toast)、模态对话框或结果页面展示。

页面局部操作结果反馈

对于页面局部的操作,可在操作区域予以直接反馈,例如点击多选控件前后如下图。对于常用控件,微信设计中心将提供控件库,其中的控件将提供完整操作反馈。

页面全局操作结果——弹出式提示(Toast)

弹出式提示(Toast)适用于轻量级的成功提示,1.5秒后自动消失,并不打断流程,对用户影响较小,适用于不需要强调成功状态的操作提醒。特别注意该形式不适用于错误提醒。

页面全局操作结果——模态对话框

对于需要用户明确知晓的操作结果状态可通过模态对话框来提示,并可附带下一步操作指引。

页面全局操作结果—结果页

对于操作结果已经是当前流程的终结的情况,可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成,并可根据实际情况给出下一步操作的指引。

异常可控,有路可退

在设计任何的任务和流程时,异常状态和流程往往容易被忽略,而这些异常场景往往是用户最为沮丧和需要帮助的时候,因此需要格外注意异常状态的设计,在出现异常时予以用户必要的状态提示,并告知解决方案,使其有路可退。

要杜绝异常状态下,用户莫名其妙又无处可去,卡在某一个页面的情况。2.2中所提到的弹窗和结果页面都可作为异常状态的提醒方式。除此之外,在表单页面中尤其是表单项较多的页面中,还应明确指出出错项目,以便用户修改。

异常状态——表单出错

表单报错,在表单顶部告知错误原因,并标识出错误字段提示用户修改

微信小程序设计规范

概要 微信小程序设计的基本原则是微信设计中心针对在微信内上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的,旨在微信生态内建立友好、高效、一致的用户体验的同时,最大程度顺应和支持各业务需求设计,实现用户与程序的共赢。 一、友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序侧提供的服务,友好地引导用户进行操作。 1. 重点突出 每个页面都应有明确的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容,在确定了重点的前提下,应尽量避免页面上出现其他干扰项影响用户的决策和操作。 反例示意 此页面的主题是查询,却添加了诸多与查询不相关的业务入口,与用户的预期不符,易造成用户的迷失。

纠正示意 去掉任何与用户目标不相关的内容,明确页面主题,在技术和页面控件允许的前提下提供有助于用户目标的帮助内容,比如最近搜索词,常用搜索词等。 反例示意 操作没有主次,让用户无从选择

纠正示意 首先要避免并列过多操作让用户选额,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。

2. 流程明确 为了让用户顺畅地使用页面,在用户进行某一个操作流程时,应避免出现用户目标流程之外的内容而打断用户。 反例示意 用户本打算进行搜索,在进入页面时却被突如其来的抽奖弹窗所打断;对于抽奖没有兴趣的用户是非常不友好的干扰,平添一份对开发团队的恼怒;而即便有部分用户确实被“诱人”的抽奖活动所吸引,离开主流程去抽奖之后可能就遗忘了原本的目标,进而失去了对产品真正价值的利用和认识。 二、清晰明确 作为一个负责任的开发者,一旦用户进入我们的小程序页面,就有责任和义务清晰明确地告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路,这样才能为用户提供安全的愉悦的使用体验。

《微信小程序开发图解案例教程》教学教案—第3章教案用微信小程序组件构建UI界面2

第3章用微信小程序组件构建UI界面

教学过程 3.8沙场大练兵:表单登录注册微信小程序 微信小程序里有丰富的表单组件,通过这些组件的使用,来完成京东登录界面、手机快速注册界面、企业用户注册界面的微信小程序设计,如图所示。 登录手机快速注册企业用户注册 会用到view视图容器组件、button按钮组件、image图片组件、input输入框组件、checkbox多项选择器组件、switch开关选择器组件、navigator页面链接组件等组件的使用,将这些组件进行界面的布局设计来完成表单登录和注册设计。 3.8.2登录设计 在登录表单里,输入账号、密码进行登录,在账号、密码输入框里都有友好的提示信息;登录按钮默认是灰色不可用状态,只有输入内容后,才会变为可用状态;在登录按钮的下面提供手机快速注册、企业用户注册、找回密码链接;界面最下面是微信、QQ第三方登录方式,如图所示。

登录界面 (1)添加一个form项目,填写AppID,只有填写AppID,form微信小程序才能在手机上浏览效果,如图所示。 添加form项目 (2)在app.json文件里添加“pages/login/login”“pages/mobile/mobile” “pages/company/company”3个文件目录,并删除默认的文件目录以及相应的文件夹,如图所示。 app.json配置 (3)在“pages/login/login”文件里,进行账号密码输入框布局设计,并添加相应的样式,代码

输入框布局设计 (4)在“pages/login/login”文件里,进行登录按钮、手机快速注册、企业用户注册、找回密码以及第三方登录布局的设计,并添加相应的样式,代码如下所示。 login.wxml 手机快速注册 企业用户注册 找回密码 login.wxss .content{ margin-top: 40px; } .account{

微信小程序设计规范

微信小程序设计规 范

概要 微信小程序设计的基本原则是微信设计中心针对在微信内上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的,旨在微信生态内建立友好、高效、一致的用户体验的同时,最大程度顺应和支持各业务需求设计,实现用户与程序的共赢。 一、友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序侧提供的服务,友好地引导用户进行操作。 1. 重点突出 每个页面都应有明确的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容,在确定了重点的前提下,应尽量避免页面上出现其它干扰项影响用户的决策和操作。 反例示意 此页面的主题是查询,却添加了诸多与查询不相关的业务入口,与用户的预期不符,易造成用户的迷失。

纠正示意 去掉任何与用户目标不相关的内容,明确页面主题,在技术和页面控件允许的前提下提供有助于用户目标的帮助内容,比如最近搜索词,常见搜索词等。 反例示意 操作没有主次,让用户无从选择

纠正示意 首先要避免并列过多操作让用户选额,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。

2. 流程明确 为了让用户顺畅地使用页面,在用户进行某一个操作流程时,应避免出现用户目标流程之外的内容而打断用户。 反例示意 用户本打算进行搜索,在进入页面时却被突如其来的抽奖弹窗所打断;对于抽奖没有兴趣的用户是非常不友好的干扰,平添一份对开发团队的恼怒;而即便有部分用户确实被“诱人”的抽奖活动所吸引,离开主流程去抽奖之后可能就遗忘了原本的目标,进而失去了对产品真正价值的利用和认识。 二、清晰明确 作为一个负责任的开发者,一旦用户进入我们的小程序页面,就有责任和义务清晰明确地告知用户身在何处、又能够往何

微信小程序项目实施计划书

校园共享小程序创业计划书

项目名称:报送学校:指导教师:项目申报人:项目类别:联系:

电子: 目录 第一章项目摘要 (3) 1项目产品 (3) 2创业团队 (4) 第二章项目介绍 (4) 1项目的创意背景、技术(创意) (4) 2前景分析 (8) 第三章市场分析 (9) 1市场需求分析 (9) 2项目竞争力分析 (10) 第四章总体进度安排与发展策略 (11) 1项目总体安排 (11) 2项目开发、生产策略 (12) 3项目市场营销策略 (12) 4项目获利方式 (13) 第五章创业团队 (15) 1自我评价 (16)

第六章资金运作与财务预测 (16) 1项目其中资金来源与运营计划 (16) 第一章项目摘要 近年来,我国经济由高速度发展转为高质量发展,总体呈现出稳健发展趋势。经济发展带来的巨大红利,引发了科学技术革命,从而极大地改变了人们的生活方式。微信及微信小程序的产生,便是一个很好的例子。 1项目产品 小程序,一句话说,就是所见即所得。微信的负责人小龙给出了更全面的定义:“小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。对于开发者而言,小程序开发门槛相对较低,难度

不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换。” 我们即将开发的一款校园微信小程序,是一款具有公益性质的产品,对所有的用户完全免费。我们开发的这款小程序,能够实现消息通知、线下扫码、对话分享、公众号关联等七大功能。其中,通过公众号关联,用户可以实现公众号与小程序之间相互跳转。这款小程序开发的目的,旨在为校园大学生们提供一个信息交互平台,为校园大学生服务。 2创业团队 第二章项目介绍 1项目的创意背景、技术(创意) 考虑到目前在校学生消费能力偏弱,获取有针对性的信息渠道偏少,开展一些活动也仅仅局限于班级、社团,无法面向整个校园开展一些共享、发布需求的活动。 我们团队借鉴咸鱼、滴滴等交易、共享类软件方式,有针对

微信小程序平台运营规范

微信小程序平台运营规范 一、原则及相关说明 微信最核心的价值,就是连接——提供一对一、一对多和多对多的连接方式,从而实现人与人、人与智能终端、人与社交化娱乐、人与硬件设备的连接,同时连接服务、资讯、商业。 微信团队一直致力于将微信打造成一个强大的、全方位的服务工具。在此基础上,我们推出了微信小程序这个产品,提供给微信小程序的开发者在微信内搭建和实现特定服务、功能的平台。通过全面开放的能力,我们将更多连接的可能给予企业和服务提供者,并为微信小程序提供基础的接入能力、运营环境和规则体系,进而帮助更多的企业和服务提供者建立自己的品牌,将商业机会带给整个微信产业链。 在开始微信小程序的开发前,我们希望微信小程序开发者(以下也称为“你”)已经仔细阅读了《微信小程序接入指南》、《微信小程序设计规范》、《微信小程序开发指南》等,如果你选择了游戏类目,你还需仔细阅读《微信小游戏接入指南》、《微信小游戏开发指南》等;同时,我们也为你准备了微信小程序平台常见拒绝情形。希望这些指南和规范,能够一定程度上帮助你解决开发、运营微信小程序过程中所遇到的疑问。 我们希望你提交的微信小程序,能够符合微信团队一直以来的价值观,那就是:一切以用户价值为依归、让创造发挥价值、好的产品是用完即走,以及让商业化存在于无形之中。在切实符合用户的合理需求和利益的前提下,通过微信小程序所提供的功能和服务,为海量微信用户提供具有持续价值和高品质的服务。我们期待你来提交你的微信小程序。 二、具体运营规范 使用微信小程序平台的服务,你必须阅读并遵守《微信小程序平台服务条款》,以及腾讯为此制定的专项规则等。本运营规范是在上述协议及规则基础上进行解释和说明,相关内容旨在帮助你更加清晰地理解和遵守相关协议和规则,以便能够更加顺利地在微信小程序平台进行运营,而不是修改或变更上述协议及规则中的任何条款。如果我们认为你的微信小程序违反了我们的条款、相关平台规则或法律法规,或对微信公众平台、微信开放平台造成了影响,则微信有权对你的微信小程序采取强制措施,包括但不限于限制你的微信小程序访问平台功能、封禁小程序、要求删除数据、终止协议等。 1.注册提交规范 1.1提供给用户可以联络到开发者的链接或电子邮箱等有效联系方式。 1.2提供给平台联络到开发者的管理员微信号,并保证该微信号真实有效。 1.3你所提交的微信小程序,不得关联至你不具有完整合法权益或不具备完整授权的网站、应用程序、产品或服务等。 1.4为保障平台和其他用户的安全、稳定,我们会在你提交微信小程序、运营微信小程序等全过程中,要求你提供相应的材料、进行相应的修改等补充和调整,你应当按照我们的要求协助我们进行审核,否则,将影响审核的结果。

微信小程序制作方案及流程

微信小程序制作方案及流程 从运营的角度讲制作,不是从程序的角度讲开发,所以简单明晰,通俗易懂。 (一)微信小程序背景作用 微信小程序十分火热,传闻说是要和应用市场竞争,这不可能。除非你替代IOS系统和安卓系统的手机,载体已经决定了性质。 其实,微信小程序功能,更多的是未了给用户提供更优质的服务。微信试图在商业服务领域进一步开发社交平台的商业价值。微信开放平台,接入了京东,滴滴打车,外卖等,这些平台本身已经拥有较大的影响力和价值,但却没有像淘宝那样,把线下的所有商家都尽可能的搬到移动端平台上。这才是微信小程序的目的。 微信小程序其实很久以前就有,记得刚开始搜索附近人的时候,微信已经开通了门店功能,附近的优质门店就会展示出来,小程序,正是把这一功能单独提炼出来,把它做大做好。 微信公众号有很多功能,此前流行微信公众号开发,微官网,微店,微营销等,甚至,微信不能链接淘宝店,有的链接是移动官网,好像似乎都不尽人意。其实,微信小程序,就是拿来供微信链接用的,进一步提升并解决微信开发,微店,微官网等没有做好的地方。你可以试试做一个好的微信小程序,来推广你的业务或服务,以及一些有趣的应用。 这正是微信小程序的作用和目的。 (二)微信小程序制作 从运营的角度讲制作,不是从程序的角度讲开发,所以简单明晰,通俗易懂,小白也能按照流程完成制作。 微信小程序制作流程 1.确定好微信小程序的的定位和目的 如行业,功能,内容,目标用户,目标市场,意向名单,专业作用等。 2.落实小程序的程序制作公司,或者团队 若是外部团队,要签订合同,打款之前,到公司实地考察情况。小程序制作的公司很多,并不是每家公司都会制作出你心仪的小程序。这要考察,更要好好沟通。 3.确定好小程序制作文案资料 包括设计需求,功能项目,表格表单,广告语言,模板栏目,按钮,跳转链接,运行逻辑,计算公式,展现手段等。 4.小程序设计方案,设计图片出炉 交付美工设计,保持沟通,按照文案和沟通内容进行设计。初版审核,是否需要更改设计细节。敲定设计方案。 5.小程序设计切片,程序制作,后台制作

基于微信小程序的商城设计毕业论文

基于微信小程序的商城设计毕业论文 摘要 随着“互联网+”的大潮兴起,平台型应用再受热捧。其中,微信小程序凭借其强大的用户基础及其应用时的便捷而深受欢迎。在此基础上,以小程序为载体的社群电商,将具有相同兴趣的社群成员组织在一起,推广与之需求高度匹配的产品或服务,轻松实现流量变现。因此,结合以上优势设计并实现基于JavaWeb的小程序商城,具有一定的研究意义和商业价值,符合我国互联网精准化营销和个性化服务的趋势。 本系统主要由微信小程序客户端、服务器、数据管理端构成,前端代码基于Layui,封装工具类,使用的是H-ui Admin。客户端的页面实现通过网络与服务器REST API接口通信获取 MySQL数据。本人重点参与网上购物系统客户端、服务器以及数据库的设计、开发、测试工作。 在系统的设计与实现过程中,对客户端的代码进行全局的MVC模式设计控制,采用template模板增加代码的复用性,并创建客户端用户的token管理机制进行用户身份验证与权限分级。本文重点阐述小程序商城客户端的商品信息展示、商品分类、购物车、下单支付,个人信息管理及数据库设计六大模块的设计和实现过程。采用了JavaWeb和springboot框架作为后台开发,HTML+JS+CSS和微信web开发工具作为前端开发,遵守微信的开发规范,完成了小程序商城的基本功能,系统运行流畅,可以正常使用。 关键词:电商;JavaWeb;小程序商城;购物; ABSTRACT With the rise of "Internet ",platform-based applications are becoming more popular. Among them,WeChat Mini Program with its strong user base and its application when convenient and popular. On the basis of this,the community e-commerce with the small program as the carrier,will have the same interest community members to organize together,promotes the product or the service which is highly matched with its demand,realizes the flow realization easily. Therefore,combining the above advantages to design and implement the Mini Programs Mall based on Java Web has certain research significance and commercial value,which is in line with the trend of precision marketing and personalized service of the Internet in China. The system is mainly composed of WeChat Mini Program client,server,data management,front-end code based on Layui,encapsulating tool class,using H-ui Admin. The client's page implementation acquires MySQL data by communicating with the server REST API interface through the network. I focus on the online shopping system client,server and database design,development,testing work. In the design and implementation of the system,the client's code is controlled by the global MVC pattern design,the template template is used to increase the reusability of the code,and the client's token management mechanism is created for user authentication and permission classification. This paper focuses on the design and implementation of the six modules of the small program mall client's commodity information display,commodity classification,shopping cart,order payment,personal information management and database design. Using Java Web and SSM framework as background development,HTML JSCSS and WeChat web development tool as front-end development Send,abide by the development specifications of WeChat,completed the basic functions of Mini Programs Mall,the system runs smoothly,can be used normally. Keywords:E-commerce;Java Web;Mini Programs Mall;Shopping; 目录

微信小程序的官方设计指南和建议(规范抢先看)

c基于微信小程序轻快的特点,我们(微信官方)拟定了小程序界面设计指南和建议。设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢。 一、友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地引导用户进行操作。 重点突出 每个页面都应有明确的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容,在确定了重点的前提下,应尽量避免页面上出现其他干扰项影响用户的决策和操作。 反例示意 此页面的主题是查询,却添加了诸多与查询不相关的业务入口,与用户的预期不符,易造成用户的迷失。 纠正示意 去掉任何与用户目标不相关的内容,明确页面主题,在技术和页面控件允许的前提下提供有助于用户目标的帮助内容,比如最近搜索词,常用搜索词等。

反例示意 操作没有主次,让用户无从选择 纠正示意

首先要避免并列过多操作让用户选择,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。 流程明确 为了让用户顺畅地使用页面,在用户进行某一个操作流程时,应避免出现用户目标流程之外的内容而打断用户。 反例示意 用户本打算进行搜索,在进入页面时却被突如其来的抽奖弹窗所打断;对于抽奖没有兴趣的用户是非常不友好的干扰;而即便有部分用户确实被“诱人”的抽奖活动所吸引,离开主流程去抽奖之后可能就遗忘了原本的目标,进而失去了对产品真正价值的利用和认识。

二、清晰明确 一旦用户进入我们的小程序页面,我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路,这样才能为用户提供安全的愉悦的使用体验。 导航明确,来去自如 导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户,我在哪,我可以去哪,如何回去等问题。首先在微信系统内的所有小程序的全部页面,均会自带微信提供的导航栏,统一解决我在哪,如何回去的问题。在微信层级导航保持体验一致,有助于用户在微信内形成统一的体验和交互认知,无需在各小程序和微信切换中新增学习成本或改变使用习惯。 微信导航栏 微信导航栏,直接继承于客户端,除导航栏颜色之外,开发者无需亦不可以对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系,让导航系统能够以合理的方式工作。

微信小程序制作策划文案方案

微信小程序制作策划文案 ——以装修行业小程序为例子 下面是参考的文案模板: 微信小程序怎么制作? 微信小程序制作文案怎么写? 怎么策划制作一个小程序?这里分享给大家。 领导要求做微信小程序,怎么把领导提的功能需求,输出正确结果,让美工设计,程序员制作出来。 1.根据需求部门或领导的想法,把设计需求提炼出来。 2.撰写设计提纲,为设计页面提供文案 3.让美工设计根据文案进行设计 4.程序制作 5.上线申请,代码审核,发布 以下是两个微信小程序的制作文案,用来和美工设计,程序沟通的。按着制作文案,后面的小程序制作就不会偏离轨道,能按照想法顺利实施,便于多方沟通。 (一)装修报价器 设计页面: 设计需求 收集客户留取的信息:面积、户型、装修类型(半包、全包等)、电话、姓名。 计算方式:主要是面积,其次是风格。计算公式跟程序沟通确定。

制作文案(按照以下顺序设计) 1.首页海报: 10秒计算出装修价格(大字)预算是多少,提前知晓(小字) 2.首页计算器表格内容: 新房旧房 地区(请输入您所在城市) 面积(请输入面积)㎡ 户型三居室/四居室... 风格现代风格/混搭风格... 装修类型整装/基装 获取本地报价【按钮】 3.首页广告条1: 免费预约到店有礼(广告条,搭配图片:可跳转) 首页广告条2: 1.免费量房上门设计 2.环保时尚品质个性 4.电话咨询服务(按钮。023-XXXXXXXX,点击拨打) 5.首页结束语: 装修房子,本期特别推荐视觉色装饰 互联网家装方案解决者 家装家居服务行业领导者 让家居生活更简单、更快乐 官方网站:XXXXXXXXX 6.其他页面 点击本地报价弹出页面: 姓名: 电话: 跳转价格结果页面: 您的装修总价为:10.62万 7.温馨提示: 计算器的价格并不是精确的,若需准确报价您可以电话咨询 人工咨询按钮(023-XXXXXXXX 点击拨打) 8.返回重新计算报价(返回按钮) 新房价格计算公式: 基装价格=每平米价格*面积*风格(风格影响在后台输入百分比,后台输入每平米价格)

微信小程序设计规则

微信小程序设计规则 概要 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢。 友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地引导用户进行操作。 重点突出 每个页面都应有明确的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下,应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。 反例示意 此页面的主题是查询,却添加了诸多与查询不相关的业务入口,与用户的目标无关,易造成用户的迷失。

纠正示意 去掉任何与用户目标不相关的内容,明确页面主题,在技术和页面控件允许的前提下提供有助于用户决策和操作的帮助内容,比如最近搜索词等。 反例示意 操作没有主次,让用户无从选择。 纠正示意 首先要避免并列过多操作让用户选择,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。

流程明确 为了让用户顺畅地使用页面,在用户进行某一个操作流程时,应避免出现用户目标流程之外的内容而打断用户。 反例示意 用户本打算进行搜索,在进入页面时却被突如其来的模态抽奖框所打断;对于抽奖没有兴趣的用户是非常不友好的干扰;而即便有部分用户确实被“诱人”的抽奖活动所吸引,离开主流程去抽奖之后可能就遗忘了原本的目标,进而失去了对产品真正价值的利用和认识。

微信小程序—出行路径规划方案

微信小程序—出行路径规划方案 摘要:现代旅游人数飞速增加,我们开展了这个以路径规划问题为研究背景通 过区域间多方式出行路径规划问题的研究,结合现今火车,飞机,汽车等出行订 票APP提供的相关接口,从而研究到达目的地最适合的出行解决方案,提供完整 而廉价亦或快速的购票方案。 关键词:微信;路径规划;出行 ABSTRACT With the rapid development of the Internet,the widespread use of WeChat,people's demand for travel increased.We carried out this research on the path planning problem through the inter-regional multi-modal travel route planning problem,combined with the relevant interfaces provided by current train,airplane,car and other travel booking APPs,so as to study the most suitable travel solution to reach the destination. Key words:WeChat,path planning,travel 1.绪论 互伴随着互联网迅速发展,微信的广泛应用,人们对旅行需求的增加。我们 开展了这个以路径规划问题为研究背景通过区域间多方式出行路径规划问题的研究,结合现今火车,飞机,汽车等出行订票APP提供的相关接口,从而研究到达 目的地最适合的出行解决方案,提供完整而廉价亦或快速的购票方案,出行攻略。为当代人们的出行提供便利。 2.正文主题 2.1研究问题 随着现代人们生活水平的提高科技的进步,旅行变得越来越便捷与大众化, 据统计仅2017年上半年国出行人次就达到25亿人次,而随着出行方式的多元化,订票系统的完善便捷,未来的出行人数只会增长不会减少。而随着出行人数的不 断增长。虽然各大主要城市已陆续开通高铁,航空航线也不断增加,但仍然无法 满足人们日益增长的需求。 1.在节假日仍然会出现出行困难一票难求的情况。这以春运期间为甚,有时 甚至出现了为了回家而南辕北辙绕行千里亦或不得不借助旅行团回家的情况。 2.同时随着人们的收入提高,以及机票的平民化,在淡季有些航线的机票甚 至可以降到一折,所有费用加在一起甚至比绿皮火车的票价还要便宜。这时候我 们就要好好设计一下旅行计划在起点与目的地之间是否加入中转站点,等待,绕 行等等,来让自己的旅行计划更加合理高效一举多得。 但是要以以上两种出行方法出行往往是困难的。。数据的搜集与整理处理耗 费着人们大量的精力与时间。使人们往往很少使用这种方法,宁愿多花费一点时 间或金钱。 因此我们设计出这款微信小程序,用户只要输入起点与终点,程序根据设计 的算法自动处理数据,计算出最廉价最快捷以及综合最优的出行方案。输出这些 方案。 2.2程序设计 针对该小程序设计初衷,即为用户提供更加便利的出行方案的目的,我们直 接跳过用户的身份注册、完善个人信息资料等步骤,借助微信提供的登录端口使 用户直接成为该小程序的用户,省去用户注册的麻烦,直接上手。之后用户只要 输入起点与终点,程序进行运算,计算出最廉价最快捷以及综合最优的出行方案,

微信小程序入门指南

目 录 关于作者 (3) 前言 (5) 第一节 什么是小程序? (7) 第二节 小程序将给我们带来什么改变 (12) 第三节 小程序上手案例 (18) 知了交通 (19) 剁手吗 (24) 知了地铁 (32) 解忧室 (36) 第四节 如何转行小程序开发? (41) 第五节 如何拥有自己的小程序? (45) 如何注册微信小程序 (46) 如何搞定微信认证? (52) 如何完善小程序信息? (59) 开发者工具怎么用? (65) 小程序的审核与发布 (74) 第六节 小程序官方文档解读 (83) 开发文档解读 (84) 设计文档解读 (94) 运营文档解读 (104) 第七节 电商类小程序开发教程 (112) 如何做轮播图 (113) 如何做商品列表 (123) 数据加载和图文排版 (134) 写在最后 (148) 附录 (149) 小程序大事记 (149)

关于作者 爱范儿是首批获得微信小程序内测资格的200 个公司之一,也是全球第一个开发出微信小程序的公司。 知晓程序,是爱范儿旗下专注小程序生态的新品牌。 我们提供最全面、新鲜的小程序资讯、观点、教程、Demo、活动等内容和服务,在这里你能了解到关于小程序的一切。 我们还跟全国各地的小程序关注者开展了深入交流,形成了面向小程序开发者的未来小程序·黑客马拉松/面向非技术从业人员(产品/运营/市场等)的未来小程序·workshop/面向小程序爱好者的未来小程序·MindTalk 的活动矩阵。 目前,知晓程序共包含四大版块: l知晓程序微信公众号:小程序资讯媒体 l知晓程序商店:小程序应用商店; l知晓程序社区:小程序交流平台; l知晓程序BaaS:小程序后端服务平台。

微信小程序运营规则

微信小程序平台运营规 一、原则及相关说明 微信最核心的价值,就是连接——提供一对一、一对多和多对多的连接方式,从而实现人与人、人与智能终端、人与社交化娱乐、人与硬件设备的连接,同时连接服务、资讯、商业。 微信团队一直致力于将微信打造成一个强大的、全方位的服务工具。在此基础上,我们推出了微信小程序这个产品,提供给微信小程序的开发者在微信搭建和实现特定服务、功能的平台。通过全面开放的能力,我们将更多连接的可能给予企业和服务提供者,并为微信小程序提供基础的接入能力、运营环境和规则体系,进而帮助更多的企业和服务提供者建立自己的品牌,将商业机会带给整个微信产业链。 在开始微信小程序的开发前,我们希望微信小程序开发者(以下也称为“你”)已经仔细阅读了《微信小程序接入指南》、《微信小程序设计规》、《微信小程序开发指南》等;同时,我们也为你准备了微信小程序平台常见拒绝情形。希望这些指南和规,能够一定程度上帮助你解决开发、运营微信小程序过程中所遇到的疑问。 我们希望你提交的微信小程序,能够符合微信团队一直以来的价值观,那就是:一切以用户价值为依归、让创造发挥价值、好的产品是用完即走,以及让商业化存在于无形之中。在切实符合用户的合理需求和利益的前提下,通过微信小程序所提供的功能和服务,为海量微信用户提供具有持续价值和高品质的服务。我们期待你来提交你的微信小程序。 二、具体运营规 使用微信小程序平台的服务,你必须阅读并遵守《微信小程序平台服务条款》,以及腾讯为此制定的专项规则等。本运营规是在上述协议及规则基础上进行解释和说明,相关容旨在帮助你更加清晰地理解和遵守相关协议和规则,以便能够更加顺利地在微信小程序平台进行运营,而不是修改或变更上述协议及规则中的任何条款。如果我们认为你的微信小程序违反了我们的条款、相关平台规则或法律法规,或对微信公众平台、微信开放平台造成了影响,则微信有权对你的微信小程序采取强制措施,包括但不限于限制你的微信小程序访问平台功能、下架小程序、要求删除数据、终止协议等。 1.注册提交规 1.1提供给用户可以联络到开发者的或电子等有效联系方式。 1.2提供给平台联络到开发者的管理员微信号,并保证该微信号真实有效。 1.3你所提交的微信小程序,不得关联至你不具有完整合法权益或不具备完整授权的、应用程序、产品或服务等。

小程序推广方案1.0

小程序推广方案 小程序不止于小,并且还赋予了很多新功能如:相互跳转、批量管理门店、支持第三方接口授权等等。程序平台致力于开发小程序技术服务,为用户提供产品销售、解决方案、技术服务等多层次业务,为实现全行业和多场景的覆盖,小程序大致分为线上、线下两种推广方式,以下为细分推广: 一、线下推广 1、广告宣传推广 广告宣传指的是,以海报、视频、音频等形式进行推广,出现在公共场所,交通工具等地方,比如投放地铁广告、电梯广告、大型商场、娱乐场所海报、视频宣传等,广而告之。 2、活动宣传 活动宣传是以线下活动推广为主,通过举办一些活动的形式进行推广。如:举办马拉松等活动时,可以做志愿者去捡垃圾等公益活动,统一穿戴带有公司logo的服饰,增加企业形象和产品的认知度等,只要是大型、人群密集、和自己的产品相关、有正能量的活动,都可以参与。 3、名片推广 名片推广主要是通过线下发名片的形式进行推广;比如参加某个商务会议或者大型活动时,可以大范围的分享名片进行传播。(这种手法也可以线上操作)。 4、海报加二维码 这种方式可以认定为推广中最常见的方法。操作方式非常简单,在各种海报、 名片、门店、宣传册等一些户外广告的印刷上小程序码,使之随处可见。 5、宣传单推广 提前打印好相关的宣传信息,通过请人发宣传单形式推广; 6、赠品推广 通过在赠品上印刷品牌信息,然后寄给客户进行推广;或者制与人们日常生活相关的品牌周边,在微信公众号上作为活动礼品,或者在参加会议时赠送给相关人员,比如钥匙上面的小饰品,手机壳、卡套、精美的本子等,和人们的生活息息相关、每天都可以看到,也可以转赠他人的周边最好。

7、二维码推广 在进行二维码推广之前,可以在一些网站上面先设计、美化自己的二维码,之后在实体店,或者是名片二维码推广;可以使用扫描二维码获得WIFI密码等;商家的周边上面有二维码信息,参加某个活动时,产品介绍上面保留二维码的位置。 二、线上推广 线上推广包含微信体系外和微信体系内两种; (一)微信体系外推广; 1、主流媒体间接推广; (1)、硬广/软广,广告才是向公众传递信息的有效手段,微信小程序推广,大小广告投放,不能停,网络广告对推动微信小程序的流量、提高知名度都很有效。 (2)、PC网络广告:硬广、富媒体广告、搜索广告等 (3)、移动广告:国内做的移动广告平台很不错,精准匹配用户群。付费方式可以按照CPM、CPC、CPA进行付费。 (4)、电视广告:参考曾经中央电视台的诸多“标王”。小程序从2017年1月9日正式在客户端上线到今天,每隔上半月,微信团队都会赋予它新的功能。其火爆现象和近10亿的微信用户流量,又掀起了互联网行业又一创业新时代。 2、自媒体推广; 自媒体推广平台包括三大阵营; 第一阵营: (1)、公众号广告付费推广 目前广告主已经可以在后台新建“文中广告”,公众号文章中的 CPC 广告与小程序中的产品进行联通。这种方式比此前阅读原文那种转化要高级好几倍,用户直观感受到产品信息,并且形式非常新颖。 (2)、微信平台(微信公众平台、微信个人号(朋友圈)、微信群、微信广告资源) (3)、微信个人号,也就是朋友圈,通过朋友圈日常类似于微商的告知产品、活动;

微信应用号(小程序)设计规范

微信应用号(小程序)设计规范 概要 微信小程序设计的基本原则是微信设计中心针对在微信内上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的,旨在微信生态内建立友好、高效、一致的用户体验的同时,最大程度顺应和支持各业务需求设计,实现用户与程序的共赢。 一、友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序侧提供的服务,友好地引导用户进行操作。 1. 重点突出 每个页面都应有明确的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容,在确定了重点的前提下,应尽量避免页面上出现其他干扰项影响用户的决策和操作。

反例示意 此页面的主题是查询,却添加了诸多与查询不相关的业务入口,与用户的预期不符,易造成用户的迷失。 纠正示意 去掉任何与用户目标不相关的内容,明确页面主题,在技术和页面控件允许的前提下提供有助于用户目标的帮助内容,比如最近搜索词,常用搜索词等。

反例示意 操作没有主次,让用户无从选择 纠正示意 首先要避免并列过多操作让用户选额,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。

2. 流程明确 为了让用户顺畅地使用页面,在用户进行某一个操作流程时,应避免出现用户目标流程之外的内容而打断用户。 反例示意 用户本打算进行搜索,在进入页面时却被突如其来的抽奖弹窗所打断;对于抽奖没有兴趣的用户是非常不友好的干扰,平添一份对开发团队的恼怒;而即便有部分用户确实被“诱人”的抽奖活动所吸引,离开主流程去抽奖之后可能就遗忘了原本的目标,进而失去了对产品真正价值的利用和认识。 二、清晰明确 作为一个负责任的开发者,一旦用户进入我们的小程序页面,就有责任和义务清晰明确地告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路,这样才能为用户提供安全的愉悦的使用体验。

…微信小程序方案设计

微信小程序方案设计 虽然APP在体验上非常突出,但需要安装,需要消耗流量,占用手机有限的桌面空间。这种麻烦程序,甚至超出了APP的优势本身。就到这里,你自然知道了微信小程序的好了。不用安装,即开即用,用完就走,省流量,省安装时间,不占用桌面;体验上虽然没法完全媲美原生APP,但综合考虑还是更优;对于小程序拥有者来说,开发成本更低,他们可以更多财力,人力,精力放在如何运营好产品,做好内容本身;对于用户来说,相较于各种APP,微信小程序UI和操作流程会更统一,这也会降低用户的使用难度。 目录 1.微信小程序的价值 2.微信小程序概述 3.微信小程序的费用 1.微信小程序的价值

微信小程序作为轻型应用很有可能会是未来移动互联网应用的 主要形式,它的特点是小而快,微信小程序目的主要还是解决小应用的问题,要点在于灵活、快捷、用完即走。用户角度对于用户来说,小程序触及到了PC网页、公众号、H5、APP无法触及到的地方,概括来说它诞生就是帮助用户解决一些特殊需求的,概括起来有三点:1、使用刚需低频服务时。小程序降低了低频服务类APP的使用门槛,需要使用时打开小程序,用完了就可以关掉,不会一直占手机内存,不想用了还可以删掉。这用完即走的特点正好满足用户使用低频服务类APP时的需求。2、使用线下的服务时。小程序在线下的价值是值得关注的,因为用户在线下消费的需求正是“快捷”、“灵活”、“用完即走”。3、满足特殊场景下的个性化需求时。个性化的需求可能只会持续一小段时间,而为了这一小段时间要去下载APP常常让用户觉得心累。APP角度结合小程序对用户的价值来看,小程序对于APP 来说有好也有坏。1对于低频率使用还没发展起来的APP来说,小程序是一个好事情,因微信提供较便宜及容易使用的资源,与数以百万计的移动用户接触。2对于高频率使用的APP 来说,它们虽然没有被卸载之忧,但需要在损失一定可营销、高体验的用户时间,与多一个渠道带来的利益之间权衡,因为谁也不知道小程序会成为他们的渠道,还是说他们为小程序做嫁衣。3而对于中间的夹层,也就是使用频次一般,简单的、工具类APP 来说,小程序也许一个巨大打击,小程序很可能会抢掉此类APP的用户。线下商家角度对于商家来说,微信小程序很大一部分的价值来源于微信,微信将庞大的用户导流给

电商平台对用户交易纠纷处理的机制或方案新【微信小程序申请模板】.doc

小程序名称平台对产生交易纠纷的处理机制 针对xxxxxxx有限公司所属电子商务平台“小程序名称”,以下简称平台。在业务开展过程中可能产生的交易纠纷,平台实施如下处理机制。 一、部门职责 xxxxxxx有限公司指定客户服务责任人,负责客户交易纠纷的预处理,包括与客户充分沟通协商,纠纷的信息传递、材料的收集、传递和报告,并负责配合对已形成的诉讼纠纷进行处理,协助风险管理部收信相应的证据材料。 公司相关部门建立客户投诉处理机制,明确客户投诉途径,在小程序名称显要位置公布投诉处理电话、电子邮箱、通讯地址,并指定专门人员负责客户投诉处理,认真、及时处理用户的投诉和意见,及时向用户反馈处理结果,并做好记录,建立投诉处理不当的责任追究和机制。 客户服务中心负责对客户投诉的集中处理,包括设立客户服务代理接受客户电话投诉、协调处理相关部门与客户沟通无果的投诉请求,并检查相关业务部门的处理结果。 风险管理部负责客户交易纠纷所涉法律问题的处理,包括向公司相关部门提供客户投诉处理的法律意见,处理业已形成的诉讼类纠纷,以及负责对公司自行处理的诉讼纠结进行协调、监督和检查。 二、客户交易纠结的分类处理 公司相关部门负责对客户交易纠纷信息进行分类登记,根据客户交易纠纷风险程序的大小,将客户交易纠纷分为以下四大类: 1、因公司相关部门业务差错或其他过错给客户造成损失引发的客户交易纠纷; 2、由于行情交易系统故障,发生应急事件等客观原因引发的客户纠纷。 3、因客户自身对系统使用、规章制度、产品购买不熟悉,或客户提出不合理要求、对员工按章事感觉不便等原因引起的纠纷。 4、其他原因引发的客户纠纷。 公司相关部门应将上述客户纠纷信息分类登记结果报公司客户了服务中心备案,对其中可能引发诉讼风险的纠纷信息重点监控并同时报风险管理部备案。

相关文档
相关文档 最新文档