在 Behance 上查看設(shè)計(jì)細(xì)節(jié)

作為奇妙清單的深度用戶，這款曾經(jīng)拿下蘋果 2013 年度評選最佳的 App 幫我提高了不少效率略步。我用奇妙清單來記錄我的生活靈感谅猾、購物清單映九，管理我的工作項(xiàng)目嫉到。不僅在手機(jī)上沃暗，在 Mac 上我也經(jīng)常使用奇妙清單，它的自動同步功能很方便屯碴。

相比手機(jī)，Mac 擁有更大的屏幕和不一樣的交互方式膊存。而我想讓奇妙清單 Mac 版變得更棒导而，原因是 Mac 作為生產(chǎn)力工具，奇妙清單能在上面做得更多隔崎。如果一個(gè)用戶在 Mac 上使用奇妙清單的頻率很高今艺，我想他一定會用奇妙清單來管理自己工作項(xiàng)目，并與別人交流得更頻繁爵卒。

我希望奇妙清單 Mac 版能夠：

? 充分利用 Mac 的顯示空間和交互習(xí)慣虚缎。

? 更方便地對任務(wù)進(jìn)行交流、管理钓株。

? 回顧已完成的任務(wù)实牡，令我能快速整理出工作周報(bào)。

基于上面的幾點(diǎn)想法轴合，我開始了奇妙清單 Mac 版重設(shè)計(jì)的構(gòu)思创坞。

更簡潔清晰的外觀

奇妙清單提供了不少精美的壁紙讓用戶選擇，在手機(jī)上受葛，這些個(gè)性化的背景確實(shí)能令應(yīng)用添色不少题涨。而在 Mac 上，我們往往已經(jīng)設(shè)有桌面壁紙总滩，或許是風(fēng)景照纲堵、或許是一張跑車照片，但奇妙清單的個(gè)性化背景闰渔，這時(shí)候看上去并不和諧席函。

改進(jìn)前后的 Minified View 對比

因此，我首先把壁紙的概念去掉冈涧，改為 Yosemite 中更為常見的毛玻璃效果向挖，意在幫助用戶更專注于清單內(nèi)容，注意力不會被壁紙分散炕舵。而任務(wù)的基本樣式被保留下來何之，使用戶不會在手機(jī)和 Mac 的切換中感到錯(cuò)愕。

由于顯示空間受限咽筋，在 Minified Mode 中并不能將清單列表展示出來溶推，舊有的奇妙清單 Mac 版直接沿用了 Mac 傳統(tǒng)的菜單進(jìn)行切換——點(diǎn)擊清單名、清單列表被顯示出來、點(diǎn)擊切換到另一個(gè)清單——將手機(jī)上點(diǎn)選的交互方式移植到 Mac 上太直白了蒜危。

改進(jìn)后的 Minified View 當(dāng)鼠標(biāo)懸停在左上方虱痕，項(xiàng)目界面下移，顯示出清單列表與操作

滑動鼠標(biāo)是 Mac 上更自然的交互習(xí)慣辐赞，在顯示這些隱藏內(nèi)容時(shí)部翘，我打算通過鼠標(biāo)懸停的形式實(shí)現(xiàn)——當(dāng)鼠標(biāo)移動到 Minified Mode 左上方的區(qū)域，清單列表就會被展示出來响委。同時(shí)新思，原先下方四個(gè)功能按鈕的使用頻率并不高，因此也被隱藏到了此處赘风。

Minified View 總覽

通過對界面背景的修改夹囚、元素的重新整理等，我希望這個(gè)重設(shè)計(jì)在外觀上就先能引導(dǎo)到一個(gè)新的方向——它更專注于內(nèi)容邀窃、沒有多余的元素影響眼球荸哟，并且在獲取信息上更高效。

但我認(rèn)為瞬捕，這與奇妙清單一貫的個(gè)性化風(fēng)格是不沖突的鞍历。通過對界面顏色的選擇，用戶依然可以設(shè)置出個(gè)性化的界面肪虎。

個(gè)性化界面顏色選擇

重新思考信息的展示

奇妙清單的內(nèi)容可以分為三個(gè)層級——清單 > 任務(wù) > 任務(wù)詳情堰燎，每條清單中包含了多個(gè)任務(wù)，每個(gè)任務(wù)中又可以添加子任務(wù)笋轨、筆記秆剪、評論、附件等爵政。由于交互方式和使用場景的差異仅讽，在手機(jī)上我們更關(guān)注于前兩項(xiàng)——清單和任務(wù)——手機(jī)生產(chǎn)力的限制也只讓我們方便地處理這兩項(xiàng)。而在 Mac 上不同钾挟，我們能夠快速地輸入內(nèi)容洁灵、處理信息、添加各種類型的附件掺出，所以這時(shí)候我們更關(guān)注于后兩項(xiàng)——任務(wù)和任務(wù)詳情徽千。

奇妙清單的內(nèi)容層級

因此，能夠快速地在列表間切換顯得并不重要汤锨，在 Mac 上高頻使用奇妙清單的用戶想必關(guān)注于任務(wù)双抽、子任務(wù)、評論等闲礼。

Normal View 效果圖

此外牍汹，在使用中我發(fā)現(xiàn)铐维，奇妙清單擁有很多貼心的小功能，比如以電子郵件發(fā)送清單慎菲、打印清單嫁蛇、快速設(shè)置到期日為今天或明天等，但這些功能的入口存在重復(fù)并層級錯(cuò)亂的問題露该。如果我想將一個(gè)任務(wù)以電子郵件發(fā)送給我的朋友睬棚，我原先可以有兩個(gè)方法實(shí)現(xiàn)：1、選中這個(gè)任務(wù)解幼，在清單功能中的「更多」菜單里選擇「郵件發(fā)送該項(xiàng)目」抑党；2、用鼠標(biāo)右鍵對任務(wù)單擊书幕，在顯示出來的菜單中找到「郵件發(fā)送該項(xiàng)目」新荤。

改進(jìn)前的功能操作

一方面揽趾，「更多」原本屬于清單下的功能台汇、對清單進(jìn)行操作，而出現(xiàn)了其它層級的功能會讓人困擾篱瞎；另一方面苟呐，功能的重復(fù)和堆疊會增加用戶在操作時(shí)需要考慮的時(shí)間。

我重新梳理了功能的邏輯：

改進(jìn)前的功能邏輯

改進(jìn)后的功能邏輯

從右鍵單擊展開出來的菜單中找到想要的功能變得更清晰俐筋，使用頻率較低的功能用右鍵單擊實(shí)現(xiàn)牵素、使用頻率較高的功能則直接顯示出來。這有利進(jìn)一步提高奇妙清單的工作效率澄者。

改進(jìn)后的功能操作

進(jìn)一步提高工作效率

上文提到笆呆，為使用戶在 Normal View?能更專注于任務(wù)和任務(wù)詳情，進(jìn)一步弱化了清單列表粱挡，讓清單列表以標(biāo)簽的形式展現(xiàn)赠幕。這樣做更重要的原因，是改進(jìn)原有的奇妙清單 Mac 版在不同窗口大小時(shí)的顯示模式問題询筏。

Normal View 切換清單操作演示

原有的奇妙清單 Mac 版擁有 Minified View榕堰、Collapsed View、Normal View 三種顯示模式嫌套，隨著窗口大小變化而變化逆屡，也可以通過「Command+1/2/3」的快捷組合鍵切換。不知道大家會不會像我一樣感覺三種顯示模式顯得多余踱讨，Minified View魏蔗、Collapsed View 的差別很少，僅是在顯示任務(wù)詳情時(shí)痹筛，前者不能直接選擇任務(wù)而后者可以罷了沫勿。

改進(jìn)前的三種顯示模式

由于遵循手機(jī)客戶端的原則挨约，原有的奇妙清單 Mac 版依舊把「任務(wù)」作為重心，導(dǎo)致不顯示任務(wù)詳情時(shí)任務(wù)卡片的寬度占滿應(yīng)用产雹，空白的部分很大诫惭。但我們知道，任務(wù)的名稱是有限的蔓挖，而任務(wù)詳情中的子任務(wù)夕土、筆記、評論瘟判、附件拓展性更高怨绣。

在 Collapsed View 顯示任務(wù)詳情時(shí)可以直接選擇任務(wù)，而 Minified View 不行拷获，這是兩者的唯一差別

因此我認(rèn)為篮撑，在奇妙清單 Mac 版中應(yīng)該以任務(wù)詳情為重心，任務(wù)卡片的寬度是固定的匆瓜，由任務(wù)詳情框去適應(yīng)窗口大小赢笨，這樣更有利于任務(wù)詳情的展示。并且驮吱，原有的三種顯示模式也順應(yīng)精簡為兩種茧妒，去掉中間的 Collapsed View。

改進(jìn)后的兩種顯示模式

此外還有一個(gè)容易被忽略卻能發(fā)揮不少作用的功能點(diǎn)——回顧已完成的任務(wù)左冬。對于辦公人士桐筏，回顧已完成的任務(wù)是時(shí)常需要做的事情。雖然奇妙清單一直有這樣的功能拇砰，但僅限于對已完成的任務(wù)隱藏和展示梅忌，并沒有應(yīng)用于實(shí)際場景。

奇妙清單其實(shí)是一個(gè)非常好的任務(wù)載體除破，我們未完成的牧氮、已完成的任務(wù)都會記錄在這里。如果能夠?qū)σ淹瓿傻娜蝿?wù)進(jìn)行整理皂岔、篩選蹋笼，其實(shí)已經(jīng)能夠滿足一個(gè)很常見的場景——整理工作日報(bào)或周報(bào)——通過翻閱已完成任務(wù)我們就可以方便地回顧這周或指定某一天所完成的任務(wù)清單。

回顧已完成的任務(wù)

（Click here to see the English version.）