微信开发设计、开发、运营……微信小程序基础知识全解
设计、开发、运营……微信小程序基础知识全解
介绍
<来源：白羽
本文将带你了解微信开发设计、开发、运营……微信小程序基础知识全解，希望本文对大家学微信有所帮助。
<h1>设计、开发、运营……微信小程序基础知识全解</h1><p><b>介绍</b></p><p><b>一、什么是小程序？</b></p><p>小程序是一种不需要下载、安装即可使用的应用，它实现了触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载。</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034381185.jpg"></p><p><b>二、开放注册范围：</b></p><p>企业、政府、媒体、其他组织</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034381187.jpg"></p><p><b>三、主体信息及验证方式：</b></p><p>企业类型帐号可选择两种主体验证方式：</p><p>方式一：需要用公司的对公账户向腾讯公司打款来验证主体身份。打款信息在提交主体信息后可以查看到。</p><p>方式二：通过微信认证验证主体身份，需支付300元认证费。认证通过前，小程序部分功能暂无法使用。</p><p>政府、媒体、其他组织类型帐号，必须通过微信认证验证主体身份。认证通过前，小程序部分功能暂无法使用。</p><p>特别提醒：小程序主体信息一经提交后不可修改。</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034381189.jpg"></p><p><b>四、完善小程序信息</b></p><p>完成注册后，微信小程序信息完善步骤和开发可同步进行。</p><p>选择对公打款的用户，完成汇款验证后，可以补充小程序名称信息，上传小程序头像，填写小程序介绍并选择服务范围。</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034381192.jpg"></p><p>选择通过微信认证验证主体身份的用户，需先完成微信认证后，才可以补充小程序名称信息，上传小程序头像，填写小程序介绍并选择服务范围。</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034381193.jpg"></p><p><b>五、开发前准备：</b></p><p><b>1.绑定开发者</b></p><p>登录微信公众平台小程序，进入用户身份- 开发者，新增绑定开发者。已认证的小程序可以绑定不多于20个开发者。未认证的小程序可以绑定不多于10个开发者。</p><p><b>2.获取AppID</b></p><p>进入“设置-开发设置”，获取AppID信息。</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034381194.jpg"></p><p><b>3.<a href="http://book.2cto.com" target="_blank">阅读</a>开发文档并下载开发者工具</b></p><p>点击页面右上角文档-开发，详细阅读开发者文档并进入下载页面，下载开发者工具。</p><p><b>六、客服<a href="https://www.2cto.com/os/" target="_blank">系统</a></b></p><p>为丰富小程序的服务能力，提高服务质量，微信为小程序提供客服消息能力，以便小程序用户可以方便快捷地与小程序服务提供方进行沟通。</p><p><b>设计</b></p><p><b>一、概要</b></p><p>设计指南建立在充分尊重用户知情权与操作权的基础之上，旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。</p><p><b>二、友好礼貌</b></p><p>为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。</p><p><b>1.重点突出</b></p><p>每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下，应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。</p><p><b>2.流程明确</b></p><p>为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。</p><p><b>三、清晰明确</b></p><p>一旦用户进入我们的小程序页面，我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全且愉悦的使用体验。</p><p><b>1.导航明确，来去自如</b></p><p>导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，当前在哪，可以去哪，如何回去等问题。首先在微信系统内的所有小程序的全部页面，均会自带有微信提供的导航栏，统一解决当前在哪，如何回去的问题。在微信层级导航保持体验一致，有助于用户在微信内形成统一的体验和交互认知，无需在各小程序和其他微信页面的切换中新增学习成本或改变使用习惯。</p><p><b>微信导航区（iOS）</b></p><p>微信进入小程序的第一个页面，导航区通常只有一个操作——“返回”，即返回进入小程序前的微信页面。 进入小程序后的次级页面，导航区的操作为——“返回” 和“关闭”。 “返回”，即返回上一级小程序界面或微信界面。“关闭”，即在当前界面直接退出小程序，回到进入小程序前的微信页面。</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034381195.jpg"></p><p><b>微信导航区（<a href="https://www.2cto.com/kf/yidong/Android/" target="_blank">Android</a>）</b></p><p>导航区仅存在唯一操作——直接退出小程序，回到进入小程序前的微信或系统桌面，安卓手机自带的硬件返回键执行返回上一级页面的操作。</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034391197.jpg"></p><p><b>2.减少等待，反馈及时</b></p><p>页面的过长时间的等待会引起用户的不良情绪，使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。</p><p><b>3.异常可控，有路可退</b></p><p>在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。</p><p>要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。</p><p><b>四、便捷优雅</b></p><p>从PC时代的物理键盘鼠标到移动端时代手指，虽然输入设备极大精简，但是手指操作的准确性却大大不如键盘鼠标精确。为了适应这个变化，需要开发者在设计过程中充分利用手机特性，让用户便捷优雅的操控界面。</p><p><b>1.减少输入</b></p><p>由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时因尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。</p><p><b>2.避免误操作</b></p><p>因为在手机上我们通过手指触摸屏幕来操控界面，手指的点击精确度远不如鼠标，因此在设计页面上需点击的控件时，需要充分考虑到其热区面积，避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时，往往就容易出现这样的问题。由于手机屏幕分辨率各不相同，因此最适宜点击像素尺寸也不完全一致，但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准<a href="https://www.2cto.com/kf/all/zujian/" target="_blank">组件</a>库中，各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模精品标准控件尺寸进行设计。</p><p><b>3.利用接口提升性能</b></p><p>微信设计中心已推出了一套网页标准控件库，包括 sketch设计控件库 和 Photoshop设计控件库，后续还将完善小程序组件，这些控件都已充分考虑了移动端页面的特点，能够保证其在移动端页面上的可用性和操作性能； 同时团队也在不断完善和扩充微信小程序接口，并提供微信公共库，利用这些资源不但能够为用户提供更加快捷的服务，而且对页面性能的提高有极大作用，无形之中提升了用户体验。</p><p><b>五、统一稳定</b></p><p>除了以上所提到的种种原则，建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。</p><p>统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感。正因如此，小程序可根据需要使用微信提供的标准控件，以达到统一稳定的目的。</p><p><b>六、视觉规范</b></p><p><b>1.字体规范</b></p><p>微信内字体的使用与所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 11(pt)，使用场景具体如下：</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034391198.jpg"></p><p><b>字体颜色：</b></p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034391199.jpg"></p><p>主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑。</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034391200.jpg"></p><p>蓝色为链接用色，绿色为完成字样色，红色为出错用色 Press 与 Disable 状态分别降低透明度为20%与10%。</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034391201.jpg"></p><p>2.列表视觉规范：</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034391202.jpg"></p><p>3.表单输入视觉规范：</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20170112/201701121034391203.jpg"><br></p>
更多关于web前端、Java、大数据、人工智能、物联网等学习资源请加小职微信获取：
长按二维码加小职吧
在线等你
温馨提示：本文章来自网络并且是机构方发布，请自行核实信息的真实性,建议到机构点实地考察后签约合同再合作建设网站，建设站有风险，请注意，一切法律问题本站不承担哦！如侵权请联系本站删除，谢谢!
