Material Design学习笔记

 

写在前面

去年Google发布了最新的Material Design 设计规范, 势必将会成为统一 Android Mobile、Android Table、Desktop Chrome 等全平台设计语言规范。随后国内一群热心的小伙伴们组队将其翻译成中文版,9月《Material Design中文版》火热出炉。

这份设计规范文档相当详尽,涵盖了动画、配色、图标、文字、图片、布局等各个方面,一下子全部消化难度可想而知。

热心善良的可乐橙帮同学们通读了一遍官方的设计指南,去糙取精,整理出这篇干货超多的学习笔记,可谓Android设计中的“葵花宝典”。

 

a-1

 

自从material design发布以来,可乐橙就在一直收集相关素材与资源,研究别人的作品。这套设计风格非常鲜明,带有浓郁的Google式严谨和理性哲学,深得我心。实际上,光是研究素材和别人作品,就能发现一些明显的规律,做出几分相似的设计。这样半吊子的状态一直保持到现在,最近有时间通读一遍官方的设计指南,终于有了深入的理解。在朋友的项目中实践了一番,虽然很抱歉拿朋友开刀,不过他对整体效果似乎还算满意。

material design的设计规范细致入微,需要消化好一阵子。越读越感受到它的妙处,假如每个细节都严格遵照material design的思想来设计,哪怕你不是设计人员,你的产品也一定不会难用和难看。当然,作为设计师,要求就更高了。设计文档本身,就提供了一种很好的方式,帮你从各个角度思考和构建自己产品的规范。但在这之前,先要好好整理一下学习笔记。要打破规矩,必先掌握规矩。

由于只是笔记,我会写得尽量简单。并且省略掉一些可乐橙认为设计师都已经掌握的信息。想要深入了解material design,还是建议有空通读一遍官方文档。不过,牢记以下要点,基本能做到90%了。实际上,Google官方的应用也有不遵照规范的地方,不能太拘泥于条条框框。

继续阅读Material Design学习笔记

中文图文混排教程推荐

转自知乎:M udo 在“在图片上加字,如何确定该用什么字体、字体的颜色和放置的位置?”的回答。

知乎日报也有本文

Gavin点评:难得的一篇如此细致的回答,五星级推荐,从整体画面的控制到具体文字的处理,十分详尽。看完之后,不会排版的同学也应该有所体会了。

————————————————————————正文—————————————————————————

图片色彩失真似乎有些严重…

题主的问题同样困扰着我好久,过去我做排版都习惯用那些现成的设计素材,到后来我尝试直接选一张没有经过任何修改的照片用于排版时,我才知道“图片上配上文字”其实是一个很复杂的问题,因此我有一段时间将这个问题好好地研究一番。我去翻看各类设计网站大咖们的优秀作品、找时尚杂志和精品画册,但是我的目的不是想从中找到感觉,而是希望通过一个科学、严谨的方法来找到优秀作品之间的视觉规律,我写这个答案就是将这个过程分享给大家。不过本人还只不过是设计专业的学生,学艺未精,而且文笔还不好… …因此解释这样一个复杂的问题的解答过程,肯定会有很多不足的地方,大家就作一个交流吧。

 

为本答案做一个导航图,证明这真的是一个很复杂的问题…

352d0e11b05ac2ccf7ae08093102293c_b

继续阅读中文图文混排教程推荐

图片压缩不求人#神器推荐#

作为一名设计师,经常和前端打交道。切完图之后,考虑到加载速度等问题,特别是slider,banner这类,一般都会压缩一下。本着提高工作效率,减轻工作负担的精神和宗旨,经过多年摸索之后,有以下几款神器可以适用于不同场景和类型。

 

一  JEPGmini

它不仅可以让你尽可能的压缩图片还能保持图片的质量,通过 JPEGmini的压缩方式,最多可以把照片档案缩小到80%(8百万像素以上的照片)。这是一个颇为惊人的数字,因为常用的.jpg档案就已经是压缩过后的档案。更吸引人去使用的是,照片品质几乎看不出有什麽破坏,档案的解析度也不会变小,光用肉眼并分不出来有什麽不同。

屏幕快照 2015-05-16 18.51.17

官网地址:JPEGmini  同时支持Mac与windows平台。

继续阅读图片压缩不求人#神器推荐#