Get sim. Design comments

Август 19, 2022

Главная
Информатика
Get sim. Design comments

Содержание

2. Home screen Стартовый экран. При нажатии на ЛОГО из любого положения меню выходим на этот экран.
3. HELP Нажатии на «i» открывается окно подсказки с текстом подсказки. Если можно сделать текст подсказки выровненным
4. MENU При нажатии на «MENU» сама кнопка подсвечивается или увеличивается в размере и открываются следующие опции:
5. SIM ACTIONS При нажатии на «SIM ACTIONS» сама кнопка подсвечивается или увеличивается в размере и открываются
6. SIM Actions ACTIVATE BLOCK UNBLOCK TOPUP При выборе одного из пунктов подменю «SIM Actions» должен открываться
7. MIFI При нажатии на «MiFi» переход на страницу категории «MiFi» в магазине
8. GET SIM step 1 При нажатии на «GET SIM» сама кнопка подсвечивается или увеличивается в размере
9. GET SIM step 2 При нажатии на выбранный объем: Эта цифра отображается под Volume Все подменю
10. GET SIM step 3 При нажатии на выбранный coverage: Эта цифра отображается под Coverage Все подменю
11. GET SIM step 4 При нажатии на выбранный Time: Эта цифра отображается под Time Все подменю
12. Готовые пакеты 1 Не понятно как будет перекрываться главное меню этими кругами зелеными и кнопками добавить
13. Готовые пакеты 2 Может быть лучше сделать следующим образом: При нажатии на кнопку пакета, сама кнопка
14. cart preview mifi Хорошо, только кнопка удаления зеленого цвета, как-то не логично, как считаете? Суть была
15. mifi-product Хорошо, если можно - добавить расстояние между линией разграничения заголовка и самим текстом абзаца. Ок
16. order information Нужно поменять: Сим кард – просто заголовок, либо иконкой сделать ICCID: 89972230000000000006 Status: unblocked
17. Order information
18. Redesign or check overall design compliance Check that standard opencart design elements are in line with
20. Скачать презентацию

Слайд 2

Home screen
Стартовый экран. При нажатии на ЛОГО из любого положения меню

выходим на этот экран.

Слайд 3

HELP
Нажатии на «i» открывается окно подсказки с текстом подсказки. Если можно

сделать текст подсказки выровненным по краю круга как в примере слева

Попопопо попопо яверявер лклк лк яверявер ;л;л;л; яверявер ‘;’’йкй яверявер клл

Слайд 4

MENU
При нажатии на «MENU» сама кнопка подсвечивается или увеличивается в размере

и открываются следующие опции:
(возможно 2 варианта либо вокруг Лого либо вокруг Меню)
Shipping
Catalogue
User guide
Coverage
SIM Actions, Getsim, MiFi опции при этом затемняются или уменьшаются в размере
Корзина – может быть ее сделать отдельным шариком который всегда доступен где-то сверху? Либо пятым постоянным пунктом основного меню? Либо придется его запихивать в меню. Тогда нужно будет 2 клика чтобы открыть корзину. Нужен совет UX/UI дизайнера.

Shipping

Coverage

Catalogue

User Guide

Слайд 5

SIM ACTIONS
При нажатии на «SIM ACTIONS» сама кнопка подсвечивается или увеличивается

в размере и открываются следующие опции:
TopUp
Block
Unblock
Activate
Menu, Getsim, MiFi опции при этом затемняются или уменьшаются в размере

Block

Activate

Unblock

Top Up

Слайд 6

SIM Actions
ACTIVATE
BLOCK
UNBLOCK
TOPUP
При выборе одного из пунктов подменю «SIM Actions» должен открываться

popup с фейдингом остального экрана и в зависимости от выбранной опции в попапе имеются следующие поля ввода и кнопки.

Forgot activation key

Слайд 7

MIFI
При нажатии на «MiFi» переход на страницу категории «MiFi» в магазине

Слайд 8

GET SIM step 1
При нажатии на «GET SIM» сама кнопка подсвечивается

или увеличивается в размере и открываeтся следующая опция:
Volume
100 MB
200 MB
500 MB
1000 MB
Menu, Getsim, MiFi опции при этом затемняются или уменьшаются в размере
Каким-то образом нужно подсказать пользователю что он должен выбрать один из вариантов, может быть варианты меняют размер немного или цвет, как бы пульсируют (только идея) готов на ваши варианты

100 МБ

1000 MB

Volume

500 MB

200 МБ

Слайд 9

GET SIM step 2
При нажатии на выбранный объем:
Эта цифра отображается под

Volume
Все подменю закрываются
Открывается меню следующего шага - Coverage
Каким-то образом нужно подсказать пользователю что он должен выбрать один из вариантов, может быть варианты меняют размер немного или цвет, как бы пульсируют (только идея) готов на ваши варианты

Europe + 38 countries

Volume 500 MB

Worldwide 55 countries

Coverage

Слайд 10

GET SIM step 3
При нажатии на выбранный coverage:
Эта цифра отображается под

Coverage
Все подменю закрываются
Открывается меню следующего шага - Time
Каким-то образом нужно подсказать пользователю что он должен выбрать один из вариантов, может быть варианты меняют размер немного или цвет, как бы пульсируют (только идея) готов на ваши варианты

2 weeks

Volume 500 MB

1 week

Coverage Europe+ 38 countires

Time

Слайд 11

GET SIM step 4
При нажатии на выбранный Time:
Эта цифра отображается под

Time
Все подменю закрываются
Вместо ГЕТ-СИМ появляется цена продукта
Появляется кнопка добавить в корзину
При дальнейшем изменении какого либо параметра продукта цена обновляется динамически
Добавить в корзину как-то выделяется от остальных
При нажатии на добавить в корзину, идет переход на корзину.

Add to cart

Volume 500 MB

Coverage Europe+ 38 countires

55$

Time 1 week

Слайд 12

Готовые пакеты 1
Не понятно как будет перекрываться главное меню этими кругами

зелеными и кнопками добавить в корзину
В зеленом круге должен быть не текст произвольный а параметры сим карты: Volume, Coverage, Time, Price
Как пример - в каталоге, в смысле с дизайном а не просто текст абзацем

Слайд 13

Готовые пакеты 2
Может быть лучше сделать следующим образом:
При нажатии на кнопку

пакета, сама кнопка как-то выделяется и параметры пакета раскрываются в нижнем меню «ГЕТ СИМ» тогда не нужен зеленый круг и кнопка «добавить в корзину» т.к. она есть уже внизу

Add to cart

Volume 500 MB

Coverage Europe+ 38 countires

55$

Time 1 week

Слайд 14

cart preview mifi
Хорошо, только кнопка удаления зеленого цвета, как-то не логично,

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

Слайд 15

mifi-product
Хорошо, если можно - добавить расстояние между линией разграничения заголовка и

самим текстом абзаца.
Ок

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

Слайд 16

order information
Нужно поменять:
Сим кард – просто заголовок, либо иконкой сделать
ICCID: 89972230000000000006
Status:

unblocked
Кнопка «Activate» и код активации должны быть одни на весь заказ, а не 3 раза как сейчас, после активации кнопка пропадает
Баланс – меряется трафиком а не деньгами, лучше его сделать- графиком, см ниже. На графике показать проценты, полный объем и объём использованный и оставшийся: Traffic total: 500 МБ Traffic used: 200 МБ Traffic remaining: 300 МБ
Район помеченный синим овалом не нужен
В “Order details” нужно добавить «Status»
В Топапе нужен дроп-даун лист с выбором пакета для топапа, см. след.слайд
Приянто

Слайд 17

Order information

Слайд 18

Redesign or check overall design compliance
Check that standard opencart design elements

are in line with new design

Вещи которые были в ТЗ но еще не сделаны, это про то чтобы стандартные вещи в темплейте были тоже отражены

Get sim. Design comments

Содержание

Home screenСтартовый экран. При нажатии на ЛОГО из любого положения меню

HELPНажатии на «i» открывается окно подсказки с текстом подсказки. Если можно

MENUПри нажатии на «MENU» сама кнопка подсвечивается или увеличивается в размере

SIM ACTIONSПри нажатии на «SIM ACTIONS» сама кнопка подсвечивается или увеличивается

SIM ActionsACTIVATEBLOCKUNBLOCKTOPUPПри выборе одного из пунктов подменю «SIM Actions» должен открываться

MIFIПри нажатии на «MiFi» переход на страницу категории «MiFi» в магазине

GET SIM step 1При нажатии на «GET SIM» сама кнопка подсвечивается

GET SIM step 2При нажатии на выбранный объем:Эта цифра отображается под

GET SIM step 3При нажатии на выбранный coverage:Эта цифра отображается под

GET SIM step 4При нажатии на выбранный Time:Эта цифра отображается под

Готовые пакеты 1Не понятно как будет перекрываться главное меню этими кругами

Готовые пакеты 2Может быть лучше сделать следующим образом:При нажатии на кнопку

cart preview mifiХорошо, только кнопка удаления зеленого цвета, как-то не логично,

mifi-productХорошо, если можно - добавить расстояние между линией разграничения заголовка и

order informationНужно поменять:Сим кард – просто заголовок, либо иконкой сделатьICCID: 89972230000000000006Status:

Order information

Redesign or check overall design complianceCheck that standard opencart design elements

Похожие презентации

Home screen
Стартовый экран. При нажатии на ЛОГО из любого положения меню

HELP
Нажатии на «i» открывается окно подсказки с текстом подсказки. Если можно

MENU
При нажатии на «MENU» сама кнопка подсвечивается или увеличивается в размере

SIM ACTIONS
При нажатии на «SIM ACTIONS» сама кнопка подсвечивается или увеличивается

SIM Actions
ACTIVATE
BLOCK
UNBLOCK
TOPUP
При выборе одного из пунктов подменю «SIM Actions» должен открываться

MIFI
При нажатии на «MiFi» переход на страницу категории «MiFi» в магазине

GET SIM step 1
При нажатии на «GET SIM» сама кнопка подсвечивается

GET SIM step 2
При нажатии на выбранный объем:
Эта цифра отображается под

GET SIM step 3
При нажатии на выбранный coverage:
Эта цифра отображается под

GET SIM step 4
При нажатии на выбранный Time:
Эта цифра отображается под

Готовые пакеты 1
Не понятно как будет перекрываться главное меню этими кругами

Готовые пакеты 2
Может быть лучше сделать следующим образом:
При нажатии на кнопку

cart preview mifi
Хорошо, только кнопка удаления зеленого цвета, как-то не логично,

mifi-product
Хорошо, если можно - добавить расстояние между линией разграничения заголовка и

order information
Нужно поменять:
Сим кард – просто заголовок, либо иконкой сделать
ICCID: 89972230000000000006
Status:

Redesign or check overall design compliance
Check that standard opencart design elements