深圳是个海纳百川十分具有包容性,飞速发展的一线城市,各种各样各行各业的企业都在这里落脚发展,对于专业的UI人才需求更甚。那么,在深圳ui学习到底需要掌握什么呢?专业ui设计师需要有哪些能力呢?
今天,跟大家讲解关于,如何增强UI设计的原则和元素?
1.点、线和形状
许多UI组件都使用设计的基本元素:点、线、形状。
点:点可以称为圆形标记,也称为点。点被视为其他所有元素(包括线条,形状,图案和纹理)的基础。
线:线定义为点(点)沿曲面的连续运动。基本上,当两个点相互连接时,它们形成一条线。线条可以有多种类型,可以传达不同类型的情绪和信息,具体取决于它们的结构和使用方式。这些包括:
粗线(强/重点)或细线(弱/精致)
直线(刚性)/ 弯曲(流动性)/ 对角线(能量)
形状:由实际的或隐含的线条限制的空间。这样,可以说线构成了形状的基础。
如前所述,许多UI组件实际上是由简单的形状组成的,这些简单的形状又是根据线条和形状形成的。
一个简单的示例如,音量滑块,音量滑块通常被视为一条直线,而圆圈通常被用作音量调节器。其他示例包括窗口,搜索栏和图像轮播。
点,线,形状,UI元素
2. 对齐
对齐是UI设计的核心基础之一,因为它可在任何界面中提供有序感。诸如文本和按钮之类的元素在整体上可以正确对齐,往往会给人一种专业的感觉,而随意放置UI元素或未对齐的文本通常会被认为是草率的,因为缺乏结构。
好的vs稍微好的对准
假设有一个网站,它的文本被随机排列在网站上。它只是让用户很难找到信息,因为用户用眼睛扫描信息缺乏结构。
3.层次结构
当设计中存在不同的元素时,与其他视觉元素相比,你更有可能具有要传达给受众的元素或消息。这样,将需要更多的权重以强调该元素或消息。
这可以通过不同的方法来实现,例如加粗或放大文本,或者只是将其放置在比其他信息更高的位置。
从逻辑上讲,用户倾向于阅读显示在主页或首页上的信息,而可能不会阅读位于垂直滚动的长页面底部的信息,或者深埋在网站几个页面中的信息。
好的与坏的层次结构
从上面的示例中可以看出,不良示例中的消息权重比作者的文本权重低。除此之外,与消息相比,作者的文字比信息要大。这会将页面的焦点转移到作者而不是消息上,而消息是要传达的主要内容。
4.对比
与层次结构类似,对比度将重点放在界面的某些元素上。这是通过使两个元素具有彼此不同的特性(例如,亮与暗,薄与厚)来实现的,将用户引导到页面的最重要方面-增加了界面内信息的整体组织。
好对比差
对比度在显示文本时特别有用,因为与背景形成良好对比度的文本会增加界面的整体可读性,如上例所示。可读性的提高将增强用户理解界面中显示的信息的整体能力。
5.邻近度/空间
邻近度是指页面中的相关元素如何被分组在一起,无论是关于位置,还是简单地就诸如颜色,大小,类型等特征而言。理想情况下,信息看起来都不应太杂乱,因为这将导致一次显示太多信息,进而会导致信息显示过多迫使用户一次消化太多信息(或者无法消化大量信息)。
好与坏的接近
从上面的示例中可以看出,在好的示例中,文本排列得更均匀,而在不好的示例中,文本彼此之间的距离太近,从而降低了文本的整体可读性。由于文本在每一行中的间距也更大,因此用户的眼睛有更多的“呼吸空间”可以快速浏览文本。
6.颜色
在界面内使用不同的颜色将允许创建者传达不同的消息。不同的颜色带来不同的情感和信息。例如,由于红色在色谱中具有很高的强度,因此红色通常带有情绪化和愤怒的特征,而蓝色则倾向于带来更多的平静和消极的感觉。另一方面,绿色与环境有关,而黄色与能量和乐观有关。
通常,由于其高强度,倾向于避免使用诸如红色之类的明亮颜色作为背景,从而在明亮的光线下使用户的眼睛疲劳。
深红色vs静音红色:请注意,与静音红色相比,深红色在观看时在眼睛上更费劲。
因此,许多应用程序现在都采用深色背景(也称为“夜间主题”功能),这会将应用程序切换为深蓝色或黑色背景。当用户在夜间(昏暗的环境中明亮的光线)使用应用程序时,这些颜色不会让眼睛感到费劲,从而增加了应用程序的整体可用性。
除此之外,大多数界面还可以使用在色标/色轮内彼此相邻的颜色(类似),或彼此相反的颜色(互补色)。
想要进一步系统掌握编程的技术点,但是又找不到靠谱的视频教程,也可以留言跟我索取哦!
领取专属 10元无门槛券
私享最新 技术干货