蓝海:指的是未知的市场空间,一个全新的领域。
红海:指的是已知的、竞争相当激烈的市场。
banner:
横幅广告,一个表现商家广告内容的图片,要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心。放置在广告商的页面上,是互联网广告中最基本的广告形式。
banner设计前期需了解的:
1.投放位置 2.所需文案 3.有无产品素材 4.风格需求
banner布局方式
右图左文:与左图右文的布局格式相反但都是常见的banner布局格式,方便用户查看、画面清晰。
左图右文:画面对称,常用于较长的格式的banner、也是最为常见的布局方式。
中心布局:中心集中、突出重点。
左中右:画面丰富、适用于素材较多的排版格式,方便罗列。
上文下图:适用于产品过多,还需要突出文案
banner风格
1.时尚 1.复古 1.清新 1.酷炫 1.简约
如何评价一个banner好坏
1.定位 —————— 定位是否准确
2.信息层级 —————— 信息层级是否清晰
3.可读性 —————— 内容是否具备可读性
4.创意 —————— 设计是否有好的创意
5.舒适度 —————— 看起来舒不舒服
6.细节 —————— 细节是否到位
文案的排版
1.左对齐
很常见的排版方式,也是很直观、很传统的
2.右对齐
在banner中算是用的比较少的一种对齐方式,因为人们往往更喜欢从左往右
3.居中对齐
比较常见的对齐方式,不管是促销banner还是常规的都用的比较多,容易出效果
4.自由型
对于促销感、游戏、活泼一类自由型是最合适的、错落就会给人一种速度感
banner装饰
短线:丰富版面视觉、强调主题、分割信息,使页面更有设计感
线框:丰富版面视觉、标示重点、关联修饰,增加立体感、平衡画面,增加设计感
英文:填补空缺、增强对比、丰富画面,增加设计感
web-ui是什么--网页的界面设计
UI就是用户界面,包括三个方向:用户研究,交互设计,界面设计。WUI是网页用户界面。wui设计与常见网站建设的区别是,wui注重人与网站的互动和体验,以人为中心进行设计。
网站组成
1.域名 2.空间 3.程序 4.浏览器
网页构成基本元素
1.图片 2.文本 3.图标 4.视频 5.声音
静态网页
静态网页就是很简单的一个页面(一般都是以html或者htm结尾的),几乎可以一眼看到它所能呈现的所有东西,基本没有交互性,用户只能看,不能说。
动态网页
动态网页的交互性就很大了,它需要有自己的数据库,来让前台跟后台进行联系,用户可以看,可以说,后台也可以根据用户的反馈来修改前台所呈现的内容。
web的基本分类
to c
1.门户网站(搜狐网,新浪网) 2.企业网站(菜鸟联盟,格力)
3.产品网站(苹果,小牛) 4.电商(京东,天猫)
5.专题页面 6.视频网站(爱奇艺,优酷视频)
7.移动端H5 8.游戏网站(绝地求生,英雄联盟)
to b
1.网站后台(网站信息管理)
2.erp系统(企业管理)
3.SaaS(软件服务)
4.企业OA(办公自动化)
布局方式
垂直布局(36氪,百度)
流式布局(分割形式-自如)(Z字形式-最右)
视差类型布局(qq官网)
全屏布局(绝地求生官网)
无缝拼图布局(雷克萨斯官网)
瀑布流(花瓣)
关于安全范围
因为屏幕分辨率太多,网页设计的安全范围没有固定的,但是有一个范围
安全区域范围:960px-1440px(偶数原则,不能出现奇数,能被2、3、4整除最佳
常用安全范围:960px 1000px 1024px 1190px
基本规范
一般项目初期就要建立设计规范(主色调,字体等),因此为基准,进行之后的设计工作。查看设计规范的不只有设计师还可能是前端,运营,开发等人员,所以设计规范的建立要充分考虑适用人群。
字号
12号微软雅黑 (适用范围:项目介绍、内容等)
14号微软雅黑 (适用范围:段落文字,窗口正文文字)
16号微软雅黑 (适用范围:分组、选项等文字按键)
22号微软雅黑 (适用范围:标题&副标题)
28号微软雅黑 (适用范围:特大标题)字体
中文:微软雅黑,宋体,黑体,华文细黑,苹方
英文:Arial,Tahoma,Times,Helvetica,苹方
字体颜色
常规文字:#333333 次级文字:#666666 辅助文字:#999999
网页的常用图片比例
16(宽):9(高) 4(宽):3(高) 1(宽):1(高)
网页的按钮点击热区
最小范围12px * 12px
色彩的运用
色不过三,大面积灰,小面积点缀标
主色:用于标识,按钮,图标标志、标题、主菜单和主色块,给人以整体的感觉
层级颜色:文案的层级颜色,页面文案阅读起来会更加轻松
web标准化布局原理
1.页眉:在网页的最顶端,通常会放置网站Logo和导航。
2.banner:展现一个网站的形象或者产品售卖
3.板块内容:网站里需要添加的详细信息、功能和内容
4.页脚:在网页最底端,信息没必要放在网页上很显眼的地方,只需要在页脚位置做个说明即可。
首页
网站首页是引导用户进入不同区域的一个“目录”,这个目录除了导航功能外也要露出一部分内容给用户来吸引点击。
二级页面
首页是一级页面,从首页点击进入的页面均为二级页面。二级页面之后还有三级页面等级别。从点击的概率上来说,自然是越靠前访问量越高,页面层级越深越不容易被用户找到。
底层页
在网站结构中最后提供用户实质资讯的页面就是底层页。
网页删格布局
提高网页的规范性,在栅格系统下,页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说,能节约不少成本。
响应式网站
同一个web UI界面能够兼容多个终端无需为每个终端设定特定的版本主要解决移动互联网WEB页面浏览
优点:面对不同屏幕的分辨率可以灵活的去适配,用户可以在任何设备查看官网,体验良好
缺点:1、代码多,维护成本高。2、加载速度慢。3、兼容性差,容易出现bug
网页banner
一般以1920x1080px为基准的用户屏幕,加上浏览器本身与插件和底部工具条等距离,留给网站的一屏高度大概为800px左右,所以banner不可以做得很高,否则第一屏信息会显示得不够。(Banner的宽度有两种,一种是满屏(1920PX)、一种是基于安全距离的满尺寸(1200px或1000px))
工作流程
01、项目需求 02、原型图 03、视觉稿 04、切图 05、前端代码 06、项目走查