設(shè)計(jì)效率工具趨勢 | 綜述篇

2022-11-14    資深UI設(shè)計(jì)者

概述

——————————


工欲善其事,必先利其器。好的工具可以有效的激發(fā)設(shè)計(jì)師的靈感、提升設(shè)計(jì)師的效率。我們準(zhǔn)備做一個設(shè)計(jì)效率工具系列,整個系列將好的設(shè)計(jì)工具貫穿到完整的設(shè)計(jì)流程中,并結(jié)合日常我們使用的情況向大家做推薦。通常的設(shè)計(jì)流程分為日常的積累、研究分析、設(shè)計(jì)創(chuàng)作、測試評估、對外宣傳這幾個環(huán)節(jié)。此篇為綜述篇,之后的篇章會針對不同環(huán)節(jié)進(jìn)行深入的陳述。




一、日常積累


設(shè)計(jì)師日常除了應(yīng)對當(dāng)下的需求,每天可以拿出一定時間保持學(xué)習(xí)的習(xí)慣。不僅可以讓我們緊跟最近的設(shè)計(jì)趨勢、設(shè)計(jì)潮流、設(shè)計(jì)方法,也可以讓我們潛移默化中得到提升。


Panda|全而美的設(shè)計(jì)訂閱平臺





Panda幫助設(shè)計(jì)師不錯過每天的設(shè)計(jì)靈感和資訊,包括新的設(shè)計(jì)方法理念、流行潮流、也有一些新產(chǎn)品推出。我們可以把Panda替換Chrome主頁,每次打開瀏覽器頁面都可以隨時看到最新的設(shè)計(jì)資訊。一些英文的訂閱也可以用chrome瀏覽器的翻譯功能可以粗略查看。


地址:https://app.usepanda.com/#





Topys|創(chuàng)意內(nèi)容平臺





全球頂尖創(chuàng)意內(nèi)容平臺,作為中國成立最早、最受歡迎的創(chuàng)意垂直網(wǎng)站,以 “Open Your Mind” 為宗旨,始終專注在全球創(chuàng)意、藝術(shù)、靈感、人文領(lǐng)域?qū)ふ易钣匈|(zhì)感的聲音。


地址:https://www.topys.cn





Voicer|分享生活和設(shè)計(jì)的美學(xué)





我們總在生活中與「一瞬間的感動」相遇。Voicer的理念即是發(fā)現(xiàn)這「感動」, 將它傳遞給更多熱愛生活的人們。內(nèi)容包括創(chuàng)意內(nèi)容品牌、在線雜志等。致力于分享生活和設(shè)計(jì)之美。


地址:https://www.voicer.me





Design better|優(yōu)質(zhì)設(shè)計(jì)讀物網(wǎng)站





涵蓋設(shè)計(jì)商業(yè)思維、產(chǎn)品設(shè)計(jì)原則、設(shè)計(jì)系統(tǒng)等關(guān)于推動設(shè)計(jì)團(tuán)隊(duì)前進(jìn)的實(shí)踐讀物,同時提供PDF和有聲格式。


地址:https://www.designbetter.co





二、研究分析

——————————


設(shè)計(jì)師在調(diào)研過程會研究用戶、記錄用戶的行為和需求,會使用一些高效的記錄工具。同時繁多的調(diào)研的信息需要匯總整理,協(xié)作整理,這里會推薦一些記錄和整理的工具給大家。




Noted|錄音筆記好工具





Noted 是一款將錄音和筆記相機(jī)相結(jié)合的軟件。我們做訪談用戶或做會議紀(jì)要的時候,經(jīng)常錯過記錄的內(nèi)容,如果通過一些軟件錄音的話,后期回聽需要比較多時間成本。Noted可以在記錄筆記的同時記錄輸入文字的時間點(diǎn)所對應(yīng)的錄音,輸入的每個字的時間點(diǎn)都會對應(yīng)到。當(dāng)內(nèi)容沒記錄下來時可以隨時跳到對應(yīng)時間的錄音進(jìn)行回聽,方便在漫長的錄音文件中快速檢索。




Marginnote|文獻(xiàn)收集箱







重塑學(xué)習(xí)方式的閱讀筆記工具,更加高效閱讀書籍和學(xué)習(xí),可以在閱讀時摘錄筆記,制作學(xué)習(xí)卡,提取關(guān)鍵詞,根據(jù)筆記生成思維導(dǎo)圖,梳理知識框架。非常適合閱讀專業(yè)書籍,閱讀論文以及復(fù)習(xí)。


地址:https://www.marginnote.com/chinese/home





GoodNotes|手寫筆記





一款功能強(qiáng)大的手寫筆記軟件,擁有多種筆記封面和紙張模板可以選擇,支持自定義模板,可以簡單處理圖片,可以導(dǎo)入pdf、ppt等文稿并做標(biāo)記,也適合做電子手賬。


地址:https://www.goodnotes.com/zh-cn





騰訊文檔|在線協(xié)作





調(diào)研階段方便多人一起搜集資料和匯總,多人同時在線編輯,內(nèi)容實(shí)時同步。隨時隨地高效協(xié)作,輕松創(chuàng)作。


地址:https://docs.qq.com/home






Xmind|思維導(dǎo)圖





功能強(qiáng)大的思維導(dǎo)圖軟件,極簡設(shè)計(jì),流暢體驗(yàn),多種結(jié)構(gòu)圖風(fēng)格選擇,方便資料的匯集和思路的整理。


地址:https://www.xmind.cn






三、設(shè)計(jì)創(chuàng)作

——————————


當(dāng)設(shè)計(jì)目標(biāo)確定時,接下來進(jìn)行具體的創(chuàng)意設(shè)計(jì)。設(shè)計(jì)師除了通過腦暴進(jìn)行發(fā)散方案以外,一些高效的設(shè)計(jì)工具可以讓我們事半工倍。


3.1 靈感搜集


Collect UI|界面靈感



UI設(shè)計(jì)靈感庫,基于dribbble平臺精心挑選優(yōu)質(zhì)內(nèi)容,提高效率便捷,為設(shè)計(jì)師提供專項(xiàng)更好的靈感。同時支持郵件訂閱推送。


地址:https://collectui.com





Adobe Color|配色靈感



Adobe color不僅從各個維度解決了我們的配色需求,同時也提供找圖需求。其中包含 9 種智能調(diào)色模式可以選擇。拾取主題色、拾取圖片中的漸變色、協(xié)助工具可以合理幫助檢查不同顏色的對比、探索behance趨勢。


地址:https://color.adobe.com/zh/create





Useanimations|圖標(biāo)動效靈感



圖標(biāo)動態(tài)效果庫,當(dāng)繪制的圖標(biāo)需要一些巧妙的微動態(tài)效果時可以參考。


地址:https://useanimations.com/index.html





3.2 設(shè)計(jì)打磨


FigmaEX|插件可視化



當(dāng)插件特別多時候,F(xiàn)igmaEX極大的改善了Figma中使用插件的體驗(yàn),將插件可視化??梢赃M(jìn)行展開,同時顯示插件的名稱與圖標(biāo)。可以通過拖拽調(diào)整插件的順序,調(diào)節(jié)高度。


地址:https://moonvy.com/figmaEX/




Autoflow|流程圖插件


輸出交互設(shè)計(jì)稿的時候,方便快捷的在不同畫板之間連線,提升輸出效率。


地址:https://www.figma.com/community/plugin/733902567457592893/Autoflow





Skewdat|傾斜插



這是一個非常簡單實(shí)用的 Figma 插件,它可以幫你將任何形狀元素傾斜過來。


地址:https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio





Undraw|插畫素材


最棒最全的插畫庫,支持快速搜索,一鍵調(diào)整顏色。


地址:https://undraw.co/illustrations






Magic Eraser|輕松移除雜物


一款免費(fèi)的在線服務(wù),它通過 AI 自動去除圖片中不需要的部分,只需要上傳圖片,等待幾秒鐘即可。用鼠標(biāo)把不要的部分劃掉,松開鼠標(biāo)就會閃幾下,被劃掉的部分就消失了,比如去水印之類的小東西,如果用 PS 的圖章,估計(jì)要十來分鐘,而用 Magic Eraser 就幾秒鐘,簡單易用,推薦使用。


地址:https://www.magiceraser.io







3.3 設(shè)計(jì)驗(yàn)證


Checklist Design|設(shè)計(jì)清單



設(shè)計(jì)輸出后可以通過這個清單去做最后的檢查。網(wǎng)站列舉了一些通用場景(頁面、元素、流程、主題、品牌)下的基本設(shè)計(jì)要素??梢詸z查你的設(shè)計(jì)在這些場景下是否符合規(guī)范。樣式、顏色、命名、易用性等是否合適。


地址:https://www.checklist.design/?ref=prototyprio





四、測試評估

——————————


好的方案不是一蹴而就的,設(shè)計(jì)方案需要不斷的打磨和迭代。方案需要持續(xù)和用戶進(jìn)行溝通和測試,才能得到完善的方案。也需要和開發(fā)工程師不斷溝通,以達(dá)到最佳的實(shí)現(xiàn)效果。




4.1 用戶測試


騰訊文檔|在線收集表


用戶測試階段方便高效的收集用戶反饋,一般用于定量的用戶測試。


地址:https://docs.qq.com/




Hawkeye|眼動追蹤工具


一般的眼動跟蹤設(shè)備比較昂貴,使用繁瑣。這個名為鷹眼的眼動追蹤APP,可以通過手機(jī)前置攝像頭捕捉用戶在使用產(chǎn)品時的視覺動向。


地址:https://www.usehawkeye.com/?ref=prototyprio




4.2 評估還原


CoDesign|騰訊自研設(shè)計(jì)協(xié)作平臺


覆蓋產(chǎn)品經(jīng)理、設(shè)計(jì)師、工程師協(xié)作需求。設(shè)計(jì)交付更輕松,有效管理和使用設(shè)計(jì)資產(chǎn)。


地址:https://codesign.qq.com/





Pixel Eye|高效視覺還原


在項(xiàng)目上線前設(shè)計(jì)師都會對最終的產(chǎn)品實(shí)現(xiàn)效果進(jìn)行走查,以保證設(shè)計(jì)還原的準(zhǔn)確性,體驗(yàn)的流暢性。這是一款視覺還原工具,幫助前端工程師在頁面重構(gòu)階段就能快速發(fā)現(xiàn)開發(fā)稿與視覺稿的差異,實(shí)時對比、實(shí)時修改,減少工程師與設(shè)計(jì)師的溝通成本,提升整體開發(fā)效率。 :


pixeleye.暫未對外開放敬請期待




五、對外宣傳

——————————


設(shè)計(jì)完成后匯報(bào)展示、產(chǎn)品的宣傳包裝等,提供更便捷優(yōu)秀的展示形式。



5.1 效果展示


Mockup World


樣機(jī)的類型全面而且免費(fèi),綜合質(zhì)量很高。


地址:https://www.mockupworld.co





ls.graphics


素材非常優(yōu)質(zhì)精美,有免費(fèi)和付費(fèi)的資源。


地址:https://www.ls.graphics/#UI




5.2 在線作品集制作


Adobe Portfolio



主要面向設(shè)計(jì)師群體,幫助設(shè)計(jì)師建立個人在線作品集。幾分鐘就可以建好一個作品集網(wǎng)站,提供精美模板選擇。最大的特點(diǎn)是易于操作,無需懂網(wǎng)頁程式,都能在建立一個網(wǎng)站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收費(fèi)。已訂閱用戶可免費(fèi)使用。


地址:https://portfolio.adobe.com/start




結(jié)語


此綜述篇大家有了比較整體的了解,在設(shè)計(jì)流程中每個環(huán)節(jié),介紹了一些比較好用的工具,后續(xù)的設(shè)計(jì)工具系列文章會針對某一環(huán)節(jié)進(jìn)行更深入的探索。




藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。 



作者:騰訊ISUX團(tuán)隊(duì)    來源:站酷





分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

分享本文至:

日歷

鏈接

個人資料

存檔