交互设计

华江林

目录

  • 1 课前导读
    • 1.1 课前准备
    • 1.2 设计师如何提升自己的审美?
  • 2 UI设计基础
    • 2.1 UI设计师所需技能与知识
    • 2.2 实训—小试牛刀
    • 2.3 UI设计师界面操作技巧
    • 2.4 移动端设计规范和常见布局
    • 2.5 控件及组件
    • 2.6 配色与配图
    • 2.7 界面设计重构思路
  • 3 UI设计的常用方法
    • 3.1 UI设计的设计方法
    • 3.2 UI设计中实用的构成方法
    • 3.3 UI设计中的实用的色彩搭配技巧
    • 3.4 知识拓展
    • 3.5 能力拓展
    • 3.6 作业布置
  • 4 各种UI常用元素制作
    • 4.1 常用背景制作
    • 4.2 常用控件制作
    • 4.3 创意图标设计与制作
    • 4.4 绘制28*28栅格系统
    • 4.5 项目实训 图标绘制
    • 4.6 知识拓展
    • 4.7 能力拓展
    • 4.8 作业布置
  • 5 UI设计实战篇—计算器界面设计
    • 5.1 UI设计任务分析
    • 5.2 学习目标
    • 5.3 制作步骤详解
    • 5.4 知识拓展
    • 5.5 能力拓展
  • 6 UI设计实战篇—播放器界面设计
    • 6.1 UI设计任务分析
    • 6.2 学习目标
    • 6.3 制作步骤详解
    • 6.4 知识拓展
    • 6.5 能力拓展
  • 7 UI设计实战篇—手机主题界面设计
    • 7.1 UI设计任务分析
    • 7.2 学习目标
    • 7.3 制作步骤详解
    • 7.4 知识拓展
    • 7.5 能力拓展
  • 8 UI设计实战篇—智能电视界面设计
    • 8.1 UI设计任务分析
    • 8.2 学习目标
    • 8.3 制作步骤详解
    • 8.4 知识拓展
    • 8.5 能力拓展
  • 9 1+X界面设计职业技能考试
    • 9.1 职业技能等级标准
    • 9.2 职业技能等级科目大纲
课前准备



1.软件下载与安装

     

    

      界面设计软件主要针对 UI 相关界面的设计,包括原型设计、APP设计、网站设计、管理界面设计等等。

      界面设计软件主要应用下面两种软件,大家挑选其中一款下载即可,无需全部安装。

 

1.1 界面设计软件 


      即时设计:Figma国内替代品,自带官方中文,网络更稳定。

     选择理由:即时设计是一个功能十分强大的在线 UI 设计工具,是中国第一款支持在线协作的 UI 设计工具,被称为是可协作的在线 Sketch国内版 Figma国内百万设计师都说它好用,那么即时设计有哪些好用功能呢?给大家介绍即时设计 5 个方面的强大功能分别是打破不同系统界限、设计资源丰富免费、支持多人实时协作、即时上线一键发布、设计稿一键转网页

      官网地址:https://js.design/

       客户端下载地址:https://js.design/download




    Figma,一款新兴的界面设计工具,Mac 和 Win 用户都可以使用

    Adobe XD、Sketch这两款软件目前已不作为推荐软件,课程学习中不涉及 。


1.2 图形图像软件 


   主要是设计师必须掌握的基础软件,即 PS、AI,用来处理日常工作中的视觉需求和图形需求。

                                        

切记切记切记:这两个软件平时要多加看视频教程,结合案例多练习,多出成果。


1.3 动效设计软件 


    动效软件中,课程主要使用 AE 和 Protopie,只需要下载这两个。MAC 用户可以额外下载 Flinto 和 Principle 作为以后的拓展。

                                      


1.4 课程需要的字体 

1.4.1 系统级字体iOS,中文使用苹方字体,西文使用San Francisco Pro(又叫旧金山)字体,适合

APPLE.  WATCH 小号文字,更易阅读。

Android,原生中文使用思源黑体,西文使用Roboto。

1.4.2 中文字体

除系统字体之外,我们在字体包中还准备了阿里巴巴普惠体汉仪旗黑方正兰亭黑 Pro思源宋体这四款使用频率较高的中文字体。

1.5.3 英文字体

除系统字体之外,我们在字体包中给了DinFuturaHelveticaMontserratGothamBebas这六款使用频率较高的英文字体。


windows系统字体下载:下载地址   提取码: tcne 


1.5 学习建议 


建议大家经常浏览专业设计网站:如花瓣/Pinterest /Behance /Dribbble等;

一是建立自己的画板,分类挑选、收集和整理自己觉得好看的图片和素材;

二是购买一个EAGLE,打造属于自己的素材库。