相关文章推荐
多情的酱肘子  ·  新手学ui设计难吗- 安化黑茶手机网·  1 年前    · 
多情的酱肘子  ·  UI设计行业怎么样？UI设计初学者怎么入门？ ...·  1 年前    · 
多情的酱肘子  ·  女生适合做ui设计师吗？累吗·  1 年前    · 
多情的酱肘子  ·  新手学UI设计难吗？零基础应该如何入门？-即时设计·  1 年前    · 
多情的酱肘子  ·  Photoshop移动UI设计从入门到精通_ ...·  1 年前    · 
小百科  ›  UI设计12讲！UI设计基础入门实战案例自学手册- 优优教程网- 自学就 ...
UI设计入门 软件 交互界面 动效 设计规范
飘逸的荔枝
1 年前
  • Lesson 1 UI设计12讲！NO.01 图标分类及设计规范 查看详情
  • Lesson 2 UI设计12讲！NO.02 金刚区图标设计 查看详情
  • Lesson 3 UI设计12讲！NO.03 App常用设计规范 查看详情
  • Lesson 4 UI设计12讲！NO.04 短视频App界面 查看详情
  • Lesson 5 UI设计12讲！NO.05 Banner设计规范与应用 查看详情
  • Lesson 6 UI设计12讲！NO.06 响应式设计：B端页面 查看详情
  • Lesson 7 UI设计12讲！NO.07 数据图表设计 查看详情
  • Lesson 8 UI设计12讲！NO.08 小程序设计规范及案例演示 查看详情
  • Lesson 9 UI设计12讲！NO.09 智能穿戴设备界面设计 查看详情
  • Lesson 10 UI设计12讲！NO.10 车载温控页面设计 查看详情
  • Lesson 11 UI设计12讲！NO.11 交互动效设计 查看详情
  • Lesson 12 UI设计12讲！NO.12 原型交互及实战演示 查看详情

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

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

    获取课程课件及演示案例源文件，请访问👉 教程文件

    一、知识树介绍

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

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

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

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

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

    即时设计基础教程！全面专业的UI设计在线工具入门指南

    即时设计是一款全平台覆盖、可云端编辑的专业级 UI 设计工具，为中国设计师量身打造，是 Windows 也能用的「协作版 Sketch」

    阅读文章 >>

    如果希望进一步理解和提升UI设计技能，可以尝试UI实战进阶案例系列教程：

    UI实战系列教程！10个超实用设计案例

    一、知识树介绍 如果你已经掌握了UI设计的基础设计规范，也已经可以轻松绘制出好看好用的简单图标案例，能够坚实地走到这一步，并且热切地做好了继续进阶的准备，那么你就来对了。 很高兴见到这样耀眼的你，我们与各位拥有多年B端、C端UI和交互设计经验的讲师，继续为大家呈上这套UI实战系列教程。没有过多的大道理，省去了一部分机械的基础操作讲解，直击界面设计的关键节点。

    阅读文章 >>

    二、关于UI设计

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

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

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

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

    三、知识树大纲

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

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

    • 第 2 课：金刚区设计

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

    • 第 3 课：App常用设计规范

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

    • 第 4 课：短视频App界面

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

    • 第 5 课：Banner设计规范与应用

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

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

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

    • 第 7 课：数据图表设计

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

    • 第 8 课：小程序设计

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

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

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

    • 第 10 课：车载温控页面设计

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

    • 第 11 课：交互动效设计

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

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

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

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

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

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

    更多知识树推荐...

    Sketch知识树！最详细入门教程合集

    优优教程网的知识树系列教程，由优设大课堂团队录制，收录了 Sketch 从界面到具体工具的使用教程，从入门到基础，帮助你快速上热门交互设计利器Sketch。喜欢这些教程的同学，请记得收藏起来每天学习。 软件介绍： Sketch 是一款适用于所有设计师的矢量绘图应用。

    阅读文章 >>

    设计方法论！即学即用的设计技巧合集

    知识树介绍 在工作中，效率往往也意味着一切，因此，在这个系列中，拥有多年工作经验的 Philip VanDusen 和致力于帮助设计师成长的 The Futur 分享了许多简单实用的小技巧，包括如何走出灵感枯竭期、如何提升作品表现力、如何增强自信心等等，从而帮助设计师极大地提高效率，更高效完成工作。 视频作者介绍 Philip VanDusen Verhaal 品牌设计总监兼首席运营官，曾任可口可乐、Old Navy 的设计副总裁，以及全球品牌代理公司 Landor Associates 和 An...

    阅读文章 >>
    13 赞 收藏 86

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

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

    复制本文链接

    2023涨薪必备技能

    技能 · 手绘插画
    涨薪指数

    如何快速创作火爆全网的手绘作品？

    私单涨薪 必备技能

    TOP 1

    UI动效设计师为什么拿高薪？

    名师高徒 挑战高薪

    涨薪指数
    技能 · 动效设计
    2

    为什么阿里和OPPO超爱这类插画风格？

    高效实战 百万人气

    涨薪指数
    技能 · 手绘插画
    3

    都是图标设计，总监和你有什么区别？

    高效实战 职场技能

    涨薪指数
    技能 · 图标设计
    4
    优设字美体 Midjourney 免费字体 海报 Blender 二十四节气 LOGO 字体设计 配色 插画 UI设计 排版 作品集 毛玻璃 弥散光 样机素材 Banner H5长图 动效 酸性设计 PPT 字效 封面 复古 修图 Procreate 立体字 2.5d VI icon 抠图

    历史记录 清除记录

     
    推荐文章
    多情的酱肘子  ·  新手学ui设计难吗- 安化黑茶手机网
    1 年前
    多情的酱肘子  ·  UI设计行业怎么样？UI设计初学者怎么入门？ - 知乎
    1 年前
    多情的酱肘子  ·  女生适合做ui设计师吗？累吗
    1 年前
    多情的酱肘子  ·  新手学UI设计难吗？零基础应该如何入门？-即时设计
    1 年前
    多情的酱肘子  ·  Photoshop移动UI设计从入门到精通_百度百科
    1 年前
    Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
    小百科 - 百科知识指南