克制:给颜色和字体做预算
好看的界面大多不是加出来的,是省出来的。这一节给你一套预算表:一个主色加中性色、两种字重、一套圆角。超预算的东西再好看也砍。
预算制的规则很短:一个主色,其余交给黑白灰的中性色;两种字重,正文一档强调一档;一套圆角,定一个数处处沿用。想加第二种彩色时,先问自己一句「它值不值得动预算」,多数时候答案是省下来。
下面是一张克制版的活动页。连点五次「再加一种颜色」,看它一步步劣化;点满五次后,再一键做减法。
加色器演的是怎么变丑,减法游戏演怎么救回来。《About Face 4》给过一个可执行的办法:删减东西,直到删掉某件破坏了设计为止,再把最后删掉的那件加回来。下面这张促销卡堆了六件装饰,逐件点掉试试,哪件删了页面就破,你自然会知道。
克制还有一条更细的纪律,管的是「差不多」。《About Face 4》把话说得很重:不必要的差异是一致设计的大敌。两个间距几乎一样,就调成同一个数;两种颜色几乎一样,就用同一个。每处差异的存在都要有理由,找不出理由,就消除它。下面这张卡藏着三处「差不多」,切换看收编前后。
颜色预算管的是「几种」,饱和度管的是「多响」。《About Face 4》提醒过:高饱和的颜色个个都在喊,凑在一起就是嘉年华效应,用户会被吵得不堪重负。同样三个标签,把饱和度当音量键推推看。
这回把三笔预算做成开关,任意组合,右下角的徽标实时告诉你超没超支。
预算制三条:一个主色加中性色、两种字重、一套圆角。想突破预算,先问值不值。
每多一种颜色,已有的颜色都在贬值。做减法比做加法更常出效果,删颜色是性价比最高的一步。
觉得页面廉价,按顺序查:先数彩色有几种,再数字重有几档,最后看圆角统不统一。
两条可执行的纪律:差不多一样就做成一模一样;拿不准要不要留,就删到破坏为止,再把最后删掉的那件加回来。
内容来源:小山学堂「审美工程」专题原创;「不必要的差异是大敌」「删减到破坏为止」等设计原则整理自《About Face 4:交互设计精髓》第 17 章(Alan Cooper 等)。