网页 UI 设计模型 — 导航和路径规划
一：搜索
facebook
当期最普遍的做法是将搜索功能放在导航区域，并且右上角放一个搜索框。
要点：
1. 如果空间有限，推荐使用可扩展的输入框，带有放大镜图标；
2. 内容越多的情况下，就越是需要将搜索放在明显的位置。例如，Facebook 并没有采取传统的方法，将搜索框放右上角，而是放在了中间偏左的位置；
3. 自动填充能够节省用户时间，给出建议内容和合适的词；
4. 如果用户能够多重条件搜索，使用“输入提示”模式。
二：通知
知乎
随着社交媒体网站的流行，让用户知道何时有人产生互动的“通知”也普遍开来。网站和 APP 可以推送新的内容、产品、评论或折扣信息，用户也可以选择想要接收哪种通知信息。
Google 采用了跨产品的混合通知：用户登录 Gmail 后，可以快速查看是否有人在 YouTube 上发出新的评论。
要点：
1. 最普遍的通知图标是一个 “铃铛”；
2. 通知通常带有颜色并且接着一个数字，选择一个醒目的颜色来吸引注意力；
3. 偶尔的更新提示是适当的，但是不能滥用通知，利用通知发一些营销信息，否则会降低消息的价值；
4. 如果用户长时间未登录（如一周或以上），可以考虑通过增加快速通知，为用户总结过去这段时间内发生的重要信息。
三：跳转
简书
无论是文字链接还是图标形式的跳转都能够节省用户时间。作为可选功能，不能太显眼，最常见的跳转是“返回顶部”。
要点：
1. 不要太显眼，可以考虑固定在侧边栏；
2. 同样可以采用下拉到一定距离显示按钮。
四：固定导航栏
Facebook
通常会采用固定顶部导航栏，也可见一些固定侧边和底部导航栏。好处是用户在浏览内容时候，突然需要搜索或查看通知，有便捷的入口。
要点：
1. 由于总是需要占据一些屏幕空间，导航设计的越小越好；
2. 对于单页站点强烈推荐用这种导航，否则用户会丢失导航信息；
3. 为了更好的移动端体验，针对移动用户做导航收缩；
4. 对于卡片式风格的网站，不建议采用这种方式的导航，用户在下翻的时候容易迷失。
五：垂直导航
Wikipedia
放在两边的垂直导航能够节省空间。对于有很多分页的网站，同时可以为用户提供很多选项，当然也可以为其他导航增加变化的空间。
垂直导航的好处是允许用户在不同页面间自由跳转，更简单的获取不同内容。
要点：
1. 如果想要节省更多空间，垂直导航可以考虑采用抽屉式；
2. 不必拘泥于左侧垂直导航，有时候采用右侧垂直导航能够让网站更加突出。
3. 如果想要更加有创造性，可以结合垂直导航和跳转功能，例子：http://www.heartkids.co.nz/
六：弹出框
Bing
适用于用户不想离开当前位置，但是能够获取更多信息的情境，这样做的好处是不会分散用户的任务流。通常在鼠标悬浮时弹出。
要点：
1. 完美适用于卡片式布局：设计师可以在页面展示大量的内容，同时以弹出的方式显示信息来节省空间；
七：模态
Weibo
由于涉及到交互，模态是一种交流重要信息的方式。和弹出框一样，模态可以让用户在当前页面完成操作，不同的是模态需要交互，即使是最简单的点击“跳过”或“是”。
模态通常有两个用处：
·吸引用户注意某个功能
·营销
要点：
1. 模态弹出时背景需要处理一下，通常是将背景变暗；
2. 允许用户通过点击背景框和按“ESC”键退出模态；
3. 如果觉得强迫用户点击会影响用户体验，可以考虑使用自动最小化的动画；
4. 对于教程页面，推荐使用多页面模态；
5. 对于邮件订阅的模态，在用户滚动到相应位置触发。
八：行为召唤
JD
行为召唤意为用明显的按钮引导用户进行某项操作，通常用于购买、注册、邀请参加某项活动等。对于行为召唤，最重要的是视觉效果：显眼且实在。实际上，行为召唤应当是用户看到的第一元素，毕竟这个功能通常都带有商业目标。
要点：
1. 颜色时让行为召唤显眼的最有效方式，橘色或绿色是吸引人注意力的颜色，使用黑vs白强烈对比的颜色也可以;
2. 另外一个是位置，在最常见的位置放置行为召唤;
3. 鼠标移上时变化颜色是近来的趋势，能够增加视觉愉悦感；
九：推荐
Facebook
推荐最常见于电商页面，依据用户的购买/浏览行为推荐商品。现在，任何网站只要能够收集用户数据都能够做推荐，也可以基于用户的个人资料。
Facebook 会基于你的好友和关注列表来推荐你可能感兴趣的人，而视频网站可能仅仅依据你的观看记录推荐同一类的内容。
Amazon 做的最超前，依据不同维度来做推荐，如：搜索、浏览、收藏等。
要点：
1. 个性化是关键。对用户了解越多，推荐就能越精准。使用所有你可以用到的数据。
2. 用户简历个人资料时，可以邀请他们选择一些特点标签来区分偏好。
十：相关内容
Ebay
在电商、博客、杂志网站中最为流行，和“推荐”功能一样非常有效，但是不需要用户数据。通常通过标签或关键字推荐相关内容。
要点：
1. 相关内容的准确性常常依赖于标签系统，更多的精准标签创造更有效的结果。
