微信小程序的日活用户数到达4.5亿,预计 2020 年会达到5亿。微信小程序异军突起,拥有庞大的流量,现在很多人都想着拥有一个属于自己的小程序,可是因为不懂代码而不知道怎么搭建
为什么要用小程序
不用安装,即开即用,节省流量,节约安装时间,而且不占用桌面;
功能上更为集中、单一,降低用户的使用难度,减少手机的过度使用。
避免并列过多操作让用户选择,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。
西安微信小程序开发对于导航区设计
微信进入小程序的第一个页面,导航区通常只有一个操作——“返回”,即返回进入小程序前的微信页面。 进入小程序后的次级页面,导航区的操作为——“返回” 和“关闭”。 “返回”,即返回上一级小程序界面或微信界面。“关闭”,即在当前界面直接退出小程序,回到进入小程序前的微信页面。
导航区
导航区仅存在唯一操作——直接退出小程序,回到进入小程序前的微信或系统桌面,安卓手机自带的硬件返回键执行返回上一级页面的操作。
这里主要讲解 Android 和 iOS 的差异化,设计小程序时可以不用考虑。
导航区(颜色)
导航区颜色支持自定义,选择与提供的顶栏颜色相和谐搭配的背景色。
标签分页(Tab)导航
标签数量不得少于2个,最多不得超过5个,为确保点击区域,建议标签数量不超过4项。
启动页加载
启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需开发者开发。
下拉刷新加载
在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式,开发者无需自行开发。
清晰明确减少输入
由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在
设计小程序页面时因尽量减少用户输入,利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。
例如下图中,在添加银行卡时,采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 ,充分利用这些接口将大大提高用户输入的效率和准确性,进而优化体验。
除了利用接口外,在不得不让用户进行手动输入时,应尽量让用户做选择而不是键盘输入。一方面,回忆易于记忆,让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入;另一方面,仍然是考虑到手机键盘密集的单键输入极易造成输入错误。 例如图中,在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索,而减少或避免不必要是键盘输入。
视觉规范字体规范
微信内字体的使用与所运行的系统字体保持一致,常用字号为20, 18, 17, 16,14 13, 11(pt),使用场景具体如下:
蓝色为链接用色,绿色为完成字样色,红色为出错用色 Press 与 Disable 状态分别降低透明度为20%与10%。
主内容 Black 黑色,次要内容 Grey 灰色;时间戳与表单缺省值 Light 灰色;大段的说明内容而且属于主要内容用 Semi 黑。
设计流程
界面尺寸
iPhone6:750x1334px,这里主要是官方的控件是@2x,所以相对来说用750x1334尺寸会更加快捷。如果用@1x图设计也是可以的,只是相对麻烦很多。
字体iOS
一般设计稿就只需要做 iOS 版本即可,如果遇到安卓的弹窗设计可以采用安卓的字体来设计,当然并非绝对的,不过大部分设计师都只做
导航栏
调用 WeUI 基础控件库导航栏,如果想跟线上导航栏效果保持一致,可以通过截图或者自己重新优化微信导航栏。
键盘
官方并未给出键盘控件,可以通过查阅开发的组件来得知小程序键盘种类,可以在用到的时候通过截图放入视觉稿交付开发即可。
按钮
大家要注意小程序按钮有内描边,而且内描边是有不透明度的,如果你没仔细看小程序的官方按钮,自己重新做的话,很有可能忘记给透明度(前端开发很容易忽略这一点,导致最后的效果是给了双重描边。所以个人建议是能用小程序控件就用控件,防止到时候页面按钮不统一。开发一般就直接调用控件了,很容易忽略这些细节,而且你有时候走查的时候也不一定会注意到这些细节,与其浪费大量的时间走查,不如在开始做的时候就按照小程序的官方规范来做,只是在按钮的颜色上做修改,其他圆角,大小,描边都尽量保持不变)
小程序图标
如果你重新设计小程序,需要给图标,图标给方形:144x144px 。
西安小程序开发包括设计需求,功能项目,表格表单,广告语言,模板栏目,按钮,跳转链接,运行逻辑,计算公式,展现手段等。