微信小程序提供三个结果提示方式,提示效果从轻至强的分别为小弹窗提示(toast)、模态框提示(modal)和单独的成功结果页面。开发者需要根据实际情况,对不同程度的提示进行合理利用。 知晓程序(微信号 zxcx0101)建议:操作反馈时用 toast,询问行为时用 modal,表单提交后用页面。
Toast、Modal 和成功页面 这份设计文档特别强调了异常情况的设计。在小程序中,异常情况需要明确告知用户出现了问题,同时明确告知用户问题出在哪里、应该如何解决。 文档对表单中填写出错情况的提示样式进行了规定。
表单错误提示示例 如果表单中出现错误,小程序应该在顶部弹出提示,并在错误项目的右侧提供错误 icon,以便用户定位问题。 3. 便捷优雅 微信官方希望小程序可以敏捷地解决问题。 比如,当用户在进行输入时,可以通过联想、API 接口以及其他方式(例如扫描银行卡等),帮助用户快速准确地填充输入内容。
扫描银行卡快速填充内容 在设计时,应该确保用户的误操作概率更低。 微信官方在文档中提到, 可点击元素应该要保证足够大,以便用户能够有明确的点击反馈。但知晓程序(微信号 zxcx0101)提醒,文案及 icon 不让用户困惑也是减少误操作的重要方式之一。 4. 统一稳定 在设计文档中,有关于统一稳定的说法更倾向于「统一」。即 小程序在整体上应该要为用户提供整齐划一的功能,避免同一种视觉元素中在不同页面中有不同的样式。 这样的原则,有助于保证用户的认知稳定性。设计师在设计的时候,应尽可能避免一个小程序中多种元素风格差异较大的情况。这样既不能保证小程序的视觉统一性,同时也对用户的认知稳定造成严重破坏。 知晓程序(微信号 zxcx0101)建议:在开发过程中,可以将相同的组件的样式规定于一个全局 WXSS 文件中,以便开发时快速复用并保证视觉统一。 差异比较 如果网页设计师或移动应用 UI 设计师转向开发小程序的话,了解小程序与之前设计领域的异同是很有必要的。 知晓程序(微信号 zxcx0101)以这份设计文档为基础,讲解小程序 UI 设计与传统的移动应用设计和网页设计的差异。 1. 如果你是网页设计师 对于网页设计师来说,小程序界面设计最大的挑战在于 以往桌面为先的思维需要转向移动为先,因为作为一款依赖手机运行的应用,微信小程序需要聚焦于移动使用。 移动端与桌面端的区别在于: 屏幕尺寸与比例。移动设备的屏幕一般会比桌面设备的屏幕更小,同时屏幕比例从横向变成了纵向。 输入设备。桌面设备拥有鼠标和键盘,而移动设备上,开奖,用于信息输入的几乎只有手指。 网络特性。桌面端不需要考虑网络问题,但在移动设备上,用户使用的网络可能会有流量限制或速率限制。 因此,知晓程序(微信号 zxcx0101)要提醒网页设计师,在设计小程序界面的时候需要注意这些差异: 多花点功夫在排版上。在移动设备上使用程序,不像是在电脑上使用那么轻松自在。为小程序的元素和文字进行排版时,这些元素和文字应适当放大,同时加大间距。 避免花哨元素。过于花哨的元素在小屏幕上容易「吸」走用户的注意力,不符合设计文档中的规范,atv,同时会增加用户的网络流量和载入时间。 注意导航系统设计。小程序没有「面包屑」(导航指示器),在设计的时候需要确保用户不会在页面中迷失,同时需要保证用户的下一步符合其预期。 多测试。在转换至小程序的初期,强烈建议将设计原型稿放到真机进行测试和评估。 2. 如果你是移动 UI 设计师 对于 UI 设计师来说,小程序带来了一个好消息和一个坏消息。 (责任编辑:本港台直播) |