网站PC端设计技巧与要点----视觉设计实战
2017-12-28 本文已影响115人
SimSun_
- 网站视觉设计规范
- 网站风格与配色
- banner设计实战
- 网站视觉案例实战
颜色
色不过三
- 举例：
- 正文颜色：#33333 深灰
- 长连接颜色：#3B639F 蓝色
- 强调颜色：#FF7F00 橙色
字体
- 文本使用常规字体（微软雅黑、宋体）
- 微软雅黑，无衬线字体，现代化简洁字体，无过多装饰，粗细一样的
- 宋体，衬线字体，粗细不一致有变化
- 特殊字体做成图片
- 比如logo
-
字体类型三种以内
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
- 交互行文的元素命名：
- 凡涉及交互行为的元素通常会有正常、悬停
网站适合什么样的风格？
- 扁平化风格
- 手绘风格
- 活泼，艺术
- 拟物风格
- 综合性风格
总结影响网站风格的因素
- 网站类型
- 所属行业
- 用户人群
网站配色
- 色不过三
- 主色（邻近色）
- 辅色
- 突出显示的颜色（强调色）
- 考虑行业
- 用户人群，配色技巧
配色小技巧
- 铺
- 大面积铺底色或者铺模糊化的大背景图
- 学
- 借鉴出色的网页设计方案
- 吸
- 从照片中西区颜色
- 如果不知道怎么选颜色：滤镜----像素化——马赛克
冷暖以及中性色的区分
图片.png
