阅读笔记 | 框架层:界面设计、导航设计和信息设计

结构层确定了我们的产品将用什么方式来运作,而框架层用于确定用什么样的功能和形式来实现。


框架层的定义

在框架层,我们的关注点几乎全部在独立的组件以及它们之间的相互关系上。在功能性产品中,我们通过界面设计来确定框架,包括按钮、输入框和其他界面控件。在信息型产品中,导航设计是专门用于呈现信息的一种界面形式。而信息设计是功能和信息两方面都必须要做的,它用于呈现有效的信息沟通。这三者之间的关系非常紧密,边界有时也会模棱两可,但是定义清楚它们之间的领域对于解决问题是非常重要的。

界面设计是提供给用户做某件事的能力。通过它,用户能真正接触到那些在结构层中的交互设计中的确定的具体功能。

导航设计是提供给用户去某个地方的能力。通过它,用户能因为结构层中的信息架构把一个结构应用到我们设定好的内容需求列表之中,而自由穿行。

信息设计是传达想法给用户。信息设计是框架层中范围最广的一个要素,所涉及的事情几乎是到目前为止我们在功能型和信息型产品两者都看到过的全部内容。


习惯和比喻

· 习惯
习惯和反射作用是我们与这个世界交互的各种基础,它包括天生的应激性,也包括后天培养的反射性。我们日常的每一个动作都依赖于大量的、细小的反射作用的积累。习惯使我们可以把这些反射作用应用到不同的环境中。

书中用电话按钮布局的例子来说明习惯对于提高操作难度的影响,我们日常常见的电梯按钮也是令人头大的一个例子,几乎每幢写字楼、住宅区的按钮也都形形色色,布局上上下下。碰巧在网上看到一篇分析《电梯按钮的交互设计》的文章挺有意思,可以为大家提供点思路。

「电梯常常会和自己"想的不一样",即预设的或已建立的心理模型失效了」

而在熟悉按钮的那几秒钟,用户是被挫败感占据的几秒钟。一件“下意识就能完成的事情”变成“难以忍受的缓慢”,仅仅是因为用户脚底下的“习惯魔毯”被人取走了。

对于用户的习惯,我们不一定必须毫无条件遵循,当某种不同的方式有很明显的益处时,你反而应该试着谨慎地违背一些习惯。建立一个成功的用户体验,要求我们在做每一个决定的时候都有充分的、明确的理由。

在界面设计的过程中,我们强调界面之间的一致性。网站特性的概念模型有助于你保持内部一致性,当两个特性都使用了同样的概念模型,那么可能就需要比较类似的界面要求。当两个特性的概念模型不同时,我们就需要在界面处理上进行区分。

在实际工作中,为了内部人员的协作一致性,我们通常会通过创建、规范控件库来统一界面,还可以让用户通过产品其他部分所了解到的信息,辅助理解当前页面,这有助于用户更快地达到自己的目标,更少地犯错。



· 比喻(metaphor)
比喻是产品模仿现实世界的某个物体来设计界面。这里需要注意的是要抑制在产品四周建立起比喻的冲动。在大部分真实世界中的界面和导航设备,是只能在真实世界使用的:物理的、材料性能等。这点我们在《结构层》的概念模型中也有提到比喻过度的例子。这种方式往往不能揭示特性的本质,反而会使其更加混淆。

特性和它所表达的比喻之间的联系,对于设计者本身是显而易见的,但是我们却不能保证是不是用户可能联想到的,尤其是那些来自不同文化背景的用户们。这点出入在icon的使用设计上特别明显,因此我们会提供一定的上下文,帮助用户更好地猜测所采用的比喻试图代表什么特性。更好更简单的办法就是完全去除猜测的成分。

有效地使用比喻,就是要减少用户在“理解和使用你的产品功能”时对猜测的要求。


界面设计

界面设计要做的事情就是选择正确的界面元素。这些元素的目的是能帮助用户完成任务,还要通过适当的方式让它们容易被理解和使用。成功的界面设计是主次分明的,能让用户一眼就看到“最重要的东西”。

哪个功能要在哪个界面上完成,是在结构层的交互设计中已经决定的;而这些功能在界面上如何被用户认知到,则属于界面设计的范畴。

一个设计良好的界面是要组织好用户最常采用的行为,同时让这些界面元素用最容易的方式获取和使用。刚刚接触工作的时候,我们经常会被程序员的边缘情况问得一愣一愣的,然后出于自己对情况没有考虑全面的愧疚感,把提出的边缘情况考虑过重,花了过多的时间。作为交互设计师,边缘情况我们需要考虑,但是重点在于把握主线和主要功能的闭环,不要被程序员牵着走。

界面设计可以采用各种各样的技巧,使用户完成任务的过程变得容易。一个简单的技巧,就是产品可以代替用户去做一些简单的辅助操作,比如在这个界面第一次呈现给用户的时候,仔细考虑每一个选项的默认值;比如在用户填写丰富内容的过程中,自动保存。


导航设计

导航设计就是在每个页面页面上放一些允许用户浏览整个网站的链接。

任何一个产品导航设计都必须同时满足以下三个目标

1.首先,必须提供给用户一种在网站间跳转的方法。导航元素必须选择那些能促进用户行为的。

2.其次,导航设计必须传达出这些元素和它们所包含内容之间的关系。比如网站上的面包屑。

3.最后,导航设计必须传达出它的内容和用户当前浏览页面之间的关系。

产品设计中,我们需要用导航来帮助用户定位,告诉用户“从哪里来”、“现在在哪里”、“可以去哪”,除非产品所有的功能都集中在一个界面上。

下面是我们在工作中常见的几种导航系统(navigation system),包括全局导航局部导航辅助导航上下文导航友好导航远程导航。:

全局导航(global navigation):提供了覆盖整个网站的通路。全局导航提供的是用户最有可能需要从网站的最终页面到其他什么地方的一组关键点。

局部导航(local navigation):提供给用户在这个架构中到“附近地点”的通路。

辅助导航(supplementary navigation):提供了全局导航或局部导航不能快速达到的相关内容的快捷途径。比如帮助中心、首页底部、联系我们等。

上下文导航(contextual navigation):有时也叫“内嵌导航”,是嵌入页面自身内容的一种导航。当我们对用户和用户需求理解得越准确,我们的上下文导航就设计得越高效。比如知乎、简书都有的字段、名片链接等。

友好导航(courtesy navigation):提供给用户通常不是主要需要的链接,但他们是作为一种便利的途径来使用的。比如推荐内容、猜你喜欢等。

远程导航(remote navigation):一些导航没有包含在页面结构中,而是以它们自己的方式存在,独立于网站的内容或功能。比如网站地图(site map)给用户提供一个简明的、单页的网站整体结构的快捷浏览方式;索引表(index)按照字母顺序排列的、链接到相关页面的列表。


信息设计

信息设计是用一种能“反映用户的思路”和“支持他们的任务和目标”的方式来分类和排列这些信息元素。这与之前选择“截面”的概念很相似。

·指示标识(wayfinding)
指示标识用来帮助用户理解“他们在哪”以及“他们能去哪”的系统。好的指示标识能使用很快地得到一个心里图像,“他们在哪儿”、“能去哪儿”和“哪条路能使他们离自己的目标更近”。

此外,一些成功的产品还使用了颜色标识、图标、标签系统和排版等方式,辅助用户进行页面定位。


线框图

页面布局被纳入一个详细的文档,并称为页面示意图或线框图(wire frame)。这个线框图是对一个页面中所有组成部分以及它们如何结合到一起的、最直观的描述。

线框图在正式建立网站的视觉设计的流程中是必要的第一步。

线框图是整合在框架层的全部三种要素(界面设计、导航设计、信息设计)的方法:
通过安排和选择界面元素来整合界面设计;
通过识别和定义核心导航系统来整合导航设计;
通过放置和排列信息组成部分的优先级来整合信息设计。



小结

框架层的内容是交互设计师的重点输出物,线框图是之前所有思考的体现,这里再次重复一下本层重点围绕的三个要素:界面设计导航设计信息设计,我们分别通过安排和选择界面元素识别和定义核心导航系统放置和排列信息组成部分的优先级来整合。

目前市面上的产品,在功能型和信息型的区分并不明显,因此这三个要素我们都应该考虑在内。在主要功能和目的达成以后,也要注意情况的全面考虑,比如页面出错、弱网、断网等情况。


《用户体验要素》阅读笔记

一、初识用户体验
二、网站的用户体验
三、用户体验五要素
四、战略层:产品目标和用户需求
五、范围层:功能规格和内容需求
六、结构层:交互设计与信息架构
七、框架层:界面设计、导航设计和信息设计
九、表现层:感知设计
十、用户体验的应用



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容