优艾设计网

基础知识,分享常用的对齐技巧

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:Micu设计
对齐与间距,无非左右上下的关系,怎样才能让符合用户的视觉感知呢?芸芸众生,红尘滚滚,有幸让他(她)瞄上一眼,留下个“很舒服”的第一印象,非常重要,而且在实际设计的流程中,如果经常因为哪里没对

在对齐的方式里我们找到了规律,层级关系,框框框!

通过对其方式来区分内容的层级关系,这就是隐形对齐框的作用。将信息层级通过这种方式罗列在用户眼前。让用户最近视角展示产品的核心信息。提炼出用户在场景中最为关注的诉求,解决用户的问题。

基础知识,分享常用的对齐技巧

对齐也是有层次的。有左对齐、右对齐、居中对齐。(都懂都懂,就是用不好)左对齐和右对齐主要是对屏幕内容的规整性,居中对齐则是对内容文本的划分。

三、常用间距

基础知识,分享常用的对齐技巧

将框框框融入到APP界面中,将主要的,用户想找的内容突出出来。

在设计中一般间距设定的大小单位10px,这样更容易统一整个画面的一致性。

基础知识,分享常用的对齐技巧

在界面中常用间距来划分内容的层级关系,让内容与导航取分出来。

在导航上的左右间距是20px,而在内容列表信息程序时左右间距调整到了30px。

通过这种方式区分了上下层级的关系。

那么在主文本信息中还将上下间距统一一致都设定为30px,使整个内容的边框看起来更为整体舒服。

我们常会设计到双行文字的列表,QQ的设计是120px,随着设备屏幕的变大,更加注重了页面的留白。为了加强内容的突出性。我在设计中高度设定为130px

基础知识,分享常用的对齐技巧

再往深的走,界面中还会有其他的信息。如时间、消息气泡等。它们的对齐模式会根据字号大小进行控制。

为了保证内容阅读的舒适性,字号大小不一致的文本我们还会用到居中对齐的方式(比如,上图中的主标题和时间的对齐方式),让内容显得更为规整。

总之,以内容为中心的设计能让用户快速找到想要的。使用正确的对齐和间距,能让界面更为整齐,信息更为明确。

今天就到这里,休息休息,休息一大会儿,然后多看多分析,多交流。

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消