UI界面设计与制作-UI中的图标设计.pptx

UI界面设计与制作

全彩慕课版

本章介绍：

随着互联网市场的发展及成熟，企业对于UI

设计从业人员的要求已经趋向复合型，因此想要从事UI设计行业的人员需要系统地学习与更新自己的知识体系。本章对UI设计的基本概念、常用软件、发展趋势、学习方法、项目流程以及规范于规则进行系统讲解。通过本章的学习，读者可以对UI设计有一个宏观的认识，有助于高效便利地进行后续的UI设计工作。

◆掌握UI设计的基本概念

掌握UI设计的常用软件

◆了解UI设计的行业发展

◆了解学习UI的正确姿势

◆掌握UI设计的制作流程

学习目标

UI即UserInterface(用户界面)的简称，UI设计是指对软件的

人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观，更要保证交互设计的可用性及用户体验的友好度。

UI界面设计与制作1.1UI设计的基本概念

UI设计

根据软件的专业性、市场的认可度及用户的使用量等因素可以

将UI设计的常用软件总结为界面设计、动效设计、网页设计、3D渲染、思维导图以及交互原型这六类。

UI设计的常用软件

UI常用软件

动效设计类

交互原型类

AftorEffocts

AdobexD

MndNode

Skeich

]

儿

基刀

XMind

3

()

从早期的专注于工具的技法型表现，到现在要求UI设计师参与到整

个商业链条，兼顾商业目标和用户体验，可以看出国内的UI设计行业发展是跨跃式的。UI设计从设计风格、技术实现到应用领域都发生了巨大的变化。

1.3UI设计的发展趋势

2018-至今

全链路与复合化设计

2014-2015年

重视用户体验

2016-2017年

扁平化设计

2010-2013年

技法型表现

UI设计发展趋势

未来

1.整体学习

进行相关课程学习及文章学习，针对初学者建议进行课程学习，这

样可以系统的学习UI的相关知识和设计应用方法。

UI界面设计与制作N1.4UI设计的学习方法

DesigningforiPhone

tvhealtounfhsagdtforenPonXiMa,rdheea

Wansiten@ae@

Android设计规范

iOS设计规范

enceCialisee

--

2.作品收集

建议设计师每天拿出1-2小时到UI中国、站酷(ZCOOL)、追波

(Dribbble)等网站，浏览必威体育精装版的作品，并加入收藏，形成自己的资料库。

dilbb2e

1.4UI设计的学习方法

UI中国

追波

站酷

3.项目临摹

首先推崇的是从应用中心下载优秀的App,截图保存进行临摹。

临摹一定要保证完全一样并且要多临摹。

1.4UI设计的学习方法

贝壳找房App网易云课堂App京东App

盘地图

北京·

4.项目实战

经过一定的积累，最好通过一套完整的企业项目来提升。从原

型图到设计稿再到切图标注，甚至可以制作成动效Demo。

1.4UI设计的学习方法

XJo适动女鞋

新款女鞋运动鞋简约风

Y78

从原型图到设计稿

点击可以选择付款方式和送货地址收质不便时，可选挥免质代被获服房

←

购物车

男款背包

施行户外运动校因学生包

xio

塑撑结头保W24

xia

布艺手提描

M42

xuo

体闲阅础班

*78

Xo

布艺手报微M42

xuo

体闲属随排*78

*100k山

1100%

山

@4tA

最近浏览

合计：

V237

Y237

¥78

Y159

¥159

41AM

针对整个产品的设计流程而言，UI设计仅是其中的一部分。一个

产品从启动到上线，会经历多个环节、由多个角色共同协作完成。每个角色基本都会有对应的1个或多个环节。

1.5UI设计的项目流程

上图为大流程，下图为展开流程，下图中的橙色为多个角色共同协作完成

需求分析交互设计视觉设计技术开发产品上运建护

要证

产品上维运要维护

变互

评审

交互设计

设计

评

视觉设计

区走值

技术开发

需求分析

1.单位介绍

(1)DPI和PPI

PPI:像素密度(PixelsPerInch,PPI)是屏幕分辨率单位，表

示的是每英寸所拥有的像素数量，通常代表苹果手机。

DPI:网点密度(DotsPerInch,DPI)是打印分辨率单位，表示

每英寸打印的点数，通