Web UI设计理论学习笔记

UI就是用户界面，包括三个方向：用户研究，交互设计，界面设计。
WUI是网页用户界面。wui设计与常见网站建设的区别是，wui注重人与网站的互动和体验，以人为中心进行设计。

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

• 1.门户网站（新浪网）
• 2.分类信息网站（58同城）
• 3.交易类网站（天猫，淘宝，京东）
• 4.娱乐性网站（爱奇艺，B站）
• 5.个人博客（QQ空间，人人网）
• 6.论坛／社区（百度贴吧，天涯）
• 7.行业类网站（汽车之家）
• 8.企业网站（公司官网，公司广告）
• 9.机构类网站（政府机构，公积金，社保）
• 10.功能性网站（快递100，查找快递信息）

模块：网页界面布局中最小的单位。

• 头header，广告banner，搜索search，小技巧tips
• 内容content，页面主体main，友情链接friendlink，栏目标题title
• 尾footer，热点hot，页脚footer，加入joinus，
• 导航nav，新闻news，版权id，指南guide，
• 侧栏sidebar，下载download，滚动scroll，服务service
• 栏目column，子导航subnav，内容content，注册register，
• 登陆条loginbar，菜单menu，标签页tab，状态status，
• 标志logo，子菜单submenu，文章列表list，投票vote
• 页面外围控制整体布局，左右中left right center，提示信息msg，
• 合作伙伴partner，宽度wrapper或wrap，版权信息copyright

结构 样式 行为

html css js

• 1.把网页看成多个网格
• 2.先有行再有列（从上到下）
• 3.先做容器在做内容（从外到内）

版式-》色彩-》图片-》字体-》段落-》细节：商品阴影，风格元素，对齐等

界面设计流程

版式-》制作-》输出

项目的流程

需求-策划-原型图（交互设计师）-设计图（切图）-制作（前端）-上线发布

版式：

分析需求内容-》绘制草图（ps，网格状，纸笔手绘）

制作：

• 1.优化版式结构
• 2.填充内容（图片素材等）
• 3.样式设计（字号，颜色，边框等）

输出：

• 1.优化（设计哪些不足）
• 2.切图（和前端工程师聊，也有前端自己切图）
• 3.输出（切好的图打包命名整理）

一般项目初期就要建立设计规范（主色调，字体等），因此为基准，进行之后的设计工作。查看设计规范的不只有设计师还可能是前端，运营，开发等人员，所以设计规范的建立要充分考虑适用人群。

字体选择

一个非创意性质的网页，最重要的内容，就是文字。
出现了文字，就会出现文字排版，字体选择，字体颜色大小粗细等细节。而这些细节，往往是非常重要的细节。

衬线字体（易读性高）和无衬线字体（醒目，更容易被注意到）

整篇文章中适合用衬线字体，正文字体：宋体。易于阅读但不够醒目。
标题适用于无衬线字体：黑提。醒目

字体的属性

• 字体字号 单位有磅，点，像素px等
• 粗细 粗体，细体，常规体，斜体
• 字体颜色：各种颜色，常见：正文黑色和超链接蓝色
• 下划线，山出现

选择字体

当浏览器加载代码后，解析到有关字体的样式，它会在你的系统中查找这个字体，只有找到了相应的字体文件才会根据那个字体文件对网页中的文字进行渲染。如果操作系统中没有安装网页中定义的字体，就无法渲染出字体的效果，而通常使用当前系统的默认字体来渲染。

解决方法1:使用通用字体的样式属性
充分利用样式属性来区别字体（颜色，粗细，背景色等来做出层次区别）

解决方法2:使用在线字体
css3的web fonts功能，网页中可以使用安装在服务器端的字体，你可以将选择好的字体，上传到服务器中，然后使用css3新增的@font-face属性，来调用服务器上的字体，然后来渲染网页）
支持css3这一功能的浏览器，会首先查找服务器上的字体，然后下载下来进行渲染。这样就彻底解决了本地操作系统中，没有对应字体的问题。

缺点：通常英文字体只有几百kb，因为它只需要包含数字，标点，英文字母；而汉字太多，所以中文字体通常十几M，最小也要几M，打开一个网页，还需要先下载个几M的字体，在目前国内的网速是不现实的。

色彩是视觉表现的重要因素之一。

在web设计中，根据和谐，均衡和钟带你突出的原则，将不同的色彩进行组合。根据色彩对人们心里的影响，合理地加以运用。
如果有企业VI，要按照其中色彩规范进行设计。

色彩的三要素：色相，明度，纯度

• 蓝色 沉稳 理智 科技感 数字
• 绿色 安全
• 黄红 奔放
• 黄蓝 抑郁
• 背景 花哨，烘托气氛，但会分散内容 单纯，聚焦内容

在web中，我们所说的尺寸不是显示器的尺寸单位“寸”，而是页面的尺寸单位，简单说就是网页的宽高，显示器上显示图片的宽高，文字等字号等这类尺寸

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

web中的图像格式

超文本可以包含图片，链接，音频

图片格式：

• JPG:色彩丰富、对设备和系统平台适应性强、通用性强，对比GIF和PNG的尺寸要大些
• GIF：动态、静态、可透明底、体积小，表情常用。缺点：透明底有毛边
• PNG：初衷是替代GIF和TIFF，体积小，透明底，开发常用，在网页设计中最常用，精度够的话也无什么毛边什么的

视频格式，音频格式

• flv:视频传播格式，体积小，加载速度极快，增长最快最广泛
• MP3：大幅度缩小音频体积，音质有损耗

视觉层次

利用点线面等元素或颜色的变化而塑造出来的空间视觉效果。
近大远小（透视）
近实远虚（景深）
元素层次（画面的塑造）
色彩层次：亮的在前，暗的在后。利用黑白处理，判断视线重点，色彩层次

切图的作用

1.重要性；基础中的基础

2.目的；为web提供图片素材

3.切图保存：png

功能

• 展示企业形象
• 传播主要业务
• 集合功能入口

首页的登录／不登录

不登录：品牌展示为主

登录：深层次业务，个人服务

功能

• 强烈的视觉效果
• 有趣味的体验
• 推广信息

设计流程：结构（上下结构，专题系列）-》风格（产品特点，专题特征）-》头图（主题字，氛围）-》内容（内容清晰，布局合理）

设计必须要在意的地方：创意，版式，色彩，细节

bannner首页焦点图。无论你是web设计师还是ui设计师，只要混迹在互联网公司的设计师，都会接触到设计banner这一工作，并且有时会是加急的。
所以如何高效的完成banner工作是我们需要掌握的一项工作方法论

设计流程：需求（分析需求）-》风格（确立风格）-》版式（排版）-》配色（符合主题风格）

1.需求：一般运营的同事会给需求，一般只有寥寥数字。例子：

• 软文标题：圣诞来袭30天11%年化
• 主图标题：圣诞加息岁末狂欢趴

所以这时候，我们需要主动沟通，询问更多的潜在需求（目的？预期效果？特殊需求？--潜在需求）

2.版式：回字形，左中右构图，左右结构，上下结构，左右里嵌套上下结构

3.配色：

• 电子产品：冷色调，偏冷淡。
• 食品：绿色，安全
• 家：黄色红色，暖色调

总结

听：多搜集行业信息，发展趋势

说：与人交流，和同行交流（版式，色彩），和用户交流

读：生活中，多观摩分析，别人的作品（什么风格，结构，色彩搭配etc）

写：着手练习，临摹优化。