你想 用户 对象 平常在日常的工作中,经常会发现小伙伴们对于一些属于会有混用的情况,比如“登录”和“登陆”、“稍候”和“稍后”、“预定”和“预订”……虽然有些术语之间只有一字之差,但其用法天差地别。今天笔者整理了一些产品设计中常用的易混淆术语与大家分享,希望能给各位在工作中带来一些参考和帮助。往期分享:产品设计中如何正确运用标点符号?5个章节帮你掌握!一、前言标点符号,是辅助文字记录语言的符号,是书面语的有机组成部分,在产品设计中使用合适的标点可以表达语句的停顿、语气及词语的特定性质,帮助使用者有效表达思想感情和理解语境。阅读文章 > 一、登录 vs 登陆登录和登陆是混用率较高的一组词汇。首先,登录是一个信息名词,在英文中的表达为 login,是指进入操作系统或应用程序(通常在远程计算机上)的过程。我们平时用到的扫码登录、密码登录、验证码登录其实是用户登录的不同途径。为什么我们需要登录呢?登录的核心目标是为了完成用户身份验证,建立和用户之间的唯一关联性,也就是如何证明“你”是“你”。而验证用户身份无非是为了两个权限的控制:“读”和“写”。“读“是用户自己获得和自己个人相关的信息的权限控制,”写“是把用户的行为、用户和网站的交互内容记录下来的权限控制。只有核实了“你”是“你”,才能把和你有关的读取和写入数据库的权限开放给你本人。而登陆呢,在英文中表达为 land,我们经常听到的“诺曼底登陆”,“台风即将登陆”,在狭义上是指到达多个地方(多指陆地),也可以作为军事用语,表示由空中或水域成功着陆,后来也引申为商品等打进市场。这个词并非是计算机专用术语,但你说为啥还有这么多网站在登录界面使用“登陆”按钮呢,唔,这个锅拼音输入法可不背。因此,如果你想表示“进入网站”,应使用“登录”,如果你想表示某产品功能即将上线,应使用“登陆”,两者不可混用。二、删除 vs 移除来看下面两个场景:① 你在商家后台创建了一个“双十一大促”营销活动,这时候因为某些原因导致该活动无法进行,你想把该活动删掉,请问在活动列表里,你应该用“删除活动”还是“移除活动”?② 你在商家后台创建了一个“双十一大促”营销活动,并且在这个营销活动里添加了很多活动商品,但是因为误操作,你不小心多添加了一款商品,你想把该商品从列表中拿走,你应该用“删除商品”还是“移除商品”?从字面意思上理解,两个词汇的差别在“删”和“移”,删除是“永久性”地去除操作对象,操作对象一般在系统中不再存在。而移除是“暂时性”地移走操作对象,操作对象在当前项目中不再显示,但仍存在于系统中。也许你会纠结,用户真的能理解“删除”和“移除”之间的区别吗?我们并不希望设计师一板一眼地只能在这两个词汇中二选一,所有术语的使用应该贴近用户心智,让用户了解当下语境并引导其做出正确的决策才是我们的最终目的。在企业微信里,如果你想把成员从群聊中移走,系统使用的是“移出群聊”而不是“移除客户”,而在通讯录里,如果你不希望和某人联系,就可以使用“删除客户”将其永久删除。从场景上看,“移出群聊”在语义上理解是从当前群里移走,但本身用户并没有被删除,更强调操作的临时性,从使用者的角度出发,是不是比「移除客户」更人话?三、新建 vs 添加站在巨人的肩膀上,我们来看看苹果是怎么做的。当你想在系统中建一个新的文件夹,苹果用的是“新建文件夹”,当你想把已有的图片同步到“照片”,系统使用的是“添加到‘照片’”。两者看起来意思差不多,如果改成“添加文件夹”“新建到‘照片’”似乎也没多大差别,那么两者区别在哪呢?首先,新建是一个计算机专用术语,指电脑中可以存贮文件的工具,比较常规的用法是使用“新建”的文件夹来存储同类型的文件,而这个过程通常是从 0 到 1,需要你手动配置,而“添加”其实就是增加,更强调把已有对象(通常为在对象列表中选择已有的对象)移动至一个新的集合里。我们在 Sketch 里也可以找到相同的用法,添加组件库是从本地已有的组件库集合中选择其中一个并添至 Sketch 的组件库里,而新建主要用在创建一个新的画板。前者强调增加,后者强调从无到有的搭建过程。因此,如果你想表达从无到有地创建一个对象,这个过程里需要一系列的输入或者配置,可以使用“新建”,如“新建图层”“新建商品”,如果你想强调在某个集合中添入已有对象,可以使用“添加”,如“添加联系人”“添加银行卡”。四、稍后 vs 稍候平时打电话打不通的时候,你可能会听到手机里的语音提示“你有一个电话正在通话中,请稍 hou 再拨”。请问这里应该用“稍候”还是“稍后”?从字面意思理解,虽然两者都有让人等待的意思,但其实还是会有严格的使用用法。后,表示后面,稍后本身是一个副词,一般后面会跟着其他的词语,如“系统加载失败,请稍后重试”,意思是系统出现了数据加载失败,需要你等一下再重新操作一下,一般界面中会出现“刷新”这样的动词操作。候,是一个动词,表示等候,稍候也就是稍微等一等,一般可用于单独使用,如“系统加载中,请稍候...”,意思是系统正在处理数据结果,请稍微等待一下(用英文来说就是 wait a moment)。因此,“请稍候”一般可以作为一个完整祈使句来单独使用,而“请稍后”需搭配动词使用才有完整意义。五、预订 vs 预定“预订”和“预定”的区别在于“订”和“定”,订可以表示订阅、订购,而“定”则表示决定、约定。预订,指事先订约购买东西。一般用在生活中订购物品等事情上,比如预订酒店、预订飞机票等,通常需要提前预付一定的金钱。预定,指预确定,事前规定、决定或约定。比如预定婚期、预定时间。两者最大的差别在于关涉的对象不同,预订关涉钱款交易,而预定则与时间、计划、方案、目标、地点等相联系。因此,如果你想要确定的事物与钱款交易相关,可以使用“预订”,而如果想强调计划好的事物不会轻易变卦,可以使用“预定”。写在最后看到这里,也许会有人说,有些词汇本来就意思相似,用错了对于用户也没多大影响啊?你看,在登录界面使用“登录”或是“登陆”按钮,用户都能理解这是什么意思,有必要这么“咬文嚼字”吗?这里引用伟大的乔帮主说的话:设计是人造产品的根本灵魂。如果连我们的“根本灵魂”都腐坏了,又怎么做得出好的,甚至伟大的产品呢?作为保障产品体验的责任人,如果连错别字这样的基础知识都掌握不扎实,谈何设计更优秀的产品体验?你在工作中还有遇到其他容易混淆的术语吗?欢迎在评论区留言,大家一起讨论。本篇来源:优设网原文地址:https://www.uisdc.com/terminology-science
对象 板块 思维方式 有一个所有设计师都懂,但所有发布设计需求的人都不懂或者假装不懂的事实——同一个项目中,花的时间精力越多,做出来的设计效果就越好。这个道理看起来浅显易懂,但总有那么些情况下,有人又要你做出高质量设计,又不给你时间。而大部分情况下,我们不得不经常面对这个看似无解的矛盾,这便引发了一个思考:应该舍弃质量,还是放弃效率呢?提高效率工具:这5款工具,让设计师工作效率提升 200%!(十二)大家好,这里是和你们聊设计的花生~今天为大家带来设计师效率工具第 12 期,本期推荐的 5 个神器分别是: 免费好用!阅读文章 > 在思考这个问题的时候,引出了另一个更本源的问题:质量和效率是否难以共存?直觉上来说,是的。鱼和熊掌不可兼得,工作中真的很难协调这个平衡,总得有所取舍。但工作之外呢?将目光跳出设计领域,是否会有意外收获呢?一、目光跳出设计领域的思考我们先来里认识两个设计中不太容易接触到的概念:「面向过程」与「面向对象」这是来自编程过程中的两个截然不同的思维方式,一般用来总结不同编程语言的运行逻辑,但我们不是程序员,对这个问题不做深究,只聊聊这两个概念各自背后的思维方式中,是否包含有解决质量与效率之间取舍问题的解法。二、两种概念的认知什么是「面向过程」,我们将其简化为一个日常生活中的琐事来理解:你要洗衣服。于是,你烧制了草木灰,熬制了羊油,将两者混合,以古法制作出手工肥皂,随后钻井,打水,刨木,做盆,最终成功的洗干净了衣服,这就是极致的「面向过程」的思维方式,所有的一切从头开始,完全定制,充满仪式感的同时,也繁琐的有些过分。相信大部分人不会选择这样的方式来完成「洗干净衣服」这一目的。那什么是「面向对象」呢?通常来说,将衣服脱下丢进洗衣机拿出干净的衣服,才是身为现代人的我们更常运用的方式,而这就是典型的「面向对象」的思维方式。三、进一步了解何为「对象」那么问题来了,什么是「对象」,想必大家也都意识到了:洗衣机,以及一切包含完整闭环功能的事物。「面向对象」的思维方式里最重要的一点,就是合理的运用拥有各种完整功能的「对象」来解决问题,衣服脏了找洗衣机,肚子饿了找外卖,头发长了找理发店,屋子乱了找 58。看到这里,想必大家对这两种思维方式的优劣就一目了然了,「面向过程」的每一步都完全透明可控,在保证充分定制化的同时得到最优的质量,但相应的,需要付出极多的成本。而「面向对象」,则通过不同「对象」自有的一套流程来提供标准化的解决方案,在保证足够的完成质量的同时,最大化的提升了效率。那么在设计中,「面向过程」和「面向对象」这两种思维方式是否能有所帮助?又是否存在最优解呢?四、质量与效率间如何选择首先,在面对不同的设计目的时,合理的遵循某种思维方式肯定是有所帮助的,因为我们时刻在面临不同的挑战,有的来自用户,有的出自运营,时而背负工期,时而直面自身。身为设计师,我们应该认真对待自己的每一份作品,保证作品的精致与美观,是进行商业展示时,对第一时间看到我们作品的用户的负责,同时也是对身为艺术工作者的自己的尊重。因此,在条件许可的情况下,尽可能的使用「面向过程」的思维方式来完成作品,能更有效的提高作品素质,充分定制画面中的每一个细节,也是锻炼自身各类技能的有效手段。但在商业需求中求生的我们,更多的时间里要肩负着运营提出的海量需求,又不得不在很短的时间内高质高效的完成工作,这种时候,「面向对象」的思维主导的工作方式就显得很重要了。所以,这两种思维方式并无最优解,根据不同的情况灵活运用才是最合理的选择。那么我们该如何选择呢?先别急着思考如何选择,因为这是一个伪命题。五、「对象」与「过程」的关系你们应该也都注意到了,在「面向对象」的过程中,所有的「对象」,都不是凭空产生的,它们的背后也许是一台精密的名牌家电,也许是一间忙碌的专业厨房。而无论是机器的诞生,还是珍馐的烹饪,都灌注了从业者们大量的心血,他们在创造「对象」的过程中,同样经历了大量「面向过程」的工作流程,最终得以让我们可以跳过「对象」的创造过程,只享受「对象」带来的便利结果。「面向对象」的流程中,离不开「面向过程」的前期铺垫,因此这二者之间不是对立的选择,而是互补的嵌套,先精益求精的产出「对象」,再便捷高效的使用「对象」。还记的开头我提出的问题么:质量与效率之间是否难以共存?现在看来,结论已经显而易见,「面向过程」=质量,「面向对象」=效率,我们无需舍弃任意一方,想要让其共存,我们所需要做的只是合理的安排其完成顺序。六、如何归类「对象」接下来回归到具体的工作中,什么样的工作可以归类为「对象」呢?首先我们需要明确:什么工作需要花费很多精力才能保证高质量,同时也必须保证高质量。我们以本次 58 到家春运活动为例,首先引入眼帘的是就是我们的活动主视觉板块,紧接其后的是利益点板块,和 SKU 板块。作为年度级别的重点活动,整体页面保证高质量是必要项,而其中最花费精力的,就是主视觉与 SKU 板块。主视觉元素繁多,画面构成复杂的同时,既要保证品牌的一贯风格,又要契合当前时间节点的活动氛围。而 SKU 板块则数量庞大,整体板块在保证品牌的一致性与排版美观的同时,又要兼顾增强用户品牌感知的功能。目前来看,好像并没有什么好的方式将这两个板块的工作流整理成一个「对象」,从而提高效率。但别忘了,我们这两个板块是从春运活动这一根项目中拆分出来的二级项目,而这些项目,仍可以进一步拆分成更多的三级子项。先从主视觉讲起,一个完整的视觉画面,包含了,背景,人物,道具三大类,为了保持品牌的视觉风格一致,不同活动中的主视觉同样的人物形象需要反复出现,道具风格也要保持统一,这二者成为了「对象」化的理想突破口。接下来是 SKU 板块,这个板块的工作流中最繁琐的部分在于数量庞大的同时,需要保证排版规范美观,且风格统一,每次制作都需要把不同的文字与图片规范在相同的范围与版式中,注意到关键词了么?相同的范围与版式,我们何不把排版规范收拢成为「对象」呢?进一步拆分后,满足「对象」化条件的三级项目已经十分清晰了,那如何进行「对象」化呢?七、如何进行「对象」化我们的答案是 faceteam,3D 组件库,与自动 SKU 模板。Faceteam 是一个由众多设计师共同建立并不断完善的人物模型库,其中包含着海量的人物模型,涵盖了 58 到家各类设计任务中需要出现的各色人物形象,且所有模型都有着统一规格的骨骼绑定流程与动作控制器。每当项目中出现了需要的人物形象,只需要在 faceteam 中选择相应的模型下载,就可以方便的根据场景进行动作调节,高效的完成场景中的人物填充。3D 组件库采用与 faceteam 相同的逻辑搭建而成,里面包含了大量高频会使用到的日常道具,并根据其属性进行了详细分类,通过将其整理后制作为 C4D 预设文件,可以方便的通过软件自带的预设库进行一键调用,极大的简化了场景中道具的搭建流程。自动 SKU 模板是一个将重复性工作交由机器完成的算法,我们提前将板块中的排版进行规范,制定好大板块中每个小板块的尺寸与排放,和小版块中每个元素的尺寸与位置,如此一来,不同活动中需要更改不同的图片与文字时,其替换工作甚至不需要设计师的参与,运营端就可自行完成。至此,最耗费时间精力的子项目都已「对象」化,通过对不同「对象」的灵活应用,其合并而成的根项目整体效率便有了飞跃式提升。原来,质量与效率可以共存,只不过需要选择合理的思维方式而已。写在最后《思维力》中有句话如是说:“选择大于努力”,我们不能放弃身为艺术工作者的理想与坚持,但有时候,选择正确的方式,选择一条捷径,并不意味着偷懒与取巧,反而让我们可以有更多的精力来精进自身,有更多的余地来对抗滚滚的时代洪流。与君共勉。欢迎关注「58UXD」的微信公众号:本篇来源:优设网原文地址:https://www.uisdc.com/balance-efficiency-and-quality
效果 文字 对象 Illustrator混合工具是在进行视觉设计时常使用的工具,熟练掌握可以轻易实现非常复杂和炫酷的效果!希望通过本期讲解,让你轻松驾驭混合工具,灵活运用并举一反三设计出更多优秀作品。选择需要混合的对象,按快捷键Ctrl+Alt+B即可进行混合。通常可以对两个或以上的对象进行外观(效果、填色、描边)、颜色、透明度的过渡。双击“混合工具”即可弹出混合选项菜单,“间距”分别有3个选项:平滑颜色、指定步数、指定距离。1、平滑颜色:自动计算混合的步骤数。2、指定的步数:自定义混合对象之间的数量。3、指定的距离:指定一个对象到下一个对象之间的距离。连接混合对象间的路径称为混合轴:混合轴可以通过相关路径工具进行编辑:还可以绘制新路径替换混合轴:框选对象和路径,执行“对象-混合-替换混合轴”命令。使用文字工具输入文字,填充白色,描边为黑色,大小选择1pt。复制一个字向右下角移动,描边改为0.5pt。选择两个文字按快捷键Ctrl+Alt+B进行混合。双击“混合工具”弹出混合选项菜单,“间距”选择”指定步数”:100。使用同样的方法制作其他三个文字的混合效果:最后加入文字排版:给“混合轴”添加新锚点,再使用路径工具进行调整,可以得到如下效果:使用同样的方法调整其它三个文字的混合效果,重新进行文字排版,第二个海报设计完成:重新绘制新路径,框选对象和路径,执行“对象-混合-替换混合轴”命令。得到新的混合效果:另一个字也使用相同的方法制作,最后加入文字排版,第三个方案设计效果:重新更改混合效果:前方文字填充改为无,描边为1pt的白色;后方文字缩小,把填充和描边都改为0,得到如下效果:其它文字也使用相同的方法制作,最后加入文字排版,第四个方案设计效果:利用混合工具还可以制作出很多有意思的效果,大家可以灵活运用并举一反三设计出更多优秀作品。作者:邓海贝来源:艺海拾贝Design(ID:YHSBds)
按钮 控件 对象 设计心理学中的第三个交互设计概念:映射往期回顾:万字干货!5 个设计心理学核心概念:示能与意符这五个核心概念是学习交互与设计心理学的基础,在唐纳德先生的设计心理学中有提到,分别是:示能、意符、约束、映射、反馈。阅读文章 > 同样,这个概念也要结合示能和意符一起来思考。诺曼先生在设计心理学中提到了映射这个概念,但是比较精炼,对于初学者来说只能有个大概的了解。所以今天我们继续用更多的案例来说一说这个概念在我们数字化以及生活中运用的实际场景。这虽然是交互基础的概念但对我们设计师来说也极其重要,概念虽然很简单,但实际在设计中也会频繁的遇到问题。我们先用比较正经的文案来描述一下这些比较“枯燥”的概念,映射是一个术语,从数理理论借用而来,表示两组事物要素之间的关系。(书中诺曼先生的原话)上两篇文章我们说的示能和意符,表示了事物本身具备或传达的功能和被交互性,而映射则是表示了控制器和被控制对象的关系。好的示能和意符的设计,可以让映射变的自然。第一篇示能我们举了一个开关的例子,多控开关之所以让人抓狂首先是缺少了意符的表达,其次是映射的不合理。就如同我们在书中见过的一个煤气灶的案例,4 个灶头下方有 4 个控制开关,左右两种不同的排列方法,体现出好的映射有多重要。映射的三种层次诺曼老师在如何设计映射中提到,自然映射设计可以分为 3 种层次最佳的映射:控件分布在被控物体的主体对象上次佳的映射:控件与被控对象相对更接近第三佳的映射:控件与被控对象在空间分布一致这三种映射的层次在体验中的满意度与效率一次递减,我们依次举例说明1. 控件分布在被控制的对象上例如门把手在门上,我们就觉得这映射设计的很自然,通过转动把手可以对门进行开和关。再例如我家的洗衣机上有一个用来选择洗涤模式的旋钮,洗涤模式围绕在旋钮的周围,旋钮上有光点,旋转旋钮光点就会旋转到我们需要的洗涤模式上,这也是控件与对象一体的形式,满足用户对控制器与被控制对象的心理预期。那在数字产品中我们也会遇到类似的情况,例如我们想展开放置在一个卡片中的文字,我们通常最好的方式是在文本的边上设计一个提示展开的“可点击按钮”,再次的方案是放在文案的下方,最不可取的就是放在卡片以外的区域,因为映射关系逐渐减弱到无关。再举个例子 iOS 系统中如果要调节音量,可以在音量模块中直接通过手指的滑动来调节,而不需要在模块中或者模块外部加上两个用来增减音量的按钮。不过说实话,华为的曲面屏双击侧边唤出音量控制模块,个人觉得成本还要比物理实体按键更高一点。除此之外,智能手机在逐渐演变进化的过程中,手势操作功不可没,利用手势代替按钮也节省了更多的成本并且在效率方面也得到了提升。例如视频播放器的应用中,会有相应的控件用来控制视频的播放、暂停、声音、进度、亮度、横竖等等,这些按钮其实就是最佳的映射设计2. 次佳:控件与被控对象更接近这个也就是我们常说的格式塔心理学中的接近原则,因为越靠近越相关,很好理解。某些物件在设计时无法将控件和被控对象结合设计,那么我们只能退而求其次,让他俩能更靠近一些,在映射关系上可以更清晰。近万字干货!带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 接下来我会给大家看我家的冰箱和电饭煲的操作界面,大家就知道,次佳的映射如果不好好设计,也会显的很糟糕。如图所示,其实界面的信息设计无非就是这样,如果你可以把这些界面的信息设计的有逻辑有层次,那么在其他的用户界面中也能够如法炮制。例如电饭煲的烹饪模式和其对应的按钮,都是通过点击多次按钮进行控制,而不是在单独的模式中具有单独的按钮,而最好的方法那肯定就是想选什么模式直接选,而不是做一个按钮来多次切换。这里是因为本身这款电饭煲没有智能面板,所以通过物理按钮只能这么做,否则,按钮一多就更难操作了。那有小伙伴问他能不能和洗衣机一样做个旋钮呢?当然也可以,因为旋起来也比多点几次按钮来的方便,只不过旋钮做上去之后其他的按钮可能也要变成旋钮,在产品设计上就有更多的问题要探讨啦。所以我们再来看它的按钮分布,发现其实控制按钮和被控制的参数缺少了距离关系,当你看着想要控制的参数却找不到控制按钮的时候就会比较抓狂,因为在这个布局中既没有满足最佳也没有满足次佳,甚至连在空间分布上也无法产生对应。然后我们再看这个电冰箱,这个西门子电冰箱的用户面板我也属实没有看懂,但距离关系已经做的比咱电饭煲要好一些了,至少左右两侧的按钮应该是控制左右两侧不同的温度。左右两侧分别是冷冻和冷藏的设置,但是中间只有两个温度,一共 4 个按钮和两个温度,这显然在自然理解下是不能理解的,这就和艾尔登法环里的 boss 们的关系一样混乱,那 4 个按钮为什么只有 2 个温度呢,因为左侧的两个按钮分别是切换不同的温度设定,而右侧的一个按钮和温度并没有任何的血亲关系,因为它就是一个锁!不仔细看还以为它是用来控制温度的,因为和其他三个按钮太像了!这不就是在滥竽充数么。这里的两个案例我们发现,在次佳的映射中,其实就对格式塔心理学里的原则应用的比较多,为了让控制器和被控制对象的关系更紧密。大产品小细节!5分钟了解格式塔原则金蝶云之家体验部交互设计师-王梓铭:这一篇「大产品小细节」想跟大家聊聊设计中很常用的一个心理学原则——格式塔原则。阅读文章 > 3. 控件与被控对象在空间分布一致在某些场景下,我们是无法通过设计让控件与对象满足 1、2 两个要求,所以就会有第三种,在空间分布上一致,例如在一个大空间中的灯与开关,开关不可能做在灯本体上,也没有办法让它俩靠的更近,所以只能在空间分布上更加一致,才能够让映射关系合理。其实数字产品的用户界面设计,基本上我们可以做到 1、2 点,因为本身区域有限,控制器和对象也几乎在弹丸之地互相映衬,大部应用的控件操作起来也都很简单,但是不外乎一些较为复杂的工具类产品,例如车机系统,通过中控屏来控制车辆的一系列功能例如:空调、座椅、车窗等等,那我们也发现其按钮的分布也是满足了这样的交互映射,将物理按钮变为虚拟按钮集成在中控屏幕中,为了让用户更好的映射出它们之间的关系,于是我们就需要利用空间分布的关系,来让用户明白,按钮与控制对象的关联逻辑。例如在特斯拉的 UI 界面中,将整体分为 3 块区域,左边是形式仪表右侧是多功能区域底部则是车辆相关的控制功能,你想控制前后车灯,那么按钮就会在车辆模型的前后两侧,如果你想打开空调则在底部工具栏的中间即可打开,如果你想给座椅加热那么也可以像图片中那样在 4 个座位的图片中进行交互就可以实现。这样的设计让控件与被控制的对象能够远距离在控件上形成一个映射关系。还有在日常生活中,大家家里是否用过升降式晾衣架,通过旋转把手来操控升降,这里其实也很难应用到空间部分,因为两者所处的平面不同,就更加无法对应起来,有没有一种比较好的方式来解决这个问题呢,我觉得可以用颜色或者标记来做映射的对应。所以为了映射的相关性、同型、同色、靠近等方式都可以用来提升二者的相关性。映射在数字产品中的应用数字产品中的映射也是关于控制器和被控制对象的故事。数字产品中也有不少的控制器我们就称之为控件,例如一个图标按钮、一个下拉列表或者一个滑块,它们都有各自的控制对象。而我们常说什么样的设计满足用户心智,指的就是让用户觉得当他操控控件后带来的结果与反馈是他预期之中的,这就会让其觉得是合理的、自然的。1. 案例 1例如在这个案例中,设计师其实是想通过按钮来控制车中相关的功能,但是大家能发现问题吗?映射的前提是控件要先满足示能和意符的表达,其次再通过映射告诉用户,谁控制谁。但我们发现这个界面中的按钮其实在示能和意符上出现了歧义,例如热车的图标,我们通常认为这样的宫格形式布局都是以入口形式存在,点击后会进入下一个界面,但是设计师在这里其实把一些情况搞混了。所以我们仔细看,这些图标就像是电饭煲上的按钮,只要点击就会触发车辆状态的变化,相当于一个开关,咱们先不说这样的设计是否方便用户,我们看映射就会发现用户其实很难做到空间布局上的对照,从而更高效的来对车辆进行控制。并且也存在一定的逻辑错误,例如热车和解锁是什么逻辑,车窗开到一半想停止怎么办,空调要调节冷热和温度怎么办,所以这里不再单纯的是一个开关集合的区域,会遇到很复杂的情况。2. 案例 2我们再来看一个案例,其实在数字界面中很多映射并非有直接对应关系,而是需要用户通过交互来触发。在下面的界面中,是一个课程的详情页面,用户可以发布自己的学习笔记通过音频的方式发布在该页面中,而底部的工具栏在当前的设计中就会出现映射相关的问题。我们既然要发布音频那么我们有这些问题可以提前预设好需要有什么控件来控制吗?例如一个按钮那么这个按钮是点击后松开再开始录音,还是需要长按开始录音,亦或者点击之后进入一个编辑页面,再通过录音或者上传音频的形式来编辑呢?点击麦克风录完音频后页面会怎样显示?能否试听、编辑,边上的输入框和麦克风有关吗?我可以直接输入文字再点击发布吗或者直接点发布会出现什么呢?等等不管如何我们需要有一个入口,所以这个入口比较关键。通过这个入口(按钮)来触发上传音频的整个交互流程,它也是一个映射关系,只是没有全部展开,因为这里无法展开。有同学想问,为什么不能展开呢?其实这个很好理解,就像我们做登录和注册的时候不会把两个流程做在一个界面中一样,造成页面的复杂、不兼容。所以如果这里不需要音频以外形式的发布内容那么就无需把麦克风、输入框和发布按钮拆解开来做,造成了没有必要的浪费。一个按钮可以作为一个入口来开启一个单独的任务流程,但是如果这样拆解开那么任务流程就无法再高效的完成,并产生很大的歧义。数字化产品的映射往往是线性的。3. 案例 3再说一个类似的案例,这个也是小伙伴做的一个界面。初学者的问题就比较明显,在于他们没有分步和阶段性控制的概念。总想着一个界面能完成多个任务,当然在这里也没有考虑好映射怎么做。从这界面我们能很明显的看出来这其实是一个发布的界面,从外部一个按钮中进行跳转而来的。如果让你去评价你会怎么说,是不是哪里都想说一点,好像里面的信息、按钮、功能就不应该在这个界面?你可能会有这些问题:怎么把视频、音频、图片做成 tab,选择不同的类型去发布?点击录制后音频会出现在哪里?录好一条后录制按钮还在不在?录好一条后我切换到图片再传一张图片再点击下一步会出现什么?点击草稿箱又会进入什么界面?我什么都不操作直接点下一步会怎样?这些问题都将困扰我们完成一个发布任务。将一个交互流程做清晰,就需要让用户有一个清晰的功能映射。所以点击发布后,按钮应该要先控制发布类型这个对象,让用户选择发布类型,然后再跳转出对应类型的发布流程。总结映射在交互体验的设计中也是很重要的概念之一,要结合示能和意符一起思考。同时剩余的概念我们也会在下期一起分享给大家,对于初学者来说,这些概念很重要,在我们设计案例的时候务必要时刻思考与结合。用一篇超全面的文章,帮你掌握「旅程映射」的知识点旅程映射创建了一个完整的体验视图,正是这一过程将不同的数据点聚集在一起并进行可视化处理,以了解产品需求,从而可以吸引各个群体中不感兴趣的利益相关者,并促进协作性对话和变革。阅读文章 > 欢迎关注作者的微信公众号:「应谋鬼计」本篇来源:优设网原文地址:https://www.uisdc.com/mapping
图形 封套 对象 前言:今天的illustrator教程重点在于“封套扭曲”→“用顶层对象建立”的变形功能,利用这两个功能实现立体字的设计,全过程是不用C4D就能完成的立体造型哦,大家跟着一起学吧。Step 01首先打开你的Adobe Illustrator软件,新建文档。(我的软件是2021版本)Step 02使用“椭圆工具(L)”绘制一个圆形,再使用“美工刀”工具将圆分割为三个部分,操作如下。Step 03输入文字,内容可自定义,如“DESIGN、TYPEFACE、LOGO”三个词,字体为Arial Black,调整字体宽度,字间距。建议字体选择一个粗体,便于后续完成立体的效果。Step 04接下来开始进行“用顶层对象建立”封套扭曲。选中刚分割好的圆形,鼠标右击,选择“排列”→“置于顶层”。Step 05选中第一个单词“DESIGN”和被分割的第一个部分,再执行“对象”→“封套扭曲”→“用顶层对象建立”命令(快捷键Alt+Ctrl+C),即可看到文字被置入于图形中,跟随着图形的形状而变形扭曲,如下图所示。Step 06选中刚才完成的变形图形,执行“对象”→“扩展”,弹出“扩展对话框”,点击确定。(这步也可以不对文字扩展,如果后续需要更改文字内容,还可以直接编辑“封套内容”进行更改。)Step 07完成“扩展”后,将图形“群组”,再复制一个出来,并改变它们的大小及颜色,如下图所示。Step 08将小图形置于底层,并与大图形居中对齐。全选再执行“对象”→“混合”→“建立”。Step 09建立“混合”后,需要再次打开“混合选项”设置参数。可以双击工具栏的“混合工具”,即可打开“混合选项”对话框,设置“指定的距离:0.1px”,形成渐变效果。Step 10(完成)完成立体效果设置,选择合适的颜色搭配,完成版面的元素编排。写到最后这次教程的重点在于“封套扭曲”→“用顶层对象建立”的变形功能。而且这个方法能适用于不同字体和图形的造型使用,特别在海报中能大大提升图形的设计感。如下图,将字体变形为主体,瞬间提高版面率。今天教程分享到这里,喜欢请分享给更多小伙伴们吧。作者 | Miuyan Chow来源 | 版式设计很简单(ID:format_design)
工具 画板 对象 你知道AI中快捷键A到Z对应什么工具,能制作出什么效果的作品吗?不用担心,杰哥带你一起探究下:A直接选择工具(A):一种非常有用且常用的工具,用于选择路径或对象中的特定锚点和手柄。特别适用于操纵组或复合形状的单个组件而不影响整个形状。全选界面中的元素(Ctrl/Command-A):全选界面中所有的元素,可用于查找确认画面的元素分布范围。B 画笔工具(B):一种徒手绘图工具,可将各种书法属性和笔刷样式应用于描边路径。斑点画笔工具(Shift-B):一种绘图工具,其作用类似于画笔,但创建封闭的填充路径而不是笔画。C剪刀工具(C):可以在一条线或一个点上切割路径或框架。锚点工具(Shift-C):单击可以把曲线路径上的锚点转变成直角,点击不放拖动锚点可以把锚点直角转变成曲线。菜单栏-效果(Alt/Option-C):打开菜单栏—效果。D复位颜色(D):点击D可以复位颜色,填充色为白色,描边色为黑色。绘图模式切换(Shift-D):正常绘图和背面绘图模式切换。重复复制元素(Ctrl/Command-D):复制一个元素后,一直按Ctrl/Command-D会连续重复上一步复制的内容。E自由变换工具(E):缩放,倾斜或旋转所选元素的变换工具。橡皮擦工具(Shift-E):一种绘图工具,用于擦除光标拖动的任何对象。辅助处理(Ctrl/Command-E):利用显卡(GPU)的显存加快复杂物体的显示速度。导出画板(Ctrl/Command-E):导出所有画板。F全屏模式(F):按两次快捷键F,可全屏显示,操作界面。粘贴在最前面(Ctrl/Command-F):Ctrl—c复制当前对象,Ctrl—f粘贴在原位置最前面。菜单栏-文件(Alt/Option-F):打开菜单栏—文件。 G渐变工具(G):通常与渐变面板结合使用,此工具可以编辑渐变的形状,大小和混合。编组(Ctrl/Command-G):可将界面中两个或两个以上的元素组合。取消编组(Ctrl/Command-Shift-G):取消编组,释放出各个独立的元素。H手形工具(H):此工具允许用户抓住画板并在应用程序窗口中移动它。当你放大你的作品但希望看到更多的设计或移动到另一个区域而不缩小时,这是完美的选择。菜单栏-帮助(Alt/Option-H):打开菜单栏—帮助。满屏画板(Ctrl/Command-Shift-H):此工具将当前画板范围扩满到可绘图满屏范围。I吸管工具(I):一种出色的工具,可让用户对对象的颜色,外观属性,效果或类型进行采样,并将该选择应用于其他地方。拼写检查(Ctrl/Command-I):用户在画板上输入一段英文,选中英文,按快捷键Ctrl/Command-I,弹出拼写检查面板,开始检测并把错误的单词给抹黑突出显示出来,点更改按钮,建议单词栏有一些建议单词给我们选择。透视网格工具显示与取消(Ctrl/Command-Shift-I):显示透视网格工具或取消透视网格工具。显示隐藏字符(Ctrl/Command-Alt/Option-I):显示隐藏字符或隐蔽隐藏字符。 J柱形图工具(J):用于创建具有垂直列的图形的工具。用户可以操纵图表的值和总体大小。连接(Ctrl/Command-J):连接路径的两端以创建闭合路径。当您发现对象具有开放路径时尤其有用。K实时上色(K):一种时髦的工具,用于为选定的封闭路径添加平面颜色。有了它,您可以绘制对象的面或边缘,而无需填充对象本身。首选项(Ctrl/Command-K):快捷打开首选项面板(菜单栏编辑-首选项-常规等)。切片工具(Shift-K):此工具可让用户将图像拖动到要切片的区域,从而将图切割为网络图像。您可以根据自己的喜好使用指南指导切片。最初用于设计的Web布局。字句调整(Ctrl/Command-Alt/Option-K):快捷打开字符面板,跳转到“设置所选字符的自居调整”。颜色设置(Ctrl/Command-Shift-K):打开颜色设置面板,可配置个性所需的颜色方案。L椭圆工具(L):常见的形状工具。它创建圆和椭圆。实时绘画选择工具(Shift-L):用户可以使用此工具选择实时绘制组的面和边,允许在某种程度上更改选定的部分。图层选项(Ctrl/Command-Alt/Option-L):弹出图层选项面板,可更改图层名称,颜色等配置。M矩形工具(M):一种形状工具,可以简单地创建任何大小的矩形。形状生成器(Shift-M):用于合并或分离选定形状和经常重叠形状的工具。 N铅笔工具(N):用于创建和编辑手绘线的工具。可以将各种画笔和描边属性应用于线条以实现各种风格。与画笔工具不同,使用画笔绘制时无法配置尺寸和形状变化(例如通过平板电脑压力)。新建文档(Ctrl/Command-N):创建新的文档包含文档信息的面板,包括颜色模式,标尺单位和画板尺寸。Shaper工具(Shift-N):使用Shaper工具可随意绘制矩形、椭圆、多边形或直线,并可将其调整成完美的几何形状。模板新建(Ctrl/Command-Shift-N):打开本地现有的模板,新建一个带模板的文档。新建空白文档(Ctrl/Command-Alt/Option-N):自动创建跟上次属性尺寸相同的空白文档。O镜像(O):在指定轴上翻转所选对象的工具。画板工具(Shift-O):允许用户编辑画板尺寸或创建其他画板。打开工具(Ctrl/Command-O):打开一切AI可识别的文件,图片等。菜单栏-对象(Alt/Option-O):打开菜单栏—对象。打开Bridge文件(Ctrl/Command-O):打开Adobe Bridge,选中模板/内容再AI中打开。 P钢笔工具(P):一种绘图工具,可创建锚点并允许用户绘制直线或曲线。透视网格工具(Shift-P):创建一个网格,用作透视图的指导。打印(Ctrl/Command-P):弹窗打印面板,调整打印前各种参数配置,直接打印。置入(Ctrl/Command-Shift-P):置入工具,可置入图片和txt文档,置入时可默认大小也可划定范围。文档设置(Ctrl/Command-Alt/Option-P):针对现有文档重编辑,包含单位、出血位、网格大小,颜色以及画板编辑等。Q套索工具(Q):用它绘制的任何形状的对象的锚点。关闭软件(Ctrl/Command-Q):关闭AI软件,温馨提示:随时保持保存(Ctrl-s)的习惯,养成这个习惯绝不后悔。 R旋转工具(R):允许用户将对象旋转到任何角度的工具。变形工具(Shift-R):工具栏中的液化工具之一,变形工具允许将工具拖过对象的任何方向上操纵对象。这样做会创建新的锚点并改变对象的形状,以用户希望的方式进行成型。显示隐藏标尺(Ctrl/Command-R):显示隐藏画板标志,鼠标右键点击画板标尺可更改标志单位。S比例缩放工具(S):根据固定或指定点调整对象大小的工具。无论你是希望在不损失矢量质量或细节的情况下使对象变大或变小,都非常有用。符号喷涂工具(Shift-S):此工具可在你沿着图片平面拖动工具的任何位置放置多个符号实例。储存为(Ctrl/Command-S):将该画板的信息储存为AI格式文件,下一次操作时按ctrl/command-s直接保存现有信息(作为设计师一定要养成ctrl-s的习惯,你不会后悔的)。另储存为(Ctrl/Command-Shift-S):将画板内容另存为AI格式文件或其他格式文件。储存为副本(Ctrl/Command-Alt/Option-S):将画板内容存储为AI格式或其他格式的文件副本。 T文字工具(T):一种常用工具,可创建水平垂直类型文字,完全可编辑和路径文字工具。打开字符画板(Ctrl/Command-T):将字符面板快速调出,可设置字体、字体大小、字间距、行间距等。菜单栏-文字(Alt/Option-T):打开菜单栏—文字。制符表(Ctrl/Command-Alt/Option-T):打开制符面板,可设置数字、位置和自由连字。U网格工具(U):将矢量对象转换为网格对象。V选择工具(V):可能是最常用的工具之一,它允许用户选择一个对象进行自定义,操作,在窗口周围移动,等等。透视选择工具(Shift-V):结合使用透视网格的工具,允许用户将对象等带入透视图并与创建的网格交互,同时将所述对象保持在该透视图中。粘贴(Ctrl/Command-V):此工具需配合ctrl-c复制使用,粘贴处于当前显示画面的正中心。粘贴文案(Ctrl/Command-Shift-V):此工具粘贴默认复制的内容。W混合工具(W):一种方便的工具,可在所选对象(包括颜色和/或形状)之间创建过渡变形。宽度工具(Shift-W):此工具允许用户在一个笔划内创建宽度的设置变化,完全由用户控制。特别适用于使用压力感应平板电脑,可以更好地控制笔划的宽度。关闭当前窗口(Ctrl/Command-W):关闭当前操作的窗口。 X填充色切换(X和Shift-X):用于切换填充和描边颜色并分别切换它们的快捷键。在AI中工作以加快工作流程并专注于使用矢量图形而不是通过面板和菜单进行创建时,此快捷键非常有用。剪切(Ctrl/Command-X):用于剪切相关元素。Y魔棒工具(Y):允许用户选择具有相似属性的对象,路径等。当您想要将所有粉红色物体一次性变为绿色或某种笔触样式时,这是一款非常棒的工具。预览模式(Ctrl/Command-Y):允许用户在文档的轮廓和预览模式之间切换。Z缩放工具(Z):一种常用工具,通过增加放大倍率来聚焦矢量工作的某个区域,或通过减小放大尺寸来聚焦在较大的图像上。返回上一步(Ctrl/Command-Z):允许用户在规定步数内返回上一步上一步直到设置的最大返回数。在上面,了解了AI中的A到Z的快捷键和对应的效果,赶紧动手试试吧……原文地址:设计杰作作者:杰哥