UI design 2016 design trends, must look!

Mobile Apps 1. The standard design language of each platform (Android/ios/html5/web) is close to the same

There are only stylistic differences on some native controls and no significant impact on users.

Material design does not daxing its way, it is not possible to attack (using the Material design App on iOS), and the pragmatism of iOS will significantly impact Material design.

The common form of interaction on the desktop will also affect the mobile side more, and to support production-grade devices like IPad Pro, Ios/android will optimize for compatible desktop scenarios.

650) this.width=650; "Src=" http://image.uisdc.com/wp-content/uploads/2016/01/c4cbf0cb72a767782964c90aebc3ae2d_ B.png "width=" 189 "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

Source: Google + also has a bottom navigation interaction in the Android version

2. Design specifications, platform features will be more and more attention

Large manufacturers more pragmatic, more compliance with the platform design norms, only in the case of the need to re-invent the wheel, because of the implementation, adaptation, user learning costs and other aspects of consideration, self-created interactive effect may not be ideal.

(IOS App, ideally should fit IPhone 5/6/6+ resolution, Ipad/ipad Pro's 25%, 50%, 75%, 100% wide resolution)

650) this.width=650; "Src=" Http://image.uisdc.com/wp-content/uploads/2016/01/4b88c027f9eb9fa3261b3560311bcd8d_ B.png "width=" 1118 "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

Support Platform features (3D Touch, Live Photos, Chromecast, split screen) can build a word of mouth in Early adopter, get free spread points, but also will be the middle position of the users from the bid hand over.

But 3D Touch is still a gimmick.

3. Dynamic use is more common, but more in micro-interaction

Too gorgeous animations, often appear prone to disgust, and will cause users to wait longer.

Logical animation, micro-interaction forms will be precipitated in 2016 years and as a new platform specification. (such as the previous drop-down refresh, Float Label and other difficult to detect the effects will be more popular)

650) this.width=650; "class=" Alignnone size-full wp-image-169668 "alt=" Floating-input-labels "src="/http Image.uisdc.com/wp-content/uploads/2016/01/floating-input-labels.gif "width=" "height=" "style=" border:1px Solid RGB (230,230,230); vertical-align:middle;margin:0px 0px 1.75em;height:auto;padding:16px;text-align:center; Color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height:21px;white-space: Normal;background-color:rgb (246,246,246); "/>

4."High Availability" design overcomes the "simplicity" of the design

Smartphone users have been extended to the very edge of the crowd, and the magnitude is large, they have no concept of the general interface interaction, metaphor, the information as straightforward as possible, lossless, will be in usability and design of the "simplicity" of a certain conflict.

650) this.width=650; "Src=" http://image.uisdc.com/wp-content/uploads/2016/01/db996bd40fb43291dd7f6af6eb0b7e6c_ B.png "width=" "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

This is also the biggest problem with the FAB button in the "Burger menu" and Material Design.

5. Graphic design, game design inspiration will affect the APP interaction/content Design

Flat 2.0 feeling of the design: Although the overall feeling is still "flat", but the shadow, gradient and other details will be richer.

650) this.width=650; "Src=" Http://image.uisdc.com/wp-content/uploads/2016/01/843d93764ff8eba73330f9538cdf03ba_ B.png "width=" "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

Beautiful illustrations, photography is more common, directly affect the quality of the app itself.

Choose more fonts, typography more like magazines.

650) this.width=650; "Src=" http://image.uisdc.com/wp-content/uploads/2016/01/fc62b0e15d3f100b861c9565da208040_ B.png "width=" "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

6."Smart Notification" will be the new "app main interface"

650) this.width=650; "Src=" http://image.uisdc.com/wp-content/uploads/2016/01/aef48e132611f427ff7da02399504aeb_ B.png "width=" 1170 "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

The core value of smart watches, such as Apple Watch, is proven to be "notifications," especially when everyone has a lot of apps, attention resources are scarce, and not actively launching apps (or inconvenient to start, like Apple Watch), notifications become the most direct channel for users to interact with the app.

Notice will appear in a more "smart" form, not the current ad push form, or similar Widget resident form, but closer to the "watch screen" size, on-demand, interactive, functionally complete interface (even on the phone, not on the watch), users can even never open a App to enjoy all the features the app offers.

Web Design 1. The new mobile App will not necessarily have a full-featured page

For new applications, the most complete and powerful must be the mobile version. Because the mobile phone can obtain the most abundant information, can be sent by notification and other methods to be closer to the user.

650) this.width=650; "Src=" http://image.uisdc.com/wp-content/uploads/2016/01/74b599aad1fe5c7ff3b70837c095c178 _b.jpg "width=" 670 "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

650) this.width=650; "Src=" Http://image.uisdc.com/wp-content/uploads/2016/01/279ed6bb465b07feb8139c3a29f8aada_ B.png "width=" "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;font-family:arial, Helvetica, Arial, sans-serif;font-size:12px;line-height:21px; Background-color:rgb (246,246,246); "/>

Source: Instagram Web page, only picture browsing function, unable to upload photos, no new users, search and other functions.

HTML5 page as a sharing page display, diversion of the important entrance, will first retain the content of the display and consumption, two sharing function, will also meet the most basic application functions, such as drip taxi version.

Web version only as HTML5 page enlargement and content expansion, there will be few features of the WEB features.

2. The web will replace the native application and become the main desktop application development platform

With the enhancement of browser capabilities and the maturity of development tools, the number of WEB developers is growing rapidly, and there will be a large number of gmail/google Docs-level apps that do not have a corresponding native version.

650) this.width=650; "Src=" http://image.uisdc.com/wp-content/uploads/2016/01/200768a09aa237e76c441b007f3d8d3b_ B.png "width=" "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

A large number of outstanding, well-designed, interactive and magical desktop experience will come from the browser side, Web-based user behavior focused on the heavy, creative strong core users.

650) this.width=650; "Src=" http://image.uisdc.com/wp-content/uploads/2016/01/dba963dc6ad1297fc73038f12cec1c12_ B.png "width=" "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

3. There are a large number of users of the desktop site, will no longer easily revised

The cost is high, but the income is limited, if the revision, will mainly as the brand expansion, the design synchronization factor consideration, minimizes modifies the functional level, changes the skin mainly.

If you want to do the functional level of the revision, will be from the response to the mobile phone version, tablet Touch version of the design, extended to the desktop side to design. The loss of advanced features in this process may be resolved in an elegant way, with the original interface intact and the hidden entrance added.

Design Tools 1. The Battle of prototype tools may come to a winner

The conditions for the prototype tool to win

• Tightly coupled with static interface design (static interface changes should not break the prototype logic)

• Easy to make responsive design (mobile phone – ipad interface as far as possible preview)

• Easy to get started (Framer is not intuitive at present)

• High scalability for a slightly more complex interactive effect

Prototype tool after 2015 years of melee, by 2016 years there may be a platform to become the new Sketch as a fact standard.

2. The design will use real-time, real data

Project Comet is a great impression on Adobe Max, from Google Spreadsheet, which directly connects data to the design from sources such as Web pages. This is a clear trend, and most applications this year should support this.

Real data, whether for design decisions or product decisions, can have a very direct effect. (There are too many products to see self-feeling super good, real one on-line dad do not know)

650) this.width=650; "Src=" http://image.uisdc.com/wp-content/uploads/2016/01/407defa21ab41bb944833db3459102f6_ B.png "width=" 478 "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/> 650) this.width=650; "Src=" http://image.uisdc.com/wp-content/uploads/2016/01/6fb0d1bdf9086aa1c865c5965df971fb_ B.png "width=" 480 "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

3. VR design tools will begin to appear

With the official release of Oculus Rift in 2016, VR entered the same-date of commercialization. Although the previous VR was more used in the game, Facebook's acquisition of Oculus VR must be more than just to curry favor with gamers.

650) this.width=650; "Src=" http://image.uisdc.com/wp-content/uploads/2016/01/b4a99f5130f52b1ee4d29d18e7bb0c45_ B.jpg "width=" "style=" border:1px solid rgb (230,230,230); vertical-align:middle;height:auto;padding:16px; Text-align:center;color:rgb (82,82,82); font-family:arial, Helvetica, Arial, Sans-serif;font-size:12px;line-height : 21px;white-space:normal;background-color:rgb (246,246,246); "/>

The immersive feel of VR will obviously bring new information and interaction, which is not what the current graphic design software can satisfy, but the current VR is not in addition to direct code design, these may be changed this year.

4. Tablet type devices (such as ipad Pro) still can't play a big role in APP Design/code Process

Apple has not yet had the available Xcode on the ipad (even if it runs Swift's command line), and Sketch has no intention of launching the software on the ipad, and there is no movement on the ipad for all the prototypes that have been on the MAC platform. Even this year, it is the most toys. In 2016, the situation with IPad Pro was still not optimistic.

UI design 2016 design trends, must look!