关闭

举报

  • 提交
    首页 > 致富技术 > 正文
    购物车
    0

    开发小程序,必须遵守的5条UI规范!

    信息发布者:梁郭张家
    2018-09-28 06:00:53    来源:齿轮易创   转载

    11月03号,微信团队宣布微信公众平台小程序开放公测,我们的团队也开始进行了小程序的开发,在开发过程中我们发现有很多需要注意的问题。在这里就分享给大家在开发小程序中必须遵守的5条UI规范。

    第1条:符合微信小程序设计规范

    在开始微信小程序的开发前,请开发者仔细阅读《微信小程序设计规范》,这里我举几个例子来看看怎么做才算是符合微信小程序设计规范。

    1.字号选择

    image微信内字体的使用与所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, 11(pt)。image-1在字号规范中已经明确给出在结果页主标题字号是40pt,而右图没有遵循该规范,因此右图设计字号使用错误。

    2.按钮样式

    image-2在小程序中按钮控件的复用度是很高的,同样的一个确定按钮也会根据页面环境不同来设定不同的宽高尺寸。需要注意的是,即使按钮宽高不同,按钮样式也需要和遵循设计规范所标示出来的宽高比例、描边、直角、圆角、色值、文字区域、字号、字间距等,保证按钮样式和规范统一。另外,在一般情况下,按钮会有不同的状态,这些变化也需要保持统一。image-3在微信小程序设计规范中已经给出了大按钮圆角的大小固定为10px(5pt),所以右图使用的按钮正确,左图所使用的按钮不正确。

    第2条:微信小程序页面内的浮层和弹窗可关闭

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

    第3条:微信小程序的界面必须遵守微信的外观和功能,不得提供改变微信外观和功能的产品体验。

    image-5顶部标签分页栏颜色可自定义。在自定义颜色选择中,务必注意保持分页栏标签的可用性、可视性和可操作性。image-6顶部分页栏颜色可自定义,在自定义的同时要满足可用性,上图中左图的Tab 颜色对比明显,辨识度高所以正确;右图的Tab颜色对比不是很明显,没有足够的辨识度,所以不正确。

    第4条: 微信小程序界面内不得模仿系统通知或警告、诱导用户点击。

    image-8小程序的页面内容中,存在诱导类行为,包括但不限于诱导分享、诱导添加、诱导关注公众号、诱导下载等,要求用户分享、添加、关注或下载后才可操作的程序,含有明示或暗示用户分享的文案、图片、按钮、浮层、弹窗等的小程序,通过利益诱惑诱导用户分享、传播的小程序,用夸张言语来胁迫、引诱用户分享的小程序,强制或诱导用户添加小程序的,都将会被拒绝;

    第5条:小程序头像logo需使用透明或有色背景。若使用白色背景,需使用有色边框。

    image-9小程序头像logo应与名称、简介保持一致,而且必须清晰可见,能够识别图片包含的各个元素,如:文字、物体、形状等。image-10在规范中已经明确规范logo头像清晰可见,上图中左图logo文字清晰可见所以正确,右图logo文字清晰度不够明显,所以不正确。 以上可以看出,小程序的整体设计规范与目前的微信视觉保持统一性的,因此在设计时,除了考虑产品本身的特性和用户需求外,需要再结合微信小程序的设计规范做出适合的产品。  


    开发小程序,必须遵守的5条UI规范!-齿轮易创

    https://chilunyc.com/blog/67/


    打赏捐赠
    0
    !我要举报这篇文章
    声明 本文由村网通注册会员上传并发布,村网通仅提供信息发布平台。文章仅代表作者个人观点,不代表村网通立场。本文如涉及侵权请及时联系我们,我们将在24小时内予以删除!