恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
微信小程序设计的规范(附小程序Ps&Sk基础控件包)
0.0°
2020-06-10 好文转载 规范/资料 原作者: 孙青Cynthia_Sun 举报 5127 104 26 3

——

小程序设计现已成为设计师的必备技能,那在进行小程序界面设计时应该如何快速做设计?过程中又要注意哪些问题呢?

下面就是我们的干货时间啦~

——


内容大纲


一、小程序设计区域


二、Nav Bar设计


三、Tool Bar设计


四、Tab Bar设计


五、启动页设计


六、加载样式


七、没有App如何设计


八、推荐几个常用的平台设计网站


 


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



在设计过程中主要注意以下几点:


一、小程序设计区域


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



二、Nav Bar设计


1、小程序菜单固定样式


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



  • 线上案例:




2、交互注意事项


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



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



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


1)样式与官方菜单样式未区分开,容易产生疑惑


2)NavBar栏两端对称在顶部,视觉上显得过于呆板


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


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


三、Toolbar设计


1、小程序设计规范


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


2、常见的几种表现形式 



四、Tab Bar设计


1、小程序设计规范


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


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

 


2、常见的几种表现形式 


五、启动页图标


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


六、加载样式


1、小程序设计规范


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


2、常用的加载样式


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


七、没有App如何设计


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


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


八、推荐几个常用的平台设计网站


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


1)微信小程序设计指南:微信小程序设计指南



2)支付宝小程序设计规范:支付宝小程序




3)百度-智能小程序设计规范:百度-智能小程序



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


1)苹果-人机界面指南


详细介绍了ios设计规范,同时还提供了Ui设计资源下载:苹果-人机界面交互指南



2)安卓-MD设计指南:Material design指南



3)蚂蚁设计


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



4)微信样式库


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





本次部分修订文章分享就到这里啦 可以收藏后有时间再慢慢学习观看哦~

Powered by Froala Editor

更新:2020-06-10

下载
收藏

104人已收藏

猪八弟_

活得清醒 过得知趣

  • 4

    作品

  • 11

    粉丝

  • 7

    关注

  • 节日/节气海报合集
  • 写实图标合集
  • 插画合集

    猜你喜欢

      2020-06-10 好文转载 规范/资料 原作者: 孙青Cynthia_Sun 举报 5127 104 26 3

      微信小程序设计的规范(附小程序Ps&Sk基础控件包)

      0.0°

      你确定要举报微信小程序设计的规范(附小程序Ps&Sk基础控件包)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年06月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      26
      104
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录