导航:首页 > 万维百科 > 大型网站界面设计

大型网站界面设计

发布时间:2021-02-05 01:11:01

1、网站界面设计规范有哪些?

易用性规范

2.001 常用按钮要支持快捷方式。

2.002 完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。

2.003 界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。

2.004 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。

2.005 分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab

2.006 默认按钮要支持Enter和选操作,即按Enter后自动执行默认按钮对应操作。

2.007 可写控件检测到非法输入后应给出说明并能自动获得焦点。

2.008 Tab键的顺序与控件排列顺序要一致,目前流行总体从上到下,同时行间从左到右的方式。

2.009 复选框和选项框,按选择几率的高底而先后排列。

2.010 复选框和选项框要有默认选项,并支持Tab选择。

2.011 界面空间较小时使用下拉框而不用选项框。

2.012 选项数较少时使用选项框,相反使用下拉列表框。

2.013 根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业词汇;用户为儿童:这可以语气亲切和蔼;老年用户则应该成熟稳重。

2.014 鼠标为不可点击状态时显示箭头,可点击状态显示手型;系统忙时显示沙漏形状
规范性规范

2.015 菜单前的图标能直观的代表要完成的操作。

2.016 工具栏要求可以根据用户的要求自己选择定制。

2.017 系统常用的工具栏设置默认放置位置。

2.018 工具箱要具有可增减性,由用户自己根据需求定制。

2.019 状态条要能显示用户切实需要的信息,常用的有、目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。

2.020 滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。

2.021 状态条的高度以放置五号字为宜,滚动条的宽度比状态条的略窄。

2.022 菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。

2.023 工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。

帮助规范

2.024 帮助文档中的性能介绍与说明要与系统性能配套一致。

2.025 打包新系统时,对作了修改的地方在帮助文档中要做相应的修改。

2.026 在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。

2.027 用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。

2.028 如果没有提供书面的帮助文档的话,最好有打印帮助的功能。

2.029 在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式。

合理性规范

2.030 与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示,没法使用该按钮)。

2.031 对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。

2.032 非法的输入或操作应有足够的提示说明。

2.033 对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。

2.034 提示、警告、或错误说明应该清楚、明了、恰当。

2.035 提交失败后必须保存用户已经输入的内容,以便修改后再次提交。

美观与协调规范

2.036 长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。

2.037 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。

2.038 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。

2.039 按钮的大小要与界面的大小和空间要协调。

2.040 避免空旷的界面上放置很大的按钮。

2.041 放置完控件后界面不应有很大的空缺位置。

2.042 字体的大小要与界面的大小比例协调。

2.043 前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等。

2.044 如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。

2.045 界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。

2.046 如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

2.047 色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符。

2.048 颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试。

2.049 使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定。

菜单设计规范

2.050 菜单通常采用"常用--主要--次要--工具--帮助"的位置排列,符合流行的Windows风格。

2.051 常用的有"文件"、"编辑","查看"等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。

2.052 下拉菜单要根据菜单选项的含义进行分组,并按照一定的规则进行排列,用横线隔开。

2.053 一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。

2.054 没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头,不常用的靠后放置;重要的放在开头,次要的放在后边。

2.055 如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。

2.056 菜单深度一般要求最多控制在三层以内。

2.057 对与进行的操作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式——即只有需要的菜单才显示——最好。

2.058 菜单前的图标不宜太大,与字高保持一直最好。

2.059 主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。

2.060 主菜单数目不应太多,最好为单排布置。

独特性规范

2.061 安装界面上应有单位介绍或产品介绍,并有自己的图标。

2.062 主界面,最好是大多数界面上要有公司图标。

2.063 登录界面上要有本产品的标志,同时包含公司图标。

2.064 帮助菜单的"关于"中应有版权和产品信息。

2.065 公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

安全性规范

2.066 应当注意尽可能避免用户无意录入无效的数据。

2.067 采用相关控件限制用户输入值的种类。

2.068 当用户作出选择的可能性只有两个时,可以采用单选框。

2.069 当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。

2.070 当选项特别多时,可以采用列表框,下拉式列表框。

2.071 在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。

2.072 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。

2.073 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。

2.074 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。

2.075 对错误操作最好支持可逆性处理,如取消系列操作。

2.076 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。

2.077 对可能造成等待时间较长的操作应该提供取消功能。

2.078 特殊字符常有;;'"><,`'、"["{、\|}]+=)-(_*&&^%$ #@!~,.。?/还有空格。

2. 079 与系统采用的保留字符冲突的要加以限制。

2.080 读入用户所输入的信息时,根据需要选择是否去掉前后空格。

2.081 有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。

输入项规范

2.082 必输项中不可为空,不可输入空格

2.083 必输项给出必输项标识(*)。

2.084 非必输项字段,Null插入数据库时不会出错,在数据库中设置默认值

2.085 日期显示格式一致;或提供固定格式的选择。

2.086 输入区域输入特殊字符,插入数据库时不出错或提示不允许输入特殊字符。

2.087 英文输入不区分大小写,不可输入汉字、数字及特殊字符

2.088 数值字段只能输入+ ,— ,0~9及功能键(BackSpace 光标) 。数值不能为负数。

2.089 单行文本框/多行文本框;长度合适,可以容纳相应文字,但不能超过数据库该字段长度,最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效;对于多行文本框给出最大字符数标识

2.090 附件;可正常添加符合格式的附件; 附件可正常打开和保存,附件名较长时可正常操作;直接输入错误的附件地址,保存时应给出提示信息;附件打开和保存到本地时,文件名要显示原文件的文件名。

2.091 密码输入;在需求中定义密码是否允许为空或空格;密码是否允许特殊字符;是否区分大小写,密码的可输入长度;程序中应给出文字说明密码的可输入长度。

2、网站界面设计

q

3、关于网站界面设计

表格容易排版
DIV可以随意放位置(不过挺容易插乱,要小心一点)
一般一个页面不要太多的DIV``3,4个就够了
现在我上网看到的网站大多数都是用表格的 看上去很整齐``

4、求制作一个大型网站的具体的流程?

业务员与客户进行沟通,包括:网站风格、功能(论坛、留言板、支付、用户登录等)。
业务员与美工沟通。制作网页效果图(首页、列表页、内容页)。
制作人员开始切图排版,排成网页形式的。
后台程序员开始写程序。
前台与后台合并在一起,整站就完成了。
排版的准备工作:
网站的素材:都要放到当前目录下,与当前网页放在一起。
创建一个html文件,来进行排版。
网页的背景色。
确定主页的宽度:当前流行的主页宽度一般为1000px。
Web开发的分散性和交互性,决定了Web开发必须遵从一定的开发规范和技术约定,只有每个开发人员都按照一个共同的规范去设计、沟通、开发、测试、部署,才能保证整个开发团队协调一致的工作,从而提高开发工作效率,提升工程项目质量。
1.网站域名和空间
域名是一个网站必不可少的部分。我们常见的网站后缀一般是选择.COM和.CN的较多,.COM是国际域名的后缀,.CN是中国的域名。网站空间的用来存放网站内容和程序文件,比如:网页、图片、制品资料等等。
一般这部分的产品是由专门的IDC服务商提供,需要提前预备并做好备案工作。
2.网站设计策划
对于大多数用户来说,进入网站后第一眼看到的就是网站设计的结构布局。不同类型的网站设计也不一样,在建站前期我们需要做一个合理的规划,这个阶段需要我们收集好素材,包含:内容文字、图片、栏目结构、视频文件等网站设计所需的各项资料。有时候,部分客户对互联网了解不多,对网站建设的流程页不甚了解,往往以为网站设计完成即网站建设完成,要求发布网站。这是一个重大的误解,网站设计的PSD完成,仅仅只是完成了建站工作中的一个部分而已。
3.网站制作及开发
网站设计完成之后,会有项目团队中的前端开发人员对设计页面进行切图。这个过程有点像做定做衣服,由设计师画好图样之后需要裁剪成各种布料,而成衣就是由这些布料缝制而成。这部分的工作非常重要,这部分的工作需要遵循设计稿的设计理念,并将设计界面转化为可以网页格式浏览的网页,为后台程序的开发及整合做好准备。
开发及整合实现了后台功能及各项数据的绑定,这部分工作完成之后就可以出网站的测试地址,网站制作算是完成了80%以上。
4.项目开发流程
由项目经理牵头,以程序员为重心,共同讨论,完成用户需求分析,产生网站的栏目规划(用树形图表示),标出哪些是静态页面,哪些是动态页面。动态页面须要程序实现。制定网站的界面框架,包括首页构图,及各页面间的钩稽关系。产生各栏目文件夹的结构图(一些公共文件夹如images、scripts、styles等需要固定存放,共同调用)。
然后由美工根据内容表现的需要,设计静态网页和其它动态页面界面框架,该切分的图片要根据尺寸切割开来。给需要程序动态实现的页面预留页面空间。制定字体、字号、超级链接等CSS样式等。
在美工设计页面的同时,程序员着手开发后台程序代码,做一些必要的测试。
美工界面完成后,添加程序代码,组合网站,由项目组共同联调测试,发现bug,完善一些具体的细节。最后进行网站部署。
以上的每一部都会产生一些阶段性成果,项目经理需要及时进行审核、监督,发现问题即使纠正。
5,测试发布
当网站程序编写好的时候,就是一个网站的雏形了,但这个时候网站或多或少还是会有BUG们需要进行测试评估,不断完善,并从用户的角度去观察,改善网站。当网站的问题都解决,我们就可以把网站上传到服务器空间里,解析域名到服务器IP,这个时候域名就可以正式访问网站了。
最后维护和推广。一个好的网站需要不断的升级完善才能保持活力,网站需要定期修复和升级,保障网站运营顺畅,进行宣传推广。

5、UI设计,这几个网站就够了

网页制作可以大体上分成四个工种:
1 美工
美工的主要任务是设计。了解用户的意图,分析网站配色,基本布局。绘制出一个网站效果图。
美工需要掌握的知识体系应该包括网页设计,UI(User Interface)用户界面人机交互、操作逻辑、界面美观的整体设计,UED(user experience design)用户体验设计--简单来说就是如何使得网站更加便于交互。
2 前端开发
美工在完成设计效果图之后,由前端开发人员将其制作成为适合浏览器查看的HTML页面。
由于现在移动互联网的大规模流行,加上各个不同厂商的浏览器的激烈竞争,前端开发的主要任务简单来说就是使网页在不同浏览器不同分辨率不同设备上提供相似或相近的浏览体验。
前端开发需要掌握的知识体系主要是兼容性问题的解决,流畅完美的交互体验。具体到技术细节上就是HTML,CSS,JavaScript,各大公司各种不同内核的浏览器、各种各样的JS库、简单的与后台交互的知识。
3 后台开发
前台开发完成之后,就是后台程序员的工作了,相比较前端来说,后台更像传统意义上的程序员。后台的工作简单来说就是网页文件对数据库的增删改查。
后台需要掌握的知识体系应该包括,编程基础,基本HTML语言,至少一门主流网页语言(C#,C++,JAVA,PHP等),数据库的操作等等。

4 宣传推广
前三个步骤完成之后,网站一定要推广,简单说就是营销。
营销人员应该掌握的知识体系应该包括SEO,SEM,线上线下推广,事件营销,危机公关等等复杂的知识。我对这个部分涉猎不多,不多说了。

另外,大型网站通常会在这四个岗位之间设立经理或有的公司叫网页架构师,经理主要是用来协调,沟通,领导这四个岗位。

至于四个岗位有多少人就完全取决于公司的网站的规模了,我自己在2000年的时候做网页基本上是四个活一个人做,除此之外还兼公司网管,电脑维修,有一段时间还兼司机,命苦啊~~

6、优秀的网站页面设计说起来很简单,可具体怎么做?

额……理论知识这个东西,不懂的人的确是看不懂呀……我这说了估计还是理论知识,建议这种理论知识不要强迫自己理解, 用来学一学作为后期对别人给自己做的网站的检查可能更好一点~

首先应该有一个设计方案,把想放在网站页面设计上的东西做一个规划,比如说网站的整体风格,栏目和项目的具体样式有一个初步的规划,定下了初稿之后,才能更好的进行下一步。这一步呢就需要你来好好思考一下了!

如果是跨国公司或者韩国本土公司,需要做韩语网站的话,还需要把相对应的项目翻译一下,这样才能让网民有更高的阅读体验。并且这种情况建议使用三种语言,中文+该国语言+英语。


接下来就是具体的分步骤的网站页面设计了。一般来说分三个部分,首页,栏目页,内容页。那么大部分公司网站如何制作的呢?很大一步部分的公司网站都会选择把公司的logo放在左上角或者右上角等比较醒目的位置上。

顶部做一个导航栏,假如网页的整体背景使用的是公司图片的话,最好建议导航栏设计的与众不同一点,但是不要遮挡别的信息。栏目页,和内容页就比较简单,顶部底部不变,中间按照自己的需求改一下就ok了。


除了页面布局的规划、色彩的搭配、字体的选取需合理得当,还应合理利用标签、静态网页还是动态网页的选择上有一个笃定的规划。标签建议不要太少或太长,合理地利用网页标题、描述、关键字才能在同行业中具有竞争力。网页选择上建议选择静态网页,静态网页更容易被搜索引擎检索。除此之外,网页文件名的设置也格外重要,忌设置一些复杂、深奥的文件名。


总而言之,优秀的网站页面设计需要明确设计思路、有条不紊的栏目设置、熟悉制作流程、重视链接的插入、标签的设置、文件名的命名以及独立性、关联性的考量。只要遵循围绕主题进行的设计理念,才可以拥有一个适合自己公司,对公司有帮助的网站~

以上就是设计小能手redtrans_cs小姐姐的意见了~以下提供点我做的某韩国公司网站的一小部分参考~


7、哪家公司做网站的界面设计漂亮

这个抄问题应该这么说,只要网站建设公司有给力的技术人员都可以做出漂亮的网站。
但是请君注意,做网站可不只是为了好看的,千万不要一味的追求效果而忘记了做网站的根本目的。
做网站建议找有专业网站策划人员的公司,在保证有良好用户体验的前提下能够有更好的客户转化,这才是重要的,次要才考虑网站的设计效果。毕竟现在大多数企业做网站都是需要推广效果的。
锐美网络-罗啸

8、市场上好的网站界面设计的书籍(大约10本)有哪些?

曹金明等.《网页设计与配色》.北京:北京希望电子出版社 红旗出版社. 2005.
创意源(网页创意)/现代创意设计丛书 湖北美术出版社
比尔.加德纳,凯瑟琳.费舍尔.《21世纪超级标志设计》.上海:上海人民美术出版社.2004.
吉姆.克劳斯.《版式设计指南》.上海:上海人民美术出版社.2002.
张旭生 《网页版式设计指南》国防工业出版社
吉姆.克劳斯.《创意设计指南》.上海:上海人民美术出版社.2002.
腾龙视觉 .《Photoshop CS2经典网页特效表现完美风暴》(附光盘)人民邮电出版社.2008
视觉中国.《网页设计精品解读》电子工业出版社.2007
胡崧.《网页色彩与版式设计创意实战》(附赠1CD) 中国青年出版社.2006
龙飞.《中文版Photoshop CS2 时尚网页设计经典商用案例》(附赠光盘)上海科学普及出版社. 2007
安小龙.《 Adobe Photoshop典型应用实例:网页设计篇》(附CD-ROM光盘一张)中国青年出版社. 2006
(韩)黄在贤.《设计师谈精彩网页设计》(附光盘)电子工业出版社.2004

与大型网站界面设计相关的知识