As I’m about to start writing this article, I remember being asked a few days ago, “Don’t designers usually prefer iphones? Why do you like Android?”
There are many reasons WHY I like Android, but I won’t discuss them in this article lest I share them with XD. In fact, iOS has many designers creating beautiful apps for it because of its excellent design. Therefore, when we read the experience of UI teaching and APP design, there are often more resources on iOS.
Since I love Android, I’m going to write for Green Robots, throw out my brick, and hope there’s more Android design.
Use tools Sketch | inVision | Zeplin
There are plenty of teaching articles about Sketch on the Internet for those who are new to it. If you know how to use Photoshop and Illustrator, it’s not that hard to get started with Sketch. You just have to break the habit of always wanting to press V to switch to the selection tool
To make an APP, there are a lot of preparatory work to do. When everything is ready and the Wireframe communicated with PM and engineer is confirmed to be ok, I will start to draw fine pictures with Sketch. (The process is different for each company. I work for a start-up company, so the production schedule is different from that of a large software company that requires rigor and stability.)
The new version of Sketch has a Material Design template built in, which can be used directly. The problem is that Sketch provides a 360 * 640 MDPI prototype, whereas I’m used to 720 * 1232 xhdpi.
- Because of the use of inVision, and its suggested production size is 720 * 1232
- During production, I will use Skala Preview to throw the image onto the phone for Preview, and my Moto X is the XHDPI screen
- Because the mainstream screen is xHDPI or even XXHDPI (Nexus 5), it’s easier to fit more small details into a larger screen
- If the app has both Android and iOS platform versions, I will first draw a version with 720*1232 on Android, and then copy it to iOS and adjust it to 750 * 1334 after confirming. Then change the details to the iOS style. This allows for consistency across multiple platforms and speed of development.
One thing to notice here is that the width 720 becomes 750 not by magnifying, but by just extending the X-axis. Since you have to consider the width of different devices when drawing Android, changing the screen width to 750 when porting to iOS is like pulling the browser screen from 720 to 750. It doesn’t make any difference.
Therefore, I prefer to use XHDPI for drawing, but both the sample provided by Sketch and the official Material Design file downloaded from Google on the Internet (in fact, they are the same) are mdPI size. So I enlarged the official version and adjusted an XHDPI version, which can be downloaded here.
After you have solved the problem of the sample, you can start drawing! Since various font sizes of Material Design have been set in the sample, it is convenient to apply directly to the parts with text.
The process of drawing is to draw on one side and then use Skala Preview to throw it on the phone for a Preview.
Finally, after finishing the draft and setting which layers should be cut into the Sketch, I will use a plug-in Sketch Notebook to mark the design draft and tell the engineers which images are used in the design draft and what their names are, so that the engineers can develop it more efficiently.
It’s easy to use. Once you’ve installed the plug-in, click on the layer you want to annotate, press Control + Option + Command + 9, and enter what you want to annotate in the dialog box that pops up. This plugin didn’t work properly in Sketch 3.3, but someone fixed it on Github. If your version doesn’t work, you can download the js file I’ve modified and put it in the Sketch Notebook > library in your Sketch plugin folder. Instead of the original Notebook. Js, it should work.
Note: How to open the Sketch Plugins Folder? Click Reveal Plugins Folder…
Once the file is labeled, press Command + E and send it to the Zeplin APP, which is already installed. This allowed the engineer to see the size, relative position, color, and so on of each component directly in his own Zeplin.
Life should be wasted on beautiful things, if the width and height of components have to be marked by designers that is really a waste of life ah! (Temporary changes to graphics and features are not uncommon, especially at startups.) Let Zeplin handle this one, and the engineers can click on the mouse to see which one they want to see.
After transferring the image to Zeplin, I’ll press Control + Option + Command + 0 on the previous layer to close the Sketch Notebook annotation window that just opened. Then I let the inVision desktop sync plug-in resume sync and sync my new images to the inVision cloud. (I usually leave inVision sync on hold when I’m drawing, so it doesn’t cut into files I haven’t sorted out yet.)
It’s time to take a water break and wait for inVision to sync up. Because the images to be cut, the size to be cut and the file name have all been set when the manuscript is finished, inVision will automatically cut the images for you and put them into Assets of inVision’s sub-folder after the synchronization is completed.
Therefore, I will share the project of inVision with the engineers in cooperation, and ask them to install inVision’s desktop synchronization app, so that every time I finish my work, inVision will automatically upload and update the latest image files, and automatically synchronize a copy to the engineer’s computer. Engineers do not need to download the image files from the hard disk of the Internet. They can click on the folder of their hard disk to get the latest files. In the process of making the whole app, this back-and-forth saves a considerable amount of time.
Above, this is my workflow of creating Android APP using Sketch. Use these handy tools to save more time during development
That time could be spent designing more great features, reading more great articles, or eating more great food.