更多

金豪  
“精品素材”   花瓣

触类旁通:多终端时代的触屏界面设计 推荐作品

分类: 主页 UI设计网 图书推荐

作品版权:归作者所有,禁止匿名转载;禁止商业使用。

作品人气
1386

居住地 / 职业
2017-5-5 21:16:59

触类旁通:多终端时代的触屏界面设计
触类旁通:多终端时代的触屏界面设计.jpg

触类旁通:多终端时代的触屏界面设计(大神教您如何做触屏界面设计,即学即会!
【美】JOSH CLARK(乔石·克拉克) 著
C7210
ISBN 978-7-121-31119-2
20175月出版
定价:69.00
200
16
编辑推荐
《触类旁通:多终端时代的触屏界面设计》是一本立足现在,面向未来的触屏设计开山之作,也是一本著译双馨的佳作。
作者Josh Clark(乔什 克拉克)被业内公认为触屏设计领域的“超级行家”,他的前一本Tapworthy(<触动人心>)被视为移动互联网时代触屏手机设计的经典。
《触类旁通:多终端时代的触屏界面设计》根据大量的用户调研数据,从握持方式、用户使用习惯、个体行为差异甚至心理等多方面进行综合分析,提出了触屏界面设计的基本原则、实现的要素、并辅以实际的案例,让读者不仅知其然、知其所以然,而且直接告诉读者如何灵活地付之实践、大幅提升用户体验:一项设计被拿在手里使用的感觉如何?
严谨、务实、强调重点、没有废话,是本书写作上的突出特点。相信读者在阅读的过程中,必能深切地体会到这一点,获得醍醐灌顶般的阅读享受。
译者C7210是知名设计博客Beforweb.com博主(公众号“Beforweb”),多年来一直致力向国内读者传达国外优秀的设计理念与技术方法,他选择并翻译的文章深受读者喜爱。
内容提要
《触类旁通:多终端时代的触屏界面设计》深入触屏人机交互构成的核心,以大量的用户调研数据为基础,分析了多终端时代触屏设备用户使用习惯的变化及其对设计的影响,总结出了触屏界面设计原则和规律,并给出了具体的设计案例。
这是一本立足现在、面向未来的优秀设计范本,值得每一位界面设计师及希望进入产品设计行业的读者珍藏并作为案头参考。
目录
1 实体化界面 /1
数字与工业设计的融合 /3
人们怎样使用手机 /4
人们怎样使用平板手机 /7
平板电脑:屏幕更大,变数更多 /11
混合型设备:带有键盘的触屏 /13
触屏设备界面布局设计 /17
手机的界面布局 /20
平板手机的界面布局 /30
平板电脑的界面布局 /38
混合型设备的界面布局 /41
2 靠不住的屏幕 /45
靠屏幕尺寸判断输入方式?没那么简单 /46
假设所有设备都有触屏 /49
同时面向触屏和鼠标进行设计 /50
7毫米=足够大 /56
位置,位置,位置:目标元素尺寸与布局的关系 /57
交互元素的最小尺寸:44(像素、点、dp /58
关于em /60
避免拥挤 /61
像素与视口 /62
3 高效的触屏界面 /67
即时呈现 /68
控制内容的高度 /73
被滥用的轮播 /75
精简表单 /81
真的需要键盘吗 /85
选择正确的键盘类型 /87
<select>下拉列表 /89
手势vs. 确认对话框 /93
解放双手 /95
4 手势 /99
基础手势 /100
麻烦的按钮 /104
以现实世界为指引 /115
将手势作为快捷方式 /121
混乱与疏导 /124
在网页中实现手势操作的复杂性 /130
聚焦click事件 /132
在相册和轮播中通过CSS实现滑动浏览 /133
浏览器中的触控事件 /137
300毫秒的延迟问题 /141
指针事件带来的希望与困扰 /143
怎样发现手势 /146
5 手势的可发现性 /149
与实际行动脱节的前置教学 /149
拟物化设计:“我知道该怎样使用它” /151
界面被拍平之后 /154
不要过于拟真 /156
多玩些游戏 /158
路漫漫其修远 /169
鸣谢 /171
精彩节摘
推荐序一
移动互联网虽已风风火火若干年,但是像样的体验设计书籍还是少之又少。我读到的第一本关于移动设计的书便是Josh Clark当年所著的Tapworthy,堪称经典。
时至今日,移动设计已经不断迭代更新,又有了种种新的变化。JoshClark的新书,则由我崇拜已久的C7210翻译而成。为什么说崇拜呢?因为C7210是较早的一批移动互联网从业者和布道者,翻译了不少iOS设计指南等设计参考资料,同时也在实践中不断积累自己的理论体系,通读海内外设计方法,并与实践结合,融会贯通。
全书读下来可以发现不少新的知识,包括对平板设备触屏界面设计的阐述,同时面向触屏和鼠标的设计,介绍了更加多元化的手势操作等,可以说是立足于未来的一本书。如果说上一本是体系化入门圣经,那么这一本就是体系化进阶教材。
我所在的团队大力推动的一个设计理念就是“场景化设计”,指的便是充分理解整个应用的生态系统,这与本书当中的一些设计理念也不谋而合。放弃功能主义设计,我们要做的不是功能;放弃形式主义设计,我们要做的也不是花哨的设计。我们要做的是搞清楚用户从哪里来,到哪里去,然后才是怎样展示。基于使用情境,为用户提供解决方案,提供最高效的任务流程和最合适的信息组织,与用户的使用场景共情。
移动互联网已不再是一个全新的概念,平板、智能手表、智能眼镜及任何能联网的设备,慢慢会扩展“移动”一词所涵盖的范围,所以,作者已经不再局限于讲述手机触屏界面本身的设计,而是扩展到平板、笔记本电脑等更加多元化的触屏设备领域。同时,任何设备都不是单独存在的,多终端将共同服务于用户的生活,所以跨端设计也是一项重要技能,多端都可以安装同一款产品,彼此之间在内容上是同步的,甚至在操作行为上也是完全一致的——这样才能提供无缝的体验。当然,具体是采用原生应用,还是网页应用,或是响应式设计,仍是需要不断实践并论证的话题。
行业的飞速发展使人们的生活状态得到了极大的改变。如果你已经是这方面的从业者,那么你可以踏着这个浪潮,继续创造颠覆人们生活方式的设计;如果你想踏入这个行业,那么你可以站在巨人的肩膀上,放飞想象的翅膀,用不一样的思考方式开创未来。这本书就是巨人的肩膀,书中大量的理论配合案例,让初学者可以快速了解移动设计行业,让从业者能够对移动设计形成更加体系化的认识。
陈莹(elya妞)
前百度云UED负责人,百度MUX交互负责人
推荐序二
认识邹正是我刚刚开始翻译Josh的上一本书Tapworthy的时候。邹正在行业里昵称“C7210”,但身边的人都叫他“正爷”。
正爷是设计转前端再转回设计,同样,我也做过三年前端;我们都喜欢听摇滚乐,演奏摇滚乐——我和站在科技与人文十字路口上的正爷有着聊不完的话题。
我们曾共同就职于大众点评。在那个鲁莽的时代,我们用安卓早期的原生控件搭建起了第一版的大众点评App。后来,苹果的一记重拳彻底敲开了触屏之门,也敲开了移动互联网之门。
将近十年后的今天,移动互联网改变了我们的生活,侵蚀了我们多数的时间。现在回想起来,消耗了我们太多精力的朋友圈,至今也无非几年时间而已;我们几乎已经忘记怎样伸手招车,而网约车从开始流行到如今仅有一两年;我们甚至已经不记得上一次用纸和笔认真写下哪怕一行字是多久之前——感觉没有手机可以沉迷的时代已经是半个世纪以前了。
就在这短短几年的时间里,触屏改变了我们二十多年来使用键盘和鼠标的习惯。除了手机和平板电脑,汽车控制面板可以是触屏,PC可以是触屏,MacBookPro的键盘可以是触屏,甚至我们的家电、门锁也变成了触屏。这一切对于设计师的要求已经从“手机界面设计”升级为“多终端时代的触屏界面设计”。本书刚好站在这样的节点,深入分析了多终端时代触屏界面设计的原则、方法与运用,并辅以大量的用户调研数据,这不仅可以极大地开阔设计师的眼界和思路,也能帮助他们更好地去实践。
触屏,就是将以往原子时代的实体输入设备数字化。这只是数字化时代的冰山一角,而未来的机会将存在于那些尚未数字化的事物当中。
我们已经坐上了开往数字化时代的高铁,你准备好了吗?
包季真
《触动人心——设计优秀的iPhone应用》译者
推荐序三
很早就知道了“Beforweb”这个博客,而且在我的收藏夹里放了很久,直到我不再使用浏览器的收藏夹。博主有一个奇怪的名字——C7210,一直在做UX方向的翻译,是我仅见的从那么早开始做译文并坚持到现在的人。在很长一段时间里,我关注的设计站点,除了国外的大站和国内的几个团队博客,就是Beforweb了。
虽说是译文,但Beforweb更大的价值在于文章的选择。邹正每周把他觉得最好的一篇国外设计文章译成中文,这个挑选、过滤的动作能表现出他对体验设计行业的关注点及趋势判断。后来才知道,每周末他花在原文选择上的时间就要大半天,并且一做就是那么多年,非常令人钦佩。
之后有幸成为腾讯的同事,且在几个项目上合作过。邹正让我看到了交互设计师的另一种可能性——日常是一个很感性的人,大家从他每篇博客的开场白中应该也能感觉到(现在是在公众号了);而在交互工作中表现出来的逻辑和思考全面性也令人信服。当理性严谨和强烈感性混合在一个人身上的时候,这种感觉真的不太好形容。嗯,也许就是“反差萌”吧。
回到本书。一方面,我相信邹正这么多年坚持UX方向的背后,在内容选择上的品位,以及对设计内容翻译的把控力。另一方面,JoshClark的上一本书Tapworthy也是当年我学习移动设计时的一个重要里程碑。然而,移动互联网的发展还是太快了,Tapworthy中的一些内容今天看来已经有些不适用了,相信《触类旁通:多终端时代的触屏界面设计》会给我们带来更新、更全面的对移动设计的解读。
对比十年前,今天的设计师无疑是幸运的——Sketch帮助我们打破Adobe的垄断;有GoogleAdobe带给我们免费开源的思源黑;有Jony Ive告诉我们设计师可以对企业产生多大的影响力;有互联网上海量的设计学习渠道,甚至多到难以选择。但我相信,有Josh Clark和邹正背书,这本书是其中不应该被错过的那一本书。
龚佳毅
前腾讯上海设计总监
推荐序四
在英国学习人机交互时,导师曾多次和我们提起“无处不在的计算”(UbiquitousComputing)的话题,在人们还用着诺基亚和摩托罗拉功能机的年代,我们充满兴趣地设想:如果各种设备,例如手机、电脑、桌子等,都变成某种所见即所得的触屏,人应该如何与之交互,又有怎样的规则需要去遵循?谁可预想,这如同科幻小说般的研究,在不到十年的时间里就已经深入我们的现实生活:全球手机市场基本人手一台的iPhoneAndroid,逐渐流行的平板式电脑方便了商务和家用的双重场景,公共场所开始出现越来越多的触屏操控台和售票机等——仿佛触屏天生就是人类社会必不可少的设备。那么,如何在这样的多终端时代为触屏而设计呢?
近些年,我们对触屏设计的研究从未止步,各种天才的用户体验专家、人机交互工程师、视觉设计师在这个领域观察、实验和总结,悉心揭秘了这块屏幕背后的设计原则和规律,让用户能够更方便地与之交互。而本书的作者Josh Clark更是这个领域的“大神”,他对用户、设备和交互的理解,指导和启发了许多优秀的设计师和工程师创造出更精彩的界面。本书深入触屏人机交互构成的核心,从基础的握持方式到手势元素,从用户使用场景到技术的实现方式,从理论研究到具体的案例分析,可谓是触屏界面设计师和工程师的又一本必读书。
邹正的昵称是“C7210”,我也常叫他“小C”。小C作为本书的译者,更是为中文译本的出版锦上添花。他在UX领域的深厚功底和积累,以及多年来的英语UX专业文章翻译经验,将使本书的精华非常完美地传递给中文读者。认识小C多年,一直钦佩他能够默默地为国内UX圈子贡献诸多养料,能够让国内设计师第一时间接触国外先进的研究和发现。毫无疑问,《触类旁通:多终端时代的触屏界面设计》将是又一个经典,并将促进中国触屏界面设计的更大发展。
李婧(小艾Amy
艾体验产品咨询公司创始人
译者序
翻译本书,于我个人而言,更像是一种致敬。
置身互联网与移动产品设计行业,至今已十余载,说起来时间着实不短。然而,由于缺乏设计科班背景,加之当年信息获取渠道相对匮乏,太多的时间被用在了摸索与试探当中。从网页设计师,到UI设计师,再到前端,一番丰盈的体验之后,似乎终于阶段性地完成了向内和向外的探索,最终专心、安心地走上交互设计之路,直到如今。
回想转向交互设计的那段日子,终日高能,新一轮压榨式、爆发式的探索和自学让我欲罢不能,当然其中也不乏盲目与肤浅。最终得以迷恋并聚焦于移动端设计,则正是由于在Josh Clark的上一本经典著作Tapworthy中找到了某种依托感。
令我感到庆幸的是,这样的依托感直到如今依然清晰于心,并越发稳健地扩展到一个又一个新领域当中。这是一份远超职业范畴的、值得感恩的赠礼。而当电子工业出版社的刘皎老师向我提起Josh的这本新书时,我似乎看到了报答与回馈的机会——既为当年的引路人,也为我们共同热爱并甘于投身其中的这一事业。
“与时俱进”对数字化产品设计师而言是一个永恒的原则,作为触屏移动设计先行者的Josh Clark自然深谙于此。在上一本书中,Josh以主流移动平台界面设计规范为线索,深入挖掘其中的每一个要点,有针对性地在知识体系中填充了大大小小极为丰富的实际产品设计案例,将移动设计思维模式及实战要则完整、清晰地呈现在我们面前。而如今,纵使新技术、新领域层出不穷,移动设备及产品发展的大潮却依旧澎湃。经过几年的洗礼,作为设计师,我们变得越发成熟、老练;而相比于那个年代,如今的设备生态体系却也更加复杂化、立体化,我们面对着一个又一个新的挑战。在这样的时代背景下,Josh对他在过去几年当中所积累的触屏交互设计理念与经验进行了新一轮的沉淀,结合更加多元化的思考方式与实践案例,将面向以手机、平板手机、平板电脑和笔记本电脑为代表的多终端时代的触屏界面交互设计精华融汇成文,终成此书。
在这本书中,我们可以看到国外的研究团队通过孜孜不倦的用研工作得出的极具指导意义的数据,可以学习各类主流触屏设备在交互设计原则上的共通之处与差异特性,可以了解Web端产品在复杂的输入/输出设备环境中的前端设计与实现思路,甚至可以学会怎样从视频游戏等媒介中汲取养分并运用到交互设计的实践中。
这是一部总结过往、立足当前、面向未来的设计指导书,正如我几年来在博客(Beforweb)当中翻译的大量UX文章和教程那样,都来自这些设计先行者和前辈们年复一年、脚踏实地的研究与思考。得益于他们的工作,我们看到了真正意义上的“以用户的名义打造产品,以产品的名义进行设计”的单纯且精粹的情怀。在这个浮华的时代,在这个令设计师们时常不知不觉走在形式主义与自我表现的路上而忘乎所以的时代,有这样一群人在时刻提醒我们应该怎样做设计、为什么而设计,是一件值得感恩的事。
从收到原书到译作完稿,这项令我自豪的翻译工作却也伴随着我跨越了人生当中最大的转折时期。期间经历了生活状态的巨大转变,以及心智状态的起起伏伏。感谢出版社的老师们从始至终的鼓励,感谢多年来结交的各位良师益友的支持,感谢父母在生活中给予的帮助和谅解,感谢小猫斑斑“萌暖”的陪伴和相守。最后,我要感谢自己——在进入设计行业的第十一个年头,依然会像孩子一样单纯地爱着这些事——为之而喜,为之而泣,为之思考与学习,为之永无止境地前行。
C7210
曾几何时,仅在顷刻之间,无数大大小小的触屏设备仿佛泄闸的洪水一般涌入这个世界。面对突如其来的生态变迁,界面设计师们别无选择,只有在急流当中奋力学习游泳,才能让自己不至于被洪潮所吞没。
我们边游边学,渐渐摸索出新平台的一些门路。App设计师们开始深入挖掘这些设备的独特潜力,在几年间不断将人机互动体验推向一个个新的高度。而在网页方面,我们也见证了响应式设计的崛起,设计师们因此有能力使页面根据不同的设备尺寸来调整布局,无论在手机、平板还是桌面设备上,页面的外观都能针对特定的硬件环境调整到最为适宜的体验状态。一切看起来都还不坏?
不过事情并没有那么简单。响应式的界面布局只是解决了跨设备设计难题的冰山一角。无论内容样式怎样调整,人们都要用笨拙的手指在触屏设备上操作。这就要求设计师们不仅要确保界面在不同尺寸的屏幕上都有最好的表现方式,同时要让任何类型的触屏设备都便于手指进行触控操作。
屏幕规格、持机方式、使用情境及触摸的本质属性都会影响最终的交互体验。有些界面看上去还不错,但实际操作起来的感觉究竟如何?触屏已然成为日常生活当中最为重要的人机互动介质,作为设计师,要想打造交互体验一流的界面,就需要从行家身上汲取更多真正具有实践价值的宝贵经验。
读者是幸运的,因为Josh Clark要详尽地阐述触屏设计涉及的方方面面。
毫无疑问,Josh Clark是触屏设计领域的超级行家。无论是较高层面的设计原理,还是具体细节的处理方式,Josh无一不通。在本书中,他将引领我们一同了解触屏设计当中最关键的一些原则与实践方法,以及本地AppWeb页面设计中的各种局限、挑战与创新机遇。我们不仅能学到很多重要的设计规则,也会了解应该在怎样的情况下以何种恰当的方式打破这些规则。
Josh并不只是将他多年实践积累的宝贵经验干巴巴地灌输给我们,你在书中随处都可以感受到他的真挚热情和机智幽默。我确信,在阅读本书之后,你头脑中的设计火花将难以抑制地四处飞溅,并随时准备着迸发出来!享受这一旅程吧!
Brad Frost
作者简介
Josh Clark是设计咨询公司Big Medium的创始人,专注于互联网设计领域,曾与TechCrunchTimeInc等多家知名媒体品牌合作打造世界一流的移动互联体验。Josh曾著有四部书籍,其中包括移动设计领域最为著名的《触动人心:设计优秀的iPhone应用》(Tapworthyesigning Great iPhone AppsO’Reilly2010)。此外,Josh还在世界各地进行讲演,主题涉及数字化界面设计的方方面面。Josh曾于1996年发明Couch-to-5KC25K)跑步日程表,帮助数百万人进行了有效的运动和练习。无论是对健身,还是对用户体验设计,Josh都有相同的座右铭:“NoPain, No Pain”(轻松高效,大家开心)。
前言
在过去的几十年间,我们几乎完全依赖鼠标和键盘来探索数字世界。我们在桌面的“塑料砖”之间穿梭,点击按钮,通过屏幕上的小箭头与软件界面互动。
时过境迁,现在我们已经可以将界面掌控于手中。智能手机的普及使数十亿人每日、全天沉浸在触屏世界中无法自拔,人们用手指戳戳点点,操控着屏幕上的内容。我们探索数字世界的方式彻底改变了:人与信息直接互动的体验模式成为主导,这就要求界面设计师掌握新的技巧并采取不同的视角。触摸操作使原本虚幻的设计有了身体的特征。有史以来第一次,作为设计师,我们要拷问自己:一项设计被拿在手里使用的感觉如何?
这些正是本书关注的重点。看看如今的世界,触屏已无处不在,从出租车和飞机的座椅,到大街上的自动贩卖机,更不用说我们口袋中的手机、背包里的平板电脑和腕上的手表。据统计,从2010年到2014年,近一半的美国人购买了平板电脑;其中,仅2011年,苹果卖出的iPad的数量就超过了其在过去28年里卖出的Mac电脑的总数(http://bkaprt.com/dft/00-01/http://bkaprt.com/dft/00-02/)。此外,触屏也渗透到了桌面领域,配备了包括触屏在内的多种输入模式的混合型设备正在被越来越多的用户所青睐。
尽管触屏设备的浪潮汹涌澎湃,但多数网站的设计与实现方式却仍然固执地停留在键盘和鼠标主导的阶段。设计师们本该更早地将新理念与新技术付诸实践。几年前,响应式设计的出现给行业上了一课:网页的呈现不应局限于单一的输出形式(桌面屏幕)。现在,另一个发现是:网页的呈现也不应局限于单一的输入形式。当前,触控是一个交织了多种输入的复杂模式,包括键盘、鼠标、触控板,甚至图像、音频、体感设备等。错综复杂的技术环境要求我们必须从最基本的人机互动层面转变设计理念,而界面的响应式布局等只是这种转变的外在表现。为触屏而设计,我们需要考虑的远不止“将按钮设计得大一些,以便胖手指可以点击”这么简单。
本书将为这种转变提供助力,带你了解如何面向手机、平板手机、平板电脑及混合型设备等主流触屏平台进行交互设计。我们将一起探索怎样针对不同的软件环境进行设计,同时不会忽略在围绕触屏进行设计的时候怎样兼顾其他非触摸的输入模式。
面向触屏,我们需要重新思考、改造,甚至在必要的时候摒弃过去几十年里的一些传统设计模式。通过阅读本书,你将了解一些更加适用于新时期硬件生态的设计模式,包括潜力巨大的手势操作,以及有着微妙影响力的界面动效等,并能将其中一些共通的设计原则运用到本地App及网页设计的实践当中。
不妨做做热身,我们即将起航。


0喜欢
新浪微博
    作者其他作品

/
2017-5-5 21:16:59 发布


感谢支持
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

全部评论(0)
“2016精品素材” 素材 金豪印刷 花瓣网

快速回复 返回顶部 返回列表