• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 遵循这7个原则,能让你的网页用户体验更优秀

遵循这7个原则,能让你的网页用户体验更优秀

作者:BEN PINES 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含优秀网页设计,用户体验设计,经验分享,网页设计等相关知识,BEN PINES 希望在学习及工作中可以帮助到您

作为用户,在很多时候会很容易判断出一个网站的用户体验是否优秀,因为主观感受是很难被欺骗的。但是作为网站的设计者和开发者,角色转换之后,所需要面对问题就复杂得多。身为构建者,要让体验尽善尽美需要花费大量的时间精力来完善整个体验的闭环。今天为你所整理的这7个 UX设计的原则,能够帮你更好地进行网站的 UX设计,并且尽可能地将整体的用户体验提升到一定高度。

1. 围绕用户体验来进行整体设计

想要创造难忘的用户体验,自然要围绕着用户体验本身来进行设计。甚至在某种意义上来说,数据和内容也应该是服务于体验的,?它们应该以什么样的体验来呈现出来,这是设计者需要反复思考和琢磨的问题。

图形、布局、文本和交互元素之间的协同工作才能创造体验,任何一个维度缺一不可,单纯的信息展示是不够的。

想让你的网页能在互联网上大量的信息中脱颖而出,体验是至关重要的。现代网页中大量的视觉和交互内容存在,是为了能通过体验直击人心,这样才能在激烈的竞争中存活。

2. 网站内容应当一目了然

如果你认为网站内容是用来读的,那就错了。现代用户的注意力集中的时间非常短,绝大多数用户在浏览信息的时候,都是快速扫视,而非逐字逐句地仔细阅读,信息的展现一定要直观、清晰,确保能够一瞥就能看明白。借助信息图表和视觉特效,更快地传达信息和数据。

你需要让你的内容更加吸引用户,绝大多数用户会为触动它们的信息和内容而驻足,当他们想要了解更多的时候,才会点击,了解更多。

3. 用户想要简单而清晰的内容

用户只需要半秒就能判断出网站设计和内容,你需要尽量让网站的交互和指引足够清晰,显而易见。不要让按钮难以被用户发现,在首页上放上一大堆的按钮和链接,不如通过视觉上的引导,让用户注意到最关键的那个 CTA按钮。

通过迭代和测试,不断地优化和提升网站的易用性。有的设计对于绝大多数的用户都非常有用,凸显最重要的选项,允许隐藏额外的功能,并且为用户提供显示全部的选项。

除了清晰的设计,整体的一致性也很重要。统一的配色、交互和图形能够让用户对于后续的操作有更清晰的预期,减少用户在后续操作过程中探索的力度,这是通过统一性设计提升产品易用性的一种方式。

4. 通用设计元素 vs 创造性

当某个设计元素在其他地方很常见的时候,它就已经形成了特定的 UI 模式,尽量不要去修改它,哪怕是很富有创意的方式。当你将这种约定俗成的元素修改成其他样子的时候,用户需要花费比平时更长的时间来判断它究竟是什么。这种认知负荷将会影响整个网站的使用效率和转化率。比如汉堡图标,比如网站登录入口的位置(右上角)。没有必要在这种地方重新「标准化」。

对于链接、导航、布局这样基本的元素,应该始终优先考虑其可用性,在此基础上再发挥创意。

虽然非传统的设计很酷,但是它的可用性问题同样很大。创造性的设计同样是需要控制其程度和平衡,如果非要打破常规,尽量控制好程度,并且一次最多打破一条规则,不能更多。

5. 了解你的用户

在开始创建网站和 APP 之前,你应该对于你的目标客户群体有足够清晰的了解,这样才能更好地为他们来设计界面。

一旦你清楚地了解了你的用户,就能了解他们的需求和愿望,并且设计出符合他们预期的界面和体验。这个时候,你的竞争对手能够为你提供灵感和想法。注意对方的色彩,布局,风格和功能。

尽可能使用你的受众已经熟悉的 UI 模式和 UI 元素,能够更快让他们上手。在此基础上,适当地进行差异化的设计,这样效率更高。

当你确定了受众之后,记得尽量把他们的反馈纳入到你的设计当中。

6. 视觉层次很重要

当界面中优先放置最重要的元素,通过视觉层次来凸显它们,确保用户能够更快注意到它们。在设计中,有很多方法能够凸显内容,但是最有效的方法始终是让它们更大更醒目。

视觉层次的构建能够让网站内容更加清晰,也更加富有功能性。

7. 控制用户体验的质量

Peter Moville 在 usability.gov 这个网站上列举出了用户体验设计的关键因素,它的核心价值在于通过不同的维度更好地掌控用户体验的质量:

  • 有用:内容应该是原创的且满足需求。
  • 可用:网站的内容应该很容易被找到。
  • 可取:设计元素应该贴合情感且具备可欣赏性。
  • 可发现:内容容易被定位,被找到,并且可导航。
  • 无障碍:设计要为有障碍的用户进行定制。
  • 可信:网站内容应该有权威性,且值得被相信。

除了上面的维度之外,还有一些值得参考的 UX设计的质量衡量标准:

  • 符合上下文:有明确的路径,符合上下文逻辑。
  • 人性化:值得信赖,平易近人,透明,并不机械。
  • 可发现性:用户在第一次访问的时候就能够顺畅的完成任务。
  • 可学习性:确保交互足够简单,并且能够无缝地相应移动端界面,确保用户在随后的访问过程中达成目标。
  • 高效:确保用户能够快速轻松地完成各种任务。
  • 令人愉悦:确保产品能够满足用户需求,还能够和用户产生情感联系。
  • 表现良好:当用户与之交互的时候表现良好。

结语

用户体验设计的目标不仅仅是让产品本身更优秀,更重要的是从情感层面上和用户产生关联。有界面而没有体验,这样的产品在今天的竞争中是活不下去的。

「2018年设计趋势,一个都不要错过」

  • 《2018年,这10个LOGO设计趋势值得你关注》
  • 《超全面总结!2017年UI设计领域流行过这21个设计趋势》
  • 《掌握这12个移动端UX设计趋势,你就掌控了2018年》
  • 《这款独特的紫色,是为你指引2018年设计方向的年度潘通色》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 弹出框里的设计门道,你是否都知道?
  • 遵循这7个原则,能让你的网页用户体验更优秀
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 这3个适用性极强的网页设计趋势,在4月非常流行
  • 怎样设计,才能抓住用户稍纵即逝的注意力
  • 吃透这10个网站,你就明白了网页中留白的技巧
  • 设计出优秀的网站着陆页,这10个技巧能帮到你
  • 换了很多家公司还是在打杂,问题究竟出在哪里?
  • 也许你该注意一下影响网页设计的这5个关键指标
  • 这5个丑出新高度的网站,为什么那么多人夸

相关文章

  • 2018-08-23方正设计师:UI界面中的字体应用
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:希克定律
  • 2018-08-23写给UI新手的APP结构指南:用户引导和提示
  • 2017-08-06行内元素、块元素都有哪些
  • 2017-08-06我们能从Google的全新UI中学到的知识(图文)
  • 2018-08-23基础科普!重复与突变在产品设计中的应用
  • 2018-08-23腾讯设计师:超全面的变体美术字设计手册
  • 2018-08-23UX设计在5年内将在哪里?这里有5项预测!
  • 2017-08-06垂直栅格和渐进式行距应用举例
  • 2017-08-06网站配色方案 为网站选择正确的颜色

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 我们拿到了InVision Studio 的内测资格,设计师们关心的都在这里
    • 世界上最受欢迎的色彩出炉了,她的名字叫马尔斯绿!
    • Medium 设计师姜羽扬:设计小白的光速成长之路
    • 超实用!信息架构基础知识科普手册
    • ie8,chrome中table的宽度固定方法
    • 想要提升用户体验,这6种使用插画的方法颇为不错
    • 趁年轻做些更有挑战的事情!专访Twitter 产品设计师王源
    • 腾讯设计师用实战案例,告诉你一个实现设计驱动的创新流程!
    • offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示
    • 那些很熟悉但又叫不出名字的设计法则:系列位置效应

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有