曾经我学习UI设计时，网上资料很多，但是参差不齐，对于新人而言，这是很痛苦的，进步慢。因此我想通过之前踩过一些坑，集合自己的工作经验，把一些知识点分享出来。
分享的最终目的是沉淀自己，同时也希望能给有想要提升排版能力的设计师带来一些帮助与启发！所以本系列文章并不一定适合所有人。
那么本周就先从排版篇幅开启……
排版是界面设计中最难的部分，也是非常重要的一部分，它以各种形式存在界面中，纯文本排版，图形文排版，图片文本排版等等，这是我们在做设计时候，经常会面临的问题。好的排版能有效地向用户传递关键的信息，同时也能提升产品使用体验。
在我们日常生活中，离不开设计排版，包括经常见到的各种广告与电影宣传海报，如果不能让用户在短时间内记住关键信息，这个设计就是失败的。因此我希望通过今天这篇文章，能够让你对排版有一些新的认识。
在界面设计中，影响排版设计的因素有很多，我总结归纳了7个维度（当然还有其他更细的，在这里就先暂时不讲），它直接影响整个排版质量，这些方法当然不是绝对，但是如果能巧妙综合得运用到界面中，能保证大部分界面设计感得以提升，当然也是需要不断刻意练习来提高的。
分别是：
下面我会集合一些案例来和大家讲解下
空间即我们常说的留白，当设计元素紧紧地聚集在一起时，界面看起来没有重点，因此需要和谐的运用它，空间的运用规则直接影响产品的性格，小空间和大空间在视觉感受上森和链，两者完全不同，那么我们在界面设计中如何去更好的运用空间来设计排版。
有一个很好的方法就是可以运用网格去搭建空间，在平面设计中，运用得非常多，那么在用户界面中，同样也可以运用网格去搭建，下面看一个案例：
如上图作者把一个界面分为4Gird，通过搭建好的网格来进行界面中元素排版，右侧是我拆解的图（备注：网格的搭建并没有任何强制性的规定需要搭建多少列，最终的搭建列数需要根据这个产品内容复杂程度去定义的），比如：我最近在做车载HMI设计语言，同样也运用了网格，那么我会根据整个车载HMI产品复杂程度去搭建，同时也运用了几种网格配合使用。
上面两个例子我们可以发现 设计师运用了大空间来设计界面，这使得整个界面呼吸感更强，更透气，因为也是 娱乐 类偏杂文产品，所以设计会偏艺术化一些。
韩国29cm产品是我比较喜欢的一个app，整体设计呼吸感很强，留白空间大，视觉焦点清晰。
我们都知道大的物体更吸引眼球，更容易引起我们的注意，那么在设计中，我们一般都会将重要元素放大，此孙突出显示。
a和b那个更吸引你？
答案是a. 因为a类型排版看起来很大，更具有吸引力。
上面案例中算是大小方法上运用比较好的，我们可以看出视觉层次非常清晰了。首先我能快速知道哪些重要信息，肯定是封面图，接着左上角logo,然后就是导航和标题了，最后就是针对每个内容块的一些详细文案解释。
简单示例，重要的信息一定要大，次级信息弱化。
颜色在排版设计中起着很大的作用，能起到点睛之笔，又或棚早者为画面带来活力，又或者代表着品牌，当然我们在UI界面中字体颜色一定要慎用，因为不同颜色含义是不同的。合理恰当运用颜色， 能够瞬间提升设计品质感。
上面这个web设计中，设计师通过红色来强调重要信息，同时也让灰白的画面有了些许不同之处。
对某些文本使用辅助颜色，例如链接文本，图1 使用方式正确。图2将颜色大量使用在正文，严重影响视觉体验。
避免像图2那样使用对比度低的颜色。
对齐是界面设计中我们经常提到话题，也是提升界面品质感最重要的一个隐形的力量，也许有时候我们会忽略他，有时候会不经意间就没做好。
对齐的界面比不对齐的要整齐很多，视觉流也符合用户阅读习惯。
我们可以借用前面所学的网格来对齐，这样不仅设计有节奏感， 同时画面很整齐美观。
我们界面设计中可以有三种思路对齐方式，当然根据业务板块去选择合适的对齐方式，三种对齐方式都有一个隐形的轴（看我标的线），然后围绕这个去排版设计，自然形成一个规则的视觉流。
上面案例中作者整体偏左对齐，这样形成以左为中心一个轴展开视觉流走向。
我们在做界面设计时候，会经常遇到有人说你的设计，要么是这边太重了，要么就是太轻了，或者这边要不加点东西进去，不然太空了，为什么？
这就是平衡定律，如果同一个环境下的物体没有保持平衡关系，我们视觉感受上是很不舒服的。
下面我们看几个例子：
图1和图2 我们可以看出，图2 给人第一感受就是不平衡的，整体视觉重心偏左。
上图案例，设计师通过按钮来平衡整个画面视觉重心，因为左侧内容多，如果按钮很弱或者很小，是很难平衡画面的，因此我们做界面时候，定义一些按钮大小也是非常考究的。
左边视觉界面，右边拆解原型出来，我们可以看到设计师也是通过元素合理分布使得界面整体平衡。
字体选择对界面排版非常至关重要，这也是所有界面排版中必要的一步，不同字体有不同的性格属性，我们需要根据产品来选择恰当的中英文字体。同时，也需要记住，一个产品APP界面设计中，字体最好不要超过两种
推荐一些我认为2019比较好用的英文字体，大家做概念设计时候或者提案方案包装时候是可以用到的哦（吐血推荐）。
分别是：Montserrat 和 Nexa 字体。
分别是：Futura 和 Playfair_Display 字体
中文好用的字体，大家应该都知道，平方字体，思源黑体，汉仪旗黑，兰亭纤黑，我就不做示例了。
终于到最后一趴了，最后这点是整个设计排版的核心之一，为什么？
如果不清晰设计目标，那么整个排版风格也许最后产出和你用户群体或者产品性格是两种类型的，不同产品风格会有不同的排版style。
比如：我们产品是奢侈品，那么整体排版设计风格一定是使用大网格，大空间去设计，字体纤细等。如果是简约现代呢？又或者母婴产品， 科技 产品， 娱乐 产品等等，每个会有一些特殊排版思路。所以了解你的设计目标，并确定设计原则。
有了这些原则与目标，那么接下来就是开始找参考，找灵感找到对应产品他们是如何排版，如何控制画面节奏感的，推荐多去使用pinterest或者behance
通过七大点排版思路，可以更好的运用在界面设计中，每个排版原则并不是独立的个体，他们之间是相辅相成的关系，比如大小离不开网格，也离不开对比，颜色等等，缺乏某些元素，那么界面就会缺失灵魂，设计产出质量并不好！
好了本期到这里结束，下期会继续和大家分享如何巧妙运用图形提高界面品质感和增强细节！
题图来自 Unsplash ，基于 CC0 协议
作品集需要如何准备？作品集中应该包含哪些内容？
简历可以让用人单位了解你的大致信息、工作经历、项目经历等，但是作品集可以反映UI设计师的设计水平以及能力。一个完整的作品集也和简历一样，应该有些基本内容，比如开头的介绍、结束语、至于中间最丰富的作品，它的展示也有顺序。你可以依据自己不同作品的质量、应聘岗位的业务方向，去调整作品集展示的顺序和展示比例。
一、作品集基础内容一个完整的作品集应该包含开始的自我介绍、作品展示、结尾的感谢。
1、开头页
一个作品集的开头就已经开始展示一个UI设计师的能力了，整个作品集的开始部分界面风格尽量统一。有些设计师会用简单的图片作为作品集的第一页，如下图所示。
图片来源：阿多比学院学生作品
有些设计师喜欢开门见山，第一页就包含有自己作品的元素、以及后面展示的内容的目录。
图片来源：阿多比学院学生作品
一般来说在作品集的开头还应该包含简单的自我介绍，包括姓名、性别、年龄、毕业院校、联系方式、照片等，然后展示工作经历和技能，工作经历不用像简历中写得这么详细。
图片来源：阿多比学院学生作品
在自我介绍完成之后，可以有个作品集的目录页，让企业更加清晰的了解你作品展示的顺序，作品目录中需要包含改作品集中作品的内容以及顺序。
图片来源：阿多比学院学生作品
2、作品集内容
作品集的内容是整个作品集的核心，里面可以选取自己优秀的作品去详细展示链肆。如果你有特别心仪的公司，为了增加你面试成功的概率，你可帆搜以依据公司的业务方向去调整自己作品集的内容和展示顺序。比如你应聘的公司是一个电商公司，你可以着重去展示自己电商设计的作品，将电商设计作品丰富化、或者有意识的放在前面展示。
作品集的作品数量不宜过多，因为内容过多，数量显得很繁杂，查看作品的人会找不到重点，找不到你的优势和亮点，所以作品集的作品一定要精，当作品数量不多的情况下一定要保证作品的质量。
3、结尾
在作品展示的最后，可以礼貌的表示感谢，提升企业对自己的友好度。注意结尾页的风格和开始的界面风格尽量保持一致哦。
图片来源：阿多比学院学生作品
二、作品集-作品
作品集的内容是整个作品集的核心，作品集的内容就是作品的展示与介绍。通过作品的展示与介绍让企业了解你的设计思路与设计能力。
UI设计的作品肯定也是有分类的，比如移动端设计、网页设计、电商设计甚至有些设计师还做过平面设计。不同的设计内容其展示的方式也有差别，那我们先拿一个移动APP的部分作品集内容去聊聊，设计作品我们可以怎样展示？
一个好的产品不仅要有美观的界面，还要能最大限度提升用户 *** 作的效率，通过色调影响用户的 *** 作习惯，用颜色或图形明确产品功能和产品内容的主次展示，降低用户 *** 作负担。所以为了让企业更清晰的了解你的设计思路，你可以选择依据设计流程去展示自己的作品。
一般来说，UI设计师会参与需求评审、理解PRD，用户调研、情绪板梳理等过程，主要目的让UI设计更了解产品，设计出更符合目标用户的 *** 作界面。我们都可以将我们参与的过程表现在作品集里，而不单单只是展示作品。
图片来源：阿多比学院学生作品
以上选取的音乐APP作品集的展示内容依次为：封面、设计理念、需求分析、竞品分析、设计准则、设计思路、信息架构、颜色\字体规范、图标设计、页面设计，在所有的设计中可以详细讲解设计思路。
产品定位：
简单介绍项目背景、产品定位可以让企业去判断你的设计符合你的产品需求。产品定位之后会有用户画像、竞品分析、设计理念等的展示。
图片来源：阿多比学院学生作品
展示设计思路和产品的信息架构：
依据需求整理出设计思路、产品的功能架构、输出原型设计，这样可以更直观的向企业展示产品设计思路与产品架构。
图片来源：阿多比学院学生作品
图片来源：阿多比学院学生作品
制定设计规范：
规范制定的展示侧面展示了UI设计师设计规范、色彩运用的设计基础技能。
图片来源：阿多比学院学生作品
展示产品图标设计：
图片来源：阿多比学态唤历院学生作品
页面设计：
页面设计的展示，可以拆分页面的功能模块去详细讲解，让企业明白你的设计思路。
图片来源：阿多比学院学生作品
图片来源：阿多比学院学生作品
图片来源：阿多比学院学生作品
当然除了依据流程去展示，我们也可以直接展示、分类展示。比如网页设计可以分为企业官网、电商站、后台、专题页等，平面可以分为VI、LOGO等。展示的方式多种多样，但是展示顺序一定要流畅且有序。
图片来源：阿多比学院学生作品网页
三、其他注意事项
1、作品集最好打包成PDF，页数控制到50~100页。
2、投递简历一定要附上作品集，最好可以有个作品集链接，方面查看，作品集的压缩包名字一定要有姓名。
3、如果作品集已经是上线项目，可以给面试官直接展示。
4、作品集中可以展示自己学习的作品，比如手绘、临摹，这样可以侧面反映自己的学习能力和持续提升的态度，但是注意作品一定要优秀。
5、如果实际项目不多，也可以选取一个自己想要优化的产品，去深入优化产品界面形成自己的作品集。
1、界面尺寸：1920-2000px带有底图必须那么大（无底图的1366-2000px）
2、版心：980-1220px
3、Banner高度建议870px；
4、分辨率72px
5、色彩模式RGB
6、按钮高度为文字字高的的2-2.5倍
7、字体
导航：14px
字体：宋体 微软雅黑
字号：12、14、16、18、20px
专题页字体建议是12、14px，电商主页建议：16、18、20px
8、焦点图高度：600px-700px
1、尺寸：730x320px
2、登录界面的字体：12px 宋体 字体样式无
3、文本框高度为文字字高的的2-2.5倍
4、头标与框高度为20px
1、企业占中颜色尽量控制在三种以内
2、背景色：70% 主色调：25% 强调色：5%
背景有底纹画布大小建为1920-2000px
背景无底纹画布大小建为1366-2000px
4、版心宽度 980px 或 1000px 左右
5、焦点图高度小于580px 底部坐标到580px
6、在做企业站中要使用统一字体：宋体（Banner图除外）
1、头部注册、登录：12px 宋体
2、导航：16 18px 仿粗 底色块高度为字高的2-2.5倍
下拉导航与导航为从属关系建议使用小一号字体14px
内容区域的文字一般分为标题和正文两种，可以选择统一字号，用仿粗区分
文字区域到表框的边距一般为10px-20px
版权信息文字用12px
1、1寸：2.5x3.5cm 5寸：12.7x8.9cm
证件照拼含族弊版建议画布大小为12.7x8.9cm
横版：90x54mm 90x55mm
竖版：50x90mm 45x90mm
圆角名片：85x54mm
折叠名片尺寸不固定
使用材质：纸张（大于200g）
四色印刷：CMYK 出血值1mm
名片的主要内容：公司名称 LOGO 姓名 职务 联系方式 业务范围
1、名片边缘留足5-10mm距离
2、logo大小不能小于1cm
3、名片中最小的文字不能小于6px
1、将所有文字转曲（交与客户源文件）ctrl+a- ctrl+shift+o
2、交与印刷厂PDF格式，不保留AI编辑功能
3、加入出血值
1、x展架尺寸：60x160cm 80x180cm
易拉宝：高200cm 宽80 90 100 110 150cm 常见的为80*200cm
展架、易拉宝输出方式为写真机，写真机输出幅面一般为：90 120 150cm
易拉宝输出材质：相纸（背面无胶）
展架：背胶纸（背面有胶） 装裱在KT版上
输出方式：写真：1软件可以使用ps软件（黑色为四色黑）
2、颜色模式可以为RGB也可以用CMYK
3、文档建立尺寸和实际尺寸一致，不需要加出血
4、展架易拉宝分辨率为72或80，特殊情况可以使用300（封面）
5、查看画布效果时，缩放比例为100%
6、使用黑色必须为四色黑（CMYK都为100），不能使用单色黑，使用单色黑，制作出的易拉版展架会有条纹谈族。
7、背景的过度使用弱对比：色相H接近或相同，饱和度S差值在30以内或者明度B差值在30以内
8、强对比（背景与要突出的产品或文案）：色相H相反，饱和度S差值在70以内或者明度B差值在70以内。
1、四色印刷----CMYK(专色印刷要出专色版)
2、成品尺寸：制作一个90*120的三折页（从印刷厂制作完成后并且折叠后的尺寸）
2、展开尺寸：宽度 90+90+90=270 高度210
2、制作尺寸：展开尺寸+出血
2、大16K：210*285 毫米 成品尺寸 ：95*210或90*210 正度16K：185*260毫米
iPhone：320x480 穗弯 640x960 640x1136 750x1334 1080x1920
Ipad:1024x768 2048x1536
Android:482x800 720x1280 1080x1920
Ipad、iPhone:状态栏：40px
导航栏：88px
主菜单栏：98px
内容区域：910px
状态栏：50px
导航栏和主菜单栏：96px
内容：1038px
1、iphone英文字体为Helvetica,中文为华为细黑，冬青黑体，不用微软雅黑。
2、可点击对象的区域：尺寸不要小于44*44px
六、智能电视
分辨率模式：1920×1080、1280×720 我们常用还是1920×1080的分辨率进行设计
颜色与分辨率
1、不要使用纯白色（#FFFFFF）可采用#F0F0F0
2、高饱和度颜色尽可能少用，会显示失真
3、大范围渐变会导致带状显示，无法达到平滑过渡
4、在界面边缘最好留出10%左右的空间（54PX）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）