当前位置: 梅河口社会头条 > 互联网 >

看脸时代互联网产品的“颜面”到底有多重要?

2019-07-16 12:41 - 查看:
作为互联网产品的颜面,产品面向用户的第一关,UI设计虽然已经趋于成熟,但各大企业对UI依旧十分重视。 UI设计虽然不需要过多的视觉冲击力,但也是由基础的点线面构成的,那在

  作为互联网产品的“颜面”,产品面向用户的第一关,UI设计虽然已经趋于成熟,但各大企业对UI依旧十分重视。

  UI设计虽然不需要过多的视觉冲击力,但也是由基础的点线面构成的,那在UI设计中怎么才能把这些基础元素使用好呢?

  在哲学上的定义:点是宇宙的起源,没有任何体积,被挤在宇宙的“边缘”,点是所有图形的基础;线是由无数个点连接而成的;面是由无数条线组成的。

  在视觉层面上我们可以这样理解:点就是点缀,目的是丰富画面,活跃气氛;线就是联系,具有引导性,贯穿画面;面是重点,用于呈现主要的信息,具有分量感。

  图中的点线面非常好区分,图中的插画形象和主标题可以理解为“面”,背景上的图片和小方块可以理解为“点”,背景上的透视线条装饰可以理解为“线”。在设计中,点就是元素,可以是基础的图形也可以是不同的实物元素。

  点的作用:丰富画面,提升氛围。可以利用基础的形状作为点元素,这样的设计简洁而时尚。如图中的两张对比图,右图缺少点元素后,整个画面的气氛减弱了很多。

  点元素不仅可以是基本形状,还可以用 Logo 或实物等元素来表示。如图所示,上图运用了笔刷效果来丰富画面,而下图则用到了相机作为背景点元素来丰富画面,这两个设计都丰富了画面,并且突出了品牌的特色。

  线的作用:主要是引导阅读。在界面构成中,点的视线轨迹就是线,线在整个画面中起到了串联的作用。如果页面元素的样式有很多种,加上元素的大小不一等因素,可以利用线的串联功能来加强画面的关联感和次序,从而增强阅读性,如图所示。

  在视觉设计中,单个文字也可以理解成点,而一行文字可以理解成线,把握好文字(线)与面之间的关系可以让画面更加优美和舒适,如图所示。

  另外,文字的排版有时候也会根据面的形状进行排布,让文字和面的关系更加一体化,如图所示。

  注意,线条之间的层次很重要。如图所示,巧妙地将文字、线框与麦克风之间的空间关系表现了出来,利用线条的层次穿插不仅凸显了产品气质,同时还强调了主题。

  另外,利用线条与人物之间的穿插可以有效地增强画面的视觉冲击力,如图所示。

  在App设计中,有一种常见的浮层引导,会使用线框来归纳信息,这种线框不仅可以强调内容的重要性,还可以指引用户进行操作,如图所示。

  面的作用:突出重点,区分层级关系。面的基本形状大致包含圆形、方形和三角形3种,不同的形状可以体现不一样的气氛。在布局中,块面与块面的层次关系能很好地梳理标题文案之间的前后关系。

  如图所示,将标题和按钮放到了第一层级的面上,与次要的文字和人物进行了层级区分,从而加强了点击的引导。

  利用圆形的面可以高度突出主要信息,因为圆形具有非常好的聚焦作用,如图所示。

  注意,在面上添加元素时,要遵循近大远小的规律,这样才能体现空间感,元素的大小不能超过主要信息面的大小,如图所示。

  点线面的构成都是有联系的,多个点可以连成线,而点线元素的拼合也可以形成面,这种点线元素的归纳具有整体性,如图所示。

  干货内容还没有看够?数艺君为大家分享过很多书内的干货,戳下面的蓝色链接,继续学习吧!

  延伸阅读更多内容可以购买《新印象 解构UI界面设计》详细阅读哦!返回搜狐,查看更多

上一篇:上一篇:中国互联网发展的水平如何?           下一篇:下一篇:互联网信息服务投诉平台正式发布