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 实践成果优秀学生作品
项目1  设计火宫殿应用图标

一、项目需求

火宫殿计划上线APP应用，需要设计一组图标（线性、扁平、拟物）

二、项目背景

火宫殿是湖南长沙集传统民俗文化、火庙文化、饮食文化于一体的具有代表性的大众场所，特别是火宫殿的风味小吃享誉三湘。作为湖南省长沙市的著名特色景点，位于长沙市坡子街。火宫殿同时也是一家驰名中外的“中华老字号”企业，在这里可以吃到各种长沙和湖南小吃，比如长沙臭豆腐、正宗红烧肉、糍粑等等。

三、项目分析

根据图标设计方法和规范，结合火宫殿主体特色，进行图标效果设计

四、项目尺寸及要求

   风格：线性、扁平、拟物各一个

   图标尺寸大小：1200*1200

   圆角半径像素：180

   分辨率：72

   色彩模式：RGB

五、项目方案