咨询邮箱 咨询邮箱:service@yitianxinda.com 咨询热线 咨询热线:18101296137 微博 微信
北京软件开发web页面设计规范_北京软件开发公司
发表日期:2015-07-09 15:27:08    文章编辑:宜天信达    浏览次数:

北京软件开发WEB的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成:Head,Main,Foot,有些时候出于布局的需要,在“Head”下面还会加上用于页面功能导航的“Menu”。

对于软件开发公司WEB应用来说,页面布局是和web应用的功能区相对应的,并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。

页面布局的设计,首先需要考虑用户在浏览web页面时视觉流向上的要求:

从视觉流向上看,用户首先看到的是页面“Head”部分的左面,通常那里是标识这个WEB应用的Logo;然后是陈列WEB应用主要功能的“Menu”来用于页面导航;接下来用户将看的是处于页面左侧的“sidebar”,通常这里也是用于页面功能导航的,和“Menu”出的选择相呼应,这里的内容可以通过类似树状结构的方式展示更为详细的功能;接下来是处于页面中心位置的内容部分,较后用户的视线落在WEB页面的底部。
 

l  在高度方向上,对上部1/3区域按照黄金分割的方法分出head和menu的区域;

l  在宽度方向上,对中部左边1/3区域按照黄金分割的方法分出sidebar的区域,剩下的空间留给content区域;

l  在高度方向上,对下部1/3区域按照黄金分割的方法分出foot的区域;

在页面布局中,对各个功能区域的切分是按照“像素”和“比例”方式来进行的,以1024*768的分辨率做为基准,其中:

l  Head区域,宽度是按照比例方式设置的,宽度按照100%设置,高度采用所占的固定像素值来确定的,一般占?px,如果有menu区,则调整为?px;

l  Menu区域,和“head”的配置要求是一样的,宽度按照100%设置,高度结合“head”的高度设置来确定,一般占?px;

l  Sidebar区域,宽度是结合与“content”之间的黄金切分比例,按照固定像素的方式确定的,一般占?px;高度是按照比例方式来设置的;

l  Content区域,高度和宽度方向布局都是按照比例方式来设置的;

l  Foot区域,宽度按照100%设置,高度采用所占的固定像素值来确定的,一般占?px;

1.1.1.1    页面展现

对于页面布局来说,除了上述要求外,还需要考虑如下要求:

l  能自适应1024*768、800*600两种分辨率;

l  界面层次不超过3层;

l  默认窗口设置下,不应出现水平、垂直滚动条;

l  当界面内容超出显示区域时,以浮动层的形式显示;

 

还有,对于用户的感官而言,屏幕对角线相交的位置是用户直视的地方,而页面正上方四分之一处为易吸引用户注意力的位置,所以在放置页面时要注意利用这两个位置。

要求:

l  父页面或主页面的中心位置应该设计在对角线焦点附近;

l  子页面的位置应该靠近主窗体的左上角或正中;

l  需要多个子页面弹出时,应该依次向右下方偏移,以显示窗体出标题为宜;

l  在页面上方四分之一处放置用户的logo、主要功能导航和一些系统操作功能;

 

1.1.1.2    页面美化

界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。

建议和要求:

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

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

l  同一页面上的按钮大小应该一致,不同页面的按钮大小尽量相近,按钮上忌用太长的名称;

l  按钮的大小要与界面的大小和空间要协调;

l  避免空旷的界面上放置很大的按钮;

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

l  字体的大小要与界面的大小比例协调, 通常使用的字体12px;

l  前景与背景色搭配合理协调,反差不宜太大,主色要柔和,较好少用深色,如大红、大绿等,可以借用Windows界面色调;

l  大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等;

l  界面风格要保持一致,字的大小、颜色、字体要相同,需要艺术处理或有特殊要求的地方建议使用图片表现;

l  如果窗体支持较大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放;

l  系统对话框页面不应该支持缩放,即右上角只有关闭功能;

l  通常父窗体支持缩放时,子窗体没有必要缩放;

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

 

1.2    页面字体

页面字体属性的设置在相应的CSS中进行定义,页面文字编码要求是UTF-8,在规定字体属性时,需要设置:中文采用“宋体”,英文采用“Arial”或“verdana”,CSS文件中的font-family里面必须保证有“宋体”。

对于页面属性中字体大小的设置,需要内容的不同级别来设置,通常:

n  “Head”中标题文字,20px;

n  “Menu”中的导航文字,14px;

n  “Sidebar”中的文字,12px;

n  “Content”中的正文,12px或14px,标题;

n  “foot”中的文字,12px或10px;

 

有关页面字体属性的具体设置参见附录中的CSS示例。

相关文章推荐
随着科技的飞速发展,物联网(IoT)已经成为了各行各业的关键驱动力。在这个数字化时代,物联网技术的应用已经渗透到我们生活的方方面面,其中之一便是医疗行业。本文将...
选择离岸软件开发公司的方式已成为许多企业改变游戏规则的关键。它涉及将软件开发任务委托给不同国家的公司或团队,通常成本较低,并能接触到多元化的人才库。根据Stat...
根据Manpower 的数据,全球 IT 和技术领域的人才短缺率为 76%。低调的开发人员是离岸开发成为企业定制软件或移动应用程序开发的热门选择的主要原因之一。...
企业应用程序成本高昂,但您可以控制成本,同时最大限度地发挥推动增长的全部潜力。怎么做?让我们与拥有 20 多年定制应用程序开发经验的 北京软件开发公司 专业人士...
什么是 软件质量保证的七个有效的好处? 要想知道这个问题的答案,请查看下面的内容。 软件质量保证是软件开发过程的重要组成部分。它可以保证软件产品的质量和可靠性。...
在北京软件公司物联网工业软件项目中状态监测是主动确定机器何时需要维护的最佳方式。收集资产状况的实时数据可以准确、及时地了解资产健康状况。这让公司能够更有效地利用...
2022 年的技术趋势包括数据无处不在、新的云架构、IT 日益重要的重要性以及数字设备的发展等领域的巨大而快速的变化所有这些都以重要的方式与工作场所互动。 今年,工作有了全新...
北京app开发-答疑APP能否提高成绩,每当看到孩子写作业拿着手机,还不时举起来对着题目拍来拍去,一些家长的心里就不由得涌起一阵阵担忧:这究竟是在写作业呢?还是在上网玩呢?...
为了帮助在这场战役中,SDSU的可视化中心已与北京软件开发公司和测试开发视频软件,有助于预测野火蔓延。...
北京软件开发公司装饰管理平台是一款基于云计算、智能的,涵盖装修公司、业主、材料商三者之间管理、数据协同的整体解决方案,提供了丰富多样的功能及管理工具,围绕整个装修...
北京软件开发药店GSP管理软件,GSP管理系统根据国家较新的GSP规定开发升级,能够满足国家新版GSP管理的规定,把GSP管理融合于药店的各种业务流程中,满足流程控制,质量管理控制双...
当优秀的硬件不再足够时,软件公司可以利用物联网帮助企业吸引客户并保持竞争力。通过物联网解决方案和基于服务的业务模式变得更加以客户为中心。...

Baidu
map