即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

UI设计:“Banner”之高大上的花边设计

微信 UI设计达人 12℃ 0评论

(点击上方公号,可快速关注)

作者:老睿 

链接:http://www.jianshu.com/p/13ed017284d3

作为UI设计师,我们经常在做设计稿的时候需要做一些移动端的banner,要求经常是“你看着来,看上去有格调、高大上、符合主题就行”,符合主题就是考验大家的找图功底,至于高大上、有格调则是考验大家对文案的排版、设计能力了。

常见的移动端banner设计中,我们通常会将不同字号的文字放在一起、加上一层半透明黑色蒙版、或是做一些特殊的文字排版来加强banner和文案的设计感。

中英结合排版

居中排版

分层排版

但是,这样好丑啊,这是在告诉老板工资给高了啊!接下来,给大家看一下能够增加Banner设计感的花边设计,希望在大家以后做设计稿的时候为大家带来一丝灵感。


1.“横线”式花边。


简单的横线,增加文案分割的层次感,显得整体布局不再单调,适用性广,懒人必备,使用方法:在文字之间安放横线;在文字两边加上短横线;在文字上下安放一长一短两条横线


2.方框类花边


简单的方块配上间入其中的一些符号、小图案等,非常适合居中排版的文案设计,能够有效提高Banner的设计感与层次感,简书移动端题图部分使用的就是方块类花边,使用方法:打开你的脑洞,发挥你的想象力。倒角框,方框换着位置叠加;四个角四条边,句号等号书引号、三角方框圆形换着上;黑色白色的填充等等都可以,直到找到你喜欢的为止



3.三角框类花边


这一类花边使用后非常增加设计感,但适用范围比较小,适用于居中文字和黑白背景,用不好容易造成负面效果,使用方法:结合横线、自定义形状中的简单线条使用



4.半框类花边


顾名思义,即不用全框,类似于方框类,但更加灵活,适用绝大多数情况,使用方法:先画俩四分框或一个半框,根据背景图选择性扩展、加蒙版、加符号、改字体等等。



写在最后:花边的种类繁杂,形式也千变万化,所以千万不要拘泥于形式,一定要灵活多变;经常看一些别人做的好作品,看一些时尚作品能够提升你的审美和手法;做设计的时候,脑洞要大,想法要多,灵感不多,经验来凑,很多时候决定设计师高度的往往是阅历而不是天赋,记得一定多看多想多动手。

转载请注明:CodingBlog » UI设计:“Banner”之高大上的花边设计

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情