设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > 平面设计教程:页面构思中如何考虑用户体验(一)
平面设计教程:页面构思中如何考虑用户体验(一)
发布时间: 2014-07-17
用户体验是一种纯主观在用户使用产品过程中建立起来的感受。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计实验来认识到。新竞争力在网络营销基础与实践中曾提到计算机技术和互联网的发展,使技术创新形态正在发生转变,以用户为中心、以人为本越来越得到重视,用户体验也因此被称做创新2.0模式的精髓。

用户体验从产品设计阶段便开始介入,如原型设计中交互模式设计、功能实现方式设计都融入了设计人员对用户的关怀,听过这样一句话:“具有良好用户体验的产品,不仅仅取决于一个有着丰富交互设计经验的产品设计师,还与产品生产过程中的每一个环节是否都具备良好的用户体验意识有一定的关系”。

本文从一个页面设计师的角度出发,从两个方面谈谈作者所理解的用户体验,以及作者做了哪些和用户体验有关的事情。


从可用到易用的细节处理

1.  按钮、链接、导航菜单的鼠标触发状态、鼠标手型等
随着视觉设计的发展,按钮、链接或者导航菜单的表现方式变得异常丰富,比如:

这些图片丰富了鼠标点击形式的视觉表现力。在基于功能可用的前提下,逐渐通过视觉渲染达到美化的效果,有了精美的设计图后,就需要页面重构工程师们加以切割,在代码化的过程中,通常要做如下考量:
可点击区域大小,例如(下图)尽管风格上似乎按钮只有 10*10,但是在实现时,要考虑用户操作起来是不是很容易获取锚点,而不是点来点去找不到。

鼠标操作类型的提示,鼠标输入提示、手型提示、文本区域提示、不可点击提示,尽管整个页面的视觉引导更重要,但用户在操作时,人眼一直跟随着鼠标或键盘的操作而转换,如果能伴随着正确的鼠标操作提示,更可增强引导作用,从而提升交互体验。
按钮风格的一致性,按钮当前状态和点击状态的统一,按钮按照功能所作的统一。
设计师天马行空的想象力,赋予了他们创造性,而我们既要保留他们的创造力还要抽象出一些共用特征,在我看来按钮类型有 3 种,如果能有效区分,对网站的整体风格的建立和强化交互感受方面都会有一定的一致性,同时在页面构建过程中会抽离成公用信息,非常便于管理和维护。
如确认、取消等,可称之为贯穿型。
如登录、加关注等,可称之为点睛型,这一型在实际工作中通常从视觉上都略强于贯穿型,所以会建议设计师做一定统一,有时候是风格上,有时候是结构上,再甚者就是大小比例上。
如发博文、发微博等按钮,可称之为增强型,通常这个类型不会限制设计师按照标准类型去做,即便出来的是个异型,我们还是应该理解的。
最后就是无论哪种类型,都要注意是否有鼠标点击的 hover 状态,即便设计师没有设计,也要做出 hover 的交互效果,至少是预留,就我而言通常都是在原按钮颜色基础上调整一下颜色深度作为 hover 状态,大部分按钮我都会考虑做出交互效果,当然也有例外,比如活动专题中的点击区域,通常不会增加点击后的过分明显效果,如果非要做出一点效果,最多是调整一下文字本身的明暗度。
2.  图片的alt解释信息

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

第一、二行是注释型,第三行是功能型
3.  因设计或排版而没有完全显示出来的文字信息的title提示



产品或用户经常抱怨“后面的文字看不到,这到底是什么内容?”之所以出现这样的情况,主要是没有考虑到文字信息出现的位置和当时这些文字的重要性,如果是图片瀑布流,那文字信息的作用只是索引而已,如果是文章列表页或视频列表页、甚至正文页这样的终极页面,标题名称是务必要全部展示的。所以为了避免折磨用户,一定要给显示不完全的信息增加 title,在存在缺陷的情况下也能有让用户有些许安慰,否则你就太伤用户的心了。
4. 网站 logo 的权重设置 H1、网站主要标题、标识的权重设置 H2-H6、stong、em、b等(对搜索引擎的友好可读性)
考虑各个层面的用户体验,是为了让用户尽量全方位的感受到网页的无边界浏览,在视觉和交互充分发挥作用的背后,代码标签的选择,也从一定层面决定了用户是否能够更好的使用,目前的一些搜索引擎,如 Google、Baidu 等,在过滤网页信息的过程中,有一套机制去寻找你网页中的主要内容,那些对搜索引擎比较友好的标签会更有利于页面信息的抓取,在用户搜索的过程中,抛开企业间战略合作不谈,也会相对显示在比较靠前的位置。
5. 网站字色的一致性,链接色、提示色、内容字色等 (降低学习成本,培养用户习惯)
设计一套互动类产品(博客、视频、邮箱)或者用户功能型产品(消费类产品、资讯类产品等)同样面临着一个问题——用户习惯,人其实对规律会更容易产生安全感也更容易增加舒适性。所以在网页的设计过程中,统一视觉感受不仅让用户安心、舒适地去浏览图片、文字、音乐、多媒体等信息,也能培养用户认知。
当设计师天马行空的时候我是不会、也不敢去干扰他们,但如果谁告诉我风格确定时,我就会站出来要求设计师给出一整套设计规范,例如:
链接色分主链接色和辅助链接色,建议不要超过 2 种,增加类功能区域除外
文字色也是主辅都要有,同样不要超过两种(其实有多少种都可以,但你要考虑用户花多长时间适应你的五花八门)
提示信息又分普通提示、正确提示、错误提示、空状态提示等
什么图标类型分为功能型图标和注释型图标
6. 各种内容读取花较长时间的模块,在内容尚未加载成功时,先显示图片图片列表页或视频截图列表页面,在图片尚未加载时显示初始图片,并固定位置,防止满屏跑图


7. 提示性文字位置在不干扰用户操作的前提下,交互一致性很重要,如固定在某一提示位置或不影响操作的颜色提示等
在处理表单过程中,会考虑提示信息所在位置,包括默认提示、出错提示、正确提示等,如果提示风格不统一,会中断用户行为,页面表单填写过程中的流畅度非常重要,为什么会提起这一点,因为在实际工作中,如果没有交互设计经验,不论产品还是设计人员都经常会遗漏表单相关的各种提示信息,但这会影响页面构建过程中 HTML 的结构,因此如果前期发现产品文档,或者设计稿都没有表现出相关内容,不妨提醒他们务必考虑并添加好,减少后期调整页面结构的冗余工作量。

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



文章来源:森动网小鱼儿,转载请注明出处!