如何让你的界面比别人的更好?7个实用设计技巧来帮你

每个网站开发人员,都不可避免地遇到需要同时兼任网站平面设计工作的情况,可能你工作的公司没有一个全职设计师,你需要自己实现一个新功能的UI这时你会觉得无处下手或者力不从心,但是有几个小技巧会让你的工作效果大大得到提升,而且不需要拥有丰富的平面设计经验。来跟我一起看看吧!

一、使用颜色和粗细来创建层次结构,而不是字体大小

UI文本进行样式设计时常犯的一个错误是过于依赖字体大小来控制层次结构。不要将所有繁重的工作都留在字号上,而是尝试使用颜色或字重来实现相同效果。你可以尝试并使用两种或三种颜色主要内容深色(但不是黑色,如:文章的标题);次要内容灰色(如文章发表日期);辅助内容的浅灰色(可能是页脚中的版权声明)。类似地,两种字体权重通常足以用于UI工作:大多数文本的正常字重;较粗的字体用于您要强调的文字。如果考虑使用较轻的重量来淡化某些文字,请改为使用较浅的颜色或较小的字体。

二、不要在彩色背景上使用灰色文字

使文本变为浅灰色,是在白色背景上淡化它的好方法,但在彩色背景上看起来并不太好。这是因为我们实际看到白色灰色的效果是对比度降低,使文本更接近背景色实际上有助于创建层次结构,而不是使它变成浅灰色。

处理彩色背景时有两种方法可以降低对比度:

1)减少白色文字的不透明度

使用白色文字并降低不透明度,这可以让背景颜色渗透一点点,以不与背景冲突的方式减弱文字。
2)选择基于背景色的颜色

当您的背景是图像或图案时,或者当减少不透明度会使文字感觉过于枯燥或不适应时,这会比减少不透明度效果更好。选择与背景色调相同的颜色,调整饱和度和亮度,直到看起来合适。

三、偏移阴影

不要使用较大的模糊和扩散值来使框阴影更明显,请添加垂直偏移。它看起来更自然,因为它模拟了像我们以前在现实世界中看到的那样从上方照射下来的光源。

四、尽量少使用边框

当你需要在两个元素之间创建分隔时,虽然边框是区分两个元素的好方法,但它们并不是唯一的方法,而使用它们太多会让你的设计变得拥挤和混乱。你可以考虑下面的方法:

1)使用盒子阴影

盒子阴影在绘制像边框这样的元素方面做得非常出色,但是可以更加微妙并且完成相同的目标而不会让人分心。

2)使用两种不同的背景颜色

通常只需将相邻元素的背景颜色略有不同,就可以在它们之间进行区分。如果您已经在边框上使用不同的背景颜色,请尝试删除边框,你可能不需要它。

3)添加额外的间距

什么方法创建元素之间的分离比增加分离更好呢?

将事物划分得更远,是一种在不引入任何新UI的情况下,创建元素组之间区别的好方法。

五、不要过放大图标

如果你设计可能使用一些大的矢量图标,并且调整大小直到它们符合你的需求,那么你要考虑它的质量。虽然矢量图像在增加尺寸时质量不会降低,但是16- 24 像素绘制的图标,在将它们放大 3 倍或 4 倍的预期尺寸时,会显得非常不专业。他们缺乏细节,并总是感觉不成比例的矮胖。如果您有小图标,请尝试将它们放在另一个形状中,并为这个形状提供背景颜色。这可以让保持实际的图标更接近其预期的尺寸,同时仍然填充更大的空间。
六、使用强调边框为平淡的设计添加色彩

如果您不是平面设计师,那么您如何将其他设计从美丽的摄影或色彩丰富的插图中,获得的那种视觉风格添加到您的用户界面中?诀窍就是在界面的某些部分添加色彩鲜明的重音边框,否则会感觉有点平淡。

七、并非每个按钮都需要背景颜色

当用户可以在页面上执行多个动作时,很容易陷入纯粹基于语义设计这些动作的陷阱。语义是按钮设计的重要组成部分,但是还有一个更重要的维度被人们遗忘:层次结构。网页上的每个动作都位于重要金字塔的某处,大多数页面只有一个真正的主要操作,一些不太重要的次要操作,以及几个很少使用的三级操作。在设计这些行动时,在层次结构中传达他们的位置很重要

主要行动应该很明显。实心,高对比度的背景色在这里很有用。次要行动应该明确但不突出。轮廓样式或较低的对比度背景色是很好的选择。三级行动应该是可以发现但不显眼的。将这些行为设计为链接通常是最好的方法。那么消极行为按钮不应该总是红色吗?不必要!如果消极行为不是页面上的主要行为,那么给它一个二级或三级按钮治疗可能会更好。

 

返回列表
友情链接:鞍钢房地产/鞍钢矿山建设/鞍山八建/鞍山大金空调/鞍山永佳精细化工/鞍山房建公司/鞍山公路/鞍山公益婚恋/
版权所有 鞍山市瀛海威信息技术有限公司 Copyright◎2004-2015 houyer.com 辽ICP备[05001174]号
     联系电话:0412-2220056 0412-2220058 18041200556
网络经济主体信息
业务展示 Business Exhibition
网站无排名,一切等于零/未进入百度首页不收任何费用/按月付费,可随时解除合作
鞍山网站优化
平面设计/设计外包/360全景/影视制作/
Flash动画/电子画册/效果图设计/PPT制作
微信营销是网络经济时代企业营销模式的一种创新高到达率/高曝光率/高接受率/高精准度/高便利性
手机网站定位客户群更快速/手机网站更方便与客户沟通/手机网站互动推广效果更好/手机网站的搜索排名更靠前/手机网站移动终端兼容性好/手机网站打开速度越来越快