让macOS应用逼格++

tags:开发随笔

这是一个看脸的时代。一个少女即使蕙质兰心，如果没有娇美的韶容，也很难惹人注意；同样，一款应用即使功能强大体验如行云流水，如果没有酷炫的外观，也很难招来目光。

最近对我的笔记应用MarkNotes动了下小手术，稍加整容，顿感逼格++。

废话少说，先来个不看广告看疗效吧

改进后是这个样子的:

因为可以换肤，也可以是这个样子的:

改进前是这个样子的：

那么，我到底做了些什么呢

减少界面上的颜色

之前的界面，颜色看起来比较杂。过多的颜色使用对视觉感知产生困扰。
首先是tag 颜色太多。
当初在笔记列表中给tag添加颜色，主要是想让用户更容易分辨不同的tag，因此设计了一个简单的算法，让tag的颜色由 tag中的字符自动计算出来。但是花花绿绿的颜色确实降低了逼格，看起来不酷。
其次编辑器的颜色和外观不一致。
编辑器用柔和颜色的初衷是为了让用户在长时间编辑的时候不至于感觉刺眼。但是其颜色确实和外观有点违和。
同样的道理，笔记列表网格之间的黄色也应该去掉。
这些需要被和谐掉的颜色统统被三种颜色替换掉：白色，黑色和灰色。

打破常规的UI布局，带来不一样的效果

在原来的界面中，只是NSWindow的一个默认效果：上面一个标准的title bar,左边是基于NSSplitViewController的笔记列表。

这只是一种普通的效果。无法给用户以强烈的感受。
所以，需要整容手术：
第一步，将titlebar设为透明:

 [self.window setTitlebarAppearsTransparent:YES];

现在title bar没了，但是貌似还占了一些空间。

第二步，将整个window压缩为 Content View

[self.window setStyleMask:(self.window.styleMask | NSFullSizeContentViewWindowMask)];

titlebar完全没了：

第三步，将列表区和编辑区在视觉上分割开来。
笔记列表采用的是一个NSSplitViewController。在视觉上，由于其颜色和编辑区是一致的，所以在视觉上是混在一起的。
为了将它从编辑区分割开来，需要给它一种不一样的背景色。不过，在macOS中，很多UI组件的背景色是固定的，根本就不给你选择。
差了一些资料后才找到一个比较好的方案: NSBox。在需要变色的组件上放置一个NSBox，将其"box type"设为"custom"( 这步比较关键，否则在storyboard中根本就不出现背景色选项)，然后就可以自由设置颜色了。
我将左边区域设置为浅黑，一下子和编辑区有了鲜明的区分。

完美。收工！