With the release of iphone6 and 6plus, ios resolution also presents a trend of fragmentation, adaptation has become the most headache for designers.
The design size of 6Plus is 1242*2208 (according to this size), the physical size is 1920*1080 (the hardware size has nothing to do with the design), and the enlarged version is 1125*2001. What is the difference between these three? Which one should you design initially? At present the more popular approach is to first press iphone6 resolution 750*1334 (try to use vector elements), after the completion of the annotation of good coordinates, and then will be 750*1134 in addition to 2 times 3, output amplification version 1125*2001, in the amplification version of the output resources to the program after cutting the map, and then let the program to adapt to each size, This is a lazy practice, basic can adapt to a lot of screens, occasionally there will be control stretching and display incomplete problems, can only let the program fine tuning, of course, if conditional, each resolution of the corresponding resource is the best.
For apple’s development specifications, see developer.apple.com/
IOS Design Themes see developer.apple.com/design/huma…
IPAD HIG PDF https://www.hung-truong.com/blog/wp-content/uploads/2010/06/iPadHIG.pdf
Also, watch out for the regular screen and the Retina screen, which typically has twice as many pixels. So when designing iOS graphics, try to keep the pixels even.
For example, the normal screen is named icon.png and the retina screen is [email protected], while the current triplogram is mostly [email protected].
Icon Template IOS7, this is the official IOS7 published by apple out of the IOS7 Template.
For the official iOS icon documentation, see the following page:
Developer.apple.com/library/arc…
The iOS icon specifications are as follows.
- Uploading to the App Store requires 512px by 512px images.
- On the iPhone Retina display at 960px by 640px resolution, the icon display is 114px by 114px, with a 20-pixel rounded corner, a 4-pixel 90-degree black projection, and a 2-pixel 90-degree white inner projection, all with highlights by default.
- In iPhone 480px by 320px. The icon is 57px by 57px, with a 10-pixel rounded corner, a 2-pixel 90-degree black projection, and a 1-pixel 90-degree white inner projection, all with highlights by default.
- In iPad 1024px by 768px resolution. The icon is 120px by 120px with a 27-pixel rounded corner.
- Apple font specifications.
- Navigation bar title: Medium 34px
- Button and header: light 34px
- Form label: Regular 28px
- Tab page icon tag: Regular 20px
- Clickable object area: no smaller than 44px by 44px. (Follow point 5 above)
- In fact, iOS icon is not cut into a circle, directly give a square, the system will make the I icon rounded mask and highlight. PNG, [email protected], [email protected].
- The iOS8 specification is as follows: iPhone 6, 7 and 8 screen 1334px by 750px, iPhone 6, 7 and 8 screen 2208px by 1242px.
- The iPhone X screen is 1125*2436. I have read an article about the design of iPhone X, and I feel that the summary is very comprehensive, so I directly link to www.ui.cn/detail/2839…
The physical characteristics of Surface are shown below:
Microsoft’s development reference document for developer.microsoft.com/en-us/windo…
= = = = = = = = = = = = = = = = = = = = = = = = = = = this is a delicious line ~ ~ = = = = = = = = = = = = = = = = = = = = = = = = =
Finally, share a few color matching websites, I personally tested the website, the picture is my own screenshots, not copy, we can refer to, are good color matching websites:
1. zhongguose.com
Super beautiful Chinese style color matching, the website claims to collect the most complete Chinese color, as well as Chinese and English translation, very intimate, five-star praise.
2. nipponcolors.com
Japanese traditional color, need not say much, literature and art and ancient style, worth collecting.
3. colrd.com
Users can upload their own pictures and color schemes. See the color scheme you like, you can save it.
4. Adobe Color CC color.adobe.com
Super complete color scheme. You can also go through the color wheel and match color schemes.
5. uigradients.com
Do gradient matching color dedicated site, color value of what is very full. Each color also has a beautiful name, come and feel a wave of ~
6. webgradients.com
The site is also known for its gradient colors, but the overall style is soft and clean.
7. colorexplorer.com
An online tool that can upload pictures and automatically detect color values.
8. www.colorfavs.com
The same type of site as Colorexplorer, Colorfavs, can upload images to analyze color matching.
9. www.palettable.io
A website where you can match your own color scheme.
10. reeoo.com
Through color search, we provide users with wonderful cases of APP, web design, graphic design, book design, ICON and so on.
11. colorsupplyyy.com
This site is great for flat color schemes, so feel a wave of colors first.
12. paletton.com
Users create a color scheme by setting up a color, using the site’s options and fine-tuning parameters
13. www.colorhunt.co
Different color schemes are updated in real time and are arranged in order of popularity.
14. lolcolors.com
Hex Code – Hex Code – Hex Code – Hex Code – Hex Code – Hex Code – Hex Code
15. www.colourco.de
Slide the mouse freely in the web page area, you can produce different colors. Decide on one color and slide to create the next until you find the right one.
