7个计划本领，改善网页视觉结果且提拔高级感|大家都是产物司理 ...
http://image.woshipm.com/wp-files/img/48.jpg本文总结了7个简朴直观的改善网页视觉结果且能提拔高级感的小本领，enjoy~对于每个网页计划师而言，在计划过程中总会遇到必要作出计划决议的时间。大概你的公司并没有全职计划师，而需求上则要求计划出全新的UI；又大概你正在制作一个你本身的个人项目，而你盼望它比 Bootstrap 的默认结果要强一些。这个时间许多人会退缩:“我并不是一个艺术家，我没法作出更好的结果！”但是究竟证实，想要计划出更良好的结果，公道地运用本领实在更紧张，而且是可以出结果的。
本日的文章，我们总结了7个简朴直观的改善网页视觉结果且能提拔高级感的小本领。很现实，也很实用，盼望你们能喜好。
1、利用色彩和字重来创造条理布局，而不是单纯的巨细对比
http://image.woshipm.com/wp-files/2018/02/YGt4HNqIQTMjtHTafqqs.png
在对UI 文本举行样式控制的时间，最常见的错误莫过于过分依靠字体巨细差别来营造对比。
“这段笔墨紧张吗？那么让它更大一些吧。”
“这段笔墨是比力次要吗？那么让它变小一点吧。”
单纯利用字体巨细对比，所营造的对比并不敷，实验联合色彩和字重来营造更好的对比结果。
“这段笔墨紧张吗？我们让它色彩更加大胆一些吧。”
“这段笔墨是比力次要吗？我们让它的色彩更浅一些吧。”
假如可以的话，你乃至可以接纳两到三种颜色：
[*]重要内容接纳深色（诸如标题，但是不要用纯黑）
[*]次要内容接纳灰色（好比文章发表日期）
[*]辅助性内容接纳浅灰色（好比页脚中的版权声明）
http://image.woshipm.com/wp-files/2018/02/pZVg7JrffZswz4SAo3NZ.png
雷同的，在UI计划的时间，通常两种差别的字重足以营造出良好的条理感：
[*]大多数的文本接纳正常的字重（400到500，详细取决于字体）
[*]对于必要夸大的笔墨接纳较重的字重（600到700，详细取决于字体）
http://image.woshipm.com/wp-files/2018/02/EimndxoEH9L3xwgJoJSc.png
应当只管不要让正文部门字重低于400，由于这一部门字体字体自己尺寸已经较小，低于400会使得可读性不佳。假如你依然必要低落字重，那么不妨让字体色彩更浅一点，大概更换成其他辨认度较强、字重相对较小的字体。
2、不要在有色配景上利用灰色的文本
http://image.woshipm.com/wp-files/2018/02/zOJQjlmJewOiJZgbbWBp.png
在白色配景下，将玄色的文本改成灰色，是不错的淡化其视觉结果的做法，但是在彩色配景下这么做，则是别的一回事。
现实上，让白色配景下文本由黑变灰现实上是到达低落对比度的结果。
但是在彩色配景下，想要低落对比度是应该让文本渐渐靠近配景色，而不是改为灰色。
http://image.woshipm.com/wp-files/2018/02/vpMBJkkAPrMiQ7inmkdh.png
想要低落和配景色之间的对比，通常有两种方法：
（1）低落白色文本的不透明度
低落不透明度，可以或许让配景的颜色透过来一些，以一种不辩论的方式低落远景笔墨和配景之间的对比度。
http://image.woshipm.com/wp-files/2018/02/1aHaHOFFaSJgYDxVEjQN.png
（2）基于配景色手工挑选文本的颜色
当配景是图像大概图案的时间，半透明的文本会影响可读性，这个时间最好是基于配景主色调来挑选相应的文本色。
http://image.woshipm.com/wp-files/2018/02/0AqrgrZn8FpNc4t61fFE.png
3、阴影计划
http://image.woshipm.com/wp-files/2018/02/iLMfNOT4O2S5SBAGYJvY.png
相比于接纳大范围的扩散含糊阴影，利用玄妙的垂直偏移阴影结果更显着，更天然，它模仿了最常见的光源特性，光线从上往下照下来所营造的阴影结果。
假如你对此有爱好，Material Design Guideline 非常清楚地给你表明白了如许的阴影的制作细节。
http://image.woshipm.com/wp-files/2018/02/xdLZC3CM1p3db6i5LtAH.png
4、只管少利用 Borders
http://image.woshipm.com/wp-files/2018/02/uEagP5QrKJeDhpPxe3N9.png
盒子模子是网页前端最常用到的工具。当你必要在两个元素之间创建分隔的时间，只管制止利用两者的界限直接打仗。
固然 Border 是分隔两个元素的好办法，但是它不是唯一的方法，利用过多会让整个结构的计划感低落，乃至会造成杂乱。
以是你可以实验下面的办法来规避：
（1）利用 box shadow
box shadow 同样可以营造出界限感，而且更加玄妙，并不会显得突兀，不会分散用户的留意力。
http://image.woshipm.com/wp-files/2018/02/a8i0AyEA7TImGuavAc2G.png
（2）利用差别的配景色来区分
通常，相邻的元素配景只必要有玄妙的差异就可以或许让人对他们举行区分。以是，你所必要做的就是在差别的区块接纳差别的配景色，而且实验删除边框，由于你根本不必要它。
http://image.woshipm.com/wp-files/2018/02/nGQMtxnsyenfAe4EDs4p.png
（3）增长额外的留白
创建元素之间的分离结果，并不肯定要通过线框来体现，只要增长留白，让它们分隔开就行了。通过留白和间距来实现元素分组是UI计划中的常用伎俩。
http://image.woshipm.com/wp-files/2018/02/FoUrsH71lsKQKmMCfjN4.png
5、不要让小图标无故地放大
http://image.woshipm.com/wp-files/2018/02/ZbUETSRlKXTB4v0es30p.png
当你在计划着陆页的时间，大概会突出产物的功能，这个时间你必要一些大图标来作为视觉锚点，这个时间你大概会往 Font Awesome 大概 Zondicons 如许的网站找几个免费的矢量图标，然后放大到符合你需求的尺寸。
它们都是矢量图标，照说是可以无损放大的。但是一个通常只有16×16 的图标放大三四倍，它固然无损，但是在视觉上就显得颇为不专业了：缺乏细节，总感觉过于矮胖。
http://image.woshipm.com/wp-files/2018/02/wtcqLKAc4hFXhvFTjvdz.png
但是，假如这些小图标是你唯一可以或许搞得到的素材的话，那么不妨试着将它置于别的一个带有颜色的图形当中：
http://image.woshipm.com/wp-files/2018/02/r2NlW22bmmnW4BpBem9c.png
如许的计划不但可以或许让图标到达预期的视觉体积，而且看起来要比单纯放大，看起来细节会更多一些。固然，假如你手头不是那么紧的话，最好照旧买几个大尺寸的高素质图标，好比 Heroicons 或 Iconic。
6、增长带有颜色的单边边框提拔个性
http://image.woshipm.com/wp-files/2018/02/q1u5U4ei7oVQNCk8RMCx.png
固然，你大概并不是一个对于平面计划有着充足履历的计划师，但是嶷然可以让你计划的界面有充足的视觉吸引力。
最简朴的方法，就是在界面的边框中的一边添加上单色乃至渐变的边框，这能让平庸无奇的界面一下子变得鲜活起来。
好比在告诫弹出框的侧面：
http://image.woshipm.com/wp-files/2018/02/rcCBMi7Baa9qOr8Ml6ah.png
大概在导航栏的底部，以示触发：
http://image.woshipm.com/wp-files/2018/02/jH41Le1puw73mw4nlI7A.png
大概在整个页面的顶部：
http://image.woshipm.com/wp-files/2018/02/KFvomD2awbBJ1xxITbUU.png
这并不必要什么平面计划的履历，但是会显着强化计划感。
退一万步讲，你不知道选取什么颜色，简朴，上Dribbble 的色彩搜刮中任意找几个看着美丽的颜色，实在也就够用了。
7、并非每个按钮都必要颜色
http://image.woshipm.com/wp-files/2018/02/7voLTnxBXKchBmBuugOm.png
许多时间，按钮自己所处的语境和按钮上的文本内容会让人感到疑惑。像BootStrap 如许的框架就让计划师按照语境和语义来举行选择：
http://image.woshipm.com/wp-files/2018/02/Epi8B1yvgzKvuOTSmlmz.png
“这是一个积极的操纵？让这个按钮是绿色的吧。”
“这是否是要删除数据？那么将按钮设置为赤色的吧。”
简直，语义和按钮自己的计划痛痒相关，但是另有更紧张的维度被忽略了，那就是条理布局。
网页上每个操纵实在都位于整个交互金字塔的某个位置。尽大多数的页面实在只有一个重要操纵，搭配一些不太紧张的次要操纵，以及为数未几的几个三级操纵。
在计划这些交互的时间，通过条理布局来出现这些交互的紧张性是很紧张的计划环节。
[*]
[*]重要操纵应该很显着。接纳实色、高对比度的按钮是很有须要的。
[*]次要操纵应该显着，但是不突出，接纳幽灵按钮大概和配景对比度较低的色彩是比力公道的。
[*]三级操纵应该是可被发现，但是不显着的，他们最好被计划为链接。
http://image.woshipm.com/wp-files/2018/02/SIzhgk29FVY3ll61kJeR.png
“粉碎性的交互所涉及的按钮岂非不应该是赤色的么？”
没须要！假如粉碎性的交互所涉及到的按钮不是重要操纵的话，让它按照次要操纵乃至三级操纵的按钮来计划就好了。
http://image.woshipm.com/wp-files/2018/02/qXDT7sdPUZJ28CzOHoen.png
假如如许的操纵是重要操纵的话，可以让它是大号的、赤色的带有加粗文本的按钮：
http://image.woshipm.com/wp-files/2018/02/d3G2xJLNCoobtFvgMZo9.png
原文作者 : Adam Wathan & Steve Schoger
译者： 陈子木
译文地点：http://www.uisdc.com/7-practical-tips-cheating-design
本文由 @陈子木授权发布于大家都是产物司理，未经作者允许，克制转载。
题图来自 Unsplash，基于 CC0 协议
http://www.fyguaji.com
页:
[1]