优艾设计网

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

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

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

二、解构分析

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

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

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

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

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

小米的登录页。

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

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

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

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

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

苹果的登录页

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

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

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

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

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

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

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

精彩评论

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