用户体验设计视觉元素构成

标签: 用户体验 设计 视觉 | 发表时间:2013-12-04 09:54 | 作者:蜗小牛
出处:http://www.iteye.com
一般来说,网站的视觉元素主要有文字、图片、表单和按钮四大类,还包括标签,列表,多媒体等等,这些都是网站外观设计的组成部分,服从于网站的整体风格需要。用好网站视觉元素,能更好的指导和协助用户完成网站上的任务流程,使用户获得良好的在线体验。


       让文字易辨识
       字体是帮助用户获得与网站的信息交互的重要手段,因而文字的易读性和易辨认性是设计网站页面时的重点。不同的字体会营造出不同的氛围,同时不同的字体大小和颜色也对网站的内容起到强调或者提示的作用。


        正确的文字和配色方案是好的视觉设计的基础。网站上的文字受屏幕分辨率和浏览器的限制,但是仍有通用的一些准则:文字必须清晰可读,大小合适,文字的颜色和背景色有较为强烈的对比度,文字周围的设计元素不能对文字造成干扰。尽可能少用游动文字、图形文字。设计师在进行网站的页面文字排版时要做到以下几点:
·避免字体过于黯淡导致阅读困难
·字体色与背景色对比明显
·字体颜色不要太杂
·有链接的字体要有所提示,最好采用默认链接样式
·标题和正文所用的文字大小有所区别
·作为内容的文字字体大小最好能做大一点
·英文和数字选用与中文字体和谐的的字体

        让图片更合理
        页面上图片也是版式的重要组成,正确的运用图片,可以帮助用户对信息加深印象,引导用户的行为,与网站整体风格协调的图片,能帮助网站营造独特的品牌氛围,加深浏览者的印象。
        网站中图片的主要作用大致有以下三种:banner广告图片、产品展示图片、修饰性图片。图片运用不合理的情况通常有:图片尺寸过大、动态图片过多、应该使用文本的地方错用了图片。
        在图片设计处理上:
·出现的位置和尺寸合理,不对信息获取产生干扰,喧宾夺主
·考虑浏览者的网速,图片文件不宜过大
·有节制的使用flash和动画图片
·产品图片的alt标签加上产品名称
·形象图片注重原创性


          让表单更易用
         用户在填写网站表单的时候,无论是注册、发布信息/文章、信息反馈,都已到了顾客转化的关键环节,重要性不言而喻。表单涉及到较复杂的在线交互行为,与流程息息相关,当一个交互过程需要分成很多个步骤完成的时候,更重视对用户一步一步的引导,每一次点击都合理有效,接近并最终达成任务目标。好的表单设计可以提升用户体验,但不少网站的表单设计都或多或少存在一些问题,排除内容部分的因素,就设计上而言,表单设计容易犯的几个错误包括以下几点:


-过于冗长的表单和繁多的填写项
-不知所以的单选框和复选框
-填写出错后才出现说明和帮助
-提交按钮不易发现
           建议设计师可以通过以下几点来提高表单的易用性:
·控制输入框的大小、恰当对齐,使之符合内容版式的需要
·根据表单元素的相关性进行合理分组和排序
·有下拉选择区域的下拉列表,将初始状态默认为全部区域
·下拉列表过长时,可横向排列
·对填写内容提供必要的帮助提示
·避免一页表单必填项堆积过多,通过分页或收缩方式实现分步式表单形式
·提交按钮醒目,位置符合习惯


         让按钮更易点击
         按钮是网站界面中伴随着用户的点击行为的特殊图片,由于按钮点击行为是将用户引向顾客转化的重要步骤,因此按钮在设计上有较高的要求。按钮设计的基本要求是要达到“点击暗示”效果,凹凸感、阴影效果、水晶效果等均是这一原则的网络体现。同时,按钮中的可点击范围最好是整个按钮,而不仅限于按钮图片上的文本区。
        建议设计师可以通过以下几点来设计按钮,让它更易被点击。
·按钮颜色与背景颜色有一定的对比度
·按钮有浮起感
·按钮文字提示明确,如果没有文字,确信所使用的图形按钮是约定俗成、容易为用户理解的图片
·对顾客转化起重要作用的按钮用色突出一点,尺寸大一点
·可点击范围够大,包括整个按钮





作者:COO@网站竞争力网站运营、网络营销学习与分享
原文链接:http://www.websitecoo.com/yonghutiyanhewangluoxingwei/wangzhanshijueyuansusheji.html

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [用户体验 设计 视觉] 推荐:

用户体验设计视觉元素构成

- - 浏览器 - 互联网 - ITeye博客
一般来说,网站的视觉元素主要有文字、图片、表单和按钮四大类,还包括标签,列表,多媒体等等,这些都是网站外观设计的组成部分,服从于网站的整体风格需要. 用好网站视觉元素,能更好的指导和协助用户完成网站上的任务流程,使用户获得良好的在线体验.        让文字易辨识.        字体是帮助用户获得与网站的信息交互的重要手段,因而文字的易读性和易辨认性是设计网站页面时的重点.

谷歌用户体验设计准则

- 雄杰 - 所有文章 - UCD大社区
Googl用户体验团队致力于创建有用的(useful)、快速的(fast)、简单的(simple)、有吸引力的(engaging)、创新的( innovative)、适合大众的(universal)、有用的(profitable)、漂亮的(beautiful)、值得信赖的(trustworthy)、个性化的(personable)的应用.

复杂性和用户体验设计

- - ITeye资讯频道
每一个交互设计师应该都怀有一颗追求简单的心——轻盈的操作、简易的流程、干净的界面. 每每提及复杂性,必然会想到其对立面——简单. 所谓简单,就是要去除不必要的干扰,让用户直达目标. UX的使命之一就是:将复杂的流程简单化. 其间,纠结一个Button的摆放、大小、颜色,又或者研究各类用户群体的“脾气”.

交互设计,产品设计与用户体验设计

- 章明 - 所有文章 - UCD大社区
交互设计,产品设计和用户体验设计经常被混淆,而实际上完全不是一个概念甚至不是一个纬度的概念;. 一直认为交互设计与互动设计很接近,互动设计这个词更多用在flash设计中,维基百科中的交互设计的定义也证实这个想法:. 交互设计,又称互动设计,(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域.

如何设计优秀的用户体验

- gelanz - 互联网的那点事...
最近在看UXGuide翻译的一篇Windows用户体验交互设计规范,Windows作为UI方面的鼻祖,很多知识和经验值得延续,文章解释地特别祥细. 我结合自己对一些产品的体验,对于如何设计优秀的用户体验这篇文章,写写自己消化的东西,主要是案例. 1  抓住基本功能,做出特色. 产品实现用户的最大需求是什么,产品核心的使用功能,目标的用户是谁,核心的使用情景.

最令人蛋疼的10种用户体验设计师

- Sinan - 互联网的那点事
和设计师打过交道的人一定也见到过少数极品,不是扎着小辫子留着小胡子,就是剃了光头抽根烟,通常说起来一套一套的人作品都很一般般,而作品一般般的人,又不和你多说,总之令人蛋疼. 1、“用户肯定……用户绝对……”. 设计师:“这个页面用蓝色用户绝对喜欢……这个字体用雅黑用户绝对可以看清的……这按钮这样做绝对有用户点的.

美丽邂逅——解疑用户体验设计

- Lee - 《程序员》杂志官网
同乘班车的路上,作者与同事关于用户体验设计的精彩问答. 搭往公司的班车,遇到一个其他部门的同事,他问的很多问题,引出了本文. 这些问题,其实我也经常被其他人问到,这其中,既有我们亲密合作的伙伴,如产品经理、开发工程师(程序员),也有对于产品决策有绝对发言权的老板,还有平时和我们工作交集不多、但却是一个成功的产品生态链上重要的一环的角色,比如来自客服部门和销售部门的同事.

移动用户体验设计中的原型应用

- 超 - UED TEAM,用户体验设计,web前端开发
一把好的椅子,是否需要我们通过阅读使用手册才能知道如何使用它吗. 一把好的椅子,是在我们看到它时,我们很自然的就知道它能够干什么,我们该如何使用它. 也就是说:“椅子”这个概念已经深入人心,是个被高度认可的原型(Archetype). 现有的移动领域里,我们也在探索如何将“原型”的概念揉入到我们的设计中去.

用户体验设计的五项原则

- 京哲 - 所有文章 - UCD大社区
前几天接受《商学院》杂志对我的采访,今天把整理好的文章先发布出啦,最近的一期的杂志会把文章刊登出来,我这里就把文章先放在博客里吧,也算是最近新写的一篇博文,博客还是不能荒废了啊.  阿里巴巴资深交互设计师 宋磊. 如何设计出具有优秀用户体验的产品是交互设计师始终面临的一道难题,“好的产品设计一定是建立在对用户需求的深刻理解上”这句话被许多设计师视为设计的天条;至于在设计中如何发现并深刻理解用户的需求,并由此设计出具有优秀用户体验的产品,阿里巴巴的UED团队在多年的产品设计实践中总结出重要的五项原则.

关于增强用户体验:重用, 还是优化设计?

- - ITeye资讯频道
如果在不同平台间重用内容和设计,比如将印刷内容重用为内容,或者将桌面端内容移植到移动端上去,那么,费用会比较便宜,但与此同时,质量也会有所降低. 较高级的UX设计需要和平台紧密结合的设计,也即优化设计. 在易用性方面有多项研究并出版多本专著、或者多项专利的知名技术人员 Jakob Nielsen在本文中给出了他的回答.