恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
我们是需要更好的原型设计还是简单的代码编译?
0.0°
2016-09-23 自译外文 经验/观点 原作者: Daniel Hollick 举报 7406 122 98 21

Image title

我们是需要更好的原型设计还是简单的代码编译?

毫无疑问,是第二个。


作为一名设计师,我们经常没有达成一致性。在实践中不能对设计@1x,@2x,@3x达成共识。(提示:这里是@1x)

不能认同称呼我们自己为 - 一名UI/UX/产品/服务/全能的独角兽。

我们当然不能认同在工作中那个软件是最好的 - Sketch, Photoshop, Adobe XD, InVision, Proto.io, Framer还是 Pixate。


唯一一个可以认同的是我们需要更好的工具。工具是连接设计师和开发者之间的山谷的桥梁,而不用隔着山谷大喊。

在我们研究怎样来连接之前,先看一下为什么是这样的。


现有的原型设计工具:

Image title

                                  当然,还有许多工具我没有列举。请你们随意留着给自己用吧。><


本质上来说一共有三种类型的工具:

  • 矢量工具
  • 多页面工具
  • 单页面工具

让我们来分析一下每一类:


矢量工具

Image title

如果你到过任何有设计师的地方,你都会看过或者用过其中的一个软件。90%的设计师不可避免的要做矢量相关的工作。


优点:

  • 使用超级简单。
  • 这种简单的使用方法是设计师可以很快的准确的表达他们的想法。

缺点:

  • 没有交互功能的限制。我们停在平面的画板上然后再在另一个多页面的交互工具,像InVision,模拟交互,把他们连接到一起。
  • 设计多屏幕尺寸是个很需要解决的问题(尽管Sketch在处理这方面更容易些)。
  • 需要复杂的交接文档确保开发者可以明白设计思想。


多页面工具

Image title

正如上面提到的,这些工具是连接矢量设计,使它们能够串联在一起让整个软件流动起来。事实上,大多数好的工具直接与Sketch连接起来提高工作流。


优点:

  • 使用很简单。
  • 使设计师可以更真实的模拟一个软件。
  • 当表达一个概念的时候会更加有用处,他们有完善的演示流程、动画及简单的交互。

缺点:

  • 所有的交互都是假的。我的意思是软件里没有真实的内部逻辑。像文本域和数据等很难去模拟。


单页面工具

Image title

这些工具主要是使原型设计更细化,更精细的交互。更适用于展示单页面流和部分片刻。


优点:

  • 相当高级别的交互。一些工具,像Framer,你可以完成文本域,用真实的数据进行交互。

缺点:

  • 高学习曲线。越多的交互,越高的学习曲线。Pixate要求要懂Javascript来开发某些功能。Origami要求利用一个很大的节点集。Framer是用代码来进行设计的(CoffeeScript更像是一个更可读的Javascript版本)。
  • 开发者需要花时间重复你已经完成的工作。


好了,到底这些有什么问题呢?


高的学习曲线有什么问题呢?如果你能用代码向开发者展示交互流程这当然是值得的。

但是,事实不是这样的。

没有一个软件解决在UI设计中的主要问题:在设计和开发之间搭起桥梁。

当你把设计交给开发时,之前所有的学的CoffeeScript串联节点都被扔掉了。这些可能会帮助开发者更好的理解你的设计,不过他扔回重新用代码编写。

这是很耗时间的。无论是你的还是他们的。

Image title

                                           这将会是你。

所以,答案是什么呢?

不是让这些原型设计工具更复杂。而是更直观的编写UI。在理想的情况下,设计师可以用代码编写UI,同时开发者更专注于复杂的二进制开发。问题是,现在做这些是在太难了。


Fuse介绍:

Image title

Fuse不是一个原型设计工具。事实上,有了它就不再需要原型设计(现在大多数人们用的)了。它是一个简单的手机软件开发框架(换种说法就是用代码来编写软件),可以输出100%的IOS和Android原生代码。

Fuse真正的不同之处是它是为了连接设计师和开发者之间的桥梁而设计的,使设计师可以更早的进入到开发项目中。用代码编写UI更容易,更直观,更易调整。开发者不再担心设计师耽误进度,你们将有一个很好的工作流。


UX Markup介绍:


你可以把UX Markup当做是只针对完成手机UI的更容易更快捷的一种代码语言。它是一种XML语言,所以你肯能已经能看懂它是怎么执行的了。


想画一个矩形?简单:

Image title

想在矩形里加些文字?简单,只要在中加

Image title

阴影?没问题:

Image title

看起来像一个按钮,我们让它可点击吧!真贴心:

Image title

Image title

这很明显只是我们用Fuse在表面上动手脚,它是一个有很多触发和动效的强大的UI设计工具。同时设计完整的IOS和Android的软件产品。


为什么这个很酷呢?因为你写的代码没有呗扔掉,它会直接融合到IOS和Android原始代码中。就是这样的,你在编写UI,使用代码在编写。这意味着你不再需要花时间做原型设计了。你可以改变UI,测试它,迭代它。这将会变得很简单。


但是关于那个负责的二进制编译呢?

别紧张,它们也是有的。Fuse使用UI Markup进行UI设计的。更复杂的交互和数据绑定是用vanilla Javascript 完成的。是的,vanilla Javascript  - 不是需要你学更多的东西,它是更简单易读的Javascript 。


''啊,但是如果我想使用尚未运行的OS版本的高级功能呢?''我知道你说的了,别担心,在Fuse中,你可以使用原生代码语言(像Java和C)。在Fuse中你可以简单的完成任何在其他平台工具所不能完成的。例如,在你的IOS系统中加语音识别系统


你想加入到项目的那个阶段,那完全是看你想学多少。


Tl/dr:

别浪费时间在最后肯定被丢掉的原型设计上。在Fuse中完成已经成型的产品像现在你做原型一样简单。Fuse对于设计师和开发者来说都是很有用也很容易的。点击这里来试一下吧。


【译者注:第一次翻译许多问题和不足请见谅><  选文没太挑,总觉得像在打广告一样,下次注意><】


原文地址:https://blog.prototypr.io/do-we-need-better-prototyping-or-simpler-coding-269109426313#.6zv35n621

作者:Daniel Hollick

更新:2016-09-23

收藏

122人已收藏

  • 75

    作品

  • 2695

    粉丝

  • 65

    关注

  • 11个表单设计小Tips
  • 产品设计的期望与现实
  • 七个设计的基本原则
  • 为什么大团队失败反而小团队取胜

    猜你喜欢

      2016-09-23 自译外文 经验/观点 原作者: Daniel Hollick 举报 7406 122 98 21

      我们是需要更好的原型设计还是简单的代码编译?

      0.0°

      你确定要举报我们是需要更好的原型设计还是简单的代码编译?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年09月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      98
      122
      21

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录