当前位置:丝路教程网 > UI设计 > UI教程 >

图像与插画结合的UI创意设计

2018-02-05 11:23 来源: 丝路教程网 分类: UI教程
280 作者:丝路教程网

[导读] 今天我们将探讨这一趋势,并提供一些示例和小贴士,帮助你启发头脑风暴,用一些创造性的方式来融入你的设计。

  你是否厌倦了千篇一律的设计方式,你想试试一些冒险的设计方式、风格吗?你是不否想过,或许可以将图片与插图混搭结合在你的设计中?一个手绘元素可以增加设计的趣味性(比如像以前我们所推送的在拍摄的照片上添加一些搞怪的手绘元素)。当然,图像与插画的结合,看起来会更轻松、更真实一些。

  这种技术可能会有点难以操作,但是,或许你看到一些漂亮的示例后,会对你有所启发。

  今天我们将探讨这一趋势,并提供一些示例和小贴士,帮助你启发头脑风暴,用一些创造性的方式来融入你的设计。

  1、使用插图作为 UI 的一部分


  有时候,你可能会把一些元素整合融入到设计中去,但是,你是否有过认真的思考。对于UI来说,许多用户界面元素往往会以某种特定的方式呈现,他们不一定是手绘风格,但通常是一些类似于“网页”按钮的东西。

  如果你想尝试手绘效果,使你的设计更上一层楼,或许你可以考虑使用插图(草图/素描)作为你设计中的一个重要的组成部分。

  上图是WittyCookie的网站截图,它体现了一种奇思妙想的设计理念,它将插图和hero-style视频混搭组合,融入整体设计中,吸引了用户的目光。手绘元素在视频下方,类似于窗帘一样,有种可以让你拉的感觉,这样的处理,让网站看起来不那么像一个推销工作的机构,而更像是想要跟你一起玩耍,显得乐趣感、轻松感十足。

  这个概念是有趣的,当你没有一个漂亮的图片或者视频目录时,或许你可以考虑用这样的方式来融入你的设计。

  2、信息优先


  当执行一个设计项目时,如果插图是你的第一直觉反应时,先画轮廓。在添加照片或视频元素之前,先绘制图示的部分,看看设计的位置。

  上面的图片是Made by Few的网站截图。它的整个设计中,复杂的插图,尤其是插图上的人物,随着你的鼠标动作,令人印象深刻,包括设计师都可以欣赏到它的细节。在插画的下方,是一个循环的视频会议的场景。这个元素虽然小,但是却清晰的传达了,这是一个现场活动的视频,与插图完美的搭配,或许能勾起你的好奇心,你会想注册一下,看看这到底是什么。插图与视频的完美结合,烘托了会议氛围的传达。

  上面的图像是 One Happy Camper 网站的截图。这是一种有趣的组合方式,照片与背景混合搭配,信息与图像同步呈现,你甚至可以使用纯白色的背景和黑白照片组合。背景的变化有效地传达了信息内容,让用户清晰了解你的网站主题。

  3、把插图混合进排版


  当你没有那么多优质的图像时,将插图混合进排版中,也是一个巧妙的方式。尽管这个概念听起来有点奇怪,思考一下:添加一个简单的插图元素来强调一个视频或照片,它可以突出你传达你想让用户知道的信息。

  上面的 Achrival 网站使用的就是这样的,一个有趣的设计方式。A 这个元素作为该机构的标志(A 其本身的动态很漂亮,我截图截不好,有兴趣的可以进他们网站看看 www.archrival.com),短视频循环,律动的A,更能吸引人的注意。假如没有“A”这个元素,你看就的就只是不停循环的图像,你的目光根本无法聚焦。这是一种不同的设计方式,但却足以像一样大标题一样,吸引用户的注意。

  4、考虑动画


  插图,无论是手绘插画,还是计算机绘制的数字插画,它们都可以很容易的添加一些简单的动画。从导航工具到吸引用户的趣味景点,动画插图可以让你的设计增加趣味性,让你有意想不到的效果。

  对于动画,不要走极端,保持简单和目的性就好。每个动画都应该有一个目标:提供一个链接、一个定向的提示或一个惊喜,一切吸引用户的,让用户感兴趣的目标。

  你可能不希望这种设计方式应用到财务规划项目上,但是,你可以看到,我们上面的截图,Taylor Made,它上面所使用的插图动画和摄影都很漂亮。动画图像似乎使财务规划看起来不那么复杂和困难,有利于指引用户点击链接。

  网站的插图还填充了颜色,中和后的组合,让它最终得到一个富有趣味性的、吸引人的、易于操作的设计。

  5、讲述一个故事


  当涉及到混合真实和插图的图像时,最好的组合是,有效地讲述一个故事。视觉匹配内容的情绪,让人感觉它们是一体的。

  通常情况下,使用这种设计方式,更多的是为一次性的内容所采用(比如说专题之类的),但它们往往集成了一个更为完整的品牌战略。看看上面的 Cone Flower Creamery,它的网站设计使用了大部分的图解故事来讲述故事,传达情绪,这样的方式,将使用户更加的了解该品牌。当你想看到更多,用图片来填补这一空白。设计是非常简单的,专注于故事本身,而不是用于创建它的技术。

  我们的另一个示例是 Kuoz,它是一个图片和插图作品的展示网站。仔细看看分组,深入了解为什么这个设计作品不会令人感到混乱。图片和插图通过类似的配色方案联系在一起,每一个展示项目,看起来都让人感觉像是错位,却又显得和谐。

  它的有趣在于,混合图片和插图看起来,像是他们故意为之,却为显得和谐。运用这种设计方式,我们需要做的是,不应该使图片和插图,看起来像一堆卡在一个页面上的元素。

  结语

  你有足够的勇气去采取这样的设计方式,跟随这样的设计趋势吗?虽然这项技术可以看起来令人惊叹,但是很大的可能,客户并不一定能接受。

  如果,你想应用这些设计方式,提前绘制一些插图,让你可以进一步推销你的设计概念。带一些这样的设计示例,效果好的示例,向其他人展示你能做什么。记住,讲述一个故事,吸引用户!


免责声明:

丝路教程网的部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,如权利人发现存在误传其作品情形,请及时与本站联系。

图像与插画结合的UI创意设计

的相关文章
Copyright © 2008-2017 blog.silucg.com 丝路教程网 版权所有 网站地图
点击这里给我发消息
丝路教育