Although the black word on the white background of the EHR system clearly shows that the position is an interaction designer, as a common resource of the project team and a “comprehensive position” integrating interaction, user experience and interface design, THE UI part of the project team is usually completed by me. Ok, I am not so high as BI here. After all, many can love (Zhao) (Shi) the city lions, including the front end and the background, will often shout, this is the artist to the program, naked peel off my gorgeous camouflage, ╭(╯^╰ ╮), has been too lazy to defend, artists on artists! Although her dogs from a creature turned the UI, and to interaction design, but they are not good but still a qualified UI, that today, you can write it as the basic skills of the UI, begin at the bottom, want to give just into the UI for reference, because now the situation is visual UI partial saturation, game UI didn’t contact, do not understand, can expand their two directions, Learn about the front end, or do user experience. Therefore, the requirements for the comprehensive ability of UI are increasingly high, of course, for the design team, may be more important to professional skills, but the vast majority of UI, finally into small and medium-sized companies, wearing several jobs is not surprising, so the following are personal experience, peers can read, do not spray.
1. Ability to match colors
It must be strange why I think color matching is so important, even more so than basic software, because in many people’s eyes, UI is just about drawing ICONS. If I had written this article a year ago, I would have exchanged it with 2. But now Alibaba’s IconFont and Google have provided a rich resource of ICONS to download and use for free in formats ranging from PNG to SVG to Icon Font. It’s not even an exaggeration to say that, If a small company has an aesthetically capable front end, then the UI job is not optional, but unnecessary. This is not to be sensationalized or to take down the UI, because the front end just takes these ICONS down and changes the color, and with the current flat style, it can handle a lot of pages. So, for now, the UI must have good color matching capabilities. So where does color matching come from? Here, my advice is to less to those professional color website, color ring and similar colors, complementary colors, I’m sure, for common UI (except the high order), these don’t have any help, think about it, in addition to basic black and white ash, remove company color, allows you to the free play of color is not a lot of, the simple method is what? Check out design sites like Dribbble and save your favorite pages. Then, find one that’s similar to your design and use it. Why I say that color matching website is not helpful, here I give an example to illustrate. These are two COLORS I picked from NIPPON COLORS, a traditional Japanese color. One is red and the other is green. They have beautiful names and they are also my favorite COLORS.
So I’m going to design a login screen, and then what do I do with these two colors? Make the following interface?
If you have a page design that looks like this, it’s fine:
Then I logged into the interface again, and without changing any of the interface elements, I generated a version using only its color scheme to see what it looked like
That sounds pretty good. Of course, the example I gave here is a little bit inappropriate, but I just want to illustrate by this way, a lot of color matching, the gods have done for us, we directly use, nine times out of ten will not go wrong.
Color does not equal interface. For a beginner UI, the best way to match colors is to adopt them and develop your own style as you improve.
2. Ability to make ICONS
This is undoubtedly the most basic and an advantage for me to switch to UI at that time. I have been in touch with Photoshop since 2002, from 7.0 to the present 2017CC. Although I am not a professional student, I have been learning by myself through various tutorials, using all kinds of tools and, of course, also modifying images, but after all, with more than ten years of practical experience, The use of software is still very skilled. Because ps is so powerful, as a UI, the most important thing to master is Boolean arithmetic. First, try to use only the addition and subtraction of basic graphics. Second, unify the style of ICONS. In addition to the common pNG-24 icon format, you also need to know SVG, icon font, and BMP with transparent background (yes, you read that right, this is not very useful, I have only done this once, need to know what bitmaps with transparent channels are and how to generate). Specific our icon with what format, senior UI needless to say, small white people ask the front end, when need to do Sprite map, when need to separate cut map, responsible for the front end developers will tell you. The unity of icon style, to the complex, requires very fine, such as the width of stroke, the radius of the rounded corner of the basic graph and so on, can be unified as far as possible, but to the simple, grasp a point, line drawings and block drawings, a group of ICONS can only choose one, do not mix and match. Again, for example, if line art and block art are mixed in the login screen, it can be very jarring, especially if there are too many icon elements.
If you want line drawings, you can change them to the following style
A few more words about ICONS, unless you have a particularly good idea, you’ll never go wrong with the most basic ones, such as gears for Settings, pens for editing, two sheets of paper for copying, and hearts or stars for collecting. Don’t worry about being called low for making ICONS that don’t have any features. Neither developers nor bosses care too much about ICONS being less unconventional and more conventional and more acceptable. Here are some more examples:
This is the print icon to the left of the simplest, 1 minute, then, you may feel too simple, designed to study on the right side of this, you probably had to go to the office for this printer, as far as possible, restore the real printer button, including import and export, the paper also made a perspective and delicate Angle (to the relatively complex modelling, I took >10 minutes). Just by contrast, well, the one on the right looks exquisite, doesn’t it? Full design sense, right? Hold on! In practice, you might see something like this:
Yes, the size is compressed, then the consequence of complex design is all kinds of shapes can not see clearly, and the biggest benefit of simple design is that even if it is reduced, it can still clearly express the meaning that the icon wants to convey.
Speaking of ICONS, a new UI should know when to use Sprite, when to slice a single image, and when to make a @2x image: look at the mood of the front end siege lion!! In other words, as long as the UI is not in a position to take charge of the project, he can give it whatever he wants.
I must use the latest version of Photoshop to solve the problem by myself. Anyway, I use 2017CC for office now, but I can only manage to run 2014CC at home due to the configuration of the machine. The comparison is obvious, the new version is powerful, the plug-in recommended Cutterman, necessary for cutting pictures, and the interface annotation is naturally Mark Man. The legal version is better than the experience version. I solved it at my own expense.
In fact, many UIs are only used in Photoshop, and AI is more used in plane design. But now and in the future, the development of the front end, SVG format really cannot be ignored. Of course, the version above 2015CC can copy SVG format, but PS is not able to handle SVG Sprite diagrams. Here we need to use the AI’s symbol palette. I’ll write a separate article later on the creation and use of SVG Sprite diagrams. SVG giFs, etc., all require a master of AI to make stunning effects.
In addition, attach two pieces of code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="10 10 0 0" enable-background="new 10 10 0 0" xml:space="preserve">
<path fill="#EA5514" d="M6.7,5.1 L3.7.2.1c-0.2-0.2-0.2-0.5.0-0.7 l0.0 c0. 2-0.2,0.5-0.2.0.7, 0 l2.9,2.9 c0.2,0.2, 0.2,0.5, 0.0.7 l0, 0
C7.1, 5.2.6.8, 5.2.6.7.5.1z"/>
<path fill="#EA5514" d="M7.3,5.1 L4.4, 8 C4.2.8.2, 3.9.8.2, 3.7.8l0,0c-0.2-0.2-0.2-0.5.0-0.7 l2.9-2.9 c0.2-0.2, 0.5-0.2, 0.7, 0 l0, 0
C7.5, 4.6.7.5, 4.9.7.3.5.1z"/>
</svg>Copy the codeThis is ai-generated.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="112px" height="192px">
<path fill-rule="evenodd" fill="rgb(242.155.118)"
d="M106.510, 107.314 L27.314, 186.510 C21.065, 192.758 10.935, 192.758 4.686, 186.510 C-1.562, 180.261 -1.562, 170.131 4.686.163.882 L72.569, 96.000 L4.686, 28.118 C-1.562, 21.869 -1.562, 11.739 4.686, 5,.490 C10.935, -0.758 the 21st.065, -0.758 27.314.5.490 L106.510, 84.686 C112.758, 90.935, 112,.758101.065, 106,.510107.314 Z"/>
</svg>Copy the codeThis is generated by Ps.
After comparison, the AI-generated SVG will have viewbox property, which is the size of the artboard. What does this mean? Even the transparent area can be defined when we hand it over to the front end. Photoshop’s new save key CTRL +Alt+ Shift + W supports SVG, but it has a lot of redundant code. It also has viewBox properties.
Software to master: Photoshop, AI (increasingly important) The uniformity of icon style reflects professional standards. The importance of unity far outweighs the complexity of the design icon.
3. Composition
If you are a graphic design professional UI, maybe composition ability is not a problem, but for non-design professional background, this may need to be well grasped. For THE UI, composition is not as balanced as graphic design, just remember one thing, align as much as possible, and plan out the smallest units in terms of content and margins. Take the Web version as an example. Here are two diagrams of a rasterized layout:
The new version of The guideGuide guide is now available, “New guide map”, which is really easy to use. Mom no longer has to worry about me building new guides one by one. Especially emphasize here, when you use the grid layout must be flexible, specifically the need to understand, is not being to move the words, the page elements is relatively less, the alignment is mainly vertical direction, as long as pay attention to a little, don’t let your design is too casual, and we sent to the front-end interface in labeling, convenient, I’ll just hand out one with a reference line, because of the confidentiality of the project now, I won’t put my own work on it.
Get into the habit of rasterizing your layout so that interface elements align as closely as possible. Interface renderings with guides will show the developer that you’ve done some serious design thinking.
4. Ability to make basic interactive prototype diagrams
At this point, a lot of UIs would say, well, this is interaction design. Notice that the word I use is “basic.” That is, the software that does interaction prototyping, pick the most common, only needs to be able to use one function, and I’m using Axure as an example:
Yes, this is the hot zone! Software installation time, 10 minutes, understanding the software panel and publishing functions, 10 minutes, learning hot zone functions, 5 minutes, overall learning cost is very low. For a normal UI, you are not required to make a high-fidelity prototype, so the main purpose of using hot areas to prototype is to show product managers and developers the jump relationships before the page. If you need to go further, you need to master the dynamic panel, which is the basic element for all kinds of special effects. Once you’ve got the dynamic palette, you’ve got half of Axure’s functionality, and that’s enough for the UI. If you want to continue, you’ve got repeater, conditional statement Settings, and functions. Congratulations, you’ve made it to the interaction designer level. Or, strictly speaking, you already have the basic skills that interaction design should have. In addition to Axure, you should also try to use mind mapping such as Xmind, so as to clarify your thoughts. Visio can do flow charts, of course, hand-drawn with paper and pen is also ok, but the actual situation is that professional software made to the boss will look more professional. However, a person’s energy is limited, so there is no need to tangle with these tools. AI can also make flow charts, and even PPT can make interactive prototypes. The most important thing is logical thinking.
Use a Mockup, Axure, etc., to achieve the simplest page jump, of course, if you can do a variety of interactive effects, no doubt a plus. Mind mapping, Visio, can be a little basic function.
5. Access to up-to-date knowledge
This I think is a very important ability, the industry is developing, if has been stagnant, here does not require the design style to be at the forefront, but to understand a lot of industry dynamics. For example, the low poly style has been very popular in the past two years. For example, my boss thinks that the BACKGROUND of QQ login is very fashionable. What do you want to achieve in your works?
First, dynamic effects, we need to ask the front end developers if they can handle it (this is up to them, but there are ways to do it online, but sometimes we have to forgive the front end for not doing it…). If they can do that, we just have to come up with a color scheme, and if the front end doesn’t work, we can’t do anything about it. Still images are bad, but they’re still usable. How do you do that? By hand? ! No! Online build tools!
One click, and you can change the color scheme, change the lattice size, and also generate SVG format.
For the UI, need to get information is very large, in addition to the popular design style, but also try to understand the development of front-end technology, the Internet dynamic, emerging electronic devices, etc., all in all, the more noise, the better, (but must be related to oh, B stand two dimensional animation not oh) since said himself is turned, total feel professional knowledge system does not reach the designated position, Therefore, when I have free time, I will also read some academic articles, including master’s theses, and cut a picture of some professional articles I have sorted out
The source is CnKI, the account needs to be solved by oneself, the cost is controllable.
More foreign design website, Dribbble follow a few top several big god, domestic words recommend nuggets, UXRen, not limited to their own professional, pay attention to expansion. In terms of systematic knowledge, papers are better.
6. The ability to translate basic layer styles into code language
At this point, a lot of UI’s might say, “I’m not a developer, why do I need to code?” ! In fact, it is not so sophisticated, it is very basic CSS language, for UI, with the rise of CSS3, this skill must be mastered, it is also a very important part of optimizing your application, for example, I want to do the following two button effects.
And then what do you do with it? To cut the figure? If it’s a different size, you cut it into three parts, right? No, the answer is that this is a full replica of the CSS style. Because you hand the front end code like this: normal state border-radius:6px; Box-shadow :0px 2px 2px rgba(0,0,0,0.5) background-image:-webkit-gradient(linear,0%,0%, 100%, from(#FEFFFF), to(#CFD0D4)) text-shadow:0px 1px 0px #FFFFFF;
Press status key border-radius:6px; Background-image :-webkit-gradient(Linear,0% 0%, 0% 100%, from(#D4D4D4), to(# 9c9eA1)) No shadow in the text
Flatten times, you might say, flatten! Why do I need these stereo/sag effects? It’s gone back ten years! So your undeniable Material Design style, and now soft gradients and diffuse projections, these are all styles that can be implemented directly, and if you can’t translate these effects into CSS, it’s very difficult for front-end developers, They don’t see the subtle contrast between dark gray and light gray gradients, the size of the outer glow, the color value, etc.
There will also be a new section detailing the basic relationship between layer styles and CSS3.
Converting layer styles to code with the help of the online CSS3 style generator is definitely the easiest way.
7. Comprehensive ability
This one summarizes some other skills and areas of knowledge that I think are helpful, such as logical thinking, which I think is very important. In many companies, UI even unwittingly shoulder the construction of the product structure, (is the structure not the structure oh), “logic” this kind of inexplicable ghost things, only see more think more accumulation, will certainly improve. If you want some dynamic effect, you might also set a value for this velocity curve at the front end.
Canvas can achieve filter effect. JS framework and a variety of plug-in libraries you build? Don’t know is not terrible, can from now on, try to understand. In addition, it is recommended that the UI learn some basic vocabulary, such as lazy loading, database, variables, buffer pages, etc. In short, you can not, but do not look naive when someone is talking to you. However, you should not let these “side doors” occupy the main part of your time. I just suggest that you remind yourself that there are still many unknown areas to explore when you finish the work at hand and want to browse Taobao shopping and wechat moments. About half an hour a day is enough.
In addition to their own professional, other relevant as much as possible and dabble.
The barrier to entry of UI is very low, and you can go straight out of a training institution (as long as you have studied it carefully), but to become a real interface designer, as opposed to an artist, you need a lot of advanced skills. I am not from a design major and have not received any training, but I have accumulated some experience through self-study step by step. Anyway, want to have their own thoughts, a failure of the UI is the development to do a few * figure and then draw a icon, product manager, said zhang advertising figure is missing here is intimate search a then change on the drawing, and a successful UI is involved in the product design, and use their expertise to tell people around us, I what is the meaning of this design. Over.