5个关键词：微信小程序和App的UI设计有什么异同？【半岛网页版】

本文摘要：按：作者沙铭，OOPSING咨询创始人，推展圈里不懂编程、码农圈里不懂推展的苹果专家。

按：作者沙铭，OOPSING咨询创始人，推展圈里不懂编程、码农圈里不懂推展的苹果专家。自从做到了自媒体之后，就有了职业病，看见热点就想要平，这病得治！虽然我研究苹果较为多，但是大家总是把小程序和App放到一起比，因此我也花上时间看了一下小程序的研发指南，特别是在是UI部分的设计和原则，今天就拿它和苹果的HIG（Human Interface Guidelines）做到个较为，只不过两者在一些大的原则处置上可以说道是完全一致的。

关键词一：友好关系礼貌对应于苹果：Less is more苹果在iOS7时做到了一个十分大的界面调整，以引人注目内容居多，去杀掉了所有不会阻碍用户的界面元素，这个风格完全一致沿袭至今（以苹果自家的App，比如指南针，天气为例就可以显现出）。微信在指南一开始也特别强调了这个原则，后用两个正反示例加以解释。

一是不要在搜寻页面上摆放不涉及因素，最差敲上最近搜索词，常用搜索词等，二是不要给用户过于多选择项（现在自由选择恐惧症患者更加多）。关键词二：清晰明确对应于苹果：Clarity苹果的HIG中三大原则之首就是明晰，这里面有几层含义，其中之一就是开发者有义务通过导航系统栏设置答案用户的三大疑惑：当前在哪？可以往何处去？去的地方能做到什么？微信也再度特别强调了导航系统设置明晰的重要性，并且必要在微信层面就把当前在哪和如何回来的问题解决问题了，开发者只要定义好可以往何处去就OK了，至于导航系统栏，除了颜色能变更之外，开发者没什么可以做到的了。如iOS的状态栏获取厚薄两种样式，小程序导航系统栏也适当有这两种样式，和状态栏融为一体。至于选色方案，微信也得出了示例，原则就是要配色人与自然，不影响文字的可读性，这一点只不过也是苹果尤其在乎的，建议文本和背景色的对比度要在4.5:1 - 7:1之间。

此外，开发者可以在微信导航系统页面内再行金字一个自有导航系统栏，但不建议这么做到，如有必须尽可能用于标签分页（Tab），有顶部和底部两种样式，苹果对Tab栏的建议是3-5个，微信建议是2-4个，放太多选项不仅让页面变得简单，且不更容易用户操作者。关键词三：对系统及时对应于苹果：Responsiveness微信花费了大量的篇幅特别强调读取页面时必需要及时、有对系统，这一定是跟小程序本身的定位有关系，因此基本上能做到的都老大开发者做到了，比方说启动页除了能加个自有logo外，其余元素都无法改动，很多程序内动画都是微信标准定义的，这一点和iOS原生App的灵活性差异较为大。然而，两者在大的应以却如出一辙，要保证界面临用户的操作者作出及时的适当，哪怕是在读取过程当中。

由于小程序要引人注目节奏轻快的特点，微信重点图形这一部分就不怪异了，且详尽通过示例介绍了有所不同情况下的处置建议。关键词四：便利高雅对应于苹果：User Friendly微信主要提及了增加输出和防止误操作的问题，这和苹果是高度一致的，不过苹果获取了更加多的控件供选择。

在增加误操作方面，苹果拒绝所有可触触的范围要在44pt以上，而微信更加准确，把这个折算出了物理尺寸7mm-9mm之间。关键词五：视觉规范对应于苹果：Legibility苹果可以说道对于文本的可读性拒绝极高，并于2015年发售了其自有字体SF（San Fransisco），一套专门回应展开了优化的字体，此外，还定义了一套动态字体标准，确保任何人都可以感觉的在iPhone和iPad上读者。而微信在字体上认同和系统保持一致，其它的考虑到和苹果也是大同小异。

不过，为了确保文本明晰可读书，微信更进一步，必要把各种文本的颜色也定义杀了，考虑到和自身的协调性，就连链接字体，错误字体，已完成字体的颜色也都以定杀了，没任何充分发挥空间。最后，我也对比了一下两者的控件，微信获取的控件十分“微信”，连尺寸，颜色，字号等都规定好了，没什么可操作者的空间，比方说右图的Button控件，开发者就在这10几种样式里自由选择就好了，而相比之下iOS的控件给开发者获取了辽阔的自定义空间，这也体现出有两个平台的有所不同定位。总体来说，苹果和微信在UI设计的理念上是相连的，就是非常简单、明晰和对系统及时，不过微信在明确的说明上更为精细，力图防止误会。此外，苹果三大设计原则中除了Clarity，还有Deference（遵守）和Depth（深度），后两者是微信讲的较为较少的，这也是两者定位有所不同所致。

坚信大家在理解了以上信息之后，可以更为确切小程序和App之间的差异，从UI层面，小程序界面统一，或者说都宽了一副微信的样子，而App则是千人千面，更为多姿多彩。本文由人人都是产品经理作者@沙铭 原创公布(公众号：)。未经许可，禁令刊登。

原创文章，予以许可禁令刊登。下文闻刊登须知。

本文来源：半岛网页版-www.bustingthemyths.com