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,一经查实,立即删除!

相关文章

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 …