UI界面设计

高会杰

目录

  • 1 课程介绍
    • 1.1 课程概述
    • 1.2 初识UI
      • 1.2.1 设计师能力及原则
      • 1.2.2 设计流程
      • 1.2.3 设计参数
      • 1.2.4 强化练习
      • 1.2.5 UI思政：殷切希望
  • 2 模块一：基础元素设计
    • 2.1 项目1  设计火宫殿应用图标
      • 2.1.1 认识图标
      • 2.1.2 任务1火宫殿线性图标设计
      • 2.1.3 任务2火宫殿扁平图标
      • 2.1.4 任务3火宫殿拟物图标
      • 2.1.5 设计拓展
      • 2.1.6 强化练习
      • 2.1.7 UI思政：从业道德
    • 2.2 项目2  设计乌山森林公园导航栏
      • 2.2.1 初识导航栏
      • 2.2.2 任务4设计乌山森林公园顶部导航栏
      • 2.2.3 任务5 设计乌山森林公园底部导航栏
      • 2.2.4 设计拓展
      • 2.2.5 强化练习
      • 2.2.6 UI思政：守法品德
    • 2.3 项目3  设计线上超市按钮
      • 2.3.1 初识按钮
      • 2.3.2 任务6设计超市购物提交按钮
      • 2.3.3 任务7设计超市购物车按钮
      • 2.3.4 设计拓展
      • 2.3.5 强化练习
      • 2.3.6 UI思政：从业规范
    • 2.4 项目4  设计奶茶店用户表单
      • 2.4.1 初识表单
      • 2.4.2 任务8设计奶茶店登陆表单
      • 2.4.3 任务9设计奶茶店用户表单
      • 2.4.4 设计拓展
      • 2.4.5 强化练习
      • 2.4.6 UI思政：与人沟通
    • 2.5 项目5  设计游戏加载进度条
      • 2.5.1 初识进度条
      • 2.5.2 任务9 地图下载进度条
      • 2.5.3 任务10 视频加载进度条
      • 2.5.4 设计拓展
      • 2.5.5 强化练习
      • 2.5.6 UI思政：行业变化
  • 3 模块二 类型界面设计
    • 3.1 项目6   设计“众商银行”APP主界面
      • 3.1.1 主界面设计思路
      • 3.1.2 任务13 设计众商银行APP主界面
      • 3.1.3 设计拓展
      • 3.1.4 强化练习
      • 3.1.5 UI思政：文化自信
    • 3.2 项目7   设计“微博公益”启动页界面
      • 3.2.1 启动界面设计思路
      • 3.2.2 任务14 设计微博公益启动页界面
      • 3.2.3 设计拓展
      • 3.2.4 强化练习
      • 3.2.5 UI思政：德艺双馨
    • 3.3 项目8 设计“湘帮扶”APP产品详情界面
      • 3.3.1 详情界面设计思路
      • 3.3.2 任务15  设计“湘帮扶”大米商品详情界面
      • 3.3.3 设计拓展
      • 3.3.4 强化练习
      • 3.3.5 UI思政：为民生而设计
    • 3.4 项目9  设计智能家居APP控制界面
      • 3.4.1 设计思路
      • 3.4.2 任务16  设计智能家居APP控制界面
      • 3.4.3 设计拓展
      • 3.4.4 强化练习
      • 3.4.5 UI思政：职业责任
  • 4 模块三 高阶综合实训
    • 4.1 综合项目1   长沙美食企业APP界面设计
      • 4.1.1 项目需求
      • 4.1.2 设计思路
      • 4.1.3 步骤实训
        • 4.1.3.1 设计推荐界面
        • 4.1.3.2 设计登录界面
        • 4.1.3.3 设计餐品主界面
        • 4.1.3.4 设计订单界面
        • 4.1.3.5 设计个人用户界面
    • 4.2 综合项目2 “M music”音乐播放APP界面设计
      • 4.2.1 项目需求
      • 4.2.2 设计思路
      • 4.2.3 步骤实训
        • 4.2.3.1 设计登录界面
        • 4.2.3.2 设计歌单广场界面
        • 4.2.3.3 设计专辑介绍界面
        • 4.2.3.4 设计视频播放界面
        • 4.2.3.5 设计启动界面
  • 5 优秀学生作品
    • 5.1 设计趋势
    • 5.2 实践成果优秀学生作品
项目3  设计线上超市按钮

一、项目需求

线上超市APP需要设计按钮，“提交按钮”和“购物按钮”，一个用于生活超市实现提交功能，一个用于游戏超市购买商品

二、项目背景

线上超市主打全线上购物行为，旗下又分为生活超市和游戏超市，目标人群为时尚活泼的青年人，公司色调以蓝紫色为主。

三、项目分析

根据按钮设计方法，结合按钮使用功能，为线上超市设计按钮

四、项目尺寸及要求

   （1）“提交按钮”

   风格：扁平弥散

   状态：四种状态

   圆角矩形：300*80像素， 半径50

   画布大小：1000*500

   字体：黑体

（2）“购物按钮”

    风格：水晶

    状态：可选择

    圆角矩形：300*80像素， 半径50

    画布大小：500*500


五、项目方案