ui原型設計工具_UI設計師的工具包,用于專業模型,原型和產品插圖

ui原型設計工具

This is a followup to my previous article

這是我上一篇文章的后續

visual tools for UX Designers視覺工具
  1. 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.

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

  2. 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.

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

  3. 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!

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

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.

一個經典的二重奏,但仍然是兩個行業的領導者 。 這是將任何級別的保真度模型組合在一起,并通過代碼檢查和注釋進行協作將它們轉變為可單擊的原型基本程序包。

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來處理從線框到最終模型的所有內容。 使用符號庫 ,可以輕松創建反復出現在文檔中的可重用元素。 當需要更新它們時,您只需要更新主符號,更改便會在所有地方生效。 花一些時間來學習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之間的合作關系與名為Craft的插件相當無縫。 當這兩個軟件包組合在一起時,您將擁有一個完整的UI工具,可以用來設計從開始到完成的可單擊原型的產品。 InVision可以通過Craft插件輕松地從Sketch導入畫板。 從那里,開發人員可以檢查每個頁面以查看代碼并下載資產。 此外,您可以創建一個可點擊的原型,與您的同事共享并獲得協作性評論。 這是您開始UX / UI設計所需的全部。

two hands typing on a laptop
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以求的方式更流暢地制作自定義設計的產品插圖。 如果您擁有iPad,那么您基本上知道它是一臺觸摸電腦。 但是,對于設計師來說, 將iPad與Apple Pencil結合使用時,iPad的美麗就可以充分展現 。 請勿嘗試在此平板電腦上使用任何其他手寫筆,因為Apple Pencil是專門為iPad設計的,包括圖紙中的壓力感應功能。

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

someone holding up an iPad with an abstract illustration displayed
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.

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

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中創建動畫,進行渲染,然后與開發人員共享。 Lottie生成的文件跨平臺且比大多數圖像小。 不難看出為什么這種格式Swift成為整個行業動畫的新標準。 這里有一些指南,可以幫助您入門!

an abstract image of movement
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!

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

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

ui原型設計工具

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275827.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275827.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275827.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

java wsdl xfire_java調用wsdl xfire和cxf兩種方式

xfire 如下:String spID "";String password "";String accessCode "";String content "";String mobileString "";String url "";String operateName "Submit";Object[] object newObject…

請求與響應

HTTP 請求與響應 HTTP 請求的組成的四部分: 1 動詞 路徑 協議/版本2 Key1: value12 Key2: value22 Key3: value32 Content-Type: application/x-www-form-urlencoded2 Host: www.baidu.com2 User-Agent: curl/7.54.034 要上傳的數據 關于以上各部分內容的碎碎念&…

前端 Offer 提速:如何寫出有亮點的簡歷

大家好,我是若川。今天推薦一篇8年工作經驗字節大佬的文章,如何寫出有亮點的簡歷。可以收藏常看。點擊下方卡片關注我、加個星標。學習源碼整體架構系列、年度總結、JS基礎系列先來個靈魂拷問:「你與他人相比,有什么能形成明顯區分…

2008中的membership profile操作(轉)

<profile > <properties> <add name"jimmy" /> </< span>properties> </< span>profile> 然后就那么簡單,后臺就能通過Profile拿到: Profile.jimmy "Pumpkin Ravioli"; 然后~通過這種方式就跟Session一樣&a…

css網格_一個CSS網格可以全部統治

css網格The case for using one CSS grid for your entire website在整個網站上使用一個CSS網格的情況 CSS網格與Flexbox (CSS Grid vs Flexbox) In the dark ages, we used table, a few years ago we used float and before today most of us used flex . Of course, these …

java 高級泛型_Java 泛型高級

1、限制泛型可用類型在定義泛型類別時&#xff0c;預設可以使用任何的類型來實例化泛型中的類型&#xff0c;但是如果想要限制使用泛型的類別時&#xff0c;只能用某個特定類型或者其子類型才能實例化該類型時&#xff0c;使用extends關鍵字指定這個類型必須是繼承某個類&#…

做Web前端開發的你必須會這幾點!

1、Web開發分類與區別 人們通常將Web分為前端和后端&#xff0c;前端相關的職位有前端設計師(UI/UE)&#xff0c;前端開發工程師&#xff0c;后端相關的有后端開發工程師。 2、技術棧區別 看各大招聘網站上&#xff0c;公司對前端開發工程師的要求莫過于精通HTML&#xff0c;CS…

PDA開發系列:GPS模塊的調用

摘要在wince6.0中&#xff0c;要調用GPS模塊&#xff0c;其實是一件很容易的事情。 正文在wince6.0中&#xff0c;如果要調用GPS模塊&#xff0c;其實很簡單&#xff0c;微軟已經為我們做好了這一切&#xff0c;我們只需要在自己的解決方案中&#xff0c;添加對Microsoft.Windo…

2021 年最值得使用的 Node.js 框架

大家好&#xff0c;我是若川。今天推薦一篇譯文&#xff1a;2021年最值得使用nodejs框架&#xff0c;值得收藏&#xff0c;很快能看完。點擊下方卡片關注我、加個星標。學習源碼整體架構系列、年度總結、JS基礎系列Node.js 是最敏捷的服務端 web 應用平臺&#xff0c;因為它為應…

面試被拒絕如何爭取_爭取反饋

面試被拒絕如何爭取Let me start by saying that Dribbble is awesome. I’ve been a member of the Dribbble community for years. I swoon over the beautiful design I see throughout the site. Dribbble is among the most popular places to go for inspiration and whi…

highgui java opencv_java – OpenCV 3.0.0 JAR缺少HighGUI

我正在使用Java支持來編譯OpenCV 3.0.0。我的腳本是&#xff1a;mkdir /opt/opencv /opt/opencv/opencv-buildcd /opt/opencvgit clone https://github.com/Itseez/opencv.gitcd /opt/opencv/opencv-buildexport OPENCV_INSTALL_PATH/opt/opencvexport FFMPEG_PATH/opt/ffmpeg/…

中臺之上(二):為什么業務架構存在20多年,技術人員還覺得它有點虛?

業務架構這個詞大家時常聽到&#xff0c;但是能解釋得清楚的卻不多&#xff0c;撩撩度娘&#xff0c;你就會發現&#xff0c;不少人問及業務架構和應用架構的關系&#xff0c;聊天時&#xff0c;也常有人問起業務架構師和產品經理什么區別&#xff1f;業務架構分析和需求分析什…

你對webpack了解多少?

大家好&#xff0c;我是若川。之前有一個朋友給我留言&#xff1a;自己目前在一家小廠工作&#xff0c;對webpack的使用比較熟悉&#xff0c;想要跳槽去大廠&#xff0c;但是糾結是否還需要深入學習webpack&#xff08;因為覺得學了也用不到&#xff0c;但又怕面試不通過&#…

轉:數據庫關系模式的范式詳解

關系模式的范式 主要有4種范式&#xff0c;1NF&#xff0c;2NF&#xff0c;3NF&#xff0c;BCNF&#xff0c;按從左至右的順序一種比一種要求更嚴格。要符合某一種范式必須也滿足它前邊的所有范式。一般項目的數據庫設計達到3NF就可以了&#xff0c;而且可根據具體情況適當增加…

紋理對象紋理單元紋理目標_網頁設計理論:紋理

紋理對象紋理單元紋理目標Texture has become an indispensable element in web design. It is not only a trend but also a quick way to increase the depth of web pages. When designers learn to use textures, they can strengthen the appeal of web pages. It can be …

javascript-高級用法

22.1 安全的類型檢測 為什么&#xff1a;typeof 不靠譜, 無法將數組從對象中區分出來&#xff0c; instanceof 有特殊情況&#xff0c;在iframe存在的情況下無法判斷另一個iframe內的數組 如何做&#xff1a;Object.prototype.toString().call(Arr); 22.3 高級定時器 特點&…

java dao層和base層_詳解Javaee Dao層的抽取

有時候我們在實現不同功能的時候回看到很多的Dao層的增加、修改、刪除、查找都很相似&#xff0c;修改我們將他們提取BaseDao一、提取前1. 提取前的LinkDao層&#xff1a;public interface LinkManDao {Integer findCount(DetachedCriteria detachedCriteria);List findByPage(…

暢銷書《深入淺出Vue.js》作者,在阿里淘系1年的收獲成長

大家好&#xff0c;我是若川。今天推薦一篇95年的博文的文章。他的故事應該挺多人知道。如果不知道可以看他的博客 https://github.com/berwin/blog點擊下方卡片關注我、加個星標時間好快&#xff0c;眨眼間&#xff0c;加入阿里已經一年了。這一年發生了很多事&#xff0c;整體…

GrideView屬性的學習

GridView 控件可公開分頁事件和排序事件&#xff0c;以及在創建當前行或將當前行綁定至數據時發生的事件。單擊一個命令控件&#xff08;例如&#xff0c;包含在 GridView 控件中作為其中的一部分的 Button 控件&#xff09;時也會引發事件。下表描述了由 GridView 控件公開的事…

插圖 引用 同一行兩個插圖_將圖標變成插圖的五個簡單步驟

插圖 引用 同一行兩個插圖Every creative person has probably already been in this situation: A project, be it a website, an app — or as far as I am concerned: often a news story would benefit from an appealing side visual. But neither budget nor time makes …