读书会第二期:《用户体验要素》(下)

接上文···框架层1界面设计界面设计要做的全部事情就是选择正确的界面元素。界面元素的种类繁多,书里列举了复选框、单选框、文本框、下拉菜单、多选菜单、按钮等一系列网站设计中常用的控件,在2001年的时候这些控件就已经出现了,至今仍在大量使用,但是作者写这本书的时候并没有预料到目前的互联网行业有多么繁荣,所以近些年出现的很多新控件都没在书里。目前ios平台和安卓平台都有完善的设计规范可供参考,网上也可以找到海量的控件模板,只要耐心积累,多观...

接上文···

框架层
1
界面设计

界面设计要做的全部事情就是选择正确的界面元素。界面元素的种类繁多,书里列举了复选框、单选框、文本框、下拉菜单、多选菜单、按钮等一系列网站设计中常用的控件,在2001年的时候这些控件就已经出现了,至今仍在大量使用,但是作者写这本书的时候并没有预料到目前的互联网行业有多么繁荣,所以近些年出现的很多新控件都没在书里。

目前ios平台和安卓平台都有完善的设计规范可供参考,网上也可以找到海量的控件模板,只要耐心积累,多观察其他界面的设计优劣,这些基本功很容易就能打结实的。

另外有一点要注意,在2008年移动互联网盛行以前,界面设计指的工作岗位往往是由一位设计师独立承担的,这就是广义的UI设计师(User Interface:用户界面),那时的UI设计师主要负责的设计任务就是网站的界面设计,他们的工作核心就是“实现功能”——把产品经理在范围层划定的功能实现到界面上来。

但是在2008年移动互联网盛行以后,UI设计师的工作职责就逐渐开始细分起来了,国内的互联网行业以北上广深这些一线城市的名企为首,把UI设计师彻底分为了交互设计师和视觉设计师,交互设计师负责信息架构和界面框架,视觉设计师负责视觉效果和切图,我们在几年前常听到的“UI设计师”就是指一个人就把界面从交互到视觉都实现出来的设计师,现在基本上已经划分为交互和视觉两大块了。

所以大家在读这本书的时候尤其要注意,不要把书里的界面设计师和现在我们所讲的界面设计师混为一谈,它们名字一样,负责的岗位职责却各有不同,你要搞清楚自己干的活到底是框架层还是表现层,关键看你到底做了那些事,而不是你的岗位名称叫什么。

读书会第二期:《用户体验要素》(下)

2
导航设计

导航指的就是指引用户前往他想要去的地方的指路牌,产品里的导航形式有很多,每年也都会有些新的导航出来,它在框架层也是设计框架的要点之一,大家最常见的就是分类导航和分面导航,这点没什么可说的。

读书会第二期:《用户体验要素》(下)

书里提到了很多导航的逻辑形式,比如全局导航、局部导航、上下文导航、网站地图等等,我认为新手学习导航最好的办法就是多画信息架构,你在网上或者应用商店找那么几十个产品画出他们的信息架构,临摹下他们的导航展示形式,自然就慢慢摸会了。

不要看不起这种笨办法,笨办法往往有奇效而且并不怎么降低你学习的效率,如果你总是琢磨这些逻辑性的东西,企图看懂了文章就掌握了技能,这只能骗骗你自己,将来下笔的时候还是不知道该怎么画。

3
信息设计

书里对信息的设计写了几页的篇幅,总共就提到了两个关键点:“信息排序”和“分类整理”。每个界面上呈现的信息都有重要程度上的排序,优先展示重要的信息,把不重要的信息隐藏起来,同类信息进行归类,这些都是我们常用的信息整理方法。

作者是根据网站的界面来写这篇文章的,所以他认为在做信息设计的时候要把整个界面的信息都结合起来考虑,但是在某些网站或者app里面,有时候一张页面里面可能会有多个设计团队分别处理里面的模块(大企业的分工制度很完善),比如整个首页一部分划给你做商城,一部分话给我做社交,这时候的信息设计就是局部的信息设计了,合起来的时候还是要考虑整体信息呈现的一致性的。

另外,对于条目的信息设计是更细致的功夫,这尤其考验设计师对用户的把握。比如商城的推送往往和价格结合在一起,文章的阅读经常会有阅读量的展示,游戏和应用是按照下载量在排行榜展示的,这些都是因为用户对这些数据比较关注,所以设计师才会把它们呈现在外面。

4
线框图

很多人会怀疑,线框图还需要专门练习吗,只要懂得绘制铅笔画,任何人都能用线框把界面绘制出来,这似乎是一种初上手就能学会的技术,这也是大多数人觉得交互设计师和产品经理入行不需要门槛的原因。

在这本书里,线框图的讲解只占了不到四页的篇幅,作者似乎并不看重它的作用,实际上线框图没有那么简单,它是把设计师对用户的了解、对功能的剖析、对界面的设计呈现出来的最终结果,我赞同作者的看法,线框图是对页面中所有组成部分最直观的描述,只要能把它画出来就算把功能落实了。

但是遗憾的时候,目前互联网行业的交互设计师还是需要练习绘制线框图的,不仅要练习绘制,还要懂得怎么把线框图变成完整的交互文档,这并不是为了更好的呈现想法,而是为了减少沟通成本。

公司的员工各司其职,你不能指望运营同事和研发同事能通过一张简单的线框图理解你的全部意思,完整的交互文档必须有完备的标注,考虑到各种异常情况的应对,页面跳转的关系,甚至是精确到像素级别的线框图形(部分大企业有这种要求,中小型企业的产品界面往往是落到视觉设计师手里的时候才会精确到像素级),这些详细的描述都是为了更好地减少沟通成本。

完备的标注能够削减大量潜在的风险,一方面帮助系统提前解决掉大量BUG,另一方面也能避免因漏洞产生的损失,这些都是很有必要的,线框图可以说是前面从战略层、范围层、结构层到框架层最终凝练出的界面成果,是产品成型的最后一道防线,希望大家不要掉以轻心。

读书会第二期:《用户体验要素》(下)

表现层

创建感知体验

作者眼中的表现层包含了所有用户能接触到的感官体验,包括拿到电脑的触感、耳朵里听到的开机声音、眼睛里看到的多彩画面,这些都属于表现层的一部分,对于工业产品来说表现层代表了用户对产品形成的印象,而对于互联网产品来说,考虑到表现层基本上只要考虑视觉效果就可以了

视觉焦点:人类的视觉焦点会随着界面元素不断移动,焦点的移动轨迹会沿着“动画 > 图片 > 关键字 > 普通内容”的顺序前进,优先会被动画吸引,其次才会被图片和标题吸引(由此你可以知道那些总在网页右下角弹出来的动画广告有多烦了吧~~屠龙宝刀,点击就送!),在阅读的时候会沿着“F型”的轨迹移动。

对比和一致性:视觉的对比和一致性在任何视觉教学课程、艺术学院的授课里都有详细的阐释,就连那些讲“PPT该如何制作”的视频里也充斥着各种讲解,对比和一致性的确是视觉领域最常用的概念,这就是老生常谈了,这里不讲。

配色方案和排版:整套的配色方案应该和品牌形象结合在一起,不懂得取色的可以用取色板调节,这些视觉的设计方法网上有超多的大神可以教授,就不用在这本书里寻求指路明灯了,与其在这里看它的文段,还不如在站酷上找个高手学两招管用呢。

值得注意的是,书里提到的网站栅格方法至今还有很多企业在用(因为真的很好用),即使是移动端的app也可以使用栅格的办法保持一致性。栅格只是一种让界面元素保持一致性的设计方法,并不是什么神秘兮兮的高科技工具,原理就是把整个界面切割成统一规格的方块,对初创团队来说没那么必要,有它过年没它也过年——但是视觉规范还是要制定的,可以大幅度减少后期的修改成本。

读书会第二期:《用户体验要素》(下)

读书会第二期:《用户体验要素》(下)

要素的应用

马拉松和短跑:书里提到的这两种产品形态,马拉松指的是长期迭代的产品(多供给于C端),短跑指的是一次性交付的产品(多供给于B端或者硬件设备),作者之所以在书中会对那些企业家举马拉松和短跑的例子,是因为传统企业售卖的产品往往是离手便交易完成的一次性交付的产品,比如买瓶水或者买个苹果,买定离手就算交易完成了,但是用户体验类型的产品需要“圈住”用户,网站要不断的有用户访问才会产生价值,所以作者用马拉松和短跑的例子劝说那些传统企业家,他做的网站和传统的商品是完全不同的两码事

目前互联网行业的产品大多都是“马拉松型”的,需要不断迭代才能维持住竞争力,一次性交付的产品大多是硬件设备或者针对B端的打包服务,但是随着竞争的愈发激烈,这种一次性交付的产品也逐渐向着迭代型产品过渡了。

比如原本买完就算交易完成的B端后台系统,现在从一次性买断变成了不断推出后续服务,签订长期合同;手机从十年前的买定离手,变成了买到手里后系统可以不断更新,只是更新频率没有app那么高,像苹果或者小米就总会隔段时间就来个更新,以前可没有这种事。这不是这些厂家主动迎合互联网浪潮产生的变化,而是市场竞争加剧,不这么变公司就活不下去了,所以产品的更新往往是因为市场的更新,作者在文中也是这个意思,产品从短跑变成了马拉松。

读书会第二期:《用户体验要素》(下)

最后总结

相信大家也看出来了,所谓的用户体验五要素的分层理论,其实目前的互联网企业里已经有了相当娴熟的应用,它就是你的日常工作,只是从范围层变成了俗称的需求文档,从框架层变成了俗称的交互文档,各方各面其实在工作中都可以看到它的影子。

这就是设计方法论,它提出的是一种概念而不是具体的指导方法,你可以从这些文章里学习到设计的理论,却不能从职场新手变为成熟的工作者,如果你想更好地完成交互设计工作,还是多积累些需求文档和交互文档的工作经验吧。

读书会第二期:《用户体验要素》(下)

读书会第二期:《用户体验要素》(下)

读书会第二期:《用户体验要素》(下)
相关阅读
读书会第二期:《用户体验要素》(上)

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

(0)
交互精选交互精选
上一篇 2018-04-12
下一篇 2018-04-13

相关推荐

  • 用户体验双语术语,附阿里招聘广场舞达人资深用研专员

    这两天朋友圈被一则特殊的招聘刷屏了。先看看关键词:年薪40万,60+,广场舞 KOL(意见领袖)优先!一时间,网友沸腾了。这则招聘发布于1月16日,来自阿里巴巴集团社会招聘网站。从招聘网页上看,阿里对此职位的描述是“淘宝资深用研专员”,全称“淘宝资深用户研究专员”。记者推算了下,大致为阿里P序列中的P6等级。岗位给出的薪水待遇还不低,年薪范围是35万~40万。感兴趣的小伙伴可以转给符合要求的人士哦!点击阅读原文就可以看到这则招聘了。今天...

    2018-01-30
  • 4K已至,保障用户体验是成功的关键

    4K技术介绍1.1什么是4K分辨率图像的大小一般用像素分辨率来表示,例如1920*1080的分辨率就意味着图像是由水平方向每行1920个像素以及垂直方向每列1080个像素组成的。出于方便交流的原因,业界也常常以图像水平方向上的像素值来表示图片大小,而且为了简化交流过程,一般情况下会用“K”来描述像素值,其中1K相当于1024个像素,几K就是指图像的水平方向每行像素值达到或者接近1024的几倍。以此为标准,4K图像就是指水平方向每行像素值...

    2018-04-04
  • 用户体验升级:《部落冲突》VS《竞逐之国:毁灭时代》

    原文作者:Om Tandon‘用户体验设计’是电子游戏产品的关键组成部分之一,随着手游产业的发展和智能手机的普及,人们接触的手游越来越多,现有的手游体验对多数玩家来说已经不再陌生。为了在同类产品中建立优势,开发者需要不断实现创新,改进并突破这种体验,从而为用户创造新的价值。与上市时间较长的同类手游《部落冲突》相比,Space Ape的RTS新作《竞逐之国:毁灭时代》在用户体验方面实现了突破。我们将两者的‘首次用户体验’、‘编辑模式&基地...

    2018-03-09
  • 美的苏宁智能+计划解读:供给侧改革用户体验升级

    丁道师ID:dingdaoshi123资深互联网观察家,长期致力于中国互联网产业和企业研究。苏宁与美的空调宣布联合共建用户研究实验室,通过云服务、大数据等技术基础,让用户全方位的参与到美的产品研发、交互、营销等环节中来,未来美的、用户、渠道商共同携手,构建一个可循环的新消费升级商业体系。随着一股实力派冷空气登场,2016年的初冬比以往更冷一些。这几日,北方多地现初雪,大风吹、降温猛。伴随着天气的转凉,围绕“智能空调”为核心的“寒冬保卫战...

    2018-03-10
  • 交互设计之流程设计(1)

    流程设计是将信息架构转变为交互稿的重要步骤,什么是流程设计呢?简单来说,就是用户完成一项任务的步骤流程,用户是怎样一步一步的完成任务的。本文将从流程设计重要性、如何进行流程设计、流程设计与交互工作三个方面来阐述流程设计。一、流程设计的重要性流程设计对于用户体验来说非常重要,一个好的流程设计将会给用户带来非常的体验。在这里从流程设计是什么、流程设计中需要考虑的问题、优秀流程设计的好处三个方便来进行讲解。1 流程设计是什么首先理解交互设计是...

    2018-05-06
  • 营销型网站建设如何优化网站, 提高用户体验!

    营销型网站建设如何优化网站, 提高用户体验!据相关研究表明:当页面加载时间从 1 秒到 3 秒,跳出的机会增加了30%左右。1s到5s的机会增加到90%,如果你的网站需要10s的加载,跳出的机会将会超过120%。  这是令人难以置信的,因此有效的提高网站加载速度,对于搜索引擎优化而言很重要。  那么,我们该如何提高页面加载速度呢?  首选,我们需要对已知网站速度测试,总结归纳问题:其次,制定相应的整改策略:1、开启MIP百度对于MIP的...

    2018-04-11
  • 超出预期的才叫用户体验

    什么是用户体验?我认为,用户体验其实就是一种心理感觉。拿最简单的吃饭这件事来打一个比方。我在饭店,吃饭付账,这个过程叫作体验吗?肯定谈不上。用户体验,肯定是特殊的,肯定是不正常的,肯定是在你的预期之外的。超出预期才形成用户体验如果做跟别人一样的东西,那这些功能并不叫体验。很多人在抄袭别人产品的时候,经常说某某公司做了什么功能,老板说照着做一个,但是你想没想过,如果做得跟别人一样,是没有机会的。当年我们做的是免费杀毒。当时所有其他品牌的杀...

    2018-04-08
  • 交互体验设计师竟选择不能抛的捧花 | 真实婚礼

    新娘:@Seiya大鲍鱼婚礼场地:北京阿根廷庄园婚礼人数:120总花费:24w策划布置:6.5w策划:@华尔兹婚礼服务婚礼vendor:5.1w摄影:@ShengVision胜男摄像:@PerfectFilm视频记录化妆造型:@魏臻WeMakeup主持:@李伟MIC甜品:@乡田小墅服饰:3w出门纱:Willowby主纱:Catherine Deane新郎礼服:@殷小小爱喵咪新娘婚鞋:@RogerVivier_罗杰维维亚@Charlott...

    2018-01-30
  • 设计干货|聊聊设计师玩转Sketch的那些事儿

    点击蓝字关注GOMEOS用户体验设计1调整组内图层父级变换属性新的调整大小选项可以帮助我们更灵活地调整对象与子层之间的响应:1. 默认属性下的成组放大缩小变化,内部的图标跟随组的缩放比例进行变化.2. 锁定图标的固定宽度&固定高度,成组的缩放比例不会影响到图标的比例与尺寸.3. 当锁定上部及右部间距时,成组缩放比例时,图标距离组内上部及右部的距离保持不变.2嵌套样式这个十分强大的功能使得symbols的复用更加的强大,可以同一内容复用多...

    2018-04-04
  • 12个关于用户体验的界面设计细节

    点击上方"工信商务培训学校"↑文章列举了一些界面设计中的案例细节,希望对产品设计工作有所帮助。UI设计工作中,设计师们往往不喜欢将界面设计得与原型图一致,总会刻意的去寻求存在感与原型做出差别,那么对于UI设计师来说,更应该懂得用户体验,成为办个用户体验设计师。以下列举了一些界面设计中的案例细节,希望对设计师们有所帮助。一.图标1.统一图标的样式图标在界面设计中还是占着较大的比重,它的存在有利于平衡界面,也让页面看起来更加的美观,也有一定...

    2018-04-06