Aller au contenu


Photo

IHM Mobile UI comment faire


  • Please log in to reply
12 réponses à ce sujet

#1 Machaon

Machaon

    Eleveur de cacaoyers

  • Membre
  • PipPip
  • 31 messages

Posté 27 novembre 2017 - 19:06

Bonsoir à tous,

 

je travaille actuellement sur l'aspect graphique de mon appli.

En surfant, je trouve des interfaces comme celle en PJ qui me plaisent bien, je trouve cela simple, sexy et efficace.

 

Evidement, on ne peut pas faire ça sans écrire de code, savez-vous donc comment (à partir de la capture de droite) :

1/ Passer en noir la partie haute de l'écran (ça ne devrait pas être trop difficile et je n'ai pas encore cherché j'avoue)

2/ Créer des "bulles" : rectangle aux angles arrondis et ombrés comme ceux au centre de l'écran ?

3/ Faire un effet ombré (ombragé ?? bref, une ombre projetée je veux dire) sur les haut et bas de l'écran ?

 

Merci beaucoup pour votre aide.

 

Julien

Fichier(s) joint(s)



#2 Machaon

Machaon

    Eleveur de cacaoyers

  • Membre
  • PipPip
  • 31 messages

Posté 27 novembre 2017 - 19:12

Bon... ok, j'ai cherché 2mn pour le premier point et j'ai trouvé :

navigationController?.navigationBar.barTintColor = UIColor.green


#3 helio

helio

    Ecabosseur en fèves

  • Membre
  • PipPipPipPip
  • 233 messages

Posté 27 novembre 2017 - 21:00

Pour le point 2 : utiliser cornerRadius 

cornerRadius
The radius to use when drawing rounded corners for the layer’s background. Animatable.
 
Pour le point 3 : un exemple 


#4 Machaon

Machaon

    Eleveur de cacaoyers

  • Membre
  • PipPip
  • 31 messages

Posté 28 novembre 2017 - 08:48

Merci pour ton aide rapide helio.



#5 Céroce

Céroce

    Mouleur de chocolats

  • Contrôleur d'arômes
  • 5 384 messages
  • LocationSaint-Leu-d'Esserent / France

Posté 28 novembre 2017 - 09:35

 

3/ Faire un effet ombré (ombragé ?? bref, une ombre projetée je veux dire) sur les haut et bas de l'écran ?

CALayer.shadowOpacity, .shadowRadius, .shadowOffset, .shadowColor.

 

Dans ton exemple, ça me paraît carrément exagéré. Est-ce une copie d'écran d'une vraie application? J'en doute.


RenaudPradenc.com Je suis développeur iOS & Mac indépendant.

#6 LeChatNoir

LeChatNoir

    Brasseur de pâte à cacao

  • Contrôleur d'arômes
  • 3 226 messages
  • LocationLyon

Posté 28 novembre 2017 - 14:25

Oui, c'est assez simple.

Sinon, tu as ça : https://github.com/aclissold/CardView

 

Et/ou ces 2 framework qui sont assez sympas car ils "simulent" tout ce qui est material design :

https://github.com/CosmicMind/Material

 

et https://github.com/m...-components-ios

 

Pas testé perso mais je vais sans doute m'y mettre dans les mois qui viennent...


Le Chat Noir, développeur à ses heures...
Application passion => ClimbingAway

#7 Machaon

Machaon

    Eleveur de cacaoyers

  • Membre
  • PipPip
  • 31 messages

Posté 30 novembre 2017 - 21:55

Merci pour vos réponses.

Pas sur que cela soit une vraie app, mais en tout cas c'est joli.



#8 Céroce

Céroce

    Mouleur de chocolats

  • Contrôleur d'arômes
  • 5 384 messages
  • LocationSaint-Leu-d'Esserent / France

Posté 01 décembre 2017 - 09:27

Ouais, mais c'est juste un exercice de graphiste, pas de designer: aucune contrainte n'est prise en compte.

 

Ci-joint, mes annotations.

Fichier joint  post-6242-0-53060500-1511805815.png   614,92 Ko   1 téléchargement(s)


RenaudPradenc.com Je suis développeur iOS & Mac indépendant.

#9 Machaon

Machaon

    Eleveur de cacaoyers

  • Membre
  • PipPip
  • 31 messages

Posté 04 décembre 2017 - 20:54

Ouais, mais c'est juste un exercice de graphiste, pas de designer: aucune contrainte n'est prise en compte.

 

Ci-joint, mes annotations.

attachicon.gifpost-6242-0-53060500-1511805815.png

 

Oui en effet, je comprends mieux ce que tu veux dire.

 

Ce genre de truc aussi ça le fait bien mais ça ne semble pas réaliste pour un franc :

https://www.behance....App-Interaction



#10 Céroce

Céroce

    Mouleur de chocolats

  • Contrôleur d'arômes
  • 5 384 messages
  • LocationSaint-Leu-d'Esserent / France

Posté 05 décembre 2017 - 09:00

Oui, il y a une bonne moitié d'exemples qui perdraient complètement l'utilisateur.

 

Et en pratique, les animations peuvent rapidement devenir pénible. Il faut les utiliser avec parcimonie pour donner des indications à l'utilisateur quant aux enchainements logiques et avec quels éléments il peut interagir.

 

Les indications données par Google pour le Material Design, me semblent pertinentes aussi sur iOS:

https://material.io/guidelines/motion/


RenaudPradenc.com Je suis développeur iOS & Mac indépendant.

#11 LeChatNoir

LeChatNoir

    Brasseur de pâte à cacao

  • Contrôleur d'arômes
  • 3 226 messages
  • LocationLyon

Posté 05 décembre 2017 - 09:42

+1

Je trouve que Google innove bcp plus ces derniers temps sur le design et accompagne ses développeurs.

 

Le design d'iOS11, je le comprends pas bien... Ces gros titre noirs en gras... Je sais pas... Ou alors j'ai loupé un truc ?


  • iLandes aime ceci
Le Chat Noir, développeur à ses heures...
Application passion => ClimbingAway

#12 Larme

Larme

    Brasseur de pâte à cacao

  • Artisan chocolatier
  • PipPipPipPipPipPipPip
  • 2 007 messages
  • LocationParis

Posté 05 décembre 2017 - 10:35

Oui en effet, je comprends mieux ce que tu veux dire.

 

Ce genre de truc aussi ça le fait bien mais ça ne semble pas réaliste pour un franc :

https://www.behance....App-Interaction

 

Il y a des animations très sympas. Mais c'est d'un point de vu utilisateur rapide et/ou « graphiste ».

Parce que dans la pratique, pas mal de ces animations/designs ne sont pas pratiques du tout. Ça fait beau sur un folio.

 

Sinon le gros problème des animations, ce sont les animations.

Je veux dire que d'une part tous les graphistes/designers ne savent pas forcément en faire (c'est un autre pan/branche de leur métier), et ce qui comme d'habitude peut-être « rapidement » fait sur leur logiciel d'animation ne l'est pas forcément pour nous.

Il y a d'abord la partie où on comprend l'animation, et vu que les conversations entre designers et développeurs ne sont pas toujours évidentes pour des trucs statiques, de manière animée, j'ai déjà peur.

Mais la second grosse partie, c'est de faire l'animation par code. La gestion des vues, etc n'est pas forcément en adéquation immédiate avec les outils qu'on a. Si on prend le cas d'un UITableView, c'est une UITableView, des UITableViewCells, et c'est géré par datasource/delegate, etc. C'est pas aussi évident de dire à une vue d'aller d'une cellule à une autre avec animation. Surtout que le développeur pense en général au cas limite (ce qui n'est pas forcément le cas des autres).

Et enfin, la dernière partie, principale raison pour laquelle on n'en fait pas énormément : le temps. L'investissement pour créer une animation comparée à l'impact du « wahou », à la deadline, au prix du développeur à l'heure, etc. Pour des applications pérennes où on a des développeurs toute l'année, où l'application est dans une phase « finalisée » (tout est fonctionnelle, on rajoute du vernis via des animations), ok, mais c'est n'est pas le cas de tout le monde.


  • Joanna Carter et Luc-A aiment ceci
Tant que vous avez des dents, mangez des pommes. Tant que vous avez de l'argent, croquez la Pomme.

#13 Machaon

Machaon

    Eleveur de cacaoyers

  • Membre
  • PipPip
  • 31 messages

Posté 09 décembre 2017 - 18:01

Il y a des animations très sympas. Mais c'est d'un point de vu utilisateur rapide et/ou « graphiste ».

Parce que dans la pratique, pas mal de ces animations/designs ne sont pas pratiques du tout. Ça fait beau sur un folio.

 

Sinon le gros problème des animations, ce sont les animations.

Je veux dire que d'une part tous les graphistes/designers ne savent pas forcément en faire (c'est un autre pan/branche de leur métier), et ce qui comme d'habitude peut-être « rapidement » fait sur leur logiciel d'animation ne l'est pas forcément pour nous.

Il y a d'abord la partie où on comprend l'animation, et vu que les conversations entre designers et développeurs ne sont pas toujours évidentes pour des trucs statiques, de manière animée, j'ai déjà peur.

Mais la second grosse partie, c'est de faire l'animation par code. La gestion des vues, etc n'est pas forcément en adéquation immédiate avec les outils qu'on a. Si on prend le cas d'un UITableView, c'est une UITableView, des UITableViewCells, et c'est géré par datasource/delegate, etc. C'est pas aussi évident de dire à une vue d'aller d'une cellule à une autre avec animation. Surtout que le développeur pense en général au cas limite (ce qui n'est pas forcément le cas des autres).

Et enfin, la dernière partie, principale raison pour laquelle on n'en fait pas énormément : le temps. L'investissement pour créer une animation comparée à l'impact du « wahou », à la deadline, au prix du développeur à l'heure, etc. Pour des applications pérennes où on a des développeurs toute l'année, où l'application est dans une phase « finalisée » (tout est fonctionnelle, on rajoute du vernis via des animations), ok, mais c'est n'est pas le cas de tout le monde.

 

En effet, je me rend bien compte que c'est un autre métier et que cela prend un temps fou à coder.

Enfin, le coût de la modification est énorme et nécessite de tout coder. 

Toutefois quelques animations légères améliorent considérablement l'expérience de l'utilisateur.






0 utilisateur(s) li(sen)t ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)