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

相关推荐

  • 异常逻辑梳理与数据处理

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Dschinghis KhanDschinghis Khan - Siegerehrung作者:Glen公众号:更冷吃到老玩到老的故事冰山:异常逻辑梳理也许你用了九牛二虎之力,终于把产品的主流程梳理清楚了,但是你看到的只是产品冰山海面上的那10%,剩下的90%是海面下各种情况的异常逻辑。➀ 10%的冰山和90%的冰山任何一个产品功能逻辑,都分为主逻辑和异常逻辑。产品经理们当然要花...

    2018-04-08
  • 解压设计?一位交互设计学生对智能化的反思

    Skylar Jessen 是纽约大学的一名学生,主修交互设计。他觉得,如今的交互设计普遍缺乏人性化的东西。它们“压缩”了人们的自我表达方式。最近,在学校的交互设计项目上,他提交了一些特别的设计,并称之为“解压设计”…

    2017-08-01
  • 页面停留时间和网站停留时间详解

    摘要:一、页面停留时间与网站停留时间是如何计算出来的? 假设用户访问了网站的主页(Home)。分析工具将这个访问者标记为一个Visit,接着这个访问者又浏览了另外两个页面(Page2和Page3),然后他离开了你的网站…

    2014-12-16
  • 帮你梳理微交互的五个基本要素

    微交互应该火热了相当一段时间了。它成为话题中心很大程度是因为微交互所带来的令人动容的体验。如果说要界定微交互,那么它应该是围绕着用户完成单个任务前后而存在的微妙的交互和效果。小贴士:奖励机制是驱动用户的核心,奖励越强,产生的习惯效果也就越明显。小贴士:动效应当具有足够持久的生命力,所以设计的时候,应当思考它是否会在看过100次之后让人觉得厌烦?它是否清晰可见,或者完全无法引人注意?小贴士:用充满情感和人的姿态来同用户交流,这是让你的UI和交互变得更加温暖的最快的方式。小贴士:应当在你的设计中保持KISS原则(KISS 原则是用户体验的高层境界,简单地理解这句话,就是要把一个产品做得连白痴都会用,因而也被称为“懒人原则”),不要让那个你的微交互成为一个宏交互。

    2017-05-14
  • 做交互方案时,请注意检查这4个点

    作为一名交互设计师,到底什么程度才能算得上是“专业”?成为一名专业的设计师是否有方法与捷径呢?答案是肯定的,但是今天我分享的内容还不敢称之为体系,只能说是几个小小的经验吧,希望能给正在奔向专业路上的你有所启发。

    2017-05-11
  • 设计效果检验之道

    作者:Hahn   设计效果检验,即针对设计师的设计方案进行数据验证,通过客观的数据来量化一部分设计方案中较为主观或存在争议的地方,以此判断设计方案的优劣,从而得出检验结论。 众所周知,每个人对设计的评判是…

    交互专题 2017-08-07
  • 6种实验性的网页导航模式,激发你独特的设计灵感

    不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式。

    2017-05-04
  • 用体验设计方法论,结合商业诉求对APP进行改版设计

    这个产品是做什么的?
    这个平台安全吗?
    购买哪个比较好?
    怎么购买理财,外汇,股票类的产品?
    收益如何?
    ……有什么新活动?
    是否能继续提升自己利益?
    以前买过的产品有什么新变化?
    ……

    2017-05-19
  • 怎样才算是好的用户体验?

    说今天是一个体验为王的时代,一点也不过分。做大众消费品的人可能已经感觉到,今天消费者的话语权越来越强,如果你的产品做得好,不久就会口口相传;如果你的产品做得烂,不久就会骂声一片。所有这一切在过去是不…

    2014-10-28
  • 交互设计的未来

    数十万互联网从业者的共同关注!译者:小媛作者:Terry Cao ,发表于DESIGN & DEV译文地址:http://www.jianshu.com/p/daaa353e6d95译者授权早读课发表,转载请联系译者。欢迎投稿到早读课,投稿邮箱:mm@zaodu…

    2017-08-04