UI设计工具比较:Sketch、Adobe XD、墨刀、Mockplus、Axure RP

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%完全免费,而且各种套件、模板、插件,都在飞速增长,而且大都是免费的。

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,升华美工,模拟互动。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/437973.shtml

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

相关文章

光学字符识别 Tesseract-OCR 的下载、安装和基本用法

OCR:即Optical Character Recognition,光学字符识别,是指检查纸或者图片上打印的字符,通过检测暗、亮的模式确定其形状,然后用字符识别方法将形状翻译成计算机文字的过程; Tesseract-OCR:一款由…

利用官方支持为基于GitHub Pages的Hexo博客启用HTTPS

2022-01-25 更新:博客新地址:https://www.itbob.cn/,文章距上次编辑时间较远,部分内容可能已经过时! HTTP(超文本传输协议),是一个基于请求与响应,无状态的,应…

标注功能介绍

Mockplus3.5.0.1版本中,新增了标注功能。多种标注模式,智能生成,随时查看。原型设计效率更高。 Mockplus的标注功能有以下四种模式: 1、无选中标注 在未选中任何组件时,按住Ctrl键,鼠标经过某个组件&#…

REVERSE-COMPETITION-HGAME2022-Week3

REVERSE-COMPETITION-HGAME2022-Week3Answers Windowscreakme3hardenedfishmanAnswer’s Windows 含有GUI的程序,ida打开,ShiftF12打开字符串窗口,发现"right"和"wrong" 对"right"查找交叉引用,来…

NuGet的简单使用

什么是NuGet? NuGet(读作New Get)是用于微软.NET开发平台的软件包管理器,是一个Visual Studio的扩展。在使用Visual Studio开发基于.NET Framework的应用时,NuGet能够令你在项目中添加、移除和更新引用的工作变得更加…

Python3 爬虫学习笔记 C02 【基本库 requests 的使用】

Python3 爬虫学习笔记第二章 —— 【基本库 requests 的使用】文章目录【2.1】 requests 简介【2.2】 requests 基本用法 【2.3】 requests 构建 GET 请求 【2.3.1】 基本用法【2.3.2】 二进制数据抓取 【2.3.3】 添加 headers【2.4】 requests 构建 POST 请求 【2.5】 request…

REVERSE-COMPETITION-HGAME2022-Week4

REVERSE-COMPETITION-HGAME2022-Week4( WOW )serverezvmhardasm( WOW ) 32位exe,ida打开 观察伪代码逻辑,上面的红框中,输入经过加密,密文放入Buf2中,然后Buf2和已知的密文res比较 比较完,打印"win&q…

Python3 爬虫学习笔记 C03 【Ajax 数据爬取】

Python3 爬虫学习笔记第三章 —— 【Ajax 数据爬取】文章目录【3.1】Ajax 简介 【3.2】解析真实地址提取【3.1】Ajax 简介 Ajax — Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。可…

REVERSE-COMPETITION-HWS-5TH-2022

REVERSE-COMPETITION-HWS-5TH-2022re1re2re3re1 64位exe,ida打开,来到main函数 输入的长度应为32,输入经过TEA加密,密文与已知的cipher进行比较 进入TEA函数,发现是魔改TEA,需一次性传入8个unsigned int&…

REVERSE-COMPETITION-DSCTF-2022

REVERSE-COMPETITION-DSCTF-2022catchmeFFunctionnothingbad_applefantastic_cpucatchme 安卓逆向,java层传递输入,调用native层的check方法 ida打开.so文件,没有直接找到check方法,JNI_OnLoad也看不出什么 Findcrypt查到AES的S盒…

01-单一职责原则(SPR)

1. 背景 类T负责两个不同的职责:职责P1,职责P2。当由于职责P1需求发生改变而需要修改类T时,有可能会导致原本运行正常的职责P2功能发生故障。 2. 定义 不要存在多于一个导致类变更的原因。通俗的说,即一个类只负责一项职责。 3.…

Python3 已经安装相关库,Pycharm 仍然报错 ModuleNotFoundError: No module named 'xxxxxx' 的解决办法

以 requests 库为例,打开 cmd,运行命令 pip install requests,即可安装 requests 库,由于我已经安装过,所以会提示 Requirement already satisfied 此时,我们使用 Pycharm 运行以下代码: impo…

Sharepoint学习笔记—Site Definition系列-- 3、创建ListDefinition

创建一个List Definition有多条途径,这里由于我们要基于前面的用户自定义Content Type来创建一个List Defintion,所以我们就需要使用到List Definition From Content Type模板。 这里先大致描述如何创建List Definition,然后重点介绍一下Li…

Sharepoint学习笔记—error处理-- The user does not exist or is not unique.

看到网上不少人遇到过这种类似的错误,而产生这种错误的原因也有多种,我产生此错误的背景是在试图通过ECMAscript对象模型把一个User添加到某个指定的Group中时遇到的。 问题1.当我试图把一个User添加到Sharepoint的某个指定的Group,…

Knockout学习笔记之二($root,$parent及$data的区别)

以下是我从Google上找到的一个例子,非常生动形象,我修改了部分代码,具体内容如下: 对于$root 与$parent的区别: $root refers to the view model applied to the DOM with ko.applyBindings;译:$root 是指…

GitHub 学生认证,申请 GitHub 学生包

GitHub 面对学生推出了学生认证服务,通过认证后就可以得到学生包,学生包大概有十几项优惠,包括 DATADOG Pro 帐户、免费两年的10台服务器,Icons8 3个月的带图标,照片,插图和音乐订阅服务、JETBRAINS 专业桌…

Python3 使用 pymysql 连接 MySQL 建表时出现 Warning3719 UTF8 警告

在学习 Python3 爬虫关系型数据库储存时,利用 pymysql 连接 MySQL 建表,测试用的代码如下,第一句 SQL 用于获取当前 MySQL 的版本信息,第二句 SQL 执行创建 spiders 数据库的操作,如果程序代码正确,将会输出…

完美解决 bash: hexo: command not found

背景介绍:有好几天没动过 Hexo 博客了,今天准备更新的时候输入 hexo s,报错 bash: hexo: command not found,这是啥情况?以前都好好的,想了一下,大概是这几天折腾各种 Python 库的原因&#xff…

Sharepoin学习笔记 —架构系列--02 Sharepoint的处理(Process)与执行模型(Trust Model) 1

Sharepoint210有四种执行模型: 1、完全信任执行模型(Full Trust) 2、Bin/CAS 执行模型 (1与2都属于场解决方案) 3、沙盒执行模型(Sand Box) 4、 混合执行方法(Hybrid Approach) Sharepoint最简单的处理模型就是一个完整的Asp.net应…

Python3 爬虫学习笔记 C10【数据储存系列 — MySQL】

Python3 爬虫学习笔记第十章 —— 【数据储存系列 — MySQL】文章目录【10.1】MySQL 基本操作语句数据库操作表操作表的结构表的数据【10.2】Python 连接 MySQL【10.3】创建表【10.4】插入数据【10.5】更新数据【10.6】删除数据【10.7】查询数据【10.8】实战训练 — 爬取CSDN博…