Web UI设计基础(理论篇)

2017-03-16 本文已影响550人 Xiangdong_She

一、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.专题页：强烈的视觉效果、有趣味的体验、推广信息

十、如何去做

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