尚学堂 老师好!

上海:15201841284

广州:020-2989 6995

深圳:0755-23061965

武汉:027-8798 9193

西安:029-8822 8155

不照搬GOOGLE: 教你设计MATERIAL风页面

  但是我们也意识到,很多app的设计遵循了Google的设计规范,然而他们看起来,好吧,很像Google。聪明的品牌借用一部分Google的元素和理念,但是仍然紧紧跟随最新设计潮流趋势又保持自己的品牌优势。

  设计我们的新邮件app时,我们认为这是个深刻的问题。我们要在感知上坚持Material Design的核心原则,运用动画有意义、大胆的去创造——而不是照搬Google Now和Inbox。

  所以我们想在这里和大家分享两个我们从创建UI kit的过程中学到的:第一,在material 风格下的设计想法。第二,这套kit本身——你可以在文章结尾处下载。

  颜色

  

不照搬GOOGLE: 教你设计MATERIAL风页面

 

  Google长期以来以大胆的用色而出名,从他们无处不在的标志,到他们的户外设施。Material design使他们的调色板变的更丰富:辅助、饱和度为基础的范围,但是焦点仍放在缺少渐变的大面积的色块——很多年来主导着网页设计。

  虽然很多人谈到设计趋势时,趋向于将渐变、阴影、拟物化混合,但是material design鼓励设计师使用明显的阴影,去摹拟真实世界的感知。

  因此,区别和Google material design的不同,我们呈现给用户的是引人注目的渐变——包括app的主要图标。渐变颜色的组成的从material设计的调色板,但是我们的混合方式和Google不同。然后我们使用了有一点点透明的浮动的按钮。在信封口折痕处用了强烈的阴影。

  因为material design需要大胆、高对比度、高饱和度的颜色,这意味着我们要使用一个超级广泛调色板去填充那些设计元素。但是颜色不需要完全根据material design的标准,颜色只是要完成它们的目标——看起来是有意义的。

  对于我们的邮件app,我们最终决定使用一个相对简单的、相似的颜色调色盘。并且使用阴影和渐变来区分Google的设计规范。

  字体

  

不照搬GOOGLE: 教你设计MATERIAL风页面

 

  Google显然在品牌中获取字体的力量。Google为安卓系统特别定制了字体,最开始是droid sans和serif,现在是roboto和note——不仅是界面看起来干净统一,而且也增强了Google的品牌。而且Google走了很聪明的下一步,增强roboto字体的web属性,像play store,material design网站,安卓版本网站一样。

  我们想要一个干净、现代的字体,类似于roboto,但是不是roboto。roboto对Google字体的描述告诉我们,Google字体尽一切可能来满足大家的需求,符合这个要求的字体有grotesque、humanist和geometric。

  我们选择了另一个跨边界的字体——avenir,一个从geometric Futura演变来的字体,采用更人性化的曲线。不像roboto和苹果的默认字体helvetica(译者注:iOS9之后换成 san Fransisco了),它并不是一款grotesque的字体。

  值得一提的是,我们也摆脱了人文主义无衬线体的open sans,一个我们自己品牌的字体。我们并不想过分强调我们的品牌。

  交互和动画

  

不照搬GOOGLE: 教你设计MATERIAL风页面

 

  交互、运动和动画会给用户带来很多,例如:反馈、标记转换、让用户知道他们已经完成了一个任务、展示app的架构。这所有的一切都不用文案来展示。

  Google的动画可以鼓励你去思考如何连接和转化,UI元素是如何促进用户接受和登录,界面构成如何能使用户感到愉悦而不被分心。

  但是确保它结束在灵感。仔细考虑什么是app的最好的交互隐喻。Google的“纸张和墨水”的隐喻非常引人注目,这是不可否认的。正确的交互动画能帮助到用户理解下一步会发生什么、app如何工作、各种元素之间是如何相互关联的。

  使用交互和动画,让你的app跑的通,帮助你的app融入安卓或iOS的原生系统,能为用户创造很好的用户体验。交互和动画中时,要保持你的平台特性——这也是为什么我们将iOS平台下的切换保留轻微的material的感觉。

  自己去感受吧

  app的重新设计,对我们来说是一次非常棒的学习机会。我们希望你能下载这个kit,并且自己去感受。一共有23个页面,包括登陆注册。现在来免费下载吧!

  • 北京校区
  • 西安校区
  • 山西校区
  • 武汉校区
  • 深圳校区
  • 上海校区
  • 广州校区
  • 保定招生办
  • 黑龙江项目办

北京京南校区:北京亦庄经济开发区科创十四街6号院1号楼 赛蒂国际工业园
咨询电话:400-009-1906 / 010-56233821
面授课程: JavaEE+微服务+大数据     大数据+机器学习+平台架构     Python+数据分析+机器学习  人工智能+模式识别+强化学习   WEB前端+移动端+服务端渲染

地址:陕西省西安市高新区西安软件园西区创新信息大厦A座三层尚学堂

电话:029-88228155 / 18291433445

山西学区地址:山西省晋中市榆次区大学城大学生活广场万科商业A1座702

武汉学区地址:武汉市东湖高新区光谷金融港B22栋11楼
咨询电话:027-87989193

深圳校区地址:深圳市宝安区航城大道U8智造产业园U6栋3楼
咨询电话:0755-23061965 / 18898413781

上海尚学堂校区地址:上海市浦东新区城丰路650号
咨询电话:021-67690939

广州校区地址:广州市天河区车陂街道大岗路5号中侨广场2栋321室(四号线车陂站D出口,或brt车陂站)
咨询电话:18948349646

保定招生办公室

地址:河北省保定市竞秀区朝阳南大街777号鸿悦国际1101室

电话:15132423123

黑龙江项目办
地点:哈尔滨市松北区博文路青年部落孵化器1层
电话:15321415678
Copyright 2006-2021 北京尚学堂科技有限公司  京ICP备13018289号-19  京公网安备11010802015183  
网站维护:北京尚学堂科技有限公司昌平分公司