下面是小编整理的工具型网站首页的设计思考交互设计（共含6篇），欢迎您阅读分享借鉴，希望对您有所帮助。同时，但愿您也能像本文投稿人“早中晚饭吃什么”一样，积极向本站投稿分享好文章。
什么是工具型网站
我们先从 上了解三组概念：
工具：是指能够方便人们完成工作的器具，
application：用来帮助用户完成某个单独的或是一组相关的工作的计算机软件。
web application：指通过使用Web和Web浏览器技术，跨越网络完成一个或多个任务的应用程序，通常需要使用Web浏览器。
由此可见，应用就是计算机领域的工具，工具型网站可定义为承载了一个或多个网页应用的网站。它专注于让用户完成一系列的任务，如注册、支付等。
首页的用户需求
首页的用户大体说来可分为三类：不了解的新用户、有兴趣的新用户、老用户。
对于新用户而言，他们势必会问到这些问题：
我在这能做些什么？
这个网站能提供哪些对我很重要的东西？
对于已经有兴趣的用户也会有些其他的疑问：
我应该怎么开始？
我是否必须注册？如果是，应该怎样注册？
总得来说，首页应该解答新用户的疑惑并且帮助他们找到功能的入口；而对于老用户，则需要更明显、快捷的登录入口。
首页的目标
《designing for the social web》一书将用户的使用分为几个步骤：不了解——感兴趣——第一次使用——常规使用——有情感。而首页对于前面三个步骤至关重要！
这样看来，首页有两个目标：
1. 让不了解的用户了解网站并产生兴趣，最终促成用户使用。
2. 让有兴趣的用户尽快开始使用。
首页的设计
在实际工作中我们会碰到几种不同类型的工具型网站，针对其网站内容的不同，其首页的表现形式也大不一样。
集中应用型
这类网站本质上是一组或者多组web app，功能多且相对简单，不会产生大量用户数据。
1. 核心结构
将使用最多的功能展示在首页对于用户来说就是最快的入口。用户通过logo、banner、网站声明等了解网站性质，然后就是找到自己要的功能。
2. 注册/登录模块
因为用户不想分散精力去记起用户名和密码，或者是他们太专注在自己要做的事情上，原则上只在必要时才让用户登录。但如果大部分功能都需要先登录，那么在首页直接展示登录表单是有必要的。
3. 案例
58同城
有两级目录：城市目录、功能目录。用户通过这两级目录很容易找到想要的功能。但使用这些功能大都不用注册，所以首页并没有明显的登录模块。
腾讯充值中心
首页的核心模块依旧在目录结构，用户由此了解网站主要业务以及如何开始自己的任务。
去除一些运营性需求，可以得到一个更加纯粹的充值网站：
数据管理型
这类网站本质上一个大的web app，
功能流程复杂，会产生大量数据，往往承载了强大的数据管理功能。
核心框架
为了方便用户掌控及管理自己创建的内容，首页的策略一般会先引导用户创建账户或下载客户端（下载客户端的下一步也是注册），然后再开始任务。为了说服用户开始任务，它一般会包括以下几个模块：
价值声明：说明网站提供的功能及意义，快速打消访问者疑虑。
投入产出：告诉用户能得到什么，使访问者对产品的使用有预期，并建立信心。
视频介绍：让用户快速全面地了解网站。
权威推荐/典型用户：让用户产生同理心，增强对产品的信赖。
行动号召：当访问者产生兴趣时，适时地让他们开始使用。
这些模块其实分三个等级层层深入地说服用户使用产品：
尽管列出了这些模块，但实际情况中并不都必要，最终得看用户对产品的信心。Evernote在等级一就能说服用户，dropbox的页面则只有一个视频介绍。
1. 注册/登录模块
这类网站注册和登录模块都非常重要，一方面已注册用户数一般远远大于新用户数，另一方面首页很大一部分程度是为了注册的，老用户有固定的入口即可。但在首页我们需要强调哪一个？
这个问题更多地取决于产品的商业目标。受产品策略的影响，同样是拥有大量已注册用户且用户登录频繁的产品，gmail的首页强调登录，而facebook的首页则强调注册。我们也看到115网盘和华为网盘的首页明显就不同：
但无论如何，登录模块最好不要跳转页面，否则会增加老用户的操作成本。
2. 案例
mailchimp
首页包含价值声明、投入产出、视频介绍、典型用户、行动号召等模块，极力说服用户开始使用产品。
独立操作型
这类网站往往是一个几步就能完成任务的小型web app。
1. 核心框架
往往只有几个简单的控件和操作说明就能完成任务。由于使用成本不高，用户也会很乐于尝试使用。
2. 注册/登录
这类网站一般不需要注册或是简单的注册，也可以将注册需要的内容贯穿在任务操作中从而摒弃注册模块。
3. 案例
Minus
用户进入页面后能很快理解这是个分享类网站，只要将图片拖入到网页中并填写资料即可开始使用。
Senduit
简单的步骤指引告诉用户网站的功能和操作方式，使用时无需注册。
结语
网站的首页需要回答用户一些非常重要的问题，才能让新用户愿意使用我们的产品。
本文主要探讨了工具类网站首页的设计目标以及三种设计框架。而在实际项目中还需对更具体的场景进行分析、考虑运营性的需求、对单个模块的交互进行推敲，最终才能得到一个能吸引用户、留住用户的有效首页。
什么是工具型网站
我们先从 上了解三组概念：
工具：是指能够方便人们完成工作的器具，
application：用来帮助用户完成某个单独的或是一组相关的工作的计算机软件。
web application：指通过使用 Web 和 Web 浏览器技术，跨越网络完成一个或多个任务的应用程序，通常需要使用 Web 浏览器。
由此可见，应用就是计算机领域的工具，工具型网站可定义为承载了一个或多个网页应用的网站。它专注于让用户完成一系列的任务，如注册、支付等。
首页的用户需求
首页的用户大体说来可分为三类：不了解的新用户、有兴趣的新用户、老用户。
对于新用户而言，他们势必会问到这些问题：
我在这能做些什么?
这个网站能提供哪些对我很重要的东西?
对于已经有兴趣的用户也会有些其他的疑问：
我应该怎么开始?
我是否必须注册?如果是，应该怎样注册?
总得来说，首页应该解答新用户的疑惑并且帮助他们找到功能的入口;而对于老用户，则需要更明显、快捷的登录入口。
首页的目标
《designing for the social web》一书将用户的使用分为几个步骤：不了解——感兴趣——第一次使用——常规使用——有情感，
而首页对于前面三个步骤至关重要!
这样看来，首页有两个目标：
1. 让不了解的用户了解网站并产生兴趣，最终促成用户使用。
2. 让有兴趣的用户尽快开始使用。
首页的设计
在实际工作中我们会碰到几种不同类型的工具型网站，针对其网站内容的不同，其首页的表现形式也大不一样。
集中应用型
这类网站本质上是一组或者多组 web app，功能多且相对简单，不会产生大量用户数据。
1. 核心结构
将使用最多的功能展示在首页对于用户来说就是最快的入口。用户通过 logo、banner、网站声明等了解网站性质，然后就是找到自己要的功能。
2. 注册/登录模块
因为用户不想分散精力去记起用户名和密码，或者是他们太专注在自己要做的事情上，原则上只在必要时才让用户登录。但如果大部分功能都需要先登录，那么在首页直接展示登录表单是有必要的。
3. 案例
58同城
有两级目录：城市目录、功能目录。用户通过这两级目录很容易找到想要的功能。但使用这些功能大都不用注册，所以首页并没有明显的登录模块。
腾讯充值中心
首页的核心模块依旧在目录结构，用户由此了解网站主要业务以及如何开始自己的任务。
企业网站,不比于门户，也不比于个人网站,企业的网站,一般都是有限的几个页面，再加上现在的企业领导，很多都不太注重于网络这一块，因...
企业网站,不比于门户，也不比于个人网站,企业的网站,一般都是有限的几个页面，再加上现在的企业领导，很多都不太注重于网络这一块，因为他们一向认为是以传统渠道来做的，因此，企业网站的设计，在网络推广里面，永远退后一步。虽然现在有远识的企业领导开始着重这一块了，但是总的来说，还是有点微不足道。
前段时候，因为接触了一家做深圳复印的公司，因此和他的闲聊，所以写下此文，探讨一下，关于企业网站如何来设计首页。
第一点原则：首页应该以文字为主。
除了正常的UI和用户体验外，企业网站的首页没有必要把FLASH，视频以及复杂的炫目的效果全弄在首页。这样明显影响了蜘蛛对首页的爬程。
第二点原则：活动的首页
正常情况来说，蜘蛛首入进入的是就是首页。如果永远一成不变的内容，蜘蛛不喜欢，来了几次，都没有新鲜的血液可吸，它也就懒得来了，
我的网站，之前设计的首页，因为基本上都是图片等等，有动态的东西。因此他说深圳复印这个关键的排名，已经没了。之后，因此参考了一下我的建议，把首页的一个图片部份，换成新闻更新列表。昨天告诉我，深圳复印这个关键字上来了。
第三点原则：界面的结构清晰。
所谓的DIV+CSS。这个是老调重提了，也没有什么好说的，天底下的人都知道。DIV+CSS我个人认为最关键是的给蜘蛛以清晰的条理性，也就是说可以指引蜘蛛在你的网站中不至于迷路。
第四点：常规属性的设计
比如TITLE，KEYWORDS等等。这些很多网络上的高手，都说了这些关键字的比例是多少，其实，我倒是不觉得你不一定要去要按这个标准来设计。这里我暂且提一个80/20的理论，我想用到企业网站首页的设计定位，应该是适用的。
比如，你的网站活动的部份。应该就是80%，固定的部份，应该是20%左右。
以上所写，仅只是个人之谈。以待抛砖引玉。
文章描述：首页大屏广告交互设计探讨.
一、使用场景
用于大型活动推广，频率控制在一季度或一年度一次为宜，
二、设计目标
1、效果好！尽量让每位用户都注意到这个活动。
2、干扰小！把对活动不感兴趣的用户的干扰降到最小。
三、设计要点
1、是否要遮盖网站内容？
不要遮盖。从我们监测的历次大屏广告点击数据来看，广告的点击在首页总点击的占比分布在2% – 20%之间。这意味着：有至少80%以上的用户对活动并不感兴趣，他们中大部分是带着明确目的来网站使用特定产品的。如果广告内容遮盖了网站内容，将严重干扰这部分用户的正常使用。他们所能做的是无奈地等待广告收起或立即关闭（如果提供了关闭按钮）。不排除有少量用户会因为你的强制遮挡而被迫点击广告，但我们绝不应该为了这几个少量的转化而得罪大部分用户。
2、如何加载？
比较好的一个方式是在页头上方铺开，这样不会破坏页面整体性，可以大胆使用大尺寸的广告，只要不把页头（LOGO和导航）挤出首屏，都是可接受的，用户总是能快速扫描到网站的页头，
广告区域在前端样式中声明高度，特别要强调的是不要使用高度伸缩动画展开方式，使得广告下方的网页正文部分能稳定在窗口的固定位置上，避免被广告的加载过程干扰而变换在窗口的位置让用户无法在广告加载完毕之前精确点击正文部分的链接。总之，大一点没关系，但不要乱晃。
3、是否要提供关闭功能？
必须的。还要在cookie中记录下来，用户再次来到这个页面时不要再次出现。
4、是否需要在一段时间后自动关闭？
不需要。因为用户阅读广告所需时间的个体差异很大，我们不能为用户统一设置这个时间的长度。下图是最近一次我们检测用户主动关闭广告的时间，验证了我们的设想。图中x轴表示时间，y轴表示经过对应时间后关闭广告的用户数。
如果某些特殊情况下需要自动关闭，可以考虑在广告上显示倒计时，让用户预知还有几秒会自动关闭广告。
5、被关闭后，是否要提供重新展开功能？
常规交互原则：操作可撤销，状态可恢复。提供重新展开功能可以给部分用户提供在完成主任务后再点回来看看的机会。关闭和重新展开都可以配合动画，以增强页面变动的平滑度。
四、线框图，供参考
一说到导航每个人都不陌生，如amazon的Tab式导航、网站地图、软件中的菜单导航、索引表等等，导航设计看上去非常的简单：无非是页面上放置一些链接，通过这些链接用户可浏览和使用整个网站。事实并非如此，导航设计是非常复杂和严谨的。 下面我们以网站导航为例粗浅的分析一下导航设计的复杂性：
任务：设计一个网站导航
目标：1、提供给用户方便的网页间跳转的方法
2、能够表达出页面之间、页面与内容之间的关系
分析：人本能的具有空间感。想象一下你现在坐在家中的沙发上看电视，突然有访客，你起身会向哪个方向走去？高中时的挚友是坐在你的前面还是后面？——不用问大家都能会快的回答出来。
同样我们在设计网站导航的时候一定要清晰地告诉访问者“他们在那哪儿”和“他们能去哪儿”
用户需要知道他们在网站信息空间当前所处的位置，我们也希望能帮助用户建立网站空间感，通过我们设计的导航系统。(之所以称为导航系统，是因为仅仅靠某一种导航模式是无法完成目标的)
设计方案：提供一个完整的导航系统，其中包括全局导航、局部导航、辅助导航、上下文导航、远程导航
全局导航：
从网站的最终页面到达其他页面的一组关键点，无论你想去哪里，都可以在全局导航中最终到达，
局部导航：
提供一个页面的父、兄、子级别的通路，是用户在网站信息空间中到附近地点的通路。局部导航的设计好坏会直接影响到整个导航系统的质量。
辅助导航：
提供了全局导航和局部导航不能快速到达的相关内容的快捷途径。用户转移浏览方向，而不需要从头开始。
上下文导航：
用户在阅读文本的时候，恰恰是他们需要上下文辅助信息的时候。准确的理解用户的需求，在他们阅读的时候提供一些链接(例如：文字链接)，要比用户使用搜索和全局导航更高效。上下文导航的示意图与辅助导航类似，这里就不再画了。
友好导航：
一些用户通常不会使用的链接，确实需要时又能快速有效的帮助用户。例如：联系信息、反馈表单和法律声明等。
远程导航：
独立方式存在的导航。如，网站地图：简明的、单页网站整体结构展示。在用户被你的其他导航搞得晕头转向时，很多时候他会选择网站地图。
通过上面这些导航的设计，可以看出一个完整的导航系统设计是非常复杂的和严谨的。
本文来自：导航设计浅析
网站首页是一个站点的门面，同时也是一些重要内容的集合呈现地，产品经理、运营经理、UE设计师、UI设计师往往会通力合作完成，而且通常花在首页上的心血最多。当然电子商务网站更不例外，下面分析一下电子商务网站的首页：
首页的作用：
如果说电子商务网站中首页并不是“最重要的”，你信吗?电商老手们一般花力气最大的是产品详细页，因为详细页能带来直接的购买转化，是整个电商网站的灵魂。电子商务站点中，产品详细页才是真正的LandingPage。
首页的一项重要目标就是把流量合理的分配进入详细页，引导用户找到合适的商品，并希望他们最终在详细页中成交。我们把这个作用称之为引导分流作用。
另外，首页还担负着品牌形象的重任。诚信是消费者的第一指标，具有一票否决权，这个定律在线上线下任何交易中都适用，包括红十字会捐款。详细页把产品卖点提炼的再好，把产品图片设计的再诱人，要想产生成交，前提是建立在用户对你平台的认可和信任上。我们把这个作用称之为信任展示作用。
什么人看首页：
首页用户可以分为两种：有目的性的和无目的性的，用“淘”和“逛”这两个字眼形容似乎更加形象。
喜欢“淘”的人，至少会清楚自己大致需要什么样的东西，比如：最近生活无聊、需要释放工作压力，所以想买一本比较刺激的侦探小说看。而另有一些人清楚的知道自己需要产品的名字和型号，比如：我需要一本《福尔摩斯探案全集》，因为我和太太都是福尔摩斯迷。
喜欢“逛”的人也是我们的上帝，因为他们往往是对平台产生了信任才会常来逛逛的，而且这部分人往往对网购情有独钟，没有任何教育成本。
哪些产品元素是必要的：
一个最粗线条的产品设计思维模型：首先考虑为什么做(目的)?然后是做什么(定位)?最后才到怎么做(方法)?
上面的两段分析，我们知道了电子商务首页为什么做?下面来聊聊做什么的问题，那些东西是必不可少的，
头部形象：包括贵站的Logo、广告语、服务保障条款、7*24小时的服务承诺等等。这些都起到了展示品牌形象的任务，通过一系列的组合，要让用户从感知，到喜欢，再到接受和信任。可信的平台是一切成交的基石。
检索：检索是商城必不可少的元素。它是那些目标明确用户的信息获取方式，比如上面提到的我要给太太买《福尔摩斯探案全集》的事情，购物目标明确，不愿意多浪费时间，找一个靠谱的商城直接检索，有则买下，没有立刻叉掉页面走人(比价之类的是另一码事儿，因人而异的)。
品类建设：也叫“类目规划”或“商品分类”等等，就是从大类别到小类别进行梳理，最终把所有涉及到的商品全部归纳进去的工作。从用户体验层面讲，首先规划和梳理分类不要超过三个级别;其次要符合大众的认知常识，做到绝大多数人通过清晰地分类，能够快速找到想要的一类商品。
商品分类最适合那些能大致描述出自己需求什么的用户，比如上述那个想买一本比较刺激的侦探小说的例子。通过类目可以很好的找到侦探小说的产品集合页或列表页，然后用户可以从所有侦探小说的列表中再进行详细选择和比较。
推荐及活动：对于逛的用户来说，我们需要用推荐商品和活动促销的方式让她们在首页尽快对某个产品感兴趣，并点击进入LandingPage。推荐和活动往往占据首页最大的面积，因为随便逛逛的用户目标不明确，所以需要更强烈的感官刺激才能激发他们购物兴趣。
亚马逊一直是这方面的领导者，他们发明的算法技术，可以根据你的各种行为推测出你可能喜欢或需要的商品，一切都是由系统完成，而且准确率很高，不信可以仔细逛逛卓越的网站。当然，对大多数电子商务公司尤其是垂直电商，在没有海量商品数据的情况下，我更加建议以运营人员主导，用“人肉工程”的方式完成这任务，这样对于老板的投入产出比将会更高。
当然，一个电商网站首页远远不止这些功能，甚至有一些需要产品经理结合自身优势和用户需求来创新，产出一些“人无我有”的亮点功能。(文/海星）
★ 走进工具型网站
★ 方便和交互设计
★ 网站设计策划书
★ 网站设计简历
