UE干货:Material Design App 实战经验分享

Material Design(以下简称MD)是Google在Android 5.0发布后主推的ue设计规范,旨在解决Android平台设计风格不统一的问题,其核心理念“材质化”是基于拟物与扁平之间的设计,强调真实世界元素的物理规律与空间关系,既避免了拟物设计的低效问题,又解决了太“扁平”带来的交互层级困惑,个人很认同这种设计理念。本次我们在进行一款孵化型产品-明星App的设计时,也采用了这种设计理念,与大家分享一下实战经验(由于是设计讨论,本次关于这款产品的来龙去脉就先不细表咯)。

UE干货:Material Design App 实战经验分享

Material Design(以下简称MD)是Google在Android 5.0发布后主推的ue设计规范,旨在解决Android平台设计风格不统一的问题,其核心理念“材质化”是基于拟物与扁平之间的设计,强调真实世界元素的物理规律与空间关系,既避免了拟物设计的低效问题,又解决了太“扁平”带来的交互层级困惑,个人很认同这种设计理念。本次我们在进行一款孵化型产品-明星App的设计时,也采用了这种设计理念,与大家分享一下实战经验(由于是设计讨论,本次关于这款产品的来龙去脉就先不细表咯)。

首先说下产品定位,这一款以明星为主题的社交App,核心用户是粉丝群,核心场景是明星to粉丝、粉丝to粉丝间的互动,辅以明星周边商品售卖,并通过游戏化设计拉动用户行为。基于这个定位,我们切割了几个主模块:明星微博,粉丝社区,商城,基础IM,及游戏化系统。

首先来看下明星微博:

UE干货:Material Design App 实战经验分享

  1. MD的核心设计元素是“卡片”,通过不同卡片层级,来体现信息重要度和交互层级。所以我们使用了卡片作为微博容器,很方便的把多类元素聚合;
  2. MD强调图片应“使用能够唤起回忆的影像来建立用户与应用程序的情感联系”。因此我们设计了头图,并非为了美化页面,而是希望以有意义的图唤起用户的情感-对明星(杰伦)的爱,带着这种情感开始App体验;
  3. 对于微博列表图片尺寸,小图(微信、微博)可以弱化图片,避免多种用户信息混合时,图片质量不一的问题。大图则对图片品质要求较高;分析需求后,我们决定使用类似Tumblr的满宽大图设计,因为明星发的图片相对品质较高,大图布局更有表现力。
  4. 对于“明星发微博”这个行为,我们非常鼓励,因此我们把他定义为核心操作,使用了fab按钮。

第二,粉丝社区模块,帖子列表页:

UE干货:Material Design App 实战经验分享

  1. 在布局上,与之前的思路一致,我们使用卡片聚合元素。卡片很适合容纳对同一内容的多种操作,包括点赞、评论、查看详情、查看发帖者等;
  2. 同样,我们保留了头图设计,以带动用户情感。例如我们在近期加入与杰伦结婚相关的图片,期望引发粉丝对青春落幕的追忆,受到这种情感渲染的用户更有意愿参与话题讨论;
  3. 当多图横排预览时,我们选择了小图,以降低图片品质不一可能造成的干扰。同时我们特别在右侧留出空白空间,方便用户学习、理解“点击卡片查看详情”的操作(操作热区不被最右侧图片遮挡);
  4. 发帖按钮,在社区首页的定位同样是“唯一主要操作”,所以我们选择了fab按钮;同时,为了降低浏览时的干扰,我们会做一个类似Evernote滑动浏览时按钮渐隐的效果。

在帖子详情页,由于此场景下主要需求为浏览,所以我们没有使用卡片,而使用干扰性较低的平铺设计:

UE干货:Material Design App 实战经验分享

  1. 我们使用了MD规范中很弱的内凹分隔线(Inset dividers)来分割楼层:弱分隔线可以尽量不打扰到用户对内容的关注,同时对于有锚点的页面,用内凹线更有利于用户通过锚点进行垂直扫描(用户可通过扫描头像定位感兴趣的用户及内容)。
  2. 将分隔线置于子标题(跟贴)之上,可以加强子标题与内容关联度
  3. 对于点赞和评论按钮,由于这里的核心需求为浏览,所以我们将这两个按钮定义为MD中“非主要、但是能快速定位到的按钮”,选择使用底部固定按钮。

第三,IM模块,为用户提供消息、会话功能,是社交系统的基础:

UE干货:Material Design App 实战经验分享

  1. 由于会话瓦片没有多项聚合操作,同时文本只有两行,所以我们选择了平铺列表设计(卡片容易造成快速scan时的视觉卡顿);同时我们沿用左对齐的头像和内凹分割线来满足快速scan需求。
  2. 聊天界面,由于可参考的设计相对成熟,所以我们没有做太多创新,照搬常用布局,满足需求即可。

商城模块及个人页,我们也按照MD规范进行了标准卡片、列表设计:

UE干货:Material Design App 实战经验分享

此外,在各种组件细节上,我们也尽量使用MD标准组件,如以上组图中出现的带阴影的title bar;单条横线,无边框的文本框;悬浮按钮、底部固定按钮;标准提示框等。

以上便是这次我们结合Material Design做的产品UE框架。当然,对于明星社交产品,我们的最终目标是提供更情感化、体现明星气质的个性设计,但MD关于空间关系、物理运动规律、响应的定义,为UE设计提供了一种稳定、统一的核心规范,是一种优雅、高效的设计。希望MD能被广泛应用。

 

(感谢ND UEDC设计师潘树彬、阮航凯、程华明)

本文由 @未羽 原创发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32374/

(0)
CatherineCatherine
上一篇 2017-06-05 04:37
下一篇 2017-06-05 08:22

相关推荐

  • 移动端的时代要如何重塑网页设计流程?

    随着时代和技术的发展,网页设计 的流程正悄无声息地发生着巨大的变化。精准具体的设计交付列表不再是网页设计 的唯一标准,静态页面设计在整个设计流程中所占的比重也逐步降低,正如同Stephen Hay所说,我们所设计的不再是单纯的页面,而是包含诸多组件的一整个系统。

    2017-06-05
  • 产品能力(一)——用户体验要素

    上周开始学习梁宁老师的产品思维三十讲,颇有收获。由于内容很多,分几期总结,与大家一同分享。首先说说我选择学习这门课程的理由,产品能力是一个人的底层能力,之所以这么定义,是因为它具有判断信息,抓住要点,整合有限的资源,把自己的价值打包成一个产品向世界交付,并且获得回报的闭环能力圈。下面我正式开篇,结合我自己的工作经验,总结课程中所学到的知识点。一、产品和好的产品人生无处无产品,工作中提交的邮件和报表,生活中给亲人提供的暖心话语和烹饪的佳肴...

    2018-02-12
  • 酱课程丨交互设计第③期 · 原来交互设计师是这样工作的,和你想的一样吗?

    交互课程第三期来啦!查看前两期点击这里——交互设计第①期 · 这个老师只用一张图,就解决了所有设计专业都会遇到的问题!交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!通过前两期课程,同学们了解了双钻图——一套完整的设计流程指导框架、定义了什么是交互设计、它所涉及到的领域以及与交互设计相关的六大Job titles。现在大家对交互设计已经有了一个大致的理解,设计流程框架也是现成的,下面就要进...

    2018-05-04
  • 深入业务和用户中做设计:58APP二手车大类页改版

    今年我们发起了一轮关于58APP各业务线大类页的改版优化,二手车便是其中一个。旧版二手车大类页已连续被用户使用一年多,然而业务属性与用户需求早已发生改变。作为交互设计师,需要在稳定提升大类页功能数据的前提下,重新对页面进行体验升级。

    2017-05-14
  • Sketch快捷键速记表(中英对照)

    Sketch 是一款好用快捷的设计软件,很多做UI设计的同学开始从 PHOTOSHOP 转向 SKETCH,使用它不仅可以做 WEB 和 APP UI,也可以用它来制作高保真原型或交互稿。如果你刚接触这款软件,那么熟记他的快捷键会大大提高你的作业效率,下面是最新的 Sketch 快捷键一览表,可以让大家快捷查询或记忆Sketch的快键。原文地址:http://www.shejidaren.com/sketch-kuai-jie-jian...

    2018-04-16
  • 在设计项目中,用好小图标的七个技巧

    图标是设计项目中几乎必不可少的一个组成部分,但是在图标的具体使用上,讲究并不少。

    2017-05-10
  • 【干货】2018年APP交互设计趋势

    全感官体验人有五感,强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态,而更真切的感知信息是用户体验升级的客观诉求,全感官体验能更好的打造“身临其境的沉浸式”体验印象。2018年我们将会看到更多以虚拟+实体组合的全感官体验方式,用户在交互过程中获取更多维的与真实场景匹配的信息反馈(听觉、嗅觉、触觉等),加深对信息的理解和体验记忆。运用案例全感官体验目前在游戏领域有了较为广泛的探索。《星舰指挥官》一改沿用十几年的鼠标,键...

    2018-02-18
  • 交互设计师的60日计划之第九天

    今天参与了用户访谈,啊不,是旁听了用户访谈,躲在小黑屋里观察用户的表情动作,听他的描述,挺有趣。 20150805 用户和我们预想的完全不同前两天有讲过准备了访谈前的一些问题和任务提供给用研同学,今天真的见到…

    交互专题 2015-08-20
  • 污力传感器——当飞机杯都有了交互体验

    污力传感器入门枕边人这是一个高科技枕头,包含一个指环和一个内置在枕头里的扬声器。当用户带上指环设备将获取用户的心跳。通过智能手机应用控制从而将信号传送到对方枕头内的扬声器中,用户靠到枕头上就仿佛实时听到爱侣的心跳!该枕头还会微微发光哦,是不是更加温馨甜蜜。污力传感器进阶Kissenger它是一款可以将远在千里之外恋人的亲吻传送到面前的装置,是不是听上去晕乎乎的?请收看以下视频:硅胶唇下嵌有高精度力传感器,用以测量吻时嘴唇不同部位的动力,...

    2018-01-30
  • 做配色达人不得不会的一种配色利器——MD

    今天,呆呆来给大家说说配色的问题,也算是用我这浅薄的经验,尽量教大家如何做好配色吧。

    2017-05-11