时兴起想谈谈UWP按钮的设计。
按钮是UI中最重要的元素之一,可能也是用得最多的交互元素。好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI。而且按钮通常不会影响布局,小小的按钮无论怎么改也不会对性能有多大影响,所以不少注重细节的设计师最为热衷修改按钮。(例如 这位 )
目前UWP只提供了基础款的按钮样式,网上相关资源也较少,所有写了这篇文章用于介绍在UWP上设计按钮的入门知识。
1. VisualStates
Button的CotrolTemplate(可以参考 这里 )中包含四个VisualState,分别是Normal、PointerOver、Pressed、Disabled。
Normal: Button的默认状态,UWP的按钮是完全扁平化的设计。没有边框。
PointerOver: 鼠标进入的状态,出现边框,背景颜色也会改变。
Windows中通常不会用改变鼠标指针来表明“这是一个Button”,而是让Button进入PointerOver状态。只有HyperlinkButton是特例,符合 W3C的建议 使用了CoreCursorType.Hand作为鼠标指针。