产品经理说：给它加上这个，这个，还有这个。设计师无奈摊手：就巴掌那么大的地方，怎么可能把这么多功能一股脑塞进去？这就考验到设计师的界面隐藏功夫了，特别是信息过载的今天，这个完全是必备技，今天腾讯的 Viconia 同学分享了他的隐藏技能总结，从入门到必杀都有，来学习吧！网页设计说明
! |4 g8 g& h; c O3 ^$ T
. l- V! b, ^! u, s# |' j% U9 \一句话总结：你刚好不经意地出现，而这正是隐藏的意义。网页设计图片
4 U b" Q. @" G: y5 Q
3 o; M. q& V( _+ w( g6 ~' J设计师必杀技能抠图神器推荐！《PS抠图神器：KnockOut 2.0汉化版下载及教程》' y/ P$ d& F# h* v0 D8 A9 q) @
/ B0 C& Z* G5 d在这个信息爆炸的社会里，信息过载已成为常态，为了提升用户使用效率，处理界面的信息层次是每个设计师都要面对的重要一课。这篇短文想聚焦的话题是界面中的“隐藏”。在界面设计中，隐藏不是为了和用户**，而是为了让用户更好地聚焦在重要内容上，降低界面信噪比，提升信息传达效率。最新网页设计
4 f3 G7 x+ B+ G. U* @: O
" x6 s' f. ]0 r2 I8 X. r2 l笔者以前经常玩的D&D，非常喜欢其中的盗贼（Rogue）角色，潜行在黑暗中，伺机致命一击。一个好的隐藏设计，是否也能和盗贼的背刺一样给力呢？我们先来看看隐藏的技能发动条件。怎么学好网页设计4 n- ?1 s+ l+ o" [0 A: n
4 a3 K1 r* J# I2 Z. [+ z
其实这项技能的领域很宽，在固定和特定的情况下都能施展拳脚。首先看看在固定情况下的运用吧。固定包括两种：不常变设置和引向外部目标。网页如何设计
4 D1 J7 ~; {! c/ s! l& g1 l) p) M g- E, I2 _
一、不常变的设置：& d2 A4 z9 Q* l
! J0 ^& U. L0 L9 |, a6 C
固定不变的位置或功能，在相对不重要、操作频率不高或一次性设置时，合理组织信息后就能隐藏了。. g# W. d( f$ h; Y* k$ [
$ ^; s$ h, b( x; i0 O9 n如ebay或apple的账户信息、个人任务等都可以归属在固定模块“My eBay”下：
( k, G+ {7 B5 k( \+ @% p0 C: @* W, H% ~& g. D: M# S$ w
; c1 b7 O c* q' t1 l& A
8 z, ~( L6 @! i d6 D1 C) h1 Q
% ]5 i9 v# G7 s+ N4 Qamazon那从a到z 丰富的类目导航，被隐藏在左侧logo下方。全站它都在老地方静候展示的时机：
2 t1 P' X4 C1 z4 t
: m/ y: k* ?& Q5 w3 |- k: v+ h4 K- y) d
+ D0 N1 c; w* ]% ~; N6 ?! X) _ Z# y7 i) |" K+ l4 G9 s/ p
整站的固定位置始终能找到它，隐藏既保持认知一致，也节约了空间：+ o) G( u9 p8 P
4 H& F' V3 H# M- I4 p5 ~& E. O( \2 q0 L6 A7 {% L
% b f1 S5 ?- y
2 a+ ?: h0 L, T6 }# g: W) F二、指向外部目标& _1 u) k8 a7 a7 K9 U2 x1 x
* g6 F/ G `4 j4 [/ C6 F6 s. m
这种隐藏多考虑到外部分享平台数量多、常有变动增减，全部展示，界面设计更复杂；不常变的设置是绝对固定，指向外部目标是相对固定。网页设计课程
% x) e N6 M8 U8 C* [4 t) c6 h
1 d# O J9 O$ j2 _6 ]新浪微博的和豆瓣电台的点点点中，都隐藏了各种外部分享渠道：
. g, n# M$ o& Y6 x+ M) ^/ W3 p# g+ N% ]
! U6 e0 R3 z" Z" k, w8 Y; w6 u* \- r" q& l( C7 b
/ K1 h/ o0 K4 c3 f
目前为止，前面提的隐藏都是隐藏次要信息。难道rogue的本事就这点？别急，接着要说的特定情况下，“隐藏” 将一改绿叶角色，展示进阶技能。像一个高级rogue，只在该出场时亮相，漂亮的出手背刺甚至打出爆击，将隐藏技发挥致极。网页设计学习吧; |" d, l. T7 x% J$ h) q4 Z
. G0 w" G, I8 b1 o. U, k
在特定的阅读场景下，适时地提示了chrome插件的隐藏选词翻译：
; K3 k% m& J1 l: W; P6 v, q* l7 S' K0 L4 p' h
& y0 L0 W6 v3 @) g, w5 i( t2 T
) n; K6 ^8 X! F2 I3 S5 \0 b
7 j3 |& T9 @# Q3 \. rApple官网注册ID，逐字段填写时，输入框会适时弹出tips来提示用户，符合要求的Apple ID包含这三项内容：
8 V4 w; b/ v: [1 K3 f* U) w2 ]! E |1 @( D5 h- r$ {
8 H0 i' w. B9 i% ^
4 p. a4 p) ]% U3 }
2 k& y3 \7 v2 D+ Z8 i1 g9 m8 E/ I
根据输入过程中的具体情况提示问题点、待完成或特殊要求，都是针对性的提示，根据目标现状出手，是成功rogue必备的素质。适时地提示隐藏的信息，大幅提升表单填写效率：
7 C) W. z3 [ }, z. y/ A4 M# n- o. b7 ]+ U* J3 l# K% X Z2 w1 G
0 t3 j- m8 p7 O8 \& x1 t; D6 O/ f$ ?& w! B
; ?$ Q7 ^0 H1 \% i E0 ?/ H
针对进阶技能rogue还有一套精准背刺技巧：做好完全隐藏适时提示，其实也容易：给轻量化的线索或提示，寻求进阶技请看过来：* N# ~+ z8 E; `" Q
# A, A u8 [* t2 Y4 s/ ]( \
一、细微处——优雅\恰好的提示
* d; O3 _1 `: ?5 B0 g3 O/ p+ L! C" o: Z" c
既然隐藏，如果提示过强、大或显，就违背了隐藏的初衷，显得技拙，轻一点才不打扰到用户的任务进程，所以提示要细微，要适当。学好网页设计要多久
9 \% ^$ R8 h/ v' \5 v/ p6 e
/ V2 a. L8 k* T) @! Y, W' K众所周知的PS工具栏右下的小三角，就优雅地邀请用户在使用中根据需要探索更多功能：
7 ]5 Y0 u( r1 [7 d3 x9 O$ n
3 s& A! N5 x! ~: @9 k, ?4 l, y; r* N2 @6 N" g
. ?8 \9 g1 o) c; f x
0 P3 a% x! B. j" L- ~, N# Z二、渐进的提示
1 G3 ~# D! G7 K7 V
5 S; [% Z' G. h$ Z/ i配合任务操作进程，为用户逐步揭开隐藏的面纱，才是有效的提示。网页设计
! c+ e& d9 }1 Z: d' g# j6 ?8 ^" d, |6 t/ T1 B! ^. v
在Pinterest右上角message弹框输入前，很轻量的视觉提示：To后请输入字符；随着输入动作，出现下一步选择用什么渠道发送的提示：/ [9 h0 O, J8 Y# v4 o
. Q" R% y$ w) p% x$ b( B) A g9 T% n
+ s! Q2 v. N- o2 G+ ?8 ~ X$ h6 Y$ J5 _; @
* h1 O0 q$ ~* w, e
之前apple.com 注册即时校验提示，也是渐进提示的有效应用。网页设计需要学什么9 N! F3 I- _2 _7 t& _
6 ]3 U+ o3 k# F2 I6 C6 ~/ t
三、扫视/泛读的提示6 }1 c# y2 ~ M4 w8 S$ |5 M
2 h& b# S2 [4 c$ L) `不经意间用户快速扫描时，用小小的力就能撬动关注。rogue不是拼尽全力的肉盾，巧力是最适合的。
) ~9 Q/ l9 |4 @8 s. ]+ k; k/ p9 r- ?
相比数字气泡，小红点足够引起用户扫视时的聚焦，如Giles Colborne提出“把标签放哪里比把标签做多大重要得多”：0 [% a2 p i9 U5 s+ \, W6 N
: a& Y5 c% W6 A! G* ~1 G/ F: e- q6 ?9 p# T( i
) ^3 u; A; x! A& p" L
* i5 L D7 T- k) m: E四、聚焦/专注任务时的提示* ^" Z* w7 V, j: ]
9 h0 R( @# ~# B
这是潜行rogue即将触到背刺目标的最给力动作：专注目标，适时出现。通常都是聚焦任务时，给出针对性强的操作提示。学网页设计( E& H) L, V T9 C+ ^
0 ~' |, T( y4 s7 Y R1 ?8 }3 m来LinkedIn中Inbox的前提是：查阅新信息或处理之前条目。学好网页设计的方法
+ Q6 Z3 R# J y# K* X$ K5 V
+ X. b4 A# N1 I0 v! n0 S2 E总揽整个信息列表时，除新旧信息区别外都均衡罗列；一旦聚焦具体条目时，鼠标动作恰好地Hover出相应的操作提示：4 O% H, [ @" E9 ]+ p% o
5 }+ b- {& B6 ?- f5 l* R" F- Q
4 \& \1 a# t$ E2 y9 j6 C+ J9 ~1 N' v
: v+ Y! |5 ?5 m! {1 m' {6 A6 k看到Path的加号提示时，自然明了是新增信息；点触后沿袭之前的逻辑：提示可选择条目分类或关闭：
( D i& T4 r% n. B8 J% I# E% t8 T" p# }
" F' L2 M9 @ w1 n( E, B% Y1 ]7 W) T' t8 O+ ]4 r6 x
! Y8 g4 f+ s0 F9 l( j
常按图片时，猜测是对图片内容有兴趣，接着了相关的提示。上下滚动浏览时，右侧会提示出发布顺序的时间信息：: {' H( R5 \# o
7 _. d* r0 X+ s* Z3 o
1 v; s+ R# j% a$ V
7 X& d$ I D) B M9 T) V: A
% f+ I8 W3 k9 }) o L9 S7 z
Evernote 的标签过滤大概从未告诉过你，它能推荐除当前信息标签外，还所属其他的标签列表给你；根据设置了多个标签的关联性，提示并速推关联性强的条目，高效地找出之前收集的资料：# z2 l$ G0 R. a" z- D
3 G( ], X; r! b$ `8 p- c, B( T
, Z6 Y0 `2 z F; e5 c2 W
6 p5 b) A* c/ p$ P% t9 Z
- E" O, N- m/ j5 j, u" x4 N最后，是再熟悉不过的iPhone，在未找到而“抓狂乱滑”时，搜索框悄然而至，并递出的键盘提示输入想找的信息；输入时，又适时提示：可以快速换个词，或从推荐项目中选取；还有根据触屏的特质，轻点其他区域取消这次召唤：
8 U t- t5 k9 ]# F6 n" k. ~6 {0 ?. Z9 h9 h
9 m" C% R1 s, D* }/ z; B( n, N# D$ b4 Z- Z3 A, `
2 }" q% g, s* ]
结语
7 P9 t' S' l8 B9 |0 b
" [' z2 n! n; ?隐藏的各项技能说差不多了，设计工作中，做到成功的隐藏，打出rogue的致命一击，是设计平衡观下的最佳解法。有效的隐藏是为了适时的出现。潜心进阶技能，做最给力的设计解决方案，相信一击中的，在不久就会得到。- ]% H5 K& j% B: _9 Z- }2 D
' Y2 [! X/ k% _+ @& h( K文章首发：远古巨兽大复活http://www.44667799.cn/ musr |
