UI设计工具,分为2个派系。

其中,最大、最主流的派系,是Sketch、Adobe XD、墨刀这个派系。

这个派系的软件,操作方式、思路都非常接近,连常用快捷键都一样,会一个就等于都会了。

在一个无限大的画布上,用户可以创建任意数量的页面,创建的内容,可以包装成组件,复制粘贴到别的项目用。

比如,adobe xd,就是软件本体不自带任何UI套件,而是把UI套件的项目文件给你,你打开来,找到喜欢的UI组件,复制到自己的项目去就行了。

类似于,Photoshop里,可以在不同图片之间复制粘贴。

这个派系的软件,分2大功能区。上图你看到的是页面设计区,还有个交互设计区。就是你点什么按钮,跳到哪个页面,发生什么变化,都能连线连出来,模拟出程序最终面貌。

另外,软件自带功能不多,但都支持插件。类似于chrome功能不多,主要靠扩展。

比如,红框标注的插件,可以自动填充大量用户头像,模拟用户列表。

大部分插件是免费的,但也有收费插件。

这个派系内,几个软件的区别:

  • Sketch是这个派系的开创者,是龙头老大,但是只有mac版,而且官方声明不会开发windows版本。
  • 墨刀,是国产高仿Sketch版,而且是基于网页的,所以跨平台。但是几乎不免费。免费帐号只能创建3个项目,最多20个页面。等于完全不免费。

由于sketch不支持windows,过去几年,墨刀作为国内唯一近似产品,在国内很受欢迎。

  • Adobe XD,adobe的高仿Sketch产品,支持win/mac,有官方中文,100%完全免费,而且各种套件、模板、插件,都在飞速增长,而且大都是免费的。
  • (更新说明:XD对保存本地文件开始收费,保存到云空间依然免费。本质就是开始收费了。但是你还是可以找到免费版)

Adobe XD最吃亏的,就是面市比较晚,它在2019年,功能才追上它的前辈。如果它早几年面世,就没墨刀什么事了,XD就会像Photoshop一样,全面占领windows市场。

现在,虽然Adobe XD来的晚,但新用户也是飞速增长状态。毕竟,完全不要钱。

如果要使用这个派系的软件,推荐Adobe XD。首先,完全不花钱,就已经是巨大优势了。而且,还有来自全球的设计师提供免费组件。功能,大家都一样,全是高仿Sketch。

这个派系,能较容易做出漂亮页面,模拟丰富的页面互动和切换。但这个派系,实际上并不完美。它有个巨大问题:做功能草图低效。

在设计最初期,我们关注的是页面功能,是布局,完全无视美观。要求软件,能以最快速度,精确反映页面功能。

而Sketch, adobe xd这个派系,你会不停陷入修改组件图层的细节中。

比如,下图的按钮组件,当你点选时,你会发现右边不能修改颜色、文字。

那是因为,这个按钮,由很多基本图形组成,类似于Photoshop一张图片有很多图层。你要精确选到对应区域,才能修改对应属性。

而且,这个派系,你页面上的UI元素,是从各个不同的文件复制过来的小组件,颜色混杂、文字不统一,你都要一个个去修改。

这会导致,设计师不断陷入对美术细节的调整,而无暇专注于页面功能设计。

也就是说,这个派系,实际上不适合初期页面功能设计,而是在页面内容精确定型之后,用来做美工上的精确实现+互动模拟。


所以,这里,另一个高效的派系就要登场了:Balsamiq、Mockplus和Axure RP派系。

这个派系的特点是,自带完善、风格统一的组件库,组件没有图层,所有内容直接修改属性,也没有复杂颜色,不会干扰视觉。

这样,这个派系,能够迅速完成页面功能设计,完全不会被任何因素干扰。

但是,和Sketch派系各个软件几乎一模一样不同,这个派系的3个软件,差异其实很大。

Balsamiq,是模拟手绘草图风格,类似下面这种:

它只有黑白,不能设置颜色,模拟互动只有基本的点击跳转。优点是,他的简洁,让它能飞速完成功能设计,因此多年来都广受欢迎。

很多时候,有了上面这种草图,前端其实就可以写代码了,无需再整那些花里胡哨的,尤其是小团队、全栈开发的情况。

大名鼎鼎的Axure RP,是个古老的软件,它是在开发windows软件的时代的产物,如今来看一切都现得很过时。

如今来看,它自带的组件库非常过时,常用组件欠缺,大量过时组件永远用不上。它的互动设置也是,每个组件,都能够设置大量行为,然而,如今这个触屏、web为主的时代,95%的设置你都用不上,放在那纯属碍眼。

从很多角度讲,Axure RP是个应该被时代淘汰的产品。

Mockplus,实际上是介于Axure RP 和 Sketch派系之间的国货精品。

它的开发者曾经是Axure RP的用户,却不满于Axure RP的各种问题。于是,Mockplus很多方面,都像是个改良版的Axure RP。

Mockplus拥有Axure RP类似的界面、操作方式,但提供了与时俱进的组件,去掉了如今永远用不上的互动方式。

这样,它能像Axure RP那样,通过简洁便利的组件设置,初期只专注功能,快速完成页面功能设计,并模拟互动。等功能布局精确定型,又能通过样式设置,实现和Sketch派系一致的最终成果。

听起来很美好,然而,这是有代价的:

  • 组件靠官方提供,没有全球艺术家为它构造庞大内容库。
  • 从毫无美术感的功能草图,最终改成华丽的页面成品,需要手动设置非常多的内容。
  • 没有节点式互动设计。它在左上角有个页面列表,每个页面内,可以给按钮、链接,添加行为。比如跳转到其他页面,或改变本页某些内容。

MockPlus依然是非常传统的软件设计方式。对于复杂任务,不如Sketch派的节点式操作灵活。这种设计,能够高效的满足常见、基本需求,但无法适应复杂、高定制化的需求。

MockPlus显然意识到了这一点,于是推出了单独的节点式交互设计产品,叫iDoc。他是网页版,你把做好的UI设计图,上传之后,再拖线设计交互。这种专用的交互设计工具,提供审批、修订等团队工作流程。

国内有个叫蓝湖的产品,也是这样,只做交互,不做UI。蓝湖因为做得早,已经是一统天下的状态。功能上,这一类产品功能几乎完全一样,而且大都免费,所以用哪个都差不多。

用户量上,Mockplus 和 Sketch派的国货墨刀,用户都在50万左右。而且我相信会有一定重叠。因为这两个流派,有一定互补关系。


最终建议:

在页面功能设计阶段,使用Balsamiq或Mockplus,做到功能布局上,精确定型。

如果有进一步模拟的必要,再换用Adobe XD,升华美工,模拟互动。

mockplus模板_UI设计工具比较:Sketch、Adobe XD、墨刀、Mockplus、Axure RP相关推荐

  1. 原型工具介绍———墨刀以及Axure RP比较

    原型工具--墨刀以及Axure的比较 1759233 目录 一.了解背景... 1 二.下面分开介绍一下这两款工具... 1 2.1 Axure RP. 1 2.2墨刀... 6 三.比较... 8 ...

  2. sketch钢笔工具_设计工具(Sketch,Adobe XD,Figma和InVision Studio)中奇怪的一项功能

    sketch钢笔工具 When you build a new product that is very similar to the existing products in the market, ...

  3. 界面原型设计工具Balsamiq、墨刀、Axure、Mockplus

    Balsamiq的体验 这个基于Adobe AIR Runtime的工具实在是有让人眼前一亮的感觉,手绘风格的元件样式粗犷淋漓,能创建接近于纸上手绘的原型文件.其提供了丰富的手绘风格的web常用元件, ...

  4. 9款原型设计工具与Sketch的强强组合,轻松构建交互原型!

    9款原型设计工具与Sketch的强强组合,轻松构建交互原型! 原型设计的发展历史经历了纸上原型.静态线框设计.到现在的可交互式原型.作为设计过程中最初始的阶段,设计师们对原型设计的要求也越来越高.因此 ...

  5. 产品经理原型工具选择:墨刀和axure的区别?

    产品经理的最基本一项技能就是熟练使用原型工具,但是很多新入门的产品经理会困惑,如何选择原型图工具? 墨刀+axure就够用了. 墨刀主要是移动端原型,axure全能但是素材库比较麻烦. 对于我来说这要 ...

  6. 【知名的移动APP和网站设计工具】Sketch for Mac 54.1

    以上图片来源于互联网分享,如涉及版权问题请联系作者删除. 文章素材来源:风云社区(www.scoee.com) 下载地址:风云社区(www.scoee.com) [简介] Sketch 是一款适用于所 ...

  7. 摩客、墨刀、axure,原型设计工具哪个好用?

    1.查资料: 搜了一下官网说明: Axure RP是一个专业的快速原型设计工具. 摩客是更快.更简单的原型设计. 墨刀强大易用的原型设计与协同工具. 都是原型设计工具. 2.总结: 打个比方,Axur ...

  8. 快速原型工具 mockups和墨刀还有axure

    用axure制作原型的速度比较慢(交互操作太多),常常耽误时间,而且修改起来也比较繁琐,用了一段时间的axure后就弃用了. 在用axure的时候就想找一个能够快速制作原型的工具,就找到了摩客和墨刀. ...

  9. sketch软件_UI界面设计工具都在这里了,Sketch、XD、Figma哪个好?

    本文章转自:网易雷火UX用户体验中心 地址:https://mp.weixin.qq.com/s/HaQQSPCbByo1R9Zh6J336Q 好工具让点子漂亮着陆 十年前,那时候的设计师还只有PS一 ...

最新文章

  1. 复习03统计学习方法(K近邻KNN)---图片版
  2. Spark 分布式调试工具
  3. Android集成三方浏览器之Crosswalk
  4. aspnet中gridview文本只显示开始几个文本_软网推荐:三个小软件 轻松解决文本操作难题...
  5. 学习《PythonWeb开发实战(董伟明)》中文PDF+源代码
  6. 阿里云朱照远:视频云2.0,更大规模、更智能、更清晰
  7. Flex组件的行为和动画效果(实例)
  8. Debugging with GDB (6) gdb 命令
  9. 除非万不得已,否则绝不谈判
  10. redis cluster以及master-slave在windows下环境搭建
  11. atitit.attilax的软件 架构 理念.docx
  12. Springboot集成Screw生成数据库表结构文档
  13. 一会通一会不通 一台设备ping_Linux刚开机能ping通网关,一会就ping不通了
  14. 【听】红高粱,莫言经典诺贝尔文学奖小说
  15. 利用JavaScript设置隐藏功能
  16. 看一遍就理解:order by详解
  17. A - Two Arrays
  18. 图书推荐系统(附源码链接)
  19. 金刚铠甲心咒全文注音
  20. java math 弧度,Java Math.toRadians()角度转换为弧度

热门文章

  1. 雷军2001年去搜狐见张朝阳不是为面试 而是给卓越网拉融资
  2. matlab 椭圆方程拟合,matlab中如何插值拟合求椭圆方程
  3. **遇到“Cannot create file “不要慌**
  4. 实战 .Net 数据访问层 - 19
  5. 微信小程序详解 php,微信小程序canvas基础详解
  6. 2021年全国职业院校技能大赛:网络系统管理项目-真题-模块C-2全套视频讲解含无线地勘
  7. SAP软件ERP系统简介
  8. 解决cv2.error: OpenCV(4.5.1) /tmp/pip-req-build-n_alixql/opencv/modules/highgui/问题
  9. 计算机ps特效教程,计算机一级photoshop给照片制作半素描效果教程
  10. EXCEL:摒弃千篇一律,修改工作表中网络线的颜色