2016年第6本:简约至上--交互式设计四策略

简介:

看此书是想把勘探管理中心的网站精简一下。全书也很简短,180多页,除掉一半的图,文字估计不到100页。全书内容概括为8个字:删除、组织、隐藏、转移。

豆瓣评分8.4:https://book.douban.com/subject/5394309/ 

图灵交互式设计丛书当前有28本(真够多的):https://book.douban.com/series/5907

第1章 话说简单

复杂的产品不可持续:增加的功能越多,就越难发现真正对用户有价值的新功能。

在做技术产品的设计时,至少有三个角度:管理人员、工程师和用户。【我们的用户主要是管理部门的领导,但他们更不喜欢复杂的网站设计】

第2章 明确认识

要理解用户,首先需要走出办公室,先到用户要使用你的软件的地方去做个调查,要知道他们在使用你的软件的时候经常会发生什么事情。如果是在开放的办公室中,会存在着大量的相互干扰:谈话、电话、短信、邮件。【我们的移动端应用将更多的应用在会议室中】【看来得先到勘探管理中心多找几个人聊聊】

用户有三种:专家型用户(愿意探索你的产品或服务,并且会给你提出各种改进建议)、随意型用户(只是随便试试)、主流用户(不是因为你的技术而使用你的产品,而是为了用你产品完成他的某项任务)。有时候,最好对专家型用户视而不见。【我们的软件用户本来就不多,这条可不适用】,要为主流用户而设计。

主流用户 专家用户
立即把工作做完 先设定自己的偏好
认为容易操控最有价值 在乎操控得是不是很精确
想得到靠谱的结果 希望看到完美的结果
害怕弄坏什么 有拆解一切刨根问底的冲动
觉得只要合适就行 想着必须精确匹配
想看到示例和故事 想看原理

考虑一下“用户在做什么?”。讲故事(时间、地点、人物、干什么、怎么样、为什么),描述用户体验。【设想勘探管理人员到了办公室,打开电脑,浏览勘探网站……】

要想简单,务必把目标定得高些再高些,不要使用常规的可用性目标。【能不能只点击链接一次,就得到用户关心的内容?能不能一次点击都不要,直接就在首页上显示?重点井已经打到目的层段了,是不是直接把井的生产动态推送到管理人员的手机上?】

拿出一个简洁、清晰、完整的描述,甚至是一句话的描述。

把核心的设计理念分享给团队中的每个成员。

第3章 简约四策略

以简化遥控器为例,用四章分别讲四个策略:删除、组织、隐藏、转移。

删除----去掉所有不必要的按钮,直到减到不能再减。

组织----按照有意义的标准将按钮划分成组。

隐藏----把那些不是最重要的按钮安排在滑盖之下,避免分散用户注意力。

转移----只在遥控器上保留最基本功能的按钮,将其它控制转移到电视屏幕上的菜单里,从而将复杂性从遥控器转移到电视。

交互式设计四策略

 

第4章 删除

删除不必要的功能;注意核心体验;残缺的功能别留了,直接删除;别猜测用户可能会这样、可能会那样【功能就是这样慢慢多起来的】;要倾听客户的意见,但决不能盲从,想在任何时候取悦所有用户都是不可能的;排定功能优先级。

一个精简网站的例子,值得我们学习。别给用户太多的选择、别分散用户的注意力、设定聪明的默认值、别设置太多的选项。

交互式设计四策略-改版前

上图是改版前,改版后是下图。

交互式设计四策略-改版后

删除引起视觉混乱的元素:

  • 使用空白或轻微的背景色来划分页面,而不要使用线条
  • 尽可能少使用强调。
  • 别用粗黑线,匀、浅色的线更好。
  • 控制信息的层次。不超过3层(标题、子标题和正文)
  • 减少元素大小的变化。
  • 减少元素形状的变化。

删除文字:把每一页中的文字删掉一半,然后把剩下的再删掉一半。

精简句子:使用介词、不使用动词的正在进行式、用主动句式,别用被动句式、删掉索然无味的开头,开门见山。减少废话。

注意别删减太多,失去了控制,苹果店中的电梯就是一个反面教材(一个按钮也没有,让人无助)。

第5章 组织

“7±2法则”,一般别超过6组。

使用大众普遍接受的分类标准。

先别考虑搜索功能:先对内容有效地组织,然后再考虑如何设计搜索。【如果用户喜欢用全文搜索,看来是网站的分类设置得不合理】

按照时间、空间通常是用户熟悉的组织方式。

第6章 隐藏

隐藏那些“不常用但不能少的功能”。【“个性化设置”这个功能最适合隐藏】

把信息分为小块,分阶段展示。

适时出现。

给出一些提示和线索,让用户能找到隐藏的功能。

第7章 转移

在设备之间转移。【把有些功能放在手机端实现,有些功能放在PC端】

向用户转移。【“自定义文件夹”之类的需求,让用户自己去设置吧】

有时,让某个功能具有多种用途也是一种简化之道。

简化的最高境界,应该是专家和主流用户都会感觉它非常好用,如菜刀、钢琴。【菜鸟和专家用的工具都是一样的,生成出来的作品却天壤之别。】

非结构化数据的处理。【让用户能够方便地加载数据!!!】

第8章 最后的叮嘱

顽固的复杂性:任何应用程序都会有一些无法消除的复杂性。关键的问题在于:谁会面对这些复杂性?此时,往往不是问“怎样才能把这个功能设计得更简单”,而是问“到底应该把这个复杂性放到哪里?”

花上半天时间设计一个解决方案,解决看似微不足道的小问题,也许就能把成千上万次愤怒的用户消弥于无形。

原书目录:

交互式设计四策略_1

交互式设计四策略_2

交互式设计四策略_3

交互式设计四策略_4

本文转自申龙斌的程序人生博客园博文,原文链接:http://www.cnblogs.com/speeding/p/simple-and-usable.html,如需转载请自行联系原作者

http://www.cnblogs.com/speeding/

相关文章
|
10月前
|
搜索推荐 UED
个性化定制界面和极简版原装界面各有优缺点
个性化定制界面和极简版原装界面各有优缺点
220 0
|
9月前
|
XML 编解码 开发工具
《移动互联网技术》第六章 资源管理: 掌握定制控件样式、界面主题、可绘制资源程序的编写方法
《移动互联网技术》第六章 资源管理: 掌握定制控件样式、界面主题、可绘制资源程序的编写方法
31 0
|
18天前
|
UED
带您一步步构建一个具有复杂布局的电商详情页,涵盖页面结构规划、样式设计以及交互效果的实现
【6月更文挑战第14天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先,规划页面结构,包括顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。接着,进行样式设计,注重色彩搭配、字体选择、布局与间距以及图片处理。例如,使用固定顶部导航栏,轮播图展示商品图片,分块展示商品信息和评价,以及设计相关商品推荐区。最后,实现交互效果,如图片放大、添加到购物车按钮、滚动监听和评论互动,提升用户体验。实际开发时需根据需求和规范进行调整,保证跨设备兼容性。
42 1
|
18天前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
53 1
聊天框(番外篇)—如何实现@功能的整体删除
上一篇文章中,我们已经初步实现了聊天输入框,但其@功能是不完善的,例如无法整体删除、无法获取除用户名以外的数据(假设用户名不是唯一的)。有问题就要想办法解决,在网上百度了一圈后,倒是有一些收获。本文就着重解决@的整体删除以及获取额外数据。
987 0
聊天框(番外篇)—如何实现@功能的整体删除
|
11月前
|
前端开发 区块链
合成游戏看广告视频盒子系统开发方案逻辑/详细案例/功能设计/需求步骤/规则项目/源码说明
在Solidity中,与外部合约交互可以通过调用函数来完成。这些函数可以是在Solidity合约中定义的函数,也可以是在外部合约中定义的函数。调用外部合约函数需要知道合约的地址和函数的签名。
|
移动开发 数据可视化 前端开发
基于自然流布局的可视化拖拽搭建平台设计方案
LowCode 是高效、高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向——基于自然流布局的可视化搭建平台.
862 0
|
JavaScript 数据可视化 NoSQL
D3.js 力导向图的显示优化(二)- 自定义功能
在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能。
795 0
|
前端开发 数据可视化 JavaScript
做可交互的统计图表,这套图形语法不容错过
“一图胜千言”,是最直观的数据可视化魅力。以图表来传达和沟通信息,其效率远超枯燥乏味的数据表达。