何谓隐形设计

Date 2025-06-11 15:43:52

  当你创建网页、移动应用程序甚至智能手表的交互时,你正在设计某种类型的交流。设计应该携带信息,而不是阻碍信息。这就是设计隐形的技巧。

  设计并不总是令人眼花缭乱的艺术。它精致、实用,而且往往不确定。很简单,好的设计往往是看不见的。

  更清楚的是,隐形设计不会在项目中增加层次、透明度或隐藏意义。它是为了创建一个以用户为中心的项目,使其功能齐全,视觉愉悦。

  当我还是一名年轻的设计师时,我一遍又一遍地听到这句话。如果你不得不“装饰”画布,那就是过度设计。最好的设计——真正使项目有效运行的设计——看不见。

  但是如何实现隐形呢?特别是网页设计是一种相当视觉的手段。(此外,本文将重点关注几个网站来确认隐形设计的概念。)思考设计中的隐形

Invisible Design

Cycle

  当然,设计是可见的。毫无疑问。但是你使用的工具和技能不应该在普通用户面前炫耀。

  大多数设计只追求“感觉正确”。用户想沉浸其中,操作一些东西。他们不必理解原因。这是隐形设计。

  Oliver Reichenstein,Information Architects的创始人和导演以强调隐形设计的概念而闻名。虽然在听到他的观点之前,它已经深深地印在了我的脑海里。在the 在Verge的采访中有一些话。

  “优秀的设计是看不见的。优秀的界面设计将详细介绍亚原子级微字体(文本的准确定义)、看不见的宏观文字布局(文字的使用)、还有一个由交互设计和信息架构组成的看不见的世界。界面设计师致力于使用户注意力最少的输入和最丰富的输出。就像字体设计师和工程师一样,我们不会试图找到完美的解决方案,但我们会找到最好的两全之策。” 隐形美学植根于设计理论的基础上。这不是一种趋势,也不是使用酷的新用户体验特征。它使用文本、颜色、字体、图片、图标和一些技能来传递信息。让我们回顾一些基础,看看它们是如何被你使用的。

espn

Rebuild

Usmnt

  文字和语言:用于向用户传达语调和情感的文字。当用户与设计互动时,使用一种语言来传达你想要表达的感觉。这是正式的、轻松的还是有趣的?它应该让你感到热情,还是想做出某种反应?还要考虑措辞的节奏。大声朗读时听起来怎么样?

  颜色:每种颜色和颜色组合都有不同的感觉。考虑到情感和文化因素,选择颜色需要很多时间。仔细选择颜色匹配方案,选择可以促进用户执行特定操作的颜色,同时创造适当的感觉,保持平衡和协调。

  字体:字体本身也有意义。从干净的无衬线字体中获得意义,从周围环境中获得意义(Helvetica);对于复杂的粗黑体风格(巴洛克文本),有一种形式感。你选择的字体类型会传达一种特殊的感觉。不定期下棋,坚持使用无衬线字体或简单的衬线字体,使用统一的笔画厚度和传统的字体重量。

  图片:你使用的图片是什么?包括照片、动画和视频。其中一个人笑得很开心吗?(里面有人吗?)颜色是暖色还是冷色?动作是快还是慢?浏览步骤和阅读过程应该是合适的——就像步行速度一样——可以为用户创造特定的舒适度。动作太快或太慢会开始引起注意,用户会更加关注它,甚至超越图片本身。

  图标和UI元素:统一的图标集和用户界面元素对隐形元素非常有帮助。即使图标对应的操作可能与特定外观不同,一个系统也会通过标准化显示来告诉用户网站如何运行和操作。当用户不需要考虑如何使用它时,看不见就会生效。想想每个零售商都在使用的购物车图标,这是一个查看商品的标志。用户不需要考虑如何进入最后一步或如何支付;这个元素将引导他们进行正确的操作。

  其他技巧:有很多设计技巧可以实现或破坏你的设计-投影、文本效果(如倾斜)、描述和边框、空白、下划线、列表等。其中任何一个的关键是使用它。如果您打开编辑软件的工具窗口,并在默认设置状态下单击“应用程序”,您将犯错误,并导致花哨的效果。这些效果应该在用户忽略一张图片并责怪它的阴影太重时使用(尽管受过训练的设计师可以识别它)。设计效果只应有助于整体信息和视觉目标。 结论

  回想一下Oliver 正如Reichenstein所说。它强调“微观”和“宏观”元素。这是关键。为了实现完全隐形,设计的每一个细节都应该仔细考虑。

  简单的设计是有目的的。不要仅仅因为你想使用一些技能就过度装饰或添加流行元素。设计好每一个细节,让它们无缝合作。同时,设计大局,让它勾勒出你的项目试图传达的整体概念。不要想得太多:有时简单的解决方案是最正确的(也许正是隐形设计的概念促成了平面设计的兴起,并继续流行)

  你有没有偶然发现,哪些网站的设计是看不见的,运行完美?可以在评论中与我们分享。

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计