学习网页设计如何巧妙恰当地隐藏界面的设计

产品经理说：给它加上这个，这个，还有这个。设计师无奈摊手：就巴掌那么大的地方，怎么可能把这么多功能一股脑塞进去？这就考验到设计师的界面隐藏功夫了，特别是信息过载的今天，这个完全是必备技，今天腾讯的 Viconia 同学分享了他的隐藏技能总结，从入门到必杀都有，来学习吧！网页设计说明
+ a3 q3 |/ B( [* d6 b$ M
一句话总结：你刚好不经意地出现，而这正是隐藏的意义。网页设计图片
$ x* i+ D. S+ {
设计师必杀技能抠图神器推荐！《PS抠图神器：KnockOut 2.0汉化版下载及教程》

5 w" H( M4 `$ S' Q  h! p/ A在这个信息爆炸的社会里，信息过载已成为常态，为了提升用户使用效率，处理界面的信息层次是每个设计师都要面对的重要一课。这篇短文想聚焦的话题是界面中的“隐藏”。在界面设计中，隐藏不是为了和用户**，而是为了让用户更好地聚焦在重要内容上，降低界面信噪比，提升信息传达效率。最新网页设计
, G4 B3 U4 r; _$ i# z
4 O( C) b% W( e. n1 c9 j笔者以前经常玩的D&D，非常喜欢其中的盗贼（Rogue）角色，潜行在黑暗中，伺机致命一击。一个好的隐藏设计，是否也能和盗贼的背刺一样给力呢？我们先来看看隐藏的技能发动条件。怎么学好网页设计

" ]: v/ g9 m, d+ p/ `2 s其实这项技能的领域很宽，在固定和特定的情况下都能施展拳脚。首先看看在固定情况下的运用吧。固定包括两种：不常变设置和引向外部目标。网页如何设计

一、不常变的设置：
7 `2 Z5 M! ]1 o2 x8 V
( b4 B- p, U# E9 k+ u3 g固定不变的位置或功能，在相对不重要、操作频率不高或一次性设置时，合理组织信息后就能隐藏了。
! ~8 V4 W) X- m
如ebay或apple的账户信息、个人任务等都可以归属在固定模块“My eBay”下：
" o4 c; \8 |' I$ y! [' z' ^- P) Y

6 K5 \/ Y$ S) N) z6 y- u/ P" E
  \5 J" U. n" T6 J
amazon那从a到z 丰富的类目导航，被隐藏在左侧logo下方。全站它都在老地方静候展示的时机：
; h4 a- r) c4 x

; V' {! }6 H& v0 `4 D0 {$ `9 t

整站的固定位置始终能找到它，隐藏既保持认知一致，也节约了空间：

7 O1 Z0 h  l, x; F& J
0 z9 b2 Q% R# i: b( q: r. }
二、指向外部目标
# q& y0 j3 C1 @3 q$ Q& [5 r
1 w+ s0 u& W& ^' J0 [6 T% q; i' o3 g这种隐藏多考虑到外部分享平台数量多、常有变动增减，全部展示，界面设计更复杂；不常变的设置是绝对固定，指向外部目标是相对固定。网页设计课程

新浪微博的和豆瓣电台的点点点中，都隐藏了各种外部分享渠道：
  M* @7 {! [, J  B' f4 ?

# k- _+ Y* [, ]2 \: k$ v# s
9 B/ h3 y% k- K/ d, y
目前为止，前面提的隐藏都是隐藏次要信息。难道rogue的本事就这点？别急，接着要说的特定情况下，“隐藏” 将一改绿叶角色，展示进阶技能。像一个高级rogue，只在该出场时亮相，漂亮的出手背刺甚至打出爆击，将隐藏技发挥致极。网页设计学习吧

在特定的阅读场景下，适时地提示了chrome插件的隐藏选词翻译：

8 G4 B5 _. @: G# f  W$ E- ]( x$ u- s

2 P/ k; X, k  @Apple官网注册ID，逐字段填写时，输入框会适时弹出tips来提示用户，符合要求的Apple ID包含这三项内容：

7 J7 f5 X4 A: C4 E7 y8 Y2 N
8 `3 Q& P) o- C; _8 u4 Y+ ?
$ \; H: u% C2 H2 P5 y根据输入过程中的具体情况提示问题点、待完成或特殊要求，都是针对性的提示，根据目标现状出手，是成功rogue必备的素质。适时地提示隐藏的信息，大幅提升表单填写效率：

- ~+ |- r/ U( L! f4 F& h! M' Z

3 u4 z2 I$ E2 Q0 V* B. I/ v. }& d针对进阶技能rogue还有一套精准背刺技巧：做好完全隐藏适时提示，其实也容易：给轻量化的线索或提示，寻求进阶技请看过来：

一、细微处——优雅\恰好的提示

; F3 ]! @0 S+ i0 v2 D5 e1 P! L既然隐藏，如果提示过强、大或显，就违背了隐藏的初衷，显得技拙，轻一点才不打扰到用户的任务进程，所以提示要细微，要适当。学好网页设计要多久

众所周知的PS工具栏右下的小三角，就优雅地邀请用户在使用中根据需要探索更多功能：

0 \5 v; ^% R- L

: f+ ~3 A2 l& K& G/ C" d- U

; j% Z5 t2 o$ x1 N% g; y: q0 S  o6 i二、渐进的提示
) C6 |( _4 s( K3 W/ G( R3 x
配合任务操作进程，为用户逐步揭开隐藏的面纱，才是有效的提示。网页设计
' [  n/ B4 C; |# f' B, G
在Pinterest右上角message弹框输入前，很轻量的视觉提示：To后请输入字符；随着输入动作，出现下一步选择用什么渠道发送的提示：
5 |* \. T0 e1 ]7 l5 A! @

! g/ `2 K2 e. \" M
3 m' I) p7 ~3 ]8 Z0 Y- @2 C3 p
之前apple.com 注册即时校验提示，也是渐进提示的有效应用。网页设计需要学什么

9 G, n$ ~, B! S0 _, ^) ?/ ^三、扫视/泛读的提示
% h& E7 t8 |/ q" ~( l
不经意间用户快速扫描时，用小小的力就能撬动关注。rogue不是拼尽全力的肉盾，巧力是最适合的。

相比数字气泡，小红点足够引起用户扫视时的聚焦，如Giles Colborne提出“把标签放哪里比把标签做多大重要得多”：
- N+ D+ L6 t' J( @/ ?9 g

" x. H% ^& `; c  p: f

7 _/ D9 N( e8 m1 o) g1 i; c, a四、聚焦/专注任务时的提示
( a9 {! P" Y/ L& n. f6 I
这是潜行rogue即将触到背刺目标的最给力动作：专注目标，适时出现。通常都是聚焦任务时，给出针对性强的操作提示。学网页设计

来LinkedIn中Inbox的前提是：查阅新信息或处理之前条目。学好网页设计的方法
  S) [2 D/ R5 F& Z
8 b) P" a& P& ?+ h" \! F总揽整个信息列表时，除新旧信息区别外都均衡罗列；一旦聚焦具体条目时，鼠标动作恰好地Hover出相应的操作提示：

2 U' n' y1 h) T! O+ Q

# [3 b4 j2 O+ I: T+ n( x

看到Path的加号提示时，自然明了是新增信息；点触后沿袭之前的逻辑：提示可选择条目分类或关闭：

: B: P0 L2 n0 z2 O6 [( O

4 h" i: |5 P, H: g7 g* Y# ?( L常按图片时，猜测是对图片内容有兴趣，接着了相关的提示。上下滚动浏览时，右侧会提示出发布顺序的时间信息：
" t4 E, {, v& G) h* y

+ |4 L4 H$ D' ]+ [/ V
, h# u+ ]$ v6 P% [* N) l9 ]' M
& V$ Y( N+ @: y& l1 TEvernote 的标签过滤大概从未告诉过你，它能推荐除当前信息标签外，还所属其他的标签列表给你；根据设置了多个标签的关联性，提示并速推关联性强的条目，高效地找出之前收集的资料：

最后，是再熟悉不过的iPhone，在未找到而“抓狂乱滑”时，搜索框悄然而至，并递出的键盘提示输入想找的信息；输入时，又适时提示：可以快速换个词，或从推荐项目中选取；还有根据触屏的特质，轻点其他区域取消这次召唤：

7 g9 e( m" ?2 ]: B) B

0 M9 \0 N! D* b0 W

9 s8 Q( T- b1 g: t- w结语

隐藏的各项技能说差不多了，设计工作中，做到成功的隐藏，打出rogue的致命一击，是设计平衡观下的最佳解法。有效的隐藏是为了适时的出现。潜心进阶技能，做最给力的设计解决方案，相信一击中的，在不久就会得到。

文章首发：远古巨兽大复活http://www.44667799.cn/ musr

蹲了这么久，终于看到有价值的讨论，支持一下！

这个分享太实用了，刚好能用到，感谢楼主！

分析得很透彻，很多细节都说到点子上了～