网页设计-组织系统

还是原来的思路先列出文章的大概思路：

1. 信息组织面临的挑战？

2. 信息组织的方案？

3. 信息组织的结构？

4. 社会化分类？

5. 内容设计中的一些问题的处理与注意点？

1.信息组织面临的挑战

模糊性：

                分类系统的基础是语言，而语言本身具有模糊性。想一下“pitch”这个词，这个词有15种以上的含义：

                投、扔或抛

                防水用的沥青

                船只上下颠簸

                推销术

                由振动频率决定的声音元素

这样的模糊性使得分类系统的基础不稳固，我们就必须承担用户可能误会我们意思的风险。另外，对标签的分类就更麻烦了。以常见的“番茄”这个词为例，番茄是一种红色或黄色的水果，果肉多汁，可作为蔬菜使用。植物学上属浆果类。番茄到底是水果、蔬菜，还是浆果？

异质性：

                异质性指的是某种东西或者一群东西是由不相关或不相同的部分所组成的。大部分的网站在很多方面都是高度异质性的。例如，网站通常可以存取文件，但网站内信息的粒度各有不同。网站也许同时展示文章和期刊或者期刊数据库。链接可能会指向网页、网页中的章节，或者其它网站。而且网站通常会提供各种不同格式的文件，也许可以找到财务新闻、产品说明、图像、视频、音频和交互式程序等等。网站是个很大的多媒体熔炉，在此你必须接受来自协调各种媒体间分类粗细的挑战。

不同观点的差异性：

                如果从公司网站的角度来看，网站的组织是根据内部的的部门或组织图来确定的，例如包括营销、销售、客户支持、人力资源等部门。而对于公司网站的用户而言，怎么知道要上哪儿去找产品的技术信息？要设计出可用的组织系统，必须摆脱我们自己心中组织信息的心智模式。要想摆脱不同观点的差异性，要把用户的研究和分析方法结合进来。用户如何搜集信息？他们使用哪些标签？他们的浏览方式如何？由于认识到观点差异的重要性，所以可以通过对用户进行研究和测试，全面了解目标用户，提供多种浏览路径（pathways），这样就可以为用户提供更好的信息组织方式。

公司内部政治文化：

                由于信息组织对形成认识和见解的内在动力，因此设计信息架构的流程可能会涉及政治立场的对决。

2.信息组织的方案

精确的组织方案----前提是必须知道要找什么，而且在哪里找也很明显，不会涉及任何模糊性。优点是容易设计和维护。

                字母顺序方案---按字母顺序是百科全书和辞典中最主要的组织体系。几乎所有非小说类书籍都会提供按字母顺序排列的索引。电话簿、百货商店目录、书店、图书馆都是按字母顺序组织内容的例子。         

                按日期----某些类型的信息适合采用日期的组织方式。例如，归档的日志。历史书、杂志、日记以及电视节目表等都可以男日期的方式组织。   

                按地理位置---地点通常是信息的重要特性。我们在不同地方旅行，我们关心所在地的新闻和气候，政治、社会和经济议题通常也和地区有关。此外，由于像Google和Yahoo这些公司的投资，地图作为界面，也越来越受到人们的欢迎。

模糊性组织体系----模糊性组织体系受困于语言和组织的模糊之中，更别提还会涉及到人的主观性。这种组织体系很难设计和维护，也很不好用。然而，模糊性组织体系通常比精确性组织体系更重要、更有用。人们觉得模糊性组织体系好用的理由是：我们不见得知道我们要找什么。即信息需求相当模糊，也无法说清楚。因此，一开始搜索时所找到的东西可能会影响后续的搜索方向。这种信息搜索过程会牵扯到一种联想式学习。不断搜寻，最后应该会找到东西。而且，在模糊性组织体系下进行信息搜寻，会得到意想不到的结果。这是因为模糊性组织体系采用有意义的方式把条目聚集在一起。把相关的条目组织在一起就会引发联想式学习的过程，使得用户可以做新的联想，得到更满意的结论。

                按主题----以主旨或主题组织信息，是最有用且最具挑战性的做法之一。大部分的网站都提供某种按主题获取内容的途径。设计主题式组织体系时，要定义的是内容的范围，也就是用户来到网站时希望在这个网站找到的东西。

                按任务----任务导向的组织体系会把内容和应用程序组织成流程、功能或工作的集合。如果有可能预测用户想有限执行的一组任务时，这类的体系就很恰当。例如桌面软件中以任务为导向的菜单，诸如“文件”、“编辑”和“插入”菜单。对网站而言，任务导向的组织体系对电子商务网站而言是最常见的，因为它以与用户的交互为中心。如果企业网站试着想把应用服务和内容整合起来，也适用任务导向体系。

                按用户----如果网站可以界定出两组以上的典型用户，那么采用以用户为主体的体系就有它的意义。如果网站有不断重复访问的用户，他们会将网站的某个部分加入收藏夹，这种类型在以用户为主的体系下能运作得最好。如果为每位用户都指定专属的内容，这种方式也可以运作。以用户为主的体系可以是开放式或是封闭式。开放与封闭主要是指是否允许一组用户访问另一组用户的内容。

                按隐喻----隐喻可以帮助用户以熟悉的东西了解新的东西。例如图标的设计就是隐喻，垃圾桶就会让人们想要删除！具体化的东西，通过抽象的手法表现出来。例如电脑中的文件、文件夹、回收站等。使用隐喻设计界面时，用户能直观地了解内容和功能。此外，探索隐喻设计时，也会对网站的设计、组织和功能产生新奇和令人惊叹的想法。当设计隐喻为主的网站时，首先要尽量选择用户熟悉的隐喻，另外隐喻也可能引起不想要的包袱和收到限制。

                混用型

3.信息组织的结构

                组织结构在网站设计中扮演无形但重要的角色。电影的具体结构是线性的，当情节采用倒叙和平行的结构时，就是非线性的。地图有空间结构。适用于网站的组织结构包括等级式、数据库模式和超文本。每一种组织结构都有其优缺点。

                等级式：自上而下的做法

                等级式系统中包括了分支以及上下从属关系。很长时间我们都把信息组织成等级式，族谱是等级式，地球上生命区分成界、纲和种，把书分成章、节、段、句、词等，等级式系统在我们的生活中无处不在。 在等级式中要注意宽度和深度之间的平衡。宽度指的是等级式系统中每一层的选项数目。深度指的是等级式系统中的层数。如果层级太窄太深，用户就得选择过多的层数，才能找到他们要找的。对又宽又浅的等级系统而言，用户必须在众多的选项中进行选择，而且当他们选了一个选项后，却没看到什么内容时，就会产生不良的观感。

                数据库模式：自下而上的做法

                为什么数据库结构对信息架构师而重要？因为元数据。元数据是连接信息架构和数据库结构的关键。元数据可以让我们把关系型数据库的结构运用到异质性的、非结构化的网站环境中。使用受控词表的元数据为文件和其他信息打上标签，就可以进行搜索、浏览、过滤以及动态链接。

                超文本

                超文本是设计信息结构中相对比较新的方法，而且是高度非线性的。连接文字、数据、图像、视频及音频数据。超文本可以按等级或非等级方式连接起来。虽然这种组织结构有很大的灵活性，但它会引擎潜在的复杂度和用户的迷惑。因为当用户在高度超文本化的网站上浏览时，很容易就会迷路。用户无法在这种网站上建立一种心智模型。

               4.社会化分类

        用户参与型系统已获得网站设计群体的关注----它是共享信息环境中组织信息的重要工具。诸如Flickr和del.icio.us的巨大成功，展示了邀请用户参与内容分类的潜力，使得标签法（Tagging）迅速流行开来。这里标签是公开的，作为群体导航的枢纽。用户可以在对象、作者、标签及索引者之间移动。于是，把用户行为和标签系统转换成新的组织和导航系统。而且，Flickr开发了聚类算法，以重叠的标签集为照片分组。其实最常见的就是按热度排行的标签，知乎，微博的热度排行就是用户驱动的，让用户参与产品设计也是一条设计产品的新思路。

        当然，不能说大众分类强过传统的组织方法。因为任何搜索Flickr的人都会立刻发现可寻性问题，而且到目前为止，标签法只在非常有限的环境中发展，这就是我们一直以Flickrdel.icio.us为例的原因。我们还得看它是否能在更大领域的网站中获得成功。

5.内容设计中的一些问题的处理与注意点

    用户的浏览习惯：在梳理网页的信息层级时，要考虑用户的浏览习惯。用户的浏览习惯一般分为“Z”字形---适用于非富文本型网站页面和“F"型--比较适合富文本型网站页面；用户浏览网页的方式是”扫视“。网站页面的视觉层级可以使用模糊测试的方法。

    标签的设置要尽量避免生僻词汇与专业术语，这会增加用户的认知负载。

    页面滚动设计：用户天生就会滚动；滚动的时候主导航是固定的还是会消失，如果消失，就牵扯两个问题，什么时候消失？消失后什么时候会再次出现？

    所有二级、三级页面都要设置后退按钮，最重要的是返回之前页面最好是进入二级页面之前固定的地方，别跑到最上面去了，这会加剧用户的急躁情绪，增加网站跳出率。----这一点我是深有感触，并且深恶痛绝！

    在网站内容加载时，要考虑如果网络不好时，页面内容的加载方式，如果是图片为主，例如花瓣可以采用占位符形式，如果是图文混合的内容为主，则可以考虑提前显示整个网页的架构；要有提示网页正在加载。另外需要注意不要加载时间过长，人的忍耐上限是10秒。许多网站使用进度条显示数据加载进度。进度条背后的动机很好（提供视觉反馈），但有时适得其反。正如 Luke Wroblewski 提到的，“进度条从定义上就提示用户一个事实：给我等着。就好像看着钟表滴答倒数 —— 当你等待时会感到时间过得更慢。进度条有一个很棒的替代元素：页面框架。这些容器在本质上可看作是网站空白页面的临时版本，信息可以逐渐加载进容器。使用页面框架替代进度条，设计师能聚焦用户的注意力于实际的页面加载，为之后将要加载的页面搭建用户的心理预期。而且这种方式给用户创造了一种事件发生的很快的幻觉。因为信息是逐步加载显示的，用户在等待过程中能切身感到，网站正在一步步处理页面并显示。

加载页面框架为用户提供良好的心理预期

        动效的应用：如今动效设计的应用已经随处可见，但是动效也被大家所诟病，因为大部分动效都是不能落地的，所以这就提醒我们，设计动效时一定要考虑技术与硬件的限制。动效在网页设计的应用通常最多见于以下几个方面：

1.对用户行为的反馈----例如鼠标的悬浮状态时按钮的状态变化，点赞时的动效效果等等。

2.对系统状态可见性的反馈，例如页面加载的动效，下载的进度动效等；

3.导航式动画，网页上各个状态的切换方式----弹窗的出现，页面间得转场跳转等等。

动效设计可以提升用户体验，增加画面趣味性，缓解用户的焦躁的等待情绪，但是不要过度使用，从而成为鸡肋。我觉得动效设计最重要的就是节奏感的掌握。

         网页首页（landingpage）的焦点图（Hero section）一般是图片，视频或者插画。如果是图片，需要注意图片的清晰度，图片与网页主题的相关性，在商业类网站或者一些比较正式的机构，权威的机构焦点图经常会是人像，切记不要用那些别人经常用的笑脸；如果是视频，需要注意的是视频的时间长度不能过长，还有就是视频打开时的声音最好是静音的，这些小点要考虑到，视频的好处时可以延长用户在页面上的停留时间，缺点是受网络带宽和硬件的限制，并且实现成本比较高；插画的设计，最近非常普遍，尤其是场景化插画，不光在网页设计中，在移动端设计中也大量应用，例如APP的启动页，引导页等等，目的就是为产品注入情感化，当然，情感化设计也是一大趋势，毕竟，用户不希望面对一款冰冷机械的产品。插图在网页设计中一般用在焦点图和功能简介以及404页面等地方。

          按钮的设计，在之前的后台界面设计已经大概说过，这里补充说一个SasS网页CTA（call to action）按钮，这种按钮的设计一般要具有使能性（看起来像个按钮，可以按，符合用户的心智模型-即用户潜意识觉得它是个按钮），比一般按钮大，醒目，最常见于焦点图和导航位置。

          一键到顶功能的设计--主要是针对比较长的页面，移动端也有，通常是FAB按钮，这个功能太人性化了。淘宝设计上面移动端的标签栏导航第一个按钮，点一下会直接到推荐到系统认为你喜欢的

本文还有很多遗漏的，后面慢慢查漏补缺。平时多细心观察生活，用心感受，肯定会有所收获。在产品越来越同质化的今天，微小之处见高低，一个细小的交互体验就可能让一款产品脱颖而出。