Instead of directly replacing the templates of MAKA and initial pages, you can use tools similar to interactive masters to create H5 pages with unique animation effects. I am not a professional, but I often use H5 at work .. Some of the results are clearly visible to me in other H5, and they still say they can't do it. They fooled me and said that I am not professional and don't understand it. Finally, they gave me an H5 like shit, I had to pinch my nose and give them money, so I decided to learn and paste them into the face. Instead of directly replacing the templates of MAKA and initial pages, you can use tools similar to interactive masters to create H5 pages with unique animation effects. I am not a professional, but I often use H5 at work .. Some of the results are clearly visible to me in other H5, and they still say they can't do it. They fooled me and said that I am not professional and don't understand it. Finally, they gave me an H5 like shit, I had to pinch my nose and give them money, so I decided to learn and paste them into the face. Reply content: Thank you for your invitation.
Every time I see H5, I don't know what the Lord is talking about. What does H5 mean? In the eyes of tianchao, these situations are called H5:
- The page effect is particularly cool
- Native PAGE
- The APP page is also
- Hybrid page
The problem arises. For these so-called H5 pages, their production methods, technical solutions, and interaction methods are all different.
Let's talk about H5. I personally think H5 should refer to Web pages. The technologies it uses are HTML5 (or HTML), CSS (or CSS 3), and JavaScript. No matter how dazzling your page is, these technologies are basically indispensable for a Web page.
- HTML5 (HTML) is the skeleton of your page. Simply put, it is the structural layer. Of course, HTML5 is much more advanced than the previous version. It provides various APIs, these APIs are still JavaScript APIs. However, these native APIs are supported by browsers.
- CSS (CSS3) is used to beautify your Web pages. Some new features can be used in CSS3 to help you implement the effects originally implemented by the design software or JavaScript, such as the Web Animation effect.
- JavaScript, not to mention, can help you do a lot of things. In the so-called H5, the effect you see is a JavaScript Canvas effect. There are other features
There are different technical means for implementing pages IN Native/APP/Hybrid. At this time, you say that you want to implement a Native PAGE effect for a Web page. Sometimes it is not really feasible. In turn, sometimes it is not easy for your Native page to implement a Web page.
In the end, what you see is not necessarily true. In addition, we need to clarify what we mean by H5.
The above is only my personal opinion. If you have any mistakes, please tell me what David Wang is talking about? Many years ago, the era of design and html was almost over. The front-end technology was already quite separated from the design. What design did you learn from H5? UI requires years of visual cultivation and interaction, and requires engineering concepts. It requires a basic psychological and statistical method. Do you think it will take ten days and a half to complete the h5 preschool course?
What do you mean, I don't want to learn h5, but js, front-end framework, and design? I don't know how to interact with the UI. Does the UE learn h5? H5 is a design implementation technology, not a visual output or interactive expression.
People who talk a few words about user experience will be able to have likes in these years. In those questions about each APP, even if they are arrogant, in the case of knowledge issues, don't give it up. Can you mislead me? When money is given to the team, the team is found to be in place, with sufficient time and clear requirements. In the end, the team will get good results.
The team will not focus on the cost.
The cost is low, and the technical team won't answer the question. The answer is for beginners.
The time is short, and the work cannot be done in a rush.
The demand often changes. People lose their temper and have no idea how to do it.
If others say that you are not professional, you may not be professional. Don't step into this line. In the end, you will find that what you do may not be as good as what they do.
Some seemingly simple effects are not as simple as you think. The effect execution difference of a few seconds at may be quite different. Some excellent works, these are all produced by careful creation and ample experience.
In addition, it is difficult to get good work results by cooperating with others. according to my recent research and observations and the case of private orders, H5 page design is no longer limited to advertising. In fact, H5 is now replacing the "interface" and the carrier of front-end interaction between mobile users, in addition to advertisements, there may also be various minisite, activity landing pages, content-light blogs, games, etc. To some extent, some features and applications of the native App are replaced, so I always work as a product in H5.
What does H5 need to learn?
1. Interactive Design of user experience
There are many concepts related to interaction design and user experience, such as UID, UED, UCD, HCI, and GUI. Here we mainly introduce three mainstream concepts: UID, UED, and IxD.
UED (User Experience Design) is a User Experience Design that focuses on the User Experience of the product in each step. Each interaction between a user and a product is an "experience" of the user every second of the product. You need to go deep into the product and user scenarios and design each experience node. Therefore, a user experience designer is actually a product manager who usually needs to participate in the product's preliminary planning, design, development, testing, and iteration processes, in terms of capability composition, you can master various user research methods and design ideas. Generally, you do not need superb graphic design skills, but you must have strong aesthetic and design resolution capabilities.
UID (User Interface Design) is a User Interface Design that focuses on the User's sensory feelings in specific scenarios, including touch, hearing, and vision. Generally, it focuses on vision. Under ideal conditions, the UI Designer should also understand some UE knowledge. However, in the industry's general positioning, the UI Designer pays more attention to graphic interface design, his job is to convert specific "requirements" into a graphical interface, focusing on the sensory experience of each pixel on the interface.
IxD (Interaction Design) is an interactive Design that focuses on the Interaction between users and products and the entire user experience path. Interaction designers can improve user experience through dynamic visual, auditory, and tactile design. At the same time, they need to consider the user's use scenarios and determine the user path, to design and guide the interaction process between users and products/interfaces.
Looks professional, right? Actually, it is not. To put it bluntly, it is just a feeling of feeling + logical logic. Many people have been studying for more than a decade and cannot become masters, because either of them cannot cultivate the best, or both are mediocre. Of course, if both of them are mediocre, but they have a high theoretical level, they are still very good at working with people, and they have made great achievements. Objectively speaking, I think the landlord can work in this direction first, if you accidentally discover that you are talented, you can work harder.
How to reach the professional BB level. Never go to any training company.
Basically, you need to train three capabilities:
Aesthetic. It doesn't matter if you don't understand design, but you need to know what a good design is. The best way is to find a friend with a very good design. He reads the same books, browses the same website, pays attention to the same public account, and sticks to a month to ensure the effect. Specific to H5, you can focus on the UI and UE-related design content. It is mainly to accumulate a database about what is beautiful in the mind.
Empathy. The most important thing for product managers is empathy. H5 is actually a small product. We need to consider user scenarios, paths, transformations, and so on. Of course, many people share the same empathy, but it determines whether you are professional or not. The most common trick is to promote yourself and others, think of your feelings as user feelings. If you are shameless, you can find a few friends to verify your experience. Well, it's more convincing. But remember to express it in a professional language. The core idea is that you should always look at what you call a product from the perspective of "Others" users.
Theoretical expression. The following are some recommended books with two key points: 1. imitating the author's BB method; 2. Practice, including: chatting and subconscious expressions, and downloading more apps, analyze the function design, user path, interactive experience, and so on based on the theory of books. If possible, use some tools to implement some ideas, such as the interactive master tool you mentioned.
Book list, ranking:
Entry-level books
Design books for reading (version 3rd)
Design psychology
A butterfly: The Path to the growth of user experience designers
Under Design
Easy to understand
Emotional Design
Interaction Design path
The beauty of an instant: how to make the user feel the heart of web Interface Design
Secondary books
Elements of user experience
Go beyond ordinary Graphic Design
Cognition and Design
Details determine the success or failure of interaction design
Simple law
Website interaction design mode
UCD spark set
Win users
Mobile device interaction design
Splendid blueprint: how to plan a memorable website
Natural User Interface Design
Design man-machine interface
Web form design: The art of rock-and-gold
Tapworthy: Designing Great iPhone App
Design and development of mobile applications
Mobile Design For iPhone And iPad
Mobile Design and Development
Designing Interactions
User Experience Sketch Design
Simplicity first
Touching
Text Training Manual
Designers need to understand psychology
Micro-Interaction
Responsive Web Design
Crucial Design
Killer UX Design
The UX Book
Design is A Job
Mobile Internet: user experience design guide
Considerate design: creating highly available mobile products
Advanced books
Getting started with HTML and CSS (version 9th)
The essence of About Face interaction design
Interaction Design -- surpassing human-computer interaction
Software concept revolution
A Practical Guide to Information Architecture
Designing for Emotion
Hundred Projects★
Agile user experience design
Web navigation design
Web Information Architecture-design large websites)
Web Interface Design★
Proficient in Web Analytics2.0★
Interaction Design meditation
User stories and agile methods
User Experience Measurement
Social Psychology
Storytelling for User Experience
The Elements of Content Strategy
Lean UX★
Handbook of Usability Testing
Quantifying the User Experience
Designing the Conversation
Lean Analytics
Search Analytics for Your Site
Understanding Your Users★
Sketching Drawing Techniques for Product Designers
Card Sorting Designing Usable Categories
Service Design★
Official Design Guide
Google TV Design Patterns
Google Glass Guidelines
Android Wear Guidelines
Safari Web Content Guide
Android User Interface Guidelines★
Touch Gesture Reference Guide
Apple Human Interface Guidelines
Design Specifications for Windows User Experience Interaction
After reading this... It is basically impossible. You can only view the first three items in each category. It is basically a certain level after you thoroughly understand them. Professional BB should not be a problem.
Specific to H5, that is, tool learning: at present, my personal standard is PS/Ai + AE + iH5
PS/Ai for flat.
Gif made by AE
IH5 implementation
IH5 website has courses, just learn by yourself. Ps and AE look at the interests and talents. If you have no talent for design, how do you do it low? If you have no confidence, you can still look for graphic design to help you plot your work. You just need to design the implementation and interaction logic.
Having said so much, I found that there are still marketing, copywriting, and planning, which is so tired... You can find these on the Internet. In fact, these are the same principles as those in the product. Simply put, let's talk about how much money you have given them for content that they are willing to spread twice? What are the requirements? Let's show you what you got.
No. Hype3 is currently used.
I am studying Adobe software and don't know if it is better.
Xiao Bai recommended-> Yi qixiu wants to interact well and concentrate on the development of CSS3 + Jquery 2.0 or later versions. Don't rely heavily on those interactive shortcuts, because it's just a bit plain. The source code of many things is more in line with your own ideas. In addition, we discard all versions earlier than IE8 (because HTML5 + CSS3 is not supported at all )~ Amount! The previous great gods said very well, but it was a bit confusing for outsiders like ours. I also thought it would be enough money, or I would use a free template, many such H5 production websites can be made for free, and others often do well, such as yiqixiu and yiqixiu, some of the rabbit exhibitions have many good templates, and they will seriously modify the templates later. The promotion effect is also very good. You need to learn the HTML5 development language if you want to develop front-end pages. If you want to present an H5 micro-scenario similar to a PPT with music and animation, there are now many free production platforms. The operation is also very simple. You can change pictures, music, text, etc. I have used some of them, and I think it's good to make a micro-page computer at hand. It can be made on the mobile phone at the beginning. Hope to help you. You need to learn html5 + css3 + js, and then select a specific technical framework based on your business.
For example, there are many types of css3, such as dark and bootstrap.
The special effects should be implemented using functions provided by css3 or js. For example, small icons that are frequently seen are all cut-down images. Now, with the library, the Alibaba team has made many of these commonly used small icons, for example, some rounded corner buttons are processed with css3 and previously spliced with images,
The effect does not need to be too fancy. When performing h5, you need to consider factors such as the duration, technical strength, and performance of the team.
