淘宝天猫VIP

阿里国内站VIP

阿里国际站VIP

京东平台VIP

疯狂插件VIP

全站通VIP

当前位置: 首页 设计师后期类教程分享 图片设计教程

改善UI设计的这些个小技巧.有你不知道的吗?

收藏 邀请

UI设计要注意什么?怎么样设计更能把UI给呈现出来,今天分享的是UI设计的几个小技巧,可以快速改善要创建的视觉效果,感兴趣的朋友可以学习一下!

当我们使用完全由大写字母组成的文本时,需要注意将字母之间的间距拉大,这样可以防止字符彼此粘连,让文本更具可读性。

1.png 

  • 字重选择


除了字母间距之外,我们还需要谨慎选择字重。设计中可以使用纤细轻薄的字体,但要取决于字重。如果你正在制作一个用户最终会在屏幕上看到的产品,那么最好忘掉Hair(超级细)和Thin(非常细)、,因为它们非常难阅读,而且会在一些屏幕上造成半像素破碎的效果。

2.png 

  • 标题和正文字体大小


现在让我们来谈谈网页排版,大家都知道标题分为六个级别(h1-h6)。首先,你应该确保你的项目中不超过四个,并控制它们的逻辑和一致性。并且需要注意的是:尽管现在比较流行富有表现力的排版。不过你仍然要确保你的标题不要太过夸张了,因为太大的文字和太小的文字一样难以阅读。


接着是正文部分。浏览器的默认设置(以谷歌Chrome作为参考)是16px,这个大小读起来很舒服,但是我倾向于使用不小于17px的主文本和14px的附加文本。将12px保留为最小尺寸,再小的话就会由于视力问题或显示器不好而变得难以阅读。而且要切记避免在同一文段中使用两种大小差距不大的字体。比如16px和17px:这会让产品的外观非常混乱,并且完全是不合理的。


  • 行高


通常,我们需要稍微增加一点行高以提高可读性。对于大型文本块尤其如此:网站或移动应用程序的博客,文章和信息块。标题采用相同的方法是合理的,这样可以确保字母的尾部不互相影响。

3.png 

  • 文本和标题层次结构


粗体文本应该用来突出显示文本的重要部分。这包括标题、链接和按钮,有时也包括文本中强调的部分。如果整个文本都使用粗体,就会不清楚应该看哪里,什么更重要。

4.png 

  • 文本对比


在设计中要特别注意文字的对比度,以确保我们的字体在任何类型的显示器上都是可读的。这对于经常使用浅灰色的输入字段文字尤其重要。

5.png 

2.间距和边距


负空间(元素之间的空间)对于一个好的设计是必不可少的。空间不仅让元素之间的关系变得更加清晰,还能打造节奏和平衡感。


  • 去掉多余的框架和线条


将一个元素与其他元素分离的最简单方法就是使用框架或1px隔离线。但这并不见得是最好的方法。我看过这样一些设计作品,一个盒子套一个盒子,里面还有几个盒子,并且每个盒子都有自己的1px框架。如果是这种情况,你需要停下来想一想:这真的合适且有必要吗?


现在界面上的卡片已经泛滥成灾了:在线商店中的卡片,动物护理应用中的卡片,交付应用程序中的卡片。有时使用边框是合理的,但是还有其他区分此类元素的方法,例如阴影或间距。最重要的是,卡片之间的空白应该大于卡片内部的空白,如果我们过多的使用边框,就会在视觉上减少卡片之间的空间。而内容才是产品中最重要的部分,所以请不要不合理的减少为其保留的空间。

6.png 

  • 不同的元素距离


边距有助于直观地确定一个元素是否属于另一个元素。让我们以新闻站点上一篇文章的布局为例:假设它由一张图片、一个标题、3-4行预览文本和发布日期组成。标题应该与文本“结合”,构成一个实体元素。日期的边距应比标题和文本之间的边距略大。最后,图片应该尽可能地远离标题文本单元。听起来很混乱?不妨参考一下下面的图片

7.png 

  • 少即是多


总会有甲方或者领导要求我们将所有信息放在一块或一个界面上——无论是标题、电话、菜单、特价信息、还是大大小小的徽标。我不是谈判者,也不能提出一个简单的技巧来使他们改变主意。但至少你可以说:用户一次收到的信息越少,他就越容易采取行动(例如,打电话)。循序渐进的获取信息可以让客户体验更轻松,更愉悦。客户永远都不会费力地解读你的界面布局。而一堆挤在一起的元素不止不美观,更是丑陋的。


  • 屏幕边缘空白不均匀


如果你在制作海报、banner或我们最喜欢的卡片,那么请注意边缘的空白。如果以经典方式(从左上角到右下角)来布置内容,最好让上边距比左边稍大,这样会让你的页面更具吸引力。

8.png 

3.颜色和图片


图像,图标和背景可以传达产品的情绪。图片应该准确地展示公司、APP或网站所提供的内容。


  • 关于Logo的一些想法


虽然我不经常做logo,但在我为数不多职业生涯中还是总结出了一条经验:一个好的logo真的很难做,但只要遵循基本的规则和原则,一个像样的logo还是很容易的。例如,仔细选择颜色。有一次,我看到一家名为“VIP catch”的钓鱼店,上面有一个紫色的标志。紫色和“VIP”这个词的组合并不能真正让人联想到钓鱼。一般来说我们可以为任何行业使用任何颜色,但如果存在明显的脱节,如“XXX VIP Catch”紫色场景,那么最好仔细斟酌一下。


另一个logo提示是:如果你很难把一个图像(一个符号)放到一个标志上,那就不要这样做。试着把它做成一个纯字体的标志,少做一点,做得更好一点。让这个世界少一个印着印章或标着刻度的法律事务所吧。


  • 阴影


物体下的阴影绝对不是黑色的,并且通常具有多个阴影:一个阴影很小且明亮,直接位于阴影之下(如果它站立或躺在某物上),第二个阴影则更加模糊和透明。我们应该避免在项目中出现“脏污”,不自然的阴影。

9.png 

3.色彩和图像


任何矢量图都应该是矢量文件。所有的图表、符号和徽标都应该以SVG格式(用于iOS开发的PDF)提供给开发人员。PNG图标边缘会模糊,看起来很糟糕,尤其是在视网膜显示屏上。此外,矢量图像占用的内存较少。


  • 更多关于图标的技巧


如果你正在为一个网站或App设计一组图标,那么应该确保它们都属于一个“家庭”。这意味着相同的笔画宽度,相同的边框半径。并检查每个图标都适合相同大小的正方形、具有相同的质量。如果一些图标中有圆,请确保这些圆的直径相同。图标应该具有一致的样式。

10.png 

4. 常识


还有一些事情想告诉你,但是我不知道如何对它们进行分类,所以把它们放在了这个部分。


  • 避免奇怪的布局


让我们回到刚才在空间和边距部分学习的新闻预览示例。如果我们将元素(图片、标题、文本和日期)按非常规的顺序排列,可能会造成混淆。所以请坚持熟悉的界面布局。熟悉并不一定意味着无聊,你可以在项目的其他部分展示你的创造力。避免在没有充分理由的情况下将元素实验性地放置在屏幕/页面/卡片上。否则,用户可能会感到困惑,并离开你的产品。记住,设计师和艺术家是不同的职业。在设计中,我们为人们创造了一个产品,这意味着你的个人创作冲动只能在不影响用户体验的情况下使用。

11.png 

  • 布局尺寸和测量


在开始设计移动应用程序之前,务必向开发人员询问屏幕尺寸,这一点很重要。通常情况下,iOS为320px,Android为360px。虽然移动应用程序或多或少清晰可预测,但网站设计可能会面临挑战,因为它将在各种设备上使用。以我作为前端开发人员的经验,以下情况很常见:所提供的布局是为巨大的监视器设计的。块与块之间有400-600像素的空白,巨大的字体,奇怪的网格。幸运的是,我也是一名设计师,我可以通过调整页边距和大小来解决这个问题,使它在任何屏幕上看起来都很好。然而,前端开发人员通常没有设计背景,他们将完全按照提供给他们的方式实现设计。结果,普通笔记本电脑屏幕上的元素会非常大。请注意,笔记本电脑屏幕垂直方向的平均极限约为700px,因此请尝试在此度量标准中加入一个语义块。


  • Lorem Shmipsum


在你的设计中,Lorem Ipsum示例文本看起来廉价且不专业,因此请避免使用它。这只能说明设计师懒得去创造一些像样的内容。此外,我们也无需亲自创建它,Sketch和Figma为我们提供了大量插件。另一个提示:即使只是出于演示目的,也不要重复使用同样的内容。请放置不同长度的不同图片,标题和预览文本。


 以上就是今天分享的所有内容了,关注疯狂的美工官网,每天分享不同设计技巧! 


鲜花

握手

雷人

路过

鸡蛋
上一篇:
ps软件批处理命令的使用方法图文教程.提高工作效率发布时间:2021-10-07
下一篇:
PS修图技巧——芦荟胶产品修图教程发布时间:2021-10-12

阅读排行榜

关注官方微信

开放QQ群

美工5群:1061710658

美工3群:199**044(满

极限词群:951970623

平台简介

六年疯狂 初心不变:从2013年至今我们一直在研究和探索电商设计师所面临的难题最佳解决方案,我们致力打造一款更好用,更实用电商设计师辅助工具,疯狂六年只为做好一件事,以开放共享共赢的心态,更好的服务于广大电商设计师。
by:疯狂的美工电商设计师学习交流平台

手机版- 疯狂的美工 |网站地图

赣公网安备 36070202000375号

Powered by Fkdmg.Com © 2013-2021    赣ICP备18006944号-1