微信小程序设计 第1篇
还是一个安静的晚上，还是我在做设计，这次我真的按耐不住，和其它小程序一样。听说你又再搞什么原创，中间图标变大大，破形破形再破形，燃烧开发脑细胞。
但是，要知道，图标只要81rpx，小于大于都变形，一定记得规格框。数量只能2至5，多了少了不算数，你只能去改图标，其它组件说了算。
在小程序里导航栏跟标签栏的层级是最高的，以至于享受惯最高待遇的弹窗在这里，也要臣服于他们。
小程序对视频的支持不是特别的好，原则上在滚动控件里不能放视频，而且微信官方文档里是这样要求的。这点我也像我们开发小哥哥求证，确实是这样，优酷和腾讯视频都是将视频固定。
但其实吧，这点已经被有些公司攻克了，比如开眼跟京东。攻克是攻克了，但是体验不怎么好。如果公司产品需要放视频，建议专门新开一个页面，视频部分最好不要有左右滚动。
iPhone X 怎么办，安卓怎么办，这些都不用再设计了，开发小哥哥都能搞定，相信他们。
微信官方虽然有提供，但是更新时间停留在了2016年，没有现在新版的小程序样式，和现在的区别就在顶部导航栏上。
最近我正好在看小程序设计，便动手加上了这些新样式，虽然不多，但都是很认真跟开发小哥哥对过的，里面也附带了官方 UI 控件，提供给大家。《资源：新版小程序 UI 控件，Sketch 版》
微信小程序设计 第2篇
为了避免用户在微信中， 注意力被周围复杂环境干扰， 小程序在设计时， 注意减少无关的设计元素对用户目标的干扰， 礼貌地向用户展示程序提供的服务， 友好引导用户进行操作
每个页面都应该有明确的重点， 便于用户每进入一个新页面都能快速理解页面内容 确定重点的前提下， 尽量避免页面上出现其他与 用户的决策和操作无关的干扰因素
为了让用户流畅使用页面，在用户进行某一个操作流程时候， 避免出现用户目标流程之外的内容打断用户反例： 用户本打算进行搜索， 在进入页面时候却被突然出现的模态抽奖打断， 对于抽奖没有兴趣的用户时非常不友好的干扰， 即便部分用户参与抽奖， 离开主流程后可能忘记了原本的目标， 进而失去了对产品真正价值的利用和认识
微信小程序设计 第3篇
我进行调研，发现很多app在进行弹窗设计时，不遮挡顶部标题栏小程序默认操作区的同时，也不会遮挡底部标签栏Tab Bar。
微信小程序设计 第4篇
设计小程序还需要考虑一点就是，设计引导气泡的部分，气泡尽量用“轻量化”的设计语言来设计即可，比如下面看到的气泡效果。
采用了2种比较常用的设计手法，通栏设计和气泡设计。
比如印象印象笔记可以通过微信小程序“保存到印象笔记”，从“导入微信文件”选择导入文件后则及时保存到了印象笔记APP中（前提是绑定了印象笔记APP）；
爱奇艺在视频播放页出现“用APP打开”
得到小程序中，通过引导打开APP的方式来引导用户
Keep中，当你要看更多课程安排时，会有引导入口提示“下载KeepAPP体验完整版”
微信小程序设计 第5篇
36Kr主程序和小程序对比更加明显，在36氪小程序精简版，则更加轻量化的体现了主要资讯信息，其他的入口则直接忽略体现出来，把最重要的核心点体现了出来，其他非主要的“干扰”小程序轻量化感受的因素都直接放弃体现。
微信小程序设计 第6篇
滴滴的APP与小程序设计时，考虑到了平台的特性，更简单快捷的操作目的地进行叫车服务，在功能选择上更加提供核心功能在小程序露出，一些非必须的入口则没有体现出来，比如消息，扫一扫以及个人中心里的一些功能等，用户在使用小程序叫车时更加的专注。
微信小程序设计 第7篇
从PC时代的物理键盘鼠标 到 移动端时代 手指， 虽然输入设备极大精简， 但是手指操作的准确性却大大不如键盘鼠标精确， 为了适应这个变化， 需要开发者在设计过程中充分利用手机特征， 让用户便捷优雅的操作界面
由于手机键盘区域小而且密集， 输入困难同时还容易引起输入错误， 因此在设计小程序页面时候尽量减少 用户输入， 利用现有的接口或者其他一些易于操作的选择控件来改善用户输入的体验例如下图中， 在添加银行卡时候， 采用摄像头识别接口帮助用户输入 开放的地理位置接口等 多种小程序接口， 充分利用这些接口将大大提高用户输入的效率和准确性， 进而优化体验
除了利用接口外， 在不得不让用户进行手动输入时候， 应该尽量让用户选择而不是键盘输入 一方面， 回忆易于记忆， 在用户有限的选项中做出选择通常来说更加容易完全靠记忆输入 另一方面，考虑到手机键盘密集的单键输入容易造成输入错误 下图中，在用户搜索时候提供搜索历史快捷选项，将帮助用户快速进行搜索， 减少或者避免不必要的键盘输入
微信设计中心已经推出了一套网页标准控件库， 包括sketch设计控件库和 photoshop 设计控件库 后续将完善小程序组件， 这些控件都已经充分考虑到移动端页面的特点， 能够保证其在移动端页面上的可用性和可操作性性能 同时微信开发团队也在不断完善和扩充小程序接口， 提供微信公共库， 利用这些资源不但能够为用户提供更加快捷的服务， 而且对页面性能的提高有很大作用 无形之中提升了用户体验
微信小程序设计 第8篇
又是一个安静的晚上，一个人窝在公司里设计，我承认这样真的很无奈，和其它小程序一样。听说你还在搞什么原创，加个投影来点渐变，自以为这样很棒简直无懈可击。结果开发小哥哥哭了，我相信是很美美的图，但是开发做不到啊，那种表情可以想象。
虽然也可以，做点其它形态，那就拜托别让开发见到你。如果再能看到你，一定就是这么说，原生控件好处多多最好能用它。不用担心出问题，不用维护怕麻烦。
微信小程序设计 第9篇
1）苹果-人机界面指南：详细介绍了ios设计规范，同时还提供了Ui设计资源下载
2）安卓-MD设计指南
3）蚂蚁设计：提供移动和Web端的设计组建，还有设计案例和心得的文章供学习
4）微信样式库：提供微信内的网页和小程序设计规范
微信小程序设计 第10篇
进入小程序之后，用户可根据酒店、机票、火车票和汽车票来进入对应导航，然后就可以根据自己所在城市和需要抵达的城市来查询酒店、机票、火车票以及汽车票。
动态图：
模板里包含了小程序入口页面、首页、酒店列表页面、微信登录页面、预订页面等。
以上小程序原型设计模板都可以通过下载Mockplus打开查看并修改，欢迎大家前来交流。
微信小程序设计 第11篇
我们可以在设计导航中查看各种类型的规范资料，比如苹果、微信小程序、百度小程序、IBM等流行的规范都收录有了，当然还不止这些，自己去挖掘吧。
感谢阅读！
//////END //////
微信小程序设计 第12篇
在哔哩哔哩小程序中，主要把其核心的两个主导航分类进行了提取，分别是“热门”和“追番”，分区页面对应APP提取了部分功能到小程序中，我的页面对应APP只提取了历史记录 意见反馈到小程序中；搜索结果页对应APP 排序方式和筛选部分进行了大量“简化”；在微信小程序中，不能对内容进行点赞和评价。
微信小程序设计 第13篇
一旦用户进入我们的小程序页面，我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全且愉悦的使用体验。
导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，当前在哪，可以去哪，如何回去等问题。微信在小程序内现不提供统一导航栏样式，开发者可根据需要自行设计小程序首页和次级页面界面导航。建议所有的次级页面左上角提供返回上一级页面操作。此外，微信iOS用户还可通过界面边缘向右滑动操作，返回上一级小程序或微信页面。安卓用户可通过物理返回键达到同样目的。
小程序的所有页面，包括小程序内嵌网页和插件，微信都会在其右上角放置官方小程序菜单，样式如图。开发者不可对其内容自定义，但可选择深浅两种基本配色以适应页面设计风格。官方小程序菜单将放置在界面固定位置，开发者在设计界面时请预留出该区域空间，若需要在此区域附近放置可交互元素，要特别注意交互事件是否会冲突，操作是否容易被使用
开发者可在满足可用性的前提下，从微信提供的深浅两套配色的小程序菜单中选择合适的方案，以适应小程序页面设计风格。
开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致，指向清晰，有路可退。受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单。建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分。
其中小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等，具体设置项如图标尺寸等参考可参考开发文档和WeUI基础控件库。
顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。
页面的过长时间的等待会引起用户的不良情绪，使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。
小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。
在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。
开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。
模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。
局部加载反馈即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。例如：
开发者可以参考图中样式，使用标题栏提示加载小程序页面内容的过程。例如：
除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。根据实际情况，可选择不同的结果反馈样式。对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作结果，可使用弹出式提示、模态对话框或结果页面展示。
微信小程序设计 第14篇
一旦用户进入小程序页面，开发者有责任和义务明确告诉用户 身在何处，可以往何处去，确保用户在页面中游刃有余地穿梭，不迷路 提供安全且愉悦地使用体验
导航时确保用户在浏览跳转时候，不迷路地最关键因素 导航需要告诉用户， 当前在哪，可以去哪，如何回去的问题 首先，在微信系统内的所有小程序的全部页面，均会带有微信导航栏 统一解决-当前在哪，如何回去的问题 在微信层级导航，保持体验一致， 有助于用户在微信内形成统一的体验和交互认知 无需在各个小程序和其他微信页面的切换中新增学习成本或者改变使用习惯
微信导航栏，直接继承于客户端，出了导航栏颜色外， 开发者不能对其中内容进行自定义 开发者需要规定各个页面的跳转关系，让导航系统能够以合理的方式工作 导航栏分为导航区域，标题区域和操作区域 导航区域控制页面进程， 目前导航栏分深浅两种基本配色
小程序导航栏支持基本的背景颜色自定义功能，选择的颜色需要在满足可用性前提下，和谐搭配微信提供的两套主导航栏图标
开发者可以根据自身功能设计需要， 在页面内添加自由导航 保持不同页面中导航一致， 小程序受限于手机屏幕尺寸的限制，页面中的导航将尽量简单，仅为一般线性浏览的页面建议仅使用微信导航栏即可
开发者选择小程序页面添加标签分页tab导航，标签分页栏可以固定在页面顶部或者底部， 便于用户在不同的分页间做切换 标签数量不少于2个，最多不得超过5个，建议标签数量不超过4个 一个页面不应该出现一组以上的标签分页栏
小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用 可以自定义图标样式，标签文案，文案颜色
顶部标签分页栏颜色可以自定义，保持分页栏标签的可用性，可视性，可操作性
页面的过长时间等待会引起用户的不良情绪，使用微信小程序项目提供的技术可以很大程度缩短等待时间， 当不可避免的出现了加载和等待的时候，需要予以及时的反馈舒缓用户等待的不良情绪
除了在用户等待过程中需予以及时反馈外，对操作的结果需要予以明确反馈，根据实际情况，可以选择不同的结果反馈样式，对于页面局部的操作，可以在操作区予以直接反馈，对于页面级操作结果，可使用弹出式提示，模态对话框或者结果页面显示
在设计任何的任务和流程时， 异常状态和流程往往容易被忽略， 而这些异常场景往往是用户最为沮丧和需要帮助的时候， 因此需要格外注意异常状态的设计， 在出现异常时候， 予以用户必要的状态提示， 使其有路可退； 要杜绝异常状态下， 用户莫名其妙又无处可去，停滞在某一个页面的情况 上文中所提到的模态对话框和结果页面都可以作为异常状态的提醒方式 除此之外，在表单页面中尤其是表单项较多的页面中，还应该指出出错项目， 以便用户修改