对齐原则在网页设计当中的运用
设计有一些原则是共通的,不管是产品设计、平面设计、还是服装设计,设计的形式美法则都是通用的。
对齐,是很重要却很容易被遗忘的一点。在《给大家看的设计书》这书中提出了四大原则:对比、重复、对齐、和亲密性。书中提出:任何东西都不能在页面上随意摆放,每个元素都应当与页面上的另一个元素有着某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。
视觉上遵从保持尺寸和边缘的一致性。
对齐可以让一个网站页面看起来比较规范整齐。对齐一般有三种方式:左对齐、居中对齐、右对齐。
在网页当中运用比较多的是居中对齐和左对齐,大篇幅的右对齐可读性上比较差,所以出现的频率不高,小部分的出现还是有的。不管是哪种方式的对齐,网页中对齐后的文本一定要考虑可读性的问题,千万不要本末倒置。
对齐在网页中的运用无非还是上面那三种对齐方式,正常情况下我们要注意的对齐有这些:元素的对齐、文字的对齐、图片的对齐、区块布局的对齐。
1、元素对齐
元素的对齐指的是网页中的一些按钮、图标、搜索框等网页中的元素统一采用一种对齐方式对齐。
一个网页当中,会有很多元素,而元素的对齐可以让整个界面变得井然有序,元素过于随意摆放没有规律,会让界面杂乱无章。
2、文字的对齐
文字的对齐方式也不外乎上面三种,左对齐是最常见的,居中对齐常出现在文章详情的标题部分,右对齐文字出现的频率小一点,不会以大篇幅出现,大部分在登陆注册或是产品详情界面中常见。
左对齐的方式适合人们的阅读习惯,在网页中也比较常见,这里不多讲了。
居中对齐是进几年随着html5流行起来,越来越多设计师用居中对齐作为一些区块内容展示的方式。
右对齐常见到的是在一些小的细节中,比如登陆注册界面、底部导航区块等,仔细看看还是可以发现有一些地方用到了右对齐。
3、图片的对齐
图片对齐也不外乎上面说的三种方式,图片对齐好处理一些,主要根据网页想表达的内容去做对齐,以达到好的视觉展示效果。所以在不同的情况下,可以采用不同的对齐方式。
4、区块布局的对齐
上面讲的小元素对齐重要,那大的区块对齐也很重要。视觉上的对齐,可以让浏览者快速的浏览到相应的内容。小元素不对齐会显得乱,大区块不对齐会让整个界面没有秩序感。
这样的情况最常出现在一些产品展示的网站当中,设计这个网页的设计师说他们刻意追求不对称感。按钮的不对齐,和区块的不对齐,让整个界面显得很粗糙。在不是瀑布流的情况下,这种区块大幅度出现在界面当中的时候,对浏览者来说就是一种折磨。
说到区块的对齐,不得不提的栅格系统,栅格系统可以让一个网站看起来有秩序感。很多人不喜欢栅格系统,觉得限制他们自己的创意。
事实上,栅格的运用可以很灵活,分多少栏全看设计师的设计。记得在给大家分享区块对比的时候,曾分享过zui前端框架和Gridpak栅格的小工具,这两个工具可以帮助设计师怎么更好的用栅格系统来搭建你的网站。
总之,在做网站的时候要以内容为主旨,界面设计一定是要方便用户快速找到他们想要的。其次使用正确的对齐方式,让界面更为整齐,信息更为明确。
-
2021/12/28
-
2021/12/23
-
2021/12/17
- 爱华仕斩获“2021年度中国厨卫行业年度智能
- 回首2021,迎战2022 彩虹线开启新征程!
- 福临板材|福满2021,圆梦2022
- 美特照明:2022年照明新趋势,经销商如何做大
- 会自己“洗澡”的集成灶,帅康自动清洗集成灶
- 带你设计一款功能多变,简单实用的休闲露台阳
- 世纪豪门吊顶:破防了!原来颜值+实力=H20
- 装修木门选的好,噪音统统没烦恼
- 寒潮来了,有淋浴房洗澡更保暖舒服
- 元旦特辑:欧意电器述说生活的点滴与美好
- “中国十大品牌”获奖名单出炉,赛戈水漆荣耀
- 2021值得消费大赏 凯迪仕智能锁荣摘两项桂冠
- 益恩家居:新年新气象,爱自己从好好睡觉开始
- 元旦伊始:健康新生活,从精格管道直饮水开始
- 喜迎元旦|新年新灯饰 箔晶智能照明让酒店暖
- 吉美帮的2021 “专精特新” 深耕屋面防水体
- Aqara携手京东成立灯光设计联盟 打造灯饰照
- 年底厨房焕新颜,如何选择厨电?好太太智能来
- 全铝家具全屋莫兰迪色系,这款美式轻奢范赢邻
- 顺趋势·筑凤巢·赢未来 凤梧居门窗2021年会隆