美文网首页
产品经理的私房菜 排版篇

产品经理的私房菜 排版篇

作者: 67b242aadc20 | 来源:发表于2021-02-06 19:39 被阅读0次

    产品经理的私房菜 排版篇

    「初稿|木深、木小深」

    「编辑|牟深、Sam、Ella」

    排版的意义

    「与其暧暧内含光」

    「不如光彩夺目地大放异彩」

    在这个看脸的世界,颜值已然成为时下评断他人第一印象时重要的指标之一。无法否认,气质出众、五官标志的美女总是能轻易地在一开始就吸引大众的目光,获得大众的好感。

    而排版亦如是,在人才济济的时代里,朴实的文字若少了良好的排版,被细细欣赏的机率也少的一大半。与其暧暧内含光,不如光彩夺目地大放异彩。

    不论是PC端还是移动端,任何文字存在的地方,就有排版的必要。良好的排版除了能够瞬间抓住用户的目光、让用户更有效率的吸收资讯,也能营造氛围、带给用户文字外的感受。

    本篇文章将介绍四个最基本也是最核心的排版技巧,能够运用在各种场合中,是产品经理必学的一步喔!

    在涅贵不缁,暧暧内含光「By崔瑷」

    一、对齐

    光是简单的对齐,就能让一个版面变得简洁有力。版面上每笔资讯都不是随意摆放的,当有一条对齐线,你会发现不管文字怎么放,看起来都很有系统。每个元素间都似有隐形的线串连起来,不管是向左对齐或是向右对齐,文字们齐头齐尾的摆放,缩小来看就是个方正的文字块,整齐有秩序。

    初学排版的你,切记「不要居中对齐」!对于常用word的人而言,居中对齐似乎是常见用于标题的对齐方法,为了凸显标题,你可能也用同样的方式在其他排版中出现。然而,居中对齐其实是最无法突出重点的排版方式,仔细观察,你会发现很少作品是将文字大大的居中放在版面中,通常都会偏左偏右,看起来更有精神。

    当然规则下必有反例,有些版面的确采用居中对齐会有意想不到的效果,然而初学者最好还是避免这种方式,你会发现比起居中,靠左或靠又看起来有力多了。下次在排版的时候,不妨挑战看看不用居中对齐吧!简单的移动对齐线,轻轻松松让你的作品看起来更专业了。

    仔细观察,每个作品都有隐藏的对齐线

    对齐后,保持了版面的整洁,也留下大片的空白,这时可别硬找东西胡乱塞入版面中!留白的力量是不容小觑的,空白不但留下了空间让用户思考、停顿,也能更加凸显其他元素的重要、资讯变得更加易读,适当的留白是学习排版的重要心得之一。

    二、群组

    版面变得整齐后,将你想提供给用户的资讯做更系统的整理,把每个相关的元素组成一个群组,让人一看就明白版面囊括了什么资讯,并选择其感兴趣的资讯,做更为深入的阅读。想要版面做出更多层次,可以利用「字体、颜色、大小、空白、符号」等变化方式,让每个看似单独的字眼组成一个共同群体。而大部分的版面为了整洁,通常不会有超过5个以上的群组。

    空白

    格行空白是最简单高效的方式,通过将不同资讯用空白隔开,相似资讯则能聚在一起更加吸引用户的目光。

    颜色

    运用同样的颜色,将相同性质的文字捆绑在一起,也是不错的选择。可以注意下,一个版面上的颜色,通常不会超过5种,过多的颜色会让用户失去阅读的重心,最好能控制在3种以内。

    切记,对于产品设计而言,重点永远不在多,而在于精。

    符号

    当有许多资讯需要分类时,符号就是十分方便的区隔方式。在重点处使用加粗、下划线,或是在每个小标后面加斜线,都能让资讯显得易读又整齐。

    三、对比

    将资讯分类后,层次就出来了,接下来善用对比法则更能让你的重点浮出,使得用户一眼就看见你想表达的中心思想。运用对比技巧能顺利吸引用户的目光,让他们先看见你最想表达的重点,接着顺着你的引导继续看下去。

    对比与群组相似,大概可以分为:「字体、颜色、大小」等方式,不一样的是群组是将相似的资讯采用相同的字体、颜色组成群组,而对比是将这些不同群组利用字体、颜色等方式区隔开来。善用这些技巧能让你的版面更加有层次,一目了然。

    字体

    通常最重要的标题会使用与正文不同的字体,显得特别而吸睛。但要注意的是,一个好的版面设计请避免用超过3种字体,因为过多的字体反而会让整个版面变得没有一致性,让用户无法看出到底想强调的区块在哪里。

    此外,再搭配不同字体的时候也须注意两者风格是否相符、字的粗细大小、字距行距看起来是否和谐等问题。

    大小

    主标、副标等为了正文分隔开,大多都会加大凸显重要。许多刚接触产品设计的人会认为「越大越好」,凡是遇到标题就要「放大、放大、再放大」,然而并不是越大就越有用,要领在于「有大有小」。

    如果整篇文章全部都是100pt,你也看不出任何重点;反之,若文章大标放大,副标稍微放大,内文不变,整篇文章的层次对比就出来了。有了对比,用户看到清楚的标题后,若对此有兴趣,便会继续阅读字型较小的正文。

    颜色

    颜色的对比则可以用色环搭配出各种风格的色彩,对于刚接触色彩学的人,可以看看behance学习下。里面有用色环搭配出的各种色彩让你做选择,你可以选具有高反差的互补色(Complementary)、不易出错却具强烈对比的分散互补色(Split-Complement)、舒适相合的近似色(Analogous)、活泼协调的三角对立色(Split-Complement)、多样又平衡的方形色( Square),各种方式搭配出的颜色都具不同的风格,不过每种方式都需注意色彩的平衡。

    此外,还有简易的冷、暖色调的对比法,冷色调会有缩小、倒退的感觉,适合用于背景;而暖色则有膨胀、突出的效果,适合用在标题。

    四、重复

    重复是让PC端产品显得有系统、移动端产品能突出重点的关键技巧。将重要的资讯不断重复出现,不仅能让读者一眼就辨识出重点,更能让他们留下深刻的印象。

    通常PC端产品,产品LOGO会重复出现,让用户快速记得产品的标志;移动端产品亦是如此,同样的元素在每个页面排版时出现在各个角落:页码、标题、图片等,这些小细节都是PC端和移动端产品设计的关键因素。

    当然,同一张图不断出现也会造成视觉疲劳,这时应该采用「多样性统一」,也就是将想强调的元素稍加做一些变化后,再重复使用,这样不仅能达到重复的效果,也能让读者有更多不一样的体会。

    结束语

    纵使这些排版技巧能够让原本的文字变得吸引人,别忘记,与美观相比,重要的永远是内容。若是文字不精,再漂亮的排版也只是沦为华而不实罢了。所以,在排版时除了善用这些技巧外,保持文字的易读性更是首要原则。

    下篇《产品经理的私房菜》系列,将带你一起精进文案设计,让你的作品有外表也有内在!敬请期待emmm

    产品经理的前进道路,不应该是一场孤独求索的旅行 。沿途那些美好的风景,有趣的人文,我愿意沉淀下来,分享与同行的你,或者是在路上的他。

    以上,希望对小伙伴儿们有所帮助,共勉~

    如果你有任何问题,请在留言区告诉我们。也请记得订阅「公众号:木小深」和我们的专栏,欢迎分享给其它有需要的人。我们这期分享就到这里了,再见❤️。

    相关文章

      网友评论

          本文标题:产品经理的私房菜 排版篇

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