美文网首页经验PMbook移动设计
移动设计第4课:如何进行页面布局

移动设计第4课:如何进行页面布局

作者: s2dongman申悦 | 来源:发表于2015-03-04 22:59 被阅读183次

It's beautiful when all the elements come together, isn't it?

当所有页面元素汇集在一起时,那效果美极了,不是么?

New York Times

New York Times -New York Times is a respected and well know news organization with their own app.

纽约时报——

纽约时报(New York Times)是一个众所周知、受人尊敬的新闻机构,同时也拥有自己的APP。

The use of spacing, typography, alignment and even colours in the design of their news feed is well throughout. There is actually a lot going on in this app yet it doesn’t feel cluttered because you can skimp through it very easily. As you can see the whole title is legible per each article and there is some additional information as well. Because the additional description is a light gray it makes the display easier on the eyes; it helps that the description is also smaller in front size. Whoever figured out the spacing and vertical rhythm of this layout nailed it because although there is a lot of text here it’s easily legible and scannable.

在纽约时报APP的新闻信息流整体设计中,对留白、排版、对齐、甚至颜色的使用都很出色。这款APP中有很多正在发生的新闻事件,但你不会感到杂乱,因为你可以很轻松地略过它们。就像你在看一篇文章时,能注意到很清晰的标题,但除此之外还有一些额外的内容。因为这些额外的内容采用浅灰色字体,同时也用了更小的字号,这都会减少眼睛的阅读困难。无论谁留意到布局的留白和垂直排版间距,都会对其印象深刻,因为尽管文字很多,却易于阅读和浏览。

Lastly, the small image that corresponds to each article is tucked away to the side. It supports the article’s headline and isn’t in the way. You can skim through the different titles with ease till you find something that interests you without having the distraction of an image between each title. It was a clever but great choice to make the image small and tucked away. All of those design decision add up to fantastic and easy to follow flow.

最后,关联每篇文章的缩略小图会被挤到边上,文章的标题支持这种布局,并且这种布局并不碍事。你可以很容易地略过不同标题,直到你找到你感兴趣的内容,而不是被每行标题间的图像所分神。把图片变小,挪到边上,是一种又聪明又合适的做法。所有这些设计决策加起来,会达到一种很奇妙的效果,并且易于追踪信息流。

Take away:Optimizing the flow of information can prove critical when there is a lot of information provided on a screen.

总结:当在屏幕上显示很多信息时,优化信息流就是个很重要的事情。

相关文章

  • 移动设计第4课:如何进行页面布局

    It's beautiful when all the elements come together, isn't...

  • 移动端布局之弹性盒(flex Box)

    传统布局的局限性: Flex布局相较于传统布局方式有哪些优点;为什么我们要采用Flex布局来进行页面设计;我们如何...

  • 移动端、PC端屏幕适配

    移动端适配 页面引入ydui.flexible.js页面布局采用rem布局rem计算方式:设计图尺寸px / 10...

  • 移动端----viewport方法

    今天,我们学习移动端的布局和页面的设计。webapp的页面的架构。在原生的Webapp的软件,移动部门把安装...

  • 移动端

    app Web App Hybird App 移动端页面 设计图 测试 移动端的设置 移动端的布局 弹性 fl...

  • div+flex移动端布局

    移动端布局 1.我们要进行移动端页面的开发设计第一肯定想到的是弹性盒子2.弹性盒子flex3.div和flex的配...

  • 【网页设计】如何更好的设计高质量的后台系统

    Icons8 Web APP 重设计,除了使用新的图标,整个设计风格上都进行了调整。 确定页面布局结构 页面的布局...

  • 2019-04-04

    关于如何使用css布局 左右布局 在页面开发过程中要对页面进行左右布局排版,如何使用css的相关知识来做到呢? 以...

  • 功能设计

    上一步,谋定后,现在则需要动—动——功能设计。 设计哪些内容? 1. 页面布局。使用AXURE进行页面设计,按照上...

  • webApp 页面布局

    1. 流式布局 概念:流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变。 设计方法:布局都是通...

网友评论

    本文标题:移动设计第4课:如何进行页面布局

    本文链接:https://www.haomeiwen.com/subject/ofbmxttx.html