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

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

纯设计2011.1.15我想分享

作为互联网产品的“面子”,产品面临着用户的第一层次,虽然UI设计已经成熟,但各大公司仍然非常重视UI。

对UI设计师的需求仍然很大

虽然UI设计不需要太多的视觉冲击,但它也由基本的点线表面组成。如何在UI设计中使用这些基本元素?

UI元素的方式

虚线表面

由线组成。

在视觉层面上,我们可以理解这一点:点是点缀,目的是丰富画面,活跃气氛;线是连接,引导,通过图片;面部是关键,用于呈现主要信息,具有重量感。

案例研究

装饰可以理解为“线”。在设计中,点是一个元素,可以是基本图形或不同的物理元素。

虚线表面

点的作用:丰富图片,增强氛围。基本形状可作为点元素,设计简洁时尚。如图中的两个对比图所示,在右边缺少点元素后,整个画面的氛围被削弱了很多。

点的作用

点元素不仅可以是基本形状,还可以是徽标或对象等元素。如图所示,上图使用画笔效果来丰富画面,而下画使用相机作为背景点元素来丰富画面。这两种设计都丰富了图片,突出了品牌的特色。

不同的要素

行的作用:主要是指导阅读。在界面配置中,点的视线是线,并且线在整个图片中串联起作用。如果有多种类型的页面元素,加上元素的大小,您可以使用该行的串联函数来增强图像的相关性和顺序感,从而增强可读性,如图所示。

线系列屏幕

线。掌握文本(线)与曲面之间的关系可以使图像更加美观和舒适,如图所示。

一行文字可以理解为一行

另外,文本的布局有时根据表面的形状排列,使得文本和表面之间的关系更加集成,如图所示。

可以根据面部排列文本布局

穿插层次不仅突出了产品气质,还强调了主题。

之间的水平如图所示,与角色交叉可以有效地增强图片的视觉效果。

散布着人物

在App设计中,有一个常见的浮动图层指南,它使用线框来汇总信息。该线框不仅强调内容的重要性,还引导用户完成操作,如图所示。

线框浮动层指导

面部的作用:突出关键点并区分层次关系。面部的基本形状一般由三种圆形,正方形和三角形组成,不同的形状可以反映不同的气氛。在布局中,块表面和块表面之间的层次关系可以很好地对标题副本之间的上下文进行排序。

如图所示,标题和按钮被放置在面部的第一层上,并且次要文本和字符被分层地区分,从而增强了对点击的引导。

将标题和按钮放在第一级

主要信息可以用圆形面突出显示,因为圆圈具有非常好的聚焦效果,如图所示。

使用圆形表面高度突出显示主要信息

请注意,在向曲面添加元素时,应遵循近似和远近的规律,以便能够反映出空间感。元素的大小不能超过主信息表面的大小,如图所示。

表面元素的大小不能超过主要信息表面的大小

线,点线元素的缝合也可以形成一个面,这种点线元素的感应是不可分的,如图所示。数字。

虚线的组成有连接

干货的内容还不够?纪义军在书中为大家分享了很多干货,戳下面的蓝色链接,继续学习!

好书推荐

可以购买进一步阅读《新印象 解构UI界面设计》了解更多!

收集报告投诉

作为互联网产品的“面子”,产品面临着用户的第一层次,虽然UI设计已经成熟,但各大公司仍然非常重视UI。

对UI设计师的需求仍然很大

虽然UI设计不需要太多的视觉冲击,但它也由基本的点线表面组成。如何在UI设计中使用这些基本元素?

UI元素的方式

虚线表面

由线组成。

在视觉层面上,我们可以理解这一点:点是点缀,目的是丰富画面,活跃气氛;线是连接,引导,通过图片;面部是关键,用于呈现主要信息,具有重量感。

案例研究

装饰可以理解为“线”。在设计中,点是一个元素,可以是基本图形或不同的物理元素。

虚线表面

点的作用:丰富图片,增强氛围。基本形状可作为点元素,设计简洁时尚。如图中的两个对比图所示,在右边缺少点元素后,整个画面的氛围被削弱了很多。

点的作用

点元素不仅可以是基本形状,还可以是徽标或对象等元素。如图所示,上图使用画笔效果来丰富画面,而下画使用相机作为背景点元素来丰富画面。这两种设计都丰富了图片,突出了品牌的特色。

不同的要素

行的作用:主要是指导阅读。在界面配置中,点的视线是线,并且线在整个图片中串联起作用。如果有多种类型的页面元素,加上元素的大小,您可以使用该行的串联函数来增强图像的相关性和顺序感,从而增强可读性,如图所示。

线系列屏幕

线。掌握文本(线)与曲面之间的关系可以使图像更加美观和舒适,如图所示。

一行文字可以理解为一行

另外,文本的布局有时根据表面的形状排列,使得文本和表面之间的关系更加集成,如图所示。

可以根据面部排列文本布局

穿插层次不仅突出了产品气质,还强调了主题。

之间的水平如图所示,与角色交叉可以有效地增强图片的视觉效果。

散布着人物

在App设计中,有一个常见的浮动图层指南,它使用线框来汇总信息。该线框不仅强调内容的重要性,还引导用户完成操作,如图所示。

线框浮动层指导

面部的作用:突出关键点并区分层次关系。面部的基本形状一般由三种圆形,正方形和三角形组成,不同的形状可以反映不同的气氛。在布局中,块表面和块表面之间的层次关系可以很好地对标题副本之间的上下文进行排序。

如图所示,标题和按钮被放置在面部的第一层上,并且次要文本和字符被分层地区分,从而增强了对点击的引导。

将标题和按钮放在第一级

主要信息可以用圆形面突出显示,因为圆圈具有非常好的聚焦效果,如图所示。

使用圆形表面高度突出显示主要信息

请注意,在向曲面添加元素时,应遵循近似和远近的规律,以便能够反映出空间感。元素的大小不能超过主信息表面的大小,如图所示。

表面元素的大小不能超过主要信息表面的大小

线,点线元素的缝合也可以形成一个面,这种点线元素的感应是不可分的,如图所示。数字。

虚线的组成有连接

干货的内容还不够?纪义军在书中为大家分享了很多干货,戳下面的蓝色链接,继续学习!

好书推荐

可以购买进一步阅读《新印象 解构UI界面设计》了解更多!

——