首页

交互规范制定指南

鹤鹤

一、如何「理解」交互规范


说起设计规范,大家应该都不陌生,一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用:


产品设计:保障产品内不同模块的设计一致性,同时提高不同设计师间的设计、协作效率

研发开发:通过定义的标准规范,提高流程、组件的复用率,提高整体开发效率

用户使用:让用户能够在产品全局感受到统一且完整的体验,降低使用成本和学习难度



而一个完整的设计规范一般分成「视觉」「交互」两个部分合并组成,在全局原则的指导下,侧重不同的维度和内容分别展开规范的定义,最后再合到一起形成一份完整的设计规范。



从用户体验要素来看,视觉主要是在「表现层」「框架层」进行规范的统一,主要包括:形、色、字、构、质、动 六个层面。



而交互角度相对抽象,主要针对于产品的「结构层」「框架层」入手,定义统一的交互规范,指导页面、流程搭建和组件使用规则。包括:全局原则、页面布局、通用流程、标准组件、文案规范



整体维度呈“从抽象到具体的总分关系”,不仅对产品的各个维度都有具体的交互指导,而且不仅能保证长期使用,避免重复返工;同时也便于囊括后续的迭代内容。而这些内容,就是我们通常定义的交互规范,也是交互参与定义设计规范的发力点。


有了对于基本认识和搭建框架之后,我们来详细聊聊如何定义交互规范具体内容。



二、不同阶段应该定义

哪些交互规范?


产品有不同发展阶段,设计规范同样也有,不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多,保证投入产出比最大化;同时也要构建一个合理的规范迭代思路。


产品探索初期


该阶段的产品核心目标是「验证产品或商业模型」,业务需求都是小步快跑、频繁迭代。产品处于从0到1的野蛮生长状态,存在着“先满足功能,再优化体验”的情况,导致该阶段的产品体验往往不太过关。


搭建目的:通过定义原则,梳理关键页面和流程,搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断;从页面到流程,又能对应设计参照标准;同时业务可以在规定的框架下发展,不仅让产品体验的根基牢固,而且不会限制功能设计自由。


搭建范围:「全局原则」「页面布局」「通用流程」


产品稳定发展期


该阶段的产品基本形态已稳定,也形成了初步的模型结构。后续迭代是在现有结构的基础上,进行增加或优化功能。虽然探索期定义了产品原则、布局和流程,但探索期产品的自由生长,会导致不少设计细节不一致,从而影响了产品整体的体验和效率。


搭建目的:通过回溯整理过往设计,沉淀优化成完整的交互规范。再根据规范统一产品体验,进一步优化流程和效率, 让整个产品体验达到相对稳定的状态。

搭建范围:「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」



三、如何「定义」交互规范


3.1 定义交互规范的原则


与行业通用的设计规范(如TDesign、AntDesign,文末领取腾讯设计系统源文件)“大而全”“通用”的特质不同,一般团队内构建的设计规范都是源于某一个产品或业务,主要的特点是“专精”。专注于「业务」本身,主要是「团队内成员使用」,追求的是投入产出比最大化。


基于此背景,当我们在定义「交互规范」时,有三点原则:


原则一:保持规范的业务性设计规范既要贴合业务场景归纳完整,同时又要避免凭空定义脱离实际。故我们定义时要代入业务规划,尽量富有前瞻性,这样定义的规范不仅能覆盖当前需要,同时后续也能更好地迭代。


原则二:保持规范的专注性。有的放矢,明确内容优先级,避免盲目追求大而全和形式主义。对于优先级高(覆盖面广、复用率高)的关键内容重点描述;优先级低(逻辑简单、认知一致)的内容可简要描述,避免事无巨细降低效率。


原则三:保持规范的生长性。设计规范不是一成不变,而是跟随业务发展不断迭代完善的,所以需要阶段性的回顾规范。遇到规范未能覆盖或无法指导设计的地方,及时修订同步团队,避免墨守成规,固步自封。



最后,还有一点建议:在定义规范时,可以站在前人肩膀,适度参考行业设计规范,能复用用的直接参考,具有业务特性的再集合业务综合考虑,使整个规范制定效率更高,科学性、指导性更强。


在找到自己当前所属的产品阶段、明确要建立哪些设计规范后,具体应该如何进行落地执行呢?建议从以下4个步骤入手。



3.2 第一步:定义规范分类


如上文中提到,一个完整的交互规范分为:「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」五个维度,但每个维度具体含有哪些内容,都是不一样的。仍然需要根据实际业务需要去定义,这样才能尽量保证没有遗漏,也更好为下一环节评估工作量。


通用的做法有两种:


方式一:整理业务场景下不同的页面、流程等,并进行抽象合并。「全局原则」「页面框架」和「通用流程」具有强业务导向,可以采用此方式。

以「页面布局」为例,就需要将关键页面按统一颗粒度收集(按层级或按场景等)。



方式二:参考行业通用规范的定义,先罗列完整,再根据产品实际业务需要进行增删改。

「标准组件」「文案规范」已经在行业内有了不少科学的目录和沉淀,可以采用此方式,例如下图组件的梳理。



最后可产出如下图的规范分类和具体内容。(可以列的不是很全,后续补充具体部分内容时持续维护这张表。)



3.3 第二步:确定分工排期


有了具体内容作为依据,便可以根据此进行排期分工。


分工原则:推荐按规范分类进行分工,一个大的分类由一人负责,保证专注性。同时团队交互最好都能参与,保证后续对规范更好的沿用。

排期原则:「定义规范」和「输出需求」两者经常要并行处理,此时提高效率,控制投入产出比就很重要了,我们需要明确优先级,先做什么后做什么。有3个思路可以综合参考:


- 并行的思路:在定义完「全局原则」后,剩下的页面、流程、组件、文案都可考虑并行定义,彼此之间没有明确的依赖项。

- 迭代的思路:近期有迭代的版本,如:即将改版的模块、反馈较多体验较差的模块,其中涉及到的页面框架、组件可优先定义

- 复用的思路:某些典型页面、典型流程、典型组件涉及面广,许多需求的设计都将借鉴参考,亦可优先抽象定义



3.4 第三步:统一撰写原则


设计规范是由不同的设计师一起合作完成,所以我们尽量在一开始,就需要统一规范的撰写和展现形式。以此提高后续合并的效率,同时又能保证其阅读体验,让其它使用者能够更好遵循。对此,我们定义了几个关键原则:


目录完整:高效检索,快速让使用者找到需要的内容。

原则清晰:抽象的内容往往含有许多概念和原则,需要让使用者先理解再参考,才能保证后续使用正确、举一反三

多图少字:没有人喜欢看字,图片更容易吸收

搭配案例:让使用者更好的代入场景,理解和使用规范。



3.5 第四步:定义具体规范 ★


前面铺垫了许多流程性的内容,就像我们日常输出设计需求一样,大家或多或少在工作中都有遇到过。接下来,将重点聊聊,我们具体的内容应该如何定义。依然分成5个环节一一讲解。


3.5.1 全局原则

目标:明确影响整站各个模块、各个页面设计的原则和规范,指导我们后续各种规范的定义和设计。


而全局原则也分两种,设计原则和业务原则两种。


设计原则:每个完整的设计规范都需要包含的内容,如:设计价值观、设计准则。看似相对务虚的东西,实则影响后续整个设计方向。这个部分需要和产品经理、视觉同学结合产品的定位和发展共同提炼。具体定义方式可参考:

《你为什么需要设计原则?》

https://zhuanlan.zhihu.com/p/246430795


业务原则:源自实际业务本身产生的问题,行业内没有标准定义。需要具体问题具体分析,推导出具体目标,最后再统一制定规范解决业务问题。

举一个实际的例子便于理解:全局Z轴定义


1)明确问题:整站层级高度没有统一定义,导致不同控件间相互遮挡,没有统一规则。需要定义全局Z轴规范,统一不同场景、页面、组件的高度。



2)梳理借鉴:统一梳理相关场景、页面、组件,明确需要定义的范围。再查找行业规范,有无参考借鉴。(如Z轴定义,可参考Material Design)



3)定义规范:最后通过最具代表性的场景进行展示



全局原则没有维度高低之分,例如可能全局涉及到的「右键菜单」也能被定义成全局原则。不必盲从行业交互规范内庞大且抽象的原则。只要能够实际解决你业务的需要,能够覆盖整站各个部分,都可以纳为全局原则。


3.5.2 页面框架

目标:梳理整站所有关键页面,整理抽象成相对固定的 框架布局&功能分区 让后续设计新页面时能遵循规律、找到参考。


页面框架的搭建一般由四个步骤组成:

第一步,收集页面:根据早期定义的规范分类,收集展示所有相同层级的页面。这些在定义规范分类时,应该已收集完成。

第二步,框架布局:提取共性,搭建框架和布局,明确页面大的区域划分和结构。(TDesign布局详细指南,文末领取腾讯设计系统源文件)



第三步,功能分区:基于框架布局,细化区域内具体的业务功能属性,如:导航区、操作区等。这部分是页面框架内最接地气最具指导性的内容,同时也是最难定义的。主要原因如下:


- 定义太细,担心缺乏前瞻性限制后续设计:定义越细灵活度就低,后续改动和限制性就越高。为避免这种问题,推荐在定义关键页面时,按输出设计稿的思路:整理「信息架构」→定义「功能分区」,这样后续拓展性和前瞻性更高



- 定义太粗,无法定义出明确的功能分区,担心缺乏实际指导意义:同一区域有些页面展示操作,有些展示导航。从规范角度好像不应该,但实际套在各个业务内却又合理。当遇到这种无法达成一致的情况时,建议就不定义具体的“功能分区”,避免因为盲目追求统一而限制实际设计。


而可以采用“穷举举例”的方式,将该布局下可承载的内容均展示出来,既可以起到参考意义,又能供后续沿用达到统一的效果。



第四步,加入案例:将刚刚定义的布局框架与功能分区,与实际案例完整结合,便于后续理解和沿用。



3.5.3 通用流程

目标:梳理整站所有流程,对那些可复用的流程进行整理、抽象、封装。让后续设计师和研发能够直接沿用。


“可复用的流程”是指:在多个场景下,不改变其原有业务逻辑的情况下能够“既插既用”。例如:登录注册流程、扫码关注流程、分享流程等等。往往一个通用流程中,不同的步骤亦可以打散,重新拼装成不同的流程,以适配具体的场景使用。


下面就举一个具体的例子:注册流程。一般完整的注册流程如下,通过不同的入口触发后进入,通过一定步骤后注册成功。



当业务有了进一步需求,需要通过插件快捷登录时,步骤便可以重新组合,再适配具体的场景



对于设计师要做的,就是识别具体的通用流程有哪些,并将其给「步骤化」串联起来。当有新的需求来的时候,判断能直接复用,还是需要重新组装,亦或是新增步骤。

而这样拼装的思维,恰好对应了研发搭建流程时的思路。通用流程对于他们就是将不同的步骤进行组合起来。当遇到不同场景时,再以搭积木的方式进行拼装。


而具体的搭建步骤也是由两个步骤组成:1.第一步,收集流程;2.第二步,抽象步骤。具体方式上面已提到,就不过多赘述。


3.5.4 标准组件

目标:将产品内使用过的组件整理成“标准组件”,统一定义规则,让后续设计和研发时能直接调取组件,提高设计和研发效率。


其实行业中已经有很多通用组件,可以快速调用。但由于不同业务的复杂度不一样,也会生成自己独特的业务定制组件。同时,产品持续在迭代,也很难能抽出时间单独定义组件。故基于这个背景,结合“需求设计流程”和“组件整理流程”,有两种高效定义标准组件的方式。


方式一:调用行业通用组件


第一步,业务设计确定基本逻辑。

第二步挑选行业通用组件,增加业务规则。(一般开发在搭建产品初期时,便会选择一家行业组件进行使用,而组件也仅能在这家提供的组件中挑选)

第三步,视觉根据全局视觉原则,设计新的样式。

第四步,将交互规则、视觉样式合并,统一成标准组件。基础规则直接引用行业组件已定义的内容,场景规则按需补充。




方式二:业务定制组件


第一步,进行正常的业务设计。交互根据需求搭建原型,视觉设计具体样式

第二步,判断组件是否通用,是否可复用到其它场景。例如:分享对话框,不同的内容分享都能够用得到,像这种就是可抽象成标准组件的典型案例。

第三步,定义标准组件规范。简单的组件展示具体样式即可,团队内设计师基本认知一致,无需重新学习。而复杂的组件为保证后续的正确复用,建议包括以下内容:


- 更新日志:因为组件是变动最多的规范,需要明确具体的版本和改动点

- 组件定义:简要介绍用途和使用规则,如对话框定义:必须是用户主动触发时才出现、主要使用在二次确认场景需用户确认后才消失等。

- 组件结构:介绍组件构成、功能分区、分区定义,详细展示不同分区内具体信息和对应规则。 



- 使用场景:详细区分多种场景下不同的使用方式,明确给予使用指导



- 设计方案:备选,如果比较复杂的组件且涉及到流程中的关键环节,建议可以考虑复制一个完整的设计方案嵌入其中,便于团队成员理解沿用。


第四步,跟研发沟通,封装成标准组件。这一步是非常关键也是重要的一步,这将大大提高我们后续的组件复用率,降低重复性走查的耗时。推荐使用CoDesign-设计规范功能,上传「组件库」后能够按目录自动生成规范文档,同时将自动标注和切图,大大提高研发开发标准组件的效率。



3.5.5 文案规范

目标:将产品内各个场景内文案进行整理,帮助业务更准确表达意图,让设计师更好沿用,同时让用户感受到一致的产品风格。


文案就像“产品对用户说的话”,不同的人说话方式可能并不一样,没有绝对的对错。但清晰明了的语言表述,让用户更容易理解;符合产品气质的语气,能拉近产品与用户的距离;统一的文案描述,又能让用户在整站一致的语境下体验产品。


需要定义的内容,包括但不限于以下3个部分:


1.语言:语言是指我们通过什么样的规则来组合文字,让它形成一种惯用的表达方式。例如语句简洁明了,不过度修饰,避免重复描述,使用简洁清晰的语序,帮助用户快速理解;例如用词精准易懂,使用简单、易于用户理解的词汇,避免使用专业术语,或过于口语化的表述


单纯说规则可能太虚了,在实际定义规范时,还要如下图所示,加上实际案例示意避免误解。



2.语气:语气是可以体现产品气质和风格,定义时要结合全局原则内的设计价值观,明确产品性格后才能更好的定义出符合产品的语气风格。同一种语境下不同风格的文案就有明显差异。如网络异常时:


• 俏皮的文案可能是:网络开小差,请稍等一下

• 而正经的文案可能是:网络异常,稍后重试。



3.书写规则:主要包括常用词汇的书写方式,例如「日期简写方式」「英文大小写方式」「使用全角标点符号」等。以及易错的词汇短语示意,例如「账号还是帐号」、「登陆还是登录」等。这是团队设计师最容易沿用遵循的,也是接地气的部分。



4.具体使用指南:以上「语言」「语气」「书写规则」3个部分,是构成全局文案的基础规范。如果有充足时间的团队,可以考虑再结合实际业务,分别定义不同场景和组件下具体的使用指南。如下图:



最后再附上各个行业内定义文案规范例子,供大家参考:

B端产品文案指南:

https://www.yuque.com/linyecx/dragon/occ7pr#UEUSw

AntDesign 文案规范:

https://ant.design/docs/spec/copywriting-cn

Clarity Design 文案规范:

https://design.teambition.com/doc/introduction

国家标点符号用法:

http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf



四、如何「推进」交互规范


定义完交互规范,后续将考虑如何将其顺利的推进落地。本文罗列几个推进时重点需要注意的事项。


4.1 团队评审,达成一致


规范的定义不是一个人的事情,而是一个团队事情,它将关系到每个后续每个人的设计产出。所以在制定规范期间,应该定期在团队中进行设计评审。这不仅是评审设计好坏的过程,更是让团队达成一致、大家更深入了解如何使用规范的过程。


注意,参与评审的人不止是设计师,当然也包括具体的业务开发,很多时候我们会得到新的思路和启发。


4.2 善用工具,沉淀规范


规范搭建的过程中,有很多痛点:组件库需要多人参与维护和创建,容易造成冲突内容丢失;同时沉淀规范文档时,需要图片逐一复制、粘贴到文档内,更新时又要重复一遍这样的操作。而这些问题,使用CoDesign设计规范功能,就可以有效的解决提高效率。


首先组件库支持多人同时维护,差量更新;其次组件库上传后,可以自动生成/更新规范文档,避免反复编写文档,整体提效;最后当组件库有新版本时,会自动提醒团队内其他成员进行更新,保障团队设计一致性。



规范的过程其实也是整体设计走查的过程,我们会发现有些设计可能有体验问题,或不符合规范。每当这个时候,我们就需要对这些设计进行标记。在规范定义完成之后,迭代排期优化线上的设计。


而在实际设计使用过程中,可能又会发现规范无法满足的地方,此时又可以展开新一轮的提炼和总结,再反哺规范,形成正向循环促使设计和规范不断完善。



五、写在最后


在前言的时候就有提到「交互规范」只是整体规范中的一部分,最终是需要与视觉合并成一份统一的设计规范,指导后续具体的设计。具体的合并方式,在定义的章节内已有提到,就不再赘述。


最后,我一直认为好的设计规范是提高设计效率,引导设计方向,而不是因为设计规范而局限了具体业务的设计,如果这样,还不如不去定义。

文章来源:站酷      作者:大魔V

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

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

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

交互体验设计的核心概念之:示能与意符

鹤鹤

很多没有接触过交互体验的设计师小伙伴们,总有会面临一个坎,那就是看别人做交互和体验的方案总是特别简单,一个流程或原型别人做出来之后,我们心里总会想,那不就是这样嘛?换我也能做,但是只要自己一上手就不行了。


为什么?因为我们总是看着别人的结果下结论,而忽略了中间的思考过程。

就好像是吃着别人做的番茄炒蛋,你会觉得不就是番茄和鸡蛋一起炒一下,然后放点盐和糖就好了嘛,我们只看到了结果,而忽略了对食材的选择、处理、顺序、结合。




1.示能


当我们看到一个控件,你觉得它不就应该在那里嘛,但轮到自己开始做,就压根想不到要去用那个控件,甚至是信息布局、流程节点、整体结构都规划不出来。不知道大家有没有看上一篇原创文章结尾那个作业,如果做过的小伙伴可以发我交流一下。传送门--》


所以很多UI设计师觉得做纯执行的工作很没有意思没有价值。因为方案是别人做好的,思考过程也是别人的,而商业设计师的核心是解决问题,解决业务和用户的问题,既然解决问题的角色都是UI的上游,那么UI设计如何体现价值呢?当然就是把交互体验的核心底层概念搞懂,和交互设计一样从设计侧去思考问题,赋能业务。


OK,那么来我们先来讲:示能



1.1示能


心理学家吉普森将示能描述为:“关于有形物品如何传达出人们与它们互动的重要信息,这个特性被吉普森命名为“示能”。



用很直白的话来讲,意思就是:事物通过自己外在的形态,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打开的门,告诉人们可以进出、通过。一张椅子,人可以坐、可以靠。


假如,你面前有一扇门,门上有一个把手,这扇门告诉我可以利用这个把手与我进行互动,你可以用手、可以用脚,也可以用舌头,但手是最方便的。如果只是单扇门,那么我们可以利用推或者拉的动作打开,但如果是两扇门并排,两个把手在中央靠近,那么这时候门展示出来的意思就是两扇门都可以推或拉。但如果门把手在门的靠外两侧,那么意思就变了,变成了将门侧滑后才可以通过。


那门为什么要设计成不同样式来展示不同示能呢?这个留给大家思考,这三种门设计的初衷是什么。



在我们数字产品中可以有什么体现呢?例如一个开关控件(switch),开关本身具有两种互斥的属性和功能:开/关、启动/禁用,看到开关控件的外在样式,我们可以判断当前开关所属模块以及意符指示内容的状态是属于打开还是关闭。


开关在现实生活中的表现样式有很多,例如一侧翘起的开关、可以拨动的开关、具有段落的按压开关、分型控制的开关、旋钮开关等



大家别看开关看起来简单,但是在设计起来会遇到不少的问题,因为状态和意符形态在我们日常中过中很难成为一个标准,例如最常见的一侧翘起的开关,如果不加意符,我们不知道让哪边翘起才是开/关。如果你的房间就一盏灯,那么很简单,我闭着眼睛去按就行了,灯灭着那肯定就是关,再按一下那就是开。但如果在客厅中有多个并联的开关怎么办,一个灯可能收到2处甚至3处开关的控制,而每处开关的数量会在3-5个,这个时候不用意符去标识,就很麻烦了。



回到数字产品上,开关的示能就简单多了,有颜色的状态表示开,灰色状态表示关,但是开关控件在刚用在数字产品上的时候,很多人经常误以为是滑动交互来控制开关,虽然滑动也可以,但本身依靠更简单的点击触碰就可以了。但如果控件做的很长,那么滑动的示能就会更明显。



开关比较让人产生歧义的地方来自于意符,因为很多新人将一些控件的属性认为是有重叠关系,可以混用的,那就大错特错了,等会讲。



1.2.反示能


和示能相反,指的是任何物体之间不能进行怎样的互动。


例如我们经常做的人体工学椅,你可以靠坐在椅子上,并把手放在扶手上,但你无法在椅子上蹦跳,因为椅子无法支撑剧烈晃动。你也不可能用椅子打游戏,它本身不具备这样的功能。再比如我们裤子的口袋,设计师通过设计他的形状、大小、材质,帮助我们去盛放一些小物件,例如钥匙、手机、卡片,但是笔记本电脑你塞不进去,一头猪更塞不进去。


数字产品中也会遇到一些有很明显反示能的控件,例如segment Controls(分段控件/分段选择器/分段选择控件),它是iOS的原生控件之一,该控件的反示能就是无法通过左右滑动界面切换不同标签的视图,和tab不同。



并且在该控件的描述中,seg通常数量只能在5个以内,并且5个标签分别属于同类型的数据分割,只支持点击切换。它不能展开、不能滑动、不能移动、不能悬浮、不能进入二级页面也不能翻转。


那有没有一种可能,或者一个场景需要这两种控件同时具备一些属性呢?是有的,例如这样



在标签下是列表,而列表也支持轻扫的交互进行删除,如果使用tab则会产生冲突,而使用seg则在视觉上太重了,和产品调性不符。那么我们可以在示能上做一些调整,让这个控件看上去不能左右滑动,又不至于太繁琐。


所以反示能将告诉我们,事物有哪些不具备的功能。同时反示能也是相对的,遇到多样化的场景和业务需求时,我们依然要学会变通。



1.3.不同场景中示能的变化


一张桌子放在教室中,我们知道它是用来学习的,桌面上可以放书本、笔等,如果一个桌子放在户外,并且靠着墙壁,墙壁上有个洞,那么这个桌子当前示能表示为什么呢?一个肌肉发达的男人在健身房秀肌肉大家纷纷羡慕,但是如果不穿上衣走在马路上估计很多人会骂他变态。


下方图标+文字形式的一个按钮,放在卡片的左侧和右侧大家感知一下,表现出来的示能有所区别。



左侧更像是这个模块的标题,而放在右边才能让人觉得可点击交互。如果觉得不够明显我们再用三个点举例,放在不同位置的3个点小图标,所表达的示能相差巨大。再例如红色在弹窗中显示给人警示,但在活动页和价格数字上显示则给人感觉热闹的氛围和强烈的指引。



这就是不同场景中同样事物表现出来的示能区别。所以设计师在设计方案的时候除了要将方案本身属性表达正确以外,也要考虑到场景的影响。



1.4.相同示能的不同表现方式与含义


这里有一个概念叫做同构异型,说的是结构相同,形式不同。例如我们经常用到的tab与其视图的呈现,tab的本质就是利用多个标签来切换标签下的视图,所以标签除了用tab的形式,还可以用下拉展开成为菜单的形式,只不过一个是平铺,一个是点开后再列表选择。



再举个例子,例如筛选控件,如果我们需要一个实时筛选的功能,那么我们一般会这么做,在b端web设计中,会将一系列筛选条件横向摆放,每一个筛选条件都可以下拉展开进行筛选,但如果迁移到移动端中,因为横向距离受阻,就会纵向标签展开式的筛选模式,从结构上来说,这俩方案其实是一样的,都是在多个筛选条件中分别筛选出不同的标签。



再例如一个父子集共生的内容卡片



同构异形在设计样式上会有很多种,例如列表,例如上文说到的单控开关,虽然样式很多,但原理上单控开关都是一样的。


对于初学者来说,不同控件理解的比较片面,所以就会导致一些控件的使用错误。


说到同构异形那就不得不提到同形异构,例如一块素牛肉,外观和红烧牛肉一样,但是它是豆制品。我们再来看下面两个模块,根据整体来判断,两边的加号都是反映出可以点击添加的示能,但如果我们继续考虑交互之后的逻辑和流程就会发现问题所在了。前者添加的是标签,添加完后会显示在相关的区域,添加按钮不变。



这里可以用一个比较形象的比喻,我有4张椅子,其中3张坐了人,第四张椅子的示能为:只要这张椅子坐了人,边上就会出现新的椅子,最多不超过8张,如果没有人坐则只显示一张椅子。


但第二个模块中的添加按钮结合整体来看是和其他内容毫无相关的添加入口,就好像是第四张椅子上面坐的不是人而是套了一个大箱子,椅子不见了,原本应该和其他内容保持一致的外观也不见了,出现了一个新的东西,出现了新的示能。所以如果我们要按照第一种规则玩,那么这里就不能套箱子,如果要放箱子,就需要放在其他的地方。


所以,初学者要警惕同型带来的使用误区,有时候长的很像的两个人,可能完全没有血缘关系。 


小结

示能的概念大家已经了解了,对于我们设计师来说,尽量去搞懂更多事物在不同场景中的示能和反示能,需要解决问题的时候可以针对性的运用各种方案。



2.意符


咱们上一篇讲到了第一个概念:示能,如果忘了或者没看的同学可以再去看一下。


我是传送门


今天我们要来讲意符,意符在外面日常与事物的交互过程中,非常重要。


以下文字比较干,部分需要大家仔细阅读动脑,觉得难懂的小伙伴可以联系我交流


2.1意符的类型与表现形式


示能决定可能进行哪些操作,意符则点明操作的位置以及如何操作。


设计师往往会说,我设计了一个很好的方案,它将告诉你产品的用途,但是用户却不知所措,虽然知道产品就在那里,但无法下手,因为意符不明确例如我们最常用的人体工学椅,可以调节高低和后仰角度,调节的控制器是两个把柄。如果没有意符加入,我们经常会记不清哪一个控制器控制的是后仰角度,哪一个控制的是座椅高度,需要去做更多的尝试。



所以意符告诉我们对事物正确操作方式以及任何可感知的标识说白了就是一个能够表达事物具体操作的符号。


大家还记得上一篇文章举的一个门的例子吗?在日常生活中,双开门通常在商场、大型会议场馆内看见,因为考虑到人流量比较多,于是在门上就会出现推/拉两个文字意符,避免两侧的人同时推或者拉,引导人们正确通行。我们可以使用推/拉,但不可以用“按”,因为我们无法通过“按”的交互来操控门的开关。


如何判断一个设计是否优秀,那么我们会观察其本身的示能和意符传达是否自然,如果意符表现的太过刻意或者画蛇添足那就是很糟糕的设计,例如在两扇透明的玻璃门上再添加推/拉的标识,就显得有点多余了。再例如切换短视频和翻页电子小说,我们不会用一个翻页按钮而是通过滑动来手势切换。当我们将内容设计全屏的时候就要考虑到当下示能的含义,所以就不要画蛇添足。


OK,它的表意大家已经清楚了,那么在数字产品中,意符有哪些类型和作用呢?它们又可以帮助用户解决什么问题,我们来看一看。



意符的类型


1.文字


文字意符是最常见的一种类型,利用文字描述来说明如何进行交互操作,但是中文文字博大精深,不同的描述给人的理解和感受完全不同。


案例1:开关


开关控件单独拎出来不具备完整的含义,必须在相应的场景中。例如我们在通知、设置的场景中经常会用到开关,并且需要相应的文字描述来解释开关控制的内容是什么。



这里的文字就是意符,用来解释开关的作用。


开关本身具备的含义中是有这样两条原则:

1.需要让用户感知操作后立即生效 

2.开关所属文本必须简单清晰无歧义


所以咱们可以看下方的案例。当我们将文本描述为“不打开(关闭)则不再进行消息数字提醒”和“不接受推荐”后,会显得开关操作含义不明不直观。正确方式应该是正向且简单的描述,不要用双重否定等描述方式。默认描述为打开后的状态描述。



再来拓展一下,我们会发现其实依然还有产品中的开关文字意符用了非正向描述,那按照你的说法不就错了吗?我们来看看小红书和微信的权限开关,这里分别是隐私设置和权限设置。



这里理解起来会有点绕,大家看看能不能理解。首先“只允许我关注的人评论我”这是一个正向描述,没有问题,如果换成反向描述就会变成“不关注我的人不能评论我”,结合右侧的开关,逻辑层面就要多加一个双重否定的理解,所以这里的用正向没有问题。


接下来看下面的关系设置:不把我推荐给可能认识的人,诶这里用了反向描述,大家来分析一下,这里是否合理呢?


首先小红书在新下载应用打开时会向用户进行授权,为了帮助用户发现更多渠道的好友,所以默认在协议中就会去微博、通讯录里拉取好友的信息从而在浏览内容的时候进行更多好友的曝光和推荐,同时也会将我的信息推荐给认识的人,这样产品的活跃度、用户的曝光会提升。


那么大家再来品一品这两句话:1.“不把我推荐给....” 2.“把我推荐给....”前者比较含蓄,后者则更主动,中国人的关系总体来说就是比较含蓄的,就好像是你可以给我推荐,但我不会主动要求,更何况像小红书这样的社交平台,“可能认识的人”对我来说价值并不是很大。所以我个人也觉得默认不推荐比较好。


不知道这样的说法大家是否可以接受。再来看微信:不让他看和不看他。微信这个平台想必我不用多说,既然是熟人社交更多,那么默认肯定是全部开放,而有特殊需求才需要进行隐私设置,所以默认状态为不让他看-开关关闭,意思是我没有打开这项非友好的选项。


那为什么会出现有的开关默认打开,有的开关默认关闭,还可以使用反向描述呢?我总结了下,如果涉及到一些隐私和权限的内容,一般我们默认为开关关闭。但如果是为了用户体验和效率考虑的内容我们可以默认为打开,例如视频播放结束自动播放下一个视频这样的设置。


开关文字意符的描述方式还有几种不同的方式:


1.内容标题+开关切换后状态与内容变化的描述

第一种类型也就是上方说的案例,但是要注意的是,在描述状态变化的时候,文本要正向、简单的描述,例如开启后,接收xxx消息,而不要写成关闭后,不接受xxx消息。


2.功能直接描述

不添加说明文本,直接展示功能标题,例如微信听筒模式、消息设置、提醒等,直接用开关控制这些功能的打开和关闭,属于功能设置。还有一种是授权,例如允许他人查看我的收藏,对他人行为的约束,但不能描述为不允许他人查看我的收藏,因为刚才我们总结了,如果对于一些隐私权限的设置默认需要关闭,那么加上正向描述就不能使用“不允许“。


3.批量整体描述

对于同一种类型的功能设置,可以利用批量的形式做整体描述。



再来看一个例子,示能在不够清晰的情况下,文本意符用来辅助对当前内容/状态的解释



例如b站在浏览内容的时候会出现“刚刚看到这里,点击刷新”,或者当我们在浏览信息到一个页面底部时发现无法继续滑动,会出现一行文案:我是有底线的,说明内容全部展示完毕。



文字意符很直观,但也要避免歧义。



2.图形/图标


图标在某种程度上当作意符使用的频率会更高,虽然某些图标表意不明,但是因为简约、美观、生动、普适性强的原因,所以很多地方倾向于用图标,例如公共卫生间、商场的扶梯、通道,通常会用图标来代替文本,或者强图标+弱文本的形式。


既然咱们要说图标意符,而且要突出图标意符的作用,那就必须有个前提,那就是抛开其他的变量、因素的影响,图标意符究竟有什么神奇的魔力。



例如我们常用到的列表,很熟悉吧,接下来我将用图标来让这个列表的示能产生变化


我们发现,只有文本的列表,示能不明显,而加上图标之后就很明确了,甚至加上不同的图标,示能也随之变化了呢?刷新、跳转、展开、移动、选中、删除、步进、开关、屏蔽、更多。但你不能用撑开、向上展开、旋转、翻转、折叠、回退等等。


这些其实是很简单和基础的概念,但是很多工作多年的UI设计转交互体验的小伙伴就经常遇到这些问题,大家总是在问UI和交互的区别是什么,其实本质上它俩都是一个界面设计师必备的能力,不能拆开来谈。


我们再来看一个例子,播放/暂停的图标,用来控制音频/视频的播放与暂停,


在实体播放器上,我们能看到播放和暂停往往集成在一个按钮上,例如天猫精灵、电视遥控器等。而在数字产品中播放与暂停并不会同时放在一个按钮上,因为数字产品的图标是可以变化的,当前状态和切换状态可以有两个不同的意符表示,那实体播放器做成两个按钮就太多余了。



还没完,当我们在观看视频的时候,界面中会显示暂停按钮,意思是点击后播放中的视频/音频会暂停播放。也就是暂停图标展示的是点击后的状态,而不是当前状态。但其他图标表示的意思却又和开关相反,例如横竖屏切换、收藏、点赞,显示的就是当前状态,而非点击后状态。


为什么不一样呢?因为暂停/播放相当于一个按钮,用来控制视频播放,这里存在着一个控制和映射的关系,然而这里的暂停和播放按钮的示能是相反的。

暂停图标的示能表示当前正在播放,而播放图标的示能表示当前已暂停。所以它和开关也不同,开就是开,关就是关,点赞图标的原理就如同开关。


还有例如打开和关闭声音,看起来声音播放/静音有点像视频的暂停和播放。



例如腾讯视频这里的视频声音控制,当前静音为声音关闭图标,而不是打开后播放声音的图标,我们再看iOS系统的里声音控的样式表现,说明当前声音为开启则显示的是开启声音的图标,经过交互控制后才会变成静音的图标。所以声音播放的控制和视频播放的控制在图标意符的使用规则上并不统一。


那为什么会不一样呢?其实我也看到过一些声音图标和这个案例是反着来的。


两个原因:


1.因为视频的打开和关闭只有两个状态,但是声音不同,声音在打开的时候还可以调节音量啊!如果和视频播放一样,在播放的状态下显示的是静音的图标,那么音量调节就会变成这样:




是不是就很奇怪了,明明是正在播放的状态,显示的居然是静音的图标


2.暂停和播放的本质并不是开和关,而是中断和继续,在本质上和开关还是不一样的。而静音和播放的本质就是对声音的打开和关闭,如果我在声音边上加一个开关是不是就能弄清楚,为什么声音控制器的图标意符就是当前状态而不是交互后的状态。而视频的播放和暂停并不是开关。这下大家搞懂了吗?


图标意符可以单独使用也可以结合文字使用,图标虽然有优点,但也有缺点,如果单独使用也需要注意使用的场景,比如举个例子,同样是放在导航栏的两个图标,但是在不同的界面中,大家可以感知到该图标的含义吗?它的示能和意符相结合成为了一个图标,但不够明确,在不同场景中如果没有文字意符的辅助就会不够明确。



图形可以辅助表意,也可以用来指示区域,例如我们经常开车,会知道马路上会划分实线、虚线、虚实线、潮汐车道线,示意车辆可以在哪些区域行驶、以及形式的规则。



我们在医院拍胸片的时候,胸片机器下方也会指示人应该站在什么位置,用一个方形的框框起来,或者会显示两个脚印的图形。在数字产品中图形的指示区域也非常重要,例如我们设计一个按钮,只有文字样式的按钮和具有图形背景的按钮在用户的点击感知上是不同的,后者的点击信心会更大,有了区域的划分就有了明确的操作界限。




3.颜色


颜色意符很好理解,通过色彩来表达如何与事物进行交互以及辅助表达。


无论是实体产品或者数字产品中,警示的颜色大部分会用红色或者橙色来表示,例如在进行信息检查时,错误信息会被用红色样式标注出来,既告知用户出了什么问题,又提示用户在哪里出现问题。


而需要热闹、活泼的氛围也会采用红色等暖色来衬托,因为暖色更加的醒目。有时颜色也是物体示能的一部分,例如紧急逃生出口、公交车上的安全锤、灭火器都是用红色的外观,表示在紧急情况下可以使用,但不要轻易使用。


绿色表示安全、自然,但也有一些特殊场景下的不同感知,例如金融行业不太喜欢绿色,男士不太喜欢帽子使用这个颜色,除非你是比克大魔王。灰色则表示禁止、不可用、待激活等等。


在数字产品中,色彩除了表示一些特殊的含义,也可以用来作为信息区分,在选择观影位置的时候,可以利用色彩显示不同区域位置的观影体验和价格的区别。更多的色彩心理学和色彩的使用这里就不展开了。





4.声音

声音意符就更有意思了,人们通过听声音来辨别发生方位、响度、发声物体以及声音的音色、质感。各种物体通过声音来传信息的方式也非常多样,而我举个例子,就能把大家带回到童年。


你们还记得以前在学校电脑教室里一个企鹅图标开始闪烁吗?一个咳嗽声表示有人申请加你好友,一个敲击木头的声音表示有人上线了,一个滴滴滴的声音表示有新消息。还有在短视频里经常会用到的一种中断音效:滴————。你们会发现我怎么能打出有声音的文字,仿佛你们已经在听了。


声音为什么很重要,因为人类的五感是在共同作用的,我们除了可以通过声音来判断事物本身,还可以用声音来感知当前行为的状态,例如打开手机的键盘输入音,这样的打字反馈更真实更有质感。


还有在游戏领域我们经常会提到的打击感,当人物的武器打击在怪物身上,但声音并没有及时反馈,而是延迟1秒,这时候你就会觉得没有什么打击感,除了声音反馈,打击感的意符还有很多,例如受击物体的表现动作、击打区域、击打特效、动效、伤害显示、控制器反馈等等。



5.动效

动效也可以成为意符吗?它能表示什么含义呢?动效也是意符中非常重要的一种类型,他在我们日常生活中也用到的非常多。



例如我们看到理发店门口正在旋转的彩色灯。


这里也顺便给大家讲个小历史,理发店彩灯的由来:在中世纪欧洲,人们认为放血疗法对人的健康又很大的帮助,但是一般都由宗教仪式中的神职人员操作,到了亚历山大三世,他把这项工作交给了医生,但是当时的医生不愿意做这种下等人做的事情,便委托理发师来做,于是理发师就成立了理发师外科医师联合会,三色柱就是活动的标志,红色代表动脉、蓝色代表静脉、白色代表纱布。还有一种说法是在法国大革命时期,一家理发店是革命党人根据地,一次危险的活动中领导人在理发师的掩护下逃脱,最后为了表彰,允许他们用红、白、蓝三色的国旗作为标注,最后演化成了旋转灯,各国效仿。


好了,题外话说完,我们再回到动效。如果你看到三色灯正在旋转,说明这家理发店正在营业,如果静止则说明停业,或者坏了。是不是很简单?这就好像一个出轨的女人告诉情夫如果家里有人则阳台上放一盆菊花,家里没人则放一盆绿萝是一个道理。


那么在数字产品中,动效意符还有哪些作用呢?我们一一来盘点一下:


1.降低用户认知成本

我们通过设计界面的转场、控件的唤出动效,告诉用户你将从什么地方去往什么地方,和你有关的控件是从哪里来,你可以怎么控制他。当你进行过交互行为后哪些内容变化了,它们是怎么变化的。这就好像你等的45路公交车从远方朝你慢慢行驶过来,停在你的面前并打开了车门,你选择了上车然后看到阿姨捧着电饭锅,拉动气门,接着爆炸。而不是当你站在原地直接爆炸。被红姨的支配还宛如昨日。


所以一个好的动效能让你清楚事物的发展过程,以便于你更好的去理解。再例如我们在使用饿了么、美团等应用时,添加菜品会有掉入外卖箱的动效,这是一个非常好的动效应用。微信公众号策划将文章收起到浮窗也会有一个浮窗去向的引导,告诉你虽然文章在收入交互动作的结束是在右下角,但如果你想查看所有文章需要返回首页,在页面的左上角才能找到。




2.引导/提示/强化

对于一些新人须知或者内容隐藏的部分,产品通常可以通过一个小动效来引导用户这里有新内容,例如淘宝二楼、印象笔记功能图标的切换、活动入口等等


3.氛围、强化视觉

电商、直播界面中,有非常多的元素都是利用动效来刻画氛围和效果,刺激人们的感官。



4.表示状态

当你在手机解锁的状态下输错密码或者在氪金时输错密码,输入框都会进行左右晃动来示意,老铁,这真的不对。





5.更多意符

意符不局限于我列出的一些类型,我再举个例子,在一个不起眼的转角处,那里空无一物,就是很普通的一块空地,但如果那里被丢了一袋垃圾,那么这里就会出现越来越多的垃圾,因为第一袋垃圾就是一个意符,告诉别人这里可以丢垃圾,于是很多人就会把垃圾丢在这个角落里。


很多人会觉得示能和意符好难区分,示能不是也包含意符吗,其实我们可以这样理解,在整个交互过程中有物体和操作者这样两个对象,物体本身表达的是示能,但它不具备沟通能力,而意符才是链接操作者和物体两者的桥梁,虽然我们平时往往看到的都是示能+意符的状态,但是我们也要区分本体的示能和用来沟通的意符两者的区别。



小结


意符和示能不可分割,设计师们在学习基础概念的时候要尽可能的一起去了解并学习。意符的种类繁多,所以我们在学习意符正确的时候方式时,首先要了解意符本身的“示能”,从而将意符更巧妙的结合在事物中发挥其正确的表意作用。


设计师在设计意符的时候也要尽可能的多了解产品使用者(用户)的背景,意符的表达也有很大一部分效果来自于用户的经验和心智。即便我们认为该意符已经很清晰了,但是使用者并未接触过、不理解,说明该意符依然不合适。


文章来源:站酷      作者:应骏

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

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

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


弹窗篇 | 如何弹、什么时候弹?你需要知道的弹窗设计原则!

鹤鹤

弹窗到底该不该加?怎么加?用什么形态展示?真正的作用是什么?这些真的是产品经理说了算吗?

好的产品通常会在恰当的时间、合适的位置给出合理的反馈,弹窗也是必不可少的反馈方式,不反馈、反馈不及时或反馈不合理都会带来不好的使用体验,甚至误导用户,从而导致用户流失。很多时候,产品经理会从商业角度、公司业务、资源限制等方面考虑问题,但这些未必是用户所需要的,设计师不应该完全按照产品需求做设计,否则就成了只会照搬产品原型的“美工”。需要做的是从用户角度出发,把产品需求转化成设计目标,只有经过反复的推敲、认真分析,最终才能打磨出服务于用户的弹窗设计,所以弹窗该不该加、如何加就成了设计师不可推卸的责任和使命。

本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点,将自己对弹窗的理解、设计经验分享给大家,帮助大家对弹窗组件有更清晰的认识,为后续避坑设计出更好的弹窗做准备。




本期大纲


一、弹窗的基本介绍

二、弹窗体系分类

三、弹窗的使用场景

四、如何设计有效的弹窗

五、需关注的问题点

六、总结




一、弹窗的基本介绍


1 弹窗的定义

当我们与应用产生主动或被动交互时,页面上层会弹出容器,将可承载的文本、按钮、选项、标签或表单等任一内容与之组合,就可以用来传递信息、状态反馈、引导用户等操作,这就是弹窗。

弹窗的目的主要是为回应用户或让用户回应,是用户与产品间对话的一种方式,在线上各种场景中都有可能碰到,相当于产品的线上小助理。不同类型的弹窗其作用不同,但最终都是为了满足跟用户之间的友好交流。


2 弹窗组件的构成

弹窗组件的样式很多,如浮层、对话框、下拉菜单、toast等,且iOS、Android官方平台也都根据自身的规范对组件进行命名,不管如何称呼,其常见的弹窗组件绝大多数都是由以下元素组成:

◇ 容器:作为承载弹窗的文本、图片等内容,容器必不可少,有的弹窗直接以蒙层作为容器,如toast;

◇ 蒙层:为了和底层内容分离,避免信息混淆,通常会在界面上层(容器下层)设置一个不透明度为20%~60%

的纯黑色蒙层。部分小型弹窗不设蒙层,但会为容器设置投影,例如筛选器的展开、下拉菜单等;

◇ 文本:文本是弹窗传达信息主体的必要条件,如标题、按钮等,即便把文本融入图片,也能一目了然;

◇ 图片:用于运营弹窗传达更多信息内容的方式之一,为了对用户产生更强的吸引力,还可设计成动态效果;

◇ 表单:为成功进入下一步做准备,如输入密码(iOS设备下载应用前的必要步骤)。也可以是当前页面流程的分支,例如输入优惠券等;

◇ 选项:条件较少的选项可使用弹窗完成,单选、复选在选项不超过6个的情况下都可使用;

◇ 图标:在弱化次要操作的情况下,通常会将关闭弹窗按钮设计成图标放在右上角或弹窗下方,目的是突出主操作,鼓励用户从弹窗中进入下一步,另外还有单选、复选、提示等按钮;

◇ 按钮:是进入下一步或回到上一步(去掉弹窗)的操作入口,部分应用也可以点击弹窗以外的空白区域让弹窗消失,但同样会提供按钮以方便用户更容易操作。toast等短时间自动消失的弹窗无需设置按钮。




二、弹窗体系分类


1 模态弹窗

用户在完成任务的过程中,界面会出现弹窗打断用户的操作行为,用户必须通过主动点击才可以进行下一步操作,这即是模态弹窗。

模态弹窗通常能较好的获取用户的视觉焦点,并通过承载的内容、按钮主次层级来引导用户完成他们的需求,这也会根据用户、产品侧重点的不同,弹出样式也有所不同,常见的模态弹窗有对话框、动作栏、浮层...等。


1.1 对话框Dialog/Alert

对话框是很常见的弹窗,主要在打断用户后并提供选项操作,对用户的干扰较大,通常会配备1~3个操作按钮,而且会把用户最期待的或产品最期待用户操作的按钮突出显示。

对话框类型的弹窗主要分为主动、被动两种触发类型,主动弹窗:信息的二次确认、输入内容、前置条件选择、风险警示等;被动弹窗:版本更新、运营宣传、消息通知、系统功能授权等。


1.2 动作栏Actionbar

动作栏是通过用户主动操作后弹出的内容信息,基本都是从底部弹出,屏幕占用比例根据内容量的多少比较随意,从小区域、半屏、再到全屏随处可见。

动作栏相比对话框则能承载更多、更丰富的功能信息,在用户清晰感知当前操作及反馈的情况下,比跳转到新的页面更有安全感。


1.3 浮层Popover/Popup

浮层是指用户操作某个功能/内容后,会在附近出现一个带有视觉引导性质的弹窗,最常见的浮层就是下拉菜单/弹窗等,浮动于顶层窗口并指向触发操作的位置。

例如很多社交娱乐类型的应用右上角有一个“+”入口,里面会放置部分常用功能。部分浮层底部没有设置不透明度的蒙层,为了与页面信息更好的区分,会给浮层容器加上投影,避免与底部信息混淆。


2 非模态弹窗

相比模态弹窗,非模态弹窗属较为轻量,触发后以一种非阻碍的的方式呈现,不会打断用户的当前操作,主要是给予用户即时反馈,让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作,根据反馈信息的重要程度及意愿,可在一定的时间内自动消失,也可等待用户操作后消失,常见的有以下几种:


2.1 提示框Toast/Hud

用于反馈用户操作成功、警告、错误等当前状态信息,可能出现在任何位置(底部/中间/顶部),在呈现样式上,相同等级的模块统一位置、风格即可,无需用户有任何操作,出现2s左右自动消失。

Toast只有纯文字提示,例如格式错误、刷新成功、删除成功等;Hud会使用文字+图标样式,例如添加到购物车、关注成功等。


2.2 提示对话框Snackbar

Snackbar早期只是Android系统的一种弹窗控件,后在iOS、Web前端都会使用到,可以看作是toast的加强版。一般只出现在屏幕底部,存在的时间比toast长,提供0~1个操作入口,可自动消失,也可与用户产生交互后消失或者跳转至其他页面。

Snackbar反馈的重要程度强于toast,例如,某个应用今天有重要提醒,同时又不想影响用户的其他操作,会在用户首次进入时弹出提醒,并提供关闭操作入口,等待用户通过手动关闭(部分自动关闭),加强用户记忆。


2.3 通知Notice

最有代表性的就是消息通知、系统推送,在设备未锁屏的情况下,通常从顶部弹出,停留几秒后自动消失,锁屏后,不同设备弹出的位置也有所不同。Notice的前提是需要在应用设置中打开消息通知开关,具备应用外推送功能的,需在设备系统设置中开启通知权限。


2.4 透明指示层HUD

HUD是一种在透明元素上通过填充、反馈用户当前交互操作的指示层,实时生效,例如视频类产品中的调整音量、亮度、控制进度条等。




三、弹窗的使用场景


当我们对弹窗体系有了一定了解后,就需要清楚什么场景需要设计弹窗?用什么类型的弹窗?产品最终都是服务于用户,如果仅凭自己的主观意见乱加一通,整的花里胡哨,弹窗就成了干扰元素,很大程度上会影响用户体验。什么样的场景适合什么类型的弹窗,我们可以从以下几点来说明。


1 打断用户的操作

风险警示:当用户的某种操作可能存在风险,为避免操作失误,会弹出对话框打断用户,并给予一定的风险提示引起用户的注意,让其有足够的时间确认是否真的需要进行下一步操作,如:删除、放弃福利机会、退出登录等,会弹出对话框提示操作后可能引起的后果。

前置条件:部分任务在流程中设有一定的前置条件,需要满足条件才能进入下一步操作,通常这种情况会根据内容量的多少、重要程度以对话框或动作栏的样式弹出,例如下单时选择优惠券、支付方式。

任务关键节点:用户在满足任务的基本条件后,需要操作一个关键步骤才能成功,则会弹出对话框让用户完成最后一步操作,例如提交订单、表单、输入支付密码等。


2 定制化弹窗

这类弹窗主要从产品角度出发,不会过于在乎用户是否需要、会不会反感,都会引导或强制用户操作。

例如产品发布新版本,会强制用户更新,否则将无法使用。还有各大电商APP,在进入首页时会弹出一堆红包、优惠券,刻意将取消/关闭入口弱化,给用户返回造成一定的难度,利用突出的视觉、动态效果突出主题增加吸引力,以达到转化用户的目的。


3 二次确认

二次确认也是一种打断用户的操作行为,但跟上面纯粹的打断用户相比其作用更大,主要是在用户已做好选择的情况下再次弹出确认,以免操作结果造成用户认知上的偏差。虽然从用户体验角度出发,用最少的操作、最简单的流程满足用户所需是产品追求的目标之一,但通过权和利弊之后,二次确认的出现实属迫不得已的折中方案,它能够起到给用户多一次思考避免误操作、同样的含义换种方式表达、重要的内容加深二次记忆等作用。

二次确认使用得当,可以避免用户、产品的潜在风险,但若是从主观角度一味的滥用,就成了对用户的恶意干扰、影响使用体验,导致出现因多步骤操作增加任务完成难度、降低转化率、损害产品形象等问题,所以需要从业务(用户侧、产品侧)实际角度出发,两相其害(加-影响使用体验;不加-造成一定损失)取其轻的考虑是否需要增加二次确认弹窗。

当用户的某个操作可能带来不可逆转、错误严重程度较高时,例如:放弃仅有一次机会的较好福利、手机系统还原、应用账号注销等,系统都会给予二次确认,降低用户认知偏差后,以确保用户是经过多次思考才做出的决定,即便后续给用户造成损失也不会过于降罪产品,产品也算是“问心无愧”了。


4 简单提示

常见于用户操作之后的状态反馈,即便用户没有注意到,也不会造成较大的损失、或结果已经注定,相对来说成本较低,大部分出现在任务过程中的提示(可重复)和结果反馈,以确保用户知晓当前所处状态。

非模态弹窗toas样式居多,例如加载中、操作成功、刷新结果、清除缓存等,可出现在其他类型的弹窗之后或同时存在。




四、如何设计有效的弹窗


1 前提条件

优秀的弹窗需要从视觉、交互两方面思考,视觉上简洁、易懂,交互上可操作且可控。

视觉层面:首先需要做到的是易懂,这时候就非常注重文案清晰程度及按钮层级关系了,弹出的信息需能直击要害,用户看了能一目了然才是关键;其次,弹窗属于一种干扰信息的存在,设计必须简洁,在弹出时需要考虑是否会过度影响(影响是一定会有的、且看如何降低)用户的其他操作。假想我们正在玩游戏、突然来了电话全屏幕覆盖(传统来电),自己会以最快的速度挂掉电话,回到游戏中后发现自己已领“盒饭”,即便来电是多么的理所当然,但心里必定是非常不痛快的,那么,如果来电以弹窗的形式且占据屏幕很小区域(如今的来电方式)是不是就给了用户足够反应时间及缓冲时间呢?

交互层面:弹出的内容及操作入口需清晰可操作,虽然有时基于业务需求,产品更希望用户能进行下一步操作而并非回到上一步,即便如此,我们也只能通过弱化次要操作以突出主要操作,用户有来去自由的权利,如果弱化至用户看不清、甚至找不到的程度,即便提供了次要操作入口,也会存在反面作用;另外需注意用户对产品的可控性,不管产品如何期望用户进入下一步转化,但不能强制,一定要给用户提供回去的路(强制版本更新除外),否则,任性的用户可能会直接结束应用,甚至因产品过于霸道直接卸载。


2 设计目的

首先,设计师应该理解产品需求,分别从用户侧(能给用户带来什么?满足什么样的需求?避免什么损失?...)、产品侧(能给产品带来什么?产品如何期望?是否合理?能得到什么样的结果?...)分析为什么要加弹窗,然后将分析的结果转化为设计目标,以确保弹窗根据不同的需求,在恰当的时间、适合的样式合理的呈现给用户。

其次,在得到设计目标后,同样需要从设计侧、技术侧思考弹窗组件的一致性。从设计角度,团队所有成员需要对该组件有清晰且统一的认知,了解组件的使用场景,以确保不会错用、滥用,如果增加或更换新人设计师,很容易学习和上手,提升效率;站在技术角度,一致性的常用弹窗组件,便于开发做组件封装后续复用,减少不必要的重复工作,大大提高开发效率。


3 设计思路

在UI设计中,组件的设计思路基本相通,旨在满足产品的实用性、视觉的统一性,主要围绕着以下几点进行:

◇ 基础定义:利用清晰易懂且简短的文案描述弹窗组件的内容及目的。

◇ 类型及构成:明确弹窗的类型,如模态/非模态,将其拆分并注明每个小元素的具体信息。

◇ 规则用法:弹窗出现的位置、包含的具体内容及信息的展示规则,比如哪些场景可复用。

◇ 交互状态:交互流程逻辑清晰,拟请产品交互前、交互中、交互后如何反馈以及用户随时可能碰到的问题。




五、需关注的问题点


1 信息的层级关系

设计弹窗时需要注意信息的主次层级关系,优先传达用户想要的或产品想要让用户知道的,以确保重要的信息在第一时间传达给用户。


2 展现形式

弹窗需要根据实际的场景合理使用,不能为了简洁而过分删减内容、更不能画蛇添足。例如一些偏向于操作状态、系统报告类的提示可以使用简单的反馈,而可能造成用户损失的提醒就需要刻意打断用户,给予更明确的提示甚至二次确认。

△ 例如删除内容就需要使用模态弹窗明确提醒用户,如果用非模态很可能被用户忽略从而带来不可逆的损失。


3 文案表述

因弹窗本身承载内容有一定的局限性,固文案一定要简洁且精确,能用一句话说清楚的就不要过于啰嗦,不仅容器的空间有限且用户的耐性也有限,需要在有限的空间、有效的时间内清晰的表达出核心内容。


4 弹出的时机及频率

针对运营弹窗,如果弹出的时间不对或过于频繁,可能会造成用户反感,所以需要把握好弹出时机及频率。

例如用户有一张未使用的优惠券,如果用户每次进入应用都看到弹出提醒,确实又没有购买商品的意愿,总是被弹窗打断真的就很烦,那么可以将提醒弹窗设置为每日首次进入应用时提示、每累计进入应用5次后提示、即将到期提示或者用户有购买意愿且优惠券支持改品类时提示等,总之,需要控制在大部分用户的可接受范围内。




六、总结


本篇文章主要系统的分析了弹窗组件分类及使用场景,总结的虽然不是很全面,但能让很多新手设计师清楚认知弹出组件的定义及用法。另外,弹窗不管如何设计,都需要有一个不断优化的过程,要根据产品的实际情况不断思考与打磨,通过脑暴或已知问题作出更好的改善。

能清楚认知、理解、使用弹窗组件是一个成熟UI设计师必备的条件,当然,并不能以此定义设计师是否优秀,在此基础上,还需通过持续的学习探索,挖掘出更多技巧,不断提高自身的专业能力。

文章来源:站酷   作者:大漠飞鹰JYSJ

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


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

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

浅谈设计中的温度——如何用互联网思维帮扶乡村孤寡老人和留守儿童

鹤鹤

前言

 _


提及“设计的温度”,不得不提我们老生常谈的“情感化设计”,提出这一概念的美国认知心理学家唐纳德·诺曼将设计拆解为三个层次:本能层、行为层、反思层,层层递进。



1/ 本能层的设计,是视觉的直接反馈,是指用户第一眼看到的、感觉到的东西是否会激发用户兴趣;

2/ 行为层的设计,注重的是效用,产品功能是否好用,易用,用户使用产品过程中能否高效解决问题;

3/ 反思层的设计,是情感化设计的最高层次,指用户使用产品后,是否建立情感连接和记忆反馈。

因而,它们是从美学诉求到效率诉求再到情感诉求的一个进阶关系。


如果一款产品在满足基本功能,对于用户有用,同时好看并且易用,使用完之后还能产生愉悦以及满足感的话,那么这将是一款好的情感化设计产品,那必然是一个有“温度”的设计。


如果一个项目本身充满社会使命和责任感,那么“有温度的设计”将可以助推项目的落地链条,让使用平台的用户有“温度”,更让项目背后的人员感受到“温度”。


因为,接下来陈述的项目是一个很有“温度”的项目——用互联网工具去温热社会中的穷苦灰暗,用互联网思维去帮扶社会的乡村孤寡老人和留守儿童,用有温度的设计去践行有温度的项目。




项目背景

 _


随着我国社会经济的快速发展,农村青壮年劳动力转入城市,人口老龄化趋势加剧和家庭结构的演变,“空心村”越来越多,因此在乡村出现大量的“留守儿童”和“孤寡老人”。据统计,在农村独居和空巢老人超过3000万人,留守儿童也达到了近2000万人



孤寡老人因为独居生活、物质困难、缺乏照料面临着易患疾病、精神压抑等很多问题;而留守儿童因为缺少父母监管和陪伴,极易产生很多身体及心理问题,这两大群体是我国人群结构的重大组成部分,一个是未来的花朵和希望,一个是曾经发过光热的迟暮老人,他们需要关爱和守护,需要有一座“有温度”的桥梁,为留守儿童撑起蓝天、健康成长;为孤寡老人送达温暖、安享晚年。



基于社会现状,践行社会责任,腾讯为村平台联合中国社会福利基金会、腾讯公益慈善基金会,预想搭建一个线上与线下结合的平台,成立“为村暖心小站”,立足于脱贫地区的农村社区,主要服务农村的一老一小以及其他需要帮助的困难群体,解决日间照料、健康护理及心理关怀等诸多问题。




设计思路

 _


1,定义产品形态


“暖心小站”的整个帮扶路径是以线上+线下相结合的模式,依据产品需求,在线上可以招募志愿者、发布救助需求、触达爱心人群;在线下建设实体服务站,开展具体的帮扶活动。从而形成一个从线上到线下的一个完整帮扶闭环。



那在线上的呈现形态上,主要考虑APP和小程序两种方式,经过对比分析,APP稳定性高、体验好,但是在乡村的受众群体内,互联网基础还是很薄弱的,要让村民朋友下载和适应一个新APP是一个难度非常大的事。而微信在乡村的覆盖面非常广,占有率很高,那么依托于微信的生态、建立小程序,在推广层面会更加便捷和高效。同时,暖心小站本身结构简单,是一个非常轻量化的应用,这种特性也更适合以小程序为载体。



2,确定产品结构


在线上的产品框架上,设立两大专区:关爱老人专区和呵护小孩专区,各自创建知识宣导、在线课堂、爱心募捐等版块内容,同时在线上召集志愿者,在线下成立社区服务站,开展帮扶活动,然后志愿者们在线下实地服务打卡同步展示在线上的暖心小站。


确定框架之后,梳理角色和场景。本项目主要包含线下服务站的站长,工作人员,志愿者以及社会的爱心人士。



站长、工作人员、志愿者主要是通过线上为村暖心小站这个平台发布活动信息、记录服务概况、展示志愿者风采,社会的爱心人士通过线上平台查看对应信息并参与对应活动,最终帮助农村的一老一小解决各种帮扶问题。


经过梳理分析,平台使用人群的年龄跨度较大,30岁到60岁这个群体占到了80%左右,所以在产品的呈现形式上将兼顾青年到老年的年龄跨度,让设计更友好,让产品有温度。



3,制定设计策略


定目标


基于前面分析,在农村现实环境中的孤寡老人和留守儿童,他们生活是灰暗的,情感是封闭的,他们需要有更多志愿者以及爱心人士给他们带去阳光和温暖,让孤寡老人可以健康生活,让留守儿童可以健康成长。 




所以在设计目标的确定上:让产品形成一个“有温度、有故事、可以连接情感的桥梁”。让贫苦生活渗透阳光、感受温暖、看到希望。



定色


品牌色的推导,是站在线下的实际场景感受来提炼,乡村的孤寡老人和留守儿童的生活是贫苦的、灰暗的,他们需要金灿灿的阳光给生活带来希望,而我们日常所的见的公益组织通常都是以红色系为主,似乎已经形成了作为公益组织的标识色,因为这种大红色传递爱心、带来温暖。


这些颜色都很有代表性,黄色代表阳光,红色代表公益,而暖心小站,将这两种颜色进行叠加融合,形成阳光橙,再以阳光黄纳入辅助色,形成温暖、友爱、活力、阳光的色彩体系。





定原则


在设计原则上,考虑到我们的用户群体年龄跨度比较大,一些年长用户互联网基础薄弱,为了让产品更有亲和力,让年长用户都能轻松上手,所以在策略上制定简单、易用、温暖的设计原则,保持框架简单清晰、交互简单易用,让产品有温度,让用户觉得有用、好用、还想用。



在“简单”方面,保持产品的页面框架要简单,结构要清晰,让用户清楚知道自己在哪里,所以在产品形态上只做了内容页的垂直展示,没有过多琐碎的信息入口,让页面信息更集中,浏览体验更聚焦,让年长用户也可以简单使用。



在“易用”方面,简单的框架和结构是易用的基础,在视觉元素的排列上,通过加大的图片、加大的间距、加大的圆角,通透的页面布局可以让内容陈列更集中,获取信息更高效。页面的间距以4px为基数,分为5个跨度,在统一性的基础上让界面更有节奏感,层级更清晰,从而提高产品的易用性。



在“温暖”方面,主要体现在在调性、元素、和内容上:

调性:以“温暖橙”+“阳光黄”为品牌色系贯穿始终,形成温暖、阳光的整体基调;

元素:在常规尺度上进行适当加大,加大的字体,加大的卡片占符,加大的点击区域,让产品更照顾年长用户的操作习惯,让产品更有温度;

内容:在内容及主图的运营展示上,突出“温暖”的调性,增强用户的共鸣,拉近用户与产品之间的距离。





整体视觉呈现

 _


整体以大面积的“温暖橙”为基调进行铺设,营造温暖阳光的质感,顶部展示产品名称和合作logo,增加产品的权威性和信赖度。


自上而下,控制大的间距和留白,分别设置了热门小站、一老一小专区、志愿者风采、活动回顾、学习园地等版块。全方面展示了小站的基础信息、输送了对孤寡老人和留守儿童的健康资讯、汇集了志愿者服务的风采、记录了帮扶活动的结果反馈、以及陈列了关爱老人和小孩的相关线上课程。



一老一小的入口及详情:通过大头图的形式加强专题感知,引导用户点击。详情内展示相关的关爱资讯和助力入口,让用户可以选择性的进行点对点帮扶。



小站详情:分为小站介绍、人员风采、小站活动、和运营概况四个部分,清晰展示线下暖心小站的各项事务,让线上用户对线下小站有更全面的了解。



个人中心:功能简单,布局简洁,根据不同身份类型展示不同入口。作为站长的话,拥有志愿者审核、活动管理的权限,整体表现形式以统一的卡片式陈列,让内容更聚焦。




秉持“简单、易用、温暖”的设计原则,尽可能地让产品陈列简单、操作流程易用、设计满足功能凸显温暖,让用户想用,让产品好用。


经过多次推导与线下团队配合,小站1.0在今年5月初上线,第一批试点小站正在使用中,得到了较多正向良好的反馈,为乡村的一老一小带去了许多暖心的帮扶行动。



上线反馈

 _



产品上线之后,通过在线上发布活动信息召集志愿者。在线上顺利举行了多场暖心活动,比如在重庆马蜂社区的服务站内为当地留守儿童举办了多项课业辅导的活动,在重庆周家寨服务站新建了日间照料室,提升老人的居住生活质量。


今年5月20号,在中国互联网公益峰会上,为村暖心小站进行线上交流展示,获得了很多与会代表的关注和认可。




截止2021年7月,平台上线了两个试点小站,共举办了数10次线上+线下结合的活动,活动参与了520人,受到36000人以上的关注。暖心小站的建立和运营,对乡村的“一老一小”提供了更加有针对性和个性化的服务,同时加强对当地社会组织的培育和孵化,提升了服务对象的生活质量,促进和谐社区建设,助力乡村振兴。


通过这些试点小站的成果和反馈,让设计目标也得到一定程度的印证,让产品体现了“有温度、有故事、可以连接情感”的桥梁。




设计反思

 -


随着互联网的发展,人们对于产品不再是简单的形式服从功能,而是逐步转向形式服从情感。让设计回归情感,让有温度的设计去创造有温度的产品,可以增进人与产品之间的情感连接,让产品更有生命力。再者,用有“温度”的设计思维,去捕捉和解决社会问题,通过具有社会责任感的设计,推动社会进步,形成坚实有用的“设计力”。


那么,如何提升自己的设计力呢?可以概述三个保持一个向善。



保持热忱心

设计需要坚持,而坚持源于热爱,保持热忱之心会发现许多美好的事物,同一个需求会自发性地探索很多不同的解决方案,因此会洞察需求背后最本质的东西,切入要点寻找最优解。


还有一句话:“设计路上,唯有热爱,方能抵御岁月漫长”。


保持敏感度

这里的“敏感”指的是设计师要有好奇心,善于发现新事物,善于追踪最新行业动态,是一种职业敏感,是一种自觉行为,表现为热情、兴奋、敏锐,对新事物充满热情,对于新发现充满兴奋,能够特别敏锐的捕捉社会痛点解决设计难题。


保持共情力

生活中常说,有共情的人往往都特别感性、多愁善感,泪点低笑点也低,因为特别有代入感,而且对事物特别专注。


设计上所说的共情力则需要保持感性,同时也需要理性加持,不偏不倚。让设计师自己能切换到项目内的各种角色,不把自己当成局外人,将自己融于产品本身,随时切换为不同用户的视角,更能深入地发现、分析和解决问题,让设计站得住脚、更接地气,让设计有依有据。


让设计向善

设计的最终目的是传递需求、解决问题,这就意味着设计的初衷不同,那么最终的导向也会截然不同。

设计向善,保持“善”的初心,主张设计回归社会、回归到人心最本质的出发点,做有温度的设计、有仁心的设计、可持续的设计。


关注社会问题,保持一颗敏感而善良的心,用“设计向善”解决社会痛点,坚实巩固自己的设计力。


文章来源:站酷   作者:峰HENG

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


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

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


「新手向!!」“8点”网格系统是什么?

鹤鹤

一、前言

1、代码>原型

无论是高保真还是低保真原型,设计人员在软件中的展现所有效果,最终目的都是传递给开发人员进行实现。当开发人员开始使用代码还原页面时,设计就不可以再随意修改。

最重要的不是在设计软件中展现的效果,而是实际在用户设备上实现的效果,因此在设计时,要提前考虑代码实现的成本。

2、盒子模型

盒子模型是一种描述对象尺寸和间距的方法。有四个部分组成:“边框Border”、“边距Margin”、“填充Padding”、“元素本身Element”。

  • Border:围绕元素外围的边线。

  • Padding:元素及其子元素之间的间距。

  • Margin:元素和其相邻对象之间的间距。

3、什么是point(pt)

点(pt)取决于屏幕物理尺寸大小,是绝对尺寸单位。对应@1x图的1px。

像素(px)取决于实际屏幕显示分辨率,是相对尺寸单位。在@2x图情况下1pt=2px,在@3x图情况下1pt=3px.

4、@1x

建议使用“@ 1x”进行设计,其他尺寸图可以从@1x进行衍生。

如果是以@2x进行设计,那么若要得到@3x则要先缩小50%然后再扩大300%,增加了不必要的工作量,并且很容易出现奇数、小数等不便利数值。

5、使用像素网格

创建的每个UI元素都应该和像素网格对齐,防止出现半像素的“锯齿“效果。

文本由于其图形的特殊性,难免会出现无法对齐像素的情况,这里可以忽略。

6、文本元素

文本是页面中最重要的元素之一,但因为其本身的多样性,产生的不同的字体、行高很难和其他元素一起适用网格。因此给文本设置基线网格,将基线网格采用4pt进行等距划分,来和其他元素进行和谐搭配。

二、8点网格

1、基本原理

使用8的倍数来定义区块和内部元素的尺寸,间距等。

当区块元素为文本(例如按钮)时,将文本设置成其余部分一致(或者平台预先定义好)的大小,然后使用padding来确定区块大小。如果是全宽的元素,使用padding来确定高度,并使用一致的水平边距来确定宽度。

2、两种方法

  • 硬网格:将元素放置在以8为增量定义的显示网格中,使用额外的透明背景元素,和前景元素组成一个整体。

  • 软网格:保证元素之间的的间距为8的倍数,以此获得更快的处理速度,从而得到更流畅的体验。

三、为什么重要

1、保持一致性

当所有尺寸都遵循相同的规则时,就有了一致的UI。

2、更少的决定=更少的时间

减少自定义的尺寸规则,得到更快的代码运行速度。

3、多平台设计

无论设备外形如何,主流的屏幕的屏幕尺寸长宽值至少有一个维度可以被8整除。

有一些屏幕的尺寸无法被整除(iPhone 6的375*667pt),只需要保持padding和margin一致,适当调整区块的大小来进行适配。

四、实施技巧

1、对齐网格

确保开启了“对其像素网格”选项。

2、Rems和变量

如果根文根大小设置了16px,则可以使用0.5rem的增量在8点网格上构建布局。

如果不喜欢这样做,或者是不喜欢rems的使用方式,可以使用CSS或预处理器间距变量来处理布局,同时保留变量以供后期维护。

3、定义你的网格

大多数软件都可以设置快速“微调”,一般默认为10px,sketch中可将其调整为8px,便于快速的工作。

4、捷径

学习并善用快捷键,提高工作效率。

5、框架你的图标

图标设计通常需要进行视觉修正,因此,在其周边放置透明框架(例如Hard Grid的方式),来保证整体的一致性。

6、放大、缩小

设计时经常会放大预览界面来进行设计,这会导致会略整体;如果以缩小的尺寸会导致看不到细节,因此要经常变焦画面来确保能看到整个画面。

文章来源:站酷   作者:YMOOM

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


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

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

这些高级UI设计趋势,我不允许你还不知道!

鹤鹤

正文


如果移动应用程序不符合最新的设计趋势,那用户可能会放弃你设计的产品。 

考虑到趋势永远不会保持不变,而且总会有新的趋势出现,让应用看起来既现代又漂亮是一项挑战,但遵循设计趋势对于每个产品设计师来说都是必须的。 

我们了解到,跟踪行业中的所有趋势和趋势并不总是可能的。总是有新的指南、动画内容、视频、新的插图方法以及许多其他概念,您需要先抽出时间学习和测试。 


这是我们总结出的 2022 年移动应用 UI 设计趋势

1、运动和动画 
2、手势和滑动体验 
3、90年代风格 
4、图形深度 
5、黑暗模式 
6、排版 
7、增强现实和虚拟现实 
8、渐变和透明元素 
9、舒适的视觉效果 



1、动效和动画

我们都喜欢看视频,并在 TikTok 或 YouTube 上花费大量时间。视频内容和动画更具吸引力和互动性。统计数据显示,大多数人在使用应用程序之前都会观看说明视频。动画和动作设计使内容更具吸引力。 

与具有长描述的静态内容不同,动画可以保留用户的注意力并使应用程序更具吸引力。用动画突出重要的东西是一个好主意。例如,您可以为应用程序中的按钮设置动画,以使用户与应用程序的交互更好、更直接。像图标动画这样的微动可以显著改变您的应用程序的体验。 

借助动画,您可以强调应用功能、提高转化率甚至销售数据。 




2、手势和滑动体验

与电脑上的网页端相反,手势和滑动体验使移动设备更具吸引力。我们每天花费数小时滚动和滑动操作。按钮和其他动作可能会刺激和分散注意力。这种设计趋势成为现代应用程序设计的最高优先事项之一。一些应用程序创建者甚至根本不支持按钮的使用。按钮会造成混乱并占用过多的屏幕空间。 

建议用滑动功能替换按钮。尝试滑动动作的动画会很有帮助。例如,图书应用程序通常使用动画来翻页。 




3、90年代怀旧风格

90 年代的风格影响了所有领域,甚至是移动应用程序的设计。 

设计师使用类似于 90 年代流行的 PlayStation 游戏(例如,马里奥或吃豆人)的复古字体、图像、图形。拥有 90 年代的氛围,您有机会获得两代人的兴趣:年轻人喜欢复古的东西,而老年人则喜欢怀旧。 

这种趋势并不适合所有产品,但如果复古风格适合您的应用程序,尝试一下也不错。 



4、赋予图形深度

扁平化设计看多了用户会觉得很沉闷。人们喜欢看到更真实和互动的内容。图形中的阴影和图层赋予它们 3D 效果、体积和深度,使人们可以享受更逼真的图像。 

这种趋势可以与任何元素一起使用,在屏幕上创建对象层次结构并帮助用户更轻松地浏览应用程序。 

然后,关于3D效果,我们来聊聊。3D 是一项革命性的技术。3D 图形几乎可以在任何应用程序中使用。例如,开发人员可以使用 3D 成像技术来构建存储建筑物和房间内部地图的应用程序。它可以非常适用于游戏并改变玩家的整体体验。因此,在您的应用程序中为图形添加深度时,请考虑 3D 趋势。 




5、黑暗模式

暗模式是已在许多应用程序中高度使用的最大设计趋势之一。最近,设计师也提供了在应用程序中在标准模式和暗模式之间切换的机会。所以用户可以选择他们最喜欢的任何模式。 

深色主题设计将背景变为深色模式,并使字体和其他元素变为浅色/白色。 

例如,现在在 Facebook 等最受欢迎的应用程序中都可以使用深色模式。切换到深色模式有助于人们减轻眼睛疲劳并更方便地浏览。 




6、排版

选择正确的字体是移动应用程序设计中必不可少的一步。用户在浏览页面的时候不是一个字一个字的读的,而是成行的“扫描”方式来浏览。因此,使用能够正确设置重点的字体非常重要。 

设计师已经开始使用不寻常的字体。文字不再看起来那么无聊,也不会迷失在背景中。其目的是使设计更明亮、更新颖。 

正确选择的字体将有助于:
1、定下产品调性; 
2、提高品牌知名度; 
3、提供更好的视觉体验; 
4、提高可读性。 

通过组织排版为您的用户提供愉悦且可读的用户体验:设置点大小、行距和层次结构。 

请记住,不寻常的“疯狂”排版并不适合所有产品。定义文本在您的应用程序中的具体功能。如果它提供了额外的信息功能,请不要对字体进行太多实验。但是,例如,在在线杂志中,您可以使用各种版式,使布局更有趣。 



7、增强现实和虚拟现实

虚拟现实和增强现实为用户提供了一个难得的机会,让您只需通过手机即可获得互动体验。 

在新一年中,这种神奇的 UI 移动设计趋势趋于增长和传播。这种设计趋势的关键在于应用程序的界面让您感觉自己置身于应用程序中。引人入胜的设计元素和游戏化是这种体验的关键。 

这是一个结合我们之前讨论过的趋势的绝佳机会,例如动画和 3D 效果。首先,精心制作的动画和 3D 触摸可以在您的应用设计中支持 VR。 

你还记得那些来自 Instagram 的功能吗?让我们可以通过应用程序和移动相机将不同的角色放置在我们想要的任何地方吗?然后你就知道这有多有趣了。此外,它不仅有趣而且高效。例如,宜家使用 AR 来展示一件家具在您家中不同位置的外观。 




8、渐变和透明元素

这个UI设计趋势是关于渐变和透明度的。设计师通常在按钮和应用程序的背景上使用渐变。移动渐变趋势突出了应用程序的基本部分,并使人们专注于特定方面,从而赋予他们层次感。 

移动应用程序设计中的透明元素表达了对某些应用程序部分的深度和驱动力,使设计更清晰、更具吸引力。 

您可以使用从浅色到深色主题的过渡,从而将屏幕分成两个逻辑部分。此外,您可以在按钮上使用渐变主题,使它们在屏幕上弹出。 

玻璃拟态的概念也值得一提。glassmorphism 背后的想法是柔化明暗设计元素之间的对比。设计理念使用类似于磨砂玻璃表面的透明模糊背景。 

玻璃态的主要特点:
1、透明度和背景模糊; 
2、透明物体上的细光边框; 
3、分层; 
4、鲜艳的色彩。 




9、舒适的视觉效果

舒适的视觉效果是大部分用户都喜欢的。用户和应用程序开发人员都喜欢这种最近的移动应用程序设计趋势。 

移动应用程序设计不应该只是美观。它应该让我们的眼睛看起来更舒适。因为一整天,我们可能都会盯着屏幕看,但看多了,我们会感到疲劳和眼睛疲劳。为了减少这种不利影响,应用程序开发人员创建了一种我们可以舒适使用的设计。 

舒适视觉设计趋势的概念是为您的应用程序使用自然的色彩、舒缓的图像和简单的布局。这些技巧通常可以在冥想应用程序中找到。它们包括自然的真实照片,具有平静的色彩和结构简单的轻元素,很少有深色主题设计。 




如果让你的UI设计更好呢?

这里有一些建议: 

1. 多看别人的优秀设计
分析它们的优缺点,从他们的经验中学习。 

2. 使用标准导航
不要使用异型的导航栏,这会让你的用户迷失在应用中。 

3. 使用优质的配图
抽象艺术、插图、真实照片趋势——一切都有助于吸引用户的注意力。 

4. 多看前瞻设计趋势
实时更新自己的设计知识库,使设计水平使用保持一流。 

5. 擅于总结与回顾
可以计划,三个月或半年总结回顾之前设计,总结不足之处。 

6. 多于他人分享
做设计不要怕被人看,或许有时候别人顺口一说,就点开了难题。 

7. 保持良好的心情
遇到事不要慌,掌握好自己心情,才能掌握好你的设计。
文章来源:站酷   作者:UI范
分享此文一切功德,皆悉回向给文章原作者及众读者.


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

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


浅谈B端设计系统

鹤鹤

什么是设计系统?



设计系统 = 设计价值观和原则+设计规范+场景定义+工具包

是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产,,是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案,能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发! 

为什么要构建设计系统?


问题1:

随着业务的拓展,产品和项目数量不断增加,发展中期设计和交互上不一致性的问题浮出水面,需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验,以满足用户预期并向其传达统一的品牌认知。

问题2:

无统一的设计规范和交互原则,没有统一的UI组件库和代码库,各团队设计和前端需花费大量资源陷于低质量沟通协作和重复造轮子,拖慢产品和项目设计和开发节奏。

问题3:

产品项目数量 vs 产品设计师,人员配比严重不足的情况下,团队的设计师们无法从杂/乱/急的日常需求中剥离出来,影响构建产品壁垒的质量和速度。

设计系统的价值


产品侧:

保证可复用模块的交互体验的一致性。如同一个产品类型不同分支多个团队完成的时候,可以保证产品团队使用同一份设计规范快速完成产品原型设计。 

设计侧:

把设计师逐渐从不必要、重复性劳动中解放出来,节约出来的时间和精力放到更多有价值的工作上去。更多去关注对用户需求和业务逻辑的深入挖掘,如果每个设计师都具备产品用研、交互、组件化等一条龙能力,才能体现tob产品设计师的价值,才不会被别人称作是拖拽组件的“工具人”。 

开发侧:

形成开发资产,可以提升研发效率,降低维护成本。开发工程师无需再重复开发同一个组件,只需要去组件库里调用即可,配合业务逻辑,高效完成界面开发。做到开箱即用。 

测试侧:

标准化的设计规范,是测试人员最喜欢看到的。1是1,2是2的设计准则,提升了测试效率。例如,设计规范规定弹窗footer区按钮组居右,那么测试人员只要测到不居右,就可以给产品提优化建议了。 

主流设计系统-他山之石可以攻玉!


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

设计系统的打造不必从0-1构建, 例如:Ant Design业界优秀的开源设计系统,我们完全可以站在前人的肩膀,最终生产出符合达观品牌、业务特性的设计系统。


阿里Ant design:https://ant.design/docs/spec/introduce-cn 
阿里的teambition:https://design.teambition.com/ 
华为devui:https://devui.design/design-cn/design-value 
饿了么elemnt:https://element.eleme.io/#/zh-CN 
有赞:https://design.youzan.com/index.html 

字节跳动 Semi Design:https://semi.design/zh-CN/

字节跳动 Arco Design :https://arco.design/

Material Design:https://material.io/ 
Lightning Design System:https://www.lightningdesignsystem.com/ 
Microsoft fluent :https://www.microsoft.com/design/fluent/#/ 
eva.design:https://eva.design/ 
Atlassian design:https://atlassian.design/ 

以原子理论构建设计系统


原子理论设计介绍

首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost提出的,他从化学元素周期表中得到启发,发现在化学世界中,所有的物体都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成了宇宙万物。根据他的理论,设计体系主要包含 5 个层面:原子、分子、组织、模板、页面。


原子理论设计不是一个线性的过程, 它更像是一个心理模型,来帮助我们把用户界面看作是一个连贯的整体,同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面,让我们更深入的了解每一个概念哦~


原子层(Atoms):

原子是物质的基础组成部分,是构成设计系统的最基础元素。

在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线、间距、圆角、间距、阴影等。

简单概述下来就五个字:色、形、质、构、质;



分子(Molecules)层

在界面中,分子就像是一个由UI元素组成的相对简单的组织。如:按钮、弹窗、搜索框等。

以按钮为例,它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联原则组合成一个分子,图标和文字互相配合传达意义,颜色定义了按钮的特性,间距为按钮定义了一个尺寸和规范。


 组织(Organisms)层

分子+原子组合成更复杂和可扩展性的模块,这个称之为组织(区块组件),如:列表操作区块、列表展示区块、表单区块、数据统计卡片区块。

以表单为例,一个表单我们可以通过数量的组合,以及间距的调整,元素的增减,在界面中表达不同的场景和含义。



模板(Templates)层

由原子+分子+组织构成的更复杂更具拓展性的模块,如:分组表单页、页面级表单、详情页、列表页、异常页、dashborad。本质就是线框图,模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构,页面中的信息是占位作用,而不是页面的最终内容。


页面(Pages)层

带业务逻辑的场景案例如:标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板;

页面是模板的具体实例,填充了真实的内容(图片、文字等)后形成页面,也就是常说的带交互逻辑的「视觉稿」即为高保真原型图,将占位符替换为有代表性的真实内容,使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。



关于设计系统的常见认知误区



误区1:设计体系就是设计规范或者组件库吗?

许多人认为设计系统就是单个代码库、组件库、设计规范,但实际上他们不是一个层次的东西,准确度的来说设计体系包含设计规范,组件库也是建立在设计体系内的,组件库是记录和共享设计模式的工具,就是设计体系工具化和表现层的部分;


误区2:设计体系的存在扼制了组织内创造力,会替代掉设计师?

抛出这个问题,是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点,我个人是很难以认同这个的,对design system的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合,需要调动整个团队的想象力和创造力,最终达到一个统一共识才有可能被实施和执行;

好的设计系统可以通过流程和机制促进创造力的,而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来,当然也不能过度依赖过往的沉淀资产,把自己定位为设计系统的创造者,而不是使用的工具人,不断的创造和贡献好的解决方案被整个组织采用,就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师,反而是一个企业内部尊重设计师价值的开始!是企业对设计文化的认可!


误区3:设计系统是一劳永逸的吗?

设计体系是动态的,永远是随着组织需求和用户需求而变化的,一切说自己已经完成了设计体系的建设的人都是错误的,都是将将静态的设计规范曲解成了设计体系。


误区4:设计系统由少数人员生产,我们负责用就行了?

正确管理机制:少数人负责管理,多数人参与贡献;避免你做、我用模式,这种生产消费模式非常内卷;避免如:我一个设计师为啥要用你的规范;这规范做的太垃圾用处不大,我才不用,用你做的规范;我苦逼做业务,你晋升拿结果的负面心态;

然设计系统也不是简单的靠少数的人1-2个月用爱发电就能完成的,设计系统是一群人,对一种做设计文化的认可,每个与之相关的人都应该是设计体系的贡献者与布道者!


需要克服的潜在难题


当然设计体系也容易出现一些缺点,这些问题需要设计体系的构建者们去摸索去克服; 
  • 产品业务复杂性提升,提升建设难度

  • 难以控制创造与控制间的平衡;

  • 复用与定制间的平衡,刻意追求复用率而容易丢失整体观,为特定业务目标服务时不如灵活集中化式方法等

  • 资源问题,容易被当成是辅助项目而缺乏预算等资源….

  • 缺乏良性有效的组件库更新迭代机制,虎头蛇尾….

  • 收益短期不明显,搭建体系的长期收益难以被组织短期内察觉;


尽管有一系列潜在的问题,但总的来说设计体系的带来的收益是大于这些投入的,总的来说方向是没错的,下一个关键问题是:我们如何去建立一个更优秀的设计体系。

文章来源:站酷   作者:从你的世界经过



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


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

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


产品需求管理与设计

鹤鹤

1. 需求定义

需求是用户对于自己碰到的困难从而提出的问题,是用户对于已有产品的反馈和建议,是老板提出的商业诉求,就是运营人员减少工作麻烦的想法。需求和产品是一种问题导向与目标导向的结合,是用户碰到了什么样的问题,从行业属性、用户群体、业务场景、工作目标、商业利益等方面从而产出的输出物,也就是所谓的产品。

需要:是解决问题或者满足欲望,达到最终的目的。

需求:是需要付出一定成本来满足,主要体现在解决方案中的具体产品和功能。

2. 名词解释

产品需求文档(PRD)是将商业需求文档(BRD)和市场需求文档(MRD)用更加专业的语言进行描述。

3. 面向对象

开发、设计师、测试、老板、项目经理、产品经理、运营、市场、销售、客户、财务等其他角色。

4. 输出物

文档:Word、ppt

交互或者原型稿件:Axure、UI界面

5. 产品需求文档结构

命名和编号

修订记录

背景分析(产品背景、行业背景、国家政策)

需求分析

用户定位

产品目标

总体架构(技术架构、功能架构)

业务流程

功能设计(功能总表、用户角色、功能详情)

产品特色

产品模块清单

产品适配清单(支持的浏览器、数据库、中间件、操作系统)

6. 需求分析原则及方法

6.1. 产品需求的三个层次

基础性需求、期望性需求、兴奋性需求

6.2. 马斯洛需求五个层次

生理需求、安全需求、社交需求、尊重需求、自我实现

6.3. 需求管理的四个环节

采集需求、分析需求、筛选需求、处理需求

6.4. 需求分析四象限

重要并紧急、重要不紧急、不重要但紧急、不重要不紧急

7. 需求分析及产出

WWH法:是什么?为什么?怎么做 ?

需求分析贯穿整个产品全生命周期,包括产品概念期、产品设计开发期、上线后-成长期、成熟运营期、产品衰退期。

 

 

7.1. 明确问题

7.1.1. 需求收集渠道

 

明确需求收集渠道,确定用户群体和需求调研的方法,比如问卷调查、访谈、名义小组会议、头脑风暴法、观察法、亲和图、蒙特卡洛技术、鱼骨图、提示清单等方法。

提出需要解决的问题,明确需求带来的价值。利用目标用户、场景、问题三个思考维度,去定义真正意义上的产品需求,示例如下:

 

通过用户针对不同的场景,明确了主要问题需求,怎么思考产品需求怎么体现到产品设计上面,从而体现产品价值,包括产品设计成型后的市场推广方式至关重要。产品问题产生的产品价值示例如下:

 

7.1.2. 拆解需求

拆解需求指的是把已经明确的问题,从多个维度进行拆解,目的就是为了找到更合适的解决方案。

拆解问题的五个维度分别是积极层面、否定层面、转移层面、拆解、脑洞。

Ø 积极层面:通常可以拆解出怎么做对用户来讲可以产生更积极的情感。

Ø 否定层面:通常可以拆解,即使不做什么,依然可以产生好的结果。

Ø 转移层面:转移指的是不直接单独解决当前用户的问题,通过转移法,用户转移、问题转移等。

Ø 拆解:把当前问题刨根问底的拆,挖掘更多的可能性、找到问题本质。

Ø 脑洞:这个更多的靠灵感、经验等进行头脑风暴,补充其他维度考虑不到的地方。

7.1.3. 需求管理

7.1.3.1. Kano模型

 

Kano模型是对用户需求分类和优先排序的工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。

Kano模型把需求分为五类:基本型需求、期望型需求、 兴奋型需求、无差异性需求、反向型需求。怎么通过模型知道用户的需求类型,示例如下:

 

7.1.3.2. 时间管理四象限法

时间管理四象限法分别按照紧急程度和重要程度分为重要且紧急、紧急不重要、重要但不紧急、不紧急不重要。具体示例如下:

本方法的优势可以评估产品开发的时间优先级,对于一些重要且紧急的功能开发能够做到心中有数。

7.1.3.3. ICE排序法

ICE排序法是一种比较严谨科学的分析需求的方法,通过几个几个维度给需求进行相应的打分,以总分的高低去排序。

I(Impact):影响范围。

C(confidence):对上线效果的自信程度评估。

E(ease):开发难易程度(工作量+技术难易程度)评估。

7.1.4. 需求输出

7.1.4.1. 输出内容

思维导图、业务流程图、原型图、需求说明文档、功能说明文档等

7.1.4.2. 输出角色

业务人员、技术经理、后端技术人员、前端技术人员、UI、UE人员

7.1.4.3. 沟通样例

(一)业务人员

面对业务人员,主要是讲产品功能实现和重点业务流程,主要依靠思维导图或者原型图去讲解产品可带来的价值和解决了什么样的问题。

(二)后端开发人员

面对后端开发人员需要给技术经理协调和沟通,确定的项有数据库怎么写,字段(数据结构)怎么定义,最后生成什么样的表,当用户进行相关业务操作时(增删改查),怎么去设计接口,接口设计对应数据库,先调用什么样的接口,传输什么样的参数,返回什么样的结果。进行前端解析,后台数据图形化,最后呈现给业务用户。

(三)UI、UE人员

面试UI、UE人员从行业特征、用户群体特征、用户习惯等方面来确定产品视觉和交互形式。

(四)前端开发人员

通过评审后的UI设计稿交付给前端人员,进行前端页面的开发。

(五)测试人员

面对测试人员,跟进产品测试情况,提供产品需求文档和原型图及UI设计图,编写测试用例,把控测试时间,协调相关资源,保证产品顺利产出。

8. 产品迭代规划与需求跟进

8.1. 产品全生命周期规划

根据产品规划的全生命周期,确实不同阶段需求的落地情况,根据用户对于需求的满足情况。

8.2. 业务流程分析

根据已开发上线的所涉及的业务流程,先分析完整性,基于本流程从专业角度提出改进方案,不断优化该流程,确定流程的可用性。特别是一些核心业务流程,要做到简洁高效,提高效率。

8.3. 新需求管理

通过产品的不断使用,收集和接收不同的新需求,并定期开展新需求评审,逐步完善到产品里面,以最小调整为基线确定新需求的开发计划,保证产品总规划的稳步实施。

8.4. 里程碑管理

把控整体产品里程碑管理,确保产品迭代重大节点变化能够有理有据,为产品的营销工作,提供支持。总结产品优势和产品亮点,对产品的销售情况负责。

原文地址:站酷
作者:Lyion

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

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

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

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

如何运用情绪板定义视觉风格?

鹤鹤

前言 

相信每个设计师,平日里都会去关注各种各样的视觉风格、设计趋势,如杂志风格/3D风格/简笔插画/晶白风格/赛博朋克/国潮/新拟态/孟菲斯等等各种各样的视觉风格。但是在了解这么多视觉风格的同时,又不知道什么样的风格适合是自己产品的,做设计时仅仅凭借着直觉跟过往的经验来进行设计,最终导致设计稿禁不起业务方的推敲,并且被贴上设计不专业的标签。 

其实,每一个产品设计都需要设计师花费大量的时间精力去推倒出属于自己产品的视觉风格。而不是仅仅参考当下流行什么设计趋势、设计风格,就开始进行设计。流行的视觉风格大多不会一直流行,只有符合平台调性的视觉风格,才能更好的为产品赋能。 

因此,学会如何定义视觉风格,是每个设计师都需要去学习并且加以运用的。 

什么是情绪板? 

情绪板(英文Mood Board),通常是指一系列图像、文字、样品的拼贴,是设计中最常用的定义设计和视觉方向的设计方法论。 

情绪板的本质在于: 将情绪可视化,将较为抽象的词语转化为可视化的图形等,比如:“安全”这个词可映射出盾牌/锁/警察等等给人们感觉到安全的人事物。 




情绪板的作用?


情绪板能够更加帮助设计师与业务方达成设计共识,并且能够帮助设计师定义视觉风格与找到设计方向,使设计更加合理,为产品赋能。


如何运用情绪板定义视觉风格


情绪板的制作流程


情绪板的制作流程大致分为5步:


1、明确原生关键词


了解项目背景或需求本身的方向,通过内部讨论,用户研究和品牌等方式定出3-5个原生关键词,通常定出的词都比较抽象。


2、挖掘衍生关键词


在原生关键词的基础上让参与者发散得到更精准的二级词语,能够更加准确的定位到图形传达方向,最好是一些情绪和视觉表达的形容词。

可通过视觉映射、心境映射、物化映射,得到用户理解的“抽象关键词”所对应的“具象定义”。


3、搜索关键词图片


确定完关键词后,可在pinterest、花瓣等设计网站上建立情绪板图库,按照人,事,物,形、色、字、构、质等方向收集大量的对应图片素材来匹配关键词。


4、建立情绪板


对应每个关键词,从情绪板图库中提取高质量能够代表关键词意思的人,事,物,形、色、字、构、质去展示,以此唤醒用户对关键词情绪体验。


5、提取视觉风格准则


根据情绪板图库中的图片提取出视觉风格准则,包含:图形、颜色、质感、构成、字体等视觉风格准则。



举个案例说明:


明确原生关键词


讨论原生关键词


了解项目背景或需求本身的方向,通过内部讨论(可叫上产品、运营、老板等进行讨论),用户研究和品牌等方式定出3-5个原生关键词,通常定出的词都比较抽象。



确定原生关键词


从讨论的关键词中提取3-5个最适合的关键词。



2、挖掘衍生关键词


在原生关键词的基础上让参与者通过视觉映射、心境映射、物化映射,发散得到更精准的二级词语,能够更加准确的定位到图形传达方向,最好是一些情绪和视觉表达的形容词。



3、搜索关键词图片


确定完关键词后,可在pinterest、花瓣等设计网站上建立情绪板图库,按照人,事,物,形、色、字、构、质等方向收集大量的对应图片素材来匹配关键词。



4、建立情绪板


对应每个关键词,从情绪板图库中提取高质量能够代表关键词意思的人,事,物,形、色、字、构、质去展示,以此唤醒用户对关键词情绪体验。


5、提取视觉风格准则


根据情绪板图库中的图片提取出视觉风格准则,包含:图形、颜色、质感、构成、字体等视觉风格准则。




总结


情绪板作为一种常用的设计方法论,能够帮助设计师更加合理的总结出合适的视觉风格。设计不仅仅是只是跟随着设计趋势,怎样找到适合产品的视觉风格,是每个设计师更需要去掌握的内容。


以上内容,是学习如何定义视觉风格的其中一种方法,希望对大家有所帮助,如有不同意见,欢迎指正!


图片版权归原作者所有

原文地址:站酷
作者:船长的成长日记

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

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

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

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


提高视觉和交互逼格,UI动效之SVG动画教程

鹤鹤

最近几年不管是WEB端页面还是APP,使用交互动效越来越多,加了动效的UI页面看上去不再那么枯燥无味,能很好的抓住用户眼球,既提升了用户交互体验同时也更好的展示了产品。通常我们会在哪些场景下使用动画呢?例如菜单图标、载入动画,空白页,产品介绍等都可以使用动画,下面是一些示例:


今天给大家讲解一下如何制作一个svg格式的动画,开始之前先和大家说一下svg是什么,目前web或者app中的动画大多使用svg格式,svg英语全称是Scalable Vector Graphics,它是一种可缩放的矢量图像图形文件格式,这种格式的文件具有边缘清晰、文件体积小、传输方便的特点,因此在网页设计以及APP中比较常用。可以使用Illustrator软件或使用

专业的svg编辑器进行设计输出,svg支持浏览器及任何文字处理工具打开。因此svg格式是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的图形页面。

如果你具有一些代码能力,还可以直接用代码来描绘图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器或编译器来观看。


综合起来SVG优势如下:


  1. 可被非常多的工具读取和修改

  2. 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。

  3. SVG 可随意缩放

  4. SVG 图像可在任何的分辨率下被高质量地打印

  5. SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

  6. SVG 可以与 JavaScript 技术一起运行

  7. SVG 是开放的标准

  8. SVG 文件是纯粹的 XML

目前制作SVG动画的软件主要使用AE(需要插件加持)或者在线的SVG动画工具,如svgjson.com等,如果使用AE需要安装bodymovie插件,我平时大部分动画都是使用svgjson工具完成的,所以今天给大家分享的svg动画教程主要也是使用在线工具svgjson来完成(完全免费),它支持导出svg或json格式动画,可以满足不同的需求,目前该软件虽然是英文版的,但是上手还是比较容易,为了更好让英语不是特别好的同学快速上手,我下面做了一个关键功能的中英对比说明。



软件地址:https://www.svgjson.com/editor-page/


如制作一个loading动画

制作要点:

  1. 创建2个圆形,一个底色(浅灰色)一个旋转的圆圈(蓝色)

  2. 在Store中设置Stroke Dash Array的圆圈长度,圆圈长度可以从Information中获取

3. 设置Stroke Dash Array后,开始旋转圆圈的长度,我设置了400,大家可以根据自己的需要进行个性化设置

4. 第四步我们来设置动画,先选择蓝色的圆圈,然后在Transform中设置旋转动画,第0秒为0,第10秒为3600
度(记住别忘记按关键帧动画按钮,第一帧设置了动画,后面更改参数会自动生成动画关键帧)

5. 按空格键或者点击时间条上的播放按钮看看效果,如果没有问题选择导出SVG动画,一个loading动画就完成
了。

完成后效果

上面的动画是通过Angle(角度)来实现的旋转动画,接下来我们可以通过Stroke Dash Offset来设置旋转动画


loading动画进阶教程

先看最终效果

由于svgjson的绘制能力相对较弱,所以我在其他软件中先画了如下图这个动画的基本元素(需要保存为svg格式),然后通过svgjson中的导入svg方式导入。

  1. 首先把“按钮左”和“”放在一起拼凑成一个圆,然后把“按钮中间部分”也放在圆中间,并且把它的Scale X值设为0.

  2. 把载入的圆圈放在刚刚的红色圆中,并设置Stroke Dash Array值和Stroke Dash Offset动画(具体参照上面的动画教程)

  3. 把载入成功的勾号放在载入圆圈中,然后设置动画Stroke Dash Array值和Stroke Dash Offset动画

  4. 再设置按钮左和按钮右位移动画,同时也需要“按钮中间部分”的Scale X的动画


通过上面的2个教程,相信大家对svgjson这个软件有了一个基本的使用能力,svgjson中的Stroke属性下的Stroke Dash Array和Stroke Dash Offset功能还是蛮强大的,可以通过这2个参数设置很多丰富的动画效果。

下面的动画主要使用x轴缩放功能实现的交互,当然也可以使用Stroke Dash Offset参数实现动画效果。

这个动画的核心点在设置对象的中心锚点位置,默认对象的中心点在中心,这个教程是把对象中心点移到了左侧

接下来给大家演示如何制作一个变形动画,变形动画也是一个非常常见的交互

这个教程重点是对象的缩放,缩放前需要设置锚点位置,然后就是设置x轴和y轴的偏移值。


总体来说,svgjson网站提供的动画能力还是很强的下面是我制作的项目样例:



原文地址:站酷
作者:Snmendala

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

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

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

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

日历

链接

个人资料

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

存档