[趋势] 2017年流行的UI设计你该这么玩! 已回复

会员ID:老贝壳设计 男 45岁 时间:2016-12-18 03:05:23

有沉浸感的全屏式设计

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

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

技术的发展给这种拟真化的表达提供了更多的选择。与静态的图像不同,视频有着更为强烈的“叙事性”。在 2017 年,也许全屏式的互动视频设计会更吸引你的眼球。

 

二、长滚动式设计

在过去几年,滚动式的阅读体验在小屏幕设备上的发展尤为突出。想想你手机上的 app,一定有很多采取的是这种滚动式设计。

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

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

在 2017 年,这种长条状的滚动式网页设计也许将成为主流。

 

三、渐变色的运用

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

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

Spotify 的网站是一个好例子。它的主页面把粉色和蓝色糅合,产生了双色渐变,看起来十分绚丽。再往下拉,就变成了橙色的渐变色,显得十分有夏天的感觉。

虽然此前设计界对于 Instagram 的扁平化渐变色 logo 的设计褒贬不一,不过,它也意味着一种设计的趋势:渐变色能让设计看起来更活泼有趣。

 

四、插画的运用

插画可以让设计具有“性格”,它是一种直观的与用户进行情感交流的视觉语言。没有什么能比用插画来塑造品牌形象、传递品牌性格还要简单有效的方式了。作为一种有趣的情感表达,插画可以是量身定制的,因而它能帮助获得用户信任,让人感觉更为亲切。

Dropbox 和 payplan 都是不错的例子,它们的首页以简笔画的形式很直观地表达了产品的几大功能,能够帮助用户快速理解。

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

 

五、打破网格设计

一个用户很熟悉的网格,也代表着一个不会出错的选择,起码用户在看到这个设计的时候,可以不用指导地、下意识地去使用网站或者应用程序。

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

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

六、视差效果

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

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

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

 

七、卡片式设计更加流行

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

卡片本身也拥有很强的灵活性。想要给这些普通的卡片设计多点花样的话,设计师还可以通过翻转、旋转、叠加和过滤等方式,来让它们发生变化。

 

八、微交互设计

微交互,指的是小屏幕上的动画形式。

这种微交互通过屏幕上的动画转化,以一种更为明确的视觉反馈,告诉他们,让他们知道他们的点击行为引起了什么,以及下一步会发生什么。

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

 

九、字体设计

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

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

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

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

 

十、实验性的导航设计

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

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

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

Adult Swim 的网页导航就做得不错。它用了一种好玩的动态形式来进行用户引导,还挺有意思的,也符合 Adult Swim 本身作为动画频道的属性。

导航设计本来就该有多种形式,是时候出现更多有趣好玩的导航设计,来抛弃掉汉堡包菜单了。

视 觉 | 极 简 | 享 乐

官网:www.laobeike.com

微博:weibo.com/laobeike

手机:170 975 33370 QQ:908 975 633

淘宝店:laobeike.taobao.com

或淘宝搜索 “老贝壳设计”

评论 ( 684 条评论)
科普问题免费提问
无需注册,10分钟内回答