如何搞定界面设计之构图篇.pdf

如何搞定界面设计之构图篇 编者按 ：想成为一个合格的UI设计师 ，光会画图标可 行 ，今天360的@Micu设计小哥从头帮你补 上版式这一课 ，分享他的界面构图三板斧 ，此外 ，你还能学会如何用设计语言解构画面 ，这可是设 计师的必备职业能力呦 ！ “人家设计得真好 ！”可是好在什么地方呢 ，却说 出来。这是阻挡你成为优秀设计师的一大障碍。 设计是我们的本行 ， 会用设计语言来解构画面 ，是说 过去的。 移动互联网设计发展到今天 ，有很多传统的设计规律可以遵循 ，也提出了新的挑战。因为手持设备 屏幕较小 ，如何在有限的页面内呈现或引导有效信息 ，又 显得杂乱臃肿 ，考验着设计师的能力。 为什么有的主题或A pp界面就那么舒服 ，那么清新 ，那么有情怀 ？里面蕴含着哪些最基础的版式设 计理念 ，让我们一块梳理梳理 ，给初入UI设计的同学做个参考。 今天和大家讲讲构图。 构图版式三板斧 问题一 ：为什么要讲版式设计 ？有必要么 ？ 就以我刚入行UI设计失败经历为鉴吧 ，那时候 ，一拿到需求就马上开始设计 ，根本就 管什么版式 ，结果设计出来方案总是很别扭 ，显得特别乱 ，往往被扣 上“风格 统一”“用户体验差”的帽子。最开 始我也是说服 了自己 ，觉得别人 理解自己的作品。现在想想确实当时存在问题。UI设计必然离 开设计师的天 马行空 ，但是它毕竟是要面向大众市场 ，做成全世界只有自己能理解的孤品有什么 意义呢 ，UI里的“用户体验”又体现在什么地方呢 ？而这样的设计又反过来阻碍 了你的设计生涯 ，长 期的失败设计很容易带来挫败感和麻木感。 尤其是作为初入行的UI设计师 ，更有必要学习一些版式设计思路。所谓创新 ，也仍然需要在了解已 有的好设计基础之上进行 ，这里说这些 是让你生搬硬套 ，是让你站在前人的肩膀上看得更远。 问题二 ：为什么一开始就要构图呢 ？ 设计和绘画一样 ，对需求和内容进行分析 ，采用适当的构图可以化繁为简 ，提高设计效率。在尝试 比较多种构图后 ，设计师的思路会更加明确。期间耗费的时间成本最低 ，可以反复进行调整 ，直到 找到最为合适的构图方式再往下进行细化 ，添加元素 ，丰富画面。 一个项目给设计师的时间是有限的 ，我们核心重点在于弄清楚产品的功能核心和卖点 ，把它们凸显 出来 ，最终让用户获得更为舒服的体验。而杂乱无章的堆积 会显得非常的糟糕 ，甚至有时候 ，用户 会因为找 到自己想要的东西而马上流失 ，留下非常 好的印象。通过前期构图 ，可以节省时间 ， 让设计更有条理。 问题三 ：构图 ，会限制设计的 造力吗 ？ 会的。 设计的痛苦莫过于“没有思路”和“漫无边际” ，这两者都源于需求分析 够 ，同时也与事先没有做好构 图工作有关。构图为设计提供了明确的尝试方向 ，甚 至通过 同的构图可以产生的交互效应 ，达到 意想 到的效果。限制创造力的问题 要担心 ，因为构图只是一个框架 ，同类型的构图完全可以做 出 一样的风格。虽 然设计构图结构相同 ，但设计的表现方式和元素 同 ，仍然能够塑造出 同的 设计赶脚。灵活运用构图和布局更能让你把设计集中在元素和产品特色上。 废话 多说 ，下面我将和大家介绍以下几种在界面中常用的构图方法 ： 九宫格构图 圆心点放射形构图 三角形构图 SF字形构图 一、九宫格网格构图 这种版式主要运用在分类为主的一级页面 ，起到功能分类的作用。 通常在界面设计中 ，我们会利用网格在界面进行布局 ，根据水平方向和垂直方向划分所构成的辅 助线 ，设计会进行得非常顺利。在界面设计中 ，九宫格这种类型的构图更为规范和常用 ，用户在使 用过程中非常的方便 ，应用功能会显得格外的明确和突出。 九宫格给用户一目了然的感觉 ，操作便捷是这种构图方式最重要的优势。 九宫格看似简单随意 ，用好了同样能呈现出奇妙的效果。 灵活运用九宫格辅助线区分出来的方块。在有规律的设计方法中找突破 ，做设计一定要注重这一点 ！ 在九个方块分配的时候 ， 一定要一个格子对应一个内容 ，完全可以一对二 ，一对多 ，打破平均分 割的框框 ，增加留白 ，调整页面节奏 ，或突出功能点或广告。各个方块的 同组成方式 ，页面的效 果也会产生无数的变化。 我们可以看出这样的版式 ，同样可以使界面变得非常的灵活 ，内容简单 ，信息明了。 二、圆心点放射形构图 生活中 ，最为常见的就是圆形了 ，眼睛是圆的 ，太阳是圆的 ，碗也是圆的 ，天也是圆的。在界面设 计中圆的运用可谓是点睛之笔。 圆是有圆心的 ，在界面中 ，往往通过构造一个大圆来起到聚焦、凸显作用。 放射形的构图 ，有凸显位于