5个关键词看小程序和App的UI设计异同

  

  微信总喜欢在深夜推出一个大新闻,昨晚10点,小程序开放公测的消息一出,我公号的文章都推不出去了,一直显示系统繁忙,那得是多大的流量啊,心里暗想,能分我一点零头就好了,估计是我想多了!

  自从做了自媒体之后,就有了职业病,看到热点就想追,这病得治!

  虽然我研究苹果比较多,但是大家总是把小程序和App放在一起比,因此我也花时间看了一下小程序的开发指南,尤其是UI部分的设计和原则,今天就拿它和苹果的HIG(Human Interface Guidelines)做个比较,其实两者在一些大的原则处理上可以说是一致的。

  苹果在iOS7时做了一个非常大的界面调整,以突出内容为主,去除掉了所有会干扰用户的界面元素,这个风格一致延续至今(以苹果自家的App,比如指南针,天气为例就可以看出)。

  微信在指南一开始也强调了这个原则,并用两个正反示例加以说明。一是不要在搜索页面上放置不相关因素,最好放上最近搜索词,常用搜索词等,二是不要给用户太多选择项(现在选择恐惧症患者越来越多)。

  苹果的HIG中三大原则之首就是清晰,这里面有几层含义,其中之一就是开发者有义务通过导航栏设置解答用户的三大疑问:

  微信也再次强调了导航设置清晰的重要性,并且直接在微信层面就把当前在哪和如何回去的问题解决了,开发者只要定义好可以往何处去就OK了,至于导航栏,除了颜色能更改之外,开发者没什么可以做的了。如iOS的状态栏提供深浅两种样式,小程序导航栏也相应有这两种样式,和状态栏融为一体。

  至于选色方案,微信也给出了示例,原则就是要配色和谐,不影响文字的可读性,这一点其实也是苹果特别在意的,建议文本和背景色的对比度要在4.5:1 – 7:1之间。

  此外,开发者可以在微信导航页面内再嵌一个自有导航栏,但不建议这么做,如有需要尽量使用标签分页(Tab),有顶部和底部两种样式,苹果对Tab栏的建议是3-5个,微信建议是2-4个,放太多选项不仅让页面显得复杂,且不易于用户操作。

  微信花费了大量的篇幅强调加载页面时必须要及时、有反馈,这一定是跟小程序本身的定位有关系,因此基本上能做的都帮开发者做了,比方说启动页除了能加个自有logo外,其余元素都不能改动,很多程序内动画都是微信标准定义的,这一点和iOS原生App的灵活性差别比较大。

  然而,两者在大的原则上却如出一辙,要确保界面对用户的操作做出及时的相应,哪怕是在加载过程当中。由于小程序要突出轻快的特点,微信重点渲染这一部分就不奇怪了,且详细通过示例讲解了不同情况下的处理建议。

上一篇:银川市园林植物调查与分析 下一篇:没有了
  • 版权声明:内容来自互联网不代表本站观点,2020-07-02发表于 原创稿件栏目。
  • 转载请注明: 5个关键词看小程序和App的UI设计异同| 原创稿件 +复制链接