免費 在線繪圖工具_6個免費的在線工具,使您的生活更輕鬆

免費 在線繪圖工具

We’re all on the lookout for ways to do things better. In this article, I’m going to take you through a roundup of some of the less well known tools that almost any web designer can benefit from. Each one can solve common design challenges while also increasing your productivity.

我們都在尋找更好的方法。 在本文中,我將帶您簡要了解幾乎所有Web設計師都可以從中受益的一些鮮爲人知的工具。 每個人都可以解決常見的設計難題,同時還可以提高生產率。

Let’s start!

開始吧!

Typegenius (Typegenius)

TypeGenius

I’m sure all designers at some point in time, have had difficulty in choosing which fonts work best together. That’s why I want to start with MunoCreative's Typegenius to the list.

我敢肯定,所有設計師在某個時候都很難選擇最適合的字體。 這就是爲什麼我要從MunoCreative的Typegenius入手

Typegenius is an online tool which helps designers 「find the perfect font combo in just few clicks. You only need to enter the name of the typeface you are using and then click on 「view matches」 to discover a selection of font combinations which work well in concert. Notably, the output you receive is a simple example text document which uses your font selections for the headings and body copy, giving you a good sense of the final result.

Typegenius是一個在線工具,可幫助設計人員只需單擊幾下即可「 找到理想的字體組合 。 您只需要輸入所用字體的名稱,然後單擊「查看匹配項」即可發現一系列可以很好地協同工作的字體組合。 值得注意的是,您收到的輸出是一個簡單的示例文本文檔,該文檔將字體選擇用於標題和正文,從而使您對最終結果有很好的感覺。

What I like most about this tool is the showcase of website designs which are already using the suggested combination with nice results.

我最喜歡這個工具的地方是網站設計的展示,它們已經在使用建議的組合並且效果很好。

I think to get the most out of Typegenius you should use its suggestions as a starting point for further research of typefaces to create a unique combination. For example, you can plug one of the suggested fonts back into the tool to discover other pairings.

我認爲,要充分利用Typegenius,您應該將其建議用作進一步研究字體以創建獨特組合的起點。 例如,您可以將一種建議的字體重新插入該工具以發現其他配對。

I believe Typegenius – which is, of course, completely free – certainly warrants your attention.

我相信Typegenius(當然是完全免費的)肯定值得您注意。

字型 (Typeform)

Typeform

Typeform is an online app which helps you create beautiful forms for your website. Developing surveys, registration forms or questionnaires is no more a nightmare nor a time consuming process. With Typeform you can build almost everything just by dragging and dropping some ready-made elements in the editor.

Typeform是一個在線應用程序,可幫助您爲網站創建漂亮的表格。 制定調查表,登記表或調查表不再是噩夢,也不是耗時的過程。 使用Typeform,您只需在編輯器中拖放一些現成的元素就可以構建幾乎所有內容。

The best part of Typeform is it encourages you to build user friendly, conversational and (dare I say it?) fun web forms. Questions are delivered one at a time and users can enter their own answer or choose from a set of multiple choice answers. What's more, these multiple choice answers can include icons, images or even GIF, and you can even set keyboard shortcuts so that the user can answer without even touching the mouse.

Typeform最好的部分是它鼓勵您構建用戶友好的,對話性的(敢說嗎?)有趣的Web表單。 一次提供一個問題,用戶可以輸入自己的答案或從一組多項選擇答案中進行選擇。 而且,這些多項選擇答案可以包括圖標,圖像甚至是GIF,甚至可以設置鍵盤快捷鍵,以便用戶甚至無需觸摸鼠標即可進行回答。

In particular, with Typeform you can create all the following structures:

特別是,使用Typeform可以創建以下所有結構:

  • Contact Forms

    聯絡表格
  • Surveys

    調查
  • Contests

    比賽
  • Landing pages

    登陸頁面
  • Examination and Tests

    考試及測試

Typeform is free for the basic account, but you can upgrade to a Pro account for $20/month. The Pro version adds some features to the form such as the upload of files or the creation of a custom thank you page.

基本帳戶免費使用Typeform,但您可以以每月20美元的價格升級到Pro帳戶。 專業版向表單添加了一些功能,例如文件上傳或創建自定義感謝頁面。

In conclusion, if you want to create great forms, give Typeform a go.

總而言之,如果您想創建出色的表格,可以嘗試Typeform。

pixate (Pixate)

Pixate

Pixate is an online tool designed to reduce the gap between designers and developers who work together on a same application project. Pixate gives you the ability to create complex UI animations and interactions for iOS and Android without writing a line of code.

Pixate是一種在線工具,旨在減少在同一應用程序項目中共同工作的設計人員和開發人員之間的差距。 Pixate使您無需編寫任何代碼即可爲iOS和Android創建複雜的UI動畫和交互。

To make an element interactive, you only need to choose the gesture you prefer from a panel and drop this on the element. Pixate provides seven default interactions/gesture: drag, tap, double tap, long press, rotate, pinch and scroll. You can then bind an animation to each interaction.  

要使元素具有交互性,只需要從面板中選擇所需的手勢並將其放在元素上即可。 像素化提供了七個默認的交互/手勢:拖動,點擊,雙擊,長按,旋轉,收縮和滾動。 然後,您可以將動畫綁定到每個交互。

Another important feature of Pixate is the familiar use of layers which are extremely useful in managing different shapes and elements.

Pixate的另一個重要功能是熟悉的圖層用法,這些圖層在管理不同的形狀和元素時非常有用。

For me, what distinguishes Pixate from other similar tools is the simplicity of use: every aspect of the app can be quickly understood even by a non-experienced designer. Moreover, on the official site, you can find several video tutorials, some demos and a useful user guide which explains all the functions of the app.

對我而言,Pixate與其他類似工具的不同之處在於使用簡單:即使沒有經驗的設計師也可以快速理解應用程序的各個方面。 此外,在官方網站上,您可以找到一些視頻教程,一些演示和一個有用的用戶指南,其中介紹了該應用程序的所有功能。

Another reason to use Pixate?

使用Pixate的另一個原因?

It is completely free.

它是完全免費的。

墨水 (Ink)

Ink

Almost all websites are based on a responsive design which can adapt to any screen size. But are the emails you send to your subscribers responsive too?

幾乎所有網站均基於可適應任何屏幕尺寸的響應式設計。 但是,您發送給訂閱者的電子郵件是否也具有響應能力?

Ink, by Zurb (of Foundation framework fame), is a useful framework which gives you a hand to create responsive HTML emails that can be read on any device, independent of screen size. Thanks to Ink, you don’t need to decide anymore whether you have to optimize the email layout for Outlook or for smartphones.

Zurb( Foundation framework fame的作者 )的Ink是一個有用的框架,它使您可以創建響應性HTML電子郵件,該電子郵件可以在任何設備上閱讀,而與屏幕大小無關。 感謝Ink,您無需再決定是否必須優化Outlook或智能手機的電子郵件佈局。

With Ink you can develop your own email template from scratch or opt for one of the five pre-built layouts: the two most used templates are called 「Basic」 and 「Sidebar」. The first is perfect for basic but nice emails, while the second allows you to create a sidebar where you can list some links.

使用Ink,您可以從頭開始開發自己的電子郵件模板,也可以選擇五個預先構建的佈局之一:兩種最常用的模板稱爲「基本」和「側邊欄」。 第一個非常適合基本但美觀的電子郵件,而第二個則允許您創建側邊欄,您可以在其中列出一些鏈接。

Moreover, when dealing with 「inline styles」, you can use Ink’s Inliner tool which 「brings your email styles inline」.

此外,在處理「內聯樣式」時,您可以使用Ink的Inliner工具,該工具「使您的電子郵件樣式內聯 」。

Like Pixate, Ink too provides an useful and usable 「getting started」 guide. Ink is open source and you can download it for free. If you've spent any time at all working on email templates, you'll know what a minefield it can be if you don't know all the dark magic and pro tricks.

與Pixate一樣,Ink也提供了有用且可用的「入門」指南。 Ink是開源的,您可以免費下載。 如果您花了所有時間來處理電子郵件模板,那麼如果您不瞭解所有的黑魔法和專業技巧,就會知道它是一個雷區。

Ink builds all that in for you. You'll struggle to find a better starting point.

Ink爲您構建了所有功能。 您將很難找到更好的起點。

信息報 (Infogram)

Infogram

It may be the most overused cliche EVER, but yes it's true: a picture is worth a thousand words, and that’s why I’m going to introduce you to Infogram. This is an online tool which enables you to create and download beautiful visualizations of your data.

這可能是最被濫用的陳詞濫調EVER,但肯定這是真的:一張圖片勝過千言萬語,這就是爲什麼我會向你介紹Infogram 。 這是一個在線工具,使您可以創建和下載漂亮的數據可視化。

You can create interactive and responsive infographics as well as impressive charts. In particular, it is possible to choose from 30 chart types including models such as 「line」, 「bar」, 「area」 and 「map」.

您可以創建交互式和響應式信息圖表以及令人印象深刻的圖表。 特別是,可以從30種圖表類型中進行選擇,包括「線」,「條」,「區域」和「地圖」等模型。

With Infogram you can usually develop an infographic in just two steps:

藉助Infogram,您通常只需兩個步驟即可開發信息圖:

  1. First of all, you have to select the infographic template you prefer.

    首先,您必須選擇所需的信息圖表模板。
  2. Then, you can choose a chart and import your data through a spreadsheet -similar to Excel.

    然後,您可以選擇一個圖表並通過類似於Excel的電子表格導入數據。

Once you have finished, you can download the work as a graphic, or else generate an embed code to post the infographic on your website.

完成後,您可以將作品下載爲圖形,或者生成嵌入代碼以將信息圖發佈到您的網站上。

Unfortunately, Infogram is not free. You can try the free trial for 30 days but then, you have to create a 「pro account」 which costs $15/month.

不幸的是,Infogram不是免費的。 您可以免費試用30天,但隨後您必須創建一個「 專業帳戶」 ,每月費用爲15美元。

For professional web design agency, there is a 「business account」 which allows you to add your company logo to the project.

對於專業的網頁設計代理,有一個「企業帳戶」,可讓您將公司徽標添加到項目中。

Whatever the case, if you can see the value of using more infographics in your pitches, projects and reports, Infogram may well be a good investment.

無論如何,如果您可以看到在宣傳,項目和報告中使用更多圖表的價值,Infogram可能是一項不錯的投資。

迪林格 (DILLINGER)

Dillinger

Markdown has quietly become a text standard for the web over the last few years, with applications from Github to StackExchange to Reddit to Medium and Slack are taking advantage of the format. Even SitePoint itself only accepts new article submissions in Markdown.

在過去的幾年中,Markdown已悄然成爲Web的文本標準,從Github到StackExchange到Reddit到Medium和Slack的應用程序都在利用這種格式。 甚至SitePoint本身也只接受Markdown中的新文章提交。

The last tool we are going to see is Dillinger, an online Markdown editor which helps you write and format texts for web pages.

我們將要看到的最後一個工具是Dillinger,它一種在線Markdown編輯器 ,可幫助您編寫和格式化網頁文本。

What I mostly like of Dillinger is that it has a split screen so that you can write the Markdown text on the left and you can immediately see the formatted output on the right. In this way, you can avoid the risk of discovering a completely wrongly formatted passage after you render the text to HTML. This real-time conversion is highly practical and it will save you from many mistakes.

我最喜歡Dillinger的地方是它有一個分屏,因此您可以在左側寫Markdown文本,並在右側立即看到格式化的輸出。 這樣,您可以避免在將文本呈現爲HTML之後發現完全格式錯誤的段落的風險。 這種實時轉換非常實用,可以避免許多錯誤。

With Dillinger you can open and save files to and from Dropbox, Github, Google Drive and Open Drive, while you can export files in the following formats: HTML, PDF and Markdown.

使用Dillinger,您可以在Dropbox,Github,Google Drive和Open Drive之間打開和保存文件,同時可以以下格式導出文件:HTML,PDF和Markdown。

Happily, Dillinger is completely free, yet there are no annoying advertisements on the site.

令人高興的是,Dillinger是完全免費的,但該網站上沒有煩人的廣告。

In conclusion, if you have to write a lot to populate web pages or posts – or even just write a nice StackOverflow question – I recommend you take Dillinger for a test drive.

總之,如果您需要寫很多東西來填充網頁或帖子-甚至只是寫一個很好的StackOverflow問題-我建議您選擇Dillinger進行測試。

翻譯自: https://www.sitepoint.com/5-free-online-tools-speed-work/

免費 在線繪圖工具