在网页设计中如何少让用户费脑筋,保持操作流畅

除了引导用户,还要减少他们的认知流程,以保持流畅状态。千万别把计算这种事情丢给用户,让计算机来处理。

除了引导用户,还要减少他们的认知流程,以保持流畅状态。

尽可能少让用户做计算

千万别把计算这种事情丢给用户,让计算机来处理。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 显示剩余数量

在界面内体现用户当前所处位置

界面就像机场,如果没有“你在这里”的标记,用户会迷路,因此记得提供标记。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 在导航菜单上突出当前所选

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 在复杂的界面中提供面包屑导航或步骤图示

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 在页面标题前面部分放置描述性或有用的信息

简化选择类任务

做选择需要费脑筋,简化这类任务让用户少费神

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 指明多数用户选择的选项

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 提供常见搜索关键词列表

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 下拉分类菜单置于相应导航菜单内

使用常规的网页设计界面

创新很好,但不要跟常规的设计方式偏离太远。用户习惯于某些布局、结构。常规设计之所以流行,是因为他们确实可行。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 使用常规的导航菜单

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 把实用功能放在右上角

每次交互动作后提供反馈

用户跟界面进行互动后,需获得实时反馈。操作成功还是失败了?发生了什么变化?

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 重要的交互动作后反馈提示成功消息

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 显示当前鼠标停留在哪个项目上

最小化等待的负面效果

消灭所有不必要的等待。如果确实要用户等,则最小化该负面效果。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 加载动画效果使用冷色调减少对用户刺激

蓝色减少刺激(提高放松程度),蓝色加载元素可让用户觉得加载更快(Gorn et al., 2004)。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 长时间等待时保持用户活跃度(别人他们干等)

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 防止用户上传不支持的文件

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 实时统计显示任务进展

尽可能减少用户对记忆的依赖

别让用户去记住任何东西,将相关信息显示出来

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 让表单标签保持一直可见

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 避免用户点击后就消失的行内标签

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 占位文本放到表单元素的外边

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 为可移动输入添加复制按钮△ (△ Add Copy Buttons to Movable Input△ )

尽量少用锯齿状视图模式

减少用户眼睛来回移动的次数,让各项补充数据保持接近。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 合并相同的数据字段帮助用户进行对比

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 让表单标签紧贴相应元素并对齐

反馈显示哪些项目是可点击或交互的

用户需要识别哪些元素是可交互的(并且知道如何交互)。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 使用3D特性设计按钮

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 为可拖拽元素添加点状纹理

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 使用图标和符号传达一个交互动作的意图

你可以通过PowerPoint 或 Keynote的各种形状制作大部分图标

用常见的文字和符合来沟通

大多数情况下,清晰明确胜过创意和术语

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 讲用户懂的语言,不讲程序语言

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 出现外语时,提供翻译按钮

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 颜色的选择要与语义保持一致

当颜色跟语义不一致时,会增加用户处理信息的困扰。如meetup.com上使用红色确认出席,准确应该是用绿色。

尽可能提高界面的可浏览性

多数用户采用浏览扫读的方式处理内容,我们需要接受这种行为。

设计界面时尽量适应这种泛读浏览方式。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 保持段落简短,高亮关键词组

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 把重要信息放在列表的开头

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 给表格添加交替的行条纹背景

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 编写独立副标题(不要一篇文章就一个大标题)

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 用视觉变化拆分文本

尽可能提高文本的可读性

很明显,文本需要让人易懂,有些技巧能让文本更具可读性。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 让文本和背景具有鲜明对比

背景上显示文本需要注意,可能需要做一些叠加或模糊处理。(以作者照片为例…)

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 正文的主要部分采用左对齐

界面设计风格保持一致

风格不统一的话用户需要花更多时间学习界面。保持统一的布局和外观可以简化学习过程。

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 制定一份前端风格指引

制定一份稳定,总结界面各元素的设计规格说明

其他元素包括:

  • 颜色
  • 网格和布局
  • 位置和定位
  • 大小和形状
  • 标签和语言
  • 导航
  • 表格
  •  列表
  • 链接
  • 声音和腔调

需要灵感参考?看看Mailchimp的风格指引(http://ux.mailchimp.com/patterns

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 导航菜单保持在相同位置

通过视觉平衡实现设计美感

美观的设计更加好用 – 即美即好用效应原则(Kurosu & Kashimura, 1995).

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 使用数学原理构造设计

在网页设计中如何少让用户费脑筋,保持操作流畅

△ 使用对比性字体

挑选搭配字体时,有人喜欢使用相似的字体,但这种方式是错的,很多时候相似的看上去并不对。

相反,应该精心挑选对比鲜明的字体,新手设计师可以选择serif vs sans-serif(英文字体),如上图

未完待续…

 

译文来自:@企业官网设计精选

原文地址:nickkolenda

 

 

【系列文章回顾】戳下面链接快速到达:

1)在网页设计中帮助用户实现目标

2)在网页设计中如何引导用户的注意力

3)在网页设计中如何少让用户费脑筋,保持操作流畅

4)在网页设计中兼顾所有用户和场景的3个技巧

5)当用户操作错误时,如何在不影响用户体验的情况下快速处理好

 

 

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29314/

(0)
CatherineCatherine
上一篇 2017-05-23 21:15
下一篇 2017-05-23 23:24

相关推荐

  • Axure 原型界的撕逼大战

    最近在交互原型界也有撕逼大战啊,所以任何以收费为目的的网站都是纸老虎。 为了整体交互设计行业发展来看,只有开源分享才是真的有利于交互设计师们。你们说尼? 原文标题:《金乌:你能消停点儿吗?》-小楼一夜听…

    交互设计 2014-12-29
  • 对于交互、视觉设计师来说,至少要了解的产品知识

    之前在设计体系规划里面有提到过,产品常识也是我们需要了解的内容,其中产品定位就是最基础,也是最重要的一个概念,因为项目后期的所有工作都是围绕产品定位所展开的。比如还是上面那个例子,使用人群是单身男女,我们将使用人群细分为:18-25岁、25-35岁、35-45岁和45岁以上的单身男女。最后将目标用户定为25-35岁的单身男女,当然为什么选取这部分人群需要一些理由,比如这部分群体的经济比较独立,年龄更适合步入婚姻的殿堂等等。比如我们的主要功能是即时通讯,那即时通讯会分为很多使用场景,比如上下班的路上、睡觉前,起床后等等。比如产品的特色是“更容易约会成功”,那为了达成这个大的产品目标,我们需要细化,将其分解成多个小的用户目标,如快速看到周围单身异性的信息状态、快速了解周围哪些异性对自己有兴趣等等。

    2017-05-09
  • 交互设计是什么?

    昨天认识一个新朋友,叫小木,在一家酒店做管理。小木问我做什么,每次这个时候我都会犯难。交互设计师,边回答边看着小木迷惑的脸,我知道又要解释一番了。这是历来对朋友解释过的交互设计是什么的情形:①交互设计…

    2017-07-31
  • 交互新人:如何做用户体验设计

    嗯,毕业来了公司5个月,接触了一些项目,本该早点写些总结,拖延症发作拖延至今。作为交互设计的新人,需要学习和反思的还挺多。 在学校的时候,看了很多书,学了很多理论,一直都希望能够应用起来,来公司发现很…

  • 阿里国际UED小二亲授“有效”视觉传达 — 新零售时代,打好2018年内容营销的开局基础!

    如今商业已经进入新零售时代,流量红利已经过去。要让消费者感兴趣并购买商品,不能再靠简简单单堆叠商品信息和低价促销吸引消费者,而是要在内容上精耕细作,达到信息的有效传达。而人获取的信息八成是来自于“视觉”,所以可想而知,在如今内容爆炸的时代,视觉营销能有效帮助商业提升转换效果,成就更好的销售额。阿里巴巴国际ued团队欣频据第三方预测,2018年,84%的营销内容都是以视觉图像的方式来呈现。我的个人观点,未来品牌的视觉营销会呈现情感化、个性...

    2018-01-31
  • 在无线产品中,一些普适的交互设计原则及实践(上)

    本文作者将逐条列出其总结的无线产品设计领域应当遵循的的一些基本原则,并在每条原则下辅以实例说明以便理解。

    2017-05-04
  • 如何编辑交互设计说明书

    当你搜索并查阅了很多网上资料后,仍可能不会编辑交互设计说明书。那么究竟该怎么编辑交互设计说明书呢?在编辑的过程中又有哪些要点和注意事项呢?

    2016-08-05
  • 如何用axure参与团队项目

    1、下载安装axure破解版,可以去axure.com下载。这里为了方便大家,分享个人的百度云盘资源,链接:https://pan.baidu.com/s/1o9qFOyY 密码:hodp2、下载File Zilla,File Zilla从百度上搜索即可下载,这里不需要多言,以下主要讲讲如何配置File Zilla。Ctrl+S创立本地站点,输入主机IP地址,协议默认是SFTP,输入团队用户&密码,点击连接,进入团队项目。3、在团队项目...

    2018-03-15
  • 超好看APP交互设计~

    设计APP,不是简单的把界面绘制好,漂亮的色彩搭配、可爱、卡通或者扁平化的图标设计等等。如今的移动APP界面设计,更要追求有趣与实用的完美结合。今天,小编分享来自印度的设计师Joney vino的超好看APP交互设计作品。第一款是APP交互设计是关于免费试驾APP的选车界面与整个选车的流程。整个过程就是把选车类型、日期、人数等功能元素在流畅的界面转换场景当中完成。追求一气呵成。很不错的免费试驾体验。第二个APP交互设计当中的有趣、创意与...

    2018-03-03
  • 交互设计中的5项视觉指导原则

    【分类】经验分类:经验/观点/自译原作者: Jerry Cao翻译:@ifecIFEC团队译文UI中国旗下翻译团队,由热爱翻译热爱分享的设计师组成。IFEC译者翻译国外行业热文、规范文档。欢迎关注我们的官方微博 @ifec, 加入我们…

    2017-08-04