很多人都在谈技术问题,那笔者今天就谈点不一样的:审美问题。笔者一直觉得,审美问题在互联网产品开发过程中占据非常重要的地位,甚至可以说,一款互联网产品能否吸引用户的关键就是审美设计。
本文主要分享来自Google的Material Design——一套官方的设计规范。在这里贴一下中文版链接先:概述 - Material Design 中文版
目标
我们希冀创造一种新的视觉设计语言,能够遵循优秀设计的经典定则,同时还伴有创新理念和新的科技。

我们希望创造一种独一无二的底层系统,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。

设计原则
Material is the metaphor 材料就是隐喻
谷歌认为现实世界中的材质触感是可以通过纸片的隐喻来表达,通过在设计上运用符合运动规律的动画交互、通过光影打造设计层次的关系可以创造全新的虚拟交互空间,并且这个空间是符合现实规律的。这也就是文档中提到的对于纸墨的研究。
Bold, graphic, intentional 鲜明,形象,深思熟虑
在视觉上,谷歌不仅要求生动形象,更要求设计时要确认设计的目的,摒弃仅仅为了美观而设计,强调视觉设计要为用户使用提供指引,凸现页面当下的核心功能。文档中谷歌提到这部分借鉴传统的印刷设计。
Motion provides meaning 有意义的动画效果
交互动画的目的就是吸引用户的注意,表达当下页面发生的变化,同时和对视觉要求一样,一定要有意义。
下图是各个章节的重点摘要:##

以下是详情(部分):
一、动画
1.动画要真实

自然界物体运动是有加速减速过程的(红球),而不是匀速运动(篮球)。
2.反馈


所有可点击部分都应该有这样的反馈。
3.转场动画

转场动画要体现界面的层级关系。

从父界面进入子界面,需要抬升子元素的海拔高度,并展开至整个屏幕,反之亦然。
二、颜色


颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。
小面积需要高亮显示的地方使用辅助色。
三、图标

常规形状可以遵循几套固定栅格设计。
四、图片

图片上的文字,需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间,浅色的遮罩透明度在40%-60%之间。

对于带有文字的大幅图片,遮罩文字区域,不要遮住整张图片。

Android L可以从图片中提取主色,运用在其他UI元素上。
五、布局
所有可操作元素最小点击区域尺寸:48dp X 48dp。
栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离:
顶部状态栏高度:24dp
Appbar最小高度:56dp
底部导航栏高度:48dp
悬浮按钮尺寸:56x56dp/40x40dp
用户头像尺寸:64x64dp/40x40dp
小图标点击区域:48x48dp
侧边抽屉到屏幕右边的距离:56dp
卡片间距:8dp
分隔线上下留白:8dp
大多元素的留白距离:16dp
屏幕左右对齐基线:16dp
文字左侧对齐基线:72dp

六、组件
- 按钮
按钮分为悬浮按钮、凸起按钮和扁平按钮3种。重要性如下递减:

2.对话框

对话框避免出现滚动条,确认按钮放在右侧,取消按钮放在左侧。
3.菜单
菜单最好不要超过2级。

菜单不可用项要显示出来。
4.进度条

线形进度条只出现在纸片的边缘。

环形进度条也分时间已知和时间未知两种。

环形进度条可以用在悬浮按钮上。
5.输入框

简单一根横线就能代表输入框,可以带图标。

输入框点击区域高度至少48dp,但横线并不在点击区域的底部,还有8dp距离。
6.侧边抽屉

侧边抽屉从左侧滑出,占据整个屏幕高度,遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。
网友评论