神刀安全网

网站设计那些事儿

互联网的发展,由web1.0的门户网站时代过渡到了web2.0的搜索时代,再过渡到如今的移动互联网时代。技术的迭代更新让人们认识世界的方式发生了极大的改变,但网站则在这数十年的发展变化中,一直发挥着它独特的作用。不同的产品形态(web/wap、APP、PC客户端等)遵从着不同的套路,那么网站设计有什么套路呢?

1年前,曾在摸爬滚打中完成了某官网的改版。在这个过程中,认识到了自己的边界和不足。结合1年前设计网站时踩过的那些坑,我们来聊一聊网站设计那些事,希望我们都能从过往中学习,让未来走得更远。

1、如果让你做一个网站,你会怎么做?

如果有人问你,我要做一个网站,你来帮我规划,你会怎么做? 在开始画原型、画脑图之前,需要弄清楚哪些事?

我认为要搞明白的事情主要是这几点:(1)网站的定位;(2)网站的信息架构;(3)导航设计。

网站的定位,指的是网站的目标用户是谁,主要承载的是什么功能,体现什么价值? 这个问题看起很简单,只是一句话的事,但是却决定了产品在交互、视觉、层级结构等方面如何设计。

举例来说,如果网站的目标用户是年轻用户,那么视觉和交互需要大胆、个性化、酷炫,而如果网站的目标用户是中老年用户,则考虑到这些用户对互联网的使用能力相对较低,则需要将交互和视觉设计得更简单,以便于用户操作。

如果网站的定位是展示公司的企业形象,那么比较偏重内容和美观;如果网站的定位是展示商品进行交易,比如常见的电商网站,那就比较侧重功能和性能,响应是否快、是否能够承受较高的并发量等。

网站的信息架构,指的是网站的层级结构。通常网站的路径相对比较固定,比如对于内容类网站的路径是:首页—>列表页—>详情页;电商类网站的路径是:首页—>列表页—>商品详情页—>提交订单页——>支付页面—>支付完成页。相对固定的路径带来的好处是:1)信息的过滤需由多到少,符合用户寻找信息的套路;2)相对固定的路径,便于养成用户的认知习惯,降低用户的体验成本;3)相对固定的路径,便于设计和技术实现的统一,提高复用性。比如内容类网站的路径是:首页—>列表页—>详情页,那么在进行UI设计的时候,就可以设计三类模版——首页、列表页、详情页。技术在实现的时候,也可以复用一些组建或方法。

网站的信息架构不宜过长,对于用户来讲,在到达目标页面的每一个环节,都有可能流失。因此,为了抓住用户的注意力,我们需要尽可能的缩短用户的体验路径(也即网站的信息架构)。

网站的导航,是网站设计中最重要的元素 。导航可以分为两类:tab类导航和面包屑导航。导航最重要的作用是,告诉用户当前处于什么位置。PM作为设计者,通常能够明白自己的产品的层级关系,但是用户却不一定能够搞懂。当用户浏览到某一个页面发现没有自己想要的内容时,用户需要知道如何回到最初。

1年前在做网站改版的时候,我犯了一个明显的错误。网站层级为:首页—>列表页—>详情页。点击首页的不同按钮可进入到多个列表页,但是列表页上并没有导航,导致到了列表页的用户,一旦发现列表页不是自己想要的内容想要回到首页,不知道如何操作。

2、如果在做网站的时候,提前规划好SEO的需求,TDK的作用是什么?

网站设计那些事儿

关于搜索引擎SEO

TDK是SEO优化的一种常用方法。

T 代表页头中的title元素,D 代表页头中的description元素,K代表页头中的keywords元素

其中”T”代表页头中的title元素,这里可能还要利用到分词技术,当标题(Title)写好后,我们就尽可能不要再去修改了,尽量简洁,没意义的词尽量不要加入到标题中,避免干扰到搜索引擎识别网站主题(标题在三十个以内)。

其中”D”代表页头中的description元素,要知道描述是对网页的一个概述,也是对title的补充,因为title中只能书写有限的字数,所以在description中就要稍微详细的补充起来,一般用一句两句话概括文章的内容,内容要精简,但是次数不要超过4 次,3次最佳,一定要自然。

其中”K”代表页头中的keywords元素,提取页面中的主要关键词,数量控制在三到六个内。想方设法让主关键字都出现。

标题、描述、关键词在seo界也被称为三个标签。

当我们使用搜索功能时,搜索引擎蜘蛛会抓去网页上的关键词等信息,这会作为权重的一部分。好的TDK,可以提升网站在搜索引擎的权重。

SEO的优化是一个长期的工作,也是比较专业的一个工作,通常有专业的SEO人员做此部分工作。TDK的配置,可以参考一些站长工具中提供的热词。

3、网站常见媒体资源

网站上常见的媒体资源有:文本、图片、音频、视频。文本、图片、音频的设计和处理相对简单,此部分主要讲述视频资源的基本知识,以及网站设计中需要考虑的内容。

网站的基本知识:

视频清晰度:常见的视频清晰度有:720p,1080p。

720p就是影片的屏幕尺寸为帧宽度1280、帧高度720,即1280×720的意思,是数字电影成像技术和计算机技术的融合。

1080p就是对于16:9的而言指的是帧宽度1920、帧高度1080,即1920×1080的意思,对于4:3的而言指的是帧宽度1440、帧高度1080,即1440×1080。

高清视频的清晰度取决于其码率的大小,对于同一部影片来说码率越大清晰度越好,文件也相应地更大。但前提是转码时不是人为地把码率进行调高,这样做是毫无意义的。

码流:码流(Data Rate)是指视频文件在单位时间内使用的数据流量,也叫码率,是视频编码中画面质量控制中最重要的部分。同样分辨率下,视频文件的码流越大,压缩比就越小,画面质量就越好。

网站中使用视频资源主要注意视频清晰度和响应时长是否平衡;

视频清晰度取决于分辨率和码流。从用户体验的角度来讲, 视频越清晰越好,但是高清晰度的视频会导致网站的加载速度变慢,反而给用户较差的体验。因此需要在保证清晰度的同时,提高资源加载速度,这时候就需要对视频进行压缩。

4、网站常见性能指标

(1).响应时间:对请求作出响应所需要的时间(我们可以简单理解为,用户点击了网站上的某个按钮,多长时间有反应)响应时间一般需要遵从 2-5-8原则:(据统计当网站慢一秒就会流失十分之一的客户)

 当用户再2-5秒之间得到响应时,会感觉系统的响应速度还可以;

当用户再5-8秒内得到响应时,感觉蛮,但是还可以接受;

当用户大于8秒内得到响应时,感觉无法接受;

(2)吞吐量(Throughput)

     指的是在单位时间内客户端和服务器成功传送数据的数量;

(3)客户端的同一批用户同时执行一个操作的数量。

(4)兼容性:网站能够在哪些浏览器版本正常显示。通常根据网站用户使用的浏览器及浏览器版本决定。

5、不要只关注于眼下,要考虑未来

当需求方说,我要在网站首页加一个按钮,你会怎么做?不加思索的找个空白的位置?还是选择一个扩展性更好的位置?

加一个按钮的事,只要在网站上挤一挤,总还是能找到那么一点位置的。但是,如果之后还要加一个按钮,两个按钮该怎么办?

一个好的产品方案,一定是具有良好的扩展性的。在最开始做设计的时候,就应当考虑到未来可能发生的情况。眼前的偷懒,将会成为未来的大坑,方法总比问题多,想一想总还是有更好的解决方案的。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 网站设计那些事儿

分享到:更多 ()