微信小程序和App的UI设计有什么异同吗?
大家总是把小程序和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(深度),后两者是微信谈的比较少的,这也是两者定位不同所致。
总体来说,苹果和微信在UI设计的理念上是相通的,就是简单、清晰和反馈及时,不过微信在具体的解释上更加细致,力图避免误解。此外,苹果三大设计原则中除了Clarity,还有Deference(遵从)和Depth(深度),后两者是微信谈的比较少的,这也是两者定位不同所致。
转载请注明:本文来自常州开发APP公司http://www.czwew.com紫竹云科技!
微信小程序和App的UI设计有什么异同吗?的更多相关文章
- 微信小程序:app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui
微信小程序 PK APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project. ...
- Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战
Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战 说明:Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战,优惠券是一种常见的促销方式,在规定的周期内购买对应商品类型和额度的商品 ...
- 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
- 微信小程序和APP优劣势大对比
小程序的优势: 1. 无需下载,随走随关 2. 功能丰富,体验更简便 3. 接口众多,可以进行不断的开发 4. 流量入口大,背靠日活9.6亿的微信 5. 有强大的微信生态环境 小程序对比APP的好处: ...
- 微信小程序开发之如何哪获取微信小程序的APP ID
微信小程序的开发工具,在新建项目的时候,默认提示填写APP ID,如果不填写AppID 也是可以本地测试和开发的,但是无法通过手机调试,只能在开发工具里查看 如果需要真机调试微信小程序,需要安装微信6 ...
- 微信小程序的Web API接口设计及常见接口实现
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...
- 微信小程序应用安全分析及设计
针对微信关于小程序安全设计的分析 针对微信小程序开发配置及部分配置机制分析微信小程序安全设计: AppSecret 管理员生成AppSecret,在与微信后台交互过程中部分接口使用,如 auth.co ...
- 微信小程序插件组件-Taro UI
微信小程序组件使用以下官网查看 ↓ ↓ ↓ https://taro-ui.jd.com/#/docs/fab
- 微信小程序注册app
App() App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. object参数说明 onLaunch Function 生命周期函数--监听小程序初 ...
随机推荐
- 三维点集拟合:平面拟合、RANSAC、ICP算法
ACM算法分类:http://www.kuqin.com/algorithm/20080229/4071.html 一: 拟合一个平面:使用SVD分解,代码里面去找吧 空间平面方程的一般表达式为: A ...
- 抢滩5G,哪些行业将受最大影响?
抢滩5G,哪些行业将受最大影响? 中国工信部6月6日已正式向中国电信.中国移动.中国联通.中国广电发放5G商用牌照.中国成为继韩国.美国.瑞士.英国之后,第五个宣布5G商用的国家. 这次颁发牌照,比计 ...
- java 文件夹不存在的解决方案
使用new File(path).mkdirs()创建所需路径,几十有多层不存在的路径也可以直接创建,切记方法名以s结尾,不带s的智能创建一层不存在的目录,不能自动创建多层目录结构.
- php strtotime 同样的函数为何在不同的地方输出的结果不同?
方法1:调用函数 date_default_timezone_set('Asia/Shanghai'); // 如果是中国的话 方法2:设置php.ini 中data.timezone [Date] ...
- --- Error: failed to execute '.\ARMCC\bin\ArmAsm'
1.KEIL4在开发STM32程序时报: Error: failed to execute '.\ARMCC\bin\ArmAsm' 或是Error: failed to execute '.\ARM ...
- 关于sql连接查询(内联、左联、右联、全联)
内连接(INNER JOIN)(典型的连接运算,使用像 = 或 <> 之类的比较运算符).包括相等连接和自然连接. 内连接使用比较运算符根据每个表共有的列的值匹配两个表中的 ...
- POJ 1284
想了很久,只想到枚举的方法,估计会超时吧. 原来有这样一条性质:p为素数,则p有phi(p-1)个原根 Orz... #include <iostream> #include <cs ...
- hdu 1754 I Hate It 线段树 点改动
// hdu 1754 I Hate It 线段树 点改动 // // 不多说,裸的点改动 // // 继续练 #include <algorithm> #include <bits ...
- NHibernate之旅(14):探索NHibernate中使用视图
本节内容 引入 1.持久化类 2.映射文件 3.測试 结语 引入 在数据库操作中,我们除了对表操作,还有视图.存储过程等操作,这一篇和下篇来学习这些内容.这篇我们来学习怎样在NHibernate中使用 ...
- POJ-3984-迷宫问题-BFS(广搜)-手写队列
题目链接:id=3984">http://poj.org/problem? id=3984 这个本来是个模板题,可是老师要去不能用STL里的queue,得自己手写解决.ORZ....看 ...