5个关键词：微信小程序和App的UI设计有什么异同？_亚博app取款速度快

作者：作者沙明，OOPSING Consulting创始人，苹果专家，不知道如何在推广圈编程，也不知道如何在代码农业圈推广。自媒体以来，就出现了职业病。

看到热点就想扁。这病一定要治！虽然我对苹果的研究比较多，但是人们总是把小程序和应用放在一起，所以我也花时间看小程序的研发指南，尤其是UI的设计和原理。

今天，我将它们与苹果的HIG(人机界面指南)进行比较，但它们在一些主要原则上可以说是完全一致的。关键词1:友好礼貌对应苹果：少即是多苹果在iOS7中做了一个非常大的界面调整，大部分是以醒目的内容，扼杀了所有不会妨碍用户的界面元素，这种风格完全符合今天(以苹果自己的App，比如指南针，天气为例，可以展示)。

微信在指南开头也强调了这个原则，然后用正反两个例子来说明。第一，不要把无关的因素放在搜索页面上，最糟糕的是键入最近的搜索词、常用搜索词等。第二，不要给用户太多选择(现在自由选择的恐惧症患者比较多)。

关键词2:清晰对应苹果：清晰苹果HIG三大原则中的第一条就是清晰，有几个意思。其中之一就是开发者有义务通过导航系统栏回答用户的三个疑问：现在在哪里？我能去哪里？去哪里可以做什么？微信再一次强调明确导航系统设置的重要性，要解决微信层面的哪里回来，怎么回来的问题。只要开发者定义好去哪里，就可以了。

至于导航系统栏，开发者除了可以改变颜色之外，什么也做不了。比如iOS的状态栏得到两种样式的粗细，小程序导航系统栏也适当的有这两种样式，与状态栏集成在一起。至于选色方案，微信也举了个例子。

原则是在不影响文字可读性的前提下，给人和自然上色。这正是苹果特别在意的。建议文字与背景颜色的对比度在4.5:1到7:1之间。

另外，开发者可以在微信导航系统页面再写一个自己的导航系统专栏，但不建议这样做。如有必要，必须尽可能用于制表符。有上下两种风格。苹果建议3-5个Tab栏，微信建议2-4个栏。

放太多选项不仅让页面变得简单，也让用户更容易操作。关键词3:及时对应苹果：响应微信花了不少篇幅，特别强调要及时正确的阅读页面，这一定和小程序本身的定位有关，所以基本上能做的都是老板开发者做的。比如启动页面可以添加自己的logo，其他元素不可更改。程序中很多动画都是微信标准定义的，和iOS原生app的灵活性有很大区别。

但两者在大尺度上应该是完全一样的，要保证面对用户的运营商做出及时恰当的决策，甚至是在阅读过程中。因为小程序要醒目快节奏，所以微信的这部分关键图形并不诡异，通过例子详细介绍了不同情况下的处置建议。关键词4:方便与优雅对应苹果：用户友好微信主要提到了增加输出和防止误操作的问题，与苹果高度一致，但苹果获得了更多的控件可供选择。

在增加误操作方面，苹果拒绝所有可触摸范围都要在44pt以上，而微信更精准，物理尺寸在7mm到9mm之间。关键词5:视觉标准对应苹果：合法性苹果可以说是排斥文字可读性极高。2015年，它发布了自己的字体SF(San Fransisco)，这是一组专门为响应而优化的字体。

此外，它还定义了一套动态字体标准，以确保任何人都能在iPhone和iPad上感受到读者。微信在字体上认同系统，其他考虑和苹果差不多。但为了保证文字清晰可读，微信走得更远，需要定义和扼杀各种文字的颜色。考虑到与本身的协调性，连链接字体、错别字、完成字体的颜色都杀了，没有发挥的空间。

最后，我还比较了两者的控制。微信获得的控件非常“微信”，连大小、颜色、字号都有规定，没有运营商的空间。比如右图的Button控件，开发者可以在这10种风格中自由选择，而iOS控件则给了开发者一个广阔的定制空间，这也体现了两个平台的不同定位。一般来说，苹果和微信在UI设计理念上是相通的，也就是对系统非常简单、清晰、及时，但微信在清晰的解释上更为精细，尽量避免误解。

另外，苹果的三大设计原则中，除了净度之外，还有difference和due，后两者被微信谈论的比较少，也是因为定位不同。我坚信，在了解了以上信息之后，我们就可以更精确的了解小程序和应用的区别了。

从UI层面来说，小程序有统一的界面，或者说看起来都像微信，而应用则更加丰富多彩。本文原作者@沙明发表，大家都是产品经理(微信官方账号：)。

未经许可禁止出版。允许禁止发表的原创文章。以下是发布通知。

本文来源：亚博app取款速度快-www.neon-clothing.com