一个页面重构工程师眼中的“用户体验”

时间 2019-12-11

标签一个页面工程师眼中用户体验繁體版

原文原文链接

转自：http://www.sharetk.com/html/ued/User-Research/1415.htmlhtml

在工业化设计融入人们生活的现今，用户体验一词就经常出如今人们的视线里，随着互联网web2.0时代的到来，大大小小的网站设计中也都开始关注用户体验的方面，对什么是用户体验（百度这四个字，比我写什么解释都好）就不作详细赘述了，相信你们比我了解的更加丰富。
html5

用户体验从产品设计阶段便开始介入进来，如原型设计中交互模式设计、功能实现方式设计都融入了设计人员对用户的关怀，听过这样的一句话：“具备良好用户体验的产品，不只仅取决于一个有着丰富交互设计经验的产品设计师，还与产品生产过程当中的每个环节是否都具有良好的用户体验意识有必定的关系”。
今天我想从一个页面重构工程师的角度出发，从两个方面去谈谈在个人工做中，我所理解的用户体验，以及我作了哪些和用户体验有关的事情。web

1、从可用到易用的细节处理

1.按钮、连接、导航菜单的鼠标触发状态、鼠标手型等

随着视觉设计的发展，对按钮、连接、或者导航菜单的表现方式变得异常丰富，好比:
安全

这些图片丰富了对鼠标点击形式的视觉表现力。在基于功能可用的前提下，逐渐经过视觉渲染达到美化的效果，有了精美的设计图后，就须要页面重构工程师们加以切割，在代码化的过程当中，一般要作以下考量：框架

可点击区域大小，例如（下图）尽管风格上彷佛按钮只有10*10，可是在实现时，要考虑用户操做起来是否是很容易获取锚点，而不是点来点去找不到

模块化
鼠标操做类型的提示，鼠标输入提示、手型提示、文本区域提示、不可点击提示，尽管整个页面的视觉引导更重要，但用户在操做时，人眼一直跟随着鼠标或键盘的操做而转换，若是能伴随着正确的鼠标操做提示，更可加强引导做用。从而提高交互体验。工具
按钮风格的一致性，按钮当前状态和点击状态的统一，按钮按照功能所做的统一，
设计师天马行空的想象力，赋予了他们创造性，而咱们既要保留他们的创造力还要抽象出一些共用特征，在我看来按钮类型有3种，若是能有效区分，对网站的总体风格的创建和强化交互感觉方面都会有必定一致性，同时在页面构建过程当中会抽离成公用信息，很是便于管理和维护。性能

1）如确认、取消等，可称之为贯穿型学习
2）如登陆、加关注等，可称之为点睛型，这一型在实际工做中一般从视觉上都略强于贯穿型，因此会建议设计师作必定统一，有时候是风格上，有时候是结构上，再甚者就是大小比例上优化
3）如发博文、发微博等按钮，可称之为加强型，一般这个类型不会限制设计师按照标准类型去作，即使出来的是个异型，咱们仍是应该理解的。
4）最后就是不管哪一种类型，都要注意是否有鼠标点击的 hover状态，即使设计师没有设计，也要作出hover的交互效果，至少是预留，就我而言一般都是在原按钮颜色基础上调整一下颜色深度做为hover状态，大部分按钮我都会考虑作出交互效果，固然也有例外，好比活动专题中的点击区域，一般不会增长点击后的过度明显效果，若是非要作出一点效果，最可能是调整一下文字自己的明暗度。（我认可我有些吹毛求疵）

2.图片的alt解释信息

一般拿到设计需求，我会要求设计师帮助梳理icon，通常会分两类，功能型、注释型。同时要求两种类型图片的像素区间要各自保持一致性，这样一来设计师在整理的过程当中就会意识到，有的文字没有必要加注释图片，有的是功能和注释类型的大小、风格可能不一致，梳理过程当中设计师会去调整一下，同时也在创意的过程当中渗透一些规则。

第1、二行是注释型，第三行是功能型

3.因设计或排版而没有彻底显示出来的文字信息的title提示

产品或用户常常抱怨“后面的文字看不到，这究竟是什么内容？”之因此出现这样的状况，主要是没有考虑到文字信息出现的位置和当时这些文字的重要性，若是是图片瀑布流，那文字信息的做用只是索引而已，若是是文章列表页或视频列表页、甚至正文页这样的终极页面，标题名称是务必要所有展现的。因此为了不折磨用户，必定要给显示不彻底的信息增长title，在存在缺陷的状况下也能有让用户有些许安慰，不然你就太伤用户的心了。

4.网站logo的权重设置H一、网站主要标题、标识的权重设置H2-H六、stong、em、b等(对搜索引擎的友好可读性)

考虑各个层面的用户体验，是为了让用户尽可能全方位的感觉到网页的无边界浏览，在视觉和交互充分发挥做用的背后，代码标签的选择，也从必定层面决定了用户是否可以更好的使用，目前的一些搜索引擎，如Google、Baidu等，在过滤网页信息的过程当中，有一套机制去寻找你网页中的主要内容，那些对搜索引擎比较友好的标签会更有利于页面信息的抓取，在用户搜索的过程当中，抛开企业间战略合做不谈，也会相对显示在比较靠前的位置（固然若是搜索引擎的广告效益很是好的时候，或许第一屏仍是与你无缘，这……你懂的）

5.网站字色的一致性，连接色、提示色、内容字色等（下降学习成本，培养用户习惯）

设计一套互动类产品（博客、视频、邮箱）或者用户功能型产品（消费类产品、资讯类产品等）一样面临着一个问题，用户习惯，人其实对规律会更容易产生安全感也更容易增长温馨性。因此在网页的设计过程当中，统一视觉感觉不只让用户安心的温馨的去浏览图片文字音乐多媒体等信息，也能培养用户认知。
所以在设计师天马行空的创造力面前，我老是横亘在他们面前的那个规范和逻辑的卫斗士。当设计师天马行空的时候我是不会也不敢去干扰他们，但若是谁告诉我风格肯定时，我就会站出来披荆斩棘，要求设计师给出一整套设计规范，例如：
• 连接色分主连接色和辅助连接色，建议不要超过2种，增长类功能区域除外
• 文字色也是主辅都要有，一样不要超过两种（其实有多少种均可以，但你要考虑用户花多长时间适应你的五花八门）
• 提示信息又分普通提示、正确提示、错误提示、空状态提示等
• 什么图标类型分为功能型图标和注释型图标

6.各类内容读取花较长时间的模块，在内容还没有加载成功时，先显示图片图片列表页、或视频截图列表页面，在图片还没有加载时显示初始图片，并固定位置，防止满屏跑图

7.提示性文字位置在不干扰用户操做的前提下，交互一致性很重要，如固定在某一提示位置或不影响操做的颜色提示等

在处理表单过程当中，会考虑提示信息所在位置，包括默认提示，出错提示，正确提示等，若是提示风格不统一，会中断用户行为，页面表单填写过程当中的流畅度很是重要，为何会提起这一点，由于在实际工做中，若是没有交互设计经验，不论产品仍是设计人员都常常会遗漏表单相关的各类提示信息，但这会影响页面构建过程当中HTML的结构，所以若是前期发现产品文档，或者设计稿都没有表现出相关内容，不妨提醒他们务必考虑并添加好，减小后期调整页面结构的冗余工做量。

不少人会说这些不是页面范畴，那页面是什么范畴呢，这些知识有产品范畴的、有设计范畴的、有用户研究范畴的、有交互范畴的，在我看来会这些最大的好处是减小你的工做量，我认为这些都是很基础的知识，不是必须掌握的，但最好了解，了解的好处很是显而易见，就是面对不必定靠谱的需求时，能够有的放矢的给出一些意见，从而减小一些返工，或者细碎的体验的增长。

2、从慢慢等待到愉悦点击的变化

1.页面模块的按需加载

因为互联网产品发展越来越趋向于规模化和正规化，在早年间采用全站只加载一个公用样式的时代已通过去了，取而代之的是对性能更优的模块化按需加载模式，如上图所示，模块化显而易见的好处就是代码冗余相对较低，代码量也较小。除此以外模块化的好处还包括：结构清晰，易上手；频繁变动产品需求时的快速维护和开发；快速下线局部模块；动态调整页面模块加载优先级时，无需剥离任何代码；便于多人协同开发；下降多人协同开发时，互相覆盖代码；适合开发大型产品等不少优势。不论对用户，仍是对维护开发都是很是有利的。

2.页面公用元素复用

所谓公用元素，主要指：: reset类型; 各种文字色; 各种连接色; 浮层框架; 页面主框架; 适用于本站的高复用补丁类型

3.文件调用的层级酌情减少、文件名酌情缩短

如，image/index/module1/limoumou/icon/fabiaopinglun.jpg 酌情优化目录层级
如，fabiaopinglun_default.jpg 、.CommentListContent_linedot{} 酌情优化文件名长度

4.请求数量和背景大小均衡处理

图片请求数方面，有时候你要考虑CSS Sprite 拼合图片减小背景数，同时还要注意拼合图片K数不要太大，以及拼合图片注意纵横比，建议拼竖图（作过实验，一样内容，横图体积大于竖图）
当背景图片须要平铺时，请酌情考虑背景图片大小，好比1px高的虚线，请不要切一个1*2的小图，好比1*10,1*50，主要考量在于1*2的小图的平铺次数。
影响页面性能的因素还有不少，例如hack的使用、position的使用, table的使用等等……关键是保持技术的新鲜，丰富本身的知识。

以上文章只是沉淀了一下过往我在页面重构工做中所领悟的用户体验。略显肤浅，可能你们会质疑，为何写页面的还要本身加图标状态或者修改局部效果，要知道在早期的互联网在分工上没有如今这样精专的分工，顶多分个前台、后台、产品。固然在当初这些事情不必定有现在的专业深度，但涉猎面的确较如今是更宽阔的。因此早几年开始从事网页制做的朋友，都不会对设计制做界定的那么明显，在图形图片处理方面也是有必定认知和操做能力的。不是为了显摆什么，只是以为知识的深度和广度一样重要。