前端设计的那些事

在网页设计与制作中我们该注意什么???

首先要做到:

一、完美的效果图能给与客户耳目一新,体验良好的感觉。

二、创新不拘一格,不千篇一律敢于打破常规

具体来说因注意以下:

A.页面宽度和高度。

现在用户电脑分辨率以1024*768分辨率较有普遍,页面宽度一般上控制在1000左右较好,超过,则会浏览器将会
出现左右滚动条,这样不够美观。有的同学有疑问,电脑分辨率宽度明明是1024怎么超出1003就会出现滚动条呢?以IE浏览器为准,IE浏览器显示的范
围只有1003PX,剩下的21像素刚好是IE上下滚动条的宽度。

网页高度尺寸:一般上设计首页效果图高度有限制(高度具体根据首页内容而定),网站内页,高度不做限制,注意设计高度要随着页面内容拉伸,保证页面的左右是一个整体。

内容丰富的同时也要做的高端大气。

B.页面布局。

网页布局方式有很多,如国字型,厂字型,S型等等,追注意根据客户定位进行相关设计,

如首页页面布局,可以分为,左、中、下结构。中间部分,分为:左右或者,左、中、右。注意:每个部位的距离,要根据一定的规律去做排版,注意利用版心线、网格等控制网页部位的比例。还有事先计算好或者定好它们的位置,在效果图完成之后写代码是不出现对一些宽高不定而出现兼容问题。

C.网页留白。

适当的留白会增加板块层次感,条理感,控制好留白之间的距离,如上、中、下
之间的距离,左、中、右之间的距离,甚至网页上每个模块与模块之间的距离,模块内容距离边界的距离,文字与文字之间的行高等,要保持等距。主导这些才能做出美观的界面

D.网页中的文字。

一般中文网页正文文字大小多为12PX,门户网站的正文多为14PX。英文文字大小多为9PX。标题文字多为14PX加粗。(注意PS设计里正文一般十二PX文字,样式效果要设置为无,切不可出现锐利、浑厚等样式。)

图片上的文字,大多样式为浑厚或者锐利来让字体显得更加细腻。

E.分辨率的设置

网页效果图分辨率,统一为72像素/英寸,不按照这个为参照的话,你会发现打在图层上的文字不显示正常尺寸,或大或小。有的也用96像素/英寸,但不建议用,因为会提高网速或节约成本。

F. 颜色的使用

一般上网页出现的颜色不超过三种,具体根据客户的建站类型和阅读群体,选择正确的色相型。

时间: 2024-10-02 09:53:58

前端设计的那些事的相关文章

移动前端工作的那些事---前端制作篇之meta标签篇

移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上代码进行说明: <!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>xxx</title> <meta http-equiv="Content-ty

Web前端设计:Html强制不换行&lt;nobr&gt;标签用法代码示例

在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 No Break 的缩写,意思是禁止换行.通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行,但是如果文字被包含在<nobr>-</nobr>标签里的话,则不会换行.由www.169it.com搜集整理 一.nobr语法 1 <nobr>内容</nobr>

以用户为中心的前端设计案例剖析

WEB前端设计的最终目标是打造用户喜爱的产品,属于产品设计的范畴.所以一切设计要以用户为出发点,追求最佳的用户体验. 一.banner的设计 在WEB项目设计中,我们经常会有banner设计需求,一般而言首屏Banner及其相关区域也是整个网页设计中非常重要的部分. 优化前: 优化后: 优化前: 1.优化前网页首屏图片自动切换交互方式之外,用户可以点击圆点按钮手动切换图片.但考虑到图片本身的展示空间和效果,圆点按钮设计的比较小,造成用户点击该按钮时不方便. 2.banner切换图片时,会存在图片

移动前端工作的那些事---前端制作之微信小技巧篇

移动前端工作的那些事---前端制作之微信小技巧篇_WebApp赵海洋_新浪博客 移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20:47) 转载▼移动前端工作的那些事---前端制作之微信小技巧篇,布布扣,bubuko.com

【PhylabWeb】项目前端设计总结

PhylabWeb——前端设计感想 简介 本文的内容是关于我参与的软件工程项目——“Phylab-Web物理实验中心网站”的前端设计个人总结,来自团队:软剑攻城队 网站地址为:http://buaaphylab.com/,个人项目地址为:https://github.com/kibbon/Phylab-Web 整体展示效果如下图所示,建议使用较新版本的chrome/firefox内核浏览器浏览,(页面已采用响应式布局,可在移动设备上浏览): 首页 实验报告处理页面 注册页面 论坛主页面(基于we

前端设计与实现,使用拖拽来调整交友对象的评分功能

我的一个交友网站,其独特的流程包括,用户通过搜索发现潜在对象,给潜在对象加关注和打分,使用获得2012诺贝尔经济奖的特殊匹配算法计算出相互匹配的对象并推荐給相关用户.在这里,对交友对象的评分功能是此网站的基础功能,其方便和平滑与否关系重大.本视频演示我的设计与实现. 页内拖拽 跨页拖拽 一次点击把目标用户放入一个缓存区,然后利用分页控制走到目的页面,再进行拖拽.好处是能够实现精确控制. 想想看,你会如何设计这一功能? 其他特点 精确和强大的筛选器,让用户随心所欲的控制筛选条件. 常用的筛选组合放

编程中的命名设计那点事

编程中的命名设计那点事 在我开始设计系统的时候,我会花去很多时间去设计命名,因为好的命名和好的设计是分不开的. In the beginning was the Word, and the Word was with God, and the Word was God太初有道.道与神同在,道就是神. (约翰福音第一章,第一节) 在设计过程中给类,方法和函数好的命名会带来好的设计,虽然这不是一定成立,但是如果坏的命名那一定不会给你带来好的设计.在设计过程,如果你发现你很难命名某一个模块,某个方法时

《大巧不工 web前端设计修炼之道》学习笔记

前端设计如同一个人的着装与外表,站点的设计总是最先吸引人们的眼球.布局是否合理.风格是否简介.配色是否和谐,流程是否通畅,操作是否便捷,这些前端特效都影响着用户对站点的认可度.随着用户体验,可用性,可交互性等越来越多的前端术语的出现,前端设计已经不是简单的HTML.CSS.AJAX等元素的整合了,它更关注交互的流畅性.操作的便利性.流程的合理性.结构的清晰度以及可维护性.页面兼容性以及同后端程序的良好桥接等,应该能够在真正理解WEB应用的需求的基础上放眼全局,把握整个前端的设计方案,因此新的时期

前端设计之灰度值利用

在前端设计中,图片的灰度与彩色交互变化是十分有用且必须掌握的. 充分的利用色差的变化可以给浏览者带去别致的体验. 实例代码如下: <img class="filter" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=155969907,1883576517&fm=26&gp=0.jpg" alt="" /> <style> .f