区块链技术博客
www.b2bchain.cn

版式一课:以点、线、面为设计寻求规则求职学习资料

本文介绍了版式一课:以点、线、面为设计寻求规则求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

前言

用户界面的本质是资源的互换

用户为产品提供时间和注意力,产品为用户提供单位时间内最大价值的内容

当视觉设计师介入其中后,他们的关系可以用这样一幅图表示。
版式一课:以点、线、面为设计寻求规则

表现层作为用户体验五要素的最具象层面,解决的是产品视觉效果的呈现问题。视觉设计师需要借以合理的版式和视觉手段来保障用户在单位时间内获取最多的内容资源,即实现信息的高效获取。

信息的高效获取来自合理的视觉引导(信息阅读的优先级安排)。我们一直在说的层次清晰、低信噪比、沉浸感等视觉体验在本质上其实都属于合理的视觉引导。

借以实现的手段包括我们熟知的卡片、留白、配色、字体层级、图标等等。这些手段庞杂繁多,体系化的建设必不可少,但是漫长的积累沉淀中很容易被其淹没,而且每种手段背后又是什么样的底层逻辑和依据?

为什么卡片让页面层次清晰?为什么面性图标拥有较高的辨识度?为什么步骤条会有横纵之分?…

点、线、面解决的就是这些内在逻辑问题,在你熟知它们的特性后,绝大多数的设计手段都可以被其解释和串联起来,并且让你的设计决策和设计推导更加有据可依,而不是简单的“凭感觉”。

如果我们将各种设计手段比喻为各类武学外功招式,那么点线面理论就好像吐纳内功,虽为最基础的入门心法,但其对内息的作用影响着所有招式的发挥。


点、线、面与康定斯基

版式一课:以点、线、面为设计寻求规则
点、线、面理论最早由瓦西里·康定斯基提出,他所著的《点线面》一书最早曾作为包豪斯学院的形式课程进行教学。他将所有艺术的形式都归结于点、线和面三种元素的关系。
版式一课:以点、线、面为设计寻求规则

康定斯基对于点、线、面的独到思想为设计领域产生了极为深远的影响。我们目前最熟知运用到它的的一个领域就是平面设计领域。

通过这个理论,平面中所有的元素都可以看作点、线、面三类形态,并且每类形态的存在、变化和结合,都可以为画面传达出不同的样式和风格。

虽然用户界面设计和平面设计分属于两个完全不同的设计行业,但点、线、面理论是相通的。

点、线、面浅谈

点、线、面具有普适性、相对性。前文已经讲过,点、线、面这三种形态存在于所有的元素中。不论是哪种元素都可以用点、线、面来表示。并且,点、线、面之间是相对的,并非对元素的纯粹定义。

比如一个界面中的面性图标,我们可以将其看作一个点,当相对于线性图标时,我们又可以将其看作面。如果这个图标和其他图标一起组成标签栏,那这串图标也可看作线。
版式一课:以点、线、面为设计寻求规则

下面,我将分为点、线和面三大板块,来讲述每类形态基于自身维度所拥有的特性,并如何通过存在、变化来在界面中发挥着各自的作用,实现合理高效的视觉引导。
今天讲点部分,正文开始。
版式一课:以点、线、面为设计寻求规则

万物自一点始。
正如宇宙大爆炸源自一个引力奇点那样,点是万物之源,也是所有元素的基础。点从维度上来说属于零维,它没有办法像线、面那样延伸,这决定了点本身的向心性和自由性。
版式一课:以点、线、面为设计寻求规则
康定斯基将点描述为“雄辩与沉默”,这句话的意思就是,当点独立存在于一个画面中时,它便开始“雄辩”自己的存在,让自己成为焦点;而当它的数量增加时,点便倾向于“沉默”,并且根据它的排列方式倾向于对应形态的特性。

向心性

当一个点独立存在时,点的向心性协助它成为视觉焦点。此时点主要起到定位的作用。

以支付宝首页为例。在以往的界面设计中,我们往往在每个模块标题旁添加一个小小的短线,而这个小短线便是作为定位点引导用户迅速注意到标题,实现不同内容的快速定位。并且作品包装中也常会用到它。

版式一课:以点、线、面为设计寻求规则

不过在Complexion Reduction去形式化的浪潮洗礼下,这种方式已成为过去式,现在我们会直接用标题本身作为点进行定位。
版式一课:以点、线、面为设计寻求规则

但是,在其他更多的场景下,仅靠文字其实并不能很好得发挥点的向心性,尤其是一些信息较多、需要迅速辨识的场景下。这时候,我们通常会引入另一种要素——图标来指代它。
图标本身可以用来表意,而独立、精致的特性让它很适合作为点元素来处理。

比如app中的标签栏中的图标就可看作点元素,每个图标以其所具备的向心性帮助我们迅速得聚焦到它所在的位置。列表页的每个字段前也会加入对应含义的图标来帮助用户迅速锚定当前栏目,并且由于图标拥有更高的辨识性,这让阅读变得轻快而富有节奏。
版式一课:以点、线、面为设计寻求规则

下图所示为Google日历中的活动页表单,当我们将字段前的图标去除时,阅读没有了强定位元素将会缺失节奏,信息获取变得困难和缓慢,影响用户表单的填写。
版式一课:以点、线、面为设计寻求规则

前言

用户界面的本质是资源的互换

用户为产品提供时间和注意力,产品为用户提供单位时间内最大价值的内容

当视觉设计师介入其中后,他们的关系可以用这样一幅图表示。
版式一课:以点、线、面为设计寻求规则

表现层作为用户体验五要素的最具象层面,解决的是产品视觉效果的呈现问题。视觉设计师需要借以合理的版式和视觉手段来保障用户在单位时间内获取最多的内容资源,即实现信息的高效获取。

信息的高效获取来自合理的视觉引导(信息阅读的优先级安排)。我们一直在说的层次清晰、低信噪比、沉浸感等视觉体验在本质上其实都属于合理的视觉引导。

借以实现的手段包括我们熟知的卡片、留白、配色、字体层级、图标等等。这些手段庞杂繁多,体系化的建设必不可少,但是漫长的积累沉淀中很容易被其淹没,而且每种手段背后又是什么样的底层逻辑和依据?

为什么卡片让页面层次清晰?为什么面性图标拥有较高的辨识度?为什么步骤条会有横纵之分?…

点、线、面解决的就是这些内在逻辑问题,在你熟知它们的特性后,绝大多数的设计手段都可以被其解释和串联起来,并且让你的设计决策和设计推导更加有据可依,而不是简单的“凭感觉”。

如果我们将各种设计手段比喻为各类武学外功招式,那么点线面理论就好像吐纳内功,虽为最基础的入门心法,但其对内息的作用影响着所有招式的发挥。


点、线、面与康定斯基

版式一课:以点、线、面为设计寻求规则
点、线、面理论最早由瓦西里·康定斯基提出,他所著的《点线面》一书最早曾作为包豪斯学院的形式课程进行教学。他将所有艺术的形式都归结于点、线和面三种元素的关系。
版式一课:以点、线、面为设计寻求规则

康定斯基对于点、线、面的独到思想为设计领域产生了极为深远的影响。我们目前最熟知运用到它的的一个领域就是平面设计领域。

通过这个理论,平面中所有的元素都可以看作点、线、面三类形态,并且每类形态的存在、变化和结合,都可以为画面传达出不同的样式和风格。

虽然用户界面设计和平面设计分属于两个完全不同的设计行业,但点、线、面理论是相通的。

点、线、面浅谈

点、线、面具有普适性、相对性。前文已经讲过,点、线、面这三种形态存在于所有的元素中。不论是哪种元素都可以用点、线、面来表示。并且,点、线、面之间是相对的,并非对元素的纯粹定义。

比如一个界面中的面性图标,我们可以将其看作一个点,当相对于线性图标时,我们又可以将其看作面。如果这个图标和其他图标一起组成标签栏,那这串图标也可看作线。
版式一课:以点、线、面为设计寻求规则

下面,我将分为点、线和面三大板块,来讲述每类形态基于自身维度所拥有的特性,并如何通过存在、变化来在界面中发挥着各自的作用,实现合理高效的视觉引导。
今天讲点部分,正文开始。
版式一课:以点、线、面为设计寻求规则

万物自一点始。
正如宇宙大爆炸源自一个引力奇点那样,点是万物之源,也是所有元素的基础。点从维度上来说属于零维,它没有办法像线、面那样延伸,这决定了点本身的向心性和自由性。
版式一课:以点、线、面为设计寻求规则
康定斯基将点描述为“雄辩与沉默”,这句话的意思就是,当点独立存在于一个画面中时,它便开始“雄辩”自己的存在,让自己成为焦点;而当它的数量增加时,点便倾向于“沉默”,并且根据它的排列方式倾向于对应形态的特性。

向心性

当一个点独立存在时,点的向心性协助它成为视觉焦点。此时点主要起到定位的作用。

以支付宝首页为例。在以往的界面设计中,我们往往在每个模块标题旁添加一个小小的短线,而这个小短线便是作为定位点引导用户迅速注意到标题,实现不同内容的快速定位。并且作品包装中也常会用到它。

版式一课:以点、线、面为设计寻求规则

不过在Complexion Reduction去形式化的浪潮洗礼下,这种方式已成为过去式,现在我们会直接用标题本身作为点进行定位。
版式一课:以点、线、面为设计寻求规则

但是,在其他更多的场景下,仅靠文字其实并不能很好得发挥点的向心性,尤其是一些信息较多、需要迅速辨识的场景下。这时候,我们通常会引入另一种要素——图标来指代它。
图标本身可以用来表意,而独立、精致的特性让它很适合作为点元素来处理。

比如app中的标签栏中的图标就可看作点元素,每个图标以其所具备的向心性帮助我们迅速得聚焦到它所在的位置。列表页的每个字段前也会加入对应含义的图标来帮助用户迅速锚定当前栏目,并且由于图标拥有更高的辨识性,这让阅读变得轻快而富有节奏。
版式一课:以点、线、面为设计寻求规则

下图所示为Google日历中的活动页表单,当我们将字段前的图标去除时,阅读没有了强定位元素将会缺失节奏,信息获取变得困难和缓慢,影响用户表单的填写。
版式一课:以点、线、面为设计寻求规则

前言

用户界面的本质是资源的互换

用户为产品提供时间和注意力,产品为用户提供单位时间内最大价值的内容

当视觉设计师介入其中后,他们的关系可以用这样一幅图表示。
版式一课:以点、线、面为设计寻求规则

表现层作为用户体验五要素的最具象层面,解决的是产品视觉效果的呈现问题。视觉设计师需要借以合理的版式和视觉手段来保障用户在单位时间内获取最多的内容资源,即实现信息的高效获取。

信息的高效获取来自合理的视觉引导(信息阅读的优先级安排)。我们一直在说的层次清晰、低信噪比、沉浸感等视觉体验在本质上其实都属于合理的视觉引导。

借以实现的手段包括我们熟知的卡片、留白、配色、字体层级、图标等等。这些手段庞杂繁多,体系化的建设必不可少,但是漫长的积累沉淀中很容易被其淹没,而且每种手段背后又是什么样的底层逻辑和依据?

为什么卡片让页面层次清晰?为什么面性图标拥有较高的辨识度?为什么步骤条会有横纵之分?…

点、线、面解决的就是这些内在逻辑问题,在你熟知它们的特性后,绝大多数的设计手段都可以被其解释和串联起来,并且让你的设计决策和设计推导更加有据可依,而不是简单的“凭感觉”。

如果我们将各种设计手段比喻为各类武学外功招式,那么点线面理论就好像吐纳内功,虽为最基础的入门心法,但其对内息的作用影响着所有招式的发挥。


点、线、面与康定斯基

版式一课:以点、线、面为设计寻求规则
点、线、面理论最早由瓦西里·康定斯基提出,他所著的《点线面》一书最早曾作为包豪斯学院的形式课程进行教学。他将所有艺术的形式都归结于点、线和面三种元素的关系。
版式一课:以点、线、面为设计寻求规则

康定斯基对于点、线、面的独到思想为设计领域产生了极为深远的影响。我们目前最熟知运用到它的的一个领域就是平面设计领域。

通过这个理论,平面中所有的元素都可以看作点、线、面三类形态,并且每类形态的存在、变化和结合,都可以为画面传达出不同的样式和风格。

虽然用户界面设计和平面设计分属于两个完全不同的设计行业,但点、线、面理论是相通的。

点、线、面浅谈

点、线、面具有普适性、相对性。前文已经讲过,点、线、面这三种形态存在于所有的元素中。不论是哪种元素都可以用点、线、面来表示。并且,点、线、面之间是相对的,并非对元素的纯粹定义。

比如一个界面中的面性图标,我们可以将其看作一个点,当相对于线性图标时,我们又可以将其看作面。如果这个图标和其他图标一起组成标签栏,那这串图标也可看作线。
版式一课:以点、线、面为设计寻求规则

下面,我将分为点、线和面三大板块,来讲述每类形态基于自身维度所拥有的特性,并如何通过存在、变化来在界面中发挥着各自的作用,实现合理高效的视觉引导。
今天讲点部分,正文开始。
版式一课:以点、线、面为设计寻求规则

万物自一点始。
正如宇宙大爆炸源自一个引力奇点那样,点是万物之源,也是所有元素的基础。点从维度上来说属于零维,它没有办法像线、面那样延伸,这决定了点本身的向心性和自由性。
版式一课:以点、线、面为设计寻求规则
康定斯基将点描述为“雄辩与沉默”,这句话的意思就是,当点独立存在于一个画面中时,它便开始“雄辩”自己的存在,让自己成为焦点;而当它的数量增加时,点便倾向于“沉默”,并且根据它的排列方式倾向于对应形态的特性。

向心性

当一个点独立存在时,点的向心性协助它成为视觉焦点。此时点主要起到定位的作用。

以支付宝首页为例。在以往的界面设计中,我们往往在每个模块标题旁添加一个小小的短线,而这个小短线便是作为定位点引导用户迅速注意到标题,实现不同内容的快速定位。并且作品包装中也常会用到它。

版式一课:以点、线、面为设计寻求规则

不过在Complexion Reduction去形式化的浪潮洗礼下,这种方式已成为过去式,现在我们会直接用标题本身作为点进行定位。
版式一课:以点、线、面为设计寻求规则

但是,在其他更多的场景下,仅靠文字其实并不能很好得发挥点的向心性,尤其是一些信息较多、需要迅速辨识的场景下。这时候,我们通常会引入另一种要素——图标来指代它。
图标本身可以用来表意,而独立、精致的特性让它很适合作为点元素来处理。

比如app中的标签栏中的图标就可看作点元素,每个图标以其所具备的向心性帮助我们迅速得聚焦到它所在的位置。列表页的每个字段前也会加入对应含义的图标来帮助用户迅速锚定当前栏目,并且由于图标拥有更高的辨识性,这让阅读变得轻快而富有节奏。
版式一课:以点、线、面为设计寻求规则

下图所示为Google日历中的活动页表单,当我们将字段前的图标去除时,阅读没有了强定位元素将会缺失节奏,信息获取变得困难和缓慢,影响用户表单的填写。
版式一课:以点、线、面为设计寻求规则

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 版式一课:以点、线、面为设计寻求规则求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们