Articles Category

設計師,你需要的十款新興實用的網頁設計與開發工具

對於設計師和開發者而言,好工具和好想法同樣重要。我們常說“工欲善其事,必先利其器”,所以在項目開始之初,有必要弄清楚有哪些事情任務需要完成,而哪些成熟的工具可以有針對性地搞定這些問題。隨着如今網站開發需求的細化,越來越多項目衍生工具開始誕生,這些新工具通常會相當地具有針對性,它們逐步成熟之後,會很好地反哺到其他的項目。

這次的設計與開發工具的精選當中,有幾個可能就是在這樣的背景下誕生的。這10款工具乍一看一般,但是在特定的項目中可能會大放異彩。

01. UI Interactions

01_uiinteractions

這款名為UI Interactions 的工具實際上是一個款UI流程圖庫,它幫你整理出交互稿的圖庫,這些梳理好的交互流程可以很好地幫你做做UI設計的決策。

這些被整理好的UI交互合集可以持續不斷地給你輸送靈感,如果其中某個設計深得你心,你可以直接點擊選取獲得相應的源代碼,並且合集中還會為你推薦類似的實現方法。

02. CanIUse Embed

02_caniuse

Can I Use 是一個著名的前端技術開發類的信息支持網站,不同瀏覽器的各種技術支持細節會在網站上更新,可供查詢。Ire Aderinokun 所提供的這段腳本可以讓你輕松的獲取Caniuse.com的最新更新信息。

03. Microsoft Flow

03_microsoftflow

IFTTT是“if this then that”的縮寫,事實上是讓你的網絡行為能夠引發連鎖反應、讓你使用更為方便地將不同的功能與服務連通起來。而微軟的Microsoft Flow 就是官方提供的一項IFTTT服務,你可以借助它連通不同的APP和服務來提升你的整個工作流程,舉個例子,你可以創建這樣一個流程:當你的Github更新一個新的問題的時候,就會自動向Slack 發送一條通知。又或者,當你從特定的人那裏收到一封郵件的時候,就向你的手機發送一條通知短信。

IFTTT服務出現的年頭也不短了,各家服務各有特色,支持也各部形同,這次微軟家的支持應該不差,你可以用來試試。

04. Resource Cards

04_resourcecards

如果你是剛剛進入網頁設計領域不久的新人,那麽你有必要了解一下進行這項工作的過程中,有哪些工具、素材是可以使用,讓你事半功倍的。而Resource Cards 就是幫你搞定這個事情的:所有的素材、工具和教程都被清晰地分成不同的類別,不論你是要設計原型、編寫代碼還是使用Photoshop來做設計,都能從中找到相應的教程和資源。

05. Inspire by CanvasFlip

05_inspirecanvasflip

想體驗新的APP又不想挨個安裝、註冊、登錄和測試?不妨試試 Inspire 。CanvasFlip 出品的這款工具是一款原型工具,並且內置了UX測試模塊。Inspire 堪稱是原型領域的Dribbble,它可以展示用戶體驗流程,主要針對移動端應用原型設計,並且是直接在瀏覽器中運行。無需安裝大量的應用程序,直接運行、測試就可以了。

06. Alloy

06_alloy

Alloy 是一款全新的網絡瀏覽器,它可以根據你所執行的任務來組織標簽頁,所以,相比於將一大堆標簽頁都開着,Alloy 來的更加便捷:不同的標簽頁根據任務屬性和相關性被整合到了一起,使用的時候更加清晰明了。當你在執行特定任務的時候,不同頁面間的切換會更加有條理,也更加清晰,不會出現混亂的情況。

07. Boxy SVG

07_boxysvg

如果你此刻電腦上沒有安裝AI和Sketch,或者是壓根不想打開它們,那麽你可以使用矢量圖形編輯工具Boxy SVG來編輯圖形。Boxy SVG 是一款跨平臺的矢量圖形編輯工具,只要你有瀏覽器就可以運行了,不需要安裝,還可以借助網絡導入Google Fonts 字體,各種圖形變幻、路徑編輯也都手到擒來,是個相當順手的替代工具。

08. React UIkit components

08_reactui

這個 React UIKit 其中的組件都是基於UIKit CSS 框架和其他的獨立模塊來運作的,所以,無需進行復雜的安裝和配置就可以使用這些UI控件,甚至可以和其他的布局空間混搭使用。

09. Chart.js

09_chartjs

Chart.js是一個相當實用的JS庫,它可以幫你創建漂亮的JS圖表,甚至可以將不同的柱狀圖和餅圖混合到一起,使用不同樣式的座標繫來呈現,定制比例,如果數據允許,你還可以制作相應的動畫效果。

10. Bootstrap 4 Cheat Sheet

10_bootstrap

Bootstrap 4 Cheat Sheet 可以讓你秒變 Bootstrap 4的專家。現在甚至還有一個專門的Reddit板塊在討論這款 Cheat Sheet以及Bootstrap 4 的新功能。