让人印象深刻的7种移动端UI设计风格.pdfVIP

让人印象深刻的7种移动端UI设计风格 如果你是一个APP狂热分子 ，你会花大量的时间在各种APP的尝鲜中 ，你会明显感受到一 些APP在采用着某种风格鲜明的设计语言 ，来标榜自己的独特之处 ，行成自己的设计风格 ， 甚至引领设计风向。去年我们关注到随着Metro设计风格的影响和iOS7的发布，APP明 显都开始尝试扁平化的设计语言了，除此之外，还有哪些显性化的设计语言崭露头角呢？ 在这篇文章里 ，我想分享一些日益显性的设计语言 ，让人一眼就记住它的风格 ，有一些已经 随着优秀设计师的摸索 ，融入到国内移动产品设计里了 ，而有一些 ，确实是刚刚在萌芽阶段 ， 需要更进一步的摸索和尝试。 一、唯一主色调 |Simplecolorschemes 为什么我们要定义一个界面多种颜色？仅仅用一个主色调 ，是不是就能够很好的表达界面层 次、重要信息，并且能展现良好的视觉效果？事实上也正是如此，随着iOS7的发布，我们 看到越来越多唯一主色调风格的设计 ，会采用简单的色阶 ，配套灰阶来展现信息层次 ，但是 绝不采用更多的颜色。 卡塔尔航空公司 卡塔尔公司航空就是这样的设计案例，整个界面采用粉色的主色调，从标题栏到标签页 ，从 操作按钮到提示信息 ，除了黑白灰之外 ，全部采用粉色设计 ，这种简介的的配色风格 ，反倒 起到了很好的信息传达效果 ，也具有良好的视觉表现力 ，设计师在内容排版上的技巧实在是 加分。 Readability采用红色主色调设计 ，连提示信息背景色、线性按钮和图标都采用红色主色调 ， 界面和 LOGO也完全是一个色系的。而Vivino采用蓝色主色调设计 ，信息用深蓝、浅蓝加 以区隔。Eidetic采用橙色主色调设计，其中的关键操作按钮甚至整个用橙色提亮，信息图 标也用深橙色、浅橙色来表达程度。 可以说唯一主色调设计手法，是真的做到了移动端APP的最小化（Minimal）设计，减少 冗余信息的干扰，使用户专注于主要信息的获取。 二、多彩色 |Hypercolour 而与唯一主色调形成对照关系的，就是Metro引领的多彩色风格，为什么我一定要给我自 己的产品定义一种主色调，多彩色就不能是主色调吗？于是出现了不同页面、不同信息组块 采用撞色多彩色的方式来设计的风格 ，甚至同一个界面的局部都可以采用多彩撞色 ，也产生 了不少优秀的设计。 优衣库出品的RECIPE，是一个让人眼前一亮的设计案例 ，多彩色的设计风格融入到整个APP 中，不论是切换标签页 ，还是在内容组块中滚动 ，都会变更不同的主题色。色彩切换的时候 ， 还会有淡入淡出的效果 ，让切换变得自然而然 ，完全不生硬。RECIPE的番茄钟计时器模块 ， 会一边计时一边播放优美的美食背景音乐 ，同时切换不同的主体颜色，随着主体颜色的变更 ， 所有的前景文案、图片也会变更为该色系 ，加上清晰度极高的美食图片 ，真的是视觉+听觉 的双重享受。RECIPE真的是2013年难得一见的优秀设计。 而PeekCalendar、EveryWeather和 Harmony这三个APP ，是列表多彩色的设计案例， 这种列表多彩色 ，不知道是不是从Clear开始再度流行起立的 ，用鲜亮的多彩色来区分信息 ， 确实能起到突出的效果，视觉上极其醒目。 可是对于一些内容型的APP ，也许并不适用 ，比如GoogleKeep的多彩卡片 ，确实是在内 容阅读上会起到反效果。百度云记事本第一版设计也是多彩色的 ，但是后来考虑到文字记事 比较多，为提供良好的文字阅读体验，还是把多彩色改成灰白色微质感的设计。 三、数据可视化 |DataVisualization 至于对信息的呈现，越来越多的APP开始尝试数据可视化、信息图表化，让界面上不仅仅 是列表 ，还有更多直观的饼图、扇形图、折线型、柱状图等等丰富的表达方式。表面上看起 来也不是很难的事情，但是若真想实现，背后的复杂程度也不容小窥。 NiceWeather用曲线图来表达温度的变化 ，Jawbone UP用柱状图来表达每天的完成情况 ， PICOOC用折线图来表达每天体重、体脂的变化。移动APP利用数据可视化，可以在更小 的屏幕空间内，更立体化的展示内容。 四、卡片化 |Cards 卡片也是一种采用较多的设计语言形式 ，无法考究这种卡片的设计 ，是从Metro的tiles流 行起来的，还是从 Pinterest的瀑布流流行起来的。总之我们可以发现，Google的移动端 产品设计已经全面卡片化了，甚至Web端也沿用了这种统一的设计语言，据说是Google 搜索的体验负责人引领的设计语言统一升级。 luvocracy的卡片流突出信息本身，用大图和标题文字吸引用