给版式设计的4条小贴士

设计中“表达”必不可少。无论你是设计网页、app还是穿戴设备的用户界面,都应该清楚地表达其意图和目标。由于文字在表达方面是主力军,所以你应该对版式设计有一个全面的了解。

当然了,设计用户界面和设计电子书或博客的主题界面是不一样的,但是它们的中心原则是相通的。毕竟屏幕上的表达主要依靠文字,而样式则是文字的展现形式。

正如Oliver Reichenstein在他的文章中开创性地说:“95%的网页设计是版式设计。”

改进版式设计提高可读性、理解性、利用率,保持图文平衡。也就是说,改进版式也可以优化界面。

这里有4个方法以及3个优雅的实例以供参考。

 

四条版式设计小贴士

版式设计硕士Robert Bringhurst在他的杰作《版式设计基本原理》中说:“版式设计是为了凸显内容。”

界面中有用户可能做的一系列选择,你的设计应该为用户提供决策过程,并且用不增加认知负荷的方式凸显内容。

 

1.选择一种在大多数字号下都能表现得很好的字体

许多用户界面中的控件都需要不同字号的文字,比如按钮、字段标签、段标题等等。所以去选择一种在大多数字号和粗细下都能保持可读性和可用性的字体吧,比如Avenir,Univers和Lato。

Image title

 

2.选择一种能轻易识别字母的字体

现有的许多字体下的某些字母非常相似,比如I的大写(I)和L的小写(l)看起来几乎没什么区别。R和N的小写连在一起时(rn)可能会被误认为是M的小写(m)。所以为你的用户挑选一种可以清晰分辨所有字母的字体吧。比如Clear Sans和Lato,看看它们的大写的I和小写的L吧。

Image title

 

3.用设计用户界面的方法来设计文本段落

Cameron Moll已经坚持这个理念十年了,他认为普通的设计师只把文本当作内容,而优秀的设计师把文本当作用户界面来设计。

设计界面时,秉持这种理念可以很好的避免界面冗杂。当你的文本作为一个功能性的元素出现时,它就是用户界面的一部分,这点在常规的界面中都适用。如果你不相信,只要回忆一下当你碰到一个明明是的拉的门却写着推的情况。

 

4.考虑设计的方方面面

如果你不熟悉JTBD(一种专注于用户需求的设计体系),你就问问你自己你想帮助用户解决什么问题,这个问题的答案可以帮助你设计用户界面包括文字版式。

Tim Brown认为:不同的字体有不同的用处。

设计师在离线阅读时的字体匹配上已经做的很好了。

网站和手机应用的离线阅读有两个目的:

1.让人们提前储存内容以备后用。

2.给人们一个地方去阅读它们。

因为在用户界面中是最多的是文字,做得最多的是阅读,所以设计师们用了两种不同的字体分别来设计离线阅读页。一种是衬线字体Lyon,另一种是无衬线字体JAF Bernino Sans。这两页在用户打算阅读或者打算完成某项任务时有非常明显的不同。

使用好的字体可以给用户带来好的用户体验。在成千上万本书、杂志和报纸中,衬线字体更为普遍地应用于长文本。但是在网页中无衬线字体则作为一种界面元素更常出现。

Image title

 

向专家学习

值得庆幸的是,现在有很多可以给予我们灵感,指导我们排版一个美丽且有效的用户界面的网站。这里有三个我最喜欢的。

 

Medium

Medium出色地阐述了“用设计用户界面的方法来设计文本段落”。作为一个阅读和写作的平台,Medium致力将文本设计做到最好。其他写作平台和内容管理系统为了能有好的效果也都在模仿Medium。

Image title

已发布的文章目录排版优美,便于阅读,是充满了缜密思考的通用型设计。更棒的是在Medium写作不用去预览文章的发布效果,因为你的所见即所得。

那主要的阅读部分呢?它们使用和标题相同的Bernino字体,不过也很容易区分两者,因为标题字号更大。

 

Slack

在这个例子中,文本仍然是最主要的。作为一个团队交流平台,Slack在文本上着重于交互和表达。就像Buffer,它坚持使用单一字体Lato,并做到了极致。

Image title

通过缜密思考思考应用实例,比较其中字重和颜色以及留白多少,Slack的设计师最终建立了这样一个层级分明而且容易阅读的平台。

 

Rdio

作为一个音乐应用,文本对Rdio来说不是主题。但是在这里我们依然能看到它精心设计的文本段落,以及对各种字号的Whitney字体完美使用。

Image title

 

建立你的UI版式

无论项目目标是什么,版式在界面中都是必不可少的。版式设计的好,可以为你在用户的印象中加分,设计的不好则会阻塞你和用户的交流。这些指导条例和实例可以帮助你更好的设计版式,沟通用户。

 

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部