谈谈网页中的“信息”.

Presentation on theme: "谈谈网页中的“信息”."— Presentation transcript:

1 谈谈网页中的“信息”

2 倪栩生 @x 微信UI开发 微信开放平台、公众平台、小程序后台

3 谈谈网页中的“信息”

4 你是做什么的？

5

6 UI开发是网页开发的一个环节 我们就是工匠，网页是我们的艺术品，规范与库是我们的工具

7 ACSS Amaze UI BootMetro Alloy UI BEM Bootstrap Flat UI NEC Materialize SMACSS PureCSS WeUI Semantic UI OOCSS Foundaion ……

8

9 “ The dream behind the Web is of a common information space in which we communicate by sharing information. ” 网页是我们共享信息的平台

10 信息与网页的关系 网页的特征 信息在网页中的形态

11 信息与网页的关系 网页的特征 信息在网页中的形态

12 信息与网页的关系 信息与信息的联系形成上下文 网页是信息上下文的情景重现

13 信息与信息的联系形成上下文

14 小桥、流水、人家

15

16

17 网页是信息上下文的情景重现

18

19

20 256 元 256 元

21 信息与网页的关系 网页的特征 信息在网页中的形态

22 网页的特征 跨平台 可访问 可用

23 网页的特征：跨平台

24

25 网页的特征：可访问

26 VoiceOver 单击 双击 左右滑动 选中并读出元素 执行操作 选中并读出上下项 两指下滑 三指滑动 …… 向下读出所有内容 滚屏

27 网页的特征：可用

28

29

30

31 普通用户的体验 免费状态

32 普通用户的体验 付费状态

33 全色盲用户的体验 免费状态

34 全色盲用户的体验 付费状态

35 增加对比度，提升体验

36 全色盲朋友眼中的按钮 免费状态

37 全色盲朋友眼中的按钮 付费状态

38 信息与网页的关系 网页的特征 信息在网页中的形态

39 信息在网页中的形态 意识形态：元信息组成的上下文 实体形态：标记组成的上下文 表现形态：样式组成的上下文

40 信息的意识形态 信息的意识形态：元信息组成的上下文 一个信息有且只有一种意识形态 每种意识形态对应一个元信息上下文

41 公众号文章

42 公众号文章的元信息 标题 公众号 作者 日期 正文 ……

43 信息的实体形态 信息的实体形态：标记组成的上下文

44

45 信息的实体形态 一个信息有多种实体形态 每种实体形态对应一个标记上下文

46 一个信息有多种实体形态 HTML 的语义 HTML 的嵌套

47 不同的语义，信息的实体形体是不同的

48

49 “ 我是要成为海贼王的男人 ”

50 “ 我是要成为海贼王的男人 ”

51

52 信息的实体形态是不同，也来自于HTML的嵌套

53

54

55

56

57 信息的表现形态 信息的表现形态：样式组成的上下文

58

59 信息的表现形态 一个信息有多种表现形态 每种表现形态可对应多个样式上下文 表现形态通过选择器与实体形态关联

60 一个信息有多种表现形态

61

62

63 每种表现形态可对应多个样式上下文

64 不同的样式上下文 flex absolute float inline block table cell ……

65 表现形态通过选择器与实体形态关联

66

67

68 一个完整的例子

69

70 意识形态 标题 公众号 作者 日期 正文 ……

71 实体形态

72 表现形态

73 回顾 信息与网页的关系 网页的特征 信息在网页中的形态

74

75 Q & A

76 Thank you

77