UI界面设计

龙怡瑄

目录

  • 1 项目1:UI设计基础
    • 1.1 课程简介
    • 1.2 UI设计概述
    • 1.3 UI设计流程
    • 1.4 UI设计原则
    • 1.5 UI设计要素
      • 1.5.1 设计风格
      • 1.5.2 色彩搭配
    • 1.6 UI 设计技术准备篇(PS进阶)
      • 1.6.1 形状工具
      • 1.6.2 蒙版
      • 1.6.3 布尔运算
      • 1.6.4 重复变换
      • 1.6.5 图层样式
    • 1.7 课程思政
  • 2 项目2:移动端UI设计常识与设计规范
    • 2.1 移动应用平台
    • 2.2 移动设备尺寸标准
    • 2.3 移动UI设计规范
    • 2.4 APP页面设计
    • 2.5 课程思政
  • 3 项目3:图标设计
    • 3.1 认识图标
    • 3.2 图标分类与设计规范
    • 3.3 线性图标设计
    • 3.4 剪影图标设计
    • 3.5 扁平化图标设计
    • 3.6 拟物化图标设计
    • 3.7 其他风格图标设计
    • 3.8 手机主题图标设计
    • 3.9 课程思政
  • 4 项目4:APP控件的设计
    • 4.1 APP控件概述
    • 4.2 按钮
    • 4.3 滑动条
    • 4.4 表单
    • 4.5 数据图表
    • 4.6 其他控件
    • 4.7 拓展阅读:超全面的UI元素尺寸设置指南
    • 4.8 课程思政
  • 5 项目5:交互设计与原型图绘制
    • 5.1 交互设计概述
    • 5.2 原型制作工具——Axure RP
      • 5.2.1 高保真交互设计案例
    • 5.3 原型制作工具——墨刀(拓展))
  • 6 项目6:APP项目设计实战
    • 6.1 APP框架设计
    • 6.2 APP项目实战——“UI社”APP产品设计与实现
      • 6.2.1 产品定位与背景简要分析
      • 6.2.2 竞品分析
      • 6.2.3 产品架构梳理
      • 6.2.4 绘制低保真原型图
      • 6.2.5 APP的视觉规范
      • 6.2.6 产品启动图标的制作
      • 6.2.7 启动页与引导页效果图制作
      • 6.2.8 登录页效果图制作
      • 6.2.9 首页效果图制作
      • 6.2.10 内容页与其他页面效果图制作
    • 6.3 课程思政
  • 7 项目7:交付文档与对接
    • 7.1 标注
    • 7.2 切图
    • 7.3 知识拓展:IOS设计适配
    • 7.4 知识拓展:蓝湖软件的使用
  • 8 项目8:APP文档整理与作品提案
    • 8.1 文档整理与作品提案
  • 9 知识拓展1:UI设计综合实例
    • 9.1 优选网APP项目(拓展)
    • 9.2 极速云盘项目(拓展)
    • 9.3 小米电视界面项目(拓展)
  • 10 知识拓展2:PC端UI设计常识
    • 10.1 网页UI设计概述
    • 10.2 移动端UI设计和PC端网页UI设计区别
    • 10.3 网页UI设计特点
    • 10.4 网页的构成元素
    • 10.5 网页UI设计原则
    • 10.6 网页设计规范
    • 10.7 单元检测
  • 11 知识拓展3:网站页面布局和模块设计
    • 11.1 网站页面布局
    • 11.2 网页logo设计
    • 11.3 网站导航设计
    • 11.4 网站banner设计
    • 11.5 网页效果图设计
  • 12 拓展资源
    • 12.1 学习参考网站
    • 12.2 优秀学生作品展
      • 12.2.1 18级作品
      • 12.2.2 20软件1-2班优秀设计APP项目
      • 12.2.3 21级作品
      • 12.2.4 22级作品
    • 12.3 比赛获奖设计案例
    • 12.4 行业优秀设计案例
    • 12.5 样机素材下载
    • 12.6 教材电子版
    • 12.7 操作习题集
    • 12.8 UI界面设计常用软件下载
操作习题集

【操作练习1】使用PS制作宝马图标

需要用到的知识技能:

1、形状工具(描边、填充、对齐)

2、图层样式(渐变叠加)

3、文字工具(基线偏移、调整字间距、行间距)

4、路径文字

5、路径运算


1-宝马标志.jpg



【操作练习2】使用基本形状工具制作四个图标

2-基本形状.jpg


【操作练习3】使用形状工具制作扁平化相机图标(p75)

扁平化相机.jpg


【操作练习4】布尔运算2

制作如图所示图标。

布尔运算2练习.jpg


【操作练习5】线性图标技法

绘制如图所示线性图标


【操作练习6】制作四种常见扁平化图标

制作四种常见扁平化图标,如图所示。

扁平化图标的四种做法.jpg


【操作练习7】折纸图标

制作下面三种折纸效果图标!画布大小为800*400px,保存文件格式为PSD.

折纸效果.jpg



【操作练习8】网页效果图制作

制作如图所示网页效果图

素材下载:易起贷项目.rar



【操作练习9】移动端常用控件设计

完成下图中的常用控件

素材下载:控件(学生用).psd

控件.jpg



【操作练习10】宫格式导航

完成如图所示宫格式导航

素材下载:案例1:宫格式导航(课堂练习).rar

1.尺寸规范:iPhone 7界面(750×1334像素):

1)状态栏:一般不需绘制,可通过引用素材完成。

2)导航栏:在iPhone 7界面中导航栏的尺寸为750×88像素,图标尺寸为44×44像素,标题文字大小为40像素。

3)宫格导航模块:模块大小可设置为330×360像素,图标大小100×100像素,文字大小36像素。




【操作练习11】标签式导航

制作如图所示标签式导航

1.尺寸规范:

本实例按照iOS屏幕分辨率750×1334像素的情况下进行设计的,标签栏的尺寸为750×98像素。图标大小为50×50像素,文字大小为22像素。

2.设计风格:

实例将采用扁平化风格,通过简单明了的小图标对用户进行引导。

1)标签栏:背景一般默认为两种颜色,即白色和黑色,此实例采用黑色背景。

2)小图标:购物类App通常包含四到五个标签,具有选中和非选中状态。根据购物类商城App的特性,将小图标分为首页、搜索、分类、购物车和我的共五类,以及小图标均采用纤细柔美的线形设计。

案例2:制作标签栏导航图标(课后练习).jpg



【操作练习12】列表式内容视图

制作如图所示列表式内容视图

素材下载:案例3:列表式内容视图(课堂练习).rar

1. 尺寸规范:

按照iOS屏幕分辨率750×1334像素的情况下进行设计的,本实例列表设计尺寸为750×100像素。

2. 设计风格:

实例采用分组型列表式内容视图进行设计。

案例3:列表式内容视图(课堂练习).jpg



【操作练习13】APP引导页设计

完成如图所示APP引导页

素材下载:【课堂练习】:APP引导页设计.rar

本次任务是依据iPhone 7界面的分辨率设计一个音乐播放的引导界面,要求引导页能够传递音乐下载、好友K歌、消息发送、音乐收藏等APP功能,界面设计简洁新颖、能够直接有效的传递信息。

通过本任务的学习,读者可以掌握引导页的设计技巧。

1.设计尺寸和风格

采用750×1334像素的界面尺寸以及iOS扁平化的设计风格进行设计。

2.界面背景:

可以采用毛玻璃效果的图片作为界面的背景。同时可以将界面背景的色调设置为紫色,突出音乐的优雅和神秘。

3.主题元素:

引导页的主题元素往往起到告知用户产品功能、特点的作用。因此在设计时可以添加手机音乐界面展示,告诉用户APP产品的功能。并通过四个小图标依次展示音乐下载、好友K歌、消息发送、音乐收藏等四个特点。

引导页.jpg



【操作练习14】音乐播放界面设计(拓展)

制作如图所示音乐播放器界面设计

素材下载:【课堂练习】:音乐播放界面设计任务素材.rar

本次任务是依据iPhone 7界面的分辨率设计一个音乐播放界面,要求界面具备播放、切换歌曲等基本功能,通过新颖的设计形式、简单清新的设计风格来传递音乐氛围。

通过本任务的学习,读者可以掌握毛玻璃图片效果以及音乐播放界面的基本设计技巧。

1.设计尺寸和风格:根据任务描述,本次任务可以采用iPhone 7界面的分辨率(750×1334像素)进行设计。界面可以采用iOS扁平化的设计风格。

2.界面功能模块:

1)状态栏:一般不需绘制,运用现有素材即可。

2)播放界面:通常音乐播放界面主要包括背景、播放进度、播放模式、播放控制按钮以及底部的标签式导航。

3)背景:可以运用处理成毛玻璃效果的图片作为背景。

4)播放进度:可以设计为钟表指针的模式,用色彩表示已播放部分,用黑白表示未播放部分。

5)播放模式、播放控制按钮:可以将图标设计为简单的线条图形,同时在设计中要注意图标的尺寸。本任务以iPhone7界面中工具图标尺寸44×44像素作为音乐界面图标的基本尺寸

6)标签式导航:为了统一设计风格,底部的标签式导航同样可以延续线条图形的设计样式。在iPhone7界面中,标签栏中导航的图标大小为50×50像素。

【课堂练习】:音乐播放界面设计.jpg