产品经理说：给它加上这个，这个，还有这个。设计师无奈摊手：就巴掌那么大的地方，怎么可能把这么多功能一股脑塞进去？这就考验到设计师的界面隐藏功夫了，特别是信息过载的今天，这个完全是必备技，今天腾讯的 Viconia 同学分享了他的隐藏技能总结，从入门到必杀都有，来学习吧！网页设计说明' I% L4 m( h) D2 {
* R- Y0 n0 s8 V3 a4 o% S' H
一句话总结：你刚好不经意地出现，而这正是隐藏的意义。网页设计图片: R( y9 c7 R2 |8 P, `9 Y
( b5 ~4 D7 F1 c6 V. D+ u
设计师必杀技能抠图神器推荐！《PS抠图神器：KnockOut 2.0汉化版下载及教程》
( U! ~6 N6 ~# m6 X- O1 F
7 q! y$ @2 [; @) P在这个信息爆炸的社会里，信息过载已成为常态，为了提升用户使用效率，处理界面的信息层次是每个设计师都要面对的重要一课。这篇短文想聚焦的话题是界面中的“隐藏”。在界面设计中，隐藏不是为了和用户**，而是为了让用户更好地聚焦在重要内容上，降低界面信噪比，提升信息传达效率。最新网页设计
# R; |4 Y0 k J( y; Z. |+ { A
笔者以前经常玩的D&D，非常喜欢其中的盗贼（Rogue）角色，潜行在黑暗中，伺机致命一击。一个好的隐藏设计，是否也能和盗贼的背刺一样给力呢？我们先来看看隐藏的技能发动条件。怎么学好网页设计
x E0 Y8 l/ g) o, V T% k" h- P; H/ ^0 p" P
其实这项技能的领域很宽，在固定和特定的情况下都能施展拳脚。首先看看在固定情况下的运用吧。固定包括两种：不常变设置和引向外部目标。网页如何设计7 i1 U$ h( Z( I2 U& X+ g+ Z
# B8 _9 R6 j1 I" u4 c- o S. U一、不常变的设置：
6 Q7 \* S5 r* R2 r9 j- U C# x1 G$ k/ v4 E5 O1 @: r
固定不变的位置或功能，在相对不重要、操作频率不高或一次性设置时，合理组织信息后就能隐藏了。
% z/ J5 M" A) Z4 [7 y
, F! a( T- d) _' _1 k2 I+ H如ebay或apple的账户信息、个人任务等都可以归属在固定模块“My eBay”下：
$ h4 W9 M9 |4 `( E- \: ^% r1 ?" f
8 V# f$ d5 l9 ^/ p) a" @+ a1 ]7 d+ i9 C8 \9 s2 u Y
# e2 k" N+ I r/ E" I+ [# ^1 @7 y5 X
4 |, s3 X0 f5 L6 D1 j
amazon那从a到z 丰富的类目导航，被隐藏在左侧logo下方。全站它都在老地方静候展示的时机：
+ V, g0 r! ~* ?9 K) T' K9 L; v8 ~4 c5 ], I# l' O! r
~! N0 W& U, N' h1 a) _
, g5 E) F) ^! q+ y6 g8 s( H% ?, Y' |' f& L0 @' x, f
整站的固定位置始终能找到它，隐藏既保持认知一致，也节约了空间：1 @1 T0 q# \. o* Y3 v9 i+ S1 F
; @2 X$ z3 [4 M4 c7 R& Z3 a8 S1 k, k
" ?; }- R5 K3 Z! t( Y. @
4 V! L: g0 X% |8 p, h二、指向外部目标. h7 [. U" j% r7 g
) _/ _/ M& u o; j; x! r这种隐藏多考虑到外部分享平台数量多、常有变动增减，全部展示，界面设计更复杂；不常变的设置是绝对固定，指向外部目标是相对固定。网页设计课程$ D8 x: S# I+ \% l; {
5 n2 G& S' B1 h新浪微博的和豆瓣电台的点点点中，都隐藏了各种外部分享渠道：) G$ @! A( x8 g2 a' f0 X! S
2 w- @* Q- S1 n6 m0 c
6 `/ `. g0 d6 u( p7 `7 _
8 T' c# a) e+ A& ]7 t$ w( v
6 g9 `0 p! a+ t! N9 y9 t( ?$ r目前为止，前面提的隐藏都是隐藏次要信息。难道rogue的本事就这点？别急，接着要说的特定情况下，“隐藏” 将一改绿叶角色，展示进阶技能。像一个高级rogue，只在该出场时亮相，漂亮的出手背刺甚至打出爆击，将隐藏技发挥致极。网页设计学习吧
8 D' d+ U i% C( I5 V* E) C5 ^# ^; F
在特定的阅读场景下，适时地提示了chrome插件的隐藏选词翻译：
: T% t, u$ U: M& W5 k! `
- P* C9 D; _3 @+ ~4 D- u6 V- e. k5 K% T
& F y l' T! O
! O& c- e: F/ g/ F% }; mApple官网注册ID，逐字段填写时，输入框会适时弹出tips来提示用户，符合要求的Apple ID包含这三项内容：1 `; a" s" e/ R a& J# f! U
, ~# z |: n+ s1 t, E( @7 d# ` h. F/ X' J. T
1 s/ ~( P( N0 i8 G2 e# h# V5 K
" ]' j* w. Q7 q4 m7 N: X6 z- _- B
根据输入过程中的具体情况提示问题点、待完成或特殊要求，都是针对性的提示，根据目标现状出手，是成功rogue必备的素质。适时地提示隐藏的信息，大幅提升表单填写效率：
- @: K- L3 Q( ]
% ^3 |9 J% T" W* T* \$ t
- W8 G! ^! X/ k: I4 G4 Y- t9 Z& D0 z! v- b$ E' D9 U% G
2 [1 e8 r( f3 |& }$ h针对进阶技能rogue还有一套精准背刺技巧：做好完全隐藏适时提示，其实也容易：给轻量化的线索或提示，寻求进阶技请看过来：& j- F1 h. f6 X- W
3 k# ?4 U% J4 K( n7 e一、细微处——优雅\恰好的提示: w6 a. t% E7 |; F. ^
2 _% h6 u( _* c. b: i
既然隐藏，如果提示过强、大或显，就违背了隐藏的初衷，显得技拙，轻一点才不打扰到用户的任务进程，所以提示要细微，要适当。学好网页设计要多久
+ S* x1 P' N' P9 I: ^2 y
7 K$ H, z" f N7 t4 }众所周知的PS工具栏右下的小三角，就优雅地邀请用户在使用中根据需要探索更多功能：
% R; I* z! {( ]! f) t8 Z4 f8 {2 P P0 l; \* s3 ~4 @
0 T( C/ I k9 g2 t3 N/ ? h
$ \% c) S3 a' d
% B3 D2 f. W# A2 |6 h! U% u1 o5 F二、渐进的提示
, K" b0 d$ H! ]0 ]! C& l5 A( Z- O, x; m; u+ ]# N+ K* Y9 n6 E
配合任务操作进程，为用户逐步揭开隐藏的面纱，才是有效的提示。网页设计& r z" p" z, `8 m7 m, }
0 B! w4 r/ h: s. A
在Pinterest右上角message弹框输入前，很轻量的视觉提示：To后请输入字符；随着输入动作，出现下一步选择用什么渠道发送的提示：& e7 M3 d9 K6 L4 _
7 G. ^) w( o% b* O5 |: a7 D* B/ t
# n. O5 R7 A9 I; G- E% w5 w5 z# r
* c4 A/ A8 V$ t( }- z" Z2 S+ c. n7 N2 C9 Y$ p& a8 f- M
之前apple.com 注册即时校验提示，也是渐进提示的有效应用。网页设计需要学什么- d$ k4 m% @" w
& y- U4 y7 `+ g- U+ t0 Y$ A9 q
三、扫视/泛读的提示
1 e/ O; J3 t0 s* U& c+ R9 d; o, r5 q( a
不经意间用户快速扫描时，用小小的力就能撬动关注。rogue不是拼尽全力的肉盾，巧力是最适合的。
4 c- O7 o/ S7 B! M8 ?4 }$ b8 e6 {: Z. E
- p6 C: E7 |; Z! Z相比数字气泡，小红点足够引起用户扫视时的聚焦，如Giles Colborne提出“把标签放哪里比把标签做多大重要得多”：
& f: r* ` C4 c+ D+ v' O% ]
( C' v: z" p% W0 `0 q& L' h5 o
3 a6 D5 t* ]- n: W- e, `5 k. x0 h4 F& h& _8 M* U) |
4 L2 t9 i# B/ V5 e/ E: `6 \. w# L8 B四、聚焦/专注任务时的提示
2 b; U" k' x& V$ b. h) c
4 Q; v7 a e# l0 {& x, Z这是潜行rogue即将触到背刺目标的最给力动作：专注目标，适时出现。通常都是聚焦任务时，给出针对性强的操作提示。学网页设计
3 r% e& o8 @7 z2 a$ R0 ~* u/ H! d
+ C5 [2 H( ]3 m+ j来LinkedIn中Inbox的前提是：查阅新信息或处理之前条目。学好网页设计的方法, f: @& z& I; j5 m
: S9 b2 z8 `7 R8 d4 a$ T总揽整个信息列表时，除新旧信息区别外都均衡罗列；一旦聚焦具体条目时，鼠标动作恰好地Hover出相应的操作提示：' d7 e5 A+ \) U1 E+ U9 k
* E, ^! u" e! D; M) A% }
+ K C+ D% F0 W$ J$ Y
- L3 q0 w0 v( J' D, ~2 Z
/ u/ P7 A* [$ v看到Path的加号提示时，自然明了是新增信息；点触后沿袭之前的逻辑：提示可选择条目分类或关闭：& f' a4 }2 ~, i% b' B. d% y
9 V1 S3 q, |, _) d& u) Z# j- B; ~- k P" x5 w9 z; Q! K
/ ^0 x1 m, w1 @$ G, X% O3 I
4 F9 e2 i# F" l1 X/ P# N常按图片时，猜测是对图片内容有兴趣，接着了相关的提示。上下滚动浏览时，右侧会提示出发布顺序的时间信息：
9 \: d+ T1 Z5 C; i" V, e$ [; n$ y
- i0 K' Y- n, L) w: ], i2 g/ f, o- m, i+ p( B
# U2 a- z# R5 \* [8 U# |1 U' K+ q3 w V4 b) |
Evernote 的标签过滤大概从未告诉过你，它能推荐除当前信息标签外，还所属其他的标签列表给你；根据设置了多个标签的关联性，提示并速推关联性强的条目，高效地找出之前收集的资料：- U( |# W: m0 r% [8 _3 ]
) | ?) z" M9 n/ d* E2 O" F
, R* U8 `9 I" z, d9 A( ^. U5 j1 i
1 M4 p; E K0 Y
- N% N* g& W/ N+ h最后，是再熟悉不过的iPhone，在未找到而“抓狂乱滑”时，搜索框悄然而至，并递出的键盘提示输入想找的信息；输入时，又适时提示：可以快速换个词，或从推荐项目中选取；还有根据触屏的特质，轻点其他区域取消这次召唤：
5 W, W1 d0 G$ i! X" k
3 B% J ^- u j+ ~) G" v
6 m0 T) i4 f9 Q. X8 A5 }9 A; @5 G5 \" \5 ], _+ V6 f
2 n, \4 {1 g3 O9 h结语
+ [4 b8 m3 ?& G
& `- W# a7 N2 l, J; N2 H! p- U2 C隐藏的各项技能说差不多了，设计工作中，做到成功的隐藏，打出rogue的致命一击，是设计平衡观下的最佳解法。有效的隐藏是为了适时的出现。潜心进阶技能，做最给力的设计解决方案，相信一击中的，在不久就会得到。/ B2 `- j- r6 f! K1 Y" e4 M! [" ~$ D% X
0 W* ?9 P- a0 D1 I4 R* ]. d$ A u
文章首发：远古巨兽大复活http://www.44667799.cn/ musr |
