WEB界面设计
2016-07-07 11:25:36 0 举报
AI智能生成
WEB界面设计是一种专注于创建用户友好、直观且吸引人的网站或应用程序的过程。它涉及到理解用户需求,制定用户体验策略,以及使用视觉元素(如颜色、字体和图像)来创建具有吸引力的设计。设计师需要考虑如何最有效地组织信息,以便用户可以快速轻松地找到他们需要的内容。此外,他们还需要考虑如何在各种设备和屏幕尺寸上优化设计,以确保所有用户都能获得良好的体验。WEB界面设计的目标是创建一个既美观又实用的界面,能够吸引并留住用户,同时提供高质量的用户体验。
作者其他创作
大纲/内容
photoshop
矢量造型
复杂的形状可以由基本图形运算得到
编辑路径上的锚点
转换锚点
改变锚点的位置
调整曲线点的控制手柄
钢笔工具绘图
比例关系
百分比(多个图形之间进行比较)
宽高比(单个图形的宽高进行比较)
复制
拖拽图层到新建图层按钮上
Ctrl+J
针对矢量图形,只复制所选中的路径
使用移动工具(V),按住Alt键拖拽
使用路径选择工具(A),按住Alt键拖拽
使用路径选择工具(A)选中画布中的矢量图形,Ctrl+C复制:Ctrl+V黏贴
变换
数值变换
坐标
宽高
角度
斜切
高级变换
重复变换
重复变换并复制
对图层组及多个图层无效
解决方法
Ctrl+J复制
Ctrl+Shift+T重复变换
变换一定要考虑到比例
效果制作
图像渐隐效果
针对于矢量图形:渐变填充来制作
颜色色标只有两个
这两个颜色是一样的
调整透明度色标
针对任何情况:蒙版来制作
边线效果
描边
内发光
外发光
内阴影
投影
配色
颜色模式
H:色相
S:饱和度
B:亮度
基本色
黑色
白色
灰色
不同色调的颜色
高亮调高饱和度
高亮度低饱和度
低亮度低饱和度
低亮度高饱和度
配色技巧
同色相搭配
同色调搭配
设计技巧
图像素材的选择与处理
一定要使用高清素材
位图素材只能缩小不能放大,而且一定要等比例缩放
找到隐藏在素材中的“箭头”(一个或多个)
贴图
产品图
多用白色背景
统一的展示角度
模特
白色背景
彩色背景
对齐
全身对齐头顶和脚尖
半身对齐额头、眼睛和下巴
眼睛看着屏幕说服力最强
文字设计
字体
字号
颜色
字符间距
行高
字符宽高
基线对齐
首行缩进
文字修饰
加粗
倾斜
下划线
删除线
文字转曲(文字变形)
对齐
移动工具(v)
对齐到画布
在图层面板中选择相应的图层
Ctrl+A
使用移动工具(V)的属性对齐
固定对齐
获得固定图层中对象的选区
路径选择工具(A)
对齐到画布
在画布中选择矢量图形
在对齐属性里选择“对齐到画布"
对齐
多个矢量图形对齐(同一个图层内)
在画布中选择多个适量图形
在对齐属性里选择“对齐到选区”
对齐
动画制作
动画类型
视频
Flash动画
Gif动画图片(位图)
最大颜色数量为256种
支持背景透明
支持动画
适用范围
卡通图
LOGO
线条图
一切颜色少于256种的情况
动画原理
利用人的视觉暂停现象
在短时间内快速切换内容连续的图像
动画制作技巧
打开为动画
保存为GIF动画格式
逐状态(帧)动画
选择动画命令
移动
改变大小
改变透明度
旋转
共享图层
一定是一个新的图层
放置不会动的内容
WEB界面设计规范
网页的类型
专题页
只有一个页面
只介绍一款产品
以图带字,强调设计效果
页面高度很高
注意事项
提炼产品的卖点
每个卖点做成一个广告的形式
按照一定的逻辑顺序组织起来
网页的安全宽度
三种情况
内容宽度小于浏览器宽度
内容宽度等于浏览器宽度
内容宽度大于浏览器宽度
内容宽度取值
绝对值
计算公式
屏幕分辨率-浏览器垂直滚动条的宽度=内容的最大宽度
常见网页内容宽度
基于1024的分辨率
1000px
...
950px
基于1366x768的分辨率
1200px
1100px
相对值
用来制作“自适应”宽度的网页
文字规范
可用字体
宋体
微软雅黑
字号
正文
12px
14px
标题
14px
16px
18px
边缘设置
宋体12px-16px
宋体大于16px
微软雅黑任意字号
网格化布局
网格的构成
行
列(栏)
单元格
单元格的间距
学会找到设计中的网格
从上到下
从左到右
从外到内
web界面的构成
内容
文字
图片
网格结构
色彩
效果
细节
WEB界面设计流程
分析
界面的网格结构
色彩构成
内容宽度
制作
确定内容宽度
搭建页面结构
使用矩形工具
根据页面模块来搭建
顺序是从上到下
制作顺序
先创建形状
添加效果
添加内容
图片
文字
制作网页的顺序
先做首页
把首页另存为内容页面进行修改
工作中的问题
改版
核心是对内容进行重新梳理
然后进行二次设计
设计工作
明确需求
总结
提问
找同类型的效果进行展示
展示效果
进行分析
怎么找
设计效果
花瓣
站酷
优设网
设计路上
行业网站
搜索引擎
搜索”网页设计“
设计制作
0 条评论
下一页
为你推荐
查看更多