首页 > 教程 > 关键词  > 布局最新资讯  > 正文

网页设计教程:网页设计中排版与布局基础

2008-05-23 14:56 · 稿源:互联网

有些人始终认为,网页最主要是内容,不需要再搞些门面上的东西,还拿出MUD来比 喻。可是,红花还需要绿叶陪衬。想想,若MUD不只是单纯的文本,还有画面出来, 那么,它所吸引的何止现在的这些MUD迷呢? 那么,我所要说的到底是什么呢?初学者如果能够了解一些设计上的东西,那么, 自己的页面不会显得乱,自己看了也开心,别人看了也开心,何乐而不为呢?
我们的主页,说到底,只是一个800*600的画面,那么,我们要怎么对它进行安排 才合理呢? 首先,也是最重要的一点,就是先停下创作,先想好一个主题?quot;设 计,是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做, 而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话,那么,最终做出来的 东西最多局部看得觉得挺不错的,但全局就显得太复杂了。 页面上的构成,如果要让别人一眼望去觉得很BEAUTIFUL,这里面实际上是有很大 的学问的。

我们先来说说构成,"构成:是将造型按视觉效应、视觉力学和精神力学等原则组成的,具备美好形态的造型"。 构成形式里,有空间构成(平面构成和立体构成) 和时间构成(静和动)。 我们的创作,就是要协调这里面的种种关系,顺应视觉 感受,才能够打动观看者的视觉,得到我们想要的效果。在这些形形式式里,都有 着如下的部件: 点:我们一般认为,点是指圆形的,但这是不正确的。只要在空间里有非常少量的 面积,无法形成一个视觉上感觉的图形,都是一个点。无论什么形状都可以。 线:点集合在一起就形成线。 面:一个平面。 体:一个物体。一般是指物体占据的空间,有三维形状。

那么,当点、线、面与体集结在一个页面上时,它们的关系要怎么协调呢?它们之间都有什么作用呢?

点有集中视线、紧缩空间、引起注意的功能。 两个点相距不远而且形状不等时,一般由小向大看。 近距离的点引起面的感觉。 灵活运用点,可使你的页面有一些本质上的变化。 当点占据不同的空间时,它所引起的感觉是不同的。

(1) 居中引起视觉集中注意 。
(2) 上引起下跌落感。
(3) 在上左或上右引起不安定感。
(4) 下方中点,产生踏实感。
(5) 左下右下,增加了动感。

为什么会这样呢?因为人的视觉,都是经过对生活的感觉都得来的。 在下方的东西,一般联想到大地。 在上方的东西,一般联想到浮云。线、面、体亦然。

线,又分为直线和曲线。直线:给人以速度,明确而锐利的感觉,具男性感。曲线,则优美轻快,富于旋律。曲线的用法各异,需结合自己的需要。 而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔,具踏实感。垂直线则有强烈的上升及下落趋势,可增加动感。斜线,一般我没有怎么使用,蛭??斐墒泳醯囊恢植话捕ā?
人们每看到一个东西,都试图用横直来分析,斜、歪是人们所不愿意见到的,但 适当运用部梢源锏揭恍┨厥庑Ч ?这个要靠个人的感觉。 面,指的是二度空间里的形。 面又分为几何形和任意形,我个人比较喜欢任意形,因为它往更具人情味。 几何形使人有一些机械感,但是,每一个图形里都会要用到几何形,请看它们各代表什么:

(1) 圆形:运动及和谐美
(2) 矩形:单纯而明确,稳定
(3) 平行四边形:有向一方运动的感觉。
(4) 梯形:最稳定,令人联想到山。
(5) 正方形:稳定的扩张。
(6) 正三角形:平稳的扩张。
(7) 倒三角形:不安定,动态及扩张、幻想。

我们在日常生活中所看到的东西,都是由于形与形、图与底的相互关 系。图形之间,图底之间,正由于对比产生差异而被我们所感知所接 受。 图与底的视差越大,图形越清晰,对视觉的冲击力越大。 那么,平面上 有那么多的东西,我怎么才能够确定它是否是最主要的呢?请看:易于 成为"视觉中心"的条件:

举报

  • 相关推荐
  • AI日报:阿里通义推Qwen-TTS模型;Cursor已支持网页和手机端;字节发布图像合成技术XVerse

    【AI日报】今日AI领域7大突破:1)阿里通义Qwen-TTS实现方言语音合成重大突破;2)Cursor发布Web版AI编程工具;3)字节XVerse技术实现多对象精准图像生成;4)NoteGen跨平台AI笔记工具革新知识管理;5)ManimML动画库可视化Transformer架构;6)TEN+Agent开源语音交互技术降低延迟;7)Chai-2抗体设计模型将药物研发周期缩短至两周。淘宝同时上线RecGPT推荐模型提升购物体验。

  • 销售易多页签能力上新:N个任务1屏聚合,丝滑体验0切换

    文章探讨了数字化办公时代CRM系统面临的两大痛点:1)多页面切换导致效率低下,如电销人员需同时处理多个客户咨询时,浏览器标签堆积造成混乱;2)业务流程跳转碎片化,如大客户经理需在不同模块间反复切换导致数据丢失。销售易CRM推出的多页签浏览模式通过分屏协作、多任务并行,显著提升了工作效率:电销人员单客户处理时间缩短33%,信息遗漏减少90%;大客户经理复�

  • 小红书可以长文了:正文可发千字以上 一键排版

    小红书官方近期开启长文功能内测,定向邀请创作者申请开通,为内容创作带来新体验。 长文创作有清晰流程:标题限20字内,正文支持千字以上输入,可插入图片、表情包。 长文支持一键排版”功能,点击后长文自动切分,还能借助AI自动生成封面配图与文章摘要。 后台提供6个排版模板,创作者可自选风格,灵活调整主题配色、封面、标题及摘要,实时预览效果,让长文

  • 电路板过孔、槽设计注意事项之线路板板打样

    本文总结了PCB设计中过孔设计的关键要点:1)过孔处理方式包括开窗工艺(易测试但影响防护)、盖油工艺(常规选择)和塞油工艺(高防护但成本高);2)过孔直径建议0.3-0.5mm,过小增加加工难度,过大易产生孔凹陷;3)非金属化槽孔宽度应≥1.0mm;4)插件孔公差控制在±0.13/-0.08mm;5)大面积铜皮需设置透气孔;6)半孔应采用专用工艺,槽孔长宽比≥2。合理设计过孔对PCB电气性能和加工质量至关重要。

  • 芯朋苏州办公室设计|Chipown20周年之礼|时象设计

    芯朋微电子(Chipown)在苏州设立新办公区,将古典园林美学与现代科技完美融合。这家专注功率半导体研发的高科技企业创立于2005年,总部位于无锡。新办公空间以"传统赋能创新"为理念,通过开放式设计、绿色生态与现代工艺的共生,打造出兼具人文性与自然性的工作环境。电梯间采用材质碰撞设计,会议室以苏州园林元素点缀,培训室配备灵活隔断,处处体现江南风�

  • 国内详细MCP教程网站有哪些?MCP服务资源平台去哪找?

    在当今快速发展的AI技术浪潮中,Model Context Protocol(MCP,模型上下文协议)作为一种新兴的开放标准协议,正逐渐成为AI领域的重要组成部分。 今天,我们有幸介绍一个专注于MCP服务器和相关服务的集合平台——AIbase。 AIbase平台为全球的AI开发者和爱好者提供了一个全面的MCP服务器资源库。据最新统计,该平台已经收录了超过 121231个 MCP服务器,涵盖了从热门推荐到最近更新�

  • 安德马丁创始人现场互动!斐雪派克“设计有说”活动成都启幕

    7月10日,斐雪派克联合国际室内设计大奖ANDREW MARTIN在成都举办设计师交流活动。活动聚焦厨房设计,探讨如何通过设计回应社会变迁与用户需求。多位设计师认为斐雪派克的"社交厨房"兼顾功能性与情感连接,创始人卢从周指出厨房体现的不仅是美学,更是人际关爱的美学。现代厨房已超越烹饪功能,成为家庭社交、休闲中心,开放式设计促进家人互动。斐雪派克将精密工艺与简约艺术融合,通过智能辅助提升下厨体验。设计师们展望未来厨房将融合科技与人文,成为自然自在的生活空间。活动深入探讨了厨房设计与用户需求的连接点,呈现了斐雪派克社交厨房理念如何应对现代生活挑战。

  • 墨刀AI生成原型图,产品设计快人一步

    国内原型设计平台墨刀发布"AI生成原型图2.0"功能,30秒即可生成可编辑原型图,大幅提升产品设计效率。该功能通过AI技术解决传统原型设计周期长、效率低、修改繁琐等痛点,支持文字描述或图片上传自动生成高保真原型图,并可二次编辑优化。这一创新不仅标志着墨刀AI能力的全面升级,更代表产品设计方式的一次革新,显著加快产品迭代速度。未来,AI原型设计有望成为行业标配,助力企业更快响应市场需求,提升产品竞争力。

  • 三喇叭对称设计,ALATS Q6音响打造立体音乐空间

    ALATS Q6音响以300W强劲功率重新定义听觉盛宴。采用三喇叭单元对称排列设计,低音醇厚震撼心灵,高音通透如穿透云层的阳光。配备高信噪比功放芯片,精准控制每个声音细节,即使最大音量也能保持清晰不失真。简约时尚的外观设计能完美融入各种家居环境。这款音响不仅带来前所未有的立体音效体验,更能满足音乐发烧友和影音爱好者的需求,是生活中不可或缺的音乐伴侣。选择ALATS Q6,就是选择一个充满音乐魅力的生活空间。

  • 探索康姿百德柔压磁性枕的奥秘,科学设计引领尊享健康奢华之夜

    康姿百德柔压磁性枕融合科技与奢华,重新定义健康睡眠标准。其创新设计的柔压指层采用高分子材料,模拟手指按摩触感,精准支撑头颈部,缓解日常疲劳。特殊工艺处理的乳突状结构增强抗菌防螨性能,四季恒温舒适。这款枕头不仅革新了传统睡眠产品,更倡导现代人追求身心平衡的生活方式,让每个夜晚都成为深度滋养之旅,在快节奏生活中打造宁静港湾,迎接充满希望的黎明。