经验PMbook移动设计

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

2015-03-04  本文已影响183人  s2dongman申悦

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.

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

上一篇下一篇

猜你喜欢

热点阅读