本文分2次写，第一部分不涉及具体的代码，只从纸面上谈一下我对一些 UI 细节的看法；同时第一版先写中文，后续更新英文。

毫无疑问的是，一个 UI 好看的 App，总不会受到用户冷落：诸如天气类的应用，其实提供的功能大多都差不多，用户选择的时候，其实多数会留意哪个的 UI 好看然后选择用哪个。然后，同样好看的应用，对 UI 细节处理更好的一个更能获得用户青睐；对我来说，使用一款 UI/UX 优秀的应用是一件令人愉悦的事情，这就是相比 Windows/iOS，我更喜欢 Android 里采用 Material Design 应用的原因。

当然，本文谈的就是 UWP 应用设计里的一些 UI 细节的改进，其中会找一些正面、反面的应用截图作为例子。

避免使用系统控件的默认 Style

举个简单的反例子：

系统日历的左侧抽屉下方的选择显示的日历项的列表，原本抽屉里的模糊背景图是挺好看的，但是整体就毁在那个采取默认 Style 的滚动条上，相当违和。

事实上 ScrollViewer 里的 ScrollBar 是可以改样式的，因此最简单的情况下，你可以把滚动条的背景 Rect 去掉然后让滚动条本身具有一定透明度并且颜色贴合背景，就比如：

如果你想更优秀，可以试试对其加一些“变化”，比如 Camera 360 里的，当 PointOver 的时候，滚动条会变大，方便鼠标拖动。

处理好按钮的视觉状态切换

这里说的“视觉状态”，就是指 Normal、PointOver 和 Pressed 等之间的视觉切换。如果你有编辑过 Button 的 Style，那么可以很清楚地在 XAML 和 Blend 里看到这几个状态。。

系统控件的默认是这样，从左到右是 Normal、PointOver 和 Pressed：

显然要是每一个应用都用这个样子的按钮，那实在是太难看了。

但是就算改了颜色什么的，视觉效果没处理好，同样也是很难受的，这里我举了微软必应词典做例子，同样地，从左到右分别是 Normal、PointOver 和 Pressed：

从 Normal->PointOver 感觉还是可以的，但是当你按下去的那一刻，可以说是内心崩溃的。

因此，从视觉区分按钮的几个状态，应该是如何的？这里我觉得没有绝对的“标准”，但是从我个人的角度，我觉得对于简单的一个颜色的按钮，可以这么搞：

对于没有背景颜色的按钮（也就是背景色跟按钮所处的背景颜色融为一体），可以选择给他加个背景，就比如：

也可以让其稍微变大变小突出一下：

也可以改变一下透明度，比如这里的“+”按钮：

如果像更活泼一点，可以为视觉状态的切换加一点动画，举个简单的例子：如果你的按钮的视觉状态是通过改变 Opacity 的，那么可以为每一个视觉状态的切换加上一个动画，这样看起来会更加自然。对于颜色的改变，同样也可以通过动画让其摆脱生硬，@JustinXL 说过:

Don't ever animate a Brush, animate its Color instead.

所以，不要在 Storyboard 里改变 SolidColorBrush，应该改变的 SolidColorBrush 里的 Color。

如果你都有用 MyerList 跟 黄油相机，那么你可以去感受一下（就当我卖个广告~ lol）。