懒人目录

 一.前言

二.UI界面中实战版式技巧分析

三.总结思考

一. 前言

在做UI界面的时候，很多时候我们需要去看很多的产品进行竞品分析、市场调研，不论是交互逻辑还是设计细节，非常占用设计师的时间成本，在这里我为大家分析和整理了常用的一些实战设计小技巧，帮助大家节省一些搜集资料的时间，希望帮助设计师们提高设计品质和效率！

二. UI界面中实战版式技巧分析

1. 版面中的空间关系元素

在界面版式设计中，可以运用平面设计中的结构思考方法去理解UI界面中的空间元素结构的分布对应，下面以新闻类客户端为例进行页面元素分析

2. 内容过多处理方法

为了让阅读更有效，可以采用不同标题规格、不同编排比例或不同色底进行层次上的划分

3. 模块化分割方法

线条分割和空间分割的区别，分割线给人一种压迫感，而空间的分割给人更加轻松的阅读感受

4. 如何改变版面图版率与视觉空间比重

我们来看下qq音乐会员中心页面的设计，不同的等级对应不同的颜色card，运用颜色填充背景吸引用户增加界面专属比重，起到账户切换视觉的引导作用，是一个很好的设计思路

5. 根据主题选择配图及配色方案

我们在做设计时很多时候会去追求“高级灰”、“高逼格”亦或者是“独特性”，其实更重要的是要符合产品的调性和产品对象人群，不能一味的去追求自我的“设计追求”，比如下面的2个案例就很好的表达出了产品的调性，明确的告诉用户我是做什么产品的，为什么样的人群去服务的

6. 画面焦点

表示在画面中相对更加突出的内容，让用户在浏览产品时能够第一视觉捕捉用户的眼球；焦点是相对的，在大页面中可以是焦点，在小模块中也可以是焦点

6.1 页面中焦点

采用模态效果的弹窗给人以不可忽视的方式出现

6.2 模块中的焦点

我们可以看到在优酷的“我的”页面信息以卡片的形式呈现，而会员购买入口则以一种带有色彩倾向性的颜色设计，表达了其的重要性；还有优酷的首页精选的卡片中“全网独播”等角标的设计在每一个模块中都很抢眼，很容易就能够捕捉到用户的视觉重心；苹果手机自带日历中当前日期的红色选中态以绝对的焦点方式设计呈现给用户

7. 界面平衡

平衡是版面元素上下左右比例都比较适中，给人一种稳定和平衡的视觉感受。平衡的版式设计可以让画面稳定不会产生上下比重失衡的现象，平衡的比例构图令人愉悦，而不平衡的设计会造成不稳定的分散注意力。视觉平衡是指在设计中的负元素和正元素比例相对合适，设计师的作用就是发挥元素的视觉重量的构图平衡。

8. 字体的选择

很多时候有的设计师在做界面时候都希望全端的字体能够统一，最好的办法是嵌入文字包，但给代码包增加了负担，所以我们需要去取舍！很多国产安卓手机都有自己的系统字体，要实际调研真机效果（如差异不大非必须嵌入字体）苹果和安卓常用字体如下

 9. 有节奏感的版式设计

节奏感的设计表现形式有很多种，比较常用的是在统一的样式节奏中穿插不同的模块来使得页面的节奏感更加的跳跃和灵活，比如Medium、网易云音乐的版式设计中都运用了节奏感的设计方法

跳跃的节奏感给人以活泼和时尚现代的感受，不会让画面通盘单一且枯燥的呈现给用户；灵活的节奏感也为很多付费内容提供了很好的呈现方式

10. 常用版心边距距离整理

不同行业的边距大小不同，内容信息较多的文字类和购物类产品的边距相对较小，而很多以图片、视频和音乐为主的产品相对较大！我为大家整理了常用参数，方便设计师们查看和参考，不必每次都需要测量很多产品

11. 多端思维版式设计，符合平台特性的版式设计

我们发现很多产品移动端的版式设计与Web端网页的Feed流版式设计结构会有不同，如果是你你会这么排版吗？

其实这样的版式设计师有原因的，第一是移动端更多时候以文字标题作为吸引人的视线，而图片在手机端显示较小，所以很多图片的清晰度和内容呈现都不够清晰，第二和手机端不同，网页端图片较大，可以很好的起到其本身的作用，也正因为网页端的呈现空间较大，所以当标题比较短的时候，如果还按照移动端的结构，那么标题和图片的中间会产生空白，造成视觉的浏览的不连贯，这就是为什么不同平台版式差异化的原因。

12. 色彩在版式中的对比运用

其中主要包含经典的3种-纯度对比、色相对比、明暗对比，界面设计师如果掌握了这3种常用对比手法，可以在界面设计中灵活自如的制造出不错的色彩对比

12.1 纯度对比

我们可以看到此案例中进度条部分，采用了低纯度的蓝色和高纯度的蓝色和绿色制造色彩对比形成层次反差，让画面非常的有活力

12.2 明暗对比

这张图片中的主背景颜色左侧为白色，右侧则调整成了黑色，通过色彩明度的对比可以表现出整个界面的层次感，使得整体的感受呈现出简约和高品质的风格（现在很多产品都已经适配了深色模式，可以为用户呈现出Light和Darkmode两种用户体验）

12.3色相对比

整体界面的主色调不难看出，是以绿色为基本色进行大面积运用，橙色在绿色中的运用非常鲜明，形成强烈对比，让用户非常清晰的知道此为强引导入口

13. 图片版面率的有效利用

我们在网上购物时，更多的是通过图片的第一印象来获取产品，所以图片在购物网站的比例都做到尽可能的适合自己的产品特点才能让版式设计更优；常见的图片尺寸有16:9、4:3、3:2、1:1、2:1、1:0.618（黄金比例），

比如淘宝、京东的产品图片，在有限的空间内，正方形比例的呈现则是最大的空间展示；优酷采用16：9的比例更加符合人眼浏览视频的习惯等

14. 版式设计的软硬关系

在界面设计中，为了功能的突出或者版式的“活跃性”等需要，必须增加一些元素来烘托，此时不妨试试看如下几种软硬搭配的方法，能够起到不错的效果

14.1 曲线与圆角

通过曲线与圆角的方式让界面变得更加“柔和”，比如以下产品的顶部位置的背景层的处理上，通过运用柔和的具有弧度的线条，让整个画面都不那么生硬了

14.2 渐变与过渡蒙层

在界面设计中我们常常因为为了保证界面元素存在而又不失品质在图片上增加icon的方式，此时可以通过增加过渡蒙层的效果上增加icon既能够保证功能性又能够保证美观度

14.3 直线加浮层

通过直线设计手法把图片和功能入口进行风格，是一种界线清晰的“生硬”设计方法，让界面有一种刚硬、强劲的感受

15.「高级感」的版式设计

有一种高级感版式设计是利用大留白与大卡片的版式设计的方式，让整个产品的气质凸显了出来，使得产品别具一格，比如下面3个产品，利用卡片进行模块化设计，内容里凸显少量文字运用色彩重量对比和修饰性的语句，再配以高品质的图片，使得整个界面非常的具有高级感

16. 差异化版式设计方法

设计工作中，经常会用到的方法，主要目的是能够达到在同类型功能入口中，起到脱颖而出的效果，比较具有典型代表的是增加动画效果或者增加角标等修饰性的设计，如拼多多的入口里增加了icon的动效和角标的动效设计在新人专享处特别运用红包的表现手法让元素都动了起来；在蘑菇街的入口位置对直播入口的头像进行了动效设计，增加视觉引导性

三. 总结思考

以上就是我为大家整理的实战中常用的版式设计的小技巧，希望能够帮助到大家，提升自己的设计能力和水平；

其实还有更多好的实际工作中的知识点和防踩坑技巧可以分享给大家，期待未来能够继续帮助大家进行梳理。

在此还是希望同学们给文章进行点赞加关注，留言区评论。让文章里的知识点能够有更多的角度融入到实际工作中

让我们一起努力，每天进步一点点，成为更好的自己。

原文地址：站酷

作者：Zeal庄治柱

• 插画形式
• 生活场景
• 文字图形化
• 视觉置换法
• 比例夸张法
• 直接代入法

01 插画形式

现在的海报设计大部分喜欢使用插画形式去表达，好处在于它具有丰富的想象力和自由创造性。例如代入品牌产品或吉祥物作为插画元素。

02 生活场景

很多互联网品牌早已将生活场景作为传播的“常规操作”。借助互联网大数据，稳抓用户生活轨迹，透过镜头精准切割出用户生活场景。作品多数采用温馨场景的形式展开创作，将生活的一些情节定格在插画中。以场景触发用户情感，最终引发用户共鸣。

03 文字图形化

文字的图形化编排是将文字编排成一条线、一个面或一个图形，例如将文字围绕圣诞树图形编排。

04 视觉置换法

将产品转换成圣诞元素，借助色彩、形状、线条、质感、空间等视觉元素，来表达两种视觉形象的相似性。正是通过这种视觉形象的相似，来刺激受众的联想和想象。这样的设计富有趣味性，与品牌产生很强的关联性。

05 比例夸张法

这一创意手法是屡试不爽的绝招，可以运用在许许多多的广告中。将某些物件进行视觉上大小比例的夸大，加大整体的视觉冲击力。

06 直接代入法

这是很直接的一种广告设计形式，将代表性的产品与圣诞主题结合，或者单独展示圣诞元素，再进行常规的图文编排，直接达到宣传效果。

作者： 周妙妍  来源：版式设计很简单(公众号)

我们在制作网站的时候如何把做好的效果图转成网页格式呢？这里就有很多方法，如果是比较复杂的网页就需要用手动来切图。如果不是很复杂的可以直接用PS自带的切片工具来切割。教程中介绍的是规则切图，实际应用中需要用手动来划分区块的大小。

最终效果
1、打开要分割的图片，点工具栏的切片工具。

2、将划分切片的水平划分为4，垂直划分为3，点好后出现12个等分的图片。

3、将图片划分好后，我们点工具栏最下面的键计入IR状态下编辑图片。

有了路径工具以后，文字排版就显得更加灵活。我们可以把文字做成任何想要的图案。如教程中的，我们可以把文字放入闭合的路径里面做成实体图形，也可以按照一条条曲线路径排版做成可爱的文字曲线。难度较大一点的就是通过路径组合做成创意的文字图案。相信学习了本教程以后，你就可以发挥创意做成更多创意图形。

最终效果

1、新建一个400×300的图像(可自设尺寸)，然后选择自定形状工具。

注意绘图方式应为第一种(形状图层)，如下图红色箭头处。然后在形状列表中选择一个心形(如不在列表中，可恢复默认形状)，如下图绿色箭头处。样式选择为无样式。另外可以选取一个的颜色。

2、然后在图像中画出一个心形(绘制过程中可以按住SHIFT键保持长宽比)，这样其实就是建立了一个带矢量蒙版的色彩填充层。如下左图，图层调板中显示的正是一个色彩填充层。双击缩略图可以更改填充的颜色，而图层缩略图右方有一个蒙版缩略图(下左图蓝色箭头处)，这就是矢量蒙版缩略图，特点是以灰色来表示被隐藏的区域。有关矢量蒙版的知识我们将在以后学习。

在进行下一步之前，要保证路径蒙版中的路径处于显示状态，方法是点击路径蒙版缩略图。会看到图像中的心形出现了一个外框，而图层调板中路径蒙版缩略图周围出现了一个细线框，如下右图。

3、现在选择文本文字工具，并使其停留在这个心形路径之上，依据停留位置的不同，鼠标的光标会有不同的变化。当停留在路径线条之上时显示为，当停留在图形之内将显示为。请注意这两者的区别，前者表示沿着路径走向排列文字，后者则表示在封闭区域内排版文字，作用是完全不同的。

4、现在我们先将文字工具停留在心形之内(光标为)，然后单击，出现文字输入光标，输入一些文字。如“LOVE”(注意每个字母之后都有一个空格，原因稍后再述)。选择一个英文字体(如Tohoma)，选择小一些的字号(如6px)，并复制粘贴几次，使其充满整个图形(超出也没有关系)，效果如下左图。此时看到文字在图形内的排列并不对称，接下来在段落调板中设置居中，并适当设置左缩进和右缩进的数值(如5px)，这样看上去就较为舒适了。一般来说在封闭图形内排版文字，都要进行这些设定以达到较好的视觉效果。如下右图。

5、现在隐藏(甚至可以删除)心形色彩填充层，我们看到在文字外围仍然保留有一条封闭路径，与原先心形路径相同。如下左图。由此可以明白，虽然这个文字层的排版路径是籍由另外一个图层中的矢量路径而来，但在完成后，其也“克隆”了一条相同的路径并“留用”。

我们可以对这条“克隆并留用”的路径进行修改，从而改变文字的排版布局。方法是使用直接选择工具〖A/SHIFT_A〗，在文字层(不是早先的填充层，此时应隐藏填充层)的路径上点击一下，就会看到路径上显示出许多小方块。如下中图。用直接选择工具往左上方略为移动蓝色箭头处的方块，就可以看到效果。有关路径的知识我们将在以后学习，到时候我们可以进行更多更复杂的修改，现在大家先记住路径是可以修改的就可以了。

前面我们提到过要在每个英文字母后面加上空格，是为了在行末换行时可以让单个字母移到下一行，而如果使用一整个英文单词LOVE，则在行末换行时，因为要保持完整性，整个单词将被移到下一行，这样的效果看上去就比较生硬(也有人会喜欢这种效果)，如下右图。大家以后在实际应用中可以参考这种加空格的方法，如果觉得空格拉大了字母间距，可以通过在字符调板中设置间距为负值来弥补。