miniui 样式第一次加载不出来_小程序设计规范及经验分享(附最新样式库)

点击上方蓝字,+关注行设视觉

77749c0b-be1c-eb11-8da9-e4434bdf6706.png

79749c0b-be1c-eb11-8da9-e4434bdf6706.png

本文已获得作者授权,发布于行设视觉,转载请注明出处。

作者 | 孙青Cynthia_Sun

https://www.zcool.com.cn/article/ZOTM4NjQ0.html

2019 新版小程序控件+设计规范源文件见底部说明

正文

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

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

接下来是干货时间~

内容大纲

一、小程序设计区域

二、Nav Bar设计

三、Tool Bar设计

四、Tab Bar设计

五、启动页设计

六、加载样式

七、没有App如何设计

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

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

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

一、小程序设计区域

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

7a749c0b-be1c-eb11-8da9-e4434bdf6706.png

二、Nav Bar设计

1、小程序菜单固定样式

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

7c749c0b-be1c-eb11-8da9-e4434bdf6706.png

线上案例:

80749c0b-be1c-eb11-8da9-e4434bdf6706.png

2、交互注意事项

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

81749c0b-be1c-eb11-8da9-e4434bdf6706.png

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

83749c0b-be1c-eb11-8da9-e4434bdf6706.png

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

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

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

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

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

86749c0b-be1c-eb11-8da9-e4434bdf6706.png

三、Toolbar设计

1、小程序设计规范

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

89749c0b-be1c-eb11-8da9-e4434bdf6706.png

2、常见的几种表现形式

8b749c0b-be1c-eb11-8da9-e4434bdf6706.png

四、Tab Bar设计

1、小程序设计规范

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

8f749c0b-be1c-eb11-8da9-e4434bdf6706.png

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

90749c0b-be1c-eb11-8da9-e4434bdf6706.png

2、常见的几种表现形式

92749c0b-be1c-eb11-8da9-e4434bdf6706.png

五、启动页图标

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

95749c0b-be1c-eb11-8da9-e4434bdf6706.png

六、加载样式

1、小程序设计规范

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

97749c0b-be1c-eb11-8da9-e4434bdf6706.png

2、常用的加载样式

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

99749c0b-be1c-eb11-8da9-e4434bdf6706.png

七、没有App如何设计

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

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

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

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

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

https://developers.weixin.qq.com/miniprogram/design/

9c749c0b-be1c-eb11-8da9-e4434bdf6706.png

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

https://docs.alipay.com/mini/design

9d749c0b-be1c-eb11-8da9-e4434bdf6706.png

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

https://smartprogram.baidu.com/docs/design/overview/introduction/

9f749c0b-be1c-eb11-8da9-e4434bdf6706.png

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

1)苹果-人机界面指南

详细介绍了ios设计规范,同时还提供了Ui设计资源下载

https://developer.apple.com/design/human-interface-guidelines/

a0749c0b-be1c-eb11-8da9-e4434bdf6706.png

2、安卓-MD设计指南

https://material.io/design/

a4749c0b-be1c-eb11-8da9-e4434bdf6706.png

3、蚂蚁设计

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

https://design.alipay.com/#ds

a6749c0b-be1c-eb11-8da9-e4434bdf6706.png

4、微信样式库

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

https://weui.io/

a7749c0b-be1c-eb11-8da9-e4434bdf6706.png

a9749c0b-be1c-eb11-8da9-e4434bdf6706.png

2019 新版小程序控件+设计规范源文件

附件文件为sketch版本,后台回复关键词“小程序控件”即可获取下载链接。

ac749c0b-be1c-eb11-8da9-e4434bdf6706.png

感谢你的阅读支持 · 欢迎留言互动

-------------------------------------------

af749c0b-be1c-eb11-8da9-e4434bdf6706.png

b1749c0b-be1c-eb11-8da9-e4434bdf6706.png

b2749c0b-be1c-eb11-8da9-e4434bdf6706.png

77749c0b-be1c-eb11-8da9-e4434bdf6706.png

多一份行动  ·  多一分设想

b6749c0b-be1c-eb11-8da9-e4434bdf6706.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488850.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言软件电脑下载文件,求C语言头文件下载?

传统 C#include <assert.h> //设定插入点#include <ctype.h> //字符处理#include <errno.h> //定义错误码#include <float.h> //浮点数处理#include <fstream.h> //文件输入&#xff0f;输出#include <iomanip.h> //参数化输入&#xff0f…

从 AlphaGo 到具有人类智慧的 AI 究竟有多远?François Chollet 有了一些新想法

图片来自Alex Castro / The Verge来源&#xff1a; AI科技评论编译&#xff1a; 龚倩编辑&#xff1a;丛末测量人工智能的「智慧」是计算机科学领域中最棘手但最重要的问题之一。如果你不明白你今天制造的机器是否比昨天更聪明&#xff0c;那你怎么知道你在进步&#xff1f;乍一…

3.17作业

3.17作业 选择你喜欢的花 1. 布局设计代码 <TextViewandroid:layout_width"wrap_content"android:layout_height"wrap_content"android:layout_gravity"center"android:text"Please choose a flower you like!"android:textSize&qu…

listctrl 优化_教育培训网站SEO优化,新的网站SEO优化整体外包费用

原标题&#xff1a;教育培训网站SEO优化&#xff0c;新的网站SEO优化整体外包费用百度营销凭借强大的用户产品优势&#xff0c;每天数十亿次搜索请求、超过1亿用户浏览百度信息流、800亿次定位服务请求&#xff0c;为客户提供全系列产品广告资源覆盖用户生活全场景。百度搜索se…

c语言楼梯有10级台阶,C语言小程序之没事爬楼梯

题目有39级台阶&#xff0c;每一步只能走1阶或者2阶。如果需要走偶数步&#xff0c;求上台阶的方案数。分析拿到题目就是一通分析&#xff0c;39是奇数&#xff0c;一次走1阶或者两阶。。。那么就有&#xff1a;1*x2y39&#xff0c;x得是个奇数。。。要求走偶数步&#xff0c;那…

【周末阅读】2019自动驾驶十大关键词

来源&#xff1a;智车科技作者&#xff1a;曾晶、桂艳琳、唐沛祥回看过去2019年自动驾驶行业的“关键词”&#xff0c;从中感受这一年自动驾驶的变化与趋势。关键词一&#xff1a;交通强国2019年9月&#xff0c;中共中央、国务院印发了《交通强国建设纲要》&#xff08;以下简称…

【adb】电脑通过ADB向手机设备传输文件

具体步骤如下&#xff1a; Step1 下载ADB工具 下载最新版本的 ADB工具 !!! 注意&#xff1a;一定要是最新版本的ADB&#xff0c;否则很可能导致无法识别到手机。 将下载的ADB解压以后的文件如下图所示&#xff1a; Step2 添加环境变量 将 ABD 的路径 D:\platformtools &am…

apple usb ethernet adapter驱动_佳能Canon PIXMA MG3620一体机驱动下载 v1.01官方版

软件标签&#xff1a;佳能MG3620是一款无线喷墨多功能一体机&#xff0c;拥有打印、复印、扫描等多种功能&#xff0c;并且支持手机控制进行操作&#xff0c;可以大大地提高办公效率。如果你遇到了该一体机连接电脑时无反应&#xff0c;那就是缺少了小编推荐的佳能MG3620驱动程…

图解Javascript——作用域、作用域链、闭包

什么是作用域&#xff1f; 作用域是一种规则&#xff0c;在代码编译阶段就确定了&#xff0c;规定了变量与函数的可被访问的范围。全局变量拥有全局作用域&#xff0c;局部变量则拥有局部作用域。 js是一种没有块级作用域的语言(包括if、for等语句的花括号代码块或者单独的花括…

除了欧拉公式,这8个数学公式也足够美丽且神奇

来源&#xff1a;算法与数学之美1概率分布公式

canvas rotate 累加旋转_震惊,canvas文字粒子效果,只需要100行代码,简单易懂。

震惊,canvas文字粒子效果&#xff0c;只需要100行代码&#xff0c;简单易懂。canvas是使用JavaScript程序绘图(动态生成),相比于css&#xff0c;可以更加简单方便的绘制细节的样式。其中最强大的功能莫过去像素的处理。一个像素一个像素去绘制任何想要的展示效果。接下来&#…

CES 2020前瞻:一份最全的趋势预测报告

来源&#xff1a; CES20202020年&#xff0c;消费级技术领域的总体趋势可以总结为&#xff1a;最顶尖的产品将变得更强大、更完善。虽然我们并不喜欢“溢价”这个已经被用滥了的字眼&#xff0c;但不得不承认&#xff0c;新一年中溢价会成为新的常态。最好的东西会变得更好&…

Android pda出入库管理,出入库PDA管理系统软件

随着经济的高速发展&#xff0c;市场的日新月异&#xff0c;仓库管理越来越重要起来&#xff0c;企业里从原料的入库到成品的出库都需经过仓库来管理控制&#xff0c;仓库工作责任重大、数据即时准确犹为关键&#xff0c;现代企业大多都借助出入库管理系统软件来管控仓库&#…

一棵树的生物量怎么算_桂花开花小、开花少怎么办?四点建议送给你!

原标题&#xff1a;桂花开花小、开花少怎么办&#xff1f;四点建议送给你&#xff01;虽然冬天绝大多数桂花都处在休眠期&#xff0c;生长缓慢&#xff0c;不开花&#xff0c;但四季桂花是个例外&#xff0c;只要温度合适养护得当&#xff0c;冬天也能让我们闻到桂花香。桂花开…

28篇标志性论文见证「自然语言处理NLP」2019-2020年度亮点进展

来源&#xff1a;专知【导读】自然语言处理专家elvis在medium博客上发表了关于NLP在2019年的亮点总结。对于自然语言处理&#xff08;NLP&#xff09;领域而言&#xff0c;2019年是令人印象深刻的一年。在这篇博客文章中&#xff0c;我想重点介绍一些我在2019年遇到的与机器学习…

spark while_05_尚硅谷大数据技术之Spark内核解析(1.1) - 十一vs十一

尚硅谷大数据课程之Spark内核解析(作者&#xff1a;尚硅谷大数据研发部)官网&#xff1a;版本&#xff1a;V1. Spark 内核概述Spark内核泛指Spark的核心运行机制&#xff0c;包括Spark核心组件的运行机制、Spark任务调度机制、Spark内存管理机制、Spark核心功能的运行原理等&am…

AI初创公司都去哪了?2019年科技公司“五巨头”收购盘点

大数据文摘出品来源&#xff1a;venturebeat人工智能人才的争夺大战愈演愈烈。 今年&#xff0c;Pinterest的首席技术官Vanja Josifovski离职加入了Airbnb&#xff0c;而Pinterest则聘请了沃尔玛的首席技术官Jeremy King来领导工程团队。此外&#xff0c;包括谷歌和苹果在内的所…

angular element()

使用angular.element()获取一个dom的方法。 1.可以使用jquery的选择器 2.可以使用javascript的原生查找元素的方法 下面是angular.element()提供的方法 <input type"checkbox" class"input" /><input type"text" class"input1&quo…

【前沿科技】看完这篇文章前,你绝对想象不到欧美航空机器人竟然发展到这个程度了!...

来源&#xff1a;中国机器人网《工程》杂志撰文认为&#xff0c;工业机器人在许多行业中已经建立了良好的基础&#xff0c;并且通常与现代化的先进制造系统相关联&#xff0c;但是&#xff0c;航空制造仍然严重依赖熟练的手工作业。航空制造中采用机器人的一个主要障碍是缺乏精…

beautifulsoup网页爬虫解析_Python爬虫快速入门,静态网页爬取

在开始之前&#xff0c;请确保你的电脑上已经安装好了BeautifulSoup库&#xff0c;可以通过在命令行中输入pip install beautifulsoup4来进行安装。一、数据解析在爬取之前&#xff0c;我们需要检测下响应状态码是否为200&#xff0c;如果请求失败&#xff0c;我们将爬取不到任…