您现在的位置是:ui设计学习网,www.zhongchuang520.com > UI设计教程 > UI设计教程

【ui设计干货分享】如何提高UI界面设计的细节?

2021-01-21 15:31UI设计教程 人已围观

简介一.使用颜色阴影构建层次结构。 在控制UI文本样式时,最常见的错误是过多地依赖字体大小差异来产生对比度。仅使用字体大小对比,创建的对比是不够的,请尝试将颜色和粗细结合使...


一.使用颜色阴影构建层次结构。

在控制UI文本样式时,最常见的错误是过多地依赖字体大小差异来产生对比度。仅使用字体大小对比,创建的对比是不够的,请尝试将颜色和粗细结合使用

以创建更好的对比效果。

每种颜色都有视觉上的分量,这有助于在内容中建立层次结构。当使用色调时,元素被赋予不同的重要性。

如果可以的话,甚至可以使用两种或三种颜色:

主要内容使用深灰色(例如标题,但不要使用纯黑色);使用灰色作为次要内容(例如产品介绍);使用浅灰色作为辅助内容(例如发布日期);

同样,在用户界面设计中,通常使用两种不同的字体粗细即可产生出色的层次感:

大多数文本使用正常的粗细(400至500,具体取决于字体)。对于需要强调的文本,请使用较重的字体(600至700,具体取决于字体);

主标题的权重为600,其他带有绿点的文字的权重为400

您应该尝试使文本不小于400,因为字体的这一部分本身已经很小,而小于400的字体将导致可读性差。

如果仍然需要减轻字体的重量,则可能需要使字体更轻一些,或者用识别力更强,重量相对较小的其他字体替换它。

灰色文本应在无色/彩色背景下分别处理:

请勿在彩色背景上使用灰色文字。在白色背景上,将黑色文本变为灰色(或在黑色背景上使用灰色文本)是淡化视觉效果的好方法。

但是在彩色背景上,如果要降低背景色的对比度,通常有两种方法:

一种是减少白色文本的不透明度;另一种是使文本逐渐接近背景颜色,而不是变成灰色。

设计师的工作信息在左侧是白色文本,透明度降低,而右侧的高光色调和颜色与背景相同

其次,当涉及长格式内容时,大胆的深色字体会给人以沉重和跳跃的感觉。通过选择深灰色(4F4F4F)这样的颜色可以使文本更易于识别,可以轻松解决此

问题。

二、统一色调

选择一种基本颜色,然后调整颜色的色相和深度以增加平衡;避免在设计中使用过多的颜色。如果您的项目允许,只需使用固定的调色板,调整基本颜色的

饱和度和亮度,就可以使用这种简单的方法来提高设计的一致性。

三、干净的阴影

Shadow是用户界面设计中最常见的视觉表达技术。您可以增加元素的深度,使其从背景中脱颖而出,吸引用户的注意力,还可以改善图像的视觉层次。

与使用各种模糊阴影和模糊阴影相比,使用细微的垂直偏移阴影更为明显和自然。模拟光源的最常见特性以及由上而下的光所产生的阴影效果。

这种柔和的阴影看起来很干净,并增加了图像的柔和度。如果阴影范围太小或颜色太暗,并且位置没有偏移,而是聚集在元素周围,则图像将更平坦且更具

视觉效果。它变得沉重,显示出原始的图像感觉。

阴影不一定是黑色的。还有一个扩展阴影,它是投影到背景上的模拟元素本身的颜色。由于阴影与物品的颜色一致,因此呈现出非常和谐的图像。

在用户界面设计中,不应过多使用此技术,否则呈现的各种颜色组合将令人赞叹。

四、个性的图标设计

熟练的设计师可以绘制具有统一样式的图标,而好的设计师可以创建具有独特样式的图标。

我们可以在寻找相同尺寸,圆角,一致的线宽和一致的颜色的同时,为您的视觉表达增加更多创意吗?例如,以下一组图标设计在图形创新和色彩匹配方面

均显示出无与伦比的创造力。

标签栏在应用程序的全局导航中起着至关重要的作用。它的设计会影响整个产品的视觉风格。

通常大多数应用程序使用标准的iOS布局样式(默认为灰色,选择填充标记颜色),这种布局太普遍,太普遍;如果您希望标签栏图标的设计精美且充满个

性,则可以丰富每个选择。状态图标的视觉效果(例如向图标中添加背景和表情)既生动又有趣,并且还增加了用户的好感,给人们留下了深刻的印象。

3D图标设计是近年来流行的趋势。它看起来非常精致美丽,但是长时间观看会引起轻微的眼疲劳。同时,由于结构复杂,将增加用户的认知成本。它通常用

于带走食物。在此类应用中更常见。

五、Tab的设计感


Tab是应用程序设计中最常见的控件之一。它源自“材料设计”规范;现在,许多iOS产品也开始使用这种样式的导航栏进行设计,这种导航栏原本属于iOS规范
的一部分,选择器已经不那么普遍了。

在视觉表示方面,选项卡和选项卡栏也分为选择状态和未选择状态。它的设计相对简单。通常,一组文本标签用于通过颜色或在标签下方添加小条来区分两

者。由于其简单性,颜色的设计越困难,就必须在设计中发挥很大的想象力,并摆脱设计规范的限制,以找到理想的解决方案。

例如,“ Xiam音乐”选项卡的选定状态是音频波形线。通过比较文本大小,可以创建一个标签,该标签设计丰富并且符合产品的特性。

我们还可以从品牌的基因中汲取灵感。品牌是用户熟悉图像的绝佳来源。

从品牌形象中,提取出具有独特气质的视觉富人作为Tab选择的小条,从而建立了视觉联系,并使用户从内而外拥有一致的感觉;例如,Mafengwo品牌形象

中的笑脸和苍蝇符号猪旅行品牌形象中的猪头扩展到标签设计,这不仅使界面在视觉上独一无二,而且它还进一步增强了用户对品牌形象的认知。

六、无框设计 去繁从简

在UI设计中,有很多装饰元素,例如卡边框,列表分隔线等。尽管边界和分界线是分隔两个元素的好方法,但这并不是唯一的方法。降低整个设计的设计

感,或多或少会干扰用户的视线,并使信息内容失去注意力,因此可以减少不必要的装饰元素。

我们可以通过以下方法对元素的视觉层次进行划分,以使图像干净整洁:

1)使用阴影
阴影还可以产生边界感觉,并且比边界分界线更微妙,并且不会显得突然,不会分散用户的注意力,并使内容更加集中。

2)使用不同的背景色来区分

通常,相邻元素的背景只需要有细微的差别即可使人们区分它们。因此,您要做的就是在不同区域使用不同的背景色,并尝试删除分界线,因为这根本没有
必要。

3)添加额外的空白
在元素之间创建分隔效果不一定必须由线框表示。只需添加一个空格将它们分开。通过空格和空格对元素进行分组是UI设计中的一种常用技术。

七、统一设计元素

每个应用程序界面都有许多元素,并且那些相似的元素应保持统一的设计风格。

通常,个人中心的标签栏图标是代表用户的人体轮廓,因此可以继续在显示用户头像和图像的界面中使用。

如果图形具有独特的外观(例如椭圆矩形),它也可以用作一种视觉符号,可以在其他界面中延续并成为图形或按钮的外观。这样,整个界面通过统一的设

计元素连接,始终为用户带来统一感。

八、符合产品气质的字体

选择与产品气质相符的字体,这些字体可以与产品的位置保持一致,并向用户传达正确的情感意识。

尽管默认字体可以满足大多数应用程序的设计要求,但仍存在一个问题,即——系统字体的通用性没有特征,并且在某些特定情况下似乎影响不大。例如,

它更适合运动应用。斜体字表示力量,爆炸性和速度感。切换到系统字体后,整体感觉变得很弱。

九、第三方图标风格统一

大多数应用程序支持第三方登录,这可以减少用户注册的时间成本。

第三方图标条目通常显示在注册主页的底部。这也是设计师经常忽略的内容。它们通常直接适合第三方图标的大小和整齐的位置,而无需重新设计它们;精

美的设计该应用程序不应遗漏任何细节,我们可以根据自己应用程序的图标样式来优化第三方图标设计。

十、图片中寻找色彩

应用程序的精美图形设计可以为用户带来视觉享受,这非常重要。我们经常看到文字的设计风格叠加在图片的背景上;为了减少文本中复杂图像背景的干

扰,通常的做法是覆盖半透明的黑色蒙版,以使白色文本清晰可见,但这不是最好的方法。

我们可以从图像中提取主色,并将其用作重叠背景的填充色,这样文本,色块和图像就会融合在一起,从而使图像变得高级且设计丰富。

十一、提高图片质量

图像质量会影响整个应用程序的样式和用户的心情。高质量的图像使人们获得愉悦的观看乐趣并创建漂亮的关联,而低质量的图像将立即降低应用程序的质感。

在应用程序设计中,必须对漂亮的图像进行裁剪和调色,然后才能从收藏到在线使用。即使它是正常的产品图像,除干净的图像外,我们都将其裁剪并调整

为均匀的尺寸。背景可以立即增强产品的美感,界面视觉也将变得美观整洁。

十二、卡片式设计

在当前的用户界面界面设计中,卡设计已经是一种非常普遍的设计形式,它有利于信息的重叠和集成,划分出更清晰的组织结构,简化了处理过程复杂的内

容并改善空间的使用。同时,名片设计通常严重依赖视觉效果。强烈的视觉效果是名片设计的优势,也是提高设计质量的好方法


如果你觉得本站还不错,可以通过扫码支付打赏哦,感谢!

站点信息

  • 干货分享323篇文章
  • 快速导航网站地图
  • 微信公众号:扫描关注我们,领取更多学习资料