很多人都在谈技术问题，那笔者今天就谈点不一样的：审美问题。笔者一直觉得，审美问题在互联网产品开发过程中占据非常重要的地位，甚至可以说，一款互联网产品能否吸引用户的关键就是审美设计。
本文主要分享来自Google的Material Design——一套官方的设计规范。在这里贴一下中文版链接先：概述 - Material Design 中文版
目标
我们希冀创造一种新的视觉设计语言，能够遵循优秀设计的经典定则，同时还伴有创新理念和新的科技。
Paste_Image.png
我们希望创造一种独一无二的底层系统，在这个系统的基础之上，构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则，同时支持触摸、语音、鼠标、键盘等输入方式。
Paste_Image.png
设计原则
Material is the metaphor 材料就是隐喻
谷歌认为现实世界中的材质触感是可以通过纸片的隐喻来表达，通过在设计上运用符合运动规律的动画交互、通过光影打造设计层次的关系可以创造全新的虚拟交互空间，并且这个空间是符合现实规律的。这也就是文档中提到的对于纸墨的研究。
Bold， graphic， intentional 鲜明，形象，深思熟虑
在视觉上，谷歌不仅要求生动形象，更要求设计时要确认设计的目的，摒弃仅仅为了美观而设计，强调视觉设计要为用户使用提供指引，凸现页面当下的核心功能。文档中谷歌提到这部分借鉴传统的印刷设计。
Motion provides meaning 有意义的动画效果
交互动画的目的就是吸引用户的注意，表达当下页面发生的变化，同时和对视觉要求一样，一定要有意义。
下图是各个章节的重点摘要：##
2014101401.png
以下是详情（部分）：
一、动画
1.动画要真实
b-2.gif
自然界物体运动是有加速减速过程的（红球），而不是匀速运动（篮球）。
2.反馈
b-3.gif
b-5.gif
所有可点击部分都应该有这样的反馈。
3.转场动画
b-6.gif
转场动画要体现界面的层级关系。
b-7.gif
从父界面进入子界面，需要抬升子元素的海拔高度，并展开至整个屏幕，反之亦然。
二、颜色
Paste_Image.png
Paste_Image.png
颜色不宜过多。选取一种主色、一种辅助色（非必需），在此基础上进行明度、饱和度变化，构成配色方案。
小面积需要高亮显示的地方使用辅助色。
三、图标
Paste_Image.png
常规形状可以遵循几套固定栅格设计。
四、图片
Paste_Image.png
图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。
Paste_Image.png
对于带有文字的大幅图片，遮罩文字区域，不要遮住整张图片。
Paste_Image.png
Android L可以从图片中提取主色，运用在其他UI元素上。
五、布局
所有可操作元素最小点击区域尺寸：48dp X 48dp。
栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：
顶部状态栏高度：24dp
Appbar最小高度：56dp
底部导航栏高度：48dp
悬浮按钮尺寸：56x56dp/40x40dp
用户头像尺寸：64x64dp/40x40dp
小图标点击区域：48x48dp
侧边抽屉到屏幕右边的距离：56dp
卡片间距：8dp
分隔线上下留白：8dp
大多元素的留白距离：16dp
屏幕左右对齐基线：16dp
文字左侧对齐基线：72dp
Paste_Image.png
六、组件
- 按钮
按钮分为悬浮按钮、凸起按钮和扁平按钮3种。重要性如下递减：
Paste_Image.png
2.对话框
Paste_Image.png
对话框避免出现滚动条，确认按钮放在右侧，取消按钮放在左侧。
3.菜单
菜单最好不要超过2级。
Paste_Image.png
菜单不可用项要显示出来。
4.进度条
b-12.gif
线形进度条只出现在纸片的边缘。
b-13.gif
环形进度条也分时间已知和时间未知两种。
b-14.gif
环形进度条可以用在悬浮按钮上。
5.输入框
Paste_Image.png
简单一根横线就能代表输入框，可以带图标。
a-104.png
输入框点击区域高度至少48dp，但横线并不在点击区域的底部，还有8dp距离。
6.侧边抽屉
Paste_Image.png
侧边抽屉从左侧滑出，占据整个屏幕高度，遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。
网友评论