本文概述
- 不太久远, 在遥远的网络中……
- 数字设计不再吸引
- 没有任何代码的应用
- 未来就是设计, 还有很多东西可以绕过去
但是, 随着设计工具变得更好, 更易于使用, 冷战即将结束。开发人员和设计师之间的差距正在缩小。
现在, 无需任何编码经验, 就可以创建一个相当不错的应用交互原型。这意味着设计人员无需编写任何代码即可测试新应用。这也意味着开发人员可以使用简单的工具来设计自己的专业外观设计, 而无需专业帮助。
显然, 设计人员仍然可以从学习代码中受益, 开发人员可能应该学习设计, 但是这两种技能之间的鸿沟正变得越来越容易。
文章图片
不太久远, 在遥远的网络中…… 五到七年前, 数字设计师的主要作用是在Photoshop中设计页面和屏幕的静态图像, 然后移交给向导开发人员, 该向导开发人员会将其转变为功能强大的网站或应用程序。 “ 模型” 始终是有限的输出。它是静态的, 数据是伪造的, 交互为零。你是否曾经使用静态图片进行过用户测试?不会太远。
试图理解设计师意图的设计师与开发人员之间的无休止的来回交流将创建足够长的电子邮件链, 以遍及全球。经过数周的开发, 才发现发布后开发人员通过” 向上滑动” 理解的内容与设计师的想法大不相同。真是地狱
在这样的世界里, 难怪每个开发人员都会写一篇文章, 设计师应该学习编码。收到带有数十个未标记图层的未注释PSD的开发人员, 不会因为跳出最近的窗口而受到指责。
同时, 对设计自己的应用程序感兴趣的开发人员对Photoshop和Illustrator等工具的复杂性感到沮丧。他们需要在计算机科学学习的基础上接受整个图形设计教育, 以实现自己的想法。试图快速偷工减料并为自己设计的开发人员最终得到了设计不足, 测试不足的应用程序, 这些应用程序一上市便立即陷入困境。
数字设计不再吸引 现在, 设计师和开发人员之间的情况要好得多。通过发明聪明的设计工具和平台(例如InVision的Craft, InVision应用程序, Framer, Flow, Flinto / Principle和Sketch), 设计人员和开发人员可以轻松设计应用程序原型并对其进行测试, 而无需用户甚至不知道他们正在使用没有后端的应用。设计和代码之间的障碍正在逐渐消失。
从用户的角度来看, 该应用似乎可以正常运行。每一次互动, 每一个流程都会在那儿。设计人员无需接触任何代码即可获得有价值的见解, 而开发人员只需单击几下即可创建自己的设计。
让我们仔细看看这六个混合设计工具:
文章图片
【开发商与设计师之间的鸿沟正在消失】该站点是从头开始构建的, 不需要使用设计人员的任何代码行, 并且该站点使用Webflow可以完全响应。
InVision工艺
这套应用程序套件使设计师能够提取真实数据, 而不是标准的” Lorem ipsum” 和迈克尔·杰克逊的图标填充器。各种应用程序协同工作, 使设计过程更流畅, 更自动化。这些应用程序支持协作, 原型模型, 同步, 最重要的是, 你自己的数据。
视觉
InVision允许设计人员创建非静态的模型, 从而真正改变了游戏规则。使用InVision的简单工具, 可以将图像转换为可点击的交互式原型, 感觉就像是真正的应用。 InVision支持协作, 使设计人员和用户可以更轻松地在每个步骤中对更改发表评论。
看看使用Marvel(InVision的竞争对手)创建的此原型:
文章图片
使用像这样的功能齐全的模型, 你可以在编写一行代码之前与用户一起运行测试。
成帧器
成帧器有点像InVision, 但它能够进行更复杂的交互。一些相当重要的公司使用Framer来帮助他们设计直观, 有用, 但又简单的应用程序。优步就是一个很好的例子。他们已经使用Framer来设计其Apple Watch应用程序和UberPOOL。
Flinto /原理
这两个应用程序都可以在几分钟内用于创建复杂的动画。他们俩都需要一点学习, 但是一旦设计师精通这些应用程序, 他们就可以轻松地创建外观和感觉非常专业的动画, 而不像Chintzy填充器。你可以在此处看到许多用户可以使用Principle进行操作的惊人示例。
草图
Sketch类似于Photoshop, 但其功能大约是Web和应用程序开发人员的四倍。这个强大的工具通过让设计师创建完全独特且手工制作的图标, 界面和网站, 解决了静态设计无法解决的问题。
网络流
这感觉就像是Mike Tyson的勾拳。 Webflow基本上消除了设计人员编写任何前端代码的需要。现在, 设计师使用这个漂亮的WYSIWYG编辑器来完成所有繁重的工作。
没有任何代码的应用 Heco:该机构创建了极其复杂的动画, 并且仅使用Webflow即可开发出非常复杂的前端, 而无需任何前端开发人员。
文章图片
Todoist设计师说明了他们的待办事项如何与此实时模型一起工作。通过轻按该应用程序, 你可以查看Todoist的全部功能, 而无需进行任何猜测。
文章图片
创建曾经需要CSS向导的CSS动画, 他们知道如何使用3D转换, 延迟以及无穷无尽的CSS和JS技巧来创建复杂的东西。使用Webflow, 你可以在一半的时间内创建类似这种动画的内容, 而无需编写一行代码。
文章图片
未来就是设计, 还有很多东西可以绕过去 使用这样的设计工具, 设计师不必再依赖静态图像, 也不必依靠开发人员来制作专业, 美观, 实用的原型。
同时, 开发人员不再需要依靠设计师为他们带来好主意。开发人员可以并且应该从上述工具开始, 将设计技能添加到简历中。这些程序都不是特别复杂的学习。如果开发人员不再依赖设计师, 而是开始自己创造漂亮的原型, 他们可以提高自己的就业能力, 并能将自己的想法从概念推向市场, 并能获得满意的满足感(更不用说节省了)。
对于设计师来说, 这听起来似乎是个坏消息, 但事实并非如此。通过添加简单的API集成, 自动化的工作流程以及引入真实数据的能力, 设计人员可以创建复杂的, 可测试的原型, 而无需开发人员不断来回变动。结果是设计师可以专注于自己最擅长的领域:设计。
不再需要对设计师的作品进行诠释, 并且不可避免地会被一个没有共同愿景的人所破坏。因此, 尽管这些相同的工具允许开发人员进行设计, 但这不应威胁到经验丰富的设计师。设计师不必担心程序员会踩到草皮, 而应利用上述所有工具抢先一步, 并不断提高自己的技术水平。
? ? ?
在srcmini设计博客上进一步阅读:
- UI设计最佳做法和常见错误
- 空状态-用户体验最被忽视的方面
- 简单是关键–探索最小的Web设计
- 移动接口的启发式原理
- 为可读性而设计– Web排版指南
推荐阅读
- [AndroidStudio]DrawerLayout布局结合HomeAsUp箭头动画效果最小系统
- 迷你教程–在整个设计过程中充分利用Figma的功能
- Figma作为设计工具的力量
- 不断发展的表情符号(为信息的新面孔设计)
- 立即使用Sketch和Looper创建弯曲的插图
- 不要试图改变世界,而是要设计一个玩具
- 遵循趋势(敬意 vs 设计抄袭)
- 教程(如何创建自定义图标Webfont)
- Android开发 广播监听系统的各种状态