[UWP]浅谈按钮设计.docxVIP

? ? [UWP]浅谈按钮设计 ? ? 一时兴起想谈谈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作为鼠标指针。 Pressed: 按下的状态，有趣的是除了改变颜色Button还应用了PointerDownThemeAnimation使得按钮向按下方向倾斜，营造一种有深度的设计。不过这个做法会导致Button的内容变模糊（Projection都有这个问题），如果介意的话可以使用ScaleTransform缩小整个按钮，让整个按钮像被按了下去。 Disabled: 当IsEnabled=False时的状态，一般控件都有这个状态，大部分都表现为背景变灰，字体颜色变浅，表示不可操作。有时偷懒我会直接将整个Button 设置成 Opacity = 0.4代替分别为每个元素设置颜色，或者只将Foreground设置成 习惯做触屏设计的话很容易就忽略PointerOver状态，目前UWP大部分的应用场景还是在桌面上，所以应该在ControlTemplate中包含这四种VisualState。除了这四种VisualState，Button还可以定义FocusStates，具体可以参考 这篇文章 。 2. 按钮设计 在默认的ControlTemplate中VisualState之间的转换没有过渡，点击后弹起的动画也很迅速，我自己设计Button时也不做过渡动画，或者过渡动画的时间十分短，这么做有几点好处： 现在流行轻、快的设计。 就算过渡动画做得很好看，作为使用最频繁的UI元素，对那些一天使用Windows 十几个小时的人很容易会造成视觉疲劳。假设Windows中所有Button都有很华丽的过渡动画，虽然很酷炫，用一会就烦了。 Button的天生职责就是响应迅速，如果设计了过长的过渡动画会令人感觉反应迟缓。 过渡动画的时间太长，实现得不好有可能在切换状态时上一个状态过渡动画还未执行完成，造成断裂感。 被设计师或产品经理发现原来可以实现华丽的动画，他们很容易会得寸进尺。 懒。 软件中按钮的风格取决于软件服务的群体，工业软件喜欢沉稳的风格，面向互联网的软件通常鲜艳、轻快。接下来给出一些常用切容易实现的Button设计，还会给出一些花哨的技巧。这些花哨的技巧并不是鼓励任何人在系统上用标新立异的设计，设计良好的Button是生动有趣的UI中重要的一环，但前提是设计良好，如果团队里没有靠谱的设计师，还是用最保守的设计最保险。 2.1 无边框按钮 使用无边框按钮可以去除多余的装饰，留给文字的空间更大，界面也更清爽，通常用在Toolbar里或拥挤的位置。无边框按钮其实最难用，因为它很用以看上去不像个按钮。有几种方法可以避免这个状况： 使用明显的颜色。 放在约定俗成是按钮该放的位置，如果前后都有按钮就最好。 使用简短的动词或直接使用图标，使用形容词或名次的话看上去会像状态标签，使用长语句则看上去像普通文本。 如果用在拥挤的位置，一定要有足够的间隔并且用突出的颜色，因为没边框很容易和前后文连在一起。 无边框按钮很容易实现，最简单的是如下所示使用默认Button样式移除边框和背景，或者直接使用AppBarButton或HyperlinkButton，我最推荐这种做法: Button Content=Edit Profile Background=Transparent BorderThickness=0 / 也可以使用阴影做类似发光的效果，好看又简单： VisualState x:Name=PointerOver Storyboard DoubleAnimat