企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

快速提高设计稿质感的实用办法

发布时间:2016-08-30 10:25:17

TAGS:网站设计

  为什么别人的作品看上去很有质感,细节到位,自己的就平淡无奇,谈不上满意。难题到底出在哪?如何给设计作品后”定妆”,让终的设计脱颖而出?下面这几条经验之谈(层次、色彩......帮你搞定这个难题。
a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  后一公里?后一公里!a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

快速提高设计稿质感的实用办法.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  后一公里「Last Kilometer」这个概念,早是拿来形容公共交通末梢的难题。后来各个行业都开始用,就逐渐引申为完成一件事后且关键性的一步。(通常很棘手,但假如解决得当就能为整件事形成完美的闭环)而在设计领域里,云智认为这「后一公里」的难题,恰恰就落在终项目的呈现上。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  你可曾想过这么一个难题:自己设计书看的不少,”设计大牛”的文章一篇不落,工作几年经手的项目不说多有难度,至少数量上也很足够了,照理说”设计经验”很丰富。可为什么逛 dribbble、behance、FWA 时,总能明显感觉到,明明风格相近,别人的作品看上去很有质感,细节到位,自己的就平淡无奇,谈不上满意。难题到底出在哪?a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  不光是刚入门的设计师会有这样的困惑,就连”身经百战”的资深设计师,也会面临类似的瓶颈,只是深度不同。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  所以,如何settle、如何给设计作品后”定妆”,让终的设计脱颖而出?a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  下面这几条经验之谈能帮你搞定这个难题。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  一、层次a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  层次分平面和纵深。任何一个设计师,都应该充分意识到,有节奏的层次变化,能在客户内心产生微妙的化学反应。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  我们来举个栗子。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  这是一个简单的底图+文字(背景是卡塔尔航空),没有任何特别之处。然而却难题多多,不赶紧补救一下,根本拿不出手。首当其冲的是平面版式的层次,全部内容堆到一起,丢失视觉重心;其次是画面没有纵深感,稍作停留就觉得乏味。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

1.pnga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  「Before」a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  理一下思路,我们可以从这几个地方入手:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  一级标题、二级标题、正文的强弱层次区分开;a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  沿着左侧的机翼割裂方形框,形成纵深感;a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  来看看效果:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

2.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  「After」a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  看出区别了吗。按照刚才的思路稍作修改,是不是立刻焕然一新。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  原理很简单:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  通过后期将画面中的元素突出或弱化,人为的制造出视觉差,大大增强画面的立体感。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

3.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  「画面元素在人眼中呈现的先后次序」a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  在设计中多多运用这样的技巧,给自己的设计制造富有节奏的层次感,结果或许就大有不同。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  是为「设计后一公里」之层次。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  二、色彩a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  色彩一定要花功夫调整,否则或许原本不错的设计稿因为颜色用的不够“正”,就被可怜的打入冷宫。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  我们来看这幅图:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

4.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  毫无疑问,肯定是后者更舒服?可是凡事要多问为什么,我们把画面的颜色提取出来看看:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

6.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  左侧的色样超过10种,右侧的色样不过3种。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  永远记住,在绝大多数没有把握的情况下,要严格控制画面中颜色的数量,否则很容易擦枪走火。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  再来看另外一个栗子:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

7.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  同样的,将颜色提取出来,对应至色轮:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

8.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  发现症结所在了吗?a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

9.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  什么样的产品,就运用什么样的颜色组合。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

10.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

在设计选色上,自己总结了4种办法,效率非常高(也曾在公司内分享过):a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  近似色a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  互补色a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  同色系a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  自然(图片中)寻找a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  拿近似色来说,有现成的工具例如 Adobe Color,以及 Apple 设计师也在用的Color Schemer Studio 2 帮忙,在色轮上取正负30°的颜色,通常就是非常好的近似色组合。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

11.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  「Adobe Color」a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

12.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  「Color Schemer Studio」a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  我们将上图Color Schemer取的颜色来一次现场配色,是不是毫无违和感:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

13.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  「作品风格,按近似色重新组合」a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  再说互补色,色轮上对应的两个颜色就是视觉冲击强的颜色组合。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

14.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  但是千万不要拿来就要,先敲定一个主色和若干辅色:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

15.jpg
a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  再确定色块的比例:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  「比较常用的做法」a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  接着说同色系,这个比较简单,通过加深或减淡基本色,就可以定义一组可用的颜色出来:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

17.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

18.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

19.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  基本上是选定一种颜色后,分别叠加20%透明度的白色和20%透明度的黑色,得到了想要的同类色组合。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  后说说从自然中取色,拿一张大表姐的照片举例,放入Adobe Color 自动识别出图片中的主要颜色:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

20.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  「Adobe Color 识别颜色」a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  根据这几个颜色以及主辅色的比例,我们可以在短短几分钟就完成一个可用的版式设计:a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

21.jpga81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  「这里稍微提升了画面的亮度和饱和度」a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  假如在设计中发现作品不合心意,没准难题就出在颜色上。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  上述几个技巧在任何场景下都可以灵活运用,这下知晓该怎样做了吧。a81上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

原创不易,未经授权,严禁转载

原文地址:/i,72,6776,0.html

客户评价

更多+
  • 感谢特马资料qq群,系统提前完成,在整个项目周期内,特马资料qq群对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的特马资料qq群团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。假如想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的特马资料qq群(上海)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,要点是响应速度蛮快,有什么难题都会马上给你解决,公司很满意,因为他们全是针对每个项目建了相应的讨论组,有难题可以再里面提出,人员分工到位,解决难题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

All Rights Reserved.©2010-2016 特马QQ群|资料网站京公网安备 110105019435 京ICP备123124426号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:上海市辉瑞律师事务所。
嘿,我来帮您!