跳到主要内容

专业人士的UI设计指南

当我开始我的职业生涯时,我是一名网页设计师。我从事网页设计工作已有四年,从小型企业网站开始,最终转向更大的客户。我发现这不是对我感兴趣的平面设计,也不是为更大的品牌工作。与网页的视觉设计相比,我对分页模式,人们与表单交互的方式以及感知性能等内容更感兴趣。

当我看科幻电影时,我会看一下接口。当我玩电子游戏时,我会观察菜单的布局方式。如果您熟悉这些特征中的任何一个,那么您也可能是一名UI设计师。

我辞掉了我的代理工作,开办了自己的公司。在我的LinkedIn页面上,我试图总结我的新职业目标:使最好的软件成为可能。我作为自由职业者开始已经四年了,我的旅程并没有停止。这些天我帮助运营一家名为的小型UI设计公司。我们最近欢迎我们的第四个团队成员

在本文中,我想描述成为一名UI设计师的感受,包括工作的确切内容,在哪里找到最好的学习资源,以及如何在您的工艺上做得更好。

UI设计师做什么?

UI design: key areas

UI设计师的工作大致可分为四个关键领域

我发现通常您可以将用户界面设计器的工作分为四类。您与客户沟通,研究,设计和原型,并与开发人员沟通。让我们更详细地看一下这些阶段。

客户沟通

客户沟通就是要了解客户的问题。目标是掌握客户的业务,因此项目的开始通常构成了很多话题。在您开始时,不要过多地了解您的客户的域名 - 您可以在设想可能的设计解决方案时以全新的方式查看他们的业务。

要成为优秀的UI设计师,您需要能够最终考虑客户的业务。例如,您的客户可能在航空领域。为他们工作最终将使您对该行业非常了解。所以,在这里给自己带来快乐的一个小贴士就是明智地选择你工作的行业,这样你就不会成为一个你不关心或者不感兴趣的专家。

在项目期间,沟通不会停止。作为设计师,您将不断展示您的作品。在我们公司,我们是一个远程团队,所以我们没有很多面对面的会议。相反,我们通过视频会议大量使用屏幕共享。 Skype和Slack等通信工具每天都在使用。

将同步和异步通信方法结合起来很有用。如果您需要快速获取大量信息,那么通话很棒,但您必须同时在一起。我们认为Slack是我们的“虚拟水冷却器”,并使用Basecamp来管理复杂的设计项目。当我们使用HTML和CSS设计原型时,我们使用GitHub问题直接讨论代码。

研究

除了客户沟通,你还会做很多研究。这可能包括实地研究,与客户一起举办研讨会,分析竞争或定义战略 - 基本上,几乎任何可以帮助您理解手头问题的事情。

研究是通知您的设计选择的原因。这是你曾经读过的一篇文章,或者是Apple刚刚发布的新文章。什么时候解释为什么你做出了一个特定的设计选择,你的研究支持你。

研究可以非常广泛。我经常为研究目的测试新设备或注册新的Web应用程序来研究其用户界面。

设计和原型设计

作为设计师,您可能会花费大部分时间进行设计和原型设计工作。 UI设计项目可以以草图,详细设计和编码等多种方式向前发展。

您使用的方法很大程度上取决于项目的类型。你在设计什么?它是一个网站,还是你称之为应用程序?它使用原生技术吗?是重新设计还是从头开始?

UI design: tools

我们的一些选择工具:Sketch,Illustrator和InVision

在我们公司没有固定的流程,但大多数项目遵循相同的粗略顺序:它们从草图和线框开始,继续进行详细的视觉和交互设计,最后是原型。

作为设计师,我们花了很多时间思考我们的工具。虽然很棒的工具很重要,但它们并不是最重要的。能够使用Adobe Creative Suite和Sketch等应用程序相当于能够使用铅笔绘制或刷子绘画。你仍然需要画画。

话虽如此,对工具的健康兴趣是一件好事。我喜欢尝试可以帮助我提高工作效率的新工具。我最喜欢的矢量编辑工具是Illustrator,但我的大部分视觉设计工作都是在Sketch中完成的。其他团队成员已经转向更新的工具,如Affinity Designer。

工具是一个非常个人的选择。只要我们能够轻松合作,每个人都可以自由选择自己。为了简化与客户讨论我们的设计,我们使用InVision制作原型。但是,对于更高级的原型设计,我们使用HTML和CSS。您需要的工具全部取决于您要用它完成的工作。

开发者沟通

UI设计师经常被遗忘的部分工作是开发人员沟通。这些天你无法将设计发送给开发人员,并希望他们得到正确实施。最好的设计师知道,挑战不在于创建设计,而在于沟通 - 不仅要向必须给予批准的利益相关者进行沟通,还要对必须实施它的开发人员进行沟通。

UI design: gov.uk

GOV.UK提供了一个指南,使用户能够使其服务与主站点保持一致

沟通设计有多种形式:详细的规格,提供资产,一起审查设计。在每个实例中交付的意义很大程度上取决于项目是本机还是Web应用程序。

传统方法是在屏幕设计旁边提供资产。屏幕设计可用于查看整个设计的外观,而资产是可立即使用的PNG和图标SVG,因此开发人员无需处理图形编辑器。

在我们公司,我们支持提供更多。我们使用组件样式指南来帮助保持设计的一致性。当我们处理一个Web项目时,我们提供详细的HTML和CSS集,逐个记录,准备实施。我相信,在软件开发的每个阶段都有设计眼光是实现我创建世界级软件目标的唯一途径。

Web与本机应用程序

当您为平台(例如iOS或Android)设计本机应用程序时,您倾向于遵循某些准则。当您为网络设计时,没有那么多指导。通常情况下,您的客户会为其品牌制定一套图形指南,以确定事物的外观。

但是,这些指南往往是针对营销网站而定制的,其中的内容并不总能带来良好的用户界面决策。字体往往是出于营销原因而选择,而不是出于易读性原因。颜色可能大胆而醒目,适用于广告系列,但不适用于您日常使用的应用。必须解释这些指南。

网络的UI准则很少。你可以说网络是不同风格的大熔炉。如果您正在制作任何感觉更像应用程序而不是网站的东西,您需要了解广泛使用的框架,如Bootstrap和ZURB Foundation。框架开始确定事物的外观,因为你不想重新发明轮子。这可能是一件好事。

在我们公司,我们喜欢使用Bootstrap。它为常用UI元素(如按钮,数据表和模态)提供合理的默认大小。

在网页设计中,您受到网络技术能力的限制。过去,很难在网站上实现简单的视觉效果,如圆角。这些日子早已过去 - 您现在可以自由地绘制具有大量阴影,过渡,动画甚至3D的用户界面。

作为设计师,在浏览器中控制流程和设计更为现实。我没有看到很多UI设计人员接管本机应用程序的UI编程,但是设计人员在做Web应用程序的HTML和CSS时很常见。如果您可以编写自己的设计代码,那么您将比非编码同行更具优势,对我来说,这是真正了解网络运作方式的唯一方法。

网络约束

您很快就会发现,并非每个浏览器都支持您学习的所有酷技巧,这就是为Web设计的现实。遵循渐进增强等众所周知的原则是很好的,您可以尽可能地加载增强的内容,还要考虑内容如何降级。

最近,'切芥末'变得流行起来。由英国广播公司的网络团队提供支持,这涉及区分“好”和“坏”浏览器,并为“坏”浏览器提供有限的体验。但是,它实际上只适用于内容网站。

在涉及类似应用程序的体验时,许多人仅限制对少数主流浏览器的支持,以使开发更容易。遗憾的是,这让我们回到了1996年你需要某个浏览器来查看内容的情况。

提高你的技能

那么,您如何跟上快速发展的网络行业并提高您的技能?让我们看几种不同的方法来提升你的技能......

平台知识

设计师军火库的一个主要部分是平台知识。您应该了解各种操作系统以及人们如何使用它们。作为设计师,我们倾向于使用Mac,但是很容易忘记那里的大多数人都使用Windows机箱来完成他们的工作。

我觉得如果你自己使用它,你才能真正理解它。我更喜欢使用我的Mac进行设计,但是花了很多时间来追赶各种其他平台的演变。我在Mac上安装了几个Windows副本作为虚拟机。我一直在忙着使用微软的内幕程序测试Windows 10的新版本来检查UI中的各种变化。

我还经常购买新硬件来测试它是如何工作的。我买了一个Apple Watch来测试平台。然后我把它卖了,因为我觉得它并没有给我的生活增添太多。

此外,网络可以被视为其自己的操作系统。它不断发展,每周都会向每个浏览器供应商添加新功能。了解浏览器的技术方面非常值得,特别是关于CSS和图形功能。您需要知道SVG和WebGL是什么,以及如何使用Web Animations API。

每个平台都会随着时间的推移而发展,作为用户界面设计师,您的任务是保持最新状态。毕竟,无论你设计什么,都不是孤立存在,而是更大的软件生态系统的一部分。

回到基础

我们今天所挣扎的与20年前我们所挣扎的并没有什么不同。书中有很多好建议。试试Jason Fried和Matthew Linderman为网络设计的防御性设计,不要让史蒂夫·克鲁格为首发思考。

如果您不了解模态和可供性等概念,则需要阅读。你应该能够解释菲茨的定律是什么。格式塔接近法?这是UI设计的基础。

从游戏和电影中获取灵感

UI design: Skyrim

2006年Oblivion(左)的UI比2011年发布的Skyrim(右)更具装饰性

作为一名UI设计师,我利用其他灵感来源来完成我的工作。我在游戏中找到了很多灵感。有些游戏非常复杂,UI设计师必须解决与处理业务项目的UI设计人员相同的复杂界面问题。

游戏也可以表示趋势。科林麦克雷拉力赛菜单中的极简主义让我想起了iOS7的方向。在某种程度上,现在流行的UI动画设计出现在多年前的游戏中。从比喻到裸露的功能界面和“平面设计”的转变在游戏中也很明显。将2006年的Oblivion与2011年的天际进行比较。这两款游戏都是同一系列的角色扮演游戏,但差别很大。

像钢铁侠这样的漫威电影中的未来派界面也是我的灵感来源。它们不是完全可用的例子,但它们确实让我更多地考虑整个计算。我们想要屏幕的未来,还是我们希望屏幕消失?这可能是一个很好的问题,在一个充满设计师的酒吧里摆出姿势。

通过努力工作,坚持不懈,与同龄人交谈,阅读非常多,你成长为一名设计师。大约一年前,我在“纽约时报”上看到一篇关于80年代人们继续磨练自己手艺的文章。我觉得我只是开始了。你呢?

相关文章:



翻译字数超限