一、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.专题页：强烈的视觉效果、有趣味的体验、推广信息
十、如何去做
作为一个设计师，要经常去搜集行业信息、发展趋势，如某一阶段的风格、样式，对于不同分类的网站，应该要留心观察、勤于思考，观察每个网站的布局、风格，找到设计亮点，观摩分析，培养自己的思维方式，总结技术特点，形成自己的风格，更好的学会去创造而不是模仿。
网友评论