青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113113165158935 
知识普及 » 如何处理好网站设计的细节

如何处理好网站设计的细节

奈薇网站制作 2020-06-10 10:59发表
阅读次数 1092
  国画中有句话,“画虎先画骨”。对应到网页上,视觉效果只是一张皮,前端代码是支撑这张皮的骨,了解骨架是怎么长的,有助于设计出更合理高效的页面。

  一、常见视觉效果是如何实现的

  关于文字效果文字自身属性相关的效果css中都是有相对应的样式的,如字号、行高、加粗、倾斜、下划线等,但是一些特殊的效果,主要表现为ps中图层样式中的效果,css是无能为力的。但是css也在不断发展,在css3中已经新增了文字阴影的效果,可惜IE6、7、8均不支持。所以,一些比较特殊的文字效果,依然只能通过图片来实现。

  说说文字间距

  在css中其实是可以控制文字间距的,但是现实中很少会使用,一方面是很多设计师不知道css中有相应的属性,并且需要使用文字间距的场景也不多,另一方面,浏览器解析文字间距的方式也令这一属性在某些场景下无法使用,比如在文字居中的时候,实际居中的区域是包含了文字间距的(如上图),使得在视觉效果上让人无法接受,所在当需要在文字中保留一定空间的时候(比如两个字的按钮),会直接用空格来代替。

  不过多知道一种实现文字间距的方法总是好的,虽然目前来看应用场景很少,但是也许某天就派上用场了。比如12号的雅黑文本看上去会感觉密密麻麻的,但是加上一点文字间距,阅读效果就会好很多。

  关于字体网页里中文文本字体一般都是宋体,不建议使用其他字体,但是其实字体是可以上传到服务器,然后页面中引用该字体,就解决了用户电脑上没有相应字体的问题。不过很少有人会这么做,为什么呢?1.浏览器是可以设置忽略网页字体,改用用户设置的字体(IE:工具->Internet选项->辅助功能)。2.服务器上的字体是需要加载的,而一个字体一般都几兆,严重影响页面载入速度。所以对于特殊字体,通常都是做成图片。

  关于背景看看通常一个按钮是怎么拼出来。

  产品类的按钮我们一般都是像A这样设计(中间段是横向的重复图案),而不是像B这样,因为产品类的按钮一般都是复用的,可以用两段拼出来一个按钮,而B这个宽度就限死了。

  关于渐变、圆角、投影在css3中终于实现了渐变、圆角和投影,不过可惜的是IE6、7、8均不支持,但是已经可以在越来越多的网站中看到新css的应用,尤其是按钮,淡淡的渐变,hover上去有点淡淡的阴影,效果很好,对于不支持的浏览器,设置一个颜色近似的背景,看到的是单色、直角效果。

  需要注意的是:代码实现的只能是线性渐变,从某个颜色均匀的渐变到另外一个颜色,所以高光什么的只能舍弃了。css3中还有径向渐变,不过暂时应用场景不多。

  互联网发展速度很快,大大小小的新技术很多,多和前端交流吧。

  关于对齐

  主要是表单中文字的上下居中对齐,在ps里很简单,但是实现出来却如上图所示的,很难看,要想对齐,真是件麻烦的事情,没有好的办法。所以不是特别关键的地方,建议就随它去了。

  二、前端是如何切图的

  第一步拼图

  为了加快页面加载速度,会把多张图片拼在一张图片上。

  第二步保存为Web所用格式

  网页上的图片,照片、banner类一般保存为jpg,其他的,通常都是保存为png-8或gif(除了动态图片需要用到gif,其他场景png-8完全可以替代gif)。对于保存为png-8或者gif的图片,有时候会看到图片呈现带状感(如下图右侧),失真很严重。

  有两个办法,一是增加颜色的数量,但是增加数量会导致图片变大,需要在颜色数量和图片大小之间取一个平衡,而且如果图片上颜色太多,就算颜色数量增到最大256,依旧会有明显的带状感,这时候可以把图片拆开,把颜色类似的图片拼在一张图上。

  三、页面布局相关

  元素叠加的效果通过外补丁(margin)、绝对定位(position:absolute)可以实现多个元素互相叠加的效果,使得设计上不受布局的局限。

  固定屏幕的效果

  某些特殊场景使用(如上图的“回顶部”),解决跟随的问题。

  了解前端知识,不仅在沟通上更顺畅,设计上更合理,对于设计过程也有一定的帮助,比如在设计控件的时候,ps里看hover样式始终不够直观,这时可以把控件实现出来,直观的去感受,调整你的设计稿直到满意为止。虽然成本比较大,但是对于需要仔细推敲的控件来说还是值得的。

  某人曾说过,好的技术能带来设计上的突破,而好的设计也能促进前端技术的发展。css3、无极加载、在线编辑头像,很多技术的出现改变了设计的方式,向后多走一步吧!

如何处理好网站设计的细节相关标签:网站注册企业建站网站制作方案网络公司
相关热点推荐
企业网站建设中要注意内
如何协调用户体验与网站
青岛设计好并且靠谱的网
怎样设置关键字才可以被
和马云学习如何做网站推
如何搞定站内搜索的产品
如何让网站排名靠前?
青岛网站建设之前应该做
建设网站的十大误区
网页艺术设计初步探讨
给新站长和意志不坚定的
网站关键词的排名怎样才
搜索引擎蜘蛛理解相关性
企业建站的重要性及作用
HTML5的发展趋势与
局域网常见网络故障及排
网页的审美需求
即兴创作需要有效的设计
通过网站SEO软件优化
网站盈利的两种模式
网站改版时的顺序问题
网页的视觉设计要点
提高企业网站声誉的SE
SEO网站权重,Pag
花卉行业网站建设
网站关键词摆放的四个关
数据分析的原则
博客推广秘笈之如何推广
网站描述怎么写?
网页设计中的版式原理-
网站设计的思考之如何配
网站功能的适用性评价
8个实用的友情链接技巧
DW制作网页的基本步骤
春意盎然的三种网页设计
建站小技巧-js禁止右
搜索引擎收录机制
设计兼容性好的Web页
新闻营销 推波助澜
如何使网页的字体和颜色
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
  • 备案号
  • 鲁ICP备13010283号
建站咨询热线0532-88781131 15166683288 13963906391
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
161个月 21