小程序设计规范有哪些?

设计规范 4年前 (2020) 互联网
2.6K 0

随着 2018 年小程序的迅猛发展,小程序现已被各大企业广泛采用,「触手可及、用完即走」的用户体验备受青睐,随之小程序设计也成为设计师的必备技能,那在进行小程序界面设计时,应该如何快速做设计?过程中又要注意哪些问题呢?

对于已经开发了 App 的产品,在进行小程序设计时需遵守小程序的规范,同时要保持小程序界面设计与 App 的风格统一性。

小程序设计区域

小程序的「所有页面」右上角位置,都固定放置了小程序的菜单,在设计界面时需预留出该区域空间。

小程序设计规范有哪些?

Nav Bar设计

1. 小程序菜单固定样式

微信提供了深浅两种配色样式,以便更好地融合到各种风格的页面中,需注意保持小程序菜单清晰的辨识度。

小程序设计规范有哪些?

线上案例:

小程序设计规范有哪些?

2. 交互注意事项

如果要在小程序菜单附近放置交互元素,要考虑是否有交互冲突,应尽量避免误触的可能。

小程序设计规范有哪些?

建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异,以便区分。

小程序设计规范有哪些?

如上图,小红书的自有导航样式个人不推崇,理由如下:

  • 样式与官方菜单样式未区分开,容易产生疑惑;
  • Nav Bar 栏两端对称在顶部,视觉上显得过于呆板。

微信读书既有微信线条外框的 DNA,又区别于官方样式,是不错的综合。以上仅限个人观点,还需用户数据来客观验证。

3. 搜索框常见的几种表现形式

小程序设计规范有哪些?

Tool Bar设计

1. 小程序设计规范

顶部标签分页栏颜色可自定义,一般会沿用 App 的设计风格,以保证两个平台的视觉统一性。

小程序设计规范有哪些?

2. 常见的几种表现形式

小程序设计规范有哪些?

Tab Bar设计

1. 小程序设计规范

微信有提供小程序的底部标签样式,建议标签数量在 2-4 个适宜。

小程序设计规范有哪些?

也可根据产品需要选择或者去掉底部标签栏功能。

小程序设计规范有哪些?

2. 常见的几种表现形式

小程序设计规范有哪些?

启动页图标

启动页除品牌 Logo 外,其他元素都由微信统一提供,且不能更改,设计师仅需提供 2 倍和 3 倍尺寸的 Logo 即可。

小程序设计规范有哪些?

加载样式

1. 小程序设计规范

全局加载是小程序名称左侧的加载图标。模态的加载样式将覆盖整个页面,由于无法明确告知具体加载的位置或内容,可能会引起用户的焦虑感,建议谨慎使用。

小程序设计规范有哪些?

2. 常用的加载样式

需告知用户具体加载的位置形状,减轻用户焦虑情绪。

小程序设计规范有哪些?

对于没有开发App来说,可依据官方推出的《微信小程序设计指南》来设计,以确保快速设计出符合规范的小程序。

小程序设计应遵循友好、高效、一致的设计原则,每个页面都应有明确的重点,清晰明确地告知用户身在何处,又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路。

平台设计网站推荐

最后,推荐几个常用的平台设计网站。

1. BAT各平台小程序设计规范网站

微信小程序设计指南:https://developers.weixin.qq.com/miniprogram/design/

小程序设计规范有哪些?

支付宝小程序设计规范:https://docs.alipay.com/mini/design

小程序设计规范有哪些?

百度-智能小程序设计规范:
https://smartprogram.baidu.com/docs/design/overview/introduction/

小程序设计规范有哪些?

2. 其他常用的设计规范网站

苹果-人机界面指南:https://developer.apple.com/design/human-interface-guidelines/

详细介绍了 iOS 设计规范,同时还提供了 UI 设计资源下载。

小程序设计规范有哪些?

安卓-MD设计指南:https://material.io/design/

小程序设计规范有哪些?

蚂蚁设计:https://design.alipay.com/#ds

提供移动和 Web 端的设计组件,还有设计案例和心得的文章供学习

小程序设计规范有哪些?

微信样式库:https://weui.io/

提供微信内的网页和小程序设计规范。

小程序设计规范有哪些?

转自 作者:孙青Cynthia_Sun

版权声明:互联网 发表于 2020-10-19 12:02:20。
转载请注明:小程序设计规范有哪些? | 前端印记
数据库云大使

暂无评论

暂无评论...