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 教学内容
  • 2 教学视频

2.1 手机操作系统


手机操作系统是管理和控制手机硬件与软件资源的程序。目前常见的手机操作系统可以分成以下四类:



1、苹果公司操作系统IOS

       iOS 系统是由苹果公司开发并应用于iPhone、iPod touch、iPad 等移动设备的操作系统。其界面设计方面,从早期的拟物风格,到iOS 7 之后秉承的扁平风格,一直都在引领界面设计的流行趋势。iOS系统具有流畅的用户界面和丰富的应用程序,被广泛认为是用户体验最佳的操作系统之一。

       IOS是封闭式的,只能在苹果系产品上使用,并且安装软件只能通过苹果的官方商店下载。



2、Android系统

   Android是是由谷歌(Google)公司开发的,一种基于Linux的自由及开放源代码的操作系统,它的平台提供给第三方一个宽泛、自由的环境,厂商、开发者和用户具有较高的操作权限,根据需要可以对界面进行调整或美化。目前手机很多品牌的操作系统都是基于安卓系统开展二次开发,如三星、小米,VIVO等


3、Windows phone系统

     Windows phone 系统(简称WP)是微软公司开发的一款移动操作系统。WP 系统的桌面图标更加突出信息的展示,它具有独特的平铺式用户界面和微软生态系统的支持。桌面上的大方块图标是它的招牌设计(活动瓷片)。然而,由于市场份额较小,Windows Phone系统的应用程序生态系统相对较弱。


4、华为公司鸿蒙操作系统harmonyos

鸿蒙操作系统的目标是打造一个跨平台、跨设备、跨场景的智能生态系统。

鸿蒙操作系统并不完全等同于安卓操作系统,它还包括了华为自己开发的HMS服务、万物互联分布式技术和全场景适配能力。因此鸿蒙操作系统可以兼容安卓应用程序,但也可以运行鸿蒙应用程序和网络应用程序。

常见品牌的操作系统介绍

  手机的操作系统迭代的很快,并且很难一次介绍全。这里对常见的手机系统做简单的介绍,系统风格对比可以参考截图部分。点击标题即可跳转到系统官网哦~(应用自知乎:https://zhuanlan.zhihu.com/p/630239545/?utm_id=0)

IOS:苹果

  强调个性与安全的手机系统,目前最好的手机系统。浏览器Safari(读“色法瑞”),语音助手Siri(读“西瑞”、“C瑞”都行)。


IOS 16


鸿蒙系统(harmonyos):华为

  鸿蒙系统(harmonyos,读“哈莫尼奥斯OS”)是支持万物互联的操作系统,可用于手机、各种家电等。值得一提的是她让一个手机能同时连俩蓝牙耳机。其他各种个人定制的操作就不多提了。语音助手小艺。


鸿蒙


MagicOS:荣耀

  Magic(读“麦吉克”)OS强调flow(流)设计,系统讲究智慧、高效、舒适和流畅。可以通过不断学习用户的使用和行为习惯来给用户精准推荐产品或服务。语音助手YOYO(读“优优”)。


Magic OS


ColorOS:OPPO、一加

  ColorOS(读“卡乐(儿) OS”) 13 是以 “水” 为灵感打造的操作系统。系统主要强调界面图形充满活力、智能、流畅和安全性。语音助手小布。


Color OS


OriginOS:vivo新系统、IQOO

OriginOS(读“奥瑞宅OS”) 的小窗多任务非常亮眼,几乎所有应用都适配了。一边看剧一边打王者都没问题。此外还有各种预制的场景模式就不多提了。语音助手Jovi。


Origin OS


FuntouchOS:vivo老系统

Funtouch OS(读“仿踏其OS”)讲究的是回归最真实的状态(躺平)、寻求用户体验上的刺激,说人话就是平平淡淡才是真。语音助手也是Jovi。


Funtouch OS


MIUI:小米

MIUI(读“米UI”)在经历了历史上至暗时刻之后(各种bug),MIUI14重整旗鼓,修复各种bug的同时,大刀阔斧的精简系统,此外隐私保护在业界依旧名列前茅。妙想中心也能实现设备互联互通。语音助手小爱同学。


MIUI


Flyme:魅族

Flyme(读“服来-蜜”)强调的是一种AliveDesign(活力设计),除了个性的外观设计、流程的系统体验,Flyme的安全性也非常出彩,具备对于应用的监控和对手机的定位的能力。


Flyme


realmeUI:真我

realmeUI(读“锐U米 UI)更像一个UI,目前对系统层面的思考比较少,能自定义图标的尺寸和圆度,这个系统目前吐槽很多。


realme UI


JOYUI:黑鲨

JOY UI(读“乔伊UI”)是一款专门为玩游戏设计的系统,各种功能都是考虑不打扰用户的游戏体验而设计的。语音助手鲨鲨酱。


JOY UI 横屏模式


ONEUI: 三星

ONEUI(读“万UI”)是一款讲究个性化和互联互通的操作系统。提供流程的办公体验和全方位的隐私保护。语音助手Bixby(读“比克斯比”)。


ONE UI


MYOS:努比亚,中兴

MYOS(读“埋OS”)强调丰富的颜色和个性化的界面【行星壁纸】,此外系统的流畅性、私密性和安全性也不错。


MY OS 


UI 和 OS 的区别是啥?

  UI全称是User Interface(用户界面),你看到的手机上的各种图标都属于UI。OS全称是Operating System(操作系统),是管理和控制手机硬件与软件资源的程序。