web-UI设计(设计思路篇)

最近在做毕设，重温一下webUI设计，以保证我的毕设颜值在线。。。。
剧透：我的毕设是一款时间管理的软件，有没有大佬可以回答一下我的疑问：
还剩半个月，混合开发能快速开发出来吗？

webUI设计

笔记来源：https://www.imooc.com/video/14005

重点：
设计流程
设计规范

web-UI概述

UI 用户界面
用户、界面、交互

WUI 网页用户界面
功能为主网页 传统网页
用户为主网页 天猫等

分辨率

大部分设计师选择iMac显示器
分辨率1024*768

web分类

1. 门户类网站
2. 分类信息网站
3. 交易类网站
4. 娱乐性
5. 个人博客
6. 论坛 现在主要是社群
7. 行业类网站
8. 企业网站
9. 机构类网站 红红黄黄
10. 功能性网站

web设计

设计维度

版式
色彩
图片
字体
段落
细节

界面设计流程

版式
分析需求内容–>绘制草图

制作
优化版式结构–>填充内容–>样式设计

输出
优化–>切图–>输出

总流程： 需求–策划–原型图–设计图–制作-上线发布

基本规范

设计规范是设计工作的规则，在设计工作中需要遵循的

网页的尺寸–像素

px 像素，显示器上的最小单位
常见的尺寸
pt 长度单位，物理尺寸，1pt=1/72英寸
PPI（DPI） 每英寸的像素（点）数，是一个率，用来表示精度
em 百分比（%）

多媒体格式

图片格式

JPG 色彩丰富
GIF 动态、静态，体积小，表情常用
PNG 体积小，透明底，开发常用

视频格式

FLV 体积小，加载速度快
MP3 大幅度小音频体积，音质有损耗

视觉层次

透视 近大远小
景深 近实远虚
元素层次
色彩层次 亮的在前，暗的在后

首页官网设计

功能：
宣传展示 企业形象
展示业务
功能入口集合

不登录 展示
登录 个人服务

专题页面设计

专题页：
强烈的视觉效果
有趣味的体验
推广信息

设计流程

结构
上下结构
系列专题
风格
产品特点
专题特征
头图
主题字
氛围
内容
内容清晰
布局合理

创意 版式 色彩

banner

目的 预期效果 特殊要求