12-05

蓝海:指的是未知的市场空间,一个全新的领域。
红海:指的是已知的、竞争相当激烈的市场。
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、项目走查

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,313评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,369评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,916评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,333评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,425评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,481评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,491评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,268评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,719评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,004评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,179评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,832评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,510评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,153评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,402评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,045评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,071评论 2 352

推荐阅读更多精彩内容

  • seo基础、优缺点 什么是seo 搜索引擎优化 广告位下的自然排名 SEO是指从自然搜索结果获得网站流量的技术和过...
    王日凯Dream阅读 176评论 0 0
  • 认真对待每一道面试题 CSS部分 CSS中 link 和@import 的区别是? link属于HTML标签,而@...
    iCodingShow阅读 331评论 0 1
  • 什么是seo 一句话说就是搜索引擎优化 简单理解:SEO是指从自然搜索结果获取网站流量的技术和过程。 严谨:SEO...
    王日凯Dream阅读 647评论 0 0
  • 昨晚没来的及上课今天补课了,感觉确实是很颠覆认知的,首先是保险。原来商业保险其实是有必要的,因为它保的不是人而是钱...
    彭雪_中玩阅读 146评论 0 0
  • 妈妈和姥姥在包饺子,我帮忙看妹妹,妹妹很淘气,我只有给她打开电视,看会动画片,这样才能老实一会。不过我还是很喜欢妹妹。
    葛雨辰阅读 173评论 0 0