什么是工具型网站: X, `/ G5 Q" ~; S
2 Y) Z/ o1 _! i 我们先从wikipedia上了解三组概念:
3 d6 Q: t+ C& s
" p7 g0 D4 y7 @' H4 e 工具:是指能够方便人们完成工作的器具.1 I4 Q& H' {( u
; ]" Y, a A2 P5 j1 [2 M8 W, B
application:用来帮助用户完成某个单独的或是一组相关的工作的计算机软件.
4 |1 {* ~' x0 m2 J0 N) k% A, M: P! W% ~
web application:指通过使用web和web浏览器技术,跨越网络完成一个或多个任务的应用程序,通常需要使用web浏览器.
" a" y& ^: F: d8 _$ g4 f6 b- Z# g- `5 ?' [! E4 S! |/ g/ e
由此可见,应用就是计算机领域的工具,工具型网站可定义为承载了一个或多个网页应用的网站.它专注于让用户完成一系列的任务,如注册、支付等.; S/ ^0 G6 J6 T- F- t# i
( w, A8 {& d9 v. v; w' ` 首页的用户需求) h& v% L1 V7 P+ I4 Z/ W
& ?; T, H2 L# u" ^5 Z j
首页的用户大体说来可分为三类:不了解的新用户、有兴趣的新用户、老用户.
, [$ v$ x' E6 ?, S3 p
+ U6 ^' q2 C& M; V: X) v! ?) s( J 对于新用户而言,他们势必会问到这些问题:) c* @6 d1 k: b q! Q
. d" W0 x S: b4 E9 u 我在这能做些什么?
+ D* }+ z3 L# w0 N1 I1 u( I1 Z' I/ N0 K
这个网站能提供哪些对我很重要的东西?
+ P- p( ~& V/ c$ R" D8 u9 h! n* S0 d8 V h
对于已经有兴趣的用户也会有些其他的疑问: B# }; q9 h1 l
+ g6 {! {- C7 g% B5 s8 y 我应该怎么开始?
0 v- U; d6 ]; y$ s) q6 x7 q8 d! K R
我是否必须注册?如果是,应该怎样注册?4 M9 A3 H6 l1 V9 o! A2 |( b
$ P K2 Z* L: H! ?, v# a% I! v9 O 总得来说,首页应该解答新用户的疑惑并且帮助他们找到功能的入口;而对于老用户,则需要更明显、快捷的登录入口.
8 P6 R2 b5 X9 |* R
. u# }" e8 O( Y k( { l( {+ V/ ] 首页的目标
8 S; k/ M+ d! [7 b- p% t
8 h, C" v8 v: H7 r; N& D& Y5 A 《designing for the social web》一书将用户的使用分为几个步骤:不了解--感兴趣--第一次使用--常规使用--有情感.而首页对于前面三个步骤至关重要!
1 |& J B6 A& `6 f9 D, E/ h, C6 j$ P) I! j) A; P
这样看来,首页有两个目标:
+ g) T; m: i( `1 ]# ^! F( z5 C" ?1 K; p6 M
1. 让不了解的用户了解网站并产生兴趣,最终促成用户使用.
( |0 ~+ d( _+ r: E
! z. `8 N1 n& v% A4 s 2. 让有兴趣的用户尽快开始使用.. D) F- A4 W3 a+ I
2 R1 ?4 R7 w: l: u. z
首页的设计! f4 |$ E* I4 R. k
; F7 A- N. g- ^+ e
在实际工作中我们会碰到几种不同类型的工具型网站,针对其网站内容的不同,其首页的表现形式也大不一样.
8 @6 F, w" X& \8 S7 P/ t4 I8 A0 h0 q; @7 v1 y
集中应用型! |( L/ f/ v- @& [9 ?5 Q* B8 w
" M% z1 O7 _ g# ^ 这类网站本质上是一组或者多组web app,功能多且相对简单,不会产生大量用户数据.
9 f+ [- @( ^: F- {- P. k+ c4 E/ t% D ?" v% \8 ~
1. 核心结构) s* L" p! h! Y' D5 I; v( r
1 k: y/ g1 W9 r5 O8 z
将使用最多的功能展示在首页对于用户来说就是最快的入口.用户通过logo、 banner、网站声明等了解网站性质,然后就是找到自己要的功能.
" @. E: |( Q) \ I1 \* T/ x& x! Y
W {- _: \- x8 d3 y 2. 注册/登录模块# G1 B+ B0 H5 X% N6 m! P5 [3 o$ {
! F: ]' H0 n q# L- N8 Z 因为用户不想分散精力去记起用户名和密码,或者是他们太专注在自己要做的事情上,原则上只在必要时才让用户登录.但如果大部分功能都需要先登录,那么在首页直接展示登录表单是有必要的.
$ p* {7 _3 _& V9 a/ \" v A/ s4 @
; X/ A: L& \! F 3. 案例/ ?5 _4 H# _" ~
! k& S4 ]6 s' {7 ]: q+ @* z4 m3 Q
58同城+ i b2 F4 k3 H9 ^8 ^
# E2 a* s N6 ] 有两级目录:城市目录、功能目录.用户通过这两级目录很容易找到想要的功能.但使用这些功能大都不用注册,所以首页并没有明显的登录模块.! |' t0 M* r* s
: l) i$ [+ P6 w; Z1 _4 E; ? 腾讯充值中心
! v Y! s# `4 h+ K
8 Q6 ]# C* ]7 n4 \3 M6 r 首页的核心模块依旧在目录结构,用户由此了解网站主要业务以及如何开始自己的任务.# g& |7 H( ?$ ~0 T s
/ k8 z7 b' T7 y( J( K 去除一些运营性需求,可以得到一个更加纯粹的充值网站:2 @( L# V2 g# G9 z
# k6 v4 b+ b5 g' M! }+ g3 n
数据管理型* g9 v/ \% u6 ^% X
4 T& C+ B& X( D 这类网站本质上一个大的web app.功能流程复杂,会产生大量数据,往往承载了强大的数据管理功能.* k. `4 v' i. T9 o; g% a5 S
& ~1 @0 k3 P& | 核心框架6 r5 c0 h( N" b+ h2 U
8 r3 M7 s; \4 R5 |+ M 为了方便用户掌控及管理自己创建的内容,首页的策略一般会先引导用户创建账户或下载客户端(下载客户端的下一步也是注册),然后再开始任务.为了说服用户开始任务,它一般会包括以下几个模块:
7 D5 T# m/ F3 ^; T& S) c" Y# h( F. I- @
价值声明:说明网站提供的功能及意义,快速打消访问者疑虑.4 C, _% o# \6 E
; g) { z" K' C9 R
投入产出:告诉用户能得到什么,使访问者对产品的使用有预期,并建立信心.
) Q& d7 Q7 r+ D- |/ k$ W9 U! e9 a2 U6 S- `4 `$ J
视频介绍:让用户快速全面地了解网站.. G; Y# `% I1 M
7 j" k, a5 d E7 V* C; x4 u3 f 权威推荐/典型用户:让用户产生同理心,增强对产品的信赖. v. h3 w. N2 m( l4 e4 t
( X* B/ ^9 n7 }& B! d8 b
行动号召:当访问者产生兴趣时,适时地让他们开始使用.* A* w: b$ [" N2 V
# f$ Q: A/ J& d( ~! }
这些模块其实分三个等级层层深入地说服用户使用产品:
% b# w; Q3 b% e( L( o% b3 T6 P% A) x+ h; e. K; ~. }/ F8 n
尽管列出了这些模块,但实际情况中并不都必要,最终得看用户对产品的信心.evernote在等级一就能说服用户,dropbox的页面则只有一个视频介绍.
6 k# {# y0 n8 s4 U" V
7 L) `1 b1 h, T1 J& } 1. 注册/登录模块
- T2 J8 J% \6 z3 Q/ |/ n, O1 T U* V& l- v m- |
这类网站注册和登录模块都非常重要,一方面已注册用户数一般远远大于新用户数,另一方面首页很大一部分程度是为了注册的,老用户有固定的入口即可.但在首页我们需要强调哪一个?0 C! ~& K. C# {+ d8 ?7 B
) z! N% v3 k v9 s! { 这个问题更多地取决于产品的商业目标.受产品策略的影响,同样是拥有大量已注册用户且用户登录频繁的产品,gmail的首页强调登录,而facebook的首页则强调注册.我们也看到115网盘和华为网盘的首页明显就不同:
8 o7 w! }, d9 e7 z+ w& j6 ~; z5 p. t$ @9 T0 k/ L8 N' ]' q
但无论如何,登录模块最好不要跳转页面,否则会增加老用户的操作成本.3 R6 h# }6 e4 `- |; N
[' I4 t0 z" @ 2. 案例% Z( p& ?& Q2 p) o# Z9 A/ n
! o2 a/ B$ s1 z4 Z4 K* r
mailchimp
, j/ s% q, H, J W2 @1 ]- P W. @ ]# `3 a2 R( m( l
首页包含价值声明、投入产出、视频介绍、典型用户、行动号召等模块,极力说服用户开始使用产品.; h/ V8 ~' ~1 W9 L: u/ ^/ K
! x/ D; `8 f2 N" u* E
独立操作型
7 E$ U! N3 }. V6 b! S) g0 ?/ f$ r
这类网站往往是一个几步就能完成任务的小型web app.' s/ f& {6 D3 H: L$ ^ @
+ |7 g6 N! k+ m2 V, e7 S* x; l: m
1. 核心框架5 a9 u" C* c" P/ c5 `: P1 a
& A* J" y5 B6 o& h0 g
往往只有几个简单的控件和操作说明就能完成任务.由于使用成本不高,用户也会很乐于尝试使用.
/ T& J! R: @' c% y# }. M6 `7 V% i) A) z7 X8 L' S& E: I7 E
2. 注册/登录
$ m! `' V; |: i
/ h4 P+ V! }& m) y# J9 W% ~ 这类网站一般不需要注册或是简单的注册,也可以将注册需要的内容贯穿在任务操作中从而摒弃注册模块.
" A1 m* J: y. Q. C# _7 W2 O0 b# b9 {7 L6 I8 p# e. Y
3. 案例$ y7 _0 {% U# S1 X) y
3 N. P8 {3 X6 P1 w- l/ p minus/ v, F( f3 \# O! V! y' c) y
3 p+ S5 o3 W. }8 O- o7 M
用户进入页面后能很快理解这是个分享类网站,只要将图片拖入到网页中并填写资料即可开始使用.$ Y' `6 _+ r; N6 b* k/ L7 E
d' _- t2 X4 A' J
senduit
( Y; w4 v4 V# @# [
( G7 @: {5 k1 e* u 简单的步骤指引告诉用户网站的功能和操作方式,使用时无需注册.
# a8 {8 Q2 A: M; P c, W
/ Z, W; J6 o5 }0 a# d 结语' w3 s, j* p$ f- {
% g" K1 t' r1 }2 n, c- E 网站的首页需要回答用户一些非常重要的问题,才能让新用户愿意使用我们的产品.
$ u- y0 X! h% ^) L
+ m$ |" v% j* N3 M- l: L 本文主要探讨了工具类网站首页的设计目标以及三种设计框架.而在实际项目中还需对更具体的场景进行分析、考虑运营性的需求、对单个模块的交互进行推敲,最终才能得到一个能吸引用户、留住用户的有效首页.
' v) }' Z+ O. f6 _& G* R
. a9 y. u0 Z) B4 Z+ S0 |/ U( B (本文出自tencent cdc blog,转载时请注明出处)$ h/ r6 L" j/ ~2 C3 p$ U/ L4 i5 t
* ~' p& q3 A* [( V2 |! k# `" d: e3 X
- V/ p5 l0 ~( n0 X  该贴已经同步到TONY的微博 |
