Web UI设计基础(理论篇)

一、web UI是什么？

UI(User Interface)指的是用户界面，主要包括用户与界面之间的交互关系(或方法的集合)，所以关于UI可以分为三个方向：用户研究、交互设计、界面设计。
WUI(website User Interface),即网页用户界面。WUI设计与常见网站建设的区别就是，WUI更注重人鱼网站的交互和体验，是以人为本进行设计

二、你需要掌握的分辨率

概念：确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。
特征：显示分辨率就是屏幕上显示的像素个数，屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

---

1. 常见的长宽比：

• 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等构成；
• 样式：就是设计的特点，包括字体、大小、颜色、格式、布局...
• 行为：实现一些动态效果...

1. HTML中的色彩

• HTML中使用16进制的RGB颜色值对颜色进行控制
• 16进制的数码有：0123456789abcdef；
• 书写规范：#RRGGBB

2.web标准化布局原理

• 吧网页看成多个网格
• 先有行再有列（从上到下）
• 先做容器后做内容（从外到内）

3.web中的尺寸单位

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

六、设计维度

设计维度包括：版式、色彩、图片、字体、段落、细节；

七、设计规范

设计规范就是设计工作中所要遵循的一套规则，在项目初期就需要建立，以此为基准，进行之后的设计开发工作。并且设计规范要和充分考虑用户群体，面向用户进行指定。
规范可以节约各方面的成本、节约时间、提高工作效率。

1. 色彩规范：主色、色值、字体色值...
2. 文字规范：大小、颜色、字体、字体属性、
3. 图标规范：子页、主页...
4. 控件规范：按钮...

八、界面设计流程

整个网站从需求到上线的流程：
需求->策划->原型图->设计图->制作->上线

1. 界面设计是在设计流程中

• 版式：分析需求内容和原型图，绘制草图；
• 制作：优化版式结构，填充内容，对于具体细节进行样式设计。
• 输出：优化改进、切图，输送给切图前端工程师

2. 常用图片可输出的格式

• GIF:动态、可透明底、体积小、适用于表情；
• JPEG、JPG:色彩丰富、对设备和系统平台适应性强、通用性强；
• PNG-8:(8位)：课代替GIF和TIFF、体积小、透明底、开发常用；
• PNG-24:(24位)

3. 常用视频/音频输出格式

• .FLV：体积小、加载速度快、增长最快、最为广泛的视频传播格式
• .mp3：大幅度缩小音频体积、音质有损耗

九、设计技巧

1.视觉层次：近大远小，近实远虚、亮前暗后
2.专题页：强烈的视觉效果、有趣味的体验、推广信息

十、如何去做

作为一个设计师，要经常去搜集行业信息、发展趋势，如某一阶段的风格、样式，对于不同分类的网站，应该要留心观察、勤于思考，观察每个网站的布局、风格，找到设计亮点，观摩分析，培养自己的思维方式，总结技术特点，形成自己的风格，更好的学会去创造而不是模仿。