数极客首页

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

在工业化设计融入人们生活的现今,用户体验一词就常常出往常

人们的视野
里,随着互联网web2.0时期
的到来,大大小小的网站设计中也都开端
关注用户体验的方面,对什么是用户体验(百度这四个字,比我写什么解释都好)就不做细致
赘述了,置信
大家比我了解

的愈加
丰厚

 

用户体验从产品设计阶段便开端
介入进来,如原型设计中交互方式

设计、功用
完成
方式设计都融入了设计人员对用户的关怀

,听过这样的一句话:“具有良好用户体验的产品,不只
仅取决于一个有着丰厚
交互设计阅历

的产品设计师,还与产品消费
过程中的每一个环节能否
都具备良好的用户体验认识
有一定的关系”。
今天我想从一个页面重构工程师的角度动身
,从两个方面去谈谈在我的工作中,我所了解

的用户体验,以及我做了哪些和用户体验有关的事情。

一、t从可用到易用的细节处置

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

随着视觉设计的展开

,对按钮、链接、或者导航菜单的表现方式变得异常丰厚
,比如

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

这些图片丰厚
了对鼠标点击方式
的视觉表现力。在基于功用
可用的前提下,逐步

经过
视觉渲染抵达

美化的效果,有了精巧
的设计图后,就需求
页面重构工程师们加以切割,在代码化的过程中,通常要做如下考量:

  • 可点击区域大小,例如(下图)固然

    作风
    上似乎按钮只需

    10*10,但是在完成
    时,要思索
    用户操作起来是不是很容易获取锚点,而不是点来点去找不到 一个页面重构工程师眼中的“用户体验”

    通常拿到设计需求,我会央求

    设计师辅佐

    梳理icon,普通
    会分两类,功用
    型、注释型。同时央求

    两种类

    型图片的像素区间要各自坚持
    分歧
    性,这样一来设计师在整理的过程中就会认识
    到,有的文字没有必要加注释图片,有的是功用
    和注释类型的大小、作风
    可能不分歧
    ,梳理过程中设计师会去调整一下,同时也在创意的过程中渗透

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

    3.t因设计或排版而没有完好

    显现
    出来的文字信息的title提示

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

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

    思索
    各个层面的用户体验,是为了让用户尽量全方位的感遭到
    网页的无边境
    阅读
    ,在视觉和交互充沛

    发挥作用的背后,代码标签的选择,也从一定层面决议
    了用户能否
    能够

    更好的运用
    ,目前的一些搜索引擎,如Google、Baidu等,在过滤网页信息的过程中,有一套机制去寻觅
    你网页中的主要内容,那些对搜索引擎比较

    友好的标签会更有利于页面信息的抓取,在用户搜索的过程中,抛开企业间战略协作
    不谈,也会相对显现
    在比较

    靠前的位置(当然假定

    搜索引擎的广告效益十分

    好的时分
    ,或许第一屏还是与你无缘,这……你懂的)

    5.t网站字色的分歧
    性,链接色、提示色、内容字色等 (降低学习本钱
    ,培育
    用户习气

    设计一套互动类产品(博客、视频、邮箱)或者用户功用
    型产品(消费类产品、资讯类产品等)同样面临着一个问题,用户习气
    ,人其实对规律会更容易产生安全

    感也更容易增加温馨
    性。所以在网页的设计过程中,统一视觉感受不只
    让用户安心的温馨
    的去阅读
    图片文字音乐多媒体等信息,也能培育
    用户认知。
    因而

    在设计师天马行空的发明

    力面前,我总是横亘在他们面前的那个规范

    和逻辑的卫斗士。当设计师天马行空的时分
    我是不会也不敢去干扰他们,但假定

    谁通知
    我作风
    肯定
    时,我就会站出来披荆斩棘,央求

    设计师给出一整套设计规范

    ,例如:
    • 链接色分主链接色和辅助链接色,倡议

    不要超越
    2种,增加类功用
    区域除外
    • 文字色也是主辅都要有,同样不要超越
    两种(其实有多少种都能够

    ,但你要思索
    用户花多长时间顺应
    你的五花八门)
    • 提示信息又分普通提示、正确提示、错误提示、空状态提示等
    • 什么图标类型分为功用
    型图标和注释型图标

     

    6.t各种内容读取花较长时间的模块,在内容尚未加载胜利

    时,先显现
    图片图片列表页、或视频截图列表页面,在图片尚未加载时显现
    初始图片,并固定位置,避免

    满屏跑图

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

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

    在处置
    表单过程中,会思索
    提示信息所在位置,包括默许
    提示,出错提示,正确提示等,假定

    提示作风
    不统一,会中缀
    用户行为,页面表单填写过程中的流利
    度十分

    重要,为什么会提起这一点,由于
    在理论

    工作中,假定

    没有交互设计阅历

    ,不论

    产品还是设计人员都经常会遗漏表单相关的各种提示信息,但这会影响页面构建过程中HTML的结构

    ,因而

    假定

    前期发现产品文档,或者设计稿都没有表现出相关内容,无妨
    提示
    他们务必思索
    并添加好,减少后期调整页面结构

    的冗余工作量。
    一个页面重构工程师眼中的“用户体验”

    很多人会说这些不是页面范畴,那页面是什么范畴呢,这些学问
    有产品范畴的、有设计范畴的、有用户研讨
    范畴的、有交互范畴的,在我看来会这些最大的益处

    是减少你的工作量,我以为
    这些都是很基础

    的学问
    ,不是必需
    控制
    的,但最好了解

    ,了解

    的益处

    十分

    显而易见,就是面对不一定靠谱的需求时,能够

    对症下药

    的给出一些意见,从而减少一些返工,或者细碎的体验的增加。

    二、从慢慢

    等候
    到愉悦点击的变化

    1.页面模块的按需加载

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

    2.页面公用元素复用

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

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

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

    4.t央求

    数据量
    和背景大小均衡

    处置

    图片央求

    数方面,有时分
    你要思索
    CSS Sprite 拼合图片减少背景数,同时还要留意
    拼合图片K数不要太大,以及拼合图片留意
    纵横比,倡议

    拼竖图(做过实验,同样内容,横图体积大于竖图)
    当背景图片需求
    平铺时,请酌情思索
    背景图片大小,比如

    1px高的虚线,请不要切一个1*2的小图,比如

    1*10,1*50,主要考量在于1*2的小图的平铺次数。
    影响页面性能的要素
    还有很多,例如hack的运用
    、position的运用
    , table的运用
    等等……关键是坚持
    技术的新颖
    ,丰厚
    自己

    的学问

    以上文章只是沉淀了一下过往我在页面重构工作中所领悟的用户体验。略显肤浅

    ,可能大家会质疑,为什么写页面的还要自己

    加图标状态或者修正
    部分

    效果,要知道

    在早期的互联网在分工上没有往常

    这样精专的分工,顶多分个前台、后台、产品。当然在当初这些事情不一定有往常
    的专业深度,但涉猎面的确

    较往常
    是更开阔
    的。所以早几年开端
    从事网页制造
    的朋友,都不会对设计制造
    界定的那么显然
    ,在图形图片处置
    方面也是有一定认知和操作才干

    的。不是为了显摆什么,只是觉得学问
    的深度和广度同样重要。

    来源:http://ued.sina.com/?p=868

     

    给大家举荐

    我国新一代大数据用户行为剖析

    与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

    用户行为数据和业务数据,能够

    自动监测网站、APP、小程序等多种渠道推行
    效果剖析

    ,是增长黑客们必备的互联网数据剖析

    软件。数极客支持实时多维剖析

    、漏斗剖析

    、留存剖析

    、途径
    剖析

    等十大数据剖析

    办法

    以及APP数据剖析

    网站统计网站剖析

    小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

    模型,是用户行为剖析

    范畴
    首款应用定量剖析

    与定性剖析

    办法

    数据剖析

    产品

    发表评论

    评论已关闭。

相关文章