编者按:这篇文章来自 UI 规划师 Victor Adeyemo,他将自己走过许多弯路之后总结出来的图片运用技巧梳理成为一篇干货满满的文章,这些技巧可以应用到UI和平面排版傍边,往下看看吧:
假如你仔细查看现在高质量的 UI 规划,会发现那些优异的规划背后有许多共通的技能和方法,你可以将它们无缝地运用到自己的 UI 和视觉规划傍边,这些方法和技巧可以让你看起来满足专业。
这篇文章傍边的许多内容来历于我早期规划阶段的挫折和失利。和咱们相同,当我看着这些优异的作品的时分,会像面对着万花筒相同,看到精彩绚丽的效果,可是真等我自己做的时分,才会发现万花筒的外壳拿走之后,剩下的仅仅一块简略的碎片。这就是咱们绝大多数人所面对的问题——咱们没有从这些优异的规划傍边找到规则和共性,而不仅仅是漫无目的地赏识。
在一次次的失利和尝试傍边,我开始记录和梳理这些成功的规划的长处,开始将经验反馈到自己的规划项目傍边。这篇文章我就主要来分享我这方面的经验和总结,期望这些技巧最终也能让你的规划相同优异。
在一部分UI界面中,运用贴合场景和氛围的图片作为布景,能带来更加沉浸的体会。仅仅需求注意的是,需求调整明暗,确保前后景的对比度要满足强。
Login Screen Redesign — Victor Adeyemo
Nature — Popsabey
相同是一种制作沉浸式视觉体会的规划技巧,经过抠图之类的技巧,让某些图片元素和整个布景融为一体,图片和布景的无缝联接可以给人以一种美妙的视觉体会。
Lippear Website — Victor Adeyemo
Bloom. Vladimir Biondic
让高素质的图片严密无缝地拼接、并排排版,可以制作出一种无缝切高级的视觉效果,高清的图片一般包含着丰富的视觉信息量,并排拼接起来之后,可以制作出致密的信息量,让整个版面呈现出信息的疏密节奏变化。
Discover Moscow
Denis lomov
相同是一种添加信息层级,消减单调的方法,这种方法百搭而易用,在绝大多数的风格现代的平面排版和UI界面傍边,这种小技巧都可以运用,快速提升界面的视觉效果。
Anastasia Yastrebkova
Natalia Smoczyska
图案和形状看起来很简略,单独运用的时分的确也很简单显得单调,可是当它作为装饰元素和图片组合在一起的时分,可以快速地构建出颇为不错的装饰效果和视觉张力。
ursae. majorizzz
Bloom Hair — Web design
在图片的前景或许布景叠加文本、图案和不规则图形,也相同可以快速添加信息的层级,添加的时分可以不用严格意义上在图片的领域内,可以错位,可以部分叠加,这样的布局规划更加有趣。
Lifestyle. Vladimir Biondic
Confidence. Vladimir Biondic
Emilia Brewster Website — Halo Lab
这也是最近这些年比较流行且十分运用的一种技巧,运用剪贴蒙版来将图片约束在文本或许图形的外概括傍边,这上一种添加形式感、有趣的传递信息的方法。
About Page — Joonas Virtanen
Portfolio site — Krista
操控图片之间的间距满足窄,可以让整个布局显得紧凑而赋有凝集感,图片的聚合可以让整片图片区域显得丰富又集中。
Inbox App — Ben Tortorelli
Unsplash Retro — Sebastian Jungbluth
在图片上叠加颜色,或许说将图片制作为单色调的配色,可以产生类似黑白照片一般更强的形体感,添加视觉主体的视觉效果,一起借用不同的颜色来营建一致的氛围和情绪。
Colour Me timbers -Johan Adam Horn
iLearn LMS — Neil Lawson
一起,还可以选择为部分的图片叠加颜色,这样的处理方法更加有趣,添加了信息层级。
Website Design — Brian Rodenburg
Search Art Direction — John Adam
尽管绝大多数的图片都是矩形的,可是将图片裁切为其他的图形会让整个规划显得十分新颖。
Welch & Smith — Halo lab
Bloom Website