交互式原型,交互原型图的作用

这两天工作室(@candsdesign.cn)里几个新加入的小designer总是聚在一起探讨着什么

在过去的两天里,(@candsdesign.cn工作室里的几个新设计师总是聚在一起讨论一些事情。只有在咖啡时间聊天后,他们才能知道他们使用哪个软件来更高效地交流UI/UX设计。

其实是见仁见智的问题。每个设计师都有自己用过的设计软件,比如PS,AI,CorelDRAW等。但是今天我们要介绍一个素描设计神器和他的朋友。他们的组合简直就是UI/UX设计的最佳搭档!

01首先来介绍一下我们今天的主角 – Sketch

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

Sketch是一款小巧但功能强大的Mac上的矢量绘图软件。最新版本增加了很多新功能,尤其是素描镜。相对于其他矢量绘图软件,如AI,Sketch具有使用简单、学习曲线低的优点,使我们能够用Sketch快速绘制图形,可以说是轻量级的AI。Sketch提供了基本的形状,它支持图像自动裁剪,PDF、EPS、SVG等格式文件的导入导出,并添加了移动设计模板,非常适合UI/UX设计。

00-1010首先,素描适合设计师哪个阶段?我们工作室的陈老师给出的答案让那些小设计们兴奋不已:素描适合两种人,一种是纯新手,因为软件太好用了!简。单身!的;另一种是纯老手,可以配合PS使用,事半功倍。

为什么素描很简单?看它的界面就一目了然了。

v52.6最新版本与时俱进。除了经典模式之外,该界面与macOS Mojave一样,增加了黑暗模式,使设计工作更加专注。

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

草图主窗口分为不同的部分:中心保持在画布上,而左侧面板显示层列表,右侧面板提供当前选定对象的所有属性和自定义选项。同时,顶部工具栏提供了最常用工具的按钮。简单的用户界面,虽然是英文界面,但是一般的功能图标也能让你轻松上手!

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

除了软件自带的各种模板(IOS AppIcon、IOS UI Design、MacAppIcon或WebDesign),开发者还提供了大量的在线资源,如模板、插件等。免费资源给设计带来更多便利和灵感!

02 Sketch如何成为设计师的新宠?

Sketck v52.6作为最新迭代版本,内置了轻量级的动态交互原型设计功能,但与专业的交互原型设计软件相比,功能更加简单。然而,由于其强大的设计功能,各种专业的原型设计软件开发商为了满足设计师的需求,开发了针对草图原型的插件。

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

Sketck v52.6内置动态交互原型功能。

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

03 能力超强,人缘更佳,朋友圈里全是好帮手

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

Framer Studio是一台Mac

上的强大的移动原型设计工具,基于Framer.js快速原型框架,可以快速的创建可交互的原型,支持移动应用的原型设计,集成了Photoshop & Sketch等软件,可以快速的将这些软件的源文件导入到原型中,受到了Google、Dropbox等公司的推荐。

Framer让你从简单的代码开始,将你的设计带到生活中。直接从Sketch或Photoshop导入图形,提高你的设计工作流程。在任何设备上测试它,随时进行迭代,并且很容易地分享给反馈。新互动模式或创造开创性的动画,没有限制,没有约束。

Framer与Sketch好像一对双胞胎,界面的相似度让设计师没有陌生感,两者结合应用,交互设计从未如此简单!

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

好友2:Principle

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

Principle 是一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者 Gif 并分享到社交平台。

Principle作为一款易于使用的设计工具,为您的应用程序生成交互式动画界面设计,以测试新想法或创建整个原型。其界面与Sketch极其相似,两者可无缝对接,让设计更为便捷。

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

好友3:Flinto

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

Flinto是一款轻量、高效的综合性交互原型设计工具,你可以使用它创建任何原型,从最简单的页面跳转到令人印象深刻的精美交互动效,无需任何代码也没有复杂的时间轴,Flinto的可操作性几乎是所有原型工具中最简单快捷的,五分钟制作高保真交互原型,我认为这正是所有交互设计师所期待的。

同样的,似乎Sketch又多了个同胞兄弟,相似的界面让设计师好像在使用一个软件在设计,而不是多软件联合创作!

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

好友4:Adobe XD

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

Adobe XD CC 是Adobe系列中优秀的交互原型设计工具,这是一款关于设计、原型、矢量的软件,使用 Adobe XD可以用于为网站设计网页和移动应用程序设计和原型化UX / UI解决方案。能够轻松地从线框,视觉设计,交互设计,原型制作,预览和共享等功能全部集成在Adobe XD强大的工具中。

不得不说,大厂的软件产品的确有保证,除了支持adobe系列的软件,与Sketch也能有机的结合。虽说Sketch从Adobe手上抢走了不少用户,但并没有消极的抵制,而是积极的配合,只为让设计师们拥有更好的设计工具。

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

好友5:Kite

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

Kite Compositor 让你可以直观地拖拽图层,在画布上构建复杂的界面。添加动画,并在集成的时间轴上调整它们。使用内置的JavaScript脚本环境来增强每个交互的细节。结合自定义逻辑和行为来实现您所需要的。

自从macOS最新版本增加了深色模式后,各开发商也相应的提供了深色的主题,Kite的界面好像只是比Sketch多了一个时间轴工作区,只能说美好的事物总是相似的!

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

好友6:Axure

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

Axure RP是最知名和最强大的原型设计工具,增加了大量新的特性,如应用多个动画,并同一时间运行一个小部件,如褪色,同时移动等,最新Axure RP 8具有全新的图标和界面设计。

Axure RP Pro 是专为 Rapid Prototype Design 而生,它可以辅助产品经理快速设计完整的产品原型,并结合批注、说明以及流程图、框架图等元素将产品完整地表述给各方面设计人员,如 UI、UX 等等,并在讨论中不断完善。

Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示 意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

介绍了这么多,工作室里的那几位小哥们好像已经开始去尝试了,为了让各位设计爱好者们更加直观的了解今天的主角-Sketch,将精心整理的学习资料分享给大家。

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

Sketch中文手册(CandS设计工作室整理)

构建交互原型,原来可以如此轻松!-Sketch和他的朋友们

Sketch中文视频教程

获取方法:

1、关注【CandS设计工作室】

2、评论或转发本篇文章,然后私信:Sketch

原创的设计理念,丰富的共享资源,我们的动力来自你们的支持,谢谢关注!

剪辑交流

sketchup变成英文了,sketchup怎么变成中文

2022-6-13 20:30:00

剪辑交流

韩国的rain演的电视剧,韩国明星rain演的电视剧

2022-6-13 20:32:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索