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

PART 01 高级版式学习与分析

什么是版式设计

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

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

这还【hái】用说嘛，当然是B了～因为【wéi】对齐做的【de】好【hǎo】呀，给人感【gǎn】觉整洁、专业。反观A，太过复杂，花里胡哨。怎么【me】也不像是能【néng】认认真真办事儿【ér】的嘛【ma】!所以B更能让【ràng】人产生信赖感为什么【me】都是名片【piàn】，却给人【rén】不同的【de】心【xīn】理感受【shòu】呢?

“ 这【zhè】其实就是不【bú】同的版式【shì】设计【jì】所带来的【de】影响 ”版【bǎn】式设计的基本概念。

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

我们再来看【kàn】一组海报设计的样式，你第一眼的【de】最喜欢哪张呢？或者【zhě】你第【dì】一眼被哪【nǎ】张所吸引了呢【ne】？这个【gè】被吸引的【de】理由就是我们谈【tán】论【lùn】到【dào】的版【bǎn】式设【shè】计的作用了。

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

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

1. 表现力

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

【意义】一个具有强大表【biǎo】现力【lì】的版面设【shè】计，能【néng】够迅速吸引【yǐn】观众的【de】注意【yì】力，有效地传【chuán】达设计者的意【yì】图，使观众产生共鸣，并【bìng】留下深刻印象。

【示例】

2. 图版率

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

【意义】图版率的高低直接影响【xiǎng】版面的视觉效果和【hé】信息的传达效率。高图版【bǎn】率【lǜ】通常使版【bǎn】面更加生动、活【huó】泼，而低图版率则【zé】可【kě】能使版面显得更为【wéi】简【jiǎn】洁、明了【le】。

【示例】

3. 文字跳跃率

【概念】文字跳跃率是指版面中不同大小【xiǎo】、字【zì】体、颜色【sè】等属性的文字元素【sù】之间的【de】对比程【chéng】度【dù】。

【意义【yì】】通过调整文字跳跃率，可【kě】以突出重要【yào】的文字信【xìn】息，引导观众的阅读顺序【xù】，提高【gāo】版面的可【kě】读性【xìng】和信息的传达效【xiào】率。

【示例】

4. 跳跃率

【概念】图【tú】片跳【tiào】跃率是【shì】指版面中不同大小、形状、色彩【cǎi】等属性的图片元素之间的对比程度。

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

【示例】

5. 网格拘束率

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

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

【示例】

6. 版面率

【概念】版面率是指版面【miàn】中文【wén】字与图片等元素【sù】所占的面积【jī】与整个版面面积的比例【lì】。

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

【示例】

7. 构图

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

【意义】良好的【de】构图是版面设计的基【jī】础【chǔ】，它决定了版面【miàn】的整体视觉效果【guǒ】和信息的传达方式。通过巧妙的【de】构图，可以【yǐ】突出主题【tí】、引导【dǎo】视线、营造氛围，使版面【miàn】更具吸引力和感染力【lì】。

【示例】

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

导言经过深入【rù】探讨，版式设计的【de】七大原【yuán】则——表现【xiàn】力、图版【bǎn】率、文字跳跃率、图【tú】片跳【tiào】跃率、网格拘束【shù】率、版面率以及构图。今天我们将【jiāng】继续下篇，知道了这么多道【dào】理，我们如何来学以致用呢【ne】？Let’s go 。

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

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

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

1.差别对比

a.设计重点与目的

【版面【miàn】设计】主要侧重于形【xíng】式感和视觉【jiào】呈现。它追【zhuī】求独特的艺术风格【gé】和视觉效果【guǒ】，旨在【zài】通过精【jīng】美的排版和布局【jú】吸引观众的注意力【lì】，形成深刻的记忆点。版面设计【jì】更多地【dì】关注创【chuàng】意和【hé】视觉冲击力【lì】，以及如【rú】何在有限的版面空【kōng】间内有效地传【chuán】达信息【xī】。

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

b.设计元素与要求

【版面设计【jì】】通常涉【shè】及文字、图片【piàn】、色彩、线条等多种元素【sù】，要求设【shè】计师具备较高的审美【měi】能力和创意能力，能够将这些元【yuán】素巧妙地融合【hé】在一起，形成【chéng】具有艺术【shù】感染力的版面效果【guǒ】。

【APP界【jiè】面【miàn】设计】则更注【zhù】重界面的布局、按【àn】钮设【shè】计、交互效果等，要求设计师熟悉用户界【jiè】面的设计规范和原则，能够设计出【chū】符【fú】合【hé】用【yòng】户习惯和期望的界面【miàn】。

2.共性对比

a.视【shì】觉设计基础无论【lùn】是版【bǎn】面设计还是APP界面设【shè】计，都需要掌握基【jī】本的视【shì】觉设计原理【lǐ】和技巧，如色彩搭配、字【zì】体选择、排【pái】版【bǎn】规则等。这些基础知识是构建优秀设计【jì】的基【jī】石，有助于设计师更【gèng】好地【dì】表达【dá】设计意图和实现设【shè】计目标【biāo】。

b.用户导向两【liǎng】者都【dōu】需【xū】要深入了解用户需求和行为习【xí】惯，以便设计出更符合用户【hù】期望的作品【pǐn】。无论是吸引【yǐn】观【guān】众注意力【lì】还是提【tí】高用户体【tǐ】验，都需要【yào】以用户为中【zhōng】心进行设计思考。

c.技术与工具在设【shè】计过程【chéng】中，两者都会运用【yòng】到一些相同或相似的设计软件和【hé】工具，如【rú】Adobe系列软件（Photoshop、Illustrator等）以【yǐ】及【jí】Sketch、Figma等【děng】界面【miàn】设计工具。这些【xiē】工具能够【gòu】帮助设计师更高效【xiào】地完成设【shè】计任务，实【shí】现设计创【chuàng】意。

2.2 APP案例分析

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

TIPS：线条分割和空间【jiān】分割的【de】区别，分割线【xiàn】给人一【yī】种压迫感，而空间的分【fèn】割【gē】给人更加轻松【sōng】的【de】阅读感受。

TIPS：QQ音乐会员中心页面【miàn】的设计，不同的等级【jí】对应不同的【de】颜色卡片，运用【yòng】颜色填【tián】充【chōng】背景吸引用户增【zēng】加【jiā】界面专属比重，起到账【zhàng】户切【qiē】换视觉的引【yǐn】导【dǎo】作用，是【shì】一个很好的设【shè】计思路。

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

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

TIPS：综合来看，我们在【zài】做设计时很多时候【hòu】会「高逼格」亦【yì】或者去追求「高级灰」、是【shì】「独特【tè】性【xìng】」，其实更重要的是要符合产品【pǐn】的【de】调【diào】性和产【chǎn】品对【duì】象【xiàng】人群，不能一味的去追求自我的「设【shè】计追求」。“根据【jù】不同的项【xiàng】目需【xū】求【qiú】，选【xuǎn】择不【bú】同的模版【bǎn】自然会达到事半功倍的效果!”

2.3 学以致用技术提升‍‍

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

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

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

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

希望我们都【dōu】提高【gāo】能【néng】力，确保每【měi】一个设【shè】计元素都能【néng】和谐【xié】共存【cún】，共同构建出既美观又实用的版面【miàn】效果【guǒ】，创造出更加引人【rén】入胜的视觉体验，让设【shè】计作品更加符合用户的期【qī】望和需求。

本文由人人都是【shì】产品【pǐn】经理作【zuò】者【设绘【huì】闲人】，微信【xìn】公众【zhòng】号【hào】：【设绘闲人】，原创/授【shòu】权【quán】 发布于人人都是产品经【jīng】理，未经许可，禁止转【zhuǎn】载。

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

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