恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
周末读书——《交互设计》黄琦 著
0.0°
2019-07-29 好文转载 经验/观点 原作者: 未知 举报 1576 2 2 0

趁着周末把这本由浙江大学的黄琦老师和淘宝资深设计师毕志卫合著的《交互设计》读完了,在此想分享一些书中我认为重要且通俗易懂的内容。


我们常常说看待事物要透过表象看本质,学习交互设计也如此,先从一个大的宏观设计理念一步步深入到具体的应用中,才能不走偏,不忘初心。书本分别从 交互设计概论、基于UCD的用户需求研究、需求获取、原型设计、设计模式应用、细节设计、可用性评估、交互设计创新研究 这8大章为我们从概念到如何具体落实介绍了交互设计。


Part1:交互设计概论

交互设计(Interaction Design)是基于了解用户特性和需求的前提下,构建适用的系统行为,从而达到更高效、更友好地帮助人们完成他们使用这个数字产品的目的。这里的用户需求就需要设计师透过表象看到本质地去思考人的“动机”了,例如在现实世界中,人们要喝水需要的不是杯子而是盛水的容器;同样,当人们使用一款跑步计数app时,很可能不只是想知道自己跑了多少步数,更希望在社交圈展示自己的“成果”又或知道自己消耗了多少卡路里。这里引出了一个概念——以目标为导向的设计,要求设计和研究人员始终站在一个较高的水平看问题,帮助你朝着最终目标的方向前进而不会太过偏离设计目标。


Part2:基于UCD的用户需求研究

什么是UCD?User Centered Design。这里涉及到几个经典的UCD名词:

1.心理模型和实现模型,心理模型就是人们在日常生活中基于经验和习惯形成的对事物的起因、机制和相互关系等看法;实现模型指计算机实现其目标的机制(对计算机而言可能就是一串串代码)。我们倾向于在其他因素相同的情况下,形成比现实更简单的心理模型,因为只有产品最后的表现模型离用户心理模型越近才越容易被使用和理解。

2.隐喻,强调“使系统符合现实”,是我们首先应该遵循的原则,它在界面设计中主要有两个目的:传达操作功能和情感引导(例如MacOS系统界面中废纸篓的图标设计)。

3.映射,物理环境在信息世界中建立一种反馈和对应性。

4.心流,当人们全身心投入在某个活动中,达到无需努力便可集中精力并享受的状态就是流。(心流的概念也被提及在Ant Design Mobile“蚂蚁”的设计理念中),很多电商平台的流布局界面(不断下拉加载新的页面)就是这种很好的“流”体验。


Part3:需求获取

在产品设计实践中,一个产品往往会有来自多方面的需求。商业需求往往是在满足用户需求中最可能引起冲突的另一大需求,这时你需要抓住相关利益者的需求,最后平衡出一份MRD(市场需求文档)。制定设计目标通常包含三个方面:商业目标、用户目标和成功标准。


Part4:原型设计

根据细节的展示程度我们将原型分为低保真原型和高保真原型。低保真原型中,我们只需展示集中功能层面,对相近的信息进行区分,确定每个页面上大概要承载哪几个功能;高保真原型则已经将功能和信息细化,增加设计模式,完整的呈现了导航、板式、以及每个内容区块具体的信息形式等等。


Part5:设计模式应用

交互设计模式,是解决交互设计问题的一系列可行可复用的原型、方案或模版。

1.搜索框。在实际设计案例中的表现有:框运算功能,其创新点及优点是“自动完成”的进一步深化,即更加准确和具体地猜测到用户输入信息搜索的意愿;自动匹配功能,和框运算有异曲同工之妙,输入框为用户自动补充可能的信息,大大降低用户的输入成本,使搜索框从“可用”到“好用”,提高了使用效率;细节设计,增加名称或类目名选项等,提现对用户细致关照的效果。

2.注册表单。表单(form)由表单标签、表单域和表单按钮构成。良好的用户体验表现在:充分的提示和帮助、文本框是否选中的不同状态时的表现、注册和登录的整合(通过一个单选框切换注册和登录状态)、避免较多的文字描述等。

3.旋转木马。一种充分利用有限屏幕空间的设计模式,在展示一系列图片的情况下,通过前后如同木马般旋转的图片会吸引用户的注意力,如MacOS系统中图片的浏览方式就是木马旋转最直接的运用,很多轮播的banner图,也是较为常用的运用方式。

4.步骤条。是用户执行一个任务的步骤指示和引导,作用在于让用户知道总体的步骤和所处的位置。主要由“步骤内容”、“步骤方向”和“步骤状态”三部分组成。在实际运用中可以根据应用场景做一些有特色和创新变化的设计,例如用图片而不是文字的形式呈现步骤内容等。

5.搜索结果页。一般包含了搜索结果网页的标题、链接,一段简单的并且与搜索关键词相匹配的关于网站的文字摘要,搜索结果网页缓存的链接。除了这些基本信息,有时还会根据情况提供一些其他信息,比如,最后抓取页面的日期和时间,搜索结果网页的文件大小,和搜索结果相关的同网站的其他链接,以及相关的评分、打分和联系信息等。

6.新手帮助。帮助新用户快速了解和使用产品的引导设计。从信息架构开始,对所要呈现给用户的信息进行整理和组织,并结合步骤条、导航、搜索框等模式将信息有序呈现。不同的出发点和用户使用“新手帮助”的设计也有差异,应尽可能在信息等可视化及用户易用性上最优化,因为对于新手来说,如果难以使用或认知负担较重,很可能就会放弃使用。

7.评分。评分的设计实质是表单的设计,评分充当一个快速收集用户看法的简单工具,被要求在很短时间内完成,因为用户不喜欢思考,而且他们的精力和时间有限,这就要求设计上极其注重可用性和易用性,以及符合用户认知习惯。


Part6:细节设计

细节设计是整个产品设计开发环节中重要的一环,用户看不到产品背后的逻辑和技术实现的方式,用户看到的是产品外在的视觉效果。文字和色彩是构成一个互联网产品最基本的要素,两者承载着产品对外传达的信息及情感。文字的可读性和可辨识性是检验阅读体验两个最重要的指标,通常在阅读类app中,长短正文中使用衬线字体(如宋体)就比无衬线字体(如黑体)的可辨识性要强,有利于降低用户的阅读疲劳感。(在这推荐一款知识学习app「得到」,里面的学习文章用的就是很舒适的衬线字体)另一个要素色彩,给人以高端的色彩配合往往是同一色相,不同的明度和饱和度。低端(sale,刺激消费)的色彩配色往往有两个及以上的色相,明度中等,饱和度偏高。


第7章可用性评估和第8章交互设计创新研究 在此就不做简述了,对本书有兴趣的童鞋可以了解阅读完整的内容~







更新:2019-07-29

收藏

2人已收藏

Fyr

发芽儿 发芽儿~

  • 15

    作品

  • 48

    粉丝

  • 18

    关注

  • C4D小练习
  • 端 午
  • app空白页设计
  • 插画动效二维码
相关标签
设计用户体验

    猜你喜欢

      2019-07-29 好文转载 经验/观点 原作者: 未知 举报 1576 2 2 0

      周末读书——《交互设计》黄琦 著

      0.0°

      你确定要举报周末读书——《交互设计》黄琦 著

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年07月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录