评论

评论

这篇文章还没有任何评论。快来成为第一个评论者吧!

闲谈实验室#3:设计思维-解读设计能力

闲谈实验室

设计思维-解读设计能力

2019年1月2日 | IN CHATLAB | BY UX·range

内容简介:

本期内容的问题来自于一个看了我上篇文章的读者,对我说设计现在很难了,你也该让开发知道设计有多难,让开发自己学习下设计思维。设计思维这个概念就很大了,不是一言两语可以解释清楚的。那么设计有没有什么固定的模式可以让开发快速了解学习的呢。苦思许久那这个模式大概就是格式塔原理了。于是就展开阐述了格式塔原理

延伸阅读:格式塔原理、设计心理学

预计阅读时间:18分钟

正文:

解读设计的源起

“你很没有审美耶!”,“老板,都是前端没有写好样式”,“我让前端改下样式”…

日常设计师甩锅语录

这些话语是不是很熟悉,是不是充斥着日常生活。是不是在一次次质疑中怀疑自己的审美出现了问题?是不是感觉设计小哥哥/小姐姐离自己越来越远?是不是因为设计一句话就要加班到天明?如果是的,那么你可能欠缺一些解读设计的能力。

如今,前端开发“应该”做的事情越来越多,而且很多人从前端开发到后端开发再到架构师,很难再提高这些看似可有可无但是又不可或缺的设计解读能力

很多时候,设计和前端是分割不开的。当然我这里说的设计,不是真的要你弄一个画面或完整的设计图。很多前端同学是不是也体会到了,随着项目规模的扩大,项目中的CSS代码会越来越多,越来越臃肿,如果没有定期及时对其维护,Css代码会不断增加,直到最后这个错综复杂的大网分布在网站的各个角落,然后你会发现,修改一个样式将是举步维艰,那么怎么办,只能用增加新代码去代替删除那些过往的代码,最后这就陷入一个恶性循环之中。

发生这个问题的情况,和设计嫌弃你做的网站和效果图差别过大的原因一样。那就是缺乏“解读设计”的能力。拥有解读设计的能力,不仅仅是为了完成设计的呈现效果,更多的还有让CSS代码更易于管理,维护。成为那个“闲人”

写bug,是“优秀”的一种表现,代码写的好,bug少,看起来就像一个闲人;注释多,代码清晰,任何人接手都非常方便,看起来谁都可以替代!代码写都乱,每天风风火火改bug,各种救火,解决各种线上重大漏洞,于是顺理成章成为公不可被替代人才。

网上程序员段子

无处不在的设计

设计是把一种设想通过合理的规划、周密的计划、通过各种感觉形式传达出来的过程。人类通过劳动改造世界,创造文明,创造物质财富和精神财富,而最基础、最主要的创造活动是造物。设计便是造物活动进行预先的计划,可以把任何造物活动的计划技术和计划过程理解为设计。

摘自『百度百科』

也许在大家眼中设计是那种玄之又玄的审美、美学这种视觉上的事情,其实不然,设计是一种手段,一个动作,它是为了达到某种目的而产生的行为的必然导向,它是一种有目的性的创作行为而不是一味的为了好看抛弃了其最终想要达到的目标。当然,设计的任务不只是为生活和商业服务,同时也伴有艺术性的创作。那么设计既然是一种行为,那么必然有一种思维去指导它运作。

设计思维

设计思维是一种方法论,用于为寻求未来改进结果的问题或事件提供实用和富有创造性的解决方案。在这方面,它是一种以解决方案为基础的,或者说以解决方案为导向的思维形式,它不是从某个问题入手,而是从目标或者是要达成的成果着手,然后,通过对当前和未来的关注,同时探索问题中的各项参数变量及解决方案。

摘自『百度百科』

这么说,在实际电商项目中,设计师发现有一个购买页面的流失率很高,最后发现,是一个按钮导致了这个问题,由于按钮只有一种状态,即那种高亮的点击状态。所以用户在未填写完全的情况下一步一步的进行试错去点击那个高亮按钮,最后导致放弃了这个购买行为。

按钮的三种状态

于是设计师为了解决这个问题,提出了一个方案,就是按钮需要三种状态:第一种,低对比度(灰色按钮)状态按钮表示不可点击。第二种,高对比度(高亮)状态按钮表示可点击,最后第三种为比高亮稍微暗点状态的按钮,表示按下这个过程。于是,在这个设计之后,该页面转化率变高的原因。

这也是为什么设计师常常要求开发做三种状态的原因,是不是突然觉得有点熟悉,对就是“hover”、“active”这些状态,原理是一样的,起到提示作用。

拥有了这种思维,你就可以发现一些设计师没有表述清楚的内容,就可以去找设计小姐姐/小哥哥聊天了并且成功的把锅甩给设计师了(笑crying)。

设计模式

设计模式是一种被反复使用,可起到指导性作用的一个工具,它能大幅度提升研发团队的确定性,快速确定那些不需要被设计的页面的视觉且保持一致性,让设计被关注,让业务指导设计。

设计模式可以在一定程度上给予产品中反复出现的设计问题一般解决方案。开发或者设计可以直接使用设计模式完成界面设计;也可以根据设计模式,解决一些衍生出的业务。

完整的设计模式会包括模版、组件、示例三大部分。其中组件是最小单位,其组合构成模版,再由多张模版构成功能示例,启发开发如何搭建出常用的功能。

组件

基础组件:构成系统最基础的元素,如按钮、分页器。

业务组件/区块:区块级示例,一般由多个组件构成,如 PageHeader 通用页头;在技术实现上,可能是代码片段,也可能是组件,也可能是先代码片段后变成组件。

摘自『AntDesign』

那么组件有那么多,大致分为什么呢?大致我觉得可以分为下图几点:

按英文命名

总结

  • 一级名称标题直接显示名称的英文名就好了如”nav”,次级标题在原有的一级名称前加“sub”如”subnav”
  • 表示方位的描述词,如top、left、right、bottom,结合一级名称标题使用如”rightsidebar”
  • 英文名过长可进行简化,如”message”简化为”msg”;”picture”简化为”pic”;”image”简化为”img”;
  • 总结下命名,大致是遵循一定规则进行命名,最好能列个表出来,这样后期防止自己将其遗忘。

常见的设计手法

UI设计师们常见的手法理论基础多源自于格式塔学派,常见有对齐的应用,在实际工作场景中,将视觉元素或者单元进行对齐,才符合用户的认知特性,从而也能引导用户的视觉动线,让用户更流畅的接收信息。

在界面设计中,设计师经常还喜欢应用一些心理学的东西来使得界面变得更具有规律。大致可以分为六点:接近性、相似性、封闭性、连续性、对称性、情感化。其大致是应用用户观察和思考的规律来设计界面。 格式塔学派(德语:Gestalttheorie) :是心理学重要流派之一,兴起于 20 世纪初的德国,又称为完形心理学;主张人脑的运作原理是整体的,『整体不同于其部件的总和』。

摘自『维基百科』

接近性

负责的点餐App-选择就餐人数页面

接近性又经常被称作亲密性,如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。如上图的点餐App,通过亲密性的调整,让人一样就看到了标题、选择点餐人数模块、确认点餐人数按钮。

在横向间距关系上,为了适用不同尺寸的屏幕,在横向采用栅格布局来排布组件,从而保证布局的灵活性。大部分情况下,视觉单元距离应该尽量大于一个视觉单元内部的距离。

图片来自Grid 栅格

在竖向间距关系上,通过一个基础间距来确定单元与单元之间的距离。一般情况下划分为3种间距。举个例子,基础间距为8px,假设视觉单元间最小间距为16px,则下一级间距距离应该满足(16+8n)px,通过这个基础间距倍数来拉开信息层次关系。

相似性

华为云服务器购买页面

相似性常见的应用手段为对比,对比也是增加视觉效果最有效方法之一,能最快的帮助用户在不同视觉元素中快速分出层次,选择设计师想让用户选择的内容。如上面的例子,华为通过增大“通用计算增强型KC1”这一块的面积让用户直接看到更实惠的内容,从而促使用户购买,其做法也是为了其开拓市场(毕竟和腾讯云、阿里云服务体量过小,必须通过低价吸引人来购买)

利用强对比的例子有上文提到的“按钮的三种状态”;那么对于弱对比的应用,常用于业务上需要用户谨慎决策的场景中,这里的业务需要系统保持中立,不能使得用户被诱导而做出选择。

封闭性

本质上是对于完整状态的认知倾向,比如常见的“操作闭环”

连续性

连续性指的是凡是具有连续性或者共同运动方向的物体容易被看作一个整体,常见应用手段为重复。重复的利用某些单元或者元素,可以有效的帮助用户降低学习成本,也可以帮助用户识别出他们直接的关联性。

华为云服务器宣传内容

对称性

主要是应用视觉元素的重量不同,来营造视觉平衡。区别于物理对称,它通过元素的大小,颜色重度等多个维度来平衡最终达到一种视觉的平衡。

对于对称性的实际应用,还有一种,即是打破这种对称性,使得元素“不平衡”,通过视觉的不平衡来引导用户的视觉流。

情感化

在界面中,还有一个很重要的设计是情感化设计,主要是为了通过色彩、大小、对比等手法引起用户对某种情感的共鸣,更容易让用户在某个场景下做出某种选择。常见手段为通过色彩帮助营造网站的整体氛围,比如历年双十二活动,营造的喜庆的气氛。在情感化设计中,需要做到清楚知道业务目标需要哪种情感,并准确通过视觉元素传达给用户。

双十二电商活动Banner渲染喜庆气氛

以上为设计师在日常工作中的常见的运用知识基础。当然日常工作中,设计师不会给你表明他为什么这么做,你需要了解并猜测他们这样做的意图,并且将其应用到实际工作中。比如写CSS时候,可以通过这个原理将公用样式提取出来,详细操作手法下文有提到。

解读设计规范

在你遇到了一个好的设计小哥哥/小姐姐,你会得到一个完整的设计规范。那么这份完整的设计规范由什么组成呢?不同的设计师给出的规范也大致不同,不过基本都是基于设计模式制作而成。

由模式开始

在上文提到模式由“模版、组件、示例”这三个模块组成。其中组件是最小单位,但是组件则是由一个个元素组成,元素则是由一个个属性构成。

某电商项目规范

如上图,是我早期做的设计规范的一个目录。由于没有做好分级,所以稍显凌乱。但是通过目录,大致可以看出1-4为对常见元素的穷尽罗列,其对应的是前端样式的单条样式。而后的5-24看名称大致可以猜测为由元素构成的组件。

举个常见的例子,这个元素“文字尺寸”页面,由字号、字体、行高三个元素组成。如果设计强烈要求使用固定的某种字体,而这个字体是只有一种,就可以写进通用样式里去了。其次,经常被忽略有行高这一属性。在设计师眼里,行高是设计的重要元素。如果不注意行高问题,最后写出的界面和效果图不一样也是很正常的(缺少细节)。

某电商项目颜色属性规范

比如颜色属性,一般设计师在规范中,对颜色出现场景都进行了标注,而在开发的时候如果想不起来可以回来参照对比下。可以辅助具体的PSD/Sketch 等源文件进行开发。系统的罗列了出现在整个项目的颜色,并对颜色进行了注解,方便开发理解。

伴随着对这些基础元素的解读,你也会对项目的细节有了一定的理解,这样在看到整体的组件,模版、示例才不会不知所云。一脸懵逼。

解读页面模式

在设计规范中,设计师会将所有组件进行归类,而后分别在相应的类别里穷尽显示所有的组件。比如在项目中的进度条整个类别,我们可以看出在不同进度时期的不同样式,大致分为:“无状态”、“已到达状态”、“失败状态”的几种样式。它定义了在不同的业务环境中使用哪种样式。

某电商项目物流追踪模块

这些组件组成了一个个模版,你可以根据这些模版来理解这个组件大致的布局是什么样的。有哪些地方是弹性布局等。

某电商项目临时公告模块

以上的例子可以看出左边有一个写死的固定图标,这个图标大小是一个宽:42px;高:42px 的正方形。右边有一行字,这个字与左边图标的间距是20px。其次根据我们对于上文设计的理解,我们不难猜出,这行字与背景这个灰块是纵向居中对齐的。然后这行文字的宽度是根据右边图标或者按钮来决定的。通过这个分析,大致就可以这个组件大致的布局。最后提可以提取这个组件的公用样式了。

提取公用样式

在解读完页面模式后,就可以开始写代码吗?不,你还需要分析下页面有哪些相同的样式或者模块,将其提取成为一个单独的类再引用,这样不仅仅可以精简文件大小,还可以缩小代码量,最最主要的是它更易于重用和维护。例如在下面的按钮的例子:

你可能会写:

这三个样式的区别在于文字颜色的不同,我们可以将其公用的样式提取出来,然后分别设置其不同的样式。(提取公用部分尽量做到利用CSS继承减少代码量,正如我们所知,一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这样可以小幅提升性能。常见的可继承属性有:color、font-size、font-family等常见不可继承有:position、display、float等)

提取了公用部分,然后只需要在页面上分别引用normal、press和disable等,这样代码进行了优化,后期维护起来也更方便,如果需要增加其他额外的按钮,只需要编写不同的样式,和btn配合使用即可。

当然这个例子很简单,实际工作中的项目可能比这个复杂的多,但是我们需要尽可能的重复提取相同的元素「在提取公用样式的时候,需要注意样式是全局共用(整个页面)还是局部共用(模块内)」。

无设计规范怎么做

在一个完整的大型项目中,设计师没有提供相应的设计规范,并且只提供jpg效果图,这时候就需要找他要源文件。让她讲源文件按产品页面一个一个都给出来,而不是合并组到一个PSD里面

拿到这个PSD源文件了,由于没有收到规范,你对这个项目的控件样式完全一无所知,这时候不要急着写css代码,首先对整个页面进行分析,基本关注于以下几个面:

  • 页面分成了几个模块,哪些模块是公用的,常见的如头部和底部,还有一些菜单栏,通用边栏。
  • 分析每一个模块有什么样式,提取出公用的样式,并分清哪些可以全局使用,哪些只能在组件内使用,这些样式包括了状态:比如选中,按下,禁用状态等。

分析过后,可以写代码了,目前来说,比较推荐的是SMACSS方法;什么是SMACSS;SMACSS定义了五种样式类型:Base (基本)、Layout(布局)、Module (模块)、State (状态)、Theme (皮肤);拓展阅读可以去www.w3cplus.com的《如何使用Sass和SMACSS维护CSS》。

当页面写好后,我相信基本可以达到设计师的要求了。那么还有个问题,由于产品自身业务问题,经常会改方案,该怎么办?我们需要在完成页面后,将那些重复的或者不够简洁的代码,这时候就是要去优化这些代码,尽量提取重复元素,尽可能精简,然后为以后可维护性提供了便利,磨刀不误砍柴工。

偷懒的办法:使用工具提取样式

在这段内容中,我们将以PxCook为例子,事实上很多工具都具有这项功能,并且还带有协同功能,比如:蓝湖等等。

PxCook官方介绍界面

我们先将设计稿源文件拖入PxCook中,然后用鼠标点击其中的一个按钮,我们就可以在右下角边栏快速知道它的样式了,然后我们可以点击边栏右上角的复制进行复制,然后到一个空白文档里进行粘贴;然后对另一个按钮也进行同样的工作,对比一下两个样式,提取相同部分称为公用部分,这样就可以快捷地精简代码了。

62 0