UI设计、平面设计、网站设计有什么区别？

①-①-UI设计的定义:

UI是UserInterface的简称。UI设计是指软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅使软件个性化、有品位，而且使软件的操作舒适、简单、自由，充分体现了软件的定位和特色。

软件设计可以分为两部分:编码设计和UI设计。UI的原意是用户界面，是英文user and interface的缩写。从字面上看，它由用户和界面两部分组成，但实际上它还包括用户和界面的交互。

在电子产品的快速发展中，界面设计越来越受到重视。做界面设计的“美工”也叫“UI设计师”或“UI工程师”。其实软件界面设计和工业产品中的工业造型设计一样，都是产品的重要卖点。一款界面美观的电子产品，会给人带来舒适的视觉享受，拉近人与商品的距离，是一种基于科学的艺术设计。测试一个界面的标准既不是一个项目开发团队负责人的意见，也不是项目成员投票的结果，而是最终用户的感受。

②-平面设计的定义:

图形设计(Graphicdesign)又称视觉传达设计，是以“视觉”作为一种传达和表达的方式，通过各种方式对符号、画面、文字进行创造和组合，从而做出一种传达思想或信息的视觉表达。平面设计师可能会使用专业技能，如排版，视觉艺术，页面布局和计算机软件，以达到创意策划的目的。[1]?平面设计通常可以指制作(设计)的过程和最终完成的作品。

平面设计的常见用途包括徽标(商标和品牌)、出版物(杂志、报纸和书籍)、平面广告、海报、广告牌、网站的图形元素、徽标和产品包装。例如，产品包装可能包括商标或其他艺术作品、排列的文本和纯设计元素，如风格统一的图像、形状、大小和颜色。组合是平面设计最重要的特征之一，尤其是当产品使用预先存在的材料或多种元素时。

③-网站设计的定义:

简单来说，网站设计的目的就是制作网站。简单的信息，如文本、图片(gif、JPEGs、png)和表格，可以通过使用标记语言(如超文件标记语言和可扩展超文本标记语言)放置在网站页面上。更复杂的信息，如矢量图形、动画、视频、音频等多媒体文件，需要插件运行，也需要标记语言移植到网站中。网页设计是设计过程的前端(客户端)。设计通常用于描述一个网站，包括文字标记，但这是一个灰色地带，因为它也涵盖了网络的发展。网页设计师应该意识到可用性，如果他们的角色需要创建标签，那么他们也应该成为网页可读性的最新指南。网页设计(WebDesign)，是将软件需求转化为软件网站的过程，指的是在互联网上用Dreamweaver、photoshop等工具按照一定的规则制作的相关网页的集合，用于展示特定的内容。简单来说，网站就是一个交流工具，就像公告栏一样。人们可以通过网站发布自己想要公开的信息，或者利用网站提供相关的网络服务。人们可以通过网络浏览器访问网站，获取他们需要的信息或享受网络服务。网站由域名(俗称网站)、网站源程序和网站空间组成。其中，域名类似于互联网上的门牌号，是一种用于在互联网上识别和定位计算机的层次化字符标识符，与计算机的互联网协议(IP)地址相对应。网站设计由设计师通过Frontpage或Dreamweaver等工具进行编辑！

2.用于UI设计、图形设计和网站设计的工具:

1.UI设计所需的软件工具:

左起:Photoshop、Illustrator、CorelDraw、Indesign、Fireworks、DreamWeaver、Flash、HTML5、CSS(级联？风格？Sheets)、AxureRPPro7.0、IOS、Android .

2.平面设计所需的软件工具:

Photoshop，Illustrator，CorelDraw，Indesign，Fireworks，PageMaker .

3.网站设计所需的软件工具:

①Photoshop:

学习图像处理、编辑、通道、图层、路径的综合应用；图像颜色的校正；各种特效滤镜的使用；特殊词语的产生；图像输出和优化等。、灵活运用图层样式、流体变形和褪色与蒙版，制作出千变万化的图像特效。

②徒手:

无论是个人作品设计、公司logo、海报制作，都可以轻松完成并应用于广告、印刷等行业。

③CorelDraw:

通过将CorelDRAW9的全方位设计和网页功能融入到现有的设计方案中，做出矢量插画、设计和图像，公司logo、简介、彩页、说明书、产品包装、logo、网页等都设计得很好。

(4)④插画师:学习如何绘制图形、包装、制作宣传页，这样可以更方便的设计LOGO和CI。不到一个月，你就会成为真正的美术大师，在Photoshop的基础上学习，效率翻倍。

⑤MicrosoftFrontPage？

如果你已经熟悉了Word，我相信你用FrontPage设计网页会非常得心应手。用FrontPage制作网页，才能真正体会到“功能强大，简单易用”的含义。页面制作由FrontPage中的编辑器完成，其工作窗口由三个选项卡组成，分别是“所见即所得”编辑页面、HTML代码编辑页面和预览页面。FrontPage有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都可以让初学者更容易地编辑网页。

FrontPage最强大的功能是它的站点管理功能。在服务器上更新站点时，不需要创建更改文件的目录。FrontPage将为您跟踪文件并复制这些新版本。FrontPage是现存唯一的制作网页的软件，它不仅可以在本地计算机上工作，还可以通过互联网直接在远程服务器上的文件上工作。

⑥网景编辑器

NetscapeCommunicator和NetscapeNavigatorGold3.0都有fckeditor。如果你喜欢用网景浏览器上网，用网景编辑器真的很简单方便！当你用网景浏览器显示一个网页时，点击编辑按钮，网景会把网页存储在硬盘里，然后你就可以开始编辑了。您还可以编辑文本、字体和列字，更改主页作者、标题、背景颜色或图像，定义绘图点，插入链接，定义文档代码，插入图像，创建表格等。就像FrontPage2000一样，不是吗？而网景编辑器对于复杂的网页设计功能有限，甚至不支持表单创建和多框架创建。

网景编辑器是初学者制作网页的好入门工具。如果你的网页主要由文字和图片组成，网景编辑器将是一个容易的选择。如果对HTML语言有所了解，可以使用记事本或UltraEdit等文本编辑器编写几条HTML语句，也可以弥补网景编辑器的一些不足。

⑦AdobePagemill？

Pagemill功能不强大，但是很好用，适合新手做漂亮的，不是很复杂的主页。如果你的主页需要很多框架、表格和ImageMap图片，那么AdobePagemill确实是你的首选。？Pagemill的另一个特点是它有一个剪贴板，你可以随意拖拽任意多的文本、图形和表格，然后在需要的时候打开，非常方便。

⑧ClarisHomePage？

如果你使用ClarisHomePage软件，你可以在几分钟内创建一个动态网页。这是因为它有一个很好的创建和编辑框架的工具，你可以添加新的框架，而不需要花费太多的精力。此外，ClarisHomePage3.0集成了FileMaker数据库，增强的站点管理功能还允许您检测页面的合法连接。但界面设计过于粗糙，对ImageMap图像的处理也不完整。

⑨DreamWeaver？

自制动态HTML动画网页

DreamWeaver是一款很酷的网页设计软件，包含可视化编辑和HTML代码编辑软件包，支持ActiveX、JavaScript、Java、Flash、ShockWave等功能。而且还可以通过拖拽，支持动态HTML的设计，从头到尾制作动态HTML动画，让页面在Netscape和IE4.0浏览器中正确显示，无需插件。同时还提供了自动更新页面信息的功能。

DreamWeaver也采用了RoundtripHTML技术。该技术使网页可以在DreamWeaver和HTML代码编辑器之间自由转换，HTML的语法和结构保持不变。这样，专业设计师就可以在不改变原有编辑习惯的情况下，充分享受可视化编辑的好处。DreamWeaver最具挑战性和最重要的是它的开放式设计，这使得任何人都可以轻松扩展其功能。

⑩烟花？

第一个完全为网络制作者设计的软件。

Fireworks历史悠久，它的出现彻底改变了Web绘图。Fireworks是专门为网络形象设计开发的，内置了丰富的功能支持网络发布，比如Fireworks可以自动裁剪图片，生成动态鼠标响应的javascript。而且Fireworks有非常强大的动画功能和近乎完美的网络图像生成器(导出功能)。它加强了与dreamweaver的联系，可以直接生成dreamweaver的Libaray甚至导出为CSS样式的网页和图片！

闪光？

让你的网页动起来。

Flash是一种在互联网上使用的动态交互式冲击波。它的优点是体积小，可以边下载边播放，避免用户长时间等待。FLASH可以用来生成动画和给网页添加声音。这样，你可以生成多媒体图形和界面，但文件大小很小。FLASH不能像语言一样编程，但是通过它内置的语句结合JavaScripe，你也可以制作一个交互性很强的主页。有人曾经说过:下个世纪的网络设计师不会用FLASH，会被淘汰！我相信这句话是真的！

HotDogProfessional？

用各种复杂的技术制作一个网页。

HotDog是早期基于代码的网页设计工具，它最显著的特点是提供了很多向导工具，帮助设计者制作页面的复杂部分。HotDog的高级HTML支持marquee的插入，在预览模式下可以正常速度观看。这是非常罕见的，因为即使是开创这个标签的微软，也没有在FrontPage中提供这样的功能。HotDog对插件的支持远远超过其他产品，它提供的对话框可以让你手动为不同格式的文件选择不同的选项。但是和中国人打交道不是很方便。

HotDog是一款功能强大的软件，对于想要在网页中加入CSS、Java、RealVideo等复杂技术的高级设计师来说是一个不错的选择。

宅地？

做一个可以完全控制页面进程的网页。

Allaire的HomeSite是一款小巧而多功能的HTML代码编辑器，具有丰富的帮助功能，支持CGI和CSS，可以直接编辑perl程序。HomeSite的工作界面复杂而简单。根据习惯，可以设置成记事本之类的简单编辑窗口，也可以在复杂界面下工作。

HomeSite更适合复杂精彩的页面设计。如果你想完全控制你制作页面的进度，HomeSite是你最好的选择。但是对于初学者来说太复杂了。

MicrosoftVisualStudio

它是美国微软公司的一系列开发工具包产品。？

该系列的版本有:2003、2005、2008、2010、2012、2013、2015、2015RTM及以后版本；

适合开发动态aspx网页，同时还可以制作非刷新网站和webservice功能。

Jbuilder

一个可视化JAVA开发工具。它是在Java2平台上开发商业应用程序、数据库和发布程序的优秀工具。它支持J2EE，因此程序员可以快速转换企业Java应用程序。？

无论什么版本，都适合用它来开发JSP页面。

三、UI设计、平面设计、网站设计的设计方向/方法/步骤/流程:

1，UI设计方向

UI是用户界面，是英文user and interface的缩写。从字面上看是用户和界面两个组成部分，但实际上也包括了用户和界面的交互，所以可以分为三个方向，即:用户研究、交互设计和界面设计。

①用户研究

用户研究包括两个方面:一是可用性工程，研究如何提高产品的可用性，使系统的设计更容易让人使用、学习和记忆；二是通过可用性工程的研究发掘用户的潜在需求，为技术创新提供另一种思路和方法。

用户研究是一个跨学科的专业，涉及可用性工程、人体工程学、心理学、市场研究、教育学、设计学等多个学科。用户研究技术是从人文角度研究产品，从用户角度介入产品开发设计。

用户研究(User research)通过对用户工作环境和产品使用习惯的研究，可以在产品开发初期将用户对产品功能、设计和外观要求的期望融入到产品开发过程中，从而帮助企业改进产品设计或探索一种新的产品理念。

是获取用户需求和反馈的途径，也是检验界面和交互设计是否合理的重要标准。

②交互设计

这部分是指人机交互工程。以前交互设计也是程序员做的。事实上，程序员擅长编码，但不擅长与最终用户互动。所以很多软件虽然功能齐全，但是交互设计粗糙、繁琐、难用，学习起来也比较困难。用了这样的软件后，人不是聪明上进，而是觉得被忽悠了，被羞辱了。很多人因为不会操作电脑软件而下岗失业。这种互动使计算机成为一个可怕的技术怪物。于是我们把交互设计从程序员的工作中分离出来，单独成为一门学科，也就是人机交互设计。他的目的是让软件易用、易学、易懂，让计算机真正成为方便服务人类的工具。

③界面设计

在漫长的软件开发中，界面设计一直没有得到重视。做界面设计的人，在贬义上也被称为“艺术家”。其实软件界面设计和工业产品中的工业造型设计一样，都是产品的重要买点。友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是简单的艺术绘画，需要定位用户，使用环境，使用方法，为最终用户设计，是一种纯科学的艺术设计。测试一个界面的标准不是一个项目开发团队领导的意见或者项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，这是一个不断为最终用户设计出满意视觉效果的过程。

2、平面设计的设计方法/步骤:

1.调查？

调查是认识事物的过程，设计需要有目的、完整的调查。背景、市场调查、行业调查(关于品牌、受众、产品)、定位、表达方式、调查是设计的开始和基础(背景知识)。

2.内容？

内容分为主题和具体内容两部分，是设计师进行设计前的基础资料。

3.概念？

构思是设计的第一步，思考在设计中比什么都重要。创意从来都是独立于设计的。也许这是你的视觉作品中最难传达的思想。

4.调动视觉元素？

在设计中，基本元素相当于你作品的组成部分，每个元素都要有传递和加强信息传递的目的。真正优秀的设计师往往非常小气，每使用一个元素，都会从整体需求考虑。在一个页面中，组成元素可以根据类别进行划分，例如:？

标题、文字、背景、色调、主图、留白、视觉中心等。平面设计布局是将不同元素有机结合的过程。比如在布局上，经常使用框架(也叫骨骼)，形式有很多种，规则框架和不规则框架，可见框架和隐藏框架；在字体元素中，字体和字体的选择和搭配是很有讲究的。选择字体风格的过程是一个审美判断的过程，色彩的运用可以体现一个设计师对色彩的理解和修养。色彩是一种语言(信息)，有感情，能让人联想，能让人感觉到冷暖，前后，轻重，大小等等。善于调动视觉元素是设计师必备的能力之一。

(5)、选择表达方式？

我们在三大构成中学习了多种图形处理和表现手法，如对比、类比、夸张、对称、主次、明暗、变化、重复、矛盾、辐射、节奏、粗细、冷暖、面积等形式。此外，还有手绘效果来自图形处理的效果，如油画、铅笔、水彩、版画、蜡笔、涂鸦和其他如摄影、老照片等等。那么你想选哪个呢？这取决于你的目的和目标群体，以及你的设计水平。

6.平衡？

平衡能带来视觉和心理上的满足。设计师要解决画面中的力场平衡，前后平衡，平衡感也是设计师构图需要的能力。平衡和不平衡是相对的，是否符合主题要求才是标准。平衡分为对称平衡和非对称平衡，包括点、线、面、色、空间的平衡。

⑦，才华横溢？

记住，你应该创造视觉刺激来升华你的作品。

今天，关于风格？

作为一名设计师，他有时反对风格。固定风格的形成意味着自我的僵化，但同时风格又是一个设计师的个性、喜好、阅历和修养的体现，也是一个设计师成熟的标志。他认为“只有了解大同，才能独行。”

⑨、生产？

检查项目包括:图形、字体、文字、颜色、排列、比例、出血等。

要求:视觉想象和效果要赏心悦目，更重要的是要让观众看得懂！

3.网站设计的设计流程:

①网站设计流程1:确定风格。

一个网站的风格可以通过它的色彩、技术、文字、布局、交互来概括一个网站的个性:是粗犷豪放，还是清新美观；是温柔优雅，还是执着热情；是活泼多变，还是墨守成规？明确了自己要给人什么样的印象之后，就要找出网站中最有特色的东西，也就是最能体现网站风格的东西。并把它作为网站的特色来重点加强和推广。风格的形成不是一次就固定下来的。你可以在实践中不断强化，调整，提高。

②网站设计流程二:收集素材。

寻找和收集相关的文字、图片、声音、图像等资料，并对收集到的资料进行整理和加工。

③网站设计流程三:网站布局

主页:主页的主题也体现在logo和网站标题上。对主页主题的准确总结可以帮助用户准确选择自己需要的网站。

首页导航:网站导航可以看作是对网站内容的分类_对网站内容进行细分，方便用户根据个人需求选择和浏览相应的栏目页面。

首页内容:页面的内容布局首先需要分析网站用户群体的需求，将用户最关注的内容放在首页最重要的位置。一般情况下，页面内容布局是根据用户的浏览风格和内容的重要性，从左上至右下排列的。

④网站设计流程四:LOGO设计

如何设计logo是很多网站设计师头疼的问题。在设计之前，需要进行基础的调查分析，即对企业进行全面的调查，然后挖掘所需的资料，最后进行设计开发。这也是最重要的一步。只有反复推敲修改，才能设计出满意的logo。

⑤网站设计流程五:导航设计

在设计导航之前，要充分分析用户需要什么。从导航的有效性、实现和利用来设计导航。

6.网站设计流程6:横幅设计

在设计横幅之前，我们要和客户沟通好他们想在横幅上突出什么，然后有针对性地展示横幅上的内容。当我们确定重点时，banner的颜色搭配应该是明亮干净的，以与整个页面相协调。

⑦.网站设计流程7:友情链接设计。

在设计网站的友好链接时，要考虑网站的优化。链接不能滚动，因为没有人交换它们。最好把它们列在最下面。

四、注意事项

视觉会给人带来一系列的生理、心理、情感和行动反应。设计是视觉体验的科学，它包括两个方面，一是人在没有人为改变的情况下感受到生理的基本反应，二是即时或不确定因素的构成。比如个人喜好，性格等等。

1，相对稳定方面:

主要是生理上的视知觉，人的视觉习惯，视觉过程，视觉逻辑，比如从上到下，从左到右，喜欢连贯，重复，喜欢对比，而在色彩方面，人最喜欢的其实是有对比的补色，等等。这都与人的生理习惯有关，是人的生理机能的本能反应。作为设计师，我们应该充分理解并灵活运用这些知识。设计是对人的关心。首先要研究文化和人的感知这些相对稳定的方面，需要在实践中总结。

2.不稳定方面:

不稳定方面主要是指情感、素质、口味、体验上的差异。在设计过程中，你需要有一定的判断和把握能力，需要客观和克制才能完成优秀的设计。

3、设计思维的科学性:

设计要有科学的思维方法，在同中求异，在异中求同，掌握和运用各种思维方法，如纵横关联思维、发散思维等，善于运用科学的思维方法去寻找奇特的新的视觉形象，从而不断发现新的可能性。

事实上，平面视觉科学是一门博大精深的学问。只有这些知识得到完善和深入普及，才能保证设计水平的普遍提高。此观点仅在此提出，有待今后结合其他学科的研究成果进行系统整理和探讨。