移动端界面的版式设计原理.ppt

05 视觉心理的运用 HOW TO USE PHD? 在观看事物时，往往会产生一些不同的视觉心理，例如两个等宽的正方形和圆形放在一起，你一定会觉得正方形更宽。在版式设计中同样大量运用这些科学视觉方法对用户进行视觉上的引导，也能让设计师快速找到一些排版布局的方法。 首先最常见方法是的是灵活运用黄金分割比，文本与线段的间隔，图片的长宽比等地方都可以通过黄金分割比快速的设定。比如通栏高度的设定等等。 在界面排布中，往往圆角和圆形比直角更容易让人接受，更加亲切。 直角通常用在需要更全面展示的地方，例如用户的照片，唱片封面，艺术作品，商品展示等地方。在个人类的feed或者头像，板块的样式等使用圆角会有更好的效果。 在全局页面的排版中也要避免单调，增加节奏感。 在上文我也提到过排版要有轻重缓急之分，这样让用户在观看的过程中不会感到冗长，无趣。 图片也是有不同的色调的，通过蒙版的方法可以控制这种色调。 如果选择比较明亮的色调可以减轻这种对用户的压迫感，选择比较暗的色调可以让整个画面更沉稳，内容显示更为清晰。  06 去设计化~ NO DESIGN? 最后这段不是版式设计原理，更像是一种设计的心境。  古人在写诗的时候有一种手法叫白描，原拓哉也曾强调“最美的设计是虚无”，在界面设计中同样追求一种“让用户感受不到设计”的境界。每一条线/每一行文字/每一个按钮的存在都是都有它存在的理由。  它不加无意义的修饰、不须陪村和烘托，让用户更关注内容的主体，弱化对视觉的认知。甚至于用户在滑动时看到一个按钮或一行文字也感觉这是理所当然的存在。“菩提本无树，明镜亦非台”，做设计和做人一样，一切有为法皆如梦幻泡影，不要注重形式才能明心见性。 图中的例子在某些地方处理得也不是那么自然，但是我认为以上的例子是有向“让用户感知不到设计”的方向上走的，没有完美的设计，只有努力变的更好的设计。最后，做好设计非一朝一夕，理解设计也非一朝一夕，希望各位善于发现美，也善于理解美。 移动端界面中的版式设计原理 THANKS 谢谢 移动端界面中的版式设计原理 Layout Design 我总觉得 页面不太好看 但是我 又说不出来 你觉得这好看？ 你的审美 要加强啊 我不懂设计， 但是我就是觉得 不协调 说不出 哪里好 也说不出 哪里不好 其实设计本身就是一门理性的学科，审美因人而异，只有言之有理的设计才能够说服别人。当设计师拿到产品的原型开始做设计时，如果只是单纯的按照原型进行而不考虑任何规则，那么很多时候就会产生一些不协调的结果。设计完之后产品不满意，自己也不满意。  在UI设计中其实也存在大量的版式设计原理，如果产品和设计都能对版式设计有一定的了解，那么设计师拿到原型的时候，评审设计输出稿的时候大家都能更好地理解对方的设计。以下我总结了几种常见的版式设计原理，是工作当中做出良好视觉效果的前提。 01 信息的排布 HOW TO MAKE A BERUTIFUL UI? 对任何信息进行排布的设计的四大原则 对齐 重复 亲密 对比 对齐除了能建立一种清晰精巧的外观，还能方便开发的实现。基于从左上至右下的阅读习惯，移动端界面中内容的排布通常使用左对齐和居中对齐，表单填写的输入项用右对齐。 设计和做其他事情一样，也要有轻重缓急之分，不要让用户去找重点/需要注意的地方，应该让用户流畅地接收到我们想要传达的重要的信息。  重复和对比是一套组合拳，让设计中的视觉元素在整个设计中 重复出现既能增加条理性也可以加强统一性，降低用户认知的难度。 那么在需要突出重点的时候就可以使用对比的手法，例如图片大小的 不同或者颜色的不同表示强调，让用户直观地感受到最重要的信息。 在排布复杂信息的时候，如果没有规则地排布那么文本的可读性就会降低。组织信息可以根据亲密性的原则，把彼此相关的信息靠近，归组在一起。 如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于减少混乱，为读者提供清晰的结构。 在设计表达的时候，一定要考虑内容的易读性。适当使用图形可以增加易读性和设计感，而且图形的理解比文字更高效。  那些用文字方式表现时显得冗长的说明，一旦换成可视化的表现方式也会变得简明清晰，可视化的图形可以将说明/标题/数值这种比较生硬的内容，以比较柔和的方式呈现出来。 02 图片的使用 HOW TO USE PICTURE? App的页面结构和文本确定之后，就要开始安排图标/按钮/图片的安排了，这时页面也就从单纯文本的“阅读”型结构调整为“观看”型结构，对于页面的易读性以及页面整体的效果会产生巨大的影响。 页面中图片所占的比率叫做图版率，通常情况下降低图版率会给人一种宁静典雅、高级的感觉。提升图版率会有充满活力，使画面有富有感染力的效果