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

产品经理说：给它加上这个，这个，还有这个。设计师无奈摊手：就巴掌那么大的地方，怎么可能把这么多功能一股脑塞进去？这就考验到设计师的界面隐藏功夫了，特别是信息过载的今天，这个完全是必备技，今天腾讯的 Viconia 同学分享了他的隐藏技能总结，从入门到必杀都有，来学习吧！网页设计说明

一句话总结：你刚好不经意地出现，而这正是隐藏的意义。网页设计图片

设计师必杀技能抠图神器推荐！《PS抠图神器：KnockOut 2.0汉化版下载及教程》
2 j) r# g, z. _2 E
在这个信息爆炸的社会里，信息过载已成为常态，为了提升用户使用效率，处理界面的信息层次是每个设计师都要面对的重要一课。这篇短文想聚焦的话题是界面中的“隐藏”。在界面设计中，隐藏不是为了和用户**，而是为了让用户更好地聚焦在重要内容上，降低界面信噪比，提升信息传达效率。最新网页设计

笔者以前经常玩的D&D，非常喜欢其中的盗贼（Rogue）角色，潜行在黑暗中，伺机致命一击。一个好的隐藏设计，是否也能和盗贼的背刺一样给力呢？我们先来看看隐藏的技能发动条件。怎么学好网页设计

  _# _. e# c% K! v  Z其实这项技能的领域很宽，在固定和特定的情况下都能施展拳脚。首先看看在固定情况下的运用吧。固定包括两种：不常变设置和引向外部目标。网页如何设计

一、不常变的设置：

固定不变的位置或功能，在相对不重要、操作频率不高或一次性设置时，合理组织信息后就能隐藏了。
8 V& N3 _) ]( p
如ebay或apple的账户信息、个人任务等都可以归属在固定模块“My eBay”下：
! K6 v& |" ^/ V5 T# K- j$ }/ y* n

, a# Z" V3 X. H) I# N* M7 q

amazon那从a到z 丰富的类目导航，被隐藏在左侧logo下方。全站它都在老地方静候展示的时机：

" f8 J! y! s# N9 ?1 A

: N9 j; d9 A0 q* Z# W6 e
2 }- o8 o3 u8 z  Y" S
' B! ?7 U, b2 v整站的固定位置始终能找到它，隐藏既保持认知一致，也节约了空间：

* ?  \) N- n& e
! k! T  D! I! M. w" G3 R0 p0 w$ q二、指向外部目标
7 Z, z4 j7 a; ]7 M6 e! b6 L
这种隐藏多考虑到外部分享平台数量多、常有变动增减，全部展示，界面设计更复杂；不常变的设置是绝对固定，指向外部目标是相对固定。网页设计课程
3 M( F3 t+ i8 ?0 Q# ]
( p# B  ~2 ^& P新浪微博的和豆瓣电台的点点点中，都隐藏了各种外部分享渠道：

- Q& X; s) t( f/ l3 c

: y" M8 e2 {4 X7 e0 n目前为止，前面提的隐藏都是隐藏次要信息。难道rogue的本事就这点？别急，接着要说的特定情况下，“隐藏” 将一改绿叶角色，展示进阶技能。像一个高级rogue，只在该出场时亮相，漂亮的出手背刺甚至打出爆击，将隐藏技发挥致极。网页设计学习吧
* u' V% z# R# K, j  V& p
在特定的阅读场景下，适时地提示了chrome插件的隐藏选词翻译：
/ _5 ]8 q4 C  z8 l) G9 Y8 P
9 f- Y! M5 B( M% ^

6 C% J1 ?% q+ @; T- r' N
" H( R1 c9 y$ J5 c
2 x( e0 U4 j! R3 `1 kApple官网注册ID，逐字段填写时，输入框会适时弹出tips来提示用户，符合要求的Apple ID包含这三项内容：

: W' c' `* K5 ]! R% d* K* ~

/ d( l) b9 \( \& Q5 Z根据输入过程中的具体情况提示问题点、待完成或特殊要求，都是针对性的提示，根据目标现状出手，是成功rogue必备的素质。适时地提示隐藏的信息，大幅提升表单填写效率：

+ Z( [) Q3 [0 P2 U

2 ?2 {, Y) B) t5 Z
针对进阶技能rogue还有一套精准背刺技巧：做好完全隐藏适时提示，其实也容易：给轻量化的线索或提示，寻求进阶技请看过来：

9 y4 k1 T; E' Q. F; i4 g一、细微处——优雅\恰好的提示

4 K/ }* L3 o% W) m" X9 z, K4 V; B既然隐藏，如果提示过强、大或显，就违背了隐藏的初衷，显得技拙，轻一点才不打扰到用户的任务进程，所以提示要细微，要适当。学好网页设计要多久

* n: R7 w% {6 Q$ e- j众所周知的PS工具栏右下的小三角，就优雅地邀请用户在使用中根据需要探索更多功能：
. |  r% C; Z0 I" U0 n
7 o/ [  [$ f1 @; ?8 D# c7 {8 V

; x7 ]6 Z( D7 S' O2 q! c4 N

& y  M% d5 m, m: C/ n二、渐进的提示

7 d: r6 a% b9 E& c9 r1 K* w. B配合任务操作进程，为用户逐步揭开隐藏的面纱，才是有效的提示。网页设计

$ H, D1 A9 f/ t: E& M在Pinterest右上角message弹框输入前，很轻量的视觉提示：To后请输入字符；随着输入动作，出现下一步选择用什么渠道发送的提示：
+ _7 \9 X* G" m6 P
! ^) H% N8 Y2 w5 H

3 }, z" _/ Q* w

0 y0 j" K7 N+ M6 w1 f8 _之前apple.com 注册即时校验提示，也是渐进提示的有效应用。网页设计需要学什么

; B' X. A, g/ D7 E: {3 d1 A) c- b三、扫视/泛读的提示

" E8 e' B$ |) h# C4 f3 C& m+ u不经意间用户快速扫描时，用小小的力就能撬动关注。rogue不是拼尽全力的肉盾，巧力是最适合的。
' o' g* J7 c3 V
相比数字气泡，小红点足够引起用户扫视时的聚焦，如Giles Colborne提出“把标签放哪里比把标签做多大重要得多”：

  z' n# E" N! K/ i

4 u3 c! h0 M: I- Z/ Q/ u) N9 N

& F% P5 W6 s6 h6 k3 b9 p2 U9 p0 s; _四、聚焦/专注任务时的提示
+ Z! R( t) M! _9 m
2 X  v, y3 `) _/ m: u这是潜行rogue即将触到背刺目标的最给力动作：专注目标，适时出现。通常都是聚焦任务时，给出针对性强的操作提示。学网页设计

$ e& \: o" p: W$ |  ^! {! P' G# A来LinkedIn中Inbox的前提是：查阅新信息或处理之前条目。学好网页设计的方法

总揽整个信息列表时，除新旧信息区别外都均衡罗列；一旦聚焦具体条目时，鼠标动作恰好地Hover出相应的操作提示：

  E% p* z- D) j6 v- H; @

" |( B# d& i* {0 w
+ g# N* \1 g: Y! o- M
/ F3 j& i% S2 L看到Path的加号提示时，自然明了是新增信息；点触后沿袭之前的逻辑：提示可选择条目分类或关闭：
+ H6 I8 L7 f( n+ l( R; w& A
+ |: `9 B: y$ C" ^/ J

' n+ D+ s/ D5 B6 U

常按图片时，猜测是对图片内容有兴趣，接着了相关的提示。上下滚动浏览时，右侧会提示出发布顺序的时间信息：

1 N; N0 l, L1 n" KEvernote 的标签过滤大概从未告诉过你，它能推荐除当前信息标签外，还所属其他的标签列表给你；根据设置了多个标签的关联性，提示并速推关联性强的条目，高效地找出之前收集的资料：

5 ~7 J( Q2 w( m- Q8 r' i

9 D4 R; ~  O7 X& B5 @3 r0 D
最后，是再熟悉不过的iPhone，在未找到而“抓狂乱滑”时，搜索框悄然而至，并递出的键盘提示输入想找的信息；输入时，又适时提示：可以快速换个词，或从推荐项目中选取；还有根据触屏的特质，轻点其他区域取消这次召唤：
' I! y! R4 K5 x) Q+ \
+ ?. ?0 f- T) h( s1 q; [

) a  A0 T! J+ B: w* {  M
5 D' O7 a) S5 \+ v, N
结语

隐藏的各项技能说差不多了，设计工作中，做到成功的隐藏，打出rogue的致命一击，是设计平衡观下的最佳解法。有效的隐藏是为了适时的出现。潜心进阶技能，做最给力的设计解决方案，相信一击中的，在不久就会得到。
8 b$ B. N) y- m5 ?. Q- ^
9 [9 W7 Q7 B1 v3 u' ?文章首发：远古巨兽大复活http://www.44667799.cn/ musr

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

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