1985年，當(dāng)畫圖工具伴隨Windows 1.0誕生時，人們驚喜的發(fā)現(xiàn)利用圖形界面，用戶竟然可以在電腦上繪圖了。這些設(shè)計工具們?nèi)缃窠褤碛蟹浅?qiáng)大的功能，然而，最強(qiáng)大的功能也必定伴隨著最復(fù)雜的界面。

近年來，在線設(shè)計工具以云存儲、輕量化、多人協(xié)同等優(yōu)勢受到越來越多人的青睞，而Wix、G Suite、Graffana的大行其道更是令各大廠商們信服其價值。

作為設(shè)計師，當(dāng)我們?nèi)ピO(shè)計一款web端的“圖形繪制工具”或“界面編輯工具”時，如何能讓它變得更易用、更優(yōu)雅呢？

“你會pick哪種風(fēng)格？”

一、更寬廣的可視界面

傳統(tǒng)固定在界面的“工具欄”、“屬性面板”等模塊就像海景房前面的高層建筑一樣逐漸擋住了我們的視線，用戶的使用體驗自然也大打折扣。近年來主流軟件都開始嘗試在不影響操作體驗的前提下給用戶更大更寬廣的視野，帶來最本質(zhì)的簡潔、清爽感。

1. 收納“工具欄”

如果你的編輯界面中“工具”頻繁使用，類目也比較多的話，PS那樣將工具欄直接列出來是一個不錯的方案，但如果你發(fā)現(xiàn)作為一款在線產(chǎn)品，“工具”的數(shù)量沒有那么多也不會頻繁使用時，可以考慮將其收納到”菜單欄”或是其它地方，著名的原型設(shè)計軟件“sketch”就是采用這種設(shè)計策略。

2. 浮動“屬性面板”

同理，如果“屬性面板”的內(nèi)容不是很多，也可以考慮將其做成懸浮模式而不是固定在頁面某個區(qū)域。我們知道如果“屬性面板”固定在某個區(qū)域中的話，內(nèi)容較少的“屬性面板”會有很多留白遮住工作區(qū)，給人一種笨重的感受，而可浮動的“屬性面板”會顯得更加輕盈。

整合“頂部區(qū)”

在客戶端軟件中，頂部區(qū)域一般由”菜單欄“和“工具選項欄”組成，而web端系統(tǒng)往往沒有那么多的功能，所以建議做合并處理，給界面一個輕薄的“劉海”。

另外，不少線上設(shè)計工具都是網(wǎng)站平臺下的子站點，其產(chǎn)品往往希望增加一條平臺的通用“導(dǎo)航欄”，但如果這樣做的話，就像強(qiáng)行把海景房窗戶的上半部分遮住一樣令人沮喪。我們的建議是：設(shè)計師可以考慮利用“菜單欄”的寬度將導(dǎo)航等功能盡可能整合在一欄內(nèi)。

當(dāng)然，如果你能說服業(yè)務(wù)方，在主網(wǎng)站打開設(shè)計工具時，新開一個沒有導(dǎo)航的頁面而不是當(dāng)前頁面跳轉(zhuǎn)的話，那也許更棒。

二、更清晰的功能認(rèn)知

對于每一個設(shè)計工具而言，復(fù)雜的界面功能如何傳達(dá)都是最棘手的難題，這要求設(shè)計師在每個細(xì)節(jié)上仔細(xì)斟酌、考量。

1. 注明“圖標(biāo)”

設(shè)計工具的界面中往往會含有一些需要用圖標(biāo)來表達(dá)的功能，比如“預(yù)覽”、“導(dǎo)出”等，但有的功能往往并不能通過圖形就給人們清楚的認(rèn)知，而如果采用“圖標(biāo)+文字”的方式，兩者互相補(bǔ)充說明，會讓指意更加準(zhǔn)確。

當(dāng)然，如果空間是一個問題的話，一些界面區(qū)域可以變?yōu)閔over單個圖標(biāo)后，劃過其它圖標(biāo)可立即顯示標(biāo)簽內(nèi)容，而不是hover每個圖標(biāo)獨立計算停留時長再做出響應(yīng)。

2. 弱化“干擾”

設(shè)計工具界面中的視覺重點永遠(yuǎn)都是“工作區(qū)”，所以“工具欄”、“屬性面板”這些區(qū)域都不應(yīng)該過份表達(dá)，背景可以用一樣的純色，字體也建議纖細(xì)，如果有按鈕或是其它特殊功能都盡量弱化處理，讓用戶不被花花草草所打擾。

3. 清晰“布局”

“邊框”和“區(qū)塊”的使用永遠(yuǎn)都是布局的難題，“邊框”對于區(qū)域劃分有很大的作用，但其繁雜的線條也會吸引走本不屬于它的注意力。

以背景色來劃分區(qū)域的“區(qū)塊”并不會太過于搶鏡，但區(qū)分效果也會略有折扣。

而對于設(shè)計工具而言，還是建議大家使用“區(qū)塊”的方式處理界面，因為復(fù)雜的功能對于界面的清爽性要求更高，而經(jīng)過深度設(shè)計的“區(qū)塊”在劃分區(qū)域等能力上也不會落后“邊框”太多。

三、更流暢的操作觸感

編輯設(shè)計往往是非常漫長的過程，用戶會沉浸在制作過程中不少時間，一些簡單的操作可能會重復(fù)點擊數(shù)次甚至數(shù)百次，所以讓操作盡可能的流暢、順滑應(yīng)該是設(shè)計師們不可推卸的責(zé)任。

以下是幾點建議：

1. 慎用“彈框”

在某些時候能快速獲得關(guān)注是彈框的優(yōu)勢，但更多時候唯一的關(guān)閉路徑會帶給用戶非常限制的體驗，一旦誤操作或是連續(xù)出現(xiàn)很容易讓用戶抓狂。對于操作頻繁的制作工具界面，這點尤為致命。

一般來說我們只推薦大家在完全獨立的流程，比如“導(dǎo)出”、“導(dǎo)入”、“另存為”等操作時考慮使用彈窗，而絕大多數(shù)情況建議大家可以試試內(nèi)聯(lián)或滑出的方法，既輕巧也足夠引起用戶的關(guān)注。

2. 動效“過渡”

元素突然的變化并不符合現(xiàn)實中的自然規(guī)律，給人一種突兀的感覺，何不考慮使用一些自然的動畫來讓過渡更加流暢、自然呢？

淡入淡出、圖形位置移動，窗口放大縮小等都是不錯的手法。

但要注意的是：動畫的時間不要太長，也不要有太多復(fù)雜的動畫。

3. 智慧“引導(dǎo)”

線上產(chǎn)品往往都有很多新手用戶，如何讓這些新手用戶快速成為大師呢？引導(dǎo)是個不錯的想法，但我們都煩透了哪些一股腦推送的信息了，怎么辦呢？

我們的建議是：首先，應(yīng)該將引導(dǎo)做的活潑有趣，可以是一張夸張的圖片或是一個動圖；其次，將幫助引導(dǎo)分散開，如果點擊某個區(qū)域，相關(guān)的引導(dǎo)會自動出現(xiàn)那就更好了。

本文由 @阿里TXD 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議