Александр Зимин — Мобильные интерфейсы будущего
•
0 likes•262 views
Видео: https://youtu.be/WQFDUYJThls
![Идеи интерфейсов будущего
Мутабельные UI
struct QuestLevelBind: ModelBindable, InterfaceDrawable {
var imageView: ImageView
var textView: TextView
var buttonComponent: Table<MyButtonComponent>
func draw() -> [InterfaceComponent] {
return [imageView, textView, buttonComponent]
}
}](https://image.slidesharecdn.com/mobileinterfacesoffuture-170208184927/85/-27-320.jpg)
![Идеи интерфейсов будущего
Простая и понятная верстка
struct QuestLevelBind: ModelBindable, InterfaceDrawable {
var imageView: ImageView
var textView: TextView
var buttonComponent: Table<MyButtonComponent>
func draw() -> [InterfaceComponent] {
let separator = Separator()
return [imageView, separator, textView, buttonComponent]
}
}](https://image.slidesharecdn.com/mobileinterfacesoffuture-170208184927/85/-28-320.jpg)
![struct MyButton: ViewType, InterfaceDrawable, InterfaceComponent, Touchable {
var rightImage: ImageView
var leftImage: ImageView
var text: TextView
var touch: TouchAction
let width: WidthAligment
let height: HeightAligment
mutating func setup() {
leftImage = ImageView(width: .fixed(value: 20), height: .fixed(value: 20))
leftImage = ImageView(width: .fixed(value: 20), height: .fixed(value: 20))
text = TextView(width: .content(adjustment: 0), height: .content(adjustment: 0))
width = .viewWidth(percent: 0.8, adjustment: 0).lessOrEqual()
}
func draw() -> [InterfaceComponent] {
return [leftImage, text, rightImage]
}
// ...
}](https://image.slidesharecdn.com/mobileinterfacesoffuture-170208184927/85/-37-320.jpg)
Александр Зимин — Мобильные интерфейсы будущего
- 1. Мобильные интерфейсы будущего Все примеры и картинки вымышлены. Любые совпадения с реальностью случайны.
- 2. Идея
- 3. • UI сфера СТОИТ на месте: • Концепт >> приложение Идея Зачем? • color << Message.getSimilarColor(.red) • color << Message.effect.notVeryContrast
- 4. • UI сфера СТОИТ на месте: • Концепт >> приложение • Качественные приложения для разных сфер Идея Зачем?
- 5. • UI сфера СТОИТ на месте: • Концепт >> приложение • Качественные приложения для разных сфер • UIKit НЕ станет Open source и у него не будет evolution process Идея Зачем?
- 6. • Потенциал для пользователей: • Как пользователь будет видеть нужную информацию • Потенциал для разработчиков: • Как будут разработчики будут собираться такие интерфейсы • Развитие Это будет исключительно мое ИМХО Идея О чем я хочу поговорить
- 8. • Реактивное программирование — парадигма программирования, ориентированная на потоки данных и распространение изменений. • a = b + c • В императивном программировании `a` будет изменена по месту вызова • В реактивном при изменении `b` или `c` Влияющие факторы Реактивное программирование
- 11. • Чат-боты — это компьютерная программа, которая создана для имитации речевого поведения человека при общении с одним или несколькими собеседниками. По отношению к виртуальным собеседникам употребляется также название программа-собеседник. • Интересная особенность: • Чат-боты имеют строгие гайдлайны ввода/получения информации Влияющие факторы Чат-боты
- 14. Влияющие факторы Watch Kit 20 pt 40% Cell
- 16. Влияющие факторы Watch Kit Cell content isveryverybig
- 18. • Мутабельные UI • Простая и понятная верстка • Понятный и красивый переход от одного типа контента к другому • Ретроактивные визуальные компоненты • Open source • Готовые обучаемые модели Идеи интерфейсов будущего
- 19. Примеры
- 21. Image Text Buttons (.viewWidth(1), .content) (.viewWidth(0.9), .content) h = .center Composition
- 22. Image Text Buttons (.viewWidth(1), .content) (.viewWidth(0.9), .content) h = .center Composition Text (.viewWidth(0.8), .content(16)) h = .center v = .center View (.viewWidth(0.9), .content) h = .center Touchable
- 23. • Мутабельные UI • Простая и понятная верстка • Понятный и красивый переход от одного типа контента к другому • “Ретроактивные” визуальные компоненты • Open source • Готовые обучаемые модели Идеи интерфейсов будущего
- 24. Идеи интерфейсов будущего Мутабельные UI struct QuestLevelModel { var image: Image var text: Text var actions: List<CustomActions> }
- 25. Идеи интерфейсов будущего Мутабельные UI struct QuestLevelBind { var imageView: ImageView var textView: TextView var buttonComponent: Table<ButtonComponent> }
- 26. Идеи интерфейсов будущего Мутабельные UI struct QuestLevelModel { var image: Image var text: Text var actions: List<CustomActions> } struct QuestLevelBind: ModelBindable { var imageView: ImageView var textView: TextView var buttonComponent: Table<MyButtonComponent> func bind(levelModel: QuestLevelModel) { imageView << levelModel.image textView << levelModel.text buttonComponent.component.text << levelModel.actions.value.text buttonComponent.component.touch ->> levelModel.actions.value.execute } }
- 27. Идеи интерфейсов будущего Мутабельные UI struct QuestLevelBind: ModelBindable, InterfaceDrawable { var imageView: ImageView var textView: TextView var buttonComponent: Table<MyButtonComponent> func draw() -> [InterfaceComponent] { return [imageView, textView, buttonComponent] } }
- 28. Идеи интерфейсов будущего Простая и понятная верстка struct QuestLevelBind: ModelBindable, InterfaceDrawable { var imageView: ImageView var textView: TextView var buttonComponent: Table<MyButtonComponent> func draw() -> [InterfaceComponent] { let separator = Separator() return [imageView, separator, textView, buttonComponent] } }
- 29. Идеи интерфейсов будущего Простая и понятная верстка enum WidthAligment { case fixed(value: CGFloat) case content(adjustment: CGFloat) case viewWidth(percent: CGFloat, adjustment: CGFloat) } let text = TextView(width: .viewWidth(percent: 0.8), height: .content)
- 30. Идеи интерфейсов будущего Понятный и красивый переход от одного типа контента к другому let text = TextView() text.exchangeAnimation = .custom(configuration: AnimationConfiguration())
- 31. Идеи интерфейсов будущего “Ретроактивные” визуальные компоненты // Actions protocol Touchable { } protocol ݺߣrType { } protocol PickerType { }
- 32. Идеи интерфейсов будущего Готовые обучаемые модели // Actions protocol Touchable { } protocol ݺߣrType { } protocol PickerType { } // Recommendation System protocol RecomentationalTouchType: Touchable { }
- 33. Идеи интерфейсов будущего Готовые обучаемые модели // Recommendation System protocol RecomentationalTouchType: Touchable { func recomended(minimalSize: CGSize) func recomended(executionType: ExecutionType) }
- 34. Идеи интерфейсов будущего Готовые обучаемые модели // Recommendation System protocol RecomentationalTouchType: Touchable { func recomended(minimalSize: CGSize) func recomended(executionType: ExecutionType) } protocol RecomentationalTextType { var textPurpose: TextPurpose { get } func recomended(minimalFontSize size: CGFloat) func recomended(fontWeight: ExecutionType) }
- 35. Идеи интерфейсов будущего Готовые обучаемые модели // Recommendation System protocol RecomentationalTouchType: Touchable { func recomended(minimalSize: CGSize) func recomended(executionType: ExecutionType) } protocol RecomentationalTextType { var textPurpose: TextPurpose { get } func recomended(minimalFontSize size: CGFloat) func recomended(fontWeight: ExecutionType) } ~ Open Source
- 37. struct MyButton: ViewType, InterfaceDrawable, InterfaceComponent, Touchable { var rightImage: ImageView var leftImage: ImageView var text: TextView var touch: TouchAction let width: WidthAligment let height: HeightAligment mutating func setup() { leftImage = ImageView(width: .fixed(value: 20), height: .fixed(value: 20)) leftImage = ImageView(width: .fixed(value: 20), height: .fixed(value: 20)) text = TextView(width: .content(adjustment: 0), height: .content(adjustment: 0)) width = .viewWidth(percent: 0.8, adjustment: 0).lessOrEqual() } func draw() -> [InterfaceComponent] { return [leftImage, text, rightImage] } // ... }