亚洲人成影院午夜网站_无码人妻精一区二区三区_人人妻人人爽人人澡人人_美女内射无套日韩免费播放

任何(he)一个新手设(she)计(ji)师，刚开始做设(she)计(ji)的(de)时(shi)(shi)候(hou)，总会遇(yu)到一些设(she)计(ji)雷区，当做视觉决策的(de)时(shi)(shi)候(hou)，不知道(dao)该怎么去让自己(ji)的(de)画面(mian)(mian)再提升一个层次，让画面(mian)(mian)看起来更丰富。

那么我们可以尝试这用7个投机取巧的方法，来提升你设计画面的丰富感和层级关系。 

01

视觉层级关系的创建，应该用(yong)颜色(se)的深浅与字体(ti)的粗细来体(ti)现，

而(er)不是单纯的用大小。

设计中的(de)排版的(de)常(chang)见的(de)雷(lei)区，就(jiu)是过(guo)分依(yi)赖字体的(de)大小来区分层级关系，但往往这(zhei)样子，画面的(de)效果并不突(tu)出，画面效果就(jiu)是要避(bi)免元素(su)上的(de)太过(guo)相似(si)。

如(ru)果元素不同(tong)，那么干脆让他截然(ran)不同(tong)，让他的对比关系变(bian)得更强烈(lie)，能(neng)让用户先获取到更加(jia)重要的信(xin)息。

这(zhei)个文字重要(yao)吗(ma)？

-----那就让他变得更(geng)明(ming)显，更(geng)粗更(geng)深

这个文字是(shi)次要(yao)的吗？

-----那就让他变得在浅再细一点(dian)

不(bu)要仅(jin)仅(jin)将所有繁重的工作留在字体大小上

-----而是(shi)尝试使用颜色或(huo)字体重(zhong)量来完成同样(yang)的(de)工作。

尝试用2-3种(zhong)颜色：

主要的内容用深色(se)(se)（但不要给(ji)到(dao)纯黑色(se)(se)）

二级内容用(yong)灰色

辅助(zhu)内容用更浅的(de)灰色

02

尽可能少(shao)的使用线框(kuang)

当你想做元素分区的时候，虽然线框是区分两个区域的好方法，但他不是唯一的方法，使用(yong)太多的(de)线宽会(hui)让设计看起(qi)来显得(de)繁琐、复杂(za)。

想区分元(yuan)素(su)的时候(hou)，可(ke)以(yi)尝试以(yi)下3种方法(fa)：

1.使(shi)用阴影

投影效果是可以很好的概括出区域的元素，并且看起来可以更精致，而且不会分散用户看主要信息的注意力。

2.采用不(bu)同的背(bei)景颜色来进行区域(yu)区分

通常只需要为相邻元素提供略微不同的背景颜色即可区分它们

3.让每个模(mo)块之(zhi)间的距离(li)看起来更(geng)远(yuan)

有什么更好的(de)方法来创建元(yuan)素之间(jian)的(de)分离而不是简单(dan)地(di)增加分离？

将每个模块的距离拉的更开，这是一种很好的区分模块之间的方法，并且让单独每个模块看起来更具有亲密性

03

为平淡的边框加点(dian)颜色

当我们发现画面中的(de)元(yuan)素平淡(dan)无奇，一个(ge)简单的(de)技巧，可以为界面的(de)某(mou)些部分添加(jia)(jia)几分生色(se)，那就是给边框加(jia)(jia)一点颜色(se)，看起来会(hui)生动许多。

例如我们可以在一些警示的消息旁：

或者一些tab页

04

图标不要做(zuo)的太笨拙，尽可能的看起来更精(jing)致，更统一

如果你准备设计一(yi)些大图(tu)标，可以(yi)尝试着给图(tu)标加(jia)一(yi)个(ge)底色，让(rang)后(hou)缩小图(tu)标的尺寸，利用底色的来让(rang)轮廓让(rang)图(tu)标看起来大一(yi)点，同时可以(yi)让(rang)原(yuan)本单调(diao)的图(tu)标丰富一(yi)点，不会显得一(yi)个(ge)笨重的图(tu)标在画面影响着效果。

注意：这种做法常用通常是功能性比较大的图标时候使用，但如果一些常用界面设计上，尽量然图标看起来小一点，颜色统一一点，并且最好是不要有颜色，因为有颜色的图标可能会影响用户的判断。

而且图标(biao)样式(shi)一定(ding)要(yao)统一，如果用(yong)线性，就(jiu)都用(yong)线性，用(yong)面性，就(jiu)都用(yong)面性

05

不需要给他每一个按钮都加上颜色

当用(yong)户(hu)(hu)可(ke)以在页(ye)面执行(xing)多个操(cao)作(zuo)的(de)时候，这(zhei)时候需要添加一些(xie)引(yin)导性(xing)的(de)设计在界面中(zhong)，也(ye)就是将希望(wang)用(yong)户(hu)(hu)操(cao)作(zuo)的(de)按钮高(gao)亮起来，不希望(wang)用(yong)户(hu)(hu)操(cao)作(zuo)的(de)弱(ruo)化下去(qu)即可(ke)，这(zhei)样可(ke)以激发(fa)用(yong)户(hu)(hu)的(de)点(dian)击欲(yu)。

控件设计是(shi)一个非常重(zhong)要的(de)部分，有一个常见(jian)的(de)重(zhong)要维(wei)度：层(ceng)次结构。

最希(xi)望用户按的(de)：高(gao)亮，应(ying)该与背景形成强烈的(de)对(dui)比度

次重(zhong)要的(de)：应该设计清(qing)楚，但不需要突出，使用轮廓样(yang)式较(jiao)低对比度的(de)背(bei)景色(se)色(se)更好的(de)选择

三级控件：应该是(shi)可(ke)以让(rang)用户控件，但并(bing)不(bu)需要引人注目

06

垂直阴影

当我们做(zuo)卡片需要做(zuo)一(yi)个投影效果的(de)时候，不使(shi)用较大的(de)模糊来使(shi)框阴影更(geng)明显(xian)，而是让淡淡的(de)投影垂直偏(pian)移

这样(yang)看起来(lai)(lai)效果(guo)会(hui)更(geng)(geng)加(jia)自然，因为这样(yang)的做是(shi)(shi)模拟了一(yi)个真(zhen)(zhen)实光效，从上面(mian)照(zhao)射(she)下来(lai)(lai)的效果(guo)，就犹如我们(men)的太阳是(shi)(shi)再(zai)顶(ding)上照(zhao)下来(lai)(lai)一(yi)样(yang)，使的效果(guo)更(geng)(geng)真(zhen)(zhen)实，更(geng)(geng)自然

如果你有兴趣了解更多关于阴影再设(she)计的用(yong)法，你可以(yi)关注我，后期会推出一篇关于阴影再设(she)计中(zhong)的应用(yong)的文章。

07

请不要将灰色的字体放在彩色的背景上面

灰色的字(zi)(zi)体放在(zai)(zai)白色的背(bei)景背(bei)景上(shang)面的时候，效果是(shi)非常棒的，但如(ru)果把灰色的字(zi)(zi)体放在(zai)(zai)彩色的背(bei)景上(shang)面的话，结果却不尽人意。

那(nei)是(shi)因(yin)为将(jiang)灰色的(de)放在白色的(de)背景上面的(de)时候，会(hui)使他(ta)们的(de)对比度(du)降(jiang)低，从而看起来画面更(geng)简(jian)洁，更(geng)干净(jing)。

但如果(guo)把(ba)灰色(se)放(fang)在彩(cai)色(se)背景上(shang)面的是时候(hou)，视觉感官上(shang)面会少一些比(bi)较亮的颜色(se)，这样显得画面不干净，稍(shao)微(wei)有点脏(zang)。

我们应该(gai)尝试着将文(wen)字让(rang)他更接(jie)近(jin)背(bei)景的(de)颜色(se)(se)(se)，这样更有利(li)于创(chuang)建画面的(de)层(ceng)级关系，而(er)不(bu)是直接(jie)将灰色(se)(se)(se)的(de)文(wen)字放入有颜色(se)(se)(se)的(de)背(bei)景上。

当(dang)我(wo)们使用(yong)彩色的(de)背景的(de)时候，可以尝(chang)试这两种方法:

降低白色字体的不透明度

使用白色(se)的(de)字体，然后把白色(se)文(wen)字的(de)不透明度稍微降低，这样子可(ke)以(yi)稍微把彩(cai)色(se)的(de)背(bei)景透人白色(se)字体，这种做法可(ke)以(yi)有效的(de)让(rang)文(wen)字很好的(de)与(yu)背(bei)景看起来更协(xie)调。

挑选基于背景颜色(se)更明亮的颜色(se)

当背景是彩(cai)色(se)或者有淡淡的(de)(de)(de)低温的(de)(de)(de)时(shi)候(hou)，如果仅仅是将(jiang)白色(se)文字降(jiang)低不透明(ming)度(du)的(de)(de)(de)话，会(hui)使文本的(de)(de)(de)感(gan)觉变得有点(dian)太苍白无力(li)，

那么我们可以尝试讲文本的颜色改成与背景色相同的颜色，然后调整文字的饱和度与明度。

最后总结一下，学(xue)设计，一定是一个持之以恒的(de)事，多练多看多想这才(cai)是学(xue)习(xi)设计最快的(de)进步方(fang)法(fa)！！

这次分享(xiang)就(jiu)到这里，各(ge)位(wei)加(jia)油！真好！

原文地址(zhi)：//medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886