对视觉编程

这篇文章需要是为了把我最近接触的一些知识串联在一起
学习深入的设计师应该能看出文章很多问题, 因为我还在摸索阶段
Anyway, 当我看到界面设计当中存在清晰的脉络, 变得很痴迷

编程的一个特点

声明式编程, 描述需要满足的条件是什么, 计算机自动推算结果
过程式编程, 编写程序每一个步骤怎么做, 计算机逐步推演结果
编程的代码是很明确的, 调试完成可以准确编译到 CPU 指令
随后, 计算机根据指令一步步完成运算, 得到最终的结果

编程的背后有数学模型, 保证了做复杂的抽象之后依然严格正确
于是对于高级语言或者脚本语言的程序要来说, 程序很明确
编程就是这样, 很在乎控制, 很准确能让计算机知道它该做的事
其他的领域要贯彻细节, 需要大量人力保障, 比如后面说的控引导视觉

为什么对视觉编程

控制用户如何浏览网站, 对于开发者来说是至关重要的问题
用户怎样进入页面? 聚焦到哪里? 怎样进入下一个层级?
怎样吸收内容? 怎样与按钮交互? 怎样结束当前这次访问?
不能控制用户浏览的行为细节, 意味着无法控制用户的想法
越想要向用户传递信息, 越想要吸引用户消费金钱或者时间, 越重要

然而制作界面, 向用户传达信息过程中, 不确定性非常严重
用了深浅的颜色, 用了宽窄的布局, 用了快慢的动画, 效果怎样?
当用户进入网站, 怎样在区域之间扫视, 怎样跟按钮交互, 可能性有很多
同时各种界面的细节都可能影响到用户的注意力, 在不同的场景
图形界面完全不可能像程序那样每个细节一步步控制好用户怎样访问

格式塔(Gestalt)

当我读到关于格式塔的文章时, 我开始明确, 基本指令真的是存在的
有一些形态, 对于人们的视觉系统来说, 就像是 CPU 的基础指令
因为视觉系统在运行当中, 就会不断按这样的方式去进行认知
我强烈推荐这篇文章当中阐述的对于设计的理解:

Design Principles: Visual Perception And The Principles Of Gestalt
http://www.smashingmagazine.com/2014/03/28/design-principles-visual-pe...

我可以摘录一下文章当中重要的观点, 对于格式塔而言:

整体不同于局部之和.

还有一些格式塔当中关键的理念:

• 浮现 (整体会比局部先被识别出来)
• 物像化 (大脑会填充掉空白)
• 多态稳定 (大脑会尽可能避免不确定性)
• 不变性 (我们擅长辨识相似性和基于相似发现区别)

这样就引出来一些模式, 可以被归结为:

其他条件相等的情况下, 所有和 X 相关联的元素, 容易在感觉上被归类到更高层次的单元.

具体比如有这样一些规则:

• 人们会将含糊或复杂的图形感知和解释为尽可能简单的可能形式
• 当看到元素的复杂组合, 我们倾向去找简单的, 可以辨识的模式
• 人们倾向于将物体感知为关于其中心对称的形状
• 元素会被感知为图形(figure, 被聚焦的元素)或者场景(ground, 图形所处的背景)
• 视觉上相连接的元素相对没有连接的元素, 有着更多关系
• 如果元素位于同一个关联区域, 那他们被认为是分组的一部分
• 距离更近的物体相对远离的物体, 关系更加紧密
• 排列在同一直线或曲线上的元素相比不在的元素, 关系更加紧密
• 朝同一方向运动的元素, 相比静止或者反向的元素, 关心更加紧密
• 相互平行的元素相比不相平行的元素, 关系更加紧密
• 有种相似特征的元素相比没有相似特征的元素, 关系更加紧密
• 带有主题, 强调, 或者特点的元素会夺取和占优观众的注意
• 元素被感知的方式倾向于取决于观察者以往的经验

类似地, 从颜色上, 估计也能归结出很多切实可行的规则
当我们知道这些规则会真实地引导用户的视觉的时候,
也就意味着我们可能对这些规则进行组合, 控制用户视觉
也就是说观众看到什么, 想到什么, 都在开发人员的设计之中

界面设计

实际界面的制作会复杂很多, 因为需要设计师理解更多元素的作用
界面上的形状, 颜色, 空白, 节奏, 布局, 动画, 究竟怎样配合?
即便抛开时代技术的限制, 控制大量的元素依然困难重重
也许一个简单的办法是先减少元素, 探索整理出足够丰富的经验

微软在 Windows 8 之间很多设备就已经在探索现代化的界面设计
去掉装饰, 简化界面的形态, 从内容本身挖掘美感, 突出字体,
而且逐渐引入大量的色彩, 大量的视差滚动和 Motion
这些已经成为了目前流行界面的制作技巧重要源头

Modern design at Microsoft: Going beyond flat design
https://www.microsoft.com/en-us/stories/design/

多种设备的适配统一正在进行, 同时下一代界面已经接近
VR 设备的界面相比静态的屏幕上有着更多的表现力
用户在这样的界面当中, 能动性更强, 意味着更加难以控制
Google 大概不甘落后微软, 已经开始探索 VR 当中如何设计交互

Designing For Virtual Reality
http://ustwo.com/blog/designing-for-virtual-reality-google-cardboard/

Motion

其中动画的 Motion 在视觉上的吸引力和冲击显得尤其有魅力
图标的切换, 内容的切换, 由于渐变的 Motion 显得非常易懂
同时很神奇的是动画的效果可以非常漂亮, 本身已经成为亮点
我推荐一些网上的例子:

Functional Animation In UX Design
http://www.smashingmagazine.com/2015/05/14/functional-ux-design-animat...

目前潮流的 Google Design 当中, Motion 的精美效果也比比皆是
只是从 Dribbble 引用一些例子就能展示其魅力了

Google Design
https://www.google.com/design/

图片来源 https://dribbble.com/shots/1621920-Google-Material-Design-Free-AE-Proj...

图片来源: https://dribbble.com/shots/1924840-Inbox-by-Gmail

图片来源 https://dribbble.com/shots/1934959-Inbox-Material-Design

图片来源 https://dribbble.com/shots/1832066-GIF-for-Restaurant-Menu

总结

随着众多公司和开发者的探索, 人们正在积累大量的视觉的规律
运用这些规律, 能够更好地控制观众的注意力和思维
甚至不仅仅是上边提到的手段, 画面, 图案, 内容等等还有更多
甚至不仅仅是图形界面的范围, 音乐, 文学, 手势等等也有更多
我们要将观念植入观众的思维当中, 这是很精妙的一件事