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

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

相关推荐

  • 欧洲刮起性爱机器人风,用户体验称比真人舒服;马化腾减持腾讯200万股,套现超6.4亿港元 | 早报

    语音版早报9.109月10日邦妹读新闻来自创业邦00:0004:09不可不知1、马化腾减持腾讯200万股 套现超6.4亿港元香港交易所资料显示,马化腾于9月5、6及7日,连续三天合计减持腾讯200万股,每股平均价介于321.64港元至323.521港元之间,持股量由8.71%降至8.69%,合共套现逾6.4亿港元。此时正值腾讯股价高点。马化腾今年4月连续4天减持,套现42.27亿元,其今年已合共套现近46亿元。2、传WePhone开发者...

    2018-01-31
  • 【软件安装】Axure RP 7.0软件图文安装教程

    1、会员覆盖工作、学习、生活娱乐,并不断更新更多有价值的精品软件2、安装中有任何问题请咨询小白资料网私人微信:xbzw88888888【特别推荐】加小白官方微信:xbzw88888888,就可免费领取:快速入门自学视频课程Axure RP 7.0软件图文安装教程软件介绍:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的...

    2018-03-13
  • 用户体验设计师越来越流行,难道真的是以前的网页设计师披上了时髦的外衣?【UXRen译】

    Design+体验设计精英人才职前训练营。体验设计出国留学作品集打磨。体验设计国内考研专业培训。体验设计咨询与服务。寒假审校的一篇文章,分享给大家。回答者1:Melanie Polkosky(博士, UX心理学家)啊…有点小怀疑,是不是?我并不认为用户体验设计师就是那些穿着昂贵服装以及拥有良好自我提升技能的网页设计师。实际上,作为一名用户体验研究员兼设计师我可以告诉你,在我20多年的职业生涯中,只有少数的几次的工作是和网页相关的。与普通...

    微信热点 2018-02-28
  • 交互设计定律 在UI设计中的应用!

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”。在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。接下来,笔者通过一些实例来解析下这些原则在设计中的应用。由于文章有点长,影响阅读体验,故本文将分为上下两篇。一. 费茨定律(Fitts’ Law)1. 费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M...

    2018-02-26
  • 交互设计面试官想了解什么,你知道吗?

    丝路视觉新朋友可点击上方蓝字关注年后又是一波跳槽季,对于即将走出校园的小伙伴来说,春招也马上要开始了。今天推荐的这篇文章包含了校招过程中的所有技巧和秘籍,绝对良心面经。已有一些工作经历、现在想跳槽的朋友们也可以参考一下,不仅可以为准备的面试答案查缺补漏,也可以给心中留一个底。与面试官进行的交谈,每一句话都会影响面试官对你的判断,因此每次讲话都力求向面试官证明你是合适的人选,如果他无法从你身上获取到有效信息,自然会将你淘汰。然而很多同学在...

    2018-02-03
  • UI|人性化交互设计 美食订餐网站

    类别:美食网站设计:BASOV(乌克兰)今天品牌先生为大家分享乌克兰 BASOV 工作室设计的一款美食订餐的网站。从选餐到订餐下单,设计师进行了很便捷的交互设计,让网站尽到最大的便捷和简约,这样客户也会爱上这样的网站。网站的建立不单单是界面UI设计出漂亮的界面,包括客户的需求和网站的结构等等,此款网站在前期原型交互设计上的用心在图中也都体现了出来。▼(品牌先生独家整理,转载请告知或注明出处)UI-- END --请点击下方“阅读原文”去...

    2018-02-21
  • 产品思维~02·用户体验与结婚教练

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

    2018-04-26
  • 交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法~一、Jakob Nielsen(雅各布·尼尔森)简介:Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术...

    2018-01-31
  • 『设计|交互设计』2018年交互设计趋势解析

    本文转载自:设计前沿2018年交互设计趋势解析2018视觉趋势Pantone 2018流行色:紫外光色Pantone 官方翻译为「紫外光色」,紫外光色是强烈挑动思绪与深思的紫色调,传达独创性、创造力及前瞻性思维,为我们指向未来。彩通:18-3838 紫外光色颜色代码:#5f4b8bRGB:R 95,G 75,B 139CMYK:C 71,M 73,Y 7,K 8从2017年下半年开始,紫色配色的作品开始很多,所以2018年这个色也是一个...

    2018-04-25
  • UED 戊戌狗年第一波招聘已送达!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-02-28