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/

相关文章
|
搜索推荐 UED
个性化定制界面和极简版原装界面各有优缺点
个性化定制界面和极简版原装界面各有优缺点
269 0
|
XML 编解码 开发工具
《移动互联网技术》第六章 资源管理: 掌握定制控件样式、界面主题、可绘制资源程序的编写方法
《移动互联网技术》第六章 资源管理: 掌握定制控件样式、界面主题、可绘制资源程序的编写方法
57 0
|
23天前
|
敏捷开发 监控 数据可视化
项目仪表盘的妙用:让管理更清晰、更高效、更智能
项目仪表盘是现代项目管理中的重要工具,提供实时数据、多维分析及高度定制的可视化界面,帮助管理者快速决策、优化资源分配、提高团队协作效率和项目可控性。推荐的工具包括板栗看板、Jira、Trello、Asana 和 ClickUp,它们各有特色,适用于不同规模和类型的团队。
67 4
|
6月前
|
UED
软件开发常见流程,好的用户体验,智能引导助手,介绍软件相关操作,会画个键盘,对键盘的相关键进行标注,效果动态展示图怎样画????弄一个图标,相关介绍
软件开发常见流程,好的用户体验,智能引导助手,介绍软件相关操作,会画个键盘,对键盘的相关键进行标注,效果动态展示图怎样画????弄一个图标,相关介绍
|
5月前
|
图形学 C#
超实用!深度解析Unity引擎,手把手教你从零开始构建精美的2D平面冒险游戏,涵盖资源导入、角色控制与动画、碰撞检测等核心技巧,打造沉浸式游戏体验完全指南
【8月更文挑战第31天】本文是 Unity 2D 游戏开发的全面指南,手把手教你从零开始构建精美的平面冒险游戏。首先,通过 Unity Hub 创建 2D 项目并导入游戏资源。接着,编写 `PlayerController` 脚本来实现角色移动,并添加动画以增强视觉效果。最后,通过 Collider 2D 组件实现碰撞检测等游戏机制。每一步均展示 Unity 在 2D 游戏开发中的强大功能。
239 6
|
5月前
|
开发框架 API 开发者
Flutter表单控件深度解析:从基本构建到高级自定义,全方位打造既美观又实用的移动端数据输入体验,让应用交互更上一层楼
【8月更文挑战第31天】在构建美观且功能强大的移动应用时,表单是不可或缺的部分。Flutter 作为热门的跨平台开发框架,提供了丰富的表单控件和 API,使开发者能轻松创建高质量表单。本文通过问题解答形式,深入解读 Flutter 表单控件,并通过具体示例代码展示如何构建优秀的移动应用表单。涵盖创建基本表单、处理表单提交、自定义控件样式、焦点管理和异步验证等内容,适合各水平开发者学习和参考。
121 0
|
5月前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
133 0
|
7月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
227 1
|
7月前
|
UED
带您一步步构建一个具有复杂布局的电商详情页,涵盖页面结构规划、样式设计以及交互效果的实现
【6月更文挑战第14天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先,规划页面结构,包括顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。接着,进行样式设计,注重色彩搭配、字体选择、布局与间距以及图片处理。例如,使用固定顶部导航栏,轮播图展示商品图片,分块展示商品信息和评价,以及设计相关商品推荐区。最后,实现交互效果,如图片放大、添加到购物车按钮、滚动监听和评论互动,提升用户体验。实际开发时需根据需求和规范进行调整,保证跨设备兼容性。
128 1
|
移动开发 数据可视化 前端开发
基于自然流布局的可视化拖拽搭建平台设计方案
LowCode 是高效、高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向——基于自然流布局的可视化搭建平台.
955 0