恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
好用到爆的~拼接式设计手法
0.0°
2021-03-13 原创文章 教程 举报 6255 60 21 2

本人多年设计行业所创造的设计技法之一,希望此技法能帮助大家突破设计瓶颈,解决设计无头绪、无想法、无创意的各种困扰。

日常工作中,我们是否有被需求压的喘不过气来,或者总是拿到一些无厘头的设计需求,却又找不到产品对接人呢?其实,我想这是小公司设计师的通病,很多时候,确实就是这样,领导给个需求,让你做个PC端的网页,要不就是让你改个app,或者让你搞个什么物料,天呐,真的就是一堆不知道怎么搞才好的设计需求,如果这时候你带着期望的眼神和一堆问题去问他,可能还要被臭骂回来:你才是专业的,我就是不知道才和你说的,这些问题得你去想啊!好吧,这可能就是所谓的虽在眼前,却又好似千里吧。


如果说,以上的这些问题,你真的遇到了,又或者说这就是你当前急切的问题,那继续往下看吧,我相信,这篇文章一定能帮你解决掉这些问题,而你需要做的就是按部就班,操刀就好。另外,我这里想提醒一点的是,如果我们目前产品或者需要设计的需求有数据、调研报告、PRD文档或者其他做支撑,我确实建议大家还是用正规军的方法,毕竟有市场的真实需求反馈,做出来的东西会更加符合市场定位人群。而我这个方法,只是咱们设计师的最后一道防火线,目的就是让我们设计师在最后一线,着实无法下手时所使用的技法。



目录

自我摸索出的设计窍门—拼接设计

什么是拼接式设计

拼接设计的巧妙之处

案例—真实界面改版



自我摸索出的设计窍门—拼接设计

追述到5年前,步入互联网设计小白的我, 和很多人一样,也是在小公司日夜搬砖,遇到需求就发怵,其实倒不是嫌工作量大,主要的问题而是根本就抓不着方向点,拿到需求也不知道该咋办,一脸闷逼的看着老板分发下来的工作要求,却迟迟无法下手,有的时候我也会拿着需求再去找老板,不过……咳!咳!

后来我琢磨,这可能是个病,一个很严重的问题,咱的治啊,先不说别的,如果还想继续在设计行业生存,并且在当前的工作中存活下去,起码首当其冲最重要的当前任务就是得先完成老板一次又一次的需求分配吧,这其实在当时来讲,已经成为我每天重要而又最紧急的任务了。

介于这样的压力,我不断摸索与尝试,终于,有一天摸索出了一条可以适用任何设计的方法,那就是拼接设计。并且,随着工作中的不断使用与对技能的打磨迭代,目前来说,这套技法我认为已经比较成熟,并且也可以在其他环境下同样使用,所以才和大家分享出来,目的是希望帮助更多那些在职场中依然处于困惑状态的设计师们,希望你们同样可以走出困境,最终成为能为真实市场需求做设计的设计师。



什么是拼接式设计

接下里,我先为大家讲解一下,我这套拼接式设计技法是什么,它主要涵盖的技能点是什么。

首先我为大家讲解一下技法名字的字面意思,先说拼接,拼接:指的就是拼凑,用一堆零碎的部件组件起来,这个过程就叫做拼接。至于拼接的完整物是否得体恰当好用,那就要看你对技法的掌握熟练程度了。而拼接式设计,就是在拼接的字面意思上加入了设计工种行业,意思就是用拼接的手法完成设计工作。

然后我再阐述一下这个拼接式设计手法的主要涵盖点,目前来说,我创意的这套拼接式设计技法基本能涵盖整个UI行业,内容包括有:局部界面拼接、全局拼接、组件拼接、图标拼接、插画拼接、色彩拼接、思路拼接。



拼接设计的巧妙之处

大家或许会疑惑这种技法真有这么强大么,这可以说是几乎涵盖了所有的设计领域了,其实不然,这里我个人感觉只是谦虚的认为是这样的,但在工作职场、学习方式、日程排期,等等的范畴内,其实我同样也用到了这样的技法,并且同样适用,其实只要能掌握拼接技法的核心逻辑,它几乎可以在任何条件下帮你解决任何问题。

而拼接式设计手法种种的强大且巧妙之处,其实就在于它的灵活性与可变性非常强大,可以说小到一个按钮或一个标志,大到一套作品或整套产品逻辑,都是可以运用拼接式设计去解决的。如果说临摹是小白设计师的入门级手册,那么我研究出的这套拼接式设计技法,可以说就是让小白设计师步入中级设计师的大门钥匙,只要学会巧妙的拆解与拼装,你就可以实现自我创作的作品,哦对!大家千万不要误认为只要学会拼接就万事大吉,这里面还缺少一个引子,那就是思维,拼接固然简单,但设计如何拼接、元素是否匹配、思路是否一致,等等,这就看你对产品的定位与需求的理解程度了。



正序推导法~拼接拆解与组合解说

说到这里了,我还是为大家上点实实在在的东西比较可信,但是为了让初级设计师先进入状态,我用正序推导法用几个简单的例子来为大家解说一遍,然后再为大家逆时针倒叙,为什么要这么做呢,这是因为正序推导法是直接拿零碎部件拼凑,没有思路理论支撑,无任何压力感,是快速练习该技法的好办法,而倒叙拼接,难度较大,他需要先理解UI逻辑,然后再进行拼接,也就是刚才我说到的逻辑思维配合,适合成熟掌握该技能后的练习。好,先来正序…


1、UI界面类的拼接设计

首先我以APP界面为案例进行展示,通过简单的界面选择和对参照界面的局部提取,当前展示如下,大家应该能发现,作为正序推导法的拼接式设计,难度并不大,可以说只要有参照物,就可以进行,并没有严谨的逻辑思维在内,所以,非常适合初学者练习使用。 

然后我按照图片内的参照物提取点,先是进行了一个原型拼接,目的是为了让自己对当前拼接的模型进行一个大致的轮廓描绘,当有了雏形后,我在将参照物的视觉提取点全部摘出来,拼接入我们的原型界面内,这样就形成了一套新的界面风格了。

 

2、图标类的拼接设计

接下来我在带大家看看图标拼接设计的效果和技法,我将拼接式设计技法运用到了图标中,同样的,先是选取了三个自认为比较不错的图标设计参照物,然后在对三个图标参照物的特点进行依次提取与编辑,最后进行从新拼接。这里需要大家注意一下,图标类的拼接式设计手法并不像APP界面那样简单、直观且直接具有整观性,而是需要我们去提取更多的小碎片细节进行拼接,其中就包括:形、色、质、纹、意、象,所以,图标类的拼接式设计技法相对于界面虽然小,但是难度却不少,主要原因是设计师既要保证图标的精致度,还要确保用户能正确理解图标的含义。

好,当我们对图标参照物的优点提取完之后,就可以从新进行拼接与设计了,并形成一套新的图标设计,在图标拼接设计即将接近尾声时,我们还可以再去寻找一些其他的图标风格样式,并寻找一些最终可以提升整个图标精致度和装饰性的技法进行嫁接,这样可以更好的使最终设计的图标更加绚丽和丰富。

插画类的我就不在为大家展示了…我们继续往下看


倒叙推导法~具有严谨逻辑的拼接技法

好的,学到这里,大家应该对拼接式设计的技法有一个基本的认识了,并且我相信,一定有同学已经按耐不住激动的心情想要尝试一下这一听就真的能懂的拼接式设计技法了,但是别着急,接下里,我继续和大家分享倒叙推导法。

接下来,我在最后带大家学习这种最复杂的拼接式设计手法,也就是文章前半段说到的具有逻辑性的倒叙拼接设计技法,这个技法最大的难度就是在于它必须具有缜密的交互和产品思路去支撑我们要做的设计稿,不然的话,一旦交稿或者投入到市场,那都是概念类的设计,并不能与市场进行完美匹配。


我简单给大家举个例子:假如公司有一个外卖类(类似于美团)的产品界面需要我们去改版或新设计,如果在不了解产品导向和用户目标的情况下,设计师为了好看与视觉突出,随便地找了几个参照物进行提取在拼接,最后大家能想象到结果么?我这里简单阐述一下,首先第一点就是一定不符合产品逻辑的,界面第一行该放什么?banner该做多大的,内容是什么?金刚区功能优先排级了么?谁该在前谁该在后?该不该有瓷片区?图片是该放真实的实物还是该画插画呢?等等等等,这些都是需要在寻找拼接参照物前就要考虑清楚的,不然你连找什么样的参照物都不知道,这就是锚定效应。


说到锚定效应,这里简单的给大家补习一下,锚定也可以称之为“锚”,指的是对某一主题不相关的信息对该人的信念及判断产生的影响,即心理污染的一个范畴。例如:人们在对某一事物进行估算(估计)时,常会由于外界原因锚定一个参考起点,并在此基础上随意的开始移动,直到找到他们想要的答案为止。这也是所谓的“锚定与调整”现象。


所以大家注意,这个锚定效应概念对我们当前这个倒叙推倒的拼接技法是具有非常重要意义的,只有当你知道了锚定(基础的产品界面功能思维参照起点)后,你才能真正根据设定的界面功能逻辑进行参照物的寻找,这点大家一定要捋顺,我们做界面产品设计,是使用的倒推手法,而产品是需要正推手法的。


好,那我继续用案例呈现倒叙推导法的拼接式设计技法。



倒叙推导法~拼接式设计案例实操

(附:以下案例均为虚拟,大家重点关注本次的推导思路与拼接技法的教学过程)


案例前缀:现在我接到一个客户的订单,客户希望我帮他设计一个家装类的app,如果按照正序推导法的话,我需要做的是直接找案例,找参考,然后收集过来后直接进行优点提取编辑,然后进行拼接即可。但按照倒叙推导的话,这件事就不能这么做了,正确的步骤做法如下(以下我只对首页进行推导设计):


1、收集需求

在倒叙推导法的第一步,我们首先需要进行收集客户的产品需求并进行整理,其中包含:产品功能、相关竞品、产品调性、配色收集、产品壁垒、线上数据,等等,在这里我收集了一些关于家装APP的产品内容,并对应的放入不容的类目;



2、信息归类筛查

第二步我们需要做的就是将产品收集来的信息和数据进行归类并筛查,然后确立整个产品或局部界面的功能有哪些,如何实现,交互方式,等等,并最终确立整个产品的调性与功能优先层级,在这里我对第一步的所有内容进行归类,并合并同类项,删除具有奇异、无用、首版开发成本高的功能;


3、确认产品框架和功能排级

根据第二步内的功能确立和配色规范,我们就可以进行产品框架的梳理和功能的优先排级了,并实现最终和客户的产品思路一致;

提示:卡诺模型的具体使用算法教程点击这里,很早就为大家做了教学:梳理「产品设计模型流程」


4、原型图绘制

目前这一步,就可以开始绘制草图或者原型图了,并且同步判断界面功能是否完善,在不考虑排版的情况下,将第二步已经确立的功能和框架对应加入原型图内,目前这个时候大家需要注意下,只对功能做全局展示,先不要过多考虑将优先层级套用进来;


5、参照物寻找与优点提取

5.1、图标参照物

在寻找和参照图标的过程中,我们需要去感受参照物的设计质感与创意,去摸索它们的那种风格趋势,然后外加极少部分的照搬,最终绘制自己的创意图标。


5.2、模块参照物

模块拼接相对于图标来讲比较容易一些,但也不是原版照抄就能搞定的,如果是正序推导的拼接设计倒是可以,但如果是有数据和理论支撑的话,还是需要我们在考虑用户的使用场景和主观感受上进行思考设计。



6、最终的拼接式视觉设计

通过以上全部倒叙的流程梳理与汇总,最后我们要做的就是将这些参照物的所有灵感和创意汇聚一堂,然后单独将刚才第三步的功能排级和定位,进行合适的配置,最终就可以形成标准的、符合市场的、对应需求的界面设计了。当年,这并不是说就完完全全符合市场且没有问题的,一款标准的APP设计,都是需要有不同部门的调研和筛选,然后编辑PRD文案后在进入评审阶段后才得出的结论,而我当前教大家的,更适合自我提升、小公司和对接客户场景使用,希望大家正确理解。最后,给大家看一下我做出来的拼接界面效果图。


总结

好啦,到这里差不多就结束了,我最后做一个汇总。


对于整个拼接式设计手法来说,整体的拼接技法对于大家来就讲,可能看起来难度并不是很大,但如果你上手实操一遍就会发现,选取参照物不难,提取优点也不难、拼接过程还是不难,最难的地方是在如何将完全不同风格的零部件装入一个设计容器稿的同时,还能保证整体的整观性与统一性,并且随着项目体量的增大,拼接技法就会越来越难以实现,这是因为你的零碎部件越来越多,也就会越来越杂,这个时候就必须运用产品思路做支撑点,然后进行界面拼接设计了。


做了这么久的设计,虽然自我摸索出的技巧有很多,但我还是想和大家最后分享的是,技法只是我们为完成工作的一种方式与手段,我认为更重要的应该是创造技法的创意想法与搭建产品思维的完善体系,只有这两者的合并,你才能走得更远,扎得更稳。做设计,单纯靠技法只能维持现状,而唯独创意想法和独到思维才是你走向未来的杀手锏。



关注公众号:西瓜的设计

本文由 @西瓜的设计 原创。未经许可,禁止转载

Powered by Froala Editor

更新:2021-03-13

收藏

60人已收藏

西瓜设计

微信:18306834213

  • 54

    作品

  • 242

    粉丝

  • 63

    关注

  • 极锐科技·连接型 CRM 系统【企业官网+B端+APP】
  • 「2022-2023年」UI/UX作品合集
  • 2023-羽毛球杀球测速小程序pro
  • 工作,应该以解决问题为核心!其他都是虚设

    猜你喜欢

      2021-03-13 原创文章 教程 举报 6255 60 21 2

      好用到爆的~拼接式设计手法

      0.0°

      你确定要举报好用到爆的~拼接式设计手法

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年03月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      21
      60
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录