广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

你公司网站设计是不是很平庸?7个网页设计法则让你网站眼前一亮
发布日期:2025-05-19 11:55:07 浏览次数: 806 来源:UI范


今天来讲一个设计排版中常用的方法——破形设计。所谓破形设计即突破原有的形体、结构、规则等限制,进行新的排版设计,让设计变得更加具有设计感。


破形设计通常会利用新的图形、纹样、文字、颜色等等设计元素来进行解构重组升级,让原本呆板、固化的设计变得更加具有美感和差异度。


通过破形的设计,可以大大提升设计排版的设计感,通过对核心元素的强调、突出、衔接、切割等技法,让原本比较常规、固化、死板的画面变得具有活力和新鲜感。




翻了下国内外的设计网站之后,给大家梳理了以下7种常见的破形设计手法:




1. 角色IP破形,强化游戏氛围感


在一些游戏类的设计中,通常会结合角色IP来进行破形处理,比如说下面这些案例,就是利用角色和背景底色互动的特点,让选中的角色进行了凸起设计,来强调当前的角色。












2. 切割破形,强化功能、信息的去快感

比如下面的这些案例,就是利用UI结构切割进行破形,来突出核心的操作或者内容,让原本比较沉闷的方格子设计,变得更加具有设计感和几何结构感。








3. 组合拼贴式破形


这种方式通常是在不破坏原有UI组合结构的情况下进行设计,通过背景与前景元素的错位来营造破形的空间感和层次感,这种类型与第一种方式一样,都是为了强调主体,主要差异点在于表现的手法,第一种类型更依赖于设计的整体性,这种则更强调主体的突出性。








4. 强调核心操作,骑缝破形强化体验

这种方式也比较场景,通常在底部导航的设计或者整个界面具备核心重要的操作时,会通过骑缝的设计方式来对原本完整的界面结构进行破形设计处理,强调了主操作之余也增加了结构的装饰性设计。








5. 破形延伸视觉,提升场景衔接感和空间感


在设计一些长网页的时候,通常会在上下屏衔接的时候,利用角色或者部分视觉元素来进行上下的破形衔接,可以通过一些简单的元素进行上下衔接或者空间扩展的视觉变化,来突破原本固定化的视觉画面感,让整体的画面更加具有张力,同时增加画面阅读的延伸感。








6. 文字破形,强化图文板式感

利用文字元素,通过侵入、遮挡、嵌入等方式进行破形设计,常见于一些标题的设计时可以利用文字的延展性来加强画面的视觉延伸,提升了文字和场景的层次感和空间感。












7. 错位破形,提升视觉穿插感


在同一组元素或者同一个模块的元素内,通过上下左右的视觉错位来打破原有的固定结构造型,让整体的设计变得更加具有排版的节奏个案,提升画面的视觉张力和设计感。












最后


如果你在设计排版的时候没有特别好的灵感,不放尝试下破形的设计方法来提升下你的画面张力,通过破形的设计可以让原本呆板的设计变得更加具有生命力和设计感。



 


对此,你觉得如何?
欢迎留言讨论?


 觉得有用/好看点击 


优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询