justinlam：“我总觉得页面不太好看但是我又说不出来”，“我不懂设计，但是我就是觉得不协调”，“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好，相信很多人也有过感同身受的无奈。
其实设计本身就是一门理性的学科，审美因人而异，只有言之有理的设计才能够说服别人。当设计师拿到产品的原型开始做设计时，如果只是单纯的按照原型进行而不考虑任何规则，那么很多时候就会产生一些不协调的结果。设计完之后产品不满意，自己也不满意。
在UI设计中其实也存在大量的版式设计原理，如果产品和设计都能对版式设计有一定的了解，那么设计师拿到原型的时候，评审设计输出稿的时候大家都能更好地理解对方的设计。以下我总结了几种常见的版式设计原理，是工作当中做出良好视觉效果的前提。
对齐除了能建立一种清晰精巧的外观，还能方便开发的实现。基于从左上至右下的阅读习惯，移动端界面中内容的排布通常使用左对齐和居中对齐，表单填写的输入项使用右对齐。
设计和做其他事情一样，也要有轻重缓急之分，不要让用户去找重点/需要注意的地方，应该让用户流畅地接收到我们想要传达的重要的信息。重复和对比是一套组合拳，让设计中的视觉元素在整个设计中重复出现既能增加条理性也可以加强统一性，降低用户认知的难度。那么在需要突出重点的时候就可以使用对比的手法，例如图片大小的不同或者颜色的不同表示强调，让用户直观地感受到最重要的信息。
在排布复杂信息的时候，如果没有规则地排布那么文本的可读性就会降低。组织信息可以根据亲密性的原则，把彼此相关的信息靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于减少混乱，为读者提供清晰的结构。
在设计表达的时候，一定要考虑内容的易读性。适当使用图形可以增加易读性和设计感，而且图形的理解比文字更高效。那些用文字方式表现时显得冗长的说明，一旦换成可视化的表现方式也会变得简明清晰，可视化的图形可以将说明/标题/数值这种比较生硬的内容，以比较柔和的方式呈现出来。
App的页面结构和文本确定之后，就要开始安排图标/按钮/图片的安排了，这时页面也就从单纯文本的“阅读”型结构调整为“观看”型结构，对于页面的易读性以及页面整体的效果会产生巨大的影响。页面中图片所占的比率叫做图版率，通常情况下降低图版率会给人一种宁静典雅、高级的感觉。提升图版率会有充满活力，使画面有富有感染力的效果。
实际中也跟选取图片的元素/色调/表达出来的情感有关系，合适的图片也能散发出整个应用的气质，直接传达给人“高级”，“平民化”，“友好”等不同的感觉。
在内容比较少但是又想提高版面率的话可以采用一些色块，或者抽象化模拟现实存在的物件，例如电影票，书本纸张，优惠券，便签等的效果，使界面更友好也降低空洞的感觉。通过这种方式也可以改变页面所呈现出的视觉感受，只是这种方法最多改变页面的色调/质感，并不能改改变“阅读”内容的比例，这点是需要注意的。
不同的颜色可以带给用户不同的感觉，这点应该是常识。在移动端界面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同，主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范，确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/按钮/icon等地方，通常起强调和引导阅读的作用。
主色在选择上可能不止一个，点睛色通常也由两三个颜色组成，标准色更是一套从强到弱的标准群，那么在点晴色与主色，主色与主色之间的选择上便有不同的方法。第一种是邻近色配色(色相环上邻近的颜色)，这种方法比较常用因为色相柔和过渡也非常自然。
第二种是同色系配色(色相一致，饱和度不同)，主色和点晴色都在统一的色相上，给用户一种一致化的感受。
第三种是点亮色配色，主色用相对沉稳的颜色，点晴色采用一个高亮的颜色，起带动页面气氛，强调重点的作用。
网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...
随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...
每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...
今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...
你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...
@Mockplus原型设计 ：许多人可能认为搜索框不需要设计，毕竟这只是两个简单的元素。然而，在内容繁杂的网站中，搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时，他们...
本文以微信首页为例，用三个维度系统地解析一个产品的交互设计的方方面面。 首先我们来做个互动，请各位看官打开自己的微信，然后看到你的微信首页： 然后仔细观察看到了什么...
刻板印象有好有坏。在合适的场景、时间、项目中，去最大化它的积极作用，尽量避免它的消极作用，才能真正的平衡设计、工作，甚至生活。 一直在看奇葩说，听到很多次的一个词叫...
在做表单设计时，究竟该选用哪种控件，只要是根据情况而定的，无论哪种选择都有其优缺点，这就要结合选项数目、空间大小等因素，选择一种形式，可以最大程度的方便用户使用。...
编者按：在过去的1年当中，我过翻译过超过50 篇源自软件设计师和用户体验设计师 Nick Babich 的文章。现在他不仅是用户体验博客UX Planet 的专职编辑，而且为Adobe 的 Medium专栏以及著名的...