交互水深 01 | 从区分 [ 页面 ] 和 [ 界面 ] 开始吧

写在开篇

有关交互设计,每天都会遇到类似《零基础入门》《完全指南》《七大原则》……等等内容,无非分为两种:方法论,工具与形式。

『交互设计小厨房』有个私房书单,推荐过31本必读的专业书籍。书籍是公平的,只要印刷出来,能够买得到,就无需有人重复在写。但是,阅读大量书籍似乎不太满足『快速成才』的需要,每个人的知识背景,掌握程度完全不同。

读书者思索,并通过实践总结并解构知识体系,或许能帮助很多朋友在交互设计的路上速成。于是乎,Hozin在2018年自己挖坑自己跳,以《交互水深》开题撰写系列文章,从抽象角度阐述一下界面交互设计,会涉及到以下几个方面:

  • 界面元素的关系
  • 组件、模式、框架的本质
  • 如何拆解用户任务
  • 禁忌与常见错误

尽管各种中外书籍、不同设计流派把界面上的各种东西分成控件、组件、模式,命名方式也不尽相同,但是其中的道理是相通的。无论是APP设计师还是web交互设计,在名称方面请求同存异,Hozin尽量聚焦实战使用。

总而言之:重点不在于『这东西是什么』,而是『这东西怎么用?』

接私活儿的故事

利用业余时间做设计外包,赚一点小钱钱贴补家用,每个设计师都有过类似的『私活儿』经历吧。『小白菜』是我的一位UI设计师朋友,前几天Ta欢天喜地的告诉Hozin:最近接了一个不错的私活儿,设计5个web页面,甲方答应给3000元的报酬。

后来,小白菜在微信里吐槽:真上当啊,虽然是5个页面,但包括各种状态、Tab切换、提示,居然输出了30多个独立PSD文档给前端,两个星期都没好好睡觉,还搭上了两个周末……

小白菜精确计算过自己的工作效率,接私活儿通常报价:站点首页1000元,栏目桥页800元,列表页面300元,其他页面100元,按照正常的设计难度,可以保证业余时间收益最大化。

5个页面=1个站点首页 2个栏目桥页 1个列表页 1个详情页=1000 800×2 300 100=3000元

但是这一次,小白菜明显是吃亏了,主要原因有两点:

第一,报价之前沟通不足,只粗略浏览了线框图,没有详细阅读产品文档; 第二,需求方和小白菜对工作量的恒量标准存在巨大差异,需求方认为只有5个『页面』而已,实际工作量是30多个『界面』。

通过小白菜接私活儿的故事,大家明确了『页面』和『界面』的确是两样不同的东西。当然,有的朋友会想:是不是有点吹毛求疵,小题大做呢?

如果只是一些迷你工程,当然不太需要吹毛求疵的区分,但是当遇到一个大型系统,一个模块动辄就几百个界面的时候,区分『页面』和『界面』对于建立规范、管控进度就具有巨大的意义了。

老法师的建议:从学习交互设计开始,就严格的区分『页面』和『界面』,养成好习惯。Hozin在带实习生和交互/产品设计新人时,都会非常严格的要求使用正确的术语。

『页面』是具象,『界面』是抽象

页面(Pages)是一个物理存在,比较容易理解,每个页面应该是拥有独立地址或URI(统一资源标识符)。没错,严格的说只有B/S结构存在页面,而C/S结构拥有另外一个近似的术语叫『窗体』Forms

界面(Interface)是一个抽象概念,比较难于理解,Interface这个单词在程序设计中也叫『接口』,那么不妨看一下关于接口的解释:

接口泛指实体把自己提供给外界的一种抽象化物(可以为另一实体),用以由内部操作分离出外部沟通方法,使其能被内部修改而不影响外界其他实体与其交互的方式。(From百度百科)

因此,所谓用户界面(UI=User Interface)就是系统与用户之间的『接口』。

页面和窗体是面向开发实现的术语;在交互设计层面,Hozin更推荐大家使用『界面』进行描述。

一个界面只完成一个用户任务,这是很重要的交互设计法则。

虽然对于用户任务,不同的团队和业务存在不同的界定规则和颗粒度,但是只要明确任务,就可以根据这个法则,很容易的用自然语言给每个界面命名。

例如,下面这个界面叫『快速用户卡片面板』,它的任务是让用户便捷的找到管理账户的主要功能入口。

下面这个界面叫『应用入口面板』,它的任务是陈列出google的主要应用入口,方便用户跳转。

下面这个界面叫『消息查收面板』,它的任务是展示等待用户处理的消息列表。

广义与狭义的『界面』

『界面』经历不断的发展,已经从最初的命令行 CLI 逐步进化为图形化界面 GUI,网页界面 WUI ,移动界面 MUI ……等成熟模式,并开始探索自然界面 NUI 和 语音界面 VUI 等全新形式。

那么,通俗来讲『界面』包含两层意思:

广义的『界面』指所有能够完成人机交流任务的元素组合,比如一个表单或者一系列按钮组合。因为这个定义太宽泛,因此很难达成共识。
狭义的『界面』就是指能够完成一个任务,并且在感官上位于一个面板的元素组合。比如一个网页,一个窗体,一个对话框,一个『PoP弹层』,甚至一个网页(窗体)的不同状态都可以视为不同的界面。

另外,你必须明确『页面(窗体)』和『界面』是两种完全不相干的事物:

某个页面(窗体)不一定是界面,这个最好理解,比如完全空白的页面,没有任何内在信息和外在操作。

某个界面不一定是页面(窗体)一个页面(窗体)可能包含多个界面,比如网页中包含了多个可触发的模态Lightbox,它们并不是页面(窗体),而是一段脚本代码。(从HCI的角度来说,广义的用户界面包括一切输入形式,语音,手势等等,都不是页面或者窗体)

一个界面可能包含多个页面(窗体),典型应用比如网页中的frameset框架。

标定『界面』的优势

执行实际项目中,Hozin通常都会整理一个界面列表,根据需求将所有可能产生『界面』全部罗列出来,如图所示:

这个列表会为每个界面进行分类,同时分配唯一的编号。在设计工程进行的过程中,这个界面列表也会同步进行更新:

  • 可能会补充新的界面进去,那么就补充新的编号;
  • 可能会将两个相近的界面合并,但是不会回收编号;
  • 可能会有界面因某些原因废止,但是不会回收编号;

于是,工作量和进度总是一目了然。

如果时间充足,那么请尽可能细化用户任务的颗粒度。如此往复,则更容易发现近似的界面,不断合并它们,让交互形式更趋于简单和统一。

小结

『页面』和『界面』区别很大,交互设计师应该以『界面』为单位管理设计输出物。标定界面有两大优势:第一,掌握数量,控制进度; 第二,更容易复用和统一形式。

文章标签:

0 条评论 304 次阅读

  1. 既来之,则言之。

发表评论

Top