UI设计和网页美工的区别是什么

UI设计只是网站美工的一部分，网站美工需要学习的内容有UI设计，PS，AI，html语言，javaScript语言等。

网页美工局限于美术设计和页面制作，UI注重交互，用户体验是第一目标。

UI设计师的职能大体包括三方面：一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量UI设计的合理性。

网页美工需要学习网站概念知识、色彩构成、网页设计中的美学规律、FIREWORKS网页图形处理、FLASH二维动画、PHOTOSHOP平面设计软件在网站设计中的应用、作品设计及点评等内容。

拓展知识

UI设计：UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

网页美工：是精通美学，photoshop（PS），FLASH，dreamwaver（DW）等一网站制作软件的网络人员，必须具有良好的创意和一定程度的审美观。必要时需要一定的策划知识。为网站所有的页面画出来并用DW和css排版出来。页面必须清晰简洁，还要适宜后台调用。

参考资料：UI设计_百度百科  网页美工_百度百科

1、美工，就是美化网站的外表：

网页考虑更多的是界面的好看，所以做静态界面的人都叫美工，基本上页面的结构都不用考虑了，都是固定的了，要做的就是客户喜欢什么风格把它做出来就行。

2.UI设计师是指专门研究和设计产品的用户使用界面，目的是在满足功能的前提下通过图形界面的合理设计使用户更容易理解和操作，从而提高产品在用户心目中的形象。

网页要求交互性有效性越来越强，用户体验也受到了重视 ，在设计的要求设计师从用户的使用角度去安排设计，这就是UI设计师。

拓展资料

UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI设计分为实体UI和虚拟UI，互联网说的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。

参考资料来源：百度百科-UI设计

UI设计师看重的是整体的造型能力，看重图形创意功底和用户交互体验设计。网页设计师看重的是版式编排能力，看重版式框架掌控和视觉流程的把控。这是两个设计岗位的核心差别。

UI设计更多的针对的是小屏用户，即手机、平板电脑等触控方面的设计。所以要求对于交互体验要有较深的了解，能揣摩用户的操作习惯，并根据这些做相相应的界面设计、流程规划等。在UI设计中除了与网页设计中相似的界面设计之外，还有很大一部分工作是对于软件的图形设计，比如说APP的LOGO，界面中的ICON等。对于这方面的设计，除了要有很强的图形创意功底之外，对于细节的把控也是重中之重。因为对于小屏设计来说，可能就是一两个像素点上来求精致，因此UI设计师对于细节的深挖能力很重要。

并且UI设计师要能紧跟设计风潮，比如说之前苹果带动的拟物化的设计，就要求UI设计师有很强的写实描画能力。而后期流行的扁平化设计风格，就要求UI设计师有较好的图形概括能力。

网页设计更多是针对于大屏用户，在电脑端来浏览网页的。所以网页设计要求要有很好的页面布局能力，也就是说版式编排能力。因为要考虑到网页的浏览规律，所以在网页设计中，对于视觉流程的掌握要求很高。

在网页设计中，不存在太多的图形创作，并且整格版式的视觉效果要超过对于细节的刻画。因此相对来说，网页设计在某些方面难度低于UI设计。

其实UI设计和网页设计的区别并不太大，很多的UI设计师就是从曾经的网页设计师转行过去的。而且相信随着移动端的用户越来越多，UI设计师的工作也会越来越被重视。

这里只谈视觉设计和用户的区别和联系，以及如何将两者统一起来。

一、什么是视觉设计

人所获得的信息近80%来自视觉，是一种官能。

随着时代的进步，视觉设计从传统行业走向互联网时代，环境的变迁使视觉设计的流行趋势经历了从商业美术、工艺美术、印刷美术设计、装潢设计、平面设计、界面设计等几大阶段，从关注数觉表现到关注视觉传达，生死点从展示手段到是否得到并留住用户。

视觉已然成为一种沟通现实与虚拟的媒介
当我们拿到一个app时，第一眼看到的是有形的视觉即界面，我们通过界面上的按钮和页面跳转完成我们的操作，当它能够满足我们操作的时候，我们会说这个app还行，如果能很顺手或者超出预期的完成我们想要的操作时，我们就会对app产生依赖。反之，我们会觉得这个app好烂，删掉、再见。然而当我们对一个app不满时，我们一般会觉得app/产品不够好，而不是视觉不够漂亮。这个时候视觉已然不是单纯的视觉，它背后承载了产品功能和数据逻辑。

好的视觉设计能够做到视觉传达与产品目标的统一
传统行业，当设计出来的一个水杯没有购买时，不能带来商业价值，这个水杯的设计就没有价值。互联网行业，当一个app设计出来，没有能力去吸引用户或者留住用户，这个app的设计就是失败的。想要赢就必须要了解用户，了解什么样的功能才能满足用户，这些功能要怎么样通过视觉正确效率的传达给用户，至关重要。

要做出好设计，功能和视觉都要有，并且做到结合的唯一性才能走的更远。
举个简单的例子，tb购买流程中，如果通过视觉强化突出购买功能做到视觉传达和产品目标一致的。醒目的橙色提交订单按钮一目了然。

但实际工作中往往过于强调设觉，而忽略了产品本身，这样很容易陷入炫技的误区。锤子设置语言的设计就是一个很好的反例。对于设置语言这样一个非常少用到的功能，却用了如此明显的视觉表现方式，致使整个界面的重心失衡，虽然对于切换语言这个问题的解决方案的处理还不错，但视觉表现重心和产品重心不一致。

二、什么是用户体验

用户体验，UE/UX，用户体验是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受。
简单来说，产品体验是场景＋用户＋任务过程产生的，牵扯到内容、用户界面、操作流程、功能设计、服务等多个方面的用户使用感觉。这也是一个产品成功的主要因素。

（来源于互联网）

互联网时代初期人们对用户体验的理解更倾向于产品体验，随着竞争激烈的日益加剧和产品差异化越来越小，人们对体验的要求也越来越高，视觉设计也从单纯的满足产品需求上升到服务于用户设计的高度，产品体验也更为广阔的上升到创新体验。比如为什么支付宝的生活圈和微信的朋友圈如此之像，就是没人用呢？

这里还是提一下，用户体验的5要素，视觉的比重20%，而且越来越和业务、交互、体验融为一体。界面一旦被功能串起来变产生了交互，在交互的过程中也就产生了体验。一个优秀的设计师就是能够将界面、交互、体验融为一体去考虑，权衡布局、简化设计、清晰梳理判断整体页面结构，而不是陷入一个单角色里不能自拔。

三、视觉设计为什么要与用户体验统一

好的设计总是能带来好的体验，默默无闻地为用户服务的，比如iOS键盘能够动态的调整触摸热区，使每个按键上下左右的间隙都成为了该按键的有效触碰面积，从而提高了输入精确度。这个设计默默地每天为每一位用户服务着。

通过苹果键盘设计的案例，我们可以看出设计表现随着对模块功能设计目的的清晰而与体验越来越统一。彻底解决了用户抱怨苹果键盘误操作严重的问题。

再看一个列表的案例

任何app中都少不了列表，设计师在设计列表的时候也是绞尽脑汁想设计的新颖独特一些，可以理解漂亮的视觉在一定程度是可以讨好用户，但是是不是漂亮的视觉就可以留住用户呢？答案是否定的。设计目的是为了带来更好的用户体验，而不是仅仅好看。

为什么要有列表？

展示商品，实现转化，这是最终的商业目的。没有商业价值的设计是没有价值的。

展示商品是个重要的中间环节，如何才能通过展示商品帮助达成转化呢？在物质丰富、竞争激烈、产品差异越来越小的场景下，我们必须把思路从摆东西出来卖转变成帮助用户找到他们想要的商品。

产品思路：展示商品－方便用户浏览－帮助用户快捷、舒适的找到自己想到的东西－购买转化
设计师思路：展示商品－美观的展示
目标不一致导致用户看到的界面和体验也一致。

为什么要这样设计列表？

具体到商品的信息一般来说包括：商品名称、商品图片、价格、折扣、 评价、购买数量。。。。不同商品参数略有差异，但是商品名称、商品图片、价格可以说3要素了。这些参数位置的摆放影响用户的视觉线。

目前很多产品卡结构所建立的阅读顺序是“s”弯，大量的浏览会比较疲劳。

图片比文字更能吸引用户到注意，所以当价格距离图片越近时，这种垂直的阅读方式会更节约阅读成本。有兴趣的可以了解下费茨(Fitts)定律。

以淘宝为例，去年吧应该在聚划算上还有价格在右边的案例，今年已经全部统一产品卡价格位置，统一用户阅读体验。

• 只有视觉与体验统一了，才能具备更强的竞争力

• 只有视觉与体验统一了，传达产品真正的目标

• 只有视觉与体验统一了，更好的为用户解决问题


四、如何统一


设计师要懂商业
优秀的设计师要有能力在达成产品功能的同时做到视觉的美观。设计师要有产品思维。不要把自己定位在美，好看上。借用一张明性很好人体图，只有了解整体的经络组织和骨骼才知道皮肤为什么长这样。





设计规范要全面
一般情况下的设计规范，涉及了颜色、文字、控件、布局、图标等视觉感官上的规定，而对于在什么场景下适配什么样的设计以及交互行为却没有一个统一的设定。这样就导致了大家虽然都游走在规范里，带来的用户体验却是不一致的。





以弹窗为例，在什么场景下使用模态，什么场景非模态，模态必须要点击按钮关闭还是点击屏幕任意地方关闭？不同的设计人员对接不同开发的时候如果没有对用户场景和交互行为有明显说明的情况下很难在一个app里面做到视觉和体验的统一。

对于非模态或者toast而言，在日常场景和支付场景下视觉上有无区分，什么场景下需要简洁提示，什么场景下需要配合一些动画来更体贴的说明情况，同样如果没有完整的规范，就很难在视觉设计和用户体验上做到统一。

视觉评审的正确标准

规范有了，那么在日常的工作当中，如何评价一些视觉设计是好的还是不好的，个人认为不光要有标准还应该有主次顺序。

结构清晰
逻辑流畅
体验统一
美观

上面提到过，当界面作为用户直面的媒介时，他所承担的责任是帮助用户简单、快速、愉悦的解决问题，如果没有解决问题那就是在制造问题，这样的产品是不会因为美观而留住用户。从体验的5要素来说，视觉表现或者美观也只是占了20%。

大道至简，一句话总结下

正确的目标导向，合理的产品思维，全面的设计规范，合理的审核机制，才能带来视觉与体验的统一，让设计更具有商业价值。

网页美工局限于美术设计和页面制作，UI注重交互，用户体验是第一目标。
1、UI设计：UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。
2、网页美工：是精通美学，photoshop（PS），FLASH，dreamwaver（DW）等一网站制作软件的网络人员，必须具有良好的创意和一定程度的审美观。必要时需要一定的策划知识。为网站所有的页面画出来并用DW和css排版出来。页面必须清晰简洁，还要适宜后台调用。