什么是工具型网站* u7 v6 [, N+ [5 f! H! ~+ C# f
" b8 ?3 z6 X- g3 ?+ a* H7 M. Z 我们先从wikipedia上了解三组概念:
! p y! G; O# w3 z1 U' r5 M
0 C- B6 e9 K1 _6 }# l/ K* A) Q 工具:是指能够方便人们完成工作的器具.
. f( {8 u9 s G- X$ o9 K
/ e8 v. e' r. b9 ]$ n+ b application:用来帮助用户完成某个单独的或是一组相关的工作的计算机软件.
( D! ?' T: ?/ q- I2 U1 n& _) f
$ r0 y; p' E5 {7 F web application:指通过使用web和web浏览器技术,跨越网络完成一个或多个任务的应用程序,通常需要使用web浏览器.+ Y- w1 C- O6 i, d3 `
% M+ P: a* l, F$ n+ g. Q" M e
由此可见,应用就是计算机领域的工具,工具型网站可定义为承载了一个或多个网页应用的网站.它专注于让用户完成一系列的任务,如注册、支付等.
1 `" F' b; m4 b e& {
* V0 j! n4 M5 o6 d' f& v" b( S 首页的用户需求
& m, c. k* l3 o `
B) @( [. A4 K2 W7 B 首页的用户大体说来可分为三类:不了解的新用户、有兴趣的新用户、老用户.
& G: t1 r) S- a& B1 J+ Z& Q* }' u, k% H/ V* ^. P* I$ \3 P% ~3 u
对于新用户而言,他们势必会问到这些问题:! [0 Y# y) E4 I! x
* D2 _0 p+ \% v- C6 f+ H& g. D
我在这能做些什么?
) _* `5 H6 F+ U0 L. Q9 K; J( M; l% M2 A- B6 ?
这个网站能提供哪些对我很重要的东西?
& W6 c5 t/ A' ~ R6 n0 y1 ~3 u# X7 {1 f# k$ K4 z3 N6 ^9 ~* W
对于已经有兴趣的用户也会有些其他的疑问:
$ b. X8 v/ J: U5 a, P0 U7 E0 |$ ?7 B3 E5 r' y9 U
我应该怎么开始?8 q% n6 U8 u8 S& Q
$ x: Q' A4 G& f4 [1 A; ?$ a 我是否必须注册?如果是,应该怎样注册?
7 a6 U9 u' ?/ F* c
1 y ?9 ]* @! R( a1 q 总得来说,首页应该解答新用户的疑惑并且帮助他们找到功能的入口;而对于老用户,则需要更明显、快捷的登录入口.
/ D9 }' E$ o1 ~1 W* U; B' K+ J h- x& A
首页的目标* c, ]4 f& n, j3 i5 P! e) j! n
9 R% L8 e% U/ c( i* B; l 《designing for the social web》一书将用户的使用分为几个步骤:不了解--感兴趣--第一次使用--常规使用--有情感.而首页对于前面三个步骤至关重要!' u) e) o5 r# k& T
9 q0 \7 g; |2 F9 X [
这样看来,首页有两个目标:, M9 Z2 ] M! y4 [6 \
' e; e( b- @! U$ i' t/ A 1. 让不了解的用户了解网站并产生兴趣,最终促成用户使用.
/ B7 r, u, ?, c' [1 H( _$ t4 @( Z" \% V7 K' \
2. 让有兴趣的用户尽快开始使用.
: ]- L$ t& U* W+ @
' ?) A& K8 Q! X* F! ?; S! P 首页的设计: N8 H+ D7 @, M5 v1 S3 W% q* w
4 f; e. j' Y8 M9 q* }- C& K 在实际工作中我们会碰到几种不同类型的工具型网站,针对其网站内容的不同,其首页的表现形式也大不一样.
# I( _3 v, i- p$ y& @8 |3 Q( Q8 {8 y" D1 i4 W" F n& e- r
集中应用型6 Q' n+ D4 V" Y1 K
) W6 z# d6 w. u1 g" j8 _ 这类网站本质上是一组或者多组web app,功能多且相对简单,不会产生大量用户数据.
4 v( i; C8 r( R" Z- @" p# l3 H/ A7 U
3 r& A. i' E+ M 1. 核心结构6 j8 u/ Y4 ~8 K7 a
& X1 g g2 u2 n$ h0 C
将使用最多的功能展示在首页对于用户来说就是最快的入口.用户通过logo、 banner、网站声明等了解网站性质,然后就是找到自己要的功能.# f# _8 K' K: V% G! z% e: K
' y3 { b6 l1 t( x
2. 注册/登录模块
, u5 `1 U$ ~# U. E: r" p! G: Z
7 p! h! C9 r$ T e 因为用户不想分散精力去记起用户名和密码,或者是他们太专注在自己要做的事情上,原则上只在必要时才让用户登录.但如果大部分功能都需要先登录,那么在首页直接展示登录表单是有必要的.3 B0 z% w* J: y
9 {+ T% a; \& p' W1 x3 ?
3. 案例
0 S3 Q6 }& _9 L) @" ~8 N0 l- H
% G) c3 r, `+ W' S) s1 M 58同城3 R3 D) n! T6 \6 G5 @/ Y# N6 w
% J! }; T) L. \
有两级目录:城市目录、功能目录.用户通过这两级目录很容易找到想要的功能.但使用这些功能大都不用注册,所以首页并没有明显的登录模块." t, h- u: n$ `% }4 h# F6 G
0 x- [, I: S/ z A3 l; K 腾讯充值中心* v' L( v/ |. [' k, G3 I! f5 ^
. W1 y- h l' D/ `5 o
首页的核心模块依旧在目录结构,用户由此了解网站主要业务以及如何开始自己的任务.; p. U- }5 f' V8 E. _6 V
2 s0 T$ ^* P4 Y, ?! N, c2 _
去除一些运营性需求,可以得到一个更加纯粹的充值网站:
- c0 e4 X1 R& E% y7 C
5 g6 i5 }4 l |8 N0 b$ K1 s 数据管理型' |! J$ [0 _. v! E9 K8 L) X
7 U! b+ }1 K. C& b 这类网站本质上一个大的web app.功能流程复杂,会产生大量数据,往往承载了强大的数据管理功能./ ?7 r" `5 B. N9 s
) {* a! X) I w, N
核心框架
( p9 M1 @, ^* ~$ \, D( O
" }) i( y! I5 O. i) M D( d; b 为了方便用户掌控及管理自己创建的内容,首页的策略一般会先引导用户创建账户或下载客户端(下载客户端的下一步也是注册),然后再开始任务.为了说服用户开始任务,它一般会包括以下几个模块:
9 _/ u' M8 l6 ]9 [5 v6 q8 Q3 p. z6 w6 v( @# q
价值声明:说明网站提供的功能及意义,快速打消访问者疑虑.
5 J% m8 w( ^. B
, V! m) v; x8 b' i$ | 投入产出:告诉用户能得到什么,使访问者对产品的使用有预期,并建立信心.
' H8 {9 l* z* U! j6 S+ p" B6 ]% o; y. `
视频介绍:让用户快速全面地了解网站.
8 H4 R' J# Y2 _4 C6 E2 X' {# u+ |7 B! [$ A1 i+ l
权威推荐/典型用户:让用户产生同理心,增强对产品的信赖.
1 u' @6 @0 T3 _. a/ M+ ?5 s! o9 L
行动号召:当访问者产生兴趣时,适时地让他们开始使用.
1 p2 T* W1 `( ^ G; ^
5 \) u5 H3 G+ | 这些模块其实分三个等级层层深入地说服用户使用产品:# U6 R3 q* ^3 [
H5 ^( X, b5 |( ]0 Y$ V 尽管列出了这些模块,但实际情况中并不都必要,最终得看用户对产品的信心.evernote在等级一就能说服用户,dropbox的页面则只有一个视频介绍.; G, ?8 o0 J* s) T, |: p
, ?3 Z7 l- [! M- j, P6 o 1. 注册/登录模块+ z1 Z2 u9 r- D1 w$ Q
5 w( u/ A. i( s0 A% L1 R 这类网站注册和登录模块都非常重要,一方面已注册用户数一般远远大于新用户数,另一方面首页很大一部分程度是为了注册的,老用户有固定的入口即可.但在首页我们需要强调哪一个?
- z( b( K# }* u: r* Q( V4 G! b
+ u9 \" W6 G* L: E- M 这个问题更多地取决于产品的商业目标.受产品策略的影响,同样是拥有大量已注册用户且用户登录频繁的产品,gmail的首页强调登录,而facebook的首页则强调注册.我们也看到115网盘和华为网盘的首页明显就不同:
) Y5 k( v0 Y- R5 k# c" F' M- t V4 a6 E
但无论如何,登录模块最好不要跳转页面,否则会增加老用户的操作成本. f- A0 G, A' g! m
4 _1 L6 K2 Y/ e( e! i# v- [/ j 2. 案例
) x, X+ l3 L* p3 U) I# d& p1 [
* C! W' }8 `5 E; P1 @ mailchimp
+ H- j! T6 d% f" O9 R, l9 ?' s/ |/ A' H/ P: r
首页包含价值声明、投入产出、视频介绍、典型用户、行动号召等模块,极力说服用户开始使用产品.1 ?; H4 i, @+ [. y# l
& g+ u+ c E* y0 g) }3 h* z
独立操作型
3 k3 P7 X9 `( |3 X3 {! W( l; ]' g2 }: Z/ [) b9 w- u
这类网站往往是一个几步就能完成任务的小型web app.% G/ ?" B, P. ~/ J5 ~0 B7 s/ W( N1 @
6 v& @5 z0 W8 \9 @; o% n( O
1. 核心框架 T6 u% Y# G! m" v
( ]. E6 H' }; @3 P z
往往只有几个简单的控件和操作说明就能完成任务.由于使用成本不高,用户也会很乐于尝试使用.8 [8 U4 K o& r( Q; n3 h6 c( s/ u1 Y& V
* ~& B- D: f. C5 N
2. 注册/登录9 d1 A) \) s% i' y; R
8 D7 e' r( D/ Z! H( V- E 这类网站一般不需要注册或是简单的注册,也可以将注册需要的内容贯穿在任务操作中从而摒弃注册模块.2 V4 ?" R+ B8 T9 I9 E; T% {
+ k* X! g& T% i: G' R* a# c+ p 3. 案例
. Z+ {+ T# ^- l( w N) y% Z" a; ^ V/ Y6 M7 M; m, j0 o
minus" t. h. o3 q# C, o1 v; h9 N {2 i
4 G0 H# ?$ U+ l0 A: q7 Q3 q4 g 用户进入页面后能很快理解这是个分享类网站,只要将图片拖入到网页中并填写资料即可开始使用.
: G7 ]8 ^ o: |' b: |5 v' E0 l1 x" c, Y3 ^
senduit8 U- S1 }" B3 I
; i' g+ y8 D, ]+ K/ o! W- ]
简单的步骤指引告诉用户网站的功能和操作方式,使用时无需注册., c! P$ {# H1 y9 p' a
- C- t: d$ [% ?% n9 x& T
结语. W7 u: [+ B/ `- m
# k- F8 g3 C* K% p ?% M" o 网站的首页需要回答用户一些非常重要的问题,才能让新用户愿意使用我们的产品.# Z. Y; j7 E$ g" v6 X
_& m; X+ {% ]7 |9 o* G
本文主要探讨了工具类网站首页的设计目标以及三种设计框架.而在实际项目中还需对更具体的场景进行分析、考虑运营性的需求、对单个模块的交互进行推敲,最终才能得到一个能吸引用户、留住用户的有效首页.! s3 V; w6 h C" v- g
4 t! b& P9 O) H2 a+ s8 V7 @ (本文出自tencent cdc blog,转载时请注明出处)
4 p, R5 u0 n. P' `' h3 D% _$ _+ D7 Q) P3 m8 J+ M+ X
2 p, \( u! V; x9 M4 B  该贴已经同步到TONY的微博 |
