网站PC端设计技巧与要点----视觉设计实战

• 网站视觉设计规范
• 网站风格与配色
• banner设计实战
• 网站视觉案例实战

颜色

色不过三

• 举例：
  • 正文颜色：#33333 深灰
  • 长连接颜色：#3B639F 蓝色
  • 强调颜色：#FF7F00 橙色

字体

1. 文本使用常规字体（微软雅黑、宋体）

• 微软雅黑，无衬线字体，现代化简洁字体，无过多装饰，粗细一样的
• 宋体，衬线字体，粗细不一致有变化

2. 特殊字体做成图片

• 比如logo

3. 字体类型三种以内
   

   

   C5DB1634-883D-4C0D-97BC-73656399ECE0.png

字号

• 12px（中文最小文本）中文用偶数
  • 广告内容、辅助信息或介绍性文字等多使用12号字体
  • 英文里面可以小于12px，最小可以到px，英文的笔画少，易鉴别
• 14-16px（正文）
  • 正文内容部分
• 16-18px（标题）
  • 标语部分
• 更大20、24、28、32.....
  • 比如：广告语以及特别情况
• 统一层级的字号搭配应该保持一致
  • 比如：同一层级的板块中标题和内容大小的一致性

行距

文本行高一般为140%~180%，一般不超过2倍。

7A2A99A4-8B40-4450-8F5F-F19F6B31CD06.png

• 开头空两格，也可以区分段与段之间的内容，但是如果每一个段内容少，总是空两格会显得参差不齐。

572D7A6A-85A4-4E3F-9572-47DAF73E2986.png

• 所以现在基本上都是，增大段落与段落之间的距离来区分，不再开头空格。

文字对齐

• 默认：左对齐

• 按钮、标签：居中对齐

• 文字标签：右对齐

  
  
  

  591EB024-824C-4838-99CC-8F62470540C1.png

• 文件对比的时候
  特殊：两端对齐

图片格式

• JPG 背景图片、照片 文件小。
  • 品质在60-80，60以下最好不用
  • 一些大图片，banner建议用这种格式
• GIF 小于256色 图标、图表等 支持透明和动画。
• PNG 推荐使用、尤其是移动端 支持透明、半透明。

图片常见问题

• 图片压缩变形
  • 方法1：整体缩放，放在banner中间，或者旁边，添加一些元素
  • 方法2：切开一条，翻转，刚好合住适当延伸
• 图片变虚
• 图片过于复杂

命名规范

命名规范-常用命名规范

• 页头：header
• 登录条：loginbar
• 标志：logo
• 侧栏：sidebar
• 广告条：banner
• 子导航：subNav
• 菜单：menu
• 下拉菜单：dropMenu
• 工具条：toolbar
• 表单：form
• 栏目：column
• 箭头：arrow
• 搜索：search
• 搜索按钮：btn_search
• 内容：content
• 滚动条：scroll
• 标签页：tab
• 文字列表：list
• 提示信息：msg
• 小技巧：tips

命名规范-组合命名规则：

• 组合命名规则：
  • 元素类型-元素作用/内容
  • 如：搜索按钮：
  • 登录表单：form_login
  • 新闻列表：list_news
• 交互行文的元素命名：
  • 凡涉及交互行为的元素通常会有正常、悬停

网站适合什么样的风格？

• 扁平化风格
• 手绘风格
  • 活泼，艺术
• 拟物风格
• 综合性风格

总结影响网站风格的因素

• 网站类型
• 所属行业
• 用户人群

网站配色

1. 色不过三
   • 主色（邻近色）
   • 辅色
   • 突出显示的颜色（强调色）
2. 考虑行业
3. 用户人群，配色技巧

配色小技巧

• 铺
  • 大面积铺底色或者铺模糊化的大背景图
• 学
  • 借鉴出色的网页设计方案
• 吸
  • 从照片中西区颜色
  • 如果不知道怎么选颜色：滤镜----像素化——马赛克

冷暖以及中性色的区分

图片.png