Metro UI 的设计感悟

metro是火车的意思，这个UI借鉴了火车站指示牌的思路，也就是希望提供一个简明的信息给用户。

但是metro绝对不是简单化信息就可以的，简单化会让UI显得很简陋。如何在一块空白中，建立足够简洁而又不过于简陋的UI，这是Metro需要尤其注意的。

一、提取中心词和变量

在一个小格子里面要想显示完整的信息那是不可能的，这就需要我们提供用户能够识别，而又最有意义的信息。

二、设计界面先规划内容和流程

美包含很多要素，但是用户界面的美学一个关键的地方就是效率，包括易于识别，易于查找，快速做决定等用户体验工程学方面的内容。第一点是先划分内容的层次，标题和内容要区分开来，不同组别的内容要区分开来，从左到右，从上到下，同类内容保持设计上的一致，不同类内容形成足够的反差。

三、善用空白

空白并不是多余的内容，要将空白也做美学考虑，做设计的元素。比如标题和内容可以借助空白来隔离。

四、善用对齐

对齐是看不到的联系，如果想要同类元素有关联，就把他们对齐一下。

五、用图形元素代替文字元素

图形可以在有限的空间内，起到很好的辨识效果，如果光是一堆文字，可能就很难提取用户需要的内容。

六、抽取内容要素

用户界面和内容的一个显著差别是，内容是描述性的，而用户界面是辨识和操作性的，用户界面不能表达具体的详细的内容，甚至不能告诉你这个按钮代表什么意思，但是他对于有一定操作基础的人来说是最容易辨认和操作的。这就需要用到抽取内容骨干的手法，第二是要建立统一的操作模式，让用户可以举一反三。

七、减少错误的设计

设计要让用户明白，在于它严格的一致性，如果你做10件事，却有两件是错的，对用户的影响就大大超过这两件事本身的比例。如果一个图片不能代表文字，那就不要用。如果标题和内容应该区分出来，就不要让他们偶尔粘在一起。不要让不同内容使用相同的样式，不要让不同内容使用相同的对齐，不要无缘无故留出一大堆空白，不要牛皮藓的设计。不高明的设计，比花俏而错乱的设计要好得多。

八、在有限的空间里面尽量塞多点东西

眼睛总比手快。一个页面能展现足够多的东西给用户，就比用两个页面来展示要好得多。不要害怕用小字体，不要害怕用户看不清楚，不要害怕内容过多。虽然很多人批评门户网站过于臃肿，但是这对用户来说其实是友好的，单纯为了设计上的美观而忽略用户需求是不恰当的。

九、方块图标并不美丽

人都喜欢曲线，喜欢圆滑的东西，方块线条确实不讨好用户。用方块是为了建立一个区域，一个分组，用来对内容进行良好的分离和对齐（因为有边界，而圆形没有明显的边界），如果用这个建立图标，而不是用来展示实时和互动的内容，那就是浪费了。在建立足够辨析度（图标）的基础上，必须应该提供实时信息。方块内的设计是一个难题。

十、装饰和背景

光有上面还不能突出“品味”，要想让你的UI有品味，必须要研究装饰和背景。有人喜欢木纹，有人喜欢斜纹，有人喜欢花纹，有人喜欢渐变色，有人喜欢金属字，镜像字，水晶字，这些装饰效果一上场，立刻显出你独特的艺术品味。但是，不管你是什么品味，都应该遵从上面的设计原则。

转载于:https://www.cnblogs.com/Nobel/archive/2012/01/04/2311945.html