这十个UI设计技法可以瞬间提升用户体验

本文翻自UI 设计师 Victor Adeyemo译文,他将自己走过无数弯路之后总结出来的图片使用技巧梳理成为一篇干货满满的文章,这些技巧可以应用到UI和平面排版当中,往下看看吧:

如果你仔细查看如今高质量的 UI 设计,会发现那些优秀的设计背后有很多共通的技术和方法,你可以将它们无缝地运用到自己的 UI 和视觉设计当中,这些方法和技巧能够让你看起来足够专业。

这篇文章当中的很多内容来源于我早期设计阶段的挫折和失败。和大家一样,当我看着这些优秀的作品的时候,会像面对着万花筒一样,看到精彩绚丽的效果,可是真等我自己做的时候,才会发现万花筒的外壳拿走之后,剩下的只是一块简单的碎片。这就是我们绝大多数人所面临的问题——我们没有从这些优秀的设计当中找到规则和共性,而不仅仅是漫无目的地欣赏。

在一次次的失败和尝试当中,我开始记录和梳理这些成功的设计的优点,开始将经验反馈到自己的设计项目当中。这篇文章我就主要来分享我这方面的经验和总结,希望这些技巧最后也能让你的设计同样优秀。

1.用图片作为背景来化解单调

在一部分UI界面中,使用贴合场景和氛围的图片作为背景,能带来更加沉浸的体验。只是需要注意的是,需要调整明暗,确保前后景的对比度要足够强。

Login Screen Redesign — Victor Adeyemo
Nature — Popsabey

2.将图片融入背景来使用

同样是一种制造沉浸式视觉体验的设计技巧,通过抠图之类的技巧,让某些图片元素和整个背景融为一体,图片和背景的无缝衔接能够给人以一种奇妙的视觉体验。

Lippear Website — Victor Adeyemo
Bloom. Vladimir Biondic

3.高素质图片紧密拼接使用

让高素质的图片紧密无缝地拼接、并排排版,能够制造出一种无缝切高级的视觉效果,高清的图片通常包含着丰富的视觉信息量,并排拼接起来之后,能够制造出致密的信息量,让整个版面呈现出信息的疏密节奏变化。

Discover Moscow
Denis lomov

4.为图片添加色块投影

同样是一种增加信息层级,消减单调的方法,这种方式百搭而易用,在绝大多数的风格现代的平面排版和UI界面当中,这种小技巧都可以使用,快速提升界面的视觉效果。

Anastasia Yastrebkova
Natalia Smoczyńska

5.在图片的前景/背景添加图案和形状

图案和形状看起来很简单,单独使用的时候确实也很容易显得单调,但是当它作为装饰元素和图片组合在一起的时候,能够快速地构建出颇为不错的装饰效果和视觉张力。

ursae. majorizzz
Bloom Hair — Web design

6.在图片的前后增加文本、图案和不规则图形

在图片的前景或者背景叠加文本、图案和不规则图形,也同样可以快速增加信息的层级,添加的时候可以不用严格意义上在图片的范畴内,可以错位,可以部分叠加,这样的布局设计更加有趣。

Lifestyle. Vladimir Biondic
Confidence. Vladimir Biondic
Emilia Brewster Website — Halo Lab

7.使用文本或者图形做剪贴蒙板

这也是最近这些年比较流行且非常使用的一种技巧,使用剪贴蒙版来将图片约束在文本或者图形的外轮廓当中,这上一种增加形式感、有趣的传递信息的方式。

About Page — Joonas Virtanen
Portfolio site — Krista

8.让图片的间距足够窄

控制图片之间的间距足够窄,能够让整个布局显得紧凑而富有凝聚感,图片的聚合能够让整片图片区域显得丰富又集中。

Inbox App — Ben Tortorelli
Unsplash Retro — Sebastian Jungbluth

9.在图片上叠加色彩

在图片上叠加色彩,或者说将图片制作为单色调的配色,能够产生类似黑白照片一般更强的形体感,增加视觉主体的视觉效果,同时借用不同的色彩来营造统一的氛围和情绪。
Colour Me timbers -Johan Adam Horn
iLearn LMS — Neil Lawson
同时,还可以选择为部分的图片叠加色彩,这样的处理方法更加有趣,增加了信息层级。
Website Design — Brian Rodenburg
Search Art Direction — John Adam

10.将图片裁切为其他的形状

虽然绝大多数的图片都是矩形的,但是将图片裁切为其他的图形会让整个设计显得非常新颖。

Welch & Smith — Halo lab
Bloom Website

好了,本期分享结束了,建议可以收藏并转发哦,以备需要之日调用,喜欢厂长可将本号设为星标,这样就不会错过更多知识啦。

(0)

相关推荐

  • 创建 PowerPoint 演示文稿的基本任务

    PowerPoint 演示文稿的效果类似于幻灯片. 要想传达一份信息或一个故事,可将其分解成多张幻灯片. 可将每张幻灯片看作是一张放置图片和文字的空白画布,这将有助于你讲述自己的故事. 较新版本 Of ...

  • 嫌弃PPT背景太单调,这个思路助你获得1000种解决方案

    职领office达人学院第794个原创技巧 每当我们制作PPT的时候,总会觉得背景比较难处理,在单调和繁复之间徘徊,不知抉择.   如何保障背景兼具简洁和层次感,提升演示的丰富性呢?   这里为小伙伴 ...

  • 这1㎡的细节设计好,瞬间提升幸福感!

    说到装修,很多朋友会重点关注整体风格.花费等等大格局上的平衡,往往会忽视一些细节设计,但这些小细节正是提升幸福感的闪光点. 想要提升空间质感和生活情调,不妨从这1㎡的空间抓起! 01.家里也有「咖啡厅 ...

  • 电视背景墙设计Tips:瞬间提升客厅档次的30个电视背景墙案例!

    注:本文转自筑客HOME 虽然如今有些年轻人装修时抛弃了电视,但是对于大部分中国家庭而言,电视真是一种情怀与陪伴. 一个出色的背景墙设计可以为空间的整体效果加分,是家居装饰的重点,那么如何设计显档次呢 ...

  • 提升用户体验的PowerBI个性化视觉对象

    个性化视觉对象早在今年5月份就已经推出,最近几个月一直在不断改进,直到上周10月份的更新发布后,该功能已经普遍可用,不再是预览功能了. 该功能允许最终用户可以对图表进行个性化的调整,用户可以在阅读视图 ...

  • 30秒开机广告!消保委寻求沟通,对方回应:提升用户体验,不能关

    说到电视开机广告这个事,很多人都是深恶痛绝,尤其是部分互联网消费者几乎提起开机广告都是一副"义愤填膺"的样子,其中绝大部分人认为这一问题存在于诸多互联网品牌电视,甚至互联网品牌是始 ...

  • 手机网站怎么提升用户体验?

    手机网站一直是很多进行推广主做的一个推广渠道,因为移动端比起pc端的流量更大,用户群群体更多.所以提升手机端的用户体验就是提升移动端转化率的一个重要方法.所以今天牛商网就和你解答一下:手机网站怎么提升 ...

  • 助力保险公司提升用户体验,人工智能还能做更多

    保观 | 聚焦保险创新 如何提供不让客户失望的服务体验,是服务业永恒不变的讨论话题. 以客户服务体系中非常重要的一环,客服电话为例.对于保险公司来说,一次合格的电话服务过程,应该包括尽可能少的让客户重 ...

  • 如何提升用户体验感已成企业发展的重点

    过去,品牌在整个营销传播中,你的消费者几乎只能通过电视广告.报纸广告等传统广告媒体来了解你的品牌,很难了解真正的口碑产品,只能单方面接受品牌信息的洗礼,缺乏互动式的广告营销.而在我们今天这个移动互联网 ...

  • realmeGTNeo2:强悍的信号接收能力,提升用户体验

    对于一款手机来说,有了优秀的基带,还必须匹配出色的天线设计.因手机接收信号的能力,基带和天线设计是核心要素.iPhone4则是这方面的反面教材是,iPhone4将天线设计在了机身边框的下半部分,导致握 ...

  • 让输入高颜值、有温度,百度输入法以“万金皮肤”提升用户体验

    在人类电子科技的发展之中,有非常有趣的一种现象,在几乎所有电子产品刚刚诞生之时,用户一般都追求简约之美,而当硬件设备逐渐成熟时,用户又会追求"花里胡哨".现在多种多样的手机保护壳. ...