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

“天凉王破”通过精心收集，向本站投稿了10篇关于网站导航设计的探讨网页设计，以下是小编收集整理后的关于网站导航设计的探讨网页设计，希望对大家有所帮助。

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

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

首先对于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

篇2：网站导航设计浅析交互设计

一说到导航每个人都不陌生，如amazon的Tab式导航、网站地图、软件中的菜单导航、索引表等等，导航设计看上去非常的简单：无非是页面上放置一些链接，通过这些链接用户可浏览和使用整个网站。事实并非如此，导航设计是非常复杂和严谨的。 下面我们以网站导航为例粗浅的分析一下导航设计的复杂性：

任务：设计一个网站导航

目标：1、提供给用户方便的网页间跳转的方法

2、能够表达出页面之间、页面与内容之间的关系

分析：人本能的具有空间感。想象一下你现在坐在家中的沙发上看电视，突然有访客，你起身会向哪个方向走去？高中时的挚友是坐在你的前面还是后面？——不用问大家都能会快的回答出来。

同样我们在设计网站导航的时候一定要清晰地告诉访问者“他们在那哪儿”和“他们能去哪儿”

用户需要知道他们在网站信息空间当前所处的位置，我们也希望能帮助用户建立网站空间感，通过我们设计的导航系统。(之所以称为导航系统，是因为仅仅靠某一种导航模式是无法完成目标的)

设计方案：提供一个完整的导航系统，其中包括全局导航、局部导航、辅助导航、上下文导航、远程导航

全局导航：

从网站的最终页面到达其他页面的一组关键点，无论你想去哪里，都可以在全局导航中最终到达，

局部导航：

提供一个页面的父、兄、子级别的通路，是用户在网站信息空间中到附近地点的通路。局部导航的设计好坏会直接影响到整个导航系统的质量。

辅助导航：

提供了全局导航和局部导航不能快速到达的相关内容的快捷途径。用户转移浏览方向，而不需要从头开始。

上下文导航：

用户在阅读文本的时候，恰恰是他们需要上下文辅助信息的时候。准确的理解用户的需求，在他们阅读的时候提供一些链接(例如：文字链接)，要比用户使用搜索和全局导航更高效。上下文导航的示意图与辅助导航类似，这里就不再画了。

友好导航：

一些用户通常不会使用的链接，确实需要时又能快速有效的帮助用户。例如：联系信息、反馈表单和法律声明等。

远程导航：

独立方式存在的导航。如，网站地图：简明的、单页网站整体结构展示。在用户被你的其他导航搞得晕头转向时，很多时候他会选择网站地图。

通过上面这些导航的设计，可以看出一个完整的导航系统设计是非常复杂的和严谨的。

本文来自：导航设计浅析

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

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

人才类型：	普通求职
应聘职位：	计算机类：网站/网页设计、网页设计师/美工：网站/网页设计、其它类：网站/网页设计
工作年限：	4	职称：	无职称
求职类型：	均可	可到职日期：	随时
月薪要求：	--3500	希望工作地区：	广州
个人工作经历：	公司名称： 广州在线图文起止年月：-06 ～ -11 公司性质： 民营企业所属行业：计算机业 担任职务： 网站设计  工作描述： 负责客户网站设计  离职原因： 公司业务调整    公司名称： 广州流之动资讯技术有限公司起止年月：-06 ～ 2007-05 公司性质： 民营企业所属行业：广告，策划，营销 担任职务： 网站设计  工作描述： 客户网站  离职原因： 人事调整    公司名称： 陶氏品牌策划机构起止年月：-07 ～ 2006-04 公司性质： 民营企业所属行业：广告，策划，营销 担任职务： 网站设计  工作描述： 负责公司及客户网站设计  离职原因： 人事调整

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

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

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

改版干吗？

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

用户习惯发生明显变化

用户体验需要大幅优化

组织结构调整

大老板说要改

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

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

应该潜移默化做改变

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

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

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

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

电脑资料

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

别让客户跟着你拥抱变化

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

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

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

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

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

要真心做测试

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

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

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

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

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

篇5：移动网站的导航设计

导航是互联网网站最重要的组成部分之一，它涉及到产品的信息架构、页面布局和用户交互行为等诸多方面，一个网站用户体验的优劣往往和导航的优劣有密切的联系。

随着移动互联网的发展，越来越多的网站以移动网站的形式移植到手机上。在网站移植过程中，导航的重新设计有什么变化和设计要点呢，本文尝试做出一些研究。

导航的目的

在研究导航之前，我们不妨从导航的使用目的谈起。如果把网站比成一座大厦，那导航可认作是大厦内的指引系统。导航的使用目的归纳起来主要有以下几个方面：

1. 引导用户在网站页面间移动和浏览，提供获取信息的路径。全局导航、局部导航等都是为了用户浏览相关的页面提供引导，方便用户找到所求。

2. 理清网站各部分内容之间的关系，使用户了解网站全景。最常见于全局导航和站点信息导航，它们展现了整个网站的目录信息，用户可快速理解网站结构，对网站有整体的把握。

3. 定位用户在网站中所处的位置。这个功能常见于面包屑和相关导航中，它帮助用户识别当前浏览的页面与网站整体内容间关系，使用户了解当前页面和网站其它内容的联系和区别。

导航变化的原因

从PC端到移动端导航变化的原因归根结底是由物(设备的软、硬件差异)、景(使用情景和操作方式)、事(用户需求和使用目的)差异。这些因素相互交织，对移动终端的导航设计有显著的影响。

本文尝试从类型、内容、样式等方面结合实例来说明PC端到移动端网站导航设计的变化：

一、常用导航类型变化

网页导航的划分有不同的维度。网页导航按照作用范围的不同可以分为三大类：结构性导航、关联性导航和公用程序导航。根据《web 导航设计》，三者的关系可描述如下：

根据外在形式的不同，网页导航通常又可以分为顶部横向导航、侧边栏导航、Tab标签导航、面包屑导航、页内锚点导航等多种形式。

由于移动终端特性，移动网站可以采用的导航种类较PC端要少很多，主要有纵向导航、分类链接导航、Tab标签导航、相关导航等。

下面就常用的移动网页的导航形式进行一些介绍：

纵向导航

由于移动设备更适合纵向的浏览方式，PC站点的顶部横向导航和侧边栏导航在移动端通常转变为纵向导航。例如下图dell 和hp的移动版网站设计中，均采用这种转换方式，较好地完成了导航的迁移。

分类链接导航

常见的是在首页设置分类链接导航，将网站的主要模块入口放置在主页顶部。如果分类太多可以加入“更多”入口，在更多页面将所有分类全部展现。 图标导航是文字链接导航的衍生，它更适合在触屏手机上，方便用户用手指进行操作。

Tab标签导航

支持HTML5特性的高端机型通常可以实现页面的局部刷新。通过Tab的应用，导航可以在有限的页面空间显示更多的内容。例如 Myspace顶部的导航设计：三个主导航下面各有3-4个二级导航，展现了网站的主要功能。

相关导航

相关导航一般出现在正文页，推荐与当前页面相关内容，向用户提供类似内容，提升用户粘性。例如百度知道和BBC新闻均在阅读正文页提供了与当前内容相关的推荐。

页内锚点导航

页内锚点导航是移动终端特有的导航方式之一，它可以使用户快速到达页面顶部、底部和相关板块，

例如BBC在底部有返回顶部的快速链接TOP，而谷歌新闻则提供了不同板块之间快速跳转的锚点导航。

面包屑导航处理策略

面包屑作为一种有效的导航处理策略在移动端使用频率也比较多，但由于移动端屏幕横向宽度有限，通常的处理策略是：保留关键的路径，例如首页、主栏目、关键版块等;如果当前页面标题过长，可以在面包屑上以“本文”或者“正文”表示。尽量控制面包屑在一行之内显示。

二、导航内容的组织、缩减和隐藏

组织与缩减

导航再设计过程中，必然有导航信息的缩减和重新组织。筛选的标准往往有：

1)用户需求的强度，可以用pv，uv等数据进行判断。

2)与移动使用场景的契合度。例如拍照、语音等功能的入口。

3)用户操作便利程度。

其中第三点往往容易被忽视，亚马逊的移动版在PC版的基础上对导航的内容进行了合并和删减，控制了信息量，使之更适合用户在在移动终端浏览。例如将电器&电脑这一条目在移动端拆分为两个条目(电器、电脑办公)，并使子项目的数目由17条缩减到7条。一定程度上也符合了移动端神奇数字7的原则。

导航内容的隐藏

在导航内容重要性不分伯仲的情况下，常见的处理方式是将相对重要的内容展现出来，而将其它内容放入“更多”，用户可以点击“更多”在当前页面展开或跳转至更多页面。

三、导航样式的变化

利用系统特性变形

常用的变形方式有：

1) 调用系统控件

通过结合移动终端的控件特性，可以在较小的尺寸范围内完成导航的再设计。如上图cnet移动网站中，导航内搜索框用搜索按钮代替，二级项目改用下拉选择器，充分利用了移动端控件特性。

2)利用系统交互特性

Sevnthsin的首页导航设计巧妙地应用了触屏手机可拖动元素的特性。用户拖拽相应的图标到中心圆点位置即可完成导航，进入该网站。

动态效果的变化

Web动态导航菜单也叫浮出菜单(fly-out menu)或弹出菜单(pop-up menu)，通常是鼠标悬停或者点击导航选项时出现。在PC上动态菜单一般为横向或者纵向展开。

在移动端：

1) 低端机，不支持折叠展开效果，原网页动态菜单通常处理为列表形式。通过按键控制光标逐步移动选择每个子项目。

2) 高端机，处理成手风琴折叠(Accordion)或者层级目录形式，通过点击展开二级项目。

手风琴折叠的优点：不用跳转页面;缺点：次级展示内容有限;

层级目录形式的优点：可以展示较多内容;缺点：需要进入下一级页面。

下图中亚马逊的导航采用了当前折叠展开的方式而ESPN的则采用了层级导航方式。

四 、总结

在PC端向移动端转移过程中，页面产品的导航设计要对原导航进行删减、隐藏、组织，特别要把握用户本质需求，结合产品使用场景、用户需求、软硬件特性等进行导航的再设计。

参考文献：《Web导航设计》 James Kalbach / 李曦琳 / 电子工业出版社

篇6：xhtml+css制作不规则导航网页设计

前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下，结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。

先看图（图片只是大致做了一下）

效果展示：

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

xhtml结构部分内容：

菜单

菜单

菜单

css部分内容：

* {margin:0;padding:0;font:normal 12px/25px “宋体”;}

body {background:#f8f8f8;}

ul {list-style.:none;width:300px;height:25px;margin:20px auto;}

li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}

a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(www.linxz.cn/blog2/attachments/month_0804/d43194011.gif) center center no-repeat;}

a:hover {color:#000;background:url(www.linxz.cn/blog2/attachments/month_0804/s200843194022.gif) 0 0 no-repeat;width:86px;position:relative;}

思路：

主要是利用当:hover触发的时候让a定位，出了li的浮动范围，出现梯形的图片，

从而实现了不规则导航的菜单。

过程：

1、在浏览器中，根据li的结构表现，后面的li会覆盖住前面的li，如果宽度足够的话，是靠边在一起，那么只要利用负边距就可以实现初始状态下相互叠加的样式。margin:0 -5px;

2、初始状态下的叠加实现了，要解决的就是:hover触发的时候，让菜单这个放弃浮动使用定位。在这个过程中如果是要利用绝对定位话，会让有一个z-index的问题出现。

这个问题只体现在IE中，FF下是无问题的，可以正常显示。IE中表现出来的是最后一个li永远都会盖住前面的li，那么当鼠标经过的时候就无法完美显示了。

个人认为比较重要的几个属性：

li中的负边距，实现叠加效果

hover中的position:relative

a是内联元素，要触发haslayout，可以使用float:left来触发

注：

以上内容或许讲得不是非常明白，不过大家可以仔细分析一下源码，然后交流一下。如果觉得好也请不要回帖说顶，收藏，谢谢之类的话，你们的点击就是对我的支持了。

来自：bbs.blueidea.com/thread-2843421-1-1.html

篇7：谈一谈频道式导航网页设计

现在越来越多B2C网站开始采用频道式导航了. 典型的莫过于淘宝商城与当当网. 个人认为频道导航最明显的作用在于改变栏目导航死板的文字形式, 增加了站点产品秀的机会, 并增供更多广告位与多种推荐模式, 将原先单纯的栏目导航变成具有推荐功能的“多功能导航”.

然而, 个人认为上述两个网站在引入频道导航时, 都没有采取一个很好的解决方案. 因为他们都同时保留了在第一屏中的左边栏目导航(淘宝商城的下级页面中). 当栏目导航与频道导航并存时, 就需要解决一个问题, 即: 如果右边内容区的高度没有左边栏目导航高, 那么内容下面的频道导航宽度就会被迫被挤成和内容区一样大小, 不利于剩下的频道导航排列.下面是几个常见的解决方案:

当当的解决方案, 控制栏目导航与内容区高度相同:

淘宝商城的解决方案, 将频道导航直接排在内容区下面, 不让频道导航贯穿整个页面. 左边导航下面的空白由广告图片填充:

另一种解决方案, “自适应”的频道导航:

其是以上三种方案我都不是很喜欢, 个人认为即然要使用频道导航, 就不应该再要左边栏目导航. 频道导航的最大作用在可以更好的秀出网站不同商品, 因此应该通过控制频道导航Banner的精细度与频道导航本身的高度, 数量去做好频道导航显示区(通常位于第二屏), 而栏目导航就交给顶部去做. 换言之, 如果要使用频道导航, 那么就要保证站点拥有一个足够强大的顶部导航系统，

谈一谈频道式导航网页设计

，

笨呢我出自：ucdchina.com/post/1414

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

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

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

是否需要登录后评论

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

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

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

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

是否需要分项评论

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

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

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

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

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

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

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

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

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

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

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

通过作品表现团队实力。

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

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

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

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

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

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

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

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

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

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