奇妙清單 Mac 版重設計

在 Behance 上查看設計細節

作為奇妙清單的深度用戶,這款曾經拿下蘋果 2013 年度評選最佳的 App 幫我提高了不少效率。我用奇妙清單來記錄我的生活靈感、購物清單,管理我的工作項目。不僅在手機上,在 Mac 上我也經常使用奇妙清單,它的自動同步功能很方便。

相比手機,Mac 擁有更大的屏幕和不一樣的交互方式。而我想讓奇妙清單 Mac 版變得更棒,原因是 Mac 作為生產力工具,奇妙清單能在上面做得更多。如果一個用戶在 Mac 上使用奇妙清單的頻率很高,我想他一定會用奇妙清單來管理自己工作項目,并與別人交流得更頻繁。

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

? 充分利用 Mac 的顯示空間和交互習慣。

? 更方便地對任務進行交流、管理。

? 回顧已完成的任務,令我能快速整理出工作周報。

基于上面的幾點想法,我開始了奇妙清單 Mac 版重設計的構思。


更簡潔清晰的外觀

奇妙清單提供了不少精美的壁紙讓用戶選擇,在手機上,這些個性化的背景確實能令應用添色不少。而在 Mac 上,我們往往已經設有桌面壁紙,或許是風景照、或許是一張跑車照片,但奇妙清單的個性化背景,這時候看上去并不和諧。

改進前后的 Minified View 對比

因此,我首先把壁紙的概念去掉,改為 Yosemite 中更為常見的毛玻璃效果,意在幫助用戶更專注于清單內容,注意力不會被壁紙分散。而任務的基本樣式被保留下來,使用戶不會在手機和 Mac 的切換中感到錯愕。

由于顯示空間受限,在 Minified Mode 中并不能將清單列表展示出來,舊有的奇妙清單 Mac 版直接沿用了 Mac 傳統的菜單進行切換——點擊清單名、清單列表被顯示出來、點擊切換到另一個清單——將手機上點選的交互方式移植到 Mac 上太直白了。

改進后的 Minified View 當鼠標懸停在左上方,項目界面下移,顯示出清單列表與操作

滑動鼠標是 Mac 上更自然的交互習慣,在顯示這些隱藏內容時,我打算通過鼠標懸停的形式實現——當鼠標移動到 Minified Mode 左上方的區域,清單列表就會被展示出來。同時,原先下方四個功能按鈕的使用頻率并不高,因此也被隱藏到了此處。

Minified View 總覽

通過對界面背景的修改、元素的重新整理等,我希望這個重設計在外觀上就先能引導到一個新的方向——它更專注于內容、沒有多余的元素影響眼球,并且在獲取信息上更高效。

但我認為,這與奇妙清單一貫的個性化風格是不沖突的。通過對界面顏色的選擇,用戶依然可以設置出個性化的界面。

個性化界面顏色選擇


重新思考信息的展示

奇妙清單的內容可以分為三個層級——清單 > 任務 > 任務詳情,每條清單中包含了多個任務,每個任務中又可以添加子任務、筆記、評論、附件等。由于交互方式和使用場景的差異,在手機上我們更關注于前兩項——清單和任務——手機生產力的限制也只讓我們方便地處理這兩項。而在 Mac 上不同,我們能夠快速地輸入內容、處理信息、添加各種類型的附件,所以這時候我們更關注于后兩項——任務和任務詳情。

奇妙清單的內容層級

因此,能夠快速地在列表間切換顯得并不重要,在 Mac 上高頻使用奇妙清單的用戶想必關注于任務、子任務、評論等。

Normal View 效果圖

此外,在使用中我發現,奇妙清單擁有很多貼心的小功能,比如以電子郵件發送清單、打印清單、快速設置到期日為今天或明天等,但這些功能的入口存在重復并層級錯亂的問題。如果我想將一個任務以電子郵件發送給我的朋友,我原先可以有兩個方法實現:1、選中這個任務,在清單功能中的「更多」菜單里選擇「郵件發送該項目」;2、用鼠標右鍵對任務單擊,在顯示出來的菜單中找到「郵件發送該項目」。

改進前的功能操作

一方面,「更多」原本屬于清單下的功能、對清單進行操作,而出現了其它層級的功能會讓人困擾;另一方面,功能的重復和堆疊會增加用戶在操作時需要考慮的時間

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

改進前的功能邏輯


改進后的功能邏輯

從右鍵單擊展開出來的菜單中找到想要的功能變得更清晰,使用頻率較低的功能用右鍵單擊實現、使用頻率較高的功能則直接顯示出來。這有利進一步提高奇妙清單的工作效率。

改進后的功能操作


進一步提高工作效率

上文提到,為使用戶在 Normal View?能更專注于任務和任務詳情,進一步弱化了清單列表,讓清單列表以標簽的形式展現。這樣做更重要的原因,是改進原有的奇妙清單 Mac 版在不同窗口大小時的顯示模式問題。

Normal View 切換清單操作演示

原有的奇妙清單 Mac 版擁有 Minified View、Collapsed View、Normal View 三種顯示模式,隨著窗口大小變化而變化,也可以通過「Command+1/2/3」的快捷組合鍵切換。不知道大家會不會像我一樣感覺三種顯示模式顯得多余,Minified View、Collapsed View 的差別很少,僅是在顯示任務詳情時,前者不能直接選擇任務而后者可以罷了。

改進前的三種顯示模式

由于遵循手機客戶端的原則,原有的奇妙清單 Mac 版依舊把「任務」作為重心,導致不顯示任務詳情時任務卡片的寬度占滿應用,空白的部分很大。但我們知道,任務的名稱是有限的,而任務詳情中的子任務、筆記、評論、附件拓展性更高

在 Collapsed View 顯示任務詳情時可以直接選擇任務,而 Minified View 不行,這是兩者的唯一差別

因此我認為,在奇妙清單 Mac 版中應該以任務詳情為重心,任務卡片的寬度是固定的,由任務詳情框去適應窗口大小,這樣更有利于任務詳情的展示。并且,原有的三種顯示模式也順應精簡為兩種,去掉中間的 Collapsed View。

改進后的兩種顯示模式

此外還有一個容易被忽略卻能發揮不少作用的功能點——回顧已完成的任務。對于辦公人士,回顧已完成的任務是時常需要做的事情。雖然奇妙清單一直有這樣的功能,但僅限于對已完成的任務隱藏和展示,并沒有應用于實際場景。

奇妙清單其實是一個非常好的任務載體,我們未完成的、已完成的任務都會記錄在這里。如果能夠對已完成的任務進行整理、篩選,其實已經能夠滿足一個很常見的場景——整理工作日報或周報——通過翻閱已完成任務我們就可以方便地回顧這周或指定某一天所完成的任務清單。

回顧已完成的任務

Click here to see the English version.)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容