作为一名产品经理,这些版式策画原理你需要了解.pdfVIP

作为一名产品经理 ，这些版式设计原理你需要了解 “我总觉得页面不太好看 是我又说不出来” “我不懂设计 ， 是我就是觉得不协调” “你觉得这好看 ？你的审美要加强啊” 这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里 不好 ，相信很多人也有过感同身受的无奈。 其实设计本身就是一门理性的学科 ，审美因人而异 ，只有言之有理的设计才能够说服别人。当设计 师拿到产品的原型开始做设计时 ，如果只是单纯的按照原型进行而不考虑任何规则 ，那么很多时候 就会产生一些不协调的结果。设计完之后产品不满意 ，自己也不满意。在UI设计中其实也存在大量 的版式设计原理 ，如果产品和设计都能对版式设计有一定的了解 ，那么设计师拿到原型的时候 ，评 审设计输出稿的时候大家都能更好地理解对方的设计。以下我总结了几种常见的版式设计原理 ，是 工作当中做出良好视觉效果的前提。 信息的排布 对任何信息进行排布的时候 ，首先必须要掌握的是对齐/重复/亲密/对比 ，贯穿设计的四大原则。 对齐除了能建立一种清晰精巧的外观 ，还能方便开发的实现。基于从左上至右下的阅读习惯 ，移动 端界面中内容的排布通常使用左对齐和居中对齐 ，表单填写的输入项使用右对齐。 设计和做其他事情一样 ，也要有轻重缓急之分 ，不要让用户去找重点/需要注意的地方 ，应该让用户 流畅地接收到我们想要传达的重要的信息。重复和对比是一套组合拳 ，让设计中的视觉元素在整个 设计中重复出现既能增加条理性也可以加强统一性 ，降低用户认知的难度。那么在需要突出重点的 时候就可以使用对比的手法 ，例如图片大小的不同或者颜色的不同表示强调 ，让用户直观地感受到 最重要的信息。 在排布复杂信息的时候 ，如果没有规则地排布那么文本的可读性就会降低。组织信息可以根据亲密 性的原则 ，把彼此相关的信息靠近 ，归组在一起。如果多个项相互之间存在很近的亲密性 ，它们就 会成为一个视觉单元 ，而不是多个孤立的元素。这有助于减少混乱 ，为读者提供清晰的结构。 在设计表达的时候 ，一定要考虑内容的易读性。适当使用图形可以增加易读性和设计感 ，而且图形 的理解比文字更高效。那些用文字方式表现时显得冗长的说明 ，一旦换成可视化的表现方式也会变 得简明清晰 ，可视化的图形可以将说明/标题/数值这种比较生硬的内容 ，以比较柔和的方式呈现 出来。 图片的使用 app的页面结构和文本确定之后 ，就要开始安排图标/按钮/图片的安排了 ，这时页面也就从单纯文 本的“阅读”型结构调整为“观看”型结构 ，对于页面的易读性以及页面整体的效果会产生巨大的影响。 页面中图片所占的比率叫做图版率 ，通常情况下降低图版率会给人一种宁静典雅、高级的感觉。提 升图版率会有充满活力 ，使画面有富有感染力的效果。 实际中也跟选取图片的元素/色调/表达出来的情感有关系 ，合适的图片也能散发出整个应用的气质 ，直接传达给人“高级” ，“平民化” ，“友好”等不同的感觉。 在内容比较少 是又想提高版面率的话可以采用一些色块 ，或者抽象化模拟现实存在的物件 ，例如 电影票 ，书本纸张 ，优惠券 ，便签等的效果 ，使界面更友好也降低空洞的感觉。通过这种方式也可 以改变页面所呈现出的视觉感受 ，只是这种方法最多改变页面的色调/质感 ，并不能改改变“阅读”内 容的比例 ，这点是需要注意的。 颜色的使用 不同的颜色可以带给用户不同的感觉 ，这点应该是常识。在移动端界面中通常需要选取主色 ，标 准色 ，点晴色。移动端与网页端稍微不同 ，主色虽然是决定了画面风格的色彩 是往往不会被大面 积的使用。通常在导航栏/部分按钮/ico n/特殊页面等地方出现 ，会有点晴 ，定调的作用。统一的主 色调也能让用户找到品牌感的归属 ，例如网易红/腾讯蓝/京东红/阿里橙等等。标准色指的是整套移 动界面的色彩规范 ，确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/按钮/ico n等 地方 ，通常起强调和引导阅读的作用。 主色在选择上可能不止一个 ，点睛色通常也由两三个颜色组成 ，标准色更是一套从强到弱的标准群 ，那么在点晴色与主色 ，主色与主色之间的选择上便有不同的方法。第一种是邻近色配色(色相环上 邻近的颜色) ，这种方法比较常用因为色相柔和过渡也非常自然。 第二种是同色系配色(色相一致 ，饱和度不同) ，主色和点晴色都在统一的色相上 ，给用户一种一致化 的感受。 第三种是点亮色配色 ，主色用相对沉稳的颜色 ，点晴色采用一个高亮的颜色 ，起带动页面气氛 ，强 调重点的作用。 第四种是中性色配色 ，用一些中性的色彩为基调搭配