英文 | https://uxplanet.org/13-tips-for-improving-landing-page-design-849801372da4
翻译 | web前端开发
01 、将图片上的文字进行颜色的叠加
有时候你不得不将一些蹩脚的图像通过半透明的设置处理,让文字更加清新,比方在图片上叠加品牌的颜色,尝试将它们背景图片作为一个辅助元素,而不是主要焦点元素。
这样处理的目的是为了显示文本的可读性,以及将图片元素弱化,在下面的示例中,我还对文本应用了深蓝色阴影,以进一步增强对比度。
最终调整效果对比如下:
02 、不要过度使用负空间
设计师喜欢负空间,我们总是听到我们应该如何在网络上拥有更多负空间。但是,当属于在一起的元素之间存在过多的负空间时,眼睛会结结巴巴,掉入空虚的空隙中,而不是轻易流过连接的元素。
最终调整效果对比如下:
03 、突出重点内容
任何浏览过网站分析的人都知道,你只有很少的时间来吸引某人的注意力。要讲到重点。
最终调整效果对比如下:
04 、纯文本的布局也应该在视觉上吸引人
着陆页的纯文本部分可能很难设计,尤其是在你没有机会使用摄影图、肖像或其他图片资源的情况下。着眼于你的品牌颜色和印刷细节,以快速吸引人,呈现你的最优设计。
最终调整效果对比如下:
05 、LOGO很小,插图却很大。
LOGO很棒,但是他们应该知道自己的位置。插图图标一般要简单,在页面里面应该扮演配角。如果过大,适当把它们去掉或者调整。
最终调整效果对比如下:
06 、谨慎地使用字母间距
有许多方法可以使用字母间距来巧妙地改善字体,但是,如果你不是一位经验丰富的印刷者,则可以坚持在所有大写字母标题上增加一些字母间距。在句子大小写的文本中增加额外的字母间距可能会产生可读性问题,并破坏字体设计的自然节奏。
最终调整效果对比如下:
07 、在常见问题解答设计不要过长
查看常见问题解答部分可能是网络上行列过长的罪魁祸首。最佳行长度在45到75个字符之间,包括空格和标点符号。
最终调整效果对比如下:
08 、不要隐藏真正的价值
在下面的示例中,真正的价值被隐藏在几乎不可读的字幕中。在这里,我们可以采用一个简单的办法来实现,通过增加真实用户的面孔来为社交证明增加真实性。
最终调整效果对比如下:
09 、没有人喜欢小小的文本
在下面的示例中,CSS使用了可变的Web排版,从而创建了正文为11px,导航链接为9px的方案。
现在,浏览器的默认字体大小基本已经调整到16px,所以,最好的做法就是将标题的字体大小调整到18–20px,然后正文使用默认字体大小。
最终调整效果对比如下:
10 、多采用奇数呈现
布局更多的是采用奇数个元素。如果你有4个元素,请尝试通过分成2组显示。
如果不行就调整为3个元素进行显示,把最弱的那个元素去掉,这样页面会感觉轻松不少,不会感觉到超负荷呈现。
最终调整效果对比如下:
11 、适当减少元素
尽可能合并并减少你的呈现元素。在标题之间创建大小对比,并进行复制以改善视觉层次,并在你有很多话要说时,使用负空间来创建更平衡的体验。
最终调整效果对比如下:
12 、使用亮色作为重点
在大范围使用亮色会使你陷入对比度困难的问题,从而可能无法满足文本的基本可访问性要求。在按钮等较小的元素上,使用一些亮色,会突出重点,同时还需要你避免使用白色文字。
最终调整效果对比如下:
13 、检查灰色文字的对比度
使用灰色文字是为了创建文本元素间的层次结构。但这通常会导致严重的可访问性问题,而文本缺乏足够的对比度。如果需要建立更清晰的视觉层次结构,请借助一些在线工具检查文字对比度,并增加字体大小的对比度。
最终调整效果对比如下:
到这里,这13个关于网页设计的效果已经全部分享完毕了,如果你还有什么问题,请在留言区与我们分享交流。
学习更多技能
请点击下方web前端开发