所有东西都堆在屏幕上，字号、行距都很小，段与段之间有一些间隔，但是也不是很大。这么布局实在是太难看了。如果你想设计出精美的UI，那就需要留出更多空白的空间。

留白空间、HTML 和 CSS

　　如果你和我以前一样，习惯用 CSS 来调整布局，那你最好改掉这个坏习惯，因为CSS 默认是没有留出空间的。试着把空白当作默认状态，在空白页面添加各种元素。从没有修饰过的 HTML 开始，先做好内容，然后再做排版。

　　下图是 Piotr Kwiatkowski 设计的一个音乐播放器。

 

　　请注意左侧的菜单栏。字号是 12px，行间距有文字的两倍高。再看看列表的名称，“PLAYLISTS”和下划线之间有 15px 的空白，播放列表名称之间还有 25px 的间距。



　　在顶部导航栏也有很大的空间，搜索图标和“Search all music”占到了导航栏高度的 20%。

 

　　留白的空间收到了良好的效果，不同的元素有机的组合在一起，使得这个页面成为最好的音乐播放器 UI 之一。

　　大量的空白可以把混乱的界面做得简洁美观，比如这个论坛：

 

　　或者维基百科：

 

　　很多人认为在维基百科的这个新页面上，很多功能找不到了，但是你不能否认这是学习页面设计的一个好案例。

　　在行之间留出空间。
　　在各个元素之间留出空间。
　　在各组元素之间留出空间。
　　分析一下哪些是可行的。

法则4：学会在图片上呈现文字

　　在图片上优雅地呈现文字并不容易，这里给出6种方法。

　　如果你想要成为好的 UI 设计师，你必须学会在图片上美观地呈现文字。优秀的设计师在这方面做得都不错，而水平较低的设计师往往在这方面也比较差，甚至完全不会。在学习了这部分以后，相信你会有很大的提升。

方法0：直接在图片上放文字

　　我很犹豫要不要讲这种方法，因为应用起来十分困难。不过直接在图片上放文字从技术上来说也是可行的，下面这个网站的首页就很不错，所以说说也无妨。

　　直接在图片上放文字时，有几点需要非常注意：

　　图片应该比较暗，而且颜色不能有太大的反差。
　　文字必须是白色的，我知道你也能找到用其它颜色的案例。但是我觉得，你最好还是用白色。
　　在不同屏幕，不同尺寸的窗口调试页面，确保各种情况下文字都是清晰、易于辨识的。

　　上面这 3 个方面调整好就 OK 了，不要再做其它处理。

　　我自己从来没有在任何专业的项目上直接把文字放在图片上，这种方法是可行的，也能做出酷炫的效果，但还是小心点。



方法1：暗化整张图片

　　可能在图片上放文字最简单的方法就是暗化整张图片，如果原图颜色不够深，你可以用半透明的黑色在上面覆盖一层，比如下面这个案例就加了一层不透明度 35% 的黑色。



　　如果你直接放原图，底色太亮，和文字的反差不够明显，看不清文字。类似的方法同样适用于小图。



　　加一层黑色是最简单、普适性最强的。当然你也可以用其它合适的颜色，比如这样：

 

方法2：给文字加个框

　　这是一种简单有效的方法。在白色文字下方加上一个略透明的黑色方块，就可以放在各种各样的图片上了，而且显示效果非常清晰。



　　当然，你也可以放别的颜色，只是需要小心谨慎。


推荐阅读：看过各大车展车载交互系统，后装车机更有戏了
更多讨论内容请点击：http://bbs.carcav.com/read-htm-tid-958420.html