Redesign之移动界面风格设定（20150803-20150807）

redesign工作还在继续，原型图也画的差不多，马上要进行的工作就是UI设计了，找设计参考的事情我是感觉属于未雨绸缪，工作从来是喜欢有计划有弹性的进行。移动界面风格的设定一定是要紧跟潮流，2015年度移动界面的趋势是什么？发展方向？在知乎里搜了一下类似的总结，同时也在设计网站上看了其他设计师分享的作品，根据自己对潮流趋势和redesign工作的理解，分享一下自己的观点

关键字：Material Design、扁平、沉浸、纵深、卡片式、统一

---

Material Design

2014年6月谷歌I/O大会发布的设计语言，当时对于自己的感觉就是谷歌各个平台设计操作趋向统一、交互小动态的融合在扁平化当道的设计上融入了一些趣味性（或许是对当时扁平化出入的一个回答？）卡片式的流程操作，让我在当年年底就购买了MOTO G更新到了5.0版本体验，事实感觉也是很不错的，耳目一新的操作方式，交互动效也是对于现实物理动作的延伸，不会感觉到有所突兀并也享受其中。

Material Design动画

扁平明亮

扁平化从iOS7发布以来就开始普及，之前的拟物化我感觉就是现在material design的前身，这么说的理由就要从拟物化设计的初衷开始而谈。当年乔布斯在iPhone上开始拟物化设计的初衷，应该就是让用户在使用智能手机的时候，不会在这个新的平台感觉到陌生反而能找到生活中的一些熟悉的物品也就是日常生活的相关隐喻，典型的例子有passbook、日历、时钟等等等很多，完全把现实的物品拿到了屏幕中，高光、阴影、材质这些都是为了完美的伪装现实中的物品，也做到了，不是吗？我们接受了智能手机，因为上手快，学习陈本低。但这种完美的虚假毕竟也是假的，在我们适应了智能手机后，还能对这样过分的光影能容忍多久呢？我想也是这时候扁平化应运而生。

拟物化设计

扁平化设计

至于为什么说明亮，我出发点只是基于Material Design，风格的定义问题还是要依据自己产品的气质。不过明亮简洁的设计会给到用户操作简单的心理暗示，视觉负担也会减少。

明亮的扁平化设计

活泼的色彩点缀是不是让你感觉更轻松呢？白色的主色调配以黑灰色的文字信息，漂亮的清晰大图，明度亮度都很高的色彩点缀是对以上静态页面的视觉语言的小小总结。

沉浸

沉浸就是让人专注在当前的目标（由设计者营造）情境下感到的愉悦和满足，而忘记真实世界的情境

沉浸式设计意在减少用户所关注内容外的干扰，让用户可以集中注意力去执行其预期的行为，并且可能会利用用户高度集中的注意力来引导其产生某些情感与体验。

在《iOS7人机交互准则》中沉浸式体验是指游戏产品，类似于雅虎天气这样全屏精选高清背景图、UI轻量极简的设计我也把它归类为沉浸式设计，让用户专注于天气本身，而不至于被其它视觉设计元素所打扰。

雅虎天气

纵深（分层界面）

新学到的词，原作者在他的观点中具体的阐述了这一项（原文地址：Mobile:2015 UI / UX Trends）在虎嗅上有中文翻译，这个概念作者称作分层界面。利用Z轴的分层帮助用户理解不同条目之间的主次关系，将注意力集中到用户需要关注的地方。

感觉也是今天的扁平化向昨天的拟物化的致敬，由强写实的3D纵深到扁平化的分层界面，都是为了给用户提供一种更直观的体验，而落实到扁平化设计中表现出来的就是分层界面。

Mobile:2015 UI / UX Trends

Hotel Tonight

卡片式

卡片式设计是从Material Design中最具代表性的设计风格之一。Google将其称为"Inside Out Design (由内而外式)"。 而卡片式设计的本质, 是更好的处理信息集合

谷歌卡片式设计1

谷歌卡片式设计2

卡片式设计有一个很明显的优势，单独出现的时候灵活，大批量出现的时候又能连续统一，也被称作谷歌设计的“狗皮膏药”，哪里需要贴哪里，卡片的适用性也广泛应用各个屏幕平台，在不同屏幕上同时也保证着用户体验的的一致。卡片式设计的框架有效的约束了页面的信息布局，卡片的周边留白微弱投影更加凸显当前信息。

交互

交互在使用场景中的应用为扁平化设计增添了不少操作的乐趣和参与感，也能够区分出来不同的操作目的并加以记忆。例如删除一个app的时候晃动的框体；网上购物时被添加的商品会随着轨迹掉落到购车的图标中；下拉手势的刷新中意外出现的品牌的动态形象，并会随着拉动的程度不同表现等等这些有趣的动态交互为界面加分不少。

dribbble

---

最后PO一张正在做的Redesign移动界面效果图，过程稿。下周继续咯！