产品设计之卡片式设计
来自:瓶子
作者简介:产品少女 广州某知名互联网公司产品经理,负责公司产品的设计及整个流程管理工作,理想的生活方式是“从产品的视角出发,做生活的设计师。”
在产品设计中我们的产品通常会有不同的表现形态,就移动端来说,在方向上分为安卓端和IOS端,那么在实际的设计中我们发现两者随同为移动端设计但是在用户体验及设计原则上却是不相同的,那么今天就带大家一起来看看在设计安卓端遵循的原则是什么?
这里我们以安卓8.0为例,在谷歌发布的最新规范将安卓设计原则定义为“卡片式设计”;
这种设计方式的优点在于为不同平台、不同设备(如手机、平板电脑、台式机和“其他平台”)提供更一致、更广泛的“外观和感觉”,强调的是底层系统体验的统一性和一致性;同时设计语言上通过技术手段采用了更加鲜艳的颜色体系,强调根据用户行为凸显核心功能,进而为用户提供操作指引。
那么看到这里大家可能会问了到底什么是卡片式设计?别急,下面马上为大家解释;
在“卡片式设计”中构成应用的表面被称为材料也叫材料片,类似于一张平坦、不透明质地的纸片,在实际的产品设计中可以理解为各类应用中用来呈现产品界面元素及内容的页面背景卡片。
这样说好像还是不太能理解,没关系,下面我们看图说明


从图中我们可以看到在同一个界面中使用了多个卡片形式来呈现页面的多个组成元素;
那么在原则上除了强调的是底层系统体验的统一性和一致性及更加鲜艳的颜色体系之外还添加了非常丰富的动态效果,这里向大家介绍一下在设计过程中动效的作用、呈现方式、动效目的及动效的注意事项;
l 动效作用:通过一些特定的动画效果生动清晰的指引用户,给到用户相关的操作暗示。
l 呈现方式:动画效果一般是以独立的场景呈现,一个场景中呈现的动画效果方式是统一的,比如用图表的方式呈现某一类书在当月的销售情况时动效可以设计为从左至右呈现或从下到上的维度实现;
l 动效目的:是为了吸引用户的注意力,以及维持整个系统的连续性体验。
【注意事项:动效设计时这里要注意动效反馈需细腻、清爽。转场动效需高效、明晰。】
今天的产品经理文章就到这里呐~,想要了解更多的产品经理相关知识,欢迎来创享学院产品经理实训基地参加我们的试听课噢~
微信公众号:cxxypm
微博账号: 创享学院-产品经理学习助手
今日头条专栏: 创享学院产品经理基地

你的回复
回复请先 登录 , 或 注册相关内容推荐
最新讨论 ( 更多 )
- 互联网产品经理分析大全 (瓶子)
- 产品设计之卡片式设计 (瓶子)
- 产品经理必修课|不懂技术,能不能做互联网产品经理? (瓶子)
- 创享学院|最全产品经理思维导图整理 (瓶子)
- 创享学院受邀参加“知音创客”开幕活动,为大学生分享创新创... (瓶子)