Файл: Сценарий по которому пользователь взаимодействует с приложением, программой для выполнения какоголибо действия для достижения конкретной цели.docx

Screen Flows (UML Diagrams)
Унифицированный язык моделирования (UML) играет важную роль в разработке программного обеспечения
UML помогает продемонстрировать возможные ошибки в структурах приложений, поведении системы и других бизнес-процессах. 

---

Каковы преимущества UML? 

• 
  Упрощает сложности 
  
• 
  Сохраняет возможности открытого общения 
  
• 
  Автоматизирует производство программного обеспечения и процессов  
  
• 
  Помогает решить постоянные проблемы с архитектурой 
  
• 
  Улучшает качество работы 
  
• 
  Сокращает затраты и время выхода на рынок 
  

Типы диаграмм UML  

Существует два основных типа диаграмм UML: структурные диаграммы и поведенческие диаграммы (а внутри этих категорий имеется много других).



UI

• 
  Interface composition and layout creation(Grids, modules, micromodules, negative space etc)
  
• 
  Design system, UI Kit / Style guide
  
• 
  iOS / Android Guidelines
  

Interface composition and layout creation
Негативное или отрицательное пространство (negative space) — свободное пространство, образующееся между, внутри или вокруг элементов. Это популярный художественный прием, который используют графические дизайнеры. Его суть — в эффективном использовании места внутри или снаружи основного содержимого. Благодаря такому приему можно составить совершенно новое изображение из разных по содержанию форм — контрформу. «больше воздуха»
Негативное пространство вокруг элементов макета также называется макропространством, тогда как пространство внутри этих элементов — микропространством.

Модульная сетка — основа для дизайн-макета. Она состоит из простых геометрических фигур — модулей одинакового размера, расположенных в определённой последовательности. Это значит, что всё пространство макета сначала разбивают на равные ячейки, а затем размещают объекты так, чтобы размер любого изображения или текста на макете был кратным размеру модуля.

Такая система упрощает работу дизайнеров: помогает сделать макет пропорциональным, понятным, гармоничным и не потратить при этом много времени.

Сетки 

• 
  сетка определяет единый стиль оформления, правила расположения элементов, выравнивания, добавления новых элементов в макет;
  
• 
  ускоряет работу с макетом, т.к. следуя единым правилам, время на принятия решения где, что, каким образом будет расположено, минимально, кроме того позволяет получать предсказуемый результат при работе в команде;
  
• 
  снижает вероятность ошибок при переиспользовании компонентов макета. Компонентный подход используют в своей работе и разработчики, поэтому компоненты позволяют команде работать синхронно, легко поддерживать изменения и экономить время;
  
• 
  макет выглядит более эстетично, элементы пропорциональны и структурированы. Кроме того, если в дизайне используется сетка, это помогает пользователю быстрее считывать информацию. Сетка создает визуальный порядок и ориентироваться становится легче.
  

---

Сетка это вспомогательный инструмент для дизайнера, а не основной. Дизайн идет не от сетки, а то смыслов, которые дизайн должен выражать. Она должна формироваться уже после того как появился первый драфт дизайна, просто чтобы потом помочь не запутаться. Если начинать грубо с сетки, можно загнать себя в излишние творческие рамки.Для начала лучше начать с бумажного эскиза или наброска композиции, а уже после этого когда вы знаете, что хотите получить, подобрать или построить сетку. 

Сначала необходимо:

• 
  определиться со структурой страницы и сделать её грубый набросок, можно даже на бумаге;
  
• 
  привести наиболее приоритетные блоки к единообразию;
  
• 
  затем построить черновую сетку под вашу дизайн-идею;
  
• 
  привести к сетке блоки, расположение которых не принципиально.
  

Только теперь можно начать прорабатывать сетку:

• 
  выберите шаг базовой сетки, основываясь на типографике, которую будете использовать и размерах базовых элементов: кнопок, полей ввода, чекбоксов и т.д. Вы можете ограничится поддержкой только вертикального ритма на основе высоты строки базового шрифта;
  
• 
  определите оптимальное количество колонок в зависимости от структуры контента;
  
• 
  выберите количество точек перехода, которые вы будете поддерживать;
  
• 
  постройте колоночную сетку и попробуйте расположить ключевые элементы интерфейса;
  
• 
  определите размер модуля, который позволит вам создавать контентные блоки (этот шаг вы можете опустить, на практике его редко используют из-за трудоемкости поддержки).
  

Сетка должна не диктовать, а помогать в дизайне. Поэтому, от сетки иногда можно отступать. Не нужно беспрекословно все выравнивать по сетке. Если какой-то блок никак не помещается в вашу сетку, его можно не подстраивать.

Правило третей----Все начинается с правила третей, с которым знакомы не только дизайнеры, но и фотографы. Это самый базовый принцип построения композиции, базирующийся на основе “золотого сечения”. По этой теории нужно разделить страницу на 9 равных частей – проведи две вертикальные и две горизонтальные линии. Пересечения точек и будут теми местами, в которых люди больше всего концентрируют внимание. А правильное использование такой схемы поможет сделать гармоничную картинку.

---

iOS / Android Guidelines

Human Interface Guidelines(ios) vs Material Design(android)

HIG — это про плоский, лёгкий, дружелюбный дизайн, пришёл он из постепенного отказа от скевоморфизма(когда объекты похожи на настоящие).
Главные принципы:

• 
  чистота
  
• 
  внимание
  
• 
  глубина
  

Material же имеет несколько основополагающих принципов: материал как метафора; смелый, графический, сознательный; осмысленная анимация; гибкая основа и кроссплатформенность. Если вы не знакомы с гайдлайнами, лучше их прочесть до того, как ознакомитесь со статьёй.

Главные принципы:

• 
  тактильность(ориентированность на реальный мир)
  
• 
  печатный дизайн в цифровой среде
  
• 
  понятная анимация(которая подчиняется законам физики)
  
• 
  исп 2 типа цветов основные и акцентные
  

2. Единицы измерения: pt vs dp

Дизайн iOS-приложения создаётся в pt, а Android-приложения — в dp.

3. Размер экрана: 320 pt x 568 pt(ios) vs 360 dp x 640 dp(andr)

4. Системный шрифт: San Francisco vs Roboto

Если не знаете, какой шрифт использовать в приложении, берите системный. В случае iOS — это San Francisco. А Android — Roboto.

5. Android Navigation Bar

В отличие от iOS, у Android есть встроенный инструмент навигации назад. Это Android Navigation Bar.

Он либо физически встроен в смартфон, либо является частью интерфейса.

6. Важность Elevation в Material

В iOS принципиально нет теней. Как исключение, тени можно обнаружить на главном экране App Store и в Health. Но в целом HIG никак не прописывает использование теней.

В Material тени играют большую роль. Навигация и смена состояний сопровождается изменением высоты компонентов. Поэтому при дизайне под Android нам стоит осознанно подходить к созданию теней.

7. Отличия в нейминге

Отличий в нейминге много. Предлагаю рассмотреть эти пять.

8. разные Способы верхнеуровневой навигации

9. Отличия в поведении Tab Bar и Bottom Navigation Bar

10. Особое поведение Tabs у Android

Tabs у Android, в отличие от Segmented Controls iOS, имеют такое свойство: по табам можно перемещаться с помощью свайпа влево и вправо.

Это потому, что страницы табов находятся на одной высоте (elevation).

---

11. Отличия в появлении дочернего экрана

В iOS появление дочернего экрана (не считая модалок) происходит только одним образом: дочерняя страница появляется справа поверх материнской с эффектом slide in. Возвращение на материнский экран происходит с эффектом slide out.

Material рекомендует показывать пользователю иерархическую взаимосвязь материнской и дочерней страницы с помощью осмысленной анимации.

12. Разные поведение контента при скролле

13.Разное поведение поиска

14.Отличия в компонентах (UI)

В iOS нет многих нативных компонентов Android. Пробежимся по ним.

15. Разные Status Bar

На обеих платформах Status Bar выполняет одинаковую задачу: сообщает о времени, уровне заряда, качестве мобильной связи и Wi-Fi. Они отличаются расположением этих индикаторов внутри Status Bar и в целом визуальным решением.

Ещё у Status Bar Android есть такая особенность, когда приходит уведомление из приложения, в Status Bar появляется иконка этого приложения. В iOS такого нет.

18. Разные Control

Контролы платформ отличаются только визуально. Можно отметить, что в iOS контролы проще: галочки используются как для radiobutton, так и для Checkbox. В Android они отличаются формой контрола.

Ещё Material предлагает использовать родительский чекбокс, когда нужно дать пользователю возможность быстро выбрать все варианты.



19. Разный вид стрелки «Назад» и положение заголовка

В iOS стрелка не имеет линии посередине потому, что в iOS стрелка «Назад» подписывается предыдущим экраном. Если на предыдущем экране заголовок был стандартным, то заголовок переходит из заголовка влево к стрелке. Если заголовок был широким, то заголовок поднимается вверх. Если название предыдущей страницы слишком длинное, оно заменяется на слово back.

20. Разный вид иконки трёх точек

Кажется, у этого отличия нет строгого обоснования. Отдаём дань уважения платформе и используем рекомендуемое положение трёх точек. В iOS точки лежат горизонтально, в Android — вертикально.

---