获取海量免费设计资源,请访问👉 资源广场
获取课程课件及演示案例源文件,请访问👉 教程文件
你是否想要入门UI设计,却苦于自学没有成体系的便捷途径?看着手机上、电脑中缤纷跃动的UI界面,你会不会好奇它们是如何设计出来的?
我们集合了各位拥有多年B端、C端UI和交互设计经验的讲师,为你带来这套让你看得懂,学得会的 UI设计基础入门自学手册,从基础设计规范、简单图标案例,到车载温控界面、原型交互实战全面解析。
本套教程主要以即时设计这款软件为主,详细讲解UI设计入门中的各种常见界面、规范以及实现方法。
即时设计是一款在线可协作的UI设计工具,目前支持Sketch、figma、XD的本地导入和链接导入。支持创建交互原型、获取设计标注、快速切图、团队协作等。
如果想要了解即时设计的基本功能和操作用法,可以观看即时设计入门系列教程:
如果希望进一步理解和提升UI设计技能,可以尝试UI实战进阶案例系列教程:
用户界面(User Interface,简称UI )是人与机器之间发生互动的空间。人机互动的目标,是允许人类对机器进行有效的操作和控制的同时,让机器能够反馈信息以帮助操作者更好地进行决策。
UI的定义很广泛,主要包含了人机交互与图形用户界面,只要涉及到人类与机械的信息交流的领域都存在着UI,算盘就可以算是由珠子构成的早期人机界面。在进行UI设计时需考虑的因素与人机工程学和心理学等学科有关。
一般来说,UI设计的目标是制作一个用户界面,使操作机器的方式变得简单、高效、愉快,从而产生预期的结果。
这通常意味着操作者只需提供最少的输入就能实现所需的输出,与此同时尽量减少机器对用户的不良输出。由此的进一步延伸则是用户体验(UX)设计了。
- 图标分类:图标主要分成标志性图标和功能性图标。
- 设计风格:图标的风格上主要分为线性、面性和线面结合图标。
- keyline: 帮助我们在设计同系列图标时,让各个图标的面积占比相近的工具。
- 案例讲解:以24x24像素为例,在即时设计软件中设计计时、心率、定位、打卡图标。
- 金刚区特点:金刚区之内的功能和其图标设计、排列等会根据不同需求而变化。
- 金刚区图标设计规范:金刚区图标在布局上是多行排列的。一般单行 4~5 个。多于 5 个需要左右滑动交互。行数控制在 3 行以内。
- 案例讲解:沿用上一课的四个图标,进一步完善成金刚区图标。
- 什么是设计规范:设计规范是一套标准,让大家在设计、开发的过程中,能让产品呈现的风格始终保持统一。
- 设计规范的使用:在界面的设计过程中,常常碰到排版方面的问题,可以直接参考现成的设计规范。
- 作图尺寸:设计稿画布尺寸的确定重点在宽度的选择上。一般会采用一倍稿,宽 375×812。
- 像素的定义:px 是像素,指的是屏幕显示图像的最小颜色方块。
- 案例讲解:活用即时设计资源库制作 iOS 系统的界面。
- 关于短视频:短视频App核心的界面之一,就是视频的播放页面。
- 短视频App播放界面设计要点:采用竖屏的拍摄和播放模式,视频时长相对较短,一般在 5s-5min 不等,方便在碎片时间进行互动传播。
- 案例讲解:制作短视频 App 播放界面。
- 常见的Banner类型:首焦轮播图Banner,瓷片区Banner,白色模块化Banner。
- Banner设计流程:和其他海报设计一样,主要分为四个大阶段:需求分析,构图方式,字体设计,颜色搭配。
- 案例讲解:分为4个部分,分别是需求分析,颜色选择,画面排版,丰富细节。
- 响应式布局:响应式是一种页面的布局方式,可以让一个网站兼容多个终端,而不用为每个终端都做一个版本。
- B端是什么:C端是直接面向个人用户,为其提供服务的产品。而B端则是指面向商家、企业、业务部门等提供服务的产品。
- 如何高效进行响应式设计:利用栅格以及辅助设计布局的功能可以高效的实现设计和优化。
- 案例讲解:演示响应式调整和自动布局。
- 关于数据图表:数据图表泛指在屏幕中显示的,可直观展示统计信息属性(时间性、数量性等),对知识挖掘和信息直观生动感受起关键作用的图形结构。
- 数据图表在UI中的表现:在b端的后台页面,各种类型的图表混合使用,追求数据的准确表达,而在c端的界面中,更偏向于视觉。
- 数据图的类型以及应用:条形图、折线图、饼状图、雷达图/蜘蛛图/玫瑰图、散点图、气泡图、形状表达、数字图表。
- 什么是小程序:小程序是一种不需要下载安装即可使用的应用程序,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念。
- 小程序的视觉规范:包括色彩、空间尺寸、文字、图标尺寸。
- 案例讲解:确定小程序类型制作低保真原型,根据产品的低保真原型图添加内容,添加图片文字内容以及整体UI配色。
- 智能穿戴设备例如手环,手表,眼镜等,随着消费升级及AI、 VR、AR等技术的逐渐普及,从过去的单一功能迈向多功能,同时更加便携、实用。
- Watch OS 的核心设计原则:以单个任务或功能为目标;实现快速交互;独立设计和构建。
- Watch OS 设计规范:色彩规范,控件尺寸规范,文字规范,图标尺寸规范。
- 案例讲解:使用即使设计制作一个智能穿戴设备的心率检测页面。
- 车载设计介绍:车载设计也叫车机设计,主要是根据不同的车内屏幕尺寸和分辨率来进行适配设计。
- 车载设计规范:中控处的屏幕主要会分为竖屏和横屏,各有不同尺寸和分辨率。
- 案例讲解:结合车载系统设计规范讲解车载温控界面的页面设计。
- 交互动效是指展现界面间的转换或界面内元素变化的交互反馈,核心目的是为了吸引用户注意力,提高信息敏感度。
- 交互动效设计原则:1.注意动效的自然。2.要注意及时反馈,动效的速度要适当。3.简洁明了,以产品功能为主。4.保持一致性。
- 案例讲解:简单心形动效与进阶状态栏交互动效实例。
- 为什么要做交互设计:动效不仅仅能让整个产品的界面显得更加活泼、生动、有趣,也在不经意间向用户暗示和传递信息,展示元素之间的相互关系。
- 高保真原型案例演示:详细讲解最常用到的一套 UI 稿中页面跳转和滚动的交互效果如何制作。
UI是人与机器之间温柔的一层。尽管如今我们已经和无数的UI朝夕相处,每日每夜摩挲触动,但总有一天,UI与我们之间不再隔着一层玻璃,而是铺满我们的整个视野,占据每一寸现实的留白,我们将真正生活在其中。
或许只是趁着一束目光的闪动,一组急促的心跳,一次没有预谋的头脑发热就开始了这次 UI 设计的学习,但不管结果如何,你都触摸到了一部分未来。
屏幕上两次鼠标点击连出的第一条线段,对于世界来说如此纤细而微不足道,对你来说却可能是多年之后仍能回想起的巨大锚绳。所以,来吧~
非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。
转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
发表评论 快来秀出你的观点