5个技巧让你的界面更干净

  • 日期:07-09
  • 点击:(773)

盈丰娱乐棋牌

使界面更清洁的5个技巧

817de34108cf4934b941128a66c1e8c5.jpeg

我:N * .%)& B&%#&)|? “

在我们平常的工作中,我们总是满足高大的需求,但在这个高,在某些人的眼里,它似乎包含了所有风格的时间,当然,有些人说高大,是高大又高,我们该如何开始设计这样的风格?我们看看Apple,看看选择,看看一些奢侈品网站,应用程序和横幅。不难发现它们都是简单的风格,它们展现出一种高端的感觉。

除了这种感觉,细节很简单,简洁干净的设计看起来很舒服,而且阅读内容非常清晰,但我们很多人所做的设计并不是那么干净。当我们向其他人展示时,我们经常得到的评价不够清晰。边缘不够清晰,设计不够,往往页面细节太麻烦,许多其他细节都被大大忽略了。让我们今天与大家分享,如何让您的设计看起来更干净整洁!如何设计一个简单但不简单的界面。

1.调整行间距

每个人都知道线间距,但我不知道如何在设计中使用它。通常,我使用的规则是+4。我的文本大小是12PX,然后我的行间距是16,依此类推。文本是14然后行间距是18PX

afbe8fd3647b4fcbb3b5da2d3add0ae8.jpeg

上面的图片是我之前设计的一组标准行间距规则,供您参考,但规则为+4

您还可以使用黄金比例,即文本大小X1.414,文本大小X1.616(1.414和1.616是黄金值)进行四舍五入,并获得以下字体间距规则。

6ee849d906564827b0789be8e957076d.jpeg

很多人必须问,我如何判断界面中需要多少行间距?原因很简单,只看你的内容,如果你的应用内容需要非常丰富,你可以使行间距更小,并让屏幕显示更多内容,你也可以使用+4的原则,目前淘宝天猫是这个原则,那么如果你的页面内容需要更白,更舒适的阅读,你可以使用行间距的黄金比例,如新闻阅读软件,你需要大量的空白来调整呼吸感。

等等,是否有人问黄金比例是否不是0.618?

在这里,每个人,黄金比例不仅是0.618,1.618,而且根数2,根数3,以及德国工业的一些经典比例,包括黄金比率(黄金比率),白银比率(白银)比率),白金比率,青铜比率等,有兴趣在本网站转换:

7a6ff3e98ca24861894f302590148155.jpeg

雅虎新闻由于有关于文本内容的更多信息,页面信息需要更加丰富。因此,行间距固定+4的原理使页面看起来更清爽。

c4becdfebde94c98a4d3f5b3f4881957.jpeg

6e703a5d747a40a6a0af2f88602d7d4a.jpeg

间距比较大,白色空间更舒适,给人一种非常优雅和清爽的感觉。它们在许多设计细节中不遵循iOS规范。并打破重组,如列表的高度,列表的图标大小等!当然,行间距是整个建筑物

2.调整字间距

人们相信每行都能理解行间距。只需要掌握一些行间距规则。那么单词间距也很重要,特别是在做英文排版时,同样的内容,单词间距和行间距都不合适,看起来界面会有很多差异,有些看起来很舒服,有的不行'似乎说错了。

10c97d1184bc44b4a17735d029e4ac34.jpeg

这两页,左侧舒适还是右侧舒适?如果你想到了答案,你可以离开这个页面

421195180c5d4e85859285f722a1f0a4.png

(只是一个笑话),很明显右侧看起来很舒服,因为:

左:(字母和字母之间的字间距:0行间距20)

右:(字母和字母之间的字间距:0.2行距22)

之间的间距,使整个设计节奏有所缓解。

需要注意的是:不要给太多的字间距,有时候太大会让读者难以忍受

3.减少行

074f9c88ac90436086660262004db550.jpeg

在同样的结构中,Airbnb对商品单元的处理比ebay更清洁,更清洁。原因是ebay上有太多行,这可能与他们的整体视觉语言有关。有更多的线路,没有Airbnb外观。清爽干净。

7c601ec8d0c848f0b3cd1dfdb3619a91.jpeg

很多,虽然它是分割信息的好方法,但它只是令人耳目一新。

9e131b5cec644514ab5b408550e43c00.jpeg

fbe2bea72c7241d79b85824e86fd5df4.jpeg

用颜色块去掉,哪一个看起来更干净?当然是以下!

是使UI设计看起来更清晰,通过间隔分割信息以及增强内容和内容之间的间距的重要方法。明确区分信息水平

1b758cd51b2c46b6b23bb8e320c0dc3a.jpeg

在新版Facebook的视觉风格中,我们可以清楚地找到上线的设计技巧。左侧是修订版本,右侧是修订版本。很明显,Facebook已经减少了该线路的使用。

236ef2db08b045bb9f89c4c8b3cf9de1.jpeg

1991a17b01cc4987ad23ff9d6c2e1395.jpeg

4.留空

2885c84f460a4855a04daff9ac5dee3e.jpeg

在UI中,页面的放松和呼吸非常重要。在左边的设计中,元素之间的距离非常小,并且它们都被包装在一个非常饱满的空间中。

右侧的界面充分利用了布局和空间,并且有足够的空间让元素呼吸,让用户感觉更舒适。

147aa1d3b15144068e9dc6d1aa559430.jpeg

在上述情况下,左侧的内容非常密集。虽然有白色,但并不明显,右侧是聪明的,使用较大的灰色空间来区分内容,所以右侧看起来更舒服。

51fd1725b0164bdc926dd855ba8afaa4.jpeg

Facebook的卡片设计也使用厚间距来区分内容,使页面看起来更加层次和干净。

4533498061764edabb1a549a856ea659.jpeg

5.使用卡

a541904465e24787b15aaad43e7597d9.jpeg

cb36e4265d1d4bed9d9b6ae46a9bea31.jpeg

51e1aa19f8f14090b9797526c113b641.jpeg

卡的设计在移动端更清洁,并且是经常使用的设计点。

408adfaf24cb458aa0fb7a686bce35b0.jpeg