网页设计

网站的组织结构

下面列出三种常见的网站组织类型:
- 分层结构
- 线性结构
- 随机结构（有时称为Web组织）
网站组织的示意图又叫站点地图。创建站点地图是开发网站的初始步骤之一。

分层结构

这一类型的特点在于有清晰定义的主页，主页上有指向网站各主要组成部分的链接。组块化（chunking）和“三点击原则”

线性结构

当网站或一组网页的目的是提供按顺序观看的教程、导览或演示时，采用线性组织就比较合适。
在线性组织中，网页按前后顺序逐一被浏览。某些网站总体而言是分层结构，但在一些小的区域采用了线性结构。

随机结构

随机结构没有提供清晰的网站遍历路径。通常没有明确的首页，也没有明显的结构。
视觉效果设计原则

四条视效设计原则：重复、对比、邻近、对齐。

重复：在整个设计中重复使用视觉组件

重复出现的细节使作品更为紧凑。无论是颜色、形状、字体或图像，重复有助于设计的统一。

对比：提升视觉刺激效果，吸引注意力

运用对比原则，可以强调页面元素之间的差异，让作品看起来更有趣、对访客的吸引力更大。网页的背景颜色和文本颜色应该有良好的对比度。

邻近：组合相关的项目

当设计者采用邻近原则时，相关的项目在物理上被放置在一起。无关的项目之间保持足够的分隔空间。

对齐：将元素对齐形成视觉上的统一效果

对齐有助于提升网页凝聚力，组织页面时将每个元素与页面上的其他元素对齐（垂直或水平）。
无障碍访问设计

四项原则：可感知、可操作、可理解、稳健的，可简写为POUR。
- 内容必须是可感知的。可感知的内容也就是说容易被看到或者容易被听到。
- 内容中的接口组件必须是可操作的。可操作的内容具有导航形式，或其它的交互功能，这些功能可以借由鼠标或键盘来实现或操作。
- 内容和控件必须是可以理解的。易于理解的内容也易于阅读，按一致的方式组织，并在适当的时候提供有用的错误提醒。
- 内容应当足够稳健，从而能够应对当前以及未来的用户代理使用，包括辅助技术。
适用于Web的写作风格

网页的最佳宽度是960px。

字体选择

常见字体：Arial、Verdana、Georgia，或Times New Roman等。

字体大小

建一张字号设置的原型页，以便测试不同浏览器与显示器设置下的表现。
导航设计
- 面包屑导航
- 利用图形实现导航
- 动态导航
页面布局设计

线框和页面布局

线框（wireframe）是网页设计的草图或蓝图，展示了页眉、导航、内容区域和页脚等基本页面元素的结构。

页面布局技术

固定布局

固定布局技术有时也被称为固体或“结冰”（ice）设计。在此设计中，页面内容的宽度是固定的。

流式布局

流式（fluid）布局技术，有时也称为“流体”布局，主要使用百分比来设置各个部分的宽，从而生成了能“流动”的页面，通常占据100%的浏览器窗口。不管浏览器大小如何变化，网页内容都会自动“流动”以填满整个浏览器视窗。

参考书籍：［1］Terry Felke-Morris.学习HTML5［Ｍ］.第七版.北京：清华大学出版社，2017

04HTML5学习之网页设计相关推荐

2013年值得我们学习的网页设计作品【系列二】
2013年,网页设计领域出现了几个新的流行趋势,最热门的要数响应式设计(Responsive Design)和扁平化设计(Flat Design)了,另外大图片背景.视频背景设计也被越来越多的设计师采 ...
【学习】网页设计技术 - 在线复习题
一.单项选择题 1．在VBScript中,注解前使用:( C ) A．// B. /*-*/ C.' D." 2. Response对象的( ...
php网页设计设计心得体会,网页设计心得体会范文
范文参考网最近发表了一篇名为<网页设计心得体会范文>的范文,好的范文应该跟大家分享,重新编辑了一下发到范文参考网. 一.网站规划本工作室主要用来做个人网站,主题是介绍自我,让更多的朋友认 ...
干货！2018年你值得一看的网页设计作品集赏析
网页设计作品集=门面+能力网页设计作品集对网页设计师而言,既是网页门面,也是个人专业素养的体现.那么在作品集设计上万不能掉以轻心.无论是制作一份简约大方还是极具表现力的精良作品集,设计师们都必须付出 ...
UI设计师必备日系网页设计网站参考灵感来源
01.straightline 一个收藏日本优秀站酷的社区,收录近 9000 个优秀的网站,Straightline 可以注册用户,登录后可以收藏自己喜爱的网站,进行精选和收藏,方便下一次浏览. 02 ...
PS网页设计配图之道：首图的设计技…
一.双色冰淇淋渐变首图当作全屏出血大图处理时,你可以将图片调色成为双色渐变,有点像我们吃的双色冰淇淋球,选一组你认为能激发心理氛围的配色,最好是对比色,带来强烈的视觉落差.由于要作为背景而存在,整体 ...
html+css+javascript 网页设计从入门到精通_绵阳美工设计学习
导语概要网页设计培训系统学习四大软件,让你掌握8大电商美工核心技能快速咨询网页设计(webdesign,又称为WebUIdesign,WUIdesign,WUI),是根据企业希望向浏览者传递的信息( ...
来和小伙伴一起学习响应式网页设计吧
响应式设计现在已经成为网页设计师学习的焦点.优设哥发现群内有很多相关的讨论了,这说明我们平时接触该类案例越来越多. 你会渐渐发现,我们身边越来越多的企业和客户关注到响应式网站,作为勤奋的设计师,我们怎 ...
dw网页设计作品_UI设计需要学习哪些软件如何成为高薪UI设计师
UI设计需要学习哪些软件?如何成为高薪UI设计师?有互联网的地方就有UI设计,更值得一提的是UI设计入行简单,薪资却可以媲美程序员.但成为高薪UI设计师并不容易,你需要具备扎实的理论功底并熟练掌握 ...
如何高效的学习前端的网页设计？
如何高效的学习前端的网页设计? 那我就针对"高效"为你做一些推荐. 如果你喜欢看图文类的教程那么推荐你菜鸟教程这个网站 https://www.runoob.com/ 对新手入门 ...

04HTML5学习之网页设计

网页设计

网站的组织结构

分层结构

线性结构

随机结构

视觉效果设计原则

重复：在整个设计中重复使用视觉组件

对比：提升视觉刺激效果，吸引注意力

邻近：组合相关的项目

对齐：将元素对齐形成视觉上的统一效果

无障碍访问设计

适用于Web的写作风格

字体选择

字体大小

导航设计

页面布局设计

线框和页面布局

页面布局技术

固定布局

流式布局

04HTML5学习之网页设计相关推荐

最新文章

热门文章