1、网页美工切图设计有哪些要点
如何做好网页美工设计,对于新手而言,这还有些小小的难度,尤其是当网页美工设计由几个人接手的时候。不过,其实只要掌握好几点,网页美工设计其实也不是十分困难的一件事。
在网页美工切图设计之前,我们先基于ps进行新建文件设置,在设置的时候需要注意以下几点:
1.一定要做好网页宽度的设置设计,一般网页宽度有760PX、900PX、1000PX等,最好不要超过1200PX的宽度,高度没有限制。大多数做网站的公司都有一个比较合理的标准。
2.作为网页背景、网页图标的要清晰,在网站设计的时候比较注重。所以在切图的时候不要切出来的效果与设计的效果相差太大。
3.有特效地方,有必要设计出特效样式,以便DIV CSS制作的时候切图使用。
4.在做成网页后可改变的文字,需要使用宋体、黑体无需修饰
5.细节一定要对齐
美工图设计好后要注意的两点:
1.导出JPGGIFPNG等格式观察效果。
2.不要合层,尽量保持每个文字图标图片都有独立图层,这样在DIV CSS切图时方便隐藏显示切图。
在新建设置之后,就要开始进行网页美工设计了,在网页美工设计的过程中要注意:
1. 注意页面的分块,着手设计一个页面的时候,你必须根据所掌握的内容,以及其风格,对页面的整体进行分块。分块是一个非常必要且难以掌握的技巧。对于一般杂志来说,它们是有边的,这意味着杂志美工设计师有边可循,依靠边来形成立体感,依靠边来产生未尽的意韵;但是对于web页面,边的概念被淡化了,屏幕可以上下左右的拖动。所以此时分块显得非常必要,目的也就是产生的效果。
分块可以用不同着色的色块、框、细线、排列整齐的英文等等,还可以混合使用,但是注意不要过于醒目,因为页面的重点在内容,而不在其他。
2、色彩的平衡与呼应。
1)色彩的平衡。色彩在页面中可以形成很多的效果,通过强烈的对比,可以突出页面的重点。还可以通过色彩调配,达到页面稳重度的改变。一般的情况下,页面上方的颜色总是很重,这样才能压住下面的颜色,如果不采取这种办法,整个页面将显得很不稳重,底下的文字图片,有飘出的意味。因此,要使整个页面显得很平衡,必须要有能镇住其他颜色的色彩。
2)色彩的呼应。一种比较突出的色彩,如果很突兀地放在页面中,无论你是突出重点也好,还是logo图标,都给整个页面带来了副作用。为此,你必须在相对称的位置加上该色系(对于页面并不醒目)的色彩以呼应,这样可以弱化这种视觉的冲击。
3、精确到1个像素
如果你是一个成功的页面设计者,你至少会在做出页面前已经把整个页面构思好了;如果你很宽容地对待图片中1个像素的差别,那说明你还不是很合格。
2、如何评价一套图标设计的优劣
一个成功的图标应该符合以下四个准则:
一、简明易认 便于记忆
设计成功的标志有良好的识别性与记忆度,不论是图形的还是文字的,不论是具象的还是抽象的,能正确传达特定产品或企业的个性特征。
二、内涵明确 个性突出
设计成功的图标其创意与造型应新颖独特,别具匠心,有鲜明的形式美和时代感,能给人以美的享受。
三、新颖独特 引入注目
设计成功的图标其创意与造型应新颖独特,别具匠心,有鲜明的形式美和时代感,能给人以美的享受。
四、永久性强 适合性好
设计成功的图标具有时间上的永久性和使用上的广泛性,可以在不同场合和媒体中使用。
设计成功的图标,应能从视觉上打进人们的心里,激发人们的购买欲望。在设计上,应该对标志的独特性、象征性、时代性、记忆性、应用性、组合性、变化性等进行广泛而深入的研讨,这样才能使图标设计达到上乘水准。
一个设计成功的图标,应该具备以下几个特点:
" 设计新颖独特
" 容易认知识别
" 个性品位突出
" 力求单纯明快
" 造型美观大方
" 适合性能良好
3、如何评价百度产品 logo 设计网页版和移动端的不一致
残酷的说,每个公司的底层员工(实施者)大多数以"做好"为目的,但是当你在大公司里走一遭就会发现,理想主义者是寸步难行的。像百度这种公司当然是不缺人才的,一个项目从构想到落地是需要忍耐的。百度的很多无线产品web产品并不是由一个team来完成的,所以沟通成本还是比较高的,统一性的工作大家都想做,但是很难推进,就如曾经我经历过的项目和其他团队沟通,需要小小的改动一下图标,然后推进了很久很久最后还是没办成。合作这件事儿,谁站在主场是很重要的,地位嘛是这样。
百度的口号是"简单可依赖"这五个字你必须牢牢记住啊!产品经理们会不断的提醒你啊有木有!看看网页产品的样式你们就懂了。
大部分无线应用都是继网页产品推出之后产生的,倘若无线客户端的风格真的follow了网页端,你们确定你们不会跳起来骂娘?客户端logo倘若跟网页端一样是 baidu(爪子)XX的形式,你确定你希望这么做?
其实最最最重要的是,当年厂长想出来的logo一直沿用至今,想改logo那太难了,有多少百度设计师的梦想就是换个高端大气的logo啊有木有!
最后一句,如果你查阅一下最早最早的logo,你会发现其实现在挺好的。
4、如何评价一个UI设计作品的好坏
1.交互性与易用性
不论是手机主题还是网站设计还是APP还是游戏,要让别人快速上手,能玩,能用,甚至用的简单,玩的简单,就算你采用多牛的设计都是没有用的。
2.色彩舒适度
人第一眼看到的,是事物的颜色,再是形状。所以,要注意色彩舒适度。一个第一眼看上去就杂七杂八,或者完全没有主次之分的简洁,或者看上去就没有视觉舒适度的饱和度或者明暗度不搭调的色彩,肯定不会受欢迎的。
3.信息可读性
有了文字基础,处理好每个模块的布局,色块,插图,背景等方面,会让你的信息有较强的可读性。别跟着你的爱好走,把设计作品中你最想传达的信息传达出
去,就算某些信息被别人忽略了,你依然是成功的。如果用户连看都不想看,连最基本的信息都没法传达,那么你的设计是没有任何价值的。
4.文字的主次
任何设计作品都要传达信息传达思想,信息文字的每一个细节,都决定了一个设计要传达的思想主次,记住,你是要引导别人去看,而不是别人引导你去设计。
这世上没有一个真正定死的文字标准,但是最基本的,至少让别人看清你的文字是写的什么,所以,文字之间的不同色彩,也是能让文字主次突出的方面
5.UI识别性
这一点在图标上味道非常浓,不论你设计的是扁平化还是拟物化还是梵高风格,不一定要3秒看出图标的意思,也要让人欣赏这个图标美感的同时,大概“心里知道”。这个图标要传达的信息,图形的意图,都是设计者考虑的。
6.思想,生活的传达
作品是什么样,一般能从另一个层面看出一些设计师对生活对工作对感情的态度和状态,所以别小看一个作品的力量,它可能就是传达你自己真实内心的一个媒介,可能你并未发现,但是旁观者已经发现你了。
5、UI设计和网页美工的区别是什么
UI设计只是网站美工的一部分,网站美工需要学习的内容有UI设计,PS,AI,html语言,javaScript语言等。
网页美工局限于美术设计和页面制作,UI注重交互,用户体验是第一目标。
UI设计师的职能大体包括三方面:一是图形设计,软件产品的产品“外形”设计。二是交互设计,主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计,并且确立交互模型,交互规范。三是用户测试/研究,这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量UI设计的合理性。
网页美工需要学习网站概念知识、色彩构成、网页设计中的美学规律、FIREWORKS网页图形处理、FLASH二维动画、PHOTOSHOP平面设计软件在网站设计中的应用、作品设计及点评等内容。
UI设计:UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。
网页美工:是精通美学,photoshop(PS),FLASH,dreamwaver(DW)等一网站制作软件的网络人员,必须具有良好的创意和一定程度的审美观。必要时需要一定的策划知识。为网站所有的页面画出来并用DW和css排版出来。页面必须清晰简洁,还要适宜后台调用。
6、网页设计图标怎么做
你指的是 上面的小红圈效果吧?
要点,将小红点父级CSS的position设置为relative;
将小红点本身的position设置为absolute,然后利用top和 right属性来调整位置.
示例代码:
<style type="text/css">
.box{background:#455996; padding:10px; height:20px;color:#eee;font-size: 12px;}
.box div{ float:left; line-height:20px;}
.bt{ background:#405287; padding:0 20px; margin:0 10px; position:relative;}
.bt span{ display:block; position:absolute; line-height:14px; width:14px; height:14px; background:#F00; top:-5px; right:-5px; text-align:center;}
</style>
<div class="box">
<div>欢迎你:欧阳XX</div>
<div class="bt">消息<span>0</span></div>
<div class="bt">注销</div>
</div>
7、网站界面设计是好还是坏该如何评判
我们经常需要叫非职业设计师来评判界面设计的好坏。也许你是老板,要评估自己的新网站设计情况,或者你是项目经理,要查看你的设计师制作的网站模型。你该在网站界面设计中发现什么呢?谁都会无关痛痒地说“这个看起来不错”或者“这个好像不怎么好用”,但是怎么才能给出有意义的反馈呢? 对设计的全面深入理解并非一篇文章所能概括。本文提供一些对你有所帮助的指导原则。开始之前,为你提供一个范例。这是我最近做的一个界面评论文章,针对的是尚未发布的Firefox Add-On Builder界面。这个Add-On Builder属于Jetpack project 的一部分,你可以用这个中等复杂度的Web应用,方便的在线开发Firefox和Thunderbird扩展插件,然后将你开发的插件发布到网上供全世界网民下载。我对这个界面做了个超大的截图,评论也写在里面了。提醒:鼠标滚轮缩放图片,双击放大,可以拖动。点击:到新标签页中打开大图片何时让你来评论界面?“什么时候做界面评论”是“如何做”的首要考虑因素。如果是在产品或者网站即将面世之前,那么你只能给些小的建议,因为已经没多少时间让你的反馈有大的影响了。你对相关作品的评论越早,你的话就越有影响力。减少交互界面设计的最高境界是让用户忘掉界面,忽略界面的存在。虽然拥有丰富交互的界面看起来很华丽,但只有用户使用你的产品时所需步骤最少时,才能减少可用性带来的问题。有一些新闻类网站喜欢把文章分很多块,然后分页来显示,所以用户不得不一直点击“下一页”来等那么多广告下载完才显示出页面。大多数人都会讨厌这种做法,所以根本不会读完一篇文章。这就是交互过载的表现。(译者注:国内门户网站都这样,主要是流量考虑)仔细思考一下,用户使用你的产品时所作的每一小步都是必要的吗?如果你也觉得麻烦,那就去简化一些。例子:学学泡泡网的绝佳设计吧视觉位置确保你的按钮、链接和交互动作都正确地进行了逻辑分组。经常可以看到“保存”按钮紧挨着“关闭”按钮,这意味着用户的一个小小的错误就可以带来灾难性的后果。例1-Gmail的发送和舍弃按钮相隔甚远例2-人人网站内信的发送和取消用颜色识别开(其实可以做的更好)例子:淘宝商城的图标制作很见功力,配合文字使用恰到好处。例子:豆瓣的3个核心频道,良好起点和一致性的典范。选项少意味着担忧也少为一个动作(比如注册)提供多种选择会给用户带来无形的负担,要尽量避免这样。给用户提供很多选项似乎是个好主意,实际上却非如此。这样容易使界面膨胀,让用户做过多不必要的决定。例子:再看看宏碁的相对复杂设计。界面重要,交互更重要相比于产品的使用感受,它的外观更容易引起注意。要避免把大多数时间都花在产品外观上的陷阱。外观容易改变和改进,相关的瑕疵毛病也容易发现。但是交互才是产品的核心,把多数时间花在处理产品交互问题上,最后再把外观表现做好!例子:看这个日期提醒,交互更重要。
8、UI设计作品的评判标准有哪些
一、交互性和易用性。
UI设计是非常注重交互的,因为一定要让用户满意,让他们在使用的过程中不会有很多的疑惑。如果你的设计很炫,但是用户完全搞不懂,这也是没有用的,所以说设计的一定要简单易上手。