Интерфейсы

индекс
44,19

Интерфейс программы Киви для Айфона

Недавно, ползая по аппстору, я наткнулся на программу оплачивалок Киви. Только успел обрадоваться, как оказалось, что программа сделана ужасно. Странно, что такая большая компания позволила себе выпустить такую чушь. Вот я и перерисовал их интерфейс :)


Почему программа — хрень?

Во-первых, анимация. Запускаясь, программа встречает тебя бессмысленной медленной анимацией, выстраивающей объекты. Вся анимация дальше также жутка и бессмысленна — такое ощущение, что кто-то дорвался до СДК и наклепал того, что понравилось, не наигравшись. Хотя главная цель анимации в айфоне — дать пользователю понять где что находится на экране и за его пределами (поэтому списки раскрываются направо, скроллятся вниз, а не прилетают со всех сторон).

Во-вторых, стабильность. Оно жутко тормозит, кнопки нажимаются через раз, а подключения часто происходят раза с третьего.

Ну и в-третьих — интерфейс. Вот несколько скриншотов их текущей программы:



Интерфейс никак не вяжется ни с гайдлайнами, ни с ощущением айфона, ни даже с самим интерфейсом терминалов, и выглядит чем-то симбиановским из начала 00-х. Повторенный главный экран терминала имеет две постоянных кнопки — оплата и кабинет, которые по сути веду в одно и то же место — к черезжопной оплате, разве что ЛК показывает перед этим счет.

Я начал с нуля, и понял, что по сути есть несколько основных юзкейсов:
1) Быстро оплатить что-то из ЛК (я, к примеру, почти всегда держу на нем пару-тройку сотен рублей про запас), что обычно давно добавлено в избранные — мобильник или инет, к примеру.
2) Посмотреть, где ближайший терминал, чтобы закинуть денег.
3) Оплатить что-то, что не сохранено в частых оплатах (телефон другу, денег на Яндекс и пр.).
4) Раз уж они прикрутили звонилку (жуткую в оригинальной проге), то позвонить со счета ЛК, если закончились деньги.
5) Посмотреть историю платежей.

Итак, начну.

Программа запускается так (в случае, если в настройках вход защищен паролем, то картинка отъезжает, впуская клавиатуру и поля ввода):

   

Главный экран — личный кабинет со счетом в виде денежки и списком избранных платежей. Денежка преобразуется в зависимости от количества средств.

   

Если мне надо оплатить, скажем, свой мобильник, то по клику на его поле появляется окно оплаты, куда в чек вписывается нужная сумма. Вместо айфоновкой полной клавиатуры с буквами и символами, тут используется кастомная цифровая. После нажатия «Оплатить» чек выезжает окончательно, и платеж подтверждается (или не подтверждается :).

   

Не уверен, что стоит вписывать в чек, но вариантов масса. Можно даже запоминать джипиэсом место оплаты и выдавать район. Да хоть погоду в это время добавлять, чтобы потом интереснее было чеки перебирать :) А еще чек комкается, если происходит ошибка — тогда он не нужен.

   

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



Часть категорий не раскрываются настолько же, насколько и в Киви — к примеру, сотовая связь не мучает выбором оператора, а сама определяет его по коду и номеру. В длинных спиксках справа висит прокрутка по алфавиту. Ну и естесственно поиск.

   

Некоторые оплачивалки выдают подсказки, как, к примеру, ЖКХ. Перед непосредственным вводом покажется окно, показывающее, где на пришедшем чеке находится необходимый код. Потом ЖКХ оплачивается стандартным способом.

   

Неизбранные услуги оплачиваются так же. Телефоны сами размечаются (+7 и дефисики водить не надо — цифры «пропрыгивают» дальше сами). Так же размечаются номера договоров, айпишники и пр.



Карта покажет, где находятся ближайшие терминалы и подскажет их адреса.



Кививская звонилка теперь больше похожа на родную. Висит напоминалка с тарифами.



История выводится списком и подгружается по мере прокрутки. Избранные платежи идут под своим именем, а единократные включают номер, который оплачивался. И кстати я бы не отказался от возможности пополнения ЛК кредиткой.

   

В настройках можно залогиниться в ЛК и включить пароль. Думал добавить еще пару интересных фишек к настройкам, но еще не успел. В течение недели то, что доделаю, повыкладываю в журнал. Как минимум надо доделать систему пополнения счета кабинета.

   

И напоследок — кусочек из нескольких листов прорисовки навигации:



Это несуществующий проект. Он скорее для тренировки, и в аппсторе не появится. Многое еще надо дотачивать, убирать косяки и думать над улучшением удобства, но в целом я доволен :)
+229
2 марта 2010, 15:33
78

комментарии (130)

+57
karapuzoff #
Работа проделана огромная! Если сравнивать что было и что стало — ничего небыло!
+8
Zlodey #
Гораздо приятнее выглядит. Молодец.
+5
penexe #
хочу такой ui на андройде!!!
–1
tum0rc0re #
это уж точно, а то сделал на анройду страшное все и глючное
+28
alexmaknet #
как человек, который занимается софтом на iPhone, выскажу глубочайший респект от всей нашей команды. действительно красивый и удобный интерфейс.
+34
mrdamage #
попробуйте продать идею разработчикам «киви» — ваши старания должны быть вознаграждены
+12
mardy_bum #
А самой компании QIWI вы не предлагали такой дизайн?
Можт они бы дали вам за него хороших денег.
–13
diger #
т.е. вы хотите сказать автор делал это ради фана?
+6
karapuzoff #
Это несуществующий проект. Он скорее для тренировки, и в аппсторе не появится.

Думается мне, что изначально автор делал для себя…
+9
yevgeny #
Для себя, но не просто так. Решены задачи:
1) понять, как не надо делать интерфейс;
2) тренируя мозг, предложить, как пользователю облегчить работу с приложением;
3) нарисовать проект для портфолио,
4) сделать себе рекламу и заработать авторитет.
И потом: 5) получить прибыль от новых заказов.

+2
Fenniks #
Пожалуйста попробуйте продать это QIWI, я очень хочу это на мой iPhone
P.S. Один из лучших интерфейсов который я видел.
+6
naum #
Простите за очередной бессмысленный комментарий.
Это великолепно! Нет слов.
+1
m00nbI4 #
Как говориться, зачет!: )
+1
melfa #
Долго рисовали? (вместе со сценариями и проектированием переходов)
+4
fearout #
Если сложить все время, то где-то часов 10. Но растянулось это почти на неделю :)
+2
melfa #
Хорошая работа. Год назад писал про QIWI: habrahabr.ru/blogs/ui_design_and_usability/54102/
С тех пор, смотрю, их подход к проектированию не очень изменился.
+4
efads #
Очень интересно — тут же перекинул ссылку разработчикам!

+3
palaum #
Думаю было бы всем интересно узнать, что разработчики ответят автору, если все же ответят.
+2
fearout #
В ЖЖ ответили «Спасибо большое за Вашу работу! Дизайн очень понравился, обсуждаем внутри компании. Компания большая, мнения разные, но это очередной повод подумать об улучшениях. Успехов в творчестве!)»

Не уверен, что именно это должно означать :)
+1
efads #
А что бы вы хотели получить от разработчиков?:) И от компании. Если честно?

Ваше мнение, безусловно, будет доведено до всех. А вот, что получится — сказать пока не могу.
+2
fearout #
Да ничего не хотел получить. Просто интересно :)
+1
efads #
Я передам вам комментарии — или попрошу их самим связаться с вами — вы поговорите на одном языке.
+2
fearout #
А, так вы из Киви? Ну ок, спасибо :)
+1
efads #
Вам спасибо за прекрасный пост!
+1
TiFFolk #
Наверно хочет на работу или получить деньги за дизайн. Но стесняется.
0
ShamanS #
Думаю на работу вряд ли пойдет, даже если QiWi попросит, а вот от денег за работу не откажется ;).
0
ArcKain #
теперь ждем для андройда… :)
+1
StirolXXX #
Теперь жду QiWi в Украине…
+10
yuhenobi #
Батенька! Вы славно потрудились! Если задумаю сделать ПО под iPhone я буду обращаться насчет UI к вам!
+2
homme #
загрузочная картинка клевая. но ведь это противоречит гайдлайнам :)
туда надо ставить, например, фон основного приложения, а не цветную мигающую фигню (с). По крайней мере так нам говорят Human Interface Guidelines.
+1
Thomas #
Интрфейс зачет! Осталось реализовать свою программу и получать с этого прибыль. Первый шаг для своего стартапа есть.
+6
heller #
Отлично, все очень хорошо. Теперь после публикации на хабре, можно писать в киви и просить денег за дизайн, может дадут. Если бы я был их начальником я бы дал.
Воровать точно не будут, публикация на хабре тут выступает как некая защита авторских прав ;)
+6
boombond #
Как постоянный пользователь этой проги, высылаю огромный респект и желание увидеть это воочию.
О-хре-не-нно!
+5
Intimatik #
потрясающий пост!
+2
kir9 #
Супер!
+4
FTM #
вы не просто молодец, а молодец в квадрате! требуйте у киви компенсацию за проделанную работу ;)
+6
efads #
Это будет вымогательство:)
+5
FTM #
это будет удар ниже пояса их дизайнерам
+2
NetCust #
Молодчина, очень хороший интерфейс получился. Киви есть над чем задуматься)
+4
kosiakk #
я оргазмирую.

денежка в личном кабинете это охуенно.
это круче чем круто.
это феерично

я прямо сейчас же закажу у вас интерфейс для моего «стартапа»
(вижу, уже очередь выстраивается)
+1
metakey #
Присоединяюсь к мнению, денежка шикарная!
–11
petrovi4 #
Волшебно! Правда.
Я сейчас занят решеним задачи вывода довольно большого кол-во разнообразной специфической инфы на иФоне.
Не хотелось бы приложить руки к реальному приложению? Роялти, к сожалению, обещать не могу, но имя войдет в аналы истории! )
0
0leGG #
> имя войдёт в аналы

<irony>это так теперь людей куда подальше посылают?</irony>
+1
petrovi4 #
Анналы — древнеримские, а также средневековые летописи. В широком смысле — запись наиболее значительных событий по годам. Крылатое выражение: «Анналы истории».
Это просто слово. И, извините, я не боюсь назвать небо голубым.
Кстати, если минусуют что денег не могу предложить, то зря. Сам делаю на энтузиазме, а программа покупки авиа/жд билетов может стать популярной, и уже потом можно реализовывать монетизацию. Лично мне этого достаточно, но, видать, не блюстителям чужого кошелька.
+2
medved13 #
Минусуют за то, что вы пропустили одну букву «н» в слове «анналы», что придало вашему сообщению немного иной смысл.
Ваш К.О.
+2
petrovi4 #
Да, капитан, я догадался)
Но разве десять минус — это минус за оговорку?
Тут давече жене вместо «Дорогая, дай пульт» задумался и просто оговорившись сказал «Ты мне, сука, всю жизнь испортила». Вот то был минус )
+8
Stepanow #
Может имя войдёт не в аналы, а в анналы? А то как-то совсем нехорошо получается.
+11
petrovi4 #
Тут мой косяк — крыть нечем. Извиняюсь за опечатку.
+3
FlamingDeth #
Такого рода предложения тоже обычно входят в аналы. :)
+3
petrovi4 #
Возможно, но я всё-таки попробую!
0
staskhrustalev #
Класс
–10
dennyoi #
можно и без этих свистелок и перделок, зато с пуш-нотификациями и поддержкой старых прошивок?
+2
fearout #
Это к разработчикам. А я просто интерфейс нарисовал :)
–12
dennyoi #
пардон. не понял сразу. однако, хочу заметить, что такой интерфейс не пропустят в аппстор, вы нарушаете их гайдлайны. ознакомьтесь с ними.
+6
fearout #
Я с ними ознакомился. В чем нарушаю? :)
Ни сплешскрин, ни кастомные контролы не запрещены в аппсторе.
0
densmirnov #
Советую ознакомиться с оригинальным интерфейсом. Можете поудивлять как в аппстор пропустили его.
+1
lol2Fast4U #
взаимоисключающие параграфы??
push нету в старых прошивках :) хотя можно на 2 без push, на 3 с ним
+5
FlamingDeth #
Ввод цифр сразу в чек — спорно, в остальном — очень круто. :)

Напоминает историю про Дастина Кертиса и American Airlines.
+1
ferim_foli #
Они конечно молодцы. Особенно когда служба тех поддержки отвечает на твой запрос через 2 недели. Когда проблема уже решилась сама собой.
+1
efads #
Можно мне переписку в личку скинуть — с временным лагом в две недели. Если не сложно, конечно.
+1
smartello #
Да, автор действительно молодец. Желаю плодотворного сотрудничества с киви и другими крупными компаниями)
+1
Peyt #
Шрифты только не в тему. А так все супер.
0
Nesp #
Не знаю как у других, но у меня какое-то отторжение к оранжевому на темно-сером.
+1
fearout #
Хм. А где у меня оранжевое на темно-сером?
+2
dihlofos #
это наверно у человека были мысли вслух :)
+1
Nesp #
Первые шесть скринов.
+3
fearout #
Так это их текущая программа.
+1
SegaZero #
так он про текущий интерфейс и сказал — не любит оранжевое на темно-сером
ваш К.О.
0
Nesp #
Спасибо Капитан, вот ваш камень.
+2
k_sashka #
было бы просто замечательно, если бы разработчики киви реализовали этот интерфейс
а то текущей версией пользоваться жутко неудобно
+2
Rihtor #
То что было — стыдоба!

Автор молодец! Надеюсь вас теперь пригласят не только в киви интерфейс переделывать, но и в другие конторы!
+1
HoochieMen #
Здорово! Хотя не скажу что сильно уж бесит програмка от Киви, вполне ничего. Но после как посмотрел на Ваши интерфейсы понял что сейчас у них очень слабенько )
+1
punch #
Респект и уважуха.
+2
Rihtor #
Кстати, CityGuide под айфон тоже имеет ужаснейший интерфейс(см 3-ю привьюшку)! Может вам, если будет время, и их улучшить?
+1
fearout #
Ну, мне это тоже интересно. Папка с набросками интерфейса навигатора у меня занимает почти гиг :)
Только это не на базе какого-то конкретного (все жуткие), и работы там еще дофигища.
+1
Progressr #
Замечательно получилось. Оригинально и с фантазией.
Купюры, чек и терминал очень к месту, именно с ними и ассоциируется сервис.
Встаю в очередь на разработку дизайна приложения для стартапа :), вот только определимся с функционалом беты.
Кстати, в жж и на сайте автора нашлось ещё немало интересных работ.
+1
impwx #
Отлично сделано. Мне очень понравилось.
+1
Cap #
Очень хорошая работа, Вы — молодец!

Вот только можно было и не делать эффекты по сторонам к чеку, и без этого приятно будет выглядеть и не потеряет смысл. Но это так мелочь.
+1
spycode #
Все отлично (всегда бы были проникнуты дизайнеры (проектные) спецификой создания UI именно для iPhone), так что по продумманности и UI строгое 10 из 10. Нашел правда два замечания, которые заметил как человек уже разработавший некоторое кол-во приложений (и который часто любит поспорить и по рассуждать по поводу UI).
1) Скриншот «Оплата услуг» второй, там клавиатура имеет полупрозрасный фон. Проблематично будет реализовать кастомную полнофункциональную клавиатуру.
2) И еще, у меня бы возник сразу вопрос, по клавиатурам цифровым. Я бы поменял местами кнопки «стереть» и «оплатить», аргумент в эту пользу это размещение кнопки стирания на стандартной клавитуре приблизительно в той же области где кнопка оплатить, что может привести к случайному нажатию на оплату, в добавок облать размещения стереть слева более удаленная что уже защитит от лишнего нажатия поместя туда оплату. (Хотя конечно можно выдаыать алерт поддверждения и оставить существующий вариант, но как то не по феншую, если можно вообще избежать этого)

А так все реализуемо, если есть API у сервиса могу реализовать, если интересно обращайтесь.
+2
fearout #
1) Полупрозрачная черная клавиатура — это один из стандартных элементов. Попробуйте скачать что-нить в аппсторе — он выплюнет для воода пароля именно такую, как на скриншоте. Так что ничего не надо реализовывать, все уже есть :)
2) «Стереть» справа на стандартной звонилке. Поэтому в звонилке киви стирание тоже справа. А вот в стандартной цифровой клавиатуре на месте моей «оплатить» находится «Ввод». Так что все выдержано в том же виде, что и в самом айфоне.

И к киви я отношения не имею, не уверен, что у них есть апи. Но как разработчика (верно?) я запомню, скоро может многое понадобиться.
+1
spycode #
1) То что клавиатура есть я знаю, и не одна, заморочка с кастомизацией ее в частности с кастомизацией общей которая имеешь возможность переключаться к доп. символам и в зависимости от языка. К примеру цифровая кастомизируется подкладкой просто фона, ну или как вариант не сложно ее написать с нуля. Кстати по поводу скачать приложение, если ткноте ссылкой, то посмотрю потому как сам не припонинаю из наверное более 2-3 сотен приложения кастомизированных полных клавиатур, цифровых да сам делал)))
2) Вообще нахождения ввода там, это Вы видимо или в Interface Builder потыкали на кнопочки когда-то или в приложении каком-то видели просто такую имплементацию, а вообще в стандартной звонилке про которую Вы говорите у меня справа стереть а слева добавить (в стандартно предоставляемой для разработчика при работе через Interface Builder слева не функциональная кнопка).
Вот пару ссылок найденых в гугде, если хотите могу снять скриншоьы со своего если не верите.
media.tech-recipes.com/rx_images/iphone/settings-phone-forward-edit.jpg
www.imobile.com.au/images/phone_reviews/apple_iphone/iphone-screen-CALL.jpg
+1
fearout #
1) Не понял. Черная клавиатура входит в сам айфон. Что за заморочка с кастомизацией?
2) Хм, и вправду. Но ниче, что-то подтверждающее всегда справа внизу, так что с айфоном все равно не расходится :)
+1
spycode #
Воощем это только предложение, что на мой вгляд можно улучшить, и я никак не говорю о ошибке проектирования, лишь как об одном из вариантов улучшения на мой взгляд.)

По поводу черной клавиатуры, мы судя по всему о разных вещах говорим, если бы дали ссылку на скрин с такой клавой я бы более четко понял о чем Вы говорите. Хотя, я допускаю, в силу того что не особо сталкивался с реализацией не стандартной клавиатуры с «переключающимися видами», не для ввода только цифр.
+1
fearout #
Если я правильно понимаю тему разговора — вы про черную текстовую клавиатуру (цифровая естесственно делается отдельно)?
В айфоне есть два стандартных вида клавиатур — голубая стандартная и черная полупрозрачаня (в основном для модальных окон, к примеру при в воде пароля в аппстор). У меня используется вторая.
Выглядит так: www.appcraver.com/wp-content/uploads/2008/11/img_62.png

Ее часто используют приложения с темными темами.
+1
spycode #
Да действительно, при вводе пароля в AppStore клавиатура черная, значит реализовать возможно, признаю…

Клавиатура не относится к окну, оно относится к полю ввода и я встречался только с голубой, а тут оказывается и черная есть (не замечал) вот как оказывается. Буду знать. Можно вычеркивать пунк один))))
0
dShell #
этам мерзкая клава не может менять язык ввода.
+2
spycode #
Вот из SDK допустимые варианты использования различных клавиатур для поля ввода, хотя не исключаю, что где то есть какие-то более универсальные способы изменения внешнего вида клавиатуры. (надо гугдить, но потом как будет что...)

//
// UITextInputTraits.h
// UIKit
//
// Copyright 2006-2009 Apple Inc. All rights reserved.
//

#import

//
// UITextAutocapitalizationType
//
// Controls autocapitalization behavior for a text widget.
// Note: Capitalization does not apply in all script systems. In such
// cases, these values are ignored by the keyboard/input method implementation.
//
typedef enum {
UITextAutocapitalizationTypeNone,
UITextAutocapitalizationTypeWords,
UITextAutocapitalizationTypeSentences,
UITextAutocapitalizationTypeAllCharacters,
} UITextAutocapitalizationType;

//
// UITextAutocorrectionType
//
// Controls keyboard autocorrection behavior for a text widget.
// Note: Some input methods do not support inline autocorrection, and
// instead use a conversion and/or candidate selection methodology. In such
// cases, these values are ignored by the keyboard/input method implementation.
//
typedef enum {
UITextAutocorrectionTypeDefault,
UITextAutocorrectionTypeNo,
UITextAutocorrectionTypeYes,
} UITextAutocorrectionType;

//
// UIKeyboardType
//
// Requests that a particular keyboard type be displayed when a text widget
// becomes first responder.
// Note: Some keyboard/input methods types may not support every variant.
// In such cases, the input method will make a best effort to find a close
// match to the requested type (e.g. displaying UIKeyboardTypeNumbersAndPunctuation
// type if UIKeyboardTypeNumberPad is not supported).
//
typedef enum {
UIKeyboardTypeDefault, // Default type for the current input method.
UIKeyboardTypeASCIICapable, // Displays a keyboard which can enter ASCII characters, non-ASCII keyboards remain active
UIKeyboardTypeNumbersAndPunctuation, // Numbers and assorted punctuation.
UIKeyboardTypeURL, // A type optimized for URL entry (shows. / .com prominently).
UIKeyboardTypeNumberPad, // A number pad (0-9). Suitable for PIN entry.
UIKeyboardTypePhonePad, // A phone pad (1-9, *, 0, #, with letters under the numbers).
UIKeyboardTypeNamePhonePad, // A type optimized for entering a person's name or phone number.
UIKeyboardTypeEmailAddress, // A type optimized for multiple email address entry (shows space @. prominently).

UIKeyboardTypeAlphabet = UIKeyboardTypeASCIICapable, // Deprecated

} UIKeyboardType;

//
// UIKeyboardAppearance
//
// Requests a keyboard appearance be used when a text widget
// becomes first responder…
// Note: Some keyboard/input methods types may not support every variant.
// In such cases, the input method will make a best effort to find a close
// match to the requested type.
//
typedef enum {
UIKeyboardAppearanceDefault, // Default apperance for the current input method.
UIKeyboardAppearanceAlert, // Appearance suitable for use in «alert» scenarios.
} UIKeyboardAppearance;

//
// UIReturnKeyType
//
// Controls the display of the return key.
//
// Note: This enum is under discussion and may be replaced with a
// different implementation.
//
typedef enum {
UIReturnKeyDefault,
UIReturnKeyGo,
UIReturnKeyGoogle,
UIReturnKeyJoin,
UIReturnKeyNext,
UIReturnKeyRoute,
UIReturnKeySearch,
UIReturnKeySend,
UIReturnKeyYahoo,
UIReturnKeyDone,
UIReturnKeyEmergencyCall,
} UIReturnKeyType;

//
// UITextInputTraits
//
// Controls features of text widgets (or other custom objects that might wish
// to respond to keyboard input).
//
@protocol UITextInputTraits

@optional

@property(nonatomic) UITextAutocapitalizationType autocapitalizationType; // default is UITextAutocapitalizationTypeNone
@property(nonatomic) UITextAutocorrectionType autocorrectionType; // default is UITextAutocorrectionTypeDefault
@property(nonatomic) UIKeyboardType keyboardType; // default is UIKeyboardTypeDefault
@property(nonatomic) UIKeyboardAppearance keyboardAppearance; // default is UIKeyboardAppearanceDefault
@property(nonatomic) UIReturnKeyType returnKeyType; // default is UIReturnKeyDefault (See note under UIReturnKeyType enum)
@property(nonatomic) BOOL enablesReturnKeyAutomatically; // default is NO (when YES, will automatically disable return key when text widget has zero-length contents, and will automatically enable when text widget has non-zero-length contents)
@property(nonatomic,getter=isSecureTextEntry) BOOL secureTextEntry; // default is NO

@end
+4
sanch3z #
Ну что вы наделали? Вы же человеку жизнь калечите. Теперь им придется казнить своего быдло-дизайнера)
+1
Pollux #
Мне понравилось! Автор проделе огромную работу! Респект
+1
Vizzy #
Если руководство компании разумное, то они уже должны как минимум предлагать вам вакансию дизайнера интерфейсов под айфон.
+13
arbyte #
Добрый вечер всем, у меня нет аккаунта на хабре, поэтому я попросил написать пост моего друга — arbyte, т.к. возможны некоторые непонятки в дальнейшем. В часности обвинения в плагиате и т.д.

Я делал варианты редизайна текущего интерфейса «Киви в мобильном», все скрины показать не могу, но вот уменьшенные картинки некоторых страниц.

Из-за того, что все люди думают одинаково в редизайне есть и терминал и чек и смятый чек и деньги. Есть двадцать вариантов иконок приложения, в т.ч. с фоном в виде терминала.
Выложить флеш-демо интерфейса я тоже не могу, но уверяю вас, анимация там адекватная.

Так или иначе, автору темы рекспект за работу! Хоть меня иногда и шокирует, когда понимаю насколько мы все одинаковые))


+1
fearout #
А можно в чуть большем размере? Идея с листающимися внизу чеками нравится, клевая, мне не приходило в голову так историю представить :)
0
spycode #
Выглядит красиво, но не юзабельно особо, это уже от любви кастомера к рюшечкам, делал как слайдин горизонтальный только с товарами рекомедуюмыми, есть случаи случаного надимания и не у всех есть понимание что можно горизогтально листать. Такие же мысли по жкрану платежи, тоже лишь красивости но хромает информативность, данное решение я бы предложил лишь для изображений каких либо и то которые не понадобится сортировать лишь для беглого быстрого поиска и наглядности. В вашем же случае один айтем является не самодостаточным, я бы сказал что не верно тратится простаранство, либо как вариант уменьгения информации на представлемых чеках, вообщем тут спорно, и вообще по приложению много вопросов.
0
fearout #
Юзабельность будет зависеть от реализации, а тут, я сказал, мне понравилась идея. Awesome Note, к примеру, такой стиль подачи удобно реализовал.
0
spycode #
Согласен, я просто подумал что вы решили позаимствовать для киви клиента эту реализацию… А по Awesome Note, конечно мега продуманное приложение, но ребята думаю не просто так предусмотрели вариант переключения список, окна, ведь для некоторых не особо чем то пользользующихся необходимо красиво, а не функционально и раработчики понимали думмаю, что в силу аудитории приложения, они должны охватывать большую айдиторию, даже ту которая любить когда красиво. Хоть тут может есть, какие аспекты реализации и удобства которые я не вижу, так как не особо для меня используемое повседневно приложение.
+4
spycode #
Вы конечно извините, но у автора темы видно, что больше опыта и понимания пользовательских интерфесов. Схожеть в рисованом терминале и чеках, не критерий схожести, все таки у Вас разные подходы к самому интерфейсу. Вот у меня на работе, как раз в большинстве случаев мокапы имеют то что показали Вы, но хотелось бы чтобы были как у автора, в силу того что в мокапах есть очень понятное поведение будущего приложения. Т.е. интерфейс как я думаю строится понимания взаимодействия, а не пусть будет тут это, а вот сюда давайте это, вот как например на последнем слево направо в первом ряду. Это же ужас, хотя признаться стоит что понимаю что многие решения регламинтируются кастомером а не дизайнером, хотя тоже бывают и хреновые дизанеры. И по вагему редизайну тоже очень много вопросов.))) Вообщем, это только мое мнение)
0
asoloviev #
Отличная работа, намного лучше сабжевого оригинала.
+2
mono2k #
Начало хорошее! Теперь о грустном

а) псевдообъемные элементы списка — буэээ, не по гайдлайну. Элемент либо имеет объем и является кнопкой, либо плоский и является, например, элементом списка. Это у вас самый большой косяк :-)

б) задумка с чеком/квитанцией хорошая, но недоделанная имхо. Вводить данные все же привычнее во что-нибудь более стандартное, а чек/квитанцию можно показывать на шаге подтверждения платежа и/или сохранять в истории исключительно как декоративный элемент «на память».

а вообще конечно сделано здорово!
0
fearout #
А) По-моему, они по внешнему виду полностью соответствуют тому, чего ожидаешь в айфоне. Плюс объемные те, что нажимаются в принципе как кнопки. А история, к примеру, не объемная. Но критика принимается, окей :)

Б) Я уже тоже подумал, что стоит оставить там поле ввода также, как и для несохраненного пополнения.
0
mono2k #
там их два вида, те что немного вогнуты — выглядят замечательно, те что выпуклые, как кнопки, — буээ. Обратите внимание, что эппл кодирует назначение элемента не только формой, но и цветом. В вашем случае два разных элемента (кнопка и элемент списка) имеют практически одинаковую форму и цвет…

Еще непонятно, что будет при нажатии на те поля, которые подразумевают ввод информации (номер телефона например). У эппла на плоском элементе поле редактирования выглядит весьма органично, а у вас получится редактирование лейбла кнопки а-ля какой-нибудь interface builder & etc.
0
mono2k #
да, собственно говоря поле ввода у вас уже есть, и это отдельный, третий вид элемента. Сомневаюсь, что он органично впишется на элемент с номером телефона в режиме ввода информации…

как-то так Ж)
0
spycode #
1) Как раз по гайду и вообще придерживается общего представления таблиц (Линейный, Группа).
2) Ну, тут может стоит немного сместить фокус на вводиму информацию (чтобы поля ввода было видно активным, а остальное лишь приглушенный фон)
+1
ancle #
1. как объянить юзеру чего куда вводить на «кредитке».
2. на месте компании киви я бы всё украл и мне бы за это ничего небыло ж)
0
fearout #
1) Кредитку вообще надо полностью перерисовать в нормальном виде. Добавил скорее как реквест функции :) А по задумке — там подсказки есть полупрозрачные, пока не ввел что-то туда.
2) Посмотрим :)
0
spycode #
Для ввода кредитки есть смысл использовать плавающие поля ввода. Т.е. есть в список полей с необходимой для ввода полями, при тапе на поле выезжает клавиатура согласно типу поля (цифра, текст), само поле плавно съезжает на клавиатурой, над полем что-то вроде всплываюшего окошка (облака) на котором нарисована та сторона кредиски с которой неоюходимо ввести инфу и по поле находится в красной рамке.
После клика на клаве «дальше» к примеру, повторяются шаги. После прохождения всех полей отображается кредится с введенными даными ее можно переворачивать. Где-то под ней есть редоктировать и подтвердить.

Как вариант.
0
nLight #
Данные кредитки реальные? ;D
0
fearout #
Сомневаюсь, что номера кредиток могут начинаться на 1234 :)
+2
Aux #
Вот по-больше бы таких людей было причастно к выпуску софта! Эх, мечты…
+1
xvoland #
Кончил =)
0
lavel #
Хотел у автора уточнить, будет ли он против использования некоторых его идей в аналогичном приложении для android? И если будет, то что нужно сделать, чтобы он перестал быть против? ;-)
+1
fearout #
Ну, автор наверняка будет не против материального поощрения, просто чего-нибудь клевого (разных там знаний, лайфхаков, пропусков куда-нибудь или просто какой-нить обалденной никому не нужной штуковины), но идеи авторским правом не охраняются, так что пользоваться ими я вам не запрещу :)

Если будет хорошее приложене — мне не жалко.
+2
lavel #
Хорошо, тогда я постараюсь сделать хорошее приложение и не остаться неблагодарным :-)
+1
danin #
если не трудно, расскажите потом — чем закончился ваш диалог с кивийцами? )
0
z0rg #
а можно поинтересоваться, в xcode набросали? или есть какойто софт для UI Design?
+2
fearout #
Есть такой софт — фотошоп. Все от и до в нем нарисовано.
+1
yeleleo #
Было обрадовался за qiwi…
… надеюсь, они у вас купят ваш проект :)
0
sonicCat #
красиво но
кастомная клавиатура ввода пароля + кастомное поле над такой клавой
кастомные навбар? + кнопки ( надеюсь это вы так отобразили дефалтовый )
кастомный таббар? такой фон не прокатит для тефалтового
градиент для групповой таблицы ( Оплата услуг к примеру ) — кастоный целл с ручной отрисовкой

поле ввода с белыми и серыми цифрами? это уже фантастика
о кастомном фоне на переключателе в настройках тоже можно забыть

во всем остальном круто ))
но получилось дорого
+1
MADViC #
Отличная работа. Такие люди всегда вызывают уважение. Жаль что не могу плюсануть!

Вот мне всегда было обидно, что жирные компании с огромными бюджетами тупо не хотят заплатить 2-5к баксов умному дизайнеру интерфейсов. Для них это сущие копейки.

Как часто в странах СНГ бывает — если и выделяются деньги на разработку чего-то хорошего, как правило этим пользуются руководители отделов и просто заказывают у фирм, которые сделают настоящее УГ и получают откат. Причем зачастую этот откат намного больше, чем стоимость, заплаченная УГ-компании.
+1
Podlyakov #
А вы сами представляете себе как хранить данные о ВСЕХ ТЕРМИНАЛАХ что их находить на гугле, да и перемещают их владельце на дню не раз.

Меня автомат с АХУЕШИМ красным глазом пугает… точняк заберет бабло в никуда.
+1
anonimouse #
Очень интересная тема.
бешеная работа проделана.
Проект просто замечательный.
Авторы молодцы
0
glazs #
Если не прошла оплата, не нужно сминать чек. Сминать нужно при отмене, при ошибке должна быть возможность исправить/повторить.
0
tarya #
Очень качественная работа
0
ilyas #
Понравилось.
Автор молодец.
0
cucik #
Вочик, потрясно. Личный респект автору! :-)
0
thargon #
Все мегаохуенна. Буду сегодня под микроскопом изучать)) Есть конечно к чему придраться, но я бы только подсказал, что на денежках вместе с цветом, при возрастании суммы нужно менять и кодирование для людей с ограниченным зрением в виде полосочек и кружка на белом поле.
0
trueowl #
не работал с оригинальным приложением, но возник вопрос: в чём разница между «мобильник» и «сотовый» на этом скриншоте?
0
kirchenn #
Овл, это имелось в виду, что мобильник — это твой сотовый, занесённый в избранное (называется просто «мобильник», идет без номера). А сотовый — это любой другой сотовый, на который ты скидывал деньги (рядом идет расшифровка номера)
0
cro #
О, как неожиданно видеть тут одногруппника!
Молодец.
0
cro #
Простите, это относилось к человеку из комментариев, а не к автору :)
0
salvadorz #
Какой софт использовался для проектировки интерфейса?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.