网页设计技巧:如何做好详情页的文字排版

Post 9 of 1048

对于品牌电商网站设计而言,文字不仅是整个界面中最直观的信息载体,也是整个设计过程中至关重要的环节。而一款优秀的商品详情页,除了要保证其美观外,文字排版也很重要,这也是电商网站设计都是以图文结合形式展示的原因。

那么,如何做好详情页的文字排版呢?

网页设计技巧一:规范字号

排版的目的是帮助用户整理信息,提升阅读效率,因此我们需要对界面内容进行分组、划分层级关系。而在之前,我们必须要做好一件事就是保证文字的可读性。

网页设计技巧:如何做好详情页的文字排版

网页设计技巧

现在电商详情页的用户使用场景几乎都来自于手机端,如果文字太小,容易导致用户无法看清、看懂,进而不利于文字信息的正确传达。当然,这也不代表文字越大越好。因此文字太大,会显得过于粗暴,让界面看起来缺乏精致感。

建议主标题字号大小控制在50-80px,副标题控制在26-36px,看起来会舒服很多。当然这组数据仅供大家参考,并非绝对。

网页设计技巧二:根据重心排版

在实际工作中,界面元素并不是只有图片和文字,还有可能出现图案、符号、线框等装饰元素,这些元素在视觉上都具有一定的“分量感”,所以当我们进行界面的排版布局时,可以根据画面重心合适的排版方式。

PS. 常见的排版布局方式有三种,包括居中对齐、左对齐和右对齐,下面我们来看看如何透过画面重心选择排版方式:

| 居中对齐排版

与另外两种排版方式相比,居中对齐排版的重心会更加平稳,适合用在相对平衡的构图上。

网页设计技巧:如何做好详情页的文字排版

网页设计技巧

与上图所示,不管产品如何拜访,只要画面重视始终相对平稳,使用居中对齐的排版方式基本不会出错。

| 居左/右对齐排版

说完居中对齐排版,我们就说说左/右对齐排版。从本质上来说,这两种排版方式没有太大区别,无非就是出于用户习惯的原则,左对齐会相对用得多些。

一般情况下,如果画面重心不够平稳时,我们一般会考虑通过文字排版、装饰元素等方式来达到平衡的效果,这个时候就会用到居左/右对齐排版方式。

网页设计技巧:如何做好详情页的文字排版

网页设计技巧

如上图所示,当画面重心偏向一侧时,顺理成章地根据实际情况选择居左/右对齐排版方式。

网页设计技巧:如何做好详情页的文字排版

网页设计技巧

虽然依据重心排版非常好用,但如果全部都按照重心原则进行排版,视觉上难免过于单一,因此在实际工作中,我们经常会在网页设计上采用多种排版方式来展示。

网页设计技巧三:相对平衡原则

所谓的相对平衡原则,其实就是利用装饰元素或必要的排版布局元素平衡画面,营造视觉上的相对平衡即可。

网页设计技巧:如何做好详情页的文字排版

网页设计技巧

虽然图中两个产品的长短不一,但所占的直觉比重差不多,所以整体的视觉中心是相对平衡。不过,如果我们将这张场景图做详情页首图,并按照刚才方式的采用居中对齐排版,画面重心会偏向右边。

网页设计技巧:如何做好详情页的文字排版

网页设计技巧

这就能解释,很多详情页案例明明重心很平稳,但不用居中对齐反而更加出彩,其原因是做到了视觉上的相对平衡。

事实上,视觉相对平衡并不像对称式构图那样严谨,只要看起来差不多就可以了,像是一些竖向排版或不规则排版,其核心思想就是保证视觉上的相对平衡。

【总结】

网页设计的魅力在于不确定性,详情页排版同样如此,不管是选择重心原则还是相对平稳原则,都只是为设计提供理论依据,关键还是取决于整体界面的布局和规划!

This article was written by admin

MENU
網頁設計公司