新手UI设计师的进阶秘籍

295天前Publish
本文针对新手UI设计师,浅谈对提高页面精致度的几点小方法,希望能对你们有所帮助

很多时候,新手UI设计师设计的页面,从精致度方面来讲往往不如经验丰富的UI设计师,相信很多刚入门的设计师都会很苦恼怎么提高精致度;没有经验也没有老师带,根本不知道问题出在哪里,常常因此而焦虑不堪甚至自我怀疑......


那么新手UI设计师如何进阶呢?这里针对提高页面精致度提供几个方法,感兴趣的可以看看,方法大纲如下:

一、检查页面排版是否有问题

二、对页面的图标和配图进行分析

三、色彩运用是否合理

四、画面是否平衡



一、检查页面排版是否有问题



1、页面排版是否符合网格系统(也叫栅格系统)


网格的划分对于页面的排版起到很好的指导作用,可以很好的帮助页面规范,让页面布局更有秩序和清晰,多人协作的情况下能保持页面的一致性和统一性。

以网易云音乐为例子,他使用的是8px、12列网格系统,在下图中可以看到,无论是顶部元素、其他模块入口、视频卡片等,都由网格串联起来了,使他们不再是独立的个体,阅读起来更顺畅。



2、排版是否符合设计的四大原则


四大原则指的是亲密性、对比、对齐与重复原则,这里推荐大家阅读书籍《写给大家看的设计书》,里面有对各原则的详细解析。



  • 亲密性原则

亲密性原则即页面元素同类相近、异类相远,互相接近的元素比互相远离的元素更有成组的可能。


亲密性原则可以帮我们让页面内信息的排布疏密得当;元素与元素之间的亲密关系既符合逻辑又满足视觉感知;内容有节奏感,同时也提高了浏览时获取信息的效率。



  • 对齐原则

对齐原则是指任何元素都不能在页面上随意安放,每一项都应当与页面上的某个内容存在某种视觉联系。实现对齐原则的方法:借助一条明确的对齐线,并坚持以它为基准。



  • 对比原则

对比是为页面增加视觉效果最有效的途径,也是建立层次结构最有效的方法,为用户快速识别关键信息、突出重点信息。使用对比原则要记住一个重要规则:对比需要强烈,重点信息与次要信息的视觉占比一定要明显,重点信息视觉占比一定是远大于次要信息的视觉占比的。


对比突出的方法,不仅是强化重点项,也可以是弱化辅助项。



  • 重复原则

重复原则指出,设计的某些元素需要在整个作品中重复,重复元素可以是一种粗字体、一条粗线、某个项目符号、颜色、设计要素、某种格式、空间关系等。

相同元素在页面内重复,可以有效降低用户的学习成本同时也能高效帮助用户识别他们之间的联系。


小结:亲密性、对比、对齐与重复四个原则相辅相成四个原则相辅相成,通常来讲一个页面不会只使用一种原则,而是多种原则组合使用,以达到更好的视觉效果。




二、对页面的图标和配图进行分析


图标:风格是否一致,视觉大小是否统一,图标内的间距是否合适,若是瓷片区的图标需注意是否有细节、丰富度等。


配图:检查配图整体的调性是否和整个页面的调性一致,主体是否足够突出,banner的辅助物远近、大小是否合适,标题文案是否跟配图融合等等



三、色彩运用是否合理


颜色风格是否统一,比如整个页面的色相、明度、饱和度是否有问题,画面配色最好使用631法则(60%主色、30%辅助色、10%点缀色),色彩的饱和度也需要控制,太高会很刺眼,太低又容易显脏。



四、画面平衡


平衡是影响页面精致度的重要元素,具有平衡感的页面,会让页面更加的赏心悦目,使用户更高效的获取信息并与产品进行交互。


平衡可以是绝对平衡也可以是相对平衡;


绝对平衡就是我们常说的对称,它以中轴线为基准,各元素在大小、形状、排列上具有相对应的关系,从而构成平衡的状态。


相对平衡是一种打破对称的平衡,它不像绝对平衡那么有规律,但却是更有活力和视觉冲击力,在吸引眼球的比拼中会更胜一筹。



总结


当设计遇到问题时,不管是设计过程中还是设计完成后,都可以按以上说的方法来检查一下,希望能对你们有所帮助,一起进步吧💪💪



13
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
深圳 | 设计爱好者
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹