今天想和大家分享两个干货内容：
一、弹窗设计 （1）按钮层级 （2）按钮圆角 （3）亲密些原则
二、个人主页设计 （1）整合信息，提高页面空间利用率 （2）小修饰，做出差异化 （3）改变颜色，提高辨识度
接下来让我们进入正题吧！！！
弹窗设计
在设计弹窗时，发现了一些细节点，虽然很细小，但对其排版舒适度却有着一定的影响。比如下面这个弹窗，大家会不会觉得不够精致

我们来一点一点优化它
1.按钮层级
先说一下按钮层级问题，这两个按钮，更多时我们希望用户点击的是右侧的这个

左侧按钮显得有点重且暴力。我们可以选择弱化它的描边，这样既能清晰的表达信息内容，又能突出主要内容，像下面这样

是不是精致了一些？

2.按钮圆角
弹窗的按钮这样设计，会不会觉得有点不舒服？

按钮太扁了，让按钮有一种挤压感。
但此产品风格设定需要选用较大的圆角，那么我们可以怎样优化它呢？增加其高度！

按钮圆角的设定最好不超过按钮高度的1/3，这样不会使其看起来过于拥挤。

当按钮圆角大小无法改变时，那就增加它的高度，这样既增加了按钮的透气感，又使其更具点击欲。

3.亲密性原则
最初排列时画面过散，信息层级处理的问题，头像与昵称这类同层级的内容之间的距离过远，导致布局看起来像是三个板块

我们可以把相同信息层级的内容看成一个整体，将用户信息（头像和昵称）和按钮看作两个板块，对其进行排布。用户信息和按钮的间距为24px时（图中蓝色部分），头像和昵称的间距就可以取它的一半12px（图中紫色部分）。应用这样规律性的数值会让布局看起来更加规范和舒适。

通过这三个方向的修改，这个弹窗的精致度是不是提高了并不少？

个人主页设计
1.整合信息，提高页面空间利用率

这个页面，可以发现头图部分大面积的空白，使整张页面的空间利用率受到了限制。那我们是不是可以考虑把这部分合理的应用起来？
首先我们观察页面中主要的三个板块<TA的资料> <TA的标签><TA的技能>，发现<TA的资料>和<TA的标签>这两个板块其实更多的是展示信息，没有过多跳转的意义，且这样的布局方式看起来也不是很美观。
那么我们是不是就可以试着将其与头图中空白的空间结合起来。

但是你会发现头图的背景图选用的并不好，这样会影响上面文字的可读性，分散用户的注意力，而可能错失部分信息内容的读取。为了合理利用这片空间，我们可以将背景弱化下去，甚至可以使用深色，凸显信息内容

背景的问题解决后，那就可以把<TA的资料>和<TA的标签>部分的内容搬上来啦

“年龄”“星座”“地址”作为同一信息层级，可以将其放在一个组块。

“个性签名”和“标签”的长度是不确定的，所以可以将其放在一个板块展示。同时可以加个图标丰富其层次。
最终在增减内容排版后，头图变成了这样。

合理的应用头图的空间，将页面仅需展示的内容进行了排列。页面下方的内容就可以展示更多其他的内容了。 

2.小修饰，做出差异化

光秃秃的标题，有时会让页面看起来很单调。

我们可以通过增加小修饰的方式，让页面丰富起来。
像最常见的一条彩色直线。

也可以绘制一个好看的线条；画个星星或者加个“#”等等，都是能在丰富标题层次的同时，做出差异化来。

3.改变颜色，提高识别度
这个游戏展示页面，黄色的图标与背景几乎融在了一起，文字展示也不是很明显。

通过改变背景颜色，将重要信息内容凸现出来

这样看内容呈现的是不是更加清晰了？
还可以怎么优化呢？给背景拉个渐变，将游戏内容用蒙层的方式展现出来

画面感是不是又提高了不少？最终页面效果如下

以上就是在修改页面时碰到的问题及一些小感悟，希望对你有所帮助 

总结

1.通过颜色对比，突出主要信息，弱化辅助信息
2.按钮圆角设置最好不要超过其高度的1/3
3.页面布局时，可采用“五分原则”使其画面看起来更加规范舒适。
4.合理整合信息层级，提高页面空间利用率
5.小修饰丰富标题，丰富层次，做出差异化
6.可通过背景与颜色的对比，提高页面辨识度。 

最后，问大家几个问题：
你是不是在工作中接触到的产品风格非常单一？想多尝试一些不同的设计风格，却没有机会？
你在做设计的时候，是不是没有设计师可以和你交流，也没人带你？
你是不是想找一个地方，这里有一群人可以和你每天一起坚持打卡，共同监督彼此的进步？
如果你有以上这些困扰，好，看到这条文章你就赚了！我们特别针对有这些困扰的同学开设一门全新打卡课程，上完这门课程之后，你可以系统性地掌握非常多的ui设计风格！
大家可以看一下课程表：

直接戳下方图片，可查看课程详情！
 
报名入口
点击文末左下角的【阅读原文】，便可进行报名。

声明：* 本站所提供的资源均来源于互联网，站内所有文字、图片内容由网站会员上传而来，UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷，本站不负任何责任。如果有侵犯到您的权益，请联系本站删除，谢谢合作！联系邮箱：Uishe#qq.com (请将[#]换成@)