.Feedly.pdfVIP

Feedly创始人聊聊改版实战经验 郭楠 ：作为一个移动界面设计师 ，如果你已经细细读 Mat erial Design的设计指引 ，那么这 篇文章是一篇很好的设计案例。如果你还没有读 ，那这篇文章一定是个最容易最生动的 起点 ，以小窥大得帮助你进入Mat erial Design的世界。 大家知道 ，google最近发布了A ndro id的Lo llipo p系统 ，系统的一个重大改动是引入了一种新的视觉 语言 ：Mat erial Design。随着新系统的发布 ，安卓也发布了一个跨平台的视觉、动效、交互设计的 全面指引。10月7 日 ，Google的Mat erial Design体验团队组织了一个wo rksho p ，跟第三方app团队 分享了一些设计见解和小技巧 ，来指导他们在A ndro id平台的设计。 在我看来 ，A ndro id的这次改进 ，是在对的方向上又迈进了实实在在的一步。这个新系统目前已经拥 有足够的一致性和灵活性 ，足以兼容任何新app 的设计。所以呢 ，我在回来之后也重新回到 我f eedly的设计稿 ，尝试将f eedly的界面根据Mat erial Design的设计指引 ，做一次重新设计的尝试。 这次尝试 ，我的主要目的是创造一个完全根据Google的Mat erial Design原则优化的全新版本。这个 版本可以指引设计团队的未来设计。同时 ，我们还可以选用其中的一些设计点 ，立即落地并发布在 以后的版本中。这次尝试 的第二个目的 ，是为f eedly获得一些用户反馈。所以如果你有任何建议 ， 请留下些评论。 这篇文章里 ，不仅有这次重新设计的结果 ，也讲述了 程中的设计思考。 好了 ，进入正题 ，让我们马上开始Mat erial Design的探索。 总览 在这次重新设计中 ，我着重设计f eedly的几个主要界面。下图是设计前 （上排 ）和设计后 （下排 ） 的对比图。 Mat erial Design的设计指引要是全面描述的话 ，会太繁杂。所以在这里我提取出四个核心设计要点 ，这四个核心要点也是我用来重新设计的主要依据。 一、有形的界面 （Tangible Int erf aces ） Mat erial Design 设计原则 在Mat erial design中 ，app里的每个像素都被呈现在一张纸 （a sheet of paper ）上。这张纸有单一 的背景颜色 ，并且根据不同的环境可以被随意缩放。一个典型的界面排版 ，可能由好几张不同大小 的纸张的重叠构成。” 设计原则在f eedly的运用 Feedly原有的界面已经在运用类似的纸张隐喻 ，我们的主要设计元素是一叠叠的卡片 ，每个卡片上 都有文章列表或文章。上滑卡片 ，下一张卡片就会被显示出来。这种隐喻正好和Mat erial Design可 以完美契合。 Feedly的导航位于左侧的面板上 ，面板可以被滑出 ，盖在那叠卡片上。Feedly的 发现”界面也是同样 逻辑 ，只是位于右侧。 二、让设计更像印刷品 Mat erial Design 设计原则 印刷品设计的基本元素包括字体排印、网格、间隙、尺寸、颜色和图像的运用方式。这些元素的意 义远不仅仅是好看而已 ，他们一起能创造层次、制造意义及带来视觉焦点。” 设计原则在Feedly的运用 8点网格 Google提供了一些很好的资源 ，来帮助设计师在设计app的时候 ，能以一种保有一致性的方式来缩 放和安排视觉元素。但是你仍然需要了解这背后的 总体网格系统。虽然这是一个8点的网格 系统 ，A ndro id常常将边距设置为16点。除了在各个界面贯彻网格系统 ，我还将我们的杂志视图页 面边距设置成了 16点 （2×8 ）宽 ，将缩略图设置为96点 （12×8 ）宽。 颜色和 像 Google推荐在工具栏和状态栏使用app的主色 （主色一般是品牌的主色调 ）。但因为f eedly是一个 阅读应用 ，如果在这些区域运用我们的亮绿色 ，会对视线造成强烈的干扰 ，打扰用户对实际内容的 阅读。因此 ，我选择在这些区域运用浅灰色 ，减少对内容的打扰。 在左边栏中 ，我设计了一个运用亮绿主色的顶栏 ，顶栏用来突出显示当日的热点话题。这种方式即 强调了关键信息 ，又变现了品牌色 ，我对这种方式还比较满意。 图像也是设计中非常重要的元素。在杂志视图中 ，我用了全出血尺寸的图像来呈现需要深度阅读的 文章。在发现界面中选中某话题时 ，也运用了全出血的图片作为界面头部。 三、有意义的转场 Mat erial De