如何巧用图形提高设计感?

本周与大家聊下界面设计中“如何提升设计感?”掌握系统的优秀界面是设计研究中重要范畴,其中包括秩序、元素、颜色、图形、质感以及空间等关键细节。为何有部分同学的界面风格及作品集包装就是少了一点感觉呢?或者当你开始投入做设计时候,领导就经常提出这个界面少了点感觉的问题等等。因此今天我想借此机会和大家聊下,我们在做界面排版如何通过小细节提升界面的设计感!

如何巧用图形提高设计感?

为什么学习它

做视觉设计时候,特别是在枯燥的界面排版时候,我们面临一些很单调的文字信息,那么这时候该如何去设计呢?其实就是需要学会运用辅助图形,它是提升设计感的方式之一,其他还有包括渐变色,界面质感的塑造,布局空间等等,那么今天我就讲其中一点图形的运用诀窍,如果大家喜欢的话,后续我在更新其他部分。

图形在设计中的运用

很简单,圆、方、三角、线、异形图形等,这些是构成视觉语言的基础元素,属于图形部分,当然图形也包括图标和一些按钮标签样式,今天先和大家介绍一些基础图形元素,用于界面中排版的设计细节元素。圆形圆形在界面中的运用算是所有图形中最多的了,原因就是图形亲和力强,造型比较容易让眼睛接受,圆形也有大的图形和一些信息区分圆点图形,下面来看下具体案例。

如何巧用图形提高设计感?

案例1(左侧商品暂无图形)

如何巧用图形提高设计感?

案例2(左侧商品背景添加圆形)

两个列子中 案例2运用了圆形设计元素,配合商品展示出来,整体一看提高了一些设计感,让我们不会觉得界面空,下面我们看下其他案例。

如何巧用图形提高设计感?

上面这个列子如果需要注意的是 浏览和收藏之间的小点点需要左右各一个空格,下面来看下其他实际页面中的案例

如何巧用图形提高设计感?
如何巧用图形提高设计感?
如何巧用图形提高设计感?

上面3个案例中,我们可以看出圆形在设计中起到了页面辅助作用,同时提升设计感,试想如果我们去掉这些圆形图形,那么界面会是一种什么样的感受呢?

如何巧用图形提高设计感?

△ 这个案例中,圆形作为标题区分

如何巧用图形提高设计感?

如何巧用图形提高设计感?合理的运用圆形可以增强设计形式感,上面案例中我们也可以看出圆形可以作为背景衬托主体,也可以作为标题区分模块,也可以作为主要图形,凸显品牌特征。

方形

方形元素在界面中运用大部分都是以内容容器来承载,辅助元素会相对圆形略少一些。

如何巧用图形提高设计感?

有时候我们可以考虑通过加粗字体来表示可点击或者重点信息,这样就减少颜色数量,同时再加上分隔元素,使得整体设计感又上升一些。

如何巧用图形提高设计感?

如何巧用图形提高设计感?

如何巧用图形提高设计感?

如何巧用图形提高设计感?

上面案例我们可以看到方形可以用于界面信息区分用于点缀也可用于功能操作元素(最后一张图)

三角形

如何巧用图形提高设计感?

如何巧用图形提高设计感?

三角形在设计中用得相对少一些,一般用在会有更多选项的导航或者带有一些指示的功能箭头。

如何巧用图形提高设计感?

如何巧用图形提高设计感?

线

线条在设计中用到的地方可是超级多,但是线条运用也有讲究的,比如有时候用作强调信息,分割信息,突出层级,有时候用作导航焦点线条分为斜线,平行线,竖直线等等。下面看一些案例吧。

如何巧用图形提高设计感?
如何巧用图形提高设计感?
如何巧用图形提高设计感?
如何巧用图形提高设计感?
如何巧用图形提高设计感?

在设计中运用设计小细节元素时候一定要集合产品功能和整体设计风格拉通,不能随便使用,也不能随便放,如果你这里使用了线条,那么同一类型的地方也需要使用相同的元素。

不规则图形

不规则图形在界面可以打破常规,给界面营造一种特殊氛围感,视觉冲击力一般强于常规图形。不规则图形一般可以通过品牌符合去延伸设计出来,多用于一些封面包装,品牌宣传册,运营活动等等

如何巧用图形提高设计感?
如何巧用图形提高设计感?
如何巧用图形提高设计感?

线上案例

如何巧用图形提高设计感?
如何巧用图形提高设计感?

韩国一些app界面截图

如何巧用图形提高设计感?
如何巧用图形提高设计感?

△ 雅虎品牌图形延展设计

如何巧用图形提高设计感?
如何巧用图形提高设计感?
如何巧用图形提高设计感?

△ Studio Dumbar的新徽标和标识

下面是一些比较突破常规破形设计

如何巧用图形提高设计感?
如何巧用图形提高设计感?
如何巧用图形提高设计感?

总结

综上所述,上面讲了几种图形在设计界面中的运用,当然我们也可以集合起来运用比如圆形和线条在设计中的运用,不管如何搭配,需让他们看起来合理,有逻辑的。当然如果想做好,还需要靠设计师们自己去不断努力尝试,突破固定的思维模式。

业界动态

如何设计可读、平衡且令人愉悦的深色主题?

2019-12-23 13:17:14

业界动态

如何打造高效协同的交互文档

2019-12-23 15:21:01

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索