The secret of the design process of "Niu Yi Zhou"

July 30, 2010, "Cow Week" in the app store shelves, until I write this blog, download the number of thousands, ranked in China free program Top 11th, News class 2nd.

A few days ago, Shawn wrote a love blog―― "Niu Yi Zhou," The birth note, from the development point of view to share with you the "Cow Week" production process, more suitable for programmers and developers to read; Here I want to write a "Cow week" design process, perhaps designers and product managers will be more sympathetic to see.

Soon after the ipad came out, we felt that the artifact was designed for the user experience--exquisite display, excellent interaction, simple operation, no threshold for use, full of possibilities--so we decided to march into this unfamiliar field.

Learning is the first step, so someone began to watch Stanford video tutorials, someone began to install Xcode, someone began to study HTML5, and I began to learn Apple April 3 out of the official guide, "IPad Human Interface guidelines."
June 27 Chengdu UCD Book Club, the official theme is "mobile device interaction and design", so I took a while before learning and understanding to do a presentation, with the participants of the book to share and exchange.

ipad user Experience Design Guiding principles

In this document, Apple has put forward several important design principles.

First, the ipad focuses on content and interaction, not on the UI.

As designers, almost instinctively we are obsessed with some gorgeous UI interface and forget what the user is doing. In order for the user to focus on the content itself and to be disturbed as much as possible during the interaction, so we need to dilute the program UI, weaken the interface control, make the information more flat (so that the upper and lower levels can be easily switched in the same interface), limit the task complexity in one view, fade file management, use the Least modal dialog box, Remind users only when they are needed ...

Then, the content form is full of realism.

The ibooks, note, and Google Map on the ipad are good examples. Apple's explanation is that the more similar programs show to real life, the easier it is for users to understand, manipulate, and enjoy it. You can use animation to further enhance the real feeling, the East longitudinal reality is more important than the appearance, to conform to the physical laws.

Finally, the full use of equipment performance and characteristics.

The ipad, a new device that was released only January 27 this year, has a number of human-computer interaction features such as gravity and acceleration sensing, multi-touch, and gesture recognition, in addition to the hardware specifications and performance parameters of a common digital device. How to combine these interactive tools into your work is an interesting challenge.

In short, God belongs to God, Caesar's to Caesar.

The idea of the Bullog net Reader, in the early June came up, but to make what appearance, everyone's mind is still a chaos.

June 12, the total out of the ipad bullog Network reader model, there are horizontal plate and vertical version of the two models. It looks like a Web page, and some like an RSS reader, and some like the ipad mail program-Everyone is a rookie, see this design, can not determine whether such a design is good, or bad. Later, because of the other items on the busy, this prototype also sank.

Overview of competing design prototypes

By the end of June, I began to design. Because it is a designer, there is no obstacle to the effect, the page involved is not a lot, so the beginning of the PS under the paint.

Site design more, one or the traditional ideas in the work, the results only designed a beginning is at a loss: thought if designed to look like this, but also as someone else directly on the ipad with a Safari browser to open cattle Bo network to see it.

The idea of using a Web site to design ipad apps is a complete dead alley.

OK, discard the website idea, do subtraction after I designed the catalog page and the inner page, imagine that there should be indexed by article, indexed by people, RSS subscriptions, and set these features. Obviously, this is a mediocre design, but it doesn't matter, a lot of things are like this, at the beginning of the time is very embarrassing, but at least there is the basis for discussion.

First Edition catalog page

First edition Inner page

A lot of good advice was given on the team's daily meeting. s take out a "Southern people weekly" and say it should be done in this way--first, it should be a magazine, reading habits like reading a book instead of browsing a website; then it should be a periodical, more time-sensitive than a book, but less than a website and a blog; content quality and reading experience and books More personality than the site, less noise.

With this positioning, design also has a direction, the cow reader has become a "Cow week", began to have a typical magazine cover, began to have a Nevin of the two-column design, interactive also removed the longitudinal scrolling screen and the use of a horizontal page.

The second edition of the cover (our team referred to as the CCW, so jokingly dubbed themselves a Shanzhai media ccvv)

Catalog Page Design Second Edition

Nevin Page Design Second Edition

Basic stereotypes in the visual-effect framework, when the difficulties on the code were basically breached, Shawn and I were like two engineering teams digging into the undersea tunnels from both ends, and began closing--and then embarrassed to discover--that some of the visual effects of the design ignored the effect of the dynamic time, Some interactions consume too much system resources to make a smooth transition. And in the simulator to see the effect and actual real machine operation or there is a certain gap.

The problem encountered in page-flipping design is a typical example. Now the article page is to need real-time loading, in order to avoid misoperation, we need to drag the user to move a certain length before confirming that this is a paging operation. In my early design, the effect of an icon flip is a gimmick. If you drag the page with your fingers, you will first emerge with the icon, with the following words "drag ..."; If you continue to drag the page, the icon will be fully displayed, the following text is: "Drag ... and then drag is the next article Oh ~", when the user dragged to the program set the length, the icon turned red, and then the page.

The design of the page tip

The actual situation is that the distance that the drag needs to be slid is designed too long ... if you hold on to the edge of the ipad and use your thumb to complete the operation, it is likely to cause a ligament injury. Of course, after the actual real machine debugging we decided to delete those words, and then solve the problem.

In Shawn's post, more effective design methods, in fact, should be the visual design of the interface should be and interactive simulation at the same time and rapid iterative, this time do not consider too much detail of the decoration; do not worry about the development of the following functions An interface prototype that can run on a real machine can expose problems earlier and quickly improve.

God is in the details, so is the devil.

The team pursues 37 teaches (we like 37signals.com this kind of lean team), the principle is geting real, but it also makes it difficult for us in the fast iterations to perfect the details.

Take the icon of the cow for a week.

July 8, Shawn said: "Monster, give me a cow for a week icon bar, I want to 72x72 and 256x256 two kinds of size." ”

So I quickly made a cottage (well, you're not mistaken, the clone of the prototype is the NBA Chicago Bulls logo), and then continue the other design.

Fee always said: Ei~ looks so familiar?

Wait until July 10 more free time, I spent some time to do the refinement of the icon design-illustrator pull down the gradient grid, and try a variety of styling combinations. When you see that talons version of the time, Mak said: "New Chang is not hoof mody ..." The Dragon for me explained: "The demon total painting is actually big Pineapple (Diablo)." ”

"Ox Week" icons different versions try

Ox week icon Set Makeup photo

I was just watching the solo regiment the other day. With hands on the cover of Kraft paper and a slightly yellowing of the text on the rubbing, feeling very feel--think of the ipad design guidance mentioned in the "Content in the form of a realistic" design principles, on the back and inside pages, respectively, with the paper and the texture of newsprint.

Loading page and back cover

Nevin Page Design Third edition

In order for people to have a real sense of the scene, it makes people think that this is a magazine, I have also improved the design of the horizontal screen--the parts that were added to the front of the modification were just background tiles, and the desktop, tablecloth, and coffee cups--as if at home, with a magazine, to enjoy a pleasant afternoon.

Cover vertical screen Design

Early cover horizontal screen design, just simple rotation zoom then Center

Modified design enhances the sense of scene generation

If you click on the inner page, a list of preview thumbnails is available below. This part of the design in fact also took some deliberation and discussion, the team internal debate is also more intense.

The first idea is to take the author's head as an index, one such distinction is more obvious, secondly, we are most concerned about the people themselves. The earliest effect is to float a translucent layer below and show portrait photos.

Preview Mode Design for second edition

Later we feel that for us, such as cattle bo net old users of the people and the article is not a problem, but for some ordinary readers will be more confused-he wants to jump to his favorite article, the first person to translate into their own corresponding favorite article or style, which experienced a logical conversion, will reduce the success rate. If he happens not to know the author, the failure rate is higher. While the small thumbnail may not be able to see the title and content, but the original copy of the color and layout, so that people can easily form a visual one by one corresponding.

So we changed the entire magazine's interface to push it, then show the preview thumbnail on the table cloth below, and in order to keep your eyes focused on the area, we're going to have to darken the main body when we preview it-it's like a science-fiction movie with a little physical basis that makes you feel real, but also a little surreal.

Improved preview design

If you were more careful, you'll find that the abbreviations for different articles are not the same--some are single-page, some are stacked one or two of pages--the design is that we want to use different thicknesses to tip the reader about the length of this article--if you think it's too long to give up. After entering the article, you will use Apple's common dot to indicate a total of several pages and you are currently on the first page.

Prompts the user for the length of different articles and now reads the first page of the current article

In any case, simplicity is the first rule of our design. We don't want to see any extra buttons, no tutorials, and hopefully you'll know what to do with a simple try--to achieve this, we've got a lot of friends around to test the sample.

It's not perfect, we're working on it, and we're looking forward to joining you.

Iv. positioning

Finally, I'd like to use the FAQ to talk about why "Cow Week" is designed and how to position it.

Q: If I like those articles, I can go to the cattle network and subscribe to their rss, why do you have to do such an electronic magazine?

A: First of all, their reading experience is different, reading on the ipad is obviously more enjoyable and convenient than reading on the computer, and it is equivalent to an archive--in the paper age, there are many people like to collect the whole year old magazines, the network age also has this hobby;

Secondly, this is a selection of articles, through the filtering of people, improve the quality of content, while reducing the reading noise, reduce your screening costs-we believe that the editor is also a valuable re-creation. Although our taste may not be entirely agreeable to you, in fact, if you do not agree with the nature is not our target users.

Of course, this is just our understanding. With a word that is often said to be a knot, that is: "I said is wrong." "Welcome to the opposite view. ：）

Q: Why is it a periodical, not a south-week reader or a book form? Why 10 articles instead of less or more?

A: Choosing to do a periodical is actually a necessary balance and compromise between the flow of information and the quality control. Twitter, blogs, and RSS have solved the problem of the rapid flow of information, how to show and retain the essence of quality, timeliness and news but intrinsic value is stronger than news? We think periodicals are a good choice.

Why 10? I admit it was influenced by the www.izaobao.com. Although there are many of us waking up to browse hundreds of websites, there are 1000 of unread articles in the RSS reader, but there are plenty of people who want to spend less time reading more quality information and then quickly leave and do the other things they should do-we believe in small is beauty, less is more.

Q: "Cow Week" will be updated weekly? Will you charge for it later?

A: will continue to go on, but for the time being can not guarantee weekly updates, because "Cow Week" is only an experimental magazine, not stereotyped, we are still trying to better reading experience effect, more content format support and easier to use the editing platform-the reason is open at the design stage, because we want to design with you, And hopefully eventually you'll be able to easily edit and generate such an ipad magazine.

Bullog NET does not charge, we are also.

For "Cow Week" have any comments or suggestions, welcome to our blog message, or write to team+ iPad@mycolorway.com, let us design together to determine its future appearance.

Thank you. ：）

| SOURCE Address: Http://blog.mycolorway.co ... 0/08/04/br04/