UI Designers are the only designers who have to work with programmers , We've seen a lot of jokes about each other , So what UI Designers are the best in the eyes of programmers ? Among them are 3 Levels .

<>1. understand UI

you 're right , The first is to understand UI.UI The designer designed the human-computer interface , The carrier of interface is equipment . This is the difference between other designers . Different equipment has its own characteristics and requirements , Understanding equipment knowledge is the common goal of programmers and designers , It's the basis for them to find a common language .

Designers need to understand these things :

* Controllable basic properties : typeface , Glyph , Size and unit , Height and width , Space left blank , colour (256 colour ,RGBA), Gradients , fillet , transparency , shadow , Alignment , Hierarchy .
* System components ( navigation bar , menu bar , taskbar , Dialog box, etc ) Size of , Style , Interactive form , Version differences .
* Custom components :1/2/3 Level title , text , prompt box , Button , Popup , Selection box , Drop down list , Icon , Various cards ……
* State change : ordinary , hover (hover), Select / activation (selected/active), Not available (disabled).
* animation : position , size , colour , transparency , Changes in shape , And the duration can be controlled , Velocity curve , loop .
* grid :2,4,8,16,32 Multiple alignment of .
* Screen adaptation : size , Aspect ratio , Pixel density (2x,3x,hdpi,xhdpi……), Variable size rules for components .
* Multi language adaptation , The longest compatible language
<>2. Understand the standard

Junior designers want to do more practice , Every project, even every need, is creative once . Gradually , In the repeated work, we know that we should solidify and utilize certain things , It can reduce the workload of oneself and programmer , Can unify the design style again , So norms came into being . Standardization is the best practice to improve the efficiency of collaboration between designers and programmers . These are the things that can be standardized :

* Basic attributes
* Platforms (iOS,Android,Windows) Design style specification under
* Custom components
* Cutaway : File naming specification ( All lowercase English , Underline connection ), What is the need for transparent borders
* tagging : It should be marked up , All sizes are even
* Design iteration : Manuscript version number management
* maintain : Manage all used cutmaps , In each iteration of the product, in addition to adding new graphs, the obsolete ones will be eliminated before they are given to the programmer as a whole
Determination of these specifications , In addition to relying on design capabilities , You also need to understand the implementation mechanism of the development
. Be aware of development constraints , Can't make the effect that is difficult to achieve , Measure development and maintenance costs at the same time . For example, understanding “ Take the upper left corner as the origin coordinate system ” Only by using the development positioning mechanism can we mark all the labels ;web The font size of the item cannot be less than 12px, Otherwise, the latest browser will not take effect .

in addition , Whether the execution specification is in place is one of the criteria for programmers and designers to evaluate each other , This requires enough care on both sides . It will be tangled during acceptance 1px or 1 The designer of numerical color deviation , Not only won't be annoyed , Instead, it's seen as a sign of dedication . If anyone can use or develop tools —— Such as automatic marking or code level verification and inspection —— To enhance collaboration , It will be regarded as a God .

<>3. Understanding design

Aesthetics is possessed by everyone who has feelings , If UI Technology can be seen in daily work, which is naturally respected . To this level , Yes UI The designer's request returns to the design itself , The most basic is to use the general design method to the product .

The following creative techniques and the use of consciousness , In the eyes of the project team, they are all professional :

* Color application
* Rendering emotional atmosphere according to business objectives . For example, e-commerce websites use red , Yellow is the main color , To excite users , One impulse leads to buying behavior .
* In line with product characteristics , For example, green represents safety , Blue represents technology
* In line with user characteristics , Comprehensive consideration of gender , Age and other factors , For example, pink is suitable for women , Bright colors for the elderly
* Strong sense of hierarchy , Highlight key points
* Style control , Cater to the preferences of user groups , for example : soft , youth , steady , Simulacrum, etc
* Cool animation without dominating the audience
* individualization , Like a skin change
Some of these are skills of visual designers , actually UI Designers' penetration into other design fields is a natural upgrade after the design level reaches a certain level . We can expand in these areas :

* Advertising and graphic design
* Design concept : Be able to explain the ideas and benefits of this design to project team members , And what information do you want to convey to users through design
* Non functional area ( For example, the guide page ) Marketing copywriting
* Design of operation materials
* Interaction design
* Take over the responsibilities of the product manager , Design interface and interaction process directly according to business process
* Familiar with user experience theory and optimization method
* Human computer interaction guide familiar with platform features
* Clear business oriented design objectives , For example, guide users to impulse consumption
* VI Design
* From products UI Evolution to enterprise logo,slogan
* mascot design
* UI Design expansion affects business cards , packing , Mail signature bar, etc
* product design
* Be able to correct interaction logic omissions in product documentation
* Study the design concept of competitive products and surpass it
* Web Design
* The front end is the closest UI The development of designers , Understand HTML/CSS/JS You know more about programmers

last , Just like programmers , If designers can improve their English , Direct reading and learning foreign materials , Will be very helpful to keep up with international design trends , Improve skills . After all, the operating system and UI Most of the design trends are invented and led by foreigners , We are looking forward to leading the industry in China .

©2019-2020 Toolsou All rights reserved,
Send love - A little romance for programmers VHDL—— Design of frequency divider Python Implementation of Hanoi Tower code It's over , Starting salary 30khtml+css+js Make a simple website home page QQ Login interface implementation Hill sorting of sorting algorithm ——c++ realization 【 Wechat applet learning 】 Netease music cloud code page implementation details Resume the 13th session python Blue Bridge Cup 2022 Solution to the 13th Blue Bridge Cup ( whole )