ui原型設(shè)計工具

This is a followup to my previous article

這是我上一篇文章的后續(xù)

visual tools for UX Designers視覺工具

Tools don’t make designs better– you do! It doesn’t matter if you paid a lot of money for the latest software, or if you simply have a pencil and paper. Good work comes from thorough iterations, working through the design process.

工具不能使設(shè)計變得更好，而是可以！ 您是否為購買最新軟件花了很多錢，還是只擁有鉛筆和紙都沒關(guān)系。 好的工作來自于反復的迭代，貫穿了整個設(shè)計過程。

You don’t have to know them all. A good designer employs a variety of tools and also knows when and where to utilize them. Keeping just one or two tools that address each type of issue is enough. You’ll waste everyone’s time if you try to learn them all.

您不必全部了解它們。 好的設(shè)計師會使用各種工具，并且知道何時何地使用它們 。 僅保留一個或兩個解決每種類型問題的工具就足夠了。 如果您嘗試全部學習，則會浪費每個人的時間。

I’m not an influencer. I suggest specific tools only because I have experience with them in particular as the sole designer in a small startup, or I know of others in the industry who are having success using them. I’ll try my best to list a few examples of each type of tool if I bring up a brand. In any case, always do your own research!

我不是網(wǎng)紅。 我之所以建議使用特定的工具，是因為我特別有在小型創(chuàng)業(yè)公司中擔任唯一設(shè)計師的經(jīng)驗，或者我認識該行業(yè)中的其他成功使用它們的人。 如果我提出一個品牌，我會盡力列出每種工具的一些示例。 無論如何，請務(wù)必進行自己的研究！

1. Sketch App / InVision (1. Sketch App / InVision)

A classic duo, but still two of the industry leaders. This is the basic package to put together any level of fidelity mockups and turn them into a clickable prototype with code inspection and commenting for collaboration.

一個經(jīng)典的二重奏，但仍然是兩個行業(yè)的領(lǐng)導者 。 這是將任何級別的保真度模型組合在一起，并通過代碼檢查和注釋進行協(xié)作將它們轉(zhuǎn)變?yōu)榭蓡螕舻脑偷幕境绦虬?

I use Sketch App for everything from wireframes to final mockups. With a symbol library, it’s easy to create reusable elements that appear over and over in your documents. When it comes time to update them, you only need to update the master symbol and the changes take effect everywhere. Take the time to learn about symbols and libraries in Sketch and you’ll unleash its full potential.

我使用Sketch App來處理從線框到最終模型的所有內(nèi)容。 使用符號庫 ，可以輕松創(chuàng)建反復出現(xiàn)在文檔中的可重用元素。 當需要更新它們時，您只需要更新主符號，更改便會在所有地方生效。 花一些時間來學習Sketch中的符號和庫，您將釋放其全部潛能。

The partnership between Sketch and InVision is fairly seamless with a plugin called Craft. And when these two software packages come together, you have yourself a complete UI tool that can be utilized to design products from start to finished clickable prototype. InVision easily imports your artboards from Sketch through the Craft plugin. From there, developers can inspect each page to see code and download assets. Additionally, you can create a clickable prototype to share with your colleagues and get collaborative comments. This duo is all you need to get started in UX/UI design.

Sketch和InVision之間的合作關(guān)系與名為Craft的插件相當無縫。 當這兩個軟件包組合在一起時，您將擁有一個完整的UI工具，可以用來設(shè)計從開始到完成的可單擊原型的產(chǎn)品。 InVision可以通過Craft插件輕松地從Sketch導入畫板。 從那里，開發(fā)人員可以檢查每個頁面以查看代碼并下載資產(chǎn)。 此外，您可以創(chuàng)建一個可點擊的原型，與您的同事共享并獲得協(xié)作性評論。 這是您開始UX / UI設(shè)計所需的全部。

Photo by Stanley Dai on Unsplash 斯坦利·戴 ( Stanley Dai)在Unsplash上拍攝的照片

2. iPad / Apple Pencil / Procreate (2. iPad / Apple Pencil / Procreate)

This powerful trio will enable you to make custom-designed product illustrations more fluidly than you’d ever dreamed. If you have an iPad, you know that it’s basically a touch computer. But when it comes to designers, the beauty of the iPad is fully exposed when you combine it with the Apple Pencil. Don’t try to use any other stylus with this tablet as the Apple Pencil is specifically designed to work with the iPad, including pressure sensitivity in your drawings.

這個功能強大的三重奏使您可以比您夢dream以求的方式更流暢地制作自定義設(shè)計的產(chǎn)品插圖。 如果您擁有iPad，那么您基本上知道它是一臺觸摸電腦。 但是，對于設(shè)計師來說， 將iPad與Apple Pencil結(jié)合使用時，iPad的美麗就可以充分展現(xiàn) 。 請勿嘗試在此平板電腦上使用任何其他手寫筆，因為Apple Pencil是專門為iPad設(shè)計的，包括圖紙中的壓力感應功能。

Procreate is an intuitive, powerful illustration app with professional export settings and layers. Your imagination is the only limit with this software. I use it to draw product illustrations. When they’re ready to go, I simply airdrop them to my laptop as a PDF and drag them into Sketch. It’s a seamless process that allows me the control of a pencil with the powers of non-destructive editing and an unlimited variety of digital brushes. If you’re new to Procreate, check out Gal Shir’s YouTube channel for some tutorials.

Procreate是具有專業(yè)導出設(shè)置和圖層的直觀，功能強大的插圖應用程序。 您的想象力是此軟件的唯一限制。 我用它來繪制產(chǎn)品插圖。 當他們準備好出發(fā)時，我只需將它們以PDF的形式空投到我的筆記本電腦中，然后將其拖到Sketch中。 這是一個無縫的過程，它使我能夠使用無損編輯和無數(shù)種數(shù)字畫筆來控制鉛筆。 如果您不熟悉Procreate，請查看Gal Shir的YouTube頻道以獲取一些教程。

Photo by Henry Ascroft on Unsplash Henry Ascroft在Unsplash上的照片

3.后效應/樂透 (3. After Effects / Lottie)

Motion and animation have become so ubiquitous in digital products that our experience now feels stifled and jagged without them. Airbnb’s opensource libraries have changed the game and leveled the playing field for designers who want to incorporate animations into their designs.

運動和動畫在數(shù)字產(chǎn)品中已變得無處不在，以至于沒有它們，我們的經(jīng)驗就會令人窒息和參差不齊。 Airbnb的開源庫改變了游戲規(guī)則，并為希望將動畫融入其設(shè)計中的設(shè)計師提供了公平的競爭環(huán)境。

With the After Effects plugin, you can create your animations right in After Effects, render them, and then share with your developers. The file that Lottie produces is cross-platform and tinier than most images. It’s not hard to see why this format is quickly becoming the new standard for animation across the industry. Here’s a little guide to help you get started!

使用After Effects插件，您可以直接在After Effects中創(chuàng)建動畫，進行渲染，然后與開發(fā)人員共享。 Lottie生成的文件跨平臺且比大多數(shù)圖像小。 不難看出為什么這種格式Swift成為整個行業(yè)動畫的新標準。 這里有一些指南，可以幫助您入門！

Photo by Joel Filipe on Unsplash Joel Filipe在Unsplash上拍攝的照片

Thank you for taking the time to read about these three powerful toolsets. I hope that you’ll be able to employ them, or similar software, to continue creating great design work. Happy designing!

感謝您抽出寶貴的時間來閱讀這三個功能強大的工具集。 我希望您能夠使用它們或類似的軟件來繼續(xù)進行出色的設(shè)計工作。 設(shè)計愉快！

翻譯自: https://uxdesign.cc/ui-designers-toolkit-for-professional-mockups-prototypes-and-product-illustrations-aae5b428aa7b

ui原型設(shè)計工具

總結(jié)

以上是生活随笔為你收集整理的ui原型设计工具_UI设计师的工具包，用于专业模型，原型和产品插图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。