提升UI设计视觉效果的5个角度

我曾经写过,UI设计是一个拼盘,它需要把版式设计、字体设计、配图设计、插画设计、摄影后期等所有与视觉有关的内容都全部综合在一个拼盘里,这个拼盘呈现的形式,可以是APP界面,或者网页界面。

所以,学习UI设计,归根到底,是对拼盘里的内容进行组合装配的过程。今天我们这篇文,就是试着回答经常收到的网友私信关于UI设计学习的问题:我应该怎样提高UI设计呢?

我一方面从技法上给大家一点学习建议,一方面主要从大环境,更高的维度来阐述这个看似只是职业技巧的问题。也许它不是职业技巧,而更甚是一个哲学问题。

搞清楚这一点,对你的职业生涯尤其重要,你能获得学习提升的方向,也能帮助你判断你的工作价值感在哪里。

你的UI界面出稿,最初的观者受众,是你的甲方爸爸。也可能是你的上级BOSS。他们的审美,其实就是你的UI界面审美的第一道关卡。

潜在提升对方的审美值

能潜移默化提升甲方的审美,这点非常关键。而能影响对方的前提,是你要用你的专业去征服对方。而不是和对方硬杠。

很多时候,我们以为boss并不关心我们的行为,其实,他只是表现出不在意的样子,目的是为了让你放松,表现出最真实的你。而他也在这一过程中默默观察你。

所以,如果你能给他以”专业“的印象,那么这个印象就会提高你在工作过程中的话事权。

人与人之间的关系,其实就是一个潜在的能量拉锯过程。你要增加自己在职业的能量值,类似把你的职业系数开大。你首先要接受这份雇佣关系,既然是关系,就必定在寻找一种平衡。如果你弱了,他自然就要强压你,让你难受,让你996,让你改稿改到喷血……如果你强了(至少在专业上强),他认为你值得这份工资的支出,自然就会尊重你、怕你跳槽、听你的意见……

如果不是奇葩上司或甲方,这份关系的建立,就是如此简单。

所以,如果遇到一个审美偏低的金主爸爸,让自己的专业去影响对方,就能达到提升自己的作品视觉的效果。

眼睛的审美是贪婪的,没有天花板的。之所以你觉得自己做的作品不好看,其实还是因为看过其他更好看的作品。

而好看是什么?其实我觉得很少人会思考这个问题。如果说好看就是流行,就是打开dribbble、Behance里那些推荐作品,然后让他们来告诉我们好看的设计就应该是这样,那么我们的审美其实也是很被动的。

这又是一个哲学问题。但是我们还是不要活得这么复杂吧,回到技术层面。

要好看的界面?很简单。每天对着Dribbble上排名top的作品进行临摹就可以了。临摹不要想太多,就是做。做的过程,会告诉你所有的答案。

临摹会带来什么

临摹的过程会有一种“再经历一遍创作者的design过程”的感觉。首先你会从排版上发现,哇,原来这样排版更好看,文字可以用这种方式排在一起。

没有图片素材也没关系,原作素材的缺席刚好是你的学习点的开始。打开图片网站,搜索一张和原来素材类似的图片。然后再和文字组合,看看和原作有什么不同。

下图左边是网上找来的原作,右边是根据原作所做的临摹。

很多借鉴的好作品,大都是英文排版。试着换成中文排版,看看怎样把中文变得好看。如果直接用英文,的确在视觉上很省事。但是,你的金主爸爸未必会同意,你们的营销策略也大概率不会答应。

以下就是经过中文洗礼以后的APP界面设计:

所以,如果是经常做商稿,就要有心里有准备。临摹时也要有所调试。最好的临摹,就是能超越原作。

通过手的训练,提升了你的审美感受力。起码能追到最流行的视觉节奏,出稿就“下笔如有神”。这种“神”,甚至不需要你每次设计就打开参考图库,而是能直接从大脑中取货。

虽然现在网上有很多优秀作品,但是,有原创感的优秀作品,其实非常非常少。因为多少大家都在相互借鉴,能完全独创的其实非常稀缺。

你的原创力决定了你的职业生涯长短

很多人说设计师是美工,美工也许是对没有原创力的设计师的一个统称。但我其实很想为美工正名,美工未必没有原创力。美工侧重“工”,只是侧重点不一样。并无高下之分。

任何工作,只要丢失了原创力,就会容易被取代。一个人如果做街道清洁做得有创造力,他就不再是普通的清洁工,而可能是环卫专家。一个如果做农活做得有原创力,他就可能是一个田园生活方式博主。

一份工作能否给你带来价值感,也是以“原创的比例”作为基准的。原创的比例越大,你在这份工作中的能动性越强,就越能给自己带来成就感。

而你应该怎样迎来你的爆破点呢?

在没有原创力的时候,我每天都很焦虑。除了临摹,没有别的办法。所以每次能出稿,打开ps,我都很开心。因为只要练一次,就有一次的提升。这和积累积分是一样的。

这次原创的不好看?没关系,已经积下1分了。这次没有完全原创?没关系,下次多增加一点原创的配比。

用积分的心态去提升自己,就能部分消减掉无法原创的焦虑。所以,很多人说我勤奋,其实大概也就是与其刷剧看小视频,我更愿意在这里积分罢了。

不要害怕丑!

那天看综艺,听到一个人讲:“一个人只有摆脱自恋,才是真正成长了”。这句话特别能共鸣到我。

很多人之所以不能原创,只是因为害怕被人说不好看。所以,只能借鉴别人的作品作为设计的开始。这段经历是必经之路。

但是到了一定阶段,这样的开始就会带来限制。如果有天断网了,你就没办法创作。如果你的金主爸爸要你画一画APP的改版思路,你的下意识反应是“等我打开dribbble参考看看”。这已经很危险了。

虽然很多人已经习以为常,但我却感觉这不是正常的。设计师难道不应该是立刻抓起笔来就能画吗?之所以雷同的APP界面这么多,大家的习惯造就了我们的现实。

切换到boss的维度再来看原创的价值

当你拿着你的作品集准备简历的时候,如果你能原创作品,并且骄傲的打出原创二字,提出你的原创思路。你的作品集肯定是会比其他(或许看起来更高大上,但是没有原创力的作品)更有机会得到面试机会。

相同的薪资水平下,boss更青睐的是哪一种设计师呢?

如果你正在找工作,或者考虑跳槽,你永远要切换到boss的维度上,他请一个人是来做什么的?他为什么要招人?

他请的设计师如果只是按他的命令,他给的参考图片来画,他在心中给这个员工的分数最多就是一个及格分。当然,他不会随便炒掉你,但是一有机会,一定会想办法换掉你。而如果你能画出他没见过的更优秀的作品,情况肯定会完全不一样。

这里的Boss可能又会分为大公司和小公司,大小公司是相对不同的运作模式。大公司一般走得是概念风,他们花得起钱,所以更重视品牌的传递。小公司其实也分很多种类,但小公司一般都是Boss个人的人格化的体现,因此熟悉boss,摸清他的风格比较重要。

但不管怎样,原创力一定不止你的工作能力。而也是你的表达力的体现。表达,只有熟能生巧。自由的表达,能帮助这家企业输出其内在价值。这也就能更大带来企业的收益。这是金主们的最爱。

很多人对素材库的概念就是付费的图库。毕竟网上现在的付费图库已经手到擒来了。好照片,当然有。佼佼者却不多。

要用好素材,我们的UI设计就成功了一大半,可以说设计UI的过程,其实就是处理和组合素材的过程。下面我们可以把UI设计所需要的素材大致分为四类:

图标元素

但是一旦涉及到特殊的图标,网上就未必能找到合适的资源。如果直接拿别人的素材资源,一旦要用到特殊的图标时,如果找不到同类风格的图标,这时就很棘手。这就需要你能自己根据原有的风格线索来画。

配图

配图我们可以分为两类,一类是Banner类的视觉比例偏大的图片。这类图片可以是摄影或者插画,通常,Banner的位置出现在头部,所以要求画质高清且层次丰富。

单纯靠一张摄影作品就做出头部Banner的时代过去了,取而代之的是插画或者对摄影做更进一步的视觉处理。而且为了传递信息的准确直达,也会添加相应的文字来丰富画面。

另一类是其他的图片信息中的配图,这类配图与可能是产品和服务的图片,如果是在介绍类的文字中出现,也需要准确的辅助表现信息。

还有一种配图的方向,也就是利用插画。直接创作插画就比去网上找图片素材来得简单,表现清楚概念就可以。

最后一种配图的风格就是C4D制作的质感特别高级的立体艺术,场景装置,在电商展示产品的时候用的多一些。

无论你是用哪一种方式表现配图,摄影、插画、立体……,都需要一门深入,表达得彻底。不是懂得越多越好,而是越深入越好。因此选好一个适合自己的方向非常重要。

字体

字体是很容易被忽略的元素之一,因为对于UI设计,尤其是中文字体更多依赖系统能提供什么字体,没有平面设计那么自由。

但是UI设计师对字体却要非常小心,尤其是大型的文字,比如Banner内的文字,可以以图片形式出现的文字以及英文,都要注意字形对整个界面的影响。

视频

如果是比较简单的UI界面,很少会用到视频。毕竟敢把视频直接放到自己的服务器里给用户看,而不是引用外部资源的平台也不多。视频的流量真心是贵啊~(我自己的个人网站就用过视频,还好一直比较庆幸流量不大)

交互

UI的交互是交给代码实现的,但是UI设计师不会代码,那么就用动效的方式来展示。这样能把交互概念更完整的递交给前端。

所以UI设计师也需要对交互的体验多一些了解,尤其要对代码实现到哪个程度心中有数。否则你的界面只能是一张图片,只有审美功能,没办法实现成为真正的界面。

以上几个方向能拿下,基本上你的UI界面设计,就算不能登顶,也能在行业里被众星捧月膜拜好一阵了。

其实方向大家都知道,缺乏的只是日积月累。

记住,当你在说这句话的时候,你已经进入了一个恶循环,这个恶循环就是:重复工作无暇顾及自身成长,没办法成长所以更要努力重复工作……最后到了中年危机,加班加不动的时候,前面来了一大波比你能加班,还能接受低薪的小年轻,瞬间成为“被优化”的一员。

最后,你会发现,其实做一份好的作品,提高自己的作品视觉效果,这套方法,也能让自己变成一个更好的人。优秀不需要努力的,它只能是一个习惯。

THE END
1.网站首页设计模板图片下载首页设计图片素材大全熊猫办公精心为用户挑选81张高清精美首页设计图片、支持专业级首页设计素材下载,更多风格的首页设计,免抠元素,卡通手绘素材图片、图标图案、免抠矢量图,尽在熊猫办公。https://www.tukuppt.com/speciall/shouyesheji.html
2.UI设计banner专题模板UI设计banner图片素材下载我图网UI设计banner专题为您整理了59个原创高质量UI设计banner图片素材供您在线下载,PSD/JPG/PNG格式UI设计banner模板下载、高清UI设计banner图片大全等,下载图片素材就上我图网。https://so.ooopic.com/sousuo/15825915/
3.新年banner素材模板飙升下载35封面设计 0.0 36党建文化墙 0.0 37荣誉墙 0.0 38企业文化墙 0.0 39边框 0.0 40饺子 0.0 41插画 0.0 42美食 0.0 43福字 0.0 44年货节 0.0 45人物海报 0.0 46新年banner 0.0 47美食海报 0.0 48长图 0.0 49优惠券 0.0 50廉洁 0.0 51新年海报 0.0 52国风 0.0 53日历 0.0 54双旦礼遇季 0.0 55圣诞树 https://www.58pic.com/hottopic/xinnianbanner
4.互联网banner背景互联网banner背景图片互联网banner背景素材互联网公司科技banner立即下载 无卡支付APP科技背景立即下载 工作与思维插画立即下载 蓝色互联网科技背景科技会议背景立即下载 舞动时尚双12海报设计立即下载 红色喜庆双12海报立即下载 商业投资经济banner素材设计立即下载 蓝色科技背景电气背景电子背景立即下载 互联网金融海报模板立即下载 扁平化活动背景图立即下载 新年背景加https://so.redocn.com/beijing/bba5c1aacdf862616e6e6572b1b3beb0.htm
5.gif制作gif动图gif动画图片在线制作软件我拉网GIF图片制作工具是一款支持在线多图合成gif、视频转gif、gif制作、gif裁剪、gif压缩、表情包gif、gif编辑、gif拼图等功能的动图制作软件,您可以随心随意的制作喜欢的GIF动画。https://gif.55.la/
6.主页图素材主页图图片主页图素材图片下载觅知网为您找到201个原创主页图素材图片,包括主页图图片,主页图素材,主页图海报,主页图背景,主页图模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于主页图素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺术字、PPT、视频等设计https://www.51miz.com/so-sucai/3403122.html
7.Banner设计保姆级全方位教学!万字干货!优设网编者注:Banner设计看似简单,实则囊括了平面设计、设计心理学、用户研究、文案设计等多领域的知识点,本文用1万2千字的超长篇幅,帮你从零开始掌握Banner设计。在工作中需求方往往不是设计出身,提需求时传达上往往也没有办法很好的表达自己的想法,在这种需求模糊的环境中https://www.uisdc.com/banner-design-3
8.系统首页图片系统首页素材图片大全系统主页图片 系统界面设计图片 管理系统首页图片 WEB系统首页图片 系统网页入口UI图片 千博企业网站系统图片 更新于:2024-03-22 高清图片 UI设计企业官网办公OL系统web首页banner 高清图片 ui设计后台管理系统首页web界面 高清图片 智慧医疗APP首页主界面 高清图片 https://699pic.com/image/xitongshouye.html
9.叮咚!你有一份网页设计规范,请查收4. 网页设计页面等级划分 首页 进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个。注意:网站的首页只能有一个。 二级页面 从首页点击进入之后的页面叫做二级页面。 三级页面 从二级页面点击进入的页面。 如Pixso社区中的SaaS网站,用户默认进入的是主页,点击“Prodhttps://pixso.cn/designskills/wangyeshejiguifan/
10.网页设计需要了解的相关知识矢量图:是根据几何特性来绘制图形,矢量可以是一个点或一条线,矢量图只能靠软件生成,文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合。它的特点是放大后图像不会失真,和分辨率无关,文件占用空间较小,适用于图形设计、文字设计和一些标志设计、版式设计等。 http://www2.hnsyu.net/syxywlzx/jszc/wlxxaq/201012/t20101212_46968.html
11.单页网站制作系统探讨单页网站建设的适用嘲与制作技巧1、网站banner 头图设计 banner头图设计 简洁美观,符合自身品牌调性。可以适当加号召性用语,用一句话阐明了自身品牌优势,添加购买按钮引导客户转化。 辅助工具:创客贴、canva、logo神器等工具获取丰富素材和banner模板。 2、考虑视觉层次 一般单页式网站的层次结构(从上到下):头图banner、企业介绍,重要产品展示、详细业https://blog.csdn.net/weixin_39805355/article/details/111327343
12.淘宝网主页图片淘宝网主页素材淘宝网主页模板免费下载六图网为您提供9734张淘宝网主页设计作品免费下载服务,您还可以找到淘宝网主页图片、淘宝网主页素材、淘宝网主页模板等设计素材,我们为您提供淘宝网主页图片下载,淘宝网主页模板下载、淘宝网主页素材下载等服务!https://m.16pic.com/sucai/1042910.html?from=singlemessage
13.短视频账号搭建之Banner图和视频封面banner图是你主页上面的这个主图。 同样它的存在可以有三个作用: 第一个作用比较简单,就是让你的主页更好看。听起来太简单了,这个真的是没有太多说到的。让你的主页看起来更和谐舒服,这样的图片至少是不会放错的。因为重要的信息其实在你的名字和简介里都已经写完了,你给太多的信息只会增加观众的思考负担,还有https://zhuanlan.zhihu.com/p/590533802
14.web端交互设计页面布局对比分析20180407这种布局设计干净清爽,有足够强的视觉表现力,并且常常采用的响应式设计,断点也很好控制。顶部大面积的轮播图或者Banner 也有许多插件或者应用来帮你实现。 原理:这种布局中,每个元素都各司其职,并且整个流程是富有逻辑的,顶部大图足以营造氛围,给予用户特定的体验,下面的次一级元素能够做的很好的支撑。 https://www.jianshu.com/p/9c813632e678
15.好用的免费海报设计素材网都在这里了!设计师必备banner设计对于没有设计基础或不会PS的菜鸟同学来说,MAKA给他们提供一个简单的设计平台! MAKA涵盖了新媒体配图、电商、生活娱乐、办公商务等上百种场景,20W+原创版权素材模板,光是海报就有手机海报、动态海报、长图海报、电商横版海报、广告banner、全屏海报、张贴海报、营销海报超多不同类型的模板可供你挑选! 简单拖拉https://aiqicha.baidu.com/qifuknowledge/detail?id=10160311640
16.B2B独立站,为什么不建议滥用轮播图?这几个首屏设计的小心思偷偷这几个首屏设计的小心思偷偷告诉你! 99%的建站小伙伴,都对这玩意上瘾,觉得网站没有个banner轮播图,总觉得少了点啥。 大家好,我是雪梨鸭~ 今天跟大家说说网站轮播图,也叫banner,slider,carouse,说的都是像PPT幻灯片一样划来划去的图片,就是这玩意https://www.cifnews.com/article/155327
17.简约清新少女风抖音背景图封面图片模板素材卡通可爱引导关注抖音个人主页背景详情《简约清新少女风抖音背景图封面》是稿定设计图片模板中为您提供的素材模板在线设计制作的预览效果,点击本效果图或右侧“立即编辑”按钮,可对《简约清新少女风抖音背景图封面》进行在线编辑设计。本素材属于可爱、少女类风格的图片类模板,主要用于抖音背景图。该模板素材编号为:48232https://www.gaoding.com/template/48232703
18.关于网页设计实习总结(精选5篇)从整体了解主题:自己找了多个类似的企业网站作参考,通过总结企业网站中,几个主要的栏目在网站上具体意义,体会这对应的几个栏目banner的设计意义。 思考配色与构图:对整个内容有了一了解后,便要思考作品的色彩和具体的构图,先用笔画出草图,有时候也会直接在脑海里构思。除了从公司的角度,围绕要传达的东西去设计,我也https://www.yjbys.com/shixi/shixizongjie/1024706.html
19.基础知识UI设计新手必须知道的切图命名规则今天菜心要分享的内容是关于切图命名的规范,这是UI 设计师最基础的知识之一,但作用非常大,可以帮你和同事.开发高效对接,提升整体工作效率。建议学习。 关于切图命名的规范,我个人觉得关键是在于团队能够有一个统一的规则,所有成员严格遵守并且和所有开发全盘拉通,不然一切都是空谈。 https://www.uishe.cn/153195.html
20.网站模板ps素材图片素材网页设计欣赏 作为一个好的web网页设计师借鉴好的网页设计作品是很有必要的,站在巨人的肩膀才能看的更远 fedex网页设计 一个临摹网页效果图 电商-女装主页 手机端-产品列表广告图 水墨清丹风-一个衣服品牌宣传页面 全球免税跨境电商-GDFS官网首页 中国风情-麻辣的诱惑 https://www.51xuediannao.com/
21.如何设计banner中的slogan如何设计banner中的slogan 网站建设 Slogan在Banner中占据着举足轻重的地位,Slogan设计得好,可以成为广告图的点睛之笔,画面品质感明显提升。设计得不好,也能毁掉整个Banner。本文主要分析如何巧用Slogan(品牌口号,广告语),实现网页Banner的创意表现。 那么来了解下Slogan对Banner有多大的影响?https://www.cdcxhl.com/news/159122.html
22.网页设计中页面尺寸标准这一讲主要来说说网页设计的标准尺寸 一、在800×600分辨率下,页面宽度应在778px以内,这样不会出现横向滚动条,高度可以依据版面和内容而定。 二、在1024×768分辨率下,页面宽度应在1003px以内,如果仅一屏显示的页面,高度在612px~615px之间,这样横向和纵向滚动条都不会出现。 https://m.oh100.com/kaoshi/web/510219.html
23.嘲图太阳与月亮的场景图画板,该画板属于花瓣网未知相关类别的资源,其中共收集了1296关于场景图相关的图片素材资源,共被42人关注。花瓣网, 设计师寻找灵感的天堂!https://m.huaban.com/boards/38815269/