以我之力、赋彼之能

　　基于微信小法式轻快的特点，我们(微信官方)拟定了小法式界面设计指南和建议。 设计指南创设在充实敬重用户知情权与操作权的根基之上。旨在微信生态系统内，创设友好、高效、一致的用户体验，同时最大水平顺应和撑持分歧需求，实现用户与小法式办事方的共赢。

　　说到设计规范，这里有一篇绝对不及错过的：《内部教程!超适用6步透视网易设计规范(附完整PDF下载)》

　　一、友好礼貌

　　为了避免用户在微信中利用小法式办事时，留意力被四周复杂情况干扰，小法式在设计时应该留意削减无关的设计元素对用户方针的干扰，礼貌地向用户展示法式供给的办事，友好地指导用户进行操作。

　　重点凸起

　　每个页面都应有明确的重点，以便于用户每进入一个新页面的时辰都能快速地舆解页面内容，在确定了重点的前提下，应尽量避免页面上泛起其他干扰项影响用户的计划和操作。

　　反例示意

　　此页面的主题是查询，却添加了诸多与查询不相关的营业进口，与用户的预期不符，易造成用户的迷失。

　　

 

　　改正示意

　　去掉任何与用户方针不相关的内容，明确页面主题，在手艺和页面控件答应的前提下供给有助于用户方针的接济内容，好比比来搜刮词，常用搜刮词等。

　　

 

　　反例示意

　　操作没有主次，让用户无从选择

　　

 

　　改正示意

　　起首要避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。

　　

 

　　流程明确

　　为了让用户顺畅地利用页面，在用户进行某一个操作流程时，应避免泛起用户方针流程之外的内容而打断用户。

　　反例示意

　　用户本筹算进行搜刮，在进入页面时却被突如其来的抽奖弹窗所打断;对于抽奖没有爱好的用户长短常不友好的干扰; 而即便有部门用户的确被“诱人”的抽奖举动所吸引，分开主流程去抽奖之后可能就遗忘了原本的方针，进而落空了对产物真正价值的哄骗和熟悉。

　　

 

　　二、清楚明确

　　一旦用户进入我们的小法式页面，我们就有责任和义务清楚明确地见告用户身在何处、又或许往何处去，确保用户在页面中游刃有余地穿梭而不迷路，如许才能为用户供给平安的愉悦的利用体验。

　　导航明确，来往自如

　　导航是确保用户在网页中浏览跳转时不迷路的最环节身分。导航需要告诉用户，我在哪，我或许去哪，若何归去等问题。起首在微信系统内的所有小法式的所有页面，均会自带微信供给的导航栏，统一管理我在哪，若何归去的问题。在微信层级导航连结体验一致，有助于用户在微信内形成统一的体验和交互认知，无需在各小法式和微信切换中新增进修成本或改变利用习惯。

　　微信导航栏

　　微信导航栏，直接担当于客户端，除导航栏颜色之外，开发者无需亦不行以对此中的内容进行自界说。但开发者需要划定小法式各个页面的跳转关系，让导航系统或许以合理的格局工作。

　　微信导航栏分为导航区域、题目区域以及操作区域。此中导航区节制法式页面历程。今朝导航栏分深浅两种根基配色，在iOS和Android展示有所分歧，如下图所示：

　　导航区(iOS)：

　　导航区每每只有一个操作，即返回上一级界面。开发者可界说其内容，不行对样式进行点窜

　　导航区(Android)：

　　同iOS日常，导航区也只有一个返回上一级页面的操作，而点击安卓手机自带的硬件返回键也起到不异感化。

　　

　　微信导航栏自界说颜色规矩(iOS和Android)

　　小法式导航栏撑持根基的后台颜色自界说功能，选择的颜色需要在知足可用性前提下，协调搭配微信供给的两套主导航栏图标。建议参考以下选色成效：

　　选色方案示例：

　　

 

　　页面内导航

　　开发者可按照自身功能设计需要在页面内添加自有导航。并连结分歧页面间导航一致。可是受限于手机屏幕尺寸的限制，小法式页面的导航应尽量简洁，若仅为普通线性浏览的页面建议仅利用微信导航栏即可。

　　微信控件库供给标签分页(Tab)导航供开发者选择。标签分页栏可固定在页面顶部或者底部，便于用户在分歧的分页间做切换。为确保点击区域，标签不得高出4项。一个页面也不该泛起一组以上的标签分页栏。

　　标签分页栏选中态默认为100%实色，未选中态带有60%，此中选中态颜色可自界说。在自界说颜色选择中，务必留意连结分页栏标签的可用性、可视性和可操作性。

　　

 

　　削减期待，反馈实时

　　页面的过长时候的期待会引升引户的不良情绪，利用微信小法式项目供给的手艺已能很大水平缩短期待时候。即便如斯，当不行避免的泛起了加载和期待的时辰，需要予以实时的反馈以舒缓用户期待的不良情绪。

　　启动页加载

　　小法式启动页是小法式在微信内容必然水平上揭示品牌特征的页面之一。本页面将凸起展示小法式品牌特征和加载状况。启动页除品牌标记(Logo)展示外，页面上的其他所有元素如加载进度指示，均由微信统一供给且不及更改，无需开发者开发。

　　

 

　　页面下拉刷新加载

　　在微信小法式内，微信供给尺度的页面下拉刷新加载能力和样式。 开发者可自界说需要过程下拉交互完成刷新的页面，此类交互微信将供给尺度能力和样式。在样式上，刷新图标与下拉标示配色已绑缚，分为深浅两套方案，开发者在利用时，应留意头部文字、下拉标识与刷新图标的协调统一。当用户在该类页面做出下拉交互时，泛起微信小法式页面尺度加载动画。开发者无需自行开发样式

　　

 

　　带有标签分页(Tab)页面的下拉刷新加载

　　若页面带有标签分页(Tab)，开发者可将刷新动作位置界说到标签栏之下，且仅刷新当前页面内容，开发者暂无法自行界说此加载成效。

　　

 

　　深浅两套下拉样式

　　微信下拉提醒用于给用户明确的小法式归属者，防止造假与作弊。此处标示供给深浅两套方案，文字颜色不行自界说，开发者在自界说后台色时，应留意包管下拉标示的辨识度。iOS和Android配色方案不异如下展示。

　　

 

　　微信下拉标示错误利用案例

　　请避免以下错误利用状况，确保信息的可见性和页面的可用性。

　　

 

　　页面内加载反馈

　　开发者可在小法式里自界说页面内容的加载样式。建议不管是利用在局部照旧全体，自界说加载样式都应该尽可能精练，并利用简洁动画见告用户加载过程。 开发者也或许利用微信供给的，统一的页面加载样式，如图中例所示。

　　

 

　　模态加载

　　模态的加载样式将笼盖整个页面的，因为无法明确见告具体加载的位置或内容将可能引升引户的焦虑感，是以应隆重利用。除了在某些全局性操作下不要利用模态的菊花。

　　

 

　　局部加载反馈

　　即只在触发加载的页面局部进行反馈，如许的反馈机制加倍有针对性，页面改动小，是微信保举的反馈格局。例如：

　　

 

　　加载反馈留意事项

　　若载入时候较长,应供给勾销操作,并利用进度条显示载入的进度。

　　载入过程中,应连结动画成效 ; 无动画成效的加载很轻易让人发生该界面已经卡死的错觉。

　　不要在统一个页面同时利用高出1个加载动画。

　　成绩反馈

　　除了在用户期待的过程中需予以实时反馈外，对操作的成绩也需要予以明确反馈。按照现实状况，可选择分歧的成绩反馈样式。对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作成绩，可利用弹出式提醒(Toast)、模态对话框或成绩页面展示。

　　页面局部操作成绩反馈

　　对于页面局部的操作，可在操作区域予以直接反馈，例如点击多选控件前后如下图。对于常用控件，微信设计中心将供给控件库，此中的控件将供给完整操作反馈。

　　

 

　　页面全局操作成绩——弹出式提醒(Toast)

　　弹出式提醒(Toast)合用于轻量级的成功提醒，1.5秒后主动消退，并不打断流程，对用户影响较小，合用于不需要强调成功状况的操作提醒。格外留意该形式不合用于错误提醒。

　　

 

　　页面全局操作成绩——模态对话框

　　对于需要用户明确知晓的操作成绩状况可过程模态对话框来提醒，并可附带下一步操作指引。

　　

 

　　页面全局操作成绩—成绩页

　　对于操作成绩已经是当前流程的终结的状况，可利用操作成绩页来反馈。这种格局最为强烈和明确的见告用户操作已经完成，并可按照现实状况给出下一步操作的指引。

　　

 

　　特别可控，有路可退

　　在设计任何的使命和流程时，特别状况和流程往往轻易被忽略，而这些特别场景往往是用户最为沮丧和需要接济的时辰，是以需要特别留意特别状况的设计，在泛起特别时予以用户需要的状况提醒，并见告管理方案，使其有路可退。

　　要杜绝特别状况下，用户莫名其妙又无处可去，卡在某一个页面的状况。2.2中所提到的弹窗和成绩页面都可作为特别状况的提醒格局。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出犯错项目，以便用户点窜。

　　特别状况——表单犯错

　　表单报错，在表单顶部见告错误原因，并标识犯错误字段提醒用户点窜

　　

 

　　三、便捷优雅

　　从PC时代的物理键盘鼠标到移动端时代手指，固然输入设备极大精简，可是手指操作的精确性却大大不如键盘鼠标切确。为了顺应这个改变，需要开发者在设计过程中充实哄骗手机特征，让用户便捷优雅的操控界面。

　　削减输入

　　因为手机键盘区域小且密集，输入艰巨的同时还易引起输入错误，是以在设计小法式页面时因尽量削减用户输入，哄骗现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

　　削减输入，巧用接口：

　　例如下图中，在添加银行卡时，采用摄像头识别接口来接济用户输入。除此之外微信团队还对外开放例如地舆位置接口等多种微信小法式接口 ，充实哄骗这些接口将大大提高用户输入的效率和精确性，进而优化体验。

　　

 

　　除了哄骗接口外，在不得不让用户进行手动输入时，应尽量让用户做选择而不是键盘输入。一方面，回忆易于记忆，让用户在有限的选项中做选择每每来说是轻易于完端赖记忆输入;另一方面，仍然是考虑到手机键盘密集的单键输入极易造成输入错误。 例如图中，在用户搜刮时供给搜刮汗青快捷选项将接济用户快速进行搜刮，而削减或避免不需要是键盘输入。

　　

 

　　避免误操作

　　因为在手机上我们过程手指触摸屏幕来操控界面，手指的点击切确度远不如鼠标，是以在设计页面上需点击的控件时，需要充实考虑到其热区面积，避免因为可点击区域过小或过于密集而造成误操作。当简洁的将原本在电脑屏幕上利用的界面不做任何适配直接移植到手机上时，往往就轻易泛起如许的问题。因为手机屏幕分辨率各不不异，是以最适宜点击像素尺寸也不完全一致，但换算成物理尺寸后大致是在7mm-9mm之间。在微信供给的尺度组件库中，各类控件元素均已考虑到了页面点击成效以及分歧屏幕的适配，是以再次保举利用或仿照尺度控件尺寸进行设计。

　　哄骗接口晋升机能

　　微信设计中心已推出了一套网页尺度控件库，包孕sketch设计控件库和Photoshop设计控件库，后续还将完美小法式组件，这些控件都已充实考虑了移动端页面的特点，或许包管其在移动端页面上的可用性和操作机能;同时微信开发团队也在不息完美和扩充微信小法式接口，并供给微信公共库，哄骗这些资源不光或许为用户供给加倍快捷的办事，并且对页面机能的提高有极高文用，无形之中晋升了用户体验。

　　统一不变

　　除了以上所提到的各种原则，建议接入微信的小法式还应该时刻留意分歧页面间的统一性和延续性，在分歧的页面尽量利用一致的控件和交互格局。

　　统一的页面体验和有延续性的界面元素都将接济用起码的进修成本告竣利用方针，减轻页面跳动所造成的不适感。正因如斯，小法式可按照需要利用微信供给的尺度控件，以达到统一不变的目的。

　　视觉规范

　　为利便设计师进行设计，微信供给一套可供Web设计和小法式利用的根基控件库;同时供给利便开发者挪用的资源。

　　We-UI_sketch组件库下载 We-UI_PS组件库下载

　　预览地址：https://weui.io

　　字体规范

　　微信内字体的利用与所运行的系统字体连结一致，常用字号为20, 18, 17, 16,14 13, 11(pt)，利用场景具体如下：

　　

 

　　字体颜色：

　　

 

　　主内容 Black 黑色，次要内容 Grey 灰色;时候戳与表单缺省值 Light 灰色;大段的申明内容并且属于首要内容用 Semi 黑;

　　

 

　　蓝色为链接用色，绿色为完成字样色，红色为犯错用色 Press与 Disable状况分辨降低晶莹度为20%与10%;

　　

 

　　列表视觉规范

　　

 

　　表单输入视觉规范

　　

 

　　按钮利用原则

　　列表外按钮上文字尺度：

　　按钮高度为44px下利用: 颜色 #000000 / #353535 字号 18pt

　　可点状况下文字调整晶莹度为60%

　　不行点状况下文字调整晶莹度为30%

　　

 

　　列表外按钮上文字尺度：

　　按钮高度为25px下利用: 颜色 #000000 / #353535 字号 14pt

　　页面线性按钮上文字尺度：

　　按钮高度为35px下利用: 颜色 #09BB07 / #353535 字号 16pt

　　

 

　　图标利用原则