起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何讓你的“在線設計工具”變得優雅
1985年，當畫圖工具伴隨Windows 1.0誕生時，人們驚喜的發現利用圖形界面，用戶竟然可以在電腦上繪圖了。這些設計工具們如今近已擁有非常強大的功能，然而，最強大的功能也必定伴隨著最復雜的界面。
近年來，在線設計工具以云存儲、輕量化、多人協同等優勢受到越來越多人的青睞，而Wix、G Suite、Graffana的大行其道更是令各大廠商們信服其價值。
作為設計師，當我們去設計一款web端的“圖形繪制工具”或“界面編輯工具”時，如何能讓它變得更易用、更優雅呢？
“你會pick哪種風格？”
一、更寬廣的可視界面
傳統固定在界面的“工具欄”、“屬性面板”等模塊就像海景房前面的高層建筑一樣逐漸擋住了我們的視線，用戶的使用體驗自然也大打折扣。近年來主流軟件都開始嘗試在不影響操作體驗的前提下給用戶更大更寬廣的視野，帶來最本質的簡潔、清爽感。
1. 收納“工具欄”
如果你的編輯界面中“工具”頻繁使用，類目也比較多的話，PS那樣將工具欄直接列出來是一個不錯的方案，但如果你發現作為一款在線產品，“工具”的數量沒有那么多也不會頻繁使用時，可以考慮將其收納到”菜單欄”或是其它地方，著名的原型設計軟件“sketch”就是采用這種設計策略。
2. 浮動“屬性面板”
同理，如果“屬性面板”的內容不是很多，也可以考慮將其做成懸浮模式而不是固定在頁面某個區域。我們知道如果“屬性面板”固定在某個區域中的話，內容較少的“屬性面板”會有很多留白遮住工作區，給人一種笨重的感受，而可浮動的“屬性面板”會顯得更加輕盈。
整合“頂部區”
在客戶端軟件中，頂部區域一般由”菜單欄“和“工具選項欄”組成，而web端系統往往沒有那么多的功能，所以建議做合并處理，給界面一個輕薄的“劉?！?。
另外，不少線上設計工具都是網站平臺下的子站點，其產品往往希望增加一條平臺的通用“導航欄”，但如果這樣做的話，就像強行把海景房窗戶的上半部分遮住一樣令人沮喪。我們的建議是：設計師可以考慮利用“菜單欄”的寬度將導航等功能盡可能整合在一欄內。
當然，如果你能說服業務方，在主網站打開設計工具時，新開一個沒有導航的頁面而不是當前頁面跳轉的話，那也許更棒。
二、更清晰的功能認知
對于每一個設計工具而言，復雜的界面功能如何傳達都是最棘手的難題，這要求設計師在每個細節上仔細斟酌、考量。
1. 注明“圖標”
設計工具的界面中往往會含有一些需要用圖標來表達的功能，比如“預覽”、“導出”等，但有的功能往往并不能通過圖形就給人們清楚的認知，而如果采用“圖標+文字”的方式，兩者互相補充說明，會讓指意更加準確。
當然，如果空間是一個問題的話，一些界面區域可以變為hover單個圖標后，劃過其它圖標可立即顯示標簽內容，而不是hover每個圖標獨立計算停留時長再做出響應。
2. 弱化“干擾”
設計工具界面中的視覺重點永遠都是“工作區”，所以“工具欄”、“屬性面板”這些區域都不應該過份表達，背景可以用一樣的純色，字體也建議纖細，如果有按鈕或是其它特殊功能都盡量弱化處理，讓用戶不被花花草草所打擾。
3. 清晰“布局”
“邊框”和“區塊”的使用永遠都是布局的難題，“邊框”對于區域劃分有很大的作用，但其繁雜的線條也會吸引走本不屬于它的注意力。
以背景色來劃分區域的“區塊”并不會太過于搶鏡，但區分效果也會略有折扣。
而對于設計工具而言，還是建議大家使用“區塊”的方式處理界面，因為復雜的功能對于界面的清爽性要求更高，而經過深度設計的“區塊”在劃分區域等能力上也不會落后“邊框”太多。
三、更流暢的操作觸感
編輯設計往往是非常漫長的過程，用戶會沉浸在制作過程中不少時間，一些簡單的操作可能會重復點擊數次甚至數百次，所以讓操作盡可能的流暢、順滑應該是設計師們不可推卸的責任。
以下是幾點建議：
1. 慎用“彈框”
在某些時候能快速獲得關注是彈框的優勢，但更多時候唯一的關閉路徑會帶給用戶非常限制的體驗，一旦誤操作或是連續出現很容易讓用戶抓狂。對于操作頻繁的制作工具界面，這點尤為致命。
一般來說我們只推薦大家在完全獨立的流程，比如“導出”、“導入”、“另存為”等操作時考慮使用彈窗，而絕大多數情況建議大家可以試試內聯或滑出的方法，既輕巧也足夠引起用戶的關注。
2. 動效“過渡”
元素突然的變化并不符合現實中的自然規律，給人一種突兀的感覺，何不考慮使用一些自然的動畫來讓過渡更加流暢、自然呢？
淡入淡出、圖形位置移動，窗口放大縮小等都是不錯的手法。
但要注意的是：動畫的時間不要太長，也不要有太多復雜的動畫。
3. 智慧“引導”
線上產品往往都有很多新手用戶，如何讓這些新手用戶快速成為大師呢？引導是個不錯的想法，但我們都煩透了哪些一股腦推送的信息了，怎么辦呢？
我們的建議是：首先，應該將引導做的活潑有趣，可以是一張夸張的圖片或是一個動圖；其次，將幫助引導分散開，如果點擊某個區域，相關的引導會自動出現那就更好了。
本文由 @阿里TXD 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
- 目前還沒評論，等你發揮！
