You can jump to the App Store by clicking on the image below, or you can search for NewPan in the App Store.
01. Prototype figure
As the saying goes, all things are difficult at the beginning, then in the middle, and finally at the end.
For the first time, I tried to think like a product manager, to plan prototypes, to think about the user experience. In fact, the function is very simple, the main line is to let the user select a photo from the album, put it in the interface without bangs to preview, make some zoom in and zoom out and move adjustment, and then generate a photo without bangs, and finally save the photo to the album. Still have it is the function that derivative changes color for bang.
The main line should be consistent and the user’s operation should not be interrupted. Therefore, I did not adopt the scheme of pushing to the next interface with the navigation bar after each step is completed, which leads to poor experience. And I want to get a sense of immersion in use. So I had to include all the adjustment and preview and save functions in one screen.
02. Design
Mobile developers know more or less a little bit about design, but that’s up to the designer’s drawing, and it’s not easy to ask a programmer to design an interface.
Here is a screenshot of the Sketch design for this simple APP.
If you download my APP, you will find that there are only three interfaces, but I have done a lot of trying and thinking behind it, trying to make this small idea more cool, more beautiful, more detailed, so that you can feel my awe of the product when using it. That’s why the app costs money.
02.1, the home page
The front page looks like this, with a background of the currently selected photo, a frosted glass effect, and then the menu bar. There are two questions here. First, why use the photo chosen by the user as the background? Second, why cover a user’s photo with frosted glass instead of showing it directly?
I think the first question is that if I make a color as the background, it will look boring, while choosing the user’s photo can make the interface more colorful and cool. On the other hand, it can also prompt the user which photo is currently selected.
The second issue, I think, is my respect for my users. Imagine that if the user chooses the photo of his child, the menu bar is most likely directly over the child’s face, which I do not want to see, or EVEN I think it is a kind of disrespect. A layer of frosted glass would greatly improve the problem.
02.2 Preview page
There are control layers at the top and bottom of the preview page, which are automatically hidden up and down. When hidden, the user will see the currently selected wallpaper screen. You can zoom in and out, adjust to your favorite Angle, and click preview to enter the second and third pages for preview.
At the same time, you can also enter the album for photo selection, after the selection is completed, you will still come to the preview screen.
02.3 Bangs color selection page
This is kind of my original idea, because until I write this article, I haven’t seen similar features on the App Store. The colors below are all from Smartisan’s built-in theme colors. The names are nice and the colors are elegant. It’s a tribute to my broken Smartisan T1. At the same time, there is also the return of iOS 5 status bar color, those who miss the puppet style of The Era of Joe can also use it as an Easter egg, I hope you enjoy.
The background is still the user’s currently selected photo with a frosted glass effect, and what color you’re currently choosing is immediately previewed in the bangs.
03. Coding
With the current feature, an experienced engineer can finish coding in three hours, but if you want to pursue some details, three hours is not enough. If you minimize the details, one day will not be enough. In the end, IT took me two days to nail down all the details, and I stopped.
Here’s a quick note about Xcode 9.1. Four or five times a day it freezes without warning. Not Xcode freezes, but the entire computer freezes and my code gets thrown away. After a forced shutdown, write the code again. Apple is really getting worse.
04. Product naming
Give the product name really is headache very, call “cut bang”, rather have a bit too common. So WHEN I don’t work overtime nights, I go running by the river, thinking about what to call it. At one point, I thought about imitating wechat and Weibo and calling it “micro bangs,” which sounds a little more fun and less vulgar than technology.
I really struggled with the name for a long time, until Coco came out. This movie is so good, I won’t reveal the plot of the rest. It was decided that the name would be Coco.
But with that comes the loss of the advantage of APP sales. If you are a Chinese, the first search keyword you think of may be “cut bangs”. Because of the App Store search ranking mechanism, the weight of the App name is the highest, if I call the name of the App “cut bangs”, then if you search the keyword “cut bangs” in the App Store, my product has a chance to be ranked first. This makes a lot of sense for apps that don’t have the money to spend on advertising. I thought it might be more advantageous to call it “Bangs cut”, but I decided to go with Coco.
05. APP Logo design
So far, all the ideas and implementation have been done by myself. But then comes the biggest difficulty: how to design a Logo that is not too ugly for this fad APP?
There are two problems here. First, I am clueless and have no idea how to express this product in design language. Second, even if I had an idea, I couldn’t draw it. For this extremely challenging thing, I finally decided to do professional things professionally and asked my designer friend for help.
After several overnight revisions, I got the above Logo. Coco Logo consists of three elements, the iPhone X screen corner is the main theme. Just now I told my designer friend that I was going to write this article and asked her to tell me where her idea came from. She told me that she remembered the round controller for the iPod, which was the product that changed the world.
She assumed that the gray Circle on the logo was the iPod Circle, and the red dot was our finger. Changing the bangs on iPhone X was the essence of the APP, vivid and vivid.
6. The final
A friend said he didn’t think it made any sense. But depending on how you look at it, if there’s a meaning to everything, it’s not fun at all.
It’s changed my desktop, and it may change yours, too. Get your hands on the iPhone X bangs! Click to skip to the App Store to download.
If you have any usage problems, leave a comment below, Enjoy 🙂
Added 07.
This post was written more than 20 days ago and then went through a lengthy APP review. I was rejected for version 1.0 4 times in total and finally said that I was misleading users. Then I emailed Apple and asked them to point out where they were misleading users and approved my APP the same day.
Overall, the APP can be summed up as: one week for design, two hours for code, and 20 days for review. As for why I am so upset about the review, the reason may be that Apple has outsourced the review to friends in India. If I want to pass the review quickly, I should add an Indian song and dance at the beginning of the APP.
08. Use help
Since some students said that the application did not reach the effect I described after purchase, I made a video help tutorial. You can click the picture below to view it. If you have downloaded the APP, please upgrade your APP to version 1.1, which contains the current video.
My collection of articles
The link below is a catalog of all my articles. These articles are generally concerned with implementation, each article has Github address, Github has source code.
Index of my collection of articles