什么是工具型网站
" t9 Z. a4 _ X- c( G* P. o) P8 J3 m5 K* G+ @ `
我们先从wikipedia上了解三组概念:
0 b0 p9 H& N! I- G7 p
* _. Z1 c: v6 Q0 d( X: R: I, D2 U 工具:是指能够方便人们完成工作的器具.! ]/ t) D0 J1 j8 i
( K7 @' I" D: s+ F application:用来帮助用户完成某个单独的或是一组相关的工作的计算机软件.: O p( q5 ]- i* F+ b
6 E% S7 w Y5 H( W web application:指通过使用web和web浏览器技术,跨越网络完成一个或多个任务的应用程序,通常需要使用web浏览器.. Z) d; p5 z- S5 p9 N
Q/ R- J* ?2 q$ Z! m( y o8 Q 由此可见,应用就是计算机领域的工具,工具型网站可定义为承载了一个或多个网页应用的网站.它专注于让用户完成一系列的任务,如注册、支付等.* A( K; O/ Z0 G: V
& e+ x' d1 l4 r4 v. y
首页的用户需求/ \; `8 U7 s( U; `0 g
1 f! H, c" [ }. d
首页的用户大体说来可分为三类:不了解的新用户、有兴趣的新用户、老用户.0 ~$ D; r: |; c( j
\& c' e) u4 h5 \1 y0 k
对于新用户而言,他们势必会问到这些问题:
# j0 ^2 x7 l6 `$ P& y! _
/ N3 y: g" i0 W! V* T, ~ 我在这能做些什么?
& u5 D, C" O6 }, Y
7 {% H2 @0 I; T6 x 这个网站能提供哪些对我很重要的东西?% \( l! N: q4 f" C/ o
* x- ^! {, T0 O 对于已经有兴趣的用户也会有些其他的疑问:9 W! Z. t6 @+ S( L' K# R
1 J# ~1 Q }; v& M% e1 k 我应该怎么开始? {" m7 i2 b# |6 O
3 Y2 E) f2 t5 l2 m5 D% N( f8 W
我是否必须注册?如果是,应该怎样注册?9 L2 }2 A, g2 o/ o) C, J
' \6 D+ S0 h0 Z# u
总得来说,首页应该解答新用户的疑惑并且帮助他们找到功能的入口;而对于老用户,则需要更明显、快捷的登录入口.$ h- v8 k$ f- Q! N8 x
+ I) ]( _( r* n# I( Z
首页的目标
7 ?6 Z- }0 ?: W* {7 @2 Z
C: o, \& D* `' c8 l7 G# o9 W$ ] 《designing for the social web》一书将用户的使用分为几个步骤:不了解--感兴趣--第一次使用--常规使用--有情感.而首页对于前面三个步骤至关重要!' q5 S! s3 U- m. ?3 M
2 V0 p5 K+ S5 d' x+ U$ S
这样看来,首页有两个目标:6 a, ^5 e- u: N
3 p5 q F5 M( n: s1 G& r3 C
1. 让不了解的用户了解网站并产生兴趣,最终促成用户使用.
; D4 b T/ ^) h3 w; C( P7 n% \0 W" }8 F& ?% x7 X$ H" ]; C
2. 让有兴趣的用户尽快开始使用., ?% ~$ q/ r# m% Z% e3 }
$ L B( `2 W/ ~# K/ J1 r( ~
首页的设计7 M4 u' B3 U3 G; x" q8 k0 C# w( K
, X% k; w1 F' o/ ]# e 在实际工作中我们会碰到几种不同类型的工具型网站,针对其网站内容的不同,其首页的表现形式也大不一样.2 t1 ^( h: E m
+ H. s& Y: I) x# O% s. P
集中应用型3 n# z0 N8 s6 X e3 M2 m9 {
9 K1 z* }: l. s$ q 这类网站本质上是一组或者多组web app,功能多且相对简单,不会产生大量用户数据.
1 j6 ~; L# h8 U3 F( h3 _
4 q7 n0 q4 A' H; D2 ? 1. 核心结构) z6 E$ O9 V) g n; l0 l
6 g+ W4 l9 v( E/ c: C
将使用最多的功能展示在首页对于用户来说就是最快的入口.用户通过logo、 banner、网站声明等了解网站性质,然后就是找到自己要的功能." j+ L1 p" K/ w$ i8 k
6 _* Y8 w1 `9 \# h+ B
2. 注册/登录模块" ? c! o( b" @$ ?
: R/ I- s2 X# Y( Y4 Q( \ 因为用户不想分散精力去记起用户名和密码,或者是他们太专注在自己要做的事情上,原则上只在必要时才让用户登录.但如果大部分功能都需要先登录,那么在首页直接展示登录表单是有必要的.
5 I$ p/ M0 }0 ?. |
% S6 \. e! l& b l. @; w 3. 案例" x N2 i6 W3 f) a! I+ O) m6 o( X
2 r/ w3 s' O5 A; s* l 58同城
) {8 K1 i: B9 ?" s$ o+ v& s) B" w, a4 l7 u, e
有两级目录:城市目录、功能目录.用户通过这两级目录很容易找到想要的功能.但使用这些功能大都不用注册,所以首页并没有明显的登录模块.
3 L! T* q: E/ M( t& A
: _2 J9 H% D3 {: r 腾讯充值中心! b! K) S0 u- S6 K9 J: C
. ]2 |$ r# ~* p+ V1 ?8 Y' H 首页的核心模块依旧在目录结构,用户由此了解网站主要业务以及如何开始自己的任务./ ?4 K) ]5 f1 t+ v+ ~6 s
6 D1 S; @: o% w6 @2 h 去除一些运营性需求,可以得到一个更加纯粹的充值网站:
0 [5 B3 j, S' o* i7 |- ~4 @4 V4 |% M1 N
数据管理型
$ r! W' q% w0 Y# m5 }( o: K5 o9 e! Z# I' D; P9 m9 W9 r
这类网站本质上一个大的web app.功能流程复杂,会产生大量数据,往往承载了强大的数据管理功能.7 H/ L& f) l1 e5 x( ], Y
6 \1 F* Y5 _. u
核心框架3 H9 I7 O0 |$ ]8 u, p3 A& R" ?
0 K( K" x! j4 R$ r/ }4 G6 A* { 为了方便用户掌控及管理自己创建的内容,首页的策略一般会先引导用户创建账户或下载客户端(下载客户端的下一步也是注册),然后再开始任务.为了说服用户开始任务,它一般会包括以下几个模块:. H# V# d- F" K
) A: g- |9 g) {2 m 价值声明:说明网站提供的功能及意义,快速打消访问者疑虑.
) t+ d: ]. Y" Z+ Q. q& p# ?# P+ f# k5 \3 s. k* d8 c- a
投入产出:告诉用户能得到什么,使访问者对产品的使用有预期,并建立信心.. I6 ]. I, L) c1 [7 t0 g0 r; L
: |: `. S1 n. y* `* M
视频介绍:让用户快速全面地了解网站.; @- x. d) c0 B" t: z
, T- n* B! {& t. S 权威推荐/典型用户:让用户产生同理心,增强对产品的信赖.$ L6 ?1 V* S2 U+ k. |( Z% u6 G% ?6 A
7 K( n! o, b6 q- t 行动号召:当访问者产生兴趣时,适时地让他们开始使用.! ?2 I9 G7 H" |0 R/ }! b3 q
7 _( o- c. p1 ^& ^( f9 i 这些模块其实分三个等级层层深入地说服用户使用产品:
$ d* A9 S$ ?5 o* T
: B$ y$ i0 n9 ]0 v, t5 {5 W; ?+ x 尽管列出了这些模块,但实际情况中并不都必要,最终得看用户对产品的信心.evernote在等级一就能说服用户,dropbox的页面则只有一个视频介绍.
! I" P, u/ x* }
& B9 E x# S' b1 J6 |, e 1. 注册/登录模块2 l/ Q' e$ k* M" Q3 K3 u1 y
0 x7 d! I1 z }! S4 D$ m
这类网站注册和登录模块都非常重要,一方面已注册用户数一般远远大于新用户数,另一方面首页很大一部分程度是为了注册的,老用户有固定的入口即可.但在首页我们需要强调哪一个?
9 B( Y0 l, D, E) r5 j9 J0 P, O. S' y* D6 N/ _
这个问题更多地取决于产品的商业目标.受产品策略的影响,同样是拥有大量已注册用户且用户登录频繁的产品,gmail的首页强调登录,而facebook的首页则强调注册.我们也看到115网盘和华为网盘的首页明显就不同: I6 n- j* n! c. T
}" d8 l9 v( S9 e 但无论如何,登录模块最好不要跳转页面,否则会增加老用户的操作成本.
* R! H* N- ?8 I/ w; R w" K3 W8 J, l3 F" l9 {- C* e Z
2. 案例
$ j# K. w! l2 n. ^/ [9 s! ~
8 f2 e. t y) ?3 k* x9 Z* ? mailchimp
: \& \6 G0 K, l' _
; ~ Q8 T# N6 P 首页包含价值声明、投入产出、视频介绍、典型用户、行动号召等模块,极力说服用户开始使用产品.. _* T* _/ g3 t/ z' k
8 r+ |7 Y$ l" L1 K
独立操作型
: ?/ a. D1 U# `) W, w" g# O% V7 [ S z, H% s, {* [
这类网站往往是一个几步就能完成任务的小型web app." p" \5 \. L& x" }3 s9 V, i) a
" V9 X* U7 p; A$ c' h
1. 核心框架
5 }" X! }/ U' B& t3 _+ A: s
% t1 G% v" v* j0 c 往往只有几个简单的控件和操作说明就能完成任务.由于使用成本不高,用户也会很乐于尝试使用.
2 e0 `* X- u+ _0 G+ a- y' V
) g4 o7 e* r# {8 m9 I" E: J# p 2. 注册/登录$ Q# f# {* I6 u" y+ Q! e
2 l5 s& X/ S X. n. H6 p6 L
这类网站一般不需要注册或是简单的注册,也可以将注册需要的内容贯穿在任务操作中从而摒弃注册模块.
3 F9 g8 D$ U4 C! \6 M! G
2 }6 \. |( n0 q9 V: z 3. 案例
; i/ e- K# t% Q5 V! f& b6 j( b' o- e0 n
minus% T4 y* `' U" W" U4 @' r
7 l1 t, v0 ?) z" Q$ H/ `, B 用户进入页面后能很快理解这是个分享类网站,只要将图片拖入到网页中并填写资料即可开始使用.
/ y( U- m z( u# i
/ k5 j' Q; K2 R5 k7 F6 Q senduit
9 o! j; g$ ~8 W2 r7 S, c& r! E! b# }4 u0 M; @8 {6 W# \8 F8 z$ t
简单的步骤指引告诉用户网站的功能和操作方式,使用时无需注册.
1 l, [2 U9 D2 E( C' \
9 E+ s8 C7 t5 m' j* v$ Q 结语3 m% X2 X# ]* i7 j+ O' I& p) ^
) [) H7 B$ [' q; Q5 v
网站的首页需要回答用户一些非常重要的问题,才能让新用户愿意使用我们的产品.
8 ]* H+ m% C( K& Y) P8 F5 v2 |: u3 L8 H* z4 H
本文主要探讨了工具类网站首页的设计目标以及三种设计框架.而在实际项目中还需对更具体的场景进行分析、考虑运营性的需求、对单个模块的交互进行推敲,最终才能得到一个能吸引用户、留住用户的有效首页.
5 \' d5 d% D! s! @$ o/ ?" n/ I' V' x- q* U2 S( G8 |
(本文出自tencent cdc blog,转载时请注明出处)+ ^( E- s2 ~% x; ^: n
" [4 K7 s6 N$ R( ]$ K" b Q0 i5 a7 K$ [1 r" `' T' }
 该贴已经同步到TONY的微博 |
