9大UI设计

+$In web design, great user interface, or UI design, is all about helping the user to accomplish a given task as simply and efficiently as possible. While the look and feel is undeniably important, at the core of a great UI is function: in terms of navigation, it should be intuitive to the point of being invisible. As soon as a user gets lost, or can't work out where to go, the UI's not doing its job, and there are plenty of examples of+$painful UI Fails+$to demonstrate what you shouldn't be doing.

这个网站和应用程序列表可能有不同的设计原则和不同的功能,但它们有一个共同点 - 有效的UI设计,满足以上所有以及更多。请继续阅读,了解他们为何如此成功。

+$01. Montreux Jazz Festival

UI design: Montreux Jazz Festival

+$Here's a fantastic way to build your own tailor-made festival programme with a few swipes

+$(Image credit: Montreux Jazz Festival)

+$There's nothing like being at a festival to get your FOMO levels through the roof; sure, you might be enjoying the act you're seeing now, but maybe there's another even better one happening elsewhere that you don't even know about. No matter how many times you comb through the long list of performers, there are bound to be a few absolute gems that you miss. But this great piece of UI design for the Montreux Jazz Festival aims to help you ensure that you get the very most out of your time there.

+$It keeps things beautifully simple, presenting you with six binary choices that you can swipe left or right to build up an impression of your musical preference – for example, do you prefer DJs over bands? – and once you're done it'll present you with your own personalised programme based on what it thinks you'll enjoy, complete with links to buy tickets.

UI design: Montreux Jazz Festival

+$Lizzo! How did they know?

+$(Image credit: Montreux Jazz Festival)

+$It's easy and intuitive and, while you'll doubtless want to double-check the full programme anyway to make certain that there's definitely nothing you've missed, it's a brilliant way to help you drill quickly through a lot of information to find results.

+$02. Tilt Brush

+$Virtual reality is very much frontier territory as far as UI and UX is concerned. It's designers and developers having to make stuff up as they go along, with naturally mixed results. What works on a flat screen doesn't necessarily work so well in VR, and building an effective and useful VR app that you can use for hours without getting motion sickness can be quite a challenge.

+$So it's great to see a VR product like Google's倾斜刷+$– which lets you build up 3D paintings in a virtual environment – that not only works, but is so intuitive to use, and with such great results that artists are already incorporating it into their creative workflows.以这种方式领先关于开始使用这款改变游戏规则的创意应用的一些优秀专业提示。

+$03. Patterning

UI design: Patterning

+$Patterning's circular, minimal approach makes it easier to roll your beats [Image: Olympia Noise Co]

+$Olympia Noise Co's iOS drum machine,图案+$, is unlike any you've seen before, and with good reason. Rather than sequence your rhythm on a grid like every other music app, Patterning uses a circular interface for the basic business of laying out your beats, with colour coded drums so that you can easily see what's what.

除了基础知识之外,Patterning的智能但最小的UI使得从单个模式中对较长的歌曲进行排序的更复杂的业务更具挑战性,使您能够轻松地创建模式的变化,然后将所有内容组合在一起。它需要一种同样简单的方法来使一切听起来更好;它的调音台和FX接口都经过精心布局,带有醒目的视觉提示,可帮助您获得所需的声音,而不会陷入难以理解的控制之中。

+$04. MailChimp

UI design: MailChimp

+$MailChimp's design is clean and flat and largely typographical [Image: MailChimp]

+$Newsletter creation and management may not be the most exciting task in the world, but the beautifully designed, intuitive user interface design ofMailChimp+$makes it that much more palatable. Since its recent redesign, the web UI is clean, flat and primarily typographical.

首次设置帐户后,第一个广告系列开始之前的经典“空帐户”问题就会被有用的,视觉上令人愉悦的用户指南所平衡。有足够的空白区域,清晰的行动呼吁让新用户走过了整个过程的每一步 - 在某些情况下甚至还加入了一个微妙的动画指针来指示点击的位置。

User interface design: MailChimp

+$Helpful calls to action prevent you getting lost in MailChimp [Image: MailChimp]

+$05. Paper For IPad

UI design: Paper for iPad

+$Paper is designed to be intuitive to use [Image: FiftyThree]

+$A multi-award-winning app designed to help users be creative in a more intuitive, natural way,+$lets you draw with your fingertips with a surprising level of detail - although it also works with a stylus if more precision is required.

+$Designed exclusively for touch, Paper's UI design has no buttons or settings to worry about – just a series of specialised tools. The versatile fountain pen-style Draw tool comes free, while Sketch (soft pencil), Outline (bold marker), Write (ink pen), Color (watercolour brush) and Mixer (colour blender) come as in-app purchases.

UI design: Paper for iPad

+$Rather than buttons, Paper has a set of specialised tools [Image: FiftyThree]

+$06. Things

+$Available for both Mac and iOS,事情+$is a popular task management app with an award-winning design that's intuitive and easy to pick up, based around the familiar to-do list concept. As its creators Cultured Code point out, the idea is to make your life easier, after all.

+$The slick, clean user interface design comes pre-divided into lists to help you categorise your tasks: urgent things go in 'Today', slightly less urgent can wait until 'Next', while 'Schedule' plans further ahead. Each entry captures important information in one go – title, notes and due date, as well as tags if required to help categorise everything. Best of all, the Quick Entry window is accessible from anywhere using a simple keyboard shortcut – and it's all synced automatically across desktop, iPhone and iPad.

+$07. Campaign Monitor: Worldview

UI design: Campaign Monitor Worldview

Worldview以易于理解的方式列出复杂数据
+$(Image credit: Campaign Monitor)

+$A wonderfully original idea that puts an engaging twist on email subscription data,Campaign Monitor:Worldview+$overlays information about individuals who are opening, clicking and sharing your communications on a Google Map in real-time for both geographical and personal insights.

+$The landing page introduces the concept in an immediate visual way, with example pins dropping onto a world map – and the application interface itself is refreshingly clean, revolving around the map and a few basic menus for controlling settings. A great example of UI design, with simple iconography and colour coding identifying different categories of user engagement at a glance.

+$08. Figure

UI design: Figure

+$Figure's designed to help you bang out tunes on the go [Image: Propellerhead]

+$Yet another example of flat design making a potentially very complicated UI design look very clean and intuitive,数字+$is a synthesiser and drum machine for iOS from Swedish developer Propellerhead, which is also behind desktop music production software Reason.

您可以点击触摸屏垫,按住手指并滚动节奏轮以获得一系列不同的声音,或者在屏幕上滑动以在比例尺中播放不同的音符。还有轮子可以控制您必须使用的音符范围,旋律和低音线条中的音符数量,以及各种用于以各种方式调整声音的选项卡。

+$09. Kennedy

UI design: Kennedy

+$Kennedy adds context to your memories [Image: Brendan Dawes]

没有什么比滚动你的旧版Twitter更新更好的了,想知道你六个月前发布那个东西时到底想到了什么。缺乏背景通常意味着当时具有完美意义的事物可以在几个月或几年内变得毫无意义。

肯尼迪+$, a diary app from the ever-excellent布兰登道斯,旨在为您的记忆添加背景。您可以使用它来创建您正在进行的文本注释,就像您可能在Facebook或Twitter中键入一样,并且可能会在您使用时将照片添加到注释中。然而,巧妙的是,肯尼迪通过添加您的位置,日期和时间,当前天气状况,新闻标题以及如果您当时正在通过手机收听音乐来添加额外的上下文层,您正在收听的曲目的名称。

UI design: Kennedy

+$Kennedy's added details make a rich alternative to dry notes [Image: Brendan Dawes]

+$The result is that instead of a dry note that won't really mean much down the line, you capture a particular moment with fuller context, complete with plenty of prompts that can help bring back a memory in much more detail. And Dawes' clean design and smart UI keeps everything simple and good-looking.

相关文章:



翻译字数超限