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

接上文···框架层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

相关推荐

  • SKD独家 | 美国交互设计排名

    你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及院校专业设置等诸多因素的考虑,整理出交互设计的院校申请建议,希望对选择院校的同学有所帮助。注意:本排名仅供参...

    2018-03-28
  • 基于交互体验下的包装视觉传达设计研究

    红河学院美术学院 文俊鸿摘要:包装视觉传达设计中交互体验的表现成为其设计重点,消费者与包装产品设计的关系更加紧密,让消费者在包装设计使用过程中感受到包装设计与消费者的情感交流互动,增强消费者视觉感官交互体验。采取理论研究和案例研究相结合的研究方法,对现代交互设计在包装视觉传达设计应用进行研究,让产品包装与消费者的联系更加紧密,让消费者的心理情感和视觉感官获得更具冲击力的体验,更为有效地实现包装设计与消费者的情感交流互动和传达。关键词:交...

    2018-01-30
  • Axure8.0展开收起

    设置菜单展开收起效果,且联动箭头朝上朝下动效。收起状态:箭头朝下,内容收起。展开状态:箭头朝上,内容展开。【步骤】1)设置展开内容与箭头为两个动态面板,命名2)点击事件设在点击菜单栏,同一个事件下控制两个面板状态。内容面板:箭头面板:设置旋转效果。点击菜单栏:点击运行即可。

    2018-03-15
  • 用户体验设计专题——前言

    元宵佳节一过,春节假期正式步入尾声,相信大家的工作也已步入正轨。为了感谢大家对我们这个略显晦涩却干货满满的公众号的支持,经过系统梳理,我们归纳总结了9个用户产品设计的基本原理,结合从数千个小流量评估实验中筛选的经典案例予以阐述,在未来两个月的时间里,会逐步分享给大家!废话少叙,步入正题!笼统地说,用户体验(User Experience,简称UX或者UE),是指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。这里我们会关注两个重...

    微信热点 2018-03-02
  • 产品思维~02·用户体验与结婚教练

    今天继续分享《得到》app梁宁的大师课程产品思维30讲,感兴趣可以下载《得到》app继续关注,在文后会附上《得到》app的下载方式。其实梁老师真的很幽默也很形象,来用结婚教练的例子来类比产品的用户体验,同样的结婚也好,创业找合伙人也罢,都是非常重要的长期关系,改变一个人那是非常难的一件事情,那么如何去观察和判断一个人就显得尤为重要。如果没有受过专业训练,那么眼睛看到的很可能是不真实的,你的感觉以及情绪很容易被某个点所牵制,而且在你没有强...

    2018-04-26
  • 交互设计之搜索框设计

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Younger NowMiley Cyrus - Younger Now- 期待你的关注和收藏 -耳朵们要好好收藏原文:Behance作者OTT UI  |  编辑:程琳琳在交互设计中,各个不同的场景需要不同的搜索框设计。搜索框一种常见的交互插件,用于精准提取海量信息中的准确内容。搜索框几乎存在所有的网站和App中,尤其是海量内容为导向的产品之中,例如音乐库、电商类网站,做好搜索...

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

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

    2018-04-04
  • 信息与交互设计专业委员会走访北京服装学院艺术设计学院

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn第四站——北京服装学院2017年11月3日上午,信息与交互设计专业委员会卞亚君秘书长及秘书处谢老师、王老师一行三人到北京服装学院艺术设计学院进行了走访。新媒体系主任丁肇辰教授热情地接待了我们,在交谈中丁教授向我们介绍了学院的基本情况以及带学生做的一些研究项目及活动。如《都会寝室》项目,面向20-35岁人群,致力于通过卧室环境控制、健康食物推荐等,改...

    2018-01-31
  • Axure RP 8 入门手册 – 第1章(下)

    第2节原型相关的文件类型芝芝:小楼老师,我不小心把软件关闭了,我编辑的文件在哪?小楼:你新建完文件没有保存吗?芝芝:我有生成HTML文件,但是好像不能用软件打开呀?小楼:看在颜值的份上,我给你讲讲吧!与Axure相关的文件有几种类型:分别是“.rp”文件、“.rplib”文件、“.rpprj”文件以及“HTML”文件。“.rp”文件:独立原型项目的源文件,这是最重要的文件,只有这个文件才能进行原型的编辑与输出。“.rpprj”文件:团队...

    2018-03-31
  • 从用户体验的视角评析《CSR赛车》手游

    我最近一直在玩《CSR赛车(CSR Racing)》和《CSR赛车:经典(CSR Classics)》,在近期的游戏中我发现,Natural Motion在该系列的核心玩法、货币体系、社交机制和盈利模式中都引入了许多新的花样和用户体验功能,这些新元素的加入为游戏的某些方面带来了更好、更流畅的玩家体验。CSR系列专为手游玩家设计,会话时间极短(10-15秒),玩家们可以在忙碌的间隙进行一场快速竞赛,这是一个非常好的设计。在《CSR赛车》中...

    2018-03-07