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 练习案例


网页效果图的设计 


1、明确网页各板块主次关系按照从上至下、从左至右的原则进行区分


必备元素:

网站标志/标题(Logo)

网站导航(menu)

网站主场景动画,焦点图轮播(banner)

内容区(新闻  企业简介  产品展示  服务项目……)

版权信息(版权所有、联系方式)footer


可选元素:

搜索:门户、购物、旅游、学术(行业内容网站)……

电话:公司内有客服或相关业务部门

在线客服

流量统计:百度凤巢


浏览区域放左边,功能区域放右边

列表区域放左边,内容区域放右边


2、网页各元素的基本设置

  • 明确各元素之间的主次关系与强弱对比

  • 网页设计排版的元素都可以按照我们对内容的理解对其进行主次的区分。

  • 对该强调的内容采用各种方式对其视觉感进行加强。


常用方式:

色彩(饱和度越高越能吸引注意力,但是会有low低档的感觉)

明暗(浅色主色,深色更突出)

大小、远近

疏密(留白)

位置(左上重要,右下次要)

间距尽量使用:2、5、10的倍数


3、常规网页布局要点

(1)采用方块布局法:横屏竖直的进行布局,不要使用弧形,不规则形状进行板块布局

(2)布局不做突破,可以从设计的颜色,风格上进行调整

(3)响应式网站,让网页内容布局不固定,可以根据不同显示器的尺寸进行流动调整

(4)各版块主从关系

  • LOGO与导航尽可能设计在网站的头部并采用平铺的形式,需要突出、醒目、方便浏览者试用。

  • 背景、内容区尽可能简洁化,颜色选择上尽可能低纯度,色相与明度变化不要太大,追求整体性、统一性、协调性。

  • LOGO、导航、按钮、标题等需要突出的元素需要设计得明显一些,颜色选择上纯度调高,各板块对比加强。

  • 但这几个元素之间同样要注意协调性,否则各元素相互冲突,整个画面就杂乱无章。


4、常见效果图的布局形式





5、根据以上的方法,设计制作下图网页效果图