当前位置:首页>ps入门教程>ps基础教程>设计知识>教程内容

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

来源:站酷 作者:铁木士 学习:2221人次

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!