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 实践成果优秀学生作品
初识UI

UI界面设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UIUIUser Interface(用户界面)的简称。

好的UI界面设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。

说明: 目录图标1.jpg一、UI界面设计起源与发展

UI一词最早是在1984年,由苹果公司的第一代MAC电脑提出的,当时被称之为图形化界面。苹果公司在当时已经领先于世界。

第一代MAC电脑的UI界面

但是由于苹果公司过于因循守旧,随后很快就被微软的WINDOWS赶超。下图就是我们熟知的微软第一代视窗操作系统win95,他不仅在界面美化上完胜当时的MAC界面,并且在用户体验上也更加容易被普通人接受。至此,电脑才开始逐渐步入人们的生活。

win95 UI界面更加易用

UI界面2010年左右随着iPhone4的诞生跟随着移动互联网的发展迅速进入大众视野,不再是单一的几个系统界面而是多种界面设计效果百花齐放式,同时跟随移动互联网的发展而发展。目前的UI界面设计大部分着重于移动端设计,但是,移动端的UI界面设计只能说是UI界面设计的开始,而不是结束。

说明: IMG_257

VR,物联网新时代即将到来,新兴的智能产品必将层出不穷,如:智能电视、智能手表、智能汽车、智能家居、智能城市...这些都是尚待开发的处女地,对用户体验和UI设计有着巨大的需求,也将为UI界面设计的就业带来前所未有的人生机遇,U界面设计的社会需求不仅不会短期内饱和,还会持续性放大。

二、UI界面设计新形式

这全部要归功于智能手机的普及,谈到智能手机,我们便会想到appapp不仅个性鲜明,而且还充当着完善手机系统的角色。每个app都有着个性鲜明的设计,包括图标、操作界面、动效等,那么这些都属于UI设计的范畴。智能手机以及APP的出现,使我们的生活方式发生了翻天覆地的变化。在这场变革中,UI设计功不可没!

改善人类生活方式的app

 

有些人认为UI设计师其实就是美工,只负责对软件界面进行美化的工作。这种理解比较片面,UI设计一般指的是针对软件界面的人机交互、页面逻辑、界面美化进行的整体设计,并不单单是指界面美化,还包括对交互设计的理解,还有对用户内心感受和操作习惯的熟知,也就是用户体验。

目前的UI设计,更加注重用户体验(UE/UX,UE更加关注用户群的内心感受,尊重用户群的行为习惯,时刻以用户为中心,思用户之所思,做用户之所需。用户体验贯穿于产品研发的始终,它不仅体现在交互设计上,同时也始终提醒着界面美化设计师应该进行有目的性、有依据性的设计,而非自我陶醉。

基于用户体验的重要位置,国内众多大型互联网公司纷纷成立了以用户体验设计(UED)为主的团队,其中有百度UED、阿里UED、新浪UED、网易UED等等。当然,我们的大腾讯也有着此类的设计师团队,譬如我们熟知的腾讯CDC

腾讯CDC

 

三、UI界面设计市场需求

北上广一线城市UI界面设计师平均薪资大概在9K~10K,省会城市大概在5K~7K。除了互联网行业对UI设计师需求量很大之外,现在传统行业也开始注重起UI设计,譬如金融业、交通业、制造业、零售业等等。

有些行业对于经验丰富的UI设计师也开出了相当可观的薪资水平,譬如国内某大型客车制造业

目前国内部分大型互联网公司会针对一些专业美术院校的进行校园招聘;除此之外,国内有很多UI设计的培训机构也在为企业输送人才,但培训能力参差不齐;也有一些平面设计业内人士转型为UI设计师。

由于智能手机也只是在近年来才开始普及,所以国内绝大部分所谓的UI界面设计师其实也只是摸到皮毛而已,换言之也只是从事着界面美化(GUI)的工作,对于交互设计和用户体验只是知其有,并不知其实。当然,罗马不是一日建成的!只要人人注重分享,交流,营造出完美和谐的学习氛围,我想在不久的将来,UI设计一定能被我们发扬光大,用设计来改变生活,提高生活品质,为人类精神文明建设添砖加瓦。



仅供教学使用