网页UI设计:再见!差不多先生
安安 2017-11-22 来源 :网络 阅读 1277 评论 0

摘要:本篇网页UI设计教程将为大家讲解网页设计的知识点,看完这篇文章会让你对网页设计的知识点有更加清晰的理解和运用。

本篇网页UI设计教程将为大家讲解网页设计的知识点,看完这篇文章会让你对网页设计的知识点有更加清晰的理解和运用。


关于差不多先生

  你知道中国最有名的人是谁?

  提起此人,人人皆晓,处处闻名。他姓差,名不多,是各省各县各村人氏。

  差不多先生常说:“凡事只要差不多,就好了。何必太精明呢?”

  他小的时候,他妈叫他去买红糖,他买了白糖回来。他妈骂他,他摇摇头说:“红糖白糖不是差不多吗?”

  他在学堂的时候,先生问他:“直隶省的西边是哪一省?”他说是陕西。先生说,“错了。是山西,不是陕西。”他说:“陕西同山西,不是差不多吗?”

  后来他在一个钱铺里做伙计;他也会写,也会算,只是总不会精细。十字常常写成千字,千字常常写成十字。掌柜的生气了,常常骂他。他只是笑嘻嘻地赔小心道:“千字比十字只多一小撇,不是差不多吗?”

  有一天,他忽然得了急病,赶快叫家人去请东街的汪医生。那家人急急忙忙地跑去,一时寻不着东街的汪大夫,却把兽医王大夫请来了。差不多先生病在床上,知道寻错了人;但病急了,身上痛苦,心里焦急,等不得了,心里想道:“好在王大夫同汪大夫也差不多,让他试试看罢。”于是这位兽医王大夫走近床前,用医牛的法子给差不多先生治病。不上一点钟,差不多先生就一命呜呼了。

  这是胡适先生创作的一篇传记型题材寓言,通过这篇小小的寓言,我们认识了这位差不多先生,而在看了这么多关于差不多先生的荒唐事迹之后,我相信大家都不想成为差不多先生这种人。但是细细想想,是不是隐隐觉得自己身上还是有着差不多先生的影子呢?我们是不是常常也抱着“差不多”的态度对待生活和工作呢?在做网页设计的过程中,我们是不是也有过“差不多就好了”的想法呢?

  其实大部分的时候,我们并不是有意要成为差不多先生的,我们常常会觉得,这个页面的色调也不错,结构也还行,一切看似差不多了,但是又觉得好像还差点什么,但又不知道该如何继续深入下去。下面,我们假设差不多先生是位设计,我将一面给大家展示一些他的作品,一面介绍一些方法,希望能够帮助你走出这种“差不多”的状况。

  差不多先生的作品(一)

网页UI设计:再见!差不多先生  

  这是一个局部内容的排版,看起来似乎一切都差不多,标题和内容文字有做区分,条理清晰,内容与板块间也有留白。但是你可知道正是这看似不起眼的留白也能对我们的设计画面产生影响呢!

网页UI设计:再见!差不多先生 

  我们稍微做一点优化,只是把间距和留白的大小调整了一点,甚至是几像素而已。相比之下条理更为清晰,可读性更强了,网页的品质也得到了提升。原来只需要小小的调整一下留白的多少,画面效果会相差这么多~

  拒绝“差不多”的留白 (如何聪明的运用留白?)

  留白很重要,但是我们常常会不知道设计中应当怎样留白,多了会不会让页面看起来空空荡荡,少了会不会拥挤不堪?因此才无意的成为了差不多先生。各种不同情况下,留白的要求都不尽相同。这样就需要你不断训练自己,对留白所能带来的改变做到时刻心中有数,从而有效地利用留白满足设计需求。

  下面让我们从别人的作品中学习一些经验,好让我们远离“差不多”的留白。

 网页UI设计:再见!差不多先生

  设计师通过大面积的留白与随意摆放的物品相结合,让整个网站的氛围轻松活泼,具有极佳的亲和力。

 网页UI设计:再见!差不多先生

  在大空白上展示的元素往往更具吸引力

网页UI设计:再见!差不多先生 

  有的时候我们会因为文字太多而把留白的部分减少,被迫做了差不多先生。但是我们知道,如果你硬要把东西塞得满满的,会让你的页面风格连同设计的品质,一起流失掉。所以即使再多得内容,我们都需要适当的给页面一些呼吸的空间。

网页UI设计:再见!差不多先生 

  恰到好处的留白让你的页面脱离条条框框的束缚。

  小方法

  1.  心理上不要害怕留白会浪费空间。要相信恰到好处的留白可以让你的画面更具品质感。

  2.  不断尝试,直到找到最佳方案。久而久之,你将会成为留白的高手。

  3.  在设计的过程中,不断的将页面缩小看,能够看出一些问题哦!

  差不多先生的作品(二)

网页UI设计:再见!差不多先生 

  差不多先生的按钮设计,看起来似乎也没问题,色彩分明,凹凸感也有,按钮的效果已经出来了,好像也差不多了~其实我们只需要稍微多注意一点细节问题,效果看起来就会不一样的。

 网页UI设计:再见!差不多先生

  其实问题就出在,一些小小的细节上,只需稍微的用心一点,就能让整个按钮看起来更为精致!那么我们为什么还要做差别不多先生呢?

  拒绝“差不多”的细节(如何进行微妙的细节处理?)

  我常常会感叹,为什么别人的设计看起来如此精致,自己就算是临摹也总是感觉缺点什么,我想原因就在细节这里吧。这就要求我们在观察别人作品的时候更加的仔细,这样才能看出其中微妙的细节设计。

  下面我们来仔细的瞧一瞧这些巧妙的细节设计,让你不做差不多先生~

网页UI设计:再见!差不多先生 

  例子 1 中,绿色内容框的边缘有一条更亮的绿色线。而例子 2 处,区块内边缘有柔和的渐变阴影,而边缘之上还有一像素的白色描边。这做法非常聪明,用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果,有助于将注意力吸引到下面的白色区块中去

网页UI设计:再见!差不多先生 

  渐变几乎是最被滥用的设计方法之一,大部分人都不太注意渐变,不过运用成功的话,还是能让设计增色不少,这也是让你快速出效果的一种好方法哦。

网页UI设计:再见!差不多先生 

  材质性背景运用非常重要。过于复杂的背景会分散读者注意力,最终使得设计品质大为降低。所以最好还是保持背景材质细微而柔和。当然,好的材质的使用,会让原本较为空洞的设计增色不少。这个网站在运用材质打造整体风格和设计品质方面做得挺好。

  小方法

1. 心理上,不要担心细节太细微,太不明显。我们要相信,可能人们并没有清楚地意识到这些细节的存在,但是他们确实已经对我们的设计产生了影响。

2. 思考像素级问题。描边、渐变、线条、阴影等等,不用太宽大也能有效增强设计的品质。

3. 创建细节图层。不要过多得依赖一个笔刷或者一个材质,多加些图层,多做点细节。

4. 不断的进行前后对比。应用效果后注意与没有这种效果之前进行对比。这样你就能知道这些细节到底带来了哪些改观。可以让你再下一次的应用时,得心应手。

  差不多先生的作品(三)

 网页UI设计:再见!差不多先生

  虽然在一些特定的环境下要做创新,确实挺难的,或者是不允许的。但是我还是想让大家看见,在允许的条件下,做一些合理的创新,能够为我们带来的其实是不一样的惊喜!

  那么看看他们是如何勇敢的拒绝差不多想法的吧~

  拒绝“差不多”的想法(我们需要勇敢的做一些创新)

网页UI设计:再见!差不多先生 

  这个网站在做导航的时候是有一些新的突破的,但是这种突破并不突兀,我觉得它在这里非常符合该网站的设计风格。

 网页UI设计:再见!差不多先生

  这个网站只有一个目标,向你展示他们充满智慧的作品。所以没有用太多的文字,鼠标滑过色块,呈现给你的就是作品截图。我想在这里用上这样与众不同的导航,也并不过分,反倒增添了许多特色。

 网页UI设计:再见!差不多先生

  这是一个小游戏的网站,这种导航的形式算是使用的比较广泛,算不得什么创新,但我想说的是,这种导航的使用,的确对整个页面的氛围烘托起了很大的作用。在专题设计中,我们也可以尝试,打破常规,做一些有利于烘托氛围的设计

  大胆创新,小心应用

  虽然我们想要拒绝差不多的想法,但也不能过于盲目主观的去做一些设计,毕竟我们是在做设计,不是在搞艺术,在做创新的时候始终需要记住:如果你打算做一些特立独行的事,先问问自己:

  “真的有必要吗?实现起来方便吗?”

  “这样说得过去么?是不是符合页面的整体风格?”

  “和品牌诉求相符吗?”

  如果答案是肯定的,再采取行动!

  写在最后

  其实我今天只是想借差不多先生这个角色,同大家分享一些关于网页设计进一步深入的一些技巧和方法。看看这些简单的小方法,精益求精就不再像想象中的那么难了。只要我们摆脱差不多先生的影子,再多思考一点,多尝试一点,你设计的品质将会大不一样的~

  在我们的设计看似差不多的状况下,

  试着调整一下留白,

  试着添加一点细节,

  试着注入一些新鲜想法,

  就此与差不多先生挥手道别吧!


    希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标网站设计频道都能找到!

本文由 @安安 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程