- 浏览: 33092 次
最新评论
关键词一:友好礼貌对应于苹果: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则是千人千面,更加多姿多彩。
原文链接:http://bbs.jointforce.com/topic/24382
发表评论
-
微信小程序之提高应用速度小技巧
2017-03-17 17:08 10211、提高页面加载速度 ... -
微信小程序支付(java后端)
2017-02-27 14:38 10316第一步 进入小程序,下单,请求下单支付,调用小程序登录AP ... -
高效编写微信小程序
2017-02-22 15:26 433微信小程序是一个工程,就和盖房子一样,打好了地基,才能保证后续 ... -
微信小程序开放部分模糊搜索,你怎么看?
2017-02-13 16:22 371今天看到一则新闻,微信小程序开始开放模糊搜索了,所以亲自测试了 ... -
微信小程序编写tabBar模板,map组件markers属性动态初始化
2017-02-07 16:04 2107一:编写tabBar模板 众所周知,微信小程序的tabBar ... -
目前为止小程序审核不通过原因整理汇总
2017-01-23 14:57 8571、小程序简介没有介绍小程序功能 2、类目与页面提供的内容不一 ... -
微信小程序之图书管理系统(wepy版)
2017-01-19 14:42 10482016年小程序的推出,刷爆了朋友圈。作为一名好奇的程序猿 ... -
微信小程序form组件
2017-01-18 15:29 1006form 组件 表单 主要属性: 效果图: form. ... -
wafer-master小程序
2017-01-13 15:00 557wafer-master小程序 1、Centos 重启ngin ... -
信小程序参数二维码的8大使用场景
2017-01-12 15:13 661一、小程序参数二维码的8大使用场景 1 地推。 使用 ... -
小程序用户反馈-HotApp小程序统计仿微信聊天用户反馈组件...
2017-01-06 14:46 521用户反馈是小程序开发 ... -
小程序是微信最后的机会吗?它能做多大?
2017-01-05 15:46 497微信小程序又刷屏了。 ... -
获得session_key和openId(加解密、签名系列)
2016-12-26 15:57 9871:session_key和openId是什么?session ... -
微信小程序正式发布官方视觉组件库,传递了怎样的信号?
2016-12-21 17:16 48512月16日,微信正式发布了WeUI.js动态视觉组件库。We ... -
微信小程序canvas组件简单运用之涂鸦
2016-12-19 14:17 491源码 index.html <view class ... -
《转》小程序之本地缓存
2016-12-16 15:07 888目前,微信给每个小程序提供了10M的本地缓存空间 有了本地缓存 ... -
深度加速:微信小程序将成为下一个风口
2016-12-09 16:58 3142016年11月3日,“小程 ... -
深度加速:微信小程序将成为下一个风口
2016-12-09 16:55 4132016年11月3日,“小程序 ...
相关推荐
APP UI设计规范
设计素材,用于微信小程序的设计,可以实现微信小程序的快速开发。
IOS APP UI设计尺寸规范
本文首先介绍了移动应用程序的发展状况和用户界面的重要性,然后对 UI 设计的技术进行了详细的讲解,包括图像处理、Logo 设计、图标设计和主页面设计等。然后,通过对大学时光 App 的设计过程的描述,展示了如何将...
uni-app简约前台H5+小程序模板,全新UI设计,更多交互细节,我们倾尽全力为您提供更加流畅舒爽的体验。 增加对支付宝小程序、APP的支持,实现一个后台,管理5个前端。 同时又实现了一套前端代码,发布多个平台,为...
App打开小程序App打开小程序App打开小程序App打开小程序App打开小程序App打开小程序App打开小程序App打开小程序App打开小程序
在 App 内实现 App UI 设计的设计工具。.zip,In-app design review tool to inspect measurements, attributes, and animations.
uni-app简约前台H5+小程序模板,全新UI设计。增加对支付宝小程序、APP的支持,实现一个后台,管理5个前端。同时又实现了一套前端代码,发布多个平台,为您的业务可以提供更加强有力的支撑!Jshop小程序商城,是一款...
医疗APP UI设计主要界面的设计稿 拼的长图
UI设计素材下载,APP设计,小程序,H5设计素材,源文件,XD格式,Sketch格式,PSD格式,交互设计,产品设计素材下载,UI稿。
本设计为小程序UI设计,主题色调为蓝色,适合电动车、电动汽车充电桩
UI设计素材下载,APP设计,小程序,H5设计素材,源文件,XD格式,Sketch格式,PSD格式,交互设计,产品设计素材下载,UI稿。
手机APP-UI设计规范,IOS和安卓尺寸换算标准,字体大小,统一页面规范等
地方文化元素在扬州城市App UI设计中的应用研究.pdf
UI设计 平面设计
快递类APP产品UI设计模式及分析
UI设计素材下载,APP设计,小程序,H5设计素材,源文件,XD格式,Sketch格式,PSD格式,交互设计,产品设计素材下载,UI稿。
Android APP Design UI库+用它作界面的APP项目源代码.zip
ColorUI是一个css库,引入样式后可以根据class来调用组件。支持原生小程序开发与UniApp开发。
在“互联网+”时代,App开发人员和App开发公司每天在苹果应用程序商店提交的App应用程序数量每天平均1000个左右。教学内容需不断更新、补充、丰富,紧跟最新趋势。 (二)扫描二维码查看例题。本课程的内容即为...