Website Pracice Focusing on UX, Chinese

. . . . . .

互联网——从设计到用户体验


multiple1902

May 11, 2011

互联网——从设计到用户体验 http://twitter.com/multiple1902

http://twitter.com/multiple1902

. . . . . .


提纲

...1 基础语言基础知识简单的例子HTML5分析网页

...2 交互交互的细节辅助技术数据可视化

...3 总结



. . . . . .

互联网——从设计到用户体验基础语言基础知识

网页和它的源代码

在浏览器中直接浏览页面结构



. . . . . .


网页和它的源代码

在浏览器中直接浏览页面结构

Google Chrome:Ctrl+Shift+C



. . . . . .


网页不只是 HTML

.文本文件..

.

HTMLCSSJavaScript. . .

.数据文件..

.

PNGMP3swf (Flash)flv (Flash Video). . .



. . . . . .


网页不只是 HTML

.文本文件..

.

HTMLCSSJavaScript. . .

.数据文件..

.

PNGMP3swf (Flash)flv (Flash Video). . .



. . . . . .

互联网——从设计到用户体验基础简单的例子

最简单的 HTML 文档

.代码..

.

<head><title>Hello World</title></head><body>Hello World</body>

.解释..

.

head 头部title 显示出来的标题body 网页主体



. . . . . .


用什么编辑器编写网页?

.所见即所得编辑器..

.

Adobe DreamWeaverMicrosoft Expression Web· · ·

设计师使用较多, 可以自动生成许多界面代码, 但不能迷信

.文本编辑器..

.

Notepad++gVIM· · ·

传说中的手写代码



. . . . . .


用什么编辑器编写网页?

.所见即所得编辑器..

.

Adobe DreamWeaverMicrosoft Expression Web· · ·

设计师使用较多, 可以自动生成许多界面代码, 但不能迷信

.文本编辑器..

.

Notepad++gVIM· · ·

传说中的手写代码



. . . . . .


HTML 和 CSS

.一段 CSS..

.

body {background-color:yellow}h1 {background-color:#00ff00}h2 {background-color:transparent}p {background-color:rgb(250,0,255);padding:20px;}

.CSS 的作用..

.

CSS(层叠样式表) 用来规定页面的表现, 用于分离数据和表现

.使用 CSS 的好处..

.只需更换 CSS 就能改变网页的外观



. . . . . .


HTML 和 CSS

.一段 CSS..

.


.CSS 的作用..

.






. . . . . .


HTML 和 CSS

.一段 CSS..

.


.CSS 的作用..

.






. . . . . .

互联网——从设计到用户体验基础

HTML5

下一个版本的 HTML

用于取代 HTML4.01包含了大量的、语义的标签<article> <header> <audio><video> <canvas>还在修订, 但已经受到广泛支持广义的概念包含 CSS 和JavaScript更的交互



. . . . . .

互联网——从设计到用户体验基础分析网页

如何分析一个网页的代码

12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3 <html xmlns="http://www.w3.org/1999/xhtml">4 <head>5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />6 <meta http-equiv="Content-Language" content="zh-cn" />78 <meta name="robots" content="all" />910 <meta name="author" content="w3school.com.cn" />11 <meta name="Copyright" content="Copyright W3school.com.cn All Rights Reserved."

/>12 <meta name="MSSmartTagsPreventParsing" content="true" />13 <meta http-equiv="imagetoolbar" content="false" />1415 <link rel="stylesheet" type="text/css" href="/c3.css" />1617 <title>CSS 教程</title>18 </head>1920 <body class="html">21 <div id="wrapper">2223 <div id="header">24 <a href="/index.html" title="w3school 在线教程" style="float:left;">w3school 在线教程</a>

25 <div id="ad_head">26 <script type="text/javascript">33 </script>34 <script type="text/javascript"35 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">36 </script>37 </div>38 </div>3940 <div id="navfirst">41 <ul id="menu">42 <li id="h"><a href="/h.asp" title="HTML 系列教程">HTML教程</a></li>43 <li id="x"><a href="/x.asp" title="XML 系列教程">XML教程</a></li>44 <li id="b"><a href="/b.asp" title="浏览器脚本系列教程">浏览器脚本</a></li>45 <li id="s"><a href="/s.asp" title="服务器脚本系列教程">服务器脚本</a></li>46 <li id="d"><a href="/d.asp" title=".NET (dotnet) 教程">dot net教程</a></li>47 <li id="m"><a href="/m.asp" title="多媒体系列教程">多媒体教程</a></li>48 <li id="w"><a href="/w.asp" title="网站构建手册">建站手册</a></li>49 </ul>50 </div><div id="navsecond">5152 <div id="course">

建议用浏览器内建的工具Element Inspector / ChromeFirebug / Firefox复杂的网页完整保存较难找主要架构根据特征字符串找关键代码可能在外联文件 (如.js 文件) 中



. . . . . .

互联网——从设计到用户体验交互

垃圾的交互

.启示..

.

与传统媒体不同, 用户有更强的主动权用户找不到要找的内容, 就会选择离开要讨好用户, 设计令人愉快的体验



. . . . . .

互联网——从设计到用户体验交互交互的细节

可以点击的对象

.3 种基本方式..

.

对象本身的静态视觉启示动态改变对象的视觉启示在光标经过对象时改变光标的视觉启示

.启示..

.使可点击的元素看起来都是可点击的



. . . . . .


可以点击的对象

.3 种基本方式..

.

对象本身的静态视觉启示动态改变对象的视觉启示在光标经过对象时改变光标的视觉启示

.启示..

.使可点击的元素看起来都是可点击的



. . . . . .


可以撤销的操作

.启示..

.

危险操作执行前要确认普通操作可以直接执行, 提供撤销功能



. . . . . .


可以变化的提示



. . . . . .


.设计原则...别让用户思考



. . . . . .

互联网——从设计到用户体验交互辅助技术

OAuth



. . . . . .

互联网——从设计到用户体验交互辅助技术

AJAX

让网页活起来一系列技术1998 年左右诞生; GMail 之后, 广泛使用更好的体验



. . . . . .

互联网——从设计到用户体验交互数据可视化

数据可视化是. . .

借助图形化手段，更高效和清晰地交流信息



. . . . . .

互联网——从设计到用户体验总结

相关链接

W3School.com.cn 网页设计教程http://www.w3school.com.cn西乔的九卦http://blog.xiqiao.infoHTML5Rockshttp://slides.html5rocks.com数据之美系列http://is.gd/RRjwJB


http://www.w3school.com.cn

http://blog.xiqiao.info

http://slides.html5rocks.com

http://is.gd/RRjwJB

Website Pracice Focusing on UX, Chinese

Design