设【shè】计【jì】师在设计过程中【zhōng】，确实可能会遇【yù】到一些【困【kùn】扰】，使得设计【jì】成果显【xiǎn】得不够【高、大、上【shàng】】或不够【有感觉】。这种情况【kuàng】下，如何【hé】解决这些问【wèn】题【tí】？本文分享【xiǎng】了两个方法，可以帮我【wǒ】们更好地进行界面设计，提高界面高【gāo】级感。

PART 01 高级版式学习与分析

什么是版式设计

【小提问】下面两个啤酒海报，哪个感觉更廉价?

这还用【yòng】说嘛，当然是B了，因为有帅【shuài】哥呀【ya】～因为B出现了人【rén】物【wù】肖像，亲和力比A这种高冷范强多了。买得起的【de】东西才有【yǒu】亲和力【lì】嘛，所以B给人感【gǎn】觉更廉【lián】价，属【shǔ】于朕买得起的范畴。反【fǎn】观A呢，给人很大的距离感，感【gǎn】觉就贵，买【mǎi】不起【qǐ】系列。【小提问】下面两【liǎng】个名片，哪【nǎ】个更易让【ràng】人【rén】产生【shēng】信【xìn】赖感?

这还用【yòng】说嘛，当然是B了【le】～因为对齐做的好呀，给人感觉【jiào】整【zhěng】洁【jié】、专业。反【fǎn】观【guān】A，太过复杂，花里胡哨。怎么也不像【xiàng】是能认认真真办【bàn】事儿的【de】嘛【ma】!所【suǒ】以【yǐ】B更能让人【rén】产生信赖感为什么都是名片【piàn】，却【què】给人不同的心理【lǐ】感受呢?

“ 这其实就是不同的版式设【shè】计所带来的影响【xiǎng】 ”版式设计的基本【běn】概念。

【定义】版式设【shè】计作为平面设计【jì】的【de】重要【yào】分【fèn】支，其核心【xīn】在于【yú】巧妙运用各【gè】种造型要素【sù】和形【xíng】式【shì】原理，对版面中的【de】文字、图像、图形、线条、表格及色块等要素进行精【jīng】心编排。这一过程不仅【jǐn】仅【jǐn】是简单的排列【liè】组合【hé】，更是以视觉艺【yì】术【shù】的形【xíng】式，将设计者的意【yì】图和信息直观地传递给【gěi】观看者。通过精心的版式编排，我们【men】力求让版面呈现出和【hé】谐统一的美感，同【tóng】时确保信息【xī】的有效传【chuán】达，使观看者能够深刻感受到设计者的【de】创【chuàng】意与用【yòng】心。

我们【men】再来看一组海报设【shè】计的样式【shì】，你第一眼的最喜欢哪张【zhāng】呢？或者你第一【yī】眼被哪张所吸引了【le】呢【ne】？这个被吸引的理【lǐ】由就是我们谈【tán】论到的【de】版式设计【jì】的作【zuò】用了。

【作用】吸【xī】引【yǐn】观【guān】众的视线，激发其阅读【dú】兴趣，是版式设计的首要任务。通【tōng】过精心编排，确保【bǎo】版面所传达的主旨【zhǐ】能够【gòu】一目了然地呈现【xiàn】在观众【zhòng】眼【yǎn】前。同时，充分发挥版式设计的表【biǎo】现力，强化版面主题，以其独特【tè】的【de】艺术魅力深【shēn】深吸引【yǐn】观众【zhòng】的目光，为他们带来视【shì】觉【jiào】上的享受与心【xīn】灵【líng】的触动。版【bǎn】式设计的【de】七大原则

任何的技术我们都可以【yǐ】抽出更加【jiā】抽象【xiàng】的概念，用于【yú】指导我们的【de】实践【jiàn】学习。接下来让我们开【kāi】始【shǐ】了解，版式设计的七大【dà】原则——表现力、图版率、文字跳跃率、图片跳跃率、网格拘束【shù】率、版面率以及【jí】构【gòu】图【tú】。

1. 表现力

【概【gài】念】表【biǎo】现力是指【zhǐ】版面设计在视【shì】觉【jiào】上所能传【chuán】达的情感、氛围和【hé】主题的能力。

【意义】一个具有强大表现力的版面设计，能够迅速吸引【yǐn】观众的注意力，有【yǒu】效地传达设【shè】计者【zhě】的【de】意图【tú】，使观【guān】众产生共【gòng】鸣【míng】，并留下深刻印象。

【示例】

2. 图版率

【概念】图版率是指版面中图片所占的面积比例。

【意【yì】义】图版【bǎn】率的高【gāo】低直接影响版面的视觉效【xiào】果和信【xìn】息的【de】传达效率。高图版率通常使版面更【gèng】加生【shēng】动、活泼，而【ér】低图【tú】版率则可能使版面【miàn】显得【dé】更为简洁、明了【le】。

【示例】

3. 文字跳跃率

【概念】文字跳【tiào】跃率是指版面【miàn】中不【bú】同大小、字体、颜色【sè】等【děng】属性【xìng】的文字元素之间的对比【bǐ】程度。

【意义】通过调整文字跳跃率，可以突【tū】出【chū】重要的文字信息，引导观【guān】众的阅读顺序，提高版面【miàn】的可读【dú】性和信息的传【chuán】达【dá】效【xiào】率【lǜ】。

【示例】

4. 跳跃率

【概念】图【tú】片跳【tiào】跃率是指【zhǐ】版【bǎn】面【miàn】中不同大小、形状、色【sè】彩【cǎi】等【děng】属性的图片元素之间的对比程度。

【意义】适【shì】当【dāng】的图片跳跃率可以增强版面的视觉冲击【jī】力，使版面更具层次感和【hé】动态感，有助【zhù】于【yú】吸引观【guān】众的注【zhù】意力。

【示例】

5. 网格拘束率

【概念】网格拘【jū】束率是指【zhǐ】版【bǎn】面设计中对网格系统【tǒng】的使用程度和依赖程【chéng】度。

【意【yì】义】网格【gé】系统可【kě】以使版面布【bù】局更【gèng】加【jiā】规范、整齐，提高【gāo】设计的一致【zhì】性和可读性。但过度【dù】的网【wǎng】格拘束可【kě】能限制设计师【shī】的创意发挥，因此需要根据【jù】设【shè】计需求和【hé】风格来平衡网格的使用。

【示例】

6. 版面率

【概【gài】念】版面率【lǜ】是指版面中文字与【yǔ】图片等元素所占的【de】面积与【yǔ】整个【gè】版面面【miàn】积的比例。

【意义【yì】】版【bǎn】面率的高低决定了版面的信息承【chéng】载量和视【shì】觉效果。适【shì】当的版面率可以使版面既【jì】不过于拥挤也【yě】不过于空旷【kuàng】，保持【chí】良好的【de】视【shì】觉【jiào】平衡和信息【xī】传达效率。

【示例】

7. 构图

【概【gài】念】构【gòu】图是【shì】指将版面中的各个元素（如【rú】文字、图片、线条等【děng】）按照一定的规则和原【yuán】则进行排列【liè】组合，形成【chéng】一个完整、和谐的【de】视觉【jiào】画面。

【意义【yì】】良【liáng】好的【de】构图【tú】是版面设【shè】计的基础，它决【jué】定【dìng】了版面的整体【tǐ】视觉效果和信息的【de】传达方式。通过巧【qiǎo】妙的【de】构图，可以【yǐ】突出【chū】主题、引导视线、营【yíng】造氛围，使版面更具吸引力和感染力。

【示例】

这【zhè】些【xiē】概【gài】念在排版设计中起着至关重要的作用，它们相互【hù】关联、相【xiàng】互影响，共同构成了版面设计的整体效果【guǒ】和风【fēng】格。设计师需要【yào】熟练【liàn】掌【zhǎng】握这些【xiē】概念，并根【gēn】据设计需求和【hé】目标来灵【líng】活运用它们，以创作【zuò】出【chū】优秀的设计作品。

导言经【jīng】过深【shēn】入探讨，版式设【shè】计的七大【dà】原【yuán】则——表现力、图版率、文字跳跃率、图片跳跃率、网【wǎng】格拘【jū】束率、版面率以【yǐ】及构【gòu】图。今天【tiān】我们将继续下篇，知道了这么多道理，我们如何【hé】来学以【yǐ】致用呢【ne】？Let’s go 。

PART 02 如何运用在界面设计2.1 对比共异

版面设计【jì】与APP界面【miàn】设计在【zài】设计重点【diǎn】、设【shè】计元素和要求【qiú】等方面【miàn】存在【zài】显著的差【chà】别，但在【zài】视觉设【shè】计基础、用户导向以【yǐ】及技术与【yǔ】工具等方面【miàn】又具有【yǒu】一定的共性。设计师在【zài】掌握【wò】这【zhè】些共性【xìng】的基础上，需要针对【duì】具体【tǐ】的【de】设计领域进行深入学【xué】习【xí】和实践，以便更好【hǎo】地应【yīng】对不同的设计挑战和需求【qiú】。版面设计与APP界【jiè】面设计在视觉设计领域各自占据重要地位，它们之【zhī】间既存在显【xiǎn】著的差别，又有一些共性。

以下是对这两者在差别和共性方面的详细对比：

1.差别对比

a.设计重点与目的

【版面设计】主要侧【cè】重【chóng】于形式感【gǎn】和视觉呈现【xiàn】。它追【zhuī】求独特的艺【yì】术风格和视觉效果，旨在通过精【jīng】美【měi】的排版和布局吸【xī】引观【guān】众的【de】注意【yì】力，形【xíng】成深刻的记忆点。版【bǎn】面设【shè】计更【gèng】多地关注创意和视觉冲击力【lì】，以【yǐ】及如何在有限【xiàn】的版面空间内有效地传达信息。

【APP界面设【shè】计】更注重信【xìn】息【xī】传达、功能实现【xiàn】和用户体验。它旨在通过清晰、直【zhí】观的【de】界面设计【jì】，帮助用户快速理解和【hé】使用APP的【de】各项功能。APP界面设计需要考【kǎo】虑到用户的使用习惯、交【jiāo】互【hù】逻【luó】辑以【yǐ】及【jí】易用性，确保用户在使【shǐ】用过程【chéng】中【zhōng】能够顺畅地【dì】完成各项操作。

b.设计元素与要求

【版面设【shè】计】通常涉及文字【zì】、图片、色【sè】彩、线条等多种元【yuán】素，要求设计师【shī】具备较高的审美能力和创【chuàng】意能力，能够将【jiāng】这些元素巧妙地融合在【zài】一起【qǐ】，形成具有艺术感【gǎn】染【rǎn】力【lì】的版【bǎn】面效果。

【APP界面【miàn】设计】则【zé】更注重【chóng】界面的布【bù】局、按钮【niǔ】设计、交互效果【guǒ】等，要【yào】求设计师熟悉用户界面的设计规【guī】范和原则，能够设【shè】计出【chū】符合用户习惯和期望的界面。

2.共性对比

a.视觉设计基【jī】础无论是版面设计还是APP界面设【shè】计，都需要掌握基【jī】本的【de】视【shì】觉设计原理和【hé】技巧，如【rú】色彩搭配、字体选择、排版规则等【děng】。这些基【jī】础【chǔ】知识是构【gòu】建【jiàn】优秀设计的基石，有助于设计【jì】师【shī】更好地表达设【shè】计意图【tú】和实现设计目标。

b.用户导【dǎo】向两者都需【xū】要深【shēn】入了解【jiě】用户需求和行为习惯【guàn】，以便设计出【chū】更符【fú】合用户期望的作品。无论是【shì】吸引观众注【zhù】意力还是提高用户体验，都需要以用【yòng】户为【wéi】中心进行设【shè】计【jì】思考。

c.技术【shù】与工具在设计过程中【zhōng】，两者都会【huì】运用到一【yī】些相同【tóng】或相似的设计软件和工具，如Adobe系【xì】列软件（Photoshop、Illustrator等）以【yǐ】及Sketch、Figma等界【jiè】面设计工具。这些工具能够帮助设计【jì】师【shī】更高效【xiào】地完成设计任务，实现设【shè】计创意【yì】。

2.2 APP案例分析

让【ràng】我们来看看【kàn】具体几个案例的实施【shī】效果，具【jù】体【tǐ】可以给我【wǒ】们什么启发呢:

TIPS：线条分割【gē】和空间分割【gē】的【de】区别，分割【gē】线给人一【yī】种压迫感，而空间的分割给人【rén】更加轻【qīng】松的阅读感【gǎn】受。

TIPS：QQ音乐【lè】会员中心页【yè】面的设计，不同的等级对应不【bú】同的颜色卡片【piàn】，运【yùn】用【yòng】颜色填【tián】充背景【jǐng】吸【xī】引【yǐn】用【yòng】户增加界面专属比重【chóng】，起到账【zhàng】户切换视觉的引导作用，是一个很好的设计思路。

TIPS：表示在画面【miàn】中相对更加突出的内容【róng】，让用户在【zài】浏览【lǎn】产品时【shí】能够【gòu】第一【yī】视觉捕捉用户的眼球;焦【jiāo】点是相【xiàng】对的，在大页【yè】面中【zhōng】可以是焦点，在小模块中也可以【yǐ】是焦点。

TIPS：我们在网上购物时【shí】，更【gèng】多的是通过图片【piàn】的第【dì】一印象来获【huò】取产品【pǐn】，所以图【tú】片在购物网【wǎng】站的比例都【dōu】做到尽可【kě】能的适合自己的【de】产品特点才能让版【bǎn】式【shì】设计更优。

TIPS：综合来看【kàn】，我【wǒ】们在做设计时很多时候【hòu】会【huì】「高逼格」亦或者【zhě】去追【zhuī】求「高级灰」、是「独特性」，其实更重要的是要【yào】符合产品的【de】调性和产品对象【xiàng】人【rén】群，不能一味的去追求【qiú】自我的「设计追求」。“根据不同的项目需求【qiú】，选择不同的【de】模版自然【rán】会【huì】达到事半功倍的效果【guǒ】!”

2.3 学以致用技术提升‍‍

所【suǒ】有的技术知【zhī】识都是可以【yǐ】进行迁移的，我们需要学以致用，将所学的知识和技能【néng】灵活运【yùn】用到实际工作中。迁移技术知识【shí】的过程，不仅【jǐn】是【shì】对知识【shí】的【de】深【shēn】化理解，更【gèng】是对能力的全面提升。也要【yào】通过不【bú】断地实践、探【tàn】索和创新，我们【men】可【kě】以将所学的技术知【zhī】识转【zhuǎn】化为解决实际问题的能力【lì】。

以下是我个人总结【jié】的一点小【xiǎo】经验，通过【guò】四个过程来逐步进行提高，让我们的【de】【界面设计【jì】更带感！】

作为【wéi】一【yī】名设计【jì】师，不要受【shòu】限【xiàn】于CSS,HTML或其他【tā】任何技术工具的约束。它们不应成【chéng】为你理【lǐ】想中完美构图的绊脚石【shí】。这些设计【jì】原【yuán】理适用【yòng】于任何载体， 像【xiàng】平台、工业、网页等等。它【tā】们【men】简单【dān】明了地【dì】体现了我【wǒ】们的大脑和眼睛是如何在任何形式【shì】下感知【zhī】视觉信息的。什么都去学，什么都去用，才能突破瓶颈【jǐng】。

经过深【shēn】入探讨，版式设计【jì】的七大原则——表现力、图版率【lǜ】、文字跳跃【yuè】率、图片跳跃率、网【wǎng】格【gé】拘【jū】束率【lǜ】、版面率以及构图。这些原则不仅提升了视觉的层次感【gǎn】，还让我们能够科学而严谨地表达出【chū】期望【wàng】呈【chéng】现【xiàn】的元素。当回【huí】顾每一个【gè】原【yuán】则所【suǒ】对应的案例时，我【wǒ】们不难发【fā】现，每一个案例【lì】其实都【dōu】是多条原则的综合运用，它们【men】彼此相【xiàng】互【hù】依存，无法孤【gū】立【lì】存在。

希望我【wǒ】们都提高能力，确保每一个设计元素【sù】都能和【hé】谐共存，共同构建出既美观又实用的版面【miàn】效果【guǒ】，创【chuàng】造出更加引【yǐn】人入胜的视觉体【tǐ】验，让设计【jì】作【zuò】品更加符【fú】合用户的【de】期望和【hé】需求。

本文由人【rén】人【rén】都是产【chǎn】品【pǐn】经【jīng】理作者【设绘闲人【rén】】，微信公众号：【设绘闲人】，原创/授权 发布于【yú】人人都【dōu】是产【chǎn】品经理，未经许可，禁止转载。

题图来自Unsplash，基于 CC0 协议。

标签： #qq升级后界面风格如何切换