十五的笔头

🧠脑子是个好东西

0%

「臭鱼」深大体验设计

更新至第6课 对象模型。。。


Class 1 .操作

五项要求:

  • 操作前
    1. 可识别
    2. 结果可预知
  • 操作中
    1. 及时反馈
  • 操作后
    1. 结果有明示
    2. 可撤销

模型:

操作模型


Class 2 .信息表达

  • 服务员设计法(形式追随内容)

    1. 概括信息
    2. 信息排序
    3. 使用界面语言翻译
  • 界面语言

    1. 文字(大小、位置、颜色、粗细 ) 背景(颜色、样式) (图表、图像)
    2. 排版布局
    3. 页面间跳转
    4. 互动操作
    5. 白底黑字
    6. 三个距离 边距 > 行距 > 字间距
    7. 技巧 结构化
    8. 禁忌 不要惊叹号,不要专业术语,不要冗余

Class3.数据可视化

饼图

  • 表现多个项的占比
  • 善于表现某个极大树枝
  • 较接近的值之间不宜比较

雷达图

  • 展现一个主体多个维度的值
  • 4-8个维度
  • 每个维度可排序,值有限
  • 每个维度的单位可不相同
  • 单位精度如果过高不易于维度间比较
  • 可多组叠加用来比较

柱状图

  • 适用于较小的数据集
  • 可横可竖
  • 用于各项之间的对比
  • 可成组
  • 横坐标连续不连续皆可
  • 时间维度通常是横坐标

柱状图-直方图

  • 横轴需要连续,宜等距
  • 面积表示量值

折线图

  • 看趋势
  • 看异常
  • 非常多的数据
  • 横坐标是连续型的维度
  • 时间维度通常是横坐标

Class4.生手与熟手

现实交流原则

产品的内容表达与现实生活中的表达,评价标准是一致的。

第一性原理

是一个最基本的命题或假设
不能被省略或删除,也不能被违反

用户分布

用户分布

生手产品:携程/银行App
熟手产品:Wechat/QQ/Weibo

熟手产品 - 帮助生手

  • 优化帮助中心
  • 优化新手指引
  • 事先写上内容
  • 新手教学持续穿插+复杂度逐增

生手与熟手

  • 按钮展现:图标/文字
  • 颜色表意: 无效/有效
  • 位置信息:无效/有效
  • 提供功能:有形/无形
  • 任务引导:有/无
  • 展现信息:明确/高效

Class5. 设计元素

参考链接 :
http://mp.weixin.qq.com/mp/homepage?__biz=MzA4ODQ5MjYyMQ==&hid=1&sn=7ecd039ba72149b0d419927703d54135#wechat_redirect

1. 文字链接与按钮

远古的PC web时代,文字链接标准的表现:蓝色+下划线。用于表示一个超链接,指向一个特定页面。按钮被定义为是具备特定功能的操作器,比如:下载、提交表单、删除…
这样的区分是基于技术模型的,即,功能上,技术上有着本质的不同,所以表现上截然不同。
当今,设计逐渐成熟,文字链接与按钮也基本不再明确区分了。达到可识别,结果可预知,表达主次的效果即可。

  • 源于技术上的本质不同
  • 可识别,结果可预知,表达主次

2. 二次确认

需要用户十分慎重的操作,例如:删除,可以使用二次确认,避免用户误操作。描述操作带来的后果,小心措辞
二次确认最常见的形式是弹出窗口,但如果可以不使用模式化的弹出窗口,更好(IOS通知栏删除操作)。
即使提供了二次确认,代操作后如果需要,仍旧应该提供可撤销的功能,例如:删除后,可以找回已删除的文件。

  • 需要用户十分慎重的操作
  • 描述操作带来的后果
  • 小心措辞
  • 不模式化更好
  • 仍旧可撤销

3. 列表

列表是一篇篇详情叠落在一起。
列表中的每一项应具可以等量齐观。
一篇详情中的摘要显示于列表中
详情中甄选摘要的依据:那些有助于用户判断应打开哪项的信息。

  • 模型:纸张一张张叠落
  • 列表项里的更多/更少的内容

4. 页签 Tabs

每一个页签项包含“当前态”“非当前态”两种状态,需要不同的表现样式。对于PC网页,通常还需要再增加一种hover(鼠标移到其上)状态。
点击每个页签应对应在当前页面中打开此页签的页面,不应跳离当前的Tabs模式
各个页签之间应存在一定的可理解的类比关系,但也不必须要求1=2+3+4+5,也不必须追求各个页签内的内容彼此不重叠。即,Tabs只是一种界面表现形式,它并不要求其中的内容必须存在某种特定的逻辑关系。

  • 当前/非当前
  • 栏目之间的关系
  • 不应离开

5. 框架 Frame

  • 嵌套frame

    在页面中嵌套frame,可以方便的在局部呈现大量信息,不需要占用太多的页面空间。在PC网页这种比较大的界面上,出现frame更多。但嵌套frame也有一些负面问题:

    1. 窗口套窗口,不易理解。如果是一个完整的页面,用户可以理解为这是一张长长的报纸,显示屏是窗口,滚动即可透过窗口看到上面或下面的内容。在这张报纸上再剪出个窟窿,能看到更后面的一张报纸… 这让认知更复杂了。
    2. 小小的误操作。原本在用鼠标滚轮滚动页面,当frame区域移至光标位置后,再滚动滚轮将是滚动frame页面。
  • 触屏上的frame

对于触屏,上面说到的小小的误操作影响会更大。
屏幕更小,而手指又远比光标大,当屏幕中出现嵌套的frame时,想继续滚动整个页面会十分困难。所以触屏上创造出了横向滚动。对于嵌套在页面中的frame小页面,是横向滚动的。App Store中广泛使用了这种横向嵌套的frame。
我们常见的大图轮播,也可以被看做是这样的横frame。但这种横向滚动的frame却很难被用在PC网页上,因为鼠标没有横向滚轮。

  • 双面板

    在PC网页或pad这些比较大的界面上,甚至可以使用frame将整个页面分成多个窗口,典型的例子是:猫扑的大杂烩PC网页版,至今仍旧保留着左右两个窗口的效果。这种两个窗口的式样也被成为“双面板”,两个面板彼此独立滚动。
    在更古老的网页、软件设计中,这种使用frame将一个界面切分成多个独立窗口的方式更为常见,因为可以更大限度的利用页面空间,承载更多信息,但这种式样对用户却是不够友好的。多个独立的窗口同时呈现,让用户更难对产品界面形成一个具象的认识。与上面提到的认知困难类似,多个独立滚动的窗口,就很难形成类似的心理模型了。因此,越来越少的产品使用这种双面板,多面板了。
    能在较小的局部空间里展示更多的内容,嵌套frame有其价值,相比于“点击查看更多”,嵌套frame更容易操作(滚动比点击更易操作)。但嵌套窗口带来的认知负担,想要靠界面设计手段来缓解,不太容易。

  • 节省空间

  • 窗口套窗口,不易理解
  • 对滚动操作不友好

6. 向下展开

  • 明确是展开/收起 谁
  • 可方便的收起
  • 位置固定*

7. 向导式导航 wizard

  • 用于复杂的流程,量大且重要的信息,新手教程,不熟悉的操作
  • 顶部的导航不可点击
  • 每一步是对一个内容的操作
  • 步骤不是越多越好

8. 翻页页码

  • 通常用于内容量很多的列表,将列表内容分页展示,避免列表无限制的长
  • 通常空间不足以显示出所有页的页面,只显示当前页临近的前n页和后n页
  • 为了能实现快速跳转到第一页或最后一页的能力,可以始终显示第一页和最后一页的页面,也可以使用“<<”“>>”按钮。
  • 为了更快速的跳转到特定页,还可以增加“跳转到[ ]页”功能。绝大多数时候,全部列表内容是不断增加的,所以,列表中的某项并不能固定在特定的页内,比如:某条新闻昨天是在第2页的第一条,今天可能已经在第8页了。即,用户并不能通过记住页码快速找到某项内容,翻页页码提供不了这种能力。
  • 目前,触屏设备更多的采用向下滑动屏幕则加载更多的方式,代替掉了翻页页码。因为对于触屏设备,翻页页码每个数字的热区通常太小了。但翻页页码仍旧有独特的价值。翻页页码的价值在于粗略的导航整个列表,比如,列表全部内容有200项,每页显示20项,共10页。用户可以点击第4页,快速跳转到61—80项。这比触屏的“向下滑,加载更多”效率要高很多。
  • 即使不考虑技术上的局限,一个相对长的列表也仍旧有好处:在一张大纸上看20项内容,总好过在4张小纸上,每张纸5项内容。当用户想要回头看之前的某项内容时,会回忆“是很靠前的内容”,而如果要用户给出明确的判断是“6-10项”中的某项?or“11-15项”中的某项?这是更难的。人的记忆并不是那么精确的,而页码是精确的,过度的使用页码避免滚屏并不好。
  • 避免了列表无限制的长
  • 显示临近的页码
  • 第一页和最后一页始终显示
  • 可使用跳转到XX页
  • 触屏改用「向下滚动」
  • 为了不滚动而翻页,不可取

9. 搜索器

  • 不要提供分类
  • 全局的搜索更好
  • 当前热门、关键字联想、搜索结果

10. 表单 From

  • 提交/取消,不要应用、重置
  • 不是普通的内容展示
  • 提交/取消的措辞
  • 即时生效的单个表单原件
  • 避免嵌套
  • 取消有二次确认

11. 单选按钮 Radio Button

  • 多项之中选一项
  • 必有一项被选中
  • 不宜初始为空

12. 复选框 Check Box**

  • 多项之中可选若干项
  • 多项之间不要求性质相似
  • 初始状态选中不选中皆可

13. 开关

  • 语义:这项功能,开启/关闭
  • 功能描述要小心
  • PC上也会用复选框当作开关

14. 下拉菜单

  • 是一组收起来的单选项
  • 下拉列表中是全部备选项
  • 可提供手动输入
  • PC Web上常见 移动端很少用

15. 滚轮

  • 备选项量大
  • 需快速滑动
  • 适合有序的备选项

16. 输入框

  • 框内缺省文字可用于描述
  • 移动端样式比较不容易识别

Class 6 .对象模型

Welcome to my other publishing channels