赞助商
立即赞助

参与多个项目后,我总结了这份可能是网上最全的小程序设计规范

UI设计3年前 (2021)更新 流光
2.4K 0 0

@设计之 :最近设计群里经常有人问小程序设计规范问题,虽然官有提供样库下载,是留在 16 年版,不是最新。而设计经验这部分网络上也没有比较全分享,这促使我下手上计划,加快输出本篇文章。正好近期刚结束几个小程序项目,总结经验,并结合微信小程序的官方计指南,一起享给大家,希望帮助大家更快速地上。

随着 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/

供微信的页和小程序设计规范。

参与多个项目后,我总结了这份可能是网上最全的小程序设计规范

添作者的个人微信:

参与多个项目后,我总结了这份可能是网上最全的小程序设计规范

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

我们在分析产品设计的时候,会去思考这些产品为什么这么设计?微信作为国内头号产品,经常会被当作分析的对象。那微信为什么...
小程序
由互联网引发的这场龙卷风刮进了每个传统餐饮经营人的心里,短短几年,互联网正以迅雷不及掩耳之势改变着传统餐饮的经营模式...
会员营销
一、可用性价值 动效很容易被象成某种增强愉悦的东西,自身并不具备什么价值。常常被当做可有可无部分,通常作为最后一步点缀...
交互设计
一、色彩 DNA 文档 概述 根据品牌多年来的设计沉淀以及目前业务的各个使用场景,我们对品牌色彩的DNA进行了重新的探索和定义...
产品设计规范
一、图标的定义 1. 什么是图标 图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。 2. ...
ICO
如何定义组件库 UI 设计组件库(UI KIT),直译过来就是用户界面成套元件。我们日常工作中所构建的组件库,一般是把所有界面...
sketch
如何验证我们的对话设计是适宜的?这时候就需要设计走查。为了让走查过程中少出错,我们可以在设计语音体验时,考虑以下几点...
经验分享
编者注:本文腾讯设计师用「云游敦煌」的小程序设计实战案例,为你揭秘大厂的产品构思方法、设计历程等。 缘起 在工作中遇到...
云游敦煌