说到版式设计很多人更多联系的是平面设计中的海报版式设计,而在UI界面设计中,也需要遵循很多的版式设计方法论,今天我为大家整理一份UI设计中版式的实战运用以及设计思路

 

版式设计是现代设计艺术的重要组成部分,是视觉传达的重要手段。表面上看,它是一种关于编排的学问;实际上,它不仅是一种技能,更实现了技术与艺术的高度统一,版式设计是现代设计者所必备的基本功之一。

 

通俗点解释,我们在做设计时需要有“条理性”的思维指导,因为人的眼睛或者大脑在短时间内无法处理大量“扑面而来”的信息,设计师需要把这些信息通过视觉化的手段,把这些信息处理成有条理的且具有引导性的“视觉走势”或者说叫视觉引导,让读者在短时间内可获得你想要表达的信息,最终形成预期收益。

 

海报设计或者书籍排版中中常常用到版心的概念,把比较重要的信息都放在设定的中心区域内,让版式更加具有一定的透气性;在版心的面积比也可以叫”版心率“,版面率越高,可排版的内容越多,反之则越少

 

网格系统又叫栅格系统,早期的Web网页设计时开始运用这样的方法,运用网格系统的目的,前面我也提到了其实主要是2个。

第一是提升页面条理性的有效设计方法,让排版更加有参考的标准;

第二是避免不同设计师设定的间距不同等造成的设计的结果不一致,导致项目延期等风险的发生。

 

栅格实际界面中的运用形式中,可以看到App Store的栅格化采用了左边距40右边距40列12间距20,Medium采用了左边距36右边距36列10间距44,不同产品的栅格定义不同,需要根据自己的产品而定

 

通过对色块通过颜色和饱和度的调节对比,让画面中元素的层次以及重量级的引导,起到明显的作用;不理论是印象笔记的微信强引导的绿色button,还是小红书强引导的白色button都是与其他button采用不同的设计重量级进行区分,而知乎的“选择器”操作则选中button采用高饱和的颜色未选中则选用低饱和的颜色进行对比

 

UI设计

 

通过对标题加粗运用重色、内容运用浅色低饱和的方式,产生视觉差,提高用户的浏览效率以及表达产品的视觉层次;可以看到以下3个案例中很明确的运用了字重对比的版式设计语言进行层次的区分

 

通过对相同属性元素模块化或者区域分隔造成的一种视觉上的相对独立性,使得界面的层次清晰有序,提高用户的识别效率;在以下案例中可以看到京东APP与优酷APP的设计语言都运用了卡片形式制造亲密性,而微信读书则采用了“水槽”分割来制造亲密性版式设计

 

在界面设计中很多时候会出现单纯的图片或者文章类的重复性排版,容易造成视觉上的单调感,我们可以增加修饰性的元素来制造变化,也可以通过穿插不同形式的内容来打破乏味的版式;在优酷的适配标题中可以看到增加了心形或者火苗的点缀形式,而Twitter的的文字列中增加了icon图标;在Medium中对重复性信息中间增加横向滑动的内容来打破枯燥单调的版式设计。

 

青岛青设网络科技有限公司是国内领先设计团队和营销策划服务商,专注于5G技术下平面设计,UI设计,BS系统设计,网站开发,SEO,自媒体,百度百科知道、知乎等百家号,排行榜,删除负面,媒体发文等营销宣传。帮助企业解决5G时代三维动态化站点的设计改造,为客户提供网站一站式解决方案。

 

**本文内容来源网络,经AI自动调整,信息仅供参考**


暂无评论



发表评论

电子邮件地址不会被公开。 必填项已用*标注