用户界面设计专业指南

作者: Randy Alexander
创建日期: 25 四月 2021
更新日期: 16 可能 2024
Anonim
三者区别和特征?UX用户体验设计, UI用户界面设计, 交互设计|Differences in UX Design vs UI Design vs Interaction Design
视频: 三者区别和特征?UX用户体验设计, UI用户界面设计, 交互设计|Differences in UX Design vs UI Design vs Interaction Design

内容

当我开始我的职业生涯时,我是一名网页设计师。我从事网页设计工作了四年,从小型企业网站开始,然后发展到更大的客户。我发现不是图形设计引起了我的兴趣,也不是为更大的品牌而努力。与网页的视觉设计相比,我对分页模式,人们与表单的交互方式以及诸如感知性能之类的东西更感兴趣。

当我看科幻电影时,我会看一下界面。当我玩电子游戏时,我会观察菜单的布置方式。如果您对这些特征中的任何一个听起来熟悉,那么您可能也可以成为UI设计者。

我辞去了代理工作,开了自己的公司。在我的LinkedIn页面上,我尝试总结了我的新职业目标:尽可能制造出最好的软件。自从成为自由职业者以来已经有四年了,我的旅程并没有停止。这些天,我帮忙经营一家小型UI设计公司,名为 单核细胞增多症。我们最近欢迎我们的第四位团队成员。


在本文中,我想描述成为一名UI设计师的感觉,包括确切的工作,在哪里找到最佳的学习资源以及如何提高自己的手艺。

UI设计者做什么?

我发现通常可以将用户界面设计器的工作分为四类。您与客户进行交流,研究,设计和原型设计,并与开发人员进行交流。让我们更详细地了解每个阶段。

客户沟通

与客户的交流就是了解客户的问题。目标是与客户的业务打交道,因此项目的开始通常会引起很多讨论。刚开始时不要对客户的域名了解太多,可以在设想可能的设计解决方案时以崭新的方式查看他们的业务。


要成为一名优秀的UI设计师,您需要最终能够与客户的业务一起思考。例如,您的客户可能在航空领域。为他们工作最终将使您对该行业非常了解。因此,在这里为自己带来快乐的一个秘诀是明智地选择您所从事的行业,这样您就不会在不关心或不感兴趣的事情上成为专家。

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

结合使用同步和异步通信方法非常有用。如果您需要迅速获得大量信息,那么打电话是很好的选择,但是您必须同时待在身边。我们将Slack视为我们的“虚拟水冷却器”,并使用Basecamp来管理复杂的设计项目。当我们使用HTML和CSS设计原型时,我们使用GitHub Issues直接讨论代码。


研究

除了与客户沟通外,您还将进行大量研究。这可能包括实地研究,与客户的研讨会,分析竞争或制定策略-本质上,几乎所有可以帮助您了解当前问题的方法。

研究决定了您的设计选择。这是您曾经读过的文章,或者是Apple刚刚发布的新内容。当需要解释为什么做出特定设计选择时,您的研究会为您提供支持。

研究可能非常广泛。我经常出于测试目的测试新设备,或者注册一个新的Web应用程序以研究其用户界面。

设计与原型制作

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

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

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

作为设计师,我们花费大量时间来思考我们的工具。虽然出色的工具很重要,但它们并不是最重要的。能够熟练使用Adobe Creative Suite和诸如Sketch之类的应用程序等效于能够使用铅笔绘制或使用画笔绘制。您仍然需要绘画。

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

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

开发者交流

UI设计人员经常被遗忘的部分是开发人员之间的交流。如今,仅将设计发送给开发人员并希望它们得到正确实施是无法摆脱的。最好的设计师知道,挑战不在于创建设计,而在于传达设计–不仅与需要批准的利益相关者,而且还与必须实施设计的开发人员。

与设计进行通信有多种形式:详细的规范,提供资产,一起审查设计。在每种情况下交付的意义在很大程度上取决于项目是本机应用程序还是Web应用程序。

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

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

网络与本机应用

当您为平台(例如iOS或Android)设计本机应用时,您通常会遵循某些准则。在为网络设计时,没有太多指导。通常会发生的情况是,您的客户针对其品牌有一套图形准则,这些准则确定了外观。

但是,这些指南往往是针对行销网站量身定做的,其中的内容并不一定总能带来良好的用户界面决策。选择字体通常是出于营销原因,而不是出于易读性原因。颜色可能大胆醒目,在广告系列中有效,但在您日常使用的应用程序中则无效。这些指南必须加以解释。

网络上很少有UI准则。您可能会说网络是不同风格的大熔炉。如果要制作比网站更像应用程序的内容,则需要了解广泛使用的框架,例如Bootstrap和ZURB Foundation。该框架开始确定外观,因为您不想重新发明轮子。那可能是一件好事。

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

在网页设计中,您会更受网页技术能力的束缚。过去很难在网站上实现简单的视觉效果,例如圆角。这些日子已经一去不复返了-您现在可以自由地绘制带有大量阴影,过渡,动画甚至3D的用户界面。

作为设计师,控制浏览器中的流程和设计更加现实。我还没有看到很多UI设计师接管本机应用程序的UI编程,但是在Web应用程序中执行HTML和CSS的设计师是司空见惯的事情。如果您可以编写自己的设计,那么您将比非编码同行更有优势,对我来说,这是真正了解网络工作原理的唯一方法。

网络约束

您很快就会发现,并非所有浏览器都支持您学到的所有绝妙技巧,而这正是为网络设计的现实。最好遵循渐进增强等众所周知的原则,在这种情况下,您可以尽可能加载增强的内容,但也要考虑内容的降级方式。

最近,“切芥末酱”变得很流行。在英国广播公司(BBC)的网络团队的支持下,这涉及到区分“好”和“差”的浏览器,并为“差”的浏览器提供有限的体验。但是,它实际上仅适用于内容网站。

当涉及到类似应用程序的体验时,许多人将支持仅限于少数几种领先的浏览器,以简化开发。可悲的是,这使我们回到1996年的情况,当时您需要使用某种浏览器来查看内容。

提高技能

那么,您如何跟上快速发展的Web行业的最新动态并提高技能呢?让我们来看看几种提高技能的方法...

平台知识

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

我觉得只有自己使用它,您才能真正理解某些东西。我更喜欢使用Mac进行设计,但是要花很多时间赶上其他各种平台的发展。我在Mac上已将Windows的多个副本安装为虚拟机。我一直在使用Microsoft的Insider程序来测试Windows 10的新版本,以检查UI中的各种更改。

我还定期购买新硬件以测试其工作方式。我买了Apple Watch只是为了测试平台。然后我卖掉了它,因为我觉得它并没有增加我的生活。

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

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

回到基础

今天我们所苦苦挣扎的事情与20年前我们所苦苦挣扎的事情并没有太大不同。书中有很多好的建议。尝试由杰森·弗里德(Jason Fried)和马修·林德曼(Matthew Linderman)设计的网络防御设计,以及史蒂夫·克鲁格(Steve Krug)的《不要让我思考》(入门)。

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

从游戏和电影中获得启发

作为UI设计师,我会借鉴其他灵感来源来完成我的工作。我在游戏中发现了很多灵感。一些游戏非常复杂,UI设计人员必须解决与从事业务项目的UI设计人员相同的复杂界面问题。

游戏也可以表示趋势。 Colin McRae Rally菜单中的极简主义让我想起了iOS7的发展方向。从某种意义上说,现在流行的UI动画设计已经在几年前出现在游戏中。从拟态到裸机,功能界面和“扁平化设计”的转变在游戏中也很明显。将2006年的遗忘与2011年的天际进行比较。两种游戏都是同一系列中的RPG,但区别是惊人的。

《钢铁侠》等漫威电影中的未来派界面也为我带来了灵感。它们并不是完全可用的示例,但是它们确实使我对整体计算有了更多的思考。我们是否想要屏幕的未来,还是我们希望屏幕消失?在充满设计师的酒吧里摆摆这可能是个好问题。

通过努力工作,坚持不懈,与同事交谈和阅读大量书籍,您可以成长为一名设计师。大约一年前,我在《纽约时报》上读到一篇关于80多岁的人们的文章,这些人继续磨练自己的手艺。我觉得我才刚刚开始。那你呢?

务必看
如何放逐内心的批评家
阅读更多

如何放逐内心的批评家

放逐内心的批评家说起来容易做起来难。这需要耐心和辛勤的工作。丹妮丝·雅各布斯(Deni e Jacob )认为,成功的关键是弄清楚这种批评的根源,更重要的是,引发这种批评的原因是什么。“它表现为强迫性的忙碌,还是表现为完美主义或拖延,或两者兼而有之?”她问。 “这确实有助于人们剖析其内在的批评家,然后给出技巧,尤其是对于完美主义和拖延症患者,因为我认为这是对人的影响最大的原因。“这样一来...
每个网页设计师都应该签出6个移动应用程序
阅读更多

每个网页设计师都应该签出6个移动应用程序

许多网页设计师从未想到过使用移动应用程序来帮助他们进行工作。但是,新的移动应用程序一直在发布,很容易错过一些可能会深刻改变您的工作方式的事情。在这篇文章中,我们总结了一些最新的和最新更新的移动应用程序,它们可以使您的Web设计工作更加高效,有效和有趣。谁不想呢?Dribbble由Dan Cederholm和Rich Thornett于2009年创立,现已成为网站设计师分享其正在研究的设计的偷窥(又...
如何无缝整合CG和现场动作
阅读更多

如何无缝整合CG和现场动作

出色的VFX的核心保持不变,但是新工具正在不断改变我们的工作方式。我最近添加到皮带上的新功能是摄影测量法和实时射线追踪。摄影测量是从摄影中构建3D元素的过程,自1990年代就已经存在,但是Autode k的123D使其免费,易于使用且最重要的是可靠。同样,尽管自从计算机可视化曙光以来,实时射线跟踪一直是一个梦想,但Imagination的Maya Cau tic Vi ualizer实现了所见即所...