UI知识,层级对UI设计结果的影响

2023-10-30 17:17:09 来源/作者: / 己有:1人学习过

任何设计都应该有它存在的理由。很多同学在设计练习的时候都无法确定设计命题,信息层级划分,操作的层级划分,甚至觉得命题练习很迷茫。所以今天我就带领大家一起分析一个实际已经上市的产品的UI样例。帮助大家分析UI信息中的必然因素。

 

我今天查看天气的时候打开了一款天气app

 

UI知识,层级对UI设计结果的影响

 

UI知识,层级对UI设计结果的影响

 

很多人应该对这款app都很熟悉,我们首先可以看到,这款软件是可以横竖屏自动适应的。从构图比例来说,这款软件是以竖屏作为主要显示模式的。在竖屏的情况下,观看效果最佳。

 

我们先不谈层级问题,我们先来浏览一下完整的信息。

 

UI知识,层级对UI设计结果的影响

 

下拉信息框以后,这里出现了一个商用ui不应该犯的错误。

 

UI知识,层级对UI设计结果的影响

 

当信息全部下拉到底的时候,信息上边缘有一排未显示完全的文字,漏边了。这个琐碎的文字边角,破坏了整体的UI视觉完整性。

 

其实这个缺陷是可以避免的,只需要在程序上调整一下文字距离

 

(这种ui中的错误,其实不算多,但是也不算少)

 

因为这个软件,在横竖屏上都需要自适应尺寸,所以取的是一个平均距离,理论上,ui人员在检查UI的时候,是可以让程序人间进行修正的。

 

UI知识,层级对UI设计结果的影响

 

横屏的下拉信息也是不完整的。这种问题跟上面一样,都是可以通过程序坐标修改间距的。

 

那么这个问题严不严重呢?其实这就很主观了。因为可以拖拉的面板,除了最上和最下位置,它其实还有很多手动的中间位置,不可能保证所有信息的视觉完整性。是可以通过程序调整,让信息看起来更完整,但是这所花费的时间,精力,成本,和所获得的用户体验之间的性价比,那只有研发人员才能去权衡了。

 

下面我们来看一下操作栏。

 

UI知识,层级对UI设计结果的影响

 

最上面的按钮是添加城市,这个按钮几乎没有多少可操作性,除了第一次打开软件设置它以外,可能出差旅游,会点按几次。