首页 >知识讲堂 >设计知识>网页设计中的不对称设计都有哪些?

网页设计中的不对称设计都有哪些?

2020-11-26 16:09:42 阅读(173 评论(0)

编者按:在网页设计过程中,对称与不对称似乎是一种选择。和谐与不对称的差异是创造良好设计的必要手段。但对称通常用得很好,但不对称并不是每个人都熟练使用的。在今天的文章中,让我们简要谈谈网页设计中的不对称设计~在绝大多数情况下,不对称的设计元素可以从其他元素中脱颖而出。如果这些不对称的设计包含按钮、控件或链接,它们通常会比其他部分得到更多的关注。今天,让我们仔细看看网页设计师是如何通过比较、空白和布局创造令人难忘的不对称设计的。不对称的设计不全是外部轮廓的差异,也可以是内部结构的不对称。例如,在图库页面中,每张图都有缩略图,其中一张略大于其它缩略图,这种差异会立即吸引用户的注意。一般来说,不对称设计非常适合将用户的注意力吸引到特定的区域或元素上,这是它的优势。接下来,让我们仔细看看比较、间距和布局是如何产生不对称的效果的。当你去除视觉中的视觉干扰时,你的用户很快就会注意到这些细微的差异。在这个时候,你可能会适当地添加一些效果,比如渐变背景,甚至jquery动画。这种效果可以让页面上只剩下一两个元素很快被注意到。著名Mac平台设计软件Sketch官方网站的设计就是一个很好的例子,深色和浅色被容纳到统一的页面设计中。在页面上,你会注意到两个按钮:深色“免费试用”和浅色“立即购买”。有趣的是,两个按钮大小相同,在同一水平面上,颜色系统相同。然而,“免费购买”的按钮被设计成幽灵按钮,几乎与深色背景融为一体。这样,浅蓝色底部的“立即购买”按钮与背景形成鲜明对比,相当显眼。当你打开页面时,你会一眼就注意到购买按钮,这是通过大量的空白和合理的比较创造的视觉指导。水平和垂直的空白区分了按钮和文本,而按钮颜色的差异对比使其中一个按钮自然而然地凸显出来。这种设计技术非常有用。如果你继续浏览,你会发现页脚也采用了类似的设计:在这种情况下,用户只能提交他们的电子邮件或选择放弃。Sketch希望您在输入电子邮件地址后尽快提交,因此提交按钮与输入框非常接近。根据Fitt定律,两个元素之间的距离越近,用户的浏览和切换速度就越快。值得注意的是,提交按钮的颜色与之前的不对称设计一致,这让你很容易注意到并引诱你点击,这正是Sketch想要的。不对称的设计使扫描页面的用户更容易注意到这些精心设计的“突出”元素。至于布局和空白控制,您可以使用A/B测试来找到最佳比例。从Sketch的官方网站上可以学到这些经验:对比不仅仅是颜色的对比,更是网页上其他控件之间的大小和位置的对比。在不同的布局和情况下,空白可以特别显眼,也可以非常不显眼。周围元素的衬托对其他元素的可见性起着重要作用。对称和协调可以创造和谐的印象。两者的使用应平衡。Procreate的官方网站,留白引导注意力iPad平台上的绘图工具,是一个不同的案例。Procreate的官方网站是一个不同的案例,留白引导注意力iPad平台上的绘图工具。简单扫描一下这个页面。页面整体采用深色配色,整体布局不复杂,页面元素尺寸相当大。在这个超大的页面上,设计师使用单个元素来展示如何绘画。屏幕截图、绘画Demo和功能介绍都占据了不同的块,留白将文本内容和视觉信息分开。在使用文本颜色时,设计师也非常小心:页面部分使用强对比配色,文本部分使用相对较弱的对比配色。通过将页面划分为不同的块,页面自然划分为不同的层次,每个部分都有不同的风格(全屏幕背景、大字体排版、截图显示等),使每个块看起来更加独立。但请记住,这种设计技术并不适合所有网站,但它已经逐渐在设计师圈中流行起来,成为一种设计趋势。假如设计和执行都很到位,看起来还是挺不错的。乍一看,内容和图片的交替布局可能会让用户感到无聊,但如果区块之间的间距得到很好的控制,Z型扫描可以消除阅读的不适。这种方式促使访问者按照自己的节奏阅读,因为这种布局打断了信息的连续性,但使用户成为阅读节奏的控制者。Wunderlist页面采用不对称留白,合理的留白设计使布局有趣而不单调。通过Wunderlist的布局,我们可以总结这种设计模式:·不对称设计的主要目的是引导用户关注页面的特定区域·不对称设计的重复使用可以创建对称设计·图形之间的间隙控制也可以成为一种模式,定期空白可以使内容浏览更简单和预期。

以上就是关于网页设计中的不对称设计都有哪些?的相关介绍,更多网页设计中的不对称设计都有哪些?相关内容可以咨询我们或者浏览页面上的推荐内容。我们将让你对网页设计中的不对称设计都有哪些?有更深的了解和认识。

内容来源:网络,以上内容来源于网络,不代表本站观点,如有侵权,请联系删除。

推荐阅读

文件恢复软件哪个靠谱呢?你选对了吗?

现在的人们通常都会使用手机或者是电脑去办公,但难免会出现误删的情况,让自己的辛苦付之东流。其实文件丢失了不用担心,可以通过文件恢复软件来成功找回,但作为电脑的菜鸟,怎样选择合适的软件,就成为了人们较为关注的问题,…查看详情

文字识别软件哪个好 好用免费的文字识别软件推荐

  随着图片时代的深度发展,大量的文字内容为了优化排版和表现效果,都采用了图片的形式发布和存储,这为内容的传播和安全性带来了很大的便利,但对于内容编辑者来说,却造成了一些不便——需要重复性劳动。下面万商云集小编就…查看详情

微博营销特点及技巧有哪些?

微博营销的特点?1、见效快,微博营销是投资少,见效快的一种新型的营销模式。2、其营销方式和模式可以在短期内获得巨大的收益,门槛低,140个字发布信息,原比博客发布容易。3、可以方便的利用文字,图片,视频等多种展现形式,传播…查看详情

传统行业如何数字化转型

  随着数字化时代的到来,传统行业面临着前所未有的转型压力。数字化转型已经成为现代企业的必然选择,要想在激烈的市场竞争中存活下来,就必须寻找数字化转型的新路。本文将详细探讨传统行业如何数字化转型。  一、重视数据…查看详情

小程序开发设计丨尺寸 页面 字体 颜色及导航的样式

小程序对用户体验要求较高的轻量应用,因此对小程序开发设计中的设计要求比较高,需要在设计细节中充分给到用户反馈,否则极容易造成用户流失,给商家或企业造成损失。微信小程序目前不提供统一的尺寸、页面、字体、颜色及导航等…查看详情

好做又赚钱的小吃店有哪些?

高新科技的发展,我们身边最常见的小吃店也有了许多加盟店铺,它们不在是简简单单的小吃店,而是可以作为一个代表性的门面。今天就让小编带大家一起了解一下,好做又赚钱的小吃店有哪些。 1、猪红汤小吃店 美味的猪红汤吃过…查看详情

电商仓储配套压力大,要托管先了解怎么收费

电商队伍逐渐壮大,呈现出规模化和稳定化态势,行业周边配套设施和服务也随之完善。仓储物流是电商核心环节之一,对企业供应链有至关重要的作用,但是仓储配套的前期投入成本和运行风险都非常高。对中小微电商企业来说,自行完善…查看详情

如何高效的管理erp系统

 随着erp系统实施的越来越多,每个企业都想通过erp系统来提高企业的管理水平,给企业带来更高的收益。但是由于部分企业是中小型企业,没有专业的技术人员,所以员工对于erp系统的接收度远远没有想象的快,最后导致各个企业的实施…查看详情

小程序商城怎么定制?

  小程序商城功能?  商城类的小程序是比较多商家需要的,现在的小程序商城系统也是很成熟的了,很多开发商都在做商城,可以说是标配了,价格不会太高  大多数商家不懂编程知识,定制开发价格又比较贵,那么应该怎么做商城小…查看详情

万商云集2019品牌服务大使候选人专访之——西安团队李倩

谈及所坚持的服务理念,万商云集西安分公司客户代表——李倩,简单用“解决问题”作了概括。已累积5年从业经验,在万商云集工作近三年,万商云集见证了李倩从青涩职场新人到职场干将的蜕变,她始终坚持真诚而努力地为客户做好服务…查看详情

“门店+社群”?新的零售模式企业如何接招

以微信群为平台搭建的社群社交方式,成为当前环境下熟人、半熟人社交的主要方式。在这种环境下,一些创业公司以及一些传统企业,看到了微信群的这种营销价值,创新了社交零售模式。 虽然目前对这种独立的社群零售模式还有比较…查看详情

return是什么意思

return还可以用什么来表达?return,意思为回来时,还可以用goback来表达,意思为归还东西时,还可以用giveback来表达come和return的区别?come是来的意思,而return则是回来的意思,区别可以从以下例子看出:...查看详情

考研刷题软件有哪些 考研刷题软件排行榜

  现在很多的学生在本科毕业后都选择考研,现在考研的群体也是非常多的,下面小编给大家来详细介绍一下考研刷题软件有哪些 考研刷题软件排行榜这一块的相关内容,希望能帮助到大家。  考研刷题软件有哪些  1、《考研帮》…查看详情

会员卡管理软件助力经营,这4款帮商家get营销诀窍

无论是线下经营店铺还是线上虚拟商铺,越来越多的商家重视店面会员机制所带来的经营增值效应,而随着经营规模的不断扩大,经营者对于会员及会员卡的管理工作量也在增加,此时就需要借助专业的会员卡管理软件来助力经营,今天就介…查看详情

抠图软件哪个好,如何进行选择及使用

所谓抠图软件,就是指通过在选定照片上选取某一部分图像进行截取下来,然后再对该部分图片进行剪辑操作的软件。现如今,市面上已经广泛流传了许多的抠图软件(包括PC端和手机端),这极大地方便了我们的工作和生活。有越来越多的人…查看详情

首页

产品

万商学院

客户服务

会员中心

当前站点

h

选择站点

全国站成都

一 客户顾问-张三

已为0个客户提供专业互联网服务咨询
  • 手机号码
  • 验证码图形验证码换一张
  • 短信校验码

    电话咨询

    在线咨询