创业没有设计师,如何设计

871c4ba6d25169779cee977e04b2f0c3?s=47 saber
December 01, 2012

 创业没有设计师,如何设计

saberma 在 RubyConfChina 2012 演讲主题

871c4ba6d25169779cee977e04b2f0c3?s=128

saber

December 01, 2012
Tweet

Transcript

  1. 创业,没有设计师,如何设计 马海波 @saberma

  2. v3.0 ShopQi

  3. 哪个设计流程最合适? 基于模板 1 规范流程 2 精简流程 3

  4. LiveReload

  5. 字体 排版 实现 颜色

  6. color:#4F81BD

  7. None
  8. 哪种颜色 1 深浅如何 2 明暗如何 3

  9. 人性化的 HSL

  10. 色相H 1 饱和度S 2 明度L 3

  11. hsl(213,45%,33%) hsl(213,45%,73%) #4F81BD hsl(213,45%,53%)

  12. color: #4F81BD; .CSS color: hsl(213, 45%, 53%); .SCSS

  13. 怎么确定用哪种颜色? 知道了如何表示颜色,

  14. 心理暗示 红色 激情、爱情、鲜血、能量、 热心、热诚、激动、热量、力量、 热情、积极、前进、活力;侵略性、 愤怒、战争、革命、残忍、不道德、 危险、禁止、幼稚、卑俗 橙色 跟楼上类似… 黄色

    … 绿色 … 蓝色 … 紫色 …
  15. 电商偏爱 红色 京东 天猫 凡客

  16. 红色 热闹、喜庆、红火 HOT

  17. 技术偏爱 蓝色 ITEYE ChinaUnix cnBeta

  18. 蓝色 科技 、效率、稳重 COLD

  19. 这种颜色要怎么搭配?

  20. 优先使用单色搭配 HSL (30′, 100%, 50%) HSL (30′, 100%, 63%) HSL

    (30′, 100%, 73%) HSL (30′, 100%, 33%)
  21. 频道 背景 链接 图标

  22. $link-color: hsl(200, 100%, 50%); $link-hover-color: hsl(200, 100%, 30%); @import "h5bp/normalize";

    $link-color: hsl(200, 100%, 50%); # $link-hover-color: hsl(200, 100%, 30%); $link-hover-color: darken($link-color, 20%); @import "h5bp/normalize"; 这是一个链接 这是一个链接 .SCSS
  23. 逐步考虑双色搭配 HSL (30′, 100, 50) HSL (30′, 100, 63) HSL

    (30′, 100, 73) HSL (30′, 100, 33) HSL (10′, 100, 50)
  24. 频道 背景 链接 图标 突出

  25. 颜色 排版 实现 字体

  26. font-family: sans-serif;

  27. serif sans-serif

  28. serif sans-serif

  29. 浏览器默认字体设置 font-family: sans-serif; 宋体

  30. ruby on rails Font#1 ruby on rails Font#2 ruby on

    rails Font#3 你最不喜欢哪个字体?
  31. ruby on rails 宋体 ruby on rails Georgia ruby on

    rails Arial
  32. font-family: arial,sans-serif;

  33. None
  34. 1.Ruby is Great 1.Ruby is Great 眼力大测试

  35. font-family: Helvetica,arial,sans-serif; font-family:Helvetica Neue,Helvetica,arial,sans-serif;

  36. Logo的字体怎么选?

  37. None
  38. None
  39. 颜色 字体 实现 排版

  40. 四大设计原则 重复 对齐 对比 分组

  41. Ruby让你编程更快乐 1993.02.24 人们特别是电脑工程师们,常常从机器着想。他们认为: “这样做,机器就能运行的更快;这样做,机器运行效 率更高;这样做,机器就会怎样怎样怎样。 @Matz Ruby让你编程更快乐 1993.02.24 人们特别是电脑工程师们,常常从机器着想。他们认为: “这样做,机器就能运行的更快;这样做,机器运行效

    率更高;这样做,机器就会怎样怎样怎样。 @Matz
  42. 四大设计原则 重复 对齐 对比 分组

  43. None
  44. Ruby让你 编程更快乐 @Matz 1993.02.24 人们特别是电脑工程师们,常常从机器着想。他们 认为:“这样做,机器就能运行的更快;这样做, 机器运行效率更高;这样做,机器就会怎样怎样怎 样。”实际上,我们需要从人的角度考虑问题,人 们怎样编写程序或者怎样使用机器上应用程序。我 们是主人,他们是仆人。

  45. Ruby让你 编程更快乐 @Matz 1993.02.24 人们特别是电脑工程师们, 常常从机器着想。他们认 为:“这样做,机器就能 运行的更快;这样做,机 器运行效率更高;这样做, 机器就会怎样怎样怎样。”

    实际上,我们需要从人的 角度考虑问题,人们怎样 编写程序或者怎样使用机 器上应用程序。我们是主 人,他们是仆人。
  46. Ruby让你 编程更快乐 @Matz 1993.02.24 人们特别是电脑工程师们,常常从机器着想。他们 认为:“这样做,机器就能运行的更快;这样做, 机器运行效率更高;这样做,机器就会怎样怎样怎 样。”实际上,我们需要从人的角度考虑问题,人 们怎样编写程序或者怎样使用机器上应用程序。我 们是主人,他们是仆人。

  47. None
  48. 四大设计原则 重复 对齐 对比 分组

  49. None
  50. None
  51. None
  52. 四大设计原则 重复 对齐 对比 分组

  53. 统一风格 重复字体 1 重复颜色 2 重复风格 3

  54. 颜色 字体 排版 实现

  55. Compass简化CSS

  56. #box #box { @include border-radius(25px); } #box { -webkit-border-radius: 25px;

    -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; } .SCSS .CSS 兼容浏览器
  57. @import "sassy-buttons“ @include sassy-button; .SCSS

  58. 迭代设计

  59. Thanks twitter.com/saberma github.com/saberma