You are on page 1of 56

前端设计与开发的

基本模式
周爱民
关于我

周爱民 (aimingoo)

• 软件工程
• 平台架构
• 开发语言

www.doany.net
aiming@gmail.com
问题
• WEB 内容的核心模式
• WEB 为什么成了 2.0
• 功能设计的核心模式是什么
• 前端开发的基本模式
从源说起
追本穷源,互联网之父

APRA 开始使用 TCP/IP 协议


Vinton Cerf( 文顿 · 瑟夫 )

The Internet ...


APRA 网时代结束

NSFNet
CSTNet
ARPA NCP TCP/IP 协议 CerNet
(4 台计算机 ) ( 网络控制协议 )
ChinaNet
GeNet

1969 1970 1973-79 1983 84 1994


罗伯特 - 卡恩 (Robert E. Kahn) 博士
源远流长, WEB 之父

Tim Berners-Lee( 蒂姆 · 伯纳斯 - 李 )

在文件的任何地方
The Web ...
建立可点击的链接
Netscape 2.0
WWW – World Wide Web (HTTP, URL, HTML)
JavaScript 1.0
全球超文本项目计划

第一个浏览器 IE 3. 0
WWW IE 1. 0 CSS 1.0
浏览器公开
Mosaic Argo
(IMG) (CSS) Netscape

90.10 91 93.04 94 94.10 95.08 96.02 96.08


1989
本末源流, Yahoo ? Google ?

The Search ...

Jerry’s Guide
Yahoo! Yahoo! Co.
YHOO
100 万!

94.04 94 年底 95.03 96.04


1994.01
WEB 内容的核心模式

• 源:内容、门户、个人

• 流:链接、交换
• 汇:分类、归并、组织
流 (汇
经过 ) 源

...
Yahoo 模式与 Google 模式的差

• Yahoo :汇而不流,源于门户,止于门户。
• Google :由流而汇, Google 成功地站在了流的环节上。
以内容为中心的 WEB 设计模式
——Web1.0 时代的核心思想
WEB 1.0 时代的核心思想

页签 + 块 + 链接 = 门户
WEB 1.0 时代的核心思想
Link ....

• Hyper links • Grid layout


• Block + inline • z-index
• Flow layout (for elements) • DIV, SPAN, CSS...

页签 + 块 + 链接 = 门户
内容为中心对设计的直接影响
• 平面上的视觉焦点受三个主要因素的影响
– 位置( left, top )
– 差异:对比(范围: width, height ,色度、亮度)
– 向性引导
盈利模式的分析
• 基于位置与范围的收益:广告、排名
– 是内容刺激了你,还是范围刺激了你?
– 是数字刺激了你,还是位置刺激了你?

• 基于导向的收益:链接、指示、标签
– 箭头与小手
– 鼠标的向性问题
WEB 为什么变成了 2.0?
用户为中心

最好的位置,留给最挣钱的业务 ( 内容 )

最好的位置,留给用户
用户为中心

即刻可用:把最好的位置留给用户。
“ 用户创造内容”的迷局
1 、不能只有用户没有内容
2 、我们要让用户创造内容
3 、所以我们先锁定一个人群
4 、然后决定他们可以“共同”创造的内容
5 、接着提供让他创造的工具
6 、而我们,要实现这些工具的功能

WEB 2.0 = 我提供功能 + 你创造内容 ?


目的是什么?

我们只不过是要留住用户 !
内容?功能

从“人以群分”来看 SNS
SNS 的本质是关系粘性
• 共性是一种关系
• 所谓“功能”,其实是一种共性需求或行为
 Google 的功能,是建立“人与服务”的关系,这种
关系粘性是可置换的,如同 Yahoo 与用户曾经建立的
功能粘性被 Google 置换了一样。

 SNS 的目标是建立“人与人”的关系,这种关系粘
性是难于置换的,例如 QQ 没有被 MSN 替换。但这种
关系是可以补充的,例如你既有 MSN 也有 QQ 。
感官刺激与网站模式

咨询信息 传统模式 知觉意识

( 以产品为中心的 ) 眼睛
内容网站 广告 耳朵 感悟 ( 知 )
( 隐性广告 ) 见闻嗅尝
舌头
体验店 鼻子
功能网站 直销 身体 体悟 ( 觉 )

意想 意识
功能设计的
基本模式
[ 5 分钟休息时间 ]
1. 简化你的设计!
• 让用户“看”什么 -》 让用户“做”什么

• 内容连续 -》 行为连续
通过链接到下一页 -》行为到下一行为
• 不必掩饰:明确的目的性 D
E
M
– 位置( left, top ) O

– 差异:对比(范围: width, height ,色度、亮度)


– 向性引导
目的的掩饰

O
M
E
D
– 差异:对比(范围: width, height ,色度、亮度
2. 明确焦点上的意图!
• 如果你确定需要做一个功能性的网站,那么你
的第一要务是分析自己的目标,然后在焦点上
表明你的意图。例如下面这个按钮:

• 尊重惯例
• 表达一个含义
• 鼠标上的行为
焦点上行为的导向!

突然出现的箭头标识
导致视觉聚焦,然而
在这个焦点上,却存
在多种行为

鼠标单击的话
,有什么效果
呢?
焦点上行为的导向!

这里是焦点 行为却在这里

问题更加
复杂了!
3. 在焦点上聚合功能
(Mashups)
Mashup: 由多个源聚合而成的一个 web 站点或应用
注意:它是焦点上的用户行为驱动的,而不是技术驱动的。
也非简单的内容聚合。

交互 1
客户机的 Web 浏览器
1. 某种行为

Mashup it! 接口 ?
交互 2
2. 返回 / 交互 mashup 站点 ( 同业竞争问题
)
3. 做点什么

? API/ 内容提供者
谁来提供? Coding…
是 Rich Client?
Jump~
交互驱动的 Jump~
用户行为引导 为什么要让
用户离开? 服务提供商
WEB 页面焦点上的行为
• 本质上来说 , Web 页的设计决定了焦点上的行为是 :
click-click-click... 这与 rich client 的表达形式 ( 或需
要 ) 是不一致的 .
• 传统 GUI 的 WIMP 在这里变成了 BP. 显然 ,WEB
将 WIM 的构成形式统一成了 Block, 这一认识带来的
变革是巨大的 : 窗体 / 标识 / 功能的表达形式更加丰
富.
• 然而 , 焦点上的行为呢 ? 真的只有 click 吗 ? WEB
Page 的表达内容的性质 , 决定了内容上的链接与内
容的范围 ( 页 / 多页 ), 但当 WEB 从 PAGE 走向
RANGE 时 , 变化会出现在哪里呢 ?
前端设计与开发
回顾
屏幕大小 – 输出设备不同制式
屏幕大小 – 复杂性
屏幕大小 - 复杂性
解决方案 1 - 缩放或留黑
解决方案 2 - 截取部分 / 中间摇

解决方案 3 - 做最大幅面的
解决方案 4 - 做多套
问题到了 Microsoft 呢?
解决方案 - 纯色、纵向菜单

Media Center
更好的方案呢? ——
XBOX
范围突破带来的震撼 –
XBOX/XBMC
范围突破带来的震撼 - XBOX

“X” 型的界面造型,使得边界的约束变
得没有意义,从而突破了“内容表达的
范围”,带来了全新的体验。
焦点向性

单一向性
焦点向性

多向性
焦点向性

自由向性
焦点的局限
我们的视觉焦点只有一个

问题到了 Microsoft 呢?
焦点引导的突破 - XBOX
焦点引导的突破 – 页签问题
焦点引导的突破 – 手势
学习——看到本质
YUI 是怎样炼成的?
YUI Core:
•The YAHOO Global Object
•DOM Collection
界面 •Event Utility
内容 YUI Library Utilities:
•Animation Utility
•Browser History Manager
交互 •Connection Manager (for XHR/Ajax)
•Cookie Utility
行为 •DataSource Utility
•Drag and Drop Utility
•Element Utility
•Get Utility (dynamic script/css loading)
•ImageLoader Utility
应用 •JSON Utility
数据 •Resize Utility
•Selector Utility
•The YUI Loader Utility
YUI Library Controls/Widgets
YUI Library CSS Tools
YUI Developer Tools
包含界面开发时的层次模型

支撑 抽象层 单一模块

界面层 界面控件 界面控制 界面实现

逻辑层 界面切换 动作分派 业务逻辑

数据层 数据 数据处理 私有数据


前端开发的基本模式
U=E2+C2
Effect

UI Control Context
Experience
算法 / 逻辑 结构 / 数据
前端

算法 / 逻辑
Control

结构 / 数据

LocalData Client
客户端

服务端
UC->UCC
RemoteData Server
Q3

You might also like