18842388900

网站建设 APP开发 小程序

Article/文章

记录成长点滴 分享您我感悟

您当前位置>首页 > 知识 > 网站建设

沈阳网站设计平坦思考,网站设计展平

发表时间:2019-07-09 14:42:51

文章来源: 保存时您可以修改任意标签的值

标签:网站建设 沈阳网站建设 沈阳网络公司 沈阳网站设计 沈阳网站制作

分享:

浏览次数:0

经过一年的扁平化,学生们能清楚地理解吗?今天我分享一篇关于将流行原因扁平化对界面设计的影响的文章,以及一些值得阅读的设计技巧和注意事项。

在过去几年中,我们目睹了从软件和应用程序界面设计从3D和准实现到扁平化和极简化的快速过渡。虽然这种趋势现在无处不在,但我们可能希望花点时间思考今天的结果如何形成以及它如何影响整体界面设计。另外,我将分享有关设计平面界面的一些提示和注意事项。

5490e0673dfae94c55000001.JPEG

Windows Phone 8和Apple iOS 7界面。

  什么情况?

你怎么突然从大爱情材料,斜面和投射阴影变成平面颜色和简单的字体?这种变化受到许多因素的推动。以下是一些更重要的内容。

  信息负荷过度

在今天无穷无尽的信息文化中,我们不断地接触各种信息,一些重要信息,一些不相关信息。对我们来说,不断评估,过滤和创建各种内容显然非常麻烦。此外,我们摄取的许多内容已经转移到小屏幕设备上,这进一步加剧了这种过载的感觉。因此,人们很容易被过多的信息所困扰,减少用户界面(UI)中的元素可以带来一点视觉上的平静。

5490e0693dfae95373000001.JPEG

不再存在障碍:Geckoboard的可视化工具使您可以轻松地一目了然地解读关键数据。

  简约是金

与上述趋势类似,许多颠覆性Web应用程序和服务提供了功能强大的工具。虽然传统的软件开发商家更倾向于为产品添加许多功能作为高价的借口,但集中式微应用的趋势更倾向于使用简单的替代方案来实现各种功能组合。应用程序越简单,界面越简单。

5490e06a3dfae95a35000001.JPEG

极简主义:Oak's Blue天气应用程序。

  内容为王

每当新设备和技术进入市场时,它们的功能和推动开发的交互水平将始终让我们着迷。在界面引起混乱之后,我们一般会把注意力集中在内容上。无论是文本,音频还是视频,媒体内容的摄取可能是我们使用设备时的主要活动,在这种情况下,我们需要确保界面不会影响我们的摄入过程。

  技术精通

随着智能手机和平板电脑迅速传播到各种用户,该行业对其控制风格的明显担忧正在消退。虽然我们曾经担心用户会很难看到不显眼的按钮,但我们现在更愿意探索更微妙的互动内容。 Windows 8和Chrome for Android甚至支持使用触摸命令点亮屏幕,而无需视觉提示。

5490e06b3dfae960de000001.JPEG

Fitbit的控制面板界面视觉上明亮,大胆且易于使用。

  技术的影响

大多数软件将受到您运行的平台的限制。屏幕尺寸和像素密度是硬件限制。较小的界面极大地限制了设计调色板的范围,这意味着界面上的每个元素都有自己的表现力。文本大小和字体大小将在很大程度上决定平面设计的美观性和可用性。

如果您的目标设备无法与此级别显示任何细微差别,那么您很幸运。随着移动设备屏幕尺寸和像素密度的不断增加,更薄更小的设备将来会实现更高的分辨率。当然,对@ font-face的支持极大地增强了极简化文本核心设计的吸引力。

5490e06c3dfae9682d000001.JPEG

使用Wallmob进行实时销售监控:使用浏览器设备记录所有销售数据。

  响应式设计

随着各种尺寸的网络设备的普及,UI已经趋势趋势并且变得更加流畅,并且相应地,它是响应式设计趋势。虽然响应式设计不需要特殊的美学,但可以说平面UI比其他风格更容易协助响应式设计的美学。简化设计的另一个优点是能够减轻页面重量并减少加载时间。

5490e06d3dfae96f33000001.JPEG

简单但有点到位:OnSite

理想实践

好的,理论说这个。我们来看看实际考虑因素。创建有效和简化的设计非常困难。在对一些常规UI元素(投射阴影,斜面,材质等)进行分层时,您会看到这些元素的重要性。以下提示虽然很常见,但对于展平UI特别有用。

  开始之前

任何项目都是一样的,第一步是确保您选择的样式合理。在开始平面设计之前,请确保您的设计符合目标用户的感知和目标平台,设备和应用程序类型。如果它不适合您的项目,跟上趋势是没有意义的。

过程

无论您想使用哪种样式,遵循该过程都非常重要。这里有一些技巧可以帮助您实现极简主义效果。

1.在设计简化的界面时,我通常会从PC出现之前的那个时代寻找灵感。当时的设计师和艺术家经常需要做“多快和省钱”。借此机会重温过去的许多最佳设计,如JosefMüller-Brockmann和Wim Crouwel。此外,我还将介绍极简主义画家,如Ellsworth Kelly,Mies van der Rohe等建筑师以及Dieter Rams等工业设计师。

暂时离开工作也很有帮助。扁平化和简化设计的核心在于细微差别。因此,在短暂休息之后重新开始工作有时比仅仅想出来更有效。

3.比较不同的版本也很有用。在输入线上来回转动接下来的5个像素20分钟后,我将保留接下来的两个不同版本进行比较,以便我可以立即看到它。

4.由于对象的相对大小非常关键,因此您需要尽早开始在不同类型的设备上设计设计概念,以确定它是否合适。

5.工作时,经常会问自己:“我真的需要这个吗?”人们总是很容易回忆起他们喜欢什么,但我们也必须经常找出要削减或简化的内容。抛弃你用心做过的事情并不容易,但编辑也是必须的。

5490e06e3dfae975dc000001.JPEG

Global Closet:由国家地理教育研讨会创建的互动游戏。

  网格

网格在界面设计中起着非常重要的作用,也不例外。当您持有一组受限制的视觉元素并尝试确定其顺序并使其更直观时,网格可以提供很大的帮助。

网格确定的不仅仅是视觉顺序。您还可以使用它来定义内容和功能组。有时对一组对象进行分组不一定需要行或框。对它和空间的简单调整通常可以帮助用户理解界面的结构。

您还可以尝试使用具有一定重要性的元素来打破网格,以吸引用户的注意力。

尝试使用密度更高的网格。当您大大简化视觉调色板时,您可能会发现您的设计可以支持更复杂的结构,而不会显得凌乱。您还可以尝试仅通过位置调整传达哪些附加消息。

5490e06f3dfae97cc7000001.JPEG

由app School Rossul Design开发的iPad应用程序。

  色彩

毫无疑问,色彩是视觉设计的关键组成部分。对于简化的接口,意义更为重要。

考虑更广泛的调色板。就个人而言,我认为较窄的调色板通常会创建一个功能更强大的界面。创造炫目的色彩很容易。但是通过这种方法,您可以大大扩展选择范围;并且,考虑到要设计的少量元素,扩展调色板可以给你一种良好的感觉。

设置调色板时,您可以在各种颜色值上测试所选的色调,并确保它们在明亮和深色中都能正常显示。

建议分别测试同一系统的色彩匹配和鲜明对比度。早期的调色板实验将确保您能够掌握细微和强烈对比元素所需的所有色彩匹配范围。

5490e0713dfae983fa000001.JPEG

TriplAgent的视觉设计采用了令人惊叹的配色方案。

  文字

在平面内容驱动器网站上,文本是主角。

serif无疑是一种解决方案,但serif字体可以让人感觉更简洁。

您可以找到具有大量厚度和样式的字体类型。虽然不一定包括所有内容,但更广泛的选择范围有助于更清晰地定义层次结构。您可能还会发现在特定环境中某种厚度更好。

不要害怕使用大小和粗细的字体大小来构建视觉顺序。尝试使用超大,超精细的标题字体和中等大小的机身。

请注意,该字体易于阅读和阅读。虽然这听起来有点不合理,但您对所选字体的依赖性非常强,因此请确保它可以轻松识别任何尺寸。

5490e0723dfae98b03000001.JPEG

Siteleaf上新鲜,易读的文字。

  交互

在平面UI中,显示哪些元素可以交互是学到的东西。以下是我使用的一些方法。

对比度如果布局内容主要是白色,则可以向交互式元素添加其他颜色。如果您的设计是基于文本的,则可以使用简单的图标来表示交互。如果标题很大并且都是小写字母,则链接部分可以更小并使用大写字母。你懂。

传统的位置放置方法也可以工作。例如,您的后箭头由一个薄的V形表示,可以放在左上角,因为用户通常会到这个位置找到后退按钮。

随着页面上叠加内容的增加,我们无法使所有交互元素看起来像按钮。界面应尽可能直观。但是,如果交互过程复杂或非法,则应提供方便的错误恢复方法。

下拉菜单,模拟窗口,弹出窗口和其他分层元件对于平面设计来说是麻烦的。您可以通过鲜明的对比,边框或阴影区分不同级别的交互。

5490e0733dfae9917b000001.JPEG

所呈现的设计元素布局简单,对比度极佳:Taasky。

  结尾

在设计领域没有恒定的规范。令人兴奋的是看到那些热衷于投资非常简化的用户界面的设计师。但探索平面设计是否意味着从不使用渐变和阴影?当然不是。事实上,我最近看到的一些有趣的作品以巧妙的方式展示了内容,另一方面,交互是直观且易于理解的,从而实现了平坦和直接的平衡。

在这个连通性,信息丰富性和功能丰富的数字时代,简单设计的复兴令人震惊。这自然不是一个包罗万象的解决方案(没有风格可以做任何事情),但经过深思熟虑和适当的应用,它可以用于舒适的数字体验。

网站建设,沈阳网站建设,沈阳网络公司,沈阳网站设计,沈阳网站制作

相关案例查看更多