UI设计

web标准化布局原理

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

设计维度

版式、色彩、图片、字体、段落、细节

界面设计流程

• 版式：分析需求内容，绘制草图
• 制作：优化版式结构、填充内容、样式设计
• 输出：优化、切图、输出

需求—策划—原型图—设计图—制作—上线发布

色彩规范

• 主色
• 辅色
• 文字色

色彩的运用

色彩三要素：色相、明度、纯度
对比色、互补色、同类色

色彩层次

亮的在前，暗的在后

文字规范

字体的选择

• 衬线（粗细不一）
• 无衬线（粗细一致）

字体的属性

• 字号：磅、点、像素（px）
• 粗细：粗、细、常规、斜
• 颜色
• 下划线
• 删除线

图标规范

控件规范

web中的尺寸单位

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

图片格式

• jpg：色彩丰富，适应性、通用性强
• png：体积小，可以透明底，开发常用
• gif：静态，动态，可以透明底，体积小

视频格式

• FLV：体积小，加载速度极快

音频格式

• MP3 ：大幅度缩小音频体积，音质有损耗

视觉层次

元素层次

• 近大远小（透视）
• 近突远虚（景深）

切图

页面分解