Interface redesign

[jilleb]

Open Vehicles version number 4 is getting closer... how about a redesign, Material design style?
Here's a quick mock-up I made of the first screen:

[dexterbg]

Nice. I'd prefer something more technical looking though, this is more like a business presentation.
I like the BMW i3 App design:
http://www.autovolt-magazine.com/wp-content/uploads/2013/07/bmw-i-app.jpg

[jilleb]

Wow, I actually like that a lot!
Now I think of it... the current OVMS resembles the Model S interface:

http://www.tech5.nl/files/2013/09/tesla-modle-s-app.jpg

http://insideevs.com/wp-content/uploads/2013/12/model-s-app.jpg

Currently the OVMS Battery screen is pretty cluttered: Car image, connector, battery, range, eta, and not everything is alignedor has the same style. I could start by using the Model S app as an inspiration, e.g. on the battery bar, and improve the quality of the connector graphics, gather the data in a somewhat nicer way. What do you think?

[markwj]

Well, strictly speaking OVMS came first so the Model S interfaces resembles ours ;-)

On 23 Mar, 2015, at 6:23 pm, Chillout [email protected] wrote:

Wow, I actually like that a lot!
Now I think of it... the current OVMS resembles the Model S interface:

http://www.tech5.nl/files/2013/09/tesla-modle-s-app.jpg http://www.tech5.nl/files/2013/09/tesla-modle-s-app.jpg
http://insideevs.com/wp-content/uploads/2013/12/model-s-app.jpg http://insideevs.com/wp-content/uploads/2013/12/model-s-app.jpg
Currently the OVMS Battery screen is pretty cluttered: Car image, connector, battery, range, eta, and not everything is alignedor has the same style. I could start by using the Model S app as an inspiration, e.g. on the battery bar, and improve the quality of the connector graphics, gather the data in a somewhat nicer way. What do you think?

—
Reply to this email directly or view it on GitHub #43 (comment).

[jilleb]

fair point :)
+1

[jilleb]

For starters, I did a slight redesign of the Charger plug graphic. It should look a bit better on bigger screens now. Here's an example:

[dexterbg]

Looks a lot better. Can you rework the charger_button.png as well? The low res slider looks strange in the new plug.

[jilleb]

Thanks.
Working on it :-)

[jilleb]

Something like this?

[dexterbg]

Looks good, but the arrows lack contrast, especially on low resolutions. Maybe adopt the red/green marker style, or fill the arrows otherwise?

[jilleb]

[jilleb]

I'm playing around with GUI-elements to refresh the lower part of the Battery screen a little more. Here´s a rough idea of what I´m having right now, this is far from final in any way, but feel free to shoot your ideas
Main goals I'm going for:

• user friendly
• clarity
• easy on the eyes
• following current app design standards
• no loss of data/features from current screen
  

[Saftwerk]

For my old eyes, the little text is too small to read without glasses.
Please make the smallest font bigger.

[glynhudson]

Wow! I love the material design mockup. Please keep the dark theme, like the Tesla app I think a dark theme looks good.

+1 for increasing the font size and button size for the important metrics and operations.

[amralomari]

Thanks for the great work :)

I think there is a bug; when you arrive at Location screen you can't swipe back to the Car screen, the only way is to use the drop-down list.

[Saftwerk]

You must start swiping from the edge of the screen. Don't start swiping from the middle area.Kind regards-------- Originalnachricht --------Betreff: Re: [openvehicles/Open-Vehicle-Android] Interface redesign (#43)Von: amralomari An: openvehicles/Open-Vehicle-Android Cc: Saftwerk ,Comment Thanks for the great work :) I think there is a bug; when you arrive at Location screen you can't swipe back to the Car screen, the only way is to use the drop-down list. —You are receiving this because you commented.Reply to this email directly, view it on GitHub, or mute the thread. [ { "@context": "http://schema.org", "@type": "EmailMessage", "potentialAction": { "@type": "ViewAction", "target": "#43 (comment)", "url": "#43 (comment)", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { "@type": "Organization", "name": "GitHub", "url": "https://github.com" } } ]