【UI设计】教你提升UI界面质感的小技巧

2021-04-12
3919
0

在工作中大家有没有听到过这样的声音:你这个设计挺好的,但是呢......不够高级……”,是不是当场炸裂?想死的心都有了!

 

 

下面我会给大家分享几个小技巧来提升高级感~

 

1.强化结构层次

 

在设计领域,相较于平淡无奇毫无重点的界面设计,具有良好视觉层次结构的设计更受用户青睐。视觉呈现上要突出 信息 / 模块 之间的逻辑关系,我们所听到的:”有点单调“类似的声音其实都是层次弱的体现。

 

 

 

 

对于设计师而言,可以通过技术手段对于页面中的信息/模块进行优化调整,使画面变得饱满,分为以下几个维度:

 

a. 文字层级区分(大小、字重、颜色)

 

在一倍图下大字重标题的字号可以提升至32pt,这种强烈而低频率的对比更具有层次感。举个🌰,虾米音乐和Appstore的大字重标题让页面对比更加强烈,更具有引导性:

 

 

如果当前页面的文字层级过多,通过字号大小不足以清晰的区分层级时,可以采用颜色深浅或者文本加粗的方法,举个例子:

 

 

b. 图标轻重区分

 

如果在次要功能上使用了较为复杂的图标,而重要业务入口反而较为简单的话也会让页面的层次感出现问题。图标层级分为两种「基于风格区分」、「基于色彩区分」:

2.无边无界的视觉美感
所谓无边有界说的也就是:通过 间距 / 背景色 自然形成模块达到效果。虽然日常工作中大家可能会被要求在页面上尽可能多的塞满各种元素和模块,美其名曰可以节省空间,但是其实这样是相对保守的做法。太多的元素会让用户get不到重点是什么,同时信息也未必会聚焦。有两种方法可以帮助大家解决这个问题:
a. 用增加间距来区分模块
现在的设计趋势倾向于大的留白让页面更有“呼吸感”,一般一级页面较为复杂,信息与模块比较多,所以留白可以更好的让用户获取到信息。
b. 用背景色区分相邻元素
在实际设计场景中,只要很微妙的差别就可以使用户明了模块之间的关系,分割线的存在其实有很大程度上会影响视觉效果,所以我们可以用浅灰色背景进行区分,如下图:
3.设牢记计原理
每个品牌都有属于它的经典款,比如converse的Chuck Taylor All Star是它最经典款式之一。
相信大家自从接触产品设计以来就被各种原理所洗礼,格式塔原理、奥卡姆剃刀、希克定律等等,就是一个字:超好用!
所以我把它们看作产品设计相关理论的”经典款”,在这里举一个例子:
设计的成长必须要经历的三个阶段,第一个阶段时无章法的感性,第二个阶段是有章法的理性,第三个阶段时有章法的感性,所以只有透彻的懂得设计规则才可以在其基础上进行创新尝试:
4.打破常规设计破局 
“灵魂出窍”的banner/人像
在设计中,可以考虑破局排列,这样的做法更加能突出主体吸引用户点击,使枯燥的页面增加一丢活力:
5.适当运用毛玻璃效果
毛玻璃效果模仿了亚克力材质,使用背景模糊制作出磨砂玻璃的效果并且漂浮在空间中,通过前后关系表现层次感,这是注重 空间感 的典型特征,意味着这种风格有助于用户建立界面的层次结构和深度。
以上是毛玻璃的优缺点,它运用是克制的,下面举几个可以落实在产品中的例子
在界面设计中,动效已然变成一个趋势,优秀的动画效果可以为界面添加惊喜感,让用户对其印象深刻。
a. 附属动作
在 UI 界面当中,辅助动作可以让主要的动画效果更加突出。这些元素在需要用户反馈的地方,显得非常有用。
b. “招牌动作
动效的设计可以巧妙的融入品牌元素,这样可以加深用户对产品的印象,形成APP的专属符号。最常见的设计是在下拉刷新loading上下功夫:
当缺省页呈现在用户眼前时,我们最常规的做法就是乖乖告诉用户当前是什么状态 具有识别性的表意插图。
但是,现在已经2021年了,我们可以把缺省图设计的再大胆一些,可以结合产品的性格IP形象来延展,并且缺省页的设计不拘泥于中间一小块空间,可以把整个屏幕当作画板进行设计。
转载声明:文章来源于网络,不作任何商业用途!
免责声明:本文内部分内容来自网络,所涉绘画作品及文字版权与著作权归原作者,若有侵权或异议请联系我们处理。
收藏

全部评论

您还没登录

暂无留言,赶紧抢占沙发
王氏教育是国内专业的CG数字艺术设计线上线下学习平台,在王氏教育,有原画、插画、漫画、影视、3D模型等培训课程,也有学习资源下载、行业社区交流。CG数字艺术学习,来王氏教育。
绘学霸iOS端二维码

IOS下载

绘学霸安卓端二维码

安卓下载

绘学霸微信小程序二维码

小程序

版权声明
本网站所有产品设计、功能及展示形式,均已受版权或产权保护,任何公司及个人不得以任何方式复制部分或全部,违者将依法追究责任,特此声明。
热线电话
18026259035
咨询时间:9:00~21:00
在线客服
联系网站客服
客服微信:18026259035
公司地址
中国·广州
广州市海珠区晓港中马路130号之19
绘学霸客户端(权限暂无,用于CG资源与教程交流分享)
王氏教育 王氏教育