相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论

UI设计教程——视觉层面的三维解析

比目鱼发布于:2019-7-22 12:20 |原作者: 菜心设计铺
比目鱼
重庆市 江北区 建筑/环艺设计师
发私信 + 关注
简介: 界面设计是一个很庞大的体系,具有很多原则,比如轻量、容错、清晰等等,其中包含了交互层面以及视觉层面等,今天我想单独把视觉剥离出来,来讲一讲我对界面设计"视觉层面"的理解与认知。 ... ...

版权申明:本文出自“菜心设计铺”原创,感谢“菜心设计铺”的原创文章分享!

FEVTE编注:更多平面设计理论学习请访问风帆网平面设计理论知识栏目,地址:https://www.sailaila.net/plan/shejililun/

在我看来,界面设计的视觉层面主要可以分为三个维度来解析:信息传递、视觉美化、创意创新。

信息传递是让用户看的明白,快速清晰的获取信息;

视觉美化是让用户看的舒服,让界面足够美观;

创新创意是让用户看的惊喜,看到一些不一样的创意点。

如下图:

三个维度的目标如何实现呢?我提取了以下三个关键词:

清晰、和谐、独特是我们要达成的目标,达成目标一定会有一些原理所在,而有了原理就会有具体的执行方法,所以后面的每一个知识点,我都会按照"设计目标-执行原理-执行方法"的逻辑给大家讲解,大纲如下:

1 清晰

1.1清晰-降噪-容器整合

1.2清晰-聚焦-局部放大

2 和谐

2.1 和谐-呼应-颜色呼应

2.2 和谐-节奏-变化对比

2.3 和谐-饱满-负形缩减

3 独特

3.1 独特-品牌延展-IP形象结合

3.2 独特-事物本意-事物图形化


1.清晰

1.1清晰-降噪-容器整合

设计目标:清晰

执行原理:信息降噪

执行方法:容器整合

当界面信息过于分散时,会对用户造成不必要的干扰,导致用户产生疑惑甚至直接离开界面。

作为设计师,要做的就是对信息进行整合,我们可以称之为信息减噪,目的就是让页面更加清晰,减少干扰。

这里我经常使用"容器整合法"来让内容更加清晰、聚焦。

当分散的内容装进一个"容器后",就可以使内容聚焦在容器当中,让信息更加规整。而卡片就是一个很好的"容器"。

实际案例:

在改版腾讯动漫个人中心的时候,头部就存在信息分散不聚焦的问题,四个视觉触点(绿色圈处)分散在四个角落,形成极大干扰。

这里我就采用了"卡片容器"的方法,将信息装进容器中,减少分散信息的干扰,使界面更加清晰、工整,效果如下:

现在很多产品都在使用卡片化的布局,尤其是在信息数量、层级较多的时候,更加需要有容器将其规整起来,这样才会让界面保持不乱!

12345下一页
2

好评

差评

刚表态过的朋友 (2 人)

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 风帆网