PPT:
介面设计 （Interface Design）
接口设计 不仅适用于 � 网页设计�还适用于….
Web App 和 Native App，哪个是趋势？(知乎)
Native App
image.png
Web App
image.png
采用HTML5实现了接近Native的体验效果
image.png
"按设计"
既然物体不能为自己说话, 就必须让它们做得看起来像是啥，做啥
—拉尔夫．卡普兰 Ralph Caplan,
今日（前題）
网络技术框架平台, 提供和支持的东西远远超过基本的链接和基于表单的交互
传统原生应用程序（native APP）專有的功能，现在都可以在浏览器中进行
复杂介面的新力量意謂著新技能新職位的產生：交互设计（interaction design）
本周内容
7.1 为媒介而设计 designing for the medium p.207
7.2 导航和找路 navigation and wayfinding p.214
7.3 交互 interaction p.230
7.4 信息设计 information design p.244
7.5 移动界面设计 mobile interface design p.247
7.6 企业界面设计 enterprise interface design p.251
资深产品经理，接口设计工具熟练
7.1 为媒介而设计 designing for the medium p.207
无死胡同頁 NO DEAD-END PAGES
直接访问 DIRECT ACCESS
简洁性和一致性 SIMPLICITY AND CONSISTENCY
完整性和稳定性 INTEGRITY AND STABILITY
反馈和对话框 FEEDBACK AND DIALOG
带宽和交互 BANDWIDTH AND INTERACTION
显示屏 DISPLAYS
用戶可能出現在任何页面上
如果您的小节页不包含指向主页或本地菜单页的链接, 则用户将被锁定在网站的其余部分，而连不到其他页面 (见图 7.1)。
用户进入站点时可能在任何页面上，因而需要即时提示，展示站点标识和 "您在这里" 标记。
image.png
无死胡同頁
请确保网站中的所有网页至少有一个返回主页的链接, 或者更好的是，提供主页链接以及指向网站其他主要部分的链接。除了用户界面的考量外, 这些链接对于搜索引擎的可见性至关重要。
网页内容管理系统 (如WordPress 和 Drupal) 提供了一个图形界面, 允许您在不需要了解 HTML 标记语言的情况下快速向页面添加文本和图形。
image.png
直接访问 DIRECT ACCESS
用户希望以尽可能最少的步骤获取信息。这意味着您必须设计一个有效的信息层次结构，以便用户通过菜单页找到页面所需的点击步骤数最小化。研究表明，用户喜欢至少提供有5到7个链接的菜单，用户们喜欢几页精心组织的选择项目，而不喜欢层次过多的过度简化菜单。得设计您的网站层次结构, 以便真正的内容从网站的主菜单页面，只需一次或两次点击就可达。
注意! 核心概念
Access - Accessibility
W3C 标准翻译
accessibility
p.375
可访问性，
（信息）无障碍/�親和力 [港台]
image.png
image.png
Ｗ３Ｃ 翻译
WAI-ARIA（可访问富互联网应用）wai-aria (Accessible Rich Internet Applications）
WCAG（Web内容无障碍指南）Web Content Accessibility Guidelines (WCAG) 2.0
简洁性和一致性 �SIMPLICITY AND CONSISTENCY
图 7.2
拉帕姆的季刊” Lapham’s Quarterly 使用古典美学（居中设计，低调但精致的排版，一个不显眼的界面)来产生一个安静的丶但功能性高的网站标识和主标题导航。有趣的是, 保守的字型丶排版和图像是安装在一个高度敏感的移动优先的现代设计框架，该框架於2014下半年推出。
image.png
完整性和稳定性 INTEGRITY AND STABILITY
image.png
反馈和对话框 �FEEDBACK AND DIALOG
通过图形设计丶导航链接丶和统一放置的超文本链接您的网页设计，应提供持续的视觉和功能确认用户的行踪和选项。反馈也意味着准备回应用户的询问和评论。设计良好的网站提供直接的链接供用户连系网站编辑或网站管理员。规划与您的站点的用户进行这种持续的关系对于企业的长期成功至关重要
带宽和交互 �BANDWIDTH AND INTERACTION
image.png
图 7.5 "第三世界" 地区的移动网络用户是目前网络受众中增长最快的部分。
image.png
带宽和交互 �BANDWIDTH AND INTERACTION
用户不会容忍长时间的延迟。研究表明，对于大多数计算任务，超过大约是十秒的门槛，用户感到挫折。
请检查您的网站日志, 以确保您对典型用户和地理位置和网络连接有所了解。如果您有许多国际用户，举例来说，在页面上大型图形的使用应更保守一些 (图 7.4)。
监视任何网站的可用性和响应能力
https://docs.microsoft.com/zh-CN/azure/application-insights/app-insights-monitor-web-app-availability
Web availability tests
https://www.uptrends.com/tools/uptime
显示屏 DISPLAYS
image.png
]
複習11
image.png
7.2 导航和找路 �NAVIGATION AND WAYFINDING p.214
城市规划
The Image of the City by Kevin Lynch
Orientation 定向
Route Decision 路径选择
Mental mapping 意向图
Closure 结局
界面设计 Interface Design
导航和寻路 Navigation and wayfinding
image.png
image.png
荷兰 代尔夫特
image.png
台北 101
image.png
澳门老城区
道路铺面设计
找路的四大核心内容
Orientation 定向
Route Decisions �路径选择
Mental mapping �意向图
Closure 结局
image.png
意向地图的五大元素
Paths 道路
Edges 边界
Districts 区域
Nodes 节点
Landmarks 地标
image.png
设计导航 Design Navigation
突出热门目的地 Menus highlight popular destinations
image.png
路径引路 Paths lead the way
——breadcrumb trails 面包屑路径
image.png
链接支持发现和探索 links support discovery and exploration
image.png
清晰的“味”使选择更容易 a clear scent makes choices easier
image.png
“信息的气味”�（theory of the “scent of information”）
理论起源于施乐帕洛阿尔托研究中心（Xerox PARC）那里的研究者们推测，人们面对一个庞大而复杂的信息空间时会成为“信息觅食者（”informavores”）与捕猎猎物的动物表現出同样的信息。用户挑选出的气味线索，挑那些闻起来像是他们想要结果的味道。他们跟随气味的踪迹, 如果气味变得更强，变得更加自信和渴望。如果他们失去了气味, 他们就会按原味踪迹折回, 再试一次。
边界和地标提供方向 boundaries and marks provide orientation
image.png
一致性使导航更容易
consistency makes navigation easier
image.png
搜索也需要导向找路
Search also needs wayfinding
image.png
全局导向找路的标题 Headers for global wayfinding
image.png
本地导向找路的菜单 Menus for local wayfinding
image.png
导航和定向的面包屑痕迹
breadcrumbs trails for navigation and orientation
7.4 信息设计 INFORMATION DESIGN p.244
信息学
围绕印刷信息所发展的图书馆索引和编目系统
书籍 vs. Web
页码丶索引丶目录丶甚至标题页成为人们预期书籍必有的特点。Web文档正在经历类似的，尽管速度更快的，演进和标准化过程。
不要因迷失在网页的新奇性中，而把编辑一致性丶商务沟通和平面设计的基本标准抛在一边。
设计信息
谁 Who
什么 What
何时 When
何地 Where
7.3 交互 INTERACTION p.230
image.png
image.png
重点：网站的二八法则
优秀的交互设计在于“克制”
用户更倾向于简洁、明晰的设计，而不是一堆功能的堆叠
明确你的产品（网站、APP）为哪类用户提供服务、明确什么是产品的最重要功能
二八法则 The 80/20 Rule
20%的网站功能占用了用户80%的使用时间
百度首页的界面很简洁，80%的用户打开百度使用的是搜索功能
image.png
Baidu提供的全部功能，可能只有20%的用户使用
image.png
模式提高可用性
网站设计了一种交互形式，如果这种形式合理、好用，能够使用户有良好的反馈，那么其他网站也可能采取这种交互形式。
这种交互形式成为一种模式，用户看见它就会与网站设计者有心照不宣的默契，因为这种模式已经在用户心中形成“思维定式”了。
不要试图去改变那种已经形成“思维定式”的模式，比如购物车功能总在页面的右上角、单击头像区域能够进入个人中心，等。
image.png
禁止缩捏放区域：形式凌驾于功能之上
网站设计永远在“形式”与“功能”两者之间取得平衡。记住一句话“功能决定形式”。
但实际情况是，很多设计将形式凌驾于功能之上了。比如，移动设备屏幕较小，用户需要用手指缩捏放屏幕以放大细节，但是移动设备中禁止缩捏放网页的设计，请确保你在形式好看（文字、排版）和用户体验之间取得了平衡。
再比如，去除网站中超链接的下划线。超链接原本的设计是字体变色的同时添加下划线，为的是让普通用户、色盲色弱者都能够在文本中轻易地分辨出超链接。但由于CSS允许设计者去除下划线，不少网站设计师为了视觉好看而改变了超链接的原有形态，这很容易导致用户在使用网站时花费更多的时间和精力在大片文本中找寻超链接。
提供交互组件 PROVIDING INTERACTIVE COMPONENTS
按钮 Buttons
菜单 Menus
输入 Inputs
切换 Toggles
框: WAI-ARIA (可访问富互联网应用套件)作为最后的手段
禁用捏缩放
悬停 hover
选项卡 Tabs
文字输入框 text input/area
组合框 Combo box
自动完成 Autocomplete
切换板 (Toggle) Panels
切换抽屉 (Toggle) Drawers
按键button
按键的目的是吸引用户单击/点击它，从而触发一个事件。
按键通常的形式有：
image.png
-
形象
image.png
-
以上二者的结合
image.png
image.png
image.png
菜单navigation
菜单是包含多种选择的列表。它既具有展示意义，即告知用户关于分类、选择的信息，同时具有功能意义，即让用户通过点击从一个页面到达另一个页面或是选择触发一种功能。
image.png
下拉菜单栏的触发List：
菜单栏常见的交互方式是点击后展示下拉菜单，下拉菜单中的选项皆从属于这个大的分类下，从而满足该分类的目标用户的需求。需注意，如果你的网站在电脑端和手机端使用的是同一个，不要将网站中触发下拉菜单的行为单独设置为“鼠标悬停”，因为这将导致使用键盘或触摸屏的用户无法触发下拉菜单。
分别在电脑和手机浏览器中打开腾讯视频 ，观察下图下拉菜单栏的触发方式
image.png
选项卡面板Tab：
选项卡面板也是菜单的一种。它的特点是通过鼠标悬停/单击切换不同的窗口，但用户始终是停留在当前这个页面中的。
参考“毒霸网址大全”
image.png
巧用下拉菜单给用户提供更好的体验：
Combo box
在用户需要填写一个潜在可填项很多的内容时，如国家/城市/大学名称，如果让用户从下拉菜单选择太耗时间，最好的做法是允许用户自己输入，同时以下拉菜单的方式为用户提供实时的结果匹配。
参考“携程”
image.png
单选框和复选框提高输入效率、减少数据分析时间：
灵活使用单选框和复选框，不但能够提供用户查找信息的效率、让用户拥有简单易使用的感受，同时在输入信息比较复杂的情况下，指定选项大大减轻了后台工作人员的负担。
给输入框添加默认文字：
在输入框中添加默认文字能更好的引导用户，比如在用户未输入内容时显示“输入你想搜索的内容”，在输入内容不符合规范时显示“输入有误”，等。
切换toggle
切换也是单选框的概念，即两个选项中一次仅能选择一个，两个相反的功能来回切换。
image.png
image.png
image.png
框: WAI-ARIA (可访问富互联网应用套件)作为最后的手段
在 W3C 的文档中, 在 HTML 中使用 WAI-ARIA , "WAI-ARIA的第一条规则" 是：
如果您可以将本机 HTML 元素或属性与您所需的语义和行为一起使用, 而不是重新调整元素的用途, 并添加 WAI-ARIA 角色、状态或属性以使其可访问, 那么请执行此操作。
WAI-ARIA , 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，指无障碍网页应用技术。她主要解决的一个问题：让残障人士能无障碍地访问网页上的动态内容，比如用静态的(screen-reading technologies)浏览器浏览用Ajax技术制作的动态网页，尤其帮助动态内容和用Ajax, HTML, JavaScript和相关技术开发的高级用户接口控件。
但是，使用WAI-ARIA不代表你不需要在普通的HTML组件中注意可用性，毕竟巧妙的设计能够满足残障人士的需要、也是普通用户的需要。制作网站时，随时注意以下几点：
键盘能够锁定网站的按键
键盘能够在网站中自由运作
用户习惯性使用的键盘按键能够触发事件
按钮的锁定状态要与未锁定状态区分
为视力障碍者设计能有效辨别的色彩
引导交互 GUIDING INTERACTION �
标签 Labels
帮助和说明 Help and instructions
反馈 Feedback
框: 小控件设计模式和库 BOX: Widget design patterns and libraries
小控件 Widget
必填字段 Required fields
提示 Tooltips
所有的设计都是为了“实现自我”，即让用户与功能互动起来,指导用户如何使用这些功能。网站通过各种说明、标签、提示性语言、图标，告知用户网站是如何运作的、有哪些功能可用。
网站设计者如何去设计出对用户“友好的”的功能引导，在一定程度上比功能本身要重要。让用户感觉到你的网站是“友好的”，意味着他们愿意长时间、多次光临你的网站。
GUI部件可以分为三种大类型：
Input output process
输入 输出 操作
学习参考资料
https://en.wikipedia.org/wiki/Widget_(GUI)
https://msdn.microsoft.com/library/windows/desktop/dn742399.aspx
image.png
image.png
image.png
image.png
image.png
image.png
image.png
网友评论