飞特网 顶部通栏广告

UI界面设计中的层次结构基础教程

天堂鸟发布于:2020-6-24 14:21 |原作者: 美腻腻nii
简介: 界面设计中经常遇到的问题是过多地使用了分散在屏幕上的元素或组件,如果未按正确的层次放置这些元素或组件,则会导致混乱并增加导航的工作量。对这些元素进行优先级排序对于避免此问题很重要。 ... ... ...

版权申明:本教程出自“美腻腻nii”原创,感谢“美腻腻nii”的原创教程分享!

UI界面设计中的层次结构基础教程 飞特网 UI设计教程

FEVTE编注:更多UI设计欣赏和UI设计作品交流、UI设计学习请访问飞特网UI设计栏目,地址:https://www.fevte.com/shejixinshang/UIsheji/

公平等级是用户按重要性处理信息的顺序。在界面设计中,就像任何其他形式的设计一样,此概念对于在视觉上起作用是必要的。通过正确使用层次结构,头脑可以对元素进行分组和优先级排序,以赋予它们特定的顺序,从而有助于您理解要交流的内容和用户的成就感。

界面设计中经常遇到的问题是过多地使用了分散在屏幕上的元素或组件,如果未按正确的层次放置这些元素或组件,则会导致混乱并增加导航的工作量。对这些元素进行优先级排序对于避免此问题很重要。

UI界面设计中的层次结构基础教程 飞特网 UI设计教程

在此示例中,大小,形状和颜色资源用于将视图定向到特定元素

一般用户倾向于"扫描"屏幕的整个内容。因此,重点应该清楚地说明网站或应用程序的内容。

这种优先次序不仅应被视为美学问题,而且应被视为用户体验的重要组成部分。其中包括的许多元素(尤其是在移动设备中)将与站点导航相关。尽管图形设计中的层次结构已经存在多年,但恒定的交互因素已添加到UI设计中。用户与元素交互的事实使设计直观的界面更加相关。

创建正确的层次结构必须考虑七种资源:

尺寸

元素越大,越会引起注意。人们首先看到较大的物体是事实,其中包括文本和图像。使用大小层次结构背后的想法是为开始视觉之旅提供一个焦点。

UI界面设计中的层次结构基础教程 飞特网 UI设计教程

在Google Arts and Culture应用程序的此快照中,标题" Pawtraits:我们的不断变化的……"的大小比副标题"我们的真实感受……"大得多。通过将这些分数分开,阅读顺序可以避免任何混乱。

如果从一个文本到另一个文本的跳跃较小,例如从32pt到24pt,则当同时发送两条消息时,阅读顺序将变得更加困难。这可能不是一个大问题,但是您应该记住,这可能会创建效率较低的层次结构。

同样重要的元素太大也没有必要。造成不必要的失衡可能最终使其他设计黯然失色,并使其他信息在阅读中丢失。像设计中的所有其他内容一样,平衡是关键。

颜色

明亮的色彩比柔和的色调更为突出。颜色是一种强大的视觉资源,它的正确使用可以有效地将屏幕中的元素分开,以对它们进行优先排序或降低优先级。在界面设计中,通常最强的颜色是用于交互,因为用户需要采取措施或从系统接收反馈。

UI界面设计中的层次结构基础教程 飞特网 UI设计教程

在此Cabify应用截图中,紫色的使用是主要颜色。行程路线和"继续"按钮均为第一层级,其次是地图和汽车。色调和饱和度的谐波使用将这些元素与较不饱和且重要性较低的背景分开。

有三种使用颜色创建层次的方法:

色相

某些颜色优于其他颜色。色调会为人的视力造成几种冲突,红色与绿色,蓝色与黄色或绿松石与棕色会产生冲突。

饱和度

饱和色比灰色更突出。灰色及其标度总是倾向于饱和度高的颜色,这甚至给用户带来更亲近的感觉。例如,在灰色背景上使用红色。

亮度

明亮的颜色比深色的颜色突出,反之亦然。在深色背景上使用明亮的元素会立即建立层次结构,当我们拥有白色背景和一些深色元素时,这也适用。

重要的是要知道,滥用颜色会最终使用户感到困惑,因为这会产生一种幻觉,即一切对构图都很重要。另一方面,等级制度的思想始于将自己定位于最相关的事物而不是最不相关的事物。

接近

彼此靠近的元素比远处的元素吸引更多的注意力。创建阅读顺序时,使用距离进行分组是非常可行的资源。人的视觉倾向于对元素进行分类,因此,使这种粘合基本上有助于用户的脑力劳动。

UI界面设计中的层次结构基础教程 飞特网 UI设计教程

在Netflix主页上,第一组包含电影的标题和简介。第二组在最下面列出了六部电影。这些组之间的距离使视图更容易从一组传递到另一组而没有视觉噪音。同样,它们各自组中的每个元素都有其自己的填充和边距。


12下一页
2

好评

差评

刚表态过的朋友 (2 人)

天堂鸟
北京市 怀柔区 
+ 关注 私信
  • 汽车修图教程(一)商业广告级汽车修图教程
  • 汽车修图教程(二)快速调整汽车照片色调
  • 汽车修图教程(三)快速提高汽车照片质感教程

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业

本周热点文章

关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 移动版| 飞特网