什么是工具型网站; i% y4 B# `; c" V
5 D8 \9 L: i8 ~' G. |
我们先从wikipedia上了解三组概念:
, T8 |" ?8 |. V/ i
. \$ u9 F6 q2 T, @& V 工具:是指能够方便人们完成工作的器具.
$ `- v2 F% p5 U. ~; j* P) f6 D- B0 m2 k, d, C1 d
application:用来帮助用户完成某个单独的或是一组相关的工作的计算机软件.
$ l* B! T$ i+ `) D) X, e" E
3 [# A" r% V& X: C0 B# r1 f1 P web application:指通过使用web和web浏览器技术,跨越网络完成一个或多个任务的应用程序,通常需要使用web浏览器.
: {6 I( B! z s4 ^+ o
* k; T- [1 B8 @1 F- {4 n 由此可见,应用就是计算机领域的工具,工具型网站可定义为承载了一个或多个网页应用的网站.它专注于让用户完成一系列的任务,如注册、支付等.
' I$ R5 [ v' m! [" I' x( o* s3 q. ]
首页的用户需求* s: V& \( ^8 k+ S7 G! I O7 ]" Q
9 X2 u; F. ~" E# [& k
首页的用户大体说来可分为三类:不了解的新用户、有兴趣的新用户、老用户.- R. |( k7 a" X9 r% X$ r
' |6 H2 f W3 W) [1 s+ s 对于新用户而言,他们势必会问到这些问题:
1 s h0 `8 [5 A5 v( ^ `
; F! F% ^ G+ [% j5 q" H 我在这能做些什么?. Z5 B0 y7 R# i9 N6 y' i/ s8 r
; i" s" k1 E8 w5 }. V; L
这个网站能提供哪些对我很重要的东西?& M5 T7 y- _- l$ u
. ?6 j* @- E. c
对于已经有兴趣的用户也会有些其他的疑问: ?6 K" _5 i4 G0 g( l8 ^
6 @* n0 V7 Z, x u8 R
我应该怎么开始?
p. Q+ M: ~" ?- ~. _' m) G k! H% D+ W3 ~% q. X { `9 h/ n5 o
我是否必须注册?如果是,应该怎样注册?
# c% K: S: ]" {8 [1 t: y9 t2 g) O7 y( T# l# H7 m1 }" M
总得来说,首页应该解答新用户的疑惑并且帮助他们找到功能的入口;而对于老用户,则需要更明显、快捷的登录入口.- M- w( r* Z9 n, K" j/ J5 j
) H8 e% H; s& h1 G# Z4 D4 T 首页的目标
. i% w9 M) [8 ?/ S# c5 T$ G9 B& z# c, x% H0 Q* T: t. Y; S2 }! y; q
《designing for the social web》一书将用户的使用分为几个步骤:不了解--感兴趣--第一次使用--常规使用--有情感.而首页对于前面三个步骤至关重要!
& w, I V& a+ W2 v+ l
: g/ a: E1 x' b0 A: ^ 这样看来,首页有两个目标:
& L% Y9 U4 R. i3 `* H+ K7 I
- T' E+ D. X, t4 j% x, V( \3 f: L 1. 让不了解的用户了解网站并产生兴趣,最终促成用户使用.0 Y* c4 |9 U, Y8 T* x' `
K* A g/ m8 l# [9 _/ A 2. 让有兴趣的用户尽快开始使用.3 \5 P3 B6 ]. ~: f+ W6 j/ G3 e
) U/ g: f5 ?2 T6 l& B8 N
首页的设计, b' {2 \' d" b3 Z1 G1 q
/ D/ w- o% u: `
在实际工作中我们会碰到几种不同类型的工具型网站,针对其网站内容的不同,其首页的表现形式也大不一样.0 ?7 C* l2 L" \
5 A/ w; |0 Y1 n7 `9 V 集中应用型
7 w' z+ I$ q( v6 K. F) S6 q
9 A6 V8 j7 d1 G& z. E+ B3 M 这类网站本质上是一组或者多组web app,功能多且相对简单,不会产生大量用户数据.9 j$ R& a6 r1 ]. R! A% r) M! S4 ~
" [: ?9 ^ u# q; `( U 1. 核心结构
! `7 u; o+ @, l, ]+ p9 ^: L$ B+ K2 R# r! Z
将使用最多的功能展示在首页对于用户来说就是最快的入口.用户通过logo、 banner、网站声明等了解网站性质,然后就是找到自己要的功能.$ _+ Q# n$ F, |( g
* g0 t4 \$ O6 T6 v 2. 注册/登录模块/ Y- P# ~: g( i, i) a, Y
+ ?3 b" C k7 U2 u/ W( Z) i( y6 p& w" F$ i 因为用户不想分散精力去记起用户名和密码,或者是他们太专注在自己要做的事情上,原则上只在必要时才让用户登录.但如果大部分功能都需要先登录,那么在首页直接展示登录表单是有必要的.
1 d6 _0 d" ?( m' [) o
) p+ v7 O3 V- a& D% { 3. 案例
+ X! O% f b3 z0 ]8 [ {) l3 d/ e# C# I) H' n9 R- L
58同城$ u# I: ]: S& o$ Q( X C
; s- C* u. X" N 有两级目录:城市目录、功能目录.用户通过这两级目录很容易找到想要的功能.但使用这些功能大都不用注册,所以首页并没有明显的登录模块.: E% q ^# E) h# l# V1 r: Z5 P" n
" R5 u4 W( `9 T; V& o 腾讯充值中心
8 U( _3 A- a9 f- g4 i, V4 @: F: }# L2 ~' a( k J) }$ y5 j+ Y9 E
首页的核心模块依旧在目录结构,用户由此了解网站主要业务以及如何开始自己的任务.
* S/ R: ~) A% z5 ^7 ]" L# ?. ^+ [9 z. d' r$ o. t6 ^, L1 H
去除一些运营性需求,可以得到一个更加纯粹的充值网站:! T2 d" s* k6 N
1 M: `+ B. J2 b, L7 h' r" E# z
数据管理型
2 Q3 D- h; Z. n" s$ p
+ @- h) t9 P: ]8 M: M8 D 这类网站本质上一个大的web app.功能流程复杂,会产生大量数据,往往承载了强大的数据管理功能.
9 H. v" X$ F o3 S& M# J6 a
" S: P0 o* x2 y0 V! Y- i' Y" F. y 核心框架
. f0 @; K1 P' Q) O- V2 Z/ U; o
# `! Y# `- b, K% [" P( A 为了方便用户掌控及管理自己创建的内容,首页的策略一般会先引导用户创建账户或下载客户端(下载客户端的下一步也是注册),然后再开始任务.为了说服用户开始任务,它一般会包括以下几个模块:: C9 n7 }" f O9 ?4 p$ p
8 A9 b- U6 h8 G+ ~; X. m4 V
价值声明:说明网站提供的功能及意义,快速打消访问者疑虑.
$ L: p( W7 W, d1 c) I; q0 g4 ^* o. j. Y# i8 A- Y
投入产出:告诉用户能得到什么,使访问者对产品的使用有预期,并建立信心.) g1 [1 B9 |* W) c- q4 B
" {. G# [0 n8 W" t: Y* Z* |2 l 视频介绍:让用户快速全面地了解网站.
# {+ Y0 P L8 V' G j" g D; x- O4 ~: i. j
权威推荐/典型用户:让用户产生同理心,增强对产品的信赖.' g1 `( j4 x# T* E8 ?% l1 t% U
6 c8 |1 Y a7 e" a 行动号召:当访问者产生兴趣时,适时地让他们开始使用.
: k3 h! X% x# F
% h$ u$ q3 C. ?: ~# C3 W$ z 这些模块其实分三个等级层层深入地说服用户使用产品:0 g( m3 i- J1 h# B8 @/ G
/ O# k3 b* P) |# o8 z6 M
尽管列出了这些模块,但实际情况中并不都必要,最终得看用户对产品的信心.evernote在等级一就能说服用户,dropbox的页面则只有一个视频介绍.
3 B$ E: c0 V6 j( q: l3 h1 ?- u# o4 q+ ?, _6 V8 K
1. 注册/登录模块 s% B8 a5 J+ h# u
3 S# T" m q" C% C2 F' c3 k
这类网站注册和登录模块都非常重要,一方面已注册用户数一般远远大于新用户数,另一方面首页很大一部分程度是为了注册的,老用户有固定的入口即可.但在首页我们需要强调哪一个?
" E+ @9 l/ A0 S; v( M, n! h. z; @
: o2 x$ U# i8 h! B 这个问题更多地取决于产品的商业目标.受产品策略的影响,同样是拥有大量已注册用户且用户登录频繁的产品,gmail的首页强调登录,而facebook的首页则强调注册.我们也看到115网盘和华为网盘的首页明显就不同:" e4 E, {4 N" L$ d5 ?4 Z" [
/ L4 z9 B( \ D0 @' \ 但无论如何,登录模块最好不要跳转页面,否则会增加老用户的操作成本.9 Z. `+ S+ n) w% v1 x+ f/ r
& M8 U0 \6 C: b `
2. 案例8 B: G1 [. }1 b4 e2 d% o% v
8 n( I' j) F5 n& ^- d
mailchimp1 W# c! n( Q: h
3 _, p6 h( F% {5 L" O 首页包含价值声明、投入产出、视频介绍、典型用户、行动号召等模块,极力说服用户开始使用产品.4 ?7 v) l6 t6 x3 O4 R
% f$ c) ~0 m3 t y' I2 o$ R 独立操作型
7 Z3 ^4 n$ J% L+ r& P1 q1 S9 J0 _6 s: k ~9 x/ U* ~( k1 S
这类网站往往是一个几步就能完成任务的小型web app.
+ H$ G3 K) q8 `! q
2 H d; ]& l7 l4 W+ G 1. 核心框架
; n' X( p) }' u( j
+ X" y' Y5 ^3 f. y* m9 j7 { 往往只有几个简单的控件和操作说明就能完成任务.由于使用成本不高,用户也会很乐于尝试使用.
* X# K2 G2 _& H8 o) i- ?6 [- b; e: } _0 W* j3 p' @# |
2. 注册/登录
M- x2 q* h9 }
) q1 l" q; P! v, A/ j 这类网站一般不需要注册或是简单的注册,也可以将注册需要的内容贯穿在任务操作中从而摒弃注册模块.
, @" U/ }* Q) O, L! p5 t2 L0 s! M) M) W
3. 案例5 h& _8 ~& F$ F% B' a" M
! j6 ?0 H, |$ q5 }4 t
minus' q! ^1 W+ Z" Z5 S) ]( W
0 t3 S( _4 d: @3 h1 w& g3 w+ e& j
用户进入页面后能很快理解这是个分享类网站,只要将图片拖入到网页中并填写资料即可开始使用.
8 c' Z$ b6 |1 [. y/ B2 B5 o9 B4 f) N* u! n) e$ ~. q; u! v
senduit* g/ q( l" S4 V" T( r9 F
1 q0 A7 S, ?# t2 e" D. A
简单的步骤指引告诉用户网站的功能和操作方式,使用时无需注册.3 R% H& z5 F" ^# l! x: K; @; O
( H; x! s/ m1 A$ A$ G- R 结语: c, e4 f( n* u$ H' ^0 i; _
8 L4 f/ w$ u# T+ v9 L 网站的首页需要回答用户一些非常重要的问题,才能让新用户愿意使用我们的产品.: j4 N5 Y3 J' i
" S7 @# R6 g3 X1 d7 e) J 本文主要探讨了工具类网站首页的设计目标以及三种设计框架.而在实际项目中还需对更具体的场景进行分析、考虑运营性的需求、对单个模块的交互进行推敲,最终才能得到一个能吸引用户、留住用户的有效首页.
7 m# W; N& h; |3 I B# |" t4 U1 \! v+ E. E p
(本文出自tencent cdc blog,转载时请注明出处)6 p9 @# N7 `+ u% O) ^5 d' n
( H I- u. b" t1 O1 E0 C9 z
$ n h, M- t* d5 I( H& I  该贴已经同步到TONY的微博 |
