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.mzph.cn/news/275827.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端 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关键字指定这个类型必须是继承某个类&#…

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…

中台之上(二):为什么业务架构存在20多年,技术人员还觉得它有点虚?

业务架构这个词大家时常听到&#xff0c;但是能解释得清楚的却不多&#xff0c;撩撩度娘&#xff0c;你就会发现&#xff0c;不少人问及业务架构和应用架构的关系&#xff0c;聊天时&#xff0c;也常有人问起业务架构师和产品经理什么区别&#xff1f;业务架构分析和需求分析什…

你对webpack了解多少?

大家好&#xff0c;我是若川。之前有一个朋友给我留言&#xff1a;自己目前在一家小厂工作&#xff0c;对webpack的使用比较熟悉&#xff0c;想要跳槽去大厂&#xff0c;但是纠结是否还需要深入学习webpack&#xff08;因为觉得学了也用不到&#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 …

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;整体…

插图 引用 同一行两个插图_将图标变成插图的五个简单步骤

插图 引用 同一行两个插图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 …

web登录界面设计_出色的Web界面设计的7条规则

web登录界面设计When you work on a website or on the design of web pages, remember that their success is not determined by the beauty of their visual style. In fact, in his article “10 Principles Of Good Website Design”, Vitaly Friedman stated:当您在网站或…

关于为什么我推荐大家看vue代码的随想

大家好&#xff0c;我是若川。今天给大家推荐一篇大圣老师在知乎的回答&#xff0c;很快能看完。我也曾经回答过这个问题。若川知乎高赞&#xff1a;有哪些必看的 JS 库&#xff1f;不要为了读源码而读源码&#xff0c;但要学会看源码。自己常用的熟悉的库的源码值得读读。点击…

算法 - 最好、最坏、平均复杂度

注&#xff1a;本文仅为笔记。 原文 极客时间 - 数据结构与算法之美 - 04 | 复杂度分析&#xff08;下&#xff09;&#xff1a;浅析最好、最坏、平均、均摊时间复杂度 最好、最坏时间复杂度 略&#xff0c;比较容易分析。 平均时间复杂度 需考虑概率来计算。 概率论中的加权平…

555的传说

郑昀 20101118 昨天听1039电台才知道&#xff0c;北美电影里常出现的555开头号码是行规惯例&#xff0c;因为当年贝尔系统为测试链路中所有交换机的基本功能&#xff0c;全部由5组成的号码&#xff08;555–5555&#xff09;作为特别的测试号码被保留&#xff0c;时至今日只剩下…

没想到你是这样的npm install

大家好&#xff0c;我是若川。今天给大家推荐一篇关于 npm install 的好文。很快能看完。点击下方卡片关注我、加个星标学习源码整体架构系列、年度总结、JS基础系列前言项目中执行npm install发生了什么&#xff0c;众所周知&#xff0c;执行npm install时会在当前项目目录的n…

Django——Model

一、 ORM 在 MVC 或者说 MTV 设计模式中&#xff0c;模型&#xff08;M&#xff09;代表对数据库的操作。那么如何操作数据库呢&#xff1f; 我们可以在 Python 代码中嵌入 SQL 语句。 但是问题又来了&#xff0c;Python 怎么连接数据库呢&#xff1f;可以使用类似 pymysql 这一…

大理石在哪儿_如何创建用户体验写作课程而又不失大理石

大理石在哪儿I’m a UX Writer. It’s a designated human on the software development team who writes words for interfaces. All the words. From the tiniest tooltips to navigation, to buttons, to errors, and so on, ad infinitum. UX writing is less writing and …

Vuex 源码还有一些缺陷?

我看了vuex3和vuex4的源码也输出了文章&#xff0c;看到这篇时&#xff0c;vuex还有缺陷&#xff1f;看了看确实是好文&#xff0c;不愧是大佬写的。文章不算长&#xff0c;推荐给大家看看。点击下方卡片关注我、加个星标学习源码整体架构系列、年度总结、JS基础系列众所周知&a…