网页设计中该做和不该做的事情

dribbble.png

网页设计的好坏是一个难以定义的话题。创建一个网站的时候你有很多事情需要考虑。为了能够简化这项任务,我准备了一份应该考虑该做什么和不该做什么的原则清单给每一位网页设计师。当然这份清单非常简洁易懂。我们开始吧!

该做的

在不同设备之间提供一致的体验

用户会通过各种不同的设备访问你的网站:他们可以通过电脑、平板、手机、游戏机甚至他们的iWatch手表。UX设计的很大一部分工作是确保无论访问者是如何通过何种设备访问你的网站,他们应该得到相同的体验。

设计一个简单可用的导航菜单

网站的导航对于一个新访客来说至关重要,她可以通过明确的导航了解网站整体和寻访自己感兴趣的内容,如果你的网站设计的非常漂亮、交互体验非常的棒,但是没有一个简洁易用的导航,访客会直接关掉页面离开。那么我们应该创建一个怎样的导航呢?

  • 简单:尽可能简化导航菜单的数量,让访客可以很快了解导航内容
  • 明了:在导航中明确区分当前页和其他页面
  • 统一:在整个网站不同页面都提供一致的导航菜单

上面提到的只是基础中的基础,如果想要设计出更好的导航,你需要考虑不同设备、不同屏幕以及视觉障碍之间的区别来提供一致性的体验达到不同中的大同。

增强被访问过的链接

链接是关联网站内容之间的重要桥梁,举例有一个近期内容列表,当访客点击其中一个链接并浏览完返回时,这个列表上的链接样式还是一样的话,访客可能会无意识重复点击了已经看过的内容,这对于访客来说是浪费时间的,我们应该减少不必要的犯错机会,所以需要针对已访问过的内容链接进行不同样式的区分,这样访客可以非常明确的了解自己看过什么没有看过什么。

可以很容易的浏览你的页面

访客浏览你的网站时,首先会整体上扫一眼内容,大部分人都会用Z型路径来浏览,所以Z字型的4个点至关重要,要在这4点上突出网站的内容来帮助访客快速的了解网站,但是要注意浏览的先后顺序(左上>右上>左下>右下)。

一般情况下我们会在左上突出品牌标识和标语,接着在右上提供搜索或注册登录,再到左下突出主要的内容,直到结束时通过一些激励的方式来挽留可能跳出的访客,具体的内容结构根据不同类型的网站会有一些区别,但整体的思路是一样的。

确保网站链接的可用性

当访客浏览一个网站时可能是通过搜索引擎或者直接访问,如果遭遇404页面的时候,大部分访客会主动放弃掉接下来的访问,这会大大增加网站的跳出率。我们应该针对网站本身的链接做一个全面的检查,避免出现有404页面的可能。

但404页面在所难免会发生,还有502、403等等情况,作为设计师,我们应该尽可能的减轻带给访客的冲击,通过不同形式的指引来帮助访客找到目的地或者感兴趣的内容。

统一可点击元素的形态

如何让一个可点击元素看上去就是可点击的,我们需要做到2点:

  • 让同类型的可点击元素使用一致的样式,比如文字有下划线,按钮有边框,图片有hover效果等。
  • 让静态内容与可点击元素进行样式区分,避免产生误解。

不该做的

让访客等待太长时间

记住:10秒是访客愿意等待网站加载的最大值,你应该想办法减少网站的资源让其能更快的呈现给访客。

当用户访问你的网站时不能立即看到相应内容,而是需要先等待各种资源加载完毕(比如一些较大的GIF图、字体库和一些JS脚本等),纵然你有精美有趣的加载动画,一旦时间过长,访客也会失去耐性,她们会直接关闭页面。

所以我们尽量将界面设计的不那么复杂,没有过多的资源,并且及时的跟进前端的开发了解页面相关的事项(比如尽可能的通过svg、iconfont、base64来替换一些图片,通过视频来替换较大的GIF图等等),记住资源越少体积越小速度越快。

在新标签页打开内链

也许通过打开新标签页来提高已访问页面的平均时长让统计报表变的好看,但这么做往往是侵占了访客的自由,他们需要手动去关闭已阅的页面,无法通过浏览器后退到旧页面,一大堆标签页占用系统资源等等。
我们自己就是这些受害者,所以我们在设计页面的时候应该考虑到这些,给访客更好的体验,保留同站点内链在当前页面打开。

广告信息

广告让人又爱又恨,爱它的是网站本身,应该有收益。恨它的是用户,干扰访问,获取隐私。
我们在设计页面的时候需要更多的考虑广告和页面内容的融合,当然最好是减少广告的出现,特别是那些闪动的、大量的、反复的广告信息。

如果项目里面有客户投放的广告请一定坚持使用自己的设计方案,更好的融入网站本身(毕竟客户给的广告图大多数都不符合)。

鼠标滑轮滚动劫持

自从全屏滑动流行开始很多的网站开始加入了这个设计,通过监听鼠标、触控板滑动来显示整屏的内容。但实际用户操作又是怎样?一不小心从第一屏直接滑到了最后一屏,又或者刚刚停在了下一屏突然自己又跳回了上一屏,非常的问题在测试的阶段不容易发现。

所以建议进行这种设计的时候请考虑到更多的可能性,最好可以完成根据速度位置的精确滑动来降低用户操作的难度。

自动播放视频带有声音

越来越多的网站使用视频背景或者在打开时间线的时候自动播放视频,这是一个趋势,但有很多网站做了非常错误尝试,比如他们开启了声音,隐藏了视频控件,使用了flash(为什么还不淘汰!!)。所以请不要像他们学习,你应该:

  • 默认关闭视频声音
  • 使用非flash的视频流
  • 提供可用的控件
  • 开启声音时默认是50%
  • 提供键盘控制

以上这些建议同样适合FE阅读

头图来自:ueno

标签: 网页设计, webdesign

添加新评论