整个网站首页的设计采用二维元素。所有元素都不加修饰——阴影、斜面、突起、渐变这样会带来深度变化的设计都是不应该的。从图片框到按钮,再到导航栏都干脆有力,需要极力避免羽化、阴影这样的特效。现实主义、3D、拟物化更是扁平化设计的大敌。扁平化设计中的层次和其它的一一对应,但各个位面间没有交叉,不会明确区分背景图片、前景图片、按钮、文本、导航,等等。那如何做好扁平化设计?扁平化设计依赖于清晰的层次结构和元素布局,优秀的扁平化设计应该能帮助用户理解产品以及交互。现在,越来越多的网站开始应用扁平化设计,在App和移动设计中这一趋势更为明显。在小屏幕中,按钮和选项更少,也让扁平化设计如鱼得水。仅使用简单的元素扁平设计中使用到很多简单的UI元素,比如按钮和图标。设计师更常用矩形、圆形、方形等简单的形状。元素独立。正角、直角、圆弧都非常常见。UI元素应该在保持高可用性的前提下尽可能的简单,保证应用或网站直观、易用,无需引导。为了同时达到简单但直观的效果,你可以尝试为按钮填充深色,以鼓励用户点击。记住,简单的元素并不意味着设计起来很简单,恰恰相反,扁平化设计理念的复杂度可以与任何其他设计风格相提并论。注重排版因为扁平化设计要求元素更简单,排版的重要性就更为突出了。字体的大小应该匹配整体设计,高度美化的字体会与极简设计原则相冲突。字形上可以应该使用粗体,文案要求精简、干练,最终保证产品在视觉上和措辞上的一致性。字体选择上可以使用简单的无衬线字体,通过字体大小和比重来区分元素。同时你也可以使用新奇的字体作为点缀,但一定要记得不能过火。排版的目的在于帮助用户理解设计。标签按钮等其它元素更注重增强易用性和交互性。关注色彩色彩的使用对于扁平化设计来说非常重要。你可能已经发现了,扁平化设计的网站、应用色彩明显要更加鲜艳、明亮。此外扁平化设计的项目也拥有更多的色调。一般的网站很少会使用3种以上的色调,但是在扁平化设计中,平均会使用6-8种颜色。扁平化设计的色调偏通常更有活力——色彩更纯。其主要、次要颜色通常都是非常大众化的颜色,然后再配以几种其它颜色。扁平化设计的另一个趋势在于复古颜色的使用——浅澄色、紫色、绿色、蓝色——都极为流行。极简主义扁平化设计生而简单,整体上趋近极简主义设计理念。设计中应该驱除任何无关元素,尽可能地仅使用简单的颜色与文本。如果一定需要视觉元素,你可以添加简单的图形。“准”扁平化设计最近,越来越多的设计师开始赞同准扁平化的设计。在准扁平化设计中,基调仍然是扁平风格的,但会在设计方案中添加一种,且仅添加一种特效,无论是阴影也好、梯度也好……这种设计风格比严肃的扁平化更加灵活。设计师们喜欢它,因为可以添加深度和纹理;用户喜欢它,因为它能有助于直观的交互。但反过来,也有设计师不喜欢它,因为“准”扁平风格是另两种风格的混合体,缺乏明确的定义,所以更难用好。•由5个阶段构成的:旅行的愿望、目的地的探索研究、行程的预定安排、旅行的完成与分享。主要通过三个主题(mind,body,soul)来激发旅客的旅游意愿,从而选择平台提供的旅行线路。mind开拓视野之类的。body体能挑战类的。soul心灵净化,发现类的。精美的写实图片,极具诱惑力的短小文案,舒适的排版,使用户愿意细细的品味每一个旅行线路,抓住了精神需求,满足了内心的旅行骚动。•网站页面组织比较简单。将所有旅游路线按照不同的标签进行组合,并归类在三大主题下面。由首页、列表页、底层落脚页构成。•首页:•附着于横幅banner之上slogan标题(Innovativeholiday&travelideasthathelpyoulearn,growandchange.)说明了网站的定位。•三个区块(mind,body,soul及其附属文案)说明了旅行线路的整体分类情况,而hover显示的内容进一步表明了每个主题的意义,并引导用户更深入的了解这个主题的旅游线路。•紧接着的是由编辑精选的旅游线路。以精美的大图列表形式呈现,绝对激发访客的了解兴趣。•主题列表页:•主题列表页由精选线路的大图列表构成。亮点在于选取了凸显主题的、赏心悦目的大图,以图寓意。每个列表位由大图,线路意义、线路简介、国家地区、旅途持续时间几个元素构成。整个主题线路列表可根据线路标签和国家地区进行二次筛选,并可按照价格高低进行排序。并以ST.AUGUSTINE的名言“Theworldisabook;andthoeswhodonotreavelreadonlyonepage.结尾。进一步增强主题的意义。•底层落脚页——推荐线路页面:•每个线路页面的首屏有线路大标题名称,精美组图,旅行所在地,旅行持续时间与价格构成。•附着的要素还有线路介绍、行程安排、服务费用内容、编辑寄语,及其他辅助性帮助信息,比如线路最佳季节,线路报名提前时间等;•交互体验:•1)大的留白空间,让阅读变得很舒服;•2)精彩的文案设计。每一句文案都描绘了一段诱人的旅程。•3)简洁。使注意力集中在精美的写实图片上。