设计与前端培训

1. 设计& 前端 久隆信息/ CMS事业部/ 房将 2010.9.20

2. UI设计流程 一般公司只将把UI设计流程分为四个简单的阶段：分析、设计、配合、验证。 需求分析：如果说设计原则是所有设计的出发点的话，那么用户需求就是本次设计的出发点。用户场景模拟：好的设计建立在对用户深刻了解之上。因此用户使用场景分析就很重要，了解产品的现有交互以及用户使用产品习惯等，但是设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。竞品分析（聆听用户心声）：竞争产品能够上市并且被UI设计者知道，必然有其长处。每个设计者的思维都有局限性，看到别 人的设计会有触类旁通的好处。当市场上存在竞品时，去听听用户的评论，哪怕是骂声都好，别沉迷于自己的设计中，让真正的用户说话。

3. 产品UI设计中夹杂着许多设计原则要求，统一公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设 计的流程规范化，保证UI设计流程的可操作性。 。

4. 公司VI(LOGO,标准色等) 用户需求 行业特性 阅读人群(年龄文化层次) UI设计要素 竟品分析 用户角色(老板理 还是员工) 内容才是王道 色彩搭配

5. 需求原型 需求文案 用户需求 需求描述 需求定位

6. 关于原型框架图： 有头有尾 有主次的 可以理解的 需求文档（Axure） 原型图： 1、不一定要多美观 2、逻辑顺序要清楚 3、内容要全面 ……

7. 关于“设计” 风格定位精准 内容、图形和色彩关系处理，心神合一

8. 关于风格定位精准 专题或系统目的 用户偏好 专题设计 系统设计 用 户 群 体 年 龄 性 别 习 惯 爱 好 心 理 特 质

9. 关于内容、图形、色彩之间的关系处理 案例：展示类专题 专题三 专题二 专题一 一至上而下的阅读习惯二 重要内容凸显，次要内容弱化 三 你不一定看内容，但你一定知道它是做什么的

10. 色彩规范： 色彩构成（Interaction of color），可以理解为色彩的作用，是在色彩科学体系的基础上，研究符合人们知觉和心理原则的配色。配色有三类要素：光学要素（明度、色相、纯度），存在条件（面积、形状、肌理、位置），心理因素（冷暖、进退、轻重、软硬、朴素华丽），设计的时候运用逻辑思维选择合适的色彩搭配，产生恰当的色彩构成。最优秀的配色范本是自然界里的配色，我们观察自然界里的配色，通过理性的提炼最终获得我们所需要的东西。 小面积用强色，大面积用弱色 白色 正面：雪花，纯静，清白，和平，轻盈, 纯洁、 天真、洁净、真理、 反面：寒冷，受伤，弱点，放弃, 冷淡、 贫乏，死寂 黑色 正面：夜晚，煤碳，能力，稳定，拘谨， 可靠，能力，精致 反面：害怕，无效，死亡，秘密，阴险， 邪恶，病态 红色 正面：胜利 激情 爱 力 精力 性别 热情、浪漫 否定：血 战争 火 危险 怒 撒旦火焰、暴力、 黄色 正面：明亮、光辉、黄金 收获 改革 否定：懦弱 叛逆 嫉妒 冒险 疾病 愚蠢 绿色 正面：植物，自然，春天，肥沃，希望, 安全 自然、稳定、成长、 反面：衰变，无经验，羡慕，贪欲 蓝色 正面：天空，海洋，精神性，定度，个体 忠诚、 安全、保守、宁静、冷漠、悲伤 否定： 寒冷，沮丧，忧郁，淫秽，神秘, 保守主义

11. 案例分析

12. 两个注册？什么关系 你对banner的第一感觉是什么？ 升国旗？庄严？ 栏目的层级关系？

13. 视觉改进： 1、banner角色定位，因是会计产品营销，用户群体多数是女性 2、两个注册按钮引起混淆，装饰花纹影响按钮的凸显效果 3、栏目标题不清晰，影响重要层级的展示和逻辑关系的理解

14. 设计，还可以更好吗？ 好在哪里？ 1、标题的处理，有主有次，用词更精准 2、免费使用6个月，更具营销诱惑性 3、字体质感和造型更具动感且醒目，字和笔记本造型呼应，整体感更强 人物的选择及效果处理： 下图的人物更时尚靓丽，且色彩倾向做了处理，上图人物冷色，和背景色不够协调； 下图的三角投影模拟工作台，和内容版块造型结合，元素之间的关系处理更统一。

15. 噢，还可以更好吗？ 下图在标题、人物、辅助图形、文字信息、栏目的处理上更胜一筹！所有元素形成一个整体，形式感和视觉冲击力更强；色彩也更漂亮。

16. 前端制作 前言前端是庞大的，包括HTML、CSS、Javascript、 Image、Flash等等各种各样的资源.HTML5与CSS3将是全球互联网发展的未来趋势。

17. Css的基本规则 Css规则告诉浏览器如何去渲染HTML页面上特定的元素. CSS规则有五部分组成: 选择器:”选择”受此规则影响的HTML 页面上的元素 . 声明部分:是由一对大括号以及其中任 意内容组成的容器.

18. 声明:告诉浏览器如何去渲染页面上被选种的元素. 属性:是指你选种元素的样式外观. 值:是你希望给属性设置的准确样式.

19. Css盒模型

20. 创建高效、可维护、组件化的CSS 使用外联样式代替行间样式或者内嵌样式. 代替

21. 使用继承 代替

22. 使用多重选择器 代替 使用多重声明 代替

23. 使用简记属性 代替

24. 如何让(后续)维护你站点的人更容易理解你的样式代码 在样式表开头添加一个注释块,用以描述这个样式表的创建日期建者记等备注信息,如: /* ----------------------- 创建日期:2010-09-20 创建者:房将 站点名称:客户关系评价系统 ------------------------ */

25. 给CLASS和ID进行有意义的命名 我们习惯在CSS命名的时候掺杂语义，这样可以让代码更易懂。例如淘宝首页“免费注册”按钮上的class名称：help-guest-regist.

26. 如何管理整站的CSS文件 组件化css.

27. 如何管理整站的CSS文件 组件化css.

28. 如何处理浏览器兼容性问题 有很多人喜欢用CSS hack来解决问题.问题是当IE版本升级更替,改进对CSS的支持以后,之前使用的HACK将会无效. 我们在不使用CSS HACK的情况下,可以针对IE或者避开IE,使用”条件注释”. 例如:

30. 为什么条件注释是一个好的解决方案

31. 团队配合沟通 在这段时间做的项目里面,也发现一些问题,我认为大部分还是沟通方面的问题比较多一些,可能是大家的使用习惯不同,因此我还是希望大家在项目开始前能做一些有效的沟通,制订一些统一的规范,比如: 一用TABLE还是用DIV 二 CSS的统一命名规范 三 切片时对图片的特殊要求 四 是用IFRAME还是把代码写一个页面

32. 没有最好，只有更好！ 好好学习，天天向上！ 谢谢！