恭喜你成为UI中国推荐设计师 (详情)

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
样机模型是设计作品包装的点睛之笔
190.2°
原创文章 / 经验/观点 / / 举报
30760 595 428 23

2021-03-05

春节后的招聘旺季已然来临,掀起了设计师跳槽的热潮,你是否萌生了跳槽的想法呢?

 

招聘季带来了很多岗位机遇,也是验证自己专业能力的时候,是否可以跳槽到更好的团队就看机遇与准备是否都已经到位。

 

在作出决定前要准备好简历和作品集,今天我们聊的就是关于制作作品集中的样机模型的话题。准确的样机选择有利于作品的更好呈现,也能带给面试官更好的印象。下面就让我们一起来聊聊关于样机模型,如何成为设计作品包装的点睛之笔。


 


 

分享目录


一、样机模型的使用

二、样机模型的样式区分

三、去模型化的简约表现

四、手绘样机的简约版

五、建模样机的立体深入

六、拍摄样机真实感体现

七、投影的运用技巧

八、倾斜包装的技巧把控

九、突破样机的层级表现

十、最新样机模型分享

 

 

 

一、样机模型的使用


在进行设计展示和作品集包装的时候,样机模型的使用是相对比较频繁的,能够更好的辅助作品的呈现,带来更好的作品展示体验。我们在使用样机的时候,需要结合自身作品特点合理的作出选择,下面这些因素需要重点考虑。

 

 

1.1. 样机需要与时俱进

在选择样机的时候,尽量选择新一点的机型,不仅更有利于作品的展示,也能带来全新的面貌。随着审美意识的不断增长,大家都会趋向于新的事物,老旧的事物会让人联想过时的设计,反而影响了作品的发挥。


 

 

1.2. 机型选择与作品比例对应

有些设计师会做出一些偷懒的做法,以前的项目不愿意花时间进行优化,在进行作品包装的时候硬性把比例不一样的界面和样机模型进行包装匹配。不仅作品会出现变形的可能,也使得标准的组件混乱呈现。我们在进行样机机型选择的时候,要考虑本身作品设计的尺寸,需要选择一比一匹配的机型才能更加完美的呈现作品效果。


 

 

1.3. 不要使用太多样式的模型

当我们确定了整套作品集包装的样机类型之后,最好是能统一样式,不要在一套作品中出现太多的样机种类,会显得不够规范统一。包括样机品牌也最好能有效统一,如果特殊情况要出现多个品牌机型,也需要整体协调,不要格格不入。


 

 

1.4. 样机效果不能喧宾夺主

样机的作用是衬托作品的展示,在选择样机和调整样机的时候,不能过于突出样机的比重,这样会削弱作品本身的呈现。最好选择一些造型简洁的样机,不要选择外形过于沉重的模型。个人比较倾向于边框较细的样机,有时候为了画面更加简洁干净,也会选择去模型化的处理。

 

 

1.5. 不被样机所束缚

在面对作品包装的时候,不要被样机先入为主,一开始就沉迷于样机的使用。有时候去模型化的包装也许更适合你的作品呈现,我们要根据自己作品的设计风格考虑最合适的呈现方式,也有可能为作品绘制更贴切的样机造型。


 

 

样机的使用是起到点睛之笔的效果,不要对样机本身喧宾夺主,选择最合适的样机才能有利于作品的呈现。我们可以使用样机模型来衬托作品,也能为了作品创作出更贴切的模型。

 

 

 

二、样机模型的样式区分


经过大量作品集的分析,发现样机模型并非一定是拍摄的真机模型,设计师为了更好的呈现作品效果,也会创造出更多不一样的展示形式。

 

现阶段样机模型的样式主要有:真机模型、三维建模、扁平手绘、几何图形模型框等,也有去模型化的展示形式。在追求造型简约极致的设计中,真机模型会显得干扰元素太多,也有设计师会自己通过几何图形绘制更加简洁的样机造型,让作品本身的视觉效果不被干扰。


 

样机模型的色彩通常还是以真机为色彩参考,虽然也有一些大胆的处理方式会选择各类彩色的模型,不过这种通常驾驭度要求比较高,不适合通用。主要的依然还是以深色(深灰色系)和浅色(白灰色系)为主,无彩色系的搭配比较能通用到任何场景。若是白色和浅色为主的背景,样机选择无论是浅色还是深色皆可呈现。但是面对黑色和深色为主色的作品包装,大部分情况还是会选择稍微收敛的颜色组合,不然会过度抢眼影响作品呈现和作品集焦点。

 

样机模型有更多选择空间,也有更多展示形式,要尽量多的收集灵感参考和样机模型,尝试出最适合的呈现效果。

 

 

 

三、去模型化的简约表现


去模型化的形式是个人在包装作品的时候比较常用的,有时候觉得样机模型的运用太过于干扰作品的呈现,直接将作品进行简单蒙版和投影等处理,显得会更加简洁干净。


 

去模型化的简约表现就是放弃使用任何样机模型,只是将作品直接展示,而展示的效果会根据具体情况选择是否投影。也会根据设计规范考虑在创建剪切蒙版的时候是否会设置圆角值,是小圆角还是大圆角等考虑。

 

 

3.1. 投影设置的选择角度

展示过程中为了增强层级感,通过投影设置是最为简单的方式。深色背景可以忽略投影,通常在浅色或者白色背景上面进行投影增强。投影的时候尽量增强投影值,数值过低会显得比较生硬。


 

 

3.2. 直角展示的特点

直角的展示会显得更加硬朗,张力感十足。如果界面选择直角展示需要考虑整体的包装风格,不要直角界面和圆角风格混合包装,这样会显得整体细节规范不够统一协调。


 

 

3.3. 小圆角展示的特点

小圆角的处理会使得界面展示更加柔和,相较于直角风格来说通用性更强,通常个人习惯性在设置圆角值的时候选择 8 的倍数。


 

 

3.4. 大圆角展示的特点

圆角除了通用性强以外,亲和力也会更高,特别是大圆角的处理。大圆角的设置配合圆角样机模型会比较常见,独立界面展示需要考虑界面设计繁简度,不适合信息内容过于复杂的界面。


 

 

设计包装的目的是为了更好的衬托作品效果,如果干扰主体的信息太多反而会喧宾夺主,去除一切繁琐的装饰也能更好的突出作品本身。去模型化的简约表现可以把作品呈现发挥到最大,显得更加简洁干净,体验感更舒适。

 

 

 

四、手绘样机的简约版


去模型化的方式不能应用于所有作品,我们也会采用样机模型来对作品进行扬长避短。除了真机模型以外,手绘样机的简约版也是运用比较多的形式之一。

 

 

4.1. 线框样机模型

线框样机模型是手绘样机模型最简单的形式,强调边界的轮廓化,个性化比较强。如果线条较细风格特征比较明显,驾驭度比较大,这种作品包装应用少,适合一些风格偏向于线性风格的作品。

 

如果线条较粗会更像真机边框,也形成了面的感觉,比较能适合更多风格作品的展示。


 

 

4.2. 扁平样机模型

扁平化的样机风格比较接近真机的造型特征,只是减去了真机的装饰部分,或者弱化细节部分的刻画。简约的风格会弱化样机本身的权重,让作品的呈现效果最大化。


 

 

4.3. 微质感样机模型

微质感样机模型是介于扁平和真机之间的风格,有时候为了让整体作品的效果质感更强,会选择强化包装的质感细节,而样机模型的质感也会特意加强。

 

微质感样机在绘制的时候会以真机为造型基础,保留光阴效果和立体化结构,为了不让样机显得权重过大,也会删减一些细节刻画和装饰部分元素。


 

手绘样机不仅可以锻炼设计师的动手能力,还能更加个性化的定制专属的展示模型,属于个人比较建议的方向之一。

 


 

五、建模样机的立体深入


随着 C4D 等三维软件的应用普及,设计师在进行创作的过程中会越来越考虑建模来实现创意。而作品包装的样机模型也成为很多三维建模的对象,建模出来的效果立体感会更加深入,展示角度选择更加便利,也能根据包装需求渲染更多不同角度,多方面展示作品细节。


 

为了场景搭配更加丰富,建模可以添加更多辅助元素和装饰元素。比如手握样机,手势的变化也能带来更多样式的选择;空间感的营造,通过一些立方体或者球体等元素的装饰来加强空间感;其他设备的辅助,可以搭配更多终端产品来突出多端同步的效果。建模可以定制自己更大胆的想法,也能切换更多角度的选择,非常有利于作品包装的丰富度。


 

三维建模的方向不只是样机模型的层面,也有一些作品包装在辅助元素部分采用建模完成,而样机模型会更加灵活的选择更多风格的表现形式。比如建模部分运用在一些数据图例部分、手势展示部分、背景装饰部分等,以此来强化包装局部的立体感。


 

 

 

六、拍摄样机真实感体现


设计师自行创作样机模型可以根据作品的特点灵活控制风格,除此之外就是真机模型的运用,真实感会更强。


 

 

6.1. 拍摄加后期创作

有时候我们在绘制样机的时候无法找到造型特征和角度,利用拍摄现有真机来作为绘制的基础样本,比较能很好的进行绘制过程中的造型把控。

 

 

6.2. 拍摄加后期合成

拍摄的质量取决于摄影设备和摄影技术,有时候条件不足的时候我们会进行后期合成,素材与真机组合成最终的场景需求。

 

 

6.3. 官方渠道采集

想要采用真机模型除了自己拍摄以外,也可以从品牌手机网站等渠道获取,毕竟摄影技术不是每个设计师都擅长的。

 

 

6.4. 拍摄交互操作过程

利用一些第三方交互工具可以把我们的设计作品进行交互链接,安装成虚拟项目在手机上进行演示预览,就是演示 Demo。拍摄演示 Demo 的过程可以制作视频包装部分,这也是作品包装比较常用的视频制作形式之一。


 作者:Chris_Tiny


 

6.5. 搭建小型摄影棚

拍摄成品会受到多方面因素的影响,拍摄环境就是最大的影响因素,环境的光影效果等。我们可以学习小型电商团队的做法,采购一些电商道具,搭建一个小型的摄影棚。比如在淘宝搜索“小型摄影棚”等关键词就可以采购到需要的物件,可以大大的提高我们的拍摄质量,哪怕采用手机拍摄,你也能拍摄出大片的感觉~哈哈。

 

真机模型的使用可以减少绘制的时间,由于样机的权重比较重,会分散一部分作品关注的焦点,也算是扬长避短的一种形式。这也是设计师进行作品包装的时候选择较多的形式,获取的渠道较多,自己也可以拍摄,相对比较便利。

 

 

 

七、投影的运用技巧


选择最适合的样机模型可以给作品包装带来更好的展示效果,而样机投影的设置可以增强作品展示的空间感,让画面层次更加丰富。

 

 

7.1. 投影设置适合加大数值

我们在对样机进行投影的时候,适合更大的投影值,这样不会显得样机贴在平面上一样,空间感会更强。


 

 

7.2. 投影的颜色不要过度偏离真实

投影颜色调色的时候要基于真实的环境考虑,真实环境投影是不带颜色的,颜色来源于环境色的影响。因此,我们在设置投影颜色的时候要偏向于无彩色系一点,不要让投影颜色太彩色化,这样会偏离真实。


 

 

7.3. 长投影的运用

相较于普通的投影,长投影会更有个性,也能强化突出样机模型。适合运用在独立展示和重点展示的部分,不适合在界面汇总部分和多样机部分使用,会显得包装过度。


 

 

7.4. 远投影的运用

远投影效果和长投影有点类似,长投影类似尾巴一样会有拖影,而远投影只是通过投影参数设置或者单独进行位移产生的,让投影偏离样机较远的距离。远投影也能起到强化样机的特点,适合运用在需要突出展示的部分。


 

 

7.5. 分层投影的运用

当我们无法通过投影参数设置出理想的效果,可以考虑分层投影。将背景单独复制或者重新创建一份,然后隐藏在底部进行投影,可以改变其大小实现聚焦在中心的投影;也可以直接将元素进行模糊化操作,最终可以看看那个效果最理想,进而作出选择。


 

 

7.6. 局部增强投影运用

重点突出在于区分大部分的不同,重点强化单个的元素。如果在进行作品包装的时候想要突出众多作品中的其中一个,可以单独对其局部增强投影。适合作为封面、作品汇总、收尾部分等运用,可以让展示效果更有特点。


 

投影可以增强作品展示的层级感,投影的处理技巧很多,这里仅作为抛砖引玉,期待你能发挥出更好的想法。

 

 


八、倾斜包装的技巧把控


在进行作品展示的时候大部分情况下我们都会选择正面角度展示,在头图封面和局部地方会选择一些特殊角度的样机模型,作为视觉强化和视觉差异体现。也有采用倾斜角度来进行作品展示的,一般适合头图封面、局部突出、界面汇总、底部收尾等部分。

 

倾斜样机为了不影响阅读体验,通常角度控制在 45 度和以内为最佳,角度太大不利于界面内容的观看。除非是作为营造效果,不具备阅读效应来使用。

 

 

8.1. 倾斜样机强化头图封面视觉

头图封面是作品包装的起点,也是至关重要的部分,决定了是否带给读者继续阅读的兴趣。倾斜样机作为作品展示来说算是一种不错的视觉呈现,被设计师运用得也比较频繁。


 

 

8.2. 局部使用丰富包装样式

如果大量的正面角度展示会显得作品包装样式过于单一,在一些阶段性的局部采用倾斜的样式可以起到丰富整体画面的效果。只是倾斜样机不适合过度使用,毕竟浏览体验来说还是正面角度较高。


 

 

8.3. 倾斜样式作为界面汇总展示

在进行作品包装的时候都会进行界面汇总,特别是长图作品包装。倾斜样式作为汇总比较常用,可以带给用户收尾的提示。

 

 

8.4. 倾斜样式收尾展示

作为作品包装收尾的设计也是较为重要的,这是带给读者完美结束的感觉。倾斜样式作为收尾是比较通用的形式,被设计师广泛采用。


 

 

 

九、突破样机的层级表现


我们在进行作品包装的时候要凌驾于样机之上,不要被样机模型所束缚。有时候要善于突破样机的层级表现,这样更能在扁平化的基础上实现立体空间感的营造。

 

 

9.1. 利用特异构成突破

在多个平铺样机展示的时候,选择放大、投影增强、角度等区分来增强视觉对比,形成特异构成来突破样机的层级表现。


 

 

9.2. 利用空间层级突破

在样机模型的基础上对界面展示和界面元素提取进行空间感营造,通过层级的表现使得画面感视觉效果更立体。


 

 

9.3. 局部元素提取突破

在进行作品包装的时候采用正面样机展示是比较常见的形式,有时候太多的正面展示会显得画面感比较单调,我们会经常提取界面中的局部元素进行突出展示。使得画面感更丰富,也能基于样机之上开辟新的层级空间。


 

样机模型可以带来界面展示的真实感,起到作品衬托的作用,我们为了整体画面感更强,也会在样机的基础上进行突破。通过特异构成的区分带来视觉差异,让作品包装层次感更强。

 

 

 

十、最新样机模型分享


万事俱备,只欠装备。我们既然明确了样机模型在作品包装中的运用技巧,也掌握了一些设计样机的方法,在具体包装的过程中我们还需更多资源的辅助。

 

最新的样机运用可以带来更新的作品面貌,我们要时刻更新我们的样机素材库,或者时刻关注品牌手机等产品的发布情况。为了方便大家进行作品包装,这里也为大家采集了一些样机模型的文件,在黑马家族公众号内回复“样机”关键词即可获取源文件,希望能在包装的过程中发挥一定的作用。


 

样机模型需要因作品而选择,不要盲目的使用样机,也不要被样机所束缚。要分清楚包装过程中的目的,样机使用的目的和要达到的作用,是否不需要样机会更好。有时候多了反而显得复杂,干扰作品的呈现,失去了作品包装的初衷。

 

本文主要和大家一起探讨了设计作品包装的其中之一环节,关于样机模型的选择技巧,如何成为作品包装的点睛之笔。设计作品包装还会涉及更多细节,下次我们再继续探索更多未知的技巧,希望本文的分享能够抛砖引玉,带给你更多的帮助。



作者:黑马青年(v: heimaux)

本文由 @黑马青年 原创发布。未经许可,禁止转载。

Powered by Froala Editor

微信公众号:黑马家族

收藏

595人已收藏

黑马青年

设计交流微信:heimaux

  • 78

    作品

  • 2.1w

    粉丝

  • 134

    关注

  • 探索APP设计的手势交互(上)
  • 10 个底部标签栏设计技巧
  • 这个简单的界面我是这样进行修改的
  • 感官体验日记之手势交互-第3期

猜你喜欢

    黑马青年

    黑马青年

    设计交流微信:heimaux

    2016年度最佳作品集TOP10得主2017年度最佳作品集TOP10得主国民爱豆首页霸主2016年度最佳作品集TOP50得主
    • 2.1w

      粉丝

    • 2358.5

      人气

    • 7.2w

      颜值

    作品

      最新推荐

      探索APP设计的手势交互(上)

      81 0 0

      相关佳作
      换一换

        黑马青年

        点赞:428

        收藏:595

        评论:23

        样机模型是设计作品包装的点睛之笔

        你确定要举报样机模型是设计作品包装的点睛之笔

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

        0/200

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

        点击上传附件

        对谁可见:

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

        您确认要推荐?

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

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

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

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

        登录

        账号或密码错误

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

        登录

        可云端编辑的专业级UI设计工具

        立即体验