《以匠心,致设计:网易UEDC用户体验设计》读书笔记

写在前面:喜欢网易的产品,用的顺手,感觉没有多余的杂乱功能却能做到想要的都有,另外一点很重要的是看着每一个页面都感觉温馨。最近在用“网易蜗牛阅读”读书,体会尤甚。正想了解他们是怎么做到的时候,发现了这本书。

内容简介:

主要是设计师角度,讲述了日常工作中所涉及到的用户引导、色彩搭配、品牌设计、体验设计、信息层次、设计规范等内容。

用户引导

其中用户引导部分说明的比较详细,从用户引导目的、用户引导类型、周期、强弱、引导三要素等方面以具体例子说明。

引导目的

对用户来说可以降低学习成本、快速上手产品等;对产品而言,意义在让用户快了解和使用产品,缩短探索周期;吸引用户发现新功能或操作特定对象;提前给予用户帮助,提升产品使用的愉悦度。

引导类型

  • 信息提示类(例如小红点未读消息)
  • 功能提醒类(例如百度云盘的文件夹功能提示)
  • 操作引导类(分为强制性和非强制性,强制性主要用户用户登录注册激活等相关流程,这些流程需要验证身份才能继续操作;非强制性的操作引导多为鼓励用户操作,如资料完善、分享转发等)
  • 内容推广类,最常见的为产品中植入的广告。

用户引导三要素

  • 目的:想要达到的目的?用户得到的好处?产品得到的好处?
  • 用户:目标用户是谁?新/老、活跃/轻度用户?
  • 场景:被引导用户的使用场景?

引导的生命周期

引导的生命周期可以分为触发、展示、消失。

  • 触发 ,即引导出现的时机和方式。打开程序触发?达到特定页面触发?用户操作制定功能触发?到了某个时间点或达到某个指标后触发?
  • 展示,引导展现在用户眼前的方式。例如游戏中使用互动性强的教学方式引导。
    -消失,即结束整个引导生命周期的方式??煞治远Ш捅欢?。

引导的形式

  • 引导页:下载APP/更新完成,第一次打开后,向用户展现产品中的功能和操作方法。信息要简明扼要、中心明确。
  • toast提示:轻量级提示,通常作为功能操作后的反馈??捎锌晌藁蚧岱锤闯鱿郑⒁庥镅跃?。
  • 气泡/浮层:量级轻但目的性很强的引导方式,一般为半透明浮层结合文案的设计模式。通常是非模态的,显示3-5秒后自动消失;部分重要功能也用模态浮层,需要用户明确操作后才能隐掉。
  • 页面遮罩:比较强势的引导,一般遮罩为半透明,在此图层上通过各种图形结合被盖住的界面内容,引导用户聚焦到重要的信息。遮罩图层无法自动消失,需要用户操作后才能隐掉。
  • 嵌入式(局部嵌入/整体嵌入),例如用户最初使用APP时,许多界面为空状态,有必要将空状态纳入用户引导流程中。嵌入式引导可以让用户有所期待、体会到内容的重要性,满足用户获取内容的需求。
  • 操作提示 :通常用简短动画展示操作方法,也有用静态图片配以描述的方式。例如网易云音乐歌曲播放页面的查看歌词示意动效。
  • 互动引导式:通常比较隐蔽,在用户与产品互动过程中引导用户完成。常用有下拉刷新、底部上拉等手势互动?;褂杏镆羰淙牍讨械幕ザ?。
  • 弹窗:与遮罩引导类似,通常以文案搭配具体操作的形式呈现,可辅助搭配图片烘托主题。
  • 自体变形:元素自身发生改变,可配合动画效果,没有增加额外其他元素。例如天猫国际logo。

引导的强弱

通常 互动参与>视频/动效图文>静态图文>文字
可以从形式和频率上考虑引导的强弱。

注意事项

  • 保证引导有效性
  • 触发场景准确
  • 简单易懂,突出核心
  • 与产品基调一致

心得

  • 要用户引导方式首先要明确引导的目的和针对用户是谁,了解有哪些引导方式,才能设计好既能达到引导目的又对用户干扰较小的效果。
  • 目前我们公司的产品引导是否足够,是否有必要做一套适合的引导功能,以减少客服的工作量。

突破固有思维

印象比较深的一点是,对于小红点的处理。当给客户提示一个未读消息或提示时,点击小红点希望能够让用户最快的达到相应的位置,而不是需要一次次点击寻找。这里要吐槽一下支付宝的消息提醒,每次想点掉都要找半天,对于红点强迫真而言真是浪费时间。

图表设计

不止好看,要做到易读、易分析、美观且突出数据价值为一体。

图表的元素

图表设计过程

  • 明确数据指标
  • 为谁设计?用户想要什么?
  • 明确设计目标与价值
  • 规划设计方案,选择合适图表类型
  • 细化体验

设计原则

  • 删除无关元素
  • 弱化非数据元素
  • 合理组织分类
  • 强调重要数据

绘制设计稿

对产品而言,应该是原型稿(含交互)。

色彩搭配

色彩平衡,个人对色彩基础薄弱,需再学习基础后再总结。
按钮效果调整通过调整颜色明暗而不是通过调整透明度来实现。

品牌设计

公司发展到一定阶段要突出品牌的价值,所以在做设计成熟之后要抽取公司或产品品牌价值。
首先要品牌分析,分析抽取出公司/产品品牌性格、品牌关键字。
文章以网易严选为例,从品牌提取出的设计语言为:细节化、场景化、简约化。
以严选为例,从logo、版式设计、图表设计、动效设计、图片设计等方面介绍如何进行的品牌设计。

信息层次

稳重以产品详情页设计为例,讲述了如何利用十字法构建页面中的信息层级。
也就是将页面中要展现的内容抽取出来分为四个象限中,然后根据重要程度等安排轻重/大小等。

设计规范

设计规范通常是针对设计师合作的情况下,为了保证输出的风格和形式统一。

官网设计-B端产品设计实践

反思:当时在做官网的时候考虑的太少,未明确具体要给哪些客户哪类人群看,要给客户突出什么。

总结

这本书虽然说是写给设计师的,但其中的很多方法是通用的,对产品而言更有意义。

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

推荐阅读更多精彩内容