Web UI设计基础

WebUI

User-Interface,用户界面，交互设计，界面设计
WUI，网页用户设计，以人体验即用户为主，传统以功能为主

分辨率

显示器分辨率，垂直方向和水平方向像素的个数，因而像素尺寸不固定的

• 5：4
• 4：3
• 16：10
• 16：9
• 自适应布局

Web基本分类

• 门户类：新浪、搜狐、网易、腾讯，信息杂而多
• 分类信息：58同城、赶集网，生活相关的
• 交易类：B2B、B2C、C2C
• 博客类：微博
• 论坛：天涯、虎扑步行街、贴吧
• 行业类网站：某行业主题
• 企业类：公司形象、活动、广告
• 机构类：政府事业单位
• 功能性网站：提供一种或者几种功能

网页的模块有哪些

模块：网页布局的最小单位，展现不同类别的信息，具有特定的功能
导航：网站整体架构，红框导航、蓝框二级菜单
新闻：动态信息，更新频率快
首页焦点图：banner，首页第一屏
搜索：框和按钮

如何实现网页？

布局原理：网页是多个网格，从上至下，自外而内

设计维度

版式

色彩
图片
字体：主题、副标题、正文
段落：对齐方式，字体对比、字号对比
细节：阴影、风格元素、对齐

界面设计流程

版式（需求-策划-原型图-设计图）——>制作——>输出
PS草图/纸笔草图

基本规范

设计规范的使用人群，设计师前端运营开发等
色彩规范：一个带颜色方框，写好用处、颜色值，主色、辅色、文字色

文字规范：字体大小、行间距、适用范围

图标规范：功能、默认、hover（如果有）

控件规范：一级按钮、二级按钮，默认、hover、点击

字体选择

衬线字体/非衬线字体
字体字号：磅（pt）、点、像素（px）
粗细：粗体、细体、常规体、斜体
颜色：正文黑色/链接蓝色
选择字体：通用的字体、在线字体（打包到资源中，缺点是汉字字体太大达到几M）

色彩运用

和谐、均衡、重点突出、色彩心理学
色块区分板块，减少视觉疲劳、模块清晰
活泼、清新、商务大气

Web中的单位

px常用，非固定，显示器上的最小单位
pt，物理尺寸，1pt=1/72英寸
PPI（DPI），每英寸的像素（点）数，用来表示精度
em，百分比（%）

视觉层次

透视：近大远小
景深：近实远虚，表示元素层次
色彩层次：亮的在前，暗的在后

官网首页

企业形象、主要业务、集合功能

专题页面

比如天猫活动页：强烈视觉效果、有趣味的体验、推广信息
流程：结构-风格-头图-内容

banner设计

首页焦点图：
需求-风格-版式-配色