Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Дизайн принципы для разработчиков. Может ли диз...

Дизайн принципы для разработчиков. Может ли дизайн сделать наши программы лучше?

Доклад на продуктовом митапе Tver.io, 17.10.2019

Alexey Taktarov

October 17, 2019
Tweet

More Decks by Alexey Taktarov

Other Decks in Programming

Transcript

  1. что такое промышленный дизайн? история и предпосылки ° принципы дизайна

    и код, который мы пишем
 (на примере open-source пакетов) ° продуктовый подход для разработчиков ° П Л А Н Н А С Е Г О Д Н Я
  2. Ч Т О Т А К О Е П Р

    О М Ы Ш Л Е Н Н Ы Й Д И З А Й Н ? Г Л А В А 1
  3. П Р И Н Ц И П Ы Д И

    З А Й Н А В П Р О Г Р А М М И Р О В А Н И И Г Л А В А 2
  4. “Since the early 50s the activity of designing has been

    the subject of systematic and scientific analysis, it has been codified into a set of procedures … by manufacturing corporations (Philips, IBM)” P E T E R D O R M E R , “ D E S I G N S I N C E 1 9 4 5 ”
  5. З А К О Н Ф И Т Т С

    А ( F I T T S ’ S L A W ) A B C D E F G H I ~ 0.15s ~ 0.3s A B A B C D E З А К О Н Х И К А ( H I C K ’ S L A W ) ~ 0.1s ~ 0.5s
  6. В И Д И М О С Т Ь (

    V I S I B I L I T Y ) чем более видимы функции объекта, тем более вероятно, что пользователь поймет, что делать дальше. следствие: важные функции должны иметь больший приоритет!
  7. import convert from “currencies" const value = convert(15).from("USD").to("EUR") пример пакета

    для конвертации валют (прототип: easy-currencies)
  8. import { Converter } from "currencies" const converter = new

    Converter({ provider: "OpenExchangeRates", key: "API_KEY" }) converter.convert(15, "USD", "EUR")
  9. number_to_human(1, units: :distance) # "1 meter" именованные параметры и параметры

    по-умолчанию: разделить основной и дополнительный функционал
  10. П Р И М Е Р И З N P

    M пакет для работы с Promise-очередью
  11. const promise1 = (next, error, param) => { new Promise((resolve,

    reject) => { ... }) .then((res) => next(null, res)) }; const queue = makeQueue([], 3, 'someParam') queue.push(promise1, promise2, ...); G I T H U B : ★ 1
  12. G I T H U B : ★ 5 7

    6 const queue = new Queue() const queue = new Queue({ concurrency: 1 })
  13. Н А Г Л Я Д Н О С Т

    Ь ( A F F O R D A N C E ) свойство объекта, которое позволяет пользователю моментально понимать, как этим объектом пользоваться.
  14. Н А Г Л Я Д Н О С Т

    Ь В К О Н Т Е К С Т Е Соковыжималка цитрусовых, Philippe Starck, 1990
  15. Н А Г Л Я Д Н О С Т

    Ь В И Н Т Е Р Ф Е Й С А Х skylight.io
  16. Н А Г Л Я Д Н О С Т

    Ь В И Н Т Е Р Ф Е Й С А Х airbnb.com
  17. // ok const open = true const write = true

    const fruit = true // better! const isOpen = true const canWrite = true const hasFruit = true https://hackernoon.com/the-art-of-naming-variables-52f44de00aad
  18. array.empty? string.start_with?(‘foo’) pool.available? array.shuffle! string.capitalize! user.destroy! не меняют состояние, нет

    эффектов, getters меняют состояние, есть сайд-эффекты, setters
  19. https://github.com/contra/react-responsive <MediaQuery minDeviceWidth={700}> {matches => <div> ... </div>} </MediaQuery> Паттерн

    Function-as-a-Prop был популяризирован React-Motion, а теперь активно применяется сообществом
  20. К О Н Ц Е П Т У А Л

    Ь Н А Я М О Д Е Л Ь представление пользователя о том, как вещь работает
  21. концептуальная модель диммера для регулировки света 1: Максимум света в

    крайнем правом положении 0: Свет выключен в крайнем левом положении
  22. уффф… # ERROR: start_date must be greater # than the

    current date! Subscription.create({ start_date: Time.now })
  23. О Б Р А Т Н А Я С В

    Я З Ь ( F E E D B A C K ) соответствие между действием пользователя и эффектом в реальном мире
  24. Соответствие Когда я нажимаю на ▶, колесико начинает крутиться Panasonic

    RQ-2105 Обратная связь Кнопка дает моментальную обратную связь: нажать, чтобы запустить
  25. сокращение времени ожидания ощущается как простота З А К О

    Н П Р О С Т О Т Ы # code > create-react-app new-app # test > npx localtunnel --port 8080 # deploy > now
  26. Р А Б О Т А Р А З Р

    А Б О Т Ч И К А В П Р О Д У К Т О В Ы Х К О М А Н Д А Х Г Л А В А 3
  27. Stripe::Exception Your card has insufficient funds! Stripe::APIException Unexpected error communicating

    when trying to connect to Stripe. NoMethodError Undefined method 'code' for nil:NilClass ⾠ ⾠ ⾠ Sorry, we couldn’t charge your card. Your card has insufficient funds! с чем работает разработчик что видит пользователь We encountered an unexpected error while processing your payment. Your card hasn't been charged yet. Please contact us: [email protected]
  28. Э М О Ц И О Н А Л Ь

    Н Ы Й Д И З А Й Н хороший дизайн — это правильно рассказанная история
  29. Дизайн Timecop (гем Ruby для имитации времени в тестах) вдохновлен

    одноименным sci-fi фильмом 1994 года с Жан-Клод Ван Даммом в главной роли. Timecop.freeze(1.week.ago) sleep(10) new_time == Time.now # ==> true Timecop.return # "turn off" Timecop Timecop.travel(1.month.from_now)
  30. Feature: uploader with file storage and versions I want to

    upload files to the filesystem Background: Given an uploader class that uses the 'file' storage And that the uploader class has a version named 'thumb' Scenario: store a file When I store the file 'fixtures/bork.txt' Then there should be a file at 'public/uploads/bork.txt' Cucumber (BDD) — превосходный пример сторителлинга при разработке
  31. популярные проекты не рождаются с идеальным дизайном. Х О Р

    О Ш И Й Д И З А Й Н Т Р Е Б У Е Т В Р Е М Е Н И
  32. Эмпатия → Проблема → Решение → Инсайт → UX Д

    И З А Й Н — И Т Е Р А Т И В Н Ы Й П Р О Ц Е С С
  33. В 1979 году компания Sony заметила, что люди чаще пользуются

    воспроизведением ▶, чем записью ⬤ Д И З А Й Н — И Т Е Р А Т И В Н Ы Й П Р О Ц Е С С
  34. Дизайнеры Sony убрали микрофон и внешний динамик… Так родился Sony

    Walkman. Э М П А Т И Я → С К Р Ы Т О Е З Н А Н И Е Sony Walkman TPS-L2, 1979 →
  35. Эмпатия → Проблема → Решение → Инсайт → DX ▶

    Alex Kotliarskyi: Facebook product Infrastructure как разработчик я знаю, что… … разработка UI в браузере — сложно концепт Virtual DOM UI(data) React
  36. У М Н Ы Й З А М О К

    Н А Ш В Е Д С К О Й Д В Е Р И только 4 цифры, порядок не имеет значения 44 = 256 комбинаций код 2244 — запомнить проще простого!
  37. Engineering teams don’t exist to write code. Engineering teams exist

    to apply science to build products to grow the company. ” I N T E R C O M O N S T A R T I N G U P
  38. Victor Papanek Design for the Real World Don Norman The

    Design of Everyday Things Deyan Sudjic The Language of Things John Maeda The Laws of Simplicity • Peter Dormer, “Design Since 1945” • Charlotte and Peter Fiell, “The Story of Design” • ▶ Mike Monteiro, "How Designers Destroyed the World” • ▶ Hainbach YouTube Channel