网页界面构图与设计教学大纲

网页界面构图与设计教学大纲（精选10篇）

篇1：网页界面构图与设计教学大纲

《网页界面构图与设计》教学大纲

课程名称：网页界面构图与设计 课程编号:0651232070 课程性质：独立设课 课程属性:必修课

课程总学时：2周学分：2 实验学时：20 实验课学分：1.5 面向专业：艺术设计（网络视觉设计方向）教研室名称：视觉传达教研室 应开实验项目数：5

一、课程说明

网页界面设计是将技术性与艺术性融为一体的创造性活动。网页设计是以功能性为第一指导原则，以技术因素为主要考虑对象，以完成或实现必要的功能为目标。以字符组成的界面可以起到基本的信息传达作用，同时技术要求相对较低，易于实现，并且有较好的稳定性，故而这种形式的界面在很长一段时间内是人机交流的主要形式。

二、课程教学要求

网页界面设计课程的教学目的和任务主要有两个方面：一方面本课程通过对网页用户界面设计中的信息传达、视觉符号的应用等专业知识的讲授，让学生能掌握网页设计中相关的设计思维与视觉表现方面的知识，让学生把网站中要传达的信息通过数码交互媒体的手段展现出来。另一方面通过对相关设计软件的使用进行课堂讲解与练习，使学生能够掌握相关软件操作的基本知识，并能够通过灵活应用课堂知识处理一些在实际项目中遇到的技术困难。

要求学生掌握基本内容为： 第一章 网络基础 1.网络 2.网络原理

3.网络设计作品的上传、下载和展示 4.网页 5.网站

第二章 网络艺术设计 1.网络艺术设计基础 2.网页设计 3.网站设计 4.网络其他设计

第三章 网络设计特色分析 1.浏览人群分析 2.网络交互艺术 3.西方网络艺术

4.网络艺术设计现状分析 5.网站特色设计 本课程的教学方法为：

1.重方法引导、重设计原理、重思维创意。2.把理论和实践练习相结合来掌握知识。3.通过专题训练和分组讨论来巩固提高知识。

4.通过成功的设计案例，让学生们了解本设计作为核心基础课程的重要性。

三、理论教学内容与学时分配 第一章 网络基础（5课时）1.网络 2.网络原理

3.网络设计作品的上传、下载和展示 4.网页 5.网站

第二章 网络艺术设计（10课时）1.网络艺术设计基础 2.网页设计 3.网站设计 4.网络其他设计

第三章 网络设计特色分析（19课时）1.浏览人群分析 2.网络交互艺术 3.西方网络艺术

4.网络艺术设计现状分析 5.网站特色设计

四、考核方式与成绩构成

考核方式：阶段作业、理论与实践考试方式

成绩构成：平时成绩10%、期中成绩30%、期末成绩60%（其中技能成绩占70%，理论成绩占30%）

五、教材与参考书 推荐教材： 1.《网页界面设计创意指南》 侯慧俊主编 上海科学技术文献出版社2009年版

2.《网页界面设计艺术教程》 张帆、罗琦、宫晓东著 人民邮电出版社 2002年版 参考书目：

1.《网站规划与网页设计》 谢成开、孙丹丽编着 西南师范大学出版社 2009年版

2.《网页艺术设计》 彭纲等编著 高等教育出版社 2002年版

篇2：网页界面构图与设计教学大纲

多媒体设计

多媒体技术是指将多种单媒体复合而成的技术。多媒体技术融合了各种视觉和听觉媒体，包括动画、文字、图形、图像、语言、音乐和立体声响等，多媒体网页UI界面可以让用户同时接受多样的媒体信息来源。网页UI界面设计中使用多媒体技术可以体现以下几个特点：1）集成性，对远程多媒体的影音信息统一取得与发布。2）交互性，人性化的实现信息传播，能够主动选择和控制信息流方向。3）非线性，创建了超文本链接方法，把灵活展示浏览内容。4）实时性，实时控制多媒体信息，及时配合用户指令。5）动态性，用户可以按照自己的需求选择信息使用方式，甚至重组信息的各种表现形式。

网页交互设计

交互设计需要解决的是人与机器之间互动的问题，是表现层的东西，好的交互设计方案能够让用户感觉网页非常好用。怎样的网页交互设计才算是好的方案呢？1.让人有耐心等待。根据网络调查，大多数用户对网页打开的等待时间最多坚持5秒钟，如果5秒内页面都不能打开，那这个页面上的内容将没有任何意义都就将。所以在交互设计时，需要考虑网页等待时给用户提供的信息。最好的方式是反馈，当用户等待时，告诉用户他的操作是否成功并且将剩余的等待时间实时呈现，这样就能有效解决用户不能耐心等待的问题。2.让人不用动脑筋想。好的网站能够帮助用户快速完成任务，要达到快速完成任务的目的，交互设计必须使页面简单，尽量让用户浏览时不收不必要的干扰，最好能够符合用户心智模型。因为，大部分的用户在浏览网站时希望的是能快速找到勉强应付的方案，而不愿意主动寻找方案，百分之八十的用户只会用百分之二十的功能。

网页UI界面设计展望

目前，网页UI界面设计主要是三维的视觉界面和二维的图形界面，同时辅以动画、声音等多媒体插件布局设计。随着计算机技术的不断发展，三维立体的操作界面系统会在网页设计中逐步普及，三维立体界面的直接操作是虚拟现实（VirtualReality）交互性的一个重要表现方式。三维虚拟空间中的直接操作包括平移、拾取和旋转等操作，例如如今比较前沿的3D影装和多点触控技术。三维直接操作使得网页UI界面设计不再仅仅局限于视觉效果的三维变换，可以实现类似于四维空间的人机直接交互，从而更好的完成用户操作。

结论

篇3：人性化网页界面设计的进展与展望

我们已经进入了互联网时代, 互联网正在深刻影响政治、经济、思想、教育、艺术等人类社会的各个领域。网页是人与互联网中计算机之间以网络为平台的信息界面, 是科技与艺术的结合。在网络营销、网上数字图书馆、网上新闻、影视、图片、艺术品的欣赏和交流等绝大部分网络活动中, 界面设计变得越来越重要。近年来, 一些网页界面设计研究人员强调要进行以用户为中心, 符合用户认知心理, 使用户感到舒适、满意的“人性化网页界面设计”。王春鹏曾经建议人性化网页界面的“赏心、悦目、传情、达意”设计原则[1];王晓蓉、杨治明曾经建议人性化网页界面设计要具有美观性、舒适性、简洁性、一致性、高效性和安全性[2]。在这些比较显而易见的原则之外, 笔者曾经从认知心理学出发, 建议“人性化网页界面设计”要特别注意以下几点[3]:第一, 要合理处理不同对象的刺激强度关系, 解决许多界面上信息盲目堆积的问题。设计时既要考虑每一个对象的刺激强度都能被用户所感知, 又要考虑各个对象间刺激差别的大小, 保证用户能够将重要的内容对象从周围的刺激对象中提取出来。为了简化界面信息从而提高浏览速度, 还要通过有关刺激对象的相似性、相邻性等特征设计, 使它们构成“整体结构特征”。这样不但可以简化需要知觉的信息量, 还有利于提高知觉的速度。第二, 要意识到用户“注意的加工容量和选择性”。“注意”是指对一定对象进行指向和集中的心理活动。认知心理学把“注意”理解为人体加工信息的有限容量, 这种有限性来源于人的心理智源的有限性。人的加工信息容量有限, 所以“注意”的一个关键问题是“注意”的选择。在界面设计中, 必须把注意力引向用户需要的信息和采取的行动上。必须避免同时对注意力过多竞争的设计。网页界面设计并非要把整个页面塞满了才能体现信息的丰富性, 而是需要合理的安排, 使界面达到平衡。第三, 要通过界面设计弥补记忆弱点。设计时应优先考虑选择用户已有认识的相关网页界面元素, 从而提高用户的知觉效率, 将知识经验与组块综合考虑, 利用长时记忆中的语义知识规则来组块, 以便促进短时记忆, 弥补人在进行界面操作时容易遗忘的不足。

这些讨论对网络界面的设计十分重要和有益, 然而, 网页是科学和艺术结合的产物, 设计界面必须同时考虑技术和艺术因素。从根本上说, 网页的生命是信息, 用户到网页上来是寻找特定信息的。网页界面设计必须为它承载的信息内容服务。由于不同用户寻找的信息不同, 界面设计形式也应该针对不同用户而不同。网页界面设计既要考虑普遍的人类认知心理, 也要考虑特定用户的特定认知心理和需求。也就是说, 网页界面设计既要人性化, 也要“个性化”。这正符合网络界面最近几年的发展趋势。

最近几年网络界面发展趋势的最重要特点之一是个性化推荐系统的广泛采用[4]。当前互联网上有太多的信息, 而且这些信息变得越来越多。如果你想看电影, 有数以百计的电影网站, 例如梦幻天堂·龙网, 或者Net flix, 上面各有数万部电影;如果你想看书, 也有数以百计的读书网站, 例如中华网读书频道或者Amazon, 上面也各有数百万本书。要对它们浏览一遍或者挑选简直不可能。为了吸引网民来自己的网站, 各个网站都竭力推荐自己的资源。自然, 每个人的兴趣不一定相同, 要准确推荐, 高效、长期地吸引最多的访问者, 从而获取最大的商业利益, 其设计就需要相应的科学理论和技术。“据VentureBeat统计, Amazon的推荐系统为其提供了35%的商品销售额。Netf lix开出100万美元的奖金, 奖励给能把他们网站的产品推荐精确度提高10%的人”[4]。在科学重要性和应用前景的双重推动下, 许多物理、数学、计算机、网络科学的研究人员投入了个性化推荐系统的研究。“一个完整的推荐系统由3个部分组成:收集用户信息的行为记录模块, 分析用户喜好的模型分析模块和推荐算法模块。”[5]也就是说, 推荐系统首先要设法搜集一个用户过去在网上从事类似活动的信息, 然后根据这些信息推断这个用户下一次活动的最可能选择。最后使用一定的推荐算法从产品集合中筛选出最合适的产品推荐给用户。推荐系统已经在电子商务[6]、新闻推荐[7]、数字图书[8]、图片网站[9]、农业信息服务[10]等网络活动中被广泛采用。几乎当你登录任何一个网站时, 不等你设法寻找需要的信息, 马上就有网站主动推荐给你的不少信息等你选择。无论你选择其中一些, 还是坚持自己搜索, 你每前进一步, 都会看到追随你的不断推荐。这些推荐当然对于每个人是不同的。因此, 也可以说, 现在绝大多数网站都已经实现了某种程度的网页内容个性化[11], 自然每个网页的界面设计形式也应该个性化。可惜的是, 到目前为止, 网页的界面设计个性化还没有得到足够的重视, 绝大多数网页的个性化程度还很有限, 绝大多数网站的系列推荐网页的界面形式仍然是基本一致的。

以科学网为例。科学网是由中国科学院、中国工程院和国家自然科学基金委员会主管, 中国科学报社主办的综合性科学网站。除了学术信息交流之外, 个人博客是其中非常重要的内容。目前大量的科学工作者 (包括在校学生) 经常访问科学网或在科学网上具有个人网页。如果有兴趣, 只要在科学网主页 (http://www.sciencenet.cn/) 上输入个人信息就可以注册成为博主, 所有博主均拥有自己的网页, 可以自由发表博文 (包括题材广泛的见解、议论、科研成果等) , 也可以在别人的网页上发表评论。每个网页设有“加为好友”的链接点, 点击就可成为好友, 建立相当长期的链接 (关系) 。如果仅仅浏览一个网页, 也会建立两个网页之间的“来访者”链接, 但是这种链接短时间后会失效。图1显示的是2012年8月18日的科学网主页, 虽然界面中也运用了一些图形图像、冷暖色对比等设计元素来活跃版面, 但网页的整体设计还是明显的科学风格, 比较严肃、冷静、简洁。

图1所示的主页是面对所有用户的, 科学网的用户主要是科学工作者, 其界面设计主要考虑科学工作者的认知心理。如果某个用户已经注册成为博主, 而且在图1所示的主页上方输入用户名和密码登录, 科学网立刻会显示图2所示的界面, 其中含有大量的个性化推荐内容。在图2显示的部分中, 点击“好友的动态”, 网页将如图2所示, 显示这个博主所有好友的最新博文交流窗口。这种仅仅推荐直接链接的“好友”博文的推荐系统显然是最原始、最简单的。实际上, 各个科技人员感兴趣的博文很不同, 并不一定都首先喜欢好友们的, 而且这些好友的网页点击图标都在每个博主网页的最显要处, 可谓“近在眼前”, 没有必要推荐, 数不清的非好友网页上感兴趣的博文才真需要推荐。因此, 完全有可能大大改进这种推荐的有效程度。科学网的用户主要是科学工作者, 没有任何商业用途。所以这些登录后页面和层层推荐网页的界面设计继续沿用主页严肃、冷静、简洁的设计形式和风格还是基本可以被用户接受的。

再以京东商城为例。京东商城是中国电子商务领域最受消费者欢迎和最具有影响力的电子商务网站之一, 在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴用品、图书、食品等11大类数万个品牌百万种优质商品, 有着庞大的用户群。2010年, 京东商城跃升为中国首家规模超过百亿的网络零售企业, 连续六年增长率均超过200%, 现占据中国网络零售市场份额35.6%, 连续10个季度蝉联行业头名[12]。最近 (2012年8月下旬) 京东商城与几个大规模电器商之间的价格战正成为包括中央电视台在内的各大媒体的热门新闻。图3是2012年8月18日的京东商城主页 (http://www.360buy.com) , 界面设计色彩比较鲜艳, 富有层次感, 能够突出各个推荐的重点。

在京东商城的主页上方输入用户信息登录之后, 立即会看到图4所示的对这个用户的推荐信息框架。推荐的主要栏目是“猜你喜欢”。京东商城的推荐系统主要根据用户在“关注”中收藏的信息及以往的购买记录加以分析进行推荐。这些登录后页面和推荐网页的界面设计基本沿用主页的设计形式和风格。作为电子商务网站如果能进一步在界面形式上实现个性化设计, 根据用户登录信息把购物用户划分为若干类型, 如不同年龄、不同性别、不同职业、不同地域等, 再根据用户“关注” (或收藏) 信息和以往购物的长期记录, 判断其最可能的兴趣类型, 针对每个类型设计出符合他们认知心理的界面形式。这种针对每个用户不同特征的个性化网页界面设计, 才应该是真正意义上的人性化界面设计。

一个好的界面不仅能正常发挥所有的功能、帮助用户完成目标任务 (如查询、购买等) , 还能通过提供良好的用户体验赢得客户的忠诚度, 从而实现网站的运营目标。然而如何方便用户的使用和交流, 提高界面可用性, 吸引用户的兴趣, 激发用户的共鸣, 满足用户的情感, 使用户对网站记忆深刻呢?随着个性化推荐系统的不断进步, 个性化网页界面设计也必然越来越引起重视, 这必然大大促进网络信息交流和各种互动活动。相信首先在个性化推荐系统基础上采用个性化网页界面设计的网站, 必然会多淘到一桶金。

参考文献

[1]王春鹏.谈网络界面设计的人性化[J].包装工程, 2007 (06) .171-173页

[2]王晓蓉, 杨治明.网络课件界面的人性化设计[J].中国冶金教育, 2009 (02) .44-46页

[3]何亭.基于认知心理的网络界面设计研究[D].苏州大学学位论文, 2009

[4]刘建国, 周涛, 汪秉宏.个性化推荐系统的研究进展[J].自然科学进展, 2009 (01) .1-15页;王国霞, 刘贺平.个性化推荐系统综述[J].计算机工程与应用, 2012 (07) .66-76页

[5]刘建国, 周涛, 汪秉宏.个性化推荐系统的研究进展[J].自然科学进展, 2009 (01)

[6]刘旭东.个性化网页推荐系统在电子商务中的设计与应用[J].烟台职业学院学报, 2008 (04) .87-92页

[7]彭菲菲, 钱旭.基于用户关注度的个性化新闻推荐系统[J].计算机应用研究, 2012 (03) .1005-1007页

[8]李卫华, 卢雨民, 梅红.浅谈数字图书馆个性化信息推荐系统[J].科技广场, 2007 (09) .109-110页

[9]许辛, 康威, 石恒华.图片门户网站个性化推荐系统关键技术探讨[J].中国传媒科技, 2012 (05) .66-69页

[10]李快追, 孙艳玲.个性化推荐系统在农业网站中的运用研究——以四川农经网为例[J].市场论坛, 2009 (02) .70-72页

[11]蒋伟.个性化网页浅析[J].魅力中国, 2009 (35) .70页;王术, 付关友, 朱征宇.面向个性化服务的网页特征描述[J].计算机工程与设计, 2005 (03) .651-653页;王怀宇, 李景丽.利用Flash交互技术实现个性化网页布局[J].中国教育技术装备, 2011 (12) .96-98页

篇4：网页界面的设计与创新

关键词：网页设计；创新；网页艺术

中图分类号：TP393 文献标识码：A 文章编号：1671-864X（2016）02-0289-01

网页设计虽相对与其他类设计来说较为“新”，但也经历了推陈出新的过程，从设计理念方面，也逐渐从最初版式的千篇一律、设计的陈旧老套，发展到现在更为注重其网站的个性化表现与用户体验。

为了能使网页的布局更加合理，并且更能在众多设计中脱颖而出，网页的设计中我们要遵循一下几个原则。

一、主题鲜明

每一个设计都有它的诉求，这个诉求通俗的来说就是主题，这个主题也就是在于它的目的性。有个性诉求，有主题倾诉并不意味着设计师的一意孤行，归根到底是要传达自己的理念。推广一种新的概念也好，卖产品也好，如何让受众一眼就能迅速的识别，鲜明的主题应该是最有力的传达。

认知心理学告诉我们，较小而分立的信息更为有效和容易浏览，在北野花艺原创官方网站的页面设计中，文字的排版方面就注意了这一点。合理安排文字的大小、字间距长度的把握，为使其网页中的重要信息更迅速的获取和记忆。网页艺术设计作为的视觉设计范畴一种，达到最佳的主题诉求效果是其核心目的。以点带面，突出主题效果，增强网页的冲击力和有效性，以期获取浏览者更多的注意力。

网页艺术设计与网站主题的必须是走在一条线上的：设计不能脱离艺术感，美感与功能必须同步实现；还是要着重通过具有艺术感、有完整功能性设计达到精准的主题阐释。当然，有些情况下，“功能”即是“主题”，还有些情况下，“美”即是主题。例如，北野花艺原创官方网站是一个鲜花类企业站，就应该将本企业的文化内涵、风格特点用网页的形式表达给浏览者，并能将产品得到推广，这就是其功能的体现。

如何把握网页的诱导力和鲜明主题诉求的展现，具体到实践中可以通过对网页内在的逻辑关系和秩序的把握运用来达到。在北野花艺原创官方网站的设计上，就注重了空间层次的表达，将网页中的模块和元素运用叠加、交错的方法产生空间感。

二、形式与内容统一

任何设计都有一定的内容和形式。设计赖以存在的基础是构成设计的一切内在要素的总和，也就是内容，这是设计的核心所在；内容在一定程度上决定了形式，形式又通过它的特殊展现反作用于内容，形式对内容的完美表现才是一个优秀的设计。

要确保网页上保留的么一个元素有价值，而不是为了展现技术而做一些华而不实的设计，那样得到的效果可能会适得其反。设计需要思考，功能、美感、形式以及内容每一个环节都不可落下。

三、强调整体

网页的整体性作为网站的关键元素，必须引起注意。当然这包括内容和形式上的整体性，我在这里主就设计形式上的整体性进行一个探讨。

作为传播信息的网页，它在表达的是一定的内容、主题和意念的时候，必须要为人们所理解和接受，满足人们的实用和基本需求目的。使人能获取一定信息又能产生审美体验，能对网站独特风格有所感知，这多归功于网页设计的整体性。

1.为了突破传统网站的版式陈旧、色彩单调等问题，展现出鲜花类企业站的特色，能够使其在众多的同品牌行业网站中眼前一亮，因此在设计北野花艺原创官方网站的时候，在颜色的选择与搭配上，为网站选择了白色#FFFFFF为基色调，深蓝色#0B2757为辅助色，一个站点通常只使用两到三种标准色，并且应注意色彩搭配的和谐；可突出其内容、产品等，使网页整体相协调。

2.在北野花艺原创官方网站的BANNER设计上，本着富有强烈的视觉冲击和使人过目不忘的效果，选择绿色植物为背景占满整个网站头部区域。在BANNER的字体排版设计方面，采用中英文相搭配，上下排版，居中展现。在导航的制作上与普通网站不同的是，运用半透明的深灰色作为底色，其半透明可令网页拥有清透感。

3.在北野花艺原创官方网站整体页面的布局排列上，采用对称对比布局。深色和浅色的相互映衬。与此同时，要将视野放到通过独特的风格的构建和强烈的视觉冲击力营造，以此来鲜明地突出设计主题。但是从这种意义上来言，强调网页结构形式的视觉整体性和牺牲灵活的多变性存在巨大的矛盾，就是说“物极必反”起到相反作用。所以，在网页整体性设计的同时要加以注意：“整体”是“多变”基础上的整体。

4.在北野花艺原创官方网站模块的设计上，摆脱了传统的布局方式，注意运用点、线、面等基础元素外，点、线、面等基本元素的设计语言表达力度，都倾向于排版设计和是视觉空间的建构。版面的垂直排列，则给人动感的传达，再搭配上动态特效，使页面多变具有趣味性。

5.在文字的字体选择和排版上要慎重，不同的行业的网页应当用不同风格的字体来搭配。在北野花艺原创官方网站的设计中采用了微软雅黑、方正兰亭细黑两种作为主要字体，这两种字体不仅美观便于浏览者的识别，而且常用字体也便于网页的加载，避免出现乱码的现象。

目前还是有很多同行业的网站都几乎差不多，除了网站的内容以及网站布局、色调外，其余几乎一样。所以，设计师在进行网页设计时的创新就显得非常的重要。因此，我想以北野花艺原创官方网站为例，突破原有的鲜花类企业站，设计一套具有自己企业风格特色的网站。网站建设是需要创新的，不然这个行业很难在这个竞争激烈的市场上生存。所以，在网站制作过程中，要具有创新意识，根据不同行业情况具体分析和打造极具特色的网页设计，这样才利于网站建设行业技术的进步和发展。

参考文献：

[1]《视觉文化时代的传统媒体与新媒体版式设计研究》 来源：学位论文 江南大学 2004 作者陈虹

[2]《论网页与界面设计中艺术的运用》来源：学术期刊《重庆电子工程职业学院学报》2009年2期 作者：林南秀

[3]《网页设计中的动态艺术效果及其技术实现》 来源：学位论文 湖南工业大学2007 作者赖守亮

篇5：浅谈网页设计中的构图

随着全球经济的迅速发展,我们已经进入了网络时代。网络不仅提供了一个开放、互联、高效的平台,更为人们提供了一种生活方式。当今网络经济被广泛喻为“眼球经济”,也正好说明了大众的关注力对网站建设和发展起着何等重要的作用。因此,网站的建设也逐渐从单一的技术型设计转向了多元化、人性化、充满感染力的技术艺术复合型设计。那么要怎样才能吸引更多的浏览者来访问我们的网站呢?网站的内容固然重要,但是爱美之心人皆有之,网站的漂亮与否更是另一个决定性因素。所谓网页构图,又称为网页布局,是指网页设计过程中各个构成要素的结构配置方法。它是表达网页设计的思想内容并获得艺术感染力的重要手段,因此一个好的构图会为网页的表达和美化添色不少。

在网页设计中,我们需要通过构图来确立网站的风格,引导浏览者的访问,突出网站的创意。通常我们又采用动静结合的方式来设计我们的网页,让其更加活泼,更富有感染力。

我们常见的网页构图主要有以下几种:

1.1 左右式结构

这种结构将网页分成左右两个部分,是网页布局结构中较为简单的构图。一般来讲,页面的左半部分设置为栏目导航,而右半部分则列举详细内容。此结构比较直观,便于浏览者的访问,我们见到的大部分论坛都是这种结构的,有一些企业网站也喜欢采用此结构,但是由于此结构信息含量比较少,不适合制作大型的网站。

1.2“工”字型结构

就像“工”字一样,这种结构是左右式结构的延伸。这种结构通常在网页最上方增加了一个部分用于放置标题以及广告横幅,在接下来的左侧安排一窄列链接,右列则放置很宽的正文,在最下方增加了一个部分用于放置网站的辅助信息。这种结构同样由于信息含量比较少,不适合制作大型的网站。

1.3“同”字型结构

也被称为“国”字型结构,就像“同”字一样,是一些大型网站所喜欢的类型,即最上方是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分别罗列一些小条的内容,正中央则是主要部分,在网页最下方是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的最多的一种结构类型,其优点是直观、有条理、页面均衡,缺点是版式稍显呆板和僵化。在采用这种布局时一定要注意色彩的和谐搭配,通过巧妙的用色,能够调节页面的整体韵律。

1.4“回”字型结构

就像“回”字一样,此结构通常在页面的底部增加了一条横向的菜单,作为广告条、或本站的另一大版块的超链接区。这种布局的优点是充分了利用有限的页面空间,增大了主页面的信息量,缩短了与正文链接的路径,使访问者比较便捷、直观地浏览所需要的信息,缺点是造成页面拥挤、导致四面封闭、缺乏延展性。

1.5“匡”字型结构

“匡”字型结构其实是“同”字型结构和“回”字型结构的变形,将“同”字型结构逆时针旋转90度,或是将“回”字型结构布局的页面右边的栏目条删除,便得到的此结构。这种布局结构集合了前两种结构的优点,克服了“回”字型结构封闭的缺陷,所列信息量和“同”字型结构大体相同,非常适合于各种大型网站。

1.6 自由式结构

自由式结构突破了一些传统的布局模式,大胆的利用了空间设计。这种结构的页面通常被设计作为网站的首页,设计者往往选择一些精美的、极富视觉冲击力的图片以及一些Flash动画作为页面的主体,导航部分往往被当作次要元素处理,自由地安排在页面上,起到点缀、修饰以及均衡页面的效果。此结构非常适合于时尚类网站以及极具个性的个人主页。

1.7 Flash网站

这种结构的随意性类似于自由式结构,但是它采取了目前网络上最为流行的Flash来完成页面创作,是一些楼盘、汽车、时尚产品宣传网站的最爱。由于Flash具有动感、时尚的特点,在视觉和听觉上都给人以极强的冲击力,达到了很好的宣传目的。

2 准备工作

在进行网站设计之前,我们必须在以下几个方面做好准备工作:

1)确定网站的主题与定位:

所谓主题也就是网站的题材,网络上网站的题材丰富多彩,各个题材交叉结合又可以产生新的题材,其实不管选择什么主题,都要有一个突出的特点来吸引网民。因此我们设计网站之前,首先要分析建站的目的以及网站的浏览对象,使我们设计出来的网站能够风格与该网站的主题相吻合,增强信任感和亲和力。

网站的建设宗旨不同,面向访问对象也就不同。我们应根据潜在的访问对象对网站进行定位。如果访问对象是科研人员,网站具有科学、严谨的特点;如果访问对象是年轻群体,网站应该采用活泼、动感、时尚的设计;若访问对象是老年人,网站设计应该营造出一种祥和、温馨、关爱的氛围……网站的定位是在对网站类型、风格、访问对象、内容安排、链接结构、CI要素等诸多元素进行综合分析后,围绕主题,用独特的视觉语言进行艺术化的特色描述。

2)合理创建页面的导航和链接

我们必须根据网站的服务项目,搜集素材后并将内容划分成不同的栏目版块。根据每个栏目版块的重要优先级别规划和创建导航条。将栏目进行合理的规划,能够使访问者快速地了解本站的内容结构,方便他们找到相应的栏目并查阅所需信息。模糊的栏目设置常常使浏览者盲目不知所措。

网页之间往往通过链接来实现跳转。选择适当的链接结构对整个站点的设计将起到引导作用。若链接的结构使用不当,会使重要页面不够突出,重要信息不易获取,这就违背了网站设计的初衷。

3)确定网站的CI形象

CI(Corporate Identity)是指通过视觉来统一企业的形象。一个杰出的网站和实体公司一样,也需要整体的形象包装盒设计。准确而有创意的CI设计对网站的宣传推广有事半功倍的效果,也让我们在构图设计时有了一个明确的指导方向。

3 结束语

通过以上的准备工作,我们往往能够确定网站规模、访问对象、主题特色和链接结构等信息,我们对这些信息综合考察后便可以选择适合于当前网站的构图方案进行创作。但是我们在设计过程中必须把握一个原则:网页的艺术设计是为了更好的为网站的内容服务,我们千万不要只是单纯地为了表现艺术而设计。

参考文献

[1]吴涛.网站全程设计技术[M].北京:清华大学出版社,2003.

[2]张晓清.网页构图与设计[M].北京:人民邮电出版社,2001.

篇6：网页界面构图与设计教学大纲

关键词：网页界面设计；平面设计；区别

0 前言

一般会对网页界面设计与平面设计是不是同一个概念感到迷惑，但其实是有区别的，但是区别包括有哪些，没有系统的总结，现为更加深入的研究其差异，帮助新手更好的理解有关网页界面设计与平面设计的知识，现就要两者的差异开展讨论。

从设计层面分析，网页界面设计与平面设计均属于设计范围，但同时他们也有所差异，从其发起时间分析，网页设计具有一定的功能性质，并将功能性作为最主要的指导原则，以字符组成的界面达到传达基本信息的作用，需要经过较长时间的人机交流。随着信息技术的不断发展，网页界面设计是将艺术与技术进行融合的活动，包括有网页视觉设计还有交互设计两种。而平面设计的过程中，主要是设计者通过具体的视觉符号，将之转变为具有概念性的代表。现就从其视觉传达设计方面开展讨论，分析网页界面设计与平面设计之的差异。

1 网页界面设计与平面设计之间的区别分析

分析两者间的差异，重点分析其视觉传达设计方面的区别，其中包括有色彩模式、板式设计、字体应用还有图形的使用、浏览方式及信息传播。现将几点展开分析，讨论网页界面设计与平面设计之间的区别，如下所示。

1.1 色彩模式差异分析

色彩模式方面的差异，网页界面设计与平面设计，两者采用的色彩模式使完全没不一样的，平面设计重视后期的印刷工作，主要是为了能达到理想效果，少不了这一流程，一般是将CMYK色彩模式应用于平面设计中。但是网页界面设计主要是将显现方式作为依据，一般将RGB作为其色彩模式。平面设计针对色彩利用这一块重点突出视觉的冲击力还有对视觉流的指引，关于这一点和网页设计上面的BANNER设计是有类似之处的。网页设计，特别是产品类设计，重点要突出信息之间的链接，如果色彩过于注重，容易出现视觉疲劳，这就是在色彩模式应用的区别。

1.2 板式设计差异分析

首先，网页界面板式设计中，针对其比例关系的要求一般是：页面中所规定的空间长宽比、实体内容和空白的面积比例还有网页被分割时的比例、图文间的关系、各造型元素间的比例等。其次，且平面设计的节奏以及韵律主要是通国音乐启发，富有节奏感，一般强调“节拍”，如果是韵律比较多侧重点又在于“变化”方面，通常，如果说韵律感不足，一般指的是缺少变化；而描述其过于呆板，意在说明节奏感不足，变化没有条理。

1.3 字体应用方面的差异分析

在整个设计过程中，平面设计采用的字体更为自由，并且不需要担忧后期的处理工作，全部的文字与图形的输出是同时印刷的，但是网页设计就需要从整体分析，一般其文字的使用范围也会比较小，主要是因为要减少在输出作品的时候对服务器的压力，有html的特性，使用的字体是由设计者在操作时进行设置的，随着技术日益发展，现要将此差异拉近，现可以使用html5中国API运用个性化的字体设计，这样就不会将个性化的字体的输出为图形，在不会给后端带来太大压力的状态下，一般是可以用户具有可以享受到很好的视觉效果，得到较为满意的成品。[1]

1.4 图形的使用差异分析

分析两者图形的使用差异，网页设计功能没有平面设计的齐全，表现的形式也少一点，尤其是针对产品方面的设计，进行模块化的设计思路起到关键作用，将之放在视觉表现方面也有同样的意义。网页界面设计有关图形的表现主要是重点处理后期工作，平面设计中将会利用到的尺寸单位，比如常见的英寸、厘米还有毫米等，但是网页一般采用的是像素作为单位。[2]

1.5 浏览方式差异分析

网页界面设计与平面设计的浏览方式差异，其中平面设计开展的是渐进形式作作为浏览方式，没有办法做到浏览整个过程，无法实现多样化串联，而网页设计则是向下滑动即可，有一个滚动条功能，下拉即可，其中按钮之间的链接，可以实现多样化串联，实现浏览。将两者放置在同一个信息框架状态下，信息间的连接更为便利，增加用户间对信息选择的自由度，但平面设计也不缺乏其优点，举例相冊，通过对比，一般这一类型的产品使用电脑翻阅，其实将之印刷成为一本实物进行翻阅，这样给用户的感觉更加好，实现相册收藏的意义。网页设计结果具有不可预测性，主要是受到交互性质的影响，一般网页设计将技术和艺术相互结合运用，网页版面与印刷品浏览的方式有所差异，不会采取单线性的阅读内容。比如，还有许多隐藏的信息会被遗漏，指的是及时同一位网页设计师没针对不同的用户也会产生不一样的机结果，使用超链接实现用户可以在网页文本中自由的操作，实现图片之间的跳转等，同时，还可以对针对某一个网站做插入链接，用户可以进行搜索、讨论、留言等操作。[3]将网页的交互性实现到最大化，有被动交互转变为主动交互，这一过程中也是网页设计的以部分，直接影响最终的设计结果。

1.6 信息传播差异分析

平面设计偏向于传统信息媒介设计，比如张贴、销售还有邮寄等形式展开传播操作，传播的范围比较小，但是成本有比较高，将之与网页界面设计相对比，网页界面设计具有很强的传播能力，主要通过第三方媒介进行传播操作，通常使用电脑屏幕、鼠标、键盘等即可完成传播操作。将之和过去的纸质传播方式，其主要的表现形式是经过纸张与图文信息，现忽略其网页中的互动环节以及 多媒体元素，其实网页界面呈现在人用户面前的就是经物化的界面，即是纸张、图文还有电脑显示屏三组组成的内容，以数字化形式表达。一般包括有图文信息、色彩还有版面等，这些元素构成了平面设计中的视觉构成元素，而网页设计同样也是将平面设计中包含的基本视觉元素以此传达信息以及开展审美活动。网页设计操作中，要将发送者和接受者形成一个连接平台，以便达到信息、资源共享的目的，如果没有此操作，两者这之间就需要设定的一个翻译或者是解说系统，帮助他们实现沟通，这样不利于提升工作效率，容易出现失误。[4]平面设计具有良好的群众基础，不管哪个年龄层针对纸质的学习一般具有较好的接受能力，网络媒介还有部分群众不熟练运用，同时通过网络获取信息也会带来一定的学习成本，但随着网络信息技术的不断改进，与平面设计在群众基础方面的差异会越来越小。同时，平面设计和网页设计形式有不同的用户体验，其中，网页界面设计重视与用户之间实现互动。网页界面设计还可以将绚丽的动画效果融入设计中，导入视频，上述功能在平面设计中是无法实现的。

2 结语

网页设计和平面设计之间的不同，主要是由于信息技术带来的革新。网页技术可以将艺术和技术实现完美的融合，平面设计在信息网络技术发展的背景下也得到有效的发展，并朝着多元化方向发展，继承传统平面设计技术同时又可开展革操作。

参考文献：

[1]姚国熳，王海潮.网页界面设计中平面视觉元素的应用探析[J].大观，2016（9）.

[2]张彤.网页界面设计的整体性研究[D].北方工业大学，2011.

[3]那日图.中国传统视觉元素在网页界面设计中的研究[J].美苑，2011，7（06）：63-65.

篇7：浅谈网页的界面设计

一、网页的版面布局设计

网页的版面布局是指网页的构成要素之间的排列关系。常见的网页版面布局有:“T”结构布局、“口”型布局、“三”型布局、对称对比布局、POP布局等。无论是哪种布局, 在网页版面设计过程中首先应该注意的问题是避免把整个网页界面中的每个区域都塞满, 不留任何空白, 这样的网页界面充斥着让人窒息的感觉。适当的留白反而会使整个网页版面简洁、舒适, 使浏览者在浏览网页的过程中感觉轻松愉快, 同时也能提高网页视觉信息的可读性。就如同著名的建筑大师密斯.凡.德.罗提出的:“少即是多 (Less is more) ”。在网页界面设计中同样适用。在网页的整个版面中, 按照信息传达的重要性通常又分为三个区域:重点经常更新的信息, 次要的内容信息, 起辅助作用相对稳定不变的信息。按这三个信息的主次关系来分布三个信息在整个网页版面中的布局。这样浏览者在浏览网页过程中就会突出对重点区域的印象。从而突出整个网页界面的合理布局。

二、网页的色彩搭配

在实用美术中, 常有"远看色彩近看花, 先看颜色后看花, 七分颜色三分花"的说法。这也就说明, 在任何设计中, 色彩对视觉的刺激起到第一信息传达的作用。因此, 只有对色彩基础知识的良好掌控, 才能在网页界面设计中做到游刃有余。色彩是网页界面设计中的灵魂, 是网页设计过程的核心要素之一, 是浏览者在浏览网页过程中最先也是最持久获得网站的印象。网页色彩的搭配对整个网页的视觉风格中取到决定性作用, 因此网页设计过程中根据网站的内容和结构首先要确定网页的基调和配色方案, 按照色彩之间的内在联系, 来搭配整个网页界面的色彩应用。梵高也曾说过:“没有不好的颜色, 只有不好的搭配。”所以想运用好网页界面的色彩就一定要了解网页设计的色彩搭配的知识。

三、网页的文本内容

文字是人类文明的象征, 是人类传递信息的重要视觉符号, 更是现代信息传播的主要载体, 是信息传递最直接, 最明确的交流方式。因此文字在网页界面中也充当了非常重要的元素, 一个网页可以没有图片, 没有动画, 但不能没有文字, 文字是浏览者获得信息的最主要和最准确的方式。当然网页上的文本内容不同于报纸、杂志上的文本。因为网页浏览者一般不会精读网页全部的文本内容, 而是快速浏览, 因此网页文本在围绕主题的前提下必须精炼, 这样才能使浏览者快速的获得网页主旨信息内容, 同时也使网页的重要内容得以被浏览者所接收。网页的文本精炼可以通过以下方式实现:

1. 把文本内容分类, 以标题的形式出现

2. 重要的文本通过超链接的方式进行分离

3. 按重要性分层次

四、网页的图片和动画效果的应用

随着计算机的不断更新, 网络技术的不断成熟和发展以及互联网速度的提升, 目前浏览网页的过程中已经很少出现停滞等现象。这就促使网页界面中的图片与各种动画特效所占的比例不断提升, 因为图片与动画特效以其特有很强视觉冲击力的直观表现形式, 在网页界面中成了不可或缺的构成要素。然而图片和动画由于范围广, 涉及的种类多, 网页界面中的图片和动画特效也不能盲目选择, 而要根据网站的内容进行筛选。设想下如果所选择的图片或者动画与网站的内容、风格不相符, 那么其给浏览者所带来的不是吸引而是给人很不自然很突兀的感觉;相反, 好的图片和动画, 不仅给人很自然很协调的感觉, 而且也会对整个网页内容起到引导和提示网站主题的作用。同时, 分辨率大小也会影响着网页图片和动画的效果。网页界面中所用的图片和动画如果像素太低, 就会造成整个页面模糊给人一种消极的感觉, 因此在网页中所用的图片和动画效果尽量要选择适合的分辨率, 这样就会给浏览者留下深刻的印象。据研究发现, 在视觉传达中应用好的图片和动画, 所带来的传达信息的能力不亚于文字, 很多人都是通过图片和动画效果来记住一个网站。因此, 图片和动画代表着网站的形象, 他们所表述的内容和传达的主题, 都与网站的整体形象密不可分。

五、网页界面的互动设计

互动设计是技术与艺术相结合的人性化回归, 是网页界面设计关注的又一重点。计算机科学技术给网页设计以坚实的结构和完美的功能, 而互动设计则赋予网页设计人性化美感, 使网页充满亲和力和情趣。网站人性化设计通过调整网页内容和表达形式, 应用引导性图形语言, 让浏览者与网页界面产生互动, 使网站平台满足用户多方位的使用需求。在细节中表达出温润的人文关怀, 吸引并留住用户, 更利于用户浏览。

综上所述, 由于网页界面设计者不仅是网页视觉符号的设计者, 也是设计的体验者。因此一个好的网站的网页界面设计者必须通过网页的版面布局、网页的色彩、网页的文本、网页的图片和动画特效及网页的互动设计等角度进行对网页界面不断完善、改进、调整和更新, 这样才能真正设计出好的网页。

参考文献

[1]梁日升.杨杰.网页艺术设计[M].机械工业出版社, 2011.

[2]埃利奥特.杰伊.斯托克斯.网页的吸引力设计法则[M].电子工业出版社, 2011.

[3]潘群.吕金龙.网页艺术设计[M].清华大学出版社, 2011.

篇8：网页界面构图与设计教学大纲

摘要：网页界面设计是数字媒体专业《版式设计》课程的重要内容。点、线、面是网页界面设计的基本要素，直接影响网页界面的最终呈现效果。本文以笔者的切身感受阐述了在网页界面设计课堂教学中如何向学生展开点、线、面的概念，并结合网页界面设计实际案例，详细分析了点、线、面在网页界面设计中的作用及运用形式。

关键词：版式设计；“网页界面设计”；点、线、面

我们处在快速发展的信息化时代，网络已经渗透到世界的各个角落。网页作为网络信息的强大载体，以文字、图片、视频的形式集中展示给大众并得到迅速的发展。人们已经不再仅仅满足对网页的技术追求，网页的外观设计、排版形式越来越受到重视。因此，网页界面设计也就成了《版式设计》课程的必讲内容。网页界面设计是在屏幕的有限空间内进行各种视觉元素的有序排列组合，它决定了网页设计的整体风格、色彩倾向以及视觉传达效果，因此版式设计是网页界面设计的根本。在网页中，无论怎样的版面，最终可以简化概括成点、线、面。研究版式设计基本构成元素的点、线、面可以更好地体现设计主题、突出网页中图片、文字、影音等元素之间的主次关系，最终呈现较好的版面视觉效果。由此可见，点、线、面在网页界面设计中有着重要的作用，同时也是网页界面设计的教学难点。

1 网页设计的基本要素——点

点在几何学意义上是以圆点为最基础的形态，它是具象的点。在网页界面设计中，点是以抽象形式存在的，它的效果取决于与之共存的其他元素相互之间的比例。网页中的一个图片、一个企业标志等以单独姿态呈现的视觉元素，都给人以点视觉印象。点存在的形式很多，可以单独存在点缀网页版面，也可以组合形式进行密集、朝向排列形成较强视觉牵引力，还可以线化、面化使网页版面更加灵活和凸显凝聚力，最终起到突出网页界面设计主题、平衡、填补空间、活跃网页画面的作用。

网页界面设计中点单独存在，往往以突出某个产品或者突出企业形象等形式出现。这种情况下，该元素往往会成为整个网页的主体物，通过这种形式达到加强人们视觉印象的目的。例如，苹果官方网页，主界面有四个滚动画面，每个画面都在中间位置放置主要内容或者是产品，搭配纯色简单背景，很好地衬托出以点元素形式存在的主体物。而多点形态存在时，可以进行疏密混合排列或者以聚集分散的形式进行组合。以密集形式组合排列网页中的点元素，可以给人以充满紧凑的膨胀感，进而集中对人进行视觉冲击，形成强烈的印象感。以分散形式组合排列的网页中的点元素，存在于网页的各个位置，使整个网页画面饱满感更强烈，如国外很多服装类网页，各个模特的不同服装展示或者不同的服装类型，会以多个点元素的形式分散排列在网页主界面，让人对该品牌的当季热销类型一目了然。

2 网页设计的空间强手——线

线由无数点的运动汇集而成，在几何学中，它只是长度的代表。在网页界面设计中，线被赋予粗细、材质等特定的形态，以直线、曲线实际的线条；文字、图片形成的虚线或者通过位置的编排引导形成的视觉流程线应用于网页的编排设计中，在整个网页中起到装饰、分割、界定空间，并有效地组织好网页中各种元素复杂关系的作用。

不同线的形态和类型可以带给人们不同的心理情感。例如，水平垂直线会给人一种稳定、严肃的感觉，比较适用于体现严谨、认真主题的网页界面设计；斜线则会给人带来很强烈的失衡感，比较适用于个性或者想要突出某样主体内容的网页界面设计，通过较强的视觉冲击力加深人们的印象；曲线常见的类型有弧线、圆形等几何曲线和自由曲线，给人柔和、舒缓、流畅等心理感受，能使散乱的版面变得集中，较适用于给人柔软口感的饮品、食物类的网页设计。尤其是自由曲线，可以形成引导浏览者的视觉流程线，使读者能按照设计师的设计意图去浏览网页，加强版面的可视性。

在网页界面设计中，通过不同类型线对网页版面空间的有效组织和划分，可以使整个网页保持良好的视觉秩序，形成统一和谐的视觉效果，同时带来丰富的层次空间感。对网页空间划分可以采用等量分割或者图文的直接分割：等量分割的网页秩序感强，但也会有呆板、形式单一的感受。因此，要注意主体对象是否合适，或者使用等量不等形的分割形式来打破单一感。图文分割可直接采用线条切割的方式，使图片和文字以独立形象存在以提升辨识度。但是用线进行空间划分要注意划分的比例及被划分元素之间的主次关系，以保证整个网页版面具有一个良好的秩序感。

3 网页设计的视觉呈现——面

面作为点或线的延续，在网页界面设计中占据最大的空间面积。相对于点和线来说，它具有更实在的质感和更形象的视觉表现力。面的形态多种多样，具体可以划分为规则形体的面和不规则形体的面。规则形体的面如几何形体、有机物体形成的面，样式简单且与我们的生活较为接近，容易与其他元素相协调，具有简洁、直观的表现效果。在进行网页界面设计时，可用几何形体的面体现严谨、规整的主题，提升网页版面的专业感；用有机形体的面增强网页的亲和力，拉近与浏览者的距离。不规则形体的面没有固定的形态，可以是生活偶然发生事件得到偶然形体的面，如物体掉落形成的喷溅形态等，也可以是对图像的复制或者手绘得到的自由形态的面。人们把这些形态运用到网页界面设计中，以自由、随性的形态呈献给浏览者，打破规整、单一的版面形式，加深浏览者的视觉印象。

网页中面的表达形式很多，可以把某个图片、字母进行放大处理，来形成突出显示面的效果；可以通过不同线的空间划分，以形成不同规格形状的面来强调各个板块的内容；可以根据主题风格通过颜色变化形成主次分明的版面结构，丰富视觉与网页本身的需求；也可以通过背景的面或留白处理衬托网页中的各个元素，以突出网页的信息，增加空间想象感。除此之外，网页的设计对象各不相同，有企事业单位、产品娱乐等，应有针对性地对面的形态类型进行调整。例如，一些企事业单位要呈现的是严谨、专业，应尽量减少网页中的面形态类型，以塑造出符合对象的务实感，增强网页内容的真实性。

4 结语

点、线、面作为网页界面设计的基本元素，它们相互影响、相互协调，通过合理的搭配最终形成完整的网页界面。点、线、面是相对而言的，由它们之间的比例关系而定，并且可以根据需要相互转化，组合成各种形态的网页版面。在设计时，应结合各个元素之间的特点，利用各元素之间的联系，合理编排最终形成具有自己特点、美观、信息传达明确的网页界面设计。因此，在网页界面设计教学过程中，必须结合实际案例，透彻分析、阐述三者之间的关系，让学生真正理解三者在网页界面设计中所发挥的作用，才能够收到理想的教学效果。

参考文献：

[1]张磊.版式设计——点线面的艺术[J].石家庄职业技术学院学报，2013（01）.

[2]张晶.网页设计中平面视觉元素的应用[J].中国管理信息化，2011（17）.

[3]SE编辑部.新版式设计原理[M].曹茜，译.中国青年出版社，2013.

[4]邓勇.浅谈网页设计的布局及原理[J].渝西学院学报（自然科学版），2004（03）.

作者简介：姜希（1990—），女，贵州师范大学大数据与计算机科学学院助教。

篇9：网页UI界面设计探析

关键词：UI界面,网页,探讨

随着互联网的普及, 网页设计是否美观、合理成为大众最关心的一个课题。当前形势下, 网站的功能、种类、用户构成等因素日趋复杂, 网页UI界面设计也在不断地发展, 这一原来的边缘学科, 发展为计算机科学与设计学、心理学、人机工程学和认知科学的交叉研究领域, 成为了热门, 是IT行业和设计行业中最重要的一员。

一、UI的概念

UI界面, 英文UI (User Interface) 又称为人机交互界面, 指人与机器沟通的平台, 是承载用户与机器之间信息输入输出、互相传递的媒介。其包含运营平台、客户端、发布者三种平台界面及其之间信息的有效沟通。界面整体布局系统又分为输入界面和输出界面。

二、网页UI界面构成要素

1. 视觉要素设计

1) 网页图标 (ICON) 设计

图标作为网页UI界面中的重要工具, 包括:像素图形图标、全色彩图形图标、简化图像图标和三维图像图标。

像素图形图标是早期图标, 其表现形式仅有256色像素点阵, 通常情况下可以很好体现出较字符用户界面;全色彩图形图标具有简约、标准和抽象的特性;简化图像图标是具有简笔画风格的图标, 他在色彩效果上使用纯色填充, 但在构图上变化多端, 视觉效果简单真实, 如图1所示;三维图像图标是三维造型的图标, 具有良好的空间感, 如图2所示。

2) 网页文字设计

网页中旗帜栏和导航栏中的文字是两种最特殊的文字。

旗帜栏是宣传式的栏目, 作为网页中传递整站信息的重要途径, 最易于浏览者查看。旗帜栏文字具有统一性、标识性等性质, 设计趋于图形化。

导航栏是地图式的栏目, 在导航条的布局中, 文字是最好的用户向导, 导航栏文字的设计效果决定了浏览者能否迅速找到目标页面。

网站种类复杂属性各异, 在做网页文字设计时, 要充分考虑到使用者的年龄、性别、职业、文化背景、经济水平等因素。

3) 网页版面设计

网页“布局”是对页面的内容尺寸、间距及位置的设计, 好的布局可以有效地帮助用户快速找到目标内容, 并在视觉效果上给用户享受。

合理的布局必须要有清晰的视觉层次, 必须直观体现网页UI界面各元素之间的重要梯度, 用户首先关注的区域是标志、LOGO和导航栏等重要元素。体现视觉层次, 还需要在设计视觉流时还应考虑交互人物的逻辑性和浏览习惯。

2. 多媒体设计

多媒体技术是指将多种单媒体复合而成的技术。多媒体技术融合了各种视觉和听觉媒体, 包括动画、文字、图形、图像、语言、音乐和立体声响等, 多媒体网页UI界面可以让用户同时接受多样的媒体信息来源。网页UI界面设计中使用多媒体技术可以体现以下几个特点:

1) 集成性, 对远程多媒体的影音信息统一取得与发布。

2) 交互性, 人性化的实现信息传播, 能够主动选择和控制信息流方向。

3) 非线性, 创建了超文本链接方法, 把灵活展示浏览内容。

4) 实时性, 实时控制多媒体信息, 及时配合用户指令。

5) 动态性, 用户可以按照自己的需求选择信息使用方式, 甚至重组信息的各种表现形式。

三、网页交互设计

交互设计需要解决的是人与机器之间互动的问题, 是表现层的东西, 好的交互设计方案能够让用户感觉网页非常好用。怎样的网页交互设计才算是好的方案呢?

1. 让人有耐心等待。

根据网络调查, 大多数用户对网页打开的等待时间最多坚持5秒钟, 如果5秒内页面都不能打开, 那这个页面上的内容将没有任何意义都就将。所以在交互设计时, 需要考虑网页等待时给用户提供的信息。最好的方式是反馈, 当用户等待时, 告诉用户他的操作是否成功并且将剩余的等待时间实时呈现, 这样就能有效解决用户不能耐心等待的问题。

2. 让人不用动脑筋想。

好的网站能够帮助用户快速完成任务, 要达到快速完成任务的目的, 交互设计必须使页面简单, 尽量让用户浏览时不收不必要的干扰, 最好能够符合用户心智模型。因为, 大部分的用户在浏览网站时希望的是能快速找到勉强应付的方案, 而不愿意主动寻找方案, 百分之八十的用户只会用百分之二十的功能。

四、网页UI界面设计展望

目前, 网页UI界面设计主要是三维的视觉界面和二维的图形界面, 同时辅以动画、声音等多媒体插件布局设计。随着计算机技术的不断发展, 三维立体的操作界面系统会在网页设计中逐步普及, 三维立体界面的直接操作是虚拟现实 (Virtual Reality) 交互性的一个重要表现方式。三维虚拟空间中的直接操作包括平移、拾取和旋转等操作, 例如如今比较前沿的3D影装和多点触控技术。三维直接操作使得网页UI界面设计不再仅仅局限于视觉效果的三维变换, 可以实现类似于四维空间的人机直接交互, 从而更好的完成用户操作。

五、结论

几十年来, 网页UI界面设计经历了不同的发展阶段, 流行了各种不同的风格, 当前网页UI界面处于图形用户界面时代, 作为网页设计师并不能仅仅满足这种现状, 需要和计算机科学家们一起合作, 积极探索新型界面风格的人机交互技术。现代网页UI界面设计的主要任务就是要把用户实际工作过程、任务模型、行为方式、心理模型有效化的结合, 并合理的转换成界面产品内容的实现模型, 从而向用户呈现一个尽可能接近其真实角色, 符合高度审美标准的界面产品系统模型。

参考文献

[1]罗仕鉴.人机界面设计[M].北京:机械工业出版社, 2002:18-93.

[2]姜蔚.用户界面设计研究[D].浙江大学, 2006

[3]郭翠云.浅谈人机交互风格及其发展趋势[J].管理观察, 2009 (, 28)

[4]尹定邦.设计学概论[M].湖南科学技术出版社, 2006:51-178

[5]徐刚.Windows用户界面设计与优化策略[M].北京:人民邮电出版社, 2005:18-109

篇10：网页界面构图与设计教学大纲

关键词：情感；情感化设计；界面设计

在互联网高速发展的信息技术时代，随着人们的审美标准不断提高，对网页界面的设计也提出了更高的要求，好的网页界面设计绝不是简单地叠加网页的各构成要素，还需要设计师从艺术构成和欣赏的角度把各个要素有机结合起来。只有充分满足功能性、便捷性、趣味性和人性化设计的网页才能够更吸引人，给予浏览者积极的情感激励，提高浏览者的兴趣并激发学习的热情，让浏览者在快乐轻松愉悦的氛围中学习。

l 网页界面设计分析

网页界面设计，是在有限的屏幕空间上将视听的多种元素有机并有序地排列组合起来，并同时将理性思维通过个性化地传达于法展现出来的设计。不同的界面风格在传达信息时会给浏览者在感官上赋予不同的美感，带来完全不同的精神享受。网页界面设计风格的最初定位主要取决丁它的目标人群和潜在群体，搜索类型的网站界面大多简洁明了，如百度、谷歌等；服务类型的网站界面大多丰富多彩，如淘宝网、亚马逊等；展示个人风格的网站界面大多华丽怪异；公司企业网站界面大多严肃端庄。网站的类型一经确定，就可以设计其界面风格。

2 情感化设计分析

所谓情感化设计，就是将情感通过设计要素融入设计作品中，在用户欣赏、使用设计作品的过程中激发用户的联想，产牛共鸣，获得精神上的愉悦和情感上的满足。情感化设计的关键在丁关注人的情感需求，追求人的精神层面，在设计时融人情感因素，使蕴含丰富情感的设计作品更加深入人心，从而使作品博得大众的喜爱。人们对设计作品的喜好往往能够反映出各自的情感，通过情感化设计，不但可以建立起设计作品与用户的情感关系，还能够产牛强烈的互动效果，使用户获得内心对设计作品的依恋，进而将短时关注转换为长期的使用。

3 情感化设计因素在网页界面设计中的体现

3.1 简洁明快的版式设计

网页界面版式设计的成功与否在丁它能否有利丁信息传达以及能否让浏览者产牛视觉记忆。一是在通过对界面分割区域进行版式设计时，既要考虑网页的主次分明，重点突出，又要考虑浏览者的视觉感受和思维习惯，能让浏览者第一时间抓住网页的重点内容，高效获取有用信息。二是在通过搭配文字、图片、色彩及多媒体元素进行版式设计时，既要考虑各元素的大小、形态、色彩各自的特征以及它们之间的变化统一、节奏规律，还要通过适当留白的手法以达到界面整体的视觉平衡，既突出主体内容，又不会让用户感到空泛。无论怎样的版式设计，都以达到让浏览者高效获取信息为曰的，通过简洁明快、舒适自然的版式设计增进浏览者对网页内容的理解性和记忆性。

3.2 特色鲜明的色彩搭配

在视觉表现中，色彩带给人们的视觉冲击力是最强的，它能够在第一时间吸引人们的关注。不同色彩会给人不同的心理暗示，如红色让人感觉热情兴奋，绿色让人感觉平静清新，紫色让人感觉典雅高贵，而黑色会让人感觉沉稳厚重等等。网页界面色彩的合理搭配是跟网站的类型和性质密切相关的，网页的界面色彩一定要做到特色鲜明，主题突出，才能让人产牛与众不同的感受，给人留下深刻的印象。例如，在高校服务管理机构的网页界面设计中，党校、组织部、宣传部、团委等相关的部门网站都较多采用红色系，以突…党团组织的标志；招牛处、就业处、学生工作处、关工委等相关的网站则较多采用蓝色系和绿色系，以突出朝气蓬勃的气息；离退休工作处则可采用黄昏色彩，以突出网站服务的对象。

3.3 设计精巧的图形图像

图形图像作为一种视觉语言符号，能够在传达信息的同时，激发人们的各种情感。通过对图形图像的加工处理使其富有逼真性和充满想象性，可以激发浏览者的无限想象力，以艺术符号的方式去传达信息的意义和象征性，提高浏览者的情感体验。因为图形较之丁文字可以进行更好的情感表达，很多时候人们更热衷丁去看设计精巧、充满寓意的图片，而不喜欢去阅读纯文字的长篇大论，它容易让人产生视觉疲劳，进而放弃阅读。而图形不一样，它的每一种形状都蕴含了不同的情感，如网形让人感觉饱满，方形让人感觉稳重，倒三角形让人感觉不稳定，曲线让人感觉到节奏和律动，直线让人感觉到刚硬。通过点、线、面的结合，又可以创造出不同的情感，让我们产生情感变化，真正进入到内容当中。

3.4 体贴流畅的文字编排

文字是网页组成元素中不可或缺的一部分，它是最直观的传递信息的视觉符号，在对网页界面进行文字设计与编排时，我们需要结合文字的字体形态、文字的表达和文字的表现形式三个方面来进行情感化设计，达到体贴流畅的效果，让用户轻松获取信息，提高用户体验感。

（1）字体形态方面。时下流行的中文字体多种多样，不同字体有各自的形态特征，字体的最大特点就是每种字体都给人带来不同的情感和风格属性。例如，宋体方中有网，刚柔相济，既典雅庄重，又不失韵味灵气，从视觉角度来说，宋体阅读最省日力，不易造成视觉疲劳，具有很好的易读性和识别性，既适用丁标题更适用丁文本段落。

（2）文字表达方面。在界面设计时，文字的表达要尽量做到通俗易懂，有足够的亲切感，让用户白然而然产生互动的愿望，有舒心愉悦的体验。

（3）文字表现形式方面。静态文字是网站信息传递的首选，它稳定、容量小、技术支持低。视觉上让我们一日了然，阅读起来思路清晰，带给用户稳定的情绪。动态文字的情感表达源丁运动节奏而产牛，通过视觉表现呈现给用户不同的感受，是一种新型的文字表现形式。所以，动静结合的文字表现形式更能展现网站的牛命力，

3.5 轻松愉快的用户体验

随着网站数量的层出不穷，人们更多的追求有着轻松愉快用户体验的网站。网页界面设计师的工作不仅仅是合理设计编排网页元素，而是把追求的重点转向致力丁进行易用的界面设计。我们可以发现，如今的网页界面呈现的网页元素越来越多样化，从单一的文字界面到图形界面，再到多种多媒体元素结合的界面，都是为了适应不同用户不同阅读方式的设计体现，这在很大程度上帮助了用户在浏览网站时能够方便、快捷、高效地获取信息，增强用户轻松愉悦的体验。

4 结束语