关于APP设计被我们忽略的细节

  • A+

对于刚刚接触UI设计的人来说,会有一个困境

就是 明明照着临摹,都可以做出来很高大上的界面,但是真的接到需求,做出来的效果就差很多。

(其中原因有很多,今天只说说一点)

我用一个案例简单说明一下今天聊得话题 : 那些被我们忽略的细节。

案例:AirB&B

截屏尺寸750x1336

关于APP设计被我们忽略的细节

看到这个页面,都会觉得很舒服、高大上。如果你只是认为,这种布局导致他高大上,那就错了。

这个APP让我印象很深的就是他的安全边界很宽,我去测量了一下,有48px。

48是一个很敏感的数字,我觉得没那么简单,所以我去测量了一下得出来下图。

关于APP设计被我们忽略的细节

看到这张图你就会发现,48不仅仅是他的安全区域,还是行间距,大的栏目之间的行间距是96(48的一倍)。

中间板块和板块的间距是24 (是48的一半)。 下方文字和图片的间距也是24

从逻辑的角度来他确定了一个最小尺寸A(这里他的A是24) 那么最小间距是A,安全边界和中等间距是2A ,大板块间距是4A

这样的好处是,整体的疏密节奏是由你掌控的,所有的间距都有一定比例上的规则,这样组合起来就会统一且美观。

你确定了间距,中间内容宽度就自然出来了,而不是你去死记一些数值。

 

在聊聊文字颜色,上图中有标注出,首页用的文字颜色。

最深的颜色并不是黑色,是#484848 这个颜色是一种深灰色,会比黑色给人感受跟温暖,

中色调是#767676  浅色#919191

你可以发现他们的灰度递减也是有一定规律的。

假使,你把这三个色调,换成只用两个,或者说都用黑色。那么效果就会差很多。

 

所以简单界面不简单,极简风格中蕴含的是对细节的追求。

 

最后补充一个作业:

关于APP设计被我们忽略的细节

将36ke首页进行标注

发表评论

您必须登录才能发表评论!

目前评论:7   

    • avatar JAY捷 3

      上周去了上海,这周写点干货补上。

        • avatar 曾二 6

          @JAY捷 好干,去喝水喽。干死了。O(∩_∩)O哈哈~

        • avatar sinan 1

          棒棒!

          • avatar 大德 2

            666666

            • avatar 夏…●末 2

              偷瞄的人来了