PC端产品的三种姿态

这篇依旧是读书笔记,只不过记录的不是整本书,而是《About face 3交互设计精髓》中的一个知识点,这个知识点非常重要,重要到需要单独提出来记录一篇。

在《About face 3交互设计精髓》一书中,将PC端应用分为了3种姿态:独占姿态,暂时姿态,后台姿态。

一、独占姿态

1)、独占姿态是什么?

想想一下你正在全神贯注的做一件事情,唱一首歌、或者跳一支舞,你沉浸其中,你忘记了时间,也把其他事情暂时抛开了,这就叫做心流状态,而能这首歌、这支舞就是独占你心流状态的事物。

PC端产品的独占状态也相同,它最大特点就是会被长时间持续的使用,且作为主要工具主导了用户的工作流(工作中的心流状态),这类应用通常有着较多的功能、复杂的交互、用户经常需要长时间持续运行、占据整个屏幕.

比如设计师在使用sketch 的时候,通常都会将窗口最大化,尽管有时候需要搜索一些配图、处理一下工作杂事,但sketch依旧能保持其独占姿态。

kunalng20160601001

2)、独占应用的使用者一般都是中间用户

用户使用独占应用时,往往目标明确,且有要在应用上花费大量时间和精力的心理准备,因此用户一定会从新手用户发展为中间用户。这就意味着产品不能牺牲功能从而变得容易学习,也不能一味追求精密复杂的超级工具,设计者需要做的是:永远为中间用户进行优化。

kunalng20160601002

3)、独占应用的设计原则

1、慷慨的使用屏幕空间

由于独占应用长时间持续被使用,没有其他的应用能和这个独占应用相争,因此独占应用可以最大化的使用空间

2、弱化视觉表现

由于用户可能长时间盯着独占应用,拥有强烈色彩的视觉风格只会带来短暂的新鲜感,很快就会令用户视觉疲劳,因此弱化视觉表现上的颜色和纹理变得很重要。

如下图,PPT的整体配色以灰色为主调弱化视觉表现

kunalng20160601003

3、用更少的像素来做更多的事情

用户长时间盯着相同的菜单和工具栏,会对功能的位置越来越有熟悉感,肢体对位置也有反射记忆。因此,设计者可以用更少的像素来做更多的事情,比如空间上更紧凑、icon更小等

4、丰富的操作

独占应用的用户目标明确-快速完成某项任务,因此丰富的操作对中间用户来说就变得非常重要。比如做设计的时候,你需要快速复制粘贴,那这时针对新手用户的鼠标右键复制粘贴已经比较麻烦且浪费时间,Ctrl+C和Ctrl+V就比较便捷了。

5、防错机制

相信你一定曾经遇到过这种倒霉事:正做着PS呢,程序崩溃了,做了这么久的图,说没就没了,一口老血喷了一屏幕。如果这些独占应用可以每隔几分钟就保存一次,就可以防止程序崩溃或错误操作带来的损失了。

不止是PC客户端、随着多平台时代的发展、现在web上也有越来越多的独占应用,比如用来做云端PPT的轻页,可以用来跨平台分享,不需要下载,一个链接就可以打开一个演示文档。

kunalng20160601004

而这种应用会带来更多的干扰,比如在编辑页面,浏览器顶部的标签和工具栏时常会干扰用户,分散用户的注意力。而浏览器页面更容易被关闭,因此后台缓存和关闭强提示就变的非常重要。

kunalng20160601005

二、暂时姿态

2.1)暂时姿态是什么?

你在绘画的时候,要换一支小一号的画笔;跳舞的时候换一双舞鞋;唱K的时候换一首歌,你所有的暂时性动作都是为了整个事件的完成,这种短暂事件就是暂时姿态。

PC端产品的暂时状态也相同,它最大特点就是在暂时需要时被调用,完成自身任务后又迅速离开,让用户继续工作,暂时姿态的临时性特点,让这类界面必须清晰而容易操作。

例如在做PPT时,需要调入一张图片,这个时候调出来的插入图片的弹框程序就是暂时姿态。

kunalng20160601006

2.2)暂时姿态的使用者是所有人

虽然暂时姿态可以单独运行,但通常都是辅助支持独占应用的。因此无论是新手用户、中间用户、还是专家用户,暂时姿态都将被使用。

3.3)暂时姿态的设计原则

1、节约屏幕空间,且必须是可以移动的

暂时姿态只是暂时被调用,且他们位于独占应用之上,因此、暂时姿态的应用程序必须是可以移动的,方便用户来回拖动,不遮挡用户视线。

kunal20160601007

2、清晰的设计和较大的icon

PC端的QQ音乐就是一个典型的暂时姿态的应用。

设计师Tony经常会在作图的时候通常会听音乐来放松心情,今天也是如此,他快速打开QQ音乐的客户端,选好了自己喜欢的歌单后又迅速关闭,之后偶尔快速查看或者操作它。这个时候,清晰的设计和较大的icon有利于用户迅速识别、迅速完成操作。

kunalng20160601008

3、丰富的视觉表现

独占姿态弱化了视觉表现,这时在暂时姿态弹出时,醒目的设计反倒有利于用户快速定位。况且暂时姿态只是短暂被调出,不会长时间停留在屏幕上,因此丰富的视觉表现不会引起用户的视觉疲劳和反感

4、最好不要增加第二个视图或对话框

用户调用暂时程序时,他所需要的信息和功能操作应当直接显示在程序的单个窗口上,让用户集中在这个窗口上操作,不要再转到其他窗口或弹框来完成程序的主要功能。如果在设计暂时程序时,你发现自己在增加一个第二视图或者弹框,你就需要重新来检查你的设计了。

5、记住用户的选择

我经常用Axure画交互稿,在保存图片的时候,程序通常会记住我上次的保存位置。这种让应用程序记住它最后一次使用状态的交互方式,符合用户的心理模型。

kunalng20160601009

三、后台姿态

后台姿态是什么?

通常不与用户互动的程序是后台姿态应用,这些程序隐形于后台进行服务,无需用户干预就可以完成重要任务。就像是我们的心跳,我们无需有意识的控制心跳,它是在人体后台自动运营的进程,但和心跳不同的是,后台应用必须可以随时被加载或卸载,也可以随时被调整。

下图是Mac系统中的后台程序

kunalng20160601010

2)大多数用户都不会使用后台应用

大多数情况下,用户根本意识不到后台应用的存在,只有程序出现错误时,用户才会注意到有可能后台出错了,而这种错误一般用户都无法处理,需要寻求专业人士的帮助。

3)后台姿态的设计原则

我们基本接触不到后台姿态应用的界面设计,晦涩难懂的专业词汇也令我们迷惑,个人认为可以先忽略。

总结:
独占姿态:长时间被持续使用,用户需要在这种应用中进入心流状态,我们需要不断为中间用户优化。
暂时姿态:短暂被调用后关闭,完成任务后迅速被关闭,所有人都会使用到它。
后台姿态:在后台运行,大部分设计师基本接触不到后台姿态的界面设计。
我们在设计的时候需要注意独占姿态和暂时姿态不同的设计原则,保证界面的可用性。

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/15293/

(0)
交互精选交互精选
上一篇 2016-06-01 18:41
下一篇 2016-06-01

相关推荐

  • 交互设计 | “综合类&艺术类”院校申请侧重点指南

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-21
  • 这个按钮不简单

    Slack 将保存时的「状态提示」设计在了同一按钮中。Flava 通过按钮的不同状态将「删除」与「确认」两个操作结合在了一起。Arent & Pyke 巧妙的将进度提示设计在了提交按钮中。Fantastical 2 利用了 iOS 的 Switch Button 来对 Event 和 Reminder 两种类型进行切换,并在按钮中加入了相应的图标用以识别。Wifeel 将 iOS 和 Android 版 App 的下载按钮统一设计在了一个按钮中。Tidy 在进行「归档」和「添加至相册」操作时,会在顶部以同色的方式来标识所对应的操作按钮。在 Tumblr 中关注某个用户时,「Follow」按钮会变为当前用户的头像并以一个小动画来作为关注成功的提示。

    2017-06-05
  • 从零开始学交互:经验分享之基础阶段一

    【对用户体验设计的理解】 对于我个人而言,喜欢以咬文嚼字的方式去理解一个新的词语,这正是汉字的艺术所在。用户体验设计=用户体验+设计。一说到设计,很多人会联想到绘画、创意、各种漂亮的手稿。这是对艺术和设…

  • 全新的交互体验 | 三星Bixby中文版首发体验视频

    在三星盖乐世 S8 | S8+发布之时,三星还发布了全新语音助手“Bixby”,但中文适配需要时间所以让国内的星粉久等了!为了可以让国内小伙伴快速上手,饼饼特地做了 Bixby中文版体验视频,快速了解 Bixby来这里看就对了!三星Bixby不同于一般的语音助手,在满足一般功能操作的同时还可以进行更深度操作,比如发微博、微信发红包、打开相机自动拍照以及导航等;有关更多Bixby的深度功能,我们期待与大家共同挖掘!点击下方“阅读原文”,了...

    2018-01-30
  • 作为体验或界面设计师,你可知什么时候、什么地方用动效来提升可用性?

    本文将表述我对这个问题的回答——“作为体验或界面设计师,如何得知什么时候、什么地方用动效来提升可用性?”Z Yuhan:这篇文章真的超级难翻译啊,原文的描绘非常细腻隐晦,大部分句子根本没法直译,只能理解后用中文的表达方式重新造句,幸好我的翻译水平也有进步啦~大家要是发现有什么问题,不论是翻译还是错字,欢迎评论我指正 : )

    2017-08-04
  • 交互设计七大定律之The Law Of Proximity 接近法则

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 如何基于开发的视角进行产品设计?

    既然UI设计师的主要工作是交付,那么学会以开发的视角和分析方法来进行设计将非常重要。

    2017-05-07
  • 语言的图形化表达,让百度“中文搜索”的设计更美

    本次百度ACL会议主视觉设计主要进行了五个核心技术领域的海报设计以及物料设计。通过把甲骨文的象形文字表意特征结合现代设计语言,创造出最能代表百度“中文搜索”特质的作品,提升了公司在国际上的影响力和美誉度。

    2017-05-12
  • 人机交互的四次重大变革【UXRen译#166】

    作者:Frank Diana   |  翻译:Chen Jing,校审:Duke     早在2013年,随着智能手机的普及,我写了一篇文章《下一代用户体验Next Generation Experiences》。文章从动态变化的视角来审视用户体验,会发现忽略基础…

    交互专题 2017-08-07
  • 你天天挂嘴边的「用户体验」,到底是什么?

    用户体验到底是什么?这个每天都挂在嘴边的词,你真的懂吗?

    2017-05-02