狠狠撸

狠狠撸Share a Scribd company logo

Ued交流会 《用户体验杂谈》

?
?
I
iddcn

设计师与前端如何提高用户体验，集团内部对于如何提升用户体验的相关交流会，仅做参考

Convert to study guideBETA

Transform any presentation into a summarized study guide, highlighting the most important points and key insights.

1 of 87
Downloaded 38 times
Matters of Web USER EXPERIENCE For UI Designer & Front-end Engineer Web用户体验杂谈 蒋吉兵 Front-End Department ChinaFace.com 12年7月13日星期五
Me 蒋吉兵 开发主管 Servicing in ChinaFace.com @集冰 jib_jiang@hnair.com 12年7月13日星期五
任何个性化的前提都是满足人们的需求， 这个需求就是要做好用户体验。 —— Steve Jobs 12年7月13日星期五
你一定遇到过 12年7月13日星期五
12年7月13日星期五
世界第九大奇迹——西直门桥 12年7月13日星期五
世界第九大奇迹——西直门桥 12年7月13日星期五
世界第九大奇迹——西直门桥 12年7月13日星期五
鲍齿？ 用户纯主观的产物使用过程中的感受！ 12年7月13日星期五
UX Improving the user’s perception of a product through great architecture and interaction design. 12年7月13日星期五
12年7月13日星期五
CART SIGN ?IN CHECK ?OUT 12年7月13日星期五
12年7月13日星期五
SIGN ?IN CART CHECK ?OUT 12年7月13日星期五
$300 Million SIGN ?IN CART CHECK ?OUT 12年7月13日星期五
？ 设计师和前端工程师 怎样做才能提升用户体验 12年7月13日星期五
从鲍滨设计 产物设计意图 表达一致 —— 排版、控件、版面、色彩、字体等 外观效果 —— 优雅、简练、快速上手、性能 内容为先 —— 重信息、非界面 载体环境 —— 分辨率、终端设备 UX 12年7月13日星期五
产物意图 了解产物需求，参与产物宣讲，给出设计意见和建议； 从鲍滨设计 UX 12年7月13日星期五
产物意图 了解产物需求，参与产物宣讲，给出设计意见和建议； 从鲍滨设计 UX 12年7月13日星期五
产物意图 了解产物需求，参与产物宣讲，给出设计意见和建议； 从鲍滨设计 UX 12年7月13日星期五
产物意图 了解产物需求，参与产物宣讲，给出设计意见和建议； 从鲍滨设计 UX 12年7月13日星期五
产物意图 了解产物需求，参与产物宣讲，给出设计意见和建议； 从鲍滨设计 UX 12年7月13日星期五
表达一致 设计风格确定后，对设计元素应规范并推广使用，严格执行 从鲍滨设计 UX 12年7月13日星期五
表达一致 设计风格确定后，对设计元素应规范并推广使用，严格执行 从鲍滨设计 UX 12年7月13日星期五
表达一致 设计风格确定后，对设计元素应规范并推广使用，严格执行 从鲍滨设计 UX 12年7月13日星期五
表达一致 设计风格确定后，对设计元素应规范并推广使用，严格执行 从鲍滨设计 UX 12年7月13日星期五
表达一致 设计风格确定后，对设计元素应规范并推广使用，严格执行 从鲍滨设计 UX 12年7月13日星期五
外观效果 优雅、简练的设计，用户能较短时间获取信息，同时减少图片 Size给网页加载带来的压力； 从鲍滨设计 UX 12年7月13日星期五
外观效果 优雅、简练的设计，用户能较短时间获取信息，同时减少图片 Size给网页加载带来的压力； 从鲍滨设计 UX 12年7月13日星期五
外观效果 优雅、简练的设计，用户能较短时间获取信息，同时减少图片 Size给网页加载带来的压力； 从鲍滨设计 UX 12年7月13日星期五
外观效果 优雅、简练的设计，用户能较短时间获取信息，同时减少图片 Size给网页加载带来的压力； 从鲍滨设计 UX 12年7月13日星期五
外观效果 优雅、简练的设计，用户能较短时间获取信息，同时减少图片 Size给网页加载带来的压力； 从鲍滨设计 UX 12年7月13日星期五
内容为先 先内容，后(轻)设计，重视信息展示；同样适用于广告设计 从鲍滨设计 UX 12年7月13日星期五
内容为先 先内容，后(轻)设计，重视信息展示；同样适用于广告设计 从鲍滨设计 UX 12年7月13日星期五
内容为先 先内容，后(轻)设计，重视信息展示；同样适用于广告设计 从鲍滨设计 UX 12年7月13日星期五
内容为先 先内容，后(轻)设计，重视信息展示；同样适用于广告设计 从鲍滨设计 UX 12年7月13日星期五
内容为先 先内容，后(轻)设计，重视信息展示；同样适用于广告设计 从鲍滨设计 UX 12年7月13日星期五
载体环境 有依据地选定主流分辨率、终端和浏览器 从鲍滨设计 UX 12年7月13日星期五
载体环境 有依据地选定主流分辨率、终端和浏览器 从鲍滨设计 UX 12年7月13日星期五
载体环境 有依据地选定主流分辨率、终端和浏览器 从鲍滨设计 UX 12年7月13日星期五
载体环境 有依据地选定主流分辨率、终端和浏览器 从鲍滨设计 UX 12年7月13日星期五
从前端开发 产物设计意图 Web性能 —— 加载、运行、稳定性 表现一致 —— 外观、组件、操作 兼容性 —— 优雅降级、渐进增强 易用性 —— 简单、快速上手 适应性 —— 分辨率、终端设备 UX 12年7月13日星期五
‘微’言耸听 一个日收入 10 万美元的电子商务网站，加载速度每延迟 1 秒 钟，将会导致转化率下降 7% ，使该网站每年损失 250 万美元 如果网页加载时间超过4秒，约有四分之一的人会放弃打开该网页 如果网页加载时间超过10秒，50%的移动用户会放弃该网页，约 五分之三的人不会再返回该网站 从前端开发 UX 12年7月13日星期五
奥别产性能优化背后 1）加载>4秒,1/4的用户立即跳出 2）移动设备加载速度较慢，用户耐心却没有延长 3）将会有越来越多的移动终端 4）60%的用户不会再次访问出现加载错误的网站 5) 对于电商加载慢就像排队 6）口碑效应 7）转化率损失 从前端开发 UX 12年7月13日星期五
表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
兼容性 面对如此众多浏览器，从数据上focus主流用户群，适当减少 或放弃对小众浏览器兼容；高级浏览器上使用更眩的效果，引 导用户向标准浏览器转化； 时常更新专业知识，减少产生兼容问题的几率，规矩做事 从前端开发 UX 12年7月13日星期五
兼容性 面对如此众多浏览器，从数据上focus主流用户群，适当减少 或放弃对小众浏览器兼容；高级浏览器上使用更眩的效果，引 导用户向标准浏览器转化； 时常更新专业知识，减少产生兼容问题的几率，规矩做事 从前端开发 UX 12年7月13日星期五
易用性 简化交互步骤，减少学习成本，简单、自然、直接； 选择最适合交互场景的解决方案，勿唯前端论； 从前端开发 UX 12年7月13日星期五
适应性 熟悉Web浏览环境的分辨率和特性，并充分利用 从前端开发 UX 12年7月13日星期五
适应性 熟悉Web浏览环境的分辨率和特性，并充分利用 从前端开发 UX 12年7月13日星期五
适应性 熟悉Web浏览环境的分辨率和特性，并充分利用 从前端开发 UX 12年7月13日星期五
Responsive Design 响应式设计 It is the design of a website that adapts itself to the to the user’s behavior based on screen size, platform and orientation 12年7月13日星期五
什么情况下选择响应式设计 无专门Native App开发团队 节省开发和预算成本 兼容新设备，无需针对某种规格进行维护 响应式设计 12年7月13日星期五
设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
设计中的经验和原则 尽量保持小屏幕规格样式的简洁; － 在UI元素风格方面，可以多与前端开发人员交流，尽量采用可以通过 CSS3实现的常规风格样式，减少背景图片的使用。 保证内容的字体字号可读，尤其是在手机上; 最终产出的页面必定会与视觉稿有所出入; 设计师与开发者之间的交流与沟通更重要，尽可能早的发现各 类潜在问题。 响应式设计 12年7月13日星期五
前端开发时需要注意 充分了解HTML、CSS新特性； 图片尺寸选择最适合移动端的； 充分使用CSS3还原视觉特效； 利用移动设备特效完成交互功能实现； 让Web简单、快速、易上手； 充分沟通。 响应式设计 12年7月13日星期五
附： 设计原则 ChinaFace前端架构 12年7月13日星期五
用户体验优化中的设计原则 主次原则 统一原则 直接原则 少做原则 反馈原则 对称原则 来自互联网UX 12年7月13日星期五
主次原则 内容比较多，可放空间少，主要的内容先显示，次要的内容搁置在“更多”里。 设计原则案例 UX 12年7月13日星期五
主次原则 人人 开心 面临好几个操作时，我们也要分清主次，分清哪些是我们提倡用户操作的，哪些 是我们不提倡用户操作的，同时，对于提倡用户操作的也要进一步分清主次。 设计原则案例 UX 12年7月13日星期五
直接原则 开心 CF 能在当前页面完成操作的尽量在当前页面完成 设计原则案例 UX 12年7月13日星期五
统一原则 开心 人人 保证全站样式统一，降低用户认知难度 设计原则案例 UX 12年7月13日星期五
少做原则 微博 CF CF 让用户选择大于让用户输入，尽量做成让用户可以选择，降低难度 设计原则案例 UX 12年7月13日星期五
反馈原则 酷讯 CF 鼠标悬停 鼠标悬停 尽量对每个操作能做到人机交互反馈，让用户清楚知道目前的状态，减少疑惑。 设计原则案例 UX 12年7月13日星期五
对称原则 CF 展开与收起是对称的功能，有依存关系，展开后能收起，收起后能展开，用户能 及时返回原来的操作 设计原则案例 UX 12年7月13日星期五
颁丑颈苍补贵补肠别的前端技术体系 Base Document YUI3 Grid Eva Eva UI组件库 Structure Moca 应用模块 模块HTML Element Smarty 引用模块资源 Module Usage LessPHP Moca less 开发框架 模块引擎 工具 YUI ?Loader Photoshop Vim 模块CSS Emeditor Minify 组件JS Sublime 兼容性 测试 Editplus JS单元 开发 项目资源 Yslow WebPageTest.com SVN 性能监测 PageSpeed Vanish DynaTrace CDN Fiddler Smush.it Firebug 品质保障 JSLint 调试 Developer Tools CodeReview Visual Studio UX 12年7月13日星期五
前端框架 $arrow { top(@arrowWidth: 5px, @color: @black) { bottom: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-top: @arrowWidth solid @color; } left(@arrowWidth: 5px, @color: @black) { top: 50%; right: 0; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @color; } bottom(@arrowWidth: 5px, @color: @black) { top: 0; left: 50%; Eva.require('ebase').ready(function(Y){ margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; Y.log(Y.one('body')) border-right: @arrowWidth solid transparent; border-bottom: @arrowWidth solid @color; } right(@arrowWidth: 5px, @color: @black) { }); top: 50%; left: 0; UX 12年7月13日星期五 margin-top: -@arrowWidth;
前端框架 $arrow { top(@arrowWidth: 5px, @color: @black) { bottom: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-top: @arrowWidth solid @color; } left(@arrowWidth: 5px, @color: @black) { top: 50%; right: 0; Javascript UI Library margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @color; } bottom(@arrowWidth: 5px, @color: @black) { top: 0; left: 50%; Eva.require('ebase').ready(function(Y){ margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; Y.log(Y.one('body')) border-right: @arrowWidth solid transparent; border-bottom: @arrowWidth solid @color; } right(@arrowWidth: 5px, @color: @black) { }); top: 50%; left: 0; UX 12年7月13日星期五 margin-top: -@arrowWidth;
前端框架 $arrow { top(@arrowWidth: 5px, @color: @black) { bottom: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-top: @arrowWidth solid @color; } left(@arrowWidth: 5px, @color: @black) { top: 50%; right: 0; Javascript UI Library margin-top: -@arrowWidth; CSS Framework border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @color; } bottom(@arrowWidth: 5px, @color: @black) { top: 0; left: 50%; Eva.require('ebase').ready(function(Y){ margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; Y.log(Y.one('body')) border-right: @arrowWidth solid transparent; border-bottom: @arrowWidth solid @color; } right(@arrowWidth: 5px, @color: @black) { }); top: 50%; left: 0; UX 12年7月13日星期五 margin-top: -@arrowWidth;
前端环境部署 sources 本地环境 debug 开发环境 SVN debug 测试环境 compress 环境 模拟CDN本地开发 Apache 2（vhost） 预发布环境 compress、cache PHP 5 hosts Vanish sync cache file cache file CDN r.chinaface.com UX 12年7月13日星期五
前端文档规范 文件组织 前端周报 命名规范 项目管理 编程规范 F2E ?Doc 规范 wiki 接口文档 wd.org wiki.chinaface.com 模块指南 分享培训 前端安全 学习文档 UX 12年7月13日星期五
展望 HTML5 移动互联网 Web App Hybrid App UX 12年7月13日星期五
！ UI设计是一门“语言”艺术 前端开发也不例外 理论和运营数据分析结合是用户体验持续 改进的依据 12年7月13日星期五
12年7月13日星期五
12年7月13日星期五

More Related Content

Ued交流会 《用户体验杂谈》

  • 1. Matters of Web USER EXPERIENCE For UI Designer & Front-end Engineer Web用户体验杂谈 蒋吉兵 Front-End Department ChinaFace.com 12年7月13日星期五
  • 2. Me 蒋吉兵 开发主管 Servicing in ChinaFace.com @集冰 jib_jiang@hnair.com 12年7月13日星期五
  • 3. 任何个性化的前提都是满足人们的需求， 这个需求就是要做好用户体验。 —— Steve Jobs 12年7月13日星期五
  • 9. 鲍齿？ 用户纯主观的产物使用过程中的感受！ 12年7月13日星期五
  • 10. UX Improving the user’s perception of a product through great architecture and interaction design. 12年7月13日星期五
  • 12. CART SIGN ?IN CHECK ?OUT 12年7月13日星期五
  • 14. SIGN ?IN CART CHECK ?OUT 12年7月13日星期五
  • 15. $300 Million SIGN ?IN CART CHECK ?OUT 12年7月13日星期五
  • 16. ？ 设计师和前端工程师 怎样做才能提升用户体验 12年7月13日星期五
  • 17. 从鲍滨设计 产物设计意图 表达一致 —— 排版、控件、版面、色彩、字体等 外观效果 —— 优雅、简练、快速上手、性能 内容为先 —— 重信息、非界面 载体环境 —— 分辨率、终端设备 UX 12年7月13日星期五
  • 18. 产物意图 了解产物需求，参与产物宣讲，给出设计意见和建议； 从鲍滨设计 UX 12年7月13日星期五
  • 19. 产物意图 了解产物需求，参与产物宣讲，给出设计意见和建议； 从鲍滨设计 UX 12年7月13日星期五
  • 20. 产物意图 了解产物需求，参与产物宣讲，给出设计意见和建议； 从鲍滨设计 UX 12年7月13日星期五
  • 21. 产物意图 了解产物需求，参与产物宣讲，给出设计意见和建议； 从鲍滨设计 UX 12年7月13日星期五
  • 22. 产物意图 了解产物需求，参与产物宣讲，给出设计意见和建议； 从鲍滨设计 UX 12年7月13日星期五
  • 23. 表达一致 设计风格确定后，对设计元素应规范并推广使用，严格执行 从鲍滨设计 UX 12年7月13日星期五
  • 24. 表达一致 设计风格确定后，对设计元素应规范并推广使用，严格执行 从鲍滨设计 UX 12年7月13日星期五
  • 25. 表达一致 设计风格确定后，对设计元素应规范并推广使用，严格执行 从鲍滨设计 UX 12年7月13日星期五
  • 26. 表达一致 设计风格确定后，对设计元素应规范并推广使用，严格执行 从鲍滨设计 UX 12年7月13日星期五
  • 27. 表达一致 设计风格确定后，对设计元素应规范并推广使用，严格执行 从鲍滨设计 UX 12年7月13日星期五
  • 28. 外观效果 优雅、简练的设计，用户能较短时间获取信息，同时减少图片 Size给网页加载带来的压力； 从鲍滨设计 UX 12年7月13日星期五
  • 29. 外观效果 优雅、简练的设计，用户能较短时间获取信息，同时减少图片 Size给网页加载带来的压力； 从鲍滨设计 UX 12年7月13日星期五
  • 30. 外观效果 优雅、简练的设计，用户能较短时间获取信息，同时减少图片 Size给网页加载带来的压力； 从鲍滨设计 UX 12年7月13日星期五
  • 31. 外观效果 优雅、简练的设计，用户能较短时间获取信息，同时减少图片 Size给网页加载带来的压力； 从鲍滨设计 UX 12年7月13日星期五
  • 32. 外观效果 优雅、简练的设计，用户能较短时间获取信息，同时减少图片 Size给网页加载带来的压力； 从鲍滨设计 UX 12年7月13日星期五
  • 33. 内容为先 先内容，后(轻)设计，重视信息展示；同样适用于广告设计 从鲍滨设计 UX 12年7月13日星期五
  • 34. 内容为先 先内容，后(轻)设计，重视信息展示；同样适用于广告设计 从鲍滨设计 UX 12年7月13日星期五
  • 35. 内容为先 先内容，后(轻)设计，重视信息展示；同样适用于广告设计 从鲍滨设计 UX 12年7月13日星期五
  • 36. 内容为先 先内容，后(轻)设计，重视信息展示；同样适用于广告设计 从鲍滨设计 UX 12年7月13日星期五
  • 37. 内容为先 先内容，后(轻)设计，重视信息展示；同样适用于广告设计 从鲍滨设计 UX 12年7月13日星期五
  • 38. 载体环境 有依据地选定主流分辨率、终端和浏览器 从鲍滨设计 UX 12年7月13日星期五
  • 39. 载体环境 有依据地选定主流分辨率、终端和浏览器 从鲍滨设计 UX 12年7月13日星期五
  • 40. 载体环境 有依据地选定主流分辨率、终端和浏览器 从鲍滨设计 UX 12年7月13日星期五
  • 41. 载体环境 有依据地选定主流分辨率、终端和浏览器 从鲍滨设计 UX 12年7月13日星期五
  • 42. 从前端开发 产物设计意图 Web性能 —— 加载、运行、稳定性 表现一致 —— 外观、组件、操作 兼容性 —— 优雅降级、渐进增强 易用性 —— 简单、快速上手 适应性 —— 分辨率、终端设备 UX 12年7月13日星期五
  • 43. ‘微’言耸听 一个日收入 10 万美元的电子商务网站，加载速度每延迟 1 秒 钟，将会导致转化率下降 7% ，使该网站每年损失 250 万美元 如果网页加载时间超过4秒，约有四分之一的人会放弃打开该网页 如果网页加载时间超过10秒，50%的移动用户会放弃该网页，约 五分之三的人不会再返回该网站 从前端开发 UX 12年7月13日星期五
  • 44. 奥别产性能优化背后 1）加载>4秒,1/4的用户立即跳出 2）移动设备加载速度较慢，用户耐心却没有延长 3）将会有越来越多的移动终端 4）60%的用户不会再次访问出现加载错误的网站 5) 对于电商加载慢就像排队 6）口碑效应 7）转化率损失 从前端开发 UX 12年7月13日星期五
  • 45. 表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
  • 46. 表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
  • 47. 表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
  • 48. 表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
  • 49. 表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
  • 50. 表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
  • 51. 表现一致性 组件化，颗粒化展示、功能，形成DPL 从前端开发 UX 12年7月13日星期五
  • 52. 兼容性 面对如此众多浏览器，从数据上focus主流用户群，适当减少 或放弃对小众浏览器兼容；高级浏览器上使用更眩的效果，引 导用户向标准浏览器转化； 时常更新专业知识，减少产生兼容问题的几率，规矩做事 从前端开发 UX 12年7月13日星期五
  • 53. 兼容性 面对如此众多浏览器，从数据上focus主流用户群，适当减少 或放弃对小众浏览器兼容；高级浏览器上使用更眩的效果，引 导用户向标准浏览器转化； 时常更新专业知识，减少产生兼容问题的几率，规矩做事 从前端开发 UX 12年7月13日星期五
  • 54. 易用性 简化交互步骤，减少学习成本，简单、自然、直接； 选择最适合交互场景的解决方案，勿唯前端论； 从前端开发 UX 12年7月13日星期五
  • 55. 适应性 熟悉Web浏览环境的分辨率和特性，并充分利用 从前端开发 UX 12年7月13日星期五
  • 56. 适应性 熟悉Web浏览环境的分辨率和特性，并充分利用 从前端开发 UX 12年7月13日星期五
  • 57. 适应性 熟悉Web浏览环境的分辨率和特性，并充分利用 从前端开发 UX 12年7月13日星期五
  • 58. Responsive Design 响应式设计 It is the design of a website that adapts itself to the to the user’s behavior based on screen size, platform and orientation 12年7月13日星期五
  • 59. 什么情况下选择响应式设计 无专门Native App开发团队 节省开发和预算成本 兼容新设备，无需针对某种规格进行维护 响应式设计 12年7月13日星期五
  • 60. 设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
  • 61. 设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
  • 62. 设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
  • 63. 设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
  • 64. 设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
  • 65. 设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
  • 66. 设计流程 用户研究与设备规格预估 制作线框原型 视觉设计 前端开发 http://beforweb.com/node/21/page/0/2 响应式设计 12年7月13日星期五
  • 67. 设计中的经验和原则 尽量保持小屏幕规格样式的简洁; － 在UI元素风格方面，可以多与前端开发人员交流，尽量采用可以通过 CSS3实现的常规风格样式，减少背景图片的使用。 保证内容的字体字号可读，尤其是在手机上; 最终产出的页面必定会与视觉稿有所出入; 设计师与开发者之间的交流与沟通更重要，尽可能早的发现各 类潜在问题。 响应式设计 12年7月13日星期五
  • 68. 前端开发时需要注意 充分了解HTML、CSS新特性； 图片尺寸选择最适合移动端的； 充分使用CSS3还原视觉特效； 利用移动设备特效完成交互功能实现； 让Web简单、快速、易上手； 充分沟通。 响应式设计 12年7月13日星期五
  • 69. 附： 设计原则 ChinaFace前端架构 12年7月13日星期五
  • 70. 用户体验优化中的设计原则 主次原则 统一原则 直接原则 少做原则 反馈原则 对称原则 来自互联网UX 12年7月13日星期五
  • 71. 主次原则 内容比较多，可放空间少，主要的内容先显示，次要的内容搁置在“更多”里。 设计原则案例 UX 12年7月13日星期五
  • 72. 主次原则 人人 开心 面临好几个操作时，我们也要分清主次，分清哪些是我们提倡用户操作的，哪些 是我们不提倡用户操作的，同时，对于提倡用户操作的也要进一步分清主次。 设计原则案例 UX 12年7月13日星期五
  • 73. 直接原则 开心 CF 能在当前页面完成操作的尽量在当前页面完成 设计原则案例 UX 12年7月13日星期五
  • 74. 统一原则 开心 人人 保证全站样式统一，降低用户认知难度 设计原则案例 UX 12年7月13日星期五
  • 75. 少做原则 微博 CF CF 让用户选择大于让用户输入，尽量做成让用户可以选择，降低难度 设计原则案例 UX 12年7月13日星期五
  • 76. 反馈原则 酷讯 CF 鼠标悬停 鼠标悬停 尽量对每个操作能做到人机交互反馈，让用户清楚知道目前的状态，减少疑惑。 设计原则案例 UX 12年7月13日星期五
  • 77. 对称原则 CF 展开与收起是对称的功能，有依存关系，展开后能收起，收起后能展开，用户能 及时返回原来的操作 设计原则案例 UX 12年7月13日星期五
  • 78. 颁丑颈苍补贵补肠别的前端技术体系 Base Document YUI3 Grid Eva Eva UI组件库 Structure Moca 应用模块 模块HTML Element Smarty 引用模块资源 Module Usage LessPHP Moca less 开发框架 模块引擎 工具 YUI ?Loader Photoshop Vim 模块CSS Emeditor Minify 组件JS Sublime 兼容性 测试 Editplus JS单元 开发 项目资源 Yslow WebPageTest.com SVN 性能监测 PageSpeed Vanish DynaTrace CDN Fiddler Smush.it Firebug 品质保障 JSLint 调试 Developer Tools CodeReview Visual Studio UX 12年7月13日星期五
  • 79. 前端框架 $arrow { top(@arrowWidth: 5px, @color: @black) { bottom: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-top: @arrowWidth solid @color; } left(@arrowWidth: 5px, @color: @black) { top: 50%; right: 0; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @color; } bottom(@arrowWidth: 5px, @color: @black) { top: 0; left: 50%; Eva.require('ebase').ready(function(Y){ margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; Y.log(Y.one('body')) border-right: @arrowWidth solid transparent; border-bottom: @arrowWidth solid @color; } right(@arrowWidth: 5px, @color: @black) { }); top: 50%; left: 0; UX 12年7月13日星期五 margin-top: -@arrowWidth;
  • 80. 前端框架 $arrow { top(@arrowWidth: 5px, @color: @black) { bottom: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-top: @arrowWidth solid @color; } left(@arrowWidth: 5px, @color: @black) { top: 50%; right: 0; Javascript UI Library margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @color; } bottom(@arrowWidth: 5px, @color: @black) { top: 0; left: 50%; Eva.require('ebase').ready(function(Y){ margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; Y.log(Y.one('body')) border-right: @arrowWidth solid transparent; border-bottom: @arrowWidth solid @color; } right(@arrowWidth: 5px, @color: @black) { }); top: 50%; left: 0; UX 12年7月13日星期五 margin-top: -@arrowWidth;
  • 81. 前端框架 $arrow { top(@arrowWidth: 5px, @color: @black) { bottom: 0; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; border-top: @arrowWidth solid @color; } left(@arrowWidth: 5px, @color: @black) { top: 50%; right: 0; Javascript UI Library margin-top: -@arrowWidth; CSS Framework border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @color; } bottom(@arrowWidth: 5px, @color: @black) { top: 0; left: 50%; Eva.require('ebase').ready(function(Y){ margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; Y.log(Y.one('body')) border-right: @arrowWidth solid transparent; border-bottom: @arrowWidth solid @color; } right(@arrowWidth: 5px, @color: @black) { }); top: 50%; left: 0; UX 12年7月13日星期五 margin-top: -@arrowWidth;
  • 82. 前端环境部署 sources 本地环境 debug 开发环境 SVN debug 测试环境 compress 环境 模拟CDN本地开发 Apache 2（vhost） 预发布环境 compress、cache PHP 5 hosts Vanish sync cache file cache file CDN r.chinaface.com UX 12年7月13日星期五
  • 83. 前端文档规范 文件组织 前端周报 命名规范 项目管理 编程规范 F2E ?Doc 规范 wiki 接口文档 wd.org wiki.chinaface.com 模块指南 分享培训 前端安全 学习文档 UX 12年7月13日星期五
  • 84. 展望 HTML5 移动互联网 Web App Hybrid App UX 12年7月13日星期五
  • 85. ！ UI设计是一门“语言”艺术 前端开发也不例外 理论和运营数据分析结合是用户体验持续 改进的依据 12年7月13日星期五