一、web UI是什么?
UI(User Interface)指的是用户界面,主要包括用户与界面之间的交互关系(或方法的集合),所以关于UI可以分为三个方向:用户研究、交互设计、界面设计。
WUI(website User Interface),即网页用户界面。WUI设计与常见网站建设的区别就是,WUI更注重人鱼网站的交互和体验,是以人为本进行设计
二、你需要掌握的分辨率
概念:确定计算机屏幕上显示多少信息的设置,以水平和垂直像素来衡量。
特征:显示分辨率就是屏幕上显示的像素个数,屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细和细腻。
- 常见的长宽比:
- 5:4 = 1.25
- 4:3 = 1.33
- 16:10 = 1.60(宽屏)
- 16:9 = 1.77(宽屏)
2.常见分辨率
- 1266x768:两侧会有白边
- 1024x788:基本上和浏览器匹配
- 小于1024:小于浏览器宽度,会出现滚动条
- 自适应布局:根据浏览器大小自动适应大小
三、网页都由哪些构成的?
模块:模块是网页布局中最小的单位,展现不同类别的信息,具有特定的功能。比如:header/banner/main/footer/news/sidebar/logo/list/content/service/title/tips.....
四、web的基本分类
- 门户网站:雅虎、新浪
- 分类信息:58、感激
- 交易类:京东、天猫、淘宝
- 娱乐性:A站、B站
- 个人博客:个人网站
- 论坛(社区):发布信息、信息回帖、交流
- 行业类网站:汽车之家、经管
- 企业门户
- 机构类网站:政府
- 功能性网站:快递100、百度、有道(提供一种或几种功能)
五、网页是如何实现的
web标准化布局的是由三个组成部分:结构、样式、行为。
- 结构:就是网站的框架组成,由html等构成;
- 样式:就是设计的特点,包括字体、大小、颜色、格式、布局...
- 行为:实现一些动态效果...
- HTML中的色彩
- HTML中使用16进制的RGB颜色值对颜色进行控制
- 16进制的数码有:0123456789abcdef;
- 书写规范:#RRGGBB
2.web标准化布局原理
- 吧网页看成多个网格
- 先有行再有列(从上到下)
- 先做容器后做内容(从外到内)
3.web中的尺寸单位
- px(像素):显示器上的最小单位
- pt(磅):长度单位,物理尺寸,1pt=1/72英寸
- PPI(DPI):每英寸的像素数,是一个率,用来表示精度
- em:百分比(%)
六、设计维度
设计维度包括:版式、色彩、图片、字体、段落、细节;
七、设计规范
设计规范就是设计工作中所要遵循的一套规则,在项目初期就需要建立,以此为基准,进行之后的设计开发工作。并且设计规范要和充分考虑用户群体,面向用户进行指定。
规范可以节约各方面的成本、节约时间、提高工作效率。
- 色彩规范:主色、色值、字体色值...
- 文字规范:大小、颜色、字体、字体属性、
- 图标规范:子页、主页...
- 控件规范:按钮...
八、界面设计流程
整个网站从需求到上线的流程:
需求->策划->原型图->设计图->制作->上线
- 界面设计是在设计流程中
- 版式:分析需求内容和原型图,绘制草图;
- 制作:优化版式结构,填充内容,对于具体细节进行样式设计。
- 输出:优化改进、切图,输送给切图前端工程师
- 常用图片可输出的格式
- GIF:动态、可透明底、体积小、适用于表情;
- JPEG、JPG:色彩丰富、对设备和系统平台适应性强、通用性强;
- PNG-8:(8位):课代替GIF和TIFF、体积小、透明底、开发常用;
- PNG-24:(24位)
- 常用视频/音频输出格式
- .FLV:体积小、加载速度快、增长最快、最为广泛的视频传播格式
- .mp3:大幅度缩小音频体积、音质有损耗
九、设计技巧
1.视觉层次:近大远小,近实远虚、亮前暗后
2.专题页:强烈的视觉效果、有趣味的体验、推广信息
十、如何去做
作为一个设计师,要经常去搜集行业信息、发展趋势,如某一阶段的风格、样式,对于不同分类的网站,应该要留心观察、勤于思考,观察每个网站的布局、风格,找到设计亮点,观摩分析,培养自己的思维方式,总结技术特点,形成自己的风格,更好的学会去创造而不是模仿。