夜鹰教程网-程序员的加油站
 当前位置:文章中心 >> Gulp/Grunt/webpack
像懒人一样去设计
夜鹰教程网 来源:www.yyjcw.com 日期:2016-11-10 20:37:59
设计是简单的如果你知道要放的东西该放到哪。 曾经在某个电子杂志里看到一篇关于如何在平面设计中偷懒的文章,引发了我的一些思考,在平面设计中有这么多可以偷懒的方法,那在网页设计中是不是也有一些捷径可以探索?当然作为一个刚刚踏入网页设计领域的新兵
设计是简单的如果你知道要放的东西该放到哪。

  曾经在某个电子杂志里看到一篇关于如何在平面设计中偷懒的文章,引发了我的一些思考,在平面设计中有这么多可以偷懒的方法,那在网页设计中是不是也有一些捷径可以探索?当然作为一个刚刚踏入网页设计领域的新兵来说,这样的标题对我来说显得有点“大逆不道”,但如果不写下去,又觉得可惜。于是,文章也就写下去了……

  如果你刚打算从其他专业转到网页设计这个领域,那这篇文章是为你而写的,如果不是,那就当鉴赏一下精彩的图片吧。

  如果准备好了?那就开始回归正题吧!……

  世界上第一台电脑ENIAC的诞生是为什么?也许是那些研究员厌倦了周而复始的计算任务,想偷懒一下,所以造出了计算机以代替他们的机械劳动。网络出现是为了什么?也许是为了更好的接收外界最新鲜最劲爆的资讯,也许是为了能跟远方的亲朋通过网络来交流,也许是为了放松一下工作中紧绷的神经,也许是想足不出户就能得到天下万物,也许只是想知道自己不知道的问题。而这些也许都是因为人们太懒了,懒得去买报纸,看电视,懒得去跟朋友见面,懒得去运动放松,懒得去市场购物,懒得去查阅《十万个为什么》、《百科全书》。而网络的出现弥补了这些需求。难怪人越来越懒了……

  偷懒对于设计师是奢侈的,但是这不能阻止我们偷懒,因为用户都这么懒,我们不懒怎么能知道他们的需求(有些牵强的理由)然而我不是鼓励我们与老板做“非暴力不抵抗”运动,而是要让我们的工作更加有效率,这样就可以多享受几天准时下班啦!

  下面将要介绍的正是我为偷懒所做的努力。
一.网页模板化
网页设计有先天的制约因素,硬件制造商只给我们生产了前后滚轮的鼠标,很少见过横向滚动的鼠标,所以我们的页面一般是长条状的,然后在浏览器右侧给我们按了个滚动条就算吧我们忽悠过去了,而我们却还用得不亦悦乎。而页面的大小又要跟着主流显示器的分辨率而确定。难怪有人称我们是戴着脚镣的舞蹈家,我更原意称我们是顶着饭碗的舞蹈家,伺候不好这饭碗,摔了可就没饭吃。所以,舞要跳,饭要吃。后来我学聪明了,从来都只做1280px以内的页面,这样你好,我好,大家好。

  定好页面的大小后是不是迫不及待要爆发小宇宙了?爆发前,最好先确定好交互原型,因为设计师跟战士一个德性,打仗的时候不是有“一鼓作气,再而衰,三而竭”嘛,一但设计出一个“页面”(暂且称页面)发现脱离了交互原型,那返工可是既累又打击自尊的行为。

  在设计页面前我想跟大家分享一本“设计圣经”里的几句话“我们精心准备的页面在用户看来更像是‘以每小时100公里的速度驶过的广告牌’所以我们需要建立清楚的视觉层次,把页面划分为明确定义的区域”,把一些可以固定的模块都做模板化处理,对于有延续性的设计(如:绿钻有礼、绿钻音乐会)这样只要进行一次模块设计,后期可以不用经过设计环节,节约了大量的设计、制作、开发资源,也使得页面整洁,条理清晰。这样让我能在非模板区花更多的时间让页面变得更加精彩,多争取 “几秒”用户的时间。
  二.视觉规范化
“规范”一词最早被我接触应该是《小学生行为规范》的时候,从小我们都知道要爱祖国爱人民,为什么?因为他让我们的社会安详和谐,因为检查官懒得去解决这些小CASE,所以从娃娃抓起,从小培养我们做一个规范的好公民。

  咱们设计界也有规范,大型企业品牌都有自己的一套VI系统,这些都是对于品牌所做的规范,规范能让一些原则问题得到解决,网页设计里的一些门户级页面特别需要注意的是规范,这样能让页面统一,比如网页设计里的间距,小到几个像素(虽然网页就这么点像素)也都要实行规范,规范做好了,就像一个人的仪表,端庄就会得到青睐,我们应该不会习惯一脚穿皮鞋一脚穿拖鞋走在大街上吧?所以为了不XX用户的眼球,我们需要做这些规范,要知道这些规范可是一劳永逸的美差呀,规范做好了,即使下回不是由我来操刀,其他设计师也能根据它来修改页面,免去了沟通成本,我还可以抽点时间打个小盹。
       三.随时保存您的风格
这玩意儿太重要了,别看一些页面设计得多好看,那全是站在“巨人”的肩膀上的啊。PHOTOSHOP(这里不敢简写PS,因为它我差点过不了毕业论文)强大的图形编辑功能是不言而喻的,但是其中一些自定义保存的部分据我观察不是十分受到关注,Photoshop中的批处理、action、预设管理器那可是偷懒的“利器”啊。发现一个好的样式、色彩或者配色可千万别忘了保存,这些为工作提供了巨大的便利,如果为找不到合适的样式而发愁,不如寻找一套样式,然后在这基础上修改,我经常这么干。这样更加节约您的宝贵时间,让你将偷懒进行到底……
  四.善用填充图
设计活动页面就像在设计一张海报,需要给人丰富的视觉感受才能打动用户,然而比较偷懒的做法就是添加填充图,填充图就是以一个单一的小元素平铺成一个大的画面,设计填充图是一件有趣的事情,就几个像素的摆放能影响整个画面的效果,连续的图形在我看来会给人真实的材质感,让画面不再单调,使用恰当会让网页平面化,提升用户的视觉感受,这也是服装巨头们乐此不彼的手段,大家如果有兴趣可以设计不同的填充图。如果连这步都懒得去做的话,那还是去搜一下填充图制作网站吧,因为我懒得贴链接了。
       五.做立体效果
大学里老师总是跟我说“平面要不平那才有意思”我并不是要我们去把电脑屏幕给弄得跟哈哈镜一样。其实我们可以玩一些视错觉游戏,最近3D电影不是很流行么,我倒是期待有一天我们的广大网友能够戴着立体眼镜浏览网页,那是多大的欣慰啊……看来有点犯困才会想这么远,还是现实点,既然不能强迫用户去买立体眼镜那我们就直接做带点立体的设计吧,图个新鲜,网络嘛就图个新鲜。然而问题又来了,想做立体的东西但是苦于软件水平有限怎么办,那我就再向各位介绍一把PS的好兄弟Illustrator吧!Illustrator有一个滤镜可以实现3D效果,任意拖拽,任意透视角度,任意光源,总之太多任意了,加个贴图功能就是一个MINI 3DMAX拉!设置好参数然后导入PHOTOSHOP经过“大肆”渲染就可以上厅堂啦。立体设计使画面丰富,让人浮想联翩,方法挺简单,想偷懒的同学都尝试下吧!

  总结了自己这么多偷懒的办法,也希望对大家有点帮助,想偷点懒,早点结束这篇文章,祝看到这行的同学身体健康!万事如意!感谢!

复制链接 网友评论 收藏本文 关闭此页
上一条: photoshop--谈“通道”  下一条: AutoCAD模拟空间与图纸空间简介
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  热点推荐
快速批量去除图片水印效果
PS插件大全介绍
PhotoShop“自由变形”工具用法
如何制作透明效果水印字
PhotoShop方便快捷的实用小技巧
如何制作建筑效果图
菜鸟谈如何学习PS
用PhotoShop将模糊人物变清晰
PSD网页模版转化XHTML网页
对png8图片格式的误解
非主流ps教程实用的几种技巧汇总
JS实现模拟FLASH幻灯片图片切换网…
平面设计的7种表现手法
AutoCAD模拟空间与图纸空间简介
图像处理技术(二)
  最近更新
gulp自动化构建详解
gulp静态站点构建项目文件结构
设计师与客户在设计开始前需要讨论…
PhotoShop方便快捷的实用小技巧
PSD网页模版转化XHTML网页
平面设计的7种表现手法
对png8图片格式的误解
用好Photoshop的手足兄弟 ImageRe…
Adobe Photoshop常见问题之专家会…
如何制作建筑效果图
PhotoImpact 图像缝合
PS插件大全介绍
Photoshop之层、通道、路径详解
图像处理技术(二)
图像处理技术(一)

关于我们 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3