Metro UI 的设计感悟

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

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

一、提取中心词和变量

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

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

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

三、善用空白

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

四、善用对齐

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

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

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

六、抽取内容要素

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

 七、减少错误的设计

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

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

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

九、方块图标并不美丽 

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

十、装饰和背景

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

posted @ 2012-01-04 14:12  诺贝尔  阅读(1085)  评论(0编辑  收藏  举报