If you're paying attention to what's going on in thedesign world, you've probably noticed the ongoing debate aroundskeuomorphism vs flat design.
So here's a quick test. Which of these two calculatorsfeature a skeuomorphic design?
Which of thesetwo apps is skeuomorphic?
If you answered "skeuowhat?" youobviously haven't read any of the approximately 5000 blog posts covering thetopic that have come out in recent months, so here's your chance to catch up.
But if you answered "the app on the right, ofcourse!" then I'm sorry to say you got it wrong too! You see, this was atrick question.
The correct answer is that both apps areskeuomorphs. Read on to find out why.
Defining Skeuomorphism
This obscure word describes the way designs often borrowa particular feature from the past, even when the functional need for it isgone. Examples include pre-recorded shutter noises on smartphones to remind usof film cameras, or calendar apps that feature torn paper and metal rings.
Or, as Wikipedia tells us [1]:
A skeuomorph is a physical ornament ordesign on an object copied from a form of the object when made from anothermaterial or by other techniques.
While Wikipedia only mentions "physicalornaments", the digital world has seen skeuomorphism popularized in thepast couple years mainly thanks to the recent iOS-inspired trend of richtextures and life-like controls.
Microsoft's"Metro" aesthetic, as seen in Windows RT
By opposition, the other side of the coin would be thenewly popular "flat style", of which Microsoft's Metro UI is probablythe main example. Flat Style embraces visual minimalism, eschewing textures andlighting effects for simple shapes and flat colors.
Skeuomorphism or Realism?
Although to be more precise, this trend is not alwaysabout skeuomorphism – which implies a connection to a pastincarnation of a similar design – but rather often about realism [2]: a purely visual style that tries toimitate real-world materials and textures, exemplified by Apple's tackyover-use of leather textures in some of their own apps.
Both appsimitate the layout of a real-world calculator, so they're both skeuomorphs.
So going back to our previous example, both calculatorapps were skeuomorphs, since they both copy the layout of a physicalcalculator. Although only the one on the right goes after visual realism aswell.
Of course, the two often go hand in hand: skeuomorphicdesigns tend to look realistic (to make the connection with the original objectclear), and realistic designs tend to be skeuomorphic (otherwise the realismwould look out of place).
So while realism is a purely visual style, skeuomorphismaffects a design at a much deeper level. But there's nothing wrong with eithertechnique in themselves. As Loren Brichter (of Tweetie & Letterpress fame)pointed out in a recent interview[3]:
Skeuomorphism is [not] bad at all. We needthat to interact with devices in a human way. Gaudy textures are just a visualdesign problem… I hope they tone it down."
So if the problem is "gaudy textures", why didwe end up with them in the first place? And how come we're suddenly getting fedup with them?
Find My Friends:the poster boy for gaudy textures.
It All Started With The iPhone
I believe both the realism trend and the recent backlashagainst it can be traced back to a single product: theiPhone.
Before the iPhone, realism in user interface was unusual,with the exception of video games. In order to preserve immersion [4], game designers had long began to crafttheir user interfaces out of wood, metal, and stone. Diablo 2 for examplefeatured stone-wrought controls and glass energy meters supported by gothicstatues.
Diablo 2’s userinterface, like many video games, featured realistic (but not skeuomorphic)textures. As well as walking cows, apparently.
But in more “serious” contexts, realism was still verylimited. One notable exception being the glass “Web 2.0 style” buttonsinherited from the early versions of Mac OS X.
You could say these admittedly gaudy buttons were thefirst warning signs of Steve Jobs’ infatuation with realism (as proof for Jobs’love affair with real-world materials, Fast Company reported that iCal’sleather stitching is based on Jobs’ own private jet’s chairs [5]).
Realism in earlyOS X versions meant glass everywhere
With iOS, Apple decided to embrace realism even more. ButI believe they had a couple good reasons to do so.
iBooks’page-turning animation: tacky now, but revolutionary at launch
First of all, you can't ignore the visual appeal ofrealism: sure, those leather textures and page turn animations feel tacky nowafter we've been stuck with them for the past couple years, but when the iPhonewas first revealed nobody had seen such visual richness in an operatingsystem’s user interface before (let alone on a phone).
And don't forget the iPhone was a completely new kind ofdevice to a lot of its users. Realism was a way to link the future with thepast, and make people feel at ease with their new device. Since the calendarlooked like one, it was obvious at first glance what its function was – even ifit later turned out that no amount of swiping would turn the virtual pages,since they responded to a button instead.
The Argument for Realism
A medium's technical constraints will always influencethe art it can produce, and this is as true for smartphones as it is for oilpainting. Indeed, there are some specific practical factors that made realismwork on the iPhone.
For starters, on a smartphone –unlike on a desktopcomputer– apps take up the entirety of the screen. You never display two appsnext to one another, which means you can have two apps with very differentvisual styles without risking incoherence.
Settings andWeather: same platform, same maker, yet completely different styles.
So while Apple smartly provided a great set of defaultsystem UI widgets to use in iOS, it also made clear from the start that iPhoneapps did not necessarily need to adhere to their visual style.
Also, the iPhone was designed to be used with yourfinger, rather than with a more precise stylus. Apple designers quickly foundout that this meant touch target couldn't be smaller than a certain size(Apple's Human Interface Guidelines recommend at least 44 by 44 pixels).
Previous smartphones' cramped lists and small icons madeit all but impossible to get fancy with graphics: you simply didn't have anyroom for it. The iPhone's large touch targets requirements opened the door toshowing less on the screen, but doing more with it.
These reasons certainly contributed to Apple's initialdesign direction, and once the tone was set designers quickly embraced it.
After all, the web can be a frustrating platform todesign for, what with its multiple browsers, resizable windows, and slowloading times. Every designer has known the pain of coming up with a beautifulmock-up in Photoshop, only to find out that it will never look as good in thebrowser.
With the iPhone, designers were suddenly offered aplatform with a single rendering engine, fixed dimensions, and a much higherlimit on asset weight (not to mention a great display with vibrant colors). Isit any wonder some of us went a little overboard?
Of course, game designers havehad access to such platforms (i.e. game consoles) for years, and it's nocoincidence that games often feature realistic user interfaces.
It's also worth pointing out that the fixed dimensionsthat make using bitmap assets so much easier are not a feature of everysmartphone OS. For example, Android apps are supposed to adapt to a variety ofdisplays and screen sizes, making designing graphically-rich apps much morechallenging [6].
Yet although smartphones brought us realism, they are nowalso playing their part in ushering in its successor, as we'll soon see.
The Problem With Skeuomorphism
A lot has been said about the excesses of both realismand skeuomorphism, usually manifested in fake leather and wooden UIcontrols [7].
First of all, realism done wrong can morph into kitsch.After all, even in real life fake leather and fake wood are not exactlyconsidered the pinacle of good taste, so why would things be any different onour screens?
There's also the problem of getting skeuomorphism wrong:making somethinglook like a physical object, but not work like it, also known as the "uncannyvalley" of user interface design [8].
Apple's Contactsapp for iPad looks like a notebook, yet doesn't let you swipe the pages tobrowse through your contacts.
An obvious example of this is Apple's Contacts app foriPad, which like iBooks uses the visual metaphor of a book. But unlike iBooks,Contacts doesn't let you swipe left and right to flip pages, breaking the bookmetaphor completely.
But a more subtle yet much deeper problem lies in thevery concept of functionally skeuomorphicinterfaces, independently of whether their appearance is realist or not.
That problem is that when borrowing elements from adesign's previous incarnation, you often also bring its limitations along for the ride, even when theselimitations have no reason to exist anymore.
For example, calendars have traditionally featured onemonth per page, because they're limited by the physical concept of the page.
But although the digital medium has no such limitation,many digital calendars still adhere to the one-month-per-screen rule out oftradition instead of (for example) centering the view on the current week.
Calculator, Calcbot,and Soulver:three different takes on the calculator. Note how for the sake of realism,Apple even uses the traditional "C" key for clearing instead of moreunderstandable backspace symbol like Calcbot.
Another good example is Apple's own calculator app foriOS: by aping a real, physical calculator Apple is artificially recreatingphysical calculators' limitations in the digital space: single-line screen,limited number of buttons, etc.
By contrast, Calcbot doesa much better job of shedding those limitations by including a history featurethat real calculators obviously lack.
And Mac app Soulver goesone step further by shedding the calculator metaphor entirely and insteadembracing its platform.
These UI elements look gorgeous, but they also carry aimplicit legacy of physical limitations (Braun UI by Adrien Olczak).
Or take the humble light switch: these are often used inrealist UIs, but unlike radio buttons or dropdowns they condition our mind tosee the choice as a purely binary one, even when three options might be moreappropriate.
When done right, skeuomorphism and realism will triggerstrong associations with real-world counterparts. This is both a strength and aweakness: sometimes, the association can be so strong that it will stop youfrom improving on what's already been done.
The Rise of Flat Design
Whole industries have sprouted around predicting designtrends in various fields. Still, nobody expected the next design movement to bespurred by Microsoft.
Whether to better differentiate themselves from Apple orbecause they genuinely thought this was a better design philosophy, Microsoftembraced a completely different aesthetic for their Metro-style user interface.
Gone were the shadows, highlights, gradients, andtextures of iOS apps. Instead, Metro offered flat squares of color with bigtypography.
Metro vs Metro
in 2012, Microsoft got into trouble with Germansupermarket chain Metro for trademark infringement, leading them to abandon thename "Metro UI" [9].
But since the bestthey could come up with to replace it is "Microsoft design language",I'm going to keep on using "Metro". I'll have to trust you to knowwhen I'm talking about the user interface or the supermarket chain.
Flat design had been around for a long time (you cantrace its roots back to Swiss design[10]), but Microsoft certainly sent a strongsignal by using it so prominently.
Whether or not the general public cares for big block offlat colors, Microsoft's new design philosophy certainly seemed to strike achord within the tech sphere, with many praising Metro's strong focus ontypography and colors.
And while flat design is often purely visual, it doesresonate with designer's love of minimalist concepts, embodied by the famousAntoine de Saint-Exupery that “perfection is achieved not when there is nothingleft to add, but when there is nothing left to take away”.
Letterpress, ashining examples of flat design applied to games.
This led many designers to start questioning theirapproach [11], and realize that while stitched leathertextures are a lot of fun to design in Photoshop, they're probably not the bestfit for a stock market app.
Even game UIs —traditionally a bastion of detailedtextures and elaborate shadows— are showing signs of embracing minimalism.
Two of the most talked-about games in recent month,Letterpress and Hundreds bothfeature flat designs. In fact, Letterpress creator Loren Brichter even revealedthat the whole game only uses a single image!
The Influence ofTypography
Apps like The Magazine put typography front and center.
But Metro is only half of the story. While Microsoft wasworking on Metro, over on the Apple side a big innovation was also takingplace: high-definition (or "retina") screens were being introduced,first on the iPhone, then on the iPad and laptops.
For the first time ever, computer displays wereapproaching the quality of printed paper.
A few years earlier, the adoption of web-ready fontformats such as EOT and WOFF by browsers had paved the way to using any font onthe web, and many foundries had started the long and arduous process ofoptimizing their catalog for onscreen use.
But high-dpi screens make it possible to use even facesthathaven't been optimized for screen use, as ErikSpiekermanntweeted:
If you want good type on Retina displays,stop discussing hinting et al. Just search for faces that happen to look good.Like the old days.
Or, as John Gruber put itin his article on the topic [12]:
The trend away from skeuomorphic specialeffects in UI design is the beginning of the retina-resolution design era.
When you have a high-definition display andscreen-optimized fonts, you quickly realize you don't need much else to createbeautiful work.
The Responsive Web
The mobile web's influence on design was felt in yet onemore way: responsive design.
Responsive (or adaptive) design is the idea that insteadof creating multiple designs for different devices, a single design shouldadapt to multiple screens.
This can take the form of a multi-column desktop gridmorphing into a single-column layout, big fonts getting smaller, orhover-activated menus responding to taps on a phone.
The Next Web's recent redesign is both flat andresponsive.
All this resizing and shape-shifting makes it very hardto use fixed-size assets. Instead, designers found it much more efficient torely on CSS-generated graphics rendered by the browser.
Moreover, traditional design programs such as Photoshopdon't have an answer for responsive design yet, which is pushing many designerstowards prototyping in the browser directly, foregoing static mockups entirely.
Add all this together and you begin to see why manydesigners are moving away from texture-heavy realism towards the more flexibleand lighter-weight flat style.
The Limits of Flat
This is not to say that the flat style is without its ownproblems.
First of all, like any design trend, it will probably beabused by many designers jumping on the bandwagon without thinking their designchoices through.
But where the main victim of realism is merely goodtaste, taking minimalism too far can have serious consequences onusability [13].
Users have come to rely on a lot of subtle clues to maketheir way through an interface: buttons have slight gradients and roundedcorners, form fields have a soft inner shadow, and navigation bars"float" over the rest of the content.
Remove all these clues, and you end up with a flat worldwhere every element is suddenly placed at the same level, potentially leadingto confusion: Is this a button, or simply a banner? Will anything happen if Itap this? [14]
As designers, will we be able to resist the appeal ofminimalism and keep in mind that the needs of users should always come beforeour aesthetic pursuits? If the way we handled the previous realism trend is anyindication, users might be in for a rough ride…
So it bears repeating that visual style is nothing morethan a means to an end [15]. If the situation calls for realism, gonuts on textures and highlights. On the other hand, if a flat aestheticachieves the design's goal better then it might be time to go on a gradientdiet.
Knowing which style is appropriate for which project canonly come with experience, as well as lots of experimentation [16].
An Unexpected Contender
One of the main reason why the "realism vs flatdesign" debate gained so much steam in recent months is surely that itmaps neatly to the "Apple vs Microsoft" narrative.
So it came as a surprise when Google renewed its focus ondesign [17] and proved itself a seriouscontender.
Google Maps foriPhone's "almost flat" design.
With the recent releases of their newer mobile apps,Google has started pushing a style that some describe as "almostflat"[18], or maybe"skeuominimalism" [19]. Unlike the drastic visual wastelands ofGmail or Google Reader, this new style uses elements like shadows and gradientsin a tasteful, subtle way.
This style offers the best of both world: realism'saffordances and subtle hints combined with the purity and simplicity off flatdesign.
But another way to look at it is that it's simply designdone right: seeking efficiency and simplicity without sacrificing usability tothe altar of minimalism.
In other words, Google is not so much pioneering a newstyle as showing us what digital design looks like when it's done right (…andby the same occasion, how much we all still suck at it!).
The Way Forward
And what do I think about allthis?
I'm glad you asked. Of course, I think it's important tokeep in mind that visual styles are just tools, and not goals in themselves.But this is (I hope) a fairly obvious point, and one that many designers havemade before me [20].
So instead, I will pick a camp and put my chips in withflat design (specifically, Google's less-extreme variety). But not for thereasons you might think.
It's not that I think that flat design is inherently superior,or that I have a minimalism fetish. After all, I love a gorgeously textured iOSapp just as much as anybody.
I just feel like designers have had a lot of practicecrafting realistic things. Browse Dribbble for a few minutes and you'll comeacross dozens of intricate, drool-worthy 3D renders or Photoshop mockups.
What we haven't had as much practice at yet is designingflexible, beautifully typeset responsive sites that adapt to variousresolutions and environments. And we've gotten even less practice atactually coding them.
I believe that until our tools catch up with what the webhas to offer, we'll have to get our hands dirty and start coding [21]. And when you're both designing andcoding a layout, you start to appreciate the value of keeping thingslightweight.
Flat design also forces you to really care abouttypography and layout, two areas where web design has traditionally laggedbehind its more established print cousin.
And on the mobile side, flat design can make it easier tofocus on animation and interaction design, as apps like Letterpress and Clear haveshown us.
So this is why I've been embracing flat design lately:not just as an aesthetic choice, but as a design exercise that forces me toshore up my weaknesses.
Liked this essay? React on Twitter:
Notes
Wikipedia'sskeuomorphism definition.
2. What Skeomorphism Really Is
My postclarifying a few misconceptions about skeuomorphism.
3. Loren Brichter: Designs on the future of iOS apps
Loren Brichtershares his vision for the future of iOS design.
4. User interface design in video games
AnthonyStonehouse explores different video game UI design techniques.
5. Will Apple’s Tacky Software-Design Philosophy Cause A Revolt?
Fast Company'sreport on skeuomorphism at Apple.
Sebastian deWith's exposé on the design process for Android clock app DoubletwistAlarm.
7. Skeu.it
Highlightingskeuomorphism's worst offenders.
8. Avoiding the Uncanny Valley of Interface Design
FranciscoInchauste shows why you can't half-ass skeuomorphism.
Metro's legalissues.
10. Flatliners
Cole Petersgives a little historical context to the "new" flat design trend.
AllanGrinshtein's initial blog post that ended up putting the term "flatdesign" on the map. See also: the correspondingHackerNews thread.
12. The Trend Against Skeuomorphic Textures and Effects in UserInterface Design
John Grubergives his take on the backlash against skeuomorphism, and how it relates toApple.
Kyro Beshayshares his reservations about flat design and Microsoft's "Metro" UI.
14. Flat UI is Not the Only Way Forward
Max Rudberg'sbacklash-to-the-backlash post reminds us that the answer is probably somewherein the middle.
15. How Flat?
A greatdiscussion on Branch about flat design, with comments by Daniel Howells, RogieKing, and Jon Gold among others.
16. The Flat Sink
My article onwhy flat design is not always the solution, whether it's for a sink or a site.
17. Redesigning Google: how Larry Page engineered a beautifulrevolution
The Verge takesus behind the scene to look at how Google is finding its own not-quite-flat,not-quite-skeuomorphic graphic style.
Matthew Mooredefines Google's new visual direction as "almost flat" design.
19. Skeuominimalism - The Best of Both Worlds
Edward Sanchezintroduces "skeuominimalism" as the best compromise.
20. Less Aesthetic, More Design
Wells Rileyreminds us that while visual style is important, design is first and foremostabout building something useful.
21. The Post-PSD Era
Brad Frostexplains why we've entered the post-PSD era.
Even More Links!
· Art Movements and Web Trends (and Gratuitous Mucha Posters)
Viget's BlairCulbreth exposes the link between Art Nouveau and Art Deco, and the trendswe're experiencing today.
· Skeuomorphism and the User Interface
ChristopherDowner from Realmac Software underlines the difference between skeuomorphismand realism.
· The great skeuomorphism misunderstanding
Ken Segall makesthe case for skeuomorphism having its place at Apple.
Chris Baraniukexplains why we're all wrong about what "skeuomorphism" really means,more or less invalidating the whole point of everything you just read.
Source Page:http://sachagreif.com/flat-pixels/
7985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
