在用户界面设计方面的竞争多半是围绕着如何制作出有吸引力、实用、灵活的用户界面而展开的。在基于浏览器的应用中进行界面的设计则是一项更加需要技巧的工作,因为我们的客户端总是丰富多样而又难以准确预测。幸好,Silverlight 继承了 WPF 中灵活性的界面设计的特点。
Silverlight 中使用 layout model 进行布局的管理,我们将所有的元素都放在一个容器 Container 中。每个容器都有自己的界面逻辑,比如 stackpanel、grid、canvas等。我们甚至可以创建具有自定义逻辑的容器。所有的容器都从抽象类 System.Windows.Controls.Panel.class 继承而来。Panel 类的层级关系如下图:
Panel 类有 Background 和 children 这两个公共的属性,这是布局开始的第一步,在 silverlight 中,最 主要的 panel 有:stackpanel、grid、canvas。这几个类我们可以在 System.Windows.Controls 中找到。Stackpanel 一般用来做水平或者垂直的排布;grid 通过行和列来布局元素,基本上就是表格布局;canvas 利用绝对的坐标来实现定位。一个典型的 silverlight ,一般是采用 grid 来进行布局,其中还可以嵌套其他的基本布局元素。
需要改变 panel 的background 属性时,我们多数会想到采用一个表示“颜色”的对象,但是 silverlight 采用了一种更为灵活的方式,brush 对象,这样就可以提供“纯色”(Solid Color)、“线性渐变”、“圆形渐变”这样的颜色效果,brush 对象存在于 System.Windows.Media 中。
例如,我们可以用一句话来改变当前 grid 的背景。
LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
布局元素的一些属性
背景: Background
改变背景的方法有三种,一种通过之前示例的写 code 的方式;另外一种是直接在元素上添加 background= "#aabbcc" 这样的方式;最后一种是利用 <Grid.background></Grid.background>这样的标签必合起来,中间可以添加较为复杂的背景变化。
边框: Borders
边框的掌握就更为简单,我们只要记住了 Background、BorderBrush And BorderThickness、CornerRadius、Padding 就可以应付了。
Stackpanel的布局方式
stackpanel 作为一个基本的布局元素,提供了将 UIElement 进行水平或者垂直排布的功能,就像一个堆栈一样。他使用起来也非常方便,将所有的元素都放入 <Stackpanel></Stackpanel>标签中就OK了。我们可以通过调整 HoriazonAlignment 和 VerticalAlignment 来调整水平或垂直。 默认情况下,stackpanel 会占据一个容器内所有的剩余空间,如果我们不希望这样,我们可以对位于 stackpanel 内的元素分别定义他们的尺寸属性,包括 Width、Height、MinWidth、MinHeight、MaxWidth、MaxHeight。但是还有一个问题,任何用户界面的设计,都会存在一定的空间来分隔视觉上不同的元素,想要实现这个功能,我们需要使用 Margin 属性。我们可以给 Margin 设置一个单个的值,这样四个方向上的 margin 都相同,也可以按照 Margin=“5,3,2,5”,这样方向的顺序分别是 左、上、右、下,和 CSS 中的定义不同,习惯起来感觉还有点吃力。在多个元素之间计算 Margin 时,其所用的规则也和 CSS 不同,但是应该更接近于一般的理解。
原来,我以为好看的 Comic Sans 字体,在大多数设计师的眼里名声都不太好,这是为什么呢?
Comic Sans 的简单介绍
1994年,Vincent Connare 为 Microsoft 创造出了 Comic Sans 字体。最初,这个字体是为 Microsoft Bob 项目设计的,但由于工期延后太多了,虽被发明出来却没有包含到这个项目中。(由此可见,项目有计划并且能按期完成是多么重要)
我想,这位老哥一定心理很不平衡,要不然,他也不会在自己的主页上挂这么一段话。
这种字体的灵感来源于作者办公室中的漫画书,特别是 Watchmen 和 The Dark Knight Returns。
左边是 Watchmen ,右边是 The Dark Knight returns
据 Connare 自己说,他从来没打算将这种字体用于普通的应用,可是历史总是很有幽默感的不是。字体最终不但用在了 Microsoft 3D Movie Maker中,后来还被加入到了 Win 95 Plus中,最后,IE中也包含了。
随后,很多著名的产品中都是用了 Comic Sans 字体,比如 Beanie Babies、The 2004 Canada Day 25-cent collector coin、还有 Sims 的Video。
由爱生恨的转变
之所以人们的感情会发生改变,主要是随着使用范围越来越广泛,特别是 Comic Sans 甚至被用在了一些严肃或者正式的场合中,这开始成为“原恨”的发源地。虽然 Comic Sans 非常适合为儿童或者相关的卡通、漫画书作为字体,但是在商业和专业领域,它一点都没有地位。但是,它却不断地出现在原本缺席的地方。
后来,出现了“Ban Comic Sans” 的运动,在1999年, Dave 和 Holly Crumbs(面包屑路径?)在拒绝了一个员工的使用 Comic Sans 的请求之后,发起了这个运动。
来看看下面这些图:
今后,我们在使用 Comic Sans 的时候就要注意了,不能用在特别正式和职业的场合中。
好在,我们还有一些替代的字体可以用来选择。
Lexia Readable
p22 Kaz Pro
JM Doodle Medium
参考资料:
