乐虎国际 > 海文新闻乐虎国际 > 2017 年的UI 设计的10大趋势

2017 年的UI 设计的10大趋势

2017年10月27日11:12:12来源:海文国际         840
分享到:

UI 设计越来越重要,它在直观塑造企业形象的同时,1样成为留住用户的关键。与此同时,UI 的设计风格每1年都在产生变化。就像是扁平化、手势、微交互、卡片式成为过去两年中的关键词1样。总有1些好的设计总是想方想法吸引你,它们大批出现,构成某种趋势。

在这些趋势里面,有的会延续性地流行好几年,也有1些,会被淘汰。几近每年年底,都会有1些网站,根据过去1年中 UI 设计风格的更迭,来预测下1年的趋势。

今天ui设计培训老师罗列了10个 2017 年的 UI 设计趋势的例子,希望对你有所帮助。

1、有沉醉感的全屏式设计

Immersive 沉醉感,说的是1种让你犹如身临其境的摹拟真实的效果。就像最初的美术来自于对现实的摹拟1样,这类拟真的设计,至今依然受用。

因此我们能看到像这样的网页设计,它以全屏式的大幅图象和视频为主,以1种简单却有效的方式,迅速把你带入它所设定的情境当中。

Campos Coffee

这是1个不错的网页设计的例子,来自 Campos Coffee,动态的全屏设计简单却包括丰富的信息。

2017 年10个 UI 设计趋势,没甚么突破但更加流行

Dutch airline KLM's magazine iFly50

技术的发展给这类拟真化的表达提供了更多的选择。与静态的图象不同,视频有着更加强烈的“叙事性”。虽然图象在久长以来始终占据 UI 和网页设计的主流,不过,在 2017 年,或许全屏式的互动视频设计会更吸引你的眼球。

2、长转动式设计

“转动”,其实不算是1个新的设计趋势。

在过去的几年内,转动式的浏览体验在小屏幕设备上的发展特别突出。想想你手机上的 app,1定有很多采取的是这类转动式设计。

National Geographic

正如你所看到的这个国家地理的官方网站1样,这类转动设计的好处非常直白:它提供给用户1个更加流畅的浏览体验,以1个线性的方式,引导用户在短时间内不受打扰地浏览到更多的内容。

2017 年10个 UI 设计趋势,没甚么突破但更加流行

Riding the new silk road by New York Times

现在,“转动”从小屏幕越来越多地转向大屏幕设计。也有很多的设计师在研究大屏幕上的“转动”机制如何处理,才能带来更加出色的使用感受。

在 2017 年,这类长条状的转动式网页设计或许将成为主流。

3、渐变色的运用

2013 年开始盛行的扁平化设计中,强调简洁的功能界面辨别,抛弃过剩的元素。至今,这类设计风格依然有着鉴戒的价值。

不过,随着扁平化的流行,它的弊端也开始显现出来:1时之间几近是所有的平面设计都在强调扁平化,这使得它们趋于雷同,看上去毫无个性。

想要在扁平化设计中,加点不1样的元素让它更加生动,渐变色不失为1个好的选择。

Spotify

Spotify 的网站,就是1个极好的例子。它的主页面把 2016 年最流行的粉色和蓝色糅合,产生了双色渐变,看起来10分绚丽。

再往下拉,就变成了橙色的渐变色,显得10分有夏天的感觉。

Spotify

虽然此前设计界对 Instagram 的扁平化渐变色 logo 的设计褒贬不1,不过,它也意味着1种设计的趋势:渐变色能让设计看起来更活泼有趣,毫无疑问,它是 2017 年的10大设计趋势之1。

4、插画的运用

插画可让设计具有“性情”,比起传统的摄影,它是1种直观的与用户进行情感交换的视觉语言。

对品牌来讲,没有甚么能比用插画来塑造品牌形象、传递品牌性情还要简单有效的方式了。作为1种有趣的情感表达,插画可以是量身定制的,因此它能帮助取得用户的信任,让人感觉更加亲切。

Dropbox

Dropbox 和 payplan 都是不错的例子,它们的乐虎国际以简笔划的情势很直观地表达了产品的几大功能,能够帮助用户快速理解。

2017 年10个 UI 设计趋势,没甚么突破但更加流行

payplan

另外,插画的实现途径其实不唯1。它提供多种创意方向的选择,不同的插画也能够传递不同的情绪。比如简笔风的手绘看上去单纯可爱,精细繁复的笔触可以产生1种“高级”质感,当插画与摄影结合,则给人1种虚实难辨的奇特感。

5、打破网格设计

对大多数设计师而言,网格1直以来都是设计的基础,它能够保证1致性、平衡性和某种节奏。

另外,1个用户很熟习的网格,也代表着1个不会出错的选择,最少用户在看到这个设计的时候,可以不用指导地、下意识地去使用网站或利用程序。

但是,网格也意味着限制。在1个有限的网格内,富有才华的设计师,很难去完全地表现他的天马行空。因此,有些设计师正在尝试突破传统的数字体验,打破网格。

2017 年10个 UI 设计趋势,没甚么突破但更加流行

Red Collar Digital

Red Collar Digital 的页面以云为背景,前景是转动式的图文内容,没有网格的限制,显得清新且自由。

2017 年10个 UI 设计趋势,没甚么突破但更加流行

SERGEY MAKHNO Architects

无疑,这类无网格的创造性设计可以充分发挥设计师的奇思妙想,让网页看起来更加灵活自由。不过,这类设计弄不好也会导致1种缺少秩序的混乱感。值得注意的是,不论是怎样颠覆性的无网格设计,用户的体验永久是第1位的,它的所有接口,都应当是用户友好型的。

6、视差效果

Parallax 视差,说它是长转动设计和打破网格的结合或许更加贴切。

概括说来,视差指的是页面的背景,以1个比前景慢的速度移动,从而产生1种视觉上的纵深感。它不是1个新的设计概念,只不过,现在有越来越多的品牌在使用这类设计理念。

Bang&Olufsen

Epicurrence 3

视差可以结合图片、文本,以1个不太严格的页面布局,带来1种流畅直观的浏览体验。视差效果的好处不言而喻,它提供了1个充满活力的界面,并且让用户印象深入。

7、卡片式设计更加流行

1直以来,这类卡片式设计都在移动用户界面设计中占有重要的位置。

卡片式设计是1个通用的用户界面模式,小到移动真个信息浏览,大到重要的会议演讲。它最大的好处大概就是,能在同1个时间内,尽可能地、分门别类地展现大量的信息。它能够让用户进行更加快速的浏览并做出选择。

图片来源:dribbble

图片来源:dribbble

以卡片为单位,可以构成1套完全的解决方案,处理文本、图象、视频之间的关系。另外,卡片本身也具有很强的灵活性。想要给这些普通的卡片设计多点花样的话,设计师还可以通过翻转、旋转、叠加和过滤等方式,来让它们产生变化。

8、微交互设计

微交互,指的是小屏幕上的动画情势。

从用户体验的角度来看,这类微交互通过屏幕上的动画转化,以1种更加明确的视觉反馈,告知他们,让他们知道他们的点击行动引发了甚么,和下1步会产生甚么。

1个最简单的例子是很多网站或 App 在打开栏目时会利用的设计

图片来源:dribbble

聪明的设计师能够把微交互设计的文娱性放大,让用户取得更多的乐趣。从好玩的加载动画,到流畅的图标转换,1个好的微交互设计,可以同时担当文娱和通知这两种功能。

9、字体设计

字体设计被视作是平面设计中最基本的单元,它传递文本信息,功能非常基础。不过,想让1个平淡无奇的设计出彩的话,为它设计1组创造性的字体,不失为1种简单明了的方式。

MailChimp Holiday Tips

字体设计的重要性无庸置疑,你可以看到很多的品牌都在尝试用更大的、更粗的,和有着时兴衬线的字体来吸援用户。

Citroen Origins

Citroen 的这个页面设计还蛮有趣的,点开就是1个 1919 Citroen 的大 logo,然后会接着出现各个年份的不同车型的 Citroen,来强调品牌的历史。

UI 设计也开始从传统的图形编辑、文字排版中寻觅灵感的时候,随之出现越来越多提供网络字体服务的公司开始出现,比如谷歌字体和 Typekit,它们提供免费的,或有本钱的字体系统。

10、实验性的导航设计

页面导航和菜单的设计1直是1个很有争议的话题。

当移动端和网页的设计界限越来越模糊的时候,汉堡包菜单 Left Nav Flyouts,即侧边栏菜单。最初它作为谷歌设计的1个重要元素,后来被纷纭效仿而成为导航设计的主流。

汉堡包菜单最明显的1个优势就是节省了屏幕空间,让导航“藏”在侧滑抽屉里,释放了更多的空间给主要内容。

不过,并非是所有的设计师都赞同这类汉堡包菜单的情势,它本身也面临着被设计人员滥用、低效等质疑。

Adult Swim

美国深夜档动画频道 Adult Swim 的网页导航就做得不错。它用了1种好玩的动态情势来进行用户引导,还挺故意思的,也符合 Adult Swim 本身作为动画频道的属性。

导航设计本来就该有多种情势,是时候出现更多有趣好玩的导航设计,来抛弃掉汉堡包菜单了。在 2017 年,或许会出现更多创造性的导航设计方案,帮助用户快速、轻松地找到他们需要的内容。