• 弥散光、酸性质感风、毛玻璃……流行风格设计一键搞定!

    UI交互 2022-09-22
    今天来分享几个在工作中一定能用到的小工具,非常简单,但是做出来的效果真的很不错!

    今天来分享几个在工作中一定能用到的小工具,非常简单,但是做出来的效果真的很不错!

    一、弥散渐变 要说最近一年有哪些比较流行的设计风格,大多数同学一定会想到弥散光,效果好、显高级、应用范围也很广泛。

    之前给大家分享过怎么用 AI 做,但最近我找到了一个更简单的方法!

    用这个 「 弥散渐变 」插件 可以轻轻松松一键生成好看的弥散光背景。

    选择锚点数量后,自由拖动设置锚点位置、颜色、旋转等,就可以快速调整出你喜欢的渐变样式~

    甚至,你可以直接使用「随机生成渐变色」功能,偶遇各种精美的配色,连手动调节、选择配色都可以省了。

    给大家看几个我用「弥散渐变」插件随机生成的图,配色很和谐,效果也很不错,都可以拿来直接用在作品中。

    二、效果生成器 除了弥散渐变可以用插件做,酸性、毛玻璃、故障风这三个同样流行的设计风格,我也找到了能一键生成的方法,就是用这个「效果生成器」插件。

    先来看看酸性渐变的效果:

    常用的 金属效果、迷幻色彩 全都给你准备好了。

    虽然自己做也不是多么复杂的一件事,但是架不住用插件它能一键生成啊,更加省时省力,效果还完全不打折!

    毛玻璃效果也可以直接生成,还能自由调节透明度和磨砂强度。

    故障风也不在话下:

    三、图像滤镜 设计过程中,有时会需要单独处理图片,调整亮度、或者增加一些噪点、模糊、扭曲等效果。

    做起来并不复杂,但经常需要打开 PS 或者去其他页面操作,工作流程就被打断了。

    但其实,用对插件就能直接解决这个问题,比如我最近找到的这个 「图像滤镜」插件 。

    一共 4 大类 20 种效果,绝对能满足一些常见的图片处理需求。

    亮度、对比度这些都是基础操作了,用这个插件还可以添加变焦模糊、镜头模糊,旋涡、膨胀等扭曲效果,以及六边形像素、半调网屏等等特殊效果。非常实用!

    四、实用图标插件 除了我们常用的 iconfont、IconPark、iconify,最近又找到了 3 个同样很实用的图标插件,分享给大家。

    第一个是 「3dicons」 。一套简单好用的 3D 图标,共有 120 多个,但它提供了非常多的样式预设。

    可以根据需求选择原色、渐变、单色、双色,还可以设置“动态、平视、等距”三种预设视图样式,丰富性大大提升不说,变换出的 1440+ 图标,也能适应更多场景。

    最重要的是,素材及其站点完全开源,可免费商用!

    第二个是 「Health Icons」 。面向世界各地的健康项目的一个公共图标库,同样的永远免费可商用的,无须担心任何版权问题。

    共有 1166 个图标,涵盖血型、身体部位、医疗机构、医学场所、医疗器械、诊断设备、医学标志符号、药物等十数个大类。

    在做医疗或者健康相关主题设计的同学们,一定能用得上!

    第三个是 「Phosphor Icons」 。风格统一且实用的一套图标,无论是用在界面、图表、PPT 当中都非常出彩。

    不仅样式多变,从简单的线性图标到填充样式的图标都有,还有双色的版本,你甚至可以编辑相应的图标线条粗细、色彩和样式。

    目前一共有 6200+ 图标,同样的完全开源,可免费商用。

    五、总结 多学习和总结一些设计技法很重要,与此同时,多多寻找一些适合且实用的工具,来帮助你提高工作效率同样重要。

    像是今天分享给大家的这些我从 「即时设计-插件广场」 找到的插件,就能在保证高质量的同时,减少很多繁琐的操作,节约设计时间。

    类似的效率插件还有很多,就不在这里一一介绍啦,感兴趣的可以同学可以去体验一下~

    即时 设计插件 广场: https://js.design/pluginSquare 欢迎关注作者微信公众号:「菜心设计铺」

  • 弥散光、酸性质感风、毛玻璃……流行风格设计一键搞定!

    UI交互 2022-09-22
    今天来分享几个在工作中一定能用到的小工具,非常简单,但是做出来的效果真的很不错!

    今天来分享几个在工作中一定能用到的小工具,非常简单,但是做出来的效果真的很不错!

    一、弥散渐变 要说最近一年有哪些比较流行的设计风格,大多数同学一定会想到弥散光,效果好、显高级、应用范围也很广泛。

    之前给大家分享过怎么用 AI 做,但最近我找到了一个更简单的方法!

    用这个 「 弥散渐变 」插件 可以轻轻松松一键生成好看的弥散光背景。

    选择锚点数量后,自由拖动设置锚点位置、颜色、旋转等,就可以快速调整出你喜欢的渐变样式~

    甚至,你可以直接使用「随机生成渐变色」功能,偶遇各种精美的配色,连手动调节、选择配色都可以省了。

    给大家看几个我用「弥散渐变」插件随机生成的图,配色很和谐,效果也很不错,都可以拿来直接用在作品中。

    二、效果生成器 除了弥散渐变可以用插件做,酸性、毛玻璃、故障风这三个同样流行的设计风格,我也找到了能一键生成的方法,就是用这个「效果生成器」插件。

    先来看看酸性渐变的效果:

    常用的 金属效果、迷幻色彩 全都给你准备好了。

    虽然自己做也不是多么复杂的一件事,但是架不住用插件它能一键生成啊,更加省时省力,效果还完全不打折!

    毛玻璃效果也可以直接生成,还能自由调节透明度和磨砂强度。

    故障风也不在话下:

    三、图像滤镜 设计过程中,有时会需要单独处理图片,调整亮度、或者增加一些噪点、模糊、扭曲等效果。

    做起来并不复杂,但经常需要打开 PS 或者去其他页面操作,工作流程就被打断了。

    但其实,用对插件就能直接解决这个问题,比如我最近找到的这个 「图像滤镜」插件 。

    一共 4 大类 20 种效果,绝对能满足一些常见的图片处理需求。

    亮度、对比度这些都是基础操作了,用这个插件还可以添加变焦模糊、镜头模糊,旋涡、膨胀等扭曲效果,以及六边形像素、半调网屏等等特殊效果。非常实用!

    四、实用图标插件 除了我们常用的 iconfont、IconPark、iconify,最近又找到了 3 个同样很实用的图标插件,分享给大家。

    第一个是 「3dicons」 。一套简单好用的 3D 图标,共有 120 多个,但它提供了非常多的样式预设。

    可以根据需求选择原色、渐变、单色、双色,还可以设置“动态、平视、等距”三种预设视图样式,丰富性大大提升不说,变换出的 1440+ 图标,也能适应更多场景。

    最重要的是,素材及其站点完全开源,可免费商用!

    第二个是 「Health Icons」 。面向世界各地的健康项目的一个公共图标库,同样的永远免费可商用的,无须担心任何版权问题。

    共有 1166 个图标,涵盖血型、身体部位、医疗机构、医学场所、医疗器械、诊断设备、医学标志符号、药物等十数个大类。

    在做医疗或者健康相关主题设计的同学们,一定能用得上!

    第三个是 「Phosphor Icons」 。风格统一且实用的一套图标,无论是用在界面、图表、PPT 当中都非常出彩。

    不仅样式多变,从简单的线性图标到填充样式的图标都有,还有双色的版本,你甚至可以编辑相应的图标线条粗细、色彩和样式。

    目前一共有 6200+ 图标,同样的完全开源,可免费商用。

    五、总结 多学习和总结一些设计技法很重要,与此同时,多多寻找一些适合且实用的工具,来帮助你提高工作效率同样重要。

    像是今天分享给大家的这些我从 「即时设计-插件广场」 找到的插件,就能在保证高质量的同时,减少很多繁琐的操作,节约设计时间。

    类似的效率插件还有很多,就不在这里一一介绍啦,感兴趣的可以同学可以去体验一下~

    即时 设计插件 广场: https://js.design/pluginSquare 欢迎关注作者微信公众号:「菜心设计铺」

  • 2000套高清资源免费下载!传统文化设计灵感宝库「书格」

    UI交互 2022-09-21
    今天继续大家推荐一个宝藏古籍资源库「书格」,里面开放分享诸多高清的古籍古画素材资源,供所有人免费浏览下载,是一个非常棒的中国传统文化设计灵感库。

    大家好,这里是和你们聊设计的花生~

    之前为大家推荐了 3 类书法字的资源,受到了很多小伙伴的好评。今天继续大家推荐一个宝藏古籍资源库—— 书格 ,里面开放分享诸多高清的古籍古画素材资源,供所有人免费浏览下载,是一个非常棒的中国传统文化 设计灵感 库。

    超全整理!设计师必备的3类书法字免费资源(附下载链接) 大家好,我是和你们聊设计的花生~ 之前在社群有小伙伴问有没有免费可商用的毛笔书法字体资源,有肯定是有的,但授人以鱼不如授人以渔,今天除了为大家推荐免费好用的书法字体,还会为分享给大家优质的书法字入门知识和教程,还有免费的资源网站,让你即使没有书法功底也有办法做出好看的书法字体 ~ 往

    阅读文章 >

    书格简介 书格官网(新版): https://new.shuge.org/

    书格官网(旧版): https://www.shuge.org/ebooks/#

    书格是一个自由开放的在线古籍图书馆,致力于开放式分享、介绍、推荐有价值的古籍善本,并鼓励将文化艺术作品数字化归档 。其旧版累计收藏资源 2290 套,新网站则已发布 380 套优质资源。

    书格发布的书籍主要以高清彩色影像版本 PDF 格式,大部分书籍书籍单页宽度在 1400 像素以上,跨页宽度在 2400 像素以上,并且没有任何加密或水印。

    书格新版网站首页

    书格分享的内容限定为公共版权领域的书籍,书籍资源来源于世界各个图书馆或机构的公开内容。网站鼓励大家自由再加工、再创造、再发布站内资源,不会去干涉第三方转载,但希望转载传播时尽量自由、公开、免费,并尽量保留文献原本的来源链接,以方便学术研究引用。

    书格内资源展示

    由此我们可以看出书格是一个公益性的文化网站,为每个人自由免费的获取优秀的传统文化资源提供了便捷的渠道,下面从 3 个方面为大家推荐书格的可用设计资源。

    1. 丰富多样的字体灵感资源

    书格内众多古籍古画内包含了许多古代字体资料,无论是隶书、楷书、行书,还是刻本、碑拓、印章等,都有高清的影像,是相关字体设计的极佳参考。

    想要不侵权?收下这篇可能是最全面的书法字设计指南! @研习设K先生 :中国文化有五千年的历史,汉字在这其中有着至关重要的作用。

    阅读文章 >

    2. 高清的绘画/影像资源

    除了文字古籍,书格内还有大量古代绘本画卷和旧时的黑白摄影照片,内容涉及建筑、人物、植物、动物、器物、民俗、山水、地图等。像我们熟悉的《女史箴图》《海错图》《万国来朝图》《上林图》等都有书格都有高清图像。既可作为设计素材,也可以作为绘画的参考。

     

    3. 下载方式&外部链接

    书格内的资源下载起来非常方便,书籍展示卡片的右下角就有直接下载的按钮,也可以进入书籍详情页内下载,里面有关于文件的格式、大小等详细信息。点击「下载链接」,选择合适的路径下载即可。

    此外书格网首页底部还附有很多知名线上图书馆网站名单,比如哈佛大学图书馆、世界数字图书馆、互联网档案馆、中国国家图书馆、奎章阁古典文献资源导航等,都是非常优秀的资源和参考网站,感兴趣的小伙伴可以做进一步的探索。

    如果你想获取更多优质设计网站,也可以收藏优设「设计师导航」 https://hao.uisdc.com/

    里面汇集了 20 多个设计领域、超 500 个优质设计网站,导航分类细致,类型丰富全面。无论你是想找灵感、找免费素材,还是搜设计教程、学习设计知识,都能通过分类标签以及内置的优设网和优优教程网搜索引擎,快速找到最合适的设计资源,还可以免去自己逐个收藏网站的麻烦,非常方便。

    好啦以上就是今天的分享,喜欢的小伙伴记得点赞收藏,也可以转发给身边有需要朋友 ~ 如果你有关于本文或者其他设计疑问,可以在评论区提出,我会第一时间为大家解答~

    推荐阅读:

    9个设计师必看的国际顶尖设计网站 大家好,我是和你聊设计的(经夏日高温烘焙更香脆的)花生~ 虽然优设一直有向大家推荐各类设计灵感,但是还是有很多刚接触设计的小伙伴们迫切地想知道有哪些“设计师必备国际设计网站”能让自己一键收藏,既然如此那干脆给大家就来一期优质设计网站推荐吧 ~ 除去设计师都熟悉的设计网站三巨头 Pin

    阅读文章 >

    可自由商用!收录超过100万张图片素材的免费图库PikWizard 本文要介绍的「PikWizard」是一家可免费图库,收录超过 100 万张高质量、适用于商业用途的免费图片素材,可安全用于商业用途,无需标示原作者或出处来源。

    阅读文章 >

  • 在线免费无限制!超好用的图片压缩神器Compress Image

    UI交互 2022-09-21
    图片压缩工具哪个好用?试试今天推荐的Compress Image,在线压缩不用下载安装包,而且完全免费,压缩图片效率极高,推荐收藏。

    图片 压缩工具 哪个好用?试试今天推荐的 Compress Image ,在线压缩不用下载安装包,而且完全免费,压缩图片效率极高,推荐收藏。

    如果想让图片的容量变小,但又不希望破坏画质、缩小照片尺寸或转换为其他格式,这时候可以使用 图片压缩 工具做到,像是 TinyPNG、Squoosh都能在使用者上传相片后进行压缩,以便得到容量更小的相片,但肉眼看不出来画质差异,非常神奇!特别是要将照片使用于网站或部落格,就能利用压缩工具先缩小一下相片容量,让访客开启图片时加载速度更快。

    这款桌面版图片压缩工具 Squoosh,没网也能免费用! 我以前经常使用 TinyJPG 压缩图片,可以有效减少文件大小,还能维持图片画质,后来在网站开启 Jetpack CDN 直接替换图片网址就有整合加速、分流和压缩图片效果。

    阅读文章 >

    2022 最全收集!23个免费图片压缩在线神器都在这了! 本文对曾经介绍过的「免费图片压缩工具」进行整理,制作为列表让使用者可更快找到需要的服务,在撰写这篇文章时也测试过所有图片压缩工具都能正常运作,我倾向使用免安装、在线工具,只要打开浏览器就能进行相关操作,更为方便快速。

    阅读文章 >

     

    本文要介绍「compressImage.io」是一个免费在线图片压缩工具,可以透过浏览器快速为 JPG 和 PNG 图片进行压缩处理,这项服务具备隐私、脱机运作特性,用户的图片只会在浏览器压缩,不会被上传到任何服务器(和 Imagator 一样),因此这个压缩功能没有任何限制(包括文件大小、文件数量)。

    compressImage.io 操作方式简单,而且还能设定压缩图片质量、最大宽度高度、文件后缀或是否要转换为 WebP 格式,图片经压缩后会显示源文件大小、压缩后文件大小和减少百分比,如果批次压缩多张图片可将所有压缩后的相片打包为压缩文件下载。

    compressImage.io 网站链接: https://compressimage.io/

    使用教学

    开启 compressImage.io 网站后点选「Add Files」加入要压缩处理的图片,或直接将 .png、.jpg 文件拖曳到浏览器的上传字段,没有文件数量限制、也不限制文件大小,因为会在使用者浏览器进行处理。

    点选上方的「设定」按钮可适应压缩图片画质(默认为 70%)、图片最大宽度或高度、压缩后加入的档名后缀、转换为 WebP 格式,依照使用者需求自行调整。

    压缩完成后图片会显示绿色勾勾,也会有每个文件的压缩前后容量差异、减少百分比,如果批次压缩的话可在最下方看到所有图片压缩前后减少的文件大小和百分比,每张照片后方是下载链接,若又一次将所有相片打包下载,点选右上角「Download Zip」就能将他们打包为压缩格式。

    点选照片还会开启「比较模式」,利用中线来预览、检视压缩前后的相片差异。

    值得一试的三个理由:

    免费图片压缩工具透过浏览器为 JPG、PNG 图片减肥、大幅降低容量 具备隐私及脱机使用特性,图片不会上传到第三方服务器 可调整画质、最大尺寸、档名后缀或转换为 WebP 格式

  • 在线免费无限制!超好用的图片压缩神器Compress Image

    UI交互 2022-09-21
    图片压缩工具哪个好用?试试今天推荐的Compress Image,在线压缩不用下载安装包,而且完全免费,压缩图片效率极高,推荐收藏。

    图片 压缩工具 哪个好用?试试今天推荐的 Compress Image ,在线压缩不用下载安装包,而且完全免费,压缩图片效率极高,推荐收藏。

    如果想让图片的容量变小,但又不希望破坏画质、缩小照片尺寸或转换为其他格式,这时候可以使用 图片压缩 工具做到,像是 TinyPNG、Squoosh都能在使用者上传相片后进行压缩,以便得到容量更小的相片,但肉眼看不出来画质差异,非常神奇!特别是要将照片使用于网站或部落格,就能利用压缩工具先缩小一下相片容量,让访客开启图片时加载速度更快。

    这款桌面版图片压缩工具 Squoosh,没网也能免费用! 我以前经常使用 TinyJPG 压缩图片,可以有效减少文件大小,还能维持图片画质,后来在网站开启 Jetpack CDN 直接替换图片网址就有整合加速、分流和压缩图片效果。

    阅读文章 >

    2022 最全收集!23个免费图片压缩在线神器都在这了! 本文对曾经介绍过的「免费图片压缩工具」进行整理,制作为列表让使用者可更快找到需要的服务,在撰写这篇文章时也测试过所有图片压缩工具都能正常运作,我倾向使用免安装、在线工具,只要打开浏览器就能进行相关操作,更为方便快速。

    阅读文章 >

     

    本文要介绍「compressImage.io」是一个免费在线图片压缩工具,可以透过浏览器快速为 JPG 和 PNG 图片进行压缩处理,这项服务具备隐私、脱机运作特性,用户的图片只会在浏览器压缩,不会被上传到任何服务器(和 Imagator 一样),因此这个压缩功能没有任何限制(包括文件大小、文件数量)。

    compressImage.io 操作方式简单,而且还能设定压缩图片质量、最大宽度高度、文件后缀或是否要转换为 WebP 格式,图片经压缩后会显示源文件大小、压缩后文件大小和减少百分比,如果批次压缩多张图片可将所有压缩后的相片打包为压缩文件下载。

    compressImage.io 网站链接: https://compressimage.io/

    使用教学

    开启 compressImage.io 网站后点选「Add Files」加入要压缩处理的图片,或直接将 .png、.jpg 文件拖曳到浏览器的上传字段,没有文件数量限制、也不限制文件大小,因为会在使用者浏览器进行处理。

    点选上方的「设定」按钮可适应压缩图片画质(默认为 70%)、图片最大宽度或高度、压缩后加入的档名后缀、转换为 WebP 格式,依照使用者需求自行调整。

    压缩完成后图片会显示绿色勾勾,也会有每个文件的压缩前后容量差异、减少百分比,如果批次压缩的话可在最下方看到所有图片压缩前后减少的文件大小和百分比,每张照片后方是下载链接,若又一次将所有相片打包下载,点选右上角「Download Zip」就能将他们打包为压缩格式。

    点选照片还会开启「比较模式」,利用中线来预览、检视压缩前后的相片差异。

    值得一试的三个理由:

    免费图片压缩工具透过浏览器为 JPG、PNG 图片减肥、大幅降低容量 具备隐私及脱机使用特性,图片不会上传到第三方服务器 可调整画质、最大尺寸、档名后缀或转换为 WebP 格式

  • 万字干货!九大章节帮你掌握场景化设计思维

    UI交互 2022-09-21
    本文从《无界面交互》一书说起,总结了场景化设计思维的知识点,帮读者掌握场景化设计。

    编者按:本文从《无界面交互》一书说起,总结了场景化设计思维的知识点,帮读者掌握 场景化设计 。

    用一个公式,从3个方面教你搞定场景化设计 之前我们讲了用户画像,让大家可以通过构建用户画像,去深入了解用户的行为、态度、痛点和需求。

    阅读文章 >

    一、从《无界面交互》开始 最近又翻了翻《无界面交互》这本书,不过与上次阅读却有了些不一样的反思与收获,这本书很多人应该都看过,起初看是因为以为里面有何新颖前瞻的交互方式与教程指南,不过之后却发现是紧扣副标题“潜移默化的 UX 设计方略”,尽管对标题和内容的匹配产生了失望,但还是被作者幽默风趣的写作风格与独到的思考方式所吸引了。

    这本书并没有讲述很多的交互观点,也没有展开说如何进行零界面的交互实践技巧,反倒是通过幽默风趣的表达阐述早期硅谷以应用软件为中心的需求解决现象,并且使得各种需求总是以软件->以手机->以屏幕->以界面来进行交互,而这些软件的快速发展也加剧了人们与手机屏幕的依赖性,以至于我们的身体也出现了一系列不良变化,尽管我们正在适应和习惯这些不良性,例如近视人口的比例与年龄层下降,而好的 UX 设计不该是基于界面的,所以 UX≠UI,应该是基于更加自然智能自动的服务或交互方式,作者认为最好的界面就是没有界面,我们面对未来的创新技术发展,应该试图摆脱对屏幕的依赖性,并且为此作者列举了多个例子来佐证,后文我会简单的介绍一些书中的例子,所以你不用因为好奇而马上跳离这个文章去搜索了。并且为此现象作者提出了三个原则;

    贴合日常生活流畅,而不是一味依靠屏幕;大意是贴合日常生活中的一般工作流程,避免与手机与屏幕有过多非必要的绑定,使得避免沉迷用户界面或者说手机。 做电脑的主人,而非仆人:科技的飞速发展还是不能很好的让电脑智能化,时不时还是会出错,例如蓝屏闪退等,各种条条框框的限制等,如密码限制。我们健忘、脆弱、繁忙,计算机应该更加智能的解决问题。 适应个体情况:大意是每个用户都是特别的,可以提供定制化的服务,不在只关心平均数据或盈利趋势,而且未来的计算应该更加主动,而不是被动的等待用户来图形界面操作。 大体上内容差不多就这些了吧,作者想以潜移默化的方式来引导 UX 思维方式,前面部分铺垫了不少生活现象,以让我们意识到感受到手机屏幕的负面影响,以及这种基于应用软件来解决需求的惯性思维的局限,当然啦,一方面有文化差异,另一方面设计行业发展日新月异,现在的优秀设计师也不会完全聚焦在用户界面上了吧,就像书中的结束语,也许未来的某天再次翻开时,已经觉得这本书无聊透顶,观点已经过时,就像我们现在已经深知 UX 不是 UI,也因此难免会被部分读者所吐槽。

    那么回到此时此刻,虽然不知道你是否有了新的思考或收获,我来聊聊我的一些思考吧。

    二、怎么看待零界面交互 我们通过感知与身边的事物发生着互动,而看见的信息往往是最丰富的最具体的,这也意味着屏幕或界面的概念会长存,即使全息影像技术随处可见,所以我们要意识到零界面交互是一种交互方式,一种交互理念,而不是说以后没有界面交互了,而且对于交互方式,基于语言系统的语音交互、脑电波控制交互、物理实体的人机交互等等,不就是没有界面的交互吗?对于零界面交互我认为有点儿奥卡姆剃刀原理的意思,能在其基础上找到更好的办法就不要复杂化,如无必要,勿增实体,并且合乎情理。智能的交互方式绝对不是多几块可交互的屏幕而已。

    三、UX 最本质的能力 零界面交互后,作为一名 UX 设计者,如果不在互联网行业里了,不搞应用软件了,也无需在用户界面上花心思了,那你还能做些什么?是否就要考虑转行送外卖摆小摊呢?

    当我想到这个问题的时候确实迟疑了,想到自己擅长或能够胜任的,且符合以上要求的话,可能就需要转型做技术咨询服务、视觉设计或是产品经理之类的,但之后我想了想又感觉不大对,为什么不能是 UX 设计师呢?我也与其他好友相续的探讨了下,UX 设计最本质的竞争力不该是线框图、界面交互或是视觉呈现,尽管在应用软件中,是重要的环节,但!最本质的能力不应该是解决问题的能力与方法吗?

    在得出这一结论前,我们会惯性的结合平时的工作内容与输出结果来匹配其他职能,结果反而忘了 UX 最本质的能力是什么,探讨时 UXRen 的宝珠用一个词描述道“模糊边界”,我瞬间清醒,可不就是吗?

    如此看来,我们应该庆幸 UX 工作使得我们获取了宝贵的问题解决能力与方法,正是因为有了这些东西,即使不做互联网了,也还是能成为 UX 设计师,就像书中所提倡的那样,不基于屏幕的思考,反而使得 UX 设计更加强大了。

    四、诸多的案例有何启示 案例其一

    早期福特汽车公司的 Escape 设计组想要创造出在自己独具特色的 SUV,他们观察到现实中的人们拎着或抱着重的东西走向后备箱时,并腾不出手来,只有脚可以动,并且可能因为东西太重并不想弯腰放下后,打开后备箱再弯腰抱起重的东西放进后备箱,即使通过应用软件,也要掏出手机,点一点再放回去,重新弯腰搬起重物,显然应用软件并不好使了。因此脚踢或横扫式的后备箱开启方式诞生了,他们在后备箱下的保险杠底部安装了一组传感器,只需要你踢一脚或拿脚扫一下,后备箱就开了,对于那些提着重物走向后备箱的人,很容易做到,也很符合后备箱的使用场景。

    案例其二

    夏天里,停在室外水泥地上的汽车经过一段时间后,太阳的炙烤会让车的内饰变得滚烫。NBC 报道称:“在美国,平均每年有超过 36 名儿童因车内温度过高而死亡。”

    而在这个背景下,日产聆风轿车推广了一款能让你车内温度变凉的手机软件,只需提前 15 分钟在手机应用上远程打开空调就可以,当你回到车内时就是凉爽的,但回到复杂的现实环境,当你投入的看电影、投入的聚餐时,你不一定还记得用手机远程打开空调这回事儿,回到车里时也许还是热气烘烘的。让我们回到一个互联网跟屏幕还不够普及的年代,1991 年,面对同样的问题,当时线上技术还很稚嫩,马自达汽车公司提供了一个更加自动化的可选功能,车顶配备太阳能供电,车内使用温度传感器监测,一旦温度超过一定阈值,传感器就会触发散热降温,很巧妙,很自然,尽管还不能克服极端的高温,时间快进到 2009 年,丰田汽车借鉴了马自达汽车这一经验,制造出了更好的制冷系统,这一功能很受欢,时至今日这个系统仍然可用。

    案例其三

    橄榄球运动在美国很受欢迎,但也很危险,至少我看来是硬核运动,这种运动时常发生的撞击会导致运动员患上慢性创伤性脑部病变,会引起记忆力减退、思维混乱、判断力减弱、冲击控制障碍、攻击性、抑郁症等症状。事实上在年轻的群体中,大学的橄榄球队员都渴望自己留下好印象,因此他们几乎不会上报自己的头部损伤,在一组 730 名大学生球员中展开的调查显示,他们的头部平均受到 27 次冲击后才会上报 1 次,为此疾病预防控制中心(CDC)研发了一款手机应用,在这个应用上,橄榄球运动员可以了解和挑选头盔更好的保护头部,以及如何察觉头部损伤的迹象,并在遭到脑震荡或其他头部损伤时,知道接下来该怎么做。

    但是围绕橄榄球比赛这个场景,柔性传感器制造商与运动品牌 Reebok(锐步)设计了一款智能帽子,Reebok Checklight,它是一款运动影响指示器,通过传感器持续的感应头部受到的任何冲击,并通过 LED 灯光进行信号反馈冲击的程度,就像信号灯那样,并且它能够很舒适的佩戴在头盔中,没有界面、没有菜单、没有选项卡导航或账号密码登陆,尽管他不能代替医疗诊断,但是可以作为额外的参考指标来帮助教练或他人做出判断与选择,无论是继续比赛还是立即就,以保障运动员的健康情况。

    事实上这些案例中,确实很精妙的利用技术解决的生活中的需求场景,并且没有使用以屏幕为交互的方式,也同时为用户提供了良好的体验不是吗?案例中描述了设计师是通过怎样的方案来解决了需求痛点,但,你有注意到是通过何种方式洞察到了这些设计理念吗?也许细心的你已经从前面的案例描述读出来答案,观察,这是一种解决问题的好办法,通过对场景对事物对用户行为的细心观察来找到问题的突破口,而这也是让我对潜移默化的 UX 设计方略有了新的思考的部分。

    五、场景化思考与观察的丰富启示 观察是设计思维的重要的一环,我们悉知的以人为本的设计流程便是以观察开始的,而观察与场景有着不可分离的渊源,我们观察用户、观察环境、观察事件等,这都是场景的一部分,我意识到场景化在任何时代任何设计过程中都有必要的价值,对于这一广泛且常常忽视的思维模式,我想以自己的视角来通俗的聊一聊。

    面对各种问题,有时候痛点显而易见,有时候根据经验也能够快速看出端倪,有时候就静静的细心观察就好啦,优秀的设计师拥有丰富的问题解决策略,以及各种工具辅助,能够尽快的分析找出问题来并设计出解决方案来推敲,但这不意味着每次面对需求都将进行用户分析、市场分析、数据分析、用户研究、构建画像、构建体验地图、套用设计原则、构建原型、可用性测试等等,这些只是解决问题的方法与工具,帮助我们更好的分析人物&场景&事件的关系,以找到问题根源或解决办法。

    平时的工作中,我们更多的是根据习惯与经验完成工作,并且面对各种问题的差异性以及时限要求,断然不会根据一套固定的设计策略或方法来输出,这不见得更合理更专业更高效,问问你自己,每次学了新的设计方法论或工具后你都会在后续的工作中用起来的吗?直到有一天这些方法论、设计模型、分析报告占据了你绝大部分的工作时间吗?我想不是每个项目都会给予设计者如此充裕的时间吧,同事会说,看啊,这个设计真笨,还在输出作证那点儿设计方案的分析材料,真磨唧。而通常老板也不会在意你是用了哪些方法,更在乎的是有没有解决好问题,有没有及时的解决,但是一定不会指责你没有使用用户画像、体验地图什么的,如果有人遇到过,那就是他的需求中期望看到这个。

    实际上当我们熟练掌握某些设计策略或工具的原理后,即使不写出来,通过观察与思考也会有结果,这种潜移默化的过程就像是数学公式的应用,当你通过观察获取到了够用的信息后,就能思考出解决的方向,有点儿像韦东奕在接受采访时说的“其实,我真正写的题并不多,“想”的题却很多,能想明白的题目我就不写了”。所以当有人问起你是如何解决的,你说是通过对场景的观察思考,绝不会有什么不妥或显得很 Low,但是你说一拍脑袋想的你试试,你看那程序员抽搐的嘴角是想干啥。就此我已经将大量的技法、设计论、工具隐匿起来了,但是场景的概念依旧不可缺失,不难看出为什么说“场景化思考与观察有着丰富的设计启示”,也许你还没有意识到平时的设计工作中,会经常用到这一概念或思维方式,只是没有人给你提示,你还没有意识到这就是场景化的洞察或思考啊。

    六、简单有效的场景化思维 我跟一个设计朋友聊起了场景化这个话题,但是我发现对方似乎并没有认识到这个场景化是什么概念,并问我这个场景化是什么,我想了想说:“就是一种找到问题前因后果并有效解决的好办法,并不是游戏场景的概念”。于是又问我是怎样一回事儿,我反问道你们接到游戏活动需求后会怎么思考?对方说一般由活动详情与活动入口构成,例如一个夏日祭活动,是用作消费回馈的,会设计阶段化的消费任务与回馈奖励,刺激玩家进行消费获取超出平常的奖励,为了围绕夏日祭这个盛会主题,需要搭建一个包含游戏元素和盛会元素的场景来承载活动内容、说明、进度、领取按钮与信息,给用户带来夏日祭的活动氛围与内容卖点… 我说等等,这不就是场景化的思考吗?我们综合场景构成的多个因素,并观察思考围绕玩家展开的一系列关系变化与过程感受。

    1. 什么是场景

    这里的场景不是我们常以为的情景/情境或是某个事件的使用环境,近似场面的意思,场面是指戏剧、影视中由布景、音乐和登场人物组合成的景观,而场景就是某个人在某个时间某个地点因为某个目标在做某个些事,即人物、地点、时间、目标、行为,只是某个环境或情景的画面都不能称为场景,场景能够较好的反映出特定环境下人物实现目标的过程变化,因此不必纠结“场景”或是“场景化”一词,转而注意人物在对应环境下为目标做出了那些付出与反应,剩下的就是观察与思考如何帮助人物更舒服效率的完成目标即可;

    2. 什么是场景化

    场景化就是将信息不齐全的情景根据关键信息推导或收集完善成一个场景,其目的是因为我们需要特定环境观察或构思服务对象为了达成目标做出了哪些努力,然后我们为此洞察出能够帮助服务对象解决麻烦的方案,但有意思的是在场景化的过程中,有时候不一定非要苛刻的补齐场景的五个因素,就像前面讲的,通过观察人物行为也能够产生人物目标的收获,记住场景化的重点是观察或构思人物为了达成目标在特定环境下做出了哪些努力,基于不同的情况,有些次要因素我们可能不会太在意,例如我们在讨论手机电筒的使用场景时,我们就不会太在意时间因素,反而昏暗的环境与亮度更重要,所以场景化时要灵活一点,挖掘有价值的因素而不是凑齐所有因素,常见有以下几种情况:

    七、作用与价值体现 1. 场景化的视角代入作用

    场景化还有个作用就是让自己更融入,算是同理心的一个窍门。我们在具有复杂性的功能自测时,我们不会只是反复的在界面上进行交互,这样的往返操作容易迷失自己,甚至忘却了我在哪儿,我在干嘛,这种情况用设计心理学描述为“记忆失效性失误”,对此,我们的解决办法就是设定场景,我们会简单的代入一个用户视角,并给自己设定一个匹配功能模块的需求目标,使得整个场景看起来合乎情理,然后带有目标的进行功能测试走查,如果这个过程中那里走不通了,不好用了,那就意味着这里的设计有问题,当然了,如果你是功能 Bug 测试,那我建议你找测试工程师要一份测试用例好了。

    2. 场景化的痛点&需求洞察

    场景具有诸多变量,通过观察状态的变化,用户情绪与行为变化、以及实际场景中常见的干扰事件,都能为我们带来诸多的设计启示,我们可以利用起来,为用户提供更多的需求可能或是避免问题,就像车饰中的杯架,一开始汽车制造商们并不会觉得一个交通工具的驾驶室需要杯架,但是通过对真实场景下的观察与客户研究,不起眼的杯架竟然能为用户带来良好体验,以至于杯架会成为汽车内饰的广泛标配,这些巧妙的设计并不是设计师突然的灵感或浑然天成,这正是因为对场景的观察以洞察出的用户需求。

    场景化可以让我们找到问题在哪儿发生了,并且问题根源大概是什么,会有怎样解决启示,而不是因为数据或结果发现了问题,在有限的认知下就问题进行错误或肤浅的设计解决方案,还记得肥皂厂对空盒子过滤的案例吗?A 厂的设计师们发现了会有空的肥皂盒在流水线上,并且设计了高级的 X 光检测仪来改进生产线,但是 B 厂的设计师却根据观察找到了更好的解决方法“电风扇”,是的,B 厂直接通过电风扇将质量更轻盈的空盒子吹到了一旁,那么你是老板,出于成本与研发周期,你选择哪个方案呢?

    即使是线上场景也不例外,知道微信在直播场景时,收到的通讯消息已经采用了浮窗进行交互嘛?你也不想在看到精彩的时候却要关闭直播切换窗口去回复消息吧,这便是基于场景化的思考, 微信 为你提供了更多的直播观赏空间,而不会因为临时的消息回复使你不得不切换场景进行其他的的轻量化事件。

    这便是场景化的魅力,我们可以找到真实问题的根源,并且能够充分的理解人物与环境与事件的关系,有很多设计师能够很巧妙的解决问题,并不是因为直觉或天赋,实际上更多的是结合了场景化的思维与洞察,而这并不困难,你也可以。

    3. 场景化的以用户为中心

    在某个场景中,使用你产品的是谁?他们有什么特征,场景为他们带来怎样的感受,他们会面临怎样的问题或需求?这都是场景化中以用户为中心的表现,我们很清楚产品的使用者是谁,购买者是谁,我们采用场景化去打磨产品并不是让产品在场景下显得更加美观,而是让用户拥有更好的体验,其次才是美观,而作为设计师就不能以自己独到的设计理念来完全代替用户了。

    事实上几乎没有一款产品是面向全人类的,出于人文差异、社会特征、个体特征、使用门槛等,做不到如此强大的兼容能力,过分兼容往往也会使得产品有缺陷或不伦不类,考虑的产品的功能作用以及商业价值,企业都会锚定一些具有某些特征或对应需求的用户群体,这样才更有机会成功,而不是迎合所有人,并且有时候还要进一步的区分用户与特征,例如使用者可能是一只猫一只狗,但是购买者往往是养宠物的人,这个时候还要顾及购买者的偏好,而不只是局限的观察场景下的使用者如何与产品交互,场景下购买者的动机与目的也是重要的,而那些线上应用就更不用说了,同一批人可能有不同的使用场景,同一场景下的用户可能会有不同的特征,识别他们的共性与差异性是以用户为中心的重要工作,为此我们可能还需要对场景下的用户进行分层,甚至允许定制化。

    除了以上说的用户群体与特征,人文差异也是场景化下值得关注的问题,需求往往是来源部分用户群体,迎合他们的人文特征可以更好的促进用户使用和购买的欲望,在产品出海设计的过程中,人文差异往往是极其重要的,因为使用场景从国内变成了国外,如果不密切关注场景下的人文变化,出海则基本会以失败告终,例如我们传统的驾驶位在左边,而部分国外的是在右边;我们很多人爱吃的烤猪蹄,在印度却不受欢迎;我们大多人阅读是从左到右,而部分国外却是从右到左。一旦场景发生了变化,我们就应该密切关注人文是否要做更新的思考。

    4. 综合性的思考方式

    此前已经解释了,场景不是单一的情景,并且存在各种变数,甚至都不是静态的,我们使用场景化思考时,一定不会局限在产品本身的流程或交互上的,也不是某个或多个人物上的,所以在场景下观察时,注意力不该在单一的对象上,而应该覆盖场景化的多个重要因素上。并且场景会给出用途和一些对应关系的特性,像我们提到某个需求时,研发的同学会问是那个场景,其实就是想要了解这个场景在哪里触发,场景下的用途是什么,用户与目标是什么,关联了那些技术栈等等。如果我们在观察某个场景时,出现了意外或小插曲,作为设计师就应该警觉起来,而不是认为只是意外,不会再发生,毕竟古人云“无独有偶”。所以当你奉行场景化观察或是思考时,就不会过于局限,反而会具有综合性的思考过程,这能让结果更加可靠和易于理解。

    八、开展场景化思维的窍门 1. 贴近现实

    几乎出现的所有问题都是有根源,有场景的,我们拿到需求却还是要分析需求,其目的就是找到根源,而不至于在虚假的问题或需求上窘迫的发力,而最终得到一个跛脚的结果,问题的根源常常是无比真实和深刻的,而我们结合场景化思考时,就应当贴近现实,而不要简易的虚构一个不真实的场景去匹配和思考问题,这个过程中要尽可能的追寻真实的环境,匹配的角色,更实际的问题,这个时候我们眼里的场景才有效,而不是做戏或是走个形式,并且最终你的解决方案是要搬进现实的啊,并不是以实验室的结果来定义真实的场景发生的事物,即使是模拟也是在模拟更加真实的场景不是吗?

    2. 顾及变量

    倒上一杯水,抓来一碟零食,关上了窗帘,窝在椅子上,一切刚刚好,我沉浸在女鬼桥这部鬼片的精彩桥段里,我屏住呼吸,高度紧张的注视着,心里预测着下一个镜头将要如何如何,哐当一声,吓得我直起身来,其实女鬼还没有出现,但是我的猫先出现碰倒了我身后的物件。

    场景化不再是理想派了,意想不到事件正在场景中发生呢!

    对于场景化,几乎没有可能与我们预期的一致,场景下会有各种变量也应该有各种变量,把场景定格后应用是不对的,它应该像一个故事一样,有过程有发展变化,事件的发生、人物的行为、情绪的变化、环境的变化都是场景变量的一部分,越是忽略这些变量,越是会出现更多问题,因为这些变量会直接影响用户的行为决策与结果。 交互设计 师做特殊场景状态(常见有设备兼容、异常操作、网络问题,非常规操作等)的兼容与防错,不就是很好的体现吗!拆分出更多的意外场景迎合做出兼容方案反而会多出一些细微的体验差异,例如华为手机的消息通知会有自动收起内容的情况,其启示来自于真实的环境下,背后会有其他人窥探到你的个人信息。

    于此同时我们也应该清楚自身产品的局限性,我们做不到能应对各种突发事件的程度,所以设计出适当的约束来避免问题也是蛮重要的,大抵我下次在家看鬼片会先把猫关起来吧。

    3. 情感化

    场景化、情感化似乎在现在的设计中经常被提及,如果把场景化比作一面灰色的墙,那么在墙上绘制多彩的小花,人物也露出愉悦的情绪,这些便是情感化的色彩,情感化传递的是一种情感价值和温度,在产品使用的场景中,我们可以结合特定的时刻来打造情感化设计,可以是通过氛围传递情绪,例如新年,产品视觉焕然一新,年味十足。又或是触发回忆,帮助用户想起那些有价值有温度的回忆画面,总之在适当的场景引起用户共鸣是一件很有温度的体验设计,哪怕只是在南京大屠杀的公祭日将线上产品的彩色斑斓抹去,也能感受的产品的情感关怀与社会价值观,总之识别出有意义的时刻,不论是节日盛典、解锁成就还是目标达成,我们都可以通过具有仪式感或视觉氛围的设计方式传递情感,让用户感受到产品设计的用心与别致的体验,这也是场景化中的环境与时间因素的识别与运用。

    但值得注意的是,情感化不单单是符合特殊时刻或环境的打造,只是说就让用户觉得好看或就该这样有时还不够,情感化更多的是期望与用户情绪建立共鸣,引起用户反思,试想一部电影,为什么有的人看哭了,有的人没有反应呢?很大一部分原因就是看哭的人更投入,剧情经过了用户的反思与共鸣,从而调动了情绪才鼻酸落泪。

    4. 常规性

    常规性是一个很重要的部分,它包揽了以上多个部分,常规的情景、常规的流程、常规的客户、常规的问题、常规的信息、常规的操作、常规的行为习惯、常规的难度、常规的文化差异、常规的认知等,常规意味着产品符合大多数客户群体的认知、习惯与使用情景,这能够大大提升易用性和兼容性,当设计无法接近用户认知就会变得难以理解和使用,随之门槛变高,而设计者不一定是产品的常规使用者,而常规性不仅能够使得场景化更加贴近现实,也抑制着以设计师为中心的弊端,最终保障设计模型与用户认知模型能够靠拢。

    但过分的常规性也会成为创新的绊脚石,不论是渐进式创新还是颠覆式创新,依旧会保留一定的常规性,例如常规的地域文化、常规的理解认知、常规的信息维度等,但也肯定有不常规的地方,那便是它独特创新的部分,这意味着我们需要找对创新的场景,创新的部分,以及创新内容的本质与规则,要知道打破规则是一种创新是一种变革,但是前提是你得清楚规则的本质是什么,胡乱一通的创新往往达不到更好的效果,容易忽视其他变量与常规性。

    这让我想起来《设计心理学 3》中,唐纳德提及的指环王中创新的语种里的两个词语,一个是金属另一个是雪花,尽管这个语种里的两个单词看起来是如此的陌生,但是大多数外国人还是能够猜对那个是金属那个是雪花,因为金属的单词中包含了两个爆破音,更具有重金属的味道,而雪花的单词则具备斯斯的发音,显得更加轻盈,这源于人们对现实生活场景的理解与认知作用,这也是常规性。

    九、结语 通过《无界面交互》,看见了应用软件的发展简史,看见了软件对生活服务的影响力。还真就是那句话,“当我们习惯使用软件后就需要更多更多的应用软件”,随之利弊也变得更加清晰可见,人们生活方式与行为习惯也对应发生着转变,变得是数字化的服务方式,不变的还是各个场景下的需求与优化创新,就像我上一篇关于用户行为与触发式引导的文章中描述的那样,应用程序提供的是完成需求的功能,这意味着行为方式或成本的变化,但是本质不变。

    虽然书中作者批判了屏幕的种种罪恶,但是现阶段发展离不开电子屏幕的存在,或许这就是发展进步中不可避免的一些矛盾与牺牲吧,谁知道作者现在有没有躺着椅子上用手机刷 TikTok 呢?不过作者唾弃的以应用软件来应对各种需求服务的方式,倒是认可的,应用程序解决需求不是一劳永逸的办法,创意创新也不止于界面,最终还是要回归场景与需求的探索,朴实无华的点子依旧受欢迎。

    而聚焦生活服务类的场景与需求,我认为物联网与人工智能反而是以后更好的解决方案,我在之前的一篇关于物联网交互创新探索的文章中也有归纳过物联网的特征趋势(注: 有兴趣可以在往期文章中找到,有图解不枯燥,值得一看),即自动化、智能化、云计算、傻瓜式、联动性、可视化,我认为这些特征都能很好的满足无界面交互中潜移默化的 UX 设计理念,而作为这些生活服务类的 UX 设计师,了解和熟悉物联网技术也显得尤为重要。

    未来物联网交互会有哪些创新?来看这篇6000+的干货! ? 背景 伴随网络条件的提升与智能化科技的发展,我们身边正在发生着天翻地覆的变化,以国内华为、阿里、百度、腾讯、JD 等科技公司运用 5G、AI、物联网、大数据、云计算等新型技术改变着我们的生活场景,这使得我们不论是生活、学习还是办公都更加智能化、高效化、可视化、数字化,也

    阅读文章 >

    最后,打工人!一起加油!

  • 用80张案例,帮你掌握20种渐变色表现形式!

    UI交互 2022-09-21
    色彩中的渐变色是我们经常需要用到的一种设计形式,本文为大家总结了渐变色在版式设计中的 20 种表现形式,良心干货~

    hi,我是鱼先生,终身学习践行者。

    作为设计师,色彩中的渐变色是我们经常需要用到的一种设计形式,今天鱼先生为大家总结了 渐变色 在 版式设计 中的 20 种表现形式,良心干货~

    ok,开始吧!

    渐变波点怎么做?我为你总结了 3 种超快方法(附原理解析) 大家好我是和你们聊设计的花生~ 渐变波点是设计中常用的一种装饰元素,和各种风格的适配性很强。

    阅读文章 >

    一、机械渐变 机械的意思就是不用过多的调节,直接利用软件里面自带的渐变模式,比如线性渐变,径向渐变,菱形渐变。

    再来看几个实际例子:

    使用软件中的线性渐变

    黑白色调下,突然出现一块色彩渐变,不仅起到了吸睛的效果,同时则增加了记忆点

    渐变色加上干净的文字排版,视觉上简单、美观

    背景加了一层淡淡的渐变(径向),刚好可以更好的突出主体(没错,就是那只骄傲的白鸡)

    利用不同水果本身的色彩,来区分同类产品不同的口味

    再看一组包装案例:

    上 3 张来自 Lan Anh Ng-Ho Chi Minh City, Vietnam

    二、网格渐变 利用 Ai(Illustrator)软件里面的网格填充工具。

    我们用网格工具先尝试绘制几个背景,如下图:

    展示一下工具(Ai),如下图所示:

    网格建立节点之后,每个节点都可以单一填充颜色,也可以随意变形处理,从而得到你想要的渐变形态。

    Ok,技能学完了,顺便排个版式耍一下,完成后如下图:

    也可以尝试加入噪点,给画面增加点质感,下图噪点我是在 PS 里面添加的,操作执行:滤镜→杂色→添加杂色→调整参数

    调整后,如下图:

    以上所演示只是网格工具的一种类型,大家可以多尝试,小技巧也有大作为。

    比如,我们利用这个技巧再尝试两张:

    大家可以看下利用网格绘制的节点图:

    没有做很复杂的节点,如上图所示,你也可以很快做出类似的渐变图形。

    三、混合渐变 混合渐变指的是利用 AI(Illustrator)软件中的混合工具来操作。

    为了让大家理解清楚,我们先来尝试一个很明显的混合案例:

    大家可以清晰地看到,蓝色圆形到黄色圆形再到浅蓝色圆形,我就是运用了混合模式

    混合的步数越少,层次感越明显,如上图案例。混合步数越多,图形会越细腻,如下图案例。

    色块的混合渐变形式

    鱼提示:技巧很容易就学会,但想要熟练应用到实战中,还需多多举一反三才是。

    OK,继续下一个!

    四、弥散渐变

    上面是一个字母灯效果,我们可以看到光向四周散射,边缘越来越模糊,最终消失,这种灯光渐渐消失的效果,就可以理解为弥散光效果。

    弥散渐变效果在设计中的表现形式就是通过模糊处理,形成虚实结合的形式,具备很强的融合性。

    一起来看几张案例,加深理解:

    我们尝试做一张,如下图:

    为了大家更好的理解,上面案例我利用了虚实对比,我们看到下面的弥散效果,就是通过上面的圆球加了模糊效果而获得。

    是不是很容易就学会了?别着急去练习,还有好多干货呢!继续

    五、模糊渐变 模糊渐变,就是利用各种模糊工具来调整,刚才我们讲过的弥散渐变,也是模糊形式。

    模糊渐变比较好理解,我们直接看几张案例。

    故意给背景或元素制造模糊,形成前后关系的虚实对比,增加空间延伸感,进而更好的烘托内容

    包装中的应用

    海报设计展示

    书籍封面展示

    六、发射渐变 发射是平面构成的一种表现形式,在色彩渐变中同样可以使用。

    看几张案例,加深理解:

    玻璃折射的发射效果

    右图:以苹果标志为主体,制造逆光效果,再通过色彩的补充,增加视觉冲击力

    镭射光的效果,从中心向四周发射

    以左下角为点向右上方发射,每个色块加入渐变色,增加视觉感

    七、酸性渐变 酸性设计并不是我们所谓的味觉的酸,而是一种迷幻风格、嬉皮士风格的设计形式,酸性设计中充满着色彩的流动、音乐的律动感,让人看了还想看。

    来欣赏几张作品:

    酸性设计,看起来太爽了,会停不下来的…

    ok,继续往下讲。

    八、肌理渐变 肌理具备质感,大自然中自然形成的肌理很多,并且本身就具备美感,再与渐变色进行碰撞后,相当于给质感披上一层色彩的外衣。

    表现形式可以是,在肌理中添加渐变或者在渐变中添加肌理,你中有我,我中有你的形态。

    上两张作者:Izvorka Juric02;类似于迷彩的肌理渐变

    大笔刷肌理形式

    九、流体渐变 流理解为流动的意思,看上去像水流的感觉,相对于机械渐变,多了一些层次感和艺术感。

    看些案例,加深理解:

    左:字体的流动效果,像瀑布又像融化了

    在红酒瓶贴设计的使用

    以上 3 张作者:Juliana Cappelatti-Brazil03;化妆品的使用

    十、立体渐变 平面视觉中用立体的形式来表现主体物或某个元素,可以很好的增加空间感和视觉冲击力。

    2.5D 效果,用 Ai(Illustrator)软件的 3D 工具就可以实现

    鱼提示:以上几张案例在 Ai 软件中都比较简单,如果大家想要教程,留言给我,需求多,我就出教程给大家。

    鱼先生说:

    立体效果本身具备空间优势,立体效果中的渐变不仅可以体现明暗层次,也可以直接作为色彩的表现,增加视觉冲击力。

    十一、分割渐变 渐变中有分割或者分割中有渐变,其作用不仅可以增加视觉冲击力,同时可以形成一种错位的即视感,让画面充满趣味性和层次感。

    比如下面两张案例:

    线性分割,增加层次

    右:圆形分割,右图:人物分割

    右边的人物分割形式很常见,很多人也觉得比较难实现,实际上超级简单。

    鱼先生给大家演示一下过程,如下图:

    OK,背景完成了,我们顺便排个版,完成后如下图:

    十二、自然渐变 大自然有其本身的颜色,非常的自然漂亮,在光的映射下会发生不同层次的色彩,我很喜欢大自然原本的形态以及色彩。

    比如常见的蓝天、森林、海面:

    蓝天、树木、晚霞

    天空与海,这种摄影图片在设计中运用的时候,后期肯定是需要调色的

    形状与自然的结合,别有一番滋味

    十三、蒙层渐变 意思是指在画面上覆盖一层色彩渐变,然后采用透明度或叠加模式进行相互融合,从而让画面色调产生统一的效果。

    比如以下案例:

    顶部的硝烟战争画面和下部的人物,都是采用了这样的表现形式,在设计画面表现好之后,再利用色彩渐变的叠加,形成如上图案例的效果

    再来看几张案例:

    上面两张使用的就是蒙层的效果,但并没有使用明显的渐变蒙层,可以理解为单色蒙层

    左边的画面中,整体色调为蓝色,女主的衣服是紫红色,这就起到了吸睛(画龙点睛)的效果。

    右边画面中,一个女人在海边跳舞,整体画面昏暗、偏蓝,感觉看上去就很孤独,这是画面给我的第一感觉。

    这就是设计中的气氛烘托,而大面积的色彩使用,是气氛烘托的重要表现形式。

    这两张就是蒙层渐变的形式,画面多了一些变化和延伸感

    十四、渐隐渐变 渐隐的形式,可以利用透明度的调整或者利用融入背景的方式,都可以起到渐渐消失的效果。

    其目的性就是让它产生消失感,形成延伸的视觉感和空间感。

    如下图:

    利用透明度,向内渐隐形式

    融入背景式渐隐形式

    透明或融入背景式渐隐形式

    鱼先生说:

    融入背景的方式在技法上,可以使用透明度的模式,也可以利用填充背景一样的颜色,都可以达到融入背景的渐隐形式。

    十五、重叠渐变 重叠渐变是有规则或无规则的排列重叠,也可以是多层颜色之间的相互叠加,可以利用降低透明度或叠加模糊进行表现。

    一起来看些案例,加深理解:

    左:图形叠加 右:字体叠加

    左:混合式重叠 右:色块渐隐式重叠

    十六、光影渐变 有光才有色彩,没有光我们只能看到一片漆黑,所以这个时候我们首先要感恩太阳。

    感恩完毕,继续学习。

    只要有光的照射,一定会产生层次变化,就会形成从强到弱、从实到虚的光影渐变。 会画画的同学都画过球体:

    球体存在高光、反光、明暗交界线等,如果在不同的环境内,还会有环境光,环境光在有色彩的环境下会更加明显。

    因为存在了这么多层次,我们才能够在平面纸张上面绘制出立体感。

    运用到案例中也是如此,不同的元素就像一个个不同形状的几何体,只要有光,就会产生层次变化。

    一起来看几张案例,加深理解:

    左:模仿窗户光照射进来的形态 右:手电筒照射,由实到虚的变化,背景也做了相应的协调

    人工打光的效果,字体也填充了渐变色彩,这种类型的海报设计不需要创意,重点在于摄影图片的处理,和文字排版的细节处理

    十七、晕染渐变 晕染渐变和流体渐变和弥散渐变有一定的形似之处。

    常见的有服装中的晕染,或者毛笔滴墨在纸上晕开的效果,或者化妆时候的晕染效果。

    晕染就是一种形式,可以应用的范围很广,咱们还是回到设计专业上。

    一起来看些案例:

    把字体作为符号,利用晕染的表现形式,增加美感和趣味性

    彩妆晕染的效果

    大面积晕染形式在设计中被频繁使用,不仅可以形成一种朦胧的美感,还会让人产生遐想的感觉

    OK, 以上讲了 17 中渐变应用形式,最后咱们凑个整数,再来讲一下点线面的渐变应用,刚好满 20。

    点线面是平面设计的构成元素,设计师一直在与之打交道,点可以组成线和面,利用点线面本身加以渐变的形式,可以更好的把控画面设计的风格以及特点。

    十八、点状渐变 点给人的感觉就是强调、独特。

    渐变小球,运用前后关系,虚实关系,制造空间感

    整体看是一个一个的圆点,单独看一个圆点,也可以是一个面

    十九、线状渐变 线的感觉给人分割、锋利的感觉,我们在设计中可以根据不同的需要排列应用。看些案例,加深理解:

    我们快速尝试两张案例试下:

    二十、面状渐变 面给人的感觉就是冲击力,大面积渐变色起到了烘托气氛的作用,比如红色热情积极,蓝色稳重冷静,粉色浪漫可爱等。

    我们看几组案例,加深理解:

    注:本文案例部分为鱼先生设计,部分来自网络,所有案例仅为辅助说明知识点,不作商用。

    写在最后: 作为设计师,不仅要多看,看了还要多应用实践,这样才能把别人的能力变成你自己的能力。

    由于最近太忙了,本篇教程陆续利用空闲时间编辑了好几天,希望对大家有帮助。最后,感恩大家一直的陪伴和喜欢!

    下期见!

    欢迎关注作者 微信 公众号:「摆渡鱼生」

  • 万字干货!九大章节帮你掌握场景化设计思维

    UI交互 2022-09-21
    本文从《无界面交互》一书说起,总结了场景化设计思维的知识点,帮读者掌握场景化设计。

    编者按:本文从《无界面交互》一书说起,总结了场景化设计思维的知识点,帮读者掌握 场景化设计 。

    用一个公式,从3个方面教你搞定场景化设计 之前我们讲了用户画像,让大家可以通过构建用户画像,去深入了解用户的行为、态度、痛点和需求。

    阅读文章 >

    一、从《无界面交互》开始 最近又翻了翻《无界面交互》这本书,不过与上次阅读却有了些不一样的反思与收获,这本书很多人应该都看过,起初看是因为以为里面有何新颖前瞻的交互方式与教程指南,不过之后却发现是紧扣副标题“潜移默化的 UX 设计方略”,尽管对标题和内容的匹配产生了失望,但还是被作者幽默风趣的写作风格与独到的思考方式所吸引了。

    这本书并没有讲述很多的交互观点,也没有展开说如何进行零界面的交互实践技巧,反倒是通过幽默风趣的表达阐述早期硅谷以应用软件为中心的需求解决现象,并且使得各种需求总是以软件->以手机->以屏幕->以界面来进行交互,而这些软件的快速发展也加剧了人们与手机屏幕的依赖性,以至于我们的身体也出现了一系列不良变化,尽管我们正在适应和习惯这些不良性,例如近视人口的比例与年龄层下降,而好的 UX 设计不该是基于界面的,所以 UX≠UI,应该是基于更加自然智能自动的服务或交互方式,作者认为最好的界面就是没有界面,我们面对未来的创新技术发展,应该试图摆脱对屏幕的依赖性,并且为此作者列举了多个例子来佐证,后文我会简单的介绍一些书中的例子,所以你不用因为好奇而马上跳离这个文章去搜索了。并且为此现象作者提出了三个原则;

    贴合日常生活流畅,而不是一味依靠屏幕;大意是贴合日常生活中的一般工作流程,避免与手机与屏幕有过多非必要的绑定,使得避免沉迷用户界面或者说手机。 做电脑的主人,而非仆人:科技的飞速发展还是不能很好的让电脑智能化,时不时还是会出错,例如蓝屏闪退等,各种条条框框的限制等,如密码限制。我们健忘、脆弱、繁忙,计算机应该更加智能的解决问题。 适应个体情况:大意是每个用户都是特别的,可以提供定制化的服务,不在只关心平均数据或盈利趋势,而且未来的计算应该更加主动,而不是被动的等待用户来图形界面操作。 大体上内容差不多就这些了吧,作者想以潜移默化的方式来引导 UX 思维方式,前面部分铺垫了不少生活现象,以让我们意识到感受到手机屏幕的负面影响,以及这种基于应用软件来解决需求的惯性思维的局限,当然啦,一方面有文化差异,另一方面设计行业发展日新月异,现在的优秀设计师也不会完全聚焦在用户界面上了吧,就像书中的结束语,也许未来的某天再次翻开时,已经觉得这本书无聊透顶,观点已经过时,就像我们现在已经深知 UX 不是 UI,也因此难免会被部分读者所吐槽。

    那么回到此时此刻,虽然不知道你是否有了新的思考或收获,我来聊聊我的一些思考吧。

    二、怎么看待零界面交互 我们通过感知与身边的事物发生着互动,而看见的信息往往是最丰富的最具体的,这也意味着屏幕或界面的概念会长存,即使全息影像技术随处可见,所以我们要意识到零界面交互是一种交互方式,一种交互理念,而不是说以后没有界面交互了,而且对于交互方式,基于语言系统的语音交互、脑电波控制交互、物理实体的人机交互等等,不就是没有界面的交互吗?对于零界面交互我认为有点儿奥卡姆剃刀原理的意思,能在其基础上找到更好的办法就不要复杂化,如无必要,勿增实体,并且合乎情理。智能的交互方式绝对不是多几块可交互的屏幕而已。

    三、UX 最本质的能力 零界面交互后,作为一名 UX 设计者,如果不在互联网行业里了,不搞应用软件了,也无需在用户界面上花心思了,那你还能做些什么?是否就要考虑转行送外卖摆小摊呢?

    当我想到这个问题的时候确实迟疑了,想到自己擅长或能够胜任的,且符合以上要求的话,可能就需要转型做技术咨询服务、视觉设计或是产品经理之类的,但之后我想了想又感觉不大对,为什么不能是 UX 设计师呢?我也与其他好友相续的探讨了下,UX 设计最本质的竞争力不该是线框图、界面交互或是视觉呈现,尽管在应用软件中,是重要的环节,但!最本质的能力不应该是解决问题的能力与方法吗?

    在得出这一结论前,我们会惯性的结合平时的工作内容与输出结果来匹配其他职能,结果反而忘了 UX 最本质的能力是什么,探讨时 UXRen 的宝珠用一个词描述道“模糊边界”,我瞬间清醒,可不就是吗?

    如此看来,我们应该庆幸 UX 工作使得我们获取了宝贵的问题解决能力与方法,正是因为有了这些东西,即使不做互联网了,也还是能成为 UX 设计师,就像书中所提倡的那样,不基于屏幕的思考,反而使得 UX 设计更加强大了。

    四、诸多的案例有何启示 案例其一

    早期福特汽车公司的 Escape 设计组想要创造出在自己独具特色的 SUV,他们观察到现实中的人们拎着或抱着重的东西走向后备箱时,并腾不出手来,只有脚可以动,并且可能因为东西太重并不想弯腰放下后,打开后备箱再弯腰抱起重的东西放进后备箱,即使通过应用软件,也要掏出手机,点一点再放回去,重新弯腰搬起重物,显然应用软件并不好使了。因此脚踢或横扫式的后备箱开启方式诞生了,他们在后备箱下的保险杠底部安装了一组传感器,只需要你踢一脚或拿脚扫一下,后备箱就开了,对于那些提着重物走向后备箱的人,很容易做到,也很符合后备箱的使用场景。

    案例其二

    夏天里,停在室外水泥地上的汽车经过一段时间后,太阳的炙烤会让车的内饰变得滚烫。NBC 报道称:“在美国,平均每年有超过 36 名儿童因车内温度过高而死亡。”

    而在这个背景下,日产聆风轿车推广了一款能让你车内温度变凉的手机软件,只需提前 15 分钟在手机应用上远程打开空调就可以,当你回到车内时就是凉爽的,但回到复杂的现实环境,当你投入的看电影、投入的聚餐时,你不一定还记得用手机远程打开空调这回事儿,回到车里时也许还是热气烘烘的。让我们回到一个互联网跟屏幕还不够普及的年代,1991 年,面对同样的问题,当时线上技术还很稚嫩,马自达汽车公司提供了一个更加自动化的可选功能,车顶配备太阳能供电,车内使用温度传感器监测,一旦温度超过一定阈值,传感器就会触发散热降温,很巧妙,很自然,尽管还不能克服极端的高温,时间快进到 2009 年,丰田汽车借鉴了马自达汽车这一经验,制造出了更好的制冷系统,这一功能很受欢,时至今日这个系统仍然可用。

    案例其三

    橄榄球运动在美国很受欢迎,但也很危险,至少我看来是硬核运动,这种运动时常发生的撞击会导致运动员患上慢性创伤性脑部病变,会引起记忆力减退、思维混乱、判断力减弱、冲击控制障碍、攻击性、抑郁症等症状。事实上在年轻的群体中,大学的橄榄球队员都渴望自己留下好印象,因此他们几乎不会上报自己的头部损伤,在一组 730 名大学生球员中展开的调查显示,他们的头部平均受到 27 次冲击后才会上报 1 次,为此疾病预防控制中心(CDC)研发了一款手机应用,在这个应用上,橄榄球运动员可以了解和挑选头盔更好的保护头部,以及如何察觉头部损伤的迹象,并在遭到脑震荡或其他头部损伤时,知道接下来该怎么做。

    但是围绕橄榄球比赛这个场景,柔性传感器制造商与运动品牌 Reebok(锐步)设计了一款智能帽子,Reebok Checklight,它是一款运动影响指示器,通过传感器持续的感应头部受到的任何冲击,并通过 LED 灯光进行信号反馈冲击的程度,就像信号灯那样,并且它能够很舒适的佩戴在头盔中,没有界面、没有菜单、没有选项卡导航或账号密码登陆,尽管他不能代替医疗诊断,但是可以作为额外的参考指标来帮助教练或他人做出判断与选择,无论是继续比赛还是立即就,以保障运动员的健康情况。

    事实上这些案例中,确实很精妙的利用技术解决的生活中的需求场景,并且没有使用以屏幕为交互的方式,也同时为用户提供了良好的体验不是吗?案例中描述了设计师是通过怎样的方案来解决了需求痛点,但,你有注意到是通过何种方式洞察到了这些设计理念吗?也许细心的你已经从前面的案例描述读出来答案,观察,这是一种解决问题的好办法,通过对场景对事物对用户行为的细心观察来找到问题的突破口,而这也是让我对潜移默化的 UX 设计方略有了新的思考的部分。

    五、场景化思考与观察的丰富启示 观察是设计思维的重要的一环,我们悉知的以人为本的设计流程便是以观察开始的,而观察与场景有着不可分离的渊源,我们观察用户、观察环境、观察事件等,这都是场景的一部分,我意识到场景化在任何时代任何设计过程中都有必要的价值,对于这一广泛且常常忽视的思维模式,我想以自己的视角来通俗的聊一聊。

    面对各种问题,有时候痛点显而易见,有时候根据经验也能够快速看出端倪,有时候就静静的细心观察就好啦,优秀的设计师拥有丰富的问题解决策略,以及各种工具辅助,能够尽快的分析找出问题来并设计出解决方案来推敲,但这不意味着每次面对需求都将进行用户分析、市场分析、数据分析、用户研究、构建画像、构建体验地图、套用设计原则、构建原型、可用性测试等等,这些只是解决问题的方法与工具,帮助我们更好的分析人物&场景&事件的关系,以找到问题根源或解决办法。

    平时的工作中,我们更多的是根据习惯与经验完成工作,并且面对各种问题的差异性以及时限要求,断然不会根据一套固定的设计策略或方法来输出,这不见得更合理更专业更高效,问问你自己,每次学了新的设计方法论或工具后你都会在后续的工作中用起来的吗?直到有一天这些方法论、设计模型、分析报告占据了你绝大部分的工作时间吗?我想不是每个项目都会给予设计者如此充裕的时间吧,同事会说,看啊,这个设计真笨,还在输出作证那点儿设计方案的分析材料,真磨唧。而通常老板也不会在意你是用了哪些方法,更在乎的是有没有解决好问题,有没有及时的解决,但是一定不会指责你没有使用用户画像、体验地图什么的,如果有人遇到过,那就是他的需求中期望看到这个。

    实际上当我们熟练掌握某些设计策略或工具的原理后,即使不写出来,通过观察与思考也会有结果,这种潜移默化的过程就像是数学公式的应用,当你通过观察获取到了够用的信息后,就能思考出解决的方向,有点儿像韦东奕在接受采访时说的“其实,我真正写的题并不多,“想”的题却很多,能想明白的题目我就不写了”。所以当有人问起你是如何解决的,你说是通过对场景的观察思考,绝不会有什么不妥或显得很 Low,但是你说一拍脑袋想的你试试,你看那程序员抽搐的嘴角是想干啥。就此我已经将大量的技法、设计论、工具隐匿起来了,但是场景的概念依旧不可缺失,不难看出为什么说“场景化思考与观察有着丰富的设计启示”,也许你还没有意识到平时的设计工作中,会经常用到这一概念或思维方式,只是没有人给你提示,你还没有意识到这就是场景化的洞察或思考啊。

    六、简单有效的场景化思维 我跟一个设计朋友聊起了场景化这个话题,但是我发现对方似乎并没有认识到这个场景化是什么概念,并问我这个场景化是什么,我想了想说:“就是一种找到问题前因后果并有效解决的好办法,并不是游戏场景的概念”。于是又问我是怎样一回事儿,我反问道你们接到游戏活动需求后会怎么思考?对方说一般由活动详情与活动入口构成,例如一个夏日祭活动,是用作消费回馈的,会设计阶段化的消费任务与回馈奖励,刺激玩家进行消费获取超出平常的奖励,为了围绕夏日祭这个盛会主题,需要搭建一个包含游戏元素和盛会元素的场景来承载活动内容、说明、进度、领取按钮与信息,给用户带来夏日祭的活动氛围与内容卖点… 我说等等,这不就是场景化的思考吗?我们综合场景构成的多个因素,并观察思考围绕玩家展开的一系列关系变化与过程感受。

    1. 什么是场景

    这里的场景不是我们常以为的情景/情境或是某个事件的使用环境,近似场面的意思,场面是指戏剧、影视中由布景、音乐和登场人物组合成的景观,而场景就是某个人在某个时间某个地点因为某个目标在做某个些事,即人物、地点、时间、目标、行为,只是某个环境或情景的画面都不能称为场景,场景能够较好的反映出特定环境下人物实现目标的过程变化,因此不必纠结“场景”或是“场景化”一词,转而注意人物在对应环境下为目标做出了那些付出与反应,剩下的就是观察与思考如何帮助人物更舒服效率的完成目标即可;

    2. 什么是场景化

    场景化就是将信息不齐全的情景根据关键信息推导或收集完善成一个场景,其目的是因为我们需要特定环境观察或构思服务对象为了达成目标做出了哪些努力,然后我们为此洞察出能够帮助服务对象解决麻烦的方案,但有意思的是在场景化的过程中,有时候不一定非要苛刻的补齐场景的五个因素,就像前面讲的,通过观察人物行为也能够产生人物目标的收获,记住场景化的重点是观察或构思人物为了达成目标在特定环境下做出了哪些努力,基于不同的情况,有些次要因素我们可能不会太在意,例如我们在讨论手机电筒的使用场景时,我们就不会太在意时间因素,反而昏暗的环境与亮度更重要,所以场景化时要灵活一点,挖掘有价值的因素而不是凑齐所有因素,常见有以下几种情况:

    七、作用与价值体现 1. 场景化的视角代入作用

    场景化还有个作用就是让自己更融入,算是同理心的一个窍门。我们在具有复杂性的功能自测时,我们不会只是反复的在界面上进行交互,这样的往返操作容易迷失自己,甚至忘却了我在哪儿,我在干嘛,这种情况用设计心理学描述为“记忆失效性失误”,对此,我们的解决办法就是设定场景,我们会简单的代入一个用户视角,并给自己设定一个匹配功能模块的需求目标,使得整个场景看起来合乎情理,然后带有目标的进行功能测试走查,如果这个过程中那里走不通了,不好用了,那就意味着这里的设计有问题,当然了,如果你是功能 Bug 测试,那我建议你找测试工程师要一份测试用例好了。

    2. 场景化的痛点&需求洞察

    场景具有诸多变量,通过观察状态的变化,用户情绪与行为变化、以及实际场景中常见的干扰事件,都能为我们带来诸多的设计启示,我们可以利用起来,为用户提供更多的需求可能或是避免问题,就像车饰中的杯架,一开始汽车制造商们并不会觉得一个交通工具的驾驶室需要杯架,但是通过对真实场景下的观察与客户研究,不起眼的杯架竟然能为用户带来良好体验,以至于杯架会成为汽车内饰的广泛标配,这些巧妙的设计并不是设计师突然的灵感或浑然天成,这正是因为对场景的观察以洞察出的用户需求。

    场景化可以让我们找到问题在哪儿发生了,并且问题根源大概是什么,会有怎样解决启示,而不是因为数据或结果发现了问题,在有限的认知下就问题进行错误或肤浅的设计解决方案,还记得肥皂厂对空盒子过滤的案例吗?A 厂的设计师们发现了会有空的肥皂盒在流水线上,并且设计了高级的 X 光检测仪来改进生产线,但是 B 厂的设计师却根据观察找到了更好的解决方法“电风扇”,是的,B 厂直接通过电风扇将质量更轻盈的空盒子吹到了一旁,那么你是老板,出于成本与研发周期,你选择哪个方案呢?

    即使是线上场景也不例外,知道微信在直播场景时,收到的通讯消息已经采用了浮窗进行交互嘛?你也不想在看到精彩的时候却要关闭直播切换窗口去回复消息吧,这便是基于场景化的思考, 微信 为你提供了更多的直播观赏空间,而不会因为临时的消息回复使你不得不切换场景进行其他的的轻量化事件。

    这便是场景化的魅力,我们可以找到真实问题的根源,并且能够充分的理解人物与环境与事件的关系,有很多设计师能够很巧妙的解决问题,并不是因为直觉或天赋,实际上更多的是结合了场景化的思维与洞察,而这并不困难,你也可以。

    3. 场景化的以用户为中心

    在某个场景中,使用你产品的是谁?他们有什么特征,场景为他们带来怎样的感受,他们会面临怎样的问题或需求?这都是场景化中以用户为中心的表现,我们很清楚产品的使用者是谁,购买者是谁,我们采用场景化去打磨产品并不是让产品在场景下显得更加美观,而是让用户拥有更好的体验,其次才是美观,而作为设计师就不能以自己独到的设计理念来完全代替用户了。

    事实上几乎没有一款产品是面向全人类的,出于人文差异、社会特征、个体特征、使用门槛等,做不到如此强大的兼容能力,过分兼容往往也会使得产品有缺陷或不伦不类,考虑的产品的功能作用以及商业价值,企业都会锚定一些具有某些特征或对应需求的用户群体,这样才更有机会成功,而不是迎合所有人,并且有时候还要进一步的区分用户与特征,例如使用者可能是一只猫一只狗,但是购买者往往是养宠物的人,这个时候还要顾及购买者的偏好,而不只是局限的观察场景下的使用者如何与产品交互,场景下购买者的动机与目的也是重要的,而那些线上应用就更不用说了,同一批人可能有不同的使用场景,同一场景下的用户可能会有不同的特征,识别他们的共性与差异性是以用户为中心的重要工作,为此我们可能还需要对场景下的用户进行分层,甚至允许定制化。

    除了以上说的用户群体与特征,人文差异也是场景化下值得关注的问题,需求往往是来源部分用户群体,迎合他们的人文特征可以更好的促进用户使用和购买的欲望,在产品出海设计的过程中,人文差异往往是极其重要的,因为使用场景从国内变成了国外,如果不密切关注场景下的人文变化,出海则基本会以失败告终,例如我们传统的驾驶位在左边,而部分国外的是在右边;我们很多人爱吃的烤猪蹄,在印度却不受欢迎;我们大多人阅读是从左到右,而部分国外却是从右到左。一旦场景发生了变化,我们就应该密切关注人文是否要做更新的思考。

    4. 综合性的思考方式

    此前已经解释了,场景不是单一的情景,并且存在各种变数,甚至都不是静态的,我们使用场景化思考时,一定不会局限在产品本身的流程或交互上的,也不是某个或多个人物上的,所以在场景下观察时,注意力不该在单一的对象上,而应该覆盖场景化的多个重要因素上。并且场景会给出用途和一些对应关系的特性,像我们提到某个需求时,研发的同学会问是那个场景,其实就是想要了解这个场景在哪里触发,场景下的用途是什么,用户与目标是什么,关联了那些技术栈等等。如果我们在观察某个场景时,出现了意外或小插曲,作为设计师就应该警觉起来,而不是认为只是意外,不会再发生,毕竟古人云“无独有偶”。所以当你奉行场景化观察或是思考时,就不会过于局限,反而会具有综合性的思考过程,这能让结果更加可靠和易于理解。

    八、开展场景化思维的窍门 1. 贴近现实

    几乎出现的所有问题都是有根源,有场景的,我们拿到需求却还是要分析需求,其目的就是找到根源,而不至于在虚假的问题或需求上窘迫的发力,而最终得到一个跛脚的结果,问题的根源常常是无比真实和深刻的,而我们结合场景化思考时,就应当贴近现实,而不要简易的虚构一个不真实的场景去匹配和思考问题,这个过程中要尽可能的追寻真实的环境,匹配的角色,更实际的问题,这个时候我们眼里的场景才有效,而不是做戏或是走个形式,并且最终你的解决方案是要搬进现实的啊,并不是以实验室的结果来定义真实的场景发生的事物,即使是模拟也是在模拟更加真实的场景不是吗?

    2. 顾及变量

    倒上一杯水,抓来一碟零食,关上了窗帘,窝在椅子上,一切刚刚好,我沉浸在女鬼桥这部鬼片的精彩桥段里,我屏住呼吸,高度紧张的注视着,心里预测着下一个镜头将要如何如何,哐当一声,吓得我直起身来,其实女鬼还没有出现,但是我的猫先出现碰倒了我身后的物件。

    场景化不再是理想派了,意想不到事件正在场景中发生呢!

    对于场景化,几乎没有可能与我们预期的一致,场景下会有各种变量也应该有各种变量,把场景定格后应用是不对的,它应该像一个故事一样,有过程有发展变化,事件的发生、人物的行为、情绪的变化、环境的变化都是场景变量的一部分,越是忽略这些变量,越是会出现更多问题,因为这些变量会直接影响用户的行为决策与结果。 交互设计 师做特殊场景状态(常见有设备兼容、异常操作、网络问题,非常规操作等)的兼容与防错,不就是很好的体现吗!拆分出更多的意外场景迎合做出兼容方案反而会多出一些细微的体验差异,例如华为手机的消息通知会有自动收起内容的情况,其启示来自于真实的环境下,背后会有其他人窥探到你的个人信息。

    于此同时我们也应该清楚自身产品的局限性,我们做不到能应对各种突发事件的程度,所以设计出适当的约束来避免问题也是蛮重要的,大抵我下次在家看鬼片会先把猫关起来吧。

    3. 情感化

    场景化、情感化似乎在现在的设计中经常被提及,如果把场景化比作一面灰色的墙,那么在墙上绘制多彩的小花,人物也露出愉悦的情绪,这些便是情感化的色彩,情感化传递的是一种情感价值和温度,在产品使用的场景中,我们可以结合特定的时刻来打造情感化设计,可以是通过氛围传递情绪,例如新年,产品视觉焕然一新,年味十足。又或是触发回忆,帮助用户想起那些有价值有温度的回忆画面,总之在适当的场景引起用户共鸣是一件很有温度的体验设计,哪怕只是在南京大屠杀的公祭日将线上产品的彩色斑斓抹去,也能感受的产品的情感关怀与社会价值观,总之识别出有意义的时刻,不论是节日盛典、解锁成就还是目标达成,我们都可以通过具有仪式感或视觉氛围的设计方式传递情感,让用户感受到产品设计的用心与别致的体验,这也是场景化中的环境与时间因素的识别与运用。

    但值得注意的是,情感化不单单是符合特殊时刻或环境的打造,只是说就让用户觉得好看或就该这样有时还不够,情感化更多的是期望与用户情绪建立共鸣,引起用户反思,试想一部电影,为什么有的人看哭了,有的人没有反应呢?很大一部分原因就是看哭的人更投入,剧情经过了用户的反思与共鸣,从而调动了情绪才鼻酸落泪。

    4. 常规性

    常规性是一个很重要的部分,它包揽了以上多个部分,常规的情景、常规的流程、常规的客户、常规的问题、常规的信息、常规的操作、常规的行为习惯、常规的难度、常规的文化差异、常规的认知等,常规意味着产品符合大多数客户群体的认知、习惯与使用情景,这能够大大提升易用性和兼容性,当设计无法接近用户认知就会变得难以理解和使用,随之门槛变高,而设计者不一定是产品的常规使用者,而常规性不仅能够使得场景化更加贴近现实,也抑制着以设计师为中心的弊端,最终保障设计模型与用户认知模型能够靠拢。

    但过分的常规性也会成为创新的绊脚石,不论是渐进式创新还是颠覆式创新,依旧会保留一定的常规性,例如常规的地域文化、常规的理解认知、常规的信息维度等,但也肯定有不常规的地方,那便是它独特创新的部分,这意味着我们需要找对创新的场景,创新的部分,以及创新内容的本质与规则,要知道打破规则是一种创新是一种变革,但是前提是你得清楚规则的本质是什么,胡乱一通的创新往往达不到更好的效果,容易忽视其他变量与常规性。

    这让我想起来《设计心理学 3》中,唐纳德提及的指环王中创新的语种里的两个词语,一个是金属另一个是雪花,尽管这个语种里的两个单词看起来是如此的陌生,但是大多数外国人还是能够猜对那个是金属那个是雪花,因为金属的单词中包含了两个爆破音,更具有重金属的味道,而雪花的单词则具备斯斯的发音,显得更加轻盈,这源于人们对现实生活场景的理解与认知作用,这也是常规性。

    九、结语 通过《无界面交互》,看见了应用软件的发展简史,看见了软件对生活服务的影响力。还真就是那句话,“当我们习惯使用软件后就需要更多更多的应用软件”,随之利弊也变得更加清晰可见,人们生活方式与行为习惯也对应发生着转变,变得是数字化的服务方式,不变的还是各个场景下的需求与优化创新,就像我上一篇关于用户行为与触发式引导的文章中描述的那样,应用程序提供的是完成需求的功能,这意味着行为方式或成本的变化,但是本质不变。

    虽然书中作者批判了屏幕的种种罪恶,但是现阶段发展离不开电子屏幕的存在,或许这就是发展进步中不可避免的一些矛盾与牺牲吧,谁知道作者现在有没有躺着椅子上用手机刷 TikTok 呢?不过作者唾弃的以应用软件来应对各种需求服务的方式,倒是认可的,应用程序解决需求不是一劳永逸的办法,创意创新也不止于界面,最终还是要回归场景与需求的探索,朴实无华的点子依旧受欢迎。

    而聚焦生活服务类的场景与需求,我认为物联网与人工智能反而是以后更好的解决方案,我在之前的一篇关于物联网交互创新探索的文章中也有归纳过物联网的特征趋势(注: 有兴趣可以在往期文章中找到,有图解不枯燥,值得一看),即自动化、智能化、云计算、傻瓜式、联动性、可视化,我认为这些特征都能很好的满足无界面交互中潜移默化的 UX 设计理念,而作为这些生活服务类的 UX 设计师,了解和熟悉物联网技术也显得尤为重要。

    未来物联网交互会有哪些创新?来看这篇6000+的干货! ? 背景 伴随网络条件的提升与智能化科技的发展,我们身边正在发生着天翻地覆的变化,以国内华为、阿里、百度、腾讯、JD 等科技公司运用 5G、AI、物联网、大数据、云计算等新型技术改变着我们的生活场景,这使得我们不论是生活、学习还是办公都更加智能化、高效化、可视化、数字化,也

    阅读文章 >

    最后,打工人!一起加油!

  • 2000套高清资源免费下载!传统文化设计灵感宝库「书格」

    UI交互 2022-09-21
    今天继续大家推荐一个宝藏古籍资源库「书格」,里面开放分享诸多高清的古籍古画素材资源,供所有人免费浏览下载,是一个非常棒的中国传统文化设计灵感库。

    大家好,这里是和你们聊设计的花生~

    之前为大家推荐了 3 类书法字的资源,受到了很多小伙伴的好评。今天继续大家推荐一个宝藏古籍资源库—— 书格 ,里面开放分享诸多高清的古籍古画素材资源,供所有人免费浏览下载,是一个非常棒的中国传统文化 设计灵感 库。

    超全整理!设计师必备的3类书法字免费资源(附下载链接) 大家好,我是和你们聊设计的花生~ 之前在社群有小伙伴问有没有免费可商用的毛笔书法字体资源,有肯定是有的,但授人以鱼不如授人以渔,今天除了为大家推荐免费好用的书法字体,还会为分享给大家优质的书法字入门知识和教程,还有免费的资源网站,让你即使没有书法功底也有办法做出好看的书法字体 ~ 往

    阅读文章 >

    书格简介 书格官网(新版): https://new.shuge.org/

    书格官网(旧版): https://www.shuge.org/ebooks/#

    书格是一个自由开放的在线古籍图书馆,致力于开放式分享、介绍、推荐有价值的古籍善本,并鼓励将文化艺术作品数字化归档 。其旧版累计收藏资源 2290 套,新网站则已发布 380 套优质资源。

    书格发布的书籍主要以高清彩色影像版本 PDF 格式,大部分书籍书籍单页宽度在 1400 像素以上,跨页宽度在 2400 像素以上,并且没有任何加密或水印。

    书格新版网站首页

    书格分享的内容限定为公共版权领域的书籍,书籍资源来源于世界各个图书馆或机构的公开内容。网站鼓励大家自由再加工、再创造、再发布站内资源,不会去干涉第三方转载,但希望转载传播时尽量自由、公开、免费,并尽量保留文献原本的来源链接,以方便学术研究引用。

    书格内资源展示

    由此我们可以看出书格是一个公益性的文化网站,为每个人自由免费的获取优秀的传统文化资源提供了便捷的渠道,下面从 3 个方面为大家推荐书格的可用设计资源。

    1. 丰富多样的字体灵感资源

    书格内众多古籍古画内包含了许多古代字体资料,无论是隶书、楷书、行书,还是刻本、碑拓、印章等,都有高清的影像,是相关字体设计的极佳参考。

    想要不侵权?收下这篇可能是最全面的书法字设计指南! @研习设K先生 :中国文化有五千年的历史,汉字在这其中有着至关重要的作用。

    阅读文章 >

    2. 高清的绘画/影像资源

    除了文字古籍,书格内还有大量古代绘本画卷和旧时的黑白摄影照片,内容涉及建筑、人物、植物、动物、器物、民俗、山水、地图等。像我们熟悉的《女史箴图》《海错图》《万国来朝图》《上林图》等都有书格都有高清图像。既可作为设计素材,也可以作为绘画的参考。

     

    3. 下载方式&外部链接

    书格内的资源下载起来非常方便,书籍展示卡片的右下角就有直接下载的按钮,也可以进入书籍详情页内下载,里面有关于文件的格式、大小等详细信息。点击「下载链接」,选择合适的路径下载即可。

    此外书格网首页底部还附有很多知名线上图书馆网站名单,比如哈佛大学图书馆、世界数字图书馆、互联网档案馆、中国国家图书馆、奎章阁古典文献资源导航等,都是非常优秀的资源和参考网站,感兴趣的小伙伴可以做进一步的探索。

    如果你想获取更多优质设计网站,也可以收藏优设「设计师导航」 https://hao.uisdc.com/

    里面汇集了 20 多个设计领域、超 500 个优质设计网站,导航分类细致,类型丰富全面。无论你是想找灵感、找免费素材,还是搜设计教程、学习设计知识,都能通过分类标签以及内置的优设网和优优教程网搜索引擎,快速找到最合适的设计资源,还可以免去自己逐个收藏网站的麻烦,非常方便。

    好啦以上就是今天的分享,喜欢的小伙伴记得点赞收藏,也可以转发给身边有需要朋友 ~ 如果你有关于本文或者其他设计疑问,可以在评论区提出,我会第一时间为大家解答~

    推荐阅读:

    9个设计师必看的国际顶尖设计网站 大家好,我是和你聊设计的(经夏日高温烘焙更香脆的)花生~ 虽然优设一直有向大家推荐各类设计灵感,但是还是有很多刚接触设计的小伙伴们迫切地想知道有哪些“设计师必备国际设计网站”能让自己一键收藏,既然如此那干脆给大家就来一期优质设计网站推荐吧 ~ 除去设计师都熟悉的设计网站三巨头 Pin

    阅读文章 >

    可自由商用!收录超过100万张图片素材的免费图库PikWizard 本文要介绍的「PikWizard」是一家可免费图库,收录超过 100 万张高质量、适用于商业用途的免费图片素材,可安全用于商业用途,无需标示原作者或出处来源。

    阅读文章 >


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通