一本Web网站骨架细节构建入门书

                     ——《见微知著-Web用户体验解构》读书笔记

由于最近在接手PC官网改版的项目，所以近期会将之前所读的几本Web网站设计相关书籍再翻读一遍，并作详细的读书的笔记，总结书中的知识点并灵活运用。

这本《见微知著》是由李清所著，通过归纳知名网站的用户体验设计要点，系统性地总结了一个网站结构层、框架层和表现层的内容和设计要点。以下是按照书中章节的顺序记录的笔记内容：

1.Web网站整体布局

Web站的整体布局设计按照分栏方式可以划分为三种，分别是：

布局方式	优点/缺点/运用
一栏式	优点：信息展示集中、重点突出 缺点：信息展现量相对有限 适用：大图实现强烈视觉冲击，印象深刻，提升品牌效应，例：首页、注册/登录页、成功等状态页
两栏式	优点：相对一栏式可容纳更多内容，相对三栏式信息不拥挤和零乱。 类型：两栏式有三种类型，分别为 1、左窄右宽：适用内容丰富，导航分类清晰的网站 2、左宽右窄：突出内容，再引导关注其他信息 3、左右均等：内容没有主次，容易分散注意力
三栏式	优点：重复运用网站空间，尽可能显示多信息 缺点：页面信息拥挤，提高查找信息成本和降低对内容的可控性 适用：常见于信息量非常丰富的网站，例：门户类网站 类型：三栏式有两种类型，分别为 1、中间宽，两边窄：中间显示重点信息，两边显示次要信息或广告。特点：重点突出，但页面整体利用率低。 2、两栏宽，一栏窄：宽两栏显示重点信息，窄栏显示辅助信息。特点：提高页面利用率，但重点不突出和集中。

设计要点：

1、按信息量和页面类型选择合适的分栏方式
2、根据信息的主次选择合适的比例，引导视线流
3、通过明显的视觉区分，增加阅读的流畅性和舒适性
4、按照用户浏览常用的”F“视线流摆放内容
5、同一类型或同一层级页面尽量选择使用相同的布局方式

心得：由于扁平风和卡片风格的流行，现阶段的网站不再严格按照整体运用的一种分栏方式来设计。所以在实际运用的过程中，要按照实际情况来设计网站。虽然网站整体不再严格按照某一种分栏形式来设计，但是仍然要避免同一页面采取分栏方式过多，到时页面碎片化严重的问题。

2.Web网站主要功能区

Web网站在功能区的设计上会有一些通用区域，分别是：头部、尾部、导航区、搜索区、登录注册区、信息展示区和广告区。下面就每个区域进行设计要点的归纳总结。

功能区	归纳总结
头部区	定义：指固定位于网站最顶端，用于放置快捷入口的一小长条区域（含主导航区）。 实用型头部：设计简洁、不花哨，能够在合理有限的空间内起到必要的作用，一般其只包含Logo、导航条和快速入口等重要元素。 设计型头部：个性化的网站，往往会利用头部的设计体现出网站的特色，常见于博客、小型特色网站以及部分企业网站首页。 头部的元素：一般有Logo（分logo+文字/logo+logo/节日logo）、slogan、导航条。
尾部区	定义：指位于固定位于网站最底端，用于放置联系方式和版权信息等补充信息的区域。 设计细节： 1、页尾信息不要过多过杂。 2、不同页面的页尾要统一。 3、版权说明格式按照国际标准。 4、页尾可以放辅助导航或简单版的网站地图。
导航区	1、主导航的类型可以分为， Tab导航：横向导航，被运用得最多。设计时要注意突出当前被选中的tab，一级标签和二级类目使用相同颜色来体现相关性。 树状导航：扩展性好，容纳的内容多，比较常用于电商类网站。设计时要注意导航类目按照一定规律排序。如果重视导航则放网站左边，重视内容则放网站右边。 鱼眼导航：暂未在知名网站见过，只有Mac系统上见过。不常用。 2、一个页面除了最重要的主导航外，还有各种类型的辅助导航，包括 面包屑导航：运用在层级较深的网站和独立不交叉的网站。 推荐时导航：即个性化推荐。 引导式导航：即注册等直线流程时，起到分段式引导用户完成流程的作用。 3、页面的定位元素除了主辅导航外，还应当有网站地图、logo和快速入口。 网站地图：一是方便用户对网站整体结构的了解和跳转，就像目录对书所起的作用一直。二是方便搜索引擎蜘蛛爬取网站内容。设计要点：分组归类要清晰、层级不宜过多也不宜过少、采用文本链的方式。 Logo：起着指明灯的作用，用户始终可以通过它回到首页。但是独立模块的logo如果只是跳转回独立模块首页，logo上应和主页的logo设计有所区分。 快捷入口：快捷入口通常包括登录、注册、帮助、联系方式等常用信息或独立模块，用户能够快速单击链接进入目标页面。
搜索区	用户使用站内搜索的场景： 1、目的明确 2、导航失败，用户迷失 搜索类型有全局搜索和局部搜索。 设计要点有： 1、输入框不能过短 2、支持拼音输入 3、搜索按钮用动词命名 3、按需决定是否自动光标定位在搜索框 4、颜色应当和背景色有对比
登录注册区	包括了登录或者注册页面，设计细节有： 1、煽动用户注册，告诉用户注册的好处 2、手机号/邮箱作为登录网站的唯一身份 3、不要忘记“记住登录状态”和“忘记密码”等细节 4、不必要的情况下尽量不要使用验证码 注册表单的优化点： 1、友好的提示信息 2、设计醒目的登录、注册按钮 3、表单对齐方式有垂直对齐，左对齐和右对齐。可按实际需要选择。
信息展示区	信息展示设计可以分首页、列表页和其他页三种类型页面来讨论。 首页 需权衡首页承载的各类目的（品牌展示，业务承载等等）。 首页的类型有入口型（起分流作用）和内容型（呈现重点内容）。 设计细节： 1、无关紧要的内容采取缩小字体等方式弱化 2、内容的排布需要按照一定的逻辑 3、相关性强的内容需摆放在一起 4、页面长度：入口型：1~2屏，内容型网站视情况而定，页面长度不是影响浏览和体验的因素。 列表页 原则1：空间有限则选择文字链 原则2：空间允许可选择标题、内容简介、辅助信息和图文结合等 设计细节： 1、突出重点信息 2、利用线条、留白划分区域，减少干扰 3、提供产品缩略图，图文结合 4、完善提示信息 5、优化翻页设计 具体页（以电商网站为例） 设计细节： 1、突出购买按钮 2、提升购物体验 3、优化色彩、布局和信息组织 4、增加其他用户的信息，包括产品评价、购买记录，卖家信誉指数来提高信任度 5、购买后推荐用户喜好和相关商品增加粘性 用户获取信息的流程：海选->对比->决策。
广告区	广告的类型有：静态图片、动态图片、交互式、弹出式、浮动式、收缩式、文字链。设计要点： 1、选择合适的广告形式 2、根据用户浏览习惯精准推送 3、广告不应阻断或削弱相关内容间的联系 4、避免过多广告同时出现 5、规范统一尺寸

心得：书中总结了最常见的一些网站功能区，但是对于不同类型的网站可能还会有一些特有的功能区，或者是缺少了一些功能区。所以在设计自己的网站时也是要按照实际情况出发的。

3.页面元素

讲完页面的功能区，接下来就详细讲页面上通用的元素了，分别有：表单、标签、翻页、链接、按钮、反馈、验证码。

页面元素	归纳总结
表单	表单算是Web网站最重要的元素了。书中主要讨论了表单三种布局的优劣： 垂直对齐：优点是减少眼睛移动和填写表单的时间，缺点是增加垂直空间，增加页面滚动。 左对齐：优点是便于浏览标签，减少垂直控空间，缺点是视线需要左右来回移动，增加填写表单的时间。 右对齐：优点是较少标签和输入框的距离，减少垂直空间，缺点是标签参差不齐，容易造成阅读障碍。 设计要点： 1、对表单的选项进行逻辑分类 2、较多选项时进行分段式的引导填写 3、所有选项都为必填时没必要区分非必填 4、可以提供默认选项就提供 5、文字要表意清晰 6、对难理解的选项增加提示说明 7、对操作需要做出明确的反馈 8、不同选项灵活使用填写、下拉等方式 9、按钮使用动词 10、视觉设计要美观
标签	定义：指的是横向tab 适用条件： 1、有多个tab内容，但空间有限 2、不同tab的内容相对独立 3、切换内容时不需要链接到其他网页 4、有2~10个类别 5、类别标题简单可预见 6、突出当前正在查看内容的窗口 设计要点： 1、标签和内容选中区使用相同颜色 2、标签自动跳转时设置延迟时间避免误操作 3、点击标签交互要一致
翻页	“第一页”处理方式分三种： 1、始终保留第一页页码 2、设置成按钮，以“首页”或“<<”展现 3、不保留第一页的页码 “最后一页”处理方式分三种： 1、始终保留最后一页页码 2、设置成按钮，以“末页”或“>>”展现 3、如果没有必要，不保留最后一页页码 “上一页”设计细节： 1、文字+符号“<”方式即可便于定位，也能吸引点击 2、当处于第一页时，应删除上一页或置灰 页码一次性显示数量为10页左右，按实际情况处理 设计细节： 1、可通过增加背景色，扩大翻页区域来鼓励用户浏览更多内容 2、扩大可点击区域容易定位 3、页码之间要保持一定的间距 4、通过当前颜色、大小和背景色的对比突出当前页码 5、提供快速跳转到某页
链接	设计细节： 1、点击过后需要有颜色变化 2、当链接处于同一级别的内容或线型流程任务适合再当前页打开
按钮	设计细节： 1、采用醒目和高饱和度的颜色吸引点击 2、文字颜色和按钮背景色对比强烈以提高文字的可读性 3、按钮文字简洁清晰以动词为主 4、次要按钮太过削弱反而需要更多时间去注意 5、可以使用图标+文字增加用户认知 6、圆角优于方角 7、浮出感效果更佳 8、饱和度高的背景色更佳 9、正规的字体更少干扰
反馈	反馈的种类主要有成功提示和失败提示。 设计细节： 1、内容丰富的404页，可以起到导航分流的作用 2、安全性操作二次确认 3、超过1秒延迟应提供进度条，超过10秒应提供剩余时间等信息
验证码	设计细节： 1、减少输入法切换 2、及时反馈 3、采取有趣的验证码方式

心得：书中总结各类常用元素的设计细节，大部分还是颇具参考价值的，但是有小部分由于主流风格的进化，所以可能不再适用，需要我们在设计的过程中按需参考。

4.视觉设计

视觉设计主要分为三部分内容：配色、文字和图片。

配色
配色的类型有主题色、帮助色（用于烘托主色调，营造网站氛围）、突出色（用于突出重点元素，主要用于按钮、标签）和背景色（用作背景色，协调、支配整体的作用）。书中列出了常见颜色含义和配色技巧：

颜色	说明
红色	代表兴奋、奔放和欢乐 联想到旗帜、激情、危险、火灾、警报、血液、竞争、侵略等 特点：对眼睛刺激大，容易视觉疲劳，不宜大面积用
橙色	代表激情、欢乐、健康 特点：容易视觉疲劳
黄色	代表轻快、明亮、乐观、高贵、富有 特点：表现出活力和快乐的情绪
绿色	代表平和、恬静、谦虚、智慧、生命力、富饶、康复、生态学
蓝色	代表：冷静、沉思、智慧、自信和神秘 联想到天空、海洋、现代科技
紫色	代表高贵、优雅、浪漫、神秘、公正、真相 特点：明度低，人眼分辨力弱，容易疲劳
黑色	代表严肃、恐怖、冷静 特点：作为背景色，和白色对比时，对比度高
白色	代表明亮、简单、干净、纯真和和平 特点：作为背景色，对内容干扰最少
灰色	代表：中性、稳重、智慧、高雅、精致、含蓄 特点：不易产生视觉疲劳，但容易让人感到沉闷
配色技巧	红色为主+黑色为辅：沉稳、厚重、朴实 橙色为主+黄色为辅：甜美、靓丽、芳香 橙色为主+白色为辅：焦躁、无力 绿色为主+黄色为辅：活泼、友善、幼稚 绿色为主+黑色为辅：庄重、老练、成熟 绿色为主+白色为辅：洁净、清爽、鲜嫩

配色还包括了色调，暖色调带来温暖、扩张感，冷色调带来冷清冷静、收缩感**。色调的选择主要从三方面因素去考虑：目标用户群体：地理、文化、性别、年龄、教育背景，网站类型：电子商务、门户，品牌形象。

文字

内容	说明
文字设计	无衬线体更适合再电子屏幕阅读 字体颜色/背景色：白/黑、黄/黑、绿/黑等组合，对比效率较佳 应规避蓝底红字、红底蓝字、黑底红字、黑底蓝字、绿底红字和黑底绿字
文字语气	应当有礼貌、亲切 出错时应当幽默 不要使用责怪用户的语气
文字标题	要有吸引力 尽量简洁不啰嗦
设计细节	同一类型文字保持统一的字体、大小和样式 不要使用超过3种以上字体 不要使用不停闪烁的文字

图片
要使用有质感的图片，提高网站整体观感。

5.心得

正如书名所言，读完整本书下来可以对网站的基本结构和基本元素的设计有所掌握。内容比较偏细节，可以让新手更容易接受和入门。但是部分内容已经有些过时，参考时不必全盘参考。

附笔记脑图：

《见微知著-Web用户体验解构》读书笔记