Photoshop smart phone App interface Design Learn notes-go

Chapter One basics of app user interface

1.1 Basic concepts related to mobile UI design 1.1.1 What is UI design

UI (user ' s Interface),
It is not just a beautification interface, but also a research user that makes the interface friendlier, simpler, more comfortable, and easier to use.
The user interface is ubiquitous. It can be a login interface, it can also be a software interface, mobile phone, PC has;

1.1.2 Phone UI differs from the flat UI

The mobile UI basically locks the range on the phone's app/client.
The flat UI range is very broad, including most of the UI areas.

1.1.3 What is a app/client

App (application) refers to an application. The client is another term for the app, which is actually the same.

1.1.4 smartphone OS Type

Android, IOS

1.1.5 the relationship between Photoshop and the phone UI

Industry orders, most use PS to develop;

1.2 The relationship between UI design and product team Project process

UI Designer is not an independent individual, he belongs to the product team, and the product team will work closely together!

1.2.1 UI designer and product team

UI designers exist in a group called the "product team,"
The personnel division of the product team can be summarized as follows:
Product Manager (Pm/product Manager)
Product designer (Pd/product Designer)
User Experience Division (Ue/user Experience)
User designer (Ui/user Interface Designer)

1. Product Manager (Pm/product Manager):
Role: The boss of the product team
Main responsibilities: The main customer needs to conduct a breakdown of research,
Planning the selling point for the user's needs,
The plan is then presented to the top of the company to gain the resources (human, material and financial) needed for the project.
Subordinate responsibilities: A more versatile product manager can have the responsibility of a different PM (project manager, program managers).
Common software: PPT, Visio and project, etc.

2. Product designer (Pd/product Designer)
Role: the equivalent of a small product manager
Main responsibilities: Focus on functional design,
Consider the feasibility and cost-effectiveness of the technology.
Common software: Word, Axure
Examples: such as the reading of the app to add background music function is feasible, can increase the download volume of the app;

3. User Experience Division (Ue/user Experience)
Role: Co-worker of PD
Main responsibilities: Understand the business aspects of the content, from the point of view of business value, the product and user interaction aspects of the improvement
Common software: Dreamweaver
Example: Play music in the app to add a mute button, add and no difference;

4. User Designer (Ui/user Interface Designer)
Role: Art
Main duties: and UE have partial overlap,
The realization and beautification of the interface performance;
Common software: Photoshop, Fireworks, Illustrator

Not all companies are divided according to the above duties,
Usually, PM and PD are a person, UE and UI is a person;

1.2.2 UI design and project process steps

In a mature and efficient mobile app product team, UI designers are typically added to the project early on,
Aiming at product positioning, crowd-oriented, design style and other aspects of the discussion.
The advantage of this is that it keeps the design style consistent with the product,
At the same time, after setting the style, designers can immediately start the design and the arrangement of multiple sets of solutions, effectively save time.

The UI participates in several parts of the project process, as shown in 1-19.

Fig 1-19

1. Product positioning
What is the function of the product?
What is the basis for making this product?
What do you want to achieve?
What impact do you want to achieve?

2. Product Style
Product positioning directly affects product style.
Depending on the functionality of the product, targeting people and business value, there are many different style requirements.

3. Product controls
Use the multi-box or drop-down menu, use the drop-down slider or scroll bar, etc.

4. Programme development
Once the positioning, style and components of the product are determined, the program can be started.
In general, more than two sets of options can be made to facilitate comparison.
The scheme can be represented by a prototype, or it can be done according to the requirements of the project.

5. Programme submissions
After the proposal is submitted, the Parties are invited (including not only the product team, but also the technical and operational) to assess
Two programs can do A/B testing, choose a better user experience.
?
6. Programme selection
If the initial plan is to use the form of the prototype diagram,
After the selection of the programme, it would be possible to begin the landscaping design with the finalized programme as a benchmark.

1.3 UI design process and methodology

The previous section is a portrait of the UI design and the project, and this section is a horizontal view into the UI designer's specific actions.
When product positioning and style are agreed upon, the UI designer can begin drafting the program.

The drafting of the programme is generally
Positioning Guide,
Core function Confirmation,
ADS,
Drawing Sketches,
Restore prototypes,
Visual design and
Delivery of 6 parts.

1.3.1 Positioning Guide Map

It is used to visualize the positioning of the product.
Clear positioning makes it easier to grasp the style of the product.

Fig 1-20 Product Positioning guide

1.3.2 Core Function Confirmation

After grasping the general direction, it is the confirmation of the core function.
The app is ultimately to serve the user, and what it can achieve is an important measure.
Below is an introduction to the KJ method, shown in 1-21

Fig 1-21

kj method, also known as Affinity Law, is created by Professor Jiro Kawakita of Japan and can help the team to reach a consensus on the main core functions of the product.
1. Prepare the yellow handy stickers, pens and stickers for the site.
2. Brainstorming – Let participants write down their most important functions on a yellow sticky sticker and post them on the wall.
3. Let everyone put together handy stickers that he thinks are functionally similar, and can be discussed,
When everyone is satisfied with the arrangement, the group is determined.
4. Give the participants a green post, name the groups, and write the names.
5. Vote.
Three stickers for each person, 1 stars, 2 stars and 3 stars, respectively, on behalf of the priority, respectively, affixed to each group next.
Finally, the higher the number of stars, the greater the priority, the more core of the function.

It can be seen that the KJ method is based on the bottom-up classification of the summary method.
The advantage of this is to avoid the details of the quarrel and waste time, effectively summarize the classification to grasp the focus.

Next, you just need to put the content of these convenience paste priority, summed up in ads.

1.3.3 Application Definition Declaration (ADS)

ADS (application definition Statement) is the application definition declaration. The
application definition declaration consists of 3 different parts, based on the audience differentiation solution, namely:
definition (differentiator), Scenario (solution), and User (audience),
Basic structure as follows:
    Definition (differentiator), Scenario (solution) for user (audience),

briefly describes the role of the app (app), and
How can it solve (what) problems for (which) users (in what case)?
to show its positioning (entertainment/tools) and then list the most important features (Features).

For example, the ads for a weather app are:
  provides a solution for you to check weather conditions anytime, anywhere, for those who want to determine weather conditions before traveling.
functions as follows:
  Location services,
  Weather services,
  Live view,
  user subscriptions;

Ads is a term invented by Apple, The initial stage of app development is widely used by developers, and
ads uses a very simple sentence to summarize the app's capabilities, target users, and needs.
For example, the ads description for a Podcast Global broadcast app recently developed by entropy:
"The LBC Podcast app would allow the LBC Radio enthusiasts 
to Subscribe, download, save, organize, and listen to their favorite LBC shows 
and podcasts in a smooth and intuitiv E interface. " The ads description of the

app should be printed and nailed to the wall, reminding the developer what we are doing, for whom, and why.
This step seems simple, but extremely important.

Another example is that we are going to develop a cool men's shop, if we can accurately write the following ads:
"Our target buyers ' mobile experience includes the ability to find recent storefronts, opening times and route information, and quickly find discounted information. "

It is clear that the ads ' definition of product functionality and user requirements is completely different from the first ads.

1.3.4 Drawing Sketch

Ads is a textual display.
To turn it into a more intuitive and understandable form, it is more appropriate to sketch the picture, as shown in 1-23.

Fig 1-23

Sketching does not require a complex, simple is good.
It is important to show the results of the thinking. Tools with a bit of skill, anyone can easily get started.

1.3.5 Low fidelity Prototype and high Fidelity prototype

A low-fidelity prototype (also called Wireframes) is a sketch that is restored to a computer by means of a wireframe tool such as Axure, mockup, or Visio.
Do not struggle with the details, try to use black and white rough lines to restore.

High-fidelity prototypes are more time-consuming than low-fidelity prototypes because of the pursuit of detail, such as screen size
In order to avoid a high-fidelity prototype being rejected and waste a lot of time, the high-fidelity prototype is usually a low fidelity prototype has been confirmed before the start of production.
1-28 is shown

Fig 1-28

1.3.6 Visual Design

It can be visually designed on the basis of prototype completion.
In theory, the use of user unfamiliar or strange complex interface elements (except for game apps) is not advocated.
As shown, it is an optimized interface:

Fig 1-29

Fig 1-30

1.3.7 transduction and delivery

Focus the design's interface results and description guidelines on a large map to deliver to the developer.
Mark the size and description of the prototype, and cut it into PNG format so that the technician can use it when developing the app.
As shown in 1-31.

Fig 1-31

1.4 Color Matching

Color collocation is appropriate, determine your design level of quality.

1.5 Equipment Size Standard list

is a phone screen various parameters

Fig 1-46

1.5.1 inches (inch)

In fact, we often say the length of units, 14-inch laptops and so on.
Refers to the diagonal length of the screen, mobile phone shielding also follow this concept.

1.5.2 Resolution (Resolution)

Resolution is the sum of the physical pixels on the screen.
The screen pixel width is generally multiplied by the screen pixel Takaki representation, such as 480px * 800px.

1.5.3 dot Density (DPI)

The number of pixels included in the physical area of the screen, measured by the dpi (dots per inch),
252DPI means the dots per inch is 252.

The higher the DPI, the finer the quality of the displayed screen.
In general graphic design to compare the pursuit of high DPI to render the picture texture.
But in the mobile UI design, dpi to match the corresponding phone, because the low-resolution phone can not meet the high DPI image of the phone hardware requirements,
The effect of the display will become very poor.

1.5.4 screen density (screens densities)

Screen density is divided into idpi (low), MDPI (Medium), HDPI (High). XhDPI (extra high) four kinds,
The MDPI and hdpi shown in Figure 1-46 refer to medium density and high density, respectively.

Fig 1-50

Figure 1-50 is divided into the screen density (Heng Lie header) and the screen size (column header) of two dimensions.
The screen size corresponds to the screen density and is divided into four types:
Small screen, Pu, large screen and large screen.

Because, the app is not for a person to serve, it needs to meet a large number of mobile phone users, and these users of mobile phone brands, models, sizes are different.
The most basic Law----want to make the more different screen size of the phone to adapt to your app, the resulting image screen density version of the more complete.
1-51 is shown below:

Fig 1-51

For example, you only generate hdpi version of the image, but there are many phones only support HVGA resolution,
Then the images you generate will look very coarse and rough in these HVGA-only phones, and the user experience will be poor.

The screen density of the green area in Figure 1-50 is followed by a parenthesis, filled with values such as 120, 160, 240, 320.
In fact, these values are to be used in Photoshop design.

Fig 1-52
Figure 1-52 When creating a new Photoshop document, in the resolution column, select pixel/inch mode,
then enter the corresponding screen density value in the previous input box.

But then there was a troublesome problem,
If an app has 50 images to design, each graph to generate 4 different versions, that is 50x4, total 200.
This means that to create and fill 200 resolutions, and also to scale the image content continuously, it is a complete torment for the novice.

It is recommended that beginners start with the most basic resolution of--160 pixels per inch,
When the design is complete, reduce or enlarge the picture by 75%, 150%, and 200% magnification.
Photoshop Menu Image---Image size command, press alt+ctrl+l key combination, you can do a good job of this function,
1-53 to Figure 1-56 shows:

Fig 1-53

Fig 1-54

Fig 1-55

Fig 1-56

Do not forget to name and place it in the appropriate folder, as shown in 1-57.

Fig 1-57

Of course, if only for the pad design of the app, it is only used to generate the corresponding version on it;
Compared to Android, the number of iphone on the density version of the requirement is not so much, it has only a few versions.

1.6 Icon size and format suggestions

This section describes the size requirements for Android, iOS system icons, and suggestions for formatting images.

1.6.1 Icon Size

The app's icon is not just the app's startup icon,
Other iconic images, such as status bar, menu bar, or toggle navigation bar, are also included.
So icon refers to a collection of all these pictures.

Icon also adopted the screen density constraints introduced in the section,
As shown in the following:

Fig Android-icon screen Density

The iphone's screen density defaults to MDPI.

Fig Ios-icon screen Density

1.6.2 Icon Format Suggestions

Any choice about the format of the icon should take into account the actual needs.

The most common picture formats are described below.
JPEG: Photo basic format, the same image JPEG format file smaller than the PNG format file, does not support background transparency.
GIF: Supports transparent but appears jagged.
PNG: Support Transparent, iOS recommended image format, the same image after the PNG format, the file will be larger than the JPEG format, GIF format.

The PNG format is the best choice if the app does not involve downloading on the web and requires transparent processing of the images.
You can choose the JPEG format if you want to maintain the color saturation of the image and so on, without the need for transparent processing.
The GIF format occupies a small space, and you can consider using GIF format without requiring background transparency and picture quality.

1.7 App Layout Instructions

Rejection of strangeness, unified layout style.

1.8 familiar with each system component 1.8.1 Android's basic UI components

1. Text Display (TextView)
2. General buttons (Button)
3. Edit the input box (EditText)
4. check box (checkbox)
5. Radio button (RadioButton)
6. Switch button (ToggleButton)
7. Drop-down box (Spinner)
8. Smart Cue box (Autocompletetextview)
9. Time selection box (Timepicker)
10. List display (ListView)
11. Extensible list Display (Expandablelistview)
12. Web format browse (GridView)
13. Picture Display component (Gallery)
14. Picture Toggle Bar (Imageswitcher)
15. Progress bar (ProgressBar)
16. Select card Switching (Tabwidgel)
17. Hint Information (Toast)
18. Shortcut menu (quickactions)

1.8.2 Basic UI components for iOS

1. Text Display (Uitextview)
2. Text label (UILabel)
3. Picture Display (uiimageviews)
4. Web content display (UIWebView)
5. Map display (mkmapviews)
6. Scroll bar (Uiscrollview)
7. Warning Boxes (Uialertview and Uiactionsheet)
8. Button (UIButton)
9. Parallel button Set (Uisegmentedcontrol)
10. One-touch switch (uiswitch)
11. Slide Bar (UISlider)
12. Multi-image browsing toggle control (Uipagecontrol)
13. Edit the input box (Uitextfield)
14. Table arrangement Display (UITableView)
15. Navigation Bar (Uinavigationbar)
16. Page switching (uitabbarcontroller)
17. Search bar (Uisearchbar)

Photoshop smart phone app interface Design Learn notes-go