tags:開(kāi)發(fā)隨筆
這是一個(gè)看臉的時(shí)代碗淌。一個(gè)少女即使蕙質(zhì)蘭心，如果沒(méi)有嬌美的韶容抖锥，也很難惹人注意亿眠；同樣，一款應(yīng)用即使功能強(qiáng)大體驗(yàn)如行云流水磅废，如果沒(méi)有酷炫的外觀纳像，也很難招來(lái)目光。
最近對(duì)我的筆記應(yīng)用MarkNotes動(dòng)了下小手術(shù)拯勉，稍加整容竟趾，頓感逼格++。
廢話(huà)少說(shuō)宫峦，先來(lái)個(gè)不看廣告看療效吧
改進(jìn)后是這個(gè)樣子的:
因?yàn)榭梢該Q膚岔帽，也可以是這個(gè)樣子的:
改進(jìn)前是這個(gè)樣子的：
那么，我到底做了些什么呢
減少界面上的顏色
之前的界面导绷，顏色看起來(lái)比較雜犀勒。過(guò)多的顏色使用對(duì)視覺(jué)感知產(chǎn)生困擾。
首先是tag 顏色太多妥曲。
當(dāng)初在筆記列表中給tag添加顏色贾费，主要是想讓用戶(hù)更容易分辨不同的tag，因此設(shè)計(jì)了一個(gè)簡(jiǎn)單的算法檐盟，讓tag的顏色由 tag中的字符自動(dòng)計(jì)算出來(lái)铸本。但是花花綠綠的顏色確實(shí)降低了逼格，看起來(lái)不酷遵堵。
其次編輯器的顏色和外觀不一致箱玷。
編輯器用柔和顏色的初衷是為了讓用戶(hù)在長(zhǎng)時(shí)間編輯的時(shí)候不至于感覺(jué)刺眼。但是其顏色確實(shí)和外觀有點(diǎn)違和陌宿。
同樣的道理锡足，筆記列表網(wǎng)格之間的黃色也應(yīng)該去掉。
這些需要被和諧掉的顏色統(tǒng)統(tǒng)被三種顏色替換掉：白色壳坪，黑色和灰色舶得。
打破常規(guī)的UI布局，帶來(lái)不一樣的效果
在原來(lái)的界面中爽蝴，只是NSWindow的一個(gè)默認(rèn)效果：上面一個(gè)標(biāo)準(zhǔn)的title bar,左邊是基于NSSplitViewController的筆記列表沐批。
這只是一種普通的效果纫骑。無(wú)法給用戶(hù)以強(qiáng)烈的感受。
所以九孩，需要整容手術(shù)：
第一步先馆，將titlebar設(shè)為透明:
[self.window setTitlebarAppearsTransparent:YES];
現(xiàn)在title bar沒(méi)了，但是貌似還占了一些空間躺彬。
第二步煤墙，將整個(gè)window壓縮為 Content View
[self.window setStyleMask:(self.window.styleMask | NSFullSizeContentViewWindowMask)];
titlebar完全沒(méi)了：
第三步，將列表區(qū)和編輯區(qū)在視覺(jué)上分割開(kāi)來(lái)宪拥。
筆記列表采用的是一個(gè)NSSplitViewController仿野。在視覺(jué)上，由于其顏色和編輯區(qū)是一致的她君，所以在視覺(jué)上是混在一起的脚作。
為了將它從編輯區(qū)分割開(kāi)來(lái)，需要給它一種不一樣的背景色缔刹。不過(guò)球涛，在macOS中，很多UI組件的背景色是固定的桨螺，根本就不給你選擇宾符。
差了一些資料后才找到一個(gè)比較好的方案: NSBox酿秸。在需要變色的組件上放置一個(gè)NSBox灭翔，將其"box type"設(shè)為"custom"( 這步比較關(guān)鍵，否則在storyboard中根本就不出現(xiàn)背景色選項(xiàng))辣苏，然后就可以自由設(shè)置顏色了肝箱。
我將左邊區(qū)域設(shè)置為淺黑，一下子和編輯區(qū)有了鮮明的區(qū)分稀蟋。
完美煌张。收工！
