什么是工具型网站" M# c3 T* M7 t; I3 h
& `; C) L& h& A1 {3 G 我们先从wikipedia上了解三组概念:8 U+ Z: h# k% H% C9 C
4 k1 A( |) K( X' y- C 工具:是指能够方便人们完成工作的器具.* }, R* W7 B, X% r
5 o( g; p# D9 {% J
application:用来帮助用户完成某个单独的或是一组相关的工作的计算机软件.5 ^3 J1 P% d& r6 z+ G" A
% n: M; {$ V% {) p& D5 f
web application:指通过使用web和web浏览器技术,跨越网络完成一个或多个任务的应用程序,通常需要使用web浏览器.
6 S' Z# s8 l5 m* ^9 Y/ D1 v6 h% G: j
由此可见,应用就是计算机领域的工具,工具型网站可定义为承载了一个或多个网页应用的网站.它专注于让用户完成一系列的任务,如注册、支付等.# K( N/ l. d _( Z! o( o
& ]& U( |7 g- C) t/ {$ M
首页的用户需求
. F( n7 i$ r! k: W3 i6 \ L& X0 b& j1 M) ~) H7 l
首页的用户大体说来可分为三类:不了解的新用户、有兴趣的新用户、老用户.
' |2 i( s, {! H( N% B4 i, b- r4 ]0 L5 i/ e" ]: O
对于新用户而言,他们势必会问到这些问题:
' L! r/ q9 d( `
4 Q9 U+ R, m1 ~2 U7 f1 C7 z6 w3 w4 T* D 我在这能做些什么?- P9 b' M; s8 |* D1 s7 w% z
, k. g/ v; w& F4 { 这个网站能提供哪些对我很重要的东西?
5 _" T5 g1 x2 m9 l3 p
8 T6 v9 i8 V* H 对于已经有兴趣的用户也会有些其他的疑问:
c) h( J8 u# b( ?! X! U) g7 a Q2 Z* b! Z$ P
我应该怎么开始?* \+ P2 N) D7 E3 D7 x
7 ^- Y, Q ^4 t% [% g* ?! ]" _1 [; Z# T 我是否必须注册?如果是,应该怎样注册?
) ^0 M/ g" E7 }4 q
, B* A( u4 ] l/ L: E# X0 D 总得来说,首页应该解答新用户的疑惑并且帮助他们找到功能的入口;而对于老用户,则需要更明显、快捷的登录入口.
- g4 W% x% s. x9 ?; E; M; N+ P0 p! v
首页的目标4 G( P9 Z7 q- R( I$ f
7 {6 m+ j; L1 O5 b
《designing for the social web》一书将用户的使用分为几个步骤:不了解--感兴趣--第一次使用--常规使用--有情感.而首页对于前面三个步骤至关重要!
/ @* d, v. x" I7 b- T' Y& ~8 K& e7 g* D/ t4 t: O- P2 d
这样看来,首页有两个目标:3 i+ k6 M: @* z. b% d# K6 s3 z9 D
5 u2 V, T3 }, l+ I: O* ]9 P# D 1. 让不了解的用户了解网站并产生兴趣,最终促成用户使用.& B# P. q: _% i4 p
; w+ s; w5 g2 k
2. 让有兴趣的用户尽快开始使用.
, V' j5 f6 Y. U9 T4 f$ E: V+ }6 [
! V: p2 B; K9 q4 {- \8 q. t 首页的设计
: ~2 B- |) H0 O* k/ }! ]4 U4 e) T$ c5 ]2 T. w3 [* {* r) [
在实际工作中我们会碰到几种不同类型的工具型网站,针对其网站内容的不同,其首页的表现形式也大不一样.4 s) g8 X0 O: y" n% W) s
: a+ Z" u! ~. r$ r( B' Y/ V0 L 集中应用型, F! a8 N# Y F
5 g9 K1 n: D! R, ?6 Y p
这类网站本质上是一组或者多组web app,功能多且相对简单,不会产生大量用户数据.- n- U, ^/ \' u' |
) ] k' r, ~( c* K& Q* @, ~ 1. 核心结构
, Y! P/ z. M" N4 i* K5 k( M1 V C$ ~3 W
将使用最多的功能展示在首页对于用户来说就是最快的入口.用户通过logo、 banner、网站声明等了解网站性质,然后就是找到自己要的功能.. x9 X7 h; Y3 @" ]
' ^3 n& B9 x' E- z3 O7 s 2. 注册/登录模块) k- O% ]4 q& l( x2 V- x
* @5 V' r( P3 f& V; y 因为用户不想分散精力去记起用户名和密码,或者是他们太专注在自己要做的事情上,原则上只在必要时才让用户登录.但如果大部分功能都需要先登录,那么在首页直接展示登录表单是有必要的.6 R0 i, f* ^; W
# h$ }! Q( ?$ X1 V 3. 案例* z( M* F& v( [: n1 u3 ~# l0 r/ x
! ]" r3 m o& K: Q7 G! B 58同城
- A- O, n/ E6 ~, c
+ |& w& u6 w5 [$ p 有两级目录:城市目录、功能目录.用户通过这两级目录很容易找到想要的功能.但使用这些功能大都不用注册,所以首页并没有明显的登录模块.
& v% k+ J4 P& i8 | {9 L8 Y% C, y) R. R& P
腾讯充值中心& S Z8 x7 p- c$ n+ w7 L( J% F
: j) Y Q }# X& A( W2 a; g$ A 首页的核心模块依旧在目录结构,用户由此了解网站主要业务以及如何开始自己的任务.
( |7 m% [+ R# g$ a9 G& T3 a, f% {% h6 o5 K ^( d" Z7 l
去除一些运营性需求,可以得到一个更加纯粹的充值网站:
# q* `3 E5 u( {" v9 F7 M
& y& M. W& K7 ]& N 数据管理型
7 X- x8 `# g. j) |/ v7 Q0 a: P4 _- E: x0 i: S7 z
这类网站本质上一个大的web app.功能流程复杂,会产生大量数据,往往承载了强大的数据管理功能.* C; B9 E6 O- f e: ]6 Z
7 M) r7 E+ a1 r* |) x. h4 H' Y, U 核心框架
; h9 G4 D+ [0 S' r+ n
% ^: t M5 M* E" M/ \$ l 为了方便用户掌控及管理自己创建的内容,首页的策略一般会先引导用户创建账户或下载客户端(下载客户端的下一步也是注册),然后再开始任务.为了说服用户开始任务,它一般会包括以下几个模块: O( n! Z0 Z7 I( B
; Q8 c( N3 X& c; Y: G1 s6 j& p
价值声明:说明网站提供的功能及意义,快速打消访问者疑虑.
/ x4 u0 \7 y1 L1 U* n- h. G; W7 v3 O
投入产出:告诉用户能得到什么,使访问者对产品的使用有预期,并建立信心.( Y f# m, K- A# Y2 _- N6 O/ _
5 B9 r, Q# C# B' G6 @9 l: B
视频介绍:让用户快速全面地了解网站.
& o9 d3 s4 V' f
# m: C! o$ L6 J( V 权威推荐/典型用户:让用户产生同理心,增强对产品的信赖.( N) e# Y2 \& R+ }' r% L; W, }
# r0 E* W9 q+ y; p 行动号召:当访问者产生兴趣时,适时地让他们开始使用.. g% s4 D7 s- S8 b: g
* Q; g: B- i# g1 q! |2 W; f
这些模块其实分三个等级层层深入地说服用户使用产品:
5 \! p3 M) F- e0 l6 d+ ~2 w1 e) n4 h
尽管列出了这些模块,但实际情况中并不都必要,最终得看用户对产品的信心.evernote在等级一就能说服用户,dropbox的页面则只有一个视频介绍.
; |+ l9 S1 o3 |- b0 T+ [! V: h
- [; B/ ?0 k5 [! N# I- ~; J5 U0 [0 Q 1. 注册/登录模块
1 k# t0 W) j8 l8 T( U7 U( b2 c' j4 ]5 O8 Y V+ r; K
这类网站注册和登录模块都非常重要,一方面已注册用户数一般远远大于新用户数,另一方面首页很大一部分程度是为了注册的,老用户有固定的入口即可.但在首页我们需要强调哪一个?
1 d; w3 K$ Q( P3 `$ B$ `$ I) e
0 w7 F( `' e" C 这个问题更多地取决于产品的商业目标.受产品策略的影响,同样是拥有大量已注册用户且用户登录频繁的产品,gmail的首页强调登录,而facebook的首页则强调注册.我们也看到115网盘和华为网盘的首页明显就不同:
8 a8 y* [- ?1 Y3 W
1 o2 b; Z; w4 s 但无论如何,登录模块最好不要跳转页面,否则会增加老用户的操作成本.. x) k% Z2 R% O' O4 I9 d5 p7 \
0 A2 d2 a# X; B1 m: E
2. 案例; e# Z6 o! v2 ?
6 j# ?, {) X7 F& }6 z u mailchimp) O9 L: J$ a) {' v0 Y& y9 v
( Q8 o" E2 G, A& m! [ 首页包含价值声明、投入产出、视频介绍、典型用户、行动号召等模块,极力说服用户开始使用产品.& `$ @3 D# \, H7 I5 M( ~2 f
( i5 c# O$ ^! H' F, q 独立操作型, Z# p: B% T! B" }$ ?& b# Q r
8 ^: I/ k7 k m; V. X \, K7 W
这类网站往往是一个几步就能完成任务的小型web app.2 C5 y- p2 [' Q3 L" X& R2 o
- ?( Z$ d& y9 p' |2 ?, Q5 } 1. 核心框架
! g$ i5 h) D8 `0 c8 [! S
9 s, M+ i1 A& Z5 M 往往只有几个简单的控件和操作说明就能完成任务.由于使用成本不高,用户也会很乐于尝试使用.
% m& w' U/ Q& S/ a8 c% r
- M' I3 _( q5 D! k3 d9 _: |: o 2. 注册/登录
) v9 i1 |; u0 l3 W1 q+ Z ~$ s# _* \5 n
这类网站一般不需要注册或是简单的注册,也可以将注册需要的内容贯穿在任务操作中从而摒弃注册模块.
* u. y0 _1 ~ b+ e3 W1 f) K( s& m3 c. E% m4 o
3. 案例5 u5 Z; u+ O8 ]2 p
( V6 j& p$ k, E% w
minus
6 V& a. d1 B4 q0 c/ S _1 g N. X& i- ~7 I& h
用户进入页面后能很快理解这是个分享类网站,只要将图片拖入到网页中并填写资料即可开始使用.% w @8 R, s" H P1 ~" i$ S. L
9 N( E$ h! e5 q- V. Z& W' e
senduit1 q; n9 q# ~3 m) j! I
) _9 a5 w1 {( F2 J. ~
简单的步骤指引告诉用户网站的功能和操作方式,使用时无需注册.
% J. y9 R9 N6 K9 R* a: F5 d& G% i- S2 l
结语% a, |2 D' s7 n5 o& W4 B' o
" o. p8 V1 d5 a3 q& b- M) Z- K5 p0 x
网站的首页需要回答用户一些非常重要的问题,才能让新用户愿意使用我们的产品.
p6 \; T, u% r5 \. z/ {, o
& ~6 P7 o7 }1 E4 j8 x4 C 本文主要探讨了工具类网站首页的设计目标以及三种设计框架.而在实际项目中还需对更具体的场景进行分析、考虑运营性的需求、对单个模块的交互进行推敲,最终才能得到一个能吸引用户、留住用户的有效首页.; X- D) |+ X" ?, j& W$ s, [
0 D5 B4 y$ S1 o
(本文出自tencent cdc blog,转载时请注明出处)! G6 P# g5 j' n! ]
. L: ^! K8 l& F- u. h& l
0 h" X" C2 B2 ^& ^: x4 K9 ^
 该贴已经同步到TONY的微博 |
