27个国外设计机构的扁平化风格网站.doc

什么是扁平化设计？ 浏览：1709 | 更新：2013-06-13 01:22百度经验:抛弃流行多年的拟真效果在实际当中,扁平化设计一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更“平”的界面。扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。保证在所有的屏幕尺寸上它会很好看随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的 skeuomorphic 设计既繁琐又费时。设计正朝着更加扁平化的设计,你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约,条理清晰,最重要的一点是,更好的适应性。它是大胆的尝试与实现与扁平化设计相比,在目前也可以说之前最为流行的是 skeuomorphic 设计,最为典型的就是苹果 iOS 系统中拟物化的设计,让我们感觉到虚拟物与实物的接近程度。在扁平化设计中目前最有力的典范是 Win8 Metro 界面,不得不说 Microsoft 不愧为 PC 用户体验开拓者,如此大胆的尝试与实现,不得不让人佩服。不管是属于什么设计,设计的美在于是否适合,我不敢说扁平化设计就比谁好,这种非黑即白的理论并不适合。但我敢说扁平化设计在网站建设、网页设计中有非常大的优势,简直说可以弥补长年的兼容诟病,我喜欢扁平化设计27个国外设计机构的扁平化风格网站作者：佚名来源：设计之家时间：2014-11-29 标签： 扁平化网站FrankdigitalJustin AguilarPlayground IncInteractive design studioVtcreativeIvo MynttinenPANDRKnock Knock FactoryMudSquideeRoy BarberLowdiBelancioLorenzo VerziniShapeLayerVaultSimone MarcarinoBuffaloSupereight Studiooak.isProphetsWilliam LeeksWerkPressMark SimonsonEtchHappy StudioBob GalmariniPhotoshop如何设计扁平化风格的微信图标 | 浏览：708 | 更新：2014-01-12 14:40 | 标签：photoshop 123456分步阅读百度经验:本文将教你用Photoshop如何设计扁平化风格的微信图标。效果如下图所示：步骤阅读百度经验:工具/原料Photoshop软件百度经验:方法/步骤1.12.首先新建一个图层画一个椭圆形，再新建一个图层画两个小圆圈。按住Ctrl键，鼠标点击眼镜所在的图层，得到两个眼镜的选区。再选择第一个图层，按Delete按钮，将眼镜的选区删除，得到眼镜。然后我们删除眼睛的图层，按Ctrl+D取消选区3.步骤阅读4.5.26.然后我们用【多边形套索】工具，画一个小尾巴，完成之后我们填充上白色，这样就得到一个小尾巴了，然后我们将这个小尾巴的图层和之前的图层合并。7.步骤阅读8.9.310.然后按Ctrl+J复制之前的形状，得到另外一个小蝌蚪，然后点菜单-编辑-变换-水平翻转，通过移动到合适的位置，得到下图：11.步骤阅读12.13.414.选择新蝌蚪的选区，删除掉原来的图层的这个选区，得到下图：15.步骤阅读16.17.518.再用橡皮擦工具把多余的部分删除掉，就得到微信的图标啦。19.20.网页设计：扁平化设计需要遵从的一些原则 浏览：255 | 更新：2013-09-23 14:51百度经验:在网页设计中，扁平化风格的逐渐盛行固然有它的道理，但本质上它只是设计美学当中的一种；与仿古、高光、金属质感、木质等视觉效果相同，对视觉风格的选择必须以良好的信息架构及交互模式为基础。尤其在移动设备上，过于复杂的效果非但很少能为应用吸引用户，反而时常让用户在视觉上产生疲劳，对产品界面中最基本的功能产生认知上的障碍。因此我们在网页设计中就需要参考“扁平化”的美学。.什么是扁平化设计.在实际当中，“扁平化设计”一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更“平”的界面。.网页设计的好坏不是“美学”可以决定的.对网页设计风格的选取最终还是要取决于具体产品的实际情况。在我个人看来，相比于拟物化而言，扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。.无论采用怎样的风格，优秀的界面设计都需要遵从一些共通的设计原则：.一致性.通过具有一致性的设计模式及视觉风格，为用户建立起完整一致的心智模型，使产品更加易用，提升整体体验。.对比.通过对配色、尺寸和布局的调整，使可点击的界面元素在视觉上与其他元素形成鲜明的对比。.布局.可以尝试使用960gs一类的网格布局为界面设定视觉规范，使用户的视线可以跟随内容本身所界定出的路径自然的移动，增强界面的视觉平衡。.层级化.最重要的东西要比相对次要的东西更容易被看到。关于这个话题我可以写一整篇文章出来，简单的说，就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素，而将其他操作元素置于次要位置，这可以使界面得到最有针对性的优化和简化。.“我个人的经验是，无论扁平化还是拟物化都没什么所谓，最重要的是界面能够让用户在最短的时间内清楚的识别出信息和功能的层级关系，并且很容易的知道接下来应该做什么。” Caroline Keem.目标用户.不同类型的用户所青睐的网页设计的界面风格也有所不同。建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格，而其他更加“普通”的用户则更容易接受相对传统的拟物化界面。.反馈.当点击行为发生时，要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式，例如在用户执行操作后，使用旋转图标提示用户系统正在进行响应。.降低“摩擦力”.无论采用怎样的网页设计视觉风格，都要使界面尽量简化，减少用户完成目标所需执行的操作，打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本，增加功能的复杂度，进而降低转化率。.鼓励探索.了解目标用户有可能对产品进行哪些方面的探索。一旦他们习惯了产品的界面与基础功能，并开始向“高级用户”的阶