微信小程序-设计指南

基于微信小程序轻快的特点,官方拟定了小程序界面设计指南和建议,可作为小程序开发参考。

友好礼貌

  -避免用户使用服务时被周围环境干扰,设计时应减少无关设计对用户的影响,礼貌的向用户提供服务,友好的引导用户进行操作。

  重点突出

       -每个页面都应该有明确的重点,方便用户进入页面时可以快速理解页面内容

     -明确重点,避免页面出现与用户决策和操作无关的干扰因素

  流程明确

      -为了用户体验,使其操作顺畅,应避免出现用户目标流程之外的内容而打断用户

清晰明确

    -用户进入页面,我们就有责任和义务清晰明确的告知用户身处何处、又可以往何处去,增加用户体验,即面包屑导航

  导航明确、来去自如

      -导航是确保用户在网页中浏览跳转时不迷路的最关键因素,即明确导航

    微信导航栏

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

      -导航栏分为导航区域、标题区域以及操作区域

        --导航区域控制页面进程

        --导航烂分为深浅两种基本配色

  减少等待、反馈及时

       -若页面加载时间过长会导致用户体验不好,应采用相应措施进行改良

       --启动加载页,微信已统一提供

       --页面下拉刷新加载,微信已统一提供

            ---页面下拉分为深浅两套方案,背景颜色可自定义,应注意下拉时出现的图标及文字标示的辨识度

          ---确保信息的可见性和页面的可用性

        --加载反馈注意事项

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

          ---载入过程中,应保持动画效果,无动画效果的加载容易产生卡死错觉

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

  异常可控、有路可退

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

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

便捷优雅

     -手指操作的准确性是远远不如键盘鼠标精确,为了适应移动端,需要开发者在设计的过程中充分利用手机特性,让用户便捷优雅的操控界面

  减少输入

      -由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在设计小程序页面时因尽量减少用户输入,利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验

  避免误操作

       -手指的点击精确度远不如鼠标,因此在设计页面上需点击的控件时,需要充分考虑到其热区面积,避免由于可点击区域过小或过于密集而造成误操作

统一稳定 

  -接入微信的小程序还应该时刻注意不同页面间的统一性和延续性,在不同的页面尽量使用一致的控件和交互方式。

  -统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标,减轻页面跳动所造成的不适感

视觉规范

  参考地址:https://weui.io

时间: 2024-10-14 13:01:28

微信小程序-设计指南的相关文章

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序 设计理念指南

在此处输入标题 微信小程序的几条开发建议 功能简约,场景贴近随用随走: 操作快捷方便,交互简单: 程序本身代码资源等文件大小限制在1MB之内,这是微信目前的硬限制,目的是为了使得最终到达用户设备上的页面控制在5MB,而事实上,为了最佳的用户体验(接近原生的),不要使用复杂的页面逻辑: 微信小程序对能够同时打开的页面数量也做了限制(5个),虽然可以打开第六个页面,但依然建议将业务逻辑精简到5个页面以内,另外不要想着把流量带出去,微信小程序里边,没有“链接”这一说.

微信小程序 - 开发指南

一.下载并安装开发工具 下载地址 二.创建项目 三.启动流程 四.适用场景 五.技术框架

微信小程序开发指南

https://developers.weixin.qq.com/miniprogram/introduction/#%E4%BA%A7%E5%93%81%E5%AE%9A%E4%BD%8D%E5%8F%8A%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN&token=614460004 https://developers.weix

新手入门:微信小程序--从入门到精通宝典

<ignore_js_op> 作为新手入门的宝典,我们整理了本论坛各种有价值的内容,并按循序渐进的方式呈现给大家.大家可以按顺序一篇一篇的攻克本帖中的内容,也可以作为字典,跳转至关注的内容去学习.希望大家在这里能快速成长,成为微信小程序开发的顶尖高手. 本帖的内容结构如下:一:小程序之张小龙全面阐述及思维导图:二:微信小程序官方地址三:如何学习微信小程序四:新手入门系列教程集合五:公司开发前必读六:个人开发前必读 一:小程序之张小龙全面阐述及思维导图: 小程序之张小龙全面阐述:于1月9日上线(

小程序开发运营必看:微信小程序平台运营规范

一.原则及相关说明 ? 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. ? 微信团队一直致力于将微信打造成一个强大的.全方位的服务工具.在此基础上,我们推出了微信小程序这个产品,提供给微信小程序的开发者在微信内搭建和实现特定服务.功能的平台.通过全面开放的能力,我们将更多连接的可能给予企业和服务提供者,并为微信小程序提供基础的接入能力.运营环境和规则体系,进而帮助更多的企业和服务提供

如何让微信小程序快速接入七牛云

如果你确定用七牛运行小程序的话,给大家分享一个九折优惠码:61d1fd4d1 月 9 日 微信小程序正式发布,小程序终于揭开了它神秘的面纱,开发者对小程序的追捧更是热度不减.从小程序的热门应用场景来看,大概可以分为两大类,一类是低使用频率的 App,如金融类的银行或保险公司 App,O2O 类的上门做饭.家政 App:另一类是虽然使用频率高但是功能简单的 App,如工具类的天气.快递查询,富媒体类的资讯 App 等.那么,谁将成为小程序的大赢家?要打造独角兽级别的微信小程序,开发者除了要注重小程

CSDN博文精选 微信小程序全方位解析

责编:陈秋歌,关注微信开发等领域,寻求报道或者投稿请发邮件chenqg#csdn.net.研发心得.项目实战.前沿技术.外文翻译--,只要是技术干货,十分欢迎投稿至chenqg#csdn.net.人人都是主编,这里就是你的舞台. 欢迎加入"微信开发技术"群,参与热点.难点技术交流.请加群主微信「Rachel_qg」,申请入群,务必注明「公司+职位」. 九个月之前,应用号首次被提出.近日,应用号以"小程序"的名称,正式向200人发出公测邀请."无需下载,用完

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

基于微信小程序轻快的特点,我们(微信官方)拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢. 说到设计规范,这里有一篇绝对不能错过的:<内部教程!超实用6步透视网易设计规范(附完整PDF下载)> 一.友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示