配色设计参考方案—–构图必学

发表于 2012-02-04 16:12 浏览次数:1,580 views 来源:

 

一、红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
       1、在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。
       2、在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。
       3、在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。
       4、在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。

二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中,最为娇气的一种色。只要在纯黄色中混入少量的其它色,其色相感和色性格均会发生较大程度的变化。
       1、 在黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失,趋于一种平和、潮润的感觉。
       2、 在黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
       3、 在黄色中加入少量的黑,其色感和色性变化最大,成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
       4、 在黄色中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易于接近。

三、 蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一个深 远、广埔、平静的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、 橙、白等色,均不会对蓝色的性格构成较明显的影响力。
       1、 如果在橙色中黄的成份较多,其性格趋于甜美、亮丽、芳香。
       2、 在橙色中混入小量的白,可使橙色的知觉趋于焦躁、无力。

四、绿色是具有黄色和蓝色两种成份的色。在绿色中,将黄色的扩张感和蓝色的收缩感相中庸,将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
       1、 在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。
       2、 在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。
       3、 在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。

五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
       1、 在紫色中红的成份较多时,其知觉具有压抑感、威胁感。
       2、 在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。
       3、 在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。

六、白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。
       1、 在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。
       2、 在白色中混入少量的黄,则成为一种乳黄色,给人一种香腻的印象。
       3、 在白色中混入少量的蓝,给人感觉清冷、洁净。
       4、 在白色中混入少量的橙,有一种干燥的气氛。
       5、 在白色中混入少量的绿,给人一种稚嫩、柔和的感觉。
       6、 在白色中混入少量的紫,可诱导人联想到淡淡的芳香。

网页设计师—–北京火力方网络科技有限公司

发表于 2012-02-04 15:10 浏览次数:1,135 views 来源:

 

网页设计师

北京火力方网络科技有限 公司

公司规模:50 – 99人
公司性质:私营.民营企业
公司行业:互联网·电子 商务,医疗·保健·美容·卫生服务,教育·培训·科研·院校
  • 职位性质:全职
  • 发布日期:2010-3-31
  • 工作经验:1-2年
  • 学历要求:不限
  • 招聘人数:3人
  • 语言能力:不限
  • 职位月薪:3000~3999
  • 简历语言:中文
  • 其 它待遇:项目奖金、保险
  • 工作地点:北京
职位描述:
1.热爱网站设计行业;
2.有扎实的美术功底,有良好的创意思维和理 解能力;美术/艺术设计专业优先;
3.熟练使用 Photoshop、illustrator和Flash等网页设计相关软件,具备独立设计网站页面能力;
4.了解HTML,CSS,熟悉 FLASH,有网站设计制作经验者优先;
5.具有强烈的责任心和良好的团队合作意识,较强的自主学习能力;
6.一年以上相关工作经验优 先,应聘者需提供相关网页、FLASH或平面设计作品。
联系方式:
地址:光华路12号中国纸院1号楼500室
邮 编:100000
公司网址:http://www.firealm.com/
E-mail:firealm_hr@sjweb.cn
公司介绍:
火立方简 介:火立方网络科技公司诞生于数码网络新世纪,以网络营销咨询,网络营销策划,网络营销培训,网络营销全案托管为主要业务。自成立以来一直专注于医院、医 疗领域的网络营销策划服务,深谙网络营销策划之道。能够运用多种网络营销整合方法,依托强有力的战略合作资源和自身优势明显的技术力量,建立“整合+转 化”新式营销模型。在帮助患者便捷获取高质量信息的同时,更是最大限度的帮助医院带来患者,最终达成有效营销。火立方团队:火立方旗下云集各网络营销策划 精英,营销策划团队百分之五十以上人员均实际操作过医院网络营销,全部是目前国内医院网络营销领域的顶尖精英。火立方从前期策划、用户心理分析、网站用户 体验设计、整体SEO思路、技术代码结构优化、内容原创和引导、广告投放策略、网络互动性、咨询客服指导、详实数据分析,均有深入研究,以专业服务力争为 客户带来最大效益。
关键字: , | 分类: 就业中心, 招聘信息 | 评论数: 0 | 阅读全文

网页设计从优秀到卓越的几个设计细节

发表于 2012-02-04 11:48 浏览次数:1,332 views 来源:

优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品。通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别。

一、合理使用渐变
渐变不要滥用,更不要把渐变弄的跟彩虹似的,否则你的网页作品看起来比较外行。总而言之,合理的使用渐变对于优秀网站设计是有帮助的。

渐变、散景结合使用
Newism网站色彩丰富,但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果,可以去Abduzeedo’s tutorial网站上面学习一下。
jiaocheng01
渐变、投影、纹理结合使用。
OnWired网站应用了这些设计技巧,显而易见,他的设计作品效果是很棒的!自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处 的。我也特别喜欢设计师设计的这些。
jiaocheng02
二、留白
留白一词往往容易被误解从字面解释 的空白。网页设计较 为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它 的。
“留 白”对于网页设计是很重要的,留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题,他们在做设计的时候将整个页面放的满满 的,没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题,如果内容放不下的话,他们可以借助浏览器的滚条来扩大页面的空间。

优秀的留白与巧妙的分割线
Snook网站布局方面设 计的是比较合理、舒服的。同时注意一下,网站里面的虚线将各个板块区分开了,这样我们在浏览网站的时候就一目了然了。
jiaocheng03
抽象图形
沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像,给浏览者的空间是流畅、舒服的。
jiaocheng04
三、网格布局
网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象,从好的设计到生活中的交通网。
960蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局,它简单、重点 突出。你可以用任意对齐方式来安排你网站的元素,对齐在设计一个复杂的页面时,能使你的网站看起来比较精致、井然有序,并且你在网页布局里面添加任何模块内容时候都不用考虑其他的模块内容。

综合使用网格布局
Poccuo网站综合使用了网格布局,它采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。
xuexi01
博客采用列布局
我比较喜欢Web Design Ledger首页最上面的展现方式,他把最新的公告内容放大同时放到页面最顶部,其他的以3列的方式排列。
xuexi02
大量使用相等的列布局
Ecoki漂亮的网页布局显而易见采用的是4列、2行布局,同时幻灯片、缩略图、最新的审 查也是采用相同的方式。
xuexi03
四、改善字体应用
字体应用困扰着大多数的设计师。如果要想提高你的设计水平,字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色,同时还可以增加设计作品的 氛围。

用对比字体引起关注
SimpleBits网站在应用各种对比字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。
jiaocheng05
不要认为字体就像标志
这个网站看齐来就非常的漂亮、舒服,但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的,我就被他的logo字体应用迷住了。
jiaocheng06
五、明确而有效的导航
良好的导航对于网页设计来说很重要,如果浏览者不能快速、便捷的找到它,他们就很有可能去别的网站了。这是我们所不愿意看到的,同时我知道 MyInkBlog进行了一些改进,并将在以后重新设计中进行彻底的改进。

博客导航下面显示分类导航
在大多数情况下,博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做了一件了不起的事情,他把浏览者关心的photoshop资源以生动的方式展现出来了,并且在鼠标经过二级导航的时候有一个高亮效果。
jiaocheng07

切换不同的图标效果
图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用,并且成为 一种趋势。并不是所有的都是不好的,web2.0里用的不好的原因是过度使用、业余使用造成的。在大多数情况下,适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果, 并且于他的网站整体感觉想吻合。
jiaocheng08
六、使用漂亮实用的页脚
一开始我们就将页脚作为次要的内容,在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来越重要了,千万别错过好的页脚完成你设计。

展示大量的信息和证书
这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。
jiaocheng09
添加搜索功能
Elliot Jay Stock’s网站在底部添加了一个特大的搜索框…
jiaocheng10

来源: 菠菜博

浅谈网页UI设计之Logo

发表于 2012-02-04 11:47 浏览次数:1,207 views 来源:

  前一篇讲到Banner是整个页面中最醒目的元素,也是占用空间最大的区块,而Logo 则是代表站个网站乃至公司的形象的,网页中的Logo基本上会出现在整个网站中的所有页面,其重要性不言而喻,现在的Logo越来越具有创意性,越来越简单、干净、直接等,但这并不影响网站形象,这是互联网潮流趋势和设计理念的动向。好的Logo可以直接代表了网站的灵魂,甚至延伸致产品、文化、精神、理 念等,好的Logo也刻画出作者的风范,甚至能体现出蕴藏在作者心中的寄托和心血。怎样才能设计好网站Logo不是在这里能说清楚的,让我们先看看现在比较流行且比较成功的例子,并向大师们致敬。

1.纯文字
最直接的表达方式,不作修饰和掩盖…

logo_1

2.文字加点缀
洁简的文字加上创意的矢量图形点缀…这类风格Logo使用最广泛。

logo_2

logo_3

3.带3D元素和质感
3D质感的logo相对比较少,除了流行趋势外,主要是和网络产品文化有关。

logo_4

4.暖色简洁矢量
优秀Blog和个人站点比较常用的风格。

logo_5

                                                                                                                                                                                                                                                                                       来源:www.zhouwenqi.com

产品UI设计流程

发表于 2012-02-04 11:37 浏览次数:1,268 views 来源:

        其实对于产品UI设计流程特别是对于大型的互联网公司的要求特别高,经过不断的挑“刺”后才得以面世,得到的设计稿件完全与最初版本不同,商业类的产品会让产品和商业气息相兼容,与UI设计师的最初思想完全不同,而UI设计师会将自己的风格带到产品中来,会给产品灌输一种“性格”,该产品特有的 “性格 ”。
一般公司只将把UI设计流程分为四个简单的阶段:分析、设计、配合、验证。

1、分析阶段
需求分析、用户场景模拟、竟品分析(聆听用户心声)。

        需求分析:对于一个产品来说,必然有对用户需求的分析内容,更多的是从MRD与PRD获得,或者从产品需求评审会议上得到需求分析的内容,当然可以直接与产品经理交流获得相关产品需求。如果说设计原则是所有设计的出发点的话,那么用户需求就是本次设计的出发点。
        用户场景模拟:好的设计建立在对用户深刻了解之上。因此用户使用场景分析就很重要,了解产品的现有交互以及用户使用产品习惯等,但是设计人员在分析的时候一定要站在用户角度思考:如果我是用户,这里我会需要什么。
       竞品分析(聆听用户心声):竞争产品能够上市并且被UI设计者知道,必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性,看到别 人的设计会有触类旁通的好处。当市场上存在竞品时,去听听用户的评论,哪怕是骂声都好,别沉迷于自己的设计中,让真正的用户说话。

输入物:MRD、PRD、市场需求文档、市场调查报告、竞品分析文档(或其一或全部)

输出物:设计初稿(或许只是几个简单的界面)

2、设计阶段
设计方法采用面向场景、面向事件驱动和面向对象的设计方法。面向场景是针对该产品使用场所等模拟,模拟用户在多种情况下产品使用的模拟。面向事件驱动则是 对产品响应与触发事件的设计,一个提示框,一个提交按钮……这类都是对事件驱动的设计。面向对象,产品面向的用户不同对于产品的设计要求不同,不同年龄层 的用户对于产品的要求不同,产品的用户定位将对UI设计师影响因素。

输入物:交互文档(高保真原型)

输出物:设计终稿(所有的设计稿)

3、配合
UI设计师交出产品设计图时,更多的配合开发人员、测试人员进行截图配合。配合开发人员对于PSD格式的图片切图操作,对于不同的开发人员的要求,切图方式也有不同,UI设计师需配合相关的开发人员进行最适合的切图配合。

输入物:设计终稿

输出物:设计修改稿(设计稿切片)

4、验证
产品出来后,UI设计师需对产品的效果进行验证,与当初设计产品时的想法是否一致,是否可用,用户是否接受,以及与需求是否一致。都需要UI设计师验证,UI设计师是将产品需求用图片展现给用户最直接的经手人,对于产品的理解会更加深刻。

输入物:产品

输出物:产品(面向用户最终版本)

        产品UI设计中夹杂着许多设计原则要求,统一公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。UI设计师应该分析公司产品的特点,制定符合产品生命周期的UI设计流程。每个产品的生命周期中,UI设计师应该严格按照流程,完成每个环节的职责,确保流程准确有效的得到执行,从而提高产品的可用性,提升产品质量。

       建议:UI设计师有自己的风格,同样有自己的个性,建议在时间充裕时,UI设计师做二套设计稿,一套适合企业的,一套适合自己的,当老板对企业那套设计不满意时,将适合自己的一套展示给用户,或许会有不同的效果!

 

                                                                                                     来源:http://www.537520.com/

浅谈网页UI设计之Banner

发表于 2012-02-04 11:37 浏览次数:1,450 views 来源:

       关于网页UI,UE之类的论点文章网上太多了,更多大师将这些分析到极致,无论是开发领域还是设计领域,这些真正的大师所发表的文章都从不卖弄自己,更多的分析而无私的供献自己的独道见解,他们所写博文与其它政治、娱乐、商业等领域所发表的博文完全不同类型,我不是大师,但我很崇拜大师。

  一个页面最醒目最吸引用户的应该是Banner了,尤其是Web2.0平台Banner显得更突出,Banner主要体心意旨,形象鲜明的展示所要表达 的内容。因为它醒目,所以放一个很糟蹋的Banner上去效果也当然“醒目”了。因此网页Banner设计在这里起到了至关重要的作用,特别是首页的 Banner,直接决定了用户的停留,下面让我们通过大量优秀的案例进入Banner,走进大师们的灵感世界。

1.大面积的Banner

Banner_1.jpg

http://www.tearoundapp.com/
这个Banner非常直接的采用了一个很大的iPhone图片,用户几乎不用思考的就知道网站的大概内容,而且加上与产品类似风格的功能按钮直接展示了部分功能,大的Banner最直接最醒目,处理也最需要谨慎,否则事关功倍。

其它类似Banner

Banner_2.jpg

Banner_3.jpg

Banner_4.jpg

2.文字与图片1/2比例

Banner_5.jpg

http://www.scrapblog.com/
这种Banner不是很大,虽然文字与图片占居空间相等,但加上大的Button让文字内容相对比较醒目,这种Banner的处理重点在于背景与和图片和文字的协调,比例要均匀。

其它类似Banner

Banner_6.jpg

Banner_7.jpg

Banner_8.jpg

3.人物与文字

Banner_9.jpg

http://www.showandtellsale.com/
采用人物加文字内容,让主题思想显得更鲜明活动,人物可以更直接更友好的告诉用户这里有什么?

其它类似Banner

Banner_10.jpg

Banner_11.jpg

Banner_12.jpg

4.创意矢量图形

Banner_13.jpg

http://ideafoundry.info/
纯鼠绘而且的矢量CG图形,独特创意和视觉冲击,精致的矢量风格与网站整体完美结合,体现出网站整体实力。

其它类似Banner

Banner_14.jpg

Banner_15.jpg

Banner_16.jpg

Banner_17.jpg

Banner_18.jpg

5.软件产品界面

Banner_19.jpg

http://bydreamtime.com/
大凡软件产品服务网站都将自己的产品界面直接融合在Banner中,加上文字与个性Button,可以让用户直接深入的了解产品基本功能和构造,甚至会激起用户想立即试用的欲望。

其它类似Banner

Banner_20.jpg

Banner_21.jpg

Banner_22.jpg

Banner_23.jpg

Banner_24.jpg

Banner_25.jpg

6.线条与光线

Banner_31.jpg

http://www.scarbantia-art.hu/
渐变的背景在融入线条元素,让Banner更加动感夺目,单色或多色的光线让线条和背景更加炫彩,使Banner充满迷幻进一步刺激用户的探索欲望。

其它类似Banner

Banner_32.jpg

Banner_33.jpg

Banner_34.jpg

Banner_35.jpg

7.纯文字内容的Banner

Banner_26.jpg

不需要华丽的背景,更不需要图片的点缀,只需要一段文字加上单调的背景色….

http://enviramedia.com/

其它类似Banner

Banner_27.jpg

Banner_28.jpg

Banner_29.jpg

Banner_30.jpg

      由于时间有限更多经典案例没来得及整理和未被发现,不同类型的网站搭配不同类型的Banner,Banner的主要功能到底是诱导用户,还是展示形象,还是刺激神经,这些观点都有它的支持者,所有Banner的核心共同点是让用户在短时间内将鼠标滑上去点击。做到这一点,设计人员还需要好好的琢磨。

中科院DIV+CSS布局网站视频教程—-乐视清晰版全集

发表于 2012-02-04 11:30 浏览次数:12,477 views 来源:

《中科院DIV+CSS布局网站视频教程》

    本视频为中科院新科海学校出品,马学犇老师主讲.更多信息请访问网 站:http://www.jobedu.com.cn/,咨询QQ750059,903367690,电 话:010-82622282,010-82622285

中科院Hibernate开发与实战视频教程—–乐视清晰版全集

发表于 2012-02-04 11:17 浏览次数:6,969 views 来源:

中科院Hibernate开发与实战视频教程—–乐视清晰版全集

    本视频为中科院 新科海学校和v512工作室共同出品.刘伟、张利国老师主讲. 更多信息请访问网站:http://www.jobedu.com.cn/,咨询QQ:373750059,903367690,电 话:010-82622282,010-82622285.




返回首页 | 关于我们 | 联系我们 | 乘车路线| 地铁路线| 学生住宿| 周边环境| 人才招聘 | 网站地图 | 友情链接 | 版权声明