重新设计现有产品不是一件简单的事情。很多人认为,一提到“再设计”这个概念,就把它理解为产品从无到有的设计过程。至少在设计团队里,这不是最好的办法,因为它面临很大的风险。“对产品的现有价值会有什么影响?”这是最常见的担忧。许多人继续在现有产品上堆叠新功能,只是因为他们害怕损害产品价值。当然这可以理解,但是长此以往,那个产品就失去了创新能力,就会沦落为四个不像。
关于“更有效的重新设计过程”这个话题,我有一些想法。但是为了测试这个想法,我不想在一个非常蹩脚的产品上进行设计,因为这样会很容易解决。所以我选择了“素描”有以下两个原因:
第一,素描不是一个不好的产品;其实挺好的,是市场上很棒的产品。如何让现有产品的体验更好?这很有挑战性,也很有趣。其次,因为我每天都在用Sketch,所以对这个产品相当熟悉。我觉得对产品有深入的看法是非常非常重要的。声明:通常在一个真正的重新设计项目中,你需要考虑许多用户的反馈以及其他利益相关者和设计师的立场。在这种情况下,由于实际情况,我只从我的使用反馈来考虑。
00-1010首先从高纬度到低维度分析产品。我们需要清楚地知道我们需要调整的地方,现有产品的价值在哪里。当我提到高纬度的概念时,我想说的是评估产品的核心目标:
问题:产品满足基本的用户期望吗?回答:如果答案是肯定的,那么就没有必要打破这个设计,然后就可以继续了。如果以上问题的答案是否定的,那么就需要从根本上对产品、战略规划、KPI等方面进行审视,但我不希望你忍受这些花里胡哨的条款。
00-1010现在我们开始分析这个产品在技术上是如何工作的,如何解决用户的需求。先说界面布局。在草图中,界面布局是这样的:
每个区块的布局都有一个目标,基于每个目标,我们可以找到可以改进的地方。举个栗子:
块1,目标:在层和页面之间导航。块2,目标:易于操作的画板。块3,目标:拥有管理我的对象的属性的所有公共工具。街区4,目标:坦白说,我不知道,但我猜这个区域是高级功能区。好了,现在我们知道主要的挑战是什么了。当然,每个挑战都是由很多小的部分和细节组成的。但同样,这只是一个小的虚拟练习。总而言之,到目前为止,我们已经花了一些时间去发现可以帮助我们改进产品而又不损害我们核心价值的东西。换句话说,我们可以在降低风险的同时继续改进产品。
第一步
这里用到的“品牌”这个词,是指产品的视觉属性,和我们通常理解的“品牌”不是一个概念。我隔离了“产品的视觉属性”这个话题。那么,速写的品牌地位如何?目前还不错,但还可以改进。Sketch使用了很多原生的可视化组件。好在苹果提供了非常好的组件库,但是如果想要在产品上有更好的推广,Sketch还需要更多原创的、可识别的品牌属性。
我们如何做到这一点?我们如何找出理想的产品属性是什么?不幸的是,为了这个练习的目的,我们必须跳过这个工作,因为产品属性不是容易和费时的。通常会设计很多讨论,情感页面,用户访谈等等。所以我会从一个非常主观的角度来分析这部分。
对我来说,素描需要清晰易用;这些产品的最佳价值。不像Photoshop那么乱,很友好。使用Sketch一段时间后,你会发现Sketch在用户体验领域沿袭了很多苹果的设计理念。所以如果这些都是视觉带来的附加值,那么我们就应该在此基础上进行改进。设计思路更简单易用。
00-1010我花了一周时间重新设计。以下是改进结果:
让我们来看看每个模块在细节层面上的改进:
(1)第一区
在这个区块中只有几个设计挑战;主要出发点是提高可读性。首先,为了提高可读性,我们必须知道元素的层次结构:
页面画板层/组层/组(…)
这个设计挑战的解决方案是创造一个更容易识别的
别的层次结构,无需改动太多这个产品已有的用户操作体验。
这不是太大的设计挑战,但采用了更多的原创性的、简洁的视觉风格,为此区域提供更高效的方案。
(2)区块2
正如我之前所说,这块区域没有太多东西需要调整的。这块区域让我们有机会能够放置一些通用功能,诸如缩放、网格、参考线等。我会在区块4中进一步说明原因。在启用参考线功能的情况下,此区块的如下显示:
将这些功能选项放置在此,主要是此功能与主画板区的参考线相关,以此来提升用户体验。在原来的Sketch版本中,我没有太多地使用这些功能,不是因为我不想用,而是这些功能和主操作区域相隔太远,不易操作。这个设计方案调整了此问题。
(3)区块3
这部分相对复杂,因为随着每个选择的对象不同而改变。只用一个案例来阐述改进之处,这部分主要是视觉效果。“堆叠”的设计方法非常不错,有些对象在使用这个解决方案时,视觉组织上不再那么杂乱。
此外,我将经常使用的Craft插件做了展示设计,它非常方便。关于这些插件,我做了一些细微的改进。主要的改进将在接下来的部分进行说明。
(4)区块4
这部分是大工作量的处理。这个区块是需要花较大精力的部分,让我们重头开始看看改进。
我将区块划分成3个区域:
(1)区域1
此区域的目标是提供一个可创建对象的入口。现在,一切都被合并成一个按钮,但有两种对象需要特殊处理:符号和文本样式。
符号是一个非常强大的功能,它帮助我们不仅节省大量的时间,它也有助于我们保持设计的一致性,所以如果在我们的设计过程中的符号的入口更明显的话,那么将更清楚地了解如何更好地使用这些符号。许多设计师甚至都不知道符号到底能做什么,这是一个要解决的大问题。
文本样式现在作为属性栏的一部分而存在。文本样式非常重要,因为在实现设计的时候,就需要在代码中预定好样式结构(例如h1,h2,h3,p,链接和更多的HTML标签)。
(2)区域2
这个区域是多功能区域,因为它会根据我们选择的元素而改变。因此,在我们不选择任何对象的情况下将会显示常用对象。这应该是一个非常实用的功能,因为我们总有诸如按钮、符号或其他在我们设计过程中用到的东西。拖动他们到画板中就能使用,这是不是非常棒!
在下面的案例中,当我选中了某个对象,上方区域根据需要进行动态变化。举个栗子,当我选中了一个矢量图形诸如长方形,然后我就可以访问上方的功能选项来操作那个图形了。
除了形状之外还有很多情况,这个区域可以扩展出更大的便捷性,例如文本、符号、图片等功能。每个功能都对应着不同的需求。这应该使这部分成为一个更有用、更智能的部分。我这里就不涵盖所有的用例了,但我想你应该能想到的: )
(3)区域3
这个区域是一般功能项,包括Sketch当前缺失的和一些重要的功能项,如插件管理功能。当然,我也知道,你能够在软件上方的顶部菜单项中找到这些功能选项。但考虑到插件已经变成一个高频使用的功能,而且插件也正在扩大产品本身的可能性,所以插件需要一个更合适的功能区,你觉得呢?
其他选项与我们目前在Sketch中看到的一样别无二致。这里只是一些非常小的调整,诸如改善按钮的外观样式。这样设计是为了减少整个插件区块的高度。这样做是为了能够给区块2留出更多的空间。
你可能也注意到了我从这个区块中删除了一些功能项,例如参考线、网格、缩放选项。主要原因是为这个区域的主要功能留出更多空间。老实说,缩放功能是一个常用功能,但我们更多地是使用快捷方式,缩放功能更多地是一种信息展示而不是可交互的对象。还有参考线和网格,也是出于同样的原因。这些功能项现在更接近主操作区域 —- 也就是画板区域。
补充
没有一个好的欢迎界面的软件是一个好软件吗?重申一遍,这个练习不是要重新再造一个轮子,因为现在的Sketch也是一个相当好用的软件。但仅作为我个人意见的调整优化…
就是这样,这是个非常有趣的小项目。我希望这个练习能够帮助我们更清楚地了解重新设计产品的过程,在每个小决策中使用设计常识。我相信各位大拿能出更好的设计方案。但我还想再建议一下,不要让你的个人想法干扰产品的主要目标,如果可能的话,邀请你团中的其他人加入进来。
祝愉快!
翻译:Maker
校对:逗砂
译文地址:微信公众号【非科班设计】
本文由 @Maker 授权发布于人人都是产品经理,未经作者许可,禁止转载。