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

相关推荐

  • 双十一之购物车体验

    今年的双十一,你剁手了吗?不管你剁不剁,反正我是剁了。剁手的同时,不妨来看看,电商购物车的哪些设计让你剁了还想剁。本文主要讲四个电商网站的购物车,分别是淘宝、京东、唯品会和聚美优品。

    2017-06-01
  • 聊一聊不同应用场景下的验证码

    最近在做关于验证码的项目的时候,从交互的角度梳理了产品各个平台验证码的应用场景。在一个产品中,会有多个设计师分工协作,不同的设计师做设计迭代。由于验证码在整体设计中太容易被忽略,它在每个场景的显示逻辑可能不尽相同。下面,我们就来聊一聊不同应用场景下的验证码。

    2017-05-05
  • 交互设计的未来:技术的改变使交互设计的可能性愈加丰富

    Terry Cao是UXPin(一款线框图与原型制作APP)的内容策略专家。要了解如何掌握现在交互设计的艺术,可以参考免费的电子书籍《Interaction Design Best Practices》。这本书中含AirBnB、 Google、 Apple、Etsy 以及其他诸多公司的30多余交互案例。“Modality Interactivity对用户来说更有说服力。因为这使用户在浏览网站的时候更有趣,更吸引他们,并且帮助用户对网站信息产生更积极的态度。” 一位来自罗伯特·莫里斯大学的通讯系助理教授Jeeyun Oh如是说,“交互(Interactivity)通过让用户更深层次地理解网站信息而更具说服力。”欲更多地了解现代交互设计的艺术,可以阅读《Interaction Design Best Practices》一书。

    2017-06-02
  • 2018年交互设计趋势

    想必你还在对昨天HJUX视觉伙伴们给出的视觉设计趋势啧啧称赞,那么赞别停!今天团队的交互伙伴们将带来2018年交互设计趋势。选择在农历新年来临之际奉上这道历时一个月烹制的“交互趋势年夜饭”,只愿给力求打造极致用户体验的你以启发和帮助。干货阅读时间预计5分钟设计是围绕人解决问题,因此对2018年交互趋势的预测,我们将目光聚焦在细腻的情感体验打磨、达成目标的交互介质、解决问题的效率、发生交互行为的场景这几个方面,探究出了以下6大趋势:全感官...

    2018-02-02
  • 关注 Web 设计

    相较于设计教程,这样的问答对于个人来说更有针对性,离我们日常的设计工作更近一些。我个人也有这样的体会,有时会有一两个问题长期停留在脑子里,得不到解决,偶然的碰到刚好涉及到这方面的文章,会有一下子豁然开朗的感觉。所以这样的形式也是非常有价值的。以下就是第1周的所有问题和答复,希望在设计对大家有所帮助。

    2015-01-03
  • 免费 20个设计优秀的HTML网站模板

    在这个互联网时代,很多企业或是个人都搭建有自己的网站,用于宣传营销或个人网站博客等用途。而对于小企业、个人或不懂设计网站的用户来说使用网站模板将是最好的建站方式,设计达人网致力分享高品质免费素材,所…

    2015-03-17
  • 应届生在简历中如何描述自己的交互设计项目经验?

    应届生和社招的项目展示核心区别在于,应届生的项目大多数是虚拟的、小型的,或者失败的。大部分可能是校园网站项目,公众号运营,轻量化 App 等,用户数量不会太多、很少或基本不盈利。描述、呈现自己项目经历的前…

    2015-10-14
  • 曝光HR简历筛选逻辑:关键词

    yooooooooooo!这里是周一很不想上班的校花~春招还在如火如荼的进行着,也不知道大家现在有没有拿到offer呢,有的就先恭喜啦,没有的也别着急,心态放平,慢慢来嘛。今天这篇文章,HR现身说法讲述平日筛选简历的真实准则。适合有过实习经历、学习经验的同学优化简历。只需多下一点功夫,简历过筛率大大提高!文 | 撕兄很多人很疑惑,HR到底是如何查找简历,筛选简历,判断简历匹配度的。大部分情况下,只要你能懂得HR是如何查看简历,判断匹配度...

    2018-04-08
  • 学交互设计,怎样选择到适合自己的学校?

    欢迎关注弗斯特国际艺术教育出国留学选择学校,哪些会成为你的考虑因素?学校名气超大,排名都是top级?明星校友超多,都是艺术大佬?学校位置超好,正居于市中心?校园环境超美,好似旅游学习?不得不说这些会成为许多学生和家长,在选择目标院校时经常考虑的一些因素。排名、明星校友、地理位置,可以作为参考依据。BUT!这些不能是最终的决定因素,最重要的还是自己对专业的最终追求。交 互 设 计 详 解交互设计又称互动设计,英文名称为Interactio...

    2018-04-03
  • 一份全面系统的渐变色自学指南

    踏入新创科技业以来,总是听见许多设计师/工程师朋友们在抱怨设计师与工程师之间的合作有多么的…不融洽(糟糕),要码是设计师常常抱怨工程师没有 美感,不重视设计细节,或是连Guideline都不读完就来跟我讲该怎样设计( → 强烈建议iOS/Android 工程师不管未来是否会接触接口设计都花些时间把iOS的Human Interface Guideline跟Material Design Guideline给看完,这是基本啊!!基本啊!!在线已经有满坑满谷的翻译文章啰,所以别再拿看不懂英文当借口啰);另一方面就是工程师也常常会抱怨 设计师总是把写动画当作小画家,把写程序当成写国字(Framer会红的原因?!)或是总是有着过于天马行空的设计想法。

    2017-05-22