如何让界面更精致?收下这2个实用技巧(上)

深圳/UI设计师/3年前/474浏览
如何让界面更精致?收下这2个实用技巧(上)

断断续续的花了几天时间,终于把第一篇原创文章给整理好,在这里真心实意分享给大家关于我自己在实战项目中的一些总结。

今天想和大家聊聊在界面设计过程中,如何让界面设计看起来更加精致有细节?

希望可以帮助到刚入行或者想提升设计质感的小伙伴们,话不多说,家人们,咱就开整吧!


本文会围绕这2个小技巧,并结合实战项目案例,仔细展开来说:




1.对比原则


那在什么情况下会用到对比原则呢?当一个界面中内容繁杂,需要重点突出某个功能模块的内容时,我们可以利用对比原则,制造焦点,去吸引用户眼球。


结合我曾做过的项目案例来讲下:

懒人畅听APP中任务中心页的设计,当时是在现有的模块中增加了一个每日收听领积分的功能,需要去做重点突出。




如果遵循已有的设计规范卡片标题样式,页面搭配起来略显生硬。通过标题字体的设计对比文字颜色对比下,让页面整体使之看起来更加和谐,同时也拉开了模块之间的视觉层级关系。


有时候在设计过程中,也可以从固有的规范中跳脱出来。

该页面已上线,有兴趣的小伙伴可以下载懒人畅听APP进行体验哦!




前方重点来了,记得拿好小本本记下来!!!!

这里的标题文字是经过二次再设计的,有小伙伴就会问了,我从来没做过字体设计,我不会设计怎么办?


那么方法不就来了嘛!

👇👇👇👇👇👇👇👇👇👇👇👇👇


我们先找到一个合适的字体,作为基础字体形状去做调整,可做连笔画等一些细节处理。



有需要的小伙伴,可以自取

字体安装包资源:https://pan.baidu.com/s/1jwks0q8U1_SWLyUDWy1vNg

提取码: l328

注:该字体不可免费商用




2.亲密性原则


可以理解为:将相关的项组织在一起,通过物理位置的亲密关系,快速判断哪些内容是属于一个组织单元的。


用一个简单的例子来阐释这个概念,在一个页面上,物理位置的接近就意味着存在关联。




当我们看到这3个形状时,这3者之间有关系吗?




现在,这2个矩形的亲密性告诉我们,他们之间存在关系,在页面上也是同样如此。




来看看下面这个文章列表的布局,读完文章标题你接下来会看什么呢?现在作者和文章简介都是黑体,你要从哪里开始看呢?,也许你会在这些黑体字之间看来看去,是否会觉得没有一个视觉引导呢?



图片、标题、副标题、说明文字等占据着每一个角落,没有一处留白的,每一块空间都填充的满满当当。

这种设计也比较常见,认为手机屏幕寸土寸金,每一处都不能浪费。但殊不知,当我们这样设计的同时,给用户造成了一定的阅读负担。



如果把类似的元素组织为一个单元,马上会带来很多变化。首先,页面视觉上看起来会变得有条理,阅读起来更顺畅。




通过简单的色块布局,更加直观的看出对比





最后总结:


想要提升页面设计的精致感,一些细节上的设计必须要关注到,首先要把各个模块的基础元素做好,才能逐步完善页面的整体,让页面看起来更协调、更精致!


以上讲的提升设计质感的使用技巧,只是涉及到部分内容,后续会陆续慢慢补充,如果大家觉得有收获的话,记得点赞、收藏起来哦~

                                                     

原文链接:https://mp.weixin.qq.com/s?__biz=Mzg2NTYzMDU1MQ==&mid=2247483666&idx=1&sn=5f959219cc3fb1480f3ddaaf6aa0ee69&chksm=ce56612af921e83ca2780106ff0a33b4d35c9a6e28fab97a378b8ac789980d619866a53966e3&token=1309470771&lang=zh_CN#rd

7
Report
|
4
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Log in