MATERIAL DESIGN实战!FEEDLY创始人聊聊改版实战经验.pdfVIP

——————————————————————云客网 您网站的流量加油站 MATERIALDESIGN 实战！FEEDLY创始人聊聊改版实战经验 郭楠：作为一个移动界面设计师，如果你已经细细读过MaterialDesign 的设 计指引，那么这篇文章是一篇很好的设计案例。如果你还没有读过，那这篇文章 一定是个最容易最生动的起点，以小窥大得帮助你进入MaterialDesign 的世界。 大家知道，google 最近发布了Android 的Lollipop 系统，系统的一个重大改 动是引入了一种新的视觉语言：MaterialDesign。随着新系统的发布，安卓也发 布了一个跨平台的视觉、动效、交互设计的全面指引。10月7 日，Google的Material Design 体验团队组织了一个workshop，跟第三方app 团队分享了一些设计见解 和小技巧，来指导他们在Android 平台的设计。 在我看来，Android 的这次改进，是在对的方向上又迈进了实实在在的一步。 这个新系统目前已经拥有足够的一致性和灵活性，足以兼容任何新app 的设计。 所以呢，我在回来之后也重新回到我feedly 的设计稿，尝试将feedly 的界面根据 MaterialDesign 的设计指引，做一次重新设计的尝试。 这次尝试，我的主要目的是创造一个完全根据Google 的MaterialDesign 原 则优化的全新版本。这个版本可以指引设计团队的未来设计。同时，我们还可以 选用其中的一些设计点，立即落地并发布在以后的版本中。这次尝试的第二个目 的，是为feedly 获得一些用户反馈。所以如果你有任何建议，请留下些评论。 这篇文章里，不仅有这次重新设计的结果，也讲述了过程中的设计思考。 好了，进入正题，让我们马上开始MaterialDesign 的探索。 总览 在这次重新设计中，我着重设计feedly 的几个主要界面。下图是设计前(上 排)和设计后(下排)的对比图。 SEO排名 / ——————————————————————云客网 您网站的流量加油站 MaterialDesign 的设计指引要是全面描述的话，会太繁杂。所以在这里我提 取出四个核心设计要点，这四个核心要点也是我用来重新设计的主要依据。 一、有形的界面(Tangible Interfaces) MaterialDesign 设计原则 “在Materialdesign 中，app 里的每个像素都被呈现在一张纸(asheet ofpaper) 上。这张纸有单一的背景颜色，并且根据不同的环境可以被随意缩放。一个典型 的界面排版，可能由好几张不同大小的纸张的重叠构成。” 设计原则在feedly 的运用 Feedly 原有的界面已经在运用类似的纸张隐喻，我们的主要设计元素是一叠 叠的卡片，每个卡片上都有文章列表或文章。上滑卡片，下一张卡片就会被显示 出来。这种隐喻正好和MaterialDesign 可以完美契合。 SEO排名 / ——————————————————————云客网 您网站的流量加油站 Feedly 的导航位于左侧的面板上，面板可以被滑出，盖在那叠卡片上。Feedly 的“发现”界面也是同样逻辑，只是位于右侧。 SEO排名 / ——————————————————————云客网 您网站的流量加油站 二、让设计更像印刷品 MaterialDesign 设计原则 “印刷品设计的基本元素包括字体排印、网格、间隙、尺寸、颜色和图像的 运用方式。这些元素的意义远不仅仅是好看而已，他们一起能创造层次、制造意 义及带来视觉焦点。” 设计原则在Feedly 的运用 8点网格 SEO排名 / ——————————————————————云客网 您网站的流量加油站 Google 提供了一些很好的资源，来帮助设计师在设计app 的时候，能以一 种保有一致性的方式来缩放和安排视觉元素。但是你仍然需要了解这背后的总体 网格系统。虽然这是一个8点