产品图片排版布局

前端拿到UI设计的图 开始布局设计的方法布局是页面构成的前提，是后续展开交互和视觉设计的基础。设计者在选择布局之前，需要注意以下几点原则：明确用户在此场景中完成的主要任务和需获取的决策信息。明确决策信息和操作的优先级及内容特点，选择合理布局。一、常用布局网站展示页、Dashboard、列表页、表格页、详情页、表单页。在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局。1、网站展示页网站展示页（即官网页）通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图，简短的产品介绍信息，以及用户登录入口等。在设计时我们建议：明确你要传达的内容，保持简短而清晰的文案。搭配清晰、直观的产品图片，有助于加深用户对产品的理解和记忆。2、控制台页控制台页（Dashboard）集合了大量多样化的信息（如数字，图形，文案等），需要一目了然地将关键信息展示给用户。因此，如何将庞大复杂的信息精简清晰地展示出来，是设计此类页面的关键。在设计时要注意以下几点：按照信息的重要程度来组织页面排版，突出展示关键信息。将数据可视化，让用户可以直观地了解关键信息及整体情况。合理地使用颜色及栅格排版，减轻用户的视觉负担。3、列表页列表设计是并列式展现信息，方便用户能快速查看基本信息及操作。因此，信息的「可阅读性」及「可操作性」是设计的关键。在设计时要注意以下几点：根据用户需求来定义信息展示的等级，仅展示关键信息及操作。当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。4、表格页表格作为多维信息展示的载体，使复杂的信息更易于阅读与理解。它的易读性，便捷性，易操作性对产品的体验起着举足轻重的作用。因此，我们在设计时要注意以下几点：构造清晰的表格布局，有利于提升读者对信息的接收速度和理解程度。更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。当界面需要在一个很大的多纵行表格中展示数据，或每一横列数据有多行信息时，可以巧妙地运用横向或纵向斑马条，使得信息条目之间更为分明，视觉上更易区分。5、详情页详情页面一般会承载大量的基本信息，扩展信息，或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息，提高决策效率。这设计时有以下几点需要注意：清晰的排版格式，易于阅读的文本大小及间距，都是影响用户获取信息效率的关键因素。图文搭配比单文本展示信息能更好地提高用户的理解。6、表单页表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程：考虑用户的浏览方式，提供清晰的用户视线浏览路径；内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）；标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰；醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。二、栅格我们通过定义网格、间距来呈现产品布局的最佳效果，设计师在设计时可按（移动：『页面总宽 750px，内容区 750px』，PC：『页面总宽 1440px，内容区 1208px』）来设定，并在此基础上以 12等分的栅格来划分整个设计建议区域。建议横向排列的区块数量最多四个，最少一个，以保证视觉层面的舒适感。注：图中灰色部分为栅格的列，定义为『Column』，白色部分为栅格的间隔，定义为『Gutter』。栅格公式：我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。网站展示页和 Dashboard 的 Gutter 宽度为 24px。列表、表格、详情和表单页面的 Gutter 宽度为 16px。

排版的难处在于，我们不是根据已经设计好的版面来填充内容（套模板），而是要根据具体的内容来布局版面，比如版面中的图片有时候是一两张，有时候是十张八张，由于构成元素的不同，导致采用同样的构图、版式、形式往往是行不通的，所以葱爷今天的这篇文章就是要来分享，在不同情况下有哪些图片排版技巧，平铺即把图片铺满整个版面，这种处理方式多用于封面设计; 四周留白即图片要比版面小，并让其四周都留出空白，这里也分两种情况，一是图片位于版面正中央，图片周围的留白是对称的，这种效果类似于相框，常用于封面设计。 一条边出血即把图片的一条边对齐边界，这么处理有点冲破束缚的意思，可以增加图片的想象力和版面的设计感。 三条边出血这么做会把版面分成两部分，一部分为色块，一部分为图片，在排版时我们还可以通过文字、色块或颜色把这两个部分联系起来。拆分,即把一张图片拆分成几份，然后隔开一点排列，这么做比单独放一张图片会更有设计感和趣味性，风景类图片适合这么处理。跨版 即在画册设计中，让图片同时占据两个版面，当在一个跨版中只有一张图片时，如果只把图片排在某一半版中，那么另一半版就容易单调，所以在这种情况下通常会使用跨版，而且图片放大后会更有张力，还能把左右两个版面关联起来。 统一大小对齐排版在一些作品集或产品画册中常用到此排法，视觉流程简单、清晰。统一大小错位排版 比对齐排版更有动感，且由于图片不多，所以也不会显得乱。 一大一小排版,这种排版对比鲜明、更有张弛，可以在一个跨版中使用，也可以是在某一P中使用，大小统一对齐排版,这种排法比较整洁，但缺少变化，适合用于目录页或者产品和人物介绍。大小不统一对齐排版,这种排法会比前一种更灵活一点。适合利用网格工具来辅助排版。 图片与色块组合排版,图片与色块组合在一起排版既不会像只有图片那么单调，还可以利用色块排文字。不过注意色块的颜色不要太多，且颜色最好来自图片。错位排版,即把相连两张图片刻意错开，或者把图片与文字的位置互换，这么做可以有效搭配图片完全对齐的单调，且由于有一定的规律，所以也不会对视觉流程造成太大影响把图片拼成特定的形状,这种排法适合图片比较多的情况，这么做可以避免图片太多而显得混乱，而且因为拼成的形状要与设计需求相关，所以会显得更有创意 按照某一路径排版,这种排法跟前一种一样，适合数量较多的同类图片使用，可以避免图片拍得太过分散，如果不统一图片的大小和方向，效果会比较活泼但不规范，适用于照片墙和儿童画册的。 一大多小排版 如果在版面中分开排列大小差不多的多张图片，那么该版面就会缺乏重点且没有张力，而如果把其中一张图片放大，与其他图片形成鲜明的大小对比，就可以有效解决这一问题。自由排版,即大小不需要统一、图片与图片之间也不一定要严格对齐，效果比较灵活，设计感较强，常用于杂志排版中。