网页界面的设计与创新

网页界面的设计与创新（精选十篇）

网页界面的设计与创新 篇1

我们已经进入了互联网时代, 互联网正在深刻影响政治、经济、思想、教育、艺术等人类社会的各个领域。网页是人与互联网中计算机之间以网络为平台的信息界面, 是科技与艺术的结合。在网络营销、网上数字图书馆、网上新闻、影视、图片、艺术品的欣赏和交流等绝大部分网络活动中, 界面设计变得越来越重要。近年来, 一些网页界面设计研究人员强调要进行以用户为中心, 符合用户认知心理, 使用户感到舒适、满意的“人性化网页界面设计”。王春鹏曾经建议人性化网页界面的“赏心、悦目、传情、达意”设计原则[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页

网页界面的设计与创新 篇2

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

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.

浅谈网页的界面设计 篇3

一、网页的版面布局设计

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

二、网页的色彩搭配

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

三、网页的文本内容

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

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

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

3. 按重要性分层次

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

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

五、网页界面的互动设计

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

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

参考文献

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

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

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

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

摘要：我国是一个发展中的国家，很多领域都是需要我们进行探索的，网页界面设计就是其中之一。目前，这一领域还存在很多不足，设计者的技术低、网页的设计上水平低等，很大一部分原因是网页设计师对于平面视觉元素的应用不甚了解，对色彩的应用也不是很准确，我国的网页在设计上色彩大多平庸，不能直接的让访问者对其产生兴趣。众所周知，对于平面设计，视觉元素极为重要，本文主要就是针对平面设计中的视觉元素进行分析研究。

关键词：视觉元素；色彩；趋势；媒介；版面

在网络的发展下，网站成为了新兴的视觉传播载体，用户通过网站访问可获取最新的资讯，并享受网络服务。我国目前对于网页的制作设计还并非十分优秀，缺乏创造性，对受众的吸引性不够，针对这种现象，我们必须要思考如何提高网页访问量以及吸引更多的访问者，并且明确视觉元素对平面设计的重要影响，主要针对视觉元素的效果进行可以应用的方向分析。

一、网页界面设计的产生以及特点

在全新的21世纪，出现了一种全新的媒介——互联网，它使我国产生了新兴的网络生活，这种媒介有效的推进了文明的发展，信息的传递更加快速便捷，网络媒体急增，网络也成为了设计人员的另一战场，对传统的纸上媒介设计产生了冲击，现在，越来越多的网络媒体产生，它们之间相互竞争，要想在多种媒体中取得成功，就要保证吸引更多的访问者，这就需要将网页设计的有吸引力，最简单的方式就是在网页中掺杂大量的平面视觉元素。这个数字化的时代，网页设计要满足实时性的特点，及时更新且不能受到地点时间的限制，扩大信息量，将大众带入信息化的大媒体时代。

二、网页设计呈现的趋势

趋势一：人才紧缺。我们需要具备技术、懂得市场营销的网站设计人才，但是目前人才市场上出现了供不应求的状态，主要就是缺少高品质的人才，我们无法对网页的设计产生有效的改变。

趋势二：将会加大人机工程学思想的地位，学者认为，所有的产品都是围绕着人展开的，人的需求就是产品存在的价值，只有人有需求，这种产品才会被开发、被大众接受，所以网页的设计就需要满足人的种种要求，达到更加便捷、更加舒适的目的，充分为人民服务。

趋势三：在网站的策划设计上，全面加入文化的理念，这是一种学问，设计中也包含了很多方面的知识，其中有消费者心理学、美学、技术等等，这是知识的结合，利用结合所产生的效果设计出相对完美的网页。

趋势四：所有资源都可以进行整合，设计风格逐渐统一化，简单来说，一般可以呈现出两种不同的风格，一种是简约风格，就是将所有设计简单化、原始化，让访问者可以直接得到想要的，不会浪费过多的时间，另一种是个性化设计，现在网络上网页极多，为什么选择该网页成了设计网站的最重要问题，加入一些吸引人的个性化设计，将表现方式多样化，具有强烈的视觉上的冲击，让访问者更倾向于网站。

三、视觉元素在网页界面设计中的重要性

随着时代的进步，网络成为现在的信息传递的重要方式，也成为了人们现在生活中必不可少的一部分。近年来，网页数量直线攀升，可以说，网络不仅仅是我们获取信息的一种渠道了，更对我们的生活产生了不可估量影响。由之前的信息封闭，对新闻的了解不够及时，看电影也只能在特定的时间、特定的地点进行观看，到现在人们可以通过网页了解到所有想要了解到的新闻、音乐、电影、文章等等，互联网发挥了很多作用，互联网还可以进行网络上的经商，网店网购全面进行，同时也促进了我国的经济发展。网络的重要组成部分就是网页，网页的构成主要来自于设计，设计的目的就是让大众被视觉上的元素所吸引，从而有了解的欲望并实现信息的传递、所以网页的设计必须要满足人的心里需求与视觉需求以及生理上的需求，由此可见，视觉元素在网页界面设计中有着极为重要的地位，在网页的设计上，运用合适的视觉流程，构架好最为恰当的视觉导向，利用好视觉元素中美的一面，使平面看起来更加得体并且吸引人的眼球，达到明确清晰的将信息进行有效传达的目的。

四、平面视觉元素的内容及应用

平面视觉元素就是指在平面上对视觉产生影响的元素，通俗的来说就是利用点、线、面三种最基本的元素构成的艺术，这些基本元素经过合理的搭配组合才有可能构成一个美丽的平面图像，最简单也是最基本的平面视觉元素就是图像、图形、版图、文字与色彩。

（一）图像、图形

在网页设计中，图片的地位仅次于文字，它进入到网络媒体中的时间也仅次于文字，可以说，图像图形的作用一点也不低于文字，甚至它对信息的传达效果远远高于文字，在纸质媒介上的图片对印刷的效果要求很高，清晰度的要求也很高，但是网上媒介不一样，它对图片的要求很低，因为图片是在电脑或手机显示屏上进行图片显示，人们的肉眼并不能区分图片是否为高精度的图片处理，现在网络高速发展，电脑或手机储存空间是有限的，所以要考虑到这一问题，就要尽量将图片的文件尽量减小，并且尽量将大小进行控制。图像图形可以将信息简单化表达，给访问者更直观的感受，这是文字表达不能带来的效果，虽然它不能完全替代文字的作用，但是它将文字进行了升华，它可以比文字更加容易的吸引人的眼球，图片的色彩丰富，更能给访问者带来较为深刻的印象。

（二）版图

网页设计中必不可少的一步就是版面设计，版面设计，就是指设计者在一个平面上的屏幕上将所有元素全部结合排版，进行合理化表达，将所有元素进行调和，根据网页要求的设计方式与关系，因为信息量巨大，屏幕有限，所以很难可以向纸质上的印刷品一样可以一看到底，往往需要访问者进行页面进行翻动，这个时候设计者可以选用两种滚动方式，一种是纵向、一种是横向。因为现在绝大多数人的阅读习惯，所以我国的很多网页都是采用的纵向翻页方式，网页的版面设计大多是要满足网页功能的需求，尽量达到简洁并且清晰明了的表达内容信息，以实际的功能表现为主要目的，让访问者能够快速的找到所需要的信息，并且有兴趣继续阅读。

（三）文字

网页的合格设计师首先要做的就是先了解好这个网站的作用、了解他们的企业文化、了解他们的受众范围等等，虽然现在信息的传递可以用图像进行表示，但是文字在传递过程中的位置是无法取代的，尤其是在新闻类的网页上，都需要大量的文字信息表达，再配合着很多整体的环境，例如形式等，是文字更加充分的进行表述，大量的文字是每个网页上不可缺少的，文字的主要作用就是记录语言，文字在网站中的在作用是其他任何元素都不能代替的，文字的应用也直接决定了网页的整体效果。在网页中，文字不仅表现了他记录语言的作用，更是一种美学的体现，现在又出现了很多对文字的表现方式，就像将文字图形化表达。设计者可以将文字进行艺术化表示，在意义不变的情况下，争取把效果做到更好，用文字的效果吸引访问者的眼球，增加访问量。

（四）色彩

色彩是视觉效果可以达到巅峰的重要元素，色彩需要达到协调画面整体的作用，将不同的、多彩的色彩进行不同的组合，达到不同的效果，色彩可以组合成不同的环境氛围，或是温馨、或是幸福。不同的氛围，有不同的色彩组合，但是色彩不是随便应用的，必须要符合网页安全色的要求，根据研究表示，暖色系的网页比冷色系的更加吸引人，人们对于颜色会产生相对应的生理反应，每一种颜色给人们带来的视觉感受是不同的，如红色让人感受到热情；蓝色让人感受到冷静等，但是网页在设计上不能乱用色彩，而是要色彩符合整体格调，要选定出主色调，其他色彩都是根据主色调进行选择。一个优秀的网页是可以给访问者留下深刻印象的，而给访问者留下深刻印象的最直接方式就是对色彩进行的应用，色彩可以通过人的视觉直接影响人的大脑。在所有的设计中，色彩的选择是至关重要的，它可以决定网页上的整体的格调，色彩，主要是由明度、色调和饱和度构成，色彩主要是由基本色纯色构成，将基本色组合在一起产生新的混合颜色，色彩的配色也是极为重要的，它可以影响访问者的心情，直接影响网页的访问量。

五、结语

网页平面设计现在越来越受到重视，在网页设计中平面视觉元素的地位也越来越高，主要由色彩、文字以及图形版面构成，网页基本是在电脑以及手机上进行显示的，它的受众大概都是年轻人，他们更注重视觉效果，更注重感官上的享受，所以，平面视觉元素极为重要，它的应用也极为广泛，在不断地探索中，视觉元素的地位愈发提高，网页的设计水平也会越来越高。

【参考文献】

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

[2]夏蕾.网页设计中平面视觉元素的运用分析[J].电子制作，2013（15）.

[3]蓝机满.网页设计中平面视觉元素的应用[J].数字技术与应用，2012（07）.

关于网页游戏界面设计风格的研究 篇5

关键词：游戏,风格,界面

一、网页游戏的风靡

随着人们物质生活水平的提高,城市的发展越来越快,与此同时网络的发展也十分迅速。很多的聊天软件也不止是提供人们和亲友联系的平台,他们也看到了网页游戏所带来的巨大商机。所以越来越多的交互软件利用本身所拥有的庞大用户群体的优势和网页开发人员合作,推出了自己的游戏。

最初时谁也没有想到一款简单的偷菜游戏会在短时间内风靡全国,在开心网和人人网推出了这款游戏之后,腾讯紧随其后因为有QQ打下的良好基础,腾讯的偷菜游戏用户群体在极短时间内赶超前者,之后各类网页游戏相继进入人们的视线。而现在的网页游戏又以简单易上手的小游戏为主,不仅年轻人喜欢,许多中年人也逐渐接受并加入了网页游戏的玩家群体。

二、网页游戏的种类

网页游戏的种类有很多,最初风靡开来的农场偷菜游戏是典型的经营类游戏。这类游戏成功地抓住了消费者的心理,从而获得了巨大的成功,于是越来越多的网页游戏种类开始浮现。休闲类网页游戏也很受到广大玩家的喜爱,它没有复杂的游戏策略,只是设有多重关卡由易到难,游戏简单易上手且通过各路关卡能获得各种奖励,所以玩到后来使得许多玩家欲罢不能。

另外一类比较普及的网页游戏是角色扮演类的。有很多角色扮演类游戏本身也拥有庞大的用户资源,以为此类游戏有很多是建立在客户端游戏的基础上的。网络游戏最初风靡开来的就是客户端游戏,此类游戏大多画面精美且配有相应剧情,不管是单机还是联网玩家,不仅仅是在完成任务而是顺延着故事的剧情发展走。但客户端游戏有着它的固定性,必须是在安装了游戏的电脑上运行才可以操作,这就限制了玩家操作游戏的地点。那么当客户端游戏发展成为网络游戏,就会吸引大批客户端游戏的用户,打开网页就可以玩,熟悉的剧情和任务也让他们更加得心应手。

三、网页游戏界面的风格

网页游戏的种类繁多,其风格也是多种多样。网页游戏的设计和制作相对而言不是很难,而一旦出现了一个热度很高的游戏,同类型的游戏也会大批涌现且界面风格和操作与其高度相似。那么如何在众多的同类游戏中立于不败之地也成了目前的一个难题。游戏开发者在注重自身开发的游戏版权保护的同时,还应当多突出一些自身作品的特色。

目前国内的网页游戏界面设计大多受到日韩游戏界面设计的影响,大多偏向卡通可爱的风格。不管是休闲类还是模拟经营类的小游戏,都更受女性玩家的喜爱,所以卡通可爱的风格更适合此类游戏的定位。但是射击类和体育类的游戏风格就更趋向于欧美风格,欧美的游戏界面更注重透视性和写实性,能让玩家有更深的代入感,此类游戏往往更能吸引男性玩家。游戏界面的设计风格其实大多数是指其界面的美术画风。

画面是直接影响游戏的销售的,操作系统固然重要,但玩家要先进入游戏尝试了才知道操作系统是否优秀。而能够吧玩家吸引进游戏的最直观的就是游戏的界面图片是否符合他们的审美要求。游戏的宣传网页和操作网页画面往往不会相同,在游戏中,画面很难做到精致,因为考虑到游戏的操作性,画面不能太清晰描述细节这样会造成网页缓冲很慢。但是宣传页面可以做到相对精致些,因为不考虑操作问题可以先把玩家吸引过来。但是不管是界面还是官方网站,首先要保证画面风格的一致性。如果二者之间的差异太大玩家进入游戏是会因为期待过高产生被欺骗的感觉,从而对游戏宣传推广产生不好的影响。

因为网页游戏的特殊性,游戏公司会考虑出简洁风格的网页游戏。即使是同一款游戏的PC客户端版本和网页版本画风也会存在明显的差异。首先网页游戏中不会太刻意描绘游戏场景的细节性,其次游戏中的人物形象,服饰或者是表情等等不会有PC客户端游戏那么丰富,技能也不会有PC客户端游戏中的那么华丽,主要是因为要考虑到网页游戏,如果画面太精良会影响到其操作的流畅性。除了卡通动漫风格,游戏制作者可以尝试一些新的风格。其实跟动画风格类似,现在国漫多数是模仿日韩画风,其实早在水墨动画时代,中国的水墨动画是在国际上获得过很多奖项的。中国的游戏设计者们可以多考虑往中国本土特色的画风上发展。所以设计者要在本身具有过硬的技术的同时敢于创新,多途径去探索游戏的风格。对新的想法,要勇于表达,以锻炼自己的创造性思维能力。具备了深厚的专业功底,同时敢于创造,并勇于尝试不同的艺术风格,必能设计出具有中国本土特色的网页游戏。

参考文献

[1][韩]崔美善.设计师谈网页设计效果[M].北京:电子工业出版社,2006.

网页界面设计中的配色方案研究 篇6

1 引言

1.1 网页界面配色的重要性

网页界面是指人与计算机之间以网络为平台的信息界面, 它是一种由非物质化数字形态与人进行交互的。网页界面的设计是实用的视觉艺术, 具有功能及艺术的双重性。色彩在网页设计中是一个重要的表现要素, 在无以数计的网页中, 要使你的网页明显区别于其他网站的页面, 更具有吸引浏览者的魅力, 就离不开色彩的设计与运用。成功的网页界面配色方案, 能够将页面上的文字、图片以及排版恰到好处地融合在一起, 从而使网页界面的作用得到最大的发挥。

1.2 网页界面配色的一般原理

1.2.1 色彩三属性

电脑屏幕显示的色彩均是RGB三种色光组成, 网页色彩是通过电脑显示器屏幕出现的, 因此, 网页色彩的三原色即红、绿、蓝三色。色相、明度和纯度叫做色彩的三属性, 色彩由这三个要素的差异来区分。

色相即色彩的相貌, 是色彩最基本的特征, 也是色与色彼此相互区分最明显的特征。可见光谱不同波长的辐射在视觉上就表现为不同的色相, 即一个特定的波长的色光给人的特定色彩感受。

明度是指色彩的亮暗程度。明度按一定的间隔划分, 就构成明暗尺度。有彩色的明暗, 以无彩色灰调的相应明度来表示其相应的明度值。

彩度表示色的纯度, 在网页中彩度主要是指色彩对人的视觉刺激程度。彩度越高, 色越纯, 容易给人艳丽鲜亮的感觉, 彩度越低, 色彩越弱。如果纯度足够低就变成了没有颜色的无彩色。

1.2.2 网页色彩搭配方法

当根据方案选定一种主打色相后, 调整其明度和纯度, 将颜色加深或减弱, 则可以产生新的色彩。这种色彩的搭配可使页面颜色同一, 增加页面层次感。

色相环中相邻的颜色称为邻近色。如红色和黄色, 绿色和蓝色等。使用相邻色进行配色, 能使页面产生和谐统一的效果。

在色相环中, 对立面的两个颜色, 如红色和绿色, 黄色和紫色等, 称为互补色。在网页配色时, 使用互补色进行配色, 将会刺激人的色彩神经, 给人以鲜明的印象, 产生强烈的视觉效果。在进行页面配色的使用, 选用一种主色调进行调色, 添加其对比色进行点缀, 能起到画龙点睛的功效。

2 配色方案研究

2.1 可爱明朗型

明亮的粉色系往往给人活泼可爱的感觉。粉色系的暖色调的运用可为网页营造出稳性、和谐和热情的氛围。这一类的网页通常运用在儿童教育网以及一些母婴网站。也可用于儿童服装、休闲服饰以及饮料等宣传网站上。

主色调:RGB (247.129.191)

或RGB (254.204.46)

配色实例 (见图1) 。

2.2 积极律动型

红色让人感觉温暖, 性格刚烈而外向, 是一种对人刺激性很强的颜色。红色容易引起人的注意, 也容易使人兴奋、激动、紧张、冲动。红色在各种媒体中被广泛的运用, 除了具有较佳的明视效果外, 更被用来传达具有活力、积极、热诚、温暖以及前进等含义的企业形象与精神。这一类的配色方案若与白色连用, 将产生轻松愉悦, 休闲的氛围, 具有现代感, 若与黑色连用, 则体现跳跃、律动的感觉。该配色方案多用于体育网站, 也可运用在与运动相关的画册和宣传单上。

主色调:RGB (236.0.0) 或

RGB (208.22.9)

配色实例 (见图2) 。

2.3 优雅浪漫型

紫色象征着女性化, 代表着高贵和奢华、优雅与魅力, 也象征着神秘与庄重、神圣和浪漫。以浅紫色和紫红色为中心的配色方案, 容易营造出优雅浪漫以及细腻高贵的女性化氛围。该配色方案主要应用于女性化妆品或淑女服饰的网页宣传, 也可应用于女性化生活网及充满女性主义的家居网站的界面。

主色调:RGB (246.225.235)

或RGB (219.149.173)

配色实例 (见图3) 。

2.4 知性智慧型

蓝色给人以沉稳的感觉, 且具有深远、永恒、沉静、博大、理智、诚实和寒冷的意象。大多数的大学校园网首页均以蓝色作为其基本色。同时, 蓝色还能够营造出和平淡雅洁净及可靠等氛围。在商业设计中强调科技、商务的企业形象时, 大多选用蓝色当标准色。蓝色是冷色系中最典型的代表, 是网站设计中运用得最多的颜色。蓝色会使人自然联想起大海和天空, 所以会使人产生一种爽朗开阔和清凉的感觉。

蓝色系的色彩若配以红色色调的文字, 能产生突出显示的效果。而灰色系的色彩给人稳重柔和的效果, 可以营造简练、洒脱、充满智慧感的气氛。该页面配色可用于办公用品、高档西服等的宣传页面上。

主色调:RGB (27.142.206)

或RGB (131.142.158)

配色实例 (见图4) 。

2.5 端正庄重型

深色容易给人端正庄重的印象。深色同黑色的搭配容易给人绅士的, 男性化的, 诚实的, 真挚的, 坚实的感觉。而以黑色作为主色调, 将给人敏锐、先进、稳重、高科技的印象。这一类的配色方案可应用于军事网站, 高科技产品或者高贵正式的服装宣传网页, 给人强烈敏锐的感觉。

主色调:RGB (0.0.0)

或RGB (19.29.77)

配色实例 (见图5) 。

3 结语

本文从艺术设计的角度出发, 把互联网上的主流网页根据情感表达含义的不同大致分为五种类型:可爱明朗型, 积极律动型, 优雅浪漫型, 知性智慧型和端正庄重型, 并为每一个配色方案都提供了两种主色调及三种不同的配色方案, 供网页设计人员参考。当然, 真正成熟可用的配色方案, 应该与网页所展示的内容紧密联系, 既要考虑尽量宣传产品的性质, 又要满足浏览者的审美需求, 引起读者的情感共鸣。即使已经确定了网页的配色方案, 还要考虑色彩的位置、配色的比例等。完整有效的网页配色方案的研究, 将是一个长期积累而又迫不及待的课题。

参考文献

[1]卢荣青.网页色彩设计的情感因素[J].韶关学院学报, 2006 (7) :129～130.

[2]网页色调分类理论研究[D].浙江:浙江大学, 2007 (5) .

[3]刘虹.解析平面设计中的色彩语言[J].装饰, 2003 (4) :93.

[4]叶蓓.网页色彩搭配的设计艺术[J].计算机与网络, 2004 (10) :43.

[5]李在万.设计师谈配色艺术[M].北京:电子工业出版社, 2007 (5) .

[6]苏梅.网页设计与色彩心理学[J].电子商务, 2004 (3) :128～129.

网页界面交互设计中的挫折感研究 篇7

1. 网页界面交互设计中的挫折感现象

用户的挫折感通常是由于设计不良、没有设计、设计粗糙或考虑不周的设计引起的。虽然这可能是无意造成的, 但易对用户造成极大的影响, 使得他们放弃再次使用和尝试。比如, 初次参与网上购物, 注册程序繁复, 并且时刻担心网络安全问题, 不能令用户放心并愉快的进行操作, 在某一步产生误操作, 用户会产生紧张和不信任, 形成强烈的挫败感, 直接导致的结果可能是用户不再使用这个网站甚至是类似的所有网站。

以下列出了一些引起用户挫折感的典型问题:

1.1 网页反馈延迟

没人愿意无止境的等待, 网页的设计上也存在这样的问题。根据网络抽样调查, 用户最满意的打开网页时间, 是在2秒以下。用户能够忍受的最长等待时间的中位数, 在6~8秒之间。8秒是一个临界值, 如果你的网站反馈速度在8秒以上, 大部分访问者会放弃。如果等待12秒以后, 那么99%以上的用户会选择关闭。网页反馈速度越慢, 访问者的心理挫折感就越强, 就会对网站的可信性和质量产生怀疑。相对应地, 访问者倾向于认为, 反馈速度较快的网站质量更高, 更可信, 也更有趣。如果在等待载入期间, 网站能够向用户显示反馈信息, 比如一个进度条, 那么用户可以忍受的时间会延长到38秒, 这就是交互设计中重要的目标实现的体现。

1.2 反馈与用户期待不匹配

用户打开网页后却看到“正在构建”和施工图标, 甚至只显示冷漠的“未找到该网址”, 这令使用者产生质疑, 并为自己未实现查阅目标而产生挫折感。

再有, 提示中使用密码和设计人员的术语也是引发用户挫折感的一个主要原因。例如“错误404”“错误403”等等, 就像是突然喝令“不对”, 事实上大多数用户不清楚专用代码的意义, 这使其心生疑虑和焦躁, 引发挫折感。

1.3 网页操作步骤繁复

有些网页要求用户经历复杂的注册过程或强迫安装新插件, 用户不得不花费大量时间安装, 有时它却不能使用或与操作系统不兼容。反复尝试操作易施加给用户的负担过重, 导致用户失去耐心和信度, 增加了用户的挫折感。Cooper将用户分为新手、专家和广大的中间用户。不可否认, 新手是敏感的, 而且很容易在开始有挫折感。操作过于繁复的网页固然无法适应用户需求, 好的交互设计要使新手迅速掌握产品的使用方法从而转变为永久的中间用户。

1.4 界面布局杂乱

有些网页的界面使用户必须通过双眼进行雷达式扫描再层层攻破, 才能得到自己感兴趣的资讯, 这样的界面无疑给用户带来太多负面压力。例如:太多闪动广告, 特别是浮动广告容易分散注意力;分类不明晰, 内容杂乱无章, 使人难以找寻所需信息;未经斟酌不适应用户需求的设计, 容易混淆用户的逻辑思维。

2. 构成用户挫折感的原因

2.1 从用户角度出发

诺曼在《设计心理学》一书中就提出了“你在使用某物品时遇到麻烦, 那不是你的错, 而是设计出了问题。”在使用让人产生挫折感的网页时, 那不是用户的错, 而是网页设计的交互性出了问题。

从情感化角度出发, 诺曼的另一理论也证明了使用户受挫的网页设计原因。设计的水平有三个层次, 本能的、行为的和反思的。

首先作为网页设计, 要满足用户在操作过程中可以以本能的反应来进入下一步操作。例如, “确定”或“下一步”这类按键常常设置在“返回”“取消”键这类否定性按键的左边, 如果突然调换了顺序, 那会造成用户下意识操作后的错误, 因此而产生错误操作或重新操作则增加了挫折感。

其次, 要在行为层面进行设计。研究表明, 通常用户打开网页之后不会仔细阅读每个文字、思考每张图片的含义。通过眼动测试仪观察, 用户只在每个页面上瞥上一眼, 眼光无顺序的扫过一些文字, 然后点击第一个令他们感兴趣的链接。所以, 网页的设计中, 要深入研究用户的行为再来设计。当为惜时如金的商务人士设计, 却未对其人群的行为及特殊性进行研究, 结果可能导致该人群产生的挫折感转为愤怒, 因此彻底放弃该产品。

再次, 反思的层面, 是比较高深的层面, 但是, 对于一些娱乐、艺术或公益等网页的制作中, 就要特别注意反思的层面。反思通过上下文相关联构成人的联觉, 这使得网页的设计更加有意思, 引发引人入胜、支持创造力、有趣、激励、情感上满足等等感受。

2.2 从交互设计角度出发

交互设计的两个目标是, 可用性和用户体验。

首先可用性目标有几重标准:能用、好用、爱用。结合情感化设计的三大层次, 能用的设计满足了本能需求;好用的设计更关注用户行为;使用户爱用则有关注了深层需求。使人心情愉悦明朗甚至引人入胜, 才能实现爱用这个设计高度。

另一个目标是用户体验, 最差的用户体验是引发了用户不知道该“做什么”的挫折感。可以从两个方面证明上述判断:第一, 从用户心理来说, 相较传统媒体, 互联网信息量太多, 获取信息的方式太快, 用户内心普遍存在潜在焦虑。如果网页设计时不但没有缓解焦虑, 反而让他们在焦虑之上更加受挫, 显然糟糕;第二, 从媒介特性来看, 从传统媒体用户获得的是信息本身, 得到“是什么”的体验;而互联网上, 用户看到的不只是信息本身, 更重要的是超链的存在, 使用户更关注下一步“做什么”。按照麦克卢汉的理论, 这就是媒介本身的性质决定了其信息的性质。因此对于传统媒体来说, 最差的用户体验是用户不知道“是什么”, 看了白看;而对于互联网来说, 最差的用户体验是用户不知道该“做什么”, 造成挫折感。

3. 网页界面交互设计中的用户挫折感应对方法

通过从用户和交互设计两个角度对挫折感产生的原因分析, 以用户体验为中心, 提出界面的统一性、层次性、逻辑性及反馈性这四点作为应对用户挫折感的方法。

3.1 界面统一性

保持网页的统一性有利于企业的品牌识别, 这是企业的基础目标。这种品牌识别不仅是界面所有的视觉元素, 还可以是概念系统, 或者固有流程, 在用户与产品交互的同时, 企业的品牌形象就在用户心中形成了。交互行为也需具有统一性, 网页内的交互模式不宜过多, 抓住一个核心元素将其充分展示。

3.2 界面层次性

界面中某个元素被设计师重点突出而与众不同的时候, 其他的元素会被弱化, 层次显得分明, 如果界面中这种被突出的元素太多反而变成信息干扰。

适当的留白是必要的, 密密麻麻的内容晒满整个界面让界面无法呼吸, 使用户产生视觉疲劳。苹果公司的视觉设计就是一个很好的案例, 通过留白方式, 突出了产品及主要文字信息。同时网页的设计可以采用从交互方式丰富其层次, 包括动画效果、虚拟三维效果、声音反馈、互动反馈等。

3.3 界面逻辑性

一个网页界面的逻辑性很重要, 主次鲜明条理清晰的交互架构容易得到用户的信任感。要让用户快速掌握:单页面的主次关系及多页面的层级关系;快速分辨网站的组织结构;在第一时间传达给用户想要突出的内容。不要指望用户在一大堆help文字里找答案, 要用界面语言引导用户, 要让用户在体验的过程中产生自豪感而不是挫折感。搭建合理的信息构架, 有助于明确使用逻辑性, 并有效的简化用户的操作步骤。

3.4 界面反馈性

网页的反馈是将产品信息有效传达给用户的方式, 是交互设计中最前线最直接的一环, 它的好坏直接影响产品体验。及时且恰当的反馈令网页具有生命, 使用户知道操作的正确与否、了解操作的有效性。

另一方面, 做到友好反馈。界面给出的反馈要关注用户情感需求, 如何做到友好反馈可以采用以下方法:

1) 友好并尊敬的语言引导用户。用户不喜欢被劫持或被命令, 语言是一门艺术, 在网页产品的交互过程中也如此。

2) 给用户明朗化的信息。用户常在注册过程中, 因步骤冗长且没有方向感而中止操作。而好的注册过程会在顶部出现图表式注册流程, 这使用户明确自己处于哪一步, 从而产生信任感。

3) 有效的帮助用户解决问题, 例如无结果页面反馈提示中, Google的搜索引擎会提示“您是不是再找……”从而有效帮助用户进行查找, 降低用户的受挫程度。

4) 换一种形式改变用户的心情。最有代表性的例子是“错误404”提示, 国外很多网站采用了风趣的图片形式替代了冷漠的文字提示, 令用户用一笑了之。

4. 结语

给用户带来挫折感无疑是对用户体验的漠视, 这样的结果会导致用户的不信任感最终直接阻碍商业的价值。唯有关注人的行为需求, 关注情感化、实现可用性、注重用户体验的网页交互设计才能够被人们接受和喜爱。

参考文献

[1]Jennifer Preece等著.刘晓晖译.交互设计——超越人机交互[M].北京:电子工业出版社, 2003.6

[2]Alna Cooper.著刘松涛译.交互设计精髓[M].北京:电子工业出版社, 2008.11

[3]李世国著.体验与挑战产品交互设计[M].江苏美术出版社, 2008.1

[4]Norman.D.A.著梅琼译.设计心理学[M].北京:中信出版社, 2007.4

网页界面的设计与创新 篇8

随着数字技术的发展, 电脑的普及, 网络的扩展, 我们深入到了“信息时代”, 数字化、非物质化、虚拟化是该社会的显著特征。飞速发展的网络世界正在逐步替代传统媒体, 成为人们生活、工作、相互沟通的平台。膨胀的需求给网页设计师提供了广阔的设计空间。相对传统的平面设计来说, 网页设计师具有更多的新特性和更多的表现手段, 借助网络这一平台, 将传统设计与电脑、互联网技术相结合, 实现网页设计的创新应用与技术交流。网页设计是传统设计与信息、科技和互联网结合而产生的, 是交互设计的延伸和发展, 是在新媒介和新技术支持下的一个全新的设计创作领域。

资讯型网站因宽而广的资讯传递, 专而深的资讯交流, 近几年在网站中异军突起, 以资讯为主要内容和特色, 服务于用户。目前大部分的政府和企业网站都属于资讯型网站。这类网站的设计开发以内容取胜, 以提供信息为主要目的, 其网站投资者的主要目的是在互联网上建立一个宣传沟通平台, 辅以现实业务和工作逻辑。相对电子商务类网站而言, 资讯型网站所包含的功能相对简单, 常见的交互方式有检索、论坛、留言等, 也有一些提供简单的浏览权限控制, 如好多企业网站中就有只对代理商开放的栏目或频道。本论文就资讯型网页在更为便捷的人机交互界面方面的设计进行探讨, 并提供初步的设计方案。

1 人机交互界面

人机交互 (Human-Computer Interaction简称HCI) 是指人与计算机之间使用某种对话语言, 以一定的交互方式, 为完成确定任务的人与计算机之间的信息交换过程。人机交互是一门综合性学科, 囊括了计算机科学、心理学、社会学、图形设计、工业设计等领域。早期的人机交互设施是键盘显示器, 随着计算机技术的发展, 以语音识别、字型识别为代表的模式识别、通过图形进行人机交互的智能化人机交互方面的研究也积极开展。

人机交互界面是人与计算机之间传递、交换信息的媒介和对话接口, 是计算机系统的重要组成部分。人机界面配合得好, 可使人机之间传递交换信息畅通无阻, 使人能迅速、正确识别并获取计算机处理的信息, 并将反馈信息便捷、准确地发送回计算机。可见, 显示器和操作系统是作为人机交互的基本媒介设备。在网页设计中, 页面的显示、鼠标的停留、资讯的检索、下级页面的进入等等, 都是需要人机交互界面完成传输入的, 正确、有效、方便、快捷是为此界面设计的出发点。

2 网页设计中的人机问题

在网页设计中, 浏览者通常根据所提供的交互方式进行浏览, 设计者从网站的结构设计到导航方式设计, 应始终考虑如何提供良好的交互性, 主页的设计对浏览者来说是否具有吸引力, 是否可以更发地引导浏览者访问站点, 所创建的网站是否更加符合浏览者的需要。

作为设计者除了将其作为一个新的领域来研究外, 还应记住要掌握其基本原理, 并充分理解人机交互的新功能, 的确, 设计一个公从的web网站, 就要适合于各种浏览者, 而不能只满足某些人的需求, 这对设计者来说具有很大的挑战性。人机交互的新要求主要针对多维超链接空间进行设计, 设计师必须将结构范、导航的方法、信息和文档设计等各方面结合起来。当然, 在web站点的设计上, 设计师更应该注重人机交互设计的艺术特性, 周时应该充分理解人机交互技术在导航系统中的应用, 将网站肉容和新的技术发明与web技术结合起来, 并且充分考虑目前的技术局限性。网站的设计结构框架浏览者未必可见, 但是浏览者根据导航系统应该能够在这个多维空间里自如地漫游。

网页设计中的人机界人机界面设计应该考虑以下原则:

(1) 以用户为中心的基本设计原则。在网页界面的设计过程中, 设计人员要抓住客户、浏览者的特征, 发现用户的需求。在网页设计过程中, 与客户的沟通很关键, 同时要广泛调研浏览者的上网需求, 征询意见。将客户 (网站建设方) 的卖点与网站浏览者的兴趣点结合起来。网站最终交互界面的设计决策要结合用户的应用环境, 必须理解用户对网站资讯的要求。最好的方法就是让真实的客户参与开发, 这样设计人员就能直接了解客户的需求和目标, 系统就会更加成功。较常用的方法是通过代理公司组织的网络调研, 了解客户需求, 同时与同类型网站中的横向比较, 以确定本设计宗旨与特色。

(2) 顺序原则。网站对信息的组织是多维的, 隐性的。即浏览者通常是看到资讯的一部分, 资讯之间的相互关系是隐藏的。为了不至于使浏览者迷失, 在信息组织上按照处理事件顺序、访问查看顺序 (如由整体到单项, 由大到小, 由上层到下层等) 等来设计、管理人机交互界面。树状链接结构和星状链接结构是两种常见的信息管理基本结构。

(3) 功能原则。即按照网页应用环境及场合具体使用功能要求, 各子页面的一致性设计要求和多种信息检索、同步的要求等, 在网页设计中要按功能区分多级导航菜单、分层提示信息和多项对话栏并举的窗口等的人机交互界面。同时这种交互界面必须尊重用户的浏览习惯, 提高其友好性和易操作性。如按照人的阅读习惯, 一行的汉字数尽量不超过35, 以此为界划分网页中的功能栏。

(4) 一致性原则。包括色彩的一致, 操作区域一致, 文字的一致。即一方面界面颜色、形状、字体与国家、国际或行业通用标准相一致。另一方面界面颜色、形状、字体自成一体, 不同页面相同设计状态的颜色应保持一致。界面细节美工设计的一致性使浏览者在看到界面时感到舒适, 从而不分散他的注意力, 并且能够按约定俗成的习惯访问页面内容。

(5) 频率原则。网页中, 总有一部分交互是浏览者的兴趣点, 按照对象的交互频率高低设计人机界面的层次顺序和对话窗口莱单的显示位置等, 提高监控和访问交互频率。

(6) 重要性原则。按照交互内容在网页中的重要性和全局性水平, 设计人机交互界面的响应形式和对话窗口的位置和突显性, 从而有助于浏览者把握好高低、主次, 优化网页浏览次序。

(7) 面向对象原则。即在设计网页人机交互时, 按照被访问内容的特征和浏览者的工作性质, 设计与之相适应和友好的交互界面。根据需要, 设置合适的显示提示、引导和帮助信息, 从而提高浏览者的交互水平和效率。

3 资讯型网站人机交互界面设计应用

本文所涉案例为浙江某家居公司的网站界面设计。该公司主营炊厨、卫浴、家居、家饰及户外家居休闲等日用品的进出口业务, 是集品牌、工贸、研发、投资为一体的多元化综合性贸易流通企业。公司立足于开拓国内家居日用品市场, 以品牌推广、连锁加盟、电子商务为主要经营模式, 通过对公司的了解及交流, 确定了如下几条制作标准: (1) 稳重、专业化的风格。 (2) 精巧、务实、方便、快捷的链接。 (3) 树型链接与星型链接混合的组织管理。

3.1 人机交互界面用户分析

网页界面设计要满足浏览者的需求, 这是勿庸置疑的。在对浏览者心理讨论的基础上, 结合人机交互界面的设计原则, 建立用户使用模型, 以此模型建立人机界面。设计时需要考虑, 浏览者特性以及影响浏览行为的因素, 浏览者需求分析, 用户技术方面的使用需求, 开发用户友好性系统的设计原理等。

本例设计中, 与家居公司明确网站建设的目的为“专业知识推文、企业形象宣传、潜在客户发掘”, 分析站点服务对象的技术背景、受教育程度、阅读能力、兴趣爱好、消费习惯、上网方式等等。同时能过各种搜索引擎找到竞争对手的站点, 详细考察他们的成功所在与不足多处, 找到哪些是他们没有涉及的内容。对企业提供的信息进行重构减少商业味道, 增加可信度, 以倒金字塔形式组织所有资讯。

3.2 网站架构设计

针对家居公司的基本情况, 对其网站作了结构分析。进行整体网站结构设计的目的, 是使浏览者即可以方便快速地到达需要的页面, 以可以清晰地知道自己位置, 并能够通过超链接迅速查阅本网站的其他网页或转向别的网站。

树状链接结构和星状链接结构是两种基本结构, 前者条理清晰, 后者浏览方便。本站点设计取二者混合, 以达到互补作用, 首页与一级之间采用星状链接结构, 一级与二级页面之间、二级与三级页面之间采用树状链接结构。如图1所示。

3.3 页面布局

在确定了内容、结构之后, 页面的布局开始发挥其重要作用, 它不仅进本面信息的有效提取, 而且也是网站脉络的一部分, 是网页交互界面设计的重要部分。

本家居网站的主页设计中, 通过方案优化, 确定采用半框结构布局, 自上而上分别为站点名称、导航栏、内容区、关联区。内容区左侧为主栏, 展示企业热点时讯及主要产品等, 右侧为辅栏, 是为招商加盟服务的互动区域。网站配色方案为“橙+红+灰白”, 采用橙色是为了配合企业LOGO用色, 红色为热点区域的按钮标记, 使画面更鲜亮醒目, 灰白为各栏目背景。界面载图如图2所示:

3.4 设计实现

本案例家居公司网页设计实现, 采用div+css的网页布局方法。这种网页布局方法有别于传统的HTML网页设计语言中的表格 (table) 定位方式, 真正地达到了w3c内容与表现相分离。DIV+CSS对搜索引擎更友好, 代码也更简洁, 后期维护也更方便。

如对于产品搜索交互的代码为:

4 结束语

网页界面的设计与创新 篇9

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

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

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

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

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

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

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

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

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

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

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

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

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

4 结语

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

参考文献：

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

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

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

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

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

网页界面的设计与创新 篇10

一、用户体验与界面设计

用户体验的英文全称是User Experience, 它指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。界面设计是人与使用对象之间传递和交换信息的媒介。不同用户对同一个界面的需求是不一样的, 通过研究用户的使用方式、感受, 能够更好的设计界面, 让产品更加易用、乐用。

二、以用户为中心的缓冲界面设计形式

网页缓冲界面俗称“loading界面”, 包括确定性界面、非确定性界面。常见的非确定性缓冲界面有以上三种表现形式:图形重复闪烁型、文案等待型、进度条提示型。根据市场调研, 大部分使用者更希望看到第三种进度条形式, 因为第一种“图形重复闪烁型”, 人们不确定图形圆圈要转多久才算加载成功, 也不知道第二个“文案等待型”后面的点要闪烁到猴年马月。

但如果在等待缓冲的同时, 界面能够看到一些其他的东西, 在一定程度上可以转移用户的注意力。就好比在网上看视频前, 总有几十秒的广告, 如果广告做得好, 能够让用户觉得不无聊, 适当减缓用户焦躁的情绪。常见的网页缓冲界面设计有以下五种表现形式。

(一) 图形化缓冲界面设计

页面的局部加载时常能看到“图形重复闪烁型”设计的身影, 视觉表现形式上像一个不停旋转的“风火轮”, 这样的表现形式非常适合做不确定等待时间的缓冲界面设计。但每次看到的图形都差不多, 如果换一种表现的形式, 也许会觉得“这个图形跟别的好像不太一样”, 通过好奇减少用户等待的焦躁。

以圆形为例, 除了以简单线段重复排列构成圆形以外, 还可以使用星形、多边形、不规则图形等视觉变化丰富的图形排列组成圆形, 并将这些单体图形的颜色由浅到深渐变, 由小到大排列等形式组成。同样是构成形式简单的缓冲界面, 却能让用户感受到更多新意。

(二) 数字与图形相结合的缓冲界面设计

为了减少用户等待界面显示的焦虑, 设计缓冲界面时可以给用户一个时间提示, 示意该界面的缓冲进度。如在“图形化缓冲界面设计”形式上加入时间、百分比等数字显示方式。在数字与“进度条提示型”缓冲设计相结合中, 为了减弱用户的焦躁, “增强用户的其他方面期待值”是一种好的缓解方法, 让用户在对网站怀有期待的同时, 增加对缓冲进度条的设计期待。比如对不同的百分点设置不同颜色, 用户在等待过程中视觉上不易疲劳。

(三) 品牌趣味性缓冲界面设计

以上两种表现形式都起到提示进度的作用, 但它们的差别是:“图形化缓冲界面”表现形式简单, “数字与图形相结合缓冲界面”内容有动画效果。在此基础上, 很多品牌网站为了加强品牌宣传力度, 在缓冲界面设计上加入了品牌元素。如:墨西哥奶酪网站的loading界面由一瓶带有投影的奶酪瓶构成, 瓶内的奶酪会随着进度条度数的上升而逐步充满整个瓶身。瓶身上的标签是该奶酪公司的商标和简介。

类似的缓冲界面设计还有很多, 如:环保类网站会使用绿色植物元素、货运网站会使用轮船环绕地球元素, 某外国品牌动画网站则直接使用老旧电视屏幕倒计时的方式。这样的缓冲界面设计, 在显示加载进程的同时, 还加深了品牌印象, 别有一种欣赏的意味。

(四) 文案化缓冲界面设计

除了对图形、进度条变形外, 缓冲界面设计还可以与文案相结合。好比看电影前, 都有一些预告片, 不仅能使人对电影产生兴趣, 还能知道大概内容。缓冲界面设计, 也可利用缓冲的时间, 在界面上设置一些该网站的流动图片和介绍文案。

如:热门游戏水果忍者登陆界面, 其缓冲界面设计是一个移动的西瓜, 可以增加用户的亲切感, 知道缓冲进度, 同时在缓冲条上方还有游戏玩法介绍图, 小窍门, 让用户在等待的同时更了解游戏, 增加游戏期待值。这样的展现方式如今被众多在线销售商家所亲睐。

(五) 分类式缓冲界面设计

如果一个网页加载的内容太多, 其加载进度相对会比较缓慢, 让缓冲界面呈现龟速, 甚至不动的局面, 如果产生这种现象, 设计师可以把进度条分成多个进度条多次加载, 以安抚用户焦躁的心。但在每个进度条相应的位置最好设有匹配的解释说明文字, 以诠释加载的内容, 以免用户对大面积进度条产生恐慌、不耐烦心理。

三、缓冲界面、图标放置位置方法:

打开网页, 当用户需要等待时, 采用确定性缓冲界面是首选。但对于一些网页加载内容较少, 耗时短, 网速快的情况下, 多使用非确定性缓冲图标这类成本较低的设计表现形式。其在网页中的放置位置都有一定的规则:确保用户可以注意到。

(一) 靠近点击区域

用户在网页中进行某项指令后, 需要等待加载这种情况, 缓冲图标位置必须靠近最后一步命令的点击区域附近, 这样能够让用户在等待网页缓冲反馈时看到最直接的呈现, 缓冲进度也最容易被注意到。如果能配合按钮进行切换下一步命令, 会得到更好的视觉使用反馈。

(二) 位于内容刷新区域上层

当页面内某区域内容需要被刷新时, 用户的视线焦点会聚焦在此区域, 如果缓冲图标此时不适合设置在此区域的刷新按键旁, 那么可以将缓冲图标放在被刷新内容的上层, 如发表qq邮箱广播的评论展开区域, 这样的设计让人一目了然。

(三) 固定区域

将缓冲图标安置在固定区域, 此区域最好是页面浏览器窗口附近, 要让用户在即使不习惯浏览器窗口构成情况下, 也能凭借浏览习惯很容易找到缓冲图标。比如Gmail这款邮箱应用一样, 缓冲图标设置在浏览器窗口顶部位置。

缓冲图标虽然是网页界面设计中很小的一个组成部分, 但如果不以用户为中心考虑其设计, 会给用户带来焦虑等负面情绪, 造成网站用户的流失。

四、总结

网页缓冲界面设计是网站设计的重要组成部分, 优秀的缓冲界面设计会给网站加分增彩, 吸引潜在用户, 但对于国内来说很少设计师做到这些水平。国内网页设计相对于国外还有一定的差距, 一是这方面投入的不够, 二是设计师设计意识有待提高, 通过以上搜集的这些设计方式及分析, 希望对今后网页缓冲界面设计具有参考价值。

摘要：网站成为人们获取消息的重要途径, 而网页缓冲界面设计在网站设计中越来越占有重要地位。好的缓冲界面设计可以吸引用户, 为网站增彩。本文从用户体验出发, 分别从界面表现形式, 以及缓冲图标在页面中的放置规则方法两方面深入讨论以用户为中心的网页界面缓冲设计方法。

关键词：用户体验,缓冲界面设计,网页设计

参考文献

[1]张静.论网页界面的交互性设计[J].长春师范学院学报, 2013.06.

[2]熊科军.网页设计中的提示信息设计研究[J].美与时代, 2015.02.

[3]季芳磊.网页设计中的细节交互[J].科技风, 2011.