UI界面设计

王俏

目录

  • 1 1 走进UI设计
    • 1.1 导读
    • 1.2 1.1 UI设计介绍
      • 1.2.1 1.1.1 UI设计的概念
      • 1.2.2 1.1.2 UI设计原则
      • 1.2.3 1.1.3 UI设计分类
      • 1.2.4 1.1.4 UI设计尺寸相关知识
    • 1.3 1.2 UI设计流程
      • 1.3.1 1.2.1 需求分析
      • 1.3.2 1.2.2 原型设计
      • 1.3.3 1.2.3 视觉设计
      • 1.3.4 1.2.4 切图与标注
    • 1.4 1.3 UI设计图像
      • 1.4.1 1.3.1 图像类型
      • 1.4.2 1.3.2 图像格式
    • 1.5 1.4 UI设计风格
      • 1.5.1 1.4.1 扁平化风格
      • 1.5.2 1.4.2 几何风格
      • 1.5.3 1.4.3 拟物化风格
      • 1.5.4 1.4.4 玻璃风格
  • 2 2 UI设计要素
    • 2.1 导读
    • 2.2 2.1 UI设计布局
      • 2.2.1 2.1.1 宫格布局
      • 2.2.2 2.1.2 列表布局
      • 2.2.3 2.1.3 卡片布局
      • 2.2.4 2.1.4 瀑布流式布局
      • 2.2.5 2.1.5 多面板布局
    • 2.3 2.2 UI设计色彩
      • 2.3.1 2.2.1 色彩的构成
      • 2.3.2 2.2.2 色彩的混合
      • 2.3.3 2.2.3 色彩的调和
      • 2.3.4 2.2.4 色彩的推移
      • 2.3.5 2.2.5 色彩的联想
      • 2.3.6 2.2.6 色彩的心理应用
  • 3 3 移动端操作系统
    • 3.1 导读
    • 3.2 3.1 iOS
      • 3.2.1 3.1.1 主题明确
      • 3.2.2 3.1.2 色彩一致
      • 3.2.3 3.1.3 留白设计
      • 3.2.4 3.1.4 良好布局
    • 3.3 3.2 Android操作系统
      • 3.3.1 3.2.1 布局灵活
      • 3.3.2 3.2.2 色彩艳丽
      • 3.3.3 3.2.3 操作便捷
  • 4 4 移动APP图标基础
    • 4.1 导读
    • 4.2 4.1 图标基础概念
      • 4.2.1 4.1.1 图案的概念
      • 4.2.2 4.1.2 图标的概念
      • 4.2.3 4.1.3 图标的分类
    • 4.3 4.2 图标设计流程
      • 4.3.1 4.2.1 明确主题
      • 4.3.2 4.2.2 提炼核心形状
      • 4.3.3 4.2.3 草图绘制
      • 4.3.4 4.2.4 选择标准色
      • 4.3.5 4.2.5 图标设计
      • 4.3.6 4.2.6 切图输出
    • 4.4 4.3 图标设计初探
      • 4.4.1 【课堂案例 4-1】时钟图标绘制
      • 4.4.2 【课堂案例 4-2】学位帽图标绘制
      • 4.4.3 【课堂案例 4-3】折页图标绘制
  • 5 5 移动APP图标风格
    • 5.1 导读
    • 5.2 5.1 剪影图标设计
      • 5.2.1 5.1.1 线性剪影图标设计
      • 5.2.2 【课堂案例 5-1】线性天气图标绘制
      • 5.2.3 【课堂案例 5-2】线性开关图标绘制
      • 5.2.4 【课堂案例 5-3】线性删除图标绘制
      • 5.2.5 5.1.2  面性剪影图标设计
      • 5.2.6 【课堂案例 5-4】面性确认图标绘制
      • 5.2.7 【课堂案例 5-5】面性设置图标绘制
      • 5.2.8 【课堂案例 5-6】面性笑脸图标绘制
      • 5.2.9 【课堂案例 5-7】面性相机图标绘制
      • 5.2.10 【课堂案例 5-8】面性文档图标绘制
    • 5.3 5.2 扁平化图标设计
      • 5.3.1 5.2.1  纯平面扁平化图标
      • 5.3.2 【课堂案例 5-9】纯平面扁平化电池图标设计
      • 5.3.3 5.2.2  折纸风扁平化图标
      • 5.3.4 【课堂案例 5-10】折纸风扁平化信封爱心未读图标设计
      • 5.3.5 【课堂案例 5-11】折纸风扁平化信封爱心已读图标设计
      • 5.3.6 5.2.3  长投影扁平化图标
      • 5.3.7 【课堂案例 5-12】长投影下载图标设计
      • 5.3.8 5.2.4  轻折叠扁平化图标
      • 5.3.9 【课堂案例 5-13】轻折叠多媒体图标设计
      • 5.3.10 【课堂案例 5-14】轻折叠扁平化计算器图标设计
      • 5.3.11 5.2.5  微立体扁平化图标
      • 5.3.12 【课堂案例 5-15】微立体定位图标设计
    • 5.4 5.3 拟物化图标设计
      • 5.4.1 5.3.1 拟物化图标特点
      • 5.4.2 5.3.2 拟物化图标案例
      • 5.4.3 【课堂案例 5-16】拟物化旋转按钮图标设计
      • 5.4.4 【课堂案例 5-17】拟物化卡包图标设计（横版）设计
      • 5.4.5 【课堂案例 5-18】拟物化卡包图标设计（竖版）设计
  • 6 6 界面常用控件
    • 6.1 导读
    • 6.2 6.1 滑块设计
      • 6.2.1 6.1.1 滑块构成
      • 6.2.2 6.1.2 滑块分类
      • 6.2.3 【课堂案例 6-1】线条滑块设计
      • 6.2.4 【课堂案例 6-2】旋转滑块设计
    • 6.3 6.2 表单设计
      • 6.3.1 6.2.1  表单类型
      • 6.3.2 6.2.2  下拉列表框设计
      • 6.3.3 【课堂案例 6-3】类目下拉子菜单设计
      • 6.3.4 6.2.3  搜索栏设计
      • 6.3.5 【课堂案例 6-4】移动端APP搜索框设计
      • 6.3.6 6.2.4  选择器设计
      • 6.3.7 【课堂案例 6-5】日历界面设计
      • 6.3.8 6.2.5  开关设计
      • 6.3.9 【课堂案例 6-6】开关设计
    • 6.4 6.3 按钮设计
      • 6.4.1 6.3.1  按钮类型
      • 6.4.2 6.3.2  简约按钮设计
      • 6.4.3 【课堂案例 6-7】简约确认按钮设计
      • 6.4.4 6.3.3  水晶确认按钮设计
      • 6.4.5 【课堂案例 6-8】水晶按钮设计
  • 7 7 APP界面类型
    • 7.1 导读
    • 7.2 7.1 启动页
      • 7.2.1 7.1.1  启动页的意义
      • 7.2.2 7.1.2  启动页的特点
      • 7.2.3 【课堂案例 7-1】启动页案例分析
    • 7.3 7.2 闪屏页
    • 7.4 7.3 引导页
      • 7.4.1 7.3.1  引导页的意义
      • 7.4.2 7.3.2  引导页的特点
      • 7.4.3 【课堂案例 7-2】引导页案例分析
    • 7.5 7.4 首页
    • 7.6 7.5 登录注册页
      • 7.6.1 7.5.1  注册登录页的意义
      • 7.6.2 7.5.2  注册登录页的特点
      • 7.6.3 【课堂案例 7-3】注册登录页案例分析
    • 7.7 7.6 子页
  • 8 8 iOS界面设计
    • 8.1 导读
    • 8.2 8.1 iOS界面设计规范
    • 8.3 8.2 iOS字体设计规范
    • 8.4 8.3 iOS 音乐 App 界面设计实战
      • 8.4.1 8.3.1  音乐App项目分析
      • 8.4.2 8.3.2  音乐App原型设计
      • 8.4.3 8.3.3  音乐App风格分析
      • 8.4.4 【项目实战8-1】设计音乐App启动图标
      • 8.4.5 【项目实战8-2】设计音乐App主题界面
      • 8.4.6 【项目实战8-3】设计音乐App启动页
      • 8.4.7 【项目实战8-4】设计音乐App引导页
      • 8.4.8 【项目实战8-5】设计音乐App注册登录页
      • 8.4.9 【项目实战8-6】设计音乐App首页
      • 8.4.10 【项目实战8-7】设计音乐App播放页
      • 8.4.11 【项目实战8-8】设计音乐App歌词页
  • 9 9  Android系统界面设计
    • 9.1 导读
    • 9.2 9.1  Android系统界面设计规范
    • 9.3 9.2  Android字体设计规范
    • 9.4 9.3  Android系统宠物 App 界面设计实战
      • 9.4.1 9.3.1  宠物App项目分析
      • 9.4.2 9.3.2  宠物App原型设计
      • 9.4.3 9.3.3  宠物App风格分析
      • 9.4.4 【项目实战9-1】设计宠物App启动图标
      • 9.4.5 【项目实战9-2】设计宠物App引导页
      • 9.4.6 【项目实战9-3】设计宠物App登录页
      • 9.4.7 【项目实战9-4】设计宠物App首页
      • 9.4.8 【项目实战9-5】设计宠物App宠物圈页面
      • 9.4.9 【项目实战9-6】设计宠物App购物车页面
      • 9.4.10 【项目实战9-7】设计宠物App设置页面
5.3 拟物化图标设计

拟物化图标与生活中的实物相似度最高，换句话说，将现实中的实际物品用设计工具和设计元素表达出来，最大程度地保留原来物品的外观和特点，这种模仿实物的图标就是拟物化图标。