产品经理说：给它加上这个，这个，还有这个。设计师无奈摊手：就巴掌那么大的地方，怎么可能把这么多功能一股脑塞进去？这就考验到设计师的界面隐藏功夫了，特别是信息过载的今天，这个完全是必备技，今天腾讯的 Viconia 同学分享了他的隐藏技能总结，从入门到必杀都有，来学习吧！网页设计说明
( k0 f) _: x+ z& @5 W o e1 V. A
1 s; X2 |$ G) t" f! m' x一句话总结：你刚好不经意地出现，而这正是隐藏的意义。网页设计图片
) \2 R) \( ?2 z4 K( Q
, S& e) f0 L7 x4 A* U设计师必杀技能抠图神器推荐！《PS抠图神器：KnockOut 2.0汉化版下载及教程》) h7 h" q( X' t1 [
- {; X7 E- W$ R2 D3 [5 d
在这个信息爆炸的社会里，信息过载已成为常态，为了提升用户使用效率，处理界面的信息层次是每个设计师都要面对的重要一课。这篇短文想聚焦的话题是界面中的“隐藏”。在界面设计中，隐藏不是为了和用户**，而是为了让用户更好地聚焦在重要内容上，降低界面信噪比，提升信息传达效率。最新网页设计2 H& P! g4 Z& x
- f3 W5 p }- [7 G8 S$ o, w6 B5 x笔者以前经常玩的D&D，非常喜欢其中的盗贼（Rogue）角色，潜行在黑暗中，伺机致命一击。一个好的隐藏设计，是否也能和盗贼的背刺一样给力呢？我们先来看看隐藏的技能发动条件。怎么学好网页设计" T7 I A) l2 D) }/ o9 a
1 l/ V2 C/ E) K# G
其实这项技能的领域很宽，在固定和特定的情况下都能施展拳脚。首先看看在固定情况下的运用吧。固定包括两种：不常变设置和引向外部目标。网页如何设计; X- k, A( a# S
}) a) w1 ]8 ?$ i& R* c p: v一、不常变的设置：$ ~* z! J1 ^) p; ?0 Z- S; t
( N" o( C J8 @, r' @
固定不变的位置或功能，在相对不重要、操作频率不高或一次性设置时，合理组织信息后就能隐藏了。: b* W/ U6 J) K7 ?! P
" {. }' Y' {8 s如ebay或apple的账户信息、个人任务等都可以归属在固定模块“My eBay”下：
8 D$ G/ ?$ V; S
/ K0 c. q1 m" W) _# w) Q( c7 F/ ]
7 n$ ?: S- l: q2 c$ D! J) }/ X0 s4 h$ q" q
! P$ I& o- c# ]
amazon那从a到z 丰富的类目导航，被隐藏在左侧logo下方。全站它都在老地方静候展示的时机：8 H7 g+ O6 n) T
; U# f2 G+ Y( F4 J* P" R7 I- y( C6 \& s& w$ D6 `
& f- B0 K6 B$ q0 X6 {, P
, c% f; }! @$ D. b7 z+ P( [& I9 q
整站的固定位置始终能找到它，隐藏既保持认知一致，也节约了空间：
7 w4 L' g) M. u7 w6 x9 Z. i- i3 I8 B- j5 w* F" [* P: g
) N& n2 R2 b$ k1 V7 e# ]+ O7 g1 ~3 n3 b6 T4 G/ Q
% b- d4 D3 t4 K* g3 I) p
二、指向外部目标
P$ ~+ ?- b4 O. U+ k5 M6 n+ ~2 o) k7 T, t
这种隐藏多考虑到外部分享平台数量多、常有变动增减，全部展示，界面设计更复杂；不常变的设置是绝对固定，指向外部目标是相对固定。网页设计课程
6 T' Q& ?5 Z v, S- o" F& B1 T1 Y% w
新浪微博的和豆瓣电台的点点点中，都隐藏了各种外部分享渠道：; J* e$ r3 f( ~8 m% J2 |" S$ Y
* {" \ I7 o/ w0 _
' o, F$ q& s3 a- j* A' p
* x" B' U. P+ }3 X0 o+ B1 g1 {$ e
* O; z+ U4 y8 q目前为止，前面提的隐藏都是隐藏次要信息。难道rogue的本事就这点？别急，接着要说的特定情况下，“隐藏” 将一改绿叶角色，展示进阶技能。像一个高级rogue，只在该出场时亮相，漂亮的出手背刺甚至打出爆击，将隐藏技发挥致极。网页设计学习吧
?+ g% F2 ?' o v
8 ~- a) z. e. Q2 n% d" c在特定的阅读场景下，适时地提示了chrome插件的隐藏选词翻译：' O6 k. v0 g1 o i
0 a$ W1 C9 F% p
- k K; a) {2 Y% e
# e& F7 |. x7 M) V) B# |. N# ?: v6 J, n# I7 U
Apple官网注册ID，逐字段填写时，输入框会适时弹出tips来提示用户，符合要求的Apple ID包含这三项内容：
% A9 l5 `' Y; g6 }+ L; m0 s4 v( L0 S% Y2 C
2 l. W+ h4 {0 ]; z _ E
% E9 \& z1 d5 }8 W
! M3 |5 ~; f' d8 \: m5 b" d0 S
根据输入过程中的具体情况提示问题点、待完成或特殊要求，都是针对性的提示，根据目标现状出手，是成功rogue必备的素质。适时地提示隐藏的信息，大幅提升表单填写效率：
# D. N- Y# T+ H* C9 s: A- n% V& F
- t* K5 U0 \: ^2 m) g. L( ?$ A+ X& j' X7 z
1 F0 b8 S# ^$ ~3 K' Y' X5 E' H& n. L- \5 ]
针对进阶技能rogue还有一套精准背刺技巧：做好完全隐藏适时提示，其实也容易：给轻量化的线索或提示，寻求进阶技请看过来：. }1 b+ }/ C$ w) G
0 h A4 Z" ]2 B7 c5 S3 h! z: `7 U一、细微处——优雅\恰好的提示
, g, A& w: D* n8 j
: ?5 L0 E9 P# F% V既然隐藏，如果提示过强、大或显，就违背了隐藏的初衷，显得技拙，轻一点才不打扰到用户的任务进程，所以提示要细微，要适当。学好网页设计要多久
! h: l! S' O3 i8 G' N r7 B& ?7 k3 ]. F- V3 c% r
众所周知的PS工具栏右下的小三角，就优雅地邀请用户在使用中根据需要探索更多功能：& c/ B( @7 E' D% ~8 W
- P: l# v( c/ X, r! u0 n
, A$ Q, {4 W) |8 h* a
( p& h A* _! z! O4 P2 _. }1 x: {$ @; P! j) U
二、渐进的提示3 W& J0 L8 O4 m) V4 q
" \8 p9 r: @, O3 `: @5 k
配合任务操作进程，为用户逐步揭开隐藏的面纱，才是有效的提示。网页设计$ O; n4 R; P+ M- }
E8 j2 U7 k0 Z, l6 m
在Pinterest右上角message弹框输入前，很轻量的视觉提示：To后请输入字符；随着输入动作，出现下一步选择用什么渠道发送的提示：
) L4 {7 [: V6 V6 V' R( {1 t8 D* B$ D7 B! S0 _6 C
$ r; v# T- n" q9 M- J2 K' z
% R1 u t, z3 M
) ~5 V0 ]/ v4 u5 ~+ _' m. N* |
之前apple.com 注册即时校验提示，也是渐进提示的有效应用。网页设计需要学什么
# X0 f1 ?3 t; z- W' `- L+ ^: X4 u) ?+ e n
三、扫视/泛读的提示
4 @7 X, d' j) F, U& {8 Z
/ U2 [& q/ | h% X* @2 ]- y不经意间用户快速扫描时，用小小的力就能撬动关注。rogue不是拼尽全力的肉盾，巧力是最适合的。
, a. J3 w' ?7 B- k% b) \) C' G, t2 t' {7 `& c
相比数字气泡，小红点足够引起用户扫视时的聚焦，如Giles Colborne提出“把标签放哪里比把标签做多大重要得多”：
4 e' _% M' @1 \: T/ |; R4 o( ~- a: n* x/ w) _5 t3 \2 |
5 A# F/ Z, n$ M1 x8 J2 _/ D7 c+ M1 y; I& o8 ~3 B* ^: `1 P* Q* R! Z
0 `# O0 U9 [; F. T% X3 g3 J8 F! K% o: W1 P四、聚焦/专注任务时的提示
6 [) b5 X) R3 K& N1 T: }- x- u3 d- l& J+ P. ^ X
这是潜行rogue即将触到背刺目标的最给力动作：专注目标，适时出现。通常都是聚焦任务时，给出针对性强的操作提示。学网页设计
! v5 ?6 Z* d U9 ?- E
" e+ l; f2 @3 t来LinkedIn中Inbox的前提是：查阅新信息或处理之前条目。学好网页设计的方法
1 q, }5 J" e2 g' P# b( j$ r8 }% c- a8 M4 I' M
总揽整个信息列表时，除新旧信息区别外都均衡罗列；一旦聚焦具体条目时，鼠标动作恰好地Hover出相应的操作提示：
2 z2 V& V" v; p) x& I0 X$ x& h
+ A( W# o- m/ D2 j" X8 Y# N# @* l; k {! \2 J% V
. K" `/ N- J+ O9 T/ F9 c8 d5 ?' l) K t: V; B
看到Path的加号提示时，自然明了是新增信息；点触后沿袭之前的逻辑：提示可选择条目分类或关闭：2 B7 Z1 x( e7 K1 v$ x, [% n( a
4 X2 A* w) A ~# J5 R. Z
8 o6 `, s) g2 M; `$ v+ _2 E6 h; @) {! ~
' G( A2 H' t* O; I! X6 j4 H6 u) Y+ I常按图片时，猜测是对图片内容有兴趣，接着了相关的提示。上下滚动浏览时，右侧会提示出发布顺序的时间信息：
! Q/ S' M7 o/ R- j' U/ |9 i9 a# M6 r1 d/ X7 D/ d5 }
* C f, K! p7 |& U
8 q b z+ d" Y& d3 m2 n0 _3 C
( b9 t) W6 O( @' u% y* X j
Evernote 的标签过滤大概从未告诉过你，它能推荐除当前信息标签外，还所属其他的标签列表给你；根据设置了多个标签的关联性，提示并速推关联性强的条目，高效地找出之前收集的资料：9 {2 r5 r3 t; I3 ~# ?+ A; a9 }& I4 g
1 a' y L6 Z S8 Y: P+ f1 A% c: M: J( L
9 _" A; l5 c9 X# i/ q9 [
) B. i! h: {6 v) i( i' M; Y最后，是再熟悉不过的iPhone，在未找到而“抓狂乱滑”时，搜索框悄然而至，并递出的键盘提示输入想找的信息；输入时，又适时提示：可以快速换个词，或从推荐项目中选取；还有根据触屏的特质，轻点其他区域取消这次召唤：) L$ }5 ]1 _1 H% X- z) a
+ T- f0 J2 s% _( |/ S4 O3 i* K& j( {: b% M: R
+ B4 L* B H V( K. }
5 M# A6 D- G; r# l! u: j+ {结语
# U% H$ ~( K3 d* j3 S) \* F5 y# l T. k% Q& Z, L0 J4 H
隐藏的各项技能说差不多了，设计工作中，做到成功的隐藏，打出rogue的致命一击，是设计平衡观下的最佳解法。有效的隐藏是为了适时的出现。潜心进阶技能，做最给力的设计解决方案，相信一击中的，在不久就会得到。3 b' f) O" z" O* f1 G, i
& A$ I' n& v# F0 R; i文章首发：远古巨兽大复活http://www.44667799.cn/ musr |
