你的位置:首页 > 新闻动态 > 行业新闻
联系我们

 微信小程序如何做到好看又好用?

2018/7/31 11:10:32      点击:
从微信、大众账号、到微信支付,再到小程序,微信正逐渐将自己从一个「即时通讯东西」变成一个「操作系统」。但特别的是,微信这个 跨渠道操作系统需求一起统筹 iOS 及 Android 两套 UI 规范。

  怎么确保小程序的开发统筹两种渠道的界面风格,并与微信自身的体会坚持一致呢?

  阅览微信官方的规划文档是最有用的方法。

  里边供给了很多的用户界面实例,开发者只需严格依据这份规划文档,就可以做出兼具漂亮、有用的 UI 与交互形式。

  为了协助大家更快地了解规划文档,知晓程序(微信号 zxcx0101)专门准备了这份文档解读,不只将规划文档的篇幅浓缩到二分之一,还在文末添加了小程序 UI 规划与传统的移动运用规划和网页规划的差异比较。

  现在, 只需花一半的时刻看这篇文章,你就能把握规划文档的一切关键。

  注:本文首要针对小程序开发者和 UI 规划师。假如想零根底学习小程序开发,请持续重视知晓程序(微信号 zxcx0101)的后续内容。

  小程序官方规划文档解读

  根本规矩

  微信小程序规划文档将一切的规划典范分为了四个部分,别离是:

  友爱礼貌

  清晰清晰

  快捷高雅

  一致安稳

  除此之外,微信官方还供给了一些便于开发者运用的组件,这些组件可以在微信官方的小程序 IDE 中直接运用。

  规划文档也针对这部分组件进行了详细阐明,包含每个组件的适用范围。一起,还供给了 Sketch 与 Photoshop 的规划模板,便于 UI 规划师直接运用。

  知晓程序(微信号 zxcx0101)主张:没有太多规划经历的开发者请尽可能运用微信供给的组件款式,这样可以在快速开发的前提下,确保小程序的用户体会。

  1. 友爱礼貌

  微信官方期望小程序专心处理用户当时的问题,做一个「管家」,而非是在用户处理问题时分,一向制作搅扰的「推销员」。

  首要,每一个页面都应该聚集于某个重点功用,不能与该功用无关。

  例如,查找页面的功用应该是「查找」,与查找无关的功用或内容(如 banner 广告以及诱导查找关键词推广等)应该尽可能去除去。

  官方过错示例,在查找页中添加无用信息

  其次,页面的导航应该依照用户的预期进行。

  例如,用户跳转进入一个页面时,小程序不应该弹出与之无关的广告,由于广告不契合用户进入页面的预期。

  官方过错示例,进入页面弹出与功用无关广告

 主张:小程序规划时应该以快速处理用户问题为目标,并为其供给清晰且契合预期的步骤导航。而这与张小龙在讲演中说到的「用完即走」的概念是契合的。

  2. 清晰清晰

  用户在操作小程序时,小程序应该为用户明示当时状况,一起应极力削减用户在操作上的约束和等候时刻。

  微信官方现已为小程序供给了大局导航栏,包含导航区(回来按钮)、标题区和操作区三组。

  假如开发者有需求,可以在小程序的主页中运用页面内导航,包含顶部 Tab 款式和底部标签款式。每种款式至少需求两个标签,最多不能超越五个标签,而 微信官方给出主张是最多不要超越四个。

  官方供给的底部标签和顶部 Tab 款式

  开发者可以界说导航栏和页面内导航的风格色彩。在界说色彩时,开发者需求留意元素辨识度,不能呈现刺眼和按钮与文字可视性差的状况。

  小程序中的加载反应细节也是影响全体体会的重要部分。 微信供给了一个下拉改写组件,只需求依照要求套用即可。

  一起,页面内的加载提示引荐运用部分加载反应而非大局加载反应。加载时刻较长时,主张供给进度条以减缓用户等候的焦灼感。

  下拉改写款式和部分加载示例

  微信小程序供给三个成果提示方法,提示作用从轻至强的别离为小弹窗提示(toast)、模态框提示(modal)和单独的成功成果页面。开发者需求依据实践状况,对不同程度的提示进行合理运用。

  主张:操作反应时用 toast,询问行为时用 modal,表单提交后用页面。

  Toast、Modal 和成功页面

  这份规划文档特别强调了异常状况的规划。在小程序中,异常状况需求清晰奉告用户呈现了问题,一起清晰奉告用户问题出在哪里、应该怎么处理。

  文档对表单中填写犯错状况的提示款式进行了规则。

  表单过错提示示例

  假如表单中呈现过错,小程序应该在顶部弹出提示,并在过错项目的右侧供给过错 icon,以便用户定位问题。

  3. 快捷高雅

  微信官方期望小程序可以敏捷地处理问题。

  比方,当用户在进行输入时,可以经过联想、API 接口以及其他方法(例如扫描银行卡等),协助用户快速精确地填充输入内容。

  扫描银行卡快速填充内容

  在规划时,应该确保用户的误操作概率更低。

  微信官方在文档中说到, 可点击元素应该要确保足够大,以便用户可以有清晰的点击反应。但程序提示,案牍及 icon 不让用户困惑也是削减误操作的重要方法之一。

  4. 一致安稳

  在规划文档中,有关于一致安稳的说法更倾向于「一致」。即 小程序在全体上应该要为用户供给整齐划一的功用,防止同一种视觉元素中在不同页面中有不同的款式。

  这样的准则,有助于确保用户的认知安稳性。规划师在规划的时分,应尽可能防止一个小程序中多种元素风格差异较大的状况。这样既不能确保小程序的视觉一致性,一起也对用户的认知安稳形成严重破坏。

  主张:在开发过程中,可以将相同的组件的款式规则于一个大局 WXSS 文件中,以便开发时快速复用并确保视觉一致。

  差异比较

  假如网页规划师或移动运用 UI 规划师转向开发小程序的话,了解小程序与之前规划范畴的异同是很有必要的。

  以这份规划文档为根底,解说小程序 UI 规划与传统的移动运用规划和网页规划的差异。

  1. 假如你是网页规划师

  关于网页规划师来说,小程序界面规划最大的应战在于 以往桌面为先的思想需求转向移动为先,由于作为一款依靠手机运行的运用,微信小程序需求聚集于移动运用。

  移动端与桌面端的差异在于:

  屏幕尺度与份额。移动设备的屏幕一般会比桌面设备的屏幕更小,一起屏幕份额从横向变成了纵向。

  输入设备。桌面设备具有鼠标和键盘,而移动设备上,用于信息输入的简直只要手指。

  网络特性。桌面端不需求考虑网络问题,但在移动设备上,用户运用的网络可能会有流量约束或速率约束。

  因此要提示网页规划师,在规划小程序界面的时分需求留意这些差异:

  多花点功夫在排版上。在移动设备上运用程序,不像是在电脑上运用那么轻松自在。为小程序的元素和文字进行排版时,这些元素和文字应适当扩大,一起加大距离。

  防止花哨元素。过于花哨的元素在小屏幕上简单「吸」走用户的留意力,不契合规划文档中的规范,一起会添加用户的网络流量和载入时刻。

  留意导航系统规划。小程序没有「面包屑」(导航指示器),在规划的时分需求确保用户不会在页面中迷失,一起需求确保用户的下一步契合其预期。

  多测验。在变换至小程序的初期,强烈主张将规划原型稿放到真机进行测验和评估。

  2. 假如你是移动 UI 规划师

  关于 UI 规划师来说,小程序带来了一个好消息和一个坏消息。

  好消息:移动 UI 中的规划思想和范式,绝大部分都能用在小程序规划上,且规划师不需求为 iOS 与 Android 别离规划界面,只需将有差异的部分进行分状况评论即可。

  坏消息:微信原生供给的控件较为有限。微信中只供给了多种按钮、Toast、提示 icon、开关、多选框、复选框和滑块等几种控件。其他的控件需求自己依据实践风格进行开发和规划。

  此外,微信小程序的风格与 iOS HIG 和 Material Design 两种规划范式差异都较大。 在规划时,需求多加留意规划文档中的阐明和典范,以便规划出契合规范的小程序界面。

  对微信小程序规划文档的解读就到这儿停止了。期望经过这份解读文档,能协助开发者轻松开发出具有优秀体会的小程序。