UI设计 课件全套 刘田珦 项目1--6 UI界面基础 ----网店 UI 设计.pptx

项目1-UI界面基础;;学习目标

;;1.1.1UI设计的概念

;1.1.2设计类别

;4.UED

UED(UserExperienceDesign)是指用户体验设计,它是以用户为中心、以用户需求为目标而进行的设计。

5.ID

ID(IndustrialDesign)是指工业设计,它是以工学、美学、经济学为基础对工业产品进行的设计。;1.1.3网页UI设计和软件UI设计;3.呈现内容

在同一个界面中,PC端网页相比移动端软件可以更多地展现信息和内容。例如,在购物网站的网页中可以呈现很多信息版块,而在移动端的App应用软件中则相对比较简洁,呈现信

息的方式也完全不同。

4.开发方式

网页与软件在界面的设计表现上会有一些相似之处,但是其开发的方式是完全不同的。网页开发语言通常主要使用HTML、CSS、JavaScript,而软件开发语言则更多使用C++、ASP.NET、

PHP和Java等。;UI设计的流程有需求分析、设计分析、调研验证、方案改进和用户验证。

1.需求分析

需求分析是指对产品的需求进行分析,设计者应该明确是什么人用(用户的年龄、性别、爱

好、受教育程度等)、在什么地方用(移动设备、家庭多媒体等)、如何使用(鼠标、键盘、触摸屏、遥

控器等)产品。任何一个元素的改变都会使设计做出相应的调整。

2.设计分析

设计分析是指对产品的设计提出方案,包括确定页面类型、明确设计目标、方案的具体落地

等。例如,为学生制作学习软件界面,这类产品可以先通过分析以明确设计目标,从而吸引学生

的学习兴趣。然后,需要在设计中着重体现学习的氛围,提出不同风格的设计方案,以备选用。

3.调研验证

调研验证是指对不同风格的设计方案进行用户反馈。在设计过程中确保不同的设计方案在同

一水准,不能存在明显的差异。不同的设计方案完成后,开始进行调研验证,获取用户的反馈意见。

通过对用户反馈意见的整理和总结,得出每套方案的优缺点,便于对最终的方案进行调整和改进。;4.方案改进

方案改进是指对已有的设计方案进行修改和调整。通过对用户的调研验证,可以得到目

标用户认可的方案。设计者需要有针对性地对设计方案进行下一步修改,使所设计的产品能够满足客户的需求。

5.用户验证

用户验证是指产品推出后???集用户的真实反馈意见。改进后的软件界面设计方案将应用在所开发的软件中并推向市场,但是设计过程并没有结束,还需要用户反馈意见,设计者应该在软件产品上市后,多与用户交流,了解用户真实的使用感受,为以后的版本升级和改进积累经验。;1.视觉创作类软件

视觉创作类软件是用来进行平面创作的工具,可以进行UI中插画、图标、广告图等平面图形的设计与合成。视觉创作类软件主要有AdobePhotoshop和AdobeIllustrator,如图1-3所示。;2.界面设计类软件

不同于视觉创作类软件,界面设计类软件更注重高效的UI排版和展示,是设计界面的主

要工具。界面设计类软件主要有AdobeXd和Sketch,如图1-4所示。;3.原型创作类软件

原型创作类软件是专门用来绘制线框原型的工具,便于在原型文件中进行逻辑标注和连

线。原型创作类软件主要有AxureRP和ProtoPie,如图1-5所示。;4.交互动画类软件

交互动画类软件是用于将静态的设计稿制作成交互动画的工具。交互动画类软件主要有

AdobeAfterEffects、Flinto、Principle、Framer、Origami和Hype3,如图1-6所示。;5.代码编程类软件

代码编程类软件是用来编写代码文本并生成相关软件运行文件的工具。代码编程类软件

主要有AdobeDreamweaver和SublimeText,如图1-7所示。

;6.切图标注类软件

切图标注类软件是用来生成切图和标注文件,并完成团队协作的相关工具。切图标注类软件主要有蓝湖、Zeplin和PxCook,如图1-8所示。;UI是用户与软件进行交互的平台,由于它在软件中具有重要的作用,所以UI设计需要遵循一定的原则。

1.简洁原则

2.记忆负担最小化原则

3.一致性原则

;1.3.1色彩的基础认识;;;;;;;;;课堂案例1-1制作网页背景图;;;;;;;;1.3.2UI的色彩搭配及作用;;;;;6.色彩搭配要便于阅读

为确保界面的可读性,需要注意界面设计中色彩的搭配,较为有效的方法就是遵循色彩对比的原则。在浅色背景上使用深色文字,在深色的背景上使用浅色文字等。在一般情况下,在界面设计中动态对象应该使用比较鲜明的色彩,而静态对象则应该使用比较暗淡的色彩