网页设计组成与规范

 

理解需求—绘制手稿—绘制线框图原型

 

 

一、网页设计组成

 

 

1.经典顶部导航

 

logo+导航+（功能入口）；顶端固定；可包含次级导航（样式细节）；搜索功能突出与弱化；导航菜单数量控制

 

 

2.浮动导航

 

相对浏览器顶端固定；长页面切换导航菜单更方便；减少了主体内容显示区域

 

 

3.透底导航

 

无明显独立区域；背景图与导航对比度温度；简约、大气、干净；多为互联网相关行业；不必整站采用该型式

 

 

4.侧边导航

 

主导航模式适用于个人、团队博客类网站（内容垂直不复杂）

 

辅助导航适用于电商分类

 

5.固定宽度

 

多种切换样式（左右、渐隐渐现等）；固定宽度；自动切换+手动切换

 

6.横向通栏

 

横向铺满；视觉开阔，简约大气；与导航栏样式要协调

 

 

7.新闻列表

 

常见新闻列表中的信息元、信息元优先级与设计中的主次、信息段落与板块划分

 

 

 

8.产品展示

 

常见产品展示中的信息元；信息元优先级与设计中的主次；宫格与列表模式的选择

 

 

二、平台规范

 

 

 

1.网页设计尺寸；电脑屏幕分辨率不同，宽度不同

 

 

 

考虑网站行业的性质

 

 

微博首页：1170px

 

微博内页：940px

 

（网站以用户产生内容为主，较小宽度便于集中用户视线）

 

 

小米官网：1126px

 

京东首页：1190px 

 

（网站以产品销售内容为主，较大宽度便于更多展示产品）

 

 

设计宽度建议1920*1080

 

视觉宽度（无法固定尺寸）建议960*1280px

 

 

2.字体选择

 

 

基础模块，常规字体无需刻意设计（微软雅黑、苹方为主）

 

修饰性标题，可使用特殊字体（需要考虑版权），也可当做banner，字体绘制其中

 

也可导出为PNG格式，前端技术引用，实现动效。

 

 

字号大小

 

12px 提示性文字；14px正文描述；18px侧边导航+栏目标题

 

 

中文：微软雅黑、苹方、宋体（最小字号12px）

 

英文：Arial、Helvetica、Tohoma、sans-serif（字号最小10px）

 

 

字体大小多采用偶数（奇数无法对齐像素）

 

 

3.控件与样式管理

 

标准化控件（不同状态下的控件形式）、颜色与字体（配色6-8及字体字号选择；当前页面3种左右）

 

 

4.网页设计中的交互

 

下拉菜单：默认收起状态、悬停展开状态

 

 

悬停状态：链接文字样式、凸显当前选择、增强信息呈现