本文已经翻译成中文《使用 Sketch 和 Pixate 构建 Material Design 原型 - 第一部分》,欢迎参加「掘金翻译计划」,翻译优质的技术文章。
Have you ever had a great idea for an app or wanted to demonstrate to someone how you think it would work? Have any of these things ever held you back?
- Lack of time to develop a proof of concept
- You not sure how well your colour scheme, layout, animations etc. would look
- You’re an app developer who’s not sure how to go about this design lark but you want to try it out
- You’re an app designer who wants to learn how Sketch and Pixate may benefit your design and prototype process
- You’re not sure if Material Design would improve your app but would like to see what it would look like (hopefully this one isn’t the case!)
If you can identify with any of these, or maybe you’re just inquisitive about either Sketch or Pixate, then I implore you to read on.
Sketch and Pixate are my favourite tools for mocking up simple designs and prototypes. I am an Android Developer by trade and I don’t have much interest in learning the learning the complexities of Adobe Illustrator or the like. A few months ago I started designing the Fantasy Football Fix app. I heard good things about Sketch and I had just read a Tech Crunch article about Google’s acquisition of Pixate and decided to give them both a go.
Sketch is a design app that is easy and simple to use. The app splits design up into pages and artboards that allow you to group your designs. For example a page could consist of all the artboards for one feature of an app, say the login for instance. Or maybe one page for for beta/prototyping and one for the actual release designs. Regardless of how you do it, it is great for organising your designs. It also has plenty of plugins for added functionality. Some of my plugin highlights are:
- Sketch Artboard Tricks which can help rearrange your scattered artboards
- Sketch Export Assets which easily helps you export your designs to iOS, Android and Windows Phone sizes
Pixate is a prototyping from Google. It’s has predefined animations and interactions. It has accompanying mobile apps so you can interact with your prototypes on an Android on iOS device. It has cloud features which start at $5 per month. These allow you to share your prototypes to the cloud, so clients and colleagues can get access. I enjoy using Pixate as I find it has some similarities to coding when doing condition and referencing layers for animation. We’ll just be using the free version that allows you to share through your Wifi to the app on your device.
Another great thing about Pixate is that you can create your own Actions. These are scripts that you can write in a subset of Javascript to automate repetitive tasks or create common patterns. For example you could make an Action that fades a button and have it move 48px to the left, rather than having to use two steps every time. I have not used them yet but they seem handy. The 'Actions' feature is currently in beta.
In Part 1, I’ll be running you through importing assets to Sketch and using them to create a Login Screen. We’ll use this in Part 2 to create the start of the prototype in Pixate. In Part 3, I’ll provide you with all the assets you need to create the next stage of the prototype. This is so that we can speed things up a bit and get you to the juicy stuff, as i believe Sketch is pretty easy to get a grasp of.
Things you’ll need to make the super awesome prototype
- Sketch - $99 for full version but does have free trial
- Pixate - Free but cloud features start at $5 per month (used in Part 2 and 3)
- Assets Sticker Sheet
- Android device - You can use an iPhone, but an Android device is preferable. If you use an iOS device i cannot help you out if it doesn’t look right (used in Part 2 and 3)
The colours used within the tutorial are as follows:
- Primary - #4CAF50
- Primary Dark - #388E3C
- Accent - #D500F9
- Login Screen Background - #E8F5E9
These are all available in the Assets Sketch file as well. Feel free to use your own!
Quick warning, i’m going to assume you have some sensibilities when it comes to creating this. If i leave something out i’ll assume it’s logical enough for you to work out yourself! This is not the complete, in depth, how to guide to using Sketch or Pixate. But if you feel like i’ve missed something important then please do drop me a comment.
Let’s make a login screen!
Adding the email and password text fields
First of all open the Assets Sketch file provided. In this are all the components we’re going to be using to create our prototype. Everything you need for this tutorial is under the Login Screen Assets artboard.
Let’s rename the artboard to “Login Screen” by right clicking on “Mobile Portrait” in the left hand menu and clicking "Rename". It sounds simple but making sure that everything is named will avoid confusion, as it’s very easy to get lost while creating the Login Screen.
Let’s give the background some colour, while we’re at it. Select the Login Screen artboard from the left hand menu and some options should open up on the right hand side. Tick the “Background Color” box and then select the colour box next to it. Paste our background colour “E8F5E9” in to the “Hex” box and press enter. Et voila! A beautiful light green background. Have I mentioned green is my favourite colour?!
Do you notice how the size of the artboard is 360 x 640? This helps for exporting to screen densities for different Android devices like hdpi, xxhdpi etc. More on this later.
Adding a logo
Now we’re going to add in our logo at the top, because you know… branding and stuff ;) Grab the Logo and place it above the email text field and password text field.
Right we finally have our Login Screen! Well sort of. What we’ve created is our start state. We'll need some of the other components to create our filled in state.
Adding the filled in email and password
Next we just have to repeat the process for the password text field. Make sure you are renaming the input fields in the left hand menu after you have copied them over. I’ve just used stars for the password text field with input to represent an entered password.
Now you should have something that looks like this:
Adding a status bar
Just one more little thing we’re missing. That’s the Status bar. When we’re in our prototype later on it won’t be displayed as the prototype goes full screen on the device. It could be left out, but i think adding it in makes it feel like you’re actually using a real app.
Exporting for Pixate
Click on the Login Screen in the left hand menu. This should select the whole artboard for you. In the bottom right hand corner there should be some text, “Make Exportable”. Click this to make the Login Screen exportable and to open up a menu. This menu is handy, it can allow you to export your assets at various scales. This is great when trying to meet different device specs. Now that VectorDrawableCompat is out for Android, it’s not needed as much. Make the “Size” dropdown 3x and leave the suffix empty. This is also a nifty feature that lets you set some text for all the different size images e.g. login_screen_mdpi, login_screen_xxhdpi but we don’t need to use it. Lastly, make sure the “Include in Export” is ticked below “Background Color”. Without this the screen will be exported without our coloured background, which is not what we want! Click “Export Login Screen” and save it to some where appropriate. I placed mine in a folder call “Login Screen Assets”.
This now needs to be done for the rest of the left over items:
- email text field with input
- password text field
- password text field with input
- login button
- raised login button
- disabled login button
Just make sure you’ve made them all visible before you export!