UI设计可以成就或者毁掉你的网站和应用：怎么做才对呢?

在网页设计中，好的用户界面和UI设计的宗旨在于帮助用户尽可能简单和高效的完成特定任务。虽然视觉和感受也很重要，但是好的UI设计的核心永远是功能：对于导航来说，必须是达到不可见的直观。只要用户会迷路或者不知道去哪儿，这个UI设计就是失败的。

一些例举的网站和应用可能有不同的设计原则和功能，但是它们有一个共同点-高效的UI设计，完美解决上面的问题甚至更加到位。让我们来看看它们是如何做到的。

01.栅格 Grid

应用“栅格”顾名思义，是一个足够简单的基于栅格系统的UI设计，它给混乱的信息建立了次序。这个应用的主要目的是定制一个易于理解的办法来管理项目的不同组成部分，例如标签，图片，人员和地点等等。

“栅格”用一个名为“大师”的用户界面，它包含一系列特定的手势来为任务来创建一个栅格结构，可以用你想要的方式来管理它。同时这个工具也可以进行多人合作，用户可以分享计划，在应用内相互联络。这个应用很快会在应用商店上线-你可以注册，并在网站上观看演示视频。

02. MailChimp

新闻邮件的创作和管理可能不是这个世上最让人兴奋的工作，但是一个有很漂亮的设计和直观的用户界面的应用MailChimp让这个事情变得容易接受了。从它最新的设计开始，网页的UI变得干净、平面化和印刷化。

当你初次建立账户，在从头开始第一个任务前常会出现的问题被一个有帮助的，赏心悦目的用户指南所解决。设计上留有大量的空白和放置了清晰的指示，来帮助新用户一步步走过流程 ----一些情况下甚至有一个动画的指示点来告诉用户点击哪里。

03. Authentic Weather 真实天气

在他的Behance 页面，德国出生现在纽约工作的设计师Tobias van Schneider半开玩笑的描述他做了又一个天气应用的一些理由。其中最重要的是”切中主题“，这点“真实天气”这个应用确实做到了。

用简单勾线的icon，应用充分传达了这些意思”该死的在下雨”“冷的像该死的冰柜一样”。同时van Schneider还使用大号的Akzidenz-Grotesk字体来炫耀这个经典的比Helvetica美得多的字体。向上滑动可以分享，向下滑动查看明后几天，然后两指一捏来显示温度，这就是了。

Akzidenz-Grotesk：发明于1896年，史上第一个被广泛使用的无衬线字体。

04. Paper for iPad

一个屡获殊荣的应用程序，旨在帮助用户用更直观，自然的方式进行创作。Paper可以让你使用指尖绘制让人惊讶的细节，虽然更精确的要求下你也可以选择手写笔。专为触控方式设计，Paper的UI只有一系列的工具，而无需被按键或者设置所困扰。多功能的钢笔绘图工具是免费的，而素描(软笔)，勾线(粗体标记)，书写(墨水笔)，上色(水彩笔)和调色(彩色搅拌机)需要应用内购买。

05. GlobeConvert

和旅行用的GlobeMaster和小费计算器GlobeTipping一样，作为Globe应用家族的一员，GlobeConvertPro让一直以来你在旅行时所面对的需要转换货币和度量单位的挑战，变得非常简单。

应用的UI界面设计出乎意料的干净和松散，虽然选项包含了多达超过190中货币和动态更新的汇率，超过80种10个大类的不同计量单位。操作非常直，在左边菜单选择你需要的然后输入数值。

06. Things

Things是一个很流行的任务管理应用，在Mac和IOS上都有。它有一个屡获殊荣的，基于熟悉的“要做”列表的直观又简单的设计。正如该应用的制作公司Cultured Code说说它只是让你的生活更加容易而已。

这个干净 顺滑的用户界面设计从预分的表单开始帮助你归类你的任务，紧急的任务放到“今天”，稍稍紧急一些的可以等到“下一个“，更往后的可以放在“计划”里面。每个条目把所有的重要信息一网打尽：标题，备注和到期时间，还有帮助把所有事情分类的标签。最棒的是，用一个简单的键盘快捷方式可以从任何地方进入条目窗口，而且在电脑，Iphone和Ipad上全是自动同步的。

07. Campaign Monitor: Worldview

Campaign Monitor开始于一个很棒的想法如何把邮件订阅数据变得更加的吸引人，它在Google Map上叠加了那些正在打开，点击和共享了你的网页的用户信息，这些都是实时的，而且包含了用户的地理位置和个人内容。

登录页面用，例如用别针掉落到世界地图上，这样的可视模式直接介绍了它的概念。 应用程序本身的界面就很清爽干净，围绕地图为主，放置了一些基本的菜单设置。 它是一个很好的UI设计的例子， 用图标和颜色可以一目了然的识别不同的用户行为。

08. Meter.Me

Meter.Me是一个为了跑步和骑自行车的人设计的健身监测应用。它有一个最小的印刷版式的用户界面，用户在训练中可以通过不同的选项，用简单的滑动手势来激活和跟踪他们的健身进展，而不用去折腾菜单和设置。

在开发阶段，澳大利亚设计师Adam Vella进行了广泛的研究调查，发现追踪训练结果的用户往往能到达较高的健身水平 - 在Meter.Me里，相关的数据可以排序并实时显示，跟踪，然后浓缩成可供参考的每日报告。

09. Google More Than A Map

又一个基于Google地图的UI设计，这次是来自这个硅谷巨人自己。More Than A Map是很整洁的展示了Google地图API的所有可能性。

它分了6个大类，基本地图，卫星地图，街道视角，地点，路行和可视数据。每个都有一系列的可互动的演示，使用了这个世界各地的例子。扁平，易识别的图标，大图片，干净的动画和最少的类型让导航变得轻而易举。而根据来自澳大利亚，泰国，肯尼亚，德国和巴西的案例研究，增加了深度和颜色。

10. Figure

一个很好的例子，它使用扁平设计让可能很非常复杂的UI设计变得干净和直观。Figure是包含合成器和鼓的IOS应用，由瑞典人Propeller Head开发，他也是音乐开发软件Reason的开发者。

你可以点击可触屏，用手指按住向下滚动节奏轮来形成一系列不同的声音，或轻扫在屏幕播放不同音调的音符。还有滚轮可以控制音符的范围，旋律中音符的数量和低音线，还有各种标签来调整和控制声音。

11. Kennedy

当你看翻看一堆6个月前Twitter里的旧更新和帖子时，谁知道你当时是怎么想的。缺乏上下文往往意味着当时非常有意义的话，几个月或几年之后看来变得毫无意义。

Kennedy 是一个写日记的应用程序，来自曾经很棒的Brendan Dawes, 给你的记忆设计了背景说明。你可以用它来写你打算干嘛，就像你写到Facebook或Twitter上的那样，或是给你的笔记添加上照片。它有个聪明的点击按键，可以在日记上增加额外的一层结构来添加当前的位置，日期和时间，天气条件，新闻标题，如果你正在手机上听音乐，那正在收听的曲目的名称也可以被加上。这样一来，你的日记就不只是干巴巴的，之后看来没意义的记录了，相反它可以帮你抓住了那个特殊时刻丰富的背景内容，可以帮你回到那个时间点。Dawes的简洁，巧妙的UI设计让这一切看起来即美观又简单。