020-29815005
预约专线时间:09:00-23:59

7个技能拯救你的UI设计作品

新闻来源:优漫教育 日期:2021-07-28
你们可以做得更多吗?!每一位界面设计者都要听取客户和老板的要求。这时许多人会在心里默默地卷起一只白眼:我又是个艺术家了,我做不出更好的效果!也可以选择自己的项目,希望比bootstrap的默认值更好。在这个时候,你也许会想到如何达到更好的效果?
  而实践证明,合理运用技能设计效果更为重要和有效。今日,UI设计培训学校将与您分享七个简单而直观的技巧,提升网页的视觉效果,增强前进感。

  一、利用颜色和词语的权重建立层次结构。

  对于界面文本的样式控制,一个常见的错误就是过分依赖不同字体大小来创造对比。

  如果可能,甚至有两种颜色可用:

  1、主内容为暗色(比如标题,不是纯黑色)

  2、灰阶内容(如文章的发表日期)

  3、次要内容是淡灰色(如页脚版权声明)。

  同样,在用户界面设计中,两个不同的单词重量通常就足以产生很好的层次:

  大多数文本的长度为普通字(400-500,根据字体不同)


  二、禁止使用灰色文字作为彩色背景。

  将白底黑字改成灰是一种减少视觉效果的好方法,但是在彩色背景上这么做是另外一件事。

  事实上,在白色背景中,将文本由黑色变为灰色实际上会降低对比度。

  但在色彩背景中,若要降低对比度,应让文字逐渐接近背景景色,而不应使用灰色。

  有两种方法可以减少背景色对比:

  1、减少不透明度,通过一些背景色来降低前景文本和背景的对比度,而不会发生冲突。

  2、半透明的文字会影响背景为图像或图案的可读性。这时,***会根据背景主颜色选择相应的文本颜色。


UI设计培训学校


  三、阴影设计。

  相对于大规模漫射模煳阴影,微垂直偏移阴影效果更明显、更自然。该方法模拟了常见的光源特性,即由光上下产生的阴影效果。


  四、尽量减少边界的使用。

  Box模型在网页之前经常被使用。如果您需要为两个元素建立分隔,那么应该尽量避免直接使用两者的边界。

  虽然这是区分这两种元素的好方法,但并不出人意料,过度使用会降低整个布局的设计感,造成混乱。

  所以,您可以尝试以下方式避免:

  波克斯Shadow还可以创造一种边界感,这种感觉更加微妙,并不显得突出或分散用户的注意力。

  经常可以通过细微的差别来区别相邻元素的背景。因此,你要做的就是在不同的方块里使用不同的背景颜色,然后尝试删除那些边缘,因为你不需要。

  要创建元素之间的分离效果,无需在线框中显示,只需添加空格将它们分离。在用户接口设计中,使用空格和空白来分组元素是一种常见的技术。


  五、别让小的图标毫无理由地放大。

  当设计登录页面时,产品的功能可以被强调。此时,您需要一些大图标作为视觉定位。你可以通过像fontawesome或zondicons这样的网站找到一些免费的矢量图标,然后根据需要放大。

  这些都是向量图标,因此可以在不破坏的情况下放大。一般情况下,16倍的图标会放大3-4倍。没坏,但是视觉上不专业:缺少细节,总觉得太短太胖。


  六、增加单一的边框和颜色来强化你的个性。

  你也许没有足够的平面设计经验,但你可以让你的界面具有足够的视觉吸引力。

  简单易行的方法是在界面边框的一侧加入单色甚至渐变边框,让平面界面瞬间焕然一新。


  七、不是所有的按钮都需要颜色。

  事实上,网页上的每个动作都位于整个互动金字塔的某个位置。大部分网页只有一个主要操作,一些次要的小操作和第三级操作。

  当设计这些交互作用时,一定要通过层次结构来说明它们的重要性。

  1、要明显操作。纯色和高对比度按钮必须使用。

  2、二次手术应该比较明显,但不突出。可以用重影按钮或背景对比度较低的颜色。

  3、三级手术应能发现,但不明显。它们是用来连接的。