模式化窗口

模式化窗口
usabilitysnow 2008年4月21日 下午 3:19
本次薯片会我们主要讨论模式化窗口的问题。
先让我们看一个例子，了解什么是模式化窗口。
以下是QQ秀商城在非登录时提示登录的一种状态。当我在非登录状态，通过保存形象的方式买一件衣服时，弹出登录对话窗口提示登录。此时，登录对话窗口锁定商城页，锁定IE，只有当对登录窗口进行操作后，才能够进行其他操作。譬如：最小化IE、浏览商城等。我们可以说，登录对话窗口就是一种模式化窗口。

模式化窗口常常给人“坏”的印象，为什么“坏”？是因为它“长”成那个样子？还是因为它通常都说些没用的话，所以用户都不看其中的内容？如果换成一个浮动层DIV，它就变“好”了？就模式化窗口的形式和“好坏”问题，我们进行了讨论。为什么大家会认为它“坏”？西贝：“以前系统弹出对话框，用户看不懂，或者不看，给用户的印象大多是一种警告。因此感觉很坏，对用户来讲，很暴力。”（呵呵，可以引用最近流行的，很陈，很冠希了。）Evan：“当我在填一些注册信息时，需要从另外一页复制一些内容，这个时候弹出alert无法到另一页。”（这种情况我也遇到过~~）Seven：“以前有一些网站，有bug，弹出“无数”确定对话框，必须全部确定才能进行下一步的操作，于是开始点击一个又一个的确定。”（嗯，尤其是那种让我点击连续的确定，但是不断弹出确定的那种垃圾网站，让我几近崩溃的边缘~~）
臭鱼：“屏幕上出现不止一个叉子按钮，却只有一个可以点击，如photoshop。”

臭鱼：“IE7开始了，所有的浏览器都有tabs了。多个网页在一个浏览器中打开，如果在一个页面中出现了模式化窗口，要切换到其他页面都做不到了。”

臭鱼：“有的时候只要提示，不需要操作。”Gmail只提示：

QQ空间上传成功的模式化窗口。

刘亚平：“应与开发制定一个规范，不一定模式化的东西就差，看情况。”（由此引出下面的话题~~）
模式化窗口分几类？

A类：3锁死2，锁死1，不完成3的操作，就不能进行其他操作。B类：3锁死2，但不锁死1。（1通常是IE浏览器）C类：弹出3，可以进行2的操作和1上的其他操作。什么情况下需要A类的，什么情况下需要B类的，什么情况下需要C类的？    刘亚平：“格式化磁盘，二次确认时需要A类。”    西贝：“与下页的操作息息相关，不进行判断，下步操作就不能进行操作时，需要A类。”    臭鱼：“对网页来讲，当前页锁定即可，不用alert锁定整个浏览器。属于B类”    Seven：“对于网页来讲，都可以改成C类的形式，不用那么暴力。”    Seven：“A类，在操作过程中，如安装，有取消按钮必须很明确。在C类形式，如QQ秀中“身上品”，有叉的形式表示关闭，不需要取消。”

小结一下：这次薯片会讨论了模式化窗口的问题。暂且把模式化窗口分为A类、B类和C类，A类比B类和C类要暴力，但是更安全。B类和C类更容易让用户操作。通常A类都用于非常重要的信息时使用。欢迎大家进行补充~
评论 (1)
关于导航的探讨
evanchen 2008年1月17日 上午 11:43
许多网站缺乏针对性和友好的导航设计，难以找到连接到相关网页的路径，也没有提供有助于让访客/用户找到所需信息的帮助，用户体验非常糟糕。本期薯片会我们尝试就网站导航交互做一些探讨。
首先对于WEB交互设计师来说，解决上面遇到的问题，使之简单的方法是设计一套完善的网页导航系统。
优化网站导航设计的目的
一个网站导航设计对提供丰富友好的用户体验有至关重要的地位，简单直观的导航不仅能提高网站易用性，而且在方便用户找到所要的信息后，可有助提高用户转化率。
如果把主页比作网站门面，那么导航就是通道，这些通道走向网站的每个角落，导航的设计是否合理对于一个网站是具有非常大意义的。
1） 决定用户在网站中穿梭浏览的体验，这一点是最基本的。
2） 网站导航设计合理，可以将网站的内容和服务最大面积的展现在用户面前。
3）  合理的导航设计可以增加用户黏性，提高网站的浏览深度，从而提高网站PV值。
4）  促进用户消费，提高网站盈利。引导用户消费，将用户真正需要的产品和服务展示在他面前，甚至用户想不到的服务你也呈现。
5）  提高网站广告价值，增加网站广告收益。
•••••••
网站导航的常见结构
雅虎的网页设计一直是国内众门户模仿的对象，我们首先来看看Yahoo网站现有的几种导航样式：
1） Yahoo首页 （最常用的栏目导航）

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

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

我们还可以在Yahoo！TV 等栏目上发现这样有趣的导航结构，我们暂且认为他是Tab 式结构加上一个下拉菜单的一种导航组合。
TV Home – Shows – American Idol – Overview 组成了一个单维度的导航
TV Home同时提供了下拉菜单方便用户快速的转到其二级栏目下。
（这里我遇到一个困惑，在这里我不知道怎么TV Home上一级的目录是什么，也不知道如何返回。）
Amazon可以说是在网络产品导航上的鼻祖了，让我们再来看看Amazon的导航样式又有什么特色。
4） Amazon首页

看看它和谁最像？

5） 购物列表页面

单一维度 和 多维度的导航结构 （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. 准确的导航文字描述。用户在点击导航链接前对他们所找的东西有一个大概的了解，链接上的文字必须能准确描述链接所到达的网页内容。
好了，本期薯片会的讨论到此为止。欢迎继续关注shupianhui.Com 关注我们，参与我们的讨论和交流中来?
评论 (4)
导航的问题
tesion 2007年9月21日 下午 6:14
如何进行一个产品的交互设计？
第一步：信息构架设计
第二步：界面细节设计
信息构架设计表现在页面上就是导航
导航是个大问题。
导航的关系？
导航应该放在哪儿？ 我们来看一个例子（新浪的新闻首页）：

标识红框的部分分别是网站的主导航和当前新闻中心的导航。这样的设计似乎会让人很难察觉到新闻中心的导航？
第二个例子(http://act.qzone.qq.com/polo)：

标识红框的部分分别是网站的主导航和玩家作品下的导航。这样的设计引发了一个议论，两行导航，彼此应该有关系，是什么样的关系？
同样，第三个例子（http://blog.qq.com）：

两层的导航设计上会有从属关系，但实际上栏目内容并非从属关系。
那么导航的设计，是不是要考虑到他们的从属关系？而不是一味地在视觉上追求好看、突出？而是设计上的一个合理性、逻辑性问题。
导航层级过多怎么办？
我们先看几个已有的处理例子：
(QQ音乐播放器 ，两层导航结构)

(城市达人 ，个人管理中心三层结构）

再看看别人的处理方式，总结一下，有：
方式一：精简上一级
(Yahoo!News)

方式二：保留最高级，放弃后面的
(Yahoo!News)

是否导航的层级过多，路标也可以作为一个解决方式？
回到主题，作为导航，是网站的核心，索引方式。除了要有从属关系，我们是否也考虑到导航的层级过于多的情况，换一种方式解决？限制一个页面上最多只出现两级导航？第三级导航我们是否换一种方式去索引用户，而不是一味让用户觉得这个网站的结构很深很复杂，用起来也会十分累。我们这里有一个比较类似的例子，QQ秀2.0 。话题下一次待续。