TODO Android App Engineer @ Google 1YouTube↗  IA↗(long shot)
Education  32.7K views 315 likes 7 dislikes   06 Jun 2016
Udacity 651K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
Je m'appelle Kirill Grouchnikov, je travaille pour Google depuis 5 ans,
Меня зовут Кирилл Грючников, последние 5 лет я работаю в Google,
et je travaille pour les clients sur l'interface graphique du Play Store.
занимаюсь Play store - клиентской частью и UI.
>> Ok, trop fort, et qu'est-ce qui te plaît là-dedans ?
Отлично, и что же тебе в этом нравится?
>> Eh bien j'ai toujours aimé coder et en voir les pixels s'animer à l'écran.
Мне всегда нравилось писать код и видеть, как на экране загораются пиксели.
Voici donc l'application Play, Google play.
Итак, это Play App, приложение Google Play.
En partant du haut, on a le champ de recherche, puis on a
Сверху-вниз, здесь есть поле поиска и вот эти,
des « liens rapides » pour aller voir diverses sous-sections de l'application,
мы называем их ссылками быстрого доступа к другим частям приложения
du magasin.
и магазина.
On a ensuite divers contenus ici, on a des groupes de vignettes.
Здесь у нас различный контент, карточки приложений.
On a ça,
Вот еще, это баннер,
une « bannière », pour se rendre à d'autres endroits de l'application.
он ведет в другую часть приложения.
On peut voir la page détaillée d'un élément en particulier,
Можно открыть страницу с деталями о каком-либо элементе,
mettons Angry Birds Stella POP, et c'est là qu'on montre, en gros,
пусть это будет Angry Birds Telepods, то, что мы здесь отображаем,
un mélange d'informations fournies par le développeur.
своего рода смесь информации, предоставленной разработчиком.
On a la vidéo de l'application.
Вот видео о приложении.
Puis une description courte des captures de l'application.
Затем, краткое описание скриншотов.
Puis on a le contenu utilisateur, des tests et des évaluations de l'application.
Здесь пользовательский контент: отзывы и рейтинг приложения.
Un peu plus de contenu lié.
И еще немного связанного контента.
Puis ici, quelques liens.
Пара ссылок.
On peut ensuite, même depuis la fiche d'information,
Также можно перейти со страницы с детальной информацией.
lancer le processus d'installation.
Вы можете начать процесс установки.
On demande les autorisations ici,
Разрешения.
on poursuit en les acceptant,
А теперь мы их принимаем.
et ça commence.
И начинается.
On le voit ici, l'application s'installe.
Вот здесь можно увидеть, что началась загрузка приложения.
Les étudiants apprennent à utiliser les classes TextView, ImageView et Button.
Итак, студенты изучали представления типов текст и изображение, а также кнопки.
Tu pourrais nous en montrer dans les applications ?
Вы могли бы показать здесь пару таких элементов?
>> Oui, revenons sur les vignettes, si on observe celle de Star Wars Rebels,
Да, посмотрим на карточки приложений, например, на Star Wars Rebels.
la vignette est une extension d'un groupe View,
Сама карточка - элемент группы представлений.
mais ce peut être une simple extension de notre élégant modèle,
Она может быть такой же простой, как расширение нашего превосходного макета,
et donc la miniature est de classe ImageView.
и тогда эта маленькая картинка будет <b>ImageView</b>.
Et on a ce, le
А вот здесь - Star Wars Rebel,
« Star Wars Rebels », une TextView qui supporte jusqu'à deux lignes max.
текстовое представление, которое достигает максимум двух строк.
L'évaluation qui, ben, donne l'évaluation.
Рейтинг - это, ну, рейтинг.
Le « Gratuit » est une TextView et les points de suspension sont une ImageView
"free" - текстовое представление, точки - <b>ImageView</b>, источником которого
dont la source pointe sur un PNG spécial qui ressemble à trois points ;
задано определенное изображение PNG, которое выглядит, как 3 точки.
de même pour les liens rapides, donc
То же самое для ссылок быстрого доступа,
on a une disposition relative, avec une ImageView à gauche,
то есть это <b>RelativeLayout</b> с <b>ImageView</b> слева.
puis la TextView en mode Ligne unique qui se place à droite de l'ImageView,
И затем <b>TextView</b> в виде одиночной линии, идущей справа от этого <b>ImageView</b>
et qui s'étend en fonction des besoins.
и продолжающейся столько, сколько это необходимо.
Ils ont le fond qui pointe
Также тут есть фон,
sur une zone de dessin qui a un fond vers et des coins arrondis.
заданный как зеленая картинка с закругленными углами.
Au bout du compte, comme tu dis, tout se résume à prendre ces briques très
Так что, по сути, все сводится к базовым строительным блокам -
simples, les TextViews, ImageViews, et des fois les barres d'évaluation
<b>TextViews</b>, <b>ImageViews</b>, временами поле рейтинга,
ou de progression, l'indicateur de chargement, les cases à cocher,
индикатор прогресса, выпадающий список, чекбокс, радиокнопка.
et de les combiner suivant ce que votre conception montre sur un écran donné.
Они комбинируются в зависимости от требований дизайна каждого экрана.
>> C'est vraiment cool car les étudiants voient ça dès leur tout premier
Да, здорово, студенты изучают это на самом первом занятии по Android,
cours sur Android et on l'utilise tous les jours dans l'application Google play.
а ты используешь каждый день, разрабатывая приложение Google Play.
Tu as dit parler avec un concepteur.
Ты упомянул работу с дизайнером.
Pourrais-tu décrire à quoi ressemble le processus ?
Ты мог бы описать, что собой представляет этот процесс?
>> On commence avec la productique, et
Он начинается с менеджеров продукта,
et de là, on commence à discuter avec les concepteurs
затем идет обсуждение с дизайнерами и инженерами,
et les ingénieurs sur le type de navigation dont on parle, et comment,
как будут происходить переходы с данного экрана,
avec de la chance, déjà à ce stade de la conception du site,
а дальше этот этап дизайна подразумевает, при удачном раскладе,
on commence à l'adapter aux écrans plus petits ou plus grands.
обдумывание, как мы адаптируем продукт к маленьким и большим экранам.
Après ça, on fait ce genre d'itérations
Затем мы проводим некие итерации,
pour afficher quelque chose à écran et commencer à valider l'approche globale.
располагаем что-то на экране и начинаем проверку общего метода.
Parce que des fois, on a une marque statique, ou peut-être de mouvement,
Иногда у вас есть статические или двигающиеся отметки
d'After Effects ou je ne sais quel outil des concepteurs,
после эффектов или других инструментов, которые используют дизайнеры.
on voit la marque sur l'écran du bureau,
И вы видите их на экране рабочего стола,
et en le passant sur le téléphone, l'impression est très différente.
а затем открываете на телефоне и они выглядят совершенно иначе.
Parce que l'écran est plus petit,
Потому что экран меньше.
ou que l'interaction est trop rapprochée, ou encore parce qu'on
Или из-за компактных интеракций, или же потому, что вы зависите
dépend de toutes ces grosses images alors que le réseau est lent.
от этих великолепных больших изображений, а соединение при этом медленное.
Ce qui fait qu'on démarre avec un écran qui n'affiche rien pendant cinq secondes.
Так что вы начинаете с этого экрана, который 5 секунд ничего не показывает.
Avec de la chance, via ce processus itératif, où…
Итак, надеюсь, мы выкинем этот итеративный процесс отсюда.
on affiche quelque chose à l'écran, pas forcément au pixel près,
Расположим на экране что-нибудь, не обязательно в технике "pixel perfect",
puis on peut revenir aux discussions de niveau produit et voir, « ok,
и можем возвращаться к обсуждениям на уровне продукта.
que faut-il bricoler ? »
Что нам нужно откорректировать?
>> Alors, pour les développeurs qui n'ont pas de concepteur
Итак, что можно предложить разработчикам, если у них в команде нет дизайнера,
tu as des conseils sur quoi faire pour rendre leur application plus jolie ?
как им заставить приложение выглядеть лучше?
>> Je recommande d'aller sur le site internet qui traite de la
Я бы предложил обратиться к вебсайту
conception matérielle et de s'y familiariser
и ознакомиться там с <b>Material Design</b>.
pas forcément avec les subtilités comme les arcs de mouvement ou
Нет нужды использовать мельчайшие части<i> motion arcs</i> и все эти интерполяторы,
les interpolateurs, mais de s'axer sur le tableau global.
достаточно сфокусироваться на большом изображении.
Il doit y avoir une grille cohérente sur toute l'application,
Чтобы обеспечить стабильное качество всего приложения,
ce sont les « lignes clés » ou ce que la conception appelle lignes clés.
обратимся к <b>key lines</b>, или тому, что дизайнеры называют <b>key lines</b>.
Verticales et horizontales, les éléments doivent suivre un genre de rythme visuel,
Элементы - вертикальные и горизонтальные - строятся согласно некому визуальному ритму
pour ne pas donner l'impression d'avoir été placés au hasard sur l'écran.
и нет ощущения, будто они разбросаны в случайном порядке по экрану.
on a donc la barre d'outils,
Вот <b>Панель инструментов.</b>
on peut avoir par exemple d'autres éléments de Chrome,
У вас тут могут быть и другие части Chrome,
comme la navigation sur l'écran,
например, навигационные элементы.
et de là le contenu lui-même, c'est génial quand tout est aligné sur
Дальше идет собственно контент, и хорошо, если все выстроено в соответствии
une même grille et qu'on a de la marge sur les bords
с одной сеткой координат, так что по бокам остаются поля.
et des éléments pas trop proches les uns des autres.
И элементы не находятся слишком близко друг к другу.
Ensuite on a la typographie.
Дальше идет оформление.
C'est un moyen génial de… visuellement,
Это великолепный способ передать визуально
transmettre l'importance relative des divers objets.
относительную значимость различных элементов.
Donc si on parle par exemple d'une boîte de réception, de Gmail, d'un client mail…
Возьмем для примера Inbox, Gmail или почтовое приложение
Si tout ces élements utilisent le même langage typographique,
Пусть все будет иметь один и тот же язык оформления.
donc la même couleur, la même taille, le même style,
Пусть все будет одного цвета, одного размера и одного стиля.
il n'est pas vraiment facile de tout repérer.
Разглядеть все это в таком случае будет весьма непросто.
Peut-être qu'il vaut mieux écrire la requête « Expéditeur »
Может быть, вы заходите сделать <b>None</b> полем отправителя.
un peu plus gros, donc le nom de l'expéditeur, ou le titre,
Чуть крупнее, как имя отправителя или заголовок письма,
ou passer en gras les premiers mots du sujet du courriel.
или чтобы первые несколько слов темы письма были полужирными.
Ça permettrait à l'utilisateur de tout repérer plus rapidement.
Благодаря этому пользователь будет быстрее просматривать страницу.
Sinon, ça dépend là encore du contenu, mais
Повторимся, что все зависит от вашего контента.
je ne recommande pas non plus d'utiliser trop de styles
Но я бы не рекомендовал использовать так много стилей
ou trop de tailles.
или различных размеров.
Trois ou quatre styles, si utilisés avec cohérence sur
3-4 стиля, последовательно используемые на различных экранах,
plusieurs écrans, pour que l'utilisateur comprenne, même inconsciemment,
позволят пользователю ориентироваться, пусть даже на подсознательном уровне.
comment en gros on fait quelque chose dans votre application,
У него будет своего рода картинка, как добиться желаемого от приложения
sans forcément lutter pour comprendre où se trouve l'information qu'il
и понять, где находится
ou elle cherche.
искомая информация.
Dernière chose, les couleurs.
И последнее, цвета.
À utiliser avec parcimonie, surtout pour le matériel.
Не используйте слишком много, особенно в <b>Панели инструментов</b>.
On tend un peu à utiliser de gros blocs de couleurs saturées,
Сейчас в моде словно бы крупные брызги насыщенных цветов,
ce qui est bon, surtout appliqués sur la barre d'état des appareils Lollipop.
и они отлично выглядят, особенно в случае статус-баров на устройствах на Lollipop.
Identifiez peut-être les couleurs dites de base et primaires.
Определите то, что мы называем акцентирующими и первичными цветами.
Identifiez quelques couleurs,
Выберите пару цветов.
et utilisez-les un peu pour, voilà, styliser l'aspect de votre application,
И используйте их для оформления элементов своего приложения,
donc les barres d'état, d'action, pourquoi pas un peu de navigation,
таких как <b>StatusBar</b>, <b>ActionBar</b> и, может быть, немного для бокового меню.
pour mettre en évidence que X est le bouton d'action flottante, ou
Используйте выделители и акценты для <b>floating action button</b>
peut-être attirer l'attention notamment sur un élément très important,
или, например, привлечь внимание к определенным важным элементам,
ce qu'on considère être un élément très important.
которые вы считаете действительно значимыми.
Je pense que ces trois points concourent à
Я думаю, эти три элемента еще немного подчеркивают
mettre un peu plus en avant le style visuel de l'application.
визуальный стиль приложения.
Bien sûr,
И, конечно, если у вас есть возможность
si on a l'occasion de faire équipe avec un concepteur, c'est appréciable.
включить в команду дизайнера, это всегда замечательно.
Similar videos:

TODO Android App Engineer @ Google 2
Udacity
17.8K views 171 likes 6 dislikes 06 Jun 201647% match


Download Free Android Books in Spanish | Android Beginner 05
Programming Tutorials
19.6K views 486 likes 8 dislikes 11 May 201537% match









Fake videos of real people -- and how to spot them | Supasorn Suwajanakorn
TED
1.2M views 21.4K likes 845 dislikes 25 Jul 201837% match




Increase Your Minecraft FPS for Free
ThioJoe
538.2K views 9.6K likes 2.1K dislikes 01 Jan 201637% match

3 (more) HOLLYWOOD EFFECTS in PREMIERE PRO
Cinecom.net
1.2M views 38.1K likes -1 dislikes 28 Aug 201837% match

3 HOLLYWOOD EFFECTS in PREMIERE PRO
Cinecom.net
907.1K views 28.5K likes -1 dislikes 19 Jun 201836% match

Studio AVD Android [Android Virtual Device] | Learning Android 07
Programming Tutorials
13.6K views 123 likes 4 dislikes 18 May 201536% match









Max Little: A test for Parkinson's with a phone call
TED
85.8K views 834 likes 26 dislikes 07 Aug 201236% match





Webinar KUKA.VisionTech
KUKA - Robots & Automation
2.9K views 39 likes 1 dislikes 12 Nov 202036% match



Floor Plan Design TUTORIAL
30X40 Design Workshop
1.5M views 37.5K likes 533 dislikes 09 Nov 201736% match

Libgdx for Android | Tutorial 07 | Inserting Images with SpriteBatch | How to make Android games
Programming Tutorials
13K views 176 likes 8 dislikes 05 Oct 201535% match









Debugging a Crash
Udacity
81.8K views 43 likes 1 dislikes 23 May 201535% match


Cómo Desarrollar Lógica de Programación
Programming Tutorials
89.3K views 2.3K likes 1.2K dislikes 02 Jun 201635% match









Rapid prototyping Google Glass - Tom Chi
TED-Ed
326.9K views 2.7K likes 54 dislikes 22 Jan 201335% match


Two Vortex Rings Colliding in SLOW MOTION - Smarter Every Day 195
SmarterEveryDay
13.3M views 415.8K likes 7.4K dislikes 20 Jun 201835% match





Elite Dangerous Scanner key bindings Beginners Guide
Ricardos Gaming
11.1K views 155 likes 9 dislikes 01 Nov 201835% match


Matt Mills: Image recognition that triggers augmented reality
TED
224K views 2K likes 82 dislikes 19 Jul 201235% match




FAST MOTION EFFECTS from Ariana Grande in PREMIERE PRO
Cinecom.net
657K views 26.3K likes -1 dislikes 16 Nov 201835% match

UNBOXING! Mewtwo & Mew Statue by DS Studio - Pokemon : Mewtwo Strikes Back
BAM Collectibles
31.8K views 738 likes 10 dislikes 04 Mar 202035% match

The Evolution of Search
Google
1.3M views 8.1K likes 1.6K dislikes 27 Nov 201135% match







Week 8
CS50
29.4K views 0 likes 0 dislikes 29 Oct 201435% match










3D TRACK YOUR CAMERA MOVEMENT (13 Reasons Why)
Cinecom.net
2M views 77.3K likes 640 dislikes 04 May 201835% match

UNBOXING! 6 Tails & 2 Tails Cloaked Naruto Statue by Jianke Studio
BAM Collectibles
425.9K views 7.4K likes 126 dislikes 10 Mar 202035% match


Poco M3 ¿El mejor teléfono calidad precio?
GTechMx
4.4K views 41 likes 10 dislikes 27 Jan 202135% match




¿COMO HACER APARECER UN ELEFANTE 🐘?- David Copperfield el "Mago Illuminati" - Video to Life REVELADO
Fake Buster
1.3M views 22.8K likes 2K dislikes 01 Dec 201835% match




HOW IS IT THIS CHEAP?! 😳 Akatsuki Itachi Uchiha w/ Susanoo | Naruto Statue Unboxing
BAM Collectibles
81.5K views 2.8K likes 64 dislikes 18 Feb 202134% match


Suzanne Lee: Grow your own clothes
TED
197.8K views 3.7K likes 133 dislikes 06 May 201134% match






Restore a laptop to its factory settings | install Windows Asus A541UA operating system
AirXander
9.8K views 239 likes 2 dislikes 09 Jan 202034% match




DJ screen (DJ Facade) DIY review: cheap, convenient and cool. Do it yourself.
China-Town smart buy
6.3K views 201 likes 2 dislikes 16 Jan 201834% match



Dan Berkenstock: The world is one big dataset. Now, how to photograph it ...
TED
55.8K views 602 likes 39 dislikes 04 Feb 201434% match





Settings Privacy About Contact Donate