全局于网站整体的网页设计：脱离纯美术概念看界面设计网页设计

【导语】下面是小编为大家整理的全局于网站整体的网页设计：脱离纯美术概念看界面设计网页设计（共10篇），欢迎阅读与收藏。

篇1：全局于网站整体的网页设计：脱离纯美术概念看界面设计网页设计

全局于网站整体的网页设计系列文章目录：

全局于网站整体的网页设计：需求决定网站产品模型

全局于网站整体的网页设计：脱离纯美术概念看界面设计

全局于网站整体的网页设计：风格是网站的外衣

全局于网站整体的网页设计：代码设计

全局于网站整体的网页设计：可用性测试与用户体验

网页设计的规范

理解并遵循网页设计的规范是网页界面设计的基础，网页设计的规范在行业中通常被称为设计的“一贯性”，一个优秀的、有经验的设计师能把网页设计的基本规范自然而本能地融入作品中。在显示器的方寸显示空间里，用户需要以被限定的分辨率来浏览页面、以键盘和鼠标来交互控制界面、继而在有限的网络传输速度下一个个层级地浏览整个站点，可想而知其中有多少要素需要规范化。

形象标志(LOGO)、导航、搜索、内容区块、页面长度、字体字号等元素是这些规范中至关重要的部分。这些元素中大部分都表现在网站的头部或者是第一屏能显示的区域内：一般的网站通常会在头部显著位置显示网站LOGO，以合理的层级关系及最普通的字体字号来展现导航以及设计合理的搜索功能块。

在这里我们需要注意的是除非非常必要，网站的LOGO尽量不要以flash动画展示，同时导航也尽量不要以flash动画或图片来表现，因为浏览器有拦截flash的可能；同时，不同终端设备上浏览器对flash和图片的不支持也可能造成网站无法继续访问或者根本无法识别。

我们可以通过以下几个例子对比一下网页设计规范在实际应用中的效果：图1，汽车之家的导航设计，图文结合，非常出色；图2，贵州省人民 ，网站标题和LOGO全部制作到flash动画中，当浏览器屏蔽flash的时候，网站将无法识别；图3，伊利集团网站，导航flash也很漂亮，同样的，当浏览器屏蔽flash的时候，导航将不可见，网站无法被继续访问；图4，广东省人民 ，非常优秀的设计，导航栏全部以非图片形式制作，既保证了美观，又体现了实用性。

除此之外，网站的各内容区块应切割明显，让用户能很容易地判断内容块的起始。如果不是门户类型网站，网站页面长度尽量不要超过三屏（因为不同显示器分辨率参数不同，三屏的说法不一定适用于所有设计），即不要让用户在同一页面上过多滚动鼠标滚轮。中文网站设计时应注意内容区域文字尽量使用12像素、14像素等偶数字号，以准确表达中文字体的整齐切割，正文汉字部分应严格使用宋体，保证用户最好的阅读感受。标题部分可以稍微增大字号，页面上除装饰性图片或广告之外的地方最多使用两种字体。如图5所示的方正字库网站，就是一个很好的例子，左侧列表使用13像素宋体，右侧列表使用12像素宋体，同时除广告外还出现了黑体和行楷等数种字体，

遵循简洁为美原则

网页设计不是仅仅使用户在显示器上看到漂亮的装饰性画面那么简单。比起华丽的画面装饰，网页设计应该在更有效地传达信息方面多下些工夫。这必须有对布局设计和色彩的正确理解和相关知识，要熟知网页物理系统的特性，并具备应对各种情况的能力。在具备人性化界面的网站设计中，我们不难发现其表现出来的功能性和自然美。多数设计得比较好的网站，都考虑了多媒体的特性，色彩设计和信息按照一定秩序排列，能更有效地向用户传达内容。

很多设计师认为画出美妙绝伦的页面才是设计，其实不然，要在有限的元素和色彩里表达出风格才是更有难度也更有层次的设计。经过严谨的思考和漫长的推敲，最终只花几分钟为页面画下一个简单的圆角框或者一条两像素的实线，其效果也许比涂满了色彩和组合了数十个分层的画面更好。设计最终将上升到思想的层面，而不是仅仅停留在工具和素材的使用。

简单就是美的设计理念使得Web设计中的简约风格意向逐步明朗，在体验了复杂烦琐的颜色和图片堆砌之后，主流设计开始返璞归真。毕竟网站是给用户使用的，而不是光用来看的，简约的设计能给人以轻松的视觉体验，更好的突出网站功能主题，更适用于网站文字内容的资料表达。

通过以下几个例子我们可以很好地对比简单和复杂的网页设计所体现的不同效果：如图6，互联网上最著名的相册Flickr，采用了最简约的设计；图7，中国SNS的典型代表校内网，以色块和线条构成主体，网站结构上极少使用图片；图8，安徽省 ，首页使用了极少见的纵向4栏分割设计，极其烦琐。

重视交互性和用户体验

在界面设计方面，很重要的一点就是要站在用户的立场去进行设计。如果网站的画面既不美观大方，使用起来也不方便，那么这个网页的界面设计是失败的。既能给用户带来方便，又兼备视觉的冲击力的网页界面设计，才是每个网页设计人员应该思考并追求的东西。

在网页界面设计方面，设计师尤其应该考虑使用的便利性和视觉效果这两方面的问题。在使用方法方面，可能的话应该遵循网站设计的普遍规律，界面的构成不能太复杂，主要内容应该设计在引人注目的地方，所有操作性按钮位置应该科学，让用户容易适应；同时，要考虑符合网站主体的色彩系统，去除不必要的内容，把信息块分类设计得成体系，让用户很容易就能找到想要的内容。

如果不是追求艺术美感和试验性的特殊网站，无论设计师想表达的东西是多么新颖多么富有创意，假如把网站头部设计得很复杂很难以理解，进而影响了用户的操作，那么它就很难成为一个优秀的网站。例如以下几个网页，在设计中就存在着一些因为不够重视交互性和用户体验而存在的问题：如图9，湖南省人民 ，所有同级内容无区分重复堆砌，容易让人视觉疲劳；图10，知名女性用品网站果皮网，右侧列表过于冗长，用户体验极差；图11，Sandisk中国总代宏衢网站，在简单的页面上采用了过多的烦琐的图片设计。

来自：www.blueidea.com/design/doc//6552_5.asp

篇2：全局于网站整体的网页设计：代码设计网页设计

全局于网站整体的网页设计系列文章目录：

全局于网站整体的网页设计：需求决定网站产品模型

全局于网站整体的网页设计：脱离纯美术概念看界面设计

全局于网站整体的网页设计：风格是网站的外衣

全局于网站整体的网页设计：代码设计

全局于网站整体的网页设计：可用性测试与用户体验

如何进行规范的代码设计

相信很少有人会在网页设计的过程中把代码设计单独拿出来说，虽然在软件设计中代码设计很受重视，但在web设计里，大家更关心网站结构设计、数据库设计、页面视觉设计，很少有人会真正关心前端代码设计，这恰恰是因为代码设计的优劣不是一般用户所能感觉出来的，设计得差的前端代码，在用户使用过程中也许毫无影响，却能将前端工程师和web程序员弄得一塌糊涂。

DIV的规范及科学统筹

说到前端代码，不能不说DIV架构。目前主流的网站页面架构方式已经转向DIV+CSS的结构层和表现层脱离的方式，这个过程也叫做网站的标准化。这与以往的利用表格定位的方式完全不同，更加强调了界面元素的模块化定位，由DIV确定模块的界限，再由CSS代码表现该DIV元素的表现形式。

在DIV的布局方式中，我们更多强调的是规范，因为DIV的ID名称和CLASS类名称是能够由代码编写者自行定义的，所以有明确规范的DIV设计是前端代码设计的前提。如今的web工作往往牵涉到一个团队中的多人进行协作开发，代码被阅读和被修改的次数远远多于它被编写的次数，而保持代码易读、易修改的关键，就在于在代码编写前期确定能被认同的代码规范。

首先我们先了解DIV架构中的命名规则，DIV的许多规范要点体现在ID或者CLASS的命名中，绝大多数设计师习惯使用属性命名方式：即显示绿色14号字的类就命名为green14，蓝色背景区域的类就命名为blueBg。这样命名也未尝不可，但是这样的命名方式对于合作的其他职能部门的同事来说，是毫无意义的。PHP程序员不会关心这个类的字是什么颜色，他只管这块区域应该和哪个程序模块接口；模板编辑也不会关心背景究竟该是什么颜色，他只管哪个区域是用来显示头图、哪个区域显示全站导航和全站通用底部。所以我们比较倡导表意命名方式和接口命名方式，比如pageHead和loginArea这样的命名，pageHead明确表示了这块区域的意思，而loginArea指代了这是个登录区域的接口。不管这两个类里的字号颜色等将来因为改版发生了什么改变，它们起到的作用和所定义的固定区域是不会改变的。

其次我们了解一下DIV中类的复用，同一个页面中，DIV的ID是唯一的，表示该页面上独一无二的一种特定表现；而CLASS（类）是可以无限重复使用的，表现该页面上有某些属性相同的若干区域，所以DIV的复用仅仅指的是类。牵涉到复用的时候，类的命名应该尽量多地表意化，有必要的情况下使用属性命名也能起到很好的效果。比如页面中有很多个不同的内容列表区块，但是宽度都是760px，那么使用contList760这样的类名称进行复用就比contListA、contListB、contListC……这样单独且表意不明显的命名要好得多。如图1所示的网站alistapart.com，由图2我们可以看出，它的代码设计非常规整。

CSS整站规划——网站设计的重中之重题

说过DIV当然要说说CSS，CSS使现代网站大放异彩。符合标准化的网站，仅仅通过更换一个不同的CSS文件，就可以瞬间实现整站所有页面改变更新的显示效果。CSS统一了网页的表现层，而不影响网站结构和数据传输。

而CSS的书写方式也因设计师的不同而各有千秋，在此，我们强调CSS的设计关键在于代码的缩略与复用：缩略能使CSS代码更加简明扼要，CSS文件也能缩小体积；复用则是提高代码的利用率，以最少的代码实现最高的重复使用效率。如图3所示，腾讯网的CSS设计就十分优秀。

首先我们来看代码的缩略，很多编辑器生成的CSS代码片段会像图4一样杂乱随意，而实际上这段代码能缩略掉所有不需要的空格，组合起同系列元素，使得代码行读起来更加轻松无负担，

毕竟，编辑器是按照一定的程序运算而提供出来的CSS样式，它能自动实现预期效果的CSS样式，而绝不会自动精简代码。这个过程还是需要人的干预，而且对于不同的应用场合，CSS代码中的缩略方式也会有所不同，而取谁舍谁，则完全看具体情况而定了。

其次，我们来了解CSS的复用。同样是复用，CSS的复用情况和DIV很不同。设计中我们需要尽量实现CSS代码的复用，尽量多利用CSS的继承和层叠，而不是到处定义新的CSS类。在繁琐的CSS设计中，也许会遇见两个大部分属性一致而只有某一两个细节不同的类，那么可以考虑这两个类是否是继承关系，或者说将它们相同的属性提炼出来，形成另一个可供公用的类。

后期整理——代码也可以很美

之前说的都是代码编写的前期规范，而页面完成之后，代码的后期整理对于今后的修改维护“可持续发展”也非常重要。在这里，我们需要注意以下几个方面的内容。

1.样式表统一：样式表分为内联样式表和外联样式表，成型的网站架构要求对样式表统一管理，所有的样式表都需要独立出来，作为一个或几个外联样式表文件；除非是极特殊的情况，该CSS只在这一个页面中出现，不会有另外的页面需要复用它，那么可以考虑使用内联，而内联样式很多时候会被视为极不专业的做法。如图5，色影无忌网站的设计从外观看很符合标准化设计，但从图6我们可以看出色影无忌的代码设计非常混乱。

代码也可以很美

2.注释：再科学、再规范的代码，也不见得能一眼就被其他人读懂，所以这个时候需要代码注释。CSS的注释很简单，在HTML里的DIV注释因为其层级嵌套关系的问题，需要使用

3.空格：关于CSS代码中的空格问题一直被激烈地讨论着，我的主张是，在页面发布之前，因为代码的规整而产生的空格是没有问题的，这样更便于编辑与调试，而在网站定稿上线后，可以将CSS类里的空格换行都删除，每个定义类都并成一行代码，这样既能压缩文件空间，也能使所有类的名称整齐划一，便于查找。

4.其他：有些编辑器产生的CSS代码会出现大写字符，建议统一修改成小写，而对color:#666666之类的颜色代码，可以缩写为color:#666。这对维护没增加什么困难，而且确实减小了文件体积。

名词解释

CSS是英语Cascading Style. Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者通过使用样式表格式化这个块来进行控制。

DIV+CSS是网站标准（或称“Web标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

链接

CSS标准化在页面应用的补充

摒弃table布局不是说禁止使用table，table标签仍可以用在容纳表格型数据的场合，而不用于页面布局的目的。

页面中的标签都是带有结构含义的，尽量少因为布局的目的引入额外的div标签。

页面中的结构与表现完全分离，结构位于html文件中，表现位于css文件中。

尽量使用通用的CSS语法，少用特定于某种浏览器的CSS语法。必需要用的，则将这类语法隔离在单独的css文件中，以便日后浏览器升级后删除。

来自：www.blueidea.com/design/doc/2009/6552_12.asp

篇3：网站/网页设计个人简历

网站/网页设计个人简历模板

篇4：大网站改版网页设计

今天看到淘宝首页有新版体验信息，点进去，看到最新的淘宝首页，我个人不太习惯，不知道数千万淘宝会员觉得如何，暂且不评论罢。

就大网站改版这个话题，说说我的看法。

改版干吗？

一个网站，一段时间总要进行改版，这似乎成了行规。就我的了解，在这几种情况下比较容易催生改版：

用户习惯发生明显变化

用户体验需要大幅优化

组织结构调整

大老板说要改

逢年过节或有象征意义的改版（如我们说过的apple改版）

可是回过头来，只有前两条是真正站在客户角度考虑的结果。不过，大多数网站改版都是为了改而改。

应该潜移默化做改变

我们说网站的形象维护，就像经营一个品牌。当客户足够多的时候，尤其是有很多黏性客户的时候，用户跟你成了老朋友，在他们心中你是原来的样子，可是突然做了很大变化，那用户就不好接受了。

比如SONY的logo，几十年来发生了很大的变化，但是是一点一点改过来的，普通人一点都没察觉，SONY还是那个时尚的SONY。

再比如新浪网，去年进行了很大的变化，从800像素宽变到了1024宽，可是用户完全在不知不觉中完成了切换。因为，数千万用户已经习惯在右边点新闻，在中间看广告了，改了，人家找不到。之后，新浪首页经常在做微调，几乎每个月都有新变化，我一直注意这个，用户慢慢接受。所以新浪网在客户心中的形象，十分一贯也十分稳定。

反面的情况呢？Yahoo中国当年突然从一个门户网站变成了仅有搜索条，用户找不到原先的东西了，

电脑资料

这会让用户觉得，你出什么事了，为什么这样。这就叫做：客户感情危机，我们应该避免这种东西。

别让客户跟着你拥抱变化

有个很有意思的说法，叫“拥抱变化”，叫“唯一不变的是变化”。我呸！这说的是态度，不是事情。我们没有道理让客户跟着我们一起拥抱变化。损失客户感情，风险真的很大。

变化是用来回头看的，不是给惊喜

刚才说了，变化应该潜移默化，可是有人会说了，那改版有什么意思。我说，改变，尤其是有很多客户基础的改变，不要给客户惊喜。

因为，你认为是惊喜的东西，别人看上去没准是惊愕。

因为，变化给人的感动，是慢慢形成的，变化是用来回头看的。当我们发现自己这5年来的变化，从不在网上买东西到什么都在网上买的时候，我们会感叹自己的变化，这个过程没法太快。

要真心做测试

我相信无数网站改版，做A/B Test，都是象征性的，因为大老板已经说了，要改成B的样子，于是装模作样做一下测试，试图证明B是好的。

真正的测试是从概念阶段就开始的，每一步去测试用户的反应，向着好的方向改动。绝对不是都要切换了，临时做一下测试，那是象征性的，你都决定要改了还问人家干啥！

==============

这就是我的想法，不针对任何人任何事。

本文来自：www.panghufei.com/?p=10068

篇5：电子商务网站评论设计探讨网页设计

从CNNIC在的报告中可以看到，超过80%的网民购物之前都要看评论（包括本站、其他站评论），超过80%的网民都比较信任口碑（包括网民、亲朋好友推荐），貌似又满足那个传说中的二八原则，我认为还算靠谱，

也就是说，电子商务网站商品的评论很重要，好设计可以提高用户参与度，好的参与度可以得到更多的优质评价，更多的优质评价可以直接提升产品销售率。因此，我们今天话题也聚焦在“电子商务”领域，因为不同类型产品的商业意图不一样，设计方案也会不同，混为一谈意义不大。

是否需要登录后评论

gouwu.youdao.com/ 有道购物搜索商品评论表单

我更倾向于宁缺毋滥的方案，如有道购物搜索必须登录才能在文本区录入内容，但之前会显示评论表单出来。应该是有使用经验的用户才有“评价”资格，控制质量的门槛还是必须的。

首先是现场提到录入内容，并点击“确定”之后才告诉得登录的情况显然很糟糕，虽然能引导进登录或注册成功，但返回后之前录入的内容已全部清空。这个问题的根源，我认为在于没有明确告知门槛，事发之后又没有完善的解决方案，最简单的办法是直接告诉用户“评论请先登录系统。”曾经见有同行提出，上个解决方案太生硬，因为还是不能直观告诉用户如何参与评论？怎么评论？如果显示评论表单出来，可能会更激发用户的评论欲望，并且说有数据支持。

其次尤其是有金钱交易的电子商务行业，网友更关注注册用户的评价，而参考陌生游客评价的权重低。因为网友有可能会跟踪注册用户去参考他的其它评价，或对此人的评价进行“权威性”评估。典型案例如淘宝，某些很挑剔又人品不好的顾客很容易给卖家差评，

是否需要分项评论

www.360buy.com/ 京东商城商品评论表单

针对提到的京东商城评论典型案例中，把产品评论细化为了“优点、缺点、总结”。我个人认为这样的设计有点一厢情愿，意图是理想的，但用户可不会这么听话。

首先在产品本质角度理解，电子商务网站的根本是卖东西，必然应该优先资源想尽办法引导用户消费，从而势必会与让用户了解客观评价的目标相冲突。客观评价应该由第三方网站去做，这样才显得公正公平。比如网络书店有当当、卓越两大巨头，而写书评大家还是愿意去豆瓣，这两边的氛围完全不一致。总结而言，同样的一个产品，不可能兼具两种目地性和气质。（当当和卓越即使要搞豆瓣模式，也应该另外整个域名，不过显然目前是没法超越了。依托资源做事，有多大好处就有多大坏处，具体请参考公司都是有传统的。）

其次在用户提供内容的动机来看，“有话说”的根本在于“想表达”，而且会相对极端的表达好还是坏，或者“Yes or No”。因为消费者了解必然有限，并且会主观站在自己立场考虑事情，即使资深用户也如此。另外，优点与缺点本身就是总结，最后的“总结”更显得有点多余。也好也坏，有多少好又有多少坏，并且能相对深入点评，那是专业导购网站做评测的路子，比如IT168, PCPOP都是靠这个起家的。

最后在交互角度考虑，拆分后会增加三个Textarea对象的文本区，将大大提升表单长度和视觉上的复杂度。尽管可以提醒用户某些可以不填，某些是选填，但还是会增加用户的认知负担。最俗的解释，表单太复杂，容易让用户望而生畏。

综上所述，我不认为京东评价是个好方案，这里的观点比现场更有条理并充分。正确做法，是让用户尽情表达，通过算法和用户打分来优选有利于商品销售的列表。别忘了电子商务网站的目标是卖东西挣钱，不是靠人气和话语权挣广告费！

本文来自：blog.rexsong.com/?p=8614

篇6：招聘网站怎么做网页设计

最近探讨flash在客户端的得失，与几位朋友交流时，突然想起，前段时间阿里集团旗下几个公司相继做出在业内反响比较大的几个招聘网站，不约而同都flash技术实现，原因可能有三个：

某些表现只有flash技术能实现；

flash技术表现互动更容易，制作成本更低；

通过作品表现团队实力。

相信三点原因是相互的，但我不仅要怀疑，真正专业的web designer会对这样的互动、视觉效果动心么？会因此认可招聘公司团队的实力么？在我看来，这样的招聘网站不仅传达不清晰，而且内容丰富程度上也远不够。具体原因，不妨先从受众用户角度来分析。

第一，网络招聘能招什么样的雇员？换句话说，什么样的人需要投简历找工作。通常外部网络获取信息，走招聘渠道的普遍不会是high-level职位。

第二，用户最关心哪些信息？除了千篇 一律的职责、资格、薪水范畴等基本信息，还有其他可能促进投简历的福利（如补助、年假）、签约、业务前景、工作环境、工作同事、操作流程、成长计划、上班交通等信息也很重要，同时也是公司之间的关键差距，我相信任何有经验的雇员都会很在乎，

互联网上很多有关企业文化、管理手段的探讨中，都会提到“以人为本”的说法，其实就是雇员在公司的用户体验。换句话说，高质有效的招聘网站，需要与HR部门同事业务支持的紧密配合。而不是任由设计团队的创意天马行空，这样不仅可以提高入选率，也可以提高面试效率。

相对来说，我认为淘宝招聘第三季做到比较好，把事情说的清楚、形象，也很有诱惑力。我心目中好的招聘网站，应该是个可以不断扩充、修正的信息体系，而不是每次招人的时候都重新搞。或者，完全可以当作产品来理解。

印象中，大多数广告公司、多媒体互动公司才喜欢用flash技术做网站，动画工作室更不用说了。虽然某些考虑比较周全的会再做个HTML版本，但总体来说客户端技术很差，也无法体现“web design核心是information, content”的本质。

原文链接：blog.rexsong.com/?p=6100

篇7：关于网站导航设计的探讨网页设计

许多网站缺乏针对性和友好的导航设计，难以找到连接到相关网页的路径，也没有提供有助于让访客/用户找到所需信息的帮助，用户体验非常糟糕，这篇文章，我们尝试就网站导航交互做一些探讨。

首先对于WEB交互设计师来说，解决上面遇到的问题，使之简单的方法是设计一套完善的网页导航系统。

优化网站导航设计的目的

一个网站导航设计对提供丰富友好的用户体验有至关重要的地位，简单直观的导航不仅能提高网站易用性，而且在方便用户找到所要的信息后，可有助提高用户转化率。

如果把主页比作网站门面，那么导航就是通道，这些通道走向网站的每个角落，导航的设计是否合理对于一个网站是具有非常大意义的。

1） 决定用户在网站中穿梭浏览的体验，这一点是最基本的。

2） 网站导航设计合理，可以将网站的内容和服务最大面积的展现在用户面前。

3） 合理的导航设计可以增加用户黏性，提高网站的浏览深度，从而提高网站PV值。

4） 促进用户消费，提高网站盈利。引导用户消费，将用户真正需要的产品和服务展示在他面前，甚至用户想不到的服务你也呈现。

5） 提高网站广告价值，增加网站广告收益。

……

网站导航的常见结构

雅虎的网页设计一直是国内众门户模仿的对象，我们首先来看看Yahoo网站现有的几种导航样式：

1） Yahoo首页 （最常用的栏目导航）

Yahoo首页左侧的导航列出了网站最常用（或访问最频繁，或网站运营最想让用户知道）的几个栏目。这种导航（也包括网页顶部横向结构）是目前互联网中使用最广泛的导航方式。

2） More Yahoo！Services （更多的导航信息的展现）

Yahoo作为一个全球大型综合门户网站，所提供的服务肯定不止首页左侧导航显示的那几个，那么更多的服务如何导航？同时又如何展现给用户呢？于是Yahoo的设计师们给我我们一种解决方案，如上图，点击从网页左侧展开一浮出层样式的服务导航页面。可以发现，这种导航也是多维度的（下面我们会专门探讨）

3） Tab式位置导航变体

我们还可以在Yahoo！TV 等栏目上发现这样有趣的导航结构，我们暂且认为他是Tab 式结构加上一个下拉菜单的一种导航组合。

nTV Home – Shows – American Idol – Overview 组成了一个单维度的导航

nTV Home同时提供了下拉菜单方便用户快速的转到其二级栏目下。

（这里我遇到一个困惑，在这里我不知道怎么TV Home上一级的目录是什么，也不知道如何返回。）

4） Amazon首页

Amazon可以说是在网络产品导航上的鼻祖了，让我们再来看看Amazon的导航样式又有什么特色。

看看它和谁最像？

5） Amazon购物列表页面

由Amazon购物列表页引申的讨论：

单一维度 和 多维度的导航结构

我们通常认为面包屑导航为单一维度的导航结构，如上图红色实线框所示，即它是一种线性的导航方式，

不过在网页的应用中，“面包屑”导航的应用有两种：

a)“追溯来路”即跟踪用户行为，记录的用户在网站的活动足迹的一种“线性导航”，

b)用来表达内容归属关系的界面元素，也就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的层级归属关系.

而改网页左侧的导航却提供多种维度的导航，且这多种维度可以组合成不同层级的面包屑结构

如，我想买一台LCD平板电视，进到了：

Electronics › Audio & Video › TVs & HDTVs › Flat-Panel TVs › Flat-Panel LCD TVs

在这个页面上，左侧导航给我提供了品牌、供货商、价格、显示屏尺寸……等多种选择。

我可以先选品牌再选尺寸，如：

也可以先先尺寸再选品牌，如：

因此这种方式为用户提供了多种维度的导航，运行用户如在电器超市随意逛逛挑选商品，而不必考虑该先问导购员有什么品牌还是问有什么尺寸好。这一点符合用户的心理模型，值得设计中借鉴。

网站导航设计需要注意的问题及基本原则

我们就网站组日常需求中，有关导航的交互设计工作进行了交流，总结出在网站导航设计中需要注意的几点问题及基本的原则。

1.导航条的位置。主导航条的位置应该在接近顶部或网页左侧的位置，如果因为内容过多需要子导航时，要让用户容易地分辨出哪个是主导航条，哪个是某主题的子导航条。

2.导航使用的简单性。。导航的使用必须得尽可能的简单，避免使用下拉或弹出式菜单导航，如果没办法一定得用，那么菜单的层次不要超过两层。

3.面包屑导航。应该让用户知道现在所看的网页是什么和与现在所看网页的相关网页是什么，例如通过辅助导航“首页 > 新闻频道 >新闻全名”里的对所在网页位置的文字说明，同时配合导航的颜色高亮，可以达到视觉直观指示的效果。

4.导航内容明显的区别。导航的目录或主题种类必须得清晰，不要让用户困惑，而且如果有需要突出主要网页的区域，则应该与一般网页在视觉上有所区别。

5.导航和排序的区别。导航和排序容易混淆，需要留意（看图指出问题）

这里的tab是导航还是排序？

Google Reader上的处理

6.准确的导航文字描述。用户在点击导航链接前对他们所找的东西有一个大概的了解，链接上的文字必须能准确描述链接所到达的网页内容。

本文出自：webteam.tencent.com/?p=156

篇8：网站的视觉设计网页设计

自己从工艺品设计到平面设计到网络设计，虽然设计原则不离其宗，但经验下来的心得告诉自己，设计媒介的变化带来很多媒介自身的特殊性，下面总结下网站视觉设计的一些要点，有他人经验，也有自己的心得：

1—logo：基本logo特征，符合logo设计基础（平面设计通用）

显示器效果：清晰度，最小尺寸（因显示器分辨率而带来的，等同线下平面设计的印刷效果）

2—文字：内容等级决定字体、字号大小、粗细；状态决定颜色（默认或者根据网站特殊统一）

3—广告、内容图片：尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小对比，

4—icon：品牌性，表达准确合理，设计手法（依据品牌性），一致性，作用：吸引，醒目，方便识别、

理解、操作、记忆。

5—可点击（button)：区别（不可点击），根据人的生活经验：厚度，可按，质感（实体联想），色彩

（品牌性、统一性、对比性）；统一的样式大小（依据里面文字的内边距统一）

6—背景图片：氛围效果营造，同产品的统一性，优化（品质大小，色彩信息，实现方案），

7—图文排版：主图次文，图文节奏，空隙，模块化。

8—当前状态：放大（形状），变色（反色、对比色、明度纯度区别色），链进链出后指定内容提示，

9—交互控件：样式合理准确性（人对系统默认的认知和生活常规认知），状态（视觉表现样式和动作过程

优化），创意。

10—loading:内容关联性（loading前后的内容关联），无聊等待的乐趣，体积、面积优化，创意。

11—用户反馈_ 成功、出错、提示、无结果：文案（明确、合理、人性化、创意），图形（明确、醒目、

色彩的心理认知准确度）。

12—动画效果：过程合理（模拟真实环境的合理化），连续，节奏感，用户日常动作表现，音效配合，创意。

13—首尾设计：首（品牌宣传、自身特点、明确内容、气氛表达、创意。尾：呼应、节奏（与首），创意。

14—适应屏设计（全屏设计）：最大最小屏幕的考虑（文字、图片的位置、折行效果）

15—固定尺寸的栅格设计：合理的单元格（考虑黄金分割），单元格面积节奏，边距统一性

16—demo设计样稿：对内容最多最少的考虑。

17—页面：品牌性，基调元素一致性，复用性，节奏感、面积感，视觉第一吸引，引导浏览，点线面关系，

素描原理（运用素描的基本规律来做页面）。

18—阅读：背景对阅读（视力）的舒适度，内容与背景的对比舒适度。

其实还有很多设计的点比如交互设计，比如代码设计，我们可以展示给用户看到的这些综上所述，构成了用户体验设计的一个大过程，自己在做的很多时候其实也不是都能估计到每个点的，总结出来以帮助随时审视！

来自：dimcolor.com/blog/?p=345

篇9：网站首页设计诠释网页首页制作

网站首页设计，需开宗明义突出主题.开宗明义，无论是对于一篇文章、一场会议或一部

展示哪些信息

页面的重要性是建立在它所呈现信息的基础之上，反过来说，页面要向用户展示哪些信息是决定其重要与否的首要指标。在网站页面中，网站标题、副标题、菜单(狭义上的导航，请参看《WEB导航设计》)、用户登录信息、关于、版权信息这几项是网站的基础信息，是一个网站身份的像征，承载着向用户表明网站立场、提供何种产品或劳务、网站自我介绍、如何联系网站的重要使命，在设计页面时，这些信息必不可少。

而网站的首页，除了需要显示以上这些基础信息之外，最重要的是还承担着网 站转化率的重任，这也是所有类型的网站首页的最重要任务。如何让网站首页完成这项重要的任务呢？我的理解是把网站所提供的产品或劳务通过版式设计、文案设 计、色彩设计之后，展示在首页适当的位置，并使其不受其它信息元素干扰，甚至使其它元素为它(产品或劳务)服务。

突出主题思想

知道了首页需要展示哪些信息，知道了信息之间的权重，如何把信息呈现得更 符合信息本身，却不是一件容易的事，需要时间的磨练与经验的积累。就设计本身而言，是一件感性的事，不像数学公式，它缺乏严谨的理论做为指导，所以在工作 中，经常出现与Boss、同事意见相左的情况。我个人的经验是在非重要信息的设计上使其具有普适性，在重要信息的设计上突出设计的主题思想，在与 Boss、同事讨论时，尽量把讨论的重点放在主题思想的呈现方式与其对转化率(或市场目标)的作用之上。你可以说这是功利的设计，没错，所有的设计都是以 商业利润为最终目的。

如何突出

在版式设计上，要求把信息分门别类，让用户在扫描(只为扫描而设计，请参考《Don’t Make Me Think》)页面时保证视觉流的流畅性，在短时间内(3-5秒)发现首页包函哪些区域（如菜单、广告、注册、个人信息、链接、按钮等），方便用户在第一时间内做出选择。在设计过程中，建议严格遵循四个排版的原则，即：对比、对齐、重复和亲密性(请参看《写给大家看的设计书》)，

如yahoo.com、renren.com、cnet.com的首页

在文案设计上，副标题的文案设计，要求文案简洁明了、开宗明义，语言、句 式的表达需符合网站的整体调性。如人人网的“因为真实，所以精彩”，阿里巴巴的“全求最大的采购批发市场”，babytree.com的“爱、交流、成 长”等等。在产品或劳务宣传的文案设计上，要求简短、易懂、描述要完整，语言要情感丰富，具有扇动性，吸引用户注意力，最终促使用户付出行动，这就达到了 目的(转化率或点击率)。显示的要素通常包括谁/什么、有多少、何时、何地、如何做、为什么这六大要素（请参看《餐巾纸的背面》）。如人人网、开心网首页的主题表现形式。这些应该是文案设计的工作，但现状是Boss不会专门聘用Copywriter，网页中的文案一般都是由交互设计师来完成，而小公司是由美工来完成。所以，了解一些文案设计知识是很有必要的。

在色彩的设计上，即要符合网站整体特征，又要适合所渲染信息的特征。一般采用同色系或相邻色系对网站基础信息进行渲染，对于突现主题的信息采用基础信息色彩的补色或对比色进行渲染，从视觉上体现信息的权重与逻辑关系，达到突出重要、弱化次要地目的。

西瓜、thindpad、iphone、百事可乐、著名作家、二战。当你 看到这些名词时，脑海里不由的浮现出它们的特征。比如你看到“著名作家”时，可能想到了鲁迅，而英国人看到“著名作家”时，很可能想到的是莎士比亚；再比 如看到“二战”这个名词，你可能想到了“ ”，而犹太人想到的可能是“希特勒”。这与用户的知识背景有很大的关系。在进行网站页面设计时，用户知识背 景也必须考虑其中，我曾见过一领导在与同事们讨论页面设计时，在白板上画分类列表，一直是把它画在左侧，并以列表式呈现。这个现象足以说明，他所接触到的 分类列表可能多数呈现在页面左侧，所以他无意识的也认为分类列表应该在左侧，换句话说，放在右侧或其它地方，就不是分类列表了。或许我定义得有些极端，但 这个现象确实能反应出知识背景对用户习惯的影响是不可估量的。

所以，在设计时，网页界面应该设计得要像网页界面，软件界面设计得要像软 件界面，游戏界面设计得要像游戏界面，广告设计的要像广告。千万不要为了得到视觉上的创新，把界面设计成了四不像。或许这种观点显得过于保守，但有利于把 风险降到最低。其实网站最吸引用户的地方是内容的质量，而并不是花哨、绚丽的视觉设计。视觉设计的主要目的在于采用合适的视觉元素表现出内容的权重与逻 辑，属于配角。在小品《我是主角》中，也很明确的突出了配角与主角应该各自扮演好自已的角色，作为配角的视觉设计不能抢了主角(内容)的戏。

篇10：企业网站规划和网页设计问题

调查，在企业网站的网页设计方面所存在的问题也直接影响到网站的专业性，甚至对企业形象造成负面影响，由于网页设计问题非常之多，不可...

调查，在企业网站的网页设计方面所存在的问题也直接影响到网站的专业性，甚至对企业形象造成负面影响。由于网页设计问题非常之多，不可能进行完整的统计，这里仅对部分重要问题进行了调查分析，但并未进行详细的数据统计，这里针对较为普遍存在的问题给出定性说明。

为了详细说明网页设计中所存在的问题，下面分类罗列这些常见的问题：

网站规划：

・整体规划不合理，主辅菜单不清晰;

・网站建设导向不明确，重点不突出;

・栏目过多或者过少;

・各栏目缺乏统一规划，整个网站比较杂乱;

・网站的促销功能没有得到明显体现。

菜单设置：

・菜单采用图片形式，图标标识不明确，无文字说明，需要用户移动鼠标进行猜测;

・菜单层次过多，有效信息层次太深，需要多次点击才能找到有效信息;

・过多采用鼠标响应式菜单，栏目设置不合理，使得用户难以发现需要的信息;

・栏目设置有重叠;

・栏目名称意义不明确，容易造成混淆;

・全flash首页和菜单，无法优化处理，也没有相应的文字说明

・栏目过于简单，重要信息不完整，有效信息少。

网站首页：

・采用大型图片或者FLASH，真正用户关心的信息在首页没有体现，需要多次点击;

・过大的FLASH严重影响首页下载速度;

・首页有效信息量小;

・首页无标题;

・主页布局比较乱，重要信息没有得以重点体现;

・打开网页弹出多个窗口，影响正常浏览;

・追求“创意”效果，很难理解网站要表达的意思。

页面信息：

・重要信息不完整，如联系方式和产品介绍等;

・页面信息小，需要多次翻页;

・与企业形象、产品、促销等方面无关的信息;

・产品详细介绍内容过少;

・内容页面没有标题，或者全部使用公司名为标题;

・部分内容陈旧，缺乏时效性;

・部分栏目无任何内容，

网页字体和美工：

・过分注重美术效果，大量采用图片，影响网页下载速度;

・过分注重美观，有些连基本信息内容都用图片格式，影响基本信息获取;

・文字太小、文字颜色暗淡、采用深色页面背景等，影响正常视觉;

・页面过于花哨，接近于游戏网站。

调查结果表明，在网站规划和网页设计中所存在的主要问题包括5类30个问题，其中最为突出的问题(出现频率最高)是：

(1)网站规划和栏目设置不合理：主要表现在栏目设置有重叠、交叉、或者栏目名称意义不明确，容易造成混淆，使得用户难以发现需要的信息，有些网站则栏目过于繁多和杂乱，网站导航系统又比较混乱;

(2)重要信息不完整：企业介绍、联系方式、产品分类和详细介绍、产品促销等是企业网站最基本的信息，但为数不少的企业网站上这些重要信息不完整，尤其是产品介绍过于简单，有些甚至没有公布任何联系方式;

(3)网页信息量小：包括两种情况：一种页面上的内容过少，或者将本来一个网页可以发布的内容分为多个网页，而且各网页之间没有相互链接，需要主页点击;另一方面是尽管内容总量不少，但有用的信息少，笼统介绍的内容多;

(4)栏目层次过深。一般来说，重要的信息应该出现在最容易被用户发现的位置，应尽可能缩短信息传递的渠道，以使企业信息更加有效地传递给用户，石由于网站栏目层次过深，用户需要多次点击才能获取有效信息，在这个过程中，一些有价值的用户可能已经离开了网站;

(5)网站缺乏促销意识：促销意识指通过网站向访问者展示产品、对销售提供支持，有多种具体表现方式，如主要页面的产品图片、介绍、通过页面广告较好体现出企业形象或者新产品信息、列出销售机构联系方式、销售网店信息等，或者具有积累内部网络营销资源和拓展外部网络营销资源的作用，这方面总体状况比较欠缺。

★网页设计论文

★网页设计学习心得

★网页设计自荐信

★网页设计个人简历

★网页设计求职信

★网页设计合同

★网页设计教学

★网页设计论文

★Browsershots：浏览器兼容性测试网站网页设计

★网页设计实验报告范文

《全局于网站整体的网页设计：脱离纯美术概念看界面设计网页设计（推荐10篇）.doc》

将本文的Word文档下载到电脑，方便收藏和打印

推荐度：

点击下载文档

文档为doc格式