首页

创建设计系统前,6 件必须知道的事情

资深UI设计者

编者按:资深产品设计师 Taras Savytskyi 将自己在初创团队中的设计经验浓缩成为今天的这篇文章,如果你也是设计团队中唯一或者主要的设计负责人,需要考虑到设计系统的问题,那么这篇文章的6个总结,应该能够给你不少帮助:

创建设计系统前,6 件必须知道的事情

成为公司当中唯一负责产品设计的设计师,其实并不是一件容易的事情。你可能会非常忙碌,因为你需要处理很多事情。你需要考虑产品的设计,交付物料,和研发人员协作,在沟通会上做QA,做用户访谈等等。

此外,你可能还需要保持你的设计技能持续精进。比如 Figma 或者 Sketch 更新了新的功能,推出了新的插件,你可能需要持续关注。我们通常会使用 Figma 来作为主要的设计和协同工具,所有的设计、探索、头脑风暴都在其中完成。

我加入 Statflo 之后不久,作为公司唯一的设计师,我需要设计一个全新的 APP,在这个过程中我需要设计一个全新的设计系统,帮我足够快速地创建后续的原型。

1、无需犹豫,直接基于现有的开源设计系统

创建设计系统前,6 件必须知道的事情

刚开始的时候,你不需要太多的素材。你可以直接调用绝大多数的原子组件,比如按钮、下拉菜单、表单、字体、配色,等等。默认初始状态的样式无关紧要,因为后续点击几下就能够快速调整样式。

但是这也意味着,你需要在第三方设计系统当中,找到重要的、足够灵活的、合适的组件来套用。你可以从下面几个设计系统开始着手:

免费: Ant Design Open Source, Lexicon DSL

付费:Tetrisly , Venus Design System73px

2、主要关注基础组件、颜色和排版

创建设计系统前,6 件必须知道的事情

在此之后,你如果要继续推进你的设计系统,你需要首先关注几件简单的事情:配色、排版和基础组件。

完成这几个部分能够帮你更快地完成整个体系的搭建。比如你预设了不同状态的配色,那么当你完成某个UI组件的默认状态的设计之后,可以快速添加其他状态的样式。

又比如,如果你不确定在输入字段当中使用什么图标,那么你只需要创建一个 16×16 的正方形,使用灰色填充,作为占位符,等后续图标素材确定之后,再填充进去就好了。

3、总是从一个组件开始设计

创建设计系统前,6 件必须知道的事情

当你是初创团队中唯一的设计师的时候,你有很大概率需要自己构建一套设计系统。如果你想在这件事情上节省时间,那么最好的方法,就从你当前正在做的这一个 UI 组件开始,将其中所有的元素转化为固定的组件,逐步拓展出设计系统。

以这种方式来执行,可以节省大量的时间,并且这种方式能够帮你更快明确哪些元素在一开始可能就是重要的。

在理想情况下,你的设计流程是绘制小元素,然后逐步组件成为你所需要的组件,这样的处理机制让你无需花费时间来反复更新组件的设计。

4、使用 Figma 当中的「Master」插件

创建设计系统前,6 件必须知道的事情

不过,以这种方式来创建设计系统的时候,你可能会碰到一个问题:你可能会忙于设计,而忘记将创建特定的组件,相反可能会复制一堆完全相同的画板。这个时候,手动撤销操作可能是一件极度麻烦和无聊的事情。这个时候,你就需要一个专门解决这种问题,这个插件名为 Master,创建者是 Gleb Sabirzyanov,它可以帮你将这些重复的画板转化成为一个固定的组件。

但是这还不够。如果你执行的操作足够多,这些你所复制的元素可能已经应用多个画板和页面当中,这个时候,你需要借助名为 The Similayer 的插件,来帮你搞定相似组件的识别问题:它可以一键识别出分散在各处相同的元素,然后你可以将他们转化成你所指定的 UI 组件了。

创建设计系统前,6 件必须知道的事情

5、利用项目间歇来完善设计系统

有时候项目和项目之间是有间隔时间的,这个时间段就特别适合你去覆盘之前设计的组件,将其逐步改进融合成为一个系统。相信我,你在这件事情上所花费的时间,将会在你下一次创建新的功能和组件或者原型的时候,得到回报。

我一直试图在自己每周的日程表当中,腾出几个小时的时间专门来做这件事情,帮我完成我的设计系统的增量更新和迭代。

创建设计系统前,6 件必须知道的事情

6、一开始不要纠结于正确命名

在创建设计系统的过程中,尤其是当你在不同的项目过程中,各种组件总是没法正确的命名。根据我的经验,在设计的时候,怎么命名方便怎么来其实是很合理的,一开始一定不要纠结,留着在后面的阶段再行解决都好,之后单独梳理命名、路径、结构、嵌套等等关系,比起你一开始做某个小组件的时候就纠结这些事情要更加合理,也更加方便。


文章来源:优设 作者:VMIC UED

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





Web表单设计——你不知道的冷知识

ui设计分享达人

当我们设计Web表单时,往往用最直觉的设计经验本能驱动我们去解决一些看似在界面设计中最简单的问题,但每每到细微之处,又会有无数疑问从细节中冒出来给我们的设计造成困扰。

例如:在表单界面Label(标签) 和 Input(输入框) 上下还是左右排列合理、Label要不要加冒号、输入框到底多宽合适等等......

以上这类问题看起来并不影响用户完成任务,很久以来也少有人关心这些细微之处会不会对用户有什么影响。

以至于,我表达想写一篇探究这些细节的文章时,同事会偷笑说:你都开始研究标签末尾要不要加冒号了吗......,太冷了——真是个冷知识!

确实如此,这些偏门、细碎的内容,鲜少有人会去留意和思考。因此我在写下这些分享内容时期望可以达到目标是:“冷知识虽然冷,但有用”。用我了解的这些表单设计冷知识:启发你的冷思维、引出你的热思考。


话不闲聊,我们开始讨论第一个问题:

 

///


01.标签末尾要加冒号吗


有个表单细节不知道你有没有想过,标签末尾是否要加冒号?

这个问题在我前团队发生过激烈争论,有同事说:“不要加,占用间距,而且没人会留意它......”,也有人说:“要加,从含义上讲,冒号的作用就是提示上下文或总结上下文的停顿。加上之后能更好表示标签与输入域的关联......."。

听起来好像都有些道理,那到底谁更对呢!

首先,我们追溯一下 Web 发展史,早期可访问性核对清单中通常坚持要标签带冒号,因为屏幕阅读器一度必须依赖各种技巧才能理解标记不明的表单


而随着技术发展,Web表单使用“label”标签(tag)可以做正确的标记,那么屏幕阅读器就能通过标记(markup)把标签(label)和相应的字段对应起来则无需再借助冒号。

不过在客户端又有些意外!曾经 Windows Vista 指南中明确要求使用冒号, Mac Aqua 也有此要求但规则会稍灵活一些。这种情况是因为某些情况下屏幕阅读器在桌面环境与可阅读源代码的网页标记相比会遇到一些困难,桌面环境不会直接显示代码。也是这个历史原因,造成 Vista 和 Aqua 各自都有大量其标签包含冒号的历史表单。因为实在没有必要把它们全部改掉,直到今天客户端的表单依旧延续这一规则。

通过Web发展史我们明白表单标签带冒号的产生是为了解决早期屏幕阅读器的识别,如今的屏幕阅读器技术已转变为识别标签的底层代码,无需借助这种形式了。所以从这点来看要求标签带冒号已经站不住脚了

 

那从情感角度分析标签带冒号的是否对用户体验有影响呢?

回到最开始,我和同事们的争论……

 

先简单说下答案,无任何影响!

在《Web表单设计·创建高可用性的网页表单》中,作者(卡罗琳·贾雷特)曾经做过大量的表单测试,最终证明从未有一名用户谈论冒号是否出现,即使是有些在其他环境中很介意标点符号的人似乎在线上表单中也未曾注意到。

 

从以上两个角度不难发现,无论是从技术发展还是情感体验,都证明可不必要求表单带冒号;因为可用性访问清单不再有这样的要求,用户研究也证明几乎没有人会留意表单冒号是否出现。

这样的结论,看似表单带冒号是失败了……,但这并不妨碍它作为一种习惯或传统延续至今,无论在客户端还是Web设计系统中仍然常见。例如:苹果电脑的Mac系统,国内阿里的Ant Design Web设计系统。

 

因此,得到以下几点建议:

如果你希望自己的网页表单与流行的桌面环境保持一致,请使用冒号。

如果你已有大量使用冒号的表单,请保持继续使用下去。

如果你在建立一个新的系统,你也可以索性抛硬币决定,不过要严格遵循一种方法。


///


02.哪种标签对齐方式更好


在表单中标签与表单域的对齐方式,如果你的团队已有明确的规范和使用场景,你只要拿来主义即可。可如果某天由你主导定义一个新的表单规范时,不知道你会不会重新考虑哪种标签对齐方式更好,怎样区分使用场景!

通过科学实验发现,无论是在眼动仪的热图,还是在许多可用性测试的观察结果中,用户在填写网页表单时视线主要集中在输入框的左侧。他们的视线几乎不会落到输入框的右侧,甚至都不会瞟上一眼。

以此为基础,我们在网页表单设计中有3种最常见的标签对齐方式:顶对齐标签、右对齐标签和左对齐标签。你可能会说还有混合对齐标签、内联标签、图标标签等,这些确实存在但并不是最核心的几种对齐方式,它们基本是在这3种形式上变化,不脱离本质。

 

下面我们逐个分析一下:

 

1.顶对齐标签:

马泰奥·彭佐从2006年7月进行眼动研究发现,从标签移动到输入框只需50毫秒。比左对齐标签快了10倍,后者需要500毫秒;比右对齐标签方式快2倍,后者高达240秒。能迅速填完顶对齐标签表单的原因之一,是因为眼球只需要在标签和输入框之间进行上下单向运动。

优势:

最利于减少表单填写时间(标签和输入框位置最为靠近);用户视线固定,动线一直向下(清晰的完成路径);节省大量横向空间(可用于以多种方式组合的相关输入框)。

劣势:

占用额外的垂直空间(如果可提供使用的垂直屏幕空间较小,应当谨慎使用顶对齐标签);建议使用输入框50%至75%的高度作为相邻输入框间距。

适用场景:

希望用户快速填写表单,完成任务;同时,当输入项存在主次之分时,对标签扩展性要求高。

2.右对齐标签:

如果要尽量减少表单占用垂直屏幕空间,右对齐能提供快速完成时间。马泰奥·彭佐的眼动研究发现,专家用户和新手用户扫视(眼睛运动)右对齐标签表单的标签和输入框的平均时间分别在170毫秒和240毫秒,而填写完成时间比左对齐快2倍。

优势:

标签与输入框相邻(方便快速填写)。

劣势:

右对齐布局造成左侧不齐,影响了快速游览表单的效率问题;若标签文字宽度变宽,右对齐还存在灵活度问题。

适用场景:

既要减少垂直空间,又要加快填写速度的场景。

3.左对齐标签:

在顶、右、左三种方案中,左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多,用户一般情况下都能将左对齐布局中的标签和输入框联系起来,只是花费时间较长。根据马泰奥·彭佐的研究,典型扫视时间为500毫秒,很长说明用户经历了沉重的认知压力。

优势:

容易游览标签;占用垂直空间较少。

劣势:

标签和输入框的相邻间距增大;适合于用户不熟悉表单要收集的数据或问题无法分成易处理的内容组,左对齐标签游览表单问题会更容易。用户只要上上下下阅读标签左栏,不会被输入框打断。

适用场景:

表单中存在较多的复杂或敏感信息,希望用户放慢速度、仔细思考(在一些注册类表单中较多使用)。

单从效率角度看,顶对齐标签>右对齐>左对齐,但是根据应用场景,效率快并不是我们选择标签对齐方式的唯一的指标。

因此,得到以下几点建议:

如果你希望用户放慢速度,仔细思考表单中每个表单项,左对齐标签是个好选择,特别是含有大量可选输入框或高级设置的陌生数据时;

而顶对齐标签在一些国际化产品的表单设计时,会有更好的延展性;

至于,右对齐标签虽然与表单域联系紧密,便于用户填写,但是要考虑好标签的长短不齐如何解决。能否精简标签内容,以及确定好表单与界面的边距。


///


03.标记必填与可选字段的困惑


许多表单设计中,有个常见问题:是否应该标记必填字段?如果表单中的大多数字段或全部都是必填的,我们是否仍然应该标记它们?

先简单回答:是肯定的,用户有时需要通过必填标记来评估工作量,了解输入信息量的最低限度。我会在下面具体解释原因。

 

了解不标记必填字段的诱惑

通常,设计师会觉得每个必填字段都有一个标记是重复的、丑陋的、占空间,而且干扰界面,甚至可能看起来很扰乱(有认知负担!)。因此通常采取以下一种或两种策略:

1.在表单顶部显示说明,说明中除非另有解释,否则所有字段都是必填;

2.只标记可选字段,因为它们通常较少;

3.在某些特殊情况下,也会什么都不做:相信用户会神奇地知道需要填写什么字段;如果不知道,那么只需要点击提交报错即可。

这些方法有什么问题?如果你这样想,我来告诉你

1.用户一般不喜欢阅读表单顶部说明。不难想象,用户不太可能阅读表单顶部的说明。表单字段需要自给自足,毕竟,每个字段都有特定指令——它的标签,为什么用户需要阅读其他任何东西来填写它呢?

2.即使用户阅读了说明,也可能忘记。你可能会说:用户阅读了顶部的说明,怎么就会忘记——这么简单的事情?

的确容易忘记,特别是当表单很长或填写表单被打断时(这种情况在移动端很常见)。即使用户记得,但这占用了工作记忆,增加了认知负荷。换句话说,你让用户完成任务更难了。填写表单本身对用户来说就相当有挑战性——为什么要让它更具有挑战性?

3.用户必须扫描表单以确定是否为必填字段。不难发现,无论是否在表单顶部包含说明,结果都可能相同,用户会忽略或忘记。他们会扫视表单,找到一个标记为必填或可选的标识。

而且有些用户甚至不会费心去环顾四周,他们只会做出假设。他们会想——“嗯,邮箱——不需要我的邮箱吧?先空着呢”。即使用户没有留空,也不得不暂停来思考一个字段是否需要填写,减慢交互速度并使过程看起来更长、更乏味。

想要解决以上问题很简单:标记所有必填字段。尽量明确和清晰展示每个必填字段,并标记它。当然,就像有些设计师所说:界面出现大量必填标识(红色星号*)确实会增加视觉噪声。甚至重复的星号 * 会带来一些认知恐慌。但相比之下,两害取其轻,这些负面因素是轻微的。


如何标记必填字段?

这里包含至少有两种方式:星号*(红色)和“必填”提示。星号*在网页上已经很常见,用户熟悉其含义。优点是它不占用太多空间,也看起来与标签文字足够不同,所以使用它。

可以使用其他标记形式吗?当然可以,但是最好遵循市面上常见的形式(雅各布定律),这样更符合用户认知。

星号应该在字段标签之前还是在字段标签之后?

这不一定有实际影响,但将其放在标签之前的一个原因是,只需扫视标签的最左边字符,就能轻松定位必填哪些字段。

星号*是一种视觉标记,应当仔细考虑表单中的标识位置。标识在标签左边能指引用户迅速浏览界面,并判断出必填项。如果在右侧由于输入框形式、长度各不相同,标识和输入框对齐会导致难以浏览和判断。


是否也应该标记可选字段?

虽然这不是强制性的,但标记可选字段确实减轻了用户思考:如果没有这个标识,用户要环顾四周,并根据其他标记字段推断该字段是可选的。如果“非必填”在字段标签旁边,那该任务会变得更容易。不描述可选字段,这没问题,但这样做会是一个很好的额外帮助。

为什么登录表单没有标记必填?

登录表单很短,一般由两个字段组成:用户名和密码,这两个字段总是必填的。如果使用星号*,标记这些字段的成本很低,并不会出错。但是,绝大多数用户都使用过很多登录表单,他们是知道要登录需要输入邮箱/用户名和密码的。所以,在登录表单中,可以省略这种形式。

而在注册表中不标记必填字段是危险的。注册表单因产品而异——不同公司在创建帐户时需要不同类型的信息。它不仅仅包含用户名和密码,所以请标记所有必填字段(包括用户名和密码)。

 

因此,提出以下几点建议:

基础前提,尽量去除任何不需要回答的问题,特别是涉及到用户隐私的内容。可以更容易让用户填完表单。

为了增加表单填写的机会,请尽量减少用户需要付出的努力和他们需要记住的信息。有很多方面有助于解决这些问题,但标记必填字段(以及可选字段)是最容易的方法之一。


///


04.表单域提供一些默认值有必要吗


先给出答案:这是肯定的!

在《选择的悖论》一书中,作者巴里·施瓦茨讨论了生活中选择过多的影响。并提出策略应付无处不在的过多选择。他特别叙述了智能默认的能量——即在满足多数人需要的地方放置选择——来帮助人们做出明智的选择。

而在Web表单中也有很多地方能利用智能默认减少不必要的选择次数或输入,加速表单完成过程。所以,只要合适就在表单域中预先为用户填写你认为他们想要的输入值。

通过提供合理的默认,能有效节省用户时间,就是这么简单。应用分担了用户思考或输入答案的工作。填写表单永远不是一件有趣的事情,如果这个模式能把表单填写的时间减少一半,用户会非常感激。

你可能会问:默认值不是用户想要的,误导用户怎么办?

在设计有默认值的表单域时,你要思考默认值是否是大多数用户可以接受的答案,如果不确信可以先去做一下用户调研,了解用户的心声。

就算默认值真的不是用户想要的,至少你也为他提供了一个示例来告诉用户答案应该是什么样子的。这一点也可以节省用户几秒的思考时间——或避免一条错误信息。

但并不代表所有的表单域都要给出默认值,我们只是尽可能的让用户节省时间。

 

如何使用:

在第一次向用户显示表单时,用一个合理的默认值预先填写文本框、组合框或者其他控件。也可以使用用户之前提供给应用的信息来动态地给出默认值(例:通过身份证自动识别出生日期;利用邮编,推导出对应省/市)。

如果只是因为你觉得不应该留下空白的输入域,那么不要使用默认模式。只有当你有理由确信绝大部分用户,在绝大多数情况下,不会修改这个取值时才提供默认值——否则,这将会给用户带来额外的工作!


///


05.输入框的宽度如何设定


有一个容易被忽视但实则举重若轻的问题,表单中输入框宽度如何设定?

在表单设计中,对于 Checkbox、Radio 等控件,很明确必须跟随内容自适应处理。但对于Input、Select等你会不会产生困惑,是定宽处理还是跟随内容更好。

不知道你是否试图这么理解过?输入框作为用户填写信息的主要方式,其表现形式是否可以提供给用户填写表单的有用线索。

唐纳德·诺曼的著作《设计心理学》中详细讲解过心理暗示方面的内容。而宽度的变化就是一种有效暗示。

在真实场景中,大部分输入框是存在理想长度的,那么就应该向用户暗示所需输入内容的长度来减轻判断负担。

下图就是典型案例,一个实际不需要花多少钱的金额输入框在左图中进行等宽处理,反而容易误导用户对输入金额的判断,造成一种不安全感。

表现形式要为用户填写提供有用线索,采用不同长度的文本框提供了暗示;这种暗示是一种有用线索,当输入框长度长短不定时,用户会很自然地思考为什么这样;填写输入框时会自然考虑这些线索。

请注意!保证暗示效果的同时,不要设定太多的宽度,反而会让表单显得凌乱;太少又会让表单看起来都像四四方方的盒子。最佳方法是找到适合产品的最佳模度值和数量。


什么是模度值和数量呢!

落在具体设计上要先梳理产品中常见的表单类型,然后设置一个默认宽度。以此为基础来有规律的增加长度,并考虑清楚它们的适用场景;从而定义出不同的模度,最终制定出整洁有序的模度规范。这样就可以让一线的设计师们跳过部分繁琐磨人的细节思考,快速搭建出合适的表单宽度并合理有效。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷 作者:百度MEUX

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



设计思维101

ui设计分享达人

设计思维史

很多人认为设计思维是全新的概念,这其实是一种常见的误解。设计已经实践了很长时间:纪念碑、桥梁、汽车、地铁系统都是设计过程的最终产品。纵观历史,优秀的设计师都应用以人为本的创意过程来构建有意义且有效的解决方案。

在 1900 年代初期,夫妻设计师 Charles 和 Ray Eames 实践了“边做边学”,在设计他们的 Eames 椅子之前探索了一系列需求和限制内容,即使在 70 年后的今天仍在生产中。1960 年代的裁缝师让·缪尔 (Jean Muir) 以她对服装设计的“穿着设计”方法而闻名,她非常重视自己的衣服在他人看来的穿着感受。这些设计师都是他们那个时代的创新者。他们的方法可以被视为设计思维的早期例子——因为他们每个人都深入了解了用户的生活和用户未满足的需求。著名的 I ♥ NY 标志背后的设计师 Milton Glaser 很好地描述了这个概念:“我们一直在寻找,但我们从未真正意识到......正是对人的注意让你真正掌握那些东西。”

尽管有这些以人为本产品的早期例子,但设计在历史上一直是商业世界的事后想法,是仅用于修饰产品的美学。这种主题设计应用程序导致公司创建的解决方案无法满足客户的实际需求。因此,其中一些公司将他们的设计师从产品开发过程的下游(他们的贡献有限)转移到了起点。他们以人为本的设计方法被证明是导致公司差异化的一个因素:那些使用它的公司已经从创造符合人们需求的产品中获得了经济利益。

为了在大型项目中能够采用这种方法,需要对其进行标准化:一种将创意设计过程应用于传统业务问题的正式框架。

1990 年代,IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语“设计思维”,并将多年来酝酿的方法和想法封装成一个统一的概念。


What——设计思维的定义

设计思维是一种伴随着过程而生的意识形态。

定义:设计思维是一种思想主张,一种注重实际操作,以用户为中心的设计方法来解决问题的思路。这种以用户为中心的设计想法有可能会带来创新,而创新可以带来产品差异化和竞争优势。设计思维包括 6 个不同的阶段,如下所示:


How - 过程

设计思维框架遵循 1) 理解、2) 探索和 3) 实现的总体流程。在这些更大的范围内分为 6 个阶段:同理心、定义、构思、原型、测试和实施。


同理心:进行研究以了解用户所做的、所说的、所想的和所感受的。

  • 想象一下,你的目标是改善新用户的入职体验。在此阶段,你将与一系列真实的用户交谈。直接观察他们的所作所为、他们的想法以及他们需要什么,问自己诸如“什么激励或阻碍了用户?”之类的问题。或者“用户在哪里经历了挫折?” 目标是收集足够的观察结果,以便可以真正理解你的用户及他们的观点。


定义:结合所有研究并观察用户存在的问题。在确定用户需求时,开始寻找创新机会。

  • 在定义阶段,使用在“同理心”阶段收集的数据来定义需求。整理所有观察结果,并在用户当前的体验中进行比较分析。不同的用户是否有一个共同的痛点?识别那些未能满足用户的需求。


想法:集思广益,提出一系列疯狂的创意想法,以解决在“定义”阶段确定下来的未能满足的用户需求。给你自己和你的团队完全的言论/想法自由;在此阶段没有任何想法是不合适的,收集大家的各种想法,此阶段想法的数量超过质量。

  • 在这个阶段,把你的团队成员聚集在一起,勾勒出许多不同的想法。然后,让他们彼此分享想法,混合再混合,在彼此的想法上再产生新的想法。


原型:为想法子集构建真实的视觉展示。此阶段的目标是了解以上几个阶段形成的想法中,哪些是有效的,哪些是无效的。在这个阶段,通过输出原型的过程,来权衡想法的影响与可行性。

  • 让你的想法可操作。比如,做一个新的登录页面,画一个线框图,并在内部寻求大家对此的反馈。根据反馈对其进行更改,然后用快速而简单的方式继续进行原型设计。然后,与另一组人分享。


测试:把原型给到你的用户来获取用户的真实反馈。问问自己“这个解决方案是否满足用户的需求?” “它是否改善了他们的感受、想法或完成任务的方式?”

  • 将你的原型展示给真正的客户,并验证它是否实现了你的目标。用户的观点是否有所改善?新的登录页是否会增加用户在网站上花费的时间?在用户操作原型时,持续测试和观察用户。


实施:将设计付诸实施。确保你的解决方案得以实现并触及到最终用户的生活。

  • 这是设计思维中最重要的部分,但也是最常被遗忘的部分。正如唐诺曼所宣扬的那样,“我们需要做更多的设计工作。” 设计思维不是魔法,并不能让你从实际的设计中解脱出来。Milton Glaser 的话引起了共鸣:“没有“创造性”这样的东西。仿佛创造力是一个动词,一个非常耗时的动词。这是在你的脑海中思考一个想法,并将这个想法转化为现实的东西。这将永远是一个漫长而艰难的过程。如果你做对了,那感觉就像是在创作。” 尽管设计思维对产品的影响很大,但只有执行设计想法才能带来真正的创新。设计思维的成功在于它能够改变最终用户生活的某个方面。第六步:实施——至关重要。


Why - 优势

为什么我们要引入一种新的思维方式?采用设计思维的原因有很多,足以值得单独写一篇文章,但总而言之,设计思维实现了这些优势:

  • 这是一个以用户为中心的思考过程,从用户数据开始,创建满足真实的而不是想象的用户需求的产品,然后用真实用户测试这些产品。

  • 它利用集体的专业知识并在团队成员中建立了一种大家都认同的想法,并得到广泛支持。

  • 它通过为同一问题探索多种解决途径的过程而来带来创新。

Jakob Nielsen 说:“一个解决错误问题的漂亮界面将会失败。”设计思维解放了创造力,并将它们集中在正确的问题上。 


灵活性 — 适应您的需求

上面的过程一开始会觉得很深奥,千万不要认为这就是打开成功之门的钥匙,相反,应该把它当作梯子,在需要的时间和地点为产品提供支持。

每个阶段都意味着迭代和循环,而不是严格的线性过程,如下所示。在构建和测试初始原型后,通常会返回到理解和定义两个理解阶段。这是因为直到线框原型化并且想法把变为现实,才能真正体现您的设计。很难一次性就准确评估您的解决方案是否真的有效,在这一点上,循环进行用户研究是非常有帮助的。为了做出正确的决策或确定开发顺序的优先级,还需要了解用户的哪些信息?之前没有研究过的原型产生了哪些新用例?

也可以重复阶段,通常需要在一个阶段内多次进行练习,以达到进入下一阶段所需的结果。例如,在定义阶段,不同的团队成员具有不同的背景和专业知识,因此看待问题的方法也不同。在定义阶段花费大量时间来使团队成员对问题的认知达成一致是很有必要的。


可扩展性——应用广泛

设计思维具有可扩展性。对以前那些无法改变思维方式的公司,现在有了一个大家都可以理解的指南,并增加了产品成功的可能性。这不仅适用于产品设计等传统的“设计”主题,还适用于各种社会、环境和经济问题。设计思维很简单,可以在各种范围内实践;即使是棘手的、未定义的问题。随着时间的推移,它可以应用于改进搜索等小功能,也可以应用于设计颠覆性和变革性的解决方案,例如:重组教师的职业阶梯,以留住更多人才。 

结论

我们生活在一个体验的时代,无论是服务还是产品,我们都对这些体验抱有很高的期望。随着信息和技术的不断发展,它们在本质上变得越来越复杂。每一次迭代都会带来一系列新的未满足的需求。虽然设计思维只是解决问题的一种方法,但它增加了成功和突破性创新的可能性。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷 作者:ZZiUP

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



iOS 规范与 Material Design 哪里不同?官网总结了这几点

lanlanwork


图片

 

1.  屏幕尺寸

图片

iOS 规范没有特别规定的屏幕尺寸,因为不同尺寸的 iPhone 宽度不同。

图片

以前常用的是 iPhone 8 的 375×667,后来常用的是 iPhone 11 Pro / X 的 375×812

但是 Material Design 的屏幕尺寸就很明确,一直都是 360×640,看起来就让强迫症很舒适的数字。

 

2. 手势指示条

图片

iPhone 的底部都是统一的手势指示条,而 Android 手机底部可能是三个导航按钮,也可能是手势指示条,甚至可能什么都没有。

Material design 的示意图上,通常底部没有任何东西,所以设计稿也可以简单点,手势条和导航按钮都不用放。

 

3.  状态栏

图片

iOS 的状态栏很高的,如果改成 Material Design 就会窄很多。

上面是比较简单的展示形式,下面是 Material Desgin 官网的示意图,高度是 24:

图片

 

4.  底导航

图片

iOS 的底导航比 Material Design 更高,给手势条留出的位置更高,而且常用磨砂玻璃做背景。

而下图是 Material Design 官网给出的底导航尺寸,字号规定是 12,非常清晰了吧:

图片

 

5. 下拉浮层

图片

iOS 使用很多 Action Sheet,而 Material Design 则较少使用这类浮层,较多使用页面。

当然,Material Design 也是有类似浮层的,叫做 Bottom Sheets,只是一般只作为菜单使用:

图片

 

6.  页签

图片

iOS 规范的页签是上图左侧这种拟物风格的,而 Material Design 的页签是上图右侧这种简单的线条风格。

下图是 Material Design 官网给出的尺寸规范,推荐字号是 14:

图片

 

7. 表单

图片

iOS 和 Material Design 的表单还是有挺多差异的,例如:

  • iOS 的表单项之间有分割线,而 Material Design 没有。
  • iOS 的表单项之间右侧一般放置箭头,Material Design 则可能是图标。
  • iOS 的文本框都是简单的下划线,Material Design 可能是矩形框也可能是下划线。
  • ……

内容太多不一一举例了,还是自己去看规范比较好。

 

8. 样式

图片

iOS 喜欢用浅色大阴影,而 Material Design 一般用比较细的深色阴影。

两边的复选框也不一样,iOS 喜欢全部用圆形,而 Material 则严格遵照复选框应该是方形的心理习惯。

 

对比

图片

对比一下两边的差异,看看有多不同。

 

总结

大部分公司为了节约成本,并不会为手机端搞两套设计,通常是两个平台规范都要综合考虑。

所以 Material Design 这把 iOS 规范直接改成 Material Design 的教程,显然是不建议直接拿来用。

在不同的场景,寻找最适合的方案才是上策。

不过要说设计资料,还是 Material Design 提供得比较丰富,适合新人学习借鉴,例如我给大家准备了几个 Material Design 的组件方便下载,关注公众号,后台回复【MD组件】:

图片

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》iOS 规范与 Material Design 哪里不同?官网总结了这几点

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




被吹爆的巴黎设计风格,到底有多牛?

lanlanwork


01.  什么是巴黎风格 

图片

如果要追溯巴黎风格的历史,得回到大概100年前后,这个城市的时尚和设计就已经开始得到重视,20世纪初,由于当地消费和随之而来的出口,巴黎的时装行业完全爆炸式成为一个产生了大量财富的产业。

我们要特别赞扬一位法国人,他把时尚设计与时尚风格联系在了一起,尤其是巴黎,至今仍享有这样的声誉,都需要感谢上图这个人Louis XIV路易十四,太阳王。

图片

自1643年起直到1715年去世,这位来自波旁王朝的君主保持着欧洲历史上在位时间最长的国王的记录,为72年零110天。法国和巴黎之所以成为路易十四统治时期的时尚主导力量,与他在位期间的极度集权有关。在那个时候,王室控制了奢侈品和时尚产业,从根本上使他们服从于王室的品味和特点。

这种时尚在影响法国国内外的人们,对于当时什么是“热门”时尚方面扮演了重要的角色。它通过超越宫廷的营销设计和发明创意,如改变时尚的风格和季节,用一种在当代有意义的方式来谈论巴黎风格。

图片

二战后的法国,是法国时尚界的转折点,由于设计师克里斯蒂安 · 迪奥(Christian Dior)1947年推出的New Look,巴黎重新成为世界时尚之都。他当时对时装设计的大胆尝试,是自路易十四(Louis XIV)时代以来让法国时装引人注目的东西,即对魅力和青春的关注。在二战期间被纳粹占领后,这些东西引领了巴黎高级定制时装的复兴。

图片

图片

与此同时,著名的时尚杂志,香奈儿于1945年在法国成立,著名时装设计师可可 · 香奈儿本人于1952年回到巴黎。

图片

图片

到了20世纪60年代,法国的高端时装再次全面展开,这导致了其他著名设计师的(成衣)时装获得了巨大的成功和销售。法国设计和时尚的爆炸式增长导致许多品牌被集团化,如大家熟悉的LV,Dior,让我们快速回到今天。

图片

如今基础历史,巴黎已经拥有法国八大奢侈品牌,爱马仕、LV、香奈儿、迪奥等等。这座著名的城市里除了有奢侈品牌,同时巴黎风格还被用到了生活方式、室内设计、室外建筑等各种场合。

图片

标志性的铁塔,让全世界都想来打卡的圣地,铁塔的设计也是非常有特色。

图片

这座铁塔也被用在了很多知名设计、品牌中,更是巴黎的一个代名词。还有巴黎的建筑,也是充满历史与文化底蕴。

图片

这几年比较火的新锐法国品牌AMI就是诞生于巴黎,我也很喜欢这个品牌的设计。

图片

巴黎每年的时装周,最新最潮的设计理念,无不向世界传递着这座城市的设计态度。从室内设计到室外设计,这使得巴黎的设计风格不仅存在于时尚行业,在各行各业都有所体现。巴黎的风格经典,独特,是一个非常高端的设计。

除了今天介绍的巴黎风格,国内一些大公司对于设计风格也有很多研究,比如天猫之前官方发布的一个报告,今天也分享给大家,可以用来参考和学习,需要的话可以添加叮当猫回复“报告”领取。

图片

图片

长按扫码添加叮当猫回复:报告

e

02.  巴黎风格设计特点 

图片

了解完巴黎风格历史后,那我们来学习下,巴黎风格给人视觉感受到底是什么?

f

1.有趣的纹理

图片

巴黎风格很大一个特点就是高级感,经常用一些非常有趣的纹理,比如上图的金属质感纹理,以及右侧像羽毛的一样的纹理,纹理无论在服装上,还是在奢侈品包包上都体现的淋漓尽致。

图片

无论是LV经典的老花纹理,还是今年新款,对于皮革的不同运用,都能感受到巴黎风格对于纹理极致的运用。有趣的纹理能让产品有自己独特的气质。

图片

包括在LV这些有代表性的门店设计,纹理是很核心的元素,看这个LV门店设计,使用了非常强烈的纹理作为主视觉。

图片

同样来自法国巴黎另外一个品牌香奈儿,也是在纹理上下了很多功夫,他们的衣服纹理运用,包的纹理运用,都在引领时尚界。

图片

香奈儿在海报品牌宣传上的设计,也延续了这种纹理的高级感。

f

2.白色(负空间)的运用

图片

巴黎风格还有一个特点就是负空间用的比较多,页面留白比较多,当然这个白色不一定的纯白,而是页面空间感,这点可以从一些大牌的设计中看到身影,通过大气、空旷简单的背景,聚焦到元素主题上。

图片

爱马仕的这组海报,就是这种风格,人物主体就是模特,后面深邃起伏的山丘作为烘托。让页面呈现出这种动感,放飞自我的气质。也能传递出品牌的释放、狂野的感受。

图片

白色空间的运用,遵循少即是多原理。再配合巴黎风格对于人物的选择,对于纹理的运用,让画面形成焦点,同时这样的设计能体现出很强魅力,万众瞩目的视觉感受,上图巴黎八大奢侈品牌的一些设计中,都能看见这样的身影。

g

3.极简主义

图片

图片

以香奈儿为例,就是极简的典范,无论是门店设计极简的线条,还是到日常产品设计,都遵循着极简,但是极简不代表没有质感,巴黎设计风格的纹理,配合极简的设计,让设计别出一格。

图片

上图的两件服装设计,就是最简单的黑白配色,搭配不简单的裁剪,有纹理的材质,让整个衣服的气质呈现出高级,优雅感。

图片

图片

如上图的棒球设计,香奈儿将极简主义发挥到了极致,就是简单的配色,放上一个精致纹理就让这个棒球充满了艺术气息。周边的桌球台面设计,一个简单的logo,整体桌球台也是运用黑色。

图片

再看上图案例,无论是香奈儿的香水、口红包装,还是周边时钟设计,简约的线条,黑白经典的配色。

图片

包括爱马仕的很多设计,橙色的配色,加上极简的包装。让设计简约之中透着高级。

图片

爱马仕的工业设计,遵旨着极简主义和功能实用主义,如上图的吃药提醒,分为白天吃的和晚上吃的,让人文设计温暖到了每个细节。

f

4.整洁干净

图片

巴黎设计风格还有一大特点就是整洁干净,可能和文化差异有关,无论是他们的建筑风格,还是人文,都给人干净整洁的感觉。

图片

在服装设计上,巴黎风格整体给人一种干净的视觉感受,哪怕是在深色服装设计,或者在不同材质上运用,都能将这种整洁干净的感觉运用到淋漓尽致。

那么,在设计上,巴黎风格又是如何运用?又有哪些特点呢?我们一起来看看。

e

03.  巴黎风格在平面中的运用 

图片

a

1.粗茎的衬线体

巴黎风格的设计很大一个特点,就是在字体选择上,一般衬线体比较多,并且衬线体的粗茎比较粗,形成很鲜明的反差,如上图的GUCCI海报设计,就是一个很典型的特点。

图片

如果你想做一款有巴黎风格的设计,一定要选择一个有特点的衬线字体,这里推荐一款免费的,就是google旗下的playfair字体。

图片

上图海报设计,这个字体就是巴黎风格最大的一个特征之一。

图片

上图的品牌海报,就是一个巴黎风格设计,大的衬线字体,有纹理质感的图片的运用,让页面非常低调的高级。

f

2.连体的运用

图片

图片

连体赋予了巴黎风格灵魂,运用的场景也非常非常多,可以当标题,也可以单独直接使用。

图片

这种笔画之间的组合,让画面充满了优雅和独特的气质,就像巴黎这座城市一样充满了神秘。

图片

图片

连体的运用让设计细节更加丰富,同时字体本身也具有装饰性,是一个非常高级的设计手法。

g

3.引人瞩目的数字字体

图片

图片

巴黎风格的字体,除了上面我说带一些英文字体特征外,在数字上的运用也很特别,数字一般很有特点,非常引人入胜,如上图香奈儿官网的数字字体,运用的恰到好处。

图片

数字字体一般比较大,衬线为主,配合标题的衬线为辅,形式冲击力很强的对比。

图片

数字字体和衬线体搭配一起,是巴黎风格最有代表性的手法之一,杂志感也非常强。

f

04.  巴黎风格在界面中的运用 

图片

巴黎风格在UI中用的也比较多,特别适合一些高端电商,或者一些有杂志感的设计。如上图的图文排版,清晰的图片,搭上高级的颜色,再搭配有代表性的衬线体,给人的视觉感受很高级。

图片

上图是爱马仕的官方APP,整体风格呈现出杂志感,清晰的留白,明快的配色,经典的衬线字体。

图片

香奈儿官网设计,经典的巴黎风格设计,无论字体选择,数字运用,还是留白空间关系,整体呈现的感觉非常整洁干净。

图片

页面保持了香奈儿一直坚持的黑白风格,大的图片,大的留白,衬线体的运用恰到好处,简约的线条,网格似的布局都让整个页面很高级。

图片

这组设计也是充满了巴黎风格,干净整洁的背景,模块的色卡,清晰的商品图,衬线字体设计。

f

05.  巴黎风格在网页中的运用 

图片

在网页中,巴黎风格也是用的比较多,如上图,粗茎的衬线体,简单的背景,有焦点的人物运用。

图片

整体的页面设计非常得体,虽然页面看起来简单,但是细节和统一每个点都值得推敲,也值得我们学习。

图片

上图两个网页设计也是巴黎经典风格,所有的上述特点都有,衬线字体,留白,整洁清晰的图片等等,都让这个页面充满了浓浓巴黎风格。

r

05.  最后 

图片

今天这个分享,也是源于我对巴黎风格的喜欢,巴黎风格对于设计潮流而言,是一种设计手法,它也不仅仅用于高端品牌,而是显示出平易近人的态度。希望今天这篇文章,对你有些启发。


原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI 网》被吹爆的巴黎设计风格,到底有多牛?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



笔刷教程 | PS颜色动态功能在绘画中的作用

lanlanwork


一、画笔设置窗口

 

1.我们可以在PS的菜单栏:窗口-画笔设置(F5)里面打开画笔设置窗口,或者点击右边的画笔设置图标也可以打开。

图片

 

2.我们打开了画笔设置后,就能看到颜色动态选项(需要在画笔工具的状态下,不然是灰色不可用状态)。我的这张蛋糕侧面就是用肌理画笔打开颜色动态画的,能一笔就画出丰富的颜色。

图片

 

二、如何设置抖动参数

1.前景/背景抖动:是指颜色根据前景色和背景色不透明度的变化抖动,数值越小,以前景色为主抖动,数值越大,2个颜色之间的抖动越明显。

图片

 

2.色相抖动:颜色根据前景色在色环上抖动,数值越小,抖动范围越小,数值越大,抖动范围越大

图片

 

3.饱和度抖动:颜色根据前景色的饱和度变化抖动,数值越小,抖动范围越小,数值越大,抖动范围越大。

图片

 

4.亮度抖动:颜色根据前景色的亮度变化抖动,数值越小,抖动范围越小,数值越大,抖动范围越大。

图片

 

5.综合使用:我们搞清楚不同的抖动有哪些效果后,就可以结合着调整数值,就能一笔画出更加丰富的颜色,大家可以多调整数值试一下。

图片

 

三、插画中的运用

我在插画中经常用到这个功能,通常我把抖动变化开的比较小,这样能得到丰富的变化,又不会变得很突兀,会更加的耐看。

比如说这张,荷叶的型用套索工具圈出来后,再选稍微带点肌理感的笔刷去画,基本上是一笔画出来的,又快,颜色又比较丰富。

图片

 

这张插画的地面色块也是通过颜色动态+形状动态(也在画笔设置里面)来画的,很适合用来画花海之类的,大家可以举一反三。

图片

 

我很多作品我都用到了这个功能,不知道你是否能发现呢?

图片

图片

图片

 

原文地址:空青肆绘(公众号)

作者:风绽

转载请注明:学UI网》笔刷教程 | PS颜色动态功能在绘画中的作用

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何高效地进行网页设计?重点关注这些要素

lanlanwork


1.把握中心目标

大多数网页设计是以目标为导向,也就是网页做出来能为用户提供什么、能解决用户的哪些问题。

例如电商网站的终极目标是卖出更多的商品,资讯类网站的目标是让用户能更多地阅读最新讯息,目标不同,两类网站在设计上也会有截然不同的差异。

在设计上,电商网站会更注重页面氛围的营造,把红红火火的促销氛围搞起来,用户看到会更兴奋。

图片

▲ 在电商网站中,设计重点放在帮助用户浏览店铺并轻松找到特定商品上,放在详情页上用尽可能好的方式展示商品;付款流程也经过简化和仔细计算(例如某宝最近更新的订单页把价格聚集在一起),因此用户不需要经过太多思考就能快速下单购买。

 

2.打造平衡的效果

网页中炫酷的视觉效果能让用户印象深刻,但效果实现需要付出更成本。能明确知道什么时候更简洁的视觉效果能让整个设计变得更好,能让用户专注于正确的事情,这一点很重要。

有时候在网页中添加过多元素,会分散有价值的信息,用户也难以识别他们想看的内容。

图片

▲ 对齐和对称是页面保持平衡的重要因素。对齐既保证了布局统一,又将有联系的元素紧密连接起来;对称营造一种平衡的感觉,元素整齐有序。

 

图片

▲ 网站的登录注册页往往都设计得很简洁,有大面积的留白处理,只保留关键的信息输入框,这样用户能更专注于输入内容。

 

图片

▲ 在宜家网页中,清晰的视觉层级结构以及留白的运用让整个页面看起来非常整洁有序。好的结构能让用户知道他们在看什么,留白提供了视觉上的缓解作用,有助于引导用户的注意力。

 

3.了解基本的设计原理

格式塔原理基本上定义了我们感知事物的六种不同的认知规则。在网页设计中,这意味着需要以一种合理的方式来安排元素,帮助用户从整体上理解设计。

图片

▲ 设计中需要考虑不同元素的对齐关系、相似元素或按钮的排放位置、一组信息要如何展示、列表类信息该如何展示…

 

另一个重要的原则是希克定律,也就是向用户展示的选项越多,做出决定需要的时间就越长。因为我们的大脑需要考虑和分析所有选择,然后再选出最好的选择,当选择太多时,这就会成为一个问题。

这就像我们在餐厅里点菜一样,如果拿来一个20页的菜单,我们可能会从头到尾把这20页全看了,仍然不知道该点哪个,然后又把这个20页的菜单重新翻一遍。

去餐厅吃饭是件放松高兴的事,我们肯定不想在点餐上给自己带来压力,这样吃饭的乐趣也会大打折扣。

图片

▲ 如果需要填写很长的表单,考虑将长表单拆分成几个短的问题,让用户按步骤依次作答,避免一下看到过多问题给用户带来负担。

 

4.了解面对的用户

网页设计需要知道面对的用户是谁、他们想获取什么、想处理什么问题以及他们是想法是什么等等。

对最终用户的印象越清晰,越有可能创造出成功的设计,就像设计一个面向儿童的网站与设计一个供老年人使用的网页会完全不同。所以在一开始,要先学会把自己的观点先放在一边,倾听目标用户的意见,然后再慢慢验证自己的想法。

图片

▲ 抖音千人千面的推荐机制,能为用户精准推送他们感兴趣的内容,把握住了用户的兴趣,产品才能越来越受欢迎。

 

5.排版很重要

排版需要长期的积累和沉淀,如何合理地安排页面中的品牌标识、图片、文字等元素,是始终需要考虑的事。

比如不管网页设计的目标是什么,或者选择什么样的视觉效果,在选择字体时我们总要考虑字体的粗细、大小或对比度等因素。

对于更多的排版和设计技巧,可以回顾这篇文章: 快速改善网页设计的13个技巧!

图片

▲ 根据设备不同,最佳字体的选择可能会发生变化。在移动端设计中,文字可读性是首要的,屏幕越小越要保证信息的可读性。

 

6.信息架构和导航

网页的导航设计和信息架构共同构成了产品的主干,让用户能够了解产品和功能并找到需要的信息。

图片

无论信息的长短如何,合理的层级结构有助于在产品中创建逻辑结构,以便用户可以查找信息。导航能反映出产品架构,这样用户无需花费大量精力,就能轻松找到主要信息和功能。

图片

▲ 点击按钮之后会切换到哪一页、怎么返回到当前页、点击哪些按钮页面不跳转。架构流程不仅自己要明确,更需要用户看得懂。

 

7.降低认知成本

咱们前面提到,如果面临的选择太多,就需要经过大量思考,这样用户很可能会变得有压力甚至困惑。其实这里面还包含着另一层意思,过多的选择会增加用户的认知成本

只有降低认知成本,才不会给用户带来过多压力,才能快速做出判断。在网页大框架已经设计好的基础上,降低认知成本的地方往往更在于细节。

图片

▲ 准确拿捏细节。在面包屑导航中,鼠标悬浮上去是一种状态,点击后又是一种状态;选中的标签与未选中的标签在颜色上做出区分;当前页码重点突出的同时,告知用户前后页码还支持左右切换。

 

最后

最后为大家精选了网页设计Web UI Kit源文件,包含5套网页模板、30个不同的组件、3种颜色模型,很难得很实用的一份资源,涵盖了大部分的设计场景,赶快下载使用起来~

领取方式:关注公众号,后台回复【网页设计】获取设计源文件

图片

 

慢慢来比较快,希望对你有所帮助!

 

原文地址:CLippp设计夹(公众号)

作者:Clippp

转载请注明:学UI网》如何高效地进行网页设计?重点关注这些要素

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



不会排版的来看看,序如何运用对比制造秩

lanlanwork

咕噜噜

今天我们讲版式中如何运用对比制造秩序

图片

图片

首先如何理解秩序,我们用点的示例放置,当展现在画面中出现无序的形态时,会显得没有规律性,而以螺旋状的方式放置时就明显感受到了画面的舒畅和秩序感。

图片

两者同样以圆为形态,秩序感的形成却截然相反。

图片

秩序感的体现就像建筑和摄影中对于画面布局的形态与物体之间的关联起到微妙的动态变化。

图片

在整个呈现过程中,我们就需要运用秩序里的大小对比、空间对比、粗细对比和颜色对比的关系。

图片

我们用一个小案例来诠释对比的作用

 

1.大小对比

 

图片

首先运用大小对比,这是正常文案放置时的排版结构,文字的大小比例都是相等的。

图片

我们将文字的主次进行了拆分、强化了大小关系,这时文字的比例从原来的大小相等到互相有了不同变化。

图片

强化了对比后,我们看下效果,能明显感受到对比后的阅读逻辑性了有了一定提升。

图片

 

2.空间对比

图片

将主题中的文字放大并改变字体后弱化显示,再将原有内容放置到前面,在四周增加一些装饰信息作为点缀。

图片

通过对比后的效果,可以看出主体内容得到了一定的空间层次,整体也显得丰满一些。

图片

 

3.粗细对比

图片

通过筛选出优先重要信息,将内容作出粗细之间的明显区分,这样的方式可以帮助用户在阅读画面时有更好的着重点,也有了明显的阅读顺序。

图片图片

 

4.颜色对比

图片

改变主题颜色或者一些需要强化记忆的文字,能让整体的版式即显得完整,又多了一些阅读体验感。

图片

图片

我们刚才通过了多种对比,可以看出秩序性在整个版式中的重要,规律的变化也从来都不是毫无逻辑的呈现。

图片

 

示范案例

图片

为了让大家更容易理解和运用起来,我们再用一个案例来展现秩序性在版式中的使用方法。

首先填充红色为背景色,将主标题文字放大,副标题缩小。

图片

改变字体和颜色,利用英文拉开字间距放到主标题上形成了对比和颜色之间的关系。

图片

再复制主标题文字放大移动到背景上,改变字体颜色形成为背景之上的层级

图片

通过元素、图形、背景肌理、素材等去强化与文字版式之间的空间层级关系。

图片

这样一来,不仅文字信息有了非常清晰的逻辑表达,画面上也得到了视觉呈现的丰满和秩序性的动态规律。

图片

 

原文地址:修先森撩设计

作者:修先森

转载请注明:学UI网》不会排版的来看看,如何运用对比制造秩序

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!

lanlanwork



我们先来看原作效果:

图片

再来看临摹练习的效果:

图片

好了,分析开始:

可优化点1:头图的透气感

我们看下头图的对比:

图片

相比之下原作中的头图有很多白色,让画面更加的有透气感,练习作品中的头图会有点闷。

头图的选取也影响了卡片投影的效果:

图片

原作的投影会稍有细节一点,会耐看很多。

 

可优化点2:色彩耐看度

当我们的颜色全都用彩色的时候,就会看起来有点腻,添加黑白灰是最好的一种解腻方式,我们看下面的这些插画:

图片

基本所有的都黑白灰色。

回来看我们的案例:

图片

原版会有很多灰色的搭配使用,但是练习作品全都是用的橙色系,所以看起来会稍微有点满。

 

可优化点3:图标的精致度

当图标有圆形底座的时候,我经常使用的方式就是把图标本身稍微小一点,别让它填充的太慢,比如我们举个最简单的例子,看下面两种方式:

图片

是不是左面的看起来会精致一些。

回到案例本身,我们看下箭头图标:

图片

也是一样的道理,左侧原版的会稍微精致一些。

 

可优化点4:关于信息层级对比

我们看下信息层级对比:

图片

原版的很多信息层级十分明显,练习的作品层级有点没拉开。

当然,这里需要强调下,真正落地的时候还是要考虑能否看清,原版的灰色字是有点太浅了,如果真正落地的话,可能不太行,但是作为概念高,把信息层级拉开一点的做法,是OK的。

 

可优化点5:一些散点

临摹稿的一些间距可能也会有一些问题,比如卡片和下面信息之间的间距:

图片

就稍微有点大了,看起来有点不太合理。

还有这里的状态可能也不是很全等等,没有选中爱心的状态:

图片

当然,说了一些问题之后,回来看,临摹作品其实也是有一些优点的:

比如这个页面的底部按钮:

图片

我觉得变成重色按钮会让整个画面层次更加丰富,并且操作区域也更加明显。

再比如选中态家了一个爱心图标:

图片

这也算是一种小的创意点,是有经过思考的。

这些小的思考和优化,积累多了,后期一定可以激发巨大能力和进步。

好了,以上就是今天分享的这个小案例,很多细节,希望可以给大家一点启发, 后面大家在做界面练习的时候,也可以多多思考并实践。

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

设计师如何提升总结力

lanlanwork


前言 

 

总结能力,是人的一种底层能力和通用能力。跟创造力、沟通表达、学习能力等等一样,它是无论从事什么职业,做什么工作,都应该具备的一种重要能力。

 

很多设计师只顾着提升自己的专业能力,却忽略了这些通用能力的培养,导致自己很快就陷入了发展瓶颈。现实中有很多这样的例子,比如甲乙两个人,甲的专业能力上更强一些,但乙因为很擅长跟人沟通,结果乙发展的反正要更好。

 

打个比方,专业能力就像是游戏里的技能和装备,而通用能力,就像是游戏里人物的基本属性。技能和装备随着游戏的进程可能会不断更新替换,而基本属性则是永远跟随着你的成长,它的提升给你带来的是全方位的提升。

 

文末 原文地址可观看此视频讲解

 

 

一、什么是总结力

总结力,也就是归纳总结的能力。

那么,我们再追问一下,什么是总结呢?它的目的是什么?

 

我们通常所说的总结主要有两种

图片

 

一种信息资料的总结,也就是将一些体量较大的信息,归纳概况为简单的信息。比如我们日常中的学习总结、会议总结、工作总结、年终总结等等,都是这一类。

另一种是经验规律的总结,从大量相关的信息、资料中,寻找共性、规律,最终得出具有指导性的经验方法和结论。比如人类社会的科学、学术成果,我们所学的设计理论,设计讲座、文章里分享的设计经验,毕业设计论文等等,都是属于这一类总结。

 

前者,信息资料的总结,是我们日常生活中最常见、最常用的,主要作用是整理归纳,就像是整理自己房间,整理超市货物,整理图书馆资料一样,让它看起来更加的整洁有序。

而后者,经验规律的总结,它是一种层次更高的总结,就像凝水成冰,百炼成钢一样,在原有的基础上进一步得到了升华。

 

二、为什么要提升总结力

接下来我们来聊为什么要提升总结能力,它的目的、作用是什么?

随着工作经验的增长,技术能力渐渐成熟,拉开差距、决定上限的,往往就是审美、创意、设计思维等等这些更高维度的能力。

而总结能力,就是这种更高维度的能力之一。

 

先从宏观上来看

进入设计的大门时,我们首先接触的往往就是各种设计理论。

而这些设计理论,就是前辈设计师们一代一代总结下来的宝贵经验。

图片

我们站在今日,看昨日之设计,能够很直观的感受到,设计像是一个有生命的东西,它是在不断发展和进步的。

图片

 

这种进步,是技术的进步,也是整个行业的不断总结与迭代。

 

有了总结,所以我们知道,大红大绿不好看、要突出主体,排版要尽量对齐,熬夜要喝枸杞。。。。

 

总之,我们每个人都受益于前人的总结,不必再去走前辈们曾踩过的坑。

 

 

再从个人的角度来看

锻炼总结能力对自己有哪些帮助?这里我列举了几个方面:

 

1、学习能力

首先是学习能力。

无论从事什么行业,摆在我们面前的第一道关卡就是学习。

人与人之间的学习能力差异是很大的。

有的人花几周的时间就可以快速上手一门新的软件,而有的人可能学了几个月还是感觉自己啥也不会。

这里面的影响因素有很多,比如你是否能找到好的教程资源,每天真正花在学习上的时间有多少,学完之后是否有通过练习来巩固,等等。

 

而总结能力,则是影响学习能力的其中一个重要因素。

它能够帮你简化复杂庞大的信息,更有效的消化知识,快速搭建起自己的知识技能树。

 

如果你要学一个新的软件和工具,在挑选书或教程的时候,可以先去看看它的目录。

图片

 

虽然它非常简短,但却是对整本书或整个教程内容的概括总结。

一个好的教程,一定是目录结构清晰有条理的,而不是东讲一点,西讲一点,想到哪讲到哪。

看完目录,你就可以对这个软件的功能模块上有一个宏观的认知。并可以筛选哪些内容是你需要的,哪些是暂时用不上的,这样就可以有针对性的学习,节省了很多时间。

 

2、成长提升

学习入门之后,接下来就是积累经验,成长提升的过程。

在设计这个行业里,能力跟工作年限,是没有绝对的关系的。

其中,善于不断总结过往经验,复盘项目的人,往往成长的会更快。

 

一个人是否善于总结,其中一个关键在于:他是怎么看待问题的?

是仅仅看到眼前的这一个问题,还是能够看的更远,看的是这一类问题?

图片

如果是前者,那么你解决的就只是当下的这一个问题。这就是为什么,有的人一个问题犯了几十遍了,然而下次遇到类似的问题,还是会继续犯错。

如果是后者,那么你解决掉的就不仅是当下的这一个问题,而是未来所有类似的问题。这样不断的总结,成长下去,最后积累的力量必然是惊人的。

 

比如我们来解决这样一个问题:这里有几个小元素,我们想让其中一个元素看起来更显眼。

图片

应该怎么做?

 

我们可能会想到一些办法,比如:让其中一个圆更大一点

图片

 

让其中一个圆描边更粗:

图片

 

或者降低其它圆的透明度,让其中一个更亮:

图片

 

这些方法都能达到我们的目的。

不善总结的人到这里可能就已经结束了,因为当前问题已经解决了。

 

但是善于总结的人到这里问题才刚开始。

他会思考:为什么这些操作会让元素看起来更显眼?它们中的共性和规律是什么?

 

经过这种更深一层的总结和思考,我们可以发现,无论是改变大小,改变粗细,还是改变亮度等等,它们的共性与本质,都是形成了“对比”。

这种对比形成的反差,让画面中与众不同的的元素会更加的突出。

图片

当我们经过总结思考,提炼出了“对比”这个本质之后,就能够基于“对比”这个概念,延伸出更多的方案。

图片

比如让它改变颜色、进行填充、改变清晰度等等,总之只要是符合“对比”这个核心的方案都是可以的。

 

我们还可以将它运用到各种其它领域的设计中,解决掉所有“让元素更突出”的问题。比如文字排版中,主标题对比其它的文字一定是最显眼的;海报设计中,主角要放在c位,

 

甚至我们还能反向运用,把元素弱化,比如弹窗广告的关闭按钮永远藏的让你找不到。。。。

 

你会发现,通过这种总结,我们找到了问题的本质与关键。从中得到的经验将不再只是几个具体的解决方案,而是这个问题的“通解”。从“有限”变为“无限”,从“具象”变为“抽象”。下次再看到这个问题,我们就能够站在一个更高的维度去思考。

 

 

3、沟通与表达

当然,对于设计师来说,专业设计能力的成长固然重要,但它绝不是一个设计师能力的全部。

设计离不开与人的沟通和交流,所以沟通和表达能力也非常重要。

 

而总结能力,可以让你在沟通上非常的有逻辑性,能够有效的把想表达的信息传递给对方,反之,则会让别人听了后面忘了前面,听了半天也没弄清楚你到底想说什么。

 

比如你要告诉别人一个设计要怎么优化,如果是这么去说:

图片

这种想到哪说到哪的方式,一旦信息量比较多的话,听的人会很头疼,而且get不到重点。

 

而清晰易懂的表达,一定要经过一个总结整理的过程,减轻听的人的接收负担。

 

这里介绍一个比较好的表达结构:就是我们小时候写作文的时候常用的“总分总”结构。

图片

先说总结、结论,再进行分类、分段阐述,最后结尾再进行一次总结,加深印象。

 

下面我们看看用“总分总”的结构应该是怎么表述的:

图片

 

先做总结:这个设计整体最大的问题是什么?然后细节上主要有哪些方面的问题?

然后做分类阐述。这个分类可以有很多种,比如可以跟之前一样按ABCD不同的区域去划分。但是不要跟之前一样来来回回绕,从A讲到D,又从D跳到B,而是应该按顺序讲完一个再讲下一个。

也可以按设计的不同层面去分类,比如根据构图、配色、排版、质感、动效等不同方面分别去展开讲。

最后结尾把整体最大的问题、一些关键的问题再总结一下,加深印象。

 

按照这样的结构沟通起来就会很有条理性。

 

前面我们是站在“说”的一方的角度,而如果是“听”的一方,其实也是一样的。

如果接收到的设计需求很多很杂,那么首先要做的就是整理归纳,做主次优先级的排序等等,整理清楚再动手。

 

 

好了,说完了总结能力的一些应用场景,再回头看看我们前面所说的总结的两种类型:

信息资料的总结经验规律的总结。

 

学习能力,成长提升,沟通表达,这三个方面中:

图片

学习能力和沟通表达,所用到的总结主要属于信息资料的总结,所以它通过归纳整理,带来了效率上的提升。

而成长提升,所用到的总结主要是经验规律的总结,我们前面说过,它能够在原有的基础上进一步得到升华,正是这种升华产生的力量,推动了我们的成长

 

三、如何提升总结力

我们再来看怎么做的问题,如何去提升总结能力。

首先要说的是,总结能力其实是人的一种本能,人们的大脑会自动对信息做归纳和分类,方便自己理解。

比如有西瓜、苹果、香蕉、草莓,鸡肉五个东西,我们会自动把西瓜、苹果、香蕉、草莓归为一类,因为它们都是水果。

 

再比如这张图:

图片

 

我们会认为左边的图形是一组,而右边的是另一组。

 

所以游戏机按钮就是这么设计的:

图片

 

其实我们每个人都是天生就拥有总结归纳的能力,

只是很多时候我们可能大脑想偷懒,没有刻意的去进行总结。

只要你开始真正做起来,它并不是一件难事。

 

总结步骤

总结的步骤其实很简单:

步骤一大量的资料收集,汇总

步骤二提炼规律、共性,归类分组得到总结

 

我们开头所说的两类总结中,信息资料的总结,一般用到这两步就够了,而经验规律的总结还需要用到第三步:

 

步骤三将得到的总结代入大量的资料,印证完善

 

加入了第三步之后,它就形成了一个闭环,会让你的总结不断完善下去。也就是所谓的:实践是检验真理的唯一标准。

图片

 

比如,我们前面讲总结能力对成长提升的帮助中,提到的例子“怎么让设计中的元素更明显”,这里面我们找到的各种方法:放大,改颜色,加描边等等,就是第一步:资料的收集汇总。

接下来我们进入了第二步:从这些方法中寻找共性,寻找规律,得到了“对比能够让元素更突出”这个总结。

最后是进入第三步,我们把得到的这个总结带回“让设计中的元素更明显”这一类问题中,得到了更多的方案,从而继续完善“对比”这个经验总结。

 

从实践中得到的经验总结,要再回到实践中去,指导实践,并让自身不断完善。

这也是设计中实践和理论之间的关系。

从这三步形成的闭环来看,在设计师成长的前期阶段,实践重于理论,因为这时候没有足够的实践和资料去支撑,也就无法完成第三步:用实践去印证理论。

而越往后面,随着自己掌握的经验、资料越来越多,这个闭环被打通,理论就会越来越重要。不断循环,不断完善下,让自己获得不断地提升。

 

而在这三个步骤中,第一步和第三步,并没有什么操作的难度,主要是时间和耐心的问题。

那么主要的问题就是在第二步,我们按照什么样的原则去总结?怎么去归类分组?这里是需要不断尝试的。

 

几个经典的总结框架

所以接下来我们介绍几个比较经典的总结框架,如果你自己没有好的方案,就可以直接套用这些成熟的总结框架。

 

 1、MECE原则

MECE原则是衡量归纳总结是否完善的一个经典原则。

它是在《金字塔原理》这本书里提到了一个思考工具,中文意思是“相互独立,完全穷尽”。

指的是分类归纳要做到:不重叠,不遗漏。

图片

不重叠是指每一个分类之间相互独立,不能有重复、交叉的部分。

不遗漏是指要完全穷尽,不能有遗漏的部分。

 

如果我们对人进行分类,分为“男人、女人、小孩”,这就不符合MECE原则,因为男人和女人里面也包含了小孩,有重复的部分。

 

再比如站酷对各大设计领域的分类。因为设计的分类非常广泛,为了避免一些相对小众的设计分支,找不到对应的分类。会增加一个“其它”分类。这就满足了“不遗漏”原则。

图片

 

 

 

我们每天调色时都要使用的RGB色彩模式,它就是完全符合MECE原则的。

图片

红绿蓝作为三基色,是相互独立,互不重叠的;而它们相互组合,就可以得到所有的色彩,满足了不遗漏的原则。

 

 

而在设计的分工合作上,使用mece原则也非常有效。

如果一个工作需要多个人分工合作来完成,根据mece原则,分工就应该满足两个条件:

图片

第一是不重叠,就是说每个人负责的任务要相互独立,不要有交叉重叠的部分。

不满足这一点,就会导致可能有两个人做了同一件事,造成了时间的浪费。

 

第二是不遗漏,也就是说分解工作的过程中不要漏掉某项,保证最后所有人的工作合起来是完整的。

不满足这一点,就会导致有一部分工作最后没有人做。

 

2、五帽架原则

接下来我们介绍下“五帽架原则”。

「帽架]这个词是根据类比而来,「帽」表示资料,「架」表示组织资料的方法,所以可以理解为「组织资料的五种方法]。

 

“五帽架”的概念最初是由理查德·沃尔曼在他的“ 信息焦虑”一书中提到的。

图片

 

 

它是做资料整理时可用的五种高效的逻辑顺序。

我在之前写的“设计师如何有效提升执行力”一文中也提到过这种方法。

它们分别是种类、时间、空间、字母、连续性

 

种类,就是按相似性,关联性划分,这是我们最容易想到的一种分类方法,比如b站的各类分区。

图片

 

 

然后是时间顺序,这也是我们最常用的一种结构,比如总结自己的工作经历时,我们可以按时间顺序从前往后,或者从后往前讲;再比如做年度设计总结,也可以按时间顺序,罗列每个月份或者每个季度的工作。

图片

 

 

有时间顺序,自然就有空间顺序,空间的不同位置,前后、远近。

比如摄影摄像中有一个非常重要的概念,就是“景别”。它就是使用空间顺序来分类的。

图片

 

根据摄像机离被摄物体远近的不同,我们可以划分出远景、全景、中景、近景、特写五种景别。

有了这样的统一划分,导演,摄影师,剪辑师等等不同职能的人员之间,才能拥有一套通用的语言,无障碍的沟通。

 

 

接下来是字母顺序,就是按字母、数字等符号的顺序进行分类,最典型的例子就是字典。

这种方式没有什么逻辑性,优点就是非常直白,便于查找。很适合用于资料之间本身没有太大相关性的。比如各种档案、资料的管理,通常就会用不同的编号来归类。

还有游戏里面用会SSR,SR,R这样的编号来区分角色的强度和稀有度。

 

最后是连续性,指的是按照从小到大,从少到多,从高到低,从浅到深等等,这种数学规律去总结整理。

图片

 

这种方式,通常都是为了能够从总结中得出一些重要的结论。

比如我们做完了一个项目,想进行一下复盘,就可以罗列一下项目中哪些地方花的时间最多?根据时间的占比做一个排序;然后就可以针对这些消耗时间最多的地方,看看哪里可以再优化一下,哪里效率还可以再提升提升。

 

 

3、5W2H分析法

5w2h分析法是一种广泛用于企业管理和技术活动中的策略方法。

它由五个W和两个H组成。分别是:

图片

(1)WHAT——是什么?目的是什么?做什么工作?

(2)WHY——为什么要做?可不可以不做?有没有替代方案?

(3)WHO——谁?由谁来做?

(4)WHEN——何时?什么时间做?什么时机最适宜?

(5)WHERE——何处?在哪里做?

(6)HOW ——怎么做?如何提高效率?如何实施?方法是什么?

(7)HOW MUCH——多少?做到什么程度?数量如何?质量水平如何?费用产出如何?

 

通过这七个方面的思考,我们就可以总结出事情的主要框架,让工作计划具有完整性,思考的更加全面、清晰、有条理,避免出现遗漏,这也是符合前面所说的mece法则的。

 

比如工作中做总结汇报,制定一个项目的开展计划,我们都可以使用5w2h这个总结框架,让自己能够对全局有一个清晰的认知,也就是我们常说的做事要有“全局观”。

 

如何高效训练

我们知道了总结的一些常用框架,常用方法,接下来就是去实际的运用。

怎么去高效的锻炼自己的总结能力呢?

这里介绍两个我自己常用的训练方法。

 

1、培养找关键的习惯

总结,说白了就是一个浓缩凝练的过程,从一堆信息中寻找它们的核心思想和关键点。

就像写文章一样,每篇文章都会有一个“标题”,这个标题就是整篇文章的核心和关键。

图片

 

所以,我们在生活中要刻意培养找关键的习惯。

 

比如工作中跟别人交流的时候,可以刻意锻炼自己做到“长话短说”,用最简洁的话来概括你要表达的重点,而不是给别人发一大段未经整理的文字。能一句话讲完的不要分两句讲。

 

再比如对设计做优化,可以先去找设计中最大的问题是什么,再去抓画面局部的小细节。

图片

我刚开始学平面设计的时候,我的老师就曾教过我,如果要看一个设计做的好不好,就先把图缩小,离远了看,看看整体的感觉怎么样,如果整体效果不行,是哪里不行,最主要的问题是什么?如果整体效果ok了,再去把图放大看里面的细节。

 

2、费曼学习法

费曼学习法,简单来说其实就是四个字:以教为学。

这是一种最高效的学习方法,

 

图片

 

为什么这么说呢,这是有科学依据的。有一个著名的研究成果,叫“学习金字塔”。它通过实验,研究出了不同的学习方式,学习者在两周后能记住内容的多少。

 

也就是说这篇文章你看完之后,因为属于被动学习,过段时间你还记得的内容最多只有30%,但是如果你看完之后还能再把它教给别人,你就能记住90%

 

图片

 

但是这里的教,并不是说随便怎么教,而是有目标的。

目标是要让别人很容易听懂,并且能够记住。如果有些地方别人没听懂,或者说记不住,那就说明这些地方你的归纳总结做的还不够好。那就要继续去简化表达,直到对方很容易听懂为止。

这个过程会倒逼你对自己掌握的知识去做概括总结,否则你是无法做到让别人很容易听懂并记住的,

如果没有尝试过的可以试一下,它其实是很有难度的,如果你成功了,你会发现自己对所教的内容的理解会更加深刻和清晰

 

 

这个方法也是我一直在用的方法。因为我自己做过好几年的讲师,对此深有体会。有些技术点自己操作起来已经很熟了,但是想要轻松的教会一些零基础的人,还有很有难度。需要不断的去深挖,真正理解透彻。

在教别人的过程中,我自己的收获也是巨大的,每写一篇文章,都是对自己经验的再次提炼和总结,从总结中得到升华。

 

总结

本次的内容信息量比较大,所以最后再总结回顾一下。

图片

我们从“是什么,为什么,怎么做”三个方面展开,去聊总结能力。

先讲了什么是总结,大致分为信息资料的总结和经验规律的总结两种。

然后讲了为什么要做总结,从学习能力,成长提升和沟通表达三个应用场景出发,举例说明了总结的作用

最后是怎么做的问题,我们介绍了三个经典的总结框架:mece法则,五帽架法以及5w2h分析法。然后讲了两种高效的训练方法“培养找关键习惯”以及费曼学习法。

 

归纳总结,其实是一件偏理性,比较考验逻辑的事情,虽然我们平时做设计更多的是动用感性思维。但是如果能够把理性与感性相结合,往往能产生出更强大的力量。

 

希望本文对大家有所帮助。

 

原文地址:动态设计书屋(公众号)

作者: 崔小骏

转载请注明:学UI网》设计师如何提升总结力

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档