400-609-4309

网页设计典型问题

网页设计典型问题

导航是网页可用性的基石,如果用户无法通过导航找到自己想要的内容,那么无论网站设计多好,都是不达标的。所以,你的网站导航应该符合相关特征。下面介绍网页设计典型问题,希望这些内容对您有帮助。

网页设计典型问题

1、无论在什么设备上,尽量提供类似的体验

用户可能会从不同的设备上访问你的网站,可能在桌面端上,笔记本电脑、平板电脑和手机上,甚至有可能在智能手表上打开你的网站。而作为用户体验设计的工作目标之一,就是尽量确保无论在哪个设备上打开,都能给用户以类似、相对一致的体验。

如果用户需要在手机上查看你的网站,那么他应该能够像在家里的电脑上查看的时候那样,找打所有他希望能找到的内容。

2、清晰而易用的导航设计

导航是网页可用性的基石。如果用户无法通过导航找到自己想要的内容,那么无论网站设计多好,都是不达标的。所以,你的网站导航应该符合下面的特征:

・简单(每个网站都应该具备简单明了的结构)

・清晰(导航的选项对于用户而言应该是不言自明的)

・一致(导航在各个页面上应该都是一致的)

这样的导航能够让用户尽可能少的点击用来抵达他们要去的页面。

3、让已访问的链接显示为别的色彩

每个网站当中各种链接都不少。为了和文本区分开来,链接通常色彩不一样,如果用户点击之后再返回,链接色彩不作区分的话,用户可能会无意中重复访问相同的页面。所以,让已访问过的链接显示为其他的色彩,让用户更好地决定下一步点击哪里。

4、让用户更容易扫视页面

当用户刚刚开始打开网页的时候,可能会倾向于快速扫视整个页面,而非通读所有内容。当用户想要快速判断出他们想要的内容在哪里的时候,就需要快速扫视、定位。

作为设计师,让页面的层次结构足够清晰,才能让用户更清晰地快速获取信息。如何将内容按照重要性、有层次地呈现出来,还是挺考验网页设计师的权衡能力的。

将屏幕标题、登录表单、导航类目和其他的关键内容设置为视觉焦点,便于用户发现。

5、仔细检查所有链接

当链接所指向的页面不存在的时候,用户所打开的页面就会自然地变为404了,而这种情况是一定会让用户产生沮丧的情绪的。为了避免用户在浏览过程中因此对你的网站产生失望的情绪,请务必确保没个链接都指向正确的页面。

6、确保元素的视觉和功能表里如一

许多元素的外观特征会呈现出它功能性的一面,这也就是我们常说的显而易见、不言自明的设计。链接通常会呈现成特定的色彩,带有下划线,如果你的内容文本中有这么一段文字拥有这样的特征,用户通常会认为它是一个链接。

如果点击的时候发现它无法跳转,会让人有“被欺骗”的感觉。用户需要知道哪些内容是可点击的,而哪些只是强调,设计要表里如一。

7、不要让你的用户长时间等待加载

不论是面对APP还是网页,用户的耐心都非常之有限。有研究表明,7秒的等待几乎是用户的等待极限,而10秒的加载时间,只会让绝大多数的用户关闭页面,再精美的加载动画都安抚不了用户的烦躁。

所以,不要让你的用户等待加载,尤其是这个加载时间很长的时候。相关的应对策略很多,比如你可以采用占位符先显示布局,逐步加载内容,至少让用户知道,这个过程正在推进。

8、不要让促销广告盖住内容

现实生活中广告已经让人难以忍受了,如果你的网页中广告居然挡住了主要内容,这几乎是逼着你的用户生气关闭页面,这样换来的广告营收从某种意义上也是饮鸩止渴。

另外一方面,长时间的互联网浏览经验会培养出用户的另外一种广告应对策略:当他们看到广告的时候会主动忽略它。这对于广告的转化率同样是毁灭性的打击,不是么?

9、避免滚动劫持

滚动劫持通常指的是开发者或者设计师为了实现新的布局、动画或者排版,而修改了滚动的固定点甚至滚动条和体验本身,带来的非常规的滚动体验。滚动劫持是最恼人的状况之一,所以,通常而言,除非极个别的原因,尽量不要过度调整和修改用户滚动浏览的体验设计。

Mac Pro 的页面就加入了一些令人抓狂的滚动特效,这是为了适配它的视差布局。

10、不要让视频和音频自动播放并出声

视频和音频自动播放对于用户而言是一种失控的体验,对于用户也是一种刺激。这样的设计应该谨慎使用,除非用户对此已经有所预期。

Facebook 的视频被设置为自动播放,但是不会出声。只有当用户在浏览视频并且与之互动的时候,才会触发声音控制,外放出声。

11、不要为了漂亮而牺牲可用性

网站和APP的界面设计的外观不应该影响它本身的可用性。避免繁琐的设计,为了美观而牺牲内容的可读性和对比性都是不能让人接受的体验。

12、不要使用晃眼的文本和广告

令人晃眼的文本和广告本身体验不佳,它们会让人分心,而且还会触发体质敏感的癫痫患者发病。

浅谈手机网站设计常见问题有哪些

在互联网市场的推动下,网站目前已成为企业对外宣传、树立形象的主要方法和途径。移动通信技术的进步,通过手机上网已经成为了一种生活的一部分,手机开始逐渐代替电脑成为人们进入网络的重要渠道了。不少企业也意识到手机网站建设的重要性,今天我们就来说一下手机网站在设计页面的常见问题。

1、由于移动设备自身的因素,使用手机访问网站需要花费一定的时间。

因此手机网站设计一定要方便用户使用,那么就要将网站重要的内容优先展示给用户看,两侧不要设置导航。建议间隔页面设计成一栏,避免使用表格,使用垂直形式的菜单。

2、手机网站内容的建设。

用户浏览手机网站的情况很多,甚至连走路都可能在浏览页面。因为页面的内容一定要易于阅读并且是清晰的,可以帮助快速地理解到内容的意思。页面内容的设计要合理地做好菜单以及文本的设计。

3、网站代码。

其实网站代码比较简单,可以使用XML或者XHTML,当然也可以HTML以及CSS。标题、描述的meta标签、头部标签都要有关键字,这样可以提升内容的可用性。

4、网站图片的建设。

手机网站在导入图片方面是非常复杂的,而且比较耗流量。因此图片要设置成小尺寸的,而且所使用的格式是JPEG或者是GIF和png的。这几种格式的图片容量比较少,图片要进行压缩处理,做好Alt标签的设置。

5、页面大小的设置。

手机网站在设计风格的时候,要保证所有的元素都是简洁的,尽量设计小页面,将页面的大小控制在10K内。

6、手机网站链接的设计。

成功的手机网站都会有返回按钮以及链接,页面之间可以有机地链接。为了能够让用户准确点击链接,链接的字体可以大一些。

网页设计知识

1. 可用性设计

用户体验在整个设计中的权重将继续加大,如果你的设计在可用性上不足的话,再炫酷也不会有人问津。

如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用户的。无论是谷歌在算法上的变更,还是用户行为数据的变迁,都指向同一个方向:你的网站必须加载得更快,也必须更加易用。

对于电商网站而言,加载速度的影响会更为明显,因为加载速度每延迟一秒,就意味着27%的销量流失掉了。其他的网站也类似,只不过产生的影响不尽相同。

2. 响应式设计

时至今日,响应式网页设计不再是一个可选项,而是必选项了。移动端无疑已经是真正意义上的“第一屏”了。不同类型不同尺寸的屏幕让设计师们面临的界面是真正意义上的“碎片化”的屏幕选项,所以响应式不得不为之。

对,你必须得让你的设计可用,这样一来,你就必须让所有屏幕都可以正常显示。值得注意的是,作为目前的一项铁律,如果你的网站用手机打开而无法正常浏览的话,通常意味着你需要修改和调整了。

在即将到来的2016年,响应式是必须品,不存在某个尺寸或格式能够搞定所有问题,并且变得响应式的将不仅仅是网页本身,还有LOGO、Banner等所有相关元素。最值得学习的案例就是Netflix了,全面响应式的设计,让你彻底告别拉伸和马赛克。

3. APP设计入侵网页设计领域

网页设计早就应该向APP设计学习了,它应该更加高效,更低干扰,应该能提供定制化的用户体验。

随着网络的膨胀和网络空间的饱和度的增加,设计和策划人员也开始在网页的个性化浏览上下功夫,添加更多具备“排他性”的特性。

你要学会移除非必须的信息,让用户可以尽可能快地同你的网页内容进行交互。

网页设计典型问题

4. 更智能的菜单

有些用户已经开始厌倦汉堡菜单和导航图标,但是这种情况仅仅只是开始,因为菜单正在进化为越来越智能。

采用隐藏式导航的网页正在逐步增多,这也许很快会成为一种常态。这一设计出现的理由是,这样的设计可以让用户更少被非关键信息所干扰。

但是,即使我们看不到菜单的存在,但是经验告诉我们,菜单一定是存在的,因此我们无需为此担心——因为当我们需要它的时候,菜单会在合适的地方出现。

专家还预测,未来的菜单可能是多方向滚动的,不过就目前而言,这并没有明确的标准,未来会有各种可能性。

5. 模块和模块化文本

没人会喜欢翻看文章的时候,发现导语又臭又长,是吧?那么在网页上,最好的呈现方式是提供一份简短版本的导语,然后设计前来救场:提供一套模块化的布局方案。

模块化设计之下,每个部分都会划分成为独立的区块,便于操作。但是这一的设计并不会显得单调,相反,它更加难于预测,它可能会将内容以更让人感兴趣、更适宜于探索的方式呈现出来。

就像读杂志一样,用户的实现会从一个内容区块跳转到另外一个区块,从一种类型跳转到另外一种类型。

6. 无限滚动和模块化设计

这也是网页设计最近开始流行的一种玩法,模块化滚动页面设计。网页被划分成许多独立的模块,每个模块内的滚动交互独立于其他的模块。

听起来太过复杂?这倒不然,实际上你可能会在某些网站中看到过类似的状况,侧边栏的滚动速度和页面正文的滚动速度不同。当然,在模块化滚动的页面中,这种状况会更加明显,特性也更加显著。脑补一下,两栏式页面,两列内容单独滚动,就像下面这个案例:

当然,这一切始于无限滚动这一页面设计技术,最典型的就是Pinterest、Facebook和Twitter。

模块化无限滚动也是基于一个相同的假设:向下滚动总是更容易的操作,用户不用停下来点击翻页。这也难怪越来越多的用户沉迷于这种交互模式。

7. Material Design

实际上Material Design 的推出可以追溯到2013年,但是它的流行真正开始于2015年。如果你仔细观察过各个领域的设计风格的改变,你会发现 Material Design 开始大规模地出现在网页、APP甚至艺术作品当中,我们可以预见到 2016年 Material Design 设计风格的爆发式流行。

8. 扁平化设计

严格意义上来说,Material Design 算是扁平化设计中的一个分支,它有着典型的“纸”的隐喻。广泛意义上的扁平化设计依然非常流行,甚至可以说是非常受欢迎。

近几年扁平化的风潮之下,许多品牌也都开始选择简约现代而扁平的风格,视觉设计也大都秉承少即是多的理念。

扁平化设计的优势很明显,这些优势主要体现在用户体验上,他让网页更加轻量自由,降低负担,提升加载时间。

扁平化设计和幽灵按钮等时下流行的设计元素可以很好地配合起来,随着时间的沉淀,类似Material Design的轻量级阴影的加入到扁平化设计中,通常我们称之为扁平化2.0。

网页设计知识分享

1. 视觉化的故事呈现

一图胜千言,相比于长篇大论的文字,视觉化的故事呈现方式会更加直观,也更符合时下的文化特征于用户的阅读习惯。我想下面的数据会给你更多的信心:

全球范围内有1亿人每天至少观看一个视频

网站访客中64%的人会在观看视频后选择购买

80% 的观众会在持续观看一个广告30天后选择购买

92%的人有观看视频之后分享的行为

人类处理视觉元素的速度比文字快6万倍

2. 信息图

信息图是近年来每年都在增长的一种设计手法,信息图以更加视觉化的方式呈现出信息和数据,让用户更容易接受。信息图的火热除了本身的优势之外,造成它流行的的原因很大程度上源自于社交网络、SEO和内容营销的大量需求。

信息图肯定会进一步发展,信息图的模板会更加多样绚丽,也许你会看到更多有趣的扁平风插画和艺术化的表达,也许信息图会和大数据进行更紧密的结合。

3. 炫酷的字体排版

不论是帅气的网站还是令人印象深刻的信息图,炫酷的字体排版似乎已经成为标配了。漂亮的字体排版已经成为品牌化表达的重要手段,是呈现性格的实用手段。

其实字体排版本身就是一门语言。在几年前,通常只有专业的平面设计师能玩转它,不过随着各类字体的广泛流行,使得许多并不精通字体设计的设计师也可以搞定字体排版。

4. 现代复古

现代复古风绝对够酷。从20世纪初到90年代之间所流行的各种元素在现在看来是非常复古的,像素艺术、巨大的移动电话,Tron等等这些元素时下的现代风结合到一起,构建出一种独特的复古氛围,有底蕴,有层次,非常Geek。

5. 丰富色彩

丰富的用色并不是越多越好,这里说的是接近80年代风格的彩虹式用色,多个类似蜡笔的低饱和度色彩协调地搭配到一起,营造出一种愉悦而活泼的氛围,这种配色方式你可以在2016年春的潘通时尚流行色报告中得到印证。

6. 栅格和几何形状

栅格化布局将会成为CSS语言规范中的一部分。栅格不仅主宰着网页设计,还影响着平面设计,这种最早源自于瑞士的现代主义运动的设计方式的确有其独到之处。另外一个值得一提的是几何形状的运用。

几何形状在网页设计和平面设计中都是非常有效的装饰元素,它同时下流行的各种设计元素和设计技巧都可以无缝地搭配在一起,着也是它成为设计趋势的重要原因之一。

7. 干掉图库

在网站中引入图库其实是一件非常无聊而原理原创的一种方式。虽然图库网站很多,但是你会发现大家挑的图片总是那几个。这也是为什么许多图库类的网站都在力图推荐真正流行的、高素质的图片。

虽然有数以百万计的图片可供选择,不过越来越多的设计师开始选择自己拍图,甚至亲自手绘来搞定问题。

8. 视频和GIF图

视频背景和动态图背景也是目前正在流行的趋势之一,2016年将会有更多的网站选择这样的设计。

当然,GIF图在社交网络上通常作为动态表情而存在,那些内涵十足的内容拥有着强大的传播力。

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章