0%

设计笔记 | 20190821

设计笔记是一段周期内,根据网上冲浪及阅读等不同渠道获取的设计、交互、产品思维等领域的笔记,文章大都以摘抄为主,也有少部分自身感受。

“设计笔记”内的图文大部分来自网络,仅供个人参考消化使用,不做任何商业用途。原文链接均在文末。

1. 关于“高大上”的设计感

个人理解的「高大上」不仅是作品表现形式的高级感,也关乎时间的维度。有着持续生命力的经典设计如包豪斯或无印良品式的设计是「高大上」的,而区别于当下泛滥、普遍、常见设计的有独特风格化视觉语言的,也是另一种形式的高级感。

传统意义上的「高大上」即所谓的高级感可以用现代主义建筑大师密斯·凡· 德罗那句著名的「Less is more」(少即是多)来形容。

颜色传递情绪少

传递情绪少的颜色带来治愈能量,降低色彩饱和度、多使用不明确色相的颜色,消减对情绪的影响。

字体不宜过多/文字符号化处理/中英文混排

字体选择一般不超过三种,多使用文字大小对比营造信息层级关系。

文字图形化或符号化处理,图形从视觉表现力和神秘感比文字更胜一筹。这大概是英文比中文更加“高大上”的缘故。使用拉丁语、丹麦语等不熟悉的语言文字,疏离感能更刺激感官突显高级感。

留白

突出主题内容,营造空间感,延伸画面,准确传达信息。

工艺与材质

善用工艺与材质,提升作品高级感。

几何元素和色相对比

强化视觉主体

营造凝聚力与速度感,打造视觉张力。整幅画面需要有非常明确的视觉中心店,元素布局都应该清晰地围绕这个点来设计。

2. 网格与版式

网格的构成

大体结构:

  • 版面:版面是页面中所有构成部分的总和;
  • 版心:版心是页面中主要内容的所在区域;
  • 外缘留白/外页边距:外缘留白或外页边距有助于将文本框纳入整体的设计中;
  • 订口:订口是装订时所需要的留白,通常存在于两个页面之间的折叠部分;
  • 栏间空白:两个栏目之间的分隔区域;
  • 底部留白/底页边距:页面底部的留白区域。

网格的大体构成

局部结构:

  • 空白:空白可以提供如注释和说明文字等二级信息;
  • 基线:基线是网格的基本结构,用来引导文本和其他元素在设计中的布局;
  • 栏目:栏目是有组织的放置正文的地方,并让读者容易阅读;
  • 空间区:空间区可以为文字、广告、图像或其他信息构成特定区域的模块组或栏目组;
  • 模块:模块是给网格内图像元素留出的空间,相连接的网格可以建立不同的行列模块;
  • 标志:标志能标明出现在同一位置的素材的方位,包括页数、页首标题和页脚(标头、页脚),以及图标。

网格的局部构成

表现形式

  1. 分组
    聚合成组的元素能使相关信息联系起来。
  2. 边界
    为了使边框整齐美观,常常使用元素的远离来与边框保持一定的距离。
  3. 水平
    利用网格来引导读者视线横跨一个单页或通页时,设计元素会依照这种水平运动的趋向来编排。
  4. 垂直
    当设计师通过运用网格中的各个元素来引导读者视线在页面上下浏览,就是垂直形式的最好表现。垂直形式的垂直线不一定要在中线的位置。在平面中设置一个轴线,元素按照这个轴线做重心的平衡这种表现形式更好,这样不对称的版面具有一定的动势和张力,也更有冲击力和跃动感。
  5. 斜角
    把网格倾斜一定的角度,一般会倾斜至 30°、45° 和 60° 这三种角度,这些倾斜的网格发挥的作用原理与水平网格相同,但由于它们是倾斜的,设计师便能够以不同寻常的方式展现自己的创意。
  6. 轴线
    网格中的轴线是一条隐形的平衡线或重力线,它产生并受控于页面元素的位置和布局。

    运用元素比例

在设计中改变图像或文本等元素的比例,页面就能营造出跃动率和动势。

元素比例以固有样式出现时,它们之间存在一种消极关系。反之会出现积极关系。消极与积极可以理解为“动与不动”。

消极关系适用于古典书籍或传统平面设计。

3. Apple谈导航设计

界面设计的本质

在 Apple 的团队中,我们通常使用「Human Interface」一词来代替「User Interface」。

「user」一词仅对人与界面的关系进行定义,显得相对狭隘;而「human」则能更加细微地揭示出我们在为谁而设计。当我说自己只是个普普通通的人,言下之意就是我身上存在着各种不足,绝非完美。同时,「human」一词也能体现出我们身上最为高尚的品质。当我们感受着彼此身上的人性时,我们所指的即是人类的善良、仁义、慷慨等美德。

界面设计工作的本质是服务于他人。其中最为根本的目标并非是打造「好看的」、「架构清晰的」、「简约的」、「聚焦的」产品,纵使这些特质极为重要。真正的目标在于服务他人,在于以积极的方式影响着他人的生活与工作,在于能否满足人们的实用需求或是情感需求。

经过良好设计的 app 应该为人们提供这些所需,即:

  • 操作结果易于预知,使人们感到可靠可信。
  • 信息清晰易懂,帮助人们有效制定决策。
  • 流程精简直白,帮助人们高效完成任务。
  • 外观美好,令人愉悦。

导航系统的设计

好的导航系统会提供全面而易懂的目标位置列表,会提供足够的信息来帮助人们对目标位置的内容产生明确的预期;好的导航系统是高度情境化的,会随着导航层级的深入而不断提升信息的具体化程度;好的导航系统会清晰地呈现出当前位置与目标地点之间的关系,帮助人们掌控方向;好的导航系统还会提供明确的出口,让人们可以随时退回到起点。

即时、人性化的反馈

嵌入式的表单校验可以为人们提供即时的验证反馈,以便及时更正输入,避免在提交表单时产生问题。

你也可以试着推测人们的真实意图,思考人们在犯错时的本意是什么,然后进行合理的响应。例如在 Things 3 中,如果你输入了本不存在的 6 月 31 日,app 不会直接报错;取而代之地,它会自动将日期更正为 7 月 1 日。这个细节相当精彩,同时也非常人性化。

很多 app 在反馈机制上表现得差强人意。主要原因在于,当我们进行设计时,很容易陷入对静态界面的思考,而忘记了互动体验是由时间和状态变化所驱动的,期间可能产生大量的情境转换。

好的反馈机制会让人们感到正在和 app 的设计者进行对话。

参考文章:

  1. 当我们谈论设计的高级感时,到底在说什么?
  2. 提炼14本书的精华,写下这份超全面的网格基础手册
  3. 图解WWDC 设计分会:导航与反馈(2)