Material design学习笔记

用户头像
保山/学生/9年前/641浏览
Material design学习笔记
用户头像
LQing21

Material design的设计规范细致入微,需要消化好一阵子,越读越感受到它的妙处。由于只是笔记我会写得尽量简单,并且省略掉信息。想要深入了解MD,可以看看官方文档。感谢 @海边来的设计师

5cad5867e081a8012060c869f9a4.jpg

433a5867e1f7a801219c77c42310.jpg

e50c5867e260a801219c779934a8.jpg

0a4f5867e299a8012060c8f73fa5.jpg


757e5867e2cba801219c77f41c6b.jpg

25fa5867e319a801219c778e659c.jpg

33b25867e6d2a8012060c869cff5.jpg

cd015867ea5fa801219c77778af2.jpg

81f95867e7a1a8012060c86864d8.jpg





b6365867e94da801219c77518c05.jpg

03b05867e9f9a8012060c8398c04.jpg              颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案a25d5867ee60a8012060c8601288.jpg

           常用字号:

           1.12sp 小字提示;

           2.14sp(桌面端13sp) 正文/按钮文字;

           3.16sp(桌面端15sp) 小标题;

           4.20sp Appbar文字;

           5.24sp 大标题;

           6.34sp/45sp/56sp/112sp 超大号文字;

          长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。

c7f75867fc5aa8012060c8de29c5.jpg

                         

           所有可操作元素最小点击区域尺寸:48dp X 48dp。

           栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。

           以下是一些常见的尺寸与距离:

           1.顶部状态栏高度:24dp;

           2.Appbar最小高度:56dp;

           3.底部导航栏高度:48dp;

           4.悬浮按钮尺寸:56x56dp/40x40dp;

           5.用户头像尺寸:64x64dp/40x40dp;

           6.小图标点击区域:48x48dp;

           7.侧边抽屉到屏幕右边的距离:56dp;

           8.卡片间距:8dp;

           9.分隔线上下留白:8dp;

           11.大多元素的留白距离:16dp;

           12.屏幕左右对齐基线:16dp;

           13.文字左侧对齐基线:72dp;


9f5a5867fd47a801219c773085a3.jpg


be6b5868040ea801219c7795dadc.jpg

9054586809a1a8012060c8da3e4d.jpg

官方文档(需要科学上网)中还详细介绍了界面中的控件规范、尺寸和更多的细节有兴趣的朋友可以前往阅读  https://material.io/guidelines/ 

中文的相关资料也有很多大家可以上网搜索一下。




13
阅读原文
|
举报
|
27
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
古风平面仕女与瓷器
牛奶乳液层次梯田平铺平面
城市园林平面布局航拍
平面设计 吊牌设计
平面书法字手写
空的平台平面和自然景观
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
海底世界插画
城市园林平面布局航拍
中国传统纹样创新图案设计
金色颗粒质地的平面
倒计时,海报,平面
城阙凡花
平面插画设计女孩喝咖啡
城市园林平面布局航拍
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
平面插画情侣/矢量
金色颗粒质地的平面
平面风格黄绿色系花朵装饰
玄关入门地毯印花图案红地毯
“知识宅急送”外卖,快递,平面,海报,素材,教育
金色颗粒质地的平面
牛奶乳液层次平面平铺平面
金色颗粒质地的平面
空的平台平面和自然景观
你可能喜欢
大家都在看
登录注册