北京APP开发专家
北京网站开发专家
北京网站建设

浅析当前主流APP设计规范

2020-03-25 09:57  北京一步两步科技有限公司 (转载需注明出处)

俗话说没有规矩不成方圆,在互联网产品从0到1的整个流程中,一份高度成熟且经过市场用户验证的设计规范尤其具有使用及指导借鉴意义,今天主要简单聊一聊当前APP主流的设计规范。

主流设计规范

| 苹果iOS人机规范指南


规范介绍


详情请查看苹果iOS人机规范指南网站https://developer.apple.com/design/

iOS 与其他平台不同,主要是下面三大原则:

  • 清晰:整个系统中,任何字号的文字都必须清晰易读,图标表达含义准确易懂,修饰恰到好处,以功能驱动设计。留白、颜色、字体、图形和其他界面元素能够巧妙地突出重点内容并传达交互性。

  • 顺应:流畅的动效和清晰美观的界面有助于用户理解内容并与之交互,且不会干扰用户。当内容占据整屏时,半透明和模糊处理通常会暗示其他更多的内容。减少使用边框、渐变和阴影,使界面尽可能轻量化,从而突显内容。

  • 纵深:清晰的视觉层和生动的动效赋予界面层次感,使其富有活力并 有助于理解。使可触发界面元素更容易被找到能提升体验的愉悦感,让用户在触发相应功能或者获取更多内容时不至于茫然无措。当用户浏览内容时,流畅的过渡能够提供纵深感

IOS基础组件

规范应用


苹果iOS设计规范应用于几乎全部IOS平台的APP,这使得iOS用户可以几乎在不同软件上有一致性的交互UI体验,这也是苹果给用户体验的重要原因之一;指的一提的是,微信安卓版本并没有使用谷歌的Material Design设计规范,而是采用与iOS相同的UI,这也证明了iOS规范的易用性和强大的用户普及度


| 谷歌Material Design


规范介绍


详情请查看Material Design 设计指南中文网站:https://www.mdui.org/design/

谷歌视觉设计语言综合了优秀设计的经典原则和科学技术的创新。设计目标:创造、统一(跨平台设备统一的用户体验)、定制化(为创新和品牌表达,提供一种灵活拓展的基础)。设计原则:它的灵感源自真实的物理世界,包括物体纹理、反射光、投影,使得纸张和它的墨水反应效果重新成像。1)粗体、图形化、有意的:通过排版,网格,空间,规模,颜色和图像来创建层次,让用户沉浸其中。2)让运动有意义:运动通过微反馈和合理的过渡,保持焦点和连续性,当元素出现在屏幕上,他们转化并重新组织周围的环境。3)灵活的基础:平台设计体系意在实现品牌表达,集合了定制的代码库,用来无缝实现组件、插件和设计元素4)跨平台:在Android,iOS,Flutter和web上共享组件

平台周边:

1)平台体系:拓展和增强后的设计体系让工具和组件相统一,从而改进设计和开发的工作流程2)平台基础:在学习平台设计原理时,设计和构思如何使用平台设计架构去做你的app3)平台指南:定制和部署一个与众不同的系统主题

Material Design模板

规范应用


2011年后,拉里佩奇掌握了 Google 后召集了谷歌最好的设计师一起重新设计了所有产品的语言,在2014年的 Google I/O 上推出了 Material Design,宣告 Google 重视设计的时代来了。Google旗下的电脑、穿戴设备、电视等设备使用了 Material Design 作为视觉规范,甚至 Google 鼓励开发者在 iOS平台也使用 Material Design。由于国内用户接触到谷歌系的应用比较少,所以在国内的用户认知度还不高,故而国内许多的商业产品极少会采用,但这并不影响Material Design确实是一种极佳的设计语言,并且可以以其理念融合进各家新创建的规范当中去。


| 微软Fluent Design


规范介绍


详情请查看微软Fluent Design官方网站:https://www.microsoft.com/design/fluent/#/

在微软全球开发者大会Build 2017上,微软发布了新的视觉语言,称为“Fluent Design”

Fluent Design System设计语言共有五大元素,分别为光照(Light)、深度(Depth)、运动(Motion)、材质(Material)和缩放(Scale)

该设计语言的核心就是在美观的前提下,应用程序的使用更加自然和流畅。Fluent更像是“Metro的演进”,一种“现代设计语言”,最终成为微软的标志性设计语言

fluent.png


规范应用


作为比较年轻的设计语言,微软的Fluent Design目前已经应用于Office 365全系列的移动App中,同时win10系统许多内置应用也开始使用Fluent UI,从笔者体验上来说,其设计理念很不错,能够适应手机端的文档操作逻辑,但同时也有很多不足之处,期待Fluent能够真正成长为视觉语言,就像微软官网所写的那样


| 微信小程序设计规范


规范介绍


详情请查看微信小程序设计指南官方网站:https://developers.weixin.qq.com/miniprogram/design/

基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢。

微信小程序设计原则分为四部分,分别为:友好礼貌、清晰明确、便捷优雅和统一稳定

WeUI基础组件


规范应用


微信小程序其实严格意义上不算App,但是作为目前中国用户量最大的前端类App,其设计的轻量化、前端化的设计理念还是让人有耳目一新的感觉,并且其设计参考了微信本身的交互逻辑,可以大大降低用户的学习使用成本,毕竟,用户才是第一位的。


| 总结


当然国内外还有许许多多优秀的设计规范,以上只是简单介绍了目前几款,其实无论是大厂这些设计规范,还是根据不同项目去设计新的设计规范,我们看到设计规范是不断变化演变成长的,其根本目的还是在于快速的降低用户学习成本,提高产品的一致性、美观性,所以其实不用拘泥于规范本身,更多的是规范的设计理念本身,才是更值得我们去思考学习的部分。


联系我们

北京总部

app外包开发 北京市海淀区清河永泰园甲1号建金中心425-426
       邮编:100192
北京网站建设 Email : info@1bu2bu.com

内蒙子公司

app外包开发 呼和浩特市赛罕区绿地领海大厦A1123
       邮编:010000
网站建设专家 Email : info@1bu2bu.com

版权所有:北京一步两步科技有限公司2007-2020 | 京ICP备10037622 | 京公网安备11010802016787号 |

一步两步,值得信赖的移动互联网专家
18500096336
需求提交
APP开发专业服务商
1837137468
网站建设专业服务商
1837137468
一步两步科技有限公司