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

2023-12-23 17:24:57 来源/作者: / 己有:1人学习过

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

二、解构分析

有对齐的意识,也进行对齐,但为什么不够高大上呢?设计出来的效果怪怪的……

一般设计师会这样设计,大感觉上也没有什么问题。(下图)

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

其实对齐也是有规律的,善于发现设计中的联系。

我们来看一下其他几个用户体验不错的输入框设计,凭啥就这么舒服呢?和大家解构一下它们的设计。

小米的登录页。

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

在小米的登录页设计中,主标题与副标题进行了左对齐。

输入框提示文字与输入框基于中心线对齐,让提示信息和输入框看起来更为整体舒服。

内容划分明确,明确了哪些是需要输入的,哪些只是描述。

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

苹果的登录页

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

在苹果的登录页面中更为讲究,标题和输入框利用了不同对齐方式拉开了层次。

请登录标题和取消按钮是左对齐的,而输入框与提示文字则是居中对齐的。

将用户的视线引入到了输入框的上面,从而加强了提示文字与输入框之间的关系,并用大间距拉开了标题和内文的层次。

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

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