“ 未战而庙算胜者，得算多也” —互联网应用策划、架构与设计

张志翔中国科学技术大学 - 瑞士弗里堡大

学信息物理联合实验室

2010.10

本次培训介绍的内容

• 互联网应用的策划 定位用户 需求分析 营销推广

• 互联网应用的架构 轻量级应用 MVC 与快速开发框架 大规模网站架构

• 互联网应用的设计 ( 将在后面的培训中具体介绍 ) 视觉设计 VD 用户体验设计 UED 用户界面设计 UID

2023.04.19PHP & Web2.0 | Page 2

互联网应用 与 B/S 模式

• 互联网应用泛指使用 Internet 进行数据传输的软件及其辅助工具，除网站外还包括 C/S 模式软件、 B/S 模式软件、 P2P 软件等。

• B/S （ Browser/Server ，浏览器 / 服务器）模式是使用标准相对统一的浏览器作为客户端的软件架构。使开发者可以将注意力集中在服务器端，更方便快速的开发能让各类平台用户使用的产品。用户也能无需安装或升级即可使用该产品的最新版本。

2023.04.19PHP & Web2.0 | Page 3

互联网应用的策划 - 定位用户

• 确定初期核心用户群：目标明确，需求明晰，特色明显，“小即是美”

• 考虑未来拓展用户群：具有发展的战略眼光，避免短视和冒进

• 网站策划之怎么做好网站的定位

2023.04.19PHP & Web2.0 | Page 4

互联网应用的策划 – 需求分析

• 抓住用户的明确需求： 争取 100% 满足这些需求，将之放在应用设计的第一位 体现应用的使用价值

• 分析用户的潜在需求与未来需求： 根据重要性逐步添加功能，并引导用户使用 体现应用的特色，加强用户体验和用户粘度

• 避免过度设计： 初期添加过多的用户很少需要的功能 花哨但增加复杂度的设计 用户不需要一把能杀鸡的牛刀

2023.04.19PHP & Web2.0 | Page 5

互联网应用的策划 – 营销推广

• 应用的价值体现： 更多的关注（眼球） 更多的用户 更多的收益或收效

• 营销与推广： 针对搜索引擎的 seo 优化 针对目标用户群体的软文写作与投放 选择合适的广告平台 口碑与市场倍增学

2023.04.19PHP & Web2.0 | Page 6

互联网应用的架构 – 轻量级应用

• 架构特点：轻巧快捷，只需选择满足需求的组件•技术选择：寻找修改轮子而不重复发明轮子•常用的轮子：

PHP扩展应用库： PECL、 PEAR 数据库抽象层： PDO 、 ADODB 模板引擎： Smarty Ajax 框架： jQuery、MooTools、 Sencha（ Extjs ） CSS 框架：推荐CSS框架 可视化 HTML编辑器： CKEditor 、 TinyMCE

2023.04.19PHP & Web2.0 | Page 7

互联网应用的架构 – MVC

• MVC 模式：模型 (Model), 视图 (View) 和控制器 (Controller),实现 Web系统的职能分工 : Model层实现系统中的业务逻辑和数据读写； View层用于与用户的交互，通常由 HTML+ 模板

标记组成； Controller层是 Model 与 View 之间沟通的桥梁

，它可以分派用户的请求并选择恰当的视图以用于显示，同时它也可以解释用户的输入并将它们映射为 Model层可执行的操作。

2023.04.19PHP & Web2.0 | Page 8

互联网应用的架构 – 快速开发框架

• 包含开发中常用的功能组件、类库以及代码参考规范等源代码集合，方便开发者快速开发和复用代码，有利于大中型项目的团队协作

• PHP 快速开发框架： Zend Framework ：由 Zend官方团队提供支持 ThinkPHP ：优秀的国产框架 Yii 、 CodeIgniter 、 CakePHP 、 Symfony 等

2023.04.19PHP & Web2.0 | Page 9

互联网应用的架构 – 大规模网站架构

•高可用性 (High Availability)• 可伸缩性 (Scalability)•高性能 (High Performance)

• PHP程序员面临的成长瓶颈

2023.04.19PHP & Web2.0 | Page 10

大规模网站架构 – 缓存技术

•缓存：让数据更靠近用户 数据库缓存 Memcached 动态内容缓存

• 页面片段缓存• 静态化内容

CDN 浏览器缓存

2023.04.19PHP & Web2.0 | Page 11

缓存技术 - Memchched

2023.04.19PHP & Web2.0 | Page 12

缓存技术 - CDN

• Content Delivery Network

2023.04.19PHP & Web2.0 | Page 13

大规模网站架构 – 静态资源分离

• img,js,css 使用单独的服务器处理请求 : http://img3.cache.netease.com http://b9.photo.store.qq.com http://img08.taobaocdn.com http://t3.gstatic.cn

• 图片服务器的域名不同• 多台机器保存相同的图片 (img3,img2 子域名 )• 同一页面不同图片随机生成不同的子域名进行负载均

衡

2023.04.19PHP & Web2.0 | Page 14

大规模网站架构 – 负载均衡

• DNS负载均衡• 反向代理负载均衡

nginx HAProxy apache httpd LVS( 网络第四层工作 ) F5(硬件，四层 /七层 )

• 直接路由

2023.04.19PHP & Web2.0 | Page 15

大规模网站架构 – 数据库切分

• 数据库读写分离• 数据库Shard

水平分区 垂直分区

• Netlog 的数据库及 LAMP 架构

2023.04.19PHP & Web2.0 | Page 16

互联网应用的设计 – 视觉设计

• Visual Design ：根据用户群体的类型对应用产品的布局、配色、字形字体、 LOGO 、 ICON 等要素进行创意设计。

2023.04.19PHP & Web2.0 | Page 17

互联网应用的设计 – 用户体验设计

• User Experience Design ：根据用户需求设计引导方法与交互方式，让用户更容易发现、学习及方便使用应用产品的相关功能。

2023.04.19PHP & Web2.0 | Page 18

互联网应用的设计 – 用户界面设计

• User Interface Design ：将视觉设计、用户体验设计转化为产品实现，比如用 HTML 、 CSS 、 JavaScript实现跨浏览器的网页及交互等。

2023.04.19PHP & Web2.0 | Page 19

2023.04.19PHP & Web2.0 | Page 20

Thanks!

Email: zxzhang5 AT mail.ustc.edu.cn

BBS id: howdy

webclub ftp: ftp://210.45.78.124 用户名、密码 : webclub