于细微处下功夫 设计像艺术品般的网页

精品是用细节堆起来的。

  深以为然。在网站设计中,处理好越多的细节,给用户的体验就越完善。这段时间在设计潮汕风情网的图库栏目(http://image.csfqw.com),越发体会到处理好细节的重要性。

  其实网页设计中涉及到的细节问题,归纳起来也不回太多,下面试列举出我处理过的一些细节:

  链接状态处理。超级链接有四种状态,包括link,visited,hover,active,给这四种状态设计不同的样式,可以帮助用户方便的区分链接与普通文本、访问过的、每访问过的等链接状态。有一种连接样式我非产赞赏,就是给外部链接加上一个小图标,指示“这是一个连接到站外的链接”。

  图片缩放。图片在网页中的运用占有较大的比例。在页面上显示图片,有时图片会超出容器的规格,如果不加限制,就会破坏整个页面的结构和美观。此时最好的处理办法是控制图片的规格,让图片上传之际就被压缩成合适的规格。另外一种替代方案就是运用JavaScript进行同比例缩放,这样可以避免图片变形,但是加载速度可能会受影响(图片本身太大)。至于使用css设置一个规定的长度和宽度,虽然也能避免破坏页面布局和美观,但是会造成图片变形。

  文本长度限制。文章的标题太长了,也需要处理好。最好的处理方法自然是通过编辑、作者自己写好适合网页显示规格的长度的标题。比如说新浪、网页等大网站的首页新闻标题,大多数使用这种方式。他们的网页可谓字字千金,自然只有通过编辑、作者的仔细斟酌,写出既能表达完整意思,又符合字数长度的题目。其次是通过程序截取。程序截取对于中文来说比较好处理,对英文就有点有心无力了,因为英文字母是不等宽的,并且截取出来的标题,可能包含有不完整的单词。最后一种方式是通过css隐藏超出规格部分文字。这跟使用程序截取的效果是一样的,不过实现的方式不一样罢了。

  输入检验。给用户输入、提交数据的表单,根据各部分数据的要求设计灵活的检验机制,并且能在适当的时候给用户提示,让用户方便的了解他需要输入什么数据,有什么限制。这既可以保证数据的准确性,又能为用户节省时间。

  暂时能够想到的就这么多。当然还有更多的细节等待我们去了解、处理。我常跟设计的同事说,有一些网站,我们使用起来觉得很方便,得心应手,但是说不出来为什么,其实就是他处理好了很多不为我们了解的细节,于细微之处下功夫。这样的网站已经超越的应用的范围,它已经成为用户体验的精品,是一件艺术品。

时间: 2025-01-29 21:02:17

于细微处下功夫 设计像艺术品般的网页的相关文章

从零开始教您设计华丽高档的网页

简介 在这篇文章中给出了设计一个华丽高档网页设计方面的方案,强调背景与字体的重要性,熟练运用Photoshop,可以轻松创建一个专属于你的独特风格的美丽页面.具体的HTML代码实现请看第二部分教程. 从零开始教您设计一个华丽高档的网页 在本教程中,我们使用简洁细瘦的字体,配上优美的背景图片,经过精心排布的空间布局,设计一个高档的网页. 当你看完本教程,你再去看看我们的姐妹站点NETTUTS,然后跟着做,这样我们就用简洁的HTML代码实现设计.来吧,让我们开始! 大家好!我在数年前通过阅读Phot

Photoshop结合DW设计超酷的网页相册效果教程

  本教程适用对象:有一定的PS基础,最好有网页设计制作基础,那样在PS处理好后可以在DM里面做一个后期的CSS以及布局方面的处理,当然,DM&FW也可做图片批处理并生成相册,不过我个人认为PS&DM的效果比较好. PS的批处理功能是很强大的,如果利用好可以做为我们做很多工作.今天我想讲的是"PS批处理设计制作图片展示" 开始吧 一.准备好自己要做相册的素材,产品展示啦,案例展示了,照片展示了都可以,统一将这些图片放在一个文件夹下,我这里将这个文件叫做"Res

网页设计中怎么把网页上的内容和数据库连接起来?

问题描述 网页设计中怎么把网页上的内容和数据库连接起来? 想做个网站,可是数据库不会连,怎么办?sql数据库代码怎么写? 解决方案 取决于你网站后台用的什么,php等都可以链接访问数据库. 解决方案二: (1)执行"开始'"控制面板'"性能和维护""管理工具""数据源(ODBC ),弹出"ODBC数据源管理器,对话框.切换到"系统DSN"选项卡. (2)单击"添加,按钮,弹出"创建新数据

《众妙之门——用户体验设计的秘密》一第2章 设计“好脾气”的网页2.1 巴赫和他的十二平均律

第2章 设计"好脾气"的网页 众妙之门--用户体验设计的秘密 Rob Flaherty 科技在进步,网页设计的技巧也在进步.新的科技带来了新的挑战,因此,也需要新的解决方案.有时,人们面对崭新的未知领域,实在是毫无经验,只能根据直觉去打造解决方案.而有时,人们在新领域面对的问题有过去的影子,可以从历史和别人的经验中找到答案. 相对其他设计那漫长而又荣耀的历史,网页设计的历史有限,因此能给出的经验也相对有限,人们不得不借鉴这段有限的历史去解决近乎无限的问题.虽然也可以学习图形设计和视觉传

网页艺术设计初步探讨,网页制作学习

网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题,是网页设计者以所处时代所能获取的技术和艺术经验为基础,依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动,必然要成为设计艺术的重要组成部分,并随着网络技术的发展而发展.表面上看,它不过是关于网页版式编排的技巧与方法,而实际上,它不仅是一种技能,更是艺术与技术的高度统一. 一.网页艺术设计的内容 设计活动中包含着主观和客观两方面的因素,在确立了网页主题之后,首先要明确和熟悉设计的对象和构成的要素.网页艺术设计涉及的具

网页设计实例:微信第三方网页设计过程

文章描述:在拿到项目时,首先需要冷静下来.而不是急着去动手,大部分同学肯定都理解了解其缘由.这边要说的更多是前期先看看相似对手的情况.因为视觉设计相对于产品功能,是最容易拉开差异感的部分.或许一套不同的视觉策略就能让产品迅速脱离大部分同类作品走出来. 最近比较忙,整理作品的速度明显放缓了许多.今天总结些前段时间做的微信第三方网站.要清楚,它是网站不是单独的一个网页.需要考虑更多是整体性的问题. 在拿到项目时,首先需要冷静下来.而不是急着去动手,大部分同学肯定都理解了解其缘由.这边要说的更多是前期

网页设计参考:WEBJX收集网页视频播放器的界面设计案例

文章描述:20个视频播放器界面欣赏及点评. 网页设计中非常细节的东西,比如就一个描边,有时就造成了用户心理感受上的差别,进而影响用户的使用偏好,直至对整个设计的成功与否以及作品的商业价值产生非常大的影响.类似于"千里之堤毁于蚁穴"和"蝴蝶效应"的感觉.夸大其词吗?绝对不!细节的力量我认为在网页设计中有着无穷的魅力.认真想想那些你个人认为优秀的设计作品,其中是什么东西打动了你?真的很多时候就是一种描述不出来的颜色,一些1像素的高光,或者是一种质感. 例如下面的这20个

中国式网页设计:手机客户端和网页版合二为一

文章描述: 采用流式页面,手机客户端的编辑力量和网页版合二为一,一次推送,自动铺开到所有终端,大家在不同地方看到的都是一样的新闻列表,编辑力量将被空前地解放. [核心提示] 采用流式页面,手机客户端的编辑力量和网页版合二为一,一次推送,自动铺开到所有终端,大家在不同地方看到的都是一样的新闻列表,编辑力量将被空前地解放. 无限滚动,类似博客页面的版式终于开始替代所谓"新浪模式"的拥挤不堪的版面,成为传统门户网站的选择. 2012 年 7 月,腾讯科技改版成为博客版式,引发热烈讨论.随后,

网页设计技巧:正确处理网页图片

译者:nornor 俗话说,一图胜千言.无论这是真是假,图片都是网页中重要的组成部分.自从嵌入图片步骤变得简单,我们可以看到很多网站都内嵌了许多图片,其中一些 网站从不同角度展示了正确利用图片的好处,然而,大部分网站则不是如此.尽管这对于一款设计来说,并不是多大的影响,但是这些图片可能会减少你销售产品的 机会,除非你有一个很好的诱导用户的页面或者创造了很好的阅读流条件.图片是细节胜于原则的问题,处理图片应该是设计师们更加需要理解和掌握的能力. 网页可用性专家Jakob Niesen和他的公司NN