认识达内从这里开始

我们都知道，想要提高用户的网页停留时间以及提高用户体验度，我们除了需要向用户展示他需要的内容以外，合适的网页设计与颜色排版的搭配也是非常重要的条件之一。

今天，我们就一起来学习一下，在进行网页排版设计的时候，我们都可以采用哪些方法和技巧来快速实现我们的工作目的，下面就开始今天的主要内容吧。

一、有形的界面(TangibleInterfaces)

“在materialdesign中，app里的每个像素都被呈现在一张纸(asheetofpaper)上。这张纸有单一的背景颜色，并且根据不同的环境可以被随意缩放。一个典型的界面排版，可能由好几张不同大小的纸张的重叠构成。”

Feedly原有的界面已经在运用类似的纸张隐喻，我们的主要设计元素是一叠叠的卡片，每个卡片上都有文章列表或文章。上滑卡片，下一张卡片就会被显示出来。这种隐喻正好和MaterialDesign可以完美契合。

Feedly的导航位于左侧的面板上，面板可以被滑出，盖在那叠卡片上。Feedly的“发现”界面也是同样逻辑，只是位于右侧。

二、让设计更像印刷品

“印刷品设计的基本元素包括字体排印、网格、间隙、尺寸、颜色和图像的运用方式。这些元素的意义远不仅仅是好看而已，他们一起能创造层次、制造意义及带来视觉焦点。”

8点网格

Google提供了一些很好的资源，来帮助设计师在设计app的时候，能以一种保有一致性的方式来缩放和安排视觉元素。但是你仍然需要了解这背后的总体网格系统。虽然这是一个8点的网格系统，Android常常将边距设置为16点。除了在各个界面贯彻网格系统，我还将我们的杂志视图页面边距设置成了16点(2×8)宽，将缩略图设置为96点(12×8)宽。

颜色和图像

Google推荐在工具栏和状态栏使用app的主色(主色一般是品牌的主色调)。但因为feedly是一个阅读应用，如果在这些区域运用我们的亮绿色，会对视线造成强烈的干扰，打扰用户对实际内容的阅读。因此，我选择在这些区域运用浅灰色，减少对内容的打扰。

在左边栏中，我设计了一个运用亮绿主色的顶栏，顶栏用来突出显示当日的热点话题。这种方式即强调了关键信息，又变现了品牌色，我对这种方式还比较满意。

图像也是设计中非常重要的元素。在杂志视图中，我用了全出血尺寸的图像来呈现需要深度阅读的文章。在发现界面中选中某话题时，也运用了全出血的图片作为界面头部。

三、有意义的转场

“有时候，用户会搞不清楚需要关注界面的哪部分，或在一个元素从A位置变换到B位置的时候感到迷惑。通过经过精心编排的动效设计，可以在app使用过程中有效地引导用户的注意力和视觉焦点，避免当布局变化或元素重新排布时引起的迷惑，同时提升整体的体验美感。动效设计应该满足功能性的目标，不仅仅是炫技。”

打开文章和关闭文章，是feedly中最重要的转场。在这个过程中，用户在文章的列表和整篇文章内容中切换。制作这个转场动效时，我参考了MaterialDesign设计原则中推荐的3个主要设计指引。

表面的反馈

当用户点击文章预览时，我运用了点击波纹效果来提供即时反馈。波纹效果会扩大充满整个文章预览元素。同样，当用户关闭文章时，点击波纹效果也会在顶栏中出现。

视觉连续

在杂志视图中的预览图片，会在界面转换到文章视图的过程中放大，并移动到相应的位置。通过这样的转场，用户能完美感知到他所点击的元素和最终界面元素之间的关系。但这其中有一个挑战：有时在预览视图中的图片并不出现在文章的首屏，而是好几屏之后才会看到。这时，我们不得不在转场时将文章内容渐显，而将缩略图渐隐来过渡。

有形的表面

这很可能是MaterialDesign中最重要的要素。根据设计指引，我们需要将内容处理为像打印在有形表面上一般。当用户点击了列表中的文章预览区域时，这个模块会向上升起，创造出属于这篇文章的一个新的平面。同时考虑到视觉的连续，这个新平面会放大，使其成为界面中最主要的一个面。在这个过程中，文章的内容也渐显出现。

四、自适应设计

“MaterialDesign的最后一个核心理念，是创造出一个自适应的设计，他能适用在从小手表到大电视的任何尺寸的平台上。一个自适应的设计，实际上是在同一个底层结构的体系中，演变出适应于不同尺寸界面的设计。在每一种设计中，尺寸和交互方式用最适合这个尺寸界面的方式展现;但在颜色、图标语言、层级和空间关系上却保持不变。MaterialDesign通过提供灵活的元素和样式，帮助你搭建可自适应的界面。”

从第一版开始，feedly就已经是一个可自适应的应用。自适应时，最主要需要考虑的元素就是用来呈现文章的卡片。考虑如何将这些卡片排布在杂志视图中，是一件很有意思也很有挑战的事情。正如你在下图看到的，不同尺寸的屏幕采用了不同的、但都很有趣的布局。

作者：ArthurBodolec

【免责声明】：本内容转载于网络，转载目的在于传递最新信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。