《好设计,有方法》读书笔记

好设计 有方法

书名:好设计,有方法:我们在搜狐做产品体验设计

作者:李伟巍

◆ 第2章 有源设计

有源设计是让设计有据可依,而不是让设计者天马行空。设计中的点、线、面、色块、交互、动效等每个元素都凝聚着设计师的心血,每一处设计细节都有其依据。有源设计中的“源”就是指设计语言,代表设计师思考的维度,可能是产品需求、框架逻辑、数据分析、用户反馈、设计思想、习惯的力量等,这些都可以是设计语言的基础。

◆ 2.3 制定设计语言需要遵循6个设计原则

设计语言不是要打破用户熟悉的习惯,而是在用户习惯的基础上更加高效。

image.png

◆ 2.4 设计语言推动评审案例

我们有个频道主站的改版项目,涉及的业务部门比较多,所以设计方案需要得到所有业务部门的确认才行。方案经过几轮修改最终出炉,我们召集业务部门来评审。各业务部门的意见众说纷纭:字体太大、颜色太单一、整体太简单、缺乏设计感、没有视觉冲击力、图意表达不清、模块分割不清、没有框线等。设计师听到这些建议后,开始阐述自己的设计理念完全迎合了设计的主流趋势,遵循体现品牌、轻量化、去除装饰、弱化表现等设计原则,在阅读体验上更直接地给用户呈现内容。但这种阐述在评审会上显得徒劳,没有任何成效。

项目负责人并没有反驳别人的观点,而是直接展示了我们线上的设计规范,传达了我们设计遵循的准则,然后与竞品的设计语言进行对比,体现了整个产品线体验设计的统一性,强化了品牌形象的一致性。之后大家好像恍然大悟,只提了涉及自身利益的一些问题,而不再纠结设计本身的问题。设计语言胜过诠释若干别人听不懂的专业术语,别人并非设计专业出身,对这套设计理念又怎么会有感觉呢?设计语言就是高效沟通的简单方式,不仅很好地传达了产品的设计理念,还减少了沟通不畅带来的负面影响。

◆ 2.5 数据验证设计语言的方向

“You tell me I’m wrong.Then you’d better prove you’re right.(你说我是错的,那你最好证明你是对的。)”

我们把这个案例分享出来,希望大家利用数据验证设计语言,而不是简单地通过合理性来解释。

◆ 3.2 设计风格的差异

Material Design中的材料遵循物理规律,因此材料之间无法穿透。多个材料同时出现时,必须用阴影来区分材料的层级关系。内容与材料相对独立但内容的范围不能超过材料的边界。

iOS中设计元素之间可以互相穿透,设计师可以运用半透明遮罩层或者毛玻璃效果的叠加来区分元素之间的层级关系。内容的范围没有限制,必要时还可以为了突出信息,将元素摆放到超出边界的位置,以吸引用户的关注。

在iOS设计规范中关于颜色还提及了一点:要关注到色盲用户,避免仅仅使用红绿或者橙蓝等颜色组合来区分两个状态或者值。

◆ 3.3 控件的6个差异

iOS按照用户浏览历史顺序来进行返回操作,Android则是根据应用的逻辑层次来进行操作。

5.弹窗(警告框)对比

弹窗用于提示用户做一些决定,或者给予用户一些额外的信息。在MD规范中,一个弹窗包含这三部分:标题、内容和事件。各组件之间的距离如下图。

弹窗的内容形式并不局限在文本,其他UI元素也可以构成提示框的内容。

◆ 3.5 WAP和PC的差异

越来越多的App中也会嵌入WAP页面的设计,但H5(WAP页)在进行复杂功能和交互方面给用户的体验不如原生设计好。这时候需要考虑关于WAP页面的设计能否在技术上实现,需要提前与产品经理、技术人员沟通。

◆ 第5章 定制弹出层体验设计

弹出层的设计和体验在产品中非常重要。优秀的弹出层总是及时提醒和引导用户操作,却不让用户太过注意到它的存在。

◆ 5.4 弹窗设计的6个原则

带着找解决方法的心态去体验竞品,思考设计背后的逻辑。

◆ 6.1 生活中的情感化设计

为了节省每一分钱,这些外来务工人员都不舍得打电话回家。所谓幸福,对他们而言,就是能听到家人的声音。了解到实际情况后,迪拜可口可乐公司联合扬罗必凯广告公司开发了一款可以用可乐瓶盖当通话费的“hello happiness”电话亭装置,把这些电话亭放到工人们生活的地区,每一个可口可乐瓶盖都可以免费换来三分钟国际通话时间。小小的一个改变,却让很多人在情感上得到满足。

◆ 7.2 列表类型

7.2.1 功能列表

图标加文字的列表样式最符合列表的本质样式,即图文信息+操作引导。图标式列表大多在二级功能处使用,例如App中的个人中心页,iPhone手机的设置页等。

一般来说,人们对图形、颜色、方位等信息的识别速度高于文字内容。

功能上,按图像信息对用户的重要程度,依次是图文、双卡、大图,图像区域更容易影响用户挑选信息;图片越大,用户就越容易进入沉浸式阅读,所以适用于图片导向类列表。

瀑布流的流畅体验与海量匹配用户信息的优点更适用于没有明确目的的用户,以休闲娱乐为主的社交型产品,feed流的推荐都是模糊匹配的结果,广阔撒网为用户找到感兴趣的内容,再根据用户点击行为推荐更多匹配信息,留住用户。

翻页的间隙,还可以给用户提供短暂的停顿和休息时间,缓解大脑的认知负担和疲劳感。所以内容复杂有认知负担的信息更适合分页展示。但翻页这个体验也有缺点,就是容易流失用户,会轻微打断用户思维,从浏览的体验中抽离出来,点击下一页后,还需要等待内容加载,所以翻页控件的体验和加载速度就是留住用户的关键。

一般横向放置5~8个列表组是合理的。

相比水平滚动列表,垂直滚动是最自然和最快速的。垂直滚动让用户浏览内容更加高效。因此,在所有的屏幕上使用垂直网格是有意义的。

◆ 7.3 使用列表时遇到的问题

费茨(Fitts)定律的“当前位置离目标位置越近,需要的时间越短”。

格式塔原理之接近法则,即将相似的、有关联的信息尽量摆在一起

◆ 第8章 轻量化设计

每个用户的痛点都是机会,在移动互联网上半场,找到了用户的痛点就找到了打开市场的钥匙,切入点找不到所有战略都是空气,每一个痛点都能造就一款产品。大量显而易见的痛点等待着解决,一夜间,大量App迅速崛起,以排山倒海之势席卷了生活的方方面面。从社交、地图、音乐、安全、浏览器到视频、电商以及后来的打车、外卖等App,几乎满足了用户在生活中的所有需求。

◆ 8.4 如何做到轻

信息结构轻量、直观不仅可以突出内容本身,还能减少用户对信息机构和逻辑的理解成本,缩短用户获取信息的路径。尽量避免过多的页面跳转,合理使用弹层、模态模式为浏览操作减负,避免用户在浏览过程中迷失,使体验更加流畅自然。

8.遵循用户操作习惯

不要轻易颠覆用户的使用习惯,否则会增加用户的认知成本,甚至会因此放弃使用你的产品,用户在第一次接触一个App的时候会利用已有的经验和长期养成的习惯来认知操作。比如返回按钮固定在左上角、下拉即刷新、自上而下的浏览和双击图片可放大等,虽然设计渴望创新、与众不同,但要权衡挑战固有的习惯是否值得,因为用户接受新事物的学习成本非常高。既然这样,能否断定现有的习惯都是有利于用户的呢?这需要设计师深入到问题场景中去判断、权衡利弊。

◆ 第10章 聚焦设计的3大原则

“只要专注于某一项事业,就一定会做出使自己感到吃惊的成绩来。”

——马克·吐温

设计是为用户提供更好的服务,产品经过设计变得更人性化,吸引更多的用户,从而使企业也能从中获取商业价值。大家都是在做产品,产品的核心功能也一样,为什么有的产品做得风生水起,有的就被时代埋没呢?

◆ 10.1 沉浸式设计

满足心流状态的四个前提:

·内在奖励机制;

·清晰无障碍的目标;

·即时反馈结果;

·匹配的技能水平和挑战。

◆ 10.2 高效设计的10个原则

遮罩弹窗在产品中被称为模态

◆ 10.3 简单思维

Web端体验的三大定律:

第一定律:别让我思考。

第二定律:点多少次没关系,只要点击都是无须思考、准确无误的选择。

第三定律:去掉每个页面上的一般的文字,然后把剩下的文字再去掉一半。

PS Play的软件,可以在手机上实时预览到PS里面正在进行的设计图,使用起来还超级简单,一键连接好就可以实时同步设计图,没有学习成本,大大方便了设计师。

◆ 第11章 设计师的6个禁忌

设计师要始终保持天马行空的想象力和充满激情的创造力,设计要永远创新;然而设计能力不是一个优秀设计师的全部,理性的工作方法会让设计成果得到更多的认可,也能让设计师在工作中获得成就感。一个好的设计师不仅要有高超的设计水准,更要具备理性的工作方法。在工作中知道什么可为、什么不可为、怎么为……下面总结了如下六条设计师常犯的工作禁忌,希望能给来人以警示。

◆ 11.2 不要忘了你才是设计师

在设计过程中,设计师一方面要保证设计专业水准:要始终秉承有理有据的设计理念,让设计立得住脚,保证设计的专业性;另一方面要过需求方和用户那一关:要学会倾听建议,选择性地接收合理的意见,进行完善。

◆ 11.4 不要只顾着埋头苦干

设计师兴趣是否广泛,有没有走出去研究的热情;是否有深入阅读的习惯,有没有形成系统的设计思维。

一个只知道待在电脑面前努力赶稿子的设计师没有办法持续地做出好设计。

设计是一门很综合的学问,除了设计技巧本身,设计师的产品思维、兴趣涉猎、市场洞察能力都会对设计起到正向促进的作用。设计师要积极创造走出去的机会,多关注时事热点,培养除了设计之外的兴趣爱好;走出去看看展馆里、市场上的好设计,保持走在潮流的前沿;和不同的人群交流,和用户面对面的交流,了解用户的想法,每个人都可能会给到你不一样的启发,这样才能做出接地气的好设计。

◆ 12.2 解构用户场景

用户的场景可分为Who(用户)、Where(空间)、When(时间)、Why(动机)、Service(服务)这5个组成部分。

在特定的空间和特定的时间中,我们的产品应该能够提供特定的服务以满足用户特定的需求。

◆ 12.4 用户场景的匹配

产品优化迭代后,注册页的阻碍不在了,用户优先获取到信息,想参与互动,才会提示要注册用户才可以,这样很合理,场景搭配也对,只在用户需要用的时候才出现注册界面,注册的转化率大大提高了,用户获取到了内容所以留存率也提升了。

◆ 12.6 测试验证产品的使用场景

UI测试:主要比对开发界面和设计界面还原度,体验交互是否实现。

A/B Testing的形式做灰度发布,也就是说,新页面不会直接替换旧页面,新页面只有1%的随机概率会被访问到,99%的用户访问到的还是旧页面,这样我们可以统计所有新页面访问数据进行分析。

接下来,项目组开始讨论问题的优化方案。产品经理继续捋出需求,设计师重新优化设计方案,就这样反反复复经历了几轮优化迭代,直到A/B Testing灰度发布的各方数据起稳回升,才最终替换掉老版本,也就是我们现在所访问到的搜狐网首页,如上右图。这个版本独立强化了频道内容在首页中的分布,增加了更多的内容交互,各频道转化率也得到了相应提升。如果第一次改版直接上线,后果将不堪设想。

这次改版真正彰显出测试对产品的重要性。用户使用产品的场景完全决定了产品设计的方式。移动端Feed流的阅读体验方式确实不适合搜狐的门户,因为用户的使用场景是在电脑上,屏幕更大、操作空间更大、使用更自由、室内环境居多、网络环境更好,这些场景决定了用户的体验方式。

◆ 13.1 团队管理工作

优秀的设计团队不是靠管束形成的,更多是因管理者塑造的团队设计氛围自然形成的。因为设计的本质就是向往自由、颠覆创新、抒发情感的综合体现。

以8个人的设计团队来说,在人员分工安排上,起码应该有3位高级设计师,这样才能保证团队可以独立完成大型项目,有条理地对接、沟通好项目进程中的细节问题;需要拥有1位擅长手绘图形的设计师、1位擅长产品交互设计的设计师;另外需要有3位中级左右的设计师,各自以3位高级设计师作为导师,他们可以解决大量繁复、设计难度相对低一点的设计需求。人员的权重设定好后,对成员的工作分配也就得心应手了。

定期分享不仅可以帮助设计师提高个人的思辨能力,而且增加了团队内专业思想的交流碰撞。

◆ 13.2 激励点心

调节组内环境氛围,可促使组内良性发展。

◆ 13.3 诊疗团队的疑难杂症

CI(企业形象),CI由MI(理念识别)、BI(行为识别)、VI(视觉识别)三部分组成。

制定规范时最重要的原则就是不要把设计用条条框框限制死,对细枝末节都加以规范,我们应该分大模块来制定,保持规范的灵活性。

不应该是一两个设计师参与制定规范,应尽量让全员参与到规范制定中来,规范的制定优劣很能反映出团队的整体的水平。管理者能否组织协调好整个制定过程非常重要。


image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容