导航:首页 > 万维百科 > 网页做界面设计

网页做界面设计

发布时间:2020-10-14 16:21:02

1、网页界面设计

UI设计即User Interface(用户界面)的简称。简单的来说就是图形界面设计师(ps:这个职位可以不用写html这类的,但是最好要了解html,因为这样更有利于设计出来的页面适合后面的重构师开发)
然后还有就是上面提到的页面重构师:他的性质就是把页面设计效果图,用HTML+CSS改造成网页
然后这里面还会衍生一个前端开发的职位,他的性质是给上面的网页加入前端脚本,实现一个互动效果,比如我们常见的图片滚动,动画,还有表单验证等等常见的效果
然后就是后端程序员了(这里面可能还会衍生专门做数据库)反正这类人,就是把网站实现动态,与数据库对接
(ps:不做过多阐述,有不明白可以问我)

2、网页设计制作详细流程

分析如下:

1、首先下载安装Dreamweaver,打开后,新建一个网页,一般选择“HTML”建立网页。选择“经典”界面,有助于我们更便捷使用这个软件。

2、下面选择这三个界面,代码、拆分、设计,一般默认设计界面,对于新手这个功能具有可视化,能更好的制作网页。

3、下面我们来制作网站站点,在电脑上建一个文件作为根目录。我们所建网站的所有文件和网页都保存在这个文件中。站点的作用就是使你的网站网页之间框架清晰。同时给站点起个名字。

4、然后再在站点根目录下建立一个专门储存网站图片的文件,并设置默认。这样你添加到这个网站的所有图片都自动保存到这个文件,不会丢失。注意文件命名要用英文。下面我用我建立的(篮球资讯网)来介绍,点击右下方篮球资讯网——下拉点击管理站点——点击高级设置——设置默认图像文件夹为刚建立的images。保存。

5、下面我们来制作这个网站首页,先学习添加图片。插入——图像——选择素材添加。点击图片,下面属性可以编辑修改图片大小,添加超链接等等。下面我修改图片大小做示范。

6、下面学习添加文本。编辑“篮球资讯网”,下面属性可以设置文本字体、添加超链接等等,点击页面属性,可以详细编辑文本属性。

7、网页基本就是文字和图片的组合,添加视频还需要学习者好好搜索Dreamweaver 的使用视频加以学习。最后制作完一个网页要记得保存。左上角文件——保存。

8、最后我们学习添加超链接。我用建立的第二个网页来做示范。选中篮球资讯网文本,点击页面下方属性——链接——点文件小按钮——选中第一个网页,这样篮球资讯网文本变成蓝色。这是网站内部链接,相反就有外部链接。添加如图,一定要写http://......就可以了。

9、最后我们浏览网页。左上角文件——在浏览器中浏览网页,点击网页中两个链接都能到达指定网页。

(2)网页做界面设计扩展资料:

网页设计

设计网站要注意两个要点:整体风格和色彩搭配。

风格

网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。

风格(Style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。

色彩搭配

无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。

网页配色小技巧:

1.用一种色彩:这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感;

2.用两种色彩:先选定一种色彩,然后选择它的对比色;

3.用一个色系:简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。

在网页配色中,还要切记一些误区:

1.不要将所有颜色都用到,尽量控制在三至五种色彩以内;

2.背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

3、怎样做网页界面设计?

多看看别人做的好的界面设计啊,平时多下载点素材,这东西,还是看美工天赋的,没有点天赋,你设计出来的就是丑

4、UI设计和网页设计的区别?

要想了解这两者的区别,就先来看看他们的定义是什么。UI设计是指软件的人机交互、操作逻辑、界面美观的整体设计,用自己的话来说就是设计软件和用户的互动方式。而网页设计是根据企业希望向浏览者传递的信息,进行网站功能策划,然后进行的页面设计美化工作。现阶段的UI设计,通常来说是一定程度上包含了网页设计的内容的,目前的UI设计面向的方向很广泛,除了UI设计,还包括了网站管理、网页设计、交互平台设计、app移动界面设计、用户体验、产品设计、电商包装设计等。而网页设计通常来讲是专门负责网站中各个页面的设计。而网页设计中,最先提到的就是网页的布局。布局是否合理、美观,将直接影响到用户的阅读体验及访问时间。

总之,UI设计包含有网页设计的内容,但是网页设计是一种更专业的网页界面、布局等设计。

5、UI设计和网页美工的区别是什么

一、性质不同

1、UI设计:是指对软件的人机交互、操作逻辑、界面美观的整体设计。

2、网页美工:是精通美学,photoshop(PS),FLASH,dreamweaver(DW)等一网站制作软件的网络人员,且必须具有良好的创意和一定程度的审美观。

二、工作内容不同

1、UI设计:UI设计师的职能大体包括三方面:一是图形设计,软件产品的“外形”设计。二是交互设计,主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计,并且确立交互模型,交互规范。三是用户测试/研究,

2、网页美工:网页美工负责整个网站的前台设计,界面设计、规划整个网页的布局。可以使用ps进行界面效果图的设计,AI辅助设计LOGO、以及网标。所以作为网页设计师掌握的重要工具就是photoshop软件。

(5)网页做界面设计扩展资料:

UI设计的设计原则:

1、简易性

界面的简洁是要让用户便于使用、便于了解产品,并能减少用户发生错误选择的可能性。

2、用户语言

界面中要使用能反映用户本身的语言,而不是游戏设计者的语言。

3、记忆负担最小化

人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定,24小时内存在约25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易。

4、一致性

它是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与产品内容相一致。

5、清楚

在视觉效果上便于理解和使用。

6、用户的熟悉程度

用户可通过已掌握的知识来使用界面,但不应超出一般常识。

6、网页设计(网页界面设计)的问题,谢谢!

你真牛,能带这么多网址。

7、怎么做一个网页(网页设计作业)

jsp+美工+编程

当人们访问你的站点时,他们都会立即下意识地判断:这个站点怎么样?值不值的当回事儿?是否值的把他加入到我的bookmark中去,要知道,在网络信息的虚拟世界里,互联网提供了天下大同的机会,同时也让这个虚拟世界充斥着数不清的商业站点、垃圾站点,大多数站点缺乏灵魂、主旨,东一榔头西一棒子,松散、混乱,原因就在于缺乏策划设计。因此要想使你的网站从那些数不清的站点中脱颖而出,就必须对整个站点作好统筹安排,规划,对所有的内容进行细意斟酌,把所有的意念合情合理的组织起来设计一个合理的页面样式。下面我们就具体的来探讨一下网站策划设计.
一、 首先确定web站点的营销目标:
1)、市场调查阶段
了解一下目前internet的发展状况以及同类站点的发展、经营状况,吸取他们的长处,找出自己的优势,对市场作个调查,明确自己网站的主题,寻找一个好的出发点。
2)、你设想中的网站规模有多大?
作网站并不是盲目的想做多大就作多大,而要根据自身的现阶段能力,以及企业的规模大小,确定你的网站是小型、中型、大规模的网站,还是从小规模的开始,然后逐步发展。这主要的是关系到网站的后期维护以及网站的发展方向来考虑的。
3)、确定网站的类别,你希望网站有怎样的设计特色
根据主题、形式以及本身企业的特点,网站的设计也有不同的类别,大概可分为:以内容为主,设计为辅,注重速度这种大型的专业网站,它一般体现在专业的 icp,isp供应商制作的网站,在设计这类网站时不要太花哨,应注重信息量;第二种大多数企业为了更好的宣传自己的产品,扩大销路,使自己的产品走向世界,提高自己企业的形象而制作的网站,这种网站制作应结合本身产品特点而制作的特色网站,相对来说比较注重产品的营销;第三种是形象类的网站,一般这种网站相对体现在政府部门,作为对外一个窗口,相对来说这种网站设计比较严肃;第四种是个人主页网站,这种网站相对比较自由,不受什么约束,可以根据每个人自己的特长自由发挥。因此我们在制作主页时先明确自己的定位方向,设计出适合自己的站点。
4)、你的主要目标受众是谁?
根据网站的类别不同,目标受众也不一样,有工商业者、专业人士、学生;女性,男性;儿童,青少年,中年人,老人;还是所有的人,比如教育类的网站相对来说是目标受众是院校的老师和学生。化装类、护肤产品类的网站相对来说是女性等。
5)、确定整个网站的整体风格
其实,这个原则和传统的印刷出版物没什么区别。你网页上所有的图像、文字,包括像背景颜色、区分线、字体、标题、注脚什么的,都要统一风格,贯穿全站。这样子读者看起来舒服、顺畅,会对你的网站留下一个“很专业”的印象。
举个简单例子。如果你在列示一二三四若干条的情况下,在每条前面用黑圆点加强视觉效果,那么其他类似地方,也应该用保持同样的风格。色彩斑斓的站点,尤其要注意风格的统一。颜色可以变,不过字体、主体文本对齐风格、标题、背景效果以及特殊图像效果等等都应保持统一。
很多缺乏编辑、出版背景的网友,很容易忽视这点,特别是网页一多,更容易忘。
6)、你准备投入多少资金、如何经营这个网站?
对所作的网站大概的作个估价,需要多少资金,你准备投入多少资金来运营这个网站,假设网站制作好以后如何经营这个网站,是全部由自己来做,还是委托专业服务来做,自己定期指导,还是设定要求、目标完全由别人代劳。这是不可忽略的问题,如果一个网站前期作的再好,后期没人维护也是空的,就好比一条刚建好的街道,干干净净的,人们也比较喜欢来这里逛街,日久了,人走的人多了,垃圾多了这时没人来管里,这样垃圾越堆越多,走的人肯定也越来越少了。日久了也逐渐被人遗忘了。网站经营也是这个原理。
7)、根据目标框架整理出站点的内容框架以及逻辑结构图
①把目标细化以整理出站点内容框架
基本确定的目标,您就应该把目标细化,并初步整理出为达到这些目的,站点所需要包含的所有内容了。例如,站点应该发布什么信息,站点需要提供什么应用程序,等等。然后,你应该把初步定下的内容纲要写下来,交给上级或业务人员审核批准。这实际上就形成了站点设计的需求报告。在你的内容纲要里,还应该注明这些内容的信息来源,哪个部门应该提供哪方面的信息。把这些罗列下来,会使得上级以及各个相关部门清楚"谁应该为这些内容负责"。
②进一步整理出站点逻辑结构图
定下内容纲要后,你应该能够大致画出站点的结构图了。结构图也有很多种,顺序结构,网状结构,继承结构,WEB结构等,应依据你的内容而定。例如,如果你是在编一个教程,那么可能用表示顺序的流程图就比较合适。多数复杂的网站会综合应用到几种不同的结构图。画出结构图的目的,主要是便于有逻辑地组织站点和链接,同时,将来你会用这个图去分配工作和任务。例如:
你可以告诉某个开发人员,让他完成结构图中某个分支的内容;
你可以把这个图递交给业务人员,告诉他们哪些页面,需要他们进一步提供内容或资料;
你可以把结构图给专业美工看,让美工人员考虑以什么样的形式来表现你要表达的内容等等。
简而言之,这个框架图,将为你下一步进行工作分配,人员安排提供依据。
二、 网站制作过程中把握的几点
1)、重点信息放在突出醒目的位置,整个网站空间排序适当
一个网站很重要的就是标题,标题就像路牌一样,人家在你的网站上逛来逛去,全靠它指路了。给人的第一印象是否能够马上注意到标题,标题要意义清晰、描述性强,把最吸引人的地方放在突出显眼的位置,然后再慢慢展开。或者说,把你的独特内容包裹成一个悬念,吸引人家注意。读者看一篇文章,前三段注意力最集中,如果这“寸土寸金”的前三段用不好,人家就要和你拜拜喽!
留出可调整的位置,用于满足临时性或短期营销活动的宣传需要。如,福州电信局12月11日举办的“福建省首届信息网络展示会”展览,需要在网页中放在最突出的位置。这就需要调整原有的结构,既让新的内容有突出的体现,还要不至于淹没其他重点。
在每屏中的文字与图形的布局既要考虑到重点的突出,还要给人以和谐的感觉。不能让图形淹没文字,也不能图形太少而让人觉得单调。视觉的吸引和诱惑力是不能低估的。 文字内容和图片搭配要和谐。
2)、网页应该易懂,控制没个模块的信息量。 网页要易读、易懂。
网站设计最重要的诀窍,恐怕就是你的网页要易读。 花时间和心思来规划文字和背景颜色的搭配方案。勿使背景冲淡了文字的视觉效果。
这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果,别用花里胡哨的色彩组合,让人看起你的网页来很费劲。一般来说,浅色背景下的深色
这个原则也意味着,你最好别把文字的规格设得太小、也不能太大。文字太小,人家读起来难受;文字太大,或者文字视觉效果变化频繁,像是冲着人大喊大叫,看起来不舒服。
另外,最好让文本左对齐,而不是居中。按当代中文的阅读习惯,文本大都居左的。当然,标题一般应该居中,因为这符合读者的阅读习惯。
网页的内容最好能够开门见山,让浏览者在最短的时间内了解你的网页的内容。在内容上着笔尽量要细致,让人家能在最短的时间内,了解你想呈现给人家什么。给人家一幅清晰的画卷,别云山雾罩的。开门见山,直接了当。大家都知道,网友的耐心尤其少。你能提供的信息或许对他们有裨益,但如果要人家没完没了地翻下去才能找到,恐怕极少有人有这份耐心。
立体规划内容。将所有的结构按照一定的框架结构分别纳入不同的页面。
立体规划内容,将所有部分按一定的构架各就其位、分别纳入不同层次的页面。注意先要把最重要的内容放到首页上,其他的依次就绪。
然后,你就可以勾划页面蓝图、编HTML了。就文本内容的表现而言,记住尽量别让其一行文字的宽度,横跨整个屏幕。段落一多,这样子看起来很费劲,而且别人的浏览器还可能和你的差别很大。最好别超过屏幕宽度的一半。
文字的宽度,最好别超过屏幕宽度的一半。
3)、网页页面越小越好,最好别超过50k,尽量精简
上网的人追求的是速度。所以页面的大小是非常重要的,如果你的网站主要是为了提供消息内容,那么在最短的时间内呈现出来你的内容,别人会更加舒心的查看你的网站。
别使速度影响了你的效率,要知道,很多人是没有耐心的。网页的速度最好控制在十秒以内。或者更快。
有研究显示,如果一个网站页面的主体在15秒之内显现不出来,访客会很快失去对该站的兴趣。当然,也有例外,比如内容实在太精彩,人家不去不行。再像视觉艺术类站点,也不能以“快”为唯一设计标准。不过,即使这类站点,也该在加个导引页,给读者一个提示,别不理睬人家的心情。但是大多数网站还是以内容为主,大部分人感兴趣的还是信息量,追求的是速度。
要限定页面的大小,就得从各个角度考虑节省。最大的一头是图像,有的好东西,只得割爱了。想想看,在创意表达、品牌形象、挣钱几个目标之中,哪个最重要?
4)、网站导航要清晰,容易查找,
所有的超链接应清晰无误地向读者标识出来,所有导航性质的设置,像图像按钮,都要有清晰的标识,让人看得明白,千万别光顾视觉效果的热闹的,而让人家不知东西南北。 所有的导航条都要非常清晰明确的让浏览者看出来。
链接文本的颜色最好用约定俗成的:未访问的,蓝色;点击过的,紫色或栗色。如果你一定要别出心裁,链接的文本就要想着以什么方式加以突出,比如说加粗体?加字号?两侧加竖标?或者几者兼用。总之,文本链接一定要和页面的其他文字有所区分,给读者清楚的导向。
链接文字要重点突出;
清晰导航还要求:读者进入目的页的点击次数,不能超过三次。如果三次以上还找不到,人家可就没有耐心陪你玩了!
三、 网站推广
网上世界黑漆无边,你怎么让人家找到你?很多有些经验的网友知道这个问题的份量,不过对于一波一波兴奋上网的新手,他们脑中的概念大多是:“有了网站,自然有人来”。不怪他们,商家们的欺骗宣传太成功了,他们哪里知道,网上有数不清的网站像“无人区”一样死寂。因此我们在作好网站以后,后期的推广宣传工作也不可忽略,主要的可以从以下几个方面来宣传。
1)、传统媒体:广播、报纸、电视都是很好的方法。现在我们已经看到很多在传统媒体中的商家广告,就是以网址为广告内容的主体。同时,商家所有的印刷品,包括名片,都是宣传网址的良好介质。
2)、因特网本身的方法:诸如导航台、新闻组、电子邮件群组、图标广告、分类广告等等,都是宣传网址的好方法。提高你网站在导航站点的排名、Banner广告、有技巧得利用传统媒体、BBS、新闻组都是获取潜在用户注意力的手段。 充分利用网页的交互性,增强与客户之间的联系,及时得到客户的反馈信息,了解客户的需求,不断的改进网站,提高整个网站的信誉。

孙子曰:“夫未战而庙算胜者,得算多也;未战而庙算少者,得算少也。多算胜,少算不胜,而况无算乎?“这里的庙算就是我们讲的谋略,也就是今天所讲的策划。

策划是一种能力,是一种谋略,一种技巧,一种手段,一个计划,一次革命!

策划就是设计。人们称邓小平为“改革开放的总设计师”,实际上也就是对策划、策划实践的一次历史性确认。

真正的策划人是一个复合型人才,必须掌握:经济学、哲学、心理学、传播学、营销学、管理学等,以及具体的如战略、竞争、策略、计划、市场调查、市场渠道设计、品牌经营、企业规划,甚至人力资源以及整个国家和世界的动态和发展趋势。

8、怎么制作自己的网页?

★建设自己的网站较好的步骤☆

必须注意的是:建立自己的网站是一件浩大的工程,一般比较麻烦。所以应当按照一定的步骤一步步来。

我觉得建站可以按照以下步骤进行:
1、先在本地设一个文件夹,作为网站存储的地方。名字最好取“My Sites”。
2、在网站文件夹里面建立一些文件夹,包括“images”等(存储图片、文件等),并且按照网页内容,再建立几个文件夹。(也可以把存储图片、文件的文件夹在每个内容文件夹里面各搞一些)
3、打开你的网页编辑程序(例如FP、Dreamwear等),新建网页,保存为“index”(主页),重复以上步骤,在网站文件夹里面建立“search”(查找)、“map”(站点地图)、“index02”(网站简介等)。
4、按照上面步骤,再在网站分类文件夹里面建立许多网页(接着还要把内容输入网页)
5、已经做到了这么多,我们该准备内容了吧。在硬盘上面再建立一个文件夹“File”,把准备好的文档、图片、程式、文件和网页特效等放进去。(可以加入一些动态网页)
6、慢慢把这些文件一个不漏的放进网页里面(要掌握技巧)
7、把网站充实了,就差不多了。这时应该申请一个域名(免费空间、附费都可以)。并且把自己的网站放入搜索引擎,而且在各种留言版上面宣传。
8、把网站上传至空间里面,删了准备文件,就OK了!

不过也可以这样使用FP建站:

1、在FP里面选择新建站点。
2、然后在【导航】里面设置网页名称以及标题。
3、准备好文档、图片、程式、文件和网页特效等,把它们都充实进网站里面。
4、申请一个域名(免费空间、附费都可以)。并且把自己的网站放入搜索引擎,而且在各种留言版上面宣传。
5、把网站上传至空间里面,删了准备文件。完毕。

如果使用Dreamwear来建站,那就更加高级啦!Dreamwear的功能很强大,安装了它的朋友们可以研究研究。

9、界面设计和网页设计的区别是什么的?

网站界面和软件界面区别很大,按难度,网站界面设计更难一些。
==网站要求界面美观、华丽、时尚,能吸引住游客;
==软件注重实用性、功能性,如果界面出乎寻常、不符合用户的使用习惯还是失败的。软件界面设计还要知道一些某种语言的设计知识。我们是做车载系统的,当时就找了一些ui设计公司,比如UIPlus,洛可可,艾艺等,最后决定选择UIPlus,主要基于三点考虑:
1.UIPlus他们母公司能做界面开发
2.他们的性价比比较高,而且服务好
3.他们是软件公司,能很好的在产品角度去做交互,对程序也很了解。其他的两家都不能做开发,对软件的用户习惯也不够专业

10、html网页设计:一个简单的登录界面代码!

是这样的效果吗?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>3</title>
<script>
function r()
{

var username=document.getElementById("username");

var pass=document.getElementById("password");
if(username.value=="")
{
alert("请输入用户名");
username.focus();
return;
}
if(pass.value=="")
{
alert("请输入密码");
return;
}
return true;
}
</script>
</head>
<body>
<form>
<table width="350" bgcolor="#ccffcc" style="border-color" border="1">
<tr align=center>
<td>用户名</td><td><input type="text" name="username" id="username"></td>
</tr>
<tr align=center><td>密 码</td><td><input type="password" name="password" id="password"></td></tr>
<tr align=center><td>验证码</td><td><input type="text" name="yanzheng"></td></tr>
<tr align=center><td colspan="2"><input type="button" value="登 录" onclick="r();"/>     <input type="reset" value="重 置"/></td></tr>

</table>
</form>
</body>
</html>

与网页做界面设计相关的知识