【设计-经验】小程序设计简明指南
时间：2023-09-06 17:24:01 | 来源：网站运营
时间：2023-09-06 17:24:01 来源：网站运营
【设计-经验】小程序设计简明指南：
前言
这篇是公司做内部分享小程序设计经验总结，在此分享出来主要是跟大家一起交流，希望可以共同交流，提升小程序设计水平。
阅读官方说明
- 基础样式库：WeUI
- 设计指南：微信小程序设计指南
- 控件库：WeUI Kit
- 组件：微信小程序开发文档
小程序：WeUI、小程序示例 （小程序入口：搜索）
微信小程序设计简版指南
1. 友好礼貌重点突出 避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。
2. 清晰明确导航区（iOS） 微信进入小程序的第一个页面，导航区通常只有一个操作——“返回”，即返回进入小程序前的微信页面。 进入小程序后的次级页面，导航区的操作为——“返回” 和“关闭”。 “返回”，即返回上一级小程序界面或微信界面。“关闭”，即在当前界面直接退出小程序，回到进入小程序前的微信页面。
导航区（Android） 导航区仅存在唯一操作——直接退出小程序，回到进入小程序前的微信或系统桌面，安卓手机自带的硬件返回键执行返回上一级页面的操作。
这里主要讲解 Android 和 iOS 的差异化，设计小程序时可以不用考虑。
导航区（颜色） 导航区颜色支持自定义，选择与提供的顶栏颜色相和谐搭配的背景色。
标签分页（Tab）导航 标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。
启动页加载 启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。
下拉刷新加载 在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。
3. 清晰明确减少输入 由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时因尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。
例如下图中，在添加银行卡时，采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 ，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。
除了利用接口外，在不得不让用户进行手动输入时，应尽量让用户做选择而不是键盘输入。一方面，回忆易于记忆，让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入；另一方面，仍然是考虑到手机键盘密集的单键输入极易造成输入错误。 例如图中，在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索，而减少或避免不必要是键盘输入。
4. 视觉规范字体规范 微信内字体的使用与所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 11(pt)，使用场景具体如下：
蓝色为链接用色，绿色为完成字样色，红色为出错用色 Press 与 Disable 状态分别降低透明度为20%与10%。
主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑。
设计流程
1.界面尺寸 iPhone6:750x1334px，这里主要是官方的控件是@2x，所以相对来说用750x1334尺寸会更加快捷。如果用@1x图设计也是可以的，只是相对麻烦很多。
2.字体iOS 一般设计稿就只需要做 iOS 版本即可，如果遇到安卓的弹窗设计可以采用安卓的字体来设计，当然并非绝对的，不过大部分设计师都只做 iOS 版本，Android 版本只需适配好即可。
iOS中文字体：PingFang SC
英文字体：SF
Android 中文字体：Source HanSans CN
英文字体：Roboto
3.导航栏 调用 WeUI 基础控件库导航栏，如果想跟线上导航栏效果保持一致，可以通过截图或者自己重新优化微信导航栏。
4.键盘 官方并未给出键盘控件，可以通过查阅开发的组件来得知小程序键盘种类，可以在用到的时候通过截图放入视觉稿交付开发即可。
5.按钮 大家要注意小程序按钮有内描边，而且内描边是有不透明度的，如果你没仔细看小程序的官方按钮，自己重新做的话，很有可能忘记给透明度（前端开发很容易忽略这一点，导致最后的效果是给了双重描边。所以个人建议是能用小程序控件就用控件，防止到时候页面按钮不统一。开发一般就直接调用控件了，很容易忽略这些细节，而且你有时候走查的时候也不一定会注意到这些细节，与其浪费大量的时间走查，不如在开始做的时候就按照小程序的官方规范来做，只是在按钮的颜色上做修改，其他圆角，大小，描边都尽量保持不变）
6.小程序图标 如果你重新设计小程序，需要给图标，图标给方形：144x144px 。
经验总结
1. 小程序注重轻量与便捷，设计过程中鼓励使用原生控件，多关注微信发布的 API 和组件接口，在设计小程序相关场景时，避免过度设计，加快开发进度。
2. 如果要做一些特殊的控件，最好先询问开发是否可实现，防止浪费大量的设计精力。
3. 提供已经压缩的 PNG 图，提供一套切图即可。（ @2x 或者 @3x ）
4. 底部导航栏如果是开发自己写，在切换页面时，会出现闪动（不建议自己定义底部导航栏）
5. 设计按钮时，尽量统一按钮尺寸，按照常用按钮、线性按钮、小按钮三种规格来设计。
6. 注意分割线1px，开发很容易写成2px，记得走查时注意分割线粗细。
7.多跟同事（设计、前端）交流，互相分享你们的经验，这样才能进步的更快。
在线咨询
