UI设计12讲!UI设计基础入门实战案例自学手册

时间:2022-08-25
类别:自学路径
水平:入门
观众:28853
这个网站全是宝藏!老板看到都夸棒!1W多篇宝贵的进阶经验等你来刷 👉 立即点击

免费使用即时设计,请点击右侧链接👉 即时设计

获取海量免费设计资源,请访问👉 资源广场

一、知识树介绍

你是否想要入门UI设计,却苦于自学没有成体系的便捷途径?看着手机上、电脑中缤纷跃动的UI界面,你会不会好奇它们是如何设计出来的?

我们集合了各位拥有多年B端、C端UI和交互设计经验的讲师,为你带来这套让你看得懂,学得会的 UI设计基础入门自学手册,从基础设计规范、简单图标案例,到车载温控界面、原型交互实战全面解析

UI设计12讲!UI设计基础入门实战案例自学手册

本套教程主要以即时设计这款软件为主,详细讲解UI设计入门中的各种常见界面、规范以及实现方法

即时设计是一款在线可协作的UI设计工具,目前支持Sketch、figma、XD的本地导入和链接导入。支持创建交互原型、获取设计标注、快速切图、团队协作等。

如果想要了解即时设计的基本功能和操作用法,可以观看即时设计入门系列教程:

二、关于UI设计

用户界面(User Interface,简称UI )是人与机器之间发生互动的空间。人机互动的目标,是允许人类对机器进行有效的操作和控制的同时,让机器能够反馈信息以帮助操作者更好地进行决策。

UI的定义很广泛,主要包含了人机交互与图形用户界面,只要涉及到人类与机械的信息交流的领域都存在着UI,算盘就可以算是由珠子构成的早期人机界面。在进行UI设计时需考虑的因素与人机工程学和心理学等学科有关。

UI设计12讲!UI设计基础入门实战案例自学手册

一般来说,UI设计的目标是制作一个用户界面,使操作机器的方式变得简单、高效、愉快,从而产生预期的结果。

这通常意味着操作者只需提供最少的输入就能实现所需的输出,与此同时尽量减少机器对用户的不良输出。由此的进一步延伸则是用户体验(UX)设计了。

UI设计12讲!UI设计基础入门实战案例自学手册

三、知识树大纲

第 1 课:图标分类及设计规范

  • 图标分类:图标主要分成标志性图标和功能性图标。
  • 设计风格:图标的风格上主要分为线性、面性和线面结合图标。
  • keyline: 帮助我们在设计同系列图标时,让各个图标的面积占比相近的工具。
  • 案例讲解:以24x24像素为例,在即时设计软件中设计计时、心率、定位、打卡图标。

UI设计12讲!UI设计基础入门实战案例自学手册

第 2 课:金刚区设计

  • 金刚区特点:金刚区之内的功能和其图标设计、排列等会根据不同需求而变化。
  • 金刚区图标设计规范:金刚区图标在布局上是多行排列的。一般单行 4~5 个。多于 5 个需要左右滑动交互。行数控制在 3 行以内。
  • 案例讲解:沿用上一课的四个图标,进一步完善成金刚区图标。

UI设计12讲!UI设计基础入门实战案例自学手册

第 3 课:App常用设计规范

  • 什么是设计规范:设计规范是一套标准,让大家在设计、开发的过程中,能让产品呈现的风格始终保持统一。
  • 设计规范的使用:在界面的设计过程中,常常碰到排版方面的问题,可以直接参考现成的设计规范。
  • 作图尺寸:设计稿画布尺寸的确定重点在宽度的选择上。一般会采用一倍稿,宽 375×812。
  • 像素的定义:px 是像素,指的是屏幕显示图像的最小颜色方块。
  • 案例讲解:活用即时设计资源库制作 iOS 系统的界面。

UI设计12讲!UI设计基础入门实战案例自学手册

第 4 课:短视频App界面

  • 关于短视频:短视频App核心的界面之一,就是视频的播放页面。
  • 短视频App播放界面设计要点:采用竖屏的拍摄和播放模式,视频时长相对较短,一般在 5s-5min 不等,方便在碎片时间进行互动传播。
  • 案例讲解:制作短视频 App 播放界面。

UI设计12讲!UI设计基础入门实战案例自学手册

第 5 课:Banner设计规范与应用

  • 常见的Banner类型:首焦轮播图Banner,瓷片区Banner,白色模块化Banner。
  • Banner设计流程:和其他海报设计一样,主要分为四个大阶段:需求分析,构图方式,字体设计,颜色搭配。
  • 案例讲解:分为4个部分,分别是需求分析,颜色选择,画面排版,丰富细节。

UI设计12讲!UI设计基础入门实战案例自学手册

第 6 课:响应式设计-B端页面

  • 响应式布局:响应式是一种页面的布局方式,可以让一个网站兼容多个终端,而不用为每个终端都做一个版本。
  • B端是什么:C端是直接面向个人用户,为其提供服务的产品。而B端则是指面向商家、企业、业务部门等提供服务的产品。
  • 如何高效进行响应式设计:利用栅格以及辅助设计布局的功能可以高效的实现设计和优化。
  • 案例讲解:演示响应式调整和自动布局。

第 7 课:数据图表设计

  • 关于数据图表:数据图表泛指在屏幕中显示的,可直观展示统计信息属性(时间性、数量性等),对知识挖掘和信息直观生动感受起关键作用的图形结构。
  • 数据图表在UI中的表现:在b端的后台页面,各种类型的图表混合使用,追求数据的准确表达,而在c端的界面中,更偏向于视觉。
  • 数据图的类型以及应用:条形图、折线图、饼状图、雷达图/蜘蛛图/玫瑰图、散点图、气泡图、形状表达、数字图表。

UI设计12讲!UI设计基础入门实战案例自学手册

第 8 课:小程序设计

  • 什么是小程序:小程序是一种不需要下载安装即可使用的应用程序,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念。
  • 小程序的视觉规范:包括色彩、空间尺寸、文字、图标尺寸。
  • 案例讲解:确定小程序类型制作低保真原型,根据产品的低保真原型图添加内容,添加图片文字内容以及整体UI配色。

UI设计12讲!UI设计基础入门实战案例自学手册

第 9 课:智能穿戴设备界面设计

  • 智能穿戴设备例如手环,手表,眼镜等,随着消费升级及AI、 VR、AR等技术的逐渐普及,从过去的单一功能迈向多功能,同时更加便携、实用。
  • Watch OS 的核心设计原则:以单个任务或功能为目标;实现快速交互;独立设计和构建。
  • Watch OS 设计规范:色彩规范,控件尺寸规范,文字规范,图标尺寸规范。
  • 案例讲解:使用即使设计制作一个智能穿戴设备的心率检测页面。

UI设计12讲!UI设计基础入门实战案例自学手册

第 10 课:车载温控页面设计

  • 车载设计介绍:车载设计也叫车机设计,主要是根据不同的车内屏幕尺寸和分辨率来进行适配设计。
  • 车载设计规范:中控处的屏幕主要会分为竖屏和横屏,各有不同尺寸和分辨率。
  • 案例讲解:结合车载系统设计规范讲解车载温控界面的页面设计。

UI设计12讲!UI设计基础入门实战案例自学手册

第 11 课:交互动效设计

  • 交互动效是指展现界面间的转换或界面内元素变化的交互反馈,核心目的是为了吸引用户注意力,提高信息敏感度。
  • 交互动效设计原则:1.注意动效的自然。2.要注意及时反馈,动效的速度要适当。3.简洁明了,以产品功能为主。4.保持一致性。
  • 案例讲解:简单心形动效与进阶状态栏交互动效实例。

UI设计12讲!UI设计基础入门实战案例自学手册

第 12 课:原型交互及实战演示

  • 为什么要做交互设计:动效不仅仅能让整个产品的界面显得更加活泼、生动、有趣,也在不经意间向用户暗示和传递信息,展示元素之间的相互关系。
  • 高保真原型案例演示:详细讲解最常用到的一套 UI 稿中页面跳转和滚动的交互效果如何制作。

UI设计12讲!UI设计基础入门实战案例自学手册

四、结语

UI是人与机器之间温柔的一层。尽管如今我们已经和无数的UI朝夕相处,每日每夜摩挲触动,但总有一天,UI与我们之间不再隔着一层玻璃,而是铺满我们的整个视野,占据每一寸现实的留白,我们将真正生活在其中。

UI设计12讲!UI设计基础入门实战案例自学手册

或许只是趁着一束目光的闪动,一组急促的心跳,一次没有预谋的头脑发热就开始了这次 UI 设计的学习,但不管结果如何,你都触摸到了一部分未来。

屏幕上两次鼠标点击连出的第一条线段,对于世界来说如此纤细而微不足道,对你来说却可能是多年之后仍能回想起的巨大锚绳。所以,来吧~

更多知识树推荐...

7 收藏 28

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 快来秀出你的观点

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了
/

支持键盘 ← → 键翻阅图片