31
2018/10
网页设计、网站开发、用户界面和用户体验,有什么区别,你需要哪些?
|网站教程
网页设计和开发之间有什么区别?UI和UX怎么样?这些划分意味着什么?为什么有这么多的首字母缩略词?技术人员不希望一切都是用户友好的!?

网页设计实例-网页设计、网站开发、用户界面和用户体验

上图:网页设计实例

如果你是一个设计网站的新手,遇到科技行业的术语可能会像听外语一样 - 除了大多数外语都有押韵和理由。但是,与网络专业人士合作是每个企业都应该做的事情; 如果你想要一个成功的网站,你可能需要一个翻译。

这就是本文的用途。如果你正在设计你的第一个网站或者只是想更好地了解这个行业,我们尚略上海网站设计建设公司正好在这里解释和剖析当今技术中最常用和最麻烦的四个术语:用户界面,用户体验,网页设计和网站开发。阅读本文后,您不仅可以了解每个领域的作用,还可以了解您的业务最需要关注的领域。

IT的基础知识


iPhone旁边的网页设计笔记本-网页设计、网站开发、用户界面和用户体验

上图:iPhone旁边的网页设计笔记本

让我们从一些基本定义开始,以便在我们深入探讨之前缓解您最初的困惑并提供一些背景知识:

  • 网页设计 - 与设计网站的视觉效果和可用性相关的所有内容的广泛范畴。UI和UX设计以及许多其他领域都包含在网页设计中。

  • Web开发 - 网站建设与制作网站的技术部分,专注于代码。Web开发进一步分为“前端”和“后端”,下面将对此进行说明。

  • 用户界面(UI) - 网页设计的专业化,处理人们用来与网站或应用程序交互的控件,包括按钮显示和手势控制。

  • 用户体验(UX) - 网页设计的另一个专业化,这个涉及用户行为和使用网站或应用程序时的感觉。UX设计封装了许多其他领域,但从用户的角度来看它们。

正如您所看到的,这些区域都不是唯一的,并且存在大量重叠。网页设计和网站建设开发只是同一个硬币的两个方面,UI设计影响用户体验设计,网页开发支持所有这些...它不是关于哪些字段处理哪些任务,而是关于每个字段如何从不同的角度考虑相同的任务-视图。

例如,让我们看一下加载时间,这是每个网站的常见问题。每个字段如何解决加载时间:

  • 网页设计:如果页面加载时间过长,则内容太多或内容过于复杂。可以压缩图像文件,可以调整和重新导出资源,并可以修剪多余内容的页面。

  • Web开发:为了加快内容加载,我们可以尝试更好的文件压缩来减少内容的文件大小,CSS sprites可以节省带宽或内容交付网络,以改善特定地理区域的加载时间。

  • UI:控件必须尽可能响应,因此界面必须足够简单,以便瞬时交互。

  • 用户体验:用户“离开”的可能性(在片刻之后离开您的网站)会随着每一秒的加载时间而增加,因此我们应优先考虑减少主页和登录页面上的加载时间,然后再解决站点范围内的问题。

在一个完美的世界中,您将为每个领域聘请专家或专家团队,以便您有专家从各个角度查看您的网站。但是,预算限制通常意味着选择一个领域而不是另一个领域,或者 逐个项目地雇用自由职业者。

偶尔你会找到一个声称全部成就的人:

  • 能够编码的设计师有时会将自己标记为一体化软件包,但实际上他们比两个独立的专家更有限(尽管如果你有一个简单的网站,有时这可能是一个聪明的雇员)。

  • UI设计师与网页设计师有许多重叠的技能,因此有些人会互换使用这些标题。

  • 用户体验和用户界面经常被集中在一起,因为它们都是次专业化。

  • 用户体验通常被视为其他职业的技能,甚至在设计之外,例如产品管理。

这样的人在紧要关头可能很有用,但请记住,所有行业的杰克都是无人掌握者 - 他们可能知道多个领域的基础知识,但他们可能只是一个专家,如果有的话。

您还希望区分网站和应用以及桌面和移动设备。每个工人都有自己的专业 - 一些开发人员有更多建立移动网站的经验; 一些设计师专门专注于应用程序而从不做网站。同样,有很多重叠,但如果您正在招聘某个特定项目,请确保您的候选人能够处理具体细节。

那么这些专家中的哪一位可以帮助您实现特定的业务目标?在雇佣他们时你应该寻找什么?让我们现在深入了解每一个。

网页设计


“网页设计”是一个古老的术语,可以追溯到一个人处理网站所有设计方面的日子。按照现代标准,“网页设计师”一词可能有点模糊; 今天,由于技术和我们对工艺的更多理解,我们有一个彩虹般的细分。

Figgy&Plum的网站主页-网页设计、网站开发、用户界面和用户体验

上图:Figgy&Plum的网站主页

网页设计的子类别包括UI和UX,还包括其他有趣的首字母缩略词,如IA(信息架构,处理网站映射和导航)和CRO(转换率优化,微调网站的设计以增加销售,注册或其他特定动作)。这些子类别中有数十个,每天都会创建新的子类别,因为设计师试图在竞争激烈的市场中获得更好的工作。

一般而言,网页设计涉及网站的视觉和功能。它是一个与各个层面的图形设计有着内在联系的领域,它处理的是视觉传达的相同设计原则。

Chef Brain app的目标网页-网页设计、网站开发、用户界面和用户体验

上图:Chef Brain app的目标网页

但网页设计不仅仅是图形设计。无论是使用网站还是应用程序,设计人员都必须了解经常变化的功能,技术限制,数字趋势和用户期望。

网页设计还有一定程度的商业知识:设计师应该了解数字销售策略,例如如何设置“号召性用语”(CTA)按钮以引发销售和电子邮件注册。网站布局严重影响用户行为,但由于它的细微差别,一些设计师比其他设计师更擅长。

网页设计师处理传统的图形设计问题,如颜色和排版,以及为不同屏幕尺寸选择最佳美学等数字问题。他们还需要了解业务概念,如领先和关闭,以创建布局,使呼吁行动更具吸引力。毕竟,设计师的职责有时包括从头开始制作图标,图形或界面按钮,这些都借鉴了这三者的专业知识。

就具体的工作职责而言,设计过程主要取决于设计师,只要他们在现有的品牌指导下工作。通常,该过程涉及设计人员创建设计原型,然后与实际用户或利益相关者一起测试这些原型,然后将反馈结合到未来的设计中。

设计师还可以制作线框图,设计的裸骨布局以准备原型,或者模型,像素完美的图像,除了没有交互性之外,屏幕将是什么样子。

原型一旦获得批准,就会发送给开发人员进行编码。

招聘网页设计师时要注意什么...


  • 最重要的是,在找到最适合您的网页设计师之前,您需要知道自己想要什么。由于这么多的专业化,它不是关于设计师的好坏,而是关于他们是否适合你。

  • 注意他们的作品。网页设计师注重平面设计,每个人都有自己独特的艺术风格。

  • 寻找您所重视的技能的掌握情况。如果您有一个文本密集的网站,请查看它们如何处理排版,可读性和页面布局。如果您正在建立一个电子商务商店,看看他们是否知道什么是一个好的产品页面。

  • 他们的首选软件是否与团队其他成员的用户兼容?有许多不同的设计软件 - Adob​​e Photoshop,Illustrator,InDesign和Sketch,以及UXPin或Balsamiq等原型设计软件。请与您的其他工作人员联系,了解您的选择。
   
  • 询问您的设计师他们的设计过程和时间框架。设计师都有自己的方法和设计周期,因此请仔细检查您是否正在雇用符合您公司文化和时间表的人员。


网站开发


通过使用代码来区分Web设计和开发。开发是事物变得技术化的地方,但好消息是你不必知道你的开发人员在谈论什么(尽管它对学习基础知识肯定有帮助)。

网站开发网站建设分为两大类:

前端(也称为客户端):网站(或应用程序)在屏幕上显示的代码。前端开发人员负责将网页设计师的愿景变为现实,通常使用HTML,CSS和JavaScript等计算机语言。当然,并非设计师计划的所有内容都是现实可行的,因此前端开发人员经常与设计师一起来回工作。

后端(也称为服务器端):“前端”从服务器上托管的数据库资源系统中提取。后端开发人员负责开发与管理那些幕后的数据库资源,以及编码数据库中的数据并优化数据的传递方式。他们使用PHP,Ruby,Python,Java或.Net等语言。

同样,全栈开发人员也可以处理前端和后端开发。有时候,对于那些不能雇佣超过一名雇员的初创公司来说,这是一个聪明的选择,但理想情况下,你们拥有一支具有不同专业的开发团队。

招聘网络开发者时需要注意什么...


  • 一定要看看他们是否能说流利的专业语言。如果您无法区分,请告诉他们您希望对自己的网站做些什么,并听取他们的建议。

  • 虽然不是必需的,但开发人员参与设计过程会很有帮助。例如,开发人员可以抢先告诉设计师他们的选择是否可行,从长远来看节省了修订时间。您可能希望了解开发人员与团队合作的情况,因为有些人更喜欢自主工作。

  • 通过功能镜头回顾他们以前的网站。一切都按预期工作吗?弹出任何标志?您可能对开发了解不足以了解其工作原理,但您当然知道成为使用网站的普通人是什么感觉。

用户界面(UI)


现在我们已经解释了Web设计和开发,我们可以从用户界面设计开始讨论更专业的领域。UI是每个人都使用的东西,没有经过深思熟虑 - 你不需要知道汉堡包图标的历史,知道有三行的按钮是你的菜单。

通用的图标设计-网页设计、网站开发、用户界面和用户体验

上图:通用的图标设计

这在大多数网页设计领域都是一个持续的原则:如果他们的工作做得好,你甚至不应该注意到它们。这在UI设计中最为普遍:使用真正直观的界面,用户无需考虑使用它。

如果你必须积极考虑如何使用控件,那么它被认为是糟糕的UI设计。搜索您需要的按钮或花几秒钟来确定按钮的作用,会分散您对使用网站的整体体验的注意力。UI设计的目标不仅是提供用户可能想要的所有控件,还要创建用户一眼就能理解的自解释控件。

另一个问题是空间管理。UI设计者必须找到为用户提供大量选项和节省屏幕空间之间的愉快媒介。这就是像悬停控件和拉出菜单这样的技术。UI设计师有责任决定哪些控件需要始终呈现,哪些控件可以忽略不计,完全隐藏或忽略。

4Links图标设计-网页设计、网站开发、用户界面和用户体验

上图:4Links图标设计

UI设计通常与另一个称为交互设计的字段重合,缩写为“IxD”。交互设计专注于用户与系统交互的所有方式,包括界面以及弹出,聊天和错误窗口等区域。因为交互设计如此强调用户行为,所以它就像UI和UX设计之间的中间点。

招聘UI设计师时要注意什么...


  • UI设计师的产品组合应该告诉您需要知道的一切。试试候选人以前的网站,看看它有多容易。你能找到你需要的一切吗?使用网站/应用程序令人沮丧或容易?

  • 比其他类别更多,寻找您正在招聘的特定项目类型的过去工作。世界上最好的网站UI设计师可能会为游戏应用程序制作界面。雇用具有正确经验的人。

用户体验(UX)


从许多方面来看,用户体验从用户的角度来看就像网页设计领域。网页布局如何影响用户?UI如何影响用户?当您进入高级阶段时,UX变得更具战略性,例如,“我们如何设计页面以使用户想要注册?”

社交媒体横幅的GIF

可以想象,UX设计还包含了网页设计中的许多其他领域。很多人都在谈论“UI vs UX”,但事实是两者合作而不是竞争。实际上,有很多重叠,所有类型的网页设计师都可以从了解UX方面获益。这正是UX如何成为一个独立的学科 - 雇佣一名个人用户体验专家,从团队其他成员那里解除了其他一些责任。

虽然起初看起来似乎是多余的,但实际上UX设计与销售或转换等业务目标之间存在直接关联。考虑到人类决策的大部分来自情感和直觉,因此优化网站设计可以鼓励某些行为并创造更有利于这些行为的氛围。

因此,用户体验设计师还在图形设计原则上汲取了很多:通过大小吸引注意力,用颜色引出正确的情感,在屏幕上创建可预测的视觉流,并将CTA放置在正确的位置。然而,与传统的图形设计不同,用户体验专家还必须考虑其他问题,如交互性和时间安排,使其成为一个完全独立于其他所有学科的学科,同时将它们全部互连。

招聘UX设计师时需要注意什么...


  • 就像UI设计一样,您希望从您的候选人“试驾”以前的网站或应用程序。它们易于使用吗?您是否喜欢使用其网站的体验?

  • 如果您没有预算聘请单独的UX设计师,请向其他领域的候选人询问他们的UX专业知识。这些职责有时可以作为不同团队的交叉努力来处理; 产品经理或营销人员可以解释他们想要用户体验的内容,然后设计团队负责视觉设计和实施。


模板网站怎么样?


如果您使用WordPress,Squarespace或Wix等模板网站怎么样?你还需要一个完整的团队吗?你需要额外的人吗?

弗吉尼亚Vape公司的WordPress主题设计-网页设计、网站开发、用户界面和用户体验

上图:弗吉尼亚Vape公司的WordPress主题设计

模板网站遵循大多数相同的规则,但有一些主要的例外:

  • 如果您使用的是模板站点,则无需担心后端开发。

  • 模板站点通常具有有限且固定的UI选项。

  • 确保候选人有您在托管您的任何网站的经验。擅长WordPress并不一定意味着擅长Squarespace。

除了这些例外,使用模板站点与任何其他站点类似。根据您的需求选择您的设计师。

你最需要哪一个?


到目前为止,您应该能够区分网页设计和网站建设开发,并且您知道“UI vs UX”不如“UI + UX”那么准确。问题是,如果您不能雇用,那么您应该优先考虑哪一个他们的专家呢?

这个没有普遍的答案。因为这些领域都涉及不同的领域,所有这些都取决于贵公司的独特需求。考虑到您自己的目标和缺点,您可能需要比其他人更多的专家。

为了帮助您了解您最需要哪一个,这里是每个领域专门解决的问题的简短列表。找到下面的最大障碍,并查看解决方案的相应字段。如果您已有现有站点,请事先进行一些用户测试,以查看实际用户有哪些投诉。

网页设计


  • 网站没有响应(意味着该网站在移动设备上看起来不太好)

  • 网站看起来过时了

  • 低质量的图形

  • 客户不会访问您希望他们访问的页面

  • 页面停留的时间太短了

Web开发


  • 错误(网站功能不能正常工作)

  • 网络安全和黑客预防

  • 404错误太多了

  • DNS查找失败的次数太多

  • 网站下线

  • 某些内容无法加载


UI


  • 导航不好

  • 缺乏定制选项

  • 缺乏社交分享选择

  • 抱怨“我该怎么做”或“我在哪里可以找到”


UX


  • 转化率低(流量大但转换次数少)

  • 跳出率高(几秒钟后游客离开)

  • 用户没有完成浏览相关内容(视频或博客)

  • 支离破碎的访问,即用户在一页之后离开而不是停留和探索

当然,一些问题可以通过不同的方法来解决,正如我们在上面的缓慢加载时间的例子中所解释的那样。这就是为什么了解您想要优先考虑哪些方面非常重要的原因,因此您选择的任何解决方案都与您的优先级最为一致。

网站设计建设开发知识分享,上海品牌策划设计公司,上海网站设计建设公司,尚略广告公司。

本文网址:http://www.shinerayad.com/news_info.asp?id=3929

返回           上一篇           下一篇